/* ----------------------------
 - ファーストビュー
 - 当院について
 - 症例
 - お悩み
 - 当院が選ばれる理由
 - MTコネクターによる入れ歯治療
 - 講演・教育事業
 - 講習会予定
 - 2カラムデザイン（左）
    - 最新情報
    - コラム
    - 挨拶
 - 2カラムデザイン（右）
    - カレンダー
    - バナー
 - 書籍紹介
---------------------------- */

/* ----------------------------
   TOPページcss
---------------------------- */
body {
  font-family: 'Noto Serif JP', serif;
}


/****** フォントデザイン ******/
body h2 {
    font-size: 37px;
    letter-spacing: 6px;
    margin: 7px 0;
    color: #2b2b2b;
	line-height: normal;
}

body p {
    font-size: 18px;
    line-height: 30px;
    letter-spacing: 1.8px;
    margin: 3px 0;
    color: #2b2b2b;
}

body div{
    font-size: 18px;
    line-height: 25px;
    letter-spacing: 1.5px;
    color: #2b2b2b;
}

/****** グラデライン ******/
.line {
  width: 100%; 
  height: 2px;
    background: linear-gradient(137.78deg,
    rgba(245, 226, 219) 0%,
    rgba(236, 212, 202) 7.54%,
    rgb(183 133 133) 35.1%,
    rgba(228, 199, 188) 41%, 
    rgba(245, 226, 219) 44.97%,
    rgb(255 255 255) 47.89%,
    rgba(207, 188, 182) 51.31%,
    rgb(151 127 119) 55.02%,
    rgba(193, 175, 169) 59.5%, 
    rgba(201, 166, 153) 65.7%,
    rgb(183 133 113) 70.98%, 
    rgba(219, 184, 170) 75.08%, 
    rgba(230, 203, 192) 79.81%, 
    rgba(239, 216, 207) 85.04%,
    rgba(243, 224, 216) 91.12%, 
    rgba(245, 226, 219) 100%);
    margin: 1.5rem auto;
}

/****** ボタンデザイン ******/
.btn-frame {
    display: inline-block;
    position: relative;
    padding: 1.1rem 2rem;
    font-size: 20px;
    letter-spacing: 2px;
    color: #2b2b2b;
    text-decoration: none;
    text-align: center;
    border: 1px solid #2b2b2b;
    background: #fff;
    transition: background-color 0.3s ease, color 0.3s ease;
    box-shadow: 0 0 5px 0 rgb(63 63 63 / 22%);
}

.btn-frame::before,
.btn-frame::after {
  content: "";
  position: absolute;
  width: 30px; 
  height: 30px; 
}

.btn-frame::before {
  top: -1px;
  left: -1px;
  background:
    linear-gradient(to right,
      rgba(245, 226, 219) 0%, 
      rgb(255 255 255) 33%,      
      rgb(183, 133, 133)  66%,      
      rgb(228, 199, 188) 100% )top left / 100% 3px no-repeat,
    linear-gradient(to bottom,
      rgb(228, 199, 188) 0%,
      rgb(228, 199, 188) 20%,
      rgba(219, 184, 170) 66%,
      rgba(245, 226, 219) 100%)top left / 3px 100% no-repeat;
}

.btn-frame::after {
  bottom: -2px;
  right: -2px;
  background:
    linear-gradient(to right,
      rgba(245, 226, 219) 0%, 
      rgb(255 255 255) 33%,      
      rgb(183, 133, 133)  66%,      
      rgb(228, 199, 188) 100% ) bottom right / 100% 3px no-repeat,
    linear-gradient(to bottom,
      rgb(228, 199, 188) 0%,
      rgb(183, 133, 133) 20%,
      rgba(219, 184, 170) 66%,
      rgba(245, 226, 219) 100%)bottom right / 3px 100% no-repeat;
}

.btn-frame:hover {
  background-color: #2b2b2b;
  color: #ffffff;
}


/* ----------------------------
   ファーストビュー
---------------------------- */
.f-view {
    background: url(/wp-content/uploads/2025/08/mtctop01.jpg) center / cover no-repeat;
    height: 115vh;
    position: relative;
    display: grid;
    overflow: hidden;
    align-items: end;
    padding-top: 50px;
    margin: 0 0 ;
}

