@charset "utf-8";

/* 
● Zen Maru Gothic L
font-family: "Zen Maru Gothic", serif;
font-weight: 300;

● Zen Maru Gothic R
font-family: "Zen Maru Gothic", serif;
font-weight: 400;

● Zen Maru Gothic M
font-family: "Zen Maru Gothic", serif;
font-weight: 500;

● Zen Maru Gothic B
font-family: "Zen Maru Gothic", serif;
font-weight: 700;

● Zen Maru Gothic BK {
font-family: "Zen Maru Gothic", serif;
font-weight: 900;

● しっぽり明朝
font-family: 'Shippori Mincho', serif;

● Yellowtail
font-family: "Yellowtail", serif;
*/

html { 
	scroll-behavior: smooth;
	height: 100%;
}

body,
html {
	overflow-x: hidden
}

* {
	-webkit-touch-callout: none
}

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

audio,
embed,
img,
object,
video {
	vertical-align: middle;
	width: auto;
	max-width: 100%;
	height: auto
}

th,
td {
	text-align: left;
	font-weight: normal;
}

iframe {
	border: 0;
	display: block;
	vertical-align: middle
}



body,
input,
select,
textarea {
	font-family: "Zen Maru Gothic", "游ゴシック体", "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "Adobe Blank", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 16px;
	font-size: 1.6rem;
	-moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
	font-feature-settings: "palt";
	font-optical-sizing: auto;
	line-height: 1.5rem;
	color: rgb(0, 0, 0, .8);
}

body::after {
	content: '';
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color:#f5f5f5;
	z-index: 9999;
	pointer-events: none;
	opacity: 0;
	-webkit-transition: opacity .5s ease;
	-ms-transition: opacity .5s ease;
	-moz-transition: opacity .5s ease;
	transition: opacity .5s ease;
}



h1,
h2,
h3,
h4,
h5,
h6 {
	font-size: 100%;
	font-weight: 400;
	margin: 0;
	padding: 0;
	line-height: 1.5rem;
}
h1 {}
h2 {
	font-size: 1rem;
	font-family: 'Shippori Mincho', serif;
	line-height: 1.3rem;
}
h3 {}
h4 {}
h5 {}
h6 {}

a,
a img {
	-webkit-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;
	border: none;
	tap-highlight-color: rgba(0, 0, 0, .5);
	-webkit-tap-highlight-color: rgba(0, 0, 0, .5);
}

a {
	color: rgba(0, 0, 0, .8);
	display: block;
	text-decoration: none;
}
header nav a,
#about a,
footer a {
	color: #f5f5f5;
}



/*--------------------------------
    HOVER STYLE
--------------------------------*/
@media(hover: hover) {
	
	a:hover,
	a:focus {}
	
	#mail_form input#postal + a:hover {
		cursor: pointer;
		background: #31A0C8
	}
	
	#submit input[type="submit"]:hover,
	#form_submit input[type="button"]:hover,
	input[type="button"][value="戻る"]:hover,
	input[type="button"][value="トップページへ戻る"]:hover {
		background-color: #303030
	}
	
	.confirm #submit input[type="submit"][value="送信"]:hover {
		background-color: #EC2323
	}
	
	.attached .form-upload:hover::before {
		background: #DCDCDC
	}
	
}



/*--------------------------------
    GROBAL BG
--------------------------------*/
.bg_gray {
	background-color: #E1E3D9;
}
.bg_orange {
	background-color: #C8832F;
}
.bg_lb {
	background-color: #DDD3C9;
}



/*--------------------------------
    SLIDE
--------------------------------*/
.slideImg {
	overflow: hidden;
	position: relative;
}
.slideImg__wrapper {
	position: relative;
	background-color: #CF3714;
}
.slideImg__slide {
	width: 100%;
	height: 140%;
	transform: skewY(10deg);
	background-color: #CF3714;
	display: block;
	position: absolute;
	top: -10%;
	left: 0;
	z-index: 2;
}
.slideImg__img {
    width: 100%;
}



