@charset "UTF-8";

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

	filename:	style.3device.css
	created:	17.10.26
	
/*--------------------------------------------------------------- */


/*----------------------------------------------------------------*/
/* 共通 */
/*----------------------------------------------------------------*/
body {
    min-width: 320px;
/*「transition」safariで文字が一瞬細くなるバグ用*/
    -webkit-font-smoothing: antialiased;
	background:#f9f9f9;
	color:#111;
}


img {
    max-width: 100%;
    height: auto;
}
	
.ie8 img {
    width: auto;
}	
	
.txt-r {
    text-align:right;
}
	
.txt-c {
    text-align:center;
}

.sp-hide {
	display:none;
}	

/* Firefox用 ルビを非表示 */
rp, x:-moz-any-link, x:default,
rt, x:-moz-any-link, x:default {
	display:none;
}

p {
	font-size:14px;
    font-size: 1.4rem;
    margin-bottom: 21px;
	line-height:1.8;	
}

ul li,
ol li {
	font-size:14px;
    font-size: 1.4rem;	
}

.img-r {
	float:right;
	margin:0 0 13px 13px !important;
	padding:0 !important;
	width:40%;
}

.fl-r {
	float:right;	
}

em {
	color:#F00;
}

iframe {
	border:none;
}

hr {
    border-top: 1px dotted #bbb;
    border-bottom:none;
}

.uc {
	padding:55px 0;
	text-align:center;
}

.fa {
	margin-right:5px;
}

/*----------------------------------------------------------------*/
/* リンク */
/*----------------------------------------------------------------*/
a:link { text-decoration: underline; color:#444;}
a:visited { text-decoration: underline; color:#444;}

#global-nav a:link,
h1 a:link { text-decoration: none; color:#111;}
#global-nav a:visited,
h1 a:visited { text-decoration: none; color:#111;}

/*----------------------------------------------------------------*/
/* リンクボタン */
/*----------------------------------------------------------------*/
a.btn {
    display: inline-block;
    width: 150px;
    height: 45px;
    text-align: center;
    line-height: 41px;
    outline: none;
	
    background-color: #f9f9f9;
    color: #111;
	text-decoration:none !important;
	font-size:15px;
	font-size:1.5rem;
    border: 2px solid #111;
	
    position: relative;
    z-index: 2;
	overflow:hidden;
}

a.btn::before,
a.btn::after {
    position: absolute;
    z-index: -1;
    display: block;
    content: '';
    top:0;
    left: -100%;
    width: 100%;
    height: 100%;	
}
a.btn,
a.btn::before,
a.btn::after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
}

/*----------------------------------------------------------------*/
/* ベースレイアウト */
/*----------------------------------------------------------------*/
.content {
	position:relative;
	clear:both;

  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;

  /* 左右中央寄せ */
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;	
}

.center-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;

  /* 左右中央寄せ */
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;

  /* 上下中央寄せ */
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;	
}

.content .inner {
	width:90%;
	padding:110px 0 35px;
	margin:o auto;
}

.inner-content > section {
	margin:0 0 55px;
}

.inner-content > section:last-child {
	margin:0;
}

/*----------------------------------------------------------------*/
/* Title サイズ */
/*----------------------------------------------------------------*/
 h1 {
	 font-size: 5.6vw;
	 margin: 0 0 10vw;
	 line-height:1;
	 text-align: center;
 }

h1 span {color: #888;}	

h3 {
	font-size:18px;
	font-size:1.8rem;
    margin:0 0 21px;
	line-height:1.8;
}

/*----------------------------------------------------------------*/
/* Rubik */
/*----------------------------------------------------------------*/
#company-en p,
#company-en li {
	font-family: 'Rubik', sans-serif;	
	font-weight:300;	
}

h3,h4,.btn,
#global-nav li a,
.copyright,
#header-works li,
.solution p,
.map {
	font-family: 'Rubik', sans-serif;
	font-weight:400;
}

h1,
#works h2,
#works h3 {
	font-family: 'Rubik', sans-serif;
	font-weight:500;
}

/*----------------------------------------------------------------*/
/* タイトル日本語 */
/*----------------------------------------------------------------*/
#about-us h3 {
    font-family:'Noto Sans JP','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;   
	font-weight:bold;
}


