@charset "UTF-8";
 .page_title_white {
background: url(//www.kahokusmile.com/img/equipment/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: 300px;
left: 0;
z-index: -1;
width: 184px;
height: 302px;
background: url(//www.kahokusmile.com/img/common/bg_icon_orange.svg) no-repeat center center;
background-size: cover;
content: '';
}
main h3 {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 4.0rem;
margin-bottom: 1.6em;
}
main h3 span {
display: block;
font-weight: 700;
border-bottom: solid 2px #ee7800;
}
main h3 + .comment {
max-width: 800px;
padding: 0 20px;
margin: 0 auto;
margin-bottom: 60px;
}
main .info section:not(:last-of-type) {
margin-bottom: 80px;
}
main .info section > .comment {
margin-bottom: 2em;
}
main .info section .box {
display: flex;
}
main .info section .box > .comment {
width: 650px;
background: #eff1f1;
padding: 35px;
border-radius: 10px;
display: flex;
}
main .info section:nth-of-type(odd) .box > .comment {
order: 1;
}
main .info section:nth-of-type(even) .box > .comment {
order: 2;
}
main .info section .box > .comment h5 {
position: relative;
display: block;
font-size: 1.8rem;
font-weight: 700;
color: #69ba46;
padding-left: 1.3em;
width: 90px;
}
main .info section .box > .comment h5::before {
position: absolute;
top: .3em;
left: 0;
width: 1.1em;
height: 1.1em;
background: url(//www.kahokusmile.com/img/common/arrow_green.svg) no-repeat center center;
background-size: cover;
content: '';
}
main .info section .box > .comment h5 + .box_in {
width: calc(100% - 90px);
font-size: 1.4rem;
}
main .info section .box > .comment h5 + .box_in p:not(:last-of-type) {
margin-bottom: 1.2em;
padding-bottom: 1.2em;
background: url(//www.kahokusmile.com/img/common/dot_line.svg) repeat-x center bottom;
}
main .info section .box > .img {
width: calc(100% - 650px);
display: flex;
justify-content: center;
}
main .info section:nth-of-type(odd) .box > .img {
padding-left: 20px;
order: 2;
}
main .info section:nth-of-type(even) .box > .img {
padding-right: 20px;
order: 1;
}
main .info section .box > .img span {
display: block;
}
main .info section .box > .img span img {
width: auto;
max-width: 100%;
}
@media screen and (max-width: 940px) {
main .info section .box > .comment {
width: calc(100% - 200px);
}
main .info section .box > .img {
width: 200px;
}
}
@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 h3 {
font-size: 2.0rem;
margin-bottom: 1.6em;
}
main h3 + .comment {
max-width: 100%;
padding: 0 4%;
margin-bottom: 10vw;
}
main .info section:not(:last-of-type) {
margin-bottom: 15vw;
}
main .info section > .comment {
margin-bottom: 2em;
}
main .info section .box {
display: flex;
flex-direction: column;
}
main .info section .box > .comment {
width: 100%;
padding: 5vw 4vw;
border-radius: 10px;
display: flex;
flex-direction: column;
}
main .info section:nth-of-type(odd) .box > .comment {
order: 2;
}
main .info section:nth-of-type(even) .box > .comment {
order: 2;
}
main .info section .box > .comment h5 {
font-size: 1.8rem;
padding-left: 1.3em;
width: 100%;
order: 1;
}
main .info section .box > .comment h5::before {
position: absolute;
top: .3em;
left: 0;
width: 1.1em;
height: 1.1em;
background: url(//www.kahokusmile.com/img/common/arrow_green.svg) no-repeat center center;
background-size: cover;
content: '';
}
main .info section .box > .comment h5 + .box_in {
order: 2;
width: 100%;
font-size: 1.4rem;
}
main .info section .box > .comment h5 + .box_in p:not(:last-of-type) {
margin-bottom: 1.2em;
padding-bottom: 1.2em;
background: url(//www.kahokusmile.com/img/common/dot_line.svg) repeat-x center bottom;
}
main .info section .box > .img {
width: 100%;
display: flex;
justify-content: center;
margin-bottom: 5vw;
}
main .info section:nth-of-type(odd) .box > .img {
padding-left: 0;
order: 1;
}
main .info section:nth-of-type(even) .box > .img {
padding-right: 0;
order: 1;
}
main .info section .box > .img span {
display: block;
}
main .info section .box > .img span img {
width: auto;
max-width: 100%;
}
}