@charset "utf-8";
/* ------------------------------------------------------------ common */
body {
	position: relative;
	min-width: 1160px;
	height: 100%;
	font-family: "NotoSansCJKjp-Regular", "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "メイリオ", sans-serif;	
	opacity: 0;
	transition: 1s;
}

#wrapper {
	transition: 0s;
	overflow: hidden;
}

#wrapper.fixed {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
}

.inner {
	width: 1100px;
	margin: 0 auto;
}

.SP {
	display: none;
}

.title {
	font-size: 20px;
	text-align: center;
	letter-spacing: 4px;
}

.title span {
	display: block;
	font-size: 60px;
	font-family: 'Gotham-Medium';
	line-height: 0.6;
	color: #fe0070;
}

/* ------------------------------------------------------------ header */
header {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 10;
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	min-width: 1160px;
	padding: 40px;
	box-sizing: border-box;
	transition: 0.5s;
}

header.isOver {
	background: #fff;
	padding: 20px 40px;
	box-shadow: 10px 10px 20px rgba(0,0,0,0.1); 
	transition: 0.5s;
}
	
	header .h_left .h_logo a {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		font-size: 30px;
		color: #fff;
		letter-spacing: 15px;
	}
	
	header.isOver .h_left .h_logo a {
		color: #000;
	}
	
	header .h_left .h_logo a span {
		margin: 0 0 0 20px;
	}
	
	header .h_right {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	header .h_right .h_nav {
		font-size: 0;
		margin: 0 40px 0 0;
	}
	
	header .h_right .h_nav a {
		display: inline-block;
		margin: 0 25px 0 0;
		font-size: 14px;
		letter-spacing: 1px;
		text-shadow: 
		rgba(255,255,255,1) 1px 1px 12px,
		rgba(255,255,255,1) -1px 1px 12px,
		rgba(255,255,255,1) 1px -1px 12px, 
		rgba(255,255,255,1) -1px -1px 12px;
	}
	
	header .h_right .h_nav a:last-of-type {
		margin: 0;
	}
	
	header .h_right .h_btn a {
		display: inline-block;
		padding: 20px 40px 20px 65px;
		background: url(../images/mail.svg) no-repeat 35px center #fe0070;
		font-size: 14px;
		font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "メイリオ", sans-serif;
		color: #fff;
	}


/* ------------------------------------------------------------ fv */
#fv {
	position: relative;
	z-index: 1;
	background: url(../images/fv_img_01.jpg) no-repeat center center/cover;
}

	#fv .max_wrap {
		position: relative;
		max-width: 1300px;
		margin: 0 auto;
		padding: 240px 50px 230px;
	}
	
	#fv .max_wrap h1 {
		margin: 0 auto 65px;
		font-size: 60px;
		font-family: shippori-mincho, sans-serif;
		font-weight: 400;
		font-style: normal;
		line-height: 1.5;
		color: #fff;
		letter-spacing: 6px;
	}
	
	#fv .max_wrap h1 span {
		display: block;
		margin: 20px 0 0;
		font-size: 30px;
		font-family: 'Gotham-Light';
		letter-spacing: 6px;
		color: #fe0070;
	}
	
	#fv .max_wrap ul li {
		float: left;
		margin: 0 20px 0 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 1ch;
		width: 100px;
		height: 100px;
		border: solid 1px #fff;
		border-radius: 50%;
		font-size: 14px;
		color: #fff;
		text-align: center;
	}
	
	#fv .max_wrap ul li span img {
		display: block;
		margin: 0 auto 10px;
	}
	
	#fv .max_wrap .scroll {
		position: absolute;
		right: 0;
		bottom: 0;
	}
	
	#fv .img {
		position: absolute;
		right: 50%;
		top: 145px;
		z-index: -1;
		margin: 0 -700px 0 0;
	}

/* ------------------------------------------------------------ who */
#who {
	position: relative;
	padding: 140px 0 290px;
}

	#who::before {
		position: absolute;
		content: "";
		right: 0;
		top: 180px;
		z-index: -1;
		width: 90%;
		height: 350px;
		background: #f6f6f6;
	}
	
	#who .max_wrap {
		max-width: 1220px;
		margin: 0 auto;
		padding: 0 50px;
		box-sizing: border-box;
	}
	
	#who .max_wrap h2 {
		
	}
	
	#who .max_wrap h2 span {
		display: block;
		margin: 20px 0 0 15px;
		font-size: 18px;
		letter-spacing: 3px;
	}
	
	#who .max_wrap .inner {
		position: relative;
		width: 980px;
		padding: 95px 0 0;
	}
	
	#who .max_wrap h3 {
		font-size: 32px;
		font-family: shippori-mincho, sans-serif;
		font-weight: 400;
		font-style: normal;
		line-height: 2;
		writing-mode: vertical-rl; 
		-webkit-writing-mode: vertical-rl; 
		-ms-writing-mode: tb-rl;
	}
	
	#who .max_wrap .inner img {
		position: absolute;
		top: 0;
		right: 50%;
		margin: 0 -690px 0 0;
	}

