@charset "utf-8";

/* =======================================================================================
	TEMPLATE
======================================================================================= */

/* WRAPPER
------------------------------------------------------------------------ */
	main {
		font-family: var(--site-font_family-sans);
		background: #fafafb url("../images/discover/bg_01.jpg") center top / 1366px auto repeat;
	}
	:where(main) small {
		font-family: inherit;
		font-weight: 500;
	}
	:where(main) img {
		width: 100%;
		max-width: none;
		height: auto;
	}
@media screen and (max-width: 1366px) {
	main {
		background-size: 100% auto;
	}
}



/* =======================================================================================
	COMMON
======================================================================================= */

/* discoverAncNavWrap
------------------------------------------------------------------------ */
	.discoverAncNavWrap {}
	.discoverAncNavBox {
		padding: 40px 0;
	}
	.discoverAncNav {}
	.discoverAncNav ul {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		width: 82%;
		max-width: 999px;
		line-height: 1.5;
		color: #000;
		font-weight: bold;
		letter-spacing: .075em;
		background: url("../images/discover/lnav_bg_00.png") left top repeat;
		margin-left: auto;
		margin-right: auto;
		border: 0 solid #000;
		border-width: 1px 0;
	}
	.discoverAncNav li {
		display: grid;
		border: 0 solid #000;
	}
	.discoverAncNav li:nth-of-type(n+2) {
		border-width: 0 0 0 1px;
	}
	.discoverAncNav li a {
		display: grid;
		place-content: center;
		position: relative;
		z-index: 0;
		padding: .6em .3em .55em;
		transition: background .18s ease;
	}
	.discoverAncNav li a .ln {
	}
	.discoverAncNav li a .M_shinyEffect_toRight::before {
		animation: 6s ease-out 2.75s infinite ANIME-M_shinyEffect_toRight;
	}
	/* -- placeholder, hover, current -- */
	@media (hover: hover) and (pointer: fine) {
		.discoverAncNav li a[href]:hover {
			background: rgba(255, 255, 255, .25);
		}
		.discoverAncNav li.ln01 a[href]:hover {
			background: rgba(255, 203, 150, .35);
		}
		.discoverAncNav li.ln02 a[href]:hover {
			background: rgba(250, 200, 211, .35);
		}
		.discoverAncNav li.ln03 a[href]:hover {
			background: rgba(150, 224, 191, .35);
		}
	}
	.discoverAncNav li a[href]:focus-visible {
			background: rgba(255, 255, 255, .25);
	}
	.discoverAncNav li.ln01 a[href]:focus-visible {
			background: rgba(255, 203, 150, .35);
	}
	.discoverAncNav li.ln02 a[href]:focus-visible {
			background: rgba(250, 200, 211, .35);
	}
	.discoverAncNav li.ln03 a[href]:focus-visible {
			background: rgba(150, 224, 191, .35);
	}
	.discoverAncNav li.is-current {
		color: #fff;
		background: left top repeat;
	}
	.discoverAncNav li.is-current.ln01 { background-image: url("../images/discover/lnav_bg_01.png");}
	.discoverAncNav li.is-current.ln02 { background-image: url("../images/discover/lnav_bg_02.png");}
	.discoverAncNav li.is-current.ln03 { background-image: url("../images/discover/lnav_bg_03.png");}
	
@media screen and (max-width: 900px) {
	.discoverAncNav ul {
		width: 88%;			/* feeling. | 不要なら削除可 */
		max-width: 740px;	/* feeling. | 不要なら削除可 */
	}
	.discoverAncNav li a {
		padding: .7em .2em .65em;
	}
}
@media screen and (max-width: 600px) {
	.discoverAncNavBox {
		padding: 30px 0;
	}
	.discoverAncNav ul,
	.discoverAncNav li.is-current {
		background-size: 111.2px auto;
	}
	.discoverAncNav ul {
		width: calc(100% - 24px);
		letter-spacing: .01em;
	}
	.discoverAncNav li a {
		padding: .9em .2em;
	}
}
@media screen and (max-width: 480px) {
	.discoverAncNav ul {
		font-size: .9em;
	}
}


/* categorySetBox
------------------------------------------------------------------------ */
	.categorySetBox + .categorySetBox {
		margin-top: 60px;
	}
	.categorySetBox_jitan {}
	.categorySetBox_holiday {}
	.categorySetBox_outdoor {}
	.categorySetBox_bottomNavi {
		padding-bottom: 60px;
	}


