@charset "UTF-8";

/*
* 外部CSS読み込み
*/
@import url(option.css);
@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);

/*
* Base 基本設定
*/
*{-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-o-box-sizing: border-box;-ms-box-sizing: border-box;}
html,body { height: 100%; height: 100%;}
html {font-size: 14px;}
body{margin: 0 auto;font-family:-apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI","Noto Sans Japanese","ヒラギノ角ゴ ProN W3", Meiryo, sans-serif;}
img{width: 100%;}
a{text-decoration: none;-moz-transition: ALL 0.3s ease 0 ;-webkit-transition: ALL 0.3s ease 0 ;-o-transition: ALL 0.3s ease 0 ;-ms-transition: ALL 0.3s ease 0 ;color: #555;}
p{line-height: 1.9;word-break: break-all;letter-spacing: -.02em;}
li{list-style: none;}
h2 {font-size: 1.8rem;}
h3 {font-size:1.3rem;}
dt { font-weight: 600; font-size: 1.2rem; line-height: 1.8rem; }
dd { margin: 0.5rem 0 1em 2em; line-height: 1.8rem; }
.wrap{
	width: 1200px;
	max-width: 98%;
	margin: 0 auto;
	position: relative;
}
.wrap800{
	width: 800px;
	max-width: 100%;
	margin: 0 auto;
	position: relative;
}
.clear{clear: both;}.clear hr{display: none;}
.center{text-align: center;}
.clearfix::after { content: ""; display: block; height: 0;	clear: both;}
@media screen and (max-width: 520px) {/* 479px以下用（スマートフォン用）の記述 */
	html {
		font-size: 3vw;
	}
	.wrap,.wrap800{
		width: 100%;
		padding: 0 2.5%;
	}
}
.number_font {
	font-family: monospace;
}

/*
* Header ヘッダースタイル
*/
header {
	width: 100%;
	top: 0;
	position: fixed;
	padding: 10px 5%;
	background-color: rgba(255, 255, 255, .7);
	z-index: 9999;
}
header .logo {
	width: 150px;
}
header .g_nav {
	width: calc(100% - 150px);
	padding: 0 5%;
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	right: 0;
}
header .g_nav ul{
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
}
header .g_nav ul li {
	margin-left: 30px;
	position: relative;
}
header .g_nav ul li::after {
	content: "";
	width: 0px;
	height: 2px;
	background-color: #000;
	position: absolute;
	margin: auto;
	bottom: -5px;
	left: 0;
	right: 0;
	transition:ALL 0.3s ease;
	-webkit-transition:ALL 0.3s ease;
	-moz-transition:ALL 0.3s ease;
	-o-transition:ALL 0.3s ease;
}
header .g_nav ul li:hover::after,
header .g_nav ul li:focus::after,
header .g_nav ul li:active::after {
	width: 40px;
}
header .g_nav ul li a {
	color: #000;
}
header .g_nav .sp_menu_logo {
	display: none;
}
@media screen and (max-width: 860px) {/* 859px以下用（スマートフォン用）の記述 */
	header .g_nav ul li {
		font-size: 12px;
	}
}
@media screen and (max-width: 780px) {/* 859px以下用（スマートフォン用）の記述 */
	header .g_nav ul li {
		font-size: 10px;
	}
}
@media screen and (max-width: 768px) {/* 768px以下用（スマートフォン用）の記述 */
	header .logo {
		width: 125px;
	}
	header .g_nav {
		width: 100%;
		height: 100vh;
		width: 70%;
		padding: 0;
		position: fixed;
		top: 0;
		-webkit-transform: translateY(0%);
		-ms-transform: translateY(0%);
		transform: translateY(0%);
		left: -80%;
		background-color: #fff;
		transition:ALL 0.3s ease;
		-webkit-transition:ALL 0.3s ease;
		-moz-transition:ALL 0.3s ease;
		-o-transition:ALL 0.3s ease;
	}
	header .g_nav.open {
		left: 0;
	}
	header .g_nav ul{
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-end;
	}
	header .g_nav ul li {
		width: 100%;
		margin-left: 0;
		text-align: center;
		border-top: 1px solid #f5f5f5;
	}
	header .g_nav ul li::after {
		display: none;
	}
	header .g_nav ul li:last-of-type {
		border-bottom: 1px solid #f5f5f5;
	}
	header .g_nav ul li a {
		display: block;
		padding: 20px 0;
	}
	header .g_nav .sp_menu_logo {
		display: block;
		width: 40%;
		padding: 35px 0;
		margin: 0 auto;
	}
}

/*
* Toggle
*/
.menu-trigger {
	display: none;
}
@media screen and (max-width: 768px) {/* 767px以下用（タブレット／スマートフォン用）の記述 */
	.menu-trigger,
	.menu-trigger span {
	  display: inline-block;
	  transition: all .4s;
	  box-sizing: border-box;
	}
	.menu-trigger {
	  position: fixed;
	  top: 15px;
	  right: 15px;
	  width: 30px;
	  height: 24px;
	  z-index: 1000;
	}
	.menu-trigger span {
	  position: absolute;
	  left: 0;
	  width: 100%;
	  height: 2px;
	  background-color: #000;
	  border-radius: 4px;
	}
	.menu-trigger span:nth-of-type(1) {
	  top: 0;
	}
	.menu-trigger span:nth-of-type(2) {
	  top: 11px;
	}
	.menu-trigger span:nth-of-type(3) {
	  bottom: 0;
	}

	.menu-trigger.active span:nth-of-type(1) {
	  -webkit-transform: translateY(10px) rotate(-45deg);
	  transform: translateY(10px) rotate(-45deg);
	}
	.menu-trigger.active span:nth-of-type(2) {
	  opacity: 0;
	}
	.menu-trigger.active span:nth-of-type(3) {
	  -webkit-transform: translateY(-12px) rotate(45deg);
	  transform: translateY(-12px) rotate(45deg);
	}
}

/*
* Footer フッタースタイル
*/
footer {
	background-color: #000;
	margin-top: 100px;
	padding: 35px 0;
}
footer * {
	color: #fff;
}
footer .f_container {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
footer .f_container .f_contents {
	width: 50%;
}
footer .f_container .left_area .f_logo {
	width: 150px;
}
footer .f_container .left_area ul li {
	letter-spacing: 2px;
	font-size: .9rem;
	margin-top: 15px;
}
footer .f_container .right_area ul.f_nav {
	display: flex;
	justify-content: end;
}
footer .f_container .right_area ul.f_nav li {
	margin-left: 15px;
	text-align: right;
}
footer .f_container .right_area ul.f_nav li a:hover,
footer .f_container .right_area ul.f_nav li a:active,
footer .f_container .right_area ul.f_nav li a:focus {
	text-decoration: underline;
}
footer .f_container .right_area ul.f_sns {
	display: flex;
	justify-content: flex-end;
	margin-top: 15px;
}
footer .f_container .right_area ul.f_sns li {
	height: 25px;
	margin-left: 30px;
}
footer .f_container .right_area ul.f_sns li:first-child {
	margin-left: 0;
}
footer .f_container .right_area ul.f_sns li img {
	width: auto;
	height: 100%;
}
footer #copy {
	position: absolute;
	bottom: 0;
	right: 0;
	letter-spacing: 2px;
}

/* 2022.04.18 */
footer {
	position: relative;
	padding-bottom: 40px;
}
footer .wrap {
	padding-bottom: 35px;
}
footer .f_container .left_area {
	width: 75%;
}
footer .f_container .right_area {
	width: 25%;
}
footer .f_container .left_area .f_logo,
footer .f_container .left_area ul {
	float: left;
}
footer .f_container .left_area ul {
	margin-left: 20px;
}
footer .f_container .left_area ul li:first-child {
	margin-top: 0;
}
footer .certifications	{
	background-color: #FFF;
}
footer .certifications .wrap	{
	padding: 0px 0 20px;
	text-align: center;
}
footer .certifications li	{
	display: inline-block;
	width: auto;
	height: 80px;
	margin: 20px 20px 0 auto;
}
footer .certifications li img {
	display: block;
	height: 100%;
	width: auto;
	margin: 0 auto;
}
footer .certifications li:last-of-type	{
	margin-right: auto;
}
footer #copy {
	bottom: 8px;
	width: 100%;
	text-align: center;
}
@media screen and (max-width: 520px) {/* 479px以下用（スマートフォン用）の記述 */
	footer {
		margin-top: 0;
	}
	footer .f_container .f_contents {
		width: 100%;
	}
	footer .f_container .left_area .f_logo {
		width: 125px;
		margin: 0 auto;
	}
	footer .f_container .left_area ul li {
		text-align: center;
	}
	footer .f_container .right_area ul.f_nav {
		margin-top: 35px;
	}
	footer .f_container .right_area ul.f_nav li {
		text-align: center;
	}
	footer .f_container .right_area ul.f_sns {
		display: flex;
		justify-content: center;
		margin-top: 30px;
	}
	footer #copy {
		position: relative;
		bottom: auto;
		right: auto;
		margin-top: 35px;
		text-align: center;
	}
	/* 2022.04.18 */
	footer .f_container .left_area .f_logo,
	footer .f_container .left_area ul {
		float: none;
	}
	footer .f_container .left_area ul {
		margin-left: 0;
	}
	footer .f_container .left_area ul li:first-child {
		margin-top: 15px;
	}
}
/*
* text_template スタイル
*/
h2.headline_a {
	text-align: center;
	font-size: 2.1rem;
	letter-spacing: 2px;
}
h2.headline_a ruby {
	display: block;
	font-size: 1.14rem;
	font-weight: normal;
	color: #808080;
}
h2.headline_b {
	width: 300px;
	text-align: center;
	font-size: 1.42rem;
	letter-spacing: 2px;
	color: #fff;
	background-color: #000;
	padding: 15px;
	margin: 0 auto;
}
@media screen and (max-width: 520px) {/* 479px以下用（スマートフォン用）の記述 */
	h2.headline_a {
		font-size: 1.7rem;
	}
	h2.headline_a ruby {
		display: block;
		font-size: 1.14rem;
		font-weight: normal;
		color: #808080;
	}
	h2.headline_b {
		width: 300px;
		text-align: center;
		font-size: 1.42rem;
		letter-spacing: 2px;
		color: #fff;
		background-color: #000;
		padding: 15px;
		margin: 0 auto;
	}
}
.text_template .fv{
	width: 100%;
	margin-top: 100px;
	overflow: hidden;
}
.text_template .fv .mark {
	width: 45%;
	padding: 0 5%;
	float: left;
}
.text_template .fv .txt_box {
	width: 55%;
	margin-top: 100px;
	padding: 0 5%;
	float: right;
}
.text_template .fv .txt_box h1 {
	display: inline-block;
	font-size: 5rem;
	letter-spacing: 10px;
	background-color: #fff;
	position: relative;
	z-index: 2;
}
.text_template .fv .txt_box h1::before {
	content: "";
	width: 1000px;
	height: 1px;
	background-color: #000;
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	left: 120%;
	z-index: 1;
}
.text_template .fv .txt_box h2 {
	font-size: 2.14rem;
	letter-spacing: 2px;
	margin-top: 40px;
	line-height: 1.25;
}
.text_template .fv .txt_box p {
	margin-top: 35px;
	font-weight: bold;
}
@media screen and (max-width: 520px) {/* 479px以下用（スマートフォン用）の記述 */
	.text_template .fv{
		margin-top: 75px;
	}
	.text_template .fv .mark {
		width: 30%;
		margin: 0 auto;
		padding: 0;
		float: none;
	}
	.text_template .fv .txt_box {
		width: 100%;
		margin-top: 35px;
		padding: 0;
		float: none;
	}
	.text_template .fv .txt_box h1 {
		width: 100%;
		text-align: center;
		font-size: 2.5rem;
		letter-spacing: 5px;
	}
	.text_template .fv .txt_box h1::before {
		display: none;
	}
	.text_template .fv .txt_box h2 {
		font-size: 1.55rem;
		letter-spacing: 1px;
		margin-top: 35px;
		text-align: center;
	}
	.text_template .fv .txt_box p {
		margin-top: 35px;
		font-weight: bold;
		text-align: center;
	}
}

