@charset "UTF-8";

/*=======================================
デスクトップCSS

■■■目次■■■
共通事項
ヘッダー
ページタイトル
メイン（トップ）
お問い合わせ先
フッター
=======================================*/

/*──────────────────────────
共通事項
──────────────────────────*/
/*　基本文字サイズ　*/
body { font-size: 1.05em; }

/*　基本レイアウト　*/
.w18, .w15, .w12, .w10, .w9 { box-sizing: border-box; }
.w18 { max-width: 1800px; margin: 0 50px; }
.w15 { max-width: 1500px; margin: 0 50px; }
.w12 { max-width: 1200px; margin: 0 50px; }
.w10 { max-width: 1000px; margin: 0 50px; }
.w9 { max-width: 900px; margin: 0 100px; }

@media screen and (min-width: 1115px) {
	.w9, .w10 { margin: 0 auto; }
}
@media screen and (min-width: 1315px) {
	.w12 { margin: 0 auto; }
}
@media screen and (min-width: 1601px) {
	.w15 { margin: 0 auto; }
}
@media screen and (min-width: 1801px) {
	.w18 { margin: 0 auto; }
}
main section {
	padding: 120px 0 150px 0;
}

/*　フォント（英字）*/
.hs1 span, 
#top .role li::after, 
#top .news time::after, 
#top .support .num {
	font-family: Roboto, sans-serif;
	font-weight: 700;
}

/*　改行指定（<wbr>と組合せ）*/
.wbr {
	word-break: keep-all;
	overflow-wrap: break-word;
}

/*　横ラインの大見出し　*/
.hs1 {
	position: relative;
	margin-bottom: 50px;
	padding-bottom: 2.6em;
	text-align: right;	/*右寄せの場合*/
	text-align: left;	/*左寄せの場合*/
	text-align: center;	/*中央寄せの場合*/
	overflow: hidden;
}
.hs1 b {
	position: absolute;
	top: 2.7em;
	left: 0;
	right: 0;
	margin: auto;
	padding: 0 0.2em;
	font-size: 1.5em;
	font-weight: 900;
	color: #a03;
	line-height: 1em;
	display: block;
}
.hs1 span {
	position: relative;
	padding: 0 0 0 15px;	/*右寄せの場合*/
	padding: 0 15px 0 0;	/*左寄せの場合*/
	padding: 0 15px;	/*中央寄せの場合*/
	/*書体は基本設定で指定*/
	font-size: 3.6em;
	color: #222;
	line-height: 1em;
	display: inline-block;
	-webkit-animation: fadeInJS 3s ease; animation: fadeInJS 3s ease;
}
.hs1 span::before, .hs1 span::after {
	content: "";
	position: absolute;
	top: 0.54em;
	width: 100px;
	border-top: 2px solid #222;
	display: block;
}
.hs1 span::before {
	right: 100%;
}
.hs1 span::after {
	left: 100%;
}
.hs1 i {
	position: absolute;
	margin-top: -2em;
}
/*　横ラインの大見出し（ラインのアニメーション）*/
.js .hs1 span, 
.js .hs1 span::before, .js .hs1 span::after {
	opacity: 0;
	-webkit-transition: all 0s ease; transition: all 0s ease;
}
.js .hs1 span {
	-webkit-transform: translate(0, 30px); transform: translate(0, 30px);
}
.js .hs1 span::before, .js .hs1 span::after {
	width: 0;
}
.js .hs1.disp span {	/*JSでdisp付与*/
	opacity: 1;
	-webkit-transform: translate(0, 0); transform: translate(0, 0);
	-webkit-transition: all 0.4s ease 0.4s; transition: all 0.4s ease 0.4s;
}
.js .hs1.disp span::before, .js .hs1.disp span::after {
	width: 100px;
	opacity: 1;
	-webkit-transition: width 0.8s ease 0.8s; transition: width 0.8s ease 0.8s;
}

/*　中見出し　*/
.fs1, .fs2, .fs3, .fs4, .fs5 {
	font-weight: 900;
	line-height: 1.3em;
	font-feature-settings: "palt" 1;
}
.fs1 { font-size: 2.5em; }	/*48pt*/
.fs2 { font-size: 1.9em; }	/*36pt*/
.fs3 { font-size: 1.5em; }	/*28pt*/
.fs4 { font-size: 1.25em; }	/*24pt*/
.fs5 { font-size: 1.1em; }	/*21pt*/

@media screen and (min-width: 1201px) {
	.fs1 { font-size: 2.8em; }
	.fs2 { font-size: 2.1em; }
	.fs3 { font-size: 1.65em; }
	.fs4 { font-size: 1.4em; }
	.fs5 { font-size: 1.2em; }
}

