/* ===============================
   Harada Osteopathic Clinic
   style.css
=============================== */

:root{

    --main:#243B5A;
    --accent:#C7A66A;
    --bg:#F7F3EC;
    --white:#ffffff;
    --text:#333333;

}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{

    scroll-behavior:smooth;

}

body{

    font-family:"Noto Sans JP",sans-serif;

    background:var(--bg);

    color:var(--text);

    line-height:1.8;

    overflow-x:hidden;

}

img{

    width:100%;

    display:block;

}

a{

    text-decoration:none;

    color:inherit;

}

ul{

    list-style:none;

}

.container{

    width:min(1100px,90%);

    margin:auto;

}

section{

    padding:100px 0;

}

/* ===============================
Section
=============================== */

.section-subtitle{

    color:var(--accent);

    letter-spacing:.2em;

    font-size:.9rem;

    margin-bottom:10px;

    text-transform:uppercase;

}

.section-title{

    font-family:"Noto Serif JP",serif;

    color:var(--main);

    font-size:2.4rem;

    line-height:1.5;

    margin-bottom:50px;

}

/* ===============================
Header
=============================== */

.header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:999;

    background:rgba(247,243,236,.95);

    backdrop-filter:blur(10px);

    border-bottom:1px solid rgba(0,0,0,.05);

}

.header-inner{

    height:90px;

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.logo{

    font-family:"Noto Serif JP",serif;

    font-size:1.3rem;

    color:var(--main);

    font-weight:bold;

}

.nav ul{

    display:flex;

    gap:35px;

}

.nav a{

    color:var(--main);

    transition:.3s;

    font-size:.95rem;

}

.nav a:hover{

    color:var(--accent);

}

.reserve-btn{

    background:#25D366;

    color:#fff;

    padding:13px 28px;

    border-radius:50px;

    transition:.3s;

}

.reserve-btn:hover{

    transform:translateY(-3px);

}

.hamburger{

    display:none;

}

/* ===============================
Hero
=============================== */

.hero{

    padding-top:180px;

    padding-bottom:120px;

}

.hero-inner{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}

.hero-copy-small{

    color:var(--accent);

    letter-spacing:.25em;

    margin-bottom:15px;

}

.hero h1{

    font-family:"Noto Serif JP",serif;

    color:var(--main);

    font-size:3.8rem;

    line-height:1.35;

    margin-bottom:30px;

}

.hero-description{

    font-size:1.05rem;

    margin-bottom:40px;

}

.hero-buttons{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

}

.btn{

    display:inline-block;

    padding:15px 38px;

    border-radius:50px;

    transition:.35s;

    font-weight:bold;

}

.btn:hover{

    transform:translateY(-4px);

}

.btn.line{

    background:#25D366;

    color:#fff;

}

.instagram-btn{
    display:inline-block;
    padding:12px 25px;
    border:2px solid var(--main);
    border-radius:50px;
    color:var(--main);
    font-weight:bold;
    text-decoration:none;
    transition:.3s;
}

.instagram-btn:hover{
    background:var(--main);
    color:#fff;
    transform:translateY(-3px);
}

btn.instagram{
    background:transparent;
    color:#fff;
    border:2px solid #fff;
}

.btn.instagram:hover{
    background:#fff;
    color:var(--main);
}

.btn.tel{

    background:var(--main);

    color:#fff;

}

.hero-image{

    aspect-ratio:4/5;

    border-radius:30px;

    background:#ddd;

    display:flex;

    justify-content:center;

    align-items:center;

    overflow:hidden;

}

.coming{

    text-align:center;

    color:#777;

}

.coming span{

    display:block;

    letter-spacing:.3em;

    margin-bottom:10px;

}

.coming strong{

    font-size:1.4rem;

}

/* ===============================
Problems
=============================== */

.problem-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:30px;

}

.problem-card{

    background:#fff;

    padding:35px;

    border-radius:20px;

    transition:.35s;

    box-shadow:0 10px 25px rgba(0,0,0,.05);

}

.problem-card:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 40px rgba(0,0,0,.12);

}

.problem-card h3{

    color:var(--main);

    margin-bottom:15px;

    font-family:"Noto Serif JP",serif;

}

/* ===============================
Reason
=============================== */

.reason-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

}

.reason-card{

    background:#fff;

    padding:40px 30px;

    border-radius:20px;

    box-shadow:0 10px 30px rgba(0,0,0,.05);

    transition:.35s;

}

.reason-card:hover{

    transform:translateY(-10px);

    box-shadow:0 20px 40px rgba(0,0,0,.12);

}

.reason-card span{

    display:inline-block;

    color:var(--accent);

    font-size:2rem;

    font-family:"Noto Serif JP",serif;

    margin-bottom:20px;

}

.reason-card h3{

    color:var(--main);

    margin-bottom:20px;

    line-height:1.6;

    font-family:"Noto Serif JP",serif;

}

/* ===============================
About
=============================== */

.about-inner{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}

.about-image{

    background:#ddd;

    aspect-ratio:4/5;

    border-radius:25px;

    display:flex;

    justify-content:center;

    align-items:center;

}

.about-text h3{

    font-size:2rem;

    color:var(--main);

    margin-bottom:20px;

    font-family:"Noto Serif JP",serif;

}

.about-text p{

    margin-bottom:35px;

}

.more-btn{

    display:inline-block;

    padding:15px 35px;

    border:2px solid var(--main);

    color:var(--main);

    border-radius:50px;

    transition:.35s;

    font-weight:bold;

}

.more-btn:hover{

    background:var(--main);

    color:#fff;

}

/* ===============================
Treatment
=============================== */

.treatment{

    background:#fff;

}

.treatment-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:30px;

}

.treatment-card{

    border-left:5px solid var(--accent);

    background:var(--bg);

    padding:35px;

    border-radius:18px;

    transition:.3s;

}

.treatment-card:hover{

    transform:translateY(-6px);

}

.treatment-card h3{

    color:var(--main);

    margin-bottom:15px;

    font-family:"Noto Serif JP",serif;

}

