/********/
/* 変数 */
/********/
:root {
	/*カスタムカラー*/
	--メイン色: #AB8B65;
	--メイン色の明るい色: #b99e7e;
	--メイン色の影色: #8f714e;
	--メイン色の濃い影色: #6e573c;
	
	--暗い色: #212529;
	--暗い色の明るい色: #32383e;
	--暗い色の影色: #0a0c0d;
	--暗い色の濃い影色: #000;	
	
	--フォント暗い色: #777;
	--フォント明るい色: #FFF;
	--フォント強調色: #212529;
	
	--背景色: #FFF;
	--背景色-少し暗い: #F7F7F7;
	--背景色-暗い: #212529;
	--背景色-最も暗い: #000;
	
	--背景画像を暗くするフィルター色: #212529;

	--線の色: #f1f1f1;
	--暗い色に重ねる暗めの色:#383F48;/*言語バーに利用*/

	--通常影色: rgba(0, 0, 0, 0.3);

	--背景画像を暗くする値: 0.8;

	--入力エラー色:#dc3545;
	--入力完了色:#198754;
}



/************************/
/*サイト全体に適用するもの*/
/************************/
body {
	background-color: var(--背景色);
	color: var(--フォント暗い色);
	font-family: "Poppins", Arial, sans-serif;
	font-size: 14px;
	line-height: 26px;
	margin: 0;
}

h1,h2,h3,h4,h5,h6{color: var(--フォント強調色);letter-spacing:-.05em;margin:0;-webkit-font-smoothing:antialiased;}
h1{font-size:2.6em;font-weight:200;line-height:44px;margin:0 0 32px 0;}
h2{font-size:2.2em;font-weight:300;line-height:42px;margin:0 0 32px 0;}
h3{font-size:1.8em;font-weight:400;line-height:24px;margin:0 0 33px 0;text-transform:uppercase;}
h4{font-size:1.4em;font-weight:600;line-height:27px;margin:0 0 14px 0;}
h5{font-size:1.0em;font-weight:600;line-height:18px;margin:0 0 14px 0;text-transform:uppercase;}
h6{font-size:1.0em;font-weight:400;line-height:18px;margin:0 0 14px 0;}
a{color: var(--メイン色); text-decoration: none;}/*下線非表示*/
a:visited{color:  var(--メイン色);}/*訪問済みリンクは色を変えない*/
a:hover{color:  var(--メイン色);text-decoration: underline;text-underline-offset: 4px;}/*マウスオーバー時に下線表示*/
@media (min-width: 1200px) {.container{max-width: 1140px;}}/*コンテナに最大サイズを適用*/



/************************/
/*ページ全体に適用するもの*/
/************************/
.チュートリアルページ img{border-radius: 0.25rem;}



