.pc_hide{
	display: none;
}

.contents_area_left{
	left: 40px;
}

.contents_area_right{
	right: 40px;
}

#area1_1{
	float: left;
	position: relative;
	top: 80px; 
  	width: 80%;
  	min-height: calc(100vh - 80px);
  	background-position: top left;
  	background-size: cover;
	background-image: url(../img/istockphoto-576711866-2048x2048.jpg);
}

#area1_1::before{
  content: '';
  /* ↓暗いオーバーレイを半透明で配置 */
  background-color: rgba(0, 0, 0, .1);
  /* ↓全体を覆うように配置 */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
}

#area1_2{
	float: left;
	position: relative;
	top: 80px;
	text-align: center;
	width: 20%;
  	min-height: calc(100vh - 80px);
	background-color: #ffffff;
}

.h1_area h1, .h2_area h2{
	font-size: 80px;
}

#font_area{
	width: 40px;
	height: 200px;
	margin: 80px auto 0;
}

#font_area p{
	position: absolute;
	font-size: 40px; 
	top: 80px;
}

#area1_font_linear{
	background: linear-gradient(#000000, #ffffff);
	margin: 15px auto 0;
	height: 200px;
	width: 1px;
}

.more_btn_area{
	margin-top: 15px;
	background-color: #fff;
	width:-moz-fit-content; /* Firefox */
  	width:fit-content; /* other browsers */
}

.more_btn_area a, .more_btn_area_right a{
	padding: 20px;
	text-align: center;
	line-height: 50px;
}

.scroll_linear_area_top{
	width: 5%;
	float: right;
	position: relative;
    bottom: 200px;
}

.scroll_linear_area_right{
	width: 5%;
	float: right;
	position: absolute;
  	bottom: 10px;
  	right: 0;
}

.sub_contents_area_right{
  	top: 60px;
  	right: 180px;
}

.sub_contents_area_left p, .sub_contents_area_right p{
	font-size: 18px;
}

#scroll_linear_area2{
    width: 5%;
    float: right;
    position: absolute;
    bottom: 10px;
    right: 0
}

#area3_contents_area_inner{
	position: relative;
}

.more_btn_area_right{
	float: right;
}

.sub_contents_area_left{
	top: 60px;
  	left: 180px;
}

.scroll_linear_area_left{
    width: 5%;
    float: right;
    position: absolute;
    bottom: 10px;
    left:  0;
}