@charset "UTF-8";

/* top共通部分 */
h2 {
    font-family: 'Georgia';
    font-size: 4.5rem;
    font-weight: normal;
    letter-spacing: -.03em;
    margin-bottom: 56px;
}

h2 p {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0rem;
    margin-top: 25px;
    color: #634A3C;
}

/**************************
セクション1(ファーストビュー)
**************************/
#area1.firstview {
    width: 100%; /* vwを%に */
    height: 100svh;
    background-color: #999;
    position: relative;
}

#area1 .firstview__background {
    width: 100%;
    height: 100%;
    object-position: center center;
    object-fit: cover;
}

#area1 .firstview__title {
  align-items: center;
  bottom: 20.87%;
  display: flex;
  flex-wrap: wrap;
  gap: 20px 48px;
  left: 112px;
  max-width: 850px;
  position: absolute;
}

#area1 .firstview__title * {
  color: #fff;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, .13);
}

#area1 .sp-visible {
   display: none; 
  }

/* スライダー */

#area1 .slider-container {
  position: relative;
  width: 100%;
  /* vwを%に */
  height: 100vh; /* 例: 必要に応じて調整 */
  overflow: hidden; /* スライドイン・アウトする要素を隠す */
}

#area1 .slide {
  position: absolute;
  top: 0;
  right: 0;
  left: -15%;
  width: 120%;
  height: 100%;
  opacity: 0; /* デフォルトは非表示 */
  transform: translateX(15%); /* 初期位置を右端に設定 */
  transition: opacity 3s linear, transform 6s linear; /* アニメーションのトランジション設定 */
  object-fit: cover;
}

#area1 .slide.active {
  opacity: 1; /* 表示 */
  transform: translateX(0%); /* 表示位置（元の位置） */
}

#area1 .slide.prev {
  /* 前のスライドが左にフェードアウト・スライドアウトするためのスタイル */
  opacity: 0;
  transform: translateX(-5%); 
}

/* スライダーここまで */
#area1 .firstview__maintitle {
  display: block;
    font-family: Georgia;
    /* font-size: 7.375rem; */
    font-size: clamp(4.625rem,7.375vw,7.375rem);
    font-weight: 400;
    letter-spacing: -.03em;
    /* margin-bottom: 8px; */
    width: 100%;
}

#area1 .firstview__subtitle1 {
    font-size: 1.75rem;
    font-weight: bold;
    letter-spacing: 0px;
    /* margin-bottom: 40px; */
}

/**************************
セクション2(誠実な人に〜〜〜)
**************************/

/* .boundary-line{
  background-image: linear-gradient(#171511, #15130f 50%, #161410);
  width: 100vw;
  height: 0px;
  box-shadow: 0px 0px 40px 60px #161410;
  margin: 0px auto 0px;
  position: relative;
  z-index: 100;
  opacity: 1;
  padding: 75px 0;
  margin: -5px 0 -30px;
} */

#area2{
    background-image: linear-gradient(#171511, #15130f 50%, #161410);
    padding-top: 146px;
    position: relative;
    overflow: hidden;
    padding-bottom: 249px;
}

#area2 .separator{
  border-bottom: 1px solid #D0D0D0;
  padding-bottom: 226px;
  display: block;
}

#area2 .article__area{
  display: flex;
  justify-content: right;
}

#area2 .article__area .right{
  width: 50%;
}

#area2 .article__area .right p{
  font-size: 1.25rem;
  letter-spacing: .01em;
  margin-bottom: 28px;
  line-height: 2.65;
  color: #fff;
  position: relative;
  z-index: 10;
}

#area2 .article__area .right p:last-of-type{
  margin-bottom: 0;
}

#area2 img{
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
}

/**************************
セクション3(Our Approach)
**************************/
#area3 {
  margin-top: min(181px,11.3175%);
  position: relative;
}
#area3 .title {
  margin-bottom: min(69px, 5.75%);
}
#area3 .title__maintitle {
  font-family: Georgia;
  font-size: 4.5rem;
  font-weight: 400;
  letter-spacing: -.03em;
  color: #333;
  margin-bottom: min(40px, 2.5%);
}
#area3 .title__subtitle {
  font-family: Noto_Sans_JP;
  font-size: 1.25rem;
  font-weight: bold;
  line-height: 1.84;
}

#area3 .figure {
  position: relative;
}
#area3 .figure__ellipses {
  display: flex;
}
#area3 .figure__ellipse {
  position: relative;
  width: 33.33%;
  /* transform: scale(1.2344); */
}
#area3 .figure__ellipse:nth-of-type(1) {
  transform: translateX(15%);
}
#area3 .figure__ellipse:nth-of-type(3) {
  transform: translateX(-15%);
}
#area3 .figure__ellipse-image {
  display: block;
}

#area3 .figure__texts {
  display: flex;
  position: relative;
}

/* 灰色の矢印の位置合わせはかなり試行錯誤 */
#area3 .figure__arrows {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
#area3 .figure__arrows-center {
  aspect-ratio: 658 / 599;
  width: 33.33%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
#area3 .figure__arrows-center-top > svg,
#area3 .figure__arrows-center-bottom > svg {
  display: block;
  opacity: .3;
}
#area3 .figure__arrows-center-top > svg {
  transform: scale(1.2) translateY(-13%);
  width: 100%;
  height: inherit;
  stroke-linecap:round;
}
#area3 .figure__arrows-center-bottom > svg {
  transform: scale(1.2) translateY(-55%);
  width: 100%;
  height: inherit;
  stroke-linecap:round;
}

@keyframes path1 {
  from {
    stroke-dashoffset: 750.781; /* 全部隠れてる */
  }
  to {
    stroke-dashoffset: 0;   /* 全部描かれる */
  }
}

