﻿@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Kiwi+Maru:wght@300;400;500&display=swap');
*{
	margin : 0;
	padding : 0;}

body , html {
    height: 100%;
}

/*---------------------------------------------------------
   Overall
   --------------------------------------------------------- */

#wrapper, #header, #navi, #contents, #footer {
	width: 100%;
	background-image: url(../img/background.jpg);}

/*---------------------------------------------------------
   inner
   --------------------------------------------------------- */

#header .inner, #navi .inner, #contents .inner {
	width: 980px;
	margin: 0 auto;}

#wrapper {
	min-width: 980px;
	position: relative;
	min-height: 100%; 
	height: auto !important; /*IE6*/
	height: 100%;}

/*---------------------------------------------------------
   Header
   --------------------------------------------------------- */

#header {
	height: 70px;
	background:url(../img/header-back.png) repeat-x left top;
	position: fixed;
	z-index:500;}

#header .inner h2 a {
	margin: 0 auto;
	width: 130px; height: 162px;
	z-index: 800;
	position: absolute;
	background:url(../img/top.png) no-repeat 0px; text-indent:-9999px;
	overflow:hidden; display:block;}

#header-nav {
	position: relative;
	padding-top: 24px;
	height: 20px;
	float: right;}

#header-nav ul {
	height: 20px;}

#header-nav li {
	vertical-align: middle;
	margin-right: 15px;
	font-size: 12px;
	float: left;}

#header-nav a img {
	opacity: .5;
	-webkit-opacity: .5;
	-moz-opacity: .5;
	filter: alpha(opacity=50);	/* IE lt 8 */
	-ms-filter: "alpha(opacity=50)"; /* IE 8 */
	transition: opacity 1s ease-out;}

#header-nav a:hover img {
	opacity: 1;
	-webkit-transition: opacity 1s ease-out;
 	-moz-transition: opacity 1s ease-out;
	-ms-transition: opacity 1s ease-out;}

#header-nav .current a img {
	opacity: 1;
	-webkit-opacity: 1;
	-moz-opacity: 1;}

/*---------------------------------------------------------
   Slideshow
   --------------------------------------------------------- */

div.slide-show {
	width: 980px; /* スライドショーの幅 */
	max-width: 100%; /* スマホで表示が欠けないように */
	margin: 0px auto; /* 中央揃え */
	position: relative;
	box-shadow:5px 5px 25px;}
 
.slide-show img { 
	animation: show 12s infinite; /* 12秒のスライドショーを繰り返し */
	max-width: 100%;
	height: auto;
	opacity: 0;
	position: absolute; /* 画像を重ねて表示 */
	left: 0;
 	top: 0;}

@keyframes show {
	0% {opacity: 0}
	17% {opacity: 1}
	33% {opacity: 1}
	50% {opacity: 0}}
 
.slide-show img:nth-of-type(1) {
	position: relative;}
 
.slide-show img:nth-of-type(2) {
	animation-delay: 0s;}
 
.slide-show img:nth-of-type(3) {
	animation-delay: 4s;}
 
.slide-show img:nth-of-type(4) {
	animation-delay: 8s;}

.slide-show img:nth-of-type(5) {
	animation-delay: 12s;}

.slide-show img:nth-of-type(6) {
	animation-delay: 16s;}

/*---------------------------------------------------------
   Navi
   --------------------------------------------------------- */

#navi {
	border-top: 10px solid #000;
	border-bottom: 4px solid #000;
	height: 50px;}

/*---------------------------------------------------------
   Contents
   --------------------------------------------------------- */

#contents {
	background-image: url(../img/background.jpg);}

#main {
	float: left;
	width: 840px;
	padding: 0px 70px;
	margin-top: 80px;
	margin-bottom: 100px;
	font-family: 'Kiwi Maru', serif;
	background-color: rgba(255,255,255,0.15);}

#main .TopContents {
	width: 710px;
	margin: 20px 0;}

#main #pagetitle {
	padding: 34px 0 10px 80px;}

#main h2 {
	padding-left: 22px;
	margin: 0 0 10px 12px;
	background: url("../img/icon.png") left center no-repeat;}

#main h4 {
	float: left;
	text-align: center;
	width: 140px;
	color: #3e3a39;
	color:  rgba(0,0,0,0.6);
	border-top: 1px solid #a28765;
	padding-top: 10px;
	padding-left: 0;
	margin-left: 70px;
	margin-bottom: 0;
	line-height: 33px;
	background: none;
	font-size: 18px;
	font-weight: 700;}

#main .leftbox h4 {
	float: left;
	text-align: center;
	width: 140px;
	color: #3e3a39;
	color:  rgba(0,0,0,0.6);
	border-top: 1px solid #a28765;
	padding-top: 10px;
	padding-left: 0;
	margin-bottom: 0;
	margin-left: 0px;
	line-height: 33px;
	background: none;
	font-size: 18px;
	font-weight: 700;}