/* ------------------------------------------------------------ service */
#service {
}

	#service h2 {
		margin: 0 auto 40px;
	}
	
	#service .service {
	}
	
	#service .service article {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #f6f6f6;
		width: 100%;
	}
	
	#service .service article .img {
		width: 50%;
		box-sizing: border-box;
	}
	
	#service .service article:nth-of-type(odd) .img {
		order: 1;
	}
	
	#service .service article:nth-of-type(even) .img {
		order: 2;
	}
	
	#service .service article .img img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	
	#service .service article .textbox {
		width: 50%;
		box-sizing: border-box;
		background: #f6f6f6;
	}
	
	#service .service article:nth-of-type(odd) .textbox {
		padding: 0 50px 0 90px;
		order: 2;
	}
	
	#service .service article:nth-of-type(even) .textbox {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		padding: 0 90px 0 50px;
		order: 1;
	}
	
	
	#service .service article .textbox h3 {
		position: relative;
		margin: 0 0 24px;
		padding: 0 0 14px;
		font-size: 36px;
		font-family: 'NotoSansCJKjp-Medium';
		letter-spacing: 6px;
	}
	
	#service .service article .textbox h3::before {
		position: absolute; 
		content: ""; 
		left: 0;
		bottom: 0;
		width: 60px; 
		height: 3px;
		margin: 0 auto;
		background: #fe0070;
	}
	
	#service .service article .textbox h3::after {
		position: absolute; 
		content: ""; 
		left: 20px;
		bottom: 0;
		width: 20px; 
		height: 3px;
		margin: 0 auto;
		background: #000;
	}
	
	#service .service article .textbox h3 span {
		display: block;
		margin: 10px 0 0;
		font-size: 20px;
		font-family: 'Gotham-Light';
		letter-spacing: 4px;
	}
	
	#service .service article .textbox p {
		font-size: 16px;
		line-height: 1.9;
	}
	

/* ------------------------------------------------------------ works */
#works {
	padding: 140px 0 130px;
}
	
	#works h2 {
		margin: 0 auto 35px;
	}
	
	#works .intro {
		margin: 0 0 40px;
		font-size: 16px;
		line-height: 1.5;
		text-align: center;
	}
	
	#works ul li {
		float: left;
		width: 215px;
		margin: 0 0 40px 80px;
	}
	
	#works ul li:nth-child(4n+1) {
		clear: both;
		margin: 0 0 40px;
	}
	
	#works ul li .img {
		margin: 0 0 10px;
	}
	
	#works ul li .img img {
		width: 100%;
		height: auto;
	}
	
	#works ul li p {
		border-top: solid 1px #b2b2b2;
		border-bottom: solid 1px #b2b2b2;
		margin: 0 0 15px;
		padding: 8px 0;
		font-size: 14px;
		text-align: center;
	}
	
	#works ul li h3 {
		font-size: 18px;
		text-align: center;
	}

/* ------------------------------------------------------------ message */
#message {
	position: relative;
	background: url(../images/bg_02.png) no-repeat 35% 300px;
	z-index: 1;
	padding: 0 0 250px;
}

	#message::before {
		position: absolute;
		content: "";
		left: 0;
		top: 45px;
		z-index: -1;
		width: 90%;
		height: 350px;
		background: url(../images/bg_01.jpg) no-repeat center center/cover;
	}
	
	#message .max_wrap {
		position: relative;
		max-width: 1220px;
		margin: 0 auto;
	}
	
	#message .max_wrap .ceo {
		position: absolute;
		left: 0;
		top: 65px;
	}
	
	#message .max_wrap .textbox {
		width: 640px;
		margin: 0 0 0 auto;
	}
	
	#message .max_wrap .textbox h2 {
		margin: 0 0 60px;
	}
	
	#message .max_wrap .textbox h2 span {
		display: block;
		margin: 15px 0 0;
		font-size: 20px;
		color: #fff;
		letter-spacing: 4px;
	}
	
	#message .max_wrap .textbox h3 {
		margin: 0 0 130px;
		font-size: 32px;
		font-family: shippori-mincho, sans-serif;
		font-weight: 400;
		font-style: normal;
		letter-spacing: 10px;
		color: #fff;
		line-height: 2;
	}
	
	#message .max_wrap .textbox p {
		width: 450px;
		font-size: 16px;
		line-height: 2;
	}

