/* --------------------------------------
    Default Styling
-------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth;
}
body {
    background-color: #f9f1e2;
    color: #402726;
    font-size: 16px;
    font-family: "Times New Roman", "Noto Serif JP", serif,
        "Hiragino Mincho ProN", "MS PMincho", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

figure {
    margin: 0;
}
img {
    max-width: 100%;
}
a {
    text-decoration: none;
    opacity: 1;
    transition: all 0.15s ease-in-out;
}
a:hover {
    opacity: 0.4;
}
br.tablet,
br.sp {
    display: none;
}
p.copymark {
    text-align: center;
    font-size: 12px;
}
/* --------------------------------------
    Reusable Classes
-------------------------------------- */
.boxLead {
    max-width: 1080px;
    width: 100%;
    margin: 72px auto;
    padding: 20px 0;
}
.box {
    max-width: 1080px;
    width: 100%;
    margin: 104px auto 72px;
    padding: 20px;
}
.box2 {
    max-width: 1080px;
    width: 100%;
    margin: 0 auto;
    padding: 20px 0;
}

h2.tit01 {
    font-family: "Times New Roman";
    font-size: 40px;
    letter-spacing: 4.8px;
    text-align: center;
    margin-bottom: 64px;
}
h2.tit01 > span {
    display: block;
    margin-top: 16px;
    font-family: "Noto Serif JP";
    font-size: 14px;
    letter-spacing: 1.68px;
}

h2.tit02 {
    font-size: 32px;
    color: #b78900;
    font-weight: 400;
    line-height: 24px; /* 75% */
    letter-spacing: 3.84px;
    margin-bottom: 64px;
}

h2.tit02 > span {
    display: block;
    color: #331e1e;
    letter-spacing: 1.92px;
    margin-top: 5px;
    font-size: 16px;
    line-height: normal;
}

h3.tit01 {
    border-top: solid 1px #ffffff;
    position: relative;
    color: #c7c7c7;
    font-size: 32px;
    line-height: 48px;
    letter-spacing: 1.92px;
    margin-bottom: 64px;
    padding-top: 12px;
}
h3.tit01:after {
    position: absolute;
    content: " ";
    display: block;
    border-bottom: solid 1px #e6b422;
    bottom: 60px;
    width: 16%;
}

h3.tit02 {
    color: #231815;
    font-weight: 600;
    line-height: 170%;
    letter-spacing: 1.92px;
}

h3.tit02 > span {
    color: #231815;
    font-family: "Noto Serif JP";
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 170%; /* 20.4px */
    letter-spacing: 1.2px;
}

h4.tit02 {
    font-size: 16px;
    /* color: #c2b790; */
    letter-spacing: 1.28px;
    margin-bottom: 32px;
}
h4.tit02 > span {
    display: block;
    color: #b78900;
    font-family: "Times New Roman";
    font-size: 28px;
    letter-spacing: 2.24px;
    margin-bottom: 5px;
}

