@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.08em; 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.08em; line-height: 1.9em; 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;
}
.btit { position: fixed; width: 7.7vw; left: 6.6vw; top: calc(50% - 5.29vw); z-index: 100; opacity: 0; cursor: pointer }

.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;     /* 末尾に極小の当たり判定 */
    }
.mov { position: relative; background: #000; width: 100%; height: 100vh; overflow: hidden }
.mov video { position: absolute; left: 0; top: 0; opacity: 0 }
.mov_ { position: relative; background: #000; width: 100%; height: 100vh; overflow: hidden }
.mov_ video { position: absolute; left: 0; top: 0; opacity: 0 }
.mov__ { position: relative; background: #000; width: 100%; height: auto; overflow: hidden }
.mov__ video { position: relative; width: 100%; opacity: 0 }
.snd-btn { position: absolute; right: 36px; bottom: 36px; width: 36px; height: 36px; background: url("../img/sound_on.png") no-repeat; background-size: contain; transition: all 0.2s; cursor: pointer }
.snd-btn.muted { position: absolute; right: 36px; bottom: 36px; width: 36px; height: 36px; background: url("../img/sound_off.png") no-repeat; background-size: contain; transition: all 0.2s; cursor: pointer }
.snd-btn:hover { opacity: 0.5; transform: scale(1.12) }
.std { height: auto; }

#loader { position: fixed; left: 50%; top: 50%; margin: -12px 0 0 -12px; z-index: 1000 }
.loader svg {
	fill: none;
	stroke: #6c6c6c ;
	stroke-width: 8;
	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); }
}
#contents { position: relative; opacity: 0 }
#contents.active { margin-top: calc(50px + 13.2vw) }
#contents .cvr { position: absolute; left: 0; top: 0; width: 100%; height: 100vh; background: #fff }
.contents-inner { padding: 0 0 16.5vw }
#header { position: relative; padding: 6.6vw 8.8vw; z-index: 100; }
#header .header-inner { position: relative; }
.cont-nav { position: fixed; left: 0; top: -110px; width: calc(100% - 17.6vw); padding: 20px 8.8vw 30px; background: #fff }
.gnav { position: absolute; right: 0; bottom: 0 }
.cont-nav .gnav { position: absolute; right: 8.8vw; bottom: 30px }
.gnav li { display: inline-block; position: relative }
.gnav li a { position: relative; display: block; padding: 0 1.66em; line-height: 16px; 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: 0; width: 0; height: 100%; background: #000; transition: all 0.2s }
.gnav li.current>a::after { width: 100% }
.gnav li a:hover { color: #fff }
.gnav li a:hover::after { width: 100% }
.gnav li .subnav { position: absolute; left: 0.66em; top: 16px; width: 320px; background: rgba(255,255,255,0.9); display: none }
.gnav li .subnav li { display: block; margin: 1.33em 0 }
.gnav li .subnav li a { padding: 0 1em; letter-spacing: 0; }
#sp-menu { display: none }
#btn-menu { display: none }
@media screen and (max-width: 1500px) {
    .gnav li a { padding: 0 1em; }
}
@media screen and (max-width: 1350px) {
    #header { padding: 4.4vw 4.4vw; }
    .gnav li a { font-size: 13px; }
}
@media screen and (max-width: 1200px) {
    #header h1 img { height: 45px }
    .gnav li a { padding: 0 0.66em; }
}
@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 .gnav { display: block; position: relative; right: inherit; bottom: inherit; margin-top: calc(4.4vw + 60px) }
    .gnav li { display: block; position: relative; border-bottom: solid 1px #231815 }
    .gnav li a { position: relative; display: block; padding: 2.5em 1.66em; line-height: 16px; 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: 0; width: 0; height: 100%; background: #000; transition: all 0.2s }
    .gnav li.current>a::after { width: 100% }
    .gnav li a:hover { color: #fff }
    .gnav li a:hover::after { width: 100% }
    .gnav li .subnav { position: relative; left: inherit; top: inherit; width: 100%; background: none; display: none }
    .gnav li .subnav li { display: block; margin: 0; border-bottom: none }
    .gnav li .subnav li a { padding: 1.66em; letter-spacing: 0; }
    #btn-menu { display: block; position: absolute; right: 3.3vw; top: 3.3vw; width: 60px; height: 60px; cursor: pointer; z-index: 10000 }
    #btn-menu span { position: absolute; left: 50%; top: 50%; width: 24px; height: 1px; background: #837d7b; 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; }
}
.sec-top { padding: 11vw 8.8vw 0; opacity: 0; transform: translateY(3.3vw); transition: opacity 1.2s linear, transform 1.2s cubic-bezier(0.19, 1, 0.22, 1); /* easeOutExpo */ }
.sec-top .zm { transform: scale(1.2); transition: transform 1.2s linear; /* easeOutExpo */ }
.sec-top.active { opacity: 1; transform: translateY(0) }
.sec-top.active .zm { transform: scale(1); }
.sec-top:first-child { padding-top: 8.8vw }
.sec-top h2 { position: relative; font-size: 16px; margin: 0 0 6.6vw }
.sec-top h2 .sub { position: absolute; left: 50%; top: 0 }
.sec-top h2 span.b { font-family: UniversNextPro-Bold }
.sec-top .vis a { position: relative; display: block; overflow: hidden }
.sec-top .vis a img { transition: all 0.2s }
.sec-top .vis a::after { position: absolute; right: 40px; bottom: 40px; content: ""; display: block; width: 44px; height: 44px; background: url("../img/ico_play.png") no-repeat; background-size: contain; opacity: 0.33; transition: all 0.2s }
.sec-top .vis a:hover img { transform: scale(1.06); opacity: 0.9 }
.sec-top .vis a:hover::after { transform: scale(1.12); opacity: 1 }
.sec-top p.cap { font-size: 14px; margin: 3em 0 0 6.6vw }
.sec-top p.cap .ja { font-size: 13px; margin-top: 0.66em }
#footer p { text-align: center; font-size: 14px; }
#footer p a:hover { color: #c7c7c7 }
.f-nav { padding: 0 4.4vw; margin-bottom: 4em; text-align: center }
.f-nav li { display: inline-block }
.f-nav li a { position: relative; display: block; padding: 0 2em }
.f-nav li a::after { content: "/"; position: absolute; right: -0.5em; top: 50%; color: #c7c7c7 }
.f-nav li a:hover { color: #c7c7c7 }

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

.big-title { padding: 8.8vw 8.8vw 2.2vw; }
.big-title h2 { font-size: 14px }
.big-title-serif { padding: 8.8vw 8.8vw 0; }
.big-title-serif h2 { font-size: 24px; text-align: center; font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif" }
.conts { padding: 0 8.8vw; zoom:1; }
.conts:after { content:""; clear:both; display:block; height:0; }
.conts .inner-block { float: left; width: 50% }
.conts .inner-block:nth-child(2) { width: calc(50% - 4.4vw); padding-left: 4.4vw }
.conts .inner-block h2 { margin-left: 8.8vw; }
.conts .inner-block h2.ml { margin-left: 4.4vw }
.conts .inner-block h2 img { height: 50px; opacity: 0.5 }
.conts .inner-block h2 img.l2 { height: 125px }
.conts .inner-block h2 img.l2m { height: 100px }
@media screen and (max-width: 1180px) {
    .conts .inner-block h2 { margin-left: 0 !important }
}
@media screen and (max-width: 1080px) {
    .conts .inner-block h2 img { height: 40px; }
    .conts .inner-block h2 img.l2 { height: 100px }
    .conts .inner-block h2 img.l2m { height: 80px }
}
@media screen and (max-width: 1080px) {
    .conts .inner-block h2 img { height: 36px; }
    .conts .inner-block h2 img.l2 { height: 90px }
    .conts .inner-block h2 img.l2m { height: 72px }
}
.conts .inner-block h3 { font-size: 17px; margin-bottom: 2em }
.conts .inner-block h3 .sdr { font-size: 14px }
.conts .inner-block p.fs-s { font-size: 13px }
.conts .inner-block p.sign { margin-top: 2em }
.profile-block { margin-top: 4.4vw }
.profile-block h4 { font-size: 16px; line-height: 16px; margin-bottom: 2em }
.profile-block h4 a { display: inline-block }
.profile-block h4 a::after { content: ""; display: inline-block; width: 16px; height: 16px; background: url("../img/ico_plus.png") no-repeat; background-size: contain; margin-left: 12px; opacity: 0.5; transition: all 0.2s }
.profile-block h4 a.active::after { content: ""; display: inline-block; width: 16px; height: 16px; background: url("../img/ico_close.png") no-repeat; background-size: contain; margin-left: 12px; opacity: 0.5; transition: all 0.2s }
.profile-block h4 a:hover::after { opacity: 1 }
.profile-block p { font-size: 13px; display: none }
.about, .concept, .profile { padding-top: 13.2vw }
.conts.profile .inner-block p { margin-bottom: 3em; }
.conts.profile .inner-block p:last-child { margin-bottom: 0 }
.conts.profile.two-columns { padding: 8.8vw 8.8vw 0; }
.conts.profile.two-columns .inner-block:nth-child(1) p { margin-left: 8.8vw }
.conts.profile.two-columns .inner-block:nth-child(2) { padding-top: 11em; }
.conts.profile.three-columns { padding: 8.8vw 8.8vw 0; }
.conts.profile.three-columns .inner-block { width: 33.33% }
.portrait { width: 50%; margin: 13.2vw auto 0 }
.hi-links { display: block; line-height: 2em; margin-top: 2em }
.hi-links li { display: block; margin: 0.5em 0 }
.hi-links li a:hover { text-decoration: underline }
.shinki-nav { padding-top: 16.5vw }
.shinki-nav ul::after { content:""; clear:both; display:block; height:0; }
.shinki-nav li { position: relative; float: left; width: 16.66%; }
.shinki-nav li a { display: block; overflow: hidden }
.shinki-nav li a img { transition: all 0.2s }
.shinki-nav li.current a img { opacity: 0.75 }
.shinki-nav li a:hover img { transform: scale(1.12); opacity: 0.75 }
.shinki-nav li::after { position: absolute; left: 0; top: -10px; content: ""; width: 0; height: 1px; background: #111114; transition: all 0.2s }
.shinki-nav li.current::after { width: 100%; }

.overlay { position: fixed; left: 0; top: 0; inset: 0; background: black; display: none; z-index: 99; }
.overlay video { width: 100%; height: 100%; object-fit: contain; }

.pt-0 { padding-top: 0 !important }
.mt-3 { margin-top: 3em !important }
.pc-none { display: none !important }
.sp-none { display: block !important }


@media screen and (max-width: 780px) {
    body { font-size: 12px; letter-spacing: 0.08em; }
    h2,h3,h4 { letter-spacing: 0.124em; line-height: 1.66em; }
    p { font-size: 12px; letter-spacing: 0.08em; line-height: 1.9em; }
    
    .btit { position: fixed; width: 27.5vw; left: 8vw; top: 8vw; z-index: 100; opacity: 0; cursor: pointer }
    
    .mov { position: relative; background: #000; width: 100%; height: 100vh; overflow: hidden }
    .mov video { position: absolute; left: -38.5%; top: 38.2vh; opacity: 0 }
    .mov_ { position: relative; background: #000; width: 100%; height: 100vh; overflow: hidden }
    .mov_ video { position: absolute; left: -38.5%; top: 38.2vh; opacity: 0 }
    .mov__ { position: relative; background: #000; width: 100%; height: auto; overflow: hidden }
    .mov__ video { position: relative; width: 100%; opacity: 0 }
    .snd-btn { position: absolute; right: 4vw; bottom: 4vw; width: 30px; height: 30px; background: url("../img/sound_on.png") no-repeat; background-size: contain; transition: all 0.2s; cursor: pointer }
    .snd-btn.muted { position: absolute; right: 4vw; bottom: 4vw; width: 30px; height: 30px; background: url("../img/sound_off.png") no-repeat; background-size: contain; transition: all 0.2s; cursor: pointer }
    ::-webkit-full-page-media, :future, :root .mov {
        height: 100dvh;
    }
    ::-webkit-full-page-media, :future, :root .mov video {
        top: 38.2dvh;
    }
    ::-webkit-full-page-media, :future, :root .mov_ {
        height: 100dvh;
    }
    ::-webkit-full-page-media, :future, :root .mov_ video {
        top: 38.2dvh;
    }
    
    .std{
        overflow: auto;
        -webkit-overflow-scrolling: touch; /* iOS慣性スクロール */
        /* 高さ指定はケースに応じて：
        1) セクション全体を自然高さにしたい → 高さ指定しない（setHeights:false前提）
        2) 画面内に収めて中身だけスクロール → height: 100vh; を付与 */
    }
    .handoff-sentinel{
        height: 1px;     /* 末尾に極小の当たり判定 */
    }
    
    #contents.active { margin-top: calc(32px + 12vw) }
    .contents-inner { padding: 0 0 36vw }
    #header { position: relative; padding: 6vw; }
    #header h1 img { height: 35px }
    #lower #header h1 img { height: 32px }
    .cont-nav { display: none }
    /*#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 .gnav { display: block; position: relative; right: inherit; bottom: inherit }
    .gnav li { display: block; position: relative; border-bottom: solid 1px #231815 }
    .gnav li a { position: relative; display: block; padding: 2.5em 1.66em; line-height: 16px; 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: 0; width: 0; height: 100%; background: #000; transition: all 0.2s }
    .gnav li.current>a::after { width: 100% }
    .gnav li a:hover { color: #fff }
    .gnav li a:hover::after { width: 100% }
    .gnav li .subnav { position: relative; left: inherit; top: inherit; width: 100%; background: none; display: none }
    .gnav li .subnav li { display: block; margin: 0; border-bottom: none }
    .gnav li .subnav li a { padding: 1.66em; letter-spacing: 0; }
    #btn-menu { position: fixed; right: 0; top: 0; width: 60px; height: 60px; cursor: pointer; z-index: 10000 }
    #btn-menu span { position: absolute; left: 50%; top: 50%; width: 24px; height: 1px; background: #837d7b; 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; }*/
    #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: 0 }
    #btn-menu { position: fixed; right: 0; top: 0; width: 60px; height: 60px; cursor: pointer; z-index: 10000 }
    .sec-top { padding: 12vw 0 0; }
    .sec-top h2 { margin: 0 6vw 6vw }
    .sec-top h2 img { height: 30px }
    .sec-top h2 .sub { position: absolute; left: 50%; top: 0 }
    .sec-top .vis a { position: relative; display: block; overflow: hidden }
    .sec-top .vis a img { transition: all 0.2s }
    .sec-top .vis a::after { position: absolute; right: 4vw; bottom: 4vw; content: ""; display: block; width: 24px; height: 24px; background: url("../img/ico_play.png") no-repeat; background-size: contain; opacity: 0.33; transition: all 0.2s }
    .sec-top p.cap { font-size: 13px; margin: 1.5em 0 0 6vw }
    .sec-top p.cap .ja { font-size: 12px; margin-top: 0.66em }
    #footer p { font-size: 12px; }
	.f-nav { padding: 0 1em; margin-bottom: 2em; text-align: left }
	.f-nav li { display: inline-block }
	.f-nav li a { position: relative; display: inline-block; padding: 1em; font-size: 11px }
	.f-nav li a::after { content: "/"; position: absolute; right: -0.5em; top: 50%; color: #c7c7c7 }
    
    .big-title { padding: 8vw 6vw 4vw; }
    .big-title h2 { font-size: 14px }
    .big-title-serif { padding: 8vw 6vw 4vw; }
    .big-title-serif h2 { font-size: 16px; text-align: center; }
    .conts { padding: 0 0 0 6vw; zoom:1; }
    .conts:after { content:""; clear:both; display:block; height:0; }
    .conts .inner-block { float: none; width: 100% }
    .conts .inner-block:nth-child(2), .conts .inner-block:last-child { width: 100%; padding: 8vw 0 0 }
    .conts .inner-block h2 { margin-left: 0 }
    .conts .inner-block h2.ml { margin-left: 0 }
    .conts .inner-block h2 img { height: 30px; opacity: 0.5 }
    .conts .inner-block h2 img.l2 { height: 75px }
    .conts .inner-block h2 img.l2m { height: 60px }
    .conts .inner-block h3 { font-size: 15px; margin-bottom: 1.5em }
    .conts .inner-block h3 .sdr { font-size: 12px }
    .conts .inner-block p.fs-s { font-size: 11px }
    .profile-block { margin-top: 6vw }
    .profile-block h4 { font-size: 14px; line-height: 16px; margin-bottom: 2em }
    .profile-block h4 a { display: inline-block }
    .profile-block h4 a::after { content: ""; display: inline-block; width: 16px; height: 16px; background: url("../img/ico_plus.png") no-repeat; background-size: contain; margin-left: 12px; opacity: 0.5; transition: all 0.2s }
    .profile-block h4 a.active::after { content: ""; display: inline-block; width: 16px; height: 16px; background: url("../img/ico_close.png") no-repeat bottom; background-size: contain; margin-left: 12px; opacity: 0.5; transition: all 0.2s }
    .profile-block h4 a:hover::after { opacity: 1 }
    .profile-block p { font-size: 12px; display: none }
    .profile-block p br { display: none }
    .about, .concept, .profile { padding-top: 16vw }
	.conts.profile { padding: 0 6vw }
    .conts.profile .inner-block p { margin-bottom: 2em; }
    .conts.profile .inner-block p:last-child { margin-bottom: 0 }
	/*.conts.profile .inner-block p .txtl { display: inline !important }
	.conts.profile .inner-block p br { display: none !important }*/
    .conts.profile.two-columns { padding: 2em 0 0 6vw; }
    .conts.profile.two-columns .inner-block:nth-child(1) p { margin-left: 0 }
    .conts.profile.two-columns .inner-block:nth-child(2) { padding-top: 2em; }
    .conts.profile.three-columns { padding: 8vw 0 0; }
    .conts.profile.three-columns .inner-block { width: 100% }
	.portrait { width: calc(100% - 6vw); margin: 12vw 6vw 0 0 }
    .shinki-nav { padding-top: 16vw }
    .shinki-nav li { position: relative; float: left; width: 33.33%; margin-top: 10px }
    .shinki-nav li::after { position: absolute; left: 0; top: -5px; content: ""; width: 0; height: 1px; background: #111114; transition: all 0.2s }
    .shinki-nav li.current::after { width: 100%; }
    
    .sign01 { width: 140px }
    .sign02 { width: 224px }
    .sign03 { width: 160px }
    .sign04 { width: 148px }
    .sign05 { width: 136px }
	
	.pc-none { display: block !important }
	.sp-none { display: none !important }
    
}

@media screen and (max-width: 440px) {
    .profile-block { padding-right: 6vw }
    .conts.profile .inner-block p { font-size: 2.88vw; }
}