@charset "UTF-8";
/* Base
===================================== */
:root {
  --color-main-text: #000;
  --color-main-bg: #fff;
  --color-header-text: #fff;
  --color-header-bg: #0c54a6;
  --color-footer-text: #fff;
  --color-footer-bg: #013976;
  --font-size-3xl: 2rem; /* 32px */
  --font-size-2xl: 1.5rem; /* 24px */
  --font-size-xl: 1.25rem; /* 20px */
  --font-size-large: 1.125rem; /* 18px */
  --font-size-normal: 1rem; /* 16px */
  --font-size-small: 0.875rem; /* 14px */
  --font-size-xs: 0.75rem; /* 12px */
  --font-size-2xs: 0.625rem; /* 10px */
  --content-main-maxWidth: 1200px;
}

html {
  overflow-x: hidden;
  overflow-y: scroll;
}

body {
  color: var(--color-main-text);
  font-family: YuGothic, "Yu Gothic", sans-serif;
  background-color: var(--color-main-bg);
}

:where(img) {
  display: block;
  max-width: 100%;
}

/* ====== layout ====== */
div#root {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

footer {
  position: relative;
  margin-top: auto;
}

/* ====== 無効化 ====== */
a[href^="tel:"] {
  pointer-events: none;
  user-select: text;
  color: inherit;
  text-decoration: none;
}

/* ====== 非表示 ====== */
.pcNone {
  display: none !important;
}

/* Header
===================================== */
a#gotoMain {
  position: absolute;
  top: -1px;
  left: -1px;
  width: 0;
  height: 0;
  overflow: hidden;
}

header {
  background-color: var(--color-header-bg);
}

#header {
  max-width: var(--content-main-maxWidth);
  margin-right: auto;
  margin-left: auto;
}
#header > .inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  width: 100%;
}
#header #headerLogo {
  display: flex;
  align-items: center;
  column-gap: 14px;
}
#header #headerLogo h1#headerTitle {
  position: relative;
  padding-right: 14px;
}
#header #headerLogo h1#headerTitle::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 1px;
  background-color: #fff;
}
#header div.side {
  flex-shrink: 0;
}
#header div.side p.inquiry {
  background-color: #3c3c3c;
}
#header div.side p.tel {
  background-color: #dc3c5a;
}


/* Footer
===================================== */
footer {
  margin-top: 136px;
  background-color: var(--color-footer-bg);
}

p#copyright {
  padding-top: 0.25em;
  padding-bottom: 0.25em;
  color: var(--color-footer-text);
  font-size: var(--font-size-xs);
  text-align: center;
}

/* Contents
===================================== */
/* ====== filter ====== */
.shadow {
  filter: drop-shadow(6px 6px 4px rgba(0, 0, 0, 0.3));
}
/* ====== backToTop ====== */
p#backToTop {
  pointer-events: none;
  position: sticky;
  bottom: 10px;
  z-index: 10;
  line-height: 1;
  opacity: 0.7;
  padding: 40px 0 10px;
  transition: opacity 0.2s;
}
p#backToTop > a {
  pointer-events: all;
  display: block;
  width: 44px;
  height: 44px;
  overflow: hidden;
  margin: 0 10px 0 auto;
}
p#backToTop > a::before {
  content: url(../image/icon_backToTop.svg);
  display: block;
}
p#backToTop[data-visible=false] {
  opacity: 0;
  pointer-events: none;
}

/* ====== block ====== */
/* ------ pointyBlock ------ */
div.pointyBlock {
  position: relative;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 62px;
  background-color: #fff;
  filter: drop-shadow(6px 6px 4px rgba(0, 0, 0, 0.3));
}
div.pointyBlock::before, div.pointyBlock::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  background-color: #246abb;
}
div.pointyBlock::before {
  left: 0;
  width: 25px;
  clip-path: polygon(0 0, 15px 0, 100% 50%, 15px 100%, 0 100%);
}
div.pointyBlock::after {
  right: 0;
  width: 4px;
}