.img_template .fv{
	width: 100%;
	margin-top: 100px;
	overflow: hidden;
}
.img_template .fv .fv_img_contents {
	position: relative;
}
.img_template .fv .fv_img_contents .thumb {
	width: 60%;
	padding: 0 5%;
	height: 400px;
}
.img_template .fv .fv_img_contents .mark {
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	left: 63%;
	width: 330px;
}
.img_template .fv .txt_box {
	width: 100%;
	margin-top: 50px;
	padding: 0 5%;
}
.img_template .fv h1 {
	width: 100%;
	text-align: right;
	display: inline-block;
	font-size: 5rem;
	letter-spacing: 10px;
	position: relative;
	z-index: 2;
}
.img_template .fv .txt_box h1::before {
	content: "";
	width: 3000px;
	height: 1px;
	background-color: #000;
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	right: 35%;
	z-index: 1;
}
.img_template .fv .txt_box h2 {
	font-size: 2.14rem;
	letter-spacing: 2px;
	margin-top: 80px;
	line-height: 1.25;
	text-align: center;
}
.img_template .fv .txt_box p {
	width: 800px;
	margin: 35px auto 0;
	font-weight: normal;
}
@media screen and (max-width: 520px) {/* 479px以下用（スマートフォン用）の記述 */
	.img_template .fv{
		margin-top: 75px;
	}
	.img_template .fv .fv_img_contents {
		position: relative;
	}
	.img_template .fv .fv_img_contents .thumb {
		width: 95%;
		margin: 35px auto 0;
		padding: 0;
		height: 250px;
		background-color: #000;	
	}
	.img_template .fv .fv_img_contents .mark {
		position: relative;
		top: auto;
		-webkit-transform: translateY(0%);
		-ms-transform: translateY(0%);
		transform: translateY(0%);
		left: auto;
		width: 30%;
		margin: 0 auto;
	}
	.img_template .fv .txt_box {
		width: 100%;
		margin-top: 50px;
		padding: 0;
	}
	.img_template .fv h1 {
		width: 100%;
		text-align: center;
		font-size: 2.5rem;
		letter-spacing: 5px;
	}
	.img_template .fv .txt_box h1::before {
		display: none;
	}
	.img_template .fv .txt_box h2 {
		font-size: 1.55rem;
		letter-spacing: 1px;
		margin-top: 35px;
		text-align: center;
	}
	.img_template .fv .txt_box p {
		width: 100%;
		margin: 35px auto 0;
	}
}
/*
* Top Contents トップコンテンツスタイル
*/
.top .main_visual {
	position: relative;
	height: 100vh;
}
.top .main_visual .txt_box{
	width: 100%;
	position: absolute;
	padding-left: 50px;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	z-index: 2;
}
.top .main_visual .txt_box p {
	line-height: 1;
	letter-spacing: 2px;
}
.top .main_visual .txt_box p:first-of-type,
.top .main_visual .txt_box p:nth-of-type(2),
.top .main_visual .txt_box p:nth-of-type(3),
.top .main_visual .txt_box p:nth-of-type(4) {
	font-size: 3.5rem;
	font-weight: 600;
	letter-spacing: 6px;
	background-color: #fff;
	padding: 0 1%;
	line-height: 1.5;
}
.top .main_visual .txt_box p:first-of-type,
.top .main_visual .txt_box p:nth-of-type(3){
	display: inline !important;

}
.top .main_visual .txt_box p:nth-of-type(2),
.top .main_visual .txt_box p:nth-of-type(4) {
	display: inline !important;
	margin-left: -5px;
}
.top .main_visual .txt_box p:nth-of-type(5) {
	font-size: 1.78rem;
	font-weight: 600;
	margin-top: 10px;
}
.top .main_visual .txt_box p:nth-of-type(6) {
	font-size: 1rem;
	width: 300px;
	background-color: #fff;
	padding: 10px 20px;
	padding-left: 20px;
	margin-top: 17px;
	line-height: 1.9;
}
.top .main_visual .txt_box p span {
	background-color: #fff;
	padding: 0 20px;
}
.webp .top .main_visual .visual_box{
	background: url('../img/top/main_visual.png.webp') center center/cover no-repeat;
}
.no-webp .top .main_visual .visual_box{
	background: url('../img/top/main_visual.png') center center/cover no-repeat;
}
.top .main_visual .visual_box{
	width: 80%;
	height: 80%;
	margin: 0 0 0 auto;
	position: absolute;
	top: 50%;
	right: 0;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}
