@charset "UTF-8";


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

	system

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

footer{
	margin-top: 0;
}

#page_header {
    margin-bottom: 122px;
}

#page_header::after{
    content: '';
    display: block;
    width: 100%;
    height: 19.166667vw;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: cover;
    background-image: url(../images/system/page_header_line_top.png);
    position: absolute;
    bottom: 1.875vw;
    left: 0;
    z-index: 1;
}

#page_header .text_wrapper {
    width: 1084px;
    top: 96px;
    transform: translate(-50%, 0);
    display: flex;
    z-index: 5;
}

#page_header .text_wrapper .image_area{
	width: 385px;
}

#page_header .text_wrapper .text_area{
	width: calc(100% - 385px);
	padding-top: 32px;
}

#page_header .text_wrapper .text_area h1{
	padding-bottom: 16px;
	margin-bottom: 24px;
	font-size: 64px;
	font-weight: 700;
	line-height: 1.1;
	color: var(--color1);
	position: relative;
}

#page_header .text_wrapper .text_area h1 strong::after{
	content: '';
	display: block;
	width: 100%;
	height: 3px;
	background: -webkit-linear-gradient(left, rgba(179, 157, 80, 1) 0%, rgba(179, 157, 80, 0) 100%);
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
}

#page_header .text_wrapper .text_area h1 small{
	display: block;
	font-size: 32px;
	font-weight: 700;
	color: var(--text_w);
	line-height: 1.1;
	text-shadow: 0 -4px 4px rgba(255, 255, 255, 0.25), 0 2px 2px rgba(0, 0, 0, 0.35);
	margin-bottom: 12px;
}

#page_header .text_wrapper .text_area .h1_caption{
	font-size: 18px;
	font-weight: 700;
	color: var(--text_w);
	line-height: 2.0;
}

#page_header .text_wrapper .text_area .btn{
	width: 267px;
	margin-top: 20px;
	position: relative;
    z-index: 6;
}

#page_header .header_caption{
	width: 1089px;
	background: linear-gradient(90deg, #000 0%, #3D2C03 100%);
	padding: 48px 0 64px;
	position: absolute;
	top: 507px;
	left: 50%;
	transform: translate(-50%, 0);
	text-align: center;
	filter: drop-shadow(0 20px 40px rgba(25, 24, 23, 0.50));
	z-index: 50;
}

#page_header .header_caption::after,
#page_header .header_caption::before{
	content: '';
	display: inline-block;
	width: 225px;
	height: 133px;
	background-repeat: no-repeat;
	background-position: 0 0;
	background-size: contain;
	background-image: url('../images/system/header_caption_decoration.png');
	position: absolute;
	bottom: 0;
	left: 8px;
}

#page_header .header_caption::after{
	left: unset;
	right: 8px;
	transform: scale(-1, 1);
}

#page_header .header_caption .en_text{
	font-size: 24px;
	font-weight: 700;
	color: var(--color2);
	line-height: 1;
	padding: 16px 0;
}

#page_header .header_caption .jp_text{
	font-size: 40px;
	font-weight: 700;
	color: #fff;
	line-height: 1.4;
	margin-bottom: 8px;
}

#page_header .header_caption .caption{
	font-size: 28px;
	color: rgba(255, 255, 255, 0.90);
	font-weight: 400;
	line-height: 1.5;
}



.cont_wrapp{
	text-align: center;
}

.cont_wrapp h2{
	display: inline-block;
	height: 112px;
	margin-bottom: 8px;
}

#beginner .cont_wrapp h2::before{
	content: '';
	display: inline-block;
	width: 564px;
	height: 806px;
	background-repeat: no-repeat;
	background-position: 0 0;
	background-size: contain;
	background-image: url('../images/system/cont_wrapp_bg_symbol.png');
    position: absolute;
    top: -103px;
    left: 0;
    right: 0;
    margin: auto;
    z-index: -1;
}

.cont_wrapp h2 img{
	width: auto;
	height: 100%;
}

.header_title2 .title_before {
    max-width: unset;
    height: 111px;
}



.cont_wrapp .h2_jp{
	font-size: 40px;
	font-weight: 700;
	line-height: 1.4;
	margin-bottom: 40px;
}


#beginner{
	position: relative;
}


#advanced{
	position: relative;
	z-index: 2;
	background-repeat: repeat-y;
	background-position: 0 0;
	background-size: 100% auto;
	background-image: url('../images/common/body_bg02.jpg');
	padding: 23.402778vw 0 194px;
	margin-top: 61.111111vw;
}

.webp #advanced{
	background-image: url('../images/common/body_bg02.webp');
}

#advanced::before{
	content: '';
	display: block;
	width: 100%;
	height: 74.930556vw;
	background-repeat: no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
	background-image: url('../images/system/advanced_bg.png');
	position: absolute;
	top: -73.611111vw;
	left: 0;
	z-index: -1;
}

