@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP&display=swap');
html,
body,
select{
	text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	margin:0;
	padding:0;
	color:#1C1C1C;
	font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho",'Noto Serif JP', serif;
	font-size:16px;
	line-height:1.5;
	letter-spacing: 0.08em;
}
body.open{
	width: 100%;
	height: 100vh;
	overflow: hidden;
}
a{
	color: #3b2d2d;
}
@media (min-width: 751px) {
	a{
		transition: all 0.4s ease;
	}
	a:hover{
		opacity: 0.6;
	}
}
@media (max-width: 750px) {
	html,body{
		width: 100%;
		overflow-x: hidden;
	}
	img{
		width:100%;
		height: auto;
	}
}
/********************************************
common
********************************************/
.w1120{
	max-width: 1120px;
	margin: 0 auto;
}
@media (min-width: 751px) {
	.pchidden{
		display:none;
	}
	a.underline{
		padding:0 0 5px;
		background-image: linear-gradient(180deg,#fff,#fff);
		transition: background-size 380ms cubic-bezier(.215,.61,.355,1);
		background-repeat: no-repeat;
		background-size: 0 1px;
		background-position: 100% 100%;
	}
	a.underline:hover{
		background-size: 100% 1px;
		background-position: 0 100%;
	}
}
@media (max-width: 750px) {
	.sphidden{
		display: none;
	}
}
/********************************************
fade
********************************************/
.fadein .fade__multi{
    opacity: 0;
    transform: translateY(30px);
	transition: opacity 2s cubic-bezier(.215,.61,.355,1),transform 1.2s cubic-bezier(.165,.84,.44,1),-webkit-transform 1.2s cubic-bezier(.165,.84,.44,1);
}
.fadein.fade__normal{
    opacity: 0;
    transform: translateY(30px);
	transition: opacity 2s cubic-bezier(.215,.61,.355,1),transform 1.2s cubic-bezier(.165,.84,.44,1),-webkit-transform 1.2s cubic-bezier(.165,.84,.44,1);
}
.fadein .fade__normal{
    opacity: 0;
    transform: translateY(30px);
	transition: opacity 2s cubic-bezier(.215,.61,.355,1),transform 1.2s cubic-bezier(.165,.84,.44,1),-webkit-transform 1.2s cubic-bezier(.165,.84,.44,1);
}
.fadein .delay__01{
	transition-delay: 0.3s;
}
.fadein .delay__02{
	transition-delay: 0.6s;
}
.fadein .delay__03{
	transition-delay: 0.9s;
}

.fadein.scrollin .fade__multi{
    opacity: 1;
    transform: translateY(0);
}
.fadein.scrollin .fade__normal{
    opacity: 1;
    transform: translateY(0);
}

.fadein.fade__opacity .black{
    opacity: 1;
    transform: translateY(0);
	background: #000;
	display: inline-block;
	width: 100%;
    height: auto;
}
.fadein.fade__opacity .black img{
    opacity: 0;
	transition:opacity .7s cubic-bezier(.165,.84,.44,1);
}
.fadein.fade__opacity .black.delay__01 img{
	transition-delay: 0.3s;
}
.fadein.fade__opacity .black.delay__02 img{
	transition-delay: 0.6s;
}
.fadein.fade__opacity .black.delay__03 img{
	transition-delay: 0.9s;
}
.fadein.scrollin.fade__opacity .black img{
    opacity: 1;
}

/********************************************
btn
********************************************/
.btn{
	text-align: center;
	width: 448px;
	margin: 0 auto;
	border: 1px #000 solid;
	overflow: hidden;
}
.btn a{
	display: block;
	font-size: 18px;
	line-height: 1;
	width: 100%;
	padding:20px 0 19px;
	background-image: url(../images/arrow.svg);
	background-repeat: no-repeat;
	background-size: 6px auto;
	background-position: 95% center;
}
.btn a small{
	font-size: 14px;
}
.btn.btn__white{
	border: 1px #FFF solid;
}
.btn.btn__white a{
	color: #FFF;
	background-image: url(../images/arrow_white.svg);
}

.arrow_circle{
    float: right;
    display: block;
    width: 16px;
    height: 16px;
    border-radius: 100%;
    background-image: url(../images/arrow_black.svg);
    background-repeat: no-repeat;
    background-size: 16px auto;
    background-position: center;
}
@media (min-width: 751px) {
	.btn,
	.btn a{
		transition: all 0.6s cubic-bezier(.215,.61,.355,1);
	}
	.btn:hover{
		background: #000;
	}
	.btn:hover a{
		opacity: 1;
		color: #FFF;
		background-image: url(../images/arrow_white.svg);
	}
	.btn.btn__white:hover{
		background: #FFF;
	}
	.btn.btn__white:hover a{
		color: #000;
		background-image: url(../images/arrow.svg);
	}
}
@media (max-width: 750px) {
	.btn{
		width: 100%;
	}
	.btn a{
		font-size: 16px;
	}
}

/********************************************
title
********************************************/
.contents__headline{
    text-align: center;
    line-height: 1.8;
    padding-bottom: 50px;
}
.contents__headline h2,
.contents__headline h3{
    font-weight: normal;
    font-size: 38px;
    line-height: 1.2;
    margin-bottom: 25px;
}
@media (max-width: 750px) {
    .contents__headline{
        padding-bottom: 30px;
        position: relative;
    }
    .contents__headline h2,
    .contents__headline h3{
        font-size: 28px;
        margin-bottom: 15px;
    }
}


/********************************************
backgound
********************************************/
.backgound__illlust{
    background-image: url(../images/back_about_01.png),url(../images/back_about_02.png);
    background-repeat: no-repeat;
    background-position: top left,bottom right;
}
.backgound__single__illlust{
    background-image: url(../images/back_about_05.png);
    background-repeat: no-repeat;
    background-position: top right;
}
@media (max-width: 750px) {
    .backgound__illlust{
        background-size: 70% auto,152% auto;
        background-position: -40% -0.1%,5% bottom;
    }
}


/********************************************
about image
********************************************/
.about__image{
    position: relative;
}
.about__image li{
    position: absolute;
    z-index: 1;
    border-radius: 5px;
    overflow: hidden;
}
.about__image li img{
    width: 100%;
    height: auto;
}
.about__image .photo__01{
    width: 87.296%;
    top: 140px;
    left: 0;
    border-radius: 0 5px 5px 0;
}
.about__image .photo__01 span{
    margin-left: -16px;
    border-radius: 0 5px 5px 0;
    overflow: hidden;
}
.about__image .photo__02{
    width: 34.919%;
    top: 530px;
    right: 6%;
}
@media (max-width: 750px) {
	.about__image .photo__01{
		width: 112.823%;
		top: 15vw;
		left: -17vw;
	}
	.about__image .photo__02 {
		width: 45.585%;
		top: 71vw;
		right: 0.5vw;
	}
}
/********************************************
header
********************************************/
#header{
	height: 314px;
	width: 100%;
	background-image: linear-gradient(0deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.32));
	position: absolute;
	top: 0;
	left: 0;
    z-index: 99;
	padding: 35px 40px 0;
	display: flex;
	justify-content: space-between;
	color: #FFF;
}
#header a{
	color: #FFF;
}

