@charset "UTF-8";

/*主たるブレイクポイント
sp　375〜450px  550px以下
tab　601〜800px 900px以下
pc　950~1200px  900px以上
*/

/*slick.cssの読み込み
---------------------------------------------------------------------------*/
@import url("https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css");

/*=================
全体の設定
===================*/
html {
    font-size: 67.5%;
}

body {
    background: #faf8f3;
    background-image: url(../);
    font-size: 1.6rem;
    font-family: "ten-mincho", serif;
    font-weight: 400;
    font-style: normal;
    /*行間*/
    line-height: 1;
    color: #333;
}

a {
    /*下線削除*/
    text-decoration: none;
}

a:hover {
    /*カーソルがあった時に半透明になる*/
    opacity: 0.5;
}

p {
    line-height: 1.6;
    color: #534340;
}

.wrapper {
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.h3 {
    font-size: large;
}

h4 {
    font-weight: normal;
    text-align: center;
}

.px_1 {
    margin-left: 100px;
    margin-bottom: 50px;
}

.px_2 {
    margin: 200px 0 80px 100px;
}

.px_3 {
    margin: 100px 0 80px 100px;
}

.px_4 {
    margin: 30px 0 80px 100px;
}

.px_5 {
    margin-top: 150px;
    margin-left: 150px;
    margin-bottom: 120px;
}

@media screen and (max-width:550px) {
    .px_3 {
        position: relative;
        margin: 200px 0;
        padding-left: 30px;
        top: 150px;
    }

    .px_5 {
        position: relative;
        top: 80px;
    }
}

/*=================
汎用クラス
===================*/
.inner {
    padding-left: 5.6%;
    padding-right: 5.6%;
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
}

.section_title {
    font-size: 2.6vw;
    font-weight: 100;
    font-style: normal;
    text-align: left;
    color: #534340;
}

.sub_title {
    text-align: left;
    font-size: 3.5rem;
    margin-bottom: 32px;
    margin-left: 30px;
}

.sub_title::before {
    width: 3px;
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: #FFE600;
    border-radius: 2.5px;
}

.text {
    line-height: 2;
    margin-top: -0.5em;
}

img {
    width: 100%;
    height: auto;
    vertical-align: bottom;
}

@media screen and (win-width:1025px) {
    .inner {
        padding-left: 0;
        padding-right: 0;
    }

}

@media screen and (max-width:550px) {
    .section_title {
        margin-left: 20px;
        margin-top: -40px;
        font-size: 7vw;
    }

    .img_area {
        width: 40%;
    }

}

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

#header.is-show {
    opacity: 1;
    pointer-events: auto;
}

#header {
    left: 0;
    opacity: 0;
    pointer-events: none;
    position: fixed;
    top: 0;
    transition: opacity .4s ease, mix-blend-mode .4s ease;
    width: 100%;
    z-index: 10;
}

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

#header .header h1 {
    width: 14.5833333333vw;
    padding-left: 50px;
}

#header .header h1 a {
    transition: opacity .4s ease;
}

#header .header #gnav ul {
    align-items: center;
    display: flex;
}

header .header #gnav ul li {
    padding-right: 4vw;
}

li {
    list-style-type: none;
}

#header .header #gnav ul li a {
    transition: opacity .4s ease;
}


#header .header #gnav ul li a {
    color: #534340;
    font-size: 1.7rem;
    display: block;
}

@media (max-width: 550px) {
    #header .header #gnav ul li a {
        font-size: 1.2rem;
        font-weight: 500;
        letter-spacing: .1em;
        line-height: 200%;
    }

    #header .header h1 {
        width: 35vw;
        padding-left: 30px;
    }

}

/*=================
concept
===================*/

.kuguritextwrap {
    margin: 40px 0 0 0;
    display: flex;
}

.kuguriimage01 {
    width: 40%;
    margin: 0 0 0 60px;
}


