@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;500;700;900&display=swap');

:root {
    --c-main: #009d85;
    --c-black: #231815;
    --c-green: #64bbac;
    --c-green-l: #a6ddd4;

    --fw-r: 400;
    --fw-m: 500;
    --fw-sb: 600;
    --fw-b: 700;
    --fw-bl: 900;
    
    --ff-zen: "Zen Kaku Gothic New", sans-serif;
}

.contents_wrapper {
    font-family: 'Roboto', "Noto Sans JP", "Noto Sans", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    font-feature-settings: "palt";
}

a:hover {
    opacity: 0.8;
}
.contents_wrapper .inner {
	width: 960px;
    max-width: 96vw;
	margin: auto;
}
.sec {
    color: var(--c-black);
    margin: 0 auto;
}

.bg_green {
    background-color: var(--c-green);
}
.bg_light_green {
    background-color: var(--c-green-l);
}

.only_pc { display: block; }
.only_sp { display: none; }


@media screen and (max-width: 1024px) {
    .inner {
        width: 100%;
    }
}

@media screen and (max-width: 790px){
    .sec {
        max-width: 90%;
        margin: 0 auto;
    }
    .sec.c_menu {
        max-width: 100%;
        padding: 0 5px;
        margin: 8px 0;
    }
    .contents_body .sec {
        max-width: 85%;
    }
    .contents_wrapper .inner {
        max-width: 100%;
    }
    .only_pc { display: none; }
    .only_sp { display: block; }
}

@media screen and (min-width: 790px) {
    a[href^="tel:"] {
        pointer-events: none;
        cursor: default;
    }
}


/* ===============================================
   mv
=============================================== */
.mv {
    background-image: url("../images/bg_deco.png");
    background-repeat: repeat-x;
    background-position: center bottom -1px;
    background-size: auto;
    padding: clamp(0px, 7.5vw, 75px) 0 clamp(0px, 4vw, 40px);
}

@media screen and (max-width: 1000px) {
    .mv {
        background-size: 143% auto;
    }
}

.mv_lead {
    font-family: var(--ff-zen);
    font-weight: 900;
    color: #100964;
    text-align: center;
    position: relative;
    margin-bottom: clamp(0px, 5vw, 50px);
}

.mv_lead .text_1 {
    font-size: clamp(0px, 4.7vw, 47px);
    line-height: 1em;
    margin-bottom: 0.2em;
}

.mv_lead .text_2 {
    font-size: clamp(0px, 5.7vw, 57px);
    line-height: 1em;
}

.mv_lead p small {
    font-size: 0.75em;
    display: inline-block;
}

.mv_lead p .spacing {
    letter-spacing: 0.09em;
}

.mv_lead .deco {
    width: clamp(0px, 6.5vw, 65px);
    position: absolute;
    bottom: clamp(-10px, -1vw, 0px);
    right: clamp(0px, 22.5vw, 225px);
}

.mv_img {
    width: 100%;
    margin-bottom: clamp(0px, 6.5vw, 65px);
}

.special {
    width: clamp(0px, 91vw, 910px);
    margin: 0 auto clamp(0px, 11vw, 110px);
}

@media screen and (max-width: 790px){
    .mv {
        background-image: url("../images/bg_deco_sp.png");
        background-size: 100% auto;
        padding: 7.5vw 0 8vw;
    }
    
    .mv_lead {
        margin-bottom: 9vw;
    }

    .mv_lead .text_1 {
        font-size: 8vw;
        line-height: 1.4em;
        margin-bottom: 0.2em;
    }

    .mv_lead .text_2 {
        font-size: 10vw;
    }

    .mv_lead .deco {
        width: 13vw;
        bottom: -5vw;
        right: 4vw;
    }

    .mv_img {
        width: 94vw;
        margin: 0 auto 8vw;
    }

    .special {
        width: 90vw;
        margin: 0 auto 20vw;
    }
}


/* ===============================================
   download
=============================================== */
.download {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
}

.download_ttl {
    width: clamp(0px, 88vw, 880px);
    margin-bottom: clamp(0px, 4vw, 40px);
}

.download_link {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(0px, 7.5vw, 75px);
    margin-bottom: clamp(0px, 4vw, 40px);
}

.download_link li {
    display: flex;
    align-items: center;
    gap: clamp(0px, 1.5vw, 15px);
}

.download_link li .qr {
    width: clamp(0px, 14.5vw, 145px);
}

.download_link li .link {
    width: clamp(0px, 24vw, 240px);
}

