@charset "utf-8";
/* *{outline:1px solid #0000FF;} デバッグ用*/
/*Google Fontsの読み込み
---------------------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
/*テンプレート専用cssファイルの読み込み
---------------------------------------------------------------------------*/
@import url("inview.css");
/*animation11のキーフレーム設定（汎用的）
---------------------------------------------------------------------------*/
@keyframes animation1 {
  0% {
    left: -200px;
  }
  100% {
    left: 0px;
  }
}
/*opa1のキーフレーム設定（汎用的）
---------------------------------------------------------------------------*/
@keyframes opa1 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/*全体の設定
---------------------------------------------------------------------------*/
body * {
  box-sizing: border-box;
}
html, body {
  font-size: 14px; /*基準となるフォントサイズ。*/
  overflow: visible;
}
/*画面幅900px以上の追加指定*/
@media screen and (min-width:900px) {
  html, body {
    font-size: 16px; /*基準となるフォントサイズ。*/
  }
} /*追加指定ここまで*/
body {
  margin: 0;
  padding: 0;
  font-family: 'Noto Sans JP', "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif; /*フォント種類（ゴシック）*/
  -webkit-text-size-adjust: none;
  background: rgb(250, 250, 247); /*背景色*/
  color: #555; /*文字色*/
  line-height: 2; /*行間*/
  overflow-x: hidden;
}
/*リセット*/
figure {
  margin: 0;
}
dd {
  margin: 0;
}
nav, ul, li, ol {
  margin: 0;
  padding: 0;
}
nav ul {
  list-style: none;
}
/*table全般の設定*/
table {
  border-collapse: collapse;
}
/*画像全般の設定*/
img {
  border: none;
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}
/*videoタグ*/
video {
  max-width: 100%;
}
/*iframeタグ*/
iframe {
  width: 100%;
}
/*他*/
input {
  font-size: 1rem;
}
.inner {
  width: 1000px;
  max-width: 90%;
  margin: 0 auto;
}
@media screen and (max-width:600px) {
  .inner {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 2rem 0 2rem;
  }
}
/*リンクテキスト全般の設定
---------------------------------------------------------------------------*/
a {
  color: inherit;
  transition: 0.3s; /*hoverまでにかける時間。0.3秒。*/
}
/*マウスオン時*/
a:hover {
  filter: brightness(1.1); /*少しだけ明るくする*/
}
/* ===== TOP：動画背景 ===== */
#top_movie {
  position: relative;
  height: 100vh;
  width: 100%;
  overflow: hidden;
}
#bg-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  z-index: -1;
}
/*サウンドボタン*/
.sound-toggle {
  position: absolute;
  top: 24px;
  left: 24px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  z-index: 10;
}
.sound-toggle img {
  width: 35px;
  height: 35px;
  transition: opacity 1s;
}
.sound-toggle:hover img {
  opacity: 0.6;
}
/*コンテナー（サイト全体を囲むブロック）
---------------------------------------------------------------------------*/
#container {
  position: relative;
  animation: opa1 1s 1s both; /*1秒待機し、1秒かけてフェードイン*/
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0 auto;
}
/*ヘッター
---------------------------------------------------------------------------*/
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background: rgb(250, 250, 247); /*背景色*/
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 30px;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}
.header_fix {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background: rgb(250, 250, 247); /*背景色*/
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 30px;
  z-index: 9999;
  pointer-events: auto;
}
header.visible {
  opacity: 1;
  pointer-events: auto;
}
/* ハンバーガー（閉じるとクロス） */
.hamburger {
  width: 32px;
  height: 18px;
  position: relative;
  cursor: pointer;
  transition: transform 0.3s ease;
}
.hamburger span {
  display: block;
  height: 1px;
  width: 100%;
  background: black;
  position: absolute;
  left: 0;
  transition: all 0.3s ease;
  border-radius: 2px;
}
.hamburger span:nth-child(1) {
  top: 0;
}
.hamburger span:nth-child(2) {
  top: 10px;
}
.hamburger span:nth-child(3) {
  top: 20px;
}
.hamburger.active span:nth-child(1) {
  transform: rotate(45deg);
  top: 10px;
}
.hamburger.active span:nth-child(2) {
  opacity: 0;
}
.hamburger.active span:nth-child(3) {
  transform: rotate(-45deg);
  top: 10px;
}
/* language */
.lang {
  width: 130px;
  height: 18px;
  position: relative;
  /*cursor: pointer;*/
  /*transition: transform 0.3s ease;*/
  font-size: 0.8rem;
  margin: 0 15px 0 auto;
  color: #B0B0B0;
}

