@charset "UTF-8";

/*ふわっと表示*/
body {
	-webkit-animation: fadeInLoad 1.5s ease 0s 1 normal;
	animation: fadeInLoad 1.5s ease 0s 1 normal;
}

@keyframes fadeInLoad {
	0% {
		opacity: 0
	}

	100% {
		opacity: 1
	}
}

@-webkit-keyframes fadeInLoad {
	0% {
		opacity: 0
	}

	100% {
		opacity: 1
	}
}

#wrap {
	width: 100%;
	margin: 0 auto;
	padding: 0;
	overflow: hidden;
	color: #1A1A1A;
}

@media (min-width: 1200px) {
	section .container {
		max-width: 980px;
	}
}

a:hover {
	opacity: .8;
}

/* text,font */
.indent {
	text-indent: 1em;
}

.c-heading-line {
	/* 見出し斜め線 */
	background: url("../img/heading_line.svg");
	background-repeat: no-repeat;
	background-position: center;
	line-height: 94px;
	height: 98px;
}

.c-heading-bottom {
	/* 見出し左下線28px */
	position: relative;
}

.c-heading-bottom:before {
	content: '';
	position: absolute;
	bottom: -8px;
	width: 28px;
	height: 2px;
	left: 0;
	background-color: #BE272D;
}

.c-heading-center {
	/* 見出し中央下線28px */
	position: relative;
}

.c-heading-center:before {
	content: '';
	position: absolute;
	bottom: -8px;
	width: 28px;
	height: 2px;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	background-color: #BE272D;
}

.c-heading-top {
	/* 見出し上ボーダー2色 */
	border-top: solid 5px #EFEFEF;
	position: relative;
	color: #BE272D;
}

.c-heading-top:after {
	position: absolute;
	content: "";
	display: block;
	border-top: solid 5px #BE272D;
	top: -5px;
	width: 20%;
}

@media screen and (max-width: 376px) {
	.fs-sm-4 {
		font-size: calc(1.275rem + .3vw);
	}
}

/* テーマカラー適用 */
.text-red {
	color: #BE272D !important;
}

.bg-red {
	background-color: #BE272D !important;
}

.border-red {
	border-color: #BE272D !important;
}

/* ===============================================
header
=============================================== */
.l-header {
	height: 753px;
	position: relative;
	margin-bottom: 2rem;
	border-top: 5px solid #BE272D;
}

.bg-header {
	position: absolute;
	z-index: -1;
	top: 0;
	width: 50%;
	height: 600px;
	background: url("../img/bg-pattern2.jpg") repeat left;
}

.bg-header::after {
	content: '';
	background-color: rgba(26, 26, 26, 0.7);
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
}


.c-scroll {
	position: absolute;
	z-index: 100;
	padding: 0 0 0 100px;
	right: 70%;
	bottom: 50px;
	text-align: center;
	line-height: 1;
	transform: rotate(-90deg);
}

.c-scroll:after {
	content: '';
	position: absolute;
	top: 50%;
	left: -10px;
	display: inline-block;
	width: 100px;
	height: 1px;
	padding: 0;
	margin: 0;
	background-color: #fff;
	animation: c-scroll 4s infinite;
}

@keyframes c-scroll {
	0% {
		transform: translate(0, 0);
	}

	80% {
		transform: translate(-50px, 0);
	}

	0%,
	80%,
	100% {
		opacity: 0;
	}

	40% {
		opacity: 1;
	}
}

/* navigation
----------------------- */
@media screen and (max-width: 991px) {
	.navbar-nav {
		right: 0;
		background-color: #fff;
		width: 50%;
		padding: 10px;
		position: relative;
    z-index: 10;
	}
	/* .navbar-light .navbar-toggler{
		position: fixed;
	} */
}

.nav-link {
	color: #1A1A1A !important;
}

@media screen and (min-width: 991px) {
	.nav-link {
		border-bottom: 1px solid #BE272D;
		margin: 0 12px;
		padding: 0 !important;
	}
}

/* heroimage
----------------------- */
.p-hero-img {
	position: relative;
	z-index: 0;
	top: 80px;
	right: 0;
	/* width: 1000px;
	height: 550px;
	background: url("../img/heroimg_w_1400.jpg");
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat; */
}

.p-hero-img__blend {
	position: absolute;
	top: 0;
	right: 0;
	width: 1000px;
	height: 550px;
	background: linear-gradient(90deg, rgba(26, 26, 26, 0.5), rgba(150, 150, 150, 0.5));
	mix-blend-mode: overlay;
}

