@charset "UTF-8";
/* CSS Document */
/*////　共通style　////*/
html {
	font-size: 62.5%;
	font-weight: 400;
}

body {
	font-family: 'Noto Sans JP', sans-serif, "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo";
	font-weight: 400;
	color: #222;
	background-color: #fff;
}

.pc,
.pc_tab {
	display: block;
}

.sp,
.sp_only {
	display: none;
}

img {
	width: 100%;
	height: auto;
	display: block;
}

.text-small {
	font-size: 70%;
}
/*.inner {
	width: 100%;
	max-width: 960px;
	margin: 0 auto;
	padding: 0 20px;
	box-sizing: border-box;
}*/
/*======================================
  汎用装飾：特殊アンダーライン (.deco-underline)
======================================*/
.deco-underline {
    position: relative;
    display: inline-block;
    padding-bottom: 12px; /* 文字と線の隙間 */
}

/* 左側の長い横線 */
.deco-underline::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    /* 右パーツ(35px)＋隙間(10px)の合計45px分を空けて線を引く */
    width: calc(100% - 45px); 
    height: 3px;
    background-color: #ff3e2b;
}

/* 右側の特殊な折れ曲がり線 */
.deco-underline::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -12px; /* 斜め線が下にはみ出す長さ */
    width: 35px; /* 右側の短い横線の長さ */
    height: 15px; /* height15px - bottom12px で、上部の線を::beforeの高さ(3px)にピタッと合わせる */
    border-top: 3px solid #ff3e2b;
    border-left: 3px solid #ff3e2b;
    /* 左側の線を斜めに歪ませることで「／￣」の形を作る */
    transform: skewX(-40deg); 
    transform-origin: top left;
    box-sizing: border-box;
}

/*////　LP　////*/
#lpContent {
}

#lpContent .inner {
	width: 100%;
	max-width: 960px;
}

/*////  MV (ヒーローエリア) PC向け  ////*/
.mv {
    position: relative;
    width: 100%;
    /* max-width: 1366px; を削除し、画面幅いっぱいに広げます */
    background-color: #fcfcfc;
}

.mv-img {
    width: 100%;
}

.mv-img img {
    width: 100%;
    height: auto;
    min-height: 600px; /* 縮小時に高さが減りすぎてテキストがヘッダーに被るのを防ぐ */
    object-fit: cover; /* 高さが固定された際も画像を歪ませずトリミングする */
    object-position: right bottom; /* 右側の人物を中心にトリミング */
    display: block;
}

#lpContent .mv-inner {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%); 
    width: 100%;
    max-width: 1366px; 
    height: 100%;
    z-index: 2;
    display: flex;
    align-items: center;
    
    margin: 0; 
    /* 1366px以下の時に余白も一緒に縮小させるためvw指定に変更 (60 / 1366 * 100) */
    padding: 0 0 0 4.4vw; 
    box-sizing: border-box;
}

/* 画面幅に応じてテキストエリアも縮小させる */
.mv-content {
    width: 100%;
    max-width: 960px; /* カンプ指定の最大幅 */
    /* ↓追加：1366px幅の時に左半分（50%〜60%）に収まるように制限 */
    width: 55%; 
}

/* エンブレムも可変にする */
.mv-emblems {
    display: flex;
    align-items: center;
    /* 隙間も可変に */
    gap: 1.5vw;
    margin-bottom: 2vw;
}

.mv-emblems img {
    /* 201pxの固定を解除し、可変に。1366px時の201pxの割合 (201 / 1366 * 100) */
    width: 14.7vw;
    max-width: 201px; /* 広げすぎた時のストッパー */
    height: auto;
}

.mv-text {
    margin-bottom: 1.2vw;
}

.mv-text img {
    /* 1366px時の420pxの割合 (420 / 1366 * 100) */
    width: 30.7vw; 
    max-width: 420px; 
}

.mv-title {
    margin-bottom: 1.8vw;
}

.mv-title img {
    /* (480 / 1366 * 100) */
    width: 35.1vw; 
    max-width: 480px;
}

.mv-read {
    margin-bottom: 3vw;
}

.mv-read img {
    /* (450 / 1366 * 100) */
    width: 32.9vw; 
    max-width: 450px;
}

.mv-btn {
    /* (400 / 1366 * 100) */
    width: 29.3vw; 
    max-width: 400px;
}

.mv-btn a {
    display: block;
    transition: opacity 0.3s ease;
}

.mv-btn a:hover {
    opacity: 0.8;
}

/*======================================
  4つの特徴エリア (.strengths)
======================================*/
.strengths {
    padding: 60px 0;
    background-color: #fff;
}

.strengths-list {
    display: flex;
    justify-content: space-between;
    align-items: stretch; /* 区切り線の高さを揃える */
    list-style: none;
    padding: 0;
    margin: 0;
}

.strengths-item {
    flex: 1;
    padding: 0 20px;
    border-right: 1px solid #b7d100; /* カンプに合わせた区切り線の色 */
}

/* 最後の項目の右線は消す */
.strengths-item:last-child {
    border-right: none;
}

.strengths-title {
    text-align: center;
    font-size: 1.8rem;
    font-weight: bold;
    margin-bottom: 20px;
    letter-spacing: 0.05em;
}

.strengths-content {
    display: flex;
    align-items: center; /* アイコンとテキストを縦中央で揃える */
    gap: 15px;
}

.strengths-img {
    width: 45%; /* アイコンの幅割合（デザインに合わせて微調整してください） */
    flex-shrink: 0;
}

.strengths-text {
    font-size: 1.3rem;
    line-height: 1.6;
    margin: 0;
}

/*======================================
  緑背景CTAエリア (.cta-green)
======================================*/
.cta-green {
    background-color: #a4cb00; /* カンプの緑色 */
    padding: 50px 0 60px;
    text-align: center;
}

.cta-green-title {
    color: #fff;
    font-size: 3.6rem;
    font-weight: bold;
    margin-bottom: 40px;
}

.cta-green-btns {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px; /* ボタン同士の隙間 */
}

.cta-green-btns .cta-btn {
    display: block;
    width: 100%;
    max-width: 440px; /* ボタン画像の最大幅 */
    transition: opacity 0.3s ease;
}

.cta-green-btns .cta-btn:hover {
    opacity: 0.8;
}

/*======================================
  お悩みセクション (.worries)
======================================*/
.worries {
    background-color: #fff;
}
/* 上部（白背景エリア） */
.worries-top {
    padding-top: 80px;
    position: relative; /* 追加：画像絶対配置の基準とする */
}

