@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/


/* リセットCSS */

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

/* 
body {
    color: #BEBEBE; /* 通常時の文字色 */
}
*/

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom; /* 画像の下の隙間をなくす */
}

/* *********************************************** */
/* 共通ユーティリティクラス */
/* *********************************************** */
.section-inner {
    max-width: 1500px; /* XDのコンテンツ幅に合わせて調整 */
    margin: 0 auto;
    padding: 80px 20px; /* セクションの上下パディング */
}

.section-inner-narrow {
    max-width: 960px; /* 狭いコンテンツ幅 */
}

.section-inner-full {
    max-width: 1440px; /* 幅広のコンテンツ幅 */
    padding-left: 0;
    padding-right: 0;
}

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





.section-title {
    font-size: 32px;
    font-weight: normal;
    margin: 0;
    display: flex;
    align-items: baseline;
    font-family: "Shippori Mincho", serif;
    letter-spacing: 0.05em;
    color: #555;
}

.section-title2 {
    font-size: 24px;
    font-weight: normal;
    margin: 0;
    display: flex;
    align-items: baseline;
    font-family: "Shippori Mincho", serif;
    letter-spacing: 0.05em;
    color: #555;
}

.section-subtitle {
    font-size: 16px;
    color: #666;
    letter-spacing: 0.05em;
}

.section-header-light .section-title,
.section-header-light .section-subtitle {
    color: #fff;
}

.button-container {
    text-align: center;
    margin-top: 40px;
}

.button {
    display: inline-block;
    padding: 12px 40px;
    border: 1px solid #333;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-align: center;
    transition: all 0.3s ease;
    min-width: 200px;
}

.button-primary {
    background-color: #555;
    color: #fff;
}

.button-primary:hover {
    background-color: #fff;
    color: #555;
}

.button-secondary {
    background-color: #fff;
    color: #555;
    border-color: #555;
}

.button-secondary:hover {
    background-color: #555;
    color: #fff;
}

.button-light {
    background-color: #fff;
    color: #555;
    border-color: #fff;
}

.button-light:hover {
    background-color: rgba(255, 255, 255, 0.8);
    color: #555;
}


/* ヘッダー */
.header {
    background-color: #fff;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.header-inner {
    max-width: 1440px; /* XDのヘッダー幅に合わせて調整 */
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 40px; /* XDのデザインに合わせて調整 */
}

.header-logo img {
    height: 45px; /* ロゴの高さ */
    width: auto;
}

.header-nav ul {
    display: flex;
    gap: 30px; /* ナビゲーション間のスペース */
}

.header-nav a {
    font-size: 14px;
    font-weight: 700;
    color: #555;
    padding: 5px 0;
    position: relative;
    transition: color 0.3s ease;
}

.header-nav a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background-color: #555;
    transition: width 0.3s ease;
}

.header-nav a:hover {
    color: #666;
}

.header-nav a:hover::after {
    width: 100%;
}

.burger-menu {
    display: none; /* デスクトップでは非表示 */
}

/* メインビジュアル1の統合CSS */
.main-visual1 {
    /* ページの幅全体を使用 */
    width: 100%;
    /* 高さを自動調整し、上下左右中央配置のためにFlexboxを設定 */
    height: auto; 
    /* ヘッダーの高さ分、上部にマージンを開ける（配置：ヘッダーの少し下） */
    margin-top: 21.0vw;
    /* 内部の要素（画像）を中央に配置するためのFlexboxコンテナとして設定 */
    display: flex;
    justify-content: center; /* 左右中央寄せ */
    /* ビジュアルとしての上端は固定する */
    overflow: hidden;
}

/* メインビジュアル１内の画像コンテナ */

.main-visual-image1 {
    /* ご要望のサイズ：幅560pxに制限 */
    width: 35.0vw;
    height: auto;
    overflow: hidden;

}

/* 画像そのもの */
.main-visual-image1 img {
    /* コンテナの幅（560px）に合わせて100%に */
    width: 100%;
    /* 高さも自動調整 */
    height: auto;
    /* 画像の比率を維持して表示 */
    object-fit: contain; 
}


/* メインビジュアル２の統合CSS */
.main-visual2 {
    /* ページの幅全体を使用 */
    /* width: 100vw; */
    /* 高さを自動調整し、上下左右中央配置のためにFlexboxを設定 */
    height: auto; 
    /* ヘッダーの高さ分、上部にマージンを開ける（配置：ヘッダーの少し下） */
    /* margin-top: 22.5vw;  */
    /* 内部の要素（画像）を中央に配置するためのFlexboxコンテナとして設定 */
    display: flex;
    justify-content: center; /* 左右中央寄せ */
    /* ビジュアルとしての上端は固定する */
/*     overflow: hidden;  */
}


/* メインビジュアル２内の画像コンテナ */
.main-visual-image2 {
    /* ご要望のサイズ：幅1330pxに制限 */
    width: 1330px;
    overflow: hidden;
    position: relative; 
    
    /* ★修正点：高さをゼロにし、padding-topで高さ（1:1の比率）を確保 */
    height: 0;
    padding-top: 102.7%; /* 画像の縦横比が1:1（正方形）の場合 50% */
}

/* 画像そのもの２ */
.main-visual-image2 img {
    /* コンテナの幅（1330px）に合わせて100%に */
    width: 100%;
    /* ★修正点：親の確保した高さに合わせて画像を広げる */
    height: 100%; 
    object-fit: contain; 

    /* 2枚の画像を重ねる設定 */
    position: absolute; 
    top: 0;
    left: 0;
    
    /* 切り替えを滑らかにする設定 */
    transition: opacity 3.3s ease-in-out;
}

/* ---------------------------------- */
/* ★ホバー切り替えのためのCSS（変更なし） */
/* ---------------------------------- */

/* 1. top0001a.png (通常画像 - .image-default) の初期設定 */
.main-visual-image2 .image-default {
    opacity: 1; 
    z-index: 2; 
}

/* 2. top0001b.png (ホバー画像 - .image-hover) の初期設定 */
.main-visual-image2 .image-hover {
    opacity: 0; 
    z-index: 1; 
}

/* 3. マウスオーバー (.main-visual-image2:hover) 時の動作 */
.main-visual-image2:hover .image-default {
    opacity: 0; 
}

.main-visual-image2:hover .image-hover {
    opacity: 1; 
}



.main-visual-text h1 {
    font-size: 60px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 20px;
    letter-spacing: 0.05em;
}

.main-visual-text p {
    font-size: 24px;
    font-weight: 400;
    letter-spacing: 0.05em;
}

/* 各コンテンツセクション */
.section {
    padding: 80px 0;
    background-color: #fff;
}

/* What's EITO */
.what-eito-content {
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
}

.what-eito-content p {
    font-size: 16px;
    line-height: 1.8;
    color: #555;
}

/* Philosophy */
.philosophy {
    background-color: #f9f9f9;
}

.philosophy-grid {
    display: flex;
    justify-content: space-around;
    gap: 30px;
    flex-wrap: wrap; /* 小さな画面で折り返す */
}

.philosophy-item {
    flex: 0 0 calc(33.333% - 20px); /* 3列表示 */
    text-align: center;
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.philosophy-item img {
    width: 100%;
    height: 180px; /* 画像の高さ固定 */
    object-fit: cover;
    border-radius: 4px;
    margin-bottom: 20px;
}

.philosophy-item h3 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 10px;
    color: #555;
}

.philosophy-item p {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
}

/* Our Brand */
.our-brand {
    background-color: #fff;
}

.brand-items {
    display: flex;
    flex-direction: column;
    gap: 60px;
}

.brand-item {
    display: flex;
    align-items: center;
    gap: 50px;
}

.brand-item-left {
    flex-direction: row;
}

.brand-item-right {
    flex-direction: row-reverse; /* 画像とテキストの左右を入れ替え */
}

.brand-image {
    flex: 1; /* 画像部分 */
}

.brand-image img {
    width: 100%;
    height: 400px; /* 画像の高さ固定 */
    object-fit: cover;
    display: block;
}

.brand-content {
    flex: 1; /* テキスト部分 */
    padding: 20px;
}

.brand-content h3 {
    font-size: 32px;
    font-weight: 700;
    color: #555;
    margin-bottom: 15px;
}

.brand-content p {
    font-size: 16px;
    color: #555;
    line-height: 1.8;
    margin-bottom: 30px;
}