/********************/
/* bootstrapの上書き */
/********************/
.lead {letter-spacing: -.05em;font-size: 19.2px;font-size: 1.2rem;}
hr.solid {background: rgba(0, 0, 0, 0.06);border: 0;height: 1px;margin: 22px 0;opacity: 1;}
.card {position: relative;border: 1px solid rgba(0, 0, 0, 0.125);}
.card-body {padding: 32px;padding: 2rem;}
.badge{padding: 1.5em 2em;font-size: 90%;border-radius: 0.25rem 0.25rem 0 0;}
input.error{
	border-color: var(--入力エラー色);
    padding-right: calc(1.5em + 0.75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}
label.error{color:  var(--入力エラー色);}
.valid{
	border-color:  var(--入力完了色);
    padding-right: calc(1.5em + 0.75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

/************/
/* 色まわり */
/************/
.背景最も明るい{background-color: var(--背景色) !important;}/*bg-light*/
.背景少し暗い{background-color: var(--背景色-少し暗い)!important;}
.背景暗い{background-color: var(--背景色-暗い)!important;}
.背景最も暗い{background-color: var(--背景色-最も暗い) !important;}
.背景メイン色{background-color: var(--メイン色)!important;}/*bg-primary bg-color-primary*/

.線最も明るい{border-color: var(--背景色) !important;}
.線少し暗い{border-color: var(--背景色-少し暗い)!important;}
.線暗い{border-color: var(--背景色-暗い)!important;}
.線最も暗い{border-color: var(--背景色-最も暗い) !important;}
.線メイン色{border-color: var(--メイン色)!important;}

.フォントメイン色{color: var(--メイン色)!important;}/*text-primary*/
.フォントメイン色 a{color: var(--メイン色); text-decoration: none;}/*下線非表示*/
.フォントメイン色 a:visited{color:  var(--メイン色);}/*訪問済みリンクは色を変えない*/
.フォントメイン色 a:hover{color:  var(--メイン色);text-decoration: underline;text-underline-offset: 4px;}/*マウスオーバー時に下線表示*/

.フォント明るい色{color: var(--フォント明るい色)!important;}/*text-color-light*/
.フォント明るい色 a{color: var(--フォント明るい色); text-decoration: none;}/*下線非表示*/
.フォント明るい色 a:visited{color:  var(--フォント明るい色);}/*訪問済みリンクは色を変えない*/
.フォント明るい色 a:hover{color:  var(--フォント明るい色);text-decoration: underline;text-underline-offset: 4px;}/*マウスオーバー時に下線表示*/

.フォント強調色{color: var(--フォント強調色) !important;}/*text-color-dark*/
.フォント強調色 a{color: var(--フォント強調色); text-decoration: none;}/*下線非表示*/
.フォント強調色 a:visited{color:  var(--フォント強調色);}/*訪問済みリンクは色を変えない*/
.フォント強調色 a:hover{color:  var(--フォント強調色);text-decoration: underline;text-underline-offset: 4px;}/*マウスオーバー時に下線表示*/


/**************/
/* 基本クラス */
/**************/

/*<div class="画像を暗くする" style="background-image:url(img/****.webp)"></div>*/
.横フル画面{width: 100%;}
.縦フル画面{height: 100vh;}
.親要素と同じ高さ{height: 100%;}
.画像を暗くする {
	position: relative;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}
.画像を暗くする:before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	background-color: var(--背景画像を暗くするフィルター色);
	opacity: var(--背景画像を暗くする値);
}

.視差背景{
	background-color: transparent;
	background-position: 50% 50%;
	background-repeat: repeat;
	background-attachment: fixed;
	border: 0;
}

.前面表示-1{z-index: -1 !important;} 
.前面表示0{z-index: 0 !important;} 
.前面表示1{z-index: 1000 !important;} 
.前面表示2{z-index: 2000 !important;}
.前面表示3{z-index: 3000 !important;}
.前面表示4{z-index: 4000 !important;}
.前面表示5{z-index: 5000 !important;}
.前面表示6{z-index: 6000 !important;}
.前面表示7{z-index: 7000 !important;}
.前面表示8{z-index: 8000 !important;}
.前面表示9{z-index: 9000 !important;}

.相対位置{position: relative !important;}/*overlay*/
.固定位置{position: fixed !important;}

.カスタムフォントNo1{font-family: 'Playfair Display', sans-serif !important;}/*custom-tertiary-font*/

.強調表示なし{text-transform: none !important;}/*text-transform-none*/
.大文字で表示{text-transform: uppercase;}

.フォントサイズLv1 {font-size: .8em !important;}/*text-1*/
.フォントサイズLv2 {font-size: .9em !important;}/*text-2*/
.フォントサイズLv3 {font-size: 1em !important;}/*text-3*/
.フォントサイズLv4 {font-size: 1.2em !important;}/*text-4 card-title*/
.フォントサイズLv4-5 {font-size: 1.35em !important;}/*text-4-5*/
.フォントサイズLv5 {font-size: 1.50em !important;}/*text-5*/
.フォントサイズLv6 {font-size: 1.80em !important;}/*text-6*/
.フォントサイズLv7 {font-size: 2em !important;}/*text-7*/
.フォントサイズLv8 {font-size: 2.30em !important;}/*text-8*/
.フォントサイズLv9 {font-size: 2.50em !important;}/*text-9*/
.フォントサイズLv10 {font-size: 2.75em !important;}/*text-10*/
.フォントサイズLv11 {font-size: 3em !important;}/*text-11*/
.フォントサイズLv12 {font-size: 3.5em !important;}/*text-12*/
.フォントサイズLv13 {font-size: 4em !important;}/*text-13*/
.フォントサイズLv14 {font-size: 4.5em !important;}/*text-14*/
.フォントサイズLv15 {font-size: 5em !important;}/*text-15*/
.フォントサイズLv16 {font-size: 5.33em !important;}/*text-16*/
.フォントサイズLv17 {font-size: 5.66em !important;}/*text-17*/
.フォントサイズLv18 {font-size: 6em !important;}/*text-18*/
.フォントサイズLv19 {font-size: 6.33em !important;}/*text-19*/
.フォントサイズLv20 {font-size: 6.66em !important;}/*text-20*/


.フォント太さ300, .フォント少し細い{font-weight: 300 !important;}/*font-weight-light*/
.フォント太さ400, .フォント標準の太さ{font-weight: 400 !important;}/*font-weight-normal*/
.フォント太さ500, .フォントほんの少し太い{font-weight: 500 !important;}/*font-weight-medium*/
.フォント太さ600, .フォント少し太い{font-weight: 600 !important;}/*font-weight-semibold*/
.フォント太さ700, .フォント太字{font-weight: 700 !important;}/*font-weight-bold*/
.フォント太さ800, .フォント極太{font-weight: 800 !important;}/*font-weight-extra-bold*/


.字間0{letter-spacing: 0 !important;}/*ls-0*/
.字間-0_05em{letter-spacing:-0.05em;}/*negative-ls-05*/
.字間-1px{letter-spacing:-1px;}/*negative-ls-1*/
.字間-2px{letter-spacing:-2px;}/*negative-ls-2*/
.字間-2_5px{letter-spacing:-2.5px;}/*negative-ls-3*/
.字間1px{letter-spacing:1px!important;}/*positive-ls-1*/
.字間2px{letter-spacing:2px!important;}/*positive-ls-2*/
.字間2_5px{letter-spacing:2.5px!important;}/*positive-ls-3*/


.行間Lv1 {line-height: 1 !important;}/*line-height-1*/
.行間Lv2 {line-height: 1.2 !important;}/*line-height-2*/
.行間Lv3 {line-height: 1.3 !important;}/*line-height-3*/
.行間Lv4 {line-height: 1.4 !important;}/*line-height-4*/
.行間Lv5 {line-height: 1.5 !important;}/*line-height-5*/
.行間Lv6 {line-height: 1.6 !important;}/*line-height-6*/
.行間Lv7 {line-height: 1.7 !important;}/*line-height-7*/
.行間Lv8 {line-height: 1.8 !important;}/*line-height-8*/
.行間Lv9 {line-height: 1.9 !important;}/*line-height-9*/
@media (min-width: 576px) {
.タブレット以上なら行間Lv1 {line-height: 1 !important;}
.タブレット以上なら行間Lv2 {line-height: 1.2 !important;}
.タブレット以上なら行間Lv3 {line-height: 1.3 !important;}
.タブレット以上なら行間Lv4 {line-height: 1.4 !important;}
.タブレット以上なら行間Lv5 {line-height: 1.5 !important;}
.タブレット以上なら行間Lv6 {line-height: 1.6 !important;}
.タブレット以上なら行間Lv7 {line-height: 1.7 !important;}
.タブレット以上なら行間Lv8 {line-height: 1.8 !important;}
.タブレット以上なら行間Lv9 {line-height: 1.9 !important;}
}

.テキストを中央に配置{text-align: center !important;}
.テキストを左に配置{text-align: left !important;}/*text-start*/
.テキストを右に配置{text-align: right !important;}

.子要素を中央に配置{
	display: flex;
    align-items: center!important;
    justify-content: center!important;
    height: 100%!important;
	box-sizing: border-box;
}

.中央配置ボックス{
	display: flex!important;
	flex-direction: column!important;/*コンテンツを縦に並べる*/
	flex-wrap: nowrap!important;/*レスポンシブによる改行配置を禁止*/
	justify-content: center!important;/*横を中央揃え*/
	align-items: center!important;/*縦を中央揃え*/
}

.コンテンツを中央揃え{
	width: 100%;
	text-align: center;
}

.非表示 {display:none;}
.はみ出た部分を非表示{overflow: hidden;}
.下線非表示{text-decoration: none;}/*下線等を消す*/
.下線非表示:hover{text-decoration: none;}
.リスト点非表示{list-style: none;}
.線無し{border:0;}
.横幅制限無し{max-width:none;}

.上下に隙間Lv1 {padding: 12.307px 0;padding: 0.7692307692rem 0;}/*section-height-1*/
.上下に隙間Lv2 {padding: 36.923px 0;padding: 2.3076923077rem 0;}/*section-height-2*/
.上下に隙間Lv3 {padding: 73.846px 0;padding: 4.6153846154rem 0;}/*section-height-3*/
.上下に隙間Lv4 {padding: 110.769px 0;padding: 6.9230769231rem 0;}/*section-height-4*/
.上下に隙間Lv5 {padding: 147.692px 0;padding: 9.2307692308rem 0;}/*section-height-5*/

.下に隙間Lv1 {margin-bottom: 8px;margin-bottom: 0.5rem;}
.下に隙間Lv2 {margin-bottom: 12px;margin-bottom: 0.75rem;}
.下に隙間Lv3 {margin-bottom: 16px;margin-bottom: 1rem;}
.下に隙間Lv4 {margin-bottom: 20px;margin-bottom: 1.25rem;}
.下に隙間Lv5 {margin-bottom: 24px;margin-bottom: 1.5rem;}
.下に隙間Lv6 {margin-bottom: 28px;margin-bottom: 1.75rem;}
.下に隙間Lv7 {margin-bottom: 32px;margin-bottom: 2rem;}
.下に隙間Lv8 {margin-bottom: 36px;margin-bottom: 2.25rem;}
.下に隙間Lv9 {margin-bottom: 40px;margin-bottom: 2.5rem;}
.下に隙間Lv10 {margin-bottom: 44px;margin-bottom: 2.75rem;}
.下に隙間Lv11 {margin-bottom: 48px;margin-bottom: 3rem;}
.下に隙間Lv12 {margin-bottom: 52px;margin-bottom: 3.25rem;}
.下に隙間Lv13 {margin-bottom: 56px;margin-bottom: 3.5rem;}
.下に隙間Lv14 {margin-bottom: 60px;margin-bottom: 3.75rem;}
.下に隙間Lv15 {margin-bottom: 64px;margin-bottom: 4rem;}

.上に隙間Lv1 {margin-top: 8px;margin-top: 0.5rem;}
.上に隙間Lv2 {margin-top: 12px;margin-top: 0.75rem;}
.上に隙間Lv3 {margin-top: 16px;margin-top: 1rem;}
.上に隙間Lv4 {margin-top: 20px;margin-top: 1.25rem;}
.上に隙間Lv5 {margin-top: 24px;margin-top: 1.5rem;}
.上に隙間Lv6 {margin-top: 28px;margin-top: 1.75rem;}
.上に隙間Lv7 {margin-top: 32px;margin-top: 2rem;}
.上に隙間Lv8 {margin-top: 36px;margin-top: 2.25rem;}
.上に隙間Lv9 {margin-top: 40px;margin-top: 2.5rem;}
.上に隙間Lv10 {margin-top: 44px;margin-top: 2.75rem;}
.上に隙間Lv11 {margin-top: 48px;margin-top: 3rem;}
.上に隙間Lv12 {margin-top: 52px;margin-top: 3.25rem;}
.上に隙間Lv13 {margin-top: 56px;margin-top: 3.5rem;}
.上に隙間Lv14 {margin-top: 60px;margin-top: 3.75rem;}
.上に隙間Lv15 {margin-top: 64px;margin-top: 4rem;}

.上下にmargin1px {margin: 1px 0;}
.上下にmargin2px {margin: 2px 0;}
.上下にmargin3px {margin: 3px 0;}
.上下にmargin4px {margin: 4px 0;}
.上下にmargin5px {margin: 5px 0;}
.上下にmargin6px {margin: 6px 0;}
.上下にmargin7px {margin: 7px 0;}
.上下にmargin8px {margin: 8px 0;}
.上下にmargin9px {margin: 9px 0;}
.上下にmargin10px {margin: 10px 0;}
.上下にmargin11px {margin: 11px 0;}
.上下にmargin12px {margin: 12px 0;}
.上下にmargin13px {margin: 13px 0;}
.上下にmargin14px {margin: 14px 0;}
.上下にmargin15px {margin: 15px 0;}
.上下にmargin16px {margin: 16px 0;}
.上下にmargin17px {margin: 17px 0;}
.上下にmargin18px {margin: 18px 0;}
.上下にmargin19px {margin: 19px 0;}
.上下にmargin20px {margin: 20px 0;}
.上下にmargin21px {margin: 21px 0;}
.上下にmargin22px {margin: 22px 0;}
.上下にmargin23px {margin: 23px 0;}
.上下にmargin24px {margin: 24px 0;}
.上下にmargin25px {margin: 25px 0;}

.下部を15px詰める {margin-bottom: -15px !important;}
.下部を20px詰める {margin-bottom: -20px !important;}
.下部を25px詰める {margin-bottom: -25px !important;}
.下部を30px詰める {margin-bottom: -30px !important;}

.高さ1px{height: 1px!important;}
.高さ2px{height: 2px!important;}
.高さ3px{height: 3px!important;}
.高さ4px{height: 4px!important;}
.高さ5px{height: 5px!important;}

.角丸0{border-radius: 0 !important;}
.角丸0_25rem{border-radius: 0.25rem !important;}

.透明度0割{opacity: 0 !important;}/*opacity-0*/
.透明度1割{opacity: 0.1 !important;}/*opacity-1*/
.透明度2割{opacity: 0.2 !important;}/*opacity-2*/
.透明度3割{opacity: 0.3 !important;}/*opacity-3*/
.透明度4割{opacity: 0.4 !important;}/*opacity-4*/
.透明度5割{opacity: 0.5 !important;}/*opacity-5*/
.透明度6割{opacity: 0.6 !important;}/*opacity-6*/
.透明度7割{opacity: 0.7 !important;}/*opacity-7*/
.透明度8割{opacity: 0.8 !important;}/*opacity-8*/
.透明度9割{opacity: 0.9 !important;}/*opacity-9*/
.透明度10割{opacity: 1 !important;}/*opacity-10*/


.線の太さ1px{border-width: 1px !important;}/*border-width-1*/
.線の太さ2px{border-width: 2px !important;}/*border-width-2*/
.線の太さ3px{border-width: 3px !important;}/*border-width-3*/
.線の太さ4px{border-width: 4px !important;}/*border-width-4*/
.線の太さ5px{border-width: 5px !important;}/*border-width-5*/



/***************/
/* 汎用ボックス */
/***************/
.汎用ボックスNo1 {/*section.section & section-primary*/
	background-color: var(--メイン色);
	color: var(--フォント明るい色);
	border-top: 5px solid var(--メイン色の影色);
	margin: 30px 0;
	padding: 50px 0;
	border-radius: 0.25rem;
	box-shadow: 0 15px 30px -15px rgba(0, 0, 0, 0.45);/*影Lv2*/
}

.汎用ボックスNo2 {/*section.section*/
	background-color: var(--背景色-少し暗い);
	margin: 30px 0;
	padding: 50px 0;
	border-radius: 0.25rem;
	box-shadow: 0 15px 30px -15px rgba(0, 0, 0, 0.45);/*影Lv2*/
}

.汎用ボックスNo3 {/*with-borders*/
	border-radius: 6px;
	border: 1px solid rgba(0, 0, 0, 0.06);;
	box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.04);
	padding: 20.8px;
	padding: 1.3rem;
}



/********/
/* 装飾 */
/********/
.背後に四角形表示{
    position: absolute;
    top: 50%;
    right: 0;
    width: 50vw;
    border-radius: 10px 0 0 10px;
    opacity: 0.1;
    transform: translate3d(0, -50%, 0);
	height: 40%;
}
@media (max-width: 991px) {.背後に四角形表示 {height: 20%;}}

.矢印の仕切り追加 {
	display: flex;
    flex-wrap: wrap;
    position: relative;
	clear: both;
	padding-top: 70px;
	padding-bottom: 70px;
	margin-top: 30px;
	border-top: 5px solid var(--線の色);
}

.矢印の仕切り追加:before {
	content: "";
	display: block;
	position: absolute;
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	border-top: 20px solid var(--背景色);
	height: 20px;
	width: 20px;
	top: -5px;
	left: 50%;
	margin-left: -20px;
}

.ボタンの右上に矢印を表示{
	background: transparent url(./img/arrows.webp) no-repeat 0 0;
	display: inline-block;
	position: absolute;
	background-position: -209px -101px;
	width: 120px;
	height: 47px;
	top: -40px; 
	left: 70%;
}

.チェックマークリスト{
	list-style: none;
    padding-left: 0;
    padding-right: 0;
}
.チェックマークリスト li {
    padding-top: 10px;
    padding-left: 36px;
    position: relative;	
    margin-bottom: 13px;
	line-height: 24px;
}
.チェックマークリスト li:before {
	position: absolute;
	font-family: "Font Awesome 5 Free";
	content: '\f00c';
	font-weight: 900;
	left: 0;
	border-radius: 50%;
	width: 25px;
	height: 25px;
	text-align: center;
	padding: 5px;
	font-size: 0.9em;
	line-height: 1.3;
}

.下矢印追加:after {
  font-family: 'FontAwesome';
  content: "\f107";
  margin-left: 5px;
}

.右矢印追加:after {
  font-family: 'FontAwesome';
  content: "\f105";
  margin-left: 5px;
}

.背景に線{
	background-color: var(--フォント暗い色);
	height: 1px;
	opacity: 10%;
}



/******/
/* 影 */
/******/
.影Lv2 {box-shadow: 0 15px 30px -15px rgba(0, 0, 0, 0.45);}/*box-shadow-2*/
.影Lv3 {box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.45);}/*box-shadow-3*/
.影Lv4 {box-shadow: 0px 0px 21px -5px rgba(0, 0, 0, 0.2);}/*box-shadow-4*/
.影Lv5 {box-shadow: 0 15px 60px -36px rgba(0, 0, 0, 0.45);}/*box-shadow-5*/



