/* ===================================
   RESET
=================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    font-family:"Noto Sans JP",sans-serif;

    color:#222;

    background:#fff;

    line-height:1.9;

    overflow-x:hidden;

    -webkit-font-smoothing:antialiased;

}

img{

    display:block;

    width:100%;

    height:auto;

}

a{

    text-decoration:none;

    transition:.4s;

}

.inner{

    width:min(1180px,90%);

    margin:auto;

}

section{

    position:relative;

}

.section-title{

    display:inline-block;

    font-size:13px;

    letter-spacing:.35em;

    color:#777;

    margin-bottom:25px;

}

.section-title:after{

    content:"";

    display:block;

    width:60px;

    height:2px;

    background:#0d4f91;

    margin-top:15px;

}



/* ===================================
   HERO
=================================== */

.hero{

    position:relative;

    height:100vh;

    min-height:720px;

    overflow:hidden;

    background:#071b37;

    padding:0;

}



/* ---------- image ---------- */

.hero-image{

    position:absolute;

    inset:0;

}

.hero-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center center;

    transform:scale(1.05);

}



/* ---------- overlay ---------- */

.hero-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(
        90deg,
        rgba(0,0,0,.05),
        rgba(0,0,0,.25),
        rgba(0,0,0,.60)
    );

}



/* ---------- text ---------- */

.hero-content{

    position:absolute;

    right:6%;

    top:50%;

    transform:translateY(-50%);

    width:430px;

    color:#fff;

    z-index:20;

}

.brand{

    display:block;

    color:#7eb6ff;

    letter-spacing:.45em;

    font-size:15px;

    margin-bottom:25px;

    font-weight:600;

}

.hero h1{

    font-size:72px;

    line-height:1.05;

    font-weight:300;

    letter-spacing:.03em;

    margin-bottom:40px;

}

.hero-date{

    border-top:1px solid rgba(255,255,255,.25);

    border-bottom:1px solid rgba(255,255,255,.25);

    padding:20px 0;

    margin-bottom:45px;

    font-size:18px;

    line-height:2;

}

.hero-date span{

    opacity:.5;

}

.hero-copy{

    border-left:3px solid #2f80ed;

    padding-left:25px;

}

.hero-copy small{

    display:block;

    color:#7eb6ff;

    margin-bottom:15px;

    letter-spacing:.18em;

}

.hero-copy strong{

    display:block;

    font-size:34px;

    line-height:1.7;

    font-weight:700;

}



/* ===================================
   SCROLL
=================================== */

.scroll{

    position:absolute;

    left:50%;

    bottom:35px;

    transform:translateX(-50%);

    z-index:30;

    color:#fff;

    font-size:11px;

    letter-spacing:.35em;

}

.scroll:after{

    content:"";

    display:block;

    width:1px;

    height:55px;

    background:#fff;

    margin:10px auto 0;

    animation:scrollline 2s infinite;

}

@keyframes scrollline{

0%{

    transform-origin:top;

    transform:scaleY(0);

}

50%{

    transform-origin:top;

    transform:scaleY(1);

}

51%{

    transform-origin:bottom;

}

100%{

    transform-origin:bottom;

    transform:scaleY(0);

}

}



/* ===================================
   ABOUT
=================================== */

.about{

    padding:130px 0;

}

.about-wrap{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:90px;

    align-items:center;

}

.about-text h2{

    font-size:46px;

    font-weight:300;

    line-height:1.4;

    margin-bottom:40px;

}

.about-text p{

    font-size:18px;

    color:#555;

}

.about-image{

    overflow:hidden;

    border-radius:10px;

}

.about-image img{

    transition:1.2s;

}

.about-image:hover img{

    transform:scale(1.05);

}
/* ===================================
   PRESENT
=================================== */

.present{

    padding:130px 0;

    background:#f5f7fa;

}

.present-box{

    background:#fff;

    max-width:900px;

    margin:auto;

    padding:80px 70px;

    border-radius:10px;

    box-shadow:0 25px 60px rgba(0,0,0,.08);

    text-align:center;

}

.present-box h2{

    font-size:42px;

    font-weight:300;

    margin-bottom:30px;

}

.present-box p{

    font-size:20px;

    color:#555;

    line-height:2;

}



/* ===================================
   INFORMATION
=================================== */

.info{

    padding:130px 0;

}

.info dl{

    border-top:1px solid #ddd;

}

.info dt{

    float:left;

    width:180px;

    padding:28px 0;

    font-weight:700;

    border-bottom:1px solid #ddd;

}

.info dd{

    margin-left:180px;

    padding:28px 0;

    border-bottom:1px solid #ddd;

}



/* ===================================
   COLLECTION
=================================== */

.collection{

    padding:140px 0;

    text-align:center;

    background:#fafafa;

}

.collection h2{

    font-size:48px;

    font-weight:300;

    margin-bottom:20px;

}

.collection p{

    color:#666;

    margin-bottom:50px;

}

.btn{

    display:inline-block;

    padding:18px 70px;

    background:#111;

    color:#fff;

    letter-spacing:.18em;

    border:1px solid #111;

}

.btn:hover{

    background:#0c4d8f;

    border-color:#0c4d8f;

    transform:translateY(-3px);

}



/* ===================================
   SHOP
=================================== */

.shop{

    padding:140px 0;

    background:#071b37;

    color:#fff;

    text-align:center;

}

.shop .section-title{

    color:#7fb7ff;

}

.shop h2{

    font-size:48px;

    font-weight:300;

    margin-bottom:25px;

}

.shop p{

    opacity:.8;

    margin-bottom:45px;

}

.btn2{

    display:inline-block;

    padding:18px 60px;

    border:1px solid rgba(255,255,255,.3);

    color:#fff;

    letter-spacing:.15em;

}

.btn2:hover{

    background:#fff;

    color:#111;

}



/* ===================================
   FOOTER
=================================== */

footer{

    background:#021121;

    color:#aaa;

    text-align:center;

    padding:35px 20px;

    font-size:13px;

}



/* ===================================
   Fade In
=================================== */

.fade{

    opacity:0;

    transform:translateY(40px);

    transition:1s;

}

.fade.show{

    opacity:1;

    transform:none;

}



/* ===================================
   Responsive
=================================== */

@media(max-width:991px){

.hero{

    min-height:auto;

    height:auto;

}

.hero-image{

    position:relative;

    height:50vh;

}

.hero-content{

    position:relative;

    top:auto;

    right:auto;

    transform:none;

    width:100%;

    padding:60px 30px 80px;

    background:#071b37;

}

.hero h1{

    font-size:46px;

}

.hero-copy strong{

    font-size:28px;

}

.about{

    padding:80px 0;

}

.about-wrap{

    grid-template-columns:1fr;

    gap:50px;

}

.about-text h2{

    font-size:34px;

}

.present{

    padding:80px 0;

}

.present-box{

    padding:45px 30px;

}

.present-box h2{

    font-size:34px;

}

.info{

    padding:80px 0;

}

.info dt{

    float:none;

    width:100%;

    padding-bottom:5px;

    border:none;

}

.info dd{

    margin:0;

    padding:0 0 25px;

}

.collection{

    padding:80px 0;

}

.collection h2{

    font-size:34px;

}

.shop{

    padding:80px 0;

}

.shop h2{

    font-size:34px;

}

.btn,
.btn2{

    width:100%;

    max-width:340px;

}

}