@charset "UTF-8";

/*全体*/
*{
    box-sizing: border-box;
}
html{
    scroll-behavior: smooth;
}

body{
    font-family: "fot-tsukuardgothic-std", sans-serif;
    margin:0;
    padding:0;
    color:#2b3038;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: 0.05em;
    overflow-x: hidden;
}
a{
    text-decoration: none;
    color:#2b3038;
}
ul{
    list-style: none;
    padding:0;
    margin:0;
}
img{
    max-width:100%;
    height:auto;
    vertical-align: bottom;
}
section{
    display:block;
}
/*テキストアニメーション下から上に*/
.fade-in{
    opacity:0;
    transform:translateY(40px);
}
.fade-in.js-on {
  animation-name: fadeout;
  animation-duration: 1s;
  animation-delay: .2s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}
@keyframes fadeout {
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
/*ファーストアニメーション*/
.loading{
    position:fixed;
    top:0;
    left:0;
    width:100vw;
    height:100vh;
    z-index:10000;
    background:#fff;
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    animation:fadeOut 1.5s 3.5s forwards;
}
@keyframes fadeOut{
    0%{
        opacity:1;
    }
    100%{
        opacity:0;
        visibility: hidden;
    }
}
.loading_text{
    position:relative;
    color:#48a48f;
    font-weight:bold;
    font-size:3em;
    margin-top:0;
    line-height: 1;
    clip-path: inset(0 100% 0 0);
    animation:reveal-text 1.5s ease-out forwards;
}
@keyframes reveal-text{
    to {
        clip-path: inset(0 0 0 0);
    }
}
.loading_logo{
    opacity:0;
    animation:logo_fade 0.5s ease-in forwards;
    animation-delay: 2s;
    width:250px;
}
@keyframes logo_fade{
    0%{
        opacity:0;
    }
    100%{
        opacity:1;
    }
}

/*ヘッダー*/
.header{
    position:fixed;
    z-index:9999;
    width:100%;
    background:#fff;
}
.header_inner{
    display:flex;
    width:100%;
    justify-content: space-between;
    align-items: center;
    padding: 0 clamp(10px, 2vw, 20px);
    min-height: clamp(60px, 8vh, 80px);
}
.header_left{
    display:flex;
    align-items: center;
    column-gap: clamp(15px, 2.5vw, 40px);
}
.header_logo{
    width:18vw;
    max-width:270px;
}
.header_tel{
    pointer-events: none;
}
.header_tel_block img,.header_web_block img{
    width:2vw;
    max-width:30px;
}
.header_tel_num{
    font-size:1.3em;
    font-weight:bold;
    line-height: 30px;
}
.header_web{
    background:#48a48f;
    border-radius: 10px;
    transition:all .3s;
    display: inline-block;
    position:relative;
    overflow: hidden;
}
.header_web_txt{
    color:#fff;
    font-weight:bold;
    font-size: 1.3em;
}
.header_web_block{
    display:flex;
    align-items: center;
    column-gap: .5em;
    padding: 4px 23px;
    position:relative;
    z-index:1;
}
.header_web:hover::before {
  transform: scaleY(1);
}
.header_web::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: #398573;
  transform: scaleY(0);
  transition: all 0.5s ease;
  transition-property: transform;
}
/*ナビゲーション*/
.gnav_list{
    display:flex;
    column-gap: clamp(10px, 1.5vw, 20px);
}
.gnav_item a{
    font-weight:bold;
    font-size:1.2em;
}
.gnav_item a:hover{
    color:#48a48f;
    transition:all .3s;
}
.gnav_item_link{
    position:relative;
    line-height:80px;
}
.gnav_item_link span{
    margin-right:1em;
}
.gnav_item_link span::after{
    content:"";
    position:absolute;
    top:55%;
    right:0;
    transform:translateY(-50%);
    width:15px;
    height:15px;
    background-image:url(../images/megamenu_down.svg);
    background-repeat:no-repeat;
    background-size: cover;
}
.gnav_item_link:hover span::after { 
    background-image: url(../images/megamenu_up.svg);
    transition:all .3s; 
} 
.gnav_item:hover .gnav_item_link span::after, 
.gnav_item:hover .megaMenu:hover ~ .gnav_item_link span::after { 
    background-image: url(../images/megamenu_up.svg); 
}

/*ハンバーガー非表示*/
#header-hamburger,
#hamburger-window{
    display:none;
}