.webp #advanced::before{
	background-image: url('../images/system/advanced_bg.webp');
}

#advanced::after{
    content: '';
    display: block;
    width: 100%;
    height: 12.361111vw;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: cover;
    background-image: url(../images/system/advanced_line_top.png);
    position: absolute;
    top: -71.180556vw;
    left: 0;
    z-index: 1;
}

.webp #advanced::before{
	background-image: url('../images/system/advanced_bg.webp');
}

#advanced .cont_wrapp {
    margin-top: -73.611111vw;
    position: relative;
    z-index: 2;
}

#advanced .cont_wrapp::before{
	content: '';
	display: inline-block;
	width: 553px;
	height: 790px;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: contain;
    background-image: url(../images/system/advanced_symbolmark.png);
    position: absolute;
    top: -6.944444vw;
    left: 50%;
	transform: translate(-50%, 0);
	z-index: -1;
}


#advanced .cont_wrapp .h2_jp{
	color: var(--text_w);
}

.cont_wrapp .contents_box{
	width: 1090px;
	margin: 0 auto 40px;
	box-shadow: 20px 20px 50px rgba(0, 0, 0, 0.1);
	background: #E8E0CA;
	padding: 40px 0 44px;
	position: relative;
	z-index: 5;
	background-repeat: no-repeat , no-repeat , repeat-y , repeat-y , no-repeat , no-repeat , no-repeat , no-repeat;
	background-position: top 0 left 0 , bottom 0 left 0 , top 0 left 0 , top 0 right 0 , top 16px left 16px , top 16px right 16px , bottom 16px left 16px , bottom 16px right 16px;
	background-size: 100% auto , 100% auto , 2px auto , 2px auto , 57px auto , 57px auto , 57px auto , 57px auto;
	background-image: url('../images/system/cont_line_wt.png') , url('../images/system/cont_line_wb.png') , url('../images/system/cont_line_hl.png') , url('../images/system/cont_line_hr.png') , url('../images/system/icon_contents_point01.png') , url('../images/system/icon_contents_point02.png') , url('../images/system/icon_contents_point03.png') , url('../images/system/icon_contents_point04.png');
}

.cont_wrapp .contents_box:last-of-type{
	margin-bottom: 0;
}

.cont_wrapp .contents_box h3{
	width: 533px;
	height: 60px;
	margin: 0 auto 29px;
	background: linear-gradient(90deg, rgba(179, 157, 80, 0.00) 0%, #DEC366 30%, #DEC366 70%, rgba(179, 157, 80, 0.00) 100%);
	position: relative;
}

.cont_wrapp .contents_box h3::before{
	content: '';
	display: inline-block;
	width: 168px;
	height: 60px;
	background-repeat: no-repeat;
	background-position: 0 0;
	background-size: contain;
	background-image: url('../images/system/h3_bg01.png');
	opacity: 0.2;
	position: absolute;
	top: 0;
	left: 0;
}

.cont_wrapp .contents_box h3::after{
	content: '';
	display: inline-block;
	width: 234px;
	height: 12px;
	background-repeat: no-repeat;
	background-position: 0 0;
	background-size: contain;
	background-image: url('../images/system/h3_line.png');
	position: absolute;
	bottom: -6px;
	left: 50%;
	transform: translate(-50%, 0);
}

.cont_wrapp .contents_box h3 strong{
	font-size: 24px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--text2);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	white-space: nowrap;
}

