@charset "utf-8";

/* ================================

	株式会社10s
	service.css

=================================== */

/* font
----------------------------------- */
@font-face {
  font-family: 'Noto Sans Japanese';
  font-style: normal;
  font-weight: 100;
  src: url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Thin.woff2) format('woff2'),
       url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Thin.woff) format('woff'),
       url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Thin.otf) format('opentype');
}
@font-face {
   font-family: 'Noto Sans Japanese';
   font-style: normal;
   font-weight: 300;
   src: url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-DemiLight.woff2) format('woff2'),
        url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-DemiLight.woff) format('woff'),
        url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-DemiLight.otf) format('opentype');
}



/* clearfix
----------------------------------- */
.clearfix:after{
	content: ".";
	display: block;
	height: 0;
	font-size:0;
	clear: both;
	visibility:hidden;
}
.clearfix {display: inline-block;}
* html .clearfix {height: 1%;}
.clearfix {display:block;}
.clear { clear: both; }


/* base
----------------------------------- */
html,body { height: 100%; }
body {
	background: #fff;
	color: #fff;
	letter-spacing: 0.05em;
}
#wrap {
	position: relative;
	overflow: hidden;
}
a, a:hover, a:visited {
	color: #174f3b;
	text-decoration: none;
}
.topArea {
    position: fixed;
    width: 100%;
    z-index: -1;
}
h1 {display: none;}
.scroll {
    position: absolute;
    bottom: 80px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    font-family: 'Ubuntu Condensed', sans-serif;
    letter-spacing: 0.1em;
    font-size: 20px;
}
.scroll:after {
    content: '';
    position: absolute;
    left: 50%;
    width: 1px;
    height: 1px;
    background: #174f3b;
    animation: down 2s ease-out;
	animation-iteration-count: infinite;
	opacity: 0;
}
/* ロゴアニメーション */
#opening {
	position: fixed;
    height: 100%;
    z-index: 10;
}
#opening svg {display: none;}
.anime #opening svg {
	display: block;
	width: 100%;
/*    stroke:#174f3b;*/
	fill:transparent;
	stroke-width:1;
}


/*
.anime #opening svg .outSide {
	stroke-DASHarray: 400;
	stroke-DASHoffset:1000;
	stroke-opacity: 0;
	-moz-animation:lineAnime 2s linear .5s forwards;
	-webkit-animation:lineAnime 2s linear .5s forwards;
	animation:lineAnime 2s linear .5s forwards;
}
@keyframes lineAnime{
	0%  {stroke-DASHoffset:1000;fill:transparent;}
	50% {stroke-DASHoffset:500;fill:transparent;stroke-opacity: 1;}
	100%{stroke-DASHoffset:0;fill:#174f3b;stroke-opacity:0;}
}
@-webkit-keyframes lineAnime{
	0%  {stroke-DASHoffset:1000;fill:transparent;}
	50% {stroke-DASHoffset:500;fill:transparent;stroke-opacity: 1;}
	100%{stroke-DASHoffset:0;fill:#174f3b;stroke-opacity:0;}
}
.anime #opening svg .inSide {
	stroke-DASHarray: 1400;
	stroke-DASHoffset:1000;
	stroke-opacity: 0;
	-moz-animation:lineAnime2 2s linear 1s forwards;
	-webkit-animation:lineAnime2 2s linear 1s forwards;
	animation:lineAnime2 2s linear 1s forwards;
}
@keyframes lineAnime2{
	0%  {stroke-DASHoffset:1000;fill:transparent;stroke-opacity: 0;}
	50% {stroke-DASHoffset:500;fill:transparent;stroke-opacity: 1;}
	100%{stroke-DASHoffset:0;fill:#174f3b;stroke-opacity:0;}
}
@-webkit-keyframes lineAnime2{
	0%  {stroke-DASHoffset:1000;fill:transparent;stroke-opacity: 0;}
	50% {stroke-DASHoffset:500;fill:transparent;stroke-opacity: 1;}
	100%{stroke-DASHoffset:0;fill:#174f3b;stroke-opacity:0;}
}
*/

