@charset "utf-8";

/*トップページの設定
---------------------------------------------------------------------------*/
body{	
	}

#container{
	background: linear-gradient(to right, #ededed 0%,#ffffff 10%,#ffffff 90%,#ededed 100%);	
	}	

.layer_board {
	text-align:center;
}

.bg_campaign{
border-radius:5px;width:600px;height:370px;
background:url("../event/images/5dan/0326_2.jpg") no-repeat center;
padding-top:50px;padding-left:50px;
padding-bottom:10px;padding-right:50px;
}

.layer_board .btn_close{margin-top:15px;text-align:center;}

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

/*動画表示のモーダルの余白を変更したい場合*/
.modaal-video .modaal-inner-wrapper{
  padding:0;
}

/*モーダルのボタンの色を変更したい場合*/
.modaal-close:after, 
.modaal-close:before{
  background:#FFF;
}

.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before{
  background:#414141;
}

.anshin{width:40%;}
.anshin ul li{
  text-indent: 0;
  font-weight:bold;
  border-bottom:solid 1px #CCC;font-size:18px;
}

.mb10{margin-bottom:30px;}

.sj_margin_r{margin-right:10px;}

#new{
  line-height: 1.8;
  font-size: 1rem;
}

.suuji{
  display: flex;		/*flexボックスを使う指定*/
	flex-wrap: wrap;	/*折り返す指定*/
	justify-content: space-between;	/*並びかたの種類の指定*/
	padding: 0 5px;
}

.suuji_list{  
  position: relative;
  line-height: 1.5;
  text-align: center;
  
}

.suuji_hyouji{
  font-size: 30px;
  color: #171C61;
}

.bg_movie1{
	background-color:#DDDDDD;
	padding:10px;
	border-radius:10px;	
	}
.full {
	background: #DDDDDD;
	margin: 0 calc(50% - 50vw);
	padding: 4px calc(50vw - 50% + 8px);
	padding-bottom:10px;
	width: 100vw;
}

.full2 {
	content: '';   display: block;overflow: hidden;
	background:url(../images/top/anshin_bk.jpg) no-repeat center;
	background-size:cover;
	margin: 0 calc(50% - 50vw);
	padding: 4px calc(50vw - 50% + 8px);
	padding-top:20px;
	padding-bottom:10px;
	margin-top:40px;
	width: 100vw;
}

.full5{
background: #f1faec;
background-size:cover;
	margin: 0 calc(50% - 50vw);
	padding: 0px calc(50vw - 50% + 8px);
	width: 100vw;
}

.img-wrapg {
  overflow: hidden;
  position: relative;
}

.img-wrapg::before {
  animation: img-wrapg 2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  background: #f1faec;
  content: '';
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

@keyframes img-wrapg {
  100% {
    transform: translateX(100%);
  }
}


/*「お知らせ」ブロック
---------------------------------------------------------------------------*/
/*お知らせブロック*/
#new {
	display: flex;		/*flexボックスを使う指定*/
	flex-wrap: wrap;	/*折り返す指定*/
	padding: 0 5px;		/*上下、左右へのボックス内の余白*/
}

/*日付(dt)、記事(dd)共通設定*/
#new dt,
#new dd {
	border-bottom: 1px solid #ccc;	/*下線の幅、線種、色*/
	padding: 5px 0;					/*上下、左右へのボックス内の余白*/
}

/*日付(dt)設定*/
#new dt {
	width: 10em;	/*幅。8文字(em)分。※下の「800px以上」の端末用の設定に再設定があります。*/
}

/*日付の横のマーク（共通設定）*/
#new dt span {
	display: none;	/*小さな端末では非表示にしておく。*/
}

/*bg1設定*/
#new dt span.icon-bg1 {
	background: #386091;	/*背景色*/
}

/*bg2設定*/
#new dt span.icon-bg2 {
	background: #d80000;	/*背景色*/
}

/*bg2設定*/
#new dt span.icon-bg3 {
	background: #2e6c18;	/*背景色*/
}

/*bg2設定*/
#new dt span.icon-bg5 {
	background: #171C61;	/*背景色*/
}