/*----------------------------------------------------------------*/
/* ヘッダ HOME */
/*----------------------------------------------------------------*/
#home header {
	height:100vh;
}

#header-back {
	width:100%;
}

#home header .inner {
	width:75%;
	height:55vh;
	position:relative;
	margin:0 auto;
}

#home h1 {
	opacity:0;		
	top:0;
	left:0;
	right:auto;
	font-size:50px;
	font-size:5.0rem;	
}

#home h1 span {
	display:block;
	font-size:40px;
	font-size:4.0rem;
}

#home h1.start {		
	animation:intro ease .7s forwards;
}

@keyframes intro {
    0% {
		opacity:0;
    }
    100% {
		opacity:1;
    }
}

/*----------------------------------------------------------------*/
/* グローバルナビゲーション */
/*----------------------------------------------------------------*/  
#global-nav {
	position: absolute;
	z-index:3;
}

#global-nav li {
	font-size:16px;
	font-size:1.6rem;
	margin:0 0 15px;
}

#global-nav li a {
	display:block;
}

#home #global-nav.fix {
	left:0;	
}

#home #global-nav.fix li {
	opacity:1;	
}

/* #global-nav a.stay { text-decoration: none; color:#888;}*/


/* アンダーライン */
#header-back.fix #global-nav li a {
	position:relative;	
	text-decoration:none;
	display:inline-block;
}

#header-back.fix #global-nav li a:before,
#header-back.fix #global-nav li a:after {
  position: absolute;
  bottom:-0.3em;
  content: "";
  display: inline-block;
  width: 0;
  height: 2px; 
 background: #222;
  transition: .2s all ease; 
}

#header-back.fix #global-nav li a:before {
  left: 50%; 
}

#header-back.fix #global-nav li a:after {
  right: 50%;
}

#header-back.fix #global-nav li a.stay:before,
#header-back.fix #global-nav li a.stay:after {
  width: 50%;
}


/*----------------------------------------------------------------*/
/* グローバルナビゲーション HOME */
/*----------------------------------------------------------------*/  
#home #global-nav {
	top:50%;
	left:0;
}

#home #global-nav li {
	opacity:0;
}

#home #global-nav.fade-in li:nth-child(1) {
    animation: nav-in .5s ease-in-out 0s forwards;
}

#home #global-nav.fade-in li:nth-child(2) {
    animation: nav-in .5s ease-in-out .2s forwards;	
}

#home #global-nav.fade-in li:nth-child(3) {
    animation: nav-in .5s ease-in-out .4s forwards;		
}

#home #global-nav.fade-in li:nth-child(4) {
    animation: nav-in .5s ease-in-out .6s forwards;		
}

#home #global-nav.fade-in li:nth-child(5) {
    animation: nav-in .5s ease-in-out .8s forwards;		
}

@-webkit-keyframes nav-in {
    from {
	opacity:0;
	transform:translateY(-5px);
    }	
    to {
	opacity:1;
	transform:translateY(0);
    }
} 

@keyframes nav-in {
    from {
	opacity:0;
	transform:translateY(-5px);
    }	
    to {
	opacity:1;
	transform:translateY(0);
    }	
}

/*---------------------------------------------------
　ヘッダー　ナビゲーション開閉ボタン
----------------------------------------------------*/	
#nav-control {
	position:fixed;
	top:13px;
    right:13px;
	z-index:4;
}

#home #nav-control {
    display: none;
}

#blind {
	position:fixed;
	width:100%;
	height:100vh;
	z-index:2;
	display:none;
}

#blind.activate {
	display:block;
}

#toggle-icon {
    display:block;
    width:25px;
    height:20px;
    position:relative;
}

#toggle-icon span {
    display: block;
    width: 25px;
    height: 2px;
    background: #111;
    margin:0 0 8px;

