@charset "UTF-8";
/* style.scss */
/* reset Document */
/* --------------------------------------------------
    Reset.css
-------------------------------------------------- */
/* 
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark
*/
@import url("https://fonts.googleapis.com/css2?family=Slackside+One&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@300;400;500;700;900&display=swap");
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

body {
  line-height: 1;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, div {
  display: block;
}

nav ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: "";
  content: none;
}

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
  text-decoration: none;
}

/* change colours to suit your needs */
ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none;
}

/* change colours to suit your needs */
mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold;
}

del {
  text-decoration: line-through;
}

abbr[title], dfn[title] {
  border-bottom: 1px dotted;
  cursor: help;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* change border colour to suit your needs */
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #cccccc;
  margin: 1em 0;
  padding: 0;
}

input, select {
  vertical-align: middle;
}

/* mixin.scss */
/* --------------------------------------------------
    レ ス ポ ン シ ブ
-------------------------------------------------- */
input::placeholder {
  color: #bdbdbd;
}
input:-ms-input-placeholder {
  color: #bdbdbd;
}
input::-ms-input-placeholder {
  color: #bdbdbd;
}

/* --------------------------------------------------
    b r - p c （ P C ： 改 行 ） 
-------------------------------------------------- */
/* --------------------------------------------------
    b r - s p （ S P ： 改 行 ） 
-------------------------------------------------- */
/* --------------------------------------------------
    b o x - s i z i n g 
-------------------------------------------------- */
/* --------------------------------------------------
    背 景（ c o v e r ）
-------------------------------------------------- */
/* --------------------------------------------------
    背 景（ c o n t a i n ）
-------------------------------------------------- */
/* --------------------------------------------------
    背 景（ 暗 く s h a d o w ）
-------------------------------------------------- */
/* --------------------------------------------------
    背 景（ 明 る く s h a d o w ）
-------------------------------------------------- */
/* --------------------------------------------------
    親 子 の　位 置（ p o s i t i o n ）

	@include relative();   // お　や
	@include absolute();   // こ ど も
	@include fixed();      // 固 定
	@include static();     // デ フ ォ ル ト

	($top:0, $right:0, $bottom:0, $left:0)
-------------------------------------------------- */
/* --------------------------------------------------
    🌊 波 線 （ w a v e - t o p - l e f t ） 
-------------------------------------------------- */
/* --------------------------------------------------
    🌊 波 線 （ w a v e - t o p - l e f t ） 
-------------------------------------------------- */
/* color.scss */
/* --------------------------------------------------
    カ ラ ー


-------------------------------------------------- */
/* images.scss */
/* --------------------------------------------------
    L O G O（ P N G ）
-------------------------------------------------- */
.logo-png {
  background-image: url("../images/icon/logo.png");
}

.logo-wht {
  background-image: url("../images/icon/logo_wht.png");
}

.song-svg {
  background-image: url("../images/icon/song.svg");
}

.name-wht {
  background-image: url("../images/icon/name_wht.svg");
}

.name-blk {
  background-image: url("../images/icon/name_blk.svg");
}

/* --------------------------------------------------
    i m g
-------------------------------------------------- */
.denen-img {
  background-image: url("../images/common/denen.jpg");
}

.baba-img {
  background-image: url("../images/common/baba_01.jpg");
}

.yuki-img {
  background-image: url("../images/common/yuki_01.jpg");
}

.outside-01 {
  background-image: url("../images/common/outside_01.jpg");
}

.outside-02 {
  background-image: url("../images/common/outside_02.jpg");
}

.course-01 {
  background-image: url("../images/course/course_01.jpg");
}

.course-02 {
  background-image: url("../images/course/course_02.jpg");
}

.course-03 {
  background-image: url("../images/course/course_03.jpg");
}

.course-04 {
  background-image: url("../images/course/course_04.jpg");
}

.staff-01 {
  background-image: url("../images/course/staff_01.jpg");
}

/* --------------------------------------------------
    S V G
-------------------------------------------------- */
.tizu-svg {
  background-image: url("../images/common/tizu.svg");
}

.top_btn_svg {
  background-image: url("../images/icon/top_btn.svg");
}

/* common.scss */
/* --------------------------------------------------
    基 本
-------------------------------------------------- */
input {
  appearance: none;
  -webkit-appearance: none;
}

a {
  text-decoration: none;
  text-decoration-color: none;
  color: inherit;
}

/* --------------------------------------------------
    b o d y
-------------------------------------------------- */
/* 基本設定 */
body {
  background: #fbf9f4;
  /* color.scssで変更 */
  overflow-y: scroll; /* スクロールバーのずれ防止 */
  text-align: left; /* テキスト中央寄せ */
  border: none;
  margin: 0;
  position: relative;
}

/* 背景固定 + テクスチャ */
body {
  background: #fbf9f4;
  background-image: url("../images/common/dia-wht.png");
  background-size: auto;
  background-attachment: scroll; /* ←変更 */
  background-position: center top;
  background-repeat: repeat;
  transition: background-color 0.5s ease;
  overflow: hidden; /* ← css-slider.scss */
}

/* --------------------------------------------------
    # T O P ( 1 0 0 v h . j s ) 
-------------------------------------------------- */
#TOP {
  height: calc(var(--vh, 1vh) * 100);
}

/* --------------------------------------------------
    . m a i n
-------------------------------------------------- */
/* コンテンツエリアのスクロールを有効化 */
.main {
  position: relative;
  overflow-y: auto; /* スクロールを有効にする */
  box-sizing: border-box;
}

/* --------------------------------------------------
    順番
-------------------------------------------------- */
label .menu {
  z-index: 100;
}

label ul {
  z-index: 200;
}

#top .iiner {
  z-index: 1;
}

/* --------------------------------------------------
    i n n e r 
-------------------------------------------------- */
.inner {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  max-width: 1200px;
  padding-left: 20px;
  padding-right: 20px;
  width: 100%;
  margin: 0 auto;
}

/* --------------------------------------------------
    bg-section
-------------------------------------------------- */
.bg-section {
  background: #eee9e5;
  padding: 15px;
}
@media screen and (min-width: 768px) {
  .bg-section {
    padding: 40px;
  }
}
@media screen and (min-width: 1800px) {
  .bg-section {
    padding: 60px;
  }
}

/* --------------------------------------------------
    サ ブ タ イ ト ル
-------------------------------------------------- */
.sub-ttl {
  margin-bottom: 15px;
}

.p-en {
  font-weight: 400;
  letter-spacing: 0.5em;
  margin-bottom: 10px;
}
@media screen and (min-width: 768px) {
  .p-en {
    margin-bottom: 25px;
  }
}

/* --------------------------------------------------
    border-radius: 90px;
-------------------------------------------------- */
.radius-in {
  border-radius: 35px;
}
@media screen and (min-width: 768px) {
  .radius-in {
    border-radius: 50px;
  }
}

.radius-out {
  border-radius: 40px;
}
@media screen and (min-width: 768px) {
  .radius-out {
    border-radius: 70px;
  }
}

.radius-50 {
  border-radius: 90px;
}

.radius-60 {
  border-radius: 90px;
}

.radius-70 {
  border-radius: 90px;
}

.radius-80 {
  border-radius: 90px;
}

.radius-90 {
  border-radius: 90px;
}

/* --------------------------------------------------
    d o t - l i n e （ 点線 ）
-------------------------------------------------- */
.dot-line-green-soft {
  border-top: 2px dotted #bcde85;
  margin: 10px auto;
}

.dot-line-green-base {
  border-top: 2px dotted #009245;
  margin: 10px auto;
}

.dot-line-green-deep {
  border-top: 2px dotted #05611c;
  margin: 10px auto;
}

.dot-line-beg {
  border-top: 2px dotted #eee9e5;
  margin: 10px auto;
}

.dot-line-wht {
  border-top: 2px dotted #fbf9f4;
  margin: 10px auto;
}

/* --------------------------------------------------
    c i r c l e （ ◯ ）
-------------------------------------------------- */
.circle {
  background: #f7931e;
  color: #fbf9f4;
  position: absolute;
  width: 70px;
  height: 70px;
  color: white;
  font-size: 1.9rem; /* 小さめの文字 */
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%; /* 完全な円 */
}

/* --------------------------------------------------
    ♻️ G R E D （ 2 分 割 ） 50% / 50%
-------------------------------------------------- */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr; /* 1列にする */
  gap: 8vw; /* 列間の余白 */
}
@media screen and (min-width: 768px) {
  .grid-2 {
    grid-template-columns: repeat(2, 1fr);
    gap: 4vw;
  }
}

/* --------------------------------------------------
    ♻️ G R E D （ 2 分 割 ） 60% / 40%
-------------------------------------------------- */
.grid-6x4 {
  display: grid;
  grid-template-columns: 1fr; /* 1列にする */
  gap: 8vw; /* 列間の余白 */
}
@media screen and (min-width: 768px) {
  .grid-6x4 {
    grid-template-columns: 60% 40%;
    gap: 3vw;
  }
}

