@charset "utf-8";

/* ==============================================================
   mic エイジングコンテスト2026　特設ページ用CSS
   ベース：2023_hippocket-award.css
   前提：サイト共通CSSで html { font-size:62.5%; }（1rem = 10px）
   色をまとめて変えたい場合は :root の変数を書き換えてください。
============================================================== */

:root {
  --ac-text:   #707070;  /* 基本文字色・帯 */
  --ac-sub:    #9e9e9e;  /* ボタン・見出し帯（薄） */
  --ac-bg:     #d9d9d9;  /* セクション背景 */
  --ac-white:  #fff;
  --ac-black:  #000;
  --ac-req:    #e53935;  /* 必須ラベル */
  --ac-line:   #06c755;  /* LINEボタン */
  --ac-link:   #2a6df5;  /* Q&Aの回答 */
}

/*==============================
common
==============================*/
.aging-contest * { font-family:YuGothic,"游ゴシック","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック",sans-serif; }
.aging-contest * { color:var(--ac-text); }
.aging-contest img { max-width:100%; height:auto; vertical-align:bottom; }
.aging-contest section { scroll-margin-top:8rem; } /* 固定ヘッダー分のアンカー位置調整 */

.aging-contest { padding-top:10rem; } /* ★固定ヘッダーとの重なり回避（PC）：パンくず含めページ全体をヘッダー高さ分下げる。ヘッダー高さが変わったらこの値を調整 */
.aging-contest .inner { max-width:124rem; padding:0 2rem; width:100%; margin:0 auto; }

.aging-contest .main-ttl { font-size:2.8rem; font-weight:bold; border-left:solid 5px var(--ac-text); padding-left:2rem; line-height:1.5; }
.aging-contest .obi { font-size:2.8rem; text-align:center; background:var(--ac-text); color:var(--ac-white); padding:1rem 2rem; line-height:1.4; }
.aging-contest .obi * { color:var(--ac-white); }

.aging-contest .icon { text-align:center; margin-bottom:5rem; }
.aging-contest .icon img { max-width:10rem; }

.aging-contest .cont { margin-top:3rem; display:flex; justify-content:space-between; align-items:flex-start; }
.aging-contest .cont > div { width:48%; }
.aging-contest .cont .cont-tx p { margin:3rem 0; }
.aging-contest .cont .main-ttl { font-size:2.4rem; }

.aging-contest .btn { max-width:35rem; width:100%; margin:0 auto; }
.aging-contest .btn a {
  display:block;
  line-height:2;
  text-align:center;
  background:var(--ac-sub);
  color:var(--ac-white);
  font-weight:bold;
  font-size:2rem;
  border-radius:5px;
  padding:.5rem 1rem;
}
.aging-contest .btn-line a { background:var(--ac-line); }

.aging-contest .sp-only { display:none; }
.aging-contest a { transition:all .4s ease-out; }
.aging-contest a:hover { opacity:.6; }
.aging-contest a:focus-visible,
.aging-contest input:focus-visible,
.aging-contest textarea:focus-visible { outline:3px solid var(--ac-link); outline-offset:2px; }

@media (prefers-reduced-motion:reduce) {
  .aging-contest a { transition:none; }
}

@media screen and (max-width:600px){
  .aging-contest .sp-only { display:block; }
  .aging-contest br.sp-only { display:inline; }
}

/*--------------------------
mv
--------------------------*/
#mv { margin-top:0; padding-top:0; } /* ★ヘッダー分の余白は .aging-contest 側で確保 */
#mv picture { display:block; }
/* ★MVはコンテンツ列より外へ広げてビューポート幅で表示する。
   .mv-area に max-width を付けると左へずれるので付けないこと（幅の上限は下の img 側でかける）。
   100vw はスクロールバー幅を含むため、このページに限り body 側で横方向のはみ出しを抑止する。 */
body { overflow-x:clip; }
#mv .mv-area { text-align:center; width:100vw; margin-left:calc(50% - 50vw); }
/* ★画像の表示上限は1600px。実寸2000pxなので大画面でも劣化しない。数値を変えれば見え方を調整できる */
#mv picture img { display:block; width:100%; max-width:160rem; margin:0 auto; height:auto!important; max-height:none!important; object-fit:contain!important; }

