/*
Theme Name: 細川辰夫 税理士事務所テーマ
Author: Your Name
Version: 1.0
*/

/* 基本設定 */

/* アンカーリンクの着地位置をヘッダーの高さ分だけ下げる */
html {
    scroll-padding-top: 100px; /* ヘッダーの高さ（px）に合わせて数値を調整 */
    scroll-behavior: smooth;    /* スクロールをなめらかにする */
}
body {
    margin: 0;
    /* 游ゴシックを優先した指定 */
    font-family: 
        "Yu Gothic Medium", 
        "Yu Gothic", 
        "YuGothic", 
        "Hiragino Kaku Gothic ProN", 
        "Hiragino Kaku Gothic Pro", 
        "Meiryo", 
        sans-serif;
    /*font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;*/
    color: #333;
    line-height: 1.8; /* 游ゴシックは少し行間を広め（1.8〜2.0）にするとより読みやすくなります */
    -webkit-font-smoothing: antialiased; /* 文字の境界を滑らかにする設定 */
}

/* Windowsでの「かすれ」対策：中太（Medium）を指定 */
@font-face {
    font-family: "Yu Gothic";
    src: local("Yu Gothic Medium");
    font-weight: 400;
}

.container {
    max-width: 1020px;   /* 指定の幅 */
    margin-left: auto;   /* 左側の余白を自動調整（中央寄せ） */
    margin-right: auto;  /* 右側の余白を自動調整（中央寄せ） */
    padding-left: 20px;  /* スマホ表示時に左右がくっつかないための遊び */
    padding-right: 20px; /* 同上 */
    width: 100%;         /* 幅が1020px以下の画面では100%にする */
    box-sizing: border-box; /* パディングを含めた幅で計算 */
}

.section {
    padding: 80px 0;
    text-align: center;
}

a {
  text-decoration: none;
  color:#659C56;
}

/* ヘッダー */
.header {
/* 追従させる設定 */
    position: sticky;
    top: 0;
    z-index: 1000; /* 他の要素より上に表示 */
    
    /* 背景が透明だと文字が重なって見づらいので白背景に */
    background-color: rgba(255, 255, 255, 0.95); 
    
    /* スクロールした時に浮いている感じを出す影（お好みで） */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    
    /* 横幅をいっぱいにする */
    width: 100%;
    height: 80px;
    display: flex;
    align-items: center;
    background: #fff;
}

/* ヘッダーの中のロゴやメニューが崩れないよう微調整 */
header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
    padding-bottom: 10px;
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 100%;
}

.logo { font-size: 1.2rem; font-weight: bold; }

.logo a {
    display: block;
    line-height: 0; /* 画像の下にできる謎の隙間を消す */
}

.logo img {
    max-width: 250px;
    height: auto;
    vertical-align: middle;
}

/* ヘッダー全体の中でロゴを中央（垂直）に寄せる場合 */
.header-container {
    display: flex;
    align-items: center; /* 垂直方向の中央揃え */
    justify-content: space-between;
    padding: 20px 0;
}

.nav{
    display: flex;
    align-items: center;
}
.nav ul { display: flex; list-style: none; margin: 0; padding: 0; }
.nav ul li { margin-right: 20px;}
.nav ul li::after{content: '/'; margin-left: 20px;}
.nav ul li a {
    text-decoration: none;
    color: #333;
    font-weight: bold;
    font-size: 1rem;
    letter-spacing: 2px;
}

