/*
 Theme Name:   GeneratePress Child
 Description:  GeneratePress の子テーマ
 Template:     generatepress
 Version:      1.0.0
 Text Domain:  generatepress-child
*/



/***** GeneratePress リセット *****/
.grid-container{
	max-width:none;
}
.site-content .content-area{
	width:100%;
}
.separate-containers .site-main {
    margin: 0px;
}


.separate-containers .inside-article,
.one-container .site-content{
	padding:0;
}


/*************フォント****************/
:root{
    --fs-h1: 40px;
    --fs-h2: 34px;
    --fs-h3: 30px;
    --fs-h4: 25px;	
    --fs-h5: 20px;		
    --fs-body: 16px;
	--fs-text: 15px;
    --fs-small: 14px;
    
    --color-brown:#B45309;
    
	--wp--preset--font-size--small: 14px;
    --wp--preset--font-size--medium: 25px;
    --wp--preset--font-size--large: 30px;
    --wp--preset--font-size--x-large: 40px;
}
@media (max-width:768px){
    :root{
		--fs-h1: 26px;
        --fs-h2: 22px;
        --fs-h3: 20px;
	    --fs-h4: 18px;	
	    --fs-h5: 16px;
        --fs-body: 15px;
		--fs-text: 14px;
        --fs-small: 13px;
    
		--wp--preset--font-size--small: 13px;
	    --wp--preset--font-size--medium: 20px;
	    --wp--preset--font-size--large: 24px;
	    --wp--preset--font-size--x-large: 30px;
    }
}



/* ----------------------------------------
	Layout
------------------------------------------ */
.plan__archive-wrapper{
    width: min(1300px, calc(100% - 50px));
    padding-bottom: 100px;
	margin: 0 auto;
}

.plan__detail-wrapper{
    width: min(1200px, calc(100% - 50px));
    padding-bottom: 100px;
	margin: 0 auto;
}

.plan__detail-wrapper img{
	display:block;
}

.l-width-xs{
	max-width:700px;
	margin-inline: auto;
}
.l-width-sm{
	max-width:850px;
	margin-inline: auto;
}




/* ----------------------------------------
	Parts
------------------------------------------ */
.u-brown{
	color: var(--color-brown);
}

.vertical-title {
	writing-mode: vertical-rl;
	font-size: var(--fs-h2);
	line-height: 1.6;
	letter-spacing: 0.1em;
	text-orientation: upright;
}

.plan-section-title{
	font-size: var(--fs-h3);
	text-align: center;
	margin-bottom: 35px;
}

