/*--------------------*/
/* base
/*--------------------*/

li {
    list-style-type: none;
}

img {
    width: 100%;
}

html,
body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    box-sizing: border-box;
}

html {
    font-size: 62.5%;
}

/* 基本設定
/*--------------------*/
/* fv
/*--------------------*/

.fv {
    margin: 4.7rem 0 7.8rem;
}

@media (max-width: 768px) {
    .fv {
        margin: 3.6rem 0 0;
    }
}

.fv_img {
    width: 94%;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .fv_img {
        display: none;
    }
}

.fv_img2 {
    display: none;
}

@media (max-width: 768px) {
    .fv_img2 {
        display: block;
        width: 87%;
        margin: 0 auto;
        object-fit: cover;
    }
}

/* niwa
/*--------------------*/

/*.concept-sec {
    margin-top: 5.2rem;
}

@media (max-width: 768px) {
    .concept-sec {
        margin-top: 7rem;
    }
}*/

.col-niwa {
    border-bottom: 1px solid #CCCCCC;
    padding-bottom: 15rem !important;
}
.col-niwa .col-txt {
    width: 51.25%;
    margin-left: 48.75%;
}
@media (max-width: 768px){ 
.col-niwa .col-txt{
     width: 100%;
     margin-left: 0;
}
}

.niwa::after {
    content: "";
    border-bottom: 1px solid #cccccc;
    width: 93%;
    display: inline-block;
    padding-bottom: 15.35rem;
}

@media (max-width: 768px) {
    .niwa::after {
        padding-bottom: 10.6rem;
    }
}

.niwa_inner {
    display: flex;
}

@media (max-width: 768px) {
    .niwa_inner {
        display: block;
    }
}

.niwa_ttl {
    font-size: 3.6rem;
    color: #a3b5ac;
    display: flex;
    align-items: center;
    font-family: "Cinzel", serif;
}

@media (max-width: 768px) {
    .niwa_ttl {
        font-size: 3rem;
    }
}

.niwa_ttl::before {
    content: "";
    border-top: 1px solid #a3b5ac;
    width: 10.6vw;
    margin-right: 1rem;
}

@media (max-width: 768px) {
    .niwa_ttl::before {
        width: 3rem;
        margin-right: 1.55rem;
    }
}

.niwa_txt {
    font-size: 0.9vw;
    margin-top: 0.6rem;
    margin-left: 11vw;
}

@media (max-width: 768px) {
    .niwa_txt {
        font-size: 1.4rem;
        margin-top: 1.1rem;
        margin-left: 4.65rem;
    }
}

.niwa_area {
    margin: 3.3rem 12.4vw 0 auto;
    width: 36%;
}

@media (max-width: 768px) {
    .niwa_area {
        margin: 6rem 0 0;
        width: inherit;
    }
}

.niwa_main-ttl {
    font-family: "Times New Roman", "游明朝", "Yu Mincho", "YuMincho", "Hiragino Mincho Pro", "Noto Serif JP", serif;
    font-size: 2.8rem;
    line-height: 1.64;
    letter-spacing: 0.22em;
}

@media (max-width: 768px) {
    .niwa_main-ttl {
        font-size: 2.4rem;
    }
}

.niwa_main-txt {
    margin-top: 6.5rem;
    font-size: 1.5rem;
    letter-spacing: 0.2em;
    line-height: 2.28;
}

.niwa_main-txt.first_txt {
    margin-top: 0;
}

@media (max-width: 768px) {
    .niwa_main-txt {
        margin-top: 3.5rem;
        font-size: 1.4rem;
        line-height: 1.85;
    }
}

@media (max-width: 768px) {
    .niwa_main-txt br {
        display: none;
    }
}

/* section
/*--------------------*/

.section {
    padding-top: 5rem;
}

.section::after {
    content: "";
    display: block;
    border-bottom: 1px solid #cccccc;
    padding-bottom: 16.4rem;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}
