/* -------------------------------------------------- */
/* PC/モバイル表示切り替えの基本設定 (デフォルトはPC表示) */
/* -------------------------------------------------- */

/* PC表示時 (769px以上) の設定 */
.is-pc-only {
    display: block !important; /* PC用テキストを表示 */
}
.is-sp-only {
    display: none !important;  /* スマホ用テキストを非表示 */
}


/* -------------------------------------------------- */
/* モバイル表示時 (768px以下) の設定 */
/* -------------------------------------------------- */
@media (max-width: 768px) {
    /* モバイル表示時 (768px以下) の設定を上書き */
    .is-pc-only {
        display: none !important;  /* PC用テキストを非表示 */
    }
    .is-sp-only {
        display: table !important; /* スマホ用テキストを表示 */
    }
    
    /* 他の要素もモバイル向けに調整 */
    .trouble_head .inner {
        padding: 0 10px; /* 左右の余白を調整 */
    }
    .trouble_head h2 {
        font-size: 1.8rem; /* タイトルも小さく */
        line-height: 1.4;
    }
}

/* -------------------------------------------------- */
/* PC/モバイル表示切り替えの基本設定 (デフォルトはPC表示) */
/* -------------------------------------------------- */

/* PC表示時 (769px以上) の設定 */
.trouble_head h2.is-pc-only {
    display: block; /* PC用h2テキストを表示 */
}
.trouble_head h2.is-sp-only {
    display: none;  /* スマホ用h2テキストを非表示 */
}


/* -------------------------------------------------- */
/* モバイル表示時 (768px以下) の設定 */
/* -------------------------------------------------- */
@media (max-width: 768px) {
    /* モバイル表示時 (768px以下) の設定を上書き */
    
    .trouble_head h2.is-pc-only {
        display: none;  /* PC用h2テキストを非表示 */
    }
    .trouble_head h2.is-sp-only {
        display: table; /* スマホ用h2テキストを表示 */
        /* 必要に応じて、ここでモバイル用のフォントサイズも調整 */
        font-size: 1.6rem; 
        line-height: 1.4;
    }
}

#main-contents-box {
    background: #fff;
    padding: 0px;
}

#main-contents {
    background: #fff;
    padding: 0px;
}

/* こんなお悩みありませんか？ */
#main-contents .trouble_head{
	position: relative;
	background: #1d1c22;
	text-align: center;
	padding: 0px 10px 50px;
    margin: 44px 0px 0px;
}

#main-contents .trouble_head:after{
	content:"";
	position: absolute;
	z-index: 1;
	left: calc( 50% - 42px );
	bottom: -20px;
	width: 84px;
	height: 22px;
	background: #1d1c22;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}

#main-contents .trouble_head .catch{
	font-size: 16px;
	color: #dfcc9e;
	font-weight: bold;
    padding: 34px 0px 0px;
    margin: 0 auto;
	/* line-height: 2.125; */
}

#main-contents .trouble_head h2{
	display: table;
	margin: 0 auto;
	font-size: 24px;
	color: #fff;
	font-weight: bold;
	line-height: 1.8;
	background: url(../img/partition02/bg_border_bottom.png) 0 100% repeat-x;
}

/*見出し*/
#main-contents .tit_bnr{
	position: relative;
	padding: 25px 5%;
	background: #a30000;
	text-align: center;
	overflow: visible;
}

#main-contents .tit_bnr p{
	font-family: 'Montserrat', sans-serif;
	font-weight: bold;
	color: #dabb70;
}

#main-contents .tit_bnr h2{
	margin: 0 0 0px;
	font-size: 24px;
	font-weight: bold;
	line-height: 1.4;
	color: #fff;
}

#main-contents .tit_bnr::before{
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	width: 4px;
	height: 30px;
	background: #a30000;
	transform: translateX(-50%);
}

/*-------------------
mv
--------------------*/

.k-ben_main {
	background: url(../img/k-ben/sp/bg_main.jpg) 100% 0 / auto 100% no-repeat, url(../img/k-ben/bg_newmain_gray.png) 0 0 / auto 100% no-repeat #aa0000;
	height: 787px;
	text-align: left;
	width: 100%;
	position: relative;
}
.k-ben_main .inner {
	width: 1100px;
	margin: 0 auto;
	padding: 125px 0 0;
	position: relative;
}
.k-ben_main .content{
	width: 787px;
}
.k-ben_main .catch_area .catch {
	display: block;
	width: 573px;
	font-size: 1.5rem;
	margin: 0 0 14px;
	padding: 0 13px 2px;
	/* text-align: center; */
	color: #dfcc9e;
	line-height: 1.5;
	position: relative;
	z-index: 0;
    font-style: italic;
}
.k-ben_main .catch_area .catch::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	width: 92%;
	height: 100%;
	background: #1d1c22;
	transform: skewX(-10deg);
}

.k-ben_main .catch_area .catch02 {
	display: block;
	width: 787px;
	font-size: 4.0rem;
	margin: 0 0 15px;
	padding: 0 0px 0px;
	/* text-align: center; */
	color: #dfcc9e;
	line-height: 1.2;
	position: relative;
	z-index: 0;
    font-weight: bold;
    font-style: italic;
}

/* .k-ben_main .catch_area .catch02::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	width: 93%;
	height: 100%;
	background: #1d1c22;
	transform: skewX(-10deg);
} */

.k-ben_main .catch_area .sub_txt{
	display: inline-block;
	font-size: 3.6rem;
	line-height: 1.6;
	font-weight: bold;
	padding: 0 0 20px;
	color: #222;
	letter-spacing: .05em;
}

.k-ben_main .catch_area .sub_txt_s{
	font-size: 18px;
	line-height: 1.8;
	font-weight: 500;
	margin: 0 0 30px;
    color: #ffffff;
}

.k-ben_main .catch_area .main_txt{
	margin: 0 0 8px;
}
.k-ben_main .catch_area .btn {
	margin: 0 0 40px;
}

/* .k-ben_main .catch_area .btn a {
	display: inline-block;
	padding: 20px 50px 20px 90px;
	border-radius: 10px;
	font-size: 2.5rem;
	font-weight: bold;
	color: #fff;
	line-height: 1.6;
	text-decoration: none;
	text-align: center;
	background: url(../img/k-ben/ico_mail.png) no-repeat 50px center,linear-gradient(90deg, #f24a00 0%, #f27200 100%);
	background-size: 30px auto,auto auto;
	box-shadow: 0px 15px 30px 0px rgba(0,0,0,.18);
} */

.k-ben_main .inner .content .catch_area .btn {
	text-align: center;      /* 中央揃え */
    margin: 20px auto;       /* 上下の余白 */
    width: 100%;             /* 親の幅いっぱいに確保 */
}

.k-ben_main .inner .content .catch_area .btn a {
	display: inline-block;   /* 幅や高さを指定可能にする */
    width: 90%;              /* スマホ画面の横幅90%に設定（端末ごとに可変） */
    max-width: 400px;        /* 大きくなりすぎないよう最大幅を制限 */
    padding: 22px 0;         /* 上下の内側余白（ボタンの高さ） */
    
    background: linear-gradient(90deg, #f24a00 0%, #f27200 100%);
    color: #ffffff;            /* 文字色 */
    text-decoration: none;     /* 下線を消す */
    font-weight: bold;         /* 太文字 */
    border-radius: 8px;        /* 角丸（お好みで） */
    box-sizing: border-box;    /* パディングを含めたサイズ計算にする */
    transition: 0.3s;          /* ホバー時の動きを滑らかに */
    font-size: 1.7rem;
}

ol.path {
    font-size: 10px;
    font-size: 1.0rem;
    margin: 0 0 70px;
    padding: 0;
    list-style-type: none;
    color: #fff;
}

ol.path li {
    float: left;
    padding: 0 5px 0 0;
}
ol.path li:before {
    content: " > ";
}
.path li:first-child:before {
    content: none;
}
ol.path li a,
ol.path li a:visited {
    color: #fff;
}

.novelty-promo-container #path {
    /* (既存のスタイル...) */
    list-style: none; 
    padding: 0;
    margin: 0; /* absoluteを設定する場合はmarginをリセットすることが多い */
    color: #ffffff;

    /* --- 追加 --- */
    position: absolute; /* 要素をフローから切り離し、自由に配置可能にする */
    top: 128px;          /* 親要素の上端から10px下に配置 */
    left: 277px;         /* 親要素の左端から15px右に配置 */
    /* ページの最前面に表示したい場合 */
    z-index: 10; 
    /* ------------ */
    
    display: flex; /* 横並びは維持 */
    flex-wrap: wrap; 
    font-size: 12px;
    /* ...その他の装飾スタイル... */

    /* --- 見やすさのための追加/変更 --- */
    /* background-color: #FFFFFF; */
    /* border-radius: 4px; */
    /* text-shadow: 0 1px 1px rgb(255, 255, 255); */

    
    display: flex; 
    flex-wrap: wrap; 
}

.novelty-promo-container #path .font-white {
    color: #ffffff;
}

.novelty-promo-container .font-white {
    color: #ffffff;
}

#path {
    /* ... (中略: 既存の配置・レイアウトスタイル) ... */
    position: absolute;
    top: 128px;
    left: 277px;
    z-index: 10;
    
    display: flex;
    flex-wrap: wrap;
    font-size: 14px;

    /* (中略: text-shadowなど) */
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); 
}

/* リンク要素（<a>）の文字色を白に設定 */
#path li a {
    text-decoration: none;
    color: #FFFFFF; /* ★ここを白に変更★ */
}

/* ホバー時の設定 (任意: ホバー時も白を維持したい場合はcolor: #FFFFFF;に) */
#path li a:hover {
    text-decoration: underline;
    color: #FFFFFF; /* ホバー時も白を維持 */
}

/* ホームアイコンの色はそのまま目立たせる（この設定は変更しません） */
.red {
    color: #E74C3C; 
    margin-right: 5px;
}

/* 現在地（リンクではない最後の項目）の文字色 */
#path li {
    display: inline;
    /* font-weight: bold; */
}

/* 矢印（»）の色 */
#path li + li:before {
    content: " » "; 
    color: #FFFFFF; /* リンクの文字色に合わせて、矢印も白に変更 */
    padding: 0 5px; 
}

/*固定 お見積もりボタン*/
#main-contents .fix_cv{
	position: fixed;
    z-index: 3;
	/* right: 0;
	bottom: 100px;
	width: 209px;
	z-index: 3; */
	text-align: left;
	/* transition: 0.2s; */

    display: block;
    position: fixed;
    bottom: 20px;       /* 画面下部から20px浮かせる（押しやすく、被り防止） */
    left: 0;
    right: 0;
    text-align: center;
}