#main .centerbox {
	width: auto;
	line-height: 18px;}

#main .centerbox ul {
	margin: 20px 0  20px 40px;
	line-height: 22px;}

#main .centerbox li {
	display: block;
	font-size: 18px;}

#main .centerbox li:before {
	content: "●";}

#main .centerbox table {
	width: 540px;
	border-bottom: none;
	margin-bottom: 0;}

#main .centerbox table th {
	text-align: left;
	padding: 15px 0 15px 30px;
	border-top: 1px solid #a28765;
	border-top: 1px solid rgba(0,0,0,0.2);
	font-size: 18px;}

#main .centerbox table td {
	text-align: right;
	font: 20px;
	font-weight: 700;
	text-transform: uppercase;
	padding: 15px 0  15px 20px;
	border-top: 1px solid #a28765;
	border-top: 1px solid rgba(0,0,0,0.2);}

#main .centerbox table td span {
	font-size: 70%;
	font-weight: 700;}

#main .maintable  {
	width: 600px;
	border-bottom: none;
	margin-bottom: 0;}

#main .maintable th {
	text-align: center;
	font-weight: 700;
	font-size: 18px;
	width: 81px;
	padding: 20px 10px 20px 10px;
	border-top: 1px solid #a28765;
	border-top: 1px solid rgba(0,0,0,0.2);}

#main .maintable td {
	text-align: left;
	font-size:  13px;
	text-transform: uppercase;
	padding: 20px 0;
	border-top: 1px solid #a28765;
	border-top: 1px solid rgba(0,0,0,0.2);
	line-height: 24px;}

#main .maintable td span {
	font-size: 100%;
	font-weight: 700;}

#main .leftbox {
	float: left;
	width :402px;
	margin-right: 14px;}

#main .rightbox {
	float: left;
	width :402px;}

#main .rightbox .bold {
	font-size: 18px;
	line-height: 25px;
	font-weight: 700;
	padding: 0;}

#main .leftbox table , .rightbox table {
	width: 300px;
	margin-left: 45px;
	border-bottom: none;
	margin-bottom: 0;}

#main .leftbox table th , .rightbox table th {
	text-align: left;
	padding: 15px 0 15px 10px;
	border-top: 1px solid #a28765;
	border-top: 1px solid rgba(0,0,0,0.2);
	font-size: 15px;}

#main .leftbox table td , .rightbox table td {
	text-align: right;
	font-family: 'Kiwi Maru', serif;
	font-weight: 700;
	text-transform: uppercase;
	padding: 15px 0;
	border-top: 1px solid #a28765;
	border-top: 1px solid rgba(0,0,0,0.2);}

#main .leftbox table td span , .rightbox table td span {
	font-size: 100%;
	font-weight: 700;}

#main p {
	font-size: 18px;
	font-weight: 500;
 	line-height: 25px;
	padding: 5px 35px 5px 35px;}

#main section {
	width: 840px;
	margin: 15px 0 40px 0;}

#main section hr {
	background-image: url("../img/hr2.png");
	height: 4px;
	margin: 10px 0 20px 0;
	border:0;
	padding:0;
	display:block;}

#main section .imges {
	display: table;
	table-layout: fixed;
	width: 100%;
	margin-left : 20px;}

#main section .icon {
	padding-right: 10px;
	vertical-align: middle;}

#main section .imges li {
	display: table-cell;} 

#main section .bold {
	font-size: 15px;
	font-weight: 700;
	padding-right:10px;}

#main section .notice {
	margin:20px 0  0 40px;
	line-height: 22px;
	width: auto;}

#main section .notice li {
	display: block;
	font-size: 14px;}

#main section .notice li:before {
	content: "●";}

#main section .phonenum {
	font-size: 36px;
	font-family: 'Cabin', sans-serif;
	letter-spacing: -2px;}

#main section .phonenum .icon {
	padding: 0 5px;
	vertical-align: bottom;}

#main section .phonenum .small {
	font-size: 26px;
	font-family: 'Cabin', sans-serif;
	letter-spacing: 1px;}

.clearLeft { 
	clear: left;}

/* --- 教育旅行・体験学習のリンク装飾 --- */

#main section .caption-box {
	width: 840px;
	height: 100%;
	margin-bottom: 20px;
	margin-right: auto; 
	margin-left: auto;}

#main section .caption-box .list {
	list-style-type: none;
	background-color: rgba(255,255,255,0.9);
	border-radius: 5px;
	display: block;
	width: 270px;
	height: 100%;
	float: left;
	margin: 10px 5px 20px 5px;
	text-align: center;}