/* --------------------------------------------------
    ♻️ G R E D （ 3 分 割 ） 40% / 30% / 30%
-------------------------------------------------- */
.grid-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2vw;
}
@media screen and (min-width: 768px) {
  .grid-3 {
    grid-template-columns: 40% 30% 30%;
    gap: 2vw;
  }
}

/* --------------------------------------------------
    ♻️ G R E D （ コ ー ス 用 ） 入 れ 替 わ る
	・ S P （ 1 列　）で 順 番 を 入 れ 替 え
-------------------------------------------------- */
.grid-course {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8vw;
  grid-template-areas: "img" "txt";
}
.grid-course .course-txt {
  grid-area: txt;
}
.grid-course .course-img {
  grid-area: img;
}
@media screen and (min-width: 768px) {
  .grid-course {
    grid-template-columns: repeat(2, 1fr);
    gap: 4vw;
    grid-template-areas: "txt img";
  }
}

/* --------------------------------------------------
    ♻️ G R E D （ ス タ ッ フ 用 ） 入 れ 替 わ る
	・ S P （ 1 列　）で 順 番 を 入 れ 替 え
-------------------------------------------------- */
.grid-staff {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8vw;
  grid-template-areas: "staff-txt" "staff-img";
}
.grid-staff .staff-img {
  grid-area: staff-img;
}
.grid-staff .staff-txt {
  grid-area: staff-txt;
}
@media screen and (min-width: 768px) {
  .grid-staff {
    grid-template-columns: repeat(2, 1fr);
    gap: 4vw;
    grid-template-areas: "staff-img staff-txt";
  }
}

/* --------------------------------------------------
    ♻️ G R E D （ お 問 い 合 わ せ ） 65% / 35%
-------------------------------------------------- */
.grid-contact {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
}
@media screen and (min-width: 768px) {
  .grid-contact {
    grid-template-columns: 65% 35%;
  }
}

/* --------------------------------------------------
    ♻️ G R E D （ 金 額 ） 65% / 35%
-------------------------------------------------- */
.price-grid-2 {
  display: grid;
  grid-template-columns: 65% 35%;
  align-items: baseline;
}
.price-grid-2 span {
  display: block;
}
.price-grid-2 span p {
  text-align: right;
  font-size: 115%;
}

/* --------------------------------------------------
    p a d d i n g （ 上 下 左 右 ）
-------------------------------------------------- */
.padding-10 {
  padding: 10px;
}

.padding-20 {
  padding: 20px;
}

.padding-30 {
  padding: 30px;
}

.padding-40 {
  padding: 40px;
}

.padding-50 {
  padding: 50px;
}

.padding-60 {
  padding: 60px;
}

.padding-70 {
  padding: 70px;
}

.padding-80 {
  padding: 80px;
}

.padding-90 {
  padding: 90px;
}

/* --------------------------------------------------
    ⛰️ 山 （ 左 & 上 ）
-------------------------------------------------- */
.wave-top-left-wht {
  background: #fbf9f4;
  position: absolute;
  top: -70px;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  transform: rotate(180deg);
  background-image: url("../images/common/otis-redding.png");
  background-size: auto;
  background-attachment: fixed;
  background-position: center top;
  background-repeat: repeat;
  transition: background-color 0.5s ease;
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"><path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z"/></svg>');
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"><path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z"/></svg>');
  -webkit-mask-size: cover;
  mask-size: cover;
  height: 71px;
}
@media screen and (min-width: 768px) {
  .wave-top-left-wht {
    height: 131px;
    top: -130px;
  }
}
@media screen and (min-width: 912px) {
  .wave-top-left-wht {
    height: 181px;
    top: -180px;
  }
}

.wave-top-left-beg {
  background: #eee9e5;
  position: absolute;
  top: -70px;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  transform: rotate(180deg);
  background-image: url("../images/common/otis-redding.png");
  background-size: auto;
  background-attachment: fixed;
  background-position: center top;
  background-repeat: repeat;
  transition: background-color 0.5s ease;
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"><path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z"/></svg>');
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"><path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z"/></svg>');
  -webkit-mask-size: cover;
  mask-size: cover;
  height: 71px;
}
@media screen and (min-width: 768px) {
  .wave-top-left-beg {
    height: 131px;
    top: -130px;
  }
}
@media screen and (min-width: 912px) {
  .wave-top-left-beg {
    height: 181px;
    top: -180px;
  }
}

.wave-top-left-gdeep {
  background: #05611c;
  position: absolute;
  top: -70px;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  transform: rotate(180deg);
  background-image: url("../images/common/otis-redding.png");
  background-size: auto;
  background-attachment: fixed;
  background-position: center top;
  background-repeat: repeat;
  transition: background-color 0.5s ease;
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"><path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z"/></svg>');
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"><path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z"/></svg>');
  -webkit-mask-size: cover;
  mask-size: cover;
  height: 71px;
}
@media screen and (min-width: 768px) {
  .wave-top-left-gdeep {
    height: 131px;
    top: -130px;
  }
}
@media screen and (min-width: 912px) {
  .wave-top-left-gdeep {
    height: 181px;
    top: -180px;
  }
}

.wave-top-left-gbase {
  background: #009245;
  position: absolute;
  top: -70px;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  transform: rotate(180deg);
  background-image: url("../images/common/otis-redding.png");
  background-size: auto;
  background-attachment: fixed;
  background-position: center top;
  background-repeat: repeat;
  transition: background-color 0.5s ease;
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"><path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z"/></svg>');
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"><path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z"/></svg>');
  -webkit-mask-size: cover;
  mask-size: cover;
  height: 71px;
}
@media screen and (min-width: 768px) {
  .wave-top-left-gbase {
    height: 131px;
    top: -130px;
  }
}
@media screen and (min-width: 912px) {
  .wave-top-left-gbase {
    height: 181px;
    top: -180px;
  }
}

.wave-top-left-gsoft {
  background: #bcde85;
  position: absolute;
  top: -70px;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  transform: rotate(180deg);
  background-image: url("../images/common/otis-redding.png");
  background-size: auto;
  background-attachment: fixed;
  background-position: center top;
  background-repeat: repeat;
  transition: background-color 0.5s ease;
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"><path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z"/></svg>');
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"><path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z"/></svg>');
  -webkit-mask-size: cover;
  mask-size: cover;
  height: 71px;
}
@media screen and (min-width: 768px) {
  .wave-top-left-gsoft {
    height: 131px;
    top: -130px;
  }
}
@media screen and (min-width: 912px) {
  .wave-top-left-gsoft {
    height: 181px;
    top: -180px;
  }
}

.wave-top-right-gdeep-dia {
  background: #05611c;
  position: absolute;
  top: -70px;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  transform: rotate(180deg);
  background-image: url("../images/common/dia-wht.png");
  background-size: auto;
  background-attachment: fixed;
  background-position: center top;
  background-repeat: repeat;
  transition: background-color 0.5s ease;
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"><g transform="scale(-1,1) translate(-1200,0)"><path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z"/></g></svg>');
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"><g transform="scale(-1,1) translate(-1200,0)"><path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z"/></g></svg>');
  -webkit-mask-size: cover;
  mask-size: cover;
  height: 71px;
}
@media screen and (min-width: 768px) {
  .wave-top-right-gdeep-dia {
    height: 131px;
    top: -130px;
  }
}
@media screen and (min-width: 912px) {
  .wave-top-right-gdeep-dia {
    height: 181px;
    top: -180px;
  }
}

/* --------------------------------------------------
    ⛰️ 山 （ 右 & 上 ）
-------------------------------------------------- */
.wave-top-right-wht {
  background: #fbf9f4;
  position: absolute;
  top: -70px;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  transform: rotate(180deg);
  background-image: url("../images/common/otis-redding.png");
  background-size: auto;
  background-attachment: fixed;
  background-position: center top;
  background-repeat: repeat;
  transition: background-color 0.5s ease;
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"><g transform="scale(-1,1) translate(-1200,0)"><path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z"/></g></svg>');
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"><g transform="scale(-1,1) translate(-1200,0)"><path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z"/></g></svg>');
  -webkit-mask-size: cover;
  mask-size: cover;
  height: 71px;
}
@media screen and (min-width: 768px) {
  .wave-top-right-wht {
    height: 131px;
    top: -130px;
  }
}
@media screen and (min-width: 912px) {
  .wave-top-right-wht {
    height: 181px;
    top: -180px;
  }
}