/*--------------------------------
    subMv
--------------------------------*/
.sv {
	padding: 1rem 5%;
}
.sv_logo img {
	width: 18%;
	margin-bottom: 4rem;
}
.sv h2  {
	position: relative;
	margin-bottom: 3.5rem;
	padding-top: 0.3rem;
	padding-left: 2%;
	font-size: 1.4rem;
}

.subMv__heading--1,
.subMv__heading--2 {
	position: absolute;
	overflow: hidden;
	background: rgb(0, 0, 0, .3);
}
.subMv__heading--1 span,
.subMv__heading--2 span {
	display: block;
}
.subMv__heading--1 {
	width: 150px;
	height: 1px;
	top: 1px;
	left: -6px;
}
.subMv__heading--2 {
	height: 55px;
	width: 1px;
	top: -12px;
	left: 4px;
}
.subMv__heading--1 span {
	width: 100%;
	height: 1px;
	transform: translateX(-100%);
}
.subMv__heading--2 span {
	width: 1px;
	height: 100%;
	transform: translateY(-100%);
}

.sv_bread ul {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	font-size: 0.75rem;
}
.sv_bread li {
	line-height: 1rem;
	margin-right: 0.7rem;
}
.sv_bread li a::before {
	content: "|";
	display: inline-block;
	margin-right: 0.7rem;
}
.sv_bread li:first-child a::before {
	content: "";
}
.sv_bread li:first-child a::before {
	margin-right: 0;
}



/*--------------------------------
    Works
--------------------------------*/
.works {
	width: 90%;
	margin: 0 auto;
	padding: 3rem 0 5rem;
}
.works h3 {
	font-size: 1.2rem;
	font-weight: 700;
	font-family: 'Shippori Mincho', serif;
	color: #CF3714;
	margin-bottom: 1.5rem;
}
.works h4 {
	font-size: 1rem;
	font-weight: 700;
	font-family: 'Shippori Mincho', serif;
	margin: 1.5rem 0;
	text-align: center;
}
.works .cards__img img {
	object-fit: cover;
	aspect-ratio: 1 / 1;
}
.works p {
	font-size: 0.9rem;
	margin: 2rem 0 3rem;
}



/*--------------------------------
    Company
--------------------------------*/
.company {
	padding: 3rem 5% 6rem;
}
.company > p {
	font-size: 0.9rem;
	margin: 2rem 0 4rem;
}
.company h3 {
	font-size: 1.2rem;
	margin-bottom: 1.5rem;
	padding-bottom: 0.5rem;
	color: #CF3714;
	border-bottom: 1px solid #CF3714;
	font-family: 'Shippori Mincho', serif;
}

.company dt {
    padding-bottom: 1vw;
	font-size: 1rem;
	font-weight: 700;
}
.company dd {
    border-bottom: 1px solid rgba(0, 0, 0, .05);
    padding-bottom: 5vw;
    margin-bottom: 5vw;
	font-size: 0.9rem;
}

.company_tag {
	font-family: 'Shippori Mincho', serif;
	font-size: 1.6rem;
}

#about-low {
	padding: 1rem 5%;
	background: linear-gradient(rgba(0,0,0,0.75),rgba(0,0,0,0.75)), url(../img/top/bg_about.jpg) center left 40% / 100% no-repeat;
	background-size: cover;
	color: #F5F5F5;
}

#about-low > p {
	font-size: 0.8rem;
}

#about-low .about__imgWrapper {
	position: relative;
	display: block;
	margin: 3rem auto;
	text-align: center;
	width: 70%;
}
#about-low .about__imgWrapper .about__img {
    width: 100%;
}

#about-low > .about__imgWrapper p {
	position: absolute;
	left: 35%;
	bottom: -20%;
	font-size: 1rem;
	font-family: "Yellowtail", serif;
}

