@charset "UTF-8";
.aboutSect {
  /* 画像を外したため、PCは英字見出しとロゴを横並びで中央に、SPは縦並び中央揃えで配置 */
}

@media screen and (min-width: 768px) {
  .aboutSect__head {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}

@media screen and (min-width: 768px) {
  .aboutSect__ttlArea {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 80px;
  }
}

@media screen and (max-width: 768px) {
  .aboutSect__ttlArea {
    text-align: center;
  }
}

@media print, screen and (min-width: 768px) and (max-width: 1199px) {
  .aboutSect__ttlArea .enTtl {
    font-size: 40px;
  }
}

@media screen and (max-width: 768px) {
  .aboutSect__logo {
    margin-top: 34px;
  }
}

.aboutSect__logo img {
  display: inline-block;
  height: auto;
  vertical-align: top;
  width: 220px;
}

.aboutSect__body {
  /* SPは見出しを2行に収めるため字間を詰め、狭い端末では画面幅に合わせて縮小 */
}

@media screen and (min-width: 768px) {
  .aboutSect__body {
    margin: 100px auto 0;
    max-width: 896px;
  }
}

@media screen and (max-width: 768px) {
  .aboutSect__body {
    margin-top: 40px;
  }
}

@media screen and (min-width: 768px) {
  .aboutSect__body .heading {
    text-align: center;
  }
}

@media screen and (max-width: 768px) {
  .aboutSect__body .heading {
    font-size: 18px;
    letter-spacing: 0;
  }
}

@media only screen and (max-width: 768px) and (max-width: 374px) {
  .aboutSect__body .heading {
    font-size: 4.8vw;
  }
}

.brushFigure {
  margin: 0;
  position: relative;
  /* pathLength="1" で線の長さを正規化。dash の隙間を線長の2倍にして、始点・終点に丸キャップが残らないようにしている */
}

.brushFigure__visual {
  opacity: 0;
  -webkit-transition: opacity 1s cubic-bezier(0.23, 1, 0.32, 1);
  transition: opacity 1s cubic-bezier(0.23, 1, 0.32, 1);
  width: 100%;
}

.brushFigure__svg {
  display: block;
  height: auto;
  width: 100%;
}

.brushFigure__stroke {
  stroke-dasharray: 1 2;
  stroke-dashoffset: 1.001;
  -webkit-transition: stroke-dashoffset 2.4s cubic-bezier(0.45, 0.05, 0.35, 1) 0.3s;
  transition: stroke-dashoffset 2.4s cubic-bezier(0.45, 0.05, 0.35, 1) 0.3s;
}

.brushFigure__caption {
  text-align: right;
}

@media screen and (min-width: 768px) {
  .brushFigure__caption {
    margin-top: 7px;
  }
}

@media screen and (max-width: 768px) {
  .brushFigure__caption {
    margin-top: 5px;
  }
}

.brushFigure.sai-animate .brushFigure__visual {
  opacity: 1;
}

.brushFigure.sai-animate .brushFigure__stroke {
  stroke-dashoffset: 0;
}

.cafeCard {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  /* 1200px未満では幅を等分し、テキストが折り返しても付箋に合わせて画像も伸びるよう min-height にしている */
  /*
      付箋が貼られるアクション（bkn_500-300_nakano interviewResult__pointNote と同じ構成）。
      右下の角が折り返った状態からスタートし、着地状態へ遷移させる。
      PC は拡大率130%、SP は左に -30% ずらした位置から（SP は cafeSect__cont の overflow: hidden で見切る）。
      :before = 紙の表（右下の角を三角に切り落とす）、:after = めくれ上がった角の裏面。
      clip-path は親要素にかけると疑似要素まで切ってしまうので、Bg 自体は入れ物にして表と裏を別々の疑似要素に持たせている。
    */
}

@media screen and (min-width: 768px) {
  .cafeCard {
    gap: 20px;
  }
}

@media screen and (max-width: 768px) {
  .cafeCard {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 8px;
  }
}

@media screen and (min-width: 768px) {
  .cafeCard__visual, .cafeCard__note {
    min-height: 220px;
    width: calc((100% - 20px) / 2);
  }
}

@media screen and (max-width: 768px) {
  .cafeCard__visual {
    aspect-ratio: 295 / 132;
    width: 100%;
  }
}

.cafeCard__note {
  position: relative;
}

@media screen and (min-width: 768px) {
  .cafeCard__note {
    padding: 35px 40px 40px;
  }
}

@media screen and (max-width: 768px) {
  .cafeCard__note {
    padding: 20px 20px 24px;
    width: 100%;
  }
}

.cafeCard__noteBody {
  color: #ffffff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  opacity: 0;
  position: relative;
  -webkit-transition: opacity 0.8s cubic-bezier(0.34, 1.26, 0.64, 1) 0.8s;
  transition: opacity 0.8s cubic-bezier(0.34, 1.26, 0.64, 1) 0.8s;
  z-index: 1;
}

@media screen and (min-width: 768px) {
  .cafeCard__noteBody {
    gap: 37px;
  }
}

@media screen and (max-width: 768px) {
  .cafeCard__noteBody {
    gap: 21px;
  }
}

.cafeCard__note.sai-animate .cafeCard__noteBody {
  opacity: 1;
}

.cafeCard__noteBg {
  inset: 0;
  opacity: 0;
  position: absolute;
  -webkit-transition: 0.7s cubic-bezier(0.34, 1.26, 0.64, 1) 0.1s;
  transition: 0.7s cubic-bezier(0.34, 1.26, 0.64, 1) 0.1s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  z-index: 0;
  /* 折り返しが閉じるモーションだけイージングを強い easeIn にして、開いた状態をしばらく保ってから一気に閉じさせる */
  /* 紙の表 */
  /* めくれ上がった角の裏面（折り目に沿って影を落とす） */
}

@media screen and (min-width: 768px) {
  .cafeCard__noteBg {
    --peel: 140px;
    -webkit-transform: scale(1.3);
            transform: scale(1.3);
  }
}

@media screen and (max-width: 768px) {
  .cafeCard__noteBg {
    --peel: 110px;
    -webkit-transform: translateX(-30%);
            transform: translateX(-30%);
  }
}

.cafeCard__noteBg:before, .cafeCard__noteBg:after {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  content: '';
  display: block;
  position: absolute;
  -webkit-transition: 0.7s cubic-bezier(0.7, 0, 0.84, 0) 0.1s;
  transition: 0.7s cubic-bezier(0.7, 0, 0.84, 0) 0.1s;
}

.cafeCard__noteBg:before {
  background-color: #e8a970;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--peel)), calc(100% - var(--peel)) 100%, 0 100%);
          clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--peel)), calc(100% - var(--peel)) 100%, 0 100%);
  inset: 0;
  -webkit-transition-property: -webkit-clip-path;
  transition-property: -webkit-clip-path;
  transition-property: clip-path;
  transition-property: clip-path, -webkit-clip-path;
}