.btn-phone {
    display: inline-flex;    /* アイコンと数字を横並び＆中央揃えにする */
    align-items: center;     /* 垂直方向の中央揃え */
    justify-content: center;
    background: var(--btn, linear-gradient(90deg, #56C238 0%, #659C56 100%));
    color: #fff;
    padding: 5px 20px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    font-family: Futura;
    font-size: 25px;
    transition: opacity 0.3s ease;
}

/* 数字の前にアイコンを差し込む */
.btn-phone::before {
    content: "";
    display: inline-block;
    width: 24px;             /* アイコンの幅 */
    height: 24px;            /* アイコンの高さ */
    margin-right: 10px;      /* 数字との間の余白 */
    
    /* アイコン画像の設定 */
    background-image: url('img/phone.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* 前に教えた「ホバーで薄くなる」アニメーションとの併用 */
.btn-phone:hover {
    opacity: 0.6;
}


/* メインビジュアル */
.main-visual {
    height: 500px;
    background: url('hero-bg.jpg') no-repeat center / cover;
    position: relative;
    display: flex;
    align-items: flex-end;
}

.mv-content {
    background: rgba(255, 255, 255, 0.8);
    padding: 60px;
    margin-left: 0;
    border-radius: 0 10px 10px 0;}

.mv-title { font-size: 3.25rem;
    margin: 0;
    line-height: 3.75rem; }
.highlight { color: #4CAF50; }

.mv-sub{
    color: #000;
    /*font-family: YuGothic;*/
    font-size: 23px;
    font-style: normal;
    font-weight: 500;
    line-height: 0;
}

/* 見出し */

.section-header h2{
    margin: auto;    
}
.section-title {
    font-family: 'Futura', sans-serif;
    font-size: 2.2rem;
    font-weight: bold;
    letter-spacing: 2px;
    text-align: center;
    margin: 0;

    /* --- グラデーションの核心部分 --- */
    display: block; /* もしくは inline-block。これがないと背景が計算されません */
    width: fit-content; /* 文字の幅に合わせる */
    margin-left: auto;  /* 中央寄せを維持 */
    margin-right: auto; /* 中央寄せを維持 */

    background: linear-gradient(90deg, #56C238 0%, #659C56 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    
    /* 文字の色を消す（これを強力に指定） */
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
}

/* スマホ対応：少し文字を小さくしてバランスを調整 */
@media screen and (max-width: 768px) {
    .section-title {
        font-size: 1.8rem;
    }
}

/* アバウト */
.about.section {
    position: relative;
    padding: 100px 0; /* デザインに合わせて上下の余白を少し広げると綺麗です */
    
    /* 背景画像の上に白（rgbaの最後が0.8）を重ねる */
    background-image: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url('img/top-about-img.jpg');
    background-size: cover;
    background-position: center bottom;
}

/* 文字の可読性を確保するための調整（必要に応じて） */
.about-text p {
    padding: 20px;
    font-weight: 500;  /* 游ゴシックならMediumくらいが綺麗 */
    font-size: 1.1rem; /* 17px〜18px相当 */
    line-height: 2.0;  /* 行間を広げると可読性が爆上がりします */
    font-weight: 700;
}
    
    

/* ボタンをセンターに配置するためのラッパー */
.btn-container {
    text-align: center;
    margin-top: 10px; /* セクション内の文章との間隔 */
}

/* ボタン本体のスタイル */
.btn-more {
    display: inline-block;
    padding: 12px 60px;       /* 上下と左右の余白（デザインに合わせて調整） */
    border: 1px solid #333;   /* デザイン通りの細い黒枠 */
    border-radius: 50px;      /* カプセル型の丸角 */
    color: #333;              /* 文字色（黒） */
    text-decoration: none;    /* 下線を消す */
    font-size: 1.1rem;        /* 文字サイズ */
    font-weight: 800;         /* 文字を太く（デザインのボールド感） */
    letter-spacing: 0.1em;    /* 文字の間隔を少し広げて上品に */
    transition: all 0.3s ease; /* ホバー時のアニメーション */
    background: rgba(255, 255, 255, 0.80);
}

/* マウスを乗せた時の動き（お好みで） */
.btn-more:hover {
    background-color: #333;   /* 背景を黒に */
    color: #fff;              /* 文字を白に */
}

/* サービス */
.service-row {
    scroll-margin-top: 120px; /* ヘッダーの高さに合わせて調整 */
}

.service { background-color: #f9fff9; }
.service-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 60px 30px;
    margin-top: 60px;
}
.service-item {
    /* flex: 1; は削除 */
    width: calc((100% - 60px) / 3); /* 3分割計算（隙間30px × 2個分を引く） */
    margin-bottom: 20px;
}
/* 円形画像のサイズアップ */
.circle-img {
    width: 280px;  /* 220pxから大幅アップ */
    height: 280px; /* 220pxから大幅アップ */
    background: #ddd;
    border-radius: 50%;
    margin: 0 auto 25px;
    overflow: hidden;
}

.circle-img img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 円の中に写真を綺麗に収める */
}

/* タイトルとスパンのサイズアップ */
.service-item h3 {
    font-size: 1.4rem;    /* 1.1remからアップ */
    line-height: 1;
    margin-top: 25px;
    text-align: center;
    color: #333;
    font-weight: bold;    /* 太くして視認性アップ */
}

.service-item h3 span {
    display: inline-block;
    background: #56C238;
    color: #fff;
    padding: 10px 16px;    /* 余白を少し広く */
    border-radius: 4px;
    margin-top: 10px;
    font-size: 1.7rem;    /* 1.0remからアップ */
}

.btn-detail {
    display: inline-block;
    margin-top: 15px;
    background: #d4ead4;
    padding: 10px 25px;
    border-radius: 20px;
    text-decoration: none;
    color: #333;
    font-size: 0.8rem;
}

/* フッター */
.footer {
    background-color: #659C56; /* 画像から抽出した緑色 */
    padding: 60px 0 20px;     /* 上下の余白 */
    color: #ffffff;            /* 文字色を白に */
    position: relative;
}

/* 左右配置のコンテナ */
.footer-container {
    display: flex;
    justify-content: space-between; /* 左右に振り分け */
    align-items: center;
    max-width: 1020px;             /* サイト全体の幅に合わせる */
    margin: 0 auto;
    padding: 0 20px;
}

/* 左側のロゴテキスト */
.footer-logo a {
    color: #ffffff;
    text-decoration: none;
    font-size: 1.8rem;             /* 画像に合わせた大きめのサイズ */
    font-weight: 500;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255,255,255,0.3);
    padding-bottom: 20px;
}

/* 右側のメニュー */
.footer-menu {
    display: flex;
    list-style: none;
    gap: 30px;                     /* 項目間の余白 */
    margin: 0;
    padding: 0;
}

.footer-menu li a {
    color: #ffffff;
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: bold;
    letter-spacing: 2px;
    transition: opacity 0.3s;
}

.footer-menu li a:hover {
    opacity: 0.7;
}

/* コピーライト（中央最下部） */
.copyright {
    text-align: center;
    margin-top: 40px;              /* ロゴ・メニューとの間隔 */
}

.copyright p {
    font-size: 0.8rem;
    color: #ffffff;
    margin: 0;
    opacity: 0.9;                  /* 少しだけ透かして控えめに */
}

/* スマホ対応 */
@media screen and (max-width: 768px) {
    .footer-container {
        flex-direction: column;    /* 縦並びに */
        gap: 30px;
    }
    .footer-menu {
        flex-wrap: wrap;           /* 折り返し許可 */
        justify-content: center;
    }
}

.news.section {
    /* 背景画像の設定 */
    background-image: url('img/top-news-img.jpg'); /* パスは適宜調整してください */
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover; /* 画面幅に合わせて画像を伸縮させる */
    
    /* デザイン案のように背景を少し白く飛ばしたい場合は、以下のように重ねます */
    /* background: linear-gradient(rgba(255,255,255,0.8), rgba(255,255,255,0.8)), url('images/top-news-img.jpg') no-repeat center/cover; */

    padding: 100px 0; /* デザインに合わせて上下の余白を少し広げると綺麗です */
}

.news-container {
    display: flex;
    align-items: flex-start; /* 上揃え */
    justify-content: space-between;
    gap: 40px; /* タイトルとリストの間隔 */
}

/* 左側：タイトルエリア */
.news-title-area {
    min-width: 200px; /* タイトルの幅を確保 */
    text-align: center;
}

.section-header {
    text-align: center;
    margin-bottom: 40px;
}

.section-sub {
    font-size: 0.8rem;
    color: #333;
    margin-bottom:-0.5em;
}

/*
.section-title {
    font-size: 2.2rem;
    background: linear-gradient(90deg, #56C238 0%, #659C56 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
    font-family: Futura;
    font-weight: bold;
    letter-spacing: 2px;
}
*/

.news-list {
    flex: 1; /* 残りの幅をすべて使う */
    text-align: left; /* 念のためここにも追加 */
}

.news-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border-bottom: 1px solid #333;
    padding: 15px 0; /* 色反転しないので、左右のpaddingは0に戻してOKです */
    gap: 20px;
    width: 100%;
    transition: opacity 0.3s ease; /* 透明度の変化を滑らかに */
    cursor: pointer;
}

.news-item .date {
    font-size: 1rem;
    min-width: auto;
    font-family: 'Arial', sans-serif;
}

.news-item a.text {
    color: #333;
    text-decoration: none;
    text-align: left; /* 念のためここにも追加 */
    flex: 1;
}

/* ホバー時：少し薄くする */
.news-item:hover {
    opacity: 0.6; /* 60%の濃さにする */
    background-color: transparent; /* 背景色はつけない */
}

/* 記事タイトル（通常時） */
.news-item a.text {
    flex: 1;
    color: #333;
    text-decoration: none;
    text-align: left;
    transition: color 0.3s ease;
}

/* カテゴリーラベル（通常時） */
.news-item .category {
    background-color: #56C238;
    color: #fff;
    font-size: 0.75rem;
    font-weight: bold;
    padding: 3px 12px;
    border-radius: 20px;
    transition: all 0.3s ease;
}

/* 右寄せの view more */
.view-more-link {
    text-align: right;
    margin-top: 15px;
}

.view-more {
    display: inline-block;
    padding: 10px 10px;
    border-bottom: 1px solid #4CAF50;
    border-radius: 0;
    color: #56C238;
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: bold;
    background-color: transparent;
    transition: opacity 0.3s ease; /* 透明度の変化を滑らかに */
    cursor: pointer;
    letter-spacing: 0.1em;
}

/* ホバー時：少し薄くする */
.view-more:hover {
    opacity: 0.6; /* 60%の濃さにする */
    /* 反転設定（background-colorなど）をもし書いていたら削除してください */
}

.alliance-section {
    padding: 80px 0;
    background-color: #fcfdfb; /* 非常に薄いグリーン */
}

.alliance-list {
    display: grid;
    /* 横並び（レスポンシブ）。1カラムの最低幅を280pxに調整 */
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); 
    gap: 15px; /* 余白を少し詰める */
    padding: 0;
    list-style: none;
    margin-top: 40px;
}

/* 1つのアイテム（枠） */
.alliance-item {
    background: #fff;
    border: 1px solid #e0e6da; /* 薄いグリーンのボーダー */
    border-radius: 4px;
    transition: all 0.3s ease;
    /* 重要：中身の配置をflexにする */
    display: flex; 
    align-items: center;
}
@media screen and (max-width: 600px) {
.alliance-item {
text-align:left;
}
}

/* 枠全体のホバー設定（重要：liに対してホバーを行う） */
.alliance-item:hover {
    background-color: #769561; /* テーマカラーのグリーン */
    border-color: #769561;
}

/* リンクがある場合（aタグ）のスタイル修正 */
.alliance-item a {
    /* 重要：親要素（li）の幅いっぱい、高さ一杯に広げる */
    display: flex;
    align-items: center;
    width: 100%; 
    height: 100%;
    
    padding: 15px 20px; /* パディングはaタグに持たせる */
    color: #333;
    font-size: 15px;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease; /* 文字色の変化だけアニメーション */
}

/* ホバー時の文字色の変化（親がホバーされた時） */
.alliance-item:hover a {
    color: #fff;
}

/* リンクがない場合（spanタグ）のスタイル修正 */
.alliance-item span {
    display: block;
    width: 100%;
    padding: 15px 20px;
    color: #333;
    font-size: 15px;
    font-weight: 500;
}

/* --- 矢印アイコン（→）の装飾 --- */

/* aタグに対して疑似要素を追加 */
.alliance-item a::after {
    content: "→";
    margin-left: auto; /* 右端に寄せる */
    color: #769561; /* 初期状態の矢印の色 */
    font-family: 'Futura', sans-serif;
    font-size: 1.2em;
    transition: all 0.3s ease;
}

/* 親（li）がホバーされた時の矢印の変化 */
.alliance-item:hover a::after {
    color: #fff; /* 矢印を白に */
    transform: translateX(5px); /* 右に少し動かす */
}

/* --- スマホ対応 --- */
@media screen and (max-width: 600px) {
    .alliance-list {
        grid-template-columns: 1fr; /* スマホでは1列 */
    }
}



/* --- Access Section --- */
.access.section {
    position: relative;
    padding: 80px 0;
    background: url('img/access-backimg.jpg') no-repeat center bottom / cover; /* 背景画像 */
    z-index: 1;
}

/* 背景を少し明るく、または透過させて文字を見やすくする場合 */
.access.section::before {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(255, 255, 255, 0.8); /* 白い透過レイヤー */
    z-index: -1;
}

.access-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    margin-top: 40px;
}

/* 左側情報 */
.access-info {
    flex: 1;
    text-align: left;
}

.office-name {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 20px;
    color: #333;
}

.address-details, .contact-details {
    margin-bottom: 20px;
    line-height: 1.8;
    color: #444;
}

.contact-details p{
    margin: 0;
}

/* 右側マップ */
.access-map {
    flex: 1.2;
}

.map-wrapper {
    position: relative;
    padding-bottom: 60%; /* アスペクト比 */
    height: 0;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.map-wrapper iframe {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
}




/* --- Responsive (TOP SP Design) --- */
@media screen and (max-width: 768px) {
    /* ヘッダー：ロゴと電話ボタンを横並びに */
    .header-inner {
        flex-direction: row; /* 縦並びにしない */
        justify-content: space-between;
        padding: 0 15px;
        height: 60px;
    }

    .nav ul {
        display: none; /* スマホではナビを一旦非表示（ハンバーガーメニュー等が必要な場合） */
    }

    .btn-phone {
        padding: 5px 10px;
        font-size: 1rem;
        width: auto;
    }

    .logo {
        font-size: 1rem;
    }

    /* メインビジュアル：中央寄せ */
    .main-visual {
        height: 400px;
        justify-content: center;
        text-align: center;
    }
    
    .mv-sub {
    font-size: 15px;
}

    .mv-content {
        margin-left: 0;
        width: 90%;
        background: rgba(255, 255, 255, 0.9); /* 少し不透明度を上げる */
        padding: 30px 15px;
    }

    .mv-title {
        font-size: 1.6rem;
        line-height: 1.4;
        letter-spacing: -1.2px;
    }
    
    .section-sub {
    text-align: center;
}

    /* ABOUTセクション：テキスト中央寄せ */
    .about.section {
    padding: 50px 0;
}
    
    .about .section {
    position: relative;
    padding: 100px 0; /* デザインに合わせて上下の余白を少し広げると綺麗です */
    
    /* 背景画像の設定 */
    background-image: url('img/top-about-img.jpg'); /* イラスト画像のパス */
    background-repeat: no-repeat;
    background-position: center bottom; /* イラストが下の方に来るように調整 */
    background-size: cover; /* 画面幅に合わせて画像を伸縮させる */
}

/* 文字の可読性を確保するための調整（必要に応じて） */
.about-text p {
/*    background: rgba(255, 255, 255, 0.7);  文字の背景だけ少し白く透過させる */
    padding: 0px;
    border-radius: 8px;
    display: inline-block; /* 必要であれば */   
}
    
    .about-text {
        text-align: center;
        font-size: 0.9rem;
    }

    /* サービス：画像を大きく、文字を中央に */
    .service-grid {
        flex-direction: column;
        align-items: center;
        gap: 50px;
    }
    
    .service-grid {
    margin-top: 40px;
    }
    
    .news.section {
        padding: 50px 0;
    }
    
    .news-list {
        width: 100%;
    }
    
    .news-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    flex-direction: column;
}
    
    .access.section {
    background: url(img/access-backimg.jpg) no-repeat center bottom / 100%;
}
    
    .access.section::before {
    content: "";
    position: absolute;
    background: rgba(255, 255, 255, 0.4);
}
    
    .access-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-top: 40px;
}
}


    
@media screen and (max-width: 900px) {
    .service-item {
        width: calc((100% - 30px) / 2); /* 2列にする */
    }
}
    
