@charset "UTF-8";
/* ================================================ */
/*  レイアウト										*/
/* ================================================ */
/*  テキスト関係  */
a{ 			text-decoration:none ;}
a:link{ 	text-decoration:none ; 		color:#666666 ;}
a:visited{ 	text-decoration:none ; 		color:#666666 ;}
a:hover{ 	text-decoration:underline ; color:#666666 ;}
a:active { 	text-decoration:none ;		color:#666666 ;}



/*------------------------------------------*/
/*  ボデー				　　*/
/*------------------------------------------*/
body{
	width:100% ;
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	color:#696969 ;
}

	/*  全体  */
	#body_section{
		min-width:1000px ;
 		width:100% ;
		position:relative ;
		margin:0 auto ;
	}

		/*  全体インナー  */
		#bodyInner_section{
			position:relative ;
			margin:0 auto ;
		}
		
@media screen and (max-width: 641px){
	body{}
	
		/*  全体  */
		#body_section{
			min-width:100% ;
		}
	
			/*  全体インナー  */
			#bodyInner_section{}				

}

/*------------------------------------------*/
/*  ヘッダーボタン							　　*/
/*------------------------------------------*/

.btn,
a.btn,
button.btn {
  font-size: 1.5em;
  font-weight: bold;
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 0.4em 1.75em;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  border-radius: 0.5rem;
}




/*------------------------------------------*/
/*  ヘッダー				　　*/
/*------------------------------------------*/
header{
	width:100% ;
	display: flex;
	padding:0 0 0 20px;
	background: #fff;
	position: fixed;
	justify-content: space-between;
	z-index: 1;
}

	header img {
		transition: 1.0s ;
		}

		header img:hover {
			opacity: 0.5 ;
			}

	header h1{
		width: 150px;
		padding:0;
		}

		header h1 img{
			width: auto;
			}

	header .link_block{
	    width: auto;
		padding:15px 30px;
		display: flex;
		}

		header .link_block .pc .btn01,
		a.btn01 {
			color: #fff;
			background-color: #00008C;
			margin:0 0 0 10px;
			}

		header .link_block .pc .btn01:hover,
		a.btn01:hover {
			color: #fff;
			background: #3737AA;
			}

		header .link_block .pc{
			width: 100% ;
			display: block !important;
			margin: 0 5px ; 
			}

	header .link_block .sp{
		width: 100% ;
		display: none !important;
	}


	
@media screen and (max-width: 641px){
header{
	padding:0 20px;
	}

	header h1{
		display: none ;
		}
	
		header h1 img{
				}


		header .link_block{
			padding:0;
			}
	
			header .link_block img{
			}
	
			header .link_block {
				margin: 0;
				}

				header .link_block .pc{
					width:100% ;
					display: none !important;
				}

				header .link_block .sp{
					width:100% ;
					display: block !important;
					margin: 10pt auto;
				}
	
				header .link_block .sp .logo img{
 					 width: 150px;
				}
	
	

/*------------------------------

  ここから下がハンバーガーメニュー
  に関するCSS

------------------------------*/
  
/* チェックボックスは非表示に */
.drawer-hidden {
  display: none;
}

/* ハンバーガーアイコンの設置スペース */
.drawer-open {
  display: flex;
  height: 45px;
  width: 30px;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 100;/* 重なり順を一番上に */
  cursor: pointer;
}

/* ハンバーガーメニューのアイコン */
.drawer-open span,
.drawer-open span:before,
.drawer-open span:after {
  content: '';
  display: block;
  height: 3px;
  width: 25px;
  border-radius: 3px;
  background: #333;
  transition: 0.5s;
  position: absolute;
}

/* 三本線のうち一番上の棒の位置調整 */
.drawer-open span:before {
  bottom: 8px;
}

/* 三本線のうち一番下の棒の位置調整 */
.drawer-open span:after {
  top: 8px;
}

/* アイコンがクリックされたら真ん中の線を透明にする */
#drawer-check:checked ~ .drawer-open span {
  background: rgba(255, 255, 255, 0);
}

/* アイコンがクリックされたらアイコンが×印になように上下の線を回転 */
#drawer-check:checked ~ .drawer-open span::before {
  bottom: 0;
  transform: rotate(45deg);
}