/* content
----------------------------------- */
copy {
	display: block;
    position: absolute;
    bottom: 20px;
    text-align: center;
    width: 100%;
    opacity: 0.5;
    font-weight: 100;
    z-index: 100;
}
.show copy {display: block;}
#wrap {display: none;}
#container {background:rgba(23,79,59,0.95);}
h2 {
    font-family: 'Ubuntu Condensed', sans-serif;
    letter-spacing: 0.1em;
    position: relative;
}
h2:after {
	    content: '';
	    position: absolute;
	    width: 0%;
	    height: 1px;
	    background: #fff;
	    transition: 1s;
	    left: 0;
	    bottom: -16px;
	}
.show h2:after, h2.run:after {width: 100%;}
.block {padding-bottom: 50px;}
.about .data {width: 100%;opacity: 0;transition:1s;}
.about .data.in{opacity: 1;}
.about .data th,.about .data td {padding: 0 0 10px;}
.about .data th {
    vertical-align: top;
    text-align: left;
}
.links .list {display: block; margin: 0 auto;}







/* =================================

for PC
 
=================================== */
@media only screen and (min-width: 768px){
	.sp{display: none!important;}
	body {
		font-family: 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN','Noto Sans Japanese',メイリオ,'ＭＳ Ｐゴシック',Meiryo,'MS P Gothic',sans-serif;
		font-size: 14px;
		font-weight: 300;
		line-height: 1.7em;
		word-wrap:break-word;
	}
	#wrap {
		min-width: 860px;
		height: 100%;
	}
	.topArea {
	    background-size: 35% auto;
	    height: 100%;
    	transition:1s;
    	background: none;
	}
	.show .topArea {transform: scale(.9); text-align: center;}
	copy {display: none; font-size: 11px;}
	.scroll {
	    bottom: 10%;
	    font-size: 20px;
	}
	@keyframes down {
	    0%   { height: 1px; opacity: 0; top: 20px;}
	    50%   { opacity: 0.5;}
	    100% { height: 100px; opacity:0; top:100px;}
	}
	.scroll a {pointer-events:none;}
	#opening {
	    position: fixed;
	    transition: 1s;
	    z-index: -1;
	    position: absolute;
	    top: 50%;
	    left: 50%;
	    -webkit-transform: translate(-50%,-50%);
	    -moz-transform: translate(-50%,-50%);
	    transform: translate(-50%,-50%);

	}
	#opening .svgWrap {width: 100%;
	
		    
	    display:-webkit-box;
