@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
*/

/***********************************************************************
** 作業部屋
************************************************************************/




/***********************************************************************
** common設定　
************************************************************************/
/* キーカラー */
:root {
	--siteColor1: 112, 141, 170; /* RGBのみ ブルー（メイン）#008c9e */
	--siteColor2: 170, 141, 112; /* RGBのみ ブラウン #aa8d70 */
	--siteColor3: 235, 189, 98; /* RGBのみ イエロー #ebbd62 */
	--siteColor4: 233, 90, 90; /* RGBのみ レッド #e95a5a */
}
.siteColor1 { color: #008c9e; }/* ブルー（メイン） */
.siteColor2 { color: #aa8d70; }/* ブラウン */
.siteColor3 { color: #ebbd62; }/* イエロー */
.siteColor4 { color: #e95a5a; }/* レッド */
.red { color: rgba(var(--siteColor4), 1); }

/* パンくずリスト　背景色を透明 */
.breadcrumb.sbp-main-before,
.breadcrumb.sbp-footer-before,
.breadcrumb.pbp-main-before,
.breadcrumb.pbp-footer-before { background-color: transparent; }
/* パンくずリスト　デフォルトアイコンを非表示 */
.breadcrumb-item .fa-folder { display: none; }
.breadcrumb-item .fa-file { display: none; }
/*　main コンテンツエリアの余白　*/
.content-in { container-type: inline-size; container-name: mainWrapArea; }
@container mainWrapArea (min-width: 800px) { .main { padding: 20px 4em!important; } }
@container mainWrapArea (max-width: 800px) { .main { padding: 20px 2em!important; } }
@container mainWrapArea (max-width: 400px) { .main { padding: 20px 1em!important; } }

/* カテゴリ・タグのアイコンを非表示にする設定 */
.cat-link .fa-folder:before { content: ""; }
.tag-link .fa-tag:before { content: ""; }
.entry-categories-tags .tax-icon { margin: 0; }
.cat-link { padding: 2px 0.9em; background-color: rgba(var(--siteColor2), 1); }
.tag-link { padding: 1px 0.9em; }
/* スマホ用 カテゴリ フォントサイズ調整 */
@container mainWrapArea (max-width: 800px) { .cat-link { font-size: 12px; } }

/* PCとスマホで出し分け */
@media screen and (max-width: 767px){ .widget_pc_on { display: none; } }
@media screen and (min-width: 768px){ .widget_sp_on { display: none; } }


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

/*文字の大きさ*/
.fsS { font-size: 0.8em; }
.fsM { font-size: 1em; }

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

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

.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; }


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

/***********************************************************************
** 見出しのスタイル
************************************************************************/
.entry-header {
	& h1 {
		position: relative;
		padding: 1rem 1rem;
		border-bottom: 5px solid rgba(var(--siteColor1), 0.5);
	}
	& h1:before {
		position: absolute;
		bottom: -5px;
		left: 0;
		width: 20%;
		height: 5px;
		content: '';
		background: rgba(var(--siteColor1), 1);
	}
}
/* 通常 h2タグ */
.article h2 {
	font-size: 1.5em;
	color: rgba(var(--siteColor1), 1);
	font-weight: normal;
	letter-spacing: 1.6px ;
	line-height: 1.35;
	border-left: solid 9px rgba(var(--siteColor1), 1);
	padding: 0.6em 0.6em 0.6em 0.8em;
	margin-bottom: 1.2em;
	background: rgba(var(--siteColor1), 0.1);
}
@media screen and (max-width: 520px){ .article h2 { font-size: 1.1em; font-weight: bold; } }
/* サイドバー h2タグ */
.sidebar h2 {
	color: rgba(var(--siteColor1), 1);
	padding: 0.4rem;
	position: relative;
	border-bottom: 4px solid rgba(var(--siteColor1), 0.5);
	background-color: transparent;
}
.sidebar h2:before {
	position: absolute;
	width: 20%;
	bottom: -4px;
	left: 0;
	height: 4px;
	content: '';
	background: rgba(var(--siteColor1), 1);
}

/* 通常 h3タグ */
.article h3 {
	color: #555;
	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 rgba(var(--siteColor2), 1);
	border-right: none; border-top: none; border-bottom: none;
}
/* サイドバー h3タグ */
h3.widget-sidebar-title {
	color: rgba(var(--siteColor1), 1);
	padding: 0.4rem;
	position: relative;
	border-bottom: 4px solid rgba(var(--siteColor1), 0.5);
	background-color: transparent;
}
h3.widget-sidebar-title:before {
	position: absolute;
	width: 20%;
	bottom: -4px;
	left: 0;
	height: 4px;
	content: '';
	background: rgba(var(--siteColor1), 1);
}
@media screen and (max-width: 520px){ h3.widget-sidebar-title { font-size: 18px; } }
/* 通常 h4タグ */
.article h4 {
	font-size: 1.1em;
	color: rgba(var(--siteColor1), 1);
	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;
}


/***********************************************************************
** サイドバー
************************************************************************/
.widget_search .wp-block-search__button { background-color: rgba(var(--siteColor1), 1); }/* 検索ボタンの色 */

/** サイドバー検索バーデザイン **/
/* ①ボックス部分 */
.search-edit, .search-box input[type="text"] {
	color: #4d4435;
	border-radius: 3px;
	outline: none;
	padding-left: 5px;
}
/* ②検索ボタン */
[type=submit].search-submit {
	top: 0;
	right: 0;
	height: 100%;
	padding: 8px 15px;
	background: rgba(var(--siteColor1), 1);
	color: #fff;
	font-size: 18px;
	font-weight: bold;
	border: none;
	border-radius: 0 3px 3px 0;
	transition:0.3s;
}
/* ③検索ボタン(hover) */
@media screen and (min-width: 980px) {
	[type=submit].search-submit:hover {
		color: #fff;
		background: rgba(var(--siteColor1), 0.8);
	}
}


/***********************************************************************
** 施設情報ページ　inn
************************************************************************/
.inn_first_img { max-height: 500px; }
/* 画像出典・ステマ規制案内 */
.sourceIMG { font-size: 0.7em; color: #aaa; margin: -1.5em 0 2em 0; padding: 0; }
.sourceIMG a { color: #aaa; text-decoration: none; }
.innDate_h2 {
	color: #555!important;
	background-color: transparent!important;
	border: none!important;
	margin-bottom: 0!important;
	padding: 0.6em 0!important;
}
.innDate_h2 i {
	color: rgba(var(--siteColor1), 0.9);
	margin-right: 0.4em;
}
.innDate_h2 span { font-weight: normal; }
@media screen and (max-width: 768px) {
	.innDate_h2 { padding: 1em 0!important; font-size: 1.3em!important; }
}
/* 免責事項 BOX */
.disclaimer {
	color: #555;
	background-color: #EEE;
	font-size: 0.7em;
	line-height: 1.2;
	padding: 1.5em;
	margin: 5rem 0 3rem;
	border-radius: 12px;
}
.disclaimer ul { padding-left: 1.5em; margin-bottom: 0; }
.disclaimer li {
	list-style-type: none; /* 元のマーカーを消す */
	position: relative; /* 絶対配置するための準備 */
}

.disclaimer li:before {
	content: '※';
	position: absolute;
	left: -1.2em; /* マーカーの位置調整 */
}

/* 宿データ　共通項目
************************************/
.innDateArea { margin-bottom: 4em; }
.innDateArea p { margin: 0; }
@media screen and (max-width: 768px){ .innDateArea { margin-bottom: 3em; } }
.innDateArea dl { font-size: 1em; display: flex; flex-flow: row wrap; width: 100%; }
.innDateArea dt, .innDateArea dd { padding: 0.6em 1em; border-bottom: 1px solid #cecece; }
.innDateArea dt:nth-of-type(1), .innDateArea dd:nth-of-type(1) { border-top: 1px solid #cecece; }
.innDateArea dt { color: rgba(var(--siteColor1), 1); font-weight: bold; flex-basis: 30%; background-color: rgba(var(--siteColor1), 0.09); }
.innDateArea dt i { margin-right: 0.2em; }
.innDateArea dd { margin-left: 0; flex-basis: 70%; line-height: 1.5; }
.innDateArea dd ul { padding-left: 0; }
.innDateArea dd li { padding: 2px 3px; }
@media screen and (max-width: 768px) {
	.innDateArea dl { flex-flow: column; }
	.innDateArea dt:nth-of-type(1), .innDateArea dd:nth-of-type(1) { border: none; }
	.innDateArea dt, .innDateArea dd { padding: 0.25em 1em; border: none; }
	.innDateArea dd { padding: 0.5em 1em; }
}

/* 宿泊施設情報 サマリー stayInfoBox1
************************************/
.stayInfoBox1 {
	border: 2px solid #aaa;
	border-radius: 1em;
	padding: 1.5em;
}
@media screen and (max-width: 768px){ .stayInfoBox1 { padding: 1em 0.8em; } }
.stayInfoBox1 i {
	color: rgba(var(--siteColor1), 1);
	margin-right: 0.5em;
}
.stayInfoBox1 .facilityInfoTable_02 { font-size: 1em; margin-bottom: 0.8em; }
.stayInfoBox1 .facilityInfoTable_02 th,
.stayInfoBox1 .facilityInfoTable_02 td {
	text-align: left;
	background-color: #FFF;
	border: none;
	border-bottom: solid 1px #EAEAEA;
	padding:0.5em 1em;
}
.stayInfoBox1 .facilityInfoTable_02 th {
	vertical-align: top;
	width: 11em;
	font-weight: bold;
}
@media screen and (max-width: 768px){
	.stayInfoBox1 .facilityInfoTable_02 th { padding: 0.5em 0.4em 0.5em 1em; }
	.stayInfoBox1 .facilityInfoTable_02 td { padding: 0.5em 0.8em 0.5em 0; }
}
/* 宿泊した人の評価　レビューボックス
************************************/
.reviewBox{
	border: 2px solid rgba(var(--siteColor3), 1);
	border-radius: 4px;
	background: rgba(var(--siteColor3), 0.08);
	padding: 1em 2.5em;
	margin-bottom: 1.5em;
}
.reviewBox2{
	border-radius: 4px;
	background: rgba(var(--siteColor3), 0.08);
	padding: 2em 2.5em;
	margin-bottom: 1em;
}
.general_review { margin-bottom: 0!important; text-align: center; }
.general_review_Rating { font-weight: bold; font-size: 1.5rem; }
.general_review_Posts { margin-left: 1em; }
@media screen and (max-width: 768px){
	.reviewBox { padding: 1em 0.5em; margin-bottom: 1em; }
	.reviewBox2 { padding: 2em 2em; }
	.general_review_Rating { display: block; font-size: 1.3rem; }
	.general_review_Posts { display: block; margin-left: 0; }
}
/* 6つの評価 */
.review6ratingArea { margin-bottom: 1em; }
.review6ratingArea p { margin: 0; }
.review6ratingArea dl { font-size: 0.8em; display: flex; flex-flow: row wrap; width: 100%; margin-bottom: 0; }
@media screen and (max-width: 834px) { .review6ratingArea dl { font-size: 1em; } }
.review6ratingArea dt, .review6ratingArea dd { padding: 0.6em 0.8em; border-bottom: 1px dotted #ccc; }
.review6ratingArea dt:nth-of-type(1), .review6ratingArea dd:nth-of-type(1) { border-top: 1px dotted #ccc; }
.review6ratingArea dt { flex-basis: 40%; }
.review6ratingArea dt i { margin-right: 0.2em; }
.review6ratingArea dd { margin-left: 0; flex-basis: 60%; line-height: 1.5; }
/* レーダーチャート設定 */
#chart-container { width: 100%; max-width: 600px; }
.radarChartWrap { margin: 0 auto; text-align: center; }

/* クチコミ・お客さまの声（吹き出し） */
.speech-wrap { margin-bottom: 0.3em!important; }
.speech-person { width: 8%; min-width: 8%; }/* アイコンサイズ */
.speech-balloon { padding: 1em!important; }
/* 3行で省略 */
.userReviewVoice {
	max-width: 640px;
	display: -webkit-box;
	overflow: hidden;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}
@media screen and (max-width: 520px) {
	.userReviewVoice { -webkit-line-clamp: 5; }
}


/* 宿泊プラン ボックスリスト rtPlanList_box
************************************/
.rtPlanList_box {
	position: relative;
	max-width:1000px;
	margin: 0 auto 1.5em;
	padding: 1.5em 2.5em 1em;
	border: 2px solid rgba(var(--siteColor3), 1);
	border-radius: 4px;
	background: rgba(var(--siteColor3), 0.08);
}
@media screen and (max-width: 768px){ .rtPlanList_box { padding: 1.5em 1.5em 0.8em; } }
.rtPlanList_box p { font-size: 1em; margin-bottom: 0; }
.rtPlanList_box .box-title {
	position: absolute;
	top: -18px;
	left: 27px;
	border-radius: 4px;
	background: rgba(var(--siteColor3), 0.08);
	color: #fff;
	padding: 0.5em 1em;
	line-height: 1;
	font-weight: bold;
	letter-spacing: 1px;
}
.rtPlanList {
	counter-reset: number;
	list-style-type: none;
	padding: 0!important;
	margin: 0!important;
}
.rtPlanList li {
	border-bottom: 1px dashed;
	border-color: #cdcdcd;
	position: relative;
	margin: 0.5em 0 !important;
	padding: 0 0 0.5em 2em;
}
.rtPlanList li:last-child { border:none; }
.rtPlanList li:before {
	counter-increment: number;
	content: counter(number);
	background-color: #ffa952;
	color: #fff;
	position: absolute;
	font-weight:bold;
	font-size: 0.8em;
	border-radius: 50%;
	left: 0;
	top:0.2em;
	width: 24px;
	height: 24px;
	line-height: 24px;
	text-align: center;
}


/* 楽天トラベル 宿泊施設情報 囲み見出し stayInfoBox3
************************************/
.stayInfoBox3 {
	font-size:0.9em;
	position: relative;
	margin: 2em auto;
	padding: 1.8em 2em;
	background-color: #fff;
	border: 2px solid #aaa;
}
.stayInfoBox3_title {
	position: absolute;
	padding: 0 0.5em;
	left: 20px;
	top: -15px;
	font-size: 1.1em;
	font-weight: bold;
	background-color: #fff;
}

/* Googleマップ　アスペクト比を維持して横幅100％ */
.innMAP { aspect-ratio: 16/9; width: 100%; height: 100%; }
@media screen and (max-width: 520px){ .innMAP { aspect-ratio: 3/4; } }

/* YouTube動画　アスペクト比を維持して横幅100％ */
.video-container { max-width: none; } /* YouTube動画をカラム幅いっぱいに広げる */
.innYouTube { aspect-ratio: 16/9; width: 100%; height: 100%; }


/* 同じエリアの宿　sameAreaCardLink
************************************/
.sameAreaCardLink {
	margin-bottom: 0em;
	
	.swiper-button-next { display: none; }
}





/***********************************************************************
** 地域別のtableテーブルデザイン設定
************************************************************************/
.areaTable { line-height: 1.4; color: rgba(var(--siteColor1), 1); }
.areaTable tr:nth-of-type(2n+1) { background-color: rgba(var(--siteColor1), 0.08); }
.areaTable th, .areaTable td { border: none; }
.areaTable td { padding:0.4em 0.8em; }
.areaTable td:first-of-type { font-weight:bold; width:25%; text-align:center; }
.areaTable ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: table;
	table-layout: fixed;
}
.areaTable li {
	font-size:0.9em;
	float:left;
	padding:0 0.5em;
}
.areaTable li a { text-decoration: none; }
.areaTable li a:hover { text-decoration: underline; }


/************************************
** エリアから探す アコーディオンメニュー
************************************/
.pref_menu details, .pref_menu details p { margin-bottom: 0; }
.pref_dt {
	&.layer1 {
		border-top: 2px solid rgba(var(--siteColor1), 0.9);
		border-left: 2px solid rgba(var(--siteColor1), 0.9);
		border-right: 2px solid rgba(var(--siteColor1), 0.9);
		&:last-of-type {
			border-bottom: 2px solid rgba(var(--siteColor1), 0.9);
		}
	}
}
.pref_dtsm {
	position: relative;
	display: block;
	padding: 0.5em 1em;
	color: rgba(var(--siteColor1), 1);
	font-size: 1.2em;
	font-weight: bold;
	text-align: center;
	&.layer1 {
		background-color: rgba(var(--siteColor1), 0.1);
	}
	&.layer2 {
		background-color: #FFF;
		border-top: solid 2px rgba(var(--siteColor1), 0.4);
	}
	&:hover { cursor: pointer; }
	&.layer2 a { color: rgba(var(--siteColor1), 1); }
	&.layer2 a:hover { opacity: 0.7; transition-duration: .3s; }
	.pref_btn {
		position: absolute;
		top: 32%;
		right: 10%;
		width: 18px;
		height: 18px;
		transform-origin: center center;
		transition-duration: 0.2s;
		&:before, &:after {
			content: "";
			background-color: rgba(var(--siteColor1), 1);
			border-radius: 10px;
			width: 18px;
			height: 4px;
			position: absolute;
			top: 7px;
			left: 0;
			transform-origin: center center;
		}
		&:before {
			width: 4px;
			height: 18px;
			top: 0;
			left: 7px;
		}
	}
	&.is-active {
		.pref_btn {
			-webkit-transform: rotate(-180deg);
			transform: rotate(-180deg);
			&:before {
				content: none;
			}
		}
	}
}
.pref_dtsm::-webkit-details-marker {
	display: none;
}
.pref_deta_cont {  }
.deta-cont-item {
	padding: 0 1em 1.5em;
	font-size: 0.8em;
}
.pref_dtsm.js-pref_dts.layer2 a { text-decoration: none; }

/************************************
** li リストを横並びにしたリンクボタン（yokoNavBtnLink）
************************************/
.yokoNavBtnLink { list-style: none; overflow: hidden; }
ul.yokoNavBtnLink { padding-left: 0; margin-bottom: 0; line-height: 1.3; }
.yokoNavBtnLink li { float: left; margin: 0.8em 1.4em 0 0!important; }
.yokoNavBtnLink li a {
	display: inline-block;
	text-decoration: none;
	font-weight: bold;
	border-bottom: 1px solid rgba(var(--siteColor1), 1);
	color: rgba(var(--siteColor1), 1);
}
.yokoNavBtnLink li a:hover { opacity: 0.7; transition-duration: .3s; }


/***********************************************************************
** cocoon機能カスタマイズ よくあるご質問 FAQ ボックス customFAQ
************************************************************************/
.customFAQ {
	border: 2px solid rgba(var(--siteColor1), 1);
	background-color: rgba(var(--siteColor1), 0.03);
	padding: 1.8em 2em;
	border-radius: 1em;
}
@media screen and (max-width: 768px) { .customFAQ { padding: 1.4em 0.9em; } }
.customFAQ .faq-item-label {
	color: #fff !important;
	background-color: rgba(var(--siteColor4), 1);
	font-size: 1.1em;
	padding: 0.5em;
	margin-right: 0.8em;
	width: 2em;
	height: 2em;
	line-height: 1.1em;
	text-align: center;
	border-radius: 50%;
}
.customFAQ .faq-answer-label { background-color: rgba(var(--siteColor1), 0.8); }
.customFAQ .faq-answer-content { line-height: 1.6!important; }
.customFAQ .faq-answer-content p { margin-bottom: 0.5em!important; }
.customFAQ .faq-answer-content ul { padding-left: 1em; }
@media screen and (max-width: 768px) {
	.customFAQ .faq-item-label { font-size: 0.8em; line-height: 1em; }
	.customFAQ .faq-answer-content { margin-top: 0; }
}

/***********************************************************************
** cocoon機能カスタマイズ .info-boxのデザイン設定　影付きボックス
************************************************************************/
.is-style-info-box, .info-box, .sp-info, .info {
	color: #545454;
	background-color: #FFF;
	border: 3px solid #343434;
	box-shadow: 8px 8px 0 #abd0ce;
	padding: 1.8em 2em;
	margin-top: 2em;
	margin-bottom: 3em;
}
@media screen and (max-width: 834px) { .is-style-info-box, .info-box, .sp-info, .info { padding: 1.4em 0.9em; } }
.is-style-info-box h3, .info-box h3, .sp-info h3, .info h3 { margin-top: 0; }
.is-style-info-box h4, .info-box h4, .sp-info h4, .info h4 { padding: 0; }
.is-style-info-box p, .info-box p, .sp-info p, .info p { margin-bottom: 0.5em!important; line-height: 1.7!important; }
.is-style-info-box ul, .info-box ul, .sp-info ul, .info ul { padding-left: 1em; }
.is-style-info-box li, .info-box li, .sp-info li, .info li { font-size: 0.9em; }
.is-style-info-box li span, .info-box li span, .sp-info li span, .info li span { font-weight: bold; }

.info-box .col2_sp1 { width: calc(100% / 2 - 1.5em); padding-bottom: 1rem; }
@media screen and (max-width: 520px) { .info-box  .col2_sp1 { width: calc(100% / 1); } }
.info-box p { font-size: 1rem; }
.info-box .btn-blue {
	color: #FFF;
	border: 3px solid #fca326;
	background-color: #fca326;
	box-shadow: none;
}

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

.btn-yellow {
	color: #FFF;
	border: 3px solid #fca326;
	background-color: #fca326;
	justify-content: center;
	letter-spacing: 0.1em;
	padding: 0.6em 1em;
	border-radius: 100vw!important;
}
.btn-green {
	color: #FFF;
	width: 100%;
	border: 3px solid rgba(var(--siteColor1), 1);
	background-color: rgba(var(--siteColor1), 1);
	justify-content: center;
	letter-spacing: 0.1em;
	padding: 0.5em 1em;
	border-radius: 100vw!important;
}
.btn-green:hover, .btn-yellow:hover { color: #FFF; }
.btn-green.routeGuidance { background-color: #85A9CA; border: 3px solid #85A9CA; }/* ルート案内ボタン */
@media screen and (max-width: 768px){
	.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;
	gap: 0.5em;
}
.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 - 0.5em); }
@media screen and (max-width: 834px) { .col4_sp1 { width: calc(100%/2 - 0.5em); } }
@media screen and (max-width: 520px) { .col4_sp1 { width: calc(100%/1); } }
.col4_sp2 { width: calc(100%/4 - 0.5em); }
@media screen and (max-width: 834px) { .col4_sp2 { width: calc(100%/2 - 0.5em); } }

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

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

.col2_sp2 { width: calc(100%/2 - 0.5em); }