/* ------------------------------------------------------------ company */
#company {
	background: #eee;
	padding: 140px 0 100px;
}

	#company h2 {
		margin: 0 0 35px;
	}
	
	#company .img {
		width: 345px;
		margin: 0 auto 40px;
	}
	
	#company .img img {
		width: 100%;
		height: auto;
	}
	
	#company .outline {
		width: 880px;
		margin: 0 auto;
		padding: 0 35px;
		box-sizing: border-box;
	}
	
	#company .outline h3 {
		margin: 0 0 15px;
		font-size: 16px;
		letter-spacing: 2px;
	} 
	
	#company .outline h3 span {
		margin: 0 20px 0 0;
		font-size: 36px;
		font-family: 'Gotham-Medium';
		color: #fe0070;
	} 
	
	#company .outline dl {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		margin: 0 0 60px;
	}
	
	#company .outline dl dt {
		width: 140px;
		margin: 0 0 15px;
		padding: 5px 25px 5px 0;
		box-sizing: border-box;
		line-height: 1.5;
	}
	
	#company .outline dl dd {
		width: calc(100% - 140px);
		border-left: solid 1px #b2b2b2;
		margin: 0 0 15px;
		padding: 5px 0 5px 25px;
		box-sizing: border-box;
		line-height: 1.5;
	}
	
	#company .outline .access {
		
	}
	
	#company .outline .access article {
		float: left;
		width: 240px;
		margin: 0 0 0 45px;
	}
	
	#company .outline .access article:nth-of-type(3n+1) {
		clear: both;
		margin: 0;
	}
	
	#company .outline .access article .map {
		width: 100%;
		margin: 0 0 15px;
	}
	
	#company .outline .access article .map iframe {
		width: 240px;
		height: 160px;
	}
	
	#company .outline .access article h4 {
		border-bottom: solid 1px #b2b2b2;
		margin: 0 0 15px;
		padding: 0 0 5px;
		font-size: 18px;
	}
	
	#company .outline .access article .tel {
		font-size: 16px;
		margin: 0 0 5px;
	}
	
	#company .outline .access article .address {
		font-size: 14px;
		line-height: 2;
		margin: 0 0 15px;
		padding: 0 0 0 3em;
	}
	
	#company .outline .access article .address.two {
		margin: 0 0 40px;
	}
	
	#company .outline .access article .link {
	}
	
	#company .outline .access article .link a {
		display: block;
		padding: 12px;
		background: #fe0070;
		font-size: 14px;
		font-family: 'Gotham-Light';
		color: #fff;
		text-align: center;
	}

/* ------------------------------------------------------------ contact */
#contact {
	position: relative;
	padding: 130px 0 0;
}

	#contact::before {
		position: absolute; 
		content: ""; 
		left: 0;
		top: 0;
		z-index: -1;
		width: 100%; 
		height: 600px;
		margin: 0 auto;
		background: url(../images/bg_03.jpg) no-repeat center center/cover;
	}
	
	#contact h3 {
		font-size: 36px;
		font-family: shippori-mincho, sans-serif;
		font-weight: 400;
		font-style: normal;
		text-align: center;
		line-height: 1.7;
		color: #fff;
		margin: 0 auto 85px;
	}
	
	#contact .whitebox {
		background: #fff;
		padding: 110px;
	}
	
	#contact .whitebox h2 {
		margin: 0 auto 30px;
	}
	
	#contact .whitebox .intro {
		margin: 0 auto 30px;
		font-size: 16px;
		text-align: center;
		line-height: 1.9;
	}
	
	#contact .whitebox .caution {
		margin: 0 auto 45px;
		text-align: center;
	}
	
	#contact .whitebox .caution span {
		display: inline-block;
		padding: 0 0 2px;
		border-bottom: solid 1px #b2b2b2;
		font-size: 16px;
	}
	
	#contact .whitebox .caution span strong {
		color: #fe0070;
	}
	
	
	#contact .whitebox table {
		width: 100%;
	}
	
	#contact .whitebox table th {
		width: 190px;
		padding: 0 0 20px;
		box-sizing: border-box;
		text-align: left;
	}
	
	#contact .whitebox table .top {
		vertical-align: top;
		padding: 20px 0;
	}
	
	#contact .whitebox table th span {
		margin: 0 0 0 0.3em;
		color: #fe0070;
	}
	
	#contact .whitebox table td {
		width: calc(100% - 190px);
		padding: 0 0 20px;
		box-sizing: border-box;
	}
	
	#contact .whitebox table td input[type="text"],
	#contact .whitebox table td textarea {
		width: 100%;
		background: #eee;
		padding: 15px;
		border: none;
		box-sizing: border-box;
	}
	
	#contact .whitebox table .post_number input[type="text"]:first-of-type {
		width: 100px;
		margin: 0 10px 0 0;
	}
	
	#contact .whitebox table .post_number input[type="text"]:last-of-type {
		width: 200px;
		margin: 0 0 0 10px;
	}
	
	#contact .whitebox table td ::placeholder {
		color: #999;
		opacity: 1;
	}
	
	#contact .whitebox .agree {
		margin: 0 0 35px;
		text-align: center;
	}
	
	#contact .whitebox .agree p {
		margin: 0 0 20px;
		text-align: center;
	}
	
	#contact .whitebox .agree p strong {
		display: block;
		margin: 0 0 5px;
		font-size: 16px;
		text-align: center;
	}
	
	#contact .whitebox .agree p strong span {
		margin: 0 0 0 0.3em;
		color: #fe0070;
	}
	
	#contact .whitebox .agree p a {
		display: inline-block;
		border-bottom: solid 1px #0555c1;
		padding: 0 0 3px;
		font-size: 12px;
		color: #0555c1;
	}
	
	#contact .whitebox .agree label {
		display: inline-block;
		font-size: 14px;
	}
	
	#contact .whitebox .agree label input[type="checkbox"] {
		margin: 0 10px 0 0;
	}
	
	#contact .whitebox .confirm_btn {
		text-align: center;
	}
	
	#contact .whitebox .confirm_btn input[type="submit"] {
		display: inline-block;
		min-width: 300px;
		padding: 25px;
		box-sizing: border-box;
		background: #000;
		font-size: 16px;
		text-align: center;
		color: #fff;
	}

