@charset "UTF-8";
html {
  font-size: 100%;
}

body {
  font-size: 0.9rem;
  color: #252525;
  background-color: #f2efec;
  font-family: "ヒラギノ丸ゴ Pro W4", "ヒラギノ丸ゴ Pro", "Hiragino Maru Gothic Pro", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "HG丸ｺﾞｼｯｸM-PRO", "HGMaruGothicMPRO";
}

ul {
  list-style: none;
}

img {
  max-width: 100%;
}

a {
  text-decoration: none;
}

/*------------------------
GENERAL SETTING
------------------------*/
.wrapper {
  width: 1000px;
  margin: 0 auto;
}

/*------------------------
HEADER
------------------------*/
.hero-wrapper {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr;
  width: 100vh;
  height: 100vw;
  width: 100%;
  height: 100%;
}

.hero-contents {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.hero-title-flex {
  color: #782b1c;
  display: flex;
  flex-direction: column;
  margin-right: 15px;
}

.hero-title-upper {
  writing-mode: vertical-lr;
  margin-top: 15px;
}

.hero-main-title {
  font-size: 5rem;
  margin-top: 20px;
  margin-left: 15px;
}

.circle-underline {
  position: relative;
}
.circle-underline:after {
  position: absolute;
  left: -15px;
  background: radial-gradient(circle farthest-side, #75ad7c, #75ad7c 30%, transparent 30%, transparent);
  background-size: 30px 18px;
  content: "";
  display: inline-block;
  height: 590px;
  width: 30px;
  margin-top: 10px;
}

.hero-sub-title {
  margin-top: 35px;
  margin-left: 20px;
  font-size: 1.2rem;
}

.hero-title-lower {
  width: 150px;
  height: 150px;
  margin-left: 25px;
}

.hero-right-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 83vh;
  margin-top: 15px;
  justify-content: end;
  height: 100vh;
}
.hero-right-grid .hero-grid-uLeft {
  margin-top: 13px;
}
.hero-right-grid .hero-grid-uLeft p:last-child {
  margin-left: 33px;
}
.hero-right-grid p {
  font-size: 0.7rem;
  letter-spacing: 2px;
}
.hero-right-grid .telIcon {
  width: 20px;
  height: 20px;
  margin: 12px 10px 0 10px;
  filter: invert(72%) sepia(120%) saturate(2228%) hue-rotate(2deg) brightness(100%) contrast(88%);
}
.hero-right-grid h3 {
  font-size: 1.6rem;
  font-weight: 100;
  letter-spacing: 8.3px;
}
.hero-right-grid .mainvisual {
  grid-column: 1/3;
  display: grid;
  position: relative;
}
.hero-right-grid .mainvisual img {
  width: 81vw;
  height: 83vh;
  max-width: 100%;
  object-fit: cover;
  border-radius: 100px 0 0 100px;
}
.hero-right-grid .mainvisual .visualforward {
  position: absolute;
  top: 0;
  left: 0;
  background: radial-gradient(ellipse, transparent 0%, rgba(120, 190, 70, 0.4) 45%, rgba(110, 158, 60, 0.2) 67%, transparent 75%);
}

.consultation-time {
  display: grid;
  grid-template-columns: 2.5fr repeat(7, 1fr);
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: column;
  gap: 2px;
  font-size: 0.8rem;
  height: 11vh;
  margin-right: 15px;
}
.consultation-time dt {
  background-color: #782b1c;
  color: #f3f3f3;
  padding: 6px 1px;
  display: grid;
  place-items: center;
}
.consultation-time dd {
  background-color: #fcfcfc;
  display: grid;
  place-items: center;
  color: black;
}
.consultation-time .cons-time {
  display: grid;
  place-items: center;
}
.consultation-time .time {
  font-size: 0.5rem;
  display: grid;
  place-items: center;
}

.circle {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: black;
}

#js-pagetop {
  position: fixed;
  width: 50px;
  height: 50px;
  border: 3px solid rgba(117, 173, 124, 0.8);
  border-radius: 50%;
  bottom: 50px;
  right: 25px;
  cursor: pointer;
  z-index: 20;
}

#js-pagetop::after {
  content: "";
  position: absolute;
  top: 18px;
  left: 14px;
  width: 15px;
  height: 15px;
  border-top: 3px solid rgba(117, 173, 124, 0.8);
  border-right: 3px solid rgba(117, 173, 124, 0.8);
  transform: rotate(-45deg);
}

/*------------------------------------
Hamburger Menu
------------------------------------*/
.menu-wrapper {
  position: relative;
}

.menu-nav {
  position: fixed;
  right: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  transform: translateX(100%);
  background-color: #782b1c;
  transition: ease 1.2s;
  z-index: 20;
  /* visibility: hidden; */
}