.download .note_area {
    width: clamp(0px, 86vw, 860px);
    color: var(--c-black);
}

.download .note_list li {
    font-size: clamp(0px, 1.5vw, 15px);
    letter-spacing: 0.04em;
    line-height: 1.5em;
    padding-left: 1em;
    text-indent: -1em;
}

.download .note_list_s li {
    font-size: clamp(0px, 1.2vw, 12px);
    letter-spacing: 0.04em;
    line-height: 1.5em;
    padding-left: 1em;
    text-indent: -1em;
}

@media screen and (max-width: 790px){
    .download_ttl {
        width: 90vw;
        margin-bottom: 8vw;
    }

    .download_link {
        flex-direction: column;
        align-items: center;
        gap: 6vw;
        margin-bottom: 5vw;
    }

    .download_link li {
        gap: 4vw;
    }

    .download_link li .qr {
        width: 20vw;
    }

    .download_link li .link {
        width: 40vw;
    }

    .download .note_area {
        width: 86vw;
    }

    .download .note_list li {
        font-size: 3.5vw;
    }

    .download .note_list_s li {
        font-size: 3vw;
        line-height: 1.6em;
    }
}


/* ===============================================
   menu
=============================================== */
.c_menu {
    width: 100%;
    padding: clamp(0px, 5vw, 50px) 0;
    display: flex;
    justify-content: center;
}
.c_menu_list {
    width: clamp(0px, 89vw, 890px);
    display: flex;
    border-left: 2px solid var(--c-main);
}
.c_menu_list li {
    width: 25%;
    border-right: 2px solid var(--c-main);
}
.c_menu_list li a {
    font-size: clamp(0px, 2.4vw, 24px);
    font-weight: bold;
    color: var(--c-main);
    line-height: 1.6em;
    letter-spacing: 0.02em;
    text-align: center;
    display: block;
    padding: clamp(0px, 3vw, 30px) 0 clamp(0px, 5.5vw, 55px);
    position: relative;
    transition: all .2s;
    white-space: nowrap;
}
.c_menu_list li a::after {
    content: '';
    width: clamp(0px, 2.5vw, 25px);
    height: clamp(0px, 2vw, 20px);
    background-image: url("../images/arrow_gr.svg");
    background-repeat: no-repeat;
    background-position: left center;
    background-size: auto 100%;
    position: absolute;
    bottom: clamp(0px, 1vw, 10px);
    left: 50%;
    transform: translateX(-50%);
    transition: all .2s;
}
.c_menu_list li a:hover::after {
    bottom: clamp(0px, 0.5vw, 5px);
}

@media screen and (max-width: 790px){
    .c_menu {
        padding: 0
    }
    .c_menu_list {
        width: 100%;
        margin: 0 auto;
        flex-wrap: wrap;
        justify-content: space-between;
        border-left: none;
    }
    .c_menu_list li {
        width: 50%;
        border: none;
    }
    .c_menu_list li {
        border-bottom: 1px solid var(--c-main);
    }
    .c_menu_list li:nth-last-child(-n+2) {
        border-bottom: none;
    }
    .c_menu_list li:nth-child(odd) {
        border-right: 1px solid var(--c-main);
    }
    .c_menu_list li a {
        font-size: 3.5vw;
        line-height: 1.5;
        padding: 1.2em 1em 1.7em;
    }
    .c_menu_list li a::after {
        width: 5vw;
        height: 3vw;
        background-position: center;
    }
}


/* ===============================================
   box
=============================================== */
.contents_body {
    padding: clamp(0px, 9vw, 90px) 0 clamp(0px, 12vw, 120px);
    position: relative;
    z-index: 2;
}

.contents_body::after {
    content: "";
    width: 100%;
    height: clamp(0px, 77vw, 770px);
    background-color: var(--c-green-l);
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -1;
}

.box {
    background-color: #fff;
    padding: clamp(0px, 6vw, 60px) clamp(0px, 6vw, 60px) clamp(0px, 10vw, 100px);
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
}

.box_ttl {
    width: 100%;
    font-size: clamp(0px, 4.2vw, 42px);
    line-height: 1.6em;
    letter-spacing: 0.07em;
    font-weight: var(--fw-sb);
    color: var(--c-main);
    margin-bottom: clamp(0px, 4vw, 40px);
    white-space: nowrap;
}

.box_ttl small {
    font-size: 0.7em;
}

