@charset "UTF-8";
html {
  font-size: 62.5%;
  overscroll-behavior: none;
  scroll-behavior: smooth;
}

html *,
html *::before,
html *::after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  vertical-align: bottom;
}

html body {
  font-family: 'Kaisei Decol', serif;
}

html body h1 {
  font-size: 3.2rem;
  letter-spacing: 0.1em;
}

html body h2 {
  font-size: 2.2rem;
  letter-spacing: 0.1em;
}

html body h3 {
  font-size: 1.6rem;
  letter-spacing: 0.13em;
  line-height: 1.875;
}

html body a {
  text-decoration: none;
  -webkit-transition: .3s;
  transition: .3s;
}

html body li {
  list-style: none;
}

html body button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

html body p, html body dd, html body a, html body dt {
  font-size: 1.4rem;
  letter-spacing: 0.01em;
  line-height: 2.125;
}

html body li, html body a, html body button {
  -webkit-transition: .3s;
  transition: .3s;
}

html body a:hover,
html body button:hover {
  opacity: .5;
}

html body img {
  width: 100%;
}

@media screen and (max-width: 520px) {
  html body h1 {
    font-size: 2.2rem;
    letter-spacing: 0.1em;
  }
}

/*--common/--*/
.inr {
  width: 960px;
  margin: 0 auto;
}

@media screen and (max-width: 960px) {
  .inr {
    width: 300px;
    margin: 0 auto;
  }
}

.section-ttl {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.section-ttl img {
  width: 55px;
}

.section-ttl h1 {
  color: #c75453;
  padding-top: 10px;
  padding-left: 17px;
}

@media screen and (max-width: 960px) {
  h1 {
    width: 250px;
  }
}

.column-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.column-container .column-content {
  width: 300px;
}

.column-container .column-content .txt {
  padding: 30px;
  color: #653824;
}

.column-container .column-content .txt p {
  padding-top: 15px;
}

@media screen and (max-width: 960px) {
  .column-container {
    display: block;
  }
  .column-container .column-content {
    margin-top: 20px;
  }
}

/*--/common--*/
/*header*/
header {
  background-color: #ffffff;
  border-bottom: 1px solid #ff8000;
  position: fixed;
  z-index: 100;
  width: 100vw;
}

header .header-wrapper {
  width: 960px;
  margin: 0 auto;
}

header .header-wrapper ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin: 10px 0;
}

header .header-wrapper ul :nth-child(3) {
  padding-top: 10px;
}

header .header-wrapper ul li {
  width: 90px;
  text-align: center;
}

header .header-wrapper ul li img {
  width: 60px;
}

header .header-wrapper ul li p {
  color: #653824;
}

/*ham*/
.menu {
  position: fixed;
  top: 90px;
  right: -100%;
  width: 100%;
  height: 100vh;
  /* メニューを縦に */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  background: rgba(255, 128, 0, 0.9);
  -webkit-transition: .3s;
  transition: .3s;
}

.menu a {
  color: #ffffff;
}

.menu a .menu-list {
  width: 100%;
  height: 100%;
  padding: 30px 0;
  /* メニューテキスト位置をリスト内中心に */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.btn {
  /* ボタンの配置位置  */
  position: absolute;
  top: 25px;
  right: 30px;
  /* ボタンの大きさ  */
  width: 40px;
  height: 48px;
  /* 最前面に */
  z-index: 200;
  display: none;
}

.btn .btn-line {
  display: block;
  position: relative;
  /* バーガー線の位置基準として設定 */
  width: 100%;
  /* 線の長さと高さ */
  height: 4px;
  background-color: #ff8000;
  /* バーガー線の色 */
  -webkit-transition: .2s;
  transition: .2s;
}

.btn .btn-line::before, .btn .btn-line::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #ff8000;
  -webkit-transition: .5s;
  transition: .5s;
  left: 0;
}

.btn .btn-line::before {
  /* 上の線の位置 */
  -webkit-transform: translateY(-16px);
          transform: translateY(-16px);
}

.btn .btn-line::after {
  /* 下の線の位置 */
  -webkit-transform: translateY(16px);
          transform: translateY(16px);
}

.btn-line.open {
  background-color: transparent;
  /* 真ん中の線を透明に */
}

.btn-line.open::before, .btn-line.open::after {
  content: "";
  -webkit-transition: .2s;
  transition: .2s;
  background-color: #653824;
}

.btn-line.open::before {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  /* 上の線を傾ける */
}

.btn-line.open::after {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
  /* 下の線を傾ける */
}

.menu.open {
  right: 0;
}

@media screen and (max-width: 960px) {
  header {
    height: 90px;
  }
  header .header-wrapper {
    width: 300px;
    margin: 0 auto;
  }
  header .header-wrapper ul :nth-child(1) {
    display: none;
  }
  header .header-wrapper ul :nth-child(2) {
    display: none;
  }
  header .header-wrapper ul :nth-child(3) {
    display: block;
  }
  header .header-wrapper ul :nth-child(4) {
    display: none;
  }
  header .header-wrapper ul :nth-child(5) {
    display: none;
  }
  .btn {
    display: block;
  }
}

/*fv*/
#fv {
  background: url(../img/fv-bg.png);
  background-size: cover;
  background-position: center;
  height: 650px;
  position: relative;
}

#fv .inr .fv-logo {
  width: 500px;
  margin: 0 auto;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

#fv .inr .scrolldown {
  color: #ffffff;
  position: absolute;
  top: 90%;
  left: 50%;
  -webkit-transform: translate(-50%, -90%);
          transform: translate(-50%, -90%);
}

