@charset "UTF-8";

@font-face {
font-family: 'icomoon';
src: url("../fonts/icomoon/icomoon.eot?srf3rx");
src: url("../fonts/icomoon/icomoon.eot?srf3rx#iefix") format("embedded-opentype"), url("../fonts/icomoon/icomoon.ttf?srf3rx") format("truetype"), url("../fonts/icomoon/icomoon.woff?srf3rx") format("woff"), url("../fonts/icomoon/icomoon.svg?srf3rx#icomoon") format("svg");
font-weight: normal;
font-style: normal;
}
body {
margin: 0px auto!important;
padding: 0;
font-size: 16px;
line-height: 1.6em;
font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
font-weight: 500;
color: #636363;
-webkit-text-size-adjust: 100%;
}
p {
display: block;
margin-block-start: 1.1em;
margin-block-end: 1.1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
line-height: 1.8em;
}
a:hover {
text-decoration: none!important;
}
ul {
display: block;
list-style-type: disc;
margin-block-start: 0em;
margin-block-end: 0em;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding-inline-start: 0px;
}
img {
user-drag: none;
-webkit-user-drag: none;
-moz-user-select: none;
}
.pcView {
display: block !important; 
}
@media (max-width: 896px) {
.pcView {
display: none !important; 
} 
}
.spView {
display: none !important; 
}
@media (max-width: 896px) {
.spView {
display: block !important; 
} 
}