/*　パララックス背景　*/
.parallax-wrap {	/*JSでparallax-wrap生成*/
	position: absolute;
	z-index: -10;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	clip: rect(0, auto, auto, 0);
	overflow: hidden;
	-webkit-overflow-scrolling: touch;	/*滑らか効果*/
}
.parallax {	/*JSでparallax生成*/
	position: fixed;
	/*topとheightはJSで計算*/
	left: 0;
	width: 100%;
	-webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);	/*滑らか効果*/
}
.parallax i {
	display: none;
}
.bg1, .bg1 .parallax { background: #eee url(../image/common/pic-bgsec01.jpg) repeat; background-size: 1400px auto; }

/*　ボタン　*/
.btn1, .btn2 {
	position: relative;
	box-sizing: border-box;
 	min-width: 350px;
	padding: 1.3em 3em 1.4em 2em;
	background: #a03;
	border-radius: 6em;
	font-size: 1.1em;
	font-weight: 900;
	color: #fff;
	line-height: 1.2em;
	text-align: left;
	text-decoration: none;
	display: inline-block;
	-webkit-transition: all 0.2s ease; transition: all 0.2s ease;
}
.btn2 {
 	min-width: 300px;
	padding: 1.1em 3em 1.2em 2em;
	font-size: 1em;
}
.btn1::after, .btn2::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 30px;
	width: 7px;
	height: 7px;
	border-top: 1px solid #fff;
	border-right: 1px solid #fff;
	display: block;
	-webkit-transform: rotate(45deg) translate(0, -60%); transform: rotate(45deg) translate(0, -60%);
	-webkit-transition: all 0.2s ease; transition: all 0.2s ease;
}
.btn1:hover, .btn2:hover {
	background-color: #222;
	color: #fff;
	text-decoration: none;
}
.btn1:hover::after, .btn2:hover::after {
	right: 25px;
}

/*　＞矢印　*/
.ar {
	position: relative;
}
.ar::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 20px;
	width: 6px;
	height: 6px;
	border-top: 1px solid #222;
	border-right: 1px solid #222;
	display: block;
	-webkit-transform: rotate(45deg) translate(0, -50%); transform: rotate(45deg) translate(0, -50%);
	transition: all 0.3s ease;
}
.ar:hover::after {
	right: 17px;
}

/*　＞矢印（逆向き）
.ar.rvs::after {
	left: 20px;
	right: auto;
	-webkit-transform: rotate(-135deg) translate(0, 70%); transform: rotate(-135deg) translate(0, 70%);
}
.ar.rvs:hover::after {
	left: 17px;
}
*/

/*　●印リスト　*/
.list li {
	margin-top: 0.5em;
	padding-left: 0.9em;
	text-indent: -0.9em;
}
.list li::before {
	content: "●";
	position: relative;
	top: -0.25em;
	font-size: 0.7em;
	margin-right: 0.3em;
}

/*　任意文字リスト　*/
[data-list] {
	position: relative;
	margin: 0.5em 0 0 1em;
	line-height: 1.3em;
	display: block;
}
[data-list]::before {
	content: attr(data-list);
	position: absolute;
	left: -1em;
}

/*　パンくずリスト　*/
.pankuzu {	/*JSでpankuzu生成*/
	padding: 10px 0;
}
.pankuzu ol {
	display: table;
}	
.pankuzu li {
	vertical-align: middle;
	display: table-cell;
}
.pankuzu li a {
	margin-left: 3em;
	padding: 0.7em 0;
	font-size: 0.95em;
	color: #222;
	line-height: 1.2em;
	display: block;
}
.pankuzu li:nth-child(1) a {
	margin: 0 0.05em 0.05em 0;	/*角丸の欠け防止*/
	padding: 0.4em 1em 0.5em 45px;
	background: #222 url(../image/common/icn-nav01-wh.png) 15px 45% no-repeat;
	background-size: 22px auto;
	border-radius: 2em;
	color: #fff;
}
.pankuzu li:nth-child(1) a:hover {
	opacity: 0.9;
	text-decoration: none;
}
.pankuzu li:nth-child(2) a {
	white-space: nowrap;
	pointer-events: none;
}
.pankuzu li:nth-child(3) a {
	padding: 0;

	/*2行まで表示*/
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	
	/*未対応ブラウザ向け2行まで表示*/
	max-height: 2.4em;
}
.pankuzu li {
	position: relative;
}
.pankuzu li::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 1em;
	width: 0.4em;
	height: 0.4em;
	border-top: solid 1px #222;
	border-right: solid 1px #222;
	-webkit-transform: rotate(45deg) translate(0, -0.2em); transform: rotate(45deg) translate(0, -0.2em);
}
.pankuzu li:nth-child(1)::before {
	display: none;
}


/*──────────────────────────
ヘッダー
──────────────────────────*/
header {
	position: relative;
}

/*　グラデの幾何学模様　*/
header, 
header::before {
	width: 100%;
	height: 750px;
}
header {
	background: #eee url(../image/common/pic-bgsec01.jpg);
	background-size: 1280px 784px;
	border-bottom: 120px solid #a03;
}
header::before {
	content: "";
	position: absolute;
	background: -moz-linear-gradient(80deg, rgba(50,150,150, 1) 0%, rgba(255,255,255,1) 25%, rgba(255,190,220,1) 50%, rgba(0,255,255,1) 75%, rgba(220,255,180,1) 100%) 0 50%;
	background: -webkit-linear-gradient(80deg, rgba(50,150,150,1) 0%, rgba(255,255,255,1) 25%, rgba(255,190,220,1) 50%, rgba(0,255,255,1) 75%, rgba(220,255,180,1) 100%) 0 50%;
	background: linear-gradient(80deg, rgba(50,150,150,1) 0%, rgba(255,255,255,1) 25%, rgba(255,190,220,1) 50%, rgba(0,255,255,1) 75%, rgba(220,255,180,1) 100%) 0 50%;
	background-size: 190% 100%;
	opacity: 0.25;
}
@media screen and (min-width: 1401px) {
	header, 
	header::before {
		height: 800px;
	}
}

