/*
Theme Name: Keijitsu Theme
Text Domain: KeijitsuTheme
Version: 1.0
Description: Original Theme for Keijitsukai Medical Corporation
Author: TKC Holding
*/

@import url("https://fonts.googleapis.com/css2?family=Allura&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;500&display=swap");

/* Global */

:root {
  --blue-primary: #001764;
  --blue-secondary: #3e56a8;
  --blue-tertiary: #d5dbef;
  --blue-quaternary: #717ea8;
  --blue-overlay: 210, 221, 255;
  --blue-primary-dim: #00176485;
  --blue-highlight: #0b69ff;
  --blue-contrast: #000f41;
  --red-primary: #fc4a1a;
  --red-secondary: #b22222;
  --gray-tertiary: #f6f6f6;
  --yellow-primary: #fdd000;
  --contact-form-bg-blue: #f5f8ff;
  --contact-form-border-blue: #5873cc;
  --darkgray-primary: #333333;
  --gray-primary: #acacac;
  --gray-secondary: #bababa;
  --white: #ffffff;

  --phone-breakpoint: 728px;
  --tablet-breakpoint: 1028px;
}

* {
  box-sizing: border-box;
}

body,
textarea:focus,
input:focus {
  outline: none;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}

html {
  box-sizing: border-box;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
}

h1,
h2,
h3,
h4,
h5,
p {
  margin: 0;
}

h2 {
  font-family: "Allura", cursive;
}

h3 {
  font-family: "ヒラギノ明朝 ProN";
}

h4 {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
}

h5,
a,
span {
  font-family: "ヒラギノ角ゴシック";
}

p {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 300;
}

svg {
  fill: currentColor;
}

#mw_wp_form_mw-wp-form-104 p {
  margin: 5px 0;
}

#mw_wp_form_mw-wp-form-104 .section {
  margin-bottom: 20px;
}

#mw_wp_form_mw-wp-form-104 select {
  -webkit-appearance: none;
}

#mw_wp_form_mw-wp-form-104 input,
textarea,
select {
  width: 100%;
  background-color: var(--contact-form-bg-blue);
  border-radius: 4px;
  padding: 18px 20px;
}

#mw_wp_form_mw-wp-form-104 button[type="submit"] {
  width: 100%;
  padding: 12px 0;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  color: white;
  background-color: var(--blue-primary);
}

/* topics-news font-size styling  */
h1 {
  font-size: 1.875rem;
  line-height: 2.25rem;
}

.news-content h2 {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.5rem;
  line-height: 2rem;
  color: var(--blue-primary);
}

