@charset "UTF-8";

/************************** 
セクション１(ファーストビュー)
**************************/
#area1 {
  height: 800px;
  margin-bottom: 142px;
  position: relative;
}
#area1 .firstview__title {
  padding-top: 33px;
  position: relative;
  z-index: 10;
}
#area1 .firstview__title>* {
  display: block;
}
#area1 .firstview__title__small {
  font-family: 'Noto_Sans_JP';
  font-size: 1.75rem;
  font-weight: bold;
  margin-bottom: 35px;
}
#area1 .firstview__title__large {
  font-family: 'Georgia';
  font-size: var(--fv-main-text);
  font-weight: normal;
  letter-spacing: -.20625rem;
  margin-bottom: 37px;
}
#area1 .firstview__title__catchphrase {
  font-family: 'Noto_Sans_JP';
  font-size: var(--fv-sub-text);
  font-weight: bold;
}
#area1 .firstview__image {
  background-image: url("../img/the_vision_office/mv_vision.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 10px 0 0 10px;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  min-width: 560px;
  max-width: 800px;
  width: 35vw;
}

/************************** 
セクション2(about)
**************************/
#area2{
  position: relative;
  overflow: hidden;
}

#area2>img{
  width: 100vw;
  position: absolute;
  left: 0;
  display: block;
  top: 0px;
  height: 100%;
  object-fit: cover;
  z-index: -1;
  object-position: top;
}

#area2 .about-section{
  font-family: "Noto Sans CJK JP";
  font-size: 18px;
  display: flex;
  justify-content: space-between;
  gap: 40px;
  margin: 148px 0 120.5px;
}

/* about-section__col-body */
#area2 .about-section__col-body{
  max-width: 880px;
  width: calc(100% - 260px);
}
/* about-contener */

/* about-contener__text */
#area2 .about-contener__text{
  margin-bottom: 80px;
}
#area2 .about-contener__text h3{
  font-size: 28px;
  line-height: 40px;
  margin-bottom: 40px;
}
#area2 .about-contener__text p{
  letter-spacing: .25px;/* テキストの折り返し位置がずれたので数値を増やしています。*/
  line-height: 26px;
}
#area2 .about-contener__text p:first-of-type{
  margin-bottom: 26px;
}
/* about-info */

#area2 .about-info__list h4{
  font-size: 24px;
  letter-spacing: .24px;
  line-height: 35px;
  position: relative;
  margin: 0 0 16px 25px;
  height: 35px;
  color: #634A3C;
}
#area2 .about-info__list h4::before{
  position: absolute;
  top: 50%;
  right: calc(100% + 10px);
  transform: translateY(-50%);
  display: block;
  content: "";
  background-color: #634A3C;
  width: 15px;
  height: 15px;
  border-radius: 50%;
}
/*about-info*/
#area2 .about-contener__item.about-info{
  display: flex;
  flex-direction: column;
  gap: 28px;
}
/* about-group */
#area2 .about-group{
  display: grid;
  grid-template-columns: 218px auto;/* （220pxじゃないのは点線が綺麗に見えるようのmarginぶん） */
  border-radius: 10px;
  background-color: #fff;
  grid-template-columns: max(27.3%, 150px) 1fr;
}

#area2 .about-group__item{
  border-top: 1px dashed #d0d0d0;
  padding: 15px 0 16px;/* paddingのズレが気になったので文字の中央に配置がされるようにline-height中央揃えからのpaddingで調節しました。*/
}
#area2 .about-group__item:first-child,
#area2 .about-group__item:nth-child(2){
  border-top: none;
  padding: 16px 0;
}
#area2 .about-group__item:nth-last-of-type(even){
  letter-spacing: .18px;
  line-height: 26px;
  font-weight: bold;
  margin-left: 20px;
  color: #634A3C;
  
}
#area2 .about-group__item:nth-last-of-type(odd){
  font-family: "Helvetica";
  font-size: 16px;
  line-height: 26px;

  margin-left: 2px;/* 点線ようのmargin */
  margin-right: 20px;
}

/************************** 
セクション3(work)
**************************/
/* #area3__wrapper {
  background-color: #493932;
  padding-top: 100px;
} */
 
#area3 {
  display: flex;
  font-family: 'Noto_Sans_JP';
  justify-content: space-between;
  gap: 40px;
  background-color: #493932;
  padding-top: 100px;
}

#area3 .section__inner__3 {
  display: flex;
  font-family: 'Noto_Sans_JP';
  justify-content: space-between;
  gap: 40px;
}

#area3 .section__col-title h2{
  color: #F7F3EF;
}

#area3 .section__col-title p{
  color: #B08D57;
}

#area3 .work__list {
  border-top: 1px dashed #8E8479;
  max-width: 880px;
  width: calc(100% - 260px);
}

#area3 .work__list * {
  letter-spacing: .01em;
  color: #F7F3EF;
}

#area3 h3 {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  font-size: 1.5rem;
  row-gap: 8px;
}
#area3 .work__list h3 span {
  background-color: #B08D57;
  border-radius: 5px;
  color: #272116;
  font-size: .875rem;
  padding: 4px 8px;
}
#area3 .work__item {
  border-bottom: 1px dashed #848484;
  padding: 45px 0 47px;
  display: flex;
  justify-content: space-between;
  gap: 50px;
}
#area3 .work__item:first-of-type {
  padding-top: 37px;
}
#area3 .work__item:has(.work__video) {
  padding: 50px 0;
}
#area3 .work__item:last-of-type {
  border-bottom: none;
  padding-bottom: 0;
}
#area3 .work__video {
  border-radius: 10px;
  width: min(700px, 100%);
  height: 393px;
}
#area3 .work__content {
  max-width: 610px;
  width: 100%;
}
#area3 .work__text {
  line-height: 1.5;
  margin-bottom: 25px;
  color: #F7F3EF;
}
#area3 .work__content__item {
  font-size: .875rem;
  line-height: 1.25;
  color: #F7F3EF;
}
#area3 .work__content__item::before {
  content: "・";
}

/**************************
セクション4(our office)
**************************/

:root {
  --gap: 0;
}

#area4 {
  overflow: hidden;
  padding-top: 118px;
  padding-bottom: 120px;
  background-color: #272116;
}

#area4 h2{
  color: #F7F3EF;
}

#area4 h3{
  color: #F7F3EF;
}

#area4 h4{
  color: #F7F3EF;
}

#area4 .section__col-title p{
  color: #B08D57;
}

#area4 p{
  color: #F7F3EF;
}

#area4 .ouroffice-section {
  font-size: 18px;
  display: flex;
  justify-content: space-between;
  gap: 40px;
}