.plan__detail-wrapper .plan-reserve-btn {
	display: inline-flex;
	justify-content: center;
	background: var(--accent);
	color: white;
	text-decoration: none;
	width: 300px;
    padding: 15px 0;
    font-size: var(--fs-h5);
}
.plan__detail-wrapper .plan-reserve-btn:hover {
	background-color: color-mix(in srgb,var(--accent),#000 12%);
    color: #ffffff;
}

@media (max-width: 768px) {
	.vertical-title {
		margin: 0 auto;
	}
}


/* ----------------------------------------
	Archive
------------------------------------------ */

/*************導入****************/
.plan__archive-wrapper .plan-filter {
    border-bottom: 1px solid #bbb;
}

.plan__archive-wrapper .l-mv.plan-filter {
    padding-bottom: clamp(50px, 5vw, 100px);
}

.plan__archive-wrapper .plan-filter-label{
	color:var(--color-brown);
}

.plan__archive-wrapper .plan-filter-label,
.plan__archive-wrapper .plan-label{
	letter-spacing: .15rem;
	padding-right: 10px;
	margin:0;
}

.plan__archive-wrapper .plan-title {
    font-size: var(--fs-h1);
    line-height: 1.5;
    color: #0F172A;
    margin-bottom: 50px;
}

.plan__archive-wrapper .plan-text {
    max-width: 700px;
    font-size: var(--fs-body);
	letter-spacing: .15rem;
    line-height: 2.5;
    color: #0F172A;
    margin-bottom: 80px;
}

@media (max-width: 768px) {
	.plan__archive-wrapper .plan-filter{
		padding-bottom: 30px;
	}
    .plan__archive-wrapper .planbox {
        width:100%;
    }
    .plan__archive-wrapper .plan-title {
        line-height: 1.8;
        margin-bottom: 30px;
    }
    .plan__archive-wrapper .plan-text {
        line-height: 1.8;
        margin-bottom: 50px;
    }
}


/*************フィルターボタン****************/
.plan__archive-wrapper .filter-group{
    display:flex;
    align-items:center;
    gap:30px;
	padding-bottom: 20px;
}
.plan__archive-wrapper .filter-btn{
    display:flex;
    flex-wrap:nowrap;
    gap:12px;
	align-items: center;
}
.plan__archive-wrapper .filter-btn button{
    height:40px;
    border:none;
    border-radius:4px;
    background:#e8e8e8;
    color:#0F172A;
    font-size:var(--fs-small);
    cursor:pointer;
    transition:.3s;
	padding: 0 20px;
}
.plan__archive-wrapper .filter-btn button:hover{
    opacity:.8;
}
.plan__archive-wrapper .filter-btn button.is-active{
    background:#7d818c;
    color:#fff;
}
@media (max-width: 768px) {
    .plan__archive-wrapper .filter-group{
        display:block;
    }
    .plan__archive-wrapper .filter-btn{
        display:flex;
        flex-wrap:wrap;
        gap:12px;
    }
}

/*************プラン一覧****************/
.plan__archive-wrapper .plan-list{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:80px 40px;
    margin-top:80px;
}
.plan__archive-wrapper .plan-item.is-hide{
    display:none;
}
.plan__archive-wrapper .plan-item img,
.plan-related-wapper .plan-card img{
    display:block;
    width:100%;
    height: auto;
    aspect-ratio: 6 / 4;
    object-fit: cover;
	transition: opacity 0.3s ease;
}
.plan__archive-wrapper a:hover .plan-item img {
	opacity: 0.7;		
}	
.plan__archive-wrapper .plan-item a{
    text-decoration:none;
    color:inherit;
}
.plan__archive-wrapper .plan-meta{
    margin-top:20px;
    font-size:var(--fs-small);
    color:var(--color-brown);
    letter-spacing:.15em;
}
.plan__archive-wrapper .plan-item h3{
    margin-top:12px;
    font-size:var(--fs-h4);
    font-weight:400;
    line-height:1.7;
    color:#0F172A;
	margin-bottom: 20px;
}
.plan__archive-wrapper .plan-excerpt{
    margin-top:15px;
    font-size:var(--fs-small);
    line-height:2;
    color:#0F172A;
}
.plan__archive-wrapper .plan-price{
    margin-top:20px;
    font-size:var(--fs-h5);
    color:#0F172A;
}
.plan__archive-wrapper .price span{
    font-size:var(--fs-small);
}
@media (max-width:768px){
    .plan__archive-wrapper .plan-plan-list{
        grid-template-columns:1fr;
        gap:60px;
		margin-top: 50px;
    }
    .plan__archive-wrapper .plan-item h3{
		margin-bottom: 0;
    }
	.plan__archive-wrapper .plan-excerpt{
		margin-top: 10px;
	}
    .plan__archive-wrapper .filter-buttons button{
        width:100px;
        height:60px;
    }
    .plan__archive-wrapper .plan-label{
        margin-bottom:20px;
    }
}



/*************公式サイトがいちばんお得****************/
.plan-official-otoku{
    position:relative;
    padding:120px 0;
    background-image:url("plans_img/footerimg_pc.jpg");
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;
    overflow:hidden;
}
.plan-official-otoku::before{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.45);
    z-index:1;
}
.plan-official-otoku_inner{
    position:relative;
    z-index:2;
    max-width:1000px;
    margin:0 auto;
    padding:0 40px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:120px;
}
.plan-official-otoku_title h2{
    margin:0;
    font-size:var(--fs-h3);
    line-height:1.8;
    color:#fff;
	letter-spacing: .2rem;
}
.plan-official-otoku_text{
    max-width:500px;
}
.plan-official-otoku_text p{
    margin:0 0 30px;
    color:#fff;
    font-size:var(--fs-body);
    line-height:2.2;
}
.plan-official-otoku_text a{
    color:#fff;
    text-decoration:none;
    border-bottom:1px solid rgba(255,255,255,.5);
    padding-bottom:4px;
}
@media (max-width:768px){
    .plan-official-otoku{
        padding:80px 0;
		background-image:url("plans_img/footerimg_sp.jpg");
    }
    .plan-official-otoku_inner{
        flex-direction:column;
        align-items:flex-start;
        gap:30px;
        padding:0 30px;
    }
    .plan-official-otoku_text{
        max-width:none;
    }
}




/* ----------------------------------------
	プラン詳細ページ
------------------------------------------ */

/*************メインビジュアル****************/
.plan-mv{
    position: relative;
    width: 100%;
    aspect-ratio: 1920 / 900;
    overflow: hidden;
}
.plan-mv img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.plan-mv_filter{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.55);
}
.plan-mv .l-container{
    position:absolute;
    left:50%;
    top:50%;
    transform: translate(-50%, -50%);
    z-index:2;
    color:#fff;
}
.plan-mv_title .season{
    font-size:var(--fs-body);
    letter-spacing:.2em;
    margin-bottom:40px;
}
.plan-mv_title h1{
    font-size: var(--fs-h1);
    line-height: 1.5;
	letter-spacing: .2rem;
}
@media(max-width:768px){
	.plan-mv{
		aspect-ratio: 1 / 1;
	}
    .plan-mv_title{
        left:40px;
        top:55%;
    }
    .plan-mv_title .season{
        margin-bottom:20px;
    }
    .plan-mv_title h1{
        line-height:1.7;
    }
    .plan-mv__btn{
        display:none;
	}
}