.wave-top-right-beg {
  background: #eee9e5;
  position: absolute;
  top: -70px;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  transform: rotate(180deg);
  background-image: url("../images/common/otis-redding.png");
  background-size: auto;
  background-attachment: fixed;
  background-position: center top;
  background-repeat: repeat;
  transition: background-color 0.5s ease;
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"><g transform="scale(-1,1) translate(-1200,0)"><path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z"/></g></svg>');
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"><g transform="scale(-1,1) translate(-1200,0)"><path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z"/></g></svg>');
  -webkit-mask-size: cover;
  mask-size: cover;
  height: 71px;
}
@media screen and (min-width: 768px) {
  .wave-top-right-beg {
    height: 131px;
    top: -130px;
  }
}
@media screen and (min-width: 912px) {
  .wave-top-right-beg {
    height: 181px;
    top: -180px;
  }
}

.wave-top-right-gdeep {
  background: #05611c;
  position: absolute;
  top: -70px;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  transform: rotate(180deg);
  background-image: url("../images/common/otis-redding.png");
  background-size: auto;
  background-attachment: fixed;
  background-position: center top;
  background-repeat: repeat;
  transition: background-color 0.5s ease;
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"><g transform="scale(-1,1) translate(-1200,0)"><path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z"/></g></svg>');
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"><g transform="scale(-1,1) translate(-1200,0)"><path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z"/></g></svg>');
  -webkit-mask-size: cover;
  mask-size: cover;
  height: 71px;
}
@media screen and (min-width: 768px) {
  .wave-top-right-gdeep {
    height: 131px;
    top: -130px;
  }
}
@media screen and (min-width: 912px) {
  .wave-top-right-gdeep {
    height: 181px;
    top: -180px;
  }
}

.wave-top-right-gbase {
  background: #009245;
  position: absolute;
  top: -70px;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  transform: rotate(180deg);
  background-image: url("../images/common/otis-redding.png");
  background-size: auto;
  background-attachment: fixed;
  background-position: center top;
  background-repeat: repeat;
  transition: background-color 0.5s ease;
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"><g transform="scale(-1,1) translate(-1200,0)"><path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z"/></g></svg>');
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"><g transform="scale(-1,1) translate(-1200,0)"><path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z"/></g></svg>');
  -webkit-mask-size: cover;
  mask-size: cover;
  height: 71px;
}
@media screen and (min-width: 768px) {
  .wave-top-right-gbase {
    height: 131px;
    top: -130px;
  }
}
@media screen and (min-width: 912px) {
  .wave-top-right-gbase {
    height: 181px;
    top: -180px;
  }
}

.wave-top-right-gsoft {
  background: #bcde85;
  position: absolute;
  top: -70px;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  transform: rotate(180deg);
  background-image: url("../images/common/otis-redding.png");
  background-size: auto;
  background-attachment: fixed;
  background-position: center top;
  background-repeat: repeat;
  transition: background-color 0.5s ease;
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"><g transform="scale(-1,1) translate(-1200,0)"><path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z"/></g></svg>');
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"><g transform="scale(-1,1) translate(-1200,0)"><path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z"/></g></svg>');
  -webkit-mask-size: cover;
  mask-size: cover;
  height: 71px;
}
@media screen and (min-width: 768px) {
  .wave-top-right-gsoft {
    height: 131px;
    top: -130px;
  }
}
@media screen and (min-width: 912px) {
  .wave-top-right-gsoft {
    height: 181px;
    top: -180px;
  }
}

/* --------------------------------------------------
    ⛰️ 山 （ 左 & 下 ）
-------------------------------------------------- */
.wave-btm-left-wht {
  background: #fbf9f4;
  position: absolute;
  bottom: -70px;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  transform: rotate(180deg);
  background-image: url("../images/common/otis-redding.png");
  background-size: auto;
  background-attachment: fixed;
  background-position: center top;
  background-repeat: repeat;
  transition: background-color 0.5s ease;
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"><g transform="scale(1,-1) translate(0,-120)"><path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z"/></g></svg>');
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"><g transform="scale(1,-1) translate(0,-120)"><path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z"/></g></svg>');
  -webkit-mask-size: cover;
  mask-size: cover;
  height: 71px;
}
@media screen and (min-width: 768px) {
  .wave-btm-left-wht {
    height: 131px;
    bottom: -130px;
  }
}
@media screen and (min-width: 912px) {
  .wave-btm-left-wht {
    height: 181px;
    bottom: -180px;
  }
}

.wave-btm-left-beg {
  background: #eee9e5;
  position: absolute;
  bottom: -70px;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  transform: rotate(180deg);
  background-image: url("../images/common/otis-redding.png");
  background-size: auto;
  background-attachment: fixed;
  background-position: center top;
  background-repeat: repeat;
  transition: background-color 0.5s ease;
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"><g transform="scale(1,-1) translate(0,-120)"><path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z"/></g></svg>');
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"><g transform="scale(1,-1) translate(0,-120)"><path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z"/></g></svg>');
  -webkit-mask-size: cover;
  mask-size: cover;
  height: 71px;
}
@media screen and (min-width: 768px) {
  .wave-btm-left-beg {
    height: 131px;
    bottom: -130px;
  }
}
@media screen and (min-width: 912px) {
  .wave-btm-left-beg {
    height: 181px;
    bottom: -180px;
  }
}

.wave-btm-left-gdeep {
  background: #05611c;
  position: absolute;
  bottom: -70px;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  transform: rotate(180deg);
  background-image: url("../images/common/otis-redding.png");
  background-size: auto;
  background-attachment: fixed;
  background-position: center top;
  background-repeat: repeat;
  transition: background-color 0.5s ease;
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"><g transform="scale(1,-1) translate(0,-120)"><path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z"/></g></svg>');
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"><g transform="scale(1,-1) translate(0,-120)"><path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z"/></g></svg>');
  -webkit-mask-size: cover;
  mask-size: cover;
  height: 71px;
}
@media screen and (min-width: 768px) {
  .wave-btm-left-gdeep {
    height: 131px;
    bottom: -130px;
  }
}
@media screen and (min-width: 912px) {
  .wave-btm-left-gdeep {
    height: 181px;
    bottom: -180px;
  }
}

.wave-btm-left-gbase {
  background: #009245;
  position: absolute;
  bottom: -70px;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  transform: rotate(180deg);
  background-image: url("../images/common/otis-redding.png");
  background-size: auto;
  background-attachment: fixed;
  background-position: center top;
  background-repeat: repeat;
  transition: background-color 0.5s ease;
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"><g transform="scale(1,-1) translate(0,-120)"><path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z"/></g></svg>');
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"><g transform="scale(1,-1) translate(0,-120)"><path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z"/></g></svg>');
  -webkit-mask-size: cover;
  mask-size: cover;
  height: 71px;
}
@media screen and (min-width: 768px) {
  .wave-btm-left-gbase {
    height: 131px;
    bottom: -130px;
  }
}
@media screen and (min-width: 912px) {
  .wave-btm-left-gbase {
    height: 181px;
    bottom: -180px;
  }
}

.wave-btm-left-gsoft {
  background: #bcde85;
  position: absolute;
  bottom: -70px;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  transform: rotate(180deg);
  background-image: url("../images/common/otis-redding.png");
  background-size: auto;
  background-attachment: fixed;
  background-position: center top;
  background-repeat: repeat;
  transition: background-color 0.5s ease;
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"><g transform="scale(1,-1) translate(0,-120)"><path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z"/></g></svg>');
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"><g transform="scale(1,-1) translate(0,-120)"><path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z"/></g></svg>');
  -webkit-mask-size: cover;
  mask-size: cover;
  height: 71px;
}
@media screen and (min-width: 768px) {
  .wave-btm-left-gsoft {
    height: 131px;
    bottom: -130px;
  }
}
@media screen and (min-width: 912px) {
  .wave-btm-left-gsoft {
    height: 181px;
    bottom: -180px;
  }
}

/* --------------------------------------------------
    ⛰️ 山 （ 右 & 下 ）
-------------------------------------------------- */
.wave-btm-right-wht {
  background: #fbf9f4;
  position: absolute;
  bottom: -70px;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  transform: rotate(180deg);
  background-image: url("../images/common/otis-redding.png");
  background-size: auto;
  background-attachment: fixed;
  background-position: center top;
  background-repeat: repeat;
  transition: background-color 0.5s ease;
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"><g transform="scale(-1,-1) translate(-1200,-120)"><path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z"/></g></svg>');
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"><g transform="scale(-1,-1) translate(-1200,-120)"><path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z"/></g></svg>');
  -webkit-mask-size: cover;
  mask-size: cover;
  height: 71px;
}
@media screen and (min-width: 768px) {
  .wave-btm-right-wht {
    height: 131px;
    bottom: -130px;
  }
}
@media screen and (min-width: 912px) {
  .wave-btm-right-wht {
    height: 181px;
    bottom: -180px;
  }
}

