@charset "utf-8";

/*==============================
common
==============================*/
* { font-family:YuGothic,"游ゴシック","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック",sans-serif; }
main * { color:#707070; }
.inner { max-width:124rem; padding:0 2rem; width:100%; margin:0 auto; }
.main-ttl { font-size:2.8rem; font-weight:bold; border-left:solid 5px #707070; padding-left:2rem; line-height:1.5; }
.obi { font-size:2.8rem; width:100vw; margin:0 calc(50% - 50vw); text-align:center; background:#707070; color:#fff; padding:1rem 0; }
.icon { text-align:center; margin-bottom:5rem; }
.icon img { max-width:10rem; }
.cont { margin-top:3rem; display:flex; justify-content:space-between; }
.cont > div { width:48%; }
.cont div:last-child p { margin:3rem 0; }
.cont .main-ttl { font-size:2.4rem; }
.cont .btn { max-width:35rem; width:100%; margin:0 auto; }
.cont .btn a { display:block; line-height:2; text-align:center; background:#9e9e9e; color:#fff; font-weight:bold; font-size:2rem; border-radius:5px; }
.sp-only { display:none; }
a { transition:all .4s ease-out; }
a:hover { opacity:.6; }

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

/*--------------------------
cont01
--------------------------*/
#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 .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 {}
#cont02 ul { display:flex; justify-content:space-between; max-width:80%; margin:5rem auto; }
#cont02 ul li { width:45%; }
#cont02 ul li .ttl { background:#9e9e9e; color:#fff; font-size:2.4rem; font-weight:bold; text-align:center; margin-bottom:2rem; line-height:3; }
#cont02 ul li .img { margin-bottom:2rem; }

/*--------------------------
cont03 ヒップポケットってなんだ？
--------------------------*/
#cont03 { background:#D9D9D9; }
#cont03 .youtube { margin:5rem 0; }
#cont03 .youtube p { font-weight: bold; text-align:center; font-size:2rem; }
#cont03 .youtube .wrap { max-width:80%; margin:0 auto; aspect-ratio: 16 / 9; }
#cont03 .youtube .wrap iframe { width:100%; height:100%; }
#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:2.4rem; }
#cont04 ul.step li .ttl-area .ttl { text-align:center; margin:auto 0; font-size:2rem; font-weight: bold; }
#cont04 ul.step li .bold { font-weight: bold; }
#cont04 .c2 {}
#cont04 .c2 .read { margin:3rem 0; }
#cont04 .c2 ul { margin-bottom:5rem; }
#cont04 .c2 ul li { font-weight: bold; text-indent:-1em; padding-left:1em; }
#cont04 .c2 .twitter { margin-bottom:10rem; }
#cont04 .c2 .twitter .ttl { text-align:center; font-size:2.8rem; font-weight: bold; }

/*--------------------------
cont05 投稿ブース
--------------------------*/




/*--------------------------
form
--------------------------*/
#form { margin-top:5rem; }
#form h3 { margin-top:3rem; }
#form table { margin:3rem auto 0; max-width:90rem; width:100%; border-collapse:separate; border-spacing:0 2rem; }
#form tr {  }
#form th { text-align:left; font-size:2rem; width:30%; }
#form th:after {
  content:"任意";
  background:#f5f5f5;
  color:#9e9e9e;
  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:#e53935;
  color:#fff;
}
#form td { width:70%; font-size:2rem; vertical-align:middle; }
#form input[type="text"] { padding:1rem; }
#form textarea { resize:vertical; }
#form .file-tx { text-align:center; color:#000; }
#form .form-cap { font-size:1.4rem; text-align:center; }
#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;
}
#form .submit-area input[type="submit"] { background:#9e9e9e; color:#fff; border:none; }
#form .submit-area input[type="reset"] { background:#fff; color:#9e9e9e; border:solid 1px #9e9e9e; }

/*--------------------------
day
--------------------------*/
#day { margin-top:10rem; }
#day .day-ttl { 
  text-align:center;
  max-width:30rem;
  width:100%;
  margin:0 auto;
  background:#9e9e9e;
  color:#fff;
  font-size:2rem;
  font-weight: bold;
  line-height:3;
}
#day .day-tx { text-align:center; font-size:3rem; font-weight:bold; color:#000; line-height:1.4; }
#day .day-area.last { margin-top:3rem; }
#day .sns-area { margin:5rem 0; }
#day .sns-area .sns-ttl { color:#000; 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:#000; }

/*--------------------------
qa
--------------------------*/
#qa { margin-top:5rem; padding-top:3rem; margin-bottom:10rem; }
#qa .wrap { position:relative; border:solid 1px #9e9e9e; padding:10rem 7rem 7rem; margin-bottom:5rem; }
#qa h2 {
  background:#9e9e9e;
  color:#fff;
  width:60%;
  font-size:2.4rem;
  text-align:center;  
  line-height:6rem;
  position:absolute;
  top:-3rem;
  left:50%;
  transform:translateX(-50%);
}
#qa ul {  }
#qa ul li {  }
#qa ul li:nth-of-type(n+2) { margin-top:3rem; }
#qa ul li p { font-size:1.8rem; font-weight: bold; margin:0; }
#qa ul li .q {  }
#qa ul li .a { color:#2A6DF5; 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:#9e9e9e; text-align:center; border-radius:5px; }
#qa .btn-area .btn a { display:block; color:#fff; font-size:2rem; font-weight:bold; line-height:1.2; padding:1rem 0; }
#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; }



/*========================================
responsive
========================================*/
@media screen and (max-width:820px) {
  
  /* common */
  .main-ttl { font-size:2.4rem; }
  .cont { display:block; }
  .cont div { width:100%; }
  .cont div:last-child { margin-top:2rem; }
  
  /* cont02 */
  #cont02 ul { max-width:100%; }
  #cont02 ul:after { display:none; }
  #cont02 ul li { width:48%; }
  
  /* 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 .btn-area { width:70%; }
  
}

@media screen and (max-width:600px) {
  
  /* common */
  .main-ttl { font-size:2rem; }
  .obi { font-size:2.4rem; }
  .cont .main-ttl { font-size:1.8rem; }
  .cont div:last-child p { margin-top:1rem; }
  
  /* 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; }
  
  /* cont02 */
  #cont02 ul { display:block; }
  #cont02 ul li { width:100%; }
  #cont02 ul li:nth-of-type(n+2) { margin-top:3rem; }
 
  /* 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 .sns { height:calc(89.3rem / 2); overflow:scroll; text-align:center; }
  #cont04 .sns img { height:100%; width:auto; max-width:initial; padding-bottom:2rem; }
  #cont04 .sns:after { display:none; }
  
  /* 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 .form-cap { text-align:left; text-indent:-1em; padding-left:1em; }
  
  /* day */
  #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 .btn-area { width:100%; }
  #qa .btn-area:after { display:none; }
}