/*記事(dd)設定*/
#new dd {
	width: calc(100% - 10em);	/*「8em」は上の「#new dt」のwidthの値です。※下の「800px以上」の端末用の設定に再設定があります。*/
}

#new dd a{text-decoration: none;}
.zoom-box {
  display: inline-block;
  overflow: hidden;
}
.c-bnr.zoom {
  display: block;
  transition-duration: .5s;
}
.c-bnr.zoom:hover {
  transform: scale(1.2);
}

main #ans h2{line-height:1.5;}

.movie1{
	width:25%;display: inline-block;position:relative;
  overflow: hidden;text-align:center;padding:5px;
	}
	
.m_play{position:absolute;  
  bottom: 15px;right: 0;
  left: 0;
  margin: 0 auto;}

.m_play a{color:#FFF;font-weight:bold;text-decoration:none;font-size:18px;}
	
.slick-outer{position: relative;}

.slick-outer img{radial-gradient(rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .5) 100%)}
.slick-content{
  position: absolute;
  top: 45%;left: 10%; 
  z-index: 150;width:100%;text-shadow: 1px 1px 2px #000;
  color: #fff;  
  img{width: 100%;}
  margin: 0 10px;padding: 0;
  p{margin: 0;padding: 0;font-weight: bold;font-size: 20px;}
  h2{margin: 0;padding: 0;font-weight: bold;font-size: 2rem;color: #fff;}
  }

.slick-content .add-animation {
	animation: zoomUp 10s linear 0s normal both;
}

.slick-content .remove-animation {
	animation: none;
}

.overray{position: absolute;
  width:100%;height:100%;background:#000;opacity:0.3;}

.overray2{position: absolute;
  width:100%;height:100%;background:#000;opacity:0.4;}



.mainimg .slick_ft0{font-size:30px;line-height:1.5;margin-bottom:5px;font-weight:normal;
}

.mainimg .slick_ft{font-size:35px;font-weight:normal;
}
.mainimg .slick_ft2{font-size:20px;line-height:1.5;font-weight:normal;}
.mainimg .slick_ft3{font-size:20px;line-height:1.5;font-weight:normal;}

/*丸いページナビボタン全体を囲むブロック*/
.slick-dots {
	text-align: center;
	width: 100%;
	margin:0;
	line-height: 1;
	position: absolute;
	bottom: 30px;	/*下からの配置場所指定*/
}

/*丸いページナビボタン１個あたりの設定*/
.slick-dots li {
	display: inline-block;
	margin: 0 10px;
	cursor: pointer;
}

/*buttonタグ*/
.slick-dots li button {
	display: block;
	text-indent: -9999px;	/*デフォルトで文字が出るので画面の外に追い出す指定*/
	width: 10px;			/*ボタンの幅*/
	height: 10px;			/*ボタンの高さ*/
	border-radius: 50%;		/*丸くする指定*/
	cursor: pointer;		/*クリックで画像へジャンプするので、わかりやすいようhover時にpointerになるように。*/
	background: #AAA;		/*背景色。白。*/
	
}

/*buttonのアクティブ時（現在表示されている画像を示すボタン）*/
.slick-dots li.slick-active button {
	background: #FFF;	/*色*/
}

.mainimg .pict_w1{
	background:url(../images/1_pict_d_t1.jpg) no-repeat center;
	background-size: cover;
	width: 100%;
	height:calc(100dvh - 90px);
	}
	
.mainimg .pict_w2{
	background:url(../images/2_pict_d1.jpg) no-repeat center;
	background-size: cover;
	width: 100%;
	height:calc(100dvh - 90px);
	}

.mainimg .pict_w3{
	background:url(../images/3_pict_d_t1.jpg) no-repeat center;
	background-size: cover;
	width: 100%;
	height:calc(100dvh - 90px);
	}

.mainimg .pict_w4{
	background:url(../images/4_pict_d_t.jpg) no-repeat center;
	background-size: cover;
	width: 100%;
	height:calc(100dvh - 90px);
	}

.mainimg .pict_w5{
	background:url(../images/5_pict_d2.jpg) no-repeat center;
	background-size: cover;
	width: 100%;
	height:calc(100dvh - 90px);
	}

.mainimg .pict_w6{
	background:url(../images/6_pict_d3.jpg) no-repeat center;
	background-size: cover;
	width: 100%;
	height:calc(100dvh - 90px);
	}

.fadeIn{
animation-name:fadeInAnime;
animation-duration:3s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeInAnime{
  0% {
    opacity: 0;    
  }

  100% {
    opacity: 1;    
  }
}

.hen_Nashi{
animation-name:hen_nashi;
animation-duration:5s;
animation-fill-mode:forwards;
}

@keyframes hen_nashi {

  0% {
    /*transform: scale(1);*/
    transform: scale(1);
  }

  100% {
    /*transform: scale(1);*/
    transform: scale(0.97);
  }
}

@keyframes zoom-fade {

  0% {
    /*transform: scale(1.1);*/
    transform: scale(1);
  }

  100% {
    /*transform: scale(1);*/
    transform: scale(1.1);
  }
}

@keyframes fade-in {
    from {
        opacity: 0;
        transform: translateY(100px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media screen and (max-width:1400px) {
.mainimg .slick_ft0{font-size:30px;
}
}

@media screen and (max-width:1200px) {
.mainimg .slick_ft0{font-size:30px;
}
.mainimg .slick_ft2{font-size:18px;line-height:1.5;}

.mainimg .slick_ft{font-size:30px;
}
}
@media screen and (max-width:1199px) {
.mainimg .pict_w1{	
	height:calc(100dvh - 85px);	
	}

.mainimg .pict_w2{	
	height:calc(100dvh - 85px);
	}

.mainimg .pict_w3{	
	height:calc(100dvh - 85px);
	}

.mainimg .pict_w4{	
	height:calc(100dvh - 85px);
	}

.mainimg .pict_w5{	
	height:calc(100dvh - 85px);
	}

.mainimg .pict_w6{	
	height:calc(100dvh - 85px);
	}
	
}
/*---------------------------------------------------------------------------
ここから下は画面幅1100px以下の追加指定
---------------------------------------------------------------------------*/
@media screen and (max-width:1000px) {
.movie1{
    width:50%;
    }

.bg_campaign{
border-radius:5px;width:600px;height:400px;
background:url("../event/images/5dan/0326_2.jpg") no-repeat center;
padding-top:50px;padding-left:20px;
padding-bottom:10px;padding-right:20px;
}
}

/*---------------------------------------------------------------------------
ここから下は画面幅1010px以下の追加指定
---------------------------------------------------------------------------*/
@media screen and (max-width:1010px) {
.anshin{width:60%;}
}


@media screen and (max-width:999px) {
.mainimg .pict_w1{
background:url(../images/1_pict_d_tt2.jpg) no-repeat center;
}

.mainimg .pict_w2{
	background:url(../images/2_pict_d_tt2.jpg) no-repeat center;
	}

.mainimg .pict_w3{
	background:url(../images/3_pict_d_tt3.jpg) no-repeat center;
	}
.mainimg .pict_w4{
	background:url(../images/4_pict_d_tt2.jpg) no-repeat center;
	}

.mainimg .pict_w5{
	background:url(../images/5_pict_tt2.jpg) no-repeat center;
	}

.mainimg .pict_w6{
	background:url(../images/6_pict_d_tt2.jpg) no-repeat center;
	}
}

/*---------------------------------------------------------------------------
ここから下は画面幅950px以下の追加指定
---------------------------------------------------------------------------*/
@media screen and (max-width:950px) {
.full2 {
	background:url(../images/top/anshin_bk3.jpg) no-repeat center;
	}

.mainimg .slick_ft0{font-size:25px;
}

.mainimg .slick_ft{font-size:25px;
}
.mainimg .slick_ft3{font-size:16px;
}
.mainimg .slick_ft2{font-size:16px;
}
}

@media screen and (max-width:900px) {
.suuji_list{
    width:32%;padding:5px;}
}

/*---------------------------------------------------------------------------
ここから下は画面幅799px以下の追加指定
---------------------------------------------------------------------------*/
@media screen and (max-width:799px) {
.mainimg .pict_w1{
	background:url(../images/1_pict_d_tt.jpg) no-repeat center;
	background-size: cover;
	width: 100%;
	height:calc(100dvh - 145px);
	}

.mainimg .pict_w2{
	background:url(../images/2_pict_d_tt.jpg) no-repeat center;
	background-size: cover;
	width: 100%;
	height:calc(100dvh - 145px);
	}

.mainimg .pict_w3{
	background:url(../images/3_pict_d_tt.jpg) no-repeat center;
	background-size: cover;
	width: 100%;
	height:calc(100dvh - 145px);
	}

.mainimg .pict_w4{
	background:url(../images/4_pict_d_tt.jpg) no-repeat center;
	background-size: cover;
	width: 100%;
	height:calc(100dvh - 145px);
	}

.mainimg .pict_w5{
	background:url(../images/5_pict_d_t3.jpg) no-repeat center;
	background-size: cover;
	width: 100%;
	height:calc(100dvh - 145px);
	}

.mainimg .pict_w6{
	background:url(../images/6_pict_d_tt3.jpg) no-repeat center;
	background-size: cover;
	width: 100%;
	height:calc(100dvh - 145px);
	}
}

/*---------------------------------------------------------------------------
ここから下は画面幅699px以下の追加指定
---------------------------------------------------------------------------*/
@media screen and (max-width:699px) {

.wraper{
	width:100%;
	display: flex;		/*flexボックスを使う指定*/
	flex-wrap: wrap;	/*折り返す指定*/
	justify-content: space-between;	/*並びかたの種類の指定*/
	margin:0 auto;
}

.movie1{
    width:100%;
    }

iframe{
  width:100%;
  height:250px;
  }
.anshin{width:100%;}


.suuji_list{
    width:46%;}


.bg_campaign{width:100%;height:auto;padding-bottom:40px;}
.bg_campaign img{width:100%;height:auto;
}
}

/*---------------------------------------------------------------------------
ここから下は画面幅600px以下の追加指定
---------------------------------------------------------------------------*/
@media screen and (max-width:600px) {
.suuji_list{
    width:46%;}

.anshin {
      font-size: 1rem;
    }

#new {
      font-size:1rem;}
      
.movie1{
    width:100%;
    }
    
iframe{
    width:100%;
    height:200px;
    }
      
/*　※注意！　下の閉じカッコ　}　は600px以上の設定に必要なので、削除しないで下さい。　*/

}

@media screen and (max-width:599px) {
.mainimg .pict_w1{	
	background-size: cover;
	width: 100%;
	height:calc(100dvh - 135px);
	}

.mainimg .pict_w2{	
	background-size: cover;
	width: 100%;
	height:calc(100dvh - 135px);
	}

.mainimg .pict_w3{	
	background-size: cover;
	width: 100%;
	height:calc(100dvh - 135px);
	}

.mainimg .pict_w4{	
	background-size: cover;
	width: 100%;
	height:calc(100dvh - 135px);
	}

.mainimg .pict_w5{	
	background-size: cover;
	width: 100%;
	height:calc(100dvh - 135px);
	}

.mainimg .pict_w6{	
	background-size: cover;
	width: 100%;
	height:calc(100dvh - 135px);
	}
}
@media screen and (max-width:530px) {
.mainimg .slick_ft0{font-size:20px;
}

.mainimg .slick_ft2{font-size:14px;
}

.sj_margin_r{margin-right:5px;}
}

@media screen and (max-width:500px) {
.full2 {
	background:none;margin-bottom:0;margin-top:30px;	
	padding-top:0;
	padding-bottom:0;
	}

.sj_margin_r{margin-right:3px;}

.anshin{margin-bottom:0;}

}

@media screen and (max-width:499px) {
	
.slick-content{
  position: absolute;
  top: 35%;left: 0%; 
  z-index: 150;width:100%;
  color: #fff;
  img{width: 100%;}
  margin: 0 10px;padding: 0;
  p{margin: 0;padding: 0;font-weight: bold;font-size: 20px;}
  h2{margin: 0;padding: 0;font-weight: bold;font-size: 2rem;color: #fff;}
  
}
.center_sm{text-align:center;}
}

/*---------------------------------------------------------------------------
ここから下は画面幅480px以下の追加指定
---------------------------------------------------------------------------*/
@media screen and (max-width:480px) {
.suuji_hyouji{
    font-size: 24px;
  }

.anshin {
    background:none;
    font-size: 0.9rem;
  }

.anshin ul li{
 line-height:1.5;
 font-size:1em;
 }
#new {
  	display: block;}

#new dt{
    font-size: 0.9rem;
    border-bottom: none;padding-bottom:0;
    width:100%;color:#171C61;font-weight:bold;
  }
#new dd {
    font-size: 0.9rem;
    width:100%;
    }

#new dt span {
    	display: none;	/*表示なし*/
    	width: 7em;				/*幅。5文字(em)分。*/
    	background: #999;		/*背景色*/
    	color: #fff;			/*文字色*/
    	font-size:0.9rem;
    	text-align: center;
    	border-radius: 3px;
    	margin-left: 1.2em;	/*アイコンの左側に空けるスペース*/
    	align-self: flex-start;	/*高さを間延びさせない指定*/
    	line-height: 1.5;
    }
    
iframe{
    width:100%;
    height:160px;
    }

.slick-content{margin:0;padding:0;}

/*　※注意！　下の閉じカッコ　}　は480px以上の設定に必要なので、うっかり削除しないように。　*/

}

@media screen and (max-width:450px) {
.mainimg .slick_ft0{font-size:20px;
}

.mainimg .slick_ft2{font-size:14px;
}
}

@media screen and (max-width:420px) {
}

/*---------------------------------------------------------------------------
ここから下は画面幅320px以下の追加指定
---------------------------------------------------------------------------*/
@media screen and (max-width:320px) {

.suuji{font-size: 14px;}
.suuji_hyouji{
    font-size: 24px;
  }
.suuji_list{width: 100%;padding:5px;}
  
iframe{
    width:280px;
    height:160px;
    }
    
.bg_campaign{width:280px;
}

.bg_campaign img{width:80%;height:auto;
}

.mainimg .slick_ft0{font-size:18px;
}

.mainimg .slick_ft2{font-size:14px;
}
.mainimg .slick_ft{font-size:18px;
}
.mainimg .slick_ft3{font-size:14px;
}
}

@media screen and (min-width:450px) {
.br_450{display:none;}
}

/*---------------------------------------------------------------------------
ここから下は画面幅700px以上の追加指定
---------------------------------------------------------------------------*/
@media screen and (min-width:700px) {

.wraper{
	width:640px;
	display: flex;		/*flexボックスを使う指定*/
	flex-wrap: wrap;	/*折り返す指定*/
	justify-content: space-between;	/*並びかたの種類の指定*/
	margin:0 auto;
}

.anshin {
  font-size: 1rem;
}

iframe{
  width:300px;
  height:200px;
  }

.br_700{display:none;}
/*　※注意！　下の閉じカッコ　}　は700px以上の設定に必要なので、削除しないで下さい。　*/

}

@media screen and (min-width:720px) {
.br_720{display:none;}
}

/*---------------------------------------------------------------------------
ここから下は画面幅800px以上の追加指定
---------------------------------------------------------------------------*/
@media screen and (min-width:800px) {

/*　※注意！　下の閉じカッコ　}　は1000px以上の設定に必要なので、うっかり削除しないように。　*/

.br_800{display:none;}

/*「お知らせ」ブロック
---------------------------------------------------------------------------*/
/*日付(dt)設定*/
#new dt {
	width: 17em;	/*幅。14文字(em)分。*/
	display: flex;	/*flexボックスを使う指定*/
	justify-content: space-between;	/*日付とアイコンをそれぞれ端に寄せる*/
}

/*日付の横のマーク（共通設定）*/
#new dt span {
	display: inline-block;	/*表示させる、*/
	width: 6em;				/*幅。6文字(em)分。*/
	background: #999;
	color: #fff;
	font-size: 1rem;
	text-align: center;
	border-radius: 3px;
	margin-right: 1.2em;
	align-self: flex-start;	/*高さを間延びさせない指定*/
	line-height: 1.5;
	position: relative;top: 0.2em;	/*上下の配置バランスの微調整*/
}

/*記事(dd)設定*/
#new dd {
	width: calc(100% - 17em);	/*「14em」は上の「#new dt」のwidthの値です。*/
}
.wraper{
	width:660px;
	display: flex;		/*flexボックスを使う指定*/
	flex-wrap: wrap;	/*折り返す指定*/
	justify-content: space-between;	/*並びかたの種類の指定*/
	margin:0 auto;
}

iframe{
  width:320px;
  height:200px;
  }

/*　※注意！　下の閉じカッコ　}　は800px以上の設定に必要なので、削除しないで下さい。　*/
}

