@charset "UTF-8";

/* =====================================
    responsive.css
    タブレット・スマートフォン用スタイル
    ブレークポイント: 768px / 480px
===================================== */


/* =====================================
    ■ タブレット以下（max-width: 768px）
===================================== */
@media screen and (max-width: 768px) {

    /* --- 改行コントロール --- */
    br.pc-br { display: none; }
    br.sp-br { display: inline; }
    span.pc-br { display: none; }
    /* TEL/FAX改行：余白なし */
    .inquiry p strong.conection {
        display: block;
        margin-left: 0;
    }

    /* --- ヘッダー --- */
    ._header_1gw8r_1 {
        height: 75px;
    }
    .header__inner {
        padding: 10px 20px;
    }
    ._header__nav--pc_1gw8r_25 {
        display: none;
    }
    ._header__nav--sp_1gw8r_29 {
        display: block;
    }

    /* --- ロゴ --- */
    .logo {
        width: 100px;
    }

    /* --- ナビゲーション --- */
    ._nav__list_1pni4_1 {
        flex-wrap: wrap;
        width: 300px;
        margin: 0 auto;
    }
    ._nav__listItem_1pni4_12 {
        width: calc(50% - 24px);
        margin: 6px 0;
    }

    /* --- テキスト要素 --- */
    h3 {
        font-size: clamp(.75rem, 1.093vw, .875rem);
    }
    h4 {
        font-size: clamp(.75rem, 1.093vw, .875rem);
    }

    /* --- メインレイアウト --- */
    .main {
        width: 100%;
    }
    .container {
        display: block;
    }

    /* --- ページタイトル --- */
    .pageTitle {
        font-size: clamp(.875rem, 1.25vw, 1rem);
    }

    /* --- ページインナーレイアウト --- */
    .pageInnerLayout__feature {
        padding: 20px 0 40px;
    }

    /* --- タイトル span --- */
    .title span {
        display: block;
        font-size: clamp(.875rem, 1.25vw, 1rem);
    }

    /* --- お問い合わせ --- */
    .time span {
        display: block;
    }
    .tel span {
        display: block;
    }
    .inquiry p {
        font-size: 0.9em;
    }
    /* TEL・FAXを改行で区切る */
    .inquiry p .conection {
        display: block;
        margin-left: 0;
    }

    /* --- インタビュー: プロフィール --- */
    .profile {
        width: 80%;
        margin: 0 auto;
    }
    .profile__inner {
        justify-content: center;
    }
    .top__profile {
        margin: 60px auto 20px;
    }
    .top__profile--pc {
        display: none;
    }
    .top__profile--tab {
        display: block;
    }

    /* --- インタビュー: コンテンツレイアウト --- */
    .top__content {
        display: block;
        margin: 20px auto 0;
    }
    .top__contentLeft {
        display: flex;
        justify-content: center;
        margin: 0 auto;
    }
    .top__contentRight {
        width: 70%;
        margin: 30px auto;
        text-align: center;
    }
    .top__contentRight p {
        text-align: center;
        font-size: 1.2em;
    }

    /* --- 経歴リスト --- */
    .career-list {
        margin: 0.8em 1.2em;
        text-align: left;
    }
    .career-list .career {
        font-size: 1em;
    }

    /* --- インタビューメニュー --- */
    .interview__menuinner ul {
        display: block;
    }
    .interview__menuinner ul li {
        width: 100%;
        border-left: none;
        border-right: none;
        border-bottom: 1px solid;
    }
    .interview__menuinner ul li:first-of-type {
        border-left: none;
    }
    .interview__menuinner ul li:last-of-type {
        border-bottom: none;
    }

    /* --- インタビュー本文 --- */
    .interview__sectionInner {
        padding: 0 25px;
    }
    span.interview__sectionTitleLine {
        display: none;
    }

    /* --- 保湿ケア --- */
    .care h3 {
        width: 400px;
    }
    .care__top {
        display: block;
    }
    .care__topLeft {
        width: 100%;
    }
    .care__topRight {
        margin-left: 0;
        width: 100%;
    }
    .care__detail {
        display: block;
        padding: 12px;
    }
    .care__detailLeft,
    .care__detailRight {
        padding: 0;
        width: 410px;
        margin: 0 auto;
    }
    .care__point nav ul li {
        display: block;
    }
    .care__point nav ul li span p.check_list {
        font-weight: bold;
    }
    .care__point nav ul li p span.reader {
        display: none;
    }

    /* --- お知らせ: レイアウト系 --- */
    .inner {
        display: block;
    }
    .inner .character {
        margin: 0 auto;
    }
    .art__list {
        display: block;
    }
    .inner__art {
        margin: 0 auto;
        gap: 20px;
    }
    .inner__art .art__thema {
        margin: 0;
    }
    .inner__art .art__thema3 {
        width: 100%;
    }
    .inner__art .art__thema ul li span {
        display: none;
    }
    .art {
        width: 70%;
    }
    .compare {
        display: block;
    }
    .figure {
        margin: 20px auto;
    }
    .text {
        width: 100%;
    }

} /* end @media 768px */


