@charset "UTF-8";


/*---------------------------------------------------------------*\
$modal - common settings
\*---------------------------------------------------------------*/

.micromodal-slide {
  visibility: hidden;
}

.micromodal-slide.is-open {
  visibility: visible;
}

.modal-board-member .modal__overlay {
  overflow: hidden;
  display: -webkit-flex;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  background: linear-gradient(86.35deg, rgba(189, 231, 254, .85), rgba(133, 235, 241, .85));
  z-index: 100;
}

.modal-board-member .modal__container {
  width: 88%;
  max-width: 440px;
  padding: 40px;
  max-height: 90vh;
  overflow: scroll;
  z-index: 200;
  position: relative;
}

.micromodal-slide[aria-hidden="false"] .modal__overlay {
  animation: mmfadeIn 0.6s cubic-bezier(0.34, 0.07, 0.095, 0.995);
}

.micromodal-slide[aria-hidden="true"] .modal__overlay {
  animation: mmfadeOut 0.6s cubic-bezier(0.34, 0.07, 0.095, 0.995);
}

.micromodal-slide[aria-hidden="false"] .modal__container {
  animation: mmslideIn 0.4s cubic-bezier(0.73, 0.26, 0.25, 1.62);
}

.micromodal-slide[aria-hidden="true"] .modal__container {
  animation: mmslideOut 0.4s cubic-bezier(.37, .41, .04, 1);
}

.micromodal-slide .modal__container,
.micromodal-slide .modal__overlay {
  will-change: transform;
}

.modal__close {
  width: 40px;
  height: 40px;
  position: absolute;
  z-index: 10;
  cursor: pointer;
  top: 18px;
  right: 18px;
}

.square_btn {
  display: block;
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #3c3a3a;
  /* ボタンの背景色 */
}

.square_btn::before, .square_btn::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2px;
  /* 棒の幅（太さ） */
  height: 14px;
  /* 棒の高さ */
  background: #fff;
  /* バツ印の色 */
}

.square_btn::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.square_btn::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* modal animation */
@keyframes mmfadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes mmfadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes mmslideIn {
  from {
    transform: scale(1.3);
  }

  to {
    transform: scale(1);
  }
}

@keyframes mmslideOut {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(1.3);
  }
}


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

  .modal__overlay {
    right: 0;
  }
}


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

  .modal__overlay {
    width: 100%;
  }
}



/*---------------------------------------------------------------*\
$modal - profile
\*---------------------------------------------------------------*/

.modal-board-member .title {
  font-size: 32px;
}

.modal-board-member .job_title {
  margin: 12px 0 0 0;
  line-height: 1.3;
  font-size: 12px;
}

.modal-board-member .thumbnail {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  height: 320px;
  margin: 16px 0 0 0;
}

.modal-board-member .description_profile {
  margin: 24px 0 0 0;
}

.modal-board-member .thumbnail_01 {
  background-image: url('../img/about/thumbnail_nishimura.jpg');
}

.modal-board-member .thumbnail_02 {
  background-image: url('../img/about/thumbnail_kato.jpg');
}

.modal-board-member .thumbnail_03 {
  background-image: url('../img/about/thumbnail_tsuzuki.jpg');
}



/*---------------------------------------------------------------*\
$content
\*---------------------------------------------------------------*/

.content {
  width: calc(100% - 250px);
}

@media screen and (min-width: 1500px) {

  .content {
    width: calc(100% - 300px);
  }
}

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

  .content {
    width: calc(100% - 200px);
  }
}

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

  .content {
    width: 100%;
  }
}



/*---------------------------------------------------------------*\
$sideMenu
\*---------------------------------------------------------------*/

#sidemenu {
  border-right: solid 1px #eee;
  width: 250px;
}

#sidemenu .inner_sidemenu {
  height: fit-content;
  position: sticky;
  top: -100px;
  justify-content: center;
  display: flex;
  flex-direction: column;
}

#sidemenu .inner_sidemenu ul {
  gap: 40px;
  display: grid;
  border-right: solid 1px #3c3a3a;
  margin: 150px 0 100px 0;
  padding: 10px 0 10px 20%;
}

#sidemenu .each_menu {
  position: relative;
}

#sidemenu .content_01:before {
  display: block;
  content: '01';
  position: absolute;
  top: -10px;
  left: -12px;
  font-size: 10px;
}

#sidemenu .content_02:before {
  display: block;
  content: '02';
  position: absolute;
  top: -10px;
  left: -12px;
  font-size: 10px;
}

#sidemenu .content_03:before {
  display: block;
  content: '03';
  position: absolute;
  top: -10px;
  left: -12px;
  font-size: 10px;
}


@media screen and (min-width: 1500px) {

  #sidemenu {
    width: 300px;
  }
}

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

  #sidemenu {
    width: 200px;
  }
}

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

  #sidemenu .each_menu>a {
    font-size: 14px;
  }
}

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

  #sidemenu {
    display: none;
  }
}


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

  #sidemenu {
    display: none;
  }
}



/*---------------------------------------------------------------*\
$common
\*---------------------------------------------------------------*/

.headline_pc {
  border-bottom: solid 1px #ddd;
  margin-bottom: 56px;
  padding: 0 0 56px 0;
}

.section_headline {
  /* font-size: min(5rem,8vw); */
  font-size: 80px;
  letter-spacing: -2px;
}

.headline_pc>span {
  margin: 15px 0 0 0px;
}


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

  .headline_pc {
    margin-bottom: 40px;
    padding: 0 0 40px 0;
  }

  .section_headline {
    font-size: 50px;
  }
}


