/* 背景が黒系 */
.darkTheme {
    color: var(--white);
    /* background-color: var(--background-color-black); */
}

/* 配慮・気配り */
/* 強調したいが、柔らかく伝えたい場合 */
.attention {
    color: var(--black);
    font-weight: bold;
}

.attention-secondaryBlandColor-underline {
    color: var(--secondary-bland-color);
    /* text-decoration: underline; */
    border-bottom: 1px solid var(--secondary-bland-color);
}

.attention-secondaryBlandColor-bold {
    color: var(--secondary-bland-color);
    font-weight: bold;
}

/* 用心・警告 */
/* とにかく強調したい場合 */
.warning {
    color: var(--red);
    font-weight: bold;
}

/* アンダーライン */
.underline-yellow {
    display: inline-block;
    position: relative;
    z-index: 1;
}

.underline-yellow::after {
    content: "";
    display: inline-block;
    position: absolute;
    /* top: 1.2em; */
    bottom: -2px;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 43.5%;
    background-color: var(--underline-yellow);
}

/* トップレベルのsectionもしくは同レイヤーのdiv */
/* 上記のsectionとdivを総称して content とする */

.content--subTitleBox,
.content--titleBox {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.content--title {
    /* flex: 1 0 100%; */
    /* white-space: nowrap; */
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
    font-size: 3.8rem;
    /* text-align: left; */
    position: relative;
}

.content--title-small {
    font-size: 2.8rem;
}

.content--title-Xsmall {
    font-size: 2.52rem;
}

.content--title-leftBorder {
    font-size: 2.4rem;
    line-height: 1.5;
    color: var(--font-color-black);
    border-left: 3px solid var(--font-color-black);
    padding-left: 8px;
}

.content--title-en {
    color: var(--secondary-bland-color);
    font-weight: bold;
    margin-top: 16px;
    text-align: center;
}

.content--subTitle {
    font-size: 3.8rem;
    color: var(--font-color-black);
}

.content--titleBorder {
    width: 100%;
    height: 1px;
    background-color: var(--separate-color-grey);
    margin-left: 24px;
}

.content--titleBorder-left {
    width: 100%;
    height: 1px;
    background-color: var(--separate-color-grey);
    margin-right: 120px;
}

.content--titleBorder-right {
    width: 100%;
    height: 1px;
    background-color: var(--separate-color-grey);
    margin-left: 120px;
}

.content--titleBorder-vertical {
    height: 72px;
    width: 2px;
    background-color: var(--background-color-black);
    margin: 40px auto;
}

.content--titleBtn {
    width: 100%;
    max-width: 240px;
    font-weight: bold;
    text-align: center;
    border: 2px solid var(--border-color-black);
    padding: 8px 0;
    margin-left: 24px;
}

.content--img {
    width: 100%;
}

.darkTheme .content--titleBtn {
    color: var(--white);
    font-weight: 400;
    border: 2px solid var(--white);
}

.content--textBox {
    margin-top: 8px;
}

.content--text {
    color: var(--font-color-black);
}

.content--text-small {
    color: var(--font-color-black);
    text-align: left;
}

.darkTheme .content--text-small,
.darkTheme .content--text {
    color: var(--white);
}

@media screen and (max-width: 1024px) {
    /* 1024pxまでの幅の場合に適応される */
    .content--title {
        font-size: 3.2rem;
    }

    .content--text {
        font-size: 1.4rem;
    }
}

@media screen and (max-width: 599px) {
    /* 599pxまでの幅の場合に適応される */
    .content--subTitleBox,
    .content--titleBox {
        display: grid;
        justify-content: center;
    }

    .content--title,
    .content--title-small,
    .content--title-Xsmall {
        font-size: 2.5rem;
        text-align: center;
    }

    .content--title-leftBorder {
        font-size: 2rem;
    }

    .content--title-en {
        font-size: 1.2rem;
        margin-top: 8px;
    }
    
    .content--titleBorder {
        display: none;
    }

    .content--titleBorder-left,
    .content--titleBorder-right {
        display: none;
    }

    .content--titleBorder-vertical {
        height: 40px;
        margin-top: 24px;
        margin-bottom: 24px;
    }

    .content--titleBtn {
        display: none;
    }

    .content--textBox {
        margin-top: 24px;
    }

    .content--text {
        font-size: 1.3rem;
    }

}

.localLargeFont {
    font-size: 1.5em;
}

.localSmallFont {
    font-size: 0.7em;
}

.localXSmallFont {
    font-size: 0.5em;
}

.localWhiteFont {
    color: var(--white);
}

.row-afterTitle {
    margin-top: 200px;
}

.row-afterNotTitle {
    margin-top: 200px;
}

/* ヒーロー */
.hero-lowerPage {
    width: 100%;
    height: 198px;
    /* padding: 0 5%; */
    /* position: relative; */
}

.hero-lowerPage--inner {
    /* position: absolute;
    top: 50%;
    transform: translateY(-50%); */
    display: flex;
    width: 100%;
    height: 100%;
}

.hero-lowerPage--leftBox {
    background-image: url(/img/hero-lowerpage-bg01.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 20% center;
    flex: 0 1 33%;
}

.hero-lowerPage--centerBox {
    background-image: url(/img/hero-lowerpage-bg02.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    flex: 1 0 auto;
    display: grid;
    place-items: center;
    position: relative;
    z-index: 0;
}

.hero-lowerPage--centerBox::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--background-color-transparentwhite-deep);
    z-index: -1;
}

.hero-lowerPage--rightBox {
    background-image: url(/img/hero-lowerpage-bg03.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    flex: 0 1 33%;
}

.hero-lowerPage--logo {
    max-width: 200px;
}

@media screen and (max-width: 1024px) {
    /* 1024pxまでの幅の場合に適応される */

    .hero-lowerPage {
        margin-top: var(--height-header-mobile);
    }
    
    .hero-lowerPage--leftBox {
        background-position: 20% center;
        flex: 0 1 20%;
    }

    .hero-lowerPage--centerBox {
        background-position: center center;
        flex: 1 0 60%;
    }

    .hero-lowerPage--rightBox {
        background-position: center center;
        flex: 0 1 20%;
    }
}

@media screen and (max-width: 599px) {
    /* 599pxまでの幅の場合に適応される */
    .hero-lowerPage {
        display: none;
    }
}

/* topMessage */
.topMessage {
    width: 100%;
    background-color: var(--background-color-lightgrey);
    padding: 90px 0 150px;
    position: relative;
    text-align: center;
}

.topMessage .titleBox {
    margin-top: 64px;
}

.topMessage .tilte-ja {
    font-size: 5.2rem;
    font-weight: bold;
    margin-top: -40px;
}

.topMessage .title-en {
    font-size: 10rem;
    font-weight: bold;
    color: var(--font-color-transparentgrey);
    letter-spacing: -2px;
    line-height: 1;
}

.topMessage .text {
    margin-top: 64px;
    font-size: 2.2rem;
    font-weight: bold;
    line-height: 2.2;
}

@media screen and (max-width: 1024px) {
    /* 1024pxまでの幅の場合に適応される */

    .topMessage {
        padding-left: 64px;
        padding-right: 64px;
    }

    .topMessage .titleBox {
        margin-top: 40px;
    }
    
    .topMessage .tilte-ja {
        font-size: 3.4rem;
        line-height: 1.3;
        margin-top: -32px;
    }

    .topMessage .title-en {
        font-size: 7.2rem;
    }

    .topMessage .text {
        margin-top: 32px;
        font-size: 2.2rem;
        line-height: 1.5;
    }
}

@media screen and (max-width: 599px) {
    /* 599pxまでの幅の場合に適応される */
    .topMessage {
        padding: 40px 5% 0;
    }

    .topMessage .tilte-ja {
        font-size: 2.4rem;
        line-height: 1.3;
        margin-top: -64px;
    }

    .topMessage .title-en {
        font-size: 4.2rem;
    }

    .topMessage .text {
        margin-top: 32px;
        font-size: 1.6rem;
        line-height: 1.5;
    }
}

.pageTitle {
    width: 100%;
    padding: 144px 5%;
    position: relative;
    background-color: var(--white);
    background-image: url(/img/pageTitle_bg.jpg);
    background-size: contain;
    background-position: right bottom;
    background-repeat: no-repeat;
}

.pageTitle--inner {
    width: 100%;
    padding-left: 5%;
}

.pageTitle--titleBox {
    display: flex;
    justify-content: flex-start;
    align-items: baseline;
}

.pageTitle--title-jp {
    font-size: 4rem;
}

.pageTitle--title-en {
    font-size: 3rem;
    font-weight: bold;
    color: var(--primary-bland-color);
    position: relative;
    margin-left: 40px;
}

.pageTitle--title-en::before {
    content: "";
    position: absolute;
    margin-right: 12px;
    width: 6px;
    height: 0.9em;
    top: 50%;
    transform: translateY(-50%);
    left: -18px;
    background-color: var(--background-color-lightgrey);
}

.pageTitle--subTitleBox {
    margin-bottom: 40px;
}

.pageTitle--subTitle {
    display: inline-block;
    position: relative;
    font-weight: bold;
    padding-right: 8px;
}

.pageTitle--subTitle::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 24px;
    height: 16px;
    transform: translate(100%, -50%);
    background-image: url(../img/pageTitle_icon_car.png);
    background-size: contain;
    background-repeat: no-repeat;
}

.pageTitle--text {
    font-weight: bold;
}

@media screen and (max-width: 1024px) {
    /* 1024pxまでの幅の場合に適応される */

    .pageTitle {
        background-position: right -30vw bottom;
        background-size: cover;
    }

    .pageTitle--inner {
        padding-left: 0;
    }
    
    .pageTitle--titleBox {
        flex-direction: column;
        align-items: flex-start;
    }

    .pageTitle--title-ja {
        /* margin-left: -38px; */
    }

    .pageTitle--title-en {
        margin-left: 24px;
    }

}

@media screen and (max-width: 599px) {
    /* 599pxまでの幅の場合に適応される */
    .pageTitle {
        margin-top: var(--height-header-mobile);
        padding-top: 56px;
        padding-bottom: 64px;
        background-image: url(/img/pageTitle_bg_sp.jpg);
        background-size: contain;
        background-position: right bottom;
    }

    .pageTitle--subTitleBox {
        margin-bottom: 0;
    }

    .pageTitle--title-jp {
        font-size: 2.8rem;
    }

    .pageTitle--title-en {
        font-size: 2rem;
        margin-top: 4px;
        vertical-align: baseline;
    }

    .pageTitle--title-en::before {
        height: 1em;
    }
}

/* インナー */
.content--inner-medium {
    width: 100%;
    height: auto;
    max-width: var(--inner-medium);
}

.content--inner-small {
    width: 100%;
    height: auto;
    max-width: var(--inner-small);
}


/* 背景 */

.imgSeparator {
    position: relative;
    overflow: hidden;
    height: 360px;
    /* margin-top: 60px; */
}

.imgSeparator::before {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -2;
    content: "";
    width: 100%;
    height: 100%;
    background-image: url(/img/bg-imgSpacer.jpg);
    background-position: left top;
    background-repeat: no-repeat;
    background-size: cover;
}

@media screen and (max-width: 1024px) {
    /* 1024pxまでの幅の場合に適応される */
    .imgSeparator {
        height: 400px;
    }

    .imgSeparator::before {
        background-position: 60% bottom;
    }
}

@media screen and (max-width: 599px) {
    /* 599pxまでの幅の場合に適応される */
    .imgSeparator {
        height: 240px;
        margin-top: 0;
    }

    .imgSeparator::before {
        background-image: url(/img/bg-imgSpacer-sp.jpg);
        /* background-size: contain; */
    }
}

/* GoogleMap */
.googleMap {
    line-height: 0;
}

/* Instagram */
/* 細かいレイアウト設定は各ページのCSSにて設定 */

.instagram--imgBox {
    width: 100%;
    max-width: 170px;
    position: relative;
}

.instagram--imgBox.movie::after {
    position: absolute;
    content: "";
    width: 27px;
    height: 30px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-image: url(../img/rounded-triangle-right-white.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.instagram--imgBox.picture::after {
    position: absolute;
    content: "";
    width: 32px;
    height: 32px;
    top: 8px;
    right: 8px;
    background-image: url(../img/icon_picture.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.instagram--img {
    width: 100%;
}


/* メディア */

.media {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.media-rowReverse {
    flex-direction: row-reverse;
}

@media screen and (max-width: 599px) {
    /* 599pxまでの幅の場合に適応される */
    .media {
    }
}

/* その他プロパティと、次の要素は個々に設定 */
/* .media--imgBox
     .media--imgTitle
     .media--img
   .media--body
     .media--title
     .media--text

/* フレックス */
.flex-col2 {
    display: flex;
    justify-content: center;
}

/* グリッド */
.grid-col2,
.grid-col3,
.grid-col4 {
    width: 100%;
    display: grid;
    gap: 24px;
    width: 100%;
    /* 列数などの各々のセレクター固有の設定は別に設定 */
}

.grid-col5,
.grid-col6 {
    display: grid;
    gap: 16px;
    width: 100%;
}

.grid-col2 {
    grid-template-columns: repeat(2, 1fr);
}

.grid-col3 {
    grid-template-columns: repeat(3, 1fr);
}

.grid-col4 {
    grid-template-columns: repeat(4, 1fr);
}

.grid-col5 {
    grid-template-columns: repeat(5, 1fr);
}

.grid-col6 {
    grid-template-columns: repeat(6, 1fr);
}

@media screen and (max-width: 599px) {
    
    .grid-col2,
    .grid-col3,
    .grid-col4,
    .grid-col5,
    .grid-col6 {
        /* display: block; */
        grid-template-columns: repeat(1, 1fr);
    }

}

/* アコーディオン */

.accordion {
    width: 100%;
    max-width: var(--inner-medium);
}

.accordion .accordion--titleBox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background-color: var(--background-color-dimgrey);
    position: relative;
}

.accordion .accordion--titleBox::after {
    position: absolute;
    content: "";
    transition: transform .3s;
    transform: rotate(180deg);
    right: 24px;
    width: 12px;
    height: 12px;
    background-image: url(../img/rounded-triangle-top-white.png);
    background-position: right center;
    background-repeat: no-repeat;
    background-size: contain;
}

.accordion[open] .accordion--titleBox::after {
    transform: rotate(0deg);
}

.accordion .accordion--titleBox::marker {
    display: none;
}

.accordion .accordion--titleBox::-webkit-details-marker {
    display: none;
}

.accordion .accordion--title {
    color: var(--white);
    font-size: 1.6rem;
    font-weight: bold;
    line-height: 1.5;
    position: relative;
}

.accordion .accordion--subTitleBox {
    display: flex;
    align-items: center;
    margin-top: 32px;
    margin-bottom: 16px;
    column-gap: 24px;
}

.accordion .accordion--subTitle {
    color: var(--font-color-black);
    font-size: 1.6rem;
    padding-left: 16px;
    border-left: 2px solid var(--border-color-black);
    /* margin-bottom: 16px; */
}

.accordion .accordion--body {
    margin-top: 24px;
}

.accordion[open] .accordion--body {
    animation: accordion 0.3s linear;
}

.price .content--titleBox {
    max-width: var(--inner-medium);
}

.price .content--textBox {
    max-width: var(--inner-medium);
}

.price .accordion--textBox {
    margin-top: 8px;
}

.price .accordion--text {
    line-height: 1.6;
}

.price .accordion--link {
    line-height: 1.6;
    color: var(--secondary-bland-color);
    font-weight: bold;
    position: relative;
}

.price .accordion--link::after {
    position: absolute;
    content: "";
    background-image: url(/img/icon_line-triangle-bottom.png);
    background-size: contain;
    background-repeat: no-repeat;
    top: 50%;
    right: 0;
    width: 10px;
    height: 10px;
    transform: translate(150%, -50%);
}

@keyframes accordion {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 0;
        height: 200px;
    }
    100% {
        opacity: 1;
    }
}

@media screen and (max-width: 599px) {
    /* 599pxまでの幅の場合に適応される */
    
    .price .accordion--text {
        font-size: 1.4rem;
    }

}

.centerBorderAccordion {
    width: 100%;
    max-width: var(--inner-medium);
    margin-bottom: 7px;
}

.centerBorderAccordion .centerBorderAccordion--titleBox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    cursor: pointer;
}

.centerBorderAccordion .centerBorderAccordion--titleBox::-webkit-details-marker {
    display: none;
}

.centerBorderAccordion .centerBorderAccordion--title {
    /* display: flex; */
    /* justify-content: space-between; */
    /* align-items: center; */
    /* position: relative; */
    /* padding: 1em 0; */
    color: #333333;
    font-weight: 600;
    font-size: 1.6rem;
    white-space: nowrap;
}

.centerBorderAccordion--titleBorder {
    width: 100%;
    height: 1px;
    background-color: var(--separate-color-grey);
    margin-left: 8px;
    margin-right: 20px;
}

.centerBorderAccordion .centerBorderAccordion--titleBox::after {
    position: absolute;
    content: '';
    background-image: url(../img/rounded-triangle-top-black.png);
    background-size: contain;
    right: 0;
    width: 12px;
    height: 10px;
    margin-left: 10px;
    transition: transform .3s;
    transform: rotate(180deg);
}

.centerBorderAccordion[open] .centerBorderAccordion--titleBox::after {
    transform: rotate(0deg);
}

.centerBorderAccordion .centerBorderAccordion--menu {
    position: relative;
    padding-top: 32px;
    transform: translateY(-10px);
    opacity: 0;
    transition: transform .5s, opacity .5s;
    display: grid;
    gap: 16px;
}

.centerBorderAccordion[open] .centerBorderAccordion--menu {
    transform: none;
    opacity: 1;
}

.centerBorderAccordion .centerBorderAccordion--menuRow {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    /* padding-top: 8px; */
    transform: translateY(-10px);
    opacity: 0;
    color: #333333;
    transition: transform .5s, opacity .5s;
    gap: 24px;
}

.centerBorderAccordion[open] .centerBorderAccordion--menuRow {
    transform: none;
    opacity: 1;
}

@media screen and (max-width: 599px) {
    /* 599pxまでの幅の場合に適応される */
    
    .centerBorderAccordion .centerBorderAccordion--menuRow {
        flex-direction: column;
    }

    .centerBorderAccordion .centerBorderAccordion--menuRow {
        gap: 8px;
    }
    
}

.triangleAccordionBox {
    width: 100%;
    max-width: var(--inner-medium);
    margin-top: 64px;
    border-top: 1px solid var(--separate-color-grey);
    border-bottom: 1px solid var(--separate-color-grey);
    padding: 16px 0 24px;
    overflow-x: auto;
}

.triangleAccordion {
    width: 100%;
    margin-bottom: 7px;
    /* overflow-xの設定はsectionの直下の要素に設定しないといけない */
    /* 以上の理由からtriangleAccordionBoxに設定 */
    /* overflow-x: auto; */
}

.triangleAccordion .triangleAccordion--titleBox {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    cursor: pointer;
}

.triangleAccordion .triangleAccordion--titleBox::-webkit-details-marker {
    display: none;
}

.triangleAccordion .triangleAccordion--title {
    /* display: flex; */
    /* justify-content: space-between; */
    /* align-items: center; */
    /* position: relative; */
    /* padding: 1em 0; */
    color: #333333;
    font-weight: 600;
    font-size: 1.6rem;
    white-space: nowrap;
    position: relative;
}

/* .triangleAccordion--titleBorder {
    width: 100%;
    height: 1px;
    background-color: var(--separate-color-grey);
    margin-left: 8px;
    margin-right: 20px;
} */

.triangleAccordion .triangleAccordion--title::after {
    position: absolute;
    content: '';
    background-image: url(../img/rounded-triangle-top-lightblue.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    top: 50%;
    right: 0;
    width: 12px;
    height: 10px;
    margin-left: 10px;
    /* transition: transform .3s; */
    transform: rotate(180deg) translate(-200%, 50%);
}

.triangleAccordion[open] .triangleAccordion--title::after {
    transform: rotate(0deg) translate(200%, -50%);
}

.triangleAccordion .triangleAccordion--subTitleBox {
    display: flex;
    align-items: center;
    margin-top: 32px;
    margin-bottom: 16px;
    column-gap: 24px;
}

.triangleAccordion .triangleAccordion--subTitle {
    color: var(--font-color-black);
    font-size: 1.6rem;
    padding-left: 16px;
    border-left: 2px solid var(--border-color-black);
    /* margin-bottom: 16px; */
}

.triangleAccordion .triangleAccordion--link {
    line-height: 1.6;
    color: var(--secondary-bland-color);
    font-weight: bold;
    position: relative;
}

.triangleAccordion .triangleAccordion--link::after {
    position: absolute;
    content: "";
    background-image: url(/img/icon_line-triangle-bottom.png);
    background-size: contain;
    background-repeat: no-repeat;
    top: 50%;
    right: 0;
    width: 10px;
    height: 10px;
    transform: translate(150%, -50%);
}

.triangleAccordion .triangleAccordion--menu {
    position: relative;
    padding-top: 32px;
    transform: translateY(-10px);
    opacity: 0;
    transition: transform .5s, opacity .5s;
}

.triangleAccordion[open] .triangleAccordion--menu {
    transform: none;
    opacity: 1;
}

.triangleAccordion .triangleAccordion--menuRow {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding-top: 8px;
    transform: translateY(-10px);
    opacity: 0;
    color: #333333;
    transition: transform .5s, opacity .5s;
    gap: 16px;
}

.triangleAccordion[open] .triangleAccordion--menuRow {
    transform: none;
    opacity: 1;
}

.triangleAccordion .triangleAccordion--textBox {
    margin-top: 8px;
}

.triangleAccordion .triangleAccordion--text {
    line-height: 1.6;
}

@media screen and (max-width: 599px) {
    /* 599pxまでの幅の場合に適応される */
    
    .triangleAccordion .triangleAccordion--menuRow {
        flex-direction: column;
    }

    .triangleAccordion .triangleAccordion--menuRow {
        gap: 8px;
    }
    
}

/* レコードリスト */
.recordList {}

.recordList--dateBox {}

.recordList--titleBox {}

.recordList--textBox {}

.recordList--text {}

/* .recordList {
    width: 100%;
    padding: 32px 0;
    position: relative;
    border-bottom: 1px solid var(--background-color-grey);
}

.recordList::after {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 10px;
    width: 10px;
    height: 12px;
    background-image: url(../img/rounded-triangle-right-secondary-bland-color.png);
    background-position: right center;
    background-repeat: no-repeat;
    background-size: contain;
    content: "";
}

.recordList--date {
    color: var(--secondary-bland-color);
    font-size: 1.3rem;
    font-weight: bold;
    line-height: 1.6;
}

.recordList--title {
    color: var(--font-color-black);
    font-size: 1.3rem;
    line-height: 1.6;
} */

/* リスト */

.list {}

.listItem {}

/* テーブル */

/* .sideScroll {
    min-width: 1000px;
    overflow-x: scroll;
}

.horizontalTable,
.crossTable {
    white-space: nowrap;
} */

.horizontalTable {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 1.4rem;
}

.horizontalTable--body {
    display: table-row-group;
    vertical-align: middle;
    border-color: inherit;
}

.horizontalTable--bodyRow {
    display: table-row;
    vertical-align: inherit;
    border-color: inherit;
    /* line-height: 1.6; */
}

.horizontalTable--header {
    width: 33%;
    min-width: 240px;
    color: var(--font-color-black);
    text-align: left;
    font-size: 1.6rem;
    font-weight: bold;
    background-color: var(--background-color-grey);
    padding: 16px 18px;
    border-bottom: 1px solid var(--table-border-color-lightgrey);
}

.horizontalTable--text {
    width: auto;
    color: var(--font-color-black);
    text-align: left;
    font-size: 1.6rem;
    font-weight: bold;
    background-color: var(--white);
    padding: 16px 18px;
    border-bottom: 1px solid var(--table-border-color-lightgrey);
}

@media screen and (max-width: 599px) {
    /* 599pxまでの幅の場合に適応される */

    .horizontalTable--body {
    }

    .horizontalTable--bodyRow {
        margin-top: 8px;
    }

    .horizontalTable--header {
        width: 50%;
        min-width: 0;
        padding: 1em;
        font-size: 1.2rem;
    }
    
    .horizontalTable--text {
        width: 50%;
        padding: 1em;
        font-size: 1.4rem;
    }

    .horizontalTable--body.spVertical {
        display: block;
    }

    .horizontalTable--bodyRow.spVertical {
        display: block;
    }

    .horizontalTable--header.spVertical {
        display: block;
    }
    
    .horizontalTable--text.spVertical {
        display: block;
        background-color: transparent;
    }
}



.darkTheme .horizontalTable {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 1.4rem;
}

.darkTheme .horizontalTable--body {
    display: table-row-group;
    vertical-align: middle;
    border-color: inherit;
}

.darkTheme .horizontalTable--bodyRow {
    display: table-row;
    vertical-align: inherit;
    border-color: inherit;
}

.darkTheme .horizontalTable--header {
    width: 25%;
    min-width: 240px;
    color: var(--font-color-black);
    text-align: left;
    font-size: 2.1rem;
    font-weight: bold;
    background-color: var(--white);
    padding: 15px 18px;
    border-top: 1px dotted var(--black);
    border-bottom: 0;
}

.darkTheme .horizontalTable--bodyRow:last-of-type .horizontalTable--header {
    border-bottom: 1px dotted var(--black);
}

.darkTheme .horizontalTable--text {
    width: auto;
    color: var(--white);
    text-align: left;
    font-size: 2.1rem;
    font-weight: bold;
    background-color: transparent;
    padding: 15px 18px;
    border-top: 1px dotted var(--white);
    border-bottom: 0;
    line-height: 1.6;
    letter-spacing: 2px;
}

.darkTheme .horizontalTable--bodyRow:last-of-type .horizontalTable--text {
    border-bottom: 1px dotted var(--white);
}

@media screen and (max-width: 599px) {
    /* 599pxまでの幅の場合に適応される */

    .darkTheme .horizontalTable--body {
        display: block;
    }

    .darkTheme .horizontalTable--bodyRow {
        display: block;
        padding-bottom: 15px;
    }

    .darkTheme .horizontalTable--header {
        display: block;
        width: 100%;
        padding-left: 20px;
        font-size: 1.2rem;
        border: 0;
    }

    .darkTheme .horizontalTable--header:last-of-type {
        border-bottom: 0;
    }
    
    .darkTheme .horizontalTable--text {
        display: block;
        width: 100%;
        padding-left: 20px;
        font-size: 1.4rem;
        background-color: transparent;
        border-bottom: 1px dotted var(--white);
    }
}

.crossTable {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 1.4rem;
}

.crossTable--body {
    display: table-row-group;
    vertical-align: middle;
    border-color: inherit;
}

.crossTable--bodyRow {
    display: table-row;
    vertical-align: inherit;
    border-color: inherit;
    /* line-height: 1.6; */
}

.crossTable--header {
    /* width: 33%;
    min-width: 240px; */
    width: calc((var(--inner-medium) - 196px) / 6);
    color: var(--font-color-black);
    text-align: left;
    font-size: 1.5rem;
    font-weight: bold;
    background-color: var(--background-color-grey);
    padding: 16px 18px;
    vertical-align: middle;
    border-bottom: 1px solid var(--table-border-color-lightgrey);
    border-right: 1px solid var(--table-border-color-lightgrey);
}

.crossTable--text {
    width: auto;
    color: var(--font-color-black);
    text-align: left;
    font-size: 1.5rem;
    line-height: 1.5;
    font-weight: bold;
    background-color: var(--white);
    padding: 15px 18px;
    vertical-align: middle;
    border-bottom: 1px solid var(--table-border-color-lightgrey);
    border-right: 1px solid var(--table-border-color-lightgrey);
}

@media screen and (max-width: 599px) {
    /* 599pxまでの幅の場合に適応される */

    .crossTable--bodyRow {
        margin-top: 8px;
    }

    .crossTable--header {
        width: 100%;
        padding: 1em;
        font-size: 1.2rem;
    }
    
    .crossTable--text {
        width: 100%;
        padding: 1em;
        font-size: 1.4rem;
    }
}

/* ボタン */

.btn {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    padding: 16px;
    background-color: var(--black);
    color: var(--white);
    text-align: center;
    font-weight: bold;
    font-size: 2.2rem;
}

.darkTheme .btn {
    background-color: var(--white);
    color: var(--font-color-black);
}

.borderTransparentBtn {
    width: 240px;
    background-color: var(--background-color-transparentwhite-light);
    border: 1px solid var(--white);
    color: var(--white);
    text-align: center;
    font-size: 1.4rem;
    font-weight: bold;
    margin: 0 auto;
    padding: 8px;
}

.borderBtn {
    width: 100%;
    /* background-color: var(--background-color-transparentwhite); */
    border: 2px solid var(--white);
    color: var(--white);
    text-align: center;
    font-size: 1.4rem;
    font-weight: bold;
    margin: 0 auto;
    padding: 8px;
}

.arrowBtn {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    padding: 13px 0;
    font-size: 1.98rem;
    font-weight: bold;
    color: var(--white);
    text-align: center;
    background: var(--black);
    position: relative;
    line-height: 1.6;
}

.arrowBtn:hover {
    opacity: 0.7;
}

.darkTheme .arrowBtn {
    background-color: var(--white);
    color: var(--font-color-black);
}

.arrowBtn::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    width: 25px;
    height: 18px;
    background-image: url(../img/icon_arw3_white.png);
    background-size: contain;
    background-repeat: no-repeat;
}

.darkTheme .arrowBtn::after {
    background-image: url(../img/icon_arw3_black.png);
}

.arrowBorderBtn {
    display: block;
    width: 100%;
    /* max-width: 296px; */
    height: auto;
    padding: 13px 0;
    font-size: 1.8rem;
    font-weight: bold;
    color: var(--font-color-darkgrey);
    text-align: center;
    background: transparent;
    position: relative;
    line-height: 1.6;
    border-top: 1px solid var(--border-color-black);
    border-right: 1px solid var(--border-color-black);
    border-bottom: 1px solid var(--border-color-black);
    border-left: 1px solid var(--border-color-black);
}

.darkTheme .arrowBorderBtn {
    color: var(--white);
    border-top: 1px solid var(--white);
    border-right: 1px solid var(--white);
    border-bottom: 1px solid var(--white);
    border-left: 1px solid var(--white);
}

.arrowBorderBtn::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%) rotate(45deg);
    width: 10px;
    height: 10px;
    border-top: 2px solid var(--border-color-black);
    border-right: 2px solid var(--border-color-black);
    /* background-image: url(../img/rounded-triangle-right-white.png); */
    /* background-size: contain; */
    /* background-repeat: no-repeat; */
}

.darkTheme .arrowBorderBtn::after {
    border-top: 2px solid var(--white);
    border-right: 2px solid var(--white);
}

.arrowUnderbarBtn {
    display: block;
    width: 100%;
    max-width: 400px;
    height: auto;
    padding: 13px 0;
    font-size: 1.8rem;
    font-weight: bold;
    color: var(--font-color-darkgrey);
    text-align: center;
    background: transparent;
    position: relative;
    line-height: 1.6;
    border-bottom: 2px solid var(--border-color-black);
}

.darkTheme .arrowUnderbarBtn {
    color: var(--white);
    border-bottom: 2px solid var(--white);
}

.arrowUnderbarBtn::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%) rotate(45deg);
    width: 10px;
    height: 10px;
    border-top: 2px solid var(--border-color-black);
    border-right: 2px solid var(--border-color-black);
}