.kuguritextwrap2 {
    margin: 135px 0 0 40px;
    text-align: left;
    font-size: 1.6rem;
}

@media screen and (min-width: 600px) {
    .kuguritext {
        margin: 30px 0 0 80px;
        font-size: 1.6rem;
    }
}

@media screen and (max-width: 960px) {
    .kuguri {
        margin: 120px 0 0 0;
    }

    .kuguritextwrap {
        margin: 30px 0 0 0;
        width: 100%;
        flex-direction: column;
    }

    .kuguritext {
        margin: 30px 0 0 50px;
        font-size: 1.5rem;
    }
}


/*=================
ROOM
===================*/
.p-media-content__slider-wrap.p-media-content__head {
    display: flex;
}

.c-heading-vertical {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    white-space: nowrap;
}

.c-heading-vertical__en {
    display: block;
    font-family: Cardo, serif;
    font-weight: 400;
    letter-spacing: 0;
    -webkit-writing-mode: vertical-lr;
    writing-mode: vertical-lr;
}

.c-heading-vertical__jp {
    display: block;
    font-family: Zen Old Mincho, serif;
    font-weight: 500;
    line-height: 1.55;
    color: #282828;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
    transform: scaleY(1.05);
}

.modal__container {
    margin: 0 auto;
    width: 70%;
}

.p-media-content__slider {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin: 0 0 0 auto;
}

.splide.is-initialized,
.splide.is-rendered {
    visibility: visible;
}

.p-media-content__slider-main {
    width: 100%;
}

.splide {
    position: relative;
    visibility: hidden;
}

.p-media-content__slider-main .splide-wrapper,
.p-media-content__slider-main .splide__track,
.p-media-content__slider-main .splide__list,
.p-media-content__slider-main .splide__slide {
    height: 100% !important;
}

.p-media-content__slider-main .splide__arrows {
    display: none;
}


.p-media-content__room-figure {
    position: relative;
}

.p-media-content__room-figure img {
    border: 1px solid #d9d9d9;
}

.p-media-content__room-list {
    padding-top: 30px;
    padding-bottom: 80px;
}

.p-media-content__room-row {
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    margin: 0 auto;
}

.p-media-content__room-item {
    font-size: 1.4rem;
    line-height: 2;
    color: #282828;
    width: 30%;
    text-align: center;
    padding-left: 30px;
}

.p-media-content__room-detail {
    font-size: 1.4rem;
    color: #282828;
    width: 50%;
    line-height: 2;
    text-align: center;
}

.splide-wrapper {
    margin-right: 50px;
}

.c-text-lead {
    text-align: center;
    margin: 0 auto;
    padding: 30px 0;
    font-size: 1rem;
}



