@charset "UTF-8";
/* CSS Document */


.self_01{}
.self_01>div{ border-color: #f2f2f2; border-style: solid;}
.self_01>div>h4{ text-align: center; line-height: 3; background-color: white; background-color: #f2f2f2; font-weight: bold;}
.self_01>div>h4>small{ display: block; background-color: #4bbed0; color: white; font-weight: bold; line-height: 2;}
.self_01>div>p{ margin: 0;}
.self_01>div>figure{ margin: 0; background-color: white; text-align: center;}
.self_01>div>figure>figcaption{}
.shouhi_box img{ display: block; margin: 5px auto 10px;}
.shouhi_box>div>p strong{ color: red;}


.mpoint{ padding-left: 1.5em; position: relative; line-height: 2.5em;}
.mpoint>span{ padding-bottom: 5px; line-height: 1em; border-bottom: 1px solid #4bbed0; display: inline-block;}
.mpoint::before{ display: block; content: ""; position: absolute; border-left: 2px solid #4bbed0; border-bottom: 2px solid #4bbed0; -webkit-transform: rotate(-45deg); transform: rotate(-45deg);}

.kakaku_table{ text-align: center; position: relative; z-index: 3;}
.kakaku_table thead{}
.kakaku_table thead tr{}
.kakaku_table thead tr th{ background-color: #4bbed0; color: white;}
.kakaku_table tbody{}
.kakaku_table tbody tr{}
.kakaku_table tbody tr th,
.kakaku_table tbody tr td{ background-color: #f2f2f2;}
.kakaku_table tr th,
.kakaku_table tr td{ border-left: 1px solid white; border-top: 1px solid white; line-height: 3em; padding: 0; border-bottom: none;}
.kakaku_table tr th{}
.kakaku_table tr td{}
.kakaku_table tr th:first-child{ border-left: none;}
.kakaku_table thead tr th{ border-top: none;}
.kakaku_table tr th:first-child{ width: 20%;}
.kakaku_table tr td{ width: 10%;}

.kousei_box{ background-color: #f2f2f2; text-align: center;}
.kousei_box h4{ background-color: #4bbed0; color: white; font-size: 16px; line-height: 2em; margin: 0;}
.kousei_box ul{ list-style: none; display: flex; justify-content: space-between; padding: 0; align-content: center; flex-wrap: wrap;}
.kousei_box ul>li{ margin: 0; background-color: white; display: table;}
.kousei_box ul>li>span{ display: table-cell; vertical-align: middle; line-height: 1.2em; position: relative;}

.merit3_box{ display: flex; width: 100%; justify-content: space-between; text-align: center;}
.merit3_box>figure{ width: 32%; border: #4bbed0 solid 2px; padding: 5px;}
.merit3_box>figure>img{ margin-bottom: 5px;}


.merit_table{ border-left: 1px solid black; border-top: 1px solid black; margin-bottom: 20px; width: 700px;}
.merit_table thead th,
.merit_table tbody th,
.merit_table tbody td{ border-right: 1px solid black; border-bottom: 1px solid black; vertical-align: top;}
.merit_table thead th{ text-align: center; padding: 10px; border-top:none;}
.merit_table tbody th{ text-align: left; padding: 10px; width: 100px;}
.merit_table tbody td{ padding: 10px;}
.merit_table tbody ul{ padding-inline-start: 20px; margin: 0;}
.merit_table th{ background-color:#f2f2f2;}

@media (min-width: 768px) {
.self_01{ display: flex; justify-content: space-between; margin-bottom: 10px;}
.self_01>div{ width: 340px; border-width: 5px;}
.self_01>div>h4{ font-size: 16px;}
.self_01>div>h4>small{ font-size: 16px; margin: -5px -5px 0;}
.self_01>div>p{ padding: 0 10px;}
.self_01>div>figure{ padding: 10px 10px 0;}
.self_01>div>figure>figcaption{ padding: 5px 0;}
.shouhi_box>div>p{ padding-bottom: 5px; font-size: 14px;}

.mpoint::before{ width: 20px; height: 10px; left: 0; top: 1em;}
.kakaku_table{ width: 100%;}
.kousei_box ul{ padding: 20px 40px;}
.kousei_box ul>li{ width: 125px; height: 60px;}
.kousei_box ul>li>span::after{ content: "+"; display: block; font-size: 40px; line-height: 60px; position: absolute; right: -40px; top: 0; width: 40px; text-align: center;}
.kousei_box ul>li:last-child>span::after{ content: none;}

.flow_box{ padding: 0;}
.flow_box>li{ display: inline-block; margin: 0 50px 10px 0; position: relative;}
.flow_box>li>span{ display: table; background-color: #4bbed0; color: white; height: 4em; border-radius: 0.5em;}
.flow_box>li>span>span{ display: table-cell; vertical-align: middle; padding: 0 1em; text-align: center;}
.flow_box>li>small{ position: absolute; right: -50px; top: 0; font-size: 10px; width: 5em; display: block; text-align: center; line-height: 1em;}
.flow_box>li::after{ content: ""; display: block; position: absolute; right: -38px; top: 50%; margin-top: -10px; width: 0; height: 0; border-style: solid; border-width: 10px 0 10px 20px; border-color: transparent transparent transparent #4bbed0;}
.flow_box>li:last-child::after{ content: none;}
}
@media (max-width: 767.98px) {
.self_01{}
.self_01>div{ margin-bottom: 10px; border-width: 5px;}
.self_01>div>h4{ font-size: 14px;}
.self_01>div>h4>small{ font-size: 14px; margin: -5px -5px 0;}
.self_01>div>p{ padding: 0 10px;}
.self_01>div>figure{ padding: 10px 10px 0;}
.self_01>div>figure>figcaption{ padding: 5px 0;}

.shouhi_box>div>p{ padding-bottom: 5px; font-size: 14px;}
.shouhi_box img{ width: 90%;}
.mpoint::before{ width: 20px; height: 10px; left: 0; top: 1em;}
.kakaku_table{ width: 600px;}
.kakaku_table tbody tr th,
.kakaku_table thead tr th{ width: 5em;}
.merit3_box>figure{ font-size: 10px;}
.merit_table{ width: 600px;}

.kousei_box ul{ padding: 30px 15px 0;}
.kousei_box ul>li{ width: calc(50% - 15px); height: 60px; margin-bottom: 30px;}
.kousei_box ul>li:nth-child(odd)>span::after{ content: "+"; display: block; font-size: 30px; line-height: 60px; position: absolute; right: -30px; top: 0; width: 30px; text-align: center;}
.kousei_box ul>li:nth-child(1)>span::before,
.kousei_box ul>li:nth-child(2)>span::before{ content: "+"; display: block; font-size: 30px; line-height: 30px; position: absolute; right: 0; bottom: -28px; width: 100%; text-align: center;}

.flow_box{ padding: 0;}
.flow_box>li{ display: block; margin: 0 0 55px 0; position: relative;}
.flow_box>li>span{ display: table; width: 100%; background-color: #4bbed0; color: white; text-align: center; height: 4em; border-radius: 0.5em;}
.flow_box>li>span>span{ display: table-cell; vertical-align: middle;}
.flow_box>li>small{ position: absolute; bottom: -15px; left: 50%; margin-left: -25px; font-size: 10px; width: 5em; display: block; text-align: center; line-height: 1em;}
.flow_box>li::after{ content: ""; display: block; position: absolute; left: 50%; margin-left: -25px; bottom: -40px; width: 0; height: 0; border-style: solid;
border-width: 20px 25px 0 25px; border-color: #4bbed0 transparent transparent transparent;
}
.flow_box>li:last-child::after{ content: none;}
}





@media (min-width: 768px) {}
@media (max-width: 767.98px) {}

@media (min-width: 576px) and (max-width: 767.98px) {}
@media (max-width: 575.98px) {}