@charset "utf-8";

/*==============================
INITIALIZE
===============================*/
html { overflow-y: scroll; }

body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
input,
p,
address,
a,
img {
margin: 0;
padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 { font-size: 100%; }

img { border: 0; }

p {
line-height: 1.8;

display: block;
margin-block-start: 0em;
margin-block-end: 0em;
margin-inline-start: 0px;
margin-inline-end: 0px;

}

hr { display: none; }

table {
border-collapse: collapse;
border-spacing: 0;
_font-size: 100%;
}

li {
margin-left: 10px;
}

h1 { margin-bottom:30px; }
h2 { margin-bottom:30px; }

#leed { margin-bottom:20px; }
#sponsor { margin-bottom:30px; }

#logo {
text-align:center;
margin:30px 0;
}
#logo a {
margin: 0 30px;
}
.txtcenter {
text-align: center;
}

#credit { text-align:center; }

/*==============================
LINK
===============================*/
a:link,
a:visited,
a:active { text-decoration: none; }

a:hover { text-decoration: none; }

/*==============================
DEFAULT
===============================*/

/*==============================
STYLE
===============================*/
body {
text-align: center;
width: 100%;
font-size: 100%;
color: #231815;
font-family: hiragino-kaku-gothic-pron, sans-serif;
font-weight: 600;
font-style: normal;
}
#wrap {
width:100%;
margin: 0 auto;
margin-bottom:0px;
text-align:left;
background: #fff;
}

#wrap p.yol {
text-align: right;
font-size: 0.8rem;
background: rgb(255, 255, 255);
padding: 8px 8px 0px 0px;
}

#wrap .flex{
display: flex;
justify-content: flex-start;
align-items: center;
}
#wrap img.arrow{
display: block;
width: auto;
height: 30px;
margin: 10px auto;
}

/*--------------------------
top
---------------------------*/
#ad{
position: relative;
width: 100%;
padding: 24px;
box-sizing: border-box;
}
#ad p.plan{
width: 500px;
font-size: .9rem;
font-weight: 400;
margin: 0 0 0 auto;
text-align: right;
}
#ad span.ad{
display: inline-block;
border: solid 1px #000;
width: auto;
text-align: center;
font-size: 100%;
padding: 4px 16px;
margin-right: 8px;
line-height: 1;
}

/*--------------------------
key
---------------------------*/
#key{
position: relative;
background-image: url(../img/main_pc.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: right bottom;
width: 100%;
aspect-ratio: 5/3;
}
#key .TextArea{
position: absolute;
width: 50%;
top: 50%;
left: 8%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
}
#key .TextArea h1 img{
width: 100%;
}
#key .TextArea h2 img{
width: 100%;
}
#key .TextArea h3 img{
width: 40%;
margin: 40px 0 0 auto;
display: block;
}
#key .TextArea p{
width: 100%;
font-size: 1.3vw;
margin: 5vw auto 0;
text-align: justify;
}

/*--------------------------
contents
---------------------------*/
#contents{
width: 100%;
}
#contents .inner{
max-width: 960px;
width: 90%;
margin: 0 auto;
padding: 80px 0;
}

#contents .inner section.faq{
width: 100%;
margin-bottom: 120px;
}
#contents .inner section.faq h2::after{
content: "";
background: linear-gradient(to right, #009FD0, #AFD7EC);
width: 100%;
height: 8px;
display: block;
border-radius: 25%;
margin-top: 16px;
}
#contents .inner section.faq h2 img{
width: auto;
height: 88px;
}
#contents .inner section.faq h3 img{
width: auto;
height: 160px;
}

#contents .inner section.faq p{
font-weight: 400;
font-size: 110%;
text-align: justify;
margin-top: 24px;
}
#contents .inner section.faq p span{
font-size: 70%;
}

#contents .inner section.faq .image-box{
width: 100%;
margin: 24px auto;
}
#contents .inner section.faq .image-box img{
width: 100%;
}

/*--------------------------
bottom
---------------------------*/
#bottom{
width: 100%;
}
#bottom .inner{
max-width: 960px;
width: 90%;
margin: 0 auto;
padding: 0px 0 40px;
}
#bottom .inner .message{
background: url(../img/bottom_bg.jpg) no-repeat;
background-size: cover;
background-position: center;
aspect-ratio: 8/5;
display: flex;
align-items: center;
justify-content: end;
border-radius: 24px;
}
#bottom .inner .message .content{
width: 53%;
margin-right: 5%;
}

