@charset "UTF-8";

/* main_img
------------------------------------*/
.entryLayout #mainImg {
    padding-top: 60px;
}
.entryLayout #mainImg a:hover {
    opacity: 0.85;
}

            /* 【スマートフォン用のスタイル記述】 */
            @media screen and (min-width: 760px) {
                .entryLayout #mainImg {
                    padding-top: 68px;
                }
                .entryLayout #mainImg ul li {
                    margin: 0 10px;
                }
                .entryLayout #mainImg .slider {
                    padding: 20px 0;
                    background: url("../img/index/main_bg01.png")no-repeat center center/cover;
                }
            }

            /* 【タブレット用のスタイル記述】 */
            @media screen and (min-width: 960px) {
                .entryLayout #mainImg {
                    padding-top: 80px;
                }
                .entryLayout #mainImg .slider {
                    padding: 40px 0;
                }
            }



/* c01
------------------------------------*/
.entryLayout #c01 {
    background: url("../img/index/c01_bg01_sp.png")no-repeat left bottom/contain;
    overflow: hidden;
}
.entryLayout #c01 .inner {
    padding-bottom: 170px;
    position: relative;
}
.entryLayout #c01 .inner::after {
    position: absolute;
    content: "";
    background: url("../img/index/c01_before01.png")no-repeat center center/cover;
    width: 219px;
    height: 264px;
    top: -130px;
    right: -30px;
    z-index: -1;
}
.entryLayout #c01 h2 {
    text-align: left;
}
.entryLayout #c01 p {
    line-height: 3;
    font-family: "Shippori Mincho", serif;
}



            /* 【スマートフォン用のスタイル記述】 */
            @media screen and (min-width: 760px) {
                .entryLayout #c01 .inner::after {
                    width: 349px;
                    height: 414px;
                    top: -220px;
                    right: -60px;
                }
                .entryLayout #c01 .inner {
                    padding-bottom: 410px;
                }
                .entryLayout #c01 p {
                    line-height: 3.5;
                }
                .entryLayout #c01 {
                    background-size: cover;
                }
            }

            /* 【タブレット用のスタイル記述】 */
            @media screen and (min-width: 960px) {
                .entryLayout #c01 {
                    background: url("../img/index/c01_bg01.png")no-repeat left top/contain;
                    width: 100%;
                }
                .entryLayout #c01 .inner {
                    -ms-writing-mode: tb-rl;
                    writing-mode: vertical-rl;
                    width: 100%;
                    max-height: 410px;
                    font-family: "Shippori Mincho", serif;
                    padding-bottom: 0;
                }
                .entryLayout #c01 .inner::after {
                    right: -210px;
                }
                .entryLayout #c01 h2 {
                    margin-bottom: 0;
                    margin-left: 60px;
                }
            }