.worries-inner {
    width: 100%;
    max-width: 1366px;
    margin: 0 auto;
    padding: 0 0 0 4.4vw; 
    box-sizing: border-box;
    /* display: flex; や justify-content などは不要になったので削除 */
}

.worries-content {
    /* 画像が右側に配置されるため、テキストエリアが被らないように幅を制限 */
    width: 55%; 
    padding-bottom: 40px;
    padding-right: 20px; 
    box-sizing: border-box;
    position: relative;
    z-index: 2; /* テキストを画像より手前に配置 */
}

.worries-title {
    color: #ff3e2b;
    font-size: 45px;
    font-weight: bold;
    margin-bottom: 40px;
    letter-spacing: 0.025em;
    white-space: nowrap; /* PCでは文字を折り返さず一行にする */
}

.worries-list {
    list-style: none;
    padding: 0;
    margin: 0 0 50px 10.5vw; 
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.worries-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 1.8rem;
    font-weight: bold;
    line-height: 1.5;
    white-space: nowrap;
}

.check-icon {
    width: 24px;
    flex-shrink: 0;
    margin-top: 2px;
}


.worries-emphasis {
    color: #ff3e2b;
    font-size: 3.6rem;
    font-weight: bold;
}

.worries-emphasis p {
    margin: 0;
}

.worries-img {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 50%; 
    max-width: 683px;
    height: 100%; /* 追加：親(.worries-top)の高さいっぱいに制限する */
    z-index: 1;
}

.worries-img img {
    display: block;
    width: 100%;
    height: 100%; /* 追加：枠の高さに合わせる */
    object-fit: cover; /* 追加：画像の縦横比を保ったままトリミング（上の白余白がカットされる） */
    object-position: right bottom; /* 追加：右下の人物を基準に表示 */
}

/* 下部（緑背景エリア） */
.worries-bottom {
    background-color: #aecd00; /* 指定の黄緑ベタ */
    padding: 60px 0;
    position: relative;
    overflow: hidden; /* クエスチョンマークのはみ出しを隠す */
}

.worries-bottom-content {
    position: relative;
    z-index: 2; /* クエスチョンマークより前に出す */
}

.worries-bottom-title {
    color: #fff;
    font-size: 3.2rem;
    font-weight: bold;
    margin-bottom: 20px;
    letter-spacing: 0.05em;
}

.worries-bottom-text {
    color: #fff;
    font-size: 1.6rem;
    line-height: 1.8;
    margin: 0;
    font-weight: 500;
}

.worries-q {
    position: absolute;
    right: 5%;
    bottom: -10%; /* 少し見切れるように配置 */
    width: 280px;
    z-index: 1;
    opacity: 0.8; /* カンプに合わせて透過度を微調整 */
}

/*======================================
  選ばれる7つの理由セクション (.reasons)
======================================*/
.reasons {
    background-color: #f5f9ef; /* 指定背景色 */
    padding: 80px 0;
}

.reasons-header {
    width: 100%;
    max-width: 1366px;
    margin: 0 auto 50px; /* 中央寄せにしつつ、下マージンを50px空ける */
    padding: 0 20px 0 4.4vw; /* 左端をMVや「お悩み」のテキスト開始位置に揃える */
    box-sizing: border-box;
    text-align: left;
}

.reasons-title {
    color: #ff3e2b;
    font-size: 3.6rem;
    font-weight: bold;
    margin-bottom: 20px;
}

.reasons-title span {
    font-size: 4.2rem;
}

.reasons-lead {
    font-size: 1.6rem;
    line-height: 1.8;
    font-weight: 500;
}

/* アコーディオン全体 */
.accordion-container {
    display: flex;
    flex-direction: column;
    gap: 20px; /* パネル間の隙間 */
}

.accordion-item {
    background-color: #fff;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
	overflow: hidden;
}

/* アコーディオン・ヘッダー（クリック部分） */
.accordion-head {
    display: flex;
    align-items: center;
    padding: 30px 40px;
    cursor: pointer;
    position: relative;
    z-index: 3;
	background-color: #fff;
    transition: background-color 0.3s ease;
}

.accordion-head:hover {
    /*background-color: #fafdf7;*/
}

.accordion-num {
    color: #aecd00;
    font-size: 6rem;
    font-weight: bold;
    line-height: 1;
    width: 100px;
    flex-shrink: 0;
}

.accordion-title-wrap {
    flex-grow: 1;
    padding-right: 40px;
}

.accordion-heading {
    font-size: 2.2rem;
    font-weight: bold;
    margin-bottom: 10px;
    letter-spacing: 0.05em;
    color: #222;
}

.accordion-desc {
    font-size: 1.4rem;
    line-height: 1.6;
    margin: 0;
    color: #333;
}

/* 開閉トグル用のクラス設定 */
.accordion-opened {
    display: none; /* 初期状態では隠す */
}
.accordion-opened .accordion-heading {
    color: #ff3e2b; /* 展開時は赤色 */
    margin-bottom: 0;
}

/* アコーディオンが開いた時（.is-open付与時）の表示切替 */
.accordion-item.is-open .accordion-closed {
    display: none;
}
.accordion-item.is-open .accordion-opened {
    display: block;
}