/* ===============================
Insole
=============================== */

.insole{

    background:var(--bg);

}

.insole-inner{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}

.insole-image{

    background:#ddd;

    aspect-ratio:4/5;

    border-radius:25px;

    display:flex;

    justify-content:center;

    align-items:center;

}

/* ===============================
Time
=============================== */

.time{

    background:#fff;

}

.time-table{

    width:100%;

    border-collapse:collapse;

    background:#fff;

    overflow:hidden;

    border-radius:20px;

    box-shadow:0 10px 30px rgba(0,0,0,.05);

}

.time-table th,
.time-table td{

    border:1px solid #eee;

    padding:18px;

    text-align:center;

}

.time-table th{

    background:var(--main);

    color:#fff;

}

.time-table td:first-child{

    font-weight:bold;

    background:#f9f9f9;

}

.note{

    margin-top:20px;

    color:#777;

}

/* ===============================
Access
=============================== */

.access-box{

    background:#fff;

    padding:50px;

    border-radius:25px;

    box-shadow:0 10px 30px rgba(0,0,0,.05);

}

.access-box h3{

    color:var(--main);

    font-family:"Noto Serif JP",serif;

    margin-bottom:20px;

}

.access-box p{

    margin-bottom:18px;

}

/* ===============================
CTA
=============================== */

.cta{

    background:var(--main);

    color:#fff;

    text-align:center;

}

.cta h2{

    font-family:"Noto Serif JP",serif;

    font-size:2.4rem;

    margin-bottom:40px;

    line-height:1.6;

}

.cta-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}

/* ===============================
Footer
=============================== */

.footer{

    background:#1c2d46;

    color:#fff;

    text-align:center;

    padding:60px 20px;

}

.footer h2{

    font-family:"Noto Serif JP",serif;

    margin-bottom:15px;

}

.footer p{

    margin-bottom:25px;

    opacity:.9;

}

.footer small{

    opacity:.6;

}

/* ===============================
Fade Animation
=============================== */

.fade{

    opacity:0;

    transform:translateY(40px);

    transition:all .8s ease;

}

.fade.show{

    opacity:1;

    transform:translateY(0);

}

/* ===============================
Responsive
=============================== */

@media (max-width:900px){

    section{
        padding:70px 0;
    }

    .header-inner{
        height:75px;
    }

    .nav{

        position:fixed;

        top:75px;

        right:-100%;

        width:280px;

        height:calc(100vh - 75px);

        background:#fff;

        transition:.35s;

        padding:40px 30px;

        box-shadow:-10px 0 30px rgba(0,0,0,.08);

    }

    .nav.active{
        right:0;
    }

    .nav ul{

        display:flex;

        flex-direction:column;

        gap:25px;

    }

    .reserve-btn{
        display:none;
    }

    .hamburger{

        display:flex;

        width:42px;

        height:42px;

        border:none;

        background:none;

        flex-direction:column;

        justify-content:center;

        gap:7px;

        cursor:pointer;

    }

    .hamburger span{

        width:30px;

        height:2px;

        background:var(--main);

        transition:.3s;

    }

    .hero-inner,
    .about-inner,
    .insole-inner{

        grid-template-columns:1fr;

        gap:40px;

    }

    .hero{

        padding-top:130px;

    }

    .hero h1{

        font-size:2.5rem;

    }

    .section-title{

        font-size:2rem;

    }

    .problem-grid,
    .treatment-grid,
    .reason-grid{

        grid-template-columns:1fr;

    }

    .time-table{

        font-size:.85rem;

    }

    .access-box{

        padding:35px;

    }

    .cta h2{

        font-size:1.8rem;

    }

}

@media (max-width:600px){

    .container{

        width:92%;

    }

    .hero-description{

        font-size:.95rem;

    }

    .btn,
    .more-btn{

        width:100%;

        text-align:center;

    }

    .hero-buttons,
    .cta-buttons{

        flex-direction:column;

    }

    .problem-card,
    .reason-card,
    .treatment-card{

        padding:25px;

    }

    .section-title{

        font-size:1.8rem;

    }

    .about-text h3{

        font-size:1.7rem;

    }

    .time-table th,
    .time-table td{

        padding:12px 6px;

    }

}

/* ===============================
Hover Effects
=============================== */

.logo,
.nav a,
.reserve-btn,
.btn,
.more-btn{

    transition:all .3s ease;

}

.logo:hover{

    opacity:.8;

}

.nav a:hover{

    color:var(--accent);

}

.btn:hover,
.reserve-btn:hover,
.more-btn:hover{

    transform:translateY(-3px);

}

/* ===============================
Utility
=============================== */

.hidden{

    display:none;

}

.text-center{

    text-align:center;

}
2026.07.07 火曜日
14:56 奥田ほのか 七夕
2026.07.09 木曜日
20:21 奥田ほのか お疲れ様です。
昨日お話しさせていただいた、備品購入の希望をリストにまとめたものを送らせていただきます。
ご検討の程、よろしくお願いいたします。
2026.07.10 金曜日
16:26 奥田ほのか ケーラー脂肪対
16:34 奥田ほのか 背屈制限の原因
底屈筋のタイトネス（腓腹筋、ヒラメ筋、長母趾屈筋、長趾伸筋、後脛骨筋）
前脛骨筋の筋発揮不足
距骨の後方滑り込み制限
アキレス腱周囲のタイトネス
16:36 奥田ほのか 長母趾屈筋
→母趾伸展させた状態から背屈で母趾伸展していない状態と比べる
→タイトネスあり：長母趾屈筋のTP

