@charset "UTF-8";
/* CSS Document */
@import "reset5.css";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500&display=swap');

body { color: #231815; margin: 0; padding: 0; font-family: UniversNextPro-Regular, Univers, "Helvetica Neue", Helvetica, Arial, "Noto Sans JP", sans-serif; font-size: 15px; letter-spacing: 0.088em; line-height: 0; font-weight: 400; -webkit-font-smoothing: antialiased; }
html { min-height: 100%; }

h2,h3,h4 { letter-spacing: 0.124em; line-height: 1.66em; font-weight: 500; font-feature-settings: "palt" 1 }
p { font-size: 15px; letter-spacing: 0.088em; line-height: 2em; font-weight: normal; font-feature-settings: "palt" 1 }

a:link { color: #231815; text-decoration: none }
a:visited { color: #231815; text-decoration: none }
a:hover { color: #231815; }
a:link { color: #231815 }

a.pj { display: block }
.txtl { /*opacity: 0*/ display: inline-block }

/*#wrapper { position: relative; width: 100%; z-index: 10; }*/
#wrapper {
  position: fixed;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  top: 0;
  left: 0;
  overflow: auto;
}

.fd { opacity: 0; transition: opacity 1.2s linear, transform 1.2s cubic-bezier(0.19, 1, 0.22, 1); }
.fd.active { opacity: 1; }
.sec, .std { position: relative; width: 100%; font-size: 12px; }
.handoff-sentinel{
        height: 1px;     /* 末尾に極小の当たり判定 */
    }
#mv { position: relative; width: 100%; height: 56.25vw; z-index: 101 }
#mv::before { position: absolute; left: 0; top: 0; display: block; width: 100%; height: 0; background: #231815; z-index: 0 }
#mv h1 { position: absolute; left: 3.6vw; top: 32.5%; width: 25%; z-index: 10 }
#mv .visual { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #231815; opacity: 0 }
.is-loaded.mv1 #mv .vis01 { opacity: 1 }
.is-loaded.mv2 #mv .vis02 { opacity: 1 }
#mv .visual.vis01 { background: url("../img/mav01.jpg") no-repeat; background-size: cover }
#mv .visual.vis02 { background: url("../img/mav02.jpg") no-repeat; background-size: cover }
#mv .f { position: absolute; left: 80.9vw; top: 75%; width: 15.5vw; height: 29vw; z-index: 10 }
#mv .f.is-fixed { position: fixed; left: 80.9vw; top: inherit; bottom: 0; }
#mv .f span:nth-child(1) { position: absolute; left: 0; top: 0; display: block; width: 0; height: 1px; background: #b5b5b6; transition: all 1s }
#mv .f span:nth-child(2) { position: absolute; left: 0; top: 0; display: block; width: 1px; height: 0; background: #b5b5b6; transition: all 1s; transition-delay: 0.1s }
#mv .f span:nth-child(3) { position: absolute; left: 0; top: 8.4%; display: block; width: 0; height: 1px; background: #b5b5b6; transition: all 1s; transition-delay: 0.2s }
.is-loaded #mv .f span:nth-child(1) { position: absolute; left: 0; top: 0; display: block; width: 100%; height: 1px; background: #b5b5b6 }
.is-loaded #mv .f span:nth-child(2) { position: absolute; left: 0; top: 0; display: block; width: 1px; height: 100%; background: #b5b5b6 }
.is-loaded #mv .f span:nth-child(3) { position: absolute; left: 0; top: 8.4%; display: block; width: 100%; height: 1px; background: #b5b5b6 }
.std { height: auto; }

#loader { position: fixed; left: 50%; top: 50%; margin: -16px 0 0 -16px; z-index: 1001 }
.loader svg {
	fill: none;
	stroke: #b5b5b6;
	stroke-width: 10;
	stroke-linecap: round;
	stroke-dasharray: 230 230;
	animation: loader 1.2s infinite cubic-bezier(.4,0,.3,1), loading 1.2s infinite linear;
	vertical-align: middle;
}
@keyframes loader {
	from { stroke-dashoffset: 230; }
	to { stroke-dashoffset: -230; }
}
@keyframes loading {
	from { transform: none; }
	to { transform: rotate(360deg); }
}
#main-contents { min-height: 100vh; }
#top #main-contents { min-height: auto; }
#contents { position: relative; opacity: 0 }
#contents .cvr { position: absolute; left: 0; top: 0; width: 100%; height: 100vh; background: #fff }
.contents-inner { padding: 10.8vw 0 }
#header { position: absolute; left: 0; top: 0; padding: 1.2vw 0; width: 100%; background: #fff; z-index: 100; }
#header.fixed { position: fixed; left: 0; top: 0; }
#header .header-inner { position: relative; padding: 0 3.6vw }
#header .logotype { line-height: 48px; font-size: 15px; font-weight: 500 }
.gnav { position: absolute; left: calc(25% + 7.2vw); top: 0 }
.gnav li { display: inline-block; position: relative }
.gnav li a { position: relative; display: block; padding: 0 1em; line-height: 48px; font-size: 14px; transition: all 0.2s }
.gnav li a i { position: relative; z-index: 1 }
.gnav li.current>a { color: #fff }
.gnav li a::after { content: ""; position: absolute; left: 0; top: 15px; width: 0; height: 18px; border-radius: 2px; background: #b5b5b6; transition: all 0.2s }
.gnav li.current a::after { transition: all 0.4s }
.is-loaded .gnav li.current>a::after { width: 100% }
.gnav li a:hover { color: #fff }
.gnav li a:hover::after { width: 100% }
#sp-menu { display: none }
#btn-menu { display: none }

@media screen and (max-width: 1080px) {
    #sp-menu { position: fixed; right: 0; top: 0; width: 100%; height: 100vh; background: rgba(255,255,255,0.95); overflow-y: scroll; -webkit-overflow-scrolling: touch; z-index: 9999; display: none }
    ::-webkit-full-page-media, :future, :root #sp-menu {
        height: 100dvh;
    }
    .gnav { display: none }
    #sp-menu .sp-menu-inner { padding: 0 4.4vw }
    #sp-menu .gnav { display: block; position: relative; left: inherit; top: inherit; margin-top: 48px }
    #header .logotype { display: block; right: auto; left: 136px; top: 16.5px }
    .gnav li { display: block; position: relative }
    .gnav li a { position: relative; display: block; padding: 0 2em; line-height: 48px; font-size: 14px; transition: all 0.2s }
    #btn-menu { display: block; position: absolute; right: 2.2vw; top: 0.55vw; width: 60px; height: 60px; cursor: pointer; z-index: 10000 }
    #btn-menu span { position: absolute; left: 50%; top: 50%; width: 24px; height: 1.5px; background: #7d8488; display: block; transition: all 0.2s }
    #btn-menu span.ln1 { left: 50%; top: 50%; margin: -5px 0 0 -12px; }
    #btn-menu span.ln2 { right: 50%; top: 50%; margin: 5px 0 0 -12px; }
    #btn-menu:hover span.ln1 { width: 30px; margin: -3px 0 0 -15px; }
    #btn-menu:hover span.ln2 { width: 30px; margin: 3px 0 0 -15px; }
    #btn-menu.active span.ln1 { transform: rotate(45deg); width: 24px; margin: 0 0 0 -15px; }
    #btn-menu.active span.ln2 { transform: rotate(-45deg); width: 24px; margin: 0 0 0 -15px; }
}

#footer { padding: 0 0 3.6vw; }
#footer p { text-align: center; font-size: 14px; margin-top: 3em }
#footer a:hover { color: #b5b5b6 }
.lang { text-align: center; margin-top: 5em }
.lang li { display: inline-block; position: relative; font-size: 0; }
.lang li::after { content: "|"; position: absolute; right: -1px; top: 50%; font-size: 16px; color: #b5b5b6 }
.lang li:last-child::after { display: none }
.lang li a { display: block; position: relative; font-size: 16px; line-height: 2em }
.lang li a.current { font-weight: bold; color: #000 }
.f-nav { display: none; padding: 0 4.4vw; margin-top: 4em; text-align: center }
.f-nav li { display: inline-block; margin: 0.5em 0 }
.f-nav li a { position: relative; display: block; padding: 0 2em; line-height: 2em }
.f-nav li a::after { content: "/"; position: absolute; right: -0.5em; top: 0; color: #b5b5b6 }
.f-nav li a:hover { color: #b5b5b6 }
@media screen and (max-width: 1080px) {
    .f-nav { display: block; }
}

.inner-block { position: relative; padding: 0; margin: 0 auto 0 calc(25% + 7.2vw); max-width: 880px; zoom:1; }
.inner-block.pt { padding-top: 8.8vw !important }
.inner-block::after { content:""; clear:both; display:block; height:0; }
.inner-block.work { position: relative; padding: 0; margin: 0 auto; padding-left: 7.2vw; padding-right: 7.2vw; max-width: 1080px; zoom:1; }
.inner-block .column { float: left; width: 50%; }
.inner-block h2 { font-size: 17px; margin-bottom: 3em }
.inner-block h3 { font-size: 16px; margin-bottom: 2em }
.inner-block p a:hover { text-decoration: underline; color: #b5b5b6 }
.portrait { padding-top: 4em }
p.cap { margin-top: 1.5em; font-size: 14px; }
p.sign { margin-top: 2em }
.info li { display: block; position: relative; padding: 1em 0 1em 8em; font-size: 15px; line-height: 1.5em }
.info li span { position: absolute; left: 0; top: 1em; line-height: 1.5em; color: #b5b5b6 }
.info li a:hover { text-decoration: underline; color: #b5b5b6 }
.info h2 .date { line-height: 1.5em; color: #b5b5b6; font-size: 14px } 
.info .pic { padding: 6em 0 }

#lay { position: fixed; width: 100%; height: 100vh; left: 0; bottom: 0; background: #000; z-index: 100 }

.pt-0 { padding-top: 0 !important }
.mb-1 { margin-bottom: 1em !important }
.mt-3 { margin-top: 3em !important }
.mt-6 { margin-top: 6em !important }
.lh-1 { line-height: 1em !important }
.pc-none { display: none !important }
.sp-none { display: block !important }


@media screen and (max-width: 780px) {
    body { font-size: 12px; letter-spacing: 0.088em; }
    h2,h3,h4 { letter-spacing: 0.124em; line-height: 1.66em; }
    p { font-size: 12px; letter-spacing: 0.088em; line-height: 1.9em; }
    
    .std{
        overflow: auto;
        -webkit-overflow-scrolling: touch; /* iOS慣性スクロール */
        /* 高さ指定はケースに応じて：
        1) セクション全体を自然高さにしたい → 高さ指定しない（setHeights:false前提）
        2) 画面内に収めて中身だけスクロール → height: 100vh; を付与 */
    }
    .handoff-sentinel{
        height: 1px;/* 末尾に極小の当たり判定 */
    }
    #wrapper { scroll-snap-type: y proximity; }
    #mv { position: relative; width: 100%; height: 100vw; }
    #mv h1 { position: absolute; left: 3.6vw; top: 60%; width: 66.66%; z-index: 10 }
    #mv .visual { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #231815; opacity: 0 }
    #mv .visual.vis01 { background: url("../img/mav01_sp.jpg") no-repeat; background-size: cover }
    #mv .visual.vis02 { background: url("../img/mav02_sp.jpg") no-repeat; background-size: cover }
    #mv .f { position: absolute; left: 80.9vw; top: 75%; width: 15.5vw; height: 40vw; z-index: 10 }
    .sec { scroll-snap-align: start; scroll-snap-stop: always; }
    .sec.movie h1 { position: absolute; right: 2vw; top: calc(50vh - 28.125vw - 40px); z-index: 10 }
    .sec.movie h1 img { width: 92vw; height: auto }
    .sec.movie p { position: absolute; left: 2vw; bottom: 2vw; font-size: 12px; font-weight: 300; color: #fff; z-index: 10 }
    .mov { position: relative; background: #000; width: 100%; height: 100vh; overflow: hidden; z-index: 0 }
    ::-webkit-full-page-media, :future, :root .mov {
        height: 100dvh;
    }
    .mov video { position: absolute; left: 0; top: calc(50vh - 28.125vw); opacity: 0 }
    .movies { background: #000; text-align: center; padding: 30.8vw 0 }
    .movies h1 { margin-bottom: 15.4vw }
    .movies p { font-size: 11px; font-weight: 300; color: #fff; padding: 0 2.2vw; margin-top: 1em; text-align: left }
    .movies .mb { margin-bottom: 30.8vw }
    
    #main-contents { min-height: calc(100vh - 4.4vw - 48px); padding-top: calc(4.4vw + 48px); }
    #contents { position: relative; opacity: 0 }
    #contents .cvr { position: absolute; left: 0; top: 0; width: 100%; height: 100vh; background: #fff }
    .contents-inner { padding: 6.6vw 0 16.5vw }
    #header { position: absolute; left: 0; top: 0; padding: 20px 0; background: #fff; z-index: 100; }
    #header.fixed { position: absolute; }
    #header .header-inner { position: relative; padding: 0 3.6vw }
    #header .logotype { line-height: 20px; font-size: 13px; font-weight: 500 }
    #sp-menu { position: fixed; right: 0; top: 0; width: 100%; height: 100vh; padding-top: 0; background: rgba(255,255,255,0.95); overflow-y: scroll; -webkit-overflow-scrolling: touch; z-index: 9999; display: none }
    ::-webkit-full-page-media, :future, :root #sp-menu {
        height: 100dvh;
    }
    #sp-menu .gnav { margin-top: 60px }
    #btn-menu { position: fixed; right: 0; top: 0; width: 60px; height: 60px; cursor: pointer; z-index: 10000 }
    #btn-menu:not(.active):hover span.ln1 { width: 24px; margin: -5px 0 0 -12px; }
    #btn-menu:not(.active):hover span.ln2 { width: 24px; margin: 5px 0 0 -12px; }
    
    #footer { padding: 0 0 4.4vw }
    #footer p { text-align: center; font-size: 12px; margin-top: 3em }
    #footer a:hover { color: #b5b5b6 }
    .lang { text-align: center; margin-top: 2em; }
    .lang li::after { font-size: 12px; }
    .lang li a { display: block; position: relative; font-size: 14px; }
    .f-nav { display: block; padding: 0; margin-top: 4em; text-align: center }
    .f-nav li { display: inline-block; margin: 0.33em 0 }
    .f-nav li a { position: relative; display: block; padding: 0 1.33em }
    .f-nav li a::after { content: "/"; position: absolute; right: -0.33em; top: 0; color: #b5b5b6 }
    .f-nav li a:hover { color: #b5b5b6 }
    
    #lay { position: fixed; width: 100%; height: 100vh; left: 0; bottom: -100vh; background: #000; display: none; z-index: 100 }
    #lower #lay { bottom: 0; display: block; }
    
    .inner-block { position: relative; padding: 0 4.4vw; margin: 0 auto; }
    .inner-block.pt { padding-top: 13.2vw }
    .inner-block::after { content:""; clear:both; display:block; height:0; }
    .inner-block .column { float: none; width: 100%; }
    .portrait img { width: 100%; height: auto }

	.pc-none { display: block !important }
	.sp-none { display: none !important }
    
}

@media screen and (max-width: 440px) {

}