@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Noto+Serif+JP:wght@400;700&family=M+PLUS+1p:wght@400;500;700&display=swap');

/* margin ---------------------------------------- */
.m-0{margin:0!important;}.m-1{margin:1rem!important;}.m-2{margin:2rem!important;}.m-3{margin:3rem!important;}.m-4{margin:4rem!important;}.m-5{margin:5rem!important;}.m-6{margin:6rem!important;}.m-7{margin:7rem!important;}.m-8{margin:8rem!important;}
.mt-0{margin-top:0!important;}.mt-1{margin-top:1rem!important;}.mt-2{margin-top:2rem!important;}.mt-3{margin-top:3rem!important;}.mt-4{margin-top:4rem!important;}.mt-5{margin-top:5rem!important;}.mt-6{margin-top:6rem!important;}.mt-7{margin-top:7rem!important;}.mt-8{margin-top:8rem!important;}
.mb-0{margin-bottom:0!important;}.mb-1{margin-bottom:1rem!important;}.mb-2{margin-bottom:2rem!important;}.mb-3{margin-bottom:3rem!important;}.mb-4{margin-bottom:4rem!important;}.mb-5{margin-bottom:5rem!important;}.mb-6{margin-bottom:6rem!important;}.mb-7{margin-bottom:7rem!important;}.mb-8{margin-bottom:8rem!important;}
.mr-0{margin-right:0!important;}.mr-1{margin-right:1rem!important;}.mr-2{margin-right:2rem!important;}.mr-3{margin-right:3rem!important;}.mr-4{margin-right:4rem!important;}.mr-5{margin-right:5rem!important;}.mr-6{margin-right:6rem!important;}.mr-7{margin-right:7rem!important;}.mr-8{margin-right:8rem!important;}
.ml-0{margin-left:0!important;}.ml-1{margin-left:1rem!important;}.ml-2{margin-left:2rem!important;}.ml-3{margin-left:3rem!important;}.ml-4{margin-left:4rem!important;}.ml-5{margin-left:5rem!important;}.ml-6{margin-left:6rem!important;}.ml-7{margin-left:7rem!important;}.ml-8{margin-left:8rem!important;}
.mt-s{margin-top:5px!important;}
.mr-s{margin-right:5px!important;}
.ml-s{margin-left:5px!important;}
.mb-s{margin-bottom:5px!important;}

/* padding ---------------------------------------- */
.p-0{padding:0!important;}.p-1{padding:1rem!important;}.p-2{padding:2rem!important;}.p-3{padding:3rem!important;}.p-4{padding:4rem!important;}.p-5{padding:5rem!important;}.p-6{padding:6rem!important;}.p-7{padding:7rem!important;}.p-8{padding:8rem!important;}
.pt-0{padding-top:0!important;}.pt-1{padding-top:1rem!important;}.pt-2{padding-top:2rem!important;}.pt-3{padding-top:3rem!important;}.pt-4{padding-top:4rem!important;}.pt-5{padding-top:5rem!important;}.pt-6{padding-top:6rem!important;}.pt-7{padding-top:7rem!important;}.pt-8{padding-top:8rem!important;}
.pb-0{padding-bottom:0!important;}.pb-1{padding-bottom:1rem!important;}.pb-2{padding-bottom:2rem!important;}.pb-3{padding-bottom:3rem!important;}.pb-4{padding-bottom:4rem!important;}.pb-5{padding-bottom:5rem!important;}.pb-6{padding-bottom:6rem!important;}.pb-7{padding-bottom:7rem!important;}.pb-8{padding-bottom:8rem!important;}
.pr-0{padding-right:0!important;}.pr-1{padding-right:1rem!important;}.pr-2{padding-right:2rem!important;}.pr-3{padding-right:3rem!important;}.pr-4{padding-right:4rem!important;}.pr-5{padding-right:5rem!important;}.pr-6{padding-right:6rem!important;}.pr-7{padding-right:7rem!important;}.pr-8{padding-right:8rem!important;}
.pl-0{padding-left:0!important;}.pl-1{padding-left:1rem!important;}.pl-2{padding-left:2rem!important;}.pl-3{padding-left:3rem!important;}.pl-4{padding-left:4rem!important;}.pl-5{padding-left:5rem!important;}.pl-6{padding-left:6rem!important;}.pl-7{padding-left:7rem!important;}.pl-8{padding-left:8rem!important;}
.p-s{padding:5px!important;}
.pt-s{padding-top:5px!important;}
.pr-s{padding-right:5px!important;}
.pl-s{padding-left:5px!important;}
.pb-s{padding-bottom:5px!important;}

