:root {
  --color-white: #fff;
  --color-main: #c84985;
  --color-font-main: #323232;
  --color-gray: #f0f0f0;
  /* --color-font-low: #afafaf; */
  /* --color-strong: #c63b70; */

  /* --color-gradient: linear-gradient(to right, var(--color-main-light), var(--color-main) calc((100% - 648px) / 2) calc((100% - 648px) / 2 + 648px), var(--color-main-light)); */

  /* --color-gradient: linear-gradient(to right, var(--color-main-light), var(--color-main) 25% 75%, var(--color-main-light)); */

  --shadow-h: 0 6px 12px rgba(0, 0, 0, 0.15);
  /* --shadow-h-top: 0 -6px 12px rgba(0, 0, 0, 0.1); */
  --shadow-m: 0 3px 6px rgba(0, 0, 0, 0.25);

  /* --font-heading: toppan-bunkyu-midashi-go-std; */
  /* --font-rounded: m-plus-rounded-1c; */

  --layout1-w: 648px;
  --layout2-w: 1080px;
  --layout3-w: 1280px;

  --font-size: 14px;
  --font-vdl-v7marugothic: vdl-v7marugothic;
  --font-zen-maru-gothic: zen-maru-gothic;
  --font-ta-koigokoro: ta-koigokoro;
}

/* reset.cssのオーバーライド */
body {
  font-family: var(--font-vdl-v7marugothic), sans-serif;
  font-weight: 300;
}
main,
article {
  padding: 0;
}
section {
  padding-block: 4em;
}
.inner {
  padding: 60px 2em;
}
.box-group {
  padding: 2em;
}