display:-ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
align-items: center;
justify-content: center;
	}
	#opening svg {transition:1s;}
	.animeEnd svg {display: block;}
	.show #opening svg {transform: scale(.9);}
	#container {
	    position: absolute;
	    display: table;
	    width: 100%;
	    height: 100%;
	    transition: .5s;
	    transform: scale(.95);
	    opacity: 0;
	    z-index: -1;
	}
	#container .innerH {
		display: table-cell;
	    height: 100%;
	    vertical-align: middle;
	}
	#container .innerW {
	    margin: 0 auto;
	    box-sizing: border-box;
	    -webkit-box-sizing: border-box;
	    width: 800px;
	    padding: 40px 30px;
	}
	.show #container {
	    transform: scale(1);
	    opacity: 1;
	    z-index: 1;
	}
	.block:last-child {padding-bottom: 0;}
	h2 {
	    font-size: 32px;
	    margin: 0 0 30px;
	}
	.about .data th { width: 120px;}
	.about .data .address i {padding-left: 8px;font-size: 18px;}
	.links .list {width: 700px; padding: 14px 0 0 ;}
	.links .list tr {width: 100%;}
	.links .list td.in{opacity: 1;}
	.links .list td a {display: block; padding: 0 5px;}
	.links .list tr,.links .list tbody {display: block;}
	.links .list td {
		display: inline-block;
		opacity: 0;
		width: 24%;
		transition:1s;
	}
	.links .list td.linkTyms {right: -10px;}
	.links .list td img {
		width: 100%;
		background: no-repeat center ;
		background-size: contain;
	}
	.links .list td.linkProject img {background-image: url(../img/tyms_logocT38UE7N.png);}
	.close {
		width: 50px;
		height: 50px;
		cursor: pointer;
	    position: fixed!important;
	    right: 40px;
	    top: 30px;
	    z-index: 10;
	    opacity: 0;
	    transition: .5s;
	}
	.show .close{opacity: 1;}
	.close:before,
	.close:after {
	    content: '';
	    display: block;
	    width: 50px;
	    height: 2px;
	    background: #fff;
	    top: 25px;
	    position: absolute;

	}
	.close:before { -webkit-transform: rotate(45deg); }
	.close:after { -webkit-transform: rotate(-45deg); }
	.ringElm {position: relative;}
	.ringElm .ring{
		background: url(../img/ph_hexagonWs28hLyK.png) no-repeat;
		background-size: 100% auto;
		position: absolute;
		z-index:-1;
		height: 70px;
		width: 70px;
		top: 0px;
		left: -10px;
		opacity: 0;
	}
	.ringElm:hover .ring,
	.address:hover .ring {
	   	animation: pulsate 1s ease-out;
		animation-iteration-count: infinite;
	}
	@keyframes pulsate {
	    0%   { transform: scale(1, 1); }
	    50%  { opacity: 0.1; }
	    100% { transform: scale(2, 2); opacity: 0.0; }
	}
	.links .ringElm .ring {
	    top: 6px;
	    left: 50px;
	}
	.address .ring {
	    height: 30px;
	    width: 30px;
	    top: -7px;
	    left: -1px;
	}
}

/* =================================

for SP
 
=================================== */
@media only screen and (max-width: 767px){
	.pc {display: none!important;}
	.sp {display: block;}
	body {
		font-family: sans-serif;
		-webkit-text-size-adjust: 100%;
		font-size: 13px;
		text-justify: inter-ideograph;
		line-height: 1.5em;
	}
	img {max-width: 100%;}
	.topArea {
	background-size: 50% auto;
	z-index: -1;
/*	background: url(../img/ph_logoWs28hLyK.png) no-repeat center;*/
	}
	.moved .topArea {transform: scale(.8);}
	.scroll {font-size: 16px;bottom: 50px;}
    .scroll:after {top: 26px;}
	@keyframes down {
	    0%   { height: 0px; opacity: 0; top: 20px;}
	    50%   { opacity: 0.5;}
	    100% { height: 40px; opacity:0; top: 40px;}
	}
	#opening {
	    position: fixed;
	    transition: 1s;
	    z-index: -1;
	    position: absolute;
	    top: 50%;
	    left: 50%;
	    -webkit-transform: translate(-50%,-50%);
	    -moz-transform: translate(-50%,-50%);
	    transform: translate(-50%,-50%);%);
	    transform: translate(-50%,-50%);
	}

	#opening .svgWrap {width: 100%;}
	#container {
		background: none;
		display: none;
	}
	.innerH {
		padding: 35px 5% 60px;
		background: rgba(23,79,59,0.95);
	}
	h2 {font-size: 26px; margin: 0 0 40px;}
	h2:after {bottom: -20px; background: rgba(255,255,255,0.5);}
	.about .data th {width:6.5em;}
	.about .data .address i {padding-left: 1px;font-size: 16px;}
	.close {display: none;}
	.btns .spList li a {
		display: block;
		padding: 28px 0;
		position: relative;
		text-indent: -9999px;
	}
	.btns .spList a {
		background: no-repeat center ;
		background-size: 70px auto ;
	}
	.btns .spList .linkProject a {background-image: url(../img/tyms_logocT38UE7N.png);}
    copy {font-size: 9px;}

}