:root {
  --fwVision: #226F15;
  --fwVision-light: #EDFFF0;
  --fwBody: #F68003;
  --fwBody-light: #FFF1E3;
  --fwLife: #0070C0;
  --fwLife-light: #E7F9FD;
  --fwMind: #7030A0;
  --fwMind-light: #FCEDFB;
  --fwSociety: #175774;
  --fwSociety-light: #EDFCF9;
  --genten-color-A: #451783;
  --genten-color-A-light: #FAF5FF;
  --genten-color-B: #F45C01;
  --genten-color-B-light: #FFF4DE;
  --genten-color-C: #0F63E4;
  --genten-color-C-light: #EDFDFF;
  --genten-color-D: #027C7A;
  --genten-color-D-light: #D3F7FC;
  --genten-color-E: #3AA000;
  --genten-color-E-light: #F6FFF5;
  --genten-color-F: #136900;
  --genten-color-F-light: #F6FFF5;
  --genten-color-G: #0575A7;
  --genten-color-G-light: #DFF0F8;
}

/* ── Origin Science Map ── */
.sciencemap {
  background: var(--off-white);
  position: relative;
}

.section-heading-secondary {
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
}

.text-emphasis {
  font-size: 1.2rem;
  font-weight: 600;
  color: #24009D;
  text-align: center;
}

.text-small {
  font-size: 0.8em;
}

