@charset "utf-8";

/*========= バー表示のためのCSS ===============*/

/*タイムライン全体の設定*/
.timeline{
  max-width: 800px;
  width:100%;
  margin:50px auto;
  padding:0 30px;
  background:#efeddf;
}

.timeline li{
    /*線の起点とするためrelativeを設定*/
    position: relative;
  list-style: none;
  padding:0 0 20px 0;
}

.timeline dl{
  margin:0 0 20px 3em;
}

.timeline dd strong{
  display: block;
  padding:10px 0;
}

/*絶対配置で線を設定*/
.border-line {
    /*線の位置*/
  position: absolute;
  left:0.5em;
  top:5px;
  width:3px;/*線の太さ*/
  height:0;/*はじめは高さを0に*/
  background: #04287e;
}

/*タイムラインの見出し横の丸の位置と形状*/
.timeline li::after{
  content:'';
  position: absolute;
  top:5px;
  left:0;
  width:20px;
  height: 20px;
  background:#04287e;
  border-radius: 50%;
}
.textlink01 a::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 2px;
	background-color: #ceb849;
	transform: scaleX(0);
	transition: transform 0.3s;
}

.textlink01 a:hover::after {
	transform: scaleX(1);
}

.cp_link {
	padding: 0.1em 0.3em;
	background-image: linear-gradient(to right, rgba(0,0,0,0) 50%, rgba(0,0,255,1) 50%);
	background-position: 0 0;
	background-size: 200% auto;
	transition: .3s;
	color: #04287e;
}
.cp_link:hover {
	background-position: -100% 0;
	color: #fff;
}

/*========= レイアウトのためのCSS ===============*/

header{
  background: #ffffff;
  background-image:url("../img/header_wall.jpg");
  background-size:100% auto;
}

h1{
  font-size:3.2rem;
  font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  text-align: center;
  text-transform: uppercase;
  padding: 20px;
  color: #000;
}

h2{
  font-size:3.2rem;
  font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  color: #04287e;
  font-weight: bold;
  text-align: center;
  margin: 50px 0 50px 0;
}
h3{
  font-size:3.0rem;
  font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  color: #04287e;
  font-weight: bold;
  text-align: center;
  margin: 50px 0 50px 0;
}

footer{ 
    clear: both; 
    width: 100%; 
    padding: 20px 0 20px 0; 
    background: #c3c1b1; 
    color: #666; 
    font-weight: bold; 
    text-align: center; 
}

/*------------------------------
マウスオーバーで画像を白くする
------------------------------*/
.img_wrap{
  margin: 0 auto;
  overflow: hidden;
}
.img_wrap img{
  cursor: pointer;
  transition-duration: 0.3s;
}
.img_wrap:hover img{
  opacity: 0.6;
  transition-duration: 0.3s;
}

/* レスポンシヴ */
table{
  border-collapse: collapse;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}
.tb01 th,
.tb01 td{
  padding: 10px;
  border: solid 0px #ccc;
  text-align:center;
  box-sizing:border-box;
}
.tb01 th {
  background: #fff;
  color: #fff;
  
}

@media screen and (max-width: 990px) {
  .tb01 {
    width: 100%;
  }
  table.tb01 th,
  table.tb01 td {
    display: block;
    width: 100%;
    border-bottom:none;
  }
  .tb01 tr:last-child{
    border-bottom: solid 0px #ccc;
  }
}

p,{
  margin-top:20px;  
}

p.text{
  font-size:1.2rem;
  line-height: 1.5em;
  text-align: center;  
}
p.textres{
  font-size:1.2rem;
  line-height: 1.5em;
  text-align: left;
}
p.textres2{
  font-size:1.2rem;
  line-height: 1.5em;
  text-align: right;  
}
p.textres3{
  text-align: center;
  vertical-align: middle;
}
p.textres_title{
  font-size:2.0rem;
  font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  line-height: 1.5em;
  text-align: left;  
}

ul{
  margin:0;
  padding: 0;
  list-style: none;
}

dt{
  font-size:2.8rem;
  font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  color: #53503e;
  list-style: none;
}

dd{
  font-size:1.6rem;
  color: #53503e;
  list-style: none;
}

a{
  color:#333;
}

small{
  background:#333;
  color:#fff;
  display: block;
  text-align: center;
  padding:20px;
}


section{
  padding:30px;
}

/* 1段目と3段目の指定    */
section:first-child{
  padding:30px 30px 0px;
}

/* 2段目の指定    */
section:nth-child(2n){
  background:#efeddf;
  background-image: url(../img/wall.png);
  background-size:contain;                               /* 画像のサイズを指定    */
  width:100%;                                            /* 横幅のサイズを指定    */
}
/* 4段目の指定    */
section:nth-child(4n){
  background:#efeddf;
}
/* 5段目の指定    */
section:nth-child(5n){
  background:#fff;
}