/* 独自CSS */
.zen-maru-gothic {
  font-family: var(--font-zen-maru-gothic), sans-serif;
}
.ta-koigokoro {
  font-family: var(--font-ta-koigokoro), sans-serif;
}
.color-main {
  color: var(--color-main);
  color: var(--color-main);
}
.layout {
  padding-inline: 20px;
}
.heading {
  font-family: var(--font-ta-koigokoro), sans-serif;
  display: inline-block;
  margin-bottom: 20px;
  padding-bottom: 2rem;
  position: relative;
}
.heading:first-child {
  margin-bottom: 20px;
}
.heading::before {
  background: repeating-linear-gradient(-60deg, transparent, transparent 6px, var(--color-main) 6px, var(--color-main) 7px);
  content: "";
  display: block;
  height: 1rem;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
}
.bg-main .heading::before {
  background: repeating-linear-gradient(-60deg, transparent, transparent 6px, var(--color-white) 6px, var(--color-white) 7px);
}
.heading-display {
  color: var(--color-white);
  font-size: 5.5em;
  font-weight: 300;
  line-height: 1;
  margin-right: -20px;
  text-align: right;
}
.profile {
  font-size: 0.6em;
  font-weight: 500;
}
.profile .name {
  font-size: 1.35em;
}
.profile p {
  margin: 0;
}
.bullet > * {
  padding-left: 24px;
}
.bullet > *::before {
  background-image: url(../images/checked.svg);
  background-size: inherit;

}
.split-container {
  display: flex;
}
.bg {
  height: 100%;
  position: fixed;
  width: 100%;
  z-index: -1;
}
.bg::before {
  animation: moveGradient 20s linear infinite alternate;
  background-image: 
    radial-gradient(circle at 60% 70%, #ff007f, transparent 70%),
    radial-gradient(circle at 30% 20%, #00ffaa, transparent 70%),
    radial-gradient(circle at 80% 30%, #007fff, transparent 70%);
  background-repeat: no-repeat;
  background-size: 50% 50%, 50% 50%, 50% 50%;
  content: '';
  filter: blur(40px);
  height: 200%;
  opacity: 0.25;
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
}

/* グラデーションの位置を動かすアニメーション */
@keyframes moveGradient {
  0% { 
      background-position: 0% 0%, 50% 100%, 100% 50%;
  }
  25% { 
      background-position: 25% 50%, 75% 0%, 0% 75%;
  }
  50% { 
      background-position: 50% 100%, 100% 50%, 25% 0%;
  }
  75% { 
      background-position: 75% 0%, 0% 75%, 50% 100%;
  }
  100% { 
      background-position: 100% 50%, 25% 0%, 75% 100%;
  }
}
.bg-sub {
  background-color: #faefff;
}

.side-content {
  flex-basis: 30%;
  margin-inline: 40px;
  position: sticky;
  top: 0;
  height: 100vh;
}
.side-left {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
.side-right {
  min-width: 364px;
}
.area-main {
  background: var(--color-white);
  flex-basis: 40%;
  max-width: 460px;
  overflow: hidden;
}
.area-hero-wrap {
  background: radial-gradient(at 0% 35%, #e38AAE, transparent 70%);
  padding-top: 0.5em;
}

.sub-title {
  margin-block: 2em 1em;
  padding-inline: 1em;
  position: relative;
}
.sub-title::before,
.sub-title::after {
  background: var(--color-font-main);
  content: "";
  height: 3em;
  position: absolute;
  top: 0;
  left: 0;
  transform: rotate(-20deg);
  width: 2px;
}
.sub-title::after {
  left: inherit;
  right: 0.75em ;
  transform: rotate(20deg);
}
.circle {
  color: var(--color-main);
  margin-left: 6px;
  position: relative;
  z-index: 0;
}
.circle::before {
  background: #fff;
  border-radius: 50%;
  color: var(--color-main);
  content: "";
  height: 1.5em;
  position:absolute;
  top: -3px;
  left: -3px;
  width: 1.5em;
  z-index: -1;
}
.bg-fluid-shape {
  position: relative;
  z-index: 0;
}
.bg-fluid-shape::before {
  background: url(../images/bg-fluid-shape1.svg) no-repeat center top;
  background-size: cover;
  content: "";
  height: 560px;
  position: absolute;
  top: -80px;
  left: 0;
  width: 100%;
  z-index: -1;
}
.area-hero .box-group {
  padding: 1em;
}
.area-program {
  padding-bottom: 140px;
}
.area-program.bg-fluid-shape::before {
  height: 600px;
}
.area-speaker {
  color: var(--color-white);
  position: absolute;
  top: 0;
  right: -15%;
  transform: rotate(-15deg);
  z-index: 0;
  width: 70%;
}
.area-speaker::before {
  background: var(--color-main);
  border-radius: 6em 0 0 6em;
  content: "";
  height: 6em;
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  z-index: -1;
}
.area-speaker > figure {
  flex-basis: 6em;
  padding: 2px;
}
.area-speaker > * {
  transform: rotate(14deg);
}
.area-speaker p {
  margin: 0;
}
.area-program-2h .box-group::before {
  background: url(../images/accent-item1.svg) no-repeat;
  background-size: contain;
  content: "";
  height: 48px;
  position: absolute;
  top: -1.5em;
  right: 1em;
  width: 28px;
}
.area-program-2h .box-group::after {
  background: url(../images/accent-item2.svg) no-repeat;
  background-size: contain;
  content: "";
  height: 56px;
  position: absolute;
  bottom: -2.5em;
  left: 0.5em;
  width: 42px;
}
.anim-heart {
  height: 2.5em;
  position: absolute;
  top: -0.5em;
  left: -1em;
  width: 2.5em;
}
.area-member {
  padding-bottom: 0;
}
.area-member.bg-fluid-shape::before {
  background-image: url(../images/bg-fluid-shape2.svg);
}
.thumbnail {
  margin: 0;
  padding: 4%;
  position: relative;
  z-index: 0;
}
.thumbnail::after {
  background: var(--color-white);
  border-radius: 50%;
  content: "";
  padding-top: 100%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: -2;
}
.thumbnail::before {
  background-image: linear-gradient(to bottom, #c84985, #efb46e);
  border-radius: 50%;
  content: "";
  padding-top: 96%;
  position: absolute;
  top: 2%;
  left: 2%;
  width: 96%;
  z-index: -1;
}
.area-chairperson {
  padding-top: 120px;
}
.area-chairperson .area-thumbnail {
  margin: auto;
  max-width: 180px;
  position: absolute;
  top: -80px;
  right: 0;
  left: 0;
  width: 50%;
}
.area-chairperson .inner {
  padding-top: 1em;
}
.area-member div:not(.area-chairperson) .profile {
  background: url(../images/bg-member.svg) no-repeat;
  background-size: contain;

  padding-left: 40px;
}
.area-about-us .box-group {
  background-color: rgba(255, 255, 255, 0.6);
  color: var(--color-font-main);
  margin-bottom: 160px;
}
.area-about-us figure {
  position: absolute;
  bottom: -160px;
  right: -30px;
  width: 95%;
}
.area-sns .heading {
  font-size: 2em;
}
.area-sns .box-flex.col-2 {
  gap: 10px 20px;
}
.area-cta {
  display: block;
  font-size: 16px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}
.area-cta a {
  border-radius: 3em;
  display: inline-block;
  margin: 1em;
}
.btn {
  color: var(--color-white);
  background: var(--color-main);
  border-radius: 3em;
  display: inline-block;
  font-weight: 500;
  padding: 1em 2em;
}
.btn .rounded-full {
  background: var(--color-white);
  color: var(--color-main);
  margin-right: 0.5em;
}

@media screen and (max-width: 648px) {
  .box-group {
    padding: 2em;
  }
  .side-content,
  .bg {
    display: none;
  }
  .area-main {
    flex-basis: 100%;
    padding-bottom: 0.5em;
  }
  .area-support {
    margin-right: -1em;
  }
  .area-about-us {
    padding-bottom: 140px;
  }
  .area-cta {
    background: var(--color-white);
    box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.25);
    position: fixed;
  }
  .area-cta a {
    border-radius: 0;
    display: block;;
    margin: 0;
    padding: 1em;
  }
}
@media screen and (min-width: 1280px) {
  .split-container {
    margin: auto;
    width: 1280px;
  }
  .profile {
    font-size: 0.8em;
  }
  .side-content .profile {
    font-size: 0.6em;
  }
  .area-member div:not(.area-chairperson) .profile {
    font-size: 0.8em;
    padding-left: 4.5em;
  }
  .area-about-us figure {
    bottom: -180px;
  }
}