.darkTheme .arrowUnderbarBtn::after {
    border-top: 2px solid var(--white);
    border-right: 2px solid var(--white);
}

.arrowBorderBtn-leftBorderBold {
    display: block;
    width: 100%;
    max-width: 296px;
    height: auto;
    padding: 13px 0;
    font-size: 1.98rem;
    font-weight: bold;
    text-align: center;
    background: transparent;
    position: relative;
    line-height: 1.6;
    color: var(--font-color-black);
    border-top: 1px solid var(--border-color-black);
    border-right: 1px solid var(--border-color-black);
    border-bottom: 1px solid var(--border-color-black);
    border-left: 7px solid var(--border-color-black);
}

.darkTheme .arrowBorderBtn-leftBorderBold {
    color: var(--white);
    border-top: 1px solid var(--white);
    border-right: 1px solid var(--white);
    border-bottom: 1px solid var(--white);
    border-left: 7px solid var(--white);
    /* filter: drop-shadow(0 0 2px var(--black)); */
}

.darkTheme .arrowBorderBtn-leftBorderBold::after {
    background-image: url(../img/rounded-triangle-right-white.png);
}

.arrowBorderBtn-leftBorderBold::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    width: 25px;
    height: 18px;
    background-image: url(../img/rounded-triangle-right-black.png);
    background-size: contain;
    background-repeat: no-repeat;
}