/* Loading背景画面設定　*/
#splash {
/*fixedで全面に固定*/
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 999;
  background:#ccc;
  text-align:center;
  color:#fff;
}

/* Loading画像中央配置　*/
#splash_logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Loading アイコンの大きさ設定　*/
#splash_logo img {
  width:260px;
}

/* fadeUpをするアイコンの動き */
.fadeUp{
animation-name: fadeUpAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity: 0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

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



/*==================================================
スライダーのためのcss
===================================*/
.slider img {
    width:190px;/*スライダー内の画像を横幅100%に*/
    height:271px;
}

/*slickのJSで書かれるタグ内、スライド左右の余白調整*/

.slider .slick-slide {
    margin:0 10px;/*スライド左右の余白調整*/
}

/*==================================================
ふわっ
===================================*/


/* fadeUp */

.fadeUp{
animation-name:fadeUpAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

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


/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.fadeUpTrigger{
    opacity: 0;
}

/* 滑らかに変形して出現 */
.smooth{
	animation-name:smoothAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
  transform-origin:left;
	opacity:0;
}

@keyframes smoothAnime{
  from {
  transform:translate3d(0, 100%, 0) skewY(12deg);
  opacity:0;
  }

  to {
  transform:translate3d(0, 0, 0) skewY(0);
  opacity:1;
  }
}

/*========= ページトップのためのCSS ===============*/
/*リンクを右下に固定*/
#page-top {
	position: fixed;
	right: 30px;
	bottom:30px;
	z-index: 2;
    /*はじめは非表示*/
	opacity: 0;
	transform: translateY(150px);
}

/*　上に上がる動き　*/
#page-top.UpMove{
	animation: UpAnime 0.5s forwards;
}

@keyframes UpAnime{
  from {
    opacity: 0;
	transform: translateY(350px);
  }
  to {
    opacity: 1;
	transform: translateY(0);
  }
}

/*　下に下がる動き　*/
#page-top.DownMove{
	animation: DownAnime 0.5s forwards;
}

@keyframes DownAnime{
  from {
  	opacity: 1;
	transform: translateY(0);
  }
  to {
  	opacity: 1;
	transform: translateY(150px);
  }
}

/*画像の切り替えと動き*/
#page-top a {
    /*aタグの形状*/
	display: block;
	width: 120px;
	height: 120px;
	color: #333;
	text-align: center;
	text-transform: uppercase; 
	text-decoration: none;
	font-size:0.6rem;
    /*背景画像の指定*/
	background: url("../img/taiseikun001.png") no-repeat center;
	background-size: contain;
}

#page-top.floatAnime a{
	width: 120px;
	height: 120px;
    /*背景画像の指定*/
	background: url("../img/taiseikun002.png") no-repeat center;
	background-size: contain;
    /*アニメーションの指定*/
	animation: floatAnime 5s linear infinite;
	opacity: 0;
}

@keyframes floatAnime {
  0% { transform: translateX(0); opacity: 0; }
  25% { transform: translateX(-6px);opacity: 1; }
  50% { transform: translateX(0) }
  100% { transform: translateX(6px);opacity: 1; }
}

/*Page Topと書かれたテキストの位置*/
#page-top span{
    position: absolute;
    bottom: -20px;
    right: 20px;
	color: #666;
}
/*== ボタン共通設定 */
.btn02 {
    /*背景の基点とするためrelativeを指定*/
    position: relative;
    /*ボタンの形状*/
    display: inline-block;
    width:100%;
    max-width: 300px;
    height: 70px;
    line-height: 70px;
    text-align: center;
    outline: none;
}

/*ボタン内側の設定*/
.btn02 span {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    border: 1px solid #ccc;
    /* 重なりを3Dで表示 */
    transform-style: preserve-3d;
    /* アニメーションの設定 数字が少なくなるほど早く回転 */
    transition: 0.5s;
}

/*== くるっと回転（手前に） */

/* 回転前 */
.rotatefront span:nth-child(1) {
    background: #fff;
    color: #666;
    transform: rotateX(0deg);/*はじめは回転なし*/
    transform-origin: 0 50%  -25px;/* 回転する起点 */
}

/*hoverをした後の形状*/
.rotatefront:hover span:nth-child(1) {
    transform: rotateX(-90deg);/* X軸に-90度回転 */
}

/* 回転後 */
.rotatefront span:nth-child(2) {
    background: #04287e;
    color: #fff;
    transform: rotateX(90deg);/*はじめはX軸に90度回転*/
    transform-origin: 0 50%  -25px;/* 回転する起点 */
}

/*hoverをした後の形状*/
.rotatefront:hover span:nth-child(2) {
    transform: rotateX(0deg);/* X軸に0度回転 */
}

/*HOMEボタン*/
.homebutton {
position: absolute; /* 今の位置を基準 */
top: 10px; /* 上から10px */
right: 10px; /* 左から20px */
}