/*--------------------------
cont01 導入・MENU
--------------------------*/
#cont01 { margin-top:5rem; }
#cont01 .youtube { margin:5rem 0; }
#cont01 .youtube .wrap { max-width:100%; margin:0 auto; aspect-ratio:16 / 9; }
#cont01 .youtube .wrap iframe { width:100%; height:100%; }
#cont01 .youtube .wrap img { width:100%; height:100%; object-fit:cover; }

#cont01 .menu { margin-top:3rem; }
#cont01 .menu h2 { font-size:3rem; font-weight:bold; text-align:center; }
#cont01 .menu ul { display:flex; max-width:80%; width:100%; margin:1rem auto 5rem; }
#cont01 .menu ul li { flex-grow:1; }
#cont01 .menu ul li a { display:block; text-align:center; }
#cont01 .menu ul li img { border-radius:50%; max-width:10rem; }
#cont01 .menu ul li p { font-weight:bold; text-align:center; }

/*--------------------------
cont02 賞品
--------------------------*/
#cont02 { margin-top:5rem; }
#cont02 .prize { display:flex; justify-content:space-between; max-width:100%; margin:5rem auto; } /* ★3カラム化 */
#cont02 .prize li { width:32%; }
#cont02 .prize li .ttl {
  background:var(--ac-sub);
  color:var(--ac-white);
  font-size:2.4rem;
  font-weight:bold;
  text-align:center;
  margin-bottom:2rem;
  line-height:3;
}
#cont02 .prize li .img { margin-bottom:2rem; }

/*--------------------------
cont03 エイジングとは
--------------------------*/
#cont03 { background:var(--ac-bg); margin-top:5rem; padding-bottom:1px; }
#cont03 .inner { padding-top:1rem; }
#cont03 .youtube { margin:5rem 0; }
#cont03 .youtube p { font-weight:bold; text-align:center; font-size:2rem; }
#cont03 .youtube .wrap { max-width:80%; margin:1rem auto 0; aspect-ratio:16 / 9; }
#cont03 .youtube .wrap iframe { width:100%; height:100%; }
#cont03 .youtube .wrap img { width:100%; height:100%; object-fit:cover; }
#cont03 .icon { padding-bottom:5rem; margin-bottom:0; }

/*--------------------------
cont04 応募方法
--------------------------*/
#cont04 { margin-top:0; }
#cont04 .main-ttl { margin-top:5rem; }
#cont04 ul.step { display:flex; justify-content:space-between; margin-top:3rem; }
#cont04 ul.step li { width:30%; }
#cont04 ul.step li .ttl-area { display:flex; flex-direction:column; max-height:12rem; height:100%; }
#cont04 ul.step li .ttl-area .step-img { text-align:center; }
#cont04 ul.step li .ttl-area .step-img img { max-height:3rem; width:auto; }
#cont04 ul.step li .ttl-area .ttl { text-align:center; margin:auto 0; font-size:2rem; font-weight:bold; }
#cont04 ul.step li .img { margin:1rem 0; }
#cont04 ul.step li .bold { font-weight:bold; }

#cont04 .c2 .read { margin:3rem 0; }
#cont04 .c2 .award-list { margin-bottom:5rem; }
#cont04 .c2 .award-list li { font-weight:bold; text-indent:-1em; padding-left:1em; line-height:1.8; }
#cont04 .c2 .award-list li:nth-of-type(n+2) { margin-top:1rem; }
#cont04 .c2 .sponsor-note { font-size:1.4rem; margin:-3rem 0 5rem; text-indent:-1em; padding-left:1em; }
#cont04 .c2 .twitter { margin-bottom:5rem; }
#cont04 .c2 .twitter .ttl { text-align:center; font-size:2.8rem; font-weight:bold; margin-bottom:2rem; }
#cont04 .c2 .twitter .sns { text-align:center; }
#cont04 .c2 .twitter .swipe-note { text-align:center; font-size:1.4rem; margin-top:1rem; }
#cont04 .c2 .to-form { margin-bottom:10rem; }

/*--------------------------
cont05 店頭サポート
--------------------------*/
#cont05 { margin-top:5rem; }
#cont05 .inner { padding-top:1rem; }
#cont05 .cont { margin-bottom:5rem; }