/* ------------------------------------------------------------ エラー、確認の共通 */
.note {
	width: 780px;
	margin: 0 auto;
	padding: 70px 0;
}

	.note h2 {
		margin: 0 auto 25px;
		font-size: 32px;
		font-family: 'NotoSansCJKjp-Medium';
		text-align: center;
	}
	
	.note .caution {
		margin: 0 auto 35px;
		padding: 15px;
		border: solid 1px #000;
		text-align: center;
		line-height: 2;
	}
	
	.note .btns {
		display: flex;
		justify-content: center;
	}
	
	.note .back_btn {
		margin: 0 10px;
	}
	
	.note .back_btn a {
		display: inline-block;
		width: 300px;
		height: 60px;
		line-height: 60px;
		background: #e5e5e5;
		text-align: center;
	}
	
	.note .forward_btn {
		margin: 0 10px;
	}
	
	.note .forward_btn input[type="submit"] {
		display: inline-block;
		width: 300px;
		height: 60px;
		line-height: 60px;
		background: #fe0070;
		color: #fff;
		text-align: center;
	}
	
/* ------------------------------------------------------------ エラー画面 */
#error .alert {
	margin: 0 auto 50px;
}

	#error .alert span {
		display: block;
		margin: 0 auto 15px;
		text-align: center;
	}
	
	#error .alert span:last-of-type {
		margin: 0 auto;
	}

/* ------------------------------------------------------------ 確認画面 */
#confirm table {
	width: 100%;
	margin: 0 auto 50px;
}

	#confirm table tr {
		border-bottom: solid 1px #e5e5e5;
	}
	
	#confirm table tr:last-of-type {
		border-bottom: none;
	}
	
	#confirm table th {
		width: 200px;
		padding: 15px 0;
		font-family: 'NotoSansCJKjp-Medium';
		text-align: left;
	}
	
	#confirm table td {
		padding: 15px 0;
	}

/* ------------------------------------------------------------ tel_mail */
#tel_mail {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: #f5f5f5;
	width: 880px;
	margin: 0 auto 120px;
	padding: 35px 20px;
	box-sizing: border-box;
}

	#tel_mail .tel {
		width: 485px;
		border-right: solid 2px #737373;
		padding: 0 45px;
		box-sizing: border-box;
	}
	
	#tel_mail .tel h3 {
		margin: 0 auto 20px;
		font-size: 16px;
		text-align: center;
	}
	
	#tel_mail .tel p {
		text-align: center;
	}
	
	#tel_mail .tel p a {
		display: inline-block;
		padding: 0 0 0 45px;
		background: url(../images/tel.svg) no-repeat left top;
		font-size: 52px;
		font-family: 'Gotham-Medium';
	}
	
	#tel_mail .tel small {
		display: block;
		margin: -15px 0 0;
		font-size: 16px;
		font-family: 'NotoSansCJKjp-Thin';
		text-align: center;
	}
	
	#tel_mail .mail {
		width: calc(100% - 485px);
		padding: 0 40px;
		box-sizing: border-box;
	}
	
	#tel_mail .mail .mail_btn {
		margin: 0 0 20px;
		text-align: center;
	}
	
	#tel_mail .mail .mail_btn a {
		display: block;
		width: 100%;
		padding: 15px;
		background: #fe0070;
		box-sizing: border-box;
		font-size: 16px;
		color: #fff;
		text-align: center;
	}
	
	#tel_mail .mail .fax {
		background: url(../images/fax.svg) no-repeat left top;
		padding: 6px 0 0 40px;
		font-size: 34px;
		font-family: 'Gotham-Medium';
		text-align: center;
	}


