@charset "utf-8";

/* コンテンツ幅 フル */
.contentsInr { width: auto; padding: 0px; }

.tokachi-cheese .ctm_contentsFull { margin-top: 0; }
@media all and (max-width: 739px){
	.tokachi-cheese .ctm_contentsFull { padding: 30px 0; }
}
@media all and (min-width: 740px){
	.tokachi-cheese .ctm_contentsFull { margin-top: 0; }
}

/* コンテンツ幅 950px */
.contentsInr .contentsUnit,
.contentsInr .module { padding: 0 10px; margin: 0 auto; }

@media all and (min-width: 740px){
	.contentsInr .contentsUnit,
	.contentsInr .module { width: 950px !important; padding: 0px; margin: 0 auto; }
	.contentsInr .module { float: none !important; }
}

/* font */
.tokachi-cheese .ctm_pageTtl .heading sub { font-family: "Playwrite NL", cursive; font-optical-sizing: auto; font-weight: 200; font-style: normal; }

@media all and (min-width: 740px){
	.alC_forPC { text-align: center; }
}

.txtStrike,
.tokachi-cheese .fsI { text-decoration: line-through; }
.tokachi-cheese .fsI { font-style: normal; }

/* icon */
.tokachi-cheese .material-symbols-outlined { font-variation-settings: 'wght' 300; vertical-align: -0.65rem; }

