/* ========================================================================
ResetCss
======================================================================== */
/* 要素 フォントサイズ・マージン・パディングをリセット */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-size:100%;
	font-weight: normal;
	vertical-align:baseline;
	background:transparent;
}

/* 行の高=フォントサイズ */
body {
	line-height:1;
}

/* 新規追加要素をブロック要素化 */
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
	display:block;
}

/* ulのマーカー非表示 */
ol, ul {
	list-style: none;
}

/* 引用符の非表示 */
blockquote, q {
	quotes:none;
}

/* blockquote要素、q要素の前後にコンテンツ非表示 */
blockquote:before, blockquote:after,
q:before, q:after {
	content:'';
	content:none;
}

/* フォントサイズ　リセット フォントの縦方向 ベースライン揃え 点線削除 */
a {
	margin:0;
	padding:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent;
	outline: none;
	text-decoration: none;
}

/* ins要素 デフォルトセット 色を変える場合はここで変更 */
ins {
	background-color:#ff9;
	color:#000;
	text-decoration:none;
}

/* mark要素 デフォルトセット 色やフォントスタイルを変える場合はここで変更 */
mark {
	background-color:#ff9;
	color:#000;
	font-style:italic;
	font-weight:bold;
}

/* テキスト 打ち消し線 */
del {
	text-decoration: line-through;
}

/* IE　デフォルトで点線を下線表示設定　下線設定 マウスオーバー時 ヘルプカーソル表示可 */
abbr[title], dfn[title] {
	border-bottom:1px dotted;
	cursor:help;
}

/*　隣接するセルのボーダーを重ねて表示　*/
table {
	border-collapse:collapse;
	border-spacing:0;
}

/* 水平罫線デフォルトリセット */
hr {
	display:block;
	height:1px;
	border:0;
	border-top:1px solid #cccccc;
	margin:1em 0;
	padding:0;
}

/* 縦方向の揃え 中央揃え */
input, select {
	vertical-align:middle;
}

/* 画像を縦に並べた時に余白0 */
img {
	vertical-align: top;
	font-size: 0;
	line-height: 0;
}

/*box-sizingを全ブラウザに対応*/
*, *:before, *:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}

/*画像レスポンシブ*/
img {
	max-width: 100%;
	height: auto;
}

/*改行のweb際のBR高さバグ修正*/
br {
	line-height: inherit;
}

input{
	-webkit-appearance: none;
}

/*  レスポンシブ用
-------------------------------------------------------------*/
/*  pcのみ  */
.sp-only {display: none !important;}
.pc-only {display: block !important;}

/*  spのみ  */
@media screen and (max-width: 969px) {
	.pc-only {display: none !important;}
	.sp-only {display: block !important;}
}