/********************************************
Pagetop
********************************************/

#page_top{
	width: 50px;
	height: 50px;
	position: fixed;
	right: 2%;
	bottom: 160px;
	background: #000;
	opacity: 1;
	border-radius: 50%;
  }
  #page_top a{
	position: relative;
	display: block;
	width: 50px;
	height: 50px;
	text-decoration: none;
  }
  #page_top a::before{
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	content: '\f062';
	font-size: 18px;
	color: #fff;
	position: absolute;
	width: 25px;
	height: 25px;
	top: -2px;
	bottom: 0;
	right: 0;
	left: 0;
	margin: auto;
	text-align: center;
  }

  /* ここから追加 */

  #float{
	width: 100%;
	position: fixed;
	bottom: 0;
	background: #000;
	z-index:9999;
	padding: 10px 0 10px 30px;

  }

  #float h3{
	color:#fff;
	font-weight: normal;
	text-align: center;
	margin-bottom: 1rem;
  }

  .contactBtn{
	display: flex;
	justify-content: space-between;
	max-width: 1020px;
	margin: auto;
	text-align: center;
	font-size:20px;
  }
  

  #float .mail{
border-radius: 5px;
background: linear-gradient(#d5a854 0%, #b58223 100%);
width: 500px;
  }

  #float .mail a{
	display: block;
	padding: 16px;
	width: 100%;
	color: #fff;
	vertical-align: middle;
  }

  #float .tel a{
	display: block;
	padding: 16px;
	width: 100%;
	color: #fff;
	vertical-align: middle;
  }

  #float .tel{
border-radius: 5px;
background: linear-gradient(#b7290f 0%, #9d250f 100%);
width: 500px;

}

/* 追加ここまで */


@media (min-width: 751px) {
	#header__menu .header__menu__inner,
	#header__menu .site__menu{
		display: flex;
		align-items: center;
		font-size: 14px;
		letter-spacing: 0.02em;
		line-height: 1;
	}
	#header__menu .site__menu li{
		padding:0 25px 0 0;
	}
	#header__menu .headr__online{
		display: inline-block;
		margin-left: 5px;
	}
	#header__menu .headr__online a{
		display: block;
		border:1px #FFF solid;
		padding: 14px 28px;
		margin-left: 5px;
		transition: all 0.6s ease;
	}
	#header__menu .headr__online a:hover{
		color: #1C1C1C;
		background: #FFF;
		opacity: 1;
	}
}

