@charset "utf-8";
/*====================
common
=====================*/

:root {
    --primary-white: #FFFFFF;
    --primary-green: #8faca5;
    --primary-black: #000000;
    --primary-gray: #C0C0C0;
    --primary-white: #FFFFFF;
    --contentWidth: 89.3%;
    --contentPadding: 76px 5.3%;
    --spMaintxt: 1.6rem;
}

html {
    font-size: 62.5%;
}

body {
    font-family: "Zen Kaku Gothic Antique",
        Arial,
        sans-serif;
    font-size: 1.6rem;
    font-weight: 400;
    font-style: normal;
    color: var(--primary-black, #000000);
    background-color: var(--primary-green, #8faca5);
    line-height: 1.5;
}

img {
    width: 100%;
    height: auto;
}

.section {
    padding: 0px 5.3%;
    position: relative;
}

.section__topic {
    color: #000;
    font-family: Italiana;
    font-size: 5rem;
    transform: rotate(-20deg);
    display: block;
    position: absolute;
    top: -30px;
    left: -20px;
    z-index: 1000;
}

.section__topic {
    pointer-events: none;
}

.section__box {
    min-width: 335px;
    height: auto;
    padding: 128px 8% 52px;
    margin: 0 auto;
    background-color: var(--primary-white, #FFFFFF);
    position: relative;
}

.section__topic span {
    font-size: 9rem;
}

.section__topic::before {
    content: '';
    display: inline-block;
    width: 17px;
    height: 1px;
    background-color: var(--primary-black);
    vertical-align: 27%;
}

.section__topic::after {
    content: '';
    display: inline-block;
    width: 17px;
    height: 1px;
    background-color: var(--primary-black);
    vertical-align: 27%;
    margin-left: 5px;
}


/*===========
fadeIn
==============*/
.fadeIn {
    transform: translate(0, 50px);
    /* 横, 縦 */
    opacity: 0;
    transition: 0.8s;
}

.fadeIn.animated {
    transform: translate(0, 0);
    opacity: 1;
}


/* common pc */
@media screen and (min-width:769px) {
    :root {
        --contentPadding: 153px 10%;
    }

    body {
        font-size: 2.4rem;
    }

    .section__box {
        max-width: 1150px;
        padding: 230px 5% 100px;
        margin: 0 auto;
    }

    .section__topic {
        font-size: 14.8rem;
        top: -20px;
        left: -90px;
    }

    .section__topic span {
        font-size: 19.8rem;
    }

    .section__topic::before {
        width: 80px;
        height: 1px;
    }

    .section__topic::after {
        content: '';
        width: 80px;
        height: 1px;
    }

    .spBr {
        display: none;
    }

    .btn__more {
        display: inline-block;
        width: auto;
        height: 44px;
    }

}

/* pc 769px */

/*====================
header
=====================*/

.nav__header {
    width: 100%;
    box-sizing: border-box;
    padding: 13px 5.3% 14.4px 5.3%;
    height: 63px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header__box {
    width: fit-content;
    height: fit-content;
}

.navBtn__box {
    width: 100%;
    height: 63px;
    padding-top: 21px;
    /* box-sizing: content-box; */
}

.nav__btn--open {
    display: block;
    width: 29.5px;
    height: 20px;
    text-align: right;
}

.header__topic,
.nav__topic {
    font-family: Italiana;
    font-size: 1.6rem;
    display: block;
    line-height: 1;
    align-items: end;
    /* vertical-align: middle; */
}

.spHeader__big {
    font-size: 20px;
}

.spHeader__caption {
    display: block;
    font-family: "Noto Serif JP";
    font-size: 0.9rem;
    text-align: right;
    width: auto;
    height: auto;
    margin-top: 0;
}

.spHeader__caption::before {
    content: '';
    display: inline-block;
    width: 18px;
    height: 0.5px;
    background-color: var(--primary-black);
    vertical-align: middle;
}

/* nav初期表示 */

.nav {
    color: var(--primary-black);
    background-color: rgba(255, 255, 255, 0.871);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1001;
    width: 100%;
    height: 100vh;
    transform: translateX(-100%);
    transition: 0.4s;
}

.nav__header {
    box-sizing: border-box;
    padding: 13px 5.3% 14.4px 5.3%;
    height: 63px;
    width: 100%;
    min-width: 363px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    vertical-align: center;
}

.nav__btn--close {
    display: block;
    width: 40px;
    height: auto;
}

.nav__list {
    margin-top: 50px;
    margin-left: 25px;
}

.nav__item {
    font-family: Italiana;
    font-size: 3.2rem;
    margin-bottom: 50px;
}

.nav__item a::before {
    content: '';
    display: inline-block;
    width: 22px;
    height: 1px;
    background-color: var(--primary-black);
    vertical-align: super;
}

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

/* nav end */

.btn__toTop {
    display: block;
    width: 78px;
    height: 78px;
    position: fixed;
    right: 1%;
    bottom: 1%;
    z-index: 1;
}

/* animation */

.btn__toTop {
    width: 78px;
    height: 78px;
    transition: transform 0.6s ease-in-out;
}

.btn__toTop:hover {
    transform: scale(1.2);
    
}

.nav__item a {
    display: inline-block;
    position: relative;
    text-decoration: none;
    color: inherit;
    padding-bottom: 4px; /* 線が文字にかぶらないように */
  }
  
  .nav__item a::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #000;
    transform: scaleX(0); /* ここを修正 */
    transform-origin: left;
    transition: transform 0.3s ease;
  }
  
  .nav__item a:hover::after {
    transform: scaleX(1);
  }

@media screen and (min-width:769px) {

    .btn__toTop {
        width: 154px;
        height: 154px;
    }

    .nav {
        background: transparent;
        width: auto;
        height: auto;
        position: static;
        z-index: 100;
        transform: translateX(0);
        /* padding: var(--contentPadding) ; */
        display: flex;
        justify-content: flex-end;
        vertical-align: middle;
    }

    .nav__header {
        display: none;
    }

    .nav__list {
        display: flex;
        height: 100px;
        gap: 56px;
        padding: 32px 10%;
        margin: 0;
        align-items: center;
    }

    .nav__item {
        gap: 48.4px 0;
        font-size: 3.1rem;
        line-height: 1;
        margin-bottom: 0;
    }

    .nav__item a::before {
        display: none;
    }

    .nav__item ::after {
        display: none;
    }
}

/* pc 769px */

/*====================
atticle header
=====================*/

.article__header {
    min-width: 375px;
    height: auto;
    background-color: #FFFFFF;
}

.mainVisual__box {
    display: block;
    width: auto;
    height: 739px;
    background-image: url(..//images/mainVisual.jpg);
    background-size: cover;
    background-position: center center;
}

.navBtn__box {
    width: 100%;
    height: 63px;
    padding-top: 21px;
    /* box-sizing: content-box; */
}

.nav__btn--open {
    display: block;
    width: 29.5px;
    height: 20px;
    text-align: right;
}

.mainVisual {
    padding: 164px 0 404px 0;
    /* パディング調整 */
}

.mainVisual__txt {
    display: block;
    width: 285px;
    height: 171px;
    color: var(--primary-white);
    margin: 0 auto;
}

.mainVisual__item {
    font-family: Italiana;
}

.mainVisual__item--first {
    display: block;
    padding: 0 0.12% 0 0.31%;
    font-size: 5.5rem;
    line-height: 1;
}

.mainVisual__item--first :first-child {
    font-size: 7rem;
    letter-spacing: -7.7px;
}

.mainVisual__item--second {
    display: block;
    padding: 0 55% 0 34%;
    font-size: 4.5rem;
    line-height: 0.6;
}

.mainVisual__item--third {
    display: block;
    padding: 0 12% 0 47%;
    font-size: 65px;
    line-height: 0;
}

.mainVisual__item--third :first-child {
    font-family: Italiana;
    font-size: 8.5rem;
    letter-spacing: -2.55px;
}


.mainVisual__item--end {
    display: block;
    text-align: right;
    font-family: "Noto Serif JP";
    font-size: 2rem;
    font-weight: 200;
    line-height: 3.7;
}

.mainVisual__item--end::before {
    content: '';
    display: inline-block;
    width: 38px;
    height: 1px;
    background-color: var(--primary-white);
    vertical-align: super;
}

.before {
    border: 1px dashed #C0C0C0;
    width: 59px;
    height: 27px;
    margin: 160px auto 0 auto;
    position: relative;
}

.before::after {
    content: '';
    display: block;
    width: 89px;
    height: 41px;
    border: 1px dashed #C0C0C0;
    position: relative;
    top: 53px;
    right: 14.5px;
}

.after {
    border: 1px dashed #C0C0C0;
    width: 59px;
    height: 27px;
    margin: 92px auto 0 auto;
    position: relative;
}

.after::before {
    content: '';
    display: block;
    width: 89px;
    height: 41px;
    border: 1px dashed #C0C0C0;
    position: relative;
    bottom: 73.5px;
    right: 14.5px;
}

.subCaption__txt {
    position: relative;
    height: 599px;
    width: 225px;
    height: 103px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 93px auto 0;
    border: var(--primary-gray);
    border-style: dotted;
    color: #404040;
    text-align: center;
    font-family: "Zen Kaku Gothic Antique";
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 171.5%;
    letter-spacing: 1.05px;
}

.mainCaption {
    height: auto;
    margin-top: 160px;
    padding-bottom: 160px;
    font-family: "Zen Kaku Gothic Antique";
    /* font-family: "Noto Serif JP"; */
    font-weight: 400;
    text-align: center;
    font-size: 1.5rem;
}

.mainCaption p:nth-of-type(2) {
    font-size: 1.2rem;
}

.mainCaption p span {
    display: block;
    font-size: 2rem;
}

.mainCaption :nth-child(2),
.mainCaption :nth-child(5) {
    margin-top: 22px;
}

.mainCaption :nth-child(3),
.mainCaption :nth-child(4) {
    margin-top: 43px;
}

@media screen and (min-width:769px) {
    .mainVisual__box {
        width: 55%;
        height: auto;
    }

    /* .mainVisual__item--first {
        font-size: 10.2rem;
    }

    .mainVisual__item--first :first-child {
        font-size: 14.2rem;
        letter-spacing: -15.62px;
    }

    .mainVisual__item--second {
        font-size: 11.2rem;
    }

    .mainVisual__item--third {
        font-size: 13.2rem;
    }

    .mainVisual__item--third :first-child {
        font-size: 18.2rem;
        letter-spacing: -5.46px;
    }
    
    .mainVisual__item--end {
        font-size: 3.6rem;
        font-weight: 300;
        letter-spacing: -1.5px;
        width: max-content;
    }
    
    .mainVisual__item--end::before {
        width: 138px;
        height: 2px;
    } */

    .nav__btn--open {
        display: none;
    }

    .article__header {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .subCaption {
        order: 2;
        order: 2;
        width: 100%;
        height: 100%;
        padding-bottom: 100px;
        background-color: var(--primary-green);
    }

    .subCaption__txt {
        background-color: var(--primary-white);
        width: 722px;
        height: 331px;
        border-style: solid;
        border-width: 2px;
        font-size: 3.4rem;
        font-weight: 200;
        color: #404040;
    }

    .before {
        border: 1px solid #C0C0C0;
        background-color: var(--primary-white);
        width: 219px;
        height: 57px;
        margin: 160px auto 0 auto;
        position: relative;
    }

    .before::after {
        content: '';
        display: block;
        width: 301px;
        height: 97px;
        border: 1px solid #C0C0C0;
        background-color: #e2e7e6;
        position: relative;
        top: 53px;
        right: 14.5px;
    }

    .after {
        border: 1px solid #C0C0C0;
        background-color: var(--primary-white);
        width: 219px;
        height: 57px;
        margin: 92px auto 0 auto;
        position: relative;
    }

    .after::before {
        content: '';
        display: block;
        width: 301px;
        height: 97px;
        border: 1px solid #C0C0C0;
        background-color: #e2e7e6;
        position: relative;
        bottom: 73.5px;
        right: 14.5px;
    }

    .mainCaption {
        order: 1;
        width: 431px;
        margin-left: auto;
        margin-right: auto;
    }

    .mainCaption__txt {
        font-size: 2rem;
        font-weight: 400;
        line-height: 1.4;
    }

    .mainCaption p:nth-of-type(2) {
        font-size: 1.5rem;
    }

    .mainCaption p span {
        display: block;
        font-size: 2.6rem;
    }
}

/* pc 769px */

/*====================
footer
=====================*/

.footer {
    padding: var(--contentPadding);
    padding: 78px 5.3% 68px 5.3%;
}

.footer__nav {
    width: 206px;
    height: 242px;
}

.footerNav__title {
    width: fit-content;
    font-family: Italiana;
    font-size: 2.0rem;
    line-height: 1;
}

.footerNav__subtitle {
    display: block;
    font-family: "Noto Serif JP";
    font-size: 1.1rem;
    letter-spacing: -1px;
    line-height: 1.25;
    text-align: right;
    /* position: relative; */
}

.footerNav__subtitle::before {
    content: '';
    display: inline-block;
    width: 18px;
    height: 0.5px;
    background-color: var(--primary-black);
    vertical-align: middle;
}

.footerNav__list {
    display: flex;
    justify-content: left;
    flex-flow: column;
}

.footerNav__item {
    margin-top: 30px;
    font-family: Italiana;
    font-size: 1.9rem;
    line-height: 1;
}

.footerNav__item ::before {
    content: '';
    display: inline-block;
    width: 13px;
    height: 1px;
    background-color: #000;
    vertical-align: middle;
}

.contact {
    margin-top: 45px;
    font-size: 1.5rem;
    line-height: 1;
}

.copy {
    font-family: Italiana;
    font-size: 1.5rem;
    line-height: 1;
    margin-top: 100px;
}

@media screen and (min-width:769px) {
    .footer {
        padding: 78px 10% 68px;
    }

    .footerNav {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .footerNav__title {
        font-size: 3.2rem;
        display: block;
    }

    .footerNav__subtitle {
        font-size: 1.7rem;
        text-align: right;
        line-height: 1.1;
    }

    .footerNav__subtitle ::before {
        content: '';
        display: inline-block;
        width: 10px;
        height: 20px;
        background-color: #000;
        margin-left: 20px;
    }

    .footerNav__list {
        flex-flow: unset;
        justify-content: right;
        gap: 0 30px;
    }

    .footerNav__item {
        font-size: 3.2rem;
        text-align: center;
        margin-top: 0;
    }

    .footerNav__item ::before {
        display: none;
    }

    .contact {
        font-size: 2rem;
        margin-top: 60px;
    }

    .copy {
        font-size: 2.5rem;
    }
}

/* pc 769px */