@charset "UTF-8";
:root {
  --bon-jour: #dfdfdf;
  --commonwhite: #ffffff;
  --gravel: #484848;
  --maincolor: #000000;
  --white: #ffffff;
  --font-size-l: 32px;
  --font-size-m: 18px;
  --font-size-s: 20px;
  --font-size-xl: 36px;
  --font-size-xxl: 42px;
  --font-size-xxxl: 48px;
  --font-family-base: "Noto Sans JP", Helvetica;
  --menubar-width: 80px ;
}

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  color: var(--gravel);
}

/*#wrapper {
	padding-right: var(--menubar-width);
}*/
header + div {
  margin-top: 0;
}

.top {
  align-items: center;
  background-color: var(--commonwhite);
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
  margin: 0 auto;
  max-width: 1040px;
}

.top .kv {
  align-items: flex-start;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 10px;
  position: relative;
  width: 100%;
}

.top .kv-004-1-1 {
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
  position: relative;
  width: 100%;
}

h1 {
  width: 100%;
  margin: 20px auto 20px auto;
  display: flex;
  font-size: 42px;
  font-weight: bold;
  justify-content: center;
  align-items: center;
  text-align: center;
}
h1 img {
  margin-right: 25px;
  width: 91px;
}

h2 {
  width: 100%;
  margin: 20px auto 20px auto;
  display: flex;
  font-size: 38px;
}

p {
  margin-bottom: 12px;
  font-family: var(--font-family-base);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.1px;
  line-height: 22px;
  color: var(--gravel);
}

.buttongreen {
  background: linear-gradient(334deg, rgb(0, 177, 127) 0%, rgb(135, 197, 179) 100%);
  border: 2px solid;
  border-color: var(--bon-jour);
  border-radius: 8px;
  box-shadow: 20px 20px 30px rgba(0, 0, 0, 0.2);
  height: 64px;
  overflow: hidden;
  position: relative;
  width: 300px;
  margin: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.buttongreen.center {
  width: 380px;
  margin: 40px auto;
}
.buttongreen div {
  text-align: center;
  color: var(--commonwhite);
  font-family: var(--font-family-base);
  font-size: var(--font-size-s);
  font-style: normal;
  font-weight: 400;
}
.buttongreen div.small {
  font-size: 16px;
  line-height: 18px;
}

img.shadow {
  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.15);
  border-radius: 8px;
}

/* header Tag内非表示*/
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/*PC サイドメニュー　SP スライドメニュー*/
.navflexarea {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
}

.navflexarea .sidenavarea {
  width: 230px;
  background-color: #fff;
}

.navflexarea .sidenavarea nav {
  background-color: #fff;
}

.navflexarea .sidenavarea nav h2 {
  margin-bottom: 0px;
  margin-top: 56px;
  margin-top: 0;
}

.navflexarea .sidenavarea nav h2 a {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 5px 0 10px;
  font-size: 16px !important;
  width: 100%;
  box-sizing: border-box;
  height: 3.6em;
  color: #484848;
  line-height: 1.3;
  border-bottom: 1.5px solid #009966; /*border-top: 1px dotted #009966;*/
}

.navflexarea .sidenavarea nav h2 a span {
  transition: transform 0.3s ease-in-out;
  display: block;
  font-weight: bold;
  font-size: 1em;
}

.navflexarea .sidenavarea nav h2 a:hover span {
  transform: translate(5px, 0);
  transition: transform 0.3s ease-in-out;
}

.navflexarea .sidenavarea nav ul.menu li {
  border-bottom: 1px dotted #999;
}

.navflexarea .sidenavarea nav ul.menu li a {
  height: 3.6em;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 5px 0 10px;
  color: #484848;
  line-height: 1.3; /*font-size: 15px;*/
  font-size: 14.5px;
  position: relative;
}

.navflexarea .sidenavarea nav ul.menu li a span {
  padding-left: 0px;
  padding-right: 1.75em;
  transition: transform 0.3s ease-in-out;
}

.navflexarea .sidenavarea nav ul.menu li a:hover span {
  transform: translate(5px, 0);
  transition: transform 0.3s ease-in-out;
}

.navflexarea .sidenavarea nav ul.menu li > a[target=_blank]::after {
  content: "";
  position: absolute;
  top: 20px;
  right: 10px;
  background: url(/common/img/icn_blank_gray.svg) no-repeat left center;
  background-size: auto;
  background-size: 14px;
  width: 14px;
  height: 14px;
}

.navflexarea .ctsallarea {
  width: 770px;
}

