@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 {
	list-style-type: disc;
	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: #403E3D;
font-family: hiragino-kaku-gothic-pron, sans-serif;
font-weight: 300;
font-style: normal;
}
#wrap {
width:100%;
margin: 0 auto;
margin-bottom:0px;
text-align:left;
background: #E2F4FD;
}

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

/*--------------------------
	top
---------------------------*/
#top{
position: absolute;
top: 24px;
right: 24px;
padding: 10px 20px;
}
#top .flex{
width: 90%;
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
align-items: flex-start;
text-align:right;
margin: 0 0 0 auto;
}

#top .flex p.plan{
width: auto;
color: #fff;
font-size: 1.1rem;
}
#top .flex span.ad{
display: inline-block;
border: solid 1px #fff;
width: auto;
color: #fff;
text-align: center;
font-size: 1.4rem;
padding: 2px 16px;
margin-left: 8px;
}
#top .flex p.with{
width: auto;
color: #fff;
font-size: 1rem;
margin-top: 8px;
}


/*--------------------------
main
---------------------------*/
#main{
position: relative;
background-image: url(../img/main_image_pc.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
width: 100%;
aspect-ratio: 10/4.1;
}
#main img.word{
position: absolute;
width: 30%;
top: 50%;
right: 16%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
}

/*--------------------------
contents
---------------------------*/
#contents{
width: 100%;
}
#contents .inner{
max-width: 1000px;
width: 90%;
margin: 0 auto;
padding: 140px 0;
}
#contents .white{
background: #fff;
}
#contents .blue{
background: #E2F4FD;
}

#contents .inner h3{
font-family: kinuta-maruminold-stdn, serif;
font-weight: bold;
font-style: normal;
font-size: 3rem;
text-align: center;
margin-bottom: 40px;
}
#contents .inner p{
text-align: center;
font-weight: bold;
font-size: 1.1rem;
line-height: 2.4;
}
#contents .inner p span{
font-size: 60%;
}
#contents .inner img.icon{
width: 300px;
margin: 80px auto 0;
display: block;
}
#contents .inner img.graph{
max-width: 550px;
width: 90%;
margin: 80px auto 0;
display: block;
}

#contents .image{
position: relative;
background-image: url(../img/secA_image_pc.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
width: 100%;
aspect-ratio: 10/4.1;
}
#contents .image img.word{
position: absolute;
width: 39%;
top: 50%;
left: 12%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
}
#contents .image.sec{
background: none;
height: auto;
}
#contents .image img{
width: 100%;
}

/*--------------------------
bottom
---------------------------*/
#bottom{
width: 100%;
}
#bottom .inner{
max-width: 1200px;
width: 90%;
background: url(../img/bg_watashi_pc.png);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
margin: 80px auto;
padding: 80px 0;
aspect-ratio: 18/2;
}

#bottom .inner .watashi{
width: 90%;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
margin: 0 auto;
}
#bottom .inner .watashi h4{
width: 40%;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
#bottom .inner .watashi h4 img.icon{
width: 80px;
margin-right: 16px;
}
#bottom .inner .watashi h4 p{
width: auto;
font-family: kinuta-maruminold-stdn, serif;
font-weight: bold;
font-style: normal;
color: #54c25c;
font-size: 2rem;
}
#bottom .inner .watashi p{
width: auto;
text-align: left;
font-weight: bold;
font-size: 1.1rem;
line-height: 2.4;
margin-left: 5%;
}

#bottom a{
width: 100%;
background: #54c25c;
display: block;
margin-bottom: 80px;
padding: 24px 0;
transition: .6s;
}
#bottom a:hover{
opacity: .6;
transition: .6s;
}
#bottom a p{
margin: 0 auto;
font-size: 1.6rem;
color: #fff;
text-align: center;
letter-spacing: .1em;
}
#bottom a p::after{
content: "▶︎";
display: inline-block;
margin-left: 16px;
}


.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){
#mv_area .mv_text img.icon{
display: block;
width: 40%;
position: absolute;
bottom: 13%;
left: 57%;
}
}
@media screen and (max-width:750px){

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

body {
color: #000;
}
/*--------------------------
	top
---------------------------*/
#top{
top: 8px;
right: 8px;
padding: 0;
}

#top .flex p.plan{
font-size: 60%;
}
#top .flex span.ad{
font-size: .9rem;
padding: 1px 8px;
}
#top .flex p.with{
font-size: 60%;
margin-top: 4px;
}


/*--------------------------
main
---------------------------*/
#main{
background-image: url(../img/main_image_sp.jpg);
aspect-ratio: 10/5;
}
#main img.word{
width: 40%;
top: 56%;
right: 11%;
}

/*--------------------------
contents
---------------------------*/
#contents .inner{
padding: 60px 0 60px;
}

#contents .inner h3{
font-size: 1.4rem;
margin-bottom: 24px;
}
#contents .inner p{
font-size: 85%;
font-weight: normal;
}
#contents .inner p span{
font-size: 60%;
}
#contents .inner img.icon{
width: 200px;
margin: 40px auto 0;
}
#contents .inner img.graph{
width: 90%;
margin: 40px auto 0;
}

#contents .image{
background-image: url(../img/secA_image_sp.jpg);
aspect-ratio: 10/5;
}
#contents .image img.word{
width: 50%;
top: 54%;
left: 8%;
}

#contents p.txt{
width: 90%;
text-align: justify;
margin: 0 auto;
line-height: 2;
}

/*--------------------------
bottom
---------------------------*/
#bottom .inner{
width: 90%;
background: url(../img/bg_watashi_sp.png) no-repeat;
background-size: contain;
margin: 40px auto;
padding: 0;
aspect-ratio: 8/10;
align-items: center;
display: flex;
}

#bottom .inner .watashi{
width: 90%;
}
#bottom .inner .watashi h4{
width: 100%;
}
#bottom .inner .watashi h4 img.icon{
width: 60px;
margin-right: 0px;
}
#bottom .inner .watashi h4 p{
width: 100%;
text-align: center;
font-size: 1.5rem;
}
#bottom .inner .watashi p{
width: 90%;
text-align: justify;
font-weight: normal;
font-size: 80%;
line-height: 2;
margin-left: 0%;
margin-top: 16px;
}

#bottom a{
margin-bottom: 60px;
padding: 24px 0;
}
#bottom a p{
font-size: 1rem;
letter-spacing:0;
}
#bottom a p::after{
margin-left: 8px;
}

}