@charset "utf-8";
/* ===================================================
	Meal CSS
====================================================== */

/* ---------------------------------------------------
	共通
------------------------------------------------------ */
section h3.tit {
	display: -webkit-flex; display: -ms-flex; display: flex;
	-ms-align-items: center; align-items: center; justify-content: center;
	width: 100%; height: 500px; background: no-repeat center center;
	-webkit-background-size: cover; background-size: cover; color: #fff;
}
section h3.tit .eng { color: #fff;}

section .cnav {
	display: -webkit-flex; display: -ms-flex; display: flex;
	justify-content: center; margin: 50px 0 10px;
}
section .cnav li { margin: 0 30px;}
section .cnav li a { padding: 0 0 25px; display: block; position: relative; font-size: 18px;}
section .cnav li a::after {
	content: ''; width: 26px; height: 26px; margin: 0 0 0 -13px;
	position: absolute; left: 50%; bottom: 0;
	background: url(../img/icon_arrow_b.svg) no-repeat center center;
	-webkit-background-size: 100% auto; background-size: 100% auto;
	-webkit-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	transform: rotate(90deg);
	-webkit-transition: transform 0.5s;
	-o-transition: transform 0.5s;
	transition: transform 0.5s;
}
section .cnav li a:hover { text-decoration: none;}
section .cnav li a:hover::after {
	-webkit-transform: rotate(90deg) translateX(3px);
	-ms-transform: rotate(90deg) translateX(3px);
	transform: rotate(90deg) translateX(3px);
}

section > div {/* padding: 60px 0 80px; */}

section h4 {margin: 35px 0;}
section .inner {max-width: 1000px;margin: 0 auto;}

section [class*='layout'] {
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
	-ms-align-items: center;
	align-items: center;
	justify-content: space-evenly;
	width: 1000px;
}
section [class*='layout'] .image {width: 45%;}
section [class*='layout'] .detail, .detail_bottom {width: 45%;/* padding: 0 calc( (31.4% - 290px) / 2); */}

section .layout1 {
	-webkit-flex-direction: row-reverse;
	-ms-flex-direction: row-reverse;
	flex-direction: row-reverse;
	/* margin-bottom: 80px; */
}

section .caption {margin: 0 0 15px !important;font-size: 26px;}

@media screen and (max-width: 600px) {
	section h3.tit { height: 275px;}
	section h3.tit span { text-indent: 5px;}
	section h3.tit .eng { text-indent: 3px;}

	section .cnav { margin-top: 25px;}
	section .cnav li { margin: 0 10px;}
	section .cnav li a { font-size: 14px;}

	section > div {padding: 0;}

	section h4 { width: 92%; margin: 0 auto 20px;}
	section .inner { width: 92% !important;}

	section [class*='layout'] { display: block;}
	section [class*='layout'] .image,
	section [class*='layout'] .detail { width: 100%;}
	section [class*='layout'] .detail { padding: 0; margin: 15px 0 0;}

	section .caption { margin-bottom: 10px; font-size: 19px;}
}



/* ---------------------------------------------------
	sec1
------------------------------------------------------ */
#sec1 h3.tit {background: url(../../plan/img/kinoko_tit_pc.jpg)  right top no-repeat;max-height: 300px;background-size: 100%;}

/* sec1a */
#sec1a, #sec2, #sec3, #sec4 {padding-bottom: 100px;}
#sec1a .detail p:not(:last-child) {margin: 0px 0 10px;}
#sec1a .detail li span { font-weight: bold;}
#sec1a .detail li span::before { content: '*';}
#sec1a .detail li span::after { content: '･･･'; font-weight: normal;}

/* sec1b */
#sec1b .inner {
	display: -webkit-flex; display: -ms-flex; display: flex;
	justify-content: space-between; width: 1400px;
}
#sec1b .inner div { width: 48.6%;}
#sec1b .inner dl { padding: 0 6.6%; margin: 35px 0 0;}
#sec1b .inner dt { text-align: center;}
#sec1b .inner dd .btn { display: block; width: 280px; padding: 10px; margin: 20px auto 0;}

/* sec1c */
#sec1c .inner { width: 1100px; overflow: hidden;}
#sec1c .slick { height: 300px; overflow: hidden;}
#sec1c .slick.slick-initialized { height: auto;}
#sec1c .slick.slick-slider { width: 1140px; max-width: calc(100% + 40px); margin: 0 -20px 75px;}
#sec1c .slick-slide > div { margin: 0 20px;}
#sec1c .slick dl { margin: 10px 0 0; line-height: 1.6;}
#sec1c .slick dt { font-size: 18px;}

