@charset "utf-8";

/* col:<576px / col-sm:≥576px / col-md:≥768px / col-lg:≥992px / col-xl:≥1200px */

/* Layout
----------------------------------------------- */
html{font-size:15px;}
html.fixed,
body.open{position:fixed; width:100%;}
body, html {
    line-height:1.8;
    font-family:'游ゴシック体',YuGothic,'游ゴシック','Yu Gothic','メイリオ',sans-serif;
    -webkit-text-size-adjust:none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
/*     letter-spacing: .05em; */
}
#header{position:fixed; z-index:100;}
#footer{position:relative;}
#container{position:relative; z-index:10; padding-top:100vh;}
.thin{max-width:760px;}

img{max-width:100%; height:auto;}
img[src$=".svg"]{width:100%;/*IE*/}

a:not([class]){text-decoration:underline;}
a:not([class]):hover{text-decoration:none; opacity:.7;}

a,a:hover{color:black;}
a.link-box:hover{
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    opacity:.7;
}

.nav-link{padding:.5rem;}

.link-box,
.link-box:hover{text-decoration:none;}

.contents{padding-top:90px; padding-bottom:90px;}
@media (max-width:991px){
    .contents{padding-top:60px; padding-bottom:60px;}
}
@media (max-width:767px){
	.container{max-width:100%;}
    .contents{padding-top:30px; padding-bottom:30px;}
}
@media (max-width:575px){
    h2.container-fluid,
    article>.container-fluid{padding-left:15px; padding-right:15px;}
}

/* common
----------------------------------------------- */
h1,h2,h3,.h3{font-weight:700;}
h1{font-size:38px; margin:0; line-height:1.8;}
h2{font-size:45px; margin:0; line-height:1.4; margin-bottom:2rem;}
.h3{font-size:30px; line-height:1.6; margin-bottom:3rem;}
.lead{font-size:1rem; font-weight:700;}

.bg-gray{background-color:#F3F3F3;}

.c{text-align:center;}

dl.def{line-height:1.6rem;}
dl.def dt{width:140px;}
dl.def dd{margin:-1.6rem 0 1.2rem 160px;}
dl.def dd.row2{margin-top:-3.2rem;}

@media (max-width:1199px){
	h1{margin-bottom:2rem; text-align:center; line-height:1.6;}
}
@media (max-width:991px){
	h2{font-size:36px;}
}
@media (max-width:767px){
	h1{font-size:5.5vw;}
	h2{font-size:26px; margin-bottom:1rem;}
	.h3{font-size:22px; margin-bottom:2rem;}
}
@media (max-width:575px){
}


/* scroll effect
----------------------------------------------- */
.fadein {
    opacity : 0;
    transform: translateY(40px);
    transition: all 1s;
}
.fadein.lazyloaded{
    opacity : 1;
    transform: translateY(0);
}
.slide-out{position:relative; overflow:hidden;}
.slide-out::after{
	content:'';
	display:block;
	width:100%;
	height:100%;
	background-color:#f3f3f3;
	position:absolute;
	top:0;
	left:0;
    transition: all 1s;
}
.slide-out.lazyloaded::after{
    transform: translateX(100%);
}

/* header
----------------------------------------------- */
#header{width:100%; padding-top:20px; display:flex; justify-content:center; font-weight:700;}
a.brand{display:inline-block; width:110px;}

#header .pannel{
    position:fixed;
    top: 0;
    right: 0;
    width:100%;
    height:100vh;
    z-index:100;
    background-color:rgba(0,0,0,.85);
    padding:15px;
    justify-content:center;
    align-items:center;
    overflow:auto;

    -webkit-transition:opacity .45s;
    transition:opacity .45s;
    opacity:0;
    color:white;
    background:rgba(0,0,0,.85);
    -webkit-overflow-scrolling:touch;
    
    visibility:hidden;
}
#header .pannel>*{display:none;}
.open #header .pannel{display:flex; visibility:visible; opacity:1;}
.open #header .pannel>*{display:flex;}

