@charset "utf-8";

/* slick
----------------------------------------------------------------------------------------------------*/
.slide {
    position: relative;
}
.slick-slider {
    margin-bottom: 0;
    position: relative;
}
.slick-dotted.slick-slider {
    margin-bottom: 0;
}
.slide .slick-slide {
    outline:none;
}
.slide .slick-slide {
    max-height: 100vh;
}
.slide .slick-slide img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}
.slick-dots {
    position: absolute;
    right: 0;
    top: inherit;
    bottom: 13%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    width: 100%;
}
.slick-dots li {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    margin: 0;
    padding: 0;
    cursor: pointer;
}
.slick-dots li button:before {
    font-family: 'slick';
    font-size: 15px;
    opacity: 1;
    color: #c2c2c2;
}
.slick-dots li.slick-active button:before {
    opacity: 1;
    color: #999;
}
.slide-arrow {
    position: absolute;
    margin: 0 auto;
    left: 0;
    right: 0;
    bottom: 30px;
    
    text-align: center;
}
.slide-arrow img {
    max-width: 10%;
}
@media (min-width:576px) {
    .slick-dots {
        position: absolute;
        right: 2vw;
        top: 0;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        width: 20px;
    }
    .slick-dots li {
        width: 20px;
        height: 20px;
        margin: 0 5px;
    }
}

/* layout
----------------------------------------------------------------------------------------------------*/
main{overflow: hidden;}

.wrap{
  position: relative;
  padding: 60px 0px 0px;
  background-color:transparent;
}
.wrap:before {
  content: "";
  position: absolute;
  left: 0;
  top: auto;
  width: 100%;
  height: 100%;
  -webkit-transform: skew(0, -9deg);
  -moz-transform: skew(0, -9deg);
  -ms-transform: skew(0, -9deg);
  transform: skew(0, -9deg);
  z-index:-1;
}

#index section:nth-child(odd).wrap:before{background-color:#ffffff;}
#index section:nth-child(even).wrap:before{background-color:#f1f1f1;}

@media (min-width:992px) {
  .wrap{padding:3em 0}
  .wrap:before {display:none;}
}