.main-visual3 {
    /* ページの幅全体を使用 */
    width: 34vw;
    /* 高さを自動調整し、上下左右中央配置のためにFlexboxを設定 */
    height: auto; 
    /* ヘッダーの高さ分、上部にマージンを開ける（配置：ヘッダーの少し下） */
    margin-top: 22.5vw;
    margin-left: auto;
    margin-right: auto;

    /* 内部の要素（画像）を中央に配置するためのFlexboxコンテナとして設定 */
    display: flex;
    justify-content: center; /* 左右中央寄せ */
    /* ビジュアルとしての上端は固定する */
    overflow: hidden;
}


/* News */
.news-items {
    max-width: 800px;
    margin: 0 auto;
}

.news-item {
    border-bottom: 1px solid #eee;
    padding: 20px 0;
}

.news-item:last-child {
    border-bottom: none;
}

.news-item a {
    display: flex;
    align-items: baseline; /* テキストのベースラインを揃える */
    gap: 20px;
    color: #555;
    transition: color 0.3s ease;
}

.news-item a:hover {
    color: #666;
}

.news-item time {
    font-size: 14px;
    color: #888;
    flex-shrink: 0; /* 日付が折り返さないようにする */
}

.news-item p {
    font-size: 16px;
    line-height: 1.5;
}

/* Company */
.company {
    background-color: #f9f9f9;
}

.company-content {
    max-width: 700px;
    margin: 0 auto;
}

.company-info {
    font-size: 16px;
}

.company-info dt {
    font-weight: 700;
    color: #555;
    padding: 15px 0;
    border-bottom: 1px solid #eee;
    width: 120px; /* 説明項目の幅を固定 */
    float: left; /* ddと並べる */
    clear: left; /* 毎回左に配置 */
}

.company-info dd {
    padding: 15px 0;
    border-bottom: 1px solid #eee;
    color: #555;
    margin-left: 140px; /* dtの幅+余白 */
}

.company-info dt:last-of-type,
.company-info dd:last-of-type {
    border-bottom: none;
}


/* Recruit */
.recruit {
    position: relative;
    color: #fff;
    padding: 100px 0; /* 上下パディング */
    text-align: center;
    display: flex;
    align-items: center; /* 垂直方向中央 */
    justify-content: center; /* 水平方向中央 */
    min-height: 500px; /* 最低の高さを確保 */
}

.section-bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.section-bg-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.6); /* 画像を暗くしてテキストを読みやすくする */
}

.recruit-overlay {
    position: relative;
    z-index: 2;
    max-width: 800px;
    margin: 0 auto;
}

.recruit-content p {
    font-size: 18px;
    line-height: 1.8;
    margin-bottom: 30px;
}

/* Contact */
.contact-content {
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
}

.contact-content p {
    font-size: 16px;
    line-height: 1.8;
    color: #555;
}

/* フッター */
.footer {
    background-color: #555;
/*     padding: 60px 20px; */
    color: #BEBEBE; /* XDのフッター文字色 */
}

.footer-container {
    max-width: 1500px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    gap: 40px;
}

.footer-col0 {
    flex: 1;
}


.footer-col-logo {
    flex: 1.5; /* ロゴ列を少し広めに */
    min-width: 200px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.footer-logo {
    height: 18vw;
    width: auto;
    margin-bottom: 2vw;
    display: block;
}

.copyright {
    font-size: 12px;
    margin-top: auto;
}

.footer-heading {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 15px;
    line-height: 1.5;
}

.footer-heading a {
    color: #BEBEBE;
    text-decoration: none;
}

.footer-list {
    list-style: none;
    padding: 0;
    margin-top: 0;
    margin-bottom: 30px;
}

.footer-list li {
    margin-bottom: 8px;
}

.footer-col a {
    font-family: "Shippori Mincho", serif;
    color: #BEBEBE;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.3s ease;
    display: block;
}


.footer-col a:hover,
.footer-heading a:hover {
    color: #666666; /* XDのフッターホバー色 */
}

/* トップに戻るボタン */
.page-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background-color: #555;
    color: #fff;
    border: none;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    opacity: 0; /* 最初は非表示 */
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 999;
}

.page-top.is-visible {
    opacity: 1;
    visibility: visible;
}


/* ---------- レスポンシブ対応 (簡易版) ---------- */
@media (max-width: 1024px) {
    .header-inner {
        padding: 15px 20px;
    }
    .header-nav ul {
        gap: 20px;
    }
    .main-visual-text h1 {
        font-size: 48px;
    }
    .main-visual-text p {
        font-size: 20px;
    }
    .section-title {
        font-size: 32px;
    }
    .philosophy-item {
        flex: 0 0 calc(50% - 15px); /* 2列表示 */
    }
    .brand-item {
        flex-direction: column !important; /* スマホでは縦並びに */
        gap: 30px;
    }
    .brand-content {
        text-align: center;
    }
    .brand-image img {
        height: 300px;
    }
    .footer-container {
        flex-wrap: wrap;
    }
    .footer-col {
        flex: 0 0 calc(50% - 20px); /* 2列表示 */
        margin-bottom: 30px;
    }
    .footer-col-logo {
        flex: 0 0 100%; /* ロゴ列は1列 */
    }
}


/* 
@media (max-width: 768px) {
    .header-nav {
        display: none; /* スマホではナビゲーションを非表示 */
 */        
        



/* ヘッダー用 */

/* -------------------------------------- */
/* 共通（PC・SP）のスタイル */
/* -------------------------------------- */

/* 
body {
    margin: 0;
    font-family: sans-serif;
    background-color: #f8f8f8;
}
 */


.main-header {
    background-color: #FFFFFF;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-content {
    display: flex;
    justify-content: space-between;
        
    /* align-items: center; */
    align-items: flex-start;
    
    max-width: 1500px;
    /* margin: 0 auto; */
    margin: 0;
    padding: 2vw 5vw 0vw 5vw;
}

/* ロゴのスタイル */
.logo a {
    display: block;
    line-height: 0;
    position: relative;
    height: 45px; /* logo imgと同じ高さ */
    width: 133px; /* ロゴ画像の幅に合わせて調整してください */
}

.logo img {
    height: 45px;
    transition: opacity 0.3s ease;
}

.logo-hover {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
}

.logo-default {
    display: block;
}

.logo a:hover .logo-default {
    display: none;
}

.logo a:hover .logo-hover {
    display: block;
}


/* -------------------------------------- */
/* PCサイズ（769px以上）のナビゲーションスタイル */
/* -------------------------------------- */

.main-nav ul {
    list-style: none;
    padding: 0;
    margin-top: 16px;
    display: flex; /* 横並び */
    gap: 25px;
}

.main-nav a {
    text-decoration: none;
    color: #BEBEBE; /* 通常時の文字色 */
    font-size: 18px;
    font-weight: normal;
    margin: 0;
    display: flex;
    align-items: baseline;
    font-family: "Shippori Mincho", serif;
    letter-spacing: 0.05em;
}

.main-nav a:hover {
    color: #666666; /* マウスオーバー時の文字色 */
}

/* ハンバーガーアイコン関連はPCサイズでは非表示 */
.menu-toggle,
.hamburger-icon {
    display: none;
}


/* -------------------------------------- */
/* メディアクエリ（スマホ対応: 768px以下） */
/* -------------------------------------- */

@media (max-width: 768px) {

    /* 1. PC用のナビゲーションの表示を初期化（スマホ用の設定に上書き） */
    .main-nav {
        /* 初期状態で画面外に配置 */
        position: fixed;
        top: 0;
        right: -100%; /* 画面外に隠す */
        width: 70%;
        height: 100%;
        background-color: #FFFFFF;
        box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
        transition: right 0.3s ease-in-out;
        z-index: 100;
        padding-top: 60px;
    }

    /* 2. スマホ表示ではハンバーガーアイコンを表示 */
    .hamburger-icon {
        display: flex; /* アイコンを表示 */
        cursor: pointer;
        z-index: 101;
        width: 30px;
        height: 24px;
        position: relative;
        flex-direction: column;
        justify-content: space-around;
    }

    .hamburger-icon .bar {
        display: block;
        width: 100%;
        height: 3px;
        background-color: #BEBEBE;
        border-radius: 2px;
        transition: all 0.3s ease;
    }

    /* 3. メニューの中身（リスト）のスタイルを縦並びに変更 */
    .main-nav ul {
        flex-direction: column;
        gap: 0;
    }

    .main-nav li {
        border-bottom: 1px solid #f0f0f0;
    }

    .main-nav a {
        padding: 15px 20px;
        font-size: 16px;
    }

    /* 4. チェックボックスがONになったらメニューを表示 */
    #menu-toggle:checked ~ .main-nav {
        right: 0; /* 画面内に引き込む */
    }

    /* 5. ハンバーガーアイコンの変形（×印に） */
    #menu-toggle:checked ~ .hamburger-icon .bar:nth-child(1) {
        transform: translateY(10.5px) rotate(45deg);
    }

    #menu-toggle:checked ~ .hamburger-icon .bar:nth-child(2) {
        opacity: 0;
    }

    #menu-toggle:checked ~ .hamburger-icon .bar:nth-child(3) {
        transform: translateY(-10.5px) rotate(-45deg);
    }
}




