@charset "UTF-8";

@media screen and (max-width: 760px) {
  .pc {
    display: none !important;
  }
}

@media screen and (min-width: 761px) {
  .sp {
    display: none !important;
  }
}


/* ========================== */
/* 共通 */
/* ========================== */

picture {
  display: block;
  text-align: center;
}

picture img {
  margin: 0 auto;
}

.p-inner {
  margin: 0 auto;
}

.link {
  display: inline-block;
}

section {
  overflow: hidden;
}

@media screen and (min-width: 761px) {

  main picture,
  footer picture {
    padding: 0 15px;
  }
}

@media screen and (max-width: 760px) {
  picture {
    margin: 0 auto;
  }
}


/* pagetop */
/* ========================== */

#pagetop {
  position: absolute;
  width: 5.75em;
  height: 5.75em;
  bottom: 100px;
  right: 105px;
  cursor: pointer;
  z-index: 15;
  background-image: url(../img/pagetop.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  border: 1px solid #fff;
  transition: all 0.3s ease-out;
  transition-property: background-color;
}

@media screen and (max-width: 1000px) {
  #pagetop {
    width: 4.75em;
    height: 4.75em;
    right: 4em;
  }
}


@media screen and (max-width: 760px) {
  #pagetop {
    width: 4.75em;
    height: 4.75em;
    right: 2em;
  }
}


/* header */
/* ========================== */

header {
  background: linear-gradient(#4b7544, #1b4a1f);
  position: fixed;
  width: 100%;
  z-index: 99;
}

header .p-inner {
  max-width: 1850px;
  padding: 0 15px;
}

header .p-inner .flex .flex {
  padding: 2.1em 0 1.4em;
}

header .p-inner .flex {
  align-items: center;
}

.head_01 {
  position: absolute;
  padding: 0.1em 0 0 1em;
  text-align: left;
}

.head_02 {
  padding: 0 1.5em 0 0.6em;
}

.head_04 {
  margin: 0 0 0 auto;
  padding: 0 0 0.6em;
}

.head_05 {
  padding: 0 0 0 1.6em;
}

.head_06 {
  padding: 0 2.7em 0 1.7em;
}

@media screen and (max-width: 1680px) {

  .head_04,
  .head_05 {
    display: none;
  }

  .head_06 {
    margin: 0 0 0 auto;
  }
}

@media screen and (max-width: 760px) {
  .head_02 {
    padding: 0;
    width: 46.3vw;
    margin: 0 2.4em 0 0;
  }

  header .p-inner {
    padding: 0.5em 4px 0.9em 12px;
  }

  header .p-inner .flex .flex {
    padding: 0;
  }

  .head_03 {
    max-width: 110px;
  }
}

@media screen and (max-width: 480px) {
  header .p-inner {
    padding: 0 4px 0 12px;
  }

  .head_03 {
    max-width: 19vw;
  }
}


/* menu */
/* ========================== */

#menu_btn {
  display: none;
}

.menu_btn {
  display: block;
  width: 4.5em;
  height: 6.2em;
  position: relative;
  cursor: pointer;
  z-index: 1100;
  margin: 0 0 1.4em;
}

.menu_btn span {
  display: block;
  width: 70%;
  background-color: #fff;
  height: 2px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  transition: 0.5s;
}

.menu_btn span:nth-child(1) {
  transform: translateY(-1em);
}

.menu_btn span:nth-child(3) {
  transform: translateY(1em);
}

.is-show .menu_btn span:nth-child(1) {
  width: 70%;
  transform: rotate(225deg);
}

.is-show .menu_btn span:nth-child(2) {
  width: 0;
  height: 0;
  transform: translate(0, 0);
}

.is-show .menu_btn span:nth-child(3) {
  width: 70%;
  transform: rotate(-225deg);
}

.menu_btn p {
  position: relative;
  margin: auto 0 0;
  display: flex;
  color: #fff;
  font-family: 'Noto sans JP', serif;
  align-items: flex-end;
  height: 100%;
  justify-content: center;
  font-size: 90%;
  transition: all 0.5s;
}

