@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;700&family=Shippori+Mincho:wght@400;700&display=swap');

/* ここから通常のCSSルールを記述 */
body {
    font-family: 'Zen Kaku Gothic New', sans-serif;
}
h1 {
    font-family: 'Shippori Mincho', serif;
}

body {
    margin: 0;
    font-family: sans-serif;
}

/* ヘッダーの基本スタイル */
.header {
    width: 100%;
    height: 80px;
    background-color: transparent; /* 変更: 背景色を透明に */
    border-bottom: 1px solid white; /* 追加: 下に1pxの白いボーダー */
    position: fixed;
    top: 0;
    transition: background-color .3s, color .3s, border-bottom .3s; /* 変更: ボーダーのトランジションも追加 */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    box-sizing: border-box;
    z-index: 1000;
}

/* スクロール時のヘッダーのスタイル */
.header.change-color {
    background-color: white; /* 変更: 背景色を白に */
    border-bottom: 1px solid #ddd; /* 変更: ボーダーの色を変更 (任意) */
}

/* ロゴの親要素（h1）のスタイル */
.logo a {
    margin: 0;
    /* デフォルトのロゴ画像 */
    background-image: url('../images/common/logo.png'); 
    background-repeat: no-repeat;
    background-size: 131px 44px;
    background-position: left center;
    transition: background-image 0.3s ease; /* 画像切り替えのトランジション */
}

/* スクロール後のロゴ画像 */
.header.change-color .logo a {
    background-image: url('../images/common/logo_b.png');
}

/* ロゴのリンク（aタグ）のスタイル */
.logo a {
    display: block;
    width: 131px;
    height: 44px;
    text-indent: 100%; /* テキストを非表示にする */
    white-space: nowrap;
    overflow: hidden;
    color: transparent; /* テキストの色を透明にする */

    /* デフォルトのロゴ画像 */
    background-image: url('../images/common/logo.png'); /* ここに移動 */
    background-repeat: no-repeat; /* ここに移動 */
    background-size: 131px 44px; /* ここに移動 */
    background-position: left center; /* ここに移動 */

    transform: scale(1); /* デフォルトのスケール（1倍） */
    transition: background-image 0.3s ease, transform .3s ease, opacity .3s ease; /* transitionをまとめる */

    font-size: 16px; 
    font-weight: bold; 
    text-decoration: none; 
    line-height: 44px; 
}

/* ロゴのリンクがアクティブ（押されている間）のスタイル */
.logo a:active {
    transform: scale(1.0); /* 押されている間は95%に縮小 */
}

/* ロゴのリンクがホバーされた時のスタイル */
.logo:hover {
    opacity: .8;
    transform: scale(0.95); /* ホバーされている間も95%に縮小 */
    -webkit-transform: scale(0.95);;
    -moz-transform: scale(0.95);;
    -ms-transform: scale(0.95);;
    transition: transform .6s ease; /* スケール変化のトランジション */
}


/* スクロール時のロゴのテキスト色（透明なので実質効果なし） */
.header.change-color .logo a {
    color: transparent;
}

/* 新しいラッパー要素: nav-desktop と hamburger-menu を含む */
.nav-right {
    display: flex;
    align-items: center;
    gap: 20px;
}


/* デスクトップ用ナビゲーション */
.nav-desktop {
    display: block;
}

.nav-desktop .lists {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    font-family: 'Zen Kaku Gothic New', sans-serif;
}

.nav-desktop .lists .list a {
    color: white; /* デフォルトの文字色を白に */
    text-decoration: none;
    font-weight: bold;
    transition: color .3s; /* 文字色のトランジションは維持 */

    position: relative; /* ::after 擬似要素の基準位置 */
    /* overflow: hidden; */ /* 今回は不要になる可能性が高いですが、残していても問題ありません */
    padding-bottom: 5px; /* 下線との間に少しスペースを空ける */
}

/* スクロール時の文字色 */
.header.change-color .nav-desktop .lists .list a {
    color: black; /* スクロール後の文字色を黒に */
}