/* --- 1. 全体の配置とレイアウト設定 --- */

.news-list-section {
    margin-top: 31.1vw;
    max-width: 1500px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 5vw;
    padding-right: 5vw;
}

/* ① タイトル行の左右寄せ設定 */
.section-header {
    display: flex;
    justify-content: space-between; 
    align-items: center; 
    margin-bottom: 20px;
}

/* 
.section-title {
    margin: 0; 
    font-size: 1.5em;
    color: #555;
}
 */

.list-link {
    font-size: 1em;
    color: #0073aa;
    white-space: nowrap; 
    text-decoration: none; 
}

/* 投稿グリッドのレイアウト (変更なし) */
.post-grid {
    display: flex;
    flex-wrap: nowrap; 
    gap: 20px; 
    margin-bottom: 30px;
}

.post-item {
    flex: 0 0 calc(25% - 15px); 
    border: 1px solid #eee;
    padding: 15px;
    box-sizing: border-box; 
    text-align: left;
}


/* --- 2. 個別要素のスタイル（画像サイズと日付の位置） --- */

/* ② 投稿の画像（サムネイルのラッパー） */
.post-thumbnail-wrap {
    text-align: center;
    margin-bottom: 5px; 
}

.post-item img.post-thumbnail,
.post-item .no-thumbnail {
    width: 100%;
    max-width: 300px; 
    height: 210px; 
    object-fit: cover;
    border-radius: 4px;
    display: block;
    margin: 0 auto;
}

.post-item .no-thumbnail {
    line-height: 210px;
    background-color: #f5f5f5;
    color: #aaa;
}

/* 投稿の日付（画像の下に移動） */
.post-date {
    font-size: 0.9em;
    color: #BEBEBE;
    margin-bottom: 10px; 
    text-align: left; 
}

/* ③ 文章の内容（抜粋） */
.post-excerpt {
    font-size: 0.9em;
    line-height: 1.4;

    color: #bebebe; /* 通常時の色（確実に適用） */
/*     color: #555; */
    margin-bottom: 15px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: calc(1.4em * 3);
}

.post-link {
    display: inline-block;
    margin-top: 5px;
    color: #0073aa;
}


/* --- レスポンシブ対応 (変更なし) --- */
@media (max-width: 1024px) {
    .post-grid {
        flex-wrap: wrap; 
    }
    .post-item {
        flex: 0 0 calc(50% - 10px); 
    }
}

@media (max-width: 600px) {
    .post-item {
        flex: 0 0 100%; 
    }
}

/* --- About Us全体の設定 --- */
.hero-section {
    margin-top: 14.6vw;
    margin-left: 1.5vw;
    margin-right: 1.5vw;
    /* padding-left: 1.5vw; */
    /* padding-right: 1.5vw; */
    max-width: 2500px;
    height: 38vw;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    color: #fff;
}


/* --- コンテンツのレイアウト --- */
.hero-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    padding: 2vw 5vw;
    box-sizing: border-box;
}

/* --- ④ 上部左右寄せエリア --- */
.header-links {
    display: flex;
    align-items: baseline;
}

.link-item {
    color: #fff;
    text-decoration: none;
    transition: opacity 0.3s;
}

.link-item:hover {
    opacity: 0.8;
}

.about-us {
    font-size: 3vw;
    font-weight: normal;
    margin: 0;
    display: flex;
    align-items: baseline;
    font-family: "Shippori Mincho", serif;
}

/* --- 参考 Google fontsの記載例 --- */
.shippori-mincho-regular {
  font-family: "Shippori Mincho", serif;
/*   font-weight: 400;  */
  font-style: normal;
}

.about-eito {
    font-size: 2vw;
    font-weight: normal;
    margin-left: 2vw;
}

/* --- ⑤ 中央テキストエリア --- */
.center-text {
    margin-top: auto; 
    margin-bottom: auto;
    text-align: center;
}

.center-text p {
    font-size: 32px;
    font-weight: normal;
    margin: 0;
    display: flex;
    align-items: baseline;
    font-family: "Shippori Mincho", serif;
}

/* --- ⑤' 左端テキストエリア --- */
.left-text {
    margin-top: auto; 
    margin-bottom: auto;
    text-align: left;
}

.left-text p {
    font-size: 3vw;
    font-weight: normal;
    margin: 0;
    display: flex;
    align-items: baseline;
    font-family: "Shippori Mincho", serif;
}

/* --- ⑤'' 左端テキスト（小）エリア --- */
.left-s-text {
    margin-top: auto; 
    margin-bottom: auto;
    text-align: left;
}

.left-s-text p {
    font-size: 2vw;
    line-height: 1.5;
    margin: 0;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); 
}


/* --- ⑥ 下段リンクエリア --- */
.bottom-link {
    display: flex;
    align-items: center;
    width: fit-content; 
    color: #fff;
    text-decoration: none;
    transition: color 0.3s;
}

.bottom-link:hover {
    color: #ccc;
}

/* ★変更点: link001.png (arrow-icon) のサイズ変更 */
.arrow-icon {
    width: 8vw;
    height: auto;
    object-fit: contain;
    margin-right: 1vw;
}


.bottom-link span {
    font-size: 2vw;
}



/* -------------------------------------- */
/* ① 表示幅: 最大1500px と ② 上部空白: 10vw */
/* -------------------------------------- */
.shop-list-container {
    max-width: 1500px;
    margin-top: 10.0vw;
    margin-left: auto;
    margin-right: auto;
    padding-left: 5vw;
    padding-right: 5vw;
    box-sizing: border-box;
}
/* -------------------------------------- */
/* ヘッダー部分 (Our Brand & Shop Brand) */
/* -------------------------------------- */
.shop-list-header {
    margin-bottom: 30px; /* ヘッダーと一覧の間隔 */
}

/* ⑦ Our Brand&Business Model */
.header-title-main {
    font-size: 32px;
    font-weight: normal;
    margin: 0;
    display: flex;
    align-items: baseline;
    font-family: "Shippori Mincho", serif;
    letter-spacing: 0.05em;
    color: #555;
    margin: 0 0 10px 0;
}

.header-row-2 {
    display: flex;
    justify-content: space-between;
    align-items: flex-end; /* タイトルとリンクを下に揃える */
}

/* ⑧ Shop Brand */
.header-title-sub {
    font-size: 2.2px;
    font-weight: normal;
    margin: 0;
    display: flex;
    align-items: baseline;
    font-family: "Shippori Mincho", serif;
}

.header-title-sub2 {
    font-size: 2vw;
    font-weight: normal;
    margin: 0;
    display: flex;
    align-items: baseline;
    font-family: "Shippori Mincho", serif;
}

.shop-list-text2
{
    font-size: 1vw;
    font-weight: normal;
    margin: 0;
    display: flex;
    align-items: baseline;
    font-family: "Shippori Mincho", serif;
}

/* ⑨ プランドー覧リンク */
.header-link-all {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #000; /* リンク色 */
}

/* 矢印アイコン (link001.png) */
.link-icon-wrap {
    /* サイズは141x98px固定 */
    width: 141px; 
    height: 98px; 
    display: block;
    margin-right: 10px; /* 矢印と文字の間隔 */
    
    /* link001.pngを背景画像として使用 */
    background-image: url('パス/to/link001.png'); 
    background-size: contain; /* サイズを要素に合わせる */
    background-repeat: no-repeat;
    background-position: center;
}

/* ブランド一覧 の文字 */
.link-text {
    font-size: 14px; /* フォントサイズ */
    line-height: 1; /* アイコンとの上下位置を調整 */
}

/* -------------------------------------- */
/* 店舗一覧グリッド */
/* -------------------------------------- */
/* ③ 表示列数: 4列 */
.shop-list-grid {
    display: grid;
    /* 4列で均等幅、行間の余白を調整 */
    grid-template-columns: repeat(4, 1fr); 
    gap: 20px 20px; /* 縦横の隙間を調整 */
}

/* 個々の店舗アイテム */
.shop-list-item {
    text-align: center;
    /* 1行目、2行目、3行目...と自然に流れるため、④最大4行 の制御はCSSではなくposts_per_pageで行います */
}

