@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Template:   cocoon-master
Version:    0.0.5
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/


/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1240px以下*/
@media screen and (max-width: 1240px){
  /*必要ならばここにコードを書く*/
}

/*1030px以下*/
@media screen and (max-width: 1030px){
  /*必要ならばここにコードを書く*/
}

/*768px以下*/
@media screen and (max-width: 768px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}

/************************************
** ■見出しカスタマイズ
************************************/
/*見出し初期化*/
.article h2,
.article h3,
.article h4,
.article h5,
.article h6
{
padding: 0;
margin: 0;
background:none;
border-collapse: separate;
border-spacing: 0;
border-top: none;
border-right: none;
border-bottom: none;
border-left: none;
line-height: normal;
position:relative;
}
/*見出しデザインを変える場合はこれより下に記載してください*/

.article h1{
	font-weight: bold;
	padding: 0;
	margin-top:5px;
	margin-bottom:25px;
}

.article h2 {
	color: #ffffff;/*文字色*/
	padding: 0.7em;/*文字周りの余白*/
	background: #333333;/*背景色*/
	border-radius: 4px 4px 4px 4px;/*左側の角を丸く*/
	margin-bottom: 20px;
	　
}

.article h3 {
	padding: 0.7em 0.3em;/*上下 左右*/
	border-bottom: solid 4px black;
	margin-bottom: 15px;
} 

.article h4 {
	padding: 0.7em 0.4em;/*上下 左右の余白*/
    border-left: solid 6px #000000;/*左線*/

}
.page .article h2 {
	color: #222222;/*文字色*/
	padding: 0.7em;/*文字周りの余白*/
	background: #ffffff;/*背景色*/
	padding: 0.7em 0.3em;/*上下 左右*/
	border-bottom: solid 4px black;
	margin-bottom: 15px;
}


/*
 * Cocoon風タブボックス *
 ***********************/
/* タイトル */
.title-simple {
	position: absolute;
	top: -1.9em;
	left: -1px;
	font-size: 1em;
	font-weight: bold;
	display: inline-block;
	padding: 0.2em 1em 0;
	border-radius: 5px 5px 0 0;
	color: #fff;
	background: #666; /* 背景グレー：いろ差し替え場所 */
}
/* BOX */
.box-simple {
	position: relative;
	border-radius: 0 5px 5px;
	padding: 1.5em 1em 0.5em;
	margin: 2.5em 0 2em;
	box-shadow: 2px 3px 3px #ddd;
	border: 1px solid #bbb; /* 枠グレー：色の差し替え場所 */
}
/* スマホ以外481px以上 */
@media screen and (min-width: 481px) {
	.box-simple {
		margin: 3em 1em 2em; /* 上 左右 下 */
	}
}
/* ここまでCocoon風 */
/*
 * シンプルタブボックス *
 **********************/
/* タイトル */
.box-title {
	position: absolute;
	top: -1em; /* タイトル位置マイナス値あげると上  */
	left: 1em; /* 左から1文字分右へ */
	font-size: 1.1em; /* サイズ1.1文字分 */
	font-weight: bold; /* フォント太く */
	display: inline-block;
	padding: 0.2em 0.8em 0; /*内側余白:上下 左右*/
	border-radius: 5px; /* 角丸 */
}
/* BOX */
.title-box {
	position: relative;
	border-radius: 5px;
	padding: 1.5em 1em 0.5em; /* 内側余白:上 左右 下 */
	margin: 2.5em 0 2em; /* 外側余白: 上 左右 下 */
	box-shadow: 2px 3px 3px #ddd;
}
/* スマホ以外481px以上 */
@media screen and (min-width: 481px) {
	.title-box {
		margin: 3em 1em 2em; /* 上 左右 下 */
	}
}
/* gray */
.title-gray {
	color: #666;
	background: #fff;
}
.box-gray {
	border: #ddd 1px solid;
}
/* pink */
.title-pink {
	color: #ff7d7d;
	background: #fff;
}
.box-pink {
	border: #ff7d7d 1px solid;
}
/* blue */
.title-blue {
	color: #3847fa;
	background: #fff;
}
.box-blue {
	border: #a0a8ff 1px solid;
}
/* brown */
.title-brown {
	color: #bb5f03;
	background: #fff;
}
.box-brown {
	border: #efb072 1px solid;
}
/* green */
.title-green {
	color: #4CAF50;
	background: #fff;
}
.box-green {
	border: #9dd9a0 1px solid;
}	
/*商品リンクカスタム*/
/*アイテムボックスの枠を変更*/
.product-item-box{
  border: 4px double #dfdfdf;/*枠線を灰色の２重線にする*/
  box-shadow: 0 1px 2px rgba(0,0,0,.29);/*枠線に薄い影をつける*/
}
/*商品名を調整*/
.product-item-title{
  font-size:95%;/*文字の大きさを調整*/
  padding: 1rem;/*文字を表示位置を調整*/
}