伸筋も同じ
2026.07.11 土曜日
17:34 奥田ほのか コンタクト後ろに下がらないところで止まって左右リアクション
2026.07.16 木曜日
12:21 奥田ほのか サークルダッシュ（ミラー）
腹筋
ボックスジャンプ
ラダー　シャッフル後　右側左側
ランジジャンプ
20秒15秒
2026.07.17 金曜日
22:39 奥田ほのか 【奥田穂乃香】2026年6月分請求書.zip
2026.07.18 土曜日
19:26 奥田ほのか 415
2026.07.20 月曜日
16:37 奥田ほのか https://photos.app.goo.gl/GC2cxviWHoHUkERJA
2026.07.22 水曜日
13:16 奥田ほのか アスリハ
身体評価
スポーツマッサージ
運動療法
救急処置
整形外科的テスト
2026.07.24 金曜日
13:24 奥田ほのか 24（金）16:30、17:30
27（月）16:30 17:00
28（火）16:30 20:30
29（水）17:30 18:00 20:00
2026.07.26 日曜日
16:19 奥田ほのか <!DOCTYPE html>

<html lang="ja">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>原田整骨院・鍼灸院</title>

</head>

<body>

  <h1>奥田スポーツ接骨院</h1>

  <p>スポーツ障害・ケガのサポートを中心に、

  地域の皆さまの健康をサポートします。</p>

  <h2>対応するお悩み</h2>

  <ul>

    <li>腰痛</li>

    <li>肩の痛み</li>

    <li>足関節捻挫</li>

    <li>オスグッド</li>

    <li>スポーツ障害</li>

  </ul>

  <h2>お問い合わせ</h2>

  <p>電話：000-0000-0
16:25 奥田ほのか https://okudahonoka.github.io/seikotuin/
2026.07.27 月曜日
09:10 奥田ほのか <!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>原田整骨院・鍼灸院 | スポーツ障害・腰痛・肩こり</title>

    <meta name="description" content="スポーツ障害から慢性的な痛みまで。原田整骨院・鍼灸院では、一人ひとりに合わせた根本改善を目指す施術をご提供します。">

    <link rel="stylesheet" href="style.css">
</head>

<body>

<header>
    <div class="container">

        <h1>原田整骨院・鍼灸院</h1>

        <nav>
            <ul>
                <li><a href="#">ホーム</a></li>
                <li><a href="#">当院について</a></li>
                <li><a href="#">施術内容</a></li>
                <li><a href="#">院長紹介</a></li>
                <li><a href="#">アクセス</a></li>
            </ul>
        </nav>

    </div>
</header>

<section class="hero">

    <div class="hero-text">

        <p class="sub-title">
            ケガで夢を断念する人をなくす
        </p>

        <h2>
            スポーツ外傷から<br>
            慢性的な痛みまで。
        </h2>

        <p class="lead">
            一人ひとりに合わせた施術で<br>
            根本改善を目指します。
        </p>

        <div class="button-area">

            <a href="#" class="btn line">
                LINEで予約
            </a>

            <a href="tel:0000000000" class="btn tel">
                電話する
            </a>

        </div>

    </div>

    <div class="hero-image">

        <div class="image-placeholder">

            写真準備中

        </div>

    </div>

</section>

<section>

<h2>このようなお悩みはありませんか？</h2>

<ul>

<li>スポーツ障害</li>
<li>腰痛</li>
<li>肩の痛み</li>
<li>首の痛み</li>
<li>足関節捻挫</li>
<li>オスグッド</li>
<li>肉離れ</li>
<li>姿勢のゆがみ</li>

</ul>

</section>

<section>

<h2>院長メッセージ</h2>

<h3>ケガで夢を断念する人をなくす。</h3>

<p>

私は高校時代、甲子園出場を目指して野球に打ち込み、
多くのケガを経験しました。

その経験から柔道整復師・鍼灸師となり、
接骨院院長やスポーツトレーナーとして
数多くの患者様・アスリートをサポートしてきました。

当院では一時的な痛みの緩和だけではなく、
原因を見極め、根本改善を目指した施術をご提供します。

</p>

</section>

<section>

<h2>診療時間</h2>

<p>

9:00〜22:00（完全予約制）

</p>

</section>

<footer>

<p>

© 原田整骨院・鍼灸院

</p>

</footer>

<script src="script.js"></script>

</body>
</html>
09:38 奥田ほのか /* ===== Google Fonts ===== */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&family=Noto+Serif+JP:wght@500;700&display=swap');

:root{
    --bg:#F7F3EC;
    --navy:#243B5A;
    --gold:#C8A96A;
    --white:#ffffff;
    --line:#06C755;
    --text:#555;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Noto Sans JP',sans-serif;
    background:var(--bg);
    color:var(--text);
    line-height:1.8;
}

.container{
    width:min(1100px,90%);
    margin:auto;
}

/* ---------- Header ---------- */

header{
    position:sticky;
    top:0;
    background:rgba(247,243,236,.92);
    backdrop-filter:blur(12px);
    border-bottom:1px solid rgba(0,0,0,.05);
    z-index:1000;
}

header .container{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:20px 0;
}

header h1{
    color:var(--navy);
    font-family:'Noto Serif JP',serif;
    font-size:28px;
}

nav ul{
    display:flex;
    gap:30px;
    list-style:none;
}

nav a{
    text-decoration:none;
    color:var(--navy);
    font-weight:600;
    transition:.3s;
}

nav a:hover{
    color:var(--gold);
}

/* ---------- Hero ---------- */

.hero{
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    gap:60px;
    padding:100px 8%;
}

.sub-title{
    color:var(--gold);
    font-weight:bold;
    letter-spacing:2px;
    margin-bottom:20px;
}

.hero h2{
    font-size:54px;
    line-height:1.3;
    color:var(--navy);
    font-family:'Noto Serif JP',serif;
    margin-bottom:25px;
}

.lead{
    font-size:18px;
    margin-bottom:40px;
}

.button-area{
    display:flex;
    gap:20px;
    flex-wrap:wrap;
}

.btn{
    display:inline-block;
    padding:16px 36px;
    border-radius:50px;
    text-decoration:none;
    font-weight:bold;
    transition:.3s;
}

.btn.line{
    background:var(--line);
    color:#fff;
}

.btn.tel{
    background:var(--navy);
    color:#fff;
}

.btn:hover{
    transform:translateY(-3px);
    box-shadow:0 12px 30px rgba(0,0,0,.15);
}

