@charset "UTF-8";
/*===========
body
============*/
@media screen and (orientation: landscape) {/* 横向きの場合のスタイル*/}
@media screen and (orientation: portrait) {/* 縦向きの場合のスタイル */}

/* html/body
------------------------------------------------- */
html{width: 100%;font-size: 62.5%;-webkit-font-smoothing: antialiased;}

@media only screen and (max-width:750px){
html {overflow-x: hidden;}
}
body {
font-family: "Noto Sans JP", sans-serif;
font-optical-sizing: auto;
font-weight: 500;
font-style: normal;
font-size: 18px;line-height: 1.8;
position: relative;
width: 100%;
color: #000;-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;overflow-x: hidden;position: relative;transition: 0.4s;overflow-x: hidden;box-sizing:border-box;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;-o-box-sizing: border-box;text-size-adjust: 100%;-webkit-text-size-adjust: 100%;/*Chrome,Safari*/-ms-text-size-adjust: 100%;/*EgdeMobile*/-moz-text-size-adjust: 100%;/*firefox*/
background: #0068b7;
}
@media screen and (max-width: 550px) {/*スマホのスタイル*/
body {font-size: 14px;font-size: 1.4rem;}
}
/*STYLE
------------------------------------------------- */
.justify{ 
text-align:justify;
word-break:break-all; 
text-justify:inter-ideograph;
text-justify:inter-character;
word-wrap:break-word;
overflow-wrap:break-word;
text-align-last: left;
}

#wrapper {position: relative;max-width: 100%;margin: auto;background: #fff;width:860px;margin: auto;box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;}
@media screen and (max-width:640px){/*スマホ設定*/
#wrapper {width: 100%}
}

/*header*/
#header{position: relative;}
#header .logo{width: 11%; position: absolute;left: 5%;top: 3%}
#header img{width: 100%;height: auto}

.contents{padding: 0 40px;position: relative}
.contents img{width: 100%;height: auto}
.contents .illa{position: relative;width: 40%;margin:auto}
.contents h2{position: relative;margin-top:60px}
.contents h2 img{margin-top:30px;}
.contents .oubo{margin-top:60px}
.contents.bg{background:#d8effc;margin-top:60px}
.contents .box{width: 97%;margin: auto;padding:60px 0}
.contents li{margin-bottom: 30px;padding-bottom: 30px}
.contents li:last-child{margin-bottom: 0px;padding-bottom: 0px}
.contents .waku{background: #fff;border-radius: 15px;padding: 70px 30px 30px;position: relative;margin-top: 70px}
.contents .waku h3{position:absolute;top: -70px;left: 0;right: 0;margin: auto}
.contents .line{border-bottom: 2px dotted #00a7ea;padding-bottom: 30px;margin-bottom: 30px}

@media screen and (max-width:767px){/*スマホ設定*/
.contents{padding: 0 20px;}
.contents .illa{width: 52%;margin-top: 12px}
.contents h2{margin-top:30px}
.contents h2 img{margin-top:20px;}
.contents .box{padding:30px 0}
.contents .waku{padding: 50px 30px 30px;margin-top: 20px}
.contents .waku h3{top: -30px;}
.col40,
.col30,
.flex .col2:nth-child(1){width: 100%;order: 2;}
.col60,
.col70,
.flex .col2:nth-child(2){width: 100%;order: 1;margin-bottom: 20px}
}
.coution{padding: 30px 30px 0px}
.coution p {margin-left: 1em;text-indent: -1em;font-size: 1.3rem}
#footer{padding: 20px 0 0;font-size: 1rem;}
#footer .address{background: #00a7ea;color: #fff;padding: 12px 0;margin-top: 20px; text-align: center}
@media screen and (max-width:767px){/*スマホ設定*/
.coution p {font-size: 1.1rem}
#footer{font-size: 1rem;}
}


/*===========
inview
===========*/
.fadeIn_up {
  opacity: 0;
  transform: translate(0, 10%);
  transition: 2s;
}
.fadeIn_up.is-show {
  transform: translate(0, 0);
  opacity: 1;
}