@charset "UTF-8";

.cookie_main{
  background:url("../img/cookiehistory/c_bg-min.png") left top repeat;
  text-align:center;
  padding:70px 0;
}
.cookie_main_content{
  position:relative;
}


.cookie_main_image{
  margin:0 auto;
  margin-left:200px;
  text-align:center;
}

.cookie_main_image img{
  margin:0 auto;
  text-align:center;
}

.cookie_main_project{
  position: absolute;
  left:50%;
  top:53%;
  -ms-transform: translate(-50%);
  -webkit-transform: translate(-50%);
  transform: translate(-50%);
}

.c_title{
  font-family: "游明朝", "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
    font-size:70px;
    line-height:1;
    text-align:center;
    margin-bottom:30px;
    font-weight:600;
}

.cookie_main_project_content{
  margin-top:30px;
}

.c_project_1{
  text-align:left;
  border:5px solid #000;
  padding:20px;
  font-weight:bold;
  background-color:#fff;
  line-height:3;
}

.c_inner{
  width:700px;
}

.project_image{
  border:5px solid #000;
}

.c_project_1{
  position: relative;
  z-index:10;
}

.c_project_2{
  position: relative;
  margin-top:-10px !important;
  z-index:9;
}
.c_project_3{
  position: relative;
  margin-top:-10px !important;
  z-index:8;
}

@media (max-width: 950px) {
    .c_project_1{
      line-height:2.5;
    }
    .project_yubi_kanji{
        width:90%;
    }
    .c_inner{
      width:600px;
    }
}

@media (max-width: 850px) {
    .c_project_1{
      line-height:2;
      font-size:14px;
    }
    .project_yubi_kanji{
        width:90%;
    }
    .c_inner{
      width:550px;
    }
}

.cookie_special_contents{
  background-color:#fff;
  text-align:center;
  padding:70px 0;
}
.cookie_special_contents_title{
  padding-bottom:0;
}
.cookie_special_contents_content{
  padding:20px 0 0 0;
}
.c_special_image{
  width:600px;
}
.cookie_special_history{
  margin:0 auto;
  margin-top:50px;
  padding:30px 40px 40px;
  width:700px;
  border:#94cb1d 5px solid;
  background-color:#94cb1d;
}
.cookie_special_history h3{
  font-family: "游明朝", "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
  font-weight:bold;
  font-size:45px;
  color:#fff;
  display:block;
  margin:0;
  padding:0;
}
.cookie_special_history h3 img{
    width:100px;
    height:100px;
    vertical-align: middle;
    display: inline-block;
    margin-right:20px;
}

.c_history_head_title{
    vertical-align: middle;
    display: inline-block;
    line-height:100px;
}

.history_episode1{
  margin:30px auto 0 auto;
  background-color:#fff;
  padding:20px 10px;
  line-height:50px;
  font-size:30px;
   position:relative;
}

.history_episode1 img{
    display: inline-block;
    width:50px;
    height:50px;
    margin-right:15px;
}

.episode_right{
  color:#94cb1d;
  text-align:right;
  right:20px;
}

.episode{
  color:#d51519;
  font-family: "游明朝", "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
  font-weight:bold;
}

.episode_title{
  font-family: "游明朝", "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
  font-weight:bold;
}

.history_episode1 a{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.history_episode1:hover{
  opacity: 0.7;
}

.cookie_line{
  background:url("../img/cookiehistory/c_bg-min.png") left top repeat;
  height:50px;
  width:100%;
}

.cookie_lineup{
  background-color:#fff;
  text-align:center;
  padding:70px 0;
}

.c_lineup_cookie{
  margin-top:30px;
}

.cookie_lineup_content{
  padding:30px 0 10px 0;
}
.c_lineup_image{
  width:600px;
}

.col-md-15 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
  width: 100%;
}

@media (min-width: 992px) {
  .col-md-15 {
    width: 20%;
    flex: 0 0 20%;
  }
}


.c_product_title{
  margin-top:15px;
  text-align:center;
  font-weight:bold;
}

.c_product_title2{
  margin-top:10px;
  text-align:center;
  font-weight:bold;
}

.cookie_youtube{
    text-align:center;
    padding:70px 0;
    background-color:#000;
    color:#fff;
}

.movie_contents{
  margin-top:30px;
}

