@charset "utf-8";

/* CSS Document */

* { margin:0; padding:0;} 
html { margin-bottom:0px; height:100%; overflow-y:scroll; }
body{padding:0px;margin:0px;outline:none;font-family: "Noto Sans JP", sans-serif !important;}
img {border:none;}


#pagebody{text-align:center;overflow:hidden;width:100%;
background:#fff;}


#pagebody>footer{padding:2vw 0;}

article{display:none;}
article section>div{max-width:980px;margin:0 auto;width:100%;}


article img{max-width:100%;}

header img{width:100%;max-width:980px}

section{opacity:0;transition:3s;}
section.on{opacity:1;}


[data-lang="cn"] article[lang="cn"]{display:block;font-family:"Noto Sans SC"}
[data-lang="ja"] article[lang="ja"]{display:block;font-family:"Noto Sans JP"}
[data-lang="en"] article[lang="en"]{display:block;font-family:"Noto Sans"}
[data-lang="kr"] article[lang="kr"]{display:block;font-family:"Noto Sans KR"}


#pagebody>nav{background:#f4f1ee;width:100%;}

#pagebody>nav ul{max-width:600px;width:60vw;margin:0 auto;padding:2vw 0;}
#pagebody>nav li{background:#c5b292;display:inline-block;width:25%;vertical-align:middle;
box-sizing:border-box;color:#242321;
box-shadow:1px 0 0 0 #fff inset;
}
#pagebody>nav li a{display:block;font-size:2vw;color:inherit;padding:1vw;text-decoration:none;}


#pagebody>nav li:nth-of-type(4n+1){border-radius:30px 0 0 30px;box-shadow:0 0 0;}
#pagebody>nav li:nth-of-type(4n){border-radius:0 30px 30px 0;}

[data-lang="ja"] #pagebody>nav li[lang="ja"],
[data-lang="cn"] #pagebody>nav li[lang="cn"],
[data-lang="en"] #pagebody>nav li[lang="en"],
[data-lang="kr"] #pagebody>nav li[lang="kr"]{background:#ffa307;color:#fff;}


[lang="cn"]{font-family:"Noto Sans SC"}
[lang="ja"]{font-family:"Noto Sans JP"}
[lang="en"]{font-family:"Noto Sans"}
[lang="kr"]{font-family:"Noto Sans KR"}



/*-----------------------------*/

article>*{padding:4vw 0;} 
article>*{position:relative;z-index:1;} 