.shop-item-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* ⑤ 表示画像: アイキャッチ画像 */
.shop-item-thumbnail img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    aspect-ratio: 1 / 1; /* 画像を正方形にしたい場合など、デザインに合わせて調整 */
}

/* ⑥ 投稿日付 および タイトル */
.shop-item-content {
    margin-top: 10px;
}

.shop-item-date {
    font-size: 12px;
    margin: 0;
    color: #666; /* 日付の色 */
}

.shop-item-title {
    font-size: 16px;
    margin: 5px 0 0 0;
    font-weight: normal;
}

/* 画像の下にあるロゴのスタイル（例） */
.shop-item-logo {
    width: 80px; /* ロゴの幅 */
    height: auto;
    margin-top: 10px;
}

/* -------------------------------------- */
/* レスポンシブ対応 (4列が崩れないように調整) */
/* -------------------------------------- */
@media (max-width: 1024px) {
    .shop-list-grid {
        /* 画面幅が狭くなったら3列にするなど */
        grid-template-columns: repeat(3, 1fr); 
    }
}

@media (max-width: 768px) {
    .shop-list-grid {
        /* さらに狭くなったら2列にするなど */
        grid-template-columns: repeat(2, 1fr);
    }
    
    .link-icon-wrap {
        /* モバイルではアイコンを小さくする調整 */
        width: 70px; 
        height: 49px;
    }

    .header-title-main {
        font-size: 24px;
    }
    .header-title-sub {
        font-size: 20px;
    }
}




/* recruit-section　全体の設定 */
body {
    background-color: #fff;
}

#recruit-section {
    max-width: 1500px; /* ①全体表示幅 */
    margin-top: 14.3vw;
    margin-left: auto;
    margin-right: auto;
    padding-left: 5vw;
    padding-right: 5vw;
    margin-bottom: 17vw;
    box-sizing: border-box;
}

/* ヘッダー部分（タイトル） */
.recruit-header {
    display: flex;
    align-items: baseline;
    margin-bottom: 20px; /* コンテンツとの間に余白 */
}

.recruit-title-en {
    font-size: 32px;
    font-weight: normal;
    margin: 0;
    display: flex;
    align-items: baseline;
    font-family: "Shippori Mincho", serif;
}

.recruit-title-jp {
    font-size: 24px; /* ⑤日本語タイトル */
    font-family: sans-serif; /* 画像のイメージに合わせゴシック系 */
    margin: 0 0 0 10px; /* 英字タイトルの右に少し開ける */
    font-weight: normal;
}

/* コンテンツ部分（2列表示） */
.recruit-content {
    display: flex; /* ③表示列数：2列 */
    gap: 30px; /* 左右の間の余白 */
    align-items: flex-start; /* 上揃え */
}

.recruit-text-area,
.recruit-image-area {
    width: 50%; /* 左右が50:50% */
    box-sizing: border-box;
}

/* 左半分（文字）のスタイル */
.recruit-main-message p {
    font-size: 32px;
    font-weight: normal;
    margin: 0;
    display: flex;
    align-items: baseline;
    font-family: "Shippori Mincho", serif;
}

.recruit-sub-message {
    margin-top: 50px; /* ２）中段の文字：上部を少し開ける */
}

.recruit-sub-message p {
    font-size: 16px;
    line-height: 1.8;
    margin: 0;
}

.recruit-link-area {
    margin-top: 50px; /* ３）下段の文字：上部を少し開ける */
}

.recruit-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: inherit; /* リンク色を親要素から継承 */
}

.recruit-arrow img {
    width: 57px; /* 矢印のサイズ */
    height: 40px; /* 矢印のサイズ */
    display: block;
}

.recruit-link-text {
    font-size: 24px; /* 採用情報の文字サイズ */
    margin-left: 10px;
    white-space: nowrap; /* 折り返しを防ぐ */
}

/* 右半分（画像）のスタイル */
.recruit-image-area {
    display: flex;
    justify-content: flex-end; /* 右端に寄せる */
}

.recruit-image {
    width: 623px; /* ４）画像のサイズ */
    height: 446px; /* ４）画像のサイズ */
    object-fit: cover; /* 画像が指定サイズに合うように調整 */
    display: block;
}

/* スマートフォンサイズ（768px以下）での調整 */
@media screen and (max-width: 768px) {
    #recruit-section {
        margin-top: 50px; /* スマホでは上部余白を小さく */
    }

    /* 左右の並びを縦に変更 */
    .recruit-content {
        flex-direction: column; /* スマホサイズ：左半分が上で右半分を下に配置 */
    }

    .recruit-text-area,
    .recruit-image-area {
        width: 100%; /* 全幅表示 */
    }
    
    .recruit-image-area {
        margin-top: 30px; /* 画像の上に少し余白 */
        justify-content: center; /* 画像を中央に */
    }

    .recruit-image {
        width: 100%; /* スマホに合わせて幅を調整 */
        height: auto;
        max-width: 623px;
    }

    /* 文字サイズの調整 */
    .recruit-main-message p {
        font-size: 32px; /* スマホで文字が大きすぎないように */
        line-height: 1.5;
    }

    .recruit-sub-message,
    .recruit-link-area {
        margin-top: 30px;
    }
}


/* business-model 全体の設定 */
#business-model-section {
    max-width: 1500px; /* 採用情報と同じ最大幅 */
    margin-top: 13.7vw; /* 上部空白 */
    margin-left: auto;
    margin-right: auto;
    padding-left: 5vw;
    padding-right: 5vw;
    box-sizing: border-box;
}

/* ヘッダー部分（タイトルとリンク） */
.business-header {
    display: flex;
    justify-content: space-between; /* タイトルとリンクを左右に配置 */
    align-items: center;
    margin-bottom: 50px; /* コンテンツとの間に余白 */
}

.business-title-en {
    font-size: 32px;
    font-weight: normal;
    margin: 0;
    display: flex;
    align-items: baseline;
    font-family: "Shippori Mincho", serif;
}

/* リンクエリアのスタイル */
.business-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
}

.business-arrow img {
    width: 74px;
    height: 50px;
    object-fit: contain;
    margin-right: 5px;
}


.business-link-text {
    font-size: 16px;
    margin-left: 5px;
    white-space: nowrap;
}

/* 事業コンテンツエリア */
.business-content {
    /* 画像が縦に並んでいるため、通常は縦に配置するか、複数の事業を横に並べるかによって調整が必要です。
       ここでは、複数の事業を縦に並べる（添付画像が上下に続いているため）レイアウトを採用します。*/
    display: flex;
    flex-direction: column;
    gap: 30px; /* 各事業間の縦の余白 */
}

.business-item {
    margin-bottom: 20px;
}

.business-item-image-container {
    overflow: hidden; /* 画像のはみ出しを防ぐ */
    border-radius: 5px; /* 角丸のイメージに合わせて */
}

.business-item-image {
    width: 100%;
    height: auto;
    display: block;
    max-width: 1500px; /* 親要素の幅に合わせて */
}

.business-item-description {
    font-size: 16px;
    margin-top: 15px;
    line-height: 1.6;
}

/* スマートフォンサイズでの調整 */
@media screen and (max-width: 768px) {
    #business-model-section {
        margin-top: 50px;
    }

    .business-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        margin-bottom: 30px;
    }

    .business-title-en {
        font-size: 28px;
    }

    .business-item-description {
        padding: 0 5px; /* 説明文の左右に余白 */
    }
}



/* フッター用 */

/* 変数設定 (お好みで) */
:root {
    --text-color: #BEBEBE;
    --hover-color: #666666;
    --background-color: #FFFFFF;
}

/* フッター全体のスタイル */
.footer {
    background-color: var(--background-color);
    margin-top: 7.0vw;
    margin-left: auto;
    margin-right: auto;
    padding-top: 3vw;
    padding-left: 5vw;
    padding-right: 5vw;
    font-family: Arial, sans-serif;
}

/* コンテンツを中央に配置するためのコンテナ */
.footer-container {
    max-width: 1500px; /* 最大幅を調整してください */
    margin: 0 auto;
    display: flex; /* 4列組の基本 */
    justify-content: space-between;
    gap: 40px; /* 列間のスペース */
}

/* 各列の共通スタイル */
.footer-col {
    /* 均等に幅を広げる */
    flex: 1;
    /* 添付画像に近い配置にするため、1列目を広めに設定 */
    /* flex: 1; が基本ですが、ロゴ列を大きくしたい場合は調整します */
}

.footer-col-logo {
    flex: 1.5; /* 1列目だけ少し幅を広くする例 */
    min-width: 200px; /* 最小幅 */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}