#gnavi{max-width:70%; width:70%/*IE*/;}
#gnavi a{font-size:3vw; color:white; white-space:nowrap;}

#header ul.lang.inner a{
    min-width:3rem;
    text-align:center;
}

#header ul.lang.outer{
    position: fixed;
    top: 30px;
    right: 30px;
    font-size:.9rem;
}

@media (max-width:767px){
    #header{padding-top:10px;}
    a.brand{width:70px;}
    
    #header ul.lang.outer{display:none;}
    #gnavi{padding-top:90px; padding-bottom:90px;}
    #gnavi a{font-size:1.8rem;}
    #header ul.lang.inner a{font-size:1.5rem;}
    .open #header .pannel>*{display:block; max-width:auto !important; width:auto !important;}    
}

@media (max-width:575px){
    a.brand{width:60px;}
    dl.def.about dt{width:100%; padding:1rem 1rem .5rem; border-top:1px solid black;}
    dl.def.about dd{margin:0; padding:0 1rem 1rem; border:none;}
    #gnavi a{font-size:1.4rem;}
    #header ul.lang.inner a{font-size:1.2rem;}
}

/* footer
----------------------------------------------- */
#footer{font-size:.83rem; font-weight:700; background-color:#14126f; color:white;}
#footer ul.nav li::before{content:'/'; padding:0 .5rem;}
#footer ul.nav li:first-child::before{content:none;}
#footer a{color:white;}

#copylight{font-size:83%; margin:0 0 0 auto;}

@media (max-width:991px){
    #footer nav.nav{flex-direction:column;}
    #footer nav.nav>*{margin-bottom:1rem;}
    #copylight{margin:0 auto;}
}
@media (max-width:575px){
    #footer ul.nav li::before{padding:0;}
}
@media (max-width:374px){
    #footer ul.nav li::before{content:none;}
}



/* button effect
----------------------------------------------- */
#btn-menu,
#header .nav .close{padding:0;border:none;outline:0;cursor:pointer}

#btn-menu{position:fixed;z-index:1000;top:33px;right:32px;width:62px;height:26px;background-color:transparent;}
#btn-menu span,
#btn-menu::after,
#btn-menu::before{position:absolute;right:0;height:2px;content:'';-webkit-transition:width .2s cubic-bezier(.25,.46,.45,.94);transition:width .2s cubic-bezier(.25,.46,.45,.94);-webkit-transform-origin:left center;-ms-transform-origin:left center;transform-origin:left center;background:black;}

#btn-menu::before{top:0;width:62px}
#btn-menu::after{bottom:0;width:22px}
#btn-menu span{top:12px; display:block;width:42px;text-indent:100%; overflow:hidden;}