#main-contents .fix_cv.hide{
	transform: translateX(calc(100% + 19px));
}

#main-contents .fix_cv a{
	padding: 19px 45px;
	background: linear-gradient(90deg, #f24a00 0,#f27200 50%, #f24a00 100%);
}

#main-contents .fix_cv a::before{
	content: "";
	position: absolute;
	top:4px;
	right: 4px;
	width: 75px;
	height: 42px;
	/* background: url(../img/partition02/sp/ico_cv_btn.gif) 0 0 no-repeat; */
	background-size: contain;
}

#main-contents .fix_cv a:hover{
	color: #fff;
}

#main-contents .fix_cv p{
	display: inline-block;
	padding: 0 87px 0 44px;
	font-size: 15px;
	font-weight: bold;
	line-height: 1;
	white-space: nowrap;
	background: url(../img/partition02/ico_mail.png) 12px 40% no-repeat;
	background-size: 25px auto;
	text-align: left;
}

#main-contents .fix_cv a p {
    margin: 0;
    width: 100%;
    text-align: center;
}

/* 固定目次メニュー */
#main-contents .fix_alink{
	position: fixed;
	z-index: 3;
	right: -214px;
	bottom: 100px;
    width: 214px;
    padding: 10px;
    box-sizing: border-box;
	background: #880000;
    border-radius: 10px 0 0 10px;
    font-size: 15px;
    font-size: 1.5rem;
    font-weight: bold;
	transition: right 0.2s;
}

#main-contents .fix_alink.active{
	right: 0;
}

#main-contents .fix_alink .btn{
	position: absolute;
	z-index: 1;
	left: -37px;
	top: 10px;
	width: 37px;
	height: 100px;
	background: #880000;
    border-radius: 10px 0 0 10px;
    overflow: hidden;
	cursor: pointer;
}

#main-contents .fix_alink .btn:before{
	content:"";
	position: absolute;
	z-index: 1;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: url(../img/partition02/ico_arw_w.png) 50% 50% no-repeat;
	background-size: 7px auto;
	transform: rotate(180deg);
	animation: animOpacity 2s ease-in-out infinite alternate;
}

#main-contents .fix_alink.active .btn:before{
	transform: rotate(0deg);
	animation: none;
}

@keyframes animOpacity {
	0%,100% {opacity: 0;}
	50% {opacity: 1.0;}
}

#main-contents .fix_alink ul.menu{
	margin: 0 0 10px;
	padding: 0;
	list-style-type: none;
    border-radius: 5px;
    overflow: hidden;
    font-size: 15px;
    font-size: 1.5rem;
}

#main-contents .fix_alink ul.menu li{
	margin: 1px 0 0;
}

#main-contents .fix_alink ul.menu li:first-child{
	margin-top: 0;
}

#main-contents .fix_alink ul.menu li a{
	display: block;
	/*background: #ededed;*/
	background: #fff;
	padding: 10px 14px 9px;
	min-height: 34px;
	box-sizing: border-box;
}

#main-contents .fix_alink .content > a{
	display: block;
	padding: 10px 11px 9px 25px;
	border-radius: 5px;
	color: #fff;
	background: linear-gradient(90deg, #f24a00 0,#f27200 50%, #f24a00 100%);
}

#main-contents .fix_alink .content > a:hover{
	color: #fff;
}

#main-contents .fix_alink .content > a p{
	display: inline-block;
	padding: 0 0 0 40px;
	font-size: 15px;
	font-size: 1.5rem;
	font-weight: bold;
	line-height: 1.3;
	background: url(../img/partition02/ico_mail.png) 0 40% no-repeat;
    background-size: 25px auto;
	text-align: left;
}

/* ベーススタイル＆リセット */
/* 全体を覆う暗い背景色のコンテナ */
.novelty-promo-container {
    background-image: url(../img/k-ben/img-header_03.jpg);
    background-size: cover; /* コンテナ全体を覆うように拡大・縮小 */
    background-position: center; /* 画像を中央に配置 */
    background-repeat: no-repeat; /* 画像の繰り返し表示を防ぐ */
    background-color: #808080; /* 画像の背景色に近いグレー */

    /* --- 追加 --- */
    position: relative; /* 子要素のabsolute配置の基準とする */
    /* ------------ */
}

.novelty-promo-container-sub {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 91vh; /* 画面全体に広げる */
    font-family: 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif; /* 日本語に適したフォント */
    padding: 50px 0px 0px 0px;
    box-sizing: border-box;
}

/* 中央の白いコンテンツボックス */
.novelty-promo-content-box {
    background-color: #ffffff;
    padding: 40px 60px; /* 上下の余白と左右の余白を調整 */
    text-align: center;
    max-width: 750px; /* 最大幅を設定 */
    width: 100%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 軽い影 */
    box-sizing: border-box;
}

/* サブタイトル */
.novelty-promo-subtitle {
    font-size: 23px;
    margin-bottom: 0px;
    color: #535353;
    font-family: "ヒラギノ角ゴ Std", "Hiragino Kaku Gothic Std", sans-serif;
    font-weight: 800;
}

/* メインタイトル */
.novelty-promo-container .novelty-promo-container-sub .novelty-promo-content-box .novelty-promo-title {
    font-family: "ヒラギノ角ゴ Std", "Hiragino Kaku Gothic Std", sans-serif;
    font-weight: 800;
    font-size: 45px;
    color: #535353;
    margin-top: 19px;
    margin-bottom: 45px;
    /* line-height: 1.5; */
    letter-spacing: -0.03em;
    /* --- 修正箇所 --- */
    /* font-family の先頭に W8 を優先する指定を追加 */
    /* font-family: 'Hiragino Kaku Gothic StdN', 'Hiragino Kaku Gothic Std', 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif; */
}

/* アイテムタグのコンテナ */
.novelty-promo-item-tags {
    margin-bottom: 8px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap; /* 必要に応じて折り返し */
    gap: 0px 8px; /* タグ間のスペース */
}

/* 個別のタグ */
.novelty-promo-tag {
    display: inline-block;
    padding: 0px 8px;
    background-color: #535353; /* タグの背景色 */
    color: #ffffff;
    font-size: 10px;
    border-radius: 30px;
    /* border: 1px solid #ccc; */
    white-space: nowrap; /* テキストの折り返しを防ぐ */
    font-weight: bold;
}

/* 赤いボタン */
.novelty-promo-container .novelty-promo-container-sub .novelty-promo-content-box .novelty-promo-button {
    display: block;
    width: fit-content; /* 内容の幅に合わせる */
    margin: 17px auto; /* 中央揃え */
    padding: 20px 50px 16px 54px;
    background-color: #c63129; /* 赤色 */
    color: #ffffff;
    text-decoration: none; /* 下線なし */
    font-weight: bold;
    font-size: 18px;
    border-radius: 4px;
    transition: background-color 0.3s;
}

.novelty-promo-container .novelty-promo-container-sub .novelty-promo-content-box .novelty-promo-button:hover {
    background-color: #d62839; /* ホバー時の色 */
}

/* ボタン内の矢印 */
.novelty-promo-arrow {
    margin-left: 10px;
}

/* フッターテキスト */
.novelty-promo-footer-text {
    font-size: 14px;
    color: #555;
    line-height: 1.6;
    margin-top: 20px;
}

/* ベーススタイル＆リセット */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Noto Sans JP', sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #fff;
    font-size: 16px;
}

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

ul {
    list-style: none;
}

.section-padding {
    padding: 0px 20px 100px;
    max-width: 600px;
    margin: 0 auto;
}

.background-gray {
    background-color: #f7f7f7;
}

.section-heading {
    text-align: center;
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 10px;
    letter-spacing: 0.1em;
}

.section-subtext {
    text-align: center;
    margin-bottom: 40px;
    font-size: 14px;
    color: #666;
}

/* CTAボタン共通スタイル */
.button-container {
    text-align: center;
    margin-top: 40px;
}

.cta-button {
    display: inline-block;
    padding: 15px 40px;
    font-size: 18px;
    font-weight: 700;
    border-radius: 4px;
    transition: background-color 0.3s;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.primary-cta {
    background-color: #e3001b; /* 赤色 */
    color: #fff;
    border: 2px solid #e3001b;
}

.primary-cta:hover {
    background-color: #c90017;
}

.secondary-cta {
    background-color: transparent;
    color: #e3001b;
    border: 2px solid #e3001b;
}

.secondary-cta:hover {
    background-color: #e3001b;
    color: #fff;
}


/* --------------------------------------------------
   Header
   -------------------------------------------------- */
.header {
    background-color: #fff;
    border-bottom: 1px solid #eee;
    padding: 10px 20px;
}

.header-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 24px;
    font-weight: 700;
    color: #e3001b; /* ロゴカラーを赤に */
}

.global-nav ul {
    display: flex;
    gap: 20px;
}

.global-nav a {
    font-size: 14px;
    padding: 5px 0;
}

.nav-contact {
    color: #e3001b;
    font-weight: 700;
}

.menu-button {
    display: none; /* PC表示では非表示 */
    padding: 8px 15px;
    background: #333;
    color: #fff;
    border: none;
    cursor: pointer;
}

/* --------------------------------------------------
   Hero Section
   -------------------------------------------------- */
.hero-section {
    background-image: url('img/img-header.jpg'); /* 実際の画像に差し替えてください */
    background-color: #f0f0f0; /* 背景が透けている部分の代替色 */
    background-size: cover;
    background-position: center;
    height: 450px; /* 高さの調整 */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
    /* デザインのメインビジュアル上部の赤いラインを再現 */
    border-top: 5px solid #e3001b;
}

.hero-content {
    /* 画像の上のテキストを強調するためのスタイル */
    background-color: rgba(255, 255, 255, 0.85);
    padding: 20px 40px;
    border-radius: 5px;
}

.hero-subtitle {
    font-size: 16px;
    font-weight: 400;
    color: #e3001b;
}

.hero-title {
    font-size: 40px;
    font-weight: 900;
    color: #e3001b;
    margin: 10px 0;
}

.hero-description {
    font-size: 18px;
    font-weight: 700;
    color: #333;
}

/* --------------------------------------------------
   Goods Section
   -------------------------------------------------- */
.goods-section-main {
    background-color: #ffffff;
}

.goods-section .section-heading {
    color: #333;
}

/* --- ノベルティ・販促グッズ一覧セクション --- */