#area4 .swiper-section {
  font-size: 18px;
  display: flex;
  justify-content: space-between;
  gap: 113px;
}

@media screen and (max-width:1600px) {
  #area4 .swiper-section {
    gap: var(--gap);
  }
}

/* ouroffice-section__col-title */
#area4 .ouroffice-section__col-title h2{
  font-family: "Georgia";
  font-size: 40px;
  letter-spacing: -1.2px;
  font-weight: normal;
  line-height: 46px;
  white-space: nowrap;

  margin: 4px 0 10px;
  height: 46px;
}

#area4 .ouroffice-section__col-title p{
  font-weight: bold;
  line-height: 26px;
  white-space: nowrap;

  height: 26px;
}

/* ouroffice-section__col-body */
#area4 .ouroffice-section__col-body{
  max-width: 880px;
  width: calc(100% - 260px);
}

/* area4 top-text-area */
#area4 .ouroffice-contener__text h3{
  font-size: 28px;
  line-height: 40px;
    
  height: 40px;
  margin-bottom: 40px;
}
#area4 .ouroffice-contener__text p{
  letter-spacing: 0.18px;/* テキストの折り返し位置がずれたので数値を増やしています。*/
  line-height: 26px;
}
#area4 .ouroffice-contener__text p:first-of-type{
  margin-bottom: 47px;
}

/* area4 top-slide-area */
#area4 .section__inner__r {
  margin-bottom: 60px;
}

#area4 .section__container__4 .swiper { /* #swiper-topを付けると有効にならない */
  scrollbar-gutter: stable;
}

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

#area4 #swiper-top {
  padding-bottom: 120px !important;
  width: calc(100% - 260px);
  margin-right: 0;
}

#area4 #swiper-top .slide-items {
  max-width: 425px;
}

#area4 #swiper-top .slide-items > img {
  border-radius: 10px;
  margin-bottom: 15px;
}

#area4 #swiper-top .slide-items h4 {
  font-size: 1.25rem;
  line-height: 29px;
  margin-bottom: 11px;
  letter-spacing: 0.2px;
}

#area4 #swiper-top .slide-items p {
  font-size: 0.875rem;
  line-height: 20px;
  letter-spacing: 0.14px;
}

#area4 #swiper-top .swiper-button__container {
  position: relative;
}

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

#area4 #swiper-top .swiper-button-prev,
#area4 #swiper-top .swiper-button-next {
  position: absolute;
  top: 80px;
  max-width: 50px;
  width: 100%;
  transition: transform .3s;
}

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

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

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

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

#area4 .dummy_data {
  visibility: hidden;
  width: 220px;
}

/* area4 bottom-slide-area */
#area4 .bottom-slide-area {
  border-radius: 10px;
  background-color: #634A3C;
  padding: 35px min(5%, 40px) 40px min(5%, 40px);
  line-height: 24px;
}

#area4 .bottom-slide-area h3 {
  font-size: 1.25rem;
  line-height: 29px;
  margin-bottom: 1px;
  letter-spacing: 0.2px;
}

#area4 .bottom-slide-area h4 {
  line-height: 11px;
}

#area4 .ouroffice-group{
  display: grid;
  grid-template-columns: 70px 140px auto;/* （220pxじゃないのは点線が綺麗に見えるようのmarginぶん） */
  font-size: 1rem;
  margin-bottom: 20px;
}

#area4 .ouroffice-group__item{
  border-bottom: 1px dashed #D0D0D0;
  padding-top: 22px;
  padding-bottom: 17px;
  cursor: pointer;
  color: #F7F3EF;
}

#area4 .ouroffice-group__item:first-of-type,
#area4 .ouroffice-group__item:nth-of-type(3n+1) {
  font-family: 'Overpass'; 
  font-weight: 600;
}

#area4 .ouroffice-group__item:nth-of-type(3n) {
  line-height: 24px;
  padding-top: 16px;
}

/* PC-0022対応 ここから */
/* 出勤日のスケジュール：3つで1行（hoverした行全体にスタイルを当てる） */
/* 1列目をhover */
#area4 .ouroffice-group__item:nth-child(3n+1):hover,
#area4 .ouroffice-group__item:nth-child(3n+1):hover + .ouroffice-group__item,
#area4 .ouroffice-group__item:nth-child(3n+1):hover + .ouroffice-group__item + .ouroffice-group__item,
/* 2列目をhover */
#area4 .ouroffice-group__item:nth-child(3n+2):hover,
#area4 .ouroffice-group__item:has(+ .ouroffice-group__item:nth-child(3n+2):hover),
#area4 .ouroffice-group__item:nth-child(3n+2):hover + .ouroffice-group__item,
/* 3列目をhover */
#area4 .ouroffice-group__item:nth-child(3n):hover,
#area4 .ouroffice-group__item:has(+ .ouroffice-group__item:nth-child(3n):hover),
#area4 .ouroffice-group__item:has(+ .ouroffice-group__item + .ouroffice-group__item:nth-child(3n):hover) {
  background-color: rgba(255, 255, 255, 0.1);
}
/* PC-0022対応 ここまで */

#area4 #swiper-bottom {
  border-radius: 10px;
}

#area4 .swiper-bottom-area{
  position: relative;
}

#area4 .swiper-bottom-area .swiper-pagination {
  text-align: left;
  line-height: 10px;
  left: 30px;
  bottom: 20px;
}

#area4 .swiper-bottom-area .swiper-pagination-bullet {
  background: #CBCBCB; 
  width: 10px;
  height: 10px;
}

#area4 .swiper-bottom-area .swiper-pagination-bullet-active {
  background: #FFFFFF; 
}



/**************************
セクション5(voice)
**************************/
#area5 {
  background-color: #F7F3EF;
}

#area5 h3 {
  font-weight: bold;
  letter-spacing: 0.24px;
}


#area5 .section__inner__3 {
  display: flex;
  padding-top: 108px;
  justify-content: space-between;
  gap: 40px;
}

#area5 .area5__area {
  max-width: 880px;
  width: calc(100% - 260px);
}

#area5 .contact__area__item {
  display: flex;
  gap: 40px;
}

#area5 .contact__area__item img{
  max-width: 170px;
  height: 125px;
  border-radius: 10px;
  width: 100%;
  /* PC-0023対応 ここから */
  background-color: #fff;
  padding: 12px 31px 0;
  /* PC-0023対応 ここまで */
}

#area5 .area5_title {
  font-size: 1.75rem;
  line-height: 60px;
  margin-bottom: 40px;
}

#area5 .area5_title_concept {
  letter-spacing: 0.18px;
  line-height: 26px;
}

#area5 span {
  display: block;
  border: 1px dashed #848484;
  margin-top: 42px;
  margin-bottom: 40px;
}