/************パンクズ***************/
.breadcrumb{
    font-size:var(--fs-small);
    color:#0F172A;
    display:flex;
    flex-wrap:wrap;
    gap:5px;
	padding-top: 20px;
}
.breadcrumb a{
    color:#777;
    text-decoration:none;
    transition:.3s;
}
.breadcrumb a:hover{
    opacity:.7;
}

/*************プラン***************/
.plan-info{
    padding-bottom: 80px;
    border-bottom: 1px solid #bbb;
}
.plan-info_box{
    margin:100px auto 0;
}
.plan-title{
    font-size:var(--fs-h3);
    line-height:1.8;
}
.plan-price{
    color:var(--color-brown);
    font-size:var(--fs-h4);
    line-height:1;
}
.plan-price span{
    font-size:var(--fs-small);
}
.plan-tag{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-top:50px;
}
.plan-tag span{
    border:1px solid #999;
    padding:5px 15px 3px;
    font-size:var(--fs-small);
}

@media(max-width:768px){
    .plan-info{
        padding:0 0 50px;
    }
    .plan-info_box{
        margin-top:40px;
    }
    .plan-title{
        line-height:1.8;
    }
    .plan-price{
        margin-top:20px;
    }
    .plan-price span{
        display:block;
        margin-top:10px;
    }
    .plan-tag{
        margin-top:30px;
    }
    .plan-tag span{
        padding: 0.5em 1em;
    }
}	



/*************縦書きとリスト***************/
.plan-points {
	display: flex;
	align-items: flex-start;
	gap: 80px;
}

.plan-point-list {
	margin-top: 20px;
}

.plan-point-list li {
	font-size: var(--fs-h5);
    letter-spacing: .2rem;
	line-height: 2;
	margin:1em 0;
}
@media (max-width: 768px) {
	.plan-points {
		display: block;
	}
}



/*************ご夕食・朝食***************/
.plan-meal-section {
	padding: 80px 20px;
}
.plan-meal-title {
	text-align: center;
	font-size: var(--fs-h1);
	margin: 0px 0 30px;
}

@media (max-width: 768px) {
	.plan-meal-section {
		padding: 40px 0;
	}
	.plan-meal-title {
		margin: 0px 0 15px;
	}
}


/*************プラン概要***************/
.plan-description .wp-block-heading {
	font-size: var(--fs-h3);
	letter-spacing: .2rem;
	line-height: 1.6;
	margin-bottom: 40px;
}


/*************料理長の声***************/
.plan-chef-message {
	display: flex;
	flex-wrap:wrap;
	align-items: center;
	max-width: 800px;
	width:100%;
	margin: 0 auto;
}
.plan-chef-title {
	flex: 0 0 45%;
	display: flex;
    justify-content: center;
}
.plan-chef-title h2 {
	font-size: var(--fs-h4);
	line-height: 1.8;
}
.plan-chef-content {
	flex: 1;
	border-left: 1px solid #ccc;
    padding-left: 10%;
}
.plan-chef-icon {
	width: 110px;
	margin: 0 auto;
}
.plan-chef-icon img {
	width: 100%;
}
.plan-chef-content p {
	font-size: var(--fs-text);
	line-height: 2;
	margin:0;
	margin-top:1em;
}

@media (max-width: 768px) {
	.plan-chef-message {
		display: contents;
		margin-bottom: 80px;
	}
	.plan-chef-title {
		border-right: none;
		padding: 0;
		margin-bottom: 25px;
	}
	.plan-chef-title h2 {
		text-align: center;
		padding-left: 0;
	}
	.plan-chef-content {
		max-width: 100%;
		border:0;
		padding:0;
	}
	.plan-chef-icon {
		margin: 0 auto;
		width: 50%;
	}
}


/*************朝食***************/
.plan-breakfast-content {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	gap: 10%;
	margin-top: 70px;
}
.plan-breakfast-image {
	flex:0 0 50%;
}
.plan-plan-breakfast-image img {
	width: 100%;
	display: block;
}
.plan-breakfast-text {
	flex:1;
	margin-top: 70px;
}
.plan-breakfast-text .wp-block-heading {
	font-size: var(--fs-h3);
	letter-spacing: .1rem;
	line-height: 1.8;
	margin-bottom: 40px;
}
.plan-breakfast-text p {
	font-size: var(--fs-body);
	line-height: 2.4;
	margin-bottom: 25px;
}