.goods-list-section {
    text-align: center;
    padding: 60px 20px; /* 上下の余白を調整 */
    font-family: 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;
    background-color: #ffffff; /* 白背景を想定 */
}

/* 英語の見出し */
.goods-list-heading-en {
    /* フォントの指定 */
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    
    /* 画像の見た目に合わせる調整 */
    font-size: 4.5rem; 
    font-weight: 400;
    color: #dfcc9e; /* 薄いグレー */
    letter-spacing: 0px; /* 文字間隔を広めに */
    margin-top: 0;
    margin-bottom: 5px;
    line-height: 1;
}

/* 日本語の見出し */
.goods-list-heading-ja {
    font-size: 2rem;
    font-weight: bold;
    color: #333333; /* 濃いグレー */
    margin-top: 0px;
    margin-bottom: 5px;
    padding-bottom: 30px;
    position: relative;
    line-height: 1.2;
}

/* テキストコンテナ */
.goods-list-text-box {
    max-width: 800px; /* テキストの最大幅を設定 */
    margin: 0 auto;
    color: #555555;
    line-height: 1.8;
}

.goods-list-text-box p {
    margin: 0px 0;
    font-size: 13px;
    line-height: 1.7;
}

/* --- 商品リスト グリッド --- */

.goods-item-grid {
    display: grid;
    /* 3列レイアウトを定義。各列は均等幅 */
    grid-template-columns: repeat(3, 1fr); 
    gap: 50px 20px; /* 行と列の間のスペース */
    max-width: 1200px; /* グリッドの最大幅 */
    margin: 0 auto;
    padding: 0 10px;
}

/* 商品個別のコンテナ */
.goods-item {
    text-align: left;
    height: 100%;
}

.goods-item-link {
    display: block;
    text-decoration: none;
    color: inherit;
    height: 100%;
    transition: opacity 0.3s;
}

.goods-item-link:hover {
    opacity: 0.9;
}

/* 商品画像とタイトルの間のボックス */
.goods-item-image-box {
    height: auto; /* 画像の高さ固定 */
    overflow: hidden; /* はみ出しを隠す */
    margin-bottom: 15px;
    border: 1px solid #eeeeee; /* 画像の枠線 */
    display: flex; /* 画像の配置調整用 */
    justify-content: center;
    align-items: center;
}

.goods-item-image {
    width: 100%;
    height: 50%;
    object-fit: cover; /* 画像がボックスを覆うように調整 */
    display: block;
}

/* ペンやストラップなど、縦長または横長の画像に対応するための調整（必要に応じて） */
.goods-item-image-box--narrow .goods-item-image,
.goods-item-image-box--pen .goods-item-image {
    /* 必要に応じて、特定の画像で contain に変更して全体表示を優先 */
    /* object-fit: contain; */
    /* containにした場合、背景色を白にする */
    background-color: #ffffff; 
}


/* 商品タイトル */
.goods-item-title {
    font-size: 20px;
    font-weight: bold;
    color: #333333;
    margin: 0 0 8px;
}

/* 商品説明文 */
.goods-item-description {
    font-size: 1.3rem;
    color: #666666;
    line-height: 1.7;
    margin: 0;
}


/* --- レスポンシブ対応 (モバイル向け) --- */
@media (max-width: 768px) {
    .goods-item-grid {
        /* 画面幅が狭い場合は2列にする */
        grid-template-columns: repeat(2, 1fr);
        gap: 20px 15px;
    }
    .goods-list-heading-en {
        font-size: 4.5rem;
    }
}

@media (max-width: 480px) {
    .goods-item-grid {
        /* さらに狭い場合は1列にする */
        /* grid-template-columns: 1fr; */
        grid-template-columns: repeat(2, 1fr);
        gap: 20px 15px;
    }
}

/* --- 商品画像コンテナ --- */
.goods-list-image-container {
    margin: 40px auto 30px; /* 上下の余白と中央寄せ */
    max-width: 300px; /* 画像の最大幅を適宜設定 */
}

/* 画像へのリンク */
.goods-list-image-link {
    display: block;
    border: 1px solid #ddd; /* 視認性のため枠線を追加（任意） */
    transition: opacity 0.3s;
}

.goods-list-image-link:hover {
    opacity: 0.8; /* ホバーで少し透明度を下げてリンクであることを示す */
}

/* 実際の画像要素 */
.goods-list-image {
    width: 100%; /* コンテナの幅いっぱいに表示 */
    height: auto;
    display: block; /* 不要な下部の隙間を消す */
}

