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

/* NAV
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

.inner { width: 980px; margin: 0 auto;}
.inner:after { content: ""; clear: both; display: block;}
 
/* header */
.tophead{ position: relative; width: 100%; height: 50vw; background: url("../images/top-img2.jpg") center center no-repeat; background-size: cover;}
.contshead{ position: relative; width: 100%; height: 30vw; max-height: 300px; background: url("../images/top-img3.jpg") center center no-repeat; background-size: cover; overflow: hidden;}
.topnav { position: absolute; width: 100%; top: 0; left: 0; display: flex; justify-content: space-between; align-items: flex-start; z-index: 999;}
.logo { max-width: 180px; width: 20%; margin-left:5vw;}
.navbtn{ max-width: 500px; width: 70%; display: flex; justify-content: space-between;}
.navabout{ width: 42.85%; background-color: #fff;}
.navtel{ width: 57.15%; background-color: #007CA4;}
.navabout a{ display: block; width: 100%;}
.navtel a{ display: block; width: 100%;}
.topimg1{ position: absolute; max-width: 480px; width: 35vw; top: 50%; left: 50%; transform: translate(-50%,-50%);}
.contsimg1{ position: absolute; max-width: 240px; width: 35vw; top: 50%; left: 50%; transform: translate(-50%,-50%);}
@media screen and (max-width: 1000px) {
  .topimg1{ transform: translate(-50%,-40%);}
  .contsimg1{ transform: translate(-50%,-30%); width: 160px;}
}
@media screen and (max-width: 800px) {
  .tophead{ height: 80vw;}
  .contshead{ height: 40vw;}
  .topimg1{ width: 60vw; transform: translate(-50%,-50%);}
}	
@media screen and (max-width: 520px) {
  .tophead{ height: auto; background: none;}
  .contshead{ height: auto; max-height: none; background: none;}
  .topnav { position: relative; align-items: stretch;}
  .logo { max-width: none; width: 35%; margin-left:0;}
  .navbtn{ max-width: none; width: 65%; flex-direction: column;}
  .navabout{ width: 100%; height: 50%;}
  .navtel{ width: 100%; height: 50%;}
  .navabout a{ width: 80%; height: 100%; margin: 0 auto;}
  .navtel a{ width: 100%; height: 100%;}
  .topimg1{ position: relative; max-width: none; width: 100vw; height: 100vw; top: 0; left: 0; transform: translate(0,0);  background: url("../images/top-img2s.jpg") center center no-repeat; background-size: cover;}
  .topimg2{ position: absolute; max-width: 480px; width: 90vw; top: 50%; left: 50%; transform: translate(-50%,-50%);}
  .contsimg1{ position: relative; max-width: none; width: 100vw; height: auto; top: 0; left: 0; transform: translate(0,0);  background: url("../images/top-img3.jpg") center center no-repeat; background-size: cover;}
  .contsimg2{ max-width: 160px; width: 90vw; margin: 0 auto; padding: 10px;}
}	


.wrap{ padding: 100px 0;}
.wrap_m50{ padding: 50px 0;}
.back_lb{ background-color: #EDF5F8;}
.wrap1{ width: 80%; max-width: 920px; margin: 0 auto;}
.wrap2{ width: 80%; max-width: 1500px; margin: 0 auto;}
.wrap3{ width: 80%; max-width: 640px; margin: 0 auto;}
@media screen and (max-width: 520px) {
  .wrap{ padding: 50px 0;}
  .wrap2{ width: 95%;}
}



.title11{ max-width: 338px; width: 60%; margin: 0 auto 80px auto;}
.syoujyoubox{ display: block; background-color: #23B6E5; border-radius: 16px; margin-bottom: 50px;}
.title12{ font-size: 2.4rem; line-height: 1.6; color: #23B6E5; font-weight: 700; text-align: center; margin-bottom: 20px;}
.title122{ font-size: 2.4rem; line-height: 1.6; color: #23B6E5; font-weight: 700; text-align: center; margin-bottom: 40px;}
.title13{ font-weight: 700; text-align: center; margin-bottom: 16px;}
.btn1{ display: block; max-width: 500px; width: 100%; margin: 50px auto 0 auto; padding: 10px; text-align: center; background-color: #23B6E5; color: #fff; border-radius: 50px; transition: 0.5s; }
.btn1:hover{ background-color: #22E5C3; color: #fff;}
.contstext{ margin-bottom: 80px;}

@media screen and (max-width: 520px) {
  .title11{ width: 90%; margin: 0 auto 50px auto;}
  .syoujyoubox{ margin-bottom: 20px;}
  .title12{ font-size: 2.0rem; color: #23B6E5; font-weight: 700; text-align: left; margin-bottom: 20px;}
  .toptext p{ margin-bottom: 10px;}
  .contstext p{ margin-bottom: 10px;}
  .btn1{ margin: 30px auto 0 auto;}
}


.bg-shop{ background: url("../images/back-yoyaku1.jpg") center bottom no-repeat; background-size: cover;}
.title21{ max-width: 338px; width: 60%; margin: 0 auto 50px auto;}
.shop-text{ text-align: center; font-size: 2.2rem; line-height: 1.3; color: #fff;}
.yoyakubox{ /*display: flex; justify-content: center;*/ width: 48%; margin: 50px auto 50px auto;}
.yoyakubox div{ width: 100%;/*width: 48%;*/}
.yoyakubox div img{ width: 100%;}
.yoyakutel{ background-color: #23B6E5; border-radius: 16px;}
.yoyakuline{ background-color: #fff; border-radius: 16px; border: 2px solid #06c655; margin-top: 20px;}
.table1{ border-top: 1px solid #23B6E5; width: 48%;}
.table1mrgn11{ margin: 0 auto 100px auto;}
.table1mrgn12{ margin: 0 auto;}
.table1 .noborder{ border-bottom: none;}
.table1 th{ background-color: #007CA4; color: #fff; padding: 8px 10px; border-bottom: 1px solid #23B6E5; text-align: center;}
.table1 td{ color: #fff; padding: 8px 10px; border-bottom: 1px solid #23B6E5; text-align: right;}
.table1 .comment{ font-size: 90%;}
@media screen and (max-width: 900px) {
  .yoyakubox{ width: 70%;}
  .yoyakubox div{ text-align: center;}
  .table1{ width: 70%;}
}
@media screen and (max-width: 640px) {
  .yoyakubox{ width: 100%;}
  .yoyakubox div img{ max-height: 120px;}
  .table1{ width: 100%;}
  .table1mrgn11{ margin: 0 auto 50px auto;}
}
@media screen and (max-width: 520px) {
  .title21{ width: 90%; margin: 0 auto 30px auto;}
  .shop-text{ text-align: center; font-size: 1.8rem; line-height: 1.3; color: #fff;}
  .yoyakubox{ /*display: flex; justify-content: center; */margin: 30px 0 30px 0;}
}
@media screen and (max-width: 460px) {
  .table1 th{ font-size: 1.4rem;}
  .table1 td{ font-size: 1.4rem;}
  .table1 .comment{ font-size: 1.2rem;}
}


.newsboxflex{ display: flex; justify-content: space-between; flex-wrap: wrap;}
.title31{ max-width: 120px; width: 20%;}
.title31 picture{ display: block;}
.newsbox{ width: 80%; max-height: 800px; overflow-y: scroll; padding-right: 1em;}
/*.newsbox{ width: 80%;}*/
.newsbox li{ display: flex; justify-content: space-between; flex-wrap: wrap; background-color: #EDF5F8; padding: 20px; margin-bottom: 10px;}
/*.newsdate{ width: 100px; font-size: 1.5rem; font-family: Arial, Helvetica, "sans-serif";}
.newstext{ width: calc(100% - 140px); color: #23B6E5;}*/
@media screen and (max-width: 900px) {
  .newsboxflex{ display: block; justify-content: space-between; flex-wrap: wrap;}
  .title31{ max-width: 338px; width: 60%; margin: 0 auto 50px auto;}
  .newsbox{ width: 100%;}
/*  .newsdate{ width: 100px; font-size: 1.5rem; font-family: Arial, Helvetica, "sans-serif";}
  .newstext{ width: calc(100% - 140px); color: #23B6E5;}*/
}
@media screen and (max-width: 520px) {
  .title31{ width: 90%; margin: 0 auto 30px auto;}
  .newsbox{ padding-right: 10px;}
/*  .newsdate{ width: 100px; font-size: 1.5rem; font-family: Arial, Helvetica, "sans-serif";}
  .newstext{ width: calc(100% - 100px); color: #23B6E5;}*/
}


.voicebox{ display: flex; justify-content: space-between; flex-wrap: wrap;}
.voicebox li{ width: 22%; background-color: #fff; border-radius: 20px; padding: 2.5%;}
.voiceimg{ max-width: 140px; width: 100%; margin: 0 auto 10% auto;}
@media screen and (max-width: 1023px) {
  .voicebox li{ width: 100%; display: flex; justify-content: space-between;}
  .voicebox li:nth-child(2n){ flex-direction: row-reverse;}
  .voicebox li:nth-child(-n+3){ margin-bottom: 30px;}
  .voiceimg{ width: 140px; margin: 0 0 0 0;}
  .voicebox li p{ width: calc(100% - 180px);}
}
@media screen and (max-width: 520px) {
  .voicebox li{ border-radius: 16px; padding: 16px;}
  .voicebox li:nth-child(-n+3){ margin-bottom: 20px;}
  .voiceimg{ width: 100px; margin: 0 0 0 0;}
  .voicebox li p{ width: calc(100% - 120px);}
}



.footerinsta{  background-color: #3A3A3A;}
.footinstabox{ max-width: 400px; width: 100%; margin: 0 auto; padding: 0 0; display: flex; justify-content: flex-start;}


.footer{ border-top: 20px solid #23B6E5; background-color: #3A3A3A;}
.footbox{ max-width: 400px; width: 100%; margin: 0 auto; padding: 0 0; display: flex; justify-content: space-between;}
.footlogo{ width: 114px;}/*.footlogo{ width: 28.5%;}*/
.address{ width: calc(100% - 114px); padding: 10px 0 0 16px; font-size: 1.3rem; color: #fff;}
.copyright{ padding: 20px; text-align: center; font-size: 1.2rem; color: #23B6E5;}




.title14{ display: flex; justify-content: center;}
.title14 div{ position: relative; font-size: 2.4rem; line-height: 1.6; color: #3A3A3A; font-weight: 700; text-align: center; margin-bottom: 50px; padding: 0 20px; }
.title14 div::before{ position: absolute; content: ""; left: 0; top: 0;  width: 10px; height: 100%; border-left:5px solid #23B6E5; border-top:3px solid #23B6E5; border-bottom:3px solid #23B6E5;}
.title14 div::after{ position: absolute; content: ""; right: 0; top: 0;  width: 10px; height: 100%; border-right:5px solid #23B6E5; border-top:3px solid #23B6E5; border-bottom:3px solid #23B6E5;}
@media screen and (max-width: 520px) {
  .title14 div{ font-size: 2.0rem; margin-bottom: 50px; padding: 0 20px; }
}

.contsbox1{ display: flex; justify-content: center;}
.listcircle li{ position: relative; padding-left: 2em;}
.listcircle li::before{ position: absolute; left: 0; top: 0; content: "●"; font-weight: 700; color: #23B6E5;}


.title41{ max-width: 420px; width: 100%; margin: 0 auto 50px auto;}
.matsuura{ max-width: 240px; width: 80%; margin: 0 auto 40px auto;}
.matsuura p{ text-align: center; font-size: 1.3rem;}
.backcircle{ position: relative; padding: 50px 0;}
.backcircle2{ display: block; position: absolute; content: ""; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 150px; height: 150px; border: 16px solid #85E2FF; border-radius: 50%;}
.backcircle p{ position: relative; z-index: 2; color: #006BB0; line-height: 2.0;}
@media screen and (max-width: 520px) {
  .matsuura{ max-width: 200px; width: 80%; margin: 0 auto 10px auto;}
  .backcircle{ position: relative; padding: 24px 0;}
  .backcircle p{ line-height: 1.6;}
}

.nagare{ margin-bottom: 1em;}
.nagare li{ position: relative; padding-left: 2em;}
.nagare li::before{ position: absolute; left: 0; top: 0; content: "●"; font-weight: 700; color: #23B6E5;}

.nagarecomment{ padding-bottom: 50px;}
.nagarecomment li{ position: relative; padding-left: 3em; font-size: 90%;}
.nagarecomment li::before{ position: absolute; left: 1em; top: 0; content: "※"; color: #23B6E5;}