/********/
/*ボタン*/
/********/

.btn {font-size: 12.8px;font-size: 0.8rem;padding: 8.528px 14.928px;padding: 0.533rem 0.933rem;cursor: pointer;font-weight: 600;}
.btn.btn-xs {font-size: 11.2px;font-size: 0.7rem;padding: 3.2px 8px;padding: 0.2rem 0.5rem;}
.btn.btn-sm {font-size: 12.8px;font-size: 0.8rem;padding: 4.8px 10.4px;padding: 0.3rem 0.65rem;}
.btn.btn-lg {font-size: 16px;font-size: 1rem;padding: 8px 16px;padding: 0.5rem 1rem;}
.btn.btn-xl {font-size: 16px;font-size: 1rem;padding: 12.8px 32px;padding: 0.8rem 2rem;}
.btn.btn-px-1 {padding-left: 5.6px;padding-left: .35rem;padding-right: 5.6px;padding-right: .35rem;}
.btn.btn-px-2 {padding-left: 12px;padding-left: .75rem;padding-right: 12px;padding-right: .75rem;}
.btn.btn-px-3 {padding-left: 20px;padding-left: 1.25rem;padding-right: 20px;padding-right: 1.25rem;}
.btn.btn-px-4 {padding-left: 28px;padding-left: 1.75rem;padding-right: 28px;padding-right: 1.75rem;}
.btn.btn-px-5 {padding-left: 38.4px;padding-left: 2.4rem;padding-right: 38.4px;padding-right: 2.4rem;}
.btn.btn-py-1 {padding-top: 5.6px;padding-top: .35rem;padding-bottom: 5.6px;padding-bottom: .35rem;}
.btn.btn-py-2 {padding-top: 12px;padding-top: .75rem;padding-bottom: 12px;padding-bottom: .75rem;}
.btn.btn-py-3 {padding-top: 20px;padding-top: 1.25rem;padding-bottom: 20px;padding-bottom: 1.25rem;}
.btn.btn-py-4 {padding-top: 28px;padding-top: 1.75rem;padding-bottom: 28px;padding-bottom: 1.75rem;}
.btn.btn-py-5 {padding-top: 32px;padding-top: 2rem;padding-bottom: 32px;padding-bottom: 2rem;}