@media screen and (max-width: 1024px) {
    /* 1024pxpxまでの幅の場合に適応される */
    
    .btn {
        font-size: 1.8rem;
    }

    .arrowBtn {
        font-size: 1.8rem;
    }

    .arrowBorderBtn {
        font-size: 1.8rem;
    }

    .arrowBorderBtn-leftBorderBold {
        font-size: 1.8rem;
    }

    .arrowUnderbarBtn {
        font-size: 1.5rem;
    }

}

@media screen and (max-width: 599px) {
    /* 599pxまでの幅の場合に適応される */
    .btn {
        font-size: 1.4rem;
    }

    .arrowBtn {
        font-size: 1.6rem;
    }

    .arrowBorderBtn {
        padding: 8px 0;
        font-size: 1.6rem;
    }

    .arrowUnderbarBtn {
        font-size: 1.5rem;
        padding: 8px 0 6px;
    }

    .arrowBorderBtn-leftBorderBold {
        max-width: 100%;
        font-size: 1.6rem;
        padding: 0.5em;
    }
    
}

/* headerInfo */
.headerInfo {
    background-color: var(--background-color-black);
    display: grid;
    place-items: center;
    padding: 4px 0;
}

.headerInfo--inner {
    display: block;
    padding: 0 30px;
}

