/* ==========================================================================
サーキュライト商品ページ 専用カスタムCSS（完全独自タグ・干渉ゼロ修正版）
========================================================================== */

/* --------------------------------------------------------------------------
1. 汎用パーツ設定
-------------------------------------------------------------------------- */
.cl-bold { font-weight: bold; }
.cl-red { color: #e60012; }
.cl-text-note { color: #666; }
.cl-tar { text-align: right; }
.cl-mt5 { margin-top: 5px; }


/* --------------------------------------------------------------------------
2. 導入大見出し専用（1・2箇所目のキャッチコピー）
-------------------------------------------------------------------------- */
cl-catch-block {
display: inline-flex;
align-items: center;
justify-content: center;
flex-direction: row;
width: 100%;
text-align: center;
line-height: 1.6;
margin: 40px 0 30px 0;
}

cl-catch-text {
display: inline;
position: relative;
font-size: 24px;
font-weight: bold;
color: #333333;
word-break: break-all;
background: linear-gradient(transparent 65%, #cceeff 65%, #b3e5fc 90%);
padding: 4px 12px 8px;
}

cl-catch-text::before,
cl-catch-text::after {
content: "";
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 40px;
height: 2px;
}

cl-catch-text::before {
background: linear-gradient(to right, #00a0e9, transparent);
left: -55px;
}

cl-catch-text::after {
background: linear-gradient(to left, #00a0e9, transparent);
right: -55px;
}


/* --------------------------------------------------------------------------
3. 「どんないいことが？」見出し専用（カプセルグラデーション背景）
-------------------------------------------------------------------------- */
cl-benefit-lead-box {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
margin-top: 60px;
margin-bottom: 40px;
}

cl-benefit-lead-title {
font-size: 28px;
font-weight: bold;
color: #ffffff;
text-align: center;
display: inline-block;
background: linear-gradient(135deg, #0071bc 0%, #00a0e9 50%, #cceeff 100%);
padding: 15px 40px;
border-radius: 40px;
box-shadow: 0 4px 12px rgba(0, 113, 188, 0.2);
}


/* --------------------------------------------------------------------------
4. 「メリット1・2」見出し専用デザイン
-------------------------------------------------------------------------- */
cl-benefit-title-wrap {
display: block;
text-align: center;
margin-top: 50px;
margin-bottom: 30px;
}

cl-benefit-number {
display: block;
font-size: 17px;
font-weight: bold;
color: #0071bc;
letter-spacing: 0.1em;
margin-bottom: 6px;
}

cl-benefit-main-txt {
font-size: 24px;
font-weight: bold;
color: #333333;
position: relative;
padding-bottom: 14px;
display: inline-block;
}

cl-benefit-main-txt::after {
content: "";
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: 80px;
height: 3px;
background: linear-gradient(to right, #0071bc, #00a0e9);
border-radius: 2px;
}


/* --------------------------------------------------------------------------
5. 特長グリッド（4つの機能）専用見出し＆最後のカモメファン見出し（PC用）
-------------------------------------------------------------------------- */
cl-section-title-block {
display: block;
text-align: center;
margin-top: 70px;
margin-bottom: 40px;
}

cl-section-tit-underline {
font-size: 26px;
font-weight: bold;
color: #0071bc;
position: relative;
display: inline-block;
}

/* 💡崩れ防止のため、大見出しの左右の線も絶対配置（absolute）に修正して安定化 */
cl-section-tit-underline::before,
cl-section-tit-underline::after {
content: "";
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 40px;
height: 2px;
}
cl-section-tit-underline::before {
background: linear-gradient(to right, #00a0e9, transparent);
left: -55px;
}
cl-section-tit-underline::after {
background: linear-gradient(to left, #00a0e9, transparent);
right: -55px;
}


/* --------------------------------------------------------------------------
6. 左右割レイアウト ＆ 特長グリッド（ベース設定）
-------------------------------------------------------------------------- */
.cl-flex-container {
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
margin-bottom: 50px;
}
.cl-flex-text { flex: 1; line-height: 1.8; }
.cl-flex-img { flex: 1; max-width: 45%; }
.cl-flex-img img { width: 100%; height: auto; border-radius: 4px; }
.cl-flex-reverse { flex-direction: row-reverse; }

.cl-grid-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 40px;
list-style: none;
padding: 0;
margin: 50px 0;
}
.cl-grid-item {
background: #fafafa;
border: 1px solid #e5e5e5;
border-radius: 8px;
padding: 25px;
box-sizing: border-box;
}

/* 各ポイントのタイトル（PC用：左に青い縦線） */
cl-grid-item-tit {
display: block;
font-size: 18px;
font-weight: bold;
color: #0071bc;
margin-top: 0;
margin-bottom: 15px;
border-left: 4px solid #0071bc;
padding-left: 10px;
line-height: 1.4;
}
.cl-grid-item-img { margin-bottom: 15px; }
.cl-grid-item-img img { width: 100%; height: auto; border-radius: 4px; }
.cl-grid-item-txt { line-height: 1.6; }


/* --------------------------------------------------------------------------
8. カモメファン特設セクション（水色背景 ＆ プロペラ背景 2カラム）
-------------------------------------------------------------------------- */
cl-brand-section {
display: block;
width: 100%;
/* 爽やかな水色の背景を敷く */
background-color: #e0f4fc;
/* ここにプロペラの画像を背景として設定（薄い透過画像を推奨） */
padding: 60px 40px;
box-sizing: border-box;
margin-top: 70px;
margin-bottom: 50px;
border-radius: 8px; /* 角を少し丸くしてマイルドに */
}

/* 内側の2カラムコンテナ */
.cl-brand-inner {
display: flex;
align-items: center; /* 左右の要素の高さを中央で揃える */
justify-content: space-between;
gap: 5%;
max-width: 1100px;
margin: 0 auto;
}

/* 左側：テキストカラム（幅50%） */
.cl-brand-text-col {
flex: 0 0 50%;
text-align: left;
}

/* このセクション内の見出しは左寄せにし、 marginを調整 */
.cl-brand-text-col cl-section-title-block {
text-align: left;
margin-top: 0;
margin-bottom: 20px;
}
.cl-brand-text-col cl-section-tit-underline {
font-size: 24px;
line-height: 1.4;
display: block;
}
/* PC版ではこの見出しの左右の飾り線は不要なため非表示に */
.cl-brand-text-col cl-section-tit-underline::before,
.cl-brand-text-col cl-section-tit-underline::after {
display: none;
}

/* 説明文のスタイル */
.cl-brand-profile-txt {
font-size: 15px;
line-height: 1.8;
color: #333333;
margin: 0;
}

/* 右側：画像カラム（幅45%） */
.cl-brand-img-col {
flex: 0 0 45%;
}
.cl-brand-img-col img {
width: 100%;
height: auto;
border-radius: 4px;
box-shadow: 0 4px 15px rgba(0, 113, 188, 0.1); /* 画像に薄い影をつけて引き締める */
}

.cl-swing-section {
padding: 20px 0;
background: #ffffff;
}

.cl-swing-inner {
display: flex;
align-items: center;
gap: 60px;
max-width: 960px;
margin: 0 auto;
padding: 0 40px;
}

.cl-swing-main-img-col {
flex: 1;
position: relative;
z-index: 1;
}

.cl-swing-main-img-col img {
width: 100%;
height: auto;
}

.cl-swing-content-col {
flex: 1;
position: relative;
/* PC版：テキストの下にサブ画像を浮かすための余白 */
padding-bottom: 120px;
}

.cl-swing-title-txt {
font-size: 40px;
font-weight: 800;
line-height: 1.2;
color: #222222;
margin-bottom: 30px;
}

.cl-swing-body-txt {
font-size: 18px;
line-height: 1.8;
color: #555555;
max-width: 400px;
}

/* サブ画像：PC版は右下にレイヤー配置 */
.cl-swing-sub-img-block {
position: absolute;
right: 0;
bottom: 0;
width: 220px;
z-index: 2;
}

.cl-swing-sub-img-block img {
width: 100%;
display: block;
box-shadow: 0 20px 40px rgba(0,0,0,0.12);
transform: rotate(2deg);
}

/* --------------------------------------------------------------------------
11. シーリングモデル 調光・調色 セクション
-------------------------------------------------------------------------- */
.cl-light-section {
padding: 80px 40px;
background-color: #fcfaf7; /* 暖かみのあるライトベージュ */
margin: 60px 0;
border-radius: 8px;
}

.cl-light-inner {
display: flex;
gap: 40px;
max-width: 1000px;
margin: 0 auto;
}

.cl-light-box {
flex: 1;
background: #ffffff;
padding: 30px;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

cl-light-head {
display: block;
font-size: 20px;
font-weight: bold;
color: #d4a373; /* 落ち着いたゴールドベージュ */
margin-top: 20px;
margin-bottom: 15px;
padding-bottom: 10px;
text-align: center;
border-bottom: 2px solid #fcfaf7;
}

.cl-light-txt {
font-size: 15px;
line-height: 1.8;
color: #444444;
margin: 0;
}


/* --------------------------------------------------------------------------
9. 取り付け特設セクション（オーガニック・ベージュ背景 2カラム）
-------------------------------------------------------------------------- */
cl-install-section {
display: block;
width: 100%;
background-color: #f9f6f0; /* 温かみと軽さを感じる上質なベージュ */
padding: 60px 40px;
box-sizing: border-box;
margin-top: 60px;
margin-bottom: 60px;
border-radius: 8px;
}

.cl-install-inner {
display: flex;
align-items: center; /* 左右の画像とテキストの高さを中央で美しく揃える */
justify-content: space-between;
gap: 6%;
max-width: 1100px;
margin: 0 auto;
}

/* 左側：画像カラム（幅44%） */
.cl-install-img-col {
flex: 0 0 44%;
}
.cl-install-img-col img {
width: 100%;
height: auto;
border-radius: 6px;
box-shadow: 0 6px 18px rgba(160, 150, 140, 0.15); /* 柔らかい影で引き締め */
}

/* 右側：テキストカラム（幅50%） */
.cl-install-text-col {
flex: 0 0 50%;
text-align: left;
}

/* セクション内専用の見出しブロック */
cl-install-title-block {
display: block;
text-align: left;
margin-top: 0;
margin-bottom: 22px;
}

/* 見出しテキスト：上品なアースブラウンの細下線アクセント */
cl-install-title-txt {
font-size: 26px;
font-weight: bold;
color: #4a433c; /* 墨黒ではなく深みのあるブラウングレー */
position: relative;
padding-bottom: 12px;
display: inline-block;
}
cl-install-title-txt::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 60px;
height: 3px;
background-color: #c5b4a0; /* 上品なモカベージュのアクセントライン */
border-radius: 2px;
}

/* 本文スタイル */
.cl-install-body-txt {
font-size: 15px;
line-height: 1.8;
color: #444444;
margin: 0;
text-align: justify;
}
.cl-service-section {
  width: 100%;
  padding: 60px 20px;
  box-sizing: border-box;
  text-align: center;
}

.cl-service-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.cl-service-title {
  font-size: 28px;
  font-weight: bold;
  color: #4a433c;
  /* 下の余白を40pxから60pxに増やしました */
  margin-bottom: 60px; 
  padding: 20px 0;
  background-color: #f9f6f0;
  border-top: 2px solid #c5b4a0;
  border-bottom: 2px solid #c5b4a0;
  line-height: 1.5;
}

.cl-service-img {
  /* 画像ブロック自体に上の余白を追加してタイトルと離します */
  margin-top: 20px; 
}

.cl-service-img img {
  width: 100%;
  max-width: 1200px;
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: 8px;
}

/* スマホ用の微調整 */
@media screen and (max-width: 768px) {
  .cl-service-title {
    font-size: 20px;
    margin-bottom: 40px; /* スマホでも少し広めに調整 */
  }
}

/* セクション全体の余白設定 */
.cl-main-select-block {
  width: 100%;
  padding: 80px 20px;
  box-sizing: border-box;
  text-align: center;
}

/* 独自のタイトルクラス（h2のスタイルを完全に無視） */
.cl-custom-head-title {
  display: inline-block;
  margin: 0 auto;
  padding: 30px 70px;
  font-size: 36px;
  font-weight: 800;
  color: #fff !important; /* 万が一のバッティング対策として重要 */
  line-height: 1.4;
  
  /* グラデーション */
  background: linear-gradient(135deg, #0071bc 0%, #00a0e9 100%) !important;
  
  /* 角丸と影 */
  border-radius: 60px !important;
  box-shadow: 0 12px 30px rgba(0, 113, 188, 0.3) !important;
  
  /* 余白や配置の固定 */
  letter-spacing: 0.05em;
  border: none !important; /* 既存のボーダーがある場合の対策 */
}

/* スマホ用の調整 */
@media screen and (max-width: 768px) {
  .cl-main-select-block {
    padding: 50px 15px;
  }
  .cl-custom-head-title {
    font-size: 24px;
    padding: 20px 30px;
    border-radius: 40px !important;
  }
}

.cl-model-desc-block {
  width: 100%;
  margin: -30px auto 60px auto; /* タイトルと少し重なるように配置 */
  padding: 0 20px;
  box-sizing: border-box;
}

.cl-model-desc-txt {
  font-size: 18px;
  line-height: 1.8;
  color: #4a433c;
  text-align: left;
}

/* スマホ用の調整 */
@media screen and (max-width: 768px) {
  .cl-model-desc-txt {
    font-size: 15px;
    line-height: 1.7;
  }
}

/* ==========================================================================
7. スマートフォン表示の切り替え（768px以下）
========================================================================== */
@media screen and (max-width: 768px) {

/* 導入キャッチコピーのスマホ調整 */
cl-catch-text {
font-size: 18px;
padding: 4px 6px 6px;
line-height: 1.6;
}
cl-catch-text::before,
cl-catch-text::after {
width: 20px;
}
cl-catch-text::before { left: -28px; }
cl-catch-text::after { right: -28px; }

/* 「どんないいことが？」スマホサイズ調整 */
cl-benefit-lead-box {
margin-top: 40px;
margin-bottom: 25px;
padding: 0 15px;
box-sizing: border-box;
}
cl-benefit-lead-title {
font-size: 20px;
padding: 12px 20px;
border-radius: 8px;
width: 100%;
box-sizing: border-box;
}

/* 「メリット1・2」スマホサイズ調整 */
cl-benefit-title-wrap {
margin-top: 35px;
margin-bottom: 20px;
}
cl-benefit-number {
font-size: 12px;
}
cl-benefit-main-txt {
font-size: 20px;
padding-bottom: 10px;
}

/* 💡4つのポイント・カモメファン大見出し：スマホ表示で2行になっても文字自体を中央揃えにする */
cl-section-title-block {
margin-top: 50px;
margin-bottom: 25px;
padding: 0 15px;
box-sizing: border-box;
}
cl-section-tit-underline {
font-size: 20px;
display: inline-block;
text-align: center;
line-height: 1.4;
width: 100%;
box-sizing: border-box;
}
/* スマホ時は画面外へのはみ出しを防ぐため左右の飾り線を非表示にする */
cl-section-tit-underline::before,
cl-section-tit-underline::after {
display: none;
}

/* 💡枠内の各タイトル（①明るさもバッチリ！など）のスマホ中央揃え設定 */
cl-grid-item-tit {
text-align: center;
padding-left: 0;
border-left: none;
position: relative;
padding-bottom: 8px;
margin-bottom: 15px;
}
/* スマホ時のみタイトルの下に中央揃えの下線を表示 */
cl-grid-item-tit::after {
content: "";
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: 40px;
height: 3px;
background-color: #0071bc;
border-radius: 2px;
}

/* 左右割レイアウトを縦並びに変更 */
.cl-flex-container,
.cl-flex-container.cl-flex-reverse {
flex-direction: column;
gap: 20px;
margin-bottom: 35px;
}
.cl-flex-img {
max-width: 100%;
width: 100%;
}

/* 特長4分割リストを1列縦並びに変更 */
.cl-grid-list {
grid-template-columns: 1fr;
gap: 25px;
}
/* カモメファン特設セクション（スマホ用縦並び切り替え） */
cl-brand-section {
padding: 40px 20px;
margin-top: 50px;
margin-bottom: 35px;
background-size: 80%; /* スマホに合わせて背景プロペラのサイズを調整 */
}

.cl-brand-inner {
flex-direction: column; /* 縦並びに変更 */
gap: 30px;
}

.cl-brand-text-col {
flex: 0 0 100%;
width: 100%;
text-align: center; /* スマホ時はテキストを中央揃えに */
}

.cl-brand-text-col cl-section-title-block {
text-align: center;
margin-bottom: 15px;
padding: 0;
}

.cl-brand-text-col cl-section-tit-underline {
font-size: 20px;
text-align: center;
}

.cl-brand-profile-txt {
font-size: 14px;
line-height: 1.6;
text-align: justify; /* 文字の端を揃えて読みやすく */
}

.cl-brand-img-col {
flex: 0 0 100%;
width: 100%;
}

/* 首振り特設セクション（スマホ用斜め・縦並び切り替え） */
.cl-swing-section {
padding: 60px 20px; /* スマホ用に余白を縮小 */
}

.cl-swing-inner {
flex-direction: column; /* 縦並びに変更 */
gap: 40px;
}

.cl-swing-content-col {
padding-bottom: 0; /* 重なり配置を解除 */
}

.cl-swing-title-txt {
font-size: 28px; /* スマホで見やすいサイズに調整 */
margin-bottom: 20px;
}

.cl-swing-sub-img-block {
position: relative; /* 浮遊配置を解除して通常配置へ */
width: 100%;
margin-top: 30px;
text-align: center;
}

.cl-swing-sub-img-block img {
transform: rotate(0deg); /* スマホでは傾きをなくして整列 */
width: 180px;
margin: 0 auto;
}

.cl-light-inner {
flex-direction: column;
}

/* 取り付け特設セクション（スマホ用切り替え） */
cl-install-section {
padding: 40px 20px;
margin-top: 45px;
margin-bottom: 45px;
}

.cl-install-inner {
flex-direction: column; /* 縦並びに変更 */
gap: 25px;
}

.cl-install-img-col {
flex: 0 0 100%;
width: 100%;
}

.cl-install-text-col {
flex: 0 0 100%;
width: 100%;
text-align: center; /* スマホ時は中央揃え */
}

cl-install-title-block {
text-align: center;
margin-bottom: 18px;
}

cl-install-title-txt {
font-size: 21px;
padding-bottom: 10px;
}
/* スマホ時は下線を左寄せから「中央揃え」に自動調整 */
cl-install-title-txt::after {
left: 50%;
transform: translateX(-50%);
width: 50px;
}

.cl-install-body-txt {
font-size: 14px;
line-height: 1.6;
text-align: justify; /* テキストの端を綺麗に揃えて可読性を確保 */
}

}

.cl-service-steps {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 40px;
  padding: 0 20px;
}

.cl-step-item {
  flex: 1;
  text-align: center;
  background: #fff;
  padding: 20px;
  border: 1px solid #e0dcd5;
  border-radius: 8px;
}

.cl-step-num {
  display: block;
  font-size: 24px;
  font-weight: bold;
  color: #d4a373; /* ベージュゴールド */
  margin-bottom: 10px;
}

.cl-step-txt {
  font-size: 14px;
  line-height: 1.6;
  color: #4a433c;
}

/* スマホ用の調整：縦並びに切り替え */
@media screen and (max-width: 768px) {
  .cl-service-steps {
    flex-direction: column;
  }
  .cl-step-item {
    margin-bottom: 15px;
  }
}