@charset "utf-8";

/* ==================================
  トップページ（index.html）
=====================================*/

/*ヒーロー画像
-------------------------------------- */
.hero-top {
    position: relative;
    height: 40vw;
    max-width: 1920px;
    overflow: hidden;
    margin: 0 auto 103px;
    background-image: url(../img/index/hero-bg.jpg);
    /* スライドショーの画像切り替わり時、画面下の背景が透けないように背景を置く */
    background-size: cover;
    z-index: 5;
}

.hero__logo {
    position: absolute;
    height: 40vw;
    z-index: 10;
}

.hero__slider {
    position: relative;
    z-index: 1;
    width: 100%;
}

.slider__item {
    height: 40vw;
    background-position: right;
    background-size: contain;
}

.slider__item1 {
    background-image: url(../img/index/slideshow1-2.jpg);
}

.slider__item2 {
    background-image: url(../img/index/slideshow2-2.jpg);
}

.slider__item3 {
    background-image: url(../img/index/slideshow3-2.jpg);
}

/*このような方へおすすめ
-------------------------------------- */
.recomend {
    margin: 0 auto 141px;
    padding: 48px 0 0 0;
    background: #fff;
    background-image: url(../img/index/info_recomment-01.svg);
    background-repeat: no-repeat;
    background-size: 185px 231px;
    background-position: bottom right 91px;
    border-left: solid 6px #5DC1CF;
    box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.33);
    overflow: hidden;
    max-width: 1002px;
    height: 300px;
}

.recomend__title {
    text-align: center;
    margin-bottom: 17.5px;
}

.recomend__title h2 {
    font-size: 2rem;
    font-weight: 500;
    display: inline-block;
    padding: 0 35px;
    background-image: url(../img/index/foot-turquoise.svg), url(../img/index/foot-turquoise.svg);
    background-repeat: no-repeat;
    background-position: left, right;
    background-size: 28px 28px;
}

.recomend ul {
    margin-left: 145px;
    list-style-position: outside;
    color: #5DC1CF;
}

.recomend ul li {
    font-size: calc(20/16*1rem);
}

.recomend ul li+li {
    padding-top: calc(5/16*1rem);
}

.recomend span {
    color: black;
}

/*  歩くたびに、足元から爽やかに
------------------------------------------*/
.introduction {
    display: flex;
    gap: 110px;
    justify-content: center;
    margin: 0 auto 153px;
}

