@charset "utf-8";
/* CSS Document */
/* =====================================================
STRUCTURE
===================================================== */

.nx-structure-section{
  padding:80px 0;
}

.nx-structure-inner{
  width:90%;
  max-width:1100px;
  margin:auto;
}

/* =====================================================
FV
===================================================== */

.nx-structure-fv{
  height:60vh;
  position:relative;
  overflow:hidden;
  color:#fff;
}

/* =========================
画像
========================= */

.nx-structure-fv-image{
  position:absolute;
  inset:0;
}

.nx-structure-fv-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* =========================
黒overlay
========================= */

.nx-structure-fv::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.4);
  z-index:1;
}

/* =========================
テキスト
========================= */

.nx-structure-fv-inner{
  position:relative;
  z-index:2;
  width:90%;
  max-width:1100px;
  margin:auto;
  padding-top:180px;
}

.nx-structure-sub{
  font-size:12px;
  letter-spacing:2px;
  margin-bottom:15px;
}

.nx-structure-fv h1{
  font-size:42px;
  line-height:1.5;
  margin-bottom:20px;
  font-weight:normal;
}

.nx-structure-fv-text{
  font-size:16px;
  line-height:2;
}

/* =====================================================
SP
===================================================== */

@media screen and (max-width:768px){

  .nx-structure-fv{
    height:50vh;
  }

  .nx-structure-fv-inner{
    padding-top:140px;
  }

  .nx-structure-fv h1{
    font-size:32px;
  }

  .nx-structure-fv-text{
    font-size:14px;
    line-height:2;
  }

}

/* =====================================================
TITLE
===================================================== */

.nx-structure-title{
  margin-bottom:40px;
}

.nx-structure-title p{
  font-size:11px;
  color:#777;
  letter-spacing:2px;
  margin-bottom:10px;
}

.nx-structure-title h2{
  font-size:32px;
  line-height:1.6;
  font-weight:normal;
  color:#222;
}

/* =====================================================
INTRO
===================================================== */

.nx-structure-intro-grid{
  display:grid;
  grid-template-columns:1fr 420px;
  gap:50px;
  align-items:center;
}

.nx-structure-intro-content h2{
  font-size:32px;
  margin-bottom:25px;
  font-weight:normal;
  line-height:1.6;
  color:#222;
}

.nx-structure-intro-content p{
  font-size:15px;
  line-height:2.2;
  margin-bottom:18px;
  color:#555;
}

.nx-structure-intro-image img{
  width:100%;
  display:block;
}

/* =====================================================
FEATURE
===================================================== */

.nx-structure-feature-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:24px;
  margin-top:20px;
}

.nx-structure-feature-box{
  border:1px solid #d9d9d9;
  background:#fff;
  padding:40px 35px;
  position:relative;
}

.nx-structure-feature-box::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:4px;
  background:#2d67b2;
}

.nx-structure-feature-box h3{
  font-size:28px;
  margin-bottom:20px;
  padding-bottom:15px;
  border-bottom:1px solid #ddd;
  font-weight:normal;
  color:#222;
  line-height:1.5;
}

.nx-structure-feature-box p{
  font-size:15px;
  line-height:2.1;
  color:#555;
}

/* =====================================================
TEXT
===================================================== */

.nx-structure-text p{
  font-size:15px;
  line-height:2.2;
  margin-bottom:20px;
  color:#555;
}

/* =====================================================
EARTHQUAKE GRADE
===================================================== */

.nx-grade-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  margin-top:45px;
}

.nx-grade-box{
  border:1px solid #d9d9d9;
  background:#fff;
  padding:40px 30px;
  position:relative;
}

.nx-grade-box h3{
  font-size:38px;
  margin-bottom:22px;
  padding-bottom:15px;
  border-bottom:1px solid #ddd;
  font-weight:normal;
  color:#222;
}

.nx-grade-sub{
  font-size:16px;
  line-height:1.8;
  margin-bottom:20px;
  color:#222;
}

.nx-grade-box p{
  font-size:15px;
  line-height:2;
  color:#555;
}

/* =====================================================
等級3
===================================================== */

.nx-grade-box-active{
  border:2px solid #2d67b2;
  background:#f8fbff;
}

.nx-grade-box-active::before{
  content:"STANDARD";
  position:absolute;
  top:-14px;
  right:20px;
  background:#2d67b2;
  color:#fff;
  font-size:11px;
  letter-spacing:1px;
  padding:6px 12px;
}