header .sp #drawer-check:checked ~ .drawer-open span::after {
  top: 0;
  transform: rotate(-45deg);
}
  
/* メニューのデザイン*/
.drawer-content {
  width: 100%;
  height: 100%;
  position: fixed;
  line-height: 1.5;
  top: 0;
  left: 100%;/* メニューを画面の外に飛ばす */
  z-index: 99;
  background: #fff;
  transition: .5s;
}

/* アイコンがクリックされたらメニューを表示 */
#drawer-check:checked ~ .drawer-content {
  left: 0;/* メニューを画面に入れる */
}
	
}




/*------------------------------------------*/
/*  コンテンツ				　　　　　　　　　　*/
/*------------------------------------------*/
#contents_section{
	width:100% ;
	overflow:hidden ;
	margin:0 auto ;
}

	#contents_inner{
		width:100% ;
		overflow:hidden ;
		margin:0 auto ;
		position: relative; /*スクロールボタン用*/
	}


	
/*  ++++++++++++++++++++++++++  */
/*  mainImage					*/
/*  ++++++++++++++++++++++++++  */
.mainimage{
	width:100% ;
	margin:0 auto 70px auto ;
	position: relative;
	text-align:left;
}

	.mainimage .txt01{
		width:100% ;
		font-size:500%;
		font-weight: bold;
		font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
		text-shadow: 0px 0px 5px #000;
		position: absolute;
  		color: #fff;
  		bottom: 80px;
  		left: 30px;
	}

	.mainimage .txt02{
		width:100% ;
		font-size:350%;
		font-weight: bold;
		font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
		text-shadow: 0px 0px 5px #000;
		position: absolute;
  		color: #fff;
  		bottom: 30px;
  		left: 30px;
	}

	.mainimage .pc{
		width:100% ;
		display: block !important;
	}

	.mainimage .sp{
		width:100% ;
		display: none !important;
	}

	.mainimage h1{
		display: none !important;
		}


@media screen and (max-width: 641px){
	.mainimage{
		width:100% ;
		margin:0 auto 20px auto ;
	}

	.mainimage .txt01{
		font-size:230%;
  		bottom: 35px;
  		right: 30px;
	}
	
	.mainimage .txt02{
		font-size:180%;
  		bottom: 10px;
  		right: 30px;
	}

	.mainimage .pc{
		width:100% ;
		display: none !important;
	}

	.mainimage .sp{
		width:100% ;
		display: block !important;
	}
	
.mainimage h1{
	
	}

	.mainimage h1 img{

		}
}

/*  ++++++++++++++++++++++++++  */
/*  TOPBTN						*/
/*  スクロールボタン			　 */
/*  ++++++++++++++++++++++++++  */
#topBtn {
    /*-----必須-----*/
    position: fixed;
    bottom: 10px;
    right: 10px;
     
    /*-----装飾-----*/
    width: 64px;
    height: 64px;
    line-height: 64px;
    text-align: center;
	font-weight: bold;
    background-color: #555;
    color: #fff;
	border-radius:100%;
}
a:hover{ 	text-decoration:none ;}
	

/*  ++++++++++++++++++++++++++  */
/*  SEC01						*/
/*  ループ画像					 */
/*  ++++++++++++++++++++++++++  */
.loop_wrap {
  display: flex;
  width: 100vw;
  height: 240px;
  overflow: hidden;
}

.loop_wrap img {
  width: auto;
  height: 100%;
}