@media screen and (min-width: 550px) {
    .p-media-content__inner {
        width: 75.5555555556vw;
        margin-left: auto;
    }

    .p-media-content__slider-wrap.p-media-content__head {
        gap: 0 9.3055555556vw;
        padding-top: 120px;
        margin-left: auto;
    }

    .c-heading-vertical--border {
        gap: 0 min(.2777777778vw, .25rem);
    }

    .c-heading-vertical {
        gap: 0 min(.8333333333vw, .75rem);
    }

    .p-media-content__slider-wrap.p-media-content__head .c-heading-vertical__jp {
        margin-top: min(.9722222222vw, .875rem);
    }

    .c-heading-vertical--border .c-heading-vertical__jp {
        font-size: min(2.3611111111vw, 2.125rem);
        letter-spacing: .18em;
    }

    .c-heading-vertical__jp {
        margin-top: min(.5555555556vw, .5rem);
        font-size: min(2.2222222222vw, 2rem);
        letter-spacing: .12em;
    }

    .c-heading-vertical--border .c-heading-vertical__en {
        font-size: clamp(.5625rem, .8333333333vw, .75rem);
    }

    .c-heading-vertical__en {
        font-size: clamp(.6875rem, 1.1111111111vw, 1rem);
        color: #282828;
    }

    .c-heading-vertical--border:after {
        display: block;
        width: 1px;
        height: min(13.8888888889vw, 12.5rem);
        margin-right: min(1.1111111111vw, 1rem);
        content: "";
        background-color: #848580;
    }

    .p-media-content__slider {
        width: 60vw;
    }

    .p-media-content__slider-main {
        height: 42.3611111111vw;
    }

    .p-list-room__item .c-text-lead {
        width: min(68.75vw, 61.875rem);
        margin: min(2.6388888889vw, 2.375rem) 0 min(2.6388888889vw, 2.375rem) auto;
    }

    .c-text-lead {
        font-size: 1.6rem;
        line-height: 1.55;
    }

    .p-media-content__room {
        display: flex;
        justify-content: space-between;
        margin: min(2.6388888889vw, 2.375rem) 0 0 auto;
    }

    .p-media-content__room-desc {
        position: relative;
        width: 32.1212121212%;
    }

    .p-media-content__room-content {
        width: 57.8787878788%;
    }

    .room-content {
        padding-right: 200px;
    }

    .p-media-content__room-list {
        margin-top: min(-.6944444444vw, -.625rem);
    }

    .p-media-content__room-row {
        display: flex;
        justify-content: flex-start;
        padding: min(.6944444444vw, .625rem) 0;
        border-bottom: .0625rem dashed rgba(103, 104, 96, .5);
    }

    .p-media-content__room-item {
        width: 110px;
        font-size: 1.4rem;
        letter-spacing: .02em;
    }

    .p-media-content__room-detail {
        width: min(22.0138888889vw, 19.8125rem);
        font-size: 1.4rem;
        line-height: 2;
        letter-spacing: .02em;
    }

    .modal__container {
        margin: 0 auto;
        width: 90%;
    }
}


/*=================
アコーディオン(ハリ半/アメニティー/FAQ/JR)
===================*/
.accordion-area {
    list-style: none;
    width: 96%;
    max-width: 900px;
    margin-top: 60px;
    margin: 0 auto;
}

.accordion-area li {
    margin: 10px 0;
}

/*アコーディオンタイトル*/
.access_title {
    position: relative;
    cursor: pointer;
    font-size: 1.6rem;
    text-align: left;
    padding: 3% 3% 3% 50px;
    transition: all .5s ease;
    line-height: 160%;
}

/*アイコンの＋と×*/
.access_title::before,
.access_title::after {
    position: absolute;
    content: '';
    width: 15px;
    height: 2px;
    background-color: #333;
}

.access_title::before {
    top: 48%;
    right: 15px;
    transform: rotate(0deg);
}

.access_title::after {
    top: 48%;
    right: 15px;
    transform: rotate(90deg);

}

/*　closeというクラスがついたら形状変化　*/

.access_title.close::before {
    transform: rotate(45deg);
}

.access_title.close::after {
    transform: rotate(-45deg);
}

/*アコーディオンで現れるエリア*/
.box {
    display: none;
    /*はじめは非表示*/
    border-radius: 20px;
    margin: 0 3% 3% 3%;
    padding: 3%;
}

@media screen and (max-width: 550px) {
    .bottom_box .logo_image {
        display: none;
    }

    .accordion-area {
        text-align: left;
        margin: -30px 0 120px 0;
        width: 90%;
    }

    .access_title {
        font-size: 1.6rem;
        text-align: left;
    }
}


/*================
料金表
=================*/

.box-fade.fadeIn {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
}

.funiture {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
}

.funiture_inner {
    position: relative;
    width: 85%;
    margin: 0 auto;
    background-color: #fff;
    border-radius: 30px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    z-index: 1;
    margin-top: 50px;
}