#btn-menu:hover:not(.open)::after,
#btn-menu:hover:not(.open)::before{width:42px}
#btn-menu:hover:not(.open) span{width:62px}
#btn-menu.open span{opacity:0}
#btn-menu.open::before{-webkit-animation:menu-icon-1 .6s alternate forwards;animation:menu-icon-1 .6s alternate forwards}
#btn-menu.open::after{-webkit-animation:menu-icon-2 .6s alternate forwards;animation:menu-icon-2 .6s alternate forwards}
@-webkit-keyframes menu-icon-1{
    40%{top:50%;width:28px;-webkit-transform:translate(0,-50%);transform:translate(0,-50%);-webkit-transform-origin:center center;transform-origin:center center;background:#fff;}
    100%{top:50%;width:28px;-webkit-transform:translate(0,-50%) rotate(135deg);transform:translate(0,-50%) rotate(135deg);-webkit-transform-origin:center top;transform-origin:center top;background:#fff;}
}
@keyframes menu-icon-1{
    40%{top:50%;width:28px;-webkit-transform:translate(0,-50%);transform:translate(0,-50%);-webkit-transform-origin:center center;transform-origin:center center;background:#fff;}
    100%{top:50%;width:28px;-webkit-transform:translate(0,-50%) rotate(135deg);transform:translate(0,-50%) rotate(135deg);-webkit-transform-origin:center top;transform-origin:center top;background:#fff;}
}
@-webkit-keyframes menu-icon-2{
    40%{bottom:50%;width:28px;-webkit-transform:translate(0,50%);transform:translate(0,50%);-webkit-transform-origin:center center;transform-origin:center center;background:#fff;}
    100%{bottom:50%;right:1px;width:28px;-webkit-transform:translate(0,50%) rotate(-135deg);transform:translate(0,50%) rotate(-135deg);-webkit-transform-origin:center top;transform-origin:center top;background:#fff;}
}
@keyframes menu-icon-2{
    40%{bottom:50%;width:28px;-webkit-transform:translate(0,50%);transform:translate(0,50%);-webkit-transform-origin:center center;transform-origin:center center;background:#fff}
    100%{bottom:50%;right:1px;width:28px;-webkit-transform:translate(0,50%) rotate(-135deg);transform:translate(0,50%) rotate(-135deg);-webkit-transform-origin:center top;transform-origin:center top;background:#fff}
}


/**/
.line-hover{
    position: relative;
    display: inline-block;
}
.line-hover:hover{
	text-decoration:none;
}
.line-hover::after{
    content: '';
    position: absolute;
    bottom:0;
    left: 0;
    width: 100%;
    height: 2px;
    background:white;
    transform:scale(0, 1);
    transform-origin:left top;
    transition:transform .3s;
}
.line-hover.active::after,
.line-hover:hover::after {
	transform:scale(1, 1);
}
.nav-link.line-hover::after{
    bottom:.5rem;
    left:.2rem;
    width:calc(100% - .4rem);
}

.pannel .line-hover::after{
    background:white;
}

a.line::before{
    content: '';
    position: absolute;
    bottom:0;
    left: 0;
    width: 100%;
    height: 2px;
    background:rgba(0,0,0,.2);
}


/* slide */
.btn.hover-slide{
    border-radius:0;
    border:1px solid black;
    color:black;
    min-width:260px;
    padding:1rem;
    font-weight:700;
    background-color:rgba(255,255,255,.7);
}

.hover-slide{position:relative; overflow:hidden;}
.hover-slide>*{position:relative; z-index:10;}
.hover-slide::before{
    content:'';
    width:100%;
    height:100%;
    background-color:black;
    position:absolute;
    top:0;
    left:-100%;
    transition:all .3s ease;
}
.hover-slide:hover::before{left:0;}
.hover-slide:hover{color:white;}

.hover-slide.disabled{opacity:.7;}


@media (max-width:767px){
    #btn-menu{top:20px;right:20px;width:53px;height:18px;}
    #btn-menu::before{width:52px}
    #btn-menu span{top:8px; width:37px;}
}

/* cover
----------------------------------------------- */
#cover{
	display:flex;
	justify-content:center;
	align-items:center;
	width:100%;
	height:100vh;
	padding:0 30px;
	position:fixed;
	background-color:#84c3f7;
}
#cover .row{align-items:center;}

@media (max-width:1199px){
	#cover img{max-width:inherit; max-height:40vh; width:auto;}
}
@media (max-width:767px){
	#cover{padding:0;}
}

/* home
----------------------------------------------- */
#pos-service .row{justify-content:space-between; align-items:center;}
#pos-service img.p3svg{max-width:80%;}
@media (max-width:575px){
	#pos-service img{max-width:70%;}
	#pos-service img.p3svg{max-width:40%;}
}

.access-box h3{font-size:1rem; margin:0; line-height:1.8;}
.g-map{width:100%; height:350px;}

dl.def.about dt{width:140px; padding:1rem;}
dl.def.about dd{margin:-3.6rem 0 0 0; padding:1rem 1rem 1rem 160px; border-top:1px solid black;}

@media (max-width:575px){
    dl.def.about dt{width:100%; padding:1rem 1rem .5rem; border-top:1px solid black;}
    dl.def.about dd{margin:0; padding:0 1rem 1rem; border:none;}
}