/* ------------------------------------------------------------ footer */
footer {
	background: #000;
	padding: 50px 0 30px;
}

	footer .f_logo {
		margin: 0 auto 40px;
		text-align: center;
	}
	
	footer .f_logo a {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	footer .f_logo a span {
		display: block;
		margin: 0 0 0 15px;
		font-size: 24px;
		font-family: 'NotoSansCJKjp-Medium';
		color: #fff;
		letter-spacing: 15px;
	}
	
	footer small {
		display: block;
		font-size: 14px;
		font-family: 'NotoSansCJKjp-Thin';
		color: #fff;
		text-align: center;
		letter-spacing: 2px;
	}







/* ------------------------------------------------------------ mobile ------------------------------------------------------------ */
@media only screen and (max-width: 640px) {
/* ------------------------------------------------------------ common */
body {
	min-width: 100%;
}

body.isHidden {
	overflow: hidden;
}
	
.inner {
	width: 90%;
}

.PC {
	display: none;
}

.SP {
	display: block;
}

.title {
	font-size: 14px;
	letter-spacing: 3px;
}

.title span {
	font-size: 40px;
}

html.android .title span {
	line-height: 1.2;
}

/* ------------------------------------------------------------ header */
header {
	min-width: inherit;
	padding: 10px 10px 10px 15px;
}

header.isOver {
	padding: 10px 10px 10px 15px;
}
	
	header .h_left .h_logo a {
		
		font-size: 20px;
		color: #fff;
		letter-spacing: 6px;
	}
	
	header .h_left .h_logo a img {
		width: 30px;
		height: auto;
	}
	
	header .h_left .h_logo a span {
		margin: 0 0 0 12px;
	}
	
	header .h_right {
	}
	
	header .h_right .h_btn {
		width: 40px;
		height: 40px;
		margin: 0 15px 0 0;
	}
	
	header .h_right .h_btn a {
		width: 40px;
		height: 40px;
		padding: 0;
		background: url(../images/mail.svg) no-repeat center center #fe0070;
	}
	
	header .h_right #sp_menubtn {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 1ch;
		width: 40px;
		height: 40px;
	}
	
	header .h_right #sp_menubtn span {
		position: relative;
		display: block;
		width: 25px;
		height: 2px;
		background: #fff;
	}
	
	header .h_right #sp_menubtn span::before,
	header .h_right #sp_menubtn span::after {
		position: absolute; 
		content: ""; 
		left: 0;
		right: 0;
		width: 25px; 
		height: 2px;
		margin: 0 auto;
		background: #fff;
	}
	
	header .h_right #sp_menubtn span::before {
		top: -8px;
	}
	
	header .h_right #sp_menubtn span::after {
		bottom: -8px;
	}
	
	header.isOver .h_right #sp_menubtn span {
		background: #000;
	}
	
	header.isOver .h_right #sp_menubtn span::before,
	header.isOver .h_right #sp_menubtn span::after  {
		background: #000;
	}
	
	header #sp_menu {
		position: fixed;
		left: -100%;
		top: 0;
		z-index: 100;
		width: 100%;
		height: 100vh;
		height: calc(var(--vh, 1vh) * 100);
		background: #fff;
		transition: 0.3s;
	}
	
	header #sp_menu.isOpen {
		left: 0;
		transition: 0.3s;
	}
	
	header #sp_menu .menu_close {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 1ch;
		position: absolute;
		right: 10px;
		top: 10px;
		width: 40px;
		height: 40px;
	}
	
	header #sp_menu .menu_close span {
		position: relative;
		display: inline-block;
		vertical-align: middle;
		color: #333;
		line-height: 1;
		width: 30px;
		height: 2px;
		background: currentColor;
		border-radius: 0.1em;
		transform: rotate(45deg);
	}
	
	header #sp_menu .menu_close span::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: inherit;
		border-radius: inherit;
		transform: rotate(90deg);
	}

	
	header #sp_menu .h_sp_logo {
		padding: 30px 0;
		text-align: center;
	}
	
	header #sp_menu .h_sp_logo a {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 150px;
		margin: 0 auto;
	}
	
	header #sp_menu .h_sp_logo span {
		display: block;
		margin: 0 0 0 12px;
		font-size: 20px;
		letter-spacing: 6px;
	}
	
	header #sp_menu .h_sp_nav a {
		position: relative;
		display: block;
		padding: 20px 15px;
		border-bottom: solid 1px #e5e5e5;
	}
	
	header #sp_menu .h_sp_nav a:first-of-type {
		border-top: solid 1px #e5e5e5;
	}
	
	header #sp_menu .h_sp_nav a::before {
		position: absolute; 
		content: ''; 
		top: 0; 
		bottom: 0; 
		margin: auto 0; 
		right: 20px; 
		display: block; 
		width: 8px; 
		height: 8px; 
		border-top: solid 1px #000; 
		border-right: solid 1px #000; 
		-webkit-transform: rotate(45deg); 
		transform: rotate(45deg); 
	}