.f-ttl {
    background: #000000a1;
    display: flex;
    width: 50%;
    box-sizing: border-box;
    height: 48vh;
    justify-content: center;
    align-items: center;
    flex-direction: column;
} 

.f-ttl h2 {
    display: flex;
    flex-direction: column;
    font-size: 3rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    margin: 0 0;
	gap: 7px;
}

.f-ttl-sb {
    font-size: 2.4vw;
    margin-left: 1.5rem;
    display: inline-block;
    padding: 25px 0;
    position: relative;
    color: #ffffff;
    letter-spacing: 3px;
}

.f-ttl-sb::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px; 
    background: linear-gradient(137.78deg,
    rgba(245, 226, 219, 1) 0%,
    rgba(236, 212, 202, 1) 7.54%,
    rgb(183 133 133) 35.1%,
    rgb(228, 199, 188) 41%, 
    rgba(245, 226, 219, 1) 44.97%,
    rgb(255 255 255) 47.89%,
    rgba(207, 188, 182, 1) 51.31%,
    rgb(151 127 119) 55.02%,
    rgba(193, 175, 169, 1) 59.5%, 
    rgba(201, 166, 153, 1) 65.7%,
    rgb(183 133 113) 70.98%, 
    rgba(219, 184, 170, 1) 75.08%, 
    rgba(230, 203, 192, 1) 79.81%, 
    rgba(239, 216, 207, 1) 85.04%,
    rgba(243, 224, 216, 1) 91.12%, 
    rgba(245, 226, 219, 1) 100%)
}

.f-ttl-box{
    font-size: 3.4vw;
    font-style: normal;
    font-weight: 400;
    color: #ffffff;
}

.f-ttl-hl {
    font-size: 5.4vw;
    font-style: normal;
    font-weight: 500;
    letter-spacing: 0.02em;
    margin: 0 5px 0 10px;
    color: #ffffff;
}

.f-txt {
    font-size: 1.57vw;
    font-style: normal;
    font-weight: 400;
    letter-spacing: 0.15em;
    color: #ffffff;
    padding-top: 15px;
}

.f-yoyaku{
  justify-self: end; 
  padding: 0;
  margin: 0;
}

.f-yoyaku > a {
  display: inline-block; 
  padding: 0;
  border: 0;
}

.f-yoyaku img {
    display: block;
    height: 200px;
    padding: 0 1rem 1rem 0;
}


/* ----------------------------
   当院について
---------------------------- */
.about {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 60vh;
    padding: 2rem;
    background: url(/wp-content/uploads/2025/08/bg_logo.png) center center no-repeat;
    background-size: 20%;
    box-sizing: border-box;
    flex-direction: column;
}

.about p {
  font-size: 1.25rem;
  line-height: 1.8;
    margin: 6px 0;
  font-size: 23px;
}


/* ----------------------------
   お悩み
---------------------------- */
.problem {
    text-align: center;
    height: auto;
    padding: 3rem 11rem 9rem 11rem;
    background: url(/wp-content/uploads/2025/08/program_bg.png) bottom / cover no-repeat;
}

.problem h2{
  margin-bottom: 40px;
}

.problem span {
    font-size: 51px;
    margin: 0 9px;
    letter-spacing: 7.5px;
}

.qa-7 {
    margin: 0 auto 21px;
    border: none;
    border-radius: 6px;
    box-shadow: 0 4px 4px rgb(0 0 0 / 2%), 0 2px 3px -2px rgba(0 0 0 / 5%);
    background-color: #ffffff;
    border: 1px solid #2b2b2b;
    backdrop-filter: blur(18px);
}

.qa-7 summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 1.2em 2em 1.2em 4.5em;
    font-weight: 500;
    cursor: pointer;
    font-size: 19px;
    letter-spacing: 1px;
    list-style: none;
}

.qa-7 summary::-webkit-details-marker {
display: none; /* Safari/Chromeのデフォルト矢印を非表示 */
}

.qa-7 summary::before,
.qa-7 p::before {
  position: absolute;
  left: 1em;
  font-weight: normal;
  font-size: 1.3em;
  margin-bottom: 2px;
}

.qa-7 summary::before {
    color: #FFFFFF;
    content: "Q";
    font-weight: 500;
    background: linear-gradient(
30deg, rgb(215 215 215) 0%, rgba(104, 104, 104, 1) 100%);
    padding: 0.5em;
    border-radius: 50%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 1em;
    height: 1em;
    text-align: center;
    margin: 0 0;
}

