@charset "UTF-8";

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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/*
=======================================================================
記事用装飾設定
=======================================================================
*/
/* ------------------------------------
h3
------------------------------------ */
.article h3 {
  border-left: none;
  border-right: none;
  border-top: none;
  border-bottom: 2px solid #375a7f;/* サイトのキーカラー */
  font-size: 22px;
  padding: 6px 10px;
}


/* ------------------------------------
h4
------------------------------------ */
.article h4 {
  border-top: none;
  border-bottom: none;
	border-left: solid 8px #375a7f;/* サイトのキーカラー */
}


/* ------------------------------------
テキスト
------------------------------------ */
/*文字サイズ少し大きく*/
.bold,
.bold-red,
.bold-blue {
	font-size: 1.2em;
	line-height: 1em;
}


/*青色*/
.blue {
  color: #4d7cae;
}

/*太字で青色*/
.bold-blue {
  font-weight: bold;
  color: #4d7cae;
}


/* ------------------------------------
区切りのライン
------------------------------------ */
.entry-content > hr {
	height: 1px;
    border: none;
    background: #e2e2e2;
	margin-top: 4em;
	margin-bottom: 4em;
}



/* ------------------------------------
テーブル（表）
------------------------------------ */
  table th,
  table td {
    padding: 3px;
    font-size: 0.8rem;
  }

table.center td {
	text-align: center;
}


/* ------------------------------------
下半分のマーカー色（km） 
------------------------------------ */
.marker-under {
 background:  linear-gradient(transparent 40%, #fcfa70 40%);
}
.marker_sitec {
	background: #375a7f;/* サイトのキーカラー */
	color: #fff;
	font-weight: bold;
	padding: 5px;
}


/* ------------------------------------
注釈文字サイズ（small）
------------------------------------ */
small {
	font-size: 0.8em;
	line-height: 1.5em;
}


/* ------------------------------------
スピーチバブル
------------------------------------ */
.speech-person {
  width: 15%;
  min-width: 15%;
}



/* ------------------------------------
余白ボックス
------------------------------------ */
.pddBtm30 {
	padding-bottom: 30px;
}
.pdd_tb20 {
	padding: 20px 0;
}

/* ------------------------------------
画像配置用
------------------------------------ */
/* 本文内の中央寄せ画像 */
.imgContent {
	width: 70%;
	height: auto;
	margin: 0 auto 2em;
}
.imgContent img {
	width: 100%;
	height: auto;
}

/* デモ用 */
.imgArrangement {
	width: 100%;
	height: 20em;
	line-height: 20em;
	font-size: 1.5em;
	background: #ccc;
	color: #fff;
	text-align: center;
	font-weight: bold;
}

/* ------------------------------------
画像引用
------------------------------------ */
.imgQuote blockquote {
	border: none;
	padding: 0;
	margin: 1em 0 0;
	background-color: #fff;
}
.imgQuote blockquote p {
	margin: 0 auto;
	text-align: center;
}
.imgQuote blockquote img {
	width: 100%;
	height: auto;
}
.imgQuote blockquote::before, .imgQuote blockquote::after {
	display: none;
}
.imgQuote a {
	color: #666;
	text-decoration: none;
}
.imgQuote a small {
	display: inline;
}
.imgQuote .quoteSite {
	margin: 0.5em 0 0 0;
	line-height: 1em;
}

/* ------------------------------------
番号つきリストを丸囲み数字化
------------------------------------ */
.entry-content ol {
	counter-reset: number;
}
.entry-content ol li {
	list-style: none;
	position: relative;
	padding-left: 1.4em;
	margin: 1em 0;
}
.entry-content ol > li:before {
	counter-increment: number;
	content: counter(number);
	background: #666;
	box-shadow: 0 0 5em rgba(51, 51, 51, 0.15) inset;
	color: #fff;
	width: 1.6em;
	height: 1.5em;
	font-size: 0.7em;
	font-weight: bold;
	font-family: 'Lato', sans-serif;
	display: block;
	text-align: center;
	line-height: 1.7em;
	border-radius: 50%;
	position: absolute;
	left: 0;
	top: 0.4em;
}

.entry-content .toc-content ol li { /* ただし、目次の番号つきリストはただの数字 */
	list-style: decimal;
	position: relative;
	padding-left: 0;
	margin: 0.5em 0;
}
.entry-content .toc-content ol > li:before {
	display: none;
}



/* ------------------------------------
目次
------------------------------------ */
.article .toc li {
  margin: 15px 0 0;
  position: relative;
  padding-left: 1.5em;
}
.toc li::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  background: #375a7f;
  position: absolute;
  top: 0.5em;
  left: 0;
}
.article .toc li a {
  text-decoration: underline;
}




