@charset "UTF-8";
/*======================================
    common
======================================*/
html {
  font-family: 'Zen Maru Gothic', sans-serif;
  color: #000;
  scroll-behavior: smooth;
}

body {
  background-color: #fff;
}

a {
  color: #3FA24A;
  text-decoration: underline;
}

a:hover {
  color: #3FA24A;
  cursor: pointer;
  text-decoration: none;
}

a[target=_blank] {
	padding-right: 20px;
  margin-right: 10px;
	background: url(common/images/link-out.png) right center/15px auto no-repeat;
}

.main {
  clear: both;
  padding-top: 50px;
}

.inner {
  width: 1200px;
  max-width: 95%;
  margin: 0 auto;
}

.margTop {
  clear: both;
  padding-top: 100px;
}

h3 {
  text-decoration: underline; /* 下線 */
  text-decoration-thickness: 0.5em; /* 線の太さ */
  text-decoration-color: rgba(63, 162, 74, 0.4); /* 線の色 */
  text-underline-offset: -0.2em; /* 線の位置。テキストに重なるようにやや上部にする */
  text-decoration-skip-ink: none; /* 下線と文字列が重なる部分でも下線が省略されない（線が途切れない） */
}

@media screen and (max-width: 1024px) {
  .main {
      padding-top: 0px;
  }
  .is--sp {
    display: block;
  }
}

@media (min-width: 768px) {
  a[href*="tel:"] {
    pointer-events: none;
    cursor: default;
  }
}


/*===============================================================
    header
================================================================*/
.header--top {
  position: fixed;
  justify-content: space-between;
  width: 100%;
  background-color: rgba(255,255,255,0.9);
  border-bottom: 1px solid #ccc;
  top: 0;
  z-index: 1;
}

.header {
  position: sticky;
  justify-content: space-between;
  width: 100%;
  background-color: rgba(255,255,255,0.9);
  border-bottom: 1px solid #ccc;
  top: 0;
  z-index: 10;
}

.header__inner {
  display: flex;
  display: -webkit-box;
  display: -ms-flexbox;
  padding: 10px 20px;
}

.header__logo img {
  height: 60px;
}

.header__info {
  position: absolute;
  top: 0;
  left: auto;
  right: 0;
  bottom: 0;
}


@media screen and (max-width: 1024px) {
  .header {
    height: 80px;
  }
  .header__logo img {
    width: 80%;
    height: auto;
  }
}

/*===============================================================
    nav
================================================================*/
.Menu {
  width:100%;
  margin-top:20px;
}
ul,li {
  list-style:none;
  margin:0;
  padding:0;
}
.Menu li {
  float:left;
  padding: 0 1em;
  position:relative;/* ここで親要素を指定 */
}
  
.Menu li a {
  display:block;
  text-decoration:none;
  color:#000;
  padding:10px 0;
  position:relative;/* z-index用のpositionプロパティ */
  z-index:100;/* z-indexで前面に表示 */
}
.Menu li a:hover {
  text-decoration:underline;
  color: #3FA24A;
}

.Menu span.menu-none {
  display:block;
  text-decoration:none;
  color:#000;
  padding:10px 0;
  position:relative;/* z-index用のpositionプロパティ */
  z-index:100;/* z-indexで前面に表示 */
}

.Menu li ul.subMenu { 
  position:absolute;
  z-index:10;
  top:39px;
  display:none;/* ここを追加（普段は非表示になる） */
}
.Menu li:hover ul.subMenu {
  display:block;
}
.Menu li ul.subMenu li a {
  float:none;
  background: rgba(239, 236, 228, 0.7);
  border-right:none;
  border-bottom:1px solid #ccc;
  display:block;
  width: 250px;
  text-align: left;
  padding: 1em;
}

.Menu li ul.subMenu li:last-child a {
  border:none;
}

#menu-btn-check { /*チェックボックス消す*/
  display: none;
}

