@charset "UTF-8";
/* CSS Document */

/*==================================================================

STYLE

==================================================================*/
@media screen and (min-width:1024px) {
.smp{
display:none;
}
p{
font-size:14px;
line-height:1.5em;
text-align:justify;
}
.floating_smp{
display:none;
}
.flow-navi__wrapper{
display:none;
}
.floating{
position:fixed;
height:auto;
top:auto;
right:0.5%;
bottom:10%;
left:auto;
z-index:1000;
}
.floating ol{
}
.floating ol li{
width:100px;
margin:0 0 6px 0;
}
img.grow{
-webkit-transition:0.2s ease-in-out;
-moz-transition:0.2s ease-in-out;
-ms-transition:0.2s ease-in-out;
-o-transition:0.2s ease-in-out;
transition:0.2s ease-in-out;
}
img.grow:hover{
-webkit-transform:scale(1.1,1.1);
-moz-transform:scale(1.1,1.1);
-ms-transform:scale(1.1,1.1);
-o-transform:scale(1.1,1.1);
transform:scale(1.1,1.1);
}
header ol{
width:400px;
position:fixed;
top:top;
right:0;
bottom:auto;
left:auto;
z-index:2000;
}
header ol li{
width:48%;
margin:0 1%;
float:left;
}
}
@media only screen and (min-width:768px) and (max-width:1023px) {
.smp{
display:none;
}
.pc{
display:none;
}
.tablet{
display:block;
}
p{
font-size:13px;
line-height:1.5em;
text-align:justify;
}
.floating_smp{
display:none;
}
.flow-navi__wrapper{
display:none;
}
.floating{
position:fixed;
height:auto;
top:auto;
right:0.5%;
bottom:3%;
left:auto;
z-index:1000;
}
.floating ol{
}
.floating ol li{
width:100px;
margin:0 0 10px 0;
}
img.grow{
-webkit-transition:0.2s ease-in-out;
-moz-transition:0.2s ease-in-out;
-ms-transition:0.2s ease-in-out;
-o-transition:0.2s ease-in-out;
transition:0.2s ease-in-out;
}
img.grow:hover{
-webkit-transform:scale(1.1,1.1);
-moz-transform:scale(1.1,1.1);
-ms-transform:scale(1.1,1.1);
-o-transform:scale(1.1,1.1);
transform:scale(1.1,1.1);
}
header ol{
width:38%;
position:fixed;
top:top;
right:0;
bottom:auto;
left:auto;
z-index:2000;
}
header ol li{
width:48%;
margin:0 1%;
float:left;
}
}
@media only screen and (min-width:320px) and (max-width:767px) {
.pc{
display:none;
}
p{
font-size:14px;
line-height:1.5em;
text-align:justify;
}
.flow-navi__wrapper{
display:none;
}
.floating{
display:none;
}
.floating_smp{
position:fixed;
width:100%;
height:auto;
top:auto;
right:0;
bottom:0;
left:0;
z-index:1000;
}
.floating_smp ol{
}
.floating_smp ol li{
width:50%;
margin:0;
float:left;
}
header ol{
display:none;
}
}









/* ==================================================

INDEX_AREA

================================================== */
@media screen and (min-width:1024px) {
#header_area{
}
#header_area h1{
width:30%;
height:auto;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
z-index:1000;
}
}
@media only screen and (min-width:768px) and (max-width:1023px) {
#header_area{
}
#header_area h1{
width:40%;
height:auto;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
z-index:1000;
}
}
@media only screen and (min-width:320px) and (max-width:767px) {
#header_area{
}
#header_area h1{
width:60%;
height:auto;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
z-index:1000;
}
}










/* ==================================================

ABOUT_AREA

================================================== */
@media screen and (min-width:1024px) {
.about_area{
width:1000px;
margin:0 auto;
padding:100px 0;
}
.about_area p{
font-size:16px;
line-height:1.8em;
text-align:center;
}





}
@media only screen and (min-width:768px) and (max-width:1023px) {
.about_area{
width:96%;
margin:0 auto;
padding:80px 0;
}
.about_area p{
font-size:15px;
line-height:1.6em;
text-align:left;
}




}
@media only screen and (min-width:320px) and (max-width:767px) {
.about_area{
width:90%;
margin:0 auto;
padding:50px 0;
}
.about_area p{
font-size:14px;
line-height:1.35em;
text-align:left;
}




}