@keyframes path2 {
  from {
    stroke-dashoffset: 82.0379; /* 全部隠れてる */
  }
  to {
    stroke-dashoffset: 0;   /* 全部描かれる */
  }
}


#area3 .figure__text-blocks {
  display: flex;
  margin-top: -4%;
  margin-left: min(10.25461%, 126.5px);
  margin-right: min(10.25461%, 122px);
}
#area3 .figure__text-blocks-item {
  border-left: 1px solid #707070;
  padding-top: 11.3%;
  padding-bottom: 5px;
  position: relative;
}
#area3 .figure__text-blocks-item::before {
  content: '';
  position: absolute;
  width: 9px;
  height: 9px;
  left: -4.5px;
  top: -13px;
  background-color: #333;
  border-radius: 50%;
}

#area3 .figure__text-blocks-item:nth-of-type(1) {
  width: 35%;
  padding-right: min(1.78vw, 25px);
}
#area3 .figure__text-blocks-item:nth-of-type(2) {
  width: 35%;
  padding-right: min(1.78vw, 25px);
}
#area3 .figure__text-blocks-item:nth-of-type(3) {
  width: 30%;
}
#area3 .figure__text-block {
  padding-left: min(1.78vw, 28.5px);
}
#area3 .figure__text-block-item {
  display: flex;
  align-items: flex-start;
}
#area3 .figure__text-block-item-dot {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  top: .5625rem;
  width: 1.125rem;
  height: 1.125rem;
  line-height: 1.7;
}
#area3 .figure__text-block-item-dot::before {
  content: '';
  background-color: black;
  width: 3px;
  height: 3px;
  border-radius: 50%;
}
#area3 .figure__text-block-item-body {
  display: block;
  font-family: Noto_Sans_JP;
  font-size: 1.125rem;
  font-weight: 400;
  letter-spacing: .01em;
  line-height: 1.7;
  color: #333;
}

#area3 .separator {
  /* margin-left: min(7.5%, 120px);
  margin-right: min(7.5%, 120px); */
  margin-top: 123px;
  height: 1px;
  border-bottom: 1px solid #D0D0D0;
}

#area3 .pc-visible { display: block; }
#area3 .sp-visible { display: none; }
#area3 .our-approach-sp { display: none; }

/**************************
セクション4（Supporter）
**************************/
#area4 .approach_inner  {
  border-bottom: 1px solid #d0d0d0;
  margin-top: 65px;
  padding-bottom: 120px;
}
#area4 .top__supporter__list {
  border-radius: 10px;
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
}

#area4 .top__supporter__item {
  position: relative;
  max-width: 25%;
  cursor: pointer;
  overflow: hidden;
/* 
  &:nth-last-of-type(3),&:last-of-type  {
    border-bottom-right-radius: 10px;
  }
*/
  &.top__supporter__item:nth-last-of-type(n+3) {
    z-index: 10;
  }
}

#area4 .top__supporter__item::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .3); 
opacity: 0; 
transition: opacity .3s ease-in-out; 
z-index: 1; 
}

#area4 .top__supporter__item:hover::before {
opacity: 1; /* 不透明にして、li全体を暗くする */
}

#area4 .top__supporter__item:hover video,
#area4 .top__supporter__item:hover .top__supporter__icon {
  transform: scale(1.1);
} 

#area4 .top__supporter__item:hover .top__supporter__icon {
  background-color: #634A3C;
  background-image: url(../img/top/Supporter_top_hover_nocircle.svg);
}

#area4 .top__supporter__item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#area4 .top__supporter__item video {
  transition: all .2s ease-out;
  transform-origin: center center;
}

#area4 .top__supporter__text {
  bottom: 16px;
  left: 7.3529%;
  position: absolute;
  z-index: 2;
}

#area4 .top__supporter__text * {
  color: #fff;
}

#area4 .top__supporter__post{
  font-family: 'Overpass';
}

#area4 .top__supporter__name {
  font-size: 1.25rem;
  font-weight: 700;
  margin-top: 7px;
}

#area4 .top__supporter__icon {
  background-image: url(../img/top/Supporter_top_nocircle.svg);
  background-color: #fff;
  background-size: cover;
  border-radius: 50%;
  height: 28px;
  position: absolute;
  right: 5.8824%;
  bottom: 8.3333%;
  width: 28px;
  z-index: 2;
  transition: all .2s ease-out;
}

/* モーダルウィンドウ
/* 1. モーダル全体のオーバーレイ (背景の黒い部分) */
#area4 .modal-overlay {
visibility: hidden;
opacity: 0;
transition: opacity .3s ease-out, visibility 0s .3s; 
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100dvh;
background-color: rgba(0, 0, 0, .5); 
z-index: 10;
}

#area4 .modal-overlay.is-open{
  z-index: 9999;
}

/* 2. サイドパネル（実際にスライドするコンテンツ部分） */
#area4 .modal-panel {
position: absolute;
top: 0;
right: -80%; 
width: 83.125%; 
height: 100%;
border-radius: 20px 0 0 20px;
background-color: #fff;
transition: right .3s ease-out;
z-index: 20; 
overflow: hidden;
padding-top: min(50px, 3.13vw);
padding-bottom: 14.89vh;
height: 100dvh;
}

/* 3. JSで追加するクラス: モーダルを表示する状態 */
/* モーダルが開いているとき、オーバーレイを表示し、パネルをスライドさせる */

#area4 .modal-overlay.is-open {
visibility: visible; 
opacity: 1; 
transition: opacity .3s ease-out, visibility 0s 0s; /* visibilityは即座に切り替え */
}

/* is-openクラスが付いているとき、right: 0 で画面内にスライドイン */
#area4 .modal-overlay.is-open .modal-panel {
right: 0;
}