.c_only_online{
    padding:5px 0;
    color:#fff;
    background-color:#ea0000;
    font-size:12px;
    margin:0 auto;
    margin-top:15px;
    width:150px;
    text-align:center;
}

.c_coming_soon{
    margin-top:5px;
    color:#74a50a;
    font-style:italic;
    font-weight:bold;
}

.cookie_lineup_product{
    margin-top:20px;
}

.line_up_item{
    margin-top:30px;
}

.line_up_spec{
    padding:20px;
    background-color:#d6f3f0;
    font-weight:bold;
    margin:50px auto 0 auto;
    width:760px;
    font-size:15px;
    text-align:center;
}

.line_up_spec_pc{
    display:block;
}

.line_up_spec_sp{
    display:none;
}

#ytPlayerWrap{
  position: absolute;
  inset:0;
  width:100%;
  height: 100%;
  overflow:hidden;
  background:#000;
}

.main__visual{
  height:calc(100vh - 116px);
}

#ytPlayerWrap .hero-video{
  position:absolute;
  top:50%;
  left:50%;
  width:177.78vh;
  min-width:100%;
  height:56.25vw;
  min-height:100%;
  transform:translate(-50%,-50%);
  border:0;
  pointer-events:none;
}

.cookie_youtube iframe{
  display:block;
  width:100%;
  max-width:480px;
  aspect-ratio:16 / 9;
  height:auto;
  margin:0 auto;
  border:0;
}



#footer {
    padding-top:0;
}

#footer_cookie{
  background:url("../img/cookiehistory/c_bg-min.png") left top repeat;
  text-align:center;
  padding:20px 0;
  margin-bottom:60px;
}

.cookie_copyright{
  margin-bottom:20px;
}

.cookie_copyright img{
  display:inline-block;
  width:47px;
  height:47px;
  margin-right:10px;
}

.cookie_copyright span{
  line-height:47px;
  font-size:20px;
  font-weight:bold;
}

@media (max-width: 768px) {
    #humberger{
        border:2px solid #fff;
    }

    .main__visual{
      height:56.25vw;
    }

    .sp_concept{
        padding:50px 20px 30px 20px;
    }

    .c_title{
        font-size:30px;
    }

    .c_inner{
        width:95%;
    }

    .c_special_image{
        width:95%;
    }

    .episode{
        font-size:18px;
    }

    .cookie_special_history{
      margin:0 auto;
      margin-top:50px;
      padding:30px 30px;
        width:90%;
    }

    .cookie_special_history h3{
      font-size:20px;
      line-height:50px;
    }
    .cookie_special_history h3 img{
        width:50px;
        height:50px;
        vertical-align: middle;
        display: inline-block;
        margin-right:10px;
    }

    .c_history_head_title{
        vertical-align: middle;
        display: inline-block;
        line-height:50px;
    }

    .history_episode1{
      margin:30px auto 0 auto;
      background-color:#fff;
      padding:20px 10px;
      line-height:25px;
      font-size:16px;
      position:relative;
    }

    .history_episode1 img{
        display: inline-block;
        width:25px;
        height:25px;
        margin-left:-10px;
        margin-right:5px;
    }

    .c_lineup_image{
        width:95%;
    }

    .line_up_spec{
        padding:20px 10px;
        margin:50px auto 0 auto;
        width:90%;
        font-size:14px;
        line-height:3;
    }

    .line_up_spec_pc{
        display:none;
    }

    .line_up_spec_sp{
        display:block;
    }

    section{
        width:100%;
    }

    .c_project_1{
      padding:15px;
      line-height:2;
      font-size:13px;
    }
    .project_yubi_kanji{
        width:100%;
    }
    .c_inner{
      width:95%;
    }

  .cookie_main_image{
    margin-left:0px;
    width:100%;
    text-align:center;
    margin:0 auto;
  }

  .cookie_main_project{
    margin-top:-120%;
    position: relative;
  }

  .contact_inner{
    width:90%;
  }

  .contact__send a{
    width:min(75vw, 330px);
    font-size:18px;
  }

  .cookie_copyright img{
    width:30px;
    height:30px;
  }

  .cookie_copyright span{
    line-height:30px;
    font-size:16px;
  }

  #ytPlayerWrap{
    margin-top:0;
  }
}