@charset "UTF-8";

/* --------------------------------
 * base
 * -------------------------------- */
* {
  box-sizing: border-box;
}

body {
    font-family: "BIZ UDPGothic", "Segoe UI", Meiryo, sans-serif;
    font-feature-settings: "palt";
    font-weight: 400;
}
body,
a,
.table {
  color: #666;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  letter-spacing: 0.15rem;
}

.text-blue {
  color: #6b90db !important;
}

.bg-blue,
.thead-blue,
.badge-primary {
  background-color: #6b90db !important;
}

.bg-lightblue {
  background-color: #ecf7fb !important;
}

.bg-pink {
  background-color: #DB8F81 !important;
}

.border-blue {
  border-color: #B2C2E1 !important;
}

.border-top {
  border-width: 2px !important;
}

p {
  line-height: 1.6rem;
}

/* --------------------------------------------------
    ファーストビュー
-------------------------------------------------- */
.header {
  height: 470px;
}

.header .jumbotron {
  background-image: url("../img/main-img.jpg");
  background-size: cover;
  background-position: center top;
  position: relative;
  height: 380px;
  margin-bottom: 0;
  /* background-attachment: fixed; */
}

.recruit .jumbotron {
  background-image: url("../img/wall-img02.jpg");
  background-size: cover;
  background-position: center bottom;
  position: relative;
  height: 380px;
  margin-bottom: 0;
  /* background-attachment: fixed; */
}

.under-layer {
  height: 463px;
}

.under-layer .jumbotron {
  background-image: url("../img/product-img.jpg");
  background-size: cover;
  background-position: center top;
  position: relative;
  height: 380px;
  margin-bottom: 0;
  /* background-attachment: fixed; */
}


/* nav
-------------------------------------------------- */
nav.fixed {
  position: fixed;
  top: 0;
  z-index: 999;
  width: 100%;
}

/*    キービジュアル
-------------------------------------------------- */
/*下層ページ*/
/*
.under-layer .jumbotron {
  background-image: url("../img/product-img.jpg");
  background-size: cover;
  background-position: center top;
  margin-bottom: 0;
}
*/
/* --------------------------------------------------
    メイン
-------------------------------------------------- */

/*    トップページ
-------------------------------------------------- */
.tokucho h3 span {
  font-family: 'Libre Caslon Text', serif;
  margin-right: 1rem;
  border-bottom: 5px solid #B9DBFF;
}

/*    院内紹介
-------------------------------------------------- */
figcaption {
  padding-left: 0.4rem;
  border-left: 5px solid #6E85B7;
}

/* --------------------------------------------------
    サンプルページ
-------------------------------------------------- */

/*   チャート
-------------------------------------------------- */
.flow > li .flow-icon {
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  line-height: 50px;
  width: 50px;
  color: #fff;
  background-color: #6E85B7;
  margin: 0 auto 20px;
  display: block;
  text-align: center;
  position: relative;
  letter-spacing: 2px;
}