/*---------------------------------------------------------------*\
$concept
\*---------------------------------------------------------------*/

#concept {
  margin: 150px 15% 0 8%;
  position: relative;
}

#concept .headlines_concept {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 40px 0 0 0;
  border-top: solid 1px #eee;
}

#concept .sub_title {
  font-size: 14px;
  margin: -10px 0 0 0;
}

#concept .profile {
  display: flex;
  align-items: center;
}

#concept .thumbnail {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #fafafa;
  background-image: url('../img/about/icon_nishimura.jpg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  margin: 0 0 0 10px;
}

#concept .name {
  font-size: 14px;
}

#concept .job_title {
  font-size: 12px;
  margin: 4px 0 0 0;
}

#concept .wrap_content {
  display: flex;
  padding: 120px 0 0;
}

#concept .info {
  display: flex;
  position: relative;
  z-index: 2;
}

#concept .description {
  width: calc(90% - 160px);
  margin: 0 10% 0 0;
}

#concept .description p {
  font-size: 18px;
  letter-spacing: 0.6px;
  margin: 0 0 40px 0;
  line-height: 2.3;
}

#concept .description p:last-child {
  margin: 0;
}

#concept .catch {
  width: 160px;
}


@media screen and (min-width: 1500px) {

  #concept .tagline_concept {
    width: 94%;
  }

  #concept .catch {
    width: 200px;
  }
}


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

  #concept {
    margin: 150px 10% 0;
  }

  #concept .catch {
    width: min(5rem, 12vw);
    margin: 0 0 0 auto;
  }

  #concept .description {
    width: calc(100% - min(5rem, 12vw));
  }

  #concept .thumbnail {
    width: 80px;
    height: 80px;
  }
}


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

  #concept .tagline_concept {
    width: 90%;
  }

  #concept .description p {
    font-size: 16px;
  }
}


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

  #concept {
    margin: 80px 10% 0;
  }

  #concept .description p {
    font-size: 15px;
    line-height: 2;
  }

  #concept .thumbnail {
    width: 64px;
    height: 64px;
  }

  #concept .name {
    font-size: 12px;
  }

  #concept .job_title {
    font-size: 10px;
  }

  #concept .wrap_content {
    padding: 56px 0 0 0;
  }
}


/*---------------------------------------------------------------*\
$board members
\*---------------------------------------------------------------*/

#board_members {
  margin: 0 auto;
  padding: 250px 8% 0;
  position: relative;
}

#board_members .headline_pc {
  margin: 0 0 56px 0;
}

#board_members .wrap_content {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

#board_members .each_story {
  position: relative;
}

#board_members .each_story:last-of-type {
  margin-bottom: 0;
}

#board_members .number {
  font-size: 12px;
}

#board_members .number:nth-of-type(2) {
  margin-top: 8px;
}

#board_members .title {
  font-size: 30px;
  margin: 32px 0 16px;
}

#board_members .thumbnail {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  height: 360px;
  border-radius: 30px;
}

#board_members .thumbnail_01 {
  background-image: url('../img/about/thumbnail_nishimura.jpg');
}

#board_members .thumbnail_02 {
  background-image: url('../img/about/thumbnail_kato.jpg');
}

#board_members .thumbnail_03 {
  background-image: url('../img/about/thumbnail_tsuzuki.jpg');
}

#board_members .button_profile {
  width: 180px;
  height: 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 24px 0 0 0;
  font-size: 15px;
}

#board_members .each_support_about_ew {
  width: calc(100%/2);
}


@media screen and (min-width: 2000px) {

  #board_members .thumbnail {
    height: 420px;
  }
}


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

  #board_members .each_support_about_ew {
    width: 100%
  }
}


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

  #board_members .inner_bottom_menu {
    flex-direction: column;
    gap: 24px;
  }

  #board_members .each_bottom_menu {
    width: 100%;
  }
}


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

  #board_members {
    padding: 150px 8% 0;
  }

  #board_members .title {
    font-size: 24px;
    margin: 24px 0;
  }

  #board_members .description_bottom_menu {
    font-size: 12px;
  }

  #board_members .thumbnail {
    height: 280px;
  }

  #board_members .title_bottom_menu {
    font-size: 28px;
    margin: 4px 0 0 0;
  }

  #board_members .button_profile {
    width: 150px;
    height: 48px;
    font-size: 13px;
  }
}



/*---------------------------------------------------------------*\
$outline
\*---------------------------------------------------------------*/

#outline {
  padding: 250px 8%;
  margin: 0 auto;
}

#outline .wrapper_content {
  margin: 0 5% 0 auto;
  width: 70%;
}

#outline .each_info {
  display: -webkit-flex;
  display: flex;
  margin-bottom: 56px;
}

#outline .each_info:last-of-type {
  margin-bottom: 0;
}

#outline .each_info dt {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 160px;
  text-align: center;
  border-bottom: solid 1px #000;
  padding-bottom: 56px;
}

#outline .each_info dd {
  width: calc(100% - 160px);
  border-bottom: solid 1px #ddd;
  padding: 0 0 56px 5%;
}


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

  #outline {
    padding: 200px 8%;
  }

  #outline .wrapper_content {
    width: 100%;
  }
}

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

  #outline {
    padding: 150px 8% 120px;
  }

  #outline .headline_pc {
    margin-bottom: 24px;
  }

  #outline .each_info {
    margin-bottom: 24px;
  }

  #outline .each_info dt {
    width: 80px;
    padding-bottom: 24px;
    font-size: 13px;
  }

  #outline .each_info dd {
    width: calc(100% - 80px);
    padding: 0 0 24px 5%;
    font-size: 13px;
  }
}