-webkit-transition: all .25s cubic-bezier(0.750, 0.250, 0.535, 0.930); 
   -moz-transition: all .25s cubic-bezier(0.750, 0.250, 0.535, 0.930); 
     -o-transition: all .25s cubic-bezier(0.750, 0.250, 0.535, 0.930); 
        transition: all .25s cubic-bezier(0.750, 0.250, 0.535, 0.930); /* custom */
}

#nav-control #toggle-icon .nav-control-first {
}
#nav-control #toggle-icon .nav-control-second {
    -webkit-transform: translate(5px,0);
    transform: translate(5px,0);	
	width:20px;
}
#nav-control #toggle-icon .nav-control-third {
}

/* */
#nav-control.activate #toggle-icon .nav-control-first {
    -webkit-transform: translate(0,10px) rotate(45deg);
    transform: translate(0,10px) rotate(45deg);
}
#nav-control.activate #toggle-icon .nav-control-second {
    opacity: 0;
    -webkit-transform: scaleX(0.2);
    transform: scaleX(0.2);
}
#nav-control.activate #toggle-icon .nav-control-third {
    -webkit-transform: translate(0,-10px) rotate(-45deg);
    transform: translate(0,-10px) rotate(-45deg);
	width:25px;
}


#global-nav.side {
	display:none;
}

#header-back.sp #global-nav.side {
	position: fixed;
	top:155px;
	right:89px;
	left:auto;
	display:none;
}

#header-back.sp.activate #global-nav.side {
	display:block;
}

#header-back.sp #global-nav.side li {
	opacity:0;
	font-size:18px;
	font-size:1.8rem;
	margin:0 0 21px;
}


#header-back.sp.activate #global-nav.side li:nth-child(1) {
    animation: nav-side-in .5s ease-in-out 0s forwards;
}

#header-back.sp.activate #global-nav.side li:nth-child(2) {
    animation: nav-side-in .5s ease-in-out .2s forwards;	
}

#header-back.sp.activate #global-nav.side li:nth-child(3) {
    animation: nav-side-in .5s ease-in-out .4s forwards;		
}

#header-back.sp.activate #global-nav.side li:nth-child(4) {
    animation: nav-side-in .5s ease-in-out .6s forwards;		
}

#header-back.sp.activate #global-nav.side li:nth-child(5) {
    animation: nav-side-in .5s ease-in-out .8s forwards;		
}

@-webkit-keyframes nav-side-in {
    from {
	opacity:0;
	transform:translateX(0);
    }	
    to {
	opacity:1;
	transform:translateX(20px);	
    }
}

@keyframes nav-side-in {
    from {
	opacity:0;
	transform:translateX(0);
    }	
    to {
	opacity:1;
	transform:translateX(20px);	
    }	
}


#header-back.sp #nav-wrap {
	position:fixed;
	top:0;
	right:-200px;
	height:100vh;
	width:200px;
    background-color: rgba(255, 255, 255, 0.9);
	z-index:3;
	transition:all .3s ease;
}

#header-back.sp #nav-wrap.activate {
	transform:translateX(-200px);
}

/*----------------------------------------------------------------*/
/* フッター */
/*----------------------------------------------------------------*/
footer {
	padding:0 0 21px;
	clear:both;
}

/* Copyright */
.copyright {
	display:block;
	text-align:center;
    margin:0 auto;
	font-weight:500;
	font-size:11px;
	font-size:1.1rem;
	line-height:1;
}

/* ページの先頭へ */
#pagetop {
    width:54px;
	height:54px;
	margin:0 auto;
}

#pagetop a {
	line-height:1;
	display:block;
	position:relative;
	height:100%;	
}

#pagetop span {
	display:block;
    width: 25px;
    height: 2px;
    background: #111;

-webkit-transition: all .25s cubic-bezier(0.750, 0.250, 0.535, 0.930); 
   -moz-transition: all .25s cubic-bezier(0.750, 0.250, 0.535, 0.930); 
     -o-transition: all .25s cubic-bezier(0.750, 0.250, 0.535, 0.930); 
        transition: all .25s cubic-bezier(0.750, 0.250, 0.535, 0.930); /* custom */
}