/*　グラデの幾何学模様（斜めスクロール／色移動）*/
header {
	-webkit-animation: geoscroll 100s linear 2s infinite; animation: geoscroll 100s linear 2s infinite;
	will-change: animation;	/*なめらかな動作に期待*/
}
@-webkit-keyframes geoscroll {
	0% {background-position: 0 0;}
	100% {background-position: 1280px -784px;}
}
@keyframes geoscroll {
	0% {background-position: 0 0;}
	100% {background-position: 1280px -784px;}
}
header::before {
	-webkit-animation: grad 15s ease 2s infinite; animation: grad 15s ease 2s infinite;
}
@-webkit-keyframes grad {
	0%{background-position: 0 50%;}
	50%{background-position: 100% 50%;}
	100%{background-position: 0 50%;}
}
@keyframes grad {
	0%{background-position: 0 50%;}
	50%{background-position: 100% 50%;}
	100%{background-position: 0 50%;}
}

/*　街並み　*/
#top .townscape {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 280px;
	overflow: hidden;
}
#top .townscape .slider1 {
	height: 280px;
	background: url(../image/top/pic-townscape01.png) repeat-x;
	background-size: auto 280px;
}
#top .townscape .slider1 .img1, 
#top .townscape .slider1 .img2 {
	display: none;
}

/*　街並み（横スクロール）*/
#top .townscape .slider1, 
#top .townscape .slider1 .img1, 
#top .townscape .slider1 .img2 {
	-webkit-animation: townscroll 300s linear 2s infinite; animation: townscroll 300s linear 2s infinite;
	will-change: animation;	/*なめらかな動作に期待*/
}
@-webkit-keyframes townscroll {
	0% {background-position: 0 0;}
	100% {background-position: -1400px 0;}
}
@keyframes townscroll {
	0% {background-position: 0 0;}
	100% {background-position: -1400px 0;}
}

/*　街並み（フェード切換え）*/
#top.js .slider1.slick-initialized {	/*slick.js読込完了時にslick-initialized付与*/
	height: auto;
	background: none;
}
#top.js .slider1 .img1, 
#top.js .slider1 .img2 {
	width: 100%;
	height: 0;
	padding-top: 280px;
	background-repeat: repeat-x;
	background-size: auto 280px;
	overflow: hidden;
	display: block;
	-webkit-backface-visibility: hidden; backface-visibility: hidden;	/*チラつき防止*/
}
#top.js .slider1.slick-initialized .img1 { background-image: url(../image/top/pic-townscape01.png); }
#top.js .slider1.slick-initialized .img2 { background-image: url(../image/top/pic-townscape02.png); }

/*　街並み（通常より早くフェードアウト）*/
#top.js .slider1 .inactive {	/*slick.jsでinactive付与*/
	opacity: 0 !important;
	-webkit-transition: opacity 2s ease; transition: opacity 2s ease;	/*slick.jsのspeedより早い秒数*/
}

/*　ロゴ・お問い合わせ　*/
header .hdinfo {
	position: relative;
}
header .hdinfo a, 
header .hdinfo .btn1 {
	position: absolute;
	z-index: 1;
	width: 250px;
}
header .hdinfo a {
	top: 45px;
	left: 0;
	height: 0;
	padding-top: 45px;
	background: url(../image/common/pic-logo01.png) no-repeat;
	background-size: contain;
	overflow: hidden;
	display: inline-block;
}
header .hdinfo .btn1 {
	top: 35px;
	right: 0;
	min-width: 250px;
	background: #222 url(../image/common/icn-mail-bk.png) 0 50% no-repeat;
	background-size: 85px auto;
	opacity: 0.2;
	pointer-events: none;
}
.js header .hdinfo .btn1 {
	opacity: 1;
	pointer-events: auto;
}
header .hdinfo .btn1:hover {
	background-color: #a03;
	background-image: url(../image/common/icn-mail-rd.png);
}
@media screen and (min-width: 1401px) {
	header .hdinfo a {
		left: 3%;
	}
	header .hdinfo .btn1 {
		right: 2%;
	}
}

/*　キャッチコピー　*/
header .copy {
	position: absolute;
	z-index: 1;
	top: 220px;
	left: 5%;
	width: auto;
	height: auto;
	text-align: left;
}
header .copy strong {
	font-size: 2.2em;
	font-weight: 900;
	display: inline-block;
}
header .copy b {
	margin-bottom: 0.2em;
	font-family: Roboto, sans-serif;
	font-weight: 700;
	font-size: 2em;
	line-height: 1em;
	-webkit-text-stroke: 1px #222;
	display: block;
}
header .copy b + br {
	display: none;
}
header .copy em {
	font-weight: 900;
	color: #a03;
}
@media screen and (min-width: 1401px) {
	header .copy {
		left: 7%;
	}
}

/*　キャッチコピー（アニメーション）*/
header .typ {
	-webkit-animation: fadeInJS 6s ease forwards; animation: fadeInJS 6s ease forwards;
}
.js header {
	overflow: hidden;	/*はみ出し防止*/
}
.js header .typ, 
.js header .typ span {
	opacity: 0;
	-webkit-animation: none; animation: none;
}
.js header .typ.disp {	/*JSでdisp付与*/
	opacity: 1;
}
.js header .typ.disp span {	/*JSでdisp付与*/
	display: inline-block;
	-webkit-animation: typingText 1.5s linear forwards; animation: typingText 1.5s linear forwards;
}
.js header .typ.disp2 {	/*JSで30s後にdisp2付与*/
	opacity: 1; 
}
.js header .typ.disp2 span {
	opacity: 1;
	display: inline-block;
	-webkit-animation: wavingText 30s ease infinite; animation: wavingText 30s ease infinite;
}


