/*
Theme Name: implant

/* Document
 * ========================================================================== */

/**
 * Add border box sizing in all browsers (opinionated).
 */

*,
::before,
::after {
  box-sizing: border-box;
}

/**
   * 1. Add text decoration inheritance in all browsers (opinionated).
   * 2. Add vertical alignment inheritance in all browsers (opinionated).
   */

::before,
::after {
  text-decoration: inherit; /* 1 */
  vertical-align: inherit; /* 2 */
}

/**
   * 1. Use the default cursor in all browsers (opinionated).
   * 2. Change the line height in all browsers (opinionated).
   * 3. Use a 4-space tab width in all browsers (opinionated).
   * 4. Remove the grey highlight on links in iOS (opinionated).
   * 5. Prevent adjustments of font size after orientation changes in
   *    IE on Windows Phone and in iOS.
   * 6. Breaks words to prevent overflow in all browsers (opinionated).
   */

html {
  cursor: default; /* 1 */
  line-height: 1.5; /* 2 */
  -moz-tab-size: 4; /* 3 */
  tab-size: 4; /* 3 */
  -webkit-tap-highlight-color: transparent /* 4 */;
  -ms-text-size-adjust: 100%; /* 5 */
  -webkit-text-size-adjust: 100%; /* 5 */
  word-break: break-word; /* 6 */
}

/* Sections
   * ========================================================================== */

/**
   * Remove the margin in all browsers (opinionated).
   */

body {
  margin: 0;
}

/**
   * Correct the font size and margin on `h1` elements within `section` and
   * `article` contexts in Chrome, Edge, Firefox, and Safari.
   */

h1,
h2,
h3,
h4 {
  font-size: 2em;
  margin: 0;
}

/* Grouping content
   * ========================================================================== */

/**
   * Remove the margin on nested lists in Chrome, Edge, IE, and Safari.
   */

dl dl,
dl ol,
dl ul,
ol dl,
ul dl {
  margin: 0;
}

/**
   * Remove the margin on nested lists in Edge 18- and IE.
   */

ol ol,
ol ul,
ul ol,
ul ul {
  margin: 0;
}

/**
   * 1. Add the correct sizing in Firefox.
   * 2. Show the overflow in Edge 18- and IE.
   */

