@media screen and (max-width:  767px) {
*{white-space: wrap; box-sizing: border-box; }
 a{cursor: pointer; color: inherit; text-decoration: none; border: none;}
.sp_br{display: block !important; } .pc_br{display: none;}
/* =======  common ============*/
html {
-webkit-overflow-scrolling: touch;
 overflow-x: hidden;  width: 100%; 
 overflow-y: scroll; 
}
body{white-space: initial;  font-size: 16px; line-height: 1.6;  width: 100%; font-weight: 400; letter-spacing: 0.8px; overflow-x: hidden; }
article, .kv_area_base{ overflow-x: hidden; width: 100%;}
.mb_12 {margin-bottom: 40px;}
.mb_10 {margin-bottom: 10%;}

/* =========================================================
		KV
========================================================= */
.kv_area{height: inherit; width: 100%;}
.kv_txt{z-index: 20; position: static;}
.kv_logo_area{margin: 6% 0 0 3%}
.kv_fnt{font-size: 1.75rem; margin: 6% 0 0%; text-align: center; z-index: 21; line-height: 1.45; letter-spacing: 2.5px;}
.kv_fnt span{font-size: 1.1em;}
.kv_main_view { width: 100%; left: initial; position: static; margin:0 0 0; }
.kv_inner_logo {width: 95px;}
.kv_inner_pcgnm {font-size: 1rem; padding: 7px 8px 7px; margin:0 0 0 3px; letter-spacing: normal;}
/* ======= KV price ============*/
.hedprice_wrap{overflow: hidden; padding: 1.5rem 0 1rem;}
.hedprice {display: block; text-align: center; padding: 5px 0 10px; overflow: hidden;}
.hedprice_con{display: block; width: inherit;}
.hedprice_con .price_info{line-height: 1; font-size: 1.1rem; margin: 0 auto 2%; text-align: center;}
.price_info .zero1{font-size: 180%; vertical-align: sub;}
.price_info2{display: flex; justify-content: center; margin: 0 auto;}
.price_gaku{writing-mode: vertical-rl; vertical-align: middle; margin: 0 0.5rem 0 0; padding: 0.5rem 0.25rem 0.1rem 0.25rem; font-size: 1rem; text-align: center;}
.price_price{font-size: 4.1rem; line-height: 0.9; text-align: center;}
.price_price .mprice1{letter-spacing: -2px;}
.hedprice_wrap .hedprice_gaku { vertical-align: middle; margin: -26px 0 0 0; padding:5px 5px 5px 2px; font-size: 0.7rem; display: inline-block;}
.hedprice_info{font-size: 1.2rem; line-height: 0.8; margin: 0 0 3px;}
.hedprice_info .zero{font-size: 1.35rem; vertical-align: middle;}
.hedprice_price {letter-spacing: -1px;font-size: 3rem; display: inline-block;}
	
	
/* =========================================================
		contents
========================================================= */	

.contents_top_title{font-size: 1.5rem; line-height: 1.5; margin: 0; letter-spacing: 0px;} 
/* ======= package ============*/
.packageinfo{margin: 5% 0;}
/* =======  navigation ============*/
.formpackage .allwrap .navigation { width: 46%; padding: 18% 0 5%;}
.formpackage .allwrap.open .navigation{ transform: translateX(120%); padding: 18% 0 5%;}
.navigation li a { padding: 10% 6%; font-weight: 600;}
/* =======  contents main resize============*/
.contents, .packageinfo_box, .cap_inner, .screen_view, 
.hedprice_wrap, .inner_contents_main, .problem_list{width: 100%;}
.contents_wrap_cyan, .packageinfo_wrap, .kv_area_base, footer{width: 100%;}
.bg {filter: blur(0.1em);}
.contents_list_area{margin: 0 0 8%; width: 100%; padding: 5% 8%;}
.contents, .inner_contents{width: 84%;} .inner_contents p br{display: none;}
.contents{ margin: 0 auto 0; padding: 40px 0 70px;}
.contents2{padding: 60px 0 70px; margin: 0 auto 0; width: 90%;}
.packageinfo_wrap .contents{padding: 0 0; margin: 55px auto 70px; width: 90%;}

.explain_note p {font-weight: 400; line-height: 1.7;}
.note_att {margin-bottom: 35px;}	
.explain_note .note_att {margin-bottom: 0;}
.explain_note .note_att2 {margin-bottom: 35px;}	
.note_of_subtitle {margin: 0 0 7px; font-size: 1.4rem; letter-spacing: 0px;}
.explain_note .note_copy {margin-bottom: 35px;}
.conts_of_title{margin: 1% 0 2%;}
.explain_note, .screen_note{width: 100%; margin: 0;}
.explain_note{margin-top: 20px;}
.explain{width: 100%; margin: 15px 0 0;} 
.contents .explain:nth-child(1){margin:0 0 0;}
.contents .explain-mb{margin:0 0 0!important;}
.explain_view{width: 100%; margin: 0 auto 0;}
.contents_list_menu {height: 130px; width: 130px; margin: 3% 0;}
.contents_cap_hed{  width: 100%; height: auto; padding: 2% 6%; justify-content: flex-end;}
.cap_hed2{justify-content: flex-start;}
.mainprice.txtcnt {text-align: center;}
.mddlefnt{ font-size: 0.7em;} .matter_list li { width: 100%;}
.problem_list_wrap{margin: 0 auto 0; width: 94%;}
.problem_list br{display: none;} 
.screen_page{margin: 0 0 12%;}
.screen_page2{margin: 0 0 0;}
.problem_txt{width: 74%;}  .problem_list h4{font-size: 1em;}
.problem_txt::before{border-top: 10px solid transparent; left: -0.5em; top: 3em;
    border-right: 10px solid #fff; border-bottom: 10px solid transparent;}
.problem_txt::after{border-top: 10px solid transparent; left: -0.6em; top: 3em;
    border-right: 10px solid #aaa; border-bottom: 10px solid transparent;}
.contents_subtitle_def{margin: 17px 0 0; font-size: 1.7rem;}
.note_subt2{margin: 9px 0 3px; font-size: 16px;}

.explain_note p br{display: none;}
.screen_page_i{margin-bottom: 0;}
/* =======  frame============*/
.flowbox_wrap{width: 94%; display: block; height: auto; overflow: hidden;}
.flowbox_arrow, .flowbox, .flowbox_arrow:first-child{width: 100%; margin: 0;}
.flowbox .flowbox_txt, .flowbox_arrow .flowbox_txt{
    position: relative; transition: initial; font-size: 0.9rem;
    z-index: 20; transform: inherit; left: 0;  margin: 0; height: 120px;}
.flowbox_txt h4{font-size: 1.25rem; line-height: 1.45; font-weight: 600;}
.flowbox_txt p{padding-top: 5px; line-height: 1.5;}
.flowbox_arrow:first-child .flowbox_txt{margin-left: 0; height: 107px; padding-top: 27px;}
.flowbox_arrow:nth-child(2) .flowbox_txt{padding-top:45px;}
.flowbox_arrow:nth-child(3) .flowbox_txt{padding-top:65px;}	
.flowbox_arrow::before, .flowbox_arrow::after{
    border-left: 62vw solid transparent; border-right: 62vw solid transparent;
    right: -24%; top: inherit; bottom: -114.5%; border-top: 4em solid #fff; border-bottom: 90px solid transparent;}
.flowbox_arrow::after {border-top: 4em solid #333; bottom: -116%; }
.flowbox{padding-top: 65px;  margin-top: 0;  margin-bottom: 0; }
.flowbox .flowbox_txt{height: 95px;}	
.flowbox_pop{display: none;}
.flowbox_pop::before, .flowbox_pop::after {display: none;}	


.flow-contents{width: 90%; padding:45px 0 60px;}
.back-att{padding: 35px 0 20px 0;}

	
/* =======  lp design  main ============*/

.cap_hd_bg{left:-68%;}
.cap_hd_bg img{width: 125%;}
.contents_cap2 .cap_hd_bg{right:-68%;}
	
	
	
	
.contents_cap_hed figure{display: block; height: 90%; left: -6%;}
.contents_cap_hed figure.chara_2{display: block; height: 93%; left: inherit;}
.contents_cap_hed figure.chara_3{display: block; height: 100%; left: inherit; right: -8%;}
.contents_cap_txt {width: 65%; font-size: 1em; position: static;}
.contents_cap2 .contents_cap_txt {position: static;}

.contents_cap_txt p{font-size: 1rem; letter-spacing: normal; z-index: 10; position: relative; line-height: 1.5; padding-bottom: 18px;}
	
.page_icons li {font-size: 12px; letter-spacing: normal; min-width: 38%; border: solid 1px #333; color: #333; padding: 0.5em 0.7em 0.45em; margin-bottom: 5px;}
.pcg_icons{margin: 3% 0 7%;} 
.inner_contents_main {margin: 0 auto 0;}
.pcg_icons .pcg_txt {margin: 0 auto; font-size: 1rem; letter-spacing: normal; width: 100px; height: 100px; line-height: 1.4; border: solid 3px rgba(101,183,159,0.9);}
.plusfnt {font-size: 1.2rem;} .packageinfo .default_note br{display: none;}
.default_note { margin: 18px auto 0; text-align: left; width: 94%; letter-spacing: 1px; font-size: 1rem; line-height: 1.8;}
section.cap_inner { overflow-x: hidden;  padding: 0; margin: 0;}
.problem_list::before, .problem_list::after{display: none;}
.problem_note {margin: 2% 0 0; font-size: 0.86em;}
.hedprice.subprice { width: 80%; margin: 10% auto 4%; overflow: hidden;}
.normal_box {padding: 0.5rem 0.5rem; margin: -1.4rem auto 0.1em; display: block; font-size: 1.2rem; width: 70%; transform: scale(0.8); text-align: center;}
.normal-price h4 {font-size: 1.3rem; padding: 0.7rem 0 0;}
.flex.package_box{display: block;}
.attendarea, .price_table {width: 100%;} h4.table_attend_ttl {font-size: 0.95rem;}
.price_table { margin: 6% auto 3%; font-size: 0.86em; display: block;}
.package_ttl{padding: 8px 14px 8px; color: #fff; font-size: 1.1rem; font-weight: 600; margin-top: 10%;}
.price_table dt {padding: 3% 3%; font-size: 1rem; width: 100%; display: block; text-align: left; vertical-align: inherit;}
.price_table dd {padding: 0; font-size: 1rem;}
.price_table dd p{padding: 3%; font-size: 0.95rem;}
.price_attend {font-size: 0.85rem; line-height: 1.4; padding: 0 0 7px; letter-spacing: 0.5px;}
.pricemenu_min dt {width: 100%; font-size: 1.1rem; letter-spacing: 0; line-height: 1.35;}
.pricemenu_min dd {width: 95%; margin-left: 1.8em; font-size: 1.2rem;}
.pricemenu_min dd::after {content: " "; border-top: dashed 2px #aaa; position: absolute; width: 1.3em; left: -1.8em; top: 0.7em;}
.package_box {margin: 4% 0 1%;}
.pricemenu_min {margin: 4% 0 0 0;}
.price-option {margin: 4% 0 0 0;}
.package_top_title {margin: 0 0 1.6rem; line-height: 1.3; font-size: 1.45rem; letter-spacing: 0px;}
.package-copy {font-size: 1.4rem; letter-spacing: 2px; text-align: center; border-bottom: 2px #fff dotted; display: initial; margin: 0 auto; padding: 0 0 2px;
 line-height: 1.7;}
.contents_subtitle_center {text-align: center; font-size: 1.55rem; letter-spacing: 0.5px; padding: 0 0 7%; line-height: 1.5;}
.conts_list_view {margin: 5% auto 0; width: 55%;}
.scene-copy {font-size: 1.3rem; font-weight: 500; letter-spacing: 1px; text-align: center; border-bottom: 2px #17aae6 dotted; display: initial; margin: 4% auto 0; padding-bottom: 2px; line-height: 1.7;}
.problem-area {display: block; flex-wrap: initial;}
.problem-area .problem-con {width: 90%; margin: 0 auto 14%; border-radius: 10px;}
.problem-con .icon {height: inherit; width: 100%; margin-right: 0;}
.problem-con .pro-txt {width: 100%; text-align: left;}
.pro-txt h4 {padding: 7% 0 4%; font-size: 1.3rem; letter-spacing: 1px;}
.pro-txt .mtop {padding: 7% 0 4%;}
.problem-con img {width: 56%;}
.problem-con .icon1 {width: 56%;}
.pro-txt .pro-note {font-size: 0.95rem; line-height: 1.6;}
.problem-copy1 {font-size: 1.25rem; margin: 5% 0 0;}
.problem-copy1 span {font-size: 1.35rem; border-bottom: 2px #17aae6 dotted; letter-spacing: 0px; line-height: 1.8; padding-bottom: 2px;}
.price-contents {width: 90%; margin: 45px auto 0;}
.contents_subtitle_center2 {margin-bottom: 1.1rem; font-size: 1.8rem;}

.footerprice {background: #f3f3f3; padding: 4% 5% 3%; border-radius: 5px; display: block; margin-bottom: 4%;}
.fprice_info {line-height: 0.8; letter-spacing: 1px; font-weight: 500; font-size: 1.35rem; text-align: center; margin: 0 0 0;}
.fprice_price {font-size: 4rem; letter-spacing: -2px; line-height: 1; text-align: center;}
.fprice_gaku {font-size: 1.1rem; color: #333; font-weight: 500;}

/* --price2--*/
.footer-main-price{background: #f3f3f3; padding: 3% 0 3%; margin-bottom: 4%;}
.footer-main-price .f-price1{margin-bottom: 22px; padding: 0 0 10px 0;}
.footer-main-price .f-price1b{margin-bottom: 0; padding: 0 0 5px 0;}	
.f-price1 .fprice_info {line-height: 0.8; letter-spacing: 1px; margin-right: 0; font-size: 1.35rem; float: none;}
.f-price1 .fprice_gaku{font-size: 1.1rem; letter-spacing: 1px;}
.f-price1 .fprice_price{font-size: 3.7rem; float: none; text-align: center;}
.footer-main-price .f-price2{padding: 0 0 0 0;}
.f-price2 .fprice_info2{line-height: 0.7;  margin: 0 0 7px; font-size: 0.88rem; text-align: center; float: none;}
.f-price2 .fprice_gaku{font-size: 0.9rem; letter-spacing: 1px;}
.f-price2 .fprice_price2{font-size: 2rem; line-height: 1; float: none; text-align: center;}
.price_table .ptext1{line-height: 1.3;}
/* --price2--*/
	
	
.price_details {padding: 0.15rem 0 0.35rem 1.6rem; position: relative; font-size: 1.05rem; line-height: 1.2;}
.price_details::after {top: 0.2em;}
.normal-price {background: #fff; padding: 0 5% 7%; margin: 17% auto 12%; border-radius: 10px; border: 4px solid #dfdfdf;}
.normal-left {float: none; margin: 2% 0 0;}
.normal-left .hedprice_price {font-size: 3.4rem;line-height: 1; text-align: center;}
.price_details2 {padding: 0.15rem 0 0.35rem 1.2rem; font-size: 0.95rem; line-height: 1.2; text-align: center; display: inline-block;}
.normal-right {float: none; margin: 2.5% 0 0 0;}
.flow_attend {text-align: left; padding: 5px 0 35px; font-size: 0.75rem; letter-spacing: 0.5px; line-height: 1.6;}
.under_link {margin-top: 5%;}
.navigation li {font-size: 1.1rem;}
.link_act_min {font-size: 0.961rem; padding: 11px 0; width: 55%; margin: 15px auto 0;}
.contents_cap_txt .sp_margin{padding-bottom: 34px;}

.attend li {padding-bottom: 7px;}

/* =======  link ============*/
.txtcnt {margin: 0 auto 5px;}
.round_link {width: 86%; margin: 1% auto; font-size: 14px;  display: block;}
.pcg_link {margin: 4% 0 2%;} 
.link_act {width: 100%; padding: 11px 0; font-size: 1.1rem; line-height: 1.4;}
.txtcnt .link_act{padding: 15px 0; width: 100%; margin: 0 auto;}
.link_act.wd{padding: 15px 0 !important; width: 100%; font-size: 1.1rem; background: #e84a95 !important;}
.footlogo{width: 150px;}
.footer .package_top_title {text-align: center; margin: 8px 0; line-height: 1.4; font-size: 1.2rem;}
.footcomment {transform: scale(0.85); margin: 0 auto;}
.gr8form_list {width: 94%; margin: 25px auto 0; }
.gr8form_list li {width: 48%; margin: 0 auto 0; padding: 0 0 8px;}
.gr8form_list li a {width: 100%; height: inherit; border-radius: 4px; font-size: 0.75rem; margin: 0 auto; padding: 7px 0}


.pcg-point-con{background: #fbe5ef; padding:20px 0 22px;}
.pcg-point2{margin: 0 auto 0; display: block; width: 90%;}
.pcg-point2 .pro-pic {float: none; width:20%; margin: 0 auto;}
.pcg-point2 .point-detail {float: none; position: relative; padding: 10px 5%; border-radius: 5px; font-size: 1rem; margin: -6px auto 0; letter-spacing: 0; display: table;}
.pcg-point2 .point-detail:before, .pcg-point2 .point-detail:after{display: none;}

.cp-banner{width:90%; padding: 25px 0 5px;}
.margint{margin-top: -15px!important;}
	.price_txt {
    font-size: 13px;
    padding-bottom: 2px;
    line-height: 1.45;
}

/* =======  line point ============*/
.line-point{width:90%; margin:0 auto 60px; border: 5px solid #00b900; padding:8% 5% 5%;}
.line-point_ttl{display: block; margin-bottom: 25px;}
.line-point_ttl .line_logo{width: 25%; margin:0 auto;}
.line-point_ttl h2{font-size: 28px; text-align: center; padding-right: 0;}
.line-point .point_ttl1{display: block; margin-bottom: 12px;}
.line-point .point_ttl1 h3{font-size: 18px; margin-right: 0; margin-bottom: 5px;}
.line-point .point_ttl1 p{padding: 5px 20px; font-size: 15px; display: inline;}
.line-point .point_copy1{font-size: 16px; margin-bottom: 18px; line-height: 1.7; font-weight: 400;}
.line-point .point_ttl2{font-size: 18px; margin-bottom: 7px;}
.line-point .point_copy_att{font-size: 12px; text-align: left; padding-top:0px; text-indent: -1.3em; padding-left: 1.3em;}	
/* =========================================================
		modal
========================================================= */
.modal-content {
    position:relative;
    display:none;
   
	width: 84%;
	padding: 8% 4% 8%;
    max-height:100%;
    margin:8% 0 4% 0;
   
   
    background:#fff;
    overflow:auto;
	top: 0 !important;
	border-radius: 8px;
}
.modal-content .closebtn{
    width: 14%;
    position: absolute;
    top: 1%;
    right: 2%;
	
	padding-bottom: 0;
    padding-left: 0;
    text-indent: 0 !important;	
}
#kv-popup-con h3{font-size: 1.3rem; padding:25px 0 20px;}
.kv-modal a {
    display: table;
    margin: 8px auto 10px;
    font-size: 14px;
    padding: 6px 15px 4px;
}


	
	
/*========- sp beside================*/	
@media (orientation: landscape){
.kv_fnt {font-size: 2.5rem;}
.contents, .inner_contents {width: 70%;}
	.scenecon{width: 84%;}
.scene-area{width: 76%;}
.pcg_icons .pcg_txt {width: 150px; height: 150px;}
.contents_cap_hed figure {left: 4%;}
.contents_cap_hed figure.chara_2 {right: 2%;}
.contents_cap_hed figure.chara_3 {right: 3%;}


	}

	
	
	
}