/*商品名リンクを調整*/
.product-item-title-link{
  font-weight:bold;/*商品名を太字に変更*/
}

/*商店名を調整*/
.product-item-maker{
  text-align:center;/*商店名を中央寄せ*/
  font-size:90%;/*文字の大きさを調整*/
  font-weight:lighter;/*文字を細く変更*/
  margin:.5em;/*文字位置の調整*/
}
/*ボタンのはみ出し部分を非表示*/
#main{
  overflow:hidden;
}

/*ipad以下の大きさのデザインを調整*/
@media screen and (max-width: 768px){/*ipad以下の大きさのデザインを調整*/
.booklink-image, .kaerebalink-image, .tomarebalink-image, .product-item-thumb {
  width: 100%;/*商品画像を中央寄せ*/
} 
.booklink-info, .kaerebalink-info, .tomarebalink-info, .product-item-content {
  margin-top: 8em;/*商品名以下の文章を画像の下に下げる*/
}
.booklink-link2, .kaerebalink-link1, .tomarebalink-link1, .product-item-buttons {
  display: flex;/*ボタンをフレックスボックス化*/
  flex-flow: column;/*ボタン縦並びに変更*/
  justify-content: space-between;/*ボタンを均等配置*/
  width:100%;/*ボタンの長さを調整*/
}
.booklink-link2>*>a, .kaerebalink-link1>*>a, .tomarebalink-link1>*>a, .product-item-buttons>*>a{
  font-size:85%;/*文字の大きさを調整*/
  padding: .8em;/*ボタンの大きさを調整*/
    }
}

/*iPhone5Sぐらいの大きさのデザインの調整*/
@media screen and (max-width: 480px){
.booklink-image, .kaerebalink-image, .tomarebalink-image, .product-item-thumb {
  width: 100%;/*商品画像の大きさの調整*/
}
.booklink-link2, .kaerebalink-link1, .tomarebalink-link1, .product-item-buttons {
  width:100%;/*ボタンの長さを調整*/
}
}
.shoplinkamazon a {
    background: #FFC776;
    color: #fff;
    box-shadow: 0 8px 12px -5px rgba(0,0,0,.3);
    transition: .4s;
	border-radius: 5px 5px 5px 5px;
}
.shoplinkamazon a:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 15px -5px rgba(0,0,0,.3);
    color: #fff;
    opacity: 1;
}
.shoplinkrakuten a {
    background: #FF7D7D;
    color: #fff;
    box-shadow: 0 8px 12px -5px rgba(0,0,0,.3);
    transition: .4s;
	border-radius: 5px 5px 5px 5px;
}
.shoplinkrakuten a:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 15px -5px rgba(0,0,0,.3);
    color: #fff;
    opacity: 1;
}
.shoplinkyahoo a {
    background: #6EC4FF;
    color: #fff;
    box-shadow: 0 8px 12px -5px rgba(0,0,0,.3);
    transition: .4s;
	border-radius: 5px 5px 5px 5px;
}
.shoplinkyahoo a:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 15px -5px rgba(0,0,0,.3);
    color: #fff;
    opacity: 1;
}
@media screen and (max-width: 480px){
    .shoplinkamazon a, .shoplinkrakuten a {
	margin-bottom: 14px;
    }
    .shoplinkamazon a, .shoplinkrakuten a, .shoplinkyahoo a {
	box-shadow: 0 8px 8px -4px rgba(0,0,0,.3);
    }
}

