/* --------------------------------------------------

stylesheet: top.css

-------------------------------------------------- */

/* base
-------------------------------------------------- */
html,body { text-align: center;}
html.sp,.sp body { text-align: left;}
h1 { text-align: center;}
h2 { font-size: 52px; font-style: italic; font-weight: 500; letter-spacing: -.02em; line-height: .9; padding-left: 10px; opacity: 0;}
h3 { font-style: italic; font-weight: 500; letter-spacing: -.02em; line-height: .9; padding-left: 10px;}
h3 small { display: block; font-size: 18px; font-weight: 100; letter-spacing: .01em; margin-bottom: 12px;}
h3 big { display: block; font-size: 52px; opacity: 0;}
.fp-section { overflow: hidden;}
.fp-slides .fp-slidesContainer .slide { overflow: hidden;}
.mobileOnly { display: none;}
.mobile .pcOnly { display: none;}
.mobile .mobileOnly { display: block;}

/* logo
-------------------------------------------------- */
#logo { position: fixed; top: 10px; left: 10px; max-width: 144px; z-index: 100; -webkit-transition: all 1s; transition: all 1s; opacity: 0;}
body.fp-viewing-person-slide1 #logo,
body.fp-viewing-person-slide2 #logo,
body.fp-viewing-person-slide3 #logo,
body.fp-viewing-person-slide4 #logo,
body.fp-viewing-person-slide5 #logo,
body.fp-viewing-person-slide6 #logo,
body.fp-viewing-person-slide7 #logo,
body.fp-viewing-philosophy #logo,
body.fp-viewing-contact #logo { opacity: 1;}

