@charset "utf-8";

    .clearfix {
        display: block;
    }

    .sp {
        display: none;
    }

    body {
        font-family: "Noto Sans JP", sans-serif;
        font-feature-settings: "palt";
        font-size: clamp(14px, 12.6087px + 0.4348vw, 18px);
        color: #000;
        letter-spacing: 1px;
        font-weight: 500;
    }

    /* header */
    #header_wrapper {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        background-color: #fff;
        z-index: 999;
    }

    header {
        width: 90%;
        margin: 0 auto;
        padding: 1em 0;
        display: flex;
        justify-content: space-between;

    }

    header #logo h1 {
        margin: 0 0 10px;
    }

    header #tel {
        margin-left: auto;
        margin-right: 30px;
    }

    header #tel h2 {
        font-size: 18px;
        border-left: #ff9200 2px solid;
        padding: 3px 0 3px .5em;
        margin: 0 0 10px;
    }

    header #tel address {
        font-size: 24px;
        font-weight: 700;
    }

    header #tel address a {
        color: #000;
        font-size: 36px;
        text-decoration: none;
        line-height: 1;
        letter-spacing: 0;
    }

    header #tel p {
        font-size: 14px;
        text-align: right;
    }

    header #header_btn {
        width: 240px;
    }

    header #header_btn ul li:nth-child(2) {
        margin: 0 0 10px;
    }

    header #header_btn ul li a {
        display: block;
        text-align: center;
        color: #fff;
        text-decoration: none;
        font-weight: 700;
        padding: .5em 0;
    }

    header #header_btn ul li:nth-child(2) a {
        background-color: #ff9200;
        border-radius: 999px;
    }

    header #header_btn ul li:last-of-type a {
        background-color: #68b8eb;
        border-radius: 999px;
    }

    /* fv */
    #fv {
        width: 100%;
        max-width: 2000px;
        background-image: url(../images/fv_bg.webp);
        background-position: center;
        margin: 8% auto 0;
        padding: 100px 0;
        text-align: center;
    }

    #fv img {
        margin: 0 auto;
    }


    /* box01 */
    #box01 {
        width: 90%;
        max-width: 1200px;
        margin: 0 auto;
        padding: 80px 0;
        position: relative;
    }

    #box01::before {
        content: "PURPOOSE";
        position: absolute;
        top: -1.5%;
        left: 50%;
        transform: translateX(-50%);
        font-size: clamp(65px, 12vw, 150px);
        font-weight: bold;
        font-family: Arial, sans-serif;
        color: #eeeeee;
        pointer-events: none;
        white-space: nowrap;
        line-height: 1;
        letter-spacing: 0;
        z-index: -10;
    }

    #box01 h2 {
        text-align: center;
        font-size: clamp(20px, 16.5217px + 1.087vw, 30px);
        font-weight: 500;
        margin: 0 0 3%;
    }

    .orange {
        color: #ff9200;
    }

    .big {
        font-size: 1.5em;
    }

    #box01 div {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 1em;
        margin: 0 0 5%;
    }

    #box01 div article {
        text-align: center;
        margin: 0 0 1em;
    }

    #box01 div article figure {
        margin: 0 0 .5em;
    }

    #box01>p {
        text-align: center;
        font-size: clamp(20px, 16.5217px + 1.087vw, 30px);
    }

    /* box02 */
    #box02 {
        width: 100%;
        margin: 0 auto;
        padding: 80px 0;
        position: relative;
        border-radius: clamp(40px, 20vw, 200px) 0 clamp(40px, 20vw, 200px) 0;
        background-color: #fafafa;
        z-index: -2;
    }

    #box02::before {
        content: "REASONS";
        position: absolute;
        top: -.5%;
        left: 50%;
        transform: translateX(-50%);
        font-size: clamp(65px, 12vw, 150px);
        font-weight: bold;
        font-family: Arial, sans-serif;
        color: #eeeeee;
        pointer-events: none;
        white-space: nowrap;
        line-height: 1;
        letter-spacing: 0;
        z-index: -1;
    }

    #box02 h2 {
        text-align: center;
        font-size: clamp(20px, 16.5217px + 1.087vw, 30px);
        margin: 0 0 2%;
    }

    #box02>p {
        text-align: center;
        margin: 0 0 3%;
        font-size: clamp(16px, 13.2174px + 0.8696vw, 24px);
    }

    #box02 article {
        width: 90%;
        max-width: 1200px;
        margin: 0 auto 3%;
        display: flex;
        align-items: flex-start;
    }

    #box02 article figure {
        width: 50%;
        max-width: 600px;
    }

    #box02 article div {
        background-color: #fff;
        padding: 2em;
        width: 50%;
        max-width: 600px;
        box-sizing: border-box;
    }

    .row {
        flex-direction: row-reverse;
    }

    #box02 article div p.icon {
        font-weight: normal;
        color: #ff9200;
        font-family: Arial, sans-serif;
    }

    #box02 article div p.icon span {
        font-size: 1.5em;
    }

    #box02 article div h3 {
        font-size: clamp(20px, 14.5217px + 1.087vw, 30px);
        margin: 0 0 .5em;
        font-weight: 700;
    }

    /* box03 */
    #box03 {
        width: 100%;
        margin: 0 auto;
        padding: 80px 0;
        position: relative;
    }

    #box03::before {
        content: "DETAIL";
        position: absolute;
        top: -.5%;
        left: 50%;
        transform: translateX(-50%);
        font-size: clamp(65px, 12vw, 150px);
        font-weight: bold;
        font-family: Arial, sans-serif;
        color: #eeeeee;
        pointer-events: none;
        white-space: nowrap;
        line-height: 1;
        letter-spacing: 0;
        z-index: -10;
    }

    #box03 h2 {
        text-align: center;
        font-size: clamp(30px, 23.7391px + 1.9565vw, 48px);
        margin: 0 0 2%;
    }

    #box03_top {
        background-image: url(../images/box03_top_bg.webp);
        background-position: center;
        text-align: center;
        padding: 1em 0;
        font-size: clamp(16px, 13.2174px + 0.8696vw, 24px);
        margin: 0 0 3%;
    }

    #box03 article {
        width: 90%;
        max-width: 1200px;
        margin: 0 auto;
    }

    #box03 article:first-of-type {
        margin: 0 auto 5%;

    }

    #box03 article h3 {
        margin: 0 0 3%;
        text-align: center;
        font-size: clamp(24px, 19.8261px + 1.3043vw, 36px);
    }

    #box03 article h3 span {
        display: block;
        font-size: clamp(14px, 12.6087px + 0.4348vw, 18px);
    }

    #box03 article p {
        text-align: center;
        margin: 0 0 3%;
    }

    .box03_btn_top {
        background-color: #000;
        padding: 1em;
        margin: 0 0 3%;
        display: flex;
        justify-content: space-between;
    }

    .box03_btn_top li {
        background-color: #fff;
        width: 32%;
        text-align: center;
        font-size: clamp(16px, 13.2174px + 0.8696vw, 24px);
        font-weight: 700;
        padding: .5em;
        box-sizing: border-box;
        cursor: pointer
    }

    .box03_btn_top li span {
        font-size: clamp(14px, 12.6087px + 0.4348vw, 18px);
        display: block;
    }

    .box03_btn_top li.active {
        background-color: #ff9200;
        color: #fff;
    }

    .box03_btn_top li.active span {
        color: #fff;
    }

    .about {
        display: flex;
        justify-content: space-between;
        margin: 0 0 3%;
    }

    .about figure {
        width: 49%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .about div {
        width: 49%;
    }

    #box03 h4 {
        background-color: #000;
        color: #fff;
        font-size: clamp(16px, 13.2174px + 0.8696vw, 24px);
        text-align: center;
        padding: .5em;
    }

    #box03 table {
        width: 100%;
    }

    #box03 table th {
        background-color: #ffe1b8;
        border: #cccccc 1px solid;
        text-align: center;
        vertical-align: middle;
        padding: 1em;
        box-sizing: border-box;
        width: 25%;
        font-weight: 500;
    }



    #box03 table td {
        background-color: #fafafa;
        border: #cccccc 1px solid;
        text-align: center;
        vertical-align: middle;
        padding: 1em;
        box-sizing: border-box;
        width: 15%;
    }

    #box03 .about table th {
        width: 30%;
    }

    #box03 .about table td {
        width: 70%;
        text-align: left;
    }

    .box03_btn_bottom {
        padding: 3% 0 0;
        display: flex;
        justify-content: center;
        gap: 1em;
    }

    .box03_btn_bottom li {
        width: 470px;
        border-radius: 999px;
    }

    .box03_btn_bottom li a {
        display: block;
        text-align: center;
        color: #fff;
        font-size: clamp(16px, 13.2174px + 0.8696vw, 24px);
        width: 100%;
        font-weight: 700;
        text-decoration: none;
        padding: .5em 0;
        border-radius: 999px;
    }

    .box03_btn_bottom li:first-of-type {
        background-color: #ff9200;
    }

    .box03_btn_bottom li:last-of-type {
        background-color: #68b8eb;
    }

    /* box04 */
    #box04 {
        width: 100%;
        margin: 0 auto;
        padding: 80px 0;
        position: relative;
        border-radius: clamp(40px, 20vw, 200px) 0 clamp(40px, 20vw, 200px) 0;
        background-color: #fafafa;
        z-index: -2;
    }

    #box04::before {
        content: "VOICE";
        position: absolute;
        top: -3%;
        left: 50%;
        transform: translateX(-50%);
        font-size: clamp(65px, 12vw, 150px);
        font-weight: bold;
        font-family: Arial, sans-serif;
        color: #eeeeee;
        pointer-events: none;
        white-space: nowrap;
        line-height: 1;
        letter-spacing: 0;
        z-index: -1;
    }

    #box04 h2 {
        text-align: center;
        font-size: clamp(30px, 23.7391px + 1.9565vw, 48px);
        margin: 0 0 2%;
    }

    #box04 div {
        width: 90%;
        margin: 0 auto;
        max-width: 1200px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    #box04 div article {
        width: 32%;
        margin: 0 0 2em;
        background-color: #fff;
        padding: 1.5em 1em;
        box-sizing: border-box;
        border-radius: 10px;
        box-shadow: 6px 6px 6px 0px rgba(0, 0, 0, 0.1);
    }

    #box04 div article h3 {
        color: #ff9200;
        margin: 0 0 .5em;
        font-weight: 700;
    }

    /* box05 */
    #box05 {
        width: 90%;
        max-width: 1200px;
        margin: 0 auto;
        padding: 80px 0;
        position: relative;
    }

    #box05::before {
        content: "FLOW";
        position: absolute;
        top: -1.5%;
        left: 50%;
        transform: translateX(-50%);
        font-size: clamp(65px, 12vw, 150px);
        font-weight: bold;
        font-family: Arial, sans-serif;
        color: #eeeeee;
        pointer-events: none;
        white-space: nowrap;
        line-height: 1;
        letter-spacing: 0;
        z-index: -10;
    }

    #box05 h2 {
        text-align: center;
        font-size: clamp(30px, 23.7391px + 1.9565vw, 48px);
        margin: 0 0 2%;
    }

    #box05 article {
        border-bottom: #ccc 1px solid;
        margin: 0 0 1em;
        display: flex;
    }

    #box05 article div {
        width: 15%;
        border-right: 1px solid #ccc;
        padding: 1em;
        box-sizing: border-box;
        color: #ff9200;
        font-family: Arial, sans-serif;
        font-weight: 700;
        text-align: center;
    }

    .v-step {
        writing-mode: vertical-rl;
        display: inline-block;
        margin-right: 8px;
        font-size: clamp(14px, 12.6087px + 0.4348vw, 18px);
    }

    .num {
        display: inline-block;
        font-size: 32px;
        line-height: 1;
        font-size: clamp(36px, 23.4783px + 3.913vw, 72px);
    }

    #box05 article h3 {
        width: 90%;
        padding: 1em;
        display: flex;
        align-items: center;
        color: #ff9200;
        font-weight: 700;
        font-size: clamp(16px, 13.2174px + 0.8696vw, 24px);
    }

    /* contact */
    #contact {
        width: 100%;
        margin: 0 auto;
        padding: 80px 0;
        position: relative;
        border-radius: clamp(40px, 20vw, 200px) 0 clamp(40px, 20vw, 200px) 0;
        background-color: #fafafa;
        z-index: 10;
    }

    #contact::before {
        content: "CONTACT";
        position: absolute;
        top: -.8%;
        left: 50%;
        transform: translateX(-50%);
        font-size: clamp(65px, 12vw, 150px);
        font-weight: bold;
        font-family: Arial, sans-serif;
        color: #eeeeee;
        pointer-events: none;
        white-space: nowrap;
        line-height: 1;
        letter-spacing: 0;
        z-index: -1;
    }

    #contact h2 {
        text-align: center;
        font-size: clamp(30px, 23.7391px + 1.9565vw, 48px);
        margin: 0 0 2%;
    }

    #contact>p {
        text-align: center;
        margin: 0 0 3%;
    }

    /* box07 */
    #box07 {
        width: 100%;
        margin: 0 auto;
        padding: 80px 0;
        position: relative;
        background-color: #ff9200;
        z-index: -2;
    }

    #box07::before {
        content: "ACCESS";
        position: absolute;
        top: -.7%;
        left: 50%;
        transform: translateX(-50%);
        font-size: clamp(65px, 12vw, 150px);
        font-weight: bold;
        font-family: Arial, sans-serif;
        color: #fff;
        pointer-events: none;
        white-space: nowrap;
        line-height: 1;
        letter-spacing: 0;
        z-index: -1;
    }

    #box07 h2 {
        text-align: center;
        font-size: clamp(30px, 23.7391px + 1.9565vw, 48px);
        margin: 0 0 2%;
    }

    #box07 article {
        width: 90%;
        max-width: 1200px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
    }

    #box07 article:first-of-type {
        margin: 0 auto 3%;
    }

    #box07 article>figure,
    .access_text {
        width: 48%;
    }

    .access_list {
        display: flex;
        align-items: center;
        color: #fff;
    }

    .access_list:first-of-type {
        margin: 0 0 8%;
    }

    .access_list figure {
        width: 30%;
    }

    .access_list h3 {
        font-size: clamp(16px, 13.2174px + 0.8696vw, 24px);
        margin: 0 0 .3em;
    }

    .access_list div {
        width: 70%;
    }

    .access_list div ul li {
        padding-left: .7em;
        text-indent: -.7em;
    }

    .access_list p {
        margin: 0 0 5%;
    }

    #map {
        width: 100%;
    }

    #map iframe {
        width: 100%;
    }

    /* box08 */
    #box08 {
        padding: 3em 0;
        text-align: center;
    }

    #box08 h2 {
        font-size: clamp(24px, 19.8261px + 1.3043vw, 36px);
        margin: 0 0 1%;
        font-weight: 700;
    }

    #box08 p {
        font-size: clamp(16px, 13.2174px + 0.8696vw, 24px);
        font-weight: 700;
        margin: 0 0 2%;
    }

    #box08 div {
        width: 500px;
        margin: 0 auto;
        border-radius: 999px;
    }

    #box08 div a {
        background-color: #ff9200;
        color: #fff;
        display: block;
        text-decoration: none;
        font-size: clamp(16px, 13.2174px + 0.8696vw, 24px);
        border-radius: 999px;
        padding: .5em 0;
    }

    /* footer */
    footer {
        width: 100%;
        background-color: #000;
        text-align: center;
        padding: 2em 0;
        color: #fff;
    }

    footer a {
        text-decoration: none;
        color: #fff;
    }

    #thanks {
        padding: 100px 0;
        text-align: center;
    }

    #thanks h2 {
        font-size: clamp(24px, 19.8261px + 1.3043vw, 36px);
        margin: 0 0 1em;

    }

    #thanks h2 span {
        display: block;
        font-size: clamp(14px, 12.6087px + 0.4348vw, 18px);
    }

    #thanks p {
        margin: 0 0 2em;
    }

    #thanks a {
        background-color: #ff9200;
        color: #fff;
        display: block;
        text-decoration: none;
        font-size: clamp(16px, 13.2174px + 0.8696vw, 24px);
        border-radius: 999px;
        padding: .5em 0;
        width: 300px;
        margin: 0 auto;
    }

    /*タブレット
    ------------------------------*/

    @media screen and (max-width: 1000px) {
        header #tel h2 {
            font-size: 17px;
        }

        header #tel address a {
            font-size: 28px;
        }

        #box01 div article {
            width: 31%;
        }

        #box05 article div {
            width: 15%;
        }

        .access_list figure {
            width: 30%;
            padding: 0 1.5em 0 0;
        }
    }

    /*スマホ
------------------------------*/

    @media screen and (max-width: 850px) {
        .pc {
            display: none;
        }

        .sp {
            display: block;
        }

        /* header */
        header {
            width: 100%;
            padding: 0;
        }

        header #logo {
            padding: .8em 4% .8em 3%;
            width: 40%;
            box-sizing: border-box;
        }


        header #tel {
            display: none;
        }


        header #header_btn {
            width: 60%;
            box-sizing: border-box;
            margin-left: auto;
        }

        header #header_btn ul {
            display: flex;
        }

        header #header_btn ul li {
            width: calc(100%/3);
        }

        header #header_btn ul li:nth-child(2) {
            margin: 0;
        }

        header #header_btn ul li a {
            color: #fff;
            text-decoration: none;
            font-weight: 700;
            padding: 1em .5em;
            font-size: 9px;
            letter-spacing: 0;
            line-height: 1.3;
        }

        header #header_btn ul li:first-of-type a {
            background-color: #67d162;
            border-radius: 0;
        }

        header #header_btn ul li:nth-child(2) a {
            background-color: #ff9200;
            border-radius: 0;
        }

        header #header_btn ul li:last-of-type a {
            background-color: #68b8eb;
            border-radius: 0;
        }

        header #header_btn ul li a img {
            width: 40%;
            margin: 0 auto 8px;
        }

        /* fv */
        #fv {
            background-image: none;
            padding: 0;
        }

        /* box01 */
        #box01 {
            padding: 10% 0;
        }

        #box01::before {
            top: -.1%;
        }

        #box01 h2 {
            margin: 0 0 5%;
        }


        #box01 div article {
            text-align: center;
            margin: 0 0 .5em;
            width: 47%;
            font-size: 13px;
        }

        /* box02 */
        #box02 {
            padding: 10% 0;
        }

        #box02::before {
            top: 0%;
        }

        #box02 h2 {
            margin: 0 0 3%;
        }

        #box02>p {
            margin: 0 auto 5%;
            width: 90%;
        }

        #box02 article {
            flex-direction: column;
        }

        #box02 article figure {
            width: 100%;
        }

        #box02 article div {
            width: 100%;
            padding: 1.5em;
        }

        /* box03 */
        #box03 {
            padding: 10% 0;
        }

        #box03::before {
            top: 0%;
        }

        #box03_top {
            background-image: none;
            padding: 0;
            margin: 0 auto 5%;
            width: 100%;
        }

        #box03_top p {
            width: 90%;
            margin: 0 auto 5%;
        }


        .box03_btn_top {
            flex-direction: column;
            margin: 0 auto 10%;
        }

        .box03_btn_top li {
            width: 100%;
            margin: 0 0 1%;
        }


        .about {
            flex-direction: column;
        }

        .about figure {
            width: 100%;
            margin: 0 0 10%;
        }

        .about div {
            width: 100%;
        }


        #box03 table th {
            font-size: 9px;
        }



        #box03 table td {
            padding: .3em;
            font-size: 9px;
        }

        #box03 .about table th {
            font-size: 12px;
        }

        #box03 .about table td {
            font-size: 12px;
            padding: 1em;
        }

        .box03_btn_bottom {
            flex-direction: column;
            padding: 10% 0 10%;
        }

        .box03_btn_bottom li {
            width: 100%;
            border-radius: 999px;
        }

        /* box04 */
        #box04 {
            padding: 10% 0;
        }

        #box04::before {
            top: 0%;
        }

        #box04 h2 {
            margin: 0 0 5%;
        }

        #box04 div {
            flex-direction: column;
        }

        #box04 div article {
            width: 100%;
            margin: 0 0 1em;
        }

        /* box05 */
        #box05 {
            padding: 10% 0;
        }

        #box05::before {
            top: 0%;
        }

        #box05 h2 {
            margin: 0 0 5%;
        }


        #box05 article div {
            width: 35%;
            padding: .5em;
        }

        .v-step {
            font-size: clamp(11px, 12.6087px + 0.4348vw, 18px);
        }

        .num {
            font-size: clamp(55px, 23.4783px + 3.913vw, 72px);
        }

        /* contact */
        #contact {
            padding: 10% 0;
        }

        #contact::before {
            top: 0%;
        }

        #contact>p {
            margin: 0 auto 3%;
            width: 90%;
        }

        /* box07 */
        #box07 {
            padding: 10% 0;
        }

        #box07::before {
            top: -0%;
        }

        #box07 article {
            flex-direction: column;
        }

        #box07 article:first-of-type {
            margin: 0 auto 10%;
        }

        #box07 article>figure,
        .access_text {
            width: 100%;
            margin: 0 0 5%;
        }


        .access_list {
            width: 100%;
            align-items: flex-start;
        }

        .access_list:first-of-type {
            margin: 0 0 3%;
        }

        .access_list figure {
            width: 20%;
            padding: 0 5% 0 0;
        }


        .access_list div {
            width: 80%;
        }

        .access_list p,
        .access_list ul {
            margin: 0 0 5%;
        }


        #map iframe {
            height: 250px;
        }

        /* box08 */
        #box08 {
            padding: 10% 0;
            width: 90%;
            margin: 0 auto;
        }


        #box08 p {
            margin: 0 0 5%;
        }

        #box08 div {
            width: 100%;
        }

        /* footer */
        footer {
            font-size: 10px;
        }

        #thanks {
            padding: 10% 0;
            text-align: center;
            width: 90%;
            margin: 0 auto;
        }
    }