/* ------------------------------------
シンプルなグレー囲み（詳細情報など）
------------------------------------ */
.simple_grayBox {
	border: solid 1px #ccc;
	padding: 4%;
	width: 80%;
	margin: 1.5em auto;
}
.simple_grayBox h4 {
	margin: 0 0 1em;
}


/* ------------------------------------
シンプルな黄色囲み（詳細情報など）
------------------------------------ */
.simple_yellowBox {
	border: solid 1px #ded647;
	background: #fff8d4;
	padding: 4%;
	width: 80%;
	margin: 1.5em auto;
	border-radius: 4px;
}
.simple_yellowBox h4 {
	margin: 0 0 1em;
}



/* ------------------------------------
ボタン共通設定
------------------------------------ */
.btn {
	text-align: center;
	display: block;
}
.btn a {
	background: #4d7cae;
	color: #fff;
	font-weight: bold;	
	text-decoration: none;
	display: inline-block;
	padding: 10px;
	border-radius: 4px;
}
.btn a:hover {
	opacity: 0.7
}


/* ------------------------------------
中央ボタン（青）
------------------------------------ */
.btn_blue_center a {
	background: #4d7cae;
	min-width: 50%;
	margin: 1em auto;
}
/* ------------------------------------
中央ボタン（オレンジ）
------------------------------------ */
.btn_blue_center a {
	background: #f8b739;
	min-width: 50%;
	margin: 1em auto;
}

/* ------------------------------------
ボタン（青枠）
------------------------------------ */
.btn_frame_blue a {
	border: solid 2px #4d7cae;
	min-width: 50%;
	margin: 1em auto;
	color: #4d7cae;
	background: #fff;
}

/* ------------------------------------
公式サイトボタン
------------------------------------ */
.btn_official {
	padding: 0;
	max-width: 480px;
	margin: 0 auto 1em;
}
.btn_official a {
	background: #ef8786;
	width:100%;
}

/* ------------------------------------
Amazonボタン
------------------------------------ */
.btn_amazon {
	padding: 0;
	margin-bottom: 1em;
}
.btn_amazon a {
	background: #232f3e;
	width:100%;
}
/* ------------------------------------
楽天ボタン
------------------------------------ */
.btn_rakuten {
	padding: 0;
	margin-bottom: 1em;
}
.btn_rakuten a {
	background: #bf0000;
	width:100%;
}


/* ------------------------------------
カラーボックス
------------------------------------ */
.c_box {
	padding: 1em 4%;
	margin: 2em 0 2em;
	border: 2px solid #dddddd;
	border-radius: 0.2em;
}
.c_box.intitle {
	padding-top: 0;
	padding-bottom: 1.4em;
}
.c_box.intitle .box_title {
	position: relative;
	top: -0.85em;
	padding: 0.1em 0.5em;
	background: #6d6d6d;
	color: #ffffff;
	font-weight: bold;
	border-radius: 0.2em;
	display: inline-block;
	vertical-align: bottom;
}
.c_box ul,
.c_box ol { /* カラーボックス内のリストは左側の余白なし */
	padding-left: 4%;
}


/* カラーボックス ピンク */
.c_box.pink_box {
	background: #ffeeee;
	border-color: #ef8786;
	color: #775454;
}
.c_box.pink_box .box_title {
	background: #ef8786;
}

/* カラーボックス グレー */
.c_box.gray_box {
	background: #ececec;
	border-color: #9c9c9c;
	color: #555555;
}
.c_box.gray_box .box_title {
	background: #9c9c9c;
}

/* カラーボックス イエロー */
.c_box.yellow_box {
	background: #fff8d4;
	border-color: #ded647;
	color: #636546;
}
.c_box.yellow_box .box_title {
	background: #ded647;
}


/* ------------------------------------
定義リスト_下点線（商品詳細情報など）
------------------------------------ */
dl.line_under{
	width:100%;
     box-sizing: border-box;
     display: flex;
     flex-wrap: wrap;
}
dl.line_under dt{
     border-top:1px dashed #666666;
     float: left;
     width:30%;
     padding:2% 0;
	font-weight: bold;
	display: flex;
}
dl.line_under dd{
	width: 70%;
     border-top:1px dashed #666666;
     padding: 2% 0 2% 2%;
     margin-left: 0;
}
dl.line_under dt:first-child{
     border-top:none;
}
dl.line_under dt:first-child + dd{
     border-top:none;
}

/* ------------------------------------
商品情報（2カラム）
------------------------------------ */
.productBox_col2 {
}
.productBox_col2::after {
	content: "";
	display: block;
	clear: both;
}
/* 商品画像 */
.productBox_col2 .imageBox {
	width: 48%;
	float:left;
}

/* 商品名・詳細情報 */
.productBox_col2 .infoBox {
	width: 48%;
	float: right;
}


