@charset "UTF-8";

/* 共通部分
-------------------- */
html {
	font-family: font-family: "Helvetica Neue", Arial,
    "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    Meiryo, sans-serif;
}

body{
	background-color: #409071;
	background-image:url("../images/BG01.jpg");
	background-size: contain;
	background-position : top;
	background-repeat: no-repeat;
}

.wrap {
	overflow: hidden;
}

/* index.htmlに適用
-------------------- */
/* --タイトル-- */
.TopTitle {
	margin : 30px 280px auto auto;
	text-align : center;
}

/* --メニュー-- */
#nav {
	font-size: 15px;
	list-style-type: none;
}

/*clearfix*/
#nav:after {
	content: "";
	clear: both;
	display: block;
	position: relative;
}

#nav li {
	max-width : 100%;
	float: left;
	width: 50%;
	height: auto;
	text-align: center;
	border: solid #4e9068 1px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
    background: #65B183;
    background: -moz-linear-gradient(top,  #a7d49e 3%, #5ba07e 11%, #56a27a 20%, #026152 55%, #016054 90%, #01422d 99%); 
    background: -webkit-linear-gradient(top,  #a7d49e 3%,#5ba07e 11%,#56a27a 20%,#026152 55%,#016054 90%,#01422d 99%); 
    background: linear-gradient(to bottom,  #a7d49e 3%,#5ba07e 11%,#56a27a 20%,#026152 55%,#016054 90%,#01422d 99%); 
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a7d49e', endColorstr='#01422d',GradientType=0 );  
	line-height: 10px;
    text-shadow: 0px 0px 9px #004a3f;
}

/*奇数のli要素に適応*/ 
#nav li:nth-child(odd) {
	border-right: 1px solid #aaa;
}

#nav {
	position: relative;
	max-width: 100%;
	margin: auto;
}

#nav a {
	display: block;
	line-height: 50px;
	text-decoration: none;
	color: #f4f3ee;
	font-weight: bold;
	position: relative;
}

#nav a:hover {
	color: #00463c;
	background: #f4f3ee;
}

/* --トップ画像-- */
#stage {
	max-width: 960px;
	position: relative;
	margin: 30px auto;
	box-shadow: 0 10px 25px 0 rgba(1, 44, 37, .5);
}

.pic {
	position: absolute;
	opacity:0;
	-moz-animation: imgTrans 56s infinite;
	-webkit-animation: imgTrans 56s ease-in infinite;
	animation: imgTrans 56s infinite;
}

.pic img {
	width: 100%;
	border: 5px solid #987733;
}

#photo1 {
	-moz-animation-delay: 0s;
	-webkit-animation-delay: 0s;
	animation-delay: 0s;
}

#photo2 {
	-moz-animation-delay: 8s;
	-webkit-animation-delay: 8s;
	animation-delay: 8s;
}
#photo3 {
	-moz-animation-delay: 16s;
	-webkit-animation-delay: 16s;
	animation-delay: 16s;
}
#photo4 {
	-moz-animation-delay: 24s;
	-webkit-animation-delay: 24s;
	animation-delay: 24s;
}

#photo5 {
	-moz-animation-delay: 32s;
	-webkit-animation-delay: 32s;
	animation-delay: 32s;
}

#photo6 {
	-moz-animation-delay: 40s;
	-webkit-animation-delay: 40s;
	animation-delay: 40s;
}

#photo7 {
	-moz-animation-delay: 48s;
	-webkit-animation-delay: 48s;
	animation-delay: 48s;
}



@-webkit-keyframes imgTrans {
	0% { opacity:0; z-index:10;}
	5% { opacity:1;}
	12% { opacity:1;}
	20% { opacity:0; }
	100% { opacity:0; }
}
@-moz-keyframes imgTrans {
	0% { opacity:0; z-index:10;}
	5% { opacity:1;}
	12% { opacity:1;}
	20% { opacity:0; }
	100% { opacity:0; }
}
@keyframes imgTrans {
	0% { opacity:0; z-index:10;}
	5% { opacity:1;}
	12% { opacity:1;}
	20% { opacity:0;}
	100% { opacity:0;}
}

/* メイン
-------------------- */
.news-contents {	
	max-width : 960px;
	margin : 0 auto;
	text-align : center;
	display : flex;
	flex-wrap : wrap;
	justify-content : space-between;
}

article {
	width : 48%;
	margin :0 0 1em 0;
}

article iframe{
	width : 100%;
}

aside {
	width : 48%;
	margin :0 0 3em 0;
}

