@media (min-width: 768px) {
    main {
        /* background: #3b3b3b; */
        background: url(/html/user_data/assets/img/item/original_flyer_opp_LP/haikei_003.webp);
        background-attachment: fixed;
        background-size: cover;
        background-position: center;
    }
}

.lp_content{
    background-color: #fff;
    padding: 0 30px 0;
}
@media screen and (min-width: 1024px) {
    .content {
        justify-content: center !important;
    }
}

/* セクションごと */
.section-navi {
    padding-bottom: 50px;
}

/* 見出し */
.heading-9 {
    color: #014d8f;
    font-size: 30px;
    margin-bottom: 15px;
    text-align: center;
}

.heading-20 {
    padding: .5em .7em;
    border: 2px solid #014d8f;
    box-shadow: 5px 5px #014d8f;
    color: #014d8f;
    font-size: 30px;
    text-align: center;
    margin-bottom: 20px;
}

.heading-6 {
    position: relative;
    color: #014d8f;
    font-size: 28px;
    margin-bottom: 20px;
    margin-top: 20px;
    text-align: center;
}

.heading-6::before,
.heading-6::after {
    content: '';
    display: inline-block;
    position: absolute;
    top: 50%;
    width: 180px;
    height: 3px;
    background-color: #014d8f;
}

.heading-6::before {
    left: 0;
}

.heading-6::after {
    right: 0;
}

.heading-jirei {
    position: relative;
    color: #014d8f;
    font-size: 28px;
    margin-bottom: 20px;
    margin-top: 20px;
    text-align: center;
}

.heading-jirei::before,
.heading-jirei::after {
    content: '';
    display: inline-block;
    position: absolute;
    top: 50%;
    width: 460px;
    height: 3px;
    background-color: #014d8f;
}

.heading-jirei::before {
    left: 0;
}

.heading-jirei::after {
    right: 0;
}

.kyoutyou{
    color: #ff8d25;
    font-size: 40px;
}

.kyoutyou_2{
    color: #ff8d25;
    font-size: 35px;
}

/* 本文テキスト */
.explain_opp{
    font-size: 20px;
    text-align: center;
    /* line-height: 1.8; */
    /* margin-bottom: 50px; */
}

/* よくある質問 */
.wid_footer{
    width: 1200px;
    background-color: #ffffff;
    margin-top: 30px;
    padding: 30px;
}

.q_and_a {
    margin-bottom: 5px;
    border-bottom: 2px solid #eeeeee;
}

.q_and_a summary {
    font-size: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 0.8em 2em 0.8em 2.3em;
    color: #000000;
    font-weight: 600;
    cursor: pointer;
}

.q_and_a summary::before,
.q_and_a p::before {
    position: absolute;
    left: 0em;
    font-weight: 600;
    font-size: 1.3em;
}

.q_and_a summary::before {
    content: "Q";
    background-color: #9d010f;
    font-weight: bold;
    font-size: 16px;
    color: #ffffff;
    width: 25px;
    height: 25px;
    border-radius: 15px;
    line-height: 1.4;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    position: absolute;
}

.q_and_a summary::after {
    transform: translateY(-25%) rotate(45deg);
    width: 7px;
    height: 7px;
    margin-left: 10px;
    border-bottom: 3px solid #000000b3;
    border-right: 3px solid #000000b3;
    content: '';
    transition: transform .5s;
}

.q_and_a[open] summary::after {
    transform: rotate(225deg);
}

.q_and_a p {
    font-size: 1.8rem;
    position: relative;
    transform: translateY(-10px);
    margin: 0;
    padding: 0.8em 2em 0.8em 2.3em;
    color: #333;
    transition: transform .5s, opacity .5s;
}

.q_and_a p::before {
    content: "A";
    background-color: #aaa;
    font-weight: bold;
    font-size: 18px;
    color: #ffffff;
    width: 25px;
    height: 25px;
    border-radius: 15px;
    line-height: 1.4;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    position: absolute;
}

/* 関連特集 */
.feature_list {
	display: flex;
	flex-wrap: wrap;
	gap: 32px 24px;
	padding-bottom: 40px;
	margin-top: 30px;
}

.feature_list>li {
	width: 100%;
	-ms-flex-direction: row;
	flex-direction: row;
}

.feature_list>li a {
	display: flex;
	flex-direction: column;
	color: #333;
}

