* {
  box-sizing: border-box;
}
body {
  margin: 0;
  -webkit-font-smoothing: antialiased;
  font-family: Verdana,"游ゴシック Medium","Yu Gothic Medium","游ゴシック体",YuGothic,sans-serif;
  font-weight: 400;
  letter-spacing: 0.05em;
  font-size: 14px;
}

ul {
  margin: 0;
  padding: 0;
}

li {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  text-decoration: none;
  color: #323A45;
  transition: all .3s;
}

a:hover {
  color: #0dc0c0;
  text-decoration: none;
}

h1,h2, h3, h4, h5, h6 {
  margin-top: 10px;
  margin-bottom: 10px;
  font-weight: 400;
}

h4 {
  font-size: 15px;
}

h3 {
  font-size: 20px;
}

h2 {
  font-weight: 400;
  font-size: 32px;
}

h1 {
  letter-spacing: 0.2em;
  font-size: 40px;
}

p{
  color: #888;
  font-size: 18px;
}

.container {
  max-width: 1200px;
  width: 100%;
  padding: 0 15px;
  margin: 0 auto;
}


.section-title {
  font-weight: 300;
  letter-spacing: 0.4em;
  margin: 50px 0;
  line-height: 50px;
  text-align: center;
}

.gray-section {
  background: #f4f4f4;
  color: #888;
}

.vertical-writing {
  writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
  -webkit-text-orientation: mixed;
  text-orientation: mixed;
  display: block;
}

.text-combine {
  text-combine-upright: all;
  -webkit-text-combine: horizontal;
  -ms-text-combine-horizontal: all;
}

.text-combine {
  -webkit-text-combine: horizontal;
  -ms-text-combine-horizontal: all;
  text-combine-upright: all;
}


/*--------日本語title----------*/
.title{
  font-family: 'Noto Serif SC', serif;
  font-weight: 100;
  letter-spacing: 0.25em;
}

/*---------英語title-----------*/
.en-title{
  margin:0;
  font-family: 'Staatliches', cursive;
}

/*--------英語小title-----------------*/
.en-smal-title{
    margin:0;
    font-size: 20px;
    font-family: 'Staatliches', cursive;
    color: #767171;
    letter-spacing: 0.3em;
}

/*-----------background-position-------------*/
.background-left,
.background-right{
  background-size: cover;
}

/*---------text-align------------*/
.text-left{
  text-align: left;
}

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

.text-center{
  text-align: center;
}
/*-----------animated-----------*/
.soon{
  -webkit-animation-duration:3s;
  animation-delay:3s;
}


.slower{
  -webkit-animation-duration:5s;
  animation-delay:5s;
}

/*-----------画像影------------------*/
.frame {
  display: inline-block;
  box-shadow:8px 8px 11px -7px #555,
  8px 8px 13px rgba(255,255,255,0.8) inset;
}

.frame-left{
  display: inline-block;
  box-shadow:-8px 8px 11px -7px #555,
  -8px 8px 13px rgba(255,255,255,0.8) inset;
}

/*-----------エンボス凸------------*/
.emboss-raiset{
  text-align: center;
  font-size: 48px;
  font-weight: 700;
  text-shadow: 2px -2px 0 rgba(255,255,255,0.8),
                -2px 2px 0 rgba(0,0,0,0.25),
                0 4px 8px rgba(0,0,0,0.15);
  letter-spacing: .02em;
}