/* ▼ 変更箇所: ホバー下線アニメーションのスタイル ▼ */
.nav-desktop .lists .list a::after {
    content: ''; /* 擬似要素のコンテンツは空 */
    position: absolute; /* 親要素 .list a を基準に配置 */
    bottom: 0; /* 親要素の底部に配置 */
    left: 0; /* 親要素の左端から開始 */
    width: 0; /* 変更: 初期状態では幅を0にする */
    height: 1px; /* 下線の太さ */
    background-color: white; /* 下線の色 (デフォルトは白) */
    /* transform: translateX(-100%); */ /* 変更: この行は削除またはコメントアウト */
    transition: width 0.3s ease-out; /* 変更: width のアニメーションにする */
}

/* スクロール時の下線の色を黒に */
.header.change-color .nav-desktop .lists .list a::after {
    background-color: black; /* スクロール後の下線の色を黒に */
}

/* ホバー時の下線アニメーション */
.nav-desktop .lists .list a:hover::after {
    width: 100%; /* ホバー時に幅を100%にする */
    /* transform: translateX(0); */ /* 変更: この行は削除またはコメントアウト */
}
/* ▲ 変更箇所 終わり ▲ */


.nav-desktop .list {
    margin-left: 20px;
}


/* ハンバーガーメニューアイコン */
.hamburger-menu {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 18px;
    cursor: pointer;
    z-index: 1001;
    position: relative;
}

/* ハンバーガーメニューのバー */
.hamburger-menu .bar {
    width: 100%;
    height: 1px;
    background-color: white; /* デフォルトのバーの色を白に */
    transition: all 0.3s ease;
}

/* スクロール時のハンバーガーメニューのバーの色 */
.header.change-color .hamburger-menu .bar {
    background-color: black; /* スクロール後のバーの色を黒に */
}

/* ホバー時のバーの変化 */
.hamburger-menu:hover .bar:nth-child(1) {
    transform: translateY(4px);
}
.hamburger-menu:hover .bar:nth-child(2) {
    opacity: 0;
}
.hamburger-menu:hover .bar:nth-child(3) {
    transform: translateY(-4px);
}

/* メニューが開いている時のバーのアニメーション */
.hamburger-menu.active .bar:nth-child(1) {
    transform: translateY(8.5px) rotate(45deg);
    background-color: white; /* ハンバーガーメニューが開いた時のバーの色 (現状維持) */
}

.hamburger-menu.active .bar:nth-child(2) {
    opacity: 0;
}

.hamburger-menu.active .bar:nth-child(3) {
    transform: translateY(-8.5px) rotate(-45deg);
    background-color: white; /* ハンバーガーメニューが開いた時のバーの色 (現状維持) */
}


/* ハンバーガーメニューのナビゲーション（上からスライドイン） */
.nav-hamburger {
    position: fixed;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9); /* 現状維持 */
    transition: top 0.4s ease-in-out;
    z-index: 998;
    
    /* 変更点: ロゴがabsoluteになるため、flexの配置を調整 */
    display: flex; 
    flex-direction: row; 
    /* justify-content: center; */ /* ロゴの位置をabsoluteで調整するため解除または調整 */
    align-items: flex-start; /* 垂直方向を上揃えに */
    padding: 20px; /* 全体のパディングを追加 */
    padding-top: 80px; /* ヘッダーの高さ分、コンテンツ全体を下げる（ロゴは別途調整） */
    box-sizing: border-box; 
    /* ロゴをAbsoluteで配置するため、このFlex設定はメインコンテンツに影響 */
}

.nav-hamburger.active {
    top: 0;
}

/* ハンバーガーメニュー内のロゴ */
.hamburger-logo-link {
    display: block;
    width: 131px; /* ロゴ画像の幅 */
    height: 44px; /* ロゴ画像の高さ */
    z-index: 1002; /* ハンバーガーメニューアイコンよりも上に表示 */
    
    /* 変更点: absolute でヘッダーのロゴと同じ位置に配置 */
    position: absolute;
    top: 18px; /* ヘッダーの高さ80pxの半分から微調整 (80/2 - 44/2 = 18px) */
    left: 20px; /* ヘッダーのpadding-leftと同じ */
    margin: 0; /* 不要なマージンをリセット */

    /* ホバー時の縮小効果を通常のロゴと同じに */
    transform: scale(1); /* デフォルトのスケール（1倍） */
    transition: transform .6s ease; /* スケール変化のトランジション */
}