.top .main_visual .scroll {
	position: absolute;
	width: 300px;
	margin: auto;
	bottom: 4%;
	left: 0;
	right: 0;
}
.top .main_visual .scroll .line {
	width: 1px;
	background-color: #000;
	margin: auto;
	position: absolute;
	top: -50px;
	left: 0;
	right: 0;
	transition:ALL 0.3s ease;
	-webkit-transition:ALL 0.3s ease;
	-moz-transition:ALL 0.3s ease;
	-o-transition:ALL 0.3s ease;
	animation: scroll_line_action 1.5s ease 0s normal infinite;
}
@keyframes scroll_line_action {
  0% {
    height: 0px;
  }
  100% {
    height: 50px;
  }
}

.top .main_visual .scroll p.delighter {
	position: relative;
	top: -30px;
	opacity: 0;
	text-align: center;
	font-size: 1.1rem;
	letter-spacing: 2px;
	transition:ALL 0.3s ease;
	-webkit-transition:ALL 0.3s ease;
	-moz-transition:ALL 0.3s ease;
	-o-transition:ALL 0.3s ease;
}
.top .main_visual .scroll p.delighter.started {
	top: 0;
	opacity: 1;
}
@media screen and (max-width: 520px) {/* 479px以下用（スマートフォン用）の記述 */
	.top .main_visual .txt_box{
		padding-left: 10px;
		top: auto;
		-webkit-transform: translateY(0%);
		-ms-transform: translateY(0%);
		transform: translateY(0%);
		bottom: 120px;
	}
	.top .main_visual .txt_box p:first-of-type,
	.top .main_visual .txt_box p:nth-of-type(2),
	.top .main_visual .txt_box p:nth-of-type(3),
	.top .main_visual .txt_box p:nth-of-type(4) {
		font-size: 2.2rem;
		letter-spacing: 2px;
		margin-bottom: 15px;
		display: inline-block !important;
	}
	.top .main_visual .txt_box p:nth-of-type(2),
	.top .main_visual .txt_box p:nth-of-type(4) {
		margin-left: 0;
	}
	.top .main_visual .txt_box p:nth-of-type(5) {
		font-size: 1.2rem;
		line-height: 1.5rem;
	}
	.top .main_visual .txt_box p:nth-of-type(6) {
		font-size: 1.2rem;
		width: 70%;
		padding: 10px 20px 10px 10px;
	}
	.top .main_visual .txt_box p span {
		padding: 5px;
		display: inline-block;
	}

}

/*>>>>>---------WHAT WE DO*/
.top .what_we_do {
	margin-top: 100px;
}
.top .what_we_do .catch {
	position: absolute;
	top: 0;
	left: 0;
}
.top .what_we_do .catch.delighter::before {
	content: "";
	width: 0px;
	height: 1px;
	background-color: #000;
	position: absolute;
	left: 120%;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	transition:ALL 0.6s ease;
	-webkit-transition:ALL 0.6s ease;
	-moz-transition:ALL 0.6s ease;
	-o-transition:ALL 0.6s ease;
}
.top .what_we_do .catch.delighter.started::before {
	width: 310px;	
}
.top .what_we_do .txt_box.delighter{
	width: 45%;
	margin: 0 0 450px auto;
	opacity: 0;
	transition:ALL 0.6s .4s ease;
	-webkit-transition:ALL 0.6s .4s ease;
	-moz-transition:ALL 0.6s .4s ease;
	-o-transition:ALL 0.6s .4s ease;
}
.top .what_we_do .txt_box.delighter.started{
	opacity: 1;
}
.top .what_we_do .txt_box h3{
	font-size: 1.85rem;
}
.top .what_we_do .txt_box p{
	width: 80%;
	margin-top: 35px;
}
.webp .top .what_we_do .thumb {
	background: url('../img/top/what_we_do.png.webp') center center/cover no-repeat;
}
.no-webp .top .what_we_do .thumb {
	background: url('../img/top/what_we_do.png') center center/cover no-repeat;
}
.top .what_we_do .thumb {
	width: 400px;
	height: 400px;
	background-color: #f5f5f5;
	position: absolute;
	top: 50%;
	left: 10%;
}
@media screen and (max-width: 520px) {/* 479px以下用（スマートフォン用）の記述 */
	.top .what_we_do .catch {
		position: relative;
		top: auto;
		left: auto;
		z-index: 2;
	}
	.top .what_we_do .catch.delighter::before {
		content: "";
		width: 1px;
		height: 0px;
		background-color: #000;
		position: absolute;
		left: 1.5%;
		top: 65px;
		-webkit-transform: translateY(0%);
		-ms-transform: translateY(0%);
		transform: translateY(0%);
	}
	.top .what_we_do .catch.delighter.started::before {
		width: 1px;
		height: 230px;
	}
	.top .what_we_do .txt_box.delighter{
		width: 100%;
		margin: 0 auto;
		padding-left: 5%;
	}
	.top .what_we_do .txt_box h3{
		font-size: 1.55rem;
		margin-top: 35px;
	}
	.top .what_we_do .txt_box p{
		width: 100%;
		margin-top: 35px;
	}
	.top .what_we_do .thumb {
		width: 100%;
		height: 300px;
		position: relative;
		top: auto;
		left: auto;
		margin-top: 25px;
	}
}