.goods-grid {
    display: grid;
    /* PC: 4列、タブレット: 3列、SP: 2列のレスポンシブなグリッドレイアウト */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.goods-card {
    border: 1px solid #ddd;
    border-radius: 5px;
    overflow: hidden;
    text-align: center;
    transition: box-shadow 0.3s;
}

.goods-card:hover {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.goods-image.placeholder {
    height: 150px;
    background-color: #f0f0f0;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #666;
    margin-bottom: 10px;
}

.goods-title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 5px;
    padding: 0 10px;
}

.goods-desc {
    font-size: 12px;
    color: #666;
    padding: 0 10px 15px;
}

/* --- お問い合わせセクション (image_fab59f.png) --- */
.contact-section {
    padding: 40px 0px 30px;
    background-color: #ffffff;
    text-align: center;
}

.contact-text-box {
    margin-bottom: 30px;
}

.contact-goal {
    font-size: 20px;
    font-weight: bold;
    color: #333333;
    margin: 15px 0;
    line-height: 1.5;
}

.contact-message {
    font-size: 16px;
    color: #666666;
    margin: 5px 0;
}

/* 赤いボタン */
.contact-section .contact-button {
    display: inline-block;
    padding: 25px 17px;
    background-color: #c93433; /* 赤色 */
    color: #ffffff;
    text-decoration: none;
    font-weight: bold;
    font-size: 18px;
    border-radius: 50px; /* 角を丸く */
    transition: background-color 0.3s;
}

.contact-button:hover {
    background-color: #a72a2a;
}

/* ボタン内の矢印 */
.contact-arrow {
    margin-left: 10px;
}

/* --- セクション全体のコンテナ --- */
.section-container {
    font-family: 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;
    text-align: center;
    background-color: #ffffff;
}

/* --- グリッド共通設定 --- */
.grid-container {
    display: grid;
    gap: 20px; 
    max-width: 960px;
    margin: 0 auto;
    padding: 0 10px;
}

.item-title {
    font-size: 18px;
    font-weight: bold;
    color: #333333;
    margin: 0 0 8px;
}

.item-description {
    font-size: 13px;
    color: #666666;
    line-height: 1.6;
    margin: 0;
}

.service-section {
    padding: 60px 20px 0;
}

.service-title-en {
    font-size: 36px;
    font-weight: bold;
    color: #888888;
    margin-bottom: 5px;
}

.service-title-ja {
    font-size: 20px;
    font-weight: bold;
    color: #333333;
    margin-bottom: 25px;
}

.service-description {
    max-width: 700px;
    margin: 0 auto 40px;
    font-size: 14px;
    line-height: 1.8;
    color: #555555;
}

.service-item-grid {
    /* 3列レイアウト */
    grid-template-columns: repeat(3, 1fr);
    /* grid-container の設定を継承 */
    display: grid;
    gap: 20px; 
    max-width: 960px;
    margin: 0 auto 40px;
    padding: 0 10px;
}

.service-item {
    text-align: left;
    border: 1px solid #eeeeee;
}

.service-image-box {
    height: 150px; /* 画像の高さ固定 */
    overflow: hidden;
    position: relative;
}

.service-item-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.service-item-title {
    /* 共通設定を上書き */
    font-size: 18px;
    font-weight: bold;
    color: #333333;
    padding: 15px 10px 5px;
    margin: 0;
}

.service-item-description {
    /* 共通設定を上書き */
    font-size: 13px;
    color: #666666;
    line-height: 1.6;
    padding: 0 10px 15px;
    margin: 0;
}

/* サービスセクション下のフッター (画像 fa53a8.png の下部) */
.service-contact-footer {
    max-width: 960px;
    margin: 0 auto 60px;
    padding: 20px;
    border-top: 1px solid #eee;
}

.service-contact-footer p {
    font-size: 14px;
    line-height: 1.8;
    color: #555;
    margin: 5px 0;
}

.novelty-section {
    padding: 140px 20px 20px;
    background-color: #f8f8f8; /* 背景を薄いグレーに (画像に合わせて) */
}

/* 英語の見出し */
.novelty-header-en {
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-size: 4.5rem; 
    font-weight: 500;
    color: #dfcc9e; 
    letter-spacing: 0px;
    margin-top: 0;
    margin-bottom: 5px;
    line-height: 1;
}

/* 日本語の見出し */
.novelty-header-ja {
    font-family: 'Hiragino Kaku Gothic StdN', 'Hiragino Kaku Gothic Std', 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;
    font-size: 2rem;
    font-weight: 500;
    color: #333333; 
    margin-top: 5px;
    margin-bottom: 30px;
}

/* 説明文コンテナ */
.novelty-header-text-box {
    max-width: 600px;
    margin: 0 auto 50px; 
    color: #555555;
    line-height: 1.8;
}

.novelty-header-text-box p {
    margin: 0px 0;
    font-size: 13px;
    line-height: 1.7;
}

/* 商品リスト グリッド */
.novelty-item-grid {
    /* 3列レイアウト */
    grid-template-columns: repeat(3, 1fr); 
    /* grid-container の設定を継承 */
    display: grid;
    gap: 20px; 
    max-width: 960px;
    margin: 0 auto;
    padding: 0 10px;
}

/* 商品個別のコンテナ */
.novelty-item {
    text-align: left;
    border: 1px solid #eeeeee;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
}

.novelty-item-link {
    /* display: flex; */
    flex-direction: column;
    text-decoration: none !important;
    color: inherit;
    height: 100%;
    transition: opacity 0.3s;

    display: block;
}

.novelty-item-link {
    /* 1. 下線を完全に消す（前回の質問内容も考慮） */
    text-decoration: none;

    /* 2. リンクの色を親要素から継承する（グローバルなリンクカラー設定を無視） */
    /* 親要素（ここでは.novelty-item-contentなど）で設定された色を強制的に使う */
    color: inherit; 
    
    /* 3. マウスカーソルが当たったとき（:hover）の影響を排除 */
    /* ホバー時の下線表示や色変更を防ぎます */
    transition: none; /* ホバー時のアニメーションも無効化したい場合 */
}

/* 4. リンク訪問済み、ホバー、アクティブ時のスタイルを上書き */
/* グローバルな a:visited, a:hover の設定を無効化します */
.novelty-item-link:visited,
.novelty-item-link:hover,
.novelty-item-link:active {
    text-decoration: none !important; /* 下線をつけない */
    color: inherit;        /* 色を継承 */
}

/* 5. リンク内のタイトル（h4）もグローバルのリンクカラーを継承しないように防御 */
/* リンクタグの中にh4要素が入っているため、h4要素がリンクカラーに影響されないようにします */
.novelty-item-link .novelty-item-title {
    color: #333333; /* または指定したい特定の色 */
    text-decoration: none !important;
    /* グローバルなaタグの色設定よりも、この指定が優先されます */
}

/* -------------------------------------- */
/* 4. オーバーレイの設定 (擬似要素 :after) */
/* -------------------------------------- */
.novelty-item-image-box:after {
    content: ""; /* 擬似要素には必須 */
    /* 画像ボックス全体を覆うように絶対配置 */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* -------------------------------------- */
/* 5. ホバー時の処理 */
/* -------------------------------------- */

/* ★ホバー時、タイトルをさらに上にずらす★ */
.novelty-item-link:hover .novelty-item-title {
    /* カード全体の移動（-5px）に加えて、タイトルも-3px追加で移動 */
    /* これにより、タイトルがより強調されて動いているように見える */
    color: #da1d1d; /* オプション: ホバー時に色を変える */
}

/* リンク全体にカーソルが合ったとき */
.novelty-item-link:hover .novelty-item-image-box:after {
    /* 不透明度を0.3に設定（薄い白色のオーバーレイ） */
    /* opacity: 0.3; */
    opacity: 1;
}

/* リンクにカーソルが合ったときのスタイル（ホバー時） */
.novelty-item-link:hover .novelty-item-image-box {
    /* 不透明度を0.3に設定 -> 薄い白のオーバーレイがかかる */
    opacity: 0.3;
}

/* -------------------------------------- */
/* 6. コンテンツ部分 (必要に応じて調整) */
/* -------------------------------------- */
.novelty-item-content {
    padding: 15px 10px;
    /* text-align: center; */
}

.novelty-item-title {
    margin: 0 0 5px 0;
    font-size: 1.1rem;
}

.novelty-item-description {
    margin: 0;
    font-size: 0.9rem;
    color: #666;
}

/* 商品画像ボックス */
.novelty-item-image-box {
    width: 100%;
    /* 画像の縦横比を制御 */
    padding-top: 75%; 
    position: relative;
    /* overflow: hidden; */
    border-bottom: 1px solid #eee;
}

.novelty-item-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;

    transition: transform 0.3s ease;
}

/* 商品の内容（タイトルと説明文） */
.novelty-item-content {
    padding: 25px 15px;
    flex-grow: 1;
}

.novelty-item-title {
    font-size: 24px;
    font-weight: bold;
    color: #333333;
    margin: 0 0 8px;
    line-height: 1.5;
}

.novelty-item-description {
    font-size: 1.6rem;
    color: #666666;
    line-height: 1.9;
    margin: 0;
}

/* --- お問い合わせセクション (image_fab59f.png) --- */
.contact-footer-section {
    /* padding: 40px 20px 80px; */
    background-color: #f8f8f8;
}

.contact-text-box {
    margin-bottom: 30px;
}

/* 赤いボタン 共通設定 */
.contact-footer-section .contact-button {
    display: inline-block;
    background-color: #c93433; /* 赤色 */
    color: #ffffff;
    text-decoration: none;
    font-weight: bold;
    border-radius: 50px; 
    transition: background-color 0.3s;
    font-size: 18px;
    padding: 20px 16px;
}

.contact-button:hover {
    background-color: #a72a2a;
}

/* 大きいボタン (fab59f.png) */
.contact-button--large {
    padding: 15px 40px;
    font-size: 18px;
    border-radius: 30px;
}

/* 小さいボタン (fa53a8.png の下部) */
.contact-button--small {
    padding: 10px 30px;
    font-size: 14px;
    border-radius: 4px; /* 画像に合わせて角の丸みを調整 */
    display: block;
    width: fit-content;
    margin: 15px auto 0;
}

/* ボタン内の矢印 */
.contact-arrow {
    margin-left: 10px;
}

@media (max-width: 768px) {
    /* サービスセクション、ノベルティセクションの両方で2列に */
    .service-item-grid,
    .novelty-item-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .novelty-header-en {
        font-size: 4.5rem;
    }
}

@media (max-width: 480px) {
    /* さらに狭い場合は1列に */
    .service-item-grid,
    .novelty-item-grid {
        /* grid-template-columns: 1fr; */
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 赤いボタン 共通設定 */
.booth-contact-button {
    display: inline-block;
    background-color: #c93433; /* 赤色 */
    color: #ffffff;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s;
}

.booth-contact-button:hover {
    background-color: #a72a2a;
}

.booth-contact-button--red {
    border-radius: 30px;
    padding: 15px 40px;
    font-size: 18px;
    margin-top: 20px;
}

.booth-contact-button--small {
    padding: 10px 30px;
    font-size: 14px;
    border-radius: 4px; /* 画像 fa53a8.png に合わせて角の丸みを調整 */
    display: block;
    width: fit-content;
    margin: 15px auto 0;
}

.booth-contact-button--large {
    border-radius: 30px; /* 画像 fab59f.png に合わせて角を丸く */
}

.booth-contact-arrow {
    margin-left: 10px;
}


/* ==================================== */
/* === 1. イベントブースセクション === */
/* ==================================== */
.event-booth-section {
    padding: 60px 20px;
    background-color: #ffffff;
}

.event-booth-section-slider {
    padding: 60px 20px;
    background-color: #ffffff;
    position: relative; /* ← これを追加！ボタンの配置基準になります。 */
}

.event-booth-title-en {
    font-size: 36px;
    font-weight: bold;
    color: #cccccc;
    letter-spacing: 2px;
    margin-top: 0;
    margin-bottom: 5px;
}

.event-booth-title-ja {
    font-size: 20px;
    font-weight: bold;
    color: #333333;
    margin-bottom: 15px;
}

.event-booth-subtitle {
    font-size: 13px;
    color: #555555;
    line-height: 1.6;
    margin: 0 auto 30px;
    max-width: 600px;
}

/* --- スライダーエリア --- */
.booth-slider-area {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

.booth-slider-track {
    display: flex;
    transition: transform 0.5s ease-in-out; /* スライドのアニメーション */
    width: 400%; /* トラックの初期幅 */
}

.booth-slider-item {
    min-width: 100%; /* アイテムがトラックの幅に合わせて表示されるようにする */
    box-sizing: border-box;
}

.booth-slider-image {
    width: 100%;
    height: auto;
    display: block;

    z-index: 1;
}

.booth-slider-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5); /* 半透明の黒 */
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    z-index: 10;
    font-size: 24px;
    line-height: 1;
    height: 50px;
    width: 50px;
    border-radius: 50%; /* 丸いボタン */
    margin: 0 10px; /* スライダーエリアとの間に少しマージンを入れる */
}

.booth-nav-prev {
    left: 10px;
    transform: translate(-50%, -50%); /* 自身の幅の半分だけさらに外側へ */
}

.booth-nav-next {
    right: 10px;
    transform: translate(50%, -50%); /* 自身の幅の半分だけさらに外側へ */
}

.booth-slider-nav:focus {
    outline: none;
}

.event-booth-footer-text {
    font-size: 14px;
    color: #555555;
    line-height: 1.6;
    margin: 30px auto 20px;
    max-width: 600px;
}


/* ==================================== */
/* === 共通・ベーススタイル === */
/* ==================================== */
.integrated-section-container {
    font-family: 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;
    text-align: center;
    background-color: #ffffff;
    padding: 60px 12px 100px;
}

/* 親コンテナ: スライダー全体を包含し、中央寄せと位置決めを行う */
.booth-gallery-slider-container {
    position: relative;
    max-width: 900px; /* スライダーの最大幅 */
    margin: 40px auto; /* 中央寄せ */
    overflow: hidden; /* スライドのアニメーション時にみ出さないように */
    user-select: none; /* テキスト選択を無効化 */
}

/* スライドのラッパー */
.booth-gallery-slides-wrapper {
    /* 画像の幅に合わせて調整 */
    width: 100%;
    /* overflow: hidden; */ /* スライドのアニメーションをより細かく制御したい場合は、JavaScript側でoverflowを調整 */
}

/* 個々のスライド */
.booth-gallery-slide {
    display: none; /* デフォルトで非表示 */
    transition: opacity 0.5s ease-in-out; /* フェードアニメーション用 */
}

/* 現在表示中のスライド */
.booth-gallery-slide.active {
    display: block;
}

/* 画像スタイル */
.booth-gallery-image {
    width: 100%;
    height: auto;
    display: block;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* 画像に影をつけて浮き出し感を出す */
}

/* 矢印ボタンの共通スタイル */
.booth-gallery-prev-btn,
.booth-gallery-next-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.5); /* 半透明の黒背景 */
    color: white;
    border: none;
    outline: none;
    width: 50px;
    height: 50px;
    border-radius: 50%; /* 円形にする */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    transition: background 0.3s;
}

.booth-gallery-prev-btn:hover,
.booth-gallery-next-btn:hover {
    background: rgba(0, 0, 0, 0.7); /* ホバーで少し濃くする */
}

/* 矢印ボタンのアイコン (矢印記号) */
.arrow-icon {
    font-size: 20px;
    font-weight: bold;
    line-height: 1;
}

/* 左矢印ボタンの位置 */
.booth-gallery-prev-btn {
    left: 20px;
}

/* 右矢印ボタンの位置 */
.booth-gallery-next-btn {
    right: 20px;
}

/* 親コンテナ */
.booth-setup-container {
    text-align: center;
    font-family: 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif; /* フォント指定 */
    background-color: #ffffff; /* 背景色 */
    max-width: 800px; /* 最大幅の指定（任意） */
    margin: 0 auto; /* 中央寄せ（任意） */
}

/* 吹き出しのラッパー */
.booth-setup-balloon-wrapper {
    position: relative;
    /* display: inline-block;
    margin-bottom: 20px; */
    /* 添付画像の位置（タイトルより左上）に合わせて調整 */
    top: 94px;
    left: 50%;
    transform: translateX(calc(-194% - 242px)); /* 中央から左にオフセット */
    width: 150px; /* 吹き出しの幅に合わせて調整 */
    height: auto;
    z-index: 10;
}