.footer-map {
    height: 450px;
    margin-top: 10vw;
}
.footer-map iframe {
    width: 100%;
    margin: 0 auto;
    height: 450px;
    border: none;
}



/*--------------------------------
    MAIL FORM
--------------------------------*/
#contact {
	padding: 5rem 5%;
}

#contact .topHeading {
	position: relative;
}
#contact .topHeading__line--1,
#contact .topHeading__line--2 {
    display: block;
    position: absolute;
    overflow: hidden;
	background: rgb(0, 0, 0, .3);
}
.topHeading__line--1 {
    width: 176px;
    height: 1px;
    top: -3px;
    left: -12px;
}
.topHeading__line--2 {
    width: 1px;
    height: 51px;
    top: -10px;
    left: -3px;
}
#contact h2 span {
	display: block;
	font-size: 0.8rem;
}
#contact > p {
	font-size: 0.8rem;
	margin: 4rem 0;
}

#mail_form input::placeholder {
	color: #D0D0D0;
	font-size: 0.9rem;
}

#mail_form .form-field {
	margin-bottom: 5rem;
	font-family: 'Shippori Mincho', serif;
}
#mail_form .form-field dt {
	width: 100%;
	font-size: 0.9rem;
	line-height: 1.2rem;
	margin-bottom: 0.8rem;
	color: rgba(0, 0, 0, .6);
}
#mail_form .form-field dt span {
	display: block;
	font-size: 0.7rem;
	color: rgba(0,0,0,.3)
}

.form-control {
	width: 100%;
	height: 3.25rem;
	line-height: 1rem;
	padding: 0.75rem;
	font-size: 0.9rem;
	background-color: #fff;
	background-clip: padding-box;
	border: 1px solid #cfcfcf;
	appearance: none;
	border-radius: 10px;	
	transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out
}

.box-input {
	display: flex;
	align-items: center;
	column-gap: 0.5rem
}

select#use {
    width: 100%;
    font-size: 0.9rem;
    height: 3.25rem;
    padding: 0.75rem;
    background-color: #fff;
    border: 1px solid #cfcfcf;
    border-radius: 10px;
	color: #D0D0D0;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
select#use:invalid {
	color: #ff0000;
}
select#use option {
	color: rgba(0, 0, 0, .8);
	font-size: 0.9rem;
}
select#use option:first-child {
	color: #D0D0D0;
}

.form-field textarea {
	width: 100%;
	height: 10rem;
	padding: 0.75rem;
	resize: vertical;
	border: 1px solid #cfcfcf;
	border-radius: 10px;
	font-size: 0.9rem;
	background: #fff
}

#submit,
#form_submit {
	margin: 2rem auto 0;
	text-align: center;
}

#submit input[type="submit"],
#form_submit input[type="button"],
input[type="button"][value="戻る"] {
	width: 100%;
	color: #f5f5f5;
	font-size: 1rem;
	border-radius: 10px;
	border: none;
	background: #C58B44;
	padding: 1.5rem 6rem;
	letter-spacing: 1rem;
	-webkit-transition: all .6s ease-in-out;
	transition: all .6s ease-in-out;
	cursor: pointer
}
#thanks input[type="button"][value="トップページへ戻る"] {
	width: 100%;
	color: #f5f5f5;
	font-size: 1rem;
	border-radius: 10px;
	border: none;
	background: #CF3714;
	padding: 1.5rem 0;
	letter-spacing: 0.1rem;
	-webkit-transition: all .6s ease-in-out;
	transition: all .6s ease-in-out;
	cursor: pointer;
	margin-top: 2rem;
}

.confirm #submit {
	margin-top: 0.75rem
}

.sending #submit {
	margin-top: 3rem
}

#mail_form #form_submit {
	margin-top: 3rem
}

