@charset "utf-8";

/*====================================================================================================

  トップ

====================================================================================================*/

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

  Main visual
  
----------------------------------------------------------------------------------------------------*/

.mainVisual-wrap {
  overflow:hidden;
}

.mainVisual {
  width:100%;
  position:relative;
  overflow:hidden;
}

.mainVisual:before {
  content:"";
  width:100%;
  height:100%;
  display:block;
  position:absolute;
  left:0;
  background:url(../image/main-visual_dot.svg) no-repeat center top;
  z-index:2;
}

.mv-txt {
  position:relative;
}

.mv-txt__item {
  line-height:1.6;
  font-weight:400;
  position:relative;
  z-index:3;
}

.mv-txt:before {
  content:"";
  width:520px;
  height:520px;
  display:block;
  background-color:#fff;
  border-radius:100%;
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  z-index:-1;
}

.mv-txtB {
  color:#f8a828;
  font-weight:700;
  display:block;
  line-height:1;
  margin-top:0.4em;
  font-size:50px;
}
  
.mv-txtS {
  font-size:28px;
}
  
.mv-txtN {
  font-size:32px;
}

.mv-photo {
  background-color:#fff;
  border-radius:16px;
  position:absolute;
  overflow:hidden;
}

.mv-p__item {
  display:block;
  height:100%;
  position:relative;
  overflow:hidden;
  border-radius:8px;
}

.mv-p__item div {
  height:100%;
}

.mv-p__item img {
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
}

@media print,screen and (min-width:641px) and (max-width:1400px) {
  .mainVisual {
    width:1400px;
  }
}

@media print,screen and (min-width:641px) {
  .mainVisual {
    height:760px;
  }
  
  .mainVisual:before {
    top:64px;
  }
  
  .mv-txt {
    padding-top:200px;
  }
  
  .mv-txt:before {
    top:64px;
  }
  
  .mv-photo {
    padding:10px;
  }

  .mv-p01,
  .mv-p04 {
    width:820px;
    height:500px;
  }
  
  .mv-p02,
  .mv-p03 {
    width:380px;
    height:260px;
  }
  
  .mv-p01 {
    bottom:0;
    right:-webkit-calc(50% + 336px);
    right:calc(50% + 336px);
  }
  
  .mv-p02 {
    bottom:48px;
    right:-webkit-calc(50% + 16px);
    right:calc(50% + 16px);
    z-index:1;
  }
  
  .mv-p03 {
    bottom:0;
    left:-webkit-calc(50% + 16px);
    left:calc(50% + 16px);
    z-index:1;
  }
  
  .mv-p04 {
    bottom:104px;
    left:-webkit-calc(50% + 336px);
    left:calc(50% + 336px);
  }
  
  .mv-p05 {
    display:none;
  }
}

@media screen and (max-width:640px) {
  .mainVisual-wrap {
    padding-top:1.5em;
  }
  
  .mainVisual {
    width:640px;
    height:780px;
  }

  .mainVisual:before {
    background-position:center center;
    background-size:140% auto;
    top:-9%;
  }
  
  .mv-txt {
    padding-top:305px;
  }
  
  .mv-txt:before {
    width:400px;
    height:400px;
    top:180px;
  }

  .mv-txtB {
    font-size:44px;
  }
    
  .mv-txtS {
    font-size:24px;
  }
    
  .mv-txtN {
    font-size:26px;
  }
  
  .mv-photo {
    padding:8px;
  }
  
  .mv-p01,
  .mv-p04 {
    width:400px;
    height:270px;
  }
  
  .mv-p02,
  .mv-p03 {
    width:270px;
    height:180px;
  }
  
  .mv-p05 {
    width:160px;
    height:110px;
  }
  
  .mv-p01 {
    top:0;
    right:-webkit-calc(40% + 8px);
    right:calc(40% + 8px);
  }
  
  .mv-p02 {
    top:3em;
    left:-webkit-calc(60% + 8px);
    left:calc(60% + 8px);
  }
  
  .mv-p03 {
    bottom:0;
    right:-webkit-calc(60% + 8px);
    right:calc(60% + 8px);
  }
  
  .mv-p04 {
    bottom:0;
    left:-webkit-calc(40% + 8px);
    left:calc(40% + 8px);
  }
  
  .mv-p05 {
    bottom:212px;
    left:5%;
  }
}


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

  お知らせ・カレンダー
  
