@charset "UTF-8";

/* ========================================
   共通フォント
======================================== */
@font-face{font-family:"myfont2";src:url("../font/NotoSansJP-Regular.ttf") format("truetype");font-display:swap}
@font-face{font-family:"myfont";src:url("../font/NotoSerifJP-Regular.ttf") format("truetype");font-display:swap}

/* ========================================
   共通変数
======================================== */
:root{--blue:#0755a4;--deep:#032c5a;--navy:#031f40;--sky:#e9f3fc;--red:#e3342f;--ink:#14263a;--white:#fff;--gray:#f4f6f8;--pad:clamp(22px,5vw,84px)}

/* ========================================
   共通リセット・基本設定
======================================== */
*,*::before,*::after{box-sizing:border-box}
html{width:100%;max-width:100%;scroll-behavior:smooth;overflow-x:hidden}
body{width:100%;max-width:100%;margin:0;color:var(--ink);font-family:"Helvetica Neue","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;line-height:1.8;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit}
.word_break{white-space:pre-line;overflow-wrap:anywhere;word-break:break-word}

/* ========================================
   共通フッター
======================================== */
.footer{position:relative;overflow:hidden;padding:clamp(80px,10vw,150px) var(--pad) 32px;background:var(--navy);color:#fff;border-top:1px solid #fff}
.footer-main{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,.55fr);align-items:start;gap:clamp(60px,8vw,130px)}
.footer-en,.footer-contact-en{margin:0;font:800 16px Arial,sans-serif;letter-spacing:.18em}
.footer-en{color:rgba(255,255,255,.45)}
.footer-contact-en{color:var(--red)}
.footer-brand h2{margin:14px 0 0;font-size:clamp(34px,4vw,60px);line-height:1.3;letter-spacing:.04em}
.footer-message{margin:30px 0 0;font-size:clamp(18px,1.7vw,24px);font-weight:700;line-height:1.8;letter-spacing:.05em}
.footer-contact{padding-top:4px}
.footer-contact-text{margin:18px 0 26px;font-size:16px;line-height:1.8}
.footer-contact-link{display:flex;align-items:center;justify-content:space-between;gap:25px;width:100%;padding:20px 0;border-top:1px solid rgba(255,255,255,.25);border-bottom:1px solid rgba(255,255,255,.25);color:#fff;font-size:16px;font-weight:800;letter-spacing:.08em;text-decoration:none}
.footer-contact-link b{display:grid;width:56px;height:56px;flex:0 0 56px;place-items:center;border-radius:50%;background:var(--red);color:#fff;font-size:18px;transition:transform .3s ease}
.footer-contact-link:hover b{transform:translateX(6px)}
.footer-shops{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;margin-top:clamp(70px,9vw,130px);background:rgba(255,255,255,.2)}
.footer-shop{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr) max-content;align-items:center;gap:clamp(20px,3vw,45px);min-width:0;padding:clamp(32px,4vw,55px);background:#063465}
.footer-shop-title small{color:#73b9ff;font:800 16px Arial,sans-serif;letter-spacing:.18em}
.footer-shop-title h3{margin:16px 0 0;font-size:clamp(28px,3vw,35px);line-height:1.25}
.footer-shop-address{margin:0;font-size:16px;line-height:1.8}
.footer-shop-tel{color:#fff;font:800 16px Arial,sans-serif;letter-spacing:.04em;text-decoration:none;white-space:nowrap}
.footer-shop-tel:hover{opacity:.65}
.footer-bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-top:55px}
.footer-copyright{color:rgba(255,255,255,.5);font:700 10px Arial,sans-serif;letter-spacing:.15em}
.footer-pagetop{display:flex;align-items:center;gap:15px;color:#fff;font:700 10px Arial,sans-serif;letter-spacing:.18em;text-decoration:none}
.footer-pagetop b{display:grid;width:48px;height:48px;place-items:center;border:1px solid rgba(255,255,255,.35);border-radius:50%;font-size:16px;transition:background .3s ease,color .3s ease}
.footer-pagetop:hover b{background:#fff;color:var(--navy)}
/* etc */
.word_break{word-break:break-all;white-space:pre-line}

@media(max-width:1200px){
	.footer-shop{grid-template-columns:1fr;gap:14px}
	.footer-shop-tel{margin-top:5px}
}

@media(max-width:980px){
	.footer-main{grid-template-columns:1fr;gap:55px}
	.footer-contact{max-width:560px}
	.footer-shops{grid-template-columns:1fr}
}

@media(max-width:640px){
	.footer{padding-top:80px;padding-bottom:24px}
	.footer-brand h2{font-size:34px}
	.footer-message{font-size:18px}
	.footer-contact-text,.footer-contact-link,.footer-shop-address,.footer-shop-tel{font-size:15px}
	.footer-contact-link b{width:50px;height:50px;flex-basis:50px}
	.footer-shops{margin-right:calc(var(--pad) * -1);margin-left:calc(var(--pad) * -1)}
	.footer-shop{padding:36px var(--pad)}
	.footer-shop-title h3{font-size:34px}
	.footer-bottom{align-items:center;margin-top:45px}
	.footer-pagetop>span{display:none}
}