.navflexarea .sidenavarea nav ul.menu li:has(+ .toctie) {
  border-bottom: 1px solid #096;
}

/* 現在ページの表示状況*/
body.dx .navflexarea .sidenavarea nav ul.menu li.dx a,
body.group .navflexarea .sidenavarea nav ul.menu li.group a,
body.management .navflexarea .sidenavarea nav ul.menu li.management a,
body.strengths .navflexarea .sidenavarea nav ul.menu li.strengths a,
body.topmessage .navflexarea .sidenavarea nav ul.menu li.topmessage a,
body.numbers .navflexarea .sidenavarea nav ul.menu li.numbers a,
body.history .navflexarea .sidenavarea nav ul.menu li.history a {
  color: #009966;
  background-color: #f6f6f6;
  pointer-events: none;
}

body.dx .navflexarea .sidenavarea nav ul.menu li.dx a:before,
body.group .navflexarea .sidenavarea nav ul.menu li.group a:before,
body.management .navflexarea .sidenavarea nav ul.menu li.management a:before,
body.strengths .navflexarea .sidenavarea nav ul.menu li.strengths a:before,
body.topmessage .navflexarea .sidenavarea nav ul.menu li.topmessage a:before,
body.numbers .navflexarea .sidenavarea nav ul.menu li.numbers a:before,
body.history .navflexarea .sidenavarea nav ul.menu li.history a:before {
  content: "";
  background: url(/common/img/icn_arw_r_green_s.svg) no-repeat left top;
  background-size: 5px;
  width: 5px;
  height: 8px;
}

body.dx .navflexarea .sidenavarea nav ul.menu li.dx a span,
body.group .navflexarea .sidenavarea nav ul.menu li.group a span,
body.management .navflexarea .sidenavarea nav ul.menu li.management a span,
body.strengths .navflexarea .sidenavarea nav ul.menu li.strengths a span,
body.topmessage .navflexarea .sidenavarea nav ul.menu li.topmessage a span,
body.numbers .navflexarea .sidenavarea nav ul.menu li.numbers a span,
body.history .navflexarea .sidenavarea nav ul.menu li.history a span {
  padding-left: 0.65em;
  transform: translate(0, 0);
}

body.dx .navflexarea .sidenavarea nav ul.menu li.dx a span,
body.group .navflexarea .sidenavarea nav ul.menu li.group a span,
body.management .navflexarea .sidenavarea nav ul.menu li.management a span,
body.strengths .navflexarea .sidenavarea nav ul.menu li.strengths a span,
body.topmessage .navflexarea .sidenavarea nav ul.menu li.topmessage a span,
body.numbers .navflexarea .sidenavarea nav ul.menu li.numbers a span,
body.history .navflexarea .sidenavarea nav ul.menu li.history a span {
  transform: scale(0.96, 1);
  width: 104.16%;
  margin-left: 0;
  margin-right: -4.16%;
}

.hamb-btn, .x-btn {
  display: none;
}