.pcView2 {
display: block !important; 
}
@media (max-width: 480px) {
.pcView2 {
display: none !important;
}
}
.spView2 {
display: none !important; 
}
@media (max-width: 480px) {
.spView2 {
display: block !important;
}
}
#all{
margin:0
}
#main{
margin:0
}
header{
margin:0
}
.menu-btn {
position: fixed;
top: 7px;
right: 7px;
display: flex;
height: 40px;
width: 40px;
justify-content: center;
align-items: center;
z-index: 90;
background-color: #00b9b2;
}
.menu-btn span,
.menu-btn span:before,
.menu-btn span:after {
content: '';
display: block;
height: 3px;
width: 25px;
border-radius: 3px;
background-color: #ffffff;
position: absolute;
}
.menu-btn span:before {
bottom: 8px;
}
.menu-btn span:after {
top: 8px;
}
#menu-btn-check:checked ~ .menu-btn span {
background-color: rgba(255, 255, 255, 0);/*メニューオープン時は真ん中の線を透明にする*/
}
#menu-btn-check:checked ~ .menu-btn span::before {
bottom: 0;
transform: rotate(45deg);
}
#menu-btn-check:checked ~ .menu-btn span::after {
top: 0;
transform: rotate(-45deg);
}
#menu-btn-check {
display: none;
}
.menu-content {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 80;
background-color: #00b9b2;
}
.menu-content ul {
padding: 70px 10px 0;
}
.menu-content ul li {
border-bottom: solid 1px #ffffff;
list-style: none;
}
.menu-content ul li a {
display: block;
width: 100%;
font-size: 15px;
box-sizing: border-box;
color:#ffffff;
text-decoration: none;
padding: 9px 15px 10px 0;
position: relative;
}
.menu-content ul li a::before {
content: "";
width: 7px;
height: 7px;
border-top: solid 2px #ffffff;
border-right: solid 2px #ffffff;
transform: rotate(45deg);
position: absolute;
right: 11px;
top: 16px;
}
.menu-content {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 100%;
z-index: 80;
background-color: #00b9b2;
transition: all 0.5s;
}
#menu-btn-check:checked ~ .menu-content {
left: 0;
}
h1{
color: #fff;
margin-block-start: 0em;
margin-block-end: 0em;
margin:0;
line-height: 1.5em;
}
.headerlogo{
max-width: 1100px;
margin:0 auto;
height: 80px;
}
.headerlogo img{
max-width: 500px;
width: 100%;
margin-top:5px
}
.invisalign01{
background-color: #0ab3ae;
margin: -10px 0 0 0;
}
.invisalign01_in{
max-width: 1100px;
margin:10px auto;
padding:0% 4% 1% 4%;
}
.invisalign01_in p{
color: #fff;
font-size: 130%;
line-height: 1.5em;
}
.invisalign01_in p span{
color: #ffff00
}
.head-border{
color: #fff;
font-size: 170%!important;
margin-block-start: 0.5em;
margin-block-end: 0.1em;
}
.head-border {
position: relative;
display: inline-block;
padding: 0 100px;
}
.head-border:before,
.head-border:after {
content: '';
position: absolute;
top: 50%;
display: inline-block;
width: 80px;
height: 2px;
background-color: #fff;
}
.head-border:before {
left: 0;
}
.head-border:after {
right: 0;
}
.center01{
text-align: center;
font-size: 160%;
}
.invisalign02{
background-color: #fff;
margin: 0;
}
.invisalign02_in{
max-width: 1100px;
margin:0 auto;
padding:1% 4% 2% 4%;
}
.invisalign02_in h2{
color: #000;
font-size: 120%;
line-height: 1.5em;
text-align: center;
}
.invisalign02_in h2 span{
color: #0ab3ae
}
.invisalign03{
background-image: url("../img/bd01.png");
margin: 0;
}
.invisalign03_in{
max-width: 1100px;
margin:0 auto;
padding:1% 4% 2% 4%;
}
.invisalign04{
background-color: #fff;
margin: 0;
}
.invisalign04_in{
max-width: 1100px;
margin:0 auto;
padding:1% 4% 2% 4%;
}
.invisalign05{
background-image: url("../img/bg02.png");
background-repeat: no-repeat;
background-size: cover;
margin: 0;
padding:3% 4% 3% 4%;
}
.invisalign05_in{
max-width: 1100px;
margin:0 auto;
padding: 0%;
background-color: rgb(255,255,255,0.5);
box-shadow: 10px 10px 10px #dddddd
}
.invisalign05_in h2{
color: #0ab2ad;
text-align: center;
font-size: 170%;
line-height: 1.5em;
}
.invisalign05_in h2 span{
border-bottom: #0ab2ad solid 3px;
}
.invisalign05_in h3{
text-align: center;
font-size: 140%;
line-height: 1.5em;
}
.invisalign05_in p{
text-align: center;
}
.invisalign06{
background-color: #f7f2e4;
margin: 0;
}
.invisalign06_in{
max-width: 1100px;
margin:0 auto;
padding:3% 4% 2% 4%;
}
*, *:before, *:after {
box-sizing: border-box;
}
.col_3{
width: 100%;
display: flex;
display: -ms-flexbox; 
flex-wrap: wrap;
-ms-flex-wrap: wrap; 
}
.col_3 > div{
width: 33.33333%;
padding: 10px;
}
.col_3 h2{
color: #0ab4af;
text-align: center;
font-size: 135%;
}
.invisalign07{
background-color: #0a8d88;
margin: 0;
}
.invisalign07_in{
max-width: 1100px;
margin:0 auto;
padding:1% 4% 1% 4%;
}
.diagnose{
background-color: #0aaba6;
margin: 0;
}
.diagnose_in{
max-width: 1100px;
margin:0 auto;
padding:1% 4% 2% 4%;
}
*,
*:before,
*:after {
-webkit-box-sizing: inherit;
box-sizing: inherit;
}
html {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.btn,
a.btn,
button.btn {
font-size: 1.6rem;
font-weight: 700;
line-height: 1.5;
position: relative;
display: inline-block;
padding: 1rem 4rem;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-transition: all 0.3s;
transition: all 0.3s;
text-align: center;
vertical-align: middle;
text-decoration: none;
letter-spacing: 0.1em;
color: #212529;
border-radius: 0.5rem;
}
.btn-wrap {
margin: 3% auto 0% auto;
text-align: center;
}
a.btn-c {
font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
font-size: 130%;
position: relative;
padding: 2% 4% 2% 7%;
color: #000;
border: 2px solid #000;
border-radius: 100vh;
background: #fff100;
-webkit-box-shadow: 0 5px 0 #e6d900;
box-shadow: 0 5px 0 #e6d900;
}
a.btn-c span {
font-size:70%;
line-height: 1.1;
position: absolute;
top: -10px;
left: -20px;
width: 64px;
height: 64px;
padding-top: 15px;
-webkit-transition: all 0.3s;
transition: all 0.3s;
color: #000;
border: 2px solid #000;
border-radius: 50%;
background: #fff;
}
a.btn-c span em {
font-style: normal;
color: #d20010;
}
a.btn-c small {
font-weight: bold;
}
a.btn-c i {
margin-right: 1rem;
}
a.btn-c:hover {
-webkit-transform: translate(0, 3px);
transform: translate(0, 3px);
color: #000;
background: #fff21a;
-webkit-box-shadow: 0 2px 0 #e6d900;
box-shadow: 0 2px 0 #e6d900;
}
a.btn-c:hover span {
-webkit-transform: translate(0, -5px);
transform: translate(0, -5px);
}
.slant-bg {
width: 100%;
padding: 30px 0;
clip-path: polygon(0 calc(0% + 10vw), 100% 0, 100% calc(100% - 10vw), 0 100%);
background-color: #f2f1e7;
}
.invisalign08{
background-color: #ebe2cb;
margin: 0;
}
.invisalign08_in{
max-width: 1100px;
margin:0 auto;
padding: 3% 4% 6% 4%;
}
.invisalign08_in img{
}
*, *:before, *:after {
box-sizing: border-box;
}
.col_2{
width: 100%;
display: flex;
display: -ms-flexbox;
flex-wrap: wrap;
-ms-flex-wrap: wrap;
text-align: left; 
}
.col_2 > div{
width: 50%;
padding: 10px;
}

.youtube01 {
width: 100%;
aspect-ratio: 16 / 9;
}
.youtube01 iframe {
width: 100%;
height: 100%;
}
.bold01{
font-weight: bold;
}
.invisalign09{
background-color: #FFF;
margin: 0;
}
.invisalign09_in{
max-width: 1100px;
margin:0 auto;
padding:3% 4% 2% 4%;
}
.invisalign09_in p{
font-size: 110%;
}
.invisalign09_in p span{
background: linear-gradient(transparent 50%, #ffff7f 50%);
}
.invisalign09_in h2 {
color: #0ab2ad;
text-align: center;
font-size: 170%;
line-height: 1.5em;
}
.invisalign09_in h2 span{
border-bottom: #0ab2ad solid 3px;
}
.bold02{
color: #0ab2ad;
text-align: center;
font-size: 160%!important;
line-height: 1.5em;
font-weight: bold;
margin-block-end:0.1em;
}
.bold03{
color: #0ab2ad;
text-align: center;
font-size: 180%!important;
line-height: 1.5em;
font-weight: bold;
margin-block-start: 0.1em;
}
.bold03 span{
border-bottom: #0ab2ad solid 3px
}
.invisalign10{
background-color: #f7f2e4;
margin: 0;
}
.invisalign10_in{
max-width: 1100px;
margin:0 auto;
padding:3% 4% 2% 4%;
}
.invisalign10_in h2{
color: #a48b37;
text-align: center;
font-size: 180%;
line-height: 1.5em;
}
.invisalign10_in h3{
color: #a48b37;
text-align: center;
font-size: 140%;
}
.invisalign11{
background-color: #fff;
margin: 0;
}
.invisalign11_in{
max-width: 1100px;
margin:0 auto;
padding:0% 4% 0% 4%;

}
.invisalign12{
background-color: #e6fcfb;
margin: 0;
}
.invisalign12_in{
max-width: 1100px;
margin:0 auto;
padding:3% 4% 2% 4%;
}
.invisalign13{
background-color: #fff2ee;
margin: 0;
}
.invisalign13_in{
max-width: 1100px;
margin:0 auto;
padding:3% 4% 2% 4%;
}
.invisalign14{
background-color: #fff8eb;
margin: 0;
}
.invisalign14_in{
max-width: 1100px;
margin:0 auto;
padding:3% 4% 2% 4%;
}
.invisalign15{
background-color: #faf8ff;
margin: 0;
}
.invisalign15_in{
max-width: 1100px;
margin:0 auto;
padding:3% 4% 2% 4%;
}
.invisalign16{
background-color: #fff;
margin: 0;
}
.invisalign16_in{
max-width: 1100px;
margin:0 auto;
padding:3% 4% 2% 4%;
}
.invisalign16_in h2{
color: #0ab2ad;
text-align: center;
font-size: 170%;
line-height: 1.5em;
}
.invisalign16_in h2 span{
background: linear-gradient(transparent 50%, #ffff7f 50%);
}
.voice{
background-image: url("../img/voice01.png");
background-repeat: no-repeat;
background-size: contain;
margin: 0;
padding:0% 0% 0% 0%;
}
.voice_in{
margin:0% auto 0% auto;
padding:2% 4% 2% 4%;
background-color: #0eada5;
}
.voice_in h2{
font-size: 170%;
line-height: 1.5em;
color: #fff;
text-align: center;
margin:0% 0% 0% 0%;
}
.voice_waku{
background-color: #fff;
max-width: 900px;
width: 95%;
border-radius: 15px;
margin:1% auto 1% auto;
padding:0% 4% 0% 4%;
}
.voice_waku p{
font-weight: bold;
font-size: 110%;
}
.voice_waku p span{
border-bottom: 1px #0aa9a4 solid;
}
.qa{
background-color: #faf8ff;
margin: 0;
}
.qa_in{
max-width: 1100px;
margin:0 auto;
padding:3% 4% 2% 4%;
}
.qa_in h2{
color: #0aa9a4;
text-align: center;
font-size: 180%;
line-height: 1.5em;
}




/*アコーディオン全体*/
.accordion-area{
list-style: none;
width: 100%;
max-width: 900px;
margin:0 auto;
}
.accordion-area li{
margin: 10px 0;
}
.accordion-area section {
border: 1px solid #ccc;
}
.title {
position: relative;
cursor: pointer;
font-size:1rem;
font-weight: normal;
padding: 3% 3% 3% 50px;
transition: all .5s ease;
}
.title::before,
.title::after{
position: absolute;
content:'';
width: 15px;
height: 2px;
background-color: #333;
}
.title::before{
top:48%;
left: 15px;
transform: rotate(0deg);
}
.title::after{    
top:48%;
left: 15px;
transform: rotate(90deg);
}
.title.close::before{
transform: rotate(45deg);
}
.title.close::after{
transform: rotate(-45deg);
}
.box {
display: none;
background: #f3f3f3;
margin:0 3% 3% 3%;
padding: 3%;
}
.qa_in .title span{
color: #0a9b96;
font-size: 160%;
font-weight: bold;
}
.qa_in .box span{
color: #cf8063;
font-size: 160%;
font-weight: bold;
}
.doctor{
text-align: center;
}
.conv01{
text-align: center;
}
.conv01 a{
background-color: #0ab3ae;
padding:1% 3%;
text-align: center;
color: #fff;
text-decoration: none;
border-radius: 5px;
box-shadow: 3px 3px 3px #eee;
}
.center02{
text-align: center;
}
.bold04{
background:linear-gradient(transparent 60%, #ffff00 60%);
}
.bold05{
font-weight: bold;
font-size: 110%;
}




/* top 戻るbutton*/
#page_top {
width: 60px;
height: 60px;
position: fixed;
right: 0;
bottom: 0;
background: #0ab3ae;
opacity: 0.6;
border-radius: 50px;
margin-bottom: 70px;
margin-right: 0px; }

#page_top a {
position: relative;
display: block;
width: 60px;
height: 60px;
text-decoration: none;
background-color: #0ab3ae;
border-radius: 50px; }

#page_top a::before {
font-weight: 900;
font-size: 25px;
color: #fff;
position: absolute;
width: 25px;
height: 25px;
top: -25px;
bottom: 0;
right: 0;
left: 0;
margin: auto;
text-align: center; }

#page_top a::after {
content: 'TOP';
font-size: 13px;
color: #fff;
position: absolute;
top: 20px;
bottom: 0;
right: 0;
left: 0;
margin: auto;
text-align: center; 
font-weight: bold;
}