.image-placeholder{
    height:520px;
    border-radius:30px;
    background:#e7dfd2;
    display:flex;
    justify-content:center;
    align-items:center;
    color:var(--navy);
    font-size:22px;
    font-weight:bold;
}

/* ---------- Section ---------- */

section{
    padding:90px 8%;
}

section h2{
    color:var(--navy);
    font-size:36px;
    font-family:'Noto Serif JP',serif;
    margin-bottom:35px;
}

section ul{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:18px;
    list-style:none;
}

section li{
    background:#fff;
    padding:24px;
    border-radius:18px;
    box-shadow:0 10px 25px rgba(0,0,0,.06);
}

/* ---------- Footer ---------- */

footer{
    background:var(--navy);
    color:#fff;
    text-align:center;
    padding:35px;
}

/* ---------- Responsive ---------- */

@media(max-width:900px){

.hero{
grid-template-columns:1fr;
text-align:center;
}

nav{
display:none;
}

.hero h2{
font-size:38px;
}

.button-area{
justify-content:center;
}

.image-placeholder{
height:300px;
}

}
12:09 奥田ほのか https://youtu.be/EIhqhlUgwLI?si=lXAwJMpZZUDRVkdK
12:10 奥田ほのか https://youtu.be/A_9jmEAjHQM?si=v0rAvtOOa3PCB-cD
12:11 奥田ほのか https://youtu.be/SWFkmvtr1WA?si=xOKcpfCeTRbE34NG
13:07 奥田ほのか 画像
13:07 奥田ほのか 画像
13:07 奥田ほのか 画像
13:08 奥田ほのか 画像
13:08 奥田ほのか 画像
15:46 奥田ほのか <!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>原田整骨院・鍼灸院｜文京区湯島</title>

    <meta name="description"
        content="文京区湯島の原田整骨院・鍼灸院。スポーツによるケガから肩こり・腰痛・姿勢改善まで、一人ひとりに合わせた施術をご提供します。">

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&family=Noto+Serif+JP:wght@500;700&display=swap"
        rel="stylesheet">

    <link rel="stylesheet" href="css/style.css">
</head>

<body>

    <!-- ==========================
        Header
    =========================== -->

    <header class="header">

        <div class="container header-inner">

            <a href="#" class="logo">
                <span>原田整骨院・鍼灸院</span>
            </a>

            <nav class="nav">

                <ul>

                    <li><a href="#">HOME</a></li>

                    <li><a href="#about">院長紹介</a></li>

                    <li><a href="#treatment">施術内容</a></li>

                    <li><a href="#insole">インソール</a></li>

                    <li><a href="#access">アクセス</a></li>

                </ul>

            </nav>

            <a href="#" class="reserve-btn">
                LINE予約
            </a>

            <button class="hamburger">

                <span></span>
                <span></span>
                <span></span>

            </button>

        </div>

    </header>





    <!-- ==========================
        Hero
    =========================== -->

    <section class="hero">

        <div class="container hero-inner">

            <div class="hero-text">

                <p class="hero-copy-small">
                    SPORTS × MEDICAL
                </p>

                <h1>

                    ケガで夢を<br>
                    断念する人をなくす。

                </h1>

                <p class="hero-description">

                    スポーツによるケガから、<br>
                    日常生活のお身体の不調まで。

                    <br><br>

                    一人ひとりの想いに寄り添い、
                    根本改善を目指す
                    整骨院・鍼灸院です。

                </p>

                <div class="hero-buttons">

                    <a href="#" class="btn line">

                        LINE予約

                    </a>

                    <a href="#" class="btn tel">

                        電話する

                    </a>

                </div>

            </div>

            <div class="hero-image">

                <div class="coming">

                    <span>PHOTO</span>

                    <strong>COMING SOON</strong>

                </div>

            </div>

        </div>

    </section>





    <!-- ==========================
        Problems
    =========================== -->

    <section class="problems fade">

        <div class="container">

            <p class="section-subtitle">

                TROUBLE

            </p>

            <h2 class="section-title">

                このようなお悩みは<br>
                ありませんか？

            </h2>

            <div class="problem-grid">

                <div class="problem-card">

                    <h3>スポーツでケガをした</h3>

                    <p>
                        捻挫・肉離れ・打撲・骨折後のリハビリなど、
                        競技復帰までサポートします。
                    </p>

                </div>

                <div class="problem-card">

                    <h3>肩こり・腰痛がつらい</h3>

                    <p>
                        慢性的な痛みの原因を見つけ、
                        根本改善を目指します。
                    </p>

                </div>

                <div class="problem-card">

                    <h3>姿勢を改善したい</h3>

                    <p>

                        猫背や身体のバランスを整え、
                        再発しにくい身体づくりを行います。

                    </p>

                </div>

                <div class="problem-card">

                    <h3>パフォーマンスを上げたい</h3>

                    <p>

                        身体の使い方や足元から見直し、
                        ケガをしにくい身体へ導きます。

                    </p>

                </div>

            </div>

        </div>

    </section>






    <!-- ==========================
        Reason
    =========================== -->

    <section class="reason fade">

        <div class="container">

            <p class="section-subtitle">

                REASON

            </p>

            <h2 class="section-title">

                原田整骨院・鍼灸院が<br>
                選ばれる理由

            </h2>

            <div class="reason-grid">

                <article class="reason-card">

                    <span>01</span>

                    <h3>

                        スポーツ現場で培った<br>
                        豊富な経験

                    </h3>

                    <p>

                        多くの選手を支えてきた経験をもとに、
                        一人ひとりに最適な施術をご提案します。

                    </p>

                </article>

                <article class="reason-card">

                    <span>02</span>

                    <h3>

                        ケガを経験したからこそ<br>
                        寄り添える施術

                    </h3>

                    <p>

                        不安や焦りにも寄り添い、
                        心身ともにサポートします。

                    </p>

                </article>

                <article class="reason-card">

                    <span>03</span>

                    <h3>

                        根本改善を目指す<br>
                        オーダーメイド施術

                    </h3>

                    <p>

                        痛みだけではなく、
                        原因までしっかり評価して施術します。

                    </p>

                </article>

                <article class="reason-card">

                    <span>04</span>

                    <h3>

                        柔道整復師・鍼灸師の<br>
                        ダブルライセンス

                    </h3>

                    <p>

                        幅広い症状に対応できる知識と技術で、
                        最適な施術をご提供します。

                    </p>

                </article>

                <article class="reason-card">

                    <span>05</span>

                    <h3>

                        姿勢分析・<br>
                        インソールサポート

                    </h3>

                    <p>

                        足元から身体全体を見直し、
                        再発予防・パフォーマンス向上を目指します。

                    </p>

                </article>

                <article class="reason-card">

                    <span>06</span>

                    <h3>

                        完全予約制で<br>
                        待ち時間を最小限に

                    </h3>

                    <p>

                        お一人おひとりとしっかり向き合うため、
                        ゆとりのある予約制を採用しています。

                    </p>

                </article>

            </div>

        </div>

    </section>
