@charset "utf-8";
/* =======================================================================
	BASE
======================================================================= */
html {height:100%;box-sizing: border-box;}
*, *:before, *:after {box-sizing: inherit;}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, 
pre, code, form, fieldset, legend, input, textarea, 
p, blockquote, th, td{margin:0;padding:0;}
a {outline: none; color:#0055AC; text-decoration: none;}
img { border:none }
h1,h2,h3,h4,h5,h6 {	font-size:100%;	font-weight:normal;}
body{
	font-family: 'Noto Sans JP', sans-serif;
	font-size:15px;
	font-style: normal;
	font-weight: 500;
	line-height:1.6;
	color:#111;
}
/* Clearfix */
.clearfix:after {
	content: "";
	clear: both;
	display: block;
}
.spnone{display:none;}

/* Opening */
.opening{
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	display: flex;
	background:#FFF;
	justify-content: center;
	align-items: center;
	z-index: 10000;
	overflow: hidden;
}
.opening .opening_logo{ display: none;}
.opening .opening_logo img{
	width:auto;
	height:65px;
}

/* =======================================================================
	HEADER
======================================================================= */
header{
	width:100%;
	position:absolute;
	top:0;
}
header.fixed_header{z-index:2;}
.header_inner .logo_area{margin:20px 0 0 20px;}
.header_inner .logo_area img{
	width:auto;
	height:26px;
}
.header_inner ul.pc_navi{display:none;}

/* Drawer */
.el_humburger {
	cursor: pointer;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	pointer-events: auto;
	caret-color: transparent;
	position: fixed;
	top: 20px;
	right: 20px;
	padding:0;
	z-index:100;
}
.el_humburger_wrapper {
	width: 40px;
	display: inline-block;
}
.el_humburger_text.el_humburger_text__close {display: none; }
.js_humburgerOpen .el_humburger_text.el_humburger_text__menu {display: none; }
.js_humburgerOpen .el_humburger_text.el_humburger_text__close {display: block;}
.el_humburger span.el_humburger_bar {
	width: 100%;
	height: 3px;
	background: #111;
	display: block;
	-webkit-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
	margin: 0 auto 9px;
}
body.js_humburgerOpen span.el_humburger_bar{
	background: #FFF !important;
	margin: 0 auto 8px;
}
.js_humburgerOpen .el_humburger span.el_humburger_bar.top {
	-webkit-transform: translateY(9px) rotate(-45deg);
	-ms-transform: translateY(9px) rotate(-45deg);
	transform: translateY(9px) rotate(-45deg);
}
.js_humburgerOpen .el_humburger span.el_humburger_bar.middle {opacity: 0;}
.js_humburgerOpen .el_humburger span.el_humburger_bar.bottom {
	-webkit-transform: translateY(-12px) rotate(45deg);
	-ms-transform: translateY(-12px) rotate(45deg);
	transform: translateY(-12px) rotate(45deg);
}
.el_humburgerButton.el_humburgerButton__close {
	background: #FFF;
}
.el_humburgerButton__close span.el_humburger_bar {
	width: 35px;
	height: 4px;
	display: block;
	margin: 0 auto;
}
.el_humburgerButton__close span.el_humburger_bar.top {
	-webkit-transform: translateY(5px) rotate(-45deg);
	-ms-transform: translateY(5px) rotate(-45deg);
	transform: translateY(5px) rotate(-45deg);
}
.el_humburgerButton__close span.el_humburger_bar.bottom {
	-webkit-transform: translateY(-6px) rotate(45deg);
	-ms-transform: translateY(-6px) rotate(45deg);
	transform: translateY(-6px) rotate(45deg);
}
.sp_navi {
	width: 0;
	height: 100%;
	overflow: auto;
	will-change: transform;
	background-color: rgba(45, 35, 30, 0.95);
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all 250ms ease-out;
	-o-transition: all 250ms ease-out;
	transition: all 250ms ease-out;
	transform:translateZ(0) translateX(0%);
	position: fixed;
	top:0;
	right:0;
	padding-top: 15%;
	z-index: 99;
}
.js_humburgerOpen .sp_navi {width: 70%;}
.navi_item {
	font-size: 17px;
	font-weight:500;
	white-space: nowrap;
	margin:0 0 35px 10%;
	padding-left:25px;
	position:relative;
}
.navi_item img{margin-top:20px;}
.navi_item a{color:#FFF;display:block;}
.navi_item.op_innerLink {cursor: pointer;}

/* =======================================================================
	MAIN
======================================================================= */
body.subpage main{padding-top:70px;}

/* MV
------------------------------------------------------------------------*/
section#mv{
	width:100%;
	height:550px;
	background: url("../images/mv_sp.webp") no-repeat;
	background-size:cover;
}
section#mv .mv_inner{
	width:86%;
	color:#1B1B1B;
	padding-top:150px;
	margin:0 auto;
}
.mv_inner h1{
	font-size:18px;
	font-weight:800;
	letter-spacing:3px;
}
.mv_inner h2{
	font-size:16px;
	font-weight:600;
	line-height:1.8;
	letter-spacing:3px;
	margin-top:20px;
}
.mv_fadein{
	opacity: 0;
	animation: mvfadein 1.5s ease forwards;
}
@keyframes mvfadein {100% {  opacity: 1;}}
.mvf01 {animation-delay: 5s;}
.mvf02 {animation-delay: 5.5s;}
.mvf03 {animation-delay: 6s;}


