@charset "utf-8";
/* Loading背景画面設定　*/
#splash {
/*fixedで全面に固定*/
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 999;
  background-image: url("../image/index/loadingback.jpg");
	background-repeat: no-repeat;/*背景画像をリピートしない*/
    background-position: center;/*背景画像の位置を中央に*/
    background-size: cover;/*背景画像が.slider-item全体を覆い表示*/
  text-align:center;
}

/* Loading画像中央配置　*/
#splash_logo {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Loading アイコンの大きさ設定　*/
#splash_logo img {
  width:260px;
}

/* fadeUpをするアイコンの動き */
.fadeUp{
animation-name: fadeUpAnime;
animation-duration:3s;
animation-fill-mode:forwards;
animation-delay: 1s;
opacity: 0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/*==================================================
スライダーのためのcss
===================================*/
.slider {
    position:relative;
	z-index: 1;
	/*↑z-indexの値をh1のz-indexの値よりも小さくして背景に回す*/
	height: 100vh;/*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
}
/*　背景画像設定　*/
.slider-item {
    width: 100%;/*各スライダー全体の横幅を画面の高さいっぱい（100%）にする*/
    height:100vh;/*各スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
}

/*矢印の設定*/

/*戻る、次へ矢印の位置*/
.slick-prev, 
.slick-next {
    position: absolute;/*絶対配置にする*/
	z-index: 3;
    top: 42%;
    cursor: pointer;/*マウスカーソルを指マークに*/
    outline: none;/*クリックをしたら出てくる枠線を消す*/
    border-top: 2px solid #ccc;/*矢印の色*/
    border-right: 2px solid #ccc;/*矢印の色*/
    height: 25px;
    width: 25px;
}

.slick-prev {/*戻る矢印の位置と形状*/
    left:2.5%;
    transform: rotate(-135deg);
}

.slick-next {/*次へ矢印の位置と形状*/
    right:2.5%;
    transform: rotate(45deg);
}

/*ドットナビゲーションの設定*/

.slick-dots {
position: relative;
z-index: 3;
text-align:center;
margin:-20px 0 0 0;
}

.slick-dots li {
    display:inline-block;
	margin:0 5px;
}

.slick-dots button {
    color: transparent;
    outline: none;
    width:8px;/*ドットボタンのサイズ*/
    height:8px;/*ドットボタンのサイズ*/
    display:block;
    border-radius:50%;
    background:#ccc;/*ドットボタンの色*/
}

.slick-dots .slick-active button{
    background:#333;/*ドットボタンの現在地表示の色*/
}


/*========= レイアウトのためのCSS ===============*/
*{
	font-family: dnp-shuei-mgothic-std, sans-serif;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;
}
ul{
	margin:0;
	padding: 0;
	list-style: none;
}

a:hover,
a:active{
	text-decoration: none;
}

h2{
	writing-mode: vertical-rl;
	font-family: 游明朝,Yu Mincho;
	color:#FFFFFF;
	position: absolute;
	z-index: 2;
	top: 50%;
	padding: 0;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	font-size:3vw;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}
.rav-tittle1{
	writing-mode: vertical-rl;
	font-family: 游明朝,Yu Mincho;
	position: absolute;
	z-index: 2;
	color:#FFFFFF;
	top: 30%;
	right: 42%;
	transform: translate(-50%, -50%);
	text-align: center;
	font-size:2vw;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.rav-tittle2{
	writing-mode: vertical-rl;
	font-family: 游明朝,Yu Mincho;
	position: absolute;
	z-index: 2;
	color:#FFFFFF;
	top: 15%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	font-size:1.8vw;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.wrapper{
	position: relative;
}
.wrapper i{
	color:#fff;
}
.wrapper i:hover{
	opacity: .8;
}
.sns{
	position: absolute;
	border-radius: 5px;
	bottom: 85px;
	z-index: 3;
	background-color: #fff;
	width: 200px;
	padding:1em;
	right: 50px;
	display: flex;
	align-items: center
}
.sns a{
	width: 60%;
}
.sns a:first-child{
	width:40%;
}
#ins{
	width: 60%
}

#fac{
	width: 100%;
}

/* 4-3 くるっ（Z 軸（右へ）） */
.rotateRightZ{
	animation-name: rotateRightZAnime;
	animation-duration:20s;
	animation-fill-mode:forwards;
}

@keyframes rotateRightZAnime{
	from{
		transform: rotateZ(0);
		}
	to{
		transform: rotateZ(360deg);
		}
}
.badge{
    position: absolute;
    z-index: 2;
    right:50px;
    bottom:170px;
    background:url("../svg/badge.svg") no-repeat center;
    background-size: cover;
    width:200px;
    height: 200px;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-duration: 20s;
}
.badge-inner{
    position: absolute;
    z-index: 3;
    right:58px;
    bottom:175px;
    width:180px;
    height: 180px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #FFFFFF;
    font-weight: bold;
    transition: all .3s;
}

.badge-inner:hover{
     bottom:180px;  
}
/*========= スクロールダウンのためのCSS ===============*/

/*=== 9-1-3 マウスが動いてスクロールを促す ====*/

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

/*下からの距離が変化して上から下に動く*/
@keyframes mousemove{
      0%{bottom:10px;}
      50%{bottom:5px;}
     100%{bottom:10px;}
 }

/*Scrollテキストの描写*/
.scrolldown3 span{
    /*描画位置*/
	position: absolute;
	left:-15px;
	bottom:115px;
    /*テキストの形状*/
	color: #eee;
	font-size: 0.7rem;
	letter-spacing: 0.05em;
}

/*マウスの中の線描写 */
.scrolldown3 span::after{
	content: "";
    /*描画位置*/
	position: absolute;
	top:10px;
	left:17px;
    /*線の形状*/
	width: 1px;
	height: 15px;
	background: #eee;
    /*線の動き1.4秒かけて動く。永遠にループ*/
	animation: mousepathmove 1.4s linear infinite;
	opacity:0;
}

/*上からの距離・不透明度・高さが変化して上から下に流れる*/
@keyframes mousepathmove{
	0%{
		height:0;
		top:10px;
		opacity: 0;
	}
	50%{
		height:15px;
		opacity: 1;
	}
	100%{
		height:0;
		top:30px;
		opacity: 0;
	}
}

/*マウスの描写 */
.scrolldown3:before {
    content: "";
    /*描画位置*/
    position: absolute;
    bottom:70px;
    left:-10px;
    /*マウスの形状*/
	width:25px;
	height:37px;
	border-radius: 10px;
	border:1px solid #eee;
}


/*マウスの中の丸の描写*/
.scrolldown3:after{
	content:"";
    /*描画位置*/
	position: absolute;
	bottom:95px;
	left:0;
    /*丸の形状*/
	width:5px;
	height: 5px;
	border-radius: 50%;
	border:1px solid #eee;
}

.news{width:70%;margin:2em auto 0;}
.news h3{border-bottom:solid;padding-bottom:1vw;text-align: center;}
.news-contents{display:-webkit-flex;display:flex;border-bottom:thin solid;padding:1vw;transition:0.5s;flex-wrap: wrap}
.news-contents:hover{background-color:#E1E0E0;transition:0.5s;}
.news-contents h4{color:#fff;margin-right:5vw}
.news-contents p{padding:.5vw 0;}
.news-contents span{font-weight:700;padding-right:2vw}
.yellow{background-color:#e6c179}
.pink,.yellow,.green,.blue{padding:.5vw 2vw;border-radius:10px}
.pink{background-color:#e9739b}
.green{background-color:#9CAF8A}
.blue{background-color:#6FC3AF}

.about{margin:3vw auto 0;width:70%}
.about img{width:100%;height: auto}
.about a{transition:.5s;}
.about a:hover{opacity:.8;transition:.5s}

@media screen and ( min-width : 770px ){
.slider-item01 {
    background:url("../image/index/index-hero1.jpg");
}

.slider-item02 {
    background:url("../image/index/index-hero4.gif");
}

.slider-item03 {
    background:url("../image/index/index-hero2.jpg");
}
.slider-item04 {
    background:url("../image/index/index-hero3.jpg");
}
.slider-item05 {
    background:url("../image/index/index-hero5.jpg");
}
.slider-item {
    background-repeat: no-repeat;/*背景画像をリピートしない*/
    background-position: center;/*背景画像の位置を中央に*/
    background-size: cover;/*背景画像が.slider-item全体を覆い表示*/
}
}

@media screen and ( max-width : 770px ){
/* Loading画像中央配置　*/
#splash_logo {
	position: absolute;
	top: 45%;
	left: 50%;
	transform: translate(-50%, -50%);
}
#splash_logo img{
	width:100%
}
.slider-item01 {
    background:url("../image/index/index-heromb1.jpg");
}

.slider-item02 {
    background:url("../image/index/index-heromb4.gif");
}

.slider-item03 {
    background:url("../image/index/index-heromb2.jpg");
}
	
.slider-item04 {
    background:url("../image/index/index-heromb3.jpg");
}

.slider-item05 {
    background:url("../image/index/index-heromb5.jpg");
}
.slider-item {
    background-repeat: no-repeat;/*背景画像をリピートしない*/
    background-position: center;/*背景画像の位置を中央に*/
    background-size: cover;/*背景画像が.slider-item全体を覆い表示*/
}
h2{
	font-size:7vw;
}
.rav-tittle1{
	top: 32%;
	right: 30%;
	font-size:4vw;
}
.rav-tittle2{
	top: 28%;
	font-size:5vw;
}
.sns{
	bottom: 130px;
	right: 14px;
	width: 120px;
	padding:10px;
	z-index: 500;
}
.sns a:first-child{
	width:30%;
}
.sns a{
	width: 70%;
}
#ins{
	width: 80%
}
.badge{
    right:25px;
    bottom:200px;
    width:100px;
    height: 100px;
}
.badge-inner{
    right:16px;
    bottom:155px;
	font-size:0.6em;
	width: 120px
}

.badge-inner:hover{
     bottom:155px;  
}	
/*Scrollテキストの描写*/
.scrolldown3 span{
	bottom:185px;
}

/*マウスの描写 */
.scrolldown3:before {
    bottom:140px;
}


/*マウスの中の丸の描写*/
.scrolldown3:after{
	bottom:160px;
}
	
.news{width:90%;}
.news h3{padding-bottom: 2vw}
.news-contents{padding:2vw;flex-wrap: wrap}
.pink,.yellow,.green,.blue{margin-bottom: 2vw}
.news-contents p{width: 100%;margin-left:2vw}
.news-contents span{padding-bottom:2vw;width:100%;display: inline-block}
.about{width:90%}
.footer-jimyo{width:90%;margin:auto; text-align:center;color:#fff;padding-top:20px}
.footer-jimyo strong{font-size:1.5em;font-weight:700}
.copyright{font-size:.8em;padding-top:10px}
}