.feature_list>li a:hover {
	opacity: 0.7;
}

.feature_list>li img {
	width: 100%;
	vertical-align: bottom;
	border-radius: 8px;
	border: 1px solid #ddd;
}

.feature_list>li .name {
	margin: 8px 0;
	line-height: 1.4;
	font-size: 1.5rem;
	font-weight: bold;
}

.feature_list>li .comment {
	line-height: 1.4;
	color: #555;
	font-size: 1.2rem;
}

@media screen and (min-width: 600px) {
	.feature_list>li {
		width: calc((100% - 24px) / 2);
		-ms-flex-direction: column;
		flex-direction: column;
	}

	.feature_list>li .name {
		font-size: 1.8rem;
	}

	.feature_list>li .comment {
		font-size: 1.3rem;
	}
}
.supervisor__sct{
    width: 1200px;
    max-width: 100%;
    margin: auto;
    padding: 50px 0 50px;
}


/* ======================================= */
/*固定フッター */
/* ======================================= */

/* --- 全体コンテナ --- */
#fixed-contact-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: #fff;
    /* padding: 10px 0; */
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
    
    /* 【追記・修正箇所】初期状態を非表示にする設定 */
    opacity: 0; 
    pointer-events: none; /* 非表示の時、下の要素をクリックできるようにする */
    transition: opacity 0.1s ease-in-out;
}

/* --- スクロール後に付与するクラス（表示状態） --- */
#fixed-contact-bar.is-visible {
    opacity: 1;
    pointer-events: auto; /* クリック可能に戻す */
}

/* --- 中央寄せと横並びの設定 --- */
.contact-bar-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 0;
}

/* --- 各アイテムの共通スタイル --- */
.contact-item {
    text-align: center;
    text-decoration: none;
    border-radius: 50px;
    /* padding: 10px 15px; */
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin: 0 5px;
    /* box-sizing: border-box; */
}

.contact-item img{
    width: 25px;
    margin-right: 10px;
}


/* --- 電話セクションのスタイル --- */
.tel-block {
    display: flex;
    align-items: center;
    /* gap: 15px; */
    flex-grow: 1; /* スペースを占有 */
    flex-basis: 250px; /* 最小幅を確保 */
    /* margin-right: 20px; */
}

.tel-caption {
    font-size: 18px;
    line-height: 1.5;
    color: #bf0000;
    margin: 0;
    font-weight: bold;
}

.tel-info {
    display: flex;
    align-items: center;
    /* padding: 5px 10px; */
    border-radius: 5px;
    flex-direction: column;
}

.tel-info a { /* tel:リンクへのスタイル適用 */
    text-decoration: none; 
    color: inherit; 
    display: flex; 
    align-items: center;
}

.tel-icon {
    font-size: 24px;
    margin-right: 5px;
    color: #2b78e4;
}

.tel-number {
    font-size: 35px;
    font-weight: bold;
    color: #bf0000;
}

.tel-hours {
    font-size: 15px;
    line-height: 1.4;
    color: #000;
    /* background-color: #2b78e4; 濃い青 */
    padding: 2px 5px;
    border-radius: 3px;
    white-space: nowrap;
}

/* --- ボタン内のテキスト共通スタイル --- */
.btn-main-text {
    font-size: 14px;
    font-weight: normal;
    margin-bottom: 2px;
}

.btn-sub-text {
    font-size: 15px;
    font-weight: bold;
    line-height: 1.2;
}

.btn-sub-text-secondary {
    font-size: 20px;
    font-weight: bold;
}