@media (max-width: 768px){
    .section::after{
        padding-bottom: 10.2rem;
    }
}

@media (max-width: 768px) {
    .util_item:nth-of-type(3) {
        padding: 0;
    }
}

.zenterrace {
    margin-top: 19.5rem;
}

@media (max-width: 768px) {
    .zenterrace {
        margin-top: 10.6rem;
    }
}

.terrace {
    margin-top: 19.4rem;
}

@media (max-width: 768px) {
    .terrace {
        margin-top: 9rem;
    }
}

.terrace2 {
    margin-top: 19.2rem;
}

@media (max-width: 768px) {
    .terrace2 {
        margin-top: 10.2rem;
        margin-bottom: 7rem;
    }
}

.util_content {
    display: flex;
}

@media (max-width: 768px) {
    .util_content {
        display: block;
    }
}

.content1 {
    width: 90%;
    position: relative;
    margin-left: auto;
}

@media (max-width: 768px) {
    .content1 {
        width: inherit;
        margin-left: 0;
    }
}

.courtyard_img {
    width: 72%;
    height: auto;
    margin-left: auto;
}

@media (max-width: 768px) {
    .courtyard_img {
        width: inherit;
        margin-left: 0;
    }
}

@media (max-width: 768px) {
    .courtyard_img img {
        height: 26rem;
        object-fit: cover;
        object-position: center center;
    }
}

.courtyard_sub-img {
    position: absolute;
    top: 18%;
    left: 15%;
    width: 19%;
    display: block;
}

@media (max-width: 768px) {
    .courtyard_sub-img {
        display: none;
    }
}

.courtyard_sub-img2 {
    display: none;
}

@media (max-width: 768px) {
    .courtyard_sub-img2 {
        display: block;
        position: absolute;
        bottom: -12%;
        right: 2.5rem;
        width: 13rem;
    }
}

.content2 {
    width: 90%;
    position: relative;
}

@media (max-width: 768px) {
    .content2 {
        width: inherit;
    }
}

.zen_img {
    width: 72%;
    height: auto;
}

@media (max-width: 768px) {
    .zen_img {
        width: inherit;
        height: auto;
    }
}

@media (max-width: 768px) {
    .zen_img img {
        height: 26rem;
        object-fit: cover;
        object-position: center center;
    }
}

.zen_sub-img {
    width: 19%;
    position: absolute;
    top: 18%;
    right: 15%;
}

@media (max-width: 768px) {
    .zen_sub-img {
        width: 13rem;
        top: 15rem;
        right: 2.5rem;
    }
}

.content3 {
    width: 87%;
    margin: 0 auto;
    object-fit: cover;
}

@media (max-width: 768px) {
    .content3 {
        margin: 0;
        width: inherit;
        position: relative;
    }
}

.terrace_img {
    height: auto;
    width: 57%;
    margin-left: auto;
}

@media (max-width: 768px) {
    .terrace_img {
        width: inherit;
        margin-left: 0;
    }
}

@media (max-width: 768px) {
    .terrace_img img {
        height: 26rem;
        object-fit: cover;
        object-position: center center;
    }
}

.terrace_sub-img {
    width: 41.5%;
    height: auto;
    margin-left: 1rem;
}

@media (max-width: 768px) {
    .terrace_sub-img {
        margin-left: 0;
        position: absolute;
        z-index: 1;
        bottom: -12%;
        right: 2.5rem;
        width: inherit;
    }

    .terrace_sub-img img {
        width: 13rem;
        height: 13rem;
    }
}

.content4 {
    width: 84%;
    margin: 0 6vw 0 9.73vw;
}

@media (max-width: 768px) {
    .content4 {
        margin: 0;
        width: inherit;
        position: relative;
    }
}

.terrace2_img {
    width: 67%;
    height: auto;
}

@media (max-width: 768px) {
    .terrace2_img {
        width: inherit;
    }
}