.introduction__text {
    max-width: 670px;
    padding: 82.5px 75.5px;
    background: linear-gradient(0deg, transparent 51px, #ccc 52px), linear-gradient(90deg, transparent 51px, #ccc 52px);
    background-size: 52px 52px;
}

.introduction__text p {
    line-height: 2.2;
    font-size: calc(18/16*1rem);
    text-align: justify;
    -webkit-text-stroke-width: 5px;
    -webkit-text-stroke-color: #F9FDFF;
    paint-order: stroke;
}

.introduction__text h2 {
    font-weight: 500;
    text-align: center;
    margin-bottom: 42px;
    font-size: calc(30/16*1rem);
}

.marker {
    background: linear-gradient(transparent 70%, #CFECF0 70%);
}

.introduction__contents {
    width: 40%;
    height: auto;
    object-fit: contain;
}

/*  ドイツ式フットケアとは
------------------------------------------*/
.QandA {
    max-width: 1280px;
    --border-color: black;
    /* カッコの色 */
    margin: 0 auto 171px;
    /* 外側の余白（上下と中央配置） */
    position: relative;
    /* 相対位置指定（擬似要素の基準） */
    text-align: center;
    padding: 50px 50px;
    background-color: rgba(249, 253, 255, 0.5);
    /* #F9FDFF 透明度50% */
}

.QandA h2 {
    font-size: calc(24/16*1rem);
    font-weight: 400;
    margin-bottom: 37px;
}

.QandA__text {
    font-size: calc(22/16*1rem);
    text-indent: -1em;
    display: inline-block;
    text-align: left;
    line-height: 170%;
    margin-bottom: 50px;
}

.QandA__contents {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    list-style-type: none;
    gap: 50px;
}

.contents__item {
    width: 186px;
    border: 3px solid #18AABE;
    color: #18AABE;
    padding: 17px 0;
    font-size: calc(22/16*1rem);
    font-weight: 700;
}

/* 鍵括弧 */
.QandA::before,
.QandA::after {
    content: "";
    /* 擬似要素の内容なし */
    height: 100%;
    /* ボックスの高さに合わせる */
    width: 57px;
    /* カッコの幅 */
    position: absolute;
    /* 絶対位置指定 */
    bottom: 0;
    /* 下端に配置 */
    border-top: 1px solid var(--border-color);
    /* 上部の線 */
    border-bottom: 1px solid var(--border-color);
    /* 下部の線 */
}

.QandA::before {
    border-left: 1px solid var(--border-color);
    /* 左の角括弧 */
    left: 0;
    /* 左端に配置 */
}

.QandA::after {
    border-right: 1px solid var(--border-color);
    /* 右の角括弧 */
    right: 0;
    /* 右端に配置 */
}

/*  スタッフ紹介
------------------------------------------*/
.staff__image img {
    max-width: 566px;
    height: auto;
}

.staff {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 48px;
    max-width: 1280px;
    margin-bottom: 165px;
}

.staff__text {
    max-width: 548px;
    padding: 110px 101px 51px 0;
    background:
        /* 左30%は不透明の #F9FDFF（べた塗り） */
        linear-gradient(to right,
            #F9FDFF 0%,
            #F9FDFF 30%,
            transparent 30%,
            transparent 100%),

        /* 横線（格子） */
        linear-gradient(0deg,
            transparent 0px,
            transparent 51px,
            #ccc 51px,
            #ccc 52px,
            transparent 52px),

        /* 縦線（格子） */
        linear-gradient(90deg,
            transparent 0px,
            transparent 51px,
            #ccc 51px,
            #ccc 52px,
            transparent 52px),

        /* 下地に半透明の #F9FDFF */
        rgba(249, 253, 255, 0.5);

    background-size:
        100% 100%,
        /* 左30%べた塗り */
        100% 52px,
        /* 横格子間隔 */
        52px 100%,
        /* 縦格子間隔 */
        auto;
    /* 下地半透明 */

    -webkit-text-stroke-width: 5px;
    -webkit-text-stroke-color: #F9FDFF;
    paint-order: stroke;
}

.name {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 20px;
}

.name-kanji {
    color: #5DC1CF;
    font-weight: 700;
    font-size: 2rem;
    /*32px*/
    padding-right: 25px;
}

.name-roman {
    font-size: calc(20/16*1rem);
    letter-spacing: 0.2em;
}

.staff__title {
    font-size: calc(20/16*1rem);
    font-weight: 400;
    margin-bottom: 20px;
}

.staff__position {
    font-size: calc(20/16*1rem);
    display: inline-block;
}

.staff__position p {
    margin-bottom: 8px;
}

.staff__position p span {
    font-size: 0.7em;
    padding-left: 0.3em;
    vertical-align: top;
}

.staff__position small {
    text-align: right;
    font-size: 1em;
    display: block;
    margin-bottom: 20px;
}

.staff__position small a {
    color: #18AABE;
    font-weight: bold;
    text-decoration: none;
    /* デフォルトの下線を消す */
}


.staff__contents {
    font-size: calc(18/16*1rem);
    line-height: 2;
    text-align: justify;
}

/*  トピック
------------------------------------------*/
.topic {
    border: 3px solid #5DC1CF;
    margin: 0 auto 189px;
    text-align: center;
    padding: 75px 30px 50px;
    background-color: rgba(249, 253, 255, 0.5);
    /* #F9FDFF 透明度50% */
}

.topic h2 {
    font-size: calc(30/16*1rem);
    font-weight: 700;
    color: #5DC1CF;
    display: inline-block;
    padding-left: 30px;
    margin-bottom: 52px;
    background-image: url(../img/index/foot-turquoise.svg);
    background-repeat: no-repeat;
    background-position: left;
    background-size: 33px;
}

.topic__post {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;
}

.instagram-media {
    transition: transform 0.3s ease-in-out;
    max-width: 336px !important;
}

.instagram-media:hover {
    transform: scale(1.03);
    cursor: pointer;
}

/*  SNS
------------------------------------------*/
.contact h2 {
    font-size: 2rem;
    font-weight: 400;
    text-align: center;
    margin-bottom: 97px;
}

.contact__contents {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    min-height: 506px;
    padding: 58px 0;
    border: 1px solid #18AABE;
    background-color: #fff;
    margin-bottom: 202px;
}

.contact__contents::after {
    content: "";
    border: 1px solid #999;
    /* align-self: stretch; */
}

.line,
.instagram {
    display: flex;
    flex-flow: column;
    align-items: center;
    flex: 1;
    padding: 50px;
}

.instagram {
    order: 2;
}

.line__icon__container {
    display: flex;
    align-items: start;
}

.line__icon__container,
.instagram__icon {
    height: 197px;
}

.line__icon {
    display: flex;
    align-items: center;
    gap: 22px;

}

.line__icon img {
    max-width: 112px;
    /* height: auto; */
}

.line__icon p {
    font-size: calc(28/16*1rem);
    font-weight: 700;
    background-color: #56CE1F;
    color: #fff;
    padding: 1.5rem 1rem;
}

.line__icon a {
    text-decoration: none;
}

.instagram__icon {
    display: flex;
    align-items: flex-start;
    gap: 22px;
}

.instagram__icon img {
    max-width: 112px;
    height: auto;
    width: 100%;
}

.contact__text {
    font-size: calc(30/16*1rem);
    margin-bottom: 20px;
}

.contact__text2 {
    font-size: calc(24/16*1rem);
}

/* ホバー */
.line__icon img,
.line__icon p,
.instagram__icon img {
    transition: transform .3s ease;
}

.line__icon img:hover,
.line__icon p:hover,
.instagram__icon img:hover {
    transform: scale(1.1);
    cursor: pointer;
}

/*レスポンシブ(タブレット)
-------------------------------------- */
@media (max-width: 960px) {

    .wrapper {
        max-width: 600px;
        padding: 0 25px;
    }

    .hero-top {
        height: auto;
        margin-bottom: 55px;
    }

    /*このような方へおすすめ
-------------------------------------- */
    .recomend {
        background-image: none;
        height: auto;
        padding: 15px 15px 48px;
        margin-bottom: 100px;
    }

    .recomend__title h2 {
        font-size: 1.5rem;
        background-size: 25px 25px;
        padding: 23px;
        background-size: 20px 20px;
    }

    .recomend ul {
        margin-left: 0px;
        margin: 0 auto;
        padding-left: 15px;
        width: fit-content;
    }

    .recomend ul li {
        font-size: 1.1rem;
    }

    /*  歩くたびに、足元から爽やかに
------------------------------------------*/
    .introduction {
        flex-direction: column;
        margin-bottom: 100px;
        gap: 50px;
    }

    .introduction__contents {
        display: block;
        width: 80%;
        height: auto;
        margin: 0 auto;
    }

    .introduction__text {
        padding: 25px;
        background: linear-gradient(0deg, transparent 35px, #ccc 36px), linear-gradient(90deg, transparent 35px, #ccc 36px);
        background-size: 36px 36px;
    }

    .introduction__text h2 {
        font-size: 1.5rem;
    }

    .introduction__text p {
        font-size: 1.1rem;
    }

    /*  ドイツ式フットケアとは
------------------------------------------*/
    .QandA {
        padding: 30px 10px;
        margin-bottom: 100px;
    }

    .QandA__text {
        padding-left: 1.1rem;
        font-size: 1.1rem;
        margin-bottom: 20px;
    }

    .QandA__contents {
        flex-wrap: wrap;
        gap: 20px;
    }

    .contents__item {
        width: 120px;
        font-size: 1rem;
        padding: 15px 0;
    }

    .QandA h2 {
        margin-bottom: 10px;
    }

    /*  スタッフ紹介
------------------------------------------*/
    .staff {
        flex-direction: column;
        margin-bottom: 100px;
    }

    .staff__image img {
        width: 80%;
        height: auto;
        display: block;
        margin: 0 auto;
    }

    .staff__title {
        font-size: 1rem;
        margin-bottom: 8px;
    }

    .name-kanji {
        font-size: 1.5rem;
        padding-right: 25px;
    }

    .name-roman {
        font-size: 1rem;
    }

    .staff__text {
        margin-left: 20px;
        padding-right: 30px;
        text-align: justify;
    }

    .staff__position {
        font-size: 1rem;
    }

    .staff__contents {
        font-size: 1.1rem;
    }

    /*  トピック
------------------------------------------*/
    .topic {
        padding: 50px 25px 50px;
        margin-bottom: 100px;
    }

    .topic h2 {
        font-size: 1.75rem;
        background-size: 28px;
        padding-left: 28px;
    }


    .instagram-media {
        max-width: 250px !important;
    }

    .topic__post .instagram-media:not(:first-child) {
        display: none !important;
    }

    /*  お問い合せ方法
------------------------------------------*/
    .contact__contents {
        margin-bottom: 100px;
    }

    .contact h2 {
        font-size: 1.5rem;
        margin-bottom: 50px;

    }

    .contact__contents {
        flex-direction: column;
    }

    .line__icon {
        justify-content: center;
        flex-wrap: wrap;
    }

    .line__icon p {
        font-size: 1.1rem;
        padding: 10px;
    }

    .line__icon img {
        max-width: 70px;
    }

    .contact__text {
        font-size: 1.6rem;
        margin-bottom: 15px;
    }

    .contact__text2 {
        font-size: 1.2rem;
    }

    .line__icon__container {
        height: auto;
        margin-bottom: 25px;
    }

    .line {
        margin-bottom: 40px;
        padding: 30px;

    }

    .instagram__icon {
        height: auto;
        margin-bottom: 25px;
    }

    .instagram__icon img {
        max-width: 70px;
        margin-top: 40px;
    }

    .instagram {
        padding: 30px 25px;
    }


    .contact__contents::after {
        width: 90%;
        display: block;
        /* ブロック要素にしてmargin: auto;を有効にする */
        margin: 0 auto;
    }

    .forms {
        margin-bottom: 150px;
    }

    /*  アクセス
------------------------------------------*/

    .access {
        margin-bottom: 150px;
    }

    .access h2 {
        font-size: 1.3rem;
        padding-bottom: 25px;
    }

    .access td {
        font-size: 1rem;
    }
}

/*レスポンシブ(スマホ)
-------------------------------------- */
@media (max-width: 428px) {

    /*このような方へおすすめ
-------------------------------------- */
    .recomend {
        margin-bottom: 50px;
    }

    .recomend__title h2 {
        font-size: 1.3rem;
    }

    .recomend ul li {
        font-size: 1rem;
    }

    /*  歩くたびに、足元から爽やかに
------------------------------------------*/
    .introduction {
        margin-bottom: 50px;
    }

    .introduction__text h2 {
        font-size: 1.3rem;
    }

    .introduction__text p {
        font-size: 1rem;
    }

    /*  ドイツ式フットケアとは
------------------------------------------*/
    .QandA {
        margin-bottom: 50px;
    }

    .QandA__text {
        padding-left: 1rem;
        font-size: 1rem;
    }

    /*  スタッフ紹介
------------------------------------------*/
    .staff {
        margin-bottom: 50px;
    }

    .staff__title {
        font-size: 1rem;
    }

    .name-kanji {
        font-size: 1.4rem;
    }

    .name-roman {
        font-size: 1rem;
    }

    .staff__position {
        font-size: 1rem;
    }

    .staff__contents {
        font-size: 1rem;
    }

    /*  トピック
------------------------------------------*/
    .topic {
        margin-bottom: 50px;
    }

    .topic h2 {
        font-size: 1.35rem;
        background-size: 20px;
        padding-left: 20px;
    }

    /*  SNS
------------------------------------------*/
    .line__icon {
        flex-direction: column;
    }

    .line__icon img {
        max-width: 200px;
    }

    .instagram__icon {
        flex-direction: column;
    }

    .instagram__icon img {
        max-width: 200px;
    }

    .instagram__icon a {
        width: 100%;
    }

    /*  お問い合せ方法
------------------------------------------*/
    .contact__contents {
        margin-bottom: 50px;
    }

    .contact h2 {
        font-size: 1.3rem;
        margin-bottom: 50px;
    }

    .contact__text {
        font-size: 1.3rem;
        margin-bottom: 15px;
    }

    .contact__text2 {
        font-size: 1rem;
    }
}


/*レスポンシブ(ヒーロー画面)
-------------------------------------- */
@media (min-width: 1920px) {
    .hero-top {
        height: 768px;
    }

    .hero__logo {
        height: 768px;
    }

    .slider__item {
        height: 768px;
    }
}