.researchArea {
  height: 200px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.research01, .research02, .research03 {
  text-align: center;
  position: relative;
}
.research01 span:first-child,
.research02 span:first-child,
.research03 span:first-child {
  position: relative;
  z-index: 2;
}
.research01 .bg, .research02 .bg, .research03 .bg {
  width: 80px;
  height: 80px;
  background-color: #C3FFC7;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  position: absolute;
}
.research02 .bg {
  background-color: #67AFF7;
}
.research03 .bg {
  background-color: #FFB08D;
}

.sciencemap-area {
    width: 100%;
    max-width: 600px;
    height: 500px;
    margin: 30px auto;
    position: relative;
}

.genten-circle {
    width: 270px;
    height: 270px;
    background-color: #FEE48E;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 40;
}

.genten-circle-heading {
    font-size: 1.3rem;
    font-weight: 600;
    font-family: var(--font-title);
}
.genten-circle-heading strong {
    color: #F67004;
}

.genten-card {
    max-width: fit-content;
    padding: 5px;
    text-align: center;
    border-radius: 8px;
    background-color: #FAF5FF;
    border: 3px solid #451783;
    box-shadow: 0 0 8px #848484;
    position: absolute;
    top: 80%;
    left: 50%;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    z-index: 50;
}
.genten-card img {
    width: 60px !important;
    margin: 5px;
}
.genten-card strong {
    padding: 5px;
    display: block;
    border-bottom: 1px solid #D8D8D8;
    font-family: var(--font-title);
}
.genten-card ul {
    margin: 1em 3em;
    text-align: left;
    font-size: 0.8rem;
}

/* カラバリ */
.genten-modal01 .genten-card,
.genten-modal06 .genten-card {
    border-color: var(--genten-color-A);
    background-color: var(--genten-color-A-light);
}
.genten-modal01 .genten-card strong,
.genten-modal06 .genten-card strong {
    color: var(--genten-color-A);
}
.genten-modal01::before,
.genten-modal06::before {
    background-color: var(--genten-color-A);
}
.genten-modal02 .genten-card,
.genten-modal03 .genten-card {
    border-color: var(--genten-color-B);
    background-color: var(--genten-color-B-light);
}
.genten-modal02 .genten-card strong,
.genten-modal03 .genten-card strong {
    color: var(--genten-color-B);
}
.genten-modal02::before,
.genten-modal03::before {
    background-color: var(--genten-color-B);
}
.genten-modal04 .genten-card,
.genten-modal05 .genten-card {
    border-color: var(--genten-color-C);
    background-color: var(--genten-color-C-light);
}
.genten-modal04 .genten-card strong,
.genten-modal05 .genten-card strong {
    color: var(--genten-color-C);
}
.genten-modal04::before,
.genten-modal05::before {
    background-color: var(--genten-color-C);
}
.genten-modal07 .genten-card {
    border-color: var(--genten-color-D);
    background-color: var(--genten-color-D-light);
}
.genten-modal07 .genten-card strong {
    color: var(--genten-color-D);
}
.genten-modal07::before {
    background-color: var(--genten-color-D);
}
.genten-modal08 .genten-card {
    border-color: var(--genten-color-E);
    background-color: var(--genten-color-E-light);
}
.genten-modal08 .genten-card strong {
    color: var(--genten-color-E);
}
.genten-modal08::before {
    background-color: var(--genten-color-E);
}
.genten-modal09 .genten-card {
    border-color: var(--genten-color-F);
    background-color: var(--genten-color-F-light);
}
.genten-modal09 .genten-card strong {
    color: var(--genten-color-F);
}
.genten-modal09::before {
    background-color: var(--genten-color-F);
}
.genten-modal10 .genten-card {
    border-color: var(--genten-color-G);
    background-color: var(--genten-color-G-light);
}
.genten-modal10 .genten-card strong {
    color: var(--genten-color-G);
}
.genten-modal10::before {
    background-color: var(--genten-color-G);
}
/* カラバリ */

/* 表示位置 */
.genten-modal01 {
    top: 0;
    left: 45%;
}
.genten-modal02 {
    top: 10%;
    left: 70%;
}
.genten-modal03 {
    top: 30%;
    right: 0;
}
.genten-modal04 {
    top: 30%;
    left: 0;
}
.genten-modal05 {
    top: 55%;
    left: 0;
}
.genten-modal06 {
    top: 10%;
    left: 20%;
}
.genten-modal07 {
    top: 80%;
    left: 20%;
}
.genten-modal08 {
    top: 55%;
    right: 0;
}
.genten-modal09 {
    top: 80%;
    left: 70%;
}
.genten-modal10 {
    left: 45%;
    bottom: 0;
}
/* 表示位置 */

[class^="genten-modal"] {
    display: inline-block;
    position: absolute;
}

[class^="genten-icon"] img {
    width: 70px;
}

[class^="genten-icon"] {
    position: relative;
    cursor: pointer;
}
[class^="genten-icon"]:hover + .genten-card {
    transition: all 0.6s ease-out;
    opacity: 1;
    visibility: visible;
}

[class^="genten-modal"]::before {
    width: 200px;
    height: 5px;
    content: "";
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    transform-origin: left top;
}

/* 回転 */
.genten-modal01::before {
    transform: rotate(90deg);
}
.genten-modal02::before {
    transform: rotate(135deg);
}
.genten-modal03::before {
    transform: rotate(170deg);
}
.genten-modal04::before {
    transform: rotate(370deg);
}
.genten-modal05::before {
    transform: rotate(345deg);
}
.genten-modal06::before {
    transform: rotate(45deg);
}
.genten-modal07::before {
    transform: rotate(305deg);
}
.genten-modal08::before {
    transform: rotate(195deg);
}
.genten-modal09::before {
    transform: rotate(230deg);
}
.genten-modal10::before {
    transform: rotate(270deg);
}
/* 回転 */

/* ── GENTEN Framework ── */
.framework-society {
    text-align: center;
}

.vision-ban {
    max-width: 15em;
    margin: 0 auto 30px;
    padding: 5px;
    text-align: center;
    color: #2C8123;
    font-size: 1.5rem;
    font-weight: 600;
    border-radius: 10px;
    border: 3px solid #2C8123;
    background-color: #DDFFE2;
    font-family: var(--font-title);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.vision-ban::after {
    content: "";
    position: absolute;
    bottom: -33px;
    left: 50%;
    width: 6px;
    height: 30px;
    background-color: #2C8123;
}

.framework-vision .fw-wrap {
    display: flex;
    flex-direction: row;
}

.framework-member {
    display: flex;
    justify-content: space-evenly;
    align-items: stretch;
    gap: 15px;
}

.fw-wrap {
    padding: 5px;
    text-align: center;
    border-radius: 8px;
    border: 2px solid #ccc;
    background-color: #fff;
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
}
.fw-wrap:not(.fwVision) {
    margin-top: 30px;
}
.fw-wrap:not(.fwVision)::before {
    content: "";
    position: absolute;
    top: -32px;
    left: 50%;
    width: 1px;
    height: 30px;
    background-color: #707070;
}

.fw-heading {
    font-size: 1.2rem;
    font-weight: 600;
    font-family: var(--font-title);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.fw-photo {
    margin: 10px auto;
    width: 138px;
    height: 138px;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    border: 2px solid #ccc;
}

.fw-photo img {
    position: absolute;
    top: 0;
    left: 0;
    width: auto;
    height: 100%;
    object-fit: cover;
}

.fw-wrap p {
    margin: 0.5em auto;
    font-size: 0.9rem;
}

.fw-concept {
    margin-top: auto;
}
.fw-concept strong {
    font-size: 1.2rem;
    font-family: var(--font-title);
}

.fwVision {
    border-color: var(--fwVision);
    background-color: var(--fwVision-light);
}
.fwVision .fw-photo {
    margin-left: 0;
    margin-right: auto;
    border-color: var(--fwVision);
}
.fwVision .fw-heading {
    color: var(--fwVision);
}

.fwBody,
.fwBody .fw-photo {
    border-color: var(--fwBody);
}
.fwBody .fw-concept {
    background-color: var(--fwBody-light);
}
.fwBody .fw-heading,
.fwBody .fw-concept strong {
    color: var(--fwBody);
}

.fwLife,
.fwLife .fw-photo {
    border-color: var(--fwLife);
}
.fwLife .fw-concept {
    background-color: var(--fwLife-light);
}
.fwLife .fw-heading,
.fwLife .fw-concept strong {
    color: var(--fwLife);
}

.fwMind,
.fwMind .fw-photo {
    border-color: var(--fwMind);
}
.fwMind .fw-concept {
    background-color: var(--fwMind-light);
}
.fwMind .fw-heading,
.fwMind .fw-concept strong {
    color: var(--fwMind);
}

.fwSociety,
.fwSociety .fw-photo {
    border-color: var(--fwSociety);
}
.fwSociety .fw-concept {
    background-color: var(--fwSociety-light);
}
.fwSociety .fw-heading,
.fwSociety .fw-concept strong {
    color: var(--fwSociety);
}

.member-cta {
  text-align: center;
  margin-top: 2rem;
}

.member-cta-btn {
  display: inline-block;
  font-family: var(--font-title);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
  color: #ffffff;
  background: #1a1a1a;
  padding: 1rem 4rem;
  border: 1px solid #1a1a1a;
  transition: background 0.3s, color 0.3s, border-color 0.3s, transform 0.3s;
}

.member-cta-btn:hover {
  background: transparent;
  color: #1a1a1a;
  border-color: #1a1a1a;
  transform: translateY(-2px);
}