/* 基本設定 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;

}

body {
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #000000;
}

p {
line-height: 1.8; 
margin-bottom: 1.5em; 
text-align: left; 
 -webkit-text-size-adjust: 100%;
}

.red { color:red; }
.blue { color:blue; }
.navy { color:navy; }
.bold { font-weight:bold; }
.boldc { font-weight:bold; text-align: center;}
.italic { font-style:italic; }
.blueb { color:blue; font-weight:bold; }
.bluec { color:blue; font-weight:bold; font-size:2em;}
.redb { color:red; font-weight:bold; }
.reda { color:red; font-weight:bold; background-color: #FFFF66; }
.redc { color:red; font-weight:bold; font-size:2em;}
.1 { font-size:1em; !important;}

.center1 {text-align: center;
 justify-content: center;

}

.small {
text-align: left !important; 
font-size: 0.8em;
}

.center {
text-align: left !important; 
}

.center3 {
display: flex;
  flex-direction: column; /* 縦に並べる（これで改行と同じ効果） */
  align-items: center;    /* 左右の中央 */
  justify-content: center;/* 上下の中央（高さがある場合） */
  text-align: center;     /* 中の文字も中央へ */
  width: 100%;            /* 横幅いっぱい使う */
    margin-bottom: 1em;
}

.center2 {
background-color: #89C3DD;
    
    /* 物理的な上限を強制 */
width: 100%; 
    max-width: 640px !important; 
    
    /* 中央寄せの強制 */
    margin-left: auto !important;
    margin-right: auto !important;
    
    /* 内部のレイアウト固定 */
    display: block !important;
    overflow: hidden !important; /* はみ出たものを物理的にカット */
    box-sizing: border-box;
}

.center4 {
max-width: 640px;     /* 横幅の最大値を制限 */
    width: 100%;          /* スマホなど640px以下の時は横いっぱいに広げる */
    
    /* これが重要！箱そのものを真ん中に寄せる */
    margin-left: auto !important;
    margin-right: auto !important;

    /* もし「中にある画像」も真ん中にしたいなら追加 */
    display: block;       
    text-align: center;
}

.left {
  text-align: left !important; /* !importantで他の中央設定を無視させる */
}

.container {
    width: 100%;
    max-width: 640px; /* スマホ・タブレット閲覧を最適化 */
    margin: 0 auto;
    background-color: #FFFFFF;
    padding: 15px;
}

.container2 {
    padding: 15px;
    background-color: #FFFFFF;
/* 1. コンテナ自体の幅を強制的に絞る（これがないと中央に寄れません） */
  width: 90% !important;
  max-width: 600px !important;

  /* 2. 左右の余白を強制的に「自動」にする */
  margin-left: auto !important;
  margin-right: auto !important;
  display: block !important;

  /* 3. 中身の文字だけは意地でも左に寄せる */
  text-align: left !important;
}


/* メインビジュアル */
.main-visual {

    color: #fff;
    text-align: center;
}

.catch-copy {
    display: inline-block;
    background: #fff000;
    color: #cc0000;
    font-weight: bold;
    padding: 5px 15px;
    border-radius: 50px;
    margin-bottom: 15px;
    font-size: 1rem;
}


.product-image img {
    max-width: 100%;
    height: auto;
    filter: drop-shadow(0 10px 15px rgba(0,0,0,0.2));
}


img {
  max-width: 100%; /* 親要素の幅を超えない */
  height: auto;    /* 縦横比を維持する */
}

        h1 { text-align: center; font-size: 1.2em;     max-width: 640px; justify-content: center; display: flex; align-items: center; margin: 0 auto;}
        h2 { text-align: left ;

  /* 箱自体を左へ（Flexbox対策） */
  margin-right: auto !important;
  margin-left: 0 !important;

  /* 横幅を無理やり広げる */
  display: block !important;
  width: 100% !important;

  /* 万が一の浮遊解除 */

  clear: both !important; background-color: #e6f2ff; color: #00129e; padding: 5px 5px; border-left: 5px solid #0050a0; margin-top: 5px; margin-bottom: 5px; font-size: 1.2em; border-radius: 5px; }
        h3 { text-align: left; background-color: #e6f2ff; padding: 5px 5px; border-left: 5px margin-top: 5px; margin-bottom: 5px;  border-radius: 5px; }
        h4 { background-color: #e6f2ff; color: #1a90ff; padding: 5px 5px; border-left: 5px margin-top: 5px; margin-bottom: 5px; font-size: 1.2em; }

a:link { color: #0000ff;   font-weight:bold; }
a:visited { color: #000080;   font-weight:bold;}  
a:hover { color: #ff0000;   font-weight:bold;}
a:active { color: #ff8000;   font-weight:bold;}  

/* --- ここから修正版 --- */

.anim-box.poyopoyo {
    margin: 20px 0; 
    animation: poyopoyo 2s ease-out infinite;
    opacity: 1;

    margin-left: auto !important;
    margin-right: auto !important;

    /* もし「中にある画像」も真ん中にしたいなら追加 */
    display: block;       
    text-align: center;
}

/* アニメーションの閉じカッコを確実に閉じる */
@keyframes poyopoyo {
  0%, 40%, 60%, 80% {
    transform: scale(1.0);
  }
  50%, 70% {
    transform: scale(0.98);
  }
} 

.btn-entry {
    display: block !important;
    /* 幅を少し広げて、タップしやすくする */
    width: 90% !important; 
    max-width: 480px !important;
    margin: 20px auto !important;

    /* 文字周りの余白を増やして窮屈さを解消 */
    padding: 18px 5px !important; 
    font-size: 21px !important; /* 24pxから微減して余白を確保 */
    line-height: 1.3 !important;

    /* 装飾系（現状の良さを維持） */
    background: linear-gradient(to bottom, #44cc44 0%, #228822 100%) !important;
    color: white !important;
    border-radius: 50px !important;
    border: 3px solid white !important;
    box-shadow: 0 5px 0 #145514 !important;
    text-decoration: none !important;
    font-weight: bold !important;
    box-sizing: border-box !important;
}
.btn-entry:hover {
    opacity: 0.9;
    color: white;
}

.btn-entry:active {
    transform: translateY(3px);
    box-shadow: 0 2px 0 #145514;
}

/* --- ここまで修正版（これ以降に<div>などは書かないでください） --- */