@charset "utf-8";

body{background:#393e3d;
font-family: 'Noto Serif JP', serif;
color: #ffffff;
font-size:1em;
line-height:1.85;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
word-wrap: break-word;
letter-spacing: -0.001em;		/* iOS4でのテキストの隙間への対応 */
-webkit-text-size-adjust: 100%;		/* 文字サイズの自動調整機能のキャンセル */}
body.appear{background:#393e3d;}
#container{overflow-x: hidden;}

/* header 6-7 ===========================================*/
#header{position: relative; width: 100%; height:100vh; overflow: hidden;}
#header-img{position: fixed;/*背景を固定するためfixedをかける*/
z-index: 1;/*#container,#footerよりも下に配置するために数値を小さくする*/
top: 0;/*topの位置がJSで変化*/
width: 100%;
height:100vh;
background: url("../imgs/header-img.jpg") no-repeat top center;/*背景画像の設定*/
background-size:cover;
transform-origin:center;}

.header-area{position: fixed; width: 90%;
left:50%;
top:50%;
transform: translate(-50%,-50%);
z-index: 2;
color: #ffffff;
text-align: center;
padding: 0;}

.header-area h1{display: block; font-weight: normal; font-size: 2.8em; line-height: 1.2; letter-spacing: 0; padding: 0 10px;}
.header-area p{letter-spacing: 0.4em; margin: 18px 0 0 0; font-size: 1em;}

#container,
#footer{
position: relative;/*#header-imgよりも配置を上にするためにrelativeをつける*/
z-index: 3;/*#header-imgよりもz-indexの値を大きな数値にして上に表示*/
background:#f8f9fa;
}


/* lead ***************************************/
#lead{display: flex; flex-wrap: wrap; justify-content: space-between; padding: 0; border-bottom: solid 1px #eae1d7;}
#lead .lead-img{width:50%; min-height: 430px;
background: url("../img/lead.jpg") no-repeat center;
background-size: cover;
}

#lead .lead-area{width:50%; text-align: center;
/*display: flex;*/
/*flex-wrap: wrap;*/
/*justify-content:space-around;*/
/*flex-direction: row-reverse;*/
}

#lead .lead-area h2,
#lead .lead-area p,
#lead .lead-area .lead-btn {
/*-ms-writing-mode: tb-rl;
-webkit-writing-mode: vertical-rl;
writing-mode: vertical-rl;
text-orientation: upright;*/
}

#lead .lead-area h2{/*width:28%;*/ line-height:2.0; font-size:1.5rem; margin: 28px auto;}
#lead .lead-area p{/*width:48%;*/ line-height: 1.8; margin: 0 auto 18px;}
#lead .lead-area .lead-btn{margin: 50px auto 0;/*width:10%; position: relative; top: 0px;*/}
/*#lead .btn04{padding:20px 15px;}*/

/*=====================================================================================*/
@media screen and (max-width:768px) {
#lead{flex-direction: column-reverse; padding: 22px 0 0;}
#lead .lead-img,
#lead .lead-area{width:100%;}
#lead .lead-img{min-height: 250px;}
#lead .lead-area{margin: 0 0 18px 0; min-height: 20em; justify-content: center;}
}




/* content-title  -----------------*/
.content-title {text-align:center; margin:0 auto; padding: 48px 0 0; background-color:#f2ede7;}
.content-title h2 {margin:0 auto 0; color: #534741; letter-spacing:2px; position: relative; text-align: center;}
.content-title h2 span {position: relative; z-index: 2; display: inline-block; margin: 0 4em; padding: 0 1em; background-color: #f2ede7; text-align: center;}
.content-title h2::before {position: absolute; top: 50%; z-index: 1; 
content: '';
display: block;
width: 100%; height: 1px;
background: #f2ede7;
background: -webkit-linear-gradient(-45deg, transparent, #534741 10%, #534741 90%, transparent);
background: linear-gradient(-45deg, transparent, #534741 10%, #534741 90%, transparent);}

/* related_stage-content ---------------------------------------*/
.related_stage-content {text-align:left; background-color:#f2ede7; margin:0 auto; padding:22px 0; color: #534741;}
.related_stage-content p {margin:0 auto 18px; line-height:2;}
.related_stage-content p.eria-topmargin{margin:48px auto 0;}
.related_stage-content h1 {color: #534741;}
.related_stage-content h2 {color: #534741;}
.related_stage-content h3 {color: #534741; margin:48px auto; text-align:center;}

/* related_stage000 ---------------------------------------*/
.related_stage000 {text-align:left; background-color:#f2ede7; margin:0 auto; padding:88px 0; color: #534741;}
.related_stage000 h1 {color: #534741;}
.related_stage000 h2 {color: #534741;}
.related_stage000 h3 {color: #393e3d; margin:33px auto; text-align:center;}

/* related_stage001 ---------------------------------------*/
.related_stage001 {text-align:center; background-color:#ffffff; margin:0 auto; padding:88px 0;
background: url("../imgs/related_stage001-bkg.jpg") no-repeat center;/*背景画像の設定*/
background-size:cover;}
.related_stage001 p {margin:88px auto;}

/* related_stage002 ---------------------------------------*/
.related_stage002 {text-align:left; background-color:#f2ede7; margin:0 auto; padding:88px 0; color: #534741;}
.related_stage002 h2 {color: #534741; margin:48px auto 0; text-align:center;}
.related_stage002 h3 {color: #534741; margin:18px auto; text-align:center;}
.related_stage002 i {margin:0 8px;}

/* related_stage003 ---------------------------------------*/
.related_stage003 {text-align:left; background-color:#ffffff; margin:0 auto; padding:0;
background: url("../imgs/related_stage003-bkg.png") center;/*背景画像の設定*/
background-repeat: no-repeat;
/*background-size:1024px;*/
background-size:contain;}
.related_stage003 p{margin:0 auto; padding:88px 0;}

/* related_infoinformation ---------------------------------------*/
.related_infoinformation {background-color:#534741; margin:0 auto; padding:88px 0; color: #ffffff;}
.related_infoinformation .eria-left {float: left; width: 60%; margin:0 auto; padding:0.125%; text-align:center;}
.related_infoinformation .eria-middle {float: left; width: 20%; margin:0 auto; padding:0.125%; text-align:left;}
.related_infoinformation .eria-right {float: right; width: 20%; margin:0 auto 0; padding:0.125%; text-align:left;}
.related_infoinformation a:link,
.related_infoinformation a:visited {color: #ffffff; text-decoration: none;}
.related_infoinformation a:hover,
.related_infoinformation a:active {color: #d2a99a; text-decoration: none;}

/* footer -------------------------------------------------*/
#footer{width: 100vw; margin:0 auto 0; padding:18px 0 88px; background-color: #393e3d; color: #ffffff; border-top: 1px solid #cccccc;}
footer a:link,
footer a:visited {color: #ffffff; text-decoration: none;}
footer a:hover,
footer a:active {color: #d2a99a; text-decoration: none;}

.company_nav {overflow: hidden; float: left; font-size:0.8em;}
.company_nav ul{margin: 0; padding: 0; list-style: none}
.company_nav li {float: left; margin: 0 8px; padding: 0;}
.company_nav li a:before {color:#ffffff; margin:0 4px; font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f105";}
.company_nav li.none {display: none;}
address {overflow: hidden; font-size: 0.8em; float: right;}

#footer #page-top span{
display: inline-block;
width: 13px;
height: 13px;
border-top: 4px solid #ffffff;
border-left: 4px solid #ffffff;
transform: rotate(45deg);
}