.cont_wrapp .contents_box .catch{
	display: inline-block;
	font-size: 32px;
	font-weight: 700;
	line-height: 1.5;
	background: var(--text-title-gradation_01, linear-gradient(180deg, #B39500 0%, #955C00 50%, #4E261E 100%));
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	padding-left: 144px;
	margin-bottom: 20px;
	position: relative;
}

.cont_wrapp .contents_box .catch::before{
	content: '';
	display: block;
	width: 144px;
	height: 146px;
	background-repeat: no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
	background-image: url('../images/system/icon_contents_box02.png');
	position: absolute;
	top: 33%;
	left: 0;
	transform: translate(0, -50%);
	z-index: 2;
}

.cont_wrapp .contents_box .caption_box{
	width: 764px;
	margin: 0 auto 24px;
	padding: 46px 32px;
	background: linear-gradient(90deg, #000 0%, #3D2C03 100%);
	position: relative;
}

.cont_wrapp .contents_box .caption_box::after,
.cont_wrapp .contents_box .caption_box::before{
	content: '';
	display: block;
	width: 120px;
	height: 120px;
	background-repeat: no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
	background-image: url('../images/system/kakko01.png');
	position: absolute;
	top: 8px;
	left: 8px;
}

.cont_wrapp .contents_box .caption_box::after{
	top: unset;
	left: unset;
	bottom: 8px;
	right: 8px;
	transform: scale(-1, -1);
}

.cont_wrapp .contents_box .caption_box p{
	font-size: 16px;
	color: var(--text_w);
	font-weight: 700;
}

.cont_wrapp .contents_box .cont_image{
	width: 720px;
	height: 405px;
	margin: 0 auto;
	border: 2px solid #B39D50;
	position: relative;
}

.cont_wrapp .contents_box .cont_image video {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
	object-fit: cover;
}

.cont_wrapp .contents_box .arrow_block{
	width: 756px;
	margin: 16px auto 0;
	display: flex;
	justify-content: space-between;
}

.cont_wrapp .contents_box .arrow_block .block_cont{
	width: 360px;
}

.cont_wrapp .contents_box .arrow_block .block_cont .arrow{
	width: 80px;
	margin: 0 auto 12px;
}

.cont_wrapp .contents_box .arrow_block .block_cont .caption{
	font-size: 20px;
	font-weight: 700;
	line-height: 1.5;
	text-align: center;
	margin-bottom: 12px;
}

.cont_wrapp .contents_box .arrow_block .block_cont:nth-of-type(1) .caption{
	color: #786317;
}

.cont_wrapp .contents_box .arrow_block .block_cont .image_block{
	border: 2px solid #C4A23E;
	width: 100%;
	height: 202px;
	position: relative;
}

.cont_wrapp .contents_box .arrow_block .block_cont .image_block video {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.cont_wrapp .contents_box .point_block{
	width: 878px;
	margin: 24px auto 0;
	padding: 30px 40px 50px 50px;
	background-repeat: no-repeat;
	background-position: 0 0;
	background-size: cover;
	background-image: url('../images/system/point_block_bg.jpg');
	box-sizing: border-box;
	display: flex;
	align-items: center;
	position: relative;
}

.webp .cont_wrapp .contents_box .point_block{
	background-image: url('../images/system/point_block_bg.webp');
}

.cont_wrapp .contents_box .point_block::after,
.cont_wrapp .contents_box .point_block::before {
    content: '';
    display: block;
    width: 120px;
    height: 120px;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 100% auto;
    background-image: url(../images/system/kakko01.png);
    position: absolute;
    top: 8px;
    left: 8px;
}

.cont_wrapp .contents_box .point_block::after {
    top: unset;
    left: unset;
    bottom: 8px;
    right: 8px;
    transform: scale(-1, -1);
}

.cont_wrapp .contents_box .point_block .text_area{
	width: calc(100% - 280px);
	padding-left: 156px;
	box-sizing: border-box;
	position: relative;
	text-align: left;
	z-index: 2;
}

.cont_wrapp .contents_box .point_block .text_area::before{
	content: '';
	display: inline-block;
	width: 144px;
	height: 146px;
	background-repeat: no-repeat;
	background-position: 0 0;
	background-size: contain;
	background-image: url(../images/system/icon_contents_box02.png);
    position: absolute;
    top: 38%;
    left: 0;
    transform: translate(0, -50%);
}

.cont_wrapp .contents_box .point_block .text_area .point_catch{
	font-size: 32px;
	font-weight: 700;
	line-height: 1;
	color: var(--color2);
	margin-bottom: 15px;
}

.cont_wrapp .contents_box .point_block .text_area .point_caption{
	font-size: 16px;
	font-weight: 700;
	color: #fff;
}

.cont_wrapp .contents_box .point_block .image_area{
	width: 280px;
	height: 157px;
	border: 2px solid #C4A23E;
	position: relative;
}

.cont_wrapp .contents_box .point_block .image_area video {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.cont_wrapp .contents_box .link_btn{
	width: 258px;
	margin: 28px auto 0
}

.cont_wrapp .block_note{
	font-size: 12px;
	font-weight: 700;
	color: var(--text_w);
	line-height: 1.5;
	text-align: center;
	margin-top: 32px;
}



/* ===============================
   モーダル背景
=============================== */
.modal_area {
	position: fixed;
	width: 100vw;
	min-height: -webkit-fill-available;
	height: var(--vh);
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	inset: 0;
	background: linear-gradient(0deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.75) 100%);
	z-index: 1000;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal_area.active {
	opacity: 1;
	visibility: visible;
}

/* ===============================
   モーダル本体
=============================== */
.modal_cont {
	width: 1077px;
	height: 600px;
	background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
	background-position: top 8px left 14px, top 8px right 14px, bottom 8px left 14px, bottom 8px right 14px, 50% 50%;
	background-size: 43px 43px, 43px 43px, 43px 43px, 43px 43px, cover;
	background-image: url('../images/character/modal_frame_tl.png'), url('../images/character/modal_frame_tr.png'), url('../images/character/modal_frame_bl.png'), url('../images/character/modal_frame_br.png'), url('../images/character/modal_bg.webp');
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) translateY(20px);

	opacity: 0;
	transition: opacity 0.3s ease, transform 0.3s ease;
	pointer-events: none;
}

.modal_cont.active {
	opacity: 1;
	transform: translate(-50%, -50%) translateY(0);
	pointer-events: auto;
}

.modal_cont::before{
	content: '';
	display: inline-block;
	width: 504px;
	height: 600px;
	background-repeat: no-repeat;
	background-position: 0 0;
	background-size: 100% 100%;
	background-image: url('../images/character/modal_bg04.webp');
	position: absolute;
	bottom: 0;
	left: 0;
}

.modal_cont .close{
	width: 45px;
	position: absolute;
	top: 32px;
	right: 40px;
	text-align: center;
	cursor: pointer;
	z-index: 10;
}

.modal_cont .close p{
	font-size: 14px;
	font-weight: 700;
	color: var(--color3);
	line-height: 1.4;
	white-space: nowrap;
}

.modal_cont .data_wrapp{
	display: flex;
	align-items: center;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.modal_cont .data_wrapp .image_area{
	width: 323px;
	padding-right: 28px;
}

.modal_cont .data_wrapp .text_area{
	width: 458px;
}

.modal_cont .data_wrapp .text_area .name{
	text-align: center;
	margin-bottom: 12px;
	position: relative;
	z-index: 2;
}

.modal_cont .data_wrapp .text_area .name::before{
	content: '';
	display: inline-block;
	width: 477px;
	height: 139px;
	background-repeat: no-repeat;
	background-position: 0 0;
	background-size: 100% 100%;
	background-image: url('../images/character/modal_name_bg.png');
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: -1;
}

.modal_cont .data_wrapp .text_area .name strong{
	display: inline-block;
	font-size: 24px;
	font-weight: 700;
	color: var(--color3);
	position: relative;
}

.modal_cont .data_wrapp .text_area .name strong::after,
.modal_cont .data_wrapp .text_area .name strong::before{
	content: '';
	display: inline-block;
	width: 106px;
	height: 2px;
	background-repeat: no-repeat;
	background-position: 0 0;
	background-size: 100% 100%;
	background-image: url('../images/character/name_line.png');
	position: absolute;
	top: 50%;
	left: -120px;
	transform: translate(0, -50%);
}

.modal_cont .data_wrapp .text_area .name strong::after{
	left: unset;
	right: -120px;
	transform: translate(0, -50%) scale(-1, -1);
}

.modal_cont .data_wrapp .text_area .chara_caption{
	font-size: 18px;
	font-weight: 700;
	line-height: 2.0;
	color: var(--text2);
	position: relative;
	z-index: 3;
}



.videoStarter {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: rgba(0,0,0,0); /* 透明 */
  cursor: pointer;
}


/********************************************************************************
	リッキド用 CSS
********************************************************************************/

@media(max-width:1440px){

#page_header {
    margin-bottom: 8.472222vw;
}

#page_header .text_wrapper {
    width: 75.277778vw;
    top: 6.666667vw;
}

#page_header .text_wrapper .image_area{
	width: 26.736111vw;
}

#page_header .text_wrapper .text_area{
	width: calc(100% - 26.736111vw);
	padding-top: 2.222222vw;
}

#page_header .text_wrapper .text_area h1{
	padding-bottom: 1.111111vw;
	margin-bottom: 1.666667vw;
	font-size: 4.444444vw;
}

#page_header .text_wrapper .text_area h1 strong::after{
	height: 0.208333vw;
}

