@charset "utf-8";
/* CSS Document */
/*─────────────────────────────────────────────
   NANACO JAPAN LLC  © 2025
   AUTHENTIC DIGITAL CREATION
   ALL RIGHTS RESERVED.
─────────────────────────────────────────────*/
/*----------------------
2LPTOPcss
------------------------*/
html{scroll-padding-top: 150px;}
body {font-size: 16px;font-weight: 500;}
header{background-color:#ff0000;padding:1em;}
header div{max-width: 1340px;width:100%;margin:0 auto;display: flex;justify-content: space-between;align-items: center;}
header h1{display: inline-block;}
header h1 img{max-width:292px;width:100%;}
header p{display: inline-block;}
header p img{max-width:670px;width:100%;}

main{padding:3.75rem 1%;background-color:#F6F2EB;}

section{
  max-width: 1340px;
  margin:0 auto 3rem;
}

section.bluelock div{
  background: transparent linear-gradient(118deg, #F7C5DB 0%, #D3E9F9 54%, #FBF9D7 100%) 0% 0% no-repeat padding-box;
  border: 4px solid #3869B2;
  border-radius: 30px;
  padding:60px 120px;
}
section.bluelock div h2{
  font-size:2.1875rem;
  color:#3869B2;
  text-align: center;
  margin:0 auto 1em;
  position: relative;
  width: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

section.bluelock div h2 .icon{
  width: clamp(28px, 6vw, 89px);
}

section.windbreaker div{
  background: #FFFFFF 0% 0% no-repeat padding-box;
  border: 6px solid #D0382C;
  border-radius: 30px;
  padding:60px 120px;
}

section.windbreaker div h2{
  font-size:2.1875rem;
  font-style: italic;
  color:#000;
  text-align: center;
  margin-bottom:1em;
}

section.windbreaker div ul{
  display: flex;
  gap:2rem;
}
section.windbreaker div ul li h3{
  position: relative;
  text-align: center;
  
  color:#FFFFFF;
  
  max-width:357px;
  width:100%;
  height:85px;
  
  display: flex;
  justify-content: center;
  align-items: center;
  
  margin:0 auto 1rem;
  font-size:1.875rem;
  z-index: 0;
}

section.windbreaker div ul li.ice h3{
  color:#FFFFFF;
}

section.windbreaker div ul li.ice h3::before{
  content: "";
  position: absolute;
  inset: 0;
  background: url(../img/ice_frame.png) no-repeat center/cover;
  z-index: -1; /* 背景として背面に配置 */
}

section.windbreaker div ul li.shosei h3{
  color:#000;
}

section.windbreaker div ul li.shosei h3::before{
  content: "";
  position: absolute;
  inset: 0;
  background: url("../img/shosei_frame.png") no-repeat center/cover;
  z-index: -1; /* 背景として背面に配置 */
}




/*footer*/
footer {padding: 1rem 0; font-weight: bold;color:#fff;background-color:#151515;}


/* ===========================
   Responsive overrides only
   （既存CSSの上に追記）
   =========================== */

/* セクション共通：内側余白を可変に */
section.bluelock div,
section.windbreaker div {
  padding: clamp(24px, 5vw, 60px) clamp(16px, 7vw, 120px);
  border-radius: clamp(16px, 3vw, 30px);
}

/* 見出し h2 本文サイズを可変に（中央寄せは既存のまま） */
section.bluelock div h2,
section.windbreaker div h2 {
  font-size: clamp(1.5rem, 2.6vw, 2.1875rem);
}

/* WIND BREAKER のカード並び：間隔と折返しを最適化 */
section.windbreaker div ul {
  display: flex;          /* 既存維持 */
  gap: clamp(12px, 2vw, 32px);
  flex-wrap: wrap;
}

/* 2カラム→1カラム落ちの現実解 */

  section.windbreaker div ul li {
    flex: 1 1 calc(50% - 1rem);
    max-width: 520px;
  }

@media (max-width: 600px) {
  
  header h1 img{
    width:80%;
  }
  
  header div{
    flex-wrap: wrap;
    justify-content: center;
  }
  
  
  section.windbreaker div ul li {
    flex: 1 1 100%;
    max-width: none;
  }
}

/* h3（リボン見出し）：高さ＆文字サイズを可変にして中央維持 */
section.windbreaker div ul li h3 {
  height: clamp(56px, 10vw, 85px);
  font-size: clamp(1.125rem, 4vw, 1.875rem);
}

/* 擬似背景の収まりを“contain”に寄せ、切れを減らす（必要なら） */
/* ※ cover のままが良ければ下2行は削除 */
section.windbreaker div ul li.ice h3::before,
section.windbreaker div ul li.shosei h3::before {
  background-size: contain;
}

/* 画像の段差防止（安全側） */
section.windbreaker div ul li p { margin: 0; }
section.windbreaker div ul li p img { display: block; width: 100%; height: auto; }