/*! Luxeritas Child CSS */
/* Luxeritas WordPress Theme - free/libre wordpress platform
 *
 * @copyright Copyright (C) 2015 Thought is free.
 * @license http://www.gnu.org/licenses/gpl-2.0.html GPL v2 or later
 * @author LunaNuko
 * @link https://thk.kanzae.net/
 * @translators rakeem( http://rakeem.jp/ )
 *
 * This program is free software; you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation; either version 2 of the License, or
 * (at your option) any later version.
 *
 *   Theme Name: Luxeritas Child Theme
 *   Template: luxeritas
 *   Text Domain: luxech
 *   Theme URI: https://thk.kanzae.net/wp/
 *   Description: SEO optimized, Responsive layout, Super Fast, Multi Feature, Bootstrap
 *   Author: LunaNuko
 *   Author URI: https://thk.kanzae.net/
 *   License: GNU General Public License v2 or later
 *   License URI: http://www.gnu.org/licenses/gpl-2.0.html
 *   Tags: one-column, two-columns, three-columns, right-sidebar, left-sidebar, custom-header, custom-background, custom-colors, custom-menu, theme-options, featured-image-header, editor-style, sticky-post, threaded-comments, translation-ready
 *   Since: 20151206
 *   Modify: 20170922
 *   Version: 2.00
 *   Template Version: 2
 *
 * ここから上を消すと正しく動作しなくなることがあります。
 * ( Erasing the elements above here might cause system issues. )
*/

/* 以下、好みに応じて子テーマ用のスタイルをお書きください。
 * ( Below here, please write down your own styles for the child theme. )
*/


/*------------------------------------------------------------
 ライン風の吹き出し
-------------------------------------------------------------*/
.balloon {
	margin-bottom: 40px;
}
.balloon figure {
	width: 75px;
	height: 75px;
}
.balloon-img-left {
	float: left;
}
.balloon-img-right {
	float: right;
}
.balloon-img-left figure {
	margin: 0 auto 0 0;
}
.balloon-img-right figure {
	margin: 0 0 0 auto;
}
.balloon img {
	width: 100%;
	height: 100%;
	margin: 0;
}
.balloon-img-caption {
	padding: 5px 0 0;
	white-space: nowrap;
	font-size: 12px;
}
div[class^="balloon-"] {
	padding: 30px;
	position: relative;
	border-radius: 12px;
}
div[class^="balloon-img"] {
	padding: 0;
	text-align: center;
}
div[class^="balloon-left"] {
	margin-left: 100px;
}
div[class^="balloon-right"] {
	margin-right: 100px;
}
.balloon p {
	margin: 0 0 20px;
}
.balloon p:last-child {
	margin-bottom: 0;
}
div[class^="balloon-left-"]::before,
div[class^="balloon-right-"]::before,
div[class^="balloon-left-"]::after,
div[class^="balloon-right-"]::after {
	position: absolute;
	content: '';
	border: 10px solid transparent;
	top: 12px;
}
div[class^="balloon-left-"]::before,
div[class^="balloon-left-"]::after {
	left: -20px;
}
div[class^="balloon-right-"]::before,
div[class^="balloon-right-"]::after {
	right: -20px;
}
div.balloon::after, div.balloon::before {
	clear: both;
	content: '';
	display: block;
}

/* 吹き出しの背景色 (左) */
div.balloon-left-line {
	background: #e4e8eb;
}
div.balloon-left-line::before,
div.balloon-left-line::after {
	border-right: 12px solid #e4e8eb;
}

/* 吹き出しの背景色 (右) */
div.balloon-right-line {
	background: #e4e8eb;
}
div.balloon-right-line::before,
div.balloon-right-line::after {
	border-left: 12px solid #bef18c;
}


/*グローバルナビ太文字*/
#nav, #gnavi ul, #gnavi li a, .mobile-nav {
    font-weight: bold;
}
/*グローバルナビ下の影*/
#nav {
    box-shadow: 0 4px 6px rgba(0, 0, 0, .18);
}

/* グローバルナビアニメーション */
#gnavi li a:after {
	content: '';
	width: 0;
	transition: all 0.3s ease;
	border-bottom: 3px solid #fff;
	display: block;
}
#gnavi li a:hover:after {
	width: 100%;
	border-bottom: 3px solid #fff;
}
#gnavi li:hover a span {
    border: 0;
}

/* 引用デザイン */
blockquote {
    position: relative;
    padding: 10px 20px;
    box-sizing: border-box;
    color: #4e4e4e;
    background: #fff3e1;
    border-left: none; 
}

