@charset "UTF-8";
/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/
/************************************
** 子テーマ用のスタイルを書く
** https://colorate.azurewebsites.net/ja/Color/F78DA7
** https://www.colorhexa.com/F78DA7
************************************/
:root {
  --gsss-main-color: #00D0D0;
  --gsss-sub-color: #FFF100;
  --gsss-kuro: #232626;
  --gsss-shiro: #ffffff;
  --gsss-red: #d00000;  /* 赤 */
  --gsss-blue: #00d0d0;  /* 青 */
  --gsss-green: #00d068;  /* 緑 */
  --gsss-yellow: #FFF100;  /* 黄色 */
  /* コクーンの文字の装飾 アンダーライン */
  --cocoon-gsss-red: var(--gsss-red);
  --cocoon-gsss-blue: var(--gsss-blue);
  --cocoon-gsss-green: var(--gsss-green);
  --cocoon-gsss-yellow: var(--gsss-yellow);
  /* ヘッダーボタン */
  --gsss-botton-text: #232626;
  --gsss-botton-border: #232626;
  --gsss-botton-bg: #fff;
  --gsss-botton-hover-text: #232626;
  --gsss-botton-hover-border: #232626;
  --gsss-botton-hover-bg: #F0F080;
  /* ヘッダーメニュー */
  --gsss-navi-text: #232626;
  --gsss-navi-bg: #fff;
  --gsss-navi-border: #232626;
  --gsss-navi-hover-text: #232626;
  --gsss-navi-hover-bg: #F0F080;
  --gsss-navi-hover-border: #232626;
  /* すべてのテキストのデフォルトサイズを％で設定 */
  --gsss-text-size: 100%;
  --gsss-text-size-s: 90%;
  --gsss-text-size-ss: 80%;
  --gsss-text-size-l: 110%;
  --gsss-text-size-ll: 120%;
  /* 見出しカラー */
  --gsss-midashi-color: var(--gsss-kuro);
  --gsss-midashi-border: var(--gsss-kuro);
  /* フォーム目立たせカラー */
  --gsss-form-color: var(--gsss-main-color);
  /* モバイルフッター */
  --gsss-mbfoot-color: var(--gsss-shiro);
  --gsss-mbfoot-bg: var(--gsss-main-color);
  /* トグル アコーディオン */
  --gsss-toggle-color: var(--gsss-kuro);
  --gsss-toggle-border: var(--gsss-main-color);
  --gsss-toggle-bg: var(--gsss-shiro);
  --gsss-toggleh-color: var(--gsss-kuro);
  --gsss-toggleh-border: var(--gsss-main-color);
  --gsss-toggleh-bg: var(--gsss-main-color);
}
/************************************
** すべてのサイトに設定するスタイル
************************************/
/*ロゴが長体にならないようにする処理*/
.logo img {
  width: auto;
  max-height: 100px;
}
/*1023px以下*/
@media screen and (max-width: 1023px) {
  .logo img {
    width: auto;
    max-height: 60px;
  }
}
/*モバイルは管理画面バーいらない*/
@media screen and (max-width: 1023px) {
  #wpadminbar {
    display: none;
  }
  html {
    margin-top: 0px !important;
  }
}
/*コンテンツ上部をメニュー下部につける*/
#content,
#main,
.entry-content {
  margin-top: 0px;
  padding-top: 0px;
}
/*ページ内リンクスムーズスクロール*/
html {
  scroll-behavior: smooth;
}
/*ページ内リンクスクロール位置を調整*/
html * {
  scroll-margin-top: 150px;
}
/*トップに表示しないようにする処理*/
.front-top-page .entry-title {
  display: none;
}
.front-top-page .date-tags {
  display: none;
}
.front-top-page .entry-footer {
  display: none;
}
/* コクーンのマージンボトム削除 */
.insert-page {
  margin: 0 !important;
}
/* margin-top,-bottomが効かない場合の記述 */
.memo {
  border: 1px solid transparent;  /* margin-top,-bottomが効かない */
  padding: 0.1px;  /* margin-top,-bottomが効かない */
  overflow: hidden;  /* margin-top,-bottomが効かない */
}
/* カテゴリページ（タイトル目次消し） */
body.category #archive-title {
  display: none;
}
body.category #toc {
  display: none;
}
/* 固定ぺージ（日付消し） */
.page .date-tags {
  display: none;
}
/************************************
** 文字の装飾 アンダーライン
************************************/
.red {padding: 0 5px;color: var(--cocoon-gsss-red) !important;}
.blue {padding: 0 5px;color: var(--cocoon-gsss-blue) !important;}
.green {padding: 0 5px;color: var(--cocoon-gsss-green) !important;}
.bold-red {padding: 0 5px;color: var(--cocoon-gsss-red) !important;}
.bold-blue {padding: 0 5px;color: var(--cocoon-gsss-blue) !important;}
.bold-green {padding: 0 5px;color: var(--cocoon-gsss-green) !important;}
.marker {padding: 0 5px;font-weight: bold;background: var(--cocoon-gsss-yellow) !important;}
.marker-red {padding: 0 5px;font-weight: bold;color: #fff;
background: var(--cocoon-gsss-red) !important;}
.marker-blue {padding: 0 5px;font-weight: bold;color: #fff;
background: var(--cocoon-gsss-blue) !important;}
.marker-under {padding: 0 5px;}
/*jsアンダーライン*/
.marker-under-red {padding: 0 5px;font-weight: bold;background: linear-gradient(transparent 90%, var(--cocoon-gsss-red) 90%) !important;}
.marker-under-blue {padding: 0 5px;font-weight: bold;background: linear-gradient(transparent 90%, var(--cocoon-gsss-blue) 90%) !important;}