15:49 奥田ほのか     <!-- ==========================
        About
    =========================== -->

    <section class="about fade" id="about">

        <div class="container about-inner">

            <div class="about-image">

                <div class="coming">

                    <span>DIRECTOR</span>

                    <strong>COMING SOON</strong>

                </div>

            </div>

            <div class="about-text">

                <p class="section-subtitle">
                    DIRECTOR
                </p>

                <h2 class="section-title">
                    院長紹介
                </h2>

                <h3>
                    原田 健太郎
                </h3>

                <p>
                    「ケガで夢を断念する人をなくす。」
                    この想いを胸に、スポーツ現場や臨床経験で培った知識と技術を活かし、
                    一人ひとりに寄り添った施術をご提供します。
                </p>

                <a href="about.html" class="more-btn">
                    詳しく見る
                </a>

            </div>

        </div>

    </section>



    <!-- ==========================
        Treatment
    =========================== -->

    <section class="treatment fade" id="treatment">

        <div class="container">

            <p class="section-subtitle">
                TREATMENT
            </p>

            <h2 class="section-title">
                施術内容
            </h2>

            <div class="treatment-grid">

                <div class="treatment-card">
                    <h3>保険診療</h3>
                    <p>捻挫・打撲・肉離れなど急性外傷に対応します。</p>
                </div>

                <div class="treatment-card">
                    <h3>自費施術</h3>
                    <p>肩こり・腰痛・慢性的な不調の根本改善を目指します。</p>
                </div>

                <div class="treatment-card">
                    <h3>鍼灸施術</h3>
                    <p>身体の自然治癒力を高め、症状改善をサポートします。</p>
                </div>

                <div class="treatment-card">
                    <h3>姿勢・骨格調整</h3>
                    <p>姿勢や身体のバランスを整え、再発予防を目指します。</p>
                </div>

            </div>

        </div>

    </section>



    <!-- ==========================
        Insole
    =========================== -->

    <section class="insole fade" id="insole">

        <div class="container insole-inner">

            <div class="insole-text">

                <p class="section-subtitle">
                    INSOLE
                </p>

                <h2 class="section-title">
                    インソールサポート
                </h2>

                <p>

                    足元から身体を整えることで、
                    ケガの予防・再発防止・競技力向上を目指します。

                    <br><br>

                    スポーツ選手から日常生活で足のお悩みを抱える方まで
                    幅広く対応しています。

                </p>

                <a href="insole.html" class="more-btn">
                    詳しく見る
                </a>

            </div>

            <div class="insole-image">

                <div class="coming">

                    <span>INSOLE</span>

                    <strong>COMING SOON</strong>

                </div>

            </div>

        </div>

    </section>



    <!-- ==========================
        Time
    =========================== -->

    <section class="time fade">

        <div class="container">

            <p class="section-subtitle">
                INFORMATION
            </p>

            <h2 class="section-title">
                診療時間
            </h2>

            <table class="time-table">

                <tr>
                    <th></th>
                    <th>月</th>
                    <th>火</th>
                    <th>水</th>
                    <th>木</th>
                    <th>金</th>
                    <th>土</th>
                </tr>

                <tr>
                    <td>9:00〜13:00</td>
                    <td>●</td>
                    <td>●</td>
                    <td>●</td>
                    <td>●</td>
                    <td>●</td>
                    <td>●</td>
                </tr>

                <tr>
                    <td>14:00〜22:00</td>
                    <td>●</td>
                    <td>●</td>
                    <td>－</td>
                    <td>●</td>
                    <td>●</td>
                    <td>●</td>
                </tr>

            </table>

            <p class="note">
                日曜・祝日休診
            </p>

        </div>

    </section>



    <!-- ==========================
        Access
    =========================== -->

    <section class="access fade" id="access">

        <div class="container">

            <p class="section-subtitle">
                ACCESS
            </p>

            <h2 class="section-title">
                アクセス
            </h2>

            <div class="access-box">

                <h3>
                    原田整骨院・鍼灸院
                </h3>

                <p>
                    〒113-0034
                    <br>
                    東京都文京区湯島2丁目28-11
                    ガーデンコート湯島101号室
                </p>

                <p>

                    東京メトロ千代田線
                    「湯島駅」徒歩7分

                    <br>

                    本郷三丁目駅 徒歩10分

                </p>

            </div>

        </div>

    </section>



    <!-- ==========================
        CTA
    =========================== -->

    <section class="cta">

        <div class="container">

            <h2>

                お身体のお悩みは<br>
                お気軽にご相談ください

            </h2>

            <div class="cta-buttons">

                <a href="#" class="btn line">
                    LINE予約
                </a>

                <a href="#" class="btn tel">
                    電話する
                </a>

            </div>

        </div>

    </section>



    <!-- ==========================
        Footer
    =========================== -->

    <footer class="footer">

        <div class="container">

            <h2>

                原田整骨院・鍼灸院

            </h2>

            <p>

                ケガで夢を断念する人をなくす。

            </p>

            <small>

                © 2026 Harada Osteopathic Clinic.

            </small>

        </div>

    </footer>

    <script src="js/script.js"></script>