.headerInfo--title {
    text-align: center;
}

.headerInfo--link {
    color: var(--white);
    font-size: 1.2rem;
}

.headerInfo--text {
    color: var(--white);
    font-size: 1.1rem;
}

@media screen and (max-width: 1024px) {
    .headerInfo {
        display: none;
    }
}

/* price */


.price {
    padding: 64px 5%;
    background-color: var(--background-color-lightgrey);
}

.price .content--textBox {
    width: 100%;
}

.price .content--text {
    text-align: left;
}

.price .accordion {
    margin-top: 56px;
}

@media screen and (max-width: 1024px) {
    /* 1024pxまでの幅の場合に適応される */
    
    .price .accordion {
        overflow-x: auto; /* tableタグのはみ出た要素を隠す */
    }
    .price .tableBox {
        overflow-x: auto; /* tableタグのはみ出た要素を隠す */
        white-space: nowrap; /* テキストの折り返しなし */
    }

}

@media screen and (max-width: 599px) {
    /* 599pxまでの幅の場合に適応される */
    .price .accordion {
        margin-top: 32px;
    }
}
/* price */

.price .coating .media {
    justify-content: start;
    column-gap: 24px;
}

.price .coating .media--imgBox {
    width: 200px;
}

.price .coating .media--img {
    width: 100%;
}