#area4 #closeModalBtn {
display: flex;
justify-content: center;
align-items: center;
width: min(76px, 4.75vw);
height: min(76px, 4.75vw);
border: 1px solid #707070;
border-radius: 50%;
background-color: #fff;
cursor: pointer;
transition: all .2s ease-out;
/* background-image: url(../img/common/closebtn.svg); */
/* background-position: center;
background-size: 45%;
background-repeat: no-repeat; */
margin-left: auto;
margin-right: calc((36 / 1330)* 100%);
margin-bottom: min(61px, 6.26vh);
position: fixed;
right: 0;
z-index: 100;
}

#area4 #closeModalBtn:hover {
background-color: #634A3C;
/* background-image: url(../img/common/closebtn_hover.svg); */
}

#area4 #closeModalBtn svg{
  width: 45%;
}

#area4 #closeModalBtn:hover .close__btn path {
    fill: #fff;
}

/* スクロールを禁止 */
body.is-modal-open{
    overflow: hidden;
    overscroll-behavior: none;
    height: 100dvh;
}

@media screen and (max-height: 750px) {
#closeModalBtn {
  margin-bottom: 20px;
}
}

#area4 #closeModalBtn img {
width: 41%;
}

#area4 #modal-marquee {
display: flex;
gap: min(50px, 3.13vw);
white-space: nowrap;
animation: marquee-loop 60s linear infinite;
margin-bottom: min(44px, 2.75vw);
}

@keyframes marquee-loop {
from {
  transform: translateX(-8%);
}
to {
  transform: translateX(-90%);
}
}

#area4 .animation-none {
animation: none !important;
}

#area4 #modal-marquee > p {
font-size: 8.75vw;
font-family: 'Georgia'; 
color: #634A3C;
opacity: .3;
line-height: 1.135;
}

#area4 #modal-content {
position: relative;
width: 84.47%;
margin-left: calc((120 / 1330)* 100%);
}

#area4 #modalVideoPlayer {
width: calc((545 / 1123.5) * 100%);
border-radius: 27px;
margin-top: .5vw;
margin-bottom: 1vw;
aspect-ratio: 498.953 / 319.836; 
background-color: #000; /* ポスターすら読み込まれる前の「つなぎ」 */
display: block;
}

#area4 .modal-text-area {
position: absolute;
top: 0;
right: 0;
height: 100%;
width: calc((508.5 / 1123.5) * 100%);
overflow-y: scroll;
overscroll-behavior: contain;
}

#area4 .modal-text-area::-webkit-scrollbar {
width: 2px;
background-color: #C7C7C7;
}

#area4 .modal-text-area::-webkit-scrollbar-thumb {
width: 2px;
background-color: #707070;
}

#area4 #modal-post {
line-height: 24px;
}

#area4 #modal-name {
font-size: min(1.875rem, 1.875vw);
font-weight: bold;
line-height: 44px;
margin-bottom: min(30px, 1.88vw);
}

#area4 #modal-text {
width: 94.99%;
font-size: min(1.25rem, 1.25vw);
line-height: 2;
}

#area4 .modal-content-button {
position: absolute;
bottom: 30px;
right: calc((36 / 1330)* 100%);
}

#area4 #modal-prevBtn,
#area4 #modal-nextBtn {
width: min(59px, 3.7vw);
height: min(59px, 3.7vw);
border: 1px solid #707070;
border-radius: 50%;
background-color: #fff;
/* background-image: url(../img/common/arrow_circle_white.svg); */
background-position: center;
background-size: 100%;
transition: all .2s ease-out;
position: relative;
overflow: hidden;
}

#area4 #modal-prevBtn svg,
#area4 #modal-nextBtn svg {
    width: 100%;
    height: auto;
    position: absolute;
    top: 0;
    right: 0;
    transition: all .2s ease-out;
}

#area4 #modal-prevBtn:hover,
#area4 #modal-nextBtn:hover {
background-color: #634A3C;
border: 1px solid #634A3C;
/* background-image: url(../img/common/arrow_circle_white_hover.svg); */
}

#area4 #modal-prevBtn:hover .svg-circle path,
#area4 #modal-nextBtn:hover .svg-circle path
 {
  fill: #fff;
}

#area4 #modal-prevBtn {
margin-right: min(16px, 1vw);
}

#area4 #modal-nextBtn{
transform: scaleX(-1);
}

/* モーダルウィンドウのテキストをモーダル非表示の時は隠す設定 */
#area4 .top__supporter__modaltext {
display: none;
}

#area4 .modal-content-slideNextAnimation {
animation: modal-slideNext .3s linear;
}

@keyframes modal-slideNext {
from {
  transform: translateX(2%);
  opacity: 0;
}
to {
  transform: translateX(0); 
  opacity: 1;
}
}

#area4 .modal-content-slidePrevAnimation {
animation: modal-slidePrev .3s linear;
}

@keyframes modal-slidePrev {
from {
  transform: translateX(-2%);
  opacity: 0;
}
to {
  transform: translateX(0); 
  opacity: 1;
}
}