/* About
------------------------------------------------------------------------*/
section#about{
	width:100%;
	display: flex;
	flex-wrap: wrap; 
	padding:35px 0 0 0;
}
section#about .about_bg{
	width:100%;
	height:130px;
	max-height:130px;
	background: url("../images/about.webp") center center no-repeat;
	background-size:100% auto;
	margin:35px 0 0 0;
	order: 2;
}
section#about .about_txt{
	width:90%;
	line-height:1.8;
	padding:0;
	margin:0 auto;
	order: 1;
}
section#about .about_txt b{
	font-size:18px;
	font-weight:800;
	display:block;
	margin:20px 0;
}

/* Services
------------------------------------------------------------------------*/
/* Service */
section#services{
	width:100%;
	background:#F3F1EF;
	padding:40px 0;
}
section#services h2{
	font-size:26px;
	font-weight:500;
	height:45px;
	line-height:1;
	letter-spacing:1px;
	background: url("../images/h2_bg.png") bottom center no-repeat;
	background-size:56px 4px;
	text-align:center;
}
section#services .service ul{
	width:90%;
	list-style-type: none;
    margin:40px auto 0 auto;
}
section#services .service ul li{
	width:100%;
	margin:0;
}
section#services .service h3{
	font-size:19px;
	font-weight:600;
	line-height:1;
	text-align:center;
	margin-top:40px;
}
section#services .service img{
	width:100%;
	height:auto;
	margin:20px 0;
}

/* Work Process */
section#services .work_process{
	width:100%;
	border-top:#C7C6C6 1px solid;
	padding-top:40px;
	margin-top:30px;
}
section#services .work_process h3{
	font-size:15px;
	text-align:center;
	margin:30px 0;
}
section#services .work_process ul{
	width:90%;
	list-style-type: none;
	border-top:#C7C6C6 1px dashed;
    margin:0 auto;
}
section#services .work_process ul li{
	width:100%;
	line-height:65px;
	border-bottom:#C7C6C6 1px dashed;
	display:block;
	padding:8px 10px 12px 10px;
}
section#services .work_process ul img{
	float:left;
	width:70px;
	height:auto;
	margin-right:7%;
}
section#services .work_process h4{
	font-size:17px;
	font-weight:600;
}

