@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500&family=Shippori+Mincho:wght@400;600&display=swap");
/* くりの木歯科用
$theme-color:#222;
$theme-color-main:#666;
$theme-color-sub:#ddd;
$theme-color-bg:rgba(66,66,66,0.54);
$theme-color-reverse:#333;
*/
/*========= LoadingのためのCSS ===============*/
/* Loading背景画面設定　*/
#splash {
  /*fixedで全面に固定*/
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 999;
  text-align: center;
  color: #fff; }

/* Loading画像中央配置　*/
#splash_text {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 999;
  transform: translate(-50%, -50%);
  color: #fff;
  width: 100%; }

/*IE11対策用バーの線の高さ※対応しなければ削除してください*/
#splash_text svg {
  height: 2px; }

/*割れる画面のアニメーション*/
.loader_cover {
  width: 100%;
  height: 50%;
  background-color: #333;
  transition: all 2s cubic-bezier(0.04, 0.435, 0.315, 0.9);
  transform: scaleY(1); }

/*上の画面*/
.loader_cover-up {
  transform-origin: center top; }

/*下の画面*/
.loader_cover-down {
  position: absolute;
  bottom: 0;
  transform-origin: center bottom; }

/*クラス名がついたらY軸方向に0*/
.coveranime {
  transform: scaleY(0); }

header {
  position: relative;
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.3); }

/*==================================================
スライダーのためのcss
===================================*/
.slider {
  position: relative;
  z-index: 1;
  opacity: 0.5; }

/*　背景画像設定　*/
.slider-item01 {
  background: url("../images/index/bg_1.jpg"); }

.slider-item02 {
  background: url("../images/index/bg_2.jpg"); }

.slider-item03 {
  background: url("../images/index/bg_3.jpg"); }

.slider-item04 {
  background: url("../images/index/bg_4.jpg"); }

.slider-item05 {
  background: url("../images/index/bg_5.jpg"); }

.slider-item06 {
  background: url("../images/index/bg_6.jpg"); }

.slider-item {
  width: 100%;
  height: 100vh;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover; }

/*矢印の設定*/
/*戻る、次へ矢印の位置*/
.slick-prev,
.slick-next {
  position: absolute;
  /*絶対配置にする*/
  z-index: 3;
  top: 42%;
  cursor: pointer;
  /*マウスカーソルを指マークに*/
  outline: none;
  /*クリックをしたら出てくる枠線を消す*/
  border-top: 2px solid #ccc;
  /*矢印の色*/
  border-right: 2px solid #ccc;
  /*矢印の色*/
  height: 25px;
  width: 25px; }

.slick-prev {
  /*戻る矢印の位置と形状*/
  left: 2.5%;
  transform: rotate(-135deg); }

.slick-next {
  /*次へ矢印の位置と形状*/
  right: 2.5%;
  transform: rotate(45deg); }

/*ドットナビゲーションの設定*/
.slick-dots {
  position: relative;
  z-index: 3;
  text-align: center;
  margin: -50px 0 0 0; }

.slick-dots li {
  display: inline-block;
  margin: 0 5px; }

.slick-dots button {
  color: transparent;
  outline: none;
  width: 8px;
  /*ドットボタンのサイズ*/
  height: 8px;
  /*ドットボタンのサイズ*/
  display: block;
  border-radius: 50%;
  background: #ccc;
  /*ドットボタンの色*/ }

.slick-dots .slick-active button {
  background: #333;
  /*ドットボタンの現在地表示の色*/ }

/*--------------------------
		1st イメージ
---------------------------*/
.mainImage-01 {
  position: relative;
  height: 100vh; }
  .mainImage-01 .webTitle {
    position: absolute;
    z-index: 2;
    top: 38%;
    left: 50%;
    transform: translate(-50%, -45%);
    width: 100%; }
    .mainImage-01 .webTitle img.upper {
      display: block;
      width: 40%;
      max-width: 500px;
      margin: 0 auto 1vh;
      text-align: center; }
    .mainImage-01 .webTitle h1 {
      display: block;
      width: 80%;
      max-width: 900px;
      margin: 0 auto;
      text-align: center; }
      .mainImage-01 .webTitle h1 img {
        width: 100%; }
  .mainImage-01 .since {
    margin: 2vh auto 0; }
    .mainImage-01 .since img {
      display: block;
      width: 80%;
      max-width: 600px;
      margin: 0 auto; }
    .mainImage-01 .since p {
      font-size: 80%;
      line-height: 160%;
      text-align: center; }
  .mainImage-01 ul.slider {
    margin: 0;
    padding: 0;
    height: 100vh;
    list-style: none; }

