@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
*/


/************************************
** 子テーマ用のスタイルを書く
************************************/
:root {
    --gsss-main-color: #d9a404; /* メインカラー */
    --gsss-main-color-dark: #D97904; /* メインカラーのダークバージョン */
    --gsss-main-color-light: #f5e9c2; /* メインカラーのライトバージョン */

    --gsss-sub-color: #D95204; /* サブカラー */
    --gsss-sub-color-dark: #D92B04; /* サブカラーのダークバージョン */
    --gsss-sub-color-light: #D9A404; /* サブカラーのライトバージョン */

    --gsss-kuro: #232626;
    --gsss-shiro: #fff;

    --gsss-red1-color: #FF3E89; /* 赤 */
    --gsss-red2-color: #FFB3C9; /* より明るい赤 */
    --gsss-blue1-color: #1A78C0; /* 青 */
    --gsss-blue2-color: #5AC2CD; /* サブカラーの青 */
    --gsss-green1-color: #6CBF4B; /* 緑 */
    --gsss-green2-color: #8FCD6C; /* ライムグリーン */
    --gsss-yellow1-color: #FFDD44; /* 黄色 */
    --gsss-yellow2-color: #FFF59D; /* より明るい黄色 */

    --gsss-botton-text: #d9a404;
    --gsss-botton-bg: #fff;
    --gsss-botton-border: #d9a404;
    --gsss-botton-hover-text: #D97904;
    --gsss-botton-hover-bg: #f5e9c2;
    --gsss-botton-hover-border: #d9a404;

    --gsss-navi-text: #232626;
    --gsss-navi-bg: #fff;
    --gsss-navi-border: #d9a404;
    --gsss-navi-hover-text: #D97904;
    --gsss-navi-hover-bg: #f5e9c2;
    --gsss-navi-hover-border: #d9a404;
    
    --gsss-text-size: 100%; /* すべてのテキストのデフォルトサイズを％で設定 */
    --gsss-text-size-s: 90%;
    --gsss-text-size-ss: 80%;
    --gsss-text-size-l: 110%;
    --gsss-text-size-ll: 120%;
    
}



/*ページ内リンクをクリックしたときに少し下にスクロールさせる*/
* {
scroll-margin-top: 150px;
}

/*ロゴが長体にならないようにする処理*/
.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;}

/*トップに表示しないようにする処理*/
.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;}


/************************************
** 文字の装飾 アンダーライン
************************************/
.red{color: var(--gsss-red1-color);}
.blue{color: var(--gsss-blue1-color);}
.green{color: var(--gsss-green1-color);}
.bold-red{color: var(--gsss-red1-color);}
.bold-blue{color: var(--gsss-blue1-color);}
.bold-green{color: var(--gsss-green1-color);}
.marker{background: linear-gradient(45deg, var(--gsss-yellow1-color), var(--gsss-yellow2-color), var(--gsss-yellow1-color));}
.marker-red{background: linear-gradient(45deg, var(--gsss-red1-color), var(--gsss-red2-color), var(--gsss-red1-color));}
.marker-blue{background: linear-gradient(45deg, var(--gsss-blue1-color), var(--gsss-blue2-color), var(--gsss-blue1-color));}
.marker-under{}/*jsアンダーライン*/
.marker-under-red{background: linear-gradient(transparent 90%, var(--gsss-red1-color) 90%);font-weight:bold;}
.marker-under-blue{background: linear-gradient(transparent 90%, var(--gsss-blue1-color) 90%);font-weight:bold;}


/************************************
** メモ
************************************/
/* margin-top,-bottomが効かない */
.memo{
border: 1px solid transparent;/* margin-top,-bottomが効かない */
padding: 0.1px;/* margin-top,-bottomが効かない */
overflow: hidden;/* margin-top,-bottomが効かない */
}





