@charset "utf-8";


.contents { padding: 70px 0 10%;}
.contents h1 { width: 480px; margin: 0 auto 45px; font-size: 2em; text-align: center; color: #c1272d;}
.contents h1 img { display: block; width: 100%; max-width: 206px; margin: 0 auto 38px;}
.contents h2 { height: 35px; margin-bottom: 60px; font-size: 1.143em; line-height: 32px; text-indent: 1.5em; color: #fff;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,ffffff+100&1+0,0+100 */
background: -moz-linear-gradient(left, rgba(0,0,0,1) 0%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, rgba(0,0,0,1) 0%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, rgba(0,0,0,1) 0%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 */
}

.contents h3 { margin-bottom: 4px; font-size: 1.143em; font-weight: normal; border-bottom: 1px solid #b3b3b3;}
.contents h3 span { display: inline-block; padding-bottom: 5px;}
@media screen and (max-width: 768px) {
.contents { padding: 55px 0 60px;}
.contents h1 { width: 95%; margin: 0 auto 25px; font-size: 1.4em;}
.contents h1 img { display: block; width: 100%; max-width: 180px; margin: 0 auto 10px;}
.contents h3 { font-size: .8em;}
}

.contentsInner > p { max-width: 700px; margin: 0 auto;}
.contentsInner > p span { color: #c1272d;}
.contentsInner > p:nth-last-of-type(1) { margin-bottom: 35px;}
.contentsInner > p:nth-of-type(3) { box-sizing: border-box; padding-left: 1em; text-indent: -1em;}
.contentsInner .new::before { display: block; content: "New"; max-width: 40px; font-size: .9em; color: #c1272d;}

.contentsInner table td { position: relative;}
.setPlan { margin-bottom: 50px;}
.setPlan > p { width: 715px; margin: 0 auto 30px; text-align: center;}
.setPlan .price { margin-bottom: 40px;}
.setPlan .price table { width: 100%;}
.setPlan .price table .part { padding-left: 20px;}
.setPlan .price table thead .course,
.setPlan .price table tbody .course { width: 180px;}
.setPlan .price table thead .part,
.setPlan .price table tbody .part { width: 350px;}
.setPlan .price table thead .priceDetail, 
.setPlan .price table tbody .priceDetail { text-align: center;}

.specific { margin-bottom: 5%;}
.specific > p { margin-bottom: 5%; text-align: center;}
.specific .priceWrapper .price { width: 100%; max-width: none; margin: 0 auto 25px;}
/*
.specific .priceWrapper .price { width: 90%; max-width: none; margin-bottom: 25px;}
.specific .priceWrapper .price { width: 45%; max-width: 330px; min-height: 240px; margin-bottom: 25px;}
.specific .priceWrapper .price:nth-child(odd) { float: left;}
.specific .priceWrapper .price:nth-child(even) { float: right;}
.specific .priceWrapper .price table .part { width: 200px;}*/
.specific .priceWrapper .price table .part { width: 60%;}
.specific .priceWrapper .price table .part p { text-indent: 1em;}
.specific .priceWrapper .price table .part p::before { display: inline-block; content: "ー";}
.specific .priceWrapper .price table thead .priceDetail,
.specific .priceWrapper .price table tbody .priceDetail { text-align: center;}


@media screen and (max-width: 768px) {
.contentsInner > p { font-size: .8em;}

.setPlan > p { width:95%; text-align:left; font-size:.929em;}
.setPlan > p .pc { display: none;}
.setPlan > p .sp { display: block;}
.setPlan .price table .course { width:120px; padding-right: 10px;}
.setPlan .price table .part { padding-left: 10px;}
.setPlan .price table .part br { display: none;}
.setPlan .priceWrapper .price7 p { font-size: .8em; padding-top: 10px;}

.specific .priceWrapper { margin-bottom: 35px;}
.specific .priceWrapper .price { width: 100%; max-width: none; min-height: 0; margin-bottom: 25px;}
.specific .priceWrapper .price:nth-child(odd),
.specific .priceWrapper .price:nth-child(even) { float: none;}
.specific .priceBox h3 { width: 180px; margin: 0 auto 30px;}
.specific .priceBox > p { width:95%; margin: 0 auto; padding-left:1em; font-size:.8em; text-indent:-1em;}
.specific .priceBox > p:nth-last-of-type(1) { margin-bottom: 35px;}
.specific .priceWrapper .price table .part { width: 50%;}
.specific .priceWrapper .price table .part p { text-indent: 1em;}
.specific .priceWrapper .price table .part p span { display: block;}
.specific > p { font-size: .929em;}
.specific .priceWrapper > p { font-size: .8em;}

}