.news-content h3 {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.news-content h4 {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.news-content h5 {
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 500;
}

.news-content a {
  color: var(--blue-highlight);
}

/* header-main styling */

.text-shadow {
  text-shadow: #000000 0px 3px 10px;
}

/* Border */
.border-5 {
  border: 5px solid;
}

.border-blue-primary {
  border-color: var(--blue-primary);
}

.border-blue-primary {
  border-color: var(--blue-primary);
}

.border-yellow-primary {
  border-color: var(--yellow-primary);
}

.border-gray-primary {
  border-color: var(--gray-primary);
}

.border-blue-highlight {
  border-color: var(--blue-highlight);
}

/* Text Color */
.contact-bgtitle {
  color: rgba(0, 23, 100, 0.25);
}

.text-blue-primary {
  color: #001764;
}

.text-darkgray-primary {
  color: var(--darkgray-primary);
}

.text-blue-primary-dim {
  color: var(--blue-primary-dim);
}

.text-blue-primary {
  color: var(--blue-primary);
}

.text-blue-highlight {
  color: var(--blue-highlight);
}

.text-red-primary {
  color: var(--red-primary);
}

.text-blue-contrast {
  color: var(--blue-contrast);
}

.text-gray-secondary {
  color: var(--gray-secondary);
}

/* Height */
.h-fit-content {
  height: fit-content;
}

/* Background Color */
.bg-blue-primary {
  background-color: var(--blue-primary);
}

.bg-blue-secondary {
  background-color: var(--blue-secondary);
}

.bg-blue-tertiary {
  background-color: var(--blue-tertiary);
}

.bg-blue-quaternary {
  background-color: var(--blue-quaternary);
}

.bg-blue-overlay {
  background-color: rgba(var(--blue-overlay), 1);
}

.bg-gray-tertiary {
  background-color: var(--gray-tertiary);
}

.bg-red-primary {
  background-color: var(--red-primary);
}

.bg-red-secondary {
  background-color: var(--red-secondary);
}

.bg-stripe {
  background-image: linear-gradient(
    135deg,
    #e5ebff 25%,
    #ebf0ff 25%,
    #ebf0ff 50%,
    #e5ebff 50%,
    #e5ebff 75%,
    #ebf0ff 75%,
    #ebf0ff 100%
  );
  background-size: 16.97px 16.97px;
}

/* category-bg styling */
.blog-post .important,
.blog-post .important-dental,
.blog-post .important-medical,
.blog-post .important-nurse,
.blog-post .important-kyotaku {
  background-color: #b22222;
}

.blog-post .topics,
.blog-post .topics-dental,
.blog-post .topics-medical,
.blog-post .topics-nurse,
.blog-post .topics-kyotaku {
  background-color: #001764;
}

.blog-post .dental {
  background-color: pink;
}

.blog-post .care {
  background-color: gray;
}

.blog-post .medical {
  background-color: purple;
}

.blog-post .kyotaku {
  background-color: brown;
}

/* Position */
.bottom-3 {
  bottom: 10px;
}

.right-20px {
  right: 20px;
}

.right-30px {
  right: 30px;
}

.absolute-center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.absolute-center-x {
  left: 50%;
  transform: translateX(-50%);
}

.absolute-center-y {
  top: 50%;
  transform: translateY(-50%);
}

/* Height */
.h-2px {
  height: 2px;
}

.h-8px {
  height: 8px;
}

/* Width */
.w-line {
  width: 1px;
}

.w-fit-content {
  width: fit-content;
}

.w-clinic-card {
  width: calc(100% - 1rem);
}

.w-112 {
  width: 28rem;
}

.w-128 {
  width: 32rem;
}

/* Text Size */
.text-2xs {
  font-size: 0.625rem;
  line-height: 0.75rem;
}

/* Grid */
.appointment-cols {
  width: 100%;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

.appointment-cols > div {
  padding: 15px 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.service-cols {
  grid-template-columns: 125px auto 1fr;
}

/* List */
.bullet {
  list-style: initial !important;
}

/* Letter Spacing */
.letter-spacing {
  letter-spacing: 0.3em;
}

/* Others */
.arrow-down {
  position: absolute;
  bottom: -20px;
  left: 50%;
  width: 0;
  height: 0;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-top: 20px solid var(--blue-primary);
  transform: translateX(-50%);
}

/* Leading */
.leading-none {
  line-height: 0;
}

.option-selected {
  background-color: var(--blue-primary) !important;
  color: white !important;
}

.modal {
  transition: opacity 0.25s ease;
}

.modal-active {
  overflow: hidden;
}

.divider {
  height: 24px;
  width: 2px;
  border-radius: 6px;
}

.page-selected {
  background-color: var(--blue-primary);
  color: var(--white);
}

.banner-description {
  font-size: 1.2rem;
}

/* Clinic Details */
.clinic-details-badge {
  bottom: -25px;
  right: 50%;
  transform: translateX(50%);
}

/* Careers */
.careers-banner-text-position {
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.careers-banner-text-size {
  font-size: 2.5rem;
  line-height: 1.25;
}

.career-banner {
  font-family: ta-kai-regular, sans-serif;
}

.owl-prev {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: -30px;
  font-size: 24px;
  font-weight: bold;
}

.owl-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: -30px;
  font-size: 24px;
  font-weight: bold;
}

@media screen and (min-width: 728px) {
  /* Home */
  .banner-description {
    font-size: 1.6rem;
  }

  /* Clinics Detail */
  .clinic-details-badge {
    bottom: 10px;
    right: 10px;
    transform: none;
  }
}

@media screen and (min-width: 1028px) {
  .banner-title-cursive {
    font-size: 8rem;
  }

  .careers-banner-text-size {
    font-size: 4.5rem;
  }
}

/* コンタクトフォーム */

#select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 2.5rem;
  background-image: url(assets/svg/select-arrow.svg);
  background-repeat: no-repeat;
  background-position: right 1.5rem top 50%;
  background-size: 0.65rem auto;
}

.h-news-section {
  height: 19rem;
}

.job-grid div {
  padding: 0.5rem 1rem;
  /* border-right: 1px solid gray; */
}

#jobBar01:checked + #links01 > div,
#jobBar02:checked + #links02 > div,
#jobBar03:checked + #links03 > div,
#jobBar04:checked + #links04 > div,
#jobBar05:checked + #links05 > div,
#jobBar06:checked + #links06 > div,
#jobBar07:checked + #links07 > div,
#jobBar08:checked + #links08 > div,
#jobBar09:checked + #links09 > div,
#jobBar10:checked + #links10 > div {
  height: auto;
  opacity: 1;
}

.pum-theme-222 .pum-content + .pum-close,
.pum-theme-enterprise-blue .pum-content + .pum-close {
  background-color: #ffc0cb !important;
}

.bg-primary-pink {
  background-color: #ffc0cb;
}

.border-primary-pink {
  border-color: #ffc0cb;
}

/* ヘッダー動画 */
.video {
  display: none;
}

.video-active {
  height: 80vh;
}

.video-active .video {
  display: block;
}

.video-active .header-img,
.video-active .header-copy,
.video-active .header-nums {
  display: none;
}

.play-btn {
  background-color: rgba(255, 255, 255, 0.7);
}

.doctor-background p {
  font-size: 0.875rem;
}

.doctor-background h2 {
  font-size: 1rem;
}

.dental-medical__description p img {
  margin: 0 auto;
}