#sec1c .bnr_col { text-align: center;}

@media screen and (max-width: 600px) {
	#sec1 h3.tit {background-image: url(../../plan/img/kinoko_tit_sp.jpg);max-height: 250px;}

	/* sec1a */
	#sec1a { padding-bottom: 50px;}
	#sec1a .detail { margin-top: 40px;}

	/* sec1b */
	#sec1b .inner { display: block;}
	#sec1b .inner div { width: 100%;}
	#sec1b .inner div:not(:last-child) { margin: 0 0 30px;}
	#sec1b .inner dl { padding: 0; margin-top: 15px;}
	#sec1b .inner dt { text-align: left;}
	#sec1b .inner dd .btn { width: 100%; margin-top: 15px;}

	/* sec1c */
	#sec1c .slick.slick-dotted.slick-slider { max-width: calc(100% + 20px); margin: 0 -10px 30px;}
	#sec1c .slick-slide > div { margin: 0 10px;}
	#sec1c .slick dt { font-size: 16px;}
	#sec1c .slick dd { font-size: 14px;}
}



/* ---------------------------------------------------
	sec2
------------------------------------------------------ */
#sec2 h3.tit { background-image: url(../../meal/img/sec2_tit_pc.jpg);}

#sec2 .detail .attention { margin: 15px 0 0; color: #cb503c;}
#sec2 .detail .attention li { margin: 0 0 3px;}
#sec2 .detail .attention li::before { content: '※';}
#sec2 .btn, #sec1 .btn {display: block;padding: 10px;margin: 20px 0;}

/* sec2a */
#sec2a .image {
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: 42.7% 57.3%;
	grid-template-columns: 42.7% 57.3%;
	-ms-grid-rows: auto auto;
	grid-template-rows: auto auto;
}
#sec2a .image p:last-child {
	-ms-grid-row: 1; -ms-grid-row-span: 2; grid-row: 1 / 3;
	-ms-grid-column: 2; grid-column: 2;
}

/* IE11 */
#sec2a .image p:nth-child(2) { -ms-grid-row: 2; -ms-grid-column: 1;}


/* ---------------------------------------------------
	contact_col
------------------------------------------------------ */
.contact_col { padding: 50px 0 60px; text-align: center;}
.contact_col .caption { font-size: 18px;}
.contact_col .tel-link {
	display: inline-block; font-size: 30px; padding: 0 0 0 30px;
	background: url(../img/icon_tel_b.svg) no-repeat left center;
	-webkit-background-size: 35px auto; background-size: 35px auto;
}

@media screen and (max-width: 600px) {
	.contact_col { padding: 30px 4% 50px; font-size: 14px;}
	.contact_col .caption { font-size: 16px;}
	.contact_col .tel-link { font-size: 24px;}
}

#plan{
	/* background: url(../../plan/img/bg_family.jpg?24); */
}

#sec1 {
	font-weight: 600;
}

.facility {
	display: flex;
	/* justify-content: space-evenly; */
	padding: 0 20px;
	width: 100%;
	max-width: 1400px;
	align-items: center;
}

.img.facility {
	display: block;
	width: 47%;
	max-width: 400px;
}

.img.facility img {
	max-width: 100%;
	margin-bottom: 20px;
	border-radius: 10px;
	box-shadow: 1px 1px 15px 0px #858585;
}

.text.facility {
	width: 58%;
	line-height: 2.5rem;
	display: block;
}

.text.facility h5 {
	font-size: 22px;
	font-weight: 500;
	color: #dd8f25;
	padding-bottom: 12px;
}

.flex.facility {
	padding: 30px 0;
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	margin: auto;
}

.btn.facility {
	max-width: 450px;
	width: 100%;
	line-height: normal;
}

#sec3 .btn.facility {
	margin: 20px auto;
}

.slide-navigation figure {
	width: 98% !important;
	height: 20p;
}

.caption.sub {
	font-size: 17px;
	font-weight: 500;
}