@media (max-width: 896px) {
#page_top {
width: 40px;
height: 40px;
position: fixed;
right: 0;
bottom: 0;
opacity: 0.6;
border-radius: 15px;
margin-bottom: 80px;
margin-right: 10px; }

#page_top a {
position: relative;
display: block;
width: 50px;
height: 50px;
text-decoration: none;
background-color: darkcyan;
border-radius: 10px; }
#page_top a::after {
top: 15px;

}
}






div.cover2 {
display: table;
margin: 0px;
padding: 0px;
width: 100%; 
}
div.cover2 div.box2_1 {
display: table-cell;
width: 85%;
vertical-align: middle;
}
div.cover2 div.box2_2 {
display: table-cell;
width: 15%;
vertical-align: middle;
}
div.cover2-1 {
display: table;
margin: 0px;
padding: 0px;
width: 100%; 
}
div.cover2-1 div.box2-1_1 {
display: table-cell;
width: 15%;
vertical-align: middle;
}
div.cover2-1 div.box2-1_2 {
display: table-cell;
width: 85%;
vertical-align: middle;
}
div.cover2-2 {
display: table;
margin: 0px;
padding: 0px;
width: 100%; 
}
div.cover2-2 div.box2-2_1 {
display: table-cell;
width: 50%;
}
div.cover2-2 div.box2-2_2 {
display: table-cell;
width: 50%;
}
div.cover2-3 {
display: table;
margin: 1% auto 0 auto;
padding: 0px;
width: 100%;
max-width: 500px;
}
div.cover2-3 div.box2-3_1 {
display: table-cell;
width: 50%;
padding: 3%;
}
div.cover2-3 div.box2-3_2 {
display: table-cell;
width: 50%;
padding: 3%;
}
div.cover3 {
display: table;
margin: 0px;
padding: 0px;
width: 100%; 
}
div.cover3 div.box3_1 {
display: table-cell;
width: 33%; 
}
div.cover3 div.box3_2 {
display: table-cell;
width: 33%; 
}
div.cover3 div.box3_3 {
display: table-cell;
width: 33%; 
}