#area5 span:last-of-type {
  margin-bottom: 100px;
} 

#area5 .tag {
  max-width: 161px;
  width: 100%;
  height: 26px;
  font-size:0.875rem;
  font-weight: bold;
  border-radius: 5px;
  border: solid 1px #D0D0D0;
  background-color: #634A3C;
  color: #FFFFFF;
  text-align: center;
  letter-spacing: 0.14px;
  padding-top: 5px;
}

#area5 .concept {
 font-size: 0.875rem; 
 line-height: 20px;
}

#area5 .contact__area__item_innere_tag2 {
  margin-bottom: 12px;
}

#area5 .contact__area__item_innere2_tag3 {
  margin-bottom: 19px;
}

#area5 .contact__area__item_innere h4 {
  font-weight: bold;
  font-size: 1.5rem;
  letter-spacing: 0.24px;
  line-height: 35px;
  margin-bottom: 26px;
}

#area5 .contact__area__item_innere2 h4 {
  font-weight: bold;
  font-size: 1.5rem;
  letter-spacing: 0.24px;
  line-height: 36px;
  margin-bottom: 19px;
}

/**************************
セクション6()
**************************/
#area6 {
    margin: 0 auto;
}

#area6 .section__inner__3{
  display: flex;
  padding-top: 110px;
  justify-content: space-between;
  gap: 40px;
}

/* #area6 .section__col-title {
    margin-bottom: 38px;
}

#area6 .section__col-title h2 {
    font-family: Georgia;
    letter-spacing: -1.05px;
    font-size: 2.1875rem;
    margin: 0;
}

#area6 .section__col-title p {
    color: #634A3C;
    font-size: 0.75rem;
    font-weight: bold;
    /* line-height: 55px; 
} */

#area6 .career__area{
  max-width: 880px;
    width: calc(100% - 260px);
}

#area6 .career_area_news{
  margin-bottom: 100px;
}

#area6 .career_area__header h3{
    color: #333333;
    font-size: 1.75rem;
    margin-bottom: 40px;
    line-height: 1.5;
}

#area6 .career_area__header p{
    color: #333333;
    font-size: 1.125rem;
    line-height: 1.444;
    margin-bottom: 60px;
}

#area6 .career_area_news .news__list{
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
}

#area6 .catch img{
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 380 / 240;
}

#area6 .catch img{
  height: 100%;
  object-fit: cover;
}

#area6 li.news__item {
    width: calc(50% - 14px);
}

#area6 .news__category span{
  color: #fff;
  display: inline-block;
  padding: 5px 10px;
  background-color: #634A3C;
  border-radius: 5px;
  margin-top: 10px;
  font-weight: 700;
}

#area6 h4.news__title{
    margin-top: 10px;
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.45;
}

#area6 .name{
  font-size: 1rem;
  color: #333333;
  font-weight: 700;
  margin-top: 10px;
}

#area6 .employment{
  margin-top: 20px;
  font-size: 0.875rem;
  color: #333333;
  font-weight: 400;
  line-height: 1.4;
}

#area6 .period{
  font-size: 0.875rem;
  color: #333333;
  font-weight: 400;
  line-height: 1.4;
}

/**************************
セクション7(B型事務所トップ)
**************************/

/* area6のtopのmarginにbefore要素が追従するように作成しました */
:root {
    --margin-vision-b-top: 99px;
  }

#area7 {
  height: 800px;
  margin-top: var(--margin-vision-b-top);
  position: relative;
}
#area7::before{
  content: '';
  height: 1px;
  width: 85%;
  position: absolute;
  left: 50%;
  top: calc(var(--margin-vision-b-top) * -1);
  transform: translateX(-50%);
  background-color: #D0D0D0;
}
#area7 .type-b_top__title {
  padding-top: 33px;
  position: relative;
  z-index: 10;
}
#area7 .type-b_top__title>* {
  display: block;
}
#area7 .type-b_top__title__small {
  font-family: 'Noto_Sans_JP';
  font-size: 1.75rem;
  font-weight: bold;
  margin-bottom: 35px;
}
#area7 .type-b_top__title__large {
  font-family: 'Georgia';
  font-size: var(--fv-main-text);
  font-weight: normal;
  letter-spacing: -.20625rem;
  margin-bottom: 37px;
}
#area7 .type-b_top__title__large .serif {
  font-family: serif;
  font-size: calc(var(--fv-main-text) * 9 / 11); /* ブラウザ幅1600pxの時、「オルタナティブ」は「Office」の9/11倍の大きさ */
  font-weight: bold;
  letter-spacing: -2.7px;
}
#area7 .type-b_top__title__catchphrase {
  font-family: 'Noto_Sans_JP';
  font-size: var(--fv-sub-text);
  font-weight: bold;
}

/* 画像の上下余白を隠すために「background-size」「background-position」にpxで設定をしました */
#area7 .type-b_top__image {
  background-image: url("../img/the_vision_office/mem_vision.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 10px 0 0 10px;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  min-width: 560px;
  max-width: 800px;
  width: 35vw;
}

/************************** 
セクション8(B型about)
**************************/

#area8{
  position: relative;
  /* overflow: hidden; */
}

#area8>img{
  width: 100vw;
  height: 1066px;
  position: absolute;
  left: 0px;
  display: block;
  bottom: -476px;
  object-fit: cover;
  z-index: -1;
  object-position: top;
}

#area8 .about-section{
  font-family: "Noto Sans CJK JP";
  font-size: 18px;
  display: flex;
  justify-content: space-between;
  gap: 40px;
  margin: 150px 0 105px;
}

/* about-section__col-body */
#area8 .about-section__col-body{
  max-width: 880px;
  width: calc(100% - 260px);
}

/* about-group */
#area8 .about-group{
  display: grid;
  grid-template-columns: 218px auto;/* （220pxじゃないのは点線が綺麗に見えるようのmarginぶん） */
  border-radius: 10px;
  background-color: #fff;
  grid-template-columns: max(27.3%, 150px) 1fr;
}

#area8 .about-group__item{
  border-top: 1px dashed #d0d0d0;
  padding: 15px 0 16px;/* paddingのズレが気になったので文字の中央に配置がされるようにline-height中央揃えからのpaddingで調節しました。*/
}
#area8 .about-group__item:first-child,
#area8 .about-group__item:nth-child(2){
  border-top: none;
  padding: 16px 0;
}
#area8 .about-group__item:nth-last-of-type(even){
  letter-spacing: .18px;
  line-height: 26px;
  font-weight: bold;
  margin-left: 20px;
  color: #634A3C;
  
}
#area8 .about-group__item:nth-last-of-type(odd){
  font-family: "Helvetica";
  font-size: 16px;
  line-height: 26px;
  margin-left: 2px;/* 点線ようのmargin */
  margin-right: 20px;
}