/*>>>>>---------TOP サービスセクション*/
.top .service {
	background-color: #f2f2f2;
	padding-top: 50px;
	margin-top: 50px;
}
.top .service .catch {
	position: absolute;
	top: -140px;
	right: 0;
}
.top .service .catch.delighter::before {
	content: "";
	width: 1px;
	height: 0px;
	background-color: #000;
	position: absolute;
	top: 65px;
	right: 20px;
	margin: auto;
	transition:ALL 0.6s ease;
	-webkit-transition:ALL 0.6s ease;
	-moz-transition:ALL 0.6s ease;
	-o-transition:ALL 0.6s ease;
}
.top .service .catch.delighter.started::before {
	height: 130px;
}
.top .service ul {
	display: flex;
	flex-wrap: wrap;
}
.top .service ul li {
	width: 50%;
	padding: 0 10%;
	margin-bottom: 50px;
}
.top .service ul li h3 {
	width: 60%;
	margin: 0 auto;
	padding: 5px 0;
	background-color: #000;
	color: #fff;
	font-size: 1.4rem;
	font-weight: 400;
	letter-spacing: 1px;
	line-height: 1.2;
	text-align: center;
}
.top .service ul li:nth-of-type(2) h3 {
	padding:17px 0;
}
.top .service ul li h4 {
	margin-top: 15px;
	font-size: 1.4rem;
	font-weight: 600;
	letter-spacing: 1px;
	line-height: 1.2;
	text-align: center;
}
.top .service ul li p {
	margin-top: 15px;
}
@media screen and (max-width: 520px) {/* 479px以下用（スマートフォン用）の記述 */
	.top .service {
		margin-top: 150px;
	}
	.top .service .catch {
		position: absolute;
		top: -125px;
		right: 0;
	}
	.top .service .catch::before {
		top: 65px;
		right: 5%;
		margin: auto;
	}
	.top .service ul li {
		width: 100%;
	}
}

.top .works {
	margin-top: 100px;
}
.top .works .catch {
	position: absolute;
	top: 0;
	left: 0;
}
.top .works .catch.delighter::before {
	content: "";
	width: 0px;
	height: 1px;
	background-color: #000;
	position: absolute;
	left: 120%;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	transition:ALL 0.6s ease;
	-webkit-transition:ALL 0.6s ease;
	-moz-transition:ALL 0.6s ease;
	-o-transition:ALL 0.6s ease;
}
.top .works .catch.delighter.started::before {
	width: 440px;
}
.top .works .txt_box.delighter{
	width: 45%;
	margin: 0 0 0 auto;
	opacity: 0;
	transition:ALL 0.6s .4s ease;
	-webkit-transition:ALL 0.6s .4s ease;
	-moz-transition:ALL 0.6s .4s ease;
	-o-transition:ALL 0.6s .4s ease;
}
.top .works .txt_box.delighter.started{
	opacity: 1;
}
.top .works .txt_box h3{
	font-size: 1.85rem;
}
.top .works .txt_box p{
	width: 80%;
	margin-top: 35px;
}

.top .works .slider_box {
	position: relative;
	overflow: hidden;
	margin-top: 50px;
}
.top .works .slider_box .swiper-container {
	width: 70%;
	margin: 0 0 0 auto;
	background-color: #f2f2f2;
	padding: 30px;
}
.top .works .slider_box .swiper-button-next {
	background-image: none;
	right: 73%;
}
@media screen and (max-width: 520px) {/* 479px以下用（スマートフォン用）の記述 */
	.top .works .catch {
		position: relative;
		top: auto;
		left: auto;
		z-index: 2;
	}
	.top .works .catch.delighter::before {
		content: "";
		width: 1px;
		height: 0px;
		background-color: #000;
		position: absolute;
		left: 1.5%;
		top: 65px;
		-webkit-transform: translateY(0%);
		-ms-transform: translateY(0%);
		transform: translateY(0%);
	}
	.top .works .catch.delighter.started::before {
		width: 1px;
		height: 90px;
	}
	.top .works .txt_box.delighter{
		width: 100%;
		margin: 0 auto;
		padding-left: 5%;
	}
	.top .works .txt_box h3{
		font-size: 1.55rem;
		margin-top: 35px;
	}
	.top .works .txt_box p{
		width: 100%;
		margin-top: 35px;
	}
	.top .works .slider_box .swiper-container {
		width: 90%;
		margin: 0 0 0 auto;
		background-color: #f2f2f2;
		padding: 30px;
	}
	.top .works .slider_box .swiper-button-next {
		background-image: none;
		width: 15px;
		right: 92%;
	}
}

/*>>>>>---------TOP メッセージセクション*/
.top .message {
	margin-top: 100px;
}
.top .message .catch {
	position: absolute;
	top: 0;
	right: 410px;
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
}
.top .message .catch.delighter::before {
	content: "";
	width: 0;
	height: 1px;
	background-color: #000;
	position: absolute;
	top: 75px;
	right: -webkit-calc(100% + 15px);
	right: calc(100% + 15px);
	margin: auto;
	transition:ALL 0.6s ease;
	-webkit-transition:ALL 0.6s ease;
	-moz-transition:ALL 0.6s ease;
	-o-transition:ALL 0.6s ease;
}
.top .message .catch.delighter.started::before {
	width: 275px;
}
.top .message .txt_box.delighter {
	width: 470px;
	position: absolute;
	top: 50px;
	left: 0;
	opacity: 0;
	transition:ALL 0.6s .4s ease;
	-webkit-transition:ALL 0.6s .4s ease;
	-moz-transition:ALL 0.6s .4s ease;
	-o-transition:ALL 0.6s .4s ease;
}
.top .message .txt_box.delighter.started {
	opacity: 1;
}
.top .message .txt_box h3{
	font-size: 1.85rem;
}
.top .message .txt_box p{
	width: 80%;
	margin-top: 35px;
}
.webp .top .message .thumb {
	background: url('../img/top/message_img.png.webp') center center/cover no-repeat;
}
.no-webp .top .message .thumb {
	background: url('../img/top/message_img.png') center center/cover no-repeat;
}
.top .message .thumb {
	width: 360px;
	height: 550px;
	margin: 0 0 0 auto;
}
.top .message .btn {
	margin-top: 35px;
}
.top .message .btn:last-of-type {
	margin-top: 15px;
}
@media screen and (max-width: 520px) {/* 479px以下用（スマートフォン用）の記述 */
	.top .message .catch {
		position: relative;
		top: auto;
		left: auto;
		right: auto;
		z-index: 2;
		-webkit-writing-mode: horizontal-tb;
		-ms-writing-mode: lr-tb;
		writing-mode: horizontal-tb;
	}
	.top .message .catch.delighter::before {
		content: "";
		width: 1px;
		height: 0px;
		background-color: #000;
		position: absolute;
		left: 1.5%;
		top: 65px;
		-webkit-transform: translateY(0%);
		-ms-transform: translateY(0%);
		transform: translateY(0%);
	}
	.top .message .catch.delighter.started::before {
		width: 1px;
		height: 230px;
	}
	.top .message .txt_box.delighter {
		width: 100%;
		padding-left: 5%;
		position: relative;
		top: auto;
		left: auto;
	}
	.top .message .txt_box h3{
		font-size: 1.55rem;
		margin-top: 35px;
	}
	.top .message .txt_box p{
		width: 100%;
		margin-top: 35px;
	}
	.top .message .thumb {
		width: 70%;
		height: 380px;
		margin: 35px auto 0;
	}
	.top .message .btn {
		margin: 35px auto 0;
	}
}