.funiture ul {
    width: 100%;
    margin-left: clamp(40px, 5.0725vw, 70px);
    padding: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.funiture ul li:not(:nth-last-of-type(-n+2)) {
    border-bottom: 1px solid #eee;
}

.funiture ul li {
    width: 80%;
    margin-left: 40px;
    padding: clamp(16px, 2vw, 30px) 0;
}

.funiture ul li .txt {
    font-size: clamp(12px, 1.0834vw, 13px);
    margin-bottom: 1.2em;
    letter-spacing: 0.05em;
}

.link {
    font-size: 12px;
}


.clm_title {
    padding: auto;
    margin: auto;
    margin-top: 60px;
    text-align: center;
    letter-spacing: 1.5rem;
    color: #333;
}



@media only screen and (max-width: 550px) {
    .clm_title {
        width: 100%;
        writing-mode: horizontal-tb;
        padding-top: 20px;
        text-align: center;
    }

    .funiture {
        margin-top: -100px;
    }

    .funiture ul {
        margin: 0 auto;
        flex-direction: column;
    }

    .funiture ul li {
        width: 90%;
        margin: 0 auto;
        margin-left: 0;
        justify-content: space-between;
    }

}

/*========
option
 ========= */
.con_offer {
    position: relative;
    z-index: 1;
    margin-right: auto;
    margin-left: auto;
}

.con_offer ul {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    width: 100%;
}

.con_offer.inview_fadeIn.show ul li:nth-child(1) {
    transition-delay: .3s;
}

.con_offer.inview_fadeIn.show ul li:nth-child(2) {
    transition-delay: .6s;
}

.con_offer.inview_fadeIn.show ul li {
    opacity: 1;
    transition: opacity 1s ease-out, transform 1s ease-out;
    transform: translateY(0);
}

.con_offer ul li {
    position: relative;
    background-color: #fff;
    opacity: 0;
    transform: translateY(20px);
    box-shadow: 0px .8em 2em 0px rgba(0, 0, 0, 0.5);
    margin-left: 1.5rem;
    margin-right: 1.5rem;
    margin-bottom: 80px;
    width: 22%;
}

.con_offer ul .big {
    position: relative;
    background-color: #fff;
    opacity: 0;
    transform: translateY(20px);
    box-shadow: 0px .8em 2em 0px rgba(0, 0, 0, 0.5);
    margin-left: 1.5rem;
    margin-right: 1.5rem;
    margin-bottom: 80px;
    width: 70%;
}

.big a .photo img {
    -webkit-transition: -webkit-transform .2s ease-out;
    transition: -webkit-transform .2s ease-out;
    transition: transform .2s ease-out;
    transition: transform .2s ease-out, -webkit-transform .2s ease-out;
    padding-top: 30px;
    width: 32%;
}

.con_offer ul li a {
    text-decoration: none !important;
    margin-right: auto;
    margin-left: auto;
    display: block;
    text-align: center;
    z-index: 1;
    position: relative;
}

.con_offer ul li a .box_relative {
    overflow: hidden;
    position: relative;
    bottom: 20px;
}

.tmp_viewmore {
    position: relative;
}


.tmp_viewmore a {
    cursor: pointer;
}


.tmp_viewmore a .photo {
    overflow: hidden;
}

.tmp_viewmore a .photo img {
    -webkit-transition: -webkit-transform .2s ease-out;
    transition: -webkit-transform .2s ease-out;
    transition: transform .2s ease-out;
    transition: transform .2s ease-out, -webkit-transform .2s ease-out;
}

.con_offer ul li a .txt {
    position: relative;
    bottom: 20px;
    background-color: #fff;
    text-align: center;
}


.inview_fadeIn {
    opacity: 0;
    -webkit-transition: opacity 1s ease-out, -webkit-transform 1s ease-out;
    transition: opacity 1s ease-out, -webkit-transform 1s ease-out;
    transition: transform 1s ease-out, opacity 1s ease-out;
    transition: transform 1s ease-out, opacity 1s ease-out, -webkit-transform 1s ease-out;
    -webkit-transform: translate(0, 30px);
    transform: translate(0, 30px);
    -webkit-transition-delay: 0;
    transition-delay: 0;
}


.inview_fadeIn.show {
    opacity: 1;
    -webkit-transform: translate(0);
    transform: translate(0);
}

@media only screen and (max-width: 550px) {
    .con_offer ul li {
        width: 40%;
    }

    .con_offer ul .big {
        width: 90%;
    }

    .con_offer ul .sho {
        width: 90%;
    }

    .big a .photo img {
        width: 90%;
    }

    .con_offer ul li a .txt {
        padding: 0 20px;
    }
}

/*=================
ACCESS
===================*/

.access_area {
    width: 100%;
    padding: 30px 0;
    border-radius: 20px;
}

.map_po {
    margin: 0 auto;
    padding: 0 auto;
    width: 100%;
    text-align: center;
}

.map {
    width: 80%;
    display: inline-block;
    margin: auto;
    padding: 0 auto;
    position: relative;
    height: 250px;
    padding-bottom: 100px;
}

.access_list {
    border: 1px solid #80776A;
    border-radius: 20px;
    padding-bottom: 5px;
}

.box_title {
    font-size: 1.8rem;
    color: #668863;
    margin-bottom: 10px;
}

.access_movement {
    line-height: 1.5;
}



.bottom_box .textbox .address {
    margin: 16px 0 0;
    font-size: 1.7rem;
}

.logo_saize {
    width: 200px;
    height: 200px;
    margin-left: auto;
    margin-right: auto;
}


@media screen and (max-width: 550px) {
    .map {
        width: 80%;
        justify-content: space-between;
        padding-left: auto;
        padding-right: auto;
        padding-bottom: 100px;
    }
}

/*=================
FAQ
===================*/
.faq-area {
    list-style: none;
    width: 60%;
    justify-content: space-between;
    margin: 0 auto;
}

.faq-area li {
    border-top: 1px solid #80776A;
    border-bottom: 1px solid #80776A;
    margin: 3rem 0 0;
}

.faq-osirase {
    padding-top: 180px;
    margin-left: 140px;
    padding-bottom: 40px;
}

/*アコーディオンタイトル*/
.faq_title {
    position: relative;
    /*+マークの位置基準とするためrelative指定*/
    cursor: pointer;
    font-size: 1.8rem;
    padding: 3% 3% 3% 50px;
    transition: all .5s ease;
}

/*アイコンの＋と×*/
.faq_title::before,
.faq_title::after {
    position: absolute;
    content: '';
    width: 15px;
    height: 2px;
    background-color: #333;
}

.faq_title::before {
    top: 48%;
    right: 15px;
    transform: rotate(0deg);
}

.faq_title::after {
    top: 48%;
    right: 15px;
    transform: rotate(90deg);

}

/*　closeというクラスがついたら形状変化　*/

.faq_title.close::before {
    transform: rotate(45deg);
}

.faq_title.close::after {
    transform: rotate(-45deg);
}

.faq_movement {
    line-height: 2rem;
}

/*アコーディオンで現れるエリア*/
.box {
    display: none;
    /*はじめは非表示*/
    border-radius: 20px;
    margin: 0 3% 3% 3%;
    padding: 3%;
}

@media screen and (max-width: 550px) {
    .bottom_box {
        width: 100%;
    }

    .faq-area {
        width: 80%;
        justify-content: space-between;
        margin: 0 auto;
        list-style: none;
        margin-right: 10%;
    }


    .faq-osirase {
        padding-top: 180px;
        margin: 0 30px;
        padding-bottom: 40px;
    }
}


/*=================
FOOTER
===================*/

.footer {
    position: relative;
    background: #faf9f5;
    background-repeat: repeat-x;
    background-position: bottom;
}


.footer__logo {
    width: 14.0277777778vw;
    height: 8.0555555556vw vw;
}

.footer__copy {
    font-size: 1.6rem;
    text-align: center;
    letter-spacing: 0;
    padding-bottom: 3rem;
    bottom: 20px;
}

.bottom_box {
    display: flex;
    height: 250px;
}

.bottom_box .logo_image {
    max-width: 100%;
    width: 200px;
    height: 200px;
}

.bottom_box .textbox .name {
    font-size: 4rem;
    margin-top: 60px;
}

.address {
    line-height: 2.3rem;
}

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

    .footer {
        padding-top: 50px;
    }

    .bottom_box {
        width: 50%;
        padding-left: 20px;
    }

}