#page_header .text_wrapper .text_area h1 small{
	font-size: 2.222222vw;
	text-shadow: 0 -0.277778vw 0.277778vw rgba(255, 255, 255, 0.25), 0 0.138889vw 0.138889vw rgba(0, 0, 0, 0.35);
	margin-bottom: 0.833333vw;
}

#page_header .text_wrapper .text_area .h1_caption{
	font-size: 1.25vw;
}

#page_header .text_wrapper .text_area .btn{
	width: 18.541667vw;
	margin-top: 1.388889vw;
}

#page_header .header_caption{
	width: 75.625vw;
	padding: 3.333333vw 0 4.444444vw;
	top: 35.208333vw;
}

#page_header .header_caption::after,
#page_header .header_caption::before{
	width: 15.625vw;
	height: 9.236111vw;
	left: 0.555556vw;
}

#page_header .header_caption::after{
	left: unset;
	right: 0.555556vw;
}

#page_header .header_caption .en_text{
	font-size: 1.666667vw;
	padding: 1.111111vw 0;
}

#page_header .header_caption .jp_text{
	font-size: 2.777778vw;
	margin-bottom: 0.555556vw;
}

#page_header .header_caption .caption{
	font-size: 1.944444vw;
}



.cont_wrapp{
}

.cont_wrapp h2{
	height: 7.777778vw;
	margin-bottom: 0.555556vw;
}