/*>>>>>---------TOP リクルートセクション*/
.top .recruit {
	margin-top: 100px;
}
.top .recruit .catch {
	position: absolute;
	top: 0;
	left: 385px;
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
}
.top .recruit .catch.delighter::before {
	content: "";
	width: 0px;
	height: 1px;
	background-color: #000;
	position: absolute;
	top: 75px;
	left: -webkit-calc(100% + 15px);
	left: calc(100% + 15px);
	margin: auto;
	transition:ALL 0.6s ease;
	-webkit-transition:ALL 0.6s ease;
	-moz-transition:ALL 0.6s ease;
	-o-transition:ALL 0.6s ease;
}
.top .recruit .catch.delighter.started::before {
	width: 275px;
}
.top .recruit .txt_box.delighter {
	width: 470px;
	position: absolute;
	top: 50px;
	right: 0;
	opacity: 0;
	transition:ALL 0.6s .4s ease;
	-webkit-transition:ALL 0.6s .4s ease;
	-moz-transition:ALL 0.6s .4s ease;
	-o-transition:ALL 0.6s .4s ease;
}
.top .recruit .txt_box.delighter.started {
	opacity: 1;
}
.top .recruit .txt_box h3{
	font-size: 1.85rem;
	line-height: 1.5;
}
.top .recruit .txt_box h3 span{
	display: block;
}
.top .recruit .txt_box p{
	width: 80%;
	margin-top: 35px;
}
.webp .top .recruit .thumb {
	background: url('../img/top/recruit_img.png.webp') center center/cover no-repeat;
}
.no-webp .top .recruit .thumb {
	background: url('../img/top/recruit_img.png') center center/cover no-repeat;
}
.top .recruit .thumb {
	width: 360px;
	height: 550px;
}
.top .recruit .btn {
	margin-top: 35px;
}
.top .recruit .btn:last-of-type {
	margin-top: 15px;
}
@media screen and (max-width: 520px) {/* 479px以下用（スマートフォン用）の記述 */
	.top .recruit .catch {
		position: relative;
		top: auto;
		left: auto;
		right: auto;
		text-align: right;
		z-index: 2;
		-webkit-writing-mode: horizontal-tb;
		-ms-writing-mode: lr-tb;
		writing-mode: horizontal-tb;
	}
	.top .recruit .catch.delighter::before {
		content: "";
		width: 1px;
		height: 0px;
		background-color: #000;
		position: absolute;
		right: 1.5%;
		top: 65px;
		left: auto;
		-webkit-transform: translateY(0%);
		-ms-transform: translateY(0%);
		transform: translateY(0%);
	}
	.top .recruit .catch.delighter.started::before {
		width: 1px;
		height: 230px;
	}
	.top .recruit .txt_box.delighter {
		width: 100%;
		padding-right: 5%;
		position: relative;
		top: auto;
		left: auto;
	}
	.top .recruit .txt_box h3{
		font-size: 1.55rem;
		margin-top: 35px;
	}
	.top .recruit .txt_box p{
		width: 100%;
		margin-top: 35px;
	}
	.top .recruit .thumb {
		width: 70%;
		height: 380px;
		margin: 35px auto 0;
	}
	.top .recruit .btn {
		margin: 35px auto 0;
	}
}

/*
* Works Page Style アバウトページスタイル
*/
.works .container .works_index {
	margin: 100px 0;
	padding: 100px 0 50px;
	background-color: #f2f2f2;
}
.works .container .works_index ul {
	display: flex;
	flex-wrap: wrap;
}
.works .container .works_index ul li {
	width: 29%;
	margin-right: 4.3333%;
	margin-bottom: 50px;
}

.works_case .fv .txt_box h1 {
	font-size: 2.5rem;
	line-height: 1.5;
	letter-spacing: .05em;
}
.works_case .fv .txt_box h1 span {
	font-size: 1.5rem;
	display: block;
	letter-spacing: .1em;
}
.works_case .fv .txt_box h2 {
	font-size: 1.85rem;
}
.works_case .container .todo_block {
	margin-top: 100px;
}
.works_case .container .todo_block .box {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin-top: 75px;
	position: relative;
}
.works_case .container .todo_block .box::before {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	width: 150px;
	height: 2px;
	background-color: #000
}
.works_case .container .todo_block .box:last-child::before {
	display: none;
}
.works_case .container .todo_block .box .item {
	width: 48%;
}
.works_case .container .todo_block .box .tech {
	position: relative;
}
.works_case .container .todo_block .box .tech h3 {
	font-size: 2rem;
	position: absolute;
	top: 140px;
	left: -130px;
	color: #dcdcdc;
	transform: rotate(90deg) ;
	-webkit-transform: rotate(90deg) ;
	-moz-transform: rotate(90deg) ;
	-o-transform: rotate(90deg) ;
	-ms-transform: rotate(90deg) ;
}
.works_case .container .todo_block .box .tech ul li {
	text-align: center;
	font-weight: 600;
	margin-bottom: 50px;
}
.works_case .container .todo_block .box .tech ul li img {
	width: auto;
	height: 75px;
}
.works_case .container .todo_block .box .txt ul {
	position: relative;
}
.works_case .container .todo_block .box .txt ul::before {
	content: "";
	width: 1px;
	height: 100%;
	position: absolute;
	margin: auto;
	top: 0;
	left: 0;
	right: 0;
	background-color: #000;
	z-index: -1;
}
.works_case .container .todo_block .box .txt ul li {
	background-color: #f2f2f2;
	margin-bottom: 75px;
}
.works_case .container .todo_block .box .txt ul li h3 {
	width: 100%;
	background-color: #000;
	color: #fff;
	font-size: 1.2rem;
	text-align: center;
	padding: 10px 0;
}
.works_case .container .todo_block .box .txt ul li p {
	padding: 20px
}
@media screen and (max-width: 520px) {/* 479px以下用（スマートフォン用）の記述 */
	.works_case .fv .txt_box h1 {
		font-size: 1.9rem;
		line-height: 1.5;
		letter-spacing: .05em;
	}
	.works_case .fv .txt_box h1 span {
		font-size: 1.5rem;
		display: block;
		letter-spacing: .1em;
	}
	.works_case .fv .txt_box h2 {
		font-size: 1.85rem;
	}
	.works_case .container .todo_block .box .item {
		width: 100%;
	}
	.works_case .container .todo_block .box .tech {
		position: relative;
	}
	.works_case .container .todo_block .box .tech h3 {
		position: relative;
		top: auto;
		left: auto;
		text-align: center;
		transform: rotate(0deg) ;
		-webkit-transform: rotate(0deg) ;
		-moz-transform: rotate(0deg) ;
		-o-transform: rotate(0deg) ;
		-ms-transform: rotate(0deg) ;
	}
	.works_case .container .todo_block .box .tech ul {
		margin-top: 35px;
	}
	.works_case .container .todo_block .box .tech ul li {
		text-align: center;
		font-weight: 600;
		margin-bottom: 50px;
	}
	.works_case .container .todo_block .box .tech ul li img {
		width: auto;
		height: 75px;
	}
	.works_case .container .todo_block .box .txt ul {
		position: relative;
	}
	.works_case .container .todo_block .box .txt ul::before {
		content: "";
		width: 1px;
		height: 100%;
		position: absolute;
		margin: auto;
		top: 0;
		left: 0;
		right: 0;
		background-color: #000;
		z-index: -1;
	}
	.works_case .container .todo_block .box .txt ul li {
		background-color: #f2f2f2;
		margin-bottom: 75px;
	}
	.works_case .container .todo_block .box .txt ul li h3 {
		width: 100%;
		background-color: #000;
		color: #fff;
		font-size: 1.2rem;
		text-align: center;
		padding: 10px 0;
	}
	.works_case .container .todo_block .box .txt ul li p {
		padding: 20px
	}
}