@media (max-width: 768px) {
    .terrace2_img img {
        height: 26rem;
        object-fit: cover;
        object-position: center center;
    }
}

.terrace2_sub-img {
    width: 31%;
    height: auto;
    margin: auto 0 0 1rem;
}

@media (max-width: 768px) {
    .terrace2_sub-img {
        margin: 0;
        position: absolute;
        bottom: -12%;
        right: 2.5rem;
        width: inherit;
    }
}

@media (max-width: 768px) {
    .terrace2_sub-img img {
        width: 13rem;
        height: 13rem;
    }
}

.util_wrapper {
    padding: 0 2.8vw;
}

@media (max-width: 768px) {
    .util_wrapper {
        padding: 0;
    }
}

.util_wrap {
    max-width: 99.9rem;
    width: 100%;
    margin: 0 auto;
    display: flex;
}

@media (max-width: 768px) {
    .util_wrap {
        padding: 0;
        margin: 0;
        display: block;
    }
}

.courtyard .util_wrap {
    margin-top: 7.2rem;
}

@media (max-width: 768px) {
    .courtyard .util_wrap {
        margin-top: 0;
    }
}

.zenterrace .util_wrap {
    margin-top: 7.2rem;
}

@media (max-width: 768px) {
    .zenterrace .util_wrap {
        margin-top: 0;
    }
}

.terrace .util_wrap {
    margin-top: 7.2rem;
}

@media (max-width: 768px) {
    .terrace .util_wrap {
        margin-top: 0;
    }
}

.terrace2 .util_wrap {
    margin-top: 7.2rem;
}

@media (max-width: 768px) {
    .terrace2 .util_wrap {
        margin-top: 0;
    }
}

.util_area {
    display: flex;
}

.util_logo-name {
    font-size: 1.6rem;
    color: #a3b5ac;
    font-family: "Cinzel", serif;
    transform: rotate(90deg);
    transform-origin: 53% 11%;
    letter-spacing: 0.1em;
}

@media (max-width: 768px) {
    .util_logo-name {
        font-size: 1.2rem;
        margin: 2.8rem 2.25rem 0 6.03vw;
        transform: inherit;
    }
}

.util_logo {
    font-size: 4rem;
    letter-spacing: 0.1em;
    color: #a3b5ac;
    margin-left: 0.4rem;
    font-family: "Cinzel", serif;
}

@media (max-width: 768px) {
    .util_logo {
        font-size: 2.6rem;
        margin-top: 2rem;
    }
}

.util_main-content {
    margin-left: 10rem;
}

@media (max-width: 768px) {
    .util_main-content {
        margin-left: 0;
        padding: 0 9.5vw;
    }
}

.util_main-area {
    display: flex;
}

@media (max-width: 768px) {
    .util_main-area {
        display: block;
    }
}

.util_main-ttl {
    font-size: 2.8rem;
    letter-spacing: 0.22em;
    font-family: "Times New Roman", "游明朝", "Yu Mincho", "YuMincho", "Hiragino Mincho Pro", "Noto Serif JP", serif;
}

@media (max-width: 768px) {
    .util_main-ttl {
        font-size: 2.4rem;
        margin-top: 5.15rem;
    }
}

.util_main-txt {
    font-size: 1.6rem;
    margin-left: 2.1rem;
    color: #a3b5ac;
    letter-spacing: 0.1em;
    font-family: "Times New Roman", "游明朝", "Yu Mincho", "YuMincho", "Hiragino Mincho Pro", "Noto Serif JP", serif;
}

@media (max-width: 768px) {
    .util_main-txt {
        margin: 1.8rem 0 0;
    }
}

.util_ttl {
    font-size: 2rem;
    margin-top: 6.1rem;
    letter-spacing: 0.01em;
    font-family: "Times New Roman", "游明朝", "Yu Mincho", "YuMincho", "Hiragino Mincho Pro", "Noto Serif JP", serif;
}

