body {
    position: relative;
    z-index:0;
}
body::after {
    content: "";
    position: absolute;
    z-index:-1;
    inset: 0;
    background: url(/assets/img/home/about.jpg) center / cover no-repeat;
    opacity: 1; /* 必要に応じて透明度も調整可能 */
    height:calc(100% - 2000px); /* 2000px以上に拡大 */
}

.about-visual-section {
      display: flex;
      justify-content: center;
      align-items: flex-start; /* ← ここをflex-startに */
      min-height: 200vh; /* 200vh以上に拡大 */
      gap: 4vw;
      position: relative;
      padding-top:20vh;
      z-index:2;
      margin-bottom: 5rem;
      /* 背景や演出を追加したい場合はここに */
    }
    .about-visual-images {
      display: flex;
      flex-direction: column;
      gap: 2vw;
      align-items: center;
      justify-content: center;
      flex: 1 1 0;
      max-width: 400px;
    }
    .about-visual-images img {
      width: auto;
      max-width: 480px;
      height: auto;
      max-height: 480px;
      aspect-ratio: unset; /* 追加: アスペクト比を解除 */
      object-fit: contain; /* 追加: 画像全体を収める */
      box-shadow: 0 4px 24px rgba(0,0,0,0.10);
      opacity: 0.85;
      will-change: transform;
      transition: box-shadow 0.3s;
      display: block;
      margin: 0 auto;
    }
    .about-visual-center {
      flex: 0 0 auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-width: 260px;
      max-width: 320px;
    }
    .about-visual-title {
      writing-mode: vertical-rl;
      text-align: center;
      font-size: 2rem;
      color: var(--accent-color, #bfa76f);
      font-family: var(--title-font, 'Noto Serif JP', serif);
      letter-spacing: 0.1em;
      margin-bottom: 2rem;
    }
    .about-visual-sub {
      writing-mode: vertical-rl;
      font-size: 1.1rem;
      color: #aaa;
      margin-bottom: 4rem;
    }
    .about-visual-more {
      margin-top: 2rem;
      padding: 0.7em 2.5em;
      border: 1.5px solid #fff;
      border-radius: 2em;
      background: none;
      color: #fff;
      font-size: 1.1rem;
      letter-spacing: 0.12em;
      cursor: pointer;
      transition: background 0.2s, color 0.2s;
      outline: none;
      font-family: var(--title-font, 'Noto Serif JP', serif);
    }
    .about-visual-more:hover {
      background: #fff;
      color: #222;
    }


.about-main {
      max-width: 1200px;
      margin: 0 auto;
      padding: 50px 5vw 4rem 5vw;
      background: #fff;
      z-index:3;
      font-family: var(--base-font, 'Noto Serif JP', serif);
      color: var(--text-color, #222);
      display:flex;
      flex-direction: column;
      position: relative;
    }
    .about-photo-parallax {
      position: absolute;
      top: -20px;
      right: -30px;
      width: 360px;
      height: 480px;
      z-index: 0;
      opacity: 1;
      border-radius: 0%;
      overflow: hidden;
      box-shadow: 0 8px 32px rgba(0,0,0,0.10);
      pointer-events: none;
    }
    .about-photo-parallax img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      filter: grayscale(30%) brightness(1.1);
    }
    .about-photo-parallax-2 {
      position: absolute;
      bottom: 0px;
      right: 5vw;
      width: 320px;
      height: 320px;
      z-index: 0;
      opacity: 1;
      border-radius: 0%;
      overflow: hidden;
      /*box-shadow: 0 8px 32px rgba(0,0,0,0.10);*/
      pointer-events: none;
    }
    .about-photo-parallax-2 img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      filter: grayscale(30%) brightness(1.1);
    }
    .about-main > *:not(.about-photo-parallax) {
      /*position: relative;*/
      z-index: 1;
    }
    .about-main h1 {
      position:absolute;
        text-orientation: mixed;
        font-family: var(--title-font);
        font-size: 7rem;
        font-weight: 400;
        color: #222;
        align-self: end;      /* 下端に揃える */
        justify-self: start;  /* 左端に揃える（X=0px） */
        height: auto;
        letter-spacing: 0.6rem;
        z-index: 2;
        padding-bottom: 0;
        top:calc(calc(-13px - 7rem));
        left:0rem; /* 左端を調整 */
    }
    .about-main h2 {
      font-size: 1.8rem;
      margin: 2.5rem 0 1rem 0;
      color: var(--accent-color, #bfa76f);
      letter-spacing: 0.08em;
    }
    .about-main h3 {
      font-size: 1.1rem;
      margin: 2rem 0 0.7rem 0;
      color: #888;
      letter-spacing: 0.08em;
    }
    .about-main .about-intro {
      font-size:1.3rem;
      line-height: 1.8;
      color: #333;
      margin-bottom: 5rem;
      width:50%;
    }
    .about-main ul, .about-main ol {
      margin: 0 0 1.5rem 1.5em;
      padding: 0;
      list-style-type:none;
    }
    .about-main li {
      margin-bottom: 0.5em;
      font-size: 1.2rem;
    }
    .about-main li:before{
      content: "\f0da"; /* Font Awesomeの矢印アイコン */
      font-family: "Font Awesome 5 Free";
      font-weight: 900; /* 太字で表示 */
      color: #3c3c3c; /* アイコンの色 */
      margin-right: 0.5em; /* アイコンとテキストの間隔 */
    }
    .about-main .exhibition-list {
      margin:0 0 5rem 2rem;
            width: 60%;
    }
    .about-main .exhibition-list li {
      margin-bottom: 0.6em;
      font-size:1.2rem;
      border-bottom:1px dotted #bfa76f;
      list-style-type: none!important;
    }
    .about-main .exhibition-list li:last-child {
      margin-bottom: 0;
    }
    .about-main .exhibition-list li::before {
  font-family: "Font Awesome 5 Free";
  content: "\f15c";
  font-weight: 900; /* Font Awesomeのアイコンは通常、太字で表示される */
  position: absolute;
  left : -1.5em/*左端からのアイコンまでの距離*/;
  color: #bfa76f;/*アイコン色*/
}
    .about-main .contact-links, 
    .about-main .skills, 
    .about-main .activities {
      margin-bottom:5rem;
    }
      .about-main .contact-links a {
      color: var(--accent-color, #bfa76f);
      text-decoration: none;
      margin-right: 1.2em;
      font-weight: bold;
      transition: color 0.2s;
    }
    .about-main .contact-links a:hover {
      color: var(--text-color, #222);
    }
    .fade-in {
      opacity: 0;
      transform: translateY(40px);
      transition: opacity 1.2s cubic-bezier(.4,0,.2,1), transform 1.2s cubic-bezier(.4,0,.2,1);
      will-change: opacity, transform;
    }
    .fade-in.is-visible {
      opacity: 1;
      transform: translateY(0);
    }

.ripple-target {
    position: relative;
    overflow: hidden;
}


/* --- レスポンシブ対応 --- */
@media (max-width: 820px) {
.about-main {
    padding:0 5vw 30vw;
}
.about-main .about-intro {
    width: 45vw;
}
.about-visual-images img {
  width: auto;
  max-width: 360px;
  height: auto;
  max-height: 360px;
}
    .about-main .exhibition-list {
    margin: 0 2rem 5rem;
    width: 90%;
}
.about-photo-parallax-2 {
    width: 30vw;
    height: 40vw;
}
.about-photo-parallax {
    top: -3rem;
    width: 40vw;
    height: 50vw;
}
.about-main h1 {
    position:absolute;
    writing-mode: horizontal-tb;
    text-orientation: mixed;
    font-family: var(--title-font);
    font-size: 7rem;
    font-weight: 400;
    color: #222;
    align-self: end;      /* 下端に揃える */
    justify-self: start;  /* 左端に揃える（X=0px） */
    height: auto;
    letter-spacing: 0.6rem;
    z-index: 2;
    padding-bottom: 0;
    top: calc(100vh - 42rem);
    left: 53vw;
}
}
@media (max-width: 600px) {
.about-photo-parallax {
    top: 9rem;
}
  .about-main h1 {
    writing-mode:vertical-rl;
    font-size: 5rem;
  }
  .about-main h2 {
    margin:4rem 0 2rem;
  }
.about-main .about-intro {
    width: 45vw;
}
}
@media (max-width: 480px) {
  .about-main h1 {
      writing-mode:horizontal-tb;
      align-self: end;      /* 下端に揃える */
      justify-self: start;  /* 左端に揃える（X=0px） */
      height: auto;
      letter-spacing: 0.3rem;
      z-index: 2;
      padding-bottom: 0;
      top:calc(calc(10px - 7rem));
      left:5vw; /* 左端を調整 */
  }
  .about-main .about-intro {
    width: 100%;
}
.about-visual-images img {
  width: auto;
  max-width: 240px;
  height: auto;
  max-height: 240px;
}
.about-photo-parallax {
    top: calc(60px - 45vw);
    width:40vw;
    height:40vw;
}
}