hr {
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
   * Add the correct display in IE.
   */

main {
  display: block;
}

/**
   * Remove the list style on navigation lists in all browsers (opinionated).
   */
li,
nav ol,
nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

/**
   * 1. Correct the inheritance and scaling of font size in all browsers.
   * 2. Correct the odd `em` font sizing in all browsers.
   */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   * ========================================================================== */

/**
   * Remove the gray background on active links in IE 10.
   */

a {
  background-color: transparent;
  text-decoration: none;
  color: #444;
}

/**
   * Add the correct text decoration in Edge 18-, IE, and Safari.
   */

abbr[title] {
  text-decoration: underline;
  text-decoration: underline dotted;
}

/**
   * Add the correct font weight in Chrome, Edge, and Safari.
   */

b,
strong {
  font-weight: bolder;
}

/**
   * 1. Correct the inheritance and scaling of font size in all browsers.
   * 2. Correct the odd `em` font sizing in all browsers.
   */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
   * Add the correct font size in all browsers.
   */

small {
  font-size: 80%;
}

/* Embedded content
   * ========================================================================== */

/*
   * Change the alignment on media elements in all browsers (opinionated).
   */

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

/**
   * Add the correct display in IE 9-.
   */

audio,
video {
  display: inline-block;
}

/**
   * Add the correct display in iOS 4-7.
   */

audio:not([controls]) {
  display: none;
  height: 0;
}

/**
   * Remove the border on iframes in all browsers (opinionated).
   */

iframe {
  border-style: none;
}

/**
   * Remove the border on images within links in IE 10-.
   */

img {
  border-style: none;
}

/**
   * Change the fill color to match the text color in all browsers (opinionated).
   */

svg:not([fill]) {
  fill: currentColor;
}

/**
   * Hide the overflow in IE.
   */

svg:not(:root) {
  overflow: hidden;
}

/* Tabular data
   * ========================================================================== */

/**
   * Collapse border spacing in all browsers (opinionated).
   */

table {
  border-collapse: collapse;
}

/* Forms
   * ========================================================================== */

/**
   * Remove the margin on controls in Safari.
   */

button,
input,
select {
  margin: 0;
}

/**
   * 1. Show the overflow in IE.
   * 2. Remove the inheritance of text transform in Edge 18-, Firefox, and IE.
   */

button {
  overflow: visible; /* 1 */
  text-transform: none; /* 2 */
}

/**
   * Correct the inability to style buttons in iOS and Safari.
   */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
   * 1. Change the inconsistent appearance in all browsers (opinionated).
   * 2. Correct the padding in Firefox.
   */

fieldset {
  border: 1px solid #a0a0a0; /* 1 */
  padding: 0.35em 0.75em 0.625em; /* 2 */
}

/**
   * Show the overflow in Edge 18- and IE.
   */

input {
  overflow: visible;
}

/**
   * 1. Correct the text wrapping in Edge 18- and IE.
   * 2. Correct the color inheritance from `fieldset` elements in IE.
   */

legend {
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  white-space: normal; /* 1 */
}

/**
   * 1. Add the correct display in Edge 18- and IE.
   * 2. Add the correct vertical alignment in Chrome, Edge, and Firefox.
   */

progress {
  display: inline-block; /* 1 */
  vertical-align: baseline; /* 2 */
}

/**
   * Remove the inheritance of text transform in Firefox.
   */

select {
  text-transform: none;
}

/**
   * 1. Remove the margin in Firefox and Safari.
   * 2. Remove the default vertical scrollbar in IE.
   * 3. Change the resize direction in all browsers (opinionated).
   */

textarea {
  margin: 0; /* 1 */
  overflow: auto; /* 2 */
  resize: vertical; /* 3 */
}

/**
   * Remove the padding in IE 10-.
   */

[type="checkbox"],
[type="radio"] {
  padding: 0;
}

/**
   * 1. Correct the odd appearance in Chrome, Edge, and Safari.
   * 2. Correct the outline style in Safari.
   */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
   * Correct the cursor style of increment and decrement buttons in Safari.
   */

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/**
   * Correct the text style of placeholders in Chrome, Edge, and Safari.
   */

::-webkit-input-placeholder {
  color: inherit;
  opacity: 0.54;
}

/**
   * Remove the inner padding in Chrome, Edge, and Safari on macOS.
   */

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
   * 1. Correct the inability to style upload buttons in iOS and Safari.
   * 2. Change font properties to `inherit` in Safari.
   */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/**
   * Remove the inner border and padding of focus outlines in Firefox.
   */

::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
   * Restore the focus outline styles unset by the previous rule in Firefox.
   */


/**
   * Remove the additional :invalid styles in Firefox.
   */

:-moz-ui-invalid {
  box-shadow: none;
}

/* Interactive
   * ========================================================================== */

/*
   * Add the correct display in Edge 18- and IE.
   */

details {
  display: block;
}

/*
   * Add the correct styles in Edge 18-, IE, and Safari.
   */

dialog {
  background-color: white;
  border: solid;
  color: black;
  display: block;
  height: -moz-fit-content;
  height: -webkit-fit-content;
  height: fit-content;
  left: 0;
  margin: auto;
  padding: 1em;
  position: absolute;
  right: 0;
  width: -moz-fit-content;
  width: -webkit-fit-content;
  width: fit-content;
}

dialog:not([open]) {
  display: none;
}

/*
   * Add the correct display in all browsers.
   */

summary {
  display: list-item;
}

/* Scripting
   * ========================================================================== */

/**
   * Add the correct display in IE 9-.
   */

canvas {
  display: inline-block;
}

/**
   * Add the correct display in IE.
   */

template {
  display: none;
}

/* User interaction
   * ========================================================================== */

/*
   * 1. Remove the tapping delay in IE 10.
   * 2. Remove the tapping delay on clickable elements
        in all browsers (opinionated).
   */

a,
area,
button,
input,
label,
select,
summary,
textarea,
[tabindex] {
  -ms-touch-action: manipulation; /* 1 */
  touch-action: manipulation; /* 2 */
}

/**
   * Add the correct display in IE 10-.
   */

[hidden] {
  display: none;
}

/* Accessibility
   * ========================================================================== */

/**
   * Change the cursor on busy elements in all browsers (opinionated).
   */

[aria-busy="true"] {
  cursor: progress;
}

/*
   * Change the cursor on control elements in all browsers (opinionated).
   */

[aria-controls] {
  cursor: pointer;
}

/*
   * Change the cursor on disabled, not-editable, or otherwise
   * inoperable elements in all browsers (opinionated).
   */

[aria-disabled="true"],
[disabled] {
  cursor: not-allowed;
}

/*
   * Change the display on visually hidden accessible elements
   * in all browsers (opinionated).
   */

[aria-hidden="false"][hidden] {
  display: initial;
}

[aria-hidden="false"][hidden]:not(:focus) {
  clip: rect(0, 0, 0, 0);
  position: absolute;
}

p {
  margin: 0;
}

ul {
  margin: 0;
}



@import url("https://fonts.googleapis.com/css2?family=Kosugi+Maru&family=Noto+Sans+JP:wght@100..900&family=Shippori+Mincho+B1&display=swap");



body {
  font-family: "Noto Sans JP", sans-serif;
  letter-spacing: 0.05rem;
}

/* ヘッダー */
header {
  padding: 0px 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 10px 10px 30px 1px rgba(0, 0, 0, 0.2);
  position: relative;
}

.header__logo {
  width: 350px;
  padding: 0;
}

.header__left {
  margin-top: 5px;

}

.header__left p {
  font-size: 11px;
  padding: 0 0 5px;
  font-family: "Shippori Mincho B1", serif;
  letter-spacing: 0;
  color: #554236;
}

.header__right {
  display: flex;
  gap: 20px;
  padding: 7px 0;
}

.header__tel,
.header__mail {
  padding-left: 30px;
  border-left: 1px black solid;
}

.header__tel__main {
  display: flex;
  align-items: center;
  gap: 8px;
}

.header__tel__main p {
  font-size: 23px;
  font-family: "Shippori Mincho B1", serif;
  font-weight: 600;
  letter-spacing: 0.2rem;
}

.header__tel__sub p {
  font-size: 11px;
}

.header__tel__main img {
  width: 32px;
  height: 32px;
}

.header__mail {
  text-align: center;
}

.header__mail__img {
  width: 40px;
  height: 40px;
}

.header__mail p {
  margin-top: 6px;
  font-size: 16px;
}

/* ハンバーガーメニュー */
.header__hm {
  display: none;
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: #fff2dc;
  padding: 16px;
}

.header__hm__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.header__hm__close {
  padding-top: 5px;
  width: 100%;
  display: flex;
  justify-content: end;
}

.header__hm__btn-wrapper {
  cursor: pointer;
}

.header__hm__btn-wrapper img {
  width: 26px;
}

.header__hm__main {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.header__hm__mail {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px #792324 solid;
}

.header__hm__tel {
  border-bottom: 1px #792324 solid;
  padding-bottom: 10px;
}

.header__hm.active {
  display: block;
}

.header__btn-wrapper {
  display: none;
  cursor: pointer;
}

.header__btn-wrapper img {
  width: 26px;
}

.mv_button {
  text-align: center;
  padding: 30px 0;
}

.mv_button h2 {
  font-family: "Shippori Mincho B1", serif;
  font-weight: 600;
  font-size: 30px;
  letter-spacing: 2px;
}

.mv_button h2 span {
  color: #886E4E;
}



.btn-radius-solid {
  background: #f1e767;
    background: -webkit-gradient(linear, left top, left bottom, from(#f1e767), to(#FC7617));
    background: -webkit-linear-gradient(top, #FC7617 0%, #fcaf17 100%);
    background: linear-gradient(to bottom, #FC7617 0%, #fcaf17 100%);
  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;
border-radius: 30px;
color: #fff;
border-radius: 30px;
margin: 10px 0;
border: 1px solid #000;
padding: 12px 80px;
}

.btn-radius-solid:hover {
  background: -webkit-gradient(linear, left bottom, left top, from(#f1e767), to(#feb645));
  background: -webkit-linear-gradient(bottom, #f1e767 0%, #feb645 100%);
  background: linear-gradient(to top, #f1e767 0%, #feb645 100%);
}

.btn-radius-solid span {
  position: absolute;
  margin-left: 30px;
  font-size: 22px;
  margin-top: 3px;
}

/*
.mv_button a {
  background: #ffb259;
  margin: 10px 0;
  display: inline-block;
  width: 400px;
  font-size: 24px;
  color: #fff;
  padding: 12px 0;
  border-radius: 30px;
  font-weight: 500;
  letter-spacing: 2px;
  border: 1px solid #000;
}
*/

.mv_button ul {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-bottom: 10px;

}

.mv_button li {
  background: aliceblue;
  padding: 8px 20px;
  font-size: 18px;
  border: 1px solid;
  border-radius: 20px;
  margin-top: 10px;
}

@media (max-width: 600px) {
  .mv_button h2 {
    font-size: 20px;
    letter-spacing: 1;
  }

  .mv_button a {
    width: 70%;
    font-size: 16px;
    padding: 12px 0;
  }

  .btn-radius-solid span {
    position: absolute;
    margin-left: 20px;
    font-size: 16px;
}

header {
  box-shadow: 0 3px 10px 1px rgba(0, 0, 0, 0.3);
}

  .mv_button ul {
    gap: 5px;
    justify-content: center;
    margin-bottom: 10px;
    flex-wrap: wrap;
    padding: 0;
  }

  .mv_button li {
    background: aliceblue;
    padding: 6px 5px;
    font-size: 10px;
    border: 1px solid;
    border-radius: 10px;
    margin-top: 10px;
  }

}

@media (max-width: 1024px) {
  header {
    height: auto;
  }

  .header__logo {
    width: 270px;
  }



  header {
    padding: 0 16px;
  }

  .header__tel,
  .header__mail {
    padding-left: 20px;
  }
}

@media (max-width: 800px) {
  .header__logo {
    padding: 5px 0 0;
  }

  .header__tel,
  .header__mail {
    display: none;
  }

  .header__btn-wrapper {

  }

.worry__main__left {

}

}

@media (max-width: 800px) {
  .header__logo {
    width: 270px;
  }

  .header__left p {
    margin-left: 0;
    font-size: 11px;
  }

}

/* ヘッダーここまで */

.mv__text {
	text-align: left;
	color: #fff;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
}

/* メインビジュアル */
.mv {
  padding: 0 4% 20px;
  width: 100%;
  background-image: url(/wp-content/uploads/2024/05/img-08.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
	text-align: center;
}

.mv__main {
  padding-top: 40px;
  font-family: "Shippori Mincho B1", serif;
  font-weight: 600;
  letter-spacing: 0.05rem;
}

.mv__text p {
  font-size: clamp(2vw, 3vw + 10px, 40px);
}



.mv__text span {
	color: #886E4E;
    background: #fff;
    padding: 10px;
    text-shadow: initial;
}

.mv__text h1 {
  margin-top: 14px;
  padding: 4px 10px;
  padding-right: 20px;
  display: inline-block;
  background: #F9F2E9;
  font-size: clamp(3vw, 3vw + 10px, 50px);
    font-weight: initial;
  color: #886E4E;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}

.mv__info {
  margin-top: 60px;
  display: flex;
  gap: 15px;
}

.mv__info img {
  width: 50vw;
}

.mv__item {
  width: 160px;
  height: 160px;
  position: relative;
}

.mv__bg {
  width: 100%;
  height: 100%;
  background-image: url(/wp-content/themes/nihon-implant/images/round.png);
  background-size: cover;
  background-repeat: none;
  overflow: hidden;
}

.mv__item__text {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.mv__item__sub {
  font-size: 14px;
  color: #792324;
}

.mv__item__main {
  color: white;
  font-size: 22px;
  width: 160px;
}

.f_pc {
  position: fixed;
  top: 150px;
  right: 20px;
  z-index: 100;
  display: grid;
  gap: 20px;
}

.f_pc a {
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  font-size: 14px;
  background: #0000CD;
  padding: 20px 10px;
  border-radius: 30px;
	color: #fff;
}

.f_pc a:last-child {
  background: #006400;
}

.f_pc a:hover {
  opacity: .7;
  ;
}

.f_pc a img {
  width: 35px;
  height: auto;
}

.f_pc a span {
  margin-top: 5px;
  position: relative;
  left: 3px;
  font-weight: bold;
}


@media (max-width: 600px) {

  .mv__info img {
    width: 100%;
}

  .f_pc {
    position: fixed;
    top: initial;
    left: 0;
    z-index: 100;
    display: flex;
    gap: 0;
    bottom: 0;
    width: 100%;
  }

  .f_pc a {
    -ms-writing-mode: tb-rl;
    writing-mode: initial;
    font-size: 12px;
    padding: 8px 10px;
    border-radius: 0;
    border: initial;
    width: 50%;
  }

  .f_pc a:first-child img {
    position: relative;
    top: -2px;
}

  .f_pc a:first-child {
    border-right: 1px solid #000;
  }


}


@media (max-width: 700px) {
  .mv__main {
    padding-top: 120px;
  }

  .mv {
    padding: 0 10px 20px;
    height: initial;
    background-position: bottom;
    background-image: url(/wp-content/uploads/2024/05/list03-image01.png);
  }


  .mv__info {
    margin-top: 60px;
    gap: 0px;
  }

  .mv__item__text {
    gap: 2px;
  }

  .mv__text p {
    font-size: 6vw;
        text-shadow: 1px 1px 1px #000;
	}

  .mv__text h1 {
    padding: 4px;
    margin-top: 6px;
    font-size: 6.2vw;
  }

  .mv__item {
    width: 85px;
    height: 85px;
  }

  .mv__item__sub {
    font-size: 8px;
  }

  .mv__item__main {
    font-size: 13px;
    width: 90px;
  }
}

@media (min-width: 1400px) {
  .mv__main {
    padding-left: 2vw;
  }
}

/* メインビジュアルここまで */

/* お悩み */
.worry {
  background-size: 118%;
  background-position: right;
  background-repeat: no-repeat;
  background-image: url(/wp-content/themes/nihon-implant/images/background/background03.png);
  padding: 8% 0;
}

.worry h2 {
  text-align: center;
  color: white;
  font-family: "Shippori Mincho B1", serif;
  font-weight: 600;
  letter-spacing: 0.05rem;
  font-size: clamp(4.4vw, 4.4vw + 10px, 70px);
}

.worry span {
  color: #fdffa8;
}

.worry .border {
  border-bottom: 4px white solid;
}

.worry__main {
  margin-top: 12%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22vw;
}

.worry__main p {
  font-family: "Shippori Mincho B1", serif;
  font-weight: 400;
  letter-spacing: 0.05rem;
  font-size: clamp(3vw, 4vw + 10px, 60px);
  color: white;
  text-shadow: 1px 1px 4px rgba(230, 233, 96, 1);
}

.worry__main__left {
  margin-left: 20%;
}

@media (max-width: 700px) {
  .worry {
  background-size: 123%;
    padding-top: 50px;
        margin-top: -45px;
  }

  .worry .border {
    border-bottom: 1px white solid;
  }

  .worry h2 {
    font-size: 6vw;
  }

  .worry__main {
    gap: 20vw;
    padding-bottom: 30px;
  }

  .worry__main p {
    font-size: 6.7vw;
  }

  .worry__main__left {
    margin: 0;
  }
}

@media (min-width: 1400px) {
  .worry {
    background-size: 101%;
  }

  .worry__main {
    gap: 20vw;
  }

  .worry__main p {
    font-size: 4vw;
  }
}

/* お悩みここまで */

/* お任せください */
.aboutus {
  background-size: cover;
  background-position: top;
  background-repeat: no-repeat;
  background-image: url(/wp-content/themes/nihon-implant/images/background/background02.png);
  padding: 6% 0;
  text-align: center;
  font-family: "Shippori Mincho B1", serif;
  font-weight: 400;
  letter-spacing: 0.05rem;
  margin-top: -40px;
}

@media (max-width: 800px) {

  .aboutus {
        margin-top: -50px;
        padding-bottom: 60px;
  }

}

.aboutus__heading {
  color: white;
  display: inline-block;
}

.aboutus__heading p {
  display: inline-block;
  font-size: clamp(2vw, 3vw + 10px, 50px);
  margin-bottom: 1%;
  border-bottom: 1px white dashed;
}

.aboutus__heading h2 {
  font-size: clamp(2vw, 4vw + 10px, 70px);
  font-weight: 400;
}

.aboutus__heading h2 span {
  font-size: clamp(3vw, 6vw + 10px, 96px);
  color: #fdffa8;
}

@media (max-width: 800px) {

  .aboutus__heading h2 {
    font-size: 22px;
  }

  .aboutus__heading h2 span {
    font-size: 30px;
  }

  .aboutus__heading p {
    font-size: 24px;
  }


}

.aboutus__main {
  margin-top: 15%;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.aboutus__main__img {
  max-width: 851px;
  width: 80%;
  border-radius: 30px;
}

.aboutus__main__text {
  margin-top: -3%;
  position: relative;
  max-width: 1059px;
  width: 100%;
  font-size: 40px;
}

.about__main__text__img {
  width: 100%;
}

.aboutus__main__text p {
  width: 100%;
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  color: white;
  font-size: clamp(1vw, 2vw + 10px, 40px);
}

.aboutus__sub {
  margin-top: 4%;
  margin-bottom: 0%;
  font-size: clamp(2vw, 4vw + 10px, 60px);
  text-shadow: 1px 1px 4px rgba(255, 255, 255, 1);
  letter-spacing: -5px;
}

@media (max-width: 700px) {
  .aboutus__main__text p {
    top: 13%;
    font-size: 3vw;
  }

  .aboutus__sub {
        font-size: 27px;
        letter-spacing: -4px;
  }

  .aboutus__main {
    margin-top: 120px;
    padding: 0 10px;
  }

}

@media (max-width: 475px) {
  .aboutus__main__text p {
    top: 27%;
  }
}

@media (min-width: 1600px) {
  .aboutus {
    background-position-y: -80px;
  }
}

/* お任せください ここまで */

/* クリニックの特徴 */
.feat {
  background-size: cover;
  background-position: top;
  background-repeat: no-repeat;
  background-image: url(/wp-content/themes/nihon-implant/images/background/background04.png);
  padding: 6% 16px;

  font-family: "Shippori Mincho B1", serif;
  font-weight: 400;
}

.feat__heading {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.feat__heading img {
  max-width: 120px;
  width: 14%;
}

.feat__heading h2 {
  font-size: clamp(2vw, 2vw + 10px, 32px);
  font-weight: 400;
}

.feat__heading h2 span {
  font-size: 44px;
  color: #1394d8;
}

.feat__main {
  padding: 4% 0;
  max-width: 1111px;
  width: 100%;
  margin: auto;

  display: flex;
  flex-direction: column;
  gap: 50px;
}

.feat__item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: white;
}

.feat__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.feat__text {
  padding: 7% 9%;
}

.feat__text h3 {
  font-size: clamp(1vw, 2vw + 10px, 28px);
  color: #1394d8;
}

.feat__text p {
  margin-top: 3%;
  font-size: clamp(1vw, 1vw + 10px, 20px);
  line-height: 1.9;
  text-align: justify;
  /* text-align-last: justify; */
}

.profile .inner {
  display: flex;
  max-width: 1000px;
  margin: 100px auto;
  justify-content: space-between;
}

.profile .inner .l {
  width: 27%;
}

.profile .inner .l img {
  width: 100%;
  border-radius: 20px;
}

.profile .inner .r {
  width: 60%;
}

.profile .inner .r .above {
  display: flex;
  padding: 0;
  margin: 0;
}

.profile .inner .r .above li:nth-child(1) {
  font-size: 20px;
}

.profile .inner .r .above li:nth-child(2) {
  font-size: 36px;
  margin: 0 10px;
  font-family: "Shippori Mincho B1", serif;
  position: relative;
  top: -13px;
}

.profile .inner .r .above li:nth-child(3) {
  color: #3972b7;
  font-size: 22px;
}

.profile .inner .r .above2 {
  padding: 0 0 20px;
  color: #3972b7;
  line-height: 1.8;
  font-family: "Shippori Mincho B1", serif;
  letter-spacing: 0;
  margin: 0;
}

.profile .inner .r h2 {
  background: #4EA2D6;
  font-size: 16px;
  font-weight: initial;
  display: inline-block;
  padding: 8px 20px;
  color: #fff;
  letter-spacing: 1px;
  border-radius: 5px;
  margin-bottom: 30px;
}

.profile .inner .r h2:after {
  content: '';
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 1px 0 18px 20px;
  border-color: transparent transparent transparent #4EA2D6;
  margin-top: 3px;
}

.profile .inner .r>p {
  background: #fff;
  padding: 20px;
  border-radius: 10px;
  font-size: 16px;
  line-height: 1.9;
  font-family: "Shippori Mincho B1", serif;
  letter-spacing: 0;
}

.profile .inner .r>p strong {
	display: block;
    margin-bottom: 5px;
}

.profile_detail {
  background: #fff;
  margin-top: 30px;
  border-radius: 10px;
  padding: 20px;
}

.profile_detail ul {
  padding: 0;
  font-family: "Shippori Mincho B1", serif;
  margin: 10px 0;
  line-height: 1.8;
  font-size: 14px;
}

.profile_detail h3 {
  color: #3972b7;
  font-size: 16px;
  border-bottom: 1px solid;
  display: inline-block;
  font-weight: initial;
}

@media (max-width: 700px) {
  .profile .inner {
    display: block;
    margin: 50px auto;
    padding: 0 20px;
  }

  .profile .inner .l {
    width: 70%;
    margin: 0 auto;
  }

  .profile .inner .r {
    width: 100%;
    margin-top: 20px;
  }

  .profile .inner .r .above {
    display: block;
    text-align: center;
  }

  .profile .inner .r .above li:nth-child(2) {
    font-size: 24px;
    margin: 0 10px;
    top: initial;
  }

  .profile .inner .r .above li:nth-child(3) {
    font-size: 16px;
  }

  .profile .inner .r .above li:nth-child(1) {
    font-size: 18px;
  }

  .profile .inner .r .above2 {
    padding: 20px 20px 30px;
    font-size: 14px;
  }

  .profile .inner .r>p {
    font-size: 14px;
    text-align: justify;
  }

  .profile_detail ul {
    font-size: 12px;
    letter-spacing: 0;
  }

}


.guide {
  margin: 0 auto 3rem;
  padding: 5rem 0 3rem;
}

.guide h2 {
  font-size: 20px;
  margin: 20px 0;
  font-weight: initial;
}

.guide .logo-img img {
  width: 60px;

}

.guide ul {
  padding: 0;
  margin-top: 20px;
  line-height: 1.8;
  font-size: 14px;
}

.guide .inner {
  display: flex;
  max-width: 1200px;
  margin: 0 auto;
  background: #fff;
  padding: 40px;
  border-radius: 30px;
}

.guide .info .side-logo .logo-title img {
  width: 100%;
}

.guide .info {
  margin-right: 6%;
  flex: 1;
}

.guide .google-map {
  margin-top: 5rem;
}

.guide .google-map iframe {
  width: 100%;
  height: 299px;
}

.guide .info .side-logo {
  display: flex;
  align-items: center;
}

.guide .info .side-logo .logo-img {
  margin-right: .6rem;
}

.guide .info .side-logo .logo-title {
  width: 400px;
}

.info .side-tel {
  display: inline-block;
  margin: 1rem 0;
  font-size: 3.8rem;
}

.guide .header__tel__main {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 30px 0 10px;
}

.guide .header__tel__main img {
  width: 50px;
  height: 50px;
}



.guide .info p.info-address span {
  margin-left: 3rem;
}

.guide .hour {
  width: 100%;
  max-width: 504px;
}

.guide .hour table {
  width: 100%;
  margin: 1.6rem 0;
  text-align: center;
  border-collapse: separate;
}

.guide .hour table thead {
  background-color: #ece8d9;
}

.guide .hour table thead,
.guide .hour table tbody {
  line-height: 3;
}

.guide .hour table th:nth-of-type(n+2) {
  width: 9%;
}

.guide .hour table th:first-of-type,
.guide .hour table td:first-of-type {
  text-align: center;
}

.guide .hour table tbody td {
  vertical-align: middle;
  border-bottom: 1px solid #9e9e9e;
}

.guide .hour table tbody td:first-of-type {
  line-height: 1.2;
}

@media screen and (min-width: 896px) {
  .guide .info {
    margin-right: 6%;
    flex: 1;
  }
}

@media screen and (min-width: 480px) {
  .guide .hour table tbody br {
    display: none;
  }
}

@media screen and (max-width: 1122.9px) {
  .guide .info .side-logo .logo-img {
    width: 70px;
  }

  .guide .info .side-logo .logo-title {
    width: 320px;
  }

  .guide .info .side-tel {
    font-size: 3.2rem;
  }

  .guide .info .tel::before {
    width: 3.2rem;
    height: 3.2rem;
  }
}

@media screen and (max-width: 985.9px) {
  .guide .inner {
    flex-direction: column-reverse;
    width: 504px;
  }

  .guide .hour {
    display: flex;
    flex-direction: column;
  }

  .guide .info {
    margin-top: 10rem;
    margin-right: 0;
  }

  .guide .info .side-logo {
    display: block;
    text-align: center;
  }

  .guide .info .side-logo .logo-img {
    width: 100px;
    margin: 0 auto 2rem;
  }

  .guide .info .side-logo .logo-title {
    width: 400px;
    margin: 0 auto;
  }

  .guide .info .side-tel {
    display: block;
    width: 342px;
    font-size: 3.8rem;
    margin: 0 auto 1rem;
  }

  .guide .info .tel::before {
    width: 3.8rem;
    height: 3.8rem;
  }

  .guide .info p.info-address {
    width: 362px;
    margin: 0 auto;
  }

  .guide .google-map {
    margin-top:80px;
  }
}

@media (max-width: 600px) {
  .guide .inner {
    background: #fff;
    padding: 20px 15px 50px;
    border-radius: initial;
    width: 100%;
}

.guide .info p.info-address {
  width: 100%;
  font-size: 12px;
}

.guide ul {
  font-size: 12px;
}

.guide h2 {
  font-size: 16px;
}

.guide .logo-img img {
  display: none;
}

.guide .hour {
  flex-direction: initial;
  flex-wrap: wrap;
}

.guide .info .side-logo .logo-title {
  width: 100%;
}

.guide .info {
  margin-top: 10px;
}

.guide {
  margin: 0;
  padding: 20px 0 40px;
}

  .feat__item {
    grid-template-columns: 1fr;
  }

  .feat__item--reverse {
    display: flex;
    flex-direction: column-reverse;
  }
}

/* クリニックの特徴 ここまで */

/* お問い合わせ */
.contact {
  font-family: "Shippori Mincho B1", serif;
  font-weight: 400;
}

.contact__heading {
  background-size: cover;
  background-position: bottom;
  background-repeat: no-repeat;
  background-image: url(/wp-content/themes/nihon-implant/images/background/background05.png);
  padding-bottom: 4%;
}

.contact__heading__main {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 6% 16px;
  padding-top: 4%;
  text-align: center;
}

.contact__img {
  max-width: 303px;
  width: 20%;
}

.contact__heading__main h2 {
  font-size: clamp(2vw, 4vw + 10px, 60px);
  letter-spacing: -3px;
}

@media (max-width: 600px) {
  .contact__heading__main h2 {
    font-size: 6vw;
    letter-spacing: -3px;
    text-shadow: 1px 5px 5px #fff;
  }

  .contact__heading__main h2 span img {
    position: relative;
    top: -5px;
    left: 5px;
}

  .contact__heading {
    padding-top: 30px;
}

  .contact__main {
    margin-top: 40px;
}

}

.contact__heading__main h2 span {
  color: #1394d8;
}

.contact__heading__main h2 span img {
  max-width: 88px;
  width: 8vw;
}

.contact__main {
  margin-top: 4%;
  padding: 0 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

@media (max-width: 600px) {

  .contact__main {
    margin-top: 40px;
}

}

.contact__main__btn {
  display: inline-block;
  max-width: 543px;
  width: 80%;
  position: relative;
}

.contact__main__btn img {
  width: 100%;
}

.contact__main__btn p {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #e95193;
  font-size: clamp(1vw, 2vw + 10px, 35px);
}

.contact__main__text {
  margin-top: 5%;
  display: inline-block;
  max-width: 710px;
  width: 100%;
  font-size: clamp(1vw, 1vw + 10px, 22px);
}

@media (max-width: 600px) {
.contact__main__text {
  text-align: left;
  letter-spacing: 0;
  margin: 20px 0;
  line-height: 1.8;
}
}

.contact__tel {
  margin-top: 5%;
  max-width: 842px;
  width: 100%;
  background: white;
  border-radius: 50px;
  box-shadow: 1px 4px 20px rgba(0, 0, 0, 0.25);
  padding: 20px;
  position: relative;
  color: #3972b7;
}

.contact__tel .deco {
  position: absolute;
  width: 6%;
}

.contact__tel .deco-2 {
  top: 20px;
  left: 20px;
}

.contact__tel .deco-3 {
  top: 20px;
  right: 20px;
}

.contact__tel .deco-4 {
  bottom: 20px;
  left: 20px;
}

.contact__tel .deco-1 {
  bottom: 20px;
  right: 20px;
}

.contact__tel__logo {
  width: 70%;
}

@media (max-width: 600px) {
.contact__tel__logo {
  width: 100%;
  margin-bottom: 10px;
}


}

.contact__tel__number {
  margin-top: 2%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.contact__tel__number img {
  max-width: 70px;
  margin-top: -38px;
  margin-right: 10px;
}

@media (max-width: 600px) {
  .contact__tel__logo {
    width: 100%;
    margin-bottom: 10px;
  }

  .contact__tel__number img {
    max-width: 40px;
    margin-top: -10px;
    margin-right: 10px;
  }

  }

.contact__tel__number p {
  font-size: clamp(2vw, 4vw + 10px, 65px);
  letter-spacing: 0.1em;
  font-weight: 600;
  display: inline;
}

.contact__tel__sub {
  font-family: "Noto Sans JP", sans-serif;
  margin-top: 1.5%;
  line-height: 1.9;
  font-size: clamp(0.6vw, 0.6vw + 10px, 16px);
}

@media (max-width: 600px) {
  .contact__heading__main {
    padding: 0 5px 50px;

}

  .contact__tel {
    border-radius: 10px;
    padding: 15px;
  }



  .contact__tel .deco {
    display: none;
  }
}

/* お問い合わせ ここまで */

/* フォーム */
.form {
  margin-top: 6%;
  font-family: "Shippori Mincho B1", serif;
  font-weight: 400;
}

.form__heading {
  background: #e95193;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 32px;
  text-align: center;
  padding: 21px 16px;
}

.form__heading h2 {
  font-size: clamp(1vw, 2vw + 10px, 30px);
}

.form__heading img {
  width: 6%;
  max-width: 52px;
}

.form__heading .rotate {
  transform: scale(-1, 1);
}

.form__cap {
  margin-top: 5%;
  text-align: center;
  font-size: clamp(1vw, 1vw + 10px, 22px);
}

.form__main {
  padding: 2% 16px;
  max-width: 925px;
  width: 100%;
  margin: auto;
}

.form__item {
  width: 100%;
  font-family: "Noto Sans JP", sans-serif;
	margin-top: 40px;
		  display: flex;

}


.form__item label {
  margin-top: 20px;
  width: 272px;
}

.form__item input,
textarea {
  flex: 1;
  padding: 16px;
  border: none;
  font-size: 16px;
  border-radius: 10px;
  box-shadow: 1px 4px 20px rgba(0, 0, 0, 0.25);
}

.form__btn-wrapper {
  margin-top: 10%;
  width: 100%;
  text-align: center;
}

.form__btn {
  max-width: 432px;
  width: 100%;
  height: 76px;
  background: #ffb259;
  box-shadow: 1px 4px 20px rgba(0, 0, 0, 0.25);
  border-radius: 30px;
  position: relative;
  border: none;
}

.form__btn p {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 28px;
  font-weight: bold;
  color: white;
}



@media (max-width: 600px) {
  .form__cap {
    padding: 20px 10px 0;
    line-height: 1.8;
    letter-spacing: -1px;
    font-size: 3.9vw;
	  text-align: justify;
  }

  .form__cap br {
	  display: none;
  }

  .form__heading h2 span {
    display: block;
  }

  .form__heading h2 {
    font-size: 5.3vw;
}

.form__heading h2 br {
  display: none;
}

  .form__btn p {
    font-size: 20px;
    letter-spacing: 1px;
  }

  .form__btn {
    width: 90%;
    height: 65px;
}

  .form__item {
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
  }
}

/* フォーム ここまで */

/* フッター */
.footer__inner {
  margin-top: 5%;
  margin-bottom: 34px;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 32px;
}

@media (max-width: 600px) {

.footer__inner {
  gap: 20px;
  padding: 0;
  margin-bottom: 70px;
  font-size: 14px;
}

.form__main {
  padding: 2% 16px 30px;
}

.guide .hour table tbody td:first-of-type {
  line-height: 1.2;
  text-align: left;
  font-size: 15px;
  letter-spacing: -1px;
}

.guide .hour table tbody td:first-of-type br {
  display: none;
}

}

.footer__inner a {
  color: #ffb259;
  font-weight: bold;
}

/* スクロールアニメーション */
.js-opacity.show {
  opacity: 1;
  transition: opacity 1.4s;
}

.js-opacity {
  opacity: 0;
}




/*--------------- FOOTER_START --------------*/



.back-to-top-hp{position:fixed; right:20px; bottom:20px; z-index:99; display:none; width:88px; height:88px; line-height:88px; text-align:center;}
.back-to-top-hp a{display:block; width:100%; height:100%; border-radius:0px;}
.back-to-top-hp img{width:100%;}
#footer {
	 padding: 60px 15px;
    position: relative;
    background: #fff;
    margin: 50px 0;
}


.footer_top_hp{
	max-width: 1200px;
    margin: 0 auto;
}
.footer_top_in_hp{}
.footer_top_middle_hp{ display:flex; }
.footer_top_middle_left_hp{ width:50%; padding-right:25px; }
.footer_top_middle_right_hp{ width:50%; padding:0 20px; }
.footer_map_hp{}
.footer_map_hp iframe{ height:345px; width:100%; display:flex; }
.footer_map_location_hp{ font-size:14px; line-height:18px; color:#565656; font-weight:400; padding:15px 0 0 0; }
.footer_map_location_hp img{ margin-right:5px; position: relative; vertical-align: middle; margin-top: -2px; }
.footer_map_btns_hp{ padding:12px 0 0 0; display:flex; }
.footer_map_btns_left_hp{ width: 50%; margin-right: 17px; background: #AE9F80; border-radius: 10px; padding: 10px; min-height: 80px; display: flex; justify-content: center; flex-direction: column; text-align: center; font-size: 14px; line-height: 18px; color: #fff; }
.footer_map_btns_left_hp span{ font-size: 20px; line-height: 20px; padding-top: 8px; }
.footer_map_btns_left_hp:last-child{ margin-right:0; }
.footer_logo_hp{ text-align:center; }
.footer_logo_hp img{ max-width:100%; width: 80%; }
.footer_phone_hp{ padding:50px 0 0 0; text-align:center; }
.footer_phone_hp p{ font-size:18px; line-height:24px; color:#565656; }
.footer_phone_hp h3{ padding:8px 0 0 0; font-size:36px; line-height:46px; color:#988969; font-weight: 600; }
.footer_phone_hp h3 img{ margin-right:8px; width:28px; position: relative; vertical-align: middle; margin-top: -8px; }
.footer_btns_hp{ padding:27px 0 0 0; display:flex; align-items:center; }
.footer_green_btn_hp{ width:50%; margin-right:6px; }
.footer_green_btn_hp .flow_green_info_hp p{ font-size:18px; }
.footer_green_btn_hp .flow_green_info_hp p img { margin-right: 10px; }
.footer_green_btn_hp:after{ top: 5px; right: 5px; }
.footer_white_btn_hp{ width:50%; margin-left:6px; }
.footer_table_hp{ padding-top:50px; }
.footer_table_text_hp{ font-size:14px; line-height:18px; color:#565656; font-weight:400; text-align:right; padding-top:7px; }
.footer_table_top_row_hp{
border-bottom: 5px solid #fff;
    display: flex;
    align-items: center;
    max-width: 450px;
    margin: 0 auto;
	background: rgba(136, 118, 96, 0.05);
	padding: 10px;
}

.footer_table_top_row_hp:last-child {
	    border-bottom: initial;
}


.footer_table_top_title_hp{ width:200px; text-align:center; font-size:18px; line-height:24px; color:#886D4C; padding:8px 4px; }
.footer_table_top_info_hp{ width:25%; text-align:center; font-size:16px; line-height:22px; color:#886D4C; padding:10px 4px; border-left:1px solid #707070;  }
.footer_menu_hp{ padding:64px 0 0 0; }
.footer_menu_hp ul{ display:flex; flex-wrap:wrap; align-items:center; justify-content: center; }
.footer_menu_hp ul li{ padding:0 27px; }
.footer_menu_hp ul li a{ font-size:14px; line-height:22px; color:#565656; font-weight:400; }
.footer_menu_hp ul li a:hover{ color:#000; }
.copyright_hp{ font-size:12px; line-height:22px; color:#565656; font-weight:400; padding:54px 0 0 0; }


.flow_right_hp{width:calc(100% - 130px);}
.flow_right_btn_hp{display:flex; padding:70px 0 64px 0;}
.flow_green_btn_hp{background:rgb(136,190,136); background:linear-gradient(90deg, rgba(136,190,136,1) 0%, rgba(109,159,109,1) 100%); padding:15px 0; width:218px; justify-content:center; align-items:center; display:flex;position:relative;}
.flow_green_btn_hp:after{position:absolute; content:''; top:2px; right:2px; width:12px; height:12px; background:url(../images/Subtraction%203.svg) no-repeat top right;}
.flow_green_info_hp{}
.flow_green_info_hp h3{font-size:24px; line-height:32px; color:#FFFFFF; font-family:'Marcellus'; padding-bottom:5px;}
.flow_green_info_hp h3 span{font-size:22px;}
.flow_green_info_hp p{font-size:14px; line-height:28px; color:#FFFFFF;}
.flow_green_info_hp p img{ margin-right:6px; }

.flow_white_btn_hp{margin-left:39px; position:relative; width:209px; text-align:center; }
.flow_white_btn_hp:after{position:absolute; content:''; top:2px; right:2px; width:12px; height:12px; background:url(../images/Subtraction%202.svg) no-repeat top right;}
.flow_white_btn_hp a p{font-size:22px; line-height:32px; color:#988969; font-weight:600; border:1.5px solid #988969; padding:21px 0;}
.flow_white_btn_hp a p img{ margin-right:6px; }

.common_btn_hp{font-size:18px; background:#FFFFFF; line-height:17px; color:#AE9F80; font-weight:600; border:1.5px solid #988969; padding:20px 0; display:inline-block; min-width:260px; margin:auto; position:relative; text-align:center;}
.common_btn_hp:after{position:absolute; content:''; top:3px; right:2px; width:10px; height:10px; background:url(../images/button_arrow.svg) no-repeat top right;}
.common_btn_hp:hover{ opacity:0.7; color:#AE9F80; }

/*--------------- FOOTER_END --------------*/


@media (max-width: 600px) {

/*--------------- FOOTER_START --------------*/
#footer {
	        padding: 0px 15px 24px;
}
.footer_top_middle_hp { display: block; }
.footer_top_middle_left_hp { width: 100%; padding-right: 0; }
.footer_top_middle_right_hp { width: 100%; padding: 30px 0 0 0; }
.footer_phone_hp { padding: 40px 0 0 0; }
.footer_phone_hp p { font-size: 15px; line-height: 20px;  }
.footer_phone_hp h3 { font-size: 26px; line-height: 36px; }
.footer_phone_hp h3 img{ width:20px; }
.footer_green_btn_hp { width: 50% !important; margin-right: 6px; padding: 10px 0; }
.footer_green_btn_hp .flow_green_info_hp p { font-size: 14px; }
.footer_white_btn_hp a{ font-size: 14px; min-width:100%; }
.footer_table_hp { padding-top: 30px; }
.footer_table_top_title_hp { width: 106px; font-size: 14px; line-height: 1.3; }
.footer_table_top_info_hp { font-size: 11px; line-height: 22px; }
.footer_map_btns_left_hp { font-size: 14px; line-height: 16px; color: #fff;  }
.footer_map_btns_left_hp span { font-size: 13px; line-height: 16px; }
.footer_menu_hp { padding: 40px 0 0 0; }
.footer_menu_hp ul li { padding: 0 15px; }
.copyright_hp { padding: 20px 0 0 0; text-align: center; }
.back-to-top-hp { right: 10px; bottom: 10px; width: 68px; height: 68px; line-height: 68px; }

.footer_table_top_row_hp {
    padding: 5px;
}

/*--------------- FOOTER_END --------------*/

}