div.cover4 {
display: table;
margin: 0px;
padding: 0px;
width: 100%; 
}
div.cover4 div.box4_1 {
display: table-cell;
width: 25%; 
}
div.cover4 div.box4_2 {
display: table-cell;
width: 25%; 
}
div.cover4 div.box4_3 {
display: table-cell;
width: 25%; 
}
div.cover4 div.box4_4 {
display: table-cell;
width: 25%; 
}












footer {
bottom: 0;
height: 165px;
position: inherit;
width: 100%;
background-color: #0aa9a4;
color: #fff;
text-align: center; 
}
footer a{
color: #fff
} 
footer small {
display: block;
margin-top: 10px;
font-size: 12px; 
}
footer div {
padding-top: 10px; 
}
footer div dl {
width: 350px;
font-size: 18px;
margin: 0 auto; 
}
footer div dl dt {
font-weight: 600;
margin-bottom: 0px; 
}
footer div dl dd {
display: flex;
font-size: 15px;
justify-content: space-around; 
}





@media (max-width: 896px) {
.invisalign05_in h2 {
font-size: 130%;
}	
.invisalign05_in h3{
font-size: 120%;
}
.col_3 > div{
width: 50%;
}
a.btn-c span {
font-size: 70%;
line-height: 1.1;
top: -28px;
left: -43px;
width: 64px;
height: 64px;
padding-top: 15px;
}	
footer div dl dt {
font-size: 15px;
margin-bottom: 5px; 
}
footer {
height: 185px; 
} 
	
	
	
}