</body>

</html>
16:06 奥田ほのか /* ===============================
   Harada Osteopathic Clinic
   style.css
=============================== */

:root{

    --main:#243B5A;
    --accent:#C7A66A;
    --bg:#F7F3EC;
    --white:#ffffff;
    --text:#333333;

}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{

    scroll-behavior:smooth;

}

body{

    font-family:"Noto Sans JP",sans-serif;

    background:var(--bg);

    color:var(--text);

    line-height:1.8;

    overflow-x:hidden;

}

img{

    width:100%;

    display:block;

}

a{

    text-decoration:none;

    color:inherit;

}

ul{

    list-style:none;

}

.container{

    width:min(1100px,90%);

    margin:auto;

}

section{

    padding:100px 0;

}

/* ===============================
Section
=============================== */

.section-subtitle{

    color:var(--accent);

    letter-spacing:.2em;

    font-size:.9rem;

    margin-bottom:10px;

    text-transform:uppercase;

}

.section-title{

    font-family:"Noto Serif JP",serif;

    color:var(--main);

    font-size:2.4rem;

    line-height:1.5;

    margin-bottom:50px;

}

/* ===============================
Header
=============================== */

.header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:999;

    background:rgba(247,243,236,.95);

    backdrop-filter:blur(10px);

    border-bottom:1px solid rgba(0,0,0,.05);

}

.header-inner{

    height:90px;

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.logo{

    font-family:"Noto Serif JP",serif;

    font-size:1.3rem;

    color:var(--main);

    font-weight:bold;

}

.nav ul{

    display:flex;

    gap:35px;

}

.nav a{

    color:var(--main);

    transition:.3s;

    font-size:.95rem;

}

.nav a:hover{

    color:var(--accent);

}

.reserve-btn{

    background:#25D366;

    color:#fff;

    padding:13px 28px;

    border-radius:50px;

    transition:.3s;

}

.reserve-btn:hover{

    transform:translateY(-3px);

}

.hamburger{

    display:none;

}

/* ===============================
Hero
=============================== */

.hero{

    padding-top:180px;

    padding-bottom:120px;

}

.hero-inner{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}

.hero-copy-small{

    color:var(--accent);

    letter-spacing:.25em;

    margin-bottom:15px;

}

.hero h1{

    font-family:"Noto Serif JP",serif;

    color:var(--main);

    font-size:3.8rem;

    line-height:1.35;

    margin-bottom:30px;

}

.hero-description{

    font-size:1.05rem;

    margin-bottom:40px;

}

.hero-buttons{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

}

.btn{

    display:inline-block;

    padding:15px 38px;

    border:2px solid #fff;

    background:transparent;

    color:#fff;

    border-radius:50px;

    font-weight:600;

    transition:.3s;

    text-align:center;

}

.btn:hover{

    background:#fff;

    color:var(--main);

    transform:translateY(-4px);

}

.hero-image{

    aspect-ratio:4/5;

    border-radius:30px;

    background:#ddd;

    display:flex;

    justify-content:center;

    align-items:center;

    overflow:hidden;

}

.coming{

    text-align:center;

    color:#777;

}

.coming span{

    display:block;

    letter-spacing:.3em;

    margin-bottom:10px;

}

.coming strong{

    font-size:1.4rem;

}
16:07 奥田ほのか /* ===============================
Problems
=============================== */

.problem-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:30px;

}

.problem-card{

    background:#fff;

    padding:35px;

    border-radius:20px;

    transition:.35s;

    box-shadow:0 10px 25px rgba(0,0,0,.05);

}

.problem-card:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 40px rgba(0,0,0,.12);

}

.problem-card h3{

    color:var(--main);

    margin-bottom:15px;

    font-family:"Noto Serif JP",serif;

}

/* ===============================
Reason
=============================== */

.reason-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

}

.reason-card{

    background:#fff;

    padding:40px 30px;

    border-radius:20px;

    box-shadow:0 10px 30px rgba(0,0,0,.05);

    transition:.35s;

}

.reason-card:hover{

    transform:translateY(-10px);

    box-shadow:0 20px 40px rgba(0,0,0,.12);

}

.reason-card span{

    display:inline-block;

    color:var(--accent);

    font-size:2rem;

    font-family:"Noto Serif JP",serif;

    margin-bottom:20px;

}

.reason-card h3{

    color:var(--main);

    margin-bottom:20px;

    line-height:1.6;

    font-family:"Noto Serif JP",serif;

}

/* ===============================
About
=============================== */

.about-inner{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}

.about-image{

    background:#ddd;

    aspect-ratio:4/5;

    border-radius:25px;

    display:flex;

    justify-content:center;

    align-items:center;

}

.about-text h3{

    font-size:2rem;

    color:var(--main);

    margin-bottom:20px;

    font-family:"Noto Serif JP",serif;

}

.about-text p{

    margin-bottom:35px;

}

.more-btn{

    display:inline-block;

    padding:15px 35px;

    border:2px solid var(--main);

    color:var(--main);

    border-radius:50px;

    transition:.35s;

    font-weight:bold;

}

.more-btn:hover{

    background:var(--main);

    color:#fff;

}

/* ===============================
Treatment
=============================== */

.treatment{

    background:#fff;

}

.treatment-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:30px;

}

.treatment-card{

    border-left:5px solid var(--accent);

    background:var(--bg);

    padding:35px;

    border-radius:18px;

    transition:.3s;

}

.treatment-card:hover{

    transform:translateY(-6px);

}

.treatment-card h3{

    color:var(--main);

    margin-bottom:15px;

    font-family:"Noto Serif JP",serif;

}
16:08 奥田ほのか /* ===============================
Insole
=============================== */

.insole{

    background:var(--bg);

}

.insole-inner{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}

.insole-image{

    background:#ddd;

    aspect-ratio:4/5;

    border-radius:25px;

    display:flex;

    justify-content:center;

    align-items:center;

}

/* ===============================
Time
=============================== */

.time{

    background:#fff;

}