/* 見出しのスタイル */
.footer-heading {
    font-size: 16px; /* 見出しのフォントサイズ */
    font-weight: bold;
    margin-bottom: 15px;
    line-height: 1.5; /* 行の高さ */
}

.footer-heading a {
    color: var(--text-color);
    text-decoration: none;
}

/* リストのスタイル */
.footer-list {
    list-style: none;
    padding: 0;
    margin-top: 0;
    margin-bottom: 30px; /* セクション間のスペース */
}

.footer-list li {
    margin-bottom: 8px; /* 項目間のスペース */
}

/* リンクの共通スタイル */
.footer-col a {
    font-family: "Shippori Mincho", serif;
    color: var(--text-color);
    text-decoration: none;
    font-size: 1vw;
    transition: color 0.3s ease; /* ホバー時のトランジション */
    display: block; /* リンク全体をホバーしやすくする */
}



/* マウスオーバー時のスタイル */
.footer-col a:hover {
    color: var(--hover-color);
}

/* ロゴのスタイル */
/* 
.footer-logo {
    max-width: 250px;
    height: auto;
    margin-bottom: 15px;
    display: block;
}
 */

.footer-logo-link {
    /* ロゴリンクの親要素にホバーイベントをバインドする場合はこちらを使用 */
    display: inline-block;
}

.l-mainContent
Specificity: (0,1,0)
 {
    margin-left: 50px;
    position: static !important;
    width: 100%;
}
.copyright {
    color: var(--text-color);
    font-size: 1vw;
    margin-top: auto;
    margin-bottom: 1vw;
    margin-left: 1vw;
}

/* ----------------------------------------------------
 * 関連記事のサムネイルを縦長比率（366:378）に変更
 * ---------------------------------------------------- */

/* 関連記事エリア内のサムネイルコンテナをターゲットに指定 */
.p-postRelated .c-postThumb__figure {
    /* 縦横比を「幅:高さ (366 / 378)」に設定 */
    aspect-ratio: 366 / 378 !important; 
    
    /* SWELLテーマのデフォルト設定（padding-topで比率指定）を上書きするためにリセット */
    /* !important をつけることでテーマのCSSより優先させます */
    padding-top: 0 !important; 
    height: auto !important;
}

/* 画像自体がコンテナ全体に表示されることを保証 */
.p-postRelated .c-postThumb__figure img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

/* 
.c-postThumb__figure {
    aspect-ratio: 366 / 378 !important; 
    
    padding-top: 0 !important; 
    height: auto !important;
}
 */


/* 画像自体がコンテナ全体に表示されることを保証 */
.c-postThumb__figure img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}
 
/* 999参考　サイズの割合を指定する箇所を特定する場合 */
/* .c-postThumb .c-postThumb__figure { */
    /* 縦横比を「幅:高さ (366 / 378)」に設定 */
.c-postThumb .c-postThumb__figure {
    aspect-ratio: 366 / 378; 
    padding-top: 0 !important; 
    height: auto !important;
} 


.p-postList__thumb .c-postThumb .c-postThumb__figure{ 
    aspect-ratio: 366 / 300; 
    padding-top: 0 !important; 
    height: auto !important;
} 


/* ----------------------------------------------------
 * 関連記事の表示をPCで4列に変更 (汎用版)
 * ---------------------------------------------------- */
@media (min-width: 1080px) {
    /* 関連記事リストのコンテナを指定 */
    .c-postList--related { /* SWELLの関連記事リストでよく使われるクラス */
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important; /* 4つの均等な列を作成 */
        gap: 30px !important; 
    }
}
/* 元のCSSも試行錯誤のため残しておきます。*/
/* .p-postRelated__list { 
    grid-template-columns: repeat(4, 1fr) !important; 
    gap: 30px !important;
} */

/* ----------------------------------------------------
 * 関連記事の表示をタブレットで3列に変更 (任意)
 * ---------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1079px) {
    .p-postRelated__list {
        grid-template-columns: repeat(3, 1fr); /* 3列構成にする */
    }
}

/* ----------------------------------------------------
 * 関連記事のタイトルフォントの変更
 * ---------------------------------------------------- */
.c-secTitle {
    font-size: 32px;
    font-weight: normal;
    margin: 0;
    display: flex;
    align-items: baseline;
    font-family: "Shippori Mincho", serif;
    border-left: solid 0px var(--color_main);
    padding: 0em 0em;
}

/* ----------------------------------------------------
 * カテゴリのタイトルフォントの変更
 * ---------------------------------------------------- */
.c-pageTitle__inner {
    font-family: "Shippori Mincho", serif;

}


/* ----------------------------------------------------
 * 不要なアイコンを非表示に
 * ---------------------------------------------------- */
.p-articleMetas__termList {
    align-items: center;
    display: none;
    flex-wrap: wrap;
    gap: .5em;
}










/* ① トップ画像をヘッダーの下に潜り込ませる設定 */
.page-brand-business {
    margin-top: -100px; /* ヘッダーの高さ分、上に持ち上げて重ねる（高さに合わせて調整） */
}

/* メインビジュアルの調整 */
.brand-main-visual {
    position: relative;
    width: 100%;
    height: 60vh; /* 画像の高さ。お好みで調整 */
    overflow: hidden;
}

.brand-main-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 画像の上のタイトル（中央配置など） */
.main-visual-title-wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
}

.header-title-main2 {
    color: #fff;
    font-size: 3rem;
    text-shadow: 0 0 10px rgba(0,0,0,0.3); /* 文字を読みやすく */
}

/* ③ Our Brand セクションの背景と文字色 */
.shop-list-header {
    background-color: #333; /* 背景を黒・グレー系にする場合 */
    padding: 60px 5vw;
}

.header-title-sub2 {
    color: #fff;
    font-size: 2rem;
    margin-bottom: 10px;
}

.shop-list-text2 {
    color: #fff; /* 白色で表示 */
    font-size: 1rem;
    border-left: 2px solid #fff; /* 左側に白い縦線を入れる場合 */
    padding-left: 15px;
    margin-left: 0;
}

/* ④ 画像グリッドの両サイドに 5vw の余白 */
.shop-list-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4x4のベース */
    gap: 20px;
    padding: 40px 5vw; /* 左右に5vwの余白 */
}

/* ヘッダー自体の背景を透過（このページのみに適用する場合） */
.page-brand-business-template .main-header {
    background: transparent;
    position: absolute;
    width: 100%;
    z-index: 10;
    border: none;
}

/* スマホ対応：2カラムにするなど */
@media (max-width: 768px) {
    .shop-list-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .header-title-main2 {
        font-size: 1.8rem;
    }
}






/* ① ヘッダーを画像の上に表示させる設定 */
.page-brand-business-template .main-header {
    position: absolute; /* 画像の上に浮かせる */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;       /* 重なり順を最前面にする */
    /* background: transparent !important; */ /* 背景を透明に強制 */
    border: none;
}

/* メニューの文字色やロゴが見えにくい場合はここで調整 */
.page-brand-business-template .main-nav ul li a {
    color: #fff; /* 画像が暗めなら白、明るめなら#6A6A6Aに調整 */
}

/* 画像とコンテンツの重なりを調整 */
.page-brand-business {
    margin-top: 0; /* absoluteにしたのでマイナスマージンは不要 */
}

/* ② Our Brand セクションの背景を白・文字をグレーに変更 */
.shop-list-header {
    background-color: #fff; /* 背景を白に */
    padding: 60px 5vw 20px 5vw; /* 下の余白を少し詰める */
}

.header-row-2 {
    display: flex;
    flex-direction: column; /* 縦に並べる */
    align-items: flex-start; /* 左寄せ */
}

.header-title-sub2 {
    color: #6A6A6A; /* 指定のグレー */
    font-size: 2rem;
    margin-bottom: 5px; /* 下の説明文との間隔 */
    font-weight: bold;
}

.shop-list-text2 {
    color: #6A6A6A; /* 指定のグレー */
    font-size: 1rem;
    margin-left: 0;
    padding-left: 0;
    border-left: none; /* 先ほどの線が不要であれば削除 */
    text-align: left;  /* 左寄せ */
}

/* ④ 画像グリッドの調整 */
.shop-list-grid {
    background-color: #fff; /* グリッド周りも白にする場合 */
    padding: 20px 5vw 60px 5vw;
}





/* 固定ページ（our-brand-business-model）専用の修正 */
.page-template-page-our-brand-business-model {
    /* コンテンツ全体を最上部まで引き上げる */
    margin-top: 0 !important;
}