#main section .caption-box .img img { 
	margin: 8px auto;
	width: 250px;
	height: 188px;
	border-radius: 5px;}

#main section .caption-box .text {
	font-size: 19px;
	font-weight: 900;
	margin-bottom: 8px;}

#main section .caption-box .text .small {
	font-size: 13px;
	font-weight: 900;}

#main section .caption-box a img {
	opacity: .8;
	-webkit-opacity: .8;
	-moz-opacity: .8;
	filter: alpha(opacity=80);	/* IE lt 8 */
	-ms-filter: "alpha(opacity=80)"; /* IE 8 */
	transition: opacity .5s ease-out;}

#main section .caption-box a:hover img {
	opacity: 1;
	-webkit-transition: opacity .5s ease-out;
 	-moz-transition: opacity .5s ease-out;
	-ms-transition: opacity .5s ease-out;}

/* --- 教育旅行・観光案内のリンク集 --- */


/* --- 教育旅行・観光案内のリンクここまで --- */

#sidebar {
	float: right;
	width: 235px;
	padding-top: 40px;}

#sidebar .SideBox1 {
	width: 215px;
	height: 210px;
	text-align: center;
	background-image: url(../img/sidemenu-1.png);
	background-repeat: no-repeat;
	border-radius: 3px;
	box-shadow: 2px 2px 15px;}

#sidebar .SideBox1 img {
	padding-top: 10px;}

#sidebar .SideBox2 {
	width: 215px;
	height: 190px;
	text-align: center;
	background-image: url(../img/sidemenu-2.png);
	background-repeat: no-repeat;
	border-radius: 3px;
	box-shadow:2px 2px 15px;
	margin-top:15px;
	padding-top:10px;}

#sidebar .SideBox2 img {
	padding-top: 2px;}

#sidebar .SideBox3 {
	width: 215px;
	height: 80px;
	text-align: center;
	background-image: url(../img/educational_back.png);
	background-repeat: no-repeat;
	border-radius: 3px;
	box-shadow:2px 2px 15px;
	margin-top:15px;}

#sidebar .SideBox3 img {
	padding-top: 2px;}


.fixed{
	position: fixed;
	margin-top: 80px;
	top: 0px;}

/* --- 新着情報エリア --- */
div.update {
width: 190px; /* 新着情報エリアの幅 */
font-size: 12px;
margin: 5px auto;
}

div.update a {
color: #fffdee;
}

/* --- 見出し --- */
div.update h3 {
margin: 0 0 6px; /* 見出しのマージン（上、左右、下） */
font-size: 125%;
color: #fff;
}

/* --- 新着リスト --- */
div.update dl {
width: 100%; /* 新着リストの幅 */
margin: 0;
border-top: 1px #c0c0c0 dotted; /* 新着リストの上境界線 */
color: #fff;
text-align: left;
}

/* --- 日付エリア --- */
div.update dt {
width: 6.7em; /* 日付エリアの幅 */
float: left;
padding: 7px 0 6px 3px; /* 日付エリアのパディング（上右下左） */
font-size: 80%;
}

/* --- 本文エリア --- */
div.update dd {
margin: 0;
padding: 7px 3px 6px 8em; /* 本文エリアのパディング（上右下左） */
border-bottom: 1px rgba(255,255,255,0.15) dotted; /* 本文エリア下境界線 */
line-height: 160%;
font-size: 85%;
}

/* --- clearfix --- */
.clearFix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearFix {
min-height: 1px;
}

/*---------------------------------------------------------
   Footer
   --------------------------------------------------------- */

#footer {
	color: #221814;
	bottom: 0;
	padding-bottom: 95px;
	height: 100px;}

#footer .inner {
	position: relative;
	width: 980px;
	padding-top: 10px;
	margin: 0 auto;
	background: url(../img/hr.png) repeat-x left top;}

#footer .inner #add {
	margin-left: 20px;
	float: left;
	font-style: normal;}

#footer .inner #add dt {
	font-size: 16px;
	font-weight: bold;
	margin:5px 0;}

#footer .inner #add dd {
	font-size: 13px;
	margin:5px 0;}

#footer .inner #add dd address{
	font-style: normal;}

#footer .inner #footer-menu {
	margin-right: 20px;
	float: right;}

#footer .inner #footer-menu li {
	float:left;
	margin-left: 10px;}

#footer .inner #footer-menu #credit {
	float:right;
	display: block;
   	margin: 10px 0;
	font: 11px 	font-family: 'Kiwi Maru', serif;
	font-weight: 700;
	text-transform: uppercase;}

.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;}

.clearfix {
	display: inline-table;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}

.clearfix {display: block;}
/* End hide from IE-mac */