.hamburger-logo-link:active {
    transform: scale(0.95);
}

.hamburger-logo-link:hover {
    transform: scale(0.95);
}


.hamburger-logo-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* nav-hamburger1 のスタイル */
.nav-hamburger1 {
    flex: 1; 
    max-width: 50%; 
    padding: 0 20px; /* 左右のパディングのみ調整 */
    text-align: left; 
    display: flex;
    flex-direction: column;
    align-items: flex-start; 
    
    /* 変更点: ロゴがabsoluteになったため、コンテンツの上部パディングを調整 */
    padding-top: 80px; /* ロゴが占めていた分（ヘッダーの高さ分）下げる */
}

/* nav-hamburger2 のスタイル */
.nav-hamburger2 {
    flex: 1; 
    max-width: 50%; 
    padding: 0 20px; 
    text-align: left; 
    /*border-left: 1px solid rgba(255, 255, 255, 0.3); */
    
    /* 変更点: ロゴがabsoluteになったため、コンテンツの上部パディングを調整 */
    padding-top: 80px; /* ロゴが占めていた分（ヘッダーの高さ分）下げる */
}


.nav-hamburger2 p {
  color: white; /* テキストの色を白に */
  font-size: 0.6em; /* フォントサイズを調整 */
  border: 1px solid white; /* 1pxの白い実線ボーダーを追加 */
  border-radius: 60px; /* 角を大きく丸める（ほぼカプセル型に） */
  padding: 5px 20px; /* テキストとボーダーの間に上下5px、左右20pxの余白を追加 */
  display: inline-block; /* インライン要素でありながら、幅や高さ、パディング、マージンを設定できるようにする */
}

.nav-hamburger .hamburger-lists {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%; 
}

.nav-hamburger .hamburger-list {
    margin-bottom: 25px;
}
/* --- ハンバーガーメニュー内のリストリンク --- */
.nav-hamburger .hamburger-list a {
    color: white;
    text-decoration: none;
    font-size: 28px; /* デフォルトのフォントサイズ。スマホの@mediaで上書きされます */
    display: inline-block; /* 文字の長さに合わせるためinline-blockにする */
    padding: 10px 0; /* 上下10px、左右0のパディング */
    transition: color 0.2s ease;

    position: relative; /* ::after擬似要素の基準にするため必須 */
    overflow: hidden; /* アニメーションが要素からはみ出さないように隠す */
    padding-bottom: 5px; /* 下線との間に少しスペースを空ける（調整可能） */

    /* ★ここから移動または削除★ */
    /* font-size: 0; */ /* これがnav-hamburger1のテキストを消していた原因 */
    /* color: transparent; */ /* 同上 */
    /* display: flex; */ /* 同上 */
    /* align-items: center; */ /* 同上 */
    /* justify-content: flex-start; */ /* 同上 */
}

/* nav-hamburger1 内の span のスタイルは現状維持 */
.hamburger-list a span {
    line-height: 0.8;
}
.hamburger-list a span:first-child {
    font-size: 1.6em;
    display: block;
    line-height: 0.8;
}
.hamburger-list a span:last-child {
    font-size: 0.6em;
    line-height: 0.8;
}

/* PCでのnav-hamburger1のリンクの下線アニメーションを確実に表示 */
.nav-hamburger1 .hamburger-list a::after {
    content: ''; /* 擬似要素のコンテンツは空 */
    position: absolute; /* 親要素 .nav-hamburger1 .hamburger-list a を基準に配置 */
    bottom: 0; /* 親要素の底部に配置 */
    left: 0; /* 親要素の左端から開始 */
    width: 0; /* 初期状態では幅を0にする */
    height: 1px; /* 下線の太さ */
    background-color: white; /* 下線の色 */
    transition: width 0.3s ease-out; /* width のアニメーションにする */
}

/* ホバー時に下線を100%表示 */
.nav-hamburger1 .hamburger-list a:hover::after {
    width: 100%; /* ホバー時に幅を100%にする */
}