/*  リンク類
-------------------------------------------------------------*/
a {color: #000000;}
form {margin: 0;}

/* その他 共通
-------------------------------------------------------------*/
html {overflow: auto; height: 100%;}
body{
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 500;
	height: 100%;
	position: relative;
}

.en {font-family: "Montserrat", sans-serif;}

p {font-size: 16px; line-height: 2; font-weight: 400;}
.inner {width: 100%; max-width: 1200px; margin: 0 auto;}


.cmn-button {position: relative; z-index: 0; display: flex; justify-content: center; align-items: center; box-shadow: 4px 8px 24px #00000029; border-radius: 25px; color: #FFFFFF;}
.cmn-button::before {content: ""; width: 100%; height: 100%; position: absolute; z-index: -1; left: 0; transition: all 0.3s ease-in-out; background: transparent linear-gradient(90deg, #8B76D6 0%, #00B3BA 100%) 0% 0% no-repeat padding-box; border-radius: 25px; }
.cmn-button::after {content: ""; width: 100%; height: 100%; position: absolute; z-index: -2; left: 0; background: linear-gradient(#fff, #fff); border-radius: 25px; border: 1px solid #8677d6;}

.cmn-button:hover:before{opacity:0;}
.cmn-button:hover {background: transparent linear-gradient(90deg, #fff 0%, #fff 100%) 0% 0% no-repeat padding-box; width: 240px; height: 50px; color: #8677D6; transition: all 0.3s ease-in-out;}

.cmn-button.reverse {position: relative; z-index: 0; display: flex; justify-content: center; align-items: center; box-shadow: 4px 8px 24px #00000029; border-radius: 30px; color: #8677D6;}
.cmn-button.reverse::before {content: ""; width: 100%; height: 100%; position: absolute; z-index: -1; left: 0; transition: all 0.3s ease-in-out; background: transparent linear-gradient(90deg, #fff 0%, #fff 100%) 0% 0% no-repeat padding-box; border-radius: 30px; color: #8677D6;}
.cmn-button.reverse::after {content: ""; width: 100%; height: 100%; position: absolute; z-index: -2; left: 0; background: none; border-radius: 30px; border: 1px solid #fff;}

.cmn-button.reverse:hover:before{opacity:0;}
.cmn-button.reverse:hover {background: rgb(0, 0, 0, 0); width: 300px; height: 60px; color: #fff; transition: all 0.3s ease-in-out; box-shadow: none;}



@media screen and (max-width: 969px) {
	p {font-size: 13px;}
}

/* =======s=========================================================
ヘッダー
=================================================================*/
header {padding-top: 23px;}
header h1 {max-width: 1200px; margin: 0 auto; font-size: 10px;}
header .inner {display: flex; justify-content: space-between; align-items: flex-start;}

header .logo {display: flex; align-items: center; margin-top: 8px;}
header .logo .main {font-size: 34px; line-height: 34px;}
header .logo .main img {display: block;}
header .logo .sub {font-size: 12px; line-height: 1.416666666666667; font-weight: 700; display: inline-block; margin-left: 7px;}

header .menu {display: flex; align-items: flex-end; position: relative; top: -5px;}
header .menu a {display: flex; justify-content: flex-start; align-items: center; flex-direction: column; height: 50px; position: relative; padding-top: 17px;}
header .menu a .txt {font-size: 16px; font-weight: 500;}
header .menu a:after {content: ""; display: block;}
header .icon-arrow_down {margin-top: 6.3px; opacity: 0; transition-timing-function: ease-out; transition-duration: 0.3s; display: inline-block; vertical-align: middle; color: #333; line-height: 1; position: relative; width: 7px; height: 7px; transform: translateX(-25%) rotate(135deg); }
header .icon-arrow_down::before, .icon-arrow_down::after { content: ''; position: absolute; background: transparent linear-gradient(90deg, #8B76D6 0%, #00B3BA 100%) 0% 0% no-repeat padding-box; border-radius: 2px; }
header .icon-arrow_down::before { top: 0; left: 0; right: 0; height: 2px; }
header .icon-arrow_down::after { top: 0; right: 0; bottom: 0; width: 2px; }
header .menu a:hover .icon-arrow_down {opacity: 1; transition-timing-function: ease-out; transition-duration: 0.3s;}

header .menu a + a {margin-left: 30px;}
header .menu .button {width: 240px; height: 50px; font-size: 16px; font-weight: 500; justify-content: center; padding-top: 0px; margin-left: 40px;}
header .menu .button .pc-only {display: inline !important;}

@media screen and (max-width: 969px) {
	header {padding: 16px 10px;}
	header h1 {font-size: 10px;}
	header .logo {margin-top: 12px;}
	header .logo .main {font-size: 21px; line-height: 1.235294117647059;}
	header .logo .sub {font-size: min(2.5vw, 10px); margin-left: 9px; line-height: 1.5; width: 14em;}
	header .menu {top: 2px;}
	header .menu .text-link {display: none;}	
	header .menu .button {margin-top: 12px;}
	header .menu .button .pc-only {display: none !important;}
	header .menu .button {width: 123px; height: 40px; font-size: 12px; margin-left: 0;}
	header .inner {align-items: center;}
}

/* =================================================================
フッター
=================================================================*/
footer {background: #fff; padding: 80px 0;}
footer .inner {display: flex; justify-content: space-between; align-items: flex-start;}

footer .company-info .name {font-size: 16px; line-height: 1.5; font-weight: 700; margin-bottom: 20px; letter-spacing: 0.96px;}
footer .company-info .access {font-size: 14px; font-weight: 500; letter-spacing: 0.84px;}

footer .footer-menu {display: flex; justify-content: flex-end; align-items: flex-start; padding-right: 24px;}
footer .footer-menu a {display: block; font-size: 14px; letter-spacing: 0.06em; line-height: 1.428571428571429; font-weight: 500;}
footer .footer-menu a + a {margin-top: 8px;}
footer .footer-menu a:before {content: "・"; color: #03B2BA; display: inline-block; margin-right: 4px; font-weight: 700; line-height: 1.5;}
footer .footer-menu .box + .box {margin-left: 40px;}

footer .copy {font-size: 12px; line-height: 1; letter-spacing: 0.06em; font-weight: 500; max-width: 1200px; margin: 48px auto 0;}

@media screen and (max-width: 969px) {
	footer {padding: 5px 30px 80px;}
	footer .inner {flex-direction: column;}
	footer .company-info {margin-bottom: 24px;}
	footer .footer-menu {flex-direction: column;}
	footer .footer-menu .box + .box {margin-left: 0; margin-top: 8px;}
	footer .copy {max-width: 375px; font-size: 10px; letter-spacing: 0.6px; line-height: 2;}
}


/* =================================================================
トップ共通
=================================================================*/
.cmn-title {display: flex; flex-direction: column; align-items: center; justify-content: center; margin-bottom: 60px;}
.cmn-title .jp {font-size: 36px; letter-spacing: 2.16px; font-weight: 700; line-height: 1.444444444444444;}
.cmn-title .en {display: flex; color: #fff; justify-content: center; align-items: center; margin-bottom: 14px; font-size: 14px; letter-spacing: 4.2px; font-weight: 700; background: transparent linear-gradient(90deg, #8B76D6 0%, #00B3BA 100%) 0% 0% no-repeat padding-box; padding: 0 0 0 2px;}

.cmn-title.white {color: #fff;}
.cmn-title.white .en {background: #fff;}
.cmn-title.white .en span {font-weight: 700; display: inline-block; background: linear-gradient(90deg, #8B76D6 0%, #00B3BA 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}


@media screen and (max-width: 969px) {
	.cmn-title {margin-bottom: 40px;}
	.cmn-title .jp {font-size: 24px;}
	.cmn-title .en img {margin-bottom: 9px;}
}

/* =================================================================
FV
=================================================================*/
.fv {overflow: hidden; position: relative; background: rgb(0, 0, 0, 0); padding-top: 5px;}
.fv:after {content: ""; display: block; width: 100%; height: 79px; background: #fff; position: absolute; bottom: 78px; z-index: 2; border-radius: 0px 0px 30px 30px}
.fv .inner {position: relative; height: 777px;}
.fv .main {padding-top: 148px; position: relative; z-index: 6; font-size: 46px; line-height: 1.434782608695652; letter-spacing: 2.76px; font-weight: 700; margin-bottom: 61px;}
.fv .image-box {width: 81%; max-width: 971px; position: absolute; right: -214px; top: 0; z-index: 5;}
.fv .button {width: 300px; height: 60px; border-radius: 30px; position: relative; z-index: 6;}
.fv .button:before,
.fv .button:after {border-radius: 30px;}

@media screen and (max-width: 969px) {
	.fv {padding-top: 4.407vw; height: 180vw; max-height: 100%;}
	.fv:after {display: none;}
	.fv .inner {display: flex; flex-direction: column; align-items: center; height: auto;}
	.fv .main {padding-top: 0; order: 1; font-size: 7.1025vw; line-height: 1.9; letter-spacing: 0.176em; padding-left: 7.5vw; margin-bottom: 1.25vw;}
	.fv .image-box {position: static; order: 2; display: flex; justify-content: flex-end; width: 100%; margin-bottom: 6.25%; position: relative; right: -59px; overflow: hidden;}
	.fv .image-box img {max-width: 108.5%;}
	.fv .button {order: 3; width: 246px; height: 52px; font-size: 14px;}
}

/* =================================================================
ABOUT
=================================================================*/
.about {height: 664px; margin: -156px auto -100px; position: relative; z-index: 1; overflow: hidden;}
.about .wrap {height: 665px; margin: 1px 0 1px; background: transparent linear-gradient(180deg, #8B76D6 0%, #00B3BA 100%) 0% 0% no-repeat padding-box;}
.about:after {content: ""; display: block; width: 100%; height: 100px; background: #F7F7F7; position: absolute; bottom: 0; z-index: 1; border-radius: 30px 30px 0px 0px;}
.about h2 {margin-bottom: 46px;}
.about p {font-size: 16px; text-align: center; color: #FFFFFF; font-weight: 600; text-align: center; margin: 0 auto; padding: 0 10%;}
.about .inner {position: absolute; left: calc(50% - 600px); right: auto; margin: auto; min-width: 1200px; height: 619px; padding: 210px 0;}
.about .image {position: absolute; z-index: 2;}

.about .image01 {width: 530px; left: -85px; top: 128px; z-index: 3;}
.about .image02 {width: 624.5px; left: -233px; bottom: -44px; z-index: 2;}
.about .image03 {width: 509.5px; right: -161px; top: 128px;}

@media screen and (max-width: 969px) {
	.about {height: 886px; margin: -30px auto -90px;}
	.about:before {content: ""; display: block; width: 100%; height: 30px; background: #fff; position: absolute; top: 0px; z-index: 2; border-radius: 0px 0px 30px 30px}
	.about h2 {margin-bottom: 38px;}
	.about p {font-size: 18px; padding: 0 43px; text-align: left; width: 33%;}
	.about:after {height: 100px; border-radius: 30px 30px 0 0;}
	.about .wrap {height: 884px;}
	.about .inner {padding: 286px 0 0; height: 811px;}

	.about .image01 {width: 396px; left: 229px; top: 0.06%; z-index: 3;}
	.about .image02 {width: 496px; left: 89px; bottom: auto; top: 157px; z-index: 2;}
	.about .image03 {width: 449px; right: 205px; top: auto; bottom: -75px;}
}

/* =================================================================
FEATURE
=================================================================*/
.feature {padding: 100px 0; background: #F7F7F7; border-radius: 30px 30px 0px 0px; counter-reset: number 0; overflow: hidden;}
.feature h2 {margin-bottom: 120px;}
.feature .box {background: #fff; border-radius: 20px; }
.feature .box + .box {margin-top: 120px;}
.feature .box-inner {position: relative; top: -32px; padding-right: 56.167%;}
.feature strong {font-weight: bold;}
.feature h3 {font-size: 70px; line-height: 1; font-weight: 700; display: flex; align-items: flex-end; margin-bottom: 45px; padding: 0 0 0 80px;}
.feature h3:before {counter-increment: number 1; content: "0" counter(number); line-height: 1}
.feature .title {font-size: 20px; line-height: 1; text-transform: uppercase; font-weight: 700; padding-left: 8px; position: relative; top: -8px;}
.feature .title-jp {padding: 0 0 0 80px;}
.feature h4 {color: #655ccd; font-size: 30px; font-weight: 600; line-height: 1.4; margin-bottom: 28px;}
.feature p {max-width: 526px; padding: 0 0 36px 80px;}
.feature .image {box-shadow: 4px 8px 24px #00000029; border-radius: 10px; max-width: 647px; width: 54%; position: absolute; right: -23px; top: -29px;}

.feature .box:nth-child(even) .image{right: auto; left: -23px;}
.feature .box:nth-child(even) .box-inner {padding-right: 0; padding-left: 56.167%;}
.feature .box:nth-child(even) h3 {padding: 0 80px 0 0px; position: relative; top: 1px; top: 9px; left: -7px; margin-bottom: 55px;}
.feature .box:nth-child(even) .title {top: -7px;}
.feature .box:nth-child(even) .title-jp {padding: 0 80px 0 0px;}
.feature .box:nth-child(even) p {max-width: 526px; padding: 0 80px 71px 0px;}

.feature .box.feature02 p {padding: 0 80px 33px 0px;}
.feature .box.feature04 .title {padding-left: 0px;}
.feature .box.feature04 p {padding: 0 80px 66px 0px;}
.feature .box.feature06 .title {left: 4px; padding-left: 0;}
.feature .box.feature07 {height: 481px;}
.feature .box.feature07 .title {left: -7px; padding-left: 0;}


@media screen and (max-width: 969px) {
	.feature h2 {margin-bottom: 68px;}
	.feature .inner {padding: 0 10px;}
	.feature .box {height: auto;}
	.feature .box-inner {padding: 0 20px 0px; display: flex; flex-direction: column; top: -22px;}
	.feature .box + .box {margin-top: 60px;}
	.feature h3 {font-size: 60px; padding: 0 0 0 0; order: 1; margin-bottom: 15px;}
	.feature .title {font-size: 16px; top: -6px;}
	.feature .title-jp {padding: 0 0 0 0; order: 2;}
	.feature h4 {font-size: 24px; line-height: 1.4; margin-bottom: 30px;}
	.feature .image {order: 3; position: static; max-width: 100%; width: 100%; margin-bottom: 38px;}
	.feature p {padding: 0; order: 4; max-width: 100%;}

	.feature .box:nth-child(even) h3 {padding: 0 0px 0 0px;}
	.feature .box:nth-child(even) .title-jp {padding: 0;}
	.feature .box:nth-child(even) .box-inner {padding: 0 20px 0px;}
	.feature .box:nth-child(even) p {max-width: 100%; padding: 0;}
}

/* =================================================================
PRICE
=================================================================*/
.price {padding: 100px 0 90px; overflow: hidden;}
input[name="tab_switch"] {display: none;}

@media screen and (min-width: 970px) {
	.tabs {display: grid; grid-template-columns: repeat(3, 33.333%); grid-template-rows: 98px 1fr; grid-column-gap: 0px; grid-row-gap: 0px; width: 100%;}
	.tab01 { grid-area: 1 / 1 / 2 / 2; }
	.tab02 { grid-area: 1 / 2 / 2 / 3; }
	.tab03 { grid-area: 1 / 3 / 2 / 4; }
	#tab01_content { grid-area: 2 / 1 / 3 / 2; }
	#tab02_content { grid-area: 2 / 2 / 3 / 3; }
	#tab03_content { grid-area: 2 / 3 / 3 / 4; }

	.tab_label {border-radius: 20px 20px 0 0; display: flex; justify-content: flex-start; align-items: center; flex-direction: column; width: 100%; max-width: 300px; height: 98px; color: #fff; font-size: 24px; font-weight: bold; letter-spacing: 1.44px; padding-top: 26px;}
	.tab_label .en {font-size: 14px; letter-spacing: 0.2em; margin-top: 12px; font-weight: 700;}

	.tab01 {background: #81D8DC;}
	.tab02 {background: #4FC9CF; margin: 0; position: relative; left: 3px;}
	.tab03 {background: #03B2BA; position: relative; left: 7px;}

	.column-title {width: 33.333%; max-width: 280px; padding-top: 108px;}
	.column-title p {background: #EDEDED; border-radius: 20px 0px 0px 20px; height: 98px; display: flex; justify-content: center; align-items: center; font-weight: 700; font-size: 20px; border-right: 1px solid #fff; letter-spacing: 1.2px; line-height: 1.45;}
	.column-title p + p {margin-top: 10px;}

	.tab_content {width: 100%; max-width: 307px; padding-top: 10px;}
	.tab_content:last-child {max-width: 306px;}
	.tab_content table {width: 100%;}
	.tab_content table th {display: none;}
	.tab_content table td {background: #F7F7F7; width: 100%; max-width: 307px; height: 108px; display: flex; justify-content: center; align-items: center; font-size: 40px; font-weight: 700;}
	.tab_content table .csv td {font-size: 24px; font-weight: 700;}
	.tab_content table .fee {font-size: 20px;}
	.tab_content table .fee strong {font-size: 40px; font-weight: 700;}
	.tab_content table .museigen {font-size: 24px;}
	.tab_content table td {border-bottom: 10px solid #fff; border-right: 1px solid #fff;}
	#tab03_content td {border-radius: 0 20px 20px 0; border-right: 0;}

	.price .inner {}
}

@media screen and (max-width: 969px) {
	.price {padding: 80px 10px 100px;}
	.tabs { display: flex; flex-wrap: wrap; }
	.tab_label {width: 100%; border-radius: 20px 20px 0 0; background: #EDEDED; position: relative; z-index: 1; cursor: pointer; flex: 1; padding: 11px 0; margin: 0 4px 0 0; font-size: 13px; font-weight: 700; letter-spacing: 0.78px; color: #000; text-align: center; height: 41px; line-height: 1.461538461538462;}
	.tab_label.last {margin-right: 0;}
	.tab_label:hover {opacity: 0.75; }
	.tab_content {flex: 100%; display: none; overflow: hidden; border: 4px solid #81D8DC;}
	
	.tabs input:checked + .tab_label {color: #fff; background-color: #81D8DC; }

	#tab01:checked ~ #tab01_content,
	#tab02:checked ~ #tab02_content,
	#tab03:checked ~ #tab03_content {display: block;}
	.tab_content {position: relative; animation: fadeIn 1s ease; width: 100%; max-width: 100%; border-radius: 0 0 20px 20px;}
	.tab_content table th {display: block;}
	.tab_content table td {max-width: 100%; height: auto; border-bottom: 0px; border-right: 0px;}

	.price table {width: 100%;}
	.tab_content table th,
	.tab_content table td {display: block; width: 100%; background: #F7F7F7; text-align: center;}

	.tab_content table tr:nth-child(even) th,
	.tab_content table tr:nth-child(even) td {background: #fff;}

	.tab_content table th {font-size: 13px; font-weight: 700; padding-top: 13px;}
	.tab_content table td {font-size: 24px; font-weight: 700; padding-bottom: 14px; padding-top: 8px;}
	.tab_content table strong {font-size: 24px; font-weight: 700;}
	.tab_content table .fee {font-size: 11px;}
	.tab_content table .fee strong {font-size: 24px;}

	.column-title {display: none;}
}

/* =================================================================
UPDATE
=================================================================*/
.update {padding: 100px 0 99px; background: #03B2BA; overflow: hidden;}
.update .inner {padding-top: 81px;}
.update .cmn-title.white .en span {background: linear-gradient(90deg, #8B76D6 0%, #5190CA 100%, #00B3BA 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.update .box {background: #fff; border-radius: 20px; position: relative; width: 100%; min-height: 415px; padding: 84px 56% 78px 80px;}
.update .box h3 {background: transparent linear-gradient(90deg, #8B76D6 0%, #00B3BA 100%) 0% 0% no-repeat padding-box; color: #fff; font-size: 30px; font-weight: 700; letter-spacing: 1.8px; display: inline-block; line-height: 35px; padding: 0 2px; margin-bottom: 30px; height: 36px;}
.update .box .image {border-radius: 10px; box-shadow: 4px 8px 24px #00000029; max-width: 647px; width: 53.92%; position: absolute; top: -60px; right: -23px;}
.update .box p {max-width: 446px;}

@media screen and (max-width: 969px) {
	.update {padding: 80px 10px 100px;}
	.update .inner {padding-top: 0;}
	.update .box {padding: 33px 20px 28px; display: flex; flex-direction: column; align-items: flex-start;}
	.update .inner + .inner {margin-top: 2em;}
	.update .box h3 {order: 1; font-size: 24px; letter-spacing: 1.44px;}
	.update .box .image {position: static; order: 2; width: 100%; max-width: 100%; margin-bottom: 40px;}
	.update .box p {order: 3; max-width: 100%;}

}

/* =================================================================
SCENE
=================================================================*/
.scene {padding: 100px 0 149px; overflow: hidden;}
.scene h2 {margin-bottom: 79px;}
.scene-inner {margin: auto;}
.scene .box {width: 100%; height: 557px; max-width: 1200px; margin: auto; position: relative; padding-top: 80px;}
.scene .box .box-inner {max-width: 775px; position: absolute; right: -108px;}
.scene .box .box-inner:before {content: ""; position: absolute; top: 0; right: 0; width: 766px; height: 100%; display: block; background: #F7F7F7; border-radius: 20px; z-index: -1;}
.scene .box:nth-child(even) .box-inner {right: auto; left: -117px;}

.scene .box + .box {margin-top: 60px;}
.scene .title {margin-bottom: 26px; padding: 80px 108px 0 167px;}
.scene .title span {display: block;}
.scene .title .jp {font-size: 30px; letter-spacing: 1.8px; font-weight: 700; line-height: 1.466666666666667;}
.scene .title .en {font-size: 14px; letter-spacing: 4.2px; font-weight: 700; color: #8677D6; margin-top: 10px; line-height: 1.285714285714286;}
.scene .box img {max-width: 775px; width: 100%; position: absolute; left: -691px; top: -80px; border-radius: 20px;}
.scene .box p {padding: 0 108px 75px 166px;}

.scene .box:nth-child(even) {height: 546px;}
.scene .box:nth-child(even) img {left: auto; right: -700px;}
.scene .box:nth-child(even) .title {padding: 80px 158px 0 117px;}
.scene .box:nth-child(even) p {padding: 0 161px 65px 117px;}

.scene .box.scene03 {margin-top: 80px; height: 588px;}

@media screen and (max-width: 969px) {
	.scene {padding: 100px 0 80px;}
	.scene .box {height: auto;}
	.scene .box + .box {margin-top: 40px;}
	.scene .title {order: 1; padding: 24px 0 0px 20px;}
	.scene .title .jp {font-size: 21px;}
	.scene .title .en {font-size: 12px;}
	.scene .box {padding: 0 10px;}
	.scene .box p {order: 3; padding: 30px 20px 24px;}
	.scene .box img {position: static; order: 2; border-radius: 0; max-width: 100%;}
	.scene .box .box-inner {position: static; display: flex; flex-direction: column; background: #F7F7F7; border-radius: 20px; max-width: 100%;}
	.scene .box .box-inner:before {display: none;}

	.scene .box:nth-child(even) {height: auto;}
	.scene .box:nth-child(even) .title {padding: 24px 0 0px 20px;}
	.scene .box:nth-child(even) p {padding: 30px 20px 24px;}
}

/* =================================================================
FAQ
=================================================================*/
.faq {background: #F7F7F7; padding: 100px 0;}
.faq .box {position: relative; display: flex; align-items: flex-start; align-items: stretch; background: #fff; border-radius: 6px; width: 100%; max-width: 1040px; margin: auto;}
.faq .box:before {position: absolute; left: 0; width: 10px; height: 100%;background: transparent linear-gradient(180deg, #8B76D6 0%, #00B3BA 100%) 0% 0% no-repeat padding-box; border-radius: 5px 0px 0px 5px; content: ""; display: block;}
.faq .box + .box {margin-top: 30px;}
.faq .box-wrap {padding: 56px 40px 46px 70px;}
.faq .question h3 {font-size: 24px; font-weight: 700; line-height: 1.4; margin-bottom: 21px;}
.faq .question h3:before {content: "Q.";}

@media screen and (max-width: 969px) {
	.faq {padding: 80px 10px;}
	.faq .box-wrap {padding: 24px 52px 15px 37px;}
	.faq .question h3 {font-size: 18px; line-height: 1.444444444444444;}
	.faq .answer p {font-size: 13px;}
}

/* =================================================================
CTA
=================================================================*/
.cta {overflow: hidden; background-size: 100%; height: 561px; background: transparent linear-gradient(180deg, #8B76D6 0%, #00B3BA 100%) 0% 0% no-repeat padding-box; position: relative;}
.cta .inner {padding-top: 152px; position: absolute; left: calc(50% - 600px); right: auto; margin: auto; z-index: 2; height: 100%; width: 1200px;}
.cta h2 {font-size: 40px; letter-spacing: 2.4px; color: #fff; text-align: center; font-weight: 700; line-height: 1.5;}
.cta h2 span {font-size: 26px;}
.cta .button {width: 300px; height: 60px; margin: 40px auto 0; font-weight: 700;}
.cta .image {position: absolute; z-index: 1;}
.cta .image01 {width: 315px; top: 22px; left: -19px;}
.cta .image02 {width: 374px; right: -49px; bottom: -57px;}

.cta .bg {position: absolute; top: 0; left: calc(50% - 960px); right: 0; margin: auto; min-width: 1920px; display: block;}


@media screen and (max-width: 969px) {
	.cta {height: 500px; background: #F7F7F7; padding: 1px 0;}
	.cta .wrap {height: 450px; background: transparent linear-gradient(180deg, #8B76D6 0%, #00B3BA 100%) 0% 0% no-repeat padding-box;}
	.cta .inner:before {content: ""; width: 100%; height: 43px; display: block; position: absolute; left: 0; right: 0; top: -1px; z-index: 0; background: #F7F7F7;}
	.cta .inner:after {content: ""; width: 100%; height: 75px; display: block; position: absolute; left: 0; right: 0; bottom: -1px; z-index: 0; background: #fff;}
	.cta .inner {padding-top: 120px; width: 100%; left: calc(50% - 50%);}
	.cta h2 {font-size: 18px; letter-spacing: 1.08px; line-height: 2; padding-inline: 1em;}
	.cta h2 span {font-size: 14px;}
	.cta .button {width: 211px; height: 52px; font-size: 14px;}
	.cta .image01 {width: 167px; top: -23px; left: -59px;}
	.cta .image02 {width: 189px; bottom: 0; right: -67px;}
}

@media screen and (min-width:1919px) {
	.cta .bg {left: calc(50% - 50%); object-fit: cover; width: 100%;}
}

/* 2024/08/21 追加 */
.cv-box {
	text-align: center;
	margin-top: 3em;
}

.cv-box__button {
	display: inline-block;
	padding: 1em 3.5em;
	background-color: #03B2BA;
	border: 1px solid #03B2BA;
	color: #fff;
	border-radius: 4em;
	font-size: 18px;
	line-height: 1.4;
	font-weight: bold;
	cursor: pointer;
	transition: color .1s ease-in-out, background-color .1s ease-in-out;
}

.cv-box__button:hover {
	color: #03B2BA;
	background-color: #fff;
}

.price-value {
	text-align: center;
	font-size: 3.4rem;
	span {
		font-size: .5em;
	}
	strong {
		font-size: 1em;
		font-weight: bold;
	}
}
@media screen and (max-width: 969px) {
	.price-value {
		text-align: center;
		font-size: 2rem;
	}
}
.price-lead {
	text-align: center;
}
.main span {
	display: block;
	font-size: .65em;
	margin-block-start: .25em;
}

.news-area {
	padding-block: 4em 10em;
	background-color: #F7F7F7;
}

.news-area_panel {
	background-color: #fff;
	text-align: center;
	padding: 2em;
	max-width: 1040px;
	width: 100%;
	margin-inline: auto;
}

@media screen and (max-width: 969px) {
	header .logo {
		flex-direction: column;
		align-items: flex-start;
	}

	header .logo .sub {
		margin-left: 0;
	}
}

@media screen and (max-width: 969px) {
	header .menu .button {
		width: auto;
		padding-inline: 1em;
	}
}

@media screen and (max-width: 969px) {
	.fv .main {
		padding-inline: 10px;
	}
}

@media screen and (max-width: 969px) {
	.about {
		height: auto;
	}
	.about .inner {
		padding: 80px 10px 150px;
		height: auto;
		position: relative;
	}
	.about .wrap {
		height: auto;
	}
	
}

.price-box {
	display: block grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: 3em;
	background-color: #F7F7F7;
	padding: 3em;
	margin-top: 2em;
	border-radius: 20px;
}

.price-box__text {
	display: block grid;
	gap: 1em;
}

.price-box__text h3 {
	font-size: 1.5em;
	font-weight: bold;
	line-height: 1.4;
}

@media screen and (max-width: 969px) {
	.price-box__image {
		text-align: center;
	}
	.price-box {
		grid-template-columns: auto;
		gap: 2em;
		padding: 3em 1.5em;
	}
}