@charset "utf-8";

/*==========================================
 body
===========================================*/
body {width: 100vw;
color:#333333;
text-align: left;
line-height: 1.8;
letter-spacing: -0.001em;		/* iOS4でのテキストの隙間への対応 */
-webkit-text-size-adjust: 100%;		/* 文字サイズの自動調整機能のキャンセル */}


/*==========================================
 demo.css
===========================================*/
html, body, .container, .content-wrap {
overflow: hidden;
width: 100%;
height: 100%;}

.container {background: #ffffff;}

.content-wrap {
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}

.content {position: relative; /*background: #b4bad2;*/}
/* Overlay */
.content::before {
position: absolute;
top: 0;
left: 0;
z-index: 10;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.8);
content: '';
opacity: 0;
-webkit-transform: translate3d(100%,0,0);
transform: translate3d(100%,0,0);
-webkit-transition: opacity 0.4s, -webkit-transform 0s 0.4s;
transition: opacity 0.4s, transform 0s 0.4s;
}


/*==========================================
 topCSS
===========================================*/
/* codrops-header ---------------------------------------*/
.codrops-header {
position: relative;
height: 100vh;
overflow: hidden;
-webkit-scroll-behavior: smooth;
scroll-behavior: smooth;
-webkit-scroll-snap-type: mandatory;
scroll-snap-type: mandatory;
-webkit-scroll-snap-points-y: repeat(100vh);
scroll-snap-points-y: repeat(100vh);}

.codrops-header:before {
  content: "";
  position: absolute;
  height: 300px;
  width: 300%;
  background: #0059b2;
  bottom: -200px;
  left: -100%;
  -webkit-transform: rotate(4deg);
  -ms-transform: rotate(4deg);
  -o-transform: rotate(4deg);
  transform: rotate(4deg);
}