/**************************
セクション5(代表の挨拶)
**************************/
#area5 {
    padding-top: 65px;
  }
  
  #area5 h3 {
    font-size: 3.75rem;
    line-height: 1.45;
    margin-bottom: 22px;
  }
  
  #area5 .ceo_message__img {
    height: 580px;
    margin-bottom: 83px;
    object-fit: cover;
    border-radius: 10px 0 0 10px;
  }

  #area5 .ceo_message__img__sp {
    border-radius: 10px 0 0 10px;
    display: none;
    height: auto;
    object-fit: cover;
    margin-bottom: 33px;
  }
  @media (min-width: 1600px){
    #area5 img {
      border-radius: 0px 0 0 0px;
    }
  }
  
  #area5 p {
    font-size: 1.25rem;
  }
  
  #area5 > p:first-of-type {
    font-weight: bold;
    line-height: 1.45;
    margin-bottom: 56px;
  }
  
  #area5 .namearea {
    display: flex;
    margin-bottom: 65px;
  }
  
  #area5 .namearea p:first-of-type {
    font-size: 1.875rem;
    font-weight: bold;
    line-height: 1.47;
    margin-right: 20px;
  }
  
  #area5 .namearea p:last-of-type {
    font-family: 'Overpass';
    font-size: 1rem;
    height: 8px;
    margin: auto 0;
  }
  
  #area5 .textarea {
    border-bottom: 1px solid #D0D0D0;
  }
  
  #area5 .textarea p {
    margin-bottom: 29px;
    letter-spacing: .01em;
    line-height: 1.85;
  }
  
  #area5 .textarea p:last-of-type {
    margin-bottom: unset;
    margin-bottom: 98px;
  }

/**************************
セクション6
**************************/
#area6 {
  padding-top: 98px;
  margin-bottom: 120px;
}

#area6 h2 {
  line-height: 1.14;
  margin-bottom: 67px;
}

#area6 h3 {
  font-size: 1.875rem;
  color: #634A3C;
}

#area6 h4 {
  font-size: 3.75rem;
  line-height: 1.45;
  margin-bottom: 40px;
}

#area6 .philosophy-innner h4 .ruby{
  background-color: unset;
  color: #333;
  display: block;
  font-size: 1.5rem;
  height: auto;
  letter-spacing: .01em;
  margin-top: 10px;
  width: auto;
}

#area6 h5 {
  font-size: 2.5rem;
  line-height: 1.45;
  flex-shrink: 0;
}

#area6 .philosophy-container{
  display: flex;
  flex-direction: column;
  max-width: 880px;
  width: 100%;
}

#area6 .philosophy-innner{
  border-bottom: 1px dashed #D0D0D0;
  margin-bottom: 50px;
}

#area6 .philosophy-innner:first-of-type {
  padding-bottom: 56px;
  h4 {
    margin-bottom: 30px;
  }
}

#area6 .philosophy-innner:nth-of-type(2) {
  padding-bottom: 35px;
  h4 {
    margin-bottom: 40px;
  }
}

#area6 .philosophy-innner:last-of-type{
  flex-grow: 1;
  margin-bottom: 0;
}

/* #area6 .textarea {
  margin-right: 8.1%;
  padding-bottom: 56px;
} */

#area6 .textarea p {
  letter-spacing: .01em;
  line-height: 1.45;
  font-size: 1.25rem;
}

.flex{
  display: flex;
  align-items: center;
  /* margin-bottom: 30pt; */
}

#area6 > .flex{
  align-items: stretch;
  padding: 0 min(7.5%, 120px);
  padding-right: 0;
  width: 100%;
  gap: 40px;
  justify-content: space-between;
  overflow: hidden;
}

#area6 .philosophy-innner div.flex:first-of-type{
  gap: 15px;
  margin-bottom: 28px;
}

#area6 .flex:first-of-type p{
  margin-left: 5px;
}

#area6 div.flex:first-of-type span{
  width: 15px;
  height: 15px;
  border-radius: 15px;
  background-color: #634A3C;
}

#area6 .cross {
  font-size: 2.5rem;
  margin-bottom: 40px;
}

#area6 .cross span{
  color: #333;
  letter-spacing: .01em;
  text-align: center;
}

#area6 .cross-text{
  margin-bottom: 56px;
}

#area6 .value .flex:nth-of-type(n+2){
  margin-bottom: 12px;
  gap: 70px;
  align-items: flex-end;
}

#area6 .value .flex p{
  font-size: 1.25rem;
  line-height: 1.45;
  margin-bottom: 8px;
}

#area6 .value .flex:first-of-type p {
  font-size: 1rem;
  margin-bottom: 0;
}

/* アニメーション */
.scrolling-container {
  width: 100%;
  max-width: 500px;
  height: 1385px;
  position: relative;
}
.image-wrapper {
  overflow:hidden;
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  flex-direction: column;
  animation: vertical-animation 25s infinite linear .5s both;
}
/* .image {
  width: 400px;
  margin: auto;
} */
.image img {
  width: 100%;
  height: auto;
}
@keyframes vertical-animation {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-100%);
  }
}

@media screen and (min-width:1601px) {
  #area6 > .flex{
    padding-right: 120px;
    max-width: 1600px;
    margin: auto;
  }
}



/**************************
セクション7(service&company)
**************************/
#area7 p,
#area7 li,
#area7 a,
#area7 h2,
#area7 h3,
#area7 dd,
#area7 dt {
  color: #fff;
}

#area7 a {
  text-decoration: underline;
}

#area7 {
  background-color: #272116;
  padding: 85px 0 91px 0;
  overflow: hidden;
}

#area7 .title_area {
  display: flex;
  max-width: 1360px;
  padding-bottom: 40px;
  margin-bottom: 60px;
  border-bottom: 1px solid #8E8479;
}

#area7 h2 {
  font-family: 'Georgia';
  font-size: 4.5rem;
  font-weight: 400;
  letter-spacing: -.03em;
  line-height: 1.14;
  margin-right: 81px;
  white-space: nowrap;
  margin-bottom: 0;
}

#area7 .title_area p {
  height: 8px;
  font-size: 1.25rem;
  margin: auto 0;
}

#area7 .section__container__2 {
  margin-bottom: 160px;
  margin-right: 7.5%;
}

.swiper,
.swiper-wrapper,
.swiper-slide {
  height: auto;
  overflow: visible;
}

.swiper {
  margin-left: auto;
}

#area7 .slide-items {
  max-width: 520px;
}

