@charset "utf-8";

/*
  helper
--------------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 767px) {
	.text-center-sp {text-align: center !important;}
	.text-left-sp {text-align: left !important;}
}

@media screen and (min-width: 768px) {
	.hidden-pc { display: none !important; }
}

@media screen and (max-width: 767px) {
	.hidden-sp { display: none!important; }
}

@media screen and (max-width: 767px) {
	.sp-img-50 {
		zoom: 0.5;
		-moz-transform:scale(0.5);
	}
	.sp-img-80 {
		zoom: 0.8;
		-moz-transform:scale(0.8);
	}
}


.disp-inline-block {
	display: inline-block;
}

/*
  layout
--------------------------------------------------------------------------------------------------------*/

/* row */
.row {
	position: relative;
	margin-right: -10px !important;
	margin-left: -10px !important;
}

.row [class^="col-"] {
	box-sizing: border-box;
	display: inline-block;
	margin: 0 -5px 0 0;
	padding: 0 10px;
	vertical-align: top;
}

.row [class^="col-"] > .box {
	margin-bottom: 0;
}

.row.row-sp-s {
	margin: 0px -8px 0px;
}

.row.row-sp-s > [class^="col-"] {
	padding: 0 8px;
}

.row.row-sp-s.row-content > [class^="col-"] {
	margin-bottom: 16px;
}

.row .col-4 {
	width: 4%;
}

.row .col-5 {
	width: 5%;
}

.row .col-10 {
	width: 10%;
}

.row .col-20 {
	width: 20%;
}

.row .col-25 {
	width: 25%;
}

.row .col-30 {
	width: 30%;
}

.row .col-33 {
	width: 33.33%;
}

.row .col-40 {
	width: 40%;
}

.row .col-45 {
	width: 45%;
}

.row .col-48 {
	width: 48%;
}

.row .col-50 {
	width: 50%;
}

.row .col-55 {
	width: 55%;
}

.row .col-60 {
	width: 60%;
}

.row .col-66 {
	width: 66.666%;
}

.row .col-67 {
	width: 67%;
}

.row .col-70 {
	width: 70%;
}

.row .col-75 {
	width: 75%;
}

.row .col-80 {
	width: 80%;
}

.row .col-90 {
	width: 90%;
}

.row .col-100 {
	width: 100%;
}


@media screen and (min-width: 768px) {
	.tab-cont-display .row {
		margin-right: -7px !important;
		margin-left: -7px !important;
	}
}

@media screen and (max-width: 767px) {
	.tab-cont-display .row {
		margin-right: 0 !important;
		margin-left: 0 !important;
	}
	.row.row-sp-s {
		margin: 0px -6px 0px;
	}
	
	.row.row-sp-s > [class^="col-"] {
		padding: 0 6px;
	}
	
	.row.row-sp-s.row-content > [class^="col-"] {
		margin-bottom: 9px;
	}
	
	.row .sp-col-100 {
		width: 100%;
	}
	
	.row .sp-col-50 {
		width: 50%;
	}
	.tab-cont-display .row.row-sp-s > [class^="col-"] {
		padding: 0;
	}
}


/*
  Section
--------------------------------------------------------------------------------------------------------*/
/* layoutSection */
.layoutSection {
	margin: 0 auto;
}

.layoutSection.layout-col-pc80-tab100 {
	width: 80%;
}

@media screen and (min-width: 768px) and ( max-width:979px) {
	.layoutSection.layout-col-pc80-tab100 {
		width: 100%;
	}
}

@media screen and (max-width: 767px) {
	.layoutSection.layout-col-pc80-tab100 {
		width: 100%;
	}
}