/*──────────────────────────
ページタイトル
──────────────────────────*/
#top .pagetitle {
	position: relative;
	padding: 120px 0 90px 0;
}
#top .trape {
	position: absolute;
	z-index: 1;
	top: -11em;
	left: 0;
	right: 0;
	box-sizing: border-box;
	width: 750px;
	margin: auto;
	padding: 2em 50px;
	background: #fff;
	-webkit-clip-path: polygon(5% 0, 95% 0, 100% 100%, 0 100%);
	clip-path: polygon(5% 0, 95% 0, 100% 100%, 0 100%);
}
#top .trape h1 {
	font-weight: 900;
	line-height: 1.4em;
	text-align: center;
}
#top .trape h1 b {
	font-size: 1.3em;
}
#top .trape h1 b span {
	color: #a03;
}
#top .trape h1 rt {
	font-size: 0.4em;
	letter-spacing: 0.5em;
	-webkit-transform: translate(0, 0.5em);
	transform: translate(0, 0.5em);
}
@media screen and (min-width: 1101px) {
	#top .pagetitle {
		padding-bottom: 150px;
	}
}
@media screen and (min-width: 1201px) {
	#top .trape {
		top: -12em;
		width: 850px;
	}
}
@media screen and (min-width: 1501px) {
	#top .trape h1 {
		font-size: 2.3em;
	}
	#top .trape {
		top: -13em;
		width: 950px;
	}
}


/*──────────────────────────
メイン（トップ）
──────────────────────────*/
/*　お客様の課題　*/
#top .problem {
	text-align: center;
}
#top .problem ul {
	letter-spacing: -0.4em;
	display: inline;
}
#top.js .problem ul {
	display: block;
}
#top .problem li {
	width: 240px;
	margin: 0 10px 30px 10px;
	letter-spacing: normal;
	vertical-align: top;
	display: inline-block;
}
#top .problem li div {
	box-sizing: border-box;
	width: 100%;
	padding: 1em 1.3em 1.1em 1.3em;
	background-color: #fff;
	background-position: 100% 100%;
	background-repeat: no-repeat;
	background-size: auto 70px;
	border: 3px solid #222;
	border-radius: 10px;
	display: table;
}
#top .problem li:nth-child(1) div, #top .problem li:nth-child(5) div, #top .problem li:nth-child(9) div { background-image: url(../image/common/icn-problem01.png); }
#top .problem li:nth-child(2) div, #top .problem li:nth-child(6) div, #top .problem li:nth-child(10) div { background-image: url(../image/common/icn-problem02.png); }
#top .problem li:nth-child(3) div, #top .problem li:nth-child(7) div, #top .problem li:nth-child(11) div { background-image: url(../image/common/icn-problem03.png); }
#top .problem li:nth-child(4) div, #top .problem li:nth-child(8) div, #top .problem li:nth-child(12) div { background-image: url(../image/common/icn-problem04.png); }

#top .problem li p {
	width: 100%;
	height: 3.6em;
	font-weight: 900;
	line-height: 1.2em;
	text-align: center;
	vertical-align: middle;
	display: table-cell;
}
#top .problem li span {
	color: #a03;
}
@media screen and (min-width: 1201px) {
	#top .problem li {
		width: 270px;
	}
}

/*　お客様の課題（吹き出し）*/
#top .problem li div {
	position: relative;
}
#top .problem li div::before, 
#top .problem li div::after {
	content: "";
	position: absolute;
	left: 50%;
	width: 0;
	height: 0;
	border-style: solid;
}
#top .problem li div::before {
	z-index: 0;
	bottom: -8px;
	margin-left: -9px;
	border-width: 9px 9px 0 9px;
	border-color: #fff transparent transparent transparent;
}
#top .problem li div::after {
	z-index: -1;
	bottom: -12px;
	margin-left: -10px;
	border-width: 10px 10px 0 10px;
	border-color: #222 transparent transparent transparent;
}

/*　お客様の課題（リンク）*/
#top .problem li a {
	color: #222;
	text-decoration: none;
	display: block;
}
#top .problem li a div {
	-webkit-transition: all 0.3s ease; transition: all 0.3s ease;
}
#top .problem li a:hover div {
	background-color: #f1f1dd;
	border-color: #a03;
	border-radius: 25px;
}
#top .problem li a:hover div::before {
	border-color: #f1f1dd transparent transparent transparent;
}
#top .problem li a:hover div::after {
	border-color: #a03 transparent transparent transparent;
}