/* 吹き出しのテキスト */
.booth-setup-balloon-text {
    background-color: #ffffff;
    border: 1px solid #555555;
    border-radius: 20px;
    padding: 8px 18px;
    font-size: 14px;
    color: #333333;
    font-weight: bold;
    display: inline-block;
    /* position: relative; */
    z-index: 10;
    margin: 0;
}

/* 吹き出しの「しっぽ」部分（擬似要素で作成） */
/* .booth-setup-balloon-wrapper::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 15px 10px 0 10px;
    border-color: #555555 transparent transparent transparent;
    z-index: 5;
} */

/* 吹き出しの「しっぽ」の中身（白抜き部分） */
/* .booth-setup-balloon-wrapper::before {
    content: '';
    position: absolute;
    bottom: -13px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 15px 10px 0 10px;
    border-color: #ffffff transparent transparent transparent;
    z-index: 6;
} */


/* メインタイトル (EVENT BOOTH SETUP) */
.booth-setup-main-title {
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-size: 4.5rem;
    font-weight: 500; /* 極太 */
    color: #dfcc9e; /* 薄い灰色 */
    letter-spacing: 0em; /* 文字間隔 */
    /* margin: 0 0 10px 0; */
    line-height: 1.2;
}

/* サブタイトル (展示・イベントブースの設営) */
.booth-setup-sub-title {
    font-size: 2rem;
    font-weight: 700;
    color: #333333; /* 濃いめの色 */
    margin: 0 0 30px 0;
    line-height: 1.2;
}

/* 説明文 */
.booth-setup-description {
    font-size: 13px;
    color: #555555;
    line-height: 1.8;
    margin: 0;
    padding: 0 0px; /* 左右に少し余白 */
}

/* 共通ボタン設定 */
.booth-event-section .booth-contact-btn {
    display: inline-block;
    background-color: #c93433; /* 赤色 */
    color: #ffffff;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s;
    font-size: 18px;
    padding: 20px 20px;
    border-radius: 50px;
}

.booth-contact-btn:hover {
    background-color: #a72a2a;
}

.booth-setup-image {
    width: 245px; /* 親要素の幅いっぱいに画像を表示 */
    height: auto;
    display: block;
}

/* 丸いボタン (ブース、FLOWセクション) */
.booth-contact-btn--round {
    padding: 12px 30px;
    border-radius: 30px; 
}

/* 角丸のボタン (サービスセクション) */
.booth-contact-btn--square {
    padding: 10px 30px;
    border-radius: 4px; 
    font-size: 14px;
    display: block;
    width: fit-content;
    margin: 15px auto 0;
}

/* 大きめの丸いボタン (共通フッター) */
.booth-contact-btn--large {
    font-size: 18px;
    padding: 15px 40px;
}

.btn-arrow {
    margin-left: 10px;
}

/* 共通グリッドコンテナ */
.grid-container-base {
    display: grid;
    gap: 20px; 
    max-width: 960px;
    margin: 0 auto;
    padding: 0 10px;
}


/* ==================================== */
/* === 1. 展示・イベントブースセクション === */
/* ==================================== */
.booth-event-section {
    /* padding: 0px 100px; */
    background-color: #ffffff;
}

.booth-title-en {
    font-size: 36px;
    font-weight: bold;
    color: #cccccc;
    letter-spacing: 2px;
    margin-top: 0;
    margin-bottom: 5px;
}

.booth-title-ja {
    font-size: 20px;
    font-weight: bold;
    color: #333333;
    margin-bottom: 15px;
}

.booth-subtitle {
    font-size: 13px;
    color: #555555;
    line-height: 1.6;
    margin: 0 auto 30px;
    max-width: 600px;
}

.booth-slider-display {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
}

.booth-main-image {
    width: 100%;
    height: auto;
    display: block;
}

.booth-nav-prev,
.booth-nav-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    z-index: 5;
    font-size: 24px;
    height: 50px;
    width: 50px;
    border-radius: 50%;
}

.booth-nav-prev {
    left: 10px;
}

.booth-nav-next {
    right: 10px;
}

.booth-footer-text {
    font-size: 15px;
    color: #555555;
    line-height: 1.7;
    margin: 30px auto 40px;
    /* max-width: 600px; */
}


/* ==================================== */
/* === 2. サービス一覧セクション === */
/* ==================================== */
.service-list-section {
    padding: 60px 20px 0;
    background-color: #f0f0f0; 
}

.service-title-en {
    font-size: 36px;
    font-weight: bold;
    color: #888888;
    margin-bottom: 5px;
}

.service-title-ja {
    font-size: 20px;
    font-weight: bold;
    color: #333333;
    margin-bottom: 25px;
}

.service-description {
    max-width: 700px;
    margin: 0 auto 40px;
    font-size: 14px;
    line-height: 1.8;
    color: #555555;
}

.service-item-grid {
    @extend .grid-container-base;
    grid-template-columns: repeat(3, 1fr);
    margin-bottom: 40px;
}

.service-item {
    text-align: left;
    background-color: #ffffff;
    border: 1px solid #eeeeee;
}

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

.service-image-box {
    height: 150px;
    overflow: hidden;
    position: relative;
}

.service-item-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.service-item-title {
    font-size: 18px;
    font-weight: bold;
    color: #333333;
    padding: 15px 10px 5px;
    margin: 0;
}

.service-item-description {
    font-size: 13px;
    color: #666666;
    line-height: 1.6;
    padding: 0 10px 15px;
    margin: 0;
}

.service-contact-footer {
    max-width: 960px;
    margin: 0 auto 60px;
    padding: 20px;
    border-top: 1px solid #ccc; 
}

.service-contact-footer p {
    font-size: 14px;
    line-height: 1.8;
    color: #555;
    margin: 5px 0;
}


/* ==================================== */
/* === 3 & 4. ノベルティ・販促グッズ一覧セクション === */
/* ==================================== */
.novelty-promo-section {
    padding: 60px 20px 80px;
    background-color: #ffffff;
}

/* .novelty-header-en {
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-size: 50px;
    font-weight: 900;
    color: #cccccc;
    letter-spacing: 2px;
    margin-top: 0;
    margin-bottom: 5px;
    line-height: 1;
} */

/* .novelty-header-ja {
    font-family: 'Hiragino Kaku Gothic StdN', 'Hiragino Kaku Gothic Std', 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;
    font-size: 24px;
    font-weight: 500;
    color: #333333;
    margin-top: 5px;
    margin-bottom: 30px;
} */

.novelty-header-text-box {
    max-width: 800px;
    margin: 0 auto 50px;
    color: #555555;
    line-height: 1.8;
}

/* ==================================== */
/* === 5. FLOW: ご発注から納品までの流れ === */
/* ==================================== */
.flow-process-section {
    padding: 60px 20px 80px;
    background-color: #f0f0f0; /* 背景色 */
}

.flow-header-text {
    margin-bottom: 40px;
}

.flow-title-en {
    font-size: 36px;
    font-weight: bold;
    color: #888888;
    margin: 0;
}

.flow-title-ja {
    font-size: 20px;
    font-weight: bold;
    color: #333333;
    margin: 5px 0 0;
}

/* ステップ群 1段目 */
.flow-steps-row {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 15px;
}

/* 個別ステップのコンテナ */
.flow-step-item {
    width: 250px; /* 画像に合わせて幅を固定 */
    background-color: #ffffff;
    border: 1px solid #cccccc;
    text-align: left;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

/* ステップヘッダー (STEP X ラベル) */
.flow-step-header {
    background-color: #ffffff;
    padding: 10px 15px;
    border-bottom: 1px solid #cccccc;
}

.flow-step-number {
    font-size: 14px;
    font-weight: bold;
    color: #cc3333; /* 赤色 */
    margin-right: 10px;
    padding: 2px 5px;
    border: 1px solid #cc3333;
}

.flow-step-label {
    font-size: 16px;
    font-weight: bold;
    color: #333333;
}

/* ステップ内容 */
.flow-step-content {
    padding: 15px;
    font-size: 13px;
    color: #555555;
    line-height: 1.6;
}

/* ステップ内容がリストの場合 */
.flow-content-list ol {
    padding-left: 18px;
    margin: 0;
}

.flow-content-list li {
    margin-bottom: 5px;
}

/* 左右の矢印 (右向き) */
.flow-arrow-right {
    display: flex;
    align-items: center;
    width: 30px; 
    height: 160px; /* 矢印の高さ調整 */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="30" height="15" viewBox="0 0 30 15"><polygon points="0,0 20,7.5 0,15" fill="%23888888" /></svg>');
    background-repeat: no-repeat;
    background-position: center;
    margin: 0 -15px; /* 要素を近づける */
}

/* 2段目への接続矢印 */
.flow-connecting-arrow-down {
    height: 40px;
    width: 2px;
    background-color: #888888;
    margin: 10px auto;
    position: relative;
}

.flow-connecting-arrow-down::after {
    content: "▼";
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    color: #888888;
    font-size: 14px;
}

/* 2段目のステップ配置を調整 */
.flow-steps-row--bottom {
    justify-content: flex-start; /* 左側に寄せる */
    max-width: 820px;
    margin: 0 auto;
}

/* 2段目の空きスペースを埋めるためのダミー (不要な場合は削除) */
.flow-steps-row--bottom::before {
    content: "";
    width: 250px;
    margin-right: 15px;
}


.flow-footer-area {
    margin-top: 40px;
    padding-top: 20px;
}

.flow-footer-text {
    font-size: 14px;
    color: #555555;
    line-height: 1.8;
    margin-bottom: 20px;
}


/* ==================================== */
/* === 6. 共通お問い合わせフッター === */
/* ==================================== */
.contact-general-section {
    padding: 40px 20px 80px;
    background-color: #ffffff;
    border-top: 1px solid #eeeeee;
}

.contact-text-box {
    margin-bottom: 30px;
}


/* ==================================== */
/* === レスポンシブ対応 === */
/* ==================================== */
@media (max-width: 960px) {
    /* サービス、ノベルティセクションは2列に */
    .service-item-grid,
    .novelty-item-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* FLOWセクションは縦に並べる */
    .flow-steps-row {
        flex-direction: column;
        gap: 20px;
    }
    
    .flow-step-item {
        width: 100%;
        max-width: 400px; /* 最大幅を設けて見やすくする */
        margin: 0 auto;
    }

    .flow-arrow-right {
        /* 横矢印の代わりに下に矢印を表示 */
        display: none;
    }
    
    .flow-steps-row--top .flow-step-item:not(:last-child)::after {
        content: "▼";
        display: block;
        color: #888888;
        font-size: 14px;
        margin-top: 10px;
    }

    .flow-connecting-arrow-down,
    .flow-steps-row--bottom::before {
        display: none; /* 縦並びのため非表示 */
    }
    
    .flow-steps-row--bottom {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    /* サービス、ノベルティセクションは1列に */
    .service-item-grid,
    .novelty-item-grid {
        /* grid-template-columns: 1fr; */
        grid-template-columns: repeat(2, 1fr);
    }
}













/* プロセス全体を囲むコンテナ */
.process-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* ステップの高さを揃えるために使用 */
    max-width: 1000px; /* 最大幅の例 */
    margin: 20px auto;
    padding: 10px;
    font-family: Arial, sans-serif;
}

/* 各ステップのボックス */
.process-step {
    flex-basis: calc((100% - 100px) / 3); /* 3つのステップと2つの矢印の幅を考慮 */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    background-color: #fff;
    border-radius: 4px;
    padding: 20px 15px;
    text-align: left;
    min-height: 250px; /* 画像に合わせて高さを調整 */
}

/* ステップのヘッダー部分 */
.process-header {
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 10px;
}

/* STEPの番号 */
.process-step-number {
    display: block;
    font-size: 1.5em;
    font-weight: bold;
    color: #cc3333; /* 赤色 */
    margin-bottom: 5px;
}

/* タイトル */
.process-title {
    font-size: 1.2em;
    font-weight: bold;
    margin: 0;
    color: #333;
}

/* ステップの内容 */
.process-content p {
    font-size: 0.9em;
    line-height: 1.6;
    margin: 5px 0;
    color: #555;
}

/* 矢印部分 */
.process-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5em;
    color: #aaa;
    margin: 0 10px;
    flex-shrink: 0; /* 縮小させない */
    width: 30px; /* 矢印の幅 */
    height: 30px;
    align-self: center; /* 垂直方向の中央に配置 */
}