/* --広告、案内、吸入操作ビデオ、ガイドライン紹介-- */
.ad_image,
.ad_image_en {
	width: 100%;
	height: auto;
	border : 5px solid #987733;
	margin : 0 auto 1em;
	box-shadow: 0 10px 25px 0 rgba(1, 44, 37, .5);
}

.ad_image_en {
	border : 5px solid #00B9FA;
}

/* --TOPICS-- */
.topics-box {
	width : 100%;
	margin-bottom: 1.2em;
	background-color : #987733;
	box-shadow: 0 10px 25px 0 rgba(1, 44, 37, .5);
}

.topics-title {
	background-color : #987733;
	padding : 0.5em;
	text-align : center;
	font-size : 20px;
	color : #f4f3ee;
}

.topics-box iframe{
	width : 100%;
	border: none;
	margin: 0 auto;
	height: 343px;
	overflow: hidden;
	padding: 0 0.35em 0 0.25em;
}

dl{
	width: 100%;
	color:#00463c;
	background:#f4f3ee;
	font-size:15px;
	padding: 1em;
}

dt{
	font-weight:bold;
	width:120px;
	margin-bottom:25px;
	float:left;
}

dd{
	width: 100%;
	margin-bottom:25px;
}

/* --動画-- */
.youtube-movie {
	width: 100%;
	background-color : #987733;
	border: 5px solid #987733;
	margin : 0 auto 1em;
	aspect-ratio: 16 / 9;
}

/* FOOTER
-------------------- */
footer {
	margin : 10em auto 0;
	padding: 0;
	text-align : left;
}

footer p {
	color : #f4f3ee;
	font-size : 15px;
}

/* --連絡先-- */
.footer_flex {
	width : 100%;
	background-color : #00463c;
}

.footer_link {
	max-width : 960px;
	margin : 0 auto;
	text-align : center;
	display : flex;
	justify-content : space-between;
	padding: 2em;
}

.address {
	width : 100%;
	text-align : left;
}

.home {
	width : 20%;
	color : #f4f3ee;
	font-size : 15px;
	font-weight : bold;
	text-align : right;
}

.footer_link a {
	text-decoration: underline;
}


/* 横幅767px以上に適応
-------------------- */
@media screen and (min-width: 767px) {
/* --関連サイト-- */
#site {
	max-width:960px;
	width:100%;
	margin: 0 auto;
	display:flex;
	flex-wrap : wrap;
}

#site img {
	width:100%;
}

#site ul{
	width: 100%;
	display:flex;
	flex-direction: row;
	flex-wrap: wrap;
	list-style-type: none;
}

#site li {
	float: none;
	width:20%;
	margin: 0.5em 1.5em;
	}
}


	
/* 横幅1000px以上に適応-------------------- */
@media screen and (min-width: 1000px) {
/* メニュー-------------------- */
#nav li:nth-child(odd) {
  border-right: none;
}

#nav {
	margin-top : 20px;
	max-width : 960px;
	display: table;
	table-layout: fixed;
	width: 100%;
	border-top: none;
	border-collapse: collapse;
}

#nav li {
	float: none;
	display: table-cell;
	width: 100%;
	border-bottom: none;
	border: 1px solid #aaa;
	}
}


/* スマートフォン向けCSS 767px以下 -------------------- */
@media (max-width: 767px) {
body {
	width : 100%;	
}

.TopTitle {
	margin : 20px auto 10px auto;
}

.TopTitle img {
	width: 300px;
	height: auto ;
}
	
/* HOME
-------------------- */
#stage {
	position: relative;
	margin: 20px auto;
}

/* MAIN
-------------------- */
.news-contents {
	flex-direction : colum;
	margin:0 4%;
}

article,aside {
	width : 100%;
}


/* Youtube
-------------------- */
.pm_text {
	font-size : small;
}

#movie_menu li a{
	margin-left:250px;
}

/* footer
-------------------- */
.address {
	font-size : 12px;
}

#site {
	width:100%;
	display:flex;
	flex-direction: column;
	margin: 0 0 1em 2%;

}

#site img {
	width:100%;
}

#site ul{
	width: 100%;
	display:flex;
	flex-direction: row;
	flex-wrap: wrap;
	list-style-type: none;
}

#site li {
	float: none;
	width:45%;
	margin: 0 0.5em;
	}

}


/* スマートフォン向けCSS 767px以下 */
@media (max-width: 400px) {
/* TOPICS
-------------------- */
dl{
	font-size:12px;
}
.topics tr {
	width:100%;
	height:auto;
}
}