:root {
      --accent: #00a35a;
      --accent-light: #e5f7ef;
      --accent-dark: #008047;
      --bg-light: #f7f7f7;
      --text-main: #222;
      --text-muted: #666;
      --border-color: #ddd;
      --max-width: 1060px;
      --radius-lg: 12px;
      --shadow-soft: 0 8px 20px rgba(0, 0, 0, 0.1);
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      color: var(--text-main);
      background: #fff;
      line-height: 1.6;
    }

    a {
      color: var(--accent);
      text-decoration: none;
    }
    .fc-page {
      padding: 40px 16px 80px;
      background: #fff;
    }

    .fc-container {
      max-width: var(--max-width);
      margin: 0 auto;
    }
    .fc-hero {
      border-radius: var(--radius-lg);
      padding: 24px 20px;
      box-shadow: var(--shadow-soft);
      margin-bottom: 32px;
      border: 1px solid var(--border-color);
    }

    .fc-hero-inner {
      display: flex;
      /* gap: 10px; */
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
    }


    .fc-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 4px 10px;
      border-radius: 999px;
      background: #fff;
      font-size: 12px;
      color: var(--accent-dark);
      margin-bottom: 12px;
      font-weight: 600;
    }

    .fc-badge-dot {
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: var(--accent);
    }

    .fc-hero-main{
      width: 52%;
    }
    .fc-hero-title {
      font-size: clamp(18px, 3.5vw, 28px);
      line-height: 1.4;
      font-weight: 700;
      color: #f0718e;
      position: relative;
      width: fit-content;
      margin: 8px auto;

    }
    .fc-hero-title::before {
      content: '';
      display: block;
      width: clamp(30px, 7vw, 40px);
      height: clamp(22px, 5vw, 40px);
      background-image: url(../src/nikochan.png);
      background-size: contain;
      background-repeat: no-repeat;
      position: absolute;
      left: -40px;
      top: 0px;
      background-position-x: center;
      background-position-y: center;
    }
    @media (max-width: 550px) {
      .fc-hero-title::before {
        left: -7vw;
        height: clamp(22px, 5vw, 40px);
      }
      
    }
    .fc-hero-title_top {
      font-size: clamp(20px, 4.5vw, 40px);
      line-height: 1.4;
      margin-bottom: 14px;
      margin-top: 15px;
      font-weight: bold;
      color: var(--accent-dark);
      text-align: center;
    }
    .fc-hero-inner_text {
        padding: 1rem;
        margin-top: 1rem;
        width: 100%;
        background-color: #f1f1f1;
        border-radius: var(--radius-lg);
    }
    .fc-hero-sub {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      /* font-size: 14px;
      color: var(--text-muted);
      margin-bottom: 16px; */
    }
    .fc-hero-sub li {
      list-style: disc !important;
      margin-left: 22px;
    }

    .fc-hero-highlight {
      align-items: baseline;
      gap: 6px;
      padding: 6px 10px;
      border-radius: 8px;
      background: #fff;
      font-size: 14px;
      margin-bottom: 16px;
      display: flex;
      flex-wrap: wrap;
    }

    .fc-hero-highlight strong {
      font-size: 22px;
      color: var(--accent-dark);
    }

    .fc-hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      justify-content: space-between;
    }

    .fc-btn-primary,
    .fc-btn-secondary {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 10px 18px;
      border-radius: 999px;
      font-size: 14px;
      font-weight: 600;
      border: none;
      cursor: pointer;
      transition: transform 0.08s ease, box-shadow 0.08s ease, background 0.08s ease;
      text-decoration: none;
      white-space: nowrap;
      width: 165px;
    }
    .fc-btn-secondary.up{
      width: 250px;
      position: relative;
    }
    .fc-btn-secondary.up::before{
      display: block;
      content: "";
      position: absolute;
      background-image: url(../../images/btn_arrow.png);
      background-size: 26px auto;
      background-repeat: no-repeat;
      width: 26px;
      height: 26px;
      -webkit-transform: translate(0, -50%);
      transform: translate(0, -50%);
      right: 12px;
      background-position: 0 -26px !important;
      transform: rotate(0deg);
    }

    .fc-btn-primary {
      background: #00a35a;
      color: #fff !important;
      box-shadow: 0 4px 10px rgba(0, 163, 90, 0.3);
    }

    .fc-btn-primary:hover {
      background: #008047;
      transform: translateY(-1px);
      box-shadow: 0 6px 14px rgba(0, 163, 90, 0.35);
    }

    .fc-btn-secondary {
      background: #fff;
      color: #008047;
      border: 1px solid #00a35a;
    }

    .fc-btn-secondary:hover {
      background: #f7f7f7;
      transform: translateY(-1px);
    }
    .fc-dual-section {
      margin-bottom: 40px;
    }

    .fc-section-title {
      font-size: clamp(16px, 3.5vw, 20px);
      font-weight: 700;
      margin-bottom: 16px;
      background-color: #e8f9d4;
      padding-left: 16px;
    }
    .fc-section-title::before {
        content: "";
        display: inline-block;
        width: .7em;
        height: .7em;
        margin-right: 8px;
        background-color: #0ba35c;
    }
    .fc-section-lead {
      font-size: 14px;
      color: var(--text-muted);
      margin-bottom: 20px;
    }

    .fc-dual-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 16px;
    }

    .fc-card {
      border-radius: 12px;
      border: 1px solid var(--border-color);
      padding: 16px 16px 14px;
      background: #fff;
    }

    .fc-card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 8px;
      flex-wrap: wrap;
    }

    .fc-card-label {
      font-size: 13px;
      font-weight: 700;
      color: #008047;
    }

    .fc-chip {
      font-size: 11px;
      padding: 2px 8px;
      border-radius: 999px;
      background: #e5f7ef;
      color: #008047;
    }

    .fc-card-main {
      font-size: 22px;
      font-weight: 700;
      margin-bottom: 4px;
    }

    .fc-card-sub {
      font-size: 12px;
      color: var(--text-muted);
      margin-bottom: 10px;
    }
    .fc-flow {
      margin-bottom: 40px;
    }

    .fc-tabs {
      display: inline-flex;
      border-radius: 999px;
      border: 1px solid var(--border-color);
      overflow: hidden;
      margin-bottom: 16px;
      background: #fff;
    }

    .fc-tab {
      padding: 6px 16px;
      font-size: 13px;
      border: none;
      background: transparent;
      cursor: pointer;
      white-space: nowrap;
    }

    .fc-tab.is-active {
      background: #00a35a;
      color: #fff;
    }

    .fc-steps {
      display: grid;
      grid-template-columns: repeat(1, minmax(0, 1fr));
      gap: 12px;
    }

    .fc-step {
      border-radius: 12px;
      border: 1px solid var(--border-color);
      padding: 14px 12px;
      background: #f7f7f7;
      position: relative;
    }

    .fc-step-badge {
      font-size: 11px;
      font-weight: 700;
      color: #fff;
      background: #00a35a;
      border-radius: 999px;
      padding: 2px 8px;
      display: inline-block;
      margin-bottom: 6px;
    }

    .fc-step-title {
      font-size: 14px;
      font-weight: 700;
      margin-bottom: 4px;
    }

    .fc-step-text {
      font-size: 14px;
      color: var(--text-muted);
      margin-bottom: 10px;
    }
    .fc-flow-note {
      font-size: 11px;
      color: var(--text-muted);
      margin-top: 8px;
    }

    .fc-flow-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 18px;
    }

    .fc-panel {
      display: none;
    }

    .fc-panel.is-active {
      display: grid;
    }

    .fc-notes {
      border-radius: 12px;
      border: 1px solid var(--border-color);
      padding: 18px 16px;
      background: #fff;
    }

    .fc-notes-caption {
      font-size: 11px;
      color: var(--text-muted);
    }
    details.fc-note {
      border-top: 1px solid var(--border-color);
      padding: 10px 0;
    }
    details.fc-note:first-of-type { border-top: none; }
    details.fc-note summary {
      list-style: none;
      cursor: pointer;
      font-size: 13px;
      font-weight: 600;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    details.fc-note summary::-webkit-details-marker {
      display: none;
    }

    .fc-btn-secondary.up::before {

      transition: transform 0.15s ease;
    }

    details[open] .fc-btn-secondary.up::before {
      transform: rotate(90deg);
    }

    .fc-note-body {
      font-size: 12px;
      color: var(--text-muted);
      padding-top: 6px;
      line-height: 1.7;
    }

    .fc-note-body ul {
      padding-left: 1.1em;
    }

    .fc-note-body li {
      margin-bottom: 4px;
    }
    .img_container {
      /* width: 100%;   */
      max-width: 500px;
      width: 47%;
    }

    @media (max-width: 880px) {
      .fc-hero-inner { 
        
       }
      .fc-dual-grid { grid-template-columns: minmax(0, 1fr); }
      .fc-steps { grid-template-columns: minmax(0, 1fr); }
    }

    @media (max-width: 768px) {
    /* @media (max-width: 600px) { */
      .fc-hero-inner { 
        flex-direction: column;;
      }
      .img_container {
        width: 100%;
        max-width: 100%;
      }
      .fc-hero-main{
        width: 100%;
      }
    }


.fc-modal-close {
  position: absolute;
  top: 20px;
  right: 40px;
  color: #fff;
  font-size: 50px;
  font-weight: bold;
  cursor: pointer;
  z-index: 10000;
}
.fc-modal-close:hover {
  color: #ccc;
}
.fc-modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.9);
  cursor: pointer;
}
.fc-modal img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 90%;
  max-height: 90%;
}




