ホームページのCSS

@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
*/
/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

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

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

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

/************************************************************************
** Cocoon CSS
** 基本設定
************************************************************************/
/*必要ならばここにコードを書く*/
:root {
	--gsss-color-shiro: #ffffff;
	--gsss-color-kuro: #333333;
	--gsss-color-haiiro: #bbbbbb;
	
	--gsss-color-red: #B00000;
	--gsss-color-blue: #223670;
	--gsss-color-green: #006036;
	--gsss-color-yellow: #FFD700;
	--webya-color-cyan: #00bcd4;
	--webya-color-magenta: #ef349a;
	--webya-color-yellow: #ffcc00;
	
	--gsss-color-main1: #444;
	--gsss-color-main1usui: #999;

}

a{
	text-decoration: none;
	text-decoration-line： none;
}

/*ロゴが長体にならないようにする処理*/
.logo img{
	width:auto;
	max-height:100px;
}
/*1023px以下*/
@media screen and (max-width: 1023px){
	.logo img{
		width:auto;
		max-height:60px;
	}
}

/*配置*/
.center{text-align:center;margin:0 auto;}
.center a{text-align:center;margin:0 auto;}
.center img{text-align:center;margin:0 auto;}

/*デフォルトの文字設定の調整*/
strong{color:var(--gsss-color-red);}
em{color:var(--gsss-color-blue);}
.red{color:var(--gsss-color-red);}
.bold-red{color:var(--gsss-color-red);}
.blue{color:var(--gsss-color-blue);}
.bold-blue{color:var(--gsss-color-blue);}
.green{color:var(--gsss-color-green);}
.bold-green{color:var(--gsss-color-green);}
.text_small{font-size:80%;}

/*ページ内リンクスムーズスクロール*/
html{scroll-behavior:smooth;}

/*パソコンのみスマホのみ*/
.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;}
}

/*モバイルユーザビリティの問題が検出されたとき*/
/*1023px以下*/
@media screen and (max-width: 1023px){
	/*モバイルユーザビリティの問題が検出されたとき*/
	.nt-warning{font-size:16px !important;line-height:1.2em !important;}
	.date-tags{font-size:16px !important;line-height:1.2em !important;}
	.btn-l{font-size:16px !important;line-height:1.2em !important;}
	.entry-category, .post-date, .post-update, .post-author, .amp-back{font-size:16px !important;line-height:1.2em !important;}

.pc_only{display:none !important;}
	.sp_only{display:block !important;}
}

/************************************
** Cocoon CSS
** フッターメニュー リンクデザイン
************************************/
.navi-footer-in a{}
.navi-footer-in a:hover{
	background-color: #f0f0f0;
	color: #333333 !important;
}
/************************************
** Cocoon CSS
** ラベルボックスに枠線が入ってしまう現象
************************************/
.label-box{border:0;}
.tab-caption-box{border:0;}