@media (max-width: 768px) {
    .util_ttl {
        font-size: 1.8rem;
        margin-top: 3.1rem;
    }
}

.util_txt {
    font-size: 1.4rem;
    letter-spacing: 0.08em;
    line-height: 2.28;
    margin-top: 2.8rem;
}

@media (max-width: 768px) {
    .util_txt {
        margin-top: 2.7rem;
    }
}

@media (max-width: 768px) {
    .courtyard_txt {
        margin-top: 3.7rem;
    }
}

/* tab
/*--------------------*/

.tab {
    text-align: center;
    padding-top:0;
}

@media screen and (max-width: 767px){
    .tab {
        padding: 7rem 0;
    }}
    
.tab_inner {
    padding: 0 40px;
    max-width: 1280px;
    margin: 0 auto;
}
@media screen and (max-width: 768px) {
.tab_inner {
    padding: 0;
    }
}

/*タブ切り替え全体のスタイル*/
.tabs {
    width: 100%;
    margin: 0 auto;
}

@media screen and (max-width: 768px) {
    .tabs {
        width: 88%;
    }
}

/*タブのスタイル*/
.tab-wrap {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: 8px;
}

@media screen and (max-width: 768px) {
    .tab-wrap {
        gap: 2px;
    }
}

.tab_item {
    flex: 1;
    width: calc(20% - 16px);
    background-color: #e6e6e6;
    padding: 1.8rem 0;
    font-size: 1.4rem;
    text-align: center;
    color: #333333;
    display: block;
    text-align: center;
    font-weight: bold;
    transition: all 0.2s ease;
    cursor: pointer;
}

@media screen and (max-width: 768px) {
    .tab_item {
        font-size: 1.2rem;
        min-width: calc(33.3333333333% - 16px);
    }
}
.tab_item:hover {
    opacity: 0.75;
}

/*ラジオボタンを全て消す*/
input[name="tab_item"] {
    display: none;
}

.tab_contents {
    margin-top: 5.7rem;
}
@media screen and (max-width: 768px) {
.tab_contents {
    margin-top:  3rem;
}
}

/*タブ切り替えの中身のスタイル*/
.tab_content {
    display: none;
    clear: both;
    overflow: hidden;
}

/*選択されているタブのコンテンツのみを表示*/
#all:checked ~ .tab_contents #all_content,
#courtyard:checked ~ .tab_contents #courtyard_content,
#rock-garden:checked ~ .tab_contents #rock-garden_content,
#lounge-terrace:checked ~ .tab_contents #lounge-terrace_content,
#rooftop-terrace:checked ~ .tab_contents #rooftop-terrace_content {
    display: flex;
}

/*選択されているタブのスタイルを変える*/
.tabs input#all:checked ~ .tab-wrap .tab_item[for="all"],
.tabs input#courtyard:checked ~ .tab-wrap .tab_item[for="courtyard"],
.tabs input#rock-garden:checked ~ .tab-wrap .tab_item[for="rock-garden"],
.tabs input#lounge-terrace:checked ~ .tab-wrap .tab_item[for="lounge-terrace"],
.tabs input#rooftop-terrace:checked ~ .tab-wrap .tab_item[for="rooftop-terrace"] {
    background-color: #c7ddd1;
    color: #fff;
}

.tab_content {
    gap: 2.2vw;
    flex-wrap: wrap;
    justify-content: space-between;
}

@media screen and (max-width: 768px) {
    .tab_content {
        gap: 3.5vw;
    }
}

.tab_content .image-wrap {
    position: relative;
}