/* スマホ対応（任意）: 画面幅が狭い場合は縦に積み重ねる */
@media (max-width: 768px) {
    .process-container {
        flex-direction: column;
        align-items: center;
    }

    .process-step {
        flex-basis: auto;
        width: 90%;
        margin-bottom: 20px;
        min-height: auto;
    }

    .process-arrow {
        transform: rotate(90deg); /* 矢印を回転させて下向きにする */
        margin: 5px 0;
    }
}











/* スライダーの表示領域の定義 */
.booth-slider-wrapper {
    /* 必要に応じて幅と高さを調整してください */
    width: 100%; 
    overflow: hidden; /* この範囲外の画像は隠す */
    position: relative;
}

/* 画像を格納するトラック (横一列に並べる) */
.booth-slider-track {
    display: flex; /* 子要素 (画像) を横に並べる */
    width: 400%; /* 画像4枚分の幅 (100% * 4) */
    transition: transform 0.3s ease-in-out; /* スライドのアニメーションを滑らかにする */
}

/* 個々の画像の設定 */
.booth-slide-image {
    min-width: 100%; /* 1枚あたりの幅をラッパーの100%に設定 */
    height: auto;
    /* 必要に応じて object-fit: cover; などを追加 */
}

/* ナビゲーションボタンの位置調整 */
.booth-slider-display {
    position: relative; /* ボタンを絶対配置するために必要 */
}

.booth-nav-prev,
.booth-nav-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    /* その他のスタイル (色、サイズなど) は適宜調整 */
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
}

.booth-nav-prev {
    left: 0;
}

.booth-nav-next {
    right: 0;
}













/* ==================================== */
/* === 2. サービス一覧セクション === */
/* ==================================== */
.service-section {
    padding: 60px 20px 0;
    background-color: #f0f0f0; /* image_fa53a8.png の背景色 */
}

.service-title-en {
    font-size: 36px;
    font-weight: bold;
    color: #888888;
    margin-bottom: 5px;
}

.service-title-ja {
    font-size: 20px;
    font-weight: bold;
    color: #333333;
    margin-bottom: 25px;
}

.service-description {
    max-width: 700px;
    margin: 0 auto 40px;
    font-size: 14px;
    line-height: 1.8;
    color: #555555;
}

.service-item-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 960px;
    margin: 0 auto 40px;
    padding: 0 10px;
}

.service-item {
    text-align: left;
    background-color: #ffffff;
    border: 1px solid #eeeeee;
}

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

.service-image-box {
    height: 150px;
    overflow: hidden;
    position: relative;
}

.service-item-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.service-item-title {
    font-size: 18px;
    font-weight: bold;
    color: #333333;
    padding: 15px 10px 5px;
    margin: 0;
}

.service-item-description {
    font-size: 13px;
    color: #666666;
    line-height: 1.6;
    padding: 0 10px 15px;
    margin: 0;
}

.service-contact-footer {
    max-width: 960px;
    margin: 0 auto 60px;
    padding: 20px;
    border-top: 1px solid #ccc; /* image_fa53a8.png の下の線 */
}

.service-contact-footer p {
    font-size: 14px;
    line-height: 1.8;
    color: #555;
    margin: 5px 0;
}


/* ==================================== */
/* === 3. ノベルティ・販促グッズ一覧セクション === */
/* ==================================== */
.novelty-section {
    padding: 60px 20px 100px;
    background-color: #e2e2e2;
}

/* 英語の見出し */
/* .novelty-header-en {
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-size: 50px;
    font-weight: 500;
    color: #cccccc;
    letter-spacing: 0px;
    margin-top: 0;
    margin-bottom: 5px;
    line-height: 1;
} */

/* 日本語の見出し */
/* .novelty-header-ja {
    font-family: 'Hiragino Kaku Gothic StdN', 'Hiragino Kaku Gothic Std', 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;
    font-size: 24px;
    font-weight: 900;
    color: #333333;
    margin-top: 5px;
    margin-bottom: 30px;
} */

/* 説明文コンテナ */
.novelty-header-text-box {
    max-width: 800px;
    margin: 0 auto 50px;
    color: #555555;
    line-height: 1.8;
}

/* ==================================== */
/* === 4. 共通お問い合わせフッター === */
/* ==================================== */
.contact-footer-section {
    padding: 40px 0px 0px;
    background-color: #e2e2e2;
    /* border-top: 1px solid #eee; */
}

.contact-text-box {
    margin-bottom: 30px;
}


/* ==================================== */
/* === レスポンシブ対応 === */
/* ==================================== */
@media (max-width: 768px) {
    .service-item-grid,
    .novelty-item-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .event-booth-title-en,
    .novelty-header-en {
        font-size: 4.5rem;
    }
}

@media (max-width: 480px) {
    .service-item-grid,
    .novelty-item-grid {
        grid-template-columns: 1fr;
    }
    .booth-slider-nav {
        height: 40px;
        width: 40px;
        font-size: 20px;
    }
}













/* --------------------------------------------------
   Service Section
   -------------------------------------------------- */
.service-grid {
    display: flex;
    justify-content: space-around;
    gap: 30px;
}

.service-item {
    flex: 1;
    text-align: center;
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.service-image.placeholder {
    height: 100px;
    background-color: #ddd;
    margin-bottom: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.service-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px;
}

/* --------------------------------------------------
   Booth Section
   -------------------------------------------------- */
.booth-slider-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 30px 0;
    gap: 10px;
}

.booth-slider {
    display: flex;
    overflow: hidden; /* スライドのアニメーションはJSが必要だが、ここではレイアウトのみ */
    max-width: 800px;
    gap: 20px;
}

.booth-image.placeholder {
    min-width: 400px; /* 2つの画像を横並びにするため */
    height: 250px;
    background-color: #ccc;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

.slider-arrow {
    background: #e3001b;
    color: #fff;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    font-size: 20px;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    line-height: 20px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.booth-description {
    text-align: center;
    max-width: 800px;
    margin: 20px auto 0;
}

/* --------------------------------------------------
   FLOW Section
   -------------------------------------------------- */
.flow-title {
    color: #e3001b; /* FLOWのタイトルを赤く */
    font-size: 40px;
}

.flow-steps {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; /* SPで折り返す */
    gap: 10px;
}

.flow-step {
    flex: 1;
    min-width: 150px; /* 最小幅を設定 */
    text-align: center;
    padding: 20px 10px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    position: relative;
}

.step-header {
    background-color: #e3001b;
    color: #fff;
    font-weight: 700;
    padding: 5px 10px;
    border-radius: 3px;
    display: inline-block;
    margin-bottom: 10px;
}

.flow-step-arrow {
    font-size: 30px;
    color: #e3001b;
    font-weight: 300;
    padding: 0 5px;
    line-height: 1;
}

.flow-note {
    text-align: center;
    margin-top: 30px;
    font-size: 14px;
}

/* --------------------------------------------------
   FAQ Section
   -------------------------------------------------- */
.faq-list {
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    border-bottom: 1px solid #ddd;
    margin-bottom: 10px;
}

.faq-question {
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: 700;
    padding: 15px 10px;
    cursor: pointer;
    position: relative;
}

/* アコーディオンの矢印のような表現 */
.faq-question::after {
    content: '+';
    position: absolute;
    right: 10px;
    font-size: 20px;
    transition: transform 0.3s;
}

.faq-item[open] .faq-question::after {
    content: '-';
}

.faq-icon {
    display: inline-block;
    background-color: #e3001b; /* Qアイコンの背景色 */
    color: #fff;
    font-weight: 700;
    width: 24px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    border-radius: 3px;
    margin-right: 10px;
    flex-shrink: 0;
}

.faq-answer {
    padding: 10px 10px 15px 44px; /* Qアイコンの分ずらす */
    font-size: 15px;
    color: #666;
    display: flex;
}

.answer-icon {
    background-color: #666; /* Aアイコンの背景色 */
}

/* --------------------------------------------------
   Final CTA Banner
   -------------------------------------------------- */
.final-cta-banner {
    background-color: #e3001b; /* 赤いバナー背景 */
    color: #fff;
    text-align: center;
    padding: 40px 20px;
    margin-top: 50px;
}

.banner-inner p {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 20px;
}

.final-cta-banner .primary-cta {
    background-color: #fff;
    color: #e3001b;
    border: 2px solid #fff;
}

.final-cta-banner .primary-cta:hover {
    background-color: #f0f0f0;
}

/* --------------------------------------------------
   Footer
   -------------------------------------------------- */
.footer {
    background-color: #333;
    color: #fff;
    padding: 15px 20px;
    text-align: center;
    font-size: 12px;
}

/* --------------------------------------------------
   レスポンシブデザイン (モバイルファーストではないため、ブレイクポイントで調整)
   -------------------------------------------------- */
@media (max-width: 900px) {
    /* Goods Section */
    .goods-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .header-inner {
        flex-wrap: wrap;
    }
    .global-nav {
        display: none; /* モバイルでは非表示（ハンバーガーメニュー等で対応） */
    }
    .menu-button {
        display: block; /* ハンバーガーメニューを表示 */
    }
    
    .hero-title {
        font-size: 32px;
    }

    /* Service Section */
    .service-grid {
        flex-direction: column;
        gap: 20px;
    }

    /* Booth Section */
    .booth-image.placeholder {
        min-width: 100%; /* 1列表示 */
        height: 200px;
    }
    .booth-slider {
        overflow-x: scroll; /* スライド可能にする */
        scroll-snap-type: x mandatory;
    }

    .slider-arrow {
        display: none; /* SPでは矢印を非表示にすることも多い */
    }

    /* FLOW Section */
    .flow-steps {
        flex-direction: column;
        gap: 10px;
    }
    .flow-step {
        width: 100%;
        min-width: auto;
    }
    .flow-step-arrow {
        transform: rotate(90deg); /* 縦の流れに変更 */
        padding: 5px 0;
    }
    .is-hidden-mobile {
        display: block !important; /* SPでは矢印を全て表示 */
    }

    /* Goods Section */
    .goods-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .final-cta-banner .banner-inner p {
        font-size: 20px;
    }
}

/* スライド */
/* 親コンテナ: スライダー全体を包含 */
.booth-slide-container {
    position: relative;
    max-width: 960px; /* スライダーの最大幅 (画像の幅に合わせて調整) */
    margin: 40px auto;
    user-select: none;
}

/* スライド表示エリア (ビューポート): はみ出しを隠す */
.booth-slide-viewport {
    overflow: hidden;
    width: 100%;
}

/* スライドトラック: すべてのスライドを横並びにする */
.booth-slide-track {
    display: flex;
    transition: transform 0.5s ease-in-out; /* スライドアニメーション */
}

/* 個々のスライドアイテム */
.booth-slide-item {
    min-width: 100%; /* ビューポートの幅に合わせる */
    box-sizing: border-box;
}

/* 画像スタイル */
.booth-slide-image {
    width: 100%;
    height: auto;
    display: block;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15); /* 画像に影をつけて浮き出し感を出す */
}