/*メガメニュー*/
.megaMenu-title_inner{
    display:flex;
    align-items: baseline;
    gap:2em;
}
.megaMenu-title{
    margin:0;
    color:#48a48f;
    font-weight:bold;
    line-height: 1;
}
.megaMenu-all{
    margin:0;
    font-size:.7em;
    font-weight:normal;
}
.megaMenu-all a{
    position:relative;
    line-height: 1;
}
/* 下線用の疑似要素 */
.megaMenu-all a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom:0;
  width: 100%;
  height: 1px;
  background: #48a48f;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}
.megaMenu-all a:hover::after {
  transform: scaleX(1);
}

.megaMenu {
  background-color: #fff;
  left: 50%;
  top:100%;
  transform:translateX(-50%);
  opacity: 0;
  position: absolute;
  visibility: hidden;
  width: 70%;
  border:1px solid #48a48f;
  border-radius: 20px;
  padding:30px 40px;
  box-shadow: 0 0 5px rgba(0,0,0,0.5);
  transition:all .3s;
}

.gnav_item:hover .megaMenu {
  opacity: 1;
  visibility: visible;
}

.megaMenu-list {
  display:flex;
  flex-direction: column;
  row-gap: 10px;
}
/*矢印*/
.arrow-icon {
  width: 18px;
  height: auto;
  margin-left: 8px;
  vertical-align: middle;
  transition: transform 0.3s ease;
}
.arrow-icon img{
    width:100%;
    height:100%;
    object-fit: cover;
}
.megaMenu-item1 a:hover .arrow-icon,
.megaMenu-item2 a:hover .arrow-icon {
  transform: translateX(3px);
}

.megaMenu-item1,.megaMenu-item2 {
  display: inline-block;
  line-height: 1;
  padding:4px 10px;
}
.megaMenu-item1 a{
    position: relative;
    text-decoration: none;
    color: #45b3e0;
    transition: color 0.3s ease;
    overflow: hidden;
    padding-bottom: 5px;
    font-size:1.2em;
    font-weight:normal;
    display:flex;
    align-items: center;
}
.megaMenu-item2 a{
    position: relative;
    text-decoration: none;
    color: #df94ac;
    transition: color 0.3s ease;
    overflow: hidden;
    padding-bottom: 5px;
    font-size:1.2em;
    font-weight:normal;
    display:flex;
    align-items: center;
}
.megaMenu-item1 a::before,.megaMenu-item2 a::before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 100%;
  color: #48a48f;
  white-space: nowrap;
  overflow: hidden;
  transition: width 0.3s ease;
  pointer-events: none;
  z-index:1;
}
/* 下線用の疑似要素 */
.megaMenu-item1 a::after,.megaMenu-item2 a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom:0;
  width: 100%;
  height: 1px;
  background: #48a48f;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
  z-index:0;
}
.megaMenu-item1 a:hover::before,.megaMenu-item2 a:hover::before {
  width: 100%;
}
.megaMenu-item1 a:hover::after,.megaMenu-item2 a:hover::after {
  transform: scaleX(1);
}

.megaMenu.active {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%);
}
.megaMenu-wrapper{
    margin-top:2em;
    column-gap: clamp(15px, 6.5vw, 100px);
}
.megaMenu-wrapper,.megaMenu-wrapper01,.megaMenu-wrapper02{
    display:flex;
}
.megaMenu-wrapper01,.megaMenu-wrapper02{
    column-gap: 30px;
}
.megaMenu-img{
    width:100%;
    max-width:240px;
}
.megaMenu-img img{
    width:100%;
    object-fit: cover;
    border-radius:20px;
}

/*予約ボタン・診療時間リンク*/
.sp_nav_fixed{
    display:none;
}

