@charset "UTF-8";
 .page_title {
background: url(//www.kahokusmile.com/img/free-shuttle/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 .catch {
margin-bottom: 100px;
}
main .catch h3 {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-size: 4.0rem;
font-weight: 700;
}
main .catch h3 span {
display: inline-flex;
border: solid 2px #69ba46;
font-size: 2.5rem;
font-weight: 700;
line-height: 1.1;
color: #69ba46;
padding: .2em .6em;
margin: 0 .6em;
border-radius: 1.5em;
}
main .catch h4 {
font-size: 2.2rem;
font-weight: 700;
text-align: center;
color: #69ba46;
}
main .about {
margin-bottom: 100px;
}
main .about .box {
display: flex;
}
main .about .box .box_l {
width: 500px;
margin-right: 20px;
}
main .about .box .box_l h4 {
background: rgb(105,186,70);
background: -moz-linear-gradient(left,  rgba(105,186,70,1) 0%, rgba(105,157,70,1) 100%);
background: -webkit-linear-gradient(left,  rgba(105,186,70,1) 0%,rgba(105,157,70,1) 100%);
background: linear-gradient(to right,  rgba(105,186,70,1) 0%,rgba(105,157,70,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#69ba46', endColorstr='#699d46',GradientType=1 );
font-size: 2.0rem;
font-weight: 700;
color: #FFF;
padding: .4em 1em;
border-radius: 1.5em;
margin-bottom: 1.5em;
}
main .about .box .box_l + p {
max-width: 425px;
margin-left: auto;
background: rgb(255,255,255);
background: -moz-linear-gradient(left,  rgba(255,255,255,1) 0%, rgba(192,226,177,1) 100%);
background: -webkit-linear-gradient(left,  rgba(255,255,255,1) 0%,rgba(192,226,177,1) 100%);
background: linear-gradient(to right,  rgba(255,255,255,1) 0%,rgba(192,226,177,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#c0e2b1',GradientType=1 );
padding: 5px;
border-radius: 10px;
}
main .about .box .box_l + p span {
display: block;
border-radius: 10px;
overflow: hidden;
}
main .human {
position: relative;
background: #e8f5e3;
padding-bottom: 150px;
}
main .human::before {
position: absolute;
top: -50px;
left: 0;
right: 0;
z-index: 1;
margin: 0 auto;
max-width: 550px;
height: 50px;
border-radius: 10px 10px 0 0;
background: #e8f5e3;
content: '';
}
main .human .box {
margin: 0 auto;
}
main .human .box .box_in {
position: relative;
z-index: 1;
background: rgb(255,255,255);
background: -moz-linear-gradient(left,  rgba(255,255,255,1) 0%, rgba(192,226,177,1) 100%);
background: -webkit-linear-gradient(left,  rgba(255,255,255,1) 0%,rgba(192,226,177,1) 100%);
background: linear-gradient(to right,  rgba(255,255,255,1) 0%,rgba(192,226,177,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#c0e2b1',GradientType=1 );
border-radius: 10px;
padding: 70px 50px;
margin-bottom: 40px;
display: flex;
justify-content: center;
align-items: center;
}
main .human .box .box_in::before {
position: absolute;
top: 5px;
left: 5px;
z-index: -1;
width: calc(100% - (5px * 2));
height: calc(100% - (5px * 2));
background: #FFF;
border-radius: 10px;
content: '';
}
main .human .box .box_in ul li {
position: relative;
padding-left: 1.2em;
font-size: 1.7rem;
}
main .human .box .box_in ul li:not(:last-of-type) {
margin-bottom: .5em;
}
main .human .box .box_in ul li::before {
position: absolute;
top: .4em;
left: 0;
width: 1em;
height: 1em;
border-radius: 50%;
background: #69ba46;
content: '';
}
main .how {
position: relative;
background: #FFF;
padding-bottom: 150px;
}
main .how::before {
position: absolute;
top: -50px;
left: 0;
right: 0;
z-index: 1;
margin: 0 auto;
max-width: 550px;
height: 50px;
border-radius: 10px 10px 0 0;
background: #FFF;
content: '';
}
main .how .comment {
margin-bottom: 3em;
}
main .how .tel {
margin-bottom: 60px;
}
main .how .tel a {
display: flex;
align-items: center;
justify-content: center;
font-size: 4.0rem;
line-height: 1.1;
padding: .5em;
border-radius: 2em;
color: #FFF;
background: rgb(238,120,0);
background: -moz-linear-gradient(left,  rgba(238,120,0,1) 0%, rgba(225,96,0,1) 100%);
background: -webkit-linear-gradient(left,  rgba(238,120,0,1) 0%,rgba(225,96,0,1) 100%);
background: linear-gradient(to right,  rgba(238,120,0,1) 0%,rgba(225,96,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ee7800', endColorstr='#e16000',GradientType=1 );
text-decoration: none;
pointer-events: none;
transition: .5s;
}
main .how .tel a:hover {
background: rgb(225,96,0);
background: -moz-linear-gradient(left,  rgba(225,96,0,1) 0%, rgba(238,120,0,1) 100%);
background: -webkit-linear-gradient(left,  rgba(225,96,0,1) 0%,rgba(238,120,0,1) 100%);
background: linear-gradient(to right,  rgba(225,96,0,1) 0%,rgba(238,120,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e16000', endColorstr='#ee7800',GradientType=1 );
transition: .5s;
}
main .how .tel a em ,
main .how .tel a span {
position: relative;
display: block;
font-weight: 700;
}
main .how .tel a em {
font-size: 2.4rem;
padding-right: 3em;
}
main .how .tel a em::after {
position: absolute;
top: 0;
right: 1.5em;
width: 1px;
height: 100%;
border-right: dotted 1px #FFF;
content: '';
}
main .how .info {
border: solid 5px #ee7800;
border-radius: 10px;
padding: 35px;
box-shadow: 3px 3px 3px 2px #cccccc;
}
main .how .info .box section {
display: flex;
align-items: flex-start;
}
main .how .info .box section:not(:last-of-type) {
margin-bottom: 20px;
}
main .how .info .box section h4 {
width: 175px;
text-align: center;
color: #FFF;
font-size: 2.2rem;
padding: .2em .6em;
background: rgb(238,120,0);
background: -moz-linear-gradient(left,  rgba(238,120,0,1) 0%, rgba(225,96,0,1) 100%);
background: -webkit-linear-gradient(left,  rgba(238,120,0,1) 0%,rgba(225,96,0,1) 100%);
background: linear-gradient(to right,  rgba(238,120,0,1) 0%,rgba(225,96,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ee7800', endColorstr='#e16000',GradientType=1 );
border-radius: 1.5em;
margin-right: 30px;
}
main .how .info .box section p {
margin-left: auto;
width: calc(100% - (175px + 30px));
font-size: 2.0rem;
}
main .how .info .box section:not(:last-of-type) p {
border-bottom: dashed 1px #595757;
padding-bottom: .5em;
}
main .flow {
position: relative;
background: #fef4e8;
padding-bottom: 150px;
counter-reset: number;
}
main .flow::before {
position: absolute;
top: -50px;
left: 0;
right: 0;
z-index: 1;
margin: 0 auto;
max-width: 550px;
height: 50px;
border-radius: 10px 10px 0 0;
background: #fef4e8;
content: '';
}
main .flow .box section {
position: relative;
background: #FFF;
padding: 30px 50px 30px 120px;
border-radius: 10px;
filter: drop-shadow(0px 0px 5px rgba(0,0,0,0.6));
}
main .flow .box section:not(:last-of-type)::after {
position: absolute;
bottom: -40px;
right: 0;
left: 0;
margin: 0 auto;
width: 0;
height: 0;
border-style: solid;
border-width: 40px 25px 0 25px;
border-color: #FFF transparent transparent transparent;
content: '';
}
main .flow .box section:not(:last-of-type) {
margin-bottom: 70px;
}
main .flow .box section h4 {
position: relative;
font-size: 2.5rem;
font-weight: 700;
color: #ee7800;
}
main .flow .box section h4::before {
position: absolute;
top: -.1em;
left: -70px;
font-size: 2.8rem;
font-weight: 700;
width: 50px;
height: 50px;
display: flex;
color: #FFF;
justify-content: center;
align-items: center;
background: #ee7800;
color: #FFF;
border-radius: 10px;
counter-increment: number;
content: counter(number)'';
}
main .flow .box section p {
padding-top: .6em;
}
main .caution {
padding-top: 80px;
}
main .caution .box {
background: #e8f5e3;
border: solid 3px #69ba46;
border-radius: 10px;
padding: 50px;
}
main .caution .box h3 {
display: flex;
justify-content: center;
margin-bottom: 40px;
}
main .caution .box h3 span {
display: block;
font-size: 3.0rem;
font-weight: 700;
color: #69ba46;
padding: .4em 1.4em;
border-radius: 1.5em;
background: #FFF;
filter: drop-shadow(3px 3px 5px rgba(0,0,0,0.3));
}
main .caution .box ul {
max-width: 810px;
margin: 0 auto;
}
main .caution .box ul li {
position: relative;
padding-left: 1.2em;
}
main .caution .box ul li:not(:last-of-type) {
padding-bottom: .6em;
margin-bottom: .6em;
border-bottom: dashed 1px #595757;
}
main .caution .box ul li::before {
position: absolute;
top: .4em;
left: 0;
width: 1em;
height: 1em;
border-radius: 50%;
background: #69ba46;
content: '';
}
@media screen and (max-width: 1000px) {
main .how .tel a {
font-size: 3.0rem;
}
main .how .tel a em {
font-size: 2.0rem;
padding-right: 2em;
}
main .how .tel a em::after {
right: 1em;
}
}
@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 {
z-index: -1;
top: calc(33.898vw * 2);
width: calc(23.99vw * 2);
height: calc(39.374vw * 2);
}
main .catch {
margin-bottom: 15vw;
}
main .catch h3 {
font-size: 2.0rem;
margin-bottom: 3vw;
}
main .catch h3 span {
font-size: 1.6rem;
padding: .2em .6em;
}
main .catch h4 {
font-size: 2.0rem;
font-weight: 700;
text-align: left;
padding: 0 4%;
}
main .about {
margin-bottom: 15vw;
}
main .about .box {
display: flex;
flex-direction: column;
}
main .about .box .box_l {
order: 2;
width: 100%;
margin-right: 0;
}
main .about .box .box_l h4 {
font-size: 2.0rem;
padding: .4em 1em;
border-radius: 10px;
margin-bottom: 1.5em;
}
main .about .box .box_l + p {
order: 1;
max-width: 100%;
margin-left: 0;
margin-bottom: 5vw;
}
main .about .box .box_l + p span {
display: block;
border-radius: 10px;
overflow: hidden;
}
main .human {
width: 100%;
margin: 0 auto;
padding-top: 0;
padding-bottom: 15vw;
}
main .human::before {
top: -8vw;
max-width: 80%;
height: 8vw;
}
main .human .box {
margin: 0 auto;
}
main .human .box .box_in {
border-radius: 10px;
padding: 5vw 4vw;
margin-bottom: 10vw;
display: flex;
justify-content: center;
align-items: center;
}
main .human .box .box_in::before {
position: absolute;
top: 5px;
left: 5px;
z-index: -1;
width: calc(100% - (5px * 2));
height: calc(100% - (5px * 2));
background: #FFF;
border-radius: 10px;
content: '';
}
main .human .box .box_in ul li {
font-size: 1.6rem;
}
main .how {
padding-bottom: 15vw;
}
main .how::before {
top: -8vw;
max-width: 80%;
height: 8vw;
}
main .how .comment {
margin-bottom: 3em;
}
main .how .tel {
margin-bottom: 10vw;
}
main .how .tel a {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
font-size: 2.0rem;
border-radius: 10px;
pointer-events: auto;
}
main .how .tel a em ,
main .how .tel a span {
position: relative;
display: block;
font-weight: 700;
}
main .how .tel a em {
font-size: 2.0rem;
padding-right: 0;
padding-bottom: 1em;
}
main .how .tel a em::after {
position: absolute;
top: inherit;
right: inherit;
bottom: .5em;
left: 0;
width: 100%;
height: 1px;
border-right: none;
border-bottom: dotted 1px #FFF;
content: '';
}
main .how .info {
width: 92%;
margin: 0 auto;
border: solid 2vw #ee7800;
border-radius: 10px;
padding: 5vw 4vw;
box-shadow: 3px 3px 3px 2px #cccccc;
}
main .how .info .box section {
display: flex;
align-items: flex-start;
flex-direction: column;
}
main .how .info .box section:not(:last-of-type) {
margin-bottom: 5vw;
}
main .how .info .box section h4 {
width: 100%;
font-size: 2.0rem;
border-radius: 1.5em;
margin-right: 0;
margin-bottom: 5vw;
}
main .how .info .box section p {
width: 100%;
font-size: 1.6rem;
}
main .how .info .box section:not(:last-of-type) p {
border-bottom: dashed 1px #595757;
padding-bottom: .5em;
}
main .flow {
padding-bottom: 15vw;
counter-reset: number;
}
main .flow::before {
top: -8vw;
max-width: 80%;
height: 8vw;
}
main .flow .box section {
position: relative;
padding: 5vw 4vw 5vw 15vw;
border-radius: 10px;
filter: drop-shadow(0px 0px 5px rgba(0,0,0,0.6));
}
main .flow .box section:not(:last-of-type)::after {
position: absolute;
bottom: -6vw;
right: 0;
left: 0;
margin: 0 auto;
width: 0;
height: 0;
border-style: solid;
border-width: 6vw 5vw 0 5vw;
border-color: #FFF transparent transparent transparent;
content: '';
}
main .flow .box section:not(:last-of-type) {
margin-bottom: 15vw;
}
main .flow .box section h4 {
font-size: 2.0rem;
}
main .flow .box section h4::before {
position: absolute;
top: -.1em;
left: -12vw;
font-size: 2.0rem;
width: 10vw;
height: 10vw;
border-radius: 10px;
}
main .flow .box section p {
padding-top: .6em;
}
main .caution {
padding-top: 10vw;
}
main .caution .box {
border: solid 3px #69ba46;
border-radius: 10px;
padding: 5vw 4vw;
}
main .caution .box h3 {
display: flex;
justify-content: center;
flex-direction: column;
margin-bottom: 5vw;
}
main .caution .box h3 span {
font-size: 2.0rem;
padding: .4em .8em;
border-radius: 10px;
}
main .caution .box ul {
max-width: 100%;
margin: 0 auto;
}
}