blockquote:before{
    display: inline-block;
    position: absolute;
    top: 7px;
    left: 10px;
    vertical-align: middle;
    content: "\f10d";
    font-family: FontAwesome;
    color: #ffe2b8;
    font-size: 58px;
    line-height: 1;
    font-weight: 900;
}

blockquote:after{
    display: inline-block;
    position: absolute;
    bottom: 5px;
    right: 15px;
    vertical-align: middle;
    text-align: center;
    content: "\f10e";
    font-family: FontAwesome;
    color: #ffe2b8;
    font-size: 40px;
    line-height: 1;
    font-weight: 900;
}

blockquote p {
    position: relative;
    padding: 0;
    margin: 10px 0;
    z-index: 3;
    line-height: 1.7;
}

blockquote cite {
    position: relative;
    z-index: 3;
    display: block;
    text-align: right;
    color: #888888;
    font-size: 0.9em;
}

/* 見出しｈ２ */
.post h2 {
border-left: none; 
font-weight: bold;        
}        
        
.post h2:first-letter {
font-size: 2em; 
color: #ff4500; 
} 

/* 見出しｈ３ */
.post h3 {
        border-left: none;
        font-weight: bold;
        position: relative;
        padding: 0.2em 0 0 1.7em;
}
.post h3:before{
        background: #ff4500;/* 左上四角部分の色 */
        top: 0;/* 左上四角部分の位置 */
        left: 0.5em;/* 左上四角部分の位置 */
        height: 12px;/* 左上四角の大きさ */
        width: 12px;/* 左上四角の大きさ */
        position: absolute;
        transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        content: "";
}
.post h3:after{
        background:#ff8c00;/* 左下四角部分の色 */
        top: 0.8em;/* 左下四角部分の位置 */
        left: 0.2em;/* 左下四角部分の位置 */
        height: 8px;/* 左下四角の大きさ */
        width: 8px;/* 左下四角の大きさ */
        position: absolute;
        transform: rotate(15deg);
        -moz-transform: rotate(15deg);
        -webkit-transform: rotate(15deg);
        -o-transform: rotate(15deg);
        -ms-transform: rotate(15deg);
        content: "";
}

/* 見出しｈ４ */
.post h4 {
  position: relative;
  padding: .75em 1em .75em 1.5em;
  border: 1px solid #ccc;
  font-weight: bold;
}
.post h4::after {
  position: absolute;
  top: .5em;
  left: .5em;
  content: '';
  width: 6px;
  height: -webkit-calc(100% - 1em);
  height: calc(100% - 1em);
  background-color: #008000;/* 左の線の色 */
  border-radius: 4px;
}

/* 囲みボックス１ポイント */
.box1 {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    border: solid 3px #95ccff;
    border-radius: 8px;
}
.box1 .box-title {
    position: absolute;
    display: inline-block;
    top: -13px;
    left: 10px;
    padding: 0 9px;
    line-height: 1;
    font-size: 19px;
    background: #FFF;
    color: #95ccff;
    font-weight: bold;
}
.box1 p {
    margin: 0; 
    padding: 0;
}

/* 囲みボックス２メモ風 */
.box2{
    position: relative;
    background: #fff0cd;
    box-shadow: 0px 0px 0px 5px #fff0cd;
    border: dashed 2px white;
    padding: 0.2em 0.5em;
    color: #454545;
}
.box2:after{
    position: absolute;
    content: '';
    right: -7px;
    top: -7px;
    border-width: 0 15px 15px 0;
    border-style: solid;
    border-color: #ffdb88 #fff #ffdb88;
    box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.15);
}
.box2 p {
    margin: 0; 
    padding: 0;
}

/* 囲みボックス３破線 */
.box3 {
    padding: 0.5em 1em;
    margin: 2em 0;
    background: #fff8dc;
    border: dashed 2px #ffa500;/*点線*/
}
.box3 p {
    margin: 0; 
    padding: 0;
}

/*背景　ぴんく*/
.box8 {
    padding: 0.5em 1em;
    margin: 2em 0;
    color: #ff7d6e;
    background: #ffebe9;
    font-weight: bold;
}
.box8 p {
    margin: 0; 
    padding: 0;
}

/*--------------------------------------
  囲みボックス背景みどり
--------------------------------------*/
.box30 {
    padding: 0.5em 1em;
    margin: 2em 0;
    color: #2c2c2f;
    background: #dbebc4;/*背景色*/
}
.box3 p {
    margin: 0; 
    padding: 0;
}

