@charset "utf-8";
/*==============================================================================================================
  .price / 料金ページ
==============================================================================================================*/

/*------------------------------------------
  #mainVisual
------------------------------------------*/

#mainVisual {
    background-image: url(../../img/price/mv01.png);
}
/*------------------------------------------
  大丸　見出し
------------------------------------------*/

.titWrap {
    width: 350px;
    height: 350px;
    display: table;
    border-radius: 50%;
    position: relative;
    z-index: 1;
}
.titWrap .tit {
    display: table-cell;
    vertical-align: middle;
    color: #fff;
    font-size: 80px;
    text-align: center;
    font-weight: normal;
    letter-spacing: 3px;
    line-height: 1.5;
}
.titWrap .tit.min {
    font-size: 60px;

}


.titWrap .tit span {
    display: block;
    font-size: .4em;
}
.titWrap .tit em {
    font-size: .7em;
}
.titWrap.green {
    margin: 0 auto 50px;
    background: #51a199;
}
.titWrap.gold {
    margin: -200px auto 30px;
    background: #d5b45c;
}
.priceInfoWrap .inner #big {
    width: 450px;
    height: 450px;
}

@media screen and (max-width: 767px) {
.titWrap {
    width: 180px;
    height: 180px;
}
.priceInfoWrap .inner #big {
    width: 230px;
    height: 230px;
}
.titWrap .tit {
    font-size: 36px;
}
.titWrap .tit.min {
    font-size: 26px;
}
.titWrap.gold {
    margin-top: -50px;
}
}
/*------------------------------------------
  .priceInfoWrap
------------------------------------------*/

.price .inner {
    padding-bottom: 40px !important;
}
.priceInfoWrap .topTxt {
    margin-bottom: 60px;
}
.priceInfoWrapImg {
    display: block;
    width: 100%;
    margin: 0 auto;
}
.price .txt {
    font-size: 13px;
    text-align: center;
}
/*
	サブボックス
---------------------------*/

.priceInfo {
    margin-top: 50px;
}
.priceInfo .tit {
    font-weight: bold;
    text-align: center;
    padding-bottom: 5px;
    margin-bottom: 25px;
    border-bottom: 1px solid #d5b45c;
}
.priceInfo .subTit {
    font-size: 15px;
    text-align: center;
    font-weight: bold;
}
.priceInfo .subTit:before {
    color: #d5b45c;
    content: "●";
}
.priceInfo .txt {
    margin-bottom: 20px;
}
.priceInfo dt:last-of-type, .priceInfo dd:last-of-type {
    padding-bottom: 0;
}
.priceInfo dl {
    font-weight: bold;
    overflow: hidden;
    margin-bottom: 30px;
}
.priceInfo dt {
    clear: both;
    float: left;
    width: 50%;
    text-align: right;
    padding-right: 30px;
    padding-bottom: 15px;
}
.priceInfo dd {
    float: left;
    width: 50%;
    text-align: left;
    padding: 0 0 15px 30px;
    border-left: 1px solid #b4b4b4;
}
.priceInfo .syorui {
    line-height: 2.8;
}
/* modBtn */

.priceInfo .modBtn {
    margin: 20px auto 55px;
}

@media screen and (max-width: 767px) {
.priceInfoWrap .topTxt {
    margin-bottom: 30px;
}
.priceInfo dt {
    width: 120px;
    font-size: 12px;
    padding-right: 20px;
}
.priceInfo dd {
    width: calc(100% - 140px);
    font-size: 12px;
    padding-left: 20px;
}
.priceInfo .modBtn {
    margin: 20px auto 40px;
}
}
/*------------------------------------------
  .pricePlan
------------------------------------------*/

.pricePlan {
    margin-bottom: 45px;
    border: 1px solid #4c4b4c;
}
.pricePlan .topName {
    color: #fff;
    font-size: 13px;
    text-align: center;
    padding: 5px;
    background: #4c4b4c;
}
.pricePlan .txtBox {
    padding: 30px;
}
.pricePlan .subName {
    font-size: 17px;
    text-align: center;
    font-weight: 500;
    position: relative;
    padding-top: 40px;
    margin-bottom: 35px;
}
.pricePlan .subName:before {
    content: "";
    width: 6px;
    height: 30px;
    background: #d5b45c;
    border-radius: 10px;
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    margin: auto;
}
.pricePlan .modTxt01 {
    margin-bottom: 50px;
}
/*
	table
---------------------------*/

.pricePlanData {
    width: 33.3%;
    float: left;
}
.pricePlanData th, .pricePlanData td {
    text-align: center;
    vertical-align: top;
    font-size: 27px;
    border: 1px solid #b4b4b4;
    border-right: none;
    letter-spacing: 1px;
}
.pricePlanData:last-of-type th, .pricePlanData:last-of-type td {
    border-right: 1px solid #b4b4b4;
}
.pricePlanData th span, .pricePlanData td span {
    display: block;
    font-size: .55em;
    font-weight: normal;
    letter-spacing: 1px;
}

.pricePlanData td.left span{
    text-align: left;
    padding: 0 10px;
    
    font-size: .50em;

}