/*スライドショー*/
.mv_slide_wrapper{
    position:relative;
}
.mv_slide{
    height:100vh;
    width: 100%;
    overflow: hidden;
    position: relative;
}
.mv_slide::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:linear-gradient(
        -180deg,rgba(255,255,255,0) 0%,
        rgba(0,0,0,.25) 60%,
        rgba(0,0,0,.5) 75%,
        rgba(0,0,0,.6) 100%);
    z-index: 2;
}
.bl_slider_column {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.swiper {
  width: 110%;
}
.swiper-slide {
  overflow: hidden;
}
.swiper-slide img {
  height: 100vh;
  width: 100%;
  object-fit: cover;
  object-position: center center;
  overflow: hidden;
}
.swiper-slide.swiper-slide-active img {
  animation: swiper_animation linear 10s infinite;
}
@keyframes swiper_animation {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
.mv_textarea{
    position:absolute;
    bottom:5%;
    left:4%;
    z-index:3;
    color:#fff;
}
.mv_web{
    background:#48a48f;
    border-radius: 10px;
    width:max-content;
    margin-top:5em;
    display: inline-block;
    position:relative;
    overflow: hidden;
}
.mv_web_txt{
    color:#fff;
    font-weight:bold;
    font-size: 1.5em;
}
.mv_web_block{
    display:flex;
    align-items: center;
    column-gap: .5em;
    padding: 4px 45px;
    position:relative;
    z-index:3;
}
.mv_web:hover::before {
  transform: scaleY(1);
}
.mv_web::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: #398573;
  transform: scaleY(0);
  transition: all 0.5s ease;
  transition-property: transform;
}
.mv_web_block img{
    width:2vw;
    max-width:30px;
}
.mv_text01{
    font-size:3.5vw;
    margin:0;
    line-height: 1.7;
}
.mv_text02{
    margin:0;
    line-height: 1.7;
    font-size:2.2vw;
}

/*診療時間*/
.consual_time{
    position:absolute;
    right:0;
    bottom:10%;
    z-index:10;
}
.consual_time_inner{
    padding:20px 48px 20px 4px;
    border-radius:20px 0 0 20px;
    background:#fff;
    box-shadow: 0 0 30px rgba(0,0,0,0.2); 
    cursor: pointer;
    display:flex;
    border:1px solid #48a48f;
    border-right:none;
    transition:all .5s;
    pointer-events: auto;
}
.consual_time_ttl{
    padding:4px 10px;
    writing-mode: vertical-rl;
    white-space: nowrap;
    font-size:130%;
    letter-spacing: .4em;
    color:#48a48f;
    margin:0;
    text-align: center;
}
.time_table{
    padding-left:48px;
    border-left:2px solid #48a48f;
}
.time_table th:first-child{
    padding-left:8px;
    padding-right:8px;
    font-size:105%;
}
.time_table th:not(:first-child){
    width:44px;
}
.time_table th{
    border-bottom:1px solid #48a48f;
    padding:8px 0;
}
.time_table_option{
    border-collapse: collapse;
}
.small{
    font-size:.8em;
}
.consual_time_text{
    margin:10px 0 0 0;
    line-height: 1.5;
    font-size:.9em;
}
.color_g{
    color:#48a48f;
}
/*スクロールしたら固定*/
.consual_time.fixed{
    position:fixed;
    top:20%;
    right:0;
    bottom:unset;
    pointer-events: none;
}
.consual_time_inner.hide-table {
  transform: translateX(calc(100% - 67px));
}
.consual_time_inner:hover {
  transform: translateX(0);
  pointer-events: auto;
}

/*当院について*/
.about{
    padding:150px 40px;
    width:100%;
    max-width:1400px;
    margin:0 auto;
}
.about_inner{
    display:flex;
    justify-content: space-between;
    column-gap: 40px;
}
.about_left{
    width:50%;
}
.about_text{
    font-size:1.3em;
    line-height: 1.5;
    margin-top:0;
    margin-bottom:30px;
}
.about_img{
    width:100%;
    max-width:600px;
}
.about_img img{
    width:100%;
    object-fit: cover;
    border-radius: 10px;
}
.btnarea{
    display:flex;
    flex-direction: column;
    gap:30px;
    margin-top:100px;
}
.about_btn,
.policy_btn{
    background:#48a48f;
    border-radius: 10px;
    width:100%;
    max-width:250px;
    display:inline-block;
    position:relative;
    overflow: hidden;
    transition:all .3s;
}
.about_btn_block,
.policy_btn_block{
    display:flex;
    align-items: center;
    justify-content: center;
    color:#fff;
    padding:15px 20px;
    column-gap: 3px;
    position: relative;
}
.about_btn_txt,
.policy_btn_txt{
    font-weight:bold;
    font-size:1.2em;
}
.about_btn_txt::after,
.policy_btn_txt::after{
    content:"";
    display:inline-block;
    position:absolute;
    top:50%;
    right:7%;
    width:15px;
    height:12px;
    background-image:url(../images/btn_arrow.svg);
    background-repeat:no-repeat;
    background-size:cover;
    margin-left:3px;
    transition:all .3s;
    transform:translate(0, -50%);
}
.about_btn:hover::before,
.policy_btn:hover::before{
  transform: scaleY(1);
}
.about_btn::before,
.policy_btn::before{
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: #398573;
  transform: scaleY(0);
  transition: all 0.3s ease;
  transition-property: transform;
}
.about_btn:hover,
.policy_btn:hover{
    transform:translateY(-5px);
    box-shadow: 0 0 15px rgba(0,0,0,.15);
}
.about_btn:hover .about_btn_txt::after,
.policy_btn:hover .policy_btn_txt::after {
    transform: translate(5px, -50%);
}

/*診療内容*/
.consualtation_sp{
    display:none;
}
.consualtation_pc{
    background:#eee;
    border-radius: 50px 0 0 50px;
    margin-left:60px;
    position:relative;
}
.bg-fixed {
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: 600px;
  height: auto;
  z-index: 0;
  pointer-events: none;
}
.bg-fixed img {
  width: 100%;
  height: auto;
  opacity: 0.15;
}

.consualtation_inner{
    display:flex;
    justify-content: space-between;
    position:relative;
    column-gap: 100px;
    z-index:1;
}
.consualtation_images{
    width:50vw;
    height:100vh;
    display:flex;
    align-items: center;
    position:sticky;
    top:0;
    transition:all .8s;
}
.consualtation_images p{
    height:600px;
    width:100%;
    display:block;
    position:absolute;
    top:50%;
    left:0;
    transform:translateY(-50%);
    opacity: 0;
    visibility: hidden;
    transition: all .8s ease;
}
.consualtation_images p:first-child,
.consualtation_images p.active {
    visibility: visible;
    opacity: 1;
  }
.consualtation_images img{
    width:100%;
    height:100%;
    object-fit: cover;
    border-radius: 0 10px 10px 0;
}

.consualtation_contents{
    width:50vw;
    padding-top:20vh;
    padding-bottom:50vh;
}
.consualtation_contents > div {
    margin-bottom:80px;
}

.consualtation_ttl{
    display:flex;
    align-items: flex-end;
    column-gap: 100px;
}
.consualtation_ttl h2{
    display:flex;
    flex-direction: column;
    line-height: 1.3;
    font-size:2.1em;
    margin:0;
}
.consualtation_ttl h2 span{
    font-size:.5em;
    color:#48a48f;
}

.consualtation_btn{
    margin:0;
    background:#48a48f;
    border-radius: 10px;
    width:100%;
    max-width:250px;
    display:inline-block;
    position:relative;
    overflow: hidden;
    transition:all .3s;
}
.consualtation_btn_block{
    display:flex;
    align-items: center;
    justify-content: center;
    color:#fff;
    padding:15px 20px;
    column-gap: 3px;
    position: relative;
}
.consualtation_btn_txt{
    font-weight:bold;
    font-size:1.2em;
}
.consualtation_btn_txt::after{
    content:"";
    display:inline-block;
    position:absolute;
    top:50%;
    right:7%;
    width:15px;
    height:12px;
    background-image:url(../images/btn_arrow.svg);
    background-repeat:no-repeat;
    background-size:cover;
    margin-left:3px;
    transition:all .3s;
    transform:translate(0, -50%);
}
.consualtation_btn:hover::before{
  transform: scaleY(1);
}
.consualtation_btn::before{
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: #398573;
  transform: scaleY(0);
  transition: all 0.3s ease;
  transition-property: transform;
}
.consualtation_btn:hover{
    transform:translateY(-5px);
    box-shadow: 0 0 15px rgba(0,0,0,.15);
}
.consualtation_btn:hover .consualtation_btn_txt::after {
    transform: translate(5px, -50%);
}

.consualtation_list{
    margin-top:80px;
}
.consualtation_item a{
    position:relative;
    font-size:1.4em;
    font-weight:bold;
    padding-left:2em;
    padding-top:5px;
    padding-bottom:5px;
    color:#45b3e0;
    display:block;
    width:100%;
    max-width:300px;
    border-bottom:1px solid #dde5e6;
}
.consualtation_item a::before{
    content:"";
    position:absolute;
    width:25px;
    height:26px;
    top:50%;
    left:0;
    transform:translateY(-50%);
    background-image:url(../images/dental01.svg);
    background-repeat:no-repeat;
    background-size:cover;
}
.consualtation_item a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    height:1px;
    width:100%;
    background:#45b3e0;
    transform:scaleX(0);
    transform-origin:left;
    transition:transform .3s ease-in-out;
}
.consualtation_item a:hover::after{
    transform: scaleX(1);
}