.メイン色ボタン {/*btn-primary*/
	background-color: var(--メイン色);
	border-color: var(--メイン色) var(--メイン色) var(--メイン色の影色);
	color: var(--フォント明るい色);
}
.メイン色ボタン:visited{color: var(--フォント明るい色);}
.メイン色ボタン:hover{background-color: var(--メイン色の明るい色);border-color: var(--メイン色の明るい色) var(--メイン色の明るい色) var(--メイン色);color: var(--フォント明るい色);}
.メイン色ボタン:focus{background-color: var(--メイン色の影色);border-color: var(--メイン色の影色) var(--メイン色の影色) var(--メイン色の濃い影色);color: var(--フォント明るい色);box-shadow: 0 0 0 3px var(--通常影色);}
.メイン色ボタン:disabled{background-color: var(--メイン色);border-color: var(--メイン色) var(--メイン色) var(--メイン色の影色);}
.メイン色ボタン:active{background-color: var(--メイン色の影色) !important;background-image: none !important;border-color: var(--メイン色の影色) var(--メイン色の影色) var(--メイン色の濃い影色) !important;}


.メイン色アウトラインボタン {
	color: var(--メイン色);
	background-color: transparent;
	background-image: none;
	border-color: var(--メイン色);
	border-width: 2px;
}
.メイン色アウトラインボタン:visited{color: var(--メイン色);}
.メイン色アウトラインボタン:hover{color: var(--フォント明るい色);background-color: var(--メイン色);border-color: var(--メイン色);}
.メイン色アウトラインボタン:focus{box-shadow: 0 0 0 3px var(--通常影色);}
.メイン色アウトラインボタン:disabled{color: var(--メイン色);background-color: transparent;}
.メイン色アウトラインボタン:active{color: var(--フォント明るい色) !important;background-color: var(--メイン色) !important;border-color: var(--メイン色) !important;}