/* ------------------------------------------------------------ fv */
#fv {
	position: relative;
	z-index: 1;
	background: url(../images/fv_sp.jpg) no-repeat center center/cover;
}

	#fv .max_wrap {
		position: relative;
		max-width: 100%;
		margin: 0 auto;
		padding: 100px 5% 60px;
	}
	
	#fv .max_wrap h1 {
		margin: 0 auto 40px;
		font-size: 6.5vw;
		line-height: 1.7;
		letter-spacing: 3px;
	}
	
	#fv .max_wrap h1 span {
		display: block;
		margin: 15px 0 0;
		font-size: 4vw;
		letter-spacing: 3px;
	}
	
	#fv .max_wrap ul {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		max-width: 373px;
		margin: 0 auto;
	}
	
	#fv .max_wrap ul li {
		float: none;
		margin: 0 5px 10px;
		width: 90px;
		height: 90px;
		font-size: 13px;
		background: rgba(255,255,255,0.15);
	}
	
	#fv .max_wrap ul li span img {
		display: block;
		margin: 0 auto 10px;
	}
	
	#fv .max_wrap .scroll {
		position: absolute;
		right: 10px;
		bottom: 15px;
	}
	
	#fv .img {
		display: none;
	}

/* ------------------------------------------------------------ who */
#who {
	position: relative;
	padding: 70px 0 100px;
}

	#who::before {
		top: 90px;
		z-index: -1;
		width: 95%;
		height: 40%;
	}
	
	#who .max_wrap {
		max-width: 80%;
		margin: 0 auto;
		padding: 0;
		box-sizing: border-box;
	}
	
	#who .max_wrap h2 {
	}
	
	#who .max_wrap h2 img {
	}
	
	#who .max_wrap h2 span {
		display: block;
		margin: 20px 0 0 10px;
		font-size: 3vw;
	}
	
	#who .max_wrap .inner {
		position: static;
		width: 100%;
		padding: 30px 0 0;
	}
	
	#who .max_wrap h3 {
		font-size: 4.8vw;
		line-height: 2;
		writing-mode: inherit;
		margin: 0 0 25px;
	}
	
	#who .max_wrap .inner img {
		position: static;
		margin: 0 auto;
		width: 100%;
		height: auto;
	}

/* ------------------------------------------------------------ service */
#service {
	
}

	#service h2 {
		margin: 0 auto 40px;
	}
	
	#service .service {
		width: 90%;
		margin: 0 auto;
	}
	
	#service .service article {
		display: block;
		margin: 0 auto 40px;
	}
	
	#service .service article .img {
		width: 100%;
	}

	#service .service article .img img {
		width: 100%;
		height: auto;
		object-fit: inherit;
	}
	
	#service .service article .textbox {
		width: 100%;
	}
	
	#service .service article:nth-of-type(odd) .textbox {
		padding: 25px;
	}
	
	#service .service article:nth-of-type(even) .textbox {
		display: block;
		padding: 25px;
	}
	
	
	#service .service article .textbox h3 {
		position: relative;
		margin: 0 0 20px;
		padding: 0 0 15px;
		font-size: 24px;
		letter-spacing: 3px;
	}
	
	#service .service article .textbox h3::before {
		width: 45px; 
		height: 3px;
	}
	
	#service .service article .textbox h3::after {
		left: 15px;
		width: 15px; 
		height: 3px;
	}
	
	#service .service article .textbox h3 span {
		margin: 10px 0 0;
		font-size: 12px;
		letter-spacing: 3px;
	}
	
	#service .service article .textbox p {
		font-size: 14px;
		line-height: 1.8;
	}
	

/* ------------------------------------------------------------ works */
#works {
	padding: 70px 0;
}
	
	#works h2 {
		margin: 0 auto 25px;
	}
	
	#works .intro {
		margin: 0 0 35px;
		font-size: 14px;
	}
	
	#works ul li {
		width: 48%;
		margin: 0 0 30px 4%;
	}
	
	#works ul li:nth-child(2n+1) {
		clear: both;
		margin: 0 0 30px;
	}
	
	#works ul li .img {
		margin: 0 0 10px;
	}
	
	#works ul li p {
		margin: 0 0 10px;
		padding: 4px 0;
		font-size: 12px;
	}
	
	#works ul li h3 {
		font-size: 14px;
		text-align: center;
	}