/*--------------------------------------
  赤アンダーラインカスタム
--------------------------------------*/
.marker-under-red {
background: linear-gradient(transparent 75%, #ffadad 75%);
	font-weight: bold;
}

/* 目次カスタム */
.toc{
	background:#F9F9F9; /* 目次全体の背景色を変える場合はここを変更 */
	border:none;
	display:block;
	border-top:5px solid;
	border-top-color:#65ace4;
	box-shadow: 0 2px 2px rgba(0,0,0,0.2);
	padding: 15px 0px;
}
/* 目次の文字指定 */
.toc-title {
	text-align:left;
	margin: 0 20px 20px -10px;
	padding-left: -20px;
	font-size: 23px;
        font-weight: 700;
	color: #65ace4 ; /* 目次の文字色を変える場合はここを変更 */
}
/* 目次のアイコン設定 */
.toc-title:before {
	top: 0;
        left: -45px;
        width: 50px;
        height: 50px;
        font-family: "Font Awesome 5 Free";
	content : "\f03a"; /* アイコンを変える場合はここを変更 */
	font-size:20px;
	margin-right:5px;
	color:#FFF; /* アイコンの色を変える場合はここを変更 */
	background-color:#65ace4; /* アイコンの背景色を変える場合はここを変更 */
	border-radius: 50%;
	-webkit-border-radius: 50%;
 	-moz-border-radius: 50%;
	padding:10px;
}
/* 目次のデザインカスタマイズ */
.toc-content ol {
  	padding: 0 0.5em;
  	position: relative;
}
.toc-content ol li {
  	line-height: 1.5;
  	padding: 0.7em 0 0.5em 1.4em;
  	border-bottom: dashed 1px silver;
  	list-style-type: none!important;
}

/* 目次の各節の先頭にあるアイコンを設定 */
.toc-content ol li:before {
  	font-family: "Font Awesome 5 Free";
  	content: "\f138"; /* アイコンを変える場合はここを変更 */
  	position: absolute;
  	left : 1.2em;
  	color: #65ace4; /* 色を変える場合はここを変更 */
        font-weight: bold;
}
.toc-content ol li:last-of-type {
	border-bottom: none;
}
.toc-content .toc-list li {
	font-weight:700; /* h2のみ太文字に */
}
.toc-content .toc-list li li {
	font-weight:normal; /* h3以降の文字サイズを普通に */
}

/*--------------------------------------
  エントリーカード(ホーム以外)カスタム
--------------------------------------*/
.entry-card-thumb {
	transition-duration: 0.3s; /*アニメーションの時間*/
    box-shadow: 0px 4px 15px -5px rgba(85,85,85,0.75); /*通常時の画像の影*/
}
.entry-card-thumb:hover {
    transform: translateY(-6px); /*マウスホバーで上に移動*/
	box-shadow: 0px 8px 18px -5px rgba(85,85,85,0.75); /*マウスホバー時の画像の影*/
}
.entry-card-thumb img { /*画像下の隙間を消す*/
	vertical-align: bottom;
}
.a-wrap:hover { /*マウスホバー時の全体の背景色を消す*/
    background: none;
}
.entry-card-title {
    margin-top: 10px; /*上に余白を付ける*/
	line-height: 1.5; /*行間を広く*/
}
.entry-card-title:hover {
    color: #49add1; /*マウスホバー時の色*/
}
@media screen and (max-width: 768px){
    .entry-card-title {
     font-size: 14px; /*スマホでの文字の大きさ*/
		line-height: 1.4; /*スマホでの行間*/
}
}
/* 本文の余白*/
.article{
width:98%;/* 余白 */
margin: 0 auto;
}
/*--------------------------------------
  キャプションを変更
--------------------------------------*/
.entry-content .wp-caption {
max-width: 100%;/*画像の幅をいっぱいに*/
margin: 0;/*外側の余白なし*/
padding: 0;/*内側の余白なし*/
border: none; /* 枠線を消す */
background: none; /* 背景 なし*/
}
.entry-content .wp-caption p.wp-caption-text {
margin-top: 0.1em; /* 画像との余白 */
font-size: .7em; /* キャプションの文字の大きさ */
color: #555555;/* 文字の色 */
font-style: italic; /* 斜体 */
text-align: left; /* ひたり揃え */
}

/************************************
** トップページカスタマイズ
************************************/
.home #main .large-thumb-on{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0.8em 0;
}
.home #main .large-thumb-on a{
	width: 50%;
}
.home #main .large-thumb-on a:hover{
    background:unset;
}

.home .widget-entry-cards .e-card {
	font-size: 14px;
	box-shadow: 0 0 4px rgba(0,0,0,.15);
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    height:100%;
}
.home .widget-entry-cards .e-card:hover {
    transform: translateY(-3px);
    box-shadow: 0px 3px 18px 3px rgba(0,0,0,.08);
}

/* フロント固定ページの見出しをアイキャッチ内に*/
.home .widget-entry-cards.large-thumb-on .card-content{
	max-height:50%;
}

/*(スマホ)480px以下*/
@media screen and (max-width: 480px){
    .home #main h1{
        margin: 1em 0 0;
        padding: 0;
        font-size:0.8em;
    }
    .home .widget-entry-cards .e-card {
        margin:0 5px;
    }
    .home #main .large-thumb-on a {
        width: 100%;
        padding: 0;
        margin:0 0 15px;
    }
    .home .mobile-2{
        justify-content:space-between;
    }
    .home .mobile-2 a{
        width:48% !important;
    }
    .home .mobile-2 figure img {
        object-fit: unset !important;
        height: auto !important;
    }
    .home #main .large-thumb-on .new-entry-card-title{
        line-height:1.3;
    }
}