/* PCでのnav-hamburger2内のリストを横並びにする */
.nav-hamburger2 .hamburger-lists {
    display: flex; /* ★追加: Flexboxを有効にして子要素を横並びに */
    justify-content: flex-start; /* ★追加: アイテムを左寄せに */
    align-items: center; /* ★追加: 垂直方向の中央揃え */
    padding: 0; /* ★追加: リストのデフォルトパディングをリセット */
    list-style: none; /* ★追加: リストのマーカーを非表示に */
}

/* PCでのnav-hamburger2内の各リストアイテム（<li>）の調整 */
.nav-hamburger2 .hamburger-list {
    margin-bottom: 0; /* ★追加: 縦方向のマージンを削除 */
    text-align: left; /* ★追加: テキスト（アイコン）を左寄せに */
    padding: 0 5px; /* ★追加: アイテム間のスペースを調整 (必要に応じて) */
    /*width: 32px;*/
}

/* ★ここからnav-hamburger2に特化したSNSアイコンのスタイル★ */
.nav-hamburger2 .hamburger-list a {
    font-size: 0; /* SNSリンク内のテキストを非表示にする */
    color: transparent; /* 念のためテキストの色も透明に */
    display: flex; /* アイコンの配置を制御するためflexboxを使う */
    align-items: center; /* 垂直方向の中央揃え */
    justify-content: flex-start; /* 水平方向の左寄せ */
    /*padding: 10px 0; *//* パディングを調整 */
}

/* nav-hamburger2 の SNSアイコンのリンクには下線アニメーションを適用しない
   というルールを、@media外（PC用）では削除またはコメントアウトします */
/* .nav-hamburger2 .hamburger-list a::after {
    content: none;
} */

/* PCでのnav-hamburger2のSNSアイコンリンクの下線アニメーション */
.nav-hamburger2 .hamburger-list a::after {
    content: ''; /* 擬似要素のコンテンツは空 */
    position: absolute; /* 親要素 .nav-hamburger2 .hamburger-list a を基準に配置 */
    bottom: 0; /* 親要素の底部に配置 */
    left: 0; /* 親要素の左端から開始 */
    width: 0; /* 初期状態では幅を0にする */
    height: 1px; /* 下線の太さ */
    background-color: white; /* 下線の色 */
    transition: width 0.3s ease-out; /* width のアニメーションにする */
}

/* ホバー時に下線を100%表示 */
.nav-hamburger2 .hamburger-list a:hover::after {
    width: 100%; /* ホバー時に幅を100%にする */
}

.nav-hamburger2 .hamburger-list a i {
    font-size: 32px; /* PCでのSNSアイコンのサイズ */
    color: white; /* アイコンの色を白に */
    margin-right: 4px; /* アイコンの右側に4pxの余白 */
    margin-bottom: 0; /* 不要なマージンをリセット */
}

.hamburger-list a span {
    line-height: 0.8;
}

.hamburger-list a span:first-child {
  font-size: 1.6em;
  display: block;
  line-height: 0.8; /* 大きな文字の行の高さを調整 */
    font-family: "Libertinus Mono", monospace;
    font-weight: 400;
    font-style: normal;
}

.hamburger-list a span:last-child {
  font-size: 0.6em;
  line-height: 0.8; /* 小さな文字の行の高さを調整 */
}

/* --- メイン全体のスタイル --- */
main {
    background-color: #f2ecde; /* コンテンツの背景色 */
}

/* --- パンくずリスト --- */
.breadcrumb {
    width: 100%; /* ★変更: 横幅100%に */
    background-color: #f5f5f5; /* ★変更: 背景色を#f5f5f5に */
    padding: 20px 0; /* 上下のパディングを維持し、左右のパディングはolに任せる */
    box-sizing: border-box;
    color: #000;
    font-size: 0.9em;
}

.breadcrumb-list {
    max-width: 1280px; /* ★変更: PCでの横幅を1280pxに設定 */
    margin: 0 auto; /* ★変更: 中央寄せ */
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0 20px; /* ★追加: ul/ol の左右のデフォルトパディングをリセットし、コンテンツに左右のパディングを設定 */
}