.menu-nav.active {
  transform: translateX(0);
  transition: ease 1.2s;
  /* visibility: visible; */
}

.menu-nav .nav-items {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding: 0;
  position: absolute;
  height: 100vh;
  margin: 0 auto;
  top: 30px;
  transform: trnslate(-50%, -50%);
}

.menu-nav .nav-items li {
  display: block;
  width: 100vw;
  height: 100px;
}

.menu-nav .nav-items li a {
  width: 100%;
  display: block;
  text-align: center;
  color: white;
}

.menu-nav .nav-items-item .nav-items-item:last-child a {
  margin-bottom: 0;
}

/*------------------------
INFO
------------------------*/
.info {
  background-color: #e1cfcb;
  font-size: 1rem;
  margin-top: 30px;
}
.info .information-flex {
  display: flex;
  justify-content: center;
}
.info .information-flex .information .info-form {
  display: flex;
  margin-top: 35px;
  margin-right: 40px;
}
.info .information-flex .info-contents {
  background-color: #f3f3f3;
  height: 130px;
  min-width: 500px;
  width: 70%;
  border-radius: 10px;
  margin: 30px 0;
}
.info .information-flex .info-contents dl {
  display: flex;
  margin: 15px 0 0 50px;
}
.info .information-flex .info-contents dl dt {
  margin-right: 100px;
}
.info img {
  width: 25px;
  height: 25px;
}
.info button {
  margin-top: 126px;
  margin-left: 40px;
  background-color: #4b3c3b;
  padding: 0 20px;
  height: 33px;
  width: 100px;
}
.info button a {
  color: #f3f3f3;
}

/*------------------------
PAGE-NAV
------------------------*/
.page-nav {
  display: flex;
  width: 70%;
  justify-content: space-between;
  margin-top: 30px;
  margin-bottom: 20px;
}
.page-nav .nav-box {
  height: 110px;
  width: 110px;
  display: grid;
  place-items: center;
}
.page-nav .nav-box img {
  height: 60px;
  width: 60px;
}
.page-nav .nav-box p {
  color: #252525;
}

.page-nav a:hover p {
  border-top: 2px dashed #782b1c;
  border-bottom: 2px dashed #782b1c;
  margin-top: -2px;
}

.page-nav a:hover img {
  margin-top: -2px;
}