.header_title2 .title_before {
    height: 7.708333vw;
}


#beginner .cont_wrapp h2::before{
	width: 39.166667vw;
	height: 55.972222vw;
    top: -7.152778vw;
}

.cont_wrapp .h2_jp{
	font-size: 2.777778vw;
	margin-bottom: 2.777778vw;
}


#beginner{
}


#advanced{
	padding: 23.402778vw 0 13.472222vw;
	margin-top: 61.111111vw;
}

#advanced::before{
	height: 74.930556vw;
	top: -73.611111vw;
}

#advanced .cont_wrapp {
    margin-top: -73.611111vw;
}

#advanced .cont_wrapp::before{
	width: 38.402778vw;
	height: 54.861111vw;
}

.cont_wrapp .contents_box{
	width: 75.694444vw;
	margin: 0 auto 2.777778vw;
	box-shadow: 1.388889vw 1.388889vw 3.472222vw rgba(0, 0, 0, 0.1);
	padding: 2.777778vw 0 3.055556vw;
}

.cont_wrapp .contents_box h3{
	width: 37.013889vw;
	height: 4.166667vw;
	margin: 0 auto 2.013889vw;
}

.cont_wrapp .contents_box h3::before{
	width: 11.666667vw;
	height: 4.166667vw;
}

.cont_wrapp .contents_box h3::after{
	width: 16.25vw;
	height: 0.833333vw;
	bottom: -0.416667vw;
}

.cont_wrapp .contents_box h3 strong{
	font-size: 1.666667vw;
}

.cont_wrapp .contents_box .catch{
	font-size: 2.222222vw;
	padding-left: 10vw;
	margin-bottom: 1.388889vw;
}

.cont_wrapp .contents_box .catch::before{
	width: 10vw;
	height: 10.138889vw;
}

.cont_wrapp .contents_box .caption_box{
	width: 53.055556vw;
	margin: 0 auto 1.666667vw;
	padding: 3.194444vw 2.222222vw;
}

.cont_wrapp .contents_box .caption_box::after,
.cont_wrapp .contents_box .caption_box::before{
	width: 8.333333vw;
	height: 8.333333vw;
	top: 0.555556vw;
	left: 0.555556vw;
}

.cont_wrapp .contents_box .caption_box::after{
	top: unset;
	left: unset;
	bottom: 0.555556vw;
	right: 0.555556vw;
}

.cont_wrapp .contents_box .caption_box p{
	font-size: 1.111111vw;
}

.cont_wrapp .contents_box .cont_image{
	width: 50vw;
	height: 28.125vw;
	border: 0.138889vw solid #B39D50;
}


.cont_wrapp .contents_box .arrow_block{
	width: 52.5vw;
	margin: 1.111111vw auto 0;
}

.cont_wrapp .contents_box .arrow_block .block_cont{
	width: 25vw;
}

.cont_wrapp .contents_box .arrow_block .block_cont .arrow{
	width: 5.555556vw;
	margin: 0 auto 0.833333vw;
}

.cont_wrapp .contents_box .arrow_block .block_cont .caption{
	font-size: 1.388889vw;
	margin-bottom: 0.833333vw;
}

.cont_wrapp .contents_box .arrow_block .block_cont .image_block{
	border: 0.138889vw solid #C4A23E;
	height: 14.027778vw;
}

.cont_wrapp .contents_box .point_block{
	width: 60.972222vw;
	margin: 1.666667vw auto 0;
	padding: 2.083333vw 2.777778vw 3.472222vw 3.472222vw;
}

.cont_wrapp .contents_box .point_block::after,
.cont_wrapp .contents_box .point_block::before {
    width: 8.333333vw;
    height: 8.333333vw;
    top: 0.555556vw;
    left: 0.555556vw;
}

.cont_wrapp .contents_box .point_block::after {
    top: unset;
    left: unset;
    bottom: 0.555556vw;
    right: 0.555556vw;
}

.cont_wrapp .contents_box .point_block .text_area{
	width: calc(100% - 19.444444vw);
	padding-left: 10.833333vw;
}

.cont_wrapp .contents_box .point_block .text_area::before{
	width: 10vw;
	height: 10.138889vw;
}

.cont_wrapp .contents_box .point_block .text_area .point_catch{
	font-size: 2.222222vw;
	margin-bottom: 1.041667vw;
}

.cont_wrapp .contents_box .point_block .text_area .point_caption{
	font-size: 1.111111vw;
}

.cont_wrapp .contents_box .point_block .image_area{
	width: 19.444444vw;
	height: 10.902778vw;
	border: 0.138889vw solid #C4A23E;
}


