@charset "utf-8";
/*-----------------------------------------------------
Reset
----------------------------------------------------- */
:root{
/* color */
--color-gray9:#999999;
/* font */
--font-notosans:"Noto Sans JP", sans-serif;
--font-MPLUS:"M PLUS 1p", sans-serif;
--font-Arial:Arial, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}

html, body, div, span,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {display: block;}
ol, ul { list-style: none; line-height: 1.5; }
table { border-collapse: collapse; border-spacing: 0; }
* { margin: 0; padding: 0; }
img { max-width: 100%; width: 100%; height: auto; vertical-align: top; image-rendering: -webkit-optimize-contrast; }
* { min-height: 0; min-width: 0; }
html { scroll-behavior: smooth; font-size: 10px;}
body { line-height: 1; margin: 0; padding: 0; height: 100%; font-family: var(--font-notosans); letter-spacing : 0.1em; }
a {	text-decoration: none; color: inherit; transition: 0.3s ease-in-out; }
@media (min-width: 1025px) {
	a[href*="tel:"] { pointer-events: none; cursor: default; text-decoration: none;}
}
p,div{text-align: justify;}
p:not(.footerMainMenu__textItem) { font-family: var(--font-MPLUS); letter-spacing: .02em; }
button{ margin: 0; padding: 0; outline: 0; border: 0; border-radius: 0; color: inherit; vertical-align: middle; text-align: inherit;font: inherit; -webkit-appearance: none; appearance: none; }
picture{display: block;}
p.small{font-size: 1.1rem; line-height: 20px;}

.pc{display: block;}
.sp{display: none;}
[data-size="w1200"]{max-width: 1200px; width: 90%; margin: 0 auto;}
[data-size="w1600"]{max-width: 1600px; width: 90%; margin: 0 auto; position: relative;}
[tume="L"]{margin-left: -0.5em;}
[tume="R"]{margin-right: -0.5em;}