.ダークボタン {/*btn-dark*/
	background-color: var(--暗い色);
	border-color: var(--暗い色) var(--暗い色) var(--暗い色の影色);
	color: var(--フォント明るい色);
}
.ダークボタン:visited{color: var(--フォント明るい色);}
.ダークボタン:hover{background-color: var(--暗い色の明るい色);border-color: var(--暗い色の明るい色) var(--暗い色の明るい色) var(--暗い色);color: var(--フォント明るい色);}
.ダークボタン:focus{background-color: var(--暗い色の影色);border-color: var(--暗い色の影色) var(--暗い色の影色) var(--暗い色の濃い影色);color: var(--フォント明るい色);box-shadow: 0 0 0 3px var(--通常影色);}
.ダークボタン:disabled{background-color: var(--暗い色);border-color: var(--暗い色) var(--暗い色) var(--暗い色の影色);}
.ダークボタン:active{background-color: var(--暗い色の影色) !important;background-image: none !important;border-color: var(--暗い色の影色) var(--暗い色の影色) var(--暗い色の濃い影色) !important;}


.決済ボタン {/*paypalの決済ボタンに合わせた*/
	color: var(--暗い色);
	background-color: transparent;
	background-image: none;
	border-color: var(--暗い色);
	border-width: 1px;
}
.決済ボタン:visited{color: var(--暗い色);}
.決済ボタン:hover{background-color: #f2f2f2; border-color: var(--暗い色); color: var(--暗い色);}
.決済ボタン:focus{box-shadow: 0 0 0 0 transparent;}
.決済ボタン:disabled{color: var(--暗い色);background-color: transparent;}
.決済ボタン:active{color: var(--暗い色) !important;background-color: #f2f2f2 !important;border-color: var(--暗い色) !important;}


.３対１画面の右側のボタン {
	width: 100%;
	text-align: center;	
	position: relative;
}
@media (min-width: 992px) {.３対１画面の右側のボタン {left: -80px;}}
@media (max-width: 767px) {.３対１画面の右側のボタン {margin: 0;padding: 20px;position: static;width: auto;}}



/***************/
/*コンボボックス*/
/***************/
.コンボボックス,.コンボボックス:focus{
	color: var(--フォント明るい色);
	background-color: var(--暗い色に重ねる暗めの色);
	border-color: var(--暗い色に重ねる暗めの色);
	font-size: 0.85rem;
	background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/></svg>");
}



/*********/
/*メニュー*/
/*********/
/*-------------------------------------- 基本デザイン --------------------------------------*/
#menu-list-id{
	height:100%;/*親が継承しないと子で使えない*/
	margin:0px;
    padding:0px;
    display:flex;
	flex-wrap: nowrap;/*折り返し禁止*/
    align-items: center;
	justify-content: center;
	list-style: none;/*行はじめの中点を消す*/
}
.メニュー{
	width: 100%;
	height: 118px;
	position: fixed;
	top: 0;/*上に固定*/
	background-color: var(--背景色-暗い);
	border: 0;
}
.メニュー li{
	height:100%;/*親が継承しないと子で使えない*/
    padding:0;
    margin:0;
	white-space: nowrap;
}
.メニュー li a{
	height:100%;/*マウス判定を大きくする*/
    display: inline-flex;
    align-items: center;/*高さの中央揃え*/
	/*マウスオーバーのアニメーションの位置を調整するために必要*/
		flex-wrap: wrap;
		justify-content: center;
		align-content: center;
	/*フォントまわり*/
		font-size: 14.4px;
		font-size: 0.9rem;
		letter-spacing: 0;
		font-weight: 600;
		color: var(--フォント明るい色);
		padding: 1rem;
		text-decoration: none;/*下線等を消す*/
}
/*-------------------------------------- マウスオーバーでコンテンツを開く --------------------------------------*/
.メニューのドロップダウン{height: 100%;}
.メニューのドロップダウン:hover .メニューのドロップダウンコンテンツ {display: flex;}
.メニューのドロップダウンコンテンツ
{
	display: none;
    background-color: var(--背景色-暗い);
	border: none;
	border-radius: 0 0 0.25rem 0.25rem;
	box-shadow: 0 15px 30px -15px rgba(0, 0, 0, 0.45);/*影Lv2*/
	position: absolute;
	flex-direction: column;/*縦に並べる*/
	padding-bottom: 0.5rem;/*下に隙間*/
}
/*-------------------------------------- マウスオーバーアニメーション --------------------------------------*/
.マウスオーバーでラインを表示:hover{color: var(--メイン色);}/*マウスオーバー時に文字をメイン色にする*/
.マウスオーバーでラインを表示::after {
	content: '';
	position: relative;
	left: 0;
	width: 100%;
	height: 1px;
	bottom: -5px;
	background: var(--メイン色);
	/*アニメーション準備*/
		transition: .3s;
		transform-origin: left top;
	/*アニメーション前*/
		opacity: 0;
		visibility: hidden;
		transform: scale(0,1);
}
.マウスオーバーでラインを表示:hover::after {
	/*アニメーション後*/
		opacity: 1;
		visibility: visible;
		transform: scale(1,1);
}
/*-------------------------------------- デザイン --------------------------------------*/
.メニュー li img{margin-bottom: -15px;margin-top: 5px;}/*透過画像を下にずらす*/
.メニューページ内ジャンプの余白打消し{padding-top: 118px;margin-top:-118px;}/*上書きすることでページ内ジャンプ時にずれを修正*/
.メニューを含んだ余白{padding-top: 118px;}
/*-------------------------------------- スマホ対応 --------------------------------------*/
#menu-icon-id{display:none;}
@media (max-width: 991px) {/*横幅が991px以下ならメニューまわりをスマホ用に変更する*/
	/*高さを変更*/
		.メニュー{height: 60px;}
		.メニューページ内ジャンプの余白打消し {padding-top: 60px;margin-top:-60px;}
	/*メニューアイコンの表示*/
		#menu-icon-id{
			display: flex;
			width: 40px;
			height: 40px;
			padding: 0;
			color: var(--フォント明るい色);
			background-color: var(--メイン色);
			text-align: center; 
			flex-direction: column;
			justify-content: center;
			align-items: center;
			margin: 10px;
		}
	/*メニューを右寄せのボックスに入れる*/
		#menu-list-id{
			width: 90%;/*横幅*/
			max-width: 330px;/*一定より大きく表示しないようにする*/
			background-color: var(--背景色-暗い);
			padding: 12px 5px;
			overflow: auto;
			position: fixed;
			top: 0;
			left: 0;
			transition: .3s ease-in-out;
			-webkit-transform: translateX(-105%);
			transform: translateX(-105%);
			/*メニューを縦並びに表示*/
			display: flex;			
			align-items: flex-start;
			justify-content: flex-start;
			flex-direction: column;
		}
	/*画像の非表示*/
		.メニューロゴ{display:none;}
	/*縦表示の余白を調整*/
		.メニュー li{height:2rem;}
		.メニュー li a{height:Auto;}
		.メニューのドロップダウン{height: auto;}
		.マウスオーバーでラインを表示::after {bottom: -1px;}
		.メニューのドロップダウンコンテンツ{display: contents;}
		.メニューのドロップダウン:hover .メニューのドロップダウンコンテンツ {display: contents;}
		.メニューのドロップダウンコンテンツ li a{margin-left: 2rem;}
	/*表示切り替えの実装部分*/
		#close-menu-zone-id {
			display: none;
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: black;
			opacity: 0;
			transition: .3s ease-in-out;
		}
		#hide-checkbox-id:checked ~ #close-menu-zone-id {display: block; opacity: .5;	}
		#hide-checkbox-id:checked ~ #menu-list-id {-webkit-transform: translateX(0%); transform: translateX(0%); box-shadow: 6px 0 25px rgba(0,0,0,.15);}	
}