@media (min-width: 414px) {
  .mainImage-01 .webTitle {
    top: 45%; }
  .mainImage-01 .since {
    margin: 3vh auto 0; }
    .mainImage-01 .since p {
      font-size: 90%; } }
@media (min-width: 576px) {
  .mainImage-01 .webTitle img {
    width: 65%; }
  .mainImage-01 .since {
    margin: 5vh auto 0; } }
@media (min-width: 992px) {
  .mainImage-01 .webTitle {
    top: 52%;
    transform: translate(-50%, -50%); }
    .mainImage-01 .webTitle img.upper {
      max-width: 350px; }
  .mainImage-01 .since p {
    font-size: 100%; } }
/*---------------------------------------------
親メニュー ( header > div.mainImage > nav.dropMenu )
----------------------------------------------*/
.dropMenu {
  margin-top: 4vh; }
  .dropMenu > ul {
    display: flex;
    flex-wrap: wrap;
    width: 85%;
    margin: 0 auto;
    padding: 0 20px 20px;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 10px;
    list-style-type: none; }
    .dropMenu > ul > li {
      flex: 1 1 50%;
      height: 18vh;
      position: relative;
      margin-top: 20px; }
      .dropMenu > ul > li + li:nth-child(odd) {
        border-left: none;
        text-align: left; }
      .dropMenu > ul > li + li:nth-child(even) {
        border-left: solid 1px #666;
        text-align: right; }
      .dropMenu > ul > li > a {
        display: block;
        padding: 0 0 7px 0;
        color: #333;
        font-family: "Noto Sans JP", sans-serif;
        font-size: 130%;
        font-weight: bold;
        text-decoration: none; }
        .dropMenu > ul > li > a span {
          display: none; }
      .dropMenu > ul > li > a:hover {
        color: #333; }

@media (min-width: 375px) {
  .dropMenu > ul > li a {
    padding: 0 0 10px 0; } }
@media (min-width: 414px) {
  .dropMenu {
    margin-top: 3vh; }
    .dropMenu > ul > li {
      height: 18vh; } }
@media (min-width: 576px) {
  .dropMenu {
    margin-top: 4vh; }
    .dropMenu > ul {
      width: 65%; }
      .dropMenu > ul > li a {
        font-size: 130%;
        padding: 15px 0; } }
@media (min-width: 768px) {
  .dropMenu {
    margin-top: 5vh; }
    .dropMenu > ul {
      width: 90%; }
      .dropMenu > ul > li {
        flex: 1 1 0;
        height: 23vh; }
        .dropMenu > ul > li + li:nth-child(3) {
          border-left: solid 1px #666; }
        .dropMenu > ul > li a {
          text-align: center;
          font-size: 140%;
          padding: 12px 0; }
          .dropMenu > ul > li a span {
            display: inline; } }
@media (min-width: 992px) {
  .dropMenu > ul {
    max-width: 1100px;
    margin-top: 30px; }
    .dropMenu > ul > li {
      height: 25vh; }
      .dropMenu > ul > li a {
        font-size: 160%;
        padding: 14px 0; } }
/*----------------------------------------------------
	子メニュー ( header > div.mainImage > nav.dropMenu )
-----------------------------------------------------*/
.dropMenu > ul li > ul {
  display: none;
  position: absolute;
  left: 0;
  width: 100%;
  white-space: nowrap;
  animation: fadeIn;
  animation-duration: 1.0s; }
  .dropMenu > ul li > ul > li a {
    display: block;
    padding: 3px 0;
    color: #874040;
    font-size: 100%;
    text-decoration: none;
    background-color: rgba(255, 255, 255, 0);
    border: 0px solid #fff;
    border-radius: 7px;
    transition: 0.5s; }
    .dropMenu > ul li > ul > li a i {
      display: none;
      margin-right: 10px; }
  .dropMenu > ul li > ul > li a:hover {
    color: #fff;
    background-color: rgba(66, 66, 66, 0.3); }
.dropMenu > ul li:hover > ul {
  display: block; }

@media (min-width: 360px) {
  .dropMenu ul li > ul li a {
    padding: 4px 0; } }
@media (min-width: 360px) and (min-height: 812px) {
  .dropMenu ul li > ul li a {
    padding: 6px 0;
    font-size: 120%; } }
@media (min-width: 414px) {
  .dropMenu ul li > ul li a {
    padding: 6px 0; } }
@media (min-width: 428px) and (min-height: 926px) {
  .dropMenu ul li > ul li a {
    padding: 8px 0;
    font-size: 120%; } }
@media (min-width: 576px) {
  .dropMenu ul li > ul li a {
    font-size: 120%; } }
@media (min-width: 768px) {
  .dropMenu ul li > ul li a {
    margin: 0 10px;
    padding: 14px 0 14px 2vw;
    text-align: left; }
    .dropMenu ul li > ul li a i {
      display: inline; } }
@media (min-width: 992px) {
  .dropMenu ul li > ul li a {
    padding: 1vh 0;
    text-align: center;
    font-size: 110%; } }
/*=======================
	2nd イメージ
========================= */
.mainImage-02 {
  position: relative;
  height: 100vh; }
  .mainImage-02 .wrapper {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    width: 100%;
    transform: translate(-50%, -50%); }
    .mainImage-02 .wrapper > h2 {
      display: block;
      width: 50%;
      max-width: 320px;
      margin: 0 auto 2vh;
      text-align: center; }
      .mainImage-02 .wrapper > h2 img {
        width: 100%; }
    .mainImage-02 .wrapper .row {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      width: 95%;
      margin: 0 auto;
      max-width: 700px; }
      .mainImage-02 .wrapper .row > .col {
        flex: 0 0 48%; }
        .mainImage-02 .wrapper .row > .col .inboxA {
          background: url("../images/index/btn_01.jpg"); }
        .mainImage-02 .wrapper .row > .col .inboxB {
          background: url("../images/index/btn_02.jpg"); }
        .mainImage-02 .wrapper .row > .col .inboxC {
          background: url("../images/index/btn_03.jpg"); }
        .mainImage-02 .wrapper .row > .col .inboxD {
          background: url("../images/index/btn_04.jpg"); }
        .mainImage-02 .wrapper .row > .col .inboxE {
          background: url("../images/index/btn_05.jpg"); }
        .mainImage-02 .wrapper .row > .col .inboxF {
          background: url("../images/index/btn_06.jpg"); }
        .mainImage-02 .wrapper .row > .col [class*="inbox"] {
          display: flex;
          position: relative;
          align-items: center;
          width: 100%;
          height: 25vh;
          margin: 10px 0;
          color: #333;
          background-position: center center;
          background-repeat: no-repeat;
          background-size: cover;
          border-radius: 4px;
          box-shadow: 1px 1px 10px 5px rgba(255, 255, 255, 0.4); }
          .mainImage-02 .wrapper .row > .col [class*="inbox"] p {
            width: 100%;
            font-size: 100%;
            text-align: center; }
          .mainImage-02 .wrapper .row > .col [class*="inbox"] a {
            display: block;
            position: absolute;
            bottom: 5%;
            left: 10%;
            width: 80%;
            margin: 0 auto;
            color: #fff;
            line-height: 140%;
            font-size: 80%;
            text-align: center;
            background-color: #874040;
            border-radius: 4px;
            box-shadow: 0px 0px 3px 1px #fff; }
            .mainImage-02 .wrapper .row > .col [class*="inbox"] a span.u {
              display: block;
              font-size: 70%;
              line-height: 120%; }
          .mainImage-02 .wrapper .row > .col [class*="inbox"] a:hover {
            background-color: #874040; }
          .mainImage-02 .wrapper .row > .col [class*="inbox"] i {
            display: block;
            line-height: 110%; }
  .mainImage-02 ul.slider {
    margin: 0;
    padding: 0;
    height: 100vh;
    list-style: none; }

@media (min-width: 414px) {
  .mainImage-02 .wrapper .row > .col [class*="inbox"] a {
    font-size: 100%; } }
@media (min-width: 576px) {
  .mainImage-02 .wrapper .row > .col [class*="inbox"] a {
    width: 70%;
    font-size: 120%; } }
@media (min-width: 768px) {
  .mainImage-02 .wrapper .row > .col [class*="inbox"] a {
    width: 80%;
    font-size: 130%; } }
@media (min-width: 992px) {
  .mainImage-02 {
    background-image: url("../images/index/bg_1_tr.jpg");
    background-attachment: fixed;
    background-position: center center;
    background-size: cover; }
    .mainImage-02 .wrapper .row {
      justify-content: space-around;
      max-width: 1200px; }
      .mainImage-02 .wrapper .row > .col {
        flex: 0 0 31%; }
        .mainImage-02 .wrapper .row > .col [class*="inbox"] {
          height: 30vh; }
          .mainImage-02 .wrapper .row > .col [class*="inbox"] a {
            font-size: 160%; } }
/*=======================
	3rd イメージ
========================= */
.mainImage-03 {
  position: relative;
  height: 174vh; }
  .mainImage-03 .row {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    z-index: 2;
    width: 100%;
    max-width: 700px; }
    .mainImage-03 .row > .col {
      padding: 2.5vh 3% 0; }
      .mainImage-03 .row > .col [class*="inbox"] {
        width: 100%;
        margin: 0 auto;
        height: 38vh;
        color: #333;
        background-color: rgba(255, 255, 255, 0.9);
        border-radius: 7px; }
        .mainImage-03 .row > .col [class*="inbox"] h2 {
          margin: 0 20px 20px;
          padding: 10px 0px 10px 20px;
          font-size: 100%;
          border-left: solid 12px #874040;
          border-bottom: dashed 1px #874040; }
          .mainImage-03 .row > .col [class*="inbox"] h2 [class*="fa-"] {
            color: #333; }
          .mainImage-03 .row > .col [class*="inbox"] h2 > span {
            font-size: 70%; }
        .mainImage-03 .row > .col [class*="inbox"] p {
          width: 100%;
          text-align: center; }
        .mainImage-03 .row > .col [class*="inbox"] ul {
          width: 100%;
          padding-left: 20px; }
          .mainImage-03 .row > .col [class*="inbox"] ul li {
            font-size: 80%;
            line-height: 200%; }
          .mainImage-03 .row > .col [class*="inbox"] ul li:before {
            content: "▷ ";
            color: #333; }
        .mainImage-03 .row > .col [class*="inbox"] iframe {
          border: 0px;
          border-radius: 7px;
          width: 100%;
          height: 100%; }
      .mainImage-03 .row > .col .inboxA {
        padding-top: 0px; }
  .mainImage-03 ul.slider {
    margin: 0;
    padding: 0;
    list-style: none; }
    .mainImage-03 ul.slider .slider-item {
      height: 174vh; }

@media (min-width: 360px) {
  .mainImage-03 .row > .col [class*="inbox"] h2 {
    font-size: 110%; }
    .mainImage-03 .row > .col [class*="inbox"] h2 > span {
      font-size: 75%; } }
@media (min-width: 414px) {
  .mainImage-03 .row > .col [class*="inbox"] h2 {
    font-size: 120%; }
    .mainImage-03 .row > .col [class*="inbox"] h2 > span {
      font-size: 80%; }
  .mainImage-03 .row > .col [class*="inbox"] ul li {
    font-size: 100%; } }
@media (min-width: 768px) {
  .mainImage-03 {
    height: 100vh; }
    .mainImage-03 .row {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between; }
      .mainImage-03 .row > .col {
        flex: 0 0 47%;
        margin: 20px 0;
        padding: 0; }
        .mainImage-03 .row > .col [class*="inbox"] h2 {
          font-size: 150%; }
        .mainImage-03 .row > .col [class*="inbox"] ul {
          padding: 20px; }
          .mainImage-03 .row > .col [class*="inbox"] ul li {
            font-size: 90%; }
    .mainImage-03 ul.slider .slider-item {
      height: 100vh; } }
@media (min-width: 992px) {
  .mainImage-03 {
    background-image: url("../images/index/bg_5_tr.jpg");
    background-attachment: fixed;
    background-position: center center;
    background-size: cover; }
    .mainImage-03 .row {
      max-width: 1200px;
      margin: auto;
      width: 100%; }
      .mainImage-03 .row > .col [class*="inbox"] h2 {
        font-size: 150%; }
      .mainImage-03 .row > .col [class*="inbox"] ul {
        padding: 20px; }
        .mainImage-03 .row > .col [class*="inbox"] ul li {
          padding-left: 20px;
          font-size: 100%;
          line-height: 300%; } }
body::before {
  background-image: none; }

.slick-dots li {
  display: none; }

.container {
  display: none; }

.hosoku {
  margin-top: 1em;
  text-align: center; }

.footer {
  clear: both; }

@media (min-width: 1152px) {
  .slider-item {
    background-attachment: fixed; } }