.qa-7 summary::after {
    transform: translateY(-25%) rotate(
45deg);
    width: 17px;
    height: 17px;
    margin-left: 10px;
    content: '';
    transition: transform .5s;
    background: linear-gradient(313deg, rgba(245, 226, 219) 0%, rgb(207, 135, 106) 33%, rgb(183, 133, 133) 66%, rgb(228, 199, 188) 100%) bottom right / 100% 3px no-repeat, linear-gradient(
223deg, rgb(228, 199, 188) 0%, rgb(183, 133, 133) 20%, rgba(219, 184, 170) 66%, rgba(245, 226, 219) 100%) bottom right / 3px 100% no-repeat;
}

.qa-7[open] summary::after {
  transform: rotate(225deg);
}

.qa-7 p {
    position: relative;
    transform: translateY(-10px);
    opacity: 0;
    margin: 0;
    padding: 0.3em 5em 1.5em;
    font-weight: 300;
    transition: transform .5s, opacity .5s;
    letter-spacing: 1px;
    font-size: 18px;
    text-align: left;
}
.qa-7[open] p {
  transform: none;
  opacity: 1;
}

.qa-7 p::before {
    color: #fff;
    content: "A";
    font-weight: 500;
    background: #e2967f;
    padding: 0.5em;
    border-radius: 50%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 1em;
    height: 1em;
    text-align: center;
    margin: 0 3px;
}

.qa-7 p::before {
  margin-right: 3px;
}


/* ----------------------------
   症例
---------------------------- */
.dentures_case {
    padding: 4rem 4rem 6rem 4rem;
    position: relative;
    overflow: hidden;
    text-align: center;
    background: url(/wp-content/uploads/2025/08/top_bg01-scaled.png) center / cover no-repeat;
}

.dentures_case h2 {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 8px;
}

.dentures_case h2 span {
    letter-spacing: 8px;
    font-size: 56px;
}

.dentures_case .line {
    width: 55%;
    margin: 0 auto;
}

.case-carousel {
    width: 100%;
    overflow: hidden;
    position: relative;
    z-index: 2;
}

.case-carousel::before {
    content: "";
    position: absolute;
    top: -20px;
    left: -30px;
    right: -30px;
    bottom: -20px;
    /* background: rgba(255, 255, 255, 0.8); */
    border-radius: 16px;
    z-index: -1;
}

.case-carousel-track {
    display: flex;
    transition: transform 0.7s ease-out;
    width: 100%;
}

.case-carousel-slide {
    display: flex;
    flex-direction: column;
    gap: 30px;
    min-width: 100%;
    box-sizing: border-box;
}

.case-slide {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: #fff;
    overflow: hidden;
    margin: 20px auto;
    border-radius: 10px;
    gap: 40px;
    padding: 25px 40px;
    will-change: transform;
    width: 87%;
}

.case-info {
    width: 100%;
}

/* ------　写真　------ */
.case-before-after {
    display: flex;
    justify-content: center;
    gap: 11px;
    margin: 0 auto;
}

.case-before-after img {
    border-radius: 4px;
    max-width: 100%;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: #7b7b7b;
}

.beforediv, .afterdiv {
    position: relative;
    width: 100%;
    height: auto;
}

p.before, p.after {
    position: absolute;
    top: 0;
    left: 0;
}

.case-before-after p {
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    padding: 5px 10px;
    border-radius: 4px 0 5px 0;
    display: inline-block;
    width: 80px;
    margin: 0 0;
    box-shadow: 1px 1px 3px rgb(0 0 0 / 10%);
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.before {
    background: linear-gradient(-47.78deg, rgba(180, 180, 178, 1) 20%, rgba(104, 104, 104, 1) 80%);
    color: #fff;
    text-shadow: 0px 0px 3px rgb(0 0 0 / 70%);
}

.after {
    background: #E2967F;
    color: #fff;
    text-shadow: 0px 0px 5px rgb(157 65 37 / 80%);
}

.arrow-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    color: #E2967F;
    padding: 0 0;
    font-weight: bold;
    margin: 0 0;
}

/* ------　詳細　------ */
.case-bfafp {
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding-top: 30px;
}