/************************************
** 見出し
************************************/
/* 共通のリセットスタイル */
.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: bold;
}
/* 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;
    color: var(--gsss-main-color-dark); /* メインの濃い色 */
    border-bottom: 2px solid var(--gsss-main-color-dark); /* メインの濃い色 */
    padding-bottom: 0.3em;
}
/* h3スタイル */
.article h3 {
    letter-spacing: 1px;
    padding-left: 0.25em;
    font-size: 1.75em;
    color: var(--gsss-main-color); /* メインの濃い色 */
}
/* h4スタイル */
.article h4 {
    letter-spacing: 1px;
    padding-left: 0.5em;
    font-size: 1.5em;
    color: var(--gsss-main-color); /* メインカラー */
}
/* h5スタイル */
.article h5 {
    letter-spacing: 1px;
    padding-left: 0.75em;
    font-size: 1.25em;
}
/* h6スタイル */
.article h6 {
    letter-spacing: 1px;
    padding-left: 1em;
    font-size: 1em;
}
/*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;
	}
}


/************************************
** 見出し
** フロントページのみ、トップページのみ
************************************/
body.front-top-page .article h2{
    position: relative;
    padding: 16px 0 24px;
    text-align: center;
    color: #fff;
    border-color: #3B4552;
    background: #3B4552;
    font-size: 1.2em;
}
body.front-top-page .article h2:after{
    content: "";
    position: absolute;
    right: 0;
    bottom: -20px;
    left: 0;
    width: 0px;
    height: 0px;
    margin: auto;
    border-style: solid;
    border-color: #3B4552 transparent transparent transparent;
    border-width: 20px 100px 0 100px;
}
body.front-top-page .article h3{
    font-weight: bold;
    line-height: 1.4;
    border: 0;
    padding: 0;
    margin-top: 2.4rem !important;]
    border-color: #fff;
    font-size: 1.2em;
    color: #005990;
}


/************************************
** 各セクションのデザイン
************************************/
.public-page .section_box{
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
}
.public-page .section_box .gsss_midashi{
  padding-top: 60px;
  padding-bottom: 60px;
  text-align: center;
  margin-bottom: 1.8em;
}
.public-page .section_box .gsss_midashi .line {
  width: 50px;
  height: 2px;
  background-color: var(--gsss-main-color-light); /* 必要に応じて色を調整 */
  margin: 0 auto 10px;
}
.section_box .gsss_midashi p {
  font-size: 1.2em;
  color: var(--gsss-main-color-light); /* 必要に応じて色を調整 */
  margin-bottom: 10px;
}
.section_box .gsss_midashi h2 {
  all: unset;all: initial;
  display:block;
  text-align:center;
  font-size: 1.5em;
}
.section_box .gsss_main {
  margin: 0;
  font-size: 1em; /* 必要に応じてフォントサイズを調整 */
  color: inherit; /* 親の色を継承 */
}
.section_box .gsss_main h3 {
  all: unset;all: initial;
  display:block;
  margin: 2rem 0 1rem 0;
  font-size: 1.2em;
  color: white; /* 文字色を白に */
  font-weight: bold;
  position: relative;
  background: linear-gradient(to right, var(--gsss-main-color), var(--gsss-main-color-light)); /* 背景をグラデーションに */
  padding: 0.5em; /* パディングを追加して読みやすく */
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%); /* 右上を欠けさせる */
}
.section_box .gsss_main h3::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0; /* アンダーラインの位置を調整 */
  width: 100%;
  height: 3px; /* アンダーラインの太さを調整 */
  background: linear-gradient(to right, var(--gsss-main-color), var(--gsss-main-color-light));
}
.section_box .gsss_main h4 {
  margin: 2rem 0 1rem 0;
  font-size: 1.1em;
  color: #515151; /* 文字色を白に */
  font-weight: bold;
}

.gsss_tbl_gyomu{
	font-size:80%;
}
.gsss_tbl_gyomu table tr td:first-child {
    width: 25%;
}


/* ボタンの色 */
.section_box .gsss_main .btn{
  background-color: var(--gsss-main-color);
  padding: 10px 20px;
  border-radius: 5px;
  color: #fff;
  text-decoration: none;
  font-size: 14px; /* フォントサイズを調整 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  min-width: 150px;
  text-align: center;
}
.section_box .gsss_main .btn:hover {
  background-color: var(--gsss-main-color-light); /* サブカラーに変更 */
}

/* faqボタンの色 */
.section_box .gsss_main .faq-wrap.is-style-square.not-nested-style > .faq > * > .faq-question-label{
  background-color: var(--gsss-main-color-dark); /* サブカラーに変更 */
}
.section_box .gsss_main .faq-wrap.is-style-square.not-nested-style > .faq > * > .faq-answer-label{
  background-color: var(--gsss-sub-color-dark); /* サブカラーに変更 */
}

/* 参加者一覧のテーブルのCSS */
.section_box .gsss_main .faq-wrap.is-style-square.not-nested-style > .faq > * > .faq-answer-label{
  background-color: var(--gsss-sub-color-dark); /* サブカラーに変更 */
}