/**************************
セクション9(Work)
**************************/

#area9 {
  padding-top: 103px;
  font-family: Noto_Sans_JP;
  background-color: #493932;
}

#area9 .section__inner__3 {
  display: flex;
  font-family: Noto_Sans_JP;
  justify-content: space-between;
  gap: 40px;
}

#area9 .section__col-title h2{
  color: #F7F3EF;
}

#area9 .section__col-title p{
  color: #B08D57;
}

#area9 .work__list {
  max-width: 880px;
  width: calc(100% - 260px);
}

#area9 .work__list * {
  font-weight: 400;
  letter-spacing: 0.14px;
  color: #F7F3EF;
}

#area9 h3 {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  font-size: 1.5rem;
  row-gap: 8px;
  min-width: 220px;
}
#area9 .work__list h3 span {
  background-color: #B08D57;
  border-radius: 5px;
  color: #272116;
  font-size: .875rem;
  padding: 4px 8px;
}
#area9 .work__item {
  border-bottom: 1px dashed #848484;
  display: flex;
  justify-content: space-between;

  padding-top: 45px;
  border-bottom: 1px dashed #8E8479;
  padding-bottom: 45px;
}
#area9 .work__item:first-of-type {
  padding-top: 38px;
  border-top: 1px dashed #8E8479;
}
#area9 .work__item:nth-of-type(2) {
  padding-top: 45px;
  border-top: 1px dashed #8E8479;
}

#area9 .work__content {
  max-width: 610px;
  width: 100%;
}

#area9 .work__item:first-of-type .work__content {
  margin-top: 14px;
}
#area9 .work__item:nth-of-type(2) .work__content {
  margin-top: 7px;
}

#area9 .work__text {
  font-family: Noto_Sans_JP;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0.16px;
  margin-bottom: 25px;
  color: #F7F3EF;
}
#area9 .work__content__item {
  font-size: .875rem;
  line-height: 1.25;
  color: #F7F3EF;
}
#area9 .work__content__item::before {
  content: "・";
}
#area9.back-blend {
  padding-bottom: 95px;
  margin: 0;
}
#area9.back-blend::after {
  display: none;
}


/**************************
セクション8(Access)
**************************/
#area10 .section__inner__3{
  display: flex;
  padding-top: 100px;
  justify-content: space-between;
  gap: 40px;
}
#area10 .contents {
  max-width: 880px;
  width: calc(100% - 260px);
}
#area10 .contents__mapwrapper {
  position: relative;
  width: 100%;
  max-width: 870px;
  height: 500px;
  margin-bottom: 35px;
}
#area10 .contents__map {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 5px;
}
#area10 .contents__subtitle {
  display: block;
  font-family: 'Noto_Sans_JP';
  font-size: 1.0625rem;
  font-weight: 500;
  color: #333333;
  margin-bottom: 2px;
}
#area10 .contents__title {
  display: block;
  font-family: 'Noto_Sans_JP';
  font-size: 2.25rem;
  font-weight: bold;
  color: #333333;
  margin-bottom: 30px;
  /* line-height: 1.88; */
  line-height: 1.3;
  margin-top: 12px;
}

#area10 .contents__address-wrapper {
  display: flex;
  align-items: flex-end;
  margin-bottom: 14px;
  gap: 13px;
}
#area10 .contents__address {
    font-family: 'Noto_Sans_JP';
    font-size: 1.0625rem;
    color: #333333;
    line-height: 1.47;
    display: flex;
    align-items: flex-end;
    gap: 10px;
}
#area10 .contents__googlemap {
  display: inline-block;
  margin-bottom: 3px;
}
#area10 .contents__link-googlemap {
  font-family: Noto_Sans_JP;
  font-size: 1rem;
  font-weight: 500;
  color: #B08D57;
  text-decoration: underline;
  display: inline-block;
}
#area10 .contents__map-icon {
  display: inline-block;
  width: 10px;
  margin-right: 5px;
}
#area10 .contents__access {
  margin-bottom: 48px;
}
#area10 .contents__access dt {
  font-family: 'Noto_Sans_JP';
  font-size: 1.0625rem;
  font-weight: bold;
  color: #333333;
  display: flex;
  align-items: center;
  gap: 8px;
}
#area10 dt span{
  display: block;
  line-height: 1.05;
}
#area10 .contents__access dt:nth-of-type(1) {
  margin-bottom: 10px;
}
#area10 .contents__access dt:nth-of-type(2) {
  margin-bottom: 10px;
}
#area10 .contents__access dd {
  font-family: 'Noto_Sans_JP';
  font-size: 0.9375rem;
  font-weight: 400;
  color: #605757;
  line-height: 1.6;
}
#area10 .contents__access dd:first-of-type {
  margin-bottom: 11px;
}
#area10 .contents__access-icon {
  display: block;
  aspect-ratio: 1 /1;
  width: 22px;
}

/* 以下、ボタン部分はConsultingページのセクション３（companies）より拝借 */
/* companies-btn */
#area10 .companies-btn{
  position: relative;
  margin: 38px 0 120px;
  max-width: 400px;
  height: 70px;
  background-color: #493932;
  /* border: #707070 solid 1px; */
  border-radius: 70px;
  display: block;
  overflow: hidden;
}
/*クラス名をつけるJavaScriptを入れたので元々別のクラス名でleft-100%にしておいて
area .fiast-action クラス名で上書きしてleftを0に戻してゆっくり変わるようにするとできるかも*/
#area10 .companies-btn__hover{
  position: relative;
  left: -120%;
  pointer-events: none;
  transition: left 1s ease;
}
#area10 .companies-btn__background{
  width: 400px;
  height: 70px;
  border-radius: 70px;
}
#area10 .companies-btn__cut-out{
  width: 70px;
  height: 70px;
  border-radius: 70px;
  background-color: #493932;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

/* 交互の動作 */

#area10 .first-action .companies-btn__hover,
#area10 .second-action .companies-btn__hover{
  left: 100%;
}

#area10 .first-action .companies-btn__background{
  background-color: #b18e57;
}
#area10 .second-action .companies-btn__background{
  background-color: #b18e57;
}

/* テキスト */

#area10 .companies-btn__text{
  font-size: 20px;
  font-weight: 700;
  line-height: 29px;
  color: #FFFFFF;
  position: absolute;
  top: 50%;
  left: 40px;
  transform: translateY(-50%);
  height: 29px;
  pointer-events: none;
}
/* 矢印 */