.consualtation_list02{
    margin-top:80px;
}
.consualtation_item02 a{
    position:relative;
    font-size:1.4em;
    font-weight:bold;
    padding-left:2em;
    padding-top:5px;
    padding-bottom:5px;
    color:#df94ac;
    display:block;
    width:100%;
    max-width:300px;
    border-bottom:1px solid #dde5e6;
}
.consualtation_item02 a::before{
    content:"";
    position:absolute;
    width:25px;
    height:26px;
    top:50%;
    left:0;
    transform:translateY(-50%);
    background-image:url(../images/dental02.svg);
    background-repeat:no-repeat;
    background-size:cover;
}
.consualtation_item02 a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    height:1px;
    width:100%;
    background:#df94ac;
    transform:scaleX(0);
    transform-origin:left;
    transition:transform .3s ease-in-out;
}
.consualtation_item02 a:hover::after{
    transform: scaleX(1);
}

/*院内マップ*/
.clinic_map{
    padding:150px 40px;
    width:100%;
    max-width:1500px;
    margin:0 auto;
}
.map_canvas{
    height:600px;
}
.map_canvas iframe{
    border-radius: 10px;
    height:100%;
}
.bunner{
    margin-top:100px;
}
.bunner_inner{
    display:flex;
    align-items: center;
    justify-content: center;
    gap:50px;
}
.bunner_img{
    width:100%;
    max-width:550px;
}
.bunner_img img{
    width:100%;
}
.bunner_img:hover{
    opacity:.6;
    transform:translateY(-5px);
    transition:all .3s;
}