/*--------------------------
form 応募フォーム
--------------------------*/
#form { margin-top:5rem; }
#form h3 { margin-top:3rem; }
#form .read { margin:2rem 0; }
#form table { margin:3rem auto 0; max-width:90rem; width:100%; border-collapse:separate; border-spacing:0 2rem; }
#form th { text-align:left; font-size:2rem; width:30%; vertical-align:middle; }
#form th:after {
  content:"任意";
  background:#f5f5f5;
  color:var(--ac-sub);
  padding:0.25rem 0.4rem;
  border-radius:0.4rem;
  margin:0 1rem;
  vertical-align:middle;
  font-size:1.2rem;
}
#form th.required:after { content:"必須"; background:var(--ac-req); color:var(--ac-white); }
#form td { width:70%; font-size:2rem; vertical-align:middle; }
#form input[type="text"],
#form input[type="tel"],
#form input[type="email"],
#form textarea { width:100%; padding:1rem; border:solid 1px var(--ac-sub); border-radius:4px; font-size:1.6rem; background:var(--ac-white); }
#form textarea { resize:vertical; line-height:1.6; }
#form input[type="file"] { font-size:1.6rem; }
#form .agree { display:flex; align-items:flex-start; gap:1rem; font-size:1.6rem; line-height:1.6; cursor:pointer; }
#form .agree input[type="checkbox"] { width:2rem; height:2rem; margin-top:.2rem; flex-shrink:0; }
#form .file-tx { text-align:center; color:var(--ac-black); margin-top:1rem; }
#form .form-cap { font-size:1.4rem; text-align:center; margin-top:2rem; line-height:1.6; }
#form .submit-area { display:flex; justify-content:space-between; max-width:35rem; width:100%; margin:3rem auto 0; }
#form .submit-area input {
  width:48%;
  font-size:2rem;
  font-weight:bold;
  border-radius:5px;
  line-height:2;
  cursor:pointer;
}
#form .submit-area input[type="submit"] { background:var(--ac-sub); color:var(--ac-white); border:none; }
#form .submit-area input[type="reset"] { background:var(--ac-white); color:var(--ac-sub); border:solid 1px var(--ac-sub); }
#form .line-cont { margin-top:8rem; align-items:center; }

/*--------------------------
day 日程・SNS
--------------------------*/
#day { margin-top:10rem; }
#day .day-ttl {
  text-align:center;
  max-width:30rem;
  width:100%;
  margin:0 auto;
  background:var(--ac-sub);
  color:var(--ac-white);
  font-size:2rem;
  font-weight:bold;
  line-height:3;
}
#day .day-tx { text-align:center; font-size:3rem; font-weight:bold; color:var(--ac-black); line-height:1.4; margin-top:1rem; }
#day .day-area.last { margin-top:3rem; }
#day .sns-area { margin:5rem 0; }
#day .sns-area .sns-ttl { color:var(--ac-black); text-align:center; font-size:3rem; }
#day .sns-area ul { display:flex; justify-content:center; width:60%; margin:2rem auto 0; }
#day .sns-area ul li { margin-right:4rem; text-align:center; }
#day .sns-area ul li:last-child { margin-right:0; }
#day .sns-area ul li a { display:block; }
#day .sns-area ul li img { max-width:20rem; }
#day .sns-area ul li p { font-size:2.4rem; font-weight:bold; color:var(--ac-black); }

/*--------------------------
qa
--------------------------*/
#qa { margin-top:5rem; padding-top:3rem; margin-bottom:10rem; }
#qa .wrap { position:relative; border:solid 1px var(--ac-sub); padding:10rem 7rem 7rem; margin-bottom:5rem; }
#qa h2 {
  background:var(--ac-sub);
  color:var(--ac-white);
  width:60%;
  font-size:2.4rem;
  text-align:center;
  line-height:6rem;
  position:absolute;
  top:-3rem;
  left:50%;
  transform:translateX(-50%);
}
#qa ul li:nth-of-type(n+2) { margin-top:3rem; }
#qa ul li p { font-size:1.8rem; font-weight:bold; margin:0; line-height:1.7; }
#qa ul li .a { color:var(--ac-link); margin-top:1rem; }
#qa .btn-area { display:flex; justify-content:space-between; width:50%; margin:5rem auto 0; }
#qa .btn-area .btn { width:45%; background:var(--ac-sub); text-align:center; border-radius:5px; }
#qa .btn-area .btn a { display:block; color:var(--ac-white); font-size:2rem; font-weight:bold; line-height:1.2; padding:1rem 0; background:none; }
#qa .online-store { margin-top:5rem; }
#qa .online-store .btn { max-width:45rem; border:solid 1px #333; margin:0 auto; }
#qa .online-store .btn a { display:block; text-align:center; font-weight:bold; font-size:1.8rem; line-height:3; background:none; color:var(--ac-text); }