.confirm #submit input[type="submit"][value="送信"] {
	background: #c60000;
	margin-bottom: 0.5rem
}

#mail_form .form-field input#mail_address_confirm {
	margin-top: 0.5rem
}

#mail_form .form-field:last-child {
	margin-bottom: 0
}

#mail_form dl dt span.required,
#mail_form dl dt span.optional {
	display: inline-block;
	float: left;
	margin-right: 1rem;
	padding: 0.545rem 1rem;
	border-radius: 10px;
}
#mail_form dl dt span.required {
	background: #ff0000;
	color: #fff;
}
#mail_form dl dt span.optional {
	background: #f5f5f5;
	color: #9e9e9e;
}
#mail_form dl dd span.error_blank,
#mail_form dl dd span.error_format,
#mail_form dl dd span.error_match {
	display: block;
	color: #ff0000;
	margin-top: 0.8rem;
	font-size: 0.8rem;
}
#mail_form input[type="text"]:focus,
#mail_form input[type="email"]:focus,
#mail_form input[type="tel"]:focus,
#mail_form textarea:focus,
#mail_form select:focus {
	box-shadow: 0px 0px 5px #FFCDCE;
	border: 1px solid #FFCDCE;
	background: #FFF7F7
}

span.loading {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	border-top: 5px solid rgba( 255, 255, 255, 0.2 );
	border-right: 5px solid rgba( 255, 255, 255, 0.2 );
	border-bottom: 5px solid rgba( 255, 255, 255, 0.2 );
	border-left: 5px solid #fff;
	-webkit-transform: translateZ( 0 );
	-ms-transform: translateZ( 0 );
	transform: translateZ( 0 );
	-webkit-animation: load-circle 1.0s linear infinite;
	animation: load-circle 1.0s linear infinite;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -30px;
	margin-left: -30px;
}

@-webkit-keyframes load-circle {
	0% {
		-webkit-transform: rotate( 0deg );
		transform: rotate( 0deg );
	}
	100% {
		-webkit-transform: rotate( 360deg );
		transform: rotate( 360deg );
	}
}
@keyframes load-circle {
	0% {
		-webkit-transform: rotate( 0deg );
		transform: rotate( 0deg );
	}
	100% {
		-webkit-transform: rotate( 360deg );
		transform: rotate( 360deg );
	}
}

#thanks {
	width: 90%;
	margin: 0 auto;
	padding: 3rem 0 5rem
}
#thanks h2 {
	font-size: 1.1rem;
	margin-bottom: 1rem;
}
#thanks > div {
	border-top: 1px solid rgba(0, 0, 0, .4);
	padding-top: 3rem;
	font-size: 0.9rem;
}


#page_top {
	width: 2.5rem;
	height: 2.5rem;
	position: fixed;
	display: flex;
	justify-content: center;
	align-items: center;
	right: 5%;
	bottom: 3%;
	background: #CF3714;
	opacity: 0.6;
	border-radius: 50%;
	z-index: 99999999;
}



/*--------------------------------
    MOBILE S-SIZE
--------------------------------*/
@media screen and (max-width: 374px) {
	
	#statement {
		padding-left: 6.25%
	}
	
	#statement h3 {
		font-size: 1.3rem;
		line-height: 2rem;
	}
	
}



/*--------------------------------
    MOBILE
--------------------------------*/
@media screen and (max-width: 767px) {
		
	#main-slide {
		flex-flow: column;
	}
	
	.carousel.left {
		width: 100vw;
		height: 50svh;
		display: flex;
		overflow: hidden;
		margin: 0 auto;
	}	
	.carousel.right {
		width: 100vw;
		height: 50svh;
		display: flex;
		overflow: hidden;
		margin: 0 auto;
	}

}



/*--------------------------------
    TABLET
--------------------------------*/
@media screen and (min-width: 768px) {
	
}



/*--------------------------------
    PC
--------------------------------*/
@media screen and (min-width: 961px) {}