/* 開閉アイコン (V字) */
.accordion-icon {
    position: relative;
    width: 24px;
    height: 24px; /* 高さを広げて中央に配置しやすくする */
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.accordion-icon::before {
    content: "";
    position: absolute;
    top: 4px;
    left: 6px;
    width: 12px;
    height: 12px;
    border-bottom: 4px solid #aecd00;
    border-right: 4px solid #aecd00;
    /* 角をほんの少しだけ丸くする場合 */
    border-bottom-right-radius: 2px; 
    transform: rotate(45deg);
    box-sizing: border-box;
}

.accordion-icon::after {
    display: none;
}

/* 開いた時は親要素ごと逆さに回転させる */
.accordion-item.is-open .accordion-icon {
    transform: rotate(-180deg);
}


/* アコーディオン・ボディ（展開部分） */
.accordion-body {
    display: none; /* 初期状態では閉じる */
    padding: 0 40px 40px;
	position: relative;
    z-index: 1;
}

.accordion-body-inner {
    position: relative;
    padding-top: 30px;
    padding-left: 100px; /* 番号(100px)の分だけ字下げして揃える */
}

.accordion-text-area {
    position: relative;
    z-index: 2; /* 背景画像より前に出す */
    width: 65%; /* 画像に被らないようテキストエリアの幅を制限 */
}

.accordion-sub-title {
    font-size: 1.8rem;
    font-weight: bold;
    margin-bottom: 20px;
    line-height: 1.5;
}

.accordion-text {
    font-size: 1.4rem;
    line-height: 1.8;
    margin-bottom: 30px;
}

.accordion-btn-group {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.accordion-btn {
    display: block;
    width: 100%;
    max-width: 320px;
    transition: opacity 0.3s ease;
}

.accordion-btn:hover {
    opacity: 0.8;
}

/* 背景イラスト画像 */
.accordion-bg {
    position: absolute;
    right: -40px;
    bottom: -40px; 
    width: 65%; 
    max-width: 650px; 
    z-index: 1; /* テキスト(2)や見出し(3)より背面になる */
    pointer-events: none;
}

.accordion-bg img {
    display: block;
    width: 100%;
    height: auto;
}

/*======================================
  縦長イラスト（03, 06）の個別サイズ調整
======================================*/
.accordion-item:nth-child(3) .accordion-bg,
.accordion-item:nth-child(6) .accordion-bg {
    width: 55%; /* 共通の65%より少し小さくする */
    max-width: 640px;
}

/*======================================
  縦長イラスト（02）の個別サイズ調整
======================================*/
.accordion-item:nth-child(2) .accordion-bg {
    width: 52%; /* 共通の65%より少し小さくする */
    max-width: 630px;
}

/*======================================
  提案事例セクション (.cases)
======================================*/
.cases {
    padding: 80px 0;
    background-color: #fff;
}

.cases-header {
    width: 100%;
    max-width: 1366px;
    margin: 0 auto 50px;
    padding: 0 20px 0 4.4vw; /* 7つの理由と同じ左揃え */
    box-sizing: border-box;
}

/* リード文エリアは inner(960px) の幅に収める */
.cases-lead {
    padding: 0;
    margin: 0 auto;
	width: 100%;
    max-width: 960px;
}

.cases-lead-title {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 15px;
    letter-spacing: 0.05em;
}

.cases-lead p {
    font-size: 1.6rem;
    line-height: 1.8;
    margin: 0;
}

/* 事例コンテナ */
.cases-container {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* 各事例の枠 */
.case-item {
    border: 1px solid #cdcdcd; /* 指定のグレー枠線 */
    padding: 40px;
    background-color: #fff;
    /* 上部の緑色の太線装飾 */
    position: relative;
}

.case-item::before {
    content: "";
    position: absolute;
    top: 40px;
    left: 40px;
    right: 40px;
    height: 8px;
    background-color: #aecd00;
}

/* ヘッダー部分（CASE番号と見出し） */
.case-head {
    display: flex;
    align-items: center;
    margin-top: 20px;
    margin-bottom: 30px;
}

.case-num {
    color: #aecd00;
    font-size: 6rem;
    font-weight: bold;
    line-height: 0.9;
    margin-right: 30px;
    letter-spacing: -0.02em;
}

.case-num span {
    font-size: 2.4rem;
    display: block;
	margin-bottom: -50px;
    letter-spacing: 0.05em;
}

.case-title-wrap {
    padding-top: 15px; /* 番号との縦位置調整 */
}

.case-heading {
    font-size: 4.8rem;
    font-weight: bold;
    color: #ff3e2b;
    line-height: 1.2;
    margin: 0;
}

/* 提案事例固有のアンダーライン（赤文字用） */
.case-heading .deco-underline {
    padding-bottom: 8px;
}

/* ボディ部分（テキストとタグ） */
.case-body {
    padding-left: 0; /* 必要に応じて字下げする場合はここに数値を入れます */
}

.case-sub-title {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 20px;
    letter-spacing: 0.05em;
}

.case-text {
    font-size: 1.5rem;
    line-height: 1.8;
    margin-bottom: 30px;
}

/* 対応内容などのラベルとリスト */
.case-tags {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.case-tag-label {
    background-color: #aecd00;
    color: #fff;
    font-size: 1.6rem;
    font-weight: bold;
    padding: 10px 20px;
    text-align: center;
    white-space: nowrap;
}

.case-tag-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
    align-items: center;
    min-height: 46px; /* ラベルの高さに合わせる */
}

.case-tag-list li {
    font-size: 1.4rem;
    font-weight: bold;
    position: relative;
    padding-left: 15px;
}

/* リストの緑の丸ポチ */
.case-tag-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #aecd00;
}

/* クロスメディア提案エリア (CASE 02専用) */
.case-cross-media {
    margin-top: 30px;
    padding-top: 12px;
    border-top: 1px solid #aecd00;
	padding-bottom: 12px;
	border-bottom: 1px solid #aecd00;
    display: flex;
    align-items: center;
    gap: 20px;
}

.case-cross-label {
    color: #aecd00;
    font-size: 1.8rem;
    font-weight: bold;
}

.case-cross-text {
    font-size: 1.5rem;
    font-weight: bold;
}

/*======================================
  数字でわかる、安心と信頼セクション (.trust)
======================================*/
.trust {
    padding: 80px 0;
    background-color: #f5f9ef;
}

.trust-header {
    width: 100%;
    max-width: 1366px;
    margin: 0 auto 50px;
    padding: 0 20px 0 4.4vw;
    box-sizing: border-box;
}

.trust-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* カード間の隙間 */
}

.trust-item {
    background-color: #fff;
    width: calc(50% - 10px); /* 2列配置 (隙間30pxの半分を引く) */
    box-sizing: border-box;
    padding: 40px;
    display: flex;
    flex-direction: column;
	box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.trust-img {
    margin-bottom: 20px;
}

.trust-img img {
    width: 100%;
    height: auto;
    display: block;
}

.trust-text {
    font-size: 1.5rem;
    font-weight: bold;
    line-height: 1.6;
    margin: 0; 
}

/*======================================
  幅広い業種のチラシデザイン実績 (.works)
======================================*/
.works {
    padding: 80px 0;
    background-color: #f5f9ef;
}

.works-header {
    width: 100%;
    max-width: 1366px;
    margin: 0 auto 50px;
    padding: 0 20px 0 4.4vw; 
    box-sizing: border-box;
    text-align: left;
}

.works-lead {
    padding: 0;
    margin: 0 auto;
    width: 100%;
    max-width: 960px;
}

.works-lead-title {
    font-size: 1.8rem;
    font-weight: bold;
    margin-bottom: 10px;
    letter-spacing: 0.05em;
}

.works-lead p {
    font-size: 1.4rem;
    line-height: 1.8;
    margin: 0;
    font-weight: 500;
}

.works-container {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.works-item {
    background-color: #fff;
    padding: 40px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    position: relative; /* 追加：装飾線の基準とする */
}

/* 上部の緑色の太線装飾（提案事例と同じ幅・位置にする） */
.works-item::before {
    content: "";
    position: absolute;
    top: 40px;
    left: 40px;
    right: 40px;
    height: 8px;
    background-color: #aecd00;
}

.works-item-head {
    display: flex;
    align-items: center;
    background-color: #aecd00;
    color: #fff;
    padding: 0 20px;
    width: fit-content; 
    min-width: 280px; 
    margin-top: 24px;
    margin-bottom: 20px;
    position: relative;
}


.works-icon {
    width: 70px;
    margin-right: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.works-icon img {
    width: 100%;
    height: auto;
}

.works-item-title {
    font-size: 3.5rem;
    font-weight: bold;
    margin: 0;
    letter-spacing: 0.05em;
}

.works-item-text {
    font-size: 2.4rem;
    font-weight: bold;
    margin-bottom: 30px;
    line-height: 1.6;
}

.works-img {
    display: flex;
    justify-content: space-between;
    gap: 20px; /* 画像間の隙間 */
}

/* 親がflexになったため、imgが伸びないように幅を制限 */
.works-img img {
    width: calc((100% - 40px) / 3); 
    height: auto;
    display: block;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1); 
    box-sizing: border-box;
}

/* 画像が1枚だけの場合は全幅にする */
.works-img img:only-child {
    width: 100%;
}

/* 注釈テキスト */
.works-note {
    text-align: right;
    font-size: 1.2rem;
    color: #666;
    margin: 10px 0 0 0;
}

/*======================================
  取引先会社セクション (.clients)
======================================*/
.clients {
    padding: 80px 0;
    background-color: #fff;
}

.clients-header {
    width: 100%;
    max-width: 1366px;
    margin: 0 auto 50px;
    padding: 0 20px 0 4.4vw; 
    box-sizing: border-box;
    text-align: left;
}

.clients-lead {
    padding: 0;
    margin: 0 auto;
    width: 100%;
    max-width: 960px;
}

.clients-lead-title {
    font-size: 1.8rem;
    font-weight: bold;
    margin-bottom: 10px;
    letter-spacing: 0.05em;
}

.clients-lead p {
    font-size: 1.4rem;
    line-height: 1.8;
    margin: 0;
    font-weight: 500;
}

/* 2列レイアウト用のコンテナ */
.clients-container {
    display: flex;
    flex-wrap: wrap;
    gap: 40px 30px; /* 縦の隙間 40px, 横の隙間 30px */
}

/* 各カードのスタイル */
.clients-item {
    width: calc(50% - 15px);
    box-sizing: border-box;
    border-top: 6px solid #aecd00; 
}

/* カードのヘッダー部分（黄緑色） */
.clients-item-head {
    background-color: #aecd00; 
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px; 
    margin-top: 20px; 
    margin-bottom: 30px;
}

.clients-icon {
    width: 70px; /* アイコンサイズ（適宜調整） */
    margin-right: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.clients-icon img {
    width: 100%;
    height: auto;
}

.clients-item-title {
    font-size: 3.5rem;
    font-weight: bold;
    margin: 0;
    letter-spacing: 0.05em;
}

/* 取引先の各項目 */
.clients-body {
    padding: 0 10px; /* 左右に少し余白 */
}

.clients-block {
    margin-bottom: 25px;
}

.clients-block:last-child {
    margin-bottom: 0;
}

.clients-block-title {
    font-size: 2.4rem;
    font-weight: bold;
    margin-bottom: 10px;
    position: relative;
    padding-left: 20px; /* 正方形アイコンの分の余白 */
}

/* タイトル左の緑色の四角(■) */
.clients-block-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    background-color: #aecd00;
}

.clients-block-text {
    font-size: 1.6rem;
    line-height: 1.6;
    margin: 0;
}

/* 右下のイラストエリア */
.clients-illust {
    width: calc(50% - 15px); /* 他のカードと同じ1枠分の幅を確保 */
    display: flex;
    align-items: flex-end; /* コンテナの下端に揃える */
    justify-content: center;
}

.clients-illust img {
    width: 100%;
    max-width: 500px; /* 画像が大きくなりすぎないように制限 */
    height: auto;
    display: block;
}

/*======================================
  サービス一覧セクション (.services)
======================================*/
.services {
    padding: 80px 0;
    background-color: #fff;
}

.services-header {
    width: 100%;
    max-width: 1366px;
    margin: 0 auto 30px;
    padding: 0 20px 0 4.4vw; 
    box-sizing: border-box;
    text-align: left;
}

.services-lead {
    padding: 0;
    margin: 0 auto;
    width: 100%;
    max-width: 960px;
}

.services-lead-title {
    font-size: 1.8rem;
    font-weight: bold;
    margin-bottom: 10px;
    letter-spacing: 0.05em;
}

.services-lead p {
    font-size: 1.4rem;
    line-height: 1.8;
    margin: 0;
    font-weight: 500;
}

/* 全てのデザインを確認するリンク（セクション上部） */
.services-link-wrap {
    margin-bottom: 40px;
}

.services-link-main {
    display: inline-block;
    color: #ff3e2b;
    font-size: 2.8rem;
    font-weight: bold;
    text-decoration: none;
    letter-spacing: 0.05em;
}

.services-link-main .deco-underline {
    padding-bottom: 8px; /* アンダーラインとの距離調整 */
}

/* 2列レイアウト用のコンテナ */
.services-container {
    display: flex;
    flex-wrap: wrap;
    /* ↓↓ 修正：隙間を 0 にしてぴったりくっつける ↓↓ */
    gap: 0; 
    /* ↓↓ 追加：外枠全体の上と左にだけ線を引く（二重線を防ぐため） ↓↓ */
    border-top: 1px solid #cdcdcd;
    border-left: 1px solid #cdcdcd;
}

/* 各カードのスタイル */
.services-item {
    width: 50%; 
    box-sizing: border-box;
    border-right: 1px solid #cdcdcd; 
    border-bottom: 1px solid #cdcdcd; 
    border-top: none;
    border-left: none;
    position: relative;
    background-color: #fff;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.services-item::before {
    content: "";
    position: absolute;
    top: 40px;
    left: 40px; 
    right: 40px; 
    height: 8px;
    background-color: #aecd00;
    z-index: 2;
}

/* カードのヘッダー部分（黄緑色） */
.services-item-head {
    background-color: #aecd00; 
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    margin: 66px 40px 20px; 
    position: relative;
    z-index: 2;
}

.services-icon {
    width: 70px; /* アイコンサイズ（適宜調整） */
    margin-right: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.services-icon img {
    width: 100%;
    height: auto;
}

.services-item-title {
    font-size: 2.8rem;
    font-weight: bold;
    margin: 0;
    letter-spacing: 0.1em;
}

/* カードのテキスト部分 */
.services-body {
    padding: 0 40px 40px;
    position: relative;
    z-index: 2; /* イラストより手前に */
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* 高さを揃えるため残りの空間を埋める */
}

.services-text {
    font-size: 1.6rem;
    font-weight: bold;
    line-height: 1.6;
    margin: 0 0 30px 0;
}

.services-link {
    display: inline-block;
    color: #005bac; /* 青色リンク */
    font-size: 1.4rem;
    font-weight: bold;
    text-decoration: none;
    margin-top: auto; /* ボタンを常に下部に配置 */
}

.services-link:hover {
    text-decoration: underline;
}

/* 背景イラスト画像 */
.services-bg {
    position: absolute;
    right: 0;
    bottom: 0; 
    width: 100%; 
    z-index: 1; /* テキストの後ろに配置 */
    pointer-events: none; /* 画像の上のテキストを選択可能にする */
}

.services-bg img {
    display: block;
    width: 100%;
    height: auto;
}

/*======================================
  よくあるご質問セクション (.faq)
======================================*/
#lpContent .faq {
    padding: 80px 0;
    background-color: #f5f9ef;
    border: none;
    box-shadow: none;
}


.faq-header {
    width: 100%;
    max-width: 1366px;
    margin: 0 auto 50px;
    padding: 0 20px 0 4.4vw; 
    box-sizing: border-box;
    text-align: left;
}

.faq-lead {
    padding: 0;
    margin: 0 auto;
    width: 100%;
    max-width: 960px;
}

.faq-lead-title {
    font-size: 2rem;
    font-weight: bold;
    margin: 0;
    letter-spacing: 0.05em;
}

.faq-container {
    background-color: #fff; /* Q&Aエリアは白背景 */
    padding: 20px 40px; /* 枠内の余白 */
}

.faq-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.faq-item {
    padding: 40px 0;
    border-bottom: 1px solid #b7d100; /* 区切り線の緑色 */
}

/* 最後の項目の下線は消す */
.faq-item:last-child {
    border-bottom: none;
}

/* 質問 (Q) ブロック */
.faq-q {
    display: flex;
    align-items: flex-start; /* 複数行になってもアイコンを上に揃える */
    margin-bottom: 20px;
}

.faq-icon-q {
    background-color: #aecd00; /* 緑色ベタ */
    color: #fff;
    font-size: 1.8rem;
    font-weight: bold;
    font-family: 'Roboto', sans-serif;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0; /* アイコンが潰れないようにする */
    margin-right: 20px;
}

.faq-q-text {
    font-size: 1.8rem;
    font-weight: bold;
    line-height: 1.5;
    margin: 0;
    padding-top: 3px; /* アイコンとテキストの縦位置の微調整 */
}

/* 回答 (A) ブロック */
.faq-a {
    display: flex;
    align-items: flex-start;
}

.faq-icon-a {
    background-color: #fff;
    color: #aecd00; /* 緑文字 */
    border: 2px solid #aecd00; /* 緑枠線 */
    box-sizing: border-box;
    font-size: 1.8rem;
    font-weight: bold;
    font-family: 'Roboto', sans-serif;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-right: 20px;
}

.faq-a-text {
    font-size: 1.5rem;
    font-weight: bold;
    line-height: 1.8;
    margin: 0;
    padding-top: 3px;
}

/* リンク色（青） */
.faq-a-text a {
    color: #005bac;
    text-decoration: none;
}

.faq-a-text a:hover {
    text-decoration: underline;
}

/*======================================
  ご対応可能メニューセクション (.menu)
======================================*/
.menu {
    padding: 80px 0;
    background-color: #fff;
}

.menu-header {
    width: 100%;
    max-width: 1366px;
    margin: 0 auto 50px;
    padding: 0 20px 0 4.4vw;
    box-sizing: border-box;
    text-align: left;
}

.menu-container {
    display: flex;
    flex-wrap: wrap;
    gap: 30px 20px; /* 縦の隙間30px、横の隙間20px */
}

/* PCは 4カラム */
.menu-item {
    width: calc((100% - 60px) / 4); /* 横の隙間(20px×3)を引いて4等分 */
    box-sizing: border-box;
    border-top: 8px solid #aecd00; /* 上部の緑の太線装飾 */
    display: flex;
    flex-direction: column;
}

.menu-item-title {
    background-color: #aecd00;
    color: #fff;
    font-size: 1.6rem;
    font-weight: bold;
    text-align: center;
    padding: 12px 0;
    margin: 10px 0 5px 0;
    letter-spacing: 0.05em;
}

.menu-img {
    width: 100%;
}

.menu-img img {
    width: 100%;
    height: auto;
    display: block;
}

/*======================================
  お気軽にご相談くださいセクション (.contact-area)
======================================*/
.contact-area {
    width: 100%;
}

.contact-top {
    background-color: #fff;
    padding: 80px 0 0; 
    position: relative;
    overflow: hidden; 
}

.contact-header {
    width: 100%;
    max-width: 1366px;
    margin: 0 auto 50px;
    padding: 0 20px 0 4.4vw;
    box-sizing: border-box;
    text-align: left;
    position: relative;
    z-index: 2;
}

/* 右側のイラスト (innerの外) */
.contact-illust {
    position: absolute;
    right: 0;
    bottom: 0; 
    width: 55%; 
    max-width: 800px; 
    z-index: 1;
}

.contact-illust img {
    display: block;
    width: 100%;
    height: auto;
}

/* コンテンツ部分 (innerの中) */
.contact-content {
    position: relative;
    z-index: 2;
    padding-bottom: 80px; 
    width: 65%; /* イラストと被らないように幅を制限 */
}

.contact-check-list {
    list-style: none;
    padding: 0;
    margin: 0 0 50px 0;
}

.contact-check-list li {
    display: flex;
    align-items: center;
    font-size: 1.6rem;
    font-weight: bold;
    margin-bottom: 20px;
}

.contact-check-list li:last-child {
    margin-bottom: 0;
}

.contact-check-icon {
    width: 24px;
    margin-right: 15px;
    flex-shrink: 0;
}


.contact-tel-box {
    display: inline-block;
}

.contact-tel-label {
    background-color: #ff3e2b;
    color: #fff;
    font-size: 1.8rem;
    font-weight: bold;
    text-align: center;
    padding: 10px 30px;
    border-radius: 30px;
    display: inline-block;
    margin-bottom: 10px;
}

.contact-tel-number-wrap {
    display: flex;
    align-items: center; 
    gap: 15px;
}

.contact-tel-number {
    color: #ff3e2b;
    font-size: 4.8rem;
    font-weight: bold;
    text-decoration: none;
    line-height: 1;
    font-family: 'Roboto', sans-serif;
}

.contact-tel-time {
    font-size: 1.2rem;
    font-weight: bold;
    line-height: 1.5;
    color: #222;
}

.contact-bottom {
    background-color: #aecd00;
    padding: 60px 0;
}

.contact-bottom-header {
    margin-bottom: 40px;
    text-align: left;
}

.contact-bottom-title {
    color: #fff;
    font-size: 3.2rem;
    font-weight: bold;
    margin-bottom: 20px;
    line-height: 1.4;
    letter-spacing: 0.05em;
}

.contact-bottom-text {
    color: #fff;
    font-size: 1.5rem;
    line-height: 1.8;
    margin: 0;
    font-weight: 500;
}

.contact-bottom-btns {
    display: flex;
    justify-content: flex-start;
    gap: 30px; 
}

.contact-bottom-btns .cta-btn {
    display: block;
    width: 100%;
    max-width: 440px;
    transition: opacity 0.3s ease;
}

.contact-bottom-btns .cta-btn:hover {
    opacity: 0.8;
}

/*======================================
  既存フッターとの隙間調整（!important不使用）
======================================*/
/* LPコンテンツ（#lpContent）の直後にあるフッターの margin-top を 0 に上書きする */
#lpContent ~ footer,
#lpContent ~ #footer,
#lpContent ~ .footer,
#lpContent + div {
    margin-top: 0;
}

/* 念のため LPコンテナ自体の下マージンもゼロにしておく */
#lpContent {
    margin-bottom: 0;
}

/*////　 ipad 　////*/
@media all and (max-width: 768px) {
.pc,
.sp_only {
	display: none;
}

.sp {
	display: block;
}
    
.mv {
	display: flex;
	flex-direction: column;
	padding-top: 40px;
}

#lpContent .mv-inner {
	position: relative; 
	top: auto;
	left: auto;
	transform: none;
	height: auto;
	display: block;
	padding: 0 20px;
}

.mv-content {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.mv-emblems img {
	width: 120px;
}

/* SPの固定値から上限を広げ、可変で広がるようにする */
.mv-text img {
	width: 100%;
	max-width: 400px;
}

.mv-title img {
	width: 100%;
	max-width: 480px;
}

.mv-read img {
	width: 100%;
	max-width: 450px;
}

.mv-btn {
	width: 100%;
	max-width: 400px;
}

.mv-img {
	position: relative;
	width: 100%;
	margin-top: -40px; 
}

.mv-img img {
	min-height: 0; 
	width: 100%;
	/* タブレット用の比率（縦長になりすぎないように 4:3 程度に） */
	aspect-ratio: 4 / 3; 
	object-fit: cover;
	/* タブレット幅に合わせて人物が中央に来るよう微調整 */
	object-position: 75% bottom; 
}

/* 4つの特徴：4列から 2列×2段 に変更 */
    .strengths-list {
        flex-wrap: wrap;
    }
    .strengths-item {
        width: 50%;
        flex: none;
        padding: 30px 20px;
        border-right: none;
    }
    /* 2列レイアウト用の区切り線調整 */
    .strengths-item:nth-child(odd) {
        border-right: 1px solid #b7d100;
    }
    .strengths-item:nth-child(1),
    .strengths-item:nth-child(2) {
        border-bottom: 1px solid #b7d100;
    }

    /* CTAエリア */
    .cta-green-title {
        font-size: 2.8rem;
    }
    .cta-green-btns {
        gap: 20px;
    }
	
/*======================================
  お悩みセクション (.worries)
======================================*/
.worries-top {
        padding-top: 50px;
    }
    
.worries-inner {
        /* SP版では relative 指定を削除（記述があれば） */
        padding: 0 20px; 
    }

    .worries-content {
        width: 100%;
        padding-bottom: 20px;
    }

    .worries-title {
        font-size: 28px;
        text-align: center;
        margin-bottom: 30px;
        white-space: normal; /* SP版では nowrap を解除し、brタグで改行させる */
    }

    /* SP版カンプに合わせたリストの2カラム化 */
    .worries-list {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 15px 0;
        margin: 0 0 30px 0; /* PCで設定したインデント(10.5vw)をリセット */
    }

    .worries-list li {
        width: 48%; 
        font-size: 1.3rem;
        white-space: normal; /* 追加：SP版では改行を許可する */
    }

    /* 5番目・6番目の項目は女性画像と被らないように幅を制限 */
    .worries-list li:nth-child(5),
    .worries-list li:nth-child(6) {
        width: 55%; 
    }

	.worries-emphasis {
        font-size: 2.8rem;
        margin-bottom: 20px;
        position: relative;
        z-index: 2; /* 画像より前面に出す */
    }

    .worries-img {
        position: absolute;
        bottom: 0;
        right: 0; 
        /* 画像を大きくする（幅割合と最大幅を調整） */
        width: 60%; 
        max-width: 320px; /* 240pxから320pxに拡大 */
        height: auto; 
        z-index: 1; /* テキストの背面に配置 */
    }
    
    .worries-img img {
        height: auto; /* 追加：PC版のトリミング指定を解除 */
    }

    .worries-bottom {
        padding: 40px 0;
    }

    .worries-bottom-title {
        font-size: 2.4rem;
        line-height: 1.4;
        margin-bottom: 15px;
    }

    .worries-bottom-text {
        font-size: 1.4rem;
    }

    .worries-q {
        width: 160px;
        right: -5%;
        bottom: 10%;
    }

/*======================================
  選ばれる7つの理由セクション (.reasons)
======================================*/
.reasons {
	padding: 50px 0;
}

.reasons-title {
font-size: 2.6rem;
}

.reasons-title span {
font-size: 3.2rem;
}

.accordion-head {
padding: 20px;
}

.accordion-num {
font-size: 4rem;
width: 60px;
}

.accordion-heading {
font-size: 1.6rem;
}

.accordion-desc {
font-size: 1.2rem;
}

.accordion-title-wrap {
padding-right: 20px;
}

/* 展開エリアのスマホレイアウト */
.accordion-body {
	/* 背景画像を絶対配置にするため、親要素に高さを確保する仕組みを残す */
	padding: 0 20px 30px; 
}

.accordion-body-inner {
	padding-left: 0; /* 字下げを解除 */
	padding-top: 20px;
}

.accordion-text-area {
	width: 100%; /* 全幅に変更 */
	/* ボタン下の余白(30px)を確保するため、テキストエリアの下にマージンを追加 */
	margin-bottom: 30px; 
	position: relative;
	z-index: 2; /* テキストを画像より手前に */
}

.accordion-sub-title {
	font-size: 1.6rem;
}

/* ボタンの最大幅制限（少し大きめに調整） */
.accordion-btn {
	max-width: 320px;
	margin: 0 auto; /* SP時はボタンを中央寄せにするのが一般的ですが、左寄せが良い場合は外してください */
}

/* 背景画像はテキストの下に完全に回り込ませる（絶対配置） */
.accordion-bg,
.accordion-item:nth-child(2) .accordion-bg,
.accordion-item:nth-child(3) .accordion-bg,
.accordion-item:nth-child(6) .accordion-bg {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 100%; /* 横幅いっぱいに広げる */
	max-width: none; /* PC用の最大幅制限を解除 */
	margin: 0; /* PC/タブレット用に入れたmarginをリセット */
	z-index: 1; /* テキストの背面に配置 */
	opacity: 0.8; /* テキストが読みやすいように、必要に応じて透過させる（カンプの表現に合わせる） */
}

/* 07番（ボタン3つ）のイラストのみ、見えやすい位置まで上にずらす */
    .accordion-item:nth-child(7) .accordion-bg {
        bottom: 120px; /* ボタンの高さに合わせて数値を調整してください */
    }

/*======================================
  提案事例セクション (.cases)
======================================*/
.cases {
	padding: 50px 0;
}

.cases-header {
	padding: 0 20px; /* PCで設定した左余白を解除 */
	margin-bottom: 30px;
}

.cases-lead {
	padding: 0;
}

.cases-lead-title {
	font-size: 1.8rem;
}

.cases-lead p {
	font-size: 1.4rem;
}

.case-item {
	padding: 25px 20px;
}

.case-item::before {
        top: 25px;
        left: 20px;
        right: 20px;
    }

.case-head {
        margin-top: 15px;
        margin-bottom: 20px;
        display: flex;
        align-items: center;
    }

.case-num {
	font-size: 5rem;
	margin-right: 20px;
	margin-bottom: 0;
}

.case-num span {
	font-size: 1.6rem;
}

.case-title-wrap {
        padding-top: 0; /* 5px を 0 に変更（余白をリセット） */
}

.case-heading {
	font-size: 2.2rem;
}

.case-sub-title {
	font-size: 1.6rem;
}

.case-text {
	font-size: 1.4rem;
	margin-bottom: 20px;
}

.case-tags {
	flex-direction: column; /* ラベルとリストを縦積みにする */
	gap: 15px;
}

.case-tag-label {
	width: 100%;
	box-sizing: border-box;
}

.case-tag-list {
	min-height: auto;
}

.case-cross-media {
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
}

/*======================================
  数字でわかる、安心と信頼セクション (.trust)
======================================*/
.trust {
	padding: 50px 0;
}

.trust-header {
	padding: 0 20px;
	margin-bottom: 30px;
}

.trust-list {
	flex-direction: column;
	gap: 20px;
}

.trust-item {
	width: 100%;
	padding: 25px 20px;
}

.trust-img {
	margin-bottom: 15px;
}

.trust-text {
	font-size: 1.4rem;
}

/*======================================
  幅広い業種のチラシデザイン実績 (.works)
======================================*/
.works {
	padding: 50px 0;
}

.works-header {
	padding: 0 20px;
	margin-bottom: 30px;
}

.works-lead-title {
	font-size: 1.6rem;
}

.works-lead p {
	font-size: 1.3rem;
}

.works-container {
	gap: 20px;
}

.works-item {
	padding: 25px 20px;
}

.works-item::before {
        top: 25px;
        left: 20px;
        right: 20px;
}

.works-item-head {
	min-width: 0; /* SPでは幅指定を解除 */
	width: 100%; /* 全幅に広げるかはお好みで（カンプに合わせて調整） */
	padding: 0 15px;
}

.works-item-title {
	font-size: 2.1rem;
}

.works-item-text {
	font-size: 1.8rem;
	margin-bottom: 20px;
}

/* タブレットでは隙間を少し狭くしつつ、3列を維持 */
.works-img {
	gap: 10px; 
}

.works-img img {
	/* gap(10px * 2箇所 = 20px) を引いて3等分 */
	width: calc((100% - 20px) / 3); 
}

.works-img img:only-child {
	width: 100%;
}

/*======================================
  取引先会社セクション (.clients)
======================================*/
.clients {
	padding: 50px 0;
}

.clients-header {
	padding: 0 20px;
	margin-bottom: 30px;
}

.clients-lead-title {
	font-size: 2.7rem;
}

.clients-lead p {
	font-size: 1.8rem;
}

.clients-container {
	flex-direction: column; /* SP版は1列にする */
	gap: 30px;
}

.clients-item {
	width: 100%; /* 全幅に変更 */
}

.clients-item-head {
	padding: 0 15px;
	margin-top: 15px;
	margin-bottom: 20px;
}

.clients-item-title {
	font-size: 2.4rem;
}

.clients-body {
	padding: 0;
}

.clients-block-title {
	font-size: 1.6rem;
}

.clients-block-text {
	font-size: 1.3rem;
}

.clients-illust {
	width: 100%; /* SPでは全幅にする */
	margin-top: 10px; /* 上の教育ブロックとの余白 */
}

/*======================================
  サービス一覧セクション (.services)
======================================*/
.services {
	padding: 50px 0;
}

.services-header {
	padding: 0 20px;
	margin-bottom: 20px;
}

.services-lead-title {
	font-size: 1.6rem;
}

.services-lead p {
	font-size: 1.3rem;
}

.services-link-wrap {
	margin-bottom: 30px;
}

.services-link-main {
	font-size: 2rem;
}

.services-container {
	flex-direction: column;
	gap: 0; 
}

.services-item {
	width: 100%;
}

.services-item::before {
	top: 25px;
	left: 20px;
	right: 20px;
}

.services-item-head {
	margin: 45px 20px 15px; 
	padding: 0 15px;
}

.services-item-title {
	font-size: 2.2rem;
}

.services-body {
	padding: 0 20px 20px;
}

.services-text {
	font-size: 1.4rem;
	margin-bottom: 20px;
}

/*======================================
  よくあるご質問セクション (.faq)
======================================*/
#lpContent .faq {
	padding: 50px 0;
}

.faq-header {
	padding: 0 20px;
	margin-bottom: 30px;
}

.faq-lead-title {
	font-size: 1.6rem;
	line-height: 1.5;
}

.faq-container {
	padding: 10px 20px;
}

.faq-item {
	padding: 25px 0;
}

.faq-icon-q,
.faq-icon-a {
	width: 28px;
	height: 28px;
	font-size: 1.5rem;
	margin-right: 15px;
}

.faq-q-text {
	font-size: 1.5rem;
}

.faq-a-text {
	font-size: 1.3rem;
}

/*======================================
  ご対応可能メニューセクション (.menu)
======================================*/
.menu {
	padding: 50px 0;
}

.menu-header {
	padding: 0 20px;
	margin-bottom: 30px;
}

.menu-container {
	gap: 20px 15px;
}

.menu-item {
	width: calc((100% - 30px) / 3); /* 横の隙間(15px×2)を引いて3等分 */
}

/*======================================
  お気軽にご相談くださいセクション (.contact-area)
======================================*/
.contact-top {
	padding: 50px 0 0;
}

.contact-header {
	margin-bottom: 30px;
	padding: 0 20px; 
}

.contact-content {
	width: 100%;
	padding-bottom: 40px; 
	padding-left: 0; 
}

.contact-title {
	font-size: 2.8rem;
	text-align: left;
}

.contact-check-list {
	margin: 0 0 40px 0;
	width: 100%; 
}

.contact-check-list li {
	font-size: 1.4rem;
}

.contact-tel-box {
	display: inline-block;
}

.contact-tel-label {
	font-size: 1.6rem;
}

/* ▼▼ 電話番号と受付時間の調整 ▼▼ */
.contact-tel-number-wrap {
	display: flex;
	flex-direction: column; /* 縦積みに変更 */
	align-items: flex-start; /* 左揃え */
	gap: 5px; /* 隙間を少しあける */
}

.contact-tel-number {
	font-size: 4.2rem; /* サイズを少し小さく */
	white-space: nowrap; /* 改行を禁止する */
}

/* 受付時間の改行(<br>)を消して1行にする */
.contact-tel-time br {
	display: none;
}
/* ▲▲ ここまで ▲▲ */

.contact-illust { 
	width: 70%;
}


}