@media screen and (min-width:820px) {
.br_820{display:none;}

}
@media screen and (min-width:850px) {
.br_850{display:none;}
}

/*---------------------------------------------------------------------------
ここから下は画面幅1000px以上の追加指定
---------------------------------------------------------------------------*/
@media screen and (min-width:1000px) {

.wraper{
	width:860px;
	display: flex;		/*flexボックスを使う指定*/
	flex-wrap: wrap;	/*折り返す指定*/
	justify-content: space-between;	/*並びかたの種類の指定*/
	margin:0 auto;
}

iframe{
  width:310px;
  height:200px;
  }
#new dt span {
	display: inline-block;	/*表示させる、*/
	width: 7em;	
	}
/*　※注意！　下の閉じカッコ　}　は1000px以上の設定に必要なので、削除しないで下さい。　*/
}

/*---------------------------------------------------------------------------
ここから下は画面幅1200px以上の追加指定
---------------------------------------------------------------------------*/
@media screen and (min-width:1200px) {
.wraper{
	width:1050px;
	display: flex;		/*flexボックスを使う指定*/
	flex-wrap: wrap;	/*折り返す指定*/
	justify-content: space-between;	/*並びかたの種類の指定*/
	margin:0 auto;
}

iframe{
  width:310px;
  height:220px;
  }

/*　※注意！　下の閉じカッコ　}　は1200px以上の設定に必要なので、削除しないで下さい。　*/

}