#bottom .inner .message .content img.mes{
display: block;
height: 24px;
}
#bottom .inner .message .content img.ttl{
display: block;
height: 60px;
margin: 24px 0;
}
#bottom .inner .message .content p{
font-weight: 400;
font-size: 100%;
}
#bottom .inner .message .content img.name{
display: block;
height: 48px;
margin: 40px 0 8px 0;
}
#bottom .inner .message .content span{
font-weight: 400;
font-size: 85%;
}


#bottom .inner .info{
margin: 40px auto 40px;
width: 100%;
}
#bottom .inner .info p{
font-weight: 400;
font-size: 80%;
display: flex;
line-height: 1.6;
margin-bottom: 8px;
}
#bottom .inner .info p span.kome{
width: 2.5rem;
}


.order1{
order: 1;
}
.order2{
order: 2;
}

/********フェード**********/
.sa {opacity: 0;transition: all 1s ease;width: 100%;}
.sa.show {opacity: 1;transform: none;}
.sa--lr {transform: translate(-100px, 0);}
.sa--rl {transform: translate(100px, 0);}
.sa--up {transform: translate(0, 100px);}
.sa--down {transform: translate(0, -100px);}
.sa--scaleUp {transform: scale(.5);}
.sa--scaleDown {transform: scale(1.5);}
.sa--rotateL {transform: rotate(180deg);}
.sa--rotateR {transform: rotate(-180deg);}
/********フェード**********/



.pc { display: block !important; }
.sp { display: none !important; }

@media only screen and (min-width: 500px) and (max-width: 1000px){

}
@media screen and (max-width:750px){

.pc { display: none !important; }
.sp { display: block !important; }


/*--------------------------
top
---------------------------*/
#ad{
padding: 16px;
}
#ad p.plan{
width: auto;
font-size: 70%;
}
#ad span.ad{
font-size: 60%;
padding: 1px 16px;
margin-right: 8px;
}

/*--------------------------
key
---------------------------*/
#key{
position: relative;
background-image: url(../img/main_sp.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: right bottom;
aspect-ratio: 13/8;
}

.sp-lead{
width: 90%;
margin: 24px auto;
font-size: 90%;
font-weight: 400;
}
/*--------------------------
contents
---------------------------*/
#contents{
width: 100%;
}
#contents .inner{
max-width: 960px;
width: 90%;
margin: 0 auto;
padding: 24px 0;
}

#contents .inner section.faq{
width: 100%;
margin-bottom: 40px;
}
#contents .inner section.faq h2::after{
content: "";
height: 4px;
margin-top: 2px;
}
#contents .inner section.faq h2{
margin-bottom: 16px;
}
#contents .inner section.faq h3{
margin-bottom: 8px;
}
#contents .inner section.faq h2 img{
width: auto;
height: 10vw;
}
#contents .inner section.faq h3 img{
width: auto;
height: 16vw;
}

#contents .inner section.faq p{
font-size: 90%;
margin-top: 8px;
}
#contents .inner section.faq p span{
font-size: 70%;
}

#contents .inner section.faq .image-box{
width: 100%;
margin: 24px auto;
}
#contents .inner section.faq .image-box img{
width: 100%;
}
#contents .inner section.faq .image-box img.q07{
width: 80%;
margin: 0 auto;
}
#contents .inner section.faq .image-box img.q09{
width: 70%;
margin: 0 auto;
}


/*--------------------------
bottom
---------------------------*/
#bottom{
width: 100%;
}
#bottom .inner{
max-width: 960px;
width: 90%;
margin: 0 auto;
padding: 24px 0 40px;
}
#bottom .inner .message{
background: none;
aspect-ratio: auto;
display: block;
}
#bottom .inner .message .content{
width: 90%;
margin: 0 auto;
}

#bottom .inner .message .content img.mes{
height: 5vw;
}
#bottom .inner .message .content img.ttl{
height: 12vw;
margin: 16px 0;
}
#bottom .inner .message .content p{
font-size: 90%;
}

#bottom .inner .message .content img.sato{
width: 100%;
margin: 24px 0 0px 0;
}

#bottom .inner .message .content img.name{
height: 32px;
margin: 24px 0 16px 0;
}
#bottom .inner .message .content span{
font-size: 80%;
}


#bottom .inner .info{
margin: 80px auto 40px;
width: 100%;
}
#bottom .inner .info p{
font-size: 60%;
margin: 4px 0 8px;
}
#bottom .inner .info p span{
overflow-wrap: break-word;
word-break: break-word;
width: calc(100% - 2rem);
}
#bottom .inner .info p span.kome{
width: 2rem;
font-size: 30%;
}

}