#area7 .slide-items a{
  text-decoration: none;
  display: block;
}

#area7 .slide-items a> img {
  border-radius: 10px;
  margin-bottom: 35px;
}

#area7 .slide-items  p:first-of-type {
  font-size: 1.25rem;
  font-weight: bold;
  line-height: 1.45;
  color: #B08D57;
  margin-bottom: 5px;
}

#area7 .slide-items h3 {
  font-size: 1.75rem;
  line-height: 1.43;
  width: calc(100% - 60px);
}

#area7 .h3-flexbox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 19px;
  gap: 0 20px
}
#area7 .h3-flexbox img {
  width: 50px;
  height: auto;
  border-radius: 50%;
  display: block;
}

#area7 .h3-flexbox a {
  border-radius: 50%;
}

#area7 .slide-items p:last-of-type {
  font-size: 1.25rem;
  letter-spacing: .01em;
  line-height: 1.45;
}

#area7 .swiper-button__container {
  position: relative;
}

#area7 .swiper-button__container img {
  border-radius: 50%;
}

#area7 .swiper-button-prev,
#area7 .swiper-button-next {
  position: absolute;
  top: 75px;
  max-width: 50px;
  width: 100%;
  /* PC-0021対応 ここから */
  transition: transform .3s;
  /* PC-0021対応 ここまで */
}

#area7 .swiper-button-prev {
  left: 0;
}

#area7 .swiper-button-next {
  left: 70px;
  transform: scaleX(-1);
}

/* PC-0021対応 ここから */
#area7 .swiper-button-prev:hover {
  transform: scale(.75);
}
#area7 .swiper-button-next:hover {
  transform: scaleX(-1) scale(.75);
}
/* PC-0021対応 ここまで */

#area7 .company_area{
  align-items: flex-start;
  display: flex;
  gap: 60px;
}

#area7 .company_area img{
  max-width: 420px;
  border-radius: 10px;
  object-fit: cover;
}

#area7 .dl_flex {
  display: flex;
  border-bottom: 1px dashed #8E8479;
  padding: 20px 0 22px 0;
  gap: 0 30px;
}

#area7 .dl_flex:first-of-type {
  border-top: 1px dashed #8E8479;
}

#area7 dl {
  width: 100%;
}

#area7 dt {
  line-height: 1.5;
  font-weight: bold;
  white-space: nowrap;
  width: 148px !important;
}

#area7 dd {
  width: 83.2%;
  font-size: 1.125rem;
  line-height: 1.18;
}

#area7 .dl__div__4 {
  padding-top: 25px;
  padding-bottom: 17px;
}

#area7 .dl__div__5 {
  padding-top: 36px;
  padding-bottom: 33px;
}

#area7 .dl__div__4 dt {
  padding-top: 12px;
}

#area7 .dl__div__4 dd {
  line-height: 1.49;
}

#area7 .dl__div__5 dd {
  line-height: 1.48;
}

#area7 .slide-items a:hover .swiper__imgbox img {
  transform: scale(1.05);
}

#area7 .move__arrow{
  border: 1px solid #836363;
}

#area7 .move__arrow::after{
  background-image: url(../img/common/arrow_white_circle_transparent.svg);
  background-size: cover;
}

#area7 .slide-items a:hover .move__arrow img{
  transform: translateX(50px);
  transition: all .3s ease-out;
}

#area7 .slide-items a:hover .move__arrow::after{
  left: 0px;
  transition: all .3s ease-out;
  animation: yazirushi-new .8s ease-in-out forwards;
}

#area7 .swiper__imgbox {
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 35px;
}

#area7 .swiper__imgbox img {
  transition: all .3s ease-out;
}

#area7 .company_area img.sp{
  display: none;
}

#area7 .swiper-navigation-icon{
  display: none;
}

/**************************
セクション8(news)
**************************/
#area8 {
  display: flex;
  justify-content: space-between;
  gap: 60px;
  padding-bottom: 120px;
  padding-top: 120px;
}
/* h2 */
#area8 h2 {
  flex-shrink: 0;
  font-family: 'Georgia';
  font-size: 4.5rem;
  font-weight: normal;
  letter-spacing: -.03em;
}
#area8 h2 span {
  display: block;
  font-family: 'Noto_Sans_JP';
  font-weight: bold;
  font-size: 1.25rem;
  letter-spacing: 0;
  margin-top: 25px;
  color: #634A3C;
}
/* h2 end */
#area8 .news__container {
  width: min(100%, 880px);
}
.news__list {
  margin-bottom: 40px;
}
.news__item {
  border-bottom: 1px dashed #d0d0d0;
  height: 99px;
}
.news__item:first-of-type {
  border-top: 1px dashed #d0d0d0;
}
.news__link {
  align-items: center;
  display: flex;
  height: 100%;
}
.news__category {
  font-weight: bold;
  margin-right: 20px;
  min-width: 64px;
  flex-shrink: 0;
}
.news__date {
  font-family: 'Overpass';
  font-size: .875rem;
  font-weight: 300;
  margin-right: 58px;
  position: relative;
  top: 3px;
  flex-shrink: 0;
}
.news__title {
  font-size: 1.125rem;
  width:  calc(100% - (64px + 20px + 76px + 58px + 50px));
  line-height: 1.45;
}
.move__arrow {
  border-radius: 50%;
  margin-left: auto;
  position: relative;
  overflow: hidden;
  border: 1px solid #707070;
  width: 50px;
  height: 50px;
  flex-shrink: 0;
  margin-left: 20px;
}

.move__arrow img{
  position: absolute;
  width: 50px;
  height: 50px;
}

.move__arrow::after{
  content: "";
  display: block;
  background-image: url(../img/common/arrow_black_circle_transparent.svg);
  width: 50px;
  height: 50px;
  position: absolute;
  left: -50px;
  top: 0px;
  transform: scaleX(.9);
}