/*------------------------
CONTENTS-LINK
------------------------*/
.contents-link {
  background-color: #fcfcfc;
  border-radius: 50px;
  padding: 30px 30px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  justify-items: center;
  grid-row-gap: 30px;
  grid-column-gap: 15px;
}
.contents-link a {
  color: #454545;
}
.contents-link .content-box {
  background-color: #f2efec;
  border-radius: 30px;
  display: grid;
  grid-template-columns: 65px 1fr;
  grid-template-rows: 180px 170px;
  grid-row-gap: 20px;
  grid-column-gap: 30px;
  justify-items: center;
  width: 250px;
}
.contents-link .content-box img {
  width: 230px;
  height: 180px;
  grid-column: 1/3;
  grid-row: 1/2;
  border-radius: 25px;
  margin-top: 10px;
}
.contents-link .content-box h4 {
  font-size: 1.2rem;
  grid-column: 1/2;
  grid-row: 2/3;
  writing-mode: vertical-lr;
  margin-top: 10px;
  margin-left: 25px;
  position: relative;
}
.contents-link .content-box h4::after {
  position: absolute;
  top: -5px;
  left: 25px;
  background: radial-gradient(circle farthest-side, #75ad7c, #75ad7c 30%, transparent 30%, transparent);
  background-size: 18px 13px;
  content: "";
  display: inline-block;
  height: 90px;
  width: 15px;
}
.contents-link .content-box p {
  font-size: 0.8rem;
  grid-column: 2/3;
  grid-row: 2/3;
  margin-top: 20px;
  margin-right: 20px;
}
.contents-link a:nth-child(4) h4:after {
  top: -8px;
  height: 115px;
}
.contents-link a:nth-child(5) h4:after {
  top: -8px;
  height: 115px;
}
.contents-link a:nth-child(6) h4:after {
  top: -8px;
  height: 155px;
}
.contents-link a:nth-child(5) img {
  object-fit: cover;
  object-position: 50% 10%;
}
.contents-link a:nth-child(6) img {
  object-fit: cover;
  object-position: 50% 63%;
}

/*------------------------
FEATURE-LINK
------------------------*/
.feature-link {
  margin: 110px auto 50px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  color: #555555;
  text-align: center;
}
.feature-link h3 {
  font-size: 1.2rem;
  text-align: center;
  margin: 0 200px 80px;
  position: relative;
}
.feature-link h3::after {
  position: absolute;
  top: 21px;
  left: -5px;
  background: radial-gradient(circle farthest-side, #75ad7c, #75ad7c 30%, transparent 30%, transparent);
  background-size: 10px 13px;
  content: "";
  display: inline-block;
  height: 15px;
  width: 400px;
}
.feature-link .feature-box {
  width: 320px;
  height: auto;
  border-radius: 30px;
  background-color: #fcfcfc;
  margin: 0 35px;
}
.feature-link .feature-box h2 {
  text-align: center;
  font-size: 1.8rem;
  margin: 10px 0 5px;
}
.feature-link .feature-box h5 {
  text-align: center;
  font-size: 0.9rem;
  font-weight: lighter;
}
.feature-link .feature-box p {
  font-size: 0.8rem;
  margin: 15px 30px 35px;
  font-weight: lighter;
}
.feature-link .feature-box img {
  width: 320px;
  height: 208px;
  border-radius: 30px 30px 0 0;
}

/*------------------------
INFO & MAP
------------------------*/
.infoMap {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #fcfcfc;
  border-radius: 30px;
  padding: 30px 0;
}
.infoMap h4 {
  font-size: 1.2rem;
}
.infoMap p {
  font-size: 0.8rem;
}
.infoMap .infoMap-title {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.infoMap .infoMap-title img {
  width: 50px;
  height: 50px;
  align-items: center;
}
.infoMap .mapInfo-flex img {
  width: 30px;
  height: 30px;
  filter: invert(72%) sepia(120%) saturate(2228%) hue-rotate(2deg) brightness(100%) contrast(88%);
}
.infoMap .tel-grid {
  display: grid;
  grid-template-columns: 40px 1fr;
  grid-template-rows: 1fr 25px 20px;
}
.infoMap .tel-grid .tel-info {
  grid-column: 1/3;
  grid-row: 1/2;
  font-size: 0.7rem;
}
.infoMap .tel-grid img {
  grid-column: 1/2;
  grid-row: 2/4;
  margin-top: 10px;
}
.infoMap .tel-grid .tel-no {
  grid-column: 2/3;
  grid-row: 2/3;
  font-size: 1.3rem;
  margin-top: 2px;
}
.infoMap .tel-grid .tel-time {
  grid-column: 2/3;
  grid-row: 3/4;
  font-size: 0.7rem;
  margin-top: 5px;
}
.infoMap .address-grid {
  margin-top: 30px;
  display: grid;
  grid-template-columns: 40px 1fr;
  grid-template-rows: 1fr 1fr;
}
.infoMap .address-grid img {
  grid-column: 1/2;
  grid-row: 1/3;
  margin-top: 3px;
}
.infoMap .address-grid .post-code {
  font-size: 0.7rem;
}
.infoMap .address-flex {
  margin-top: 30px;
  display: flex;
}
.infoMap .address-flex p {
  margin-top: 5px;
  margin-left: 10px;
}

.info-map-flex {
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
  width: 900px;
}
.info-map-flex .mapInfo-flex {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.info-map-flex .map img {
  width: 450px;
  height: 230px;
}

/*------------------------
FOOTER
------------------------*/
.footer-consultation-flex {
  background-color: #e1cfcb;
  margin-top: 50px;
}
.footer-consultation-flex .footer-cons-wrapper {
  display: flex;
  flex-direction: column;
  width: 800px;
  margin: 0 auto;
}
.footer-consultation-flex .footer-cons-wrapper p:last-child {
  margin: 0 0 25px;
}
.footer-consultation-flex p {
  margin: 15px 0;
  font-size: 0.8rem;
}
.footer-consultation-flex .c-name {
  display: flex;
  align-items: center;
  margin-top: 15px;
}
.footer-consultation-flex .c-name img {
  width: 30px;
  height: 30px;
  margin-right: 3px;
}
.footer-consultation-flex .c-name h4 {
  font-size: 1.3rem;
  font-weight: lighter;
}
.footer-consultation-flex .f-cons01 {
  align-self: center;
  font-size: 0.7rem;
  margin-bottom: 20px;
}
.footer-consultation-flex .consultation-time {
  width: 400px;
}

.footer-link-container {
  background-color: #782b1c;
  color: #fcfcfc;
}
.footer-link-container .footer-link-flex {
  margin: 0 auto;
  padding: 50px 0;
  display: flex;
  width: 800px;
  justify-content: space-between;
}
.footer-link-container .footer-link-flex .footer-link-box {
  display: flex;
  flex-direction: column;
}
.footer-link-container a {
  color: #fcfcfc;
  font-size: 0.7rem;
  text-decoration: underline;
  margin: 0 0 10px;
}
.footer-link-container p {
  text-align: center;
  font-size: 0.6rem;
  padding-bottom: 10px;
}

/*# sourceMappingURL=style.css.map */