.case-info-detail {
    margin: 0 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

p.case-heading {
    margin: 0 0;
    padding: 0 5px;
    font-size: 22px;
    font-weight: 600;
}

.case-text {
    line-height: 1.7;
    padding: 0 5px;
    margin: 0 0;
    text-align: center;
}


/* ------　スライド　------ */
.case-carousel-nav {
    position: absolute;
    top: 50%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%);
    padding: 0 20px;
    box-sizing: border-box;
    pointer-events: none;
}

.case-carousel-nav button {
    background:#E2967F;
    border: none;
    font-size: 29px;
    padding: 14px;
    border-radius: 41px;
    cursor: pointer;
    pointer-events: auto;
    transition: background 0.3s ease, transform 0.3s ease;
    line-height: 1;
    box-shadow: 0 0 5px 0 rgb(85 85 85 / 39%);
    color: #fff;
}

.carousel-dots-wrapper {
    text-align: center;
    margin-top: 20px;
}

.dott span.active {
    background: #E2967F;
    transform: scale(1.2);
}

.dott span {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin: 0 6px;
    background: #ccc;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.3s ease;
}
/* ----------------------------
   当院が選ばれる理由
---------------------------- */
.reasons {
    padding: 6rem 0rem;
}

.pk-txt{
    color: #E2967F;
}

.un-line {
    font-size: 3.05vw;
    position: relative;
    display: inline-block;
    z-index: 1;
    padding: 0 4px;
}

.un-line::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: #E2967F63;
    z-index: -1;
    border-radius: 50px;
}

.cuz_box {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 60px;
    margin: 0 0;
    padding-bottom: 80px;
}

.cuz_box_2nd {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 60px;
    margin: 0 0;
    padding: 100px 0;
    background-image: url("/wp-content/uploads/2025/09/AdobeStock_481756045-scaled.jpeg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

._3rd {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    margin: 0 0;
    padding: 70px 0;
    align-items: center;
}

.reasons h2{
  text-align: center;
}

.reasons .kana {
    letter-spacing: 3px;
    font-size: 35px;
    color: #E2967F;
	display: inline;
}

.reasons p{
  margin: 15px 0 0 0;
  width: 100%;
}

.cuz_img img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    border-radius:0 15px 15px 0;
}

.cuz_img_2nd img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    border-radius:15px 0 0 15px;
}

.box-03 img {
    width: 100%;
    height: 70%;
    /* object-fit: cover; */
    /* object-position: right bottom; */
    /* display: block; */
}

.cuz_txt {
    padding-right: 5rem;
}

.cuz_txt_2nd {
    padding-left: 5rem;
}

.cuz_ttl h2 {
    margin: 40px 0 23px 0;
    letter-spacing: 3px;
    line-height: 60px;
    text-align: center;
}

.cuz_ttl_2nd h2 {
    line-height: 50px;
    margin: 40px 0;
    letter-spacing: 1px;
    font-size: 35px;
    text-align: center;
}

.cuz_txt_mini {
    font-size: 23px;
    line-height: 0px;
    letter-spacing: 1px;
    top: -3px;
    position: relative;
    font-weight: 400;
}

.cuz_sbttl_box {
    display: flex;
    gap: 11px;
    margin: 40px 0 30px 0;
}

.cuz_sbttl_box2 {
    margin: 40px 0 30px 0;
}

.cuz_sbttl_item {
    margin: 0 0;
    text-align: center;
    background: #fff9f7;
    padding: 20px 12px;
    border-radius: 5px;
}

.cuz_sbttl_box p{
text-align:left;
	margin:0 0;
}

.cuz_txt_2nd p:last-of-type{
	margin-bottom:30px;
}

.cuz_sbttl {
    /* background: rgba(245, 226, 219); */
    padding: 0 0 7px 0;
    color: #e58f75;
    margin: 0 0;
    font-weight: 700;
}

.num {
    font-size: 32px;
    letter-spacing: 5px;
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: center;
    margin-top: 30px;
}

.num:before{
            border-radius: 50px;
content: "";
    display: block;
    width: calc(150 / 1920 * 100vw);
    height: 1.5px;
    background: linear-gradient(137.78deg, rgba(245, 226, 219) 0%, rgba(236, 212, 202) 7.54%, rgb(183 133 133) 35.1%, rgba(228, 199, 188) 41%, rgba(245, 226, 219) 44.97%, rgb(255 255 255) 47.89%, rgba(207, 188, 182) 51.31%, rgb(151 127 119) 55.02%, rgba(193, 175, 169) 59.5%, rgba(201, 166, 153) 65.7%, rgb(183 133 113) 70.98%, rgba(219, 184, 170) 75.08%, rgba(230, 203, 192) 79.81%, rgba(239, 216, 207) 85.04%, rgba(243, 224, 216) 91.12%, rgba(245, 226, 219) 100%);
            margin-right: calc(30 / 1599 * 100vw);
}