/* discoverArticle
------------------------------------------------------------------------ */
	.discoverArticle {
		--discover-discoverArticle-beforeAfter-width: calc(83 / 1366 * 100%); /* 変動値（最大値は後述で直書き） */
		position: relative;
		z-index: 0;
	}
	:where(.categorySetBox_jitan) .discoverArticle {	--discover-discoverArticle-beforeAfter-bgimg: url("../images/discover/jitan_bg_01.png")}
	:where(.categorySetBox_holiday) .discoverArticle {	--discover-discoverArticle-beforeAfter-bgimg: url("../images/discover/holiday_bg_01.png")}
	:where(.categorySetBox_outdoor) .discoverArticle {	--discover-discoverArticle-beforeAfter-bgimg: url("../images/discover/outdoor_bg_01.png")}
	
	.discoverArticle::before,
	.discoverArticle::after { /* 両サイドの斜線パターン */
		content: "";
		position: absolute;
		inset: 0 auto 0 0;
		z-index: -1;
		width: max(var(--discover-discoverArticle-beforeAfter-width), ((100% - 1200px) / 2));
		background:var(--discover-discoverArticle-beforeAfter-bgimg) center top repeat fixed;
		pointer-events: none;
	}
	.discoverArticle::after {
		inset: 0 0 0 auto;
	}
	
	.discoverArticleInner {
		width: calc(100% - (var(--discover-discoverArticle-beforeAfter-width) * 2));
		max-width: 1200px;
		margin-left: auto;
		margin-right: auto;
	}
	.discoverArticleHeader {
		padding: 5px 0;
	}
	.discoverArticleHeader .heading {
		width: calc(1040 / 1200 * 100%);
		margin-left: auto;
		margin-right: auto;
	}
	.discoverArticleFooter {
		padding: 40px 0 30px;
	}
	.discoverArticleFooter .captionWrap {
		width: 94%;
		max-width: 1000px;
		margin-left: auto;
		margin-right: auto;
	}
@media screen and (max-width: 900px) {
	.discoverArticle {
		--discover-discoverArticle-beforeAfter-width: calc(30 / 900 * 100%);
	}
	.discoverArticle::before,
	.discoverArticle::after {
		width: var(--discover-discoverArticle-beforeAfter-width);
	}
	.discoverArticleHeader .heading {
		width: 94%;
	}
}
@media screen and (max-width: 600px) {
	.discoverArticle {
		--discover-discoverArticle-beforeAfter-width: 10px;
	}
	.discoverArticle::before,
	.discoverArticle::after {
		background-size: 30px auto;
	}
	.discoverArticleHeader .heading {
		width: 100%;
	}
}


