@charset "utf-8";

/* CSS Document */
/* ==========================================================================================
■■■■■■　PC/タブレット調整　■■■■■■
========================================================================================== */
@media screen and (max-width: 1279px) {
    .infoBanners .infoBannarItem01 li {
        width: calc(33% - 1rem);
    }

    .infoBanners .infoBannarItem01 li.type01 {
        order: 98;
    }

    .infoBanners .infoBannarItem01 li.type02 {
        order: 99;
    }
}

@media screen and (max-width: 1080px) {

    #homeMainVisual #slogan {
        left: 2.5rem;
        bottom: 2.5rem;
    }

    /*
    #homeMainVisual .infoBanners {
        right: 2.5rem;
        bottom: 2.5rem;
    }

    #homeMainVisual .infoBanners li,
    #homeMainVisual .infoBanners li a {
        min-width: 260px;
    }

    #homeMainVisual .infoBanners li a {
        padding: 1.5rem 2rem;
    }*/

    #secInfo .section__subtitle {
        padding-top: 3rem;
    }

    .infoBanners .infoBannarItem01 ul {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        flex-direction: column;
        margin-left: 0;
        margin-right: 0;
    }

    .infoBanners .infoBannarItem01 li {
        width: 100%;
        display: block;
    }

    .infoBanners .infoBannarItem01 li a {
        color: #1a1a1a;
    }

    .infoBanners .infoBannarItem01 ul:nth-of-type(1) li a {
        background: #cbc6ba;
    }

    .infoBanners .infoBannarItem01 ul:nth-of-type(2) li a {
        /* background: #b2b2b2; */
    }

    .infoBanners .infoBannarItem01 li.type01 {
        order: -1;
    }

    .infoBanners .infoBannarItem01 li.type01::after,
    .infoBanners .infoBannarItem01 ul:nth-of-type(2) li:first-of-type:before,
    .infoBanners .infoBannarItem01 li.type02::before {
        content: "";
        display: block;
        width: 100%;
        height: 5px;
        background-image: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 3px, #1a1a1a 3px, #1a1a1a 4px);
    }

    .infoBanners .infoBannarItem01 li.type01::after {
        margin-top: 1rem;
    }

    .infoBanners .infoBannarItem01 ul:nth-of-type(2) li:first-of-type::before,
    .infoBanners .infoBannarItem01 li.type02::before {
        margin-bottom: 1rem;
    }

    .infoBanners .infoBannarItem01 li.type01 a,
    .infoBanners .infoBannarItem01 li.type02 a {
        background: #cbc6ba !important;
        color: #1a1a1a;
        /* border: 1px solid #1a1a1a; */
    }
}