#pagetop-bar-first {
	position:absolute;
	top:20px;
	left:4px;
    -webkit-transform: rotate(-30deg);		
    transform: rotate(-30deg);
}

#pagetop-bar-second {
	position:absolute;
	top:20px;
	right:4px;
    -webkit-transform: rotate(30deg);		
    transform: rotate(30deg);	
}

#pagetop span#pagetop-bar-third {
	opacity:0;
	position:absolute;
	bottom:0;
	left:0;
	right:0;
	margin:0 auto;
    width: 2px;
    height: 30px;
    -webkit-transform: rotate(90deg);	
    transform: rotate(90deg);		
}

/*----------------------------------------------------------------*/
/*media Queries / min-width: 600px */
/*----------------------------------------------------------------*/
@media only screen and (min-width: 600px) {
/*----------------------------------------------------------------*/
/* レイアウト */
/*----------------------------------------------------------------*/
p {
	font-size:15px;
    font-size: 1.5rem;
	line-height:2.0;
}

section > p:last-child {
	margin-bottom:0;
}

ul li,
ol li {
	font-size:16px;	
    font-size: 1.6rem;
}

a:hover img {
    -moz-opacity:0.8;
    opacity:0.8;
    filter: alpha(opacity=80);
}

.img-r {
	margin:0 0 21px 21px !important;
	width: auto;
}

/*----------------------------------------------------------------*/	
/* パンくず */
/*----------------------------------------------------------------*/  
#breadcrumbs {
	display:block;
}

}

/*----------------------------------------------------------------*/
/*media Queries / min-width: 960px */
/*----------------------------------------------------------------*/
@media only screen and (min-width: 960px) {
/*----------------------------------------------------------------*/
/* 共通 */
/*----------------------------------------------------------------*/
.pc-hide {
	display:none !important;
}

.sp-hide {
	display: inline;
}

/*----------------------------------------------------------------*/
/* リンク */
/*----------------------------------------------------------------*/
a:hover { text-decoration: underline; color:#444;}

#home #global-nav a:hover { text-decoration: none; color:#888;}
#home #header-back.fix #global-nav a:hover { color: inherit;}

/*----------------------------------------------------------------*/
/* リンクボタン */
/*----------------------------------------------------------------*/
a.btn:hover {
    color:#fff;
}

a.btn:hover::after {
	top: 0;
    left: 0;
    background-color: #111;
}

/*----------------------------------------------------------------*/
/* レイアウト */
/*----------------------------------------------------------------*/
.content .inner,
#home .content .inner {
	padding:144px 0 55px;
}

.inner-content {
	clear:both;
	float:right;
	width:60%;
}

/*----------------------------------------------------------------*/
/* Title サイズ */
/*----------------------------------------------------------------*/
h1 {
	font-size:34px;
	font-size:3.4rem;
	margin:0;
	text-align: left;
	line-height: 1.5;
}
	
h2 {
	font-size:34px;
	font-size:3.4rem;
	margin:0 0 55px;
}

h3 {
	font-size:21px;
	font-size:2.1rem;
}


/*----------------------------------------------------------------*/
/* スクロールボタン */
/*----------------------------------------------------------------*/
#scroll a {
	display:block;
}

#scroll a:hover #scroll-bar,
#scroll.down #scroll-bar {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
}


#scroll a:hover #scroll-bar-first,
#scroll.down #scroll-bar-first {
	opacity:1;	
	bottom:13px;
	transform:rotate(-45deg);
}

#scroll a:hover #scroll-bar-second,
#scroll.down #scroll-bar-second {
	opacity:1;	
	bottom:13px;
	transform:rotate(45deg);	
}

#scroll a:hover #scroll-bar-third {
	position:absolute;
	top:10px;
    -webkit-transform: rotate(0deg);	
    transform: rotate(0deg);
	background:#111;	
}

/*----------------------------------------------------------------*/
/* グローバルナビゲーション */
/*----------------------------------------------------------------*/  
#global-nav li {
	margin:0 0 20px;
}

