@charset "utf-8";
/* レイアウトのためのCSS */

.time {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 20px;
  font-size: 20px;
}

/* hours, minutes, secondsの数値のスタイル */
.time-num {
  font-size: 60px;
  line-height: 1;
}


/* header */

.header-area{
    position: fixed;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);
    z-index: 2;
    color: #000;
    text-align: center;
}

.header-area h1{
    display: block;
    font-size: 6vw;
    font-weight: normal;
    line-height: 1;
    letter-spacing: 0;
    padding: 0 10px;
}

.header-area p{
    font-size: 1.3vw;
    letter-spacing: 0.4em;
    margin: 0 0 20px 0;
}

.header-area p br{
    display: none;
}


@media screen and (max-width:960px) {
.header-area h1{
    font-size:4rem;
}
.header-area p{
    font-size:0.8rem;
    whitewhite-space:no
}

.header-area p br{
    display: block;
}

}

/*bg*/
.bgi{
	background-image: url("../img/bg.jpg"); 
background-repeat: repeat-x;
background-position: right;
background-size: cover;
}


}
/* blog */

#blog{
    margin:0 0 50px 0;
}
.blog-area{
    display: flex;
    justify-content: space-between;
    text-align: center;
    flex-wrap: wrap;
    overflow: hidden;
}

.blog-area article:nth-of-type(1){ 
    width:30%;
}

.blog-area .blog-block{
    width:68%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.blog-area .blog-block article{
     margin:0 0 3vh 0;   
}

.blog-area .blog-block article:nth-of-type(1){ 
    width:42%;
    animation-delay: 0.5s;
}
.blog-area .blog-block article:nth-of-type(2){ 
    width:20%;
    animation-delay: 1.5s;
}
.blog-area .blog-block article:nth-of-type(3){
    width:32%;
    animation-delay: 1s;
}

.blog-area .blog-block article:nth-of-type(4){ 
    width:32%;
    animation-delay: .8s;
}
.blog-area .blog-block article:nth-of-type(5){
    width:20%; 
    animation-delay: 1.8s;
}
.blog-area .blog-block article:nth-of-type(6){
    width:42%;
    animation-delay: 1.5s;
}

@media screen and (max-width:1300px) {
    .blog-area .blog-block article:nth-of-type(n+1){ 
        width:48%;
    }
}

@media screen and (max-width:820px) {
    .blog-area article:nth-of-type(1){
        width:50%;
        margin:0 auto 3vh auto;
    }

    .blog-area .blog-block article:nth-of-type(1){
         margin: 0 0 3vh 0;
    }

    .blog-area .blog-block{
            width:100%;
    }
}

@media screen and (max-width:768px){
    .blog-area .blog-block article:nth-of-type(n+1){ 
        animation-delay: .5s;
    }

    .blog-area article:nth-of-type(1){
        width:100%;
    }
}

@media screen and (max-width:450px){
.blog-area .blog-block article:nth-of-type(n+1) {
    width:100%;
    animation-delay: 0s!important;
    }
}


.blog-area h3{
    font-size:1rem;
    margin: 0 0 20px 0;
}

@media screen and (max-width:450px){

  .blog-area h3{
    font-size:0.9rem;
}
    
  .blog-area p{
  display: none;
    }
}

.blog-area time{
     font-size: 0.8rem;   
}

.blog-area img{
    width: auto;
    height:32vh;   
}

.blog-area article:nth-of-type(1) img{
    height:67vh;
}
  
.blog-area .blog-block article:nth-of-type(1) img{
    height:32vh;   
}


@media screen and (max-width:820px) {
.blog-area article:nth-of-type(1) img{
    width:100%;
    height:auto;
} 
.blog-area .blog-block article:nth-of-type(1) img{
    width:auto;
    height:32vh;
    }
}
  
@media screen and (max-width:450px){
.blog-area img,
.blog-area .blog-block article:nth-of-type(1) img{
    width:100%;
    height:auto;
}
}

.blog-area figure time{
    position: absolute;
    bottom:0;
    left:0;
    background:rgba(217,83,79,0.8);
    display: block;
    width:100%;
    padding: 10px;
    color: #fff;
}

.blog-area p{
     margin:0 0 20px 0; 
    text-align: left;
    font-size: 0.9rem;
}

.blog-area span{
     border:1px solid rgba(255,255,255,0.7);
    display: inline-block;
    padding:5px 10px;
    text-align: center;
    font-size: 0.8rem;
    white-space: nowrap;
}

/* service */

#service{
    position: relative;
    text-align: center;
    padding: 100px 0 0 0;
    
}

#service header{
    background:#182578;
    color: #fff;
    width:100%;
    padding: 50px 0 100px 0;
    z-index: 1;
}

