/*---------------------------------------------
	Reset
  ---------------------------------------------*/

html {
	width: 100%;
	height: 100%;
	overflow-y: scroll;
	font-size: calc(.65rem + .3vh + .2vw);
	overscroll-behavior-y: none;
}
@media screen and (min-width: 960px), print {
	_::-webkit-full-page-media, _:future, :root {
		 overflow: hidden;
	}
}

body, div, dl, dt, dd, ul, ul li, h1, h2, h3, h4, h5, h6,
pre, form, fieldset, input, textarea, p, blockquote, th, td,
section, nav, article, aside, header, address,
figure, figcaption {
	margin: 0;
	padding: 0;
}

address, caption, cite, code, dfn, em, strong, th, var {
	font-style: normal;
	font-weight: normal;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

caption,
th {text-align: left;}

q:before,
q:after {content: '';}

object,
embed {vertical-align: top;}

legend {display: none;}

h1, h2, h3, h4, h5, h6 {
	font-size: 1rem;
	font-weight: 300;
}

img, abbr, acronym, fieldset {border: 0;}

img {
	max-width: 100%;
	height: auto;
	vertical-align: top;
	-ms-interpolation-mode: bicubic;
}

ul li {list-style-type: none;}

input,
select,
textarea,
button {
	margin: 0;
	padding: 0;
	font-family: inherit;
	font-size: inherit;
	color: inherit;
	line-height: inherit;
	background-color: transparent;
	border: 0 none;
	border-radius: 0;
	outline: none;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}

*,
*:before,
*:after {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}



/*---------------------------------------------
	General Settings
  ---------------------------------------------*/

/* ------ Link ------ */

a {
	text-decoration: none;
	color: #1c89a6;
	outline: none;
	transition: color .2s linear;
}
html:not(.sp) a:hover {
	text-decoration: none;
	color: #49a1b8;
}


/* ------ Common ------ */

body {
	width: 100%;
	height: 100%;
	font-family: "PingFang SC","Source Han Sans CN","Microsoft YaHei","STSong","SimSun",Arial,sans-serif;
	font-weight: 400;
	font-feature-settings: 'palt';
	color: #686f75;
	text-align: left;
	line-height: 2;
	background-color: #233036;
	-moz-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	letter-spacing: .05em;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.sp body {overflow: hidden;}

.row {display: flex;}
.row.gray {background-color: #f1f5f7;}

.full {width: 100%;}
.half {width: 50%;}
.oneThird {width: 33.33333333%;}
.twoThird {width: 66.66666666%;}
.quarter {width: 25%;}
.threeQuarters {width: 75%;}

.half.gutter:first-of-type {padding-right: 1.5vw;}
.half.gutter:last-of-type {padding-left: 1.5vw;}

.oneThird.gutter:first-of-type {padding-right: 13.33333333px;}
.oneThird.gutter:nth-of-type(2) {
	padding-left: 6.66666666px;
	padding-right: 6.66666666px;
}
.oneThird.gutter:last-of-type {padding-left: 13.33333333px;}

.img {text-align: center;}

.center {text-align: center;}
.right {text-align: right;}

.mb0 {margin-bottom: 0 !important;}
.mb10 {margin-bottom: 10px !important;}
.mb20 {margin-bottom: 20px !important;}
.mb30 {margin-bottom: 30px !important;}
.mb40 {margin-bottom: 40px !important;}
.mb50 {margin-bottom: 50px !important;}
.mb60 {margin-bottom: 60px !important;}
.mb70 {margin-bottom: 70px !important;}
.mb80 {margin-bottom: 80px !important;}
.mb90 {margin-bottom: 90px !important;}
.mb100 {margin-bottom: 100px !important;}

.mt0 {margin-top: 0 !important;}
.mt10 {margin-top: 10px !important;}
.mt20 {margin-top: 20px !important;}
.mt30 {margin-top: 30px !important;}
.mt40 {margin-top: 40px !important;}
.mt50 {margin-top: 50px !important;}
.mt60 {margin-top: 60px !important;}
.mt70 {margin-top: 70px !important;}
.mt80 {margin-top: 80px !important;}
.mt90 {margin-top: 90px !important;}
.mt100 {margin-top: 100px !important;}

.pb0 {padding-bottom: 0 !important;}
.pb5 {padding-bottom: 5px !important;}
.pb10 {padding-bottom: 10px !important;}
.pb15 {padding-bottom: 15px !important;}
.pb20 {padding-bottom: 20px !important;}
.pb30 {padding-bottom: 30px !important;}
.pb40 {padding-bottom: 40px !important;}
.pb50 {padding-bottom: 50px !important;}
.pb60 {padding-bottom: 60px !important;}
.pb70 {padding-bottom: 70px !important;}
.pb80 {padding-bottom: 80px !important;}
.pb90 {padding-bottom: 90px !important;}
.pb100 {padding-bottom: 100px !important;}

.pt0 {padding-top: 0 !important;}
.pt10 {padding-top: 10px !important;}
.pt20 {padding-top: 20px !important;}
.pt30 {padding-top: 30px !important;}
.pt40 {padding-top: 40px !important;}
.pt50 {padding-top: 50px !important;}
.pt60 {padding-top: 60px !important;}
.pt70 {padding-top: 70px !important;}
.pt80 {padding-top: 80px !important;}
.pt90 {padding-top: 90px !important;}
.pt100 {padding-top: 100px !important;}

.showNarrow,
.showTablet,
.showFablet,
.showSP,
.showJsOn {display: none;}

.js .showJsOn {display: block;}
.js br.showJsOn {display: inline;}

.img img {width: 100%;}

strong {
	color: #233036;
	font-weight: bold;
}

em {
	color: #233036;
	font-weight: bold;
}

.bold {font-weight: bold !important;}
.large {font-size: 1.5rem !important;}
.small {font-size: .875rem !important;}
ul .large,
ol .large,
dl .large,
td .large {font-size: 1.13rem !important;}
ul .small,
ol .small,
dl .small,
td .small {font-size: .875rem !important;}


/* ----- Icon Link ----- */

.contentsBox li a {text-decoration: none;}
html:not(.sp) .contentsBox li a:hover {text-decoration: underline;}

.contentsBox a[href^="http"][target],
.contentsBox a[href^="#"] {
	text-decoration: none;
	word-break: break-word;
}
html:not(.sp) .contentsBox a[href^="http"][target]:hover,
html:not(.sp) .contentsBox a[href^="#"]:hover {text-decoration: underline;}

.contentsBox a[href^="http"][target]:after {
	content: "";
	display: inline-block;
	width: 20px;
	height: 20px;
	margin-left: 5px;
	vertical-align: middle;
	background-image: url(../images/icon_window_blue.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

.contentsBox a[href^="#"]:after {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	margin: .7em 0 0 12px;
	vertical-align: top;
	border-right: solid 2px #1c89a6;
	border-bottom: solid 2px #1c89a6;
	transform: rotate(45deg);
}

.contentsBox a[href^="http"] > img {
	position: relative;
	margin-bottom: -2em !important;
}

.contentsBox .icon-back a {
	position: relative;
	display: inline-block;
	padding-left: 30px;
	text-decoration: none;
	vertical-align: top;
}
html:not(.sp) .contentsBox .icon-back a:hover {
	text-decoration: underline;
}
.contentsBox .icon-back a:before {
	content: "";
	position: absolute;
	display: block;
	width: 17px;
	height: 2px;
	top: 50%;
	left: 4px;
	margin: -1px 0 0;
	background-color: #1c89a6;
	border-radius: 2px;
	transition: background-color .2s linear, width .2s linear, left .2s linear;
}
html:not(.sp) .contentsBox .icon-back a:hover:before {
	width: 20px;
	left: 1px;
	background-color: #49a1b8;
}
.contentsBox .icon-back a:after {
	content: "";
	position: absolute;
	display: block;
	width: 8px;
	height: 8px;
	top: 50%;
	left: 3px;
	margin: -4px 0 0;
	border-top: solid 2px #1c89a6;
	border-right: solid 2px #1c89a6;
	transform: rotate(-135deg);
	transition: border-color .2s linear, left .2s linear;
}
html:not(.sp) .contentsBox .icon-back a:hover:after {
	left: 0px;
	border-color:	#49a1b8;
}

/*---------------------------------------------
	priceTable
  ---------------------------------------------*/

.contentsBox .priceTable th,
.contentsBox .priceTable td{
	padding: 20px 30px;
	line-height: 1.4em;
	vertical-align: middle;
	border: 1px solid #eaedf0;
}

.contentsBox .priceTable th{
	background-color: #38b5e0;
	color: #FFF;
}
.contentsBox .priceTable td{
	background-color: #f4f4f5;
}



/*---------------------------------------------
	Content
  ---------------------------------------------*/

#wrapper {
	position: relative;
	width: 100%;
	top: 0;
	left: 0;
}
.top-page #wrapper {
	position: absolute;
	overflow: hidden;
}
.sp #wrapper {
	height: 100%;
	overflow-y: scroll;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
@media screen and (min-width: 960px) {
	.sp #wrapper.top {overflow: hidden;}
}

#wrapper:not(.top-page) ~ #dummy,
.sp #wrapper.top-page ~ #dummy {display: none;}



/*---------------------------------------------
	Header
  ---------------------------------------------*/

.logo {
	position: fixed;
	z-index: 10001;
	width: 120px;
	height: 120px;
	top: calc(5vh + 5px);
	left: calc(4vw + 70px);
}

.logo img:nth-of-type(2) {
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	opacity: 0;
}

.tagline {
	position: fixed;
	display: flex;
	z-index: 10000;
	width: 120px;
	height: 120px;
	top: 5vh;
	/*left: calc(4vw + 150px);*/
	left: calc(4vw + 222px);
	align-items: center;
	justify-content: center;
/*	animation: tagline linear 10s infinite;*/
}
/*
@keyframes tagline {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}
*/
.tagline img {
	width: 16vh;
	max-width: 120px;
}

.logo20th{
	position: fixed;
	display: flex;
	z-index: 10000;
	width: 120px;
	height: 120px;
	top: 5.2vh;
	left: calc(4vw + 222px);
	align-items: center;
	justify-content: center;
}

.logo20th a{
	padding-bottom: 0.04vh;
}

.logo20th a img{
	width: 8.5334vh;
	max-width: 64px;
}



/*---------------------------------------------
	Global Navi
  ---------------------------------------------*/

.gnav-main {
	position: fixed;
	z-index: 10000;
	width: 70px;
	bottom: 0;
	left: 0;
	padding: 0 0 7vh;
	font-size: .875rem;
}
.gnav-main:before {
	content: "";
	position: absolute;
	display: block;
	width: 1px;
	height: 400%;
	top: -100%;
	left: 69px;
	background-color: rgba(255, 255, 255, .12);
}

.gnav-main li {
	position: relative;
	display: inline-block;
	margin: 4.2vh 0 0;
	vertical-align: bottom;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	overflow: hidden;
}
.gnav-main li:after {
	content: "";
	position: absolute;
	display: block;
	width: 1px;
	height: 0;
	top: 50%;
	right: 0;
	background-color: #fff;
	transition: height .3s ease-out, top .3s ease-out;
}
.gnav-main li.current:after,
html:not(.sp) .gnav-main li.hover:after {
	height: 100%;
	top: 0;
}

.gnav-main li a {
	display: block;
 	color: #fff;
	line-height: 70px;
}
html:not(.sp) .gnav-main li:hover a {color: #fff;}

.gnav-main li a span:first-child {
	display: inline-block;
	opacity: 1;
	transform: matrix(1, 0, 0, 1, 0, 0);
	transition: opacity .2s ease-out .2s, transform .2s ease-out .2s;
}
html:not(.sp) .gnav-main li.hover a span:first-child {
	opacity: 0;
	transform: matrix(1, 0, -0.1, 1, -20, 1);
	transition: opacity .2s ease-in, transform .2s ease-in;
}

.gnav-main li a span:last-child {
	position: absolute;
	display: inline-block;
	top: 0;
	left: 0;
	opacity: 0;
	transform: matrix(1, 0, -0.1, 1, 20, 1);
	transition: opacity .2s ease-in, transform .2s ease-in;
	height: 100px;
}

html:not(.sp) .gnav-main li.hover a span:last-child {
	opacity: 1;
	transform: matrix(1, 0, 0, 1, 0, 0);
	transition: opacity .2s ease-out .2s, transform .2s ease-out .2s;
}
.gnav-main li a span:last-child::after{
	content: attr(data-anchor)"";
	position: absolute;
	display: inline-block;
	top: 0;
	left: 0;
	transition: opacity .2s ease-in, transform .2s ease-in;
}
html:not(.sp) .gnav-main li.hover a span:last-child::after {
	opacity: 1;
}


/* ----- Sub Navigation ----- */

.gnav-sub {
	position: fixed;
	z-index: 30003;
	top: 5vh;
	right: 6vw;
	transition: z-index 0s linear .35s;
}
.top-page .gnav-sub {z-index: 10003;}
.index-page .gnav-sub,
.detail-page .gnav-sub {position: absolute;}

.gnav-sub li {
	display: inline-block;
	margin-left: 2vw;
}

.gnav-sub li a {
	display: inline-block;
	margin-top: 15px;
	font-size: .75rem;
	line-height: 20px;
	color: #fff;
	text-transform: uppercase;
	text-indent: 0;
}
.gnav-sub li a:hover {color: #fff;}

@media screen and (min-width: 1200px), print {
	.detail-page #gnav .gnav-sub li a {color: #686f75;}
	.detail-page #gnav .gnav-sub li a:hover {color: #233036;}
}

#nav-language a {
	margin-left: 10px;
	opacity: .5;
	transition: opacity .2s linear;
}
#nav-language a.current,
#nav-language a:hover {opacity: 1;}


/* ----- Contact Button ----- */

#nav-contact {
	position: fixed;
	z-index: 50001;
	top: 5vh;
	right: calc(6vw - 60px);
}

#nav-contact a {
	position: absolute;
	display: block;
	width: 50px;
	height: 50px;
	top: 0;
	right: 0;
	overflow: hidden;
	background-color: #d44373;
	border-radius: 50%;
	vertical-align: top;
	transition: background-color .2s linear;
}
html:not(.sp) #nav-contact a:hover {background-color: #dd698f;}


/* ----- Menu Button ----- */

.btn-menu {
	position: fixed;
	z-index: 10000;
	width: 70px;
	height: 50px;
	top: 5vh;
	left: 0;
}

.btn-menu button {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	text-indent: -9999px;
	border: 0 none;
	cursor: pointer;
	overflow: hidden;
	vertical-align: top;
}
.btn-menu em:after {
	content: "";
	position: absolute;
	display: block;
	width: 20px;
	height: 2px;
	top: 16px;
	right: 25px;
	background-color: #fff;
	transition: transform .3s ease-out, top .3s ease-out, width .3s ease-out;
}
.btn-menu button:before {
	content: "";
	position: absolute;
	display: block;
	width: 20px;
	height: 2px;
	top: 24px;
	right: 25px;
	background-color: #fff;
	transition: width .3s ease-out, right .3s ease-out;
}
.btn-menu button:after {
	content: "";
	position: absolute;
	display: block;
	width: 20px;
	height: 2px;
	top: 32px;
	right: 25px;
	background-color: #fff;
	transition: transform .3s ease-out, top .3s ease-out;
}
html:not(.sp) .btn-menu button:hover em:after {
	width: 15px;
}
html:not(.sp) .btn-menu button:hover:before {
	width: 11px;
}
.main-menu-open .btn-menu button em:after {
	width: 20px !important;
	top: 24px;
	transform: rotate(45deg);
}
.main-menu-open .btn-menu button:before {
	width: 0 !important;
	right: 35px;
}
.main-menu-open .btn-menu button:after {
	top: 24px;
	transform: rotate(-45deg);
}
/* ----- column ----- */

h2 .subcopy{
	display:block;
	font-size:0.73em;
}
.talk{
	display:flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-start;
}
.talk p{
	margin-left:0;
	width:100%;
}
.talk .talker{
	width:5em;
	font-weight:bold;
	color:#233036;
}
.interlocutor ul{
	display: flex;
}
.interlocutor ul li{
	margin-right: 30px;
}
.contentsBox .interlocutor ul li{
	padding-left: 0;
}
.contentsBox .interlocutor ul li:after{
	display: none;
}
.interlocutor .face{
	width: 80px;
	height: 80px;
	/*border: px solid #233036;*/
	border-radius: 40px;
	padding: 0;
	overflow: hidden;
}

.contentsBox .interlocutor p{
	padding-bottom: 0;
	margin-bottom: 0;
	line-height: 1.4;
	font-size: 0.8em;
	padding-top: 5px;
}
.contentsBox .interlocutor p em{
	font-size: 1.2em;
	text-indent: 1px;
	line-height: 1.6;
}
.contentsBox .interlocutor .interlocutor_caption{
	font-size: 1.2rem;
	margin-bottom: 30px;
	font-weight: bold;
	color: #233036;
}
.banner{
	background-image: url(../images/banner_visual.png);
	background-position: left top;
	background-repeat: no-repeat;
	height: 140px;
	background-size: contain;
	padding-left: 295px;
	display: flex;
	align-items:stretch;
	width: 100%;
	transition: opacity 0.3s;
	text-decoration: none !important;
}
html:not(.sp) .banner:hover{
	opacity: 0.7;
}
.banner span{
	display: flex;
	background-color: #f1f5f8;
	margin: 0 !important;
	justify-content: center;
	align-items: center;
	padding-left: 20px;
	padding-right: 90px;
	font-size: 20px;
	line-height: 29px;
	font-weight: bold;
	color: #222;
	width: 100%;
}
.banner span:after,.banner span:before{
	content: "";
	position: absolute;
	display: block;
	right: 40px;
	top: calc(50% - 24px);
	height: 48px;
	width: 48px;
	background-repeat: no-repeat;
	background-size: contain;
}
.banner span:before{
	background-image: url(../images/banner_arrow_outer.png);
}
.banner span:after{
	background-image: url(../images/banner_arrow_inner.png);
	transition: right 0.3s;
}
html:not(.sp) .banner:hover span:after{
	right: 37px;
}
@media screen and (max-width: 1730px), print {
	.banner span{
		font-size: 18px;
		line-height: 26px;
	}
}

@media screen and (max-width: 1600px), print {
	.banner {
		height:calc( 160 / 337 * 18vw);
		padding-left: calc( 18vw);
	}
}

@media screen and (max-width: 1480px), print {
	.banner span{
		padding-right: calc(60 / 337 * 30vw);
		padding-left: calc(10 / 337 * 30vw);
	}
}

@media screen and (max-width: 1440px), print {
	.banner span{
		font-size: 18px;
		line-height: 26px;
	}
}


@media screen and (min-width: 1200px) and (max-width: 1440px), print{
	.banner span{
		padding-right: calc(60 / 337 * 30vw);
		padding-left: calc(20 / 337 * 30vw);
		font-size: 16px;
		line-height: 23px;
	}
	.banner span:after,.banner span:before{
		height: calc(36 / 337 * 30vw);
		width: calc(36 / 337 * 30vw);
		top: calc(50% - 18 / 337 * 30vw);
		right: calc(20 / 337 * 30vw);
	}
	html:not(.sp) .banner:hover span:after{
		right: calc(15 / 337 * 30vw);
	}
}

@media screen and (max-width: 1199px){
	.banner {
		height:calc( 160 / 337 * 23vw);
		padding-left: calc(23vw);
	}
	.banner span:after,.banner span:before{
		height: calc(62 / 337 * 23vw);
		width: calc(62 / 337 * 23vw);
		top: calc(50% - 31 / 337 * 23vw);
	}
}

@media screen and (max-width: 767px), print {
	.banner {
		height:calc( 240 / 337 * 30vw);
		padding-left: calc(30vw);
	}
	.banner span{
		padding-left: calc(50 / 337 * 30vw);
		padding-right: calc(112 / 337 * 30vw);
		line-height: calc(1.0625rem * 1.45);
		font-size: 1.0625rem;
	}

	.banner span:after,.banner span:before{
		height: calc(62 / 337 * 30vw);
		width: calc(62 / 337 * 30vw);
		top: calc(50% - 31 / 337 * 30vw);
		right: calc(32 / 337 * 30vw);
	}
	html:not(.sp) .banner:hover span:after{
		right: calc(27 / 337 * 30vw);
	}
}

@media screen and (max-width: 640px), print {
	.banner br{
		display: none;
	}
}

@media screen and (max-width: 480px), print {
	.banner {
		height:calc( 360 / 337 * 30vw);
		padding-left: calc(30vw);
	}
}

@media screen and (max-width: 420px), print {
	.banner {
		height:calc( 360 / 337 * 24vw);
		padding-left: calc(20vw);
	}
	.banner span{
		font-size: 1.0625rem !important;
	}
}


/* ----- Main Menu ----- */

@media screen and (min-width: 768px), print {

	#main-menu {
		position: fixed;
		z-index: 40000;
		width: 100%;
		height: 0;
		top: 0;
		right: 0;
		overflow: hidden;
		transition: height 0s linear 1s;
	}
	.main-menu-open #main-menu {
		height: 100%;
		transition: height 0s linear;
	}

	#main-menu .logo,
	#main-menu .tagline {
		position: absolute;
		opacity : 0;
		transition: opacity 0s linear .6s;
	}
	.main-menu-open #main-menu .logo,
	.main-menu-open #main-menu .tagline	 {
		opacity : 1;
		transition: opacity 0s linear .25s;
	}

	#main-menu .btn-menu {
		position: absolute;
		opacity : 0;
		transition: opacity 0s linear .7s;
	}
	.main-menu-open #main-menu .btn-menu	 {
		opacity : 1;
		transition: opacity 0s linear 0.1s;
	}

	#main-menu .gnav-sub {
		position: absolute;
		opacity : 0;
		transition: opacity 0s linear .4s;
	}
	.main-menu-open #main-menu .gnav-sub	 {
		opacity : 1;
		transition: opacity 0s linear .4s;
	}

	#main-menu nav {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
	}
	#main-menu nav:before {
		content: "";
		position: absolute;
		z-index: 2;
		display: block;
		width: 33.33333333%;
		height: calc(50px + 16vh);
		top: 0;
		left: 70px;
	}

	#main-menu nav > ul {
		position: absolute;
		z-index: 1;
		width: calc((100% - 70px) / 3);
		height: 100%;
		top: 0;
		left: 70px;
		padding-top: calc(50px + 16vh);
		line-height: 1.5;
	}

	#main-menu nav > ul > li:after {
		content: "";
		position: absolute;
		z-index: 1;
		display: block;
		width: 0;
		height: 100%;
		top: 0;
		right: -200%;
		opacity: 0;
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover;
		transition: z-index 0s linear, width 0s linear, opacity 0s linear;
	}


	.main-menu-open #main-menu nav > ul > li:after {transition: z-index 0s linear .1s, width 0s linear .3s, opacity .2s linear .1s;}
	#main-menu nav > ul > li:nth-of-type(1):after {background-image: url(../images/menu_img_01.jpg);}
	#main-menu nav > ul > li:nth-of-type(2):after {background-image: url(../images/top_mv_img_02.jpg);}
	#main-menu nav > ul > li:nth-of-type(3):after {background-image: url(../images/top_mv_img_03.jpg);}
	#main-menu nav > ul > li:nth-of-type(4):after {background-image: url(../images/top_mv_img_04.jpg);}
	#main-menu nav > ul > li:nth-of-type(5):after {background-image: url(../images/menu_img_05.jpg);}
	#main-menu nav > ul > li:nth-of-type(6):after {background-image: url(../images/menu_img_06.jpg);}

	.main-menu-open:not(.sp) #main-menu nav > ul:hover > li:after {
		transition: z-index 0s linear .1s, width 0s linear .3s, opacity 0s linear .3s;
	}
	.main-menu-open:not(.sp) #main-menu nav > ul > li:hover:after,
	.main-menu-open.sp #main-menu nav > ul > li.hover:after {
		z-index: 2;
		width: 100%;
		opacity: 1;
		transition: z-index 0s linear .1s, width 0s linear .1s, opacity .2s linear .1s;
	}

	#main-menu nav > ul > li > a {
		display: flex;
		height: 12vh;
/*		padding: 0 calc(10vw - 50px);*/
		padding: 0 0 0 4vw;
		font-size: 1rem;
		color: #fff;
		flex-wrap: wrap;
		align-items: center;
		align-content: center;
	}
	.main-menu-open #main-menu nav > ul > li > a {
		transition: background-color .2s linear .1s, padding .3s cubic-bezier(0,.6,.4,1) .1s;
	}
	.main-menu-open:not(.sp) #main-menu nav > ul > li:hover > a,
	.main-menu-open.sp #main-menu nav > ul > li.hover > a {
		background-color: #3e4a4f;
		padding: 0 0 0 5vw;
	}

	#main-menu nav > ul > li > a > span {
		display: block;
		width: 100%;
		overflow: hidden;
	}
	#main-menu nav > ul > li > a > .menu-en {
		display: block;
		width: 100%;
		font-family: 'Cinzel', serif;
		font-size: calc(1.5vw + 2vh);
		line-height: 1;
		text-transform: uppercase;
		white-space: nowrap;
	}
	#main-menu nav > ul > li > a > span > span {
		display: inline-block;
		vertical-align: top;
		transform: translate3d(0, 100px, 0);
		transition: transform .7s linear;
	}
	.main-menu-open #main-menu nav > ul > li > a > span > span {
		transform: translate3d(0, 0, 0);
		transition: transform .7s cubic-bezier(0,.7,.3,1) .5s;
	}
	#main-menu nav > ul > li > a > .menu-en > span:after {
		content: attr(data-text)"";
		display: inline-block;
		margin: 2px 0 0 5px;
		font-size: .875rem;
		font-family: 'Oxygen' ,sans-serif;
		vertical-align: top;
		opacity: .5;
	}

	#main-menu nav > ul > li > ul {
		position: absolute;
		width: 0;
		height: 100%;
		top: 0;
		left: 100%;
		padding-top: calc(50px + 16vh);
		background-color: #3e4a4f;
		opacity: 0;
		overflow: hidden;
		transition: width 0s linear .3s, opacity .2s linear .1s;
	}
	.main-menu-open:not(.sp) #main-menu nav > ul > li:hover > ul,
	.main-menu-open.sp #main-menu nav > ul > li.hover > ul {
		opacity: 1;
		width: 100%;
		overflow: visible;
		transition: width 0s linear .1s, opacity .2s linear .1s;
	}

	#main-menu nav > ul > li > ul > li {width: calc((100vw - 70px) / 3);}

	#main-menu nav > ul > li > ul > li > a {
		display: block;
		padding: 1.5vh 4vw;
		font-size: 1rem;
		color: #fff;
		transition: background-color .2s linear .1s, padding .3s cubic-bezier(0,.6,.4,1) .1s;
	}
	.main-menu-open:not(.sp) #main-menu nav > ul > li > ul > li:hover > a,
	.main-menu-open.sp #main-menu nav > ul > li > ul > li.hover > a {
		background-color: #485358;
		padding: 1.5vh 3.5vw 1.5vh 4.5vw;
	}
	#main-menu nav > ul > li > ul > li > a > span:after {
		content: attr(data-text)"";
		display: inline-block;
		margin: 2px 0 0 5px;
		font-size: .75rem;
		font-family: 'Oxygen' ,sans-serif;
		vertical-align: top;
		opacity: .5;
	}

	#main-menu nav > ul > li > ul > li > ul {
		position: absolute;
		z-index: 3;
		width: 0;
		height: 100%;
		top: 0;
		left: 100%;
		padding-top: calc(50px + 16vh);
		background-color: #485358;
		opacity: 0;
		overflow: hidden;
		transition: width 0s linear .3s, opacity .2s linear .1s;
	}
	.main-menu-open:not(.sp) #main-menu nav > ul > li > ul > li:hover > ul,
	.main-menu-open.sp #main-menu nav > ul > li > ul > li.hover > ul {
		opacity: 1;
		width: 100%;
		transition: width 0s linear .1s, opacity .2s linear .1s;
	}

	#main-menu nav > ul > li > ul > li > ul > li > a {
		display: block;
		padding: 1.5vh 4vw;
		font-size: 1rem;
		color: #fff;
		transition: background-color .2s linear .1s, padding .3s cubic-bezier(0,.6,.4,1) .1s;
	}
	.main-menu-open:not(.sp) #main-menu nav > ul > li > ul > li > ul > li > a:hover,
	.main-menu-open.sp #main-menu nav > ul > li > ul > li > ul > li > a.hover {
		background-color: rgba(255, 255, 255, .05);
		padding: 1.5vh 3.5vw 1.5vh 4.5vw;
	}

	#main-menu ul button {display: none;}

	.sp #main-menu ul button {
		position: absolute;
		display: block;
		width: 15%;
		height: 12vh;
		right: 0;
		margin-top: -12vh;
		text-indent: -9999px;
		overflow: hidden; 
		opacity: 0;
		transform: translate3d(0, 100px, 0);
		transition: opacity .3s linear, transform .7s linear;
	}
	.sp.main-menu-open #main-menu ul button {
		opacity: 1;
		transform: translate3d(0, 0, 0);
		transition: opacity .7s linear .5s, transform .7s cubic-bezier(0,.7,.3,1) .5s;
	}
	.sp #main-menu ul button:before {
		content: "";
		position: absolute;
		display: block;
		width: 16px;
		height: 2px;
		top: 50%;
		left: 50%;
		margin: -13px 0 0 -8px;
		background-color: #fff;
		border-radius: 2px;
	}
	.sp #main-menu ul button:after {
		content: "";
		position: absolute;
		display: block;
		width: 2px;
		height: 16px;
		top: 50%;
		left: 50%;
		margin: -20px 0 0 -1px;
		background-color: #fff;
		border-radius: 2px;
		transition: transform .2s linear;
	}
	.sp #main-menu ul button.active:after {transform: rotate(90deg);}

	.sp #main-menu nav > ul > li > ul > li > button {
		height: 45px;
		margin-top: -45px;
	}
	.sp #main-menu nav > ul > li > ul > li > button:before {margin: -1px 0 0 -8px;}
	.sp #main-menu nav > ul > li > ul > li > button:after {margin: -8px 0 0 -1px;}

}

.main-menu-close #main-menu,
.main-menu-close .main-menu-bg div {transition: none !important;}

@media screen and (min-width: 768px), print {

	.main-menu-bg div {
		position: fixed;
		width: calc((100% - 70px) / 6 + 1px);
		height: 0;
		top: 0;
		background-color: #344046;
		overflow: hidden;
		transition: height .5s cubic-bezier(.8,0,.2,1);
	}
	.main-menu-bg div:nth-of-type(1) {left: 0; width: 70px; transition-delay: .3s; border-right: solid 1px rgba(255, 255, 255, .08);}
	.main-menu-bg div:nth-of-type(2) {left: 70px; transition-delay: .25s;}
	.main-menu-bg div:nth-of-type(3) {left: calc((100% - 70px) * (1 / 6) + 70px); transition-delay: .2s;}
	.main-menu-bg div:nth-of-type(4) {left: calc((100% - 70px) * (2 / 6) + 70px); transition-delay: .15s; border-left: solid 1px rgba(255, 255, 255, .08);}
	.main-menu-bg div:nth-of-type(5) {left: calc((100% - 70px) * (3 / 6) + 70px); transition-delay: .1s;}
	.main-menu-bg div:nth-of-type(6) {left: calc((100% - 70px) * (4 / 6) + 70px); transition-delay: .05s; border-left: solid 1px rgba(255, 255, 255, .08);}
	.main-menu-bg div:nth-of-type(7) {left: calc((100% - 70px) * (5 / 6) + 70px); transition-delay: 0s;}

	.main-menu-bg div:nth-of-type(6):before,
	.main-menu-bg div:nth-of-type(7):before {
		content: "";
		position: absolute;
		display: block;
		width: 200%;
		height: 100vh;
		top: 0;
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover;
		transition: width 0s linear .3s, opacity .3s linear;
		background-image: url(../images/top_mv_img_01.jpg);
	}
	.main-menu-bg div:nth-of-type(6):before {left: 0;}
	.main-menu-bg div:nth-of-type(7):before {right: 0;}

	.main-menu-open .main-menu-bg div {height: 100%;}
	.main-menu-open .main-menu-bg div:nth-of-type(1) {transition-delay: 0s;}
	.main-menu-open .main-menu-bg div:nth-of-type(2) {transition-delay: .05s;}
	.main-menu-open .main-menu-bg div:nth-of-type(3) {transition-delay: .1s;}
	.main-menu-open .main-menu-bg div:nth-of-type(4) {transition-delay: .15s;}
	.main-menu-open .main-menu-bg div:nth-of-type(5) {transition-delay: .2s;}
	.main-menu-open .main-menu-bg div:nth-of-type(6) {transition-delay: .25s;}
	.main-menu-open .main-menu-bg div:nth-of-type(7) {transition-delay: .3s;}

}

@media screen and (max-width: 767px), print {

	.main-menu-bg div {
		position: fixed;
		width: calc((100% - 50px) / 4 + 1px);
		height: 0;
		top: 0;
		background-color: #344046;
		overflow: hidden;
		transition: height .5s cubic-bezier(.8,0,.2,1);
	}
	.main-menu-bg div:nth-of-type(1) {left: 0; width: 50px; transition-delay: .2s; border-right: solid 1px rgba(255, 255, 255, .08);}
	.main-menu-bg div:nth-of-type(2) {left: 50px; transition-delay: .15s;}
	.main-menu-bg div:nth-of-type(3) {left: calc((100% - 50px) * (1 / 4) + 50px); transition-delay: .1s;}
	.main-menu-bg div:nth-of-type(4) {left: calc((100% - 50px) * (2 / 4) + 50px); transition-delay: .05s;}
	.main-menu-bg div:nth-of-type(5) {left: calc((100% - 50px) * (3 / 4) + 50px); transition-delay: 0s;}
	.main-menu-bg div:nth-of-type(6),
	.main-menu-bg div:nth-of-type(7) {display: none;} 

	.main-menu-open .main-menu-bg div {height: 100%;}
	.main-menu-open .main-menu-bg div:nth-of-type(1) {transition-delay: 0s;}
	.main-menu-open .main-menu-bg div:nth-of-type(2) {transition-delay: .05s;}
	.main-menu-open .main-menu-bg div:nth-of-type(3) {transition-delay: .1s;}
	.main-menu-open .main-menu-bg div:nth-of-type(4) {transition-delay: .15s;}
	.main-menu-open .main-menu-bg div:nth-of-type(5) {transition-delay: .2s;}

}


/*---------------------------------------------
	Content
  ---------------------------------------------*/

#top-content {
	position: fixed;
	z-index: 1000;
	width: calc(100% - 70px);
	height: 100%;
	top: 0;
	right: 0;
	overflow: hidden;
}

#top-scroll {
	position: relative;
	width: 10000%;
	height: 100%;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	will-change: transform;
}



/*---------------------------------------------
	Effect
  ---------------------------------------------*/

/* Circle */
.effect-circle span:first-child {
	position: absolute;
	display: block;
	width: 25px;
	height: 50px;
	top: 0;
	right: 25px;
	overflow: hidden;
}
.effect-circle span:first-child:before {
	content: "";
	position: absolute;
	display: block;
	width: 200%;
	height: 100%;
	top: 0;
	left: 0;
	border: solid 1px rgba(255, 255, 255, .4);
	border-radius: 100%;
}
.effect-circle span:first-child:after {
	content: "";
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	border-top: solid 1px rgba(255, 255, 255, .8);
	border-left: solid 1px rgba(255, 255, 255, .8);
	border-bottom: solid 1px rgba(255, 255, 255, .8);
	border-radius: 25px 0 0 25px;
	transform: rotate(-180deg);
	transform-origin: center right;
	transition: transform .2s cubic-bezier(.7,0,1,.3);
}
html:not(.sp) .effect-circle:hover span:first-child:after {
	transform: rotate(0deg);
	transition: transform .2s cubic-bezier(0,.7,.3,1) .2s;
}
.effect-circle span:last-child {
	position: absolute;
	display: block;
	width: 25px;
	height: 50px;
	top: 0;
	right: 0;
	overflow: hidden;
}
.effect-circle span:last-child:before {
	content: "";
	position: absolute;
	display: block;
	width: 200%;
	height: 100%;
	top: 0;
	right: 0;
	border: solid 1px rgba(255, 255, 255, .4);
	border-radius: 100%;
}
.effect-circle span:last-child:after {
	content: "";
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	border-top: solid 1px rgba(255, 255, 255, .8);
	border-right: solid 1px rgba(255, 255, 255, .8);
	border-bottom: solid 1px rgba(255, 255, 255, .8);
	border-radius: 0 25px 25px 0;
	transform: rotate(-180deg);
	transform-origin: center left;
	transition: transform .2s cubic-bezier(0,.7,.3,1) .2s;
}
html:not(.sp) .effect-circle:hover span:last-child:after {
	transform: rotate(0deg);
	transition: transform .2s cubic-bezier(.7,0,1,.3);
}


/* Text In */
#top-copy .effect-txt-in {display: block;}
#top-copy .effect1,
#top-copy .effect2 {overflow: hidden;}

#top-copy .effect-txt-in > span,
#top-copy .effect-txt-in > a {
	display: inline-block;
	opacity: 1;
	transform: translate3d(0, 2em, 0);
	transform-origin: top left;
}
#top-copy .effect3 > span,
#top-copy .effect4 > span,
#top-copy .effect5 > span,
#top-copy .effect6 > a {
	opacity: 0;
	transform: translate3d(0, 50px, 0);
}
#top-copy.effect-start .effect-txt-in > span,
#top-copy.effect-start .effect-txt-in > a {
	opacity: 1;
	transform: translate3d(0, 0, 0);
	transition: opacity .6s linear, transform .6s cubic-bezier(0,.6,.4,1);
}
#top-copy.effect-start .effect3 > span,
#top-copy.effect-start .effect4 > span,
#top-copy.effect-start .effect5 > span,
#top-copy.effect-start .effect6 > a {transition-delay: .5s;}



/*---------------------------------------------
	Top
  ---------------------------------------------*/

.top-page ~ canvas {
	position: fixed;
	display: block;
	width: 100%;
	height: 100%;
	top: 50%;
	left: 50%;
	object-fit: cover;
	transform: translate(-50%, -50%);
}



/*---------------------------------------------
	Top Copy
  ---------------------------------------------*/

#top-copy {
	position: absolute;
	z-index: 1;
	bottom: 6vh;
	padding-left: 4vw;
	color: #fff;
	line-height: 1.5;
	opacity: 0;
	transition: transform .5s cubic-bezier(.5,0,.5,1);
	backface-visibility: hidden;
}
#top-copy.effect-start {opacity: 1;}

#top-copy h1 {
	margin-bottom: 2vh;
	font-size: calc(1.8vw + .7rem);
	line-height: 1.5;
	font-weight: 400;
}

#top-copy ul li {
	font-size: .9375rem;
	margin-bottom: 8px;
}
#top-copy ul li:last-child {margin-bottom: 2vh;}

#top-copy .link-icon {font-size: .9375rem;}

#top-copy .link-icon a {
	position: relative;
	display: inline-block;
	height: 50px;
	padding: 15px 90px 0 0;
	color: #fff;
	text-decoration: none;
}
#top-copy .link-icon a:before {
	content: "";
	position: absolute;
	display: block;
	width: 50px;
	height: 2px;
	top: 24px;
	right: 23px;
	background-color: #fff;
	border-radius: 2px;
	transition: right .2s linear, width .2s linear;
}
#top-copy .link-icon a:after {
	content: "";
	position: absolute;
	display: block;
	width: 8px;
	height: 8px;
	top: 21px;
	right: 23px;
	border-top: solid 2px #fff;
	border-right: solid 2px #fff;
	transform: rotate(45deg);
	transition: right .2s linear;
}
html:not(.sp) #top-copy .link-icon a:hover:before {
	width: 53px;
	right: 20px;
}
html:not(.sp) #top-copy .link-icon a:hover:after {right: 20px;}

#top-copy .sub-copy{
	max-width:calc(1.8vw * 12.5 + .7rem * 12.5 );
	line-height: 2em;
}


/*---------------------------------------------
	Panel
  ---------------------------------------------*/

.top-elm {
	position: relative;
	float: left;
	width: calc(1% / 6);
	height: 100%;
}
.top-panel > .top-elm {
	position: absolute;
	top: 0;
	right: 0;
}

.top-panel {
	position: relative;
	display: block;
	height:	100%;
	padding-top: calc(50px + 18vh);
	color: #fff;
	text-decoration: none;
	overflow: hidden;
}
html:not(.sp) .top-panel:hover {color: #fff;}
.top-panel:before {
	content: "";
	position: absolute;
	display: block;
	width: 1px;
	height: 100%;
	top: 0;
	left: 0;
	background-color: rgba(255, 255, 255, .12);
}
.top-elm:nth-of-type(2) .top-panel:before {content: none;}

.top-panel.panel-service {overflow: visible;}
.top-panel.panel-service:first-child {height:	calc((100% - 50px - 18vh) / 2 + 50px + 18vh);}
.top-panel.panel-service:last-child {
	height:	calc((100% - 50px - 18vh) / 2);
	padding-top: 0;
}

.top-panel h2 {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	overflow: hidden;
}

.top-panel h2 .heading-scroll {
	position: absolute;
	display: flex;
	width: 100%;
	top: 0;
	right: 1em;
	color: #fff;
	font-family: 'Cinzel', serif;
	font-size: calc(14.5vh - 8px);
	text-transform: uppercase;
	letter-spacing: -.01em;
	line-height: 1.4;
	white-space: nowrap;
	justify-content: flex-end;
	align-items: flex-end;
	transform: rotate(-90deg);
	transform-origin: right top;
}
.top-panel h2 .heading-scroll-strategy-design{
	top: -60svh;
}
@media all and (-ms-high-contrast: none) {
	.top-panel h2 .heading-scroll {top: 480%;}
}

.top-panel h2 .heading-scroll span {
	position: relative;
	display: block;
	padding: 0 calc(50px + 18vh) 0 6vh;
}
.top-panel h2 .heading-scroll span:before {
	content: "";
	position: absolute;
	display: block;
	width: calc(50px + 13vh);
	height: 1px;
	top: .65em;
	right: 0;
	background-color: #fff;
}

.top-panel.panel-service p {line-height: 1.5;}

.top-panel .label {
	margin: 0 0 3vh;
	padding: 0 2vw;
	font-size: .875rem;
	text-transform: uppercase;
}
.top-panel.panel-service .label {
	margin-bottom: 1vh;
	line-height: 1.8;
}
.top-panel .label:before {
	content: "";
	position: absolute;
	display: block;
	width: 1px;
	height: 1.1em;
	top: .3em;
	left: 0;
	background-color: #fff;
}

.top-panel .icon {
	margin: 0 0 3vh;
	text-align: center
}
.top-panel.panel-service .icon {
	margin-bottom: 0;
}
.top-panel .icon:after {content: none;}

.top-panel .icon span {
	position: relative;
	z-index: 1;
	display: inline-block;
	width: 100px;
	height: 100px;
	border-radius: 50px;
	overflow: hidden;
}

.top-panel .icon span img {
	position: absolute;
	display: block;
	width: auto;
	max-width: none;
	height: 100%;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
}

.top-panel dl {
	position: relative;
	padding: 0 2vw;
}

.top-panel dt {
	margin-bottom: 20px;
	font-size: 1.13rem;
	font-weight: bold;
	line-height: 1.6;
}

.top-panel dd {
	font-size: .875rem;
	line-height: 1.8;
}

.listBox1 .date,
.listBox2 .date,
.top-panel .date {
	position: relative;
	width: calc(100% - 4vw);
	max-width: 140px;
	margin: 0 auto 3vh;
	padding: 0;
	color: #fff;
}
.listBox1 .date,
.listBox2 .date {margin-bottom: 5%;}
.listBox1 .date {
	display: table-cell;
	width: 25%;
	max-width: none;
	margin: 0;
	color: #233036;
}
.listBox2 .large-box .date {margin: 0 auto 1.66666666%;}

.listBox2 .date:before,
.top-panel .date:before {
	content: "";
	display: block;
	padding-top: 71.4285%;
}

.listBox1 time,
.listBox2 time,
.top-panel time {
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	text-indent: -9999px;
	text-transform: uppercase;
	overflow: hidden;
}
@media all and (-ms-high-contrast: none) {
	.listBox1 time {height: 250px;}
}

.listBox1 time:before,
.listBox2 time:before,
.top-panel time:before {
	content: attr(data-day);
	position: absolute;
	display: flex;
	width: 100%;
	height: 65%;
	padding-bottom: 3px;
	top: 0;
	left: 0;
	font-size: 2.5rem;
	font-family: 'Cinzel', serif;
	text-align: center;
	text-indent: 0;
	line-height: 1;
	align-items: flex-end;
	justify-content: center;
}
.listBox1 time:before {height: 55%;}
.listBox1 time:after,
.listBox2 time:after,
.top-panel time:after {
	content: attr(data-year);
	position: absolute;
	display: flex;
	width: 100%;
	height: 35%;
	padding-top: 3px;
	bottom: 0;
	left: 0;
	font-size: .91rem;
	font-family: 'Cinzel', serif;
	text-align: center;
	text-indent: 0;
	line-height: 1;
	align-items: flex-start;
	justify-content: center;
}
.listBox1 time:after {height: 45%;}

.top-panel p {
	position: relative;
	padding: 0 2vw;
	font-size: 1.13rem;
	line-height: 1.8;
}

.top-elm .bg {
	position: absolute;
	width: calc(200% + 70px);
	height: 100%;
	top: 0;
	left: 0;
	background-color: #233036;
	overflow: hidden;
	will-change: width, height;
}

.top-elm .bg .bg-img {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	opacity: .4;
	transition: transform .5s cubic-bezier(0,0,.2,1);
}
html:not(.sp):not(.is-scrolling) .top-elm a:hover .bg .bg-img {transform: scale(1.1);}
@media all and (-ms-high-contrast: none) {
	html:not(.sp):not(.is-scrolling) .top-elm a:hover .bg .bg-img {
		transform: none;
		transition: none;
	}
}

.top-elm .txt {
	margin: 0 auto;
	transform: translate3d(0, 0, 0);
	transition: transform .5s cubic-bezier(0,0,.2,1), opacity .5s linear;
}
html:not(.sp):not(.is-scrolling) .top-elm a:hover .txt {
	transform: translate3d(0, -30px, 0);
}

.top-panel .btn-panel {
	position: absolute;
	width: 50px;
	height: 50px;
	top: calc(260px + 42vh);
	left: 50%;
	margin: 0 0 0 -25px;
	padding: 0;
	text-indent: -9999px;
	overflow: hidden;
}

.top-panel .btn-panel:before {
	content: "";
	position: absolute;
	display: block;
	width: 17px;
	height: 2px;
	top: 24px;
	right: 18px;
	background-color: #fff;
	border-radius: 2px;
	transform: translate3d(-50px, 0, 0);
	transition: transform .5s cubic-bezier(0,0,.2,1);
}
html:not(.sp):not(.is-scrolling) .top-panel:hover .btn-panel:before {transform: translate3d(0, 0, 0);}

.top-panel .btn-panel:after {
	content: "";
	position: absolute;
	display: block;
	width: 8px;
	height: 8px;
	top: 21px;
	right: 17px;
	border-top: solid 2px #fff;
	border-right: solid 2px #fff;
	transform: translate3d(-50px, 0, 0) rotate(45deg);
	transition: transform .5s cubic-bezier(0,0,.2,1);
}
html:not(.sp):not(.is-scrolling) .top-panel:hover .btn-panel:after {transform: translate3d(0, 0, 0) rotate(45deg);}

.top-panel .btn-panel span:before {content: none;}
html:not(.sp):not(.is-scrolling) .top-panel:hover span:first-child:after {
	transform: rotate(0deg);
	transition: transform .2s cubic-bezier(0,.7,.3,1) .2s;
}
html:not(.sp):not(.is-scrolling) .top-panel:hover span:last-child:after {
	transform: rotate(0deg);
	transition: transform .2s cubic-bezier(.7,0,1,.3);
}

.index-link.link-icon{
	padding: 160px 0 0 0;
	text-align: center;
}

.index-link.link-icon .effect-circle {
	position: relative;
	display: inline-block;
	height: 50px;
	padding: 0;
	color: #fff;
	width: 100%;
	transition: transform .5s cubic-bezier(0,0,.2,1), opacity .5s linear;
}
html:not(.sp) a:hover .index-link.link-icon .effect-circle{
	color: #FFF;
}

@media screen and (min-width: 960px) {
	html:not(.sp) a:hover .index-link.link-icon .effect-circle{transform:translate3d(0, -15px, 0);}
}

.index-link.link-icon .effect-circle:before {
	content: "";
	position: absolute;
	width: 50%;
	height: 1px;
	bottom: -24px;
	left: 0px;
	background-color: #fff;
	border-radius: 1px;
	transition: left .2s linear, width .2s linear,transform .5s cubic-bezier(0,0,.2,1), opacity .5s linear;
}

.index-link.link-icon .effect-circle:after {
	content: "";
	position: absolute;
	width: 8px;
	height: 8px;
	bottom: -27px;
	left: calc(50% - 6px);
	border-top: solid 2px #fff;
	border-right: solid 2px #fff;
	transform: rotate(45deg);
	transition: left .2s linear,transform .5s cubic-bezier(0,0,.2,1), opacity .5s linear !important;
}

html:not(.sp) a:hover .index-link.link-icon .effect-circle:after {
	transform: rotate(45deg);
	left: calc(50% - 3px);
}

@media screen and (min-width: 960px) {
	html:not(.sp) a:hover .index-link.link-icon .effect-circle:after {transform: translate3d(0, 15px, 0) rotate(45deg);}
}

html:not(.sp) a:hover .index-link.link-icon .effect-circle:before {
	width: calc(50% + 3px);
	left: 0;
}

@media screen and (min-width: 960px) {
	html:not(.sp) a:hover .index-link.link-icon .effect-circle:before {transform:  translate3d(0, 15px, 0);}
}

/* .index-link circle */
.index-link .effect-circle span:first-child {
	top: auto;
	bottom: -48px;
	left: calc(50% - 25px);
	transition: transform .5s cubic-bezier(0,0,.2,1), opacity .5s linear;
}

.index-link .effect-circle span:last-child {
	top: auto;
	bottom: -48px;
	left: 50%;
	transition: transform .5s cubic-bezier(0,0,.2,1), opacity .5s linear;
}
@media screen and (min-width: 960px) {
	html:not(.sp) a:hover .index-link .effect-circle span:first-child,
	html:not(.sp) a:hover .index-link .effect-circle span:last-child{
		transform:translate3d(0, 15px, 0);
	}
}


/*---------------------------------------------
	Top Strength
  ---------------------------------------------*/

.top-panel-strength{
	overflow: visible;
}
.top-strength-header{
	position: absolute;
	width:300%;
	height: 100%;
	top: 0;
	left: 0;
	padding-top:calc(50px + 18vh);
	z-index: 100000;
}

.top-strength-morphing {
	position: absolute;
	width: 100%;
	color: #fff;
	min-height: 100vh;

	z-index: 100000;
}

.mw_done .top-strength-morphing{
	animation: morphing 6s ease-in-out;
}

.top-strength-morphing-word{
	font-family: "Oxygen", sans-serif;
	font-weight: 300;
	font-style: normal;
	line-height: 1em;
	font-size: 64px;
	color: #fff;
	text-align: center;
	opacity: 0;
	letter-spacing: 4px;
	word-break: normal;
	word-wrap: normal;
	margin-top: -7px;
}

.standby .top-strength-morphing-word{
	opacity: 1;
}

.mw_done .top-strength-morphing-word{
	animation: word 4s ease-in-out,opacity 4s ease-in,spacing 3s ease;
}

.top-strength-morphing-word2{
	position: absolute;
	top: 0;
	width: 100%;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
}

.standby .top-strength-morphing-word2{
	opacity: 0;
}

.mw_done .top-strength-morphing-word2{
	animation: word2 6s ease-in-out;
}

.top-strength-morphing-word2 img{
	width: 254px;
}

@keyframes word {
	0%{
		filter: blur(0px);
	}
	5%{
		filter: blur(0px);
	}
	80% {
		filter: blur(1em);
	}
	100% {
		filter: blur(1em);
	}
}
@keyframes opacity {
	0%,40%{
		opacity: 1;
	}
	50%,100% {
		opacity: 0;
	}
}
@keyframes spacing {
	0%{
		letter-spacing: 4px;
	}
	10%{
		letter-spacing: 4px;
	}
	30% {
		letter-spacing: -15px;
	}
	100% {
		letter-spacing: -15px;
	}
}
@keyframes word2 {
	0%,10%{
		filter: blur(1em);
		opacity: 0;
	}
	30%,100%{
		filter: blur(0px);
		opacity: 1;
	}
}

@keyframes morphing{
	0%, 5%{
		filter: none;
	}
	50%{
		filter: contrast(25) blur(1px);
	}
	80%,100%{
		filter: none;
	}
}

.top-panel .top-strength-copy{
	font-size: 1.5rem;
	text-align: center;
	margin-top: 62px;
	font-weight: 600;
}

.top-strength-image{
	margin-top: -40px;
	width: 100%;
	text-align: center;
}

.top-strength-image img{
	width: min(84%, 80svh, 700px);
}

.top-strength-mountain-base{
	display: inline-block;
	
	width: 540px;
	height: 340px;

	position: relative;
	position: absolute;
	left: calc(50% - 270px);
	top:calc(50px + 18vh + 180px);
}
.top-strength-mountain-lyset{
	margin-top: 100px;
	transform-style:preserve-3d;
	transform:perspective(2000px) rotateX(65deg) rotateY(5deg) rotateZ(0deg);
}
.top-strength-mountain-ly {
	width: 540px;
	height: 340px;
	position: absolute;
}
.l1 {
	transform: rotateX(0deg) rotateY(5deg) rotateZ(0deg);
}
.l2{
	transform: rotateX(0deg) rotateY(5deg) rotateZ(0deg);
}
.l3{
	transform: rotateX(0deg) rotateY(5deg) rotateZ(0deg);
}
.l4{
	transform: rotateX(0deg) rotateY(5deg) rotateZ(0deg);
}
.l5{
	transform: rotateX(0deg) rotateY(5deg) rotateZ(0deg);
}
.l6{
	transform: rotateX(0deg) rotateY(5deg) rotateZ(0deg);
}
.l7{
	transform: rotateX(0deg) rotateY(5deg) rotateZ(0deg);
}
.l8{
	transform: rotateX(0deg) rotateY(5deg) rotateZ(0deg);
}
.l9{
	transform: rotateX(0deg) rotateY(5deg) rotateZ(0deg);
}
.l10{
	transform: rotateX(0deg) rotateY(5deg) rotateZ(0deg);
}
.l11{
	transform: rotateX(0deg) rotateY(5deg) rotateZ(0deg);
}
.l12{
	transform: rotateX(0deg) rotateY(5deg) rotateZ(0deg);
}
.l13{
	transform: rotateX(0deg) rotateY(5deg) rotateZ(0deg);
}
.l14{
	transform: rotateX(0deg) rotateY(5deg) rotateZ(0deg);
}


.up_done .l1 {
	translate: 0 0 0;
	animation: rotatelayer linear;
}
.up_done .l2{
	translate: 0px max(-5.2vw, -40px) 0;
	animation: uplayer2 2s ease;
}
.up_done .l3{
	translate: 0px max(-10.4vw, -80px) 0;
	animation: uplayer3 2s ease;
}
.up_done .l4{
	translate: 0px max(-15.6vw, -120px) 0;
	animation: uplayer4 2s ease;
}
.up_done .l5{
	translate: 0px max(-20.8vw, -160px) 0;
	animation: uplayer5 2s ease;
}
.up_done .l6{
	translate: 0px max(-26vw, -200px) 0;
	animation: uplayer6 2s ease;
}
.up_done .l7{
	translate: 0px max(-31.2vw, -240px) 0;
	animation: uplayer7 2s ease;
}
.up_done .l8{
	translate: 0px max(-36.4vw, -280px) 0;
	animation: uplayer8 2s ease;
}
.up_done .l9{
	translate: 0px max(-41.6vw, -320px) 0;
	animation: uplayer9 2s ease;
}
.up_done .l10{
	translate: 0px max(-46.8vw, -360px) 0;
	animation: uplayer10 2s ease;
}
.up_done .l11{
	translate: 0px max(-52vw, -400px) 0;
	animation: uplayer11 2s ease;
}
.up_done .l12{
	translate: 0px max(-57.2vw, -440px) 0;
	animation: uplayer12 2s ease;
}
.up_done .l13{
	translate: 0px max(-62.4vw, -480px) 0;
	animation: uplayer13 2s ease;
}
.up_done .l14{
	translate: 0px max(-67.6vw, -520px) 0;
	animation: uplayer14 2s ease;
}

@keyframes uplayer2 {
	0%{
		translate: 0 0 0;
	}
	100% {
		translate: 0px max(-5.2vw, -40px) 0;
	}
}
@keyframes uplayer3 {
	0%{
		translate: 0 0 0;
	}
	100% {
		translate: 0px max(-10.4vw, -80px) 0;
	}
}
@keyframes uplayer4 {
	0%{
		translate: 0 0 0;
	}
	100% {
		translate: 0px max(-15.6vw, -120px)  0;
	}
}
@keyframes uplayer5 {
	0%{
		translate: 0 0 0;
	}
	100% {
		translate: 0px max(-20.8vw, -160px) 0;
	}
}
@keyframes uplayer6 {
	0%{
		translate: 0 0 0;
	}
	100% {
		translate: 0px max(-26vw, -200px) 0;
	}
}
@keyframes uplayer7 {
	0%{
		translate: 0 0 0;
	}
	100% {
		translate: 0px max(-31.2vw, -240px) 0;
	}
}
@keyframes uplayer8 {
	0%{
		translate: 0 0 0;
	}
	100% {
		translate: 0px max(-36.4vw, -280px) 0;
	}
}
@keyframes uplayer9 {
	0%{
		translate: 0 0 0;
	}
	100% {
		translate: 0px max(-41.6vw, -320px) 0;
	}
}
@keyframes uplayer10 {
	0%{
		translate: 0 0 0;
	}
	100% {
		translate: 0px max(-46.8vw, -360px) 0;
	}
}
@keyframes uplayer11 {
	0%{
		translate: 0 0 0;
	}
	100% {
		translate: 0px max(-52vw, -400px) 0;
	}
}
@keyframes uplayer12 {
	0%{
		translate: 0 0 0;
	}
	100% {
		translate: 0px max(-57.2vw, -440px) 0;
	}
}
@keyframes uplayer13 {
	0%{
		translate: 0 0 0;
	}
	100% {
		translate: 0px max(-62.4vw, -480px) 0;
	}
}
@keyframes uplayer14 {
	0%{
		translate: 0 0 0;
	}
	100% {
		translate: 0px max(-67.6vw, -520px) 0;
	}
}

/*
.top-panel .top-strength-dl dt{
	min-height: calc(1.13rem * 1.6 *3);
}
*/

@media screen and (max-width: 767px) {
	.top-panel .top-strength-dl dt{
		min-height: 0;

	}	
}





/*---------------------------------------------
	Footer
  ---------------------------------------------*/

footer {
	position: fixed;
	z-index: 30000;
	display: none;
	width: 100%;
	height: 0;
	bottom: 0;
	right: 0;
	background-color: #233036;
	overflow: hidden;
	transform: translate3d(0, 0, 0);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
_::-webkit-full-page-media, _:future, :root footer {
	display: block !important;
}

.top-page footer {
	width: 0;
	height: 100%;
}
.sp #wrapper:not(.top-page) footer {
	position: relative;
	width: calc(100% - 70px);
	height: auto !important;
	margin: 0 0 0 auto;
}

footer .logo	{
	position: absolute;
	left: 4vw;
}

footer .logo20th{
	left: calc(4vw + 152px);
}

footer .tagline {
	position: absolute;
	/*left: calc(4vw + 80px);*/
	left: calc(4vw + 152px);
}
.sp #wrapper:not(.top-page) footer .tagline {display: none;}

footer .btn-menu {
	position: absolute;
	left: -70px;
}
.sp #wrapper:not(.top-page) footer .btn-menu {display: none;}

footer .gnav-main {
	position: absolute;
	left: -70px;
}
.sp #wrapper:not(.top-page) footer .gnav-main {display: none;}

footer .gnav-sub {position: absolute;}

#footer-content {
	position: absolute;
	width: calc(100vw - 70px);
	height: 100vh;
	bottom: 0;
	right: 0;
	padding-top: calc(50px + 18vh);
	transform: translate3d(0, 0, 0);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
.sb10 #footer-content {width: calc(100vw - 80px);}
.sb11 #footer-content {width: calc(100vw - 81px);}
.sb12 #footer-content {width: calc(100vw - 82px);}
.sb13 #footer-content {width: calc(100vw - 83px);}
.sb14 #footer-content {width: calc(100vw - 84px);}
.sb15 #footer-content {width: calc(100vw - 85px);}
.sb16 #footer-content {width: calc(100vw - 86px);}
.sb17 #footer-content {width: calc(100vw - 87px);}
.sb18 #footer-content {width: calc(100vw - 88px);}
.sb19 #footer-content {width: calc(100vw - 89px);}
.sb20 #footer-content {width: calc(100vw - 90px);}
_::-webkit-full-page-media, _:future, :root #footer-content {
	width: calc(100vw - 70px) !important;
}

@media screen and (-webkit-min-device-pixel-ratio: 0) {
	#footer-content {
		width: calc(100vw - 70px) !important;
	}
}
@-moz-document url-prefix() {
	.sb10 #footer-content {width: calc(100vw - 80px)!important}
	.sb11 #footer-content {width: calc(100vw - 81px)!important}
	.sb12 #footer-content {width: calc(100vw - 82px)!important}
	.sb13 #footer-content {width: calc(100vw - 83px)!important}
	.sb14 #footer-content {width: calc(100vw - 84px)!important}
	.sb15 #footer-content {width: calc(100vw - 85px)!important}
	.sb16 #footer-content {width: calc(100vw - 86px)!important}
	.sb17 #footer-content {width: calc(100vw - 87px)!important}
	.sb18 #footer-content {width: calc(100vw - 88px)!important}
	.sb19 #footer-content {width: calc(100vw - 89px)!important}
	.sb20 #footer-content {width: calc(100vw - 90px)!important}
}

.sp #wrapper:not(.top-page) #footer-content {position: relative;}

#footer-content:after {
	content: "";
	clear: both;
	display: block;
}

footer .contactList,
#footer-menu {
	position: relative;
	float: right;
	width: 66.66666666%;
	overflow: hidden;
}
footer .contactList {
	padding: 0;
	background-color: transparent;
}

footer .contactList .heading-en {
	width: calc(100% - 8vw);
	margin: 0 4vw !important;
}

footer .contactList address {color: rgba(255, 255, 255, .6);}

footer .contactList .btnLarge {padding: 0 4vw;}

#footer-content .col {
	float: left;
	width: 25%;
	padding: 0 2vw 20px;
}
#footer-content .col:nth-of-type(5) {clear: both;}

#footer-content li {line-height: 1.6;}

#footer-content .col > ul > li {
	margin: 0 0 20px;
}

#footer-content .col > ul > li > a {
	font-size: .875rem;
	font-weight: bold;
	color: #fff;
	text-decoration: none;
	transition: color .2s linear;
}
html:not(.sp) #footer-content .col > ul > li > a:hover {
	color: rgba(255, 255, 255, .6);
}

#footer-content li li {margin-bottom: .3vh;}
#footer-content li li:first-of-type {margin-top: 10px;}
#footer-content .footer-submenu li li:first-of-type {margin: 0;}

#footer-content li li a {
	font-size: .75rem;
	color: rgba(255, 255, 255, .6);
	text-decoration: none;
	transition: color .2s linear;
}
html:not(.sp) #footer-content li li a:hover {color: #fff;}

#footer-address {
	position: relative;
	float: left;
	width: 33.33333333%;
	padding: 0 4vw;
	font-size: .875rem;
	color: rgba(255, 255, 255, .6);
}

#footer-address p strong {
	display: inline-block;
	font-weight: bold;
	font-size: 1rem;
	color: #fff;
	margin-bottom: 20px;
}

#footer-address .logo {padding: 0 0 15px;}

#footer-address .logo img {opacity: .5;}

#footer-address address {margin: 0 0 3vh;}

#footer-address dl{padding: 0 0 30px;}

#footer-address dt {
	display: inline-block;
	margin: 0 10px 0 0;
}
#footer-address dd {
	display: inline-block;
	margin: 0 20px 0 0;
}
#footer-address dd:last-child {margin: 0;}

#footer-submenu {
	position: absolute;
	bottom: 6vh;
	left: 4vw;
}

#footer-submenu li {
	display: inline-block;
	margin: 0 20px 0 0;
	font-size: .75rem;
	line-height: 50px;
}

#footer-submenu li a {color: rgba(255, 255, 255, .6);}
html:not(.sp) #footer-submenu li a:hover {color: #fff;}

#footer-copyright {
	position: absolute;
	bottom: 6vh;
	right: calc(6vw + 148px);
	color: rgba(255, 255, 255, .6);
	line-height: 50px;
}

#footer-copyright small {font-size: .75rem;}

#footer-copyright p a {
	color: rgba(255, 255, 255, .6);
	text-decoration: none;
	transition: color .2s linear;
}
html:not(.sp) #footer-copyright p a:hover	{
	color: #fff;
}

#footer-address address br,
#footer-copyright br {display: none;}


/* ----- Scroll / Page Top Button ----- */

#btn-scroll {
	position: absolute;
	z-index: 30001;
	width: 50px;
	height: 50px;
	bottom: 6vh;
	right: calc(6vw - 60px);
}
.top-page #btn-scroll {
	position: fixed;
}
.top-page #btn-scroll:before {content: "Scroll";}

.top-page #btn-scroll button {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	text-indent: -9999px;
	overflow: hidden;
	border-radius: 50%;
	cursor: pointer;
}
.top-page #btn-scroll button:before {
	content: "";
	position: absolute;
	display: block;
	width: 17px;
	height: 2px;
	top: 24px;
	left: 16px;
	background-color: #fff;
	border-radius: 2px;
	transition: width .2s linear;
}
html:not(.sp) .top-page #btn-scroll button:hover:before {width: 20px;}
.top-page #btn-scroll button:after {
	content: "";
	position: absolute;
	display: block;
	width: 8px;
	height: 8px;
	top: 21px;
	right: 16px;
	border-top: solid 2px #fff;
	border-right: solid 2px #fff;
	transform: rotate(45deg);
	transition: right .2s linear;
}
html:not(.sp) .top-page #btn-scroll button:hover:after {right: 13px;}

#btn-pagetop {
	position: fixed;
	z-index: 30005;
	width: 50px;
	height: 50px;
	bottom: 6vh;
	right: calc(6vw - 60px);
}

#btn-pagetop a {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	text-indent: -9999px;
	overflow: hidden;
	background-color: #233036;
	border-radius: 50%;
}

#btn-pagetop a:before {
	content: "";
	position: absolute;
	display: block;
	width: 2px;
	height: 17px;
	bottom: 16px;
	left: 24px;
	background-color: #fff;
	border-radius: 2px;
	transition: height .2s linear;
}
html:not(.sp) #btn-pagetop a:hover:before {height: 20px;}

#btn-pagetop a:after {
	content: "";
	position: absolute;
	display: block;
	width: 8px;
	height: 8px;
	top: 16px;
	left: 21px;
	border-top: solid 2px #fff;
	border-left: solid 2px #fff;
	transform: rotate(45deg);
	transition: top .2s linear;
}
html:not(.sp) #btn-pagetop a:hover:after {top: 13px;}

@media screen and (min-width: 960px), print {

	.top-page #btn-pagetop {display: none;}

	.top-page #btn-pagetop a {
		background-color: transparent;
		transform: rotate(-90deg);
	}

	.top-page #btn-pagetop span:first-child {
		transform: rotate(90deg);
		transform-origin: center right;
	} 
	.top-page #btn-pagetop span:last-child {
		transform: rotate(90deg);
		transform-origin: center left;
	}

	#wrapper:not(.top-page) #btn-pagetop {
		transform: translate3d(0, 16vh, 0);
		transition: transform .3s ease-out;
	}
	#wrapper:not(.top-page) #btn-pagetop.show {transform: translate3d(0, 0, 0);}

	#wrapper:not(.top-page) #btn-pagetop.on-footer a {background-color: transparent;}
	#wrapper:not(.top-page) #btn-pagetop:not(.on-footer) span {display: none;}

}

@media screen and (max-width: 959px) {

	#btn-pagetop {
		transform: translate3d(0, 16vh, 0);
		transition: transform .3s ease-out;
	}

	.top-page #btn-pagetop a{background-color: transparent;}

	#btn-pagetop.show {transform: translate3d(0, 0, 0);}

	#btn-pagetop.on-footer a {background-color: transparent;}

}

@media all and (-ms-high-contrast: none) and (min-width: 960px), print {
	#wrapper:not(.top-page) #btn-pagetop {transform: translate3d(0, 150px, 0);}
	#wrapper:not(.top-page) #btn-pagetop.show {transform: translate3d(0, 0, 0);}
}
@media all and (-ms-high-contrast: none) and (max-width: 959px), print {
	#btn-pagetop {transform: translate3d(0, 150px, 0);}
	#btn-pagetop.show {transform: translate3d(0, 0, 0);}
}


/* ----- Button Label ----- */

.btn-menu:before,
#btn-scroll:before,
#btn-pagetop:before {
	position: absolute;
	display: block;
	top: 19px;
	right: 62px;
	line-height: 1;
	font-size: .75rem;
	text-transform: uppercase;
	color: #fff;
	vertical-align: top;
}



/*---------------------------------------------
	Page Transition
  ---------------------------------------------*/

#loader {
	position: fixed;
	z-index: 100001;
	width: 120px;
	height: 0;
	top: 50%;
	left: 50%;
	overflow: hidden;
	transform: translate(-50%, -50%);
	transition: height .0s linear .4s;
}
.page-transition #loader {
	height: 120px;
	transition: height .0s linear .5s;
}
.loader-show2 #loader {
	left: calc((100% - 70px) / 3 * 2 + 70px);
	transition: height .0s linear .5s;
}
.page-transition2 #loader {transition: height .0s linear .9s;}

#loader-logo {
	position: absolute;
	width: 70px;
	top: 48%;
	left: 50%;
	transform: translate(-50%, -50%);
}

#loader-tagline {
	display: block;
	width: 120px;
}
.loader-show #loader-tagline {animation: loader 5s linear infinite;}
@keyframes loader {
	0% {transform: rotate(0deg);}
	100% {transform: rotate(360deg);}
}

#transition-content-bg div {
	position: fixed;
	z-index: 100000;
	width: calc((100% - 70px) / 6 + 1px);
	height: 0;
	top: 0;
	background-color: #fff;
	transition: height .5s cubic-bezier(.8,0,.2,1);
}
#transition-content-bg div:nth-of-type(1) {left: 0; width: 70px; transition-delay: 0s;}
#transition-content-bg div:nth-of-type(2) {left: 70px; transition-delay: .05s;}
#transition-content-bg div:nth-of-type(3) {left: calc((100% - 70px) * (1 / 6) + 70px); transition-delay: .1s;}
#transition-content-bg div:nth-of-type(4) {left: calc((100% - 70px) * (2 / 6) + 70px); transition-delay: .15s;}
#transition-content-bg div:nth-of-type(5) {left: calc((100% - 70px) * (3 / 6) + 70px); transition-delay: .2s;}
#transition-content-bg div:nth-of-type(6) {left: calc((100% - 70px) * (4 / 6) + 70px); transition-delay: .25s;}
#transition-content-bg div:nth-of-type(7) {left: calc((100% - 70px) * (5 / 6) + 70px); transition-delay: .3s;}

.page-transition #transition-content-bg div,
.page-transition2 #transition-content-bg div {
	height: 100%;
	top: auto;
	bottom: 0;
}
.page-transition2 #transition-content-bg div:nth-of-type(1) {display: none;}
.page-transition2 #transition-content-bg div:nth-of-type(2) {display: none;}
.page-transition2 #transition-content-bg div:nth-of-type(3) {display: none;}
.page-transition2 #transition-content-bg div:nth-of-type(4) {left: calc((100% - 70px) * (2 / 6) + 70px); transition-delay: .5s;}
.page-transition2 #transition-content-bg div:nth-of-type(5) {left: calc((100% - 70px) * (3 / 6) + 70px); transition-delay: .55s;}
.page-transition2 #transition-content-bg div:nth-of-type(6) {left: calc((100% - 70px) * (4 / 6) + 70px); transition-delay: .6s;}
.page-transition2 #transition-content-bg div:nth-of-type(7) {left: calc((100% - 70px) * (5 / 6) + 70px); transition-delay: .65s;}

.top-panel.active:before {
	left: calc(50% + 35px);
	z-index: 1;
}

.top-panel.active .bg-img {
	opacity: .6;
	transform: scale(1) !important;
	transition: opacity .3s linear, transform .5s ease-out;
}

.top-panel.active .txt {
	opacity: 0;
	transition: opacity .3s linear;
}

.page-transition2 .logo img:nth-of-type(2),
.page-transition3 .logo img:nth-of-type(2) {
	opacity: 1;
	transition: opacity .2s linear .2s;
}

@media screen and (max-width: 1199px), print {

	#loader {transition: height .0s linear .45s;}
	.page-transition #loader {transition: height .0s linear .5s;}
	.loader-show3 #loader {
		top: 80%;
		left: calc(50% + 35px);
		transition: height .0s linear .45s;
	}
	.page-transition3 #loader {transition: height .0s linear .9s;}

	#transition-content-bg div {width: calc((100% - 70px) / 4 + 1px);}
	#transition-content-bg div:nth-of-type(2) {transition-delay: .1s;}
	#transition-content-bg div:nth-of-type(3) {left: calc((100% - 70px) * (1 / 4) + 70px); transition-delay: .2s;}
	#transition-content-bg div:nth-of-type(4) {left: calc((100% - 70px) * (2 / 4) + 70px); transition-delay: .3s;}
	#transition-content-bg div:nth-of-type(5) {left: calc((100% - 70px) * (3 / 4) + 70px); transition-delay: .4s;}
	#transition-content-bg div:nth-of-type(6) {display: none;}
	#transition-content-bg div:nth-of-type(7) {display: none;}

	.page-transition3 #transition-content-bg div:nth-of-type(1) {transition-delay: .45s;}
	.page-transition3 #transition-content-bg div:nth-of-type(2) {height: 40%; transition-delay: .5s;}
	.page-transition3 #transition-content-bg div:nth-of-type(3) {height: 40%; transition-delay: .55s;}
	.page-transition3 #transition-content-bg div:nth-of-type(4) {height: 40%; transition-delay: .6s;}
	.page-transition3 #transition-content-bg div:nth-of-type(5) {height: 40%; transition-delay: .65s;}

	.page-transition3 #transition-content-bg div {
		top: auto !important;
		bottom: 0 !important;
	}

	.page-transition4 #transition-content-bg div:nth-of-type(2),
	.page-transition4 #transition-content-bg div:nth-of-type(3),
	.page-transition4 #transition-content-bg div:nth-of-type(4),
	.page-transition4 #transition-content-bg div:nth-of-type(5) {top: 60%;}

}

@media screen and (max-width: 767px) {

	#loader {transition: height .0s linear .45s;}
	.page-transition #loader {transition: height .0s linear .5s;}
	.loader-show3 #loader {
		top: 80%;
		left: calc(50% + 25px);
		transition: height .0s linear .45s;
	}
	.page-transition3 #loader {transition: height .0s linear .9s;}

	#transition-content-bg div {width: calc((100% - 50px) / 4 + 1px);}
	#transition-content-bg div:nth-of-type(1) {width: 50px;}
	#transition-content-bg div:nth-of-type(2) {left: 50px;}
	#transition-content-bg div:nth-of-type(3) {left: calc((100% - 50px) * (1 / 4) + 50px);}
	#transition-content-bg div:nth-of-type(4) {left: calc((100% - 50px) * (2 / 4) + 50px);}
	#transition-content-bg div:nth-of-type(5) {left: calc((100% - 50px) * (3 / 4) + 50px);}

}



/*---------------------------------------------
	BG
  ---------------------------------------------*/

#bgImg {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	opacity: 0;
}
#bgImg.loaded {
	opacity: 1;
	transition: opacity .5s linear;
}
.page-transition2 #bgImg,
.page-transition3 #bgImg {opacity: 1;}

#bgImg .img {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}
.detail-page #bgImg .img {width: calc((100% - 70px) / 3 + 70px);}

#bgImg .img.bg-mask:after,
.detail-page.portfolio #bgImg .img:after,
.detail-page.recruit #bgImg .img:after,
.detail-page.column-page #bgImg .img:after {
	content: "";
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: #233036;
	opacity: .4;
}
#bgImg .img.no-mask:after{
	display: none !important;
}
#bgImg .img.low-mask:after{
	opacity: .2 !important;
}



/*---------------------------------------------
	BG Line
  ---------------------------------------------*/

.bg-line {
	position: absolute;
	width: calc(100% - 70px);
	height: 100%;
	top: 0;
	right: 0;
}
footer .bg-line {width: 100%;}

.bg-line div:before,
.bg-line div:after {
	content: "";
	position: absolute;
	display: block;
	width: 1px;
	height: 100%;
	background-color: rgba(255, 255, 255, .12);
	top: 0;
}
footer .bg-line div:before,
footer .bg-line div:after {
	background-color: rgba(255, 255, 255, .08);
}

.bg-line div:nth-of-type(1):before {left: 16.66666666%;}
.bg-line div:nth-of-type(1):after {left: 33.33333333%;}
.bg-line div:nth-of-type(2):before {left: 50%;}
.bg-line div:nth-of-type(2):after {left: 66.66666666%;}
.bg-line div:nth-of-type(3):before {left: 83.33333333%;}
.bg-line div:nth-of-type(3):after {content: none;}



/*---------------------------------------------
	Page Title
  ---------------------------------------------*/

#pageTitle {
	position: fixed;
	z-index: 9998;
	width: calc((100% - 70px) / 3);
	left: 70px;
	bottom: 0;
	padding: 0 4vw 7.5vh;
	color: #fff;
}
.top-page #pageTitle {
	position: absolute;
	width: .33333333%;
	left: 0;
}

#pageTitle a,
#pageTitle a:hover {color: #fff;}

#pageTitle .heading-en {
	margin-bottom: 1vh !important;
	padding: 0;
	color: #fff;
	font-size: calc(4.5vw + .1rem) !important;
/*	overflow: visible;*/
	white-space: normal;
}
#pageTitle .heading-en:after,
#pageTitle .heading-en span:after {content: none;}

#pageTitle .heading-en > span,
#pageTitle .heading-en span span {
	position: static;
	display: inline-block;
	width: auto;
	color: #fff;
	vertical-align: top;
	overflow: hidden;
}
#pageTitle .heading-en span span {
	transform: translate3d(0, 1.2em, 0);
	transition: transform .6s cubic-bezier(0,.6,.4,1);
}
#pageTitle.effect-start .heading-en span span {
	transform: translate3d(0, 0, 0);
}

#pageTitle h1:not(.heading-en),
#pageTitle .heading-jp {
	margin-bottom: 2vh;
	font-size: calc(1.5vw + .5rem);
	font-weight: bold;
	line-height: 1.4;
}
#pageTitle h1:last-child,
#pageTitle .heading-jp:last-child {margin-bottom: 0;}

#pageTitle .text {line-height: 1.8;}

#pageTitle h1:not(.heading-en),
#pageTitle .heading-jp,
#pageTitle .text ,
#breadcrumb {
	opacity: 0;
	transform: translate3d(0, 1.2em, 0);
	transition: opacity .6s linear .2s, transform .6s cubic-bezier(0,.6,.4,1) .2s;
}
#pageTitle .text,
#breadcrumb {
	transform: translate3d(0, 2.4em, 0);
}

#pageTitle.effect-start h1:not(.heading-en),
#pageTitle.effect-start .heading-jp,
#pageTitle.effect-start .text,
#breadcrumb.effect-start {
	opacity: 1;
	transform: translate3d(0, 0, 0);
}



/*---------------------------------------------
	Bread Crumb
  ---------------------------------------------*/

#breadcrumb {
	margin: 3vh 0 0;
}

#breadcrumb ol {
	margin: 0 auto;
	padding: 0;
	list-style: none;
	line-height: 1.4;
}

#breadcrumb li {
	position: relative;
	display: inline;
	margin: 0 0 10px 0;
	padding: 0 0 0 1.8em;
	color: #fff;
	font-size: 0.75rem;
	line-height: 1.4;
}

#breadcrumb li:before {
	content: "";
	position: absolute;
	display: block;
	top: 5px;
	left: 4px;
	width: 6px;
	height: 6px;
	padding: 0;
	border-top: 1px solid #fff;
	border-right: 1px solid #fff;
	border-radius: 0;
	background: transparent;
	transform: rotate(45deg);
	opacity: 0.5;
}
#breadcrumb li:first-child {padding-left: 0;}
#breadcrumb li:first-child:before {content: none;}
#breadcrumb li:last-child {font-weight: bold;}
#breadcrumb li a {
	color: #fff;
	text-decoration: none;
}
html:not(.sp) #breadcrumb li a:hover {
	text-decoration: underline;
}



/*---------------------------------------------
	Article
  ---------------------------------------------*/

main {overflow: hidden;}

#contentsArea {
	position :relative;
	z-index: 30001;
	width: calc((100% - 70px) / 3 * 2);
	min-height: 100%;
	margin: 0 0 100vh auto;
	padding: calc(10vh + 50px) 0 0;
}
.tabNav + main #contentsArea {padding-top: calc(17vh + 80px);}
.index-page .tabNav + main #contentsArea {padding-top: calc(17vh + 50px);}
.detail-page #contentsArea {background-color: #fff;}
.sp #wrapper:not(.top-page) #contentsArea {margin-bottom: 0 !important;}

#contents {
	position :relative;
	z-index: 10002;
	background-color: #fff;
}


/* ------ Contents ------ */

.contentsBox {
	padding: calc(3vw + 50px) 6vw calc(3vw + 30px);
	box-sizing: content-box;
	overflow: hidden;
}
.contentsBox.gray {background-color: #f1f5f8;}
.contentsBox.gray + .contentsBox.gray,
.contentsBox:not(.gray):not(.bgBox) + .contentsBox:not(.gray):not(.bgBox),
.contentsBox.bgBox + .contentsBox:not(.gray):not(.bgBox) {padding-top: 0;}
.contentsBox:not(.gray) + .contentsBox.bgBox {margin-top: calc(-3vw - 50px);}

.contentsBox.onlyBox {min-height: calc(90vh - 50px);}
.tabNav + main .contentsBox.onlyBox {min-height: calc(83vh - 80px);}

@media screen and (min-width: 1200px), print {
	.detail-page .contentsBox.bgBox:first-child {margin-top: calc(-3vw - 80px);}
	.detail-page .contentsBox:not(.bgBox):first-child {padding-top: 0;}
}

.contentsBox.bgBox {
	position: relative;
	padding: calc(6vw + 100px) 6vw calc(6vw + 80px);
}
.contentsBox.bgBox:before {
	content: "";
	position: absolute;
	width: 0;
	height: calc(100% - 6vw - 100px);
	top: calc(3vw + 50px);
	right: 0;
	background-color: #f1f5f8;;
	transition: width .8s cubic-bezier(.9,0,.1,1);
}
.contentsBox.bgBox.scroll-effect:before {
	width: 66.66666666%;
}

.contentsBox > * {position: relative;}

.contentsBox > h1 {
	margin: 0 0 60px;
	font-size: 1.875rem;
	font-weight: bold;
	line-height: 1.6;
	color: #233036;
}

.contentsBox > h2,
.listBox2 > h1,
.listBox2 > h2,
.listBox4 > h2,
#privacy h3 {
	margin: 80px 0 50px;
	font-size: 1.625rem;
	font-weight: bold;
	line-height: 1.6;
	color: #233036;
}
.contentsBox > h1 + h2,
.contentsBox > h2:first-child,
.listBox2 > h1:first-child,
.listBox2 > h2:first-child,
.listBox4 > h2:first-child,
#privacy h3:first-child {margin: 0 0 40px;}

.contentsBox > .heading-en + h2,
.listBox2 > .heading-en + h2,
.listBox4 > .heading-en + h2 {margin: -30px 0 60px;}

.contentsBox > h1 .sub,
.contentsBox > h2 .sub,
.listBox4 > h2 .sub {
	display: block;
	font-size: 1rem;
	font-weight: normal;
	line-height: 2;
	color: #9ca7af;
}

.contentsBox > h1 .sub {padding: 10px 0 0;}

.contentsBox > h3 {
	margin: 60px 0 30px;
	font-size: 1.25rem;
	font-weight: bold;
	line-height: 1.6;
	color: #233036;
}
/* .contentsBox > h2 + h3 {padding: 0 0 10px;}*/

.contentsBox > h4 {
	margin: 40px 0 20px;
	font-size: 1.0625rem;
	font-weight: bold;
	color: #203036;
}

.contentsBox p {margin: 0 0 30px;}

.contentsBox a {text-decoration: underline;}
html:not(.sp) .contentsBox a:hover {text-decoration: none;}

.heading-en {
	position: relative;
	width: 100%;
	max-width: none;
	margin: 0 !important;
	padding: 0 0 50px;
	font-family: 'Cinzel', serif;
	font-size: calc(4rem + 1.6vw) !important;
	font-weight: normal !important;
	text-transform: uppercase;
	line-height: 1 !important;
	letter-spacing: -.01em;
	color: rgba(35,48,54,.1);
	overflow: hidden;
	white-space: nowrap;
}

.heading-en.small{
	font-size: calc(3rem + 1.6vw) !important;
}

.heading-en:after,
.heading-en span:after {
	content: "";
	display: inline-block;
	width: 100%;
	height: 1px;
	margin: -.5rem 0 0 2vw;
	vertical-align: middle;
	background-color: rgba(35,48,54,.1);
}

.heading-en span {
	position: absolute;
	display: block;
	width: 0;
	top: 0;
	left: 0;
	color: #233036;
	overflow: hidden;
	white-space: nowrap;
	transition: width .8s cubic-bezier(.6,0,.8,1);
}
.heading-en span:after {background-color: #233036;}

.heading-en.scroll-effect span {
	width: 100%;
	height: 100%;
}


/* ------ Main Visual 1 ------ */

.mainvisual1 {
	position: relative;
	padding: 40px 6vw;
	overflow: hidden;
}
.mainvisual1:before,
.mainvisual1:after {
	content: "";
	position: absolute;
	display: block;
	width: calc(100% - 12vw);
	height: 1px;
	left: 6vw;
	background-color: #233036;
}
.mainvisual1:before {top: 0;}
.mainvisual1:after {bottom: 0;}

.mainvisual1 .img {
	position: relative;
	z-index: 1;
	float: left;
	width: 120px;
	height: 120px;
	margin: 0 3vw 0 0;
	overflow: hidden;
	border-radius: 60px;
}

.mainvisual1 img {
	position: absolute;
	display: block;
	width: 194px;
	max-width: none;
	height: 120px;
	top: 0;
	left: 50%;
	margin: 0 0 0 -97px;
}

.mainvisual1 h1 {
	margin: 0 0 10px;
	color: #233036;
	font-size: 1.25rem;
	font-weight: bold;
	line-height: 1.6;
	overflow: hidden;
}

.mainvisual1 .sub {
	margin: 0 15px 0 0;
	color: #233036;
	font-size: 1rem;
	vertical-align: middle;
}

.mainvisual1 .text {
	font-size: .875rem;
	line-height: 1.8;
	overflow: hidden;
}


/* ------ Definition List ------ */

.contentsBox li dl,
.contentsBox table dl {
	padding: 0;
}

.contentsBox dl:not(.horizontal) dt {
	margin-bottom: 10px;
	color: #233036;
	font-weight: bold;
}

.contentsBox dd {padding: 0 0 30px;}
.contentsBox dd dd {padding: 0;}
.contentsBox table dl:last-child dd:last-child {padding: 0;}

.contentsBox dd + dd {margin-top: -20px;}
.contentsBox .marginSet dd + dd {margin-top: 0;}

dl.border-set {
	margin: 0 0 30px;
	padding: 50px 0;
	border-bottom: solid 1px #233036;
}
dl.border-set:first-of-type {border-top: solid 1px #233036;}
dl.border-set + dl.border-set {margin-top: -30px;}

.interlocutor.border-set {
	margin: 0 0 40px;
	padding: 40px 0 0 0;
	border-top: solid 1px #233036;
}

.horizontal {
	padding: 0 0 20px;
	overflow: hidden;
}

.horizontal > dt {
	clear: both;
	float: left;
	color: #707070;
	font-weight: normal;
}
.horizontal.w3em > dt {width: 3em;}
.horizontal.w4em > dt {width: 4em;}
.horizontal.w5em > dt {width: 5em;}
.horizontal.w6em > dt {width: 6em;}
.horizontal.w7em > dt {width: 7em;}
.horizontal.w8em > dt {width: 8em;}
.horizontal.w9em > dt {width: 9em;}
.horizontal.w10em > dt {width: 10em;}
.horizontal.w11em > dt {width: 11em;}
.horizontal.w12em > dt {width: 12em;}

.horizontal > dd {
	padding: 0;
	overflow: hidden;
}
.horizontal > dd + dd {margin-top: 0;}
.horizontal > dd:last-of-type {padding: 0;}
.horizontal.border-set > dd + dt {margin-top: 10px;}
.horizontal.border-set > dd + dt + dd {margin-top: 10px;}

.horizontal.w3em > dd {margin-left: 3em;}
.horizontal.w4em > dd {margin-left: 4em;}
.horizontal.w5em > dd {margin-left: 5em;}
.horizontal.w6em > dd {margin-left: 6em;}
.horizontal.w7em > dd {margin-left: 7em;}
.horizontal.w8em > dd {margin-left: 8em;}
.horizontal.w9em > dd {margin-left: 9em;}
.horizontal.w10em > dd {margin-left: 10em;}
.horizontal.w11em > dd {margin-left: 11em;}
.horizontal.w12em > dd {margin-left: 12em;}


/* ------ FAQ List ------ */

.faqList dt {
	position: relative;
	margin: 0 0 10px 60px;
	font-size: 1.13rem;
}
.faqList dd {
	position: relative;
	margin: 0 0 0 60px;
	padding: 0 0 50px;
}

.faqList dt:after,
.faqList dd:after {
	position: absolute;
	display: block;
	width: 40px;
	height: 40px;
	top: -3px;
	left: -60px;
	text-align: center;
	font-size: 16px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}
.faqList dt:after {
	content: "Q";
	color: #fff;
	background-image: url(../images/icon_balloon_black.png);
}
.faqList dd:after {
	content: "A";
	color: #233036;
	background-image: url(../images/icon_balloon.png);
}
.faqList dd + dd:after {display: none;}


/* ------ List ------ */

.contentsBox ul {
	margin: 0 0 30px;
}
.contentsBox ul ul,
.contentsBox ol ul,
.contentsBox dd ul,
.contentsBox table ul {font-size: 100%;}

.contentsBox ul.marginSet {margin-bottom: 0;}

.contentsBox ul ul,
.contentsBox ol ul,
.contentsBox dd ul,
.contentsBox table ul {margin: 0;}

.contentsBox ul li {
	position: relative;
	padding: 0 0 0 1.2em;
}
.contentsBox ul li:after {
	content: "";
	position: absolute;
	display: block;
	width: 4px;
	height: 4px;
	top: calc(1em - 2px);
	left: 0.3em;
	background-color: #999;
	border-radius: 2px;
}
.contentsBox.black ul li:after,
.contentsBox.blue ul li:after,
.contentsBox.skyBlue ul li:after,
.contentsBox.lightBlue ul li:after,
.contentsBox.blueGreen ul li:after,
.contentsBox.green ul li:after {background-color: #fff;}

.contentsBox ul.marginSet > li {margin-bottom: 30px;}

.contentsBox .serviceList {
	overflow: hidden;
	margin-bottom: 0;
}

.contentsBox .serviceList li {
	float: left;
	width: 33.33333333%;
	margin-bottom: 10px;
}

.contentsBox .linkList li {
	border-bottom: 1px solid rgba(35,48,54,.1);
	padding: 0;
}

.contentsBox .linkList li:first-child{
	border-top: 1px solid rgba(35,48,54,.1);
}

.contentsBox .linkList li:after {
	display: none;
}

.contentsBox .linkList li a{
	padding-top: 1em;
	padding-bottom: 1em;
	padding-left: 1.2em;
	display: inline-block;
	cursor: pointer;
	width: 100%;
	color: #233036;
	text-decoration: none;
	z-index: 1;
	transition: background-color 0.3s,color 0.3s;
}

html:not(.sp) .contentsBox .linkList li a:hover{
	color: #FFF;
	text-decoration: none;
	background-color: #233036;
}

/* ------ Number List ------ */

.contentsBox ol {
	margin: 0;
	padding: 0 0 30px 2em;
}
.contentsBox ul ol,
.contentsBox ol ol,
.contentsBox dd ol,
.contentsBox table ol {font-size: 100%;}

.contentsBox ol.marginSet {padding-bottom: 0;}

.contentsBox ul ol,
.contentsBox ol ol,
.contentsBox dd ol,
.contentsBox table ol {padding-bottom: 0;}

.contentsBox ol > li {padding: 0 0 0 1em;}
.contentsBox ol.marginSet > li {padding-bottom: 30px;}


/* ------ Figure ------ */

figure {
	padding: 0 0 20px;
	text-align: center;
}

figcaption {
	padding: 0 0 10px;
	font-size: 90%;
	font-weight: bold;
}


/* ------ Horizontal Rule ------ */

.contentsBox hr {
	position: relative;
	margin: 60px 0 80px;
	border: 0 none;
}
.contentsBox hr:after {
	content: "";
	display: block;
	width: 100%;
	height: 1px;
	top: 0;
	left: 0;
	background-color: #233036;
}


/* ------ Note ------ */

.contentsBox p.note,
.contentsBox ul.note > li,
.contentsBox dl dd.note {
	position: relative;
	padding-left: 1.5em;
}
.contentsBox p.note:before,
.contentsBox ul.note > li:before,
.contentsBox dl dd.note:before {
	content: "※";
	position: absolute;
	top: 0;
	left: 0;
}


/* ------ Button ------ */

p.btnLarge {text-align: center;}

p.btnLarge span {
	position: relative;
	display: block;
	max-width: 300px;
	margin: 0 auto;
	background-color: #d44373;
	overflow: hidden;
	border-radius: 30px;
}
p.btnLarge span:before {
	content: "";
	position: absolute;
	display: block;
	width: 100%;
	height: 0;
	bottom: 0;
	left: 0;
	background-color: rgba(255, 255, 255, .1);
	transition: height .3s cubic-bezier(.8,0,.2,1);
}
html:not(.sp) p.btnLarge span:hover:before {
	height: 100%;
	top: 0;
	bottom: auto;
}

p.btnLarge a {
	position: relative;
	display: block;
	padding: 15px 20px;
	color: #fff;
	text-decoration: none;
}
html:not(.sp) p.btnLarge a:hover {
	color: #fff;
	text-decoration: none;
}

.contentsBox .btnSubmit {text-align: center;}

.contentsBox .btnSubmit li {
	display: inline-block;
	min-width: 190px;
	padding: 0;
	background-color: #d44373;
	overflow: hidden;
	cursor: pointer;
	border-radius: 30px;
	vertical-align: top;
}
.contentsBox .btnSubmit.bg-black li {background-color: #233036;}
.contentsBox .btnSubmit li:before {
	content: "";
	position: absolute;
	display: block;
	width: 100%;
	height: 0;
	bottom: 0;
	left: 0;
	background-color: rgba(255, 255, 255, .1);
	transition: height .3s cubic-bezier(.8,0,.2,1);
}
html:not(.sp) .contentsBox .btnSubmit li:hover:before {
	height: 100%;
	top: 0;
	bottom: auto;
}
.contentsBox .btnSubmit li:after {content: none;}

.contentsBox .btnSubmit a,
.contentsBox .btnSubmit input {
	position: relative;
	display: block;
	width: 300px;
	max-width: 100%;
	padding: 15px;
	font-size: 100%;
	color: #fff;
	text-align: center;
	line-height: 130%;
	border: 0 none;
	background-color: transparent;
	cursor: pointer;
}
html:not(.sp) .contentsBox .btnSubmit a:hover {
	color: #fff;
	text-decoration: none;
}

.contentsBox #btnPrivacy {
	position: relative;
	padding: 0;
	max-width: none;
	background-color: #233036;
	overflow: hidden;
}
html:not(.sp) .contentsBox #btnPrivacy:before {
	content: "";
	position: absolute;
	display: block;
	width: 130%;
	height: 100%;
	top: 0;
	left: 10%;
	background-color: rgba(255, 255, 255, .2);
	transform: translateX(-120%) skewX(15deg);
	transition: left 0.2s ease-in-out;
}
html:not(.sp) .contentsBox #btnPrivacy:hover:before {left: 140%;}

.contentsBox #btnPrivacy a {
	position: relative;
	display: block;
	padding: 20px;
	text-align: center;
	color: #fff;
	text-decoration: none;
}
.contentsBox #btnPrivacy a:hover {
	color: #fff;
	text-decoration: none;
}

.contentsBox #btnPrivacy:after {
	content: "";
	position: absolute;
	width: 29px;
	height: 29px;
	right: 10px;
	top: 50%;
	margin: -15px 0 0;
	text-indent: -9999px;
	overflow: hidden;
	border: solid 2px rgba(255, 255, 255, .4);
	cursor: pointer;
	border-radius: 50%;
}

.contentsBox #btnPrivacy a:before {
	content: "";
	position: absolute;
	display: block;
	width: 15px;
	height: 1px;
	right: 17px;
	top: 50%;
	margin: -1px 0 0;
	background-color: #fff;
	transition: transform 0.3s ease-in-out, width 0.3s ease-in-out, right 0.3s ease-in-out;
}
.contentsBox #btnPrivacy a:after {
	content: "";
	position: absolute;
	display: block;
	width: 1px;
	height: 15px;
	right: 24px;
	top: 50%;
	margin: -8px 0 0;
	background-color: #fff;
	transition: transform 0.3s ease-in-out;
}
html:not(.sp) .contentsBox #btnPrivacy:hover a:before,
html:not(.sp) .contentsBox #btnPrivacy:hover a:after {
	transform: rotate(180deg);
}

.contentsBox #btnPrivacy.open a:before {
	width: 0;
	right: 24px;
	transform: rotate(270deg);
}
.contentsBox #btnPrivacy.open a:after {
	transform: rotate(90deg);
}

html:not(.sp) .contentsBox #btnPrivacy.open:hover a:after {
	transform: rotate(270deg);
}

.contentsBox .btnSubmit .wpcf7-spinner{
	display: none !important;/* 仮消去  */
}

.contentsBox .wpcf7-not-valid-tip{
	display: none !important;/* CF7デフォルトエラー表示を非表示  */
}


/* ------ Section Box 1 ------ */

.sectionBox1 {
	position: relative;
	min-height: 170px;
	padding: 25px 0 25px 150px;
	overflow: hidden;
}
.sectionBox1:first-of-type {margin-top: -20px;}
.sectionBox1:after {
	content: "";
	position: absolute;
	display: block;
	width: 1px;
	height: 100%;
	top: 150px;
	left: 75px;
	background-color: #e3e8ec;
}
.sectionBox1:last-of-type:after {display: none;}

.sectionBox1 .heading {
	position: absolute;
	z-index: 2;
	width: 150px;
	height: 150px;
	top: 0;
	left: 0;
	border: solid 10px #e3e8ec;
	border-radius: 75px;
	overflow: hidden;
}

.sectionBox1 h3 {
	display: table-cell;
	width: 130px;
	height: 130px;
	padding: 5px 10px 0;
	font-size: 14px;
	line-height: 1.4;
	text-align: center;
	color: #233036;
	vertical-align: middle;
	background-color: #fff;
	border-radius: 65px;
}

.sectionBox1 h3 .sub {
	display: block;
	margin: 0 0 7px;
	font-family: 'Cinzel', serif;
	font-size: 20px;
	color: #9ca7af;
	line-height: 1.1;
	letter-spacing: -.03em;
	text-transform: uppercase;
}

.sectionBox1 h3 .sub.jp {
	font-family: "Noto Sans JP", sans-serif;
	font-size: 16px;
	font-weight: bold;
	line-height: 1.5;
}
.sectionBox1 h3 .sub.small {font-size: 15px !important;}

.sectionBox1 p,
.sectionBox1 dl {
	position: relative;
	display: table-cell;
	width: 10000px;
	height: 100px;
	padding: 0 0 0 8%;
	vertical-align: middle;
}


/* ------ Section Box 2 ------ */

.sectionBox2 {
	position: relative;
	padding: 0 0 20px 100px;
}
.sectionBox2:last-of-type {padding-bottom: 0;}
.sectionBox2:before {
	content: "";
	position: absolute;
	display: block;
	width: 1px;
	height: 30px;
	top: 0;
	left: 80px;
	background-color: #ddd;
	transform: rotate(30deg);
}
.sectionBox2:after {
	position: absolute;
	display: block;
	width: 75px;
	top: 0;
	left: 0;
	font-family: 'Cinzel', serif;
	font-size: 3.2rem;
	color: #9ca7af;
	line-height: 1em;
}
.sectionBox2:nth-of-type(1):after {content: "01";}
.sectionBox2:nth-of-type(2):after {content: "02";}
.sectionBox2:nth-of-type(3):after {content: "03";}
.sectionBox2:nth-of-type(4):after {content: "04";}
.sectionBox2:nth-of-type(5):after {content: "05";}
.sectionBox2:nth-of-type(6):after {content: "06";}
.sectionBox2:nth-of-type(7):after {content: "07";}

.sectionBox2 h3 {
	padding: 0 0 20px;
	font-size: 1.375rem;
	font-weight: bold;
	line-height: 1.6;
	color: #233036;
}
.sectionBox2 h3:only-child {
	min-height: 4em;
	font-size: 1.13rem;
}


/* ------ Section Box 3 ------ */

.sectionBox3 {
	position: relative;
	float: left;
	padding: 100px 0 20px;
	width: calc(50% - 1.5vw);
}
.sectionBox3:nth-of-type(2n) {
	float: right;
}
.sectionBox3:nth-of-type(2n + 1) {
	clear: both;
}
.sectionBox3:after {
	left: -37px;
	top: 0;
	opacity: .8;
}
.sectionBox3.web:after {background-image: url(../images/icon_web_gray.png)}
.sectionBox3.graphic:after {background-image: url(../images/icon_graphic_gray.png)}
.sectionBox3.movie:after {background-image: url(../images/icon_movie_gray.png)}
.sectionBox3.text:after {background-image: url(../images/icon_ppt_gray.png)}
.sectionBox3.company:after {background-image: url(../images/icon_company_gray.png)}
.sectionBox3.recruit:after {background-image: url(../images/icon_recruit_gray.png)}

.sectionBox3 h3 {
	padding: 0 0 20px;
	color: #233036;
	font-size: 1.375rem;
	font-weight: bold;
	line-height: 1.6;
}


/* ------ Contact List ------ */

.contactList {
	padding: calc(50px + 18vh) 0;
	background-color: #344046;
}

.contactList .heading-en {
	width: calc(100% - 12vw);
	margin: 0 6vw !important;
	color: rgba(255, 255, 255, .1);
}
.contactList .heading-en:after {  background-color: rgba(255, 255, 255, .1);}

.contactList .heading-en span {display: none;}

.contactList ul {
	position: relative;
	display: table;
	width: 100%;
}

.contactList li {
	position: relative;
	display: table-cell;
	width: 50%;
/*	height: 500px;*/
	text-align: center;
	vertical-align: middle;
}

.contactList address {color: #fff;}

.contactList address span,
.contactList address a {
	margin: 0 0 10px;
	font-family: 'Cinzel', serif;
	font-size: calc(2.2rem + .3vw);
	letter-spacing: 0;
	color: #d44373;
	line-height: 1;
}
.contactList address span {display: block;}
.contactList address a {display: none;}
.phone .contactList address span {display: none;}
.phone .contactList address a {display: block;}

html:not(.sp) .contactList address a:hover {
	color: #d44373;
	text-decoration: none;
}

.contactList .btnLarge{padding: 0 6vw;}

.contactList .btnLarge span {
	position: relative;
	display: block;
	margin: 0 auto;
	background-color: #d44373;
	overflow: hidden;
	border-radius: 30px;
}
.contactList .btnLarge span:before {
	content: "";
	position: absolute;
	display: block;
	width: 100%;
	height: 0;
	bottom: 0;
	left: 0;
	background-color: rgba(255, 255, 255, .1);
	transition: height .3s cubic-bezier(.8,0,.2,1);
}
html:not(.sp) .contactList .btnLarge span:hover:before {
	height: 100%;
	top: 0;
	bottom: auto;
}

.contactList .btnLarge a {
	position: relative;
	display: block;
	padding: 15px 20px;
	color: #fff;
}
html:not(.sp) .contactList .btnLarge a:hover {
	color: #fff;
	text-decoration: none;
}


/* ------ Image List 1 ------ */

.imageList1 {
	display: flex;
	margin: 0 auto;
}

.imageList1 dl {
	position: relative;
	width: 33.33333333%;
	padding: 60px 0 40px;
	color: #233036;
}
.imageList1 dl:after {
	content: "";
	position: absolute;
	display: block;
	width: 140px;
	height: 100px;
	top: -20px;
	left: -37px;
	background-repeat: no-repeat;
	background-size: 140px 100px;
}
.imageList1 .web:after {background-image: url(../images/icon_web_gray.png);}
.imageList1 .graphic:after {background-image: url(../images/icon_graphic_gray.png);}
.imageList1 .movie:after {background-image: url(../images/icon_movie_gray.png);}

.imageList1 dt {
	display: table-cell;
	width: 1000px;
	height: 5em;
	line-height: 1.5;
	font-size: 1.13rem;
	font-weight: bold;
	vertical-align: middle;
}

.imageList1 dd {
	font-size: 1.13rem;
	padding: 0;
	line-height: 1;
}

.imageList1 em {
	display: inline-block;
	width: 2em;
	margin: 0 5px 0 0;
	font-family: 'Cinzel', serif;
	font-size: 4rem;
	font-weight: normal;
	color: #9ca7af;
	letter-spacing: -.01em;
}


/* ------ Image List 2 ------ */

.contentsBox .imageList2 {padding: 0 0 5px;}

.contentsBox .imageList2 li {
	position: relative;
	margin: 0 0 15px;
	padding: 12px 15px 12px 55px;
	line-height: 1.6;
	font-size: 1.13rem;
}

.contentsBox .imageList2 li:before {
	content: "";
	position: absolute;
	display: block;
	width: 40px;
	height: 40px;
	top: calc(50% - 20px);
	left: 0;
	border: solid 2px #233036;
	border-radius: 20px;
}

.contentsBox .imageList2 li:after {
	content: "";
	position: absolute;
	display: block;
	width: 6px;
	height: 12px;
	top: 50%;
	left: 17px;
	margin: -7px 0 0;
	border-right: solid 2px #233036;
	border-bottom: solid 2px #233036;
	background-color: transparent;
	border-radius: 0;
	transform: rotate(45deg);
}

/* ------ Image List 3 ------ */
.imageList3 {
	display: flex;
	margin: 0 auto;
	justify-content: center;
	flex-wrap: wrap;
	width: 100%;
}

.imageList3 > div {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	width: 20%;
	padding: 0px;
	color: #233036;
}
.imageList3 .imageList3Icon{
	margin-bottom: 20px;
	padding-left: 10px;
	padding-right: 10px;
}

/* ------ Image List 4 ------ */
.imageList4 {
	display: flex;
	margin: 0 auto;
	justify-content: center;
	flex-wrap: wrap;
	align-items: flex-start;
}

.imageList4 > div {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	flex-flow: column;
	width: 33.33333%;
	padding: 0px;
	color: #233036;
}
.imageList4 .imageList4Img{
	text-align: center;
	margin-bottom: 15px;
}
.imageList4Img{
	padding-left: 10px;
	padding-right: 10px;	
}
.imageList4 p{
	text-align: center;
	line-height: 1.2em;
	font-weight: bold;
}

/* ------ Image List 5 ------ */

.imageList5 {
	display: flex;
	margin: 0 auto;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	width: 100%;
}

.imageList5 > div {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	width: 20%;
	align-items: center;
	padding: 0px;
	color: #233036;
}
.imageList5 .imageList5Icon{
	margin-bottom: 20px;
	padding-left: 10px;
	padding-right: 10px;
}
.listBox4 .imageList5 {
	width: calc(100% - 3vw);
	margin: 0 0 40px 0;
}
.listBox4 .imageList5 .imageList5Icon{
	margin-bottom: 40px;
}
.listBox4 .imageList5 img {
    transform: none;
}
.listBox4 .imageList5 img {
    display: block;
    width: 128px;
    transition: unset;
}
.listBox4 .imageList5 .imageList5Icon.imageList5IconSmall img {
    width: 72px;
}
.listBox4 .imageList5 .imageList5Icon.imageList5IconMidium img {
    width: 96px;
}


/* ------ Category ------ */

.category {
	position: absolute;
	top: 0;
	left: calc(100% + 1.8rem);
	font-size: .75rem;
	color: #233036;
	white-space: nowrap;
}
.category:hover {color: #233036;}
.category:before {
	content: "";
	display: inline-block;
	width: 100px;
	height: 1px;
	margin: 0 10px 0 0;
	background-color: #233036;
	vertical-align: middle;
}
.category {
	display: block;
	white-space: nowrap;
	transform: rotate(90deg);
	transform-origin: left top;
}
.contentsBox .category {
	position: fixed;
	top: calc(10vh + 50px);
	left: calc(100% - 6vw + 50px);
}


/* ------ List Box 1 ------ */

.listBox4 + .listBox1 {background-color: #f1f5f8;}

.listBox1.onlyBox {min-height: calc(90vh - 50px);}
.tabNav + main .listBox1.onlyBox {min-height: calc(83vh - 80px);}

.listBox1 section {
	position: relative;
	z-index: 1;
	overflow: hidden;
}
.listBox1 section:before {
	content: "";
	position: absolute;
	display: block;
	width: 100%;
	height: 0;
	bottom: 0;
	left: 0;
	background-color: #233036;
	transition: height .3s cubic-bezier(.8,0,.2,1);
}
html:not(.sp) .listBox1 section:hover:before {
	height: 100%;
	top: 0;
	bottom: auto;
}

.listBox1 section a {
	position: relative;
	display: table;
	width: 100%;
	height: 250px;
	color: #686f75;
	text-decoration: none;
	border-bottom: solid 1px rgba(35,48,54,.1);
}
.listBox1:first-child section:first-child a,
.portfolio .listBox4 + .listBox1 section a {border-top: solid 1px rgba(35,48,54,.1);}
.listBox1:last-child section:last-child a {border-bottom: 0 none;}

.listBox1 section a:hover {
	color: #686f75;
	text-decoration: none;
}
.listBox1 section a,
.listBox1 section h2,
.listBox1 section h3,
.listBox1 section .date {transition: color 0s linear .15s;}
html:not(.sp) .listBox1 section:hover a {color: rgba(255,255,255,.6) !important;}
html:not(.sp) .listBox1 section:hover h2,
html:not(.sp) .listBox1 section:hover h3,
html:not(.sp) .listBox1 section:hover .date {color: #fff !important;}

.listBox1 .img,
.listBox1 .icon:before {
	content: "";
	position: relative;
	display: table-cell;
	width: 25%;
}
.listBox1 .icon:after {
	top: 0;
	bottom: 0;
	left: 12.5%;
	margin: auto -70px;
	transition: opacity 0.3s linear;
}
.listBox1 section .icon:after {opacity: .8;}
html:not(.sp) .listBox1 section .icon:hover:after {opacity: 1;}

.listBox1 .img span {
	position: absolute;
	z-index: 1;
	display: block;
	width: 120px;
	height: 120px;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	overflow: hidden;
	border-radius: 60px;
}
@media all and (-ms-high-contrast: none) {
	.listBox1 .img span {
		top: 65px;
		bottom: auto;
	}
}

.listBox1 img {
	position: absolute;
	display: block;
	width: 194px;
	max-width: none;
	height: 120px;
	top: 0;
	left: 50%;
	margin: 0 0 0 -97px;
}

.listBox1 .textArea {
	display: table-cell;
	width: 75%;
	padding: 50px 6vw 50px 0;
	vertical-align: middle;
}

.listBox1 section a h2,
.listBox1 section a h3 {
	padding: 0 0 10px;
	color: #233036;
	font-size: 1.25rem;
	font-weight: bold;
	line-height: 1.6;
	text-decoration: none;
}
.listBox1 section a:hover h2,
.listBox1 section a:hover h3{text-decoration: none;}

.listBox1 .text {line-height: 1.8;}

.listBox1 section a + p {display: none;}


/* ------ List Box 2 ------ */

.listBox2 {
	display: flex;
	width: 100%;
	padding: calc(3vw + 50px) 3vw 50px 6vw;
	background-color: #f1f5f8;
	overflow: hidden;
	flex-wrap: wrap;
	align-content: flex-start;
}
.listBox2.bgWhite{
	background-color: #FFF;
	padding-top: 0;
}

.listBox2 > h1,
.listBox2 > h2 {
	width: 100%;
	padding: 0 3vw 0 0;
}

.listBox2 .heading-en {
	width: calc(100% - 3vw);
}

.listBox2 section {
	width: calc(33.33333333% - 3vw);
	margin: 0 3vw 3vw 0;
}

.listBox2 section a {
	position: relative;
	display: block;
	height: 100%;
	min-height: 23vw;
}
html:not(.sp) .listBox2 section a:hover {text-decoration: none;}

.listBox2 section .img {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	overflow: hidden;
	transition: transform .3s ease-out;
}
html:not(.sp) .listBox2 section a:hover .img {transform: scale(0.95);}

.listBox2 section .img div {
	position: absolute;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	transition: transform .3s ease-out;
}
html:not(.sp) .listBox2 section a:hover .img div {transform: scale(1.15);}

.listBox2 section .img:empty {background-color: #fff;}
.listBox2 section .img:empty:after {content: none;}
.listBox2 section .img:empty + .textArea .date,
.listBox2 section .img:empty + .textArea h2,
.listBox2 section .img:empty + .textArea h3 {color: #233036;}

.listBox2 section .img:after {
	content: "";
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	background-color: #233036;
	opacity: .6;
	transition: opacity .3s linear;
}
html:not(.sp) .listBox2 section a:hover .img:after {opacity: .8;}

.listBox2 section .textArea {
	position: relative;
	padding: 15% 0;
}

.listBox2 section h2,
.listBox2 section h3 {
	padding: 0 10%;
	color: #fff;
	font-size: 1.13rem;
	font-weight: bold;
	line-height: 1.8;
}

.listBox2 .large-box {
	width: calc(100% + 9vw + 1px);
	margin: calc(-3vw - 50px) -3vw 6vw calc(-6vw - 1px);
}

.listBox2 .large-box a {
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	min-height: 30vw;
}

.listBox2 .large-box .img,
.listBox2 .large-box .img div {transform-origin: bottom center;}
html:not(.sp) .listBox2 .large-box a:hover .img div {transform: scale(1.1);}

.listBox2 .large-box .img:after {opacity: 0;}
html:not(.sp) .listBox2 .large-box a:hover .img:after {opacity: .4;}

.listBox2 .large-box .textArea {
	background: #fff;
	width: calc((100% - 18vw) / 3 * 2 + 12vw);
	min-height: 250px;
	margin: 100px 0 -1px;
	padding: 4% 7vw 0 0;
}

.listBox2 .large-box .category {
	top: auto;
	left: calc(100% - 6vw + 1.8rem);
	margin: 7px 0 0;
}

.listBox2 .large-box .date {
	color: #233036;
	margin: -10px 0 0 calc(3vw - 40px);
	float: left;
}

.listBox2 .large-box h2 {
	color: #233036;
	margin: 0 0 15px;
	padding: 0;
	font-size: 1.25rem;
	line-height: 1.6;
	overflow: hidden;
}

.listBox2 .large-box .text {
	display: block;
	color: #686f75;
	margin: 0 0 0 calc(100px + 3vw);
	padding: 0;
	font-size: .875rem;
	line-height: 1.8;
	overflow: hidden;
}


/* ------ List Box 3 ------ */

.listBox3 {
	height: 100vh;
	overflow: hidden;
}

.listBox3 .top-elm {
	width: 25%;
}
.listBox3 .top-panel:before {
	content: none;
}


/* ------ List Box 4 ------ */

.listBox4 {
	position: relative;
	display: flex;
	width: 100%;
	padding: calc(3vw + 50px) 3vw 50px 6vw;
	background-color: #f1f5f8;
	flex-wrap: wrap;
}

.listBox4 > h2 {
	width: 100%;
	padding: 0 3vw 0 0;
}

.listBox4 .heading-en {
	width: calc(100% - 3vw);
}

.listBox4 section {
	position: relative;
	width: calc(50% - 3vw);
	margin: 0 3vw 3vw 0;
}
.listBox4 section:nth-of-type(2n) {transform: translateY(6vw);}
.listBox4 section:nth-of-type(2n):last-child {margin-bottom: 9vw;}

.listBox4 section > a {
	position: relative;
	display: block;
}
.listBox4 section > a:hover {text-decoration: none;}

.listBox4 .img {
	position: relative;
	overflow: hidden;
	transition: transform .3s ease-out;
}
html:not(.sp):not(.is-scrolling) .listBox4 section > a:hover .img {transform: scale(.95);}

html:not(.sp) .listBox4 .img:before {
	content: "";
	position: absolute;
	z-index: 1;
	display: block;
	width: 101%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: #233036;
	opacity: 0;
	transition: opacity 0.3s ease-out;
}
html:not(.sp):not(.is-scrolling) .listBox4 section > a:hover .img:before {opacity: .6;}
html:not(.sp) .listBox4 .img:after {
	content: "詳細を見る";
	position: absolute;
	z-index: 2;
	display: block;
	width: 150px;
	height: 40px;
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	font-size: 83%;
	line-height: 40px;
	color: #fff;
	text-align: center;
	opacity: 0;
	transform: scale(1.3);
	transition: transform .3s ease-out, opacity .3s ease-out;

}
html:not(.sp) .listBox4 section > a[target] .img:after {content: "サイトを見る";}
html:not(.sp) .listBox4 .enlarge .img:after {content: "画像を拡大";}
html:not(.sp) .listBox4 .play .img:after {content: "映像を再生";}
html:not(.sp) .listBox4 .playYouTube .img:after {content: "映像を再生";}

html:not(.sp):not(.is-scrolling) .listBox4 section > a:hover .img:after {
	opacity: 1;
	transform: scale(1.05);
}

.listBox4 img {
	display: block;
	width: 100%;
	transition: transform .3s ease-out;
}
.listBox4 img {transform: scale(1.3);}
@media screen and (min-width: 960px) {
	.sp #wrapper.top-page .listBox4 img {transform: scale(1);}
}
.listBox4 section.scroll-effect img {
	transform: scale(1);
	transition: transform .8s ease-out;
}
html:not(.sp):not(.is-scrolling) .listBox4 section > a.hover img {
	transition: transform .3s ease-out !important;
}
html:not(.sp):not(.is-scrolling) .listBox4 section > a:hover img {
	transform: scale(1.1) !important;
	transition: transform .3s ease-out !important;
}

.listBox4 section > a h2,
.listBox4 section > a h3 {
	position: relative;
	padding: 20px 0 15px 30px;
	font-weight: bold;
	line-height: 1.6;
	color: #233036;
}
.listBox4 section > a:hover h2,
.listBox4 section > a:hover h3 {color: #233036;}

.listBox4 section > a h2:before,
.listBox4 section > a h3:before {
	content: "";
	position: absolute;
	display: block;
	width: 15px;
	height: 1px;
	top: calc(20px + .8em);
	left: 0;
	background-color: #233036;
}

.listBox4 section > a h2 span,
.listBox4 section > a h3 span {
	display: block;
	font-size: .75rem;
	font-weight: normal;
	line-height: 1.6;
	color: #9ca7af;
}
.listBox4 section > a:hover h2 span,
.listBox4 section > a:hover h3 span {color: #9ca7af;}

.listBox4 .text {
	padding: 0 0 0 30px;
	font-size: .8125rem;
	line-height: 1.8;
	color: #686f75;
}
.listBox4 section a:hover .text {color: #686f75;}


.slide-arrow{
	top: 134px;
	width: 30px;
	height: 30px;
	content: "";
	position: absolute;
	cursor: pointer;
	transition: border-color 0.1s;
}
.slide-arrow.slick-disabled{
	display: none !important;
}
.prev-arrow{
	left: -20px;
	transform: rotate(45deg);
	border-left: 1px solid #686f75;
	border-bottom: 1px solid #686f75;
}
.prev-arrow:hover{
border-color: #233036;	
}

/* slick slide  */
.next-arrow{
	right: -20px;
	/*top: 50%;*/
	transform: rotate(-45deg);

	border-right: 1px solid #686f75;
	border-bottom: 1px solid #686f75;
}
.next-arrow:hover{
border-color: #233036;	
}
.slick-slide{
	cursor: grab;
}
.slick-slide:active{
	cursor:grabbing;
}

.inContentContact{
	display: flex;
	flex-flow: row;
	flex-wrap: nowrap;
}
.inContentContact .copy{
	width: 70%;
	padding-right: 30px;
	font-weight: bold;
}
.inContentContact .btnLarge{
	width: 30%;
}

.fullsizeInContentContact{
	background-image: url(../images/fullsizeInContentContact_bg.png);
	background-size: contain;
	background-position: left top;
	background-repeat: no-repeat;
	margin: 50px -6vw 0;
	padding-top: 50px;
	padding-bottom: 48px;
	background-color: #243037;
}

.listBox4 .fullsizeInContentContact{
	width: calc(100% + 9vw);
}

.fullsizeInContentContact a{
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 520px;
	background-color: #d44373;
	color: #FFF;
	line-height: 1em;
	font-size: 15px;
	font-weight: bold;
	text-align: center;
	padding-top: 22px;
	padding-bottom: 23px;
	border-radius: 36px;
	transition: background-color .2s linear;
}
.contentsBox .fullsizeInContentContact a {
	text-decoration: none;
}

html:not(.sp) .fullsizeInContentContact a:hover{
	color: #FFF;
	background-color: #dd698f;
}

.fullsizeInContentContact p{
	text-align: center;
}

.fullsizeInContentContact .fullsizeInContentContactTel{
	font-size: 1.56rem;
	line-height: 1em;
	font-family: 'Cinzel', serif;
	color: #d44373;
	margin-top: 20px;
}
.contentsBox .fullsizeInContentContact .fullsizeInContentContactTel{
	margin-bottom: 0;
}

.fullsizeInContentContact .fullsizeInContentContactTime{
	font-size: 0.78rem;
	line-height: 1em;
	color: #cccccc;
	margin-top: 6px;
}

.contentsBox .fullsizeInContentContact .fullsizeInContentContactTime{
	margin-bottom: 0;
}

.contentsBox .multiple-items{
	margin-bottom: 0;
}
.contentsBox .multiple-items li{
	padding: 0;
}
.contentsBox .multiple-items li .inner{
	padding: 50px 0 0 1.2em;
	position: relative;
}
.contentsBox .multiple-items li .inner::before{
	content: "";
	display: block;
	border-top:  14px solid #FFF;
	border-bottom:  13px solid #FFF;
	background: #233036;
	box-sizing: border-box;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 28px;
}
.contentsBox .multiple-items li .term2-1::before,
.contentsBox .multiple-items li .term3-1::before,
.contentsBox .multiple-items li .term4-1::before{
	border-left:  20px solid #FFF;
}
.contentsBox .multiple-items li .term1-5::before,
.contentsBox .multiple-items li .term2-2::before,
.contentsBox .multiple-items li .term3-3::before,
.contentsBox .multiple-items li .term4-2::before{
	border-right:  20px solid #FFF;	
}
.contentsBox .multiple-items li .term1-5::after,
.contentsBox .multiple-items li .term2-2::after,
.contentsBox .multiple-items li .term3-3::after,
.contentsBox .multiple-items li .term4-2::after{
	top: 4px;
	right: 10px;
	content: "";
	display: block;
	box-sizing: border-box;
	position: absolute;
	border:  10px solid #FFF;
	border-left:  10px solid #233036;
}

.contentsBox .multiple-items li .term1-2::after,
.contentsBox .multiple-items li .term2-1::after,
.contentsBox .multiple-items li .term3-2::after{
	top: -2px;
	right: -60px;
	color: #FFF;
	display: block;
	box-sizing: border-box;
	position: absolute;
	background: #38b5e0;
	line-height: 1em;
	padding: 8px;
	z-index: 5;
}
.contentsBox .multiple-items li .term1-2::after{
	content: "1ヶ月～3ヶ月";
}
.contentsBox .multiple-items li .term2-1::after{
	content: "1ヶ月～6ヶ月";
}
.contentsBox .multiple-items li .term3-2::after{
	content: "1ヶ月～6ヶ月";
	right: calc(50% - 58px);
}

.contentsBox .multiple-items.marketing-flow{
	margin-bottom: 40px;
}

.contentsBox .multiple-items.marketing-flow .slide-arrow{
	top: 164px;
}

.contentsBox .multiple-items.marketing-flow li{
	height: auto;
}

.contentsBox .multiple-items.marketing-flow li{
	padding-top: 40px;
}

.contentsBox .multiple-items.marketing-flow .pdca_cycle:before{
	content: "";
	display: block;
	height: 20px;
	width: 100%;
	border-top: 1px solid #38b5e0;
	position: absolute;
	top: 10px;
	left: 0;
}

.contentsBox .multiple-items.marketing-flow .pdca_cycle.cycle_end::before{
	border-left: 1px solid #38b5e0;
}
.contentsBox .multiple-items.marketing-flow .pdca_cycle.cycle_start::before{
	border-right: 1px solid #38b5e0;
}

.contentsBox .multiple-items.marketing-flow .pdca_cycle.cycle_end::after{
	content: "";
	display: block;
	height: 1px;
	width: 1px;
	position: absolute;
	top: 20px;
	left: -10px;
	border-top: 10px solid #38b5e0;
	border-left: 10px solid #FFF;
	border-bottom: 10px solid #FFF;
	border-right: 10px solid #FFF;

}

.contentsBox .multiple-items.marketing-flow .pdca_cycle.cycle_text::after{
	content: "PDCA(次フェーズへの反映)";
	font-weight: bold;
	color: #38b5e0;
	display: inline-block;
	height: 20px;
	width: 220px;
	line-height: 1em;
	position: absolute;
	top: 2px;
	left: 0px;
	background-color: #FFF;
	text-align: center;
}

.contentsBox .multiple-items.marketing-flow li .inner{
	text-align: center;
	display: flex;
	flex-flow: column;
	align-items: center;
 	justify-content: center;
}
.contentsBox .multiple-items.marketing-flow li .inner ul li{
	list-style-type: disc;
	padding: 0;
	text-align: left;
	margin-left: 24px;
	margin-right: 10px;
}

.contentsBox .multiple-items.marketing-flow li h3{
	display: inline-block;
	text-align: left;
}

.contentsBox .multiple-items.marketing-flow li .term1-5 h3,
.contentsBox .multiple-items.marketing-flow li .term3-2 h3{
	text-align: center;
	display: block;
}
.contentsBox .multiple-items.marketing-flow li .term1-2 h3{
	min-width: 210px;
}


.contentsBox .multiple-items.marketing-flow li .term1-2::after,
.contentsBox .multiple-items.marketing-flow li .term2-1::after,
.contentsBox .multiple-items.marketing-flow li .term3-1::after,
.contentsBox .multiple-items.marketing-flow li .term4-1::after{
	top: -2px;
	color: #FFF;
	right: -60px;
	display: block;
	box-sizing: border-box;
	position: absolute;
	background: #38b5e0;
	line-height: 1em;
	padding: 8px 20px;
	z-index: 5;
}
.contentsBox .multiple-items.marketing-flow li .term1-2::after{
	right: -80px;
}

.contentsBox .multiple-items.marketing-flow  li .term3-2::after{
	top: 4px;
	right: 10px;
	content: "";
	display: block;
	box-sizing: border-box;
	position: absolute;
	border:  10px solid #FFF;
	border-left:  10px solid #233036;
	padding: 0;
	background: transparent;
}

.contentsBox .multiple-items.marketing-flow li .term1-2::after{
	content: "コンサルティング";
}
.contentsBox .multiple-items.marketing-flow li .term2-1::after{
	content: "要件定義";
}
.contentsBox .multiple-items.marketing-flow li .term3-1::after{
	content: "構築";
}
.contentsBox .multiple-items.marketing-flow li .term3-2::after{
	content: "";
}
.contentsBox .multiple-items.marketing-flow li .term4-1::after{
	content: "効果検証";
}
.contentsBox .multiple-items.marketing-flow li .term3-2::before{
	border-right:  20px solid #FFF;
}

.contentsBox .multiple-items li .flowicon{
	text-align: center;
}

.contentsBox .multiple-items li .flowicon img{
	display: inline-block;
}

.contentsBox .multiple-items li:after{
	display: none;
}

.contentsBox .multiple-items li:first-child{
	padding-left: 0;
}

.contentsBox .multiple-items li h3{
	font-weight: bold;
	margin-bottom: 10px;
	margin-top: 10px;
	color: #233036;
	text-align: center;
}
.contentsBox .multiple-items li p{
	text-align: left;
}


/* ------ Wide Button ------ */

.btn-wide {
	position: relative;
	height: 250px;
}
.listBox2 .btn-wide,
.listBox4 .btn-wide {
	width: calc(100% + 9vw);
	margin: 0 -6vw -50px;
}
.listBox2 .btn-wide {margin-top: 3vw;}
.listBox4 section:nth-of-type(2n) + .btn-wide {margin-top: 6vw;}

.btn-wide:empty {border-top: solid 1px rgba(35,48,54,.1);}

.btn-wide:not(:empty):before {
	content: "";
	position: absolute;
	display: block;
	width: 100%;
	height: 0;
	bottom: 0;
	left: 0;
	background-color: #233036;
	transition: height .3s cubic-bezier(.8,0,.2,1);
}
html:not(.sp) .btn-wide:not(:empty):hover:before {
	height: 100%;
	top: 0;
	bottom: auto;
}

.btn-wide a {
	position: relative;
	display: block;
	color: #233036;
	height: 100%;
	line-height: 250px;
	text-align: center;
	border-top: solid 1px rgba(35,48,54,.1);
	border-bottom: solid 1px rgba(35,48,54,.1);
	transition: color 0s linear .15s;
}
.btn-wide.half:not(:last-of-type) a,
.btn-wide.oneThird:not(:last-of-type) a,
.btn-wide.half:empty:not(:last-of-type),
.btn-wide.oneThird:empty:not(:last-of-type) {border-right: solid 1px rgba(35,48,54,.1);}

.img + .btn-wide a {border-top: 0 none;}

html:not(.sp) .btn-wide a:hover {
	color: #fff;
	text-decoration: none;
}

.btn-wide a:before {
	content: "";
	position: absolute;
	width: 1px;
	height: 125px;
	top: -30px;
	left: 50%;
	background-color: #233036;
}
.btn-wide:empty a:before,
.btn-wide.oneThird:first-child a:before,
.btn-wide.oneThird:last-child a:before {content: none;}

.btn-wide a:after {
	content: "";
	position: absolute;
	width: 1px;
	height: 0;
	bottom: 154px;
	left: 50%;
	background-color: #fff;
	transition: height .15s cubic-bezier(.8,0,.2,1);
}
.btn-wide:empty a:after,
.btn-wide.oneThird:first-child a:after,
.btn-wide.oneThird:last-child a:after {content: none;}
html:not(.sp) .btn-wide a:hover:after {
	top: 0;
	bottom: auto;
	height: 94px;
}

.btn-wide a span {
	position: relative;
	display: inline-block;
	padding: 0 40px 0 20px;
}
.btn-wide.icon-prev a span {padding: 0 20px 0 40px;}

.btn-wide a span:before {
	content: "";
	position: absolute;
	display: block;
	width: 17px;
	height: 2px;
	top: 50%;
	right: 4px;
	margin: -1px 0 0;
	background-color: #233036;
	border-radius: 2px;
	transition: background-color 0s linear .15s, width .2s linear, right .2s linear;
}
html:not(.sp) .btn-wide a:hover span:before {
	width: 20px;
	right: 1px;
	background-color: #fff;
}
.btn-wide a span:after {
	content: "";
	position: absolute;
	display: block;
	width: 8px;
	height: 8px;
	top: 50%;
	right: 3px;
	margin: -4px 0 0;
	border-top: solid 2px #233036;
	border-right: solid 2px #233036;
	transform: rotate(45deg);
	transition: border-color 0s linear .15s, right .2s linear;
}
html:not(.sp) .btn-wide a:hover span:after {
	right: 0px;
	border-color:	#fff;
}

/* Prev Icon */
.btn-wide.icon-prev a span:before {
	right: auto;
	left: 4px;
	transition: background-color 0s linear .15s, width .2s linear, left .2s linear;
}
html:not(.sp) .btn-wide.icon-prev a:hover span:before {
	right: auto;
	left: 1px;
}
.btn-wide.icon-prev a span:after {
	right: auto;
	left: 3px;
	transform: rotate(-135deg);
	transition: border-color 0s linear .15s, left .2s linear;
}
html:not(.sp) .btn-wide.icon-prev a:hover span:after {
	right: auto;
	left: 0;
}

/* Index Icon */
.btn-wide.icon-index a span:before {
	width: 20px;
	height: 20px;
	margin: -10px 0 0;
	right: 0;
	background-color: transparent;
	background-image: url(../images/icon_index.png);
	background-position: 0 0;
	background-repeat: no-repeat;
	background-size: 20px 40px;
	border: 0 none;
	transform: none;
	transition: background-position 0s linear .15s;
}
html:not(.sp) .btn-wide.icon-index a:hover span:before {
	width: 20px;
	right: 0;
	background-color: transparent;
	background-position: 0 100%;
}
.btn-wide.icon-index a span:after {content: none;}


/* ------ Icon for List Box ------ */

.icon:after {
	content: "";
	position: absolute;
	display: block;
	width: 140px;
	height: 100px;
	background-repeat: no-repeat;
	background-size: 140px 100px;
}
.iconCrossMedia:after {background-image: url(../images/icon_crossmedia_gray.png);}
.iconRWD:after {background-image: url(../images/icon_responsive_gray.png);}
.iconSP:after {background-image: url(../images/icon_mobile_gray.png);}
.iconLarge:after {background-image: url(../images/icon_large_gray.png);}
.iconSystem:after {background-image: url(../images/icon_system_gray.png);}
.iconInternational:after {background-image: url(../images/icon_international_gray.png);}
.iconRecruitTool:after {background-image: url(../images/icon_recruit_tool_gray.png);}
.iconResearch:after {background-image: url(../images/icon_research_gray.png);}
.iconSEO:after {background-image: url(../images/icon_seo_gray.png);}
.iconTranslation:after {background-image: url(../images/icon_translation_gray.png);}
.iconWeb:after {background-image: url(../images/icon_web_gray.png);}
.iconGraphic:after {background-image: url(../images/icon_graphic_gray.png);}
.iconMovie:after {background-image: url(../images/icon_movie_gray.png);}
.iconCorporate:after {background-image: url(../images/icon_corporate_gray.png);}
.iconService:after {background-image: url(../images/icon_service_gray.png);}
.iconCompany:after {background-image: url(../images/icon_company_gray.png);}
.iconPhilosophy:after {background-image: url(../images/icon_philosophy_gray.png);}
.iconAccess:after {background-image: url(../images/icon_access_gray.png);}
.iconNews:after {background-image: url(../images/icon_news_gray.png);}
.iconRecruitInfo:after {background-image: url(../images/icon_recruit_info_gray.png);}
.iconMessage:after {background-image: url(../images/icon_message_gray.png);}
.iconStaff:after {background-image: url(../images/icon_staff_gray.png);}
.iconRecruit:after {background-image: url(../images/icon_recruit_gray.png);}
.iconUniversity:after {background-image: url(../images/icon_university_gray.png);}
.iconContents:after {background-image: url(../images/icon_contents_gray.png);}
.iconSustainability:after {background-image: url(../images/icon_sustainability_gray.png);}
.iconBranding:after {background-image: url(../images/icon_branding_gray.png);}


/* ------ Table ------ */

.contentsBox table {
	width: 100%;
	margin: 0 0 50px;
}

.contentsBox table th {
	width: 25%;
	padding: 30px 5% 30px 0;
	color: #233036;
	font-weight: bold;
	vertical-align: top;
	border-top: 1px solid #e9eaeb;
}

.contentsBox table tr:last-of-type th {border-bottom: 1px solid #e9eaeb;}

.contentsBox table td {
	padding: 30px 0;
	vertical-align: top;
	border-top: 1px solid #e9eaeb;
}
.contentsBox table tr:last-of-type td {border-bottom: 1px solid #e9eaeb;}


/* ------ Tab Navigation ------ */

.tabNav {
	position: fixed;
	z-index: 30003;
	width: calc((100% - 70px) / 3 * 2);
	top: calc(10vh + 50px);
	right: 0;
}
.top-page .tabNav {z-index: 10003;}
.index-page .tabNav,
.detail-page .tabNav {position: absolute;}

.tabNav ul {
	position: relative;
	margin-right: 3vw;
	overflow: hidden;
	text-align: right;
}

.tabNav li {
	position: relative;
	display: inline-block;
	margin: 0 0 0 3vw;
	font-size: .9375rem;
	line-height: 1.6;
}

.tabNav li a {
	position: relative;
	display: block;
	color: #fff;
	overflow: hidden;
}
.tabNav .current a,
.tabNav .parent a {font-weight: bold;}

html:not(.sp) .tabNav li a:hover {
	color: #fff;
	text-decoration: none;
}
.detail-page .tabNav li a {color: #233036;}
html:not(.sp) .detail-page .tabNav li a:hover {color: #233036;}

.tabNav li a span:first-child {
	display: block;
	opacity: 1;
	transform: matrix(1, 0, 0, 1, 0, 0);
	transition: opacity 0s linear .2s, transform .2s ease-out .2s;
}
html:not(.sp) .tabNav li a:hover span:first-child {
	opacity: 0;
	transform: matrix(1, 0.2, 0, 1, 0, -20);
	transition: opacity 0s linear .2s, transform .2s ease-in;
}
.tabNav li a span:last-child {
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	opacity: 0;
	transform: matrix(1, 0.2, 0, 1, 0, 20);
	transition: opacity 0s linear .2s, transform .2s ease-in;
}
html:not(.sp) .tabNav li a:hover span:last-child {
	opacity: 1;
	transform: matrix(1, 0, 0, 1, 0, 0);
	transition: opacity 0s linear .2s, transform .2s ease-out .2s;
}


/* ------ Pagination ------ */

.pager {
	position: relative;
	width: calc(100% - 3vw);
	padding: 20px 0;
	text-align: center;
}

.pager .pagination .page-numbers {
	position: relative;
	display: inline-block;
	width: 50px;
	height: 50px;
	margin: 0 5px;
	line-height: 48px;
	color: #fff;
	font-size: .875rem;
	overflow: hidden;
	background-color: #233036;
	border: solid 1px rgba(35, 48, 54, .2);
	border-radius: 25px;
	transition: background-color .2s linear, border-color .2s linear;
}
.pager .pagination a.page-numbers {
	color: #233036;
	background-color: transparent;
}
html:not(.sp) .pager .pagination a.page-numbers:hover {
	color: #fff;
	background-color: #233036;
	border-color: #233036;
	text-decoration: none;
}

.pager .pagination .prev,
.pager .pagination .next {text-indent: -9999px;}

.pager .pagination .prev:before,
.pager .pagination .next:before {
	content: "";
	position: absolute;
	display: block;
	width: 17px;
	height: 2px;
	top: 23px;
	background-color: #233036;
	border-radius: 2px;
	transition: width .2s linear, background-color .2s linear;
}
.pager .pagination .prev:before {right: 16px;}
.pager .pagination .next:before {left: 16px;}

html:not(.sp) .pager .pagination .prev:hover:before,
html:not(.sp) .pager .pagination .next:hover:before {
	width: 20px;
	background-color: #fff;
}

.pager .pagination .prev:after,
.pager .pagination .next:after {
	content: "";
	position: absolute;
	display: block;
	width: 8px;
	height: 8px;
	top: 20px;
	transform: rotate(45deg);
	transition: border-color .2s linear, left .2s linear, right .2s linear;
}
.pager .pagination .prev:after {
	left: 16px;
	border-left: solid 2px #233036;
	border-bottom: solid 2px #233036;
}
.pager .pagination .next:after {
	right: 16px;
	border-right: solid 2px #233036;
	border-top: solid 2px #233036;
}
html:not(.sp) .pager .pagination .prev:hover:after {
	left: 13px;
	border-color: #fff;
}
html:not(.sp) .pager .pagination .next:hover:after {
	right: 13px;
	border-color: #fff;
}


/* ------ Social Button ------ */

.social {
	position: fixed;
	bottom: 6vh;
	right: calc(6vw - 60px);
	margin-bottom: 10vh;
}

.social ul {margin: 0;}

.contentsBox .social ul li {
	width: 30px;
	margin: 20px 5px 0;
	padding: 0;
}
.contentsBox .social ul li:after {content: none;}

.contentsBox .social a {
	font-size: .75rem;
	line-height: 1;
	color: #233036;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
}
html:not(.sp) .contentsBox .social a:hover {
	color: #233036;
	text-decoration: none;
}
.contentsBox .social a:after {content: none !important;}

.contentsBox .social a[href^="http"] > img {
	display: block;
	width: 25px !important;
	height: 25px;
	margin-bottom: 0 !important;
	transition: opacity .2s linear;
}
html:not(.sp) .contentsBox .social a:hover img {opacity: .7;}

.contentsBox .social ul li span {
	display: block;
	width: 25px;
	height: 20px;
	margin-top: 3px;
}


/* ------ Mail ------ */

.mail:before {content: "@";}


/* ------ Form ------ */

.field1,
.field2,
.field3 {
/*	padding: 5px 10px;*/
	padding: 0 0 10px;
	font-size: 16px;
	color: #233036;
	border-bottom: solid 1px #233036;
}

.field1 {
	width: 370px;
	max-width: 100%;
/*	margin-right: 15px;*/
}
.field2 {
	width: 370px;
	max-width: 100%;
}
.field3 {width: 20%;}
/*
textarea.field2 {
	height: auto;
	padding: 10px;
	color: #233036;
	border: solid 1px #233036;
}
*/
input {vertical-align: middle;}

input + .small {color: #9ca7af;}

input + label {
	display: inline-block;
	padding: 0 10px;
	vertical-align: middle;
}

input + .mwform-radio-field-text {
	display: inline-block;
	padding: 0 6px;
	vertical-align: middle;
}
/*
label + input {margin: 0 0 0 20px;}

.radioList dd,
.contentsBox table .radioList:last-child dd:last-child {padding-left: 1em;}
*/
.radioList li{
	margin-bottom: 20px;
	padding-left: 0 !important;
}
.radioList li:last-child{
	margin-bottom: 0;
}
.radioList li:after{
	display: none !important;
}

.mwform-radio-field.vertical-item,
.radioList .wpcf7-form-control.radio-outer .wpcf7-list-item{
	margin-bottom: 20px;
	padding-left: 0 !important;
}
.radioList .wpcf7-form-control.radio-outer .wpcf7-list-item{
	margin-left: 0;
}
/*
.mwform-radio-field.vertical-item:last-child,
.mwform-radio-field.vertical-item:nth-last-child(2){
	margin-bottom: 0;
}
*/

.radioList .wpcf7-form-control.radio-outer label{
	cursor: pointer;
}

.radioList .wpcf7-form-control.radio-outer .wpcf7-list-item-label{
	padding: 0 6px;
	vertical-align:middle;
	margin-left: 0px;
}

.mwform-radio-field.vertical-item input,
.radioList .wpcf7-form-control.radio-outer input {
    margin-right: 0;
}

.checkbox,
.wpcf7-form-control-wrap input[type="checkbox"] {
	position: relative;
	width: 20px;
	height: 20px;
	border: solid 3px #d3d6d7;
}
.wpcf7-form-control-wrap input[type="checkbox"] {
	margin-right: 10px;
}

.checkbox:checked:before,
.wpcf7-form-control-wrap input[type="checkbox"]:checked:before {
	content: "";
	position: absolute;
	display: block;
	width: 6px;
	height: 10px;
	top: 1px;
	left: 4px;
	border-bottom: solid 2px #233036;
	border-right: solid 2px #233036;
	transform: rotate(30deg);
}

.checkboxWrap .wpcf7-form-control-wrap .wpcf7-list-item{
	margin-right: 5px;
	margin-left: 0;
}

.checkboxWrap .wpcf7-form-control-wrap .wpcf7-list-item .wpcf7-list-item-label::before,
.checkboxWrap .wpcf7-form-control-wrap .wpcf7-list-item .wpcf7-list-item-label::after{
	display:none ;
}

.radio,
.radioList .wpcf7-form-control.radio-outer input {
	position: relative;
	width: 20px;
	height: 20px;
	border: solid 3px #d3d6d7;
	border-radius: 15px;
}
.radio:checked:before,.radioList .wpcf7-form-control.radio-outer input:checked:before {
	content: "";
	position: absolute;
	display: block;
	width: 10px;
	height: 10px;
	top: 2px;
	left: 2px;
	background-color: #233036;
	border-radius: 5px;
}

.contentsBox .errorText {
	padding: 10px 0 0;
	color: #d44373;
	width: 370px;
}

.fieldalinebottom{
	vertical-align:bottom;
}
.fieldSelectWrap{
	position: relative;
	width: 370px;
	max-width: 100%;
}
.fieldSelectWrap::after{
	content: "";
	position: absolute;
	top: 15px;
	right: 15px;
	display: block;
	z-index: 1;
	width: 8px;
	height: 8px;
	border-right: solid 2px #233036;
	border-top: solid 2px #233036;
	transform: rotate(135deg);
}
.fieldSelect{
	padding-right: 28px;
	cursor: pointer;
}
.fieldSelect::-ms-expand {
	display: none;
}

::-webkit-input-placeholder {
	color: #9ca7af;
	opacity: 1;
}
:-moz-placeholder {
	color: #9ca7af;
}
::-moz-placeholder {
	color: #9ca7af;
	opacity: 1;
}
:-ms-input-placeholder {
	color: #9ca7af;
}
:placeholder-shown {
	color: #9ca7af;
}

/* ------ MWform ------ */
/**
 * error message
 */
.mw_wp_form .error {
	font-size : 93%;
	color : #B70000;
	display : block;
}

/**
 * error message of akismet
 */
.mw_wp_form .akismet_error {
	display: block;
}

/**
 * vertical style of radio and checkbox
 */
.mw_wp_form .vertical-item,
.radioList .wpcf7-form-control.radio-outer .wpcf7-list-item {
	display: block;
}

.mw_wp_form .vertical-item + .vertical-item,
.radioList .wpcf7-form-control.radio-outer .wpcf7-list-item + .wpcf7-list-item {
	margin-top: 5px;
}

/**
 * horizontal style of radio and checkbox
 */
.mw_wp_form .horizontal-item + .horizontal-item {
	margin-left: 10px;
}

.radioList.sexWrap .wpcf7-form-control.radio-outer .wpcf7-list-item{
	display: inline;
}

/**
 * radio and checkbox
 */
.mwform-checkbox-field label,
.mwform-radio-field label {
	font-weight: normal;
	margin-bottom: 0;
}
.mwform-checkbox-field input,
.mwform-radio-field input {
	margin-right: 5px;
}

/**
 * datepicker
 */
.mw_wp_form .ui-datepicker .ui-datepicker-title select.ui-datepicker-month,
.mw_wp_form .ui-datepicker .ui-datepicker-title select.ui-datepicker-year {
	width: 40%;
	margin: 0 5px;
}

/**
 * deprecated message
 */
.mw-wp-form-deprecated-message {
	background: #fdeeee;
	border: 1px solid #f7bdb8;
	border-radius: 5px;
	color: #af4040;
	font-size: 13px;
	line-height: 1.6;
	margin: 0 0 10px;
	padding: 1em;
}

/**
 * file
 */
.mw_wp_form input[type="file"] {
	display: inline-block;
}

/**
 * file delete button
 */
.mwform-file-delete {
	cursor: pointer;
	visibility: hidden;
}

/**
 * tel and zip
 */
.mwform-tel-field input[type="text"],
.mwform-zip-field input[type="text"] {
	display: inline-block;
	width: auto;
}

/* ------ contact form EFO ------ */
#contact td{
	position: relative;
}

.contentsBox .checkboxWrap{
	position: relative;
}

.contentsBox .checkboxWrap .errorText{
	width:100%;
}


.valid:before,
.shubetsuWrap.valid:before,
.workWrap.valid:before,
.textarea:has(.valid):before,
.sexWrap.valid:before {
	content: "";
	position: absolute;
	display: block;
	width: 40px;
	height: 40px;
	top: calc(50% - 20px);
	left: calc(370px + 30px);
	border: solid 2px #38b5e0;
	border-radius: 20px;
}

.shubetsuWrap.valid:before,
.workWrap.valid:before,
.textarea.valid:before,
.textarea:has(.valid):before,
.sexWrap.valid:before {
	top:20px;
}

.valid:after,
.shubetsuWrap.valid:after,
.workWrap.valid:after,
.textarea:has(.valid):after,
.sexWrap.valid:after {
	content: "";
	position: absolute;
	display: block;
	width: 6px;
	height: 12px;
	top: 50%;
	left: calc(370px + 30px + 17px);
	margin: -7px 0 0;
	border-right: solid 2px #38b5e0;
	border-bottom: solid 2px #38b5e0;
	background-color: transparent;
	border-radius: 0;
	transform: rotate(45deg);
}

.shubetsuWrap.valid:after,
.workWrap.valid:after,
.textarea.valid:after,
.textarea:has(.valid):after,
.sexWrap.valid:after{
	top:40px;
}

.textarea:has(.valid) .valid:before,
.checkboxWrap.valid:before,
.checkboxWrap .valid:before{
	display: none;
}

.textarea:has(.valid) .valid:after,
.checkboxWrap.valid:after,
.checkboxWrap .valid:after{
	display: none;
}

.contentsBox .btnSubmit .disabled{
	background-color: #ccc;
	cursor: default;
}
.contentsBox .errorText{
	margin-bottom: 0;
}

.mw_wp_form_confirm .confirm_hidden{
	display: none !important;
}

.mw_wp_form_input .confirm_only{
	display: none !important;
}

.mw_wp_form_confirm .icon-back span{
	display: inline-block;
	position: relative;
}

.mw_wp_form_confirm .icon-back input[type="submit"] {
	text-decoration: none;
	color: #1c89a6;
	outline: none;
	transition: color .2s linear;
	cursor: pointer;
}

html:not(.sp) .mw_wp_form_confirm .icon-back input[type="submit"]:hover {
	text-decoration: none;
	color: #49a1b8;
}

.mw_wp_form_confirm .icon-back input[type="submit"] {
	position: relative;
	display: inline-block;
	padding-left: 30px;
	text-decoration: none;
	vertical-align: top;
}

html:not(.sp) .mw_wp_form_confirm .icon-back input[type="submit"]:hover {
	text-decoration: underline;
}

.mw_wp_form_confirm .icon-back span:before {
	content: "";
	position: absolute;
	display: block;
	width: 17px;
	height: 2px;
	top: 50%;
	left: 4px;
	margin: 0;
	background-color: #1c89a6;
	border-radius: 2px;
	transition: background-color .2s linear, width .2s linear, left .2s linear;
}

html:not(.sp) .mw_wp_form_confirm .icon-back span:hover:before {
	width: 20px;
	left: 1px;
	background-color: #49a1b8;
}

.mw_wp_form_confirm .icon-back span:after {
	content: "";
	position: absolute;
	display: block;
	width: 8px;
	height: 8px;
	top: 50%;
	left: 3px;
	margin: -3px 0 0;
	border-top: solid 2px #1c89a6;
	border-right: solid 2px #1c89a6;
	transform: rotate(-135deg);
	transition: border-color .2s linear, left .2s linear;
}

html:not(.sp) .mw_wp_form_confirm .icon-back span:hover:after {
	left: 0px;
	border-color:	#49a1b8;
}

.mw_wp_form_confirm .fieldSelectWrap::after{
	content: "";
	display: none !important;
}

.contentsBox .errorText {
	/*
	padding: 10px 0 0;
	color: #d44373;
	width: 370px;
	*/
	position: absolute;
}

.contentsBox .checkboxWrap .errorText{
	margin-top: -10px;
}

.contentsBox table .tall{
	padding-bottom: 50px;
}

.workWrap .mwform-radio-field-text{
	font-weight: bold;
	color: #233036;
	line-height: 1.6;
}
.workWrap .wpcf7-list-item-label{
	font-weight: bold;
	color: #233036;
	line-height: 1.6;
}

.workWrap .workdetail{
	margin-top: 10px;
	margin-bottom: 30px;
}

/* ------ Google Map ------ */

.googleMap {
	height: 500px;
	background-color: #e9e5dc;
}

.googleMap iframe {width: 100%;}

#map_canvas {height: 500px;}


/* ------ Modal Window for Images ------ */

#modalBG {
	position: fixed;
	z-index: 100000;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: #233036;
	opacity: 0;
	transition: opacity 0.5s linear;}

#modalImg {
	position: absolute;
	z-index: 100002;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	overflow: hidden;
}

#modalImgBG {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}

#modalImgLoader {
	position: fixed;
	display: none;
	width: 32px;
	height: 32px;
	top: 50%;
	left: 50%;
	margin: -16px 0 0 -16px;
}

#modalText {
	position: absolute;
	height: 70px;
	left: 0;
	bottom: -70px;
	padding: 15px 0 0;
	font-size: 90%;
	color: #fff;
	text-align: left;
	transform: translate3d(0, -45px, 0);
}

#modalClose {
	position: absolute;
	right: -2px;
	top: -40px;
	transform: translate3d(0, 45px, 0);}

#modalClose a {
	display: block;
	width: 28px;
	height: 28px;
	right: 0;
	top: 0;
	text-indent: -9999px;
	overflow: hidden;
	opacity: .7;
	transform: rotate(45deg);
	transition: opacity 0.3s linear, transform 0.3s ease-in-out;


}
#modalClose a:before {
	content: "";
	position: absolute;
	display: block;
	width: 28px;
	height: 2px;
	top: 13px;
	left: 0px;
	background-color: #fff;
}
#modalClose a:after {
	content: "";
	position: absolute;
	display: block;
	width: 2px;
	height: 28px;
	top: 0px;
	left: 13px;
	background-color: #fff;
}
html:not(.sp) #modalClose a:hover {
	opacity: 1;
	transform: rotate(135deg);
}


/* ------ Tag Selector ------ */

.top-panel.tag {padding: calc(54px + 18vh) 1.5vw 0;}

.top-panel.tag li {
	margin: 0 0 calc(2vh - 7px);
	font-size: .75rem;
	line-height: 1;
	vertical-align: top;
}

.top-panel.tag li a {
	display: inline-block;
	min-width: 5em;
	padding: 7px 10px;
	text-align: center;
	color: #fff;
	border: solid 1px rgba(255, 255, 255, .4);
	border-radius: 20px;
	white-space: nowrap;
	transition: color .2s linear, background-color .2s linear, border-color .2s linear;
}
.top-panel.tag li.current a,
html:not(.sp) .top-panel.tag li a:hover {
	color: #686f75;
	background-color: #fff;
	border-color: #fff;
}

.contentsBox .tag {width: calc(100% + 10px);}
.contentsBox .heading-en + .tag {margin-top: -20px;}

.contentsBox .tag ul {margin-bottom: 0;}

.contentsBox .tag li {
	display: inline-block;
	font-size: .75rem;
	margin: 0 10px 15px 0;
	padding: 0;
	line-height: 1;
	vertical-align: top;
}
.contentsBox .tag li:after {content: none;}

.contentsBox .tag li a {
	display: block;
	padding: 7px 10px;
	border: solid 1px rgba(35, 48, 54, .2);
	border-radius: 20px;
	color: #686f75;
	text-decoration: none;
	overflow: hidden;
	transition: color .2s linear, background-color .2s linear, border-color .2s linear;
}
.contentsBox .tag li.current a,
html:not(.sp) .contentsBox .tag li a:hover {
	color: #fff;
	text-decoration: none;
	background-color: #233036;
	border-color: #233036;
}


/* ------ Portfolio ------ */

@media screen and (min-width: 960px), print {

	.top-page.portfolio #pageTitle > * {
		position: relative;
		z-index: 2;
	}

	.top-page.portfolio #top-scroll.listBox4 {
		display: block;
		padding: 0;
		background-color: transparent;
		counter-reset: number 0;
	}

	.top-page.portfolio .listBox4 section {
		float: left;
		width: calc(1% / 3);
		height: 100%;
		margin: 0;
		padding: calc(50px + 18vh) 2vw 0;
		transition: transform .8s cubic-bezier(0,.5,.5,1), opacity .8s cubic-bezier(0,.5,.5,1);
	}
	.top-page.portfolio .listBox4 section.fade {
		opacity: 0;
		transform: translate3d(100px, 0, 0) !important;
		transition: transform .5s cubic-bezier(0,.5,.5,1), opacity .5s cubic-bezier(0,.5,.5,1);
	}
	.top-page.portfolio .listBox4 section:nth-of-type(2n) {transform: none;}

	.top-page.portfolio .listBox4 section:before,
	.top-page.portfolio .listBox4 section:after {
		content: "";
		position: absolute;
		z-index: 1;
		display: block;
		width: 1px;
		height: 200vh;
		top: -50vh;
		background-color: rgba(255, 255, 255, .12);
	}
	.top-page.portfolio .listBox4 section:before {left: 0;}
	.top-page.portfolio .listBox4 section:after {left: 50%;}

	.top-page.portfolio .listBox4 section a {z-index: 2;}

	.top-page.portfolio .listBox4 section a:before {
		counter-increment: number 1;
		content: "0" counter(number) "/" attr(data-panels);
		display: block;
		margin: 0 0 3vh;
		font-size: .875rem;
		color: #fff;
		text-transform: uppercase;
		line-height: 1.8;
	}
	.top-page.portfolio .listBox4 section:nth-of-type(n + 10) a:before {
		content: counter(number) "/" attr(data-panels);
	}

	.top-page.portfolio .listBox4 section a:after {
		content: "";
		position: absolute;
		display: block;
		width: 1px;
		height: 1.1em;
		font-size: .875rem;
		top: .3em;
		left: -2vw;
		background-color: #fff;
	}

}

.top-page.portfolio .listBox4 section h2,
.top-page.portfolio .listBox4 section h2 .sub,
.top-page.portfolio .listBox4 section .text {color: #fff !important;}

.top-page.portfolio .listBox4 section > a h2:before {background-color: #fff;}

@media screen and (max-width: 1199px) and (min-width: 960px), print {
	.top-page.portfolio .listBox4 section {width: calc(.5%);}
} 

.detail-page.portfolio .contentsBox img {box-shadow: 0 .5vw 2.5vw -.5vw rgba(0,0,0,.3);}

.detail-page.portfolio .contentsBox.gray + .listBox1 section:first-child a {border-top: solid 1px rgba(35,48,54,.1);}

.detail-page.portfolio .listBox1,
.detail-page.portfolio .btn-wide {background-color: #f1f5f8;}

.contentsBox .mockup-iphone {
	position: relative;
	margin: 0;
	padding-top: 192.30769231%;
	background-image: url(../images/mockup_iphone.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}
.contentsBox .mockup-iphone img {
	position: absolute;
	display: block;
	width: 72.11538462%;
	top: 15.3%;
	left: 13.94230769%;
	box-shadow: none !important;
}



/* ------ News / Column ------ */

.news .contentsBox:first-of-type,
.detail-page.column-page .contentsBox:first-of-type {
	max-width: calc(500px + 22vw + 15vh);
	min-height: calc(90vh - 300px);
	margin: 0 auto;
	box-sizing: border-box;
	overflow: hidden;
}

.news .contentsBox h2,
.detail-page.column-page .contentsBox h2 {
	margin: 80px 0 40px;
	padding: 0 0 15px;
	font-size: 1.625rem;
	font-weight: bold;
	line-height: 1.6;
	color: #233036;
	border-bottom: solid 1px #233036;
}

.detail-page.column-page .contentsBox.outbound h2,
.index-page.column-page .contentsBox.outbound h2  {
	margin: -30px 0 60px;
	border-bottom: none;
}

.detail-page.column-page .contentsBox.outbound .linkList a[href^="http"][target]:after,
.index-page.column-page .contentsBox.outbound .linkList a[href^="http"][target]:after{
	background-image: url(../images/icon_window.png);
}

html:not(.sp) .detail-page.column-page .contentsBox.outbound .linkList a[href^="http"][target]:hover,
html:not(.sp) .index-page.column-page .contentsBox.outbound .linkList a[href^="http"][target]:hover{
	text-decoration: none;
}

html:not(.sp) .detail-page.column-page .contentsBox.outbound .linkList a[href^="http"][target]:hover:after,
html:not(.sp) .index-page.column-page .contentsBox.outbound .linkList a[href^="http"][target]:hover:after{
	background-image: url(../images/icon_window_white.png);
}

.news .time,
.detail-page.column-page .time {
	display: inline-block;
	margin-bottom: 40px;
	font-size: .875rem;
	color: #9ca7af;
}
.detail-page.column-page .time + .right {
	display: inline-block;
	margin-bottom: 40px;
	font-size: .875rem;
	text-align: left;
	color: #9ca7af;
}
.detail-page.column-page .time + .right:before {
	content: " - " ;
}

.news .contentsBox p a,
.detail-page.column-page .contentsBox p a {word-break: break-all;}

.news .contentsBox img,
.detail-page.column-page .contentsBox img {
	width: 100%;
	max-width: none;
}

.news .listBox1,
.detail-page.column-page .listBox1 {background-color: #f1f5f8;}

.news .listBox2 + .listBox1 section:first-child a {border-top: solid 1px rgba(35,48,54,.1);} 

.news .listBox1 section:last-child a {border-bottom: 0 none;}

.index-page.column-page .listBox2 {background-color: #fff}
.index-page.column-page .listBox2 + .listBox2 {background-color: #f1f5f8;}
.index-page.column-page .listBox2 + .listBox2 + .listBox2,
.index-page.column-page .listBox2:not(:first-child) + .contentsBox {padding-top: 0;}
.index-page.column-page .listBox2:first-child {min-height: calc(90vh - 50px);}
.detail-page.column-page .contentsBox.gray + .listBox2 {padding-top: 0;}

.news .listBox2 + .btn-wide,
.news .listBox1 + .btn-wide {background-color: #f1f5f8;}

.detail-page.column-page .listBox1 + .row.gray .btn-wide:empty,
.detail-page.column-page .listBox1 + .row.gray .btn-wide a {border-top: 0 none;}


/* ------ Box ------ */

.box,
.detail-page.column-page .contentsBox > div:not([class]) {
	padding: 50px 50px 20px !important;
	border: 0 none !important;
	background-color: #f1f5f8;
}

.box h2:first-child,
.detail-page.column-page .contentsBox > div:not([class]) h2:first-child {margin-top: 0;}


/* ------ Concept ------ */

.contentsBox .heading-concept {
	position: relative;
	display: inline-block;
	margin-bottom: 10px;
	font-size: 5rem;
	line-height: 1;
	letter-spacing: .05em;
	color: rgba(35,48,54,.1);
	overflow: hidden;
	white-space: nowrap;
}

.contentsBox .heading-concept span {
	position: absolute;
	display: block;
	width: 0;
	top: 0;
	left: 0;
	color: #233036;
	overflow: hidden;
	white-space: nowrap;
	transition: width .8s cubic-bezier(.7,0,.3,1);
}
.contentsBox .heading-concept.scroll-effect span {
	width: 100%;
	height: 100%;
}
.contentsBox .heading-tagline{
	font-size: 2.65rem ;
}

/* ------ Contact ------ */

.contact .contentsBox:not(.gray) {min-height: calc(90vh - 120px);}

.contact table em,
.contact label em,
.contact .outer_mw_checkbox em {
	position: absolute;
	display: block;
	width: 2.5rem;
	height: 20px;
	top: 34px;
	right: 2.5rem;
	font-size: .75rem !important;
	line-height: 20px;
	color: #fff;
	text-align: center;
	border-radius: 10px;
	background-color: #233036;
}
.contact label em,
.contact .outer_mw_checkbox em {
	position: static;
	display: inline-block;
	margin: -3px 0 0 5px;
}

.contact p > em {
	color: #d44373;
	font-weight: normal;
}

.contact table p > .required-tag{
	color: #FFF;
}

.contact table {line-height: 1.6;}

.contact table th {
	position: relative;
	width: 15rem;
	padding-right: 5rem;
	border: 0 none !important;
}

.contact table td {
/*	padding-top: 20px;*/
	border: 0 none !important;
}

#contactBox {
	margin: 0 0 30px;
	padding: 0;
	font-size: 2rem;
	text-align: center;
	background-color: #fff;
}

#contactBox a {
	display: block;
	padding: 60px 0;
	line-height: 1;
	color: #d44373;
	text-decoration: none;
}
html:not(.sp) #contactBox a:hover {
	color: #dd698f;
	text-decoration: none;
}

#telBox {
	display: block;
	margin: 0 0 30px;
	padding: 0;
	text-align: center;
	letter-spacing: 0.03em;
	background-color: #fff;
}

#telBox a {
	display: block;
	padding: 40px 0;
	cursor: text;
	color: #686f75;
	line-height: 1;
	text-decoration: none;
}
#telBox a:hover{
	color: #686f75;
	text-decoration: none;
}

#telBox a:link span {
	display: block;
	padding: 0 0 15px;
	font-family: 'Cinzel', serif;
	font-size: 2.2rem;
	color: #d44373;
}
#telBox a:hover span {color: #d44373;}


/* ------ Sitemap ------ */

.sitemap .contentsBox h2 {
	margin: 50px 0 30px;
	padding: 0 0 10px;
	font-size: 1.25rem;
	font-weight: bold;
	color: #233036;
	text-align: left;
	border-bottom: solid 1px #233036;
}
.sitemap .contentsBox .row:first-of-type h2 {margin-top: 0;}

.sitemap .contentsBox ul {
	margin-top: 50px;
	padding-bottom: 0;
}
.sitemap .contentsBox ul ul,
.sitemap .contentsBox h2 + ul {margin-top: 0;}

.sitemap .contentsBox ul li {
	padding-bottom: 0;
	padding-left: 0;
	font-weight: bold;
}

.sitemap .contentsBox ul li:after {display: none;}
.sitemap .contentsBox ul li ul li {
	padding-left: 1.2em;
	font-weight: normal;
}
.sitemap .contentsBox ul li ul li:after {display: block;}

.sitemap .contentsBox li a {
	display: inline-block;
	margin-bottom: 10px;
}
.sitemap .contentsBox ul li ul li a {margin-bottom: 0;}
.sitemap .contentsBox ul li ul li:last-of-type a {margin-bottom: 10px;}

.sitemap .contentsBox h2 a {color: #233036;}
html:not(.sp) .sitemap .contentsBox h2 a:hover {color: #1ab6ff;}

.sitemap .contentsBox a {text-decoration: none;}



/*---------------------------------------------
	slick-slide
  ---------------------------------------------*/
.slick-slider
{
    position: relative;

    display: block;
    box-sizing: border-box;

    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;

    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list
{
    position: relative;

    display: block;
    overflow: hidden;

    margin: 0;
    padding: 0;
}
.slick-list:focus
{
    outline: none;
}
.slick-list.dragging
{
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.slick-track
{
    position: relative;
    top: 0;
    left: 0;

    display: block;
    margin-left: auto;
    margin-right: auto;
}
.slick-track:before,
.slick-track:after
{
    display: table;

    content: '';
}
.slick-track:after
{
    clear: both;
}
.slick-loading .slick-track
{
    visibility: hidden;
}

.slick-slide
{
    display: none;
    float: left;

    height: 100%;
    min-height: 1px;
}
[dir='rtl'] .slick-slide
{
    float: right;
}
.slick-slide img
{
    display: block;
}
.slick-slide.slick-loading img
{
    display: none;
}
.slick-slide.dragging img
{
    pointer-events: none;
}
.slick-initialized .slick-slide
{
    display: block;
}
.slick-loading .slick-slide
{
    visibility: hidden;
}
.slick-vertical .slick-slide
{
    display: block;

    height: auto;

    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}

/*---------------------------------------------
	corprate - workflow 展開型
  ---------------------------------------------*/
.contentsBox .workflow ul {
	list-style: none;
}

.contentsBox .workflow li h3 {
    font-weight: bold;
    margin-bottom: 10px;
    margin-top: 0px;
    color: #233036;
}

.contentsBox .workflow li:after{
	content: none;
	background: transparent;
}




.contentsBox .workflow{
	margin-bottom: 0;
}
.contentsBox .workflow li{
	padding: 0;
}


.contentsBox .workflow li .inner{
	/*padding: 50px 0 0 1.2em;*/
	position: relative;
	display: flex;
	align-items: stretch;
	/*flex-wrap: wrap;*/
}

.contentsBox .workflow li .inner .flowicon{
	width: 150px;
	padding-bottom: 30px;
	padding-left: 50px;
}

.contentsBox .workflow li .inner .flowtext{
	 flex: 1;
	 padding-left: 20px;
}

.contentsBox .workflow li .inner::before{
	content: "";
	display: block;
	border-left:  14px solid #FFF;
	border-right:  5px solid #FFF;
	background: #233036;
	box-sizing: border-box;
	position: absolute;
	top: 0;
	left: 0;
	width: 20px;
	height: 100%;
}

.contentsBox .workflow li .term2-1::before,
.contentsBox .workflow li .term3-1::before,
.contentsBox .workflow li .term4-1::before{
	border-top:  20px solid #FFF;
}

.contentsBox .workflow li .term1-5::before,
.contentsBox .workflow li .term2-2::before,
.contentsBox .workflow li .term3-3::before,
.contentsBox .workflow li .term4-2::before{
	border-bottom:  20px solid #FFF;	
}



.contentsBox .workflow li .term1-5::after,
.contentsBox .workflow li .term2-2::after,
.contentsBox .workflow li .term3-3::after,
.contentsBox .workflow li .term4-2::after{
	/*
	top: 4px;
	right: 10px;
	*/
	bottom: 4px;
	left: 4px;
	content: "";
	display: block;
	box-sizing: border-box;
	position: absolute;
	border:  10px solid #FFF;
	border-top:  10px solid #233036;
}

.contentsBox .workflow li .term1-2::after,
.contentsBox .workflow li .term2-1::after,
.contentsBox .workflow li .term3-2::after{
	/*
	top: -2px;
	right: -60px;
	*/
	top: -0px;
	left: -0px;
	color: #FFF;
	display: inline-block;
	width: 30px;
	box-sizing: border-box;
	position: absolute;
	background: #38b5e0;
	line-height: 1em;
	padding: 8px;
	z-index: 5;
	writing-mode: vertical-rl;
}
.contentsBox .workflow li .term1-2::after{
	content: "1ヶ月～3ヶ月";
}
.contentsBox .workflow li .term2-1::after{
	content: "1ヶ月～6ヶ月";
}
.contentsBox .workflow li .term3-2::after{
	content: "1ヶ月～6ヶ月";
	right: calc(50% - 58px);
}

/*---------------------------------------------
	1200px未満
  ---------------------------------------------*/

@media screen and (max-width: 1199px), print {

	#wrapper.detail-page {background-color: #fff;}

	.top-elm {width: calc(1% / 4);}

	#top-copy h1 {font-size: calc(2.8vw + .7rem);}

	#top-copy .sub-copy{
	max-width:calc(2.8vw * 12.5 + .7rem * 12.5 );
	}



	.bg-line div:nth-of-type(1):before {left: 25%;}
	.bg-line div:nth-of-type(1):after {left: 50%;}
	.bg-line div:nth-of-type(2):before {left: 75%;}
	.bg-line div:nth-of-type(2):after {content: none;}
	.bg-line div:nth-of-type(3):before {content: none;}
	.bg-line div:nth-of-type(3):after {content: none;}

	.logo {left: calc(4vw + 70px);}
	.tagline {left: calc(4vw + 222px);}
	#wrapper:not(.top-page) .logo,
	#wrapper:not(.top-page) .tagline {position: absolute;}

	#wrapper.detail-page #gnav .gnav-main:before {background-color: rgba(35,48,54,.1);}
	#wrapper.detail-page #gnav .gnav-main li a {color: #233036;}
	#wrapper.detail-page #gnav .gnav-main li:after {background-color: #233036;}

	#wrapper.detail-page header > .btn-menu button em:after,
	#wrapper.detail-page header > .btn-menu button:before,
	#wrapper.detail-page header > .btn-menu button:after {background-color: #233036;}

	.gnav-sub {right: calc(3vw + 60px);}

	#nav-contact {right: 3vw;}

	#btn-scroll,
	#btn-pagetop {
		right: 3vw;
		bottom: 5vh;
	}

	#footer-menu {display: none;}

	footer .contactList {width: 50%;}

	footer .contactList .heading-en {
		padding: 0 0 30px;
		font-size: 7.4vw !important;
		text-align: center;
	}
	footer .contactList .heading-en:after {content: none;}

	footer .contactList .btnLarge {padding-top: 30px;}

	footer .contactList ul {display: block;}
	footer .contactList li {
		display: block;
		width: 100%;
	}

	#footer-address {
	/*	float: none;
		width: 100%;*/
		width: 50%;
	}

	#footer-submenu {bottom: calc( 5vh + 80px );}

	#contentsArea,
	.tabNav + main #contentsArea {
		width: calc(100% - 70px);
		padding-top: 0;
	}

	#pageTitle {
		position: relative;
		display: flex;
		width: calc(100% - 70px);
		height: 60vh;
		bottom: auto;
		padding: 0 4vw 5vh;
		flex-wrap: wrap;
		align-content: flex-end;
	}
	.sp #pageTitle {height: 60%;}

	.top-page #pageTitle {
		width: .5%;
		bottom: 0;
		padding: 0 4vw 5vh;
	}

	#pageTitle > * {width: 100%;}

	#pageTitle .heading-en {font-size: calc(4rem + 1.6vw) !important;}

	#pageTitle .heading-en br {display: none;}

	#pageTitle h1 {font-size: calc(1.5rem + .6vw);}

	.tabNav {width: calc(100% - 70px);}

	.tabNav ul {margin-right: 4vw;}

	.detail-page .tabNav li a,
	html:not(.sp) .detail-page .tabNav li a:hover {color: #fff;}

	#footer-copyright {
		right: calc(3vw + 60px);
		bottom: calc( 5vh + 80px );
	}

	.detail-page #bgImg {position: absolute;}

	.detail-page #bgImg .img {
		width: calc(100% - 70px);
		height: 60vh;
		left: 70px;
	}
	.sp .detail-page #bgImg .img {height: 60%;}

	.index-page .tabNav + main #contentsArea {padding-top: 0;}

	.contentsBox.onlyBox,
	.tabNav + main .contentsBox.onlyBox {min-height: 0;}

	.listBox1.onlyBox,
	.tabNav + main .listBox1.onlyBox {min-height: 0;}

	.listBox2,
	.listBox4 {padding-right: 2vw;}

	.listBox2 .heading-en,
	.listBox4 .heading-en {width: calc(100% - 4vw);}

	.listBox2 > h1,
	.listBox2 > h2,
	.listBox4 > h2 {padding-right: 4vw;}

	.listBox2 section,
	.listBox4 section {margin: 0 4vw 4vw 0;}
	.listBox2 section {width: calc(33.33333333% - 4vw);}
	.listBox4 section {width: calc(50% - 4vw);}

	.listBox2 section a {min-height: 36vw;}

	.listBox2 .large-box {margin-right: -2vw;}

	.listBox2 .large-box a {min-height: 50vw;}

	.listBox2 .large-box .textArea {width: calc((100% - 20vw) / 3 * 2 + 14vw);}

	.listBox2 .btn-wide, .listBox4 .btn-wide {width: calc(100% + 8vw);}

	.listBox3 {height: auto;}

	.listBox3 .top-panel {
		height: auto;
		padding: 50px 0;
	}
	.imageList3Icon{
		padding-left: 10px;
		padding-right: 10px;
	}
	.imageList5Icon{
		padding-left: 10px;
		padding-right: 10px;
	}

	.contactList {padding: 150px 0;}

	.mainvisual1 {margin-top: calc(3vw + 50px);}

	.social {
		position: static;
		float: right;
		margin-bottom: 0;
		text-align: right;
	}

	.contentsBox .social ul li {
		display: inline-block;
		margin-top: 0;
		vertical-align: top;
	}
	.contentsBox .social ul li:last-child {margin-right: 0;}

	.contentsBox .category {
		position: absolute;
		top: 0;
		left: calc(100% - 3vw - 12px);
	}

	#footer-copyright {
		left: 4vw;
		right: auto;
	}

	#footer-submenu {margin: 0 0 60px;}


	/* ----- Column ----- */

	.index-page.column-page .listBox2:first-child {min-height: 0;}


	/* ----- Portfolio ----- */

	.detail-page.portfolio .contentsBox img {box-shadow: 0 1vw 5vw -1vw rgba(0,0,0,.3);}

}

/* ----- Recruit ----- */

@media screen and (max-width: 1199px) and (min-width: 960px), print {

	#wrapper.index-page.recruit-page {height: 100%;}

	.index-page.recruit-page #pageTitle {
		width: calc(100% - 70px);
		height: 100%;
		padding: 0 calc((100% - 70px) / 2 + 4vw) 5vh 4vw
	}

}



/*---------------------------------------------
	960px未満
  ---------------------------------------------*/

@media screen and (max-width: 959px) {

	.top-page .logo,
	.top-page .tagline,
	.top-page .gnav-sub {position: absolute;}

	.logo20th{
		position: absolute;
		top:6px;
		left:180px;
		height: 28px;
		width: 64px;
	}

	.bg-line div:nth-of-type(1):before,
	.bg-line div:nth-of-type(2):before {content: none;}

	#top-content {
		position: relative;
		width: 100%;
		overflow: visible;
	}
	#top-content:before {
		content: "";
		position: fixed;
		display: block;
		width: 1px;
		height: 100vh;
		top: 0;
		left: calc(50% + 35px);
		background-color: rgba(255, 255, 255, .12);
	}

	#top-scroll {
		width: 100%;
		transform: translateX(0) !important;
	}

	#top-copy {
		display: flex;
		height: 75vh;
		bottom: auto;
		padding: 0 0 5vh calc(4vw + 70px);
		flex-wrap: wrap;
		align-content: flex-end;
	}
	#top-copy > * {width: 100%;} 

	#top-copy h1 {
		margin-bottom: 2vh;
		font-size: calc(1.2vw + 2rem);
	}

	#top-copy .sub-copy{
	max-width:calc(1.2vw * 12.5 + 2rem * 12.5 );
	}


	.top-elm {
		float: none;
		width: calc(100% - 69px);
		height: auto;
		margin: 0 0 0 auto;
		overflow: hidden;
	}
	#top-copy + .top-elm {display: none;}
	#top-copy + .top-elm + .top-elm {height: 60vh;}

	.top-panel {padding: 0;}
	.top-panel:before {
		width: 100%;
		height: 1px;
	}
	#top-copy + .top-elm + .top-elm + .top-elm .top-panel:before {content: none;}

	.top-panel.panel-service {
		width: 50%;
		float: left;
	}

	.top-elm .bg {
		width: 100%;
		height: 200%;
	}

	.top-panel .txt {
		display: flex;
		min-height: 200px;
		padding: 50px 0 30px;
		align-items: center;
		transform: translate3d(0, 0, 0);
	}
	.top-panel.panel-service .txt {display: block;}

	.top-panel h2 {
		position: relative;
		height: 30vw;
	}
	#top-copy + .top-elm + .top-elm + .top-elm .top-panel h2 {height: calc(15vh + 11vw);}

	.top-panel h2 .heading-scroll {
		height: 100%;
		left: 0;
		margin-top: 0 !important;
		font-size: 13vw;
		line-height: .6;
		justify-content: flex-start;
		transform: translate3d(0px, 0px, 0px);
	}

	.top-panel h2 .heading-scroll span {padding: 0 20vw 0 4vw;}
	.top-panel h2 .heading-scroll span:before {
		width: 16vw;
		top: .2em;
	}

	html:not(.sp):not(.is-scrolling) .top-elm a:hover .txt {transform: none;}

	.top-panel .label {
		position: absolute;
		top: 20px;
		margin: 0;
		padding: 0 4vw;
	}

	.top-panel .icon {
		position: absolute;
		width: 22vw;
		top: calc(10px + 50%);
		left: 0;
		padding: 0 0 0 4vw;
		transform: translateY(-50%);
	}
	.top-panel.panel-service .icon {
		top: 100px;
		transition: none;
	}

	.top-panel .icon span {
		width: 90px;
		height: 90px;
	}

	.top-panel .date {
		position: absolute;
		width: 16vw;
		max-width: none;
		top: calc(10px + 50%);
		margin: 0 0 0 4vw;
		transform: translateY(-50%);
	}
	.top-panel .date:before {padding-top: 60px;}

	.top-panel p {
		padding: 0 4vw 0 24vw;
		font-size: 1.125rem;
	}
	.top-panel.panel-service p:not([class]) {padding: 100px 4vw 0;}

	.top-panel dl {padding: 0 4vw 0 24vw;}

	.top-panel dt {
		margin-bottom: 10px;
		font-size: 1.125rem;
	}

	.top-panel dd {font-size: .9375rem;}

	.top-page #pageTitle {
		position: relative;
		width: calc(100% - 70px);
		height: 60vh;
		left: 70px;
	}
	.top-page #pageTitle + .top-elm,
	.top-page #pageTitle + .top-elm + .top-elm {display: none;}

	#dummy {display: none;}

	.index-link.link-icon{
		padding: 70px calc(72px + 2em) 70px 0;
		line-height: 50px;
	}

	.index-link.link-icon .effect-circle:before{
		width: 50px;
		top: 25px;
		bottom: auto;
		left:calc(4em + 50%);
	}

	html:not(.sp) a:hover .index-link.link-icon .effect-circle:before{
		width: 53px;
		left:calc(4em + 50%);
	}

	.index-link .effect-circle span:first-child{
		left: calc(4em + 50% + 25px);
		top: 0;
		bottom: auto;
	}

	.index-link .effect-circle span:last-child{
		left: calc(4em + 50% + 50px);
		top: 0;
		bottom: auto;
	}

	.index-link.link-icon .effect-circle:after{
		left: calc(4em + 50% + 44px);
		top: 22px;
		bottom: auto;
	}

	html:not(.sp) a:hover .index-link.link-icon .effect-circle:after{
		left: calc(4em + 50% + 47px);
	}


	.top-panel-strength{
		height:calc(50px + 180px + 340px + 80px);
	}

	.top-strength-image{
		margin-top: 0;
		max-height: 75%;
	}

	.top-strength-image img{
		width: 75%;
	}

	.top-strength-header{
		position: static;
		padding-top: 50px;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		padding-top: 0;
	}

	.top-panel h2 .heading-scroll-strategy-design{top:0;}

	.top-panel .top-strength-copy{
		padding: 0;
	}

	.top-strength-mountain-base{
		top: calc(50px + 180px);
	}

	.top-panel .top-strength-dl{
		padding: 0 4vw 0 4vw;
	}



	footer {
		position: relative;
		display: block !important;
		width: calc(100% - 70px) !important;
		height: auto !important;
		margin: 0 0 0 auto;
	}

	footer .logo {top: 60px;}

	footer .tagline {display: none;}

	footer .logo20th{
		left:148px;
		top:0;
	}

	#footer-content {
		position: relative;
		width: 100% !important;
		height: auto !important;
		padding: 100px 0 200px;
	}

	footer .contactList .heading-en {padding-top: 40px;}

	#footer-address {padding-bottom: 50px;}

	#footer-menu {
		float: none;
		width: 100%;
	}

	#footer-content .col {
		width: 25%;
		padding: 0 4vw 20px;
	}
	#footer-content .col:nth-of-type(4) {clear: none;}
	#footer-content .col:nth-of-type(5) {clear: both;}

	footer .btn-menu,
	footer .gnav-main {display: none;}
	footer .gnav-sub {
		top: 50px;
		right: 4vw;
	}

	#footer-submenu li {line-height: 1.6;}

	#btn-scroll {display: none !important;}
	#btn-pagetop {display: block !important;}

	.tabNav {position: absolute;}

	.tabNav li {
		display: block;
		margin: 0 0 10px;
	}

	.tabNav li a {display: inline-block;}

	.tabNav li a span:first-child,
	html:not(.sp) .tabNav li a:hover span:first-child {
		display: inline-block;
		opacity: 1;
		transform: none;
		transition: none;
	}
	.tabNav li a span:last-child {display: none;}

	#contentsArea {margin: 0 0 0 auto !important;}

	.listBox1 .img span {
		width: 90px;
		height: 90px;
	}

	.listBox1 img {
		width: 146px;
		height: 90px;
		margin: 0 0 0 -73px;
	}

	.listBox1 .text {font-size: .9375rem;}

	.listBox3 {margin-left: -1px;}

	.listBox3 .top-elm {width: calc(100% + 1px);}

	.listBox3 .top-panel {padding: 0;}
	.listBox3 .top-panel:before {content: "" !important;}


	.imageList3 > div {
		width: 33.3333%;
		padding: 0;
		text-align: left;
	}
	.imageList3Icon{
		display: block;
		width: 100%;
		text-align: center;
	}
	.imageList4 > div {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		flex-flow: column;
		width: 33.33333%;
		padding: 0px;
		color: #233036;
	}
	.imageList5{
		justify-content: left;
	}
	.imageList5 > div {
		width: 33.3333%;
		padding: 0;
		text-align: left;
	}
	.imageList5Icon{
		display: block;
		width: 100%;
		text-align: center;
	}


	/* ----- Tag ----- */

	.contentsBox .tag li {margin: 0 5px 10px 0;}


	/* ----- Portfolio ----- */

	.top-page.portfolio #pageTitle {
		width: 100%;
		left: 0;
		padding-left: 0;
	}

	.top-page.portfolio .top-elm {
		width: calc(100% + 4vw);
		margin-left: -4vw;
	}

	.top-page.portfolio .top-panel.tag {
		min-height: 0;
		padding: 0 calc(4vw - 5px) 50px 4vw;
	}
	.top-page.portfolio .top-panel.tag:before {content: none;}

	.top-page.portfolio .top-panel.tag li {
		display: inline-block;
		margin: 0 5px 10px 0;
	}

	.top-page.portfolio #top-scroll.listBox4 {
		padding: 0 0 0 calc(4vw + 70px);
		background-color: transparent;
	}

	.top-page.portfolio .listBox4 section {
		transition: transform .8s cubic-bezier(0,.5,.5,1), opacity .8s cubic-bezier(0,.5,.5,1);
	}
	.top-page.portfolio .listBox4 section.fade {
		opacity: 0;
		transform: translate3d(0, 50px, 0) !important;
		transition: transform .5s cubic-bezier(0,.5,.5,1), opacity .5s cubic-bezier(0,.5,.5,1);
	}
	.top-page.portfolio .listBox4 section.fade:nth-of-type(2n) {transform: translate3d(0, 11vw, 0) !important;}


	/* ----- Recruit ----- */

	.index-page.recruit-page #pageTitle {height: 70vh;}


	/* ----- Column ----- */

	.contentsBox .category {left: calc(100% - 3vw + 10px);}

}

/*---------------------------------------------
	820px未満
  ---------------------------------------------*/
@media screen and (max-width: 819px) {
	/* ----- contact form EFO ----- */
	.field1{
		width: 320px;
	}

	.valid:before,
	.shubetsuWrap.valid:before,
	.workWrap.valid:before,
	.sexWrap.valid:before {
		left: calc(320px + 30px);
	}
	.valid:after,
	.shubetsuWrap.valid:after,
	.workWrap.valid:after,
	.sexWrap.valid:after {
		left: calc(320px + 30px + 17px);
	}
}


/*---------------------------------------------
	768px未満
  ---------------------------------------------*/

@media screen and (max-width: 767px) {

	.row {display: block;}

	.col.half {width: auto;}

	.half.gutter:first-of-type {padding-right: 0;}
	.half.gutter:last-of-type {padding-left: 0;}

	.col.oneThird {width: auto;}
	.oneThird.gutter:first-of-type,
	.oneThird.gutter:nth-of-type(2),
	.oneThird.gutter:last-of-type {
		padding-left: 0;
		padding-right: 0;
	}

	.hideNarrow,
	.hideFablet {display: none;}

	.showNarrow,
	.showFablet {display: block;}
	br.showNarrow,
	br.showFablet {display: inline;}

	.large {font-size: 1.25rem !important;}

	.logo {
		z-index: 10000;
		width: 100px;
		top: 28px;
		left: calc(5vw + 50px);
	}

	.logo20th{
		height: 18px;
		width: 42px;
		left:106px;
		top:6px;
	}
	.logo20th a img{
		width: auto;
		height: 18px;
	}

	.tagline {display: none;}

	.gnav-main {
		width: 50px;
		padding: 0 0 6vh;
	}
	.gnav-main:before {left: 49px;}

	.gnav-main li:first-of-type {margin: 0;}

	.gnav-main li a {line-height: 50px;}

	.gnav-sub li {display: none;}

	#nav-contact {top: 15px;}

	#btn-pagetop {bottom: 15px;}

	.btn-menu {
		width: 50px;
		top: 15px;
		overflow: hidden;
	}

	.btn-menu button {
		width: 70px;
		margin-left: -10px;
	}

	.bg-line {width: calc(100% - 50px);}

	footer {width: calc(100% - 50px) !important;}

	footer .logo {
		display: none;
	}

	#footer-content {padding: 0 0 230px;}
	_::-webkit-full-page-media, _:future, :root #footer-content {
		width: 100% !important;
	}

	footer .contactList .btnLarge {padding: 0 5vw;}

	#footer-menu {display: none;}

	footer .contactList {
		float: none;
		width: 100%;
		padding: 60px 0;
		background-color: #344046;
	}

	footer .contactList .heading-en {
		padding: 0 0 30px;
		font-size: calc(1rem + 7vw) !important;
	}

	#footer-submenu {left: 5vw;}

	#footer-submenu li {margin: 0 15px 0 0;}

	#footer-address {
		float: none;
		width: 100%;
		padding: 50px 5vw 30px;
	}

	#footer-copyright {
		left: 5vw;
		line-height: 1.5;
	}

	#footer-copyright br {display: inline;}

	#top-content:before {left: calc(50% + 25px);}

	#top-copy {padding-left: calc(5vw + 50px);}

	#top-copy h1 {font-size: 6.5vw;}

	#top-copy .sub-copy{
		max-width:calc(6.5vw * 12);
	}


	.top-elm {width: calc(100% - 49px);}

	.top-panel .label {padding: 0 5vw;}

	.top-panel .date {margin: 0 0 0 5vw;}

	.top-panel h2 .heading-scroll span {padding-left: 5vw;}

	.top-panel h2 .heading-scroll-strategy-design{top:0;}

	.top-panel p {padding: 0 5vw 0 25vw;}
	.top-panel.panel-service p:not([class]) {padding: calc(8vw + 30px) 5vw 0;}

	.top-panel.panel-service .icon {top: calc(5vw + 60px);}

	.top-panel dl {padding: 0 5vw 0 25vw;}

	.top-page footer {width: calc(100% - 50px);}

	.top-panel-strength{
		height:calc(280px + 17 / 27 * 80vw);
	}

	.top-strength-mountain-base{
		width: 80vw;
		height: calc(17 / 27 * 80vw);
		left: calc(50% - 40vw);
	}

	.top-strength-mountain-ly{
		width: 80vw;
		height: calc(17 / 27 * 80vw);
	}

	.top-panel .top-strength-copy{
		font-size: 1.13rem;
	}

	.top-panel .top-strength-dl{
		padding: 0 5vw 0 5vw;
	}

	#pageTitle {
		width: calc(100% - 50px);
		left: 50px;
		padding: 0 5vw 5vh;
	}
	.top-page #pageTitle {
		width: calc(100% - 50px);
		left: 50px;
		padding: 0 5vw 5vh;
	}

	#pageTitle .heading-en {font-size: calc(1.6rem + 6vw) !important;}

	#pageTitle h1 {font-size: calc(1.5rem + .6vw);}

	#contentsArea {width: calc(100% - 50px);}

	.detail-page #bgImg .img {
		width: calc(100% - 50px);
		left: 50px;
	}

	.imageList3Icon{
		padding-left: 0px;
		padding-right: 0px;
	}
	.imageList4{
		justify-content: left;
	}
	.imageList4 > div {
		width: 50%;
		padding: 0px;
	}
	.imageList5Icon{
		padding-left: 0px;
		padding-right: 0px;
	}

	.inContentContact{
		display: flex;
		flex-flow: row;
		flex-wrap: wrap;
	}
	.inContentContact .copy{
		width: 100%;
		padding-right: 30px;
		font-weight: bold;
	}
	.inContentContact .btnLarge{
		width: 100%;
	}

	.fullsizeInContentContact{
		padding-left: 5vw;
		padding-right: 5vw;
	}

	.fullsizeInContentContact a{
		width: auto;
		font-size: 13px;
	}

	.listBox4 .fullsizeInContentContact{
		width: calc(100% + 10vw);
		margin: 50px -5vw 0;
	}

	.contentsBox .priceTable .pc_only{
		display: none;
	}


	/* ----- Main Menu ----- */

	#main-menu {
		position: fixed;
		z-index: 40000;
		width: 100%;
		height: 0;
		top: 0;
		left: 0;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		transition: height 0s linear 1s;
	}
	.main-menu-open #main-menu {
		height: 100%;
		transition: height 0s linear;
	}

	#main-menu .logo,
	#main-menu .tagline {
		position: absolute;
		opacity : 0;
		transition: opacity 0s linear .5s;
	}
	.main-menu-open #main-menu .logo,
	.main-menu-open #main-menu .tagline	 {
		opacity : 1;
		transition: opacity 0s linear .25s;
	}

	#main-menu .btn-menu {
		position: absolute;
		opacity : 0;
		transition: opacity 0s linear .6s;
	}
	.main-menu-open #main-menu .btn-menu	 {
		opacity : 1;
		transition: opacity 0s linear .2s;
	}

	#main-menu .gnav-sub {
		position: relative;
		top: auto;
		right: auto;
		padding: 0 5vw 100px calc(50px + 3vw - 10px);
		opacity: 0;
		transform: translate3d(0, 50px, 0);
		transition: opacity .3s linear, transform .5s linear;
	}
	.main-menu-open #main-menu .gnav-sub {
		opacity: 1;
		transform: translate3d(0, 0, 0);
		transition: opacity .5s linear .5s, transform .5s cubic-bezier(0,.7,.3,1) .5s;
	}

	#main-menu .gnav-sub li {display: inline-block;}
	#main-menu .gnav-sub li:not(:first-of-type) {margin-left: 5vw;}

	#main-menu .gnav-sub li a {font-size: .875rem;}

	#main-menu nav > ul {
		position: relative;
		z-index: 1;
		width: calc(100% - 50px);
		padding: 80px 0 10px;
		margin: 0 0 0 auto;
		line-height: 1.5;
	}
	#main-menu nav > ul > li {position: relative;}
	
	#main-menu nav > ul > li > a {
		display: flex;
		height: 80px;
		padding: 0 5vw;
		font-size: 1rem;
		color: #fff;
		flex-wrap: wrap;
		align-items: center;
		align-content: center;
	}

	#main-menu nav > ul > li > a > span {
		display: block;
		overflow: hidden;
	}
	#main-menu nav > ul > li > a > .menu-en {
		display: block;
		width: 100%;
		font-family: 'Cinzel', serif;
		font-size: calc(1.5vw + 2vh);
		line-height: 1;
		text-transform: uppercase;
		white-space: nowrap;
	}
	#main-menu nav > ul > li > a > span > span {
		display: block;
		transform: translate3d(0, 50px, 0);
		transition: transform .7s linear;
	}
	.main-menu-open #main-menu nav > ul > li > a > span > span {
		transform: translate3d(0, 0, 0);
		transition: transform .7s cubic-bezier(0,.7,.3,1) .5s;
	}
	#main-menu nav > ul > li > a > .menu-en > span:after {
		content: attr(data-text)"";
		display: inline-block;
		margin: 0 0 0 5px;
		font-size: .875rem;
		font-family: 'Oxygen' ,sans-serif;
		vertical-align: top;
		opacity: .5;
	}

	#main-menu nav > ul > li > ul {display: none;}
	#main-menu nav > ul > li > ul:before,
	#main-menu nav > ul > li > ul:after {
		content: "";
		display: block;
		width: calc(100% - 10vw);
		height: 1px;
		margin: 10px 0 10px 5vw;
		background-color: rgba(255, 255, 255, .1);
	}

	#main-menu nav > ul > li > ul > li {position: relative;}

	#main-menu nav > ul > li > ul > li > a {
		display: block;
		padding: 15px 5vw 15px calc(5vw + 15px);
		font-size: 1rem;
		color: #fff;
		transition: background-color .2s linear;
	}
	#main-menu nav > ul > li > ul > li > a > span:after {
		content: attr(data-text)"";
		display: inline-block;
		margin: 2px 0 0 5px;
		font-size: .75rem;
		font-family: 'Oxygen' ,sans-serif;
		vertical-align: top;
		opacity: .5;
	}

	#main-menu nav > ul > li > ul > li > ul {display: none;}
	#main-menu nav > ul > li > ul > li > ul:before,
	#main-menu nav > ul > li > ul > li > ul:after {
		content: "";
		display: block;
		width: calc(100% - 10vw);
		height: 1px;
		margin: 10px 0 10px 5vw;
		background-color: rgba(255, 255, 255, .1);
	}

	#main-menu nav > ul > li > ul > li > ul > li > a {
		display: block;
		padding: 15px 5vw 15px calc(5vw + 30px);
		font-size: 1rem;
		color: #fff;
		transition: background-color .2s linear;
	}

	#main-menu ul button {
		position: absolute;
		display: block;
		width: 50px;
		height: 80px;
		top: 0;
		right: 3vw;
		text-indent: -9999px;
		overflow: hidden; 
		opacity: 0;
		transform: translate3d(0, 50px, 0);
		transition: opacity .3s linear, transform .7s linear;
	}
	.main-menu-open #main-menu ul button {
		opacity: 1;
		transform: translate3d(0, 0, 0);
		transition: opacity .7s linear .5s, transform .7s cubic-bezier(0,.7,.3,1) .5s;
	}
	#main-menu ul button:before {
		content: "";
		position: absolute;
		display: block;
		width: 16px;
		height: 2px;
		top: 50%;
		left: 50%;
		margin: -1px 0 0 -8px;
		background-color: #fff;
		border-radius: 2px;
	}
	#main-menu ul button:after {
		content: "";
		position: absolute;
		display: block;
		width: 2px;
		height: 16px;
		top: 50%;
		left: 50%;
		margin: -8px 0 0 -1px;
		background-color: #fff;
		border-radius: 2px;
		transition: transform .2s linear;
	}
	html:not(.sp) #main-menu ul button:hover:after,
	#main-menu ul button.active:after {transform: rotate(90deg);}

	#main-menu nav > ul > li > ul > li > button {height: 50px;}


	/* ----- List -----*/

	dl.border-set {padding: 40px 0;}

	.horizontal.sp-vertical > dt {float: none;}
	.horizontal.sp-vertical > dd + dt {margin-top: 10px;}

	.horizontal.sp-vertical > dd {margin-left: 0 !important;}
	.horizontal.border-set.sp-vertical > dd + dt + dd {margin-top: 0;}


	/* ----- Contents Area -----*/

	.heading-en {
		padding: 0 0 40px;
		font-size: calc(1rem + 7vw) !important;
	}
	
	.heading-en.small {
		font-size: calc(1rem + 5vw) !important;
	}

	.contentsBox .serviceList li {width: 50%;}

	/* Tab navigation */
	.tabNav {
		width: calc(100% - 50px);
		top: 90px;
	}

	.tabNav ul {margin-right: 5vw;}

	.tabNav + main #contentsArea {width: calc(100% - 50px);}

	/* Pagination */
	.pager {
		width: calc(100% + 4vw);
		margin-right: -4vw;
	}

	.pager .pagination .page-numbers:not(.prev):not(.next) {display: none;}

	/* Contents Box */
	.contentsBox {padding: calc(3vw + 30px) 5vw calc(3vw + 10px);}
	.contentsBox.bgBox {padding: calc(6vw + 100px) 5vw calc(6vw + 80px);}
	.contentsBox:not(.gray) + .contentsBox.bgBox {margin-top: calc(-3vw - 30px);}

	.contentsBox > h1,
	.contentsBox > h2,
	.contentsBox > h2:first-of-type,
	.listBox2 > h1,
	.listBox2 > h2,
	.listBox4 > h2 {
		font-size: 1.375rem;
		margin: 0 0 30px;
	}

	.contentsBox p {
		margin: 0 0 20px;
		font-size: 1.0625rem;
	}

	.listBox1 section a {height: 200px;}

	.listBox1 .img,
	.listBox1 .icon:before {width: 25vw;}

	.listBox1 .textArea {
		width: auto;
		padding: 20px 5vw 20px 0;
	}

	.listBox1 section a h2,
	.listBox1 section a h3 {font-size: 1.125rem;}

	.listBox1 .icon:after {
		left: 4vw;
		margin: auto 0;
	}

	.listBox2 {padding: calc(3vw + 30px) 0 30px 5vw;}

	.listBox2 section {
		width: calc(50% - 6vw);
		margin: 0 6vw 6vw 0;
	}

	.listBox2 .heading-en {width: calc(100% - 5vw);}

	.listBox2 > h1,
	.listBox2 > h2 {padding-right: 5vw;}

	.listBox2 section a {min-height: 55vw;}

	.listBox2 section h2,
	.listBox2 section h3 {font-size: 1rem;}

	.listBox2 .large-box {
		width: calc(100% + 10vw);
		margin: calc(-3vw - 30px) 0 8vw -5vw;
	}

	.listBox2 .large-box a {
		display: block;
		height: auto;
	}

	.listBox2 .large-box .img {
		position: relative;
		height: 50vw;
		transform-origin: center;
	}

	.listBox2 .large-box .textArea {
		width: 100%;
		min-height: 0;
		margin-top: 0;
		padding: 4vw 7vw 0 5vw;
	}

	.listBox2 .large-box .date {margin: -10px -15px 50px -40px;}

	.listBox2 .large-box .text {margin: 0 0 0 85px;}

	.listBox4 {padding: calc(3vw + 30px) 5vw 30px;}

	.listBox4 .heading-en {
		width: 100%;
		padding: 0 0 40px;
	}

	.contentsBox > .heading-en + h2,
	.listBox4 > .heading-en + h2 {margin: -30px 0 30px;}

	.detail-page.column-page .contentsBox.outbound > .heading-en + h2,
	.index-page.column-page .contentsBox.outbound > .heading-en + h2{
		margin: -30px 0 30px;
	}

	.listBox4 {
		display: block;
		padding: calc(3vw + 30px) 5vw calc(3vw + 10px);
	}

	.listBox4 section {
		width: auto;
		margin: 0 0 30px;
	}
	.listBox4 section:nth-of-type(2n) {transform: none;}

	.listBox4 .heading-en {width: 100%;}

	.listBox4 .text {font-size: .9375rem;}

	.listBox4 section > a h2,
	.listBox4 section > a h3 {font-size: 1.125rem;}

	.listBox4 section > a h2 span,
	.listBox4 section > a h3 span {font-size: .875rem;}

	.btn-wide {height: 120px;}

	.btn-wide a {line-height: 120px;}
	.btn-wide a:before {
		height: 60px;
		top: -20px;
	}
	.btn-wide a:after {bottom: 79px;}
	html:not(.sp) .btn-wide a:hover:after {height: 39px;}

	.btn-wide a span {padding: 0 30px 0 0;}
	.btn-wide.icon-prev a span {padding: 0 0 0 30px;}

	.listBox4 .btn-wide {
		width: calc(100% + 10vw);
		margin: 0 -5vw calc(-3vw - 10px);
	}
	.listBox4 section:nth-of-type(2n) + .btn-wide {margin-top: 0;}

	.icon:after {
		width: 18vw;
		height: 12.6vw;
		background-size: cover;
	}

	.sectionBox1 {padding: 0 0 20px;}
	.sectionBox1:after {display: none;}

	.sectionBox1 .heading {
		position: static;
		width: 130px;
		height: 130px;
		margin: 0 auto 20px;
	}

	.sectionBox1 h2 {
		width: 110px;
		height: 110px;
		left: 50%;
		margin: 0 0 0 -55px;
	}

	.sectionBox1 h3 {
		width: 110px;
		height: 110px;
		padding: 10px 5px 5px;
		font-size: 12px;
	}

	.sectionBox1 h3 br {display: none;}
	.sectionBox1 h3 .sub br {display: inline;}

	.sectionBox1 h3 .sub {font-size: 1.2rem;}

	.sectionBox1 h3 .sub.small {font-size: 13px !important;}

	.sectionBox1 p,
	.sectionBox1 dl {
		display: block;
		width: auto;
		height: auto;
		padding: 0;
		background-color: transparent;
	}

	.sectionBox1 dl dd {padding: 0;}

	.sectionBox2 {padding: 60px 0 20px;}

	.sectionBox2:before {
		top: 18px;
		left: 70px;
	}

	.sectionBox3 {
		float: left;
		width: auto;
		padding: 70px 0 0;
	}
	.sectionBox3:after {
		width: 140px;
		height: 100px;
		top: -20px;
		left: -35px;
	}

	.mainvisual1 {
		margin-top: calc(3vw + 30px);
		padding: 20px 5vw 30px;
	}
	.mainvisual1:before,
	.mainvisual1:after {
		width: calc(100% - 10vw);
		left: 5vw;
	}

	.mainvisual1 .img {
		width: 90px;
		height: 90px;
		margin-bottom: 20px;
	}

	.mainvisual1 img {
		width: 146px;
		height: 90px;
		margin: 0 0 0 -73px;
	}

	.mainvisual1 h1 {margin: 20px 0 0;}

	.mainvisual1 .sub {display: block;}

	.mainvisual1 .text {clear: both;}

	.imageList1 {display: block;}

	.imageList1 em {
		display: block;
		margin: 0 auto 15px;
		font-size: 4rem;
	}

	.imageList1 dl {
		width: auto;
		padding: 0 0 30px 90px;
		text-align: left;
	}
	.imageList1 dl:after {top: 5px;}

	.imageList1 dt {
		display: block;
		width: auto;
		height: auto;
	}

	.imageList1 dd {font-size: 1rem;}

	.imageList1 br {display: none;}

	.imageList1 em {
		display: inline-block;
		margin: 0 5px 0 0;
		font-size: 3.5rem;
	}

	.contactList {
		display: block;
		padding: 60px 0;
	}

	.contactList .heading-en {
		padding: 0 0 30px;
		text-align: center;
	}
	.contactList .heading-en:after {content: none;}

	.contactList li {
		display: block;
		width: auto;
		height: auto;
		padding: 0 5vw 40px;
		line-height: 1;
		border: 0 none;
	}

	.contactList address {font-size: 1rem;}

	.contactList address span {
		margin-bottom: 15px;
		font-size: 2.5rem;
	}

	.contactList .btnLarge {
		padding: 0 5vw;
		border-left: 0 none;
	}

	.contactList .btnLarge span {max-width: none;}

	p.btnLarge {
		display: block;
		width: auto;
		height: auto;
		padding: 50px 5vw;
	}

	p.btnLarge span {max-width: none;}

	.contentsBox table,
	.contentsBox table thead,
	.contentsBox table tbody,
	.contentsBox table tr,
	.contentsBox table th,
	.contentsBox table td {
		display: block;
		width: auto;
	}
	.contentsBox table th {
		padding: 30px 0 5px;
		font-weight: bold;
		border-bottom: 0 none !important;
	}

	.contentsBox table td {
		padding: 0 0 30px;
		border-top: 0 none;
	}

	.field1 {width: 100%;}
	.field2 {width: 100%;}
	.field3 {width: 50%;}
	/*
	.field1,
	.field2,
	.field3 {
		margin: 0 0 5px;
		padding: 2px 5px;
		font-size: 110%;
	}
	*/
	.fieldSelectWrap{width: 100%;}
	.fieldSelectWrap::after{top: 9px;}

	.contentsBox .btnSubmit {padding: 30px 0;}

	.contentsBox .btnSubmit li {display: block;}
	.contentsBox .btnSubmit li + li {margin-left: 0;}

	.contentsBox .btnSubmit input {width: 100%;}

	#footerAddress address br,
	#footerCopyright br {display: inline;}

	#contactBox {font-size: calc(4.5vw + .5rem);}

	.contentsBox .heading-concept {font-size: calc(.6rem + 7vw);}
	.contentsBox .heading-tagline {
		font-size: calc(.6rem + 3.5vw);
		margin-top: 0;
	}

	.social {float: none;}

	/* ----- contact form EFO ----- */

	.field1,
	.field2,
	.contentsBox .errorText{
		width: calc(100% - 50px);
	}
	.valid:before{
		left: auto;
		right:-4px;
		top:0;
	}
	.shubetsuWrap.valid:before,
	.workWrap.valid:before,
	.sexWrap.valid:before,
	.textarea.valid:before{
		left: auto;
		right:-4px;
		 top: 0px;
	}
	.valid:after{
		left: auto;
		right:13px;
		top:20px;
	}
	.shubetsuWrap.valid:after,
	.workWrap.valid:after,
	.sexWrap.valid:before,
	.textarea.valid:after{
		left: auto;
		right:13px;
		top: 20px;
	}

	/* ----- Tag----- */

	.contentsBox .tag li {margin: 0 3px 8px 0;}

	.contentsBox .tag li a {padding: 6px 8px;}


	/* ----- Contact ----- */

	.contact .contentsBox table th {padding: 20px 0;}

	.contact table em {
		top: 20px;
		right: 0;
	}


	/* ----- News / Column ----- */

	.news .time {margin-bottom: 20px;}
	.detail-page.column-page .time {margin-bottom: 0;}

	.detail-page.column-page .time + .right {margin-bottom: 20px;}

	.contentsBox .category {
		top: calc(3vw + 30px);
		left: 5vw;
		font-size: .875rem;
		transform: none;
	}
	.contentsBox .category:before {
		position: absolute;
		display: block;
		width: 1px;
		height: 1.2em;
		margin: 0;
		top: .4em;
		left: calc(-5vw - 1px);
	}

	.news .contentsBox h2,
	.detail-page.column-page .contentsBox h2 {
		margin: 50px 0 30px;
		font-size: 1.375rem;
	}

	.detail-page.column-page .row:after {
		content: "";
		display: block;
		clear: both;
	}

	.detail-page.column-page .col.oneThird {
		float: left;
		width: 33.33333333%;
	}

	.detail-page.column-page .contentsBox > div:not([class]) {
		padding: 5vw 5vw 1vw !important;
	}


	/* ----- Portfolio ----- */

	.top-page.portfolio #pageTitle {padding: 0 0 50px;}

	.top-page.portfolio .top-elm {
		width: calc(100% + 10vw);
		margin: 0 -5vw;
	}

	.top-page.portfolio .top-panel.tag {padding: 0 calc(5vw - 3px) 30px 5vw;}

	.top-page.portfolio .top-panel.tag li {margin: 0 3px 8px 0;}

	.top-page.portfolio .top-panel.tag li a {padding: 6px 8px;}

	.top-page.portfolio #top-scroll.listBox4 {padding: 0 5vw 0 calc(5vw + 50px);}

	.top-page.portfolio .listBox4 section.fade:nth-of-type(2n) {transform: translate3d(0, 5vw, 0) !important;}

	/* ----- Recruit -----*/

	.detail-page.recruit .row.gray {display: flex;}

	.detail-page.recruit .col.oneThird {width: 33.33333333%;}

	/* ----- column -----*/
	.talk{
		margin-bottom: 20px;
		flex-direction: column;
	}
	.talk .talker{
		width:100%;
		margin-bottom: 15px;
	}
	.interlocutor ul li{
		margin-right: 30px;
	}
	.interlocutor .face{
		width: 70px;
		height: 70px;
		/*border: px solid #233036;*/
		border-radius: 35px;
		padding: 0;
		overflow: hidden;
	}
	.interlocutor.border-set{
		margin: 0 0 20px;
		padding: 20px 0 0;
	}
	.contentsBox .interlocutor .interlocutor_caption{
		margin-bottom: 20px;
	}

	.top-strength-image img{
		width: 85%;
	}


}



/*---------------------------------------------
	540px未満
  ---------------------------------------------*/

@media screen and (max-width: 539px) {

	.top-panel .icon span {
		width: 18vw;
		height: 18vw;
	}

	#pageTitle .heading-en br {display: inline;}	

	.listBox2 .date:before {padding-top: 60%;}

	.category:before {width: 60px;}

	.listBox1 .img span {
		width: 18vw;
		height: 18vw;
	}

	.listBox1 img {
		width: 29.2vw;
		height: 18vw;
		margin: 0 0 0 -14.6vw;
	}

	.listBox2 {padding-right: 9vw;}

	.listBox2 .heading-en {
		width: calc(100% + 4vw);
		margin: 0 -4vw 0 0 !important;
		padding: 0 0 40px;
	}

	.listBox2 > .heading-en + h2 {
		width: calc(100% + 4vw);
		margin: -30px -4vw 30px 0;
		padding-right: 0;
	}

	.listBox2 section {
		width: 100%;
		margin: 0 0 30px;
	}

	.listBox2 section .img {width: 40%;}
	.listBox2 section .img:after {opacity: 0;}
	html:not(.sp) .listBox2 section a:hover .img:after {opacity: .4;}

	.listBox2 section a {min-height: 40vw;}

	.listBox2 section .textArea {
		width: 55%;
		margin: 0 0 0 auto;
		padding: 0 0 10px;
	}

	.listBox2 .date {
		margin-bottom: 0;
		color: #233036;
	}
	.listBox2 section:not(.large-box) .date:before {padding-top: 50%;}

	.listBox2 section h2,
	.listBox2 section h3 {
		padding: 0;
		color: #233036;
		line-height: 1.6;
	}

	.listBox2 .large-box {
		width: calc(100% + 19vw);
		margin-right: -9vw;
	}

	.listBox2 .large-box .category {left: calc(100% - 9vw + 1.8rem);}

	.listBox2 .large-box .img {width: 100%;}

	.listBox2 .large-box .textArea {padding-right: 9vw;}

	.listBox2 .large-box h2 {font-size: 1.125rem;}

	.listBox2 .large-box .date {margin-bottom: 0;}

	.listBox2 .large-box .text {clear: both;}

	.imageList3 {
		justify-content: left;
	}
	.imageList3 > div {
		width: 50%;
	}
	.imageList5 {
		justify-content: left;
	}
	.imageList5 > div {
		width: 50%;
	}
	.imageList5Icon{
		display: flex;
		justify-items: center;
		justify-content: center;
	}
	.listBox4 .imageList5 img{
		width: 96px;	
	}
	.slide-arrow{
		width: 20px;
		height: 20px;
	}
	.contentsBox .multiple-items.marketing-flow li .term1-2 h3{
	min-width: auto;
	}
	.contentsBox .multiple-items.marketing-flow li .term1-2 h3 br{
		display: none;
	}

	/* ----- column -----*/
	.interlocutor ul li{
		margin-right: auto;
		width: 100%;
	}
	.interlocutor ul li:last-child{
		margin-right: 0;
	}
	.interlocutor .face_outer{
		width: 100%;
	}
	.interlocutor .face_outer .face{
		width: 80%;
		height: 80%;
		max-width: 70px;
	}
	.interlocutor .face_outer .face img{
	}

	.top-strength-morphing-word{
		font-size: 40px;
	}

	.top-strength-morphing-word2 img{
		width: 160px;
		margin-top: -2px;
	}

	.top-panel .top-strength-copy{
		margin-top: 42px;
	}

	.top-strength-mountain-base{
		top:calc(50px + 140px);
	}

}

/* ---------------------------------------
	480px未満
------------------------------------------ */

@media screen and (max-width: 479px) {
	/* ----- contact form EFO ----- */
	.mwform-radio-field {
		width: calc(100% - 50px);
	}
	.mwform-radio-field-text{
		max-width: calc(100% - 30px);
	}
	.contentsBox table .tall{
		padding-bottom: 70px;
	}

}

/* ----------------------------------------
	for Recruit page
----------------------------------------- */

.recruit-page #contentsArea {padding-top: 0;}

.recruit-page #contents {background-color: transparent;}
/*
#wrapper.index-page.recruit-page article > section {overflow: hidden;}
*/

/*	contentsBox
------------------------------------------ */
.recruit-page .contentsBox {
	padding: 75px 55% 50px 8%;
	background: url(../images/recruit-page-img.jpg) no-repeat center;
	background-size: cover;
	font-size: 0.875rem;
}

.recruit-page .contentsBox h2 {
	padding-bottom: 20px;
	text-align: left;
	color: #3aaade;
}

.recruit-page .about-climarks h2 {
	font-size: 1.75rem;
	text-align: center;
	letter-spacing: 0;
}

.recruit-page .about-climarks h3 {
	color: #0090d4;
	font-size: 1.125rem;
	letter-spacing: 0;
}

.num {
	color: #0090d4;
	font-size: 1.75rem;
}

.num-box {position: relative;}

.data {
	position: relative;
	color: #0090d4;
}

.ballon {
	position: relative;
	font-size: .875rem;
	box-sizing: border-box;
	text-align: center;
}

.ballon-l {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 176px;
	height: 132px;
	font-size: 1rem;
	text-align: center;
	z-index: 2;
}
.ballon-l::before {
	display: block;
	position: absolute;
	width: 176px;
	height: 132px;
	background: url(../images/ballon-l.png) no-repeat center;
	background-size: contain;
	content: "";
	z-index: -1;
}

.ballon-m {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 138px;
	height: 104px;
	font-size: 0.875rem;
	text-align: center;
	line-height: 1.25;
	z-index: 2;
}

.ballon-s {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 127px;
	height: 95px;
	font-size: 0.75rem;
	text-align: center;
	z-index: 2;
}
.ballon-s::before {
	display: block;
	position: absolute;
	width: 127px;
	height: 95px;
	background: url(../images/ballon-s.png) no-repeat center;
	background-size: contain;
	content: "";
	z-index: -1;
}

.m-color {color: #0090d4;}

.recruit-page em {color: #333;}

.recruit-tit {
	position: relative;
	width: 100%;
	height: auto;
	background: url(../images/tit-bottom.jpg) no-repeat bottom center, #0090d4;
	background-size: contain;
	color: #fff;
	text-align: center;
}

.recruit-tit::before {
	display: block;
	position: absolute;
	top: 1.5vw;
	right: 0;
	left: 0;
	width: 705px;
	height: 292px;
	margin: auto;
	z-index: 1;
}

.recruit-tit::after {
	display: block;
	position: absolute;
	right: 0;
	left: 0;
	bottom: -15px;
	width: 109px;
	height: 117px;
	margin: auto;
	background: url(../images/tree-img.png) no-repeat center;
	background-size: contain;
	content: "";
}

.recruit-tit .inner {
	position: relative;
	padding-top: 100px;
	padding-bottom: 135px;
}

.recruit-tit .inner::before {
	position: absolute;
	bottom: -30px;
	left: 180px;
	width: 71px;
	height: 156px;
	background: url(../images/member-img06.png) no-repeat center;
	background-size: contain;
	content: "";
}

.recruit-tit .inner::after {
	position: absolute;
	bottom: -30px;
	right: 180px;
	width: 87px;
	height: 153px;
	background: url(../images/member-img07.png) no-repeat center;
	background-size: contain;
	content: "";
}

@-webkit-keyframes charactor01 {
	0%, 100% {
	-webkit-transform: rotate(10deg);
	transform: rotate(10deg);
	}
	20% {
	-webkit-transform: rotate(0);
	transform: rotate(0);
	}
	80% {
	-webkit-transform: rotate(0);
	transform: rotate(0);
	}
}
@keyframes charactor01 {
	0%, 100% {
	-webkit-transform: rotate(10deg);
	transform: rotate(10deg);
	}
	20% {
	-webkit-transform: rotate(0);
	transform: rotate(0);
	}
	80% {
	-webkit-transform: rotate(0);
	transform: rotate(0);
	}
}
@-webkit-keyframes charactor02 {
	0%, 100% {
	-webkit-transform: rotate(-10deg);
	transform: rotate(-10deg);
	}
	20% {
	-webkit-transform: rotate(0);
	transform: rotate(0);
	}
	80% {
	-webkit-transform: rotate(0);
	transform: rotate(0);
	}
}
@keyframes charactor02 {
	0%, 100% {
	-webkit-transform: rotate(-10deg);
	transform: rotate(-10deg);
	}
	20% {
	-webkit-transform: rotate(0);
	transform: rotate(0);
	}
	80% {
	-webkit-transform: rotate(0);
	transform: rotate(0);
	}
}

.recruit-tit .text-box {position: relative;}

.recruit-tit h2 {
	position: relative;
	font-size: 1.75rem;
	text-align: center;
	letter-spacing: 0;
}

.recruit-tit p {
	padding: 0 4vw;
	font-size: .875rem;
	line-height: 1.71;
}

/* for background-img */
.recruit-tit .text-box::before {
	display: block;
	position: absolute;
	right: 40px;
	bottom: -50px;
	width: 109px;
	height: 85px;
	background: url(../images/recruit-tit-img02.png) no-repeat center;
	background-size: contain;
	content: "";
}

.recruit-tit .text-box::after {
	display: block;
	position: absolute;
	bottom: -30px;
	left: 25px;
	width: 109px;
	height: 85px;
	background: url(../images/recruit-tit-img03.png) no-repeat center;
	background-size: contain;
	content: "";
}

.recruit-tit h2::before {
	display: block;
	position: absolute;
	top: -78px;
	right: 75px;
	width: 109px;
	height: 85px;
	background: url(../images/recruit-tit-img01.png) no-repeat center;
	background-size: contain;
	content: "";
}

.recruit-tit h2::after {
	display: block;
	position: absolute;
	top: -55px;
	left: 62px;
	width: 175px;
	height: 84px;
	background: url(../images/recruit-tit-img04.png) no-repeat center;
	background-size: contain;
	content: "";
}


/* ---------------------------------------------
	社員を知る
----------------------------------------------- */

.staffList{
	padding-top: 0;
	background-color: #FFF;
}
.staffList section > a h3{
	padding-bottom:0px;
}

.staffList .img{
	border-radius: 60px;
	width: 120px;
	height: 120px;
	margin-left:30px;
	margin-right: auto;
}
.staffList .img img{
	position: absolute;
	max-width: none;
	width: 120px;
	left: 0%;
	margin: 0 0 0 0px;
 }
 html:not(.sp) .staffList .img:after{
 	width: 120px;
 }
.staffList section > a h2{
 	padding-bottom: 10px;
 }
.staffList .staffName{
	padding-top: 0;
	font-size: 1.5rem;
	line-height: 1em;
}
.staffList .staffName::before{
	display: none;
}
.staffList .staffName span{
	display: inline-block;
	margin-left: 5px;
}

.staffList .tag ul {
	margin-bottom: 0;
	margin-top: 5px;
	padding-left: 30px;
}

.staffList .tag li {
	display: inline-block;
	font-size: .75rem;
	padding: 5px 10px;
	line-height: 1em;
	border: solid 1px rgba(35, 48, 54, .2);
	border-radius: 20px;
	color: #686f75;
}
.staffList .tag li:after {content: none;}

.officeBox h3 {
	margin: 0px 0 30px;
	font-size: 1.25rem;
	font-size: 1.625rem;
	font-size: 1.375rem;
	font-weight: bold;
	line-height: 1.6;
	color: #233036;
}
.officeBox .row{
	justify-content: center;
	align-items: center;
}

.officeBox .half{
	margin-bottom: 90px;
}
.officeBox .half:nth-child(odd) h3,
.officeBox .half:nth-child(odd) p{
	margin-right: 50px;
}
.officeBox .half:nth-child(even) h3,
.officeBox .half:nth-child(even) p{
	margin-left: 50px;
}
.officeBox .half p{
	margin-bottom: 15px;
}

.mainvisual1 .staffDetailCatchcopy{
	font-size: 1.5rem;
}
.staffDetailName{
	font-size: 2.25rem; font-weight: bold;color:#233036;line-height: 1em; margin-bottom: 10px;
}
.mainvisual1 .staffDetailPosition{
	margin-left:15px;
	margin-right:0px;
}
.mainvisual1 .staffDetailSince{
	margin-left:10px;
	margin-right:0px;
}
.mainvisual1 .staffDetailSince{
	margin-left:10px;
	margin-right:0px;
}
.mainvisual1 .staffDetailList li{
	position: relative;
	padding: 0 0 0 1.2em;
}
.mainvisual1 .staffDetailList li:after {
	content: "";
	position: absolute;
	display: block;
	width: 4px;
	height: 4px;
	top: calc(1em - 2px);
	left: 0.3em;
	background-color: #999;
	border-radius: 2px;
}

.staffDetailProject{
	padding-top: 1vw;
}
.memberList{
	background-color:#f1f5f8;
	padding-top: calc(3vw + 50px);
}
.memberList section .img{
	margin-left: auto;
	margin-right: auto;
	position: relative;
	height: 120px;
	width: 120px;
	border-radius: 60px;
}

.memberList section a{
	min-height: none;
}


.memberList section h2,
.memberList section h3{
	color: #000;
	padding: 0 8%;
	font-feature-settings: "palt";
}
.memberList section h2{
	font-size: 1rem;
	line-height: 1.5em;
	margin-top: 18px;
}
.memberList section .sub{
	display: inline-block;
	font-size: .75rem;
	font-weight: normal;
	line-height: 1.6;
	color: #9ca7af;
}
.memberList section .text {
	padding: 0 8%;
	font-size: .8125rem;
	line-height: 1.8;
	color: #686f75;
	margin-left: 0;
}

html:not(.sp):not(.is-scrolling) .memberList section > a:hover .img {transform: scale(.95);}

html:not(.sp) .memberList .img:before {
	content: "";
	position: absolute;
	z-index: 1;
	display: block;
	width: 101%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: #233036;
	opacity: 0;
	transition: opacity 0.3s ease-out;
}
html:not(.sp):not(.is-scrolling) .memberList section > a:hover .img:before {opacity: .6;}
html:not(.sp) .memberList .img:after {
	content: "詳細を見る";
	position: absolute;
	z-index: 2;
	display: block;
	width: 120px;
	height: 40px;
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	font-size: 83%;
	line-height: 40px;
	color: #fff;
	text-align: center;
	opacity: 0;
	transform: scale(1.3);
	transition: transform .3s ease-out, opacity .3s ease-out;
	background-color: transparent;
}

html:not(.sp):not(.is-scrolling) .memberList section > a:hover .img:after {
	opacity: 1;
	transform: scale(1.05);
}

@media screen and (max-width: 1199px){
	.staffList {
		padding: calc(3vw + 30px) 3vw 50px 6vw;
	}
}
@media screen and (max-width: 767px){
	.staffList {padding: calc(3vw + 30px) 5vw calc(3vw + 10px);}
	.staffList section > a{
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: flex-start;
	}
	.staffList .img{
		width:  16vw;
		height: 16vw;
		border-radius: 8vw;
		margin-left: 0;
	}
	.staffList .img img{
		width:  16vw;
		height: 16vw;
	}
	.staffDescription{
		flex: 1;
		margin-left: calc(3vw + 5px);
	}
	.staffList section > a h2,
	.staffList section > a h3{
		padding-left: 0;
	}
	.staffList section > a h2{
		padding-top: 0;
	}
	.staffList  .text{
		padding-left: 0;
	}
	.staffList section > a h2::before{
		display: none;
	}
	.staffList .tag ul{
		padding-left: 0;
	}
	.staffList section > a h2{
		font-size: 1.125rem;
	}

	html:not(.sp) .staffList .img:after{
		width: 16vw;
	}

	.staffDetailName{
		margin-top: 15px;
	}
	.mainvisual1 .staffDetailPosition{
		padding-top: 15px;
		padding-bottom: 0px;
		margin-left:0px;
		line-height: 1em;
	}
	.mainvisual1 .staffDetailSince{
		margin-top: 5px;
		margin-left:0px;
		padding-bottom: 5px;
	}
	.staffDetailProject{
		padding-top: 0px;
	}
	.memberList section {
		width: calc(100% - 6vw);
	}
	.memberList section .text{
		padding: 0;
	}
	.memberList section .img {
		/*width: 100px;
		height: 100px;*/
		width: 16vw;
		height: 16vw;
		border-radius: 8vw;
	}
	.memberList .img img{
		/*width: 100px;
		height: 100px;*/
		width: 16vw;
		height: 16vw;
	}
	.memberList section .sub{
		display: inline-block;
	}
	.memberList section .text{
		font-size: .9375rem;
	}
	.memberList section > a h2{
		margin-top: 0;
	}
	.memberList section a{
		min-height: 90px;
	}
	.memberList .category:before{
		width: 30px;
	}
}

@media screen and (max-width: 430px){
	.staffList .img{
		width:  70px;
		height: 70px;
		border-radius: 35px;
	}
	.staffList .img img{
		width:  70px;
		height: 70px;
	}
	.memberList section .img{
		width:  70px;
		height: 70px;
		border-radius: 40px;
	}
	.memberList section .img img{
		width:  70px;
		height: 70px;
	}
}



/* ---------------------------------------------
	about Climarks
----------------------------------------------- */

.about-climarks {
	padding-bottom: 95px;
	background: #fff;
	color: #333;
	overflow: hidden;
}

.about-climarks .inner {
	position: relative;
	width: 100%;
	height: auto;
	padding-top: 100px;
}

.row-box {
	position: relative;
	width: 100%;
	height: auto;
	margin-bottom: 20px;
}

.flex-box {
	display: flex;
	flex-wrap: wrap;
}



/* ----------------------------------------
	クライマークスってどんな会社
----------------------------------------- */

.about-climarks h2 {
	display: table;
	position: relative;
	margin: auto;
	padding-bottom: 155px;
	color: #0090d4;
	line-height: 1.35;
	z-index: 1;
}

.about-climarks h2::after {
	display: block;
	position: absolute;
	right: -30px;
	top: -25px;
	width: 67px;
	height: 51px;
	background: url(../images/h2-ballon.png) no-repeat center;
	background-size: contain;
	content: "";
	z-index: -1;
}

.about-climarks h2 span {
	display: block;
	position: relative;
	color: #676767;
	font-family: "Noto Sans Japanese", sans-serif;
	font-size: 0.75rem;
}

.about-climarks h2 span:not(.scroll-bar)::after {
	display: block;
	position: absolute;
	bottom: -92px;
	right: 0;
	left: 0;
	width: 149px;
	height: 63px;
	margin: auto;
	background: url(../images/colleagues.png) no-repeat center;
	background-size: contain;
	content: "";
}

.about-climarks h2 span.scroll-bar {
	display: block;
	position: absolute;
	right: 0;
	left: 0;
	bottom: 0;
	width: 2px;
	height: 64px;
	margin: 0 auto;
}

.about-climarks h2 span.scroll-bar::before {
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	width: 2px;
	height: 64px;
	margin: auto;
	background: #0090d4;
	-webkit-animation: scroll-bar 1.5s linear infinite;
	animation: scroll-bar 1.5s linear infinite;
	content: "";
}

@-webkit-keyframes scroll-bar {
	0%, 100% {
	top: 0;
	height: 64px;
	}
	50% {
	top: 64px;
	height: 0;
	}
	51% {
	top: 0;
	height: 0;
	}
}
@keyframes scroll-bar {
	0%, 100% {
	top: 0;
	height: 64px;
	}
	50% {
	top: 64px;
	height: 0;
	}
	51% {
	top: 0;
	height: 0;
	}
}


/* ------- numbers --------- */

.numbers .zero {
	position: absolute;
	top: 69px;
	left: 119px;
	transition-duration: 1s;
	transition-timing-function: ease-in-out;
	transition-delay: 3s;
}

.numbers .one {
	position: absolute;
	top: 175px;
	left: 212px;
	transition-duration: 1s;
	transition-timing-function: ease-in-out;
	transition-delay: 6s;
}

.numbers .two {
	position: absolute;
	top: 160px;
	left: 19px;
	transition-duration: 1s;
	transition-timing-function: ease-in-out;
	transition-delay: 9s;
}

.numbers .three {
	position: absolute;
	top: 225px;
	right: 49px;
}

.numbers .five {
	position: absolute;
	top: -30px;
	right: 0;
}

.numbers .six {
	position: absolute;
	top: -80px;
	left: 19px;
}

.numbers .nine {
	position: absolute;
	top: 171px;
	right: 176px;
}



/* ----------------------------------------
	社員数
------------------------------------------- */

#row-box1 {
	margin-bottom: 0;
	padding-bottom: 40px;
}

.members .flex-box {align-items: flex-end;}
/*
.about-climarks .members {overflow: hidden;}
*/
.about-climarks .members ul {
	display: flex;
	position: relative;
	width: 370px;
	margin-top: 40px;
	margin-left: 95px;
}

.about-climarks .members li {
	width: calc(100% / 4);
	text-align: center;
}

.about-climarks .members li.member-pro {width: calc(25% + 5%);}

.about-climarks .members li.member-dire {width: calc(25% + 5%);}

.about-climarks .members li.member-de {width: calc(25% - 2%);}

.about-climarks .members li.member-en {
	position: relative;
	width: calc(25% - 8%);
}

.about-climarks .members li dl dt {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	position: relative;
	height: 177px;
	margin-bottom: 10px;
}

.about-climarks .members dt .num {
	display: inline-block;
	position: absolute;
	right: 0;
	left: 0;
	display: block;
}

.about-climarks .members .member-pro .num {
	top: -10px;
	left: 14px;
}

.about-climarks .members .member-dire .num {
	top: -45px;
	right: 23px;
}

.about-climarks .members .member-de .num {
	top: -10px;
	right: 25px;
}

.about-climarks .members .member-en .num {top: 50px;}

.abotu-climarks .members dt img {
	display: block;
	position: relative;
	width: 100%;
	height: 177px;
	margin: auto;
}

.about-climarks .members dd {
	font-size: 0.75rem;
	line-height: 1.25;
}

.members .num-box {
	position: relative;
	margin-bottom: 25px;
	margin-left: 30px;
}

.members .num-box .ballon {
	position: absolute;
	top: -130px;
	right: -7vw;
	width: 176px;
	height: 132px;
	padding-top: 30px;
	font-weight: bold;
	background: url(../images/ballon-l.png) no-repeat center;
	background-size: contain;
	z-index: 0;
}

.members .data {
	position: relative;
	font-size: 2.1875rem;
	color: #333;
	z-index: 1;
}

.members .data span {
	color: #0090d4;
	font-size: 7rem;
}

.members::before {
	display: block;
	position: absolute;
	top: 3.5vw;
	right: 3vw;
	width: 495px;
	height: 280px;
	margin: auto;
	background: url(../images/members-bg.png) no-repeat center;
	background-size: contain;
	content: "";
}



/* ----------------------------------------
	#row-box2	男女比　年齢
----------------------------------------- */

#row-box2 {margin-bottom: 60px;}

#row-box2 .flex-inner {
	position: relative;
	width: 42%;
	z-index: 2;
}

#row-box2 .flex-inner h3 {text-align: center;}

#row-box2 .flex-inner .img {margin-left: 2vw;}

#row-box2 .flex-inner .img img {
	max-width: 251px;
	max-height: 214px;
	width: 22vw;
}

#row-box2 .num-box {
	position: relative;
	margin-top: -20px;
	font-size: 3.5625rem;
	line-height: 1;
	text-align: right;
}

#row-box2 .num-box .data {color: #333333;}

#row-box2 .num-box .data .female {
	color: #ed95b3;
	letter-spacing: .1em;
}

#row-box2 .num-box .data em {
	display: inline-block;
	position: relative;
	top: 6px;
	font-size: 3.5625rem;
	text-align: center;
	letter-spacing: .1em;
	line-height: 1;
}

#row-box2 .num-box .data em.male {
	margin-left: 5px;
}

#row-box2 .num-box .data em span {
	display: block;
	position: absolute;
	bottom: -10px;
	right: 0;
	left: -5px;
	margin: auto;
	font-size: .875rem;
	text-align: center;
	letter-spacing: 0;
}

#row-box2 .num-box .ballon {
	position: absolute;
	top: -35px;
	left: 10%;
	left: calc(5vw - 10px);
	width: 138px;
	height: 104px;
	padding-top: 45px;
	background: url(../images/ballon-m-d.png) no-repeat center;
	background-size: contain;
	font-size: .875rem;
	line-height: 1.28;
}

#row-box2 .flex-inner.age {
	position: relative;
	width: calc(58% - 115px);
	margin-top: 60px;
	padding-left: 10px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	z-index: 1;
}
/*
#row-box2 .flex-inner.age::before {
	display: block;
	position: absolute;
	top: 35px;
	right: -60px;
	width: 102px;
	height: 139px;
	background: url(../../recruit/images/numbers/age-img.png) no-repeat center;
	background-size: contain;
	content: "";
	z-index: 5;
}
*/
#row-box2 .flex-inner.age::after {
	display: block;
	position: absolute;
	top: -80px;
	right: -110px;
	width: 309px;
	height: 140px;
	background: url(../images/age-bg.png) no-repeat center;
	background-size: contain;
	content: "";
	z-index: -1;
}

#row-box2 .flex-inner.age h3 {
	margin-bottom: 5px;
	text-align: left;
}

#row-box2 .bar-graph {
	padding-bottom: 10px;
/*	border-bottom: 8px solid #f6f5f5;*/
}

#row-box2 .bar-graph li {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	margin-bottom: 2px;
}

#row-box2 .bar-graph .bar {
	display: block;
	margin: 5px 0 5px 15px;
}

.bar-graph.animation .twenties .bar {
	width: 35%;
	height: 20px;
	background: #0090d4;
	-webkit-animation: bar01 .8s linear;
	animation: bar01 .8s linear;
}

.bar-graph.animation .thirties .bar {
	width: 57%;
	height: 20px;
	background: #0076ad;
	-webkit-animation: bar02 .8s linear;
	animation: bar02 .8s linear;
}

.bar-graph.animation .forties .bar {
	width: 50%;
	height: 20px;
	background: #006696;
	-webkit-animation: bar03 .8s linear;
	animation: bar03 .8s linear;
}

@-webkit-keyframes bar01 {
	0% {
	width: 0;
	}
	100% {
	width: 25%;
	}
}
@keyframes bar01 {
	0% {
	width: 0;
	}
	100% {
	width: 25%;
	}
}
@-webkit-keyframes bar02 {
	0% {
	width: 0;
	}
	100% {
	width: 57%;
	}
}
@keyframes bar02 {
	0% {
	width: 0;
	}
	100% {
	width: 57%;
	}
}
@-webkit-keyframes bar03 {
	0% {
	width: 0;
	}
	100% {
	width: 50%;
	}
}
@keyframes bar03 {
	0% {
	width: 0;
	}
	100% {
	width: 50%;
	}
}

#row-box2 .flex-inner.age .ballon {
	position: absolute;
	top: 10px;
	right: -30px;
	width: 138px;
	height: 104px;
	z-index: 2;
	line-height: 1.2;
}

#row-box2 .flex-inner.age .ballon span {
	font-weight: bold;
	font-size: 1.562rem;
}

#row-box2 .flex-inner.age .ballon::before {
	display: block;
	position: absolute;
	top: -20px;
	left: 0;
	right: 0;
	width: 138px;
	height: 104px;
	background: url(../images/ballon-m-d.png) no-repeat center;
	-webkit-transform: scale(1, -1);
	transform: scale(1, -1);
	background-size: contain;
	content: "";
	z-index: -2;
}

#row-box2 .flex-inner.age dd {
	display: inline-block;
	position: absolute;
	top: 95px;
	right: -5px;
	font-size: 0.75rem;
}



/* -----------------------------------------------
	出身地・定着率・結婚率・Mac vs Win
------------------------------------------------- */

#row-box3 {
	position: relative;
	width: 100%;
	height: 600px;
	margin-bottom: 85px;
	padding: 0 6vw;
}

#row-box3 .tree {
	display: inline-block;
	position: absolute;
	top: -35px;
	left: 52%;
	max-width: 109px;
}

.home-town-box {
	position: relative;
	width: 47.5%;
	height: inherit;
/*	padding-top: 60px;*/
	z-index: 2;
}
.home-town-box::before {
	display: block;
	position: absolute;
	top: 100px;
	left: -10px;
	width: 386px;
	height: 374px;
	background: url(../images/ranking-hometown-img.png) no-repeat center;
	background-size: contain;
	mix-blend-mode: multiply;
	content: "";
}
.home-town-box::after {
	display: block;
	position: absolute;
	top: 175px;
	left: -10px;
	width: 204.5px;
	height: 187px;
	background: url(../images/ranking-hometown-bg.png) no-repeat center;
	background-size: contain;
	content: "";
	z-index: -1;
}

.home-town-box h3 {margin-bottom: 20px;}

.home-town-box .ballon-m {
	position: absolute;
	top: 395px;
	left: 180px;
}

.home-town-box .ballon-m::before {
	display: block;
	position: absolute;
	top: -10px;
	right: 0;
	left: 0;
	width: 138px;
	height: 104px;
	background: url(../images/ballon-m.png) no-repeat center;
	background-size: contain;
	-webkit-transform: scale(1, 1);
	transform: scale(1, 1);
	content: "";
	z-index: -1;
}

.home-town {
	width: 160px;
	height: 186px;
	margin-left: 35px;
	padding: 18px 15px 20px 15px;
	border: 3px solid #bfdce9;
	border-radius: 3px;
	background: #fff;
	color: #0090d4;
}

.home-town li {
	position: relative;
	margin: 0 0 3px 0;
	padding: 0 0 0 27px;
	line-height: 1.25;
}

.home-town li span {
	display: inline-block;
	width: 55px;
	text-align: right;
}

.home-town li.rank-top::before {
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 18px;
	height: 17px;
	background: url(../images/rank-top.png) no-repeat center;
	background-size: contain;
	content: "";
}

.home-town li.rank-sec::before {
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 18px;
	height: 15px;
	background: url(../images/rank-sec.png) no-repeat center;
	background-size: contain;
	content: "";
}

.colleagues-number-box {
	position: absolute;
	top: 0;
	right: 0;
	padding-right: 6vw;
	text-align: center;
}

.colleagues-number-box h3 {margin-bottom: 25px;}

.colleagues-number-box .data {
	max-width: 251px;
	max-height: 250px;
	width: 17.4vw;
	height: 17.3vw;
	padding-top: 53%;
	font-family: -apple-system, BlinkMacSystemFont, MyYuGothicM, "Yu Gothic", Meiryo, "Hiragino kaku Gothic ProN", sans-serif;
	font-size: 2.375rem;
	color: #fff;
	z-index: 2;
}
.colleagues-number-box .data::before {
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	width: 251px;
	height: 250px;
	background: url(../images/members-number-img.png) no-repeat center;
	background-size: contain;
	content: "";
	z-index: -1;
}
.colleagues-number-box .data::after {
	display: block;
	position: absolute;
	right: 10px;
	bottom: -10px;
	width: 108.5px;
	height: 121px;
	background: url(../images/members-number-bg.png) no-repeat center;
	background-size: contain;
	content: "";
	z-index: -2;
}

.colleagues-number-box .data span {
	font-size: 5.437rem;
	line-height: 1;
}

.mac-vs-win-box {
	position: absolute;
	top: 400px;
	left: 375px;
}

.mac-vs-win-box h3 {font-size: 1rem !important;}

.mac-vs-win-box dl {text-align: center;}

.mac-vs-win-box P {
	position: relative;
	font-size: 3.562rem;
	line-height: 1;
	letter-spacing: .1em;
}

.mac-vs-win-box P em {
	position: relative;
	top: 6px;
	display: inline-block;
	font-size: 3.562rem;
	line-height: 1;
}

.mac-vs-win-box P em span {
	display: block;
	position: absolute;
	font-size: 0.875rem;
	letter-spacing: 0;
}

.mac-vs-win-box P .mac {color: #0090d4;}

.mac-vs-win-box P .mac span {bottom: -10px;}

.mac-vs-win-box P .win {color: #006696;}

.mac-vs-win-box P .win span {
	right: 0;
	left: -10px;
/*	bottom: -10px;*/
	margin: auto;
}

.be-married-box {
	position: absolute;
	right: 6vw;
	bottom: -15px;
}
.be-married-box::before {
	display: block;
	position: absolute;
	top: -35px;
	left: -110px;
	width: 229px;
	height: 170px;
	background: url(../images/be-married-img.png) no-repeat center;
	background-size: contain;
	content: "";
}

.be-married-box h3 {font-size: 1rem !important;}

.be-married-box .data {
	font-family: -apple-system, BlinkMacSystemFont, MyYuGothicM, "Yu Gothic", Meiryo, "Hiragino kaku Gothic ProN", sans-serif;
	font-size: 2.312rem;
}

.be-married-box .data span {font-size: 5rem;}


/* -----------------------------------------
	働いとことのある業種
-------------------------------------------- */

#row-box4 {
	position: relative;
	margin-bottom: 40px;
	padding: 0 6vw;
}
#row-box4::before {
	display: block;
	position: absolute;
	right: 0;
	bottom: -60px;
	width: 146.5px;
	height: 230px;
	background: url(../images/pre-job-bg.png) no-repeat right bottom;
	background-size: contain;
	content: "";
}

#row-box4 ul {
	position: relative;
	width: 100%;
	height: 235px;
	z-index: 2;
}

#row-box4 ul li {
	display: inline-block;
	position: absolute;
	font-size: 0.875rem;
	line-height: 1.42;
	text-align: center;
	z-index: 0;
}
#row-box4 ul li:first-child {
	top: 10px;
	left: 21%;
	width: 119px;
	height: 89px;
	padding-top: 22px;
	background: url(../images/ballon01.png) no-repeat center;
	background-size: contain;
}
#row-box4 ul li:nth-child(2) {
	top: 0;
	left: 44%;
	width: 131px;
	height: 97px;
	padding-top: 33px;
	background: url(../images/ballon02.png) no-repeat center;
	background-size: contain;
}
#row-box4 ul li:nth-child(3).painter {
	top: 40px;
	left: 65%;
	width: 101px;
	height: 75px;
	padding-top: 22px;
	background: url(../images/ballon03.png) no-repeat center;
	background-size: contain;
}
#row-box4 ul li:nth-child(3).painter::before {
	display: block;
	position: absolute;
	top: -25px;
	right: -60px;
	width: 81px;
	height: 115px;
	background: url(../images/pre-job-img02.png) no-repeat center;
	background-size: contain;
	content: "";
	z-index: 2;
}
#row-box4 ul li:nth-child(4) {
	top: 42px;
	right: 0;
	width: 97px;
	height: 72px;
	padding-top: 22px;
	background: url(../images/ballon04.png) no-repeat center;
	background-size: contain;
}
#row-box4 ul li:nth-child(5) {
	top: 50px;
	left: 5px;
	width: 163px;
	height: 121px;
	padding-top: 35px;
	background: url(../images/ballon05.png) no-repeat center;
	background-size: contain;
}
#row-box4 ul li:nth-child(6).lottery {
	top: 92px;
	left: 26%;
	width: 147px;
	height: 111px;
	padding-top: 32px;
	background: url(../images/ballon06.png) no-repeat center;
	background-size: contain;
}
#row-box4 ul li:nth-child(6).lottery::before {
	display: block;
	position: absolute;
	top: -20px;
	right: -10px;
	width: 79px;
	height: 56px;
	background: url(../images/pre-job-img01.png) no-repeat center;
	background-size: contain;
	content: "";
	z-index: 2;
}
#row-box4 ul li:nth-child(7) {
	top: 108px;
	left: 48%;
	width: 147px;
	height: 110px;
	padding-top: 35px;
	background: url(../images/ballon07.png) no-repeat center;
	background-size: contain;
}
#row-box4 ul li:nth-child(8) {
	top: 130px;
	right: 5%;
	width: 182px;
	height: 109px;
	padding-top: 36px;
	background: url(../images/ballon08.png) no-repeat center;
	background-size: contain;
}



/* -------------------------------------------------
	社員旅行
-------------------------------------------------- */

#row-box5 {
	position: relative;
	margin-bottom: 50px;
	padding: 0 6vw;
}
#row-box5::before {
	display: block;
	position: absolute;
	top: -85px;
	left: 30px;
	width: 128.5px;
	height: 137px;
	background: url(../images/trips-bg.png) no-repeat center;
	background-size: contain;
	content: "";
}

#row-box5 .img-box {
	position: relative;
	width: 100%;
	height: auto;
	margin-top: 5px;
}

#row-box5 .img-box ul {display: flex;}

#row-box5 .img-box ul li {width: 20%;}
#row-box5 .img-box ul li img {
	width: 100%;
	height: auto;
}

#row-box5 .img-box .ballon-l {
	position: absolute;
	right: 20px;
	bottom: -40px;
	line-height: 1.5;
}

#row-box5 .img-box .ballon-l::before {
	display: block;
	position: absolute;
	top: -10px;
	left: 0;
	right: 0;
	width: 176px;
	height: 132px;
	margin: auto;
	background: url(../images/ballon-l.png) no-repeat center;
	background-size: contain;
	-webkit-transform: scale(1, -1);
	transform: scale(1, -1);
	z-index: -1;
	content: "";
}



/* --------------------------------------------
	連続増収年数
---------------------------------------------- */

#row-box6 {
	position: relative;
	width: 100%;
	height: 296px;
	margin-bottom: 60px;
}

#row-box6 .row-box-inner {
	position: relative;
	max-width: 359.5px;
	max-height: 296px;
	width: 24.9vw;
	height: 20.5vw;
	margin: 0 auto;
	padding: 0;
}

#row-box6 .img-box {
	position: relative;
	margin: auto;
	padding-top: 90px;
	text-align: center;
	box-sizing: border-box;
	z-index: 2;
}

#row-box6 .img-box::before {
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	left: -15px;
	max-width: 359.5px;
	max-height: 296px;
	width: 24.9vw;
	height: 20.5vw;
	margin: auto;
	background: url(../images/sales-img.png) no-repeat center;
	background-size: contain;
	content: "";
	z-index: -1;
}

#row-box6 h3 {
	color: #fff;
	line-height: 1;
	text-align: center;
}

#row-box6 .data {
	font-size: 1.312rem;
	font-weight: normal;
	color: #fff;
	line-height: 1;
}

#row-box6 .data span {
	display: block;
	font-size: 7.187rem;
}

#row-box6 .ballon-s {
	position: absolute;
	top: 55px;
	left: -150px;
	line-height: 1.8;
}

#row-box6 .ballon-s::before {
	top: 8px;
	left: 0;
	right: 0;
	margin: auto;
}

#row-box6 .ballon-l {
	position: absolute;
	top: 53px;
	right: -170px;
	font-size: .75rem;
	line-height: 1.8;
}

#row-box6 .ballon-l:before {
	top: 0;
	left: 0;
	right: 0;
	margin: auto;
}



/* ----------------------------------------------
	制作ジャンル・直接取引率・平均プロジェクト
----------------------------------------------- */

#row-box7 {
	position: relative;
	margin-bottom: 75px;
	padding: 0 6vw;
}

#row-box7 .flex-inner {width: 33.33333%;}
#row-box7 .flex-inner:nth-child(2) {width: calc(33.3333% + 5%);}
#row-box7 .flex-inner:last-child {width: calc(33.3333% - 5%);}

#row-box7 .flex-inner h3 {
	margin-bottom: 25px;
	text-align: center;
	line-height: 1.2;
}
#row-box7 .flex-inner:last-child h3 {
	margin-top: -10px;
	margin-bottom: 35px;
}

#row-box7 .flex-inner ul.works-ganre {
	position: relative;
	width: 246px;
	height: 226px;
	margin: auto;
}
#row-box7 .flex-inner ul.works-ganre::before {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: -10px;
	width: 246px;
	height: 226px;
	background: url(../images/genre-img.png) no-repeat center;
	background-size: contain;
	content: "";
}

#row-box7 .flex-inner ul.works-ganre li {
	position: absolute;
	width: 100px;
	top: 80px;
	right: 18px;
}

#row-box7 .flex-inner ul.works-ganre li dl {
	position: relative;
	color: #fff;
	text-align: center;
}

#row-box7 .flex-inner ul.works-ganre li dl dt {
	position: absolute;
	right: 0;
	left: 0;
	bottom: -28px;
	margin: auto;
	font-size: 0.75rem;
	line-height: 1.2;
}

#row-box7 .flex-inner ul.works-ganre li dl dd {
	position: relative;
	top: 0;
	right: 0;
	left: 0;
	margin: auto;
	font-size: 1.25rem;
	line-height: 1;
}

#row-box7 .flex-inner ul.works-ganre li dl dd span {font-size: 2.625rem;}

#row-box7 .flex-inner ul.works-ganre li:nth-child(2),
#row-box7 .flex-inner ul.works-ganre li:nth-child(3) {
	top: 145px;
	left: 52px;
}

#row-box7 .flex-inner ul.works-ganre li:nth-child(2) dt,
#row-box7 .flex-inner ul.works-ganre li:nth-child(3) dt {bottom: -18px;}

#row-box7 .flex-inner ul.works-ganre li:nth-child(2) dd span,
#row-box7 .flex-inner ul.works-ganre li:nth-child(3) dd span,
#row-box7 .flex-inner ul.works-ganre li:nth-child(4) dd span {font-size: 1.8rem;}

#row-box7 .flex-inner ul.works-ganre li:nth-child(3) {
	top: 78px;
	left: 11px;
}

#row-box7 .flex-inner ul.works-ganre li:last-child {
	top: 24px;
	left: 42px;
}

#row-box7 .flex-inner ul.works-ganre li:last-child dt {bottom: -16px;}

#row-box7 .flex-inner ul.works-ganre li:last-child dd {font-size: 0.75rem;}
/*
#row-box7 .flex-inner ul.works-ganre li:last-child dd span {font-size: 1.25rem;}
*/
#row-box7 .direct-rate {
	position: relative;
	width: 220px;
	height: 220px;
	margin: auto;
	background: url(../images/direct-rate-img.png) no-repeat center;
	background-size: contain;
}

#row-box7 .direct-rate .data {
	position: absolute;
	bottom: 20px;
	left: 62px;
	color: #fff;
	font-size: 1.625rem;
	font-weight: normal;
	line-height: 1.2;
}
#row-box7 .direct-rate .data span {font-size: 4.687rem;}

#row-box7 .average-per-capita {
	position: relative;
	width: 155px;
	height: 183px;
	margin: auto;
	background: url(../images/average-per-capita.png) no-repeat center;
	background-size: contain;
}

#row-box7 .average-per-capita .data {
	position: absolute;
	top: 45px;
	right: 0;
	left: -10px;
	margin: auto;
	font-size: 1.562rem;
	line-height: 1.2;
	text-align: center;
}

#row-box7 .average-per-capita .data span {
	display: block;
	font-size: 3.5rem;
}



/* ---------------------------------------------
	案件に関わるメンバー
----------------------------------------------- */

#row-box8 {
	position: relative;
	margin-bottom: 80px;
	padding: 0 6vw;
}
#row-box8 h3 {
	margin-bottom: 30px;
	text-align: center;
}
#row-box8 ul {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	max-width: 430px;
}

#row-box8 ul li {width: 20%;}
#row-box8 ul li:first-child {width: calc(20% + 5%);}
#row-box8 ul li:nth-child(3) {width: calc(20%);}
#row-box8 ul li:nth-child(4) {width: calc(20% - 2%);}
#row-box8 ul li:nth-child(5) {width: calc(20% - 3%);}

#row-box8 ul li dl dt {margin-bottom: 20px;}

#row-box8 ul li dl dt img {
	display: block;
	margin: auto;
}

#row-box8 ul li dl dd {
	font-size: 0.75rem;
	text-align: center;
	line-height: 1.2;
}

#row-box8 .ballon {
	position: absolute;
	top: 45px;
	right: 6vw;
	width: 280px;
	height: 210px;
	background: url(../images/ballon.png) no-repeat center;
	background-size: contain;
}

#row-box8 .ballon .data {
	position: absolute;
	top: 10px;
	right: 0;
	left: 0;
	margin: auto;
}

#row-box8 .ballon .data p:first-child {
	font-size: 1.875rem;
	line-height: 1.2;
}

#row-box8 .ballon .data p:first-child span {font-size: 5.062rem;}

#row-box8 .ballon .data p:last-child {
	font-size: 0.75rem;
	line-height: 1.45;
}



/* -------------------------------------------------
	message
-------------------------------------------------- */

.message {
	padding: 0 6vw;
	font-size: 1.125rem;
	color: #0090d4;
	text-align: center;
}



/* --------------------------------------------------
	works-climarks
-------------------------≈--------------------------- */

.works-climarks {
	position: relative;
	width: 100%;
	height: 100%;
	padding: 160px 4vw;
	background: url(../images/works-climarks.jpg) no-repeat center;
	background-size: cover;
	text-align: center;
	color: #fff;
	z-index: 1;
}
.works-climarks.info{
	background-image: url(../images/info-climarks.jpg);
	background-position: right 30% center;
}

.works-climarks::before {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: inherit;
	background: rgba(0, 0, 0, 0.6);
	content: "";
	z-index: -1;
}

.works-climarks.info::before {
	background: rgba(0, 11, 31, 0.6);
}

.works-climarks h2 {
	margin-bottom: 25px;
	font-size: 1.25rem;
	color: #fff;
}

.works-climarks p {margin-bottom: 30px;}

.works-climarks .btn {
	position: relative;
	display: inline-block;
	min-width: 300px;
	border: 1px solid rgba(255, 255, 255, .4);
	color: #fff;
	font-size: 0.9375rem;
	border-radius: 50px;
	overflow: hidden;
}
.works-climarks .btn:before {
	content: "";
	position: absolute;
	display: block;
	width: 100%;
	height: 0;
	bottom: 0;
	left: 0;
	background-color: #fff;
	transition: height .3s cubic-bezier(.8,0,.2,1);
}
html:not(.sp) .works-climarks .btn:hover:before {
	top: 0;
	bottom: auto;
	height: 100%;
}

.works-climarks .btn a {
	position: relative;
	display: block;
	padding: 15px 20px;
	color: #fff;
	overflow: hidden;
	transition: color 0s linear .15s;

}
html:not(.sp) .works-climarks .btn a:hover {color: #233036;}



/* ----------------------------------------------
 フェードイン
------------------------------------------------- */

.recruit-page .fadein {
	opacity: 0;
	-webkit-transform: translate3d(0, 35px, 0);
	transform: translate3d(0, 35px, 0);
}



/*---------------------------------------------
	for 1400px -
---------------------------------------------*/

@media screen and (max-width: 1400px) {

	.recruit-page .recruit-tit::before {
	width: 680px;
	width: 51vw;
}

	.recruit-page .about-climarks h3 {font-size: 1.125rem;}

	.recruit-page .about-climarks .members ul {margin-left: 3.2vw;}

	.recruit-page .about-climarks .members .num-box {margin-left: 1.5vw;}

	.recruit-page .about-climarks .members .num-box .ballon {right: -6vw;}

	#row-box2 .flex-inner.age .ballon {top: -0.5vw;}



	/* 出身地ランキング & 社員定着率　etc.
  --------------------------------- */

	#row-box3 .home-town-box::before {
	top: 8.5vw;
	width: 27vw;
	height: 26vw;
	}
	 .home-town-box .ballon-m {
	top: 29vw;
	left: 13vw;
	}

	#row-box3 .home-town {margin-left: 1.5vw;}

	#row-box3 .colleagues-number-box {
	margin-right: 10px;
	padding-right: 0;
	}

	#row-box3 .colleagues-number-box .data {
	width: 18vw;
	height: 18vw;
	padding-top: 53%;
	}

	#row-box3 .colleagues-number-box .data span {font-size: 5rem;}

	#row-box3 .colleagues-number-box .data::before {
	width: 17vw;
	height: 17vw;
	width: 18vw;
	height: 18vw;
	}

	#row-box3 .mac-vs-win-box {left: 27vw;}

	#row-box3 .be-married-box::before {
	top: -35px;
	left: -100px;
	width: 209px;
	height: 150px;
	}

	#row-box3 .be-married-box .data span {
	font-size: 5.5vw;
	font-size: 4.375rem;
	}

	#row-box3 .tree {width: 7.5vw;}

	#row-box4 ul li:nth-child(8) {right: 0.3vw;}

	#row-box6 .img-box {padding-top: 6vw;}

	#row-box6 .data span {font-size: 8vw;}

	#row-box6 .ballon-s {left: -135px;}

	#row-box6 .ballon-l {right: -150px;}

	#row-box8 .ballon {
	width: 260px;
	height: 195px;
	}

	#row-box8 .ballon .data {top: 25px;}

}



/* -----------------------------------------
	for -1360px
------------------------------------------- */

@media screen and (max-width: 1360px) {

	.recruit-tit p {
	padding: 0 8.7vw;
	}
	.recruit-tit p br {
	display: none;
	}

	/* for background-img */
	.recruit-tit::after {
	width: 94px;
	height: 102px;
	}

	.recruit-tit .text-box::before {
	bottom: -70px;
	right: 20px;
	}

	.recruit-tit .text-box::after {
	bottom: -58px;
	left: 18px;
	}

	.recruit-tit h2::before {
	top: -78px;
	right: 55px;
	width: 109px;
	height: 85px;
	}

	.recruit-tit h2::after {
	top: -55px;
	left: 42px;
	width: 175px;
	height: 84px;
	}

	.recruit-tit .inner::before {
	left: 127px;
	width: 56px;
	height: 141px;
	z-index: 9;
	}

	.recruit-tit .inner::after {
	right: 127px;
	width: 72px;
	height: 138px;
	z-index: 9;
	}



	/*	社員数
  ---------------------------------- */

	.members::before {right: 1.2vw;}



	/* 出身地
  ---------------------------------- */

	#row-box3 {
	min-height: 40vw;
	min-height: 39.5vw;
	}

	#row-box3 .home-town-box .ballon-m {
	top: 21vw;
	left: 24vw;
	}

	#row-box3 .mac-vs-win-box {
	top: 30vw;
	left: 14vw;
	}

	#row-box3 .mac-vs-win-box h3 {margin-bottom: 15px;}

	#row-box3 .mac-vs-win-box dl {
	display: flex;
	align-items: center;
	}

	#row-box3 .mac-vs-win-box dl dt {margin-right: 15px;}

	#row-box3 .be-married-box {
	right: 2vw;
	bottom: 2vw;
	}

	#row-box3 .tree {left: 28vw;}

	#row-box3 .tree img {width: 80%;}



	/*	社員旅行
  ---------------------------------- */

	#row-box5 .img-box .ballon-l {bottom: -3.8vw;}
	#row-box5 .img-box .ballon-l::before {
	top: 0;
	width: 12vw;
	height: 9.1vw;
	}



	/*	WEBサイト制作ジャンル
  ---------------------------------- */

	#row-box7 .flex-box .flex-inner {width: 50%;}

	#row-box7 .flex-box .flex-inner:last-child h3 {margin: 0 0 25px 0;}

	#row-box7 .flex-box .flex-inner ul.works-ganre::before {margin: auto;}

	#row-box7 .flex-box .flex-inner:last-child {width: 100%;}



	/* ひとつの案件に関わるメンバー
  ----------------------------------- */

	#row-box8 ul {
	padding-top: 195px;
	margin: auto;
	}
	#row-box8 .ballon {
	right: 0;
	left: 0;
	margin: auto;
	}



	/* メッセージ
  ------------------------------------ */

	.message {padding: 0 4vw;}

	.message br {display: none;}

}



/*---------------------------------------------
	for -1249px
---------------------------------------------- */

@media screen and (min-width: 1061px) and (max-width: 1249px) {

	.recruit-page .about-climarks #row-box1 {padding-bottom: 40px;}

	.recruit-page .about-climarks .members::before {right: 2.3vw;}

	.recruit-page .about-climarks .members ul {
	width: 365px;
	width: 34.5vw;
	margin-left: 1vw;
	}

	.recruit-page .about-climarks .members .num-box {
	margin-left: .8vw;
	margin-bottom: 20px;
	z-index: 1;
	}

	.recruit-page .about-climarks .members .num-box .ballon {
	top: -115px;
	right: -20px;
	width: 160px;
	height: 122px;
	z-index: 0;
	}

	.recruit-page .about-climarks .members .data span {font-size: 8.5vw;}

	#row-box2 .flex-box {display: block;}

	#row-box2 .flex-inner {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	}

	#row-box2 .flex-inner h3 {
	display: block;
	width: 100%;
	text-align: center;
	}

	#row-box2 .flex-inner .img {
	width: 55%;
	margin: 0;
	max-width: none;
	max-height: none;
	clear: both;
	}

	#row-box2 .flex-inner .img img {
	float: right;
	width: 100%;
	max-width: 251px;
	max-height: 214px;
	}

	#row-box2 .num-box {
	width: 45%;
	margin: 0;
	padding-left: 30px;
	}

	#row-box2 .num-box .data {
	display: table;
	margin-top: 75px;
	}

	#row-box2 .num-box .ballon {
	top: auto;
	left: -224px;
	top: 157px;
	-webkit-transform: translateX(50%);
	transform: translateX(50%);
	}

	#row-box2 .flex-inner.age {
	display: block;
	width: 60%;
	margin-left: 7.5vw;
	}

	#row-box2 .flex-inner.age::before {bottom: -25px;}

	#row-box2 .flex-inner.age dd {
	right: 0;
	bottom: 33px;
	}

	#row-box3 {
	height: 41vw;
	min-height: 520px;
	}

	#row-box3 .home-town-box::before {
	top: 9.8vw;
	top: 115px;
	width: 27vw;
	height: 26vw;
	min-width: 332px;
	min-height: 319px;
	}

	#row-box3 .home-town-box .ballon-m {
	top: 250px;
	left: 300px;
	}

	#row-box3 .mac-vs-win-box {
	top: 400px;
	left: 9.5vw;
	bottom: auto;
	}

	#row-box3 .be-married-box {
	right: 20px;
	bottom: 0;
	}

	#row-box4 ul {
	height: 28vw;
	height: 19vw;
	}
	#row-box4 ul li:nth-child(5) {left: -15px;}
	#row-box4 ul li:nth-child(6).lottery {
	left: 9vw;
	}
	#row-box4 ul li:nth-child(7) {left: 20vw;}
	#row-box4 ul li:nth-child(8) {
	top: 145px;
	right: -1vw;
	}

	#row-box5 .img-box .ballon-l {
	width: 13vw;
	height: 10vw;
	}

	#row-box5 .img-box .ballon-l::before {
	top: -10px;
	width: 13vw;
	height: 10vw;
	}

	#row-box6 {
	height: auto;
	padding: 0;
	}

	#row-box6 .row-box-inner {
	max-width: none;
	max-height: none;
	width: 100%;
	height: auto;
	padding-top: 80px;
	}

	#row-box6 .row-box-inner .img-box {
	width: 359.5px;
	height: 296px;
	padding-top: 7vw;
	padding-top: 100px;
	}
	#row-box6 .img-box::before {
	width: 359.5px;
	height: 296px;
	}

	#row-box6 .data span {font-size: 7.5vw;}

	#row-box6 .ballon-s {
	top: 13px;
	top: 4vw;
	left: -90px;
	left: 1vw;
	}

	#row-box6 .ballon-l {
	top: 0;
	right: -116px;
	right: 0.5vw;
	width: 166px;
	height: 122px;
	}
	#row-box6 .ballon-l::before {
	width: 166px;
	height: 122px;
	}

	#row-box7 .flex-box .flex-inner {width: 50%;}

	#row-box7 .flex-box .flex-inner:last-child h3 {margin: 0 0 25px 0;}

	#row-box7 .flex-box .flex-inner ul.works-ganre {margin: auto;}
	#row-box7 .flex-box .flex-inner ul.works-ganre::before {margin: auto;}

	#row-box7 .flex-box .flex-inner:last-child {width: 100%;}

	#row-box8 ul {margin: auto;}

	#row-box8 .ballon {
	right: 0;
	left: 0;
	margin: auto;
	}

}

@media screen and (min-width: 980px) and (max-width: 1060px), print {

	/* for background-img */
	.recruit-tit .text-box::before {
	right: 1.5;
	bottom: -70px;
	width: 100px;
	height: 75px;
	}

	.recruit-tit .text-box::after {
	bottom: -50px;
	left: 1vw;
	width: 100px;
	height: 75px;
	}

	.recruit-tit h2::before {
	top: -60px;
	right: 30px;
	width: 109px;
	height: 85px;
	width: 100px;
	height: 75px;
	}

	.recruit-tit h2::after {
	top: -55px;
	left: 25px;
	width: 175px;
	height: 84px;
	width: 165PX;
	height: 74PX;
	}

	.about-climarks .members dd {font-size: 0.687rem;}

	.numbers .zero {
	top: 6.5vw;
	left: 9vw;
	}

	.numbers .zero img {width: 3vw;}

	.numbers .one {
	top: 16.5vw;
	left: 13.5vw;
	}

	.numbers .one img {width: 3vw;}

	.numbers .two {
	top: 15.5vw;
	left: 1.5vw;
	}

	.numbers .two img {width: 13vw;}

	.numbers .three {
	top: 29.1vw;
	top: 22vw;
	right: 3vw;
	}

	.numbers .three img {width: 4vw;}

	.numbers .five {top: -1.5vw;}

	.numbers .five img {width: 14vw;}

	.numbers .six {
	top: -5.2vw;
	left: 1.5vw;
	}

	.numbers .six img {width: 10vw;}

	.numbers .nine {
	top: 18vw;
	right: 10vw;
	}

	.numbers .nine img {width: 6vw;}

	.recruit-page .about-climarks h2::after {
	top: -20px;
	right: -25px;
	width: 57px;
	height: 41px;
	}

	.recruit-page .about-climarks h2 span::after {
	width: 135px;
	height: 63px;
	}

	.recruit-page .about-climarks .members {padding-bottom: 40px;}

	.recruit-page .about-climarks .members::before {
	top: 1vw;
	right: -5vw;
	}

	.recruit-page .about-climarks .members ul {
	width: 33vw;
	margin-left: 1vw;
	}

	.recruit-page .about-climarks .members ul li dl dt {height: 165px;}

	.recruit-page .about-climarks .members ul li dd {font-size: 0.687rem;}

	.recruit-page .about-climarks .members ul li.member-pro img {
	width: 61px;
	height: 122px;
	}

	.recruit-page .about-climarks .members ul li.member-dire img {
	width: 72px;
	height: 155px;
	}

	.recruit-page .about-climarks .members ul li.member-de img {
	width: 62px;
	height: 120px;
	}

	.recruit-page .about-climarks .members ul li.member-en img {
	width: 25px;
	height: 70px;
	}

	.recruit-page .about-climarks .members .num-box {margin-bottom: 20px;}

	.recruit-page .about-climarks .members .num-box .ballon {
	top: -105px;
	right: -15px;
	width: 150px;
	height: 112px;
	padding-top: 25px;
	}

	.recruit-page .about-climarks .members .data span {font-size: 8.5vw;}



	/*	男女比 & 年齢
  --------------------------------- */

	#row-box2 .flex-box {display: block;}

	#row-box2 .flex-inner {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	}

	#row-box2 .flex-inner h3 {
	width: 100%;
	text-align: center;
	}

	#row-box2 .flex-inner .img {
	width: 60%;
	margin: 0;
	clear: both;
	}

	#row-box2 .flex-inner .img img {
	float: right;
	width: 100%;
	}

	#row-box2 .num-box {
	width: 40%;
	margin: 0;
	padding-left: 30px;
	}

	#row-box2 .num-box .data {
	display: table;
	padding-top: 6vw;
	}

	#row-box2 .num-box .ballon {
	top: auto;
	left: -225px;
	}

	#row-box2 .flex-inner.age {
	display: block;
	width: 70%;
	margin-left: 3.5vw;
	}

	#row-box2 .flex-inner.age::before {bottom: -25px;}

	#row-box2 .flex-inner.age dd {
	right: 0;
	bottom: 33px;
	}



	/*	 出身地 & 定着率 etc.
  --------------------------------- */

	#row-box3 {
	min-height: 560px;
	margin-bottom: 65px;
	}

	#row-box3 .home-town-box::before {
	top: 125px;
	left: -2vw;
	width: 32vw;
	height: 31vw;
	}

	#row-box3 .home-town-box .home-town {margin-left: .5vw;}

	#row-box3 .home-town-box .ballon-m {
	top: 260px;
	left: 28.5vw;
	}

	#row-box3 .colleagues-number-box {
	top: 0;
	right: 1vw;
	width: 17vw;
	padding-right: 0;
	}

	#row-box3 .colleagues-number-box .data {padding-top: 50%;}

	#row-box3 .colleagues-number-box .data span {
	font-size: 4.5rem;
	text-align: center;
	}

	#row-box3 .colleagues-number-box .data::before {
	width: 17vw;
	height: 17vw;
	}

	#row-box3 .mac-vs-win-box {
	top: 425px;
	left: 5vw;
	}
	#row-box3 .be-married-box {bottom: 3vw;}

	#row-box3 .tree {left: 47%;}

	#row-box4 {padding: 0 15px;}

	#row-box4 ul {
	height: 32vw;
	height: 250px;
	}

	#row-box4 ul li:nth-child(4) {top: 70px;}
	#row-box4 ul li:nth-child(5) {left: -5px;}
	#row-box4 ul li:nth-child(6).lottery {
	top: 135px;
	left: 10%;
	}
	#row-box4 ul li:nth-child(7) {
	top: 95px;
	left: 37%;
	}
	#row-box4 ul li:nth-child(8) {top: 130px;}

	#row-box5 {
	margin-bottom: 180px;
	margin-bottom: 100px;
	}

	#row-box5 .img-box .ballon-l {
	bottom: -7vw;
	width: 140px;
	height: 106px;
	}

	#row-box5 .img-box .ballon-l::before {
	top: -10px;
	width: 140px;
	height: 106px;
	}

	#row-box6 {
	height: auto;
	padding: 0 15px;
	}

	#row-box6 .row-box-inner {
	max-width: none;
	max-height: none;
	width: 100%;
	height: auto;
	padding-top: 80px;
	}

	#row-box6 .img-box {
	width: 31vw;
	height: 25.5vw;
	width: 35vw;
	height: 28vw;
	padding-top: 75px;
	padding-top: 8.5vw;
	}

	#row-box6 .img-box::before {
	width: 31vw;
	height: 25.5vw;
	width: 35vw;
	height: 28vw;
	}

	#row-box6 .data span {font-size: 10vw;}

	#row-box6 .ballon-s {
	top: 0;
	left: 1vw;
	}

	#row-box6 .ballon-l {
	top: -30px;
	right: -1vw;
	width: 166px;
	height: 122px;
	}

	#row-box6 .ballon-l::before {
	width: 166px;
	height: 122px;
	}

	#row-box7 {
	margin-bottom: 35px;
	padding: 0 15px;
	}

	#row-box7 .flex-box .flex-inner {
	width: calc(50% + 5%);
	margin-bottom: 30px;
	}

	#row-box7 .flex-box .flex-inner:nth-child(2) {width: calc(50% - 5%);}

	#row-box7 .flex-box .flex-inner:last-child h3 {margin-bottom: 25px;}

	#row-box8 ul {order: 1;}

	#row-box8 .ballon {
	margin: auto;
	order: 0;
	}

}



/*---------------------------------------------
	for -979px
  ---------------------------------------------*/

@media screen and (min-width: 720px) and (max-width: 979px) {

	.recruit-tit .inner {padding-bottom: 150px;}

	.recruit-tit .inner::before {left: 32vw;}

	.recruit-tit .inner::after {right: 32vw;}

	.recruit-tit .text-box::before {bottom: -85px;}

	.recruit-tit .text-box::after {
	bottom: -75px;
	left: 15px;
	}

	.recruit-page .about-climarks .members::before {right: 14vw;}

	.recruit-page .about-climarks .members ul {
	width: 50vw;
	margin-left: 10vw;
	}

	.recruit-page .about-climarks .members .num-box {margin-left: 5vw;}

	.recruit-page .about-climarks .members .num-box .ballon {right: -12vw;}

	#row-box2 .flex-inner:not(.age) {max-width: 330px;}

	#row-box2 .flex-inner:not(.age) .img img {width: 32vw;}

	#row-box2 .num-box .ballon {left: 7vw;}

	#row-box2 .flex-inner.age::before {
	top: 35px;
	right: -60px;
	}

	#row-box2 .flex-inner.age dd {
	top: 94px;
	right: 5px;
	}

	#row-box3 {min-height: 560px;}

	#row-box3 .home-town-box::before {
	top: 100px;
	left: -25px;
	width: 380px;
	height: 367px;
	}

	#row-box3 .home-town-box .ballon-m {
	top: 395px;
	left: 175px;
	}

	#row-box3 .colleagues-number-box {
	margin-right: 4vw;
	}

	#row-box3 .colleagues-number-box .data {
	width: 250px;
	height: 251px;
	}

	#row-box3 .colleagues-number-box .data span {font-size: 5.437rem;}

	#row-box3 .colleagues-number-box .data::before {
	width: 26vw;
	height: 26vw;
	width: 250px;
	height: 251px;
	}

	#row-box3 .mac-vs-win-box {
	top: 290px;
	left: 49vw;
	}

	#row-box3 .mac-vs-win-box dl {display: block;}

	#row-box3 .be-married-box {
	left: 75vw;
	bottom: -5vw;
	}

	#row-box3 .be-married-box::before {
	left: -110px;
	width: 229px;
	height: 170px;
	}

	#row-box3 .tree {
	left: 50vw;
	width: 12.5vw;
	}

	#row-box3 .tree img {width: 100%;}

	#row-box4 ul {
	max-width: 760px;
	width: 100%;
	margin: 0 auto;
	}

	#row-box5 .img-box .ballon-l {
	right: 6vw;
	width: 176px;
	height: 132px;
	}

	#row-box5 .img-box .ballon-l::before {
	top: -10px;
	width: 176px;
	height: 132px;
	}

	#row-box6 .row-box-inner {
	width: 359.5px;
	height: 296px;
	}

	#row-box6 .img-box {
	width: 100%;
	height: inherit;
	padding-top: 90px;
	}

	#row-box6 .img-box::before {
	width: 359.5px;
	height: 296px;
	}

	#row-box6 .img-box .data span {font-size: 7.187rem;}

	#row-box7 .flex-box .flex-inner,
	#row-box7 .flex-box .flex-inner:last-child {width: 33.333%;}

	#row-box7 .flex-box .flex-inner:first-child {width: calc(33.3333% + 5%);}

	#row-box7 .flex-box .flex-inner:last-child {width: calc(33.3333% - 5%);}

	#row-box8 .box-wrapper {
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	max-width: 800px;
	margin: 0 auto;
	}

	#row-box8 ul {
	width: 430px;
	margin: 0;
	padding-top: 0;
	}

	#row-box8 .ballon {
	position: relative;
	top: -10px;
	width: 280px;
	height: 210px;
	}
}



/*---------------------------------------------
	for -719px
  ---------------------------------------------*/

@media screen and (max-width: 719px) {

	.tabNav li .sp {display: block;}

	/* for background-img */
	.recruit-tit::after {
	width: 84px;
	height: 90px;
	}

	.recruit-tit .text-box::before {
	right: 5px;
	bottom: -100px;
	}

	.recruit-tit .text-box::after {
	left: 5px;
	bottom: -105px;
	}

	.recruit-tit h2 {
	font-size: 1.5rem;
	}

	.recruit-tit h2::before {
	right: 2vw;
	width: 100px;
	height: 75px;
	}

	.recruit-tit h2::after {
	left: 2vw;
	width: 155px;
	height: 64px;
	}

	.recruit-tit .inner {padding-bottom: 170px;}

	.recruit-tit .inner::before {
	left: 24vw;
	height: 123px;
	}

	.recruit-tit .inner::after {
	right: 22vw;
	height: 123px;
	}



	/* -----------------------------------------------
	クライマークスってどんな会社
  ------------------------------------------------- */

	.recruit-page .about-climarks {padding-bottom: 70px;}

	.recruit-page .about-climarks .inner {padding-top: 60px;}

	.recruit-page .about-climarks h2 {
	font-size: 1.5rem;
	font-size: 1.375rem;
	}

	.recruit-page .about-climarks h2::after {
	top: -20px;
	right: -20px;
	width: 57px;
	height: 41px;
	}

	.recruit-page .about-climarks h2 span::after {
	width: 130px;
	height: 43px;
	}

	.recruit-page .about-climarks h3 {
	color: #0090d4;
	font-size: 1.125rem;
	font-size: 1rem;
	letter-spacing: 0;
	}

	.numbers .zero {
	top: 8.4vw;
	top: 9.5vw;
	left: 15vw;
	}

	.numbers .zero img {width: 6vw;}

	.numbers .one {
	top: 24.5vw;
	top: 26.5vw;
	left: 29.5vw;
	}

	.numbers .one img {width: 6.5vw;}

	.numbers .two {
	top: 22.3vw;
	top: 26.4vw;
	left: 2.7vw;
	}

	.numbers .two img {width: 22vw;}

	.numbers .three {
	top: 29.1vw;
	top: 34vw;
	right: 6.3vw;
	}

	.numbers .three img {width: 8vw;}

	.numbers .five {top: -4vw;}

	.numbers .five img {width: 28vw;}

	.numbers .six {
	top: -10.8vw;
	left: 2.5vw;
	}

	.numbers .six img {width: 19vw;}

	.numbers .nine {
	top: 25vw;
	top: 29vw;
	right: 26vw;
	}

	.numbers .nine img {width: 11vw;}

	#row-box1,
	#row-box2,
	#row-box3,
	#row-box4,
	#row-box5,
	#row-box6,
	#row-box7,
	#row-box8 {padding: 0 4vw;}


	/* ----------------------------------------
	社員数
  ------------------------------------------ */

	.recruit-page {overflow: hidden;}

	.recruit-page #row-box1 {padding-bottom: 40px;}

	.recruit-page .about-climarks .members::before {
	top: 21vw;
	top: 180px;
	right: 0;
	}

	.recruit-page .about-climarks .members h3 {margin-bottom: 80px;}

	.recruit-page .about-climarks .members ul {
	width: 100%;
	max-width: 500px;
	margin: 35px auto 0;
	order: 1;
	}

	.recruit-page .about-climarks .members ul li.member-pro {width: 25%;}

	.recruit-page .about-climarks .members ul li.member-pro .num {top: 10px;}

	.recruit-page .about-climarks .members ul li.member-pro img {
	width: 61px;
	height: 122px;
	}

	.recruit-page .about-climarks .members ul li.member-dire .num {top: -25px;}

	.recruit-page .about-climarks .members ul li.member-dire img {
	width: 72px;
	height: 155px;
	}

	.recruit-page .about-climarks .members ul li.member-de {width: calc(25% - 5%);}

	.recruit-page .about-climarks .members ul li.member-de .num {top: 12px;}

	.recruit-page .about-climarks .members ul li.member-de img {
	width: 62px;
	height: 121px;
	}

	.recruit-page .about-climarks .members ul li.member-en {width: 25%;}

	.recruit-page .about-climarks .members ul li.member-en .num {top: 50px;}

	.recruit-page .about-climarks .members ul li dl dt {height: 168px;}

	.recruit-page .about-climarks .members .num-box {
	display: inline-block;
	margin: 0 auto;
	padding-left: 3vw;
	order: 0;
	}

	.recruit-page .about-climarks .members .num-box .ballon {
	top: -85px;
	right: -105px;
	width: 156px;
	height: 112px;
	padding-top: 23px;
	}



	/* ----------------------------------------
	男女比
  ----------------------------------------- */

	#row-box2 {overflow: hidden;}

	#row-box2 .flex-box {
	display: block;
	}

	#row-box2 .flex-inner {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	margin: 0 auto 50px;
	}

	#row-box2 .flex-inner h3 {
	width: 100%;
	text-align: center;
	}

	#row-box2 .flex-inner .img {
	width: 60%;
	margin: 0;
	clear: both;
	}

	#row-box2 .flex-inner .img img {
	float: right;
	max-width: 251px;
	max-height: 214px;
	width: 100%;
	}

	#row-box2 .num-box {
	width: 40%;
	margin: 0;
	padding-left: 30px;
	}

	#row-box2 .num-box .data {
	display: table;
	padding-top: 85px;
	}

	#row-box2 .num-box .ballon {
	top: 157px;
	left: -224px;
	}

	#row-box2 .flex-inner.age {
	display: block;
	width: 75%;
	margin-left: 3.5vw;
	}
	#row-box2 .flex-inner.age::before {
	right: -75px;
	bottom: -25px;
	}

	#row-box2 .flex-inner.age dd {
	right: -15px;
	bottom: 33px;
	}

	#row-box3 {min-height: 580px;}

	#row-box3 .home-town-box::before {
	top: 28.5vw;
	top: 125px;
	left: -15px;
	max-width: 330px;
	max-height: 320px;
	width: 64vw;
	height: 61vw;
	}

	#row-box3 .home-town-box .ballon-m {
	top: 320px;
	left: 285px;
	}

	#row-box3 .colleagues-number-box {width: 40%;}

	#row-box3 .colleagues-number-box .data {
	max-width: 240px;
	max-height: 240px;
	width: 40vw;
	height: 40vw;
	margin: auto;
	padding-top: 20vw;
	}

	#row-box3 .colleagues-number-box .data::before {
	max-width: 240px;
	max-height: 240px;
	width: 40vw;
	height: 40vw;
	}

	#row-box3 .mac-vs-win-box {
	position: absolute;
	top: 390px;
	left: 23vw;
	width: auto;
	text-align: center;
	}

	#row-box3 .mac-vs-win-box dl {display: block;}

	#row-box3 .mac-vs-win-box dl dt {margin-right: 0;}

	#row-box3 .be-married-box {
	right: 6vw;
	bottom: 0;
	}
	#row-box3 .be-married-box::before {top: -30px;}

	#row-box3 .tree {
	top: -70px;
	left: 45vw;
	width: 16vw;
	}

	#row-box3 .tree img {width: 100%;}

	#row-box4 ul {
	max-width: 760px;
	width: 100%;
	height: 235px;
	margin: 0 auto;
	}

	#row-box4 ul li:nth-child(3).painter::before {
	right: -30px;
	width: 60px;
	height: 86px;
	}

	#row-box4 ul li:nth-child(4) {top: 50px;}
	#row-box4 ul li:nth-child(5) {left: -10px;}
	#row-box4 ul li:nth-child(6).lottery {
	top: 100px;
	left: 22vw;
	}

	#row-box4 ul li:nth-child(7) {
	top: 115px;
	left: 45vw;
	}

	#row-box4 ul li:nth-child(8) {
	top: 130px;
	right: -1vw;
	}

	#row-box5 {margin-bottom: 80px;}

	#row-box5 .img-box ul {flex-wrap: wrap;}

	#row-box5 .img-box ul li {width: 33.3333%;}

	#row-box5 .img-box .ballon-l {
	right: -4vw;
	right: 11.5vw;
	bottom: -5vw;
	width: 166px;
	height: 122px;
	}

	#row-box5 .img-box .ballon-l::before {
	top: -10px;
	width: 166px;
	height: 122px;
	}

	#row-box6 {
	height: auto;
	margin-bottom: 70px;
	}

	#row-box6 .row-box-inner {
	max-width: 380px;
	max-height: 310px;
	width: 55vw;
	height: 46vw;
	}

	#row-box6 .data {
	font-size: 3.5vw;
	}

	#row-box6 .data span {
	font-size: 16.5vw;
	}

	#row-box6 .img-box {
	width: 55vw;
	height: 46vw;
	padding-top: 110px;
	padding-top: 14.5vw;
	}
	#row-box6 .img-box::before {
	max-width: 380px;
	max-height: 310px;
	width: 55vw;
	height: 46vw;
	}

	#row-box6 .ballon-s {
	top: -5px;
	left: -16vw;
	}

	#row-box6 .ballon-l {
	top: -22px;
	right: -22vw;
	}

	#row-box7 {margin-bottom: 20px;}

	#row-box7 .flex-box {flex-wrap: wrap;}

	#row-box7 .flex-box .flex-inner {
	width: 100%;
	margin-bottom: 40px;
	}

	#row-box7 .flex-box .flex-inner h3 {margin-bottom: 20px;}

	#row-box8 {margin-bottom: 60px;}

	#row-box8 ul {
	max-width: 520px;
	width: 100%;
	order: 1;
	}

	#row-box8 ul li dl dt img {
	width: auto;
	height: 110px;
	}

	#row-box8 ul li dl dd {font-size: 0.625rem;}

	#row-box8 .ballon {order: 0;}

	#row-box8 .ballon .data p.first-child {font-size: 1.562rem;}

	.works-climarks {padding: 80px 4vw;}

	.works-climarks .btn a {min-width: 100%;}

}



/* ---------------------------------------
	for -620px
------------------------------------------ */

@media screen and (max-width: 620px) {

	#row-box4 ul {height: 265px;}

	#row-box4 ul li:nth-child(4) {top: 85px;}
	#row-box4 ul li:nth-child(6).lottery {
	top: 128px;
	left: 10vw;
	}
	#row-box4 ul li:nth-child(7) {
	top: 118px;
	left: 37vw;
	}
	#row-box4 ul li:nth-child(8) {
	top: 155px;
	right: -3vw;
	}

	#row-box6 {padding-top: 70px;}

	#row-box6 .row-box-inner {
	width: 65vw;
	height: 54vw;
	}

	#row-box6 .row-box-inner .img-box {
	width: 65vw;
	height: 54vw;
	padding-top: 95px;
	}

	#row-box6 .row-box-inner .img-box::before {
	width: 65vw;
	height: 54vw;
	}

	#row-box6 .ballon-s {
	top: -10vw;
	left: -11vw;
	}

	#row-box6 .ballon-l {
	top: -21vw;
	right: -17vw;
	}

}



/* ---------------------------------------
	for -480px
------------------------------------------ */

@media screen and (max-width: 480px) {

	#row-box2 .num-box {padding-left: 5vw;}

	#row-box2 .num-box .data {padding-top: 70px;}

	#row-box2 .num-box .ballon {
	top: 34vw;
	left: -54vw;
	}

	#row-box3 {
	height: 210vw;
	margin-bottom: 70px;
	}

	#row-box3 .home-town-box {
	height: 100vw;
	padding-top: 0;
	}

	#row-box3 .home-town-box::before {
	top: 65px;
	left: 10px;
	max-width: none;
	max-height: none;
	width: 83vw;
	height: 80vw;
	}

	#row-box3 .home-town-box .ballon-m {
	top: 80vw;
	left: 50vw;
	}

	#row-box3 .colleagues-number-box {
	width: 50vw;
	position: relative;
	}

	#row-box3 .colleagues-number-box .data {
	width: 50vw;
	height: 50vw;
	padding-top: 25vw;
	}

	#row-box3 .colleagues-number-box .data span {font-size: 4.5rem;}

	#row-box3 .colleagues-number-box .data::before {
	width: 50vw;
	height: 50vw;
	}

	#row-box3 .colleagues-number-box .data::after {
	right: -90px;
	bottom: 80px;
	}

	#row-box3 .mac-vs-win-box {
	top: 145vw;
	left: 55vw;
	}

	#row-box3 .be-married-box {
	right: 44vw;
	bottom: 0;
	}

	#row-box3 .be-married-box::before {
	right: -10px;
	left: auto;
	max-width: 209px;
	max-height: 150px;
	width: 59vw;
	height: 42.5vw;
	}

	#row-box3 .tree {
	left: 50vw;
	width: 20vw;
	}

	#row-box4 ul {height: 380px;}

	#row-box4 ul li:first-child {left: 15vw;}

	#row-box4 ul li:nth-child(2) {left: 46vw;}

	#row-box4 ul li:nth-child(3).painter {
	top: 65px;
	left: 64vw;
	}

	#row-box4 ul li:nth-child(3).painter::before {
	top: -28px;
	right: -15px;
	width: 50px;
	height: 72px;
	}

	#row-box4 ul li:nth-child(4) {
	top: 210px;
	right: -3vw;
	}

	#row-box4 ul li:nth-child(5) {top: 80px;}

	#row-box4 ul li:nth-child(6).lottery {
	top: 200px;
	left: 3vw;
	}

	#row-box4 ul li:nth-child(6).lottery::before {
	top: -3px;
	width: 60px;
	height: 43px;
	}

	#row-box4 ul li:nth-child(7) {
	top: 130px;
	left: 40vw;
	}

	#row-box4 ul li:nth-child(8) {
	top: 270px;
	right: 9vw;
	}

	#row-box5 {margin-bottom: 100px;}

	#row-box5 .img-box .ballon-l {
	right: 0;
	bottom: -10vw;
	}

	#row-box6 .row-box-inner {
	width: 80vw;
	height: 65vw;
	}

	#row-box6 .row-box-inner .img-box {
	width: 80vw;
	height: 65vw;
	padding-top: 22vw;
	}

	#row-box6 .row-box-inner .img-box::before {
	width: 80vw;
	height: 65vw;
	}

	#row-box6 .data {font-size: 4.5vw;}

	#row-box6 .data span {font-size: 22vw;}

	#row-box6 .ballon-s {
	top: -26.5vw;
	left: -9vw;
	}

	#row-box6 .ballon-l {
	top: -32vw;
	right: -9vw;
	}
}
/* ---------------------------------------
	for -320px;
--------------------------------------- */
@media screen and (max-width: 320px) {
	.recruit-tit::after {
	width: 72px;
	height: 78px;
	}

	.recruit-tit .inner::before {
	left: 22vw;
	height: 100px;
	}

	.recruit-tit .inner::after {
	right: 20vw;
	height: 100px;
	}

	.recruit-tit h2,
	.recruit-page .about-climarks h2 {font-size: 1.25rem;}

	.ballon-l {font-size: 0.875rem;}

	/* ----------------------------------------
	社員数
  ------------------------------------------ */
	.recruit-page .about-climarks .inner {padding-top: 60px;}

	.recruit-page .about-climarks h2::after {
	right: -10px;
	width: 52px;
	height: 36px;
	}

	.recruit-page .about-climarks h2 span::after {
	width: 134px;
	height: 48px;
	}

	.recruit-page .about-climarks .members li dl dt {height: 165px;}

	.recruit-page .about-climarks .members li dl dt span {font-size: 1.5rem;}

	.recruit-page .about-climarks .members li dl dd {font-size: 0.625rem;}

	.recruit-page .about-climarks .members .num-box .data {font-size: 2rem;}

	.recruit-page .about-climarks .members .num-box .data span {font-size: 6rem;}

	.recruit-page .about-climarks .members .num-box .ballon {right: -90px;}

	#row-box2 .flex-inner:not(.age) {margin-bottom: 75px;}

	#row-box2 .flex-inner:not(.age) .img {
	min-width: 180px;
	min-height: 154px;
	}

	#row-box2 .flex-inner:not(.age) .num-box {width: calc(100% - 180px);}

	#row-box2 .flex-inner:not(.age) .num-box .ballon {
	top: 105px;
	left: -185px;
	}

	#row-box2 .flex-inner.age {padding-left: 0;}

	#row-box2 .flex-inner.age::before {
	right: -65px;
	width: 87px;
	height: 124px;
	}

	#row-box2 .flex-inner.age dd {
	right: -16px;
	font-size: 0.625rem;
	}

	#row-box2 .flex-inner.age .ballon {right: -60px;}

	#row-box3 {
	min-height: 250vw;
	margin-bottom: 30px;
	}

	#row-box3 h3 {margin-bottom: 20px;}

	#row-box3 .home-town-box {padding-top: 0;}

	#row-box3 .home-town-box::before {
	top: 76px;
	width: 87vw;
	height: 84vw;
	}

	#row-box3 .home-town-box .home-town {
	width: 150px;
	height: auto;
	font-size: .875rem;
	}

	#row-box3 .home-town-box .ballon-m {
	top: 90vw;
	left: 45vw;
	}

	#row-box3 .colleagues-number-box {top: 10vw;}

	#row-box3 .colleagues-number-box .data {padding-top: 24vw;}

	#row-box3 .colleagues-number-box .data span {font-size: 3.8rem;}

	#row-box3 .colleagues-number-box .data::after {bottom: 40px;}

	#row-box3 .mac-vs-win-box {
	top: 165vw;
	left: 52vw;
	}

	#row-box3 .be-married-box h3 {margin-bottom: 40px;}

	#row-box3 .be-married-box::before {
	top: 20px;
	right: auto;
	left: -70px;
	width: 184px;
	height: 125px;
	width: 150px;
	}
	#row-box3 .tree {width: 20vw;}

	#row-box4 h3 span {display: block;}

	#row-box4::before {
	width: 110px;
	height: 173px;
	}

	#row-box4 ul {height: 380px;}

	#row-box4 ul li {font-size: 0.812rem;}

	#row-box4 ul li:first-child {
	top: 20px;
	left: 3vw;
	}

	#row-box4 ul li:nth-child(2) {
	top: 0;
	left: 33vw;
	}

	#row-box4 ul li:nth-child(3).painter {
	top: 61px;
	left: 62vw;
	}

	#row-box4 ul li:nth-child(3).painter::before {
	top: -25px;
	right: -10px;
	width: 51px;
	height: 85px;
	}

	#row-box4 ul li:nth-child(4) {
	top: 115px;
	right: 12vw;
	}

	#row-box4 ul li:nth-child(5) {
	top: 90px;
	left: -3vw;
	}

	#row-box4 ul li:nth-child(6).lottery {
	top: 211px;
	left: 1vw;
	}

	#row-box4 ul li:nth-child(6).lottery::before {
	top: -10px;
	width: 69px;
	height: 46px;
	}

	#row-box4 ul li:nth-child(7) {
	top: 181px;
	left: 49.5vw;
	}

	#row-box4 ul li:nth-child(8) {
	top: 280px;
	right: 14vw;
	}

	#row-box5::before {
	top: -65px;
	left: 15px;
	width: 100px;
	height: 107px;
	}

	#row-box5 .img-box .ballon-l {
	width: 131px;
	height: 99px;
	}

	#row-box5 .img-box .ballon-l::before {
	width: 131px;
	height: 99px;
	background: url(../images/ballon-s.png) no-repeat center;
	background-size: contain;
	transform: scale(-1, -1);
	}

	#row-box6 {
	margin-bottom: 60px;
	padding-top: 80px;
	}

	#row-box6 .row-box-inner .img-box {padding-top: 21vw;}

	#row-box6 .data span {font-size: 5rem;}

	#row-box6 .ballon-s {top: -32vw;}

	#row-box6 .ballon-l {top: -43vw;}

	#row-box7 .average-per-capita .data {font-size: 1.375rem;}

	#row-box7 .average-per-capita .data span {font-size: 3rem;}

	#row-box8 ul {padding-top: 175px;}

	#row-box8 ul li dl dt img {height: 90px;}

	#row-box8 .ballon {
	width: 230px;
	height: 175px;
	}

	#row-box8 .ballon .data {top: 20px;}

	#row-box8 .ballon .data p:first-child {font-size: 1.562rem;}

	#row-box8 .ballon .data p:first-child span {font-size: 3.75rem;}

	.message p {font-size: 1rem;}
}

@media print {
	.recruit-page .fadein {opacity: 1;}

	/* 社員数
	----------------------------- */
	.recruit-page .about-climarks .members ul {
	width: 100%;
	margin: 0 auto;
	order: 1;
	}

	.recruit-page .about-climarks .members .num-box {
	display: inline-block;
	margin: 0 auto 20px;
	order: 0;
	}

	.recruit-page .about-climarks .members .num-box .ballon {
	top: -30px;
	right: -120px;
	}

	/*	年齢
	----------------------------- */
	#row-box2 .flex-inner.age::before {display: none;}

	#row-box2 .bar-graph .twenties .bar {
	display: block;
	width: 25%;
	height: 20px;
	background: #0090d4;
	animation: none;
	}

	#row-box2 .bar-graph .thirties .bar {
	width: 57%;
	height: 20px;
	background: #0076ad;
	}

	#row-box2 .bar-graph .forties .bar {
	width: 50%;
	height: 20px;
	background: #006696;
	}

	/* 出身地 定借率..ect.
  ---------------------------- */
	#row-box3 {min-height: 600px;}

	#row-box3 .home-town-box::before {
	display: none;
	top: 120px;
	width: 365px;
	height: 345px;
	z-index: -2;
	}

	#row-box3 .home-town-box .ballon-m {left: 23vw;}

	#row-box3 .max-vs-win-box {
	top: 300px;
	left: 12vw;
	}

	#row-box3 .be-married-box::before {display: none;}

	#row-box3 .be-married-box .data span {font-size: 3.5rem;}

	#row-box3 .tree img {width: 60px;}

	/* 前職
	----------------------------- */
	#row-box4 ul {
	height: auto;
	}
	#row-box4 ul li:first-child,
	#row-box4 ul li:nth-child(2),
	#row-box4 ul li:nth-child(3),
	#row-box4 ul li:nth-child(4),
	#row-box4 ul li:nth-child(5),
	#row-box4 ul li:nth-child(6),
	#row-box4 ul li:nth-child(7),
	#row-box4 ul li:nth-child(8) {
	display: inline-block;
	position: relative;
	top: auto;
	right: auto;
	bottom: auto;
	left: auto;
	background: none;
	}

	/* 旅行先
  ------------------------------ */
	#row-box5::before {display: none;}

	#row-box5 .img-box .ballon-l {
	top: 30px;
	bottom: auto;
	}

	/* 連続増収年数
	----------------------------- */
	#row-box6 .img-box {padding-top: 6vw;}

	#row-box6 .data span {font-size: 6rem;}

	#row-box6 .ballon-s {
	top: 40px;
	z-index: 3;
	}

	#row-box6 .ballon-s::before {display: none;}

	#row-box6 .ballon-l {
	top: 30px;
	z-index: 3;
	}

	#row-box6 .ballon-l::before {display: none;}

	/* 制作ジャンル　取引率　etc.
	----------------------------- */
	#row-box7 .flex-inner .works-genre::before {
	display: none;
	}
	#row-box7 .flex-inner .direct-rate {
	background: none;
	}

	/* 関わるメンバー
	----------------------------- */
	#row-box8 ul {
	margin: 0 auto;
	padding-top: 195px;
	}
}


/*---------------------------------------------
	portfolio-詳細
  ---------------------------------------------*/

.portfoliomainvisual{
	background: #fff;
	text-align: center;
	color: #233036;
}

.portfoliomainvisual h1{font-size: 200%;}

.portfoliomainvisual img{
	display: block;
	margin: 0 auto;
}

.portfoliomainvisual span{
	color: #b2b2b2;
	margin: 0 0 30px 0;
	display: block;
}

.detailread{
	font-size: 180%!important;
	color: #233036;
	text-align: center;
	margin: 0 auto 20px auto!important;
}

.detail{
	background: #f1f5f6;
	padding: 40px 30px!important;
	margin: 0 0 40px 0!important;
}

.detail span{
	font-size: 150%;
	display: block;
	margin:0 0 20px 0;
}

.detailimage{
	display: block;
	border:solid 1px rgba(35,48,54,.1);
	margin: 0 auto 40px ;
}

.detailblank{position: relative;}

.detailblank a::after{
	position: absolute;
	content: "";
	top: 50%;
	right: -15px;
	width: 10px;
	height: 10px;
	margin-top: -3px;
	background: url("https://www.climarks.com/portfolio/web/tamagawaeizai/blank.svg") top left no-repeat;
	background-size: 10px 10px;
}

.detailbox{overflow: hidden;}

.detailbox .left{
	width: 47%;
	float: left;
	margin: 0;
}

.detailbox .right{
	width: 47%;
	float: right;
	margin: 0;
}

.detailbox .left img, .detailbox .right img{width: 100%;}

.detailmb0{margin: 0;}

@media screen and (max-width: 979px) {
	.detailread br{display: none;}
}


/* 社員を知る */
/*
.staffList{
	padding-top: 0;
	background-color: #FFF;
}
.staffList section > a h3{
	padding-bottom:0px;
}

.staffList .img{
	border-radius: 60px;
	width: 120px;
	height: 120px;
	margin-left:30px;
	margin-right: auto;
}
.staffList .img img{
	position: absolute;
	max-width: none;
	width: 120px;
	left: 0%;
	margin: 0 0 0 0px;
 }
 html:not(.sp) .staffList .img:after{
 	width: 120px;
 }
.staffList section > a h2{
 	padding-bottom: 10px;
 }
.staffList .staffName{
	padding-top: 0;
	font-size: 1.5rem;
	line-height: 1em;
}
.staffList .staffName::before{
	display: none;
}
.staffList .staffName span{
	display: inline-block;
	margin-left: 5px;
}

.staffList .tag ul {
	margin-bottom: 0;
	margin-top: 5px;
	padding-left: 30px;
}

.staffList .tag li {
	display: inline-block;
	font-size: .75rem;
	padding: 5px 10px;
	line-height: 1em;
	border: solid 1px rgba(35, 48, 54, .2);
	border-radius: 20px;
	color: #686f75;
}
.staffList .tag li:after {content: none;}

.officeBox h3 {
	margin: 0px 0 30px;
	font-size: 1.25rem;
	font-size: 1.625rem;
	font-size: 1.375rem;
	font-weight: bold;
	line-height: 1.6;
	color: #233036;
}
.officeBox .row{
	justify-content: center;
	align-items: center;
}

.officeBox .half{
	margin-bottom: 90px;
}
.officeBox .half:nth-child(odd) h3,
.officeBox .half:nth-child(odd) p{
	margin-right: 50px;
}
.officeBox .half:nth-child(even) h3,
.officeBox .half:nth-child(even) p{
	margin-left: 50px;
}
.officeBox .half p{
	margin-bottom: 15px;
}
*/
/*
@media screen and (max-width: 1199px){
	.staffList {
		padding: calc(3vw + 50px) 3vw 50px 6vw;
	}
}
@media screen and (max-width: 767px){
	.staffList {padding: calc(3vw + 30px) 5vw calc(3vw + 10px);}
	.staffList section > a{
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: flex-start;
	}
	.staffList .img{
		width:  16vw;
		height: 16vw;
		border-radius: 8vw;
		margin-left: 0;
	}
	.staffList .img img{
		width:  16vw;
		height: 16vw;
	}
	.staffDescription{
		flex: 1;
		margin-left: calc(3vw + 5px);
	}
	.staffList section > a h2,
	.staffList section > a h3{
		padding-left: 0;
	}
	.staffList section > a h2{
		padding-top: 0;
	}
	.staffList  .text{
		padding-left: 0;
	}
	.staffList section > a h2::before{
		display: none;
	}
	.staffList .tag ul{
		padding-left: 0;
	}
}

@media screen and (max-width: 430px){
	.staffList .img{
		width:  70px;
		height: 70px;
		border-radius: 35px;
	}
	.staffList .img img{
		width:  70px;
		height: 70px;
	}
}
*/




/* office  */
.officeBox,
.officeBox.bgBox {
	padding-right: 0;
	padding-left: 0;
}
.officeBox .heading-en {
	transform: translateX(6vw);
}
.officeBox h2 {
	transform: translateX(6vw);
}
.officeBox h3 {
	margin: 0px 0 15px;
	font-size: 2.3rem;
	font-weight: bold;
	line-height: 1.37;
	color: #233036;
}
.officeBox .row{
	justify-content: center;
	align-items: center;
}
.officeBox .row-reverce .col-img {
	order: 0;
}
.officeBox .row-reverce .col-text {
	order: 1;
}
.officeBox .half {
	margin-bottom: 100px;
}
.officeBox .half.portrait {
	padding-right: 6vw;
}
.officeBox .row:not(.row-reverce) .half:first-child,
.officeBox .row .half.col-img:not(.landscape) {
	padding-left: 6vw;
}
.officeBox .row.row-slider {
	padding-right: 0;
}
.officeBox .row.row-slider .half.col-text {
	padding-right: 6vw;
}
.officeBox .row.row-slider .half:not(.col-text) {
	padding-right: 0;
}
.officeBox .row-reverce .half.col-text {
	padding-right: 6vw;
}

.officeBox .half:nth-child(odd) h3,
.officeBox .half:nth-child(odd) p{
	margin-right: 0;
}

.officeBox .half:not(.col-text) h3,
.officeBox .half:not(.col-text) p {
	margin-right: 70px;
}

.officeBox .half.col-text h3,
.officeBox .half.col-text p {
	margin-left: 70px;
}
/* 
.officeBox .half:nth-child(even) h3,
.officeBox .half:nth-child(even) p,
.officeBox .col-text h3,
.officeBox .col-text p {
	margin-left: 70px;
} */
.officeBox .half p{
	margin-bottom: 15px;
}

/* office slide */
.officeslide li::after {
	content: none;
}
.officeslide .slick-dots {
	display: flex;
	justify-content: center;
	margin-top: 40px;
}
.officeslide .slick-dots li {
	opacity: 0.2;
	width: 12px;
	height: 12px;
	margin: 0 5px;
	padding: 0;
	border-radius: 50%;
	background-color: #233036;
	transition: opacity .2s linear;
	cursor: pointer;
}
html:not(.sp) .officeslide .slick-dots li:hover {
	opacity: 1;
}
.officeslide .slick-dots li.slick-active {
	opacity: 1;
} 
.officeslide .slick-dots li::after {
	content: none;
}
.officeslide .slick-dots button {
	text-indent: -9999px;
}
.officeslide-arrow {
	position: absolute;
	bottom: -20px;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	border: 1px solid #d6d9da;
	transform: none;
	transition: border-color .2s linear;
	cursor: pointer;
}
.officeslide-arrow.prev-arrow {
	left: 6.94vw;
}
.officeslide-arrow.next-arrow {
	right: 6.25vw;
}

.officeslide-arrow::before {
	content: "";
	position: absolute;
	display: block;
	width: 17px;
	height: 2px;
	bottom: 23px;
	background-color: #233036;
	border-radius: 2px;
	transition: width .2s linear;
}
.officeslide-arrow.prev-arrow::before {
	right: 15px;
}
.officeslide-arrow.next-arrow::before {
	left: 15px;
}
.officeslide-arrow.prev-arrow:hover,
.officeslide-arrow.next-arrow:hover {
	border-color: #d6d9da;
}
html:not(.sp) .officeslide-arrow.prev-arrow:hover,
html:not(.sp) .officeslide-arrow.next-arrow:hover { border-color: #233036; }
html:not(.sp) .officeslide-arrow.next-arrow:hover::before {width: 20px;}
html:not(.sp) .officeslide-arrow.prev-arrow:hover::before {width: 20px;}

.officeslide-arrow::after {
	content: "";
	position: absolute;
	display: block;
	width: 8px;
	height: 8px;
	top: 20px;
	border-top: solid 2px #233036;
}
.officeslide-arrow.prev-arrow::after {
	left: 15px;
	border-left: solid 2px #233036;
	transform: rotate(-45deg);
	transition: left .2s linear;
}
.officeslide-arrow.next-arrow::after {
	right: 15px;
	border-right: solid 2px #233036;
	transform: rotate(45deg);
	transition: right .2s linear;
}

html:not(.sp) .officeslide-arrow.prev-arrow:hover::after {left: 12px;}
html:not(.sp) .officeslide-arrow.next-arrow:hover::after {right: 12px;}



@media screen and (max-width: 767px){

	/* office */
	.officeBox,
	.officeBox.bgBox {
		padding-right: 5vw;
		padding-left: 5vw;
	}
	.officeBox .heading-en {
		padding-bottom: 0;
		transform: translateX(0);
	}
	.officeBox h2 {
		transform: translateX(0);
	}
	.officeBox h3 {
		margin: 0px 0 15px;
		font-size: 2rem;
	}
	.officeBox .half {
		margin-bottom: 50px;
		padding-left: 0;
		padding-right: 0;
	}
	.officeBox .row .half:first-child {
		margin-top: 80px;
	}

	.officeBox .half.portrait {
		padding-right: 0;
	}
	.officeBox .row:not(.row-reverce) .half:first-child,
	.officeBox .row .half.col-img:not(.landscape) {
		padding-left: 0;
	}
	.officeBox .row-reverce .half.col-text,
	.officeBox .row .half.col-img:not(.landscape) {
		padding-right: 0;
	}
	.officeBox .row.row-slider .half.col-text {
		padding-right: 0;
	}
	.officeBox .row.row-slider .half:not(.col-text) {
		padding-right: 0;
	}
	.officeBox .row.row-reverce:last-child {
		padding-right: 0;
	}
	.officeBox .half:not(.col-text) h3,
	.officeBox .half:not(.col-text) p {
		margin-right: 0;
	}
	.officeBox .half.col-text h3,
	.officeBox .half.col-text p {
		margin-left: 0;
	} 
	.officeBox .half-text {
		order: 0;
	}
	.officeBox .half-img {
		order: 1;
		padding-right: 5vw;
	}

	/* office slide */
	.officeslide .slick-dots {
		display: flex;
		justify-content: center;
		margin-top: 40px;
	}
	.officeslide .slick-dots li {
		opacity: 0.2;
		width: 12px;
		height: 12px;
		margin: 0 5px;
		padding: 0;
		border-radius: 50%;
		background-color: #233036;
		transition: background-color .2s linear;
	}

}



/*---------------------------------------------
	utility
  ---------------------------------------------*/
	.pc-only {
		display: block;
	}
	
	.sp-only {
		display: none;
	}
	
	@media screen and (max-width: 767px) {
		.pc-only {
			display: none;
		}
		
		.sp-only {
			display: block;
		}
	}


/*---------------------------------------------
	/service/branding/
  ---------------------------------------------*/

.brandingFlow{
	padding:0 8% 4.5% 8%;
}
.brandingFlow:first-of-type{
	margin-top: 0;
}
.brandingFlow:after{
	width: 100%;
	left: 0;
	top: 0;
	background-image: url("../images/branding_flow_shadow.png");
	background-repeat:no-repeat;
	background-size: contain;
	background-color:transparent;
}

.brandingFlow:last-of-type:after{
	display: block;
}
.brandingFlow .heading{
border:none;
border-radius:0;
position: static;
width: 32%;
height: auto;
	display: table-cell;
}
.brandingFlow .heading h3{
	padding: 0;
width: auto;
height: auto;
}
.brandingFlow p{
    padding: 2.5% 4% 0 7%;
    vertical-align: top;
}

/*---------------------------------------------
	SP /service/branding/
  ---------------------------------------------*/
@media screen and (max-width: 767px) {
	.brandingFlow{
		padding-left: 0;
		padding-right: 0;
	}
	.brandingFlow .heading{
		display: block;
		width: 53%;
		margin-bottom: 5px;
	}
	.brandingFlow:after{
		display: block;
	}
	.brandingFlow:after{
		background-image: url("../images/branding_flow_shadow_sp.png");
	}
	.brandingFlow p{
	    padding: 2.5% 10% 0 10%;
	}
}




.btn-sns {
	z-index: 30001;
	width: 50px;
	height: 50px;
}
.btn-sns a {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	text-indent: -9999px;
	overflow: hidden;
	border-radius: 50%;
	cursor: pointer;
}
.btn-sns a:before {
	content: "";
	position: absolute;
	display: block;
	width: 50px;
	height: 50px;
	top: 0px;
	left: 0px;
	background-repeat: no-repeat;
	background-size: contain;
}

.btn-sns.note a:before {
	background-image: url(../images/icon_sns_note.png);
}

.btn-sns.x a:before {
	background-image: url(../images/icon_sns_x.png);
}

.footer-sns{
	position: fixed;
	bottom: 6vh;
	right: calc(6vw - 6px);
	height: 50px;
}

.footer-sns .btn-sns{
	display: inline-block;
	margin-right: 10px;
}


@media screen and (max-width: 1199px), print{
	.footer-sns {
			right: calc(3vw + 54px);
			bottom: 5vh;
	}
}

/*
@media screen and (max-width: 959px){
	.footer-sns {
		position: absolute;
		top: -36px;
		right: 30px;
	}
	.footer-sns .btn-sns{
		display: inline-block;
		margin-bottom: 0;
		margin-right: 10px;
	}
}
*/

@media screen and (max-width: 767px){
	/*
	.footer-sns {
		top: 36px;
		right: 3vw;
	}
	.footer-sns .btn-sns:last-child{
		margin-right: 0;
	}
	*/
	.footer-sns{
		bottom: 15px;
	}
}


/* ----- Scroll / Page Top Button ----- */

#navi-scroll {
	z-index: 30001;
	width: 50px;
	height: 1px;
	bottom: calc(6vh + 28px);
	right: 6vw;
	position: fixed;
}

.top-page #navi-scroll:before {
	content: "Scroll";
	left: -57px;
	display: block;
	top:-7px;
	line-height: 1;
	font-size: .75rem;
	text-transform: uppercase;
	color: #fff;
	vertical-align: top;
}

.top-page #navi-scroll span {
	position: absolute;
	display: block;
	width: 50px;
	height: 1px;
	top: 5px;
	background-color: #FFF;
	animation: navi-scroll 1.5s infinite ease-in-out;
}

@keyframes navi-scroll{
	0%{
		width: 0;
		right: -7px;
		margin-left: 0;
	}
	30% {
		width: calc(6vw - 7px);
		right: -6vw;
		margin-left: 0;
	}
	70% {
		width: calc(6vw - 7px);
		right: -6vw;
		margin-left: 0;
	}
	100%{
		width: 0;
		right: -6vw;
	}
}

.top-page #navi-scroll.navi-scroll-fadeout{
	animation: navi-scroll-fadeout 0.5s ease;
	opacity: 0;
}

@keyframes navi-scroll-fadeout{
	0%{
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

.top-page #navi-scroll.navi-scroll-fadein{
	animation: navi-scroll-fadein 0.3s ease;
	opacity: 1;
}


@keyframes navi-scroll-fadein{
	0%{
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@media screen and (max-width: 1199px), print {
	.top-page #navi-scroll {
		bottom: calc(5vh + 28px);
		right: calc(3vw + 60px);
	}
	.top-page #navi-scroll span{
		animation: navi-scroll-tablet 1.5s infinite ease-in-out;
	}

	@keyframes navi-scroll-tablet{
		0%{
			width: 0;
			right: calc(-7px);
			margin-left: 0;
		}
		30% {
			width: calc(3vw - 7px + 60px);
			right: calc(-3vw - 60px);
			margin-left: 0;
		}
		70% {
			width: calc(3vw - 7px + 60px);
			right: calc(-3vw - 60px);
			margin-left: 0;
		}
		100%{
			width: 0;
			right: calc(-3vw - 60px - 7px);
		}
	}
}

.btn-pagetop-fadein{
	animation: btn-pagetop-fadein 0.8s ease;
}

.btn-pagetop-fadeout{
	opacity: 0;
	pointer-events: none;
	animation: btn-pagetop-fadeout 0.8s ease;
}

.btn-pagetop-fadeout a{
	cursor: default !important;
}

@keyframes btn-pagetop-fadein {
	0%{
		margin-bottom: calc(-50px - 6vh);
		opacity: 0;
	}
	100% {
		margin-bottom: 0px;
		opacity: 1;
	}
}

@keyframes btn-pagetop-fadeout {
	0% {
		margin-bottom: 0px;
		opacity: 1;
	}
	100%{
		margin-bottom: calc(-50px - 6vh);
		opacity: 0;
	}
}

@media screen and (mAX-width: 959px) {
	#navi-scroll{
		display: none !important;
	}
}

/* コンタクトフォーム7 */
    /*確認画面と完了画面を非表示*/
    .confirm_area,
    .thanks_area {
        display: none;
    }

    /*デフォルトのサンクスメッセージを非表示*/
    .wpcf7-response-output{
        display: none;
    }

.mw_wp_form_confirm .icon-back input[type="button"] {
    text-decoration: none;
    color: #1c89a6;
    outline: none;
    transition: color .2s linear;
    cursor: pointer;
}

html:not(.sp) .mw_wp_form_confirm .icon-back input[type="button"]:hover {
    text-decoration: none;
    color: #49a1b8;
}

.mw_wp_form_confirm .icon-back input[type="button"] {
    position: relative;
    display: inline-block;
    padding-left: 30px;
    text-decoration: none;
    vertical-align: top;
}

html:not(.sp) .mw_wp_form_confirm .icon-back input[type="button"]:hover {
    text-decoration: underline;
}

/* コンタクトフォーム7 ここまで */