@media screen and (min-width:1300px) {
}

/*---------------------------------------------------------------------------
ここから下は画面幅1600px以上の追加指定
---------------------------------------------------------------------------*/
@media screen and (min-width:1600px) {
.wraper{
	width:1300px;
	display: flex;		/*flexボックスを使う指定*/
	flex-wrap: wrap;	/*折り返す指定*/
	justify-content: space-between;	/*並びかたの種類の指定*/
	margin:0 auto;
}
  
iframe{
  width:310px;
  height:200px;
  }


/*　※注意！　下の閉じカッコ　}　は1200px以上の設定に必要なので、削除しないで下さい。　*/

}
/*スワイパーを使う場合
---------------------------------------------------------------------------*/
.swiper-wrap {
  margin: 0 calc(50% - 50vw);
  max-width: 100vw;
  position: relative;
  overflow: hidden;
}

@keyframes zoom-in {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.2);
  }
}

.swiper-slide-active .slide-img,
.swiper-slide-duplicate-active .slide-img,
.swiper-slide-prev .slide-img{
  animation: zoom-in 10s linear 0s 1 normal both;  
}

.slide-text{
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 3vw;
  font-family: serif;
  font-weight: bold;
  text-shadow: 2px 2px 8px #000;
  color: #fff;
  transform: translate(-50%,-50%);
}

.slide-img img{
  object-fit: cover;
  height: 100vh;
  width: 100vw;
}

.slide-animation{
    animation: fadezoom 8s 0s forwards;
}
@keyframes fadezoom {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.2);
  }
}