@charset "UTF-8";

body{
	margin: 0;
}



.all{
	background-color: #BFC0C0;
	width: 100%;
	height: 1900px;
}
.load img{width: 100%;}

/* loadingの話*/

#splash {
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 9999999;
}

#splash-logo {
 width: 100%;
 /*position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);*/
}

#splash-logo img{
 width: 100%;
}

/*========= 画面遷移のためのCSS ===============*/

/*画面遷移アニメーション*/
.splashbg{
    display: none;
}

/*bodyにappearクラスがついたら出現*/
body.appear .splashbg{
    display: block;
    content: "";
    position:fixed;
	z-index: 999;
    width: 100%;
    height: 100vh;
    top: 0;
	left: 0;
    transform: scaleY(0);
    background-color: #CF4F1F;/*伸びる背景色の設定*/
	animation-name:PageAnime;
	animation-duration:1.2s;
	animation-timing-function:ease-in-out;
	animation-fill-mode:forwards;

}

@keyframes PageAnime{
	0% {
		transform-origin:bottom;
		transform:scaleY(0);
	}
	50% {
		transform-origin:bottom;
		transform:scaleY(1);
	}
	50.001% {
		transform-origin:top;
	}
	100% {
		transform-origin:top;
		transform:scaleY(0);
	}
}

/*画面遷移の後現れるコンテンツ設定*/

#container{
	opacity: 0;/*はじめは透過0に*/
	width: 100%;
}

/*bodyにappearクラスがついたら出現*/
body.appear #container{
	animation-name:PageAnimeAppear;
	animation-duration:1s;
	animation-delay: 0.8s;
	animation-fill-mode:forwards;
	opacity: 0;
}


@keyframes PageAnimeAppear{
	0% {
	opacity: 0;
	}
	100% {
	opacity: 1;
}
}
/* loadingの話*/



/*-----ナビゲーションのスタイル-----*/
.navi{
	display: flex;
	width: 100%;
	/*要素が等間隔になるよ*/
	justify-content: space-between;
	margin-top: 1%;
}

/* ロゴのスタイル*/
.logo{
	width: 30%;
	margin-left: 4%;
	margin-top: 10px;
}
/* 親要素のdivに合わせて大きさが変わります*/

.logo img{
	width: 100%;
}

.right{
	display: flex;
}

.right .menu{
	margin-left: 20px;
	margin-top: 15px;
	width: 20px;
	margin-right: 20px;
}

.right .serch{
	margin-top: 15px;
	width: 20px;
}

.serch img{
	width: 100%;
}


.menu img{
	width: 100%;
}

.top {
	height: 1000px;
	margin-top: 2%;
}
.slide{
	width: 375px;
	margin:0 auto;
}
.slider{
	width: 100%;
	margin: 0;
    padding: 0;
    line-height: 0;
}

.slider img {
    width: 100%;
}


.slick-dots li button:before{
	font-size:10px!important;
}

.slick-dots li{
	width:20px!important;
}

.slick-dots{
	bottom: -40px!important;
}

.contents_1 {
	margin-top: 150px;
	
}

.concept p{
	font-family:YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
	font-size: 20px;
	line-height: 2.5em;
	font-weight: 100;
	letter-spacing: 0.2em;
	color: #07489E;
	text-align: center;
  }

.concept{
	margin-bottom: 150px;
}
.face p{
	font-size: 60px;
	text-align: center;
	color: #07489E;
	font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
	letter-spacing: 0.1em;
	margin-top: 10px;
	margin-bottom: 10px;
}
#sub_title {
	
}
#sub_title p{
	font-size: 20px;
	letter-spacing: 0.2em;
}
.pentagon{
	margin-left: 60px;
	padding-top: 40px;
	width: 90px;
	line-height: 100px ;
	text-align: center ;
}
	
	
.pentagon1 {
			transition: .2s ;
			transform: rotateZ( 0deg ) ;
		}
.pentagon:hover .pentagon1{
			transform: rotateZ( 360deg ) ;
		}
.pentagon2 {
			transition: .2s ;
			transform: rotateZ( 0deg ) ;
		}
.pentagon:hover .pentagon2{
			transform: rotateZ( 360deg ) ;
		}
.pentagon3 {
			transition: .2s ;
			transform: rotateZ( 0deg ) ;
		}
.pentagon:hover .pentagon3{
			transform: rotateZ( 360deg ) ;
		}

		

.pentagon1 {
    position: relative;
    width: 54px;
    border-width: 50px 18px 0;
    border-style: solid;
    border-color:#1B6D4B transparent;
}
.pentagon1:before {
    content: "";
    position: absolute;
    height: 0;
    width: 0;
    top: -85px;
    left: -18px;
    border-width: 0 45px 35px;
    border-style: solid;
    border-color: transparent transparent #1B6D4B;
}

.pentagon2 {
    position: relative;
    width: 54px;
    border-width: 50px 18px 0;
    border-style: solid;
    border-color:#F5BA1C transparent;
}
.pentagon2:before {
    content: "";
    position: absolute;
    height: 0;
    width: 0;
    top: -85px;
    left: -18px;
    border-width: 0 45px 35px;
    border-style: solid;
    border-color: transparent transparent #F5BA1C;
}
.pentagon3 {
    position: relative;
    width: 54px;
    border-width: 50px 18px 0;
    border-style: solid;
    border-color:#CF4F1F transparent;
}
.pentagon3:before {
    content: "";
    position: absolute;
    height: 0;
    width: 0;
    top: -85px;
    left: -18px;
    border-width: 0 45px 35px;
    border-style: solid;
    border-color: transparent transparent #CF4F1F;
}