.cont_wrapp .contents_box .link_btn{
	width: 17.916667vw;
	margin: 1.944444vw auto 0
}

.cont_wrapp .block_note{
	font-size: 0.833333vw;
	margin-top: 2.222222vw;
}



/* ===============================
   モーダル本体
=============================== */
.modal_cont {
	width: 74.791667vw;
	height: 41.666667vw;
	background-position: top 0.555556vw left 0.972222vw, top 0.555556vw right 0.972222vw, bottom 0.555556vw left 0.972222vw, bottom 0.555556vw right 0.972222vw, 50% 50%;
	background-size: 2.986111vw 2.986111vw, 2.986111vw 2.986111vw, 2.986111vw 2.986111vw, 2.986111vw 2.986111vw, cover;
}

.modal_cont::before{
	width: 35vw;
	height: 41.666667vw;
}

.modal_cont .close{
	width: 3.125vw;
	top: 2.222222vw;
	right: 2.777778vw;
}

.modal_cont .close p{
	font-size: 0.972222vw;
}

.modal_cont .data_wrapp{

}

.modal_cont .data_wrapp .image_area{
	width: 22.430556vw;
	padding-right: 1.944444vw;
}

.modal_cont .data_wrapp .text_area{
	width: 31.805556vw;
}

.modal_cont .data_wrapp .text_area .name{
	margin-bottom: 0.833333vw;
}

.modal_cont .data_wrapp .text_area .name::before{
	width: 33.125vw;
	height: 9.652778vw;
}

.modal_cont .data_wrapp .text_area .name strong{
	font-size: 1.666667vw;
}

.modal_cont .data_wrapp .text_area .name strong::after,
.modal_cont .data_wrapp .text_area .name strong::before{
	width: 7.361111vw;
	height: 0.138889vw;
	left: -8.333333vw;
}

.modal_cont .data_wrapp .text_area .name strong::after{
	left: unset;
	right: -8.333333vw;

}

.modal_cont .data_wrapp .text_area .chara_caption{
	font-size: 1.25vw;
}





}

/********************************************************************************
	スマートフォン用 CSS
********************************************************************************/

@media(max-width:460px){


#page_header {
	margin-bottom: 26.666667vw;
}

#page_header::after{
    height: 38.133333vw;
    background-image: url(../images/system/page_header_line_top_sp.png);
    bottom: -6.933333vw;
}

#page_header .text_wrapper {
    width: auto;
    top: 20.533333vw;
    left: 5.333333vw;
    right: 5.333333vw;
    transform: translate(0, 0);
	flex-direction: column-reverse;
}

#page_header .text_wrapper .image_area{
	width: 32vw;
	margin: 0 auto;
}

#page_header .text_wrapper .text_area{
	width: auto;
	padding-top: 0;
	text-align: center;
}

#page_header .text_wrapper .text_area h1{
	padding-bottom: 1.6vw;
	margin-bottom: 4.266667vw;
	font-size: 7.466667vw;
}

#page_header .text_wrapper .text_area h1 strong::after{
	width: 59.08%;
	height: 0.533333vw;
	background-size: cover;
}

#page_header .text_wrapper .text_area h1 small{
	font-size: 5.333333vw;
	line-height: 1.5;
	text-shadow: unset;
	margin-bottom: 2.133333vw;
}

#page_header .text_wrapper .text_area .h1_caption{
	font-size: 3.2vw;
	line-height: 1.75;
}

#page_header .text_wrapper .text_area .btn{
	width: 71.2vw;
	margin: 3.466667vw auto 3.2vw;
}

#page_header .header_caption{
	width: 89.333333vw;
	padding: 3.2vw 0 8.533333vw;
	position: absolute;
	top: 116.533333vw;
	filter: drop-shadow(0 5.333333vw 10.666667vw rgba(25, 24, 23, 0.50));
	z-index: 5;
}

#page_header .header_caption::after,
#page_header .header_caption::before{
	width: 32vw;
	height: 17.066667vw;
	background-repeat: no-repeat;
	background-position: 0 0;
	background-size: contain;
	background-image: url('../images/system/header_caption_decoration.png');
	position: absolute;
	bottom: 2.133333vw;
	left: 2.133333vw;
}

#page_header .header_caption::after{
	left: unset;
	right: 2.133333vw;
}

#page_header .header_caption .en_text{
	font-size: 4.266667vw;
	padding: 4.266667vw 0;
}

#page_header .header_caption .jp_text{
	font-size: 6.4vw;
	line-height: 1.5;
	margin-bottom: 1.066667vw;
}

#page_header .header_caption .caption{
	font-size: 3.733333vw;
	font-weight: 700;
	line-height: 1.75;
}



.cont_wrapp{

}

.cont_wrapp h2{
	height: 11.466667vw;
	margin-bottom: 0;
	position: relative;
	z-index: 2;
}