/* アンダーラインカスタマイズ ピンク*/
.marker_pink {
background: linear-gradient(transparent 50%, #f6bfbc 50%);
}

/* カテゴリーfaアイコン表示 */
#side .widget_categories ul li:before {
    font-family: FontAwesome;
    content: "\f02d";
    margin-right: 5px;
    display: inline-block;
    color: #E44D26; /* アイコンの色 */
}
/* 子カテゴリーfaアイコン表示 */
#side .widget_categories ul li li:before {
    font-family: FontAwesome;
    content: "\f0da";
    margin-right: 5px;
    display: inline-block;
    color: #E44D26; /* アイコンの色 */
}
/*--------------------------------------
  目次ーカスタマイズ
--------------------------------------*/
/*目次の数字を消したい*/
span.toc_number.toc_depth_1 {
display: none;
}
/*小見出し*/
.toc_number.toc_depth_2 {
display: none;
}
ul.toc_list >li,
.toc_list ul > li,
.toc_list ul ul > li {
    padding: 1px 0;
}
.toc_list ul > li:before {
    color: #ecacb5;
    content: '\f105';
    font-family: FontAwesome;
    margin-right: 5px;
    font-weight: bold;    
}
.toc_list ul ul > li:before {
    color: #ecacb5;
    content: '\f101';
    font-family: FontAwesome;
    margin-right: 5px;
}

/*--------------------------------------
  関連記事
--------------------------------------*/
.here-site {
    font-size: 16px;
    background-color: #f39800;
    color: #fff;
    margin-right: 5px;
    padding: 2px 4px;
    border-radius: 3px;
}

/* 記事一覧下 */
.posts-list-under-widget, .posts-list-upper-widget, .posts-list-middle-widget {
    border: none;
    padding: 0;
}

/*--------------------------------------
  リスト表示をカスタマイズ
--------------------------------------*/
/* リスト数字 */
.post ul, .post ol {
	padding: 0 0 0 10px; /* 上 右 下 左 */
}
.post ol {
	counter-reset: li;
}
.post ol > li {
	list-style: none;
	position: relative;
	padding-left: 3rem; 
	line-height: 3.2rem;
}
.post ol > li:before {
	counter-increment: li;
	content: counter(li);
	background: #f39800; /*ピンク*/
	color: #ffffff; 
	border-radius: 50%; 
	text-align: center; 
	width: 2.2rem; 
	height: 2.2rem;
	position: absolute; 
	left: 0rem; 
	top: .5rem; 
	line-height: 2.2rem;
	font-family: 'Arial',sans-serif;
}
/* 箇条書き */
.post ul{
	list-style-type:none;
        font-size: 16px;
}
.post ul > li:before {
	content: "\f058";
	font-family: FontAwesome;
	color: #65ab31;
        padding-left: 3rem;
	padding-right: 5px;
	line-height: 1.5;
}
.post ul > li > ul > li:before {
	content: "\f058";
	color: #65ab31;
}
.post ul > li > ul > li > ul > li:before {
	color: #65ab31;
}

/*--------------------------------------
  アイコンボックスデザイン１ぴんく・ビックリマーク
--------------------------------------*/
.icon-box1{
background-color:#fdf2f2;
padding: 20px 20px 20px 60px;
position: relative;
margin-top: 1em;
margin-bottom: 1em;
display:block;
border: solid 2px #f3aca9;
border-radius: 5px;/*角の丸み*/
}
.icon-box1::before{
 font-family: "FontAwesome";
 content: '\f06a';
 font-size: 40px;
 position: absolute;
 top: 10px;
 left: 10px;
 color:#f3aca9;
}
/* この記事を書いた人 */
.box99 {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    border: solid 3px #524e4d;
}
.box99 .box-title {
    position: absolute;
    display: inline-block;
    top: -27px;
    left: -3px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    vertical-align: middle;
    font-size: 17px;
    background: #524e4d;
    color: #ffffff;
    font-weight: bold;
    border-radius: 5px 5px 0 0;
}
.box99 p {
    margin: 0;
    padding: 0;
}

/* 記事一覧下 */
.posts-list-under-widget, .posts-list-upper-widget, .posts-list-middle-widget {
    border: none;
    padding: 0;
}

/* スマホの吹き出し */
@media only screen and (max-device-width: 575px) {
.balloon-left, .balloon-right {
	max-width: calc(100% - 80px);
}
}