@charset "UTF-8";
/*! ----------------------------------------------------------
 base/_index.scss
 - 他のファイルからは `@use 'base'` でまとめて利用可能
 - forward 順序を変えると依存関係に影響する場合あり
---------------------------------------------------------- */
/*! -----------------------------
  common
----------------------------- */
html {
  box-sizing: border-box;
  position: relative;
  font-family: 'noto-sans-jp', sans-serif;
  font-family: "inter";
  font-weight: 700;
  font-style: normal;
  font-size: 62.5%;
  font-weight: normal;
  letter-spacing: 0;
}

*, *::before, *::after {
  box-sizing: inherit;
}

* {
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "palt";
  letter-spacing: 0;
  font-weight: 700;
}

/*! -----------------------------
    フォント設定
----------------------------- */
.en {
  font-family: "inter", serif;
  font-weight: 700;
  font-style: normal;
}

/*! -----------------------------
  セレクタ　リセット
----------------------------- */
body {
  position: relative;
  -webkit-text-size-adjust: 100%;
  color: #222222;
  background: #eeeeee;
}

body.-fixed {
  overflow: hidden;
  position: fixed;
}

h1, h2, h3, h4, h5, h6 {
  line-height: 1.4;
  letter-spacing: 0;
}

img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
  -o-object-fit: contain;
     object-fit: contain;
}

