/* DOG EYE 共通CSS：全公開ページの基本部分 */

:root{
--orange:#bd4d08;
--navy:#173743;
--cream:#fffaf4;
--line:#ead8c8}

*{
box-sizing:border-box}

html{
scroll-behavior:smooth}

body{
margin:0;
background:var(--cream);
color:#182b36;
font-family:"Hiragino Sans","Yu Gothic",Meiryo,sans-serif;
font-size:16px;
line-height:1.7}

a{
color:inherit;
text-decoration:none}

img{
max-width:100%;
display:block}

.header{
min-height:78px;
height:auto;
gap:12px 24px;
position:sticky;
top:0;
z-index:20;
background:#fffaf4fa;
border-bottom:1px solid var(--line);
display:flex;
align-items:center;
justify-content:space-between;
padding:12px max(28px,calc((100vw - 1180px)/2))}

.brand{
display:flex;
align-items:center;
gap:10px;
flex-shrink:0;
line-height:1}

.brand>span{
background:var(--orange);
color:#fff;
width:44px;
height:44px;
border-radius:50%;
display:grid;
place-items:center}

.brand b{
font:900 1.1rem Arial;
letter-spacing:.08em}

.brand small{
display:block;
font:700 .65rem "Yu Gothic";
letter-spacing:.08em;
margin-top:5px}

.header nav{
display:flex;
flex:1 1 0;
flex-wrap:wrap;
justify-content:flex-end;
align-items:center;
gap:6px 18px;
min-width:0;
overflow:visible;
font-size:.82rem;
font-weight:800}

.header nav a{
flex:0 0 auto;
width:max-content;
max-width:100%;
white-space:normal;
overflow-wrap:anywhere;
padding:4px 0}

.header nav a:hover{
color:var(--orange)}

#nav-toggle{
position:absolute;
width:1px;
height:1px;
padding:0;
margin:-1px;
overflow:hidden;
clip-path:inset(50%);
white-space:nowrap}

#nav-toggle:focus-visible + .hamburger{
outline:2px solid var(--orange);
outline-offset:4px}

@media(min-width:851px){#nav-toggle{display:none}}

.hamburger{
display:none}

.button{
color:#fff;
display:inline-block;
margin-top:22px;
background:var(--orange);
padding:13px 22px;
border-radius:99px;
font-weight:800}

.section{
max-width:1160px;
margin:auto;
padding:95px 25px}

.center{
text-align:center}

.center>h2{
font-size:clamp(2rem,4vw,3.2rem);
margin:8px 0 35px}

.orange{
color:var(--orange);
font-weight:900;
letter-spacing:.14em}

.page-lead{
background:var(--navy);
color:#fff;
min-height:330px;
text-align:center;
padding:85px 20px 60px}

.page-lead small{
color:#ffab6d;
font-weight:900;
letter-spacing:.18em}

.page-lead h1{
font-size:clamp(2.7rem,6vw,4.5rem);
margin:8px}

.page-lead b{
display:inline-block;
background:var(--orange);
border-radius:99px;
padding:4px 14px}

.empty{
background:#fff;
border:1px solid var(--line);
border-radius:20px;
padding:30px;
margin-bottom:18px}

.empty{
text-align:center}

footer{
background:#102b35;
color:#fff;
display:grid;
grid-template-columns:1fr 1fr;
gap:40px;
padding:65px max(25px,calc((100vw - 1120px)/2))}

footer p{
color:#bdd0d6}

.bottom{
display:none}

@media(max-width:850px){
.header nav{
display:none}

.hamburger{
display:block;
font-size:1.7rem}

#nav-toggle:checked~nav{
display:grid;
position:absolute;
top:100%;
left:10px;
right:10px;
max-height:calc(100vh - 98px);
justify-content:stretch;
overflow-y:auto;
white-space:normal;
background:#fff;
padding:15px;
border-radius:12px;
box-shadow:0 15px 35px #0002}

.section{
padding:65px 18px}

footer{
grid-template-columns:1fr;
padding:50px 22px}

.bottom{
position:fixed;
z-index:30;
bottom:0;
left:0;
right:0;
height:66px;
background:#fff;
display:grid;
grid-template-columns:repeat(5,1fr);
border-top:1px solid var(--line)}

.bottom a{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
font-weight:800}

.bottom small{
font-size:.62rem}
}


/* 15.08: grouped navigation. Native details supports click and keyboard without JS. */
.header .nav-dropdown{position:relative;flex:0 0 auto;max-width:100%}
.header .nav-dropdown summary{display:flex;align-items:center;gap:8px;padding:8px 0;cursor:pointer;list-style:none;overflow-wrap:anywhere}
.header .nav-dropdown summary::-webkit-details-marker{display:none}
.header .nav-dropdown summary span{font-size:.8em;flex:none}
.header .nav-dropdown[open]>summary span{transform:rotate(180deg)}
.header .nav-dropdown summary:hover{color:var(--orange)}
.header nav a:focus-visible,.header .nav-dropdown summary:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:4px}
.header .nav-submenu{position:absolute;top:100%;right:0;width:240px;max-width:calc(100vw - 40px);max-height:calc(100vh - 130px);overflow:auto;padding:10px;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 22px #0002;z-index:25}
.header .nav-submenu a{display:block;width:100%;padding:10px 12px;line-height:1.6;border-radius:6px}
.header .nav-submenu a:hover{background:var(--cream)}
@media(max-width:850px){
.header .nav-dropdown{width:100%;min-width:0}
.header .nav-dropdown summary{padding:10px 0;justify-content:space-between}
.header .nav-submenu{position:static;width:100%;max-width:none;max-height:none;overflow:visible;box-shadow:none;border:0;border-left:2px solid var(--line);border-radius:0;padding:0 0 0 10px;margin:0 0 8px}
.header nav>a{width:100%;padding:10px 0}
}

/* 15.10: official Dog Eye logo, natural aspect ratio */
.header .brand{width:240px;max-width:calc(100vw - 100px)}
.header .brand-logo{width:100%;height:auto;display:block}
.footer-brand{display:inline-block;width:250px;max-width:100%;padding:12px;background:#fffaf4;border-radius:10px}
.footer-brand img{display:block;width:100%;height:auto}
@media(max-width:850px){.header .brand{width:210px}}

/* 16.00: shared visible breadcrumb navigation */
.breadcrumbs{width:min(1180px,calc(100% - 40px));margin:20px auto 0;color:#52616a;font-size:.85rem;line-height:1.8}
.breadcrumbs ol{list-style:none;display:flex;flex-wrap:wrap;align-items:baseline;gap:5px 10px;padding:0;margin:0}
.breadcrumbs li{display:flex;align-items:baseline;gap:10px;min-width:0;max-width:100%}
.breadcrumbs a,.breadcrumbs [aria-current]{overflow-wrap:anywhere;min-width:0}
.breadcrumbs a{text-decoration:underline;text-underline-offset:3px;padding:6px 0;color:#8e3a08}
.breadcrumbs a:hover{color:#582301}
.breadcrumbs a:focus-visible{outline:2px solid #8e3a08;outline-offset:4px}
.breadcrumb-separator{flex:none;color:#68777e}
.breadcrumbs [aria-current]{color:#263b45}
@media(max-width:600px){.breadcrumbs{width:calc(100% - 32px);font-size:.8rem;margin-top:14px}}