@charset "UTF-8";
/* 日本語 */
body { overflow-x: hidden; }

.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*/
/**********************************************/
/**header**/
/**********************************************/
header { width: 100%; height: 100%; background-color: #17ACB7; color: #fff; }

.header_box { height: 120px; padding: 0 0 0 40px; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; position: relative; z-index: 888; }
.header_box h1 { display: flex; flex-direction: column; flex-wrap: wrap; justify-content: center; font: 2.6rem/1em "Noto Sans JP", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif"; font-weight: 700; height: 100%; }
.header_box h1 a { color: #fff; padding: 0 0 5px; }
.header_box h1 span { font: 3.4rem/1em "Urbanist", Arial, Helvetica, "sans-serif"; font-weight: 700; padding: 0 0 0 10px; }
.header_box h1 rt { font: 1.3rem/1em "Noto Sans JP", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif"; font-weight: 700; padding: 0 0 5px; }
.header_box h1 br { display: none; }

.header_item_top { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: center; }
.header_item_top p { font: 2.2rem/1em "Noto Sans JP", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif"; font-weight: 700; margin: 0 20px 0 0; }
.header_item_top .tel { color: #fff; background: url("../img/tel.svg") left center no-repeat; margin: 0 20px 0 0; font: 2.2rem/1.4em "Noto Sans JP", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif"; font-weight: 700; padding: 0 0 0 30px; }
.header_item_top .tel span { display: block; text-align: right; font: 1.4rem/1.4em "Noto Sans JP", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif"; font-weight: 700; }
.header_item_top .mail { display: block; width: 60px; height: 60px; background: url("../img/mail_white.svg") center center no-repeat #118088; }

.header_item_btm { height: 60px; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-end; align-items: center; padding: 0 25px; font: 1.7rem/1em "Noto Sans JP", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif"; font-weight: 500; }
.header_item_btm .sns { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
.header_item_btm a { display: block; width: 44px; height: 44px; background-color: #FFDC26; border-radius: 50%; margin: 0 0 0 15px; overflow: hidden; text-indent: 100%; white-space: nowrap; }
.header_item_btm a.Instagram { background-image: url("../img/insuta.svg"); background-position: center center; background-repeat: no-repeat; }
.header_item_btm a.Facebook { background-image: url("../img/facebook.svg"); background-position: center center; background-repeat: no-repeat; }

.toggle { display: none; }

@media (hover: hover) { .header_box h1 a:hover { color: #96DEEC; }
  .header_item_top .mail:hover { background: url("../img/mail_white.svg") center center no-repeat #96DEEC; }
  .header_item_btm a:hover { background-color: #FFF8D1; } }
@media (max-width: 1280px) { .header_box h1 a { padding: 0 0 10px; }
  .header_box h1 rt { padding: 5px 0 3px; }
  .header_box h1 br { display: block; } }
/*max-width:1280px*/
@media (max-width: 1024px) { .header_box h1 a { padding: 0 0 10px; }
  .header_box h1 rt { padding: 5px 0 3px; }
  .header_box h1 br { display: none; }
  .header_item_top { display: none; }
  .header_item_btm { padding: 0; position: fixed; background-color: #118088; bottom: 0; left: 0; width: 100%; height: 70px; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-end; align-items: center; z-index: 9999; }
  .toggle { display: block; height: 70px; width: 140px; margin: 0 0 0 30px; background: #3E3E3E; position: relative; }
  .toggle span { transition: .3s; position: absolute; display: block; width: 60px; height: 2px; background-color: #fff; }
  .toggle span:nth-of-type(1) { top: 45%; left: 50%; transform: translate(-50%, -50%); }
  .toggle span:nth-of-type(2) { top: 30%; left: 50%; transform: translate(-50%, -50%); }
  .toggle p { font: 1.7rem/1em "Noto Sans JP", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif"; font-weight: 500; position: absolute; text-align: center; top: 70%; left: 50%; transform: translate(-50%, -50%); }
  .toggle.active span { position: absolute; display: block; width: 60px; height: 2px; background-color: #fff; }
  .toggle.active span:nth-of-type(1) { top: 35%; left: 50%; transform: translate(-50%, -50%) rotate(25deg); }
  .toggle.active span:nth-of-type(2) { top: 35%; left: 50%; transform: translate(-50%, -50%) rotate(-25deg); } }
/*max-width:1024px*/
@media (max-width: 768px) { .header_box h1 a { font: 2.2rem/1em "Noto Sans JP", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif"; font-weight: 700; padding: 0 0 10px; }
  .header_box h1 rt { font: 1.1rem/1em "Noto Sans JP", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif"; font-weight: 700; padding: 5px 0 3px; }
  .header_box h1 br { display: block; }
  .header_item_btm .sns { width: calc(100% - 140px); display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; }
  .toggle { margin: 0; } }
/*max-width:768px*/
@media (max-width: 480px) { .header_box { height: 110px; padding: 0 0 0 15px; }
  .header_box h1 a { font: 2.2rem/1em "Noto Sans JP", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif"; font-weight: 700; padding: 0 0 10px; }
  .header_box h1 rt { font: 1.1rem/1em "Noto Sans JP", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif"; font-weight: 700; padding: 5px 0 3px; }
  .header_box h1 br { display: block; }
  .header_item_btm { font: 1.6rem/1em "Noto Sans JP", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif"; font-weight: 500; }
  .header_item_btm a { width: 40px; height: 40px; margin: 0 0 0 13px; }
  .header_item_btm .sns { width: calc(100% - 120px); display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; }
  .toggle { width: 120px; } }
/*max-width:480px*/
/**********************************************/
/**.mv_nav**/
/**********************************************/
nav { position: sticky; top: 0; left: 0; z-index: 888; }

.nav { width: 100%; background-color: #FFE33F; z-index: 10; height: 80px; display: flex; flex-direction: column; flex-wrap: wrap; justify-content: center; align-items: center; }
.nav .gnav { max-width: 1300px; width: 100%; margin: 0 auto; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; position: static; }
.nav .gnav li { width: calc(100%/5); position: relative; text-align: center; display: block; }
.nav .gnav li > a, .nav .gnav li > span { color: #1397B0; font: 2.2rem/1em "Noto Sans JP", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif"; font-weight: 700; }
.nav .gnav li > a rt, .nav .gnav li > span rt { font: 1.5rem/1em "Noto Sans JP", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif"; font-weight: 700; }

.faq-trigger { position: relative; }
.faq-trigger.active:after { position: absolute; content: ""; top: auto; bottom: -50px; left: 50%; -webkit-transform: translate(-50%, 0%); /* Safari用 */ transform: translate(-50%, 0%); width: 0; height: 0; border-style: solid; border-right: 15px solid transparent; border-left: 15px solid transparent; border-bottom: 25px solid #ffffff; border-top: 0; }

.faq-dropdown { position: absolute; top: 75px; left: 50%; transform: translateX(-50%); width: 750px; background: #fff; opacity: 0; visibility: hidden; pointer-events: none; z-index: 100; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; text-align: left; padding: 25px 30px 3px; border-radius: 10px; }
.faq-dropdown.active { opacity: 1; visibility: visible; pointer-events: auto; }
.faq-dropdown a { color: #17ACB7; padding: 0 0 0 20px; font: 2rem/1em "Noto Sans JP", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif"; font-weight: 700; position: relative; width: fit-content; display: block; width: 48%; margin: 0 0 25px; }
.faq-dropdown a:before { position: absolute; content: ""; display: block; width: 15px; height: 15px; background-color: #FFE33F; border-radius: 50%; left: 0; top: 2px; }

.toggle_nav { display: none; }
.toggle_nav p { text-align: center; font: 2.2rem/1em "Noto Sans JP", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif"; font-weight: 700; color: #707070; margin: 0 0 30px; }
.toggle_nav p rt { font: 1.3rem/1em "Noto Sans JP", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif"; font-weight: 700; padding: 5px 0 0px; }
.toggle_nav .nav_contct { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; }
.toggle_nav .nav_contct a { display: block; width: 45px; height: 45px; overflow: hidden; text-indent: 100%; white-space: nowrap; margin: 0 30px; }
.toggle_nav .nav_contct a.tel { background: url("../img/nav_tel.png") center center no-repeat; }
.toggle_nav .nav_contct a.mail { background: url("../img/nav_mail.png") center center no-repeat; }

@media (hover: hover) { .nav .gnav li > a:hover, .nav .gnav li > span:hover { cursor: pointer; color: #96DEEC; }
  .faq-dropdown a:hover { cursor: pointer; color: #96DEEC; } }
@media (max-width: 1800px) { .faq-dropdown { transform: translateX(-60%); } }
@media (max-width: 1700px) { .faq-dropdown { transform: translateX(-65%); } }
@media (max-width: 1600px) { .faq-dropdown { transform: translateX(-70%); } }
@media (max-width: 1500px) { .faq-dropdown { transform: translateX(-75%); } }
@media (max-width: 1400px) { .faq-dropdown { transform: translateX(-80%); } }
@media (max-width: 1280px) { .faq-dropdown { left: calc(100% - 750px); transform: translateX(0); } }
/*max-width:1280px*/
@media (max-width: 1024px) { nav { position: fixed; left: 0; z-index: 888; width: 100%; opacity: 0; top: -100%; height: calc(100% - 70px); overflow-y: scroll; background-color: #fff; }
  nav.active { top: 0; opacity: 1; }
  .toggle_nav { display: block; }
  .nav { position: relative; display: block; padding: 60px 0 20%; transition: .3s; height: auto; background-color: #fff; }
  .nav .gnav { max-width: 1300px; width: 100%; margin: 0 auto; display: block; }
  .nav .gnav li { margin: 0 0 30px; width: 100%; position: relative; text-align: center; display: block; }
  .nav .gnav li:last-of-type { margin: 0 0 25px; }
  .nav .gnav li > a, .nav .gnav li > span { color: #1397B0; font: 2.2rem/1em "Noto Sans JP", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif"; font-weight: 700; }
  .nav .gnav li > a rt, .nav .gnav li > span rt { font: 1.5rem/1em "Noto Sans JP", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif"; font-weight: 700; }
  .faq-dropdown { position: relative; top: auto; left: auto; transform: translateX(0%); width: 100%; max-width: 280px; margin: 0 auto; opacity: 0; visibility: hidden; display: block; pointer-events: none; z-index: 100; max-height: 50px; transition: max-height 0.5s ease, opacity 0.5s ease; padding: 0; background-color: inherit; }
  .faq-dropdown.active { padding: 20px 0; max-height: 500px; overflow: visible; opacity: 1; visibility: visible; pointer-events: auto; }
  .faq-dropdown a { color: #000000; padding: 0; font: 1.8rem/1em "Noto Sans JP", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif"; font-weight: 500; position: relative; text-align: left; display: block; width: fit-content; margin: 0 0 20px; }
  .faq-dropdown a:before { display: none; }
  .faq-dropdown a:last-of-type { margin: 0; }
  .faq-trigger { position: relative; padding: 0 30px 0 0; }
  .faq-trigger:before { font: 3rem/1em "Noto Sans JP", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif"; font-weight: 700; position: absolute; content: "+"; right: 0; top: 2px; }
  .faq-trigger.active:after { display: none; }
  .faq-trigger.active:before { content: "-"; right: 0; top: 1px; } }
/**********************************************/
/**pagetop**/
/**********************************************/
.page_top { display: block; width: 66px; height: 66px; border-radius: 50%; background-color: #fff; position: fixed; right: 40px; bottom: 40px; opacity: 0; z-index: -1; transition: .3s; border: 1px solid #17ACB7; }
.page_top.active { opacity: 1; z-index: 777; }
.page_top p { transition: .3s; text-align: center; font: 1.8rem/80px "Noto Sans JP", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif"; font-weight: 500; letter-spacing: 0.03em; position: relative; }
.page_top p:before { transition: .3s; position: absolute; content: ""; left: 40%; top: 18px; width: 8px; height: 8px; border-top: 3px solid #17ACB7; border-right: 3px solid #17ACB7; transform: rotate(-45deg); }

@media (hover: hover) { .page_top:hover { cursor: pointer; }
  .page_top:hover p { color: #17ACB7; }
  .page_top:hover p:before { top: 10px; } }
@media (max-width: 1024px) { .page_top { right: 15px; bottom: 85px; transition: .3; } }
/*max-width:1024px*/
@media (max-width: 768px) { .page_top { right: 10px; bottom: 80px; transition: .3; transform: scale(0.9); transform-origin: bottom,right; } }
/*max-width:768px*/
/*max-width:480px*/
/**********************************************/
/**footer**/
/**********************************************/
footer { background-color: #17ACB7; padding: 85px 0px 120px; }

.bnr_flex { max-width: 850px; width: calc(100% - 100px); margin: 0 auto 50px; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; }
.bnr_flex a { position: relative; transition: .3s; display: block; line-height: 0; border: 1px solid #ccc; max-width: 260px; height: auto; aspect-ratio: 260/80; width: calc((100% - 40px)/3); }
.bnr_flex a, .bnr_flex span { transition: .3s; }
.bnr_flex a img, .bnr_flex span img { object-fit: cover; height: 100%; width: 100%; }

.coop, .about_contact { margin: 0 auto 50px; color: #fff; width: calc(100% - 100px); max-width: 1500px; font: 1.8rem/2em "Noto Sans JP", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif"; font-weight: 500; letter-spacing: 0.03em; }
.coop a, .about_contact a { color: #fff; }

.coop { margin: 0 auto 30px; }
.coop.coop_last { margin-bottom: 0; }
.coop dt { margin: 0 0 10px; }
.coop dd { margin: 0 0 10px; text-align: justify; text-justify: inter-ideograph; }
.coop .kome { padding: 0 0 0 20px; position: relative; }
.coop .kome:before { position: absolute; content: "※"; left: 0; }

@media (hover: hover) { .bnr_flex a:hover { opacity: 0.5; }
  .coop a:hover, .about_contact a:hover { border-bottom: 1px #fff dashed; } }
/*max-width:1280px*/
@media (max-width: 1024px) { .coop, .about_contact, .bnr_flex { width: calc(100% - 60px); } }
/*max-width:1024px*/
@media (max-width: 768px) { .bnr_flex { display: block; }
  .bnr_flex a { display: block; width: 100%; margin: 0 auto 15px; } }
/*max-width:768px*/
@media (max-width: 480px) { footer { background-color: #17ACB7; padding: 45px 0px 110px; }
  .coop, .about_contact, .bnr_flex { width: calc(100% - 40px); }
  .coop, .about_contact { font: 1.6rem/2.2em "Noto Sans JP", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif"; font-weight: 500; letter-spacing: 0.03em; }
  .coop a, .about_contact a { color: #fff; } }
/*max-width:480px*/
