@charset "UTF-8";

/*------------------------------------------------------------*/
    デフォルトスタイル
/*------------------------------------------------------------*/
html, body, div, span, imgframe, img, fieldset,
a, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, small, strong, dl, dt, dd, ol, ul, li,
table, caption, tbody, tfoot, thead, tr, th, td{
    margin:0;
    /*padding:0;*/
    border:none;
    outline:none;
    font-size:1em;
}

header,hgroup,nav,article,
section,aside,imgframe,footer{
    display:block;
}

table{
    border-collapse: collapse;
}

ol, ul{
    list-style: none;  
}

html{
    font:18px/1.3 "メイリオ", Meiryo, Osaka, "ヒラギノ角ゴ Pro W3", "ＭＳ ゴシック", Arial, Helvetica, Tahoma, sans-serif;
}

p.txtcenter {text-align: center; }

/*------------------------------------------------------------*/
    レイアウト
/*------------------------------------------------------------*/
body{
    background:#FFF;
    width:95%;
    color:#363636;
    font:18px/1.3 "メイリオ", Meiryo, Osaka, "ヒラギノ角ゴ Pro W3", "ＭＳ ゴシック", Arial, Helvetica, Tahoma, sans-serif;
}

/*    リンクタグ    */

a,
a:hover{
    text-decoration:none;
}



/*------------------------------------------------------------*/
    ヘッダー
/*------------------------------------------------------------*/
header{
    width:100%;
    overflow:hidden;}


/*    タイトル    */



/*---------------------*/
    ヘッダー画像
/*--------------------*/
p#h_image{
    padding:0;
    position:relative;
}

p#h_image img{
    width:99.5%;
    margin:auto;
    border:solid 1px #DCAC28;}

/*    ヘッダー画像内 文字    */
p#h_image span{
    padding:0 10px;
    display:block;
    color:#FFF;
    position:absolute;
    z-index:2;
    top:40%;
}

/*    ヘッダー画像下 文字    */
header h2{
    padding:10px;
}
header span.hedfont1{
    color:#D2691E;
    font-size:1.2em;
}

header span.hedfont2{
    color:#0086AC;
}

header p.des{
    padding:0 10px;
    margin-bottom:5%;
}

/*------------------------------------------------------------
    フッター
------------------------------------------------------------*/
/*    フリースペース　*/

/* ヘッダータイトル部 */
.headertitle{
    background-image: -moz-linear-gradient(top, #3b7eaa, #1c567b);
    background-image: -webkit-gradient(linear, center top, center bottom, from(#3b7eaa), to(#1c567b));
    background-image: -o-linear-gradient(top, #3b7eaa, #1c567b);
    background-image: linear-gradient(top, #3b7eaa, #1c567b);
    padding:3% 10px;
    border-bottom:solid 1px #00355F;
    color:#FFF;
    font-size:1.1em;
    text-shadow:1px 1px 1px #004673;
    font-weight: bold;
    text-align:center;
}

/* 各画面のサブタイトル */
.subtitle{
    background-image: -moz-linear-gradient(top, #F0D139, #E9A326);
    background-image: -webkit-gradient(linear, center top, center bottom, from(#F0D139), to(#E9A326));
    background-image: -o-linear-gradient(top, #F0D139, #E9A326);
    background-image: linear-gradient(top, #F0D139, #E9A326);
    padding:3% 10px;
    margin:5% 0 0;
    border:solid 1px #DCAC28 ;
    border-top:solid 1px #DCAC28;
    color:#FFF;
    text-shadow:1px 1px 1px #4a4a4a;
    font-weight: bold;
}

/* ボタン表示 */
.btn-gradient-3d-simple {
  display: inline-block;
  padding: 0.5em 1em;
  text-decoration: none;
  border-radius: 4px;
  color: #ffffff;
  background-image: linear-gradient(#6795fd 0%, #67ceff 100%);
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
  border-bottom: solid 3px #5e7fca;
  font-weight: bold;
}

.btn-gradient-3d-simple:active {
  -webkit-transform: translateY(4px);
  transform: translateY(4px);
  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);
  border-bottom: none;
  font-weight: bold;
}

.btn-gradient-3d-orange {
  display: inline-block;
  padding: 0.5em 1em;
  text-decoration: none;
  border-radius: 4px;
  color: #ffffff;
  background-image: linear-gradient(45deg, #FFC107 0%, #ff8b5f 100%);
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
  border-bottom: solid 3px #c58668;
  font-weight: bold;
}

.btn-gradient-3d-orange:active {
  -webkit-transform: translateY(4px);
  transform: translateY(4px);
  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);
  border-bottom: none;
  font-weight: bold;
}

/* スライダー */
.slider{
    width: 100%;
    height: calc(100px);
    margin: 0 auto;
    overflow: hidden;
    position: relative;
}

.slider__content{
    min-width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transform: translateX(100%);
}
 
.slider__content:nth-child(1){
    animation: sliderAnime 6s ease-in-out infinite;
    z-index: 6;
}
 
.slider__content:nth-child(2){
    animation: sliderAnime2 6s ease-in-out 1s infinite;
    z-index: -1;
}
 
.slider__content:nth-child(3){
    animation: sliderAnime2 6s ease-in-out 3s infinite;
    z-index: -1;
}
 
@keyframes sliderAnime{
    0%{
        z-index: 5;
        transform: translateX(0);
    }
    16.6%{
        transform: translateX(0);
    }
    33.3%{
        transform: translateX(-100%);
    }
    50%{
        z-index: -1;
        transform: translateX(-100%);
    }
    66.6%{
        transform: translateX(100%);
    }
    83.2%{
        z-index: 5;
        transform: translateX(100%);
    }
    100%{
        z-index: 5;
        transform: translateX(0);
    }
}
 
@keyframes sliderAnime2{
    0%{
        z-index: 5;
        transform: translateX(100%);
    }
    16.6%{
        transform: translateX(0);
    }
    33.3%{
        transform: translateX(0);
    }
    50%{
        transform: translateX(-100%);
    }
    66.6%{
        z-index: -1;
        transform: translateX(-100%);
    }
    83.2%{
        transform: translateX(100%);
    }
    100%{
        z-index: 5;
        transform: translateX(100%);
    }
}
 
.slider__img{
    max-width: 100%;
    min-width: 100%;
}