@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);
@import url(https://fonts.googleapis.com/css?family=Pacifico);

/* reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;}
ul{list-style:none;}
table{border-collapse:collapse;border-spacing:0;}
caption,th{text-align:left;}
q:before,q:after{content:'';}
object,embed{vertical-align:top;}
legend{display:none;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
img,abbr,acronym,fieldset{border:0;}

body{
   font: 14px/1.9 'Noto Sans JP', Arial, Verdana, 游ゴシック, YuGothic,'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', メイリオ, Meiryo,sans-serif;
   font-weight: 300;
   -webkit-text-size-adjust:100%;
   overflow-x: hidden;
   color: #000;
   background: #fff;
}

a{
   color: #0066ff;
   text-decoration: none;
}

a:hover, .active{
  text-decoration: underline;
}

a:active, a:focus,input:active, input:focus{outline:0;}


/* ヘッダー
------------------------------------------------------------*/
#header{
   text-align: center;
}

#header h1{
   padding-top: 60px;
}

#mainnav a{
   color: #000;
}

#mainImg{
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 528px;
  
}

#mainImg img{
   position: absolute;
  left: 50%;
   max-width: 1280px;
  width: 1280px;
  height: 528px;
  margin-left: -640px;
  margin-top: 120px;
}


/* フッター
------------------------------------------------------------*/
#footer{
   clear: both;
   padding: 50px 10px 50px 0;
   text-align: center;
   font-size: 12px;
}


/* 共通
------------------------------------------------------------*/

img{
   max-width: 100%;
   height: auto;
}

section{
   clear:both;
   padding-top: 70px;
}

section h2{
   font-family: 'Pacifico', cursive;
   width: 60%;
   margin: 0 auto 40px;
   font-size: 22px;
   font-weight:normal;
   text-align: center;
   background: url(../images/borderBlack.png) repeat-x 0 50%;
   background-size: 1px 1px;
}

section h2 span {
   background: #fff;
   padding: 0 80px;
}

.inner{
   width: 94%;
   margin: 0 auto;
   padding-bottom: 50px;
}

.innerS{
   width: 60%;
   margin: 0 auto;
   padding-bottom: 80px;
   
}
.fade-slide {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1.4s ease, transform 1.4s ease;
}

.fade-slide.show {
  opacity: 1;
  transform: translateY(0);
}

/* SEC02 Gallery
------------------------------------------------------------*/
* {
  box-sizing: border-box;
  list-style: none;
  padding: 0;
  margin: 0;
}


/* スライドする要素 */
.content {
  width: 300px;
  height: 300px;
}
.content:nth-child(1) {
  background-color: tomato;
}
.content:nth-child(2) {
  background-color: orange;
}
.content:nth-child(3) {
  background-color: blue;
}
.content:nth-child(4) {
  background-color: green;
}
/* スライドレールの枠 */
.wrap {
  overflow: hidden;
  display: flex;
  align-items: center;
  height: 340px;
  margin-bottom: 100px;
}
/* content4つをまとめたスライドブロック */
.slideshow {
  display: flex;
  -webkit-animation: loop-slide 20s infinite linear 1s both;
  animation: loop-slide 20s infinite linear 1s both;
}
@-webkit-keyframes loop-slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
@keyframes loop-slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
/* ホバー時に動きを止める（パターン2・3）*/
.slide-paused:hover .slideshow {
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}
/* ホバー時の装飾（パターン3） */
.content-hover {
  transition: all 0.2s;
  margin-right: 20px;
}
.content-hover:hover {
  transform: translateY(-20px);
  border-radius: 0 10%;
  box-shadow: 0 3px 10px 0 #333;
  opacity: 0.8;
  cursor: pointer;
}

#sec02{
   padding: 0 !important;
}

#sec02 header{
   display: none;
}

#gallery li{
   float: left;
   width: calc(100%/3);
   line-height: 0;
}

#gallery img{
   width: 100%;
   height: auto;
}


/* SEC03 PROJECT
------------------------------------------------------------*/
}
.container {
   position: absolute;
  top: 50%;
  left: 50%;
  margin: 0;
  transform: translate(-50%, -50%);
  width: calc(100% - 2%);
  max-width: 500px;
}

input[type="radio"] {
  display: none;
}

input[type=radio]:checked + label {
   border-top: 5px solid #000000;
   color: #fff;
   background: #000000;
}

.tab {
  width: calc(100% / 5);
  height: 46px;
  background-color: #ffffff;
  line-height: 40px;
  font-size: .9rem;
  text-align: center;
  color: #000000;
  display: block;
  float: left;
  text-align: center;
  font-weight: bold;
  transition: all 0.2s ease;
  border-top: 5px solid #ffffff;
  cursor:pointer;
}

.tab_con{
  display: none;
  padding: 1.75rem;
  clear: both;
  overflow: hidden;
  background: #ffffff;
  border: 7px solid #000000;
}

.tab_con h2{
  font-size: 1.4rem;
  margin: 0 0 .5rem 0;
}

.tab_con p{
  font-size: .9rem;
  margin: 0;
}

#radio1:checked ~ #tb1,
#radio2:checked ~ #tb2,
#radio3:checked ~ #tb3,
#radio4:checked ~ #tb4,
#radio5:checked ~ #tb5{

  display: block;
}

   .tab_box {
      width:60%;
      margin:0 auto;
   }

@media (max-width: 700px) {
   .tab_box {
      width:90%;
   }
}

/*アニメーション*/
.tab {
  transition: 0.15s ease-in;
}