/*詳細情報*/
.detail{
    padding:80px 40px;
    background:#eee;
}
.detail_map{
    flex: 1 1 50%;
    min-width:0;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.detail_inner{
    width:100%;
    max-width:1400px;
    margin:0 auto;
    display:flex;
    justify-content: center;
    align-items: flex-start;
    gap: 80px;
}
.detail_map_inner{
    width:100%;
    max-width:600px;
    aspect-ratio: 6/5;
    position:relative;
}
.detail_map_inner iframe{
    width:100%;
    height:100%;
    border-radius: 10px;
    position:absolute;
    top:0;
    left:0;
}
.detail_add{
    text-align: center;
    margin-bottom:0;
}

.detail_text{
    display:flex;
    flex-direction: column;
    gap:40px;
    flex:1 1 50%;
}
.detail_book{
    display:flex;
    align-items: center;
    column-gap: 30px;
}
.detail_tel{
    pointer-events: none;
}
.detail_tel_block img{
    width:2vw;
    max-width:30px;
}
.detail_tel_num{
    font-size:1.5em;
    font-weight:bold;
    line-height: 30px;
}
.detail_web{
    background:#48a48f;
    border-radius:10px;
    transition:all .3s;
    display:inline-block;
    position:relative;
    overflow: hidden;
}
.detail_web_txt{
    color:#fff;
    font-weight:bold;
    font-size: 1.5em;
}
.detail_web_block{
    display:flex;
    align-items: center;
    column-gap: .5em;
    padding: 4px 45px;
    position:relative;
    z-index:1;
}
.detail_web_block img{
    width:30px;
}
.detail_web:hover::before {
  transform: scaleY(1);
}
.detail_web::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: #398573;
  transform: scaleY(0);
  transition: all 0.5s ease;
  transition-property: transform;
}
.detail_sns{
    display:flex;
    column-gap: 15px;
}
.detial_sns_icon{
    width:35px;
    aspect-ratio: 1/1;
}
.detial_sns_icon img{
    width:100%;
    object-fit: cover;
}
.detial_sns_icon:hover{
    opacity:.6;
    transition:all .3s;
}
.detail_consual_list{
    display:flex;
    flex-direction: column;
    row-gap: 5px;
}
.detail_consual_item{
    display:flex;
    column-gap: 3em;
    font-size:1.1em;
}
.detail_consual_item span{
    font-weight:bold;
}
/*診療時間*/
.time_table2 th:first-child{
    padding-left:8px;
    padding-right:8px;
    font-size:105%;
}
.time_table2 th:not(:first-child){
    width:44px;
}
.time_table2 th{
    border-bottom:1px solid #48a48f;
    padding:8px 0;
}
.time_table_option{
    border-collapse: collapse;
}
.small{
    font-size:.8em;
}
.consual_time_text{
    margin:10px 0 0 0;
    line-height: 1.5;
    font-size:.9em;
}
.color_g{
    color:#48a48f;
}

/*フッター*/
.footer{
    padding:80px 40px 10px 40px;
}
.footer_inner{
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 80px;
}
.footer_nav_list{
    display:flex;
    column-gap: 40px;
}
.footer_nav_item{
    font-size:1.2em;
}
.footer_nav_item a{
    position:relative;
    padding-bottom:3px;
}
.footer_nav_item a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    height:1px;
    width:100%;
    background:#48a48f;
    transform:scaleX(0);
    transform-origin:left;
    transition:all .3s;
}
.footer_nav_item a:hover::after{
    transform:scaleX(1);
}
.footer_logo img{
    width:100%;
    max-width:320px;
}
.privacy{
    margin:0;
    text-align:center;
}
.privacy a:hover{
    opacity:.6;
    transition:all .3s;
}