.wave-btm-right-beg {
  background: #eee9e5;
  position: absolute;
  bottom: -70px;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  transform: rotate(180deg);
  background-image: url("../images/common/otis-redding.png");
  background-size: auto;
  background-attachment: fixed;
  background-position: center top;
  background-repeat: repeat;
  transition: background-color 0.5s ease;
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"><g transform="scale(-1,-1) translate(-1200,-120)"><path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z"/></g></svg>');
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"><g transform="scale(-1,-1) translate(-1200,-120)"><path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z"/></g></svg>');
  -webkit-mask-size: cover;
  mask-size: cover;
  height: 71px;
}
@media screen and (min-width: 768px) {
  .wave-btm-right-beg {
    height: 131px;
    bottom: -130px;
  }
}
@media screen and (min-width: 912px) {
  .wave-btm-right-beg {
    height: 181px;
    bottom: -180px;
  }
}

.wave-btm-right-gdeep {
  background: #05611c;
  position: absolute;
  bottom: -70px;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  transform: rotate(180deg);
  background-image: url("../images/common/otis-redding.png");
  background-size: auto;
  background-attachment: fixed;
  background-position: center top;
  background-repeat: repeat;
  transition: background-color 0.5s ease;
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"><g transform="scale(-1,-1) translate(-1200,-120)"><path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z"/></g></svg>');
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"><g transform="scale(-1,-1) translate(-1200,-120)"><path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z"/></g></svg>');
  -webkit-mask-size: cover;
  mask-size: cover;
  height: 71px;
}
@media screen and (min-width: 768px) {
  .wave-btm-right-gdeep {
    height: 131px;
    bottom: -130px;
  }
}
@media screen and (min-width: 912px) {
  .wave-btm-right-gdeep {
    height: 181px;
    bottom: -180px;
  }
}

.wave-btm-right-gbase {
  background: #009245;
  position: absolute;
  bottom: -70px;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  transform: rotate(180deg);
  background-image: url("../images/common/otis-redding.png");
  background-size: auto;
  background-attachment: fixed;
  background-position: center top;
  background-repeat: repeat;
  transition: background-color 0.5s ease;
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"><g transform="scale(-1,-1) translate(-1200,-120)"><path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z"/></g></svg>');
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"><g transform="scale(-1,-1) translate(-1200,-120)"><path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z"/></g></svg>');
  -webkit-mask-size: cover;
  mask-size: cover;
  height: 71px;
}
@media screen and (min-width: 768px) {
  .wave-btm-right-gbase {
    height: 131px;
    bottom: -130px;
  }
}
@media screen and (min-width: 912px) {
  .wave-btm-right-gbase {
    height: 181px;
    bottom: -180px;
  }
}

.wave-btm-right-gsoft {
  background: #bcde85;
  position: absolute;
  bottom: -70px;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  transform: rotate(180deg);
  background-image: url("../images/common/otis-redding.png");
  background-size: auto;
  background-attachment: fixed;
  background-position: center top;
  background-repeat: repeat;
  transition: background-color 0.5s ease;
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"><g transform="scale(-1,-1) translate(-1200,-120)"><path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z"/></g></svg>');
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"><g transform="scale(-1,-1) translate(-1200,-120)"><path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z"/></g></svg>');
  -webkit-mask-size: cover;
  mask-size: cover;
  height: 71px;
}
@media screen and (min-width: 768px) {
  .wave-btm-right-gsoft {
    height: 131px;
    bottom: -130px;
  }
}
@media screen and (min-width: 912px) {
  .wave-btm-right-gsoft {
    height: 181px;
    bottom: -180px;
  }
}

/* --------------------------------------------------
    ボ タ ン （ T E L ）
-------------------------------------------------- */
.tel-button {
  text-align: center;
}
.tel-button a {
  background: #05611c;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  width: 250px;
  height: 90px;
  border-radius: 60px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 4px 10px rgba(15, 15, 15, 0.2);
}
@media screen and (min-width: 768px) {
  .tel-button a {
    width: 300px;
    height: 120px;
  }
}
.tel-button h3 {
  color: #fbf9f4;
  text-align: center;
  line-height: 1;
  padding-bottom: 15px;
}
.tel-button h3 span {
  font-size: 60%;
  line-height: 2;
}

.tel-button a:hover {
  background: #bcde85;
  transform: scale(1.1);
  box-shadow: 0 6px 15px rgba(15, 15, 15, 0.3);
}

.tel a i {
  line-height: 1;
}

/* --------------------------------------------------
    ボ タ ン（ I n s t a g r a m ）
-------------------------------------------------- */
.instagram-button {
  text-align: center;
}
.instagram-button a {
  background: #009245;
  color: #fbf9f4;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  font-size: 4rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 4px 10px rgba(15, 15, 15, 0.2);
}
@media screen and (min-width: 768px) {
  .instagram-button a {
    width: 100px;
    height: 100px;
    font-size: 4.5rem;
  }
}
.instagram-button p {
  text-align: center;
  margin-top: 2vh;
}

.instagram-button a:hover {
  background: #bcde85;
  transform: scale(1.1);
  box-shadow: 0 6px 15px rgba(15, 15, 15, 0.3);
}

.instagram-button a i {
  line-height: 1;
}

/* --------------------------------------------------
    ボ タ ン （　ト　ッ　プ　に　戻　る　）
-------------------------------------------------- */
.top-btn {
  z-index: 1000;
  position: fixed;
  right: 10px;
  bottom: 10px;
  width: 60px;
  height: 60px;
  line-height: 70px;
  display: none;
  border-radius: 50%;
  display: inline-block;
  text-decoration: none;
  text-align: center;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  border-radius: 50%;
  background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
  .top-btn {
    position: fixed;
    right: 20px;
    bottom: 20px;
  }
}

/* --------------------------------------------------
    無 限 ス ク ロ ー ル
-------------------------------------------------- */
@keyframes infinity-scroll-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
.scroll-infinity__wrap {
  display: flex;
  overflow: hidden;
}

.scroll-infinity__list {
  display: flex;
  list-style: none;
  padding: 0;
  gap: 20px;
  width: max-content;
  white-space: nowrap;
}

.scroll-infinity__list--left {
  animation: infinity-scroll-left 80s infinite linear 0.5s both;
}

.scroll-infinity__item {
  flex: 0 0 auto;
  width: 220px;
  overflow: hidden;
}
@media screen and (min-width: 1200px) {
  .scroll-infinity__item {
    width: 400px;
  }
}

.scroll-infinity__item > img {
  width: 100%;
  height: 280px;
  object-fit: cover;
}
@media screen and (min-width: 1200px) {
  .scroll-infinity__item > img {
    height: 430px;
  }
}

/* 最初の画像の左側に 20px のマージンを追加 */
.scroll-infinity__item:first-child {
  margin-left: 20px;
}

/* font.scss */
/* --------------------------------------------------
    G o o g l e（　Slackside One　）筆 文 字
-------------------------------------------------- */
h1 {
  font-family: "Slackside One", cursive;
  transform: translateY(-10%);
}

/* --------------------------------------------------
    G o o g l e（　Zen Maru Gothic　）日 本 語 (300 / 400 / 500 / 700 / 900)
-------------------------------------------------- */
body {
  font-family: "Zen Maru Gothic", serif;
}

h2, h3, h4 {
  font-family: "Zen Maru Gothic", serif;
}

p {
  font-family: "Zen Maru Gothic", serif;
}

/* --------------------------------------------------
    基 本 （ デ フ ォ ル ト ）
-------------------------------------------------- */
html {
  font-size: 62.5%;
}

body {
  font-size: 1.6rem;
}
@media screen and (min-width: 768px) {
  body {
    font-size: 1.8rem;
  }
}

body {
  line-height: 180%;
  text-align: left;
}

/* --------------------------------------------------
    カ ラ ー
-------------------------------------------------- */
h1, h2, h3, h4, p {
  color: #333333;
}

/* --------------------------------------------------
    サ イ ズ
-------------------------------------------------- */
h1 {
  font-size: 4.3rem;
}
@media screen and (min-width: 768px) {
  h1 {
    font-size: 6rem;
  }
}
@media screen and (min-width: 1600px) {
  h1 {
    font-size: 7.5rem;
  }
}
@media screen and (min-width: 1800px) {
  h1 {
    font-size: 9rem;
  }
}

h2 {
  font-size: 3rem;
}
@media screen and (min-width: 768px) {
  h2 {
    font-size: 4.5rem;
  }
}

h2 .sub-ttl {
  font-size: 3rem;
}
@media screen and (min-width: 768px) {
  h2 .sub-ttl {
    font-size: 4.8rem;
  }
}

h3 {
  font-size: 2.6rem;
}
@media screen and (min-width: 768px) {
  h3 {
    font-size: 3rem;
  }
}

h4 {
  font-size: 1.9rem;
}
@media screen and (min-width: 768px) {
  h4 {
    font-size: 2.3rem;
  }
}

p {
  font-size: 1.8rem;
}
@media screen and (min-width: 768px) {
  p {
    font-size: 2rem;
  }
}

.p-mini {
  font-size: 1.6rem;
}
@media screen and (min-width: 768px) {
  .p-mini {
    font-size: 1.7rem;
  }
}

