@charset "utf-8";

/* ---------------------------------------------------------------------
   custom.css - site-specific additions for the F.D.SAN redesign
   (kept separate from the template's own css/style.css and css/theme.css
   so the original template files stay untouched)
--------------------------------------------------------------------- */

/* text-based logo (no logo image supplied by the client) */
.logo a {
	display: block;
	text-decoration: none;
	font-family: "游ゴシック", "Yu Gothic", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif, "Hiragino Mincho Pro", "ヒラギノ明朝 Pro W3", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;	/*元はtheme.cssのCSS変数(--accent-font, --base-font)を読み込んでいました*/
	font-weight: 700;
	font-size: 1.35rem;
	line-height: 1.3;
	color: #777;
	letter-spacing: 0.04em;
}
.logo a small {
	display: block;
	font-size: 0.6rem;
	font-weight: 400;
	letter-spacing: 0.1em;
	color: #907fb7;
	margin-top: 0.2em;
}
footer .logo a {
	font-size: 1.15rem;
	color: #fff;
}
footer .logo a small { color: #f6f4fb; }

/* small helper classes reused from the legacy site's copy */
.nedan {
	display: inline-block;
	font-weight: 700;
	color: #907fb7;
}
.bigred {
	color: #c0392b;
	font-weight: 700;
}
p.small, span.small { font-size: 0.85rem; }

/* company map / popup page */
.map-popup {
	max-width: 620px;
	margin: 2rem auto;
	padding: 0 1.5rem;
	font-family: "Hiragino Mincho Pro", "ヒラギノ明朝 Pro W3", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
	line-height: 1.8;
}
.map-popup h2 { margin-top: 0; }

/* home page hero (bg1-primary-parts) button spacing */
section.bg1-primary-parts .btn a { margin-top: 0.5rem; }

/* icon-based placeholder used in place of a photo when no suitable
   photograph exists (list1 cards / flex1 images).
   元はdisplay:flex;align-items:center;justify-content:centerで中央配置していましたが、
   display:table + table-cellで縦横中央配置を再現しています（アイコン1個のみを中央表示する為の構成）。 */
.icon-image {
	display: table;
	width: 100%;
	aspect-ratio: 4 / 3;	/*古いブラウザでは無視されますが、致命的な崩れにはならない為そのままにしています*/
	background: #f6f4fb;
	border-radius: 8px;
	text-align: center;
}
.icon-image i {
	display: table-cell;
	vertical-align: middle;
	font-size: 3rem;
	color: #907fb7;
}
.flex1 .icon-image { width: 50%; }
@media (max-width:700px) {
	.flex1 .icon-image { width: 100%; }
}

/* シンプルなSVGイラストを敷き詰めるバリエーション（.icon-image.illust）
   写真の代わりに紫系の線画イラストを表示する枠。既存の.icon-image（アイコンフォント中央配置用）とは
   表示方法が異なる為、illustクラスを付けた時だけdisplay:blockに切り替える。 */
.icon-image.illust {
	display: block;
	overflow: hidden;
}
.icon-image.illust svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* セクション間の余白調整（テンプレート標準の7vwは間延びして見えるため詰める） */
section {
	margin: 4vw 0;
}
.bg-parts {
	padding-top: 4vw;
	padding-bottom: 4vw;
}
.bg-parts + .bg-parts {
	margin-top: -4vw !important;
}
/* .access.bleedのマイナス余白（style.cssでは-7vw）も、section側の余白を4vwに詰めた分に合わせて調整 */
.access.bleed {
	margin: -4vw;
	margin-left: 0;
}
@media (max-width:700px) {
	.access.bleed { margin: 0; }
}

/* トップページ上部（ヒーロー）の背景写真。写真の上に紫を重ねて、白い文字を読みやすくする。
   1行目の単色は、古いブラウザ（CS6のデザインビュー等）向けの代わり表示。 */
#hero {
	background: #907fb7;
	background: linear-gradient(rgba(144,127,183,0.66), rgba(144,127,183,0.66)), url(../images/img5.jpg) center center / cover no-repeat;
}
#hero h2, #hero p {
	text-shadow: 0 1px 6px rgba(70,55,110,0.55);
}

/* 制作の流れ（ul.step）の見出し部分を、印刷・デザイン頁の項目見出し（list1 .list h4）と
   同じように目立たせる。元は<strong>で本文と同じ大きさだったのを、h4にして紫で強調。 */
ul.step h4 {
	margin: 0 0 0.4em;
	font-size: 1.1rem;
	color: #5c4b82;
}
ul.step p {
	margin: 0;
}