.caption.sub span, .underline span {
	background: linear-gradient(transparent 60%, #fffe54 60%);
	border-bottom: none;
}

.underline span {
	font-weight: 500;
}

p span {
	border-bottom: 3px dotted #c6c6c6;
	line-height: 1.8em;
}

.inner.facility {
	display: block;
	padding: 0;
}

#sec5 .inner.facility {
	padding: 20px;
	box-shadow: 2px 2px 5px 5px #75757559;
	border-radius: 10px;
}

.flex.ski {
	display: flex;
	justify-content: space-around;
	text-align: center;
	/* margin: auto; */
	width: 100%;
	max-width: 1100px;
}

.card.ski {
	margin: auto;
	width: 33%;
	max-width: 350px;
	padding: 40px 20px;
	/* background-color: #fff; */
	/* box-shadow: 1px 1px 10px 0px #b0b0b0; */
}

.image.ski {
	width: 100% !important;
	display: block !important;
	max-width: 250px;
	margin: auto;
}

.text.ski {
	padding-top: 15px;
}

.btn.ski {
	max-width: 450px;
	width: 100%;
}

.center_btn {
	width: 100%;
	display: flex;
	justify-content: center;
}

.flex.bottom {
	display: flex;
	justify-content: space-between;
	padding-top: 25px;
}

.text.bottom {
	text-align: left;
	font-size: 14px;
}

.image.bottom {
	width: 40%;
}

.text.bottom {
	width: 55%;
	padding-top: 25px;
	line-height: 1.8rem;
}

.detail_bottom img {
	padding-top: 25px;
}

.detail_bottom p span {
	line-height: 2.5em;
}

.image {
	padding-top: 25px;
}

.caption.bottom {
	border-bottom: none;
	font-size: 20px;
	font-weight: 500;
	color: #ff8989;
}

.small {
    font-size: 13px;
    padding-top: 10px;
}

.flex.bottom_btn {
	width: 100%;
	max-width: 450px;
}

.clm.bottom_btn {
	width: 100%;
	max-width: 450px;
}

.inner.layout.text {
	display: block;
	margin: auto;
	text-align: center;
	line-height: 2.5em;
	font-size: 1.2rem;
	font-weight: 400;
}

.is-pc{
	display: none;
}
  
.is-sp{
	display: block;
}

.inner.card {
	display: flex;
}

.flex_card {
	padding: 10px 10px 50px;
	width: 33%;
}

@media screen and (max-width: 600px) {
	.facility {
		padding: 0;
	}
	.flex.facility {
		display: block;
	}

	.img.facility {
		width: 100%;
		padding: 20px 0 0px 0;
	}

	.img.facility img {
		box-shadow: none;
		border-radius: 0;
	}

	.text.facility {
		width: 100%;
	}

	.text.facility h5 {
		font-size: 18px;
	}

	.flex.ski {
		display: block !important;
	}

	.card.ski {
		width: 100%;
	}

	.flex.bottom {
		display: block;
	}

	.detail_bottom {
		width: 100%;
		line-height: 2.5rem
	}

	.text.bottom {
		width: 100%;
		line-height: 2.5em;
	}

	.inner.layout.text {
		font-size: 16px;
		text-align: left;
	}

	.is-pc{
		display: block;
	}
	  
	.is-sp{
		display: none;
	}
	
	.inner.card {
	    display: block;
    }

	.flex_card {
		width: 100%;
	}

	section .tit {
		font-weight: 500;
		text-align: center;
	}

	.slick-next {
		right: 0 !important;
	}

	.slick-prev {
		left: 0px !important;
		z-index: 1;
	}
}

.text_card p  {
	text-align: center;
	font-size: 0.8rem;
	line-height: 1.6rem;
	letter-spacing: 0.1rem;
}

.text_card h5 {
	text-align: center;
	font-size: 1.1rem;
	font-weight: 600;
	color: #b58500;
	padding-bottom: 3px;
	margin-bottom: 6px;
	border-bottom: #b58500 1px solid;
}


.text_card {
	padding: 10px;
}

.image01 {
	display: inline-block;
    box-shadow: 8px 8px 5px #bbbbbb;
    transform: rotate(-3deg);
}

.image02 {
	display: inline-block;
    box-shadow: 8px 8px 5px #bbbbbb;
    transform: rotate(1deg);
}

.image03 {
	display: inline-block;
    box-shadow: 8px 8px 5px #bbbbbb;
    transform: rotate(5deg);
}

#sec5 .flex-box {
    display: flex;
    flex-wrap: wrap;
    margin: 30px 0 60px;
    flex-direction: row;
    justify-content: space-around;
}