.news__item:hover img{
  transform: translateX(50px);
  transition: all .3s ease-out;
}

.news__item:hover .move__arrow::after{
  left: 0px;
  transition: all .3s ease-out;
  animation: yazirushi-new .8s ease-in-out forwards;
}

@keyframes yazirushi-new{
  0%{
      transform: scaleX(1);
      margin-left: 0;
  }
  50%{
      transform: scaleX(.8);
      margin-left: 4px;
  }
  100%{
      transform: scaleX(1);
      margin-left: 0;
  }
}

/* .news__button {
  align-items: center;
  background-color: #333;
  border: 1px solid #707070;
  border-radius: 70px;
  color: #fff;
  display: flex;
  font-size: 1.25rem;
  font-weight: bold;
  height: 70px;
  margin-left: auto;
  padding: 0 10px 0 40px;
  width: 308px;
} */

.companies-btn{
  margin-right: 0;
  margin-left: auto; 
}



/*******************
SPはこちらから  
********************/


@media(max-width: 800px) {

  #area1 .sp-visible { 
    display: block; 
  }

  #area1 .firstview__title {
    position: absolute;
    left: 20px;
    bottom: 78px;
    display: block;
    width: auto;
  }

  #area1 .firstview__maintitle {
    font-size: 4.625rem;
    line-height: .99;
    letter-spacing: -.13875rem;
    margin-bottom: 10px;
  }
  @media(max-width: 360px) {
    #area1 .firstview__maintitle {
      /*
        ブラウザ幅360付近から見切れ始めるので、徐々にフォントサイズを小さくする。
        ブラウザ幅360pxでフォントサイズ74px、ブラウザ幅320pxでフォントサイズ62px
        の一次関数で変化。
      */
      font-size: calc(.3 * 100vw - 34px);
    }
  }

  #area1 .firstview__subtitle1 {
    font-size: 1.0625rem;
    line-height: 1.47;
    margin-bottom: 26px;
  }

}

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

  /* 共通設定 */

  .section__inner__1{
    padding: 0 calc((20 / 390) * 100%);
  }


  /* セクション２ */

  #area2{
    padding-top: 65px;
    padding-bottom: 70px;
  }

  #area2 img {
    width: auto;
  }

  #area2 .article__area .right{
    width: 100%;
  }

  #area2 .article__area .right p {
    font-size: .9375rem;
    margin-bottom: 30px;
  }

  /* セクション3 */
  #area3 .pc-visible { display: none; }
  #area3 .sp-visible { display: block; }

  #area3 .title__maintitle {
    font-size: 2.5rem;
    letter-spacing: -.03em;
    line-height: 1.40625rem;
    margin-top: 63px;
    margin-bottom: 20px;
  }
  #area3 .title__subtitle {
    font-size: .8125rem;
    font-weight: bold;
    line-height: 1.40625rem;
    margin-top: 20px;
  }

  #area3 .approach__inner {
    overflow: hidden;
  }

  #area3 .figure__ellipses {
    display: none;
  }
  #area3 .our-approach-sp {
    display: block;
    position: relative;
    margin: 0 auto;
    overflow: visible;
    stroke-linecap: butt;
  }

  @media(min-width: 641px) {
    #area3 .our-approach-sp {
      position: static;
      width: 640px;
    }
  }
  @media(max-width: 640px) {
    #area3 .our-approach-sp {
      width: calc((2 * 100% + 640px) / 3);
      left: calc((100% - (2 * 100% + 640px) / 3) / 2);
    }

    @media(max-width: 400px) {
      #area3 .our-approach-sp {
        width: calc(1.3 * 100% - 40px);
        left: calc((100% - (1.3 * 100% - 40px)) / 2);
      }
    }
  }

  @keyframes path1 {
    from {
      stroke-dashoffset: 88.0209;
    }
    to {
      stroke-dashoffset: 0;
    }
  }
  @keyframes path2 {
    from {
      stroke-dashoffset: 27.9796;
    }
    to {
      stroke-dashoffset: 0;
    }
  }

  #area3 .figure__text-blocks {
    flex-direction: column;
    margin-top: 20px;
  }

  #area3 .figure__text-blocks-item {
    border-left-width: 0;
    padding-bottom: 0;
  }
  #area3 .figure__text-blocks-item:nth-last-of-type(1),
  #area3 .figure__text-blocks-item:nth-last-of-type(2),
  #area3 .figure__text-blocks-item:nth-last-of-type(3) {
    width: 100%;
    padding-right: 0;
  }

  #area3 .figure__text-blocks-item::before {
    display: none;
  }


  #area3 .figure__text-block {
    padding-left: 0;
  }

  #area3 .figure__text-block-item-body {
    font-size: .8125rem;
    letter-spacing: 0;
    line-height: 18px;
    margin-bottom: 4px;
  }

  #area3 .figure__heading {
    display: flex;
    column-gap: 10px;
    align-items: center;
  }
  #area3 .figure__heading-num-bg {
    display: flex;
    width: 28px;
    height: 28px;
    background-color: #644A3C;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
  }
  #area3 .figure__heading-num-bg > span {
    font-family: Overpass;
    font-weight: 400;
    font-size: .8125rem;
    line-height: .8125rem;
    height: 10px;
    letter-spacing: -.03em;
    color: #fff;
  }
  #area3 .figure__heading-body {
    font-family: Noto_Sans_JP;
    font-size: 1.0625rem;
    font-weight: bold;
    line-height: .75rem;
    letter-spacing: 0px;
    color: #333;
  }
  #area3 .figure__text-block-item-dot {
    top: 0;
  }
  #area3 .separator {
    margin-top: 34px;
  }

  #area3 .figure__heading {
    margin-bottom: 15px;
  }

  #area3 .figure__arrows {
    display: none;
  }
}
@media screen and (max-width:800px) {
  /* セクション4 */

  #area4 .top__supporter__item{
    max-width: 50%;
  }

  #area4 .approach_inner{
    padding-bottom: 70px;
  }

  #area4 .top__supporter__item:nth-last-of-type(3){
    border-bottom-right-radius: 0;
  }

  #area4 h2{
    font-size: 2.5rem;
    margin-bottom: 24px;
  }

  #area4 p {
    font-size: .9375rem;
  }


  #area4 .modal-panel{
    width: 90%;
    padding-top: 8vh;
    padding-bottom: 8.5vh;
  }

  #area4 #closeModalBtn{
    top: 20px;
    width: 45px;
    height: 45px;
  }

  #area4 #modal-marquee > p{
    font-size: clamp(2rem, 7dvh, 3.75rem);
  }

  #area4 #modal-content{
    width: 90%;
    margin: auto;
    top: 0px;
    height: 100%;
    padding-bottom: 88px;
    display: flex;
    flex-direction: column;
  }

  #area4 #modalVideoPlayer{
    width: 100%;
    margin-bottom: 25px;
  }

  #area4 #modal-name {
    font-size: 1.0625rem;
    line-height: 1.471;
    margin-top: 3px;
    margin-bottom: 30px;
  }

  #area4 #modal-text{
    width: 100%;
    font-size: .9375rem;
  }

  #area4 .modal-text-area{
    position: relative;
    width: 100%;
    top: unset;
    height: auto;
    overflow-y: auto;
  }

  #area4 .modal-content-button {
    position: absolute;
    bottom: 27px;
    right: 20px;
  }

  #area4 #modal-prevBtn, #area4 #modal-nextBtn{
    width: 45px;
    height: 45px;
  }

}