.lang a {
  color: inherit;
text-decoration: none;
}
/*マウスオン時*/
.lang a:hover {
  color: #000000;
}


/* フルスクリーン スライドメニュー */
.side-menu {
  position: fixed;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100vh;
  background: #6d6d6d;
  color: #FFF;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: left 0.4s ease;
  z-index: 999;
}
.side-menu.active {
  left: 0;
}
.side-menu a {
  color: white;
  text-decoration: none;
  font-size: 1.2rem;
  letter-spacing: 0.6;
  margin: 15px 0;
  padding: 12px 30px;
  border: 1px solid white;
  transition: all 0.3s ease;
  display: block;
  width: 500px;
  max-width: 90%;
  text-align: center;
}
.side-menu a:hover {
  background: white;
  color: #222;
}
/*ロゴ*/
#logo a {
  text-decoration: none;
}
#logo img {
  display: block;
  width: 150px; /*ロゴの幅*/
}
/* 動画中央ロゴ */
/*#sec_video*/
.center_logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
}
/*#sec_video*/ .center_logo img {
  width: 180px;
  max-width: 80vw;
  height: auto;
}
/*#sec_video{position: relative;}*/
#ABOUT, #WORKS, #PRICE, #FLOW, footer {
  padding-top: 6rem;
}
/*コンテンツ
---------------------------------------------------------------------------*/
/*コンテンツブロック*/
#contents {
  flex: 1;
}
/*コンテンツ内で使用するul,ol要素（リストタグ）*/
#contents ul, #contents ol {
  margin-left: 2rem;
  margin-right: 2rem;
}
/*p要素（段落タグ）
---------------------------------------------------------------------------*/
p {
  margin: 0;
}
/*main（メインコンテンツ）
---------------------------------------------------------------------------*/
/*h2見出し*/
main h2 {
  margin: 0;
  padding: 0;
  font-size: 1.25rem; /*文字サイズ。120%。*/
  font-weight: normal; /*h要素のデフォルトの太字を標準に*/
  margin-bottom: 2vw; /*下にスペースを空ける*/
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
}
/*見出し内のspan（小さな装飾文字と上部のアクセントライン）
main h2 span.small {
	display: inline-block;
	border-top: 2px solid #000;	/*上の線の幅、線種、varは色のことで冒頭のprimary-colorを読み込みます。*/
