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




.cf7-frame ::placeholder {
	color: #BBB;
	line-height: 1.5em;
}
.cf7-frame .cf7-item {
	display: flex;
	justify-content: center;
	align-items: flex-start;
}
.cf7-frame .cf7-label {
	flex-basis: 20%;
	color: #FFF;
	background-color: #91D8E4;
	margin-right: 20px;
	padding-top: 5px;
	padding-bottom: 5px;
	border-radius: 4px;
	text-align: center;
}
.cf7-frame .wpcf7-form-control-wrap {
	width: 100%;
}
.cf7-frame .cf7-privacy {
	text-align: center;
}
.cf7-frame .cf7-privacy p {
	margin-bottom: 0.5em!important;
}
.cf7-frame .wpcf7-submit {
	color: #FFF;
	background: transparent;
	border: none;
	font-size: 16px;
}
.cf7-frame .cf7-send {
	position: relative;
	color: #333;
	background: linear-gradient(to right, #800080, #ffc0cb);
	border-radius: 4px;
	transition: all .3s ease-out;
	width: 70%;
	left: 50%;
	transform: translate(-50%, 0);
	-webkit-transform: translate(-50%, 0);
	-ms-transform: translate(-50%, 0);
}
/* 文字を上に表示するための記述 */
.cf7-frame .cf7-send span {
	position: relative;
}
/* ボタンhover後の背景色 */
.cf7-frame .cf7-send::before {
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(to right, #8EC5FC, #E0C3FC);
	border-radius: 4px;
	transition: all .3s ease-out;
}
.cf7-frame .cf7-send:hover::before {
	opacity: 0;
}
.cf7-frame .cf7-send .wpcf7-spinner {
	display: none;
}
/* recaptchaの設定 */
.inv-recaptcha-holder .grecaptcha-badge {
	margin-top:		-50px;
	margin-left:	auto;
	margin-right:	auto;
}






.aka p {
	margin: auto;
	width: 80%;
}


/* 「運営情報記事」の見出し */
.operation-heading {
	font-size: 120%;
	font-weight: bold;
	margin-bottom: 1em!important;
	counter-increment: title;
}
.operation-heading::before {
	content: "第"counter(title)"条（";
}
.operation-heading::after {
	content: "）";
}










.sampleFull-frame {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 0!important;
	padding-left: 0!important;
	list-style: none;
}
@media screen and (min-width: 768px) {
	.sampleFull-frame {
		gap: 30px;
	}
}
.sampleFull-frame > * {
	flex-basis: calc(50% - 15px);
}
@media screen and (min-width: 768px) {
	.sampleFull-frame > * {
		flex-basis: calc(50% - 25px);
	}
}








/* プロフィールボックス */
.profileBox-flame {
	padding-bottom: 1em;
	background-color: #FFF;
	box-shadow: 0 0 1px var(--color-main);
}
.profileBox-bg {
	display: block;
	width: 100%;
	height: 160px;
	-o-object-fit: cover;
	object-fit: cover;
	overflow: hidden;
}
.profileBox-bg img {
	width: 100%;
}
.profileBox-icon {
	background: #fdfdfd;
	width: 120px;
	height: 120px;
	border: 4px solid #fdfdfd;
	border-radius: 50%;
	-o-object-fit: cover;
	object-fit: cover;
}
.profileBox-bg + .profileBox-icon {
	margin: -60px auto 0;
}
.profileBox-name {
	color: #555;
	font-size: 110%;
	font-weight: bold;
	text-align: center;
}
.profileBox-text {
	color: #555;
	font-size: 80%;
	margin-top: 1em;
	padding: 0 1em;
	line-height: 24px;
}
.profileBox-text br {
	display: none;
}
.profileBox-button {
	text-align: center;
	margin-top: 1em;
}
.profileBox-button a {
	color: var(--white);
	background-color: var(--color-main);
	padding: 5px 30px;
	border-radius: 25px;
}
.profileBox-sns {
	display: flex;
	justify-content: center;
	margin-top: 1em;
	padding-left: 0;
	list-style: none;
}
.profileBox-sns li:not(:first-child) {
	margin-left: 1em;
}
.sns-flame {
	width: 100%;
	padding: 1em;
}
.sns-flame a {
	width: 100%;
	height: 100%;
	font-size: 13px;
	font-weight: normal;
	text-decoration: none;
	text-align: center;
	color: #FFF;
	-webkit-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
}
.sns-flame-top a {
	margin-bottom: 20px;
}
.sns-flame ul {
	display: -webkit-flex;
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}
.sns-flame li {
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: center;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	margin: 0!important;
	-webkit-transition: width 0.3s ease-out;
	transition: width 0.3s ease-out;
	-webkit-align-items: center;
	align-items: center;
}
.sns-flame li:hover {
	width: 200%;
}
.sns-item1 { background-color: #454030; }
.sns-item2 { background-color: #6FB6C3; }
.sns-item3 { background-color: #E6A014; }
.sns-flame i {
	font-size: 200%;
	margin-bottom: 5px;
}
.sns-overview {
	color: #FFF;
	padding: 2em 0;
}
.sns-flame p{
	display: none;
}











/* 矢印 */
.arrow {
	position: relative;
	margin: 50px auto;
	padding-top: 35px; /* 要素の上の余白調整 */
	text-align: center;
}
.arrow:before {
	width: 100px; /* 四角形の幅 */
	height: 80px; /* 四角形の高さ */
	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#FFFFFF), to(rgba(136,171,218,0.3)));
	background-image: -webkit-linear-gradient(#FFFFFF, rgba(136,171,218,0.3));
	background-image: linear-gradient(#FFFFFF, rgba(136,171,218,0.3));
	content: "";
	position: absolute;
	top: 0;
	left: 50%; /* 中央寄せに使用 */
	margin-left: -50px; /* 中央寄せに使用 */
}
.arrow:after {
	border-top: 35px solid rgba(136,171,218,0.3); /* 角度を緩やかなものに指定 */
	border-left: 70px solid transparent; /* 左のボーダーを透過に指定 */
	border-right: 70px solid transparent; /*右のボーダーを透過に指定*/
	content: "";
	position: absolute;
	top: 80px; /* 四角形の高さと同じ物を指定 */
	left: 50%; /* 中央寄せに使用 */
	margin-left: -70px; /* 中央寄せに使用 */
}
/* テキストの指定 */
.arrow span {
	position: relative;
	z-index: 3;
	font-size: 1.6em;
	font-weight: bold;
	line-height: 1.4;
	text-shadow: 2px 2px 1px rgb(255,255,255);
}








.bg {
	padding-top: 50px;
	padding-bottom: 25px;
}
.bg-image .headline {
	color: #FFFFAA;
}
.bg-image .headline::before {
	color: rgba(241,241,241,0.3)
}





/************************************
 * 共通要素
 ************************************/

/* カラーコード */
:root {
	--color-main:		#4E454A;
	--color-sub:		#EAE0DA;
	--color-accent:		#EAC7C7;
	--color-background:	#F0EBE6;
	--white:			#FFFFFF;
}



/* スマホでの改行 */
@media screen and (min-width: 768px){
	.br-sp { display: none; }
}

/* 改行削除 */
.br-delete br { display: none;	}

/* テキストの中央化 */
.common-text-center { text-align: center; }

/* リンクの下線 */
a { text-decoration: none; }

/* 画像の余白削除 */
img { vertical-align: top; }

/* 画像リンクのホバーアクション */
/* .image-hover { transition: .3s; }
.image-hover:hover { opacity: .7; } */
a img { transition: .3s; }
a img:hover { opacity: .7; }





/****************************************************************************************************/





/**************************************************
 * アニメーション
 **************************************************/

/* アニメーション（ウェーブ） */
.bg-wave {
	position: relative;
	color: white;
	background: #FFF;
	background: transparent;
	margin: 0 calc(50% - 50vw);
}
.bg-wave-reverse {
	transform: scaleY(-1);
}
.bg-wave-flame {
/* 	margin-bottom: 4em; */
}
.waves {
	position: relative;
	width: 100%;
	height: 15vh;
	margin-bottom: -12px; /*Fix for safari gap*/
	min-height: 100px;
	max-height: 150px;
}
@media (max-width: 768px) {
	.waves {
		height: 40px;
		min-height: 40px;
	}
}
/* ウェーブ（アニメーション部分） */
.parallax > use {
	animation: move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite;
}
.parallax > use:nth-child(1) {
	animation-delay: -2s;
	animation-duration: 7s;
}
.parallax > use:nth-child(2) {
	animation-delay: -3s;
	animation-duration: 10s;
}
.parallax > use:nth-child(3) {
	animation-delay: -4s;
	animation-duration: 13s;
}
.parallax > use:nth-child(4) {
	animation-delay: -5s;
	animation-duration: 20s;
}
@keyframes move-forever {
	0%		{ transform: translate3d(-90px, 0, 0); }
	100%	{ transform: translate3d( 85px, 0, 0); }
}
/* ウェーブ（コンテンツ部分） */
.wave-contents {
	margin-left:	calc(50% - 50vw);
	margin-right:	calc(50% - 50vw);
	padding-left:	calc(50vw - 50%);
	padding-right:	calc(50vw - 50%);
	padding-top:	50px;
	padding-bottom:	50px;
	background-color: rgba(240,235,230,1.0);
}


/* 下から上 */
.scroll_up {
	transition: 0.8s ease-in-out;
	transform: translateY(30px);
	opacity: 0;
}
.scroll_up.on {
	transform: translateY(0);
	opacity: 1.0;
}
/* 左から右 */
.scroll_left {
	-webkit-transition: 0.8s ease-in-out;
	-moz-transition: 0.8s ease-in-out;
	-o-transition: 0.8s ease-in-out;
	transition: 0.8s ease-in-out;
	transform: translateX(-30px);
	opacity: 0;
	filter: alpha(opacity=0);
	-moz-opacity: 0;
}
.scroll_left.on {
	opacity: 1.0;
	filter: alpha(opacity=100);
	-moz-opacity: 1.0;
	transform: translateX(0);
}
/* 右から左 */
.scroll_right {
	-webkit-transition: 0.8s ease-in-out;
	-moz-transition: 0.8s ease-in-out;
	-o-transition: 0.8s ease-in-out;
	transition: 0.8s ease-in-out;
	transform: translateX(30px);
	opacity: 0;
	filter: alpha(opacity=0);
	-moz-opacity: 0;
}
.scroll_right.on {
	opacity: 1.0;
	filter: alpha(opacity=100);
	-moz-opacity: 1.0;
	transform: translateX(0);
}
/* 時間差表示 */
.timing02 {transition-delay: 0.2s;}
.timing03 {transition-delay: 0.4s;}
.timing04 {transition-delay: 0.6s;}
.timing05 {transition-delay: 0.8s;}
.timing06 {transition-delay: 1.0s;}
.timing07 {transition-delay: 1.2s;}
.timing08 {transition-delay: 1.4s;}


/* ページのフェードイン */
.body { animation: fadein 3s forwards;}
@keyframes fadein {
	0% { opacity: 0 }
	100% { opacity: 1 }
}

/* ふわっとした動作（指定箇所に"fadeIn"を入れる） */
.fadeIn {
	animation-name: fadeInAnime;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	opacity:0;
}
@keyframes fadeInAnime {
	from { opacity: 0; }
	to { opacity: 1; }
}

/* スムーズスクロール */
html { scroll-behavior: smooth; }








/****************************************************************************************************/





/**************************************************
 * 見出し
 **************************************************/

/* リセット */
.article h2,
.article h3,
.article h4,
.article h5,
.article h6 {
	background-color: transparent;
	border: 0;
	border-radius: 0;
}

/* 大見出し */
.article h2 {
	color: #88ABDA;
	border-bottom: 5px solid #88ABDA;
	padding: 10px 0;
	margin-top: 5rem;
	margin-bottom: 30px;
	font-size: 150%;
}

/* 中見出し */
.article h3 {
	color: #88ABDA;
	position: relative;
	border-bottom: 3px solid #F4F5F7;
	margin-bottom: 30px;
	padding-left: 0!important;
	padding-bottom: 7px;
}
.article h3::after {
	position: absolute;
	content: " ";
	display: block;     
	border-bottom: solid 3px #88ABDA;
	bottom: -3px;
	width: 30%;
}

/* 小見出し */
.article h4 {
	color: #88ABDA;
	border-left: solid 5px #88ABDA;
	margin-bottom: 30px;
	padding: 0.25em 0.5em;
}

/* 見出し（トップページ） */
.headline {
	position: relative;
	padding-top: 20px;
	padding-bottom: 50px;
	font-size: 26px;
	text-align: center;
}
@media screen and (min-width: 768px) {
	.headline {
		padding-top: 50px;
	}
}
.headline span {
	position: relative;
	z-index: 2;
}
.headline::before {
	content: attr(data-en);
	position: absolute;
	top: -20px;
	left: 50%;
	transform: translateX(-50%);
	color: rgba(136,171,218,0.3);
	font-size: 50px;
	font-style: italic;
}
@media screen and (min-width: 768px) {
	.headline::before {
		font-size: 80px;
	}
}




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

/* ボタン */
.common-button a {
	color: var(--color-main);
	background-color: var(--white);
	border: 1px solid var(--color-main);
	border-radius: 3px;
	box-shadow: 5px 5px 0 #88ABDA;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 50px auto 0;
	max-width: 350px;
	padding: 10px 25px;
	transition: 0.3s ease-in-out;
	text-decoration: none;
}
.common-button a:hover {
	color: #FFF;
	background-color: #88ABDA;
	border: 1px solid #88ABDA;
	box-shadow: 0 0 0;
}

/* マイクロコピー（上部） */
.microcopy {
	text-align: center;
	font-size: 90%;
	margin-top: 50px;
	margin-bottom: -2.5em!important;
	animation: mcFlash 1s ease-in-out infinite alternate;
}
@keyframes mcFlash {
	0%		{opacity: 0;}
	100%	{opacity: 1;}
}
.microcopy:before {
	content: "＼";
	margin-right: 5px;
}
.microcopy:after {
	content: "／";
	margin-left: 5px;
}

/* マイクロコピー（下部） */
.microcopy-bottom {
	font-size: 90%;
	text-align: center;
	margin-top: -3.5em;
}
.microcopy-bottom:before {
	content: "公式：";
}
.microcopy-bottom a {
	color: #1967D2;
	transition: all .3s;
}
.microcopy-bottom a:hover {
	color: #67B5FF;
}





/**************************************************
 * ボックス
 **************************************************/

/* ボックス（3色） */
.box-blue,
.box-yellow,
.box-red {
	margin: 1em 0 4em;
	padding: 1em;
}
.box-blue	{ background-color: #DDEEEE; }
.box-yellow	{ background-color: #FFF7CC; }
.box-red	{ background-color: #FDF2F2; }
.box-blue-title,
.box-yellow-title,
.box-red-title {
	font-size: 80%;
	font-weight: bold;
}
.box-blue-title		{ color: #6FB6C3 }
.box-yellow-title	{ color: #CBA31A; }
.box-red-title		{ color: #F3ACA9; }
.box-blue-title:before,
.box-yellow-title:before,
.box-red-title:before {
	font-family: "Font Awesome 5 Free";
	font-size: 100%;
	margin-right: 0.5rem;
}
.box-blue-title:before		{ content: "\f304"; }
.box-yellow-title:before	{ content: "\f05a"; }
.box-red-title:before		{ content: "\f071"; }
.box-blue p,
.box-yellow p,
.box-red p {
	font-size: 100%;
	margin: 0;
	padding: 0;
}
.box-blue ul,
.box-blue ol,
.box-yellow ul,
.box-yellow ol,
.box-red ul,
.box-red ol {
	margin-bottom: 0;
	font-size: 100%;
}

/* ボックス（かぎかっこ） */
.box-brackets {
	position: relative;
	text-align: center;
	padding: 1.5em;
	background-image: repeating-linear-gradient(
		-45deg, 							/* ストライプ柄の角度 */
		#FAFAFA 0, #FAFAFA 2px,				/* ストライプの色1 */
		transparent 2px, transparent 4px	/* ストライプの色2 */
	);
	background-repeat: no-repeat;
	background-position: left bottom;
	background-size: 100%;
}
.box-brackets:before,
.box-brackets:after {
	position: absolute;
	content: "";
	border-color: var(--color_main);
	width: 2.25em;
	height: 2em;
	display: inline-block;
	box-sizing: border-box;
}
.box-brackets:before {
	top: 0;
	left: 0;
	border-top: 1px solid;
	border-left: 1px solid;
}
.box-brackets:after {
	right: 0;
	bottom: 0;
	border-right: 1px solid;
	border-bottom: 1px solid;
}

/* ボックス（ネット） */
.box-net {
	background:linear-gradient(
		-45deg, transparent 25%, #F5F5F5 25%, #F5F5F5 50%,
		transparent 50%, transparent 75%, #F5F5F5 75%, #F5F5F5);
	background-size: 4px 4px;
	border-top: 4px double #DBDBDB;
	border-bottom: 4px double #DBDBDB;
	background-clip: padding-box;
	padding: 0.5em 1em;
}

/* ボックス（ポイント） */
.box-point {
	position: relative;
	border: 1px solid #88ABDA;
	padding: 1.5em;
}
.box-point-title {
	position: absolute;
	top: -1em;
	color: #88ABDA;
	background-color: #FFF;
	padding-left: 7px;
	padding-right: 7px;
	font-size: 85%;
	font-weight: bold;
}
.box-point-title:before {
	font-family: 'Font Awesome 5 Free';
	font-weight: bold;
	content: "\f05a";
	display: inline-block;
	padding-right: 7px;
}





/**************************************************
 * リスト
 **************************************************/

/* リスト（通常版） */
.list-normal-flame {
	background:linear-gradient(
		-45deg, transparent 25%, #F5F5F5 25%, #F5F5F5 50%,
		transparent 50%, transparent 75%, #F5F5F5 75%, #F5F5F5);
	background-size: 4px 4px;
	border-top: 4px double #DBDBDB;
	border-bottom: 4px double #DBDBDB;
	background-clip: padding-box;
	padding: 0.5em 1em;
}
.list-normal {
	margin-bottom: 0!important;
	padding-left: 0!important;
}
.list-normal-title {
	font-weight: bold;
	text-align: center;
	margin-top: 0.5em;
}
ul.list-normal li,
ol.list-normal li {
	margin: 0!important;
	list-style-position: inside;
}
ul.list-normal li {
	padding: 10px 10px 10px 30px;
	text-indent: -22px;
}
@media screen and (min-width: 768px) {
	ul.list-normal li {
		padding: 10px 10px 10px 40px;
		text-indent: -25px;
	}
}
ol.list-normal li {
	padding: 10px 10px 10px 30px;
	text-indent: -20.3px;
}
@media screen and (min-width: 768px) {
	ol.list-normal li {
		padding: 10px 10px 10px 25px;
		text-indent: -18.2px;
	}
}
ol.list-normal li::marker {
	font-weight: bold;
}
.list-normal li:not(:first-child) {
	border-top: 1px dashed #DBDBDB;
}
.list-normal > ul,
.list-normal > ol {
	font-size: 90%;
	margin-bottom: 0!important;
}
.list-normal > ul li:first-child,
.list-normal > ol li:first-child {
	margin-top: -10px!important;
}
.list-normal a {
	color: #6FB6C3;
	font-weight: bold;
	transition: all .3s;
}
.list-normal a:hover {
	color: #A3EAF7;
}

/* リスト（グレー版） */
.list-gray {
	background-color: #F5F5F5;
	padding: 0.5em 1em;
}
.list-gray li {
	list-style-position: inside;
	margin: 0!important;
	padding: 10px;
}
.list-gray li:not(:first-child) {
	border-top: 1px dashed #D1D1D1;
}
.list-gray a {
	color: #6FB6C3;
	font-weight: bold;
	transition: all .3s;
}
.list-gray a:hover {
	color: #A3EAF7;
}

/* リスト（イエロー版） */
.list-conclusion-flame {
	border: 1px solid #E6A014;
}
.list-conclusion-title {
	color: #FFF;
	background-color: #E6A014;
	text-align: center;
	font-size: 110%;
	padding: 10px;
}
.list-conclusion {
	background:linear-gradient(
		-45deg, transparent 25%, hsla(40, 84%, 49%, 0.1) 25%, hsla(40, 84%, 49%, 0.1) 50%,
		transparent 50%, transparent 75%, hsla(40, 84%, 49%, 0.1) 75%, hsla(40, 84%, 49%, 0.1));
	background-size: 4px 4px;
	background-clip: padding-box;
	padding: 0.5em 1em!important;
	margin-bottom: 0!important;
}
@media screen and (min-width: 768px) {
	.list-conclusion {
		padding: 0.5em 1em;
	}
}
ul.list-conclusion li,
ol.list-conclusion li {
	margin: 0!important;
	list-style-position: inside;
}
ul.list-conclusion li {
	padding: 10px 10px 10px 30px;
	text-indent: -22px;
}
@media screen and (min-width: 768px) {
	ul.list-conclusion li {
		padding: 10px 10px 10px 40px;
		text-indent: -25px;
	}
}
ol.list-conclusion li {
	padding: 10px 10px 10px 25px;
	text-indent: -18.2px;
}
@media screen and (min-width: 768px) {
	ol.list-conclusion li {
		padding: 10px 10px 10px 30px;
		text-indent: -21px;
	}
}
ol.list-conclusion li::marker {
	font-weight: bold;
}
.list-conclusion li:not(:first-child) {
	border-top: 1px dashed hsla(40, 84%, 49%, 0.3);
}
.list-conclusion a {
	color: #6FB6C3;
	font-weight: bold;
	transition: all .3s;
}
.list-conclusion a:hover {
	color: #A3EAF7;
}





/**************************************************
 * テーブル・表・説明リスト
 **************************************************/

/* テーブル */
table {
	font-size: 80%;
}
table caption {
	color: var(--color-main);
	font-weight: bold;
}
table caption:before,
table caption:after {
	content: "-";
	padding-left: 5px;
	padding-right: 5px;
}
table th {
	color: #FFF;
	background-color: #88ABDA;
}
table td {
	background-color: #EEE;
}
table tr:nth-child(odd) td {
	background-color: var(--white);
}
.table-center {
	text-align: center;
}

/* 説明リスト */
.article dl {
	font-size: 14px;
}
.article dt {
	float: left;
}
.article dd {
	margin-left: 9rem;
}
.article dl div:not(:last-child) {
	border-bottom:dashed 1px #333333;
	overflow: hidden;
	padding: 10px 0;
}
.article dl div:last-child {
	padding: 10px 0;
}





/**************************************************
 * タブ
 **************************************************/

.tab_container {
	padding-bottom: 1em;
	background-color: #FFF;
	margin: 0 auto;
}
.tab_container > p,
.tab_container > br {
	display: none;
}
.tab_item {
	width: calc(100%/3);
	padding: 15px 0;
	border-bottom: 3px solid #88ABDA;
	background-color: #ececec;
	text-align: center;
	color: #88ABDA;
	display: block;
	float: left;
	text-align: center;
	font-weight: bold;
	transition: all 0.2s ease;
}
.tab_item_division {
	width: calc(100%/2);
}
.tab_item:hover {
	opacity: 0.75;
}
input[name="tab_item"] {
	display: none;
}
.tab_content {
	display: none;
	padding: 1em 1em 0;
	clear: both;
	overflow: hidden;
}
#tab1:checked ~ #tab1_content,
#tab2:checked ~ #tab2_content,
#tab3:checked ~ #tab3_content,
#tab4:checked ~ #tab4_content {
	display: block;
}
/* チェックされたタブの色を変更*/
#tab1:checked ~ #tabMenu1,
#tab2:checked ~ #tabMenu2,
#tab3:checked ~ #tabMenu3,
#tab4:checked ~ #tabMenu4 {
	color: #FFF;
	background-color: #88ABDA;
}
.tab_container input:checked + .tab_item {
	color: #FFF;
	background-color: #88ABDA;
}





/****************************************************
 * モックアップ
 ****************************************************/

.mockup-list {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	padding-left: 0!important;
}
.mockup-list li {
	width: calc(50% - 0.2em * 2);
}
@media screen and (min-width: 768px) {
	.mockup-list li {
		width: calc(33.3% - 0.2em * 2);
	}
}
.mockup-flame {
	position: relative;
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
}
.mockup {
	position: relative;
	max-width: 640px;
	max-height: 100vh;
	margin: 0 auto;
	padding: 0;
	border: 5px solid #CDCDCD;
	border-radius: 5px;
	overflow: hidden;
	box-shadow: 0 15px 30px -7px rgb(0 12 66 / 20%);
}
.mockup-title {
	position: relative;	
	background: linear-gradient(#E4E4E4, #CDCDCD);
}
.mockup-title::before,
.mockup-title::after,
.mockup-title .mockup-dot::before {
	content:"●";
	position: absolute;
}
.mockup-title::before				{ font-size:80%; top:4px; left:05px; color:#FF6158;}	/* Red */
.mockup-title::after				{ font-size:80%; top:4px; left:20px; color:#FEBD2D;}	/* Yellow */
.mockup-title .mockup-dot::before	{ font-size:80%; top:4px; left:35px; color:#29CA43;}	/* Green */
@media screen and (min-width: 768px) {
	.mockup-title::before				{ font-size: 100%; top:0; left:10px; color:#FF6158;}	/* Red */
	.mockup-title::after				{ font-size: 100%; top:0; left:30px; color:#FEBD2D;}	/* Yellow */
	.mockup-title .mockup-dot::before	{ font-size: 100%; top:0; left:50px; color:#29CA43;}	/* Green */
}
.mockup-title .mockup-theme {
	color: #555;
	font-size: 80%;
	padding-left: 55px;
}
@media screen and (min-width: 768px) {
	.mockup-title .mockup-theme {
		font-size: 100%;
		padding-left: 80px;
	}
}
.mockup-flame .mockup-image {
	overflow-y: scroll;
	max-height: 180px;
}
@media screen and (min-width: 768px) {
	.mockup-flame .mockup-image {
		max-height: 360px;
	}
}
.mockup-flame .mockup-image img {
	width: 100%;
}
.mockup-overview {
	text-align: center;
	margin-top: 10px;
	transition: all .3s;
}
.mockup-overview a:before {
	font-family: 'Font Awesome 5 Free';
	content: "\f00e";
	font-weight: bold;
	display: inline-block;
	padding-right: 7px;
}
.mockup-flame p {
	display: none;
}





/****************************************************
 * アコーディオン
 ****************************************************/

.accordion {
	width: 100%;
	background-color: #E5F4FC;
	margin-bottom: 1em;
}
.accordion:not([open]) {
	margin-bottom: 7px;
}
.accordion summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
	padding: 1em 2em;
	border-radius: 5px;
	background-color: #88ABDA;
	color: #FFF;
	font-weight: 600;
	cursor: pointer;
}
.accordion summary::-webkit-details-marker {
	display: none;
}
.accordion summary::before,
.accordion summary::after {
	width: 3px;
	height: .9em;
	border-radius: 5px;
	background-color: #FFF;
	content: '';
}
.accordion summary::before {
	position: absolute;
	right: 2em;
	rotate: 90deg;
}
.accordion summary::after {
	transition: rotate .3s;
}
.accordion[open] summary::after {
	rotate: 90deg;
}
.accordion p {
	transform: translateY(-10px);
	opacity: 0;
	margin: 0;
	padding: 1em 2em;
	color: #69788A;
	transition: transform .5s, opacity .5s;
}
.accordion[open] p {
	transform: none;
	opacity: 1;
}





/****************************************************
 * テキストの装飾
 ****************************************************/

/* テキスト（マーカー） */
.marker {
	background-color: transparent;			/* テンプレの削除 */
	background-image: repeating-linear-gradient(
		-45deg, 							/* ストライプ柄の角度 */
		#FCF69F 0, #FCF69F 2px,				/* ストライプの色1 */
		transparent 2px, transparent 4px	/* ストライプの色2 */
	);
	background-repeat: no-repeat;
	background-position: left bottom;
	background-size: 100% 0.5em;
	font-weight: bold;
}

/* テキスト（三原色） */
.textR,
.textG,
.textB {
	font-weight:bold;
}
.textR { color:red; }
.textG { color:green; }
.textB { color:blue; }

/* テキスト（点滅） */
.flash,
.flash-L,
.flash-R {
	animation: flashing 1s ease-in-out infinite alternate;
	color: #E6A014;
	font-weight: bold;
}
.flash-L { margin-left: 3px; }
.flash-R { margin-right: 3px; }
@keyframes flashing {
	0%		{opacity: 0;}
	100%	{opacity: 1;}
}












/****************************************************************************************************/





/************************************
 * ヘッダー（トップページに一部記載）
 ************************************/

/* サイトネーム */
.site-name-text {
	color: #88ABDA;
	transition: .3s;
}
.site-name-text:hover {
	color: var(--color-accent);
	transition: .3s;
}
/* グロナビ */
#navi .navi-in a:hover {
	color: var(--color-accent);
}
#header .site-name-text {
	color: #88ABDA;
	font-family: 'Rampart One', cursive;
	font-size: 2em;
/* 	text-shadow: 0 4px 4px #333; */
}
.header-container {
	background-color: #FFF;
}
.hlt-tm-right .navi-in > ul {
	background-color: #FFF;
}
.navi .item-label {
	color: #69788A;
	font-family: 'Josefin Sans',sans-serif;
}
.navi-in > ul .menu-item-has-description > a > .caption-wrap {
/* 	flex-direction: column-reverse; */
}
.navi .item-label, .navi .item-description {
	color: #69788A;
}
.header {
	color: #88ABDA;
}
.header-in {
	flex-direction: column-reverse;
}
.logo-text {
    padding: 1em 0 0;
}





/************************************
 * ヘッダー（モバイル版）
 ************************************/

/* サイトタイトルの色 */
.mobile-menu-buttons .menu-button > a {
	color: var(--color-main);
}

/* 背景とアイコンの色 */
.mobile-menu-buttons {
	color: var(--color-main);
	background-color: var(--color-background);
}

/* 要素の反対化 */
@media screen and (max-width:1023px){
	.mobile-menu-buttons {
		flex-direction: row-reverse;
	}
}

/* メニューを右から表示 */
.navi-menu-content{
	left: auto;
	right: 0;
	transform: translateX(101%);
	background-color: var(--color-background);
}

/* 閉じるボタン */
.fa-times {
	color: var(--color-main);
	font-size: 0.8em;
}

/* 親要素 */
.menu-drawer > li:not(:first-child) {
	margin-top: 2rem;	
}
.menu-drawer > li > a,
.menu-drawer > li > a:hover {
	color: var(--color-background);
	background-color: var(--color-main);
	padding: 6px 12px;
}

/* 子要素にボーダー */
.menu-item li:not(:last-child) {
	border-bottom: 1px dashed var(--color-main);
}

/* 子要素 */
.menu-item li a {
	color: var(--color-main);
	font-size: 80%;
}
.menu-item li a:hover {
	background-color: transparent;
	margin-left: 5px;
}
.menu-item li a:before {
	font-family: "Font Awesome 5 Free";
	content: "\f101";
	font-size: 50%;
	font-weight: bold;
	margin-right: 10px;
}

/* 子要素の余白 */
.menu-drawer .sub-menu {
	margin-top: 0.5rem;
}

/* アイコンの余白 */
.menu-drawer a .fas,
.menu-drawer a .far,
.menu-drawer a .fa,
.menu-drawer a .fab {
	margin-right: 3px;
}

/* ネームホバー */
.site-name-text:hover {
	opacity: .5;
}

/* 通知エリア */
.notice-area {
	color: #FFF;
	background-color: #88ABDA;
	font-size: 0.8em;
	font-weight: bold;
	padding: 0.3em;
}
.notice-area:after {
    font-family: 'Font Awesome 5 Free';
    font-weight: bold;
    content: "\f138";
    display: inline-block;
    padding-left: 7px;
	animation: sideMove 2s infinite;
}
.notice-area-link {
	transition: all .5s;
}





/************************************
 * フッター（一部トップページ記載）
 ************************************/
.footer {
	color: #555;
	background-color: #D1D1D1;
}
#footer a {
	color: var(--color-main);
	transition: 0.3s;
}
#footer a:hover {
	background-color: transparent;
    opacity: .5;
	transform: translate(3px, 0);
	transition: .3s;
}
#footer .site-name-text {
	color: #555;
}
#menu-footer-center li:not(:last-child),
#menu-footer-left li:not(:last-child),
#menu-footer-right li:not(:last-child) {
	border-bottom: 1px dashed var(--color-main);
}
.tagcloud a {
	border: 1px solid var(--color-main);
}





/************************************
 * 通知エリア
 ************************************/

.notice-area-link {
	transition: all .3s;	
}
.notice-area {
	font-weight: bold;
	background: linear-gradient(45deg, #82AAE3 0%, #91D8E4 50%, #BFEAF5 100%);
}












/****************************************************************************************************/





/**************************************************
 * トップページ｜アピールエリア
 **************************************************/

/* サイズ設定 */
.appeal {
	background-image: url(https://rufusuru.com/wp-content/uploads/appeal.webp);
	background-attachment: fixed;
	min-height: 600px;
/* 	min-height: calc(100vh - 84px); */
	min-width: 100%;
	background-size: cover;
	position: relative;
}
@media screen and (min-width: 768px){
	.appeal {
/* 		min-height: 800px; */
/* 		min-height: calc(100vh - 90px); */
		min-height: 100vh;
	}
}
/* ローライト設定 */
.appeal::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: rgba(69, 69, 69, .5);
}
.appeal-in {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}
.appeal-content {
	background-color: transparent;
	width: 100%;
	padding: 0 1em;
}
.appeal-title {
	color: var(--white);
	font-family: 'Rampart One', cursive;
	font-size: 2.5em;
	text-shadow: 0 4px 4px #333;
}
@media screen and (min-width: 768px){
	.appeal-title {
		font-size: 2em;
	}
}
.appeal-message p {
	color: var(--white);
	font-size: 1em;
	margin-top: 10px;
}
@media screen and (min-width: 768px){
	.appeal-message p {
		font-size: 1.2em;
	}
}
/* ボタン */
.appeal-button {
	position: relative;
	display: block;
	width: 70%;/*ボタンの幅*/
	overflow: hidden;
	padding: 10px 0;
	margin: 30px auto;
	background-color: #8EC5FC;
	border-radius: 5px;
	font-weight: bold;
	font-size: 18px;
	color: #FFF;
	text-align: center;
	text-decoration: none;
	text-shadow: 2px 2px 3px #555;
	transition: all .3s;
}
.appeal-button:hover {
	background-color: #E0C3FC;
	opacity: 1;
}
.appeal-button::after {
	position: absolute;
	content: '';
	display: inline-block;
	top: -180px;
	left: 0;
	width: 30px;
	height: 100%;
	background-color: #FFF;
	animation: shine 3s ease-in-out infinite;
}
@-webkit-keyframes shine {
	0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
	80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
	81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
	100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}




/**************************************************
 * トップページ｜ファーストセクション
 **************************************************/

/* 注意喚起 */
.topAttention {
	display: flex;
}
.topAttention-text {
	flex-basis: 50%;
	padding-right: 10px;
}
@media screen and (min-width: 768px) {
	.topAttention-text {
		flex-basis: 60%;
		padding-right: 30px;
	}
}
.topAttention-title {
	color: #88ABDA;
	font-size: 120%;
	font-weight: bold;	
}
@media screen and (min-width: 768px) {
	.topAttention-title {
		font-size: 150%;
	}
}
.topAttention-overview {
	font-size: 100%;
	margin-top: 10px;
}
@media screen and (min-width: 768px) {
	.topAttention-overview {
		font-size: 120%;
		margin-top: 30px;
	}
}
.topAttention-image {
	flex-basis: 50%;
}
@media screen and (min-width: 768px) {
	.topAttention-image {
		flex-basis: 40%;
	}
}
.topAttention-image > div {
	display: inline-block;
	position: relative;
}
.topAttention-image > div::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: calc(100% - 10px);
	height: calc(100% - 10px);
	border-image-source: repeating-linear-gradient(45deg, #FFFFAA, #FFFFAA 3px, rgba(0 0 0 / 0) 0, rgba(0 0 0 / 0) 6px);
	border-image-slice: 20;
	border-image-repeat: round;
	border-style: solid;
	border-width: 10px;
}
.topAttention-image > div > br {
	display: none;
}

/* お悩み */
.topProblem {
	display: flex;
	gap: 10px;
	margin-top: 150px;
}
@media screen and (min-width: 768px) {
	.topProblem {
		gap: 30px;
	}
}
.topProblem-item {
	flex-basis: 33.33%;
	background-color: #F1F1F1;
	border: 3px solid #555;
	border-radius: 10px;
}
.topProblem-image {
	margin-top: -70px;
}
.topProblem-text {
	color: #101010;
	font-size: 80%;
	padding: 10px;
}

/* 提案 */
.topPitch {
	font-size: 120%;
	font-weight: bold;
	text-align: center;
	margin-top: 70px;
}
.topPitch span {
	color: #88ABDA;
}




/**************************************************
 * トップページ｜セカンドセクション
 **************************************************/

.bg-works {
	margin-bottom: 0!important;
}
.bg-works .headline {
	margin-bottom: -70px;
}
.works-list {
	list-style: none;
	padding-left: 0!important;
	margin-bottom: 0!important;
	counter-reset: reason;
}
.works-item {
	position: relative;
	width: 100%;
	height: 400px;
	margin: 0!important;
}
@media screen and (min-width: 768px) {
	.works-item {
		height: 350px;
	}
}
.works-text {
	position: absolute;
	top: 140px;
	width: 100%;
	padding: 10px;
	line-height: 24px;
}
@media screen and (min-width: 768px) {
	.works-text {
		top: 50px;
		width: 45%;
	}
}
.works-item-odd  .works-text { left: 0px; }
.works-item-even .works-text { right: 0px; }
.works-text:before {
	position: absolute;
	content: "";
	top: -40px;
	width: 150%;
	height: 250px;
	display: block;
	background:linear-gradient(
		-45deg,
		transparent 25%, #F1F1F1 25%, #F1F1F1 50%,
		transparent 50%, transparent 75%, #F1F1F1 75%, #F1F1F1);
	background-size: 4px 4px;
	background-clip: padding-box;
	border-radius: 10px;
	z-index: -1;
}
@media screen and (min-width: 768px) {
	.works-text:before {
		top: 55px;
		height: 180px;
	}
}
.works-item-odd  .works-text:before { left: -30px; }
.works-item-even .works-text:before { right: -30px; }
.works-title {
	color: #FFF;
	font-size: 180%;
	font-weight: bold;
	text-shadow: 2px 2px 3px #555;
	counter-increment: reason;
}
@media screen and (min-width: 768px) {
	.works-title {
		color: #69788A;
		text-shadow: none;
	}
}
.works-title::before {
	content: counter(reason)".";
	margin-right: 10px;
	color: #FFFFAA;
}
@media screen and (min-width: 768px) {
	.works-title::before {
		color: #69788A;
	}
}
.works-overview {
	font-size: 14px;
	line-height: 30px;
	margin-top: 35px
}
@media screen and (min-width: 768px) {
	.works-overview {
		font-size: 14px;
	}
}
.works-overview br {
	display: none;
}
.works-link {
	position: relative;
	margin-top: 35px;
}
.works-link a {
	color: #555;
	font-weight: 500;
	text-decoration: none;
	margin-left: 90px;
}
.works-link a:before {
	position: absolute;
	content: "";
	top: calc(50% - 1px);
	left: 48px;
	transform: translateY(calc(-50% - 2px)) rotate(30deg);
	width: 12px;
	height: 2.5px;
	background-color: #555;
	transition: 0.3s;
}
.works-link a:after {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	width: 60px;
	height: 2px;
	background-color: #555;
	transition: 0.3s;
}
.works-link a:hover:before { left: 68px; }
.works-link a:hover:after { left: 20px; }
.works-image img{
	position: absolute;
	top: 0px;
	width: 100%;	
	border-radius: 10px;
}
@media screen and (min-width: 768px) {
	.works-image img {
		width: calc(100% - 50%);	
	}
}
.works-item-odd .works-image img { right: 0px; }
.works-item-even .works-image img { left: 0px; }





/************************************
 * トップページ｜コンタクトエリア
 ************************************/

.contact-flame {
	position: relative;
	background: url(https://sample-collection.com/sample000/wp-content/uploads/contact-image.webp) center / cover;
	text-align: center;
	margin: 0 calc(50% - 50vw) -95px;;
}
.contact-bg {
	min-height:100%;
	min-width:100%;
	background-color:rgba(69, 69, 69, .5);/*背景色、白を透過させる*/
	padding: 50px 10px;
}
@media screen and (min-width: 768px){
	.contact-bg {
		padding: 120px;
	}
}
.contact-title {
	color: var(--white);
	font-size: 150%;
}
.contact-overview {
	color: var(--white);
	font-size: 100%;
	margin-top: -20px;
}
@media screen and (min-width: 768px) {
	.contact-overview {
		font-size: 100%;
	}
}





/************************************
 * 【トップページ】デモサイトエリア
 ************************************/

.topDemo > .tab_content > .tab_content_description .c-txtsp {
	margin-bottom: 1em!important;
}
.topDemo-list {
	display: flex;
	justify-content: center;
	align-items: center;
}
.topDemo-item {
	flex-basis: 50%;
}
.topDemo-text {
	padding-left: 30px;
}
.topDemo-title{
	font-size: 120%;
	font-weight: bold;
	text-align: center;
}
.topDemo-overview {
	margin-top: 30px;
}
.topDemo-overview br {
	display: none;
}




/**************************************************
 * トップページ｜制作プランエリア（料金）
 **************************************************/

.topPrice {
	display: block;
}
@media screen and (min-width: 768px) {
	.topPrice {
		display: flex;
		gap: 30px;
	}
}
.topPrice .topPrice-frame {
	flex-basis: 50%;
	background-color: #FFF;
	margin-bottom: 0;
	padding-bottom: 1em;
}
.topPrice .topPrice-frame:nth-child(2) {
	margin-top: 30px;
}
@media screen and (min-width: 768px) {
	.topPrice .topPrice-frame:nth-child(2) {
		margin-top: 0;
	}
}
.topPrice-overview {
	margin-top: 30px;
}
.topPrice-overview p {
	font-size: 90%;
	margin-bottom: 1.8em!important;
	text-align: center;
}
@media screen and (min-width: 768px) {
	.topPrice-overview p {
		font-size: 100%;
	}
}
.topPrice-text-red {
	color: red;
}
.topPrice-text-ul {
	font-weight: bold;
	text-decoration: underline;
}


/**************************************************
 * トップページ｜プロセスエリア
 **************************************************/

.topProcess {
	padding-left: 0!important;
	counter-reset: step;
}
.topProcess li {
	position: relative;
	display: flex;
}
.topProcess li:nth-child(n+2) {
	margin-top: 50px;
}
.topProcess li:not(:last-child):before {
	position: absolute;
	content: '';
	top: 110%;
	left: 50%;
	transform: translateX(-50%);
	border-top: 15px solid #555;
	border-left: 15px solid transparent;
	border-right: 15px solid transparent;
}
.topProcess-photo {
	flex-basis: 20%;
	text-align: center;
}
.topProcess-step {
	font-size: 80%;
	font-weight: bold;
	counter-increment: step;
}
.topProcess-step::before {
	content: "STEP ";
}
.topProcess-step::after {
	content: counter(step);
}
.topProcess-image {
	
}
.topProcess-text {
	flex-basis: 80%;
	padding-left: 30px;
}
.topProcess-title {
	font-size: 120%;
	font-weight: bold;
}
.topProcess-title span {
	background: linear-gradient(transparent 60%, #FFFFAA 60%);
}
.topProcess-overview {
	
}





/**************************************************
 * トップページ｜コンタクトエリア2
 **************************************************/

.topContact2 {
	font-size: 150%;
    font-weight: bold;
	text-align: center;
}
.topContact2 span {
	font-size: 80%;
	font-weight: normal;
}
.topContact2-button {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 30px;
}
.topContact2-button1 {
	color: #FFF;
	background-color: #83CEEC;
	border: 1px solid #FFF;
	border-radius: 20px;
	width: 200px;
	text-align: center;
	margin-right: 20px;
}
.topContact2-button2 {
	color: #83CEEC;
	background-color: #FFF;
	border: 1px solid #FFF;
	border-radius: 20px;
	width: 200px;
	text-align: center;
}





/************************************
 * トップページ｜お知らせエリア
 ************************************/

.new-post {
	background-color: #9DDCDC;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	margin-top: -20px;
	padding-top: 15px;
	padding-bottom: 10px;
}
.new-post br,
.new-news .a-wrap .new-entry-card figure {
	display: none;
}
.new-news,
.new-news .a-wrap {
	margin-bottom: 0!important;
}
.new-news .a-wrap {
	position: relative;
	right: 0;
	padding: 0 15px 0 0;
	transition: all .3s;
}
.new-news .a-wrap:hover {
	right: -5px;
}
.new-news .a-wrap:after {
	position: absolute;
	content: "\f105";
	font-family: 'Font Awesome 5 Free';
	font-weight: bold;
	top: 0;
	right: 0;
	color: #88ABDA;
}
/* 新着記事のリンク設定 */
.new-entry-card-link {
	color: #555;
}
.new-entry-card-link:hover {
	color: #A3A3A3;
	background-color: transparent!important;
}
/* 新着記事のサムネ削除 */
.new-entry-card .card-thumb img {
	display: none;
}
/* 新着記事の日付表示 */
.new-entry-card-date {
	display: block;
}
.no-post-date .post-date {
	display: block;
}
.new-news .post-update {
	display: none;
}
.new-entry-card-date .post-date {
	color: #88ABDA;
	font-size: 14px;
	font-weight: bold;
}
@media screen and (min-width: 768px) {
	.new-entry-card-date .post-date {
		font-size: 16px;
	}
}
/* 新着記事の日付とタイトルを逆に */
.new-entry-card-content {
	display: flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
	margin-left: 0!important;
}
/* 新着記事のタイトル */
.new-entry-card-title {
	font-size: 16px;
	line-height: 1.5em;
}
@media screen and (min-width: 768px) {
	.new-entry-card-title {
		font-size: 18px;
	}
}
.new-news .new-entry-card-link:nth-child(n+2) {
	margin-top: 20px;
}



/****************************************************************************************************/





/************************************
 * 特定ページ｜コンタクトフォーム
 ************************************/

.contact-foam-text {
	text-align: center;
}
/* ボタン（本物） */
.contact7-button input {
	color: #FFF;
	background-color: #E6A014;
	border: 1px solid #E6A014;
	transition: all .3s;
}
.contact7-button input:hover {
	color: #E6A014;
	background-color: #FFF;
}





/**************************************************
 * 特定ページ｜料金プラン
 **************************************************/

.price-flame {
	position: relative;
	border: 1px solid #21AADE;
	margin-bottom: 72px;
	padding-bottom: 3em;
}
.tab_container .price-flame {
	margin-top: -3em;
}
.price-title {
	color: #FFF;
	background-color: #21AADE;
	text-align: center;
	padding: 0.5em 0;
}
.price-overview {
	padding-left: 1.5em;
	padding-right: 1.5em;
}
@media screen and (min-width: 768px) {
	.price-overview {
		padding-top: 1em;
		padding-left: 1em;
		padding-right: 1em;
	}
}
.price-image {
	text-align: center;
	margin-top: 1em;
}
.price-image > div {
	display: inline-block;
	position: relative;
}
.price-image > div::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: calc(100% - 10px);
	height: calc(100% - 10px);
	border-image-source: repeating-linear-gradient(45deg, #FCF69F, #FCF69F 3px, rgba(0 0 0 / 0) 0, rgba(0 0 0 / 0) 6px);
	border-image-slice: 20;
	border-image-repeat: round;
	border-style: solid;
	border-width: 10px;
}
.price-price {
	display: flex;
	justify-content: center;
	align-items: center;
}
.price-sale {
	position: relative;
	color: #21AADE;
	font-size: 300%;
	font-weight: bold;
	padding-top: 10px;
	background: linear-gradient(transparent 70%, #ff6 75%, transparent 80%)
}
.price-sale:before,
.price-discountTop del:before {
	font-family: "Font Awesome 5 Free";
	content: "\f157";
	font-weight: bold;
	font-size: 90%;
}
.price-monthly {
	color: #69788A;
	font-size: 50%;
	font-weight: normal;
}
.price-discount {
	text-align:center;
	margin-left: 1em;
}
.price-discountTop {
	font-size: 120%;
}
.price-discountBottom {
	color: #FFF;
	background-color: #21AADE;
	padding: 0 7px;
}
.price-days {
	text-align: center;
	font-size: 90%;
}
.price-listFlame {
	text-align: center;
	margin-top: 1em;
}
.price-list {
	display:inline-block;
	background-color: #E5F4FC;
	padding: 1em;
	margin-bottom: 0!important;
}
.price-list li{
	font-weight: bold;
	text-align: left;
	position: relative;
	padding-left: 25px;
	list-style: none;
}
.price-list li:before {
	content: "";
	position: absolute;
	top: .5em;
	left: 6px;
	-webkit-transform: rotate(50deg);
	-ms-transform: rotate(50deg);
	transform: rotate(50deg);
	width: 3px;
	height: 7px;
	border-right: 2px solid #88ABDA;
	border-bottom: 2px solid #88ABDA;
}
.price-list li:after {
	content: "";
	position: absolute;
	top: .35em;
	left: 0;
	width: 15px;
	height: 15px;
	border: 1px solid #88ABDA;
	border-radius: 2px;
}
.pranPage-overview p,
.pranPage-overview-ul {
	margin-bottom: 1.8em!important;
}
.pranPage-overview p br {
	display: none;
}





/**************************************************
 * 特定ページ｜特定商取引法に基づく表記
 **************************************************/

.sctl tr {
	font-size: 80%;
}
.sctl tr th {
	width: 20%;
}
@media screen and (min-width: 768px) {
	.sctl tr th {
		width: 25%;
	}
}
.sctl tr td br {
	display: none;
}
.sctl tr td p {
	margin-bottom: 0!important;
}