#area10 .companies-btn__yazirushi{
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  height: 50px;
  width: 50px;
  border-radius: 50%;
  background-color: #FFFFFF;
}
#area10 .yazirushi-area{
  height: 100%;
  width: 100%;
  position: relative;
}
#area10 .yazirushi-area__image,
#area10 .yazirushi-area__image-new{
  background-image: url(../img/common/arrow_black_circle_transparent.svg);
  background-size: calc(100% + 4px);
  background-position: center center;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 50px;
}
#area10 .yazirushi-area__image{
  left: 0;
}
#area10 .yazirushi-area__image-new{
  left: -60px;
}

#area10 .companies-btn:hover .yazirushi-area__image{
  transition-delay: .5s;
  transition: left .5s ease;
  left: 60px;
}

#area10 .companies-btn:hover .yazirushi-area__image-new{
  transition-delay: 2.5s;
  transition: left .4s ease;
  left: 0px;
  animation: yazirushi-new .8s ease-in-out forwards;
  
}
@keyframes yazirushi-new{
  0%{
      transform: scaleX(1);
      margin-left: 0;
  }
  50%{
      transform: scaleX(0.8);
      margin-left: 4px;
  }
  100%{
      transform: scaleX(1);
      margin-left: 0;
  }
}


/* about_sp */

@media (width <= 800px) {
  #area1 {
    height: auto;
    margin-bottom: 40px;
    padding-left: calc((20 / 390) * 100%);
    margin-top: 160px;
  }
  #area1 .firstview__title {
    margin-bottom: 78px;
    padding-top: 0;
  }
  #area1 .firstview__title__small {
    font-size: .875rem;
    margin-bottom: 8px;
  }
  #area1 .firstview__image {
    height: min(380px, 97.4vw);
    position: relative;
    width: 100%;
    min-width: unset;
  }
  #area1 .firstview__title__large {
    font-size: 2.5rem;
    letter-spacing: -.075rem;
    margin-bottom: 12px;
  }
  #area1 .firstview__title__catchphrase {
    font-size: .75rem;
  }
}


@media (max-width:800px) {

  #area2>img{
    /* PC-0024対応 ここから */
    /* display: none; */
    top: 180px;
    /* PC-0024対応 ここまで */
  }
  
  #area2 .section__inner__3{
    padding: 0 calc((20/390)*100%);
  }

  #area2 .about-section{
    flex-direction: column;
    gap: 48px;
    padding: 40px 0;
  }
  /* セクション１タイトル */
  #area2 .section__col-title h2{
    font-size: 2.1875rem;
    letter-spacing: -1.05px;
    line-height: 1.14;
    margin: 0 0 6px;
  }
  #area2 .section__col-title p{
    font-size: 0.9375rem;
    line-height: 1.4;
  }
  #area2 .about-section__col-body{
    width: 100%;
  }
  /* about-contener */
  #area2 .about-contener{
    padding: 0 calc((20/350)*100%);
  }
  #area2 .about-contener__text{
    padding-bottom: 34px;
    position: relative;
  }
  /* sp背景画像 */
  
  #area2 .about-contener__text::after{
    display: block;
  }

  #area2 .about-contener__text h3{
    font-size: 1.3125rem;
    line-height: 1.47;
    margin-bottom: 21px;
  }
  #area2 .about-contener__text p{
    font-size: 0.9375rem;
    letter-spacing: 0.15px;
    line-height: 2;
  }
  #area2 .about-contener__text p:first-of-type{
    margin-bottom: 21px;
  }
  /* about-info */
  #area2 .about-contener__item.about-info{
    gap: 35px;
    /* PC-0024対応 ここから */
    /* padding-top: 35px; */
    /* PC-0024対応 ここから */
  }
  #area2 .about-info__list h4{
    font-size: 1.1875rem;
    letter-spacing: 0.19px;
    line-height: 1.42;
    margin: 0 0 12px 20px;
  }
  #area2 .about-info__list h4::before{
    right: calc(100% + 5px);
  }
  /* about-group */
  #area2 .about-group{
    border-radius: 0;
    grid-template-columns: max(27.3%, 88px) 1fr;
  }
  #area2 .about-group__item:nth-last-of-type(even){
    font-size: 0.8125rem;
    font-weight: normal;
    letter-spacing: 0;
    line-height: 1.53;
    margin-left: 0;
    padding: 17px 0 0;
  }
  #area2 .about-group__item:nth-last-of-type(odd){
    font-family: "Noto_Sans_JP";
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.46;
    margin-right: 0;
    padding: 17px 0;
  }
  #area2 .about-group__item:last-child,
  #area2 .about-group__item:nth-last-child(3){
    padding: 17px 0 18px;
  }
  /* 上下端の線の表示 */
  #area2 .about-group__item:first-child,
  #area2 .about-group__item:nth-child(2){
    border-top: 1px dashed #d0d0d0;
  }
  #area2 .about-group__item:last-child,
  #area2 .about-group__item:nth-last-child(2){
    border-bottom: 1px dashed #d0d0d0;
  }

  #area2 .about-contener__text::after{
    content: "";
    position: absolute;
    bottom: 0;
    left: calc((40/310)*-100%);
    width: 100vw;
    aspect-ratio: 195/166;
    background-image: url(../img/the_vision_office/vision_bg.png);
    background-size: cover;
    background-position: center;
    max-height: 100%;
    min-height: 45%;
    z-index: -1;
    display: block;
  }
  
  /* 背景追加の際にmarginだと範囲外のためmarginからpaddingに変更しています*/
  #area2 .about-section{
    margin: unset !important;
    padding: 0px 0 40px;
  }
  
  #area2 .about-contener__text{
    margin-bottom: unset !important;
    padding-bottom: 80px;
  }
  
  /* デザインの色の変更による文字色の変更 */
  #area2 .section__col-title p,
  #area2 .about-info__list h4,
  #area2 .about-group__item:nth-last-of-type(even){
    color: #634A3C !important;
  }
  
  /* デザインの色の変更による::before要素の背景色の変更 */
  #area2 .about-info__list h4::before{
    background-color: #634A3C !important;
  
    /* 「・」の位置調整のため */
    top: 53% !important;
  }
  
  
  /* デザインの変更による背景色の変更 */
  #area2 .about-group{
    /* PC-0024対応 ここから */
    /* background-color: #FFFFFF !important; */
    background-color: transparent !important;
    /* PC-0024対応 ここまで */
  }

}