.nx-grade-box-active h3{
  color:#2d67b2;
  border-bottom:1px solid #b8cde8;
}

.nx-grade-box-active .nx-grade-sub{
  color:#2d67b2;
}

/* =====================================================
NOTE
===================================================== */

.nx-grade-bottom{
  display:grid;
  grid-template-columns:1fr 420px;
  gap:40px;
  align-items:center;
  margin-top:40px;
}

.nx-grade-note{
  border:1px solid #d9d9d9;
  background:#fafafa;
  padding:40px;
  position:relative;
}

.nx-grade-note::before{
  content:"POINT";
  position:absolute;
  top:-14px;
  left:25px;
  background:#2d67b2;
  color:#fff;
  font-size:11px;
  letter-spacing:1px;
  padding:6px 12px;
}

.nx-grade-note h4{
  font-size:26px;
  line-height:1.8;
  margin-bottom:20px;
  font-weight:normal;
  color:#2d67b2;
}

.nx-grade-note p{
  font-size:15px;
  line-height:2.2;
  color:#555;
}

/* =====================================================
IMAGE
===================================================== */

.nx-grade-image img{
  width:100%;
  display:block;
}

/* =====================================================
SP
===================================================== */

@media screen and (max-width:768px){

  .nx-structure-section{
    padding:60px 0;
  }

  .nx-structure-fv{
    height:50vh;
  }

  .nx-structure-fv-inner{
    padding-top:140px;
  }

  .nx-structure-fv h1{
    font-size:32px;
  }

  .nx-structure-fv-text{
    font-size:14px;
    line-height:2;
  }

  .nx-structure-title h2,
  .nx-structure-intro-content h2{
    font-size:26px;
  }

  .nx-structure-intro-grid,
  .nx-structure-feature-grid,
  .nx-grade-grid,
  .nx-grade-bottom{
    grid-template-columns:1fr;
    gap:20px;
  }

  .nx-structure-feature-box,
  .nx-grade-box,
  .nx-grade-note{
    padding:28px 24px;
  }

  .nx-structure-feature-box h3{
    font-size:24px;
  }

  .nx-grade-box h3{
    font-size:32px;
  }

  .nx-grade-note h4{
    font-size:22px;
  }

  .nx-structure-intro-content p,
  .nx-structure-feature-box p,
  .nx-grade-box p,
  .nx-grade-note p,
  .nx-structure-text p{
    font-size:14px;
    line-height:2;
  }

}
/* =====================================================
STRUCTURE CHECK
===================================================== */

.nx-check-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  margin-top:40px;
}

.nx-check-box{
  border:1px solid #d9d9d9;
  background:#fff;
  padding:35px 30px;
  position:relative;
}

.nx-check-number{
  font-size:13px;
  letter-spacing:2px;
  color:#2d67b2;
  margin-bottom:18px;
}

.nx-check-box h3{
  font-size:24px;
  line-height:1.6;
  margin-bottom:18px;
  padding-bottom:14px;
  border-bottom:1px solid #ddd;
  font-weight:normal;
  color:#222;
}

.nx-check-box p{
  font-size:15px;
  line-height:2;
  color:#555;
}

/* =========================
最後だけ少し強調
========================= */

.nx-check-box-last{
  background:#f8fbff;
  border:2px solid #2d67b2;
}

.nx-check-box-last h3{
  color:#2d67b2;
  border-bottom:1px solid #b8cde8;
}

/* =====================================================
SP
===================================================== */

@media screen and (max-width:768px){

  .nx-check-grid{
    grid-template-columns:1fr;
    gap:18px;
  }

  .nx-check-box{
    padding:28px 24px;
  }

  .nx-check-box h3{
    font-size:22px;
  }

  .nx-check-box p{
    font-size:14px;
    line-height:2;
  }

}

.nx-structure-title h2{
  font-size:36px;
  line-height:1.5;
  color:#222;
  position:relative;
  padding-bottom:18px;
}

.nx-structure-title h2::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:60px;
  height:2px;
  background:#2d67b2;
}
.nx-check-number{
  font-size:26px;
  font-weight:bold;
  color:#dfe9f6;
  position:absolute;
  top:20px;
  right:20px;
  line-height:1;
}