@media screen and (max-width: 768px) {
  .navflexarea {
    padding: 0 !important;
  }
  .navflexarea .sidenavarea {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 10000;
    background-color: #fff;
  }
  .navflexarea .sidenavarea nav {
    overflow: auto;
    height: calc(100% - 90px);
    height: 100%; /*background-color: #d3d3c4;*/
    background: linear-gradient(to bottom, #fff 0%, #fff 50%, #d3d3c4 50%, #d3d3c4 100%);
  }
  .navflexarea .sidenavarea nav h2 { /*margin-top: -10px;*/
    background-color: #fff;
  }
  .navflexarea .sidenavarea nav h2 a {
    font-size: 16px !important;
    padding: 0 5%;
  }
  .navflexarea .sidenavarea nav ul.menu li {
    background-color: #fff;
  }
  .navflexarea .sidenavarea nav ul.menu li a {
    padding: 0 5%;
    font-size: 14px;
  }
  .navflexarea .sidenavarea nav ul.menu li > a[target=_blank]::after {
    top: 18px;
    right: 1em;
    background-size: 12px;
    width: 12px;
    height: 12px;
  }
  .navflexarea .ctsallarea {
    width: 100%;
    padding: 0 5%;
    box-sizing: border-box;
  }
  .navflexarea .sidenavarea {
    left: -100%;
    transition: all 0.3s ease;
    top: 0;
    border-top: 44px solid #e4f5f1;
  }
  .navflexarea .sidenavarea.active {
    left: 0;
    transition: all 0.3s ease;
  }
  .hamb-btn {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 40px;
    height: 40px;
    background-color: #282828;
    border: none;
    cursor: pointer;
    z-index: 10005;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4.5px;
    padding: 0;
    transition: background-color 0.3s ease;
    color: #fff;
    font-size: 7px;
    font-style: normal;
    font-weight: 400;
  }
  .hamb-btn span {
    display: block;
    width: 24px;
    height: 1.5px;
    background-color: #ffffff;
    transition: all 0.3s ease;
    pointer-events: none;
  }
  .hamb-btn.menu-open {
    cursor: default;
  }
  .hamb-btn.menu-open span {
    opacity: 0;
  }
  .x-btn {
    position: absolute;
    top: 7px;
    right: 2px;
    width: 40px;
    height: 40px;
    background-color: transparent;
    border: none;
    color: #ffffff;
    font-size: 24px;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    line-height: 1;
    z-index: 10006;
    transition: transform 0.3s ease;
    transition: all 0.3s ease;
  }
  .x-btn.active {
    display: flex;
  }
}
/* ハンバーガーメニューのスタイル 

.hamburger-btn {
  position: fixed;
  top: 0;
  right: 0;
  width: var(--menubar-width);
  height: 100%;
  background-color: #282828;
  border: none;
  cursor: pointer;
  z-index: 1005;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 0;
  transition: background-color 0.3s ease;
  color: var(--commonwhite);
  font-family: var(--font-family-base);
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
}

.hamburger-btn:hover {
  background-color: #333333;
}

.hamburger-btn span {
  display: block;
  width: 30px;
  height: 3px;
  background-color: #ffffff;
  transition: all 0.3s ease;
  pointer-events: none;
}*/
/* メニューが開いた時、三本線を非表示にする 
.hamburger-btn.menu-open span {
  opacity: 0;
}*/
/* メニューが開いた時、縦バー自体はクリックできるようにする（背景は維持） 
.hamburger-btn.menu-open {
  cursor: default;
}*/
/* オーバーレイ(背景を暗くする) 
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: calc(100% - var(--menubar-width));
  height: 100%;
  background-color: rgba(0, 0, 0, 0);
  z-index: 1001;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease, background-color 0.3s ease;
}

.overlay.active {
  opacity: 1;
  visibility: visible;
  background-color: #d3d3c4;
}
*/
/* サイドメニュー 
.side-menu {
  position: fixed;
  top: 0;
  right: -100%;
  width: calc(100% - var(--menubar-width));
  max-width: 900px;
  height: 100%;
  background-color: #ffffff;
  z-index: 1002;
  overflow-y: auto;
  transition: right 0.4s ease;
  padding: 60px var(--menubar-width) 80px 100px;
}

.side-menu.active {
  right: var(--menubar-width);
}
*/
/* 閉じるボタン - 右側の縦バー内に配置
.close-btn {
  position: fixed;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  background-color: transparent;
  border: none;
  color: #ffffff;
  font-size: 40px;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  line-height: 1;
  z-index: 1006;
  transition: transform 0.3s ease;
}

.close-btn.active {
  display: flex;
}

.close-btn:hover {
  transform: translateY(-50%) scale(1.1);
}
 */
/* メニュータイトル
.menu-title {
  color: #333333;
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 40px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e0e0e0;
  font-family: var(--font-family-base);
  text-align: left;
}
 */
/* メニューリスト
.menu-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu-list li {
  border-bottom: 1px solid #e0e0e0;
}

.menu-list li:last-child {
  border-bottom: none;
}

.menu-list a {
  display: block;
  color: #333333;
  text-decoration: none;
  padding: 24px 20px;
  font-size: 18px;
  font-family: var(--font-family-base);
  text-align: right;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.menu-list a:hover {
  background-color: #f5f5f5;
  color: #26806d;
}
 */
/* スマホ対応
@media (max-width: 768px) {
  .hamburger-btn {
    width: 60px;
  }

  .hamburger-btn span {
    width: 25px;
    height: 2px;
  }

  .side-menu {
    width: calc(100% - 60px);
    padding: 50px 40px 80px 40px;
  }

  .side-menu.active {
    right: 60px;
  }

  .menu-title {
    font-size: 20px;
    margin-bottom: 30px;
  }

  .menu-list a {
    font-size: 16px;
    padding: 20px 15px;
  }

  .close-btn {
    width: 45px;
    height: 45px;
    font-size: 35px;
    right: 10px;
  }
}
 *//*# sourceMappingURL=layout.css.map */