.breadcrumb-item {
    display: flex; /* アイコンとテキストを横並びにするため */
    align-items: center;
}

.breadcrumb-item:not(:first-child) {
    margin-left: 10px; /* 区切り記号と次の項目との間隔 */
}

.breadcrumb-separator {
    margin: 0 8px; /* 区切り記号の左右の余白 */
    color: #555; /* 区切り記号の色を少し薄く */
}

.breadcrumb-link {
    text-decoration: none;
    color: #000; /* リンクの文字色を黒に */
    position: relative; /* 下線アニメーションの基準 */
    display: inline-block; /* 下線アニメーションのために必要 */
    padding-bottom: 2px; /* 下線と文字の間に少しスペース */
}

/* 下線アニメーション */
.breadcrumb-link::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0; /* 最初は幅0 */
    height: 1px; /* 下線の太さ */
    background-color: #000; /* 下線の色を黒に */
    transition: width 0.3s ease-out; /* アニメーション設定 */
}

.breadcrumb-link:hover::before {
    width: 100%; /* ホバー時に幅100%に */
}

.breadcrumb-link .fas {
    margin-right: 5px; /* ホームアイコンとテキストの間隔 */
}

.breadcrumb-current-page {
    color: #555; /* 現在のページの色を少し薄く */
    font-weight: bold; /* 現在のページを太字に */
}

/* --- フッター全体のスタイル --- */
.footer {
    background-color: #1c1d1f;
    color: white;
    padding: 60px 0 30px; /* 上部、左右、下部のパディング */
    font-family: 'Zen Kaku Gothic New', sans-serif;
    /* border-topをここに追加し、幅100%にする */
    /* border-top: 1px solid rgba(255, 255, 255, 0.5); /* ★追加: footer全体の上部にボーダーを引く */
}

/* --- フッター上部のコンテナ --- */
.footer-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    /*max-width: 1200px;*/
    margin: 0 auto;
    padding: 20px 20px 40px;
    /* ここにあったborder-bottomは不要になるため削除 */
}

/* --- フッター上部・左側のコンテンツ --- */
.footer-left {
    flex-basis: 50%; /* 親の半分を占める */
    padding-right: 20px; /* 右側の要素との間に余白 */
    box-sizing: border-box;
}

.footer-left .footer-logo img {
    max-width: 180px; /* ロゴ画像のサイズを調整 */
    height: auto;
    margin-bottom: 20px; /* ロゴの下に余白 */
    display: block; /* ブロック要素にして縦並びにする */
}

.footer-left .footer-text {
    font-size: 0.9em;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8); /* 少し薄い白 */
}

/* --- フッター上部・右側のナビゲーション --- */
.footer-right {
    flex-basis: 40%; /* 親の40%を占める (左側と合わせて100%以下に) */
    text-align: right; /* ナビゲーションを右寄せに */
}

.footer-right .footer-nav {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-right .footer-nav li {
    margin-bottom: 10px; /* 各リンクの下に余白 */
}

.footer-right .footer-nav a {
    color: white;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.1em;
    position: relative; /* 下線アニメーションの基準 */
    display: inline-block; /* 下線アニメーションのために必要 */
    padding-bottom: 3px; /* 下線とテキストの間にスペース */
    overflow: hidden; /* アニメーションがはみ出さないように */
}

/* ナビゲーションリンクの下線アニメーション */
.footer-right .footer-nav a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px; /* 下線の太さ */
    background-color: white; /* 下線の色 */
    transform: translateX(-100%); /* 初期状態では左に100%ずらして見えなくする */
    transition: transform 0.3s ease-out; /* アニメーションの速度とイージング */
}

.footer-right .footer-nav a:hover::after {
    transform: translateX(0); /* ホバー時に元の位置に戻して表示 */
}



/* --- フッター下部のコンテナ --- */
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.5); /* ★追加: footer-bottom自体にもボーダーを残して対応 */
    /*max-width: 1200px;*/ /* PCのコンテンツ幅に合わせる */
    margin: 0 auto; /* 中央寄せ */
    padding-top: 20px;
    padding: 20px;
    /* ここにあったborder-topを削除（footer全体に移動したため） */


}

