@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマAS
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 親テーマ調整用スタイル
************************************/
/* 記事内容のH2などに勝手につく番号　位置調整　目次対応部分*/
span[id^="toc"] {
	padding-top: 2.4em;
}

@media screen and (min-width: 769px) {
	span[id^="toc"] {
		padding-top: 2.2em;
	}
}
/* モバイルヘッダー用背景色*/
.mobile-menu-buttons{
	background-color: #c6e5d9;
	}
/* モバイルヘッダー用ロゴのサイズ調整*/
@media screen and (max-width: 1023px){
.has-logo-button .menu-button {
    width: 100%; 
}
}
/* モバイルヘッダー用　文字の改行を600以上でなくす*/
@media screen and (min-width: 600px){
.sp-br{
	display:none;
}
}


/* トップアピール画像部分調整　https://dressing.works/cocoon-appeal-img/　微調整*/
/*アピールエリアの高さ設定　スマホ*/
@media (max-width: 767px){
#appeal {
height: 50vw; 
}
}
@media screen and (min-width: 768px){
#appeal {
    height: calc(100vw * calc(600 / 1600));
}
}
@media screen and (min-width: 1024px){
#appeal {
    height: calc(100vw * calc(400 / 1600));
}
}




/* スマホだけ関連記事非表示　https://wp-cocoon.com/community/cocoon-theme/特定のページだけ関連記事を非表示にしたい/*/
@media screen and (max-width: 1023px){
#related-entries {
  display: none;
}
}


/* スマホだけ目次追従非表示　https://wp-cocoon.com/community/cocoon-theme/目次追従設定%E3%80%80モバイルでは非表示にしたい/*/
@media screen and (max-width: 1023px){
.sidebar .widget_toc {
    display: none;
}
}

/* 関連記事の画像を丸く/*/
.related-entry-card-thumb img {
  border-radius: 5px;
  box-shadow: 0 2px 4px rgb(0 0 0 / 22%);
}
.entry-card-title,
.related-entry-card-title {
  color: #555;
}

.rect-mini-card .related-entry-card-wrap {
  border-bottom: 1px dashed #ccc; /* 区切り線 */
}



/* モデル検索・一覧でのモデル一覧の列数を変更　tmp/list-indexmodel.php　search-model.php　
を本来自動的にclass属性を取得する部分を無理やり固定して変更。*/

.ect-4-columns .entry-card-wrap {
	width: 49.5%;
}
@media screen and (min-width: 768px){
.ect-4-columns .entry-card-wrap {
	width: 25%;
}
}

/* モデル検索でのモデル一覧のフレックスを左寄りに。/*/
.ect-vertical-card {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}





/*アイキャッチ上に表示されるカテゴリー名非表示*/
.cat-label {
display: none;
}

/*固定ページ(page)　カスタム投稿(store)の日付非表示*/
.page .date-tags,
.page .author-info,
.store .date-tags,
.store .author-info {
display: none;
}



/* ショートコードで表示できるリスト部分に日付追加 https://wp-cocoon.com/widget-entry-card-date-css/　アイコン部分はソースを探してコピペ*/
.new-entry-card-date {
  display: block;
  text-align: right;
}

.new-entry-card-post-date::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 400;
-moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    content: "\f017";
  padding-right: 4px;
}
.new-entry-card-update-date::before{
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
-moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    content: "\f1da";
  padding-right: 4px;
}

/* トップページのショートコードで表示する、最新モデルだけ、日付なし*/
.top_bg_box .new-entry-card-date {
  display: none;
}





/* フォント変更
------------------------------------------------------*/
/*基本変更*/
a {
	text-decoration: underline;
}
/*コンテンツ内*/
.entry-content a:hover {
	color: #13724f;
	opacity:0.6;
	text-decoration: none;
}
/*目次変更*/
.toc-content a:hover {
	color: #13724f;
	text-decoration : underline;
}