.init-bottom:after { /* 下矢印 */
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 0 0 5px;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.init-left:before { /* 右矢印 */
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 10px 0 0;
  border-top: 1px solid #000;
  border-right: 1px solid #000;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}


/*ハンバーガーメニュー*/
/*ボタン*/
@media screen and (max-width: 1024px) {
  .menu-btn {
    position: fixed;
    top: 10px;
    right: 10px;
    display: flex;
    height: 60px;
    width: 60px;
    justify-content: center;
    align-items: center;
    z-index: 90;
    background-color: #3FA24A;
  }
  .menu-btn span,
  .menu-btn span:before,
  .menu-btn span:after {
    content: '';
    display: block;
    height: 3px;
    width: 25px;
    border-radius: 3px;
    background-color: #ffffff;
    position: absolute;
  }
  .menu-btn span:before {
    bottom: 8px;
  }
  .menu-btn span:after {
    top: 8px;
  }
  #menu-btn-check:checked ~ .menu-btn span {
    background-color: rgba(255, 255, 255, 0);/*メニューオープン時は真ん中の線を透明にする*/
  }
  #menu-btn-check:checked ~ .menu-btn span::before {
    bottom: 0;
    transform: rotate(45deg);
  }
  #menu-btn-check:checked ~ .menu-btn span::after {
    top: 0;
    transform: rotate(-45deg);
  }
  #menu-btn-check:checked ~ .menu-content {
    left: 0;/*メニューを画面内へ*/
  }

  /*メニューコンテンツ*/
  .menu-content {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 100%;/*leftの値を変更してメニューを画面外へ*/
    z-index: 80;
    background-color: rgba(63,162,74,90%);
    transition: all 0.5s;/*アニメーション設定*/
    padding-top: 80px;
    overflow-y: scroll;
    text-align: left;
  }
  .menu-content ul.fst {
    padding-top: 70px;
  }
  .menu-content li {
    padding: 5px;
  }
  .menu-content ul ul {
    padding: 5px 0 0;
  }
  .menu-content ul li {
    border-bottom: solid 1px #ffffff;
    list-style: none;
  }
  .menu-content li li {
    border: none;
  }
  .menu-content ul li a {
    display: block;
    width: 100%;
    font-size: 90%;
    box-sizing: border-box;
    color:#ffffff;
    padding: 5px 15px 5px 0;
    position: relative;
  }
  .Menu span.menu-none {
    padding: 5px;
  }
  #menu-btn-check { /*チェックボックス消す*/
    display: none;
  }
  .Menu li{
    float: none;
    text-align: center;
  }
}

/*======================================
    bottom--layout（診療時間とアクセス地図）
======================================*/
.bottom--layout {
  margin: 0 auto;
  padding-top: 100px;
  justify-content: center;
  clear: both;
}

.bottom--layout--inner {
  display: flex;
}

.bottom--layout--inner a {
  color: #000;
  text-decoration: none;
}

.bottom--layout h3{
  margin-top: 30px;
  font-size: 3vh;
  padding-bottom: 0.5em;
  text-align: center;
  font-weight: 700;
}

/*診療時間*/
.bottom--layout .time {
  width: calc(100% / 2 - 10px);
  margin-bottom: 10px;
  padding: 20px 10px;
  background-color: #F6F7F2;
  border-radius: 20px;
} 

.bottom--layout .biz-hour {
  display: block;
  border-collapse: collapse;
  white-space: nowrap;
  margin-bottom: 10px;
}

.bottom--layout .biz-hour th {
  border-top: 1px solid #3FA24A;
  font-weight: 600;
}

.bottom--layout .biz-hour th, .biz-hour td {
  padding: 20px;
  text-align: center;
  border-bottom: 1px solid #3FA24A;
}

.bottom--layout p {
  line-height: 1.8em;
  padding-left: 1em;
}

/*電話番号*/
.bottom--layout .telbig ,
.footer__bottom .telbig {
  color: #3FA24A;
  font-size: 4vh;
  font-weight: 700;
}

.bottom--layout .tel--bottom ,
.footer__bottom .tel--bottom {
  color: #f00;
  margin-bottom: 0.5em;
}

/*アクセス地図*/
.bottom--layout .access {
  width: calc(100% / 2 - 10px);
  margin-bottom: 10px;
  padding: 20px 10px;
} 

/*強調*/
.bottom--layout .emphasis {
  color: #f00;
  font-size: 2vh;
  font-weight: 500;
}