/*=================
予約ボタン
===================*/

#reserve.is-show {
    opacity: 1;
}

#reserve {
    align-items: center;
    background: #FFFC00;
    border-radius: 50%;
    bottom: 3.3333333333vh;
    display: flex;
    flex-direction: column;
    height: 12.0833333333vw;
    justify-content: center;
    opacity: 0;
    overflow: hidden;
    position: fixed;
    right: 3.8888888889vw;
    transition: opacity .4s ease, transform .3s ease;
    width: 12.0833333333vw;
    z-index: 2;
}

#reserve:before {
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    transform: scaleY(0);
    transform-origin: top center;
    transition: transform .4s ease;
    width: 100%;
}

#reserve p {
    font-size: .5555555556vw;
    line-height: 100%;
    position: relative;
    text-align: center;
}

#reserve p:before {
    transition: background .4s ease;
}


#reserve p:before {
    background: url(../img/mainicon/yoyaku.png) no-repeat 0 0 / contain;
    content: "";
    display: block;
    height: 4vw;
    margin: 0 auto;
    width: 4vw;
}

#reserve p img {
    transition: opacity .4s ease;
}

#reserve p img {
    width: 15vw;
}

#reserve p img.ylw {
    bottom: 0;
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
}

@media screen and (max-width: 550px) {
    #reserve {
        right: 30px;
        bottom: 30px;
        height: 23vw;
        width: 23vw;
    }

    #reserve p:before {
        background: url(../img/mainicon/yoyaku.png) no-repeat 0 0 / contain;
        content: "";
        display: block;
        height: 8vw;
        margin: 0 auto;
        width: 8vw;
    }

    #reserve p img {
        width: 30vw;
    }
}