/* c02
------------------------------------*/
.entryLayout #c02 {
    background: url("../img/index/c02_bg01.png")no-repeat center center/cover;
    overflow: hidden;
}
.entryLayout #c02 h2 {
    color: #fff;
}
.entryLayout #c02 h2 span {
    color: #b8d203;
    font-size: 2rem;
}
.entryLayout #c02, .entryLayout #c02 .inner, .entryLayout #c02 .f_text, .entryLayout #c02 .flex {
    position: relative;
}
.entryLayout #c02 .inner {
    z-index: 1;
}
.entryLayout #c02::before, .entryLayout #c02 .inner::before, .entryLayout #c02 .inner::after {
    position: absolute;
    content: "";
    background: url("../img/index/c02_before01.png")no-repeat center center/cover;
    width: 270px;
    height: 270px;
}
.entryLayout #c02 .inner::before, .entryLayout #c02 .inner::after {
    z-index: -1;
}
.entryLayout #c02::before {
    bottom: -60px;
    right: -60px;
    z-index: 0;
}
.entryLayout #c02 .inner::before {
    left: -100px;
    top: 210px;
}
.entryLayout #c02 .inner::after {
    right: -100px;
    top: -180px;
}
.entryLayout #c02 .flex .f_text {
    background-color: #fff;
    padding: 40px 20px;
}
.entryLayout #c02 .flex {
    margin: 30px 0;
}
.entryLayout #c02 .f_03 {
    margin-bottom: -60px;
}
.entryLayout #c02 .f_01 {
    margin-top: 100px;
}
.entryLayout #c02 .f_text::before {
    position: absolute;
    top: -70px;
    left: -10px;
    color: #b8d203;
    text-shadow: #112c20 1px 0 10px;
    font-size: 6rem;
    font-family: "Shippori Mincho", serif;
    line-height: 0.9;
}
.entryLayout #c02 .f_01 .f_text::before {
    content: "01";
}
.entryLayout #c02 .f_02 .f_text::before {
    content: "02";
}
.entryLayout #c02 .f_03 .f_text::before {
    content: "03";
}
.entryLayout #c02 h3 span {
    color: #259162;
}
.entryLayout #c02 .f_text {
    margin-bottom: 30px;
}
.entryLayout #c02 .img {
    position: relative;
    top: -60px;
}


            /* 【スマートフォン用のスタイル記述】 */
            @media screen and (min-width: 760px) {
                .entryLayout #c02 h2 span {
                    font-size: 2.5rem;
                }
                .entryLayout #c02::before, .entryLayout #c02 .inner::before, .entryLayout #c02 .inner::after {
                    width: 300px;
                    height: 300px;
                }
                .entryLayout #c02 .inner::before {
                    left: -110px;
                    top: 30px;
                }
                .entryLayout #c02 .inner::after {
                    right: -100px;
                    top: -190px;
                }
                .entryLayout #c02 .flex {
                    align-items: center;
                    margin: 80px 0;
                }
                .entryLayout #c02 .f_03 {
                    margin-bottom: 0;
                }
                .entryLayout #c02 .f_01{
                    margin-top: 100px;
                }
                
                .entryLayout #c02 .f_text::before {
                    top: -90px;
                    left: -20px;
                    font-size: 7rem;
                }
                .entryLayout #c02 .f_02 .f_text::before {
                    left: auto;
                    right: -20px;
                }
                .entryLayout #c02 .flex .f_text {
                    padding: 30px 40px;
                    min-height: calc(220px - 60px);
                    margin-bottom: 0;
                    width: calc(67% - 80px);
                }
                .entryLayout #c02 .flex.rev .f_text {
                    margin-left: auto;
                }
                .entryLayout #c02 .img {
                    position: absolute;
                    right: 0;
                    top: 50%;
                    transform: translateY(-50%);
                    width: 35%;
                }
                .entryLayout #c02 .flex.rev .img {
                    right: auto;
                    left: 0;
                }
            }

            /* 【タブレット用のスタイル記述】 */
            @media screen and (min-width: 960px) {
                .entryLayout #c02::before, .entryLayout #c02 .inner::before, .entryLayout #c02 .inner::after {
                    width: 420px;
                    height: 420px;
                }
                .entryLayout #c02 .inner::before {
                    left: -210px;
                    top: -40px;
                }
                .entryLayout #c02 .inner::after {
                    right: -120px;
                    top: -250px;
                }
                .entryLayout #c02 .f_text::before {
                    top: -120px;
                    left: -30px;
                    font-size: 9rem;
                }
                .entryLayout #c02 .f_02 .f_text::before {
                    right: -30px;
                }
                .entryLayout #c02 .flex {
                    align-items: center;
                    margin: 200px 0;
                }
                .entryLayout #c02 .f_03 {
                    margin-bottom: 0;
                }
                .entryLayout #c02 .f_01{
                    margin-top: 130px;
                }
            }