/* ------ diagonal block ------ */
div.diagonal {
  display: flex;
  position: relative;
  background-color: #fff;
}
div.diagonal::before,
div.diagonal > .title::before {
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
  background-color: #ccc;
}
div.diagonal::before {
  right: 0;
  bottom: 0;
  width: 1.5em;
  height: 3em;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
div.diagonal > .title {
  flex-shrink: 0;
  position: relative;
  box-sizing: border-box;
  width: 235px;
  overflow: hidden;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  padding-left: 0.5em;
  color: #fff;
  font-size: 3rem;
}
div.diagonal > .title::before {
  top: 0;
  left: 0;
  width: 100%;
  height: 452px;
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

/* ====== contents ====== */
div.contents {
  position: relative;
  z-index: 0;
}
div.contents + div.contents {
  margin-top: 100px;
}
div.contents::before, div.contents::after {
  content: "";
  pointer-events: none;
  display: block;
  position: absolute;
  right: 0;
  left: 0;
  z-index: -1;
  height: 316px;
}
div.contents::before {
  top: 148px;
  background-color: #8dc9fe;
  transform: skewY(9.25deg);
}
div.contents::after {
  top: 62px;
  background-position-x: center;
  background-position-y: center;
  background-repeat: no-repeat;
  background-color: #246abb;
  transform: skewY(-9.25deg);
}
div.contents > div.inner {
  max-width: var(--content-main-maxWidth);
  margin-right: auto;
  margin-left: auto;
  padding-top: 200px;
}
div.contents#top::before, div.contents#top::after {
  content: none;
}
div.contents p,
div.contents li,
div.contents dt,
div.contents dd,
div.contents th,
div.contents td {
  line-height: 2;
  font-size: var(--font-size-xl);
}

h2.title {
  position: relative;
  overflow: hidden;
  margin-bottom: 250px;
}
h2.title > img {
  margin-right: auto;
  margin-left: auto;
}
h2.title > span {
  position: absolute;
  top: -100%;
}

p.text + p.text {
  margin-top: 1.5em;
}
p.text a {
  color: inherit;
  text-decoration: none;
}
p.text a:hover {
  color: #ccc;
}

/* Team Building
------------------------------------- */
/* ====== top ====== */
body#teamBuildingPage div#top {
  display: flex;
  justify-content: center;
  aspect-ratio: 1400 / 790;
  background-image: url(../image/teamBuilding_top_image.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}
body#teamBuildingPage div#top > div.inner {
  max-width: var(--content-main-maxWidth);
  margin-top: 12%;
  margin-right: auto;
  margin-left: auto;
}
body#teamBuildingPage div#top p {
  display: flex;
  justify-content: center;
  column-gap: 3px;
}
body#teamBuildingPage div#top p + p {
  margin-top: 45px;
}
/* ====== about ====== */
body#teamBuildingPage div#about {
  z-index: 1;
  margin-top: -14%;
}
body#teamBuildingPage div#about::after {
  background-image: url(../image/teamBuilding_about_title_bg.svg);
}
body#teamBuildingPage div#about div.introduction {
  position: relative;
}
body#teamBuildingPage div#about div.introduction p.text em {
  font-size: var(--font-size-3xl);
  font-weight: bold;
}
body#teamBuildingPage div#about div.introduction p.image {
  position: absolute;
  top: 0;
  left: 50%;
}
body#teamBuildingPage div#about div.introduction p.image img {
  max-width: none;
}
body#teamBuildingPage div#about p.largeImage {
  position: relative;
  margin-top: 2em;
}
body#teamBuildingPage div#about p.largeImage img {
  margin-right: auto;
  margin-left: auto;
}
/* ====== method ====== */
body#teamBuildingPage div#method::after {
  background-image: url(../image/teamBuilding_method_title_bg.svg);
}
body#teamBuildingPage div#method div.point::before,
body#teamBuildingPage div#method div.point > .title::before {
  background-color: #db333b;
}
body#teamBuildingPage div#method div.point + div.point {
  margin-top: 80px;
}
body#teamBuildingPage div#method div.point > dl {
  padding-top: 32px;
  padding-left: 18px;
}
body#teamBuildingPage div#method div.point > dl > dt {
  color: #db333b;
  font-size: var(--font-size-3xl);
  font-weight: bold;
}
body#teamBuildingPage div#method div.point > dl > dd {
  font-size: var(--font-size-2xl);
}
/* ====== sample ====== */
body#teamBuildingPage div#sample::after {
  background-image: url(../image/teamBuilding_sample_title_bg.svg);
}
body#teamBuildingPage div#sample > .inner::before {
  content: "";
  display: block;
  position: absolute;
  bottom: -250px;
  left: calc(50% - 50vw);
  z-index: -2;
  width: 100vw;
  aspect-ratio: 1400/1296;
  background-repeat: no-repeat;
  background-size: contain;
  background-color: #f0f0f0;
  clip-path: polygon(0 0, 100% 17.8%, 100% 100%, 0 100%);
}
body#teamBuildingPage div#sample h2 {
  margin-bottom: 80px;
}
body#teamBuildingPage div#sample h2::after {
  content: "";
  display: block;
  position: relative;
  left: calc(50% - 50vw);
  z-index: -2;
  width: 100vw;
  aspect-ratio: 1400 / 890;
  margin-top: 150px;
  background-image: url(../image/teamBuilding_sample_bg.jpg);
  background-size: contain;
  background-repeat: no-repeat;
}
body#teamBuildingPage div#sample h3.title {
  font-size: var(--font-size-xl);
  font-weight: bold;
  text-align: center;
}
body#teamBuildingPage div#sample h3.title em {
  font-size: var(--font-size-3xl);
  font-weight: bold;
}
body#teamBuildingPage div#sample div.introduction {
  margin-top: 35px;
  color: #db333b;
  text-align: center;
}
body#teamBuildingPage div#sample div.introduction span,
body#teamBuildingPage div#sample div.introduction em {
  font-size: var(--font-size-2xl);
  font-weight: 500;
}
body#teamBuildingPage div#sample div.introduction em {
  font-weight: bold;
}
body#teamBuildingPage div#sample div.reason {
  margin-top: 70px;
  margin-right: 10%;
  margin-left: 10%;
  padding-top: 1em;
  padding-right: 1em;
  padding-bottom: 1em;
  padding-left: 1em;
  border-width: 2px;
  border-style: solid;
  border-color: #db333b;
  border-radius: 6px;
  text-align: center;
  background-color: #ffe8ea;
}
body#teamBuildingPage div#sample div.reason + div.reason {
  position: relative;
  margin-top: 90px;
}
body#teamBuildingPage div#sample div.reason + div.reason::before {
  content: "";
  display: block;
  position: absolute;
  top: -72px;
  left: calc(50% - 26px);
  width: 52px;
  height: 52px;
  background-image: url(../image/teamBuilding_sample_bottomArrow.svg);
}
body#teamBuildingPage div#sample div.reason em {
  font-weight: bold;
}
body#teamBuildingPage div#sample div.reason.question em {
  color: #246abb;
  font-size: var(--font-size-2xl);
}
body#teamBuildingPage div#sample div.reason.answer span {
  font-size: var(--font-size-normal);
}
body#teamBuildingPage div#sample h3.process {
  margin-top: 100px;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  color: #fff;
  font-size: var(--font-size-3xl);
  font-weight: bold;
  text-align: center;
  background-color: #246abb;
}
body#teamBuildingPage div#sample div.process {
  margin-top: 60px;
}
body#teamBuildingPage div#sample div.process::before,
body#teamBuildingPage div#sample div.process > .title::before {
  background-color: #246abb;
}
body#teamBuildingPage div#sample div.process + div.process {
  margin-top: 110px;
}
body#teamBuildingPage div#sample div.process + div.process::after {
  content: "";
  display: block;
  position: absolute;
  top: -72px;
  left: calc(50% - 26px);
  width: 52px;
  height: 52px;
  background-image: url(../image/teamBuilding_process_bottomArrow.svg);
}
body#teamBuildingPage div#sample div.process > .title {
  width: 364px;
}
body#teamBuildingPage div#sample div.process > .title::before {
  height: 720px;
}
body#teamBuildingPage div#sample div.process > div.value {
  padding-top: 1em;
  padding-right: 100px;
  padding-bottom: 1em;
}
body#teamBuildingPage div#sample div.process p.introduction {
  color: #246abb;
  font-weight: bold;
}
body#teamBuildingPage div#sample div.process p.text {
  margin-top: 2em;
}
body#teamBuildingPage div#sample div.process p.text em {
  font-weight: bold;
  text-decoration: underline;
}
/* ====== review ====== */
body#teamBuildingPage div#review::after {
  background-image: url(../image/teamBuilding_review_title_bg.svg);
}
body#teamBuildingPage div#review div.review + div.review {
  margin-top: 80px;
}
body#teamBuildingPage div#review > .inner::before {
  content: "";
  display: block;
  position: absolute;
  bottom: -250px;
  left: calc(50% - 50vw);
  z-index: -2;
  width: 100vw;
  aspect-ratio: 1400/820;
  background-image: url(../image/teamBuilding_review_bg.jpg);
  background-repeat: no-repeat;
  background-size: contain;
}
body#teamBuildingPage div#review div.review div.details {
  margin-right: 100px;
}
body#teamBuildingPage div#review div.review p {
  line-height: 1.5;
  font-size: var(--font-size-2xl);
}
body#teamBuildingPage div#review div.review em {
  color: #fa9600;
  font-weight: bold;
}
body#teamBuildingPage div#review div.review p.reviewer {
  text-align: right;
}
/* ====== record ====== */
body#teamBuildingPage div#record::after {
  background-image: url(../image/teamBuilding_record_title_bg.svg);
}
body#teamBuildingPage div#record > .inner::before {
  content: "";
  display: block;
  position: absolute;
  bottom: -250px;
  left: calc(50% - 50vw);
  z-index: -2;
  width: 100vw;
  aspect-ratio: 1400/838;
  background-image: url(../image/teamBuilding_record_bg.jpg);
  background-repeat: no-repeat;
  background-size: contain;
}
body#teamBuildingPage div#record div.pointyBlock {
  display: flex;
  column-gap: 40px;
  align-items: center;
  min-height: 240px;
}
body#teamBuildingPage div#record div.pointyBlock + div.pointyBlock {
  margin-top: 60px;
}
body#teamBuildingPage div#record div.pointyBlock dl > dt {
  color: #246abb;
  font-size: var(--font-size-2xl);
  font-weight: bold;
}
body#teamBuildingPage div#record p.note {
  margin-top: 2em;
  text-align: right;
}
body#teamBuildingPage div#review p.appeal,
body#teamBuildingPage div#record p.appeal {
  margin-top: 90px;
  color: #fff;
  font-size: var(--font-size-3xl);
  font-weight: bold;
  text-align: center;
  background-color: #3c3c3c;
}
body#teamBuildingPage div#review div.persons,
body#teamBuildingPage div#record div.persons {
  display: flex;
  justify-content: space-between;
  column-gap: 10px;
  margin-top: 60px;
}
body#teamBuildingPage div#review div.person,
body#teamBuildingPage div#record div.person {
  position: relative;
}
body#teamBuildingPage div#review div.person dl.profile,
body#teamBuildingPage div#record div.person dl.profile {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding-bottom: 1em;
  color: #fff;
  background-color: rgba(32, 32, 32, 0.8);
}
body#teamBuildingPage div#review div.person dl.profile > dt,
body#teamBuildingPage div#record div.person dl.profile > dt {
  margin-right: 1em;
  margin-left: 1em;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #fff;
  font-size: var(--font-size-2xl);
  font-weight: bold;
  text-align: center;
}
body#teamBuildingPage div#review div.person dl.profile > dt + dd,
body#teamBuildingPage div#record div.person dl.profile > dt + dd {
  margin-top: 0.5em;
}
body#teamBuildingPage div#review div.person dl.profile > dd,
body#teamBuildingPage div#record div.person dl.profile > dd {
  position: relative;
  width: 80%;
  line-height: 1.5;
  margin-right: auto;
  margin-left: auto;
  padding-left: 1em;
  font-size: var(--font-size-large);
}
body#teamBuildingPage div#review div.person dl.profile > dd::before,
body#teamBuildingPage div#record div.person dl.profile > dd::before {
  content: "\002023";
  position: absolute;
  left: 0;
}
/* ====== address ====== */
body#teamBuildingPage div#address ul.address {
  display: flex;
  justify-content: center;
  column-gap: 40px;
  text-align: center;
  color: #fff;
}
body#teamBuildingPage div#address p.note {
  font-size: var(--font-size-normal);
  text-shadow: #246abb 1px 1px 0, #246abb -1px -1px 0, #246abb -1px 1px 0, #246abb 1px -1px 0, #246abb 0px 1px 0, #246abb 0 -1px 0, #246abb -1px 0 0, #246abb 1px 0 0; /* 下 */
}