.sp { display: none; }

/* 画面幅小さいPC - small_pc
--------------------------------------------- */
@media ( width <= 1280px ) {
  body {
    font-size: 1.8rem;
  }

  .campaign_txt {
    left: 5%;
    max-width: 780px;
  }
  .campaign_box > img:first-of-type {
    top: -20rem;
  }

}


/* タブレット - tablet
--------------------------------------------- */
@media ( width <= 768px ) {
  body {
    font-size: 1.6rem;
  }

  .mainvisual {
    min-height: 640px;
  }
  .campaign_txt {
    margin: auto;
    max-width: 680px;
    left: 0;
    right: 0;
  }
  
  .campaign_box {
    padding: 1rem;
  }
  .campaign_box > img:first-of-type {
    top: -12rem;
    left: 5%;
    width: 18%;
  }

  .present_message {
    right: -5%;
    width: 200px;
  }
  #about_konamon_day .txt_inner {
    font-size: 1.2rem;
    padding: 0 8rem;
  }
  
  .list_nav > li a {
    width: 100px;
  }

  #recipe {
    padding-top: 15rem;
  }
  .recipe_img {
    padding: 0 2rem;
    flex-direction: column-reverse;
  }
  .recipe_img figure,
  .recipe_img .recipe_info {
    width: 100%;
  }
  .recipe_img figure {
    padding-left: 0;
    margin-bottom: 3rem;
  }
  .recipe_process {
    padding: 0 2rem;
  }
  .howto_middle {
    margin-bottom: 3rem;
  }

  .recipe_puchioko .recipe_info {
    margin-bottom: 2rem;
  }
  .modal-content {
    padding: 10rem 7.5rem;
  }
}


/* スマホ - sp
--------------------------------------------- */
@media ( width <= 480px ) {
  .pc { display: none; }
  .sp { display: block; }

  body {
    font-size: 1.4rem;
  }
  header .h_inner {
    padding: 2rem 1rem;
    height: 80px;
  }
  header .h_inner h1 {
    width: 150px;
  }

  main {
    margin-top: 8rem;
  }
  #main_visual {
    margin-bottom: -2rem;
  }
  .mainvisual {
    min-height: 360px;
  }
  .main_visual_under {
    /* display: none; */
    transform: rotate(180deg);
    bottom: -14rem;
  }
  .main_visual_under_sp {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 2rem;
  }
  .campaign_txt {
    margin: 0;
    max-width: 350px;
    left: 2%;
  }
  .campaign_box {
    position: static;
    background-color: #EDE7C4;
  }
  .campaign_box > img:first-of-type {
    /* position: static; */
    top: 17%;
    left: 2%;
    right: auto;
    width: 35%;
    z-index: 3;
  }
  .list_campaign {
    position: relative;
    top: -9rem;
    flex-wrap: wrap;
    justify-content: space-around;
    z-index: 2;
  }
  .list_campaign > li {
    width: 100%;
  }

  .sample_wallpaper .sample_img {
    margin-top: 1rem;
    height: 580px;
  }

  #apply {
    padding: 1rem;
  }
  .apply_box {
    margin: 2rem auto;
    padding: 2rem;
  }
  .modal-open {
    margin: 2rem auto 0;
    padding: 1rem;
    width: 100%;
    font-size: 1.4rem;
  }

  .present_message {
    width: 150px;
    bottom: -4rem;
  }

  #about_konamon_day {
    padding: 3rem 2rem;
  }
  #about_konamon_day .ttl_sub {
    font-size: 2.1rem;
  }
  #about_konamon_day .ttl_sub::before, #about_konamon_day .ttl_sub::after {
    position: absolute;
    top: 0;
    left: 3rem;
    content: '';
    display: block;
    width: 22px;
    height: 40px;
    background-image: url( '../imgs/kote_left.svg' );
    background-repeat: no-repeat;
    background-size: contain;
  }
  #about_konamon_day .ttl_sub::after {
    left: auto;
    right: 3rem;
    background-image: url( '../imgs/kote_right.svg' );
  }
  .kote_container::before, .kote_container::after {
    display: none;
    /* top: -10rem;
    width: 50px;
    height: 92px; */
  }
  .kote_container::after {
    right: 7rem;
  }
  .kote_container::before {
    left: 7rem;
  }
  #about_konamon_day .txt_inner {
    padding: 0;
  }
  #about_konamon_day .txt_inner br {
    display: none;
  }
  .recipe_bg {
    width: 130%;
    max-width: 130%;
    left: 50%;
    transform: translateX( -50% );
  }
  

  #recipe {
    padding-top: 10rem;
  }
  .recipe_img {
    margin-top: 0;
    margin-bottom: 2rem;
  }
  .recipe_puchioko .recipe_info img.sp {
    margin-bottom: 2rem;
    border: 10px solid #fff;
    height: 100%;
    object-fit: cover;
  }
  
  .recipe_img figure {
    margin-bottom: 2rem;
  }
  .recipe_process {
    margin-top: 2rem;
  }
  .recipe_puchioko .recipe_process {
    margin-top: -5rem;
  }
  .recipe_puchioko .recipe_img figure {
    padding-right: 0;
  }
  .ttl_recipe {
    max-width: 300px;
  }

  .howto_middle {
    margin-top: 6rem;
  }
  .howto_middle img:last-child {
    position: absolute;
    top: -6rem;
    right: 0;
  }

  .recipe_puchioko {
    padding: 0 0 5rem;
  }

  .modal-content {
    padding: 3rem;
  }
}