.sub_ttl {
    width: 100%;
    font-size: clamp(0px, 1.8vw, 18px);
    letter-spacing: 0.14em;
    line-height: 1.8em;
    margin-bottom: clamp(0px, 5.5vw, 55px);
}

.box_list {
    display: flex;
    flex-direction: column;
    gap: clamp(0px, 8.5vw, 85px);
}

@media screen and (max-width: 790px) {
    .contents_body {
        padding: 10vw 0 12vw;
    }

    .contents_body::after {
        height: 140vw;
    }

    .box {
        padding: 8vw 5vw 13vw;
    }

    .box_ttl {
        font-size: 6vw;
        margin-bottom: 6vw;
    }

    .sub_ttl {
        font-size: 3.8vw;
        margin-bottom: 8vw;
    }

    .box_list {
        display: flex;
        flex-direction: column;
        gap: 10vw;
    }
}

/* ----------------------------------------
   about
---------------------------------------- */
.about .img_area {
    width: clamp(0px, 81vw, 810px);
    margin-bottom: clamp(0px, 10vw, 100px);
}

.about .cont_ttl {
    width: 100%;
    aspect-ratio: 850 / 70;
    background-color: #005e81;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 70px;
    color: #fff;
    font-size: clamp(0px, 2.7vw, 27px);
    letter-spacing: 0.18em;
    font-weight: var(--fw-b);
    margin-bottom: clamp(0px, 7vw, 70px);
}

.about .img_area2 {
    width: clamp(0px, 83vw, 830px);
}

@media screen and (max-width: 790px) {
    .about .img_area {
        width: 100%;
        margin-bottom: 15vw;
    }

    .about .cont_ttl {
        aspect-ratio: 850 / 90;
        font-size: 4vw;
        margin-bottom: 4vw;
    }

    .about .img_area2 {
        width: 100%;
    }
}

/* ----------------------------------------
   card
---------------------------------------- */
.card_box {
    width: 100%;
    min-height: clamp(0px, 32.5vw, 325px);
    background-color: #fff8b0;
    position: relative;
    margin-bottom: clamp(0px, 12vw, 120px);
}

.card_box .text_area {
    padding: clamp(0px, 3.5vw, 35px) clamp(0px, 3vw, 30px);
    position: relative;
    z-index: 2;
}

.card_box .text_area .text_1 {
    font-size: clamp(0px, 3vw, 30px);
    line-height: 1.5em;
    letter-spacing: 0.02em;
    color: var(--c-main);
    font-weight: var(--fw-bl);
    margin-bottom: 0.8em;
}

.card_box .text_area .text_1 small {
    font-size: 0.8em;
}

.card_box .text_area .text_2 {
    font-size: clamp(0px, 1.8vw, 18px);
    line-height: 1.8em;
    letter-spacing: 0.14em;
    color: var(--c-main);
    font-weight: var(--fw-m);
    margin-bottom: 0.5em;
}

.card_box .text_area .note {
    font-size: clamp(0px, 1.6vw, 16px);
    letter-spacing: 0.08em;
}

.card_box .card_img {
    width: clamp(0px, 28vw, 280px);
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 1;
}

.card .link_area {
    display: flex;
    flex-direction: column;
    gap: clamp(0px, 13vw, 130px);
}

@media screen and (max-width: 790px){
    .card_box {
        min-height: 0;
        margin-bottom: 12vw;
        padding-bottom: 3vw
    }

    .card_box .text_area {
        padding: 7vw 5vw 4vw;
    }

    .card_box .text_area .text_1 {
        font-size: 5.2vw;
        line-height: 1.7em;
        white-space: nowrap;
    }

    .card_box .text_area .text_2 {
        font-size: 4vw;
        line-height: 1.6em;
        letter-spacing: 0.1em;
    }

    .card_box .text_area .note {
        font-size: 3vw;
    }

    .card_box .card_img {
        width: 50vw;
        position: relative;
        margin: 0 auto;
        display: block;
    }

    .card .link_area {
        gap: 10vw;
    }
}

/* ----------------------------------------
   button
---------------------------------------- */
.btn_w {
    width: clamp(0px, 57.5vw, 575px);
    height: clamp(0px, 7vw, 70px);
    font-size: clamp(0px, 2.7vw, 27px);
    line-height: 1;
    white-space: nowrap;
    font-weight: var(--fw-b);
    letter-spacing: 0.16em;
    color: var(--c-main);
    background-color: #fff;
    border: clamp(0px, 0.4vw, 4px) solid var(--c-main);
    border-radius: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: color 0.3s, background 0.3s;
}