/*　私たちの想い　*/
#top .role {
	position: relative;
	background: #222 url(../image/common/pic-logo02.png) 100% 100% no-repeat;
	background-size: 390px auto;
	color: #fff;
}
#top .role figure {
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	max-width: 1200px;
	height: 500px;
	margin: auto;
	overflow: hidden;
}
#top .role figure img {
	width: 100%;
	height: auto;
}
#top .role .wrap {
	position: relative;
}
#top .role h2 {
	position: relative;
	margin: -120px auto 0 auto;
	text-align: center;
}
#top .role h2 span {
	box-sizing: border-box;
	width: 750px;
	padding: 0.9em 1.5em 1em 2em;
	background: #a03;
	display: inline-block;
	-webkit-clip-path: polygon(0 0, 100% 0, 97% 100%, 3% 100%); clip-path: polygon(0 0, 100% 0, 97% 100%, 3% 100%);
}
@media screen and (min-width: 1101px) {
	#top .role {
		padding-left: 0;
		padding-right: 0;
	}
	#top .role .wrap {
		padding-left: 16%;
	}
	#top .role h2 {
		position: absolute;
		top: -170px;
		left: 0;
		margin: 0;
		text-align: left;
	}
	#top .role h2 span {
		box-sizing: content-box;
		width: auto;
		min-height: 18em;
		padding: 1em 0.8em 0.5em 0.8em;
		-ms-writing-mode: tb-rl; -webkit-writing-mode: vertical-rl; -moz-writing-mode: vertical-rl; writing-mode: vertical-rl;
		-webkit-clip-path: none; clip-path: none;
	}
}
@media screen and (min-width: 1401px) {
	#top .role {
		padding-left: 50px;
		padding-right: 50px;
	}
}
@media screen and (min-width: 1501px) {
	#top .role .wrap {
		padding-left: 16%;
	}
	#top .role h2 span {
		padding-left: 1.1em;
		padding-right: 1.1em;
	}
}

/*　私たちの想い（4つの想い）*/
#top .role ul {
	margin-top: 70px;
	letter-spacing: -0.4em;
}
#top .role li {
	position: relative;
	padding-bottom: 50px;
	font-size: 4em;
	font-weight: 900;
	text-align: center;
	line-height: 1em;
	letter-spacing: normal;
	vertical-align: top;
	display: inline-block;
}
#top .role li:nth-child(1) {
	width: 28%;
}
#top .role li:nth-child(n+2) {
	width: 20%;
	margin-left: 4%;
}
#top .role li::after {
	content: attr(data-txt);
	width: 100%;
	margin-top: 1.5em;
	font-size: 0.22em;
	line-height: 1em;
	letter-spacing: 0.2em;
	word-break: break-all;
	display: block;
}
#top .role li::before {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	width: 140px;
	margin: auto;
	border-bottom: 2px solid #a03;
}
@media screen and (min-width: 1101px) {
	#top .role ul {
		margin-top: 0;
	}
}
@media screen and (min-width: 1201px) {
	#top .role li {
		font-size: 4.5em;
	}
}
@media screen and (min-width: 1501px) {
	#top .role li {
		font-size: 5em;
	}
}

/*　私たちの想い（4つの想いのアニメーション）*/
#top.js .role li::after {
	-webkit-transform: translate(0, -3em); transform: translate(0, -3em);
	opacity: 0;
	-webkit-transition: all 0s ease; transition: all 0s ease;
}
#top.js .role li::before {
	width: 0;
	opacity: 0;
	-webkit-transition: all 0s ease; transition: all 0s ease;
}
#top.js .role li.disp::after {	/*JSでdisp付与*/
	-webkit-transform: translate(0, 0); transform: translate(0, 0);
	opacity: 1;
	-webkit-transition: all 0.6s ease; transition: all 0.6s ease;
}
#top.js .role li:nth-child(1).disp::after { -webkit-transition-delay: 1.0s; transition-delay: 1.0s; }
#top.js .role li:nth-child(2).disp::after { -webkit-transition-delay: 1.1s; transition-delay: 1.1s; }
#top.js .role li:nth-child(3).disp::after { -webkit-transition-delay: 1.2s; transition-delay: 1.2s; }
#top.js .role li:nth-child(4).disp::after { -webkit-transition-delay: 1.3s; transition-delay: 1.3s; }

#top.js .role li.disp::before {
	width: 140px;
	opacity: 1;
	-webkit-transition: width 0.6s ease 1.8s; transition: width 0.6s ease 1.8s;
}

/*　私たちの想い（文章、ボタン）*/
#top .role .together {
	width: 100%;
	margin-top: 100px;
	display: table;
}
#top .role .together p, 
#top .role .together div { 
	vertical-align: top;
	display: table-cell;
}
#top .role .together p {
	font-size: 1.1em;
}
#top .role .together p span {
	display: inline-block;
}
#top .role .together div {
	max-width: 40em;
	padding-left: 4%;
}
#top .role .btn1 {
	padding-top: 1.5em;
	padding-bottom: 1.6em;
	background: #fff;
	color: #222;
}
#top .role .btn1::after {
	border-color: #222;
}
#top .role .btn1:hover {
	background: #a03;
	color: #fff;
}
#top .role .btn1:hover::after {
	border-color: #fff;
}