@media screen and (max-width:450px) {
  #area4 .top__supporter__text {
    bottom: 10px;
    left: 10px;
  }
  #area4 .top__supporter__post {
    font-size: .75rem;
  }

  #area4 .top__supporter__name {
    font-size: .9375rem;
  }

  #area4 .top__supporter__icon {
    bottom: 10px;
    height: 18px;
    right: 10px;
    width: 18px;
  }
}

  /* セクション5 */
  @media screen and (max-width:800px) {
  #area5 {
    padding-top: 40px;
    padding-bottom: 70px;
  }

  #area5 .section__inner__1:first-of-type {
    padding: 0 calc((20 / 390)* 100%);
  }

  #area5 .section__inner__1:nth-last-of-type(1) {
    padding: 0 calc((40 / 390)* 100%);
  }

  #area5 .section__inner__2 {
    padding-left: calc((20 / 390)* 100%);
  }

  #area5 h2 {
    font-size: 2.5rem;
    margin-bottom: 24px;
  }

  #area5 h2 p {
    margin-top: 20px;
    line-height: 19px;
  }

  #area5 p {
    font-size: .9375rem;
  }

  #area5 .ceo_message__img {
    display: none;
  }

  #area5 .ceo_message__img__sp {
    display: block;
  }

  #area5 h3 {
    font-size: 1.5625rem !important;
    line-height: 1.6;
    margin-bottom: 33px;
  }

  #area5 h3 span {
    display: block;
    line-height: 1.6;
  }

  #area5 .namearea {
    display: block;
    margin-bottom: 38px;
  }

  #area5 .namearea p:first-of-type {
    font-size: 1.0625rem;
    margin-bottom: 3px;
    line-height: 25px;
  }

  #area5 .namearea p:last-of-type {
    font-size: .75rem;
    height: auto;
  }

  #area5 .textarea {
    border-bottom: unset;
  }

  #area5 .textarea p {
    line-height: 2;
    font-size: .9375rem;
    margin-bottom: 28px;
  }

  #area5 .textarea p:last-of-type {
    margin-bottom: unset;
  }
}


/* セクション6 */
@media screen and (max-width:800px) {

  #area6 {
    padding: 0 calc((20 / 390) * 100%);    
    padding-top: 40px;
    padding-bottom: 34px;
    background: #F7F3EF 0% 0% no-repeat padding-box;
    margin-bottom: 0;
  }

  #area6 .section__inner__2{
    padding: 0;
  }

  #area6 .scrolling-container {
    display: none;
  }

  #area6 h2 {
    font-size: 2.5rem;
    margin-bottom: 40px;
  }

  #area6 h2 p {
    margin-top: 20px;
    line-height: 19px;
    font-size: .9375rem;
  }

  #area6 h3 {
    font-size: .9375rem;
    color: #634A3C;
  }

  #area6 .cross {
    font-size: 1.3125rem;
    margin-bottom: 22px;
  }

  #area6 p {
    font-size: .9375rem;
  }

  #area6 h4 {
    font-size: 1.6875rem;
    line-height: 1.44;
  }

  #area6 h5 {
    font-size: 1.3125rem;
    line-height: 1.45;
    margin-bottom: 12px;
  }

  #area6 .textarea {
    border-bottom: unset;
    margin-bottom: 0;
  }

  #area6 .textarea p {
    letter-spacing: 0;
    line-height: 1.55;
    font-size: .9375rem;
    margin-bottom: 0;
  }

  #area6 .textarea p:last-of-type {
    margin-bottom: 24px;
  }

  #area6 > .flex{
    padding: 0;
  }

  #area6 .philosophy-innner div.flex:first-of-type {
    gap: 5px;
    margin-bottom: 16px;
  }

  #area6 .flex:first-of-type p{
    font-size: .75rem;
  }

  #area6 .value .flex p {
    font-size: .9375rem;
    line-height: 1.45;
    margin-bottom: 0;
  }

  #area6 div.flex:first-of-type span {
    width: 7px;
    height: 7px;
    border-radius: 15px;
    background-color: #634A3C;
  }

  #area6 .philosophy-innner h4 .ruby{
    font-size: 1.0625rem;
    margin-top: 10px;
  }

  #area6 .philosophy-innner:nth-of-type(n) {
    padding-bottom: 0;
    margin-bottom: 36px;
  }
  #area6 .philosophy-innner:first-of-type h4 {
    margin-bottom: 20px;
  }