/* iconTxt */
.tokachi-cheese [class^="ctm_iconTxt_br"] { display: inline-block; padding: 3px 1.0rem 1px; color: #fff; border-radius: 4px; letter-spacing: 0.1rem; }

.tokachi-cheese .txtLimited { position: absolute; transform: rotate(-12deg); padding: 0.2em 0.5em 0.1em 0.5em; font-weight: bold; color: #16b2e3; background: #fff; border: 2px solid #16b2e3; }

/* list */
/*
.fsS li { font-size: 1.4rem; }
.fsL li { font-size: 1.8rem; }
@media all and (min-width: 740px){
	.fsS li { font-size: 1.2rem; }
	.fsL li { font-size: 1.6rem; }
}
*/
@media all and (min-width: 740px){
	.listSide ul { display: flex; justify-content: center; }
	.listSide ul > li + li { margin: 0 0 0 2.0rem; }
}

.tokachi-cheese .table_typeA table tr td .noteList li { line-height: 1.5; }

/* ctm_pageTtl */
.tokachi-cheese .ctm_pageTtl.pageTtl_typeA .ttlLv1 { position: relative; margin: 80px 0 40px 0; padding: 10px 0 0; border-top: 6px solid #fff; }
.tokachi-cheese .ctm_pageTtl.pageTtl_typeA .ttlLv1:before { content: ""; position: absolute; display: block; top: -50px; left: 51%; transform: translate(-50%, -50%); width: 24px; height: 24px;
-webkit-mask-image: url(/content/dam/sites/wwwjalcojp/jp/ja/domtour/jaldp/tokachi-cheese/img_sites/heading_bg01.svg?v=1);
-webkit-mask-size: contain;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-image: url(/content/dam/sites/wwwjalcojp/jp/ja/domtour/jaldp/tokachi-cheese/img_sites/heading_bg01.svg?v=1);
mask-size: contain;
mask-repeat: no-repeat;
mask-position: center;
background-color: #fff; }
.tokachi-cheese .ctm_pageTtl.pageTtl_typeA .ttlLv1:after { content: ""; position: absolute; display: inline-block; 
width: 90%; height: 100px; background: url(/content/dam/sites/wwwjalcojp/jp/ja/domtour/jaldp/tokachi-cheese/img_sites/heading_bg01.png?v=1) no-repeat; background-size: 100%; top: -50px; left: 0; right: 0; margin: 0 auto; }
.tokachi-cheese .ctm_pageTtl.pageTtl_typeA .ttlLv1 h2 { position: relative; font-weight: normal; }
.tokachi-cheese .ctm_pageTtl.pageTtl_typeA .ttlLv1 h2 sub { position: absolute; display: block; color: #fff; 
font-size: 2.2rem; top: -42px; left: 0; right: 0; margin: 0 auto; }
@media all and (min-width: 740px){
	.tokachi-cheese .ctm_pageTtl.pageTtl_typeA .ttlLv1:after { width: 40%; }
}

.tokachi-cheese .ctm_pageTtl .ttlLv2 h3 { font-weight: normal; }
.tokachi-cheese .ctm_pageTtl .ttlLv3 h4 { padding: 0; }

@media all and (max-width: 739px){
	.tokachi-cheese .ctm_pageTtl .ttlLv1 h2 { font-size: 2.8rem; padding: 0 10px; }
	.tokachi-cheese .ctm_pageTtl .ttlLv2 h3 { font-size: 2.6rem; padding: 0 10px; }
	.tokachi-cheese .ctm_pageTtl .ttlLv3 h4 { }
}

@media all and (min-width: 740px){
	.tokachi-cheese .ctm_pageTtl .ttlLv1 h2 { font-size: 3.8rem; width: 950px; }
	.tokachi-cheese .ctm_pageTtl .ttlLv2 h3 { }
	.tokachi-cheese .ctm_pageTtl .ttlLv3 h4 { }
}

/* caption */
.tokachi-cheese .txtCaption { font-size: 1.2rem; }

/* Button type horizon
.tokachi-cheese .ctm_btnList_horizon .btnBox { display: block; width: 100%; height: 100%; }
.tokachi-cheese .ctm_btnList_horizon .col > div { height: 100%; }
.tokachi-cheese .ctm_btnList_horizon .col .btn { display: table; width: 100%; height: 100%; padding-top: 10px; padding-bottom: 10px; margin-top: 0px; }
.tokachi-cheese .ctm_btnList_horizon .col .btnInr { display: table-cell; vertical-align: middle; width: 100%; height: 100%; }
*/

/* anchorList */
@media all and (max-width: 739px){
	.tokachi-cheese .anchorList .btn { margin-top: 0; }
}



/* Notice */
#Notice.ctm_contentsFull { background: #fff; }

#Notice .ctm_pageTtl .ttlLv1 { margin: 0; padding: 0; }
#Notice .ctm_pageTtl .ttlLv1 h2 { font-size: 2.6rem; }
@media all and (min-width: 740px){
	#Notice .ctm_pageTtl .ttlLv1 h2 { font-size: 3.2rem; }
}



/* Navi */
#Navi.ctm_contentsFull { background: #fff; }

#Navi .btnBox .btn { background: #a7a109; }
#Navi .btnBox .btn.iconDown:after { /* background-position: -89px -53px; */ }

@media all and (max-width: 739px){
	#Navi .ctm_btnList_horizon .col .btn { margin-top: 0; width: 80vw; }
}



/* Point */
#Point.ctm_contentsFull { background-color: #f5f1aa; }

#Point .profileBlock .profileBlockClm_01 .clm_1_2col { width: 100%; height: auto; background-image: url(/content/dam/sites/wwwjalcojp/jp/ja/domtour/jaldp/tokachi-cheese/img_sites/profile_pic01.png?v=1); background-repeat: no-repeat; }
@media all and (max-width: 739px){
	#Point .profileBlock .profileBlockClm_01 .clm_1_2col { background-size: 70%; background-position: top; padding-top: 65vw; }
}
@media all and (min-width: 740px){
	#Point .profileBlock .profileBlockClm_01 .clm_1_2col { background-size: 25%; background-position: center; }
	#Point .profileBlock .profileBlockClm_01 .clm_1_2col .col:nth-child(1) .ctm_pageTtl .ttlLv2 { padding-right: 80px; }
	#Point .profileBlock .profileBlockClm_01 .clm_1_2col .col:nth-child(2) { padding-left: 80px; }
}

#Point .profileBlock .ctm_pageTtl .ttlLv2 sub { font-size: 1.6rem; position: relative; display: inline-block; padding: 0 60px; }
#Point .profileBlock .ctm_pageTtl .ttlLv2 sub:before,
#Point .profileBlock .ctm_pageTtl .ttlLv2 sub:after { content: ''; position: absolute; display: inline-block; top: 50%;
width: 40px; height: 3px; border-top: solid 3px #fff; }
#Point .profileBlock .ctm_pageTtl .ttlLv2 sub:before { left:  0; }
#Point .profileBlock .ctm_pageTtl .ttlLv2 sub:after  { right: 0; }
@media all and (min-width: 740px){
	#Point .profileBlock .ctm_pageTtl .ttlLv2 sub { padding: 0 50px; }
	#Point .profileBlock .ctm_pageTtl .ttlLv2 sub:before,
	#Point .profileBlock .ctm_pageTtl .ttlLv2 sub:after { width: 30px; }
}

@media all and (min-width: 740px){
	#Point .profileBlock .profileBlockClm_02 .clm_1_2col {  }
	#Point .profileBlock .profileBlockClm_02 .clm_1_2col .col:nth-child(1) { width: 66.67%; }
	#Point .profileBlock .profileBlockClm_02 .clm_1_2col .col:nth-child(1) figcaption { text-align: center; }
	#Point .profileBlock .profileBlockClm_02 .clm_1_2col .col:nth-child(2) { width: 33.33%; margin: 0; }
}

#Point .ctm_pageTtl.pageTtl_typeA .ttlLv1 { border-top: 6px solid rgb(224, 113, 47, 1.0); }
#Point .ctm_pageTtl.pageTtl_typeA .ttlLv1 h2 sub { color: rgb(224, 113, 47, 1.0); }
#Point .ctm_pageTtl.pageTtl_typeA .ttlLv1:before { background-color: #e0712f; }

#Point .pointListBlock .numList  li { font-size: 1.6rem; }
#Point .pointListBlock .numList > li { padding: 0 0 1.5rem 4.0rem !important; border-bottom: 3px solid #fff; }
#Point .pointListBlock .numList > li + li { margin-top: 2.2rem; }
#Point .pointListBlock .numList > li:before {
	font-family: "Playwrite NL", cursive; font-optical-sizing: auto; font-weight: 200; font-style: normal; font-size: 2.6rem; color: #e0712f; top: 1.5rem; width: 3.5rem; padding-right: 1.0rem; }
#Point .pointListBlock .noteList  li { font-size: 1.4rem; }

#Point .dateBlock { border-top: 1px solid #e0712f; }
#Point .dateBlock.dateBlock_02 { border-top: none; }

#Point .dateBlock .ctm_pageTtl .ttlLv2 h3 { }
#Point .dateBlock .ctm_pageTtl .ttlLv2 h3 sup { color: #e0712f; font-weight: bold; }

#Point .dateBlock .dateBox { position: relative; padding: 20px; background: #fff; }
#Point .dateBlock .dateBox:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 20px; background: repeating-linear-gradient(-45deg, #fff, #fff 5px, #f5f1aa 5px, #f5f1aa 10px); }

#Point .dateBlock .dateBox .imgSeal { position: absolute; transform: scale(0.35); top: -80px; left: -50px; }
@media all and (max-width: 739px){
	#Point #day2_02 .imgSeal,
	#Point #day2_05 .imgSeal,
	#Point #day2_06 .imgSeal { transform: scale(0.45); top: -75px; }
	#Point #day1_02 .imgSeal { left: -65px; }
	#Point #day2_02 .imgSeal { left: -40px; }
	#Point #day2_05 .imgSeal { left: -61px; }
	#Point #day2_06 .imgSeal { left: -40px; }
	#Point .dateBlock .dateBox .imgRibbon { margin-top: 10px; }
}
@media all and (min-width: 740px){
	#Point .dateBlock .dateBox .imgSeal { transform: scale(0.25); top: -128px; left: -60px; }
	#Point #day2_02 .imgSeal,
	#Point #day2_05 .imgSeal,
	#Point #day2_06 .imgSeal { transform: scale(0.3); }
	#Point .dateBlock .dateBox .imgRibbon { position: absolute; width: 38%; top: -30px; right: 0; left: 0; margin: 0 auto; }
}

#Point .dateBlock .dateBox .ctm_pageTtl .ttlLv3 { padding: 5px 0; border-bottom: 1px solid #e0712f; color: #e0712f; font-weight: normal; }

#Point .dateBlock .dateBox .ctm_pageTtl .ttlLv4 h5 { font-size: 1.6rem; }

#Point .dateBlock .dateBox .bdrWrap { border-top: 1px solid #e0712f; }

#Point .dateBlock .dateBox .imgWrap { position: relative; }
#Point .dateBlock .dateBox .imgWrap .imgAbs { position: absolute; }
@media all and (max-width: 739px){
	#Point #day2_01 .imgWrap .imgAbs { transform: scale(0.25); top: -310px; right: -250px; }
}
@media all and (min-width: 740px){
	#Point #day2_01 .imgWrap .imgAbs { transform: scale(0.3); top: -160px; left: -320px; }
}

#Point .dateBlock .dateBox .menuBox { padding: 0 20px 20px; border: 1px solid #a7a109; }
#Point .dateBlock .menuBox .ctm_pageTtl .ttlLv4 { color: #a7a109; }
#Point .dateBlock .menuBox .clm_1_2col .col:nth-child(2) .numList { counter-reset: numList 7; }



/* Course */
#Course.ctm_contentsFull { background: rgb(224, 113, 47, 0.5); }

#Course .table_typeA .tbl_col_1 { width: 25%; }

#Course .table_typeA th { background: #333; }
#Course .table_typeA td { background: #fff; }

#Course .table_typeA table { border: none; }
#Course .table_typeA table tr th,
#Course .table_typeA table tr td { border-top: 3px solid #efb897; border-left: none;  }



/* Schedule */
#Schedule.ctm_contentsFull { background: #f5f1aa; }

#Schedule .ctm_pageTtl.pageTtl_typeA .ttlLv1 { border-top: 6px solid rgb(224, 113, 47, 1.0); }
#Schedule .ctm_pageTtl.pageTtl_typeA .ttlLv1 h2 sub { color: rgb(224, 113, 47, 1.0); }
#Schedule .ctm_pageTtl.pageTtl_typeA .ttlLv1:before { background-color: #e0712f; }

#Schedule .ctm_pageTtl .ttlLv2 { margin-top: 10px; color: #e0712f; }

#Schedule .table_typeA .tbl_col_1 { width: 15%; }
#Schedule .table_typeA .tbl_col_3 { width: 10%; }
@media all and (max-width: 739px){
	#Schedule .table_typeA-auto .tbl_col_1 { width: 45%; }
}

#Schedule .table_typeA th { background: #333; text-align: center; }
#Schedule .table_typeA td { background: #fff; }

#Schedule .table_typeA table { border: none; }
#Schedule .table_typeA table tr th,
#Schedule .table_typeA table tr td { border-top: 3px solid #f5f1aa; border-right: 3px solid #f5f1aa; border-left: none;  }

#Schedule .table_typeA strong { color: #e0712f; }

#Schedule .table_typeA td .ttlLv4 { margin-bottom: 0; padding-top: 10px; font-weight: normal; }
	
#Schedule .table_typeA .dateWrap { text-align: center; }
#Schedule .table_typeA .dateWrap .fsL { padding: 0.4rem 1.0rem 0.1rem; color: #fff; background: #e0712f; }

#Schedule .table_typeA .pointWrap { margin-top: 10px; padding: 10px 10px 10px 16px; background: rgb(224, 113, 47, 0.25); }
#Schedule .table_typeA .pointWrap .ttlLv3 { margin: 0 0 10px; }
#Schedule .table_typeA .pointWrap h4 { padding-bottom: 5px; font-size: 1.8rem; font-weight: bold; border-bottom: 2px solid #fff; }





/* Hotel */
#Hotel.ctm_contentsFull { background: #fff; }

#Hotel .ctm_pageTtl.pageTtl_typeA .ttlLv1 { border-top: 6px solid #333; }
#Hotel .ctm_pageTtl.pageTtl_typeA .ttlLv1 h2 sub { color: #333; }
#Hotel .ctm_pageTtl.pageTtl_typeA .ttlLv1:before { background-color: #333; }

#Hotel .dateBlock { border-top: 1px solid #a7a109; }

#Hotel .dateBlock .ctm_pageTtl .ttlLv2 h3 sup { color: #a7a109; }
#Hotel .dateBlock .ctm_pageTtl .ttlLv2 h3 span { font-size: 2.2rem; }
@media all and (max-width: 739px){
	#Hotel .dateBlock .ctm_pageTtl .ttlLv2 h3 { font-size: 2.4rem; }
	#Hotel .dateBlock .ctm_pageTtl .ttlLv2 h3 span { font-size: 1.8rem; }
}

#Hotel .dateBlock .ctm_pageTtl .ttlLv3 { margin: 0 0 10px; padding: 12px 10px 10px; color: #fff; background: #a7a109; }
#Hotel .dateBlock .ctm_pageTtl .ttlLv3 h4 { padding: 0; font-size: 1.8rem; font-weight: normal; }
@media all and (min-width: 740px){
	#Hotel .dateBlock .ctm_pageTtl .ttlLv3 h4 { font-size: 2.0rem; }
	#Hotel .dateBlock .clm_1_2col .col:nth-child(2) .ctm_pageTtl .ttlLv3 h4 { text-align: left; }
}

#Hotel .dateBlock .ctm_bdrColumn .colWrap .col,
#Hotel .dateBlock .hotelListBlock { border: 1px solid #ccc; padding: 20px; }

#Hotel .dateBlock .imgParts { padding: 10px 5px 0; }

#Hotel .dateBlock .slick-list li,
#Hotel .dateBlock .imgParts { position: relative; }
#Hotel .dateBlock .slick-list li::after { content: ""; }
#Hotel .dateBlock .slick-list li::after,
#Hotel .dateBlock figcaption { position: absolute; bottom: 0; left: 5px; padding: 0.3rem 0.7rem 0.1rem 0.8rem; font-size: 1.2rem; color: #fff; background: rgba(0,0,0,0.5); }

#Hotel_01 .slick-list li:nth-child(2)::after { content: "外観"; }
#Hotel_01 .slick-list li:nth-child(3)::after { content: "客室"; }
#Hotel_01 .slick-list li:nth-child(4)::after { content: "朝食（イメージ）"; }

#Hotel_02 .slick-list li:nth-child(2)::after { content: "外観"; }
#Hotel_02 .slick-list li:nth-child(3)::after { content: "サウナ"; }
#Hotel_02 .slick-list li:nth-child(4)::after { content: "朝食（イメージ）"; }

#Hotel_03 .slick-list li:nth-child(2)::after { content: "露天風呂"; }
#Hotel_03 .slick-list li:nth-child(3)::after { content: "夕食（イメージ）"; }
#Hotel_03 .slick-list li:nth-child(4)::after { content: "客室"; }

#Hotel .dateBlock .ctm_pageTtl { position: relative; }

#Hotel .ctm_pageTtl .iconBath { position: absolute; text-align: center; font-size: 1.4rem; top: 5px; right: 10px; }
#Hotel .ctm_pageTtl .iconBath i {display: block; font-size: 1.6rem; color: #fff; font-weight: bold; width: 1.8em; height: 1.8em; line-height: 2.0em; border-radius: 50%; background: #333; }
@media all and (min-width: 740px){
	#Hotel .ctm_pageTtl .iconBath { font-size: 1.1rem; }
	#Hotel .ctm_pageTtl .iconBath i { font-size: 1.4rem; width: 1.7em; height: 1.7em; line-height: 1.9em; }
}




/*
#Hotel .dateBlock .detailListWrap { border-top: 1px solid #333; padding-top: 10px; }
@media all and (min-width: 740px){
	#Hotel .dateBlock .detailListWrap .txtList { display: flex; justify-content: center; }
	#Hotel .dateBlock .detailListWrap .txtList > li + li { margin: 0 0 0 2.0rem; }
}
*/



/* Note */
.optinBox span.optInCheck { position: relative; display: inline-block; vertical-align: middle;
-webkit-box-sizing: border-box; box-sizing: border-box; }

.optinBox span.optInCheck { width: 18px; height: 18px; }
@media all and (min-width: 740px) {
	.optinBox span.optInCheck { width: 20px; height: 20px; }
}

.optinBox span.optInCheck::before { content: ""; position: absolute; display: block; height: 20px; width: 20px;
background: #fff; border: 2px solid #c00; top: 0; left: 0; }
.optinBox span.optInCheck::after { content: ""; position: absolute; display: block;
border-right: 3px solid #333; border-bottom: 3px solid #333; top: 50%; opacity: 0;
margin-top: -9px; width: 8px; height: 13px; left: 5px;
-webkit-transform: rotate(45deg); transform: rotate(45deg); }
@media all and (min-width: 740px) {
	.optinBox span.optInCheck::after { margin-top: -8px; width: 8px; height: 12px; left: 6px; }
}

.optinBox input[type="checkbox"] { position: absolute; opacity: 0;
-webkit-appearance: none; -moz-appearance: none; appearance: none; }

.optinBox label { position: relative; display: inline-block; padding: 5px 10px; width: auto; cursor: pointer;
-webkit-box-sizing: border-box; box-sizing: border-box; }
@media all and (min-width: 740px) {
	.optinBox label { padding: 5px 0; }
}

input[type="checkbox"]:focus + span.optInCheck { box-shadow: 0 0 3px 3px #ccc; }
input[type="checkbox"]:checked + span.optInCheck:after { opacity: 1; }

.optinBox span.agreeTxt { display: inline-block; margin-left: 15px; font-size: 1.8rem; font-weight: bold; vertical-align: -2px; }

#Note .acodBlock > .heading > h2,
#Apply .acodBlock > .heading > h2 { font-size: 1.8rem; }



@media all and (max-width: 739px){
	.tokachi-cheese .js-eqHeightCols .js-eqHeightCols-item,
	.tokachi-cheese .js-eqHeightCols .js-eqHeightCols-item-2,
	.tokachi-cheese .js-eqHeightCols .js-eqHeightCols-item-3,
	.tokachi-cheese .js-eqHeightCols .js-eqHeightCols-item-4 { height: auto!important; }
}

@media all and (max-width: 739px){
}
@media all and (min-width: 740px){
}