@media screen and (max-width: 999px) {
	/* .p-hero-img {
		width: 100vw;
		height: 550px;
		background: url("../img/heroimg_w_1000.jpg");
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
	} */

	.p-hero-img__blend {
		width: 100vw;
		height: 550px;
	}
}

@media (max-width : 793px) {
	.p-hero-img {
		background: url("../img/heroimg_w_793.jpg");
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
	}
}

@media screen and (max-width: 424px) {
	/* .p-hero-img {
		height: 300px;
		background: url("../img/heroimg_w_480.jpg");
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
	} */

	.p-hero-img__blend {
		height: 300px;
	}
}

.p-hero-img img {
	position: absolute;
	top: 0;
	right: 0;
	width: 1200px;
	/* opacity: .7;
	transform: translateY(-50%) translateX(-50%); */
}

.list-style-square {
	list-style-type: "□";
}

.c-vertical-line {
	width: 2px;
	height: 26px;
	background: #BE272D;
	margin: 3rem auto;
}

/* background
----------------------- */
.bg-brick {
	position: relative;
	z-index: 0;
	top: 0;
	background: url("../img/bg-pattern1.jpg") repeat;
}

.bg-brick .container {
	position: relative;
	z-index: 1;
}

.bg-brick__blend {
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(160deg, rgb(107, 107, 104), rgb(252, 253, 254));
	mix-blend-mode: multiply;
}

.bg-wall {
	background: #4D4D4D;
	position: relative;
}

.bg-wall::after {
	content: '';
	background: url("../img/bg-pattern2.jpg") repeat;
	opacity: .2;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
}

.bg-wall .container {
	position: relative;
	z-index: 1;
}

.bg-gray {
	background: #efefef;
	position: relative;
}

.bg-gray:before {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -15px;
	border: 15px solid transparent;
	border-top: 15px solid #efefef;
}
@media screen and (min-width: 1599px){
	.p-hero-img img{
	right: 10%;
    /* transform: translateX(50%); */
	width: 1200px;
	}
}
@media screen and (max-width: 1200px){
	.p-hero-img img{
		width: 100%;
	}
	.l-header{
		height: 63vw;
	}
}
@media screen and (min-width: 768px) {
	.c-md-center {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translateY(-50%) translateX(-50%);
	}
}

@media screen and (max-width: 424px) {
	.l-header {
		height: 72vw;
	}

	.bg-header {
		width: 70%;
		height: 300px;
	}
}

/* about-table
----------------------- */
.p-about-table th {
	color: #BE272D;
	border-right: 1px solid #B0B0B0;
	border-bottom: none;
}

@media screen and (min-width: 768px) {
	.p-about-table th {
		width: 220px;
	}
}

.p-about-table td {
	border-bottom: none;
	padding-left: 2rem;
}

@media screen and (max-width: 524px) {
	.p-about-table tr {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
	}

	.p-about-table th,
	.p-about-table td {
		width: 100%;
		border-right: none;
	}
}


/* lightbox
----------------------- */
.lum-lightbox-inner img {
	margin: -20px;
	padding: 20px;
	background: #fff;
}

.lum-lightbox {
	z-index: 999;
}

@media screen and (max-width: 460px) {
	.lum-lightbox-inner img {
		max-width: 160vw !important;
		/* 軽くスワイプで左端から右端まで動かせる量 */
		max-height: 85vh !important;
		/* 上下に適度に余白 */
	}
}

/* animation
----------------------- */
.anim-box.slideinleft.is-animated {
	/* スライドイン left */
	animation: slideInLeft 1.4s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
}

@keyframes slideInLeft {
	0% {
		transform: translateX(-180px);
		opacity: 0;
	}

	100% {
		transform: translateX(0);
	}

	40%,
	100% {
		opacity: 1;
	}
}