#area6 .philosophy-innner:nth-of-type(2) h4 {
    margin-bottom: 17px;
  }

  #area6 .value .flex:nth-of-type(n+2) {
    display: block;
    margin-bottom: 18px;
  }

  #area6 .value .flex:last-of-type{
    margin-bottom: 0;
  }

  #area6 .philosophy-innner:last-of-type{
    margin-bottom: 0;
    border-bottom: none;
  }

}

/************************** 
TOPセクション7-SP(S&C)
**************************/

/* 見出し右側のテキストをレスポンシブ対応のため1100でflex解除、SPとデザイン合わせ */
@media screen and (max-width:1100px) {
  #area7 .title_area {
    display: block;
    padding-bottom: 28px;
    margin-bottom: 40px;
  }

  #area7 .title_area h2 {
    margin-bottom: 16px;
    margin-right: 0;
    white-space: wrap;
    font-size: 2.5rem;
  }

  #area7 .title_area p {
    height: auto;
    font-size: .8125rem;
    margin: auto 0;
  }
}

@media screen and (max-width:768px) {
  #area7{
    padding: 40px 0 40px 0;
  }

  #area7 .section__container__2 {
    margin-right: calc((40 / 390) * 100%);
    margin-left: calc((40 / 390) * 100%);
    margin-bottom: 54px;
  }

  #area7 .swiper-wrapper{
    display: block;
  }

  #area7 .company_area__imgdiv {
    display: none;
  }

  #area7 dl {
    width: 100% !important;
  }
  
  .swiper,
  .swiper-wrapper,
  .swiper-slide {
    height: unset;
    overflow: unset;
  }

  .swiper {
    margin-left: auto;
  }

  .sp-swiper-wrapper {
    flex-direction: column !important;
  }

  #area7 .swiper-button__container {
    display: none;
  }

  #area7 .slide-items {
    max-width: unset;
  }

  #area7 .slide-items p:first-of-type{
    font-size: .8125rem;
    margin-bottom: 0;
  }

  #area7 .slide-items p:last-of-type{
    font-size: .9375rem;
  }

  #area7 .slide-items h3 {
    font-size: 1.1875rem;
    line-height: 1.43;
  }

  #area7 .slide-items a> img{
    margin-bottom: 26px;
  }

  #area7 .swiper__imgbox{
    margin-bottom: 25px;
  }

  #area7 .h3-flexbox{
    align-items: end;
    margin-bottom: 17px;
  }

  #area7 .move__arrow{
    max-width: 35px;
    height: 35px;
  }

  #area7 .h3-flexbox img{
    width: 100%;
    height: auto;
  }

  #area7 .slide-items a{
    margin-bottom: 40px;
  }

  #area7 .company_area{
    display: block;
  }

  #area7 .company_area img{
    display: none;
  }

  #area7 .company_area img.sp{
    max-width: 260px;
    display: block;
    width: 100%;
    height: auto;
    margin: auto;
    margin-bottom: 60px;
  }

  #area7 dt{
    font-size: .8125rem;
    font-weight: normal;
  }

  #area7 dd{
    font-size: .9375rem;
    font-weight: 500;
  }

  #area7 .dl_flex {
    padding: 11px 0 13px;
  }

  #area7 .dl__div__4 {
    padding-bottom: 9px;
  }

  #area7 .dl__div__4 a {
    font-weight: normal;
  }

  #area7 .dl__div__4 dd,#area7 .dl__div__5 dd {
    margin-top: 4px;
  }

  #area7 .dl__div__5 {
    padding: 15px 0;
  }

  #area7 .move__arrow::after{
    height: 33px;
    width: 33px;
  }
}

/* セクション８ */
@media (width <= 800px) {
  #area8 {
    display: block;
    padding-bottom: 60px;
    padding-top: 40px;
  }
  #area8 h2 {
    font-size: 2.5rem;
    letter-spacing: -.075rem;
    margin-bottom: 24px;
  }
  #area8 h2 p {
    font-size: 1.25rem;
    letter-spacing: 0rem;
    margin-top: 20px;
  }
  #area8 h2 span{
    font-size: .8125rem;
    margin-top: 16px;
  }
  #area8 .news__list {
    margin-bottom: 30px;
  }
  #area8 .news__item {
    height: auto;
  }
  #area8 .news__link {
    flex-wrap: wrap;
    padding: 20px 0 13px;
    row-gap: 13px;
  }
  #area8 .move__arrow {
    display: none;
  }
  #area8 .news__category {
    font-size: .75rem;
    margin-right: 10px;
    min-width: 48px;
  }
  #area8 .news__date {
    font-size: .75rem;
    margin-right: 0;
    top: 2px;
  }
  #area8 .news__title {
    font-size: .9375rem;
    line-height: 1.55;
    margin-left: 58px;
    text-decoration: underline;
    width: 100%;
  }
  #area8 .companies-btn {
    font-size: .9375rem;
    height: 46px;
    margin: 0 auto;
    padding: 0 7px 0 20px;
    width: 204px;
  }
  #area8 .companies-btn__yazirushi{
    height: 33px;
    width: 33px;
  }
  #area8 .yazirushi-area__image{
    width: 33px;
  }  
  .companies-btn__text {
    font-size: .9375rem;
    left: 20px;
  }
}