.footer-bottom-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85em;
}

/* --- フッター下部・ソーシャルメディアアイコン --- */
.footer-social {
    display: flex;
    align-items: center;
    gap: 10px; /* テキストとアイコンの間に隙間 */
}

.footer-social p {
    margin: 0; /* デフォルトマージンをリセット */
    font-weight: bold;
}

.footer-social ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 15px; /* アイコン間の隙間 */
}

.footer-social a {
    color: white;
    font-size: 1.5em; /* アイコンのサイズ */
    transition: opacity 0.3s ease;
}

.footer-social a:hover {
    opacity: 0.7;
}

/* --- フッター下部・著作権表示 --- */
.footer-copyright {
    text-align: right;
    margin: 0; /* デフォルトマージンをリセット */
    color: rgba(255, 255, 255, 0.7); /* 少し薄い白 */
}

/* --- スマホ用追尾フッター --- */
.fixed-footer-sp {
    display: none; /* デフォルトで非表示（PCでは表示しないため） */
    position: fixed; /* 画面に固定 */
    bottom: 0; /* 画面下部に配置 */
    left: 0;
    width: 100%;
    background-color: #000; /* 背景色: 黒 */
    color: #fff; /* テキスト色: 白 */
    padding: 10px 15px; /* 上下10px、左右15pxのパディング */
    box-sizing: border-box;
    z-index: 1000; /* 他のコンテンツの上に表示 */
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2); /* 上部に影をつけて浮いているように見せる */
}

.fixed-footer-content {
    display: flex; /* テキストとボタンを横並びに */
    justify-content: space-between; /* 両端に配置 */
    align-items: center; /* 垂直方向中央揃え */
    max-width: 600px; /* 必要であればコンテンツの最大幅を制限 */
    margin: 0 auto; /* 中央寄せ */
}

.footer-campaign-text {
    font-size: 0.9em;
    line-height: 1.4;
    margin: 0; /* デフォルトマージンをリセット */
    flex-grow: 1; /* 残りのスペースを埋める */
    text-align: left; /* テキストは左寄せ */
    padding-right: 10px; /* ボタンとの間隔 */
}

.btn-free-trial {
    display: inline-block;
    padding: 8px 15px;
    background-color: #ff6600; /* 背景色: オレンジ */
    color: #fff; /* 文字色: 白 */
    text-decoration: none;
    border-radius: 20px; /* 角丸 */
    font-size: 0.9em;
    font-weight: bold;
    flex-shrink: 0; /* ボタンが縮まないように */
    transition: background-color 0.3s ease;
    white-space: nowrap; /* ボタン内のテキストが改行されないように */
}

.btn-free-trial:hover {
    background-color: #e65c00; /* ホバー時の色 */
}