/* ヘッダーを透明にして画像の上に重ねる */
.page-template-page-our-brand-business-model .main-header {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    /* background: transparent !important; */ /* 背景を透明に */
    border: none !important;
    z-index: 100; /* 画像より手前に表示 */
    box-shadow: none !important; /* 影も消す */
}

/* 画像エリアの設定 */
.brand-main-visual {
    width: 100%;
    height: 70vh; /* 画像の高さ（適宜調整してください） */
    margin-top: 0;
    padding-top: 0;
    line-height: 0; /* 下に隙間ができるのを防ぐ */
}

.brand-main-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 画面幅に合わせて切り抜く */
}

/* タイトルを画像の中央に配置 */
.main-visual-title-wrap {
    position: absolute;
    top: 55%; /* 少し下にずらす調整 */
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
    z-index: 10;
}




/* 固定ページ（our-brand-business-model）専用の修正 */
.page-template-page-our-brand-business-model {
    /* コンテンツ全体を最上部まで引き上げる */
    margin-top: 0 !important;
}

/* ヘッダーを透明にして画像の上に重ねる */
.page-template-page-our-brand-business-model .main-header {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    /* background: transparent !important; */ /* 背景を透明に */
    border: none !important;
    z-index: 100; /* 画像より手前に表示 */
    box-shadow: none !important; /* 影も消す */
}

/* 画像エリアの設定 */
.brand-main-visual {
    width: 100%;
    height: 70vh; /* 画像の高さ（適宜調整してください） */
    margin-top: 0;
    padding-top: 0;
    line-height: 0; /* 下に隙間ができるのを防ぐ */
}

.brand-main-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 画面幅に合わせて切り抜く */
}

/* タイトルを画像の中央に配置 */
.main-visual-title-wrap {
    position: absolute;
    top: 55%; /* 少し下にずらす調整 */
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
    z-index: 10;
}






/* このテンプレートを使用している時だけの特別設定 */
.page-template-page-our-brand-business-model #body_wrap {
    padding-top: 0 !important;
}

/* ヘッダーを浮かせ、背後を透過させる */
.page-template-page-our-brand-business-model .main-header {
    position: absolute !important; /* レイアウトから浮かせる */
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    /* background: transparent !important; */ /* 背景を透明にする */
    border: none !important;
    box-shadow: none !important;
    z-index: 999 !important; /* 画像（10）より手前に表示 */
}

/* メインビジュアルを画面最上部から開始させる */
.page-template-page-our-brand-business-model .page-brand-business {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.brand-main-visual {
    position: relative;
    width: 100%;
    height: 70vh; /* 高さは適宜調整 */
    z-index: 10;   /* ヘッダーより背面に配置 */
}

.brand-main-visual img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.page-template-page-our-brand-business-model #body_wrap {
    padding-top: 0 !important;
}






/* -----------------------------------------------------------
   Our Brand & Business Model ページ専用
----------------------------------------------------------- */

/* 1. サイト全体の余白（ヘッダー分の隙間）を強制排除 */
.page-template-page-our-brand-business-model #body_wrap {
    padding-top: 0 !important;
}

/* 2. ヘッダーを完全に浮かせて画像に重ねる */
.page-template-page-our-brand-business-model .main-header {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    /* background: transparent !important; */
    border: none !important;
    box-shadow: none !important;
    z-index: 1000 !important;
}

/* 3. コンテンツの親要素にある左右余白や制限を解除 */
.page-template-page-our-brand-business-model #content,
.page-template-page-our-brand-business-model .l-container,
.page-template-page-our-brand-business-model .l-mainContent {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 4. メインビジュアルの設定（画面の端から端まで） */
.brand-main-visual {
    position: relative;
    width: 100vw; /* 画面幅いっぱい */
    height: 70vh; /* 高さ（お好みで調整） */
    overflow: hidden;
    margin: 0 !important;
}

.brand-main-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 5. タイトルの重なり順を確保 */
.main-visual-title-wrap {
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    width: 100%;
    text-align: center;
}

/* 6. 「Our Brand」セクションの白背景エリア */
.shop-list-header {
    background-color: #ffffff !important;
    padding: 60px 5vw 20px 5vw !important;
}

.header-title-sub2, 
.shop-list-text2 {
    color: #6A6A6A !important;
    text-align: left;
}

/* 7. 画像グリッドの両サイドに余白 */
.shop-list-grid {
    background-color: #ffffff !important;
    padding: 20px 5vw 80px 5vw !important;
}




/* -----------------------------------------------------------
   Our Brand & Business Model ページ専用 強制上書き
----------------------------------------------------------- */

/* SWELLが自動で付与するヘッダー分の余白を完全にゼロにする */
.page-template-page-our-brand-business-model #body_wrap,
.page-template-page-our-brand-business-model .l-mainContent,
.page-template-page-our-brand-business-model .l-container {
    padding-top: 0 !important;
    margin-top: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* ヘッダーを透明化し、画像の上に強制的に重ねる */
.page-template-page-our-brand-business-model .main-header {
    position: absolute !important; /* 追従設定よりもこの絶対配置を優先 */
    top: 0 !important;
    /* background: transparent !important; */ /* 不透明度1の設定を上書き */
    /* background: transparent !important; */
    border: none !important;
    box-shadow: none !important;
    z-index: 1000 !important;
}

/* 追従中（スクロール時）のヘッダーも透明にしたい場合は以下も追従 */
.page-template-page-our-brand-business-model .l-header__fixed,
.page-template-page-our-brand-business-model .-fixed {
    /* background: transparent !important; */
}

/* メイン画像のコンテナ：画面の端から端まで、最上部から表示 */
.brand-main-visual {
    position: relative;
    width: 100%;
    height: 70vh; /* 高さは任意 */
    margin: 0 !important;
    padding: 0 !important;
    z-index: 1;
}

.brand-main-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 中央のタイトル */
.main-visual-title-wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    width: 100%;
    text-align: center;
}

/* -----------------------------------------------------------
   ② Our Brand セクション（白背景・左寄せ）
----------------------------------------------------------- */
.shop-list-header {
    background-color: #ffffff !important;
    padding: 60px 5vw 20px 5vw !important;
}

.header-row-2 {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* 左寄せ */
}

.header-title-sub2 {
    color: #6A6A6A !important;
    margin-bottom: 10px;
}

.shop-list-text2 {
    color: #6A6A6A !important;
    margin: 0;
}

.shop-list-grid {
    background-color: #ffffff !important;
    padding: 20px 5vw 80px 5vw !important;
}



/* -----------------------------------------------------------
   ブランドページ専用：ヘッダーと画像を重ねる最終調整
----------------------------------------------------------- */

/* 1. ページ全体の余白を完全にリセット */
.brand-page-layout,
.brand-page-layout #content,
.brand-page-layout .l-container {
    margin-top: 0 !important;
    padding-top: 0 !important;
    max-width: 100% !important;
}

/* 2. ヘッダーを浮かせて透明にする（追従設定に勝つための指定） */
body.page-template-page-our-brand-business-model .main-header,
body.page-template-page-our-brand-business-model .l-header,
body.page-template-page-our-brand-business-model .c-fixedHeader {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    /* background: transparent !important; */ /* 背景を透明に */
    /* background: transparent !important; */
    border: none !important;
    box-shadow: none !important;
    z-index: 9999 !important;
}

/* 3. 画像を画面最上部へ突き上げる */
.brand-main-visual {
    margin-top: 0 !important;
    padding-top: 0 !important;
    position: relative;
    top: 0;
    width: 100%;
    height: 70vh; /* 高さはお好みで */
}

.brand-main-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    vertical-align: bottom; /* 画像下の謎の隙間を消す */
}

/* 4. SWELLの自動余白（コンテンツ上部のpadding）を消去 */
.page-template-page-our-brand-business-model #body_wrap {
    padding-top: 0 !important;
}



/* -----------------------------------------------------------
   Our Brand & Business Model ページ専用 強制レイアウト修正
----------------------------------------------------------- */

/* 1. タイトル横の追記テキストの設定（1vw、下付き） */
.header-title-sub-text {
    display: inline-block;
    font-size: 2vw !important; /* 2vwに指定 */
    font-family: sans-serif;   /* 標準ゴシック */
    font-weight: normal;
    vertical-align: baseline;  /* 下揃え */
    margin-left: 10px;         /* 英語タイトルとの間隔 */
}

