@charset "utf-8";
/* CSS Document */

/* =========================================
   コンテンツボディ & サイドバー
========================================= */
.content-body { width: 100%; margin: 0px auto; padding: 0;}
.main-content { padding: clamp(1.563rem, 1.222rem + 1.7vw, 2.5rem) clamp(1.563rem, 1.222rem + 1.7vw, 2.5rem) 40px; background: #FFF url("../img/common/cont_back.webp?=202608040910") no-repeat bottom center/cover;}
.main-content-wrap { padding: 50px clamp(1.563rem, 0.994rem + 2.84vw, 3.125rem) clamp(1.563rem, 1.222rem + 1.7vw, 2.5rem); background-color: #fff; border-radius: clamp(0.813rem, 0.744rem + 0.34vw, 1rem); box-shadow: 0px 0px 4px 4px rgba(0, 0, 0, 0.06);}
.main-content-wrap2 { margin-top: clamp(1.563rem, 1.222rem + 1.7vw, 2.5rem); padding: clamp(1.563rem, 1.222rem + 1.7vw, 2.5rem) clamp(1.563rem, 0.994rem + 2.84vw, 3.125rem); background-color: #fff; border-radius: clamp(0.813rem, 0.744rem + 0.34vw, 1rem); box-shadow: 0px 0px 4px 4px rgba(0, 0, 0, 0.06);}
.main-content-wrap3 { margin-top: clamp(1.563rem, 1.222rem + 1.7vw, 2.5rem); padding: clamp(1.563rem, 1.222rem + 1.7vw, 2.5rem) clamp(1.563rem, 0.994rem + 2.84vw, 3.125rem) clamp(0.938rem, 0.869rem + 0.34vw, 1.125rem); background-color: #fff; border-radius: clamp(0.813rem, 0.744rem + 0.34vw, 1rem); box-shadow: 0px 0px 4px 4px rgba(0, 0, 0, 0.06);}

@media (min-width: 1100px) {
.content-body { display: flex; align-items: flex-start; gap: 10px;}
.main-content { flex: 1; min-width: 0; padding: 40px 50px;}
}

/* =========================================
   リンクカード（窓口ボタン）のデザイン
========================================= */
.link-card-container { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: clamp(1rem, 0.942rem + 0.31vw, 1.25rem); }
  
/* 1099px以下（タブレット・スマホ）は1列の中央寄せ */
@media (max-width: 1099px) {
.link-card-container { grid-template-columns: 1fr; width: 100%; margin-left: auto; margin-right: auto; }
}

.link-card { display: flex; justify-content: space-between; align-items: center; padding: clamp(0.938rem, 0.865rem + 0.38vw, 1.25rem) clamp(1.25rem, 1.106rem + 0.77vw, 1.875rem); background-color: var(--color-white); border: 1px solid var(--color-border); border-radius: 8px; text-decoration: none; color: var(--color-primary); font-size: clamp(1rem, 0.971rem + 0.15vw, 1.125rem); font-weight: bold; transition: all 0.3s ease; box-shadow: 0px 0px 4px 4px rgba(0, 0, 0, 0.06);}
.link-card i { color: var(--color-hover-blue); font-size: clamp(1rem, 0.971rem + 0.15vw, 1.125rem); transition: color 0.3s ease, transform 0.3s ease;}

/* ホバーアクション */
.link-card:hover { background-color: var(--color-hover-blue); color: var(--color-white); border-color: transparent; box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);}

/* アイコンが右へスッと動く */
.link-card:hover i { color: var(--color-white); transform: translateX(6px);}

/* 規約コンテンツ側 */
.content-body h2 { text-align: center; margin-bottom: 50px; line-height: 1.2; font-size: clamp(1.188rem, 1.13rem + 0.31vw, 1.438rem); color: var(--color-primary); font-weight: bold;}
.content-body h4 { font-size: clamp(0.875rem, 0.817rem + 0.31vw, 1.125rem); font-weight: normal; color: var(--color-text-light); text-align: justify; text-align: center; margin-bottom: clamp(2.813rem, 2.308rem + 2.69vw, 5rem);}

.cont-text-section { margin-top: clamp(1.875rem, 1.648rem + 1.14vw, 2.5rem); word-break:  break-all;}

/* グレーの線をベースの1本線とし、擬似要素を「上から完全に同じ位置に重ねる」仕様 */
.cont-text-section h3 { position: relative; font-size: clamp(1rem, 0.942rem + 0.31vw, 1.25rem); color: var(--color-accent3); border-bottom: 2px solid var(--color-border); padding-bottom: 8px; margin-bottom: 20px; font-weight: bold;}
  
/* グレーの線に完全に乗っかる、文字幅連動のオレンジ線 */
.cont-text-section h3::after { content: ''; position: absolute; left: 0; bottom: -2px; width: var(--title-underline-width, 0px); height: 2px; background-color: var(--color-accent3);}
  
/* 文字幅計測用のラッパー要素 */
.cont-text-section h3 span { display: inline-block;}

.cont-text-section p { font-size: clamp(0.875rem, 0.846rem + 0.15vw, 1rem); margin-bottom: 12px; color: var(--color-text-light); line-height: 1.6;}

.cont-text-section p strong { font-size: clamp(1rem, 0.942rem + 0.31vw, 1.25rem); color: var(--color-accent);}

.cont-text-section .caution { font-size: clamp(0.875rem, 0.846rem + 0.15vw, 1rem); margin-bottom: 12px; color: var(--color-caution);}

.cont-text-ol { list-style-type: decimal; padding-left: 20px;}
.cont-text-ol li { font-size: clamp(0.875rem, 0.846rem + 0.15vw, 1rem); color: var(--color-text-light); margin-bottom: 12px; text-align: justify;}
.cont-text-ul { list-style: none;}
.cont-text-ul li { font-size: clamp(0.875rem, 0.846rem + 0.15vw, 1rem); color: var(--color-text-light); margin-bottom: 8px; text-indent: -1.5em; padding-left: 1.5em;}


/* =========================================
   【追加】アラートセクション専用アコーディオン装飾
========================================= */
.contact-section4.alert-sec h3 { color: var(--color-caution); border-bottom-color: var(--color-border); cursor: pointer; display: flex; justify-content: space-between; align-items: center; transition: opacity 0.3s; }
.contact-section4.alert-sec h3:hover { opacity: 0.7; }
.contact-section4.alert-sec h3::after { background-color: var(--color-caution); }
.alert-toggle-icon { color: #000000; font-size: clamp(1.25rem, 1.135rem + 0.62vw, 1.75rem); }
.alert-content-wrapper { display: none; margin: 20px 0; }

/* 【修正】他社通信サービスアラート（テキストの高さにアイコンを可変追従） */
.alert-box { display: flex; align-items: stretch; background-color: #fffafb; border: 1px solid #ffeded; padding: 30px; border-radius: 8px; gap: 30px; }
.alert-icon { flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.alert-icon img { height: 70px; width: auto; object-fit: contain; }
.alert-text { flex: 1; display: flex; align-items: center; }
.alert-text p { color: var(--color-caution); font-size: clamp(0.875rem, 0.846rem + 0.15vw, 1rem); line-height: 1.6; margin: 0; text-align: justify; }
.alert-text a { text-decoration: underline; }

/* =========================================
   案内ページ専用コンテンツ要素
========================================= */
.contact-section { margin-top: clamp(1.875rem, 1.648rem + 1.14vw, 2.5rem); word-break:  break-all; }
.contact-section2 { padding: clamp(1.563rem, 1.418rem + 0.77vw, 2.188rem) clamp(1.25rem, 1.159rem + 0.45vw, 1.5rem); background-color: #f2f9ff; border-radius: 8px; }
.contact-section3 { padding: clamp(1.563rem, 1.418rem + 0.77vw, 2.188rem) clamp(1.25rem, 1.159rem + 0.45vw, 1.5rem); margin-top: -14px; background-color: #f2f9ff; border-radius: 8px; }
.text-center { text-align: center; }
.contact-section3 h2 { margin-bottom: 12px;}
.contact-top-desc { font-size: clamp(0.875rem, 0.846rem + 0.15vw, 1rem); color: var(--color-text-light); text-align: center; margin-bottom: 30px; }
.contact-section4 { word-break:  break-all; }
.contact-section5 { word-break:  break-all; }
.contact-top-desc1 { font-size: clamp(0.938rem, 0.865rem + 0.38vw, 1.25rem); font-weight: bold; color: var(--color-hover-blue); margin-bottom: 12px; text-align: center; }
.contact-top-desc2 { font-size: clamp(0.875rem, 0.846rem + 0.15vw, 1rem); color: var(--color-text-light); text-align: center; margin-bottom: clamp(1.25rem, 1.178rem + 0.38vw, 1.563rem);  line-height: 1.6; }
.contact-top-desc3 { font-size: clamp(0.875rem, 0.846rem + 0.15vw, 1rem); color: var(--color-caution); text-align: center; margin-bottom: clamp(1.25rem, 1.178rem + 0.38vw, 1.563rem); line-height: 1.6; }
.contact-top-desc4 { font-size: clamp(0.875rem, 0.846rem + 0.15vw, 1rem); color: var(--color-caution); text-align: center; margin-bottom: clamp(0.375rem, 0.317rem + 0.31vw, 0.625rem); line-height: 1.6; font-weight: bold; }
.contact-top-desc5 { margin: 0 auto clamp(1.25rem, 1.178rem + 0.38vw, 1.563rem); font-size: clamp(0.75rem, 0.721rem + 0.15vw, 0.875rem); color: var(--color-text-light); text-align: center; line-height: 1.6; }
.contact-top-icon { width: 90px; height: auto; margin: 0 auto 15px; display: block; }

/* 検索フォーム */
.search-box { display: flex; width: 100%; max-width: 900px; margin: 0 auto; box-shadow: 0px 0px 4px 4px rgba(0, 0, 0, 0.06); border-radius: 4px; overflow: hidden; border: 1px solid var(--color-border); background-color: var(--color-white); }
/* ↓ min-width: 0; を追加 */
.search-box input[type="text"] { flex: 1; min-width: 0; border: none; padding: 15px clamp(0.625rem, 0.481rem + 0.77vw, 1.25rem); font-size: clamp(0.875rem, 0.788rem + 0.46vw, 1.25rem); outline: none; }
.search-box input[type="text"]::placeholder { color: var(--color-text-light2); }
.search-box button { background-color: var(--color-accent3); color: var(--color-white); border: none; padding: 0 clamp(0.625rem, 0.192rem + 2.31vw, 2.5rem); font-size: clamp(0.875rem, 0.788rem + 0.46vw, 1.25rem); font-weight: bold; cursor: pointer; transition: background-color 0.3s; white-space: nowrap; }
.search-box button:hover { background-color: var(--color-hover-blue); }

/* IMEI検索フォーム */
.imei-search-box { display: flex; width: 100%; max-width: 730px; margin: 0 auto; box-shadow: 0px 0px 4px 4px rgba(0, 0, 0, 0.06); border-radius: 4px; overflow: hidden; border: 1px solid var(--color-border); background-color: var(--color-white); }
/* ↓ min-width: 0; を追加 */
.imei-search-box input[type="text"] { flex: 1; min-width: 0; border: none; padding: 15px clamp(0.625rem, 0.481rem + 0.77vw, 1.25rem); font-size: clamp(0.875rem, 0.788rem + 0.46vw, 1.25rem); outline: none; }
.imei-search-box input[type="text"]::placeholder { color: var(--color-text-light2); }
.imei-search-box button { background-color: var(--color-accent3); color: var(--color-white); border: none; padding: 0 clamp(0.625rem, 0.192rem + 2.31vw, 2.5rem); font-size: clamp(0.875rem, 0.788rem + 0.46vw, 1.25rem); font-weight: bold; cursor: pointer; transition: background-color 0.3s; white-space: nowrap; }
.imei-search-box button:hover { background-color: var(--color-hover-blue); }

/* 見出しのアンダーラインギミック */
.contact-section h3 { position: relative; font-size: clamp(1rem, 0.942rem + 0.31vw, 1.25rem); color: var(--color-accent3); border-bottom: 2px solid var(--color-border); padding-bottom: 8px; margin-bottom: 20px; font-weight: bold;}
.contact-section h3::after { content: ''; position: absolute; left: 0; bottom: -2px; width: var(--title-underline-width, 0px); height: 2px; background-color: var(--color-accent3);}
.contact-section h3 span { display: inline-block;}
.contact-section2 h3 { position: relative; font-size: clamp(1rem, 0.942rem + 0.31vw, 1.25rem); color: var(--color-accent3); border-bottom: 2px solid var(--color-border); padding-bottom: 8px; margin-bottom: 20px; font-weight: bold;}
.contact-section2 h3::after { content: ''; position: absolute; left: 0; bottom: -2px; width: var(--title-underline-width, 0px); height: 2px; background-color: var(--color-accent3);}
.contact-section2 h3 span { display: inline-block;}
.contact-section4 h3 { position: relative; font-size: clamp(1rem, 0.942rem + 0.31vw, 1.25rem); color: var(--color-accent3); border-bottom: 2px solid var(--color-border); padding-bottom: 8px; margin-bottom: 20px; font-weight: bold;}
.contact-section4 h3::after { content: ''; position: absolute; left: 0; bottom: -2px; width: var(--title-underline-width, 0px); height: 2px; background-color: var(--color-accent3);}
.contact-section4 h3 span { display: inline-block;}

/* FAQ リンクカード用コンテナ */
.faq-card-container { display: grid; gap: 20px; margin-top: clamp(1rem, 0.942rem + 0.31vw, 1.25rem); }
.link-card { display: flex; justify-content: space-between; align-items: center; padding: clamp(0.938rem, 0.865rem + 0.38vw, 1.25rem) clamp(1.25rem, 1.106rem + 0.77vw, 1.875rem); background-color: var(--color-white); border: 1px solid var(--color-border); border-radius: 8px; text-decoration: none; color: var(--color-primary); font-size: clamp(0.938rem, 0.892rem + 0.23vw, 1.063rem); font-weight: bold; transition: all 0.3s ease; box-shadow: 0px 0px 4px 4px rgba(0, 0, 0, 0.06);}
.link-card i { color: var(--color-hover-blue); font-size: clamp(0.938rem, 0.892rem + 0.23vw, 1.063rem); transition: color 0.3s ease, transform 0.3s ease;}
.link-card:hover { background-color: var(--color-hover-blue); color: var(--color-white); border-color: transparent; box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);}
.link-card:hover i { color: var(--color-white); transform: translateX(6px);}

/* メールフォーム同意制御 */
.form-desc { font-size: clamp(0.875rem, 0.846rem + 0.15vw, 1rem); color: var(--color-text-light); margin-bottom: 20px; }
.agreement-box { background-color: #E9F5FF; padding: clamp(1.563rem, 1.418rem + 0.77vw, 2.188rem) clamp(1.25rem, 1.159rem + 0.45vw, 1.5rem); border-radius: 8px; margin-bottom: 40px; }
.agreement-label { display: inline-flex; align-items: center; cursor: pointer; margin-bottom: 12px; }
.agreement-checkbox { width: 22px; height: 22px; margin-right: 12px; cursor: pointer; accent-color: var(--color-accent3); }
.agreement-text { font-size: clamp(0.938rem, 0.865rem + 0.38vw, 1.125rem); font-weight: bold; color: var(--color-primary); transition: color 0.3s; line-height: 1; }
.agreement-note { font-size: 0.875rem; color: var(--color-text-light); margin: 0; }
.agreement-link { color: var(--color-caution); text-decoration: underline; }
.agreement-link:hover { text-decoration: none; }
  
/* マウスオンおよびチェック時テキストカラー変更 */
.agreement-checkbox:checked + .agreement-text,
.agreement-label:hover .agreement-text { color: var(--color-accent3); }

.form-btn-wrap { text-align: center; }
.submit-btn { display: inline-block; width: 100%; max-width: 360px; padding: 20px; background-color: var(--color-accent3); color: var(--color-white); font-size: 1.125rem; font-weight: bold; border-radius: 40px; text-align: center; transition: all 0.3s; cursor: pointer; box-shadow: 0px 0px 8px 8px rgba(0, 0, 0, 0.08); }
.submit-btn:not(.disabled):hover { background-color: var(--color-hover-blue); transform: translateY(-2px); box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3); }
.submit-btn.disabled { background-color: #dddddd; color: #ffffff; cursor: not-allowed; pointer-events: none; box-shadow: none; }

/* =========================================
   レスポンシブ・メディアクエリ調整
========================================= */

@media (min-width: 1480px) {
.faq-card-container { grid-template-columns: repeat(3, 1fr); }
}
    
@media (max-width: 1479px) and (min-width: 1100px) {
.faq-card-container { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1099px) {
.content-body { width: 100%;}
.faq-card-container { grid-template-columns: 1fr; width: 100%; margin-left: auto; margin-right: auto; }
}

@media (max-width: 767px) {
.content-body { margin: 0 auto;}
.content-body h2 { margin-bottom: 35px;}
.content-body h4 { text-align: left;}
.contact-top-desc { text-align: left; }
.contact-top-desc2 { text-align: left; margin-left: auto; margin-right: auto; margin-bottom: 12px; }
.contact-top-desc3 { margin-left: auto; margin-right: auto; text-align: center; margin-bottom: 12px; }
.contact-top-desc4 { margin-left: auto; margin-right: auto; }
.contact-top-desc5 { text-align: left; }
.faq-card-container { gap: 10px; }
.link-card-container { gap: 10px; }
.contact-section3 h2 { margin-bottom: 12px;}

/* 【修正】他社通信アラート：スマホ表示時は縦並びに切り替え */
.alert-box { flex-direction: column; align-items: center; padding: 20px; gap: 15px; }
.alert-icon { width: 50px; height: auto; }
.alert-icon img { height: auto; width: 100%; }
}