.header_title2 .title_before {
    height: 13.866667vw;
}

#beginner .cont_wrapp h2::before{
	width: 74.666667vw;
	height: 106.666667vw;
    top: -22.4vw;
}

.cont_wrapp .h2_jp{
	font-size: 6.4vw;
	line-height: 1.5;
	margin-bottom: 5.333333vw;
}


#beginner{

}


#advanced{
	padding: 51.466667vw 0 67.2vw;
	margin-top: 92.266667vw;
}

#advanced::before{
	height: 252.8vw;
	background-image: url('../images/system/advanced_bg_sp.png');
	position: absolute;
	top: -74.666667vw;
}

.webp #advanced::before{
	background-image: url('../images/system/advanced_bg_sp.webp');
}

#advanced::after{
    height: 12.8vw;
    background-image: url(../images/system/advanced_line_top_sp.png);
    position: absolute;
    top: -65.066667vw;
}

.webp #advanced::before{
	background-image: url('../images/system/advanced_bg.webp');
}

#advanced .cont_wrapp {
    margin-top: -89.066667vw;
}

#advanced .cont_wrapp::before{
	width: 74.666667vw;
	height: 106.666667vw;
	top: -15.466667vw;
}

#advanced .cont_wrapp .h2_jp{
	color: var(--text_w);
}

.cont_wrapp .contents_box{
	width: auto;
	margin: 0 4.8vw 4.266667vw;
	box-shadow: 5.333333vw 5.333333vw 13.333333vw rgba(0, 0, 0, 0.1);
	padding: 9.333333vw 0 13.866667vw;
	background-position: top 0 left 0 , bottom 0 left 0 , top 0 left 0 , top 0 right 0 , top 2.666667vw left 2.666667vw , top 2.666667vw right 2.666667vw , bottom 2.666667vw left 2.666667vw , bottom 2.666667vw right 2.666667vw;
	background-size: 100% auto , 100% auto , 2px auto , 2px auto , 7.466667vw auto , 7.466667vw auto , 7.466667vw auto , 7.466667vw auto;
	background-image: url('../images/system/cont_line_wt_sp.png') , url('../images/system/cont_line_wb_sp.png') , url('../images/system/cont_line_hl.png') , url('../images/system/cont_line_hr.png') , url('../images/system/icon_contents_point01.png') , url('../images/system/icon_contents_point02.png') , url('../images/system/icon_contents_point03.png') , url('../images/system/icon_contents_point04.png');
}


.cont_wrapp .contents_box h3{
	width: auto;
	height: 14.4vw;
	margin: 0 4.8vw 7.733333vw;
}

.cont_wrapp .contents_box h3::before{
	width: 38.666667vw;
	height: 14.4vw;
}

.cont_wrapp .contents_box h3::after{
	width: 62.4vw;
	height: 3.2vw;
	bottom: -1.6vw;
}

.cont_wrapp .contents_box h3 strong{
	font-size: 5.333333vw;
}

.cont_wrapp .contents_box .catch{
	font-size: 6.4vw;
	padding-left: 0;
	margin-bottom: 10.933333vw;
	text-align: center;
}

.cont_wrapp .contents_box .catch::before {
    content: none;
}

.cont_wrapp .contents_box .caption_box{
	width: auto;
	margin: 0 4.8vw 4.533333vw;
	padding: 8.533333vw;
}

.cont_wrapp .contents_box .caption_box::after,
.cont_wrapp .contents_box .caption_box::before{
	width: 32vw;
	height: 32vw;
	top: 1.066667vw;
	left: 1.066667vw;
}

.cont_wrapp .contents_box .caption_box::after{
	top: unset;
	left: unset;
	bottom: 1.066667vw;
	right: 1.066667vw;
}

.cont_wrapp .contents_box .caption_box p{
	font-size: 3.733333vw;
	text-align: left;
	position: relative;
}

.cont_wrapp .contents_box .caption_box p::before{
	content: '';
	display: block;
	width: 37.866667vw;
	height: 17.2vw;
	background-repeat: no-repeat;
	background-size: contain;
	background-image: url('../images/system/icon_contents_box02_sp.png');
	position: absolute;
	top: -17.333333vw;
	left: 50%;
	transform: translate(-50%, 0);
	z-index: 2;
}


.cont_wrapp .contents_box .cont_image{
	width: auto;
	height: 45.866667vw;
	margin: 0 4.8vw;
	border: 0.533333vw solid #B39D50;
}


.cont_wrapp .contents_box .arrow_block{
	width: auto;
	margin: 2.133333vw 4.8vw 0;
}

.cont_wrapp .contents_box .arrow_block .block_cont{
	width: 38.133333vw;
}

.cont_wrapp .contents_box .arrow_block .block_cont .arrow{
	width: 8.533333vw;
	margin: 0 auto 1.066667vw;
}