.niwa-item {
    width: 22.6%;
    margin-bottom: 2rem;
}
@media screen and (max-width: 768px) {
    .niwa-item {
        width: 47%;
    }
}
.niwa-item a {
    width: 100%;
    height: 100%;
    display: block;
    position: relative;
}
.niwa-item a::after {
    content: '';
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    width: 3rem;
    height: 3rem;
    background: url("../img/about/niwa/icon-plus.svg") no-repeat top center;
    background-size: 100%;
}
@supports (background-image: url("hotelniwa.webp")) {
.niwa-item a::after {
    background: url("../img/about/niwa/icon-plus.webp") no-repeat top center;
    background-size: 100%;
}
}
@media screen and (max-width: 768px) {
}

.image-wrap .niwa-item:nth-child(n + 9){
    display: none;
}

.tab_content .btn02 {
    margin: 3rem auto 0;
}
@media screen and (max-width: 768px) {
.tab_content .btn02 {
    margin: 1rem auto 0;
}
}

.tab_content .image-wrap .modal-open {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    border-radius: 100vh;
    height: 3rem;
    width: 3rem;
    background-color: #a3b5ac;
    border: 0.1rem solid #707070;
    cursor: pointer;
}

@media screen and (max-width: 768px) {
    .tab_content .image-wrap .modal-open {
        bottom: 1rem;
        right: 1rem;
        height: 2.6rem;
        width: 2.6rem;
    }
}

.tab_content .image-wrap .modal-open span {
    display: block;
    background-color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    border-radius: 100vh;
}

.tab_content .image-wrap .modal-open span:first-child {
    width: calc(100% - 1.2rem);
    height: 0.1rem;
}

.tab_content .image-wrap .modal-open span:last-child {
    width: 0.1rem;
    height: calc(100% - 1.2rem);
}

/* モーダル */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    padding: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s;
    pointer-events: none;
    opacity: 0;
    z-index: 100;
    background-color: rgba(0, 0, 0, 0.8);
}

/* モーダルがactiveの時 */
.modal.is-active {
    opacity: 1;
    pointer-events: auto;
}

/* モーダル背景のオーバーレイ部分 */
.modal__overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

/* モーダルのコンテンツ */
.modal__content {
    position: relative;
    width: 100%;
    padding: 20px;
}

.modal_inner {
    width: 100%;
    margin: 0 auto;
    border-radius: 2px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

/* 閉じるボタン */
.modal__close-btn {
    position: absolute;
    right: 0;
    top: -6rem;
    width: 6rem;
    height: 40px;
    cursor: pointer;
    z-index: 20;
}

.modal__close-btn:hover {
    opacity: 0.8;
}

/* 閉じるボタンのX */
.lineClose {
    display: inline-block;
    vertical-align: middle;
    color: #fff;
    line-height: 1;
    width: 4rem;
    height: 0.2rem;
    background: #fff;
    border-radius: 0.1rem;
    position: relative;
    transform: rotate(45deg);
}

.lineClose::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: inherit;
    border-radius: inherit;
    transform: rotate(90deg);
}

.swiper-slide img {
    width: 100%;
}

.modal__content .swiper-button-next,
.modal__content .swiper-button-prev {
    width: 7rem;
    height: 7rem;
    border-radius: 100vh;
    background: rgba(0, 0, 0, 0.7);
    opacity: 0.8;
}

.modal__content .swiper-button-next {
    right: 5%;
}

.modal__content .swiper-button-prev {
    left: 5%;
}

.modal__content .swiper-button-next::after,
.modal__content .swiper-button-prev::after {
    color: #fff;
}

/* もっと見る
/*--------------------*/

.more-btn{
    width:100%;
    background-color:#A3B5AC;
    padding: 1.7rem 8.6rem;
    color:#fff;
    text-align:center;
    max-width: 25rem;
    margin: 10.4rem auto 0;
    
  }

/* sitelist
/*--------------------*/

.sitelist {
    padding: 15rem 0 15.4rem;
}

@media (max-width: 768px) {
    .sitelist {
        padding: 5rem 0 10.2rem;
    }
}

.sitelist_list {
    width: 80%;
    margin: 0 auto;
    display: flex;
}

@media (max-width: 768px) {
    .sitelist_list {
        display: block;
        width: 87%;
    }
}