@media (width <= 800px) {
  #area3{
    padding-top: 30px;
  }
  #area3__wrapper {
    padding: 30px 0 15px;
  }
  #area3 .section__inner__3 {
    flex-direction: column;
    gap: 28px;
    padding: 0 calc((20/390)*100%);
  }
  #area3 .about-section__col-title {
      font-size: 2.1875rem;
      letter-spacing: -.03em;
      margin-top: 0;
  }
  #area3 p {
    font-size: .9375rem;
    margin-top: 6px;
  }
  #area3 h3 {
    font-size: 1.3125rem;
    line-height: 30px;
    row-gap: 5px;
  }
  #area3 span{
    font-size: .75rem;
    /* height: 19px;
    line-height: 19px; */
    padding: 0 6px;
  }
  #area3 .work__list{
    width: 100%;
  }
  #area3 .work__item {
    flex-direction: column;
    margin: 0px calc((20 / 350) * 100%);
    row-gap: 17px;
    padding: 30px 0 25px;
  }
  /* #area3 .work__video {
    padding: 30px calc((20 / 350) * 100%);
  } */
  #area3 .work__item:has(.work__video) {
    padding: 30px 0;
  }
  #area3 .work__text {
    font-size: .9375rem;
    line-height: 1.55;
    margin-bottom: 14px;
  }
  #area3 .work__content__item {
    font-size: .8125rem;
    line-height: 1.5;
    padding-left: 13px;
  }
}