.line-left {
	/* 左から線が伸びる */
	position: relative;
	width: 100%;
	display: inline;
	background: linear-gradient(transparent 90%, #BE272D 0%);
	background-repeat: no-repeat;
	background-position: bottom left;
	background-size: 0 30%;
	transition: 2s cubic-bezier(0.22, 1, 0.36, 1);
}

.line-left.is-animated {
	background-size: 100% 30%;
}

.smooth {
	clip-path: inset(0 100% 0 0);
	display: inherit;
	font-size: inherit;
	font-weight: inherit;
	transition: 2s cubic-bezier(0.37, 0, 0.63, 1);
	transition-property: clip-path;
	line-height: inherit;
	height: inherit;
	margin-top: inherit;
}

/* scroll-top
----------------------- */
.scroll-top {
	position: absolute;
	right: 0;
	top: -6.1rem;
	background-color: #BE272D;
	width: 100px;
	height: 50px;
	text-align: center;
	text-decoration: none;
	color: #fff;
}

.scroll-top:hover {
	color: #fff;
	opacity: .8;
}

/* ===============================================
footer
=============================================== */
.l-footer {
	background-color: #1A1A1A;
}

.l-footer ul {
	list-style: none;
}

.l-footer ul a {
	color: #fff;
	text-decoration: none;
	display: block;
}

@media screen and (max-width: 524px) {
	.l-footer ul li {
		width: 50%;
		padding: 10px;
		text-align: center;
	}
}

/* ===============================================
追加分
=============================================== */
#message .row.box_2{
	margin-top: 90px;
}
#message .row.box_2 .mb-md-0{
	display: flex;
	align-items: end;
}
#message .row.box_2 .red{
	color: #BE272D;
	font-weight: bold;
	margin-bottom: 0px;
}
#message .row.box_2 .indent{
	margin-bottom: 20px;
}
#message{
	background-image: url(../img/about_back.png);
	background-repeat: no-repeat;
	background-size: cover;
}
#message .message_greeting{
	width: 80%;
}
#message .message_img{
	text-align: center;
	flex: 1;
}
#message .message_name span{
	font-size: 0.8rem;
	padding-right: 10px;
}
#message .message_name .res980{
	display: none;
}
#worries .box_wh{
    background-color: #fff;
    width: 80%;
    margin: 0 auto;
	margin-top: 50px;
    padding: 20px 0;
	padding-left: 170px;
	box-sizing: border-box;
    text-align: initial;
}
#worries .box_wh .check p{
	color: #BE272D;
	font-size: 1.2rem;
	padding-left: 33px;
	background-image: url(../img/marker.svg);
	background-repeat: no-repeat;
	background-size: 20px;
	background-position: left center;
}
#paint .d-flex{
	flex-wrap: wrap;
	margin-bottom: 70px;
}
#paint .d-flex a{
    width: calc(100% / 3 - 14px);
    margin-right: 20px;
	margin-bottom: 20px;
}
#paint .d-flex a:nth-child(3n){
	margin-right: 0;
}
#paint .d-flex a img{
	width: 100%;
}
#credit{
	background-color: #BE272D;
	padding: 40px 0;
}
#credit p{
	color: #fff;
}
#credit .card_box{
	justify-content: center;
}
#credit .card_box div{
	width: calc(50% / 5 - 20px);
	margin-right: 20px;
}
#credit .card_box div:nth-last-child(1){
	margin-right: 0;
}
#credit .card_box div img{
	width: 100%;
}
#wb .container .back{
	background-color: #faeeee;
	display: block;
	position: relative;
	padding: 0 40px;
	margin-top: 180px;
}
#wb .container .back .wb_img{
	position: absolute;
	top: -50%;
	transform: translateY(-5%);
}
#wb .container .back .wb_link{
	margin-left: auto;
	padding: 50px 0;
	width: 65%;
	z-index: 10;
	position: relative;
}
#wb .container .back .wb_link a{
	color: #fff;
	background-color: #BE272D;
	text-decoration: none;
	padding: 15px 0;
	margin: 0 auto;
	margin-top: 30px;
	width: 230px;
	display: block;
	text-align: center;
}
#wb .container .back .wb_link a:hover{
	opacity: 0.8;
}
.time .container{
	display: flex;
	max-width: 980px;
}
.time .container img{
	width: 42%;
	margin-right: 40px;
}
.container .font-b{
	font-size: 1.5rem;
}
#contact .line_btn{
	width: 100%;
	margin: 50px auto;
	display: flex;
	align-items: center;
	/* justify-content: center; */
}
#contact .line_btn div{
	padding: 20px 0;
}
#contact .line_btn .tel{
	width: 49%;
	border-right: dashed 1px #fff;
}
#contact .line_btn .tel p{
	font-size: 1rem;
	font-weight: initial;
	margin-bottom: 0.5rem;
}
#contact .line_btn .line{
	cursor: pointer;
	display: block;
	width: 40%;
	margin-top: 0;
}
#contact .line_btn .line p{
	margin-bottom: 0.5rem;
}
#contact .line_btn a img{
	max-width: 300px;
}
#contact .contact_txt{
	justify-content: center;
	align-items: center;
	width: 300px;
	margin: 15px auto;
}
#contact .contact_txt p{
	border: solid 1px #fff;
	width: 48%;
}
#contact .contact_txt p:nth-child(2){
	margin-left: auto;
}
#contact .txt_y{
	color: #ffff00;
	margin-top: 1rem;
	font-size: 1.3rem;
}
.l-footer{
	padding-top: 3rem;
}
.bg-light{
	position: relative;
}
.bg-light::before{
	width: 0;
  	height: 0;
	border-left: 24px solid transparent;
	border-right: 26px solid transparent;
	border-top: 24px solid #f8f9fa;
	position: absolute;
	bottom: -24px;
	left: 50%;
	transform: translateX(-50%);
	content: "";
}