.time-table{

    width:100%;

    border-collapse:collapse;

    background:#fff;

    overflow:hidden;

    border-radius:20px;

    box-shadow:0 10px 30px rgba(0,0,0,.05);

}

.time-table th,
.time-table td{

    border:1px solid #eee;

    padding:18px;

    text-align:center;

}

.time-table th{

    background:var(--main);

    color:#fff;

}

.time-table td:first-child{

    font-weight:bold;

    background:#f9f9f9;

}

.note{

    margin-top:20px;

    color:#777;

}

/* ===============================
Access
=============================== */

.access-box{

    background:#fff;

    padding:50px;

    border-radius:25px;

    box-shadow:0 10px 30px rgba(0,0,0,.05);

}

.access-box h3{

    color:var(--main);

    font-family:"Noto Serif JP",serif;

    margin-bottom:20px;

}

.access-box p{

    margin-bottom:18px;

}

/* ===============================
CTA
=============================== */

.cta{

    background:var(--main);

    color:#fff;

    text-align:center;

}

.cta h2{

    font-family:"Noto Serif JP",serif;

    font-size:2.4rem;

    margin-bottom:40px;

    line-height:1.6;

}

.cta-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}

/* ===============================
Footer
=============================== */

.footer{

    background:#1c2d46;

    color:#fff;

    text-align:center;

    padding:60px 20px;

}

.footer h2{

    font-family:"Noto Serif JP",serif;

    margin-bottom:15px;

}

.footer p{

    margin-bottom:25px;

    opacity:.9;

}

.footer small{

    opacity:.6;

}

/* ===============================
Fade Animation
=============================== */

.fade{

    opacity:0;

    transform:translateY(40px);

    transition:all .8s ease;

}

.fade.show{

    opacity:1;

    transform:translateY(0);

}
16:09 奥田ほのか /* ===============================
Responsive
=============================== */

@media (max-width:900px){

    section{
        padding:70px 0;
    }

    .header-inner{
        height:75px;
    }

    .nav{

        position:fixed;

        top:75px;

        right:-100%;

        width:280px;

        height:calc(100vh - 75px);

        background:#fff;

        transition:.35s;

        padding:40px 30px;

        box-shadow:-10px 0 30px rgba(0,0,0,.08);

    }

    .nav.active{
        right:0;
    }

    .nav ul{

        display:flex;

        flex-direction:column;

        gap:25px;

    }

    .reserve-btn{
        display:none;
    }

    .hamburger{

        display:flex;

        width:42px;

        height:42px;

        border:none;

        background:none;

        flex-direction:column;

        justify-content:center;

        gap:7px;

        cursor:pointer;

    }

    .hamburger span{

        width:30px;

        height:2px;

        background:var(--main);

        transition:.3s;

    }

    .hero-inner,
    .about-inner,
    .insole-inner{

        grid-template-columns:1fr;

        gap:40px;

    }

    .hero{

        padding-top:130px;

    }

    .hero h1{

        font-size:2.5rem;

    }

    .section-title{

        font-size:2rem;

    }

    .problem-grid,
    .treatment-grid,
    .reason-grid{

        grid-template-columns:1fr;

    }

    .time-table{

        font-size:.85rem;

    }

    .access-box{

        padding:35px;

    }

    .cta h2{

        font-size:1.8rem;

    }

}

@media (max-width:600px){

    .container{

        width:92%;

    }

    .hero-description{

        font-size:.95rem;

    }

    .btn,
    .more-btn{

        width:100%;

        text-align:center;

    }

    .hero-buttons,
    .cta-buttons{

        flex-direction:column;

    }

    .problem-card,
    .reason-card,
    .treatment-card{

        padding:25px;

    }

    .section-title{

        font-size:1.8rem;

    }

    .about-text h3{

        font-size:1.7rem;

    }

    .time-table th,
    .time-table td{

        padding:12px 6px;

    }

}

/* ===============================
Hover Effects
=============================== */

.logo,
.nav a,
.reserve-btn,
.btn,
.more-btn{

    transition:all .3s ease;

}

.logo:hover{

    opacity:.8;

}

.nav a:hover{

    color:var(--accent);

}

.btn:hover,
.reserve-btn:hover,
.more-btn:hover{

    transform:translateY(-3px);

}

/* ===============================
Utility
=============================== */

.hidden{

    display:none;

}

.text-center{

    text-align:center;

}

/* ===============================
Google Map
=============================== */

.map{

    margin-top:40px;

    border-radius:20px;

    overflow:hidden;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

}

.map iframe{

    display:block;

    width:100%;

    height:400px;

    border:0;

}

/* ===============================
Map Button
=============================== */

.map-btn{

    display:block;

    width:300px;

    margin:35px auto 0;

    padding:16px 30px;

    background:var(--main);

    color:#fff;

    text-align:center;

    border-radius:50px;

    font-weight:600;

    letter-spacing:.05em;

    transition:.3s;

    box-shadow:0 10px 25px rgba(36,59,90,.15);

}

.map-btn:hover{

    background:var(--accent);

    transform:translateY(-3px);

    box-shadow:0 15px 35px rgba(36,59,90,.2);

}

/* ===================================
   Smartphone
=================================== */