/*　お知らせ　*/
#top .news .box {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	max-width: 1000px;
	margin: auto;
	padding: 40px 40px 50px 40px;
	border-radius: 10px;
	-webkit-box-shadow: 0 0 8px 0 #ccc; box-shadow: 0 0 8px 0 #ccc;
}
#top .news .box:nth-child(n+2) {
	margin-top: 30px;
}
#top .news .box time {
	padding-left: 22px;
	background: url(../image/common/icn-post.png) 0 50% no-repeat;
	background-size: 15px auto;
	font-size: 0.95em;
	line-height: 1em;
}
#top .news .box time::after {
	content: "NEW";
	position: relative;
	top: -0.2em;
	box-sizing: border-box;
	min-width: 90px;
	margin-left: 1em;
	padding: 0.3em 1em;
	background: #222;
	font-size: 0.85em;
	color: #fff;
	line-height: 1em;
	text-align: center;
	display: inline-block;
}
#top .news .box time + br {
	display: none;
}
#top .news .box h3 {
	margin: 0.8em 0 1.5em 0;
}
#top .news .box mark {	/*JSでmark生成*/
	position: relative;
	top: -1em;
	padding: 0.7em 0.7em 0.8em 1em;
	background: #fd0;
	font-weight: 900;
	line-height: 1em;
	font-feature-settings: normal;
	display: inline-block;
}
#top .news .box p {
	line-height: 1.5em;
	text-align: justify;
}
#top .news .box strong {
	position: relative;
	top: -0.5em;
	color: #a03;
}
#top .news .box a[href$="pdf"], 
#top .news .box a[href$="pdf"] img, 
#top .news .box figure {
	width: 255px;
	height: 360px;
}
#top .news .box a[href$="pdf"] {
	float: right;
	position: relative;
	z-index: 2;
	margin: 0 0 1em 5%;
	background: rgba(0,0,0,0.1);
	display: block;
}
#top .news .box figure {
	position: absolute;
	z-index: 1;
	top: 40px;
	right: 40px;
	box-sizing: border-box;
	padding: 1em;
	overflow: hidden;
}
#top .news .box figure img {
	width: 100%;
	height: auto;
}
#top .news .box a[href$="pdf"]::before {
	content: "";
	position: absolute;
	top: -10px;
	right: -10px;
	width: 30px;
	height: 30px;
	background: url(../image/common/icn-enlarge.png) no-repeat;
	background-size: contain;
}
#top .news .box a[href$="pdf"]:hover {
	outline: 2px solid #ccc;
	outline-offset: 3px;
}
#top .news .box ul {
	margin-bottom: 0.5em;
	min-width: 90px;
}
#top .news .box li {
	padding-left: 5.9em;
	text-indent: -5.9em;
}
#top .news .box a.btn2 {
	margin-top: 1.5em;
}

/*　お知らせ（NEWマークのアニメーション）*/
#top .news .box time::after {
	-webkit-animation: blinking 1s ease infinite alternate;
	animation: blinking 1s ease infinite alternate;
}
#top .news .box mark {
	-webkit-animation: blinking 1s ease 0.5s infinite alternate;
	animation: blinking 1s ease 0.5s infinite alternate;
}

/*　お知らせ（申込み締切り／セミナー終了）*/
#top .news .box time.hide::after {	/*JSでhide付与*/
	display: none;
}
#top .news .box a.btn2.due, /*JSでdue付与*/
#top .news .box a.btn2.end {	/*JSでend付与*/
	padding-right: 2em;
	text-align: center;
	pointer-events: none;
}
#top .news .box a.btn2.due { background: #566; }
#top .news .box a.btn2.end { background: #999; }

#top .news .box a.btn2.due::after, 
#top .news .box a.btn2.end::after {
	display: none;
}

/*　課題をクリアへ　*/
#top .support h2 + p {
	width: 800px;
	margin: 0 auto 70px auto;
	text-align: center;
}

/*　課題をクリアへ（レイアウト）*/
#top .support section:nth-child(even) {
	background: #eee;
}
#top .support .wrap {
	min-height: 150px;	/*番号と画像分の高さ*/
}
#top .support section:nth-child(odd) .wrap {
	direction: rtl;
}
#top .support section:nth-child(odd) .num, 
#top .support section:nth-child(odd) .cont {
	direction: ltr;
}
#top .support .num {
	width: 300px;
}
#top .support .cont {
	padding-top: 160px;
}
@media screen and (min-width: 1201px) {
	#top .support .wrap {
		width: 100%;
		min-height: 360px;	/*番号と画像分の高さ*/
		display: table;
	}
	#top .support .num, 
	#top .support .cont {
		display: table-cell;
	}
	#top .support .num {
		width: 40%;
		min-width: 450px;
	}
	#top .support .cont {
		padding-top: 0;
		padding-left: 5%;
	}
}

/*　課題をクリアへ（画像）*/
#top .support .wrap {
	position: relative;
}
#top .support .wrap::after {
	content: "";
	position: absolute;
	z-index: 1;
	top: -140px;
	width: 40%;
	min-width: 450px;
	height: 280px;
	background-position: 50% 100%;
	background-repeat: no-repeat;
	background-size: 400px auto;
	pointer-events: none;
}
#top .support section:nth-child(even) .wrap::after { right: 3%; }
#top .support section:nth-child(odd) .wrap::after { left: 3%; }
#top .support .sup1 .wrap::after { background-image: url(../image/biz/pic-works01.png); }
#top .support .sup2 .wrap::after { background-image: url(../image/biz/pic-works02.png); }
#top .support .sup3 .wrap::after { background-image: url(../image/biz/pic-works03.png); }
#top .support .sup4 .wrap::after { background-image: url(../image/biz/pic-works04.png); }

@media screen and (min-width: 1201px) {
	#top .support .wrap::after {
		top: 0;
		height: 100%;
	}
	#top .support section:nth-child(even) .wrap::after { left: 0; }
	#top .support section:nth-child(odd) .wrap::after { right: 0; }
}

