@charset "utf-8";

section#sub_pagettl{ background-image: url(../img/subttl_price.png); background-position: 0% bottom;}

section#sect_price{}
.initiation_box{
	background-color: #eeeeee;
	text-align: center;
	font-size: 2.5rem;
	padding-top: 0.2em;
	padding-bottom: 0.3em;
	font-weight: bold;
}
.price_plus{
	border-radius: 50%;
	background-color: #6D6D6D;
	width: 50px;
	height: 50px;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-top: 2em;
	margin-bottom: 2em;
	position: relative;
}
.price_plus img{
	width: 60%;
	height: auto;
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	margin: auto;
	right: 0px;
}

table.tab_price{
	width: 100%;
}
table.tab_price tr>*{
	text-align: left;
	border-right: 1px solid #8E8E8E;
}
table.tab_price tr>*:last-child{
	border-right-style: none;
}
table.tab_price tr th{
	background-color: #6d6d6d;
	padding: 1em;
	color: #FFFFFF;
}
table.tab_price tr td{
	padding: 0.5em 1em;
	font-size: 1.4rem;
	background-color: #eeeeee;
	vertical-align: middle;
	line-height: 1.4;
}
table.tab_price tr td:nth-child(2){
	font-weight: bold;
	font-size: 1.6rem;
}
table.tab_price tr:nth-child(2n) td{
	background-color: #dddddd;
}
table.tab_price tr.ptr_support td small{display: block; font-size: 65%;}
table.tab_price + .item_name{ padding-top: 3em;}
.under_tab{ padding: 1em 0 4em 0; font-size: 0.8rem; text-indent: -1.3em; margin-left: 1.3em; }
.under_tab + .under_tab{ padding: 0 0 4em 0; margin-top: -4em;}

table.tab_price tr td .value_box{
	display: inline-block;
	padding-top: 0.2em;
	padding-right: 1em;
	padding-left: 1em;
	padding-bottom: 0.3em;
	color: #FFFFFF;
	margin-bottom: 0.5em;
	position: relative;
	font-size: 0.9rem;
	background-color: #da2429;
	vertical-align: middle;
}

table.tab_price tr td .value_box:after{
  content: "";
  position: absolute;
  bottom: -1em;
  left: 50%;
  margin-left: -0.5em;
  border: 0.5em solid transparent;
  z-index: 0;
}