/* 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;
	}
}


/************************************
** モバイルフッター 電話をかける１つ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
	.mobile-footer-menu-buttons{
		background-color: var(--gsss-main-color-dark); /* 必要に応じて色を調整 */
	}
	.mobile-menu-buttons .menu-icon{
		font-size: 30px;
		color:#fff;
	}
	.mobile-menu-buttons .menu-caption{
		font-size: 20px;
		font-weight:bold;
		color:#fff;
	}
}

/************************************
** カテゴリページ（タイトル目次消し）
************************************/
body.category #archive-title{display:none;}
body.category #toc{display:none;}

/************************************
** 固定ぺージ（タイトル目次消し）
************************************/
.page .article-header{display:none;}


/************************************
** cocoonのフッターメニューの調整
************************************/
#footer {
    background-color: #ffffff; /* 背景色を白に設定 */
    border-top: 1px solid var(--gsss-main-color); /* 上部に1pxのメインカラーのボーダーを設定 */
    color: #000000 !important; /* 文字色を黒に設定 */
}
#footer, #footer a:not(.sns-button), .footer-title{
    color: #000000 !important; /* 文字色を黒に設定 */
}

/************************************
** cocoonの追従上部戻るボタン
************************************/
.go-to-top .go-to-top-button{
    background-color: var(--gsss-main-color);
}



/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
.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;}
}



/************************************
** 画像リンクホバー
************************************/
a img{overflow:hidden;}
a img:hover{
opacity:0.5;
transition:1.3s;
}


/************************************
** flex順番整え
** スマホで見たときにカラム逆にする
************************************/
@media screen and (max-width: 1023px) {
.flex-order-gyaku div:first-child{
order: 2;
}
.flex-order-gyaku div:last-child{
order: 1;
}
}


/************************************
** ++gsss_cocoon++ モバイルのみの調整
************************************/
.header-container-in.hlt-top-menu.hlt-tm-small .logo-header img {
  max-height: 40px;
}

/************************************
** ++gsss_cocoon++ モバイルのみの調整
************************************/
/*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;}
}
/************************************
** ++gsss_cocoon++ ナビメニューコンテンツ（スマホで開いたときの左側のメニュー）
************************************/
.navi-menu-content{
background-image: radial-gradient(circle at 50% 50%, #fff 0%, #fff 25%, #f0f0f0 25%, #f0f0f0 50%);
background-size: 4px 4px; /* ドットの間隔を変更 */
}
.navi-menu-content .navi-menu-close-button{
background-color:#000;
color:#fff;
font-weight:normal;
}
.navi-menu-content ul.menu-drawer{
margin-top: 2em;
}
.navi-menu-content ul.menu-drawer li{
border-bottom:1px solid #000;
}


/************************************
** ++gsss_cocoon++ 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;}
}
@media screen and (max-width: 1023px){.content{margin:0 0.25rem;}}


/**左右横幅いっぱいにするための処理(コンテンツは左右パディングあり)**/
.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;
}
}
/**左右横幅いっぱいにするための処理(コンテンツは左右パディングなし)**/
.public-page .lp_box_full{
margin:0px;padding:0px;
margin-left: calc((100% - 100vw) / 2) !important;
margin-right: calc((100% - 100vw) / 2) !important;
width: 100vw;
overflow: hidden;
border:0;
}
.public-page .lp_box_full > div{
max-width:90vw !important;
min-width:50vw !important;
margin:0 auto;
}
/*1023px以下*/
@media screen and (max-width: 1023px){
.public-page .lp_box_full{
margin-left: calc((100% - 100vw) / 2) !important;
margin-right: calc((100% - 100vw) / 2) !important;
width: 100vw;
overflow: hidden;
border:0;
}
}

/**左右横幅いっぱいにするための処理(コンテンツは上下左右パディングあり)**/
.public-page .lp_box_center____{
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;
padding-top:4em;
padding-bottom:4em;
width: 100%;
overflow: hidden;
border:0;
}
/*1023px以下*/
@media screen and (max-width: 1023px){
.public-page .lp_box_center____{
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
padding-top:2em;
padding-bottom:2em;
width: 100%;
overflow: hidden;
border:0;
}
}






/************************************
** フォームのデザイン
************************************/
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: #bf0000;
border: 1px solid #bf0000;
}
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[name="your_gosyoukai_name"]{width:40%;}
@media screen and (max-width: 1023px){input[name="your_gosyoukai_name"]{width:70%;}}
input[name="your_gosyoukai_tanto"]{width:40%;}
@media screen and (max-width: 1023px){input[name="your_gosyoukai_tanto"]{width:70%;}}
input[name="your_gosyoukai_denwa"]{width:50%;}
@media screen and (max-width: 1023px){input[name="your_gosyoukai_denwa"]{width:80%;}}
input[name="your_gosyoukai_email"]{width:60%;}
@media screen and (max-width: 1023px){input[name="your_gosyoukai_email"]{width:90%;}}