/* ////.min-width:751px | 751px ~
---------------------------------------------------------------------
------------
------------
------------
------------
------------
------------
------------
------------
------------
------------
max-width:750px | ~ 750px
------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {

    /* @media screen
  ------------------------------------------------------------------------- */
    /* デスクトップ用ナビゲーションを非表示にする */
    .nav-desktop {
        display: none;
    }

    /* nav-right の要素間の隙間をなくす (デスクトップナビゲーションがないため) */
    .nav-right {
        gap: 0;
    }

    /* ホバー時の真ん中の線の表示（前回の修正） */
    .hamburger-menu:hover .bar:nth-child(2) {
        opacity: 1; /* スマホでホバー時に真ん中の線を消さない */
    }
    .hamburger-menu:hover .bar:nth-child(1),
    .hamburger-menu:hover .bar:nth-child(3) {
        transform: none; /* スマホでホバー時のバーの動きをリセット（不要なら削除） */
    }

    /* ★ここから修正・追加★ */

    /* メニューが開いている時のバーのアニメーション（スマホ用） */
    /* 真ん中の線が確実に消えるように再定義 */
    .hamburger-menu.active .bar:nth-child(2) {
        opacity: 0; /* ★重要: メニューが開いている時は真ん中の線を非表示にする */
    }

    /* 上下のバーが回転してバツになるスタイルも確認・再定義 */
    .hamburger-menu.active .bar:nth-child(1) {
        transform: translateY(8.5px) rotate(45deg);
        background-color: white;
    }

    .hamburger-menu.active .bar:nth-child(3) {
        transform: translateY(-8.5px) rotate(-45deg);
        background-color: white;
    }

    /* ハンバーガーメニューのナビゲーション（開いた時のスタイル） */
    .nav-hamburger {
        /* flex-direction: column; を削除またはコメントアウト */
        flex-direction: row; /* ★変更: 子要素（nav-hamburger1, nav-hamburger2）を横並びにする */
        padding-top: 80px;
        justify-content: space-between; /* ★変更: 子要素間にスペースを均等に配置 */
        align-items: flex-start;
        padding-left: 20px;
        padding-right: 20px;
        /* flex-wrap: wrap; */ /* 必要であれば、幅が足りない場合に折り返す */
    }

    /* ハンバーガーメニュー内のメインコンテンツエリア (TOP, コンセプト, ブログなど) */
    .nav-hamburger1 {
        width: 50%; /* ★変更: 親のnav-hamburgerの半分を占める */
        max-width: none;
        padding: 15px 0;
        text-align: left;
    }

    /* nav-hamburger2 のスタイル (Follow us, Instagram, LINE) */
    .nav-hamburger2 {
        width: 50%; /* ★変更: 親のnav-hamburgerの半分を占める */
        max-width: none;
        padding: 15px 0;
        text-align: left;
        border-left: 1px solid rgba(255, 255, 255, 0.3); /* デスクトップで設定されていた左ボーダーを復活 */
        border-top: none; /* デスクトップのボーダー設定を削除 */
        margin-top: 0; /* 上の要素との間隔を削除 */
    }
    
    /* nav-hamburger2 のスタイル (Follow us, Instagram, LINE) */
    .nav-hamburger2 {
        border-left: none; /* デスクトップで設定されていた左ボーダーを削除 */
    }
    
    /* ハンバーガーメニュー内のロゴ (.hamburger-logo-link) */
    .hamburger-logo-link {
        position: absolute; /* 親要素（.nav-hamburger）を基準に絶対配置 */
        top: 18px; /* ヘッダーのロゴと同じ垂直位置 */
        left: 20px; /* ヘッダーのロゴと同じ水平位置 */
        margin: 0; /* 不要なマージンをリセット */
        align-self: auto; /* Flexアイテムとしての配置を解除 (absoluteになるため) */
    }

    .nav-hamburger .hamburger-list {
        margin-bottom: 4px;
    }

    /* nav-hamburger1 の文字サイズを調整 */
    .nav-hamburger .hamburger-list a {
        font-size: 16px; /* 例えば、28pxから24pxに小さく */
        /* または、さらに小さくしたい場合は 20px などに調整 */
    }

    /* spanのフォントサイズも、必要であれば親要素の調整に合わせて微調整 */
    .hamburger-list a span:first-child {
        font-size: 1.4em; /* 親のaタグのfont-size(24px)に対しての倍率 */
        line-height: 0.8;
    }

    .hamburger-list a span:last-child {
        font-size: 0.5em; /* 親のaタグのfont-size(24px)に対しての倍率 */
        line-height: 1.2;
    }

    .nav-hamburger2 p {
        margin-bottom: 4px;
    }

    /* nav-hamburger2 のリストを横並びにする（変更なし） */
    .nav-hamburger2 .hamburger-lists {
        display: flex;
        /* justify-content: space-around; を削除またはコメントアウト */
        justify-content: flex-start; /* ★変更: アイテムを左寄せにする */
        align-items: center;
        width: 100%;
        padding: 0;
        list-style: none;
    }

    /* 各リストアイテムの調整（変更なし） */
    .nav-hamburger2 .hamburger-list {
        margin-bottom: 0;
        /* flex-grow: 1; を削除またはコメントアウト。アイコンが揃って表示されるように。 */
        text-align: left; /* ★変更: アイコンを左寄せにするため */
        padding: 0 5px; /* ★追加: リストアイテム間のスペースを調整 */
    }

    /* InstagramとLINEのテキストを非表示にする（変更なし） */
    .nav-hamburger2 .hamburger-list a {
        font-size: 0;
        color: transparent;
        display: flex; /* ★変更: アイコンをflexアイテムとして扱う */
        flex-direction: row; /* ★変更: アイコンと非表示テキスト（if any）を横並びにする */
        align-items: center; /* 垂直方向の中央揃え */
        justify-content: flex-start; /* ★変更: アイコンを左寄せにする */
        padding: 10px 0; /* リンクのパディングを左右0に */
    }

    /* アイコンの設定 */
    .nav-hamburger2 .hamburger-list a i {
        color: white;
        font-size: 32px; /* アイコンのサイズ（必要であれば調整） */
        margin-right: 4px; /* ★変更: アイコンの右側に4pxの余白を追加 */
        margin-bottom: 0; /* 不要なマージンをリセット */
    }
    .nav-hamburger2 .hamburger-list a i:first-child {
        font-size: 32px;
    }
    .nav-hamburger2 .hamburger-list a i:last-child {
        font-size: 32px;
    }


    /* ホバー時の下線アニメーションはアイコンには不要なのでリセット（変更なし） */
    .nav-hamburger2 .hamburger-list a::after {
        content: none;
    }

    .breadcrumb {
        padding: 15px 0; /* スマホでのパディング */
        font-size: 0.85em;
    }

    .breadcrumb-list {
        padding: 0 15px; /* スマホでの左右パディング調整 */
    }

    .breadcrumb-item:not(:first-child) {
        margin-left: 8px; /* スマホでの間隔調整 */
    }

    .breadcrumb-separator {
        margin: 0 6px; /* スマホでの区切り記号の余白 */
    }

    .breadcrumb-link .fas {
        font-size: 0.9em; /* スマホでのアイコンサイズ調整 */
    }

    .footer {
        /*padding: 40px 15px 20px;*/
        padding-bottom: 40px;
    }

    .footer-top {
        flex-direction: column; /* 縦並びにする */
        align-items: flex-start; /* ★変更: 左揃えに */
        text-align: left; /* ★変更: テキストも左揃えに */
        padding-bottom: 30px;
    }

    .footer-left {
        flex-basis: auto;
        padding-right: 0;
        margin-bottom: 20px; /* ★変更: footer-rightとの間に余白を調整 */
    }

    .footer-left .footer-logo img {
        max-width: 150px;
        margin: 0; /* ★変更: 左寄せのためマージンをリセット */
    }

    .footer-left .footer-text {
        display: none; /* ★追加: footer-text を非表示にする */
    }

    .footer-right {
        flex-basis: auto;
        text-align: left; /* ★変更: ナビゲーションを左寄せに */
    }

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

    .footer-right .footer-nav a::after {
        background-color: white;
    }

    .footer-bottom {
        max-width: 100%; /* ★変更: スマホでは幅を100%にする */
        margin: 0 auto; /* 中央寄せを維持しつつ、幅100%を適用 */
        padding-top: 15px;
        /* ここにあったborder-topは削除（footer全体に移動したため） */
        border-top: 1px solid rgba(255, 255, 255, 0.5); /* ★追加: footer-bottom自体にもボーダーを残して対応 */

    }

    .footer-bottom-inner {
        flex-direction: column;
        align-items: flex-start;

    }

    .footer-social {
        flex-direction: row; /* ★変更: テキストとアイコンを横並びに戻す */
        margin-bottom: 15px;
        gap: 10px; /* ★変更: テキストとアイコンリストの隙間を調整 */
    }

    .footer-social p {
        margin-bottom: 0; /* デフォルトマージンをリセット */
    }

    .footer-social ul {
        justify-content: flex-start; /* ★変更: アイコンを左寄せに */
    }

    .footer-copyright {
        text-align: left; /* ★変更: 著作権表示を左寄せに */
    }

    .fixed-footer-sp {
        display: block; /* スマホサイズで表示 */
    }

    .footer-campaign-text {
        font-size: 0.85em; /* スマホでのフォントサイズ調整 */
        padding-right: 8px;
    }

    .btn-free-trial {
        padding: 7px 12px;
        font-size: 0.8em;
    }

    /* @media screen
  ------------------------------------------------------------------------- */
}