/* =====================================
    ■ スマートフォン（max-width: 480px）
===================================== */
@media screen and (max-width: 480px) {

    /* --- インタビュー: プロフィール --- */
    .profile h2:first-of-type {
        font-size: clamp(2.25rem, 3.125vw, 2.5rem);
    }
    .profile h2:last-of-type {
        font-size: 1.1em;
    }

    /* --- トップ --- */
    .top {
        padding-left: 15px;
        padding-right: 15px;
        max-width: 870px;
    }
    .top__contentRight {
        width: 90%;
    }
    .top__contentRight h3 span {
        display: block;
    }
    .top__contentRight strong {
        padding-left: 0;
    }
    .top__contentRight p {
        text-align: center;
        margin: 30px 0;
    }

    /* --- ナビ・インタビュー --- */
    .nav__inner {
        padding-left: 15px;
        padding-right: 15px;
        max-width: 870px;
    }
    .interview {
        padding-left: 15px;
        padding-right: 15px;
        max-width: 870px;
    }
    .interview__section {
        margin: 60px auto;
    }
    .interview__section span {
        display: inline;
    }
    span.interview__sectionTitleLine {
        display: none;
    }

    /* --- 保湿ケア --- */
    .care {
        padding-left: 15px;
        padding-right: 15px;
        max-width: 870px;
    }
    .care h3 {
        width: 100%;
    }
    .care__point {
        padding-left: 0;
    }
    .care__point nav ul {
        padding: 12px 0;
    }

    /* --- リンクボタン --- */
    .linkBtn {
        width: 100%;
    }

    /* --- ボタン広幅 --- */
    .btn.btn--wide {
        width: 100%;
    }

    /* --- 図版 --- */
    .figure {
        width: 100%;
    }

    /* --- お問い合わせ: リンクボタン・電話番号 --- */
    .linkBtn {
        width: 100%;
    }
    .tel span {
        display: block;
    }

} /* end @media 480px */

    /* --- お問い合わせ: 受付時間・電話番号 --- */
    .time span {
        display: block;
    }

/* --- SMS: スマホ時のウォッターくんサイズ拡大 --- */
@media screen and (max-width: 768px) {
    .sms_content .inner .character {
        width: 80%;
    }
}

/* --- 給水車大解剖：スマホ時に横並びを縦一列に --- */
@media screen and (max-width: 768px) {
    .kyusuisya-main-layout,
    .kyusuisya-sub-layout {
        display: block !important;
    }
    .kyusuisya-main-layout > div,
    .kyusuisya-sub-layout > div {
        width: 100% !important;
        margin-top: 16px;
    }
    .kyusuisya-main-layout > div:first-child,
    .kyusuisya-sub-layout > div:first-child {
        margin-top: 0;
    }
}


/* --- 水質検査結果：スマホ時に横並びを縦一列に --- */
@media screen and (max-width: 768px) {
    .suishitsu-layout {
        display: block !important;
    }
    .suishitsu-layout > div {
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 16px;
    }
    .suishitsu-layout > div:first-child {
        margin-top: 0;
    }
    .suishitsu-layout .character {
        width: 80%;
        max-width: none;
        margin: 0 auto;
    }
}


/* --- 水道フェア：スマホ時に縦一列・ウォッターくんを一番下へ --- */
@media screen and (max-width: 768px) {
    .suidoufair-layout {
        display: flex !important;
        flex-direction: column !important;
    }
    .suidoufair-layout__left {
        display: contents !important;
    }
    .suidoufair-layout__left ul {
        order: 1;
        width: 100%;
    }
    .suidoufair-layout__right {
        order: 2;
        width: 100% !important;
        margin-top: 12px;
    }
    .suidoufair-layout__left img {
        order: 3;
        width: 60% !important;
        margin: 12px auto 0 !important;
    }
}

/* --- 青下の杜フェスティバル：スマホ時に縦一列・詳しくはこちらを一番下へ --- */
@media screen and (max-width: 768px) {
    .aoshitafes-layout {
        display: flex !important;
        flex-direction: column !important;
    }
    .aoshitafes-layout__left {
        display: contents !important;
    }
    .aoshitafes-layout__left ul {
        order: 1;
        width: 100%;
    }
    .aoshitafes-layout__right {
        order: 2;
        width: 100% !important;
        margin-top: 16px;
    }
    .aoshitafes-layout__left .section__chapter {
        order: 3;
        width: 100%;
        margin-top: 12px;
    }
}


/* --- コラム：スマホ時に画像を上・テキストを下に --- */
@media screen and (max-width: 768px) {
    .column-layout {
        display: flex !important;
        flex-direction: column !important;
    }
    .column-layout .figure {
        order: 1;
        width: 100%;
        margin: 0 0 12px;
    }
    .column-layout .text {
        order: 2;
        width: 100%;
    }
}


/* --- 交付金ページ：スマホ時に括弧を非表示・縦並びに --- */
@media screen and (max-width: 768px) {
    .kouhukin-period-layout {
        display: block !important;
    }
    .kouhukin-bracket {
        display: none !important;
    }
    .kouhukin-bracket-area {
        display: block !important;
        margin-top: 8px;
    }
}