*{
	margin: 0;
	padding: 0;
}
html{
	overflow:auto;
}
body{
	overflow:hidden; min-widsh: 600px;
}

/* eyecatch */
.eyecatch_area{
	width: 100%;
	position: relative;
	min-height: 675px;
}
.eyecatch_area::after{
	content:"";
	position: absolute;
	z-index: 20;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: black;
	opacity: 0.5;
}
.main_logo{
	position: absolute;
	left: 440px;
	top: 30px;
	width: 350px;
	z-index: 40;
}
.caption{
	position: absolute;
	left: 0px;
	top: 100px;
	width: 800px;
	z-index: 30;
}
.bunner_container{
	position: absolute;
	width: 100%;
	top: 350px;
	height: 210px;
	overflow: hidden;
	display: flex;
	justify-content: space-around;
	z-index: 30;
}
.bunner_size{
	width: 25%;
	display: flex;
}
.bunner{
	object-fit: contain;
}
.link_bunner{
	width: 100%;
}
.flash_txt{
	position: absolute;
	right: 80px;
	bottom: 50px;
	z-index: 30;
}
.flash_txt p{
	font-size: 2.0em;
	color: #EFEFEF;
}
.glowAnime span{opacity: 0;}

/*アニメーションで透過を0から1に変化させtext-shadowをつける*/
.glowAnime.glow span{ animation:glow_anime_on 1s ease-out both; }