/* ------------------------------------------------------------ message */
#message {
	background: url(../images/bg_02.png) no-repeat -80px 180px;
	background-size: 300px;
	padding: 0 0 50px;
}

	#message::before {
		top: 25px;
		width: 95%;
		height: 200px;
	}
	
	#message .max_wrap {
		position: relative;
		max-width: 100%;
		margin: 0 auto;
	}
	
	#message .max_wrap .textbox {
		width: 100%;
		margin: 0 auto;
	}
	
	#message .max_wrap .textbox h2 {
		margin: 0 0 20px;
	}
	
	#message .max_wrap .textbox h2 img {
		width: 85%;
		height: auto;
	}
	
	#message .max_wrap .textbox h2 span {
		display: block;
		margin: 15px 0 0;
		font-size: 3vw;
		letter-spacing: 4px;
	}
	
	#message .max_wrap .ceo {
		position: static;
		display: block;
		width: 70%;
		height: auto;
		margin: 0 auto;
	}
	
	#message .max_wrap .textbox h3 {
		margin: 0 0 15px;
		font-size: 24px;
		line-height: 1.7;
		letter-spacing: 3px;
		color: #000;
	}
	
	#message .max_wrap .textbox p {
		width: 100%;
		font-size: 14px;
		line-height: 2;
	}

/* ------------------------------------------------------------ company */
#company {
	padding: 80px 0 70px;
}

	#company h2 {
		margin: 0 0 30px;
	}
	
	#company .img {
		width: 50%;
		margin: 0 auto 40px;
	}
	
	#company .img img {
		width: 100%;
		height: auto;
	}
	
	#company .outline {
		width: 100%;
		padding: 0;
	}
	
	#company .outline h3 {
		margin: 0 0 5px;
		font-size: 13px;
	} 
	
	#company .outline h3 span {
		margin: 0 15px 0 0;
		font-size: 27px;
	} 
	
	#company .outline dl {
		margin: 0 0 30px;
	}
	
	#company .outline dl dt {
		width: 80px;
		margin: 0 0 15px;
		padding: 5px 15px 5px 0;
		box-sizing: border-box;
		font-size: 13px;
	}
	
	#company .outline dl dd {
		width: calc(100% - 80px);
		margin: 0 0 15px;
		padding: 5px 0 5px 15px;
		font-size: 13px;
	}
	
	#company .outline .access {
		
	}
	
	#company .outline .access article {
		float: none;
		width: 100%;
		margin: 0 auto 50px;
	}
	
	#company .outline .access article:nth-of-type(3n+1) {
		clear: inherit;
		margin: 0 auto 50px;
	}
	
	#company .outline .access article:last-of-type {
		margin: 0 auto;
	}
	
	#company .outline .access article .map { 
		position: relative; 
		padding-bottom: 56.25%; 
		height: 0; 
		overflow: hidden; 
	}
	
	#company .outline .access article .map iframe { 
		position: absolute; 
		top: 0; 
		left: 0; 
		width: 100%; 
		height: 100%;
	}
	
	#company .outline .access article h4 {
		margin: 0 0 15px;
		padding: 0 0 5px;
		font-size: 16px;
	}
	
	#company .outline .access article .tel {
		font-size: 14px;
		margin: 0 0 5px;
	}
	
	#company .outline .access article .address {
		font-size: 12px;
		line-height: 1.5;
		margin: 0 0 15px;
		padding: 0 0 0 3em;
	}
	
	#company .outline .access article .link {
	}
	
	#company .outline .access article .link a {
		display: block;
		padding: 12px;
		font-size: 14px;
	}

/* ------------------------------------------------------------ contact */
#contact {
	padding: 60px 0 0;
}

	#contact::before {
		height: 300px;
	}
	
	#contact h3 {
		font-size: 17px;
		line-height: 2;
		margin: 0 auto 20px;
	}
	
	#contact .whitebox {
		padding: 60px 20px;
	}
	
	#contact .whitebox h2 {
		margin: 0 auto 20px;
	}
	
	#contact .whitebox .intro {
		margin: 0 auto 20px;
		font-size: 13px;
		line-height: 1.7;
	}
	
	#contact .whitebox .caution {
		margin: 0 auto 30px;
		text-align: center;
	}
	
	#contact .whitebox .caution span {
		font-size: 14px;
	}
	
	#contact .whitebox .caution span strong {
		color: #fe0070;
	}
	
	#contact .whitebox table,
	#contact .whitebox table tbody,
	#contact .whitebox table tr {
		display: block;
		width: 100%;
	}
	
	#contact .whitebox table th {
		display: block;
		width: 100%;
		padding: 0 0 5px;
		font-size: 14px;
	}
	
	#contact .whitebox table .top {
		padding: 0 0 5px;
	}
	
	#contact .whitebox table td {
		display: block;
		width: 100%;
		padding: 0 0 20px;
	}
	
	#contact .whitebox table td input[type="text"],
	#contact .whitebox table td textarea {
		padding: 12px;
		border-radius: 0;
	}
	
	#contact .whitebox table .post_number input[type="text"]:first-of-type {
		width: 70px;
	}
	
	#contact .whitebox table .post_number input[type="text"]:last-of-type {
		width: 140px;
	}
	
	#contact .whitebox .agree {
		margin: 0 0 35px;
	}
	
	#contact .whitebox .agree p {
		margin: 0 0 20px;
	}
	
	#contact .whitebox .agree p strong {
		font-size: 14px;
	}
	
	#contact .whitebox .agree p a {
		font-size: 10px;
	}
	
	#contact .whitebox .agree label {
		font-size: 14px;
	}
	
	#contact .whitebox .confirm_btn {
		text-align: center;
	}
	
	#contact .whitebox .confirm_btn input[type="submit"] {
		min-width: 270px;
		padding: 20px;
		font-size: 14px;
	}