@media screen and (max-width: 767px) {
  .bottom--layout--inner {
    display: block;
  }
  .bottom--layout  .biz-hour th, .biz-hour td {
    padding: 8px;
    width: auto;
  }
  .bottom--layout .time ,
  .bottom--layout .access {
    width: 100%;
  }
  .bottom--layout .biz-hour {
    white-space: normal;
  }
  .bottom--layout p {
    padding: 0;
  }
  .bottom--layout .emphasis {
    font-size: 2.5vh;
  }
}


/*===============================================================
    footer
===============================================================*/
.footer {
  clear: both;
  max-width: 95%;
  margin: 100px auto 0;
}

.footer .footer__contents {
  padding-top: 30px;
}

/*フッターメニュー*/
.footer .footer__contents--inner ul {
  display: flex;
  align-items: center;
  width: 100%;
  margin: 0 auto;
  line-height: 1.8em;
}

.footer .footer__contents--inner li {
  text-align: center;
  flex-grow: 1;
}

.footer .footer__contents--inner li+ li {
  border-left: 1px solid #ccc;
}

.footer .footer__contents--inner a {
  color: #000;
  text-decoration: none;
}

.footer .footer__contents--inner a:hover {
  color: #3FA24A;
  text-decoration: underline;
}

/*フッターボトムコンテンツ*/
.footer .footer__bottom {
  margin-bottom: 100px;
}

/*フッターロゴ*/
.footer .footer__bottom .logo--f {
  height: 60px;
  text-align: center;
  margin-top: 100px;
}

.footer .footer__bottom .logo--f img {
  height: 60px;
}

/*住所　TEL　FAX*/
.footer .footer__bottom .bottom--add-tel {
  margin: 1em auto;
  line-height: 1.8em;
  text-align: center;
}

.footer .footer__bottom .bottom--add-tel a {
  color: #000;
  text-decoration: none;
}

@media screen and (max-width: 767px) {
  .footer {
    margin: 50px auto 0;
  }
  .footer .footer__contents {
    padding: 0;
  }
  .footer .footer__contents--inner ul {
    display: none;
  }
  .footer .footer__bottom  {
    display: block;
  }
  .footer .footer__bottom .logo--f img {
    width: 80%;
    height: auto;
  }
}
/*======================================
    copyright（コピーライト）
======================================*/
.copyright {
  text-align: center;
  padding: 1em 0;
}


/*======================================
    page-top
======================================*/
/*ページトップ*/
#page-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  font-size: 77%;
}
#page-top a {
  background-color:#62c16d;
  text-decoration: none;
  color: #fff;
  width: 100px;
  padding: 30px 0;
  text-align: center;
  display: block;
  border-radius: 5px;
  border:1px solid #fff;
  filter: alpha (opacity=75);
  opacity: 0.75;
  z-index: 100;
}
#page-top a:hover {
  text-decoration: none;
  background-color: #3FA24A;
}


/*===============================================================
    コンテンツ共通
================================================================*/
/*======================================
    eyecatch（コンテンツ画像）
======================================*/
.eyecatch {
  position: relative;
	width: 100vw;
  height: 400px;
  overflow: hidden;
  top: 0;
}
.eyecatch__img {
	width: 100vw;
	height: 400px;
	background-position: center center;
	background-repeat: no-repeat;
  object-fit: cover;
	border-radius: 0 0 100px 100px;
}