/* ==========================================================================================
■■■■■■　スマホ通常設定　■■■■■■
========================================================================================== */
@media screen and (max-width: 768px) {
    * {
        font-size: 1rem;
    }

    html {
        /*font-size: 62.5%;*/
    }

    .mbShow {
        display: block;
    }

    .mbNoShow {
        display: none;
    }

    .Btn-ish a {
        width: auto !important;
    }

    .notes {
        line-height: 1.6;
    }


    /* ------------------------------------ */
    header {
        position: relative;
        height: auto;
    }

    #globalHeader {}

    #globalHeader__content {
        padding: 0;
        height: auto;
        background: #0094d7;
    }

    #globalHeader__nav {
        width: 100%;
    }

    .globalHeader__inner {
        padding: 0;
    }

    #globalHeader__items {
        /*---メニューを縦並びに */
        display: flex;
        flex-direction: column;
        color: #FFFFFF;
        transition: .3s;
        padding: 5em 0 5rem;
        height: 100vh;
        /* メニューの位置マイナス指定で画面外に */
        position: fixed;
        right: -100%;
        width: 100%;
        background: rgba(var(--color01-rgb), 0.95);
    }

    #globalHeader__logo {
        display: none;
    }

    .globalHeader__Item {
        width: 100%;
        height: 5rem;
        display: flex;
        justify-content: center;
        align-items: center;
        letter-spacing: 0.1rem;
        padding: 1rem 0;
    }

    .globalHeader__Item a {
        font-weight: 300;
    }

    .globalHeader__Item {
        margin: 0;
        position: relative;
    }

    #globalHeader .header_rubby {
        color: rgba(255, 255, 255, 0.5);
        display: block;
        margin-top: 0.1rem;
        font-weight: 100;
    }

    .globalHeader__Item:not(:first-of-type):before {
        display: none;
    }

    #globalHeader__items li.current a,
    #globalHeader__items li a:hover {
        color: #fff;
    }

    #globalHeader__specular {
        position: relative;
        display: none;
    }

    #mb_logo {
        display: block;
        position: absolute;
        left: 2rem;
        top: 1.5rem;
    }

    #mb_logo a {
        display: block;
        margin-right: 120px;
    }


    #mb_logo img {
        height: 3.5rem;
    }

    .menuBtn {
        /* ボタンの配置位置  */
        display: block;
        position: fixed;
        top: 1rem;
        right: 1rem;
        /* ボタンの大きさ  */
        width: 80px;
        height: 80px;
        /* 最前面に */
        z-index: 10;
        border: none;
        background: none;
        outline: none;
    }

    /***** 真ん中のバーガー線 *****/
    .btn-line {
        display: block;
        position: relative;
        /* バーガー線の位置基準として設定 */
        width: 100%;
        /* 線の長さと高さ */
        height: 4px;
        background-color: #FFF;
        /* バーガー線の色 */
        transition: .2s;
    }

    /****** 上下のバーガー線 *****/
    .btn-line::before,
    .btn-line::after {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: #FFF;
        transition: .5s;
    }

    .btn-line::before,
    .btn-line::after,
    .btn-line {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }

    .btn-line::before {
        /* 上の線の位置 */
        transform: translateY(-16px);
        right: 0;
    }

    .btn-line::after {
        /* 下の線の位置 */
        transform: translateY(16px);
        left: 0;
    }

    #globalHeader__items.open {
        right: 0;
        padding: 8rem 0 2rem;
        justify-content: center;
    }

    /***** メニューオープン時 *****/
    .btn-line.open {
        background-color: transparent;
        /* 真ん中の線を透明に */
    }

    .btn-line.open::before,
    .btn-line.open::after {
        content: "";
        background-color: #FFF;
        /* 上下の線の色を変える */
        transition: .2s;
    }

    .btn-line.open::before {
        transform: rotate(45deg);
        /* 上の線を傾ける */
    }

    .btn-line.open::after {
        transform: rotate(-45deg);
        /* 下の線を傾ける */
    }

    #conceptMainPhrase {
        background-position: center;
        background-size: contain;
        margin-bottom: 5rem;
        height: auto;
        padding: 0;

    }

    #conceptMainPhrase::before {
        background-size: contain;
    }

    #conceptMainPhrase p {
        font-size: 0.9rem;
        line-height: 1.6rem;
        letter-spacing: 0.05rem;
        margin-bottom: 2rem;
        color: #333;
        text-align: justify;
    }

    .the_inner {
        width: 100%;
        margin: 0 auto;
        padding: 0 2rem;
    }

    #homeMainVisual {
        display: block;
    }

    #homeMainVisual #slogan {
        position: absolute;
        margin: 0 auto;
        width: 100%;
        /*top: 35%;*/
        bottom: 10vh;
        left: 0;
        right: 0;
        padding: 1.5rem;
    }

    #homeMainVisual #slogan h2 {
        color: #FFF;
        font-size: 2.6rem;
        line-height: 0.8;
        margin-bottom: 1rem;
        padding-bottom: 1rem;
        /* border-bottom: 1px solid #FFF; */
        text-shadow: -3px 5px 0 rgb(0 0 0 / 30%);
        letter-spacing: 0.07rem;
        text-align: left;
    }

    #homeMainVisual #slogan .sloganControlled {
        padding: min(8vw, 4rem) min(8vw, 4rem) min(6vw, 3rem);
        margin: 0 -1.5rem 1rem;
        border-top: 3px solid #fff;
        border-bottom: 3px solid #fff;
    }

    #homeMainVisual #slogan h2 #sloganEnphasis {
        font-size: 5rem;
    }

    #homeMainVisual #slogan p {
        color: #FFF;
        text-shadow: -1px 1px 0 rgb(0 0 0 / 50%);
        letter-spacing: 0.05rem;
        font-size: 0.8rem;
        text-align: left;
        font-weight: 700;
        padding-left: 0;
    }

    .bg_slideshow {
        height: -webkit-fill-available;
        height: 100vh;
    }

    .infoBanners {
        position: static;
        padding: 2rem;
        background: #FAFAFA;
    }

    /*
    .infoBanners li:first-of-type {
        margin-bottom: 1.5rem;
    }*/

    .infoBanners li:last-child {
        margin-bottom: 0;
    }

    .infoBanners li a {
        padding: 2rem 4rem;
        font-size: 1.05rem;
        width: 100%;
        min-width: 100%;
    }

    /*
    .infoBanners li:first-of-type a {
        background: #FAFAFA;
        color: #0094d7;
        border: 1px solid #0094d7;
    }*/

    /*
    .infoBanners li:first-of-type .ruby {
        border-top: 1px solid #0094d7;
    }

    .infoBanners li:nth-child(2) a,
    .infoBanners li:nth-child(3) a,
    .infoBanners li:nth-child(4) a {
        background: #0094d7;
    }

    .infoBanners li:nth-child(5) a,
    .infoBanners li:nth-child(6) a,
    .infoBanners li:nth-child(7) a {
        background: #3062bb;
    }*/

    /*.infoBanners li:nth-child(even) a {
	background: #3062bb;
    */

















    .each__section {
        padding: 3rem 0;
    }

    .section__title {
        margin-bottom: 5rem;
    }

    .section__title h2 {
        font-size: 4rem;
        letter-spacing: 0.3rem;
    }

    .section__subtitle {
        text-align: center;
        margin-bottom: 3rem;
        position: relative;
    }

    .the_wrapper {
        flex-wrap: wrap;
    }

    .the_wrapper .wrap_content {
        display: block;
        width: 100%;
        margin-bottom: 2rem;
    }

    .the_wrapper.contentType_wide .wrap__image {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 0;
    }

    .contentBox .txt {
        line-height: 1.6;
    }

    #conceptTheFearture .contentType_01,
    #conceptTheFearture .contentType_02 {
        width: 100%;
        padding: 0;
    }

    #conceptTheFearture .contentType_01.contentBox {
        margin-top: 0.5rem;
    }

    .the_wrapper .wrap__image {
        display: block;
        width: 100%;
    }

    .the_wrapper .wrap__image picture {
        padding-left: 0;
    }

    #featureWrapper .contentType_01 .wrap__image picture,
    #featureWrapper .contentType_02 .wrap__image picture {
        padding: 0;
    }

    #featureWrapper {
        padding: 0 0 5rem 0;
    }

    #featureWrapper h3 {
        font-size: 3rem !important;
    }

    #pointIntro h3 {
        letter-spacing: 0.1rem;
    }

    #pointIntro h3 .mbCtrl {
        font-size: 2.2rem;
        letter-spacing: -0.2rem;
    }

    #conceptTheFearture .wrap_content h3 {
        font-size: 2.7rem;
        letter-spacing: 0.05rem;
    }

    #conceptTheFearture .wrap_content h4 {
        font-size: 1.65rem;
    }

    #pointIntro .wideBgControl:nth-child(odd) .wrap_content,
    #pointIntro .wideBgControl:nth-child(even) .wrap_content {
        margin: 0;
    }

    .contentType_02 .wrap_content {
        order: 1;
    }

    .contentType_02 .wrap__image {
        order: 2;
    }

    #pointIntro #point_02 .wrap__image {
        order: 2;
    }

    .eachPointContents .btn {
        margin-bottom: 2rem;
        text-align: center;
    }

    #secOutline #outlineTable {
        padding: 0;
        margin-bottom: 2rem;
    }

    #secOutline #outlineTable th,
    #secOutline #outlineTable td {
        display: block;
        width: auto;
        padding: 1rem;
    }

    #secOutline #outlineTable th {
        border: none;
        background: #f5f4f0;
        color: var(--color01);
    }

    #secOutline #outlineTable td {
        padding: 1.5rem 1.5rem 2rem;
    }

    #secOutline #outlineTable .goodsDetail td {
        padding: 0 0 0.5rem 0;
        ;
    }

    #secFlow {
        padding-bottom: 5rem;
    }

    #secFlow h2 .mbCtrl {
        display: none;
    }

    #flowchart {
        padding: 0;
    }

    .flowchart__items dl {
        display: block;
    }

    .flowchart__items dt,
    .flowchart__items dd {
        display: block;
        padding: 0;
        margin: 0;
        width: auto;
    }

    .flowchart__items dd {
        border: none;
        margin-bottom: 1rem;
    }

    .flowchart__items:after {
        display: block;
        width: 50px;
        height: 50px;
        border-top: 1px solid #1c4388;
        border-right: 1px solid #1c4388;
        transform: rotate(135deg);
        content: "";
        margin: 0 auto;
    }

    .flowchart__items:last-child:after {
        display: none;
    }

    .flowchart__items+.flowchart__items {
        margin-top: 0;
    }

    #secOutline #outlineTable table td li span.desc {
        display: block;
        margin-top: 0.8rem;
        margin-bottom: 1rem;
        text-indent: 0;
        letter-spacing: 0;
        text-align: justify;
    }

    #secOutline #outlineTable table td li {
        text-align: justify;
        padding-right: 1rem;
    }

    #entryDetail {
        padding: 0;
    }

    .entry__title {
        margin-bottom: 1rem;
        text-align: center;
        display: inline-block;
        width: 85%;
        margin: 0 auto 2rem;
        position: relative;
        background: #FFF;
        z-index: 1;
        padding: 1rem 2rem;
        color: var(--color01);
    }

    /* .entry__title:before {
        position: absolute;
        content: '';
        left: 0;
        top: 0;
        width: 0;
        height: 0;
        border-left: solid 2rem #0094d7;
        border-bottom: solid 94px transparent;
        z-index: 2;
    }
    .entry__title:after {
        position: absolute;
        content: '';
        right: 0;
        top: 0;
        width: 0;
        height: 0;
        border-left: solid 2rem #FFF;
        border-bottom: solid 94px #0094d7;
        z-index: 2;
    } */
    .youbi {
        display: inline-block;
        margin-left: -0.5rem;
        margin-right: -0.5rem;
    }

    .howToEntry .txts {
        width: 100%;
    }


    .howToEntry p {
        font-size: 1rem;
        margin: 0 auto 3rem;
        width: 100%;
        letter-spacing: 0.1rem;
        font-weight: 300;
        text-align: left;
        line-height: 1.8;
    }

    .entryboxWrapper {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 100%;
        margin: 0 auto;
    }

    .entrybox_items {
        flex-basis: 100%;
        min-width: 100%;
        padding: 2rem 1.5rem;
        border: 1px solid #CCC;
        background: rgba(255, 255, 255, 0.1);
    }

    .entrybox_items:first-child {
        margin-bottom: 1rem;
    }

    .entrybox_items a {
        padding: 0;
    }

    #faqLists {
        padding: 0;
        background: none;
    }

    .faq__items dl {
        position: relative;
        line-height: 1.8;
        padding: 1rem 1.5rem;
        background: rgba(255, 255, 255, 0.7);
    }

    .faq__items .question {
        padding-left: 4rem;
        width: 85%;
        display: flex;
        align-items: center;
        position: relative;
        height: 4rem;
        font-weight: 500;
        color: #1c4388;
        font-size: 1rem;
    }

    .faq__items .answerWrapper {
        margin: 1rem 0;
    }

    .faq__items .answer {
        font-size: 0.95rem;
        width: 96%;
    }

    .faq__items .questionWrapper::before {
        top: 48%;
        right: 5px;
        transform: rotate(0deg);
    }

    .faq__items .questionWrapper::after {
        top: 48%;
        right: 5px;
        transform: rotate(90deg);
    }

    .termWrapper {
        padding: 0;
    }

    .termWrapper h4 {
        font-size: 1.2rem;
        letter-spacing: 0;
        text-align: center;
    }

    .term__items {
        text-align: justify;
        line-height: 1.6;
        font-size: 0.9rem;
        letter-spacing: 0;
    }

    .contactWrapper {
        /* padding: 5rem 0 0; */
        padding: 0;
        width: 100%;
    }

    .contactContents h4 {
        font-size: 1.3rem;
    }

    .contactContents li.tel,
    .contactContents li.mail {
        font-size: 1.7rem;
    }

    .termWrapper p {
        font-size: 0.9rem;
        letter-spacing: 0;
        line-height: 1.6;
    }

    .information {
        /* margin: 1.5rem; */
        margin: 0;
        background: #FAFAFA;
        padding: 1.5rem 2rem;
        border-radius: 0.25rem;
    }

    .information dl {
        display: block;
        align-items: center;
        color: #333;
        font-size: 0.8rem;
        padding-bottom: 1rem;
        border-bottom: 1px solid #CCC;
    }

    .information dl dt {
        /*margin-bottom: 1rem;
        margin-right: 0;*/
        padding-bottom: 0.25rem;
        /*border-bottom: 1px solid #333;*/
        width: auto;
    }

    .information dl dt:after {
        display: none;
    }

    .information dl dd {
        /*text-align-last: justify;*/
        text-align: left;
        font-size: 0.9rem;
    }

    /* ----- modaal ----- */
    .modaal-outer-wrapper .modaal-container {
        max-width: 640px;
    }


    /*----- FSRESULT -----*/
    .fsResult {
        margin: 0 1.5rem;
    }

    .gallery-list-item {
        width: calc(100% / 2);
    }

    .taikaiResultOutputTitle {}
}