@media (max-width: 1250px) {
	#header__menu .site__menu li {
		padding: 0 20px 0 0;
		font-size: 13px;
	}
	#header__menu .headr__online a{
		padding: 8px 10px;
		font-size: 13px;
	}
}

@media (max-width: 1200px) {
	#header{
		height: auto;
		background-image:none;
		padding:5%;
	}
	#header .logo{
		width: 86px;
	}
	#sp__menu{
		position: fixed;
		top: 10px;
		right: 10px;
		transition : all 0.3s ease;
		font-size: 13px;
		line-height: 1;
		text-align: center;
		padding-top: 40px;
		width: 56px;
		height: 40px;
		color: #FFF;
		cursor: pointer;
		display: block;
	}

	#sp__menu.color_bank{
		color: #000;
	}
	#sp__menu:before,
	#sp__menu:after{
		content: "";
		display: block;
		width:36px;
		height: 2px;
		background: #FFF;
		position: absolute;
		top:50%;
		left:10px;
		transition : all 0.3s ease;
		margin-top:-8px;
	}
	#sp__menu.color_bank:before,
	#sp__menu.color_bank:after{
		background: #000;
	}
	#sp__menu:after{
		margin-top:8px;
	}
	#btn_name{
		transform: translateX(-2px);
		display: inline-block;
	}
	
	.open #sp__menu span.bar{
		width:0;
		height: 0;
		opacity:0;
	}
	.open #sp__menu:before{
		transform:translateY(-50%) rotate(-45deg);
		margin-top: 0;
		background: #FFF!important;
	}
	.open #sp__menu:after{
		transform:translateY(-50%) rotate(45deg);
		margin-top: 0;
		background: #FFF!important;
	}
	#header__menu{
		background: #000;
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 100%;
		padding: 70px 0 20px;
		transition: all 0.6s ease;
	}
	.open #header__menu{
		left: 0;
	}
	.header__menu__inner{
		width: 100%;
		height: 100%;
		padding: 0 5% 30px;
		overflow-y: auto;
	}
	.header__menu__inner ul{
		font-size: 20px;
		line-height: 1;
		border-bottom: 1px #4E4E4E solid;
		padding:0 0 10px;
	}
	.header__menu__inner ul li{
		margin-bottom: 40px;
	}
	.header__menu__inner ul.other__menu{
		font-size: 12px;
		padding:25px 0 10px;
	}
	.header__menu__inner ul.other__menu li{
		margin-bottom: 20px;
	}

	#header__menu .headr__online{
		display: none;
	}
	#header__menu .header__menu__inner,
	#header__menu .site__menu{
		display: block;
		font-size: 14px;
		letter-spacing: 0.02em;
		line-height: 1;
	}
	#header__menu .pchidden{
		display: block;
	}

}

/********************************************
footer
********************************************/
#footer{
	background: #EFEFEF;
	padding: 110px 0;
}
#footer .w1120{
	display: flex;
}
.foot__logo{
	width: 124px;
	margin-right: 100px;
}
.foot__menu{
	margin: 0 60px;
	white-space: nowrap;
	line-height: 1;
}
.foot__menu li{
	margin-bottom: 30px;
}
.foot__menu.other__menu{
	font-size: 12px;
}
.foot__menu.other__menu li{
	margin-bottom: 22px;
}
.foot__menu .copyright{
	margin-top: 35px;
}

.cancel{
	cursor: pointer;
	position: absolute;
	right: 2%;
  top: -30%;
}

.ftArea{
    position: relative;
    width:100%;
  }

  .ftNone{
    display: none !important;
  }

@media (max-width: 750px) {
	#footer{
		padding: 16% 8%;
	}
	.foot__menu.other__menu{
		font-size: 16px;
		margin: 0;
	}
	.foot__menu.other__menu li{
		margin-bottom: 30px;
	}
	.foot__menu .copyright {
		margin-top: 50px;
	}

	#float{
		padding: 10px;
	}
	.contactBtn{
		font-size:13px;
	}

	#float h3{
		font-size: 13px;
		letter-spacing: 0;
		margin-bottom: 13px;
	}
	#float .mail,#float .tel{
		width:49%;
	}

	#page_top{
		z-index:999999;
		bottom:140px;
	}

	.cancel{
		width: 35px;
	  top: -113%;
	  right: -6px;
	  }

}

#burn__lineup a.fade__normal {
    display: block;
}