/* -------------------------------------------------- */
/* common */
/* -------------------------------------------------- */
.text-center{text-align:center!important;}
.text-right{text-align:right!important;}
.text-left{text-align:left!important;}
.text-bold{font-weight:700;}
.text-normal{font-weight:normal;}

.v-sp {display: none;}

main {background: #F4F4F4;}

/* -------------------------------------------------- */
/* wrapper */
/* -------------------------------------------------- */
#wrapper {color: #333; font-family: 'M PLUS 1p', sans-serif; font-size:16px; font-weight: 400; line-height: 1.625; letter-spacing: 0.05em;}
#wrapper .serif {font-family: 'Noto Serif JP',"游明朝体","Yu Mincho",YuMincho,"ヒラギノ明朝 Pro","Hiragino Mincho Pro","MS P明朝","MS PMincho",serif;}
#wrapper a:hover{opacity:0.7;}
#wrapper a img:hover{opacity:0.7;}

/* -------------------------------------------------- */
/* common */
/* -------------------------------------------------- */
#pagenav {margin-top: 30px; background-color: #fff;}
#pagenav ul {display: flex; justify-content: center; max-width: 522px; margin: auto;}
#pagenav ul > li {position: relative; width: calc(100% / 3); padding-bottom: 10px; text-align: center;}
#pagenav ul > li::after {content: ""; position: absolute; left: 50%; bottom: 0; width: 5px; height: 5px; border-bottom: 1px solid #333; border-right: 1px solid #333; transform: translateX(-50%) rotate(45deg);}
#pagenav ul > li a {color: #333; font-weight: 500;}

/* fixed */
#pagenav.fixed {position: fixed; top: 0; left: 0; width: 100%; margin: 0; padding: 10px 0; z-index: 10;}

/* -------------------------------------------------- */
/* block-mv */
/* -------------------------------------------------- */
#block-mv {height: 380px; padding: 0 20px; background-size: cover; background-position: center center;}
#block-mv .inner {position: relative; max-width: 1230px; height: 100%; margin: auto;}
#block-mv .inner .logo {position: absolute; left: 0; top: 0; width: 194px; z-index: 1;}
#block-mv .inner .ttl {position: absolute; left: 50%; top: 0; height: 100%; padding: 24px 60px 0; color: #fff; letter-spacing: 0.1em; text-align: center; background-color: rgba(0,0,0,0.55); transform: translateX(-50%);}
#block-mv .inner .ttl .sekai {width: 109px; margin: auto;}
#block-mv .inner .ttl h1 {font-size: 43px; font-weight: 700;}
#block-mv .inner .ttl .en {font-size: 20px; font-weight: 700;}

/* -------------------------------------------------- */
/* block-contents */
/* -------------------------------------------------- */
#block-contents {position: relative; max-width: 820px; margin: -100px auto 0; border-radius: 11px; background-color: #fff;}
#block-contents h2 {color: #B3963D; font-size: 26px; font-weight: 500; text-align: center; line-height: 1.6;}
#block-contents h3 {color: #BF9C46; font-size: 20px; font-weight: 500; text-align: center; line-height: 1.6; letter-spacing: 0.1em;}
#block-contents h4 {color: #BF9C46; font-size: 20px; font-weight: 500; line-height: 1.3;}
#block-contents .detail {padding: 30px 35px 85px;}
#block-contents .pickup {position: relative; display: flex; justify-content: space-between; max-width: 522px; margin: 45px auto 0; border: 1px solid #707070;}
#block-contents .pickup .balloon {position: absolute; left: 15px; top: -12px; padding: 5px 15px; color: #fff; font-size: 15px; line-height: 1; letter-spacing: 0.075em; border-radius: 18px; background-color: #0084A3;}
#block-contents .pickup .txt {flex: 1; padding: 20px 20px 10px;}
#block-contents .pickup .txt .ttl {font-size: 20px; line-height: 1.3;}
#block-contents .pickup .txt .name {display: flex; flex-wrap: wrap; margin-top: 10px;}
#block-contents .pickup .txt .name span {font-size: 13px; font-weight: 500;}
#block-contents .pickup .txt .name span:not(:last-child) {margin-right: 1em;}
#block-contents .pickup .txt .btnarea {display: flex; justify-content: space-between; margin-top: 10px;}
#block-contents .pickup .txt .btnarea .btn {display: block; padding: 5px; width: calc(50% - 15px); color: #fff; font-size: 11px; font-weight: 700; text-align: center; background-color: #333;}
#block-contents .pickup .img {padding: 5px 20px;}
#block-contents .pickup .img img {width: 140px;}
#block-contents .feature {display: flex; align-items: center; padding: 20px 0; margin-top: 45px; color: #BF9C46; background-color: #FAF7EF;}
#block-contents .feature .ttl {width: 155px; text-align: center;}
#block-contents .feature .ttl span {display: block; font-size: 26px; font-weight: 700;}
#block-contents .feature .check {flex: 1; padding: 0 30px; border-left: 1px solid #BF9C46;}
#block-contents .feature .check ul > li {position: relative; padding-left: 40px; color: #777;}
#block-contents .feature .check ul > li::before {content: ""; position: absolute; left: 0; top: 5px; width: 22px; height: 19px; background: url(../images/common/icon_check.png) left top / 100% auto no-repeat;}
#block-contents .feature .check ul > li + li {margin-top: 1em;}
#block-contents .imgbox {display: flex; justify-content: center; flex-wrap: wrap; gap: 20px; max-width: 620px; margin: 40px auto 0;}
#block-contents .imgbox figure {width: calc(50% - 10px);}
#block-contents .imgbox figure.full {width: 100%;}
#block-contents .block {margin-top: 80px;}
#block-contents .itemlist {max-width: 620px; margin: 20px auto 0;}
#block-contents .itemlist ul > li {display: flex; justify-content: space-between; padding: 20px 8px 12px 32px; border-radius: 13px; border: 1px solid #B3963D;}
#block-contents .itemlist ul > li + li {margin-top: 15px;}
#block-contents .itemlist ul > li .txt {flex: 1;}
#block-contents .itemlist ul > li .txt p {font-size: 13px; line-height: 1.5; letter-spacing: 0.1em;}
#block-contents .itemlist ul > li figure {width: 153px;}
#block-contents .order {padding: 30px 0 75px; border-radius: 0 0 11px 11px; background-color: #F7F3E9;}
#block-contents .orderTtl {color: #000; font-size: 26px;}
#block-contents .orderList {max-width: 650px; margin: 30px auto 0;}
#block-contents .orderList ul {display: flex; flex-wrap: wrap; gap: 20px;}
#block-contents .orderList ul > li {width: calc(50% - 10px);}
#block-contents .orderList ul > li a {position: relative; display: block; height: 100%; padding: 10px 20px 15px 20px; letter-spacing: 0.1em; border: 1px solid #707070; background-color: #fff; box-sizing: border-box;}
#block-contents .orderList ul > li a::after {content: ""; position: absolute; right: 5px; bottom: 5px; width: 26px; height: 26px; background: url(../images/common/arrow_link.png) left top / 100% auto no-repeat;}
#block-contents .orderList ul > li .name {padding-bottom: 5px; margin-bottom: 5px; font-size: 18px; border-bottom: 1px solid #707070;}
#block-contents .orderList ul > li .price {font-weight: 500;}

@media screen and (max-width: 1270px) {
	/* -------------------------------------------------- */
	/* block-mv */
	/* -------------------------------------------------- */
	#block-mv .inner .logo {width: 16%;}
}

@media screen and (max-width: 860px) {
	/* -------------------------------------------------- */
	/* block-mv */
	/* -------------------------------------------------- */
	#block-mv {height: 330px;}
	#block-mv .inner .ttl .sekai {width: 80px;}
	#block-mv .inner .ttl h1 {font-size: 25px; white-space: nowrap;}
	#block-mv .inner .ttl .en {font-size: 12px; white-space: nowrap;}

	/* -------------------------------------------------- */
	/* block-contents */
	/* -------------------------------------------------- */
	#block-contents {margin: -100px 20px 0;}
}

@media screen and (max-width: 767px) {
	/* -------------------------------------------------- */
	/* common */
	/* -------------------------------------------------- */
	.v-pc {display: none;}
	.v-sp {display: block;}

	/* -------------------------------------------------- */
	/* pagenav */
	/* -------------------------------------------------- */
	#pagenav ul > li a {font-size: 12px;}

	/* -------------------------------------------------- */
	/* block-mv */
	/* -------------------------------------------------- */
	#block-mv {height: 254px; padding: 0 18px;}
	#block-mv .inner .logo {width: 25%;}
	#block-mv .inner .ttl {height: auto; padding: 0 10px 20px;}

	/* -------------------------------------------------- */
	/* block-contents */
	/* -------------------------------------------------- */
	#block-contents {margin: 25px 0 0;}
	#block-contents h2 {color: #B3963D; font-size: 18px;}
	#block-contents h3 {color: #BF9C46; font-size: 18px;}
	#block-contents h4 {color: #BF9C46; font-size: 16px;}
	#block-contents .detail {padding: 12px 15px 35px;}
	#block-contents .pickup {margin-top: 30px;}
	#block-contents .pickup .balloon {font-size: 10px;}
	#block-contents .pickup .txt {padding: 15px 0 10px 15px;}
	#block-contents .pickup .txt .ttl {font-size: 14px;}
	#block-contents .pickup .txt .name span {font-size: 10px;}
	#block-contents .pickup .img {padding: 5px 15px;}
	#block-contents .pickup .img img {width: 75px;}
	#block-contents .pickup .txt .btnarea .btn {font-size: 8px;}
	#block-contents .feature {margin-top: 30px;}
	#block-contents .feature .ttl {width: 80px; font-size: 12px;}
	#block-contents .feature .ttl span {font-size: 19px;}
	#block-contents .feature .check {padding: 0 15px;}
	#block-contents .feature .check ul > li {padding-left: 22px; font-size: 13px;}
	#block-contents .feature .check ul > li::before {top: 3px; width: 14px;}
	#block-contents .imgbox {gap: 15px 10px;}
	#block-contents .imgbox figure {width: calc(50% - 5px);}
	#block-contents .block {margin-top: 60px;}
	#block-contents .itemlist {margin-top: 15px;}
	#block-contents .itemlist ul > li {display: block; padding: 10px;}
	#block-contents .itemlist ul > li figure {width: 128px; margin: auto;}
	#block-contents .order {padding: 20px 15px 45px;}
	#block-contents .orderTtl {font-size: 21px;}
	#block-contents .orderList {margin-top: 20px;}
	#block-contents .orderList ul {gap: 10px;}
	#block-contents .orderList ul > li {width: calc(50% - 5px);}
	#block-contents .orderList ul > li a {padding: 6px 10px 12px; letter-spacing: 0.05em;}
	#block-contents .orderList ul > li .name {font-size: 14px;}
	#block-contents .orderList ul > li .price {font-size: 12px;}
	#block-contents .orderList ul > li a::after {right: 3px; bottom: 3px; width: 17px; height: 17px;}
}