@keyframes loop {
  0% {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}

@keyframes loop2 {
  0% {
    transform: translateX(0);
  }
  to {
    transform: translateX(-200%);
  }
}

.loop_wrap img:first-child {
  animation: loop 50s -25s linear infinite;
}

.loop_wrap img:last-child {
  animation: loop2 50s linear infinite;
}


@media screen and (max-width: 641px){
.loop_wrap {
  height: 180px;
}
}


/*  ++++++++++++++++++++++++++  */
/*  SEC02						*/
/*  テキスト					 */
/*  ++++++++++++++++++++++++++  */
.SEC002{
	width:1000px ;
	margin: 0 auto;
	text-align:center ;
}

	.SEC02 .txt01{
		width:100% ;
		text-align:center ;
		font-size: 160%;
		line-height:2.0em;
		margin:70px auto 0 ;
		font-weight: nomal;
	}


@media screen and (max-width: 641px){
.SEC02{
	width:100% ;
	text-align:center ;
}
	
	.SEC02 .txt01{
		width: 90% ;
		font-size: 100%;
		margin:30px auto 0;
	}
	

}



/*  ++++++++++++++++++++++++++  */
/*  SEC03						*/
/*  スペシャルイベント			　*/
/*  ++++++++++++++++++++++++++  */
.SEC03{
	width: 100% ;
	margin: 0 auto ;
	text-align:center ;
}

	.SEC03 .link_block{
		width: 1000px ;
		overflow:hidden ;
		display:inline-block;
	}

		.SEC03 .link_block .l10,
		.SEC03 .link_block .l11{
			width:332px ;
			text-align:left ;
			vertical-align:top;
			display:inline-block;
			margin: 70px auto 0;
			position: relative;
		}
		
		.SEC03 .link_block .l1{
			width:326px ;
			text-align:left ;
			vertical-align:top;
			display:inline-block;
			margin: 70px auto 0;
			position: relative;
		}

		.SEC03 .link_block .l2,
		.SEC03 .link_block .l3,
		.SEC03 .link_block .l5,
		.SEC03 .link_block .l6{
			width:332px ;
			text-align:left ;
			vertical-align:top;
			display:inline-block;
			margin: 7px auto;
			position: relative;
		}
		
		.SEC03 .link_block .l4,
		.SEC03 .link_block .l7{
			width:326px ;
			text-align:left ;
			vertical-align:top;
			display:inline-block;
			margin: 7px auto;
			position: relative;
		}

		.SEC03 .link_block .l8{
			width:332px ;
			text-align:left ;
			vertical-align:top;
			display:inline-block;
			margin: 0 auto 70px;
			position: relative;
		}

		.SEC03 .link_block .l9{
			width:326px ;
			text-align:left ;
			vertical-align:top;
			display:inline-block;
			margin: 0 auto 70px;
			position: relative;
		}



@media screen and (max-width: 641px){
.SEC03{
		width:100% ;
	margin: 0 ;
	}
	
		.SEC03 .link_block{
			 width:100% ;
			margin: 0 ;
		}
	
	
		.SEC03 .link_block img{
			width: 100% ;
			height: auto;
			display: block;
		}

	
			.SEC03 .link_block .l10,
			.SEC03 .link_block .l11{
				width:50% ;
				margin:30px 0 0 ;
				float: left;
			}	
	
			.SEC03 .link_block .l1,
			.SEC03 .link_block .l2,
			.SEC03 .link_block .l3,
			.SEC03 .link_block .l4,
			.SEC03 .link_block .l5,
			.SEC03 .link_block .l6,
			.SEC03 .link_block .l7,
			.SEC03 .link_block .l8,
			.SEC03 .link_block .l9{
				width:50% ;
				margin:0 ;
				float: left;
			}
}


/*  ++++++++++++++++++++++++++  */
/*  SEC03_1						*/
/*  インスタ					　*/
/*  ++++++++++++++++++++++++++  */
.SEC03_1{
	width: 100% ;
	margin: 0 auto 70px ;
	text-align:center ;
}

	.SEC03_1 .link_block{
		width: 1000px ;
		overflow:hidden ;
		display:inline-block;
		border: 1px solid;
		border-color: #696969;
	}

	.SEC03_1 img{
		margin: 30px auto 10px;
		width: 100px ;
		overflow:hidden ;
		display:inline-block;
		text-align:center ;
	}

	.SEC03_1 .txt01{
		width:100% ;
		text-align:center ;
		font-size: 200%;
		line-height:2.0em;
		margin:0 auto 10px ;
		font-weight: bold;
	}

	.SEC03_1 .txt02{
		width:100% ;
		text-align:center ;
		font-size: 140%;
		line-height:2.0em;
		margin:0 auto;
		font-weight: nomal;
	}

	.SEC03_1 .txt03{
		width:100% ;
		text-align:center ;
		font-size: 160%;
		line-height:2.0em;
		margin:10px auto 30px;
		font-weight: bold;
		color: deeppink;
	}

	.SEC03_1 .detail{
		width: auto;
		padding:0 30px;
		display: flex;
		margin: 0 5px  ; 
	}

		.SEC03_1 .detail .btn01,
		a.btn01 {
			color: #fff;
			background-color: #00008C;
			margin:0 auto 30px;
			}

		.SEC03_1 .detail .btn01:hover,
		a.btn01:hover {
			color: #fff;
			background: #3737AA;
			}



@media screen and (max-width: 641px){
.SEC03{
		width:100% ;
		margin: 0 ;
	}
	
	.SEC03_1 .link_block{
		width:90%;
		margin: 30px 0 ;
	}

	.SEC03_1 img{
		margin: 30px auto 10px;
		width: 70px;
	}

	.SEC03_1 .txt01{
		width:100% ;
		text-align:center ;
		font-size: 180%;
		line-height:1.8em;
		margin:0 auto 10px ;
		font-weight: bold;
	}

	.SEC03_1 .txt02{
		width:90% ;
		font-size: 100%;
		line-height:1.5em;
		margin:0 auto;
	}

	.SEC03_1 .txt03{
		width:90% ;
		font-size: 140%;
		line-height:1.5em;
		margin:20px auto 30px;
	}

	.SEC03_1 .detail{
		width: 90%;
		padding:0 30px;
		display: flex;
		margin: 0 5px  ; 
	}

		.SEC03_1 .detail .btn01,
		a.btn01 {
			}

		.SEC03_1 .detail .btn01:hover,
		a.btn01:hover {
			}
}


/*  ++++++++++++++++++++++++++  */
/*  SEC03_2			*/
/*  環境省リンク		*/
/*  ++++++++++++++++++++++++++  */
.SEC03_2{
	width: 100% ;
	margin: 0 auto 70px ;
	text-align:center ;
}

	.SEC03_2 .link_block{
		width: 1000px ;
		overflow:hidden ;
		display:inline-block;
	}

	.SEC03_2 img{
		margin: 0 auto 10px;
		width: 640px ;
		overflow:hidden ;
		display:inline-block;
		text-align:center ;
		transition: 1.0s ;
	}

	.SEC03_2 .txt01{
		width:100% ;
		text-align:center ;
		font-size: 140%;
		line-height:2.0em;
		margin:0 auto;
		font-weight: nomal;
	}

	.SEC03_2 img:hover {
		opacity: 0.5 ;
	}


@media screen and (max-width: 641px){
.SEC03_2{
		width:100% ;
		margin: 0 ;
	}
	
	.SEC03_2 .link_block{
		width:90%;
		margin: 30px 0 ;
	}

	.SEC03_2 img{
		margin: 0px auto;
		width: 100%;
	}

	.SEC03_2 .txt01{
		width:90% ;
		font-size: 100%;
		line-height:1.5em;
		margin:0 auto;
	}
}


/*  ++++++++++++++++++++++++++  */
/*  SEC04			*/
/*  ヒロシマベイスカイ写真展	*/
/*  ++++++++++++++++++++++++++  */
.SEC04{
	width: 100% ;
	background-color: #DBEFF6;
	margin: 0 auto ;
	text-align:center ;
}

		.SEC04 .title img{
			margin: 70px auto 30px;
			width: 540px ;
			overflow:hidden ;
			display:inline-block;
			text-align:center ;
		}

	.SEC04 .img01{
			width:640px;
			text-align:left ;
			vertical-align:top;
			display:inline-block;
			margin: 30px auto 0;
			position: relative;
	}
		
	.SEC04 .txt01{
		width:100% ;
		text-align:center ;
		font-size: 160%;
		line-height:2.0em;
		margin:30px auto 0 ;
		font-weight: nomal;
	}

	.SEC04 .detail{
		width: auto;
		padding:15px 30px;
		display: flex;
		margin: 0 5px  ; 
	}

		.SEC04 .detail .btn01,
		a.btn01 {
			color: #fff;
			background-color: #00008C;
			margin:30px auto 70px;
			}

		.SEC04 .detail .btn01:hover,
		a.btn01:hover {
			color: #fff;
			background: #3737AA;
			}
		

@media screen and (max-width: 641px){
.SEC04{
	width: 100%;
	margin: 0 ;
	}
	
	.SEC04 .title{
		width: 90%;
		margin:30px auto 0;
		}
	
		.SEC04 .title img{
			width: 100%;
			height: auto;
			}
	
	.SEC04 .img01{
		max-width: 90%;
		margin: 0 auto;
		}
	
		.SEC04 .img01 img{
			width: 100%;
			height: auto;
			}

	.SEC04 .txt01{
		width: 90%;
		font-size: 100%;
		margin:30px auto 0;
		}
	
	.SEC04 .btn{
		width: 90%;
		text-align:center ;
		margin: 30px auto 70px;
		}
	
		.SEC04 .btn img{
			width:300px ;
			
			}
}


/*  ++++++++++++++++++++++++++  */
/*  SEC05						*/
/*  元宇品の歴史　　　　　　		*/
/*  ++++++++++++++++++++++++++  */
.SEC05{
	width: 100% ;
	margin: 0 auto ;
	text-align:center ;
}

	.SEC05 .title{
		width: 540px ;
		overflow:hidden ;
		display:inline-block;
		margin: 70px auto 0;
	}

	.SEC05 .movie{
		position: relative;
		padding: 30px 0 70px;
		overflow: hidden;
		}

		.SEC05 .movie iframe{
			position: center;
			top: 0;
			left: 0;
			width: 560px ;
			height: 315px;
			}

@media screen and (max-width: 641px){
.SEC05 .movie {
position: relative;
width: 100%;
padding-top: 56.25%;
}
.SEC05 .movie iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}

@media screen and (max-width: 641px){
.SEC05{
	width: 100%;
	margin: 0 ;
	}
	
	.SEC05 .title{
		width: 90%;
		margin:30px auto 0;
		}
	
		.SEC05 .title img{
			width: 100%;
			height: auto;
			}
	
	.SEC05 .img{
		width: 90%;
		}
	
		.SEC04 .img img{
			width: 100%;
			height: auto;
			}

	.SEC04 .txt01{
		width: 90%;
		font-size: 100%;
		margin:30px auto 0;
		}
	
	.SEC05 .btn{
		width: 90%;
		text-align:center ;
		margin: 30px auto 70px;
		}
	
		.SEC05 .btn img{
			width:300px ;
			
			}
}


/*  ++++++++++++++++++++++++++  */
/*  ページトップへ戻る			  */
/*  ++++++++++++++++++++++++++  */
.page_top{
	width:940px ;
	margin:0 auto 40px auto ;
	text-align:right ;
}

@media screen and (max-width: 641px){
	.page_top{
		width:95% ;
	}
	
}



footer {
	text-align: center;
}

.footer-copy {
  background-color: #F4F5F6;
  color: #888;
  font-family: '游明朝' , 'Yu Mincho', 'YuMincho' , 'ＭＳ Ｐ明朝' , 'ＭＳ 明朝' , Georgia;
  font-size: 14px;
  padding: 25px 0;
  text-align: center;
  font-weight: bold;
  line-height: 1.2;
}

.footer-copy p{
	margin: 0;
}

@media screen and (max-width: 641px){
  .footer-copy {
    font-size: 12px;
    padding: 14px 0;
  }
}