/* SEC04 BRAND
------------------------------------------------------------*/
.col3 img{
   display: block;
   margin: 0 auto 5px;
}

.col3 li{
   line-height: 2.0;
}

.col3 .img{
   padding: 0px 1px;
   margin-bottom: 10px;
   line-height: 0 !important;
   background: #f6f6f6;
}

#sec04_02{
   -webkit-background-size: cover;
   text-align: center;
   padding: 220px 100px;
}

#sec04_02 img{
   width: auto;
}


/* SEC05 COMPANY
------------------------------------------------------------*/
#sec05 p{
   margin-bottom: 5px;
}

.col2 li{
   display: inline-block;
   width: 100%;
   margin: 20px 0;
}
#sns {
   text-align:center;
}
#sns img{
   padding: 35px 10px 5px 0;
}

#sns a:hover img{
   opacity: .8;
}

#map{
   position: relative;
   padding-bottom: 75%;
   height: 0;
   overflow: hidden;
   z-index: 0;
}

#map iframe{
   position: absolute;
   top: 0;
   left: 0;
   width: 100% !important;
   height: 100% !important;
   border: 0;
}
.panel{
   position:fixed;
   top:0;
   background:#F8F8FF;
   width:100%;
   z-index:10000;
   height:64px;
}

/* RESPONSIVE 設定
------------------------------------------------------------*/

@media only screen and (min-width: 1200px){
   .inner{
      width: 1024px;
   }
}

@media only screen and (min-width: 920px){
   body{
      font-size:14px;
   }
   
  a#menu{
      display:none;
   }  

   .panel{
      display:block !important;
   }

   #mainnav li{
      display: inline-block;
      padding: 20px 25px;
      font-size: 15px;
   }
   
   
   /* SEC03 PROJECT
   -----------------*/
   .col3{
      text-align: center;
   }

   .col3 li{
      display: inline-block;
      width: 28%;
      padding: 0 2.5% 50px;
      margin-bottom: 0;
      vertical-align: top;
      text-align: left;
   }
   
  #footer{
      padding: 30px 10px 70px 0;
   }
}


@media only screen and (min-width: 641px){
   .col2 li{
      width: 48%;
      vertical-align: top;
   }
   .col2 li:first-child{
      width: 48%;
      padding-right: 4%;
   }
}

@media only screen and (max-width: 640px){
   .col2 li{
      text-align:center;
   }
   .innerS{
      width: 94%;
      padding-bottom: 70px;
   }
   .col3 li{
      line-height: 1.7;
   }
   .col3 img{
      margin: 0 auto;
   }
   .col3 .img{
      padding: 30px;
      margin-bottom: 20px;
   }
   #gallery li{
      float: none;
      width: 100%;
   }
   #map iframe{
      width: 96% !important;
      left: 2%;
   }
   #sec04_02{
      padding: 50px 20px;
   }
}

@media only screen and (max-width: 920px){
   #header{
      position: fixed;
      width: 100%;
      z-index: 500;
   }
   
   #headerWrap{
      position: relative;
      width: 100%;
      height: 70px;
      background: #fff;
      border-bottom: 1px solid #ccc;
   }
   
   #header h1{
      padding-top: 10px;
   }
   
   #header h1 img{
      margin-top: 3px;
      max-height: 50px;
      width: auto !important;
   }

  a#menu{
   display: inline-block;
   position: relative;
   width: 40px;
   height: 40px;
   margin: 10px;
   }

   #menuBtn{
   display: block;
   position: absolute;
   top: 60%;
   left: 50%;
   width: 18px;
   height: 2px;
   margin: -1px 0 0 -7px;
   background: #000;
   transition: .2s;
   }

   #menuBtn:before, #menuBtn:after{
   display: block;
   content: "";
   position: absolute;
   top: 50%;
   left: 0;
   width: 18px;
   height: 2px;
   background: #000;
   transition: .3s;
   }

   #menuBtn:before{
   margin-top: -7px;
   }

   #menuBtn:after{
   margin-top: 5px;
   }
/*
   a#menu .close{
   background: transparent;
   }

   a#menu .close:before, a#menu .close:after{
   margin-top: 0;
   }

   a#menu .close:before{
   transform: rotate(-45deg);
   -webkit-transform: rotate(-45deg);
   }

   a#menu .close:after{
   transform: rotate(-135deg);
   -webkit-transform: rotate(-135deg);
   }
*/
   .panel{
      width: 100%;
      height:400px;
      display: none;
      overflow: hidden;
      position: static;
      left: 0;
      top: 0;
      z-index: 100;
   }

   #mainnav{
      position: absolute;
      top: 0;
      width: 100%;
      text-align: right;
      z-index:500;
   }

   #mainnav ul{
      border-bottom: 1px solid #ccc;
      background: #fff;
      text-align: left;
   }

   #mainnav li a{
      position: relative;
      display:block;
      padding:15px 25px;
      border-bottom: 1px solid #ccc;
      color: #000;
      font-weight: 400;
   }

   #mainnav li a:before{
      display: block;
      content: "";
      position: absolute;
      top: 50%;
      left: 5px;
      width: 6px;
      height: 6px;
      margin: -4px 0 0 0;
      border-top: solid 2px #000;
      border-right: solid 2px #000;
      -webkit-transform: rotate(45deg);
      transform: rotate(45deg);
   }
   #mainImg{
      padding-top: 60px;
      z-index: -100;
   }
   .col3 li{
      margin: 50px auto 0 auto;
      display: block;
   }
   section{
      padding-top: 50px;
   }
   section h2{
      margin: 0 auto 20px;
   }
   section h2 span {
      padding: 0 30px;
   }
}