.is-show .menu_btn p {
  transform: translateX(-100%);
}

.menu_btn p::before {
  position: absolute;
  content: "CLOSE";
  font-size: 1em;
  display: block;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  transform: translateX(100%);
  transition: all 0.5s;
}

.is-show .menu_btn p::before {
  display: block;
}

.nav_wrap {
  overflow: hidden;
}

@media screen and (max-width: 760px) {
  .menu_btn {
    height: 5.7em;
  }
}


/* manu 中身 */
/* ========================== */

.menu_nav {
  display: block;
  position: fixed;
  top: 0;
  right: 0;
  width: 37em;
  height: 100vh;
  background: linear-gradient(#306c26, #1b4a1f);
  overflow: hidden;
  transform: translateX(100%);
  transition: transform 0.5s;
}

.is-show .menu_nav {
  z-index: 1000 !important;
  transform: translateX(0);
}

header .menu_nav .p-inner {
  height: 100%;
  margin: 8em 0 auto;
  padding: 0 2em;
}

.menu_nav ul {
  color: #fff;
  text-align: left;
  margin: auto;
  height: 100%;
  font-size: 1.3em;
  font-family: 'Noto Serif JP', serif;
}

.menu_nav a {
  display: block;
  padding: 0.6em 1em;
}

.menu_nav li {
  position: relative;
}

.menu_nav li:not(:last-of-type)::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 2px;
  left: 0;
  bottom: 0;
  background: linear-gradient(90deg, #887300e6, #fff0b780 20%, #fff0b780 50%, #fff0b780 10%, #887300e6);
}

.menu_nav a:hover {
  background-color: #39782e;
}

@media screen and (max-width: 760px) {
  .menu_nav li:not(:last-of-type)::before {
    height: 1.3px;
  }

  .menu_nav ul {
    font-size: 1.35em;
  }

  .menu_nav {
    width: 30em;
  }

  header .menu_nav .p-inner {
    margin: 7.5em 0 auto;
    padding: 0 1.6em;
  }
}


/* floating */
/* ========================== */

.floating {
  position: fixed;
  right: 0;
  top: 11.2em;
  z-index: 90;
}

.floating .floating_item {
  display: block;
}

@media screen and (min-width: 761px) {
  .floating .floating_item:not(:first-of-type) {
    margin-top: 0.8em;
  }
}

@media screen and (max-width: 760px) {
  .floating {
    top: unset;
    bottom: 0;
    background: linear-gradient(#4b7544, #1b4a1f);
    width: 100%;
  }

  .floating .p-inner {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .floating .floating_item {
    width: 24vw;
    box-sizing: border-box;
  }

  .floating_item picture {
    display: flex;
    justify-content: center;
    align-content: center;
  }

  .floating_item picture img {
    max-height: 80px;
    padding: 0.5em;
  }

  .floating .floating_item:nth-of-type(1) {
    order: 4;
  }

  .floating .floating_item:nth-of-type(2) {
    order: 2;
  }

  .floating .floating_item:nth-of-type(3) {
    order: 3;
  }

  .floating .floating_item:nth-of-type(4) {
    order: 1;

  }

  .floating .floating_item:not(:last-of-type) {
    border-left: 1px solid #fff;
  }
}


/* mv */
/* ========================== */

.mv {
  padding: 0;
}

@media screen and (max-width: 1500px) and (min-width: 761px) {
  picture.mv {
    padding: 0;
    padding-top: calc(6em - 1vw);
  }
}


/* インプラント治療がおすすめです！ */
/* ========================== */

.recom_01 {
  background: linear-gradient(#0b1e38, #173863);
  padding: 6.5em 0 4.9em;
}

.recom_bg01 {
  position: absolute;
  right: 0;
  left: 0;
  margin-top: -1px;
  z-index: 2;
}

.recom_02 {
  background-image: url(../img/recom_bg02.png);
  background-repeat: no-repeat;
  background-position: top;
  background-size: 100% auto;
  padding: 6.7em 0 0;
  margin: 0 0 -0.5em;
}

.recom_bg03 {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  margin: -12.8vw 0 0;
  padding: 0;
  z-index: 0;
}

.recom_bg03 img {
  width: 100%;
}

.recom_03 img {
  z-index: -2;
}

.recom_04 {
  padding: 0 0 8.7em;
}

.recom_04 img {
  margin-top: -5.2em;
}

.recom_bg_cream {
  background: linear-gradient(#fcf5e7, #fcf6e9 80%, #fcf6e9);
}

.bg_green {
  background: linear-gradient(#09350d 5%, #296b2e 95%);
}

.recom_05 {
  padding-bottom: 4.6em;
}

@media screen and (min-width: 1200px) {
  .recom_03 img {
    transform: translateX(1.6em);
  }
}

@media screen and (max-width: 760px) {
  .recom_01 picture {
    width: 68.4vw;
  }

  .recom_01 {
    padding: 3.5em 0 3.2em;
  }

  .recom_bg01 {
    max-width: 14vw;
  }

  .recom_02 picture {
    max-width: 89.5vw;
  }

  .recom_02 {
    padding: 5.5em 0 0;
    margin: 0 0 2.15em;
  }

  .recom_03:nth-child(1) {
    max-width: 95.1vw;
    margin-right: 0;
  }

  .recom_03:nth-child(2) {
    margin: -2.35em 0 0;
  }

  .recom_bg03 {
    margin: -13.4vw 0 0;
  }

  .recom_04 {
    padding: 4.6em 0 4.1em;
  }

  .recom_05 {
    max-width: 91%;
    padding: 0 0 3.6em;
  }
}



/* インプラント施術を担当する院長による無料相談 */
/* ========================== */

.soudan_bg01 img {
  margin-top: -1px;
}

.soudan_01 {
  padding: 3.4em 0 0;
  transform: translateX(1em);
}

.soudan_02 {
  padding: 0 0 7.2em;
}

@media screen and (max-width: 760px) {
  .soudan_01 {
    max-width: 98%;
    padding: 3.5em 0 0;
  }

  .soudan_02 {
    padding: 0 0 3.5em;
  }
  .soudan_02 .taC {
    max-width: 90%;
    margin: 0 auto;
    display: block;
  }
}


/* 当院のインプラントの5つの特徴 */
/* ========================== */

.fea_01 {
  padding: 4.7em 0 0;
}

body .fea_02 {
  padding-top: 1.65em
}

.fea_06 {
  padding-bottom: 13.55em;
}

#feature {
  background: linear-gradient(90deg, #f0d4904d, #fff 20%, #fff 70%, #fff 20%, #f0d4904d);
}

.fea_07 img {
  margin-top: -6.3em;
}

.fea_bg {
  background-image: url(../img/fea_bg01.jpg);
  background-repeat: no-repeat;
  background-position: top;
  background-size: 100% 100%;
}

.fea_07 {
  margin: 0 0 -0.9em;
}

.fea_08 {
  padding-bottom: 3.8em;
}

.fea_09 {
  padding: 0 0 5.3em;
}

.fea_10 {
  padding: 3.4em 0 3.6em;
}

.fea_bg_02 {
  background-image: url(../img/fea_bg02.jpg);
  background-repeat: no-repeat;
  background-position: top;
  background-size: 100% 100%;
}

@media screen and (max-width: 760px) {
  .fea_bg {
    background-image: url(../img/fea_bg01_sp.jpg);
  }

  .fea_bg_02 {
    background-image: url(../img/fea_bg02_sp.jpg);
  }

  .fea_01 {
    padding: 3em 0 0;
    max-width: 86.5%;
  }

  body .fea_02 {
    padding-top: 0;
    margin-top: -0.2em;
  }

  body .fea_03,
  body .fea_04,
  body .fea_05,
  body .fea_06 {
    padding-top: 0em;
    margin-top: -1.9em;
  }

  .fea_06 {
    padding: 0 0 7.8em;
  }

  .fea_07 {
    padding: 0.6em 0 0;
    margin: 0 -1% -0.7em;
    width: 102%;
  }

  .fea_08,
  .fea_08_2,
  .fea_08_3 {
    padding: 0 0 4.85em;
    max-width: 81%;
  }

  .fea_09 {
    padding: 0.9em 0 5.35em;
    max-width: 77%;
  }

  .fea_10 {
    padding: 4em 0 2.9em;
    width: 108%;
    margin: 0 -4%;
  }
}


/* インプラント治療の流れ */
/* ========================== */

.flow_01 {
  padding: 6.9em 0 3.25em;
}

.flow_02 {
  padding: 0 0 5.8em;
}

#flow {
  background-color: #faf4e6;
}

@media screen and (max-width: 760px) {
  .flow_01 {
    padding: 4.9em 0 1.25em;
    max-width: 91%;
  }

  .flow_02 {
    padding: 0 0 3.8em;
  }
}


/* 今すぐお問い合わせ */
/* ========================== */

#contact {
  padding: 0 0 4em;
}

.contact_01 {
  margin: 4.1em auto 0;
  display: inline-grid;
}

.contact_web_button-wrap {
  text-align: center;
  margin: 3.2em auto 0;
}

footer .contact_web_button-wrap {
  text-align: center;
  margin: 0 auto 3.2em;
}

.contact_web_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  padding: 1em 3em;
  width: 78%;
  max-width: 720px;
  background: linear-gradient(95deg, #c89e2c 0%, #f2d585 100%);
  color: #fff;
  text-shadow: 0 2px 8px #000;
  font-family: 'Noto Serif JP', serif;
  font-weight: 700;
  font-size: 2.8rem;
  letter-spacing: 0.08em;
  text-decoration: none;
  border-radius: 12px;
  border: 2px solid rgba(255, 255, 255, 0.32);
  /*box-shadow: 0 14px 28px rgba(9, 31, 11, 0.28);*/
  transition: all 0.3s;
}

.contact_web_button:hover {
  opacity: 0.75;
  /*box-shadow: 0 18px 34px rgba(9, 31, 11, 0.34);*/
}

@media screen and (max-width: 760px) {
  .contact_bg01 {
    width: 104%;
    margin: 0 -2%;
  }

  .contact_01 {
    margin: 3.5em auto 0;
    max-width: 90%;
  }

  footer .contact_web_button-wrap {
    margin-bottom: 2.2em;
  }

  .contact_web_button {
    width: 90%;
    max-width: 600px;
    font-size: 2rem;
    padding: 1em 0;
    border-radius: 10px;
  }

  #contact {
    padding: 0 0 5em;
  }
}


/* ドクター紹介 */
/* ========================== */

#doctor {
  background: linear-gradient(#0a234a 5%, #124280 95%);
}

.doctor_01 {
  padding-top: 6.2em;
  padding-bottom: 4.05em;
}

.doctor_02 {
  padding-bottom: 7.9em;
}

@media screen and (min-width: 761px) {
  .doctor_01 {
    transform: translateX(0.75em);
  }
}

@media screen and (min-width: 1200px) {
  .doctor_02 {
    padding-right: 15.5em;
  }
}

@media screen and (max-width: 760px) {
  .doctor_02 {
    padding: 0 0 6.5em 0;
    max-width: 90%;
  }

  .doctor_01 {
    padding-top: 0.65em;
    padding-bottom: 2.3em;
    max-width: 92%;
  }
}


/* よくある質問 */
/* ========================== */

#faq {
  background-image: url(../img/faq_bg01.jpg);
  background-repeat: no-repeat;
  background-position: top;
  background-size: 100% 100%;
}

.faq_01 {
  padding: 6em 0 5.5em;
}

.faq_02 {
  padding: 0 0 5.5em;
}

@media screen and (max-width: 760px) {
  #faq {
    background-image: url(../img/faq_bg01_sp.jpg);
  }

  .faq_01 {
    padding: 4.9em 0 3.2em;
    max-width: 75%;
  }

  .faq_02 {
    padding: 0;
  }

  .faq_02,
  .faq_03,
  .faq_04,
  .faq_05 {
    max-width: 108%;
    margin: 0 -4%;
  }

  .faq_03,
  .faq_04,
  .faq_05 {
    margin-top: -1.3em;
  }

  #faq {
    padding: 0 0 3.8em;
  }
}