/* ================
 price
================= */
table {
    border-collapse: collapse;
    margin: 0 auto;
    padding: 0;
    margin-bottom: 80px;
}

table th,
table td {
    padding: .75em 1em;
    border-bottom: 1px solid #eee;
}

table thead th {
    font-size: .85em;
    padding: 1em;
}


table tbody th {
    text-align: left;
    font-size: .8em;
}

.txt {
    text-align: left;
    font-size: .8em;
}

.price_kil {
    text-align: left;
}

.price {
    text-align: right;
    font-size: .8em;
}

tbody:hover td,
tbody:hover th {
    color: transparent;
    text-shadow: 0 0 3px #aaa;
    background: #eee
}

tbody:hover tr:hover td,
tbody:hover tr:hover th {
    color: #444;
    text-shadow: 0 1px 0 #fff;
    background: #fff
}

@media screen and (max-width: 600px) {
    table {
        width: 100%;
    }

    .price_kil {
        font-size: 1rem;
    }

    .txt {
        text-align: left;
        font-size: .6em;
    }
}

/*=============
other
==============*/
.other {
    align-items: center;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    height: auto;
    justify-content: center;
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 100%;
    padding-bottom: 100px;
}

.other_zero {
    display: flex;
    align-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    margin: 0;
    padding: 0;
    width: 960px;
    max-width: 100%;
}

.other_one {
    display: flex;
    align-items: stretch;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    margin: 0px 0px 0px 0px;
    padding: 0px;
    width: 100%;
    max-width: 100%;
}

.other_two {
    align-items: center;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    margin: 0;
    padding: 0;
    width: 50%;
    max-width: 50%;
}