/************************************
** パソコン用・モバイル用
************************************/
.pc_only {
  display: block !important;
}
.sp_only {
  display: none !important;
}
/*1023px以下*/
@media screen and (max-width: 1023px) {
  .pc_only {
    display: none !important;
  }
  .sp_only {
    display: block !important;
  }
}
/************************************
** モバイル調整
************************************/
.header-container-in.hlt-top-menu.hlt-tm-small .logo-header img {
  max-height: 40px;
}
/*1023px以下*/
@media screen and (max-width: 1023px) {
  .header .tagline {
    padding: 5px 0 0 0;
    margin: 0px;
  }
  .header .logo-text {
    padding: 0 0 5px 0;
  }
  .header-container-in.hlt-top-menu.hlt-tm-small .logo-header {
    background: #fff;
    max-height: 120px;
  }
  .header-container-in.hlt-top-menu.hlt-tm-small .logo-header img {
    max-height: 120px;
  }
  .fvmp4 {
    margin-top: 20px;
  }
}
/************************************
** 見出し
************************************/
/* 共通のリセットスタイル */
.article h2,
.article h3,
.article h4,
.article h5,
.article h6 {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  color: inherit;
  background: none;
}
.article h1,
.article h2,
.article h3,
.article h4,
.article h5,
.article h6 {
  margin: 1.5em 0 1em;
  font-family: 'Arial', sans-serif;
  font-weight: normal;
}
/* h1スタイル */
.article h1 {
  letter-spacing: 1px;
  font-size: 2.2em;
  color: #000;
  border-bottom: 3px solid #000;
  padding-bottom: 0.3em;
}
/* h2スタイル */
.article h2 {
  letter-spacing: 1px;
  font-size: 2em;
  padding-bottom: 0.3em;
  color: var(--gsss-midashi-color);
  border-bottom: 2px solid var(--gsss-midashi-border);
}
/* h3スタイル */
.article h3 {
  letter-spacing: 1px;
  padding-left: 0.25em;
  font-size: 1.75em;
  color: var(--gsss-midashi-color);
}
/* h4スタイル */
.article h4 {
  letter-spacing: 1px;
  padding-left: 0.5em;
  font-size: 1.5em;
  color: var(--gsss-midashi-color);
}
/* h5スタイル */
.article h5 {
  letter-spacing: 1px;
  padding-left: 0.75em;
  font-size: 1.25em;
  color: var(--gsss-midashi-color);
}
/* h6スタイル */
.article h6 {
  letter-spacing: 1px;
  padding-left: 1em;
  font-size: 1em;
  color: var(--gsss-midashi-color);
}
/*1023px以下*/
@media screen and (max-width: 1023px) {
  /* h1スタイル */
  .article h1 {
    font-size: 1.3em;
  }
  .article h2 {
    font-size: 1.3em;
  }
  /* h3スタイル */
  .article h3 {
    font-size: 1.2em;
  }
  /* h4スタイル */
  .article h4 {
    font-size: 1.2em;
  }
  /* h5スタイル */
  .article h5 {
    font-size: 1.1em;
  }
  /* h6スタイル */
  .article h6 {
    font-size: 1.1em;
  }
}