.white {
    color: #c7c7c7;
}
/* --------------------------------------
    contact btn
-------------------------------------- */
#contactBtn img {
    margin-bottom: 4px;
    width: 34px;
}
#contactBtn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    /* はじめは非表示 */
    opacity: 0;
    transform: translateY(100px);
}
#contactBtn a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.5);
    width: 80px;
    height: 80px;
    color: #331e1e;
    text-align: center;
    text-transform: uppercase;
    font-size: 0.6rem;
    transition: all 0.3s;
    z-index: 2;
}
/*　上に上がる動き　*/
#contactBtn.UpMove {
    animation: UpAnime 0.5s forwards;
}
@keyframes UpAnime {
    from {
        opacity: 0;
        transform: translateY(100px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/*　下に下がる動き　*/
#contactBtn.DownMove {
    animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 1;
        transform: translateY(100px);
    }
}

/* --------------------------------------
    main view
-------------------------------------- */

.mainview {
    background: radial-gradient(#464545, #0c0c0c);
}
.mainview--image {
    /* background: center / cover url("../img/mainview.webp"); */
    background: center / cover url("../img/MV-image.webp");
    display: flex;
    height: 630px;
    /* max-width: 1920px; */
    width: 100%;
    margin: 0 auto;
    justify-content: center;
    font: bold calc(1em + 2 * (100vw - 120px) / 100);
    position: relative;
}

.top-deco p {
    position: absolute;
    z-index: 1;
}
.top-deco01 {
    max-width: 350px;
    left: 0;
    top: 0;
}
.top-deco02 {
    max-width: 350px;
    right: 0;
    bottom: 0;
}

.mainCopy {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #fff;
}
.mainCopy h1 {
    font-size: 64px;
    font-weight: 500;
    letter-spacing: 8.82px;
    line-height: 56px;
    margin-bottom: 20px;
}
.mainCopy h1 span {
    display: block;
    color: #e6b422;
    text-align: center;
    text-shadow: 0px 0px 8.593px rgba(255, 229, 152, 0.4);
    font-family: "Times New Roman";
    font-size: 34px;
    line-height: 88px;
    letter-spacing: 4.76px;
}
.mainCopy p {
    text-align: center;
    font-size: 20px;
    font-weight: 300;
    line-height: 36px;
    letter-spacing: 4.2px;
}

/* --------------------------------------
    global nav
-------------------------------------- */
.globalNav {
    position: absolute;
    top: 30px;
    right: 35px;
}
.globalNav ul {
    display: flex;
    gap: 16px;
}
.globalNav ul li {
    display: inline-block;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2.4px;
    padding: 10px;
    border: 1px solid #fff;
    border-radius: 1px;
    color: #fff;
}
.globalNav ul li:hover {
    background: #fff;
    color: #000;
}
.globalNav ul li a:hover {
    text-decoration: none;
    color: inherit;
    opacity: 1;
}

.fadeIn {
    animation-name: fadeInAnime;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes fadeInAnime {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.fadeIn2 {
    animation-name: fadeInAnime2;
    animation-duration: 10s;
    animation-fill-mode: forwards;
    opacity: 0;
}
@keyframes fadeInAnime2 {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.scrolldown {
    position: absolute;
    left: 50%;
    bottom: 60px;
}
/* .scrolldown span {
    position: absolute;
    left: -15px;
    top: -15px;
    color: #eee;
    font-size: 1rem;
    letter-spacing: 0.3em;
} */
.scrolldown::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: -4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #eee;
    animation: circlemove 2.3s ease-in-out infinite,
        cirlemovehide 2.3s ease-out infinite;
}

@keyframes circlemove {
    0% {
        bottom: 45px;
    }
    100% {
        bottom: -5px;
    }
}
@keyframes cirlemovehide {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    80% {
        opacity: 0.9;
    }
    100% {
        opacity: 0;
    }
}
.fadeIn3 {
    animation-name: fadeInAnime2;
    animation-duration: 20s;
    animation-fill-mode: forwards;
    opacity: 0;
}
@keyframes fadeInAnime3 {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* --------------------------------------
    lead
-------------------------------------- */
.leadTxt {
    color: #402726;
    text-align: center;
    font-size: 20px;
    font-weight: 500;
    line-height: 220%; /* 35px */
    letter-spacing: 4px;
    margin-bottom: 64px;
}
.movie {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 96px;
}
iframe {
    max-width: 860px;
    width: 100%;
    margin: 0 auto 72px;
    aspect-ratio: 16 / 9;
}

.merit_dtl {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 68px;
    align-items: stretch;
}
.merit_dtl li {
    display: flex;
    width: 198px;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}
.merit_dtl li h3 {
    border-bottom: 1px solid #402726;
    width: 100%;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    text-align: center;
    font-style: normal;
    line-height: normal;
    letter-spacing: 4.2px;
    padding-bottom: 24px;
}
.merit_dtl li h3 > span {
    color: #8f7939;
    font-family: "Times New Roman";
    font-size: 14px;
    line-height: normal;
    letter-spacing: 1.12px;
}
.merit_dtl li > p {
    font-style: normal;
    line-height: 1.6;
    letter-spacing: 1.08px;
}
/* --------------------------------------
    service
-------------------------------------- */
.service {
    padding: 104px 0px 0px 0px;
    background-color: #202020;
    color: #b5b5b5;
}
.service .sectionLead {
    text-align: center;
    font-size: 18px;
    line-height: 42px; /* 262.5% */
    letter-spacing: 1.92px;
    margin-bottom: 128px;
}

.service--middle {
    margin-bottom: 180px;
}

ul.service--contents--li01 li {
    display: flex;
    justify-content: space-evenly;
    align-items: flex-start;
    align-self: stretch;
    flex-direction: row;
    margin-bottom: 160px;
}
ul.service--contents--li01 li:nth-child(2n) {
    flex-direction: row-reverse;
}

ul.service--contents--li01 li div.summary--text {
    max-width: 480px;
    width: 100%;
}
.summary--title {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    align-self: stretch;
    margin-bottom: 56px;
}
.summary--title h4.tit01 {
    letter-spacing: 1.28px;
}
.summary--title h4.tit01 span {
    display: block;
    color: #b78900;
    font-family: "Times New Roman";
    font-size: 28px;
    letter-spacing: 2.84px;
    margin-top: 6px;
}
.summary--title p {
    border: 0.6px solid #fff;
    padding: 5px 16px;
    display: inline-block;
    font-weight: 300;
}
span.summary--text--small {
    display: block;
    font-size: 13px;
    line-height: 165%; /* 18.48px */
    letter-spacing: 2.28px;
    margin-top: 23px;
}
p.summary--text--dtl {
    line-height: 172%; /* 27.52px */
    letter-spacing: 2.4px;
}
.service--image img {
    height: 345px;
    width: auto;
}

/*-- 業務効率化 --*/
.service--contents--li02 {
    display: flex;
    padding: 40px 16px;
    align-items: flex-start;
    gap: 56px;
    align-self: stretch;
    justify-content: space-evenly;
}
.service--contents--li02 li {
    width: 45%;
    padding: 0px 16px;
}

.service--contents--li02 li p {
    line-height: 172%; /* 27.52px */
    letter-spacing: 2.6px;
}

/*-- 福利厚生 --*/
ul.service--contents--li03 {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    align-self: stretch;
    padding: 0 32px;
}
p.fukurukousei {
    margin-bottom: 24px;
    letter-spacing: 1.28px;
}
ul.service--contents--li03 li {
    display: flex;
    height: 400px;
    padding: 63px 76px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex: 1 0 0;

    color: #e9e9e9;
    text-align: center;
    text-shadow: 0px 0px 20px #000;
    font-size: 26px;
    font-weight: 500;
    letter-spacing: 2.24px;
}
ul.service--contents--li03 li:nth-child(1) {
    background: center / cover url("../img/fukurikosei01.webp");
}
ul.service--contents--li03 li:nth-child(2) {
    background: center / cover url("../img/fukurikosei02.webp");
}
ul.service--contents--li03 li:nth-child(3) {
    background: center / cover url("../img/fukurikosei03.webp");
}

/* --------------------------------------
    other contents
-------------------------------------- */
ul.othercontents--li01 {
    border-top: 1px solid #8f8a8a;
    display: flex;
    padding: 16px;
    justify-content: space-around;
    align-items: center;
    align-self: stretch;
}

ul.othercontents--li01 > li {
    display: flex;
    max-width: 366px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    flex-shrink: 0;
    margin: 32px 0 32px 0;
}

.othercontentsTitle {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
}

.othercontentsTitle > h3 {
    display: grid;
}

ul.othercontents--li02 {
    border-top: 1px solid #8f8a8a;
    display: flex;
    padding: 16px;
    justify-content: space-around;
    align-self: stretch;
    flex-wrap: wrap;
    padding: 48px 0;
}

ul.othercontents--li02 > li {
    width: 290px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    flex-shrink: 0;
    margin: 32px 0 32px 0;
}

.othercontentsDtl {
    font-weight: 400;
    line-height: 170%;
    letter-spacing: 1.68px;
}

/* --------------------------------------
    membership
-------------------------------------- */

.membership {
    display: flex;
    padding: 32px 0px 0px 0px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    background: url("../img/membership_bk.webp") no-repeat center center / cover;
    background-color: rgba(249, 241, 226, 0.8);
    background-blend-mode: lighten;
}

.membership--li {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 88px;
    align-self: stretch;
    width: 780px;
}

.membership--li > li {
    text-align: center;
    display: flex;
    flex-direction: column;
    text-align: center;
    gap: 16px;
    align-items: center;
}
.membership--li > li > h3 {
    border-top: 1px solid rgba(0, 0, 0, 0.32);
    border-bottom: 1px solid rgba(0, 0, 0, 0.32);
    width: 280px;
    color: #331e1e;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 1.44px;
    padding: 7px 10px;
    gap: 24px;
    flex: 1 0 0;
}

.membership--li > li > p {
    color: #331e1e;
    text-align: center;
    font-style: normal;
    font-weight: 400;
    line-height: 26px; /* 162.5% */
    letter-spacing: 1.92px;
}

.service--contents {
    display: block;
    justify-content: center;
}

.service--contents--membership {
    display: flex;
    justify-content: center;
    margin-bottom: 56px;
}

.membershipPrice {
    color: #331e1e;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 2.16px;
    margin-bottom: -6px;
}

.attention {
    display: flex;
    padding: 8px 24px;
    align-items: center;
    gap: 10px;
    border-radius: 3px;
    background: #e9e1d5;
    margin-top: 6px;
    color: #331e1e;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 1.68px;
}
/* --------------------------------------
    contact
-------------------------------------- */
.contact {
    background: url("../img/contact_bg.webp") no-repeat center center / cover;
    color: #331e1e;
}

.contact > .box {
    margin: 0 auto;
    padding: 104px 0;
}

.contact > .box > .service--contents {
    display: flex;
    padding: 0px 24px;
    justify-content: center;
    align-items: flex-start;
    gap: 88px;
    align-self: stretch;
}

.contact > .box > .service--contents > dl {
    display: flex;
    width: 325px;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.contact > .box > .service--contents > dl > dt > p {
    margin-bottom: 16px;
}

/* きらぼし倶楽部専用窓口のテキストスタイル */
dd.phone > p {
    font-size: 14px;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 1.68px;
}

/* 電話番号のスタイル */
p.number > a {
}
dd.phone p.number {
    text-align: center;
    font-family: "Noto Serif JP";
    font-size: 36px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 4.32px;
    align-self: stretch;
}

/* 受付時間のスタイル */
dd.phone > p:last-of-type {
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 200;
    line-height: normal;
    letter-spacing: 1.68px;
    align-self: stretch;
}

/* フォームからのお問い合わせのタイトル部分 */
dt p {
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 1.92px;
}

/* お問い合わせリンクのスタイル */
dd > a.btn01 {
    display: flex;
    width: 200px;
    padding: 8px 24px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 20px;
    background: #fff6da;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 170%; /* 23.8px */
    letter-spacing: 0.56px;
    transition: 0.3s; /* ホバー時の滑らかな色変化 */
    border: 0.5px solid #8b8b8bcf;
}

/* リンクにホバーしたときのスタイル */
dd a.btn01:hover {
    background: #fffcf5;
    opacity: 1;
}
p.number a {
    cursor: inherit;
}

/* ボタンのアニメーション */
.btn01 {
    position: relative;
    overflow: hidden;
    transition: ease 0.2s;
}
.btn01 span {
    position: relative;
    z-index: 3; /*z-indexの数値をあげて文字を背景よりも手前に表示*/
    color: #333;
}
.btn01:hover span {
    color: #fff;
}
/*== 背景が流れる（斜め） */
.bgskew::before {
    content: "";
    /*絶対配置で位置を指定*/
    position: absolute;
    top: 0;
    left: -130%;
    /*色や形状*/
    background: #231815;
    width: 120%;
    height: 100%;
    transform: skewX(-25deg);
    transition: background-color 0.2s ease;
}
/*hoverした時のアニメーション*/
.bgskew:hover::before {
    animation: skewanime 0.5s forwards; /*アニメーションの名前と速度を定義*/
}

@keyframes skewanime {
    100% {
        left: -10%; /*画面の見えていない左から右へ移動する終了地点*/
    }
}

/* --------------------------------------
    footer banner
-------------------------------------- */
.footer--banner {
    margin: 0 auto;
    background-color: #fffbf4;
}

/* --------------------------------------
    footer
-------------------------------------- */
footer > .box {
    padding: 20px 40px;
}
.logo {
    padding: 32px 10px;
    text-align: center;
}
.logo img {
    height: 54px;
}
div.footer--contents ul {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 40px;
    flex: 1 0 0;
}
.icon_link img {
    /* position: relative; */
    margin-left: 8px;
}

/* div.footer--contents li h3 {
    margin-bottom: 8px;
} */
footer {
    background-image: url(../img/footer--bk.png);
    padding: 8px 0 64px 0;
}

/* --------------------------------------

    960px 以下の表示

-------------------------------------- */

@media screen and (width <= 960px) {
    .box {
        max-width: inherit;
        width: 90%;
    }
    .box2 {
        max-width: inherit;
        width: 90%;
    }
    br.tablet {
        display: block;
    }
    .leadTxt {
        margin-bottom: 88px;
    }
    .mainCopy h1 {
        font-size: 48px;
        letter-spacing: 6px;
        line-height: 32px;
    }
    .top-deco01,
    .top-deco02 {
        max-width: 18rem;
    }
    .merit_dtl {
        flex-wrap: wrap;
    }
    .merit_dtl li {
        width: 300px;
    }
    .service {
        padding: 40px 0 0 0;
    }
    ul.service--contents--li01 li {
        align-items: center;
        flex-direction: column;
    }
    .summary--title {
        display: block;
    }
    .summary--title h4.tit01 {
        margin-bottom: 16px;
    }
    ul.service--contents--li01 li div.summary--text {
        margin-bottom: 32px;
        max-width: 80%;
    }
    ul.service--contents--li01 li {
        flex-direction: column-reverse;
    }
    ul.service--contents--li01 li:nth-child(2n) {
        flex-direction: column-reverse;
    }
    .summary--title {
        margin-bottom: 32px;
    }

    p.service--image {
        text-align: left;
        width: 80%;
        margin-bottom: 48px;
    }

    /* 業務効率化 */
    .service--contents--li02 {
        display: block;
    }
    .service--contents--li02 li {
        width: 100%;
        margin-bottom: 72px;
    }
    h4.tit02 {
        margin-bottom: 24px;
    }
    .service--middle {
        margin-bottom: 56px;
    }
    ul.service--contents--li03 li {
        height: 16rem;
        padding: 0;
        font-size: 20px;
    }

    ul.othercontents--li01 > li {
        max-width: 40%;
        margin-bottom: 56px;
    }
    ul.othercontents--li02 {
        display: block;
    }
    ul.othercontents--li02 > li {
        width: 80%;
        margin: 32px auto 60px;
    }
    dd.phone p.number {
        font-size: 30px;
    }
    .contact > .box > .service--contents {
        gap: 64px;
    }
}

/* --------------------------------------

    768px 以下の表示
    
-------------------------------------- */
@media screen and (width <= 768px) {
    body {
        font-size: 15px;
    }
    .box {
        margin: 72px auto 72px;
        width: 100%;
    }
    .box2 {
        width: 96%;
    }
    br.tablet {
        display: none;
    }
    br.sp {
        display: block;
    }
    .br--sp--none {
        display: none;
    }
    h3.tit01 {
        margin-bottom: 32px;
    }
    a:hover {
        opacity: 1;
    }
    .top-deco01,
    .top-deco02 {
        max-width: 12rem;
    }
    .mainCopy {
        width: 90%;
    }
    .mainCopy h1 {
        font-size: 36px;
        letter-spacing: 4px;
    }
    .mainCopy p {
        font-size: 16px;
        line-height: 30px;
    }
    .mainview--image {
        height: 560px;
    }
    #contactBtn {
        bottom: 0;
        right: inherit;
        width: 100%;
    }
    #contactBtn a {
        flex-direction: row;
        border-radius: inherit;
        width: 100%;
        font-size: 13px;
        background: rgba(255, 255, 255, 0.8);
        height: 48px;
    }
    #contactBtn img {
        margin: auto 12px;
        width: 30px;
    }

    .leadTxt {
        font-size: 16px;
        line-height: 200%;
        letter-spacing: 2px;
    }

    .merit_dtl li h3 {
        text-align: left;
        padding-bottom: 12px;
    }

    .merit_dtl li {
        width: 88%;
    }
    .service--middle > h3.tit01 {
        margin-bottom: 72px;
    }
    .service--image img {
        aspect-ratio: auto;
        height: inherit;
    }
    ul.service--contents--li01 li div.summary--text {
        width: 100%;
        max-width: inherit;
    }
    p.service--image {
        margin-bottom: 12px;
        width: 100%;
    }
    .service .sectionLead {
        text-align: left;
        line-height: 32px;
        margin-bottom: 64px;
    }
    .summary--title h4.tit01 span {
        margin-top: 2px;
    }
    ul.service--contents--li01 li {
        margin-bottom: 100px;
    }
    .service--contents--li02 {
        padding: 0 0 12px;
    }
    .service--contents--li02 li {
        padding: 0;
    }
    .service--contents--li02 li:last-child {
        margin-bottom: 48px;
    }
    ul.service--contents--li03 {
        padding: 0;
    }
    ul.service--contents--li03 li {
        height: 12rem;
        font-size: 18px;
    }
    ul.othercontents--li01 {
        display: block;
    }
    ul.othercontents--li01 > li {
        max-width: 100%;
    }
    ul.othercontents--li01 {
        padding: 16px 16px 8px;
    }
    ul.othercontents--li02 > li {
        width: 94%;
    }
    section.otherContents > div.box {
        margin-bottom: 0;
    }
    .membership--li > li > h3 {
        width: 100%;
        margin-bottom: 8px;
    }
    .membership--li > li > p {
        text-align: left;
    }
    .membership--li > li {
        align-items: flex-start;
    }
    .attention {
        padding: 8px 16px;
    }
    .contact > .box > .service--contents {
        flex-direction: column;
        gap: 4px;
        align-items: center;
    }
    .contact > .box > .service--contents > dl {
        margin-bottom: 64px;
    }
    .contact > .box > .service--contents > dl:last-child {
        margin-bottom: 0;
    }
    .logo img {
        height: 100%;
        width: 80%;
    }
    .logo {
        padding: 0;
        width: 90%;
        margin: 0 auto;
    }
    div.footer--contents ul {
        flex-direction: column;
        gap: 32px;
    }
    footer > .box {
        margin: 16px auto 48px;
        padding: 20px 12px;
    }
}