/* サイドバー
------------------------------------------------------*/
/* サイドバーのH3　デザイン変更*/
.sidebar h3{
	background-color:#FFF;
	border-bottom:2px dashed #227254;
	padding: 6px 0 6px 3px;
	text-align:left;
}
/*サイドバー4画像のフーバー*/
.side_4btn img:hover{opacity:0.6;}


/* メイン
------------------------------------------------------*/
/*アイキャッチ拡大と透明*/
/*投稿一覧*/
.entry-card-thumb{overflow:hidden;}
.entry-card-thumb :hover{transform:scale(1.1);transition-duration:0.2s;opacity:0.6;}
.entry-card-wrap :hover{color:#999;}

/*関連情報*/
.related-entry-card-thumb{overflow:hidden;}
.related-entry-card-thumb :hover{transform:scale(1.1);transition-duration:0.2s;opacity:0.6;}
.related-entry-card-wrap :hover{color:#999;} 

/*トップページ*/
.top_image-thumb{overflow:hidden;}
.top_image-thumb :hover{transform:scale(1.05);transition-duration:0.4s;opacity:0.8;}
.top_image-wrap :hover{color:#999;}


/************************************
** ■見出しカスタマイズ（h1-6）
************************************/
.article h1,
.article h2,
.article h3,
.article h4,
.article h5,
.article h6{ /*見出し初期化*/
  padding: 0;
  margin: 0;
  font-size: medium;
  border-collapse: separate;
  border-spacing: 0;
  border-top: none;
  border-right: none;
  border-bottom: none;
  border-left: none;
  line-height: normal;
  position:relative;
  background-color:none;
}





/*デザイン*/
.article h1 {
  position: relative;
  font-size: 24px;
  font-weight: bold;
  padding: 20px 30px 40px 30px;
  margin-bottom: 1em;
}
.article h1::before {
  position: absolute;
  content: '';
  left: 0;
  bottom: 0;
  width: 100px;
  height: 10px;
  background: #E187A0;
  z-index: 1;
}
.article h1::after {
  position: absolute;
  content: '';
  left: 0;
  bottom: 0;
  width: 100%;
  height: 10px;
  background: #fff2df;
}
.article h2 {
  font-size: 22px;
  font-weight: bold;
  padding: 3px 10px;
  margin: 3.5em 0 0.5em 0;
  border-left: 4px solid #65A88F;
  background-color:#FFF;
  color:#333;
}
.article h3 {
  font-size: 20px;
  font-weight: bold;
  padding: 3px 30px;
  margin: 2em 0 0.5em 0;
  border-bottom: 2px solid #65A88F;
}
.article h4 {
  font-size: 20px;
  font-weight: bold;
  padding: 6px 10px;
  margin-bottom: 1em;
  color: #ffffff;
  border-radius: 10px;
  background: #c6e5d9;
}
.article h5{ 
  background: #c6e5d9;
  font-size: 16px;
  letter-spacing: 2px;
  margin: 35px 20px 20px 20px;
  padding: 5px 5px 5px 5px;
  border: 1px solid #65A88F;
  line-height: 27px;
  text-align: center; 
  border-radius: 6px;
}
.article h6{ 
  font-size: 16px; 
  letter-spacing: 2px; 
  margin: 35px 0px 20px 0px;
  padding: 8px 16px 8px 25px;
  line-height: 25px; 
  background-color: #fff2df; 
  border-radius: 10px; 
  position: relative;
}
.article h6::after{ 
  position: absolute;
  top: 100%;
  left: 20px;
  content: '';
  width: 0;
  height: 0;
  border: 12px solid transparent;
  border-top: 13px solid #fff2df;
}
@media (max-width: 767px){
.article h1 {
  font-size: 24px;
  padding: 20px 30px 40px 30px;
}
.article h2 {
  font-size: 22px;
  padding: 3px 10px;
  margin: 3.5em 0 0.5em 0;
}
}



















/************************************
** ●WPCF7 送信ボタンのカスタマイズ
************************************/
.wpcf7-submit {
  border: solid 2px #7CB852!important; /*枠線*/
  border-radius: 6px!important; /*角丸コーナー*/
  font-weight:bold!important; /*文字強調*/
  font-size: 18px!important; /*フォントサイズ*/
  color: #fff!important; /*フォントカラー*/
  background-color: #7CB852!important; /*背景色*/
  letter-spacing: 30px!important; /*文字間隔*/
}
.wpcf7-submit:hover{
  color: #227254!important; /*フォントカラー*/
  background-color: #C6E5D9!important; /*背景色*/
  transition: all 0.8s ease!important; /*アニメーション*/
}






/*スタイルから選べる　ブログカードの　文字部分の背景変更*/
.blogcard-label {
	background-color: #3F8D6F !important;
	color: #FFF !important;
}



















/************************************
** オリジナルスタイル追加
************************************/

/*マージン追加*/

.margin_top_30{
	margin:30px 0 0 0;
}





/*----------------------------
scroll_up ｜下から上へ出現　https://www.tipswork.net/css/853/ JavaScriptは、トップだけにしてる
----------------------------*/
.scroll_up {
  transition: 0.5s ease-in-out;
  transform: translateY(10px);
  opacity: 0;
}
.scroll_up.on {
  transform: translateY(0);
  opacity: 1.0;
}

/*----------------------------
scroll_left ｜左から出現
----------------------------*/
.scroll_left {
    -webkit-transition: 0.5s ease-in-out;
    -moz-transition: 0.5s ease-in-out;
    -o-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
    transform: translateX(-10px);
    opacity: 0;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
}
.scroll_left.on {
    opacity: 1.0;
    filter: alpha(opacity=100);
    -moz-opacity: 1.0;
    transform: translateX(0);
}

/*----------------------------
scroll_right ｜右から出現
----------------------------*/
.scroll_right {
    -webkit-transition: 0.5s ease-in-out;
    -moz-transition: 0.5s ease-in-out;
    -o-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
    transform: translateX(10px);
    opacity: 0;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
}
.scroll_right.on {
    opacity: 1.0;
    filter: alpha(opacity=100);
    -moz-opacity: 1.0;
    transform: translateX(0);
}











/*-----------------------------------------------------*/
/*　都道府県部分（taxonomy-pref-○○.php）ページ*/
.citylistbox{
	width: 100%;
	margin: 20px 1% 10px 1%;
	padding: 10px;
	border: solid #CCC 1px;
	background-color: #EEE;
}

.citylistbox ul{
	width:100%;
	display:flex;
	flex-wrap: wrap;
	margin: 0px;
    padding: 0px;
}

.citylistbox li{
	width:48%;
	margin:0px 0px 10px 0px;
	font-size:0.9em;
	list-style:none;
}
.citylistbox li a{
	text-decoration:none;
}
.citylistbox li a:hover{
	text-decoration:underline;
}

@media (min-width: 601px){

.citylistbox li{
	width:28%;
	margin:0px 1% 0px 1%;
}
}
@media (min-width: 1024px){
.citylistbox{
	margin:20px 0 30px 0;
}
.citylistbox li{
	width:23%;
	margin:0px 1% 0px 1%;
}
}



.genrebox{
	padding:2px;
	display:flex;
	font-size:1.6rem;
	flex-wrap: wrap;
	justify-content: space-evenly;
	margin:10px auto 30px auto;
}
@media screen and (min-width: 768px) {
.genrebox{
	padding:10px;
}
}

.t_ichiran_rental-spot a{
	background-color:#65A88F;
	color:#FFF !important;
	padding:2px 6px;
	border-radius:5px;
	font-size:0.8em;
	text-decoration:none;
}
.t_ichiran_sale a{
	background-color:#F8C57E;
	color:#FFF !important;
	padding:2px 6px;
	border-radius:5px;
	font-size:0.8em;
	text-decoration:none;
}
.t_ichiran_purchase a{
	background-color:#6585A1;
	color:#FFF !important;
	padding:2px 6px;
	border-radius:5px;
	font-size:0.8em;
	text-decoration:none;
}
.t_ichiran_used a{
	background-color:#E187A0;
	color:#FFF !important;
	padding:2px 6px;
	border-radius:5px;
	font-size:0.8em;
	text-decoration:none;
}
.t_ichiran_repair a{
	background-color:#8881B8;
	color:#FFF !important;
	padding:2px 6px;
	border-radius:5px;
	font-size:0.8em;
	text-decoration:none;
}

.t_ichiran_rental-spot a:hover{
	opacity: 0.6;
}
.t_ichiran_sale a:hover{
	opacity: 0.6;
}
.t_ichiran_purchase a:hover{
	opacity: 0.6;
}
.t_ichiran_used a:hover{
	opacity: 0.6;
}
.t_ichiran_repair a:hover{
	opacity: 0.6;
}


/* 都道府県一覧リスト表示部分（entry-card-pref.php）
------------------------------------------------------------*/
.ichiran_rental-spot{
	background-color:#65A88F;
	color:#FFF;
	padding:2px 6px;
	border-radius:5px;
	display:inline-block;
	margin:0px 3px 3px 0px;
}

.ichiran_sale{
	background-color:#F8C57E;
	color:#FFF;
	padding:2px 6px;
	border-radius:5px;
	display:inline-block;
	margin:0px 3px 3px 0px;
}
.ichiran_purchase{
	background-color:#6585A1;
	color:#FFF;
	padding:2px 6px;
	border-radius:5px;
	display:inline-block;
	margin:0px 3px 3px 0px;
}
.ichiran_used{
	background-color:#E187A0;
	color:#FFF;
	padding:2px 6px;
	border-radius:5px;
	display:inline-block;
	margin:0px 3px 3px 0px;
}
.ichiran_repair{
	background-color:#8881B8;
	color:#FFF;
	padding:2px 6px;
	border-radius:5px;
	display:inline-block;
	margin:0px 3px 3px 0px;
}
/* リスト表示部分の住所の文字サイズを小さくした*/
.pref_font{
	font-size:0.8rem;
}


/* 都道府県詳細部分（single-store.php）
/* 店舗/レンタルページ　詳細の表形式
------------------------------------------------------------*/
.store-detail{
	display:flex;
	flex-wrap: wrap;
	margin:5px 0 10px 0;
	font-size:16px;
}
.store-detail-tr{
	width: 100%;
}
.store-detail-th{
	width: 100%;
	margin: 0 0 0 0;
	padding:5px 5px 2px 5px;
	border-bottom:1px solid #CCC;
	font-weight:bold;
}
.store-detail-td{
	width: 100%;
	margin:0 0 15px 0;
	padding:2px 5px 5px 5px;
}
.store-detail-td2{
	width: 100%;
	margin:0 0 15px 0;
	padding:5px;
}

@media screen and (min-width: 768px) {
.store-detail{
	width: 660px;
	margin:0 20px 0 0;
}
}
	
	
.store-detail p{
	margin:0 0 0 0;
}


.redcaucion{
	color:#F00;
	font-size:1.0rem;
}

.mapbox{
	margin:0 auto 20px auto;
}

.announce{
	margin:20px auto;
	padding:10px;
	width: calc(90% - 20px);
	border:1px #CCC solid;
	font-size:0.9rem;
}

.backbtn a{
	width: 120px;
	background-color:#7CB852;
	padding:4px 10px;
	text-align:center;
	display:block;
	border:1px solid #7CB852;
	border-radius:10px;
	color:#FFF;
	margin:30px auto;
	text-decoration:none;
}
.backbtn a:hover{
	background-color:#C6E5D9;
	color:#227254;
}







/* モデル検索ページ　searchform-model.php
------------------------------------------------------------*/
/* 検索ボックス横幅。モデル形式のプルダウン */
select {
    width: 300px; /* 最大幅を100%に制限 */
}


/* 最上部アイコン */
.modeltype_wrap{
	display:flex;
	justify-content: space-around;
    flex-wrap: wrap;
}
.modeltype_box{
	margin:0px 0 30px 0;
	text-align:left;
	font-size:16px;
}

/* 検索ボタン装飾 */
.button_wrap{
	margin:0px auto 50px ;
	display:flex;
	justify-content: space-evenly;
}
.button {
	display : block;
	cursor        : pointer;
	transition    : .3s;         /* なめらか変化 */
	width: 160px;
	background-color:#7CB852;
	padding:8px 10px;
	text-align:center;
	display:block;
	border:1px solid #7CB852;
	border-radius:10px;
	color:#FFF;
	margin:0px 20px;
	text-decoration:none;
	font-size:1.3rem;
}
.button:hover {
	background-color:#C6E5D9;
	color:#227254;
}
.button_restart {
	display : block;
	cursor        : pointer;
	transition    : .3s;         /* なめらか変化 */
	width: 160px;
	background-color: #D1D1D1;
	padding: 8px 10px;
	text-align: center;
	display: block;
	border: 1px solid #E187A0;
	border-radius: 10px;
	color: #333;
	margin: 0px 20px;
	text-decoration: none;
	font-size: 1.3rem;
}
.button_restart:hover {
	background-color:#F7D6DF;
	color:#333;
}


/* リスト表示部分に、メーカー名を表示して、そのかわりにタイトル（品名）の文字サイズを小さくした
related-entry-card-singlemodel
entry-card-modelsearch
 */
.model_name_font{
	font-size:0.8rem;
}




/* モデル詳細ページ　詳細の表形式
------------------------------------------------------------*/
/* サムネ下の引用部分文字ボックス */
.inyou_box{
	font-size:0.9rem;
	display:flex;
	margin:-20px 0 -39px 0;
}
/* 本文上の引用部分文字ボックス */
.inyou_box_bottom{
	font-size:0.9rem;
	display:flex;
	margin:0px 0 -39px 5px;
}


/* 外部リンク */
.gaibu_link_box {
    position: relative;
    margin: 50px 0 20px 0;
    padding: 0.5em 1em;
    border: solid 3px #FFF1DC;
}
@media screen and (min-width: 768px){
.gaibu_link_box {
    margin: 66px 0 50px 0;
}
}
.gaibu_link_box .box-title {
    position: absolute;
    display: inline-block;
    top: -27px;
    left: -3px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    font-size: 14px;
    background: #FFF1DC;
    color: #444;
    border-radius: 5px 5px 0 0;
}
.gaibu_link_box .box-title:after {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  background-image: url(../images/blank_icon.png);
  background-size: contain;
  vertical-align: middle;
  margin: 0 5px 2px 2px;
}

.gaibu_link_box p {
    margin: 0; 
    padding: 0;
}
.gaibu_link_box p a {
	color:#09C;
	text-decoration:underline;
    font-size: 14px;
}
.gaibu_link_box p a:hover{
	color: #F66;
	text-decoration: underline;
}

.gaibu_link_box p img{
	float:left;
	margin:0 10px 0 0;
}



.model-detail{
	display:flex;
	flex-wrap: wrap;
	margin:5px 0 10px 0;
	font-size:16px;
}
.model-detail-tr{
	width: 100%;
	margin: 20px 0 10px 0 !important;
	padding:5px;
}
.model-detail-th{
	width: 100%;
	margin: 0 0 0 0;
	background-color: #FFC;
	padding:5px;
	border-bottom:1px solid #CCC;
}
.model-detail-td{
	width: 100%;
	margin:0 0 15px 1em;
	padding:5px;
	border-bottom:1px solid #CCC;
}
.model-detail-td2{
	width: 100%;
	margin:0 0 15px 1em;
	padding:5px;
	border-bottom:1px solid #CCC;
}
@media screen and (min-width: 768px) {
.model-detail{
	width: 700px;
	margin:0 20px 0 0;
}
.model-detail-th{
	width: 30%;
	margin:0 0 0 0;
	padding:10px;
}
.model-detail-td{
	width: 70%;
	margin:0 0 0 0;
	padding:10px;
}
.model-detail-td2{
	width: 70%;
	margin:0 0 0 0;
	padding:10px;
}
}
.model-detail p{
	margin:0 0 0 0;
}


/* PRリンクの注意書き
 */
.pr_link_font{
	font-size:0.8rem;
}


/* detail下に来る本文のマージン */
.main_contents_box{
	margin:30px 0 0 0;
	font-size:16px;
}
@media screen and (min-width: 768px) {
.main_contents_box{
	margin:50px 0 0 0;
}
}






/* トップページ
-----------------------------------------------------------*/
.message80{
	width:80%;
	margin:0 auto;
}
.message80_center{
	text-align:center;
	width:80%;
	margin:0 auto;
}

/*波々 https://moshashugyo.com/media/svg-border*/
.svg-box-up {
	height:13vw;
	margin:-50px 0 0px 0;
}
.svg_other_bg_box{
	background-color: #FAF8F5;
	padding: 0px 0 20px 0;
	margin:0px 0 0px 0;
}



/*その他共通
-----------------------------------------------------------*/
/*大きめの見出し*/
h2.kotei_title{
	text-align:center;/*中央寄せ*/
	font-size:2rem;/*文字の大きさ*/
	letter-spacing:.1rem;/*文字間の余白*/
	line-height:1.8;/*行の高さ*/
	margin:40px 0 10px 0;/*外側余白*/
	padding:0;/*内側余白*/
	border:none;
}
/*480px以下*/
@media screen and (max-width: 480px){
h2.title{
	margin:20px 0 5px 0;/*外側余白*/
	}
}
/*大きめの見出し*/
h2.kotei_title_gray{
	text-align:center;/*中央寄せ*/
	font-size:2rem;/*文字の大きさ*/
	letter-spacing:.1rem;/*文字間の余白*/
	line-height:1.8;/*行の高さ*/
	margin:40px 0 10px 0;/*外側余白*/
	padding:0;/*内側余白*/
	border:none;
	background-color: #FAF8F5;
}
/*480px以下*/
@media screen and (max-width: 480px){
h2.kotei_title_gray{
	margin:20px 0 5px 0;/*外側余白*/
	}
}





/***白抜きリンクボタン***/
.link-btn{
  display:block;/*ブロック要素にする*/
  margin:1em auto;/*外側余白*/
  padding: 5px;/*内側余白*/
  text-align: center;/*中央寄せ*/
  text-decoration: none;/*文字装飾なし*/
  border:1px solid #ccc; /*枠線（太さ、種類、色）*/
  font-size:.9em;/*文字の大きさ*/
  color:#666;/*文字色*/
  width: 80%;/*ボタンの幅*/
}

@media screen and (min-width: 768px){
.link-btn{
  width: 300px;/*ボタンの幅*/
}
}

.link-btn:hover{
	background-color:#c6e5d9;
  color:#333;
}



/************************************
****　目次のカスタマイズ
https://yujiblog.org/table-of-contents
************************************/
.toc-title{
font-weight:bold;
}
.toc-title::after {
color:#337ab7;
}
.toc-list > li a {
font-weight: bold;
display:block;
margin-top:10px;
margin-left: 10px;
}
.toc-list > li a::before {
font-family: "Font Awesome 5 Free";
content : "\f144";
margin-right: 7px;
}
.toc-list > li li a {
font-weight: normal;
font-size: 95%;
margin-top:0;
margin-left: 2em;
}
.toc-list > li li a::before {
content: "";
width: 7px;
height: 7px;
left: -2px;
display: inline-block;
border-radius: 50%;
background: #90C31F;/*こちらで緑点の色を変更できます*/
position: relative;
margin-bottom: 2px;
}
@media (max-width:880px){
.toc-list > li a {
margin-left: -10px;
}
.toc-list > li li a {
margin-left: -2em;
}
.toc-list > li li a::before {
left: 3px;
margin-bottom:1px;
}
}
.toc a:hover {
color: #333333;
text-decoration: underline;
}










/* カテゴリー量販店の投稿のh3タグに適用するCSS */
.category-mass-retailer-post h3 {
    /* ここにCSSプロパティを記述 */
}

/* カテゴリー量販店の投稿のPタグに適用するCSS */
.category-mass-retailer-post p {
    /* ここにCSSプロパティを記述 */
}