/************************************
** Cocoon CSS
** モバイルフッターボタン
************************************/
.mobile-footer-menu-buttons .navi-menu-button:nth-child(1){background-color:var(--primary-color);color:#FFF;font-weight:bold;}
.mobile-footer-menu-buttons .navi-menu-button:nth-child(1) .navi-menu-content{background-color:#fff;color:#000;font-weight:normal;}
.mobile-footer-menu-buttons .sidebar-menu-button{background-color:var(--primary-color);color:#FFF;font-weight:bold;}
.mobile-footer-menu-buttons .sidebar-menu-button .sidebar-menu-content{background-color:#fff;color:#000;font-weight:normal;}
.mobile-footer-menu-buttons .navi-menu-button:nth-child(2){background-color:var(--secondary-color);color:#FFF;font-weight:bold;}
.mobile-footer-menu-buttons .navi-menu-button:nth-child(2) .custom-menu-icon{font-weight:bold;color:#FFF;}
.mobile-footer-menu-buttons .navi-menu-button:nth-child(2) .custom-menu-icon::after {content:"";}
.mobile-footer-menu-buttons .navi-menu-button:nth-child(2) .menu-caption{font-weight:bold;color:#FFF;}

/************************************
** Cocoon CSS
** 著者ボックス
************************************/
.author-box .author-widget-name{font-weight:bold;}
.author-box .author-name{}
.author-box .author-description{font-size:90%;font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;}
@media screen and (max-width: 1023px){.author-box{padding:1em 0.5em;}}

/************************************
** Cocoon CSS
** メタスライダーマージン調整
************************************/
.metaslider,
.slides{
	overflow: hidden;
}
.btn-menu::before{
	margin-right: 0;
}

/************************************
** Cocoon CSS
** トグル アコーディオン
************************************/
.entry-content{}
.toggle-button{
	background-color: #fff;
	border: 1px solid #eee !important;
	font-weight: bold;
	color:#000;
}
.toggle-button:hover{
	background-color: #00bcd4;
	color:#fff;
}
.toggle-button::before{
	color:#00bcd4;
	opacity:1;
}
.toggle-button:hover:before {
	color:#fff;
	opacity:1;
}
.toggle-content{
	background-color: #fff;
	border: 1px solid #eee !important;
}

/************************************
** gsss CSS
** 追従メニューにロゴを表示しない
************************************/
#header a{color:#000;text-decoration:none;}
#header a:hover{color:#000;text-decoration:none;}
/* 追従メニューにロゴを表示しない */
.fixed-header{
	background-color: #ffffff;
	color: #000000;
}
/* 追従メニューの色 */
.menu-header{
	background-color: #ffffff;
	color: #000000;
}
.navi-in > ul.menu-header{
	margin-top: 0;margin-bottom: 0;margin-right: calc(50% - 50vw);margin-left: calc(50% - 50vw);
	border-top:4px solid #fff;border-bottom:4px solid #fff;
}
.navi-in > ul li a:hover{background: #FFCC00;color: white !important;}

/* ロゴ大きくしたい */
.header-container-in.hlt-top-menu .logo-header img{max-height:100px !important;}
.header-container-in.hlt-top-menu .logo-header{max-height:100px !important;}

/************************************
** gsss CSS
** フォームのデザイン
************************************/
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;}

/************************************
** gsss CSS
** テーブルのデザイン
************************************/
.table{
	font-size:0.9em;
	border-collapse: collapse;
	border-spacing: 0;
}
.table .tr{
	display: table;
	width: 100%;
	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: 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;
}

/************************************
** gsss CSS
** 見出し
************************************/
.article h2{
	font-size: 2.4em;
	font-weight: 700;
	letter-spacing: .04em;
	line-height: 1.3;
	padding:0.7em;
	margin:1.5em 0 1.5em 0;
	background-color:#f5f6f7;
	border:0;
}
@media screen and (max-width:768px){
	.article h2{}
}
.article h3{
	font-size: 2.2em;
	font-weight: 700;
	letter-spacing: .04em;
	line-height: 1.3;
	padding:0.5em;
	margin:0 0 1em 0;
	background-color:#fff;
	border: 0;
	border-bottom: 5px solid #f5f6f7;
}
@media screen and (max-width:768px){
	.article h3{}
}
.article h4{
	font-size: 1.8em;
	font-weight: 700;
	letter-spacing: .04em;
	line-height: 1.3;
	padding:0.5em;
	margin:0 0 1em 0;
	background-color:#fff;
	border: 0;
	border-left: 10px solid #f5f6f7;
}
@media screen and (max-width:768px){
	.article h4{}
}
.article h5{
	font-size: 1.8em;
	font-weight: 700;
	letter-spacing: .04em;
	line-height: 1.3;
	padding:0.5em;
	margin:0 0 1em 0;
	background-color:#fff;
	border:0;
}
@media screen and (max-width:768px){
	.article h5{}
}
.article h6{
	font-size: 1.8em;
	font-weight: 700;
	letter-spacing: .04em;
	line-height: 1.3;
	padding:0.5em;
	margin:0 0 1em 0;
	background-color:#fff;
	border:0;
}
@media screen and (max-width:768px){
	.article h6{}
}

/************************************
** gsss CSS
** LPランディングページ横幅いっぱい
************************************/
#content{
	overflow: hidden;
}
.editor-styles-wrapper .block-editor-block-list__block.lp_box{
	width: 100% !important;
	margin: 1em auto !important;
	padding: 1em 0 !important;
	border:3px dotted #ccc !important;
}
.lp_box{
	position: relative;
	margin: 0 calc((100% - 100vw) / 2) 0em calc((100% - 100vw) / 2)  !important;
	padding: 0 calc(50vw - 50% ) 0 calc(50vw - 50% ) !important;
	width: 100vw;
	overflow: hidden;
	box-sizing:border-box;
	border:0;
}
/*1023px以下*/
@media screen and (max-width: 1023px){
	.lp_box{
		margin: 0 calc((100% - 100vw) / 2) 0em calc((100% - 100vw) / 2) !important;
		padding: 0 calc(50vw - 50% ) 0 calc(50vw - 50% ) !important;
		width: 100vw;
		overflow: hidden;
		box-sizing:border-box;
		border:0 !important;
		border-radius: 0 !important;
	}
}
.lp_box_inner_topbottom_m{
	margin: 30px 0 30px 0 !important;
	overflow: hidden;
	box-sizing:border-box;
	border:0;
}
.lp_box_inner_leftright_m{
	margin: 0 10% 0 10% !important;
	overflow: hidden;
	box-sizing:border-box;
	border:0;
}

/*LPの見出し*/
.lp_box .wp-block-cocoon-blocks-button-1{
	margin: 5em 0;
}

/*バックグラウンド画像指定*/
.lp_bg{
	background-position: top center;
	background-size: cover;
	background-image: url(https://homepage.gsss.pro/wp-content/uploads/2024/02/d8273e450495cd75b52f427f2e8475bb.png);
}
.lp_bg2{
	background-position: top center;
	background-size: cover;
	background-image: url(https://homepage.gsss.pro/wp-content/uploads/2024/02/d8273e450495cd75b52f427f2e8475bb-2.png);
}

/*バックグラウンドダッシュ指定*/
.lp_dash{
	position: relative;
	z-index: 1100;
}
.lp_dash figure img{
	position: relative;
	z-index: 2000;
}
.lp_dash::before {
	z-index: 1200;
	content: " ";
	display:block;
	position: absolute;
	left: 0px;
	top: 0px;
	
	background-position: top center;
	background-repeat: no-repeat;
	background-size: 100% auto;

width:100%;height:100%;
	pointer-events: none;
	background: #fff;
	opacity: 0.5;
}
.lp_dash::after {
	z-index: 1300;
	content: " ";
	display:block;
	position: absolute;
	left: 0px;
	top: 0px;

background-position: top center;
	background-repeat: repeat;

width:100%;height:100%;
	pointer-events: none;
	background-image: url(https://tateuri.kensetu.pro/wp-content/uploads/2024/02/dash.png);
	opacity: 0.3;
}

/************************************
** gsss CSS
** アニメーション フェードインなど
************************************/
/*  スマホ描画幅処理 */
#content{overflow: hidden;}

/* fade up 複数の場合*/
.page .u-fade-type-up{transform: translateY(50px);opacity: 0;}
.page .u-fade-type-up.is-active{transition: .6s;transform: translateY(0);opacity: 1;}
.page .is-active .u-fade-type-up{transition: .6s;transform: translateY(0);opacity: 1;}
.page .is-active .u-fade-type-up:nth-child(2){transition-delay: .4s;}
.page .is-active .u-fade-type-up:nth-child(3){transition-delay: .8s;}
.page .is-active .u-fade-type-up:nth-child(4){transition-delay: 1.2s;}
.page .is-active .u-fade-type-up:nth-child(5){transition-delay: 1.6s;}
.page .is-active .u-fade-type-up:nth-child(6){transition-delay: 2s;}
.page .is-active .u-fade-type-up:nth-child(7){transition-delay: 2.4s;}
.page .is-active .u-fade-type-up:nth-child(8){transition-delay: 2.8s;}
.page .is-active .u-fade-type-up:nth-child(9){transition-delay: 3.2s;}
@media screen and (max-width: 1023px) {
	.page .is-active .u-fade-type-up{transition-delay:0s;}
}

/* fade up  単一の場合 */
.page .u-fade-type-up1{transform: translateY(50px);opacity: 0;}
.page .u-fade-type-up1.is-active{transition: .6s;transform: translateY(0);opacity: 1;}
.page .u-fade-type-up2{transform: translateY(50px);opacity: 0;}
.page .u-fade-type-up2.is-active{transition: .6s;transform: translateY(0);opacity: 1;transition-delay: .4s;}
.page .u-fade-type-up3{transform: translateY(50px);opacity: 0;}
.page .u-fade-type-up3.is-active{transition: .6s;transform: translateY(0);opacity: 1;transition-delay: .8s;}
.page .u-fade-type-up4{transform: translateY(50px);opacity: 0;}
.page .u-fade-type-up4.is-active{transition: .6s;transform: translateY(0);opacity: 1;transition-delay: 1.2s;}
.page .u-fade-type-up5{transform: translateY(50px);opacity: 0;}
.page .u-fade-type-up5.is-active{transition: .6s;transform: translateY(0);opacity: 1;transition-delay: 1.6s;}
.page .u-fade-type-up6{transform: translateY(50px);opacity: 0;}
.page .u-fade-type-up6.is-active{transition: .6s;transform: translateY(0);opacity: 1;transition-delay: 2s;}
@media screen and (max-width: 1023px) {
	.page .u-fade-type-up2.is-active{transition-delay:0s;}
	.page .u-fade-type-up3.is-active{transition-delay:0s;}
	.page .u-fade-type-up4.is-active{transition-delay:0s;}
	.page .u-fade-type-up5.is-active{transition-delay:0s;}
	.page .u-fade-type-up6.is-active{transition-delay:0s;}
}

/* fade down 複数の場合*/
.page .u-fade-type-down{transform: translateY(-50px);opacity: 0;}
.page .u-fade-type-down.is-active{transition: .6s;transform: translateY(0);opacity: 1;}
.page .is-active .u-fade-type-down{transition: .6s;transform: translateY(0);opacity: 1;}
.page .is-active .u-fade-type-down:nth-child(2){transition-delay: .4s;}
.page .is-active .u-fade-type-down:nth-child(3){transition-delay: .8s;}
.page .is-active .u-fade-type-down:nth-child(4){transition-delay: 1.2s;}
.page .is-active .u-fade-type-down:nth-child(5){transition-delay: 1.6s;}
.page .is-active .u-fade-type-down:nth-child(6){transition-delay: 2s;}
.page .is-active .u-fade-type-down:nth-child(7){transition-delay: 2.4s;}
.page .is-active .u-fade-type-down:nth-child(8){transition-delay: 2.8s;}
.page .is-active .u-fade-type-down:nth-child(9){transition-delay: 3.2s;}
@media screen and (max-width: 1023px) {
	.page .is-active .u-fade-type-down{transition-delay:0s;}
}

/* fade down  単一の場合 */
.page .u-fade-type-down1{transform: translateY(-50px);opacity: 0;}
.page .u-fade-type-down1.is-active{transition: .6s;transform: translateY(0);opacity: 1;}
.page .u-fade-type-down2{transform: translateY(-50px);opacity: 0;}
.page .u-fade-type-down2.is-active{transition: .6s;transform: translateY(0);opacity: 1;transition-delay: .4s;}
.page .u-fade-type-down3{transform: translateY(-50px);opacity: 0;}
.page .u-fade-type-down3.is-active{transition: .6s;transform: translateY(0);opacity: 1;transition-delay: .8s;}
.page .u-fade-type-down4{transform: translateY(-50px);opacity: 0;}
.page .u-fade-type-down4.is-active{transition: .6s;transform: translateY(0);opacity: 1;transition-delay: 1.2s;}
.page .u-fade-type-down5{transform: translateY(-50px);opacity: 0;}
.page .u-fade-type-down5.is-active{transition: .6s;transform: translateY(0);opacity: 1;transition-delay: 1.6s;}
.page .u-fade-type-down6{transform: translateY(-50px);opacity: 0;}
.page .u-fade-type-down6.is-active{transition: .6s;transform: translateY(0);opacity: 1;transition-delay: 2s;}
@media screen and (max-width: 1023px) {
	.page .u-fade-type-down2.is-active{transition-delay:0s;}
	.page .u-fade-type-down3.is-active{transition-delay:0s;}
	.page .u-fade-type-down4.is-active{transition-delay:0s;}
	.page .u-fade-type-down5.is-active{transition-delay:0s;}
	.page .u-fade-type-down6.is-active{transition-delay:0s;}
}

/* fade left */
.page .u-fade-type-left{transform: translateX(50px);opacity: 0;}
.page .u-fade-type-left.is-active{transition: .6s;transform: translateX(0);opacity: 1;}
.page .is-active .u-fade-type-left{transition: .6s;transform: translateX(0);opacity: 1;}
.page .is-active .u-fade-type-left:nth-child(2){transition-delay: .4s;}
.page .is-active .u-fade-type-left:nth-child(3){transition-delay: .8s;}
.page .is-active .u-fade-type-left:nth-child(4){transition-delay: 1.2s;}
.page .is-active .u-fade-type-left:nth-child(5){transition-delay: 1.6s;}
.page .is-active .u-fade-type-left:nth-child(6){transition-delay: 2s;}
.page .is-active .u-fade-type-left:nth-child(7){transition-delay: 2.4s;}
.page .is-active .u-fade-type-left:nth-child(8){transition-delay: 2.8s;}
.page .is-active .u-fade-type-left:nth-child(9){transition-delay: 3.2s;}
@media screen and (max-width: 1023px) {
	.page .is-active .u-fade-type-left{transition-delay:0s;}
}

/* fade left  単一の場合 */
.page .u-fade-type-left1{transform: translateX(50px);opacity: 0;}
.page .u-fade-type-left1.is-active{transition: .6s;transform: translateX(0);opacity: 1;}
.page .u-fade-type-left2{transform: translateX(50px);opacity: 0;}
.page .u-fade-type-left2.is-active{transition: .6s;transform: translateX(0);opacity: 1;transition-delay: .4s;}
.page .u-fade-type-left3{transform: translateX(50px);opacity: 0;}
.page .u-fade-type-left3.is-active{transition: .6s;transform: translateX(0);opacity: 1;transition-delay: .8s;}
.page .u-fade-type-left4{transform: translateX(50px);opacity: 0;}
.page .u-fade-type-left4.is-active{transition: .6s;transform: translateX(0);opacity: 1;transition-delay: 1.2s;}
.page .u-fade-type-left5{transform: translateX(50px);opacity: 0;}
.page .u-fade-type-left5.is-active{transition: .6s;transform: translateX(0);opacity: 1;transition-delay: 1.6s;}
.page .u-fade-type-left6{transform: translateX(50px);opacity: 0;}
.page .u-fade-type-left6.is-active{transition: .6s;transform: translateX(0);opacity: 1;transition-delay: 2s;}
@media screen and (max-width: 1023px) {
	.page .u-fade-type-left2.is-active{transition-delay:0s;}
	.page .u-fade-type-left3.is-active{transition-delay:0s;}
	.page .u-fade-type-left4.is-active{transition-delay:0s;}
	.page .u-fade-type-left5.is-active{transition-delay:0s;}
	.page .u-fade-type-left6.is-active{transition-delay:0s;}
}

/* fade right */
.page .u-fade-type-right{transform: translateX(-50px);opacity: 0;}
.page .u-fade-type-right.is-active{transition: .6s;transform: translateX(0);opacity: 1;}
.page .is-active .u-fade-type-right{transition: .6s;transform: translateX(0);opacity: 1;}
.page .is-active .u-fade-type-right:nth-child(2){transition-delay: .4s;}
.page .is-active .u-fade-type-right:nth-child(3){transition-delay: .8s;}
.page .is-active .u-fade-type-right:nth-child(4){transition-delay: 1.2s;}
.page .is-active .u-fade-type-right:nth-child(5){transition-delay: 1.6s;}
.page .is-active .u-fade-type-right:nth-child(6){transition-delay: 2s;}
.page .is-active .u-fade-type-right:nth-child(7){transition-delay: 2.4s;}
.page .is-active .u-fade-type-right:nth-child(8){transition-delay: 2.8s;}
.page .is-active .u-fade-type-right:nth-child(9){transition-delay: 3.2s;}
@media screen and (max-width: 1023px) {
	.page .is-active .u-fade-type-right{transition-delay:0s;}
}

/* fade right  単一の場合 */
.page .u-fade-type-right1{transform: translateX(-50px);opacity: 0;}
.page .u-fade-type-right1.is-active{transition: .6s;transform: translateX(0);opacity: 1;}
.page .u-fade-type-right2{transform: translateX(-50px);opacity: 0;}
.page .u-fade-type-right2.is-active{transition: .6s;transform: translateX(0);opacity: 1;transition-delay: .4s;}
.page .u-fade-type-right3{transform: translateX(-50px);opacity: 0;}
.page .u-fade-type-right3.is-active{transition: .6s;transform: translateX(0);opacity: 1;transition-delay: .8s;}
.page .u-fade-type-right4{transform: translateX(-50px);opacity: 0;}
.page .u-fade-type-right4.is-active{transition: .6s;transform: translateX(0);opacity: 1;transition-delay: 1.2s;}
.page .u-fade-type-right5{transform: translateX(-50px);opacity: 0;}
.page .u-fade-type-right5.is-active{transition: .6s;transform: translateX(0);opacity: 1;transition-delay: 1.6s;}
.page .u-fade-type-right6{transform: translateX(-50px);opacity: 0;}
.page .u-fade-type-right6.is-active{transition: .6s;transform: translateX(0);opacity: 1;transition-delay: 2s;}
@media screen and (max-width: 1023px) {
	.page .u-fade-type-right2.is-active{transition-delay:0s;}
	.page .u-fade-type-right3.is-active{transition-delay:0s;}
	.page .u-fade-type-right4.is-active{transition-delay:0s;}
	.page .u-fade-type-right5.is-active{transition-delay:0s;}
	.page .u-fade-type-right6.is-active{transition-delay:0s;}
}

/* fade 画像の場合 */
.js-scroll-trigger {position:relative;}
.js-scroll-trigger img.u-fade-type-up:nth-child(1){position:static;top:0;right:0;bottom:0;left:0;margin:0;}
.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:nth-child(1){position:static;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:nth-child(1){position:static;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:nth-child(1){position:static;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;}

/* fade 画像のキャプション */
.page .u-fade-type-up-imgcaption{position:absolute;top:220px;left:0px;padding:24px;}
@media screen and (max-width: 1023px) {.page .u-fade-type-up-imgcaption{position:absolute;top:110px;left:0px;padding:12px;}}

/************************************
** gsss CSS
** アニメーション 文字に左からアンダーラインを引く
************************************/
/* アニメーション前のスタイル */
.marker-under {
	display: inline;
	position: relative;
	background-image: linear-gradient(90deg, #ffff66, #ffff66); /* 単色の場合は同じ色、グラデーションの場合は別々の色 */
	background-repeat: no-repeat;
	background-position: bottom left;
	background-size: 0 30%; /* '30%'の部分にマーカーの太さを記入 */
	transition: all 2s ease-in-out; /* マーカーを引く速度を調整 */
	font-weight: bold; /* ついでに太字にしたい場合 */
}
/* アニメーション発火時 */
.marker-under.inview {
	background-size: 100% 30%; /* '30%'の部分は上で設定した太さに合わせる */
}

/************************************
** gsss CSS
** アニメーション 文字を左から表示する
************************************/
.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%;
}

/************************************
** gsss CSS
** テキストデザイン
************************************/
div.block1_1{background-color:#f7fcfe;margin:0;padding:1rem; }
div.block1_2{background-color:#fff;margin:0;padding:1rem; }
p.font_ll{font-size: 8vw;line-height:100%;color:#000;letter-spacing:0;font-weight:bold;margin:0 !important;padding:0 !important;font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;}
@media screen and (max-width: 1023px){p.font_ll{font-size: 24vw;}}
p.font_l{font-size: 4vw;line-height:100%;color:#000;letter-spacing:0;font-weight:bold;margin:0 !important;padding:0 !important;font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;}
@media screen and (max-width: 1023px){p.font_l{font-size: 12vw;}}
p.font_m{font-size: 2vw;line-height:140%;color:#000;letter-spacing:0.2em;font-weight:bold;margin:0 !important;padding:0 !important;font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;}
@media screen and (max-width: 1023px){p.font_m{font-size: 6vw;line-height:160%;}}
p.font_ss{font-size: 1vw;line-height:200%;color:#999;letter-spacing:0.1em;font-weight:bold;margin:0 !important;padding:0 !important;font-family: "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif;}
@media screen and (max-width: 1023px){p.font_ss{font-size: 3.2vw;}}

/************************************
** gsss CSS
** 個別テーブルのデザイン
************************************/
/*縦横に見出し*/
.table_tateyoko table{
	margin:0 auto;
	width:100% !important;
}
.table_tateyoko table tr td{
	border: 1px solid var(--gsss-color-haiiro);
}
.table_tateyoko table tr:first-child{
	background-color: var(--gsss-color-main1usui);
	color:var(--gsss-color-shiro);
	font-weight: bold;
}
.table_tateyoko table tr td:first-child{
	background-color: var(--gsss-color-main1usui);
	color:var(--gsss-color-shiro);
	font-weight: bold;
}
/*縦に見出し*/
.table_tate table{
	margin:0 auto;
	width:100% !important;
}
.table_tate table tr td{
	border: 1px solid var(--gsss-color-haiiro);
}

.table_tate table tr td:first-child{
	background-color: var(--gsss-color-main1usui);
	color:var(--gsss-color-shiro);
	font-weight: bold;
}
/*横に見出し*/
.table_yoko table{
	margin:0 auto;
	width:100% !important;
}
.table_yoko table tr td{
	border: 1px solid var(--gsss-color-haiiro);
}
.table_yoko table tr:first-child{
	background-color: var(--gsss-color-main1usui);
	color:var(--gsss-color-shiro);
	font-weight: bold;
}