@charset "utf-8";

/* ---------------------------------------------------------------------- */
body {
color: #000;
scroll-behavior: smooth;
font-family:"Montserrat","Zen Maru Gothic","Hiragino Sans","Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}
#wrap {
position: relative;
}
.pc {display: block;}
.sp{display: none;}
@media screen and (max-width: 1000px) {
.pc {display: none;}
.sp{display: block;}
}
/* ---------------------------------------- */
a {
color: #000;
-webkit-tap-highlight-color:rgba(0,0,0,0);
}
a:link {
color: #666;
}
a:visited {
color: #666;
}
a:active {
color: #666;
}

/* ---------------------------------------- */
h1,h2,h3,h4,h5,h6 {
line-height: 1.5;
font-weight: bold;
}
h4 {
font-size: 1.8rem;
}

p,li {
font-size: 1.4rem;
line-height: 1.7;
}
i { font-size: 1.8rem;}
/* ---------------------------------------------------------------------- */

#main section .ttlWrapA {
text-align: center;
padding: 0 20px;
}
#main section .ttlWrapA .en {
font-size: 1.8rem;
font-weight: 400;
color: #e67d14;
display: block;
line-height: 1.5;
padding: 0 0 0 0.1em;
}
#main section .ttlWrapA .ja {
font-size: 5.4rem;
line-height: 1.4;
font-weight: 700;
color: #e67d14;
display: block;
letter-spacing: 0.2em;
position: relative;
padding: 0 0 84px;
}
#main section .ttlWrapA .ja::after {
content: "・・・・・";
font-size: 2.4rem;
letter-spacing: -0.1em;
position: absolute;
bottom: 48px;
left: 50%;
transform: translateX(-50%);
}
#main section .ttlWrapB .en {
font-size: 1.6rem;
font-weight: 400;
color: #e67d14;
display: block;
line-height: 2.4;
padding: 0 0 0 0.1em;
}
#main section .ttlWrapB .ja {
font-size: 3.8rem;
line-height: 1.4;
font-weight: 700;
color: #000;
display: block;
letter-spacing: 0.1em;
}
@media screen and (max-width: 768px) {
#main section .ttlWrapA .en {
font-size: 1.4rem;
}
#main section .ttlWrapA .ja {
font-size: 4.2rem;
letter-spacing: 0.1em;
}
#main section .ttlWrapB .en {
font-size: 1.2rem;
line-height: 1.8;
}
#main section .ttlWrapB .ja {
font-size: 3.2rem;
}
}
@media screen and (max-width: 540px) {
#main section .ttlWrapA .ja {
font-size: 3.8rem;
}
}
@media screen and (max-width: 414px) {
#main section .ttlWrapA .ja {
font-size: 3.2rem;
}
#main section .ttlWrapB .ja {
font-size: 2.8rem;
}
}

/* ---------------------------------------- */
#main section .bgWrap01 {
width: 100%;
background: #f5cba1;
}
#main section .bgWrap02 {
width: 100%;
background: #fff064;
}
/* ---------------------------------------- */
#main section .btn {
width: 100%;
max-width: 800px;
text-align: center;
margin: 0 auto;
}
#main section .btn a {
color: #fff;
padding: 20px;
display: block;
font-size: 2.4rem;
line-height: 1.7;
font-weight: 700;
background: #e67d14;
border-radius: 15px;
transition: 0.2s ease-out;
}
#main section .btn a:hover {
background: #000;
}
@media screen and (max-width: 768px) {
#main section .btn a {
font-size: 1.8rem;
}
}
/* ---------------------------------------- */
#main .btnWrap .bgWrap02 {
padding: 60px 20px 50px;
}
#main .btnWrap h3 {
text-align: center;
font-size: 1.8rem;
letter-spacing: 0.1em;
color: #e67d14;
font-weight: 700;
margin: 0 0 24px;
}
#main .btnWrap .note {
color: #666;
text-align: center;
font-size: 1.2rem;
margin: 20px 0 0 0;
}
#main .btnWrap .note a {
font-size: 1.2rem;
text-decoration: underline;
transition: 0.2s ease-out;
}
#main .btnWrap .note a:hover {
text-decoration: none;
}
/* -------------------------------------------------- */
.fade {
opacity: 0;
transform: translateY(30px);
transition: all 0.75s;
}
.fade.blockIn {
opacity: 1;
transform: translateY(0px);
}
/* -------------------------------------------------- */
.pop {
opacity: 0;
}
.pop.blockIn {
animation: pop 1s cubic-bezier(0.12, 0, 0.39, 0) 1 forwards;
}
@keyframes pop {
0% {
 transform: translateY(140px);
 opacity: 0;
}
50% {
 transform: translateY(0);
}
65% {
 transform: translateY(30px);
}
100% {
 transform: translateX(0);
}
20%,100% {
 opacity: 1;
}
}