.other_three {
    align-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    margin: 0px 0px 32px 0px;
    padding: 0px;
    max-width: 100%;
}

.other_text {
    color: #1f1f22;
    font-family: var(--s-font-639a0cd8);
    font-feature-settings: 'palt' 1;
    font-size: 14px;
    font-weight: 400;
    height: auto;
    letter-spacing: normal;
    line-height: 1.8;
    margin: 0px 0px 0px 0px;
    text-align: center;
    width: auto;
    max-width: 100%;
    justify-content: center;
}

.other_text2 {
    color: #1f1f22;
    font-family: var(--s-font-639a0cd8);
    font-feature-settings: 'palt' 1;
    font-size: 32px;
    font-weight: 400;
    height: auto;
    letter-spacing: 0.1em;
    line-height: 1.8;
    margin: 0px 0px 0px 0px;
    text-align: center;
    width: auto;
    max-width: 100%;
    justify-content: center;
}

.other_fore {
    color: #1f1f22;
    font-family: var(--s-font-639a0cd8);
    font-feature-settings: 'palt' 1;
    font-size: 14px;
    font-weight: 400;
    height: auto;
    letter-spacing: normal;
    line-height: 1.8;
    margin: 0px 0px 40px 0px;
    text-align: center;
    width: auto;
    max-width: 100%;
    justify-content: center;
}

.other_fore img {
    width: 200px;
}

.other_link {
    align-content: center;
    align-items: center;
    border: 1.5px solid #000;
    flex: none;
    flex-direction: row;
    flex-wrap: nowrap;
    height: 58px;
    justify-content: space-between;
    padding: 0;
    width: 240px;
    max-width: 100%;
}

.other_fifth {
    align-content: center;
    align-items: center;
    flex: none;
    flex-direction: row;
    flex-wrap: nowrap;
    height: 100%;
    justify-content: center;
    margin: 0px 0px 0px 0px;
    padding: 0px;
    width: 100%;
    max-width: 100%;
}

.other_six {
    padding-left: 400px;
}

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

    .other {
        display: flex;
    }

    .other_zero {
        flex: none;
        margin: 0;
        width: 90%;
        max-width: 90%;
    }

    .other_one {
        align-content: center;
        align-items: center;
        flex-direction: column;
        flex-wrap: nowrap;
        margin: 0;
    }

    .other_two {
        display: flex;
        margin: 0px 0px 72px 0px;
        width: 50%;
        max-width: 50%;
    }

    .other_three {
        margin: 0px 0px 24px 0px;
        max-width: 100%;
    }

    .other_six {
        padding-left: 0;
        font-size: 15px;
        text-align: center;
    }

    .other_fore {
        display: flex;
    }

    .other_text2 {
        font-size: 25px;
    }
}

/*=============
SNS
==============*/

.btn-social-icon-instagram {
    text-decoration: none;
    display: inline-block;
    text-align: center;
    color: #2e6ca5;
    font-size: 25px;
    text-decoration: none;
}

.btn-social-icon-instagram:hover {
    color: #668ad8;
    transition: .5s;
}

.btn-social-icon-instagram__square {
    border-radius: 13px;
    position: relative;
    display: inline-block;
    width: 50px;
    height: 50px;
    font-size: 35px;
    line-height: 50px;
    background: linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
    overflow: hidden
}

.btn-social-icon-instagram__square:before {
    content: '';
    position: absolute;
    top: 23px;
    left: -18px;
    width: 60px;
    height: 60px;
    background: -webkit-radial-gradient(#ffdb2c 10%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%);
    background: radial-gradient(#ffdb2c 10%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%);
}

.btn-social-icon-instagram__square .fa-instagram {
    color: white;
    line-height: 50px;
    position: relative;
    z-index: 2
}

/*=============
グレースケール
==============*/
.monochrome {
    filter: grayscale(100%);
}