/* ==================================================

CONTACT_AREA

================================================== */
@media screen and (min-width:1024px) {
.contact_area{
width:100%;
margin:0 auto;
padding:60px 0;
background:#CAD800;
color:#FFF;
text-align:center;
}
.contact_area h4{
font-size:18px;
text-shadow:2px 1px 0 #98A200;
}
.contact_area div{
width:300px;
margin:15px auto 0;
}
.contact_area p{
font-size:15px;
text-align:center;
margin-top:1.5em;
}
.contact_area p span{
border-bottom:1px solid #FFF;
padding-bottom:0.1em;
}





}
@media only screen and (min-width:768px) and (max-width:1023px) {
.contact_area{
width:100%;
margin:0 auto;
padding:50px 0;
background:#CAD800;
color:#FFF;
text-align:center;
}
.contact_area h4{
font-size:18px;
text-shadow:2px 1px 0 #98A200;
}
.contact_area div{
width:40%;
margin:15px auto 0;
}
.contact_area p{
font-size:15px;
text-align:center;
margin-top:1.5em;
}
.contact_area p span{
border-bottom:1px solid #FFF;
padding-bottom:0.1em;
}




}
@media only screen and (min-width:320px) and (max-width:767px) {
.contact_area{
width:100%;
margin:0 auto;
padding:50px 0;
background:#CAD800;
color:#FFF;
text-align:center;
}
.contact_area h4{
font-size:18px;
text-shadow:2px 1px 0 #98A200;
}
.contact_area div{
width:70%;
margin:15px auto 0;
}
.contact_area p{
font-size:15px;
text-align:center;
margin-top:1.5em;
line-height:1.6em;
}
.contact_area p span{
border-bottom:1px solid #FFF;
padding-bottom:0em;
}




}









/* ==================================================

MOVIE_AREA

================================================== */
@media screen and (min-width:1024px) {
.movie_area{
width:1000px;
margin:0 auto;
padding:100px 0;
}
.movie-wrap{
position:relative;
padding-bottom:56.25%;
height:0;
overflow:hidden;
}
.movie-wrap iframe{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}






}
@media only screen and (min-width:768px) and (max-width:1023px) {
.movie_area{
width:96%;
margin:0 auto;
padding:80px 0;
}
.movie-wrap{
position:relative;
padding-bottom:56.25%;
height:0;
overflow:hidden;
}
.movie-wrap iframe{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}




}
@media only screen and (min-width:320px) and (max-width:767px) {
.movie_area{
width:90%;
margin:0 auto;
padding:50px 0;
}
.movie-wrap{
position:relative;
padding-bottom:56.25%;
height:0;
overflow:hidden;
}
.movie-wrap iframe{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}




}









/* ==================================================

IEMA_AREA

================================================== */
@media screen and (min-width:1024px) {
.item_bg{
background:#E9E0D6;
-webkit-animation:colour 10s linear infinite;
-moz-animation:colour 10s linear infinite;
}
@-webkit-keyframes colour{
0%{
background:#E9E0D6;
}
40%{
background:#E0D9D9;
}
80%{
background:#D1C6C6;
}
100%{
background:#E9E0D6;
}
}
.item_area{
width:1000px;
margin:0 auto;
padding:100px 0;
}
.item_area h3{
width:635px;
margin:auto;
}
.item_area h2{
font-size:20px;
text-align:center;
margin:1.5em auto;
}
.item_area ul{
}
.item_area ul li.item01{
width:30%;
background:#CAD800;
margin:20px 1.5%;
float:left;
}
.item_area ul li.item02{
width:30%;
background:#EA6366;
margin:20px 1.5%;
float:left;
}
.item_area ul li.item03{
width:30%;
background:#7CC9CB;
margin:20px 1.5%;
float:left;
}
.item_area ul li.item04{
width:30%;
background:#FFDD1E;
margin:20px 1.5%;
float:left;
}
.item_area ul li div{
padding:5%;
}
.item_area ul li div img{
border-radius:10%;
}
.item_area ul li h4{
font-size:22px;
text-align:center;
margin:0.3em auto 0.7em;
}
.item_area ul li h5{
width:70%;
margin:0 auto 5%;
}
.item_area h6{
width:300px;
margin:50px auto 0;
}





}
@media only screen and (min-width:768px) and (max-width:1023px) {
.item_bg{
background:#E9E0D6;
-webkit-animation:colour 10s linear infinite;
-moz-animation:colour 10s linear infinite;
}
@-webkit-keyframes colour{
0%{
background:#E9E0D6;
}
40%{
background:#E0D9D9;
}
80%{
background:#D1C6C6;
}
100%{
background:#E9E0D6;
}
}
.item_area{
width:100%;
margin:0 auto;
padding:80px 0;
}
.item_area h3{
width:60%;
margin:auto;
}
.item_area h2{
font-size:20px;
text-align:center;
margin:1.5em auto;
}
.item_area ul{
}
.item_area ul li.item01{
width:30%;
background:#CAD800;
margin:20px 1.5%;
float:left;
}
.item_area ul li.item02{
width:30%;
background:#EA6366;
margin:20px 1.5%;
float:left;
}
.item_area ul li.item03{
width:30%;
background:#7CC9CB;
margin:20px 1.5%;
float:left;
}
.item_area ul li.item04{
width:30%;
background:#FFDD1E;
margin:20px 1.5%;
float:left;
}
.item_area ul li div{
padding:5%;
}
.item_area ul li div img{
border-radius:10%;
}
.item_area ul li h4{
font-size:20px;
text-align:center;
margin:0.3em auto 0.7em;
}
.item_area ul li h5{
width:80%;
margin:0 auto 5%;
}
.item_area h6{
width:300px;
margin:50px auto 0;
}




}
@media only screen and (min-width:320px) and (max-width:767px) {
.item_bg{
background:#E9E0D6;
-webkit-animation:colour 10s linear infinite;
-moz-animation:colour 10s linear infinite;
}
@-webkit-keyframes colour{
0%{
background:#E9E0D6;
}
40%{
background:#E0D9D9;
}
80%{
background:#D1C6C6;
}
100%{
background:#E9E0D6;
}
}
.item_area{
width:100%;
margin:0 auto;
padding:80px 0;
}
.item_area h3{
width:90%;
margin:auto;
}
.item_area h2{
font-size:18px;
text-align:center;
margin:1.5em auto;
}
.item_area ul{
}
.item_area ul li.item01{
width:46%;
background:#CAD800;
margin:10px 2%;
float:left;
}
.item_area ul li.item02{
width:46%;
background:#EA6366;
margin:10px 2%;
float:left;
}
.item_area ul li.item03{
width:46%;
background:#7CC9CB;
margin:10px 2%;
float:left;
}
.item_area ul li.item04{
width:46%;
background:#FFDD1E;
margin:10px 2%;
float:left;
}
.item_area ul li div{
padding:5%;
}
.item_area ul li div img{
border-radius:10%;
}
.item_area ul li h4{
font-size:18px;
text-align:center;
margin:0.3em auto 0.7em;
}
.item_area ul li h5{
width:80%;
margin:0 auto 5%;
}
.item_area h6{
width:60%;
margin:20px auto 0;
}




}