/* ------------------------------------
ランキングボックス（商品一覧）
------------------------------------ */
.rankingBox {
	border-bottom: solid 1px #ccc;
	padding: 20px;
	margin: 0;
}
.rankWrap div.rankingBox:nth-last-of-type(1) {
	border-bottom: none;
}

.rankingBox a {
	text-decoration: none;
	display: block;
}	
.rankingBox::after {
	content: "";
	display: block;
	clear: both;
}

/* 商品写真（サムネイル） */
.rankingBox .ph_product {
	width: 30%;
	display: block;
	float: left;
	position: relative;
	margin: 0;
}
.rankingBox .ph_product .imgQuote blockquote {
	margin: 0;
}
.rankingBox .ph_product .imgQuote blockquote p {
	text-align: left;
}
.rankingBox .ph_product .rank {
	display: block;
	font-weight: bold;
	font-size: 1.1em;
	color: #fff;
	padding: 5px 0 0 80px;
	position: absolute;
	top: 0;
	left: -70px;
	width: 140px;
	height: 70px;
	background: linear-gradient(to top left, transparent 50%, #232323 50.1%) bottom right / 50% 100% no-repeat;
}

/* 1位 */
.rankingBox .ph_product .rank.no1 {	background: linear-gradient(to top left, transparent 50%, #FFD700 50.1%) bottom right / 50% 100% no-repeat;}
/* 2位 */
.rankingBox .ph_product .rank.no2 {	background: linear-gradient(to top left, transparent 50%, #C0C0C0 50.1%) bottom right / 50% 100% no-repeat;}
/* 3位 */
.rankingBox .ph_product .rank.no3 {	background: linear-gradient(to top left, transparent 50%, #C47222 50.1%) bottom right / 50% 100% no-repeat;}


/* 商品情報 */
.rankingBox .infoBox {
	float: right;
	width: 65%;
}
.rankingBox .infoBox p {
	margin: 0 0 10px 0;
	line-height: 1.5em;
}

/*
.rankingBox .infoBox .rank {
	display: inline-block;
	font-weight: bold;
	font-size: 1em;
	margin-right: 1.3em;
	color: #fff;
	background: #232323;
	padding: 3px 3px 3px 5px;
	position: absolute;
	top: -3px;
	left: 0;
}
.rankingBox .infoBox .rank::after {
	content: "";
	position: absolute;
	border-top: 14px solid transparent;
	border-bottom: 14px solid transparent;
	border-left: 14px solid #232323;
	top: 0;
	right: -14px;
}
*/

.rankingBox .infoBox .productName {
	font-size: 1.3em;
	font-weight: bold;
	display: inline-block;
}
.rankingBox .infoBox .maker {
	display: block;
	font-size: 0.6em;
	color: #666;
	font-weight: normal;
	margin-top: 5px
}

.rankingBox .infoBox .btn_frame_blue {
	width: 300px;
	margin: 0;
	padding: 0;
}

/* ------------------------------------
口コミ
------------------------------------ */
.reviewBox {
	font-size: 0.9em;
	line-height: 1.5em;
	margin-bottom: 15px;
}
.reviewBox .flexWrap{
	display: flex;
    justify-content: center;
    align-items: center;
}
.reviewBox img {
	width: 19%;
	display: block;
	float: left;
	margin-right: 5%;
}
.reviewBox .review_title {
	font-weight: bold;
	font-size: 1.3em;
	line-height: 1.5em;
	margin-bottom: 10px;
	float: right;
	display: block;
	width: 75%;
}
.reviewBox .reviewer {
	font-weight: bold;
	font-size: 0.8em;
	line-height: 1.5em;
	margin: 5px 0;
	display: block;
}
.reviewBox .reviewer.woman {	color: #ef8786;}
.reviewBox .reviewer.man {	color: #4d7cae;}
.reviewBox .txt {
	clear: both;
	padding-top: 1px;
}



/* ------------------------------------
フキダシ（メリット・デメリットなど）
------------------------------------ */
/* 
.fukidashi {
    margin:20px 0;
}
.fukidashi dt {
    position: relative;
    color: #fff;
    font-weight:bold;
    float:left;
    clear:both;
    padding:10px 15px;
    background-color: #DE3737;
}
.fukidashi dd {
    padding:10px 30px;
    display:inline-block;
    background-color:#F8F8F8;
    margin:0;
}
.fukidashi dt::after {
    left: 100%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(136, 183, 213, 0);
    border-width: 10px;
    margin-top: -10px;
    border-left-color: #DE3737;
}
 */

/*
=======================================================================
サイトワイド（サイドバー）
=======================================================================
*/

/* サイトワイド 登場人物プロフィール */

#characterBox .imgCharacter {
	width: 130px;
	margin: 0 auto 10px;
}
#characterBox.imgCharacter img {
	display: block;
	width: 100%;
	height: auto;
}
#characterBox dt {
	text-align: center;
	font-size: 1.1em;
	line-height: 1.3em;
	padding-bottom: 10px;
}

#prof_mutan {
	margin-top: 20px;
}



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

}

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

/*
=======================================================================
サイトワイド（サイドバー）
=======================================================================
*/

/* サイトワイド 登場人物プロフィール */

#characterBox .imgCharacter {
	width: 20%;
	margin: 0 auto 10px;
	float: left;
	}
#characterBox .imgCharacter img {
	width: 100%;
	max-width: 130px;
	margin: 0 auto;
	display: block;
	}
#characterBox dl {
	float: right;
	width: 79%;
	margin: 2em 0 0 0;
}
#characterBox dt {
	text-align: left;
	font-size: 1.2em;
	line-height: 1.3em;
	padding-bottom: 10px;
}