.codrops-header h1 {font-size: 1em; color: #333333;}
.codrops-header h1 span {display: block; }
.codrops-header p {font-size: 1.08em; font-weight:normal; margin:18px auto; color: #ffffff; letter-spacing:2px;}

/* top_menu ------------------------------------------------*/
.codrops-header .top_menu{padding: 10px; text-align:right;}
.codrops-header.top_menu ul,
.codrops-header .top_menu ol{margin: 0; padding: 0; line-height: 1.4; list-style: none;}
.codrops-header .top_menu li a{display: block;
font-size: 1.08em;
padding: 10px;
color: #333333;
text-decoration: none;}

.codrops-header .top_menu li a:hover{background-color: #eeeeee;}
.codrops-header .top_menu li{float:right;}
.codrops-header .top_menu ul:after,
.codrops-header .top_menu ol:after	{content: ""; display: block; clear: both;}
.codrops-header .top_menu ul,
.codrops-header .top_menu ol{*zoom: 1;}
.codrops-header .top_menu li a{padding: 2px 20px; border-left: solid 1px #888888;}
.codrops-header .top_menu li:first-child a	{border-right: solid 1px #888888;}

/* related_stage-001 ---------------------------------------*/
.related_stage-001 {width: 100vw; text-align:left; margin:0 auto; color:#ffffff; background: #0059b2;}
.related_stage-001 p {margin:18px auto; letter-spacing:2px;}
.related_stage-001 h3 {color:#ffffff;}


/* related_stage-0_80 ---------------------------------------*/
.related_stage-0_80 {text-align:center;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 80px 100vw;
  border-color: transparent transparent transparent #0059b2;
}

/* related_stage-002 ---------------------------------------*/
.related_stage-002 {width: 100vw; text-align:left;}
.related_stage-002 p {margin:0 auto 8px; letter-spacing:1px;}
.related_stage-002 h2 {font-size: 1.18em; font-weight: normal; margin:0; color: #333333; letter-spacing:1px; position: relative; text-align: center;}
.related_stage-002 h2 span {
	position: relative;
	z-index: 2;
	display: inline-block;
	margin: 0 4em;
	padding: 0 1em;
	background-color: #ffffff;
	text-align: left;
}
.related_stage-002 h2::before {
	position: absolute;
	top: 50%;
	z-index: 1;
	content: '';
	display: block;
	width: 100%;
	height: 1px;
	background: #cccccc;
	background: -webkit-linear-gradient(-45deg, transparent, #cccccc 10%, #cccccc 90%, transparent);
	background: linear-gradient(-45deg, transparent, #cccccc 10%, #cccccc 90%, transparent);
}


/* related_stage-003 ---------------------------------------*/
.related_stage-003 {width: 100vw; text-align:center;}
.related_stage-003 p {margin:0 auto 28px; letter-spacing:1px;}
.related_stage-003 h2 {font-size: 1.18em; font-weight: normal; margin:0; color: #333333; letter-spacing:1px; position: relative; text-align: center;}
.related_stage-003 h2 span {
	position: relative;
	z-index: 2;
	display: inline-block;
	margin: 0 4em;
	padding: 0 1em;
	background-color: #ffffff;
	text-align: left;
}
.related_stage-003 h2::before {
	position: absolute;
	top: 50%;
	z-index: 1;
	content: '';
	display: block;
	width: 100%;
	height: 1px;
	background: #cccccc;
	background: -webkit-linear-gradient(-45deg, transparent, #cccccc 10%, #cccccc 90%, transparent);
	background: linear-gradient(-45deg, transparent, #cccccc 10%, #cccccc 90%, transparent);
}


/* related_stage-004 
.related_stage-004 {text-align:center;}
---------------------------------------*/

/* related_stage-005 ---------------------------------------*/
.related_stage-005 {width: 100vw; text-align:center;}

/* related_stage-info ---------------------------------------*/
.related_stage-info {width: 100vw; text-align:center; color:#ffffff;}

.related_stage-info .eria-left {text-align:left;}
.related_stage-info .eria-right {text-align:center;}
.related_stage-info h2 {font-size: 1.18em; font-weight:400; margin:0 auto; color: #ffffff; /*letter-spacing:1px;*/}
.related_stage-info h2 span {font-size: 0.7em; margin: 0 8px 0 0; padding:0; display: block;}
.related_stage-info p {margin: 0 0 18px;}
.related_stage-info a:link {text-decoration: none; color:#ffffff;}
.related_stage-info a:visited {text-decoration: none; color:#ffffff;}
.related_stage-info a:hover {text-decoration: none; color: #888888;}
.related_stage-info a:active {text-decoration: none; color: #888888;}


/*==========================================
 footer
===========================================*/
#footer {width: 100vw; margin:0 auto;
background-color: #ffffff;
color: #333333;
}

footer a:link,
footer a:visited {color: #333333; text-decoration: none;}
footer a:hover,
footer a:active {color: #b4835b; text-decoration: none;}
.footer_nav {overflow: hidden; float: left;}
.footer_nav ul{margin: 0; padding: 0; list-style: none}
.footer_nav li {float: left; margin: 0 8px; padding: 0;}
.footer_nav .fas{margin:0 4px 0 0;}
.company {overflow: hidden; float: left; font-size:0.8em;}
.company ul{margin: 0; padding: 0; list-style: none}
.company li {float: left; margin: 0 8px; padding: 0;}
.company .fas{margin:0 4px 0 0;}
.company li.none {display: none;}
address {overflow: hidden; font-size: 0.88em; float: right;}

/*==========================================
 footer_fixedarea 固定フッターPCc Tbios off
===========================================*/
#footer_fixedarea {z-index: 777; margin:0 auto; padding: 3px 0; text-align: center; font-size: 1.8em;}


/*==========================================
 contentCSS
===========================================*/
.content-header {width: 100vw; margin:0 auto; padding:0 0 100px; text-align:right; background-color:#0059b2;}
.content-header h1 {font-size: 1.48em; font-weight:normal; color: #ffffff; margin:0 auto; padding:8px 38px; letter-spacing:1px; line-height: 1.4em;}
.content-header h1 span {display: block; font-size: 0.5em; font-weight:normal; color: #b7a811; margin:0; letter-spacing:normal; line-height: 0.5em;}
.content-header:after {
content: "";
background-repeat: no-repeat;
display: block;
height: 100px;
position: absolute;
width: 100%;
background: url("../dist/separate001.svg");
}


/* content_stage ------------------------------------------------------------*/
.content_stage {width: 100vw;}
.content_stage section {width: 100%; margin:8px auto 0; padding: 0;}
.content_stage article {width: 100%; margin:8px auto 0; padding: 0;}
.content_stage aside {width: 100%; margin:48px auto 0; padding: 0; }
.content_stage .eria-left {text-align:left;}
.content_stage .eria-right {text-align:left;}
.content_stage p {margin:8px auto; letter-spacing:1px;}
.content_stage p.eria-tab{margin:0 18px; padding:0;}
.content_stage p.textprice {margin:0 auto 0; color:#aaaaaa; font-size:1.18em; font-weight: bold; letter-spacing:3px;}

/* content_stage-info ---------------------------------------*/
.content_stage-info {margin: 28px auto; padding:0; width: 100vw; text-align:center; color:#ffffff;
background-image: url(../images/bkg/related_stage-info_bg.jpg);
background-size:cover;
background-repeat: no-repeat;
background-position:right top;}

.content_stage-info .eria-left {text-align:center;}
.content_stage-info .eria-right {text-align:center;}

.content_stage-info p {margin: 0 0 18px;}
.content_stage-info a:link {text-decoration: none; color:#ffffff;}
.content_stage-info a:visited {text-decoration: none; color:#ffffff;}
.content_stage-info a:hover {text-decoration: none; color: #888888;}
.content_stage-info a:active {text-decoration: none; color: #888888;}