/*　課題をクリアへ（番号）*/
#top .support {
	counter-reset: number 0;
}
#top .support .num {
	position: relative;
	text-align: center;
}
#top .support .num::before, 
#top .support .num::after {
	position: absolute;
	left: 0;
	right: 0;
	width: 200px;
	margin: auto;
}
#top .support .num::before {
	content: "";
	top: -120px;
	height: 270px;
	background: #222;
}
#top .support .num::after {
	content: counter(number, decimal-leading-zero);
	counter-increment: number 1;
	top: -0.1em;
	font-size: 3.5em;
	color: #fff;
	line-height: 1em;
	text-align: center;
	display: inline-block;
}
#top .support .num b {
	position: relative;
	top: -1.5em;
	font-size: 1.3em;
	color: #fff;
	line-height: 1em;
	display: inline-block;
}
@media screen and (min-width: 1201px) {
	#top .support .num b {
		top: -3em;
	}
}

/*　課題をクリアへ（番号のアニメーション）*/
#top.js .support .num::before {
	height: 0;
	background: #a03;
	-webkit-transition: all 0s ease; transition: all 0s ease;
}
#top.js .support .num::after, 
#top.js .support .num b {
	opacity: 0;
	-webkit-transform: translate(50px, 0); transform: translate(50px, 0);
	-webkit-transition: all 0s ease; transition: all 0s ease;
}
#top.js .support section.disp .num::before {
	height: 270px;
	background: #222;
	-webkit-transition: all 0.6s ease 0.4s; transition: all 0.6s ease 0.4s;
}
#top.js .support section.disp .num::after {
	opacity: 1;
	-webkit-transform: translate(0, 0); transform: translate(0, 0);
	-webkit-transition: all 1s ease 1.2s; transition: all 1s ease 1.2s;
}
#top.js .support section.disp .num b {
	opacity: 1;
	-webkit-transform: translate(0, 0); transform: translate(0, 0);
	-webkit-transition: all 0.4s ease 1s; transition: all 0.4s ease 1s;
}

/*　課題をクリアへ（内容）*/
#top .support h3, 
#top .support p, 
#top .support .list {
	max-width: 45em;
}
#top .support h3 {
	color: #a03;
}
#top .support p {
	line-height: 1.5em;
}
#top .support h3 + p {
	margin-top: 1em;
}
#top .support .list, 
#top .support .list + p, 
#top .support .btn2 {
	margin-top: 1.5em;
}
#top .support .list li::before {
	color: #a03;
}
#top .support .btn2 {
	margin-left: -0.5em;
}
#top .support .job, 
#top .support .biztype {
	margin: 1.5em 0;
	letter-spacing: -0.4em;
}
#top .support .job li, 
#top .support .biztype li {
	margin: 10px 6px 0 0;
	line-height: 1.3em;
	letter-spacing: normal;
	vertical-align: top;
	display: inline-block;
}
#top .support .job li {
	padding: 0.3em 0.5em 0.4em 30px;
	background: #9dd url(../image/common/icn-person.png) 7px 100% no-repeat;
	background-size: 15px auto;
}
#top .support .biztype li {
	box-sizing: border-box;
	min-width: 6em;
	padding: 0.8em 0.4em;
	border: 4px solid #5bb;
	font-weight: 900;
	font-size: 1.1em;
	text-align: center;
}
#top .support .nobr br {
	display: none;
}
@media screen and (min-width: 1201px) {
	#top .support .nobr br {
		display: block;
	}
}

/*　アーチーズ　*/
#top .about .wrap {
	position: relative;
	padding-top: 290px;
}
#top .about .wrap::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 106%;
	height: 220px;
	margin: 0 -3%;
	background: rgba(0,0,0,0.1) url(../image/top/pic-office01.jpg) 50% 50% no-repeat;
	background-size: cover;
}
#top .about .area {
	float: right;
	margin: -150px 0 1em 3%;
	width: 420px;
	height: 0;
	padding-top: 463px;
	background: url(../image/biz/pic-bizarea.png) no-repeat;
	background-size: contain;
	display: inline-block;
	overflow: hidden;
	-webkit-filter: drop-shadow(0 0 5px #fff); filter: drop-shadow(0 0 5px #fff);
}
#top .about .wrap p {
	max-width: 44em;
	font-size: 1.1em;
	line-height: 1.8em;
	text-align: justify;
}
#top .about .wrap span, 
#top .about .wrap b {
	margin-top: 1em;
	display: block;
}
#top .about .wrap span + br, 
#top .about .wrap b + br {
	display: none;
}
#top .about .wrap b {
	font-size: 1.2em;
}
#top .about .wrap em {
	font-weight: 900;
	color: #a03;
}
#top .about .wrap .sign {
	margin: 2em 1em 0 0;
	font-size: 0.9em;
	text-align: right;
}
@media screen and (min-width: 1201px) {
	#top .about .wrap {
		padding-left: 50px;
		padding-right: 50px;
	}
	#top .about .wrap::before {
		width: 100%;
		margin: 0;
	}
	#top .about .area {
		width: 490px;
		margin: -110px 0 1em 50px;
		padding-top: 540px;
	}
	#top .about .wrap p {
		max-width: 100%;
		padding-right: 540px;
	}
	#top .about .wrap .sign {
		margin-right: 0;
	}
}

/*　アーチーズ（地図のアニメーション）*/
#top.js .about .area {
	opacity: 0;
	-webkit-transform: translate(0, 50px); transform: translate(0, 50px);
	-webkit-transition: all 0s ease; transition: all 0s ease;
}
#top.js .about .area.disp {
	opacity: 1;
	-webkit-transform: translate(0, 0); transform: translate(0, 0);
	-webkit-transition: all 0.8s ease 0.6s; transition: all 0.8s ease 0.6s;
}