/* c03
------------------------------------*/
.entryLayout #c03 {
    overflow: hidden;
}
.entryLayout #c03, .entryLayout #c03 .inner {
    position: relative;
}
.entryLayout #c03::after, .entryLayout #c03 .inner::before, .entryLayout #c03 .inner::after {
    position: absolute;
    content: "";
    background: url("../img/index/c03_before01.png")no-repeat center center/cover;
    width: 319px;
    height: 325px;
    z-index: -1;
}
.entryLayout #c03::after {
    top: -100px;
    right: -120px;
}
.entryLayout #c03 .inner::before {
    top: 50%;
    transform: translateY(-50%);
    left: -170px;
}
.entryLayout #c03 .inner::after {
    bottom: -150px;
    right: -90px;
}
.entryLayout #c03 .flex {
    margin-bottom: 60px;
}
.entryLayout #c03 .bnr_box .bnr {
    position: relative;
}
.entryLayout #c03 .bnr_box .bnr:not(:last-child) {
    margin-bottom: 10px;
}
.entryLayout #c03 .bnr_box .btn {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 30px;
    max-width: 300px;
    width: 90%;
}



            /* 【スマートフォン用のスタイル記述】 */
            @media screen and (min-width: 760px) {
                .entryLayout #c03 .flex {
                    flex-wrap: wrap;
                    gap: 20px;
                }
                .entryLayout #c03 .flex_box02 {
                    margin-right: 0;
                    width: calc(33% - 12px);
                }
                .entryLayout #c03::after, .entryLayout #c03 .inner::before, .entryLayout #c03 .inner::after {
                    width: 359px;
                    height: 366px;
                }
                .entryLayout #c03::after {
                    right: -130px;
                }
                .entryLayout #c03 .inner::before {
                    left: -140px;
                }
                .entryLayout #c03 .inner::after {
                    bottom: -160px;
                    right: -110px;
                }
                .entryLayout #c03 .bnr_box .bnr:not(:last-child) {
                    margin-bottom: 20px;
                }
                .entryLayout #c03 .bnr_box .btn {
                    position: absolute;
                    left: auto;
                    transform: translateY(-50%);
                    bottom: auto;
                    top: 50%;
                    right: 50px;
                }
            }

            /* 【タブレット用のスタイル記述】 */
            @media screen and (min-width: 960px) {
                .entryLayout #c03::after, .entryLayout #c03 .inner::before, .entryLayout #c03 .inner::after {
                    width: 529px;
                    height: 536px;
                }
                .entryLayout #c03 .inner::before {
                    left: -240px;
                }
                .entryLayout #c03 .inner::after {
                    bottom: -240px;
                    right: -230px;
                }
            }



/* c04
------------------------------------*/
.entryLayout #c04 {
    background: url("../img/index/c04_bg01.png")no-repeat center center/cover;
}
.entryLayout #c04 h2 .en {
    color: #259162;
}
.entryLayout #c04 .inner {
    max-width: 900px;
}



            /* 【スマートフォン用のスタイル記述】 */
            @media screen and (min-width: 760px) {
            }

            /* 【タブレット用のスタイル記述】 */
            @media screen and (min-width: 960px) {
            }



/* c05
------------------------------------*/
.indexLayout .contact_co {
    background-color: #395c4d;
}
.indexLayout .contact_co h2 {
    color: #fff;
}
.indexLayout .contact_co h2 .en {
    color: #b8d203;
}
.indexLayout .contact_co .w_box {
    background-color: #fff;
    padding: 40px 0;
}
.indexLayout .contact_co .w_box > div {
    margin: 0 auto;
    max-width: 900px;
    width: 90%;
}
.indexLayout .contact_co .w_box .btn {
    margin: 40px auto 0;
    padding: 20px 0;
}
.indexLayout .contact_co .w_box input, .indexLayout .contact_co .w_box textarea {
    width: 100%;
    font-size: 100%;
    padding: 5px 0;
    border: 1px solid #ccc;
}
.indexLayout .contact_co .alert-danger {
    color: firebrick;
}


            /* 【スマートフォン用のスタイル記述】 */
            @media screen and (min-width: 760px) {
                .indexLayout .contact_co .w_box th {
                    width: 30%;
                }
                .indexLayout .contact_co .w_box td {
                    width: 70%;
                }
            }

            /* 【タブレット用のスタイル記述】 */
            @media screen and (min-width: 960px) {
                .indexLayout .contact_co .w_box {
                    padding: 80px 0;
                }
                .indexLayout .contact_co .w_box th {
                    width: 25%;
                }
                .indexLayout .contact_co .w_box td {
                    width: 75%;
                }
            }