/*font-size: 0.9rem;		/*文字サイズ90%*/
/*opacity: 0.6;			/*透明度。色が60%出た状態。*/
/*letter-spacing: 0.1rem;	/*文字間隔を少しだけ広く*/
/*padding-top: 2rem;		/*上に空ける余白。ラインとの間の余白調整です。お好みで。
}*/
/*見出しをセンタリングする場合*/
main h2.c {
  align-items: center;
}
main h2 span {
  display: inline-block;
  background-color: #ccc;
  padding: 0 2px;
  line-height: 1.2;
}
/*2カラムブロック　※900px未満では１カラム（私たちのこだわりブロック）
---------------------------------------------------------------------------*/
.list-half * {
  margin: 0;
  padding: 0;
}
/*背景画像*/
#ABOUT {}
/*２カラムを囲むブロック*/
.list-half .list {
  display: flex; /*flexボックスを使う指定*/
  flex-direction: column; /*子要素を縦並びにする*/
  margin-bottom: 2rem; /*ボックスの下に2文字分のスペースを空ける*/
}
/*ブロック内のh4見出し*/
.list-half .list h4 {
  font-size: 1.4rem; /*文字サイズを1.4倍*/
  margin-bottom: 1rem; /*下に１文字分のスペースを空ける*/
}
/*ブロック内のh4内のspan（小さな装飾文字）*/
.list-half .list h4 span {
  display: block;
  opacity: 0.5; /*透明度50%*/
  font-weight: normal;
  font-size: 0.5em; /*文字サイズを親要素の50%*/
  letter-spacing: 0.1em; /*文字間隔をほんの少し広く*/
}
/*画像ブロック共通*/
.list-half .image-l img, .list-half .image-r img {
  border-radius: 50px; /*角を丸くする指定。*/
  box-shadow: 10px 10px rgba(0, 0, 0, 0.1); /*ボックスの影。右へ、下へ、0,0,0は黒の事で0.1は色が10%出た状態。*/
}
/*画面幅900px以上の追加指定*/
@media screen and (min-width:900px) {
  /*２カラムを囲むブロック*/
  .list-half .list {
    flex-direction: row; /*子要素を横並びにする*/
    justify-content: space-between; /*並びかたの種類の指定*/
    align-items: center; /*垂直揃えの指定。天地中央に配置されるように。*/
  }
  /*画像ブロック共通*/
  .list-half .image-l, .list-half .image-r {
    width: 50%; /*画像の幅*/
  }
  /*画像を右に配置する場合*/
  .list-half .image-r {
    margin-left: 2rem; /*画像の左側に空けるスペース*/
  }
  /*画像を左に配置する場合*/
  .list-half .image-l {
    order: -1;
    margin-right: 2rem; /*画像の右側に空けるスペース*/
  }
  /*テキストブロック*/
  .list-half .text {
    flex: 1;
  }
} /*追加指定ここまで*/
/*list-grid 「WORKS」
---------------------------------------------------------------------------*/
.list-grid .list * {
  margin: 0;
  padding: 0;
}
/*ボックス１個あたり*/
.list-grid .list {
  display: grid;
  position: relative;
  border-radius: 5px; /*角を少しだけ丸く*/
  color: #555; /*文字色*/
  border: 1px solid #ccc; /*枠線の幅、線種、色*/
  padding: 2rem; /*ボックス内の余白。２文字分。*/
  margin-bottom: 2rem; /*ボックスの下に空けるスペース。2文字分。*/
}
/*ボックス内のh4見出し*/
.list-grid .list h4 {
  text-align: center; /*テキストをセンタリング*/
  font-size: 1.3rem; /*文字サイズ130%*/
  margin-bottom: 0.5rem; /*下に0.5文字分の余白を空ける*/
  color: #000; /*文字色*/
}
/*h4内のspan（小さな装飾文字）*/
.list-grid .list h4 span {
  display: block;
  font-weight: normal; /*デフォルトだと太字なので標準に*/
  font-size: 0.7em; /*文字サイズを70%*/
}
/*ボックス内のp要素*/
.list-grid .list p {
  font-size: 0.85rem; /*文字サイズを85%に*/
  line-height: 1.5; /*行間を少し狭く*/
}
/*ボックス内のfigure画像*/
.list-grid .list figure {
  margin: 0 auto;
  margin-bottom: 1rem; /*画像の下に空けるスペース*/
}
/*画面幅800px以上の追加指定*/
@media screen and (min-width:800px) {
  /*ブロック全体を囲むブロック*/
  .list-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /*2列にする指定。4列にしたければrepeat(4, 1fr)とする。*/
    gap: 3rem /*ブロックの間に空けるマージン的な指定。２文字分。*/
  }
} /*追加指定ここまで*/
/*works 再生
---------------------------------------------------------------------------*/
#WORKS .play_time {
  max-width: 100%;
  height: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0;
}
/* ボタンLINE */
.button_line {
  position: relative;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 0 auto;
  max-width: 200px;
  padding: 10px 25px;
  color: #313131;
  transition: 0.3s ease-in-out;
  text-decoration: none;
  font-size: 0.8rem;
}
.button_line :before {
  position: absolute;
  bottom: 0px;
  left: 50%;
  content: '';
  width: 100%;
  height: 1px;
  background: rgba(0, 0, 0, .1);
  transform: translateX(-50%);
}
.button_line :after {
  position: absolute;
  bottom: 0px;
  left: 0;
  content: '';
  width: 100%;
  height: 1px;
  background: #000;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: transform .3s;
}
.button_line :hover {
  opacity: 0.7;
}
.button_line :hover:after {
  transform: scale(1, 1);
}
/* モーダル（フェード対応） */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease;
  z-index: 999;
}
.modal-overlay.preview {
  opacity: 1;
  visibility: visible;
}
.modal-content {
  position: relative;
  width: 90%;
  max-width: 780px;
}
.modal-content video {
  width: 100%;
  height: auto;
}
.close-btn {
  position: absolute;
  top: -45px;
  right: 0;
  cursor: pointer;
  width: 30px;
  height: auto;
}
/* 「PRICE」
---------------------------------------------------------------------------*/
/*ブロック全体*/
.PRICE {
  font-size: 1rem; /*文字サイズ130%*/
}
/*価格アコーデオン*/
.PRICE dt {
  display: flex;
  align-items: flex-start;
  border-top: 1px solid rgba(255, 255, 255, 0.3); /*上の幅、線種、最後は色の指定で255,255,255は白の事で0.3は色を30%出す指定。*/
  padding: 1rem; /*ブロック内の余白。１文字分。*/
  cursor: pointer; /*カーソルの形状。リンクと同じスタイルにしてクリックできると認識してもらう。*/
}
/*「＋」アイコン（閉じている場合）*/
.PRICE dt::before {
  content: "＋"; /*アイコン画像の指定*/
  margin-right: 1rem; /*右側に空けるスペース*/
  flex-shrink: 0;
  width: 2rem; /*幅*/
  line-height: 2rem; /*高さ*/
  text-align: center;
  border-radius: 50%; /*円形にする*/
  transform: translateY(5px); /*アイコンの上下バランスの微調整*/
}
/*「ー」アイコン（開いている場合）*/
.PRICE dt.active::before {
  content: "ー"; /*アイコン画像の指定*/
}
/*価格表*/
.PRICE dd {
  margin: 0 1rem 1rem 4rem; /*ボックスの外側にとる余白。上、右、下、左への順番。*/
  padding: 1rem 0rem 0rem 1rem; /*ボックスの内側の余白。上下に1文字、左右に0文字分。*/
  /*background: #fff;	/*背景色*/
  color: #333; /*文字色*/
  border-radius: 5px; /*角を丸くする指示*/
  max-width: 85%;
}
/*list-yoko-scroll「FLOW」ブロック
---------------------------------------------------------------------------*/
.scroll-yoko * {
  margin: 0;
  padding: 0;
}
.scroll-yoko {
  display: flex;
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  /*scroll-snap-type: x mandatory;*/
  scrollbar-width: none; /* Firefox */
  cursor: grab;
  padding: 1em;
  border-top: 1px solid #555;
  border-bottom: 1px solid #555;
}
.scroll-yoko:active {
  cursor: grabbing;
}
.scroll-yoko::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Edge用 */
}
.flow_item {
  flex: 0 0 auto;
  width: 185px; /*ブロック１個の幅。*/
  scroll-snap-align: start;
  user-select: none;
}
.flow_item:not(:last-child) {
  margin-right: 3rem; /*最後のひとつ以外に右スペース*/
}
@media screen and (max-width: 600px) { /*画面幅600px以下の場合*/
  .flow_item {
    min-width: 50%;
    margin-right: 3rem;
  }
}
.scroll-yoko .flow_item .text {
  font-size: 0.85rem; /*文字サイズ85%*/
  line-height: 1.5; /*行間*/
}
#FLOW h4 {
  line-height: 1.8; /*行間*/
  margin-bottom: 1.3rem;
}
.atten_p {
  line-height: 1.5; /*行間*/
  font-size: 0.85rem; /*文字サイズ85%*/
  margin: 1em 0;
}
/* 左下メール */
.mail-ico {
  position: fixed;
  bottom: 20px;
  left: 20px;
  width: 85px;
  height: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease;
  z-index: 999;
}
.mail-ico.show {
  opacity: 1;
  visibility: visible;
}
.mail-ico a {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  cursor: pointer;
}
.mail-ico svg {
  width: 100%;
  height: 100%;
  fill: #333;
  display: block;
  transition: fill 0.3s ease;
}
.mail-ico a:hover svg {
  fill: #666;
}
/*フッター
---------------------------------------------------------------------------*/
footer {
  background-color: #c2c2c2;
  color: #fff;
  margin-top: 6em;
  padding-top: 3rem;
}
.footer-inner {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  /*gap: 1em;*/
  padding: 0 2em;
}
.footer-col {
  flex: 1 0 300px;
  object-fit: cover;
}
.footer-col2 {
  flex: 2 1 30%;
  font-size: 0.8rem;
}
.footer-inner img {
  width: 400px;
  max-width: 90%;
  height: auto;
  border-radius: 8px;
}
.footer_logo {
  width: 180px !important;
  height: auto;
  margin: 0 0 1.5em;
}
.footer_pin {
  height: 6px !important;
  width: 6px;
  display: inline-block;
  margin-left: 1em;
}
@media screen and (max-width: 600px) {
  .footer_logo {
    margin: 0 auto 2em;
  }
  .footer-inner {
    font-size: 1rem;
    width: 500px;
    max-width: 90%;
    padding;
    0;
    display: flex;
    flex-direction: column;
  }
  .footer-inner img {
    width: 400px;
    max-width: 100%;
    height: auto;
    border-radius: 8px;
  }
  .footer-col, .footer-col2 {
    justify-content: center;
    align-items: flex-start;
    text-align: center;
  }
  .footer-col {

flex: 0 0 auto;
    /*height: 100px;*/
    /*max-height: 100%;*/
    margin: 0;
    padding: 0 0 1em 0;
  }
}
footer small { /*Copyright部分*/
  display: block;
  text-align: center;
  margin: 2rem auto;
}
/*PAGE TOP（↑）設定
---------------------------------------------------------------------------*/
/*.pagetop-show {display: block;}*/
/*ボタンの設定*/
.pagetop a {
  display: block;
  text-decoration: none;
  text-align: center;
  z-index: 99;
  animation: opa1 1s 0.4s both;
  position: fixed; /*スクロールに追従しない(固定で表示)為の設定*/
  right: 20px; /*右からの配置場所指定*/
  bottom: 20px; /*下からの配置場所指定*/
  color: #fff; /*文字色*/
  font-size: 1.5rem; /*文字サイズ*/
  background: rgba(0, 0, 0, 0.2); /*背景色。0,0,0は黒の事で0.2は色が20%出た状態。*/
  width: 45px; /*幅*/
  line-height: 45px; /*高さ*/
  border-radius: 50%; /*円形にする*/
}
/*テキストのフェードイン設定
---------------------------------------------------------------------------*/
/*fadeInのキーフレーム設定*/
@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: scale(0.1) rotate(-30deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}
/* 初期状態でテキストを非表示にする */
.fade-in-text {
  visibility: hidden;
}
/* アニメーションを適用するクラス。
animationの行の「0.2s」が文字の出現のなめらかさで、大きいほどなめらかに出てきます。
１文字ずつの出現する際の時差は、js/main.jsの「テキストのフェードイン効果」の中にある「0.1」で調整できます。*/
.char {
  display: inline-block;
  opacity: 0;
  animation: fadeIn 0.2s linear both;
}
/*その他
---------------------------------------------------------------------------*/
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}
.color-check, .color-check a {
  color: #ff0000 !important;
}
.l {
  text-align: left !important;
}
.c {
  text-align: center !important;
}
.r {
  text-align: right !important;
}
.small {
  font-size: 0.75em;
}
.middle {
  font-size: 1.3em;
  line-height: 0.8;
}
.large {
  font-size: 1.5em;
  letter-spacing: 0.1em;
}
.bold {
  font-weight: 600;
}
.sp {
  display: none !important;
}
.pc {
  display: block !important;
}

@media screen and (max-width:600px) {
  .sp {
    display: block !important;
  }
  .pc {
    display: none !important;
  }
}
.bg1 {  background-color: aquamarine;
}
.bg2 {  background-color: #ebebe6;
}
.bg3 {  background-color: coral;
}

.black {
  color: rgba(0, 0, 0, 1.00);
}