/***************************/
/* 60x60のアイコンのToolTip */
/***************************/
.アイコンのツールチップ{
    position: relative;
    cursor: pointer;
    display: inline-block;
}
.アイコンのツールチップ説明 {
	z-index: 1000!important;
	display: none;
	position: absolute;
	padding: 10px;
	margin-top: 12px;
	width:300px;
	font-size: 0.9em;
	line-height: 1.6em;
	border-radius: 5px;
	color: var(--フォント明るい色);
	background: var(--暗い色);
	pointer-events: none;/*HitTest無効*/
}
.アイコンのツールチップ説明:before {
	content: "";
	position: absolute;
	top: -24px;/*吹き出しの▲を合わせる*/
	left: 15px;/*吹き出しの▲を合わせる*/
	border: 15px solid transparent;
	border-top: 15px solid var(--暗い色);
	transform: rotateZ(180deg);
	pointer-events: none;/*HitTest無効*/
}
.アイコンのツールチップ:hover .アイコンのツールチップ説明{
	display: inline-block;
	top: 45px;
	left: 0px;
}
@media (max-width: 991px) {/*横幅が991px以下ならアイコンは45x45に変化するので調整*/
	.アイコンのツールチップ:hover .アイコンのツールチップ説明{top: 33px;left: -7px;}
}



