@charset "utf-8";
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form, label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,main,summary,time,mark,audio,video,a,input,textarea,section{ margin:0;padding:0; border:0; font-size:100%; background:transparent; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;
background-origin: border-box;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,main{ display:block;}
nav ul{ list-style:none;}
ul{ list-style:none; }
blockquote,q{ quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{ content:''; content:none;}
pre,code,kbd,samp{ font-family:monospace,monospace; font-size:inherit;}
table{ border-collapse:collapse; border-spacing:0;}
img{ border:0;}
address,caption,cite,code,dfn,em,th,var{ font-style:normal; font-weight:normal;}
caption,th{ text-align:left;}
h1,h2,h3,h4,h5,h6{ font-size:100%; font-weight:normal}
sup{ vertical-align:text-top; font-size:75%;}
sub{ vertical-align:text-bottom; font-size:75%;}
input,textarea,select{ z-index:auto; font-family:inherit; font-size:inherit; font-weight:inherit; vertical-align:middle;}
a{ outline:none;}
audio:not([controls]){ display:none;}
time{ display:inline;}
[hidden]{ display:none;}
input::-ms-clear,input::-ms-reveal,input:focus::-ms-clear,input:focus::-ms-reveal{visibility:hidden; display:none;}
button::-moz-focus-inner,input[type="reset"]::-moz-focus-inner,input[type="button"]::-moz-focus-inner,input[type="submit"]::-moz-focus-inner,input[type="file"]>input[type="button"]::-moz-focus-inner{ padding:0; border:0; outline:none;}
/*==================================================== */
body{-webkit-text-size-adjust:100%; -webkit-font-smoothing:antialiased; font-family:'Roboto','Droid Sans',"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","Meiryo","ＭＳ Ｐゴシック",sans-serif; line-height:1.8;}
button{font-family:'Roboto','Droid Sans',"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","Meiryo","ＭＳ Ｐゴシック",sans-serif; cursor:pointer;}

a{cursor:pointer; color: #111;}
a:hover {color:#777; transition:background 0.2s;}
*{-webkit-tap-highlight-color:rgba(0,0,0,0);}
.clr{clear:both;}
.hide{position:absolute !important; left:-9999px !important; top:-9999px !important;}
section {clear:both; zoom:1;}
article:after,section:after,.clrFx:after{content:''; clear:both; display:block;}
img{-ms-interpolation-mode:bicubic;}

/* chrome bug fix*/
*{max-height:999999px;}
*,*::before,*::after {will-change:all;}
textarea,input[type="email"],input[type="password"],input[type="text"],input[type="button"],input[type="submit"]{-webkit-appearance:none;}
textarea{resize:vertical;}
input:-webkit-autofill {-webkit-box-shadow:0 0 0px 1000px rgba(255,255,255,1) inset; outline:none;}
input,button{outline:none;}
area{border:none;outline:none;}

/*
	BASE SET
__________________________________________________*/
html{overflow:visible;}
html,body {margin:0; padding:0;}
body {position:static; overflow:auto; width:auto; *overflow-y:hidden; color:#fff; font-size:20px; line-height:1.5; z-index:0;}
body.menuopen {overflow: hidden; height: 100%;}

.over-section{margin:0 -410px; zoom:1; position:relative; *overflow-y:hidden; clear:both; padding:0;}
.over-section:after{content:''; clear:both; display:block;}
main {width:100%; min-height: 380px;}
section {width:100%; margin:0 auto; clear:both; zoom:1; position:relative; z-index:100; padding:0;}
.wrap   {margin:0 auto; clear:both; zoom:1; position:relative; z-index:100; padding:0;}
article   {margin:0 auto; clear:both; zoom:1; position:relative; z-index:10; padding:0;}
article:after,section:after,.wrap:after{content:''; clear:both; display:block;}
*,*::before,*::after {box-sizing:border-box;}

small{font-size:80%; padding-left:5px;}

/*

	PC/SP STYLE

**************************************************************/
body,#wrapper  {}

main {font-size:0; line-height:1; position:relative; opacity:1; transition:opacity 0.6s ease; margin-bottom: 100px; -moz-font-feature-settings: "palt"; -webkit-font-feature-settings: "palt"; font-feature-settings: "palt"; z-index: 10;}
/*.windowloaded main {opacity:1;}*/

#contents {position:relative; opacity:1; transition:opacity 0.6s ease; min-width: 1100px;}
/*.windowloaded #contents{opacity:1;}*/

#wrapper {position: relative;}

.sppagetop {display: none;}

/* spmenu */
.toggle {width: 60px; height: 40px; position: fixed; right: 30px; top: 30px; z-index: 1010; display: block; background: rgba(255,255,255,0.3); font-size: 0; line-height: 1;}
.toggle a{display: block; width: 60px; height: 40px; position: relative; z-index: 100;}
.toggle a::after,
.toggle a::before,
.toggle::before{content: ''; width:40px; height: 2px; position: absolute; left: 50%; top: 50%; margin: -1px 0 0 -20px; background: #16aab2; transition: 0.5s;}
.toggle a::before{margin: -0px 0 0 -20px; transform: translate3d(0,-7px,0);}
.toggle::before{margin: -0 0 0 -20px; transform: translate3d(0,5px,0);}
#navmask {width: 100%; height: 100%; position: fixed; left:0; z-index: 1004; top: 0;  background: rgba(0,0,0,0.4); transition:left 0.5s; display: none;}
.menuopen aside {transform: translate3d(0,0,0);}
.menuopen aside ul li a{transform: translate3d(0,0,0); opacity: 1;}

.toggle a:hover::before {transform: translate3d(0,-11px,0); transition: 0.3s;}
.toggle:hover::before {transform: translate3d(0,9px,0); transition: 0.3s;}

.menuopen .toggle {background-color: rgba(255,255,255,0);}
.menuopen .toggle a::after {opacity: 0;}
.menuopen .toggle a::before {transform: rotate(135deg) translate3d(0,0,0); transition: 0.5s;}
.menuopen .toggle::before {transform: rotate(-135deg) translate3d(0,0,0); transition: 0.5s;}
.menuopen .toggle a:hover::before {transform: rotate(135deg) translate3d(0,0,0) scale(0.8);}
.menuopen .toggle:hover::before {transform: rotate(-135deg) translate3d(0,0,0) scale(0.8);}

/* aside */
aside {position: fixed; right: -300px;; top: 0; transform: translate3d(100%,0,0); transition: 0.5s; height: 100%; background: #fff; z-index: 1005; width: 280px;}
.windowloaded aside {right: 0;}
aside nav {height: 100%; overflow: auto; padding: 100px 20px;}

::-webkit-scrollbar {width: 4px;}
::-webkit-scrollbar-track {border-radius: 4px; box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);}
::-webkit-scrollbar-thumb {
  background-color: #16aab2;
  border-radius: 6px;
  box-shadow:0 0 0 1px rgba(255, 255, 255, .3);
}

aside h2 {color: #111; font-size: 20px; line-height: 1; text-align: center; letter-spacing: 0.1em; font-weight:bolder; margin-bottom: 25px;}
aside ul li {border-top: 1px dotted #ccc;}
aside ul {border-bottom: 1px dotted #ccc;}
aside ul li a{display: block; line-height: 40px; font-size: 15px; color: #111; text-decoration: none; padding: 0 0 0 15px; transition:color 0.3s; position: relative; font-weight:bolder;}
aside ul li a::after{content: ''; background: url(/img/arr.png) left top no-repeat; width: 8px; height: 7px; position: absolute; left: 0; top: 50%; margin-top: -4px;}
aside ul + h2 {margin-top: 45px;}
aside ul li a:hover{color: #777;}
aside ul li a.active{color: #999;}
body.works aside ul li a[href*='works.html'] {color: #999;}

/* siteHeader */
#siteHeader {position: absolute; left: 0; top: 0; height: 80px; width:100%; z-index: 100; background: none; min-width: 840px; font-size: 0;}
#siteHeader #logo {position: absolute; left: 40px; top: 40px; z-index: 10;}
#siteHeader #logo a {transition:opacity 0.3s; display: block;}
#siteHeader #logo a:hover {opacity: 0.7;}
#siteHeader #logo img {height: 20px; width: auto;}
#siteHeader nav {position: absolute; right: 112px; top:40px ; font-size: 14px; line-height: 20px; color: #111;}
#siteHeader nav a {color: #111; text-decoration: none; transition:color 0.3s; font-weight: bold;}
#siteHeader nav a:hover {color: #777;}
#siteHeader nav a.active{color: #999;}

/* #siteFooter */
#siteFooter {background: #fff; text-align: center; color: #111; font-size: 14px; line-height: 1.8; min-height: inherit; width: 100%; padding: 54px 0 0; letter-spacing: 0.1em;}
#siteFooter h2 {font-size: 16px; line-height: 1; font-weight: bold; margin-bottom: 7px;}
#siteFooter a{color: #16aab2; text-decoration: underline;}
#siteFooter ul li {display: inline-block; vertical-align: top; padding: 0 0.5em; font-family: 'Montserrat'; font-weight: bold;}
#siteFooter p.copyright {font-size: 13px; line-height: 42px; background: #111; letter-spacing: 0.2em; padding: 0; font-family: 'Montserrat'; color: #fff; margin-top: 60px;}
/*
body.photo #siteFooter {background: #111; color: #fff;}
*/

p.btn a{display: inline-block;  font-size:16px; width: 238px; line-height: 60px; text-decoration: none; font-weight: bold; letter-spacing: 0.2em; transition: 0.5s; backface-visibility: hidden; background: #16aab2; color: #fff; }
p.btn a:hover {background: #e3e3e3; color: #777;}

@media screen and (min-width:641px){
/*

	PC STYLE

**************************************************************/
#contents {min-width:840px; padding-bottom:0; font-size: 0; line-height: 1;}
#contents main { margin:0 auto 0; position:relative; padding:0; z-index:10; font-size:0; line-height:1; text-align:center;}
#contents .sp-item {display:none;}

p.contact {display: none;}

.sp-item{display: none;}
.pc-item{display: inline-block;}

}
@media screen and (min-width:1100px){}
@media screen and (min-width:1920px){}
@media screen and (max-width:640px){
body,#wrapper  { background: #fff;}

/*

	SP STYLE

**************************************************************/

#wrapper {padding-top: 16vw;}
/* siteHeader */
#siteHeader {height: 16vw; width:100%; z-index: 100; background: #fff; min-width: inherit; position: fixed;}
#siteHeader #logo {width: 17.333333vw; height: 3.6vw; left: 50%; top: 6.266667vw; margin-left: -8.666667vw;}
#siteHeader #logo a{background: url(/img/logo.png) center top no-repeat; background-size: 100% auto; width: 17.333333vw; height: 3.6vw; display: block;}
#siteHeader #logo img {display: none;}
#siteHeader nav {display: none;}

/* spmenu */
.toggle {width: 4.666667vw; height: 5.333333vw; right: 5.333333vw; top: 5.266667vw; z-index: 1010;}
.toggle {width: 8vw; height: 8vw; top: 3.63327vw; right: 4vw;}
.toggle a{display: block; width: 8vw; height: 8vw; position: relative; z-index: 100;}
.toggle a::after,
.toggle a::before,
.toggle::before{content: ''; width:4.666667vw; height: 4px; position: absolute; left: 50%; top: 50%; margin: -2px 0 0 -2.266667vw; background: #111;}
.toggle a::before{margin: 0 0 0 -2.266667vw; transform: translate3d(0,-11px,0);}
.toggle::before{margin: 0 0 0 -2.266667vw; transform: translate3d(0,7px,0);}
.toggle a:hover::before {transform: translate3d(0,-11px,0); transition: 0.5s;}
.toggle:hover::before {transform: translate3d(0,7px,0); transition: 0.5s;}
.menuopen .toggle a::after {opacity: 0;}
.menuopen .toggle a::before {transform: rotate(135deg) translate3d(0,0,0); transition: 0.5s;}
.menuopen .toggle::before {transform: rotate(-135deg) translate3d(0,0,0); transition: 0.5s;}


/* aside */
aside {width: 100%;}
aside nav {height: 100%; padding: 10.666667vw 2.666667vw;}
aside h2 {font-size: 6.4vw; margin-bottom: 7.733333vw;}
aside ul li a{line-height: 11.733333vw; font-size: 4.266667vw;  padding: 0 0 0 5.333333vw; font-weight:bolder;}
aside ul li a::after{content: ''; background: url(/img/arr.png) left top no-repeat; width: 8px; height: 7px; position: absolute; left: 0; top: 50%; margin-top: -4px; background-size: 100% auto;}
aside ul + h2 {margin-top: 15.733333vw;}


main {margin-bottom: 0;}
#contents {padding-bottom:0; width:100%; width:100vw; overflow:hidden; position:relative; font-size:0; line-height:1; min-width: inherit;}
#contents main {position:relative; z-index:10; font-size:0; line-height:1; text-align:center;}
#contents main img {width: 100%; height: auto;}


#siteFooter {background: #111; text-align: center; color: #fff; font-size: 2.666667vw; line-height: 4.8vw; min-height: inherit; width: 100%; padding: 8vw 0 5.8vw;}
#siteFooter h2 {font-size: 2.666667vw; line-height: 4.8vw;}
#siteFooter p.copyright {font-size: 2.4vw; letter-spacing: 0.2em; padding: 0; margin-top: 1.66875vw;}

p.btn a{font-size:3.2vw; width: 31.733333vw; line-height: 8vw; background: #16aab2; color: #fff;}

p.contact.btn {text-align: center; padding-bottom: 16vw;}
p.contact.btn a{width: 89.333333vw; text-align: center; margin: 0 auto; line-height: 16vw; font-size: 4.266667vw;}


.pc-item{display: none;}
.sp-item{display: inline-block;}
}


/* 
	loader
*********************/
#loader {background: rgba(255,255,255,0.5); width: 100%; height: 100%; z-index: 100000; position: fixed; left: 0; top: 0;}
.ie11 #loader  {background: rgba(255,255,255,1.00);}
.loader{width: 4.6rem; height: 4.6rem; position: fixed; right: 50%; top: 50%; margin: -2.3rem -2.3rem 0 0;}
.loader span,
.loader span:after {border-radius: 50%; width: 4.6rem; height: 4.6rem;}
.loader span{display: block; font-size: 1rem; position: relative; text-indent: -9999em;border-top: .1em solid rgba(22,170,178,0.2); border-right: .1em solid rgba(22,170,178,0.2); border-bottom: .1em solid rgba(22,170,178,0.2); border-left: .1em solid rgba(22,170,178,0.8);-webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); -webkit-animation: load8 1.1s infinite linear; animation: load8 1.1s infinite linear;}
@-webkit-keyframes load8 {  0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);}100% {-webkit-transform: rotate(360deg);transform: rotate(360deg);}}
@keyframes load8 {0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);}100% {-webkit-transform: rotate(360deg);transform: rotate(360deg);}}



/*
	js styles
******************************/
#baseVW {position: fixed; left: 0; bottom: 0; width: 100%; width: 100vw; height: 100%; height: 100vh; z-index: -1111; opacity: 0;}
#imageloaded {position: fixed; left: -9999px; font-size: 0; line-height: 1; height: 1px; width: 1px; overflow: hidden;}
.analytics {position:fixed; left:-9999px; top:-9999px; height:0; width:0; overflow:hidden;}

.animation-up ,
.animation ,
.animation.itemshow ,
.animation-trigger,
.uatablet .animation {}

#ascrail2000,
div[class='nicescroll-rails'],
div[class='nicescroll-rails'] div {z-index: 100000 !important; cursor: pointer;}

#gridJSSW {z-index:1000000000 !important;}
#sePlayer,#bgmPlayer,#openingBgmPlayer {position:fixed; left:-9999px; top:-9999px;}