.title--text-box {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.title--text-box .title--main {
  padding: 30px 0 0;
  text-align: center;
  color: #fff;
  font-size: 3vw;
  line-height: 1.5;
  font-weight: 700;
  text-shadow: 0 0 10px #000;
}

@media screen and (max-width: 1024px) {
  .eyecatch {
    height: 200px;
  }
  .eyecatch__img {
    height: 200px;
    border-radius: 0;
  }
  .title--text-box .title--main {
    font-size: 3vh;
  }
}


/*======================================
    breadcrumb（パンクズ）
======================================*/
.breadcrumb {
  padding: 10px;
  font-size: 1.8vh;
  text-align: right;
}

.breadcrumb a:hover {
  color: #94645B;
}

@media screen and (max-width: 1024px) {
  .breadcrumb {
    padding-bottom: 50px;
  }
}

/*======================================
    page--layout（ページ）
======================================*/
.page--layout {
  margin: 0 auto;
  line-height: 1.5;
  clear: both;
}

.page--layout h3 {
  font-size: 3vh;
  font-weight: 700;
  margin-bottom: 1em;
  scroll-margin-top: 100px;
  text-align: center;
  clear: both;
  margin-bottom: 50px;
}

.page--layout h4 {
  font-size: 2.5vh;
  font-weight: 700;
  margin: 20px 0;
}

.page--layout h5 {
  font-size: 1.8vh;
  font-weight: 700;
  margin: 20px 0;
}

.page--layout p {
  line-height: 1.8;
  margin-bottom: 1em;
}

.page--layout ul {
  margin-block-start: 1em;
  margin-block-end: 1em;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0PX;
    -webkit-padding-start: 40px;
}

.page--layout li {
  display: list-item;
  text-align: -webkit-match-parent;
  text-align: match-parent;
  list-style-type: disc;
}
.page--layout ol {
    list-style-type: decimal;
    margin-block-start: 1em;
    margin-block-end: 1em;
      -webkit-margin-before: 1em;
      -webkit-margin-after: 1em;
      -webkit-margin-start: 0px;
      -webkit-margin-end: 0PX;
      -webkit-padding-start: 40px;
}

@media screen and (max-width: 1024px) {
}

/*======================================
    signature（署名）
======================================*/
.signature {
  display: inline-block;
  float: right;
  margin-top: 50px;
}

.signature .name {
  font-family: 'Hiragino Mincho ProN', sans-serif;
  font-size: 3vh;
  font-weight: 700;
  margin-left: 1em;
}

@media screen and (max-width: 1024px) {
  .signature {
    float: none;
    margin-top: 30px;
  }
}


/*===============================================================
    HOME
===============================================================*/
/*======================================
    eyecatch--top（メイン画像）
======================================*/
.eyecatch--top {
  position: relative;
	width: 100vw;
  height: 540px;
  overflow: hidden;
  top: 0;
}
.eyecatch--top .eyecatch__img {
	width: 100vw;
	height: 540px;
	background-position: center center;
	background-repeat: no-repeat;
  object-fit: cover;
	border-radius: 0 0 100px 100px;
}

@media screen and (max-width: 1024px) {
  .eyecatch--top {
    height: 200px;
  }
  .eyecatch--top .eyecatch__img {
    height: 200px;
    border-radius: 0;
  }
}
/*======================================
    top--title
======================================*/
.top--title {
  text-align: center;
  line-height: 1.5em;
}

.top--title p {
  font-size: 3vh;
  padding-bottom: 0.5em;
  font-weight: 700;
}

@media screen and (max-width: 1024px) {
.top--title {
  margin-top: 30px;
}
.top--title p {
  font-size: 2vh;
  padding: 0;
}
}

/*======================================
    top--greeting（あいさつ）
======================================*/
.top--greeting {
  clear: both;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 100px auto 0;
  width: 1200px;
}

.top--greeting .txt--boxL {
  width: 30%;
}

.top--greeting .txt--boxL img {
  width: 300px;
  height: 280px;
  border-radius: 20px;
  object-fit: cover;
}

.top--greeting .txt--boxR {
  width: 70%;
  padding-left: 1em;
}

.top--greeting .txt--boxR p {
  line-height: 1.8em;
}

.top--greeting .displays {
    display: none;
}


@media screen and (max-width: 1024px) {
  .top--greeting {
    width: 95%;
    display: block;
    margin-top: 30px;
  } 

  .top--greeting .disp--none {
    display: none;
  }

  .top--greeting .displays {
      display: block;
  }

  .top--greeting .txt--boxL {
      width: 100%;
      text-align: center;
  }

  .top--greeting .txt--boxR {
      width: 100%;
      padding: 0;
  }

  .top--greeting .txt--boxL img {
    width: auto;
    height: 200px;
    margin: 30px 0;
  }
}

/*======================================
    top--features（特徴）
======================================*/
.top--features {
  clear: both;
  margin-top: 100px;
}

.top--features h3 {
  font-size: 3vh;
  padding-bottom: 0.5em;
  text-align: center;
  font-weight: 700;
}

.top--features h4 {
  font-size: 2.5vh;
  padding-bottom: 0.5em;
  font-weight: 700;
  color: #3FA24A;
  text-decoration: underline; /* 下線 */
  text-decoration-thickness: 0.2em; /* 線の太さ */
  text-decoration-color: rgba(0, 0, 0, 0.2); /* 線の色 */
  text-underline-offset: 0em; /* 線の位置。テキストに重なるようにやや上部にする */
  text-decoration-skip-ink: none; /* 下線と文字列が重なる部分でも下線が省略されない（線が途切れない） */
}

.top--features p {
  line-height: 1.8em;
}

.top--features .features {
  margin: 2em 0;
  padding: 0.5em 1em;
  border-bottom: solid 3px #3FA24A;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
  border-radius: 9px;
}


@media screen and (max-width: 1024px) {
  .top--features {
    margin: 0 auto;
    padding-top: 50px;
  }
}

/*======================================
    top--news（お知らせ）
======================================*/
.top--notice {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 100px auto 0;
  width: 1200px;
}

.top--notice .txt--boxL {
  width: 30%;
}

.top--notice .txt--boxR {
  width: 70%;
  padding-left: 1em;
}

.top--notice .txt--boxL h2 {
  font-weight: 700;
  font-size: 4vw;
}

.top--notice .txt--boxL span.sub--title {
  display: block;
  margin-top: 1.5em;
  font-size: 2vh;
}

.top--notice {
  line-height: 1.8em;
}

.notice--box {
  padding: 1em 0;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  line-height: 1.8em;
}

.notice--box .notice--title {
  font-weight: 500;
  font-size: 2.5vh;
  display: block;
  margin-bottom: 0.5em;
}

@media screen and (max-width: 1024px) {
  .top--notice {
    width: 100%;
    display: block;
    padding: 1em;
    margin-top: 30px;
    border-radius: 0;
  } 
  .top--notice .txt--boxL {
    width: 100%;
  }
  .top--notice .txt--boxR {
    width: 100%;
    padding: 0;
  }
  .top--notice .txt--boxL h2 {
  font-size: 4vh;
  }
  .top--notice .txt--boxL span.sub--title {
    margin-top: 0;
    margin-top: 0.5em;
  }
  .notice--box {
    margin-top: 15px;
  }
}


/*===============================================================
    clinic（クリニック概要）
================================================================*/
.clinic {
  display: flex;
  display: -webkit-box;
  display: -ms-flexbox;
  margin-bottom: 50px;
}
.clinic .clinic--left {
  width: calc(100% / 2 - 10px);
  margin-right: 20px;
}

.clinic .clinic--left  dl {
  display: flex;
  display: -webkit-box;
  display: -ms-flexbox;
  border-bottom: 1px solid #ccc;
  padding-bottom: 0.5em;
  margin-bottom: 1em;
}

.clinic .clinic--left  dt {
  width: 12em;
  font-weight: 500;
}

.clinic .clinic--left  dd {
  margin-right: auto;
}

.clinic .clinic--left  a {
  color: #000;
  text-decoration: none;
}

.clinic .clinic--right {
  width: calc(100% / 2 - 10px);
}

.clinic .clinic--right img {
  object-fit: cover;
}


@media screen and (max-width: 767px) {
  .clinic {
    display: block;
  }
  .clinic .clinic--left ,
  .clinic .clinic--right {
    width: 100%;
  }
  .clinic .clinic--left  dl {
    display: block;
  }
  .clinic .clinic--right img {
    width: 100%;
  }
}



/*===============================================================
    その他個別設定
================================================================*/
/*======================================
　レイアウトスクロールCSS
======================================*/
.scroll-space{
  overflow: hidden;
}

.scrollin{
  opacity: 1 !important;
  transform: translate(0, 0) !important;
}

/*--------- フェードイン --------*/
.fadein {
    opacity: 0;
    transform: translate(0,0);
    transition: all 1.5s;
}
.fadein-left{
    transform: translate(-300px,0);
}
.fadein-right{
    transform: translate(300px,0);
}
.fadein-up{
    transform: translate(0,-300px);
}
.fadein-bottom{
    transform: translate(0,300px);
}

/*--------- スライドイン --------*/
.slidein {
  opacity: 0;
  transform: translate(0,0);
  transition: all 1.0s;
}
.slidein-left{
    transform: translate(-100%,0);
}
.slidein-right{
    transform: translate(100%,0);
}
.slidein-up{
    transform: translate(0,-100%);
}
.slidein-bottom{
    transform: translate(0,100%);
}

/*--------- スライドイン（読み込まれたら直ぐに） --------*/
.fadein-Immediately {
  display: none;
}