/********/
/* 手順 */
/********/
.手順 {/*process & process-vertical*/
	text-align: left;
}
.手順-step {
	display: flex;	
	width: 100%;
	flex-direction: row;
	justify-content: start;
	align-items: start;
	position: relative;
	padding-bottom: 60px;
}
.手順-step:after {
	width: 2px;
	display: block;
	background-color: var(--メイン色);
	opacity: 0.2;
	position: absolute;
	content: '';
	height: calc(100% - 80px);
	top: 70px;
	left: 30px;
}
.手順-step:last-child:after {display: none;}/*最後の手順は横棒非表示*/
.手順-step-circle {
	display: flex;
	justify-content: center;
	text-align: center;
	border: 2px solid var(--メイン色);
	border-radius: 50%;
	align-items: center;
	position: relative;
	background-color: transparent;
	height: 60px;
	width: 60px;
	margin: 0 15px 0 0;
	min-height: 60px;
	min-width: 60px;
}
.手順-step-circle-content {
	font-weight: bold;
	color: var(--フォント強調色);
	font-size: 1.6em;
	letter-spacing: -1px;
}
.手順-step-content {padding-top: 0;}



/**********/
/* 料金表 */
/**********/
.料金表 {
	display: flex;
	flex-wrap: wrap;
    justify-content: center;
}