/*
* About Page Style アバウトページスタイル
*/
.about .container .vision {
	margin-top: 100px;
}
.about .container .vision .vision_img{
	width: 245px;
	margin: 50px auto 0;
}
.about .container .vision ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between
}
.about .container .vision ul li {
	width: 28%;
}
.about .container .vision ul li img {
	display: block;
	width: auto;
	height: 90px;
	margin: 45px auto 0;
}
.about .container .vision ul li p {
	margin-top: 35px;
}
.about .container .company_prof {
	margin-top: 100px;
}
.about .container .company_prof table {
	margin-top: 50px;
	width: 100%;
}
.about .container .company_prof table a{
	color: #000;
}
.about .container .company_prof table a:hover,
.about .container .company_prof table a:focus,
.about .container .company_prof table a:active {
	text-decoration: underline;
}
.about .container .company_prof table tr {
	border-top: 1px #ccc solid;
}
.about .container .company_prof table tr:last-of-type {
	border-bottom: 1px #ccc solid;
}
.about .container .company_prof table th,
.about .container .company_prof table td {
	padding: 20px 0;
	letter-spacing: 1px;
}
.about .container .company_prof table th {
	width: 18.5%;
	text-align: left;
	vertical-align: top;
	letter-spacing: 2px !important;
}
.about .container .company_prof table td ul li {
	margin-bottom: 15px;
}
.about .container .company_prof table td ul li:last-of-type {
	margin-bottom: 0;
}
.about .container .company_prof .certifications li[class]	{
	padding-bottom: 15px;
	border-bottom: 1px #EEE solid;
	position: relative;
}
.about .container .company_prof .certifications li:last-of-type {
	margin-bottom: 0;
}
.about .container .company_prof .certifications li figure {
	display: block;
	height: 80px;
	width: 160px;
	float: right;
	text-align: center;
}
.about .container .company_prof .certifications li figure img {
	display: block;
	height: 100%;
	width: auto;
	margin: 0 auto;
}
.about .container .company_prof .certifications li.iso figure {
	width: 183px;
}
.about .container .company_prof .certifications li.iso figure img {
	height: auto;
	width: 183px;
}
.about .container .company_prof .certifications li span	{
	position: absolute;
	top: calc(50% - (15px / 2));
	transform: translateY(-50%);
}
@media screen and (max-width: 520px) {/* 479px以下用（スマートフォン用）の記述 */
	.about .container .vision .vision_img{
		width: 50%;
		margin: 50px auto 0;
	}
	.about .container .vision ul li {
		width: 100%;
		text-align: center;
	}
	.about .container .vision ul li img {
		height: 50px;
	}
	.about .container .vision ul li p {
		width: 85%;
		margin: 35px auto 0;
	}
	.about .container .company_prof table th {
		width: 70px;
	}

	.about .container .company_prof .certifications li figure {
		margin-top: 10px;
		float: none;
	}
	.about .container .company_prof .certifications li figure img {
		margin: 0;
	}
	.about .container .company_prof .certifications li span	{
		position: static;
		top: auto;
		transform: none;
	}

}

/*
* Message Page Style メッセージページスタイル
*/
.message .container .ceo {
	margin-top: 100px;
}
.message .container .ceo .meta {
	position: relative;
}
.message .container .ceo .meta .photo {
	width: 55%;
	padding: 0 2.5%;
}
.message .container .ceo .meta .txt {
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	left: 55%;
}
.message .container .ceo .meta .txt .position {
	font-weight: bolder;
	letter-spacing: 1px;
}
.message .container .ceo .meta .txt h2 {
	font-size: 3.5rem;
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	letter-spacing: 2px;
	margin-top: 5px;
}
.message .container .ceo .meta .txt h2 ruby {
	display: block;
	font-size: 1.7rem;
	letter-spacing: 4px;
	margin-top: 15px;
}
.message .container .ceo .message_detail {
	margin-top: 75px;
}
.message .container .ceo .sign {
	margin-top: 0px;
	text-align: right;
}
@media screen and (max-width: 520px) {/* 479px以下用（スマートフォン用）の記述 */
	.message .container .ceo .meta .photo {
		width: 70%;
		padding: 0;
		margin: 0 auto;
	}
	.message .container .ceo .meta .txt {
		width: 100%;
		margin: 25px auto 0;
		position: relative;
		top: auto;
		-webkit-transform: translateY(0);
		-ms-transform: translateY(0);
		transform: translateY(0);
		left: auto;
		text-align: center;
	}
	.message .container .ceo .sign svg{
		width: 40%;
	}
}