/************************************
** FAQのデザイン
************************************/
/* FAQ */
/*1023px以下*/
@media screen and (max-width: 1023px) {
  .section_box .gsss_main .faq-question-label {
    display: block;
  }
  .section_box .gsss_main .faq-question-content {
    display: block;
  }
  .section_box .gsss_main .faq-answer-label {
    display: block;
  }
  .section_box .gsss_main .faq-answer-content {
    display: block;
  }
}
/* faqボタンの色 */
.faq > * > .faq-question-label{
  background-color: var(--gsss-main-color); 
  color: var(--gsss-shiro); 
  width:2em;
  text-align:center;
  font-weight:bold;
}
.faq > * > .faq-answer-label{
  background-color: var(--gsss-sub-color); 
  color: var(--gsss-shiro); 
  width:2em;
  text-align:center;
  font-weight:bold;
}



/************************************
** モバイルフッター 電話をかける１つ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px) {
  .mobile-footer-menu-buttons {
    background-color: var(--gsss-mbfoot-bg);
    color: var(--gsss-mbfoot-color) !important;
  }
  .navi-menu-button {
    padding: 6px 0;
  }
  .mobile-menu-buttons .menu-icon {
    font-size: 25px;
    color: var(--gsss-mbfoot-color) !important;
    opacity: 1;
  }
  .mobile-menu-buttons .menu-caption {
    font-size: 15px;
    font-weight: bold;
    color: var(--gsss-mbfoot-color) !important;
    opacity: 1;
  }
}
/************************************
** トグル アコーディオン
************************************/
.toggle-button {
  color: var(--gsss-toggle-color) !important;
  border: 3px solid var(--gsss-toggle-border) !important;
  background-color: var(--gsss-toggle-bg) !important;
  font-weight: normal;
  opacity: 1;
}
.toggle-button:hover {
  color: var(--gsss-toggleh-color) !important;
  border: 3px solid var(--gsss-toggleh-border) !important;
  background-color: var(--gsss-toggleh-bg) !important;
  opacity: 1;
}
.toggle-button::before {
  color: var(--gsss-toggle-color);
  font-weight: normal;
  opacity: 1;
}
.toggle-button:hover:before {
  color: var(--gsss-toggleh-color);
  opacity: 1;
}
.toggle-content {
  background-color: #fff;
  border: 1px solid #eee !important;
}
/************************************
** フッターメニューの調整
************************************/
#footer {
  background-color: var(--gsss-shiro) !important;
  border-top: 1px solid var(--gsss-kuro) !important;
  color: var(--gsss-kuro) !important;
}
#footer,
#footer a:not(.sns-button),
.footer-title {
  color: var(--gsss-kuro) !important;
}
/************************************
** 追従上部戻るボタン
************************************/
.go-to-top .go-to-top-button {
  background-color: var(--gsss-main-color);
  color: var(--gsss-shiro) !important;
}
/************************************
** flex順番整え
** スマホで見たときにカラム逆にする
************************************/
@media screen and (max-width: 1023px) {
  .flex-order-gyaku div:first-child {
    order: 2;
  }
  .flex-order-gyaku div:last-child {
    order: 1;
  }
}
/************************************
** LPランディングページ横幅いっぱい
************************************/
/**上下のセクションをピッタリとくっつけるための処理**/
@media screen and (max-width: 1023px) {
  #content {
    overflow: hidden;
  }
  .content {
    margin: 0;
  }
  .entry-content {
    margin: 0;
  }
  .footer {
    margin: 0;
  }
  .article {
    margin: 0;
  }
  .main {
    padding: 0;
  }
  .mapa_topbottom_0 {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
  }
}
/**lp_box内のマージン処理**/
.lp_box .column-wrap {
  margin: 0 !important;
}
.lp_box p {
  margin: 0 !important;
}
/**左右横幅いっぱいにするための処理(コンテンツは左右パディングあり)**/
.public-page .lp_box {
  margin: 0px;
  padding: 0px;
  margin-left: calc((100% - 100vw) / 2) !important;
  margin-right: calc((100% - 100vw) / 2) !important;
  padding-left: calc(50vw - 50%) !important;
  padding-right: calc(50vw - 50%) !important;
  width: 100vw;
  overflow: hidden;
  border: 0;
}
/*1023px以下*/
@media screen and (max-width: 1023px) {
  .public-page .lp_box {
    margin-left: calc((100% - 100vw) / 2) !important;
    margin-right: calc((100% - 100vw) / 2) !important;
    padding-left: calc(52vw - 50%) !important;
    padding-right: calc(52vw - 50%) !important;
    width: 100vw;
    overflow: hidden;
    border: 0;
  }
}
/**連絡先ボックス**/
.renrakubox ul {
  list-style-type: none;
  font-size: 80%;
  text-align: center;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  line-height: 110%;
}
.renrakubox ul li {
  display: inline-block;
  padding: 8px 12px;
}
@media screen and (max-width: 1023px) {
  .renrakubox ul {
    flex-direction: column;
    margin: 16px 0 0 0;
  }
  .renrakubox ul li {
    padding: 0;
    margin: 0;
  }
}
@media screen and (max-width: 1023px) {
  .container .column-wrap {
    gap: 4px;
  }
}
/************************************
** フォームのデザイン
************************************/
form u.hissu {
  font-size: 10px;
  text-decoration: none;
  display: inline-block;
  margin: 0 1em 0 1em;
  padding: .4em;
  line-height: 1;
  text-decoration: none;
  color: #fff;
  background-color: var(--gsss-form-color);
  border: 1px solid var(--gsss-form-color);
}
form u.nini {
  font-size: 10px;
  text-decoration: none;
  display: inline-block;
  margin: 0 1em 0 1em;
  padding: .4em;
  line-height: 1;
  text-decoration: none;
  color: #fff;
  background-color: #999;
  border: 1px solid #999;
}
form u.kotei {
  font-size: 10px;
  text-decoration: none;
  display: inline-block;
  margin: 0 1em 0 1em;
  padding: .4em;
  line-height: 1;
  text-decoration: none;
  color: #fff;
  background-color: #333;
  border: 1px solid #333;
}
/* チェック・ラジオを一行ごとに */
.wpcf7-form-control .wpcf7-list-item {
  display: block;
}
/* 禁止マーク */
input:disabled {
  cursor: not-allowed;
}
label.disabled {
  cursor: not-allowed;
  color: #999;
}
/* 郵便番号 */
input[name="your_date"] {
  width: 40%;
}
input[name="your_name"] {
  width: 40%;
}
input[name="your_name_furigana"] {
  width: 50%;
}
input[name="your_denwa"] {
  width: 50%;
}
input[name="your_email"] {
  width: 60%;
}
input[name="zip"] {
  width: 30%;
}
input[name="pref"] {
  width: 30%;
}
input[name="city"] {
  width: 30%;
}
input[name="addr"] {
  width: 30%;
}
input[name="addr2"] {
  width: 100%;
}
select[name="your_todohuken"] {
  width: 60%;
}
@media screen and (max-width: 1023px) {
  input[name="your_date"] {
    width: 70%;
  }
  input[name="your_name"] {
    width: 70%;
  }
  input[name="your_name_furigana"] {
    width: 70%;
  }
  input[name="your_denwa"] {
    width: 80%;
  }
  input[name="your_email"] {
    width: 90%;
  }
  input[name="zip"] {
    width: 60%;
  }
  input[name="pref"] {
    width: 60%;
  }
  input[name="city"] {
    width: 60%;
  }
  input[name="addr"] {
    width: 90%;
  }
  input[name="addr2"] {
    width: 100%;
  }
  select[name="your_todohuken"] {
    width: 60%;
  }
}
/* フォームオブジェクト */
input {
  border: 1px solid #808080 !important;
  margin: 4px 0;
}
textarea {
  border: 1px solid #808080 !important;
  margin: 2px 0;
}
input:focus {
  background-color: var(--gsss-main-color-light);
  border: 1px solid #000 !important;
}
textarea:focus {
  background-color: var(--gsss-main-color-light);
  border: 1px solid #000 !important;
}
input:focus[type="submit"] {
  background-color: var(--gsss-main-color-light);
}
input[type="submit"] {
  display: block;
  color: var(--gsss-shiro);
  background-color: var(--gsss-form-color);
  border: 2px solid var(--gsss-form-color) !important;
  font-weight: bold;
  text-align: center;
  margin: 1rem auto 0 auto;
  width: 60%;
  font-size: 1em;
  transition: background-color 0.3s, color 0.3s, border 0.3s;
}
input[type="submit"]:hover {
  color: var(--gsss-form-color);
  background-color: var(--gsss-shiro);
  border: 2px solid var(--gsss-form-color) !important;
}
/************************************
** テーブルのデザイン
************************************/
.table {
  font-size: 0.9em;
  display: table;
  border-collapse: collapse;
  border-spacing: 0;
}
.table .tr {
  width: 100%;
  display: table-row;
  border: 1px solid #aaa;
  border-collapse: collapse;
  border-spacing: 0;
}
@media screen and (max-width: 767px) {
  .table .tr {
    display: block;
    width: 100%;
  }
}
.table .tr .td {
  display: table-cell;
  border-left: 1px solid #aaa;
  border-right: 1px solid #aaa;
  padding: 8px 13px;
  vertical-align: top;
  border-collapse: collapse;
  border-spacing: 0;
}
@media screen and (max-width: 767px) {
  .table .tr .td {
    display: block;
    width: 100%;
  }
}
.table .label {
  background: #fcfcfc;
  width: 30%;
}
.table .input {
  width: 70%;
}
.table .tr .td:nth-child(2) {
  width: 70%;
}
@media screen and (max-width: 767px) {
  .table .tr .td:nth-child(2) {
    display: block;
    width: 100%;
  }
}
.tr_midashi {
  background: #eee;
  color: #333;
  font-weight: bold;
}
/************************************
** アニメーション フェードインなど
************************************/
/*  スマホ描画幅処理 */
@media screen and (max-width: 1023px) {
  #content {
    overflow: hidden;
  }
}
/* fade up 複数の場合*/
.public-page .u-fade-type-up {
  transform: translateY(50px);
  opacity: 0;
}
.public-page .u-fade-type-up.is-active {
  transition: 1.6s;
  transform: translateY(0);
  opacity: 1;
}
.public-page .is-active .u-fade-type-up {
  transition: 1.6s;
  transform: translateY(0);
  opacity: 1;
}
.public-page .is-active .u-fade-type-up:nth-child(2) {
  transition-delay: 1s;
}
.public-page .is-active .u-fade-type-up:nth-child(3) {
  transition-delay: 2s;
}
.public-page .is-active .u-fade-type-up:nth-child(4) {
  transition-delay: 3s;
}
.public-page .is-active .u-fade-type-up:nth-child(5) {
  transition-delay: 4s;
}
.public-page .is-active .u-fade-type-up:nth-child(6) {
  transition-delay: 5s;
}
.public-page .is-active .u-fade-type-up:nth-child(7) {
  transition-delay: 6s;
}
.public-page .is-active .u-fade-type-up:nth-child(8) {
  transition-delay: 7s;
}
.public-page .is-active .u-fade-type-up:nth-child(9) {
  transition-delay: 8s;
}
@media screen and (max-width: 1023px) {
  .public-page .is-active .u-fade-type-up {
    transition-delay: 0s;
  }
}
/* fade up  単一の場合 */
.public-page .u-fade-type-up1 {
  transform: translateY(50px);
  opacity: 0;
}
.public-page .u-fade-type-up1.is-active {
  transition: 1.6s;
  transform: translateY(0);
  opacity: 1;
}
.public-page .u-fade-type-up2 {
  transform: translateY(50px);
  opacity: 0;
}
.public-page .u-fade-type-up2.is-active {
  transition: 1.6s;
  transform: translateY(0);
  opacity: 1;
  transition-delay: .4s;
}
.public-page .u-fade-type-up3 {
  transform: translateY(50px);
  opacity: 0;
}
.public-page .u-fade-type-up3.is-active {
  transition: 1.6s;
  transform: translateY(0);
  opacity: 1;
  transition-delay: .8s;
}
.public-page .u-fade-type-up4 {
  transform: translateY(50px);
  opacity: 0;
}
.public-page .u-fade-type-up4.is-active {
  transition: 1.6s;
  transform: translateY(0);
  opacity: 1;
  transition-delay: 1.2s;
}
.public-page .u-fade-type-up5 {
  transform: translateY(50px);
  opacity: 0;
}
.public-page .u-fade-type-up5.is-active {
  transition: 1.6s;
  transform: translateY(0);
  opacity: 1;
  transition-delay: 1.6s;
}
.public-page .u-fade-type-up6 {
  transform: translateY(50px);
  opacity: 0;
}
.public-page .u-fade-type-up6.is-active {
  transition: 1.6s;
  transform: translateY(0);
  opacity: 1;
  transition-delay: 2s;
}
@media screen and (max-width: 1023px) {
  .public-page .u-fade-type-up2.is-active {
    transition-delay: 0s;
  }
  .public-page .u-fade-type-up3.is-active {
    transition-delay: 0s;
  }
  .public-page .u-fade-type-up4.is-active {
    transition-delay: 0s;
  }
  .public-page .u-fade-type-up5.is-active {
    transition-delay: 0s;
  }
  .public-page .u-fade-type-up6.is-active {
    transition-delay: 0s;
  }
}
/* fade down 複数の場合*/
.public-page .u-fade-type-down {
  transform: translateY(-50px);
  opacity: 0;
}
.public-page .u-fade-type-down.is-active {
  transition: 1.6s;
  transform: translateY(0);
  opacity: 1;
}
.public-page .is-active .u-fade-type-down {
  transition: 1.6s;
  transform: translateY(0);
  opacity: 1;
}
.public-page .is-active .u-fade-type-down:nth-child(2) {
  transition-delay: 1s;
}
.public-page .is-active .u-fade-type-down:nth-child(3) {
  transition-delay: 2s;
}
.public-page .is-active .u-fade-type-down:nth-child(4) {
  transition-delay: 3s;
}
.public-page .is-active .u-fade-type-down:nth-child(5) {
  transition-delay: 4s;
}
.public-page .is-active .u-fade-type-down:nth-child(6) {
  transition-delay: 5s;
}
.public-page .is-active .u-fade-type-down:nth-child(7) {
  transition-delay: 6s;
}
.public-page .is-active .u-fade-type-down:nth-child(8) {
  transition-delay: 7s;
}
.public-page .is-active .u-fade-type-down:nth-child(9) {
  transition-delay: 8s;
}
@media screen and (max-width: 1023px) {
  .public-page .is-active .u-fade-type-down {
    transition-delay: 0s;
  }
}
/* fade down  単一の場合 */
.public-page .u-fade-type-down1 {
  transform: translateY(-50px);
  opacity: 0;
}
.public-page .u-fade-type-down1.is-active {
  transition: 1.6s;
  transform: translateY(0);
  opacity: 1;
}
.public-page .u-fade-type-down2 {
  transform: translateY(-50px);
  opacity: 0;
}
.public-page .u-fade-type-down2.is-active {
  transition: 1.6s;
  transform: translateY(0);
  opacity: 1;
  transition-delay: .4s;
}
.public-page .u-fade-type-down3 {
  transform: translateY(-50px);
  opacity: 0;
}
.public-page .u-fade-type-down3.is-active {
  transition: 1.6s;
  transform: translateY(0);
  opacity: 1;
  transition-delay: .8s;
}
.public-page .u-fade-type-down4 {
  transform: translateY(-50px);
  opacity: 0;
}
.public-page .u-fade-type-down4.is-active {
  transition: 1.6s;
  transform: translateY(0);
  opacity: 1;
  transition-delay: 1.2s;
}
.public-page .u-fade-type-down5 {
  transform: translateY(-50px);
  opacity: 0;
}
.public-page .u-fade-type-down5.is-active {
  transition: 1.6s;
  transform: translateY(0);
  opacity: 1;
  transition-delay: 1.6s;
}
.public-page .u-fade-type-down6 {
  transform: translateY(-50px);
  opacity: 0;
}
.public-page .u-fade-type-down6.is-active {
  transition: 1.6s;
  transform: translateY(0);
  opacity: 1;
  transition-delay: 2s;
}
@media screen and (max-width: 1023px) {
  .public-page .u-fade-type-down2.is-active {
    transition-delay: 0s;
  }
  .public-page .u-fade-type-down3.is-active {
    transition-delay: 0s;
  }
  .public-page .u-fade-type-down4.is-active {
    transition-delay: 0s;
  }
  .public-page .u-fade-type-down5.is-active {
    transition-delay: 0s;
  }
  .public-page .u-fade-type-down6.is-active {
    transition-delay: 0s;
  }
}
/* fade left */
.public-page .u-fade-type-left {
  transform: translateX(50px);
  opacity: 0;
}
.public-page .u-fade-type-left.is-active {
  transition: 1.6s;
  transform: translateX(0);
  opacity: 1;
}
.public-page .is-active .u-fade-type-left {
  transition: 1.6s;
  transform: translateX(0);
  opacity: 1;
}
.public-page .is-active .u-fade-type-left:nth-child(2) {
  transition-delay: 1s;
}
.public-page .is-active .u-fade-type-left:nth-child(3) {
  transition-delay: 2s;
}
.public-page .is-active .u-fade-type-left:nth-child(4) {
  transition-delay: 3s;
}
.public-page .is-active .u-fade-type-left:nth-child(5) {
  transition-delay: 4s;
}
.public-page .is-active .u-fade-type-left:nth-child(6) {
  transition-delay: 5s;
}
.public-page .is-active .u-fade-type-left:nth-child(7) {
  transition-delay: 6s;
}
.public-page .is-active .u-fade-type-left:nth-child(8) {
  transition-delay: 7s;
}
.public-page .is-active .u-fade-type-left:nth-child(9) {
  transition-delay: 8s;
}
@media screen and (max-width: 1023px) {
  .public-page .is-active .u-fade-type-left {
    transition-delay: 0s;
  }
}
/* fade left  単一の場合 */
.public-page .u-fade-type-left1 {
  transform: translateX(50px);
  opacity: 0;
}
.public-page .u-fade-type-left1.is-active {
  transition: 1.6s;
  transform: translateX(0);
  opacity: 1;
}
.public-page .u-fade-type-left2 {
  transform: translateX(50px);
  opacity: 0;
}
.public-page .u-fade-type-left2.is-active {
  transition: 1.6s;
  transform: translateX(0);
  opacity: 1;
  transition-delay: .4s;
}
.public-page .u-fade-type-left3 {
  transform: translateX(50px);
  opacity: 0;
}
.public-page .u-fade-type-left3.is-active {
  transition: 1.6s;
  transform: translateX(0);
  opacity: 1;
  transition-delay: .8s;
}
.public-page .u-fade-type-left4 {
  transform: translateX(50px);
  opacity: 0;
}
.public-page .u-fade-type-left4.is-active {
  transition: 1.6s;
  transform: translateX(0);
  opacity: 1;
  transition-delay: 1.2s;
}
.public-page .u-fade-type-left5 {
  transform: translateX(50px);
  opacity: 0;
}
.public-page .u-fade-type-left5.is-active {
  transition: 1.6s;
  transform: translateX(0);
  opacity: 1;
  transition-delay: 1.6s;
}
.public-page .u-fade-type-left6 {
  transform: translateX(50px);
  opacity: 0;
}
.public-page .u-fade-type-left6.is-active {
  transition: 1.6s;
  transform: translateX(0);
  opacity: 1;
  transition-delay: 2s;
}
@media screen and (max-width: 1023px) {
  .public-page .u-fade-type-left2.is-active {
    transition-delay: 0s;
  }
  .public-page .u-fade-type-left3.is-active {
    transition-delay: 0s;
  }
  .public-page .u-fade-type-left4.is-active {
    transition-delay: 0s;
  }
  .public-page .u-fade-type-left5.is-active {
    transition-delay: 0s;
  }
  .public-page .u-fade-type-left6.is-active {
    transition-delay: 0s;
  }
}
/* fade right */
.public-page .u-fade-type-right {
  transform: translateX(-50px);
  opacity: 0;
}
.public-page .u-fade-type-right.is-active {
  transition: 1.6s;
  transform: translateX(0);
  opacity: 1;
}
.public-page .is-active .u-fade-type-right {
  transition: 1.6s;
  transform: translateX(0);
  opacity: 1;
}
.public-page .is-active .u-fade-type-right:nth-child(2) {
  transition-delay: 1s;
}
.public-page .is-active .u-fade-type-right:nth-child(3) {
  transition-delay: 2s;
}
.public-page .is-active .u-fade-type-right:nth-child(4) {
  transition-delay: 3s;
}
.public-page .is-active .u-fade-type-right:nth-child(5) {
  transition-delay: 4s;
}
.public-page .is-active .u-fade-type-right:nth-child(6) {
  transition-delay: 5s;
}
.public-page .is-active .u-fade-type-right:nth-child(7) {
  transition-delay: 6s;
}
.public-page .is-active .u-fade-type-right:nth-child(8) {
  transition-delay: 7s;
}
.public-page .is-active .u-fade-type-right:nth-child(9) {
  transition-delay: 8s;
}
@media screen and (max-width: 1023px) {
  .public-page .is-active .u-fade-type-right {
    transition-delay: 0s;
  }
}
/* fade right  単一の場合 */
.public-page .u-fade-type-right1 {
  transform: translateX(-50px);
  opacity: 0;
}
.public-page .u-fade-type-right1.is-active {
  transition: 1.6s;
  transform: translateX(0);
  opacity: 1;
}
.public-page .u-fade-type-right2 {
  transform: translateX(-50px);
  opacity: 0;
}
.public-page .u-fade-type-right2.is-active {
  transition: 1.6s;
  transform: translateX(0);
  opacity: 1;
  transition-delay: .4s;
}
.public-page .u-fade-type-right3 {
  transform: translateX(-50px);
  opacity: 0;
}
.public-page .u-fade-type-right3.is-active {
  transition: 1.6s;
  transform: translateX(0);
  opacity: 1;
  transition-delay: .8s;
}
.public-page .u-fade-type-right4 {
  transform: translateX(-50px);
  opacity: 0;
}
.public-page .u-fade-type-right4.is-active {
  transition: 1.6s;
  transform: translateX(0);
  opacity: 1;
  transition-delay: 1.2s;
}
.public-page .u-fade-type-right5 {
  transform: translateX(-50px);
  opacity: 0;
}
.public-page .u-fade-type-right5.is-active {
  transition: 1.6s;
  transform: translateX(0);
  opacity: 1;
  transition-delay: 1.6s;
}
.public-page .u-fade-type-right6 {
  transform: translateX(-50px);
  opacity: 0;
}
.public-page .u-fade-type-right6.is-active {
  transition: 1.6s;
  transform: translateX(0);
  opacity: 1;
  transition-delay: 2s;
}
@media screen and (max-width: 1023px) {
  .public-page .u-fade-type-right2.is-active {
    transition-delay: 0s;
  }
  .public-page .u-fade-type-right3.is-active {
    transition-delay: 0s;
  }
  .public-page .u-fade-type-right4.is-active {
    transition-delay: 0s;
  }
  .public-page .u-fade-type-right5.is-active {
    transition-delay: 0s;
  }
  .public-page .u-fade-type-right6.is-active {
    transition-delay: 0s;
  }
}
/* fade 画像の場合 一番最初の画像にサイズを持たせないと高さ０になるよ */
.js-scroll-trigger {
  position: relative;
}
.js-scroll-trigger img.u-fade-type-up {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 0;
}
.js-scroll-trigger img.u-fade-type-down {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 0;
}
.js-scroll-trigger img.u-fade-type-left {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 0;
}
.js-scroll-trigger img.u-fade-type-right {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 0;
}
/************************************
** アニメーション 文字アンダーライン
************************************/
/* アニメーション前のスタイル */
.marker-under {
  display: inline;
  position: relative;
  background-image: linear-gradient(90deg, var(--gsss-yellow), var(--gsss-yellow));
  /* 単色の場合は同じ色、グラデーションの場合は別々の色 */
  background-repeat: no-repeat;
  background-position: bottom left;
  background-size: 0 20%;
  /* '30%'の部分にマーカーの太さを記入 */
  transition: all 2s ease-in-out;
  /* マーカーを引く速度を調整 */
  font-weight: bold;
  /* ついでに太字にしたい場合 */
}
/* アニメーション発火時 */
.marker-under.inview {
  background-size: 100% 20%;
  /* '%'の部分は上で設定した太さに合わせる */
}
/************************************
** アニメーション 文字を左から表示する
************************************/
.text-fadein {
  margin-bottom: 1.8em;
}
.text-fadein span {
  display: inline-block;
  position: relative;
}
.text-fadein span:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: #ffffff;
  -webkit-transition: all 1s linear;
  -o-transition: all 1s linear;
  transition: all 1s linear;
}
.text-fadein.active span:before {
  width: 0%;
}
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px) {
  /*必要ならばここにコードを書く*/
}
/*834px以下*/
@media screen and (max-width: 834px) {
  /*必要ならばここにコードを書く*/
}
/*480px以下*/
@media screen and (max-width: 480px) {
  /*必要ならばここにコードを書く*/
}