a {
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

a[href^="tel:"] {
  text-decoration: none;
}

button {
  cursor: pointer;
  display: block;
  outline: none;
  display: block;
  padding: 0;
  border: none;
  border-radius: 0;
  margin: 0;
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
  color: inherit;
  background-color: transparent;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

table {
  width: 100%;
  border-spacing: 0;
  border-collapse: collapse;
}

tbody {
  display: block;
  width: 100%;
}

th, td {
  text-align: left;
}

::-webkit-input-placeholder,
:-moz-placeholder {
  color: #CCC9C4;
}



br.pc{
  display: block;
}
br.sp{
  display: none;
}
@media (max-width: 768px){
  br.pc{
    display: none;
  }
  br.sp{
    display: block;
  }
}

/*! -----------------------------
  フォームタグ　リセット
----------------------------- */
input,
textarea {
  box-sizing: border-box;
  display: block;
  width: 100%;
  padding: 0;
  border: unset;
  border-width: 0;
  background-color: transparent;
  border: none;
  -webkit-appearance: none;
}

input[type=button], input[type=text], input[type=tel], input[type=email], input[type=submit], input[type=image], textarea {
  -webkit-appearance: none;
  border-radius: 0;
  font-family: "Zen Old Mincho", "Yu Mincho", "Hiragino Mincho ProN", "MS Mincho", serif;
}

input[type=text i] {
  padding: 0;
}

input:focus-visible,
textarea:focus-visible {
  outline: none;
}

input:-webkit-autofill,
textarea:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1222222px #f4f0eb inset;
  -webkit-text-fill-color: #222222;
}

select {
  border-width: 0px;
  border: none;
  color: #222222;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
  border: 0;
  margin: 0;
  padding: 0;
  background: none transparent;
  vertical-align: middle;
  font-size: inherit;
  color: inherit;
  box-sizing: content-box;
  font-family: "Zen Old Mincho", "Yu Mincho", "Hiragino Mincho ProN", "MS Mincho", serif;
}

/* クリック/タップ時のハイライトも含めて視覚的フォーカスを全消し */
:focus,
:focus-visible,
:focus-within {
  outline: none !important;
  box-shadow: none !important;
}

a, button, [tabindex], input, select, textarea {
  outline: none !important;
  box-shadow: none !important;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
}

* {
  -webkit-tap-highlight-color: transparent; /* iOS/Android */
}


/* common */
.l-main.top{
  padding-top: 2rem;
}

.wrapper{
  width: calc(100% - 4rem);
  margin: 0 auto;
  box-sizing: border-box;
}

@media (max-width: 768px){
  .l-main.top{
    padding-top: 1rem;
  }
}


/*　トップ ロゴ */
.rail__logo{
  transition: .4s;
}
@media (any-hover: hover) {
  .rail__logo:hover{
    opacity: 0.7;
  }
}

/* ======================================================
   Masonry Grid (BEM: cascade)
   - 親: .cascade の直下に .cascade__sizer / .cascade__gutter を入れる
   - アイテム: .cascade__cell（大きいカードは .-w2 などを追加）
   - 列数はブレークポイントで --cols を切替
====================================================== */
/* 基本トークン */
:root{
  --gap: 2rem;     /* 列間＆縦間隔 */
  --cols: 2;       /* デフォ列数：SP */
}

/* 列数だけをブレークポイントで変更（必要に応じて調整） */
@media (min-width: 768px){  :root{ --cols: 2; } }  /* TB */
@media (min-width: 1000px){  :root{ --cols: 4; } }
@media (min-width: 1200px){ :root{ --cols: 4; } }  /* WIDE */

/* 1列ぶんの幅を常に自動算出（列数が増えてもここだけでOK） */
.cascade{
  /* (全幅 - ギャップ×(列数-1)) / 列数 */
  --cell: calc((100% - var(--gap) * (var(--cols) - 1)) / var(--cols));
  position: relative;
}
/* Masonry の参照要素 */
.cascade__sizer  { width: var(--cell); }
.cascade__gutter { width: var(--gap); }

/* 並べるセル（=通常カードは常に1列ぶん） */
.cascade__cell{
  width: var(--cell);
  margin-bottom: var(--gap);   /* 縦方向の余白はCSSで付ける */
  box-sizing: border-box;
}
/* 横に複数列使うセル（ギャップも含めて拡張） */
/* .cascade__cell.-w2{ width: calc(var(--cell) * 2 + var(--gap) * 1); }
.cascade__cell.-w3{ width: calc(var(--cell) * 3 + var(--gap) * 2); }
.cascade__cell.-w4{ width: calc(var(--cell) * 4 + var(--gap) * 3); } */
/* “.-large” を 2列相当として運用するなら alias にしてもOK */
.cascade__cell.-large{ 
  width: calc(var(--cell) * 2 + var(--gap) * 1); 
}
@media (max-width: 1000px){
  .cascade__cell.-large{ 
    width: calc((100% - var(--gap) * (var(--cols) - 1)) / var(--cols));
  }
  .cascade__cell.cascade-box{
    width: calc(var(--cell) * 2 + var(--gap) * 1); 
  }
}
@media (max-width: 768px){
  :root{
    --gap: 1rem;     /* 列間＆縦間隔 */
  }  
  .wrapper{
    width: calc(100% - 2rem);
  }
  .cascade__cell.-large{ 
    width: var(--cell);
  }  
  .cascade-box{
    width: 100%!important;
  }
}

/* -------------------------------- 
  カードの共通
 ---------------------------------- */
.card{
  position: relative;
  background:#fff;
  border-radius:5px;
  overflow:hidden;
}
.card__media{ 
  background:#eee; 
}
.card__link{
  transition: .4s;
}
.card__link.-modal{
  display: block;
  position: relative;
}
.card__link.-modal:before{
  position: absolute;
  z-index: 1;
  right: 0.6rem;
  bottom: 0.6rem;
  display: block;
  content: "";
  width: 2.8rem;
  height: 2.8rem;
  background: url(/assets/images/icon/icon-puls.png)no-repeat;
  background-size: cover;
}
.card__link.-modal.-video:before{
  right: 0;
  bottom: 0;
  top: 0;
  left: 0;
  width: 8rem;
  height: 8rem;
  background: url(/assets/images/icon/icon-video-play.svg)no-repeat;
  background-size: contain;
  margin: auto;
}
@media (any-hover: hover) {
  .card__link:hover{
    opacity: 0.7;
  }
}
.card__img{ width:100%; height:100%; object-fit:cover; display:block; }
.card__body{ 
  padding:1.5rem 1.5rem 2.5rem; 
}
.card__title{
  font-size: 2rem;
  line-height: 1.75;
}
.column-card .card__body{
  padding:2rem 1.5rem 2.5rem; 
}
.column-card .card__title{
  font-size: 2.5rem;
  line-height: 1.6;
}

.cascade__cell.-project .card__link::before{
  content: "";
  display: block;
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 7rem;
  opacity: 0.3;
  background: linear-gradient(to top, #000 0%, transparent 100%);
  left: 0;
  bottom: 0;
}
.project-title{
  position: absolute;
  color: #fff;
  font-size: 1.5rem;
  right: 2rem;
  bottom: 1.8rem;
  z-index: 2;
}
.card__meta{ 
  font-weight: bold;
  font-size: 1.5rem;
  display: inline-block;
  position: relative;
  letter-spacing: -0.02em;
}
.card__meta.-work-cate:after{
  content: "";
  display: block;
  background: #222222;
  height: 2px;
  width: 100%;
  bottom: -0.4rem;
  left: 0;
}
.card__meta-cate,
.card__meta-date{
  display: inline-block;
  position: relative;
  letter-spacing: -0.02em;
}
.card__meta-cate:after,
.card__meta-date:after{
  position: absolute;
  content: "";
  display: block;
  background: #222222;
  height: 2px;
  width: 100%;
  bottom: -0.4rem;
  left: 0;
}
.card__title + .card__meta{
  margin-top: 1.5rem;
}
/* 矢印アイコン */
.cascade__arw-wrap{
  position: absolute;
  right: -1px;
  bottom: -1px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: solid 1px #ebebeb;
  width: 4rem;
  height: 4rem;
}
.cascade__arw {
  position: relative;
  display: inline-block;
  width: 8.2px;
  height: 12.5px;
}
.cascade__arw::before,
.cascade__arw::after {
  content: "";
  position: absolute;
  top: calc(50% - 1px);
  right: 0;
  width: 10px;
  height: 2px;
  border-radius: 9999px;
  background-color: #cccccc;
  transform-origin: calc(100% - 1px) 50%;
}
.cascade__arw::before {
  transform: rotate(45deg);
}
.cascade__arw::after {
  transform: rotate(-45deg);
}
/* タイトルブロック */
.cascade__cell.link-title .link-title__text{
  font-size: 5.5rem;
  font-weight: bold;
  line-height: 0;
}
.link-title__link{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0 2rem;
  transition: .4s;
}
.link-title__icon{
  width: 4rem;
}
.link-title__icon img{
  vertical-align: bottom;
}
@media (any-hover: hover) {
  .link-title__link:hover{
    opacity: 0.7;
  }
}
/* ボックス */
.cascade__cell.cascade-box{
  display: block;
  border-radius: 5px;
  border: solid 3px #222222;
  padding: 3.2rem 3rem 3rem;
}
.cascade-box__link{
  transition: .4s;
}
@media (any-hover: hover) {
  .cascade-box__link:hover{
    opacity: 0.7;
  }
}
.cascade-box__title{
  font-size: 2.3rem;
  line-height: 1.74;
}
.cascade-box__text{ 
  margin-top: 1.5rem;
  font-weight: bold;
  font-size: 1.5rem;
  display: inline-block;
  position: relative
}
.cascade-box__text:after{
  content: "";
  display: block;
  background: #222222;
  height: 2px;
  width: 100%;
  bottom: 0;
  left: 0;
}
@media (max-width: 768px){
  .card__title{
    font-size: 1.7rem;
  }
  .column-card .card__title{
    font-size: 2rem;
  }
  .cascade__cell.-project .card__link::before{
    height: 6rem;
  }
  .project-title{
    right: 1.4rem;
    bottom: 1.2rem;
  }
  .cascade__arw-wrap{
    width: 3rem;
    height: 3rem;
  }
  .card__title + .card__meta{
    margin-top: 1rem;
  }
  .card__meta-date{
    margin-top: 1rem;
  }
  .cascade__arw{
    width: 6px;
  }
  .cascade__arw::before,
  .cascade__arw::after {
    width: 7px;
    height: 2px;
  }
  .card__link.-modal:before{
    font-size: 2rem;
    right: 0.5rem;
    bottom: 0.5rem;
  }
  .card__meta{
    font-size: 1.4rem;
    max-width: 10.5rem;
  }
  .cascade__cell.link-title .link-title__text{
    font-size: 3rem;
    line-height: 1.2;
  }
  .cascade__cell.cascade-box{
    padding: 3rem 2rem;
  }
  .cascade-box__title{
    font-size: 1.8rem;
  }
  .link-title__icon{
    width: 3rem;
  }
  .cascade-box__text{
    font-size: 1.4rem;
    margin-top: 1rem;
  }
}
/* スムーススクロールボタン */
.js-scroll-up{
  z-index: -1;
  opacity: 0;
  width: 5rem;
  position: fixed;
  right: 2rem;
  bottom: 7rem;
  transition: .4s;
}
.js-scroll-up.is-active{
  opacity: 1;
  z-index: 99;
}
@media (any-hover: hover) {
  .js-scroll-up:hover{
    opacity: 0.7;
  }
}
@media (max-width: 768px){
  .js-scroll-up{
    width: 4rem;
    right: 1rem;
    bottom: 5rem;
  }
}

/*! -----------------------------
    footer
----------------------------- */
.l-footer{
  background: #eeeeee;
  padding: 8rem 0;
}
.l-footer .l-footer__copy{
  color: #cccccc;
  font-size: 1.5rem;
  text-align: center;
}
@media (max-width: 768px){
  .l-footer{
    padding: 4.5rem 0 6rem;
  }
  .l-footer .l-footer__copy{
    font-size: 1.1rem;
  }
}

/*! ----------------------------------------------------------
    下層ページ
---------------------------------------------------------- */
/*-------------------------  
　ヘッダー
-------------------------*/
.l-header{
  display: flex;
  flex-wrap: wrap;
  gap: 0 5.5%;
  padding: 2rem 2rem 0;
}
.l-header__logo{
  width: calc((100% - 2rem * (4 - 1)) / 4);
  transition: .4s;
}
/*　ヘッダーメニュー */
.head-menu{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2rem 5rem;
}
.head-menu__item{
  /* font-size: 5.5rem; */
  font-size: 4.29vw;
  line-height: 1;
}
.head-menu__link{
  position: relative;
  transition: .4s;
}
.head-menu__link.-current:after{
  content: "";
  display: block;
  width: 100%;
  height: 0.2rem;
  background: #222;
  position: absolute;
}
@media (any-hover: hover) {
  .l-header__logo:hover{
    opacity: 0.7;
  }
  .head-menu__link:hover{
    opacity: 0.7;
  }
}
.work-single .head-menu__item{
  color: #fff;
}
.work-single .head-menu__link.-current:after{
  background: #fff;
}
.l-header + .l-main{
  margin-top: 2.5rem;
}
@media (max-width: 1000px){
  .l-header__logo{
    width: calc((100% - 2rem * (2 - 1)) / 2);
  }
  .head-menu{
    margin-top: 5%;
  }
  .head-menu__item{
    font-size: 7vw;
  }
}
@media (max-width: 768px){
  .l-header{
    padding: 1rem 1rem 0;
  }
  .head-menu{
    width: 100%;
    gap: 5%;
  }
}

/*-------------------------  
　カテゴリリスト
-------------------------*/
.l-header + .category-list-block{
  margin-top: 3rem;
}
.category-list-block + .l-main{
  margin-top: 3rem;
}
.category-list{
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  width: calc(100% - 4rem);
  margin: 0 auto;
}
.category-list__item{
  font-size: 2rem;
}
.category-list__link{
  transition: .4s;
}
.category-list__link.-current{
  position: relative;
  color: #888;
}
.category-list__link.-current:before{
  display: block;
  position: absolute;
  content: "";
  width: 100%;
  height: 1px;
  bottom: 0;
  left: 0;
  background: #888;
}
@media (max-width: 768px){
  .l-header + .category-list-block{
    margin-top: 2.5rem;
  }
  .category-list{
    width: calc(100% - 2rem);
    gap: 0.5rem;
  }
  .category-list__item{
    font-size: 1.4rem;
    border-radius: 5px;
  }
  .category-list__link{
    display: block;
    padding: 0.5rem 1rem;
    background: #fff;
    color: #000;
    border-radius: 5px;
  }
  .category-list__link.-current:before{
    display: none;
  }
  .category-list__link.-current{
    position: relative;
    color: #fff;
    background: #000;
  }
}
@media (any-hover: hover) {
  .category-list__link:hover{
    opacity: 0.7;
  }
  .category-list__link:hover{
    opacity: 0.7;
  }
}

/*-------------------------  
　OFFICE
-------------------------*/
.l-office .cascade__cell{
  width: calc(var(--cell) * 2 + var(--gap) * 1)
}
.card--office{
  padding: 5rem 4rem 8rem;
}
.card--office__block{
  position: relative;
}
.profile-figure{
  position: absolute;
  top: -1rem;
  right: 0;
  width: 12rem;
}
.profile-figure img{
  width: 100%;
  height: auto;
}
.card--office__block + .card--office__block{
  margin-top: 4rem;
}
.card--office__block + .flow-list-block{
  margin-top: 5rem;
}
.card--office__title-h2{
  font-size: 4.5rem;
  margin-bottom: 3rem;
}
.card--office__title-h2 span{
  font-size: 2.2rem;
}
.card--office__title-h3{
  font-size: 3rem;
  margin-bottom: 2.5rem;
}
.card--office__title-h3 span{
  font-size: 2.2rem;
}
.card--office__text{
  font-size: 1.6rem;
  line-height: 2;
}
.card--office__text.-large{
  font-size: 1.7rem;
  line-height: 1.9;
  font-weight: bold;
}


.card--office__text + .card--office__text{
  margin-top: 3rem;
}
@media (max-width: 768px){
  .card--office__block + .flow-list-block{
    margin-top: 4rem;
  }
  .card--office__block + .card--office__block{
    margin-top: 4rem;
  }
  .card--office{
    padding: 5rem 2rem 6rem;
  }
  .card--office__title-h2{
    font-size: 3rem;
    margin-bottom: 2rem;
  }
  .card--office__title-h3{
    font-size: 2.5rem;
    margin-bottom: 2rem;
  }
  .card--office__text{
    font-size: 1.5rem;
  }
  .card--office__text.-large{
    font-size: 1.6rem;
    line-height: 1.9375;
  }
  .card--office__title-h2 span{
    font-size: 1.8rem;
  }
  .card--office__title-h3 span{
    font-size: 1.8rem;
  }
  .profile-figure{
    width: 9rem;
  }
}

/* c-list */
.c-list{}
.c-list__item{
  font-size: 1.6rem;
  font-weight: bold;
  gap: 0.5rem 1rem;
  line-height: 1.9375;
  display: flex;
  align-items:flex-start
}
.c-list__item:before{
  display: block;
  content: "";
  margin-top: 1rem;
  min-width: 0.8rem;
  min-height: 0.8rem;
  border-radius: 100px;
  border: 2px solid #222;
  box-sizing: border-box;
}
/* c-button */
.c-button{
  display: inline-block;
  border-radius: 5rem;
  background: #222;
  max-width: 28rem;
  width: 100%;
  transition: .4s;
}
.c-button__text{
  line-height: 5rem;
  text-align: center;
  display: block;
  color: #fff;
  font-size: 1.6rem;
}
.card--office__body + .c-button{
  margin-top: 3rem;
}
.c-list + .card--office__text{
  margin-top: 3rem;
}
.card--office__body + .notes-list{
  margin-top: 2.5rem;
}
.notes-list__item{
  position: relative;
  font-size: 1.5rem;
  line-height: 2;
  padding-left: 2.2rem;
  color: #999999;
  font-weight: normal;
}
.notes-list__item:before{
  position: absolute;
  top: 0;
  display: block;
  content: "※";
  left: 0;
}
.page-template-page-office .media-modal__swiper .swiper-slide{
  width: 90%!important;
  max-width: 1200px;
  height: auto;
}
.page-template-page-office .media-modal__swiper img{
  width: 100%;
}
.notes-list + .card--work{
  margin-top: 3.5rem;
}

@media (any-hover: hover) {
  .c-button:hover{
    opacity: 0.7;
  }
}
@media (max-width: 768px){
  .c-list__item{
    font-size: 1.5rem;
  }
  .card--office__body + .c-button{
    margin-top: 2.5rem;
  }
  .card--office__body + .notes-list{
    margin-top: 1.5rem;
  }
  .notes-list + .card--work{
    margin-top: 2.5rem;
  }
}

/* テーブル */
.c-table{
  width: 100%;
}
.c-table tr{
  display: block;
  width: 100%;
  border-bottom: 1px solid #ccc;
  padding: 1.5rem 0;
}
.c-table-th,.c-table-td{
  font-size: 1.6rem;
  vertical-align: top;
  line-height: 2;
}
.c-table-th{
  width: 13.5rem;
}
.c-table-td{
  font-weight: 400;
}
.c-table tr:first-child{
  padding-top: 0.5rem;
}
.tel-link{
  font-weight: normal;
  transition: .4s;
}
.mail-link{
  font-weight: normal;
  transition: .4s;
}
/* 設計管理費一例 */
.c-table.-mgmt-fee-ex .c-table-th{
  width: 20rem;
}

@media (any-hover: hover) {
  .tel-link:hover,
  .mail-link:hover{
    opacity: 0.7;
  }
}
@media (max-width: 768px){
  .c-table-th,.c-table-td{
    font-size: 1.5rem;
  }
  .c-table-th {
    width: 11rem;
  }
  .c-button{
    max-width: 100%;
  }
  .c-button__text{
    font-size: 1.5rem;
  }
  /* 設計管理費一例 */
  .c-table.-mgmt-fee-ex .c-table-th{
    width: 16rem;
  }
}

/* 業務の流れ */
.flow-list{
  display: flex;
  flex-wrap: wrap;
  gap: 4rem 3rem;
}
.flow-list__item{
  width: calc((100% - 3rem)/2);
}
.flow-list__head-num{
  font-size: 6rem;
}
.flow-list__head-tit{
  font-size: 2.2rem;
  line-height: 1.68;
}
.flow-list__body{
  margin-top: 1.5rem;
}
.flow-list__text{
  font-size: 1.6rem;
  line-height: 2;
}
/* カラム02 */
.flow-list-block.-column02{
  margin-top: 4rem;
}
.-column02 .flow-list__item{
  width: 100%;
}
.-column02 .flow-list__head{
  display: flex;
}
.-column02 .flow-list__head-num{
  font-size: 4.5rem;
  width: 4.5rem;
}

/* カラム02 */
.card--office__body + .basic-design-flow{
  margin-top: 3rem;
}
.basic-design-flow{
  display: flex;
  flex-wrap: wrap;
  gap: 3rem;
}
.basic-design-flow__item{
  width: calc((100% - 6rem) / 3);
}
.basic-design-flow__item.-column02{
  width: calc((100% - 6rem) / 3 * 2 + 3rem);
}
.basic-design-flow__item.-column01{
  width: 100%;
}
.basic-design-flow__title-num{
  font-size: 2.2rem;
  font-weight: bold;
}
.basic-design-flow__title-text{
  font-size: 2rem;
  font-weight: bold;
  line-height: 1.75;
  margin-top: 1rem;
}
.basic-design-flow__body{
  font-size: 1.5rem;
  margin-top: 1.5rem;
  line-height: 2;
  color: #999999;
  font-weight: normal;
}
/* ページネーション */
.l-main + .paginationArea{
  margin-top: 4rem;
}
.pagination{
  display: flex;
  gap: 0.5rem 1.2rem;
  width: calc(100% - 4rem);
  margin: 0 auto;
}
.page-numbers{
  position: relative;
  font-size: 2rem;
  transition: .4s;
}
.pagination .prev{
  display: none;
}
.pagination .next{
  display: none;
}
@media (any-hover: hover) {
  a.page-numbers:hover{
    opacity: 0.7;
  }
}
.page-numbers.current{
  color: #ccc;
}
.page-numbers.current:after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: #ccc;
}
@media (max-width: 768px){
  .flow-list{
    gap: 2.5rem;
  }
  .flow-list__head{
    display: flex;
    align-items: flex-start;
    line-height: 1;
  }
  .flow-list__item{
    width: 100%;
  }
  .flow-list__head-tit{
    font-size: 1.8rem;
    line-height: 1.777;
  }
  .flow-list__text{
    font-size: 1.5rem;
  }
  .flow-list__head-num{
    font-size: 5.9rem;
    min-width: 6rem;
  }
  .-column02 .flow-list__head-num{
    font-size: 5.9rem;
    min-width: 6rem;
  }
  .flow-list__body{
    padding-left: 6rem;
    margin-top: 1rem;
  }
  .l-main + .paginationArea{
    margin-top: 3rem;
  }
  .pagination{
    gap: 0.5rem 1.2rem;
    width: calc(100% - 2rem);
  }
  .page-numbers{
    font-size: 1.6rem;
  }

  /* カラム02 */
  .card--office__body + .basic-design-flow{
    margin-top: 2.5rem;
  }
  .basic-design-flow{
    display: flex;
    flex-wrap: wrap;
    gap: 2.5rem;
  }
  .basic-design-flow__item{
    width: 100%;
  }
  .basic-design-flow__item.-column02{
    width: 100%;
  }
  .basic-design-flow__title-text{
    font-size: 2rem;
    margin-top: 0.5;
  }
  .basic-design-flow__body{
    font-size: 1.5rem;
    margin-top: 1rem;
    line-height: 2;
    color: #999999;
  }
}

/*! ----------------------------------------------------------
    シングルページ
---------------------------------------------------------- */
/*-------------------------  
　COLUMN
-------------------------*/
.articles-single{
  background: #fff;
  border-radius: 5px;
  padding: 12rem 0 13rem;
}
.articles-single__inner{
  width: calc(100% - 4rem);
  max-width: 75rem;
  margin: 0 auto;
}
.articles-single__title-area{
  margin-bottom: 4rem;
}
.articles-single__date-area + .articles-single__title{
  margin-top: 1rem;
}
.articles-single__date{
  font-size: 1.6rem;
}
.articles-single__title{
  font-size: 4.8rem;
  line-height: 1.5;
}
/* その他 */
.other-block{
  background: #eeeeee;
  padding-top: 7rem;
}
.other-block__title{
  text-align: center;
  font-size: 4.8rem;
}
.other-block__title + .cascade{
  margin-top: 4rem;
}
.cascade + .more-buttonArea{
  margin-top: 4rem;
}
.more-buttonArea{
  transition: .4s;
}
.more-buttonArea .more-button{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.2rem;
}
.more-buttonArea .more-button__text{
  font-size: 2rem;
}
.more-buttonArea .more-button__icon{
  width: 4rem;
}
@media (any-hover: hover) {
  .more-buttonArea:hover{
    opacity: 0.7;
  }
}
@media (max-width: 768px){
  .articles-single{
    padding: 5rem 0 6rem;
  }
  .articles-single__date{
    font-size: 1.5rem;
  }
  .articles-single__title{
    font-size: 2.5rem;
  }
  .other-block{
    padding-top: 5rem;
  }
  .other-block__title{
    font-size: 2.5rem;
  }
  .other-block__title + .cascade{
    margin-top: 2.5rem;
  }
  .cascade + .more-buttonArea{
    margin-top: 3rem;
    padding-bottom: 1.5rem;
  }
  .more-buttonArea .more-button__text{
    font-size: 1.6rem;
  }
  .more-buttonArea .more-button__icon{
    width: 3rem;
  }
}
/*-------------------------  
　WORk
-------------------------*/
.work-sec{
  padding-bottom: 8rem;
}
.work-sec .card{
  background: none;
}
.work-sec-bg{
  filter: blur(80px);  
  transform: scale(1.5);  
  background-size: cover;
  position: fixed;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.work-sec-head{
  padding: 4rem 0 5rem;
}
.work-sec-head__text{
  font-size: 1.8rem;
  color: #fff;
}
.work-sec-head__title{
  font-size: 5.5rem;
  color: #fff;
}
/*　概要 */
.work-sec-block{
  position: relative;
  box-sizing: border-box;
  border-radius: 5px;
  overflow: hidden;
}
.work-sec-block:before{
  display: block;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.3); 
  mix-blend-mode: soft-light;    
  z-index: 1;  
  top: 0;
  left: 0;
}
.work-sec-detail__text{
  position: relative;
  z-index: 2;
  color: #fff;
  font-size: 1.6rem;
  line-height: 1.93;
}
.work-sec-detail__text a{
  text-decoration: underline;
}
.cascade__cell.-work-block{
  width: calc(var(--cell) * 2 + var(--gap) * 1); 
}
.work-sec-detail{
  padding: 5rem 4rem 6rem;
}
.work-sec-overview{
  padding: 5rem 4rem 7rem;
}
.work-sec-overview .c-table{
  border-color: #fff;
  position: relative;
  z-index: 2;
}
.work-sec-overview .c-table tr {
  border-color: rgb(255,255,255,0.3);
}
.work-sec-overview .c-table-th,
.work-sec-overview .c-table-td{
  color: #fff;
}
.work-sec-overview .c-table-th{
  width: 21.5rem;
}
@media (max-width: 768px){
  .work-sec{
    padding-bottom: 5rem;
  }
  .work-sec-detail__text{
    font-size: 1.5rem;
  }
  .work-sec-detail{
    padding: 3rem 2rem 5rem;
  }
  .work-sec-overview{
    padding: 3rem 2rem 5rem;
  }
  .work-sec-head{
    padding: 0 0 2.5rem;
  }
  .work-sec-head__text{
    font-size: 1.5rem;
  }
  .work-sec-head__title{
    margin-top: 1.5rem;
    font-size: 2.5rem;
  }
  .work-sec-overview .c-table-th{
    width: 11rem;
  }
}

/* ========================================
  Modal Base 
=========================================== */
.media-modal{
  position: fixed; inset: 0; z-index: 9999;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .28s ease;
}
/* 開いた状態 */
.media-modal.is-open{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
/* 既存の中身はそのままでOK */
.media-modal__overlay{ position:absolute; inset:0; background:rgba(34,34,34,.9); backdrop-filter: blur(2px); }
.media-modal__viewport{ position:absolute; left:0; top:0; width:100%;}
.swiper-slide{
  max-height: 70vh;
}
/* 閉じるボタン */
.media-modal__close{
  position: fixed;
  width: 4rem;
  top: 2.5rem;
  right: 2.5rem;
  z-index: 999;
  transition: .4s;
}
@media (any-hover: hover) {
  .media-modal__close:hover{
    opacity: 0.7;
  }
}

@media (max-width: 768px){
  .media-modal__close{
    width: 3rem;
    top: 1rem;
    right: 1rem;
  }
}

/* =========================
  スライダー setting 
========================= */
.swiper-wrapper{
  align-items: center;
}
.swiper-bttom{
  position: fixed;
  z-index: 99;
  width: calc(100% - 5rem);
  left: 0;
  right: 0;
  bottom: 3rem;
  margin: 0 auto;
  display: flex;
  align-items: center;
}
.swiper-bttom .button-icon{
  width: 4rem;
  transition: .4s;
}
.swiper-bttom .button-next{
  transform: rotate(180deg);
}
.swiper-pagination {
  width: 80%!important;
  margin: 0 auto;
  position: static;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.6rem 1.2rem;
}
.swiper-pagination-bullet {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background-color: #888;
  opacity: 1;
  transition: width .3s ease-in-out, background-color .4s ease;
}
.swiper-pagination-bullet.swiper-pagination-bullet-active {
  width: 28px;
  background-color: #ffffff;
  transition: width .3s .3s ease-in-out, background-color .4s ease;
}
.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{
  margin: 0;
}
/* ===== Swiper area ===== */
.media-modal__swiper{ 
  width:100%;
  height: 100svh;
  overflow: visible;
  padding-left: var(--peek, 0px);
  padding-right: var(--peek, 0px);
}

.media-modal__swiper img{ max-width:100%; max-height:100%; display:block; }

.is-modal-open body {
  padding-right: var(--sbw, 0);
}
/* フレックスっぽい横並び：幅は自動、高さは統一 */
.media-modal__swiper .swiper-slide{
  width: auto !important;              /* ★これが肝。デフォ100%を打ち消す */
  height: var(--rowH, 700px);
  display: flex;
  align-items: center;
  justify-content: center;
}
/* 画像は高さ基準でフィット：横は比率で可変（トリミング無し） */
.media-modal__swiper img{
  height: 100%;
  width: auto;
  max-width: none;                      /* 幅制限を外す（比率に任せる） */
  object-fit: contain;                  /* トリミングしたいなら cover に変更 */
  display: block;
}
.media-modal__swiper video{
  height: 100%;
  width: auto;
  max-width: none;                      /* 幅制限を外す（比率に任せる） */
  object-fit: contain;                  /* トリミングしたいなら cover に変更 */
  display: block;
  /*aspect-ratio: 3/2;*/
}
@media (any-hover: hover) {
  .swiper-bttom .button-icon:hover{
    opacity: 0.7;
  }
}
@media (max-width: 768px){
  .swiper-bttom{
    width: 100%;
  }
  .media-modal__swiper .swiper-slide{
    height: var(--rowH, 25rem);    
  }
  .swiper-bttom .button-icon{
    width: 3rem;
  }
}



/* 初期は非表示。transitionは初期側に書く */
.cascade__cell{
  opacity: 0;
  transition: opacity 0.5s cubic-bezier(0.76, 0, 0.24, 1)!important;
  will-change: opacity;
}
/* 表示時にディレイだけ反映 */
.cascade__cell.is-active{
  opacity: 1!important;
  transition-delay: var(--delay, 0s)!important;
}
@media (prefers-reduced-motion: reduce){
  .cascade__cell{ opacity: 1; transition: none; }
  .cascade__cell.is-active{ transition: none; }
}



/* 404ページ */
.notfound {
  padding: 10rem 2rem;
}
.notfound .u-ly-head__text{
  font-size: 6rem;
  margin-bottom: 1rem;
}
.u-ly-head__subtext{
  font-size: 2.4rem;
  margin-bottom: 3rem;
}
.company-branding__text{
  font-size: 1.5rem;
  line-height: 2;
}
.notfound .more-buttonArea .more-button{
  margin-top: 5rem;
  justify-content: left;
}
@media (max-width: 768px){
  .notfound {
    padding: 6rem 1rem 3rem;
  }
  .notfound .u-ly-head__text{
    font-size: 4.8rem;
    margin-bottom: 1rem;
  }
  .u-ly-head__subtext{
    font-size: 2rem;
    margin-bottom: 3rem;
  }
  .company-branding__text{
    font-size: 1.4rem;
  }
  .notfound .more-buttonArea .more-button{
    justify-content: center;
  }
}
.column-empty{
  padding: 5rem 0 10rem;
  width: 100%;
}
.column-empty__text{
  font-size: 6rem;
}

.column-empty .more-buttonArea .more-button{
  margin-top: 5rem;
  justify-content: left;
}

@media (max-width: 768px){
  .column-empty{
    padding: 3rem 0 2rem;
  }
  .column-empty__text{
    font-size: 4.8rem;
    text-align: center;
  }
  .column-empty .more-buttonArea .more-button{
    margin-top: 3rem;
    justify-content: center;
  }
}