@charset "UTF-8";
 .page_title {
background: url(//www.kahokusmile.com/img/dentistrydock/page_title.jpg) no-repeat center center;
}
main .bg_green .bg_green_in {
padding-top: 90px;
padding-bottom: 100px;
background: url(//www.kahokusmile.com/img/common/dot_line.svg) repeat-x center bottom;
}
main .comment01 {
margin-bottom: 2.5em;
}
main .comment01 p:not(:last-of-type) {
margin-bottom: 1.2em;
}
main .anc_btn {
border: dashed 1px #69ba46;
margin-bottom: 100px;
padding: 20px;
border-radius: 10px;
}
main .anc_btn ul {
display: flex;
}
main .anc_btn ul li {
width: 32%;
}
main .anc_btn ul li:not(:last-child) {
margin-right: 2%;
}
main .anc_btn ul li a {
display: block;
font-size: 2.0rem;
font-weight: 700;
color: #69ba46;
background: #FFF;
text-align: center;
padding: .6em .8em;
border-radius: 10px;
}
main .anc_btn ul li a:hover {
background: #cae7be;
}
main .about > section:not(:last-of-type) {
margin-bottom: 100px;
}
main .about > section > .comment:not(:last-child) {
margin-bottom: 60px;
}
main .about > section > .comment p:not(:last-of-type) {
margin-bottom: 1.2em;
}
main .about > section > .comment p span {
color: #69ba46;
font-weight: 700;
}
main .about > section > .box section:not(:last-of-type) {
margin-bottom: 60px;
}
main .about > section > .comment:not(:last-child) ,
main .about > section > .box section .comment:not(:last-child) {
margin-bottom: 60px;
}
main .about > section > .comment p:not(:last-of-type) ,
main .about > section > .box section .comment p:not(:last-of-type) {
margin-bottom: 1.2em;
}
main .about > section > .comment p span ,
main .about > section > .box section .comment p span {
color: #69ba46;
font-weight: 700;
}
main .about > section > .comment p.img {
background: #FFF;
padding: 10px;
border-radius: 10px;
}
main .about section .about-img .box {
display: flex;
align-items: flex-start;
}
main .about section .about-img .box .img {
width: 325px;
border-radius: 10px;
overflow: hidden;
margin-left: auto;
}
main .about section .about-img .box .box_l {
width: calc(100% - (325px + 20px));
margin-right: 20px;
}
main .about section .about-img .box .box_l p:not(:last-of-type) {
margin-bottom: 1.2em;
}
main .about section .size .box {
display: flex;
align-items: flex-start;
padding-top: 1.5em;
}
main .about section .size .box .img {
width: 325px;
border-radius: 10px;
overflow: hidden;
margin-left: auto;
}
main .about section .size .box .box_l {
width: calc(100% - (325px + 20px));
margin-right: 20px;
}
main .about section .size .box .box_l p:not(:last-of-type) {
margin-bottom: 1.2em;
}
main .about section .size .box .box_l p span {
color: #69ba46;
font-weight: 700;
}
main .about section .check01 .comment {
margin-bottom: 2em;
}
main .about section .check01 .img {
max-width: 740px;
margin: 0 auto;
padding: 50px 100px;
background: #FFF;
border-radius: 10px;
}
main .about section .power {
max-width: 740px;
margin: 0 auto;
padding: 50px 80px;
background: #FFF;
border-radius: 10px;
}
main .about section .power p {
margin-bottom: 20px;
}
main .about section .power dl {
display: flex;
align-items: center;
}
main .about section .power dl:not(:last-of-type) {
padding-bottom: 20px;
margin-bottom: 20px;
border-bottom: dashed 1px #595757;
}
main .about section .power dl dt {
width: 170px;
background: #69ba46;
padding: .3em .4em;
text-align: center;
color: #FFF;
font-size: 2.0rem;
font-weight: 700;
margin-right: 10px;
border-radius: 1.5em;
}
main .about section .power dl dt span {
display: inline-block;
}
main .about section .power dl dt span::first-letter {
letter-spacing: 1em;
}
main .about section .power dl dd {
width: calc(100% - (170px + 10px));
}
main .about section .power_check {
display: flex;
align-items: flex-start;
margin-bottom: 80px;
}
main .about section .power_check .comment {
margin-right: 20px;
margin-bottom: 0;
}
main .about section .power_check .comment + p {
position: relative;
top: -150px;
margin-bottom: -150px;
max-width: 480px;
background: #FFF;
border-radius: 10px;
padding: 40px;
display: flex;
align-items: center;
justify-content: center;
}
main .about section .power_check .comment + p span {
display: block;
width: 340px;
}
main .about section .tbl01 table {
width: 100%;
overflow: hidden;
border-radius: 10px;
}
main .about section .tbl01 table thead tr th {
background: #d3ebc9;
text-align: center;
font-size: 2.2rem;
font-weight: 700;
padding: .4em 0;
width: 120px;
}
main .about section .tbl01 table thead tr th:first-of-type {
width: 200px;
}
main .about section .tbl01 table thead tr th:last-of-type {
width: calc(100% - (200px + 120px));
}
main .about section .tbl01 table thead tr th:not(:last-of-type) {
border-right: dotted 1px #808080;
}
main .about section .tbl01 table tbody tr th ,
main .about section .tbl01 table tbody tr td {
padding: 30px 10px;
background: #FFF;
vertical-align: middle;
}
main .about section .tbl01 table tbody tr th {
border-right: dotted 1px #808080;
}
main .about section .tbl01 table tbody tr:not(:last-of-type) th {
border-bottom: dotted 1px #808080;
}
main .about section .tbl01 table tbody tr td:not(:last-of-type) {
border-right: dotted 1px #808080;
}
main .about section .tbl01 table tbody tr:not(:last-of-type) td {
border-bottom: dotted 1px #808080;
}
main .about section .tbl01 table tbody tr td:first-of-type span {
display: flex;
justify-content: center;
align-items: center;
width: 80px;
height: 80px;
line-height: 1.1;
margin: auto;
border-radius: 50%;
font-size: 2.0rem;
font-weight: 700;
}
main .about section .tbl01 table tbody tr:nth-of-type(1) td:first-of-type span {
background: #ccf0f0;
}
main .about section .tbl01 table tbody tr:nth-of-type(2) td:first-of-type span {
background: #d9eed1;
}
main .about section .tbl01 table tbody tr:nth-of-type(3) td:first-of-type span {
background: #fce0c2;
}
main .about section .tbl01 table tbody tr td:first-of-type span em {
display: inline-block;
}
main .about section .tbl01 table tbody tr td:first-of-type span em::first-letter {
letter-spacing: .5em;
}
main .about section .tbl02 {
max-width: 600px;
margin: 0 auto;
margin-bottom: 50px;
}
main .about section .tbl02 table {
width: 100%;
overflow: hidden;
border-radius: 10px;
}
main .about section .tbl02 table thead tr th {
background: #d3ebc9;
text-align: center;
font-size: 2.2rem;
font-weight: 700;
padding: .4em 0;
}
main .about section .tbl02 table thead tr th:first-of-type {
width: 230px;
}
main .about section .tbl02 table thead tr th:last-of-type {
width: calc(100% - 230px);
}
main .about section .tbl02 table thead tr th:not(:last-of-type) {
border-right: dotted 1px #808080;
}
main .about section .tbl02 table tbody tr th ,
main .about section .tbl02 table tbody tr td {
padding: 30px 10px;
background: #FFF;
vertical-align: middle;
text-align: center;
}
main .about section .tbl02 table tbody tr th {
border-right: dotted 1px #808080;
}
main .about section .tbl02 table tbody tr:not(:last-of-type) th {
border-bottom: dotted 1px #808080;
}
main .about section .tbl02 table tbody tr td:not(:last-of-type) {
border-right: dotted 1px #808080;
}
main .about section .tbl02 table tbody tr:not(:last-of-type) td {
border-bottom: dotted 1px #808080;
}
main .about section .tbl02 table tbody tr td dl {
display: inline-flex;
align-items: center;
}
main .about section .tbl02 table tbody tr td dl dt {
width: 76px;
margin-right: 70px;
}
main .about section .tbl02 table tbody tr td dl dd {
font-size: 2.0rem;
}
main .about section .tbl02 + .comment {
margin-bottom: 2em;
}
main .about section .tbl02 + .comment + .btn {
display: flex;
justify-content: center;
}
main .about section .tbl02 + .comment + .btn a {
position: relative;
display: flex;
text-decoration: none;
background: #FFF;
border: solid 1px #69ba46;
font-size: 2.0rem;
font-weight: 700;
padding: .4em 4.5em;
color: #69ba46;
border-radius: 1.5em;
}
main .about section .tbl02 + .comment + .btn a::before {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 1em;
width: 1.25em;
height: 1.25em;
background: url(//www.kahokusmile.com/img/common/arrow_green.svg) no-repeat center center;
background-size: cover;
content: '';
}
main .about section .tbl02 + .comment + .btn a:hover {
background: #69ba46;
border: solid 1px #69ba46;
color: #FFF;
}
main .about section .tbl02 + .comment + .btn a:hover::before {
background: url(//www.kahokusmile.com/img/common/arrow_white_green.svg) no-repeat center center;
background-size: cover;
content: '';
}
main .about section .caution {
position: relative;
max-width: 740px;
margin: 0 auto;
padding: 80px 100px;
background: #FFF;
border-radius: 10px;
}
main .about section .caution h6 {
position: absolute;
top: -1em;
left: 0;
right: 0;
width: 480px;
margin: 0 auto;
background: #69ba46;
color: #FFF;
font-size: 2.0rem;
font-weight: 700;
padding: .4em .8em;
text-align: center;
border-radius: 1.5em;
}
main .about section .caution .box_in {
counter-reset: number;
}
main .about section .caution .box_in section {
position: relative;
}
main .about section .caution .box_in section::before {
position: absolute;
top: -.1em;
left: -1.5em;
font-size: 3.0rem;
color: #69ba46;
counter-increment: number;
content: counter(number)'.';
}
main .about section .caution .box_in section:not(:last-of-type) {
position: relative;
margin-bottom: 70px;
}
main .about section .caution .box_in section:not(:last-of-type)::after {
position: absolute;
bottom: -45px;
left: 50%;
transform: translateX(-50%) rotate(90deg);
width: 25px;
height: 25px;
background: url(//www.kahokusmile.com/img/common/arrow_green.svg) no-repeat center center;
background-size: cover;
content: '';
}
main .about section .caution .box_in section p {
border: dotted 1px #69ba46;
padding: .5em .8em;
text-align: center;
border-radius: 1.5em;
letter-spacing: 0;
}
main .about section .caryostat .comment {
margin-bottom: 2em;
}
main .about section .caryostat .img {
max-width: 740px;
margin: 0 auto;
padding: 50px 80px;
background: #FFF;
border-radius: 10px;
margin-bottom: 20px;
}
main .about section .caryostat .btn {
display: flex;
justify-content: center;
}
main .about section .caryostat .btn a {
position: relative;
display: flex;
text-decoration: none;
background: #FFF;
border: solid 1px #69ba46;
font-size: 2.0rem;
font-weight: 700;
padding: .4em 4.5em;
color: #69ba46;
border-radius: 1.5em;
}
main .about section .caryostat .btn a::before {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 1em;
width: 1.25em;
height: 1.25em;
background: url(//www.kahokusmile.com/img/common/arrow_green.svg) no-repeat center center;
background-size: cover;
content: '';
}
main .about section .caryostat .btn a:hover {
background: #69ba46;
border: solid 1px #69ba46;
color: #FFF;
}
main .about section .caryostat .btn a:hover::before {
background: url(//www.kahokusmile.com/img/common/arrow_white_green.svg) no-repeat center center;
background-size: cover;
content: '';
}
@media screen and (max-width: 767px) {
main .bg_green .bg_green_in {
padding-top: 10vw;
padding-bottom: 20vw;
background: url(//www.kahokusmile.com/img/common/dot_line.svg) repeat-x center bottom;
}
main .comment01 {
margin-bottom: 2.5em;
}
main .comment01 p:not(:last-of-type) {
margin-bottom: 1.2em;
}
main .anc_btn {
border: dashed 1px #69ba46;
margin-bottom: 100px;
padding: 20px;
border-radius: 10px;
}
main .anc_btn ul {
display: flex;
}
main .anc_btn ul li {
width: 32%;
}
main .anc_btn ul li:not(:last-child) {
margin-right: 2%;
}
main .anc_btn ul li a {
display: block;
font-size: 2.0rem;
font-weight: 700;
color: #69ba46;
background: #FFF;
text-align: center;
padding: .6em .8em;
border-radius: 10px;
}
main .anc_btn ul li a:hover {
background: #cae7be;
}
main .about > section:not(:last-of-type) {
margin-bottom: 15vw;
}
main .about > section > .comment:not(:last-child) {
margin-bottom: 10vw;
}
main .about > section > .comment p:not(:last-of-type) {
margin-bottom: 1.2em;
}
main .about > section > .box section:not(:last-of-type) {
margin-bottom: 10vw;
}
main .about > section > .comment:not(:last-child) ,
main .about > section > .box section .comment:not(:last-child) {
margin-bottom: 10vw;
}
main .about > section > .comment p:not(:last-of-type) ,
main .about > section > .box section .comment p:not(:last-of-type) {
margin-bottom: 1.2em;
}
main .about > section > .comment p.img {
background: #FFF;
padding: 10px;
border-radius: 10px;
}
main .about section .about-img .box {
display: flex;
align-items: flex-start;
flex-direction: column;
}
main .about section .about-img .box .img {
width: 100%;
border-radius: 10px;
overflow: hidden;
margin-left: 0;
margin-bottom: 5vw;
order: 1;
}
main .about section .about-img .box .box_l {
width: 100%;
margin-right: 0;
order: 2;
}
main .about section .about-img .box .box_l p:not(:last-of-type) {
margin-bottom: 1.2em;
}
main .about section .size .box {
display: flex;
align-items: flex-start;
flex-direction: column;
padding-top: 1.5em;
}
main .about section .size .box .img {
width: 100%;
border-radius: 10px;
overflow: hidden;
margin-left: 0;
margin-bottom: 5vw;
order: 1;
}
main .about section .size .box .box_l {
width: 100%;
margin-right: 0;
order: 2;
}
main .about section .size .box .box_l p:not(:last-of-type) {
margin-bottom: 1.2em;
}
main .about section .check01 .comment {
margin-bottom: 2em;
}
main .about section .check01 .img {
max-width: 100%;
padding: 5vw 4vw;
border-radius: 10px;
}
main .about section .power {
max-width: 100%;
padding: 5vw 4vw;
border-radius: 10px;
}
main .about section .power p {
margin-bottom: 5vw;
}
main .about section .power dl {
display: flex;
align-items: center;
flex-direction: column;
}
main .about section .power dl:not(:last-of-type) {
padding-bottom: 5vw;
margin-bottom: 5vw;
border-bottom: dashed 1px #595757;
}
main .about section .power dl dt {
width: 100%;
background: #69ba46;
padding: .3em .4em;
text-align: center;
color: #FFF;
font-size: 2.0rem;
font-weight: 700;
margin-right: 0;
margin-bottom: 5vw;
border-radius: 1.5em;
}
main .about section .power dl dt span {
display: inline-block;
}
main .about section .power dl dt span::first-letter {
letter-spacing: 1em;
}
main .about section .power dl dd {
width: 100%;
}
main .about section .power_check {
display: flex;
align-items: flex-start;
flex-direction: column;
margin-bottom: 0;
}
main .about section .power_check .comment {
order: 2;
margin-right: 0;
margin-bottom: 0;
}
main .about section .power_check .comment + p {
position: relative;
top: inherit;
margin-bottom: 5vw;
max-width: 100%;
border-radius: 10px;
padding: 5vw 4vw;
display: flex;
align-items: center;
justify-content: center;
order: 1;
}
main .about section .power_check .comment + p span {
display: block;
width: 100%;
}
main .about section .tbl01 {
position: relative;
overflow-x: auto;
padding: 2.5em 0 .5em;
}
main .about section .tbl01::before {
position: absolute;
top: .2em;
left: 0;
content: '左右にスクロールできます';
}
main .about section .tbl01 table {
width: 900px;
overflow: hidden;
border-radius: 10px;
}
main .about section .tbl01 table thead tr th {
font-size: 2.0rem;
font-weight: 700;
padding: .4em 0;
width: 20%;
}
main .about section .tbl01 table thead tr th:first-of-type {
width: 20%;
}
main .about section .tbl01 table thead tr th:last-of-type {
width: calc(100% - (20% + 20%));
}
main .about section .tbl01 table thead tr th:not(:last-of-type) {
border-right: dotted 1px #808080;
}
main .about section .tbl01 table tbody tr th ,
main .about section .tbl01 table tbody tr td {
padding: 3vw 2vw;
}
main .about section .tbl01 table tbody tr td:first-of-type span {
width: 20vw;
height: 20vw;
font-size: 1.8rem;
}
main .about section .tbl02 {
position: relative;
overflow-x: auto;
padding: 2.5em 0 .5em;
max-width: 100%;
margin-bottom: 5vw;
}
main .about section .tbl02::before {
position: absolute;
top: .2em;
left: 0;
content: '左右にスクロールできます';
}
main .about section .tbl02 table {
width: 500px;
overflow: hidden;
border-radius: 10px;
}
main .about section .tbl02 table thead tr th {
font-size: 1.8rem;
padding: .4em 0;
}
main .about section .tbl02 table thead tr th:first-of-type {
width: 30%;
}
main .about section .tbl02 table thead tr th:last-of-type {
width: calc(100% - 30%);
}
main .about section .tbl02 table thead tr th:not(:last-of-type) {
border-right: dotted 1px #808080;
}
main .about section .tbl02 table tbody tr th ,
main .about section .tbl02 table tbody tr td {
padding: 3vw 2vw;
}
main .about section .tbl02 table tbody tr td dl {
display: inline-flex;
align-items: center;
}
main .about section .tbl02 table tbody tr td dl dt {
width: 12vw;
margin-right: 5vw;
}
main .about section .tbl02 table tbody tr td dl dd {
font-size: 2.0rem;
}
main .about section .tbl02 + .comment {
margin-bottom: 2em;
}
main .about section .tbl02 + .comment + .btn {
display: flex;
justify-content: center;
}
main .about section .tbl02 + .comment + .btn a {
font-size: 2.0rem;
padding: .4em 1.5em;
padding-left: 2.5em;
border-radius: 10px;
}
main .about section .caution {
max-width: 100%;
padding: 5vw 4vw;
padding-top: 15vw;
border-radius: 10px;
}
main .about section .caution h6 {
position: absolute;
top: -1em;
left: 0;
right: 0;
width: 90%;
margin: 0 auto;
font-size: 2.0rem;
padding: .4em .8em;
border-radius: 1.5em;
}
main .about section .caution .box_in {
counter-reset: number;
}
main .about section .caution .box_in section {
position: relative;
padding-left: 1.3em;
font-size: 2.0rem;
}
main .about section .caution .box_in section::before {
position: absolute;
top: -.1em;
left: 0;
font-size: 2.0rem;
color: #69ba46;
counter-increment: number;
content: counter(number)'.';
}
main .about section .caution .box_in section:not(:last-of-type) {
position: relative;
margin-bottom: 16vw;
}
main .about section .caution .box_in section:not(:last-of-type)::after {
position: absolute;
bottom: -12vw;
left: 50%;
transform: translateX(-50%) rotate(90deg);
width: 8vw;
height: 8vw;
background: url(//www.kahokusmile.com/img/common/arrow_green.svg) no-repeat center center;
background-size: cover;
content: '';
}
main .about section .caution .box_in section p {
border: dotted 1px #69ba46;
padding: .5em .8em;
text-align: left;
border-radius: 10px;
letter-spacing: inherit;
font-size: 1.6rem;
}
main .about section .caryostat .comment {
margin-bottom: 2em;
}
main .about section .caryostat .img {
max-width: 100%;
margin: 0 auto;
padding: 5vw 4vw;
background: #FFF;
border-radius: 10px;
margin-bottom: 5vw;
}
main .about section .caryostat .btn {
display: flex;
justify-content: center;
}
main .about section .caryostat .btn a {
font-size: 2.0rem;
padding: .4em 1.5em;
padding-left: 2.5em;
border-radius: 10px;
}
}