/************************************
** ボタン
************************************/
.p-button {
	max-width: 280px;
    margin: 0 auto;
}
.p-button a {
	display: block;
	margin:25px 0;
	padding: 0.8em 1em;
	border-radius: 2em;
	color: #fff;
	font-size: 15px;
    font-weight: 700;
    text-decoration: none;
	background: #65ace4;
    text-align: center;  
	box-shadow: 0 2px 4px 
	rgba(0,0,0,0.3);
	transition: .3s;
}
.p-button a:hover{
	box-shadow: 0 0 2px
	rgba(0,0,0,0.2);
}

/*フロント固定ページのタイトルを非表示*/
.home.page .entry-title{
  display: none;
}

/*固定ページの投稿日を非表示*/
.page .post-date{
  display: none;
}

/*固定ページの更新日を非表示*/
.page .post-update{
  display: none;
}

/*お問い合わせページのSNSシェアを非表示*/
#post-230 .sns-share{
  display: none;
}

/*プライバシーポリシーページのSNSシェアを非表示*/
#post-211 .sns-share{
  display: none;
}

/*お問い合わせページのSNSフォローを非表示*/
#post-230 .sns-follow{
  display: none;
}

/*プライバシーポリシーページのSNSフォローを非表示*/
#post-211 .sns-follow{
	display: none;
}
/*SNSボタンカスタム*/
.sns-share-message{
	font-weight: bold; /*太字*/
	color: #444444; /*文字色*/
}
/* SNSフォローボタンカスタム*/
.sns-follow-message{
	font-weight: bold; /*太字*/
	color: #444444; /*文字色*/
}
.sns-follow-buttons {
	justify-content: center; /*中央寄せ*/
}
.sns-follow-buttons a {
	border-radius: 50%; /*丸くする*/
	font-size: 30px; /*アイコンのサイズ*/
	margin: 0 10px; /*ボタン同士の間隔*/
}
#main .sns-follow a {
	width: 55px; /*ボタンの横幅*/
	height: 55px; /*ボタンの高さ*/
}
/*--------------------------------------
  プロフィールボックスカスタム
--------------------------------------*/
/*プロフィールSNSフォローを非表示*/
.author-box .sns-follow-buttons {
	display: none!important;
}
.author-name {
    font-size: 1.1em;
    font-weight: bold;
    margin-bottom: 10px;
}
.author-box .author-name a {
    text-decoration: none;
    color: #333;
}
.author-box p {
    margin-top: 0.3em;
    line-height: 1.6;
}
.author-box p a {
    text-decoration: none;
    color: #008cee;
}
.author-box p a:hover {
    text-decoration: underline;
    color: #008cee;
}
#main .author-box {
	border: none;
    border-radius: 3px;
    margin: 1em 0;
    line-height: 1.4;
    position: relative;
    padding: 1.4% 2% 1.8% 0;
    box-shadow: 0 5px 20px -5px rgba(105,115,131,.35);
}
#main .author-widget-name {
    display: inline-block;
    position: relative;
    margin: 10px 0 0 -170px;
    padding: 6px 12px;
    border-radius: 20px;
    background: #eaedf2;
    color: #555;
    font-size: 14px;
    font-weight: 700;
    z-index: 1;
}
#main .author-widget-name::before {
    position: absolute;
    content: '';
    z-index: -1;
    bottom: -30px;
    left: 60px;
    border: 15px solid transparent;
    border-top: solid 30px #eaedf2;
    transform: rotate(-40deg);
}
#main .author-thumb {
    float: left;
    margin: 0;
    padding-top: 70px;
    width: 200px;
    text-align: center;
}
#main .author-thumb img {
	border: solid 5px #dfe2e8;
    width: 100px;
}
#main .author-content {
    margin: -30px 0 0 200px;
    padding-left: 30px;
    border-left: 2px #eaedf2 dashed;
}
#main .author-box .author-name {
    line-height: 1;
}
#main .author-box p {
    font-size: .95em;
}
@media screen and (max-width: 480px){
#main .author-box {
    margin: 1em 10px;
    padding: 16px;
    text-align: center;
}
#main .author-widget-name {
    margin: 0;
}
#main .author-widget-name::before {
    left: 50px;
}
#main .author-thumb {
    float: none;
    margin: 0;
    padding-top: 20px;
    width: 100%;
}
#main .author-box .author-name {
    font-size: 14px;
}
#main .author-content {
    margin: 10px 0 0 0;
    padding-left: 0;
    border: none;
}
#main .author-box p {
    font-size: 14px;
    text-align: left;
}
/*モバイルグローバルメニューを一列にに*/
@media screen and (max-width: 768px) {
	#navi .navi-in > .menu-mobile li {
		width: 33%;
	}
	#navi .navi-in > .menu-mobile li a {
		font-size: 12px; /*場合によってフォントサイズを小さく*/
	}
}