/* 2. ヘッダーを画像に重ねる（SWELLの自動余白を完全に消去） */
.brand-page-layout,
.page-template-page-our-brand-business-model #body_wrap,
.page-template-page-our-brand-business-model .l-mainContent,
.page-template-page-our-brand-business-model .l-container {
    padding-top: 0 !important; /* ヘッダー分の隙間をゼロに */
    margin-top: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* 3. ヘッダー自体の背景を透明化（追従設定に勝つための指定） */
body.page-template-page-our-brand-business-model .main-header,
body.page-template-page-our-brand-business-model .l-header,
body.page-template-page-our-brand-business-model .c-fixedHeader {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    /* background: transparent !important; */ /* 透明化 */
    /* background: transparent !important; */
    border: none !important;
    box-shadow: none !important;
    z-index: 9999 !important;
}

/* 4. メインビジュアルを画面最上部へ */
.brand-main-visual {
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
    height: 70vh; /* 高さはお好みで */
    position: relative;
    z-index: 1;
}

.brand-main-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 5. 英語タイトルの装飾（画像の上に白文字で表示させる場合） */
.header-title-main2 {
    color: #fff;
    padding-left: 2vw;
    font-size: 3rem;
    text-shadow: 0 0 10px rgba(0,0,0,0.3);
}

/* 6. 「Our Brand」セクション（白背景・左寄せ） */
.shop-list-header {
    background-color: #fff !important;
    padding: 60px 5vw 20px 5vw !important;
}

.header-title-sub2, 
.shop-list-text2 {
    color: #6A6A6A !important;
    text-align: left;
}


/* -----------------------------------------------------------
   ブランドページ専用：完全解決版（優先度最強）
----------------------------------------------------------- */

/* ① ヘッダーの隙間を消す：htmlタグから指定してJSの上書きを防ぐ */
html body.page-template-page-our-brand-business-model {
    padding-top: 0 !important;
}

html body.page-template-page-our-brand-business-model #body_wrap {
    padding-top: 0 !important;
}

/* ヘッダーを完全に浮かせ、透明にする */
.page-template-page-our-brand-business-model .main-header,
.page-template-page-our-brand-business-model .l-header,
.page-template-page-our-brand-business-model .c-fixedHeader {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    /* background: transparent !important; */
    /* background: transparent !important; */
    border: none !important;
    box-shadow: none !important;
    z-index: 9999 !important;
}