section>div{font-size:1.8vw;line-height:1.75;text-align:left;color:#534c46;}


article nav.fixBtn{position:fixed;top:0;right:0;z-index:99;}

article nav.fixBtn p{font-size:0;padding:0;margin:0;}
article nav.fixBtn a{font-size:15px;
display:block;color:#242321;
text-align:center;text-decoration:none;line-height:1;
background:#fff;border-radius:1em 0 0 1em;box-shadow:0 0 0 1px #ffa307;
transition:0.4s;}
article nav.fixBtn a span{display:inline-block;padding:1em;
writing-mode:vertical-lr;
letter-spacing:2px;font-size:16px;
}
article nav.fixBtn a span::after{content:'';
display:block;display:inline-block;
width:1.5em;height:0.9em;
background:url(../img/mail.png) no-repeat 50% 50%;
background-size:contain;transition:0.4s;margin-top:0.5em;
}

article nav.fixBtn a:hover{
background:#ffa307;color:#fff;}

article nav.fixBtn a:hover span::after{
background-image:url(../img/mail_on.png);
}


article header, 
[data-name="02"],[data-name="03"],
[data-name="06"],
[data-name="10"]{background:#f4f1ee;}

section>h3{font-size:4vw;line-height:1.2;color:#534c46;text-align:center;}
section>h3 span{display:inline-block;padding:1em 0;text-align:center;
background:#ffffff90;padding:1em;
}


[data-name="02"]>h3 span,[data-name="03"]>h3 span,
[data-name="06"]>h3 span,
[data-name="10"]>h3 span{background:#f4f1ee90;}


section>h3 span::after{content:'';display:block;width:6em;height:3px;background:#ffa307;
margin:0 auto;margin-top:0.5em;}

[data-ltr="Left"]{letter-spacing:-1em;}
[data-ltr="Left"]>*{letter-spacing:0em;display:inline-block;vertical-align:top;
box-sizing:border-box;}


article>*{position:relative;z-index:1;} 
article>header{z-index:2;} 


[data-name="00"] div{position:relative;}
[data-name="00"] picture{display:block;font-size:0;background:url(../img/img_01.jpg) no-repeat 50% 50%;background-size:cover;}
[data-name="00"] picture img{max-width:380px;width:100%;min-width:300px;}
[data-name="00"] h2{position:absolute;top:50%;
font-size:1.8em;margin-top:-3em;text-align:center;
display:block;width:100%;
color:#fff;line-height:1.2;
}
[data-name="00"] h2::after{content:attr(title);
display:block;font:700 0.75em / 1 'Raleway';
padding-top:1em;
}

[data-name="01"]{position:relative;max-width:980px; margin:0 auto;}
[data-name="01"] div{background:#fff;position:relative;
max-width:inherit;
width:80%;box-sizing:border-box;padding:2em;top:-8em;margin-bottom:-10em !important;
box-shadow:0 0 5px;
} 

[data-name="01"] div p strong{display:block;text-align:center;
font-size:1.5em;padding-bottom:1em;}

[data-name="01"] div::after{content:'';display:block;
font-size:2vw;z-index:1;
width:12em;height:7em;position:absolute;right:-6em;
bottom:-3em;
background:url(../img/kuri_01.png) no-repeat 50% 50%;
background-size:cover;
}


[data-name="02"] .boxL,
[data-name="03"] .boxL{width:30%;}
[data-name="02"] .boxR,
[data-name="03"] .boxR{width:70%;box-sizing:border-box;padding-left:1em;}

[data-name="02"] ol>li,
[data-name="03"] ol>li{box-sizing:border-box;margin-left:2em;}


[data-name="03"] ol>li ul{padding:0;margin-left:-2em;}
[data-name="03"] ol>li ul>li{display:inline-block;width:40%;
box-sizing:border-box;padding:10px;
}
[data-name="03"] ol>li ul>li:nth-of-type(1){width:33%
}


[data-name="02"] h4,
[data-name="03"] h4{margin-left:0.5em;font-size:1.5em;
line-height:1;padding:0 0 0.5em;
}

[data-name="03"]{padding-top:0;}

[data-name="04"]{position:relative;}


[data-name="04"]>div{position:relative;z-index:1;}
[data-name="04"]::before{content:'';display:block;
font-size:2vw;z-index:0;
width:15em;height:19em;position:absolute;left:0;
top:-4em;
background:url(../img/cake_l.png) no-repeat 50% 50%;
background-size:cover;
}

[data-name="04"]::after{content:'';display:block;
font-size:2vw;z-index:0;
width:15em;height:19em;position:absolute;right:0;
top:-4em;
background:url(../img/cake_r.png) no-repeat 50% 50%;
background-size:cover;
}




[data-name="04"]>*{position:relative;z-index:1;}
[data-name="04"] h3{padding:1em 0 ;}

[data-name="04"] p>strong{display:block;
text-align:center;padding-bottom:3em;
line-height:2;
}


[data-name="05"] p>strong{font-size:1.2em;display:block;
padding:1em 0;}


[data-name="06"] h3{position:relative;max-width:980px;margin:0 auto;}

[data-name="06"] h3 span{position:relative;z-index:2;
max-width:60%;}

[data-name="06"] h3::before{content:'';display:block;
font-size:2vw;z-index:1;
width:11em;height:8em;position:absolute;left:0;
top:0;
background:url(../img/kuri_02.png) no-repeat 50% 50%;
background-size:cover;
}

[data-name="06"] h3::after{content:'';display:block;
font-size:2vw;z-index:1;
width:11em;height:8em;position:absolute;right:0;
top:0;
background:url(../img/kuri_03.png) no-repeat 50% 50%;
background-size:cover;
}

[data-name="06"] p{
text-align: left;
display: inline-block;
/* text-align:center; */
}
.text_center{
text-align: center;
}

[data-name="06"] ol{display:block;box-sizing:border-box;letter-spacing:-1em;}
[data-name="06"] ol>li{display:inline-block;box-sizing:border-box;letter-spacing:0;
vertical-align:top;width:32%;margin:3em 0 1em;}

[data-name="06"] ol>li::before{content:attr(data-num);color:#ffa309;
font-size:3em;text-align:center;display:block;width:100%;
box-sizing:border-box;top:-1em;position:absolute;
}

[data-name="06"] ol>li:nth-of-type(3n+2){margin:3em 2% 1em;}
[data-name="06"] ol>li{background:#fff;border:1px solid #ccc;position:relative;}

[data-name="06"] ol>li h4{background:#fff;padding:1em 0 0;}
[data-name="06"] ol>li h4{color:#534c46;text-align:center;}
[data-name="06"] ol>li h4 span{display:inline-block;padding:1em 0 0;text-align:center;
font-size:1.5em;line-height:1;}
[data-name="06"] ol>li h4 span::after{content:'';display:block;width:2em;height:2px;background:#ffa307;margin:0 auto;margin-top:0.5em;}

[data-name="06"] ol>li>dl{padding:1em;}
[data-name="06"] ol>li>dl dt{font-weight:bold;}
[data-name="06"] ol>li>dl+dl{background:#f6ead5;position:relative;}
[data-name="06"] ol>li>dl+dl::before{
display:block;content:'';width:2em;height:2em;
position:absolute;top:0;left:50%;margin-top:-1em;margin-left:-1em;
background:linear-gradient(45deg,transparent 50% ,#fff 50%);
transform:rotate(135deg);
}



[data-name="07"] [data-ltr="Left"]>.boxL{width:37%;}
[data-name="07"] [data-ltr="Left"]>.boxR{width:63%;
padding-left:1em;
}

[data-name="08"] picture+p{margin-top:1em;}

[data-name="09"] ul{letter-spacing:-1em;display:flex;background:#f4f1ee;margin-bottom:5em;
margin-right:30px;
}
[data-name="09"] li{display:block;width:32%;letter-spacing:0;vertical-align:top;height:200px;}

[data-name="09"] ul{counter-reset: item;}
[data-name="09"] li>h4{font:700 2em / 1 'Noto sans JP';text-align:center;padding-bottom:10px;}
[data-name="09"] li>h4::before{content:'step ';font-size:0.75em;}

[data-name="09"] li{box-sizing:border-box;padding:2em 1em;font-size:0.9em;counter-increment: item;}

[data-name="09"] li:nth-of-type(2){background:#ffd999;
position:relative;
width:calc( 36% - 60px);margin:0 30px;
}
[data-name="09"] li:nth-of-type(2)::after,
[data-name="09"] li:nth-of-type(2)::before{content:'';display:block;width:30px;height:200px;
position:absolute;}

[data-name="09"] li:nth-of-type(2)::before{left:-30px;top:0;
background:linear-gradient(74deg,transparent 50% ,#ffd999 50%) no-repeat 0 0%,linear-gradient(-74deg,#ffd999 50%,transparent 50% ) no-repeat 0% 100%;
background-size:100% 50%,100% 50%;
}

[data-name="09"] li:nth-of-type(2)::after{right:-30px;top:0;
background:linear-gradient(-74deg,transparent 50% ,#ffd999 50%) no-repeat 0 100%,linear-gradient(74deg,#ffd999 50%,transparent 50% ) no-repeat 0% 0%;
background-size:100% 50%,100% 50%;
}


[data-name="09"] li:nth-of-type(3){position:relative;}

[data-name="09"] li:nth-of-type(3)::after{content:'';display:block;width:30px;height:200px;
position:absolute;}


[data-name="09"] li:nth-of-type(3)::after{right:-30px;top:0;
background:linear-gradient(-74deg,transparent 50% ,#f4f1ee 50%) no-repeat 0 100%,linear-gradient(74deg,#f4f1ee 50%,transparent 50% ) no-repeat 0% 0%;
background-size:100% 50%,100% 50%;
}





[data-name="10"] div{text-align:center;}
[data-name="10"] div .btn{max-width:500px;display:inline-block;
width:80%;padding:2em 0;
}
[data-name="10"] div .btn a{display:block;font-weight:700;
color:inherit;text-decoration:none;
background:#ffa307;color:#fff;padding:1em 16px;
border-radius:5px;box-sizing:border-box;position:relative;}

[data-name="10"] div .btn a::after{content:'▼';font:16px / 1 'noto sans jp';
display:inline-block;position:absolute;right:16px;top:50%;margin-top:-8px;
transform:rotate(30deg);
}


/*-----------------------------*/
@media screen and (min-width: 1000px) {
#pagebody>nav li a{font-size:20px;padding:10px;}

section>div{font-size:17px;}
section>h3{font-size:30px;}

[data-name="01"] div::after,
[data-name="04"]::after,
[data-name="04"]::before,
[data-name="06"] h3::after,
[data-name="06"] h3::before{font-size:20px;}


}

@media screen and (max-width: 768px) {
	
section>h3{font-size:21px;}

[data-name="02"] h4,
[data-name="03"] h4{font-size:1.2em;}

#pagebody>nav ul{width:100%;box-sizing:border-box;padding:2vw;}
#pagebody>nav li a{font-size:16px;padding:0.5em;font-weight:bold;}

	
[data-name="01"] div{width:90%;}
[data-name="01"] div p strong{font-size:1.4em;text-align:left;} 


[data-name]>div{padding:5vw;
box-sizing:border-box;}

header [data-name="00"]>div{padding:0;}
header [data-name="01"]>div p strong{font-size:1.2em;}
header [data-name="01"]>div p{font-size:1em;}


article[lang]>header section{padding-bottom:10vw;}


[data-name="04"] h3{max-width:80%;margin:0 auto;}

[data-name="04"]::after,
[data-name="04"]::before{opacity:0.6;}

section>div{font-size:16px;}

[data-name="06"] ol>li{width:48%;margin:2em 0   !important;}
[data-name="06"] ol>li:nth-of-type(2n){margin-left:2% !important;}


[data-name="09"] ul{display:block;text-align:center;margin-right:0;
margin-bottom:5vw;
}
[data-name="09"] li{display:block;width:100%;height:auto;}

[data-name="09"] li:nth-of-type(2){display:block;width:100%;height:auto;
margin:5vw 0;
}


[data-name="09"] li:nth-of-type(2)::before{top:-5vw;left:0;
width:100%;height:5vw;
background:linear-gradient(6deg,#ffd999 50%,transparent 50% ) no-repeat 0 0%,linear-gradient(-6deg,#ffd999 50%,transparent 50% ) no-repeat 100% 0%;
background-size:50% 100%;}

[data-name="09"] li:nth-of-type(2)::after{top:unset;bottom:-5vw;left:0;right:unset;
width:100%;height:5vw;
background:linear-gradient(6deg,transparent 50%,#ffd999 50% ) no-repeat 0 0%,linear-gradient(-6deg,transparent 50%,#ffd999 50% ) no-repeat 100% 0%;
background-size:50% 100%;}

[data-name="09"] li:nth-of-type(3){position:relative;}


[data-name="09"] li:nth-of-type(3)::after{top:unset;bottom:-5vw;left:0;right:unset;
width:100%;height:5vw;
background:linear-gradient(6deg,transparent 50%,#f4f1ee 50% ) no-repeat 0 0%,linear-gradient(-6deg,transparent 50%,#f4f1ee 50% ) no-repeat 100% 0%;
background-size:50% 100%;}
}


@media screen and (max-width: 480px) {
[data-name="06"] ol>li{width:100%;margin:2em 0   !important;}
[data-name="06"] ol>li:nth-of-type(2n){margin-left:0 !important;}
}



*[data-animation]{animation: 1s ease 0s 1 both;opacity:0;}

@keyframes bounceIn {
0% {opacity: 0;transform: scale(0.3);}
50% {opacity: 1;transform: scale(1.05);}
70% {transform: scale(0.9);}
100% {transform: scale(1);}
}

@keyframes shake {
0%,100%{transform: translateX(0);opacity:1;}
20%, 60% {transform: translateX(-5px);}
40%, 80% {transform: translateX(5px);}
}


@keyframes slideUp{
0% {opacity: 0;transform: translateY(100%);}
100% {opacity: 1;transform: translateY(0);}
}

@keyframes slideInL {
0% {opacity: 0;transform: translateX(-200%);}
100% {opacity: 1;transform: translateX(0);}
}
@keyframes slideInR{
0% {opacity: 0;transform: translateX(100%);}
100% {opacity: 1;transform: translateX(0);}
}


*[data-animation="shake"].on{animation-name: shake;}
*[data-animation="bounceIn"].on{animation-name:bounceIn;}
*[data-animation="slideUp"].on{animation-name:slideUp;}
*[data-animation="slideInL"].on{animation-name:slideInL;}
*[data-animation="slideInR"].on{animation-name:slideInR;}
*[data-animation].on{}