/* --------------------------------------------------
    太 文 字
-------------------------------------------------- */
h2, h3, h4 {
  font-weight: 700;
}

h4 {
  font-weight: 500;
}

p {
  font-weight: 500;
}

.p-mini {
  font-weight: 500;
}

/* --------------------------------------------------
    行 間
-------------------------------------------------- */
h1 {
  line-height: 90%;
}
@media screen and (min-width: 768px) {
  h1 {
    line-height: 90%;
  }
}

h2, h3 {
  line-height: 140%;
}
@media screen and (min-width: 768px) {
  h2, h3 {
    line-height: 160%;
  }
}

h4 {
  line-height: 170%;
}
@media screen and (min-width: 768px) {
  h4 {
    line-height: 180%;
  }
}

p {
  line-height: 160%;
}
@media screen and (min-width: 768px) {
  p {
    line-height: 170%;
  }
}

.p-mini {
  line-height: 160%;
}
@media screen and (min-width: 768px) {
  .p-mini {
    line-height: 170%;
  }
}

/* --------------------------------------------------
    字 間
-------------------------------------------------- */
h1 {
  letter-spacing: 0.03em;
}

/* --------------------------------------------------
    揃え
-------------------------------------------------- */
h1 {
  text-align: center;
}

h2, h3, h4, p {
  text-align: left;
}

.p-mini {
  text-align: left;
}

/* loading.scss */
#loading-wrapper {
  background: #bcde85;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: all 0.5s;
  z-index: 9999;
}
#loading-wrapper img {
  width: 10vh;
}
#loading-wrapper .loading {
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-duration: 1.5s;
  animation-name: loading;
  transform: scale(1.1, 1.1);
}

@-moz-keyframes loading {
  100% {
    transform: scale(1, 1);
  }
}
@-webkit-keyframes loading {
  100% {
    transform: scale(1, 1);
  }
}
@keyframes loading {
  100% {
    transform: scale(1, 1);
  }
}
.completed {
  opacity: 0;
  visibility: hidden;
  transform: scale(1, 1);
}

/* css-slider.scss */
.css-slider {
  width: 400px; /* 幅はSVGに合わせる */
  height: 470px; /* 高さはSVGに合わせる */
  overflow: hidden;
  position: absolute;
  top: 13%;
  left: 53%;
  transform: translateX(-50%) scale(1.3); /* 左右中央揃え */
  clip-path: path("M400,185.3C400,83,317.8,0,216.3,0S32.6,83,32.6,185.3c0,26.7,5.6,52.1,15.7,75C19.1,281.2,0,315.6,0,354.5C0,418.3,51.3,470,114.5,470c58,0,105.9-43.5,113.4-99.8C324,364.1,400,283.7,400,185.3z");
}
@media screen and (min-width: 768px) {
  .css-slider {
    width: 722px; /* 好きな幅に変更可能 */
    height: 850px; /* 好きな高さに変更可能 */
    clip-path: path("M722,335.1C722,150,573.5,0,390.4,0S58.8,150,58.8,335.1c0,48.3,10.1,94.2,28.3,135.7C34.5,508.6,0,570.8,0,641.1 C0,756.5,92.5,850,206.7,850c104.6,0,191.1-78.6,204.8-180.5C584.8,658.5,722,513,722,335.1z");
    top: -7%;
    left: 60%;
  }
}
@media screen and (min-width: 1200px) {
  .css-slider {
    top: -7%;
    left: 71%;
  }
}
@media screen and (min-width: 1600px) {
  .css-slider {
    width: 851px;
    height: 1000px;
    clip-path: path("M851,394.2C851,176.5,676,0,460.2,0S69.4,176.5,69.4,394.2c0,56.8,11.9,110.8,33.4,159.6 C40.6,598.4,0,671.5,0,754.3C0,890,109.1,1000,243.6,1000c123.3,0,225.2-92.5,241.3-212.4C689.3,774.7,851,603.5,851,394.2z");
    top: -6%;
    left: 75%;
  }
}
@media screen and (min-width: 1800px) {
  .css-slider {
    top: 2%;
  }
}

.slides {
  display: flex;
  transition: transform 1.5s ease-in-out;
  position: relative;
  width: 100%;
  height: 100%;
}

.slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 完全にフィットさせる */
  object-position: center; /* 中央に配置 */
}

/* t o p . s c s s */
#top {
  position: relative;
  width: 100vw;
  height: 600px;
}
@media screen and (min-width: 768px) {
  #top {
    height: 800px;
  }
}
@media screen and (min-width: 1600px) {
  #top {
    height: 1000px;
  }
}
#top .inner {
  position: initial;
  height: 100vh;
}
@media screen and (min-width: 768px) {
  #top .inner {
    position: relative;
    max-width: 1300px;
  }
}
@media screen and (min-width: 768px) {
  #top .inner {
    margin-top: 3vh;
  }
}
@media screen and (min-width: 1200px) {
  #top .inner {
    margin-top: 6vh;
  }
}
@media screen and (min-width: 1600px) {
  #top .inner {
    max-width: 1600px;
  }
}
#top .inner .img-box {
  position: absolute;
  top: 1%;
  left: 1%;
}
@media screen and (min-width: 768px) {
  #top .inner .img-box {
    position: static;
  }
}
@media screen and (min-width: 1200px) {
  #top .inner .img-box {
    margin-bottom: 45px;
  }
}
@media screen and (min-width: 1600px) {
  #top .inner .img-box {
    margin-bottom: 60px;
  }
}
#top .inner .img-box .logo-wht {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  width: 100%;
  height: 170px;
  width: 170px;
  position: absolute;
  top: 0px;
}
@media screen and (min-width: 768px) {
  #top .inner .img-box .logo-wht {
    height: 300px;
    width: 300px;
    position: static;
  }
}
@media screen and (min-width: 1200px) {
  #top .inner .img-box .logo-wht {
    height: 480px;
    width: 480px;
    margin-left: 50px;
  }
}
@media screen and (min-width: 1800px) {
  #top .inner .img-box .logo-wht {
    height: 520px;
    width: 520px;
  }
}
#top .inner .top-song {
  position: absolute;
  left: auto;
  right: 2%;
  top: 80%;
  z-index: 1;
}
@media screen and (min-width: 768px) {
  #top .inner .top-song {
    top: 56%;
  }
}
@media screen and (min-width: 1200px) {
  #top .inner .top-song {
    position: static;
  }
}
#top .inner .top-song .song-svg {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  width: 100%;
  height: 100px;
  width: 350px;
}
@media screen and (min-width: 768px) {
  #top .inner .top-song .song-svg {
    height: 110px;
    width: 480px;
  }
}
@media screen and (min-width: 1200px) {
  #top .inner .top-song .song-svg {
    height: 130px;
    width: 660px;
  }
}
@media screen and (min-width: 1600px) {
  #top .inner .top-song .song-svg {
    height: 155px;
    width: 810px;
  }
}
#top .inner .top-song h1 {
  font-size: 4rem;
}
@media screen and (min-width: 768px) {
  #top .inner .top-song h1 {
    font-size: 6rem;
  }
}
@media screen and (min-width: 1600px) {
  #top .inner .top-song h1 {
    font-size: 7.5rem;
  }
}
@media screen and (min-width: 1800px) {
  #top .inner .top-song h1 {
    font-size: 9rem;
  }
}
#top .inner .top-song h1 {
  color: #05611c;
  text-align: right;
  margin-bottom: 10px;
  text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.8), 2px 2px 4px rgba(255, 255, 255, 0.8), 2px 2px 20px rgba(255, 255, 255, 0.8);
}
#top .inner .top-song h1 br {
  display: block;
}
@media screen and (min-width: 768px) {
  #top .inner .top-song h1 br {
    display: none;
  }
}
@media screen and (min-width: 1200px) {
  #top .inner .top-song h1 {
    text-align: left;
  }
}
#top .inner .top-song h1 span {
  color: #009245;
}
#top .inner .top-song .top-h1-02 {
  margin-left: 50px;
}
#top .wave-top-right-gdeep {
  top: auto;
  bottom: -1px;
}