@media screen and (max-width: 650px) {
    .mv-content {
    border-radius: 0;
}
    
    .service-item {
        width: 100%; /* 1列にする */
    }
    .circle-img {
        width: 240px; /* スマホでは少し小さく */
        height: 240px;
    }
}

    .service-item {
        width: 100%;
        max-width: 300px; /* スマホで広がりすぎないように */
    }

.circle-img {
    width: 220px;
    height: 220px;
    background: #ddd;
    border-radius: 50%;
    margin: 0 auto 20px;
    overflow: hidden; /* 画像がはみ出さないように */
}

.circle-img img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 円の中に写真を綺麗に収める */
}
    
    /* NEWSセクション：1行の情報を整理 */
    .news-item {
        flex-direction: row;
        align-items: flex-start;
        text-align: left;
        padding: 15px 0;
        gap: 5px;
    }

    /* ACCESSセクション：地図を横幅いっぱいに */
    .access-info {
        text-align: left;
    }

    .access-map iframe {
        width: 100%;
        height: 250px;
    }


/* SP（スマホ）用微調整 */
@media screen and (max-width: 768px) {
    
.logo img {
        max-width: 180px;
        width: 100%;
        height: auto;
        vertical-align: middle;
    }
    

.btn-phone::before {
    width: 14px;
    height: 14px;
    margin-right: 5px;
    background-image: url(img/phone.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.section {
    padding: 30px 0;
    text-align: center;
}
    
.mv-sub {
    color: #000;
    /*font-family: YuGothic;*/
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 0;
}
    .news-title-area {
    text-align: center;
    }
    .news-item {
        flex-wrap: wrap; /* スマホで窮屈な場合は折り返し */
        gap: 10px;
    }
    .news-item a.text {
        width: 100%; /* タイトルを下の行へ */
        white-space: normal; /* 折り返しを許可 */
    }
}

/* --- Responsive (SP) --- */
@media screen and (max-width: 768px) {
    .access-content {
        flex-direction: column;
        text-align: center;
    }

    .access-info {
        text-align: center;
        width: 100%;
    }

    .access-map {
        width: 100%;
    }
    
    .map-wrapper {
        padding-bottom: 75%; /* スマホでは少し高さを出す */
    }
    
    .footer-menu {
    gap: 10px;
}
}

/* PCでは非表示 */
.sp-bottom-nav {
    display: none;
}

@media screen and (max-width: 768px) {
    /* スマホ時のみ表示 */
    .sp-bottom-nav {
        display: block;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background: #659C56;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
        z-index: 9999;
        padding-bottom: env(safe-area-inset-bottom); /* iPhoneのバー対策 */
    }

    .sp-bottom-nav ul {
        display: flex;
        justify-content: space-around;
        align-items: center;
        list-style: none;
        margin: 0;
        padding: 10px 0 5px;
    }

    .sp-bottom-nav li {
        flex: 1;
        text-align: center;
    }

    .sp-bottom-nav a {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-decoration: none;
        color: #fff;
        font-size: 10px; /* テキストは小さめに */
        font-family: 'Futura', sans-serif;
    }
    
    .sp-bottom-nav .dashicons {
    font-size: 24px;
    width: 24px;
    height: 24px;
    color: #fff; /* テーマカラーの緑 */
}

    /* アイコンのサイズ調整（画像やアイコンフォントに合わせて） */
    .sp-bottom-nav i, .sp-bottom-nav img {
        font-size: 20px;
        margin-bottom: 2px;
        color: #769561; /* 絹川様のテーマカラー */
        width: 24px;
        height: 24px;
    }

    /* CONTACTだけ色を変えるなどの強調も可能 */
    .sp-bottom-nav .nav-contact i {
        color: #e67e22; /* 例えばオレンジにするなど */
    }

    /* メニューに被らないようにbodyに余白を追加 */
    body {
        padding-bottom: 70px; 
    }
}


.grecaptcha-badge { visibility: hidden; }





/*サンクスページ*/



.thank-you-section {
    padding: 100px 0;
    text-align: center;
}

.thank-you-content h2 {
    font-size: 1.8rem;
    font-weight: bold;
    color: #333;
    margin: 30px 0 20px;
}

.thank-you-content p {
    font-size: 1.05rem;
    line-height: 2;
    color: #666;
    margin-bottom: 50px;
}

.check-icon {
    margin-bottom: 20px;
}

/* TOPへ戻るボタン */
.btn-back {
    display: inline-block;
    background: var(--btn, linear-gradient(90deg, #56C238 0%, #659C56 100%));
    color: #fff;
    padding: 15px 50px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
    transition: all 0.3s;
    box-shadow: 0 4px 15px rgba(118, 149, 97, 0.3);
}

.btn-back:hover {
    background: #659C56;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(118, 149, 97, 0.4);
    color: #fff;
}

/* スマホ対応 */
@media screen and (max-width: 768px) {
    .thank-you-content h2 {
        font-size: 1.4rem;
    }
    .thank-you-content p {
        font-size: 0.95rem;
        text-align: left; /* スマホでは長文は左寄せが読みやすい */
    }
}

/*sigle見た目*/

/* 投稿詳細のメインエリア */
.site-main.small-container {
    max-width: 900px;
    margin: 30px auto;
    padding: 0 20px;
}

.sub-hero-titles{
    padding: 20px 0;
    display: flex;
    gap: 20px;
    align-content: flex-end;
    align-items: flex-end;
}
.main-title{
    /* 既存のスタイルに追加・修正 */
    font-family: 'Futura', 'Trebuchet MS', Arial, sans-serif; /* Futuraを優先し、代替フォントも指定 */
    font-size: 3.5rem;    /* Futuraは少し細身に見えることがあるので、サイズを微調整 */
    font-weight: 800;     /* 太めにするとグラデーションが映えます */
    margin: 0;
    line-height: 1;
    letter-spacing: 0.05em; /* Futuraは少し字間を広げるとより美しくなります */

    /* グラデーション設定（継続） */
    background: linear-gradient(90deg, #56C238 0%, #659C56 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    
    display: inline-block;
}

.sub-title{
    margin: 0;
}

/* 記事タイトルやメタ情報 */
.entry-header {
    margin-bottom: 40px;
    text-align: center;
}
.entry-title {
    font-size: 2rem;
    color: #333;
    line-height: 1.4;
}

/* ナビゲーション（前へ/次へ）の装飾 */
.post-navigation {
    margin: 80px 0 40px;
    border-top: 1px solid #eee;
    padding-top: 40px;
}
.nav-links {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}
.nav-previous, .nav-next {
    width: 48%;
}
.nav-subtitle {
    display: none;
    font-size: 12px;
    color: #769561; /* テーマカラーの緑 */
    font-weight: bold;
    margin-bottom: 5px;
}
.nav-title {
    font-size: 14px;
    color: #666;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /* 2行以上は三点リーダー */
    overflow: hidden;
}

/* 一覧へ戻るボタン */
.back-to-list {
    text-align: center;
    margin-top: 60px;
    margin-bottom: 50px;
}



/* 本文内の文字サイズ・行間（再掲） */
.entry-content {
    line-height: 2;
    font-size: 1.05rem;
    color: #333;
}

/* 記事レイアウト全体 */
.custom-article-layout {
    margin-bottom: 60px;
}

/* 日付とカテゴリー */
.entry-meta {
    margin-bottom: 15px;
    font-family: 'Futura', sans-serif;
    font-size: 14px;
    color: #888;
}

.entry-date {
    margin-right: 15px;
}

.entry-cat a {
    background: #f4f7f2;
    color: #769561;
    padding: 2px 10px;
    border-radius: 3px;
    text-decoration: none;
    font-size: 12px;
}

/* タイトル */
.entry-title {
    font-size: 1.8rem;
    line-height: 1.4;
    margin-bottom: 30px;
    color: #333;
}

/* 本文内のスタイル */
.entry-content {
    line-height: 2;
    font-size: 1.05rem;
}

/* アイキャッチ画像 */
.entry-eye-catch {
    margin-bottom: 40px;
    border-radius: 10px;
    overflow: hidden;
}

.entry-eye-catch img {
    width: 100%;
    height: auto;
    display: block;
}


/* メインとサイドバーの横並び設定 */
.archive-layout {
    display: flex;
    justify-content: space-between;
    padding: 80px 20px;
    gap: 50px;
}

#primary {
    flex: 1;
    min-width: 0; /* contentの溢れ出し防止 */
}

aside#secondary { /* サイドバー */
    width: 300px;
    flex-shrink: 0;
}

/* 一覧の見出し */
.page-header {
    margin-bottom: 40px;
    border-bottom: 2px solid #333;
    padding-bottom: 10px;
}
.page-title {
    font-size: 24px;
    font-weight: bold;
}

/* 一覧リストのスタイル */
.archive-list {
    border-top: 1px solid #eee;
}

.archive-item {
    border-bottom: 1px solid #eee;
}

.archive-item-link {
    display: flex;
    align-items: center;
    padding: 20px 0;
    text-decoration: none;
    color: #333;
    transition: 0.3s;
}

.archive-item-link:hover {
    opacity: 0.7;
    padding-left: 10px;
}

.archive-item-meta {
    display: flex;
    align-items: center;
    width: 220px;
    flex-shrink: 0;
}

.archive-item-meta .date {
    font-family: 'Futura', sans-serif;
    font-size: 14px;
    color: #888;
    margin-right: 15px;
}

.archive-item-meta .cat {
    font-size: 11px;
    background: #769561;
    color: #fff;
    padding: 2px 8px;
    border-radius: 2px;
}

.archive-item-title {
    font-size: 16px;
    font-weight: normal;
    margin: 0;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* スマホ対応 */
@media screen and (max-width: 900px) {
    .archive-layout {
        flex-direction: column;
    }
    aside#secondary {
        width: 100%;
    }
    .archive-item-link {
        flex-direction: column;
        align-items: flex-start;
    }
    .archive-item-meta {
        margin-bottom: 8px;
    }
}

/* アーカイブ全体のレイアウト */
.archive-main {
    max-width: 1000px; /* 画像のゆったりした感じに合わせる */
    margin: 80px auto;
    padding: 0 20px;
}

/* ページ見出し（NEWS / お知らせ） */
.news-header {
    margin-bottom: 60px;
}
.news-header .page-title {
    display: flex;
    align-items: center;
    gap: 20px;
    border: none;
}
.news-header .en {
    font-size: 60px;
    font-weight: 800;
    color: #769561; /* 画像のグリーンの色味 */
    font-family: 'Futura', sans-serif;
    line-height: 1;
}
.news-header .jp {
    font-size: 18px;
    color: #333;
    font-weight: normal;
}

/* 一覧リスト */
.archive-list {
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.news-item-link {
    display: flex;
    gap: 30px;
    text-decoration: none;
    color: inherit;
    transition: opacity 0.3s;
}

.news-item-link:hover {
    opacity: 0.7;
}

/* サムネイル */
.news-item-thumb {
    width: 320px; /* 画像の比率に合わせる */
    flex-shrink: 0;
}
.news-item-thumb img {
    width: 100%;
    height: auto;
    border-radius: 4px;
}
.no-image-placeholder {
    width: 100%;
    aspect-ratio: 1.6 / 1;
    background: #e9f3e5; /* 薄いグリーンの背景 */
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: bold;
    border-radius: 4px;
}

/* テキスト部分 */
.news-item-title {
    font-size: 22px;
    color: #769561; /* タイトルもグリーン */
    margin: 0 0 10px 0;
    line-height: 1.4;
    font-weight: bold;
}
.news-item-date {
    font-size: 14px;
    color: #333;
    margin-bottom: 15px;
    font-family: 'Futura', sans-serif;
}
.news-item-excerpt {
    font-size: 14px;
    color: #666;
    line-height: 1.8;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; /* 3行で省略 */
    overflow: hidden;
}

/* スマホ対応 */
@media screen and (max-width: 768px) {
    .news-item-link {
        flex-direction: column;
        gap: 15px;
    }
    .news-item-thumb {
        width: 100%;
    }
    .news-header .en {
        font-size: 40px;
    }
}

/* --- Single Post Responsive --- */

@media screen and (max-width: 768px) {
    .sub-hero-titles {
    padding: 20px 0;
    display: flex;
    gap: 10px;
    align-content: flex-end;
    align-items: flex-start;
    flex-direction: column;
}
    
    .entry-header {
    margin-bottom: 0px;
    text-align: center;
}
    /* 1. ヒーローエリアの調整 */
    .post-hero {
        padding: 30px 0; /* 上下の余白を少し縮小 */
    }

    .post-hero .main-title {
        font-size: 32px; /* モバイルに合わせてフォントサイズを縮小 */
        letter-spacing: 0.1em;
    }

    .post-hero .sub-title {
        font-size: 14px;
    }

    /* 2. メインコンテンツの幅調整 */
    .small-container {
        padding: 40px 20px; /* 左右に20pxの余白を確保 */
    }

    /* 3. 前後の記事ナビゲーションの調整 */
    .navigation.post-navigation {
        margin: 40px 0;
        border-top: 1px solid #eee;
    }

    .navigation.post-navigation .nav-links {
        display: flex;
        flex-direction: column; /* 左右並びを上下並びに変更 */
        gap: 15px;
    }

    .nav-previous, .nav-next {
        width: 100% !important;
        max-width: 100%;
    }

    .navigation.post-navigation a {
        display: block;
        padding: 15px;
        background: #f9fbf8;
        border-radius: 4px;
        text-decoration: none;
    }

    .nav-subtitle {
        font-size: 12px;
        color: #769561;
        display: block;
        margin-bottom: 5px;
    }

    .nav-title {
        font-size: 14px;
        color: #333;
        line-height: 1.4;
        /* 長すぎるタイトルを2行で省略（お好みで） */
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }

    /* 4. 一覧へ戻るボタン */
    .back-to-list {
        margin-top: 30px;
        text-align: center;
    }

    .btn-detail {
        display: inline-block;
        width: 100%; /* スマホではボタンを横幅いっぱいに */
        padding: 15px 0;
        box-sizing: border-box;
    }
}

/* 記事詳細のレイアウト */
.single-post-article {
    margin-bottom: 60px;
}

/* 日付とカテゴリ */
.entry-meta {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 14px;
    color: #888;
}

.entry-category a {
    background: #769561;
    color: #fff;
    padding: 2px 10px;
    border-radius: 2px;
    text-decoration: none;
    font-size: 12px;
}

/* タイトル */
.entry-title {
    font-size: 28px;
    line-height: 1.4;
    margin-bottom: 30px;
    color: #333;
}

/* アイキャッチ画像 & 本文内の画像のはみ出し防止 */
.post-thumbnail,
.entry-content {
    width: 100%;
    overflow: hidden; /* はみ出し防止の保険 */
}

.post-thumbnail img,
.entry-content img {
    max-width: 100% !important; /* 親要素の幅に強制的に合わせる */
    height: auto !important;     /* 比率を維持 */
    display: block;
    margin: 20px auto;           /* 中央寄せ */
}

/* スマホ用の微調整 */
@media screen and (max-width: 768px) {
    .entry-title {
        font-size: 22px;
        margin-bottom: 20px;
    }
    
    .entry-meta {
        font-size: 13px;
        gap: 10px;
    }
}

/* 記事本文内の画像などがはみ出さないための保険 */
.entry-content img {
    max-width: 100%;
    height: auto;
}