/* 今すぐお問い合わせ02 */
/* ========================== */

#contact_2 {
  padding: 0 0 4em;
}

.contact_bg01 img {
  margin-top: -1px;
  z-index: 2;
}


/* 今すぐお問い合わせ02 */
/* ========================== */

.price_01 {
  padding-bottom: 5.85em;
  padding-top: 6.2em;
}

.price_02 {
  padding-bottom: 6.7em;
}

.price_03 {
  padding-bottom: 6.1em;
}

.price_04 {
  padding-bottom: 7.4em;
}

.price_05 {
  padding-bottom: 6.1em;
}

.price_06 {
  padding-bottom: 4.55em;
}

#price {
  background: linear-gradient(#fff, #fff 10%, #fff 10%, rgb(240 212 144 / 28%));
}

.btn_wrap {
  text-align: center;
  padding: 0 0 13em;
}

@media screen and (max-width: 760px) {
  .price_01 {
    padding-bottom: 2.85em;
    padding-top: 3.3em;
    max-width: 86%;
  }

  .price_02 {
    padding-bottom: 3.4em;
    max-width: 72%;
  }

  .price_03 {
    padding-bottom: 3.5em;
    max-width: 90%;
  }

  .price_04 {
    padding-bottom: 2.6em;
    max-width: 98%;
  }

  .price_05 {
    padding-bottom: 5em;
    max-width: 80.5%;
  }

  .price_06 {
    padding-bottom: 3.3em;
    max-width: 90%;
  }

  .btn_wrap picture {
    max-width: 81%;
  }

  .btn_wrap {
    padding: 0 0 9.5em;
  }
}