.num:after{
            border-radius: 50px;
margin-left: calc(30 / 1599 * 100vw);
    content: "";
    display: block;
    width: calc(150 / 1920 * 100vw);
    height: 1.5px;
    background: linear-gradient(137.78deg, rgba(245, 226, 219) 0%, rgba(236, 212, 202) 7.54%, rgb(183 133 133) 35.1%, rgba(228, 199, 188) 41%, rgba(245, 226, 219) 44.97%, rgb(255 255 255) 47.89%, rgba(207, 188, 182) 51.31%, rgb(151 127 119) 55.02%, rgba(193, 175, 169) 59.5%, rgba(201, 166, 153) 65.7%, rgb(183 133 113) 70.98%, rgba(219, 184, 170) 75.08%, rgba(230, 203, 192) 79.81%, rgba(239, 216, 207) 85.04%, rgba(243, 224, 216) 91.12%, rgba(245, 226, 219) 100%);
}

.line-break{
        position: relative;
        display: contents; 
}


/* 動画 */
.reasons_video {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 50px;
    padding: 0rem 8rem;
}

.reasons_video div {
    width: 40%;
}

.video_box {
  width: 100%;
}

.video_box iframe {
  width: 100%;
  height: auto;     
  aspect-ratio: 16 / 9; 
  display: block;
  border: 0;
}

.dentures_case .btn-frame {
    width: 50%;
    margin-top: 50px;
}
/* ----------------------------
   MTコネクターによる入れ歯治療
---------------------------- */
.MT-denture {
    text-align: center;
    padding: 3rem 8rem;
}

.MT-denture .line{
    width: 90%;
}

.MT-denture-sb{
  font-size: 1.25rem;
  line-height: 1.8;
    margin: 6px 0;
  font-size: 23px;
}

.MT-box{
    width: 90%;
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    align-items: center;
    margin: 0 auto;
    gap: 20px;
}

.MT-box img{
    width: 100%;
}

.MT-box li {
    font-size: 18px;
    line-height: 30px;
    letter-spacing: 3px;
    margin: 17px 0;
    text-align: left;
}

.MT-list {
  list-style: none;       
  counter-reset: num;  
  padding: 0;
  margin: 0;
}

.MT-list li {
  position: relative;
  counter-increment: num;
  padding-left: 3.5em;    
  margin-bottom: 1.5em;
}

.MT-list li::before {
    content: counter(num, decimal-leading-zero) ".";
    position: absolute;
    top: 7px;
    left: 10px;
    font-size: 1.7rem;
    font-weight: 600;
    letter-spacing: 0px;
    color: #E2967F;
    z-index: 1;
}

.MT-list li::after {
    content: "";
    position: absolute;
    top: 0.2em;
    left: 0.2em;
    width: 1.7em;
    height: 1.7em;
    background: #f5e2db;
    clip-path: polygon(0 0, 100% 0, 0 100%);
    z-index: 0;
}

.MT-CV {
    text-align: center;
    display: flex;
    justify-content: center;
}

.MT-CV li {
  margin: 0 10px;
  list-style: none;
  padding-left: 0;
}

.MT-CV a {
  margin: 0 10px;
}

.MT-rfi img{
  width: 50%;
  margin: 35px auto 0 auto;  
}


/* ----------------------------
   講演・教育事業
---------------------------- */
.edu-prog{
    padding: 3rem 8rem;
    margin: 0 auto;
    text-align: center;
    width: 65%;
}

.edu-prog img{
    width: 100%;
    margin: 10px 0;
}

.edu-prog p{
    text-align: left;
    margin-top: 5px;
}


