@charset "UTF-8";

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

/************************************
** 子テーマ用のスタイルを書く
************************************/
@media screen and (max-width: 1023px) { . {  } }
@media screen and (max-width: 834px) { . {  } }
@media screen and (max-width: 480px) { . {  } }










/***********************************************************************
** common設定
************************************************************************/
/* キーカラー */
.siteColor1 { color: #b51a1c; }/* レッド（メイン） */

/* 投稿日・更新日 非表示にするページの設定 */
.page .date-tags { display: none; }

/* main　コンテンツエリアの幅設定 */
.main { padding: 20px 100px; }
@media screen and (max-width: 1200px) { .main { padding: 20px 70px; } }
@media screen and (max-width: 1023px) { .main { padding: 20px 100px; } }
@media screen and (max-width: 834px) { main.main, div.sidebar { padding: 16px 70px; } }
@media screen and (max-width: 600px) { main.main, div.sidebar { padding: 16px 30px; } }
@media screen and (max-width: 480px) { main.main, div.sidebar { padding: 18px; } }

/***********************************************************************
** 見出しのスタイル
************************************************************************/
/* 通常 h2タグ */
.article h2 {
	font-size: 1.5em;
	color: #161616;
	font-weight: normal;
	letter-spacing: 1.6px ;
	line-height: 1.35;
	border-left: solid 9px #b51a1c; /* キーカラー */
	padding: 0.6em 0.8em;
	margin-bottom: 1.2em;
	background: #f0f1f2;
}
@media screen and (max-width: 520px){ .article h2 { font-size: 1.1em; font-weight: bold; } }
/* 通常 h3タグ */
.article h3 {
	font-size: 1.1em;
	font-weight: bold;
	letter-spacing: 1.3px;
	line-height: 1.35;
	padding: 0.3em 0.8em;
	margin-bottom: 1em;
	border-left: 9px solid #b51a1c; /* キーカラー */
	border-right: none; border-top: none; border-bottom: none;
}
/* 通常 h4タグ */
.article h4 {
	font-size: 1.1em;
	color: #569C99;
	font-weight: bold;
	letter-spacing: 1.3px;
	line-height: 1.35;
	padding: 0.3em 0 0.3em 1em;
	margin: 0.3em 0 0.5em 0;
	border: none;
}

/* チェックマーク付き見出し Pタグ */
p.point {
	font-size: 1em;
	font-weight: bold;
	letter-spacing: 1.3px;
	line-height: 1.35;
	padding: 0.3em 0 0.3em 1.3em;
	margin: 1em 0;
	position: relative;
}
p.point:before {
	font-family: 'Font Awesome 5 Free';
	content: "\f00c";
	font-size: 0.9em;
	color: #b51a1c; /* キーカラー */
	position: absolute;
	left: 0em;
	top: 0.5em;
}

/* .pt1　見出しデザイン
************************************/
h2.pt1,h3.pt1,p.pt1 {
	font-size: 1.6em;
	font-weight: bold;
	color: #545454;
	text-align: center;
	margin: 0!important;
	padding: 0.5em!important;
	border: none;
	background-color: transparent!important;
}
h2.pt1.siteColor1,h3.pt1.siteColor1,p.pt1.siteColor1 { color: #2C8380; }
@media screen and (max-width: 520px){ h2.pt1,h3.pt1,p.pt1 { font-size: 1.1em; } }



/***********************************************************************
** ヘッダーエリア
************************************************************************/
.header-container-in.hlt-top-menu { padding: 1em 0 1em 1em; }
@media screen and (max-width: 834px) {
	.header-container-in.hlt-top-menu { padding: 0.5em 0; }
	.header-container-in.hlt-top-menu .logo-header img { max-height: 51px; }
}

/* 通知エリア */
.notice-area { letter-spacing: 2px; }




/***********************************************************************
** 人気ランキング　itemInfoRanking　
************************************************************************/
.Ranking_h2 {
	font-size: 24px;
	line-height: 1.25;
	font-weight: bold;
	text-align: center;
	letter-spacing: 1px;
	background-color: transparent!important;
	margin-bottom: 0!important;
	padding: 0!important;
	border: none!important;
}
.Ranking_h2.hkk { margin-bottom: 1em!important;}

.rnk_span1 {
	font-size: 0.7em;
	display: block;
	letter-spacing: 2px;
	padding-bottom: 0.4em;
}
.rnk_span1::before {
	font-family: "Font Awesome 5 pro";
	font-weight: 400;
	content: "\f715\020";
}
.rnk_span1::after {
	font-family: "Font Awesome 5 pro";
	font-weight: 400;
	content: "\020\f715";
	display: inline-block;
	transform: scaleX(-1);
}
.rnk_span2 { display: block; padding-top: 0.2em; }
.sponsorship { text-align: center; font-size: 0.9em; color: #555; margin-top: 0.2em; margin-bottom: 1em; }
.rnk_date { text-align: center; font-size: 0.8em; color: #555; }


.itemInfoRanking_Wrap {
	display: flex;
	display: -ms-flexbox;
	flex: auto;
	flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	justify-content: space-between;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	padding: 0;
	margin: 0;
}
.itemInfoRanking {
	width: calc((100% - 1.5em) / 4); /* 4カラム設定 */
	padding: 0.5em 0.8em;
	border: 1px solid #ccc;
	border-radius: 4px;
	margin-bottom: 1.5em;
}
@media screen and (max-width: 1023px) { .itemInfoRanking { width: calc((100% - 1em) / 3); /* 3カラム設定 */ } }
@media screen and (max-width: 834px) { .itemInfoRanking { width: calc((100% - 1em) / 2); /* 2カラム設定 */ } }
@media (max-width: 520px) { .itemInfoRanking { padding: 0.5em 0.8em; } }
.itemInfoRanking p { margin-bottom: 0; }
/* Number */
.rnk_Number { text-align: center; color: #777; font-size: 1.1em; font-weight: bold; }
.rnk_Number i { font-size: 0.7em; margin: 0 0.8em; }
.rnk_Number i:first-child { margin-left: 0; }
.itemInfoRanking:nth-of-type(1) .rnk_Number { color: #D9B340; }
.itemInfoRanking:nth-of-type(2) .rnk_Number { color: #6F7B83; }
.itemInfoRanking:nth-of-type(3) .rnk_Number { color: #A15326; }

.rnk_ShopName {
	color: #777;
	font-size: 0.8em;
	margin-bottom: 1em!important;
}
.rnk_Image { margin: auto; text-align: center;}
.rnk_Image img { aspect-ratio: 1/1; max-height: 230px;}
.rnk_ImageSource {
	text-align: right;
	color: #888;
	font-size: 0.7em;
	max-width: 400px;
	margin: auto;
}
.rnk_ImageSource a { color: #777; text-decoration: none; }
.rnk_Price { color: #ed293e; font-size: 1.3em; font-weight: bold; text-align: right; }
.rnk_Price span { margin-left: 0.2em; font-size: 0.7em; }
.rnk_Name { color: #777; margin-top: 0.5em; font-size: 0.8em; line-height: 1.4; }
.rnk_Review { text-align: center; margin-top: 0.5em; }
.rnk_Review i { margin-right: 3px; }
.rnk_reviewStar { color: #F5BC55; }
.rnk_reviewAverage { margin-left: 0.4em; font-weight: bold; }
.rnk_PageLink { margin: 0.6em 0em; }
.rnk_LinkDestination {
	font-size: 0.7em;
	text-align: center;
	color: #777;
	margin: 0.5em auto 0;
}
.rnk_End_PageLink { margin: 0 1em; }


/***********************************************************************
** li リストを横並びにしたリンクボタン（tottoriAreaLink）
************************************************************************/
.tottoriAreaLink ul {
	font-size: 0.8em;
	padding-left: 0;
	letter-spacing: 1px;
	list-style: none;
	overflow: hidden;
}
.tottoriAreaLink li { float: left; }
.tottoriAreaLink li a {
	display: inline-block;
	padding: 0.4em 1em;
	text-decoration: none;
	color: #555;
	border: solid 1px #555;
	border-radius: 3px;
	transition: .4s;
}
.tottoriAreaLink li a:hover {
	background: #555;
	color: white;
}

/***********************************************************************
** 自治体情報エリア
************************************************************************/
.cityDateArea dl { font-size: 1em; display: flex; flex-flow: column; width: 100%; }
.cityDateArea dt, .cityDateArea dd { padding: 0.5em 1em; border-bottom: 1px solid #cecece; }
.cityDateArea dt:nth-of-type(1), .cityDateArea dd:nth-of-type(1) { border-top: 1px solid #cecece; }
.cityDateArea dt { color: #161616; font-weight: bold; flex-basis: 30%; background-color: #F5F5F5; }
.cityDateArea dt i { margin-right: 0.2em; }
.cityDateArea dd { padding: 1.2em 1em; margin-left: 0; flex-basis: 70%; line-height: 1.6; }
.cityDateArea dd:nth-of-type(1) { border-top: none; }
.cityDateArea dd ul { padding-left: 0; }
.cityDateArea dd li { padding: 2px 3px; }

/* liタグを2列にする ※ulタグに付ける */
@media screen and (max-width: 834px) {
	.cityDateArea .listColumn2 li { width: 100%; }
	.cityDateArea dd li { padding: 2px 0; }
}



/***********************************************************************
** cocoon機能カスタマイズ 汎用リンクボタン .siteBtn　.btn-blue .btn-yellow
************************************************************************/
.siteBtn { margin: auto; max-width: 500px; }
.btn-blue {
	color: #343434;
	border: 3px solid #343434;
	background-color: #FFF;
	justify-content: center;
	letter-spacing: 0.1em;
	padding: 0.6em 2.5em;
	border-radius: 100vw!important;
	-webkit-box-shadow: 5px 5px 0 #ABD0CE;
	box-shadow: 5px 5px 0 #ABD0CE;
}
.btn-blue:hover { color: #343434; }

.btn-amber {
	color: #FFF;
	border: 3px solid #9B7332;
	background-color: #9B7332;
	justify-content: center;
	letter-spacing: 0.1em;
	padding: 0.6em 2.5em;
	border-radius: 100vw!important;
}
.btn-yellow:hover { color: #FFF; }
@media screen and (max-width: 834px){ .btn-l { font-size: 1em; } }


/***********************************************************************
** flexColumnBox フレックスカラムボックスの設定
************************************************************************/
.flexColumnBoxWrap {
	display: flex;
	display: -ms-flexbox;
	flex: auto;
	flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	justify-content: space-between;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	padding: 0;
	margin: 0;
}
.flexColumnBoxWrap.w1200px { max-width:1240px; margin:0 auto; padding: 0 1.5em; }
.flexColumnBoxWrap.w960px { max-width:1000px; margin:0 auto; padding: 0 1.5em; }
.flexColumnBoxWrap.w700px { max-width:740px; margin:0 auto; padding: 0 1.5em; }

.col4_sp1 { width: calc(100%/4); }
@media screen and (max-width: 834px) { .col4_sp1 { width: calc(100%/2); } }
@media screen and (max-width: 520px) { .col4_sp1 { width: calc(100%/1); } }
.col4_sp2 { width: calc(100%/4); }
@media screen and (max-width: 834px) { .col4_sp2 { width: calc(100%/2); } }

.col3_sp1 { width: calc(100%/3); }
@media screen and (max-width: 834px) { .col3_sp1 { width: calc(100%/1); } }

.col2_sp1 { width: calc(100%/2); }
@media screen and (max-width: 834px) { .col2_sp1 { width: calc(100%/1); } }
@media screen and (max-width: 520px) { .col2_sp1 { width: calc(100%/1); } }


/***********************************************************************
** ジャンル別 リンクメニューリスト　li リストを横並びにしたリンクボタン 
************************************************************************/
.genreMenuBox ul {
	list-style-type: none;
	margin: 0; padding: 0!important;
	display: flex;
	flex-wrap: wrap;
}
.genreMenuBox ul li {
	width: calc(100%/2);
	margin: 0!important;
}
.genreMenuBox ul li a {
	display: block;
	align-items: stretch;
	text-decoration: none;
	padding: 0.8em 1.5em;
	font-size: 0.9em;
	color: #2d2d2d;
	letter-spacing: 1px;
	box-shadow: inset 1px 1px 0 0 #e0ddd1, 1px 1px 0 0 #e0ddd1, 1px 0 0 0 #e0ddd1;
	transition: .3s;
}
.genreMenuBox ul li a::before {
    font-family: "Font Awesome 5 pro";
    font-weight: 300;
    content: "\f06b";
    color: #F07F5E;
	padding-right: 5px;
}
.genreMenuBox ul li a:hover {
	background: #f5f3ef;
}
@media screen and (max-width: 834px) { .genreMenuBox ul.listColumn1 li { width: 100%; } }
@media screen and (max-width: 520px) { .genreMenuBox ul li a { font-size: 0.8em; padding: 0.8em 0 0.8em 0.8em; } }


/***********************************************************************
** フルワイドの設定　fullWide_Area（over）
************************************************************************/
.fullWide_Area,
.fullWide_Area_over {
	background-color: #F4F5F7;/* デフォルト背景カラー */
	margin-right: calc(50% - 50vw);
	margin-left: calc(50% - 50vw);
}
.fullWide_Area { padding: 2.5rem  calc(50vw - 50%); }
.fullWide_Area_over { padding: 2.5rem 0; }
/* Pタグの調整 */
.fullWide_Area p:last-child,
.fullWide_Area_over p:last-child { margin-bottom: 0;}

/* 背景カラーのパターン設定 */
.fullWide_Area.bgColor1,
.fullWide_Area_over.bgColor1 { background-color: #EEF5F5; }/* 薄グリーン */
.fullWide_Area.bgColor2,
.fullWide_Area_over.bgColor2 { background-color: #FFF; }
/* 背景画像イメージのパターン設定 */
.fullWide_Area.bgImage1,
.fullWide_Area_over.bgImage1 {
	background-image: url(https://www.tottori-furusato.jp/originaldata/img/topBN_1500x400.jpg);
	object-fit: cover;
	min-height: 400px;
}



/***********************************************************************
** Flexbox カードレイアウト
************************************************************************/
#cardlayout-wrap {
	position: relative;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-pack: justify;
	margin: 2em auto;
	max-width: 1200px;
	width: 100%;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-pack: justify;
	justify-content: space-between;
}
#cardlayout-wrap p { margin-bottom: 0; }/* WP設定のリセット */

/* リンクの設定 */
a.card-link { text-decoration: none; display: block;}
a.card-link:hover { opacity: 0.7; transition: all 0.3s }

/* カードレイアウト内の画像を幅いっぱいに表示 */
#cardlayout-wrap img {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: 12px 12px 0 0;
}
.card-figure { margin: 0; padding: 0; }

h3.card-title {
	margin: 0;
	color: #F07F5E;
	padding: 0.5em 1em;
	text-align: center;
	font-size: 1.2rem;
	border: none;
}
h3.card-title:before { content: ""; }/* 既存のCSS設定をリセット */

.card-text-tax {
	margin: 0;
	padding: 0 1em 1.5em 1em;
	color: #818181;
	font-size: 0.9rem;
}

/* カードレイアウトを1カラムで配置 */
.card-list {
	margin: 0.5em auto;
	padding: 0;
	width: 95%;
	background: #FFF;
	border-radius: 12px;
	box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 20%);
}

/* 519px以下の場合 画像幅いっぱい */
@media all and (max-width: 519px) {
	#cardlayout-wrap img {
		display: flex;
		width: 100%;
	}
}

/* 375px以上の場合　2カラムで配置 */
@media all and (min-width: 375px) {
	.card-list {
		margin: 0.5em 0;
		width: calc((100% - 2em) / 2); /* 2カラム設定 */
	}
}

/* 834px以上の場合　3カラムで配置 */
@media all and (min-width: 834px) {
	.card-list { width: calc((100% - 2em) / 3); /* 3カラム設定 */ }
	/* 最後の行が3列より少ない場合左寄せにレイアウトさせる */
	#cardlayout-wrap::after {
		content: "";
		display: block;
		width: calc(100% / 3);
	}
}


/***********************************************************************
** 共通スタイル
************************************************************************/
/* 文字間隔を開ける */
.ltsp { letter-spacing: 0.1em; }

/*文字の大きさ*/
.fsS { font-size: 0.8em; }
.fsM { font-size: 1em; }
.fsL { font-size: 1.5em; }
.fsLL { font-size: 2em; }
.fsLspM { font-size: 1.5em; }
@media screen and (max-width: 520px){ .fsLspM { font-size: 1em; } }

/*文字の横位置*/
.al-l { text-align: left; }
.al-r { text-align: right; }
.al-c { text-align: center; }

/* 文字の寄せ位置 PC SP 切り替え */
.pccspl { text-align: center; }/* PC→center　SP→left */
@media screen and (max-width: 520px){ .pccspl{ text-align: left; } }
.pclspc { text-align: left; }/* PC→left　SP→center */
@media screen and (max-width: 520px){ .pccspl{ text-align: center; } }

/* 横幅のサイズ指定 */
.w100per { width: 100%; }
.w90per { width: 90%; }
.w80per { width: 80%; }
.w520px { margin:0 auto; max-width:520px; }
.w700px { margin:0 auto; max-width:700px; }
.w900px { margin:0 auto; max-width:900px; }
.w960px { margin:0 auto; max-width:960px; }
.w1200px { margin:0 auto; max-width:1200px; }

/* liタグを2列にする ※ulタグに付ける */
.listColumn2 li {
	display: block;
	margin: 0!important;
	padding: 0;
	float: left;
	width: 49.5%;
}

/* spOnBr スマホのみ改行 ※520px以下で<br>を表示 */
@media screen and (min-width: 520px){ .spOnBr { display: none; } }
/* tbOnBr スマホのみ改行 ※960px以下で<br>を表示 */
@media screen and (min-width: 960px){ .tbOnBr { display: none; } }

/* 赤文字・レッドのカラー設定 */
.red { color: #E95A5A; } 
/* アンダーラインを太字＆薄いブラウンにする設定 */
.marker-under {
	background: linear-gradient(transparent 60%, #F8DFAA 60%);
	font-weight: bold;
}

/* テキストリンクに矢印をつける .yaji */
a.yaji { text-decoration: none; }
a.yaji:hover { text-decoration: underline; }
a.yaji::before {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f101";
	padding-right: 0.2em;
}

/* 「alignnone」でもスマホでは中央寄せ */
@media screen and (max-width: 768px){
	.alignnone {
		clear: both;
		display: block;
		margin-right: auto;
		margin-left: auto;
	}
}

/* 周りのブロックからの距離（margin px） */
.m0{ margin: 0!important; }/*周りからのmarginを0に*/
.m0-t{ margin-top: 0!important; }/*上からのmarginを0に*/
.m0-r{ margin-right: 0!important; }/*右からのmarginを0に*/
.m0-b{ margin-bottom: 0!important; }/*下からのmarginを0に*/
.m0-l{ margin-left: 0!important; }/*左からのmarginを0に*/

/* 周りのブロックからの距離（margin em） */
.m1em{ margin: 1em!important; }
.m1em-t{ margin-top: 1em!important; }
.m1em-r{ margin-right: 1em!important; }
.m1em-b{ margin-bottom: 1em!important; }
.m1em-l{ margin-left: 1em!important; }

/* 周りのブロックからの距離（padding em） */
.p1em{ padding: 1em!important; }
.p1em-t{ padding-top: 1em!important; }
.p1em-r{ padding-right: 1em!important; }
.p1em-b{ padding-bottom: 1em!important; }
.p1em-l{ padding-left: 1em!important; }