/*-----------色々な形の影------------*/
.shadow{
  filter: drop-shadow(5px 5px 5px #aaa);
}

/*------------線角丸-----------------*/
.round-cap-top:before {
    background-color: black; /* 線色 */
    border-radius: 3px; /* 線幅の半分 */
    content: "";
    display: block;
    height: 6px; /* 線幅 */
}

/*----------縦書き-----------*/
.vertical-writing{
  writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  -webkit-writing-mode:vertical-rl;
  -webkit-text-orientation: mixed;
  text-orientation: mixed;

}

/*--------縦中横----------------*/
.text-combine{
    text-combine-upright: all;
    -webkit-text-combine: horizontal;
    -ms-text-combine-horizontal: all;
}

/*--------赤太字----------------*/
.red{
    color:red;
    font-weight: bold;
}

/*--------太字大文字ｈ１----------------*/
.highlight{
    font-size: 40px;
    font-weight: bold;
}

/*---sticky------------*/

.sticky{
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

.sticky2{
  position: -webkit-sticky;
  position: sticky;
  top: 10%;
}

/*-------------UP--------------*/
.UP{
  margin: 0;
  padding: 0;
  position: relative;
  width: 100%;
  height: 500px;
  background: -moz-linear-gradient(top, #FFF,transparent);
  background: -webkit-linear-gradient(top, #FFF,transparent);
  background: linear-gradient(to top, #FFF,transparent);
}

/*-------------UP2--------------*/
.UP2{
  margin: 0;
  padding: 0;
  position: relative;
  width: 100%;
  height: 100%;
  background-color:  #FFF;
}


/*-------btn-sticky-----------*/

.btn-sticky {
  display: inline-block;
  padding: 0.5em 1em;
  text-decoration: none;
  background: #f7f7f7;
  border-left: solid 6px #cf950f;/*左線*/
  color: #3c4870;/*文字色*/
  font-weight: bold;
  font-size: 20px;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
}
.btn-sticky:active {
  box-shadow: inset 0 0 2px rgba(128, 128, 128, 0.1);
  transform: translateY(2px);
}

/*-------btn-sticky2-----------*/
.btn-sticky2 {
  display: inline-block;
  padding: 0.5em 1em;
  text-decoration: none;
}
.btn-sticky2:active {
  transform: translateY(10px);
}

  /*-------  cta-btn  --------*/

  .cta-btn-section {
      position: fixed;
      z-index: 1002;
      right: 50px;
      bottom: 50px;
  }

  .cta-btn-section-responsive {
      position: fixed;
      z-index: 1002;
      right: 20px;
      bottom: 20px;
      display: none;
  }

  .cta-btn {/*ボタンの下地*/
    color: #FFF;/*文字・アイコン色*/
    border-radius: 50%;/*角丸に*/
    position: relative;
    display: inline-block;
    height: 120px;/*高さ*/
    width: 120px;/*幅*/
    text-align: center;/*中身を中央寄せ*/
    padding-top: 30px;/*上側との余白*/
    box-sizing: border-box;
    font-size: 20px;/*文字のサイズ*/
    background: #52c2d0;
    overflow: hidden;/*はみ出た部分を隠す*/
    text-decoration:none;/*下線は消す*/
    box-shadow: 0px 0px 0px 5px #52c2d0;
      border: dashed 1px #FFF;
    transition: .3Ss;
  }

  .cta-btn:active{
      -ms-transform: translateY(2px);
      -webkit-transform: translateY(2px);
      transform: translateY(2px);
      box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
      border-bottom: none;
  }


  .telephone-big{
    font-size: 30px;
    color: #FFF;
  }


  .ribbon4 {
    display: inline-block;
    position: relative;
    height: 60px;/*高さ*/
    line-height: 60px;/*高さ*/
    text-align: center;
    padding: 0 40px 0 18px;/*文字の左右の余白*/
    font-size: 18px;/*文字サイズ*/
    background: #cf950f;/*背景色*/
    color: #FFF;/*文字色*/
    box-sizing: border-box;
  }

  .ribbon4:after {
    position: absolute;
    content: '';
    width: 0px;
    height: 0px;
    z-index: 1;
  }

  .ribbon4:after {
    top: 0;
    right: 0;
    border-width: 30px 15px 30px 0px;
    border-color: transparent #eee transparent transparent;
    border-style: solid;
  }

  /*-----------float-------------*/
.left{
  float: left;
}

.right{
  float: right;
}

.left2{
  float: left;
}

.right2{
  float: right;
}

/*----------------------*/

header {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 100%;

}

.logo{
  position: fixed;
    padding: 30px 30px;
    top: 0;
    left: 0;
    z-index: 50;

}

/*----------under-nav---------*/
.under-nav{
  height: 400px;
  padding: 30px;
  background-color: #eee;
}
.column{
  margin: 0 auto;
  width: 460px;
}

.column-list{
  text-align: center;
  float: left;
}

.column-list li{
  text-align: center;
  margin: 15px;
}

.under-btn{
  width: 200px;
}

/*----------footer---------*/
footer{
  color: #FFF;
  text-align: center;
  background-color:#323a45;
  height:600px;
}

.tel h4{
  padding-top: 50px;
  margin-top:0;
}

.tel h2{
  font-size: 30px;
}

.tel p{
  margin: 0 auto;
  padding-top: 50px;
  padding-bottom: 25px;
}

.tel-nmb{
  color: #FFF;
}


/* ====================================
Navigation
==================================== */

.overlay-navigation {
  position: fixed;
  z-index: 99;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: hsla(0, 0%, 0%, 0.8);
  transform: translateX(-100%);
}

.overlay-slide-down {
  transition: all .4s ease-in-out;
  transform: translateX(0)
}

.overlay-slide-up {
  transition: all .8s ease-in-out;
  transform: translateX(-100%)
}

nav,
nav ul {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

nav ul {
  list-style: none;
}

nav ul li {
  flex-basis: 20%;
  justify-content: center;
  align-items: center;
  height: 20%;
  overflow: hidden;
  transform: translateX(-100%);
}

nav li a {
  position: relative;
  top: 46%;
  color: #fff;
  text-transform: uppercase;
  font-family: 'Work sans', sans-serif;
  font-weight: 300;
  letter-spacing: 4px;
  text-decoration: none;
  display: block;
  text-align: center;
  font-size: 20px;
}

nav li a:before {
  content: '';
  width: 70px;
  height: 2px;
  background-color: #fff;
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 100;
  transform: translateX(-100%);
  opacity: 0;
  transition: all .2s linear;
}

nav li a:after {
  content: attr(data-content);
  font-size: 0.7rem;
  transition: all .2s linear;
  opacity: 0;
  position: absolute;
  z-index: 100;
  color: #fff;
  display: block;
  margin-right: auto;
  margin-left: auto;
  left: 0;
  right: 0;
  bottom: -10px;
  text-transform: none;
  font-family: 'Open sans', serif;
  font-weight: 300;
  font-style: italic;
  letter-spacing: 0;
}

nav li a:hover:before {
  transform: translateX(0);
  opacity: 1;
}

nav li a:hover:after {
  transform: translateY(15px);
  opacity: 1;
}

nav li:nth-of-type(1){background-color: #7cdbd5}
nav li:nth-of-type(2){background-color: #a9b7c0}
nav li:nth-of-type(3){background-color: #c7d8c6}
nav li:nth-of-type(4){background-color: #efd9c1}
nav li:nth-of-type(5){background-color: #cccbc6}

.slide-in-nav-item {
  animation: slide-in-nav-item 0.4s linear 1 .2s both;
}

.slide-in-nav-item-delay-1 {
  animation: slide-in-nav-item 0.4s linear 1 .4s both;
}

.slide-in-nav-item-delay-2 {
  animation: slide-in-nav-item 0.4s linear 1 .6s both;
}

.slide-in-nav-item-delay-3 {
  animation: slide-in-nav-item 0.4s linear 1 .8s both;
}

.slide-in-nav-item-delay-4 {
  animation: slide-in-nav-item 0.4s linear 1 1s both;
}

.slide-in-nav-item-reverse {
  animation: slide-in-nav-item-reverse .3s linear 1 .5s both;
}

.slide-in-nav-item-delay-1-reverse {
  animation: slide-in-nav-item-reverse .3s linear 1 .4s both;
}

.slide-in-nav-item-delay-2-reverse {
  animation: slide-in-nav-item-reverse .3s linear 1 .3s both;
}

.slide-in-nav-item-delay-3-reverse {
  animation: slide-in-nav-item-reverse .3s linear 1 .2s both;
}

.slide-in-nav-item-delay-4-reverse {
  animation: slide-in-nav-item-reverse .3s linear 1 both;
}


/* ====================================
Burger king
==================================== */

.open-overlay {
  position: absolute;
    width: 80px;
    height: 80px;
    background-color: #fff;
    cursor: pointer;
    /*position: relative;*/
    overflow: hidden;
    border: 1px solid #333;
    border-radius: 50%;
    display: block;
    position: fixed;
    top: 50px;
    right: 50px;
    z-index: 10000;
    padding: 22px 22px;


}

.open-overlay span {
    display: block;
    height: 1px;
    background-color: #333;
    margin-top: 8px;
    width: 30px;
}

.animate-top-bar {
  animation: animate-top-bar .6s linear 1 both
}

.animate-bottom-bar {
  animation: animate-bottom-bar .6s linear 1 both
}

.animate-middle-bar {
  animation: animate-middle-bar .6s linear 1 both
}

.animate-out-top-bar {
  animation: animate-out-top-bar .6s linear 1 both
}

.animate-out-bottom-bar {
  animation: animate-out-bottom-bar .6s linear 1 both
}

.animate-out-middle-bar {
  animation: animate-out-middle-bar .6s linear 1 both
}


/* ====================================
Animation keyframes
==================================== */

@keyframes slide-in-nav-item {
  from {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%)
  }
  to {
    -webkit-transform: translateX(0);
    transform: translateX(0)
  }
}

@keyframes slide-in-nav-item-reverse {
  from {
    -webkit-transform: translateX(0);
    transform: translateX(0)
  }
  to {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%)
  }
}

@keyframes animate-top-bar {
  0% {
    background-color: #333;
  }
  50% {
    -webkit-transform: translateY(9px);
    transform: translateY(9px)
  }
  80% {
    -webkit-transform: translateY(5px);
    transform: translateY(5px);
    background-color: #333;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    background-color: #29363B;
  }
}

@keyframes animate-bottom-bar {
  0% {
    background-color: #333;
  }
  50% {
    -webkit-transform: translateY(-9px);
    transform: translateY(-9px)
  }
  80% {
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
    background-color: #333;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    background-color: #29363B;
  }
}

@keyframes animate-middle-bar {
  0% {
    background-color: #333;
  }
  80% {
    background-color: #333;
  }
  100% {
    background-color: #29363B;
  }
}

@keyframes animate-out-top-bar {
  0% {
    background-color: #29363B
  }
  50% {
    -webkit-transform: translateY(9px);
    transform: translateY(9px)
  }
  80% {
    -webkit-transform: translateY(5px);
    transform: translateY(5px);
    background-color: #29363B
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    background-color: #333;
  }
}

@keyframes animate-out-bottom-bar {
  0% {
    background-color: #29363B
  }
  50% {
    -webkit-transform: translateY(-9px);
    transform: translateY(-9px)
  }
  80% {
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
    background-color: #29363B;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    background-color: #333;
  }
}

@keyframes animate-out-middle-bar {
  0% {
    background-color: #29363B
  }
  80% {
    background-color: #29363B;
  }
  100% {
    background-color: #333;
  }
}

/*-------scrollOut2-----*/
.wrap {
  position: relative;
  display: flex;
  flex: 0 1 25%;
  overflow: hidden;
}

.sail {
  width: 100%;
  transform: translateX(0%);
  transition: transform 1.5s cubic-bezier(0.19, 1, 0.22, 1) 0.2s;
}

.wrap:nth-child(1) .sail {
  background: #373737;
}

.wrap:nth-child(2) .sail {
  background: #f4f4f4;
}

.wrap:nth-child(3) .sail {
  background: #dcd0c0;
}

.wrap:nth-child(4) .sail {
  background: #c0b283;
}

.img {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 400%;
  background-image: url("../img/sejyutu_naka.jpg");
  background-size: cover;
  background-position: 50%;
  background-repeat: no-repeat;
  transform: translateX(0%);
  transition: transform 1.5s cubic-bezier(0.19, 1, 0.22, 1) 0.2s;
}

.wrap:first-child .img {
  left: -100%;
}

.wrap:nth-child(2) .img {
  left: -200%;
}

.wrap:nth-child(3) .img {
  left: -300%;
}

.wrap:last-child .img {
  left: -400%;
}

.wrap.is-animated .sail {
  transform: translateX(101%);
}

.wrap.is-animated .img {
  transform: translateX(25%);
}
/*-------scrollOut-----*/
[data-scroll] {
  opacity: 0;
  will-change: transform, scale, opacity;
  transform: translateY(6rem) scale(0.93);
  transition: all 1.5s cubic-bezier(0.165, 0.84, 0.44, 1); }

[data-scroll="in"] {
  opacity: 1;
  transform: translateY(0) scale(1); }

.splitting .char {
  color: transparent; }
  .splitting .char:after {
    visibility: visible;
    color: #52c2d0;
    opacity: 0;
    transform: translateY(30%);
    transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transition-delay: calc(.2s + (.04s * var(--char-index) ) ); }

[data-scroll="in"] .char:after {
  opacity: 1;
  transform: translateY(0); }


/* タブレット向けレイアウト */
@media all and (max-width: 1000px) {

}
/* モバイル向けレイアウト */
@media all and (max-width: 600px) {

  body {
    font-size: 8px;
  }

  h4{
    font-size: 8px;
  }

h3{
  font-size: 13px;
}

  h2{
    font-size: 16px;
  }

  h1 {
    font-size: 22px;
  }

  h2, h3, h4, h5, h6 {
    margin-top: 5px;
    margin-bottom: 5px;
    font-weight: 200;
  }

  h1{
    margin-top: 10px;
    margin-bottom: 10px;
    font-weight: 200;
  }


  p{
    font-size: 10px;
  }

  .container {
    width: 100%;
    padding: 0 15px;
    margin: 0 auto;
  }

  .section-title {
    font-weight: 200;
    letter-spacing: 0.35em;
    margin: 20px 0;
  }

  .title{
    letter-spacing: 0.22em;
  }

  .en-title{
    padding: 0 5px;
  }

  .en-smal-title{
    font-size: 12px;
    letter-spacing: 0.26em;
    padding: 0 5px;
  }

.border-animation:before {
  left: auto;
}
.logo{
  display: none;
}

.left2{
  float: none;
}

.right2{
  float: none;
}

.vertical-writing h1{
  line-height: 1.5;
}

.vertical-writing p{
  line-height: 1.9;
}
/*--------太字大文字ｈ１----------------*/
.highlight{
    font-size: 20px;
}
/*-----------エンボス凸------------*/
.emboss-raiset{
  font-size: 25px;
}

/*-------  ここからcta-btn  --------*/
.cta-btn-section{
  display: none;
}

.cta-btn-section-responsive {
    position: fixed;
    z-index: 1002;
    right: 15px;
    bottom: 30px;
    display: block;
}

.cta-btn {/*ボタンの下地*/
  padding-top: 15px;/*上側との余白*/
  height: 80px;/*高さ*/
  width: 80px;/*幅*/
  font-size: 15px;/*文字のサイズ*/
}

.telephone-big{
  font-size: 17px;
}

/*-------  nav  --------*/
nav ul li a {
  font-size: 13px;
}
nav li a:after {
  font-size: 0.6rem;
}
.open-overlay {
  right: 1rem;
}
nav li a:before {
  width: 8px;
}

.open-overlay {
    width: 70px;
    height: 70px;
    top: 20px;
    right: 10px;
    padding: 18px 18px;
}

/*----------under-nav---------*/
    .under-nav{
      height: 350px;
      padding: 30px 0px;
      background-color: #eee;
    }
    .column{
      margin: 0 auto;
      width: 320px;
    }

    .column-list{
      text-align: center;
      float: left;
      width: 50%;
    }

    .column-list li{
      text-align: center;
    }

    .under-btn{
      width: 99%;
    } 

  .btn-sticky {
    padding: 1em;
    font-size: 15px;

}
/*-----------footer----------------*/
footer {
  height: 400px;
}

.tel h2{
  font-size: 20px;
}

.address h2{
  font-size: 13px;
}

}