/* 矢印ボタンの共通スタイル */
.booth-slide-prev-btn,
.booth-slide-next-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.5); /* 半透明の黒背景 */
    color: white;
    border: none;
    outline: none;
    width: 48px;
    height: 48px;
    border-radius: 50%; /* 円形にする */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    transition: background 0.3s;
}

.booth-slide-prev-btn:hover,
.booth-slide-next-btn:hover {
    background: rgba(0, 0, 0, 0.7);
}

/* 矢印ボタンのアイコン */
.arrow-icon {
    font-size: 20px;
    font-weight: bold;
    line-height: 1;
}

/* 左矢印ボタンの位置 */
.booth-slide-prev-btn {
    left: 20px; /* 側面からの距離 */
}

/* 右矢印ボタンの位置 */
.booth-slide-next-btn {
    right: 20px; /* 側面からの距離 */
}



.section-container-booth-flow {
    /* padding: 60px 20px 100px; */
    padding: 50px 15px 100px;
    background-color: #e2e2e2;
}

/* 親コンテナ */
.booth-flow-container {
    /* margin: 40px auto; */
    /* padding: 140px 65px; */
    font-family: 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
    background-color: #e2e2e2;
}

/* メインタイトル (FLOW) */
.flow-header-en {
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-size: 4.5rem;
    font-weight: 500; /* 極太 */
    color: #dfcc9e; /* 薄い灰色 */
    letter-spacing: 0em; /* 文字間隔 */
    /* margin: 0 0 10px 0; */
    line-height: 1.2;
}

/* サブタイトル (発注から納品までの流れ) */
.flow-header-ja {
    font-size: 2rem;
    font-weight: 700;
    color: #333333; /* 濃いめの色 */
    margin: 0 0 50px 0;
    line-height: 1.2;
}

/* 1段目と2段目の行のコンテナ */
.booth-flow-row {
    /* display: flex;
    justify-content: space-between;
    margin-bottom: 30px; */

    flex-direction: column;
    align-items: center; /* 中央寄せ */
    gap: 0; /* 隙間をリセットして矢印で調整 */
}

/* 2段目の行（中央寄せのため幅を狭くする） */
.booth-flow-row.second-row {
    max-width: 66%; /* 3ステップ幅の約2/3 */
    margin-left: auto;
    margin-right: auto;
}

/* 矢印アイコン */
.booth-flow-arrow {
    /* display: flex;
    align-items: center;
    font-size: 50px;
    color: #aaaaaa; */
    display: block;
    text-align: center;
    transform: rotate(90deg); /* 90度回転させて下に向ける */
    margin: 10px 0 20px 0;
    font-size: 24px;
    line-height: 1;
}

/* 各ステップアイテムの共通スタイル */
.booth-flow-step-item {
    /* flex: 1;
    min-width: 0;
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    padding: 60px 10px;
    text-align: left;
    position: relative;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); */

    width: 100%;
    flex: none; /* Flex-growを解除 */
    /* margin-bottom: 10px; */
    padding: 20px;
    /* 高さは内容に合わせて可変にする（縦並びのため統一不要） */
    height: auto;
    background-color: #ffffff;
    border-radius: 5px;
    padding: 45px 20px;
}

/* STEP 番号 */
.booth-flow-step-number {
    font-size: 35px;
    font-weight: bold;
    color: #cc0000; /* 赤色 */
    /* margin: 0 0 10px 0; */
    text-align: center;
    /* border-bottom: 2px solid #f0f0f0; */
    padding-bottom: 5px;
}

/* アイコンとタイトルのグループ */
.booth-flow-icon-text-group {
    /* text-align: center;
    margin-bottom: 10px; */

    /* display: flex; */
    align-items: center;
    margin-bottom: 15px;
}

/* アイコン */
/* 注意: 実際の画像パスとサイズに合わせて調整が必要です */
.booth-flow-icon {
    /* width: 140px;
    height: 140px;
    display: block;
    margin: 0 auto 5px auto; */

    width: 130px; /* スマホ用に少し小さく調整 */
    height: auto;
    /* margin-right: 15px; */
}

/* タイトル */
.booth-flow-step-title {
    /* font-size: 24px;
    font-weight: bold;
    color: #333333;
    margin: 0;
    text-align: center; */

    font-size: 30px;
    margin: 0;
    font-weight: bold;
    line-height: 32px;
}

/* 説明文 */
.booth-flow-step-description {
    font-size: 1.6rem;
    color: #555555;
    line-height: 1.9;
    margin: 25px 0 0 0;
    padding-top: 5px;
    border-top: 1px dashed #e0e0e0;
    padding: 10px 10px;
}

/* リスト形式の説明文 (STEP 2, 4, 5) */
.booth-flow-step-list {
    /* list-style: none;
    padding: 0;
    margin: 25px 0 0 0;
    font-size: 12px;
    color: #555555;
    line-height: 1.9;
    border-top: 1px dashed #e0e0e0;
    padding: 10px 10px; */

    font-size: 15px;
    padding: 25px 0px 0px;
    list-style: none;

}
.booth-flow-step-list li {
    margin-bottom: 4px;
    font-size: 1.6rem;
}

/* リスト項目の先頭を番号にする (画像に合わせる) */
.booth-flow-step-list li:before {
    content: attr(data-step-number); /* HTML側で番号を data 属性で指定すれば適用可能 */
    /* 画像を忠実に再現するため、CSSのみで対応する場合は非推奨 */
    /* 今回はHTMLの<li>①...</li>を使用しているため、特殊な装飾は省略します */
}


/* スマートフォンなど狭い画面での表示調整 (オプション) */
@media (max-width: 768px) {
    .booth-flow-row {
        flex-direction: column; /* 縦並びにする */
        margin-bottom: 0;
    }
    .booth-flow-step-item {
        margin-bottom: 20px;
    }
    .booth-flow-arrow {
        transform: rotate(90deg); /* 縦向きの矢印にする */
        margin: 30px 130px;
    }
    .booth-flow-row.second-row {
        max-width: 100%;
    }
}





/* ======================================================= */
/* 3. FAQ (よくあるご質問) */
/* ======================================================= */
.combined-officecom-page-container {
    background-color: #ffffff;
}

.combined-officecom-faq-section {
    background-color: #ffffff;
    padding: 60px 20px 100px;
}

.combined-officecom-faq-list {
    max-width: 800px;
    margin: 0 auto;
    text-align: left;
}

/* メインタイトル (Q&A) */
.combined-officecom-faq-main-title {
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-size: 4.5rem;
    font-weight: 500; /* 極太 */
    color: #dfcc9e; /* 薄い灰色 */
    letter-spacing: 0em; /* 文字間隔 */
    /* margin: 130px 0 10px 0; */
    line-height: 1.2;
}

/* サブタイトル (よくあるご質問) */
.combined-officecom-faq-sub-title {
    font-size: 2rem;
    font-weight: 700;
    color: #333333; /* 濃いめの色 */
    margin: 0 0 30px 0;
    line-height: 1.2;
}

.combined-officecom-faq-item {
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px dashed #cccccc;
}

.combined-officecom-faq-question,
.combined-officecom-faq-answer {
    display: flex;
    align-items: flex-start;
    margin-bottom: 10px;
}

.combined-officecom-faq-q-label {
    background-color: #cc0000;
    color: white;
    font-weight: bold;
    font-size: 18px;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    margin-right: 15px;
    border-radius: 3px;
}

.combined-officecom-faq-a-label {
    background-color: #f7f7f7;
    color: #cc0000;
    font-weight: bold;
    font-size: 18px;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    margin-right: 15px;
    border-radius: 3px;
    border: 1px solid #cc0000;
}

.combined-officecom-faq-question p {
    font-weight: bold;
    font-size: 18px;
    margin: 0;
    line-height: 1.6;
}

.combined-officecom-faq-answer p {
    font-size: 18px;
    margin: 0;
    line-height: 1.6;
}