@keyframes glow_anime_on{
	0% { opacity:0; text-shadow: 0 0 0 #fff,0 0 0 #fff;}
	50% { opacity:1;text-shadow: 0 0 10px #fff,0 0 15px #fff; }
	100% { opacity:1; text-shadow: 0 0 0 #fff,0 0 0 #fff;}
}
.eyecatch_pic_area{
	position: absolute;
	right: 0;
	top: 0;
	width: 900px;
	height: 675px;
}
.e_pic{
	position: absolute;
	height: 50%;
	
	background-image: url(../images/eyecatch.png);
	background-repeat: no-repeat;
	background-size: 300% 200%;
}
.pic1{
	width: 33%;
	top: 0;
	left: 0;
	background-position: 0 0;
	animation: 0.5s pic_anm1 2.5s both ease-out;
}
@keyframes pic_anm1{
	0%{
		transform: translateY(100%);
	}
	100%{
		transform: translateY(0);
	}
}
.pic2{
	width: 33%;
	top: 0;
	left: 33%;
	background-position: 50% 0%;
	animation: 0.5s pic_anm2 2s both ease-out;
}
@keyframes pic_anm2{
	0%{
		transform: translateX(-100%);
	}
	100%{
		transform: translateX(0);
	}
}
.pic3{
	width: 34%;
	top: 0;
	left: 66%;
	background-position: 100% 0%;
	animation: 0.5s pic_anm3 0.5s both ease-out;
}
@keyframes pic_anm3{
	0%{
		transform: translateY(100%);
	}
	100%{
		transform: translateY(0);
	}
}
.pic4{
	width: 33%;
	top: 50%;
	left: 0;
	background-position: 0 100%;
	animation: 2s pic_anm4 3s both;
}
@keyframes pic_anm4{
	0%{
		opacity:0;
		/* transform: translateX(100%); */
	}
	100%{
		opacity:1;
		/* transform: translateX(0); */
	}
}
.pic5{
	width: 33%;
	top: 50%;
	left: 33%;
	background-position: 50% 100%;
	animation: 0.5s pic_anm5 1.5s both ease-out;
}
@keyframes pic_anm5{
	0%{
		transform: translateY(-100%);
	}
	100%{
		transform: translateY(0);
	}
}
.pic6{
	width: 34%;
	top: 50%;
	left: 66%;
	background-position: 100% 100%;
	animation: 0.5s pic_anm6 1s both ease-out;
}
@keyframes pic_anm6{
	0%{
		transform: translateX(-100%);
	}
	100%{
		transform: translateX(0);
	}
}
/*=== 9-1-4 矢印が動いてスクロールを促す  ====*/

/*スクロールダウン全体の場所*/
.scrolldown4{
    /*描画位置※位置は適宜調整してください*/
	position:absolute;
	bottom:1%;
	right:50%;
    /*矢印の動き1秒かけて永遠にループ*/
	animation: 1s arrowmove 3s ease-in-out infinite;
	z-index: 30;
}

/*下からの距離が変化して全体が下→上→下に動く*/
@keyframes arrowmove{
      0%{bottom:1%;}
      50%{bottom:3%;}
     100%{bottom:1%;}
 }

/*Scrollテキストの描写*/
.scrolldown4 span{
    /*描画位置*/
	position: absolute;
	left:-20px;
	bottom:10px;
    /*テキストの形状*/
	color: #eee;
	font-size: 0.7rem;
	letter-spacing: 0.05em;
	/*縦書き設定*/
	-ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
}

/* 矢印の描写 */
.scrolldown4:before {
    content: "";
    /*描画位置*/
    position: absolute;
    bottom: 0;
    right: -6px;
    /*矢印の形状*/
    width: 1px;
    height: 20px;
    background: #eee;
    transform: skewX(-31deg);
}

.scrolldown4:after{
	content:"";
    /*描画位置*/
	position: absolute;
	bottom:0;
	right:0;
    /*矢印の形状*/
	width:1px;
	height: 50px;
	background:#eee;
}

/* sp */
@media screen and (max-width: 900px){
.eyecatch_area{
	width: 100%;
	position: relative;
	min-height: 375px;
	margin-bottom: 112px;
}
	.main_logo{
	position: absolute;
	right: 10px;
	top: 10px;
	max-width: 60%;
	width: 300px;
	z-index: 30;
	left: auto;
}
.caption{
	position: absolute;
	left: 0px;
	top: 110px;
	width: 100%;
	z-index: 30;
}
.bunner_container{
	position: absolute;
	width: 100%;
	top: 377px;
	height: 100px;
	overflow: hidden;
	display: flex;
	justify-content: space-around;
	z-index: 30;
}
.flash_txt{
	position: absolute;
	left: 20px;
	bottom: 60px;
	z-index: 30;
}
.flash_txt p{
	font-size: 2.0em;
	color: #EFEFEF;
}
.glowAnime span{opacity: 0;}

/*アニメーションで透過を0から1に変化させtext-shadowをつける*/
.glowAnime.glow span{ animation:glow_anime_on 1s ease-out both; }

@keyframes glow_anime_on{
	0% { opacity:0; text-shadow: 0 0 0 #fff,0 0 0 #fff;}
	50% { opacity:1;text-shadow: 0 0 10px #fff,0 0 15px #fff; }
	100% { opacity:1; text-shadow: 0 0 0 #fff,0 0 0 #fff;}
}
.eyecatch_pic_area{
	position: absolute;
	right: 0;
	top: 0;
	width: 500px;
	height: 375px;
}
.e_pic{
	position: absolute;
	height: 50%;
	
	background-image: url(../images/eyecatch_sp.png);
	background-repeat: no-repeat;
	background-size: 300% 200%;
}
}
/* sp */
/* eyecatch ここまで */

/* Main contents */
.content_bg{
	padding-top: 1em;
	padding-bottom: 50px;
	background-image: url(../images/content_bg.svg);
}
.content_area{
	width: 80%;
	margin-left: auto;
	margin-right: auto;
	background-color: rgba(255,255,255,0.5);
	padding-top: 1em;
	padding-bottom: 50px;
}
.content_area h2{
	background: #dfefff;
	box-shadow: 0px 0px 0px 5px #dfefff;
	border: dashed 1px #96c2fe;
	padding: 0.2em 0.5em;
	color: #454545;
	margin: 1em;
}
.content_area h3{
  padding: 0.2em;/*文字周りの余白*/
  color: #494949;/*文字色*/
  background: #fffaf4;/*背景色*/
  border-left: solid 5px #ffaf58;/*左線（実線 太さ 色）*/
	box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .5);
	margin: 1em;
	width: fit-content;
}
.content_area p{
	margin: 0 1.5em;
}