table.tab_price tr.ptr_alltime td .value_box{ background-color: #da2429;} 
table.tab_price tr.ptr_alltime td .value_box:after{	border-top-color: #da2429;}
table.tab_price tr.ptr_support td .value_box{ background-color: #d1a800;} 
table.tab_price tr.ptr_support td .value_box:after{	border-top-color: #d1a800;}
table.tab_price tr.ptr_ptrain td .value_box{ margin-left: 1em;}

table.tab_price tr.ptr_water>* strong{ display: inline-block; font-size: 120%; color: #DA2429;}

.item_opname{ padding: 1em 0 0.75em 0; text-indent: -1em; margin-left: 1em;}

.price_option{
	padding: 2em;
	border: 1px solid #000000;
}
.price_option + .price_option{border-top-style: none;}
.price_option .option_name{ padding-bottom: 0.5em;	text-indent: -1em; margin-left: 1em;}
.price_option strong{
	font-size: 2rem;
	font-weight: normal;
	display: block;
}
.price_option strong:last-of-type{ padding-bottom: 0;}
.price_option .set_box{
	color: #000000;
	display: inline-block;
	padding-top: 0.25em;
	padding-right: 1.5em;
	padding-left: 1.5em;
	padding-bottom: 0.4em;
	margin-top: 1em;
	margin-right: 0;
	margin-left: 0;
	margin-bottom: 0.5em;
	font-size: 90%;
	border: 1px solid #717171;
	border-radius: 28px;
}
.price_option br + .set_box{ margin-top: 4em;}
.price_option strong + .value_box{	margin-top: 1em;}
.price_option .value_box{
	background-color: #da2429;
	display: inline-block;
	padding-top: 0.3em;
	padding-right: 2em;
	padding-left: 2em;
	padding-bottom: 0.4em;
	color: #FFFFFF;
	margin-top: 0.5em;
	position: relative;
}

.price_option .value_box:after{
    border: solid transparent;
    content:'';
    height:0;
    width:0;
    pointer-events:none;
    position:absolute;
    border-color: rgba(0, 153, 255, 0);
    border-top-width:12px;
    border-bottom-width:12px;
    border-left-width:8px;
    border-right-width:8px;
    margin-left: -8px;
    border-bottom-color:#da2429;
    bottom:100%;
    left:50%;
}


.price_option small{
	margin-left: 0.3em;
}
.price_atten{
	display: block;
	padding-top: 2em;
	font-size: 0.8rem;
}


section#sect_howto{}
section#sect_howto .btn_box{
	padding-top: 4em;
}

section#sect_howto .ytube_box{
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1em;
    margin-top: 0;
}


section#sect_frtour{}
section#sect_frtour .btn_box{
	padding-top: 4em;
	margin: 0 15px 0 15px;
}

.howto_list{}
.howto_list li{
	padding: 3em;
	background-color:#7f7f7f;
	color: #FFFFFF;
	position: relative;
	margin-bottom: 5em;
	margin-left: 0;
	margin-right: 0;
	list-style: none;
}
.howto_list li:last-child{ margin-bottom: 0;}
.howto_list li:before{
	content: "";
	width: 75px;
	height: 75px;
	display: block;
	background-image: url(../img/price/howto02.svg);
	background-repeat: no-repeat;
	background-size: 100% auto;
	position: absolute;
	top: -3.5em;
	left: 0px;
	margin: auto;
	right: 0px;
}
.howto_list li:first-child:before{
	display: none;
}
.howto_list li::after {
  content: "";
  display: block;
  clear: both;
}
.howto_list li>*{float: left;}
.howto_list li .free_box{
	background-color: #DA2429;
	display: block;
	position: absolute;
	top: -10px;
	left: calc( 18% + 2.4em);
	padding: 0.3em 1.7em;
	letter-spacing: 0.2em;
	font-size: 1.4rem;
}
.howto_list li .free_box:before{
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  border: solid transparent;
  border-color: rgba(0, 153, 255, 0);
  border-top-width:12px;
  border-bottom-width:12px;
  border-left-width:8px;
  border-right-width:8px;
  margin-left: -8px;
  border-top-color:#DA2429;
  height:0;
  width:0;
}

.howto_list li .howto_icon{
	width: 14%;
}
.howto_list li .howto_icon img{
	width: 100%;
	height: auto;
}
.howto_list li .howto_icon img + img{
	width: 80%;
	margin-top: 2em;
}
.howto_list li .howto_txt{
	width: 86%;
	padding-left: 6%;
	overflow: hidden;
}
.howto_list li .howto_txt .howto_nummid{ display: flex; align-items: center;padding-bottom: 2em;}
.howto_list li .howto_txt .howto_num{
	width: 70px;
	font-weight: bold;
	font-size: 1.5rem;
	letter-spacing: 0.1em;
	line-height: 1em;
	float: left;
}
.howto_list li .howto_txt .howto_num em{
	font-style: normal;
	display: block;
	text-align: center;
	font-size: 5rem;
	padding-top: 0.3em;
	margin-left: -16px;
}
.howto_list li .howto_txt strong{
	font-size: 3rem;
    float: left;
    padding-left: 5%;
    color: #fff;
}
.howto_list li p{
	font-size: 1.6rem;
    color: #fff;
    font-weight: bold;
	margin-bottom: 0;
}
.howto_list li .howto_txt .attten_txt{ font-size: 0.8rem; padding-top:1em;}
.howto_list li .howto_txt .emp_txt{
	color: #DA2429;
	padding: 0.5em 1em;
	margin-top: 1em;
	background-color: #FFFFFF;
}
.howto_list li .howto_txt .photo_box { padding-top: 2em;}
.howto_list li .howto_txt .photo_box img{ width: 75%;}

.price_bans{padding: 2em 0 3em 0; text-align: center;}
.price_bans a{display: inline-block; max-width:500px; width: 100%;  }
.price_bans img{width: 100%; max-width:500px; display: inline-block;}


/* ##### responsive ##### */
@media screen and (max-width: 760px) {

section#sect_price{}
.initiation_box{ font-size: 2rem;}
.price_plus{
	width: 40px;
	height: 40px;
	margin-top: 2em;
	margin-bottom: 2em;
}

table.tab_price tr:first-child{	display: none;}
table.tab_price tr>*{
	border-right-style: none;
}

table.tab_price tr td{
	padding: 0 1em;
	font-size: 1.2rem;
	display: block;
	width: 100%;
	text-align: center;
}
table.tab_price tr td:first-child{
	font-weight: bold;
	padding-top: 1em;
}
table.tab_price tr td:first-child:after{
	content: "";
	width: 100%;
	height: 1px;
	display: block;
	marging-top: 10px;
	border-bottom: 1px solid #000000;
	padding-top: 0.5em;
}
table.tab_price tr td:nth-child(2){	padding-top: 0.5em;}
table.tab_price tr td:last-child{ padding-bottom: 1em;}
table.tab_price tr:nth-child(2n) td{}

table.tab_price + .item_name{
	padding-top: 3em;
}
table.tab_price tr td .value_box{ display: block;}
table.tab_price tr.ptr_ptrain td .value_box{ margin-left: 0; margin-top: 0.75em;}


.price_option{	padding: 1.5em;}
.price_option strong{
	font-size: 1.3rem;
}
.price_option strong:last-of-type{ }
.price_option .set_box{
	display: block;
	text-align: center;
}
.price_option .value_box{
	padding-left: 1em;
	padding-right: 1em;
	display: block;
	text-align: center;
}
.price_option small{}
.price_option br + .set_box {
    margin-top: 3em;
}
section#sect_howto{}
section#sect_howto .btn_box{
	padding-top: 2em;
}
section#sect_frtour{}
section#sect_frtour .btn_box{
	padding-top: 2em;
}
.howto_list{
	margin: 0 auto;
    width: 90vw;
}
.howto_list li{	padding: 3em 1.4em;}


.howto_list li{	text-align: center;}
.howto_list li .free_box{ position: relative; top: -64px; left: initial; float: none; display: inline-block;}
.howto_list li .free_box:before{}
.howto_list li:before{
	content: "";
	width: 75px;
	height: 75px;
	display: block;
	background-image: url(../img/price/howto02.svg);
	background-repeat: no-repeat;
	background-size: 100% auto;
	position: absolute;
	top: -3.5em;
	left: 0px;
	margin: auto;
	right: 0px;
}

.howto_list li::after {
}
.howto_list li>*{}
.howto_list li .howto_icon{
	width: 100%;
	text-align: center;
	margin-top: -30px;
}
.howto_list li .howto_icon img{
	width: 130px;
	height: auto;
	display: inline-block;
}
.howto_list li .howto_icon img + img{
	margin-top: 0;
	width: auto;
	height: 100px;
	margin-left: 1.5em;
}
.howto_list li .howto_txt{
	width: 100%;
	padding-left: 0;
	padding-top: 0;
}
.howto_list li .howto_txt .howto_nummid{ display: block; padding-bottom: 2em;}
.howto_list li .howto_txt .howto_num{
	width: 100%;
	font-size: 2rem;
	text-align: center;
}
.howto_list li .howto_txt .howto_num em{
	font-size: 5.2rem;
    padding-top: 0.4em;
    margin-left: 0;
}
.howto_list li .howto_txt p{ text-align: left;}
.howto_list li .howto_txt strong{
	font-size: 2.2rem;
	width: 100%;
	margin-bottom: 1em;
	padding-left: 0;
	text-align: center;
	padding-top: 1.6em;
}
.howto_list li .howto_txt .photo_box img{ width: 100%;}

.price_bans{padding-bottom: 2em;}

}