/*　アーチーズ（バナー）*/
#top .about ul {
	margin: 70px 50px 0 50px;
}
#top .about li {
	width: 100%;
	display: table;
}
#top .about li:nth-child(n+2) {
	margin-top: 15px;
}
#top .about li h3, 
#top .about li p {
	vertical-align: middle;
	display: table-cell;
}
#top .about h3 {
	box-sizing: border-box;
	width: 360px;
	padding: 1.2em 120px 1.3em 1.5em;
	font-size: 1.2em;
	font-weight: 900;
	color: #fff;
	font-feature-settings: normal;
	display: inline-block;
}
#top .about h3[data-txt]::before {
	content: attr(data-txt);
	font-size: 0.6em;
	letter-spacing: 0.3em;
	display: block;
}
#top .about h3[data-txt="RECRUIT"] {
	background: #d70 url(../image/common/pic-banner01.jpg) 100% 50% no-repeat;
	background-size: contain;
}
#top .about h3[data-txt="TEAM ARCHIES"] {
	background: #589 url(../image/common/pic-banner02.jpg) 100% 50% no-repeat;
	background-size: contain;
}
#top .about li p {
	padding-left: 3%;
	line-height: 1.5em;
	text-align: justify;
}
#top .about li br {
	display: none;
}
@media screen and (min-width: 1201px) {
	#top .about li br {
		display: block;
	}
}


/*──────────────────────────
お問い合わせ先
──────────────────────────*/
.contact {
	padding-top: 150px;
	background: #222;
}
.contact .wrap {
	box-sizing: border-box;
	width: 80%;
	max-width: 1100px;
	margin: auto;
	padding: 80px 5% 100px 5%;
	background: rgba(255,255,255,0.07);
	border-radius: 20px;
	color: #fff;
	text-align: center;
}
.contact .wrap p {
	margin-top: 1.5em;
	font-size: 1.05em;
	line-height: 1.7em;
}
.contact .wrap .btn1 {
	margin-top: 1.5em;
	background: #a03 url(../image/common/icn-mail-rd.png) 0 50% no-repeat;
	background-size: 85px auto;
	opacity: 0.2;
	pointer-events: none;
}
.js .contact .wrap .btn1 {
	opacity: 1;
	pointer-events: auto;
}
.contact .wrap .btn1:hover {
	background-color: #fff;
	background-image: none;
	color: #222;
}
.contact .wrap .btn1:hover::after {
	border-top: 1px solid #222;
	border-right: 1px solid #222;
}


/*──────────────────────────
フッター
──────────────────────────*/
footer .wrap {
	padding: 80px 50px;
	background: url(../image/common/pic-archimg.png) 100% 100% no-repeat;
	background-size: 670px auto;
}
footer address {
	position: relative;
	margin-top: 0.8em;
	padding-top: 60px;
}
footer address::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 250px;
	height: 45px;
	background: url(../image/common/pic-logo01.png) 0 0 no-repeat;
	background-size: contain;
}
footer address a {
	color: #222;
}
footer address a:hover {
	color: #222;
	text-decoration: none;
}

/*　キャッチコピー（アニメーション）*/
.js footer .typ span {
	opacity: 0;
	-webkit-animation: none; animation: none;
}
.js footer .typ.disp span {	/*JSでdisp付与*/
	display: inline;
	-webkit-animation: typingText 0.4s linear forwards; animation: typingText 0.4s linear forwards
}
.js footer .typ.disp2 span {	/*JSで30s後にdisp2付与*/
	opacity: 1;
	display: inline;
	-webkit-animation: wavingText 20s ease infinite; animation: wavingText 20s ease infinite;
}

/*　ロゴ（アニメーション）*/
.js footer address::before {
	opacity: 0;
	-webkit-transform: translate(-50px, 0); transform: translate(-50px, 0);
	-webkit-transition: all 0s ease; transition: all 0s ease;
}
.js footer address.disp::before {
	opacity: 1;
	-webkit-transform: translate(0, 0); transform: translate(0, 0);
	-webkit-transition: all 0.5s ease 2s; transition: all 0.5s ease 2s;
}

/*　SNS　*/
footer .w15 {
	position: relative;
}
footer aside {
	position: absolute;
	right: 0;
	bottom: -15px;
}
footer aside a {
	width: 60px;
	height: 0;
	padding-top: 60px;
	background-repeat: no-repeat;
	background-size: contain;
	border: 1px solid transparent;
	display: inline-block;
	overflow: hidden;
	-webkit-transition: all 0.4s ease; transition: all 0.4s ease;
}
footer a[href*="facebook"] { background-image: url(../image/common/icn-sns01.png); }
footer a[href*="instagram"] { background-image: url(../image/common/icn-sns02.png); }

footer aside a:hover {
	border-color: #999;
	border-radius: 50%;
}

/*　著作権　*/
footer small {
	padding: 3em 50px;
	background: #a03;
	color: #fff;
	letter-spacing: 0.1em;
	text-align: center;
	display: block;
}
footer small a {
	color: #fff;
}
footer small a:hover {
	color: #fff;
	text-decoration: none;
}
footer small span {
	position: absolute;
	z-index: -1;
}


/*─────────────────────────*/