/* iPhone修理頁：割引案内をチケット（クーポン）風のバナーにする */
.discount-banner {
	position: relative;
	background: linear-gradient(135deg, #f2680f, #da4100);
	color: #fff;
	border-radius: 14px;
	padding: 1.6rem 1.8rem 1.4rem;
	margin: 1.8rem 0;
	text-align: center;
	box-shadow: 0 8px 20px rgba(218,65,0,0.3);
	overflow: hidden;
	font-family: "游ゴシック", "Yu Gothic", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
}
/* 左右の丸い切れ込み（チケットの雰囲気を出す） */
.discount-banner::before,
.discount-banner::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 26px;
	height: 26px;
	background: #fff;
	border-radius: 50%;
	transform: translateY(-50%);
}
.discount-banner::before { left: -13px; }
.discount-banner::after { right: -13px; }

/* 「初回限定」タグ */
.discount-banner-tag {
	display: inline-block;
	background: #fff;
	color: #da4100;
	font-size: 0.8rem;
	font-weight: 700;
	padding: 0.2em 0.9em;
	border-radius: 999px;
	margin-bottom: 0.8em;
	letter-spacing: 0.05em;
}

/* OFF金額の丸バッジ */
.discount-banner-badges {
	display: flex;
	justify-content: center;
	gap: 1.2rem;
	margin-bottom: 0.9em;
}
.discount-banner-badge {
	width: 84px;
	height: 84px;
	border-radius: 50%;
	background: #fff;
	color: #da4100;
	display: table;
}
.discount-banner-badge::before {
	content: "";
	display: table-row;
	height: 0;
}
.discount-banner-badge-num,
.discount-banner-badge-unit {
	display: block;
	line-height: 1.1;
}
.discount-banner-badge {
	position: relative;
}
.discount-banner-badge-num,
.discount-banner-badge-unit {
	position: absolute;
	left: 0;
	right: 0;
	text-align: center;
	font-family: "Meiryo", "Hiragino Kaku Gothic ProN", "游ゴシック", "Yu Gothic", sans-serif;
	font-weight: 700;
}
.discount-banner-badge-num {
	top: 18px;
	font-size: 1.5rem;
}
.discount-banner-badge-unit {
	top: 46px;
	font-size: 0.8rem;
}

.discount-banner-text {
	border-top: 1px dashed rgba(255,255,255,0.6);
	padding-top: 0.8em;
}
.discount-banner-text p {
	margin: 0.2em 0;
	font-size: 1rem;
}
.discount-banner-text strong {
	font-size: 1.15rem;
}
.discount-banner-tel {
	margin: 0.9em 0 0 !important;
}
.discount-banner-tel a {
	display: inline-block;
	background: #fff;
	color: #da4100;
	text-decoration: none;
	font-size: 1.3rem;
	font-weight: 700;
	font-family: "Meiryo", "Hiragino Kaku Gothic ProN", "游ゴシック", "Yu Gothic", sans-serif;
	padding: 0.4em 1.2em;
	border-radius: 999px;
}

/* 会社概要頁：Googleマップとフッターの間が詰まって見えるため、少し余白を足す */
#access {
	/* 子要素(.access.bleedのマイナス余白)が、このsection自身のmargin-bottomと
	   相殺してしまう（マージンの相殺）為、overflow:hiddenでブロックする */
	overflow: hidden;
	margin-bottom: 3rem;
}