/* ======================================================= */
/* レスポンシブ対応 (Flexboxの調整) */
/* ======================================================= */
@media (max-width: 900px) {
    /* 5ステップの流れを縦並びにする */
    .combined-officecom-flow-row {
        flex-direction: column;
        align-items: center;
    }
    .combined-officecom-flow-step-item {
        margin-bottom: 20px;
        width: 90%;
        max-width: 350px;
    }
    .combined-officecom-flow-arrow {
        transform: rotate(90deg); /* 縦向きの矢印にする */
        margin: -10px auto;
    }
    .combined-officecom-flow-row.second-row {
        max-width: 100%;
    }
}

/* ======================================================= */
/* 1. ヒーローセクション */
/* ======================================================= */
.officecom-page-hero-section {
    /* 背景画像を配置し、コンテンツを中央に重ねる */
    background-image: url('img/bg_sekou.jpg'); /* 実際の画像パスに置き換え */
    background-size: cover;
    background-position: center;
    min-height: 400px; /* 高さの確保 */
    display: flex;
    align-items: center; /* 縦方向中央寄せ */
    justify-content: center; /* 横方向中央寄せ */
    position: relative;
    padding: 20px;
    margin-bottom: 40px;
}

/* 背景を暗くして文字を読みやすくするためのオーバーレイ */
.officecom-page-hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.8); /* 暗めの半透明 */
    z-index: 1;
}

.officecom-page-hero-content {
    text-align: center;
    color: white;
    z-index: 2; /* オーバーレイより手前に配置 */
    max-width: 700px;
    padding: 20px;
}

.officecom-page-hero-text {
    font-size: 15px;
    line-height: 1.8;
    margin-bottom: 30px;
    font-weight: 500;
}
.officecom-page-hero-text strong {
    font-weight: bold;
}

/* CTAボタン */
.officecom-page-cta-button {
    display: inline-flex;
    align-items: center;
    background-color: #cc0000; /* 赤色 */
    color: white;
    font-size: 18px;
    font-weight: bold;
    padding: 15px 30px;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s;
    white-space: nowrap;
}

.officecom-page-cta-button:hover {
    background-color: #a00000;
}

.cta-icon {
    font-size: 20px;
    margin-right: 10px;
}

.cta-arrow {
    font-size: 16px;
    margin-left: 10px;
}

/*-------------------
mv - スマホ版調整 (max-width: 768px)
--------------------*/
@media (max-width: 768px) {

    /* メインビジュアルコンテナ */
    .k-ben_main {
        /* 背景画像をモバイル用に調整 */
        background: 
            url(../img/k-ben/sp/bg_main.jpg) 50% 0 / cover no-repeat, /* メイン画像を中央に配置し、画面を覆う */
            url(../img/k-ben/bg_newmain_gray.png) 0 0 / auto 100% no-repeat #aa0000;
        height: 745px; /* 高さを調整（コンテンツに合わせて適宜変更） */
        /* text-align: center; */
    }

    /* インナーコンテナ */
    .k-ben_main .inner {
        width: 90%; /* 幅を画面いっぱいに */
        max-width: 400px; /* 最大幅を設定して見やすくする */
        margin: 0 auto;
        padding: 80px 0 0; /* 上部の余白を調整 */
    }

    /* コンテンツエリア */
    .k-ben_main .content{
        width: 100%; /* 幅を100%に */
    }

    /* キャッチコピー（1行目） */
    .k-ben_main .catch_area .catch {
        width: 100%;
        font-size: 1.5rem; /* フォントサイズを小さく */
        margin: 0 0 5px;
        padding: 5px 10px;
        line-height: 1.4;
    }
    .k-ben_main .catch_area .catch::before {
        width: 94%; /* 背景も100%に */
        transform: none; /* スキューを解除 */
    }

    /* メインキャッチコピー（2行目） */
    .k-ben_main .catch_area .catch02 {
        width: 100%;
        font-size: 4.0rem; /* フォントサイズを小さく */
        margin: 0 0 6px;
        padding: 0px 0px;
        line-height: 1.2;
    }
    .k-ben_main .catch_area .catch02::before {
        width: 100%;
        transform: none; /* スキューを解除 */
    }

    /* サブテキスト */
    .k-ben_main .catch_area .sub_txt{
        display: block; /* インラインブロックからブロックに変更 */
        font-size: 2.4rem; /* フォントサイズを調整 */
        padding: 0 0 10px;
        color: #ffffff; /* 背景色に合わせて色を白に変更（見やすさ優先） */
        /* 背景が暗いため、文字が見えない場合は色を調整してください */
    }

    /* サブテキスト (小) */
    .k-ben_main .catch_area .sub_txt_s{
        font-size: 14px;
        margin: 0 0 312px;
        line-height: 1.5;
    }

    /* CTAボタン */
    /* .k-ben_main .catch_area .btn {
        margin: 0 0 30px;
    } */

    /* .k-ben_main .catch_area .btn a {
        padding: 15px 30px 15px 60px;
        font-size: 1.7rem;

        background: 
            url(../img/k-ben/ico_mail.png) no-repeat 20px center,
            linear-gradient(90deg, #f24a00 0%, #f27200 100%);
        background-size: 38px auto, auto auto;
        line-height: 1.2;
    } */

    /* パンくずリスト */
    ol.path,
    #path {
        margin: 10px auto 30px; /* 中央寄せと下マージン */
        width: 90%;
        font-size: 1.1rem;
    }

    /* パンくずリスト（絶対配置の解除と位置調整） */
    .novelty-promo-container #path,
    #path {
        position: static; /* 絶対配置を解除し、通常フローに */
        top: auto;
        left: auto;
        /* 代わりに通常のpaddingで位置を調整するか、inner内に配置 */
        padding: 10px 0; 
        text-align: left; /* 左寄せ */
    }

    ol.path li {
        float: none; /* floatを解除し、インライン要素として並べる */
        display: inline;
    }

    /* 固定 お見積もりボタン */
    #main-contents .fix_cv {
        /* right: -100px; */
        bottom: 20px; /* 下部に移動 */
        /* width: 150px; */
    }
    #main-contents .fix_cv.hide{
        transform: none; /* 非表示時のアニメーションを無効化 */
    }
    /* #main-contents .fix_cv a {
        position: relative;
        display: block;
        padding: 23px 11px 23px 0;
        border-radius: 10px 0 0 10px;
        color: #fff;
        background: linear-gradient(90deg, #f24a00 0,#f27200 50%, #f24a00 100%);
    }
    #main-contents .fix_cv a::before {
        content: "";
        left: -15px;
        width: 50px;
        height: 50px;
    } */
    #main-contents .fix_cv p {
        /* padding: 0 20px 0 0;
        font-size: 15px;
        background: url(../img/partition02/ico_fixcv_mail.png) 100% 40% no-repeat;
        background-size: 14px auto; */
        color: #fff;
    }

    /* 固定目次メニュー */
    #main-contents .fix_alink {
        right: -170px; /* 画面外に隠す */
        bottom: 20px; /* 下部に移動 */
        width: 170px; /* 幅を縮小 */
        padding: 5px;
        font-size: 1.3rem;
    }
    #main-contents .fix_alink.active {
        right: 0;
    }
    #main-contents .fix_alink .btn {
        left: -30px;
        width: 30px;
        height: 80px;
    }
    #main-contents .fix_alink ul.menu{
        font-size: 1.3rem;
    }
    #main-contents .fix_alink ul.menu li a{
        padding: 8px 10px 7px;
        min-height: 28px;
    }
    #main-contents .fix_alink .content > a{
        padding: 8px 10px 7px 20px;
    }
    #main-contents .fix_alink .content > a p{
        padding: 0 0 0 30px;
        font-size: 1.3rem;
        background-size: 20px auto;
    }

    /* 吹き出し (booth-setup-balloon-wrapper) をモバイルでは非表示にするか、位置を調整 */
    .booth-setup-balloon-wrapper {
        display: none; /* 一旦非表示 */
        /* または
        top: 20px;
        left: 20px;
        transform: translateX(0);
        width: 100px;
        */
    }
}

/*-------------------
contact
--------------------*/

.contact {
	background: url(../img/maxhub/bg_contact.jpg) no-repeat center center;
	background-size: cover;
}

.contact .inner {
	padding: 0 5% 70px;
}

.contact .inner h2 {
	margin: 0;
	color: #fff;
	position: relative;
	top: -40px;
    text-align: center;
    font-weight: bold;
}

.contact .inner .cv {
	padding: 30px 5%;
	border-radius: 20px 0 20px 0;
	background: #F5F5F5;
	letter-spacing: .05em;
}

.contact .inner .cv .tit {
	margin: 0 0 15px;
	font-size: 2.0rem;
	font-weight: bold;
	line-height: 1.4;
	text-align: center;
}

.contact .inner .cv .btn {
	margin: 0 0 20px;
}

.contact .inner .cv .btn a {
	display: block;
	padding: 20px 20px 20px 50px;
	border-radius: 10px;
	font-size: 2.0rem;
	font-weight: bold;
	color: #fff;
	line-height: 1.4;
	text-decoration: none;
	text-align: center;
	background: url(../img/k-ben/ico_mail.png) no-repeat 15px center,linear-gradient(90deg, #836a2d 0%, #897034 100%);
	background-size: 30px auto,auto auto;
	box-shadow: 0px 15px 30px 0px rgba(0,0,0,.18);
}

.contact .inner .cv .tel_list {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

.contact .inner .cv .tel_list li {
	/*display: table;*/
	margin: 0 auto 30px;
}

.contact .inner .cv .tel_list li:last-child {
	/*margin-bottom: 0;*/
	margin: 0;
}

.contact .inner .cv .tel_list li .intit {
	margin: 0 0 10px;
	padding: 5px 5px 2px;
	font-size: 1.6rem;
	font-weight: bold;
	color: #ac9e4c;
	text-align: center;
	line-height: 1.6;
	position: relative;
	z-index: 0;
}

.contact .inner .cv .tel_list li .intit::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	background: #111;
	transform: skewX(-15deg);
}

.contact .inner .cv .tel_list li a {
	display: block;
	padding: 0 0 0 30px;
	font-size: 1.2rem;
	color: #2E2E2E;
	text-decoration: none;
	background: url(../img/k-ben/ico_tel.png) no-repeat 0 2px;
	background-size: 25px auto;
}

.contact .inner .cv .tel_list li a .num {
	font-size: 3.0rem;
	font-weight: bold;
	line-height: 1;
	letter-spacing: .02em;
}

.contact .inner h2 .en {
	display: block;
	margin: 0 0 5px;
	font-size: 5.5rem;
	color: #bba46b;
	line-height: 1;
    text-align: center;
}