/* コンテンツエリア */
.contentArea{position: relative; z-index: 1; background-color: #fce8cf!important;}
main{position: relative; z-index: -1;}
main section:not(.pagetop){overflow: hidden;}

/* コンテンツ内容 */
section.kv{position: relative; z-index: 2;}
@media only screen and (max-width: 600px){
	section.kv{z-index: 1;}
}

section.bg{padding: calc(1% * 32 / 16) 0 calc(1% * 105 / 16); margin-top: calc(1% * -46 / 16); position: relative; z-index: 1;}
@media only screen and (max-width: 600px){
	section.bg{padding-top: 0; margin-top: calc(1% * -16 / 3.75);}
}

section.bg .bg_set{position: absolute; inset:0; width:100%; height:100%; z-index: -1; overflow: hidden;
display: flex; flex-direction: column; justify-content: flex-start;}
section.bg .bg_set > *{max-height: 100%; background-position: center top; background-repeat: repeat; background-size: 100% auto;}
@media only screen and (min-width: 601px){
	section.bg .bg_set > *:nth-of-type(1){background-image: url("../img/kutsurogi_bg-01.png"); height: 1140px;}
	section.bg .bg_set > *:nth-of-type(2){background-image: url("../img/kutsurogi_bg-02.png"); height: 2200px;}
	section.bg .bg_set > *:nth-of-type(3){background-image: url("../img/kutsurogi_bg-03.png"); flex-grow: 1;}
}
@media only screen and (max-width: 600px){
	section.bg .bg_set{padding-top: calc(1% * 16 / 3.75);}
	section.bg .bg_set > *:nth-of-type(1){background-image: url("../img/kutsurogi_bg-sp.png"); flex-grow: 1;}
	section.bg .bg_set > *:nth-of-type(n+2){display: none;}
}

section.bg article{width:calc(1% * 345 / 3.75); max-width: 1400px; margin: 0 auto; position: relative;}
section.bg article picture{display: flex; justify-content: center;}

section.bg article.msg{max-width: 100%; font-weight: 500; font-family: var(--font-MPLUS); letter-spacing: 0;
display: flex; justify-content: center; align-items: center;}
section.bg article.msg > *{width:100%; max-width: 1412px; position: relative;}
section.bg article.msg svg{width:100%;}
section.bg article.msg svg g{filter:url(#drop-shadow-1);}
section.bg article.msg svg .gradY{fill:url(#gradY);}
section.bg article.msg svg .gradBr{fill:url(#gradBr);}
section.bg article.msg svg .gradBr-2{fill:url(#gradBr-2);}
section.bg article.msg svg .gradBr-3{fill:url(#gradBr-3);}
section.bg article.msg svg .gradBr-4{fill:url(#gradBr-4);}
section.bg article.msg picture{position: absolute; inset: 0; margin: auto;}
@media only screen and (min-width: 601px){
	section.bg article.msg picture{
		width: calc(1% * 1224 / 14.12);
		height: calc(1% * 314 / 4.67);
		inset: calc(1% * 10 / 4.67) calc(1% * 10 / 14.12);
	}
}
@media only screen and (max-width: 600px){
	section.bg article.msg{width:calc(1% * 350 / 3.75);}
	section.bg article.msg > *{aspect-ratio: 350 / 698;}
	section.bg article.msg svg{width:calc(1% * 370 / 3.5); max-width: none; margin: calc(1% * -10 / 3.5);}
	section.bg article.msg svg g{filter:url(#drop-shadow-1-sp);}
	section.bg article.msg svg .gradY{fill:url(#gradY-sp);}
	section.bg article.msg svg .gradBr{fill:url(#gradBr-sp);}
	section.bg article.msg svg .gradBr-2{fill:url(#gradBr-2-sp);}
	section.bg article.msg svg .gradBr-3{fill:url(#gradBr-3-sp);}
	section.bg article.msg svg .gradBr-4{fill:url(#gradBr-4-sp);}
	section.bg article.msg picture{width: calc(1% * 240 / 3.5);}
}

section.bg .subt_cp{width:calc(1% * 345 / 3.75); max-width: 1442px; margin: 0.75% auto 0;}
@media only screen and (max-width: 600px){
	section.bg .subt_cp{width:100%; margin: calc(1% * -10 / 3.75) auto 0; position: relative;}
}

section.bg article.cp_menu{gap:24px 0; display: flex; flex-wrap: wrap; justify-content: space-between;}
section.bg article.cp_menu a{width:calc(1% * 670 / 14); aspect-ratio: 670 / 486; position: relative;
display: flex; justify-content: flex-start; align-items: flex-end;}
section.bg article.cp_menu svg{width:calc(1% * 688 / 6.7);
margin: calc(1% * -4 / 14) calc(1% * -14 / 14) calc(1% * -14 / 14) calc(1% * -4 / 14);}
section.bg article.cp_menu svg polyline{fill:none;stroke:#4f2d1a;stroke-linecap:round;stroke-linejoin:round;stroke-width:6px;}
section.bg article.cp_menu svg path{fill:#fff;}
section.bg article.cp_menu svg g{filter:url(#drop-shadow-2);}
section.bg article.cp_menu a > img{position: absolute;}
section.bg article.cp_menu a img[src*="kikan"]{width: calc(1% * 500 / 6.7); inset: 0 0 auto;}
section.bg article.cp_menu a img[src*="menu"]{width: calc(1% * 590 / 6.7); height: calc(1% * 354 / 4.86);
inset: calc(1% * 45 / 4.86) 0 calc(1% * 36 / 4.86); object-fit: contain; object-position: center bottom;}
section.bg article.cp_menu a img[src*="menu_p2"]{width: calc(1% * 608 / 6.7); height: auto; margin-left: 6%; margin-bottom: 0;}
section.bg article.cp_menu a img[src*="menu_p3"]{width: calc(1% * 628 / 6.7); height: calc(1% * 378 / 4.86); }
@media only screen and (max-width: 600px){
	section.bg article.cp_menu{margin-top: calc(1% * 16 / 3.75); gap:calc(1vw * 20 / 3.75) 0; flex-direction: column;}
	section.bg article.cp_menu a{width:100%;}
}

section.bg article.cp_menu + .anchor,
section.bg article.cp_menu + article.cp_box{margin-top: calc(1% * 85 / 16);}
section.bg article.cp_box + .anchor,
section.bg article.cp_box + article.cp_box{margin-top: calc(1% * 90 / 16);}
section.bg article .frame{background-color: #FFF; border-radius: min(30px,calc(1vw * 16 / 3.75)); overflow: hidden;}
section.bg article .btn{border-radius: 110px; display: flex; justify-content: center; align-items: center;}
section.bg article .btn img{width: auto;}

@media only screen and (min-width: 601px){
	section.bg article.coffee .frame{aspect-ratio: 1400 / 2130;}
	section.bg article.coffee img[src*="_p2"]{width: calc(100% * 6 / 7); margin-top: calc(1% * -200 / 14);}
	section.bg article.coffee img[src*="chara"]{width: calc(1% * 212 / 14); position: absolute; left:-2%; bottom: -1%;}
	section.bg article.coffee img[src*="logo"]{width: calc(1% * 195 / 14); position: absolute; top: calc(1% * 35 / 21.3); right: calc(1% * 40 / 14);}
}
@media only screen and (max-width: 600px){
	section.bg article.coffee .frame{overflow: visible; background-color: transparent; position: relative;
	aspect-ratio: 345 / 2384;
	display: flex; flex-direction: column;}
	section.bg article.coffee .frame::before{content: ''; display: block; background-color: #FFF;
	position: absolute; inset:auto 0 0; width:100%; height:calc(100% - 40px); z-index: -1;
	border-radius: min(30px,calc(1vw * 16 / 3.75));}
	section.bg article.coffee img[src*="_p1"]{width: calc(1% * 365 / 3.45); max-width: none; margin-right: calc(1% * -20 / 3.45);}
	section.bg article.coffee img[src*="_p2"]{width: calc(1% * 305 / 3.45); margin-top: calc(1% * 16 / 3.45);}
	section.bg article.coffee img[src*="chara"]{width: calc(1% * 93 / 3.45); position: absolute; left: 5%; bottom: 0.5%;}
	section.bg article.coffee img[src*="logo"]{width: calc(1% * 72 / 3.45); position: absolute; top: calc(1% * 10 / 23.84); right: calc(1% * 10 / 3.45);}
}

section.bg article.okagean .frame{position: relative;
background-position: center top; background-repeat: no-repeat, repeat; background-size: 100% auto;
display: flex; flex-direction: column;}
section.bg article.okagean img[src*="_p2"]{position: absolute;}
section.bg article.okagean .link{font-size: min(20px,calc(1vw * 14 / 3.75)); margin-top: 2em; display: flex; justify-content: center;}
section.bg article.okagean .link a{color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 0.2em;}
@media only screen and (min-width: 601px){
	section.bg article.okagean .frame{aspect-ratio: 1400 / 1872;
	background-image: url("../img/kutsurogi_cp-okagean_bg1-pc.webp"), url("../img/kutsurogi_cp-okagean_bg2-pc.jpg");}
	section.bg article.okagean img[src*="_p2"]{width: calc(100% * 6 / 7); inset:auto auto calc(1% * 92 / 18.72);}
}
@media only screen and (max-width: 600px){
	section.bg article.okagean .frame{overflow: visible; background-color: transparent;
	aspect-ratio: 345 / 2292;
	background-image: url("../img/kutsurogi_cp-okagean_bg1-sp.webp"), url("../img/kutsurogi_cp-okagean_bg2-sp.jpg");}
	section.bg article.okagean img[src*="_p1"]{width: calc(1% * 365 / 3.45); max-width: none; margin-right: calc(1% * -20 / 3.45);}
	section.bg article.okagean img[src*="_p2"]{width: calc(1% * 306 / 3.45); inset:auto auto calc(1% * 22 / 22.92);}
}

section.bg article.komeca .frame{display: flex; justify-content: center; align-items: center;}
@media only screen and (min-width: 601px){
	section.bg article.komeca .frame{aspect-ratio: 1400 / 1150;}
	section.bg article.komeca img[src*="_p1"]{width: calc(1% * 1272 / 14); margin-top: -3%;
	margin-left: calc(1% * -2 / 14); margin-right: calc(1% * -62 / 14);}
	section.bg article.komeca img[src*="chara"]{width: calc(1% * 272 / 14); position: absolute; right: 2%; bottom: -1.5%;}
}
@media only screen and (max-width: 600px){
	section.bg article.komeca .frame{aspect-ratio: 345 / 788;}
	section.bg article.komeca img[src*="_p1"]{width: calc(1% * 315 / 3.45);}
	section.bg article.komeca img[src*="chara"]{width: calc(1% * 87 / 3.45); position: absolute; right: -3.5%; top: 3%;}
}

section.bg article.x_cp .frame{display: flex; flex-direction: column; justify-content: center; align-items: center;}
section.bg article.x_cp .btn{background-color: #000;}
section.bg article.x_cp .btn img{height:calc(1% * 39 / 1.1);}
@media only screen and (min-width: 601px){
	section.bg article.x_cp .frame{aspect-ratio: 1400 / 1075;}
	section.bg article.x_cp img[src*="_p1"]{width: calc(1% * 1215 / 14); margin-top: -1%; margin-left: 0; margin-right: calc(1% * -15 / 14);}
	section.bg article.x_cp img[src*="chara"]{width: calc(1% * 222 / 14); position: absolute; left: -2.5%; bottom: -3%;}
	section.bg article.x_cp .btn{width: calc(1% * 875 / 14); margin-top: calc(1% * 57 / 14); aspect-ratio: 875 / 110;}
}
@media only screen and (max-width: 600px){
	section.bg article.x_cp .frame{aspect-ratio: 345 / 1398;}
	section.bg article.x_cp img[src*="_p1"]{width: calc(1% * 310 / 3.45);}
	section.bg article.x_cp img[src*="chara"]{width: calc(1% * 72 / 3.45); position: absolute; left: -1%; top: 0.5%;}
	section.bg article.x_cp .btn{width: calc(1% * 310 / 3.45); margin-top: calc(1% * 22 / 3.45); aspect-ratio: 310 / 50;}
}

section.bg article.o_shop .frame{display: flex; flex-direction: column; justify-content: center; align-items: center;}
section.bg article.o_shop .btn{background-color: #2c438a;}
section.bg article.o_shop .btn img{height:calc(1% * 40 / 1.1);}
@media only screen and (min-width: 601px){
	section.bg article.o_shop .frame{aspect-ratio: 1400 / 825;}
	section.bg article.o_shop img[src*="_p1"]{width: calc(1% * 1264 / 14); margin-left: calc(1% * -61 / 14);  margin-right: calc(1% * -3 / 14);}
	section.bg article.o_shop .btn_flex{width: calc(100% * 6 / 7); position: relative; z-index: 2;
	display: flex; justify-content: flex-end; align-items: flex-end;}
	section.bg article.o_shop .btn{width: calc(1% * 789 / 12); aspect-ratio: 789 / 110; position: absolute;}
}
@media only screen and (max-width: 600px){
	section.bg article.o_shop .frame{aspect-ratio: 345 / 851;}
	section.bg article.o_shop img[src*="_p1"]{width: calc(1% * 310 / 3.45);}
	section.bg article.o_shop .btn_flex{width: 100%; display: flex; justify-content: center;}
	section.bg article.o_shop .btn{width: calc(1% * 310 / 3.45); margin-top: calc(1% * 22 / 3.45); aspect-ratio: 310 / 50;}
}


/* 戻る */
:root{
--pagetop-W:94px;
}
section.pagetop{position: sticky; bottom: 20px; z-index: 900;
width:calc(100% - 22px * 2); max-width: 1420px;
font-size: var(--pagetop-W); margin: calc(1em * 185 / 94) auto 0;
transition: bottom 0.3s;
display: flex; justify-content: flex-end; align-items: flex-end;}
section.pagetop a{position: absolute; right: 0; bottom: 0;}
section.pagetop a img{width: 1em;}
section.pagetop:not(.active){bottom: calc(1em * -222 / 94);}
@media only screen and (max-width: 600px){
	:root{
	--pagetop-W:66px;
	}
	section.pagetop{bottom: 10px; width:calc(100% - 10px * 2);}
}

/* お問い合わせ */
section.contact{
	background-color: #4f2d1a; position: relative; z-index: 1;
	min-height: 610px; margin-top: calc(var(--pagetop-W) * -185 / 94);
	display: flex; flex-direction: column; justify-content: center; align-items: center;
}
section.contact::before{
	content:''; display: block; position: absolute; inset:0; width:100%; height:100%; z-index: -1; opacity:0.35;
	background-image: url("../img/kutsurogi_bg-contact.png");
	background-position: center top; background-repeat: repeat; background-size: 100% auto;
}
section.contact *,
section.contact a:hover{font-weight: 500; color:#FFF;}
section.contact h4{font-size: 25px; text-align: center; margin-bottom: 1em;}
section.contact p{font-size: 20px;}
section.contact h4 + p{margin-bottom: 0.5em;}
section.contact a[href*="tel:"]{font-size: 65px; font-weight: 700; line-height: 1em;
gap: 0.25em; display: flex; align-items: baseline;}
section.contact a[href*="tel:"] svg{height: calc(1em * 46 / 65);}
section.contact a[href*="tel:"] + p{margin-top: 0.5em;}
section.contact a.mail{background-color: #ea5514; width:390px; min-height:50px; border-radius: 50px; margin-top: 1.5em;
font-size: 18px;
gap: 0 0.5em; display: flex; justify-content: center; align-items: center;}
section.contact a.mail svg{height: calc(1em * 5 / 6);}
section.contact a.cal{font-size: 16px; text-decoration: underline; margin-top: 2em;}
section.contact svg *{fill:#FFF;}
@media only screen and (max-width: 600px){
	section.contact{min-height: 452px;}
	section.contact::before{background-image: url("../img/kutsurogi_bg-contact-sp.png");}
	section.contact h4{font-size: 20px;}
	section.contact p{font-size: 16px;}
	section.contact a[href*="tel:"]{font-size: 35px;}
	section.contact a.mail{width:345px; font-size: 17px;}
	section.contact a.cal{font-size: 15px;}
}

/*ノートPC*/
@media (max-width: 1600px) and (max-height: 900px) {
}

@media (max-width: 1366px) and (max-height: 768px) {
}

/*DynaBook*/
@media (max-width: 1263px) and (max-height: 569px) {
}

/*tab*/
@media only screen and (max-width: 1024px){
}
@media only screen and (max-width: 980px){
}

@media only screen and (min-width: 768px){
	.footerInner{min-width: min(900px, 100%)!important;}
}
@media only screen and (max-width: 767px){
}

@media only screen and (max-width: 600px){
  .pc{display: none;}
  .sp{display: block;}
}
@media only screen and (max-width: 414px){
}
/*
@media only screen and (max-width: 375px){
}
*/