/* ② 左右の余白制限を解除して画面端まで広げる */
.brand-page-layout,
.page-template-page-our-brand-business-model #content,
.page-template-page-our-brand-business-model .l-container,
.page-template-page-our-brand-business-model .l-mainContent {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* ③ メインビジュアル */
.brand-main-visual {
    position: relative;
    width: 100% !important;
    height: auto;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
}

.brand-main-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* -----------------------------------------------------------
   ブランドページ専用：タイトル切れ解消版
----------------------------------------------------------- */

/* 1. コンテナの設定：画面の左端を基準にするのをやめ、安全な枠内に収めます */
.main-visual-title-wrap {
    position: absolute;
    top: 60%;
    /* left: 44vw; */
    width: 100%;
    /* 左右に5%の余白を確保し、中身を左寄せにします */
    padding: 0 5% !important; 
    box-sizing: border-box !important;
    text-align: left;
    z-index: 10;
}

/* 2. タイトル：flexを使って横並びを制御 */
.header-title-main2 {
    display: flex !important;
    flex-wrap: wrap;       /* 画面が狭くなったら自動で改行（重なり防止） */
    align-items: baseline; /* 文字の下端を揃える */
    gap: 15px;             /* 英語と日本語の隙間 */
    margin: 0 !important;
    padding: 0 !important;
    color: #fff !important;
    text-shadow: 0 0 10px rgba(0,0,0,0.5);
}

/* 3. 英語テキスト：サイズを自動調整し、はみ出しを防ぐ */
.main-en-text {
    /* 画面幅に応じて 1.8rem ～ 3.5rem の間で自動伸縮 */
    font-size: clamp(1.2rem, 4vw, 2.0rem) !important;
    font-family: "Shippori Mincho", serif;
    line-height: 1.2;
    font-weight: normal;
    display: inline-block;
    color: #fff !important;
    max-width: 100%;       /* 枠からはみ出さない */
}

/* 4. 日本語テキスト：1vwを維持しつつ、小さくなりすぎないよう設定 */
.header-title-sub-text {
    font-size: 1.5vw !important;
    min-width: 140px;      /* 切れや重なりを防ぐための最小幅 */
    font-family: sans-serif;
    font-weight: normal;
    color: #fff !important;
    display: inline-block;
}

/* 1033px以下：日本語を英語の下に送って見やすくする */
@media (max-width: 1033px) {
    .header-title-main2 {
        flex-direction: column; /* 縦並びに変更 */
        gap: 5px;
    }
    .main-en-text {
        font-size: 1.6rem !important; /* スマホで見やすいサイズ */
    }
    .header-title-sub-text {
        font-size: 13px !important; /* スマホで読める最小サイズ */
    }
}

/* 960px以下：フッターのメニューを非表示にする */
@media (max-width: 960px) {
    .footer-col {
        display: none;
    }
}


/* トップのロゴの左側に空白を作る */
.c-headLogo__img {
    padding-left: 4vw;　/* ＜これ */
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    width: auto;
}


.c-gnav {
    font-family: 'Shippori Mincho', sans-serif;
    margin-right: 4vw;
    font-weight: 400 !important;
    letter-spacing: 0px;
    color: #939393;
}

.c-gnav>.menu-item>a {
    color: inherit;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    padding: 0 36px;　　　　/* ここを変える */
    position: relative;
    white-space: nowrap;
}

/* トップビジュアルにメニューをかぶせる our-brand-business-mode用l*/
@media (min-width: 960px) {
    .brand-page-layout, .page-template-page-our-brand-business-model #content, .page-template-page-our-brand-business-model .l-container, .page-template-page-our-brand-business-model .l-mainContent
     {
        max-width: 100% !important;
        width: 100% !important;
        padding: 0 !important;
        margin-top: -140px !important;　　/* ＜＜　-200pxにする */
    }
}


/* トップビジュアルにメニューをかぶせる 汎用l*/
@media (min-width: 960px) {
    .l-topTitleArea {
        margin-top: -0px;　/* ＜ここ */
        min-height: 550px;
    }
}

/* タイトルの文字をMinchoに変更 */
.c-pageTitle {
    font-size: 1.3em;
    font-family: "Shippori Mincho", serif;
    line-height: 1.4;
    position: relative;
}

/* SWELLの左右の余白を0に */
@media (min-width: 960px) {
    :root {
        --swl-fz--side: 14px;
        --swl-pad_post_content: 16px;
        --swl-pad_container: 0px;
    }
}


/* --- Display Posts 横4列レイアウト設定 --- */

/* リスト全体の初期化とFlex設定 */
ul.display-posts-listing {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

/* 各記事アイテムの設定 */
ul.display-posts-listing li.listing-item {
    display: flex !important;
    flex-direction: column !important;
    /* 100%から微細な誤差を防ぐため、敢えて24.9%にするか、そのままでもOK */
    width: 25% !important; 
    margin: 0 !important;
    padding: 10px !important; /* 隣との隙間 */
    box-sizing: border-box !important;
    float: none !important; /* テーマの干渉対策 */
}

/* 記事タイトルを非表示 */
ul.display-posts-listing li.listing-item .title {
    display: none !important;
}

/* 画像比率を固定（横1 : 縦0.7） */
ul.display-posts-listing li.listing-item .image {
    display: block !important;
    width: 100% !important;
    aspect-ratio: 1 / 0.7 !important;
    overflow: hidden !important;
    margin-bottom: 15px !important;
    order: 1 !important;
}

ul.display-posts-listing li.listing-item .image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

/* 日付の設定 */
ul.display-posts-listing li.listing-item .date {
    display: block !important;
    order: 2 !important;
    font-size: 13px !important;
    color: #BEBEBE !important;
    margin-bottom: 8px !important;
    transition: color 0.3s ease;
}

/* ハイフンを非表示 */
ul.display-posts-listing li.listing-item .excerpt-dash {
    display: none !important;
}

/* 概要の設定 */
ul.display-posts-listing li.listing-item .excerpt {
    display: block !important;
    order: 3 !important;
    font-size: 12px !important;
    line-height: 1.6 !important;
    color: #BEBEBE !important;
    transition: color 0.3s ease;
}

/* ホバー時の色変化 */
ul.display-posts-listing li.listing-item:hover .date,
ul.display-posts-listing li.listing-item:hover .excerpt {
    color: #666666 !important;
}

/* スマホ表示（横2列） */
@media (max-width: 767px) {
    ul.display-posts-listing li.listing-item {
        width: 50% !important;
    }
}

/* 全体のpaddingを0にする */
root {
--swl-list-padding--left:0em !important;;
}

/* タイトル文字にstyleを付ける */
/* .style-unique01 {
    font-size: 1.8em;
    padding-left: 10vw;
    font-family: "Shippori Mincho", serif;
    font-weight: normal;
    line-height: 1.4;
    position: relative;
    color: #BEBEBE;
}


.style-unique02 {
    font-size: 1.0em;
    font-weight: normal;
    line-height: 1.2;
    position: relative;
    color: #BEBEBE;
}
 */

/* 固定ページのタイトルエリア（.c-pageTitle）内のspanにだけ適用する */
.c-pageTitle .style-unique01 {
    font-size: 1.8em;
    padding-left: 10vw;
    font-family: "Shippori Mincho", serif;
    font-weight: normal;
    line-height: 1.4;
    position: relative;
    color: #BEBEBE;
}

.c-pageTitle .style-unique02 {
    font-size: 1.0em;
    font-weight: normal;
    line-height: 1.2;
    position: relative;
    color: #BEBEBE;
}




/*  *** 投稿一覧 *** */
/* 1. 記事タイトルを非表示にする */
.display-posts-listing .listing-item .title {
    display: none !important;
}

/* 2. 日付の下のハイフン（excerpt-dash）を非表示にする */
.display-posts-listing .listing-item .excerpt-dash {
    display: none !important;
}

/* 3. 概要（excerpt）の微調整（ハイフンが消えた後の余白） */
.display-posts-listing .listing-item .excerpt {
    display: block;
    order: 4;
    margin-top: 5px; /* 日付との間隔を調整 */
}


/* ***** 拡張タイプの一覧表 ***** */
/* ショップ専用：画像エリアの比率を上書き（例：1対1の正方形にする場合） */
.display-posts-listing.shop-list .listing-item .image {
    aspect-ratio: 1 / 1; /* ここで好きな比率に変えられます（1/1なら正方形、1/1.2なら縦長など） */
}

/* もしタイトルの文字サイズなども変えたい場合は以下のように指定できます */
.display-posts-listing.shop-list .listing-item .title {
    font-weight: bold;
}

/* ショップ一覧（16件：4列×4行）のレイアウト設定 */
.display-posts-listing.shop-list .listing-item {
    width: 25%;        /* 100% / 4列 */
    padding: 10px;     /* アイテム間の余白（お好みで調整） */
    margin-bottom: 20px; /* 下の行との隙間を作る */
    box-sizing: border-box;
}

/* 画像を正方形に維持 */
.display-posts-listing.shop-list .listing-item .image {
    aspect-ratio: 1 / 1;
    margin-bottom: 10px; /* 画像とタイトルの間の隙間 */
}

/* スマホ表示の調整（必要であれば） */
/* 画面が小さい時に4列だと見づらいため、2列にする設定例 */
@media (max-width: 767px) {
    .display-posts-listing.shop-list .listing-item {
        width: 50%;    /* スマホでは2列 */
    }
}


/* ショップ一覧の親要素を横並び（Flexbox）にする */
ul.shop-list {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* 各アイテムを4列（25%）にする */
ul.shop-list .listing-item {
    width: 25%;
    padding: 10px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

/* 画像を正方形にする */
ul.shop-list .listing-item .image {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    margin-bottom: 8px;
}

/* 画像自体の表示設定 */
ul.shop-list .listing-item .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* スマホでは2列にする設定（お好みで） */
@media (max-width: 767px) {
    ul.shop-list .listing-item {
        width: 50%;
    }
}

/* ショップ一覧のタイトルを非表示にする */
ul.shop-list .listing-item .title {
    display: none;
}

/* 「Our Brand」の画像を画面いっぱいに広げる */
img[src*="our_brand01.png"] {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    height: auto;
}


/* 特定の画像を画面いっぱいに広げる設定 */
img[src*="our_brand01.png"] {
    width: 100vw !important; /* 画面の横幅いっぱいにする */
    max-width: 100vw !important; /* 100%制限を解除する */
    margin-left: calc(50% - 50vw) !important; /* 中央から左端へ引き出す */
    margin-right: calc(50% - 50vw) !important;
    height: auto;
    display: block;
}


/* 親要素の制限を解除して画面いっぱいに広げる */
.brand-main-visual {
    width: 100vw !important;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    overflow: hidden;
}

/* 中の画像を横幅いっぱいにフィットさせる */
.brand-main-visual img {
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    display: block;
}

/* タイトルなどの重なりを維持するための調整（必要に応じて） */
.main-visual-title-wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
    z-index: 10;
}

/* 文字に影をつけて読みやすくする場合 */
.header-title-main2 {
    text-shadow: 0 0 10px rgba(0,0,0,0.3); /* ほんのり影をつける */
}

/* スマホで見ると画像が縦長すぎると感じた場合 */
@media (max-width: 767px) {
    .brand-main-visual img {
        height: 50vh !important; /* スマホでは画面の高さ半分にする */
        object-fit: cover; /* 画像の比率を維持して切り抜く */
    }
}





/* Newsページ(ID:667)専用：右側テキストの隙間と3列問題を強制解決 */

/* 1. 不要な要素の非表示 */
.page-id-667 .display-posts-listing .listing-item .title,
.page-id-667 .display-posts-listing .listing-item .excerpt-dash {
    display: none !important;
}

/* 2. 親要素：基本の横並び設定 */
.page-id-667 .display-posts-listing .listing-item {
    display: block !important; /* 一旦リセット */
    position: relative !important;
    width: 100% !important;
    margin-bottom: 40px !important;
    padding-bottom: 30px !important;
    border-bottom: 1px solid #eee !important;
    overflow: hidden !important;
}

/* 3. 左側：画像（横幅33.3% / 比率70%） */
.page-id-667 .display-posts-listing .listing-item a.image {
    float: left !important; /* 左側に固定 */
    width: 33.333% !important;
    margin-right: 40px !important;
    display: block !important;
    aspect-ratio: 100 / 70 !important;
    overflow: hidden !important;
}

.page-id-667 .display-posts-listing .listing-item a.image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* 4. 右側：日付と概要を「画像以外の残りのスペース」に無理やり流し込む */
/* 全ての要素が横に並ぼうとする力を打ち消すために、
   日付と概要を「画像分の左余白を持ったブロック要素」として再定義します。
*/
.page-id-667 .display-posts-listing .listing-item .date,
.page-id-667 .display-posts-listing .listing-item .excerpt {
    display: block !important; /* 縦に並ぶように強制 */
    float: none !important;   /* 横並びを解除 */
    clear: none !important;
    width: auto !important;
    /* 左側に画像(33.3%)＋余白(40px)のスペースを空ける */
    margin-left: calc(33.333% + 40px) !important; 
}

/* 日付のスタイル（隙間を最小限に） */
.page-id-667 .display-posts-listing .listing-item .date {
    margin-top: 0 !important; /* 上端を揃える */
    margin-bottom: 4px !important; /* 概要との隙間 */
    color: #888 !important;
    font-size: 0.9rem !important;
    font-weight: bold !important;
    line-height: 1.2 !important;
}

/* 概要のスタイル（日付の直下に配置） */
.page-id-667 .display-posts-listing .listing-item .excerpt {
    margin-top: 0 !important;
    color: #6a6a6a !important;
    font-size: 0.95rem !important;
    line-height: 1.7 !important;
}

/* 5. スマホ対応 */
@media (max-width: 767px) {
    .page-id-667 .display-posts-listing .listing-item a.image {
        float: none !important;
        width: 100% !important;
        margin-right: 0 !important;
        margin-bottom: 15px !important;
    }
    .page-id-667 .display-posts-listing .listing-item .date,
    .page-id-667 .display-posts-listing .listing-item .excerpt {
        margin-left: 0 !important;
        width: 100% !important;
    }
}

/* この数字を小さくすると隙間が縮まり、大きくすると広がります */
.page-id-667 .display-posts-listing .listing-item .date {
    margin-bottom: 4px !important; 
}



/* ****************************** */
/* パンくずリストの左側の余白追加 ＋ とりあえず非表示*/
/* ****************************** */
.p-breadcrumb:not(.-bg-on) {
    display: none;
    padding-top: 12px;
    padding-left: 4vw;
}


/* ****************************** */
/* 固定ページの文字の太さ　　　　 */
/* ****************************** */
/* element.style {
    font-size: 2em;
    font-weight: normal;
    letter-spacing: 8px;
    line-height: 1.6;
}
 */
body, p, a, h1, h2, h3, h4, h5, h6, .site-title {
    font-weight: normal !important;
}