@charset "utf-8";
/* CSS Document 320-640 */


main{background:#fff}
 
.text001{text-align: center; font-size:clamp(1rem, 0.5rem + 2.5vw, 1.5rem) }/*16-24*/
/*--------------------------------------------------------------------

.pageheadBox

--------------------------------------------------------------------*/
.pageheadBox h2{margin-bottom: 30px}

.pageheadBox .symptomsMenu{ margin: 30px 8% 0}
.pageheadBox .symptomsMenu li{position: relative; background:#fff1da; padding:10px 5%; border-radius: 10px; margin-bottom: 20px ; text-align: left}
.pageheadBox .symptomsMenu li img{width:30px; position: absolute; left: 50%; margin-left: -15px; top: -15px}


.disboxCont{text-align: center; padding: 30px 0 0}
.pageheadBox .plas{margin-bottom: 10px !important}

.firstbox {margin: 0 5%}
.firstbox .fuki{position: relative; background: #fff; border-radius: 10px; border: 2px solid #ffb423; padding:5px 0 10px; text-align: left; margin-bottom: 20px}
.firstbox .fuki h2{color: #ffad0f ; line-height: 1.4; margin: 0 5%; font-size:clamp(1.25rem, 1.125rem + 0.63vw, 1.375rem)}/*20-22*/
.firstbox .text00{margin-bottom: 20px}
.firstbox dt{text-align: left}
.firstbox dd{margin: 20px 0 40px}
.firstbox li .text01a{text-align: left; margin-bottom: 40px}
.firstbox .text02a{text-align: left; margin-bottom: 70px}

.firstbox dd{position: relative}
.firstbox dd .p1{width:75px; position: absolute; left: -2%; bottom: 70px}
.firstbox dd .p2{width:44px; position: absolute;right: 5px; top: 60px}

.disease{margin: 0 5%; padding-bottom: 60px}
.disease .fuki{position: relative; background: #fff; border-radius: 10px; border: 2px solid #ffb423; padding-bottom: 5%; text-align: left; margin-bottom: 20px}
.disease .fuki:after ,.firstbox .fuki:after{content: "";
  position: absolute;
  top: 100%;
  left: 10%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid #ffb423;}
.disease .sub{color: #ffad0f; margin: 10px 5% 0 ; line-height: 1.4}
.disease .fuki h2{color: #ffad0f ; line-height: 1.4; margin: 0 5% 10px; font-size:clamp(1.25rem, 1.125rem + 0.63vw, 1.375rem)}/*20-22*/
.disease .checklist{padding: 10px 0 0 ; border-top: 1px dashed #ffb423; margin: 0px 5% 0 }
.disease .checklist li{margin-right: 10px; background: url("../img/rabbit/check.png") no-repeat left 9px; background-size: 12px 12px; padding-left: 20px; display: inline-block; font-size: 15px}
.pgateBox .flex2{position: relative; z-index: 1}
.disease .flex2 dt{margin-bottom: 20px}
.disease .flex2 dd .text01{text-align: left;}

.ajison .fuki h2{margin: 10px 5%}
.ajison .fuki{padding-bottom: 0}
.plas2{text-align: left; margin: 0 5% 20px} 

/*　　　装飾　　　*/
.pgateBox .plas{line-height: 1.4 ; margin-bottom: 30px}
.pgateBox .allbox{text-align: left}
.pgateBox .wakuten{border: dashed 1px #22201e; padding: 3% 5%; text-align: left; border-radius: 10px}
.pgateBox .wakuorange{position: relative ; background:#fff1da; text-align: left; border-radius: 10px; padding: 5%; margin: 0 3%}
.pgateBox .wakuorange:before{    position: absolute;
    border: 2px solid #fff; border-radius: 10px;
    content: "";
    top: 4px;
    bottom: 4px;
    left: 4px;
    right: 4px;}


.pgateBox .wakuorange dt a{font-size: 18px; text-align: center; display: block ; margin-top: 10px; margin-bottom: 20px}


.pgateBox .futisen{line-height: 1.4; background: #fff; border:2px solid #ffb423; padding: 5px 10px; color: #ffb423; border-radius: 5px; margin-bottom: 10px; font-size: clamp(1.125rem, 1.08rem + 0.23vw, 1.25rem)}/*18-20*/
.pgateBox .linefff{background: #fff; font-weight: 700; display: inline-block ;vertical-align: top;  }
.pgateBox ol{margin: 10px 0 0}
.pgateBox ol li{list-style-type: decimal; margin-left: 20px; margin-top: 15px }

.pgateBox .f14{font-size: 14px; line-height: 1.5}
.pgateBox .mb10{margin-bottom: 10px}
.pgateBox .bttn{display: block; transition: transform 0.3s ease; ; }
.pgateBox .bttn:hover{  transform: translate(4px,4px) }


/*--------------------------------------------------------------------

総まとめ

--------------------------------------------------------------------*/
.mess .text{margin:0 5% 20px; text-align: left; font-size:clamp(1.25rem, 1.023rem + 1.14vw, 1.875rem)}/*20-30*/
.mess .wakuorange{margin: 0 5%; }

.mess .text0{margin-top: 30px; font-size: clamp(1.375rem, 1.193rem + 0.91vw, 1.875rem)}/*22-30*/

.imgfloat{padding-top: 20px}


.video-container0 video{    background-image:url("../img/dental/thumbnail.jpg");
    background-size: cover;
    background-position: center;
    box-sizing: content-box;}

.video-container video{    background-image:url("../img/dental/thumbnail2.jpg");
    background-size: cover;
    background-position: center;
    box-sizing: content-box;}
 
video::-webkit-media-controls-overlay-play-button {
    display: none !important;
}

@media (max-width: 639px){

.firstbox .text00{text-align: left;}

.video-container0 {
  aspect-ratio: 1 / 0.7; /* コンテナを正方形にする */
  position: relative;
  overflow: hidden;
  border-radius: 20px; /* 角を丸くする場合 */
}

.video-container0 video {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 比率を維持したまま、コンテナを埋め尽くす */
  position: absolute;
  top: 0;
  left: 0;
}



.text012{text-align: left}
.video-container {border-radius: 20px;
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    overflow: hidden;
    display: block;        /* 重要 */
    margin-bottom: 10px;      /* 重要 */
}

.video-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;   /* または cover */
}
}


@media (min-width: 640px){
.top20{margin-top:50px }

.firstbox .text00{font-size: 20px}

.pageheadBox{background: none}

.pageheadBox h2{text-align: center}

.pageheadBox .symptomsMenu{margin: 30px auto 0; width: 1100px; display: flex; justify-content: space-between; flex-flow: wrap}
.pageheadBox .symptomsMenu li{width: 32%; line-height: 1.6; padding: 20px}


.disboxCont{padding: 60px 0 0}

.disease{margin: 0 auto; width: 1100px; }

.firstbox{width: 1100px; margin: 0 auto}
.firstbox .fuki h2{margin: 0}
.firstbox dl{display: flex; justify-content: space-between}
.firstbox dt{width: 678px;}
.firstbox dd{width: 381px; margin: 0 0 40px}
.firstbox .video-container0 video {width: 381px;}

.firstbox ul{display: flex; justify-content: space-between}
.firstbox li{width:530px }

.firstbox .text02a{margin-bottom: 130px}


.video-container0 {
    width: 381px; /* 表示したい正方形の一辺の長さ */
    height: 261px; /* widthと同じ値を指定 */
    overflow: hidden;
    position: relative;
    border-radius: 15px; /* 角を丸くしたい場合 */
    margin: 0 auto; /* ページの中央に配置したい場合 */
}

.video-container0 video {
    width: 100%;
    height: 100%;
    /* ↓ この2行が中央表示の鍵です ↓ */
    object-fit: cover; 
    object-position: center;
}


.disease .fuki, .firstbox .fuki{padding: 30px ; margin-bottom: 30px }
.disease .sub{margin: 0}
.disease .fuki h2{margin: 0 0 10px}
.disease .checklist{margin: 0px;}

.disease .flex2{display: flex; justify-content: space-between ; width: 1100px; margin: 0 auto; flex-direction: row-reverse}
.disease .flex2 dt{margin: 0; width: 381px}
.disease .flex2 dd{margin: 0; width: 678px}

.pgateBox .wakuorange{ padding: 30px; width: 1100px; margin: 0 auto}
.wakuorange .flex2{ flex-direction:row; width: 1040px}
.wakuorange .flex2 dt{ width: 530px}
.wakuorange .flex2 dd{ width: 480px}

.plas2{text-align: center; font-size: 20px}
.ajison .fuki h2{margin:0 0 10px}
.ajison .flex2{display: block; }
.ajison .flex2 dd{width: 100%}
.ajison .imgfloat{padding-top: 20px; width:782px; display: flex; justify-content: space-between; margin: 0 auto; align-items: flex-start; }
.ajison .imgfloat img{width: 381px}


.video-container{width: 381px}
.video-container video { border-radius: 20px;
  width: 381px;
  height: 260px;
  height: auto;
  display: block;
}

.disease .flex2 dd .text012{text-align: center; font-size: 24px}




.mess .text{text-align: center}
.mess .futisen{padding: 20px}
.mess .text0{margin-top: 60px; padding-bottom: 30px}

.wakuorange .flex2{display: flex; justify-content: space-between}

}