@charset "UTF-8";
 .page_title_white {
background: url(//www.kahokusmile.com/img/about/page_title.jpg) no-repeat center center;
}
main .bg_orange::after {
height: calc(100% - (205px + 430px));
}
main .greeting {
padding-top: 40px;
margin-bottom: 100px;
}
main .greeting h3 {
font-size: 3.8rem;
font-weight: 700;
text-align: center;
margin-bottom: 1.5em;
}
main .greeting h4 {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 3.0rem;
margin-bottom: 1.6em;
}
main .greeting h4 span {
display: block;
font-weight: 700;
border-bottom: solid 2px #ee7800;
}
main .greeting .box {
display: flex;
margin-bottom: 60px;
}
main .greeting .box .comment {
width: 460px;
margin-right: 20px;
}
main .greeting .box .box_r {
width: 430px;
margin-left: auto;
display: flex;
justify-content: flex-end;
align-items: flex-end;
flex-direction: column;
}
main .greeting .box .box_r .img {
margin-bottom: 30px;
}
main .greeting .box .box_r .name {
border-bottom: solid 2px #ee7800;
}
main .greeting .box .box_r .name em {
font-size: 2.1rem;
color: #ee7800;
margin-right: 1em;
}
main .greeting .box .box_r .name span {
font-size: 3.1rem;
font-weight: 700;
color: #595757;
}
main .profile {
width: 740px;
margin: 0 auto;
margin-bottom: 100px;
background: #FFF;
border-radius: 10px;
padding: 50px 40px;
}
main .profile table {
width: 100%;
}
main .profile table th ,
main .profile table td {
border-bottom: dotted 1px #808080;
padding: 10px 0;
}
main .profile table tr:first-of-type th ,
main .profile table tr:first-of-type td {
padding-top: 0 !important;
}
main .profile table th {
width: 240px;
}
main .profile table th span {
position: relative;
display: block;
font-size: 1.8rem;
font-weight: 700;
color: #ee7800;
padding-left: 1.3em;
}
main .profile table th span::before {
position: absolute;
top: .3em;
left: 0;
width: 1.1em;
height: 1.1em;
background: url(//www.kahokusmile.com/img/common/arrow_orange.svg) no-repeat center center;
background-size: cover;
content: '';
}
main .profile table td {
width: calc(100% - 240px);
font-size: 1.5rem;
padding-top: .8em;
}
main .profile table td ul li {
position: relative;
padding-left: 1.2em;
}
main .profile table td ul li::before {
position: absolute;
top: 0;
left: 0;
content: '◯';
}
main .staff .img {
overflow: hidden;
border-radius: 10px;
margin-bottom: 40px;
}
main .staff .comment {
border: solid 9px #fde7cf;
border-radius: 4em;
text-align: center;
font-size: 1.7rem;
font-weight: 700;
padding: 1.5em .5em;
}
main .guidance {
margin-bottom: 80px;
}
main .guidance h3 {
font-size: 3.8rem;
font-weight: 700;
text-align: center;
margin-bottom: 1.5em;
}
main .guidance .box {
display: flex;
}
main .guidance .box .img {
order: 1;
width: 354px;
margin-right: 20px;
}
main .guidance .box .box_r {
order: 2;
background: #f2f2f2;
width: 500px;
margin-left: auto;
padding: 25px 50px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 10px;
}
main .guidance .box .box_r table {
width: 100%;
}
main .guidance .box .box_r table th ,
main .guidance .box .box_r table td {
border-bottom: dotted 1px #808080;
padding: 10px 5px;
}
main .guidance table tr:first-of-type th ,
main .guidance table tr:first-of-type td {
padding-top: 0 !important;
}
main .guidance .box .box_r table th {
width: 150px;
}
main .guidance .box .box_r table th span {
position: relative;
display: block;
font-size: 1.8rem;
font-weight: 700;
color: #ee7800;
padding-left: 1.6em;
}
main .guidance .box .box_r table th span::before {
position: absolute;
top: .3em;
left: 5px;
width: 1.1em;
height: 1.1em;
background: url(//www.kahokusmile.com/img/common/arrow_orange.svg) no-repeat center center;
background-size: cover;
content: '';
}
main .guidance .box .box_r table td {
width: calc(100% - 150px);
font-size: 1.5rem;
padding-top: .8em;
}
main .guidance .box .box_r table td dl {
display: flex;
}
main .guidance .box .box_r table td dl dt {
margin-right: .5em;
white-space: nowrap;
}
main .photo {
padding-top: 80px;
padding-bottom: 80px;
}
main .photo h3 {
font-size: 3.8rem;
font-weight: 700;
text-align: center;
margin-bottom: 1.5em;
}
main .photo .box {
display: flex;
flex-wrap: wrap;
margin-bottom: -30px;
}
main .photo .box section {
width: 32%;
margin-right: 2%;
margin-bottom: 30px;
}
main .photo .box section:nth-of-type(3n) {
margin-right: 0;
}
main .photo .box section .img {
border: solid 4px #FFF;
border-radius: 10px;
overflow: hidden;
margin-bottom: 10px;
}
main .photo .box section h4 {
position: relative;
font-size: 2.5rem;
font-weight: 700;
color: #69ba46;
padding-left: 1.3em;
letter-spacing: 0;
}
main .photo .box section h4::before {
position: absolute;
top: .35em;
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 .photo .box section .comment {
font-size: 1.4rem;
padding-top: .3em;
}
main .access iframe {
width: 100%;
height: 450px;
}
@media screen and (max-width: 940px) {
main .photo .box section {
width: 48%;
margin-right: 4%;
margin-bottom: 30px;
}
main .photo .box section:nth-of-type(3n) {
margin-right: 4%;
}
main .photo .box section:nth-of-type(2n) {
margin-right: 0%;
}
}
@media screen and (max-width: 767px) {
main .bg_orange::after {
height: calc(100% - 30%);
}
main .greeting {
padding-top: 10vw;
margin-bottom: 10vw;
}
main .greeting h3 {
font-size: 2.0rem;
margin-bottom: 1.5em;
}
main .greeting h4 {
font-size: 2.0rem;
margin-bottom: 1.6em;
}
main .greeting .box {
display: flex;
flex-direction: column;
margin-bottom: 10vw;
}
main .greeting .box .comment {
width: 100%;
margin-right: 0;
margin-bottom: 5vw;
}
main .greeting .box .box_r {
width: 100%;
}
main .greeting .box .box_r .img {
margin-bottom: 5vw;
}
main .greeting .box .box_r .name em {
font-size: 1.8rem;
}
main .greeting .box .box_r .name span {
font-size: 2.0rem;
}
main .profile {
width: 100%;
margin-bottom: 10vw;
border-radius: 5vw;
padding: 5vw 4vw;
}
main .profile table th ,
main .profile table td {
display: block;
border-bottom: dotted 1px #808080;
padding: 3vw 0;
}
main .profile table tr:first-of-type th ,
main .profile table tr:first-of-type td {
padding-top: 0 !important;
}
main .profile table tr:first-of-type td {
padding-top: 3vw !important;
}
main .profile table th {
width: 100%;
border-bottom: none;
padding-bottom: 0;
}
main .profile table th span {
font-size: 1.8rem;
padding-left: 1.3em;
}
main .profile table th span::before {
position: absolute;
top: .3em;
left: 0;
width: 1.1em;
height: 1.1em;
background: url(//www.kahokusmile.com/img/common/arrow_orange.svg) no-repeat center center;
background-size: cover;
content: '';
}
main .profile table td {
width: 100%;
padding-top: 3vw;
}
main .staff .img {
border-radius: 5vw;
margin-bottom: 10vw;
}
main .staff .comment {
border-radius: 5vw;
border: solid 4px #fde7cf;
text-align: left;
font-size: 1.6rem;
padding: 1.5em 1em;
}
main .guidance {
margin-bottom: 10vw;
}
main .guidance h3 {
font-size: 2.0rem;
}
main .guidance .box {
display: flex;
flex-direction: column;
}
main .guidance .box .img {
order: 1;
width: 100%;
margin-right: 0;
margin-bottom: 5vw;
}
main .guidance .box .box_r {
order: 2;
width: 100%;
padding: 5vw 4vw;
display: flex;
justify-content: center;
align-items: center;
border-radius: 5vw;
}
main .guidance .box .box_r table {
width: 100%;
}
main .guidance .box .box_r table th ,
main .guidance .box .box_r table td {
display: block;
border-bottom: dotted 1px #808080;
padding: 3vw 2vw;
}
main .guidance table tr:first-of-type th ,
main .guidance table tr:first-of-type td {
padding-top: 0 !important;
}
main .guidance table tr:first-of-type td {
padding-top: 3vw !important;
}
main .guidance .box .box_r table th {
width: 100%;
border-bottom: none;
padding-bottom: 0;
}
main .guidance .box .box_r table th span {
font-size: 1.8rem;
font-weight: 700;
color: #ee7800;
padding-left: 1.6em;
}
main .guidance .box .box_r table th span::before {
position: absolute;
top: .3em;
left: 0;
width: 1.1em;
height: 1.1em;
background: url(//www.kahokusmile.com/img/common/arrow_orange.svg) no-repeat center center;
background-size: cover;
content: '';
}
main .guidance .box .box_r table td {
width: 100%;
padding-top: 3vw;
}
main .photo {
padding-top: 10vw;
padding-bottom: 10vw;
}
main .photo h3 {
font-size: 2.0rem;
margin-bottom: 1.5em;
}
main .photo .box {
display: flex;
flex-wrap: wrap;
margin-bottom: -15vw;
}
main .photo .box section {
width: 100%;
margin-right: 0 !important;
margin-bottom: 15vw;
}
main .photo .box section .img {
border-radius: 5vw;
margin-bottom: 2vw;
}
main .photo .box section h4 {
font-size: 2.0rem;
}
main .photo .box section .comment {
font-size: 1.4rem;
padding-top: .3em;
}
main .access iframe {
width: 100%;
height: 60vh;
}
}