.cafeCard__noteBg:after {
  background-color: #d4945c;
  bottom: 0;
  -webkit-clip-path: polygon(0 0, 100% 0, 0 100%);
          clip-path: polygon(0 0, 100% 0, 0 100%);
  -webkit-filter: drop-shadow(-2px -2px 6px rgba(0, 0, 0, 0.18));
          filter: drop-shadow(-2px -2px 6px rgba(0, 0, 0, 0.18));
  height: var(--peel);
  right: 0;
  -webkit-transition-property: height, width;
  transition-property: height, width;
  width: var(--peel);
}

.cafeCard__note.sai-animate .cafeCard__noteBg {
  opacity: 1;
}

@media screen and (min-width: 768px) {
  .cafeCard__note.sai-animate .cafeCard__noteBg {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@media screen and (max-width: 768px) {
  .cafeCard__note.sai-animate .cafeCard__noteBg {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}

.cafeCard__note.sai-animate .cafeCard__noteBg:before {
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 100% 100%, 0 100%);
          clip-path: polygon(0 0, 100% 0, 100% 100%, 100% 100%, 0 100%);
}

.cafeCard__note.sai-animate .cafeCard__noteBg:after {
  height: 0;
  width: 0;
}

.cafeCard__ttl {
  border-bottom: 1px solid #ffffff;
  font-family: "EB Garamond", serif;
  letter-spacing: .05em;
}

@media screen and (min-width: 768px) {
  .cafeCard__ttl {
    font-size: 32px;
    padding-bottom: 18px;
  }
}

@media screen and (max-width: 768px) {
  .cafeCard__ttl {
    font-size: 24px;
    padding-bottom: 20px;
  }
}

.cafeCard__ttl .inner {
  display: block;
  line-height: 1.2;
}

.cafeCard__ttl .inner:before {
  content: '';
  margin-top: calc((1 - 1.2) * .5em);
}

.cafeCard__ttl .inner:after {
  margin-bottom: calc((1 - 1.2) * .5em);
}

.cafeCard__ttl .inner:before, .cafeCard__ttl .inner:after {
  content: '';
  display: block;
  height: 0;
  width: 0;
}

.cafeSect__label {
  background-color: #baae9a;
  color: #ffffff;
  font-family: "YakuHanMP", "Noto Serif JP", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
  letter-spacing: .05em;
  text-align: center;
}

@media screen and (min-width: 768px) {
  .cafeSect__label {
    font-size: 24px;
    padding: 20px 0 21px;
  }
}

@media screen and (max-width: 768px) {
  .cafeSect__label {
    font-size: 18px;
    padding: 13px 0 14px;
  }
}

.cafeSect__label .inner {
  display: block;
  line-height: 1.6;
}

.cafeSect__label .inner:before {
  content: '';
  margin-top: calc((1 - 1.6) * .5em);
}

.cafeSect__label .inner:after {
  margin-bottom: calc((1 - 1.6) * .5em);
}

.cafeSect__label .inner:before, .cafeSect__label .inner:after {
  content: '';
  display: block;
  height: 0;
  width: 0;
}

@media screen and (min-width: 768px) {
  .cafeSect__head .photo {
    height: 510px;
  }
}

@media screen and (max-width: 768px) {
  .cafeSect__head .photo {
    aspect-ratio: 335 / 173;
  }
}

.cafeSect__cont {
  background-color: #eae4d0;
}

@media screen and (min-width: 768px) {
  .cafeSect__cont {
    padding: 96px calc(100 / 1200 * 100%) 100px;
  }
}

@media screen and (max-width: 768px) {
  .cafeSect__cont {
    overflow: hidden;
    padding: 57px 20px 60px;
  }
}

@media screen and (min-width: 768px) {
  .cafeSect__intro {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: calc(88 / 1000 * 100%);
  }
}

.cafeSect__intro .heading {
  color: #272f36;
}

@media screen and (min-width: 768px) {
  .cafeSect__intro .heading {
    -ms-flex-negative: 0;
        flex-shrink: 0;
    width: calc(424 / 1000 * 100%);
  }
}

@media screen and (min-width: 768px) {
  .cafeSect__intro .txt {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    margin-top: 0;
  }
}

@media screen and (max-width: 768px) {
  .cafeSect__intro .txt {
    margin-top: 37px;
  }
}

@media screen and (min-width: 768px) {
  .cafeSect__introBody {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    gap: 24px;
  }
}

@media screen and (max-width: 768px) {
  .cafeSect__introBody {
    margin-top: 37px;
  }
}

@media screen and (min-width: 768px) {
  .cafeSect__logo {
    -ms-flex-negative: 0;
        flex-shrink: 0;
  }
}

@media screen and (max-width: 768px) {
  .cafeSect__logo {
    margin: 0 auto;
    width: 123px;
  }
}

.cafeSect__logo img {
  display: block;
}

@media screen and (min-width: 768px) {
  .cafeSect__logo img {
    /* 高さをテキストに合わせる（画像自身の高さで行を押し広げないよう height: 0 + min-height で親の高さに追従） */
    height: 0;
    min-height: 100%;
    width: auto;
  }
}

@media screen and (max-width: 768px) {
  .cafeSect__logo img {
    height: auto;
    width: 100%;
  }
}

@media screen and (min-width: 768px) {
  .cafeSect__item:nth-child(even) .cafeCard {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
  }
}

.cafeSect__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 60px;
}

@media screen and (min-width: 768px) {
  .cafeSect__list {
    margin-top: 98px;
  }
}

@media screen and (max-width: 768px) {
  .cafeSect__list {
    margin-top: 59px;
  }
}

@media screen and (min-width: 768px) {
  .cafeSect .caption {
    margin-top: 56px;
  }
}

@media screen and (max-width: 768px) {
  .cafeSect .caption {
    margin-top: 40px;
  }
}

/* グループの配色はカスタムプロパティで持ち、子のeventListのカードにも引き継ぐ */
.eventGroup {
  --event-label-color: #9b9443;
  --event-card-color: #958f4f;
}

.eventGroup--dark {
  --event-label-color: #635f27;
  --event-card-color: #635f27;
}

.eventGroup--orange {
  --event-label-color: #be8948;
  --event-card-color: #be8948;
}

@media screen and (min-width: 768px) {
  .eventGroup--half .eventList__item {
    width: 100%;
  }
}

.eventGroup__label {
  background-color: var(--event-label-color);
  color: #ffffff;
  font-family: "YakuHanMP", "Noto Serif JP", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
  letter-spacing: .05em;
  text-align: center;
}

@media screen and (min-width: 768px) {
  .eventGroup__label {
    font-size: 24px;
    padding: 20px 20px 21px;
  }
}

@media screen and (max-width: 768px) {
  .eventGroup__label {
    font-size: 18px;
    padding: 21px 20px 22px;
  }
}

.eventGroup__label .inner {
  display: block;
  line-height: 1.6;
}

.eventGroup__label .inner:before {
  content: '';
  margin-top: calc((1 - 1.6) * .5em);
}

.eventGroup__label .inner:after {
  margin-bottom: calc((1 - 1.6) * .5em);
}

.eventGroup__label .inner:before, .eventGroup__label .inner:after {
  content: '';
  display: block;
  height: 0;
  width: 0;
}

.eventGroup__label .note {
  font-size: .645em;
}

.eventGroup__note {
  margin-top: 6px;
}

@media screen and (min-width: 768px) {
  .eventGroup__cont {
    margin-top: 58px;
  }
}

@media screen and (max-width: 768px) {
  .eventGroup__cont {
    margin-top: 40px;
  }
}

.eventList {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

@media screen and (min-width: 768px) {
  .eventList {
    gap: 100px 60px;
  }
}

@media screen and (max-width: 768px) {
  .eventList {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 40px;
  }
}

.eventList__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 10px;
}

@media screen and (min-width: 768px) {
  .eventList__item {
    width: calc((100% - 60px) / 2);
  }
}

.eventList__visual .photo {
  aspect-ratio: 540 / 304;
}

.eventList__card {
  background-color: var(--event-card-color, #958f4f);
  color: #ffffff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}

@media screen and (min-width: 768px) {
  .eventList__card {
    gap: 38px;
    padding: 36px 40px 39px;
  }
}

@media screen and (max-width: 768px) {
  .eventList__card {
    gap: 22px;
    padding: 21px 20px 24px;
  }
}

@media screen and (min-width: 768px) {
  .eventList__note {
    margin-top: -16px;
  }
}

@media screen and (max-width: 768px) {
  .eventList__note {
    margin-top: 0;
  }
}

.eventList__ttl {
  border-bottom: 1px solid #cccccc;
  font-family: "YakuHanMP", "Noto Serif JP", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
  letter-spacing: .05em;
  padding-bottom: 21px;
}

@media screen and (min-width: 768px) {
  .eventList__ttl {
    font-size: 24px;
  }
}

@media screen and (max-width: 768px) {
  .eventList__ttl {
    font-size: 18px;
  }
}

.eventList__ttl .inner {
  display: block;
  line-height: 1.6;
}

.eventList__ttl .inner:before {
  content: '';
  margin-top: calc((1 - 1.6) * .5em);
}

.eventList__ttl .inner:after {
  margin-bottom: calc((1 - 1.6) * .5em);
}

.eventList__ttl .inner:before, .eventList__ttl .inner:after {
  content: '';
  display: block;
  height: 0;
  width: 0;
}

@media screen and (min-width: 768px) {
  .eventSect__head .enTtl + .txt--large {
    margin-top: 21px;
  }
}

@media screen and (max-width: 768px) {
  .eventSect__head .enTtl + .txt--large {
    margin-top: 28px;
  }
}

@media screen and (max-width: 768px) {
  .eventSect__head .txt--large {
    font-size: 18px;
  }
}

.eventSect__cont {
  margin: 0 auto;
}

@media screen and (min-width: 768px) {
  .eventSect__cont {
    width: 1140px;
  }
}

@media print, screen and (min-width: 768px) and (max-width: 1199px) {
  .eventSect__cont {
    width: 100%;
  }
}

@media screen and (min-width: 768px) {
  .eventSect__cont {
    margin-top: 117px;
  }
}

@media screen and (max-width: 768px) {
  .eventSect__cont {
    margin-top: 58px;
  }
}

.eventSect__groups {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

@media screen and (min-width: 768px) {
  .eventSect__groups {
    display: grid;
    gap: 120px 60px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .eventSect__groups > .eventGroup:not(.eventGroup--half) {
    grid-column: 1 / -1;
  }
}

@media screen and (max-width: 768px) {
  .eventSect__groups {
    gap: 60px;
  }
}

@media screen and (min-width: 768px) {
  .eventSect__caption {
    margin-top: 60px;
  }
}

@media screen and (max-width: 768px) {
  .eventSect__caption {
    margin-top: 10px;
  }
}

.introSect__head .enTtl {
  letter-spacing: 0;
}

@media screen and (max-width: 768px) {
  .introSect__head .enTtl {
    font-size: 48px;
  }
}

@media screen and (min-width: 768px) {
  .introSect__head .enTtl + .heading {
    margin-top: 36px;
  }
}

@media screen and (max-width: 768px) {
  .introSect__head .enTtl + .heading {
    margin-top: 26px;
  }
}

@media screen and (min-width: 768px) {
  .introSect__head .heading + .txt {
    margin-top: 31px;
  }
}

@media screen and (max-width: 768px) {
  .introSect__head .heading + .txt {
    margin-top: 15px;
  }
}

@media screen and (min-width: 768px) {
  .introSect__head + .introSect__cont {
    margin-top: 139px;
  }
}

@media screen and (max-width: 768px) {
  .introSect__head + .introSect__cont {
    margin-top: 99px;
  }
}

.communitydesign-introduction {
  position: relative;
  z-index: 1;
  /* デザインページ（introGallery）と同様に、上から下へ伸びるイエローの帯。COMMUNITY DESIGNの見出し表示をきっかけに伸ばす */
}

@media screen and (min-width: 768px) {
  .communitydesign-introduction {
    padding: 125px 0 86px;
  }
}

@media screen and (max-width: 768px) {
  .communitydesign-introduction {
    padding: 92px 0 90px;
  }
}

.communitydesign-introduction:before {
  background-color: rgba(234, 228, 208, 0.5);
  content: '';
  display: block;
  max-height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  -webkit-transform: scaleY(0);
          transform: scaleY(0);
  -webkit-transform-origin: top;
          transform-origin: top;
  -webkit-transition: -webkit-transform 3s cubic-bezier(0.11, 0, 0.5, 0);
  transition: -webkit-transform 3s cubic-bezier(0.11, 0, 0.5, 0);
  transition: transform 3s cubic-bezier(0.11, 0, 0.5, 0);
  transition: transform 3s cubic-bezier(0.11, 0, 0.5, 0), -webkit-transform 3s cubic-bezier(0.11, 0, 0.5, 0);
  z-index: -1;
}

@media screen and (min-width: 768px) {
  .communitydesign-introduction:before {
    height: 1114px;
    width: calc(660 / 1440 * 100vw);
  }
}

@media screen and (max-width: 768px) {
  .communitydesign-introduction:before {
    height: 882px;
    width: 200px;
  }
}

.communitydesign-introduction:has(.introSect__head.sai-animate):before {
  -webkit-transform: scaleY(1);
          transform: scaleY(1);
}

@media screen and (min-width: 768px) {
  .communitydesign-about {
    padding: 0 0 99px;
  }
}

@media screen and (max-width: 768px) {
  .communitydesign-about {
    padding: 0 0 58px;
  }
}

@media screen and (min-width: 768px) {
  .communitydesign-cafe {
    padding: 0 0 200px;
  }
}

@media screen and (max-width: 768px) {
  .communitydesign-cafe {
    padding: 0 0 100px;
  }
}

@media screen and (min-width: 768px) {
  .communitydesign-event {
    padding: 0 0 197px;
  }
}

@media screen and (max-width: 768px) {
  .communitydesign-event {
    padding: 0 0 98px;
  }
}

/* 1200px未満のPCでは英字見出しがはみ出さないよう折り返しを許可 */
@media print, screen and (min-width: 768px) and (max-width: 1199px) {
  .communitydesign-introduction .enTtl,
  .communitydesign-about .enTtl,
  .communitydesign-event .enTtl {
    white-space: normal;
  }
}

@media screen and (min-width: 768px) {
  .communitydesign-about .enTtl,
  .communitydesign-event .enTtl {
    letter-spacing: 0;
  }
}

@media screen and (max-width: 768px) {
  .communitydesign-about .enTtl,
  .communitydesign-event .enTtl {
    font-size: 40px;
  }
}