#prof_nemuko::after,
#prof_mutan::after {
	content: "";
	display: block;
	clear: both;
}

}


/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
/*
=======================================================================
共通設定
=======================================================================
*/
  main.main,
  div.sidebar {
    padding: 4%;
    margin: 10px 0;
    border-width: 0;
  }

/*
=======================================================================
サイトワイド（サイドバー）
=======================================================================
*/

/* サイトワイド 登場人物プロフィール */

#slide-in-characterBox .imgCharacter {
	width: 100%;
	margin: 0 auto 10px;
}
#slide-in-characterBox .imgCharacter img {
	width: 100%;
	max-width: 130px;
	height: auto;
	margin: 0 auto;
	display: block;
}
#slide-in-characterBox dl {
	margin-bottom: 20px;
}
#slide-in-characterBox dt {
	font-size: 1.1em;
	line-height: 1.3em;
	padding-bottom: 10px;
	text-align: center;
}


}





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

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

/* ------------------------------------
画像配置用
------------------------------------ */
/* 本文内の中央寄せ画像 */
.imgContent {
	width: 100%;
	height: auto;
}



/* ------------------------------------
目次
------------------------------------ */
.article .toc ul {
  padding-left: 0;
}


/* ------------------------------------
スピーチバブル
------------------------------------ */
 .speech-person {
    width: 18%;
    min-width: 18%;
 }
	
	
/* ------------------------------------
シンプルなグレー囲み（詳細情報など）
------------------------------------ */
.simple_grayBox {
	padding: 2% 10px;
	width: 100%;
}

/* ------------------------------------
シンプルな黄色囲み（詳細情報など）
------------------------------------ */
.simple_yellowBox {
	padding: 2% 10px;
	width: 100%;
}


/* ------------------------------------
ボタン共通設定
------------------------------------ */
.btn a {
	display: block;
}

	
/* ------------------------------------
定義リスト_下点線（商品詳細情報など）
------------------------------------ */
dl.line_under{
	width:100%;
}
dl.line_under dt{
    float: none;
    width: 100%;
	border-top: none;
	padding: 2% 0 0;
}
dl.line_under dd{
	width: 100%;
    margin-left: 0;
	border-top: none;
	border-bottom:1px dashed #666666;
	padding: 0 0 2%;
}
dl.line_under dd:last-child{
     border-bottom:none;
}


/* ------------------------------------
商品情報（2カラム）
------------------------------------ */
/* 商品画像 */
.productBox_col2 .imageBox {
	width: 100%;
	float:none;
}

/* 商品名・詳細情報 */
.productBox_col2 .infoBox {
	width: 100%;
	float: none;
}

/* ------------------------------------
ランキングボックス（商品一覧）
------------------------------------ */
/* 商品写真（サムネイル） */
.rankingBox .ph_product {
	width: 100%;
	display: block;
	float: none;
	margin: 0 auto;
}
.rankingBox .ph_product img {
	width: 100%;
	display: block;
	margin: 0 auto;
}

/* 商品情報 */
.rankingBox .infoBox {
	float: none;
	width: 100%;
}
.rankingBox .infoBox .rank {
	padding: 3px 3px 3px 5px;
	position: relative;
}
.rankingBox .infoBox .rank::after {
	content: "";
	position: absolute;
	border-top: 14px solid transparent;
	border-bottom: 14px solid transparent;
	border-left: 14px solid #232323;
	top: 0;;
	right: -14px;
}
.rankingBox .infoBox .productName {
	display: block;
}
	
.rankingBox .infoBox .btn_frame_blue {
	width: 100%;
}


/* ------------------------------------
口コミ
------------------------------------ */
.reviewBox img {
	width: 19%;
	margin-right: 3%;
}
.reviewBox .review_title {
	width: 77%;
	font-size: 1.1em;
	line-height: 1.5em;
	margin-bottom: 0;
}
.reviewBox .reviewer {
	font-size: 0.9em;
	line-height: 1.8em;
}
	
	
	
	
}