@media screen and (max-width: 640px) {
.col_2 > div{
width: 100%;
}
p {
display: block;
margin-block-start: 0.5em;
margin-block-end: 0.5em;
margin-inline-start: 0px;
margin-inline-end: 0px;
line-height: 1.6em;
font-size: 90%;
}
div.cover2 div.box2_1 {;
width: 70%;
}
div.cover2 div.box2_2 {
width: 30%;
}
div.cover2-1 div.box2-1_1 {
width: 30%;
}
div.cover2-1 div.box2-1_2 {
width: 70%;
}
.voice_waku p{
font-weight: bold;
font-size: 90%;
}
.voice_waku{
width: 100%;
margin:2% auto 2% auto;
padding:2% 5% 2% 5%;
}
	
	
}



@media (max-width: 480px) {
.invisalign05{
background-image: none;
}
/*
.col_3 > div{
width: 100%;
}
*/
.headerlogo{
height: 55px;
}
.headerlogo img{
width: 90%;
}
.col_3 h2 {
font-size: 115%;
margin-block-start: 0em;
margin-block-end: 0
}
.col_3 p {
margin-block-start: 0em;
margin-block-end: 0em;	
}	
.invisalign10_in h2 {
font-size: 120%;
}
.invisalign02_in {
padding: 1% 2% 2% 2%;
}
.diagnose_in {
padding: 1% 4% 6% 4%;
}	
.slant-bg {
padding: 10px 0;
}
.invisalign08_in {
padding: 3% 4% 3% 4%;
}
.invisalign09_in h2 {
font-size: 140%;
}
.bold02 {
font-size: 140%!important;
}	
.bold03 {
font-size: 170%!important;
}
.invisalign16_in h2 {
font-size: 100%;
}
.youtube p{
font-weight: bold;
font-size: 120%;
margin-block-start: 0em;
margin-block-end: 0em;
line-height: 1.3em;
}
.invisalign10_in h3{
margin-block-start: 0em;
margin-block-end: 0em;
}
.invisalign10_in p{
font-size: 90%;
    line-height: 1.3em;
	
		
}
	
}