@charset "UTF-8";

html {
  font-size: 62.5%;
}
body {
  color: #484848;
  font-size: 1rem;
  font-weight: 400;
  font-family:"ヒラギノ角ゴ ProN W4", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
  background-image: url(../img/bg/bg-img.jpg);
  background-color: #f0e68c;
  background-size: cover;
  width: 100%;
  height: 100%;
  margin: 0;
  line-height: 1.5;
}
*, *::before, *::after {
  box-sizing: border-box;
}
a:link, a:visited, a:hover, a:active {
  /* color: #fff; */
  text-decoration: none;
}
ul, li {
  list-style: none;
  margin: 0;
  padding: 0;
}

img {
  width: 100%;
  height: auto;
  padding: 0;
  margin: 0;
}

p {
  margin: 0;
}

.viewport {
  position: relative;
  padding-left: 117px;
}

.wrapper {
  width: 100%;
}

/* ここから左横のナビゲーション */

.left-nav {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 117px;
  height: 100%;
  background-color: black;
  color: #fff;
  text-align: center;
}

.left-nav .logo {

}

.gloval-nav {
  font-weight: bold;
  font-size: 2rem;
}

.gloval-nav .gloval-item {
  margin-bottom: 10px;
}

.gloval-nav .gloval-item a {
  font-family: serif;
  color: #fff;
  transition: all 0.2s;
}

.gloval-nav .gloval-item a:hover {
  opacity: 0.8;
}

.online-store a {
  transition: all 0.2s;
}

.online-store a:hover {
  opacity: 0.8;
}

.logo a:hover {
  opacity: 0.8;
}

/* ここまで左横のナビゲーション */

/* ここからメインセクション */

.section-contents {
  position: relative;
  width: 100%;
  min-width: 1024px;
}

.bg {
  background-color: #fff;
  width: 1024px;
  margin: 0 auto;
  padding: 10px;
}
.bg-maiko {
  padding: 0 0 10px 0;
}
.bg-product {
  padding: 0 0 10px 0;
}

.box-wrapper {
  padding: ;
}

.d-flex {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  height: auto;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
}


.box-left {
  width: 50%;
}

.box {
  margin: 2px;
  border-radius: 15px;
  padding: 0;
}

.box.media {
  padding-top: 5px;
}
.box.fb {
  padding-top: 5px;
}

.box a {
  display: block;
  width: 100%;
  height: 100%;
  transition: all 0.1s　ease-in;
}

.fb a {
  border: 4px solid #0089fb;
  border-radius: 15px;
}

.box img {
  border-radius: 15px;
}

.box-right {
  width: 50%;
}

.box a:hover {
  transform: scale(1.1) rotate(5deg);
}

/* ここまでメインセクション */

/* ここからフッター */

.footer {
  text-align: center;
  margin-top: 52px;
  margin-bottom: 25px;
}

.footer-name {
  display: inline-block;
  font-size: 24px;
  font-weight: bold;
  border-bottom: 2px solid black;
}

.footer-list {
  margin: 10px auto;
  /* background: red; */
  width: 500px;
}