/* ここから ============================================ */
    .fc-hero-title::before {
      content: '';
      display: inline-block;
      width: 1.5em;
      height: 1.5em;
      background-image: url(../src/nikochan.png);
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      vertical-align: middle;
      margin-bottom: .25em;
    }

    .period {
      color: red;
      font-weight: bold;
      font-size: 16px;
      padding-left: 16px;
    }

    .period .new-line {
      display: none;
    }

    @media screen and (max-width: 550px) {
    .period .new-line {
      display: block;
      }
    }

    .fc-hero-sub li {
      margin-left: 16px;
    }

    .fc-btn-secondary {
      padding: 10px 16px;
    }

    .fc-btn-secondary span {
      font-size: 14px;
    }

    section:nth-child(1),
    section:nth-child(2),
    section:nth-child(3),
    section:nth-child(4) {
      padding-left: 16px;
      padding-right: 16px;
    }

    .fc-section-lead {
      padding-left: 32px;
      margin-bottom: 16px;
    }

    section:nth-child(4) .fc-section-lead  {
      margin-bottom: 0;
    }

    .fc-tabs {
      margin-left: 32px;
    }

    .fc-tab {
      font-size: 14px;
    }

    .fc-step {
      padding-left: 32px;
    }

    .fc-step-badge {
      font-size: 14px;
    }

    .fc-step-text {
      margin-bottom: 0;
    }

    .fc-flow-note {
      padding-left: 32px;
      font-size: 14px;
    }

    .fc-flow-actions {
      padding-left: 32px;
    }

    .fc-note {
      margin-left: 32px;
    }

    .fc-note-body ul {
      padding-left: 16px;
    }

    .fc-note-body li {
      list-style: disc;
      margin-left: 16px;
      font-size: 14px;
    }

    section:nth-child(4) .img_container {
      margin-left: 32px;
      margin-top: 16px;
    }

    @media (max-width: 768px) {
      section:nth-child(4) .img_container {
        width: calc(100% - 32px);
      }
    }

/* ここまで ============================================ */


.fc-zoomable_container {
    width: 70vw;      
    height: auto;      
    overflow: hidden;   
    position: relative; 
    max-width: 450px;
}

.fc-zoomable {
    width: 100vw;
    height: 100%;
    object-fit: cover;     
    object-position: center; 
    display: block;       
    max-width: 550px;
}