/* Compnay
------------------------------------------------------------------------*/
section#compnay{
	width:100%;
	padding:40px 0;
}
section#compnay h2{
	font-size:26px;
	font-weight:500;
	height:45px;
	line-height:1;
	letter-spacing:1px;
	background: url("../images/h2_bg.png") bottom center no-repeat;
	background-size:56px 4px;
	text-align:center;
}
section#compnay dl{
	width:90%;
	margin:20px auto 30px auto;
} 
section#compnay dt{
	font-weight:600;
	color:#4C3F38;
	padding:15px 0 5px 0;
}
section#compnay dd{
	border-bottom:#bbb 1px solid;
	padding:0 0 15px 0;
}
section#compnay dl a{color:#111;}
section#compnay iframe{
	width:90%;
	height:220px;
	display:block;
	border:0;
	margin:0 auto;
}

/* Contact
------------------------------------------------------------------------*/
section#contact{
	width:100%;
	background:#F3F1EF;
	padding:40px 0;
}
section#contact h2{
	font-size:26px;
	font-weight:500;
	height:45px;
	line-height:1;
	letter-spacing:1px;
	background: url("../images/h2_bg.png") bottom center no-repeat;
	background-size:56px 4px;
	text-align:center;
}
section#contact h3{
	width:90%;
	font-size:16px;
	line-height:1.6;
	text-align:center;
	margin:30px auto;
}
table.form{
	width:90%;
	text-align:left;
	border-collapse:collapse;
	margin:20px auto 0 auto;
}
table.form th{
	color:#4C3F38;
	display:block;
	margin:20px 0 10px 0;
}
table.form td{display:block;}
section#contact h3.thx{
	line-height:1.8;
	text-align:center;
	margin:15% 0;
}
section#contact span{
	font-size:13px;
	font-weight:600;
	line-height:1;
	color:#CC4649;
	margin-left:15px;
}
section#contact span.msg{
	font-size:15px;
	color:#DB394E;
	margin:0;
}

/* お問い合わせフォーム【フォームパーツ】 */
table.form input{
	width:100%;
	background:#FFF;
	border-radius:5px;
	vertical-align:middle;
	padding:1% 2%;
	margin:5px 5px 5px 0;
}
table.form input[type="checkbox"],
table.form input[type="radio"]{
	margin:-2px 8px 0 0;
}
table.form input[type="text"],
table.form input[type="number"]{
	border:1px solid #A69C97;
}
table.form input[type="number"]{
	width:40%;
}
table.form input[type="number"]::-webkit-inner-spin-button,
table.form input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  -moz-appearance:textfield;
  margin: 0;
}
table.form select {
	width:100%;
	border:1px solid #A69C97;
	padding:3px 5px 7px 5px;
}
table.form textarea{
	width:100%;
	background:#FFF;
	border:1px solid #A69C97;
	border-radius:5px;
	padding:1% 2%;
	margin-top:5px;
}

/* お問い合わせフォーム【フォームボタン】 */
.form_area .btnarea{}
.btnarea ul{
	list-style:none;
	text-align:center;
	margin:30px 0 10px 0;
}
.btnarea li{
	width:100%;
	font-size:140%;
	color:#FFF;
	display: inline-block;
	margin:25px 0 0 0;
}
.btnarea .conbtn1{
	width:70%;
	font-size:18px;
	line-height:1.0;
	color:#FFF;
	display:block;
	cursor: pointer;
	border-radius:50px;
	border:none;
	background:#8A7C75;
	padding:22px 0;
	margin:0 auto;
}
.btnarea .conbtn2{
	width:70%;
	font-size:18px;
	line-height:1.0;
	color:#FFF;
	display:block;
	cursor: pointer;
	border-radius:50px;
	border:none;
	background:#CC4649;
	padding:22px 0;
	margin:0 auto;
}

/* =======================================================================
	FOOTER
======================================================================= */
footer{
	line-height:2;
	text-align:center;
	background:#F9F8F6;
}
footer a{color:#111;}
footer b{
	display:block;
	font-weight:700;
	padding:25px 0 5px 0;
}
footer .copyright{
	font-size:12px;
	font-weight:600;
	line-height:1;
	border-top:#CECDCC 1px solid;
	padding:20px 0;
	margin-top:25px;
}