#sec5 .flex-box.voice.reverse {
    display: flex;
    flex-direction: row-reverse;
}

#sec5 .flex-box.small {
    margin: 15px 0;
    width: 50%;
}

/*3カラム*/
#sec5 .flex-box.clm3 .cnt{
    padding: 10px;
    width: calc(90% / 3);
}

/*4カラム*/
#sec5 .flex-box.clm4 .cnt{
    padding: 10px;
    width: calc(90% / 4);
}

@media screen and (max-width: 600px) {
    #sec5 .flex-box .cnt{
        width: 98%;
    }
    #sec5 .flex-box.clm3 .cnt{
        width: 98%;
    }
    /* spの場合flex */
    #sec5 .flex-box .spflex-box{
        width: 98%;
    }
    #sec5 .flex-box .spflex-box .cnt{
        padding: 1%;
        width: calc(98% / 2);
    }
}

#sec5 .flex-box_txt h2 {
    font-size: 23px;
    line-height: 4rem;
    font-weight: 800;
    color: #6ea960;
    margin-bottom: 10px;
    /* text-shadow: 1px 1px 4px #9cfffe; */
}

#sec5 .flex-box_txt h4 {
    font-size: 18px;
    font-weight: 600;
}

#sec5 .flex-box_txt{
    width: 44%;
    padding: 0px 10px;
    /* font-family: "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "Yu Mincho", YuMincho, "游明朝", "ＭＳ Ｐ明朝", "MS PMincho", "Times New Roman", Times, Garamond, Georgia, serif; */
    position: relative;
    letter-spacing: normal;
    line-height: 3rem;
    text-align: left;
}

#sec5 .flex-box_txt.full{
    width: 90%;
}

.vertical-textarea p {
    line-height: 2.3rem !important;
}
#sec5 .flex-box_txt h3{
   font-size: 22px;
   margin-bottom: 20px;
   color: #33231a;
   font-weight: 600;
}

#sec5 .other-box h5 {
	border-bottom: 1px solid #676767;
	line-height: 1.8em;
	text-align: center;
	font-size: 1.2rem;
	font-weight: 600;
	color: #dd8f25;
}

#sec5 .flex-box_txt h3 span {
	background: linear-gradient(transparent 60%, #ffcf65 60%);
}

#sec5 .flex-box_txt p{
   font-size: 17px;
   line-height: 2.0;
   margin-bottom: 7px;
}

#sec5 .flex-box_img{
    width: 46%;
    padding: 0 10px;
    object-fit: contain;
    position:relative;
}

#sec5 .flex-box.voice .flex-box_img {
    width: 25%;
    text-align: center;
}

#sec5 .flex-box.voice .flex-box_img img {
    max-width: 180px;
}

#sec5 .flex-box.voice .flex-box_txt {
    width: 75%;
    padding: 10px;
    background: linear-gradient(45deg, #fdffe329, #ffffff00);
    border-radius: 240px 15px 100px 15px / 15px 200px 15px 185px;
    box-shadow: 2px 2px 7px 0px #a5a5a563;
}

#sec5 .flex-box_img p {
    letter-spacing: normal;
    font-size: 12px;
    /* font-family: "YakuHanJP", dnp-shuei-mincho-pr6n, sans-serif; */
    text-align: center;
    margin-top: 2px;
}

#sec5 .flex-box_img p.left {
    text-align: left;
    font-size: 14px;
    margin: 0px;
}
    
#sec5 .flex-box img{}

.flex-box1_wrap{
    height: 520px;
}

.flex-box1 {
    display: flex;
    flex-wrap: wrap;
    margin-top: 20px;
    flex-direction: column-reverse;
    width: 50%;
    float: left;
}

.flex-box1_txt{
    width: 95%;
    padding: 0px 10px;
    font-family: "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "Yu Mincho", YuMincho, "游明朝", "ＭＳ Ｐ明朝", "MS PMincho", "Times New Roman", Times, Garamond, Georgia, serif;
    position: relative;
}
.flex-box1_txt h3{
   font-size: 25px;
   margin-bottom: 20px;
   color: #185e7d;
}

.flex-box1_txt p{
   font-size:17px;
   line-height:1.5;
   margin-bottom: 20px;
}

.flex-box1_img{
    width: 95%;
    padding: 0 10px;
    object-fit: contain;
    position:relative;
}
   
    
.flex-box1 img1{
}