/* お問い合わせ頁（ポップアップウィンドウ、680x700想定）専用のデザイン */
body.contact-popup {
	margin: 0;
	background: #f6f4fb;
}
.contact-popup-header {
	/* style.cssの共通header{height:80px;overflow:hidden}が効いて余白を追加しても
	   高さが変わって見えなかった為、このページ専用の帯は高さ固定を解除する */
	height: auto;
	overflow: visible;
	background: #907fb7;
	color: #fff;
	padding: 1.5rem 1.5rem 3.5rem;
	text-align: center;
}
.contact-popup-header .logo {
	/* style.cssの共通header .logo{float:left}が効いて中央寄せがずれる為、解除する */
	float: none;
	display: block;
	line-height: normal;
	margin: 0 0 0.4rem;
}
.contact-popup-header .logo img {
	max-height: 40px;
	width: auto;
	filter: brightness(0) invert(1);
}
.contact-popup-header p {
	margin: 0;
	font-size: 1.2rem;
	font-weight: 700;
	letter-spacing: 0.08em;
}
.contact-popup-main {
	padding: 1.6rem 1.5rem 2rem;
	max-width: 560px;
	margin: 0 auto;
}
.contact-popup-lead {
	font-size: 0.9rem;
	line-height: 1.8;
	margin: 0 0 1.5rem;
}
.contact-popup-main .contact-form-inner {
	background: #fff;
	border-radius: 16px;
	padding: 1.6rem;
	box-shadow: 0 4px 16px rgba(92,75,130,0.08);
}
.contact-popup-main .submit-button {
	background: linear-gradient(135deg, #907fb7 0%, #5c4b82 100%);
	box-shadow: 6px 6px 18px rgba(92,75,130,0.35), 3px 2px 5px rgba(92,75,130,0.22);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
	/* ポップアップ幅(680px)がstyle.cssの@media(max-width:767px)に該当し、
	   ボタンがwidth:100%で左右いっぱいに広がってしまう為、ポップアップ内では常に元のピル型に戻す */
	width: auto;
	min-width: 13em;
}
.contact-popup-main .submit-button:hover {
	transform: translateY(-1px);
	box-shadow: 8px 9px 22px rgba(92,75,130,0.38), 4px 3px 7px rgba(92,75,130,0.24);
}
.contact-popup-main .submit-button:active {
	transform: translateY(1px);
	box-shadow: 3px 3px 10px rgba(92,75,130,0.28), 2px 1px 3px rgba(92,75,130,0.2);
}
.contact-popup-reset {
	display: inline-block;
	margin-top: 0.9rem;
	font-size: 0.85rem;
	color: #907fb7;
}
.contact-popup-footer {
	background: #5c4b82;
	color: #fff;
	text-align: center;
	padding: 1.3rem 1.5rem;
	font-size: 0.8rem;
	line-height: 1.7;
}
.contact-popup-footer-name {
	font-weight: 700;
	margin: 0 0 0.4em;
	font-size: 0.95rem;
}
.contact-popup-footer small {
	display: block;
	margin-top: 0.8em;
	opacity: 0.8;
}

/* サイトマップ頁：番号バッジ付きのカードにして、ホバーで浮き上がるようにする */
.sitemap-card {
	position: relative;
	background: #fff;
	border: 1px solid #e6e0f2;
	border-top: 4px solid #907fb7;
	border-radius: 10px;
	padding: 1.6rem 1.3rem 1.3rem;
	box-shadow: 0 2px 8px rgba(92,75,130,0.06);
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.sitemap-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 10px 20px rgba(92,75,130,0.15);
	border-top-color: #5c4b82;
}
.sitemap-num {
	display: block;
	font-family: "游ゴシック", "Yu Gothic", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
	font-size: 1.6rem;
	font-weight: 700;
	color: #e6e0f2;
	line-height: 1;
	margin-bottom: 0.4rem;
}
.sitemap-card .text h4 {
	margin: 0 0 0.4em;
}
.sitemap-card .text h4 a {
	text-decoration: none;
	color: #5c4b82;
	font-weight: 700;
}
.sitemap-card .text h4 a:hover {
	text-decoration: underline;
}
.sitemap-card .text p {
	margin: 0;
	font-size: 0.88rem;
}

/* お知らせ（NEWS）に外枠をつける */
dl.news {
	border: 1px solid #d9d2ea;
	border-radius: 8px;
	padding: 1.5rem 2rem;
}

/* フッターの背景色（濃い紫。本文の紫より濃くして境界をはっきりさせる） */
footer {
	background: #5c4b82;
	color: #fff;
}
footer a { color: #fff; }
footer .sh,
footer p { color: #f0edf7; }

/* コピーライト行をフッター3列（会社名／メニュー／電話番号）とは別の、下の独立した1行にする。
   style.cssは元々footer自体をdisplay:tableにして3列組みしていたが、それだと同じ子要素である
   コピーライト行も列の一部に巻き込まれてしまう。その為、3列側は.footer-colsというラッパーに
   まとめてそちらをdisplay:tableにし、footer自体はブロック表示のまま（紫の背景はfooterに残る）にして、
   コピーライト行はfooterの直接の子として独立した1行にしている。 */
footer { display: block !important; }
footer .footer-cols {
	margin-bottom: 1.5rem;
}
footer .footer-cols > div {
	margin-bottom: 1.5rem;
}
footer .footer-cols > div > * + * {
	margin-top: 1rem;
}
@media (min-width: 700px) {
	footer .footer-cols {
		display: table;
		width: 100%;
		table-layout: auto;
	}
	footer .footer-cols > div {
		display: table-cell;
		vertical-align: top;
		width: 1%;
		white-space: nowrap;
		margin-bottom: 0;
		padding-right: 2rem;
	}
	footer .footer-cols > div.fill {
		width: auto;
		white-space: normal;
		text-align: center;
	}
	footer .footer-cols > div:last-of-type:not(.fill) {
		text-align: right;
		padding-right: 0;
	}
	/* 郵便番号・住所・電話番号（左の列）は左揃え。
	   style.cssの「footer > div:last-of-type:not(.fill){text-align:right}」が、
	   3列を囲む.footer-cols全体にも効いて右寄せになるため、ここで左揃えに戻す。 */
	footer > div.footer-cols:last-of-type:not(.fill) {
		text-align: left;
	}
	footer .footer-cols > div:first-of-type {
		text-align: left;
	}
}
footer small {
	display: block;
	text-align: center;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(255,255,255,0.25);
}
/* ロゴ画像が届いたら、上記のテキストロゴをimgタグに差し替えた上で下記のサイズ調整を使用 */
header .logo img { max-height: 58px; width: auto; }
footer .logo img { max-height: 60px; width: auto; }