/* footer */
/* ========================== */

footer {
  position: relative;
  background: linear-gradient(#4b7544, #1b4a1f);
}

footer .logo {
  padding-top: 5.2em;
  padding-bottom: 2.3em;
}

.foot_01 {
  padding: 0 0 4.2em;
}

.foot_02 {
  margin: 0 auto 4.35em;
  display: inline-grid;
}

footer .flex {
  padding: 0 0 4.6em;
}

.map {
  height: 390px;
  overflow: hidden;
  width: 100%;
}

iframe {
  width: 100%;
  height: 720px;
  margin-top: -165px;
}

.foot_05 {
  padding-top: 5.45em;
  padding-bottom: 5.1em;
}

footer .btn_wrap {
  padding: 0 0 5.7em;
}

.copyright {
  color: #fff;
  text-align: center;
  font-family: 'Noto sans JP', serif;
  font-size: 85%;
  padding: 0 0 2em;
}

@media screen and (min-width: 761px) {
  .foot_03 {
    padding-right: 4em;
  }
}

@media screen and (max-width: 760px) {
  footer .logo {
    padding-top: 5.5em;
    padding-bottom: 2em;
    max-width: 74%;
    transform: translateX(-2%);
  }

  .foot_01 {
    padding: 0 0 3.2em;
    max-width: 74%;
  }

  .foot_02 {
    max-width: 80%;
  }

  .foot_03 {
    max-width: 90%;
    padding-bottom: 4.7em;
  }

  .foot_04 {
    max-width: 90%;
    padding-bottom: 1.1em;
  }

  .foot_05 {
    padding-top: 0;
    padding-bottom: 3.2em;
  }

  .map {
    height: 73.3vw;
  }

  iframe {
    height: 169vw;
    margin-top: -44vw;
  }

  footer .btn_wrap picture {
    max-width: 90%;
  }

  footer .btn_wrap {
    padding: 0 0 3.2em;
  }

  .copyright {
    font-size: 120%;
    padding: 0 0 7em;
  }
}