#about {
  position: relative;
}
#about .welcom-song01 {
  background: #05611c;
  background-image: url("../images/common/otis-redding.png");
  background-size: auto;
  background-attachment: fixed;
  background-position: center top;
  background-repeat: repeat;
  transition: background-color 0.5s ease;
  position: relative;
}
#about .welcom-song01 .wave-btm-right-gdeep {
  z-index: 1;
}
#about .welcom-song01 .inner {
  padding-top: 100px;
  padding-bottom: 100px;
  position: relative;
}
@media screen and (min-width: 768px) {
  #about .welcom-song01 .inner {
    max-width: 980px;
    padding-top: 140px;
    padding-bottom: 140px;
  }
}
#about .welcom-song01 .inner h1 {
  color: #fbf9f4;
  font-size: 7rem;
  margin-bottom: 50px;
  text-align: center;
}
@media screen and (min-width: 768px) {
  #about .welcom-song01 .inner h1 {
    font-size: 11rem;
    margin-bottom: 60px;
    text-align: left;
  }
}
#about .welcom-song01 .inner .tizu-svg {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  width: 100%;
  height: 380px;
}
@media screen and (min-width: 768px) {
  #about .welcom-song01 .inner .tizu-svg {
    height: 520px;
  }
}
#about .welcom-song01 .inner h4 {
  color: #fbf9f4;
  text-align: left;
  max-width: 480px;
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  #about .welcom-song01 .inner h4 {
    margin: 0;
  }
}
#about .message {
  background: #eee9e5;
  background-image: url("../images/common/dia-wht.png");
  background-size: auto;
  background-attachment: scroll; /* ←変更 */
  background-position: center top;
  background-repeat: repeat;
  transition: background-color 0.5s ease;
  position: relative;
  /*.wave-top-left-beg {
  	@include bg-beg;
  }*/
}
#about .message .inner {
  padding-top: 120px;
  padding-bottom: 50px;
}
@media screen and (min-width: 768px) {
  #about .message .inner {
    padding-top: 240px;
    padding-bottom: 80px;
  }
}
#about .message .inner .txt h2 {
  margin-bottom: 25px;
  font-size: 4rem;
  line-height: 1.3;
}
@media screen and (min-width: 768px) {
  #about .message .inner .txt h2 {
    font-size: 7.3rem;
  }
}
#about .message .inner .txt .p-en {
  color: #009245;
}
#about .message .inner .txt h4 {
  text-align: left;
}
#about .message .inner .txt h4 br {
  display: none;
}
@media screen and (min-width: 768px) {
  #about .message .inner .txt h4 br {
    display: block;
  }
}
#about .message .scroll-infinity {
  padding-bottom: 140px;
}
@media screen and (min-width: 768px) {
  #about .message .scroll-infinity {
    padding-bottom: 220px;
  }
}
#about .wide-img .denen-img {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  width: 100%;
  width: 100%;
  aspect-ratio: 16/9;
  min-height: 480px;
}
@media screen and (min-width: 768px) {
  #about .wide-img .denen-img {
    height: auto;
    max-height: 750px;
  }
}
#about .otenki {
  background: #fbf9f4;
  background-image: url("../images/common/otis-redding.png");
  background-size: auto;
  background-attachment: fixed;
  background-position: center top;
  background-repeat: repeat;
  transition: background-color 0.5s ease;
  padding-top: 80px;
  padding-bottom: 650px;
}
@media screen and (min-width: 768px) {
  #about .otenki {
    padding-top: 180px;
    padding-bottom: 480px;
  }
}
#about .otenki .inner .otenki-ttl {
  color: #4db1ca;
}
#about .otenki .inner .grid-3 .p-en {
  color: #a8d8e4;
}
#about .keshiki {
  background: #05611c;
  background-image: url("../images/common/otis-redding.png");
  background-size: auto;
  background-attachment: fixed;
  background-position: center top;
  background-repeat: repeat;
  transition: background-color 0.5s ease;
  padding-top: 80px;
  padding-bottom: 680px;
}
@media screen and (min-width: 768px) {
  #about .keshiki {
    padding-top: 180px;
    padding-bottom: 480px;
  }
}
#about .keshiki .inner .keshiki-ttl {
  color: #fbf9f4;
}
#about .keshiki .inner .grid-3 .p-en {
  color: #bcde85;
}
#about .keshiki .inner .grid-3 h4 {
  color: #fbf9f4;
}
#about .keshiki .wave-btm-right-gdeep {
  z-index: 1;
}
#about .otenki,
#about .keshiki {
  position: relative;
}
#about .otenki .inner,
#about .keshiki .inner {
  position: relative;
}
#about .otenki .inner .otenki-ttl,
#about .otenki .inner .keshiki-ttl,
#about .keshiki .inner .otenki-ttl,
#about .keshiki .inner .keshiki-ttl {
  position: relative;
  text-align: left;
  margin-bottom: 20px;
  font-size: 6rem;
}
@media screen and (min-width: 768px) {
  #about .otenki .inner .otenki-ttl,
  #about .otenki .inner .keshiki-ttl,
  #about .keshiki .inner .otenki-ttl,
  #about .keshiki .inner .keshiki-ttl {
    font-size: 11rem;
  }
}
#about .otenki .inner .otenki-ttl span,
#about .otenki .inner .keshiki-ttl span,
#about .keshiki .inner .otenki-ttl span,
#about .keshiki .inner .keshiki-ttl span {
  margin-left: 50px;
}
#about .otenki .inner .grid-3,
#about .keshiki .inner .grid-3 {
  position: relative;
}
#about .otenki .inner .grid-3 .txt,
#about .keshiki .inner .grid-3 .txt {
  position: relative;
  margin-left: 50px;
}
#about .otenki .inner .grid-3 .txt .txt-inner,
#about .keshiki .inner .grid-3 .txt .txt-inner {
  position: relative;
}
#about .otenki .inner .grid-3 .txt .txt-inner h4,
#about .keshiki .inner .grid-3 .txt .txt-inner h4 {
  margin-top: 4vh;
}
#about .otenki .inner .grid-3 .txt .txt-inner h4 br,
#about .keshiki .inner .grid-3 .txt .txt-inner h4 br {
  display: none;
}
@media screen and (min-width: 768px) {
  #about .otenki .inner .grid-3 .txt .txt-inner h4 br,
  #about .keshiki .inner .grid-3 .txt .txt-inner h4 br {
    display: block;
  }
}
#about .otenki .inner .grid-3 .txt .txt-inner .p-en,
#about .keshiki .inner .grid-3 .txt .txt-inner .p-en {
  font-weight: 700;
}
#about .otenki .inner .grid-3 .img-box01,
#about .keshiki .inner .grid-3 .img-box01 {
  position: absolute;
  top: 114%;
  left: auto;
  right: 0%;
  width: 71%;
  height: 350px;
}
@media screen and (min-width: 768px) {
  #about .otenki .inner .grid-3 .img-box01,
  #about .keshiki .inner .grid-3 .img-box01 {
    top: -34%;
    left: auto;
    right: 0%;
    width: 380px;
    height: 510px;
  }
}
@media screen and (min-width: 912px) {
  #about .otenki .inner .grid-3 .img-box01,
  #about .keshiki .inner .grid-3 .img-box01 {
    top: -45%;
    left: auto;
    right: 0%;
    width: 40%;
    height: 550px;
  }
}
#about .otenki .inner .grid-3 .img-box01 .yuki-img,
#about .otenki .inner .grid-3 .img-box01 .outside-01,
#about .otenki .inner .grid-3 .img-box01 .yuki-img,
#about .otenki .inner .grid-3 .img-box01 .outside-01,
#about .keshiki .inner .grid-3 .img-box01 .yuki-img,
#about .keshiki .inner .grid-3 .img-box01 .outside-01,
#about .keshiki .inner .grid-3 .img-box01 .yuki-img,
#about .keshiki .inner .grid-3 .img-box01 .outside-01 {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  width: 100%;
  height: 100%;
}
#about .otenki .inner .grid-3 .img-box01 .yuki-img p,
#about .otenki .inner .grid-3 .img-box01 .outside-01 p,
#about .otenki .inner .grid-3 .img-box01 .yuki-img p,
#about .otenki .inner .grid-3 .img-box01 .outside-01 p,
#about .keshiki .inner .grid-3 .img-box01 .yuki-img p,
#about .keshiki .inner .grid-3 .img-box01 .outside-01 p,
#about .keshiki .inner .grid-3 .img-box01 .yuki-img p,
#about .keshiki .inner .grid-3 .img-box01 .outside-01 p {
  margin-top: 5px;
  text-align: center;
}
#about .otenki .inner .grid-3 .img-box02,
#about .keshiki .inner .grid-3 .img-box02 {
  position: absolute;
  top: 238%;
  left: -2%;
  width: 230px;
  height: 220px;
}
@media screen and (min-width: 768px) {
  #about .otenki .inner .grid-3 .img-box02,
  #about .keshiki .inner .grid-3 .img-box02 {
    top: 79%;
    left: 44%;
    width: 330px;
    height: 270px;
  }
}
@media screen and (min-width: 912px) {
  #about .otenki .inner .grid-3 .img-box02,
  #about .keshiki .inner .grid-3 .img-box02 {
    top: 96%;
    left: 42%;
    width: 360px;
    height: 325px;
  }
}
#about .otenki .inner .grid-3 .img-box02 .baba-img,
#about .otenki .inner .grid-3 .img-box02 .outside-02,
#about .keshiki .inner .grid-3 .img-box02 .baba-img,
#about .keshiki .inner .grid-3 .img-box02 .outside-02 {
  position: relative;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  width: 100%;
  height: 100%;
}
#about .otenki .inner .grid-3 .img-box02 p,
#about .keshiki .inner .grid-3 .img-box02 p {
  margin-top: 5px;
  text-align: center;
}

