@charset "utf-8";
body{
	background-color:#ffffff;
	color:#333333;
	font-family:"Meiryo UI","Hiragino Sans",sans-serif;
	margin:0;
	padding:0;
}
p{
	font-size:100%;
	line-height:1.8;
}

.right-align {
        text-align: right; /* テキストを右寄せにする */
        }

.center-align {
        text-align: center; /* テキストを右寄せにする */
        }


h1{
        padding-left:20px;
	font-size:160%;
}
h2{
	font-size:120%;
	border-bottom:1px dashed #000080;
	border-left:10px solid #000080;
	padding-left:7px;
}


h3{
	padding-left:20px;
	font-size:110%;
}


footer{
	text-align:center;
	background-color:#000080;
	color:#ffffff;
	padding-top:10px;
	padding-bottom:10px;
	clear:both;
}
article{
	position:relative;
	clear:both;
	width:960px;
	margin-left:auto;
	margin-right:auto;
}
.catch{
	position:absolute;
	top:20px;
	left:30px;
	color:#ffffff;
	text-shadow:0px 5px 10px #000000;
}
header{
	background-color:#ffffff;
	color:#000080;
}
ul{
	list-style-type:none;
	padding-left:0;
	line-height:1.8;
	font-size:100%;
}
ul time{
	border-radius:10px;
	background-color:#000080;
	color:#ffffff;
	font-size:100%;
	padding-left:5px;
	padding-right:5px;
	margin-right:5px;
}
nav ul{
	font-weight:bold;
	text-align:right;
	padding-top:26px;
	padding-bottom:5px;
	margin:0;
}
nav li{
	display:inline;
	padding-left:10px;
	padding-right:12px;
	border-right:1px solid #000080;
}
header img{
	float:left;
}
.header-in{
	width:960px;
	margin-left:auto;
	margin-right:auto;
}
.sub-h1{
	background:linear-gradient(to left,#ffffff,#dcdcdc);
	padding-top:5px;
	padding-left:10px;
	border-left:15px solid #000080;
	margin:0;
}



/*画像と画像の横並び*/

.container {
  display: flex;
}
.item {
  background: #ffffff;
  padding: 1px 10px;
  margin: 1px;
  border-radius: 4px;
  border: none;
}



/* 画像と文章の横並び */

.flex {
  display: flex; /*横並び*/
}
.flex .image {
  width: 1000px; /*画像サイズ指定*/
  margin-left: 10px;
  padding: 0px;
}
.flex .text {
  width: 2000px; /*テキストサイズ指定*/
  margin: 10px 0 0 0;
  padding: 0;
}

/* 画像に説明文をつける */
figure {
text-align: center;
display: inline-block;
margin: 10px;
}
figcaption {
font-size: 100%;
color: #555;
}


.point-list{
	list-style-image:url(../image/list.gif);
	font-weight:bold;
	margin-left:30px;
}
.point-img{
	box-shadow:0px 0px 10px 3px #aaaaaa;
	border-radius:10px;
	float:right;
	margin-left:20px;
	margin-bottom:10px;
}
.sentou{
	clear:both;
	text-align:right;
}
ol li{
	display:inline;
	margin-right:5px;
	font-size:100%;
}
ol{
	padding-left:0;
}
.page{
	padding-left:10px;
	padding-right:10px;
}
nav ul a{
	text-decoration:none;
	color:#ffffff;
}
nav ul a:hover{
	color:#ffcc00;
}
table{
	border:1px solid #333333;
	font-size:100%;
        width:100%;
        max-width: 700px; /* 最大幅を700pxに制限 */
        margin: 0 auto; /* 中央寄せ */
	margin-bottom:20px;
	border-collapse:collapse;

}

iframe{
        width:100%;
        max-width: 700px; /* 最大幅を700pxに制限 */
        margin: 0 auto; /* 中央寄せ */

}

th{
	background-color:#ACD6ff;
	border:1px solid #333333;
	padding:10px;
	width:20%;
}
td{
	border:1px solid #333333;
	padding:10px;
}
caption{
	caption-side:bottom;
}
aside h1{
	font-size:100%;
	border-bottom:2px dotted #666666;
	padding-left:5px;
	margin:0;
}
aside li{
	border-bottom:1px dotted #666666;
}
aside ul{
	margin:0;
}
aside a{
	display:block;
	color:#333333;
	text-decoration:none;
	padding-top:10px;
	padding-bottom:10px;
	padding-left:5px;
}
aside a:hover{
	background-color:#dcdcdc;
}

/* スライドショーの設定 */
.slideshow-container {
  width: 100%;
  height: 80vh;
  position: relative;
  overflow: hidden;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  animation: fade 28s infinite;
  
}
.slide-content {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  padding: 0px;
/* 背景色不透明度下から上にグラデーション */
  background: linear-gradient(to top, transparent, rgba(0, 0, 0, 0.7));
  color: white;
  text-align: left;
}

/* アニメーションの遅延時間を設定 */
.slide:nth-child(1) {
  animation-delay: 0s;
}

.slide:nth-child(2) {
  animation-delay: 7s;
}

.slide:nth-child(3) {
  animation-delay: 14s;
}

.slide:nth-child(4) {
  animation-delay: 21s;
}

/* フェードアニメーションの定義 */
@keyframes fade {
  0% {
    opacity: 0;}
  12.5% {
    opacity: 1;}/* 2秒かけてフェードイン */
  25% {
    opacity: 1;}/* 2秒間表示 */
  37.5% {
    opacity: 0;}/* 2秒かけてフェードアウト */
  100% {
    opacity: 0;}
}



.select{
	background-color:#ffcc00;
}

aside{
	float:right;
}
.form{
	display:block;
	width:400px;
}
textarea{
	display:block;
	width:600px;
	height:120px;
}
button{
	width:180px;
	height:50px;
	padding:10px;
}

/* 959px以下の場合 */
@media(max-width:959px){
header img{
	float:none;
}
nav ul{
	text-align:left;
	padding:0;
	margin-left:10px;
}
article{
	width:auto;
}
article img{
	max-width:100%;
	height:auto;
}
.header-in{
	width:auto;
}

aside{
	float:none;
}
}



/* 600px以下の場合 */
@media(max-width:600px){
nav li{
	font-size:75%;
	padding-left:2px;
	padding-right:2px;
}


footer{
	font-size:75%;
}
.catch{
	top:5px;
	left:10px;
}
.point-img{
	float:none;
}
th,td{
	display:block;
	width:auto;
}
video{
	max-width:100%;
	height:auto;
}
.form,textarea{
	width:320px;
}
}

/* プリント出力 */
@media print{
.catch{
	color:#000000;
	text-shadow:none;
}
footer{
	color:#000000;
}
}