#pages.l-header{
	height: 80px;
}
#pages .bg-header{
	height: 80px;
}
.a-item{
	align-items: center;
	padding-top: 1em;
}

@media (max-width: 980px){
	.time .container{
		max-width: 95%!important;
	}
	#worries .box_wh{
		padding-left: 15%;
	}

	.img_box{
		margin-left: 0!important;
	}
	.img_box img{
		width: calc(100% / 4 - 12px);
		margin-right: 15px;
		margin-bottom: 15px;
		height: auto;
	}
	.img_box img:nth-child(4n){
		margin-right: 0;
	}
	#message .message_name .res980{
		display: block;
	}
	#message .message_name span{
		padding-right: 0;
	}
	.requirements_box{
		display: block!important;
		justify-content: center!important;
		width: 100%;
		padding: 0!important;
	}
	.requirements_box li{
		margin-bottom: 20px;
	}
	.requirements_box img{
		/* margin-bottom: 15px; */
		height: auto;
    width: 100%;
	}

}
@media (max-width: 768px){
	.container, .container-md, .container-sm{
		max-width: 95%!important;
	}
	.time .container{
		max-width: 95%!important;
	}
	#worries .box_wh{
		padding-left: 8%;
	}
	.container, .container-sm{
		max-width: 95%!important;
	}
	#message .message_img{
		margin: 0 auto;
    width: 80%;
		text-align: center;
	}
	#message .row.box_2 .mb-md-0{
		display: block;
    width: 83%;
    text-align: center;
    margin: 0 auto;
	}
	.img-fluid{
		width: 70%;
	}
	#worries .box_wh{
		width: 100%;
	}
	#wb .container .back{
		padding: 0 15px;
		margin-top: 100px;
	}
	#wb .container .back .wb_img{
		left: 0;
		top: -35%;
    transform: inherit;
	}
	#wb .container .back .img-fluid{
		width: 68%;
	}
	#contact .line_btn{
		display: block;
		margin: 20px 0;
	}
	#contact .line_btn div{
		padding: 10px 0;
	}
	#contact .line_btn .tel{
		width: 100%;
		border-right: none;
	}
	#contact .line_btn .line{
		width: 100%;
	}
	#credit .card_box div{
		width: calc(80% / 5 - 20px);
	}

	#wb .img-fluid{
		width: 100%;
	}
	.results_main .img-fluid{
		width: 100%;
	}
	#message .message_greeting{
		width: 70%;
	}
	#message{
		background-image: url(../img/about_back-sp.png);
	}
	#message .row.box_2{
		flex-direction: column-reverse;
	}
}

@media (max-width: 540px){
	/* .img-fluid{
		width: 95%;
	} */
	#worries .box_wh{
		padding: 20px;
	}
	.time .container{
		display: block;
	}
	.time .container img{
		width: 70%;
    margin-right: 0px;
    margin-bottom: 20px;
	}
	#credit .card_box div{
		width: calc(100% / 5 - 20px);
	}
	#paint .d-flex a{
		width: calc(100% / 2 - 10px);
	}
	#paint .d-flex a:nth-child(3n){
		margin-right: 20px;
	}
	#paint .d-flex a:nth-child(2n){
		margin-right: 0;
	}
	#message .message_greeting{
		width: 100%;
	}
	#message .message_img{
		display: flex;
    	flex-direction: row-reverse;
		align-items: center;
	}
	#message .message_img .img-fluid{
		width: 50%;
	}
	#message .message_img .message_name{
		flex:1;
	}
	#message .message_name .res980{
		display: none;
		margin-right: 10px;
	}
	#message .message_name span{
		margin-right: 10px;
	}
}

@media (max-width: 450px){
	#wb .container .back .wb_img{
		top: -50%;
	}
	#wb .container .back .img-fluid{
		width: 80%;
	}
	#wb .container .back .wb_link{
		width: 100%;
		padding: 25px 0;
	}
	
}
.list_none{
	list-style: none;
}