/* --- 左側ボタン（ノベルティを選ぶ）- 緑系 --- */
.btn-left {
    background: linear-gradient(to bottom, #e84c4c, #bf0000);
    color: #fff;
    box-shadow: 0 4px 0 #8c0000;
    transition: all 0.2s;
    padding: 5px;
    width: 500px; /* 幅の調整 */
    flex-shrink: 0;
    border-radius: 50px;
}

.btn-left:hover {
    transform: translateY(2px);
    box-shadow: 0 2px 0 #8c0000;
}

/* --- 右側ボタン（プロへ相談する）- 青系 --- */
.btn-right {
    background: linear-gradient(to bottom, #4a7abf, #2b548b); /* 青系のグラデーション */
    color: #fff;
    box-shadow: 0 4px 0 #1e3a62;
    transition: all 0.2s;
    padding: 5px;
    width: 350px; /* 幅の調整 */
    border-radius: 50px;
}

.btn-right:hover {
    transform: translateY(2px);
    box-shadow: 0 2px 0 #1e3a62;
}
.footer_contents{
    display: flex;
}

.footer_contents_bloc {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* フッターのマイクロコピー */
.heading-18 {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #d72d2d;
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 5px;
}

.heading-18::before,
.heading-18::after {
    width: 3px;
    height: 20px;
    background-color: #d72d2d;
    content: '';
}

.heading-18::before {
    transform: rotate(-35deg);
    margin-right: 30px;
}

.heading-18::after {
    transform: rotate(35deg);
    margin-left: 30px;
}
/* 右側用 */
.heading-19 {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #305a93;
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 5px;
}

.heading-19::before,
.heading-19::after {
    width: 3px;
    height: 20px;
    background-color: #305a93;
    content: '';
}

.heading-19::before {
    transform: rotate(-35deg);
    margin-right: 30px;
}

.heading-19::after {
    transform: rotate(35deg);
    margin-left: 30px;
}



/* ページ内のクリック要素 */
.cta-group {
    display: flex;
    justify-content: center; /* 中央に寄せる */
    gap: 20px; /* ボタン間の隙間 */
    margin: 20px auto;
    max-width: 1000px;
}

.cta-group_contents{
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* .page-cta {
    display: flex;
    width: 500px;
    flex-shrink: initial;
    flex-direction: column;
    align-items: center;
    border-radius: 50px;
} */

.page-cta {
    display: flex;
    width: 500px;
    flex-shrink: initial;
    align-items: center;
    border-radius: 50px;
    flex-direction: row;
    justify-content: center;
}

.cta-group_contents img{
    width: 35px;
    margin-right: 10px;
}

.cta-btn-left {
    background: linear-gradient(to bottom, #e84c4c, #bf0000);
    color: #fff;
    box-shadow: 0 5px 0 #8c0000;
    transition: all 0.2s;
    padding: 10px;
}

.cta-btn-left:hover {
    transform: translateY(2px);
    box-shadow: 0 2px 0 #8c0000;
}

.cta-btn-right {
    background: linear-gradient(to bottom, #4a7abf, #2b548b); /* 青系のグラデーション */
    color: #fff;
    box-shadow: 0 4px 0 #1e3a62;
    transition: all 0.2s;
    padding: 10px;
}

.cta-btn-right:hover {
    transform: translateY(2px);
    box-shadow: 0 2px 0 #1e3a62;
}

.cta-btn-sub-text {
    font-size: 18px;
    font-weight: bold;
    line-height: 1.2;
}

.cta-btn-sub-text-secondary {
    font-size: 25px;
    font-weight: bold;
}

/* --- スマホ時の横幅調整 --- */
@media (max-width: 768px) {
    /* 横並びを縦並びにする */
    .cta-group {
        flex-direction: column;
        align-items: center;
    }
.page-cta {
    width: 330px;
}
.cta-btn-sub-text {
    font-size: 16px;

}

.cta-btn-sub-text-secondary {
    font-size: 22px;
}
}


.tel-info-center {
    display: inline-flex;
    align-items: center;
    padding: 10px 20px;
    border-radius: 5px;
    flex-direction: column;
}

/* ページ内の電話 */
/* --- 電話セクションのスタイル --- */
.cta-tel-block {
    display: flex;
    align-items: center;
    flex-grow: 1;
    flex-basis: 250px;
    flex-direction: column;
}

.cta-tel-caption {
    font-size: 22px;
    line-height: 1.5;
    color: #bf0000;
    margin: 0;
    font-weight: bold;
}

.cta-tel-info {
    display: flex;
    align-items: center;
    /* padding: 5px 10px; */
    border-radius: 5px;
    flex-direction: column;
}

.cta-tel-info a { /* tel:リンクへのスタイル適用 */
    text-decoration: none; 
    color: inherit; 
    display: flex; 
    align-items: center;
}

.cta-tel-icon {
    font-size: 24px;
    margin-right: 5px;
    color: #2b78e4;
}

.cta-tel-number {
    font-size: 35px;
    font-weight: bold;
    color: #bf0000;
}

.cta-tel-hours {
    font-size: 18px;
}



/* マイクロコピー */
.heading-16 {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #d72d2d;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 5px;
}

.heading-16::before,
.heading-16::after {
    width: 3px;
    height: 40px;
    background-color: #d72d2d;
    content: '';
}

.heading-16::before {
    transform: rotate(-35deg);
    margin-right: 30px;
}

.heading-16::after {
    transform: rotate(35deg);
    margin-left: 30px;
}
/* 右側用 */
.heading-17 {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #305a93;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 5px;
}

.heading-17::before,
.heading-17::after {
    width: 3px;
    height: 40px;
    background-color: #305a93;
    content: '';
}

.heading-17::before {
    transform: rotate(-35deg);
    margin-right: 30px;
}

.heading-17::after {
    transform: rotate(35deg);
    margin-left: 30px;
}

/* --- 電話番号とアイコン --- */
.tel-info-center a {
    text-decoration: none; 
    color: inherit; 
    display: flex; 
    align-items: center;
    margin-right: 15px; /* 受付時間との間隔 */
}

/* 営業時間の設定（フッターのデザインを再利用） */
.cta-tel-block .tel-hours {
    color: #000;
    font-size: 18px;
}

/* スマホ対応（tel-info-center） */
@media (max-width: 768px) {
    .tel-info-center {
        flex-direction: column; /* 縦並び */
        padding: 15px;
    }
    .tel-info-center a {
        margin-right: 0;
        margin-bottom: 8px;
    }
}


/* 画像コンテンツ */
.gazou {
    display: flex;
    justify-content: center;
    margin: 20px auto;
    width: 800px;
}
.gazou_1 {
    display: flex;
    justify-content: center;
    margin: 15px auto;
    width: 900px;
}
.gazou_2 {
    display: flex;
    justify-content: center;
    margin: 20px auto;
    width: 250px;
}
.gazou_3 {
    display: flex;
    justify-content: center;
    margin: 20px auto;
    width: 700px;
}

.promotion-block {
    margin: auto;
    /* width: 1000px; */
}

.header-section {
    display: flex;
    align-items: flex-end;
    margin-bottom: 10px;
    justify-content: center;
}

.logo-image {
    height: 50px;
    width: auto;
    margin-right: 18px;
}

.catchphrase {
    font-size: 28px;
    font-weight: bold;
    color: #cc3333;
}

.service-description {
    font-size: 28px;
    text-align: center;
    font-weight: bold;
    color: #014d8f;
}
/* アイコン */
.icon{
    /* width: 1000px; */
    margin: 0 auto 20px;
    display: flex;
    justify-content: center;
}

.image-container {
    width: 100px;
    height: 100px;
    background: #014d8f;
    border-radius: 50%; 
    /* 画像を中央に配置するための設定 */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 24px;
}

 .light{
    padding: 15px !important; 
 }

.image-container img {
    max-width: 100%;
    max-height: 100%;
    display: block;
}

/*ほかページへの遷移ボタン*/
.button-36 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 250px;
    margin: 0 auto;
    padding: .9em 2em;
    border: 1px solid #2589d0;
    border-radius: 25px;
    background-color: #fff;
    color: #2589d0;
    font-size: 1em;
}

.button-36:hover {
    border: none;
    background-color: #2589d0;
    color: #fff;
    font-weight: 600;
}

.button-36::after {
    transform: rotate(45deg);
    width: 5px;
    height: 5px;
    margin-left: 10px;
    border-top: 2px solid #2589d0;
    border-right: 2px solid #2589d0;
    content: '';
}

.button-36:hover::after {
    border-color: #fff;
}

/* アンダーライン */
.borderline{
    background: linear-gradient(transparent 70%, yellow 70%);
}

/* スライダー */
.swiper-slide {
  opacity: .3; /* 左右のスライドを薄くする */
  transform: scale(.8); /* 左右のスライドを小さくする */
  transition: .7s; /* ゆっくり小さくさせる */
}
.swiper-slide img {
  height: auto;
  border: 1px solid #ccc;
}
.swiper-slide-active {
  opacity: 1; /* 中央のスライドは薄くしない */
  transform: scale(1); /* 中央のスライドは小さくしない */
  z-index: 1; /* 中央のスライドを一番上にする */
}

/* もらって嬉しい！販促花子の人気ノベルティ */
.product_name{
    font-size: 16px;
    font-weight: bold;
}

.swiper-slide a{
    color: #000;
}
.button-1 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 500px;
    margin: 0 auto;
    padding: 10px;
    border: 2px solid #014d8f;
    border-radius: 50px;
    background-color: #fff;
    color: #014d8f;
    font-size: 25px;
    font-weight: bold;
    margin-bottom: 20px;
}

.button-1::after {
    transform: rotate(45deg);
    width: 10px;
    height: 10px;
    margin-left: 10px;
    border-top: 3px solid #014d8f;
    border-right: 3px solid #014d8f;
    content: '';
}

/* スマホ版 */
@media (max-width: 768px) {
.section-navi {
    padding-bottom: 30px;
}
.lp_content {
    padding: 0;
}
.catchphrase {
    font-size: 18px;
}
.service-description {
    font-size: 18px;
}
.kyoutyou {
    font-size: 22px;
}
.kyoutyou_2 {
    font-size: 22px;
}
.explain_opp {
    font-size: 17px;
    text-align: center;
}
.heading-9 {
    font-size: 22px;
}
.image-container {
    width: 80px;
    height: 80px;
    padding: 15px;
}
.heading-16 {
    font-size: 17px;
}
.heading-6 {
    font-size: 22px;
    display: grid;
}
.heading-6::before, .heading-6::after {
    top: 20%;
    width: 85px;
}
.heading-jirei {
    font-size: 22px;
}

.heading-jirei::before,
.heading-jirei::after {
    content: '';
    display: inline-block;
    position: absolute;
    top: 50%;
    width: 100px;
    height: 3px;
    background-color: #014d8f;
}

.heading-jirei::before {
    left: 0;
}

.heading-jirei::after {
    right: 0;
}
.heading-17 {
    font-size: 17px;
}
.cta-tel-number {
    font-size: 25px;
}
.button-1 {
    width: 330px;
    font-size: 18px;
}
.button-1::after {
    width: 5px;
    height: 5px;
    border-top: 2px solid #014d8f;
    border-right: 2px solid #014d8f;
}
.title {
    font-size: 19px !important;
}
.btn-left {
    width: 100%; /* 幅の調整 */
}
.gazou_2 {
    width: 150px;
}
.product_name{
    font-size: 14px;
}
}
@media screen and (max-width: 768px) {
    .pc-only-br {
        /* display: none; で要素を非表示にする（改行を無効にする） */
        display: none;
    }
}

.exhibition-component-wrapper {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    margin-bottom: 20px;
}

.exhibition-set {
    flex-basis: 32%;
    box-sizing: border-box;
    background: #f2fafc;
    padding: 10px;
    border-radius: 10px;
}

.title_jirei {
    font-size: 22px;
    font-weight: bold;
    margin: 0 0 10px 0;
    text-decoration: underline;
}

.jirei_item{
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 5px;
}

.jirei_item_name{
    font-size: 13px;
    margin-bottom: 5px;
}

.exhibition-set a{
    color: #0000ee;
    text-decoration: underline;
}

.exhibition-component-wrapper img{
    border: solid 1px #ccc;
    margin-bottom: 10px;
}

@media (max-width: 600px) {
    .exhibition-component-wrapper {
        flex-direction: column;
        gap: 30px;
    }

    .exhibition-set {
        flex-basis: auto;
        max-width: 400px;
        margin: 0 auto;
    }
}

.exhibition-component-wrapper {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
}

.exhibition-set {
    flex-basis: 32%;
    box-sizing: border-box;
}

.title_jirei {
    font-size: 2.2rem;
    font-weight: bold;
    margin: 0 0 10px 0;
    color: #333;
    text-decoration: underline;
}

.image-placeholder {
    width: 100%;
    padding-top: 100%;
    background-color: #808080;
    border: 1px solid #000;
    box-sizing: border-box;
    position: relative;
}

@media (max-width: 600px) {
    .exhibition-component-wrapper {
        flex-direction: column;
        gap: 30px;
    }

    .exhibition-set {
        flex-basis: auto;
        max-width: 400px;
        margin: 0 auto;
    }
}

/* デフォルトの表示（PCを基準とする場合） */
.sp-only {
    display: none; /* SP用画像を非表示 */
}

/* 767px以下の画面幅（スマートフォン）の場合に適用 */
@media screen and (max-width: 767px) {
    .pc-only {
        display: none; /* PC用画像を非表示 */
    }

    .sp-only {
        display: block; /* SP用画像を表示 */
    }
}