.category{
	display: flex;
	align-items: center;
	margin-top: 50px;
}
.category p{
	font-size: 20px;
	font-family:YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
	font-weight: 100;
	letter-spacing: 0.2em;
	margin-left: 18px;
	color: #07489E;
}
.grade{
	display: flex;
	align-items: center;
	margin-top: 50px;
}
.grade p{
	font-size: 20px;
	font-family:YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
	font-weight: 100;
	letter-spacing: 0.2em;
	margin-left: 18px;
	color: #07489E;
}
.year{
	display: flex;
	align-items: center;
	margin-top: 50px;
	margin-bottom: 50px;
}
.year p{
	font-size: 20px;
	font-family:YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
	font-weight: 100;
	letter-spacing: 0.2em;
	margin-left: 18px;
	text-align:inherit;
	color: #07489E;
}

.text_large{
	font-size: 25px;
}

#choice_category{
	background-color: #BFC0C0;
	width: 100%;
	height: 800px;
}
#choice_category img{
	width: 95%;
}
.list{
	display: flex;
	justify-content: space-between;
	margin-right: 25px;
	margin-left: 35px;
	margin-top: 40px;
}
.list_1{
	width:350px;
}
.list_1 img{
	width: 100%;
}

.list_grade{
	margin-right: 25px;
	margin-left: 28px;
	margin-top: 70px;
	
}
.list_2{
	width:300px;
}
.list_2 img{
	width: 100%;
}


#choice_grade{
	background-color: #BFC0C0;
	width: 100%;
	height: 1700px;
}

.grade_img img{
	width: 100%;
}
.grade_img{
	width: 350px;
}

.text_one{
	margin-top: 30px;
}

.text_one p{
	font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
	color: #07489E;
	font-size: 15px;
	letter-spacing: 0.1em;
	text-align: center;
	line-height: 2.3em;
}

.pentagon_normal{
	
}
.pentagon4 {
    position: relative;
    width: 54px;
    border-width: 50px 18px 0;
    border-style: solid;
    border-color:#F5BA1C transparent;
	margin-top: 150px;
	margin-left: auto;
    margin-right: auto;
	
}
.pentagon4:before {
    content: "";
    position: absolute;
    height: 0;
    width: 0;
    top: -85px;
    left: -18px;
    border-width: 0 45px 35px;
    border-style: solid;
    border-color: transparent transparent #F5BA1C;
}

.my_work_story{
	background-color: #BFC0C0;
	height: 2070px;
}
.story_tittle{
	width: 100%;
}

.story_tittle img{
	width: 100%;
}

.story_title_text{
	margin-left: 20px;
	margin-top: 50px;
	
}
.story_title_text p{
	font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
	color: #07489E;
	letter-spacing: 0.5em;
	font-size: 17px;
	text-align: center;
	
}
.story_subtitle_text{
	margin-left: 20px;
}
.story_subtitle_text p{
	font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
	color: #07489E;
	letter-spacing: 0.3em;
	font-size: 23px;
	text-align: center;
}

.topic{
	position: relative;
	width: 360px;	
}

.topic img{
	width: 97%;
	position: absolute;
	top: 30px;
	
}
.story_new{
	width:60px;
	position: absolute;
	top: 0px;
	right: 2px;
	left: 296px;
	
}
.story_new img{
	width: 100%;
}
.story_topic_text {
	font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
	color: #07489E;
	letter-spacing: 0.2em;
	font-size: 4.7vw;
	text-align: center;
	margin-top: 460px;
	margin-left: 20px;
	line-height: 2.0em;
	width: 325px;
}

.type_1{
	letter-spacing: 0.16em;
}
.type_2{
	letter-spacing: 0.15em;
}
.type_3{
	font-weight: 600;
	letter-spacing: 0.15em;
}
.type_4{
	letter-spacing: 0.1em;
}
.type_5{
	letter-spacing: 0.14em;
}

.story_last{
	margin-top:70px;
	margin-left: 4px;
}
.story_last p{
	font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
	color: #07489E;
	font-size: 18px;
	letter-spacing: 0.25em;
	text-align: center;
}
.installation{
	width:330px;
	margin-left: 10px;
	margin-right: 10px;
}

.installation img{
	width: 100%;
}

.sns{
	background-color:#BFC0C0;
	margin-top: 0px;
	height: 300px;
}
.sns p{
	margin-top: 0;
	margin-bottom: 0;
	font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
	color: #07489E;
	font-size: 18px;
	letter-spacing: 0.25em;
	text-align: center;
}
.sns_contents img{
	width: 20%;
	height: auto;
	
}
.sns_contents{
	display: flex;
	justify-content: space-between;
	margin-right: 60px;
	margin-left: 60px;
	margin-top: 50px;
	margin-bottom: 100px;
}

.end_logo{
	margin-bottom: 15px;
}
.end_bar{
	background-color: #0B3994;
	width: 100%;
	height: 250px;
}

.twitter{
	width: 80px;
}
.youtube{
	width: 80px;
}
.facebook{
	width: 80px;
}