.sitelist_list:not(:first-child) {
    margin-top: 6.7rem;
}

@media (max-width: 768px) {
    .sitelist_list:not(:first-child) {
        margin-top: 0;
    }
}

.sitelist_item {
    width: 46%;
}

@media (max-width: 768px) {
    .sitelist_item {
        width: 87%;
        margin: 5.7rem auto 0;
    }
}

.sitelist_item:not(:first-child) {
    margin-left: 7.2vw;
}

@media (max-width: 768px) {
    .sitelist_item:not(:first-child) {
        margin: 5.7rem auto 0;
    }
}

.sitelist_txt {
    font-size: 1.6rem;
    margin-top: 1.5rem;
    display: flex;
    align-items: center;
}

.sitelist_txt::before {
    content: "";
    border-top: 1px solid #a3b5ac;
    width: 2.4rem;
    margin-right: 1.5rem;
}

.sitelist_item img:hover {
    opacity: 0.5;
}

@media (max-width: 768px) {
.col-niwa {
    border-bottom: none;
    padding-bottom: 5rem !important;
}
}

/* chapter-sec
/*--------------------*/
.chapter-sec{
    width: 100%;
    padding-top: 5rem;
}
.chapter-inner{
    padding: 0 40px;
    max-width: 1280px;
    margin: 0 auto;
}
@media (max-width: 768px) {
    .chapter-inner{
        padding: 0;
    }
}
.chapter-thumb{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}
.chapter-thumb-item{
    width: 44%;
    padding-left: 15px;
    box-sizing: border-box;
}
@media (max-width: 768px) {
    .chapter-thumb-item{
        width: 100%;
        padding-left: 0;
        padding-top: 1rem;
    }
}
.chapter-thumb-item:first-of-type{
    width: 56%;
    padding-left: 0;
}
@media (max-width: 768px) {
    .chapter-thumb-item:first-of-type{
        width: 100%;
        padding-top: 0;
    }
}
.chapter-thumb-item img{
    width: 100%;
    height: auto;
    vertical-align: bottom;
    object-fit: cover;
    min-height: 362px;
}
@media (max-width: 768px) {
    .chapter-thumb-item img{
        object-fit: unset;
        min-height: unset;
    }
}
.chapter-text{
    margin-top: 5.5vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    padding: 0 2.9vw;
}
@media (max-width: 768px) {
    .chapter-text{
        margin-top: 8vw;
        padding: 0 9.5vw;
    }
}
.chapter-text-title{
    width: 35%;
}
@media (max-width: 768px) {
    .chapter-text-title{
        width: 100%;
    }
}
.chapter-text-title h2{
    font-size: 2.8rem;
    letter-spacing: 0.22em;
    line-height: 1.87;
}
@media (max-width: 768px) {
    .chapter-text-title h2{
        font-size: 2.4rem;
        letter-spacing: 0.2em;
    }
}
@media (max-width: 420px) {
    .chapter-text-title h2{
        font-size: 2.2rem;
    }
}
.chapter-text-title h2 span.en{
    display: block;
    font-size: 1.2rem;
    padding-bottom: 1rem;
    letter-spacing: 0.1em;
    color: #C7DDD1;
    font-weight: normal;
}
.chapter-text-title h2 span.en .int{
    display: inline-block;
    font-size: 1.8rem;
    padding-left: 1rem;
    color: #C7DDD1;
    font-weight: normal;
}
.chapter-text-lead{
    width: 65%;
    padding-left: 4vw;
}
@media (max-width: 768px) {
    .chapter-text-lead{
        width: 100%;
        padding-left: 0;
        margin-top: 5vw;
    }
}
.chapter-text-lead p{
    font-size: 1.4rem;
    line-height: 2.15;
}
.chapter-inner.chapter-wrap2{
    padding: 17vw 40px 0 calc(40px + 2.9vw);
    max-width: 1280px;
    margin: 0 auto;
}
@media (max-width: 768px) {
    .chapter-inner.chapter-wrap2{
        padding: 12rem 0 0 0;
    }
}
.chapter-flex{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: flex-start;
}
@media (max-width: 768px) {
    .chapter-flex{
        flex-direction: column-reverse;
    }
}
.chapter-flex-left{
    width: 50%;
    padding-right: 7vw;
}
@media (max-width: 768px) {
    .chapter-flex-left{
        width: 100%;
        padding-right: 5vw;
        margin-top: 1rem;
    }
}
.chapter-flex-left-text{
    margin-top: 3.2vw;
}
@media (max-width: 768px) {
    .chapter-flex-left-text{
        margin-top: 8vw;
        padding: 0 4.5vw 0 9.5vw;
    }
}
.chapter-flex-left-text h2{
    font-size: 2.8rem;
    letter-spacing: 0.22em;
    line-height: 1.87;
}
@media (max-width: 768px) {
    .chapter-flex-left-text h2{
        font-size: 2.4rem;
        letter-spacing: 0.2em;
    }
}
@media (max-width: 420px) {
    .chapter-flex-left-text h2{
        font-size: 2.2rem;
    }
}
.chapter-flex-left-text h2 span.en{
    display: block;
    font-size: 1.2rem;
    padding-bottom: 1rem;
    letter-spacing: 0.1em;
    color: #C7DDD1;
    font-weight: normal;
}
.chapter-flex-left-text h2 span.en .int{
    display: inline-block;
    font-size: 1.8rem;
    padding-left: 1rem;
    color: #C7DDD1;
    font-weight: normal;
}
.chapter-flex-left-lead p{
    margin-top: 2rem;
    font-size: 1.4rem;
    line-height: 2.2;
}
.chapter-flex-right{
    width: 50%;
}
@media (max-width: 768px) {
    .chapter-flex-right{
        width: 100%;
    }
}
.chapter-flex-right figure{
    margin: 0 auto;
}
.chapter-flex-right figure img{
    width: 100%;
    height: auto;
}
.chapter-wrap3{
    width: 100%;
    padding: 12rem 0 0;
}
.chapter-wrap3 .chapter-main-item{
    width: 90.26%;
    padding: 12rem 0 0;
}
.chapter-wrap3 .chapter-sub{
    width: 100%;
    padding: 0 2.8vw;
}
.chapter-wrap3 .chapter-main-text{
    padding: 3.2vw 40px 0 calc(40px + 2.9vw);
    max-width: 1280px;
    margin: 0 auto;
}
@media (max-width: 768px) {
    .chapter-wrap3{
        padding: 0 0;
        margin-top: 7rem;
    }
.chapter-wrap3 .chapter-main-item{
    width: 100%;
    padding: 12rem 0 0;
}
.chapter-wrap3 .chapter-sub{
    width: 100%;
    padding: 0 5vw 0 0;
    margin-top: 1rem;
}
.chapter-wrap3 .chapter-main-text{
    margin-top: 8vw;
    padding: 0 4.5vw 0 9.5vw;
}
}
.chapter-main{
    width: 100%;
}
.chapter-main img{
    width: 100%;
    height: auto;
}
.chapter-sub{
    width: 100%;
}
@media (max-width: 768px) {
    .chapter-sub{
        width: 100%;
        padding: 1rem 5vw 0;
    }
}
.chapter-sub-item{
    margin-top: 2rem;
    max-width: 70%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
}
@media (max-width: 768px) {
    .chapter-sub-item{
        margin-top: 0;
        max-width: 100%;
    }
}
.chapter-sub-item img{
    width: calc(50% - 2rem);
    margin-right: 2rem;
}
@media (max-width: 768px) {
    .chapter-sub-item img{
        width: 100%;
        margin-right: 0;
    }
}
.chapter-sub-item img:last-of-type{
    margin-right: 0;
}
.chapter-main-text{
    width: 100%;
    margin: 2.9vw auto 0;
}
@media (max-width: 768px) {
    .chapter-main-text{
        width: 100%;
        margin-top: 8vw;
        padding: 0 9.5vw;
    }
}
.chapter-main-text-lead p{
    margin-top: 2rem;
    font-size: 1.4rem;
    line-height: 2.2;
    max-width: 726px;
    padding-right: 5vw;
}
@media (max-width: 768px) {
    .chapter-main-text-lead p{
        padding-right: 0;
    }
}
.chapter-main-text h2{
    font-size: 2.8rem;
    letter-spacing: 0.22em;
    line-height: 1.87;
    max-width: 726px;
    padding-right: 5vw;
}
@media (max-width: 768px) {
    .chapter-main-text h2{
        font-size: 2.4rem;
        letter-spacing: 0.2em;
        padding-right: 0;
    }
}
@media (max-width: 420px) {
    .chapter-main-text h2{
        font-size: 2.2rem;
    }
}
.chapter-main-text h2 span.en{
    display: block;
    font-size: 1.2rem;
    padding-bottom: 1rem;
    letter-spacing: 0.1em;
    color: #C7DDD1;
    font-weight: normal;
}
.chapter-main-text h2 span.en .int{
    display: inline-block;
    font-size: 1.8rem;
    padding-left: 1rem;
    color: #C7DDD1;
    font-weight: normal;
}