/* actionBtns
-------------------------------------------------- */
html:not(.mobile) .actionBtns { font-size: 1.4em;}
.actionBtns { font-style: italic; padding-left: 10px; margin-top: 20px; position: relative;}
.actionBtns .actionBtn { display: inline-block; background: #f12257; border-radius: 50px;}
.actionBtns .actionBtn a { display: block; width: 135px; padding: 10px 0; color: #fff; font-size: 18px; text-align: center;}

/* next
-------------------------------------------------- */
.actionBtns .next { position: absolute; top: 50%; right: 10px;}
.actionBtns .next a { color: #fff;}
.actionBtns .next::before { content: ''; width: 38px; height: 1px; background: #fff; position: absolute; top: -10px; right: 0;}
.actionBtns .next::after { content: ''; width: 15px; height: 1px; transform: rotate(45deg); background: #fff; position: absolute; top: -15px; right: -2px;}

/* animation */
.actionBtns .next::before { animation-name: slide1; animation-duration: 2s; animation-timing-function: ease-in-out; animation-iteration-count: infinite;}
.actionBtns .next::after { animation-name: slide2; animation-duration: 2s; animation-timing-function: ease-in-out; animation-iteration-count: infinite;}
@keyframes slide1 { 0% { right: 10px;} 50% { right: 0;} 100% { right: 10px;}}
@keyframes slide2 { 0% { right: 8px;} 50% { right: -2px;} 100% { right: 8px;}}

/* prev
-------------------------------------------------- */
.mobile .actionBtns .prev { display: none;}
.actionBtns .prev { position: absolute; top: 50%; left: 10px;}
.actionBtns .prev a { color: #fff;}
.actionBtns .prev::before { content: ''; width: 38px; height: 1px; background: #fff; position: absolute; top: -10px; left: 0;}
.actionBtns .prev::after { content: ''; width: 15px; height: 1px; transform: rotate(-45deg); background: #fff; position: absolute; top: -15px; left: -2px;}

/* animation */
.actionBtns .prev::before { animation-name: slide3; animation-duration: 2s; animation-timing-function: ease-in-out; animation-iteration-count: infinite;}
.actionBtns .prev::after { animation-name: slide4; animation-duration: 2s; animation-timing-function: ease-in-out; animation-iteration-count: infinite;}
@keyframes slide3 { 0% { left: 10px;} 50% { left: 0;} 100% { left: 10px;}}
@keyframes slide4 { 0% { left: 8px;} 50% { left: -2px;} 100% { left: 8px;}}

/* scrollAttention
-------------------------------------------------- */
.fp-slide { position: relative;}
.scrollAttention { font-style: italic; position: absolute; left: 0; right: 0; bottom: 40px; text-align: center; z-index: 10;}
.scrollAttention::before { content: ''; width: 20px; height: 1px; transform: rotate(32deg); background: #fff; position: absolute; bottom: -20px; right: 50%; margin-right: -1.5px;}
.scrollAttention::after { content: ''; width: 20px; height: 1px; transform: rotate(-32deg); background: #fff; position: absolute; bottom: -15px; left: 50%; margin-left: -1.5px;}

.contact .scrollAttention { bottom: 10px;}
.contact .scrollAttention::before,
.contact .scrollAttention::after { content: none;}

/* animation */
.scrollAttention::before,
.scrollAttention::after { animation-name: scrolldown; animation-duration: 2s; animation-timing-function: ease-in-out; animation-iteration-count: infinite;}
@keyframes scrolldown { 0% { bottom: -10px;} 50% { bottom: -20px;} 100% { bottom: -10px;}}

/* background
-------------------------------------------------- */
.fp-viewing-top { background: #000;}
section video { display: none;}
.top-randomImage { position: relative; width: 100%; height: 100%; overflow: hidden;}
.top-randomImage img { position: absolute; top: 50%; transform: translateY(-50%); left: 0; right: 0;}

.fp-viewing-person-slide1 { background: url(../img/contents/top/top.jpg) center center no-repeat; background-size: cover;}
.fp-viewing-person-slide2 { background: url(../img/contents/top/person_ryosuke.jpg) center center no-repeat; background-size: cover;}
.fp-viewing-person-slide3 { background: url(../img/contents/top/person_naotsugu.jpg) center center no-repeat; background-size: cover;}
.fp-viewing-person-slide4 { background: url(../img/contents/top/person_masanari.jpg) center center no-repeat; background-size: cover;}
.fp-viewing-person-slide5 { background: url(../img/contents/top/person_takanori.jpg) center center no-repeat; background-size: cover;}
.fp-viewing-person-slide6 { background: url(../img/contents/top/person_hiroya.jpg) center center no-repeat; background-size: cover;}
.fp-viewing-person-slide7 { background: url(../img/contents/top/person_kotsuji.jpg) center center no-repeat; background-size: cover;}
.fp-viewing-philosophy { background: url(../img/contents/top/philosophy.jpg) center center no-repeat; background-size: cover;}
.fp-viewing-contact { background: url(../img/contents/top/contact.jpg) center center no-repeat; background-size: cover;}

@media only screen and (min-width: 768px) {
section video { display: block;}
body:not(.fp-viewing-top) section video { display: none;}
.top-randomImage { display: none;}

.fp-viewing-person-slide2 { background: url(../img/contents/top/person_ryosukeOblong.jpg) center center no-repeat; background-size: cover;}
.fp-viewing-person-slide3 { background: url(../img/contents/top/person_naotsuguOblong.jpg) center center no-repeat; background-size: cover;}
.fp-viewing-person-slide4 { background: url(../img/contents/top/person_masanariOblong.jpg) center center no-repeat; background-size: cover;}
.fp-viewing-person-slide5 { background: url(../img/contents/top/person_takanoriOblong.jpg) center center no-repeat; background-size: cover;}
.fp-viewing-person-slide6 { background: url(../img/contents/top/person_hiroyaOblong.jpg) center center no-repeat; background-size: cover;}
.fp-viewing-person-slide7 { background: url(../img/contents/top/person_kotsujiOblong.jpg) center center no-repeat; background-size: cover;}
.fp-viewing-philosophy { background: url(../img/contents/top/philosophyOblong.jpg) center center no-repeat; background-size: cover;}
.fp-viewing-contact { background: url(../img/contents/top/contactOblong.jpg) center center no-repeat; background-size: cover;}
}

/* top
-------------------------------------------------- */
svg { position: fixed; top: 50%; transform: translateY(-50%); left: 0; right: 0; margin: auto; width: 30vw; min-width:260px; z-index: 1;}
.titleLogo {fill:#FFFFFF; fill-opacity:0; stroke:#fff;}
.titleCopy {fill:#FFFFFF; fill-opacity:0; stroke:#fff;}
polygon { stroke-dashoffset: 0;}

html.mobile .titleLogo,
html.mobile .titleCopy { stroke: none; fill-opacity: 1!important;}
html.mobile h1 svg { opacity: 0; margin-top: 20px; -webkit-transition: all 5s; transition: all 5s;}
html.mobile .fp-viewing-top h1 svg { opacity: 1; margin-top: 0;}

/* person
-------------------------------------------------- */
.person .personTOP .actionBtns { height: 38px;}

/* philosophy
-------------------------------------------------- */

/* navi
-------------------------------------------------- */
.navi { position: relative;}
.navi .naviBtn { border: #fff 1px solid; border-radius: 50%; width: 48px; height: 48px; position: absolute; top: 10px; right: 10px; z-index: 95;}
.navi .naviBtn .inner { position: absolute; top: 50%; transform: translateY(-50%); left: 0; right: 0; width: 24px; margin: 0 auto; z-index: 10;}
.navi .naviBtn span { display: block; background: #fff; height: 1px; transition: all .3s; transform: none;}
.navi .naviBtn span+span { margin-top: 6px;}

.navi nav { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,1); z-index: 90; pointer-events: none; opacity: 0; transition: all .3s; text-align: left;}
.navi nav > ul {position: absolute; top: 50%; transform: translateY(-45%); left: 10px; right: 10px;}
.navi nav > ul > li+li { margin-top: 10px;}
.navi nav > ul > li a { color: #fff;}
.navi nav > ul > li > a { font-size: 30px; font-style: italic; margin-left: 1.16666667%;}

.navi nav ul.navStory li { display: inline-block; width: 31%; margin: 10px 1.16666667%;}
.navi nav ul.navStory li a { font-size: 12px; font-style: italic;}
.navi nav ul.navStory li span { display: block; height: 60px;}
.navi nav ul.navStory li:first-child span { background: url(../img/contents/story/ryosuke/img03.jpg) center center no-repeat; background-size: cover;}
.navi nav ul.navStory li:first-child+* span { background: url(../img/contents/story/naotsugu/img02.jpg) center center no-repeat; background-size: cover;}
.navi nav ul.navStory li:first-child+*+* span { background: url(../img/contents/story/masanari/img05.jpg) center center no-repeat; background-size: cover;}
.navi nav ul.navStory li:first-child+*+*+* span { background: url(../img/contents/story/takanori/img05.jpg) center center no-repeat; background-size: cover;}
.navi nav ul.navStory li:first-child+*+*+*+* span { background: url(../img/contents/story/hiroya/img04.jpg) center center no-repeat; background-size: cover;}
.navi nav ul.navStory li:first-child+*+*+*+*+* span { background: url(../img/contents/story/kotsuji/img05.jpg) center center no-repeat; background-size: cover;}
.navi nav ul.navStory li small { display: block; margin-top: 4px;}

/* active */
.navi.active nav { pointer-events: inherit; opacity: 1;}
.navi.active .naviBtn span:first-child { transform: rotate(45deg) translate(5px,5px);}
.navi.active .naviBtn span:first-child+* { opacity: 0;}
.navi.active .naviBtn span:first-child+*+* { transform: rotate(-45deg) translate(5px,-5px);}

@media only screen and (min-width: 374px) {
.navi nav > ul > li+li { margin-top: 20px;}
	
.navi nav ul.navStory li span { height: 80px;}
}
@media only screen and (min-width: 768px) {
.navi nav ul.navStory li span { height: 150px;}
}