.section-bd-gray { border: 1px solid #d1d1d1; padding: 30px; }

@media screen and (max-width: 767px) {
	.section-bd-gray { padding: 20px; }
}

/*
  carousel
--------------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 767px) {
	.carousel-ttl-center .carousel-section .carousel-ctr .carousel-header {
	 text-align: center;
	}
}


/*
  btn
--------------------------------------------------------------------------------------------------------*/
.btn-extra .btn-basicauOrange {
	font-weight: bold;
	border: 2px solid #eb5505;
}



/*
  border
--------------------------------------------------------------------------------------------------------*/
/*テーブルとかに*/
.border-top-none{
	border-top: none!important;
}
.border-bottom-none{
	border-bottom: none!important;
}
.border-left-none{
	border-left: none!important;
}
.border-right-none{
	border-right: none!important;
}



/*
  icon
--------------------------------------------------------------------------------------------------------*/
.icn-plus {
	position: relative;
	display: block;
}
[class^="icn-plus"]:before,
[class^="icn-plus"]:after {
	position: absolute;
	top: 0px;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	content: "";
	vertical-align: middle;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
[class^="icn-plus"]:before {
	-webkit-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	transform: rotate(90deg);
}
[class^="icn-plus"]:after {
	-webkit-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	transform: rotate(90deg);
}
.icn-plus {
	width: 30px;
	height: 30px;
	margin: 20px auto;
	background: #999999;
	border-radius: 30px;
}
.icn-plus:before {
	width: 0;
	height: 20px;
	border-right: 4px solid #fff;
}
.icn-plus:after {
	width: 20px;
	height: 0;
	border-bottom: 4px solid #fff;
}
.icn-plus.icn-middle {
	position: absolute;
	top: -15px;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
}

@media screen and (max-width: 767px) {
	.sp-col-100 .icn-plus.icn-middle { position: relative; top:0;}
}

/*
  Box
--------------------------------------------------------------------------------------------------------*/
.roundBox { border: 1px solid #cccccc; border-radius: 10px; }
.roundBox .roundBox-head { padding: 15px; border-bottom: 1px solid #ccc; }
.roundBox .roundBox-body { padding: 15px; }



/*
  charge-discount
--------------------------------------------------------------------------------------------------------*/
.charge-discount { display: table;  margin: 0 auto;}
.charge-discount > div { display: table-cell; }
.charge-discount > .price { padding-right: 20px; vertical-align: middle;}
.charge-discount > .discount-price { padding-left: 30px; position: relative; }
.charge-discount > .discount-price:before { content: "\25b6"; font-size: 12px; position: absolute; left:0; top: 50%; margin-top: -6px; }

/*
  charge-plan-box
--------------------------------------------------------------------------------------------------------*/
.charge-paln-box { overflow: hidden; padding: 20px 30px; }
.charge-paln-box .charge-plan { width: 100%; overflow: hidden;  }
.charge-paln-box .charge-plan dt { float: left;  }
.charge-paln-box .charge-plan dd { text-align: right; }
.charge-paln-box .charge-plan dd .charge-discount { display: inline-block; }

.charge-paln-box.charge-paln-icon { display: table; table-layout: fixed; }
.charge-paln-box.charge-paln-icon .charge-icon { display: table-cell; width: 9%; }
.charge-paln-box.charge-paln-icon .charge-icon img { width: 100%; }
.charge-paln-box.charge-paln-icon .charge-plan { display: table-cell; width: 91%; vertical-align: middle; }

@media screen and (min-width: 768px) and ( max-width:979px) {
.charge-paln-box.charge-paln-icon .charge-icon { width: 12%; }
.charge-paln-box.charge-paln-icon .charge-plan { width: 88%; }
}


@media screen and (max-width: 767px) {
	.charge-paln-box { padding: 20px; }
	.charge-paln-box .charge-plan dt { float: none; font-weight: normal; font-size: 12px; text-align: center; }
	.charge-paln-box .charge-plan dd { text-align: center; }

	.charge-paln-box.charge-paln-icon { text-align: left; }
	.charge-paln-box.charge-paln-icon .charge-icon { width: 20%; }
	.charge-paln-box.charge-paln-icon .charge-plan { width: 80%; }
	.charge-paln-box.charge-paln-icon .charge-plan dt { text-align: left; }
	.charge-paln-box.charge-paln-icon .charge-plan dd { text-align: left; }
}


/*
  price-box
--------------------------------------------------------------------------------------------------------*/
.price-box { text-align: center; }
.price-box .price-box-col { display: inline-block; vertical-align: middle; }
.price-box .sub-price { font-size: 16px; padding-right: 10px; line-height: 1.2; font-weight: bold; }
.price-box .price { font-size: 70px; font-weight: bold; }
.price-box .price-unit { font-size: 24px;  font-weight: bold; }

.cardBox-col1_2 .price-box .price { font-size: 60px; }
.cardBox-col1_2 .price-box .price-unit { font-size: 20px; }

@media screen and (max-width: 767px) {
	.price-box .sub-price { font-size:13px; padding-right: 5px; }
	.price-box .price { font-size: 46px; }
	.price-box .price-unit { font-size: 18px; }
	.cardBox-col1_2 .price-box .price { font-size: 46px; }
	.cardBox-col1_2 .price-box .price-unit { font-size: 18px; }
}


/*
  charge-heading-ttl-box
--------------------------------------------------------------------------------------------------------*/
.charge-heading-ttl-box { display: table; width: 100%; }
.charge-heading-ttl-box .charge-heading-ttl { display: table-cell; vertical-align: middle; width: 55%; }
.charge-heading-ttl-box .charge-heading-ttl .heading-ttl{ display: inline-block; padding-right: 10px; }
.charge-heading-ttl-box .charge-heading-ttl .heading-icon { display: inline-block; }
.charge-heading-ttl-box .charge-heading-price { display: table-cell; text-align: right;  vertical-align: bottom;width: 45%;  }

@media screen and (max-width: 767px) {
	.charge-heading-ttl-box .charge-heading-ttl {  padding-right: 10px; width: 50%; }
	.charge-heading-ttl-box .charge-heading-ttl .heading-ttl{ display: block; padding-right: 0; padding-bottom: 5px; }
	.charge-heading-ttl-box .charge-heading-ttl .heading-icon { display: block; }
	.charge-heading-ttl-box .charge-heading-price { width: 50%; }
}




/*
  font
--------------------------------------------------------------------------------------------------------*/
.txtSize-exLarge { font-size: 70px; }
.txtSize-xLarge { font-size: 42px; }
.txtSize-mLarge { font-size: 34px; }
.txt-lead { font-size: 18px; line-height: 1.6; color: #333333; }



@media screen and (max-width: 767px) {
	.txtSize-exLarge { font-size: 50px; }
	.txtSize-xLarge { font-size: 34px; }
	.txtSize-mLarge { font-size: 23px; }
}


/*
 icon
--------------------------------------------------------------------------------------------------------*/
.icon-fl .icon { float:left;}
.icon-fl .card-display { margin:0!important;}
.icon-fl:after { display: block; clear: both; content: "";}