@media (max-width: 800px) {

  #area4 {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  #area4 h2 {
    font-size: 2.1875rem;
    margin-bottom: 6px;
    letter-spacing: -1.05px;
  }

  #area4 .section__col-title p {
    font-size: 0.9375rem;
    margin-bottom: 33px;
  }

  #area4 .ouroffice-contener__text h3 {
    font-size: 1.1875rem;
    margin-bottom: 27px;
    line-height: 1.42;
    height: auto;
  }

  #area4 .ouroffice-contener__text p:first-of-type {
    font-size: 0.9375rem;
    margin-bottom: 34px;
    line-height: 1.51;
  }

  #area4 .sp-br {
    display: block;
  }

  #area4 #swiper-top .slide-items h4 {
    font-size: 1.0625rem;
    margin-bottom: 12px;
    line-height: 1.47;
  }

  #area4 #swiper-top .slide-items p {
    font-size: 0.9375rem;
    line-height: 1.46;
  }

  #area4 .bottom-slide-area h3 {
    font-size: 1.1875rem;
    margin-bottom: 22px;
    line-height: 1.42;
  }

  #area4 .ouroffice-group__item {
    font-size: 0.9375rem;
    border-bottom: none;
  }

  #area4 .bottom-slide-area h4 {
    font-size: 1.0625rem;
  }

  #area4 .section__inner__3 {
    padding-left: calc((20 / 390) * 100%);
    padding-right: calc((20 / 390) * 100%);
  }

  #area4 .section__inner__r {
    padding-left: calc((40 / 390) * 100%);
    padding-right: calc((40 / 390) * 100%);
    margin-bottom: 34px;
  }

  #area4 .section__container__4 {
    margin-left: unset !important;
    margin-right: unset !important;
  }

  #area4 .ouroffice-section {
    display: block;
    position: relative;
  }

  #area4 .swiper{
    overflow: unset;
  }

  #area4 .swiper-section {
    display: block;
  }

  #area4 .swiper-section .swiper {
    scrollbar-gutter: unset;
  }

  #area4 .dummy_data {
    display: none;
  }

  #area4 .ouroffice-section__col-body{
    max-width: unset;
    width: 100%;
  }

  #area4 .sp-slidebutton-relative-box {
    display: block;
    position: relative;
  }

  #area4 #swiper-top {
    width: 100%;
    border-radius: 7px;
    padding-bottom: unset !important;
  }

  #area4 #swiper-top .slide-items {
    max-width: unset;
  }

  #area4 #swiper-top .swiper-button-prev, #area4 #swiper-top .swiper-button-next {
    position: absolute;
    transform: translateY(calc(-20px + -50%));
    top: 50%;
    /* SP-0010対応 ここから */
    /* max-width: 50px; */
    max-width: 35px;
    /* SP-0010対応 ここまで */
    width: 100%;
  }

  /* PC-0020対応 ここから */
  #area4 #swiper-top .swiper-button-prev:hover {
    transform: translateY(calc(-20px + -50%));
  }
  #area4 #swiper-top .swiper-button-next:hover {
    transform: scaleX(-1) translateY(calc(-20px + -50%));
  }
  /* PC-0020対応 ここまで */

  #area4 #swiper-top .swiper-button-next{
    transform: translateY(calc(-50% - 20px)) scaleX(-1);
    /* SP-0010対応 ここから */
    /* right: -25px; */
    right: -15px;
    /* SP-0010対応 ここまで */
    left: unset;
  }

  #area4 #swiper-top .swiper-button-prev{
    /* SP-0010対応 ここから */
    /* left: -25px; */
    left: -15px;
    /* SP-0010対応 ここまで */
  }

  #area4 #swiper-top .slide-items > img {
    border-radius: 7px;
    object-fit: cover;
    width: 100%;
    border-radius: 10px;
  }

  #area4 .ouroffice-group{
    /* SP-0008対応 ここから */
    /* grid-template-columns: 70px 1fr; */
    /* margin-bottom: 30px; */
    border-top: 1px dashed #D0D0D0;
    grid-template-columns: 55px 1fr;
    column-gap: 15px;
    /* SP-0008対応 ここまで */
  }

  #area4 .ouroffice-group__item {
    padding-top: 22px;
    padding-bottom: unset;
  }

  /* PC-0022対応 ここから */
  /* 出勤日のスケジュール：3つで1行（hoverした行全体にスタイルを当てる） */
  /* 1列目をhover */
  #area4 .ouroffice-group__item:nth-child(3n+1):hover,
  #area4 .ouroffice-group__item:nth-child(3n+1):hover + .ouroffice-group__item,
  #area4 .ouroffice-group__item:nth-child(3n+1):hover + .ouroffice-group__item + .ouroffice-group__item,
  /* 2列目をhover */
  #area4 .ouroffice-group__item:nth-child(3n+2):hover,
  #area4 .ouroffice-group__item:has(+ .ouroffice-group__item:nth-child(3n+2):hover),
  #area4 .ouroffice-group__item:nth-child(3n+2):hover + .ouroffice-group__item,
  /* 3列目をhover */
  #area4 .ouroffice-group__item:nth-child(3n):hover,
  #area4 .ouroffice-group__item:has(+ .ouroffice-group__item:nth-child(3n):hover),
  #area4 .ouroffice-group__item:has(+ .ouroffice-group__item + .ouroffice-group__item:nth-child(3n):hover) {
    background-color: unset;
  }
  /* PC-0022対応 ここまで */

  #area4 .ouroffice-group__item span {
    position: relative;
    z-index: 0;
    padding: 0 7px;
  }

  #area4 .ouroffice-group__item span::after {
    content: '';
    position: absolute;
    top: -1px;
    left: -3px;
    width: 100%;
    height: 19px;
    background-color: #272116;
    border-radius: 5px;
    z-index: -1;
    padding-right: 7px;
  }

  #area4 .ouroffice-group__item:first-of-type,
  #area4 .ouroffice-group__item:nth-child(2) {
    /* SP-0008対応 ここから */
    /* border-top: 1px dashed #D0D0D0; */
    border-top: unset;
    /* SP-0008対応 ここまで */
  }

  /* SP-0008対応 ここから */
  #area4 .ouroffice-group__item:nth-of-type(3n+1) {
    margin-top: 20px;
    padding-top: 4px;
    padding-left: 5px;
    padding-right: 5px;
    border-radius: 5px;
    background-color: #272116;
    text-align: center;
  }
  /* SP-0008対応 ここまで */

  #area4 .ouroffice-group__item:nth-child(3n){
    grid-column: 1 / 3;
    border-bottom: 1px dashed #D0D0D0;
    padding-top: 10px;
    padding-bottom: 14px;
    line-height: 1.46;
  }

  #area4 .swiper-button__container {
    position: static !important;
  }

  #area4 .swiper-button-prev-sp,
  #area4 .swiper-button-next-sp {
    display: block;
    position: absolute;
    width: min(50px , 8.97vw) !important;
    top: 22vw !important;
    z-index: 10;
  }

  #area4 .swiper-button-prev-sp.swiper-button-disabled,
  #area4 .swiper-button-next-sp.swiper-button-disabled {
    opacity: 0.35; 
    pointer-events: none; 
  }

  #area4 .swiper-button-prev-sp {
    left: max(-30px, -5.8vw) !important;
  }

  #area4 .swiper-button-next-sp {
    left: unset !important;
    right: max(-30px, -5.8vw) !important;
    transform: scaleX(-1);
  }

  #area4 .pc-swiper-button {
    display: none;
  }

  #area4 .bottom-slide-area {
    padding: 20px calc((20 / 350) * 100%) 20px;
  }

  #area4 .swiper-bottom-area{
    padding-bottom: 40px;
  }

  #area4 .swiper-bottom-area .swiper-pagination{
    left: unset;
    text-align: center;
    bottom: 10px;
  }

  #area4 #swiper-bottom.swiper{
    overflow: hidden;
  }

  #area4 #swiper-bottom img {
    border-radius: 10px;
  }

  #area4 #swiper-bottom .swiper-pagination {
    position: static;
    text-align: center;
  }

  #area4 #swiper-bottom .swiper-pagination-bullet {
    opacity: 1;
    margin-top: 20px;
  }

  #area4 #swiper-bottom .swiper-pagination-bullet-active {
    background: #B08D58;
  }

  /* SP-0009対応 ここから */
  #area4 .swiper-bottom-area .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
  }
  #area4 .swiper-bottom-area .swiper-pagination-bullet-active {
    background-color: #B08D58;
  }
  /* SP-0009対応 ここまで */


  /* セクション５ */

  #area5 {
      margin: 0 auto;
  }

  #area5 .section__inner__3{
    display: block;
    padding: 40px;
    padding-left: calc((20 / 390) * 100%);
    padding-right: calc((20 / 390) * 100%);

  }

  #area5 .area5__area{
    width: 100%;
    padding: 0px calc((20 / 350) * 100%);
  }

  #area5 .section__col-title {
      margin-bottom: 38px;
  }

  #area5 .section__col-title h2 {
      font-family: Georgia;
      letter-spacing: -1.05px;
      font-size: 2.1875rem;
      margin: 0;
  }

  #area5 .section__col-title p {
      color: #634A3C;
      font-size: 0.75rem;
      font-weight: bold;
      /* line-height: 55px; */
  }

  #area5 .area5__inner__3 {
      margin-bottom: 24px;
  }

  #area5 .area5_title {
      font-size: 1.1875rem;
      line-height: 28.5px;
      margin-bottom: 22px;
  }

  #area5 .area5_title_concept {
      font-size: 0.9375rem;
      letter-spacing: 0.15px;
      line-height: 23.25px;
      margin-bottom: 34px;
  }

  #area5 span {
      margin-bottom: 30px;
  }

  #area5 .tag {
      max-width: 142px;
      font-size: 0.8125rem;
      display: table;
  }

  #area5 .contact__area__item_innere h4 {
      font-weight: bold;
      width: calc(100% - 100px);
      font-size: 1.0625rem;
      letter-spacing: 0.17px;
      line-height: 25px;
      margin-bottom: 24px;
  }
    
  #area5 .contact__area__item_innere2 h4 {
      font-weight: bold;
      font-size: 1.0625rem;
      letter-spacing: 0.17px;
      line-height: 25px;
      margin-bottom: 21px;
      width: calc(100% - 100px);
  }

  #area5 .contact__area__item {
      display: block;
      position: relative;
  }

  #area5 .second {
      display: block;
  }

  #area5 .caption {
      float: right;
      width: 80px;   
      height: 58px;
      min-width: initial;
      border-radius: 10px;
      background-color: white;
  }

  #area5 .contact__area__item img {
        /* width: 49px; */
        width: auto;
        height: 53px;
        /* margin: 6px 15.5px 0 15.5px; */
        position: absolute;
        right: 0;
        background-color: #fff;
        padding: 5px 15px 0;
  }
  #area5 span:last-of-type{
    margin-bottom: 0;
  }

  /* セクション6 */
  #area6 .section__inner__3{
    display: block;
    padding: 55px;
    padding-left: calc((20 / 390) * 100%);
    padding-right: calc((20 / 390) * 100%);
  }

  #area6 .career__area {
    width: auto;
    margin-top: 38px;
  }

  #area6 .career_area_news{
    margin-bottom: 0px;
  }

  #area6 .career_area_news .news__list{
    gap: 30px;
  }

  #area6 .career_area__header h3 {
    font-size: 1.1875rem;
  }

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

  #area6 li.news__item{
    width: 100%;
    padding: 0px calc((20 / 350) * 100%);
  }

  #area6 .news__category span{
    margin-top: 20px;
    font-size: 0.8125rem;
  }

 #area6 h4.news__title {
    margin-top: 13px;
    font-size: 1.0625rem;
}

  /* セクション7 */
  :root {
    --margin-vision-b-top: 62px;
  }
  #area7 {
    height: auto;
    padding-left: calc((20 / 390) * 100%);
  }
  #area7 .type-b_top__title {
    margin-bottom: 78px;
    padding-top: 0;
  }
  #area7 .type-b_top__title__small {
    font-size: .875rem;
    margin-bottom: 8px;
  }
  /* 画像の上下余白を隠すために「background-size」「background-position」にpxで設定をしました */
  #area7 .type-b_top__image {
    height: min(380px, 97.4vw);
    position: relative;
    width: 100%;
    min-width: unset;
    background-image: url("../img/the_vision_office/sp_mem_vision.jpg");
  }
  #area7 .type-b_top__title__large {
    font-size: 2.5rem;
    letter-spacing: -.075rem;
    margin-bottom: 12px;
  }
  #area7 .type-b_top__title__large .serif {
    font-size: inherit;
  }
  #area7 .type-b_top__title__catchphrase {
    font-size: .75rem;
  }

  /* セクション8 */
  #area8>img{
    height: auto;
    aspect-ratio: 65/44;
    bottom: 0px;
    min-height: 264px;
  }
  
  #area8 .section__inner__3{
    padding: 0 calc((20/390)*100%);
  }

  #area8 .about-section{
    flex-direction: column;
    gap: 48px;
    padding: 68px 0 32px;
    margin: unset;
  }
  /* セクション１タイトル */
  #area8 .section__col-title h2{
    font-size: 2.1875rem;
    letter-spacing: -1.05px;
    line-height: 1.14;
    margin: 0 0 6px;
  }
  #area8 .section__col-title p{
    font-size: 0.9375rem;
    line-height: 1.4;
  }
  #area8 .about-section__col-body{
    width: 100%;
  }
  /* about-contener */
  #area8 .about-contener{
    padding: 0 calc((20/350)*100%);
  }

  /* about-group */
  #area8 .about-group{
    border-radius: 0;
    grid-template-columns: max(27.3%, 88px) 1fr;
    background-color: unset;
  }
  #area8 .about-group__item:nth-last-of-type(even){
    font-size: 0.8125rem;
    font-weight: normal;
    letter-spacing: 0;
    line-height: 1.53;
    margin-left: 0;
    padding: 17px 0 0;
  }
  #area8 .about-group__item:nth-last-of-type(odd){
    font-family: "Noto_Sans_JP";
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.46;
    margin-right: 0;
    padding: 17px 0;
  }
  #area8 .about-group__item:last-child,
  #area8 .about-group__item:nth-last-child(3){
    padding: 17px 0 18px;
  }
  /* 上下端の線の表示 */
  #area8 .about-group__item:first-child,
  #area8 .about-group__item:nth-child(2){
    border-top: 1px dashed #d0d0d0;
  }
  #area8 .about-group__item:last-child,
  #area8 .about-group__item:nth-last-child(2){
    border-bottom: 1px dashed #d0d0d0;
  }

  #area8 .sp-br {
    display: block;
  }

  /* セクション9 */
  #area9{
    padding-top: 30px;
  }
  #area9 .section__inner__3 {
    flex-direction: column;
    gap: 28px;
    padding: 0 calc((20 / 390) * 100%);
  }
  #area9 .about-section__col-title {
      font-size: 2.1875rem;
      letter-spacing: -.03em;
      margin-top: 0;
  }
  #area9 p {
    font-size: .9375rem;
  }
  #area9 h3 {
    font-size: 1.3125rem;
    line-height: 30px;
    row-gap: 5px;
  }
  #area9 span{
    font-size: .75rem;
    padding: 0 6px;
  }
  #area9 .work__list{
    width: 100%;
  }
  #area9 .work__item {
    flex-direction: column;
    margin: 0px calc((20 / 350) * 100%);
    row-gap: 17px;
    padding: 30px 0 25px;
  }
  #area9 .work__text {
    font-size: .9375rem;
    line-height: 1.55;
    margin-bottom: 14px;
  }
  #area9 .work__content__item {
    font-size: .8125rem;
    line-height: 1.5;
    padding-left: 13px;
  }

  #area9 .work__item:first-of-type,
  #area9 .work__item:nth-of-type(2) {
    padding-top: 29px;
  }
  #area9 .work__item:first-of-type .work__content {
    margin-top: unset;
  }
  #area9 .work__item:nth-of-type(2) .work__content {
    margin-top: unset;
    padding-bottom: 43px;
  }

  #area9.back-blend {
    padding-bottom: 66px;
    margin: 0;
  }

  /* セクション10 */
  #area10 .section__inner__3 {
    padding-top: 30px;
    padding-left: calc((20 / 390) * 100%);
    padding-right: calc((20 / 390) * 100%);
    flex-direction: column;
    gap: 0;
  }

  #area10 .section__col-title,
  #area10 .contents {
    width: 100%;
  }

  #area10 .section__col-title h2 {
    margin: 0 0 6px;
    font-size: 2.1875rem;
    letter-spacing: -1.05px;
  }
  #area10 .section__col-title p {
    font-size: 0.9375rem;
  }

  #area10 .contents {
    margin-top: 18px;
  }

  #area10 .contents__main {
    padding-left: calc((20 / 350) * 100%);
    padding-right: calc((20 / 350) * 100%);
  }
  #area10 .contents__mapwrapper {
    border-radius: 11px;
    height: 182px;
    margin-bottom: 25px;
  }
  #area10 .contents__subtitle {
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.4;
    margin-bottom: 7px;
  }
  #area10 .contents__title {
    font-size: 1.4375rem;
    line-height: 1.47;
    margin-bottom: 9px;
  }

  #area10 .contents__link-googlemap {
    font-size: 0.9375rem;
  }
  #area10 .contents__map-icon {
    width: 9px;
    margin-left: 5px;
  }

  #area10 .contents__address-wrapper {
    margin-bottom: 24px;
    gap: 0;
  }
  #area10 .contents__address {
    font-size: 0.9375rem;
    line-height: 1.51;
    color: #605757;
    display: block;
  }

  #area10 .contents__access {
    margin-bottom: 38px;
  }
  #area10 dt span {
    line-height: unset;
  }
  #area10 .contents__access-icon {
    width: 20px;
  }
  #area10 .contents__access dt {
    font-size: 0.9375rem;
    gap: 6px;
  }
  #area10 .contents__access dd {
    line-height: 1.46;
  }
  #area10 .contents__access dt:nth-of-type(2) {
    margin-bottom: 6px;
  }
  #area10 .contents__access dd:first-of-type {
    margin-bottom: 14px;
  }

  /* ボタン */
  #area10 .companies-btn {
    display: block;
    margin-top: 30px;
    margin-bottom: 60px;
    margin-left: auto;
    margin-right: auto;
    width: 203px;
    height: 46px;
  }
  #area10 .companies-btn__text {
    color: #FFFFFF;
    font-size: 0.9375rem;
    line-height: 1.4;

    left: 20px;
    top: 50%;
    transform: translateY(calc(-50% + 3px));
  }
  #area10 .companies-btn__yazirushi {
    width: 33px;
    height: 33px;
    right: 6px;
  }
}