@charset "utf-8";
@import url("base.css");

@media (max-width: 1001px) {
}
@media (max-width: 801px) {
}
@media (max-width: 481px) {
}

#plan .read {}
#plan .read h3 { margin-bottom: 10px; text-align: center;}
#plan .read h3 span { display: inline-block; padding: 4px; border-bottom: solid 2px #000;}
#plan .read p { text-align: center;}
#plan .bloc { padding: 20px 0;}
#plan .bloc .ctn { width: 90%; max-width: 1200px; margin: 0 auto;}

#plan .ctn .plan-tit { padding: 10px 0; border-bottom: solid 1px #f00;}
#plan .ctn .plan-tit h4 { font-size: 16px; text-align: center;}
#plan .ctn .plan-tit h4 span { font-size: 20px;}
#plan .ctn .flex-3,
#plan .ctn .flex-4 { display: flex; justify-content: space-between; width: 92%; max-width: 1200px; margin: 0 auto; padding: 10px 0;}
#plan .ctn .flex-3 .box { width: 33%; border-left: solid 1px #f00;}
#plan .ctn .flex-4 .box { width: 25%; border-left: solid 1px #f00;}
#plan .ctn .box { padding: 20px 0;}
#plan .ctn .box:first-child { border-left: none;}
#plan .ctn .box p { margin-bottom: 10px; text-align: center;}
#plan .ctn .box dl { text-align: center;}
#plan .ctn .box dl dt { margin-bottom: 10px;}
#plan .ctn .box dl dt span { display: block; width: 90%; max-width: 180px; margin: 0 auto; padding: 4px 0px; background: #eee;
 font-weight: 700;
}
#plan .ctn .box dl dd { font-size: 16px;}
#plan .ctn .box dl dd span{ display: block;}
#plan .ctn .box dl dd span.price em { font-size: 20px; font-weight: 700;}
@media (max-width: 641px) {
	#plan .ctn .flex-3,
	#plan .ctn .flex-4 { display: block;}
	#plan .ctn .flex-3 .box { width: 100%; border-left: none;}
	#plan .ctn .flex-4 .box { width: 100%; border-left: none;}
}


#plan .ex-box { width: 90%; max-width: 1000px; margin: 0 auto; padding: 0 6px; border: solid 1px #000;}
#plan .ex-box .inner { padding: 30px; border-left: solid 1px #000; border-right: solid 1px #000;}
#plan .ex-box dl { margin-bottom: 20px;}
#plan .ex-box dl dt {}
#plan .ex-box dl dt span { display: block;}
#plan .ex-box dl dd {}
#plan .ex-box dl dd span { display: inline-block; padding-right: 1em;}
#plan .ex-box dl dd span em { display: inline-block; padding-right: 1em; font-weight: 700;}
#plan .ex-box ul li { font-size: 14px;}
#plan .ex-box ul li::before { content: '※';}


#plan .need { width: 90%; max-width: 1200px; margin: 0 auto 40px;}
#plan .need h4 { margin-bottom: 20px;}
#plan .need h4 span { display: inline-block; padding: 4px; border-bottom: solid 2px #000;}
#plan .need ol { font-size: 0; }
#plan .need ol li { display: inline-block; margin-right: 20px; font-size: 16px; font-weight: 700;}
#plan .need ol li:last-child { margin-right: 0px;}
#plan .need ul.kome { padding-left: 1.5em;}
#plan .need ul li { font-size: 14px;}

#plan .value .inner { width: 92%; max-width: 1000px; margin: 0 auto; padding: 40px 0;}
#plan .value .tips { margin-bottom: 30px; padding: 20px; border: solid 2px #000; border-radius: 50px;}
#plan .value .tips h4 { line-height: 1.4; text-align: center;}
#plan .value .ctn-flex { position: relative; display: flex; justify-content: space-between; width: 100%; padding: 30px 0;}
#plan .value .ctn-flex:after { content: ''; display: block; width: 2px; height: 100%; background: #000;
 position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) rotate(10deg);
}
#plan .value .box { width: 50%;}
#plan .value .box dl { display: table; width: 100%;}
#plan .value .box dl dt,
#plan .value .box dl dd { display: table-cell; vertical-align: middle; text-align: center;}
#plan .value .box dl dt { width: 60%;}
#plan .value .box dl dd { position: relative; width: 40%;}
#plan .value .box dl dd:before { content: ''; display: block; width: 0px; height: 0px; border: solid 20px transparent; border-left: solid 15px #000; border-right: 0px;
 position: absolute; left: 0; top: 50%; transform: translate(0,-50%);
}
#plan .value .box dl dt span { display: block; font-weight: 700;}
#plan .value .box dl dd span { font-size: 30px;}
#plan .value .box dl dd span em { font-size: 60px; line-height: 1;}
#plan .value .note ul { text-align: right;}
@media (max-width: 801px) {
	#plan .value .tips { margin-bottom: 0px; padding: 12px 0;}
	#plan .value .ctn-flex { padding: 20px 0;}
	#plan .value .ctn-flex:after { content: none;}
	#plan .value .box dl { display: block;}
	#plan .value .box dl dt,
	#plan .value .box dl dd { display: block; }
	#plan .value .box dl dt { width: 100%; margin-bottom: 12px; font-size: 12px;}
	#plan .value .box dl dt span { font-size: 24px;}
	#plan .value .box dl dd { position: relative; width: 100%; padding-top: 20px;}
	#plan .value .box dl dd:before { border: solid 20px transparent; border-top: solid 15px #000; border-bottom: 0px; left: 50%; top: 0%; transform: translate(-50%,0);}
}

#trial .btn-flex { display: flex; justify-content: space-between;}
@media (max-width: 801px) {
	#trial .btn-flex { display: block;}
}