#fv .inr .scrolldown ::after {
  content: '';
  position: absolute;
  top: 35px;
  left: 50%;
  width: 1px;
  height: 87px;
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 43px, #653824 43px, #653824 100%);
}

#fv .inr .scrolldown span {
  font-size: 1.6rem;
}

@media screen and (max-width: 960px) {
  #fv .inr .fv-logo {
    width: 300px;
  }
}

/*about*/
#about {
  background-color: #f8f2ec;
}

#about .inr {
  position: relative;
  padding-top: 200px;
  padding-bottom: 30px;
}

#about .inr .orange-icon {
  width: 50px;
  position: absolute;
  top: 8%;
  left: 50%;
  -webkit-transform: translate(-50%, 8%);
          transform: translate(-50%, 8%);
}

#about .inr .content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

#about .inr .content .left {
  width: 368px;
}

#about .inr .content .right {
  width: 448px;
}

#about .inr .content .right h1 {
  color: #c75453;
}

#about .inr .content .right .txt {
  padding-top: 30px;
}

#about .inr .content .right .txt h3 {
  color: #653824;
}

@media screen and (max-width: 960px) {
  #about .inr .content {
    display: block;
  }
  #about .inr .content .left {
    width: 300px;
    margin: 0 auto;
  }
  #about .inr .content .right {
    width: 300px;
    margin: 0 auto;
  }
  #about .inr .content .right h1 {
    color: #c75453;
    margin-right: 0;
  }
  #about .inr .content .right .txt {
    padding-top: 30px;
  }
  #about .inr .content .right .txt br {
    display: none;
  }
  #about .inr .content .right .txt h3 {
    color: #653824;
  }
}

/*reason*/
#reason {
  background-color: #f8f2ec;
}

#reason .inr {
  padding-bottom: 107px;
}

#reason .inr .section-ttl {
  width: 640px;
  margin: 0 auto;
}

#reason .inr .column-container {
  padding-top: 65px;
}

#reason .inr .column-container .column-content .txt {
  height: 270px;
  background-color: #ffffff;
}

@media screen and (max-width: 960px) {
  #reason .inr .section-ttl {
    width: 300px;
    margin: 0 auto;
  }
  #reason .inr .content {
    display: block;
  }
  #reason .inr .content .left {
    width: 300px;
    margin: 0 auto;
  }
  #reason .inr .content .right {
    width: 300px;
    margin: 0 auto;
  }
  #reason .inr .content .right h1 {
    color: #c75453;
  }
  #reason .inr .content .right .txt {
    padding-top: 30px;
  }
  #reason .inr .content .right .txt h3 {
    color: #653824;
  }
}

/*lineup*/
#lineup {
  background: url(../img/line-up-bg.png);
  background-position: center;
  background-size: cover;
}

#lineup .inr {
  padding-top: 100px;
  padding-bottom: 100px;
}

#lineup .inr h3 {
  color: #653824;
  padding-top: 32px;
  padding-bottom: 32px;
}

#lineup .inr .column-container .column-content {
  background-color: #f8f2ec;
}

#lineup .inr .contact {
  padding-top: 94px;
}

#lineup .inr .contact h1 {
  text-align: center;
  color: #653824;
  -webkit-filter: drop-shadow(0px 0px 7px rgba(255, 255, 255, 0.9));
          filter: drop-shadow(0px 0px 7px rgba(255, 255, 255, 0.9));
}

#lineup .inr .contact .telbtn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 0 98px;
  padding-top: 34px;
}

#lineup .inr .contact .telbtn a {
  width: 360px;
}

@media screen and (max-width: 960px) {
  #lineup .inr .contact {
    padding-top: 94px;
  }
  #lineup .inr .contact h1 {
    text-align: left;
  }
  #lineup .inr .contact .telbtn {
    display: block;
    padding: 0;
    width: 300px;
  }
  #lineup .inr .contact .telbtn a {
    padding-top: 30px;
  }
  #lineup .inr .contact .telbtn a img {
    width: 100%;
    margin: 10px;
  }
}

/*fb*/
#fb {
  background-color: #f8f2ec;
}

#fb .inr {
  padding-top: 100px;
  padding-bottom: 100px;
}

#fb .inr h3 {
  color: #653824;
  padding-top: 32px;
  padding-bottom: 32px;
}

#fb .inr .fb-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}

#fb .inr .fb-content .fb-page {
  width: 300px;
}

#fb .inr .fb-content .fb-img {
  width: 250px;
}

@media screen and (max-width: 960px) {
  #fb .inr .fb-content {
    display: block;
  }
  #fb .inr .fb-content .fb-img {
    display: none;
  }
}

/*footer*/
footer {
  background-color: #ffffff;
  border-top: 1px solid #653824;
  width: 100vw;
}

footer .footer-wrapper {
  width: 960px;
  margin: 0 auto;
  padding: 40px 0;
}

footer .footer-wrapper .footer-flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

footer .footer-wrapper .footer-flex .logo {
  width: 100px;
}

footer .footer-wrapper .footer-flex .txt {
  color: #653824;
  padding-left: 45px;
}

footer .footer-wrapper .footer-flex .txt p {
  text-align: left;
}

footer .footer-wrapper p {
  text-align: center;
  color: #653824;
  margin-top: 20px;
}

@media screen and (max-width: 960px) {
  footer .footer-wrapper {
    width: 300px;
    margin: 0 auto;
  }
}
/*# sourceMappingURL=style.css.map */