/*
* Recruit Page Style リクルートページスタイル
*/
.webp .recruit .fv .thumb {
	background: url('../img/recruit/recruit_main.png.webp') center center/cover no-repeat;
}
.no-webp .recruit .fv .thumb {
	background: url('../img/recruit/recruit_main.png') center center/cover no-repeat;
}
.recruit .container .initiatives{
	margin-top: 100px;
}
.recruit .container .initiatives ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-top: 75px;
}
.recruit .container .initiatives ul li {
	width: 46%;
}
.recruit .container .initiatives ul li img {
	display: block;
	width: auto;
	width: 40%;
	margin: 0 auto;
}
.recruit .container .initiatives ul li h3 {
	font-size: 1.28rem;
	text-align: center;
	margin-top: 15px;
}
.recruit .container .initiatives ul li p {
	margin-top: 20px;
}
.recruit .container .recruit_info {
	margin-top: 100px;
}
.recruit .container .recruit_info table {
	margin-top: 50px;
	width: 100%;
}
.recruit .container .recruit_info table tr {
	border-top: 1px #ccc solid;
}
.recruit .container .recruit_info table tr:last-of-type {
	border-bottom: 1px #ccc solid;
}
.recruit .container .recruit_info table th,
.recruit .container .recruit_info table td {
	padding: 20px 0;
	letter-spacing: 1px;
}
.recruit .container .recruit_info table th {
	width: 18.5%;
	text-align: left;
	letter-spacing: 2px !important;
}
.recruit .container .recruit_info table td ul li,
.recruit .container .recruit_info table td dl dt,
.recruit .container .recruit_info table td dl dd {
	margin-bottom: 15px;
	line-height: 1.6;
}
.recruit .container .recruit_info table td dl dt {
	font-size: 1.0rem;
	margin-bottom: 0;
	padding-bottom: 0;
}
.recruit .container .recruit_info table td ul li:last-of-type {
	margin-bottom: 0;
}
.recruit .container .recruit_info .btn {
	margin: 75px auto 0;
}
.recruit .container .recruit_info .wantedly .banner {
	margin-top: 20px;
	display: block;
	max-width: 180px;
	color: #666;
}
.recruit .container .recruit_info .wantedly .banner img {
	border: 1px #ccc solid;
}
.recruit .container .recruit_info .wantedly .banner span {
	display: inline-block;
}
.recruit .container .recruit_info .wantedly iframe {
	display: block;
	margin: 30px auto 0;
	max-width: 500px;
	width: 100%;
}
.recruit .container .banners{
	margin-top: 100px;
}
.recruit .container .banners .banner:not(:first-child) {
	margin-top: 60px;
}
@media screen and (max-width: 520px) {/* 479px以下用（スマートフォン用）の記述 */
	.recruit .container .initiatives ul li img {
		display: block;
		width: auto;
		width: 70%;
		margin: 0 auto;
	}
	.recruit .container .recruit_info table th {
		width: 120px;
	}
	.recruit .container .recruit_info .wantedly .banner {
		width: 120px;
	}
}


/*
* Product Page Style
*/
.product .container .vision {
	margin-top: 100px;
}
.product .container .vision ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between
}
.product .container .vision ul li {
	width: 28%;
}
.product .container .vision ul li img {
	display: block;
	width: auto;
	height: 90px;
	margin: 45px auto 0;
}
.product .container .vision ul li p {
	margin-top: 35px;
}
.product .container .vision .product_image {
	width: 100%;
}
.product .container .vision .product_image img {
	display: block;
	height : auto;
}
.product .container .vision .product_image.photo {
	margin-bottom: 2em;
	height : calc(750px * .4) ;
	overflow: hidden;
}
.product .container .vision .product_image.screen {
	margin-top: 2em;
}


@media screen and (max-width: 520px) {/* 479px以下用（スマートフォン用）の記述 */
	.product .container .vision {
		margin-top: 50px;
	}
	.product .container .vision ul li {
		width: 100%;
		text-align: center;
	}
	.product .container .vision ul li img {
		height: 50px;
	}
	.product .container .vision ul li p {
		width: 85%;
		margin: 35px auto 0;
	}
	.product .container .vision .product_image.photo {
		height : auto;
	}
}



/*
* Privacy Page Style プライバシーポリシースタイル
*/
.privacy .fv .txt_box {
	padding: 0 !important;
}
.privacy .container {
	margin-top: 100px;
	margin-bottom: 100px;
}
.privacy h2,
.privacy p,
.privacy ul {
	margin-top: 25px;
}
.privacy h2 {
	text-align: center;
}
.privacy h3 {
	margin-top: 50px;
}
.privacy ul {
	padding-left: 20px;
}
.privacy ul li {
	padding: 10px 0;
	line-height: 1.5;
	list-style: disc;
}
.privacy ul:nth-of-type(4),
.privacy ul:last-of-type {
	padding-left: 0;
}
.privacy ul:nth-of-type(4) li,
.privacy ul:last-of-type li {
	padding: 2.5px 0;
	list-style: none;
}
.privacy ul li a {
	color: #000;
}
.privacy ul li a:hover,
.privacy ul li a:active,
.privacy ul li a:focus {
	text-decoration: underline;
}

/*
* security Style 情報セキュリティ基本方針スタイル
*/
.security .fv .txt_box {
	padding: 0 !important;
}
.security .container {
	margin-top: 100px;
	margin-bottom: 100px;
}
.security h2,
.security h3,
.security p,
.security ol,
.security ul {
	margin-top: 25px;
}
.security h2 {
	text-align: center;
}
.security ol {
	padding-left: 20px;
}
.security ol li {
	padding: 10px 0;
	line-height: 1.5;
	list-style: decimal;
}
.security ul li {
	line-height: 1.5;
}
.security .iso {
	margin-top: 25px;
}
.security .iso img {
	width: 240px;
	height: auto;
	margin-right: 25px;
	float: left;
}
.security dl {
	width: calc(100% - 274px);
	float: right;
	line-height: 1.5;
}
.security dl dt,
.security dl dd {
	line-height: 1.6rem;
	padding-bottom: 0.5rem;
}
.security dl dt {
	width: 8.5em;
	clear: left;
	float: left;
	font-weight: bold;
}
.security dl dt::before {
	content: '■';
	padding-left: 0.2rem
}
.security dl dd {
	padding-left: 9em;
}
@media screen and (max-width: 768px) {
	.security .iso img {
		display: block;
		width: 80%;
		max-width: 240px;
		height: auto;
		margin: 0 auto;
		float: none
	}
	.security dl {
		margin-top: 25px;
		width: 90%;
		float: none;
	}
}



/*
* Contact Page Style コンタクトページスタイル
*/
.contact .container .contact_form {
	margin-top: 100px;
}

.contact .container .contact_form .error li {
	font-weight: bold;
	color: red;
	line-height: 2em;
}

.contact .container .contact_form table th,
.contact .container .contact_form table td {
	border: 0px;
	margin: 0;
	padding: 15px 0;
	text-align: left;
}
.contact .container .contact_form table th {
	width: 160px;
}
.contact .container .contact_form table tr:last-child th {
	vertical-align: top;
	padding-top: 30px;
}
.contact .container .contact_form table th span {
	position: relative;
}
.contact .container .contact_form table th span::after {
	content: "";
	width: 7.5px;
	height: 7.5px;
	position: absolute;
	top: -7.5px;
	right: -7.5px;
	background-color: red;
	border-radius: 100%;
}
.contact .container .contact_form table td {
	width: 640px;
}
.contact .container .contact_form input,
.contact .container .contact_form textarea,
.contact .container .contact_form select {
	padding: 10px 20px;
	border-radius: 0px;
	border: 0px;
	font-size: 1rem;
	margin: 0;
}
.contact .container .contact_form input:focus,
.contact .container .contact_form textarea:focus,
.contact .container .contact_form select:focus {
	outline: 0;
}
.contact .container .contact_form input,
.contact .container .contact_form textarea {
	width: 100%;
	background-color: #f5f5f5;
}
.contact .container .contact_form textarea {
	height: 300px;
}
.webp .contact .container .contact_form select {
	background: url('../img/share/select_arrow.png.webp') 90% center/9px no-repeat;
}
.no-webp .contact .container .contact_form select {
	background: url('../img/share/select_arrow.png') 90% center/9px no-repeat;
}
.contact .container .contact_form select {
	background-color: #f5f5f5;
	appearance: none;
	-webkit-appearance: none;
	padding-right: 50px;
}
.contact .container .contact_form input[type=submit] {
	display: block;
	width: 200px;
	font-size: .9rem;
	letter-spacing: 2px;
	text-align: center;
	padding: 10px 20px !important;
	margin: 50px auto 0 !important;
	color: #000;
	background-color: transparent !important;
	border: 1px solid #000;
	transition:ALL 0.3s ease;
	-webkit-transition:ALL 0.3s ease;
	-moz-transition:ALL 0.3s ease;
	-o-transition:ALL 0.3s ease;
}
.contact .container .contact_form input[type=submit]:hover,
.contact .container .contact_form input[type=submit]:active,
.contact .container .contact_form input[type=submit]:focus {
	color: #fff;
	background-color: #000 !important;
}
.contact .container .contact_form .btn {
	margin: 35px auto 0;
	text-align: center;
}
.contact .container .contact_form .privacy_check {
	display: block;
	margin-top: 30px;
}