/*========================================
responsive
========================================*/
@media screen and (max-width:820px) {

  /* common */
  .aging-contest .main-ttl { font-size:2.4rem; }
  .aging-contest .cont { display:block; }
  .aging-contest .cont > div { width:100%; }
  .aging-contest .cont > div:last-child { margin-top:2rem; }

  /* cont02 */
  #cont02 .prize li { width:32%; }
  #cont02 .prize li .ttl { font-size:1.8rem; line-height:2.5; }

  /* cont03 */
  #cont03 .youtube .wrap { max-width:100%; }

  /* cont04 */
  #cont04 ul.step li .ttl-area .ttl { font-size:1.6rem; }
  #cont04 .c2 { padding-top:5rem; }

  /* form */
  #form th { width:40%; }
  #form td { width:60%; }

  /* day */
  #day .sns-area ul { width:80%; }

  /* qa */
  #qa .wrap { padding:8rem 3rem 4rem; }
  #qa .btn-area { width:70%; }

}

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

  /* common */
  .aging-contest .main-ttl { font-size:2rem; }
  .aging-contest .obi { font-size:2.2rem; }
  .aging-contest .cont .main-ttl { font-size:1.8rem; }
  .aging-contest .cont .cont-tx p { margin-top:1rem; }
  .aging-contest section { scroll-margin-top:6rem; }

  /* mv */
  .aging-contest { padding-top:9rem; } /* ★固定ヘッダーとの重なり回避（SP）：ヘッダー高さ8rem＋余裕1rem */
  /* SPも #mv .mv-area の全幅指定をそのまま使用（4:5のmv_sp.jpg） */

  /* cont01 */
  #cont01 .menu ul { flex-wrap:wrap; max-width:100%; }
  #cont01 .menu ul li { width:50%; }
  #cont01 .menu ul li:nth-of-type(n+3) { margin-top:2rem; }
  #cont01 .menu h2 { font-size:2.4rem; }

  /* cont02 */
  #cont02 .prize { display:block; }
  #cont02 .prize li { width:100%; }
  #cont02 .prize li:nth-of-type(n+2) { margin-top:3rem; }
  #cont02 .prize li .ttl { font-size:2rem; }

  /* cont03 */
  #cont03 { margin-bottom:0; }

  /* cont04 */
  #cont04 ul.step { display:block; }
  #cont04 ul.step li { width:100%; }
  #cont04 ul.step li:nth-of-type(n+2) { margin-top:5rem; }
  #cont04 ul.step li .ttl-area { max-height:100%; }
  #cont04 ul.step li .ttl-area .ttl { font-size:1.8rem; margin:1rem 0; }
  #cont04 .c2 { padding-top:0; }
  #cont04 .c2 .twitter .ttl { font-size:2rem; }
  #cont04 .c2 .twitter .sns { height:40rem; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; } /* ★横長画像に合わせて高さ調整。SPは横スクロールで閲覧 */
  #cont04 .c2 .twitter .sns img { height:100%; width:auto; max-width:initial; padding-bottom:2rem; }
  #cont04 .c2 .to-form { margin-bottom:6rem; }

  /* form */
  #form table, #form table tbody { display:block; }
  #form table tr, #form table th, #form table td { display:block; width:100%; }
  #form table tr:nth-of-type(n+2) { margin-top:2rem; }
  #form th { font-size:1.8rem; }
  #form td { margin-top:.5rem; }
  #form .form-cap { text-align:left; text-indent:-1em; padding-left:1em; }
  #form .line-cont { margin-top:5rem; }

  /* day */
  #day { margin-top:6rem; }
  #day .day-tx { font-size:2.4rem; }
  #day .sns-area .sns-ttl { font-size:2.4rem; }
  #day .sns-area ul { justify-content:space-between; width:100%; }
  #day .sns-area ul li { width:48%; margin-right:0; }
  #day .sns-area ul li img { max-width:10rem; }
  #day .sns-area ul li p { font-size:1.6rem; text-align:center; margin-top:1rem; }

  /* qa */
  #qa .wrap { padding:5rem 2rem 2rem; }
  #qa h2 { width:80%; font-size:2rem; line-height:5rem; top:-2.5rem; }
  #qa .btn-area { width:100%; }
}