#price {
  background: #eee9e5;
  background-image: url("../images/common/dia-wht.png");
  background-size: auto;
  background-attachment: scroll; /* ←変更 */
  background-position: center top;
  background-repeat: repeat;
  transition: background-color 0.5s ease;
  position: relative;
}
#price .course .inner {
  padding-top: 80px;
  padding-bottom: 120px;
}
@media screen and (min-width: 768px) {
  #price .course .inner {
    padding-top: 160px;
    padding-bottom: 200px;
  }
}
#price .course .inner .ttl {
  text-align: center;
  margin-bottom: 30px;
}
@media screen and (min-width: 768px) {
  #price .course .inner .ttl {
    margin-bottom: 40px;
  }
}
#price .course .inner .ttl h2 {
  color: #05611c;
  text-align: center;
  margin-bottom: 10px;
  font-size: 3.5rem;
}
@media screen and (min-width: 768px) {
  #price .course .inner .ttl h2 {
    font-size: 7rem;
  }
}
#price .course .inner .ttl .p-en {
  color: #f7931e;
  text-align: center;
}
@media screen and (min-width: 768px) {
  #price .course .inner .ttl .p-en {
    text-align: center;
  }
}
#price .course .inner .ttl .course-zei {
  background: #009245;
  color: #fbf9f4;
  text-align: center;
  display: inline-block;
  font-weight: 400;
  border-radius: 50px;
  padding: 5px 20px;
}
#price .course .inner .bg-section {
  background: #fbf9f4;
  margin-bottom: 40px;
}
@media screen and (min-width: 768px) {
  #price .course .inner .bg-section {
    margin-bottom: 80px;
  }
}
#price .course .inner .bg-section .course-img {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  width: 100%;
  height: 100%;
  min-height: 260px;
}
#price .course .inner .bg-section .course-txt {
  position: relative;
}
#price .course .inner .bg-section .course-txt .yoyaku {
  right: 13px;
  top: -38px;
}
@media screen and (min-width: 768px) {
  #price .course .inner .bg-section .course-txt .yoyaku {
    right: 20px;
    top: -20px;
  }
}
#price .course .inner .bg-section .course-txt .course-pack {
  margin: 10px 0 20px;
}
#price .course .inner .bg-section .course-txt .course-memo {
  margin: 20px 0;
}
#price .course .inner .bg-section .course-txt .course-memo .p-mini {
  line-height: 1.7;
}
#price .course .inner .bg-section .course-txt .course-baba {
  background: #05611c;
  color: #fbf9f4;
  font-weight: 400;
  width: 100px;
  border-radius: 50px;
  text-align: center;
  padding: 5px 0;
  margin-top: 15px;
}
#price .course .inner .bg-section .course-txt .p-memo {
  color: #009245;
  font-size: 90%;
}
#price .course .inner .bg-section .course-txt .point {
  background: #009245;
  padding: 20px;
  margin-top: 20px;
}
#price .course .inner .bg-section .course-txt .point .p-mini {
  color: #fbf9f4;
  margin-bottom: 10px;
  text-align: center;
}
#price .course .inner .bg-section .course-txt .point .p-mini:last-child {
  margin-top: 10px;
  margin-bottom: 0;
}
#price .course .inner .bg-section .course-txt .point .dot-line-green-deep {
  width: 70%;
}
#price .staff {
  background: #bcde85;
  background-image: url("../images/common/otis-redding.png");
  background-size: auto;
  background-attachment: fixed;
  background-position: center top;
  background-repeat: repeat;
  transition: background-color 0.5s ease;
  position: relative;
}
#price .staff .inner {
  padding-top: 80px;
  padding-bottom: 100px;
}
@media screen and (min-width: 768px) {
  #price .staff .inner {
    padding-top: 120px;
    padding-bottom: 120px;
  }
}
#price .staff .inner .grid-staff {
  margin: 0 auto;
}
#price .staff .inner .grid-staff .staff-txt .sub-ttl br {
  display: block;
}
@media screen and (min-width: 768px) {
  #price .staff .inner .grid-staff .staff-txt .sub-ttl br {
    display: none;
  }
}
#price .staff .inner .grid-staff .staff-txt .p-en {
  color: #009245;
}
#price .staff .inner .grid-staff .staff-txt .staff-voice {
  margin-top: 15px;
}
#price .staff .inner .grid-staff .staff-txt h3 {
  margin-bottom: 5px;
  text-align: left;
}
#price .staff .inner .grid-staff .staff-txt .p-color {
  color: #009245;
  margin-bottom: 5px;
  text-align: left;
}
#price .staff .inner .grid-staff .staff-img {
  margin-bottom: 20px;
}
@media screen and (min-width: 768px) {
  #price .staff .inner .grid-staff .staff-img {
    margin-bottom: 0;
  }
}
#price .staff .inner .grid-staff .staff-img .staff-01 {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  width: 100%;
  height: 300px;
  border: 6px solid #eee9e5;
}
@media screen and (min-width: 768px) {
  #price .staff .inner .grid-staff .staff-img .staff-01 {
    height: 100%;
  }
}
#price .wave-btm-right-gsoft {
  z-index: 2;
}

#member {
  background: #05611c;
  background-image: url("../images/common/dia-blk.png");
  background-size: auto;
  background-attachment: scroll; /* ←変更 */
  background-position: center top;
  background-repeat: repeat;
  transition: background-color 0.5s ease;
  position: relative;
}
#member .inner {
  padding-top: 100px;
  padding-bottom: 100px;
}
@media screen and (min-width: 768px) {
  #member .inner {
    padding-top: 220px;
    padding-bottom: 220px;
  }
}
#member .inner .grid-2 .member-txt {
  max-width: 100%;
}
@media screen and (min-width: 768px) {
  #member .inner .grid-2 .member-txt {
    max-width: 85%;
  }
}
#member .inner .grid-2 .member-txt .sub-ttl {
  color: #fbf9f4;
}
#member .inner .grid-2 .member-txt .p-en {
  color: #f7931e;
  margin-bottom: 20px;
}
#member .inner .grid-2 .member-txt p {
  color: #fbf9f4;
  margin-bottom: 30px;
}
@media screen and (min-width: 768px) {
  #member .inner .grid-2 .member-txt p {
    margin-bottom: 0;
  }
}
#member .inner .grid-2 .member-list .member-box {
  background: #eee9e5;
  position: relative;
  border-radius: 20px;
  padding: 15px 20px 15px 100px;
}
#member .inner .grid-2 .member-list .member-box .mark {
  top: 50%;
  transform: translateY(-50%);
  left: 10px;
}
@media screen and (min-width: 768px) {
  #member .inner .grid-2 .member-list .member-box .mark {
    top: 50%;
    left: -30px;
  }
}
#member .inner .grid-2 .member-list h2 {
  color: #fbf9f4;
  text-align: center;
}

#contact01 {
  background: #fbf9f4;
  background-image: url("../images/common/otis-redding.png");
  background-size: auto;
  background-attachment: fixed;
  background-position: center top;
  background-repeat: repeat;
  transition: background-color 0.5s ease;
}

#contact02 {
  background: #eee9e5;
  background-image: url("../images/common/otis-redding.png");
  background-size: auto;
  background-attachment: fixed;
  background-position: center top;
  background-repeat: repeat;
  transition: background-color 0.5s ease;
}

#contact01,
#contact02 {
  position: relative;
}
#contact01 .inner,
#contact02 .inner {
  padding-top: 80px;
  padding-bottom: 120px;
}
@media screen and (min-width: 768px) {
  #contact01 .inner,
  #contact02 .inner {
    padding-top: 120px;
    padding-bottom: 220px;
  }
}
#contact01 .inner .contact-box .contact-memo,
#contact02 .inner .contact-box .contact-memo {
  margin-bottom: 20px;
}
@media screen and (min-width: 768px) {
  #contact01 .inner .contact-box .contact-memo,
  #contact02 .inner .contact-box .contact-memo {
    margin-bottom: 0;
  }
}
#contact01 .inner .contact-box .p-en,
#contact02 .inner .contact-box .p-en {
  color: #009245;
}
#contact01 .inner .contact-box .contact-comment,
#contact02 .inner .contact-box .contact-comment {
  text-align: left;
}
#contact01 .inner .contact-box .contact-time,
#contact02 .inner .contact-box .contact-time {
  color: #05611c;
  text-align: left;
  margin-top: 30px;
  margin-bottom: 30px;
}
#contact01 .inner .contact-box .renraku,
#contact02 .inner .contact-box .renraku {
  text-align: left;
}
#contact01 .inner .contact-box .tel-button a p,
#contact02 .inner .contact-box .tel-button a p {
  color: #fbf9f4;
  font-size: 2.2rem;
}
@media screen and (min-width: 768px) {
  #contact01 .inner .contact-box .tel-button a p,
  #contact02 .inner .contact-box .tel-button a p {
    font-size: 2.8rem;
  }
}
#contact01 .inner .contact-box .fa-instagram,
#contact02 .inner .contact-box .fa-instagram {
  color: #fbf9f4;
  font-size: 3.2rem;
  line-height: 1;
  margin-right: 10px;
}

