@charset "UTF-8";
/* 日本語 */
body { overflow-x: hidden; padding: 85px 0 0; }

.anchor { display: block; position: relative; padding: 120px 0 0; margin: -120px 0 0; z-index: -999; pointer-events: none; }

@media (max-width: 768px) { .anchor { padding: 60px 0 0; margin: -60px 0 0; } }
/*max-width:768px*/
/*max-width:480px*/
.no_single { display: block; width: 100% !important; margin: 0 auto; text-align: center !important; padding: 50px 0 !important; font: 2rem/1em "Noto Sans JP", sans-serif; font-weight: 700; }

/**********************************************/
header { width: 100%; background-color: #D0F5FE; color: #fff; position: fixed; top: 0; left: 0; z-index: 888; }

h1.ttl_1 { position: absolute; left: 0; top: 0; font: 2.3rem/1em "LINE Seed JP", sans-serif; font-weight: 700; width: 545px; height: 95px; letter-spacing: 0.05em; }
h1.ttl_1 a { position: relative; display: block; display: flex; flex-direction: column; flex-wrap: wrap; justify-content: center; width: 100%; height: 100%; padding: 0 0 8px 20px; border-radius: 0 0 25px 0; background-color: #fff; border-right: 1px solid #666666; border-bottom: 1px solid #666666; }
h1.ttl_1 br { display: none; }
h1.ttl_1 .num { margin: 0 0 0 15px; font: 2.6rem/1em "Quicksand", sans-serif; font-weight: 700; letter-spacing: 0.04em; }
h1.ttl_1:before { border-radius: 0 0 25px 0; border-right: 1px solid #666666; border-bottom: 1px solid #666666; position: absolute; content: ""; width: 550px; height: 100px; left: 0; top: 0; display: block; background-color: #D0F5FE; }

.header_box { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-end; align-items: center; position: relative; z-index: 888; height: 85px; padding: 0 40px 8px 0; }
.header_box .header_nav { max-width: 680px; width: calc(100% - 560px); display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; }
.header_box .sns { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; width: 70px; margin: 10px 0 0; }
.header_box .sns a { display: block; overflow: hidden; text-indent: 100%; white-space: nowrap; }
.header_box .sns a.in { background: url("../image/instagram-icon.svg") center center no-repeat; width: 30px; height: 30px; }
.header_box .sns a.fb { background: url("../image/facebook-icon.svg") center center no-repeat; width: 17px; height: 30px; }
.header_box .menu { width: calc(100% - 90px); max-width: 580px; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-end; align-items: flex-end; }
.header_box .menu li { position: relative; padding: 0 0 0 17px; font: 2rem/1em "LINE Seed JP", sans-serif; font-weight: 700; letter-spacing: 0.1em; margin: 0 0 0 20px; }
.header_box .menu li:before { border-radius: 50%; background-color: #04DFD8; width: 8px; height: 8px; position: absolute; content: ""; display: block; left: 0; bottom: 5px; }
.header_box .menu li:first-child { margin: 0; }

/*min-width:1920px*/
@media (max-width: 1280px) { .header_box .header_nav { max-width: 680px; width: calc(100% - 560px); padding: 0 120px 0 0; justify-content: flex-end; }
  .header_box .sns { width: 100px; margin: 10px 0 0; }
  .header_box .sns a { width: 40px !important; height: 40px; }
  .header_box .menu { display: none; } }
/*max-width:1280px*/
@media (max-width: 1024px) { h1.ttl_1 { font: 2.1rem/2em "LINE Seed JP", sans-serif; font-weight: 700; width: 280px; height: 95px; letter-spacing: 0.05em; }
  h1.ttl_1 a { padding: 3px 0 0 20px; }
  h1.ttl_1 br { display: block; }
  h1.ttl_1 .num { margin: 0 0 0 10px; font: 2.4rem/1em "Quicksand", sans-serif; font-weight: 700; letter-spacing: 0.04em; }
  h1.ttl_1:before { width: 285px; }
  .header_box .header_nav { max-width: 680px; width: calc(100% - 300px); padding: 0 120px 0 0; justify-content: flex-end; }
  .header_box .sns { width: 90px; margin: 10px 0 0; }
  .header_box .sns a { width: 30px !important; }
  .header_box .sns a.fb { margin: 0 0 0 5px; }
  .header_box .menu { display: none; } }
/*max-width:1024px*/
@media (max-width: 768px) { .header_box { padding: 0 25px 5px 0; }
  .header_box .header_nav { max-width: 680px; padding: 0 25px 5px 0; width: calc(100% - 280px); } }
/*max-width:768px*/
@media (max-width: 480px) { h1.ttl_1 { font: 2rem/2em "LINE Seed JP", sans-serif; font-weight: 700; width: 250px; }
  h1.ttl_1 a { padding: 3px 0 0 15px; }
  h1.ttl_1 .num { margin: 0 0 0 5px; font: 2.3rem/1em "Quicksand", sans-serif; font-weight: 700; }
  h1.ttl_1:before { width: 255px; }
  .header_box { padding: 0 15px 5px 0; }
  .header_box .header_nav { padding: 0; max-width: 680px; width: calc(100% - 260px); }
  .header_box .sns { width: 100px; margin: 10px 0 0; }
  .header_box .sns a { height: 45px !important; width: 45px !important; }
  .header_box .menu { display: none; } }
/*max-width:480px*/
@media (hover: hover) { h1.ttl_1 a:hover { color: #04DFD8; opacity: 0.8; }
  .header_box .sns a:hover { opacity: 0.8; transform: rotate(15deg); }
  .header_box .menu a:hover { color: #04DFD8; opacity: 0.8; } }
/**********************************************/
nav { display: block; position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: -9999; opacity: 0; visibility: hidden; }
nav .bg { position: absolute; top: 0; left: 0; z-index: 5; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.8); }
nav.active { z-index: 999; opacity: 1; visibility: visible; }

.nav_box { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); /* Safari用 */ transform: translate(-50%, -50%); width: calc(100% - 80px); max-width: 480px; height: auto; border: 3px solid #0BD99F; border-radius: 30px; background-color: #fff; z-index: 999; padding: 25px 25px 35px; }
.nav_box .close { width: fit-content; margin: 0 0 30px auto; font: 1.6rem/1em "LINE Seed JP", sans-serif; font-weight: 700; letter-spacing: 0.1em; position: relative; padding: 0 35px 0 0; }
.nav_box .close:before { position: absolute; content: "×"; top: -6px; right: 0; font: 3rem/1em "LINE Seed JP", sans-serif; font-weight: 700; }
.nav_box ul.nav { width: calc(100% - 80px); margin: 0 auto; max-width: 320px; }
.nav_box ul.nav li { font: 2rem/1em "LINE Seed JP", sans-serif; font-weight: 700; letter-spacing: 0.1em; position: relative; padding: 0 0 0 20px; margin: 0 0 30px; }
.nav_box ul.nav li:before { position: absolute; content: ""; display: block; width: 8px; height: 8px; background-color: #0BD99F; left: 0; bottom: 6px; border-radius: 50%; }
.nav_box dl { border-top: #C1C4C3 1px solid; padding: 30px 0 0; text-align: center; }
.nav_box dt { font: 1.8rem/1em "LINE Seed JP", sans-serif; font-weight: 700; letter-spacing: 0.05em; margin-bottom: 20px; }
.nav_box dd { font: 2rem/1em "LINE Seed JP", sans-serif; font-weight: 400; letter-spacing: 0.1em; }
.nav_box dd a { font: 2.9rem/1em "Nunito", sans-serif; font-weight: 700; letter-spacing: 0em; position: relative; display: block; width: fit-content; margin: 20px auto 0; padding: 0 0 0 22px; }
.nav_box dd a:before { position: absolute; content: ""; display: block; width: 16px; height: 16px; background: url("../image/side_tel.svg") center center no-repeat; background-size: contain; left: 0; top: 6px; }

@media (hover: hover) { .nav_box .close:hover { cursor: pointer; color: #96DEEC; }
  .nav_box .close:hover:before { color: #96DEEC; } }
/**********************************************/
aside .side_link { z-index: 777; position: fixed; top: 140px; right: 0; }
aside .apply { position: absolute; top: 0; right: 0; width: 66px; height: 170px; background-color: #FD8C4E; border-radius: 25px 0 0 25px; border: 1px solid #666666; border-right: none; padding: 20px 0 0; margin: 0 0 10px auto; }
aside .apply p { background: url("../image/side_enter.svg") top 0 center no-repeat; width: 100%; height: 100%; margin: 0 auto; overflow: hidden; text-indent: 100%; white-space: nowrap; position: relative; }
aside .apply p:before { position: absolute; content: ""; display: block; background: url("../image/side_hand.svg") center center no-repeat; background-size: 27px; width: 100%; height: 36px; left: 0; bottom: 15px; }
aside .contact { cursor: pointer; background-color: #fff; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; border-radius: 25px 0 0 25px; border-right: none; border: 1px solid #666666; border-right: none; right: -280px; top: 180px; position: absolute; transition: .3s; width: 346px; }
aside .contact.active { right: 0; }
aside .contact > p { border-radius: 25px 0 0 25px; width: 66px; background: url("../image/side_contaxt.svg") center top 20px no-repeat #E2C8FF; position: relative; overflow: hidden; text-indent: 100%; white-space: nowrap; }
aside .contact > p:before { position: absolute; content: ""; display: block; width: 32px; height: 32px; background: url("../image/side_tel.svg") center center no-repeat #fff; border-radius: 50%; bottom: 15px; left: 17px; }
aside .contact div { width: calc(100% - 66px); padding: 20px 15px 20px 21px; border-right: 1px solid #666666; }
aside .contact div p { font: 2.4rem/1.9em "LINE Seed JP", sans-serif; font-weight: 400; letter-spacing: 0.1em; border-bottom: 1px solid #C1C4C3; padding: 0 0 3px; margin: 0 0 15px; }
aside .contact div rt { font-size: 1.2rem !important; text-align: center; letter-spacing: -0.1em; padding: 0 0 5px; }
aside .contact div a { font: 2.9rem/1em "Nunito", sans-serif; font-weight: 700; padding: 0 0 0 25px; color: #222222; background: url("../image/side_tel.svg") left top 10px no-repeat; }
aside .tel_contact { display: none; }

.toggle { display: none; }

/*min-width:1920px*/
@media (max-width: 1280px) { .toggle { display: block; position: fixed; top: 0; right: 0; background-color: #0BD99F; z-index: 888; aspect-ratio: 80/60; width: auto; height: 85px; border: 1px solid #666666; }
  .toggle span { display: block; width: 55px; height: 3px; border-radius: 3px; background-color: #000; margin: 0 auto; position: absolute; transition: 0.3s; }
  .toggle span:nth-of-type(1) { top: 30%; left: 50%; transform: translate(-50%, -50%); }
  .toggle span:nth-of-type(2) { top: 45%; left: 50%; transform: translate(-50%, -50%); }
  .toggle p { letter-spacing: 0.05em; font: 1.6rem/1em "LINE Seed JP", sans-serif; font-weight: 700; position: absolute; text-align: center; top: 60%; left: 0; width: 100%; }
  .toggle.active span:nth-of-type(1) { top: 38%; left: 50%; transform: translate(-50%, -50%) rotate(25deg); }
  .toggle.active span:nth-of-type(2) { top: 38%; left: 50%; transform: translate(-50%, -50%) rotate(-25deg); } }
/*max-width:1280px*/
@media (max-width: 1024px) { aside .apply { width: 55px; height: 145px; }
  aside .apply p { background: url("../image/side_enter.svg") top 0 right 8px no-repeat; background-size: 32px; }
  aside .apply p:before { background-size: contain; width: 100%; height: 30px; left: 0; bottom: 15px; }
  aside .contact { right: -269px; top: 155px; width: 325px; }
  aside .contact.active { right: 0; }
  aside .contact > p { width: 55px; background: url("../image/side_contaxt.svg") center top 20px no-repeat #E2C8FF; background-size: 13px; }
  aside .contact > p:before { width: 28px; height: 28px; background-size: 14px; border-radius: 50%; bottom: 15px; left: 14px; }
  aside .contact div { width: calc(100% - 55px); padding: 20px 20px 15px 21px; }
  aside .contact div p { font: 2.2rem/1.9em "LINE Seed JP", sans-serif; font-weight: 400; } }
/*max-width:1024px*/
@media (max-width: 768px) { aside { position: fixed; width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; z-index: 888; left: 0; bottom: 0; border: 1px solid #666666; }
  aside .side_link { position: relative; top: auto; bottom: auto; right: auto; width: calc(100% - 96px); display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; }
  aside .apply { border: none; position: relative; top: 0; right: 0; height: 70px; width: 48%; background-color: #FD8C4E; border-radius: 0; padding: 0; margin: 0; display: block; }
  aside .apply p { background: url("../image/sp_side_apply.svg") center bottom 20px no-repeat; background-size: auto 35px; width: 100%; height: 100%; }
  aside .apply p:before { display: none; }
  aside .contact { display: none; }
  aside .tel_contact { border-left: 1px solid #666666; height: 70px; display: block; width: 52%; background: url("../image/sp_side_contact.svg") center center no-repeat #E2C8FF; background-size: auto 35px; position: relative; overflow: hidden; text-indent: 100%; white-space: nowrap; }
  .toggle { border: none; border-left: 1px solid #666666; top: auto; bottom: auto; right: auto; height: 70px; width: 96px; position: relative; } }
/*max-width:768px*/
@media (max-width: 480px) { aside .side_link { left: 0; width: calc(100% - 80px); }
  aside .apply { height: 60px; }
  aside .apply p { background: url("../image/sp_side_apply.svg") center center no-repeat; background-size: auto 35px; }
  aside .tel_contact { height: 60px; background-size: auto 30px; }
  .toggle { top: auto; bottom: 0; height: 60px; width: 80px; }
  .toggle span { display: block; width: 40px; height: 3px; border-radius: 3px; background-color: #000; margin: 0 auto; position: absolute; transition: 0.3s; }
  .toggle span:nth-of-type(1) { top: 30%; left: 50%; transform: translate(-50%, -50%); }
  .toggle span:nth-of-type(2) { top: 45%; left: 50%; transform: translate(-50%, -50%); }
  .toggle p { letter-spacing: 0.05em; font: 1.4rem/1em "LINE Seed JP", sans-serif; font-weight: 700; position: absolute; text-align: center; top: 60%; left: 0; width: 100%; }
  .toggle.active span:nth-of-type(1) { top: 38%; left: 50%; transform: translate(-50%, -50%) rotate(25deg); }
  .toggle.active span:nth-of-type(2) { top: 38%; left: 50%; transform: translate(-50%, -50%) rotate(-25deg); } }
/*max-width:480px*/
@media (hover: hover) { aside .apply:hover { background-color: #F8C5A9; }
  aside .contact > p:hover { background-color: #F0E2FF; }
  aside .contact div a:hover { color: #96DEEC; }
  .toggle:hover { cursor: pointer; background-color: #B3FBE7; } }
/**********************************************/
.page_top { position: fixed; bottom: 20px; right: 10px; width: 60px; height: 60px; border-radius: 100%; background-color: #fff; z-index: -888; opacity: 0; pointer-events: none; cursor: pointer; transition: .3s; }
.page_top.active { z-index: 888; opacity: 1; pointer-events: all; }
.page_top p { transition: .3s; font: 1.6rem/1em "Nunito", sans-serif; font-weight: 700; text-align: center; padding: 35px 0 0; }
.page_top:before { transition: .3s; position: absolute; content: ""; display: block; background: url("../image/green_arow.svg") center top 10px no-repeat; background-size: 18px; width: 100%; height: 100%; top: 0; left: 0; }

@media (hover: hover) { .page_top:hover { cursor: pointer; }
  .page_top:hover p { color: #04DFD8; }
  .page_top:hover:before { background: url("../image/green_arow.svg") center top 8px no-repeat; background-size: 18px; } }
/*min-width:1920px*/
/*max-width:1280px*/
/*max-width:1024px*/
@media (max-width: 768px) { .page_top { bottom: 85px; } }
/*max-width:768px*/
@media (max-width: 480px) { .page_top { bottom: 75px; } }
/*max-width:480px*/
/**********************************************/
footer { background-color: #048EB0; color: #fff; padding: 150px 0 80px; margin: -55px 0 0; }

.coop, .about_contact { max-width: 1240px; width: calc(100% - 160px); margin-right: auto; margin-left: auto; display: flex; flex-flow: row wrap; justify-content: space-between; align-items: stretch; }
.coop dt, .about_contact dt { width: 216px; display: flex; flex-flow: column wrap; justify-content: center; align-items: center; font: 500 1.8rem/1.8em "Noto Sans JP", sans-serif; letter-spacing: 0.05em; }
.coop dd, .about_contact dd { width: calc(100% - 256px); font: 500 1.8rem/1.8em "Noto Sans JP", sans-serif; letter-spacing: 0.05em; }
.coop dd p, .about_contact dd p { margin-bottom: 10px; font: inherit; }
.coop dd a, .about_contact dd a { color: #fff; }

.coop { margin-bottom: 60px; }
.coop.center { align-items: center; }
.coop dt { min-height: 95px; border: 1px solid #82d8c5; }
.coop dd { margin: 0 0 15px auto; padding-bottom: 15px; border-bottom: 1px solid #82d8c5; }
.coop dd:last-of-type { margin-bottom: 0; border-bottom: none; }

.about_contact { margin-bottom: 30px; }
.about_contact dt { color: #048eb0; background-color: #fff; }

@media (max-width: 1024px) { .coop, .about_contact { max-width: 768px; width: calc(100% - 160px); display: block; }
  .coop dt, .about_contact dt { width: 100%; height: 70px; margin-bottom: 25px; }
  .coop dd, .about_contact dd { width: 100%; }
  .coop dt { min-height: 70px; } }
@media (max-width: 768px) { .coop, .about_contact { max-width: 480px; width: calc(100% - 60px); }
  .coop dd, .about_contact dd { font-size: 1.6rem; }
  .coop dd p, .about_contact dd p { font: inherit; }
  .coop { margin-bottom: 40px; }
  .about_contact { margin-bottom: 30px; } }
/**********************************************/
.banner { max-width: 1240px; width: calc(100% - 160px); margin: 0 auto 50px; }

.bnr_flex { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; width: calc(100% - 256px); margin: 0 0 0 auto; }
.bnr_flex a { position: relative; transition: .3s; display: block; line-height: 0; border: 1px solid #ccc; max-width: 280px; height: auto; margin: 0 15px 15px 0; aspect-ratio: 280/80; width: calc((100% - 30px)/3); }
.bnr_flex a:nth-of-type(3n) { margin-right: 0; }
.bnr_flex a, .bnr_flex span { overflow: hidden; transition: .3s; }
.bnr_flex a img, .bnr_flex span img { transition: .3s; object-fit: cover; height: 100%; width: 100%; }

@media (max-width: 1024px) { .banner { max-width: 768px; width: calc(100% - 160px); margin: 0 auto 50px; }
  .bnr_flex { width: 100%; } }
/*max-width:1024px*/
@media (max-width: 768px) { .banner { max-width: 480px; width: calc(100% - 60px); margin: 0 auto 50px; }
  .bnr_flex { width: 100%; }
  .bnr_flex a { margin: 0 auto 15px !important; width: 100%; max-width: 280px; } }
/*max-width:768px*/
@media (hover: hover) { .coop dd a:hover, .about_contact dd a:hover { color: #FFF579; }
  .bnr_flex a:hover img { object-fit: cover; transform: scale(1.1); transform-origin: center center; } }