.price .coating .media--body {
    flex: 1 0;
    padding-top: 16px;
}

.price .coating .media--title {
    font-size: 2rem;
}

.price .coating .media--textBox {
    margin-top: 32px;
}

.price .coating .media--text {
    font-size: 2rem;
    font-weight: bold;
}

@media screen and (max-width: 599px) {
    /* 599pxまでの幅の場合に適応される */

    .price .coating .media {
        column-gap: 16px;
    }

    .price .coating .media--imgBox {
        width: 150px;
    }

    .price .coating .media--body {
        padding-top: 8px;
    }
    
    .price .coating .media--title {
        font-size: 1.6rem;
    }

    .price .coating .media--textBox {
        margin-top: 16px;
    }

    .price .coating .media--text {
        font-size: 1.6rem;
        font-weight: bold;
    }
}

/* factory banner */

.factory .banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 7px solid var(--primary-bland-color);
    position: relative;
    width: 100%;
    height: auto;
    line-height: 0;
    padding-right: 64px;
    gap: 32px;
    background-color: var(--background-color-darkgrey);
}

.factory .banner::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    width: 37px;
    height: 27px;
    background-image: url(../img/icon_arw3_white.png);
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 10;
}

.factory .banner--imgBox {
    width: 30%;
    aspect-ratio: 300 / 200;
}

.factory .banner--img {
    width: auto;
    height: 100%;
}

.factory .banner--textBox {
    flex: 1 0;
    /* margin-right: 47pc; */
}

.factory .banner--text-large {
    font-size: 2.4rem;
    font-weight: bold;
    color: var(--white);
}

.factory .banner--text-medium {
    font-size: 1.5rem;
    color: var(--white);
    margin-top: 16px;
}

@media screen and (max-width: 1024px) {
    /* 1024pxまでの幅の場合に適応される */
    
    .factory .banner {
        padding-right: 32px;
        gap: 8px;
    }

    .factory .banner--text-large {
        font-size: 2.1rem;
    }

    .factory .banner--textBox .localLargeFont {
        font-size: 1em;
    }

    .factory .banner--text-medium {
        font-size: 1.2rem;
        margin-top: 0;
    }
}

@media screen and (max-width: 599px) {
    /* 599pxまでの幅の場合に適応される */
    .factory {
        padding-top: 24px;
        padding-bottom: 48px
    }

    .factory .banner {
        flex-direction: column;
        align-items: center;
        padding-right: 0;
        gap: 8px;
    }
    .factory .banner::after {
        width: 24px;
    }

    .factory .banner--imgBox {
        width: 70%;
        aspect-ratio: 3/1;
    }

    .factory .banner--img {
        width: 100%;
        height: auto;
    }

    .factory .banner--textBox .localLargeFont {
        font-size: 1.2em;
    }

    .factory .banner--text-large {
        font-size: 1.2rem;
        text-align: center;
    }

    .factory .banner--text-medium {
        font-size: 1.0rem;
        margin-top: 0;
    }
}

.achievement {
    padding: 0 5% 64px;
    background-color: var(--white);
}

.achievement .content--title {
    text-align: center;
    line-height: 1.5;
    white-space: normal;
}

.achievement .grid-col3,
.achievement .grid-col4 {
    margin-top: 40px;
}

.achievement .card {
    width: 100%;
    /* background-color: var(--background-color-lightgrey); */
    position: relative;
}