/* フォームオブジェクト */
input[type="submit"] {
    display:block;
    background-color: #B00000;
    color:#fff;
    font-weight:bold;
    text-align:center;
    margin: 1rem auto 0 auto;
    width: 60%;
font-size:1em;
}
input {border: 1px solid #808080 !important;margin:4px 0;}
textarea {border: 1px solid #808080 !important;margin:2px 0;}
input:focus {background-color: #e0ffff;border: 1px solid #000 !important;}
textarea:focus {background-color: #e0ffff;border: 1px solid #000 !important;}
input:focus[type="submit"] {background-color: #0000ff;}



/************************************
** テーブルのデザイン
************************************/
.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: 0.4s;}
.public-page .is-active .u-fade-type-up:nth-child(3){transition-delay: 0.8s;}
.public-page .is-active .u-fade-type-up:nth-child(4){transition-delay: 1.2s;}
.public-page .is-active .u-fade-type-up:nth-child(5){transition-delay: 1.6s;}
.public-page .is-active .u-fade-type-up:nth-child(6){transition-delay: 2s;}
.public-page .is-active .u-fade-type-up:nth-child(7){transition-delay: 2.4s;}
.public-page .is-active .u-fade-type-up:nth-child(8){transition-delay: 2.8s;}
.public-page .is-active .u-fade-type-up:nth-child(9){transition-delay: 3.2s;}
@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: 0.4s;}
.public-page .is-active .u-fade-type-down:nth-child(3){transition-delay: 0.8s;}
.public-page .is-active .u-fade-type-down:nth-child(4){transition-delay: 1.2s;}
.public-page .is-active .u-fade-type-down:nth-child(5){transition-delay: 1.6s;}
.public-page .is-active .u-fade-type-down:nth-child(6){transition-delay: 2s;}
.public-page .is-active .u-fade-type-down:nth-child(7){transition-delay: 2.4s;}
.public-page .is-active .u-fade-type-down:nth-child(8){transition-delay: 2.8s;}
.public-page .is-active .u-fade-type-down:nth-child(9){transition-delay: 3.2s;}
@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: 0.4s;}
.public-page .is-active .u-fade-type-left:nth-child(3){transition-delay: 0.8s;}
.public-page .is-active .u-fade-type-left:nth-child(4){transition-delay: 1.2s;}
.public-page .is-active .u-fade-type-left:nth-child(5){transition-delay: 1.6s;}
.public-page .is-active .u-fade-type-left:nth-child(6){transition-delay: 2s;}
.public-page .is-active .u-fade-type-left:nth-child(7){transition-delay: 2.4s;}
.public-page .is-active .u-fade-type-left:nth-child(8){transition-delay: 2.8s;}
.public-page .is-active .u-fade-type-left:nth-child(9){transition-delay: 3.2s;}
@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: 0.4s;}
.public-page .is-active .u-fade-type-right:nth-child(3){transition-delay: 0.8s;}
.public-page .is-active .u-fade-type-right:nth-child(4){transition-delay: 1.2s;}
.public-page .is-active .u-fade-type-right:nth-child(5){transition-delay: 1.6s;}
.public-page .is-active .u-fade-type-right:nth-child(6){transition-delay: 2s;}
.public-page .is-active .u-fade-type-right:nth-child(7){transition-delay: 2.4s;}
.public-page .is-active .u-fade-type-right:nth-child(8){transition-delay: 2.8s;}
.public-page .is-active .u-fade-type-right:nth-child(9){transition-delay: 3.2s;}
@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-yellow1-color), var(--gsss-yellow1-color)); /* 単色の場合は同じ色、グラデーションの場合は別々の色 */
  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%;
}


   
/************************************
** トグル アコーディオン
************************************/
.toggle-button{
  background-color: #fff;
  border: 1px solid #eee !important;
  font-weight: bold;
  color:#222;
}
.toggle-button:hover{
  border: 1px solid var(--gsss-main-color) !important;
  background-color: #fff;
  color:#222 !important;
}
.toggle-button::before{
  color:var(--gsss-main-color);
  opacity:1;
}
.toggle-button:hover:before {
  color:var(--gsss-main-color);
  opacity:1;
}
.toggle-content{
  background-color: #fff;
  border: 1px solid #eee !important;
}






/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}