/* ------------------------------------------------------------ エラー、確認の共通 */
.note {
	width: 90%;
	margin: 0 auto;
	padding: 40px 0 60px;
}

	.note h2 {
		margin: 0 auto 20px;
		font-size: 24px;
	}
	
	.note .caution {
		margin: 0 auto 25px;
		padding: 10px;
		font-size: 13px;
		line-height: 1.5;
	}
	
	.note .btns {
		display: block;
	}
	
	.note .back_btn {
		margin: 0 auto;
		text-align: center;
	}
	
	.note .back_btn a {
		width: 270px;
		height: 55px;
		line-height: 55px;
		font-size: 14px;
	}
	
	.note .forward_btn {
		margin: 15px auto 0;
		text-align: center;
	}
	
	.note .forward_btn input[type="submit"] {
		width: 270px;
		height: 55px;
		line-height: 55px;
		font-size: 14px;
	}
	
/* ------------------------------------------------------------ エラー画面 */
#error .alert {
	margin: 0 auto 30px;
}
	
	#error .alert span {
		margin: 0 auto 10px;
		font-size: 13px;
	}
	
/* ------------------------------------------------------------ 確認画面 */
#confirm table {
	display: block;
	width: 100%;
	margin: 0 auto 30px;
}

	#confirm table tbody {
		display: block;
	}

	#confirm table tr {
		display: block;
	}

	#confirm table th {
		display: block;
		width: 100%;
		padding: 12px 0 4px;
		font-size: 13px;
	}
	
	#confirm table td {
		width: 100%;
		padding: 0 0 12px;
		font-size: 13px;
	}

/* ------------------------------------------------------------ tel_mail */
#tel_mail {
	display: block;
	width: 90%;
	margin: 0 auto 40px;
	padding: 30px 20px 15px;
}

	#tel_mail .tel {
		width: 100%;
		border-right: none;
		border-bottom: solid 1px #737373;
		padding: 0 0 25px;
	}
	
	#tel_mail .tel h3 {
		margin: 0 auto 15px;
		font-size: 16px;
	}
	
	#tel_mail .tel p a {
		padding: 0 0 0 34px;
		background-size: 24px;
		font-size: 36px;
	}
	
	html.android #tel_mail .tel h3 {
		margin: 0 auto 5px;
	}
	
	html.android #tel_mail .tel p {
		margin: 0 auto 10px;
	}
	
	html.android #tel_mail .tel p a {
		background: url(../images/tel.svg) no-repeat left 10px;
		background-size: 25px;
	}
	
	#tel_mail .tel small {
		margin: -10px 0 0;
		font-size: 12px;
		font-family: 'NotoSansCJKjp-Regular';
	}
	
	#tel_mail .mail {
		width: 100%;
		max-width: 300px;
		margin: 0 auto;
		padding: 25px 0 0;
		box-sizing: border-box;
	}
	
	#tel_mail .mail .mail_btn {
		margin: 0 0 20px;
		text-align: center;
	}
	
	#tel_mail .mail .mail_btn a {
		display: block;
		width: 80%;
		margin: 0 auto;
		padding: 15px;
		font-size: 13px;
	}
	
	#tel_mail .mail .fax {
		width: 220px;
		background-size: 25px;
		margin: 0 auto;
		padding: 4px 0 0 20px;
		font-size: 27px;
	}
	
	html.android #tel_mail .mail .fax {
		background: url(../images/fax.svg) no-repeat left 7px;
		background-size: 25px;
		padding: 4px 0 0 15px;
	}


/* ------------------------------------------------------------ footer */
footer {
	padding: 35px 0 20px;
}

	footer .f_logo {
		margin: 0 auto 25px;
	}
	
	footer .f_logo a img {
		width: 30px;
		height: auto;
	}
	
	footer .f_logo a span {
		display: block;
		margin: 0 0 0 12px;
		font-size: 20px;
		letter-spacing: 6px;
	}
	
	footer small {
		font-size: 10px;
	}

}