#access {
  background: #bcde85;
  background-image: url("../images/common/otis-redding.png");
  background-size: auto;
  background-attachment: fixed;
  background-position: center top;
  background-repeat: repeat;
  transition: background-color 0.5s ease;
  position: relative;
}
#access .inner {
  padding-top: 100px;
  padding-bottom: 100px;
}
#access .inner .grid-2 .map-txt .map-inner .map-add {
  margin-bottom: 20px;
}
#access .inner .grid-2 .map-txt .map-inner .map-add .name-blk {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  width: 100%;
  height: 40px;
  width: 320px;
  margin-bottom: 10px;
}
@media screen and (min-width: 768px) {
  #access .inner .grid-2 .map-txt .map-inner .map-add .name-blk {
    height: 60px;
    width: 330px;
    margin-bottom: 15px;
  }
}
@media screen and (min-width: 768px) {
  #access .inner .grid-2 .map-txt .map-inner .map-add .name-blk {
    height: 60px;
    width: 400px;
  }
}
@media screen and (min-width: 1200px) {
  #access .inner .grid-2 .map-txt .map-inner .map-add .name-blk {
    height: 60px;
    width: 480px;
  }
}
#access .inner .grid-2 .map-txt .map-inner .map-add h1 {
  text-align: left;
  margin-bottom: 10px;
  font-size: 4.5rem;
}
@media screen and (min-width: 768px) {
  #access .inner .grid-2 .map-txt .map-inner .map-add h1 {
    font-size: 6.5rem;
    margin-bottom: 15px;
  }
}
#access .inner .grid-2 .map-txt .map-inner .map-norimono .norimono-inner {
  margin-bottom: 15px;
}
#access .inner .grid-2 .map-txt .map-inner .map-norimono .norimono-inner .norimono-ttl {
  background: #009245;
  color: #fbf9f4;
  font-weight: 400;
  width: 100px;
  border-radius: 50px;
  text-align: center;
  padding: 5px 0;
  margin-bottom: 15px;
}
#access .inner .grid-2 .map-txt .map-inner .map-norimono .norimono-inner .norimono-txt {
  line-height: 1.6;
}
#access .inner .grid-2 .map-txt .map-inner .map-norimono .norimono-inner :last-of-type {
  margin-bottom: 0;
}
#access .inner .grid-2 .map-google iframe {
  width: 100%;
  height: 100%;
  border: 6px solid #fbfaf6;
  max-width: 100%; /* 親の幅を超えない */
  box-sizing: border-box; /* padding の影響を受ける */
  display: block; /* 余計な隙間を防ぐ */
}
#access .wave-btm-right-gsoft {
  z-index: 1;
}

*, *:before, *:after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden;
}

label {
  position: relative;
  z-index: 1000;
  display: block;
}

label .menu {
  background: #009245;
  position: fixed;
  right: -80px;
  top: -80px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  transition: 0.5s ease-in-out;
  box-shadow: 0 0 0 0 #009245, 0 0 0 0 #009245;
  cursor: pointer;
  z-index: 1001;
}
@media screen and (min-width: 768px) {
  label .menu {
    right: -100px;
    top: -100px;
    width: 200px;
    height: 200px;
  }
}

label .hamburger {
  position: absolute;
  top: 110px;
  left: 35px;
  width: 30px;
  height: 2px;
  background: white;
  display: block;
  transform-origin: center;
  transition: 0.5s ease-in-out;
}
@media screen and (min-width: 768px) {
  label .hamburger {
    top: 135px;
    left: 50px;
  }
}

label .hamburger:before,
label .hamburger:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: white;
  transition: 0.5s ease-in-out;
}

label .hamburger:before {
  top: -10px;
}

label .hamburger:after {
  bottom: -10px;
}

label input {
  display: none;
}

label input:checked + .menu {
  box-shadow: 0 0 0 100vw #009245, 0 0 0 100vh #009245;
  border-radius: 0;
}

label input:checked + .menu .hamburger {
  transform: rotate(45deg);
}

label input:checked + .menu .hamburger:before,
label input:checked + .menu .hamburger:after {
  transform: rotate(90deg);
  top: 0;
  bottom: 0;
}

label ul {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s ease-in-out, visibility 0s 0.8s;
  list-style: none;
  z-index: 1002;
}

label input:checked + .menu + ul {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.8s ease-in-out;
}

label a {
  color: white;
  text-align: center;
  margin-bottom: 3rem;
  display: block;
  text-decoration: none;
  font-size: 2.1rem;
}
@media screen and (min-width: 768px) {
  label a {
    font-size: 2.8rem;
  }
}

label a:hover {
  color: #d4f1c5;
  font-weight: 700;
}

/* footer.scss */
footer {
  background: #05611c;
  background-image: url("../images/common/dia-blk.png");
  background-size: auto;
  background-attachment: scroll; /* ←変更 */
  background-position: center top;
  background-repeat: repeat;
  transition: background-color 0.5s ease;
  position: relative;
  bottom: 0;
}
footer .inner {
  padding-top: 100px;
  padding-bottom: 20px;
}
@media screen and (min-width: 912px) {
  footer .inner {
    padding-top: 220px;
  }
}
footer .inner .footer-ttl {
  margin-bottom: 40px;
  /* L O G O */
}
footer .inner .footer-ttl .img-box {
  margin-bottom: 20px;
}
footer .inner .footer-ttl .img-box .logo-wht {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  width: 100%;
  height: 180px;
  width: 180px;
}
@media screen and (min-width: 912px) {
  footer .inner .footer-ttl .img-box .logo-wht {
    height: 300px;
    width: 300px;
  }
}
footer .inner .footer-ttl .name-wht {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  width: 100%;
  height: 40px;
  width: 320px;
  margin-bottom: 10px;
}
@media screen and (min-width: 768px) {
  footer .inner .footer-ttl .name-wht {
    height: 60px;
    width: 330px;
    margin-bottom: 15px;
  }
}
@media screen and (min-width: 768px) {
  footer .inner .footer-ttl .name-wht {
    height: 60px;
    width: 400px;
  }
}
@media screen and (min-width: 1200px) {
  footer .inner .footer-ttl .name-wht {
    height: 60px;
    width: 480px;
  }
}
footer .inner .footer-ttl h1 {
  color: #fbf9f4;
  padding-bottom: 10px;
  text-align: left;
  font-size: 4.5rem;
}
@media screen and (min-width: 912px) {
  footer .inner .footer-ttl h1 {
    font-size: 6rem;
  }
}
footer .inner .footer-ttl .p-mini {
  color: #fbf9f4;
  text-align: left;
  line-height: 170%;
  font-weight: 400;
  margin-bottom: 25px;
}
@media screen and (min-width: 912px) {
  footer .inner .footer-ttl .p-mini {
    margin-bottom: 60px;
  }
}
footer .inner .footer-ttl .instagram-button {
  text-align: left;
}
footer .inner .grid-nav {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  position: relative;
  padding: 0 1px;
  list-style: none;
  margin-bottom: 20px;
}
@media screen and (min-width: 912px) {
  footer .inner .grid-nav {
    margin-bottom: 60px;
  }
}
footer .inner .grid-nav .footer-menu {
  color: #fbf9f4;
  text-align: left;
  display: inline-block;
  padding-bottom: 20px;
}
footer .inner .grid-nav .footer-menu:hover {
  color: #bcde85;
}
footer .inner .grid-nav .footer-menu::before {
  content: "- ";
}
@media screen and (min-width: 912px) {
  footer .inner .grid-nav .footer-menu {
    text-align: center;
    display: block;
    padding-bottom: 0;
  }
  footer .inner .grid-nav .footer-menu::before {
    content: none;
  }
}
@media screen and (min-width: 912px) {
  footer .inner .grid-nav {
    grid-template-columns: repeat(6, 1fr);
    gap: 1px;
  }
  footer .inner .grid-nav > li {
    position: relative;
    padding: 0 1px;
  }
  footer .inner .grid-nav > li::after {
    background: #009245;
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 1px;
    height: 100%;
  }
  footer .inner .grid-nav > li:first-child::before {
    background: #009245;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 100%;
  }
}
footer .copyright {
  color: #009245;
  position: absolute;
  bottom: 5px;
  left: auto;
  right: 20px;
}

/* --------------------------------------------------
    ♻️ G R E D （ n a v ） f o o t e r 6 項 目
-------------------------------------------------- *//*# sourceMappingURL=style.css.map */