/* ABOUT
----------------------------------------------------------------------------------------------------*/
.lead {
    font-size: 1.25rem;
    font-weight: 300;
}
.about_area > div > div{padding:0 15px 20px;}
.about_area img{display:block; max-width:100%; width:100%; margin:0 auto; border-bottom:8px solid #dfdfdf;}
.about_area.color01 img{border-color:#A62236;}
.about_area.color02 img{border-color:#C53A4F;}
.about_area.color03 img{border-color:#66D6FC;}
.about_area.color04 img{border-color:#1C2C80;}
.about_area > a:hover{text-decoration:none;}
.about_area h3{text-align:center; margin-bottom: .5rem;}
.about_area figure { margin: 0 0 1rem;}
@media (min-width:992px) {
  .about_area h3{text-align:left;}
  .about_area img{display:none;}
  .about {
    position: relative;
    height: 670px;
    overflow: hidden;
    background-color:transparent;
  }
/*  .about:nth-of-type(2) {
    height: 335px;
  }*/
  .about_area > a > figure{
    position: absolute;
    height: 375px;
    width: 50%;
    transition: all 0.5s 0.8s cubic-bezier(0.075, 0.82, 0.165, 1);
    margin: 0;
    padding: 0;
    display: block;
    list-style: none;
    background-color: transparent;
    outline: none;
  }
  .about_area > a > figure > span{
    position: absolute;
    top: 0;
    box-sizing: content-box;
    width: 100%;
    height: 100%;
    overflow: hidden;
    transition: -webkit-transform 0.5s 0.8s cubic-bezier(0.075, 0.82, 0.165, 1);
    transition: transform 0.5s 0.8s cubic-bezier(0.075, 0.82, 0.165, 1);
    transition: transform 0.5s 0.8s cubic-bezier(0.075, 0.82, 0.165, 1), -webkit-transform 0.5s 0.8s cubic-bezier(0.075, 0.82, 0.165, 1);
  }
  .about_area > a > figure > span > span{
    position: absolute;
    top: 0;
    box-sizing: content-box;
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    transition: -webkit-transform 0.5s 0.8s cubic-bezier(0.075, 0.82, 0.165, 1);
    transition: transform 0.5s 0.8s cubic-bezier(0.075, 0.82, 0.165, 1);
    transition: transform 0.5s 0.8s cubic-bezier(0.075, 0.82, 0.165, 1), -webkit-transform 0.5s 0.8s cubic-bezier(0.075, 0.82, 0.165, 1);
  }
  .about_area > a > figure > span:nth-of-type(1) {overflow: hidden;}
  .about_area > a > figure > span:nth-of-type(2) {
    -webkit-transform: skewX(-11deg);
    -ms-transform: skewX(-11deg);
    transform: skewX(-11deg);
    z-index: 3;
  }
  .about_area > a > figure > span:nth-of-type(2) > span {
    -webkit-transform: skewX(11deg);
    -ms-transform: skewX(11deg);
    transform: skewX(11deg);
  }
  .about_area > a > figure > span:nth-of-type(2) > span:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    -webkit-transform: skewX(-11deg);
    -ms-transform: skewX(-11deg);
    transform: skewX(-11deg);
    width:55px;
  }
  .about_area.area_left > a > figure > span:nth-of-type(2) > span:before {right:0;}
  .about_area.area_right > a > figure > span:nth-of-type(2) > span:before {left:0;}

  .about_area.area_left > a > figure{top:0; left:0;}
  .about_area.area_left > a > figure > span {left: 0;}
  .about_area.area_left > a > figure > span > span {left: 0;}
  .about_area.area_left > a > figure > span:nth-of-type(1) > span {padding-right: 72px;}
  .about_area.area_left > a > figure > span:nth-of-type(2) {padding-left: 29px;}
  .about_area.area_left > a > figure > span:nth-of-type(2) > span {padding-right: 43px;}

  .about_area.area_right > a > figure{bottom: 0; right: 0;}
  .about_area.area_right > a > figure > span {right: 0;}
  .about_area.area_right > a > figure > span > span {right: 0;}
  .about_area.area_right > a > figure > span:nth-of-type(1) > span {padding-left: 72px;}
  .about_area.area_right > a > figure > span:nth-of-type(2) {padding-right: 29px;}
  .about_area.area_right > a > figure > span:nth-of-type(2) > span {padding-left: 43px;}

  .about_area  > div {
    position: absolute;
    width: 50%;
    height: 295px;
    transition: all 1.5s cubic-bezier(0.075, 0.82, 0.165, 1);
    display:flex;
    align-items:center;
  }
  .about_area.area_left  > div {top: 0; right: 0; justify-content:flex-start;}
  .about_area.area_right  > div {bottom: 0; left: 0; justify-content:flex-end;}

  .about_area > div > div{max-width: 495px;}
  .about_area.area_left > div > div{padding:0 30px 0 100px;}
  .about_area.area_right > div > div{padding:0 100px 0 30px;}

  .about_area.color01 > a > figure > span:nth-of-type(2) > span:before {background-color:#A62236;}
  .about_area.color02 > a > figure > span:nth-of-type(2) > span:before {background-color:#C53A4F;}
  .about_area.color03 > a > figure > span:nth-of-type(2) > span:before {background-color:#66D6FC;}
  .about_area.color04 > a > figure > span:nth-of-type(2) > span:before {background-color:#1C2C80;}

  .about_area.color01 > a > figure > span > span{background: url(../images/top_01.jpg) no-repeat top center;background-size: cover;}
  .about_area.color02 > a > figure > span > span{background: url(../images/top_02.jpg) no-repeat top center;background-size: cover;}
  .about_area.color03 > a > figure > span > span{background: url(../images/top_03.jpg) no-repeat top center;background-size: cover;}
  .about_area.color04 > a > figure > span > span{background: url(../images/top_04.jpg) no-repeat top center;background-size: cover;}
    
}
@media (min-width:1200px) {
  .about_area  > a > div > div{max-width:585px;}
}
.about_area h3{margin-top:0; font-weight:bold;}
.about_area.color01 h3{color:#A62236;}
.about_area.color02 h3{color:#C53A4F;}
.about_area.color03 h3{color:#66D6FC;}
.about_area.color04 h3{color:#1C2C80;}
.about_area.color01 a.btn{background-color:#A62236; border-color:#A62236;}
.about_area.color02 a.btn{background-color:#C53A4F; border-color:#C53A4F;}
.about_area.color03 a.btn{background-color:#66D6FC; border-color:#66D6FC;}
.about_area.color04 a.btn{background-color:#1C2C80; border-color:#1C2C80;}
/*
.about_area a:hover.btn{background-color:#ffffff;}
.about_area.color01 a:hover.btn{color:#A62236;}
.about_area.color02 a:hover.btn{color:#C53A4F;}
.about_area.color03 a:hover.btn{color:#66D6FC;}
.about_area.color04 a:hover.btn{color:#1C2C80;}
*/

.about_area a.btn{cursor:pointer; border:none; color:#ffffff; padding:.3em 3em; font-family: 'Oswald', sans-serif;
-webkit-transition: all .3s;
transition: all .3s; border:1px solid #cccccc;}

#index a.btn{padding:.3em 3em; font-family: 'Oswald', sans-serif;}
#index a.btn:hover{
  -webkit-transform:scale(1.1);
  -ms-transform:scale(1.1);
  transform:scale(1.1);
}
  #index a.btn-outline-default:hover,#index a.btn-default:focus,#index a.btn-default:active,a.btn-default:hover {
      background: #ffffff; border:1px solid #A62236; color:#A62236;
}
  /*
  #index a.btn,#index button{font-size:16px; width:110px; height:30px; transition: all .5s ease-in-out; display:inline-flex; }
  #index a.btn:hover,#index a:hover button{font-size:18px;}

  CONTENTS
  ----------------------------------------------------------------------------------------------------*/
  #index div.half{display:flex; flex-direction: column;}
  #index div.half > div{min-height:0;}
  #index div.half h3{margin-top:0;position: relative;padding-bottom: .5em;border-bottom: 4px solid #ccc;}
  #index div.half h3 a{ color:#4f7eb9 !important; text-decoration:none; display: block;}
  #index div.half h3:after {background-color: #4f7eb9; position: absolute; bottom: -4px; left: 0; z-index: 2; content: ''; width: 20%; height: 4px;}
  #index div.half > div.text{padding:20px 15px;}
  @media (min-width:768px) {
    #index div.half{display:flex; align-items:center; flex-direction: row;}
    #index div.half:nth-child(odd){ flex-direction: row-reverse;}
    #index div.half:nth-child(even) > div.text{padding:20px 15px 20px 40px ;}
    #index div.half:nth-child(odd) > div.text{padding:20px 40px 20px 15px;}
    #index div.half > div:first-child{width:50%;}
  }
  /*
  @media (min-width:576px) {
  #index div.half div.text{max-width:270px;}
}
*/
@media (min-width:768px) {
  #index div.half div.text{max-width:360px;}
}
@media (min-width:992px) {
  #index div.half div.text{max-width:480px;}
}
@media (min-width:1200px) {
  #index div.half div.text{max-width:570px;}
}