@charset "UTF-8";
 .page_title {
background: url(//www.kahokusmile.com/img/price/page_title.jpg) no-repeat center center;
}
main .bg_icon_orange {
position: relative;
padding: 80px 0 130px;
background: url(//www.kahokusmile.com/img/common/dot_line.svg) repeat-x center bottom;
}
main .bg_icon_orange::before {
position: absolute;
top: 260px;
left: 0;
width: 184px;
height: 302px;
background: url(//www.kahokusmile.com/img/common/bg_icon_orange.svg) no-repeat center center;
background-size: cover;
content: '';
}
main .difference {
margin-bottom: 80px;
}
main .difference h3 {
font-size: 4.0rem;
font-weight: 700;
text-align: center;
margin-bottom: 1.5em;
}
main .difference h3 + .comment {
text-align: center;
margin-bottom: 60px;
}
main .difference .box {
display: flex;
align-items: stretch;
margin-top: 40px;
}
main .difference .box section {
width: 48%;
background: #eff1f1;
overflow: hidden;
border-radius: 10px;
}
main .difference .box section:first-of-type {
margin-right: 4%;
}
main .difference .box section:first-of-type h4 {
display: flex;
justify-content: center;
align-items: center;
height: 64px;
padding-bottom: 14px;
margin-bottom: -14px;
background: url(//www.kahokusmile.com/img/price/title_bg_orange.svg) no-repeat center center;
font-size: 2.4rem;
font-weight: 700;
color: #FFF;
}
main .difference .box section:last-of-type h4 {
display: flex;
justify-content: center;
align-items: center;
height: 64px;
padding-bottom: 14px;
margin-bottom: -14px;
background: url(//www.kahokusmile.com/img/price/title_bg_green.svg) no-repeat center center;
font-size: 2.4rem;
font-weight: 700;
color: #FFF;
}
main .difference .box section p {
padding: 30px;
}
main .difference .box section:first-of-type p span {
color: #ee7800;
}
main .difference .box section:last-of-type p span {
color: #69ba46;
}
main .card {
margin-bottom: 80px;
}
main .card h3 {
font-size: 4.0rem;
font-weight: 700;
text-align: center;
margin-bottom: 1.5em;
}
main .card h3 + .comment {
text-align: center;
margin-bottom: 60px;
}
main .card h4 {
display: flex;
justify-content: center;
margin-bottom: 30px;
}
main .card h4 span {
display: block;
font-size: 2.8rem;
font-weight: 700;
border-bottom: solid 2px #ee7800;
}
main .card h4 + .comment {
text-align: center;
margin-bottom: 60px;
}
main .card ul {
display: flex;
justify-content: center;
}
main .card ul li {
width: 124px;
}
main .card ul li:not(:last-of-type) {
margin-right: 5px;
}
main .price_list > section {
display: flex;
}
main .price_list > section:not(:last-of-type) {
margin-bottom: 80px;
}
main .price_list > section .box_l {
width: 345px;
margin-right: 60px;
}
main .price_list > section .box_l h3 {
position: relative;
background: #69ba46;
font-size: 2.4rem;
font-weight: 700;
letter-spacing: 0;
color: #FFF;
padding: .6em 0;
padding-left: 60px;
border-radius: 2em;
}
main .price_list > section .box_l h3::before {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 30px;
width: 22px;
height: 22px;
background: url(//www.kahokusmile.com/img/common/arrow_white_green.svg) no-repeat center center;
background-size: cover;
content: '';
}
main .price_list > section .box_l h3 + p {
padding-left: 40px;
padding-top: .8em;
}
main .price_list > section .box_r {
width: calc(100% - (345px + 60px));
}
main .price_list > section .box_r > section .box_in {
padding: 20px;
}
main .price_list > section .box_r > section.bg_gray .box_in {
background: #e9eaea;
}
main .price_list > section .box_r > section .box_in h4 {
font-size: 1.8rem;
font-weight: 600;
color: #69ba46;
}
main .price_list > section .box_r > section .box_in dl {
display: flex;
padding-bottom: .8em;
border-bottom: dotted 1px #808080;
}
main .price_list > section .box_r > section.bg_gray .box_in dl:last-child {
padding-bottom: 0;
border-bottom: none;
}
main .price_list > section .box_r > section .box_in dl:not(:last-child) {
margin-bottom: 1em;
}
main .price_list > section .box_r > section .box_in dl dd {
margin-left: auto;
text-align: right;
}
main .price_list > section .box_r > section .box_in + .caution {
padding-top: .6em;
padding-left: 20px;
font-size: 1.3rem;
color: #69ba46;
}
main .price_list > section .box_r > section:not(:last-child) .box_in + .caution {
margin-bottom: 1.5em;
}
@media screen and (max-width: 1000px) {
main .price_list > section {
display: flex;
flex-direction: column;
}
main .price_list > section .box_l {
width: 100%;
margin-right: 0;
margin-bottom: 20px;
}
main .price_list > section .box_l h3 {
width: 345px;
}   
main .price_list > section .box_l h3 + p br {
display: none;
}     
main .price_list > section .box_r {
width: 100%;
}
}
@media screen and (max-width: 767px) {
main .bg_icon_orange {
position: relative;
padding: 10vw 0 20vw;
background: url(//www.kahokusmile.com/img/common/dot_line.svg) repeat-x center bottom;
}
main .bg_icon_orange::before {
top: calc(33.898vw * 2);
width: calc(23.99vw * 2);
height: calc(39.374vw * 2);
}
main .difference {
margin-bottom: 15vw;
}
main .difference h3 {
font-size: 2.0rem;
letter-spacing: 0;
}
main .difference h3 + .comment {
text-align: left;
margin-bottom: 10vw;
}
main .difference .box {
display: flex;
flex-direction: column;
align-items: stretch;
margin-top: 5vw;
}
main .difference .box section {
width: 100%;
border-radius: 10px;
}
main .difference .box section:first-of-type {
margin-right: 0;
margin-bottom: 6vw;
}
main .difference .box section:first-of-type h4 {
height: 16vw;
padding-bottom: 2vw;
margin-bottom: -2vw;
background-size: cover;
font-size: 2.0rem;
}
main .difference .box section:last-of-type h4 {
height: 16vw;
padding-bottom: 2vw;
margin-bottom: -2vw;
background-size: cover;
font-size: 2.0rem;
}
main .difference .box section p {
padding: 5vw 4vw;
}
main .card {
margin-bottom: 10vw;
}
main .card h3 {
font-size: 2.0rem;
margin-bottom: 1.5em;
}
main .card h3 + .comment {
text-align: left;
margin-bottom: 10vw;
}
main .card h4 {
display: flex;
justify-content: center;
margin-bottom: 5vw;
}
main .card h4 span {
display: block;
font-size: 2.0rem;
border-bottom: solid 2px #ee7800;
}
main .card h4 + .comment {
text-align: left;
margin-bottom: 10vw;
}
main .card ul {
display: flex;
justify-content: center;
flex-wrap: wrap;
margin-bottom: -6vw;
}
main .card ul li {
width: 33.3%;
padding: 0 2%;
margin-bottom: 6vw;
}
main .card ul li:not(:last-of-type) {
margin-right: 0;
}
main .price_list > section {
display: flex;
}
main .price_list > section:not(:last-of-type) {
margin-bottom: 10vw;
}
main .price_list > section .box_l {
margin-right: 0;
margin-bottom: 5vw;
}
main .price_list > section .box_l h3 {
font-size: 2.0rem;
letter-spacing: inherit;
padding: .6em 0;
padding-left: 3em;
border-radius: 2em;
width: 100%;
}
main .price_list > section .box_l h3::before {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 1em;
width: 1.2em;
height: 1.2em;
background: url(//www.kahokusmile.com/img/common/arrow_white_green.svg) no-repeat center center;
background-size: cover;
content: '';
}
main .price_list > section .box_l h3 + p {
padding-left: 0;
padding-top: .8em;
}
main .price_list > section .box_r {
width: 100%;
}
main .price_list > section .box_r > section .box_in {
padding: 5vw 4vw;
}
main .price_list > section .box_r > section.bg_gray .box_in {
background: #e9eaea;
}
main .price_list > section .box_r > section .box_in h4 {
font-size: 1.8rem;
}
main .price_list > section .box_r > section .box_in dl {
display: flex;
flex-direction: column;
padding-bottom: .8em;
border-bottom: dotted 1px #808080;
}
main .price_list > section .box_r > section.bg_gray .box_in dl:last-child {
padding-bottom: 0;
border-bottom: none;
}
main .price_list > section .box_r > section .box_in dl:not(:last-child) {
margin-bottom: 1em;
}
main .price_list > section .box_r > section .box_in dl dd {
margin-left: 0;
text-align: right;
}
main .price_list > section .box_r > section .box_in + .caution {
padding-top: .6em;
padding-left: 4vw;
font-size: 1.3rem;
color: #69ba46;
}
main .price_list > section .box_r > section:not(:last-child) .box_in + .caution {
margin-bottom: 1.5em;
}
}