.cont_wrapp .contents_box .arrow_block .block_cont .caption{
	font-size: 3.2vw;
	margin-bottom: 2.133333vw;
}

.cont_wrapp .contents_box .arrow_block .block_cont .image_block{
	border: 0.533333vw solid #C4A23E;
	height: 21.333333vw;
}

.cont_wrapp .contents_box .point_block{
	width: auto;
	margin: 13.866667vw 4.8vw 0;
	padding: 10.666667vw 8vw 7.466667vw;
	background-image: url('../images/system/point_block_bg_sp.jpg');
	box-sizing: border-box;
	display: block;
}

.webp .cont_wrapp .contents_box .point_block{
	background-image: url('../images/system/point_block_bg_sp.webp');
}

.cont_wrapp .contents_box .point_block::after,
.cont_wrapp .contents_box .point_block::before {
    width: 32vw;
    height: 32vw;
    top: 1.066667vw;
    left: 1.066667vw;
}

.cont_wrapp .contents_box .point_block::after {
    top: unset;
    left: unset;
    bottom: 1.066667vw;
    right: 1.066667vw;
}

.cont_wrapp .contents_box .point_block .text_area{
	width: auto;
	padding-left: 0;
	margin-bottom: 4.266667vw;
	text-align: left;
}

.cont_wrapp .contents_box .point_block .text_area::before{
	width: 37.866667vw;
	height: 17.2vw;
	background-size: contain;
	background-image: url(../images/system/icon_contents_box02_sp.png);
	top: -20.266667vw;
	left: 50%;
	transform: translate(-50%, 0);
}

.cont_wrapp .contents_box .point_block .text_area .point_catch{
	font-size: 5.333333vw;
	margin-bottom: 3.2vw;
}

.cont_wrapp .contents_box .point_block .text_area .point_caption{
	font-size: 3.733333vw;
	margin-top: 2.133333vw;
}

.cont_wrapp .contents_box .point_block .image_area{
	width: auto;
	height: 35.733333vw;
	border: 0.533333vw solid #C4A23E;
}


.cont_wrapp .contents_box .link_btn{
	width: 76.266667vw;
	margin: 5.333333vw auto 0
}

.cont_wrapp .block_note{
	font-size: 3.2vw;
	line-height: 2.5;
	margin-top: 4.266667vw;
}



/* ===============================
   モーダル本体
=============================== */
.modal_cont {
	width: 89.333333vw;
	height: auto;
	min-height: 130.933333vw;
	background-position: top 2.666667vw left 2.666667vw, top 2.666667vw right 2.666667vw, bottom 2.666667vw left 2.666667vw, bottom 2.666667vw right 2.666667vw, 50% 50%;
	background-size: 7.466667vw 7.466667vw, 7.466667vw 7.466667vw, 7.466667vw 7.466667vw, 7.466667vw 7.466667vw, cover;
	background-image: url('../images/character/modal_frame_tl.png'), url('../images/character/modal_frame_tr.png'), url('../images/character/modal_frame_bl.png'), url('../images/character/modal_frame_br.png'), url('../images/character/modal_bg_sp.webp');

	padding: 10.666667vw 5.333333vw;
	box-sizing: border-box;
}

.modal_cont::before{
	width: 43.466667vw;
	height: 64.8vw;
	background-image: url('../images/character/modal_bg04_sp.webp');
	bottom: unset;
	top: 5.333333vw;
}

.modal_cont .close{
	width: 12vw;
	top: 5.333333vw;
	right: 4.266667vw;
}

.modal_cont .close p{
	font-size: 3.733333vw;
}

.modal_cont .data_wrapp{
	display: block;
	align-items: center;
	position: relative;
	top: 0;
	left: 0;
	transform: translate(0, 0);
}

.modal_cont .data_wrapp .image_area{
	width: 46.666667vw;
	padding-right: 0;
	margin: 0 auto 8px;
}

.modal_cont .data_wrapp .text_area{
	width: auto;
}

.modal_cont .data_wrapp .text_area .name{
	margin-bottom: 2.133333vw;
}

.modal_cont .data_wrapp .text_area .name::before{
	width: 73.6vw;
	height: 21.6vw;
	top: 68%;
}

.modal_cont .data_wrapp .text_area .name strong{
	font-size: 5.333333vw;
}

.modal_cont .data_wrapp .text_area .name strong::after,
.modal_cont .data_wrapp .text_area .name strong::before{
	width: 21.333333vw;
	height: 0.533333vw;
	left: -26.133333vw;
}

.modal_cont .data_wrapp .text_area .name strong::after{
	left: unset;
	right: -26.133333vw;
}

.modal_cont .data_wrapp .text_area .chara_caption{
	font-size: 3.733333vw;
	line-height: 1.75;
}











}