.contact .container .contact_form input[type=checkbox] { display: none; } /* to hide the checkbox itself */
.contact .container .contact_form input[type=checkbox] + label:before {
  font-family: FontAwesome;
	display: inline-block;
	width: auto;
	transform: scale(1.8);
	border: #999;
	content: "\f096"; /* unchecked icon */
	letter-spacing: 4px; /* space between checkbox and label */
}

.contact .container .contact_form input[type=checkbox]:checked + label:before {
	content: "\f046"; /* checked icon */
	letter-spacing: 2px; /* allow space for check mark */
}

@media screen and (max-width: 520px) {/* 479px以下用（スマートフォン用）の記述 */
	.contact .container .contact_form {
		border-bottom: 1px solid #808080;
		padding-bottom: 65px;
	}
	.contact .container .contact_form table {
		width: 100%;
	}
	.contact .container .contact_form table th,
	.contact .container .contact_form table td {
		display: block;
		width: 100%;
	}
	.contact .container .contact_form table th {
		padding: 0;
	}
}

/*
* Common Contents 共通パーツ
*/
/*>>>>>---------Contact*/
.webp .contact_share {
	background: url('../img/share/contact_share_img.png.webp') center center/cover no-repeat;
}
.no-webp .contact_share {
	background: url('../img/share/contact_share_img.png') center center/cover no-repeat;
}
.contact_share {
	background-color: #808080;
	padding: 150px 0;
	margin-top: 250px;
}
.contact_share .catch {
	position: absolute;
	margin: auto;
	top: -255px;
	left: 0;
	right: 0;
	text-align: center;
}
.contact_share .catch::before {
	content: "";
	width: 1px;
	height: 75px;
	background-color: #000;
	position: absolute;
	margin: auto;
	bottom: -105px;
	left: 0;
	right: 0;
}
.contact_share .txt {
	font-size: 1.5rem;
	font-weight: 600;
	letter-spacing: 2px;
	line-height: 1.5;
	color: #fff;
	text-align: center;
}
.contact_share .btn {
	color: #fff;
	border: 1px solid #fff;
	margin: 35px auto 0;
	transition:ALL 0.3s ease;
	-webkit-transition:ALL 0.3s ease;
	-moz-transition:ALL 0.3s ease;
	-o-transition:ALL 0.3s ease;
}
.contact_share .btn:hover,
.contact_share .btn:focus,
.contact_share .btn:active {
	background-color: #fff;
	color: #000;
}
.contact_form span.alert {
    color: #990000;
    display: block;
    margin-top: 0.5rem;
    margin-left: 0.5rem;
}
@media screen and (max-width: 520px) {/* 479px以下用（スマートフォン用）の記述 */
	.contact_share {
		padding: 75px 0;
		margin-top: 175px;
	}
	.contact_share .catch {
		top: -175px;
	}
	.contact_share .txt {
		font-size: 1rem;
	}
	.contact_share .txt span {
		display: block;
	}
}

/*>>>>>---------Office*/
.office_share {
	margin-top: 100px;
}
.office_share .catch {
	position: absolute;
	top: 0;
	left: 0;
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
}
.office_share .catch::before {
	content: "";
	width: 380px;
	height: 1px;
	background-color: #000;
	position: absolute;
	top: 65px;
	left: 190%;
}
.office_share .office_meta {
	position: absolute;
	top: 150px;
	left: 130px;
}
.office_share .office_meta h3 {
	text-align: center;
	font-size: 1.1rem;
	letter-spacing: 2px;
	padding-bottom: 20px;
	position: relative;
}
.office_share .office_meta h3::before {
	content: "";
	position: absolute;
	width: 50px;
	height: 2px;
	background-color: #000;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
}
.office_share .office_meta p {
	text-align: center;
	letter-spacing: 2px;
	margin-top: 20px;
}
.office_share .office_meta .btn {
	margin: 35px auto 0;
}
.office_share .office_meta .btn:last-of-type {
	margin: 15px auto 0;
}
.office_share .g_map {
	width: 65%;
	background-color: #f5f5f5;
	margin: 0 0 0 auto;
	position: relative;
}
.office_share .g_map #gmap {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

.office_share .g_map #gmap2 {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

@media screen and (max-width: 520px) {/* 479px以下用（スマートフォン用）の記述 */
	.office_share {
		margin-top: 250px;
	}
	.office_share .catch {
		position: absolute;
		margin: auto;
		top: -175px;
		left: 0;
		right: 0;
		text-align: center;
		-webkit-writing-mode: horizontal-tb;
		-ms-writing-mode: lr-tb;
		writing-mode: horizontal-tb;
	}
	.office_share .catch::before {
		content: "";
		width: 1px;
		height: 75px;
		background-color: #000;
		position: absolute;
		margin: auto;
		bottom: -105px;
		left: 0;
		right: 0;
	}
	.office_share .office_meta {
		position: relative;
		top: auto;
		left: auto;
	}
	.office_share .g_map {
		width: 100%;
		margin: 35px auto 0;
	}
}

/*>>>>>---------ボタンなどその他要素*/
.g_font_anton {
	font-family: 'Impact', sans-serif;
	letter-spacing: 6px;
}
.en_ttl {
	font-size: 2.85rem;
}
.catch {
	line-height: 1;
}
.btn {
	display: block;
	width: 200px;
	font-size: .9rem;
	letter-spacing: 2px;
	text-align: center;
	padding: 10px 20px;
	overflow: hidden;
}
.btn_black_white {
	color: #000;
	border: 1px solid #000;
	transition:ALL 0.3s ease;
	-webkit-transition:ALL 0.3s ease;
	-moz-transition:ALL 0.3s ease;
	-o-transition:ALL 0.3s ease;
	position: relative;
	z-index: 2;
}
.btn_black_white:hover,
.btn_black_white:focus,
.btn_black_white:active {
	background-color: #000;
	color: #fff;
}
.honey_boj {
	width: 250px;
	position: absolute;
	bottom: 0;
	right: 0;
	z-index: 10;
	opacity: .5;
	overflow: hidden;
}
.honey_boj img {
	position: relative;
	right: -75px;
}
@media screen and (max-width: 520px) {/* 479px以下用（スマートフォン用）の記述 */
	.g_font_anton {
		font-weight: 600;
		letter-spacing: 3px;
	}
	.en_ttl {
		font-size: 2.15rem;
	}
	.honey_boj {
		display: none;
	}
	.overray {
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		background-color: rgba(255, 255, 255, .7);
		z-index: 9998;
	}
	.overray.open {
		display: block;
	}
}