/* ----------------------------
   講習会予定
---------------------------- */
.edu-tbc {
    padding: 4.5rem 8rem;
    margin: 0 auto;
    text-align: center;
    background: url(/wp-content/uploads/2025/08/top_bg01-scaled.png) center / cover no-repeat;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.tbc-box {
    background-color: #ffffff;
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    justify-items: center;
    align-items: center;
    padding: 30px;
    gap: 30px;
    border-radius: 10px;
    box-shadow: 0 0 6px 0 rgb(85 85 85 / 35%);
}

.tbc-box .box-l{
  font-size: 1.9rem;
  margin: 0 15px;
}

.tbc-box .box-l div{
  color: #E2967F;
  letter-spacing: 4px;
  font-size: 1.9rem;
  font-weight: 500;
  margin: 20px 0;
}

.tbc-box .box-l span{
  font-size: 2.3rem;
}

.tbc-box .box-r{
  text-align: left;
}

.tbc-box .box-r div {
    padding: 16px 0;
    margin: 0 0;
}

.gy-box {
  color: #ffffff;
  letter-spacing: 3.5px;
  font-weight: 600;
  text-align: center;
  margin-right: 10px;
  background: linear-gradient(-47.78deg, rgba(180, 180, 178, 1) 0%, rgba(104, 104, 104, 1) 100%);
  padding: 0.3em 0.8em;
}

.tbc-box .box-r a{
    display: block; 
    margin:10px auto 0 auto;
    text-align: center; 
}


/* ----------------------------
   2カラムデザイン
---------------------------- */
.container {
    padding: 3rem 3rem;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2.5fr 1fr;
    justify-content: space-between;
    gap: 3rem;
}

/* ----------------------------
   最新情報とコラム
---------------------------- */
.news-column{
	padding: 0 0 60px 0;
}

.news-column .box {
    display: grid;
    grid-template-columns: 1fr 2.5fr;
    width: 90%;
    gap: 100px;
    align-items: start;
}

.news-column h2 {
    margin: 0 0;
    line-height: normal;
    font-weight: normal;
}

.news-column .box {
    display: grid;
    grid-template-columns: 1fr 2.5fr;
    width: 95%;
    align-items: start;
    gap: 30px;
    padding: 50px 0;
    margin: 0 auto;
}

.news_box{
	width:100%;
}

.news-column .ttl-box{
	text-align:center;
}

.ttl-box .line{
	margin:5px auto;
	width:85%;
}

/* ----------------------------
   最新情報
---------------------------- */
.news-container{
		width:100%;
}

.news-container hr{
	border-width: 1px;
	border-color:#2b2b2b1a;
	margin:13px 0;
}

.news-content {
    display: grid;
    align-items: center;
    gap: 15px;
    grid-template-columns: 1fr 2.5fr;
}

.news-date{
    color: #ffffff;
    letter-spacing: 2.5px;
    text-align: center;
    background: linear-gradient(-47.78deg, rgba(180, 180, 178, 1) 0%, rgba(104, 104, 104, 1) 100%);
    padding: 0.3em 0.8em;
	border-radius: 3px;
	font-size:14px;
}

.news-text a{
    font-size: 18px;
    line-height: 25px;
    letter-spacing: 1.5px;
    margin: 3px 0;
    color: #2b2b2b;
    text-decoration:none;
}

.news-text a:hover {
color:#c9c9c9;
}

/* ----------------------------
   コラム
---------------------------- */
.blog-container {
    display: flex;
    flex-direction: column;
    gap: 35px;
}

.blog-item {
	position: relative;
    display: flex;
    align-items: center;
}

.blog-item::before {
    content: '';
    position: absolute;
    bottom: -14px;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #2b2b2b1a;
}

.blog-thumbnail {
    width: 70px;
    height: 70px;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 6px;
    overflow: hidden; 
	    background: url(https://www.mtc-clinic.or.jp/wp-content/uploads/2025/10/logo-bgwith.jpg) center / cover no-repeat;
}

.blog-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}


.blog-content {
  padding-left: 15px;
}

.blog-date {
    font-size: 14px;
    color: #999;
	    margin: 0 0;
}

.blog-title {
  font-size: 18px;
	    margin: 0 0;
}

.blog-title a {
  text-decoration: none;
  color: #2b2b2b;
}

.blog-title a:hover {
color:#c9c9c9;
}

/* ----------------------------
   挨拶
---------------------------- */
.greeting {
    display: grid;
    grid-template-columns: 1.2fr 2fr;
    padding: 3rem 0;
    gap:30px;
}

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

.greeting .dc img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.greeting .msg p{
  padding: 5px 0;
}

.greeting .staff_name{
	margin:0 0;
}
.greeting .line {
    margin: 6px 0;
}

.greeting-btn-box {
    text-align: center;
    margin-top: 30px;
}

/* ----------------------------
   カレンダー
---------------------------- */
.calendar div{
	margin:0 0 ;
	font-family: 'Noto Serif JP', serif;
}

.xo-event-calendar table.xo-month .month-header {
    display: flex;
    flex-flow: wrap;
    justify-content: center;
    margin: 10px 0;
}


.calendar .xo-event-calendar table.xo-month>thead th {
    border-width: 0 1px 0 0;
    color: #ffffff;
    font-size: .9em;
    font-weight: 700;
    padding: 1px 0;
    text-align: center;
}

.calendar .xo-event-calendar table.xo-month thead tr {
  background: linear-gradient(90deg, rgba(180, 180, 178, 1) 0%, rgba(104, 104, 104, 1) 100%);
	line-height: 40px;
    font-weight: normal;
    font-size: 17px;
}

.xo-event-calendar table.xo-month td,
.xo-event-calendar table.xo-month th {
    background-color: transparent !important;
}

.calendar .xo-event-calendar table.xo-month>thead th.sunday {
    color: #ffffff;
}

.calendar .xo-event-calendar table.xo-month>thead th.saturday {
    color: #ffffff;
}

.xo-event-calendar table.xo-month .month-dayname td div.today {
    color: #ffffff !important;
    background: #d7937a;
}

.xo-event-calendar table.xo-month .month-header>span {
    flex-grow: 1;
    text-align: center;
    font-size: 25px;
}

.calendar .xo-event-calendar table.xo-month {
    border: none;
    margin: 0 0 8px;
    padding: 0;
}

.calendar .xo-event-calendar table.xo-month td, .calendar .xo-event-calendar table.xo-month th {
    border: none;
    padding: 0;
}

.holiday-titles{
  display: none;
} 


/*------------ 補足 ------------*/
.suppl{
  margin: 10px 0;
}

.suppl ul {
    list-style-type: none;
    padding: 0;
}

.suppl li {
    margin-bottom: 8px;
    position: relative;
    padding-left: 30px;
}

.suppl li::before {
    content: "•";
    font-size: 99px;
    position: absolute;
    left: -2px;
    top: 7%;
    transform: translateY(-50%);
}

.li-1::before {
    color: #fbc3ae;
}

.li-2::before {
    color: #b6ccf9; 
}

.suppl li {
    display: flex;
    flex-direction: column;
}

.suppl span {
    font-size: 14px;
    line-height: normal;
    padding-left: 1rem;
    padding-top: 4px;
}

/* ----------------------------
   バナー
---------------------------- */
.banner-list {
    display: flex;
    padding: 0;
    margin:20px 0 0 0;
    list-style: none;
    flex-direction: column;
    gap: 20px;
}

.banner-list li {
    flex: 1 0 auto;
    margin: 0 10px;
    list-style: none;
    padding-left: 0;
}
.banner-list img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}