.btn_w:hover {
    opacity: 1;
    color: #fff;
    background-color: var(--c-main);
}

.btn_w span {
    font-size: 1.5em;
    font-weight: var(--fw-r);
    line-height: 1;
}

@media screen and (max-width: 790px){
    .btn_w {
        width: 80vw;
        height: 11vw;
        font-size: 4vw;
        letter-spacing: 0.1em;
        border: 2px solid var(--c-main);
    }
}

/* ----------------------------------------
   Q&A
---------------------------------------- */
.qa .box_ttl {
    line-height: 1;
    padding: clamp(0px, 2vw, 20px) 0;
    margin-bottom: 0;
}

.qa_list {
    width: clamp(0px, 80vw, 800px);
    display: flex;
    flex-direction: column;
    margin-bottom: clamp(0px, 7vw, 70px);
}

.qa_item {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: clamp(0px, 3.5vw, 35px);
    padding: clamp(0px, 5vw, 50px) 0;
}

.qa_item:not(:first-of-type) {
    border-top: 1px solid var(--c-black);
}

.qa_q,
.qa_a {
    display: flex;
    align-items: flex-start;
    gap: clamp(0px, 2.5vw, 25px);
}

.qa_q img,
.qa_a img {
  width: clamp(0px, 3vw, 30px);
  height: auto;
  flex-shrink: 0;
}

.qa_text {
    margin-top: clamp(0px, 0.3vw, 3px);
}

.qa_text p {
    font-size: clamp(0px, 1.8vw, 18px);
    letter-spacing: 0.14em;
    line-height: 1.8em;
}

.qa_note {
    margin-top: clamp(0px, 1.5vw, 15px);
}

.qa_note li {
    font-size: clamp(0px, 1.4vw, 14px);
    letter-spacing: 0.13em;
    line-height: 1.8em;
}

.qa .btn_w {
    margin-bottom: clamp(0px, 12vw, 120px);
}

@media screen and (max-width: 790px){
    .qa .box_ttl {
        padding: 3vw 0;
    }

    .qa_list {
        width: 84vw;
        margin-bottom: 10vw;
    }

    .qa_item {
        gap: 5vw;
        padding: 7vw 0;
    }
    
    .qa_q,
    .qa_a {
        gap: 5vw;
    }

    .qa_q img,
    .qa_a img {
      width: 6vw;
    }

    .qa_text {
        margin-top: 0.3vw;
    }

    .qa_text p {
        font-size: 3.8vw;
    }

    .qa_note {
        margin-top: 3vw;
    }

    .qa_note li {
        font-size: 3vw;
    }

    .qa .btn_w {
        margin-bottom: 20vw;
    }
}

/* ----------------------------------------
   contact
---------------------------------------- */
.contact {
    width: clamp(0px, 75vw, 750px);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.contact .contact_ttl {
    width: 100%;
    font-size: clamp(0px, 2.5vw, 25px);
    font-weight: var(--fw-m);
    text-align: center;
    letter-spacing: 0.16em;
    line-height: 1;
    border-bottom: 1px solid var(--c-black);
    padding-bottom: 0.6em;
    margin-bottom: clamp(0px, 2.5vw, 25px);
}

.contact_info {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: clamp(0px, 5vw, 50px);
    margin-bottom: clamp(0px, 2.5vw, 25px);
}

.contact_info .tel {
    width: clamp(0px, 33vw, 330px);
    line-height: 0;
}

.contact_info .company {
    font-size: clamp(0px, 2.7vw, 27px);
}

.contact_info .company span {
    font-size: 0.8em;
}

.contact .hours {
    font-size: clamp(0px, 2.1vw, 21px);
    letter-spacing: 0.08em;
}

.contact .hours span {
    font-size: 0.9em;
    margin-left: 0.5em;
}

@media screen and (max-width: 790px){
    .contact {
        width: 100%;
    }

    .contact .contact_ttl {
        width: 90%;
        font-size: 5vw;
        margin-bottom: 5.5vw;
    }

    .contact_info {
        flex-direction: column;
        align-items: center;
        gap: 5vw;
        margin-bottom: 6.5vw;
    }

    .contact_info .tel {
        width: 70vw;
    }

    .contact_info .company {
        font-size: 5.7vw;
    }

    .contact .hours {
        font-size: 4.1vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        line-height: 1.5em;
    }

    .contact .hours span {
        margin-left: 0;
    }
}