.achievement .card--imgBox {
    width: 100%;
    line-height: 0;
}

.achievement .card--img {
    width: 100%;
}

.achievement .card--body {
    width: 100%;
    padding: 1.5em 0;
}

.achievement .card--date {
    color: var(--secondary-bland-color);
    font-size: 1.3rem;
    font-weight: bold;
}

.achievement .card--text {
    color: var(--font-color-black);
    font-size: 1.5rem;
    font-weight: bold;
    margin-top: 4px;
}

.achievement .arrowBtnBox {
    margin-top: 40px;
}

.achievement .arrowBtn {
    max-width: 720px;
    margin: 0 auto;
}

@media screen and (max-width: 599px) {
    /* 599pxまでの幅の場合に適応される */
    .achievement {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .achievement .arrowBtnBox {
        max-width: 100%;
    }

    .achievement .arrowBtn::after {
        width: 20px;
        height: 13px;
    }
}

/* news */
.news {
    background-color: var(--white);
    padding: 30px 30px 80px;
}

.news .flex-col2 {
    /* gap: calc(11% + 1px); */
    column-gap: calc(11% + 1px);
    align-items: center;
}

.news .content--titleBox {
    display: block;
    flex: 0 1 240px;
    /* padding-top: 60px; */
}

.news .flex-col2--body {
    display: block;
    flex: 1 0 auto;
    /* padding-top: 60px; */
}

.news .content--textBox {
    margin-top: 16px;
    text-align: center;
}

.news .content--titleBtn {
    display: block;
    max-width: 100%;
    margin-top: 48px;
    margin-left: 0;
}

.news .recordList {
    width: 100%;
    padding: 32px 0;
    position: relative;
    border-bottom: 1px solid var(--background-color-grey);
}

.news .recordList::after {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 10px;
    width: 10px;
    height: 12px;
    background-image: url(../img/rounded-triangle-right-secondary-bland-color.png);
    background-position: right center;
    background-repeat: no-repeat;
    background-size: contain;
    content: "";
}

.news .recordList--date {
    color: var(--secondary-bland-color);
    font-size: 1.3rem;
    font-weight: bold;
    line-height: 1.6;
}

.news .recordList--title {
    color: var(--font-color-black);
    font-size: 1.3rem;
    line-height: 1.6;
}

@media screen and (max-width: 599px) {
    /* 599pxまでの幅の場合に適応される */
    .news {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .news .flex-col2 {
        flex-direction: column;
        row-gap: 8px;
    }

    .news .content--titleBox {
        flex: initial;
    }

    .news .flex-col2--body {
        flex: initial;
        width: 100%;
    }

    .news .recordList {
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .news .content--titleBtn {
        display: none;
    }

    .news .btnBox {
        margin-top: 32px;
    }
}


/* コミュニティ */

.community {
    background-color: var(--background-color-lightgrey);
    padding: 60px 30px;
}

.community .grid-col4 {
    margin-top: 60px;
}

.community .grid-col4 .card {
    width: 100%;
    max-width: 282px;
}

.community .grid-col4 .card--imgBox {
    width: 100%;
    line-height: 0;
}

.community .grid-col4 .card--img {
    width: 100%;
    max-width: 282px;
}

.community .grid-col4 .card--body {
    width: 100%;
    margin-top: 8px;
}

@media screen and (max-width: 599px) {
    /* 599pxまでの幅の場合に適応される */
    .community {
        padding: 32px 5%;
    }

    .community .grid-col4 {
        margin-top: 32px;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
}

/* 対応可能なサービス */

.availableService {
    background-color: var(--background-color-lightgrey);
    padding: 60px 30px;
}

.availableService .grid-col2 {
    margin-top: 60px;
    gap: 32px;
}

.availableService .grid-col2 .media {
    width: 100%;
    max-width: 588px;
    gap: 24px;
}

.availableService .grid-col2 .media--body {
    width: 70%;
    display: grid;
    align-self: center;
}

.availableService .grid-col2 .media--body.titleOnly {
    display: grid;
    align-self: center;
}

.availableService .grid-col2 .media--title {
    font-size: 2.16rem;
    line-height: 1.2;
}

.availableService .grid-col2 .media--textBox {
    margin-top: 16px;
    width: 100%;
}

.availableService .grid-col2 .media--text {
    font-size: 1.3rem;
    line-height: 1.6;
}

.availableService .grid-col2 .media--descriptionImgBox {
    width: 100%;
    margin-top: 12px;
}

.availableService .grid-col2 .media--descriptionImg {
    width: 100%;
}

.availableService .grid-col2 .media--imgBox {
    width: 180px;
    height: 168px;
    line-height: 0;
    background-color: var(--white);
    border-radius: 50%;
    display: grid;
    place-items: center;
}

.availableService .grid-col2 .media--img {
    width: 100%;
    max-width: 88px;
}

@media screen and (max-width: 1024px) {
    /* 1024pxまでの幅の場合に適応される */
    .availableService .grid-col2 .media--imgBox {
        width: 88px;
        height: 88px;
    }
    
    .availableService .grid-col2 .media--img {
        max-width: 56px;
    }
}

@media screen and (max-width: 599px) {
    /* 599pxまでの幅の場合に適応される */
    .availableService {
        padding-top: 32px;
        padding-bottom: 32px;
    }

    .availableService .grid-col2 {
        margin-top: 32px;
    }

    .availableService .grid-col2 .media {
        margin-top: 16px;
        gap: 16px;
        align-items: center;
    }

    .availableService .grid-col2 .media--body {
        padding-top: 0px;
    }
        
    .availableService .grid-col2 .media--imgBox {
        
    }

    .availableService .grid-col2 .media--title {
        font-size: 1.6rem;
    }
    
    .availableService .grid-col2 .media--textBox {
        margin-top: 8px;
        width: 100%;
    }
    
    .availableService .grid-col2 .media--text {
        font-size: 1.2rem;
        line-height: 1.4;
    }
    
    .availableService .grid-col2 .media--descriptionImgBox {
        width: 100%;
        margin-top: 8px;
    }
    
    .availableService .grid-col2 .media--descriptionImg {
        width: 100%;
    }
}


/* セキュリティー */

.security {
    background-color: var(--background-color-lightgrey);
    padding: 60px 30px;
}

.security .grid-col2 {
    margin-top: 60px;
}

.security .grid-col2 .media {
    width: 100%;
    max-width: 588px;
    gap: 24px;
}

.security .grid-col2 .media--body {
    width: 70%;
    padding-top: 8px;
}

.security .grid-col2 .media--title {
    font-size: 2.16rem;
}

.security .grid-col2 .media--textBox {
    margin-top: 24px;
    width: 100%;
}

.security .grid-col2 .media--text {
    font-size: 1.3rem;
    line-height: 1.6;
}

.security .grid-col2 .media--descriptionImgBox {
    width: 100%;
    margin-top: 12px;
}

.security .grid-col2 .media--descriptionImg {
    width: 100%;
}

.security .grid-col2 .media--imgBox {
    width: 30%;
    line-height: 0;
}

.security .grid-col2 .media--img {
    width: 100%;
    max-width: 180px;
}

@media screen and (max-width: 599px) {
    /* 599pxまでの幅の場合に適応される */

    .security {
        padding-top: 32px;
        padding-bottom: 32px;
    }

    .security .grid-col2 {
        margin-top: 32px;
    }

    .security .grid-col2 .media {
        margin-top: 16px;
        gap: 16px;
        align-items: center;
    }

    .security .grid-col2 .media--body {
        padding-top: 0;
    }
        
    .security .grid-col2 .media--imgBox {
        
    }
    .security .grid-col2 .media--title {
        font-size: 1.6rem;
    }
    
    .security .grid-col2 .media--textBox {
        margin-top: 8px;
        width: 100%;
    }
    
    .security .grid-col2 .media--text {
        font-size: 1.2rem;
        line-height: 1.4;
    }
    
    .security .grid-col2 .media--descriptionImgBox {
        width: 100%;
        margin-top: 8px;
    }
    
    .security .grid-col2 .media--descriptionImg {
        width: 100%;
    }
}


/* 取り組み */

.attempt {
    width: 100%;
    background-color: var(--background-color-lightgrey);
    padding: 60px 30px;
}

.attempt .grid-col2 {
    margin-top: 60px;
}

.attempt .grid-col2 .media {
    width: 100%;
    max-width: 588px;
    gap: 24px;
}

.attempt .grid-col2 .media--body {
    width: 70%;
    padding-top: 8px;
}

.attempt .grid-col2 .media--title {
    font-size: 2.16rem;
}

.attempt .grid-col2 .media--textBox {
    margin-top: 24px;
    width: 100%;
}

.attempt .grid-col2 .media--text {
    font-size: 1.3rem;
    line-height: 1.6;
}

.attempt .grid-col2 .media--descriptionImgBox {
    width: 100%;
    margin-top: 12px;
}

.attempt .grid-col2 .media--descriptionImg {
    width: 100%;
}

.attempt .grid-col2 .media--imgBox {
    width: 30%;
    line-height: 0;
}

.attempt .grid-col2 .media--img {
    width: 100%;
    max-width: 180px;
}

@media screen and (max-width: 599px) {
    /* 599pxまでの幅の場合に適応される */

    .attempt {
        padding-top: 32px;
        padding-bottom: 32px;
    }

    .attempt .grid-col2 {
        margin-top: 32px;
    }

    .attempt .grid-col2 .media {
        margin-top: 16px;
        gap: 16px;
        align-items: center;
    }

    .attempt .grid-col2 .media--body {
        padding-top: 0;
    }
        
    .attempt .grid-col2 .media--imgBox {
        
    }
    .attempt .grid-col2 .media--title {
        font-size: 1.6rem;
    }
    
    .attempt .grid-col2 .media--textBox {
        margin-top: 8px;
        width: 100%;
    }
    
    .attempt .grid-col2 .media--text {
        font-size: 1.2rem;
        line-height: 1.4;
    }
    
    .attempt .grid-col2 .media--descriptionImgBox {
        width: 100%;
        margin-top: 8px;
    }
    
    .attempt .grid-col2 .media--descriptionImg {
        width: 100%;
    }
}


/* ご挨拶 */

.greeting {
    width: 100%;
    display: grid;
    place-items: center;
    padding: 120px 30px 100px;
    position: relative;
    overflow: hidden;
    background-color: var(--background-color-lightgrey);
    z-index: 1; /* .bg-triangleに隠れないように */
}

.greeting .bg-triangle {
    position: absolute;
    width: 0;
    height: 0;
    bottom: 0;
    left: auto;
    right: 0;
    border-width: 0 0 39.285714vw 142.857143vw;
    border-style: solid;
    border-color: transparent transparent var(--primary-bland-color) transparent;
    z-index: -1;
}

.greeting .media {
    gap: 40px;
}

.greeting .media--body {
    flex: 1 0;
}

.greeting .media--titleBox {
    /* margin-top: 32px; */
}

.greeting .media--title {
    color: var(--font-color-black);
    font-size: 2.4rem;
}

.greeting .media--textBox {
    /* margin-top: 24px; */
}

.greeting .media--text {
    color: var(--black);
    font-size: 1.4rem;
    line-height: 2;
    margin-top: 2em;
}

.greeting .media--link {
    color: var(--font-color-black);
    font-weight: bold;
    font-size: 1.4rem;
    border-bottom: 1px solid var(--font-color-black);
    padding: 0 2px 1px 2px;
}

.greeting .media--imgBox {
    flex: 0 1 43.3%;
    line-height: 0;
}

.greeting .media--img {
    width: 100%;
}

@media screen and (max-width: 599px) {
    /* 599pxまでの幅の場合に適応される */
    .greeting {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .greeting .bg-triangle {
        border-width: 0 0 190vw 230vw;
    }
    
    .greeting .media {
        width: 100%;
        margin-bottom: 0;
        margin-left: 0;
        position: relative;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;
    }

    .greeting .media::after,
    .greeting .media-rowReverse::after {
        width: 0;
        height: 0;
    }

    .greeting .media--body {
        flex: initial;
        width: 100%;
    }

    .greeting .media--imgBox {
        flex: initial;
        width: 100%;
    }

    .greeting .media--img {
        flex: initial;
        width: 100%;
    }
    
}

/* エリア実績 */

.area {
    background-color: var(--white);
    background-image: url(/img/top-area-map.jpg);
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
    padding: 80px 30px 32px;
    position: relative;
    z-index: 0;
}

/* 背景画像のみにフィルターが設定される為にbeforeを使用 */
.area::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: inherit;
    filter: brightness(40%) grayscale(100%);
    z-index: -1;
}

/* .area .grid-col5 {
    margin-top: 60px;
} */

.area .content--textBox {
    margin-top: 40px;
}

.area .content--text {
    font-size: 2.4rem;
    font-weight: bold;
    text-align: center;
}

.area .flex-col2 {
    width: 100%;
    gap: 40px;
    margin-top: 40px;
}

.area .areaCatalogBox {
    flex: 0 1 480px;
}

.area .messageBox {
    flex: 1 0;
}

.area .areaCatalogText {
    font-size: 1.8rem;
}

.area .areaMessageBox {
    margin-top: 18px;
}

.area .messageText {
    font-size: 1.8rem;
    font-weight: bold;
}

@media screen and (max-width: 1024px) {
    /* 1024pxまでの幅の場合に適応される */

    .area .flex-col2 {
        gap: 24px;
    }

    .area .areaCatalogBox {
        flex-basis: 35%;
    }
}

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

    .area {
        padding: 40px 5%;
    }

    .area .flex-col2 {
        flex-direction: column-reverse;
        row-gap: 40px;
    }

    .area .areaCatalogBox {
        flex-basis: auto;
    }

    /* .area .grid-col5 {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        margin-top: 40px;
    } */

    /* .area .btn {
        font-size: 1.3rem;
        padding: 8px;
    } */

    /* .area .spOnly .arrowBtn {
        margin-top: 24px;
        font-size: 1.5rem;
        padding: 8px;
    } */
}

.accessMap {
    padding: 64px 5%;
    background-color: var(--background-color-lightgrey);
}

.accessMap .googleMap {
    margin-top: 32px;
}

.accessMap .horizontalTableBox {
    margin-top: 48px;
}

.accessMap .horizontalTable {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 1.4rem;
}

.accessMap .horizontalTable--body {
    display: table-row-group;
    vertical-align: middle;
    border-color: inherit;
}

.accessMap .horizontalTable--bodyRow {
    display: table-row;
    vertical-align: inherit;
    border-color: inherit;
}

.accessMap .horizontalTable--header {
    width: 25%;
    min-width: 240px;
    color: var(--font-color-black);
    text-align: left;
    font-size: 1.6rem;
    font-weight: bold;
    background-color: var(--background-color-grey);
    padding: 15px 18px;
    border-bottom: 1px solid var(--table-border-color-lightgrey);
}

.accessMap .horizontalTable--text {
    width: auto;
    color: var(--font-color-black);
    text-align: left;
    font-size: 1.6rem;
    font-weight: bold;
    background-color: var(--white);
    padding: 15px 18px;
    border-bottom: 1px solid var(--table-border-color-lightgrey);
}

@media screen and (max-width: 599px) {
    /* 599pxまでの幅の場合に適応される */
    .accessMap {
        padding-top: 32px;
        padding-bottom: 32px;
    }

    .accessMap .horizontalTableBox {
        margin-top: 0;
    }

    .accessMap .horizontalTable--body {
        display: block;
    }

    .accessMap .horizontalTable--bodyRow {
        display: block;
        margin-top: 16px;
    }

    .accessMap .horizontalTable--header {
        display: block;
        width: 100%;
        padding: 16px 5%;
        font-size: 1.5rem;
    }
    
    .accessMap .horizontalTable--text {
        display: block;
        width: 100%;
        padding: 16px 5%;
        font-size: 1.5rem;
        /* background-color: transparent; */
    }
}

.cta {
    padding: 40px 5%;
    background: url(/img/bg-cta.jpg);
}

.cta .darkTheme {
}

.cta .message {
    text-align: center;
    line-height: 1.5;
    font-size: 3.2rem;
}

.cta .contact {
    display: grid;
    place-items: center;
    row-gap: 8px;
    padding: 24px 64px;
    margin-top: 24px;
    color: var(--white);
    background-color: var(--secondary-bland-color);
    filter: drop-shadow(4px 4px 1px #226657);
}

.cta.darkTheme .contact {
    color: var(--white);
    background-color: var(--background-color-dimgrey);
    border: 1px solid var(--white); 
    margin-top: 24px;
    /* filter: drop-shadow(2px 2px 1px var(--white)); */
    filter: drop-shadow(0 0 0 var(--white));
}

.cta .contact .message {
    font-size: 2.5rem;
}

.cta .contact .flex-col2 {
    display: flex;
    align-items: center;
    column-gap: 16px;
}

.cta .contact .tel {
    font-size: 7.7rem;
    font-weight: bold;
    line-height: 1;
}

.cta .contact .schedule {
    font-size: 1.6rem;
    line-height: 1.5;
}

.cta .arrowBtn {
    font-size: 2.8rem;
    margin-top: 32px;
    max-width: 600px;
    margin: 32px auto 0;
}

.cta .arrowBtn::before {
    position: absolute;
    content: "";
    width: 40px;
    height: 40px;
    top: 50%;
    left: 48px;
    transform: translateY(-50%);
    background-image: url(/img/LINE_Brand_icon.png);
    background-size: contain;
    background-repeat: no-repeat;
}

@media screen and (max-width: 1024px) {
    /* 1024pxまでの幅の場合に適応される */

    .cta .message {
        font-size: 2.8rem;
    }
    
    .cta .contact .tel {
        font-size: 4rem;
    }

    .cta .arrowBtn {
        max-width: 560px;
    }

    .cta .arrowBtn::before {
        left: 28px;
    }
}

@media screen and (max-width: 599px) {
    /* 599pxまでの幅の場合に適応される */
    .cta {
        padding-top: 24px;
        padding-bottom: 24px;
    }

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

    .cta .contact {
        /* margin-top: 24px; */
        padding: 20px;
        row-gap: 8px;
    }

    .cta .contact .message {
        font-size: 1.4rem;
    }

    .cta .contact .flex-col2 {
        flex-direction: column;
        row-gap: 8px;
    }
    
    .cta .contact .tel {
        font-size: 4rem;
    }

    .cta .arrowBtn {
        font-size: 1.6rem;
        max-width: 320px;
    }

    .cta .arrowBtn::after {
        width: 16px;
        height: 12px;
    }

    .cta .arrowBtn::before {
        left: 12px;
        width: 24px;
        height: 24px;
    }
}

/* ボトムメニュー */

.bottomMenu {
    position: fixed;
    left: 0;
    bottom: 0;

    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: stretch;

    width: 100%;
    max-width: 100%;
    height: auto;
    z-index: 9999;
    overflow: hidden;
    background-color: darkgray;
}

.bottomMenu--item {
    position: relative;
    transform: skew(-25deg) translateX(-25%);
    width: 100%;
    height: 100%;
    flex: 0 0 65%;
}

.bottomMenu--textBox {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    position: relative;
    height: auto;
    padding: calc(var(--height-bottom-menu-notsp) / 2);
}

.bottomMenu--line {
    background-color: var(--secondary-bland-color);
}

.bottomMenu--tel {
    background-color: var(--primary-bland-color);
}

.bottomMenu--line .bottomMenu--text {
    transform: skew(25deg);
    position: absolute;
    color: var(--white);
    font-size: 3.2rem;
    font-weight: bold;
    right: 100px;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
}

.bottomMenu--line .bottomMenu--text::before {
    content: "";
    display: inline-block;
    position: relative;
    width: 48px;
    height: 48px;
    margin-right: 12px;
    background-image: url(../img/LINE_Brand_icon.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
}

.bottomMenu--tel .bottomMenu--text {
    transform: skew(25deg);
    position: absolute;
    color: var(--font-color-darkgrey);
    font-size: 4.1rem;
    font-weight: bold;
    left: 100px;
}

.bottomMenu--tel .bottomMenu--text::before {
    content: "";
    display: inline-block;
    position: relative;
    width: 23px;
    height: 36px;
    margin-right: 8px;
    background-image: url(../img/icon_phone_black.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
}

.bottomMenu--tel .bottomMenu--text::after {
    content: "";
    display: inline-block;
    position: absolute;
    width: 235px;
    height: 36px;
    background-image: url(/img/schedule.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    top: 50%;
    transform: translateY(-50%);
}

@media screen and (max-width: 1024px) {
    /* 1024pxまでの幅の場合に適応される */
    
    .bottomMenu--line .bottomMenu--text {
        font-size: 2.1rem;
        right: 48px;
    }

    .bottomMenu--line .bottomMenu--text::before {
        margin-right: 12px;
    }

    .bottomMenu--tel .bottomMenu--text {
        font-size: 2.8rem;
        left: 38px;
    }

    .bottomMenu--tel .bottomMenu--text::before {
        width: 16px;
        height: 24px;
        margin-right: 8px;
    }

    .bottomMenu--tel .bottomMenu--text::after {
        margin-left: 8px;
        width: 120px;
        /* height: 20px; */
    }
}

@media screen and (max-width: 599px) {
    /* 599pxまでの幅の場合に適応される */
    .bottomMenu {
        display: block;
    }

    .bottomMenu--item {
        position: static;
        transform: skew(0) translateX(0);
    }

    .bottomMenu--textBox {
        padding: 8px 0;
        text-align: center;
    }

    .bottomMenu--line .bottomMenu--text {
        position: static;
        transform: skew(0);
        font-size: 2rem;
    }

    .bottomMenu--line .bottomMenu--text::before {
        width: 24px;
        height: 24px;
        margin-right: 8px;
    }
    
    .bottomMenu--tel .bottomMenu--text {
        position: static;
        transform: skew(0) translateX(-30%);
        font-size: 2rem;
        line-height: 1;
        /* margin-left: -70px; */
    }

    .bottomMenu--tel .bottomMenu--text::before {
        width: 12px;
        height: 16px;
    }
    
    .bottomMenu--tel .bottomMenu--text::after {
        width: 96px;
    }
}

/* 表示非表示 */

@media screen and (min-width: 600px) {
    /* 600px以上の幅の場合に適応される */
    
    .spOnly {
        display: none;
    }
    
}

@media screen and (max-width: 599px) {
    /* 599pxまでの幅の場合に適応される */
    .notSpOnly {
        display: none;
    }
}

@media screen and (max-width: 1024px) {
    /* 1024pxまでの幅の場合に適応される */
    .pcOnly {
        display: none;
    }
}

@media screen and (min-width: 1025px) {
    /* 1025px以上の幅の場合に適応される */
    .notPcOnly {
        display: none;
    }
}

@media not screen and (min-width: 599px) and (max-width: 1024px) {
    /* 599px以上、1024px以下の幅の場合に適応される */
    .tabletOnly {
        display: none;
    }
}

/* 縦書き */
.writing-vertical {
    writing-mode: vertical-rl;
}

/* 親要素を無視したwidth100%の設定 */
.widthFullsizeIgnoreParentElement {
    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
}

@media screen and (max-width: 599px) {
    /* 599pxまでの幅の場合に適応される */
    .widthFullsizeIgnoreParentElement-spOnly {
        margin-right: calc(50% - 50vw);
        margin-left: calc(50% - 50vw);
    }
}