/* ----------------------------
   書籍紹介
---------------------------- */
.book-introduction {
    text-align: center;
    padding: 3rem 6rem;
}

.introduction-ttl{
    width: 30%;
    margin: 0 auto;
    padding-bottom: 50px;
}

.book-slider-wrap{
  position: relative;
  width: 100%;
}

.book-slider {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    width: 95%;
    margin: 0 auto;
}

.book-item {
    flex: 0 0 78%;
    max-width: 360px;
    scroll-snap-align: start;
}

.book-item a{
	display:block; 
	text-decoration:none; 
	color:inherit; 
}

.book-content {
    padding: 20px 15px;
}

.book-content img {
    display: block;
    width: 75%;
    height: auto;
    margin: 0 auto;
}

.book-title{
    margin: 10px 0 7px 0;
}

.book-summary {
    font-size: 15px;
    color: #737373;
    line-height: normal;
}

/* ナビボタン */
.book-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 57px;
    height: 57px;
    display: grid;
    place-items: center;
    z-index: 2;
    background: #E2967F;
    border: none;
    font-size: 26px;
    border-radius: 41px;
    cursor: pointer;
    pointer-events: auto;
    line-height: 1;
    box-shadow: 0 0 7px 0 rgb(85 85 85 / 58%);
    color: #fff;
}

.book-prev{ left: 4px; }
.book-next{ right: 4px; }

.book-introduction .btn-frame{
	    margin-top: 40px;
}