html {font-size: 62.5%; /*ベースを10pxに*/}
*, *:before, *:after {
  margin:0; padding:0; border:0;
  box-sizing:border-box;
  list-style: none;
  } /*すべて初期化*/
body {
    font-size: 1.0rem; /*10px*/
    font-family: "游ゴシック", "Yu Gothic", "游ゴシック体", YuGothic, sans-serif;
    color:#222; background-color:#f6f6f6;
    }
a { color:inherit; text-decoration:none;}

@media (max-width: 767px) {
  .sp-del{display:none;}
  .item-r{margin-bottom: 40px;}}

/*****HEADER*****/
/* トップスライドショー */

#top-img{
  background-image: url("../img/01-top-2.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;
}
header{
    width:100%; height:78px;
    position:fixed; z-index:2;
    display:flex; align-items:center; justify-content:space-between;
    }
.logo {width:120px; margin-left:32px; margin-right:auto;}

nav {margin-right:32px;}
nav ul {list-style:none;}
nav ul li {display:inline-block; margin-left:20px; font-size:1.2rem; font-weight:700; letter-spacing:0.1em;}
nav ul a::after {content:""; border-bottom:solid 2px #222;display:block; width:0; transition:all .2s ease;}
nav ul a:hover::after { width: 100%;}

@media (max-width:767px) {
  nav{
    margin-right:0;
    width:240px; height:100%; background-color:#ff4500;
    padding-top:100px;
    position:fixed;top:0; right:0; z-index:4;
    transform:translateX(240px); transition: all .6s;
    }
  nav ul li { display:block; margin:0; padding:2em 0; color:#fff; text-align:center;}
  nav ul a::after,nav ul a:hover::after {display:none}
  nav.open {transform:translateX(0);}
  }

.overlay {
  content: ""; display:block;
  width:0; height:0;
  background-color: rgba(255, 255, 255, 0.6);
  position:fixed; top:0; left:0; z-index:1;
  opacity:0; transition: opacity .7s;
}
.overlay.open { width: 100%; height: 100%; opacity:1; }

.menu-trigger {
  display:none;
  width:32px; height: 26px;
  vertical-align:middle;
  cursor:pointer;
  position:fixed; top:30px; right:30px;
  z-index:5;
}

 .menu-trigger span {
  display:none;
  box-sizing:border-box;
  position:absolute;
  left:0;
  width:100%; height:4px;
  background-color:#000; transition:all .5s;
}
.menu-trigger.active span { background-color: #fff;}
.menu-trigger span:nth-of-type(1) { top: 0;}
.menu-trigger.active span:nth-of-type(1) { transform: translateY(11px) rotate(-45deg);}
.menu-trigger span:nth-of-type(2) { top: 11px;}
.menu-trigger.active span:nth-of-type(2) { opacity: 0;}
.menu-trigger span:nth-of-type(3) { bottom: 0;}
.menu-trigger.active span:nth-of-type(3) { transform: translateY(-11px) rotate(45deg);}

@media (max-width:767px) {
    .menu-trigger,.menu-trigger span { display: inline-block;}
    }


#btn_fixed {
    position:fixed; right:0px; bottom:20px;
    padding:16px 32px; background-color:#ff4500;
    font-size:1.4rem; font-weight:700; letter-spacing:0.08rem; color:#fff;
    border-radius:40px 0px 0px 40px;
      -webkit-border-radius:40px 0px 0px 40px; -moz-border-radius:40px 0px 0px 40px;
      -webkit-transition:all .3s; transition:all .3s; z-index:2;
    } @media (max-width: 767px) {
      #btn_fixed {display: none;}}
#btn_fixed:hover{ background:#ff5235; padding:16px 100px 16px 32px;}


.container {
    width:960px; margin:60px auto;
    display:flex; align-items:center; justify-content: space-around;
    } @media (max-width: 767px) {
            .container { flex-direction: column-reverse; width: 85%; margin: 4em auto 9em;}
            }

.section_title { margin-top:56px; text-align:center;}
.section_title>h2 {
    font-family: futura-pt-bold;
    font-size:2.8rem; font-weight:700; font-style:normal;
    display:inline-block; border-bottom:solid 2px #222;
    }
    @media (max-width:767px) {
    .section_title>h2 {font-size:4.6rem;}
    }

.item-l {flex-basis:50%;}
.item-r {flex-basis:35%;}

.container img {width:100%;}

hr {width:960px; margin:auto; border-top:1px dotted #ccc;}
     @media(max-width:767px){hr{width:90%;}}

.insta-area{ width:960px; margin:60px auto;}
     @media(max-width:767px){.insta-area {width: 90%;}}


/* fonts ------------ */
.copy-jp{ font-size:2.2rem; font-weight:700; letter-spacing:0.1rem;}
.copy-en{ font-size:1.4rem; font-weight:700; margin-bottom:2em;}
.txt-jp { font-size:1.3rem; line-height:1.7; margin-bottom:1em;
          text-align:justify; text-justify:inter-ideograph;}
.txt-en { font-size:1.1rem; line-height:1.7;
          text-align:justify; text-justify:auto;}

@media (max-width: 767px) {
  .copy-jp { font-size:2.2rem; }
  .copy-en { font-size:1.4rem; margin-bottom:1.6em;}
  .txt-jp  { font-size:1.4rem; margin-bottom:1em;}
  .txt-en  { font-size:1.2rem;}
}
/* ------------ */

.text-area { width:800px; margin:0 auto 40px;}
      @media (max-width: 767px) {.text-area { width:90%;}}

.title-s {
    display:block; margin-bottom:1.4rem;
    font-size:1.6rem; font-weight:700; line-height:1.7;
    text-align:left; text-justify:auto;}

/* .vw-image{ width:100%; height:530px; position: relative; overflow:hidden} */
.vw-image img { width:100%; height:530px; object-fit:cover;
    } @media (max-width: 767px) {
        .vw-image img{ height:auto; }}

.m-image img {
    display:block; width:960px; height:450px; margin:40px auto;
    } @media (max-width: 767px) {
          .m-image img{ width:90%; height:auto;}
          }

.btn_rad {
  	display:block; width:200px; margin:0 auto 60px; padding:0.8em;
    font-size:1.2rem; font-weight:700; letter-spacing:0.05rem;
  	color:#222; text-align:center; text-decoration:none;
  	border:1px solid #222; background-color:#f5f5f5;
  	border-radius:50px; transition:.3s;
    }@media (max-width: 767px) {
          .btn_rad {width:68%; font-size:1.3rem; }
          }
.btn_rad:hover { background:#222; color:#fff;}



/* お問い合わせフォーム用 ----------------*/
.base-area {width:600px; margin:40px auto;
      }@media (max-width: 767px)
            {.base-area {width:90%;}}
.contact-item { margin:0 auto 3em; width:100%;}
  label { display:block; margin-bottom:1em; font-size:1.2rem; font-weight:700;}
  .inputs { padding:1em; font-size:1.6rem; }
  /* inputはinline-blodkで変更不可のため、labelをblockで改行 */
#send-name,#email {
    width:60%;
    }@media(max-width:767px)
      { #send-name,#email {width:100%;}}
textarea {
    width:100%; height:7em; line-height:1.5em; resize: none; }
input:focus,
textarea:focus {
    outline:0; box-shadow:0px 0px 8px 1px rgba(0,0,0,0.1);}
#send-btn:focus {
    outline:none;}
/* ---------------------------- */

footer {
  display: block;
  font-size:80%; letter-spacing:0.1rem; color:#fff;
  width:100%; padding:30px 0 40px; margin-top:60px;
  text-align:center; background-color:#1B1B1B;
  }

/* ふわっと表示 */
.fadein { opacity:0; transform:translateY(20px); transition:all 0.6s;}

.slide .slick-slide { opacity: 0.5;}