@media (max-width: 900px){

    section{
        padding:70px 0;
    }

    .container{
        width:92%;
    }

    .header-inner{
        height:75px;
    }

    .nav{
        position:fixed;
        top:75px;
        right:-100%;
        width:280px;
        height:calc(100vh - 75px);
        background:#fff;
        transition:.35s;
        padding:40px 30px;
        box-shadow:-10px 0 30px rgba(0,0,0,.08);
    }

    .nav.active{
        right:0;
    }

    .nav ul{
        display:flex;
        flex-direction:column;
        gap:25px;
    }

    .reserve-btn{
        display:none;
    }

    .hamburger{
        display:flex;
        width:42px;
        height:42px;
        border:none;
        background:none;
        flex-direction:column;
        justify-content:center;
        gap:7px;
        cursor:pointer;
    }

    .hamburger span{
        width:30px;
        height:2px;
        background:var(--main);
    }

    /* ヒーロー */
    .hero{
        padding-top:120px;
        padding-bottom:80px;
    }

    .hero-inner{
        display:grid;
        grid-template-columns:1fr;
        gap:40px;
    }

    .hero h1{
        font-size:2.5rem;
        line-height:1.45;
        word-break:normal;
        overflow-wrap:normal;
    }

    .hero-description{
        font-size:.95rem;
    }

    /* グリッドを1列にする */
    .problem-grid,
    .reason-grid,
    .treatment-grid{
        grid-template-columns:1fr;
    }

    /* 院長・インソール */
    .about-inner,
    .insole-inner{
        grid-template-columns:1fr;
        gap:40px;
    }

    .section-title{
        font-size:2rem;
    }

    .about-text h3{
        font-size:1.7rem;
    }

    /* 診療時間 */
    .time-table{
        font-size:.85rem;
        width:100%;
    }

    .time-table th,
    .time-table td{
        padding:12px 5px;
    }

    /* アクセス */
    .access-box{
        padding:30px 20px;
    }

    .map iframe{
        height:300px;
    }

    /* Googleマップボタン */
    .map-btn{
        width:100%;
        max-width:300px;
        margin:30px auto 0;
    }

    /* CTA */
    .cta h2{
        font-size:1.8rem;
    }

    .hero-buttons,
    .cta-buttons{
        flex-direction:column;
    }

    .btn,
    .more-btn{
        width:100%;
        text-align:center;
    }

}


/* ===================================
   Small Smartphone
=================================== */

@media (max-width:600px){

    .container{
        width:92%;
    }

    .hero h1{
        font-size:2.3rem;
        line-height:1.5;
    }

    .hero-description{
        font-size:.95rem;
    }

    .section-title{
        font-size:1.8rem;
    }

    .problem-card,
    .reason-card,
    .treatment-card{
        padding:25px;
    }

    .time-table{
        font-size:.75rem;
    }

    .time-table th,
    .time-table td{
        padding:10px 3px;
    }

}

.logo img{
    width:180px;
    height:auto;
}

/* ヘッダーロゴ */

.header .logo img {
    width: 330px;
    max-width: 100%;
    height: auto;
    display: block;
}

/* スマホ */
@media (max-width: 600px) {

    .header .logo img {
        width: 250px;
    }

}

.btn.instagram:hover{
    background:#fff;
    color:var(--main);
}

/* ==========================
   インソールページ
=========================== */

.insole-hero{
    padding:100px 20px 80px;
    text-align:center;
    background:#F7F3EC;
}

.insole-hero h1{
    font-size:42px;
    color:#243B5A;
    margin:15px 0;
}

.insole-catch{
    font-size:20px;
    color:#243B5A;
}

.insole-hero-image{
    max-width:1000px;
    height:420px;
    margin:50px auto 0;
    background:#e8e1d7;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#8b8175;
}

.insole-section{
    padding:100px 20px;
}

.insole-section-beige{
    background:#F7F3EC;
}

.narrow{
    max-width:800px;
}

.insole-section h2{
    font-size:32px;
    color:#243B5A;
    margin-bottom:45px;
}

.section-label{
    color:#C7A66A;
    letter-spacing:.18em;
    font-size:13px;
    font-weight:bold;
}

.insole-trouble-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:20px;
}

.insole-card{
    padding:30px;
    background:#fff;
    border:1px solid #e5ded3;
}

.insole-card h3{
    color:#243B5A;
}

.insole-lead{
    font-size:24px;
    font-weight:bold;
    color:#243B5A;
    margin-bottom:25px;
}

.insole-points{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:25px;
}

.insole-point{
    padding:35px;
    border-top:2px solid #C7A66A;
    background:#fff;
}

.insole-point span,
.insole-flow span{
    color:#C7A66A;
    font-size:14px;
    letter-spacing:.1em;
}

.insole-point h3,
.insole-flow h3{
    color:#243B5A;
    margin:10px 0;
}

.insole-flow{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
}

.insole-flow > div{
    background:#fff;
    padding:30px 20px;
}

.price-box{
    text-align:center;
    padding:50px 20px;
    border:1px solid #ddd3c6;
    background:#fff;
}

.price-box h3{
    color:#243B5A;
}

.price{
    font-size:38px;
    font-weight:bold;
    color:#243B5A;
}

.faq-item{
    padding:25px 0;
    border-bottom:1px solid #ddd3c6;
}

.faq-item h3{
    color:#243B5A;
}

.cta-buttons{
    display:flex;
    justify-content:center;
    gap:15px;
    margin-top:30px;
}

.cta-btn{
    display:inline-block;
    padding:15px 35px;
    border:1px solid #fff;
    color:#fff;
    text-decoration:none;
}

@media(max-width:600px){

    .insole-hero{
        padding:70px 20px 60px;
    }

    .insole-hero h1{
        font-size:32px;
    }

    .insole-hero-image{
        height:260px;
    }

    .insole-section{
        padding:70px 20px;
    }

    .insole-section h2{
        font-size:26px;
    }

    .insole-trouble-grid,
    .insole-points{
        grid-template-columns:1fr;
    }

    .insole-flow{
        grid-template-columns:1fr;
    }

    .cta-buttons{
        flex-direction:column;
    }

    .cta-btn{
        text-align:center;
    }

}

/* ==========================
   ヘッダー調整
=========================== */

.header{
    min-height:90px;
}

.header-inner{
    min-height:90px;
}

.header .logo{
    display:flex;
    align-items:center;
}

.header .logo img{
    width:220px !important;
    max-width:220px !important;
    height:auto !important;
    display:block;
}

/* インソールページのタイトル */
.insole-hero{
    padding-top:90px;
}


/* スマホ */
@media(max-width:600px){

    .header{
        min-height:75px;
    }

    .header-inner{
        min-height:75px;
    }

    .header .logo img{
        width:190px !important;
        max-width:190px !important;
    }

    .insole-hero{
        padding-top:60px;
    }

}

 .insole-hero .cta-btn{
    margin-top:30px;
}