@media (max-width: 768px) {
	.plan-breakfast-content {
		display: block;
	}
	.plan-plan-breakfast-image {
		width: 100%;
		margin-top: 0;
		margin-bottom: 0;
	}
	.breakfast-text {
		width: 100%;
		margin-top: 0;
	}
	.plan-breakfast-text h3 {
		margin-bottom: 15px;
	}
	.plan-breakfast-text p {
		line-height: 2;
		margin-bottom: 15px;
	}
}


/************ギャラリー***************/
.plan-gallery-track {
	display: flex;
	gap: 20px;
	justify-content: center;
	width: 800px;
    margin: 0 auto;
}
@media (max-width: 768px) {
	.plan-gallery-track {
		width: max-content;
		justify-content: flex-start;
		gap: 10px;
	}
	.plan-gallery-track img {
		width: 150px;
		flex-shrink: 0;
		scroll-snap-align: start;
	}
	.plan-gallery-slider::-webkit-scrollbar {
		display: none;
	}
}


.plan-gallery_2 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
	width: 800px;
	margin: 0 auto;
	padding: 30px 0 100px;
}
.plan-gallery-item {
	position: relative;
}
.plan-gallery-item img {
	width: 100%;
	display: block;
}
/*********レスポンシブ*********/
@media (max-width: 768px) {
	.plan-section {
		padding: 40px 0;
	}
	.plan-top {
		display: block;
	}
	.benefits p {
		line-height: 1.8;
		margin: 10px 0;
	}
	.gallery_2 {
		grid-template-columns: repeat(2, 1fr);
		gap: 8px;
		margin: 40px 0 0;
		width: 100%;
		padding: 0 0 30px;
	}
}
	
/************基本情報***************/
.plan-info-box .wp-block-heading {
	font-size: var(--fs-h4);
	margin-bottom: 20px;
	padding-bottom: 15px;
	border-bottom: 1px solid #ccc;
}
.plan-info-box ul {
	list-style: none;
	margin-bottom: 30px;
	padding: 0;
	margin: 0;
}
.plan-info-box li {
	font-size: var(--fs-body);
	line-height: 2.3;
}
.plan-notice{
	color: var(--color-brown);
}
.plan-notice .wp-block-heading{
	font-size: var(--fs-h5);
	border:0;
	padding:0;
	margin-bottom: 5px;
}
.plan-notice p {
	line-height: 2;
	font-size: var(--fs-small);
    margin: 5px 0;
}

@media (max-width: 768px) {
	.plan-info-box ul{
		margin-bottom: 20px;	
	}
	.plan-info-box li {
		line-height: 2;
	}
	.plan-notice p {
		line-height: 1.7;
	}
}


/************お客様の声***************/
.plan-voice {
	max-width: 900px;
    margin: 0 auto;
}
.voice-card img,
.plan-voice .gb-carousel-item img {
	display: block;
	width: 40%;
	margin-inline:auto;
}
.plan-voice .gb-carousel-item p{
	text-align: left;
	margin: 1em 0 0;
}

@media (max-width: 768px) {

}


/************関連プラン***************/
.plan-related-wapper{
	border-top: 1px solid #bbb;
	padding:100px 0;
}
.plan-related-wapper a{
	text-decoration:none;
}

.plan-related-wapper .plan-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
}
.plan-related-wapper .plan-card img {
	width: 100%;
	display: block;
	margin-bottom: 15px;
	transition: opacity 0.3s ease;
}
.plan-related-wapper .plan-card img:hover {
	opacity: 0.7;		
}	
.plan-related-wapper .plan-name {
	font-size: var(--fs-body);
	line-height: 1.8;
	color: initial;
	margin: 0 0 1em;
}
.plan-related-wapper .price {
	color: #c6813d;
	font-size: var(--fs-body);
	margin:0;
}
.plan-related-wapper .button-wrap {
	text-align: center;
	margin-top: 80px;
}
.plan-related-wapper .back-btn {
	display: inline-block;
	background: #0e2940;
	color: white;
	text-decoration: none;
	width: 300px;
	padding: 15px 0;
	font-size: var(--fs-body);
	transition: opacity 0.3s ease;
}
.plan-related-wapper .back-btn:hover {
	opacity: 0.7;		
}	

@media (max-width: 768px) {
	.plan-related-wapper .plan-grid {
		grid-template-columns: 1fr;
		gap: 35px;
	}
	
	.plan-related-wapper .button-wrap{
		margin-top: 40px;	
	}
	
	.plan-related-wapper .back-btn {
		width: 100%;
	}
}



@media (max-width:768px){
	.br-sp{
		display: none;
	}	
}
.br_sp {
    display: none;
}

@media (max-width: 600px) {
    .br_sp {
        display: block;
    }
}