/* discoverHeading
------------------------------------------------------------------------ */
	.discoverHeading {
		--M-fluidFontSize-max-fontsize: 33;
		--M-fluidFontSize-min-fontsize: 26;
		--M-fluidFontSize-max-viewport: 1366;
		--M-fluidFontSize-min-viewport: 900;
		--M-fluidFontSize-fontSize: clamp( var(--M-fluidFontSize-min-fontsize) * .1rem, (var(--M-fluidFontSize-min-fontsize) * .1rem) + (1vw - (var(--M-fluidFontSize-min-viewport) / 100 * .1rem)) * (100 * (var(--M-fluidFontSize-max-fontsize) - var(--M-fluidFontSize-min-fontsize)) / (var(--M-fluidFontSize-max-viewport) - var(--M-fluidFontSize-min-viewport))), var(--M-fluidFontSize-max-fontsize) * .1rem );
		display: block;
		position: relative;
		z-index: 0;
		min-height: 0.001vw;				/* for safari | font-sizeにclamp()使用時必須 */
		line-height: 1.3;
		color: #000;
		font-size: var(--M-fluidFontSize-fontSize);
		font-weight: bold;
		text-align: center;
		text-shadow: 3px 0px 1px #fff, -3px 0px 1px #fff, 0px 3px 1px #fff, 0px -3px 1px #fff,
					 2px -2px 1px #fff, 2px 2px 1px #fff, -2px 2px 1px #fff, -2px -2px 1px #fff,
					 0 0 4px #fff, 0 0 5px #fff, 0 0 6px #fff;
		letter-spacing: .01em;
		background: #CCCCCC;
		padding: .5em .6em .45em;
	}
	.categorySetBox_jitan .discoverHeading {	background: #f8daba;}
	.categorySetBox_holiday .discoverHeading {	background: linear-gradient(to right, #e596ae 0%, #fbd689 100%);}
	.categorySetBox_outdoor .discoverHeading {	background: #bde6d0;}
	
	.discoverHeading::before { /* 白縞々 */
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		background: url("../images/discover/section_heading_bg_01.png") center top repeat;
		pointer-events: none;
	}
@media screen and (max-width: 900px) {
	.discoverHeading {
		--M-fluidFontSize-max-fontsize: 29;
		--M-fluidFontSize-min-fontsize: 21;
		--M-fluidFontSize-max-viewport: 900;
		--M-fluidFontSize-min-viewport: 600;
	}
}
@media screen and (max-width: 600px) {
	.discoverHeading {
		--M-fluidFontSize-max-fontsize: 24.5;
		--M-fluidFontSize-min-fontsize: 17;
		--M-fluidFontSize-max-viewport: 600;
		--M-fluidFontSize-min-viewport: 360;
		padding: .7em .6em .65em;
	}
	.discoverHeading::before { /* 白縞々 */
		background-size: 75.5px auto;
	}
}



/* =======================================================================================
	PAGE
======================================================================================= */

/* ----------------------------------------------------------------------------------
	mainVisual | このページ固有のmv設定
---------------------------------------------------------------------------------- */
	.mainVisual {
		position: relative;
		z-index: 0;
		overflow: hidden;
	}
	.mainVisual__txtWrap {
		position: absolute;
		inset: 0 0 auto;
		z-index: 1;
		background: url("../images/discover/main_bg_01.png") center center repeat;
		padding: clamp(5px, (30 / 1366 * 100vw), 30px) 0;
		border-bottom: 2px solid #e83828;
	}
	.mainVisual__txtWrap .mvTtl {
		width: clamp(360px, (720 / 1366 * 100%), 720px);
		margin-left: auto;
		margin-right: auto;
	}
	.mainVisual__picWrap {
		position: relative;
		z-index: 0;
		text-align: center;
		background: linear-gradient(to right,
						rgba(233, 236, 238, .3) 0%,
						rgba(233, 236, 238, .16) calc(50% - (1366px / 2)),
						rgba(233, 236, 238, 0) calc(50% + (1366px / 2))
					);
	}
	.mainVisual__picWrap .mvPic {
		max-width: 1366px;
		margin-left: auto;
		margin-right: auto;
	}

@media screen and (max-width: 1366px) {
	.mainVisual__txtWrap {
		background-size: .8784% auto;
	}
	.mainVisual__picWrap {
		background: linear-gradient(to right, rgba(233, 236, 238, .16) 0%, rgba(233, 236, 238, 0) 100%);
	}
}
@media screen and (max-width: 900px) {
	.mainVisual__picWrap {
		padding-top: 7px; /* 微調整 */
	}
}
@media screen and (max-width: 600px) {
	.mainVisual__txtWrap {
		padding: max(5px, (11 / 360 * 100vw)) 0;
	}
	.mainVisual__txtWrap .mvTtl {
		width: calc(270 / 360 * 100%);
	}
	.mainVisual__txtWrap .mvTtl img {
		translate: 3.2% 0;
	}
	.mainVisual__picWrap {
		padding-top: 4px; /* 微調整 */
	}
}

/* ==========
	ANIME
========== */
@media screen {
	[data-js_show_target-passed="mainVisual"] .mainVisual__txtWrap {
		animation: 1000ms ease 400ms both ANIME-mainVisual__txtWrap;
	}
	[data-js_show_target-passed="mainVisual"] .mainVisual__picWrap .mvPic {
		animation: 1000ms ease 400ms both ANIME-mvPic;
	}
}
@keyframes ANIME-mainVisual__txtWrap {
	0% {	opacity: 0;	filter: blur(8px); translate: 0 -100%;}
	100% {	opacity: 1;	filter: blur(0px); translate: 0 0%;}
}
@keyframes ANIME-mvPic {
	0% {	opacity: 0; scale: 1.07;}
	100% {	opacity: 1;	scale: 1;}
}





/* ----------------------------------------------------------------------------------
	.categorySetBox_jitan ◆時短ライフ
---------------------------------------------------------------------------------- */

/* sec01
---------------------------------------------------- */
	.categorySetBox_jitan .sec01 {
		margin-top: 15px;
	}
	.categorySetBox_jitan .sec01 .pic {
		overflow: hidden;
	}
	.categorySetBox_jitan .sec01 .pic img {
		display: block;
	}
@media screen and (max-width: 900px) {
	.categorySetBox_jitan .sec01 .pic img {
		width: 112%;
		margin-left: -6%;
	}
}
@media screen and (max-width: 600px) {
	.categorySetBox_jitan .sec01 {
		margin-top: 5px;
	}
	.categorySetBox_jitan .sec01 .pic img {
		width: 100%;
		margin-left: 0%;
	}
}

/* sec02
---------------------------------------------------- */
	.categorySetBox_jitan .sec02 {
		padding-bottom: 30px;
	}
	.categorySetBox_jitan .sec02 .pic_01 .imgcapkeep {
		bottom: calc(-1.25em + -15px);
		z-index: 5;
		color: inherit;
		font-weight: bold;
	}
	.categorySetBox_jitan .sec02 .pic_02_PCTB {
		position: relative;
		z-index: 1;
		margin-top: calc(min((22 / 1200 * 100vw), 22px) * -1);
	}
	.categorySetBox_jitan .sec02 .pic_02_SP {
		display: none;
	}
	.categorySetBox_jitan .sec02 .pic_02_caption {
		margin-top: .6em;
		width: 83%;
		margin-left: auto;
		margin-right: auto;
	}
@media screen and (max-width: 600px) {
	.categorySetBox_jitan .sec02 .pic_02_PCTB {
		display: none;
	}
	.categorySetBox_jitan .sec02 .pic_02_SP {
		display: block;
		position: relative;
		z-index: 1;
		margin-top: calc(20 / 360 * -100vw);
	}
	.categorySetBox_jitan .sec02 .pic_02_SP .approach_txt {
		position: relative;
		z-index: 1;
		pointer-events: none;
	}
	.categorySetBox_jitan .sec02 .pic_02_SP .approach_pic {
		margin-top: calc(40 / 360 * -100vw);
		overflow: hidden;
	}
	.categorySetBox_jitan .sec02 .pic_02_caption {
		width: 96%;
	}
}

/* sec03
---------------------------------------------------- */
	.categorySetBox_jitan .sec03 .pic {
		position: relative;
		z-index: 1;
		margin-top: calc(min((8 / 1200 * 100vw), 8px) * -1);
	}
@media screen and (max-width: 900px) {
	.categorySetBox_jitan .sec03 .pic {
		margin-top: 0;
	}
}

/* sec04
---------------------------------------------------- */
	.categorySetBox_jitan .sec04 {}

/* sec05
---------------------------------------------------- */
	.categorySetBox_jitan .sec05 {}





/* ----------------------------------------------------------------------------------
	.categorySetBox_holiday ◆ホリデー
---------------------------------------------------------------------------------- */

/* sec01
---------------------------------------------------- */
	.categorySetBox_holiday .sec01 {
		margin-top: 10px;
	}

/* sec02
---------------------------------------------------- */
	.categorySetBox_holiday .sec02 {}

/* picBox
--------------------------------- */
	.categorySetBox_holiday .sec02 .picBox {
		display: grid;
		grid-template-columns: 1fr;
	}
	.categorySetBox_holiday .sec02 .pic_base {}
	.categorySetBox_holiday .sec02 .pic_description_01 {
		order: -1;
		position: relative;
		z-index: 1;
		margin-bottom: calc(min((7 / 1366 * 100vw), 7px) * -1);
	}
	.categorySetBox_holiday .sec02 .pic_description_02 {
		position: relative;
		z-index: 1;
		margin-top: calc(min((141 / 1366 * 100vw), 141px) * -1);
	}
@media screen and (max-width: 600px) {
	.categorySetBox_holiday .sec02 .pic_description_01 {
		margin-bottom: calc(5 / 360 * -100vw);
	}
	.categorySetBox_holiday .sec02 .pic_description_02 {
		margin-top: calc(47 / 360 * -100vw);
	}
}
/* mainFacilities
--------------------------------- */
	.mainFacilities {
		margin-top: clamp(30px, (40 / 1200 * 100vw), 40px);
	}
@media screen and (max-width: 600px) {
	.mainFacilities {
		margin-top: calc(17 / 360 * 100vw);
	}
}


/* sec03
---------------------------------------------------- */
	.categorySetBox_holiday .sec03 {
		background: #fff;
	}
	.categorySetBox_holiday .sec03 .pic_01 {}
	.categorySetBox_holiday .sec03 .pic_02 {
		width: calc(1000 / 1200 * 100%);
		margin-top: min((30 / 1366 * 100vw), 30px);
		margin-left: auto;
		margin-right: auto;
	}
@media screen and (max-width: 900px) {
	.categorySetBox_holiday .sec03 .pic_02 {
		width: 90%;
		max-width: 700px;
	}
}

/* discoverArticleFooter
---------------------------------------------------- */
	.categorySetBox_holiday .discoverArticleFooter {
		background: #fff;
		padding-top: 60px;
	}





/* ----------------------------------------------------------------------------------
	.categorySetBox_outdoor ◆アウトドア
---------------------------------------------------------------------------------- */

/* sec01
---------------------------------------------------- */
	.categorySetBox_outdoor .sec01 {
		margin-top: 15px;
	}
/* pic_01
--------------------------------- */
	.categorySetBox_outdoor .sec01 .pic_01 {
		position: relative;
		z-index: 0;
	}
	.categorySetBox_outdoor .sec01 .pic_01 .circle {
		position: absolute;
		top: calc(min((48 / 1366 * 100vw), 48px) * -1);
		left: min((103 / 1366 * 100vw), 103px);
		z-index: 1;
		width: calc(236 / 1200 * 100%);
	}
@media screen and (max-width: 900px) {
	.categorySetBox_outdoor .sec01 .pic_01 .circle {
		width: 23.5%;
		left: 4%;
	}
}
@media screen and (max-width: 600px) {
	.categorySetBox_outdoor .sec01 {
		margin-top: 5px;
	}
	.categorySetBox_outdoor .sec01 .pic_01 .circle {
		width: 41%;
		max-width: 210px;
		top: calc(33 / 360 * -100vw);
		left: 1.5%;
	}
}
/* pic_02
--------------------------------- */
	.categorySetBox_outdoor .sec01 .pic_02 {
		display: grid;
		grid-template-columns: 1fr;
		overflow: hidden;
		margin-top: min((40 / 1366 * 100vw), 40px);
	}
	.categorySetBox_outdoor .sec01 .pic_base {}
	.categorySetBox_outdoor .sec01 .pic_description_01 {
		order: -1;
		position: relative;
		z-index: 1;
		margin-bottom: calc(min((293 / 1366 * 100vw), 293px) * -1);
	}
	.categorySetBox_outdoor .sec01 .pic_description_02 {
		position: relative;
		z-index: 1;
		margin-top: calc(min((301 / 1366 * 100vw), 301px) * -1);
	}
@media screen and (max-width: 900px) {
	.categorySetBox_outdoor .sec01 .pic_base,
	.categorySetBox_outdoor .sec01 .pic_description_01,
	.categorySetBox_outdoor .sec01 .pic_description_02 {
		width: 106%;
		margin-left: -6%;
	}
	.categorySetBox_outdoor .sec01 .pic_description_01 {
		margin-bottom: calc(145 / 600 * -100vw);
	}
	.categorySetBox_outdoor .sec01 .pic_description_02 {
		margin-top: calc(149 / 600 * -100vw);
	}
}
@media screen and (max-width: 600px) {
	.categorySetBox_outdoor .sec01 .pic_base,
	.categorySetBox_outdoor .sec01 .pic_description_01,
	.categorySetBox_outdoor .sec01 .pic_description_02 {
		width: 100%;
		margin-left: 0;
	}
	.categorySetBox_outdoor .sec01 .pic_description_01 {
		margin-bottom: calc(116 / 360 * -100vw);
	}
	.categorySetBox_outdoor .sec01 .pic_description_02 {
		margin-top: calc(120 / 360 * -100vw);
	}
}


/* sec02
---------------------------------------------------- */
	.categorySetBox_outdoor .sec02 {
		margin-top: clamp(30px, (50 / 1366 * 100vw), 50px);
	}
	.categorySetBox_outdoor .sec02 .picBox {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 10px 0;
		width: 86.75%;
		max-width: 1040px;
		overflow: hidden;
		padding: 15px 0 40px;
		margin-left: auto;
		margin-right: auto;
	}
@media screen and (max-width: 900px) {
	.categorySetBox_outdoor .sec02 .picBox {
		width: 96%;
	}
}
@media screen and (max-width: 600px) {
	.categorySetBox_outdoor .sec02 .picBox {
		grid-template-columns: 1fr;
		gap: 2px 0;
		width: 90%;
	}
}

/* sec03
---------------------------------------------------- */
	.categorySetBox_outdoor .sec03 {}