#home #global-nav ul {
	position:relative;
}

#home #global-nav li {
	position:relative;	
}

/*----------------------------------------------------------------*/
/* グローバルナビゲーション HOME */
/*----------------------------------------------------------------*/  
#home #global-nav {
	top:60%;
}

/*----------------------------------------------------------------*/
/* ヘッダー　ナビゲーション開閉ボタン */
/*----------------------------------------------------------------*/
#nav-control {
    display: none !important;
}

/*----------------------------------------------------------------*/
/* ヘッダ　固定 */
/*----------------------------------------------------------------*/
#global-nav.side {
	display: block;
}

#header-back {	
}

#header-back.fix {
	position:fixed;
	width:100%;
	/*background:#111;*/
	opacity:.9;
	z-index:3;
	top:0;
	left:0;
	background:#fff;
}

#header-back.fix .inner {
	position:relative;
	height:45px;
	width:100%;
	transition: none;
}

#header-back.fix h1 {
	font-size:24px;
	font-size:2.4rem;
	position: absolute;
	top:10px;
	left:34px;
	opacity:1;
}

#header-back.fix h1 span {
	display:inline;
    font-size:24px;
	font-size:2.4rem;
	margin:0;
}

#header-back.fix #global-nav {
	position:absolute;
	right:34px;
	top:13px;
	width:fit-content;
	left:auto;
}

#header-back.fix #global-nav li {
	float:left;
	font-size:15px;
	font-size:1.5rem;
	opacity:1;
	margin:0 34px 0 0;
	transition:none;
	position:inherit;
}

#header-back.fix #global-nav li:last-child {
	margin:0;
}

#home #header-back.fix #global-nav li:nth-child(1),
#home #header-back.fix #global-nav li:nth-child(2),
#home #header-back.fix #global-nav li:nth-child(3),
#home #header-back.fix #global-nav li:nth-child(4),
#home #header-back.fix #global-nav li:nth-child(5) {
	animation:none;	
}

#home #header-back.fix #global-nav li:hover {
	transform: none;
}

/* アンダーライン */
#header-back.fix #global-nav li a:before,
#header-back.fix #global-nav li a:after {		
  bottom:-0.5em;
}

#header-back.fix #global-nav li a:hover:before,
#header-back.fix #global-nav li a:hover:after {
  width: 50%;
}

/*----------------------------------------------------------------*/
/* ヘッダ　固定 HOME */
/*----------------------------------------------------------------*/ 
#home #header-back.fix {
	top:-45px;
}

/*----------------------------------------------------------------*/
/* フッター */
/*----------------------------------------------------------------*/
footer {
	padding:0 0 34px;
	position:relative;
	clear:both;

  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;

  /* 左右中央寄せ */
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;		
}

footer .inner {
	width:70%;
	margin:o auto;
}

/* Copyright */
.copyright {
	font-size:12px;
	font-size:1.2rem;
	text-align:left;
}

#pagetop {
	position: fixed;
	bottom:0;
	right:13px;
	margin:0;	
}

#pagetop a:hover #pagetop-bar-first {
	width: 20px;
	position:absolute;
	top:15px;
	left:2px;
    -webkit-transform: rotate(-45deg) translateX(12px);		
    transform: rotate(-45deg) translateX(12px);	
}

#pagetop a:hover #pagetop-bar-second {
	width: 20px;	
	position:absolute;
	top:15px;
	right:2px;
    -webkit-transform: rotate(45deg) translateX(-12px);	
    transform: rotate(45deg) translateX(-12px);	
}

#pagetop a:hover #pagetop-bar-third {
	opacity:1;
	position:absolute;
	bottom:10px;
    -webkit-transform: rotate(0deg);	
    transform: rotate(0deg);
	background:#111;	
}

}

/*----------------------------------------------------------------*/
/*media Queries / min-width: 1280px */
/*----------------------------------------------------------------*/
@media only screen and (min-width: 1280px) {
/*----------------------------------------------------------------*/
/* 共通 */
/*----------------------------------------------------------------*/
.content .inner {
	width:80vw;
}

}

/* EOF */