.pricePlanData th {
    color: #fff;
    font-weight: 500;
    padding: 10px 10px 20px;
}
.pricePlanData td {
    padding: 15px 5px;
    letter-spacing: 3px;
    font-weight: bold;
    background: #fff;
}
.pricePlanData td em {
    font-size: .6em;
    margin-left: 5px;
}
/* membership ship */

.membership {
    margin-top: 75px;
}
.membership .pricePlanData:last-of-type {
    width: 33.4%;
}
.membership td {
    padding: 30px 5px;
}
.pricePlanData .comment {
    font-size: 14px;
    font-weight: normal;
    padding-bottom: 8px;
    margin-bottom: 15px;
    border-bottom: 1px solid #fff;
}
.pricePlanData .comment {
    position: relative;
}
/* 吹き出し */
.pricePlanData .comment:after,  .pricePlanData .comment:before {
    top: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}
.pricePlanData .comment:after {
    border-color: rgba(213, 180, 92, 0);
    border-width: 5px;
    margin-left: -5px;
}
.pricePlanData .comment:before {
    border-color: rgba(180, 180, 180, 0);
    border-top-color: #fff;
    border-width: 7px;
    margin-left: -7px;
}
/* color */

.pricePlanData .premium {
    background: #d5b45c;
}
.pricePlanData .premium .comment:after {
    border-top-color: #d5b45c;
}
.pricePlanData .regular {
    background: #51a199;
}
.pricePlanData .regular .comment:after {
    border-top-color: #51a199;
}
.pricePlanData .night {
    background: #7374c8;
}
.pricePlanData .night .comment:after {
    border-top-color: #7374c8;
}

.pricePlanData .day {
    background: #66a4f0;
}
.pricePlanData .day .comment:after {
    border-top-color: #66a4f0;
}
.pricePlanData .light {
    background: #6eb2ab;
}
.pricePlanData .light .comment:after {
    border-top-color: #6eb2ab;
}
.pricePlanData .mente {
    background: #a2bab6;
}
.pricePlanData .mente .comment:after {
    border-top-color: #a2bab6;
}

/* ticket plan */

.ticket {
    margin-top: 50px;
}
.ticket .tableWrap {
    margin-bottom: 20px;
}
.ticket th {
    padding: 15px;
    background: #4c4b4c;
}
.ticket .tableWrap + .subName {
    margin-top: 70px;
}
/* welcome */

.welcome {
    float: none;
    margin: 0 auto;
}
.welcome th {
    background: #a0b4e6;
}
/*
	subBox
---------------------------*/

.pricePlan .subBox {
    width: 99.9%;
    padding: 20px 10px;
    background: #fff;
    border: 1px solid #b4b4b4;
    border-top: none;
}
.pricePlan .subBox p {
    font-size: 18px;
    font-weight: bold;
    text-align: center;
}
@media screen and (min-width: 768px) {
    .pricePlanData .comment{
        height: 90px;
    }

}
@media screen and (max-width: 767px) {
.pricePlan {
    margin-top: 30px;
}
.pricePlan .txtBox {
    padding: 20px 15px;
}
.pricePlan .subName {
    margin-bottom: 20px;
}
.pricePlan .modTxt01 {
    margin-bottom: 30px;
  
}
/*
		table
	---------------------------*/
	
.pricePlanData {
    float: none;
    width: 100% !important;
    max-width: 300px;
    margin: 0 auto 15px;
}
.pricePlanData th,  .pricePlanData td {
    display: block;/* matchH 解除用 */
    font-size: 20px;
    border: 1px solid #b4b4b4;
    border-bottom: none;
}
.pricePlanData tr:last-of-type th,  .pricePlanData tr:last-of-type td {
    border-bottom: 1px solid #b4b4b4;
}
.pricePlanData th {
    padding: 10px 15px !important;
}
.pricePlanData td {
    padding: 10px 15px !important;
}
/* membership ship */
	
.pricePlanData .comment {
    font-size: 13px;
    margin-bottom: 8px;
}
/* ticket plan */
	
.ticket .tableWrap + .subName {
    margin-top: 40px;
}
.welcome.pricePlanData {
    margin-bottom: 0 !important;
}
/*
		subBox
	---------------------------*/
	
.pricePlan .subBox {
    float: none;
    width: 100%;
    max-width: 300px;
    border: 2px solid #b4b4b4;
}
.pricePlan .subBox p {
    font-size: 15px;
}
}


			.pricePlanData3 {
				/*width: 50% !important;*/
				margin-bottom: 30px;
			}
				.matchpink {background-color: #F19EC2;}
			.pricePlanData .matchpink .comment:after {
				border-top-color: #F19EC2;
			}
			.pricePlanData4 {
				width: 100% !important;
			}
			.pricePlanData4 th,.pricePlanData4 td {
				width: 50%;
				vertical-align: middle;
			}


@media screen and (max-width: 767px) {
	.pricePlanData3, .pricePlanData4 th, .pricePlanData4 td {
    width: 100% !important;
}
	
}