@charset "utf-8";

/*===========================================================*/
/*機能編  7-1-32　グラデーション線から塗に変化する*/
/*===========================================================*/

.gradient4{
    /*ボタンの形状*/
    display: inline-block;
    padding: 10px 60px;
    margin: 20px 0 0 0;
    border-radius:30px;
    text-decoration: none;
    border:1px solid #fff;
    color: #fff;
    /*アニメーションの指定*/ 
    transition: all 0.4s ease-out;
}

/*hoverした際、グラデーションと影を付ける*/
.gradient4:hover,
.gradient4:hover{
    /*ボタンの形状*/
    border-color:transparent;
    color: #fff;
    /*背景の色と形状*/
    background: linear-gradient(270deg,#3bade3 0%, #9844b7 50%, #44ea76 100%);
    background-size: 200% auto;
    background-position: right center;
    /*ボックスの影*/   
    box-shadow: 0 5px 10px rgb(250,108,159,0.4);
}



/*===========================================================*/
/*機能編 6-1-3	ゆっくりズームアウトさせながら全画面で見せる*/
/*===========================================================*/
#slider {
    width: 100%;
    height: 100vh;/*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
}

/*===========================================================*/
/*機能編  9-6-3 リンクをクリックすると、背景が暗くなり動画や画像やテキストを表示*/
/*===========================================================*/

.modaal-overlay{
    background: linear-gradient(-225deg, #86fde8 0%, #acb6e5 56%, #FFBAC3 100%);
}


/*===========================================================*/
/*機能編  6-2-6 サムネイルをクリックするとグループ化された画像一覧を表示する*/
/*===========================================================*/

/*===モーダル表示のためのcss　*/

.hide-area{/*モーダル表示をする場所をあらかじめ隠す*/
	display: none;
}

.modaal-fullscreen .modaal-content-container{/*full画面の色設定*/
	 background: linear-gradient(-225deg, #55dbd9 0%, #C5C1FF 80%, #FFBAC3 100%);
	 color: #fff;
	text-align: center;
}

.modaal-fullscreen .modaal-close{/*ボタンの色、位置*/
	background:none;
	right:20px;
}

/*クローズボタンの×の色変更*/
.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before{
	background:#666;
}

/*キャプション*/
.caption{
    display: block;
    padding: 10px 0;
}

/*画像の横幅を100%にしてレスポンシブ化*/
.modaal-content-container img{
    border: 5px solid #fff;
    width:100%;
	max-width:700px;
	height:auto;
	vertical-align: bottom;/*画像の下にできる余白を削除*/
}


/*  背景が出現＋テキスト（上から） */

#bgDU,
#bgDU .mask{
    border: 5px;
    width:100%;
    display: block;
	position:relative;/*背景色とテキストの基点となる位置を定義*/
    overflow: hidden;}


#bgDU .mask::before{
	content:'';
	position: absolute;
	z-index: 2;
	left:0;
	top:0;
	opacity:0;/*透過0*/
	transition: 0.9s ease-in-out;/*移り変わる速さを変更したい場合はこの数値を変更*/
    transform: translateY(100%);
	background:rgba(255, 255, 255, 0.6);/*背景色*/
	width:100%;
	height: 100%;	
}

#bgDU:hover .mask::before{/*hoverした時の変化*/
	opacity:1;/*透過なしに変化*/
	transform: translateY(0);
}

#bgDU .cap{/*画像の上のテキスト*/
	position: absolute;
	opacity:0;/*透過0*/
	transition: 0.9s ease-in-out;/*移り変わる速さを変更したい場合はこの数値を変更*/
	z-index:3;/*テキストを前面に出す*/
	top: 50%;
    left: 50%;
	transform: translate(-50%,-50%);/*テキストの位置中央指定*/
	color:black;/*テキストの色を変えたい場合はここを修正*/
}

#bgDU:hover .cap{/*hoverした時の変化*/
	opacity:1;/*透過なしに変化*/
}



/*===========================================================*/
/* 印象編 4 最低限おぼえておきたい動き*/
/*===========================================================*/

/*== 4-6　じわっ（ぼかしから出現） ==*/

.blur{
	animation-name: blurAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
}