/*////　 sp 　////*/
@media all and (max-width: 430px) {
.pc_tab {
	display: none;
}

.sp_only {
	display: block;
}

.mv-emblems img {
	width: 120px; 
}

/* スマホ向けの縦長比率とトリミング位置 */
.mv-img img {
	aspect-ratio: 4 / 5; 
	object-position: 82% bottom; 
}

.strengths-item {
	width: 100%;
	padding: 25px 0;
	border-right: none !important; /* タブレットの指定を上書き解除 */
	border-bottom: 1px solid #b7d100;
}

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

.strengths-title {
	font-size: 1.6rem;
}

/* CTAエリア：ボタンを縦積みに変更 */
.cta-green-title {
	font-size: 2rem;
	line-height: 1.4;
}

.cta-green-btns {
	flex-direction: column;
	gap: 20px;
}

/*======================================
  幅広い業種のチラシデザイン実績 (.works)
======================================*/
.works-img {
	flex-direction: column;
	gap: 20px; 
}

.works-img img {
	width: 100%; /* スマホでは各画像が横幅いっぱいになる */
}

/*======================================
  ご対応可能メニューセクション (.menu)
======================================*/
.menu-container {
	gap: 15px 10px;
}

/* スマホは 2カラム */
.menu-item {
	width: calc((100% - 10px) / 2);
}

.menu-item-title {
	font-size: 1.3rem;
	padding: 8px 0;
}
/*======================================
  お気軽にご相談くださいセクション (.contact-area)
======================================*/
.contact-top {
	padding: 50px 0 0;
}

.contact-header {
	margin-bottom: 30px;
	padding: 0 20px; /* タブレット以下の見出し余白 */
}

.contact-content {
	width: 100%;
	padding-bottom: 40px; /* イラスト上に乗るように調整 */
	padding-left: 0; /* PC用の余白をリセット */
}

.contact-title {
	font-size: 2.8rem;
	text-align: center; /* SPは中央寄せ */
}

/* チェックリストは左揃えのまま、全体を中央に配置 */
.contact-check-list {
	margin: 0 auto 40px;
	width: 100%;
	max-width: 320px; /* SPで適度な幅を持たせて中央に配置 */
}

.contact-check-list li {
	font-size: 1.4rem;
	margin-bottom: 15px;
	align-items: flex-start; /* 複数行になった際に上揃えにする */
}

.contact-check-icon {
	margin-top: 2px; /* アイコンの位置微調整 */
}

/* 電話CTA部分を縦積みにする */
.contact-tel-box {
	display: flex;
	flex-direction: column;
	align-items: center; /* 全体を中央揃え */
	width: 100%;
	max-width: 360px; /* 電話番号が横に広がらないように制限 */
	margin: 0 auto;
}

.contact-tel-label {
	font-size: 1.8rem; /* カンプに合わせて少し大きく */
	width: 100%; /* 横幅いっぱいに広げる */
	box-sizing: border-box;
	padding: 12px 20px;
	margin-bottom: 10px;
}

.contact-tel-number-wrap {
	flex-direction: column; /* 縦積みに変更 */
	align-items: center;
	gap: 5px; /* 番号と受付時間の隙間 */
}

.contact-tel-number {
	font-size: 4rem; /* PCより少し小さく */
}

.contact-tel-time {
	text-align: center;
	/* SP版では改行（<br>）を無視して1行にする（もしHTML側でbrがある場合） */
	br { display: none; }
}

.contact-illust {
	position: relative; /* SP版では相対配置に変更して下に積む */
	right: auto;
	width: 90%; /* カンプに合わせて少し大きめに */
	margin: -40px auto 0;
}

.contact-bottom {
	padding: 50px 0 0 0;
}

.contact-bottom-header {
	margin-bottom: 30px;
	padding: 0 20px;
}

.contact-bottom-title {
	font-size: 2.2rem; /* 少し小さめに調整 */
}

.contact-bottom-text {
	font-size: 1.4rem;
}

.contact-bottom-btns {
	flex-direction: column;
	align-items: center;
	gap: 15px;
	padding-bottom: 40px; /* フッターとの隙間調整 */
}
}