/*==================================================================

OUTLINE_AREA

==================================================================*/
@media screen and (min-width:1024px) {
.outline_area{
width:1000px;
margin:100px auto;
padding:0;
}
.outline_area h3{
font-size:32px;
font-weight:900;
text-align:center;
letter-spacing:0.1em;
width:8em;
margin:0 auto 50px;
padding:0.7em 1em;
background:#7CC9CB;
color:#FFF;
}
.outline_area table{
margin:0px auto;
width:100%;
border-collapse:separate;
border-spacing:2px;
}
.outline_area table th{
border:solid 2px #7CC9CB;
color:#7CC9CB;
padding:1.2em 1em;
width:20%;
font-size:15px;
font-weight:700;
letter-spacing:0.2em;
text-align:right;
vertical-align:top;
}
.outline_area table td{
border:solid 2px #7CC9CB;
color:#000;
padding:1.2em 1em;
font-size:15px;
font-weight:500;
line-height:1.5em;
word-spacing:0.5em;
}
.outline_area h6{
width:30%;
margin:30px auto 0;
}





}
@media only screen and (min-width:768px) and (max-width:1023px) {
.outline_area{
width:98%;
margin:80px auto;
padding:0;
}
.outline_area h3{
font-size:26px;
font-weight:900;
text-align:center;
letter-spacing:0.1em;
width:8em;
margin:0 auto 50px;
padding:0.7em 1em;
background:#7CC9CB;
color:#FFF;
}
.outline_area table{
margin:0px auto;
width:100%;
border-collapse:separate;
border-spacing:2px;
}
.outline_area table th{
border:solid 2px #7CC9CB;
color:#7CC9CB;
padding:1.2em 1em;
width:20%;
font-size:13px;
font-weight:700;
letter-spacing:0.2em;
text-align:right;
vertical-align:top;
}
.outline_area table td{
border:solid 2px #7CC9CB;
color:#000;
padding:1.2em 1em;
font-size:13px;
font-weight:500;
line-height:1.5em;
word-spacing:0.5em;
}
.outline_area h6{
width:30%;
margin:30px auto 0;
}







}
@media only screen and (min-width:320px) and (max-width:767px) {
.outline_area{
width:98%;
margin:60px auto;
padding:0;
}
.outline_area h3{
font-size:24px;
font-weight:900;
text-align:center;
letter-spacing:0.1em;
width:8em;
margin:0 auto 50px;
padding:0.7em 1em;
background:#7CC9CB;
color:#FFF;
}
.outline_area table{
margin:0px auto;
width:90%;
border-collapse:separate;
border-spacing:2px;
}
.outline_area table tr{
display:block;
}
.outline_area table th{
border:solid 3px #7CC9CB;
color:#7CC9CB;
padding:1.2em 1em;
display:block;
width: 100%;
font-size:15px;
font-weight:700;
letter-spacing:0.2em;
text-align:center;
vertical-align:top;
}
.outline_area table td{
color:#000;
background:rgba(124,201,203,.35);
padding:1.2em 1em;
font-size:15px;
font-weight:500;
line-height:1.5em;
word-spacing:0.5em;
display:block;
}
.outline_area h6{
width:70%;
margin:30px auto 0;
}






}











/* ==================================================

XXX_AREA

================================================== */
@media screen and (min-width:1024px) {
.xxx_area{
width:1000px;
margin:0 auto;
padding:100px 0;
}





}
@media only screen and (min-width:768px) and (max-width:1023px) {
.xxx_area{
width:96%;
margin:0 auto;
padding:80px 0;
}




}
@media only screen and (min-width:320px) and (max-width:767px) {
.xxx_area{
width:90%;
margin:0 auto;
padding:50px 0;
}




}