----------------------------------------------------------------------------------------------------*/
  
.info-hdline {
  font-weight:500;
  padding-top:1.6em;
  background:url(../image/circle_dot_green.svg) no-repeat center top;
  background-size:3.8em auto;
  position:relative;
  display:inline-block;
  margin-top:-0.6em;
  z-index:1;
}

.info-hdline:before {
  content:"";
  width:100%;
  height:1.2em;
  display:block;
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center center;
  margin-bottom:0.2em;
}

.info-cnt .info-hdline:before {
  background-image:url(../image/icon/info.svg);
}

.cal-cnt .info-hdline:before {
  background-image:url(../image/icon/cal.svg);
}

@media print,screen and (min-width:641px) {
  .info-cols {
    padding-top:96px;
    padding-bottom:96px;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:justify;
    -ms-flex-pack:justify;
    justify-content:space-between;
  }
  
  .info-col {
    background-color:#fff;
    border-radius:10px;
  }
}


/*--------------------------------------------------------------------------------
  お知らせ
--------------------------------------------------------------------------------*/

.infoList a { display:block; }
.infoList a,
.infoList a:visited,
.infoList a:hover { color:inherit; text-decoration:none; }
.infoList a .ttl { color:#1d97cc; text-decoration:none; }
.ua-pc .infoList a:hover .ttl { color:#45b2e1; text-decoration:underline; }

.info-err {
  padding-top:1.5em;
}

.infoList {
  list-style:none;
  text-align:left;
}

.infoList li {
  border-bottom:1px dashed rgba(33,53,62,0.25);
  padding-top:1em;
}

.infoList .ttl {
  display:block;
  line-height:1.5;
  padding-top:0.5em;
  padding-bottom:1em;
}

.infoBtn {
  padding-left:2em;
  padding-right:2em;
}

.infoList .cate {
  min-width:7.5em;
  text-align:center;
  padding:0 0.5em;
  color:#fff;
  display:inline-block;
  margin-right:1em;
}

.infoList .cate--0001 {
  background-color:#2fbfbb;
}

.infoList .cate--0002 {
  background-color:#fbc047;
}

@media print,screen and (min-width:641px) {
  .info-cnt {
     width:-webkit-calc(42% - 20px);
     width:calc(42% - 20px);
  }
  
  .info-cnt .inner {
    padding:0 40px 60px 40px;
  }
  
  .infoList {
    padding-bottom:40px;
  }
}

@media screen and (max-width:640px) {
  .info-cnt {
    background-color:#fff;
    border-radius:10px;
    margin-top:3.5em;
  }
  
  .info-cnt .inner {
    padding:0 1.6em 3em 1.6em;
    font-size:1em;
  }
  
  .infoList {
    padding-bottom:2.5em;
  }
}


/*--------------------------------------------------------------------------------
  カレンダー
--------------------------------------------------------------------------------*/

@media print,screen and (min-width:641px) {
  .cal-cnt {
     width:-webkit-calc(58% - 20px);
     width:calc(58% - 20px);
  }
  
  .cal-cnt .inner {
    padding:30px 40px 40px 40px;
  }

  .cal-cnt .calTbl .flg {
    font-size:0.9em;
  }
}

@media screen and (max-width:640px) {
  .cal-cnt {
    padding-top:3.5em;
    padding-bottom:2.5em;
  }
  
  .cal-cnt .inner {
    padding-top:1.5em;
  }
  
  .cal-nav li.is-active:after {
    border-width:8px;
    margin-left:-4px;
  }
}


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

  症状別
  
----------------------------------------------------------------------------------------------------*/

.shojo {
  background-color:#d0eeed;
}

.shojo-hdline {
  position:relative;
  z-index:1;
  font-weight:700;
  line-height:1;
}

.shojo-hdline span {
  display:inline-block;
  vertical-align:baseline;
}

.shojo-hdline .kai {
  display:inline-block;
}

.shojo-hdline .onayami {
  margin-right:0.8rem;
  margin-left:0.8rem;
  padding-bottom:0.4em;
  padding-left:0.25rem;
  padding-right:0.25rem;
  background:url(../image/pattern/namisen.svg) repeat-x left bottom;
  background-size:auto 5px;
}

.shojo-hdline .onayami svg {
  display:inline-block;
  width:3em;
  height:1em;
  overflow:visible;
}

.shojo-hdline .onayami text {
  fill:#fff;
  stroke:#12aaa5;
  stroke-width:2;
  stroke-linejoin:round;
}

.shojoList a,
.shojoList a:visited,
.shojoList a:hover {
  color:inherit;
  text-decoration:none;
}

.shojoList {
  list-style:none;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -ms-flex-wrap:wrap;
  flex-wrap:wrap;
  -webkit-box-pack:center;
  -ms-flex-pack:center;
  justify-content:center;
}

.shojoList li {
  width:20%;
  line-height:1.4;
}

.shojoList .ex {
  display:block;
  width:170px;
  height:170px;
  border-radius:100%;
  background-color:#fff;
  margin-left:auto;
  margin-right:auto;
  position:relative;
}

.shojoList .ex:after {
  content:"";
  width:100%;
  height:100%;
  display:block;
  background-repeat:no-repeat;
  background-position:center 56%;
  background-size:auto 44%;
}

.shojoList .ippanshika .ex:after {
  background-image:url(../image/icon/ippanshika.svg);
}
.shojoList .shishubyo .ex:after {
  background-image:url(../image/icon/shishubyo.svg);
}
.shojoList .shoni .ex:after {
  background-image:url(../image/icon/shoni.svg);
}
.shojoList .koku .ex:after {
  background-image:url(../image/icon/koku.svg);
}
.shojoList .whitening .ex:after {
  background-image:url(../image/icon/whitening.svg);
}
.shojoList .implant .ex:after {
  background-image:url(../image/icon/implant.svg);
}
.shojoList .laser .ex:after {
  background-image:url(../image/icon/laser.svg);
}
.shojoList .oneday .ex:after {
  background-image:url(../image/icon/oneday.svg);
}
.shojoList .mouthguard .ex:after {
  background-image:url(../image/icon/mouthguard.svg);
}

.shojoList .ex__txt {
  font-size:0.9em;
  height:2.8em;
  white-space:nowrap;
  display:inline-block;
  position:absolute;
  top:-0.8em;
  left:50%;
  transform:translateX(-50%);
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -ms-flex-wrap:wrap;
  flex-wrap:wrap;
  -webkit-box-align:center;
  -ms-flex-align:center;
  align-items:center;
}

.shinryoBtn {
  width:100%;
  margin-top:1.5em;
  padding-left:0.4em;
  padding-right:0.4em;
  font-weight:500;
  font-size:1.1em;
}

@media print,screen and (min-width:641px) {
  .shojo {
    padding-top:80px;
    padding-bottom:96px;
  }
  
  .shojo-hdline {
    font-size:110%;
  }
  
  .shojoList {
    margin-left:-16px;
    margin-right:-16px;
  }
  
  .shojoList li {
    margin-top:96px;
    padding-left:16px;
    padding-right:16px;
  }

  .shojoList .ex {
    -webkit-transition:transform 0.2s ease-out;
    transition:transform 0.2s ease-out;
  }
  
  .shojoList a:hover .ex {
    transform:scale(1.08);
  }
}


@media screen and (max-width:640px) {  
  .shojo {
    padding-top:3em;
    padding-bottom:3em;
  }
  
  .shojo-hdline .onayami {
    background-size:auto 4px;
  }
  
  .shojo-hdline .kai {
    display:block;
    padding-top:0.2em;
  }
  
  .shojo-cnt {
    max-width:480px;
    margin-left:auto;
    margin-right:auto;
  }
  
  .shojoList {
    margin-left:-2%;
    margin-right:-2%;
  }
  
  .shojoList li {
    width:50%;
    padding-left:4%;
    padding-right:4%;
    margin-top:2.5em;
  }
  
  .shojoList li:nth-child(n+3) {
    margin-top:3em;
  }
  
  .shojoList .ex {
    width:140px;
    height:140px;
  }
  
  .shojoList .ex__txt {
    font-size:0.9em;
  }
}

@media screen and (max-width:480px) {  
  .shojoList .ex {
    width:-webkit-calc(140 / 480 * 100vw);
    height:-webkit-calc(140 / 480 * 100vw);
    width:calc(140 / 480 * 100vw);
    height:calc(140 / 480 * 100vw);
  }
  
  .shojoList li {
    padding-left:2%;
    padding-right:2%;
  }
  
  .shinryoBtn {
    font-size:1em;
  }
}

@media screen and (max-width:420px) {
  .shojo-hdline {
    font-size:3.8vw;
  }
}


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

  特徴
  
----------------------------------------------------------------------------------------------------*/

.tokucho-lo {
  position:relative;
}

.tokucho-lo:before {
  content:"";
  width:100%;
  height:100%;
  position:absolute;
  left:0;
  top:-48px;
  background:url(../image/tokucho_dot.svg) no-repeat center top;
}

.tokucho {
  background-color:#fefaed;
}

.tokucho-hdline {
  position:relative;
  z-index:1;
  font-weight:500;
  line-height:1;
}

.tokucho-hdline .kai {
  display:inline-block;
}

.tokucho-hdline span {
  display:inline-block;
  vertical-align:baseline;
}

.tokucho-hdline .mgR { margin-right:0.5rem; }
.tokucho-hdline .mgL { margin-left:0.5rem; }

.tokucho-hdline .no svg {
  display:inline-block;
  width:0.9em;
  height:1em;
  overflow:visible;
}

.tokucho-hdline .no text {
  fill:#fff;
  stroke:#f8a828;
  stroke-width:3;
  stroke-linejoin:round;
}

.tokucho-cnt {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -ms-flex-wrap:wrap;
  flex-wrap:wrap;
  position:relative;
  z-index:1;
}

.tokucho-box {
  width:33.333333%;
  padding-left:16px;
  padding-right:16px;
}

.tokucho-box .inner {
  height:100%;
  background-color:#fff;
  border-radius:10px;
  padding:1.75em;
}

.tokucho-cnt--cols3 .tokucho-box {
  padding-top:54px;
}

.tokucho-box .photo img {
  border-radius:5px;
}

.tokucho-box-no {
  font-weight:900;
  color:#f8a828;
  padding-top:0.6em;
  background:url(../image/circle_dot_orange.svg) no-repeat center top;
  background-size:auto 1em;
  position:relative;
  margin-top:-0.4em;
  z-index:1;
}

.tokucho-box-no svg {
  display:inline-block;
  width:1em;
  height:1em;
  overflow:visible;
}

.tokucho-box-no text {
  fill:#fff;
  stroke:#f8a828;
  stroke-width:2;
  stroke-linejoin:round;
}

.tokucho-box-hdline {
  display:block;
  color:#f8a828;
  font-weight:700;
  line-height:1.4;
}

.tokucho-box p {
  padding-top:1em;
  padding-bottom:0.4em;
  text-align:left;
  display:inline-block;
  margin-left:auto;
  margin-right:auto;
}

@media print,screen and (min-width:1401px) {
  .tokucho-lo:before {
    background-size:2800px auto;
  }
}

@media print,screen and (max-width:1400px) {
  .tokucho-lo:before {
    background-size:200% auto;
  }
}

@media print,screen and (min-width:641px) {
  .tokucho {
    padding-top:56px;
    padding-bottom:72px;
  }
  
  .tokucho-hdline {
    font-size:110%;
  }
  
  .tokucho-cnt--cols2 {
    padding-top:72px;
  }
  
  .tokucho-cnt--cols2 {
    -webkit-box-pack:center;
    -ms-flex-pack:center;
    justify-content:center;
  }

  .tokucho-cnt--cols3 {
    -webkit-box-pack:justify;
    -ms-flex-pack:justify;
    justify-content:space-between;
    margin-left:-16px;
    margin-right:-16px;
  }
  
  .tokucho-box {
    line-height:1.7;
  }

  .tokucho-box .photo {
    margin:-0.4em;
  }
}

@media screen and (max-width:640px) {
  .tokucho-lo:before {
    background-position:52% top;
    top:-1.5em;
  }
  
  .tokucho {
    padding-top:3em;
    padding-bottom:2.5em;
  }

  .tokucho-hdline .kai {
    display:block;
  }
  
  .tokucho-hdline .no {
    margin-left:-0.2em;
  }
  
  .tokucho-cnt--cols2,
  .tokucho-cnt--cols3 {
    -webkit-box-pack:justify;
    -ms-flex-pack:justify;
    justify-content:space-between;
    margin-left:-2%;
    margin-right:-2%;
  }
  
  .tokucho-box {
    width:50%;
    padding-left:2%;
    padding-right:2%;
    line-height:1.6;
  }
  
  .tokucho-cnt--cols2 {
    padding-top:2.25em;
  }
  
  .tokucho-cnt--cols3 .tokucho-box {
    padding-top:1.5em;
  }

  .tokucho-box .photo img {
    width:100%;
    height:-webkit-calc(250 / 640 * 100vw);
    height:calc(250 / 640 * 100vw);
    object-fit:cover;
    font-family:"object-fit:cover;"
  }
}

@media screen and (min-width:561px) and (max-width:640px) {
  .tokucho-box {
    width:50%;
  }
  
  .tokucho-box .inner {
    padding:1.4em 1.2em;
  }

  .tokucho-box .photo {
    margin:-0.4em -0.2em 0 -0.2em;
  }

  .tokucho-box .photo img {
    height:-webkit-calc(150 / 640 * 100vw);
    height:calc(150 / 640 * 100vw);
  }
}

@media screen and (max-width:560px) {
  .tokucho-box {
    width:100%;
  }
  
  .tokucho-cnt--cols2 .tokucho-box:not(:first-child) {
    padding-top:2em;
  }
  
  .tokucho-cnt--cols3 .tokucho-box {
    padding-top:2em;
  }
  
  .tokucho-box .inner {
    padding:1.5em;
  }
  
  .tokucho-box-no {
    font-size:2em;
  }
  
  .tokucho-box-hdline {
    font-size:1.1em;
  }
}


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

  院長ごあいさつ
  
----------------------------------------------------------------------------------------------------*/

.aisatsu-lo {
  position:relative;
  overflow:hidden;
}

.aisatsu {
  background-color:#fff;
}

.aisatsu-photo {
  position:relative;
}

.aisatsu-photo img {
  width:600px;
  max-width:inherit;
  position:absolute;
  right:104px;
  z-index:2;
}

.aisatsu-subHdline {
  text-align:start;
  -webkit-writing-mode:vertical-rl;
  -ms-writing-mode:tb-rl;
  writing-mode:vertical-rl;
  position:absolute;
  right:72px;
  top:-32px;
  z-index:3;
  font-size:1.6em;
  white-space:nowrap;
}

.aisatsu-subHdline span {
  display:inline-block;
  border-right:4px solid #f6df59;
  line-height:1.6;
  margin-left:1em;
}

.aisatsu-photo:before {
  content:"";
  display:block;
  width:100%;
  height:400px;
  position:absolute;
  right:0;
  top:0;
  background:url(../image/pattern/dot.svg) repeat left top;
  opacity:0.25;
  border-radius:0 200px 200px 0;
}

.aisatsu-cnt {
  text-align:left;
  position:relative;
  z-index:3;
}

.aisatsu-txt {
  padding-top:1.5em;
}

.aisatsu-txt p {
  padding-bottom:1.5em;
}

@media print,screen and (min-width:1141px) and (max-width:1400px) {
  .aisatsu-photo img {
    width:-webkit-calc(600 / 1400 * 100vw);
    width:calc(600 / 1400 * 100vw);
  }

  .aisatsu-photo:before {
    height:-webkit-calc(400 / 1400 * 100vw);
    height:calc(400 / 1400 * 100vw);
    border-radius:0 -webkit-calc(200 / 1400 * 100vw) -webkit-calc(200 / 1400 * 100vw) 0;
    border-radius:0 calc(200 / 1400 * 100vw) calc(200 / 1400 * 100vw) 0;
  }
}

@media print,screen and (max-width:1140px) {
  .aisatsu-photo img {
    width:480px;
  }
  
  .aisatsu-photo:before {
    height:320px;
    border-radius:0 320px 320px 0;
  }
}

@media print,screen and (min-width:641px) {
  .aisatsu-lo {
    background-color:#fefaed;
    padding-top:29px;
  }
  
  .aisatsu-lo:before {
    content:"";
    width:1480px;
    height:100%;
    margin-left:auto;
    margin-right:auto;
    position:absolute;
    left:50%;
    top:0;
    transform:translateX(-50%);
    display:block;
    background:url(../image/aisatsu_dot.svg) no-repeat right top;
    z-index:1;
  }
  
  .aisatsu-lo:after {
    content:"";
    width:300px;
    height:300px;
    border-radius:100%;
    background-color:#f5fafd;
    position:absolute;
    left:calc(360px + 50%);
    bottom:-150px;
  }
  
  .aisatsu {
    padding-top:112px;
    min-width:1120px;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
  }
  
  .aisatsu-photo {
    min-height:498px;
    width:40%;
    padding-top:52px;
  }

  .aisatsu-cnt {
    width:60%;
    padding-left:64px;
  }
  
  .aisatsu-cnt .sp-view {
    display:none;
  }
}

@media screen and (max-width:640px) {
  .aisatsu-lo:before {
    content:"";
    width:100%;
    height:100%;
    margin-left:auto;
    margin-right:auto;
    position:absolute;
    left:6%;
    top:2.5em;
    display:block;
    background:url(../image/aisatsu_dot-sp.svg) no-repeat left 0;
    background-size:50% auto;
    z-index:1;
  }
  
  .aisatsu-lo:after {
    content:"";
    border-radius:100%;
    background-color:#f5fafd;
    position:absolute;
    width:-webkit-calc(400 / 640 * 100vw);
    height:-webkit-calc(400 / 640 * 100vw);
    right:-webkit-calc(-1 * (200 / 640 * 100vw));
    bottom:-webkit-calc(-1 * (200 / 640 * 100vw));
    width:calc(400 / 640 * 100vw);
    height:calc(400 / 640 * 100vw);
    right:calc(-1 * (200 / 640 * 100vw));
    bottom:calc(-1 * (200 / 640 * 100vw));
  }
  
  .aisatsu {
    padding-top:5em;
    padding-bottom:2.5em;
  }
  
  .aisatsu-subHdline {
    top:-2em;
    right:-webkit-calc(80 / 640 * 100vw);
    right:calc(80 / 640 * 100vw);
    font-size:4.2vw;
  }
  
  .aisatsu-subHdline span {
    border-right-width:3px;
  }
  
  .aisatsu-photo:before {
    left:-4%;
    left:-4%;
    height:-webkit-calc(380 / 760 * 100vw);
    height:calc(380 / 760 * 100vw);
    border-radius:0 -webkit-calc(190 / 640 * 100vw) -webkit-calc(190 / 640 * 100vw) 0;
    border-radius:0 calc(190 / 640 * 100vw) calc(190 / 640 * 100vw) 0;
  }
  
  .aisatsu-photo {
    width:100%;
    height:-webkit-calc(420 / 760 * 100vw);
    height:calc(420 / 760 * 100vw);
    padding-top:0;
  }
  
  .aisatsu-photo:before {
    background-size:auto 0.8em;
  }
  
  .aisatsu-photo img {
    max-width:500px;
    width:80%;
    left:38%;
    top:inherit;
    bottom:0;
    transform:translateX(-50%);
  }

  .aisatsu-cnt {
    padding-top:2em;
    padding-left:-webkit-calc(40 / 760 * 100vw);
    padding-right:-webkit-calc(40 / 760 * 100vw);
    padding-left:calc(40 / 760 * 100vw);
    padding-right:calc(40 / 760 * 100vw);
  }
  
  .aisatsu-cnt .pc-view {
    display:none;
  }
  
  .aisatsu-txt {
    padding-top:1em;
  }
}