.relation-sec{
    border-top: 1px solid #CCCCCC;
    padding: 12rem 40px;
    width: calc(100% - 80px);
    margin: 0 auto;
}

.relation-sec .flex_box{
    max-width: 1100px;
    margin: 0 auto;
  }
.relation-sec .relation-link{
    width: 46%;
    margin-top: 4rem;
}
.relation-sec .relation-link:nth-child(1),
.relation-sec .relation-link:nth-child(2){
    margin-top: 0;
}
.relation-sec .relation-link a.relation-link-item{
    position: relative;
    display: block;
}
.relation-sec .relation-link a.relation-link-item:after{
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .3);
    position: absolute;
    top: 0;
    left: 0;
    transition: all .2s ease;
}
.relation-sec .relation-link a.relation-link-item:hover{
    opacity: 1;
}
.relation-sec .relation-link a.relation-link-item:hover:after{
    background: rgba(0, 0, 0, 0);
}
.relation-sec .relation-link a.relation-link-item img{
    vertical-align: bottom;
}
.relation-sec .relation-link a.relation-link-text{
    position: relative;
    display: inline-block;
    margin-top: 2rem;
    font-size: 1.6rem;
    padding-left: 40px;
}
.relation-sec .relation-link a.relation-link-text:before{
    content: '';
    display: inline-block;
    width: 24px;
    height: 1px;
    background: #A6B4AC;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(0, -50%);
}

@media screen and (max-width: 767px) {
    .relation-sec{
        margin-top: 7rem;
        padding: 7rem 0;
        width: calc(100% - 10vw);
    }
    .relation-sec .flex_box{
        max-width: 1100px;
        margin: 0 auto;
    }
    .relation-sec .relation-link{
        width: 100%;
        margin-top: 5.5rem;
    }
    .relation-sec .relation-link:nth-child(2){
        margin-top: 5.5rem;
    }
    .relation-sec .relation-link:first-of-type{
        margin-top: 0;
    }
    .relation-sec .relation-link a.relation-link-text{
        position: relative;
        display: block;
        margin-top: 1rem;
        font-size: 1.6rem;
        padding-left: 40px;
    }
    .relation-sec .relation-link a.relation-link-text:before{
        content: '';
        display: inline-block;
        width: 24px;
        height: 1px;
        background: #A6B4AC;
        position: absolute;
        top: 50%;
        left: 0;
        transform: translate(0, -50%);
    }
}
.chapter-wrap3 .chapter-main-item {
    position: 
}