@keyframes blurAnime{
  from {
	filter: blur(10px);
	transform: scale(1.02);
	opacity: 0;
  }

  to {
	filter: blur(0);
	transform: scale(1);
	opacity: 1;
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.blurTrigger{
    opacity: 0;
}



/*===========================================================*/
/* 印象編　8-11　テキストが1文字づつ出現*/
/*===========================================================*/

.eachTextAnime span{opacity: 0;}
.eachTextAnime.appeartext span{ animation:text_anime_on 1s ease-out forwards; }
@keyframes text_anime_on {
	0% {opacity:0;}
	100% {opacity:1;}
}

/*===========================================================*/
/* 印象編　6-1　スクロールすると1画面移動*/
/*===========================================================*/
.box{
	display:flex;
	justify-content: center;
	align-items: center;
	text-align: center;
}

#box1{
    background:url("../img/about.jpg") no-repeat center;
    background-size: cover;
}

@media screen and (max-width:768px) { 
	#box1{
		background:url("../img/about\(1\).jpg") no-repeat center;
		background-size: cover;
}}


#box1.box{
 justify-content: flex-start;
}

#box dl{
	font-size: 1rem;
}
@media screen and (max-width:768px) { 
    #box1.box
	#box2.box
	#box3.box
	#box4.box
	#box5.box
	#box6.box
	#box7.box
	#box8.box
	{
     justify-content: center;
    } 
	
}

#box2{
    background:url("../img/box2.jpg") no-repeat center;
    background-size: cover;
}
@media screen and (max-width:768px) { 
	#box2{
		background:url("../img/box2\(1\).jpg") no-repeat center;
		background-size: cover;
}}

#box2 h3{
	color: #FFBAC3;
}

#box3{
    background:url("../img/box3.jpg") no-repeat center;
    background-size: cover;
}

@media screen and (max-width:768px) { 
	#box3{
		background:url("../img/box3\(1\).jpg") no-repeat center;
		background-size: cover;
}}

#box4{
    background:url("../img/bg_07.jpg") no-repeat center;
    background-size: cover;
}
@media screen and (max-width:768px) { 
	#box4{
		background:url("../img/bg_07(1).jpg") no-repeat center;
		background-size: cover;
}}

#box5{
    background:url("../img/box5.jpg") no-repeat center;
    background-size: cover;
}
@media screen and (max-width:768px) { 
	#box5{
		background:url("../img/box5\(1\).jpg") no-repeat center;
		background-size: cover;
}}
#box7{
    background:url("../img/box7.jpg") no-repeat center;
    background-size: cover;
	
}
@media screen and (max-width:768px) { 
	#box7{
		background:url("../img/box7\(1\).jpg") no-repeat center;
		background-size: cover;
}}

#box7.box{
	vertical-align: bottom;

   }


#box8{
    background:url("../img/box8.jpg") no-repeat center;
    background-size: cover;
	
}
@media screen and (max-width:768px) { 
	#box8{
		background:url("../img/box8\(1\).jpg") no-repeat center;
		background-size: cover;
}}

#box8.box{
	flex-direction: column;
}
/*========= ページネーションCSS ===============*/

.pagination {
	position:fixed;
	right:20px;
	top: 50%;
  	transform: translateY(-50%);
	font-size:1em;
	z-index: 10;
	list-style: none;
}

.pagination a {
	display:block;
	height:40px;
	margin-bottom:5px;
	color:#fff;
	position:relative;
	padding:4px;
}

.pagination a.active:after {
	box-shadow:inset 0 0 0 5px;
}

.pagination a .hover-text {
	position:absolute;
	right:15px;
	top:0;
	opacity:0;
	-webkit-transition: opacity 0s ease;
	transition: opacity 0s ease;
	padding-right: 15px;
}

.pagination a:hover .hover-text {
	opacity: 1;
}

.pagination a:after {
	-webkit-transition:box-shadow 0s ease;
	transition:box-shadow 0s ease;
	width:10px;
	height:10px;
	display: block;
	border:1px solid;
	border-radius:50%;
	content:'';
	position: absolute;
	margin:auto;
	top:0;
	right:3px;
	bottom:0;
}

@media screen and (max-width:768px) { 
	.pagination a .hover-text{
		display: none;
	}	
}