.料金プラン {
	background: var(--背景色);
	border-radius: 0;
	position: relative;
	box-shadow: 0px 0px 40px rgba(200, 200, 200, 0.3);
	transform: scale(1.15);
}
@media (max-width: 767px) {
	.料金プラン {transform: scale(1);}
	.料金プラン-header h3 {font-size: 0.9rem;}
	.料金プラン-contents ul li {font-size: 0.9rem;}
}

.料金プラン-header {
	background: var(--背景色-暗い);
	padding: 15.2px 16px;
	padding: 0.95rem 1rem;
}

.料金プラン-header h3 {
	color: var(--フォント明るい色);
	font-size: 12.8px;
	font-size: 0.8rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0;
	text-align: center;
	text-transform: uppercase;
	margin-bottom: 0;
}

.料金プラン-price {
	border: 1px solid var(--線の色);
	background: var(--背景色-少し暗い);
	display: flex;
	flex-direction: column;
	border-top: 0;
	border-bottom: 0;
	padding: 32px 12.8px;
	padding: 2rem 0.8rem;
	text-align: center;
}

.料金ボックス {
	color: var(--背景色-暗い);
	display: flex;
	justify-content: center;
	align-items: flex-start;
	font-size: 43.2px;
	font-size: 2.7rem;
	font-weight: 600;
	line-height: 1;
}
.料金マーク {font-size: 50%; line-height: 1.4;}
.料金説明 {
	text-transform: uppercase;
	opacity: 0.7;
	font-size: 11.2px;
	font-size: 0.7rem;
	line-height: 1;
	margin-bottom: 0;
}

.料金プラン-contents {
	border: 1px solid var(--線の色);
	border-top: 0;
	border-bottom: 0;
	padding: 12.8px;
	padding: 0.8rem;
	text-align: center;
}
.料金プラン-contents ul {padding: 0 8px 0 8px; padding: 0 0.5rem 0 0.5rem; margin-bottom: 0;}
.料金プラン-contents ul li {border-bottom: 1px solid var(--線の色); line-height: 2.9; list-style: none; font-size: 12.8px; font-size: 0.8rem;}
.料金プラン-contents ul li:last-child {border-bottom: 0;}

.料金プラン-footer {
	border: 1px solid var(--線の色);
	border-top: 0;
	padding: 24px 12.8px 40px;
	padding: 1.5rem 0.8rem 2.5rem;
	text-align: center;
}





/***************/
/*Youtubeまわり*/
/***************/

.youtube-wrap {
	width: 90%;
	max-width: 1280px;/* 許容最大サイズを指定 */
	margin-left: auto;
	margin-right: auto;
}

.lazy_youtube_class {
    position: relative;
	width: 100%;
	height: 0;/* 高さは0にしておく(padding-bottomで高さを指定) */
    padding-bottom: 56.25%;/* 16:9 */
    overflow: hidden;
    background: #000;
    margin: 0px;
}

.lazy_youtube_class iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
}

.lazy_youtube_class img {
    object-fit: cover;
    display: block;
    left: 0;
    bottom: 0;
    margin: auto;
    max-width: 100%;
    width: 100%;
    position: absolute;
    right: 0;
    top: 0;
    border: none;
    height: auto;
    cursor: pointer;
    -webkit-transition: 0.4s all;
    -moz-transition: 0.4s all;
    transition: 0.4s all;
}

.lazy_youtube_class .play {
    height: 72px;
    width: 72px;
    left: 50%;
    top: 50%;
    margin-left: -36px;
    margin-top: -36px;
    position: absolute;
    background: url('./img/play.webp') no-repeat;
    cursor: pointer;
}




/******/
/*memo*/
/******/

/* 差分は以下のように作る */
.基本, .差分１, .差分２ {background-color: #AAAAAA; border: 1px solid #333333;}
.差分１ {font-size: 2em;}
.差分２ {font-size: 3em;}