#service header h2{
    font-size: 1.3rem;
    margin: 0 0 20px 0;
    letter-spacing: 0.1em;
}

#service header p{
    margin: 0 0 30px 0;   
}

#service header p br{
     display: none;   
}

#service .service-area{
    background:#fff;
    padding: 70px;
    width:70%;
    position: relative;
    top:-50px;
    left: 15%;
    z-index: 2;
}

#service .service-area ul{
    display: flex;
    flex-wrap: wrap;
    justify-content:space-around;
/* スマホ表示用。flipDownを指定している親要素に指定しないとうまく動かない*/
    transform:  translate3d(0, 0, 0);
}

#service .service-area ul li{
    opacity: 0;
    width:22%;
    padding: 0 0 50px 0;
}

#service .service-area ul li a{
    display: block;
}

@media screen and (max-width:960px) {
    #service header{
        width:100%;
    }
    #service .service-area{
        width:80%;
        left:10%;
        padding: 80px 20px 30px 20px;
    }
#service .service-area ul li{
    width:40%;
    }   

#service header p br{
     display:block;   
}
}

@media screen and (max-width:768px) {
    #service{
        padding: 200px 0 0 0;
    }
}

@media screen and (max-width:550px) {
    #service .service-area{
    width:90%;
    left:5%;
    }
}

@media screen and (max-width:400px) {
    #service .service-area{
    width:100%;
    left:0;
    font-size: 0.9rem;
}
    
}

/**/

#vidual-area #slider-area{
    position: absolute;
    top:0;
    right: 0;
    width:85%;
    z-index: -1;/*最背面へ*/
}

#vidual-area h2{
    line-height: 1.5;
    text-transform: uppercase;
    font-size: 3vw;
    position: absolute;
    top:36%;
    left:5%;
}

#vidual-area dl{
    position: absolute;
    left:2%;
    bottom:2%;
}

#vidual-area dl{
    color:#aaa;
}

#vidual-area dt,
#vidual-area dd,
#vidual-area ul,
#vidual-area ul li{
    display: inline-block;
}

#vidual-area dt{
    text-transform: uppercase;
}

#vidual-area ul li{
    margin:0 10px;
}

#vidual-area ul img{
    width:20px;
}

@media screen and (max-width:960px) {
#vidual-area{
    height: 90vh;
}
#vidual-area #slider-area{
    width:100%;
    height: 90vh;
}
#vidual-area h2{
    font-size:2.1rem;
}
#vidual-area dl{
    left:20px;
    bottom:16px;
}
#vidual-area ul li{
    margin:0 2px;
}
    
}

@media screen and (max-width:450px) {
#vidual-area h2{
    font-size:7vw;
    top: inherit;
    bottom: 13%;
}

}


/* topics */

#topics{
    border-left:3px solid #182578;
    padding: 0 0 0 20px;
}

@media screen and (max-width:768px) {
    #topics{
        margin:0 0 100px 0;
}
}

#topics h2{
    font-size: 1.5rem;
}

#topics h2 span.bgLRextend::before{
    background:#333;
}

.bx-wrapper{
    box-shadow:none;
    border:none;
}


/* footer */

#footer{
    border-top: 1px solid #ccc;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}

#footer dl{
     width:30%;   
}

#footer dl dt{
    font-size: 0.8rem;
}

#footer dl dd{
    font-size: 2rem;
}

@media screen and (max-width:900px) {
    #footer dl{
        margin: 50px 0;
    }
}

@media screen and (max-width:768px) {

#footer dl dd{
    font-size: 1.5rem;
}
    
}

#footer .footer-list{
     width:65%; 
    text-align: right;
}

#footer ul li{
    display: inline-block;
    padding: 0 10px;
    font-size: 0.8rem;
    line-height: 3;
}

#footer small{
    text-align: right;
    margin: 20px 0 0 0;
    display: block;
    width: 100%;
    font-size: 0.7rem;
}

#footer #page-top span{
    display: inline-block;
  width: 13px;
  height: 13px;
  border-top: 4px solid #fff;
  border-left: 4px solid #fff;
  transform: rotate(45deg);
}


@media screen and (max-width:900px){
#footer dl,
#footer .footer-list,
#footer small{
    width:100%;
    text-align: center;
}
    
}

/*=== 画像の表示エリア ================================= */
.slide {
  position   : relative;
  overflow   : hidden;
                    /* 画像のサイズに合わせて変更ください */
  width      : 600px;
  height     : 400px;
  margin     : auto;      /* サンプルは中央寄せの背景：白 */
  background : #fff;
}

 
  /*=== 画像の設定 ======================================= */