.footer-list ul {
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.footer-list li {
  width: 33.333%;
  text-align: left;
  padding-left: 18px;
  background: url(../img/footer-list.png) left center no-repeat;
}

.footer-list li a{
  color: black;
  display: block;
  font-size: 19px;
}

.footer-list a:hover {
  color: red;
}

/* ここまでfooter */

/* ここからcopyright */

.copyright {
  width: 100%;
  height: 70px;
  line-height: 70px;
  text-align: center;
  background: black;
  color: #fff;
  font-size: 2vw;
  padding-bottom: 0;
  margin-bottom: 0;

}


/* ここからmaiko.htmlのCSS */

.maiko-wrapper {
  width: 100%;
}

.about-maiko {
  width: 100%;
}

.about-maiko h2 {
  margin: 40px 0;
}

.about-maiko p {
  margin-bottom: 110px;
  font-size: 3vw;
  width: 80%;
  text-align: center;
  margin: 40px auto;
}

.about-maiko h3 {
  margin-bottom: 50px;
}

.maiko-s-wrap {
  width: 100%;
}

.maiko-s-wrap img {
  width: 33.333%;
  padding: 3px;
}

.btn-wrap {
  margin: 0 auto;
  width: 80%;
}

.btn-wrap a {
  padding: 10px;
  transition: all 0.2s;
}

.btn-wrap a:hover {
  opacity: 0.7;
}

/* ここまでmaiko.htmlのCSS */

/* ここからcompany.htmlのCSS */

.company-wrapper {
  width: 100%;
}

.about-company {
  width: 100%;
}

.company-s-wrap {
  width: 100%;
}

.company-s-wrap img {
  width: 33.333%;
  padding: 3px;
  height: auto;
}

.company-logo {
  margin-top: 10px;
  text-align: center;
}

.company-logo img{
  width: 267px;
  height: 267px;
}

.map {
height: 0;
overflow: hidden;
padding-bottom: 56.25%;
position: relative;
}
.map iframe {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
}

/* ここまでcompany.html */

/* ここからmedia.html */

.media-p {
  font-size: 1.3rem;
  padding-left: 20px;
}

.media-logo {
  margin-top: 10px;
  text-align: center;
}

.media-logo img{
  width: 521px;
  height: 349px;
}

/* ここまでmedia.html */

/* ここからproduct.html */

.bg-product {
  background-color: #ecf4e3;
}

.product-item-wrap {
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.product-item {
  padding: 10px;
  width: 33.333%;
}

.product-item h5 {
  margin-bottom: 3px;
}

.product-item span {
  font-size: 1.3rem;
  color: red;
  font-weight: bold;
}

.product-item .btn {
  display: inline-block;
  position: relative;
  background-color: #a6a6a6;
  padding: 4px 20px;
  width: 70px;
  height: 20px;
  line-height: 20px;
  margin-top: 7px;
}

.product-item .btn a {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  padding-left: 5px;
  color: #fff;
}
.product-item .btn a:hover {
  opacity: 0.7;
}

.form-wrap {
  margin-top: 30px;
}
.form-desc {
  margin-bottom: 200px;
}

.header {
  display: none;
}

/* ここからformのcss */

/* ここまでformのcss? */

/* ここからアニメーションcss */
.css-fade {
  animation-name: fade-in;
  animation-duration: 1.3s; /*アニメーション時間:*/
  animation-timing-function: ease-out;/*アニメーションさせるイージング:*/
  animation-delay: 0s;/*アニメーションを開始させる時間:*/
  animation-iteration-count: 1;/*繰り返し回数:*/
  animation-direction: normal;/*往復処理をするかどうか:*/
  animation-fill-mode: forwards;/*アニメーション後のスタイルをどうするか:*/
}

@keyframes fade-in {
  0% {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}




/* ここまでアニメーションcss */

/* ここから1024px以下の表示CSS */

@media screen and (max-width:1024px) {
    /*　画面サイズが1024pxからはここを読み込む　*/


 .viewport {
   padding-left: 0;
 }

 .section-contents {
   min-width: auto;
 }

.footer {
  display: none;
}
 .bg {
   width: 100%;
 }

 .left-nav {
   display: none;
 }

 .box img {
   border-radius: 7px;
 }
 .fb a {
   border: 2px solid #0089fb;
   border-radius: 7px;
 }

 .company-logo {
   margin-top: 10px;
   text-align: center;
   width: 20%;
   margin: 10px auto 0;
 }

 .company-logo img{
   width: 100%;
   height: auto;
 }

 .media-logo {
   margin-top: 10px;
   text-align: center;
   width: 30%;
   margin: 10px auto 0;
 }

 .media-logo img{
   width: 100%;
   height: auto;
 }

 .section-contents {
   padding-top: 50px;
 }

 /* ここからheaderのCSS */

 /* .header {
   position: fixed;
   width: 100%;
   z-index: 100;
   background-color: black;
 } */

 .header {
   display: block;
   position: fixed;
   z-index: 100;
   left: 0;
   top: 0;
   width: 100%;
   height: 50px;
   background-color: black;
   box-shadow: 0 2px 6px rgba(0,0,0,.16);
 }

 .header-logo {
     height: 50px;
     background-color: #000000;
     padding: 10px;
     z-index: 1001;
 }

 .header-logo h1 {
   display: inline-block;
 }

 /* ここからハンバーガーメニュー */
 .global-nav {
   position: fixed;
   right: -320px; /* これで隠れる */
   top: 0;
   width: 300px; /* スマホに収まるくらい */
   height: 100vh;
   padding-top: 40px;
   background-color: #fff;
   transition: all .6s;
   z-index: 200;
   overflow-y: auto; /* メニューが多くなったらスクロールできるように */
 }
 .hamburger {
   position: absolute;
   right: 0;
   top: 0;
   width: 40px; /* クリックしやすいようにちゃんと幅を指定する */
   height: 40px; /* クリックしやすいようにちゃんと高さを指定する */
   cursor: pointer;
   z-index: 300;
 }
 .global-nav__list {
   margin: 0;
   padding: 0;
   list-style: none;
 }
 .global-nav__list .pd {
   padding-right: 5px;
 }
 .global-nav__item {
   text-align: center;
   padding: 0 14px;
 }
 .global-nav__item a {
   display: block;
   padding: 13px 0;
   border-bottom: 1px solid #eee;
   text-decoration: none;
   color: #111;
   font-weight: bold;
 }
 .global-nav__item a:hover {
   background-color: #eee;
 }
 .hamburger__line {
   position: absolute;
   left: 11px;
   width: 18px;
   height: 2px;
   background-color: #fff;
   transition: all .6s;
 }
 .hamburger__line--1 {
   top: 14px;
 }
 .hamburger__line--2 {
   top: 20px;
 }
 .hamburger__line--3 {
   top: 26px;
 }
 .black-bg {
   position: fixed;
   left: 0;
   top: 0;
   width: 100vw;
   height: 100vh;
   z-index: 100;
   background-color: #000;
   opacity: 0;
   visibility: hidden;
   transition: all .6s;
   cursor: pointer;
 }
 /* 表示された時用のCSS */
 .nav-open .global-nav {
   right: 0;
 }
 .nav-open .black-bg {
   opacity: .8;
   visibility: visible;
 }
 .nav-open .hamburger__line--1 {
   transform: rotate(45deg);
   top: 20px;
   background-color: black;
 }
 .nav-open .hamburger__line--2 {
   width: 0;
   left: 50%;
   background-color: black;
 }
 .nav-open .hamburger__line--3 {
   transform: rotate(-45deg);
   top: 20px;
   background-color: black;
 }



}

@media screen and (max-width:480px) {
  box img {
    border-radius: 3px;
  }

  .about-maiko h3 {
    margin-bottom: 20px;
  }
  .about-maiko h2 {
    margin: 20px 0;
  }
  .about-maiko p {
    margin: 20px auto;
  }
  .copyright {
    height: 30px;
    line-height: 30px;
  }

  .mb {
    display: block;
  }
  .box-left {
    width: 100%;
  }
  .box-right {
    width: 100%;
  }

  /* th {
    display: block;
  } */


  form {
    width: 100%;
  }
  form th,
  form td {
  display: block;
  width: 100%;
  border-bottom: none;
}

form th {
  margin-right: 0;
}


}