@charset "UTF-8";

/* ============================= 
common
==============================*/
:root {
    --mainblack: #2A2A2A;
    --green: #224838;
    --brown: #7E6D6D;
    --gray: #D9D9D9;
    --darkgray: #808080;
    --background: #FDFEF8;
}

/* 変数設定 */

html {
    font-size: 62.5%;
}

.body {
    font-family:
        'Klee One',
        Arial,
        sans-serif;
    font-weight: 400;
    color: var(--black, #2A2A2A);
    background-color: var(--background, #FDFEF8);
    line-height: 1.5;
}

Img {
    max-width: 100%;
    height: auto;
}

/* ============================= 
header
==============================*/
.nav {
    background-image: url(../images/mainback.jpeg);
    background-size: contain;
    padding: 31px 31px 0 61px;
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    transform: translateX(-100%);
    transition: transform 0.4s;
}

.nav__btn {
    width: 32px;
    height: 32px;
    margin-left: 83.8%;
}

.nav__list {
    color: var(--green);
    font-family: Oswald;
    font-size: 2.4rem;
    font-weight: 500;
}

.nav__item {
    margin-top: 30px;
}


/* .nav.active表示 */
.nav.active {
    transform: translateX(0);
}

.header__btn {
    width: 66px;
    height: 66px;
    position: fixed;
    top: 500px;
    right: 6.2%;
    z-index: 300;
}

/* header tablet */
@media screen and (min-width: 767px) {
    .nav {
        display: none;
    }

    .header__btn {
        display: none;
    }
}

/* header pc */
@media screen and (min-width: 769px){
    .nav {
        display: none;
    }

    .header__btn {
        display: none;
    }
}/* pc 769px */


/* ============================= 
article header
==============================*/
.article__header {
    width: 100%;
    height: 596px;
    background-image: url(../images/mainback.jpeg);
    background-size: cover;
    background-repeat: no-repeat;
}

.article__item {
    padding: 27px 0 0 31px;
}

.article__topic {
    width: 100%;
    height: 397px;
    background-image: url(../images/main_sp.png);
    background-size: cover;
    background-repeat: no-repeat;
}

.article__topic img {
    width: 160px;
    height: 50px;
    margin: 173px 25.3%;
}

.article__nav {
    display: none;
}

.article__menu {
    padding: 30px 20.2% 43px;
}

.open,
.dayoff {
    display: flex;
}

.open__item {
    margin-left: 47px;
}

.dayoff,
.article__sns {
    margin-top: 10px;
}

.dayoff__item {
    margin-left: 31px;
}

.open__title,
.open__item,
.dayoff__title,
.dayoff__item {
    color: #224838;
    font-family: Oswald;
    font-size: 1.6rem;
    font-weight: 400;
}

.lead {
    width: 100%;
    height: 210px;
    background-color: var(--green);
}

.lead__title {
    display: inline-block;
    width: 100%;
    margin: 39px auto 0;
    color: #F0EBE3;
    text-align: center;
    font-family: "Klee One";
    font-size: 1.4rem;
}

.lead__name {
    display: inline-block;
    width: 100%;
    margin: 45px auto;
    color: #F5F5F5;
    text-align: center;
    font-family: "Klee One";
    font-size: 1.8rem;
    position: relative;
}

.lead__name::before {
    content: '';
    width: 85%;
    height: 1px;
    background-color: #F5F5F5;
    display: block;
    position: absolute;
    left: 20px;
    top: -15px;
}

.lead__name::after {
    content: "";
    width: 85%;
    height: 1px;
    background-color: #F5F5F5;
    display: block;
    position: absolute;
    left: 20px;
    top: 35px;
}


/* article tablet */
@media screen and (min-width: 767px) {
    .article__header {
        width: 100%;
        height: 391px;
    }

    .article__item {
        padding: 34px 0 0 0;
        display: flex;
    }

    .article__topic {
        width: 73.8%;
        height: 357px;
        background-image: url(../images/main_pc.png);
        background-size: cover;
        background-repeat: no-repeat;
    }

    .article__topic img {
        display: block;
        margin: 154px auto;
        width: 160px;
        height: 50px;
    }

    .article__menu {
        padding: 0 15px 29px 18px;
    }
    
    .article__nav {
        display: block;
        margin-bottom: 42px;
    }

    .article__items {
        margin-top: 12px;
    }

    .article__items:first-of-type {
        margin-top: 0;
    }

    .article__items a {
        color: #224838;
        font-family: Oswald;
        font-size: 1.6rem;
        font-weight: 500;
    }

    .open__title {
        position: relative;
    }

    .open__title::before {
        content: '';
        width: 160px;
        height: 1px;
        background-color: var(--green);
        display: block;
        position: absolute;
        top: -21px;
    }

    .open {
        gap: 0 25px;
    }

    .dayoff {
        gap: 24px;
    }
    
    .open__title,
    .open__item,
    .dayoff__title,
    .dayoff__item {
        color: #224838;
        font-family: Oswald;
        font-size: 1.4rem;
        margin-left: 0;
    }

    .lead__title {
        margin: 43px auto 0;
    }

    .spbr__title {
        display: none;
    }

    .lead__name {
        margin: 49px auto 0;
    }

    .lead__name::before {
        content: '';
        width: 63%;
        height: 1px;
        background-color: #F5F5F5;
        display: block;
        position: absolute;
        left: 148px;
        top: -30px;
    }
    
    .lead__name::after {
        content: "";
        width: 63%;
        height: 1px;
        background-color: #F5F5F5;
        display: block;
        position: absolute;
        left: 148px;
        top: 50px;
    }
}/* tablet 767px */

/* article pc */
@media screen and (min-width: 1025px) {
    .article__header {
        width: 100%;
        height: 596px;
    }

    .article__item {
        padding: 41px 0 0 0;
        display: flex;
    }

    .article__topic {
        width: 80.1%;
        height: 555px;
        background-image: url(../images/main_pc.png);
        background-size: cover;
        background-repeat: no-repeat;
    }

    .article__topic img {
        display: block;
        margin: 230px auto;
        width: 343px;
        height: 106px;
    }

    .article__nav {
        display: block;
        margin-bottom: 95px;
    }

    .article__menu {
        padding: 32px 45px;
    }

    .article__items {
        margin-top: 23px;
    }

    .article__items a {
        color: #224838;
        font-family: Oswald;
        font-size: 1.8rem;
        font-weight: 500;
    }

    .open__title {
        position: relative;
    }

    .open__title::before {
        content: '';
        width: 202px;
        height: 1px;
        background-color: var(--green);
        display: block;
        position: absolute;
        top: -63px;
    }

    .open__title,
    .open__item,
    .dayoff__title,
    .dayoff__item {
        color: #224838;
        font-family: Oswald;
        font-size: 1.6rem;
        margin-top: 10px;
    }

    .article__sns {
        margin-top: 10px;
    }

    .lead {
        width: 100%;
        height: 301px;
    }

    .lead__title {
        margin: 82px auto 0;
        font-size: 1.6rem;
    }

    .spbr__title {
        display: none;
    }
    
    .lead__name {
        margin: 49px auto 112px;
        font-size: 2.4rem;
    }

    .lead__name::before {
        content: '';
        width: 42%;
        height: 1px;
        background-color: #F5F5F5;
        display: block;
        position: absolute;
        left: 28%;
        top: -27px;
    }

    .lead__name::after {
        content: "";
        width: 42%;
        height: 1px;
        background-color: #F5F5F5;
        display: block;
        position: absolute;
        left: 28%;
        top: 55px;
    }
}/* pc 1025px */


/* ============================= 
reform
==============================*/
.section--reform {
    padding: 80px 50px 20px;
}

.pc {
    display: none;
}

.reform__title {
    color: var(--brown, #7E6D6D);
    text-align: center;
    font-family: Oswald;
    font-size: 2.5rem;
    font-weight: 500;
}

.reform__titleJp {
    color: var(--brown, #7E6D6D);
    text-align: center;
    font-family: "Klee One";
    font-size: 1.5rem;
    margin-top: 5px;
}

.reform__img {
    margin: 37px auto;
    padding: 0 89px 0;
}

.pcbr {
    display: none;
}

.reform__maintxt {
    color: #000;
    font-family: "Klee One";
    font-size: 1.8rem;
    line-height: 1.5;
}

.reform__txt,
.reform__txt1 {
    color: var(--mainblack);
    font-family: "Klee One";
    font-size: 1.6rem;
    line-height: 1.5;
    margin-top: 20px;
}

.reform__txt1 {
    margin-top: 30px;
}

.reform__mainimg {
    margin-top: 100px;
    padding: 0 12px 0;
}


/* reform tablet */
@media screen and (min-width: 767px) {
    .section--reform {
        padding: 81px 0 27px;
    }

    .reform__item {
        padding: 0 143px;
    } 

    .reform__title {
        font-size: 2.7rem;
    }

    .reform__titleJp {
        font-size: 1.9rem;
        margin-top: 10px;
    }

    .reform__img {
        margin: 48px auto;
        padding: 0 143px;
    }

    .reform__content {
        padding: 0 143px;
    }

    .reform__mainimg {
        margin: 108px auto 0;
        padding: 0 107px;
    }
}/* tablet 767px */

/* reform pc */
@media screen and (min-width: 1025px) {
    .section--reform {
        padding: 120px 255px 0;
    }

    .reform__item {
        display: flex;
        align-items: stretch;
        padding: 0;
    }

    .reform__title {
        font-size: 3.2rem;
        font-weight: 500;
        text-align: left;
    }

    .reform__titleJp {
        font-size: 2.2rem;
        text-align: left;
    }

    .reform__img {
        margin: -33px 40px 0 71px;
        padding: 0;
        width: 245px;
        height: 231px;
    }

    .reform__content {
        margin-top: 40px;
        padding: 0;
    }

    .pcbr {
        display: block;
    }

    .reform__mainimg {
        margin-top: 120px;
        padding: 0;
    }

}/* PC 1025px */

/* ============================= 
example
==============================*/
.section--example {
    padding: 80px 40px;
}

.examlpe__title {
    color: #7E6D6D;
    text-align: center;
    font-family: "Klee One";
    font-size: 2.4rem;
}

.examlpe__img {
    margin-top: 6px;
    padding: 0 94px 0;
}

.examlpe__content {
    margin-top: 15px;
    background-image: url(../images/example_back_sp.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    width: 100%;
    height: auto;
}

.examlpe__item1 {
    padding: 43px 22px 51px;
}

.examlpe__mainimg1,
.examlpe__mainimg2 {
    width: 100%;
    height: auto;
}

.examlpe__name {
    color: var(--gray, #D9D9D9);
    text-shadow: 1px 3px 4px rgba(0, 0, 0, 0.60);
    font-family: "Klee One";
    font-size: 1.6rem;
    background-color: rgba(34, 72, 56, 0.80);
    padding: 17px 7px;
    text-align: center;
    width: 204px;
    height: 53px;
    margin: -50px auto 0;
    position: relative;
    z-index: 100;
}

.examlpe__txt {
    margin-top: 24px;
    color: var(--mainblack, #2A2A2A);
    font-family: "Klee One";
    font-size: 1.6rem;
    line-height: 1.5;
}

.examlpe__item2 {
    padding: 0 22px 44px;
}

/* reform tablet */
@media screen and (min-width: 767px) {
    .section--example {
        padding: 81px 101px;
    }

    .examlpe__title {
        font-size: 2.7rem;
    }

    .examlpe__img {
        margin: 10px auto 0;
        padding: 0 190px;
    }

    .examlpe__content {
        margin: 43px auto 0;
        height: 1037px;
        background-image: url(../images/example_back_tab.png);
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-position: center;
    }

    .examlpe__item1 {
        padding: 50px 73px 0;
    }

    .examlpe__name {
        padding: 15px 8px;
        width: 204px;
        height: 53px;
        margin-top: -80px;
    }

    .examlpe__txt {
        margin: 35px auto 0;
        padding: 0 37px;
    }

    .examlpe__item2 {
        padding: 0 73px;
    }

    .examlpe__mainimg2 {
        margin-top: 38px;
    }
}/* tablet 767px */


/* example pc */
@media screen and (min-width: 1025px) {
    .section--example {
        padding: 120px 133px;
    }

    .examlpe__title {
        font-size: 3rem;
    }

    .examlpe__img {
        margin: 7px auto 0;
        padding: 0 494px;
    }

    .examlpe__content {
        background-image: url(../images/example_back_pc.png);
        background-size: 100% 100%;
        background-position: center;
        background-repeat: no-repeat;
        padding: 139px 15px 83px;
        margin: 15px auto 0;
    }

    .examlpe__item1 {
        display: flex;
        align-items: center;
        gap: 0 20px;
        padding: 0;
    }

    .examlpe__item2 {
        display: flex;
        align-items: center;
        gap: 0 44px;
        margin-top: 70px;
        padding: 0;
    }

    .examlpe__mainimg1,
    .examlpe__mainimg2 {
        width: 492px;
        height: 323px;
    }

    .examlpe__name {
        font-size: 1.8rem;
        padding: 21px 8px;
        width: 248px;
        height: 67px;
        margin-top: -65px;
        margin-left: 306px;
    }

    .examlpe__txt {
        margin-top: 0;
    }
}/* PC 1025px */


/* ============================= 
access
==============================*/
.section--access {
    background-image: url(../images/mainback.jpeg);
    background-repeat: no-repeat;
    background-size: cover;
    padding: 80px 33px 73px;
    width: 100%;
    height: 488px;
}

.access__title {
    color: var(--green, #224838);
    text-align: center;
    font-family: "Klee One";
    font-size: 1.7rem;
    line-height: 1.5;
}

.entry__btn {
    margin: 67px auto;
    display: block;
    padding: 0 42px;
}

.access__pc {
    display: none;
}

.access__name {
    color: var(--green, #224838);
    text-align: center;
    font-family: "Klee One";
    font-size: 1.7rem;
    line-height: 1.5;
}

.address {
    display: flex;
    align-items: center;
    gap: 0 15px;
    margin: 22px auto 0;
}

.address__txt1,
.address__txt2 {
    color: var(--green, #224838);
    font-family: "Klee One";
    font-size: 1.5rem;
}

.tel {
    margin: 8px auto 0;
    text-align: center;
    color: var(--green, #224838);
    font-family: "Klee One";
    font-size: 1.4rem;
}


/* access tablet */
@media screen and (min-width: 767px) {
    .section--access {
        padding: 81px 0;
    }

    .access__title {
        text-align: center;
        font-size: 1.8rem;
    }

    .entry__btn {
        margin: 67px auto 0;
        padding: 0 264px;
    }

    .access__name {
        margin: 67px auto 0;
    }

    .address {
        margin: 22px auto 0;
        justify-content: center;
    }
}/* tabler 767px */


/* access pc */
@media screen and (min-width: 1025px) {
    .access__title {
        font-size: 2.8rem;
    }

    .entry__btn {
        margin: 54px auto;
        display: block;
        padding: 0 272px;
    }

    .access__title {
        font-size: 2.8rem;
        margin: 0 auto;
    }

    .spbr {
        display: none;
    }

    .entry__btn {
        display: block;
        margin: 54px auto;
        padding: 0 555px 0 555px;
    }

    .entry__btn img {
        width: 296px;
        height: 51px;

    }

    .access__name {
        margin: 54px auto 0;
        font-size: 2rem;
        text-align: center;
    }

    .address__txt1,
    .address__txt2,
    .tel {
        font-size: 1.6rem;
    }

}/* PC 1025px */


/* ============================= 
footer
==============================*/
.footer {
    background-color: var(--green);
    padding: 58px 51px 0;
}

.footer__img {
    margin: 0 auto;
    width: 230px;
    height: 101px;
    text-align: center;
}

.footer__name {
    margin: 0 auto;
    color: #F0EBE3;
    font-family: "Klee One";
    font-size: 1.6rem;
    text-align: center;
}

.footer__nav {
    padding: 51px 57px;
    text-align: center;
}

.footer__items {
    margin-top: 15px;
}

.footer__items a {
    color: var(--gray, #D9D9D9);
    font-family: Oswald;
    text-align: center;
    font-size: 1.6rem;
    font-weight: 500;
}

.copy {
    padding: 0 51px 58px;
    margin: 0 auto;
    color: var(--gray);
    text-align: center;
    font-size: 1.3rem;
    font-weight: 300;
    letter-spacing: 1.69px;
}


/* footer tablet */
@media screen and (min-width: 767px) {
    .footer {
        padding: 33px 50px;
    }

    .footer__group {
        display: flex;
        align-items: center;
    }

    .footer__img {
        margin: 17px auto 10px;
        width: 207px;
        height: 91px;
    }

    .footer__logo {
        margin-right: 68px;
        margin-left: 20px;
    }

    .footer__name {
        font-size: 1.6rem;
        position: relative;
    }

    .footer__name::after {
        content: '';
        width: 1px;
        height: 174px;
        background-color: #F5F5F5;
        display: block;
        position: absolute;
        left: 285px;
        top: -121px;
    }

    .footer__nav {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0 31px;
        padding: 51px 0 51px 34px;
    }

    .copy {
        margin-top: 25px;
        padding: 0;
        text-align: left;
        letter-spacing: 1.69px;
    }
}/* tablet 767px */

/* access pc */
@media screen and (min-width: 1025px) {
    .footer {
        padding: 54px 103px;
    }

    .footer__group {
        display: flex;
        width: 100%;
        height: 208px;
        align-items: center;
    }

    .footer__img {
        margin: 36px auto 10px;
        width: 230px;
        height: 101px;
    }

    .footer__logo {
        margin-right: 82px;
    }

    .footer__name {
        font-size: 1.6rem;
        position: relative;
    }

    .footer__name::after {
        content: '';
        width: 1px;
        height: 208px;
        background-color: #F5F5F5;
        display: block;
        position: absolute;
        left: 369px;
        top: -148px;
    }

    .footer__nav {
        display: flex;
        padding: 92px 0 92px 82px;
        gap: 0 50px;
        align-items: center;
    }

    .copy {
        margin-top: 10px;
        text-align: left;
        padding: 0 0 25px;
    }
}/* PC 1025px */