.flow > li .flow-icon::before {
  content: "";
  border: solid transparent;
  border-width: 8px;
  border-top-color: #6E85B7;
  position: absolute;
  top: calc(100% - .2rem);
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

/* --------------------------------------------------
    お問い合せページ
-------------------------------------------------- */
/*WEBでのご予約・お問合せ*/




/* --------------------------------------------------
    オリジナル
-------------------------------------------------- */

.bg-blue-001 {background-color:#6E85B7;}
.bg-blue-002 {background-color:#B2C8DF;}
.bg-blue-003 {background-color:#C4D7E0;}

.text-blue-001 {color:#6E85B7;}


.bg-yellow-001 {background-color:#F8F9D7;}
.bg-yellow-002 {background-color:#FAAB78;}


.bg-gray-001 {background-color:#eceeef;}
.bg-gray-002 {background-color:#374047;}


.border-gray-002 {
  border-color: #374047 !important;
}



.bg1 {background-color:#e7ecef;}
.bg2 {background-color:#274c77;}
.bg3 {background-color:#6096ba;}
.bg4 {background-color:#a3cef1;}
.tex1 {color:#e7ecef;}
.tex2 {color:#274c77;}
.tex3 {color:#6096ba;}
.tex4 {color:#a3cef1;}
.primary-500-txt {color:#0CA6F2;}


    /* Primary: Fresh Blue of Bel Air */
    .primary-100 {background-color:#F2F8FF;}
    .primary-200 {background-color:#B9DBFF;}
    .primary-300 {background-color:#7FC4FD;}
    .primary-400 {background-color:#45B3FA;}
    .primary-500 {background-color:#0CA6F2;}
    .primary-600 {background-color:#048CBF;}
    .primary-700 {background-color:#016E8C;}
    .primary-800 {background-color:#004B59;}
    .primary-900 {background-color:#002226;}

    /* Accent: Major Magenta */
    .accent-100 {background-color:#FFF2F8;}
    .accent-200 {background-color:#FFC9E3;}
    .accent-300 {background-color:#FC9ED2;}
    .accent-400 {background-color:#F672C3;}
    .accent-500 {background-color:#EB46B4;}
    .accent-600 {background-color:#BA2290;}
    .accent-700 {background-color:#88116F;}
    .accent-800 {background-color:#57094B;}
    .accent-900 {background-color:#260423;}

    /* Neutral */
    .neutral-100 {background-color:#FAFBFC;}
    .neutral-200 {background-color:#E7E9ED;}
    .neutral-300 {background-color:#D4D8DD;}
    .neutral-400 {background-color:#C1C8CD;}
    .neutral-500 {background-color:#AFB8BD;}
    .neutral-600 {background-color:#8B9497;}
    .neutral-700 {background-color:#686F71;}
    .neutral-800 {background-color:#454B4C;}
    .neutral-900 {background-color:#222626;}
    
/* 右斜め */
.bg_skew_border{
  background-color: #f5f6f7;
  background-image:
  repeating-linear-gradient(-45deg,
  #FAFBFC, #FAFBFC 3px,
  transparent 0, transparent 5px);
  border-bottom: #2d8fd5 2px solid;
}


.box01 {
  clip-path: polygon(8% 1%, 100% 0%, 92% 100%, 0% 100%);
  border: solid 0px #D4D8DD;
}

/* 右下角丸 */
.box02 {
  clip-path: polygon(93% 0, 100% 12%, 100% 100%, 0 100%, 0 0);
  border: solid 0px #D4D8DD;
}

.circle1 {
  clip-path: polygon(0% 0%, 80% 0%, 100% 50%, 80% 100%, 0% 100%);
}

.circle2 {
  clip-path: polygon(20% 0%, 100% 0%, 100% 100%, 20% 100%, 0% 50%);
}


/* opacityFadeIn */
.opacityFadeIn {
    opacity: 0;
}

.opacityFadeIn.active {
    opacity: 1;
    animation: opacityFadeIn 0.8s ease 0s 1 normal;
}

@keyframes opacityFadeIn {
  0% {
    opacity: 0;
    transform: translateY(60px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}




    .text__slideIn {
      animation: slideIn 1.2s 1;
    }
    @keyframes slideIn {
      0% {
        opacity: 0;
        transform: translateX(100px);
      }
      100% {
        opacity: 1;
        transform: translateX(0);
      }
    }


.marquee {
max-width:900px;
margin:0 auto;
padding-bottom:3px;
overflow:hidden;
background-color:rgba(0,0,0,0.03);
border-left: #ddd 8px solid;
border-right: #ddd 8px solid;
position:relative;
letter-spacing:0.2rem;
}

.marquee p:after {
content:"";
white-space:nowrap;
padding-right:50px;
}

.marquee p {
margin:0;
padding-left:900px;
display:inline-block;
white-space:nowrap;
	animation-name:marquee;
	animation-timing-function:linear;
	animation-duration:20s;
	animation-iteration-count:infinite;
}
@keyframes marquee {
  from   { transform: translate(0%);}
  99%,to { transform: translate(-100%);}
}


.inImg {
  position: relative;
  }

.inImg p {
  position: absolute;
  top: 10px;/*画像の左上に配置*/
  left: 0;
  margin: 0; /*余計な隙間を除く*/
  color: white;/*文字を白に*/
  background: rgba(110,133,183,0.8);/*背景色*/
  font-size: 0.8rem;
  line-height: 1;/*行高は1に*/
  padding: 5px 14px;/*文字周りの余白*/
  }

h2.str1 {
  position: relative;
}

h2.str1:after {
  position: absolute;
  top:90%;

    left: 50%;
    transform: translate(-50%, -50%);

  width: 220px;
  height: 10px;
  content: '';
  background-image: repeating-linear-gradient(-45deg, #ccc, #ccc 2px, transparent 2px, transparent 5px);
  background-size: 7px 7px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.under {
  background: linear-gradient(transparent 70%, #c2e0ff 30%);
  margin:0 0.1em;
  padding:0 0.3em;
}

/* bootstrap上書き */
.dropdown-menu {
  border:0;
  background-color:rgba(255,255,255,0.9);
  box-shadow: 0px 0px 15px -5px #777;
}

.wf-penta {
  clip-path: polygon(0% 0%, 100% 0%, 100% 85%, 50% 100%, 0% 85%);
}

.text-1{
    text-shadow: 0 0 15px rgba(255,255,255,0.6);
}

.bg-img1 {
  position: relative;
  background-image: url('../img/main-img.jpg');
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
}

.bg-img2 {
  position: relative;
  background-image: url('../img/wall-1.jpg');
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
}

.bg-img3 {
  position: relative;
  background-image: url('../img/wall-2.jpg');
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
}

.bg-img4 {
  position: relative;
  background-image: url('../img/wall-3.jpg');
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
}

.bg-img5 {
  position: relative;
  background-image: url('../img/wall-4.jpg');
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
}

.bg-img6 {
  position: relative;
  background-image: url('../img/wall-5.jpg');
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
}

.bg-img7 {
  position: relative;
  background-image: url('../img/wall-6.jpg');
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
}

.bg-img8 {
  position: relative;
  background-image: url('../img/wall-7.jpg');
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
}

.dot-area {
  line-height:4rem;
}

.dot-area .dot-text {
  background-image: radial-gradient(circle at center, orange 20%, transparent 20%); /* 点の色とサイズ調整 */
  background-position: top right; /* 点の位置 */
  background-repeat: repeat-x; /* 横方向に繰り返し */
  background-size: 1em 0.3em; /* 点の間隔とサイズ調整 */
  padding-top: .4em; /* 縦方向の位置調整 */
}


.circle {
  width: 80px;
  height: 80px;
  text-align:center;
  border-radius: 50%;
  border: solid 1px #28a745;
  padding-top: 1.6rem;
  margin:10px;
  font-size: var(--font-size-base);
}

/*topページ 製品紹介コメント用*/
  @media (max-width: 768px) {
  /* 600ピクセル以下の場合のスタイルをここに記述 */
    .font-resize {
      font-size: 1.9rem;
    }
    .img-resize {
      width: 60%;
    }
  }

.home-prod-txt {
  font-size:0.9rem;
  line-height:1.2rem;
}

:root {
  --font-size-sm: clamp(0.8rem, 0.17vw + 0.76rem, 0.89rem);
  --font-size-base: clamp(1rem, 0.34vw + 0.91rem, 1.19rem);
  --font-size-md: clamp(1.25rem, 0.61vw + 1.1rem, 1.58rem);
  --font-size-lg: clamp(1.56rem, 1vw + 1.31rem, 2.11rem);
  --font-size-xl: clamp(1.95rem, 1.56vw + 1.56rem, 2.81rem);
  --font-size-xxl: clamp(2.44rem, 2.38vw + 1.85rem, 3.75rem);
  --font-size-xxxl: clamp(3.05rem, 3.54vw + 2.17rem, 5rem);
}

.wf-slope-text {
  transform: rotate(-4deg) translateY(-20px);
  text-decoration: underline;
  color:#6E85B7;
}

/*ナビバー文字強調＆太字*/
.navbar {
  font-size: 1.1rem;
  font-weight: bold;
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.3);
}

.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover {
  color:#111;
}

.nav-link.active {
  display:inline-block;
  border-bottom:2px #ccc solid;
}