.slide img {
  display    : block;
  position   : absolute;
                      /* 画像のサイズを表示エリアに合せる */
  width      : inherit;
  height     : inherit;
  opacity    : 0;
  animation  : slideAnime 64s ease infinite;
}
 
 /*=== スライドのアニメーションを段差で開始する ========= */
.slide img:nth-of-type(1) { animation-delay: 0s }
.slide img:nth-of-type(2) { animation-delay: 8s }
.slide img:nth-of-type(3) { animation-delay: 16s }
.slide img:nth-of-type(4) { animation-delay: 24s }
.slide img:nth-of-type(5) { animation-delay: 32s }
.slide img:nth-of-type(6) { animation-delay: 40s }
.slide img:nth-of-type(7) { animation-delay: 48s }
.slide img:nth-of-type(8) { animation-delay: 56s }
 
 /*=== スライドのアニメーション ========================= */
@keyframes slideAnime{
   0% { opacity: 0 }
   1% { opacity: 1 }
  12% { opacity: 1 }
  13% { opacity: 0 }
 100% { opacity: 0 }
}

@media screen and (max-width:600px){
.slide{
width      : 300px;
height     : 200px;
}
}

/*==================================================
スライダーのためのcss
===================================*/
.slider {/*横幅94%で左右に余白を持たせて中央寄せ*/
   width:94%;
    margin:0 auto;
}

.slider img {
    width:100%;/*スライダー内の画像を横幅100%に*/
    height:auto;
}

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

.slider .slick-slide {
    margin:0 10px;
}

/*矢印の設定*/

/*戻る、次へ矢印の位置*/
.slick-prev, 
.slick-next {
    position: absolute;/*絶対配置にする*/
    top: 42%;
    cursor: pointer;/*マウスカーソルを指マークに*/
    outline: none;/*クリックをしたら出てくる枠線を消す*/
    border-top: 2px solid #999;/*矢印の色*/
    border-right: 2px solid #999;/*矢印の色*/
    height: 15px;
    width: 15px;
}

.slick-prev {/*戻る矢印の位置と形状*/
    left: -1.5%;
    transform: rotate(-135deg);
}

.slick-next {/*次へ矢印の位置と形状*/
    right: -1.5%;
    transform: rotate(45deg);
}

/*ドットナビゲーションの設定*/

.slick-dots {
    text-align:center;
	margin:20px 0 0 0;
}

.slick-dots li {
    display:inline-block;
	margin:0 5px;
}

.slick-dots button {
    color: transparent;
    outline: none;
    width:8px;/*ドットボタンのサイズ*/
    height:8px;/*ドットボタンのサイズ*/
    display:block;
    border-radius:50%;
    background:#ccc;/*ドットボタンの色*/
}

.slick-dots .slick-active button{
    background:#182578;/*ドットボタンの現在地表示の色*/
}

/*==================================================
ギャラリーのためのcss
===================================*/
.gallery{
columns: 4;/*段組みの数*/
padding:0 15px;/*ギャラリー左右に余白をつける*/
margin:0;
}

.gallery li {
    margin-bottom: 20px;/*各画像下に余白をつける*/
list-style:none;
}

/*ギャラリー内のイメージは横幅100%にする*/
.gallery img{
	width:100%;
	height:auto;
	vertical-align: bottom;/*画像の下にできる余白を削除*/}

/*　横幅900px以下の段組み設定　*/
@media only screen and (max-width: 900px) {
	.gallery{
	columns:3;
	}	
}

@media only screen and (max-width: 768px) {
	.gallery{
	columns: 2;
	}	
}

/**/
.index-content a:hover {
  color: black;
  text-decoration: none;
}

.index-content {
  margin-bottom: 20px;
  padding: 50px 0px;
}

.index-content .row {
  margin-top: 20px;
}

.index-content a {
  color: black;
}

.index-content .card {
  background-color: #FFFFFF;
  padding: 0;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
}

.index-content .card img {
  width: 100%;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.index-content .card h4 {
  margin: 20px;
}

.index-content .card p {
  margin: 20px;
  opacity: 0.65;
}

.index-content .blue-button {
  width: 100px;
  -webkit-transition: background-color 1s, color 1s;
  /* For Safari 3.1 to 6.0 */
  transition: background-color 1s, color 1s;
  min-height: 20px;
  background-color: #002E5B;
  color: #ffffff;
  border-radius: 4px;
  text-align: center;
  font-weight: lighter;
  margin: 0px 20px 15px 20px;
  padding: 5px 0px;
  display: inline-block;
}

@media (max-width: 768px) {
  .index-content .col-lg-4 {
    margin-top: 20px;
  }
}

.card-body{
	padding: 0.5px;
}

.card-title{
	color: #337AB7;
}

.card-text{
	text-align: right;
}