/* ============================================================================================== */
/* PC Size Style                                                                                  */
/* ============================================================================================== */
@media screen and (1024px <= width) {
  #firstview {
    width: calc(100% - 48px);
    height: 652px;
    margin: 0 auto;
    clip-path: url("#mask___firstview_clip_path_pc");
  }
  #firstview img {
    width: 100%;
    height: 100%;
    object-position: center center;
    object-fit: cover;
  }
  #movie_s {
    margin-top: 48px;
    position: relative;
  }
  #movie_s .label {
    position: absolute;
    right: 0;
    top: 23px;
    z-index: 500;
  }
  #movie_s .label img {
    width: 86px;
  }
  #movie_s .content {
    width: calc(100% - 40px);
    height: 525px;
    margin: 0 auto;
    background-image: image-set("../../img/top/movie_decoration_pc.png" 1x, "../../img/top/movie_decoration_pc@2x.png" 2x);
    background-position: center bottom;
    background-size: auto 271px;
    background-repeat: repeat-x;
    position: relative;
    z-index: 0;
  }
  #movie_s .content .bg {
    width: 100%;
    text-align: center;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
  }
  #movie_s .content .bg img {
    width: 802px;
  }
  #movie_s .content .front {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    -webkit-align-items: center;
    align-items: center;
    -webkit-flex-direction: column;
    flex-direction: column;
    text-align: center;
    position: relative;
    z-index: 10;
  }
  #movie_s .content .front h2 {
    display: block;
    padding: 43px 0 15px;
  }
  #movie_s .content .front h2 img {
    width: 325px;
  }
  #movie_s .content .front figure {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    -webkit-align-items: flex-end;
    align-items: flex-end;
    -webkit-flex-direction: column;
    flex-direction: column;
  }
  #movie_s .content .front figure a {
    display: block;
    border-radius: 10px;
    background: #ffffff;
  }
  #movie_s .content .front figure a img {
    width: 640px;
    filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.3));
  }
  #pickup {
    margin-top: 70px;
    position: relative;
  }
  #pickup .label {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 500;
  }
  #pickup .label img {
    width: 84.919px;
  }
  #pickup .headline {
    padding-top: 4px;
    padding-bottom: 12px;
    text-align: center;
    postion: relative;
    z-index: 10;
  }
  #pickup .headline img {
    width: 202px;
  }
  #pickup .content {
    width: calc(100% - 40px);
    height: 411px;
    margin: -30px auto 0;
    position: relative;
    z-index: 0;
  }
  #pickup .content .bg {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    padding-top: 30px;
    clip-path: url("#mask___pickup_clip_path_pc");
    overflow: hidden;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
  }
  #pickup .content .bg > picture {
    position: relative;
    z-index: 0;
  }
  #pickup .content .bg > picture > img {
    width: 100%;
    height: 100%;
    object-position: center top;
    object-fit: cover;
  }
  #pickup .content .bg > img {
    width: 154px;
    position: absolute;
    left: calc(50% + 464px);
    top: 0;
    z-index: 100;
  }
  #pickup .content .list {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    width: 980px;
    margin: 0 auto;
    padding-top: 70px;
  }
  #pickup .content .list a {
    border-radius: 10px;
    background: #ffffff;
  }
  #pickup .content .list a img {
    width: 300px;
    filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.3));
  }
  #feature {
    margin-top: 87px;
    position: relative;
  }
  #feature .label {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 500;
  }
  #feature .label img {
    width: 85.5px;
    aspect-ratio: 85.5/208.344;
  }
  #feature > dl {
    width: calc(100% - 40px);
    margin: 0 auto;
    padding-top: 3px;
  }
  #feature > dl > dt {
    text-align: center;
  }
  #feature > dl > dt img {
    width: 182.246px;
    aspect-ratio: 182.246/46.41;
  }
  #feature > dl > dd {
    height: 353px;
    margin-top: 12px;
    position: relative;
  }
  #feature > dl > dd .bg {
    width: 100%;
    height: 100%;
    clip-path: url("#mask___feature_clip_path_pc");
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
  }
  #feature > dl > dd .bg img {
    width: 100%;
    height: 100%;
  }
  #feature > dl > dd .decoration {
    bottom: -53px;
    right: calc(50% + 383px);
    position: absolute;
    z-index: 10;
  }
  #feature > dl > dd .decoration img {
    width: 157px;
    aspect-ratio: 157/85;
  }
  #feature > dl > dd .points {
    width: 1000px;
    margin: 0 auto;
    position: relative;
    z-index: 20;
  }
  #feature > dl > dd .points > ul {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    padding-top: 54px;
  }
  #feature > dl > dd .points > ul > li:nth-child(1) {
    padding-left: 62px;
  }
  #feature > dl > dd .points > ul > li:nth-child(1) img {
    width: 201px;
    aspect-ratio: 201/254;
  }
  #feature > dl > dd .points > ul > li:nth-child(2) {
    padding-left: 120px;
  }
  #feature > dl > dd .points > ul > li:nth-child(2) img {
    width: 225px;
    aspect-ratio: 225/254;
  }
  #feature > dl > dd .points > ul > li:nth-child(3) {
    padding-left: 89px;
  }
  #feature > dl > dd .points > ul > li:nth-child(3) img {
    width: 284px;
    aspect-ratio: 284/254;
  }
  #lineup {
    margin-top: 96px;
    padding-bottom: 38px;
    background-image: url("../../img/top/lineup_decoration.png");
    background-position: center bottom;
    background-size: auto 130px;
    background-repeat: repeat-x;
    position: relative;
  }
  #lineup .label {
    position: absolute;
    left: 0;
    top: 4px;
    z-index: 500;
  }
  #lineup .label img {
    width: 84.919px;
    aspect-ratio: 84.919/207.611;
  }
  #lineup > dl > dt {
    text-align: center;
  }
  #lineup > dl > dt img {
    width: 292.014px;
    aspect-ratio: 292.014/46.693;
  }
  #lineup > dl > dd {
    margin-top: 21px;
  }
  #lineup > dl > dd .list {
    width: 1000px;
    margin: 0 auto;
  }
  #lineup > dl > dd .list > ul {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: flex-start;
    align-items: flex-start;
  }
  #lineup > dl > dd .list > ul > li {
    position: relative;
  }
  #lineup > dl > dd .list > ul > li .product img {
    width: 184px;
  }
  #lineup > dl > dd .list > ul > li .content {
    width: 100%;
    position: absolute;
    left: 0;
    top: 391px;
    z-index: 10;
  }
  #lineup > dl > dd .list > ul > li .content .name {
    text-align: center;
    color: #002f80;
    font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 22px;
  }
  #lineup > dl > dd .list > ul > li .content .link {
    margin-top: 12px;
  }
  #lineup > dl > dd .list > ul > li .content .link a {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
    width: 160px;
    height: 38px;
    margin: 0 auto;
    background: #ffffff;
    border: 1px solid #002f80;
    border-radius: 20px;
    transition: background 0.4s ease;
  }
  #lineup > dl > dd .list > ul > li .content .link a span {
    display: block;
    padding-right: 25px;
    color: #002f80;
    font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 22px;
    position: relative;
    transition: color 0.4s ease;
  }
  #lineup > dl > dd .list > ul > li .content .link a span::before, #lineup > dl > dd .list > ul > li .content .link a span::after {
    content: "";
    width: 15px;
    aspect-ratio: 61/45;
    background-image: url("../../img/top/icon_external.png");
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    transform: translateY(-50%);
    transition: opacity 0.4s ease;
    position: absolute;
    right: 0;
    top: 50%;
  }
  #lineup > dl > dd .list > ul > li .content .link a span::before {
    background-image: url("../../img/top/icon_external.png");
    opacity: 1;
  }
  #lineup > dl > dd .list > ul > li .content .link a span::after {
    background-image: url("../../img/top/icon_external_w.png");
    opacity: 0;
  }
  #lineup > dl > dd .list > ul > li .content .link a:hover {
    background: #002f80;
  }
  #lineup > dl > dd .list > ul > li .content .link a:hover span {
    color: #ffffff;
  }
  #lineup > dl > dd .list > ul > li .content .link a:hover span::before {
    opacity: 0;
  }
  #lineup > dl > dd .list > ul > li .content .link a:hover span::after {
    opacity: 1;
  }
  #lineup > dl > dd .search_stores_from_the_map {
    position: relative;
  }
  #lineup > dl > dd .search_stores_from_the_map a {
    display: inline-block;
    background: #ffffff;
    border-radius: 10px;
    transform: translateX(-50%);
    position: absolute;
    left: 50%;
    top: 45px;
  }
  #lineup > dl > dd .search_stores_from_the_map a img {
    width: 474px;
    aspect-ratio: 474/80;
    transition: opacity 0.4s ease;
    opacity: 1;
  }
  #lineup > dl > dd .search_stores_from_the_map a img:hover {
    opacity: 0.6;
  }
  #recipe {
    margin-top: 125px;
    position: relative;
  }
  #recipe .label {
    position: absolute;
    right: 0;
    top: 80px;
    z-index: 500;
  }
  #recipe .label img {
    width: 98.333px;
    aspect-ratio: 98.333/180.746;
  }
  #recipe .bg {
    width: calc(100% - 38px);
    height: 1055px;
    clip-path: url("#mask___recipe_clip_path_pc");
    position: absolute;
    left: 19px;
    top: 0;
    z-index: 0;
  }
  #recipe .bg img {
    width: 100%;
    height: 100%;
  }
  #recipe .decoration {
    width: 1000px;
    margin: 0 auto;
    position: relative;
    z-index: 10;
  }
  #recipe .decoration .item {
    position: absolute;
  }
  #recipe .decoration .item.num01 {
    width: 150px;
    aspect-ratio: 150/85;
    top: -26px;
    right: 18px;
  }
  #recipe .decoration .item.num02 {
    width: 295px;
    aspect-ratio: 295/160;
    top: 925px;
    left: -55px;
  }
  #recipe > dl {
    height: 1055px;
    position: relative;
    z-index: 100;
  }
  #recipe > dl > dt {
    padding-top: 84px;
    text-align: center;
  }
  #recipe > dl > dt img {
    width: 122.047px;
    aspect-ratio: 122.047/41.955;
  }
  #recipe > dl > dd {
    margin-top: 20px;
  }
  #recipe > dl > dd .explain {
    text-align: center;
    color: #002f80;
    font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 30px;
  }
  #recipe > dl > dd .recipe_list {
    width: 1000px;
    height: 738px;
    margin: 26px auto 0;
    background: #ffffff;
    border-radius: 20px;
  }
  #recipe > dl > dd .recipe_list > ul {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 890px;
    margin: 0 auto;
    padding-top: 51px;
    gap: 34px 0;
  }
  #recipe > dl > dd .recipe_list > ul > li a {
    display: inline;
  }
  #recipe > dl > dd .recipe_list > ul > li a .image {
    transition: opacity 0.6s ease;
  }
  #recipe > dl > dd .recipe_list > ul > li a .image img {
    width: 270px;
    aspect-ratio: 270/230;
    border-radius: 10px;
  }
  #recipe > dl > dd .recipe_list > ul > li a .name {
    margin-top: 8px;
    text-align: center;
  }
  #recipe > dl > dd .recipe_list > ul > li a .name p {
    color: #002f80;
    font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
    font-weight: 600;
    font-size: 15.84px;
    line-height: 24.64px;
    position: relative;
  }
  #recipe > dl > dd .recipe_list > ul > li a:hover .image {
    opacity: 0.7;
  }
  #recipe > dl > dd .recipe_list > ul > li a:hover .name p {
    text-decoration: underline;
  }
  #recipe > dl > dd .recipe_list .more {
    margin-top: 24px;
  }
  #recipe > dl > dd .recipe_list .more a {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
    width: 300px;
    height: 56px;
    margin: 0 auto;
    border: 1px solid #002f80;
    border-radius: 30px;
    transition: background 0.4s ease;
    position: relative;
  }
  #recipe > dl > dd .recipe_list .more a::before, #recipe > dl > dd .recipe_list .more a::after {
    content: "";
    width: 14px;
    height: 100%;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    transition: opacity 0.4s ease;
    position: absolute;
    right: 35px;
    top: 0;
  }
  #recipe > dl > dd .recipe_list .more a::before {
    background-image: url("../../img/top/icon_arrow.png");
    opacity: 1;
  }
  #recipe > dl > dd .recipe_list .more a::after {
    background-image: url("../../img/top/icon_arrow_w.png");
    opacity: 0;
  }
  #recipe > dl > dd .recipe_list .more a span {
    display: block;
    color: #002f80;
    font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 1;
    transition: color 0.4s ease;
  }
  #recipe > dl > dd .recipe_list .more a:hover {
    background: #002f80;
  }
  #recipe > dl > dd .recipe_list .more a:hover::before {
    opacity: 0;
  }
  #recipe > dl > dd .recipe_list .more a:hover::after {
    opacity: 1;
  }
  #recipe > dl > dd .recipe_list .more a:hover span {
    color: #ffffff;
  }
  #history {
    margin-top: 85px;
    padding-bottom: 96px;
    position: relative;
  }
  #history .label {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 500;
  }
  #history .label img {
    width: 84.919px;
    aspect-ratio: 84.919/190.261;
  }
  #history > dl > dt {
    padding-top: 7px;
    text-align: center;
  }
  #history > dl > dt img {
    width: 171.834px;
    aspect-ratio: 171.834/43.049;
  }
  #history > dl > dd {
    margin-top: 34px;
  }
  #history > dl > dd .explain {
    text-align: center;
    color: #002f80;
    font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 1;
  }
  #history > dl > dd .product {
    margin-top: 40px;
    text-align: center;
  }
  #history > dl > dd .product img {
    width: 997px;
  }
  #history > dl > dd .more {
    margin-top: 60px;
  }
  #history > dl > dd .more a {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
    width: 300px;
    height: 56px;
    margin: 0 auto;
    border: 1px solid #002f80;
    border-radius: 30px;
    transition: background 0.4s ease;
    position: relative;
  }
  #history > dl > dd .more a::before, #history > dl > dd .more a::after {
    content: "";
    width: 14px;
    height: 100%;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    transition: opacity 0.4s ease;
    position: absolute;
    right: 35px;
    top: 0;
  }
  #history > dl > dd .more a::before {
    background-image: url("../../img/top/icon_arrow.png");
    opacity: 1;
  }
  #history > dl > dd .more a::after {
    background-image: url("../../img/top/icon_arrow_w.png");
    opacity: 0;
  }
  #history > dl > dd .more a span {
    display: block;
    color: #002f80;
    font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 1;
    transition: color 0.4s ease;
  }
  #history > dl > dd .more a:hover {
    background: #002f80;
  }
  #history > dl > dd .more a:hover::before {
    opacity: 0;
  }
  #history > dl > dd .more a:hover::after {
    opacity: 1;
  }
  #history > dl > dd .more a:hover span {
    color: #ffffff;
  }
}
/* ============================================================================================== */
/* Tablet Size Style                                                                              */
/* ============================================================================================== */
@media screen and (768px <= width < 1024px) {
  #firstview {
    width: calc(100% - 3.4285714286vw);
    height: 46.5714285714vw;
    margin: 0 auto;
    clip-path: url("#mask___firstview_clip_path_pc");
  }
  #firstview img {
    width: 100%;
    height: 100%;
    object-position: center center;
    object-fit: cover;
  }
  #movie_s {
    margin-top: 3.4285714286vw;
    position: relative;
  }
  #movie_s .label {
    position: absolute;
    right: 0;
    top: 1.6428571429vw;
    z-index: 500;
  }
  #movie_s .label img {
    width: 6.1428571429vw;
  }
  #movie_s .content {
    width: calc(100% - 2.8571428571vw);
    height: 37.5vw;
    margin: 0 auto;
    background-image: image-set("../../img/top/movie_decoration_pc.png" 1x, "../../img/top/movie_decoration_pc@2x.png" 2x);
    background-position: center bottom;
    background-size: auto 19.3571428571vw;
    background-repeat: repeat-x;
    position: relative;
    z-index: 0;
  }
  #movie_s .content .bg {
    width: 100%;
    text-align: center;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
  }
  #movie_s .content .bg img {
    width: 57.2857142857vw;
  }
  #movie_s .content .front {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    -webkit-align-items: center;
    align-items: center;
    -webkit-flex-direction: column;
    flex-direction: column;
    text-align: center;
    position: relative;
    z-index: 10;
  }
  #movie_s .content .front h2 {
    display: block;
    padding: 3.0714285714vw 0 1.0714285714vw;
  }
  #movie_s .content .front h2 img {
    width: 23.2142857143vw;
  }
  #movie_s .content .front figure {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    -webkit-align-items: flex-end;
    align-items: flex-end;
    -webkit-flex-direction: column;
    flex-direction: column;
  }
  #movie_s .content .front figure a {
    display: block;
    border-radius: 0.7142857143vw;
    background: #ffffff;
  }
  #movie_s .content .front figure a img {
    width: 45.7142857143vw;
    filter: drop-shadow(0 0 0.2142857143vw rgba(0, 0, 0, 0.3));
  }
  #pickup {
    margin-top: 5vw;
    position: relative;
  }
  #pickup .label {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 500;
  }
  #pickup .label img {
    width: 6.0656428571vw;
  }
  #pickup .headline {
    padding-top: 0.2857142857vw;
    padding-bottom: 0.8571428571vw;
    text-align: center;
    postion: relative;
    z-index: 10;
  }
  #pickup .headline img {
    width: 14.4285714286vw;
  }
  #pickup .content {
    width: calc(100% - 2.8571428571vw);
    height: 29.3571428571vw;
    margin: -2.1428571429vw auto 0;
    position: relative;
    z-index: 0;
  }
  #pickup .content .bg {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    padding-top: 2.1428571429vw;
    clip-path: url("#mask___pickup_clip_path_pc");
    overflow: hidden;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
  }
  #pickup .content .bg > picture {
    position: relative;
    z-index: 0;
  }
  #pickup .content .bg > picture > img {
    width: 100%;
    height: 100%;
    object-position: center top;
    object-fit: cover;
  }
  #pickup .content .bg > img {
    width: 11vw;
    position: absolute;
    left: calc(50% + 33.1428571429vw);
    top: 0;
    z-index: 100;
  }
  #pickup .content .list {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    width: 70vw;
    margin: 0 auto;
    padding-top: 5vw;
  }
  #pickup .content .list a {
    border-radius: 0.7142857143vw;
    background: #ffffff;
  }
  #pickup .content .list a img {
    width: 21.4285714286vw;
    filter: drop-shadow(0 0 0.2142857143vw rgba(0, 0, 0, 0.3));
  }
  #feature {
    margin-top: 6.2142857143vw;
    position: relative;
  }
  #feature .label {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 500;
  }
  #feature .label img {
    width: 6.1071428571vw;
    aspect-ratio: 85.5/208.344;
  }
  #feature > dl {
    width: calc(100% - 2.8571428571vw);
    margin: 0 auto;
    padding-top: 0.2142857143vw;
  }
  #feature > dl > dt {
    text-align: center;
  }
  #feature > dl > dt img {
    width: 13.0175714286vw;
    aspect-ratio: 182.246/46.41;
  }
  #feature > dl > dd {
    height: 25.2142857143vw;
    margin-top: 0.8571428571vw;
    position: relative;
  }
  #feature > dl > dd .bg {
    width: 100%;
    height: 100%;
    clip-path: url("#mask___feature_clip_path_pc");
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
  }
  #feature > dl > dd .bg img {
    width: 100%;
    height: 100%;
  }
  #feature > dl > dd .decoration {
    bottom: -3.7857142857vw;
    right: calc(50% + 27.3571428571vw);
    position: absolute;
    z-index: 10;
  }
  #feature > dl > dd .decoration img {
    width: 11.2142857143vw;
    aspect-ratio: 157/85;
  }
  #feature > dl > dd .points {
    width: 71.4285714286vw;
    margin: 0 auto;
    position: relative;
    z-index: 20;
  }
  #feature > dl > dd .points > ul {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    padding-top: 3.8571428571vw;
  }
  #feature > dl > dd .points > ul > li:nth-child(1) {
    padding-left: 4.4285714286vw;
  }
  #feature > dl > dd .points > ul > li:nth-child(1) img {
    width: 14.3571428571vw;
    aspect-ratio: 201/254;
  }
  #feature > dl > dd .points > ul > li:nth-child(2) {
    padding-left: 8.5714285714vw;
  }
  #feature > dl > dd .points > ul > li:nth-child(2) img {
    width: 16.0714285714vw;
    aspect-ratio: 225/254;
  }
  #feature > dl > dd .points > ul > li:nth-child(3) {
    padding-left: 6.3571428571vw;
  }
  #feature > dl > dd .points > ul > li:nth-child(3) img {
    width: 20.2857142857vw;
    aspect-ratio: 284/254;
  }
  #lineup {
    margin-top: 6.8571428571vw;
    padding-bottom: 2.7142857143vw;
    background-image: url("../../img/top/lineup_decoration.png");
    background-position: center bottom;
    background-size: auto 9.2857142857vw;
    background-repeat: repeat-x;
    position: relative;
  }
  #lineup .label {
    position: absolute;
    left: 0;
    top: 0.2857142857vw;
    z-index: 500;
  }
  #lineup .label img {
    width: 6.0656428571vw;
    aspect-ratio: 84.919/207.611;
  }
  #lineup > dl > dt {
    text-align: center;
  }
  #lineup > dl > dt img {
    width: 20.8581428571vw;
    aspect-ratio: 292.014/46.693;
  }
  #lineup > dl > dd {
    margin-top: 1.5vw;
  }
  #lineup > dl > dd .list {
    width: 71.4285714286vw;
    margin: 0 auto;
  }
  #lineup > dl > dd .list > ul {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: flex-start;
    align-items: flex-start;
  }
  #lineup > dl > dd .list > ul > li {
    position: relative;
  }
  #lineup > dl > dd .list > ul > li .product img {
    width: 13.1428571429vw;
  }
  #lineup > dl > dd .list > ul > li .content {
    width: 100%;
    position: absolute;
    left: 0;
    top: 27.9285714286vw;
    z-index: 10;
  }
  #lineup > dl > dd .list > ul > li .content .name {
    text-align: center;
    color: #002f80;
    font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
    font-weight: 600;
    font-size: 1.1428571429vw;
    line-height: 1.5714285714vw;
  }
  #lineup > dl > dd .list > ul > li .content .link {
    margin-top: 0.8571428571vw;
  }
  #lineup > dl > dd .list > ul > li .content .link a {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
    width: 11.4285714286vw;
    height: 2.7142857143vw;
    margin: 0 auto;
    background: #ffffff;
    border: 1px solid #002f80;
    border-radius: 1.4285714286vw;
    transition: background 0.4s ease;
  }
  #lineup > dl > dd .list > ul > li .content .link a span {
    display: block;
    padding-right: 1.7857142857vw;
    color: #002f80;
    font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
    font-weight: 600;
    font-size: 1vw;
    line-height: 1.5714285714vw;
    position: relative;
    transition: color 0.4s ease;
  }
  #lineup > dl > dd .list > ul > li .content .link a span::before, #lineup > dl > dd .list > ul > li .content .link a span::after {
    content: "";
    width: 1.0714285714vw;
    aspect-ratio: 61/45;
    background-image: url("../../img/top/icon_external.png");
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    transform: translateY(-50%);
    transition: opacity 0.4s ease;
    position: absolute;
    right: 0;
    top: 50%;
  }
  #lineup > dl > dd .list > ul > li .content .link a span::before {
    background-image: url("../../img/top/icon_external.png");
    opacity: 1;
  }
  #lineup > dl > dd .list > ul > li .content .link a span::after {
    background-image: url("../../img/top/icon_external_w.png");
    opacity: 0;
  }
  #lineup > dl > dd .list > ul > li .content .link a:hover {
    background: #002f80;
  }
  #lineup > dl > dd .list > ul > li .content .link a:hover span {
    color: #ffffff;
  }
  #lineup > dl > dd .list > ul > li .content .link a:hover span::before {
    opacity: 0;
  }
  #lineup > dl > dd .list > ul > li .content .link a:hover span::after {
    opacity: 1;
  }
  #lineup > dl > dd .search_stores_from_the_map {
    position: relative;
  }
  #lineup > dl > dd .search_stores_from_the_map a {
    display: inline-block;
    background: #ffffff;
    border-radius: 0.7142857143vw;
    transform: translateX(-50%);
    position: absolute;
    left: 50%;
    top: 3.2142857143vw;
  }
  #lineup > dl > dd .search_stores_from_the_map a img {
    width: 33.8571428571vw;
    aspect-ratio: 474/80;
    transition: opacity 0.4s ease;
    opacity: 1;
  }
  #lineup > dl > dd .search_stores_from_the_map a img:hover {
    opacity: 0.6;
  }
  #recipe {
    margin-top: 8.9285714286vw;
    position: relative;
  }
  #recipe .label {
    position: absolute;
    right: 0;
    top: 5.7142857143vw;
    z-index: 500;
  }
  #recipe .label img {
    width: 7.0237857143vw;
    aspect-ratio: 98.333/180.746;
  }
  #recipe .bg {
    width: calc(100% - 2.7142857143vw);
    height: 75.3571428571vw;
    clip-path: url("#mask___recipe_clip_path_pc");
    position: absolute;
    left: 1.3571428571vw;
    top: 0;
    z-index: 0;
  }
  #recipe .bg img {
    width: 100%;
    height: 100%;
  }
  #recipe .decoration {
    width: 71.4285714286vw;
    margin: 0 auto;
    position: relative;
    z-index: 10;
  }
  #recipe .decoration .item {
    position: absolute;
  }
  #recipe .decoration .item.num01 {
    width: 10.7142857143vw;
    aspect-ratio: 150/85;
    top: -1.8571428571vw;
    right: 1.2857142857vw;
  }
  #recipe .decoration .item.num02 {
    width: 21.0714285714vw;
    aspect-ratio: 295/160;
    top: 66.0714285714vw;
    left: -3.9285714286vw;
  }
  #recipe > dl {
    height: 75.3571428571vw;
    position: relative;
    z-index: 100;
  }
  #recipe > dl > dt {
    padding-top: 6vw;
    text-align: center;
  }
  #recipe > dl > dt img {
    width: 8.7176428571vw;
    aspect-ratio: 122.047/41.955;
  }
  #recipe > dl > dd {
    margin-top: 1.4285714286vw;
  }
  #recipe > dl > dd .explain {
    text-align: center;
    color: #002f80;
    font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
    font-weight: 600;
    font-size: 1.4285714286vw;
    line-height: 2.1428571429vw;
  }
  #recipe > dl > dd .recipe_list {
    width: 71.4285714286vw;
    height: 52.7142857143vw;
    margin: 1.8571428571vw auto 0;
    background: #ffffff;
    border-radius: 1.4285714286vw;
  }
  #recipe > dl > dd .recipe_list > ul {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 63.5714285714vw;
    margin: 0 auto;
    padding-top: 3.6428571429vw;
    gap: 2.4285714286vw 0;
  }
  #recipe > dl > dd .recipe_list > ul > li a {
    display: inline;
  }
  #recipe > dl > dd .recipe_list > ul > li a .image {
    transition: opacity 0.6s ease;
  }
  #recipe > dl > dd .recipe_list > ul > li a .image img {
    width: 19.2857142857vw;
    aspect-ratio: 270/230;
    border-radius: 0.7142857143vw;
  }
  #recipe > dl > dd .recipe_list > ul > li a .name {
    margin-top: 0.5714285714vw;
    text-align: center;
  }
  #recipe > dl > dd .recipe_list > ul > li a .name p {
    color: #002f80;
    font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
    font-weight: 600;
    font-size: 1.1314285714vw;
    line-height: 1.76vw;
    position: relative;
  }
  #recipe > dl > dd .recipe_list > ul > li a:hover .image {
    opacity: 0.7;
  }
  #recipe > dl > dd .recipe_list > ul > li a:hover .name p {
    text-decoration: underline;
  }
  #recipe > dl > dd .recipe_list .more {
    margin-top: 1.7142857143vw;
  }
  #recipe > dl > dd .recipe_list .more a {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
    width: 21.4285714286vw;
    height: 4vw;
    margin: 0 auto;
    border: 1px solid #002f80;
    border-radius: 2.1428571429vw;
    transition: background 0.4s ease;
    position: relative;
  }
  #recipe > dl > dd .recipe_list .more a::before, #recipe > dl > dd .recipe_list .more a::after {
    content: "";
    width: 1vw;
    height: 100%;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    transition: opacity 0.4s ease;
    position: absolute;
    right: 2.5vw;
    top: 0;
  }
  #recipe > dl > dd .recipe_list .more a::before {
    background-image: url("../../img/top/icon_arrow.png");
    opacity: 1;
  }
  #recipe > dl > dd .recipe_list .more a::after {
    background-image: url("../../img/top/icon_arrow_w.png");
    opacity: 0;
  }
  #recipe > dl > dd .recipe_list .more a span {
    display: block;
    color: #002f80;
    font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
    font-weight: 600;
    font-size: 1.4285714286vw;
    line-height: 1;
    transition: color 0.4s ease;
  }
  #recipe > dl > dd .recipe_list .more a:hover {
    background: #002f80;
  }
  #recipe > dl > dd .recipe_list .more a:hover::before {
    opacity: 0;
  }
  #recipe > dl > dd .recipe_list .more a:hover::after {
    opacity: 1;
  }
  #recipe > dl > dd .recipe_list .more a:hover span {
    color: #ffffff;
  }
  #history {
    margin-top: 6.0714285714vw;
    padding-bottom: 6.8571428571vw;
    position: relative;
  }
  #history .label {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 500;
  }
  #history .label img {
    width: 6.0656428571vw;
    aspect-ratio: 84.919/190.261;
  }
  #history > dl > dt {
    padding-top: 0.5vw;
    text-align: center;
  }
  #history > dl > dt img {
    width: 12.2738571429vw;
    aspect-ratio: 171.834/43.049;
  }
  #history > dl > dd {
    margin-top: 2.4285714286vw;
  }
  #history > dl > dd .explain {
    text-align: center;
    color: #002f80;
    font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
    font-weight: 600;
    font-size: 1.4285714286vw;
    line-height: 1;
  }
  #history > dl > dd .product {
    margin-top: 2.8571428571vw;
    text-align: center;
  }
  #history > dl > dd .product img {
    width: 71.2142857143vw;
  }
  #history > dl > dd .more {
    margin-top: 4.2857142857vw;
  }
  #history > dl > dd .more a {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
    width: 21.4285714286vw;
    height: 4vw;
    margin: 0 auto;
    border: 1px solid #002f80;
    border-radius: 2.1428571429vw;
    transition: background 0.4s ease;
    position: relative;
  }
  #history > dl > dd .more a::before, #history > dl > dd .more a::after {
    content: "";
    width: 1vw;
    height: 100%;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    transition: opacity 0.4s ease;
    position: absolute;
    right: 2.5vw;
    top: 0;
  }
  #history > dl > dd .more a::before {
    background-image: url("../../img/top/icon_arrow.png");
    opacity: 1;
  }
  #history > dl > dd .more a::after {
    background-image: url("../../img/top/icon_arrow_w.png");
    opacity: 0;
  }
  #history > dl > dd .more a span {
    display: block;
    color: #002f80;
    font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
    font-weight: 600;
    font-size: 1.4285714286vw;
    line-height: 1;
    transition: color 0.4s ease;
  }
  #history > dl > dd .more a:hover {
    background: #002f80;
  }
  #history > dl > dd .more a:hover::before {
    opacity: 0;
  }
  #history > dl > dd .more a:hover::after {
    opacity: 1;
  }
  #history > dl > dd .more a:hover span {
    color: #ffffff;
  }
}
/* ============================================================================================== */
/* SP Size Style                                                                                  */
/* ============================================================================================== */
@media screen and (width < 768px) {
  #firstview img {
    width: 100%;
  }
  #movie_s {
    margin-top: 7.4666666667vw;
    overflow: hidden;
    position: relative;
  }
  #movie_s .label {
    position: absolute;
    right: -2.6666666667vw;
    top: 0;
    z-index: 500;
  }
  #movie_s .label img {
    width: 11.4vw;
  }
  #movie_s .content {
    height: 87.2vw;
    background-image: image-set("../../img/top/movie_decoration_sp.png" 1x, "../../img/top/movie_decoration_sp@2x.png" 2x);
    background-position: center bottom;
    background-size: 100% auto;
    background-repeat: no-repeat;
    position: relative;
    z-index: 0;
  }
  #movie_s .content .bg {
    width: 100%;
    text-align: center;
    position: absolute;
    left: 0;
    top: 5.3333333333vw;
    z-index: 0;
  }
  #movie_s .content .bg img {
    width: 93.6vw;
  }
  #movie_s .content .front {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    -webkit-align-items: center;
    align-items: center;
    -webkit-flex-direction: column;
    flex-direction: column;
    text-align: center;
    position: relative;
    z-index: 10;
  }
  #movie_s .content .front h2 {
    display: block;
    padding: 12vw 0 4.9333333333vw;
  }
  #movie_s .content .front h2 img {
    width: 64.8vw;
  }
  #movie_s .content .front figure {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    -webkit-align-items: flex-end;
    align-items: flex-end;
    -webkit-flex-direction: column;
    flex-direction: column;
  }
  #movie_s .content .front figure a {
    display: block;
    border-radius: 1.3333333333vw;
    background: #ffffff;
  }
  #movie_s .content .front figure a img {
    width: 85.3333333333vw;
    filter: drop-shadow(0 0 0.4vw rgba(0, 0, 0, 0.3));
  }
  #pickup {
    margin-top: 10.6666666667vw;
    overflow: hidden;
    position: relative;
  }
  #pickup .label {
    position: absolute;
    left: -2.6666666667vw;
    top: 0;
    z-index: 500;
  }
  #pickup .label img {
    width: 11.3225333333vw;
  }
  #pickup .headline {
    padding-top: 0.4vw;
    padding-bottom: 6vw;
    text-align: center;
    postion: relative;
    z-index: 10;
  }
  #pickup .headline img {
    width: 40.2666666667vw;
  }
  #pickup .content {
    height: 213.3333333333vw;
    position: relative;
    z-index: 0;
  }
  #pickup .content .bg {
    position: relative;
    z-index: 0;
  }
  #pickup .content .bg > picture {
    position: relative;
    z-index: 0;
  }
  #pickup .content .bg > picture > img {
    width: 100%;
  }
  #pickup .content .bg > img {
    width: 20.5333333333vw;
    position: absolute;
    right: 0.6666666667vw;
    top: -5.3333333333vw;
    z-index: 100;
  }
  #pickup .content .list {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    -webkit-align-items: center;
    align-items: center;
    -webkit-flex-direction: column;
    flex-direction: column;
    width: 61.3333333333vw;
    margin: 0 auto;
    gap: 6.6666666667vw 0;
    position: absolute;
    left: 19.3333333333vw;
    top: 8.1333333333vw;
  }
  #pickup .content .list a img {
    width: 61.3333333333vw;
    aspect-ratio: 300/300;
    filter: drop-shadow(0 0 0.6133333333vw rgba(0, 0, 0, 0.3));
  }
  #feature {
    margin-top: 15.3333333333vw;
    padding-bottom: 18.5333333333vw;
    overflow: hidden;
    position: relative;
  }
  #feature .label {
    position: absolute;
    right: -2.6666666667vw;
    top: 0;
    z-index: 500;
  }
  #feature .label img {
    width: 11.4vw;
    aspect-ratio: 85.5/208.344;
  }
  #feature > dl {
    padding-top: 0.4vw;
  }
  #feature > dl > dt {
    text-align: center;
  }
  #feature > dl > dt img {
    width: 36.5333333333vw;
    aspect-ratio: 182.246/46.41;
  }
  #feature > dl > dd {
    height: 129.3333333333vw;
    margin-top: 6.6666666667vw;
    position: relative;
  }
  #feature > dl > dd .bg {
    width: 100%;
    height: 100%;
    clip-path: url("#mask___feature_clip_path_sp");
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
  }
  #feature > dl > dd .bg img {
    width: 100%;
    height: 100%;
  }
  #feature > dl > dd .decoration {
    bottom: -4.6666666667vw;
    left: 6vw;
    position: absolute;
    z-index: 10;
  }
  #feature > dl > dd .decoration img {
    width: 20.9333333333vw;
    aspect-ratio: 157/85;
  }
  #feature > dl > dd .points {
    position: relative;
    z-index: 20;
  }
  #feature > dl > dd .points > ul {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    padding-top: 14.9333333333vw;
    gap: 12.2666666667vw 0;
  }
  #feature > dl > dd .points > ul > li:nth-child(1) {
    padding-left: 8vw;
  }
  #feature > dl > dd .points > ul > li:nth-child(1) img {
    width: 34.6666666667vw;
    aspect-ratio: 201/254;
  }
  #feature > dl > dd .points > ul > li:nth-child(2) {
    padding-left: 8.9333333333vw;
  }
  #feature > dl > dd .points > ul > li:nth-child(2) img {
    width: 38.5333333333vw;
    aspect-ratio: 225/254;
  }
  #feature > dl > dd .points > ul > li:nth-child(3) {
    padding-left: 25.3333333333vw;
  }
  #feature > dl > dd .points > ul > li:nth-child(3) img {
    width: 49.0666666667vw;
    aspect-ratio: 284/254;
  }
  #lineup {
    padding-bottom: 8.2666666667vw;
    background-image: url("../../img/top/lineup_decoration.png");
    background-position: center bottom;
    background-size: auto 17.3333333333vw;
    background-repeat: repeat-x;
    position: relative;
  }
  #lineup .label {
    position: absolute;
    left: -2.6666666667vw;
    top: 0;
    z-index: 500;
  }
  #lineup .label img {
    width: 11.3225333333vw;
    aspect-ratio: 84.919/207.611;
  }
  #lineup > dl {
    padding-top: 0.2666666667vw;
  }
  #lineup > dl > dt {
    text-align: center;
  }
  #lineup > dl > dt img {
    width: 58.4vw;
    aspect-ratio: 292.014/46.693;
  }
  #lineup > dl > dd {
    margin-top: 7.4666666667vw;
  }
  #lineup > dl > dd .list > ul {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 3.3333333333vw 1.8666666667vw;
  }
  #lineup > dl > dd .list > ul > li {
    position: relative;
  }
  #lineup > dl > dd .list > ul > li:last-child {
    padding-top: 0.4vw;
  }
  #lineup > dl > dd .list > ul > li:last-child .content {
    bottom: 4.2666666667vw;
  }
  #lineup > dl > dd .list > ul > li .product img {
    width: 44.6666666667vw;
  }
  #lineup > dl > dd .list > ul > li .content {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 5.3333333333vw;
    z-index: 10;
  }
  #lineup > dl > dd .list > ul > li .content .name {
    text-align: center;
    color: #002f80;
    font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
    font-weight: 600;
    font-size: 3.2vw;
    line-height: 4.4vw;
  }
  #lineup > dl > dd .list > ul > li .content .name span.cd_sp_only {
    display: inline;
  }
  #lineup > dl > dd .list > ul > li .content .link {
    margin-top: 2.4vw;
  }
  #lineup > dl > dd .list > ul > li .content .link a {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
    width: 34vw;
    height: 7.6vw;
    margin: 0 auto;
    background: #ffffff;
    border: 1px solid #002f80;
    border-radius: 4vw;
  }
  #lineup > dl > dd .list > ul > li .content .link a span {
    display: block;
    padding-right: 5vw;
    color: #002f80;
    font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
    font-weight: 600;
    font-size: 2.8vw;
    line-height: 4.4vw;
    position: relative;
  }
  #lineup > dl > dd .list > ul > li .content .link a span::before, #lineup > dl > dd .list > ul > li .content .link a span::after {
    content: "";
    width: 3vw;
    aspect-ratio: 61/45;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    transform: translateY(-50%);
    position: absolute;
    right: 0;
    top: 50%;
  }
  #lineup > dl > dd .list > ul > li .content .link a span::before {
    background-image: url("../../img/top/icon_external.png");
    opacity: 1;
  }
  #lineup > dl > dd .list > ul > li .content .link a span::after {
    background-image: url("../../img/top/icon_external_w.png");
    opacity: 0;
  }
  #lineup > dl > dd .list > ul > li .content .link a:hover {
    background: #002f80;
  }
  #lineup > dl > dd .list > ul > li .content .link a:hover span {
    color: #ffffff;
  }
  #lineup > dl > dd .list > ul > li .content .link a:hover span::before {
    opacity: 0;
  }
  #lineup > dl > dd .list > ul > li .content .link a:hover span::after {
    opacity: 1;
  }
  #lineup > dl > dd .search_stores_from_the_map {
    position: relative;
  }
  #lineup > dl > dd .search_stores_from_the_map a {
    display: inline-block;
    background: #ffffff;
    border-radius: 1.688vw;
    transform: translateX(-50%);
    position: absolute;
    left: 50%;
    top: 3.3333333333vw;
  }
  #lineup > dl > dd .search_stores_from_the_map a img {
    width: 80vw;
    aspect-ratio: 474/80;
    transition: opacity 0.4s ease;
    opacity: 1;
  }
  #lineup > dl > dd .search_stores_from_the_map a img:hover {
    opacity: 0.6;
  }
  #recipe {
    margin-top: 18.6666666667vw;
    position: relative;
  }
  #recipe .label {
    position: absolute;
    left: 0;
    top: 17.8666666667vw;
    z-index: 500;
  }
  #recipe .label img {
    width: 8.6558666667vw;
    aspect-ratio: 64.919/184.71;
  }
  #recipe .bg {
    height: 217.8666666667vw;
    clip-path: url("#mask___recipe_clip_path_sp");
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
  }
  #recipe .bg img {
    width: 100%;
    height: 100%;
  }
  #recipe .decoration {
    width: 93.3333333333vw;
    margin: 0 auto;
    position: relative;
    z-index: 10;
  }
  #recipe .decoration .item {
    position: absolute;
  }
  #recipe .decoration .item.num01 {
    width: 20vw;
    aspect-ratio: 150/85;
    top: -3.0666666667vw;
    right: 9.3333333333vw;
  }
  #recipe .decoration .item.num02 {
    width: 39.3333333333vw;
    aspect-ratio: 295/160;
    top: 203.2vw;
    left: 5.8666666667vw;
  }
  #recipe > dl {
    height: 217.8666666667vw;
    position: relative;
    z-index: 100;
  }
  #recipe > dl > dt {
    padding-top: 17.3333333333vw;
    text-align: center;
  }
  #recipe > dl > dt img {
    width: 24.4vw;
    aspect-ratio: 122.047/41.955;
  }
  #recipe > dl > dd {
    margin-top: 4.2666666667vw;
  }
  #recipe > dl > dd .explain {
    text-align: center;
    color: #002f80;
    font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
    font-weight: 600;
    font-size: 3.7333333333vw;
    line-height: 6vw;
  }
  #recipe > dl > dd .recipe_list {
    width: 93.3333333333vw;
    height: 160.8vw;
    margin: 6.2666666667vw auto 0;
    background: #ffffff;
    border-radius: 2.6666666667vw;
  }
  #recipe > dl > dd .recipe_list > ul {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 82.6666666667vw;
    margin: 0 auto;
    padding-top: 7.0666666667vw;
    gap: 4vw 0;
  }
  #recipe > dl > dd .recipe_list > ul > li a {
    display: inline;
  }
  #recipe > dl > dd .recipe_list > ul > li a .image {
    transition: opacity 0.6s ease;
  }
  #recipe > dl > dd .recipe_list > ul > li a .image img {
    width: 38.6666666667vw;
    aspect-ratio: 270/230;
    border-radius: 1.3333333333vw;
  }
  #recipe > dl > dd .recipe_list > ul > li a .name {
    margin-top: 1.6vw;
    text-align: center;
  }
  #recipe > dl > dd .recipe_list > ul > li a .name p {
    color: #002f80;
    font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
    font-weight: 600;
    font-size: 3.2vw;
    line-height: 4vw;
    position: relative;
  }
  #recipe > dl > dd .recipe_list > ul > li a:hover .image {
    opacity: 0.7;
  }
  #recipe > dl > dd .recipe_list > ul > li a:hover .name p {
    text-decoration: underline;
  }
  #recipe > dl > dd .recipe_list .more {
    margin-top: 5.6vw;
  }
  #recipe > dl > dd .recipe_list .more a {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
    width: 60vw;
    height: 11.2vw;
    margin: 0 auto;
    border: 0.2vw solid #002f80;
    border-radius: 6vw;
    position: relative;
  }
  #recipe > dl > dd .recipe_list .more a::before, #recipe > dl > dd .recipe_list .more a::after {
    content: "";
    width: 2.6666666667vw;
    height: 100%;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    position: absolute;
    right: 7.0666666667vw;
    top: 0;
  }
  #recipe > dl > dd .recipe_list .more a span {
    display: block;
    color: #002f80;
    font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
    font-weight: 600;
    font-size: 4vw;
    line-height: 1;
  }
  #recipe > dl > dd .recipe_list .more a::before {
    background-image: url("../../img/top/icon_arrow.png");
    opacity: 1;
  }
  #recipe > dl > dd .recipe_list .more a::after {
    background-image: url("../../img/top/icon_arrow_w.png");
    opacity: 0;
  }
  #recipe > dl > dd .recipe_list .more a:hover {
    background: #002f80;
  }
  #recipe > dl > dd .recipe_list .more a:hover::before {
    opacity: 0;
  }
  #recipe > dl > dd .recipe_list .more a:hover::after {
    opacity: 1;
  }
  #recipe > dl > dd .recipe_list .more a:hover span {
    color: #ffffff;
  }
  #history {
    margin-top: 25.2vw;
    padding-bottom: 13.8666666667vw;
    position: relative;
  }
  #history .label {
    position: absolute;
    left: -2.6666666667vw;
    top: 0;
    z-index: 500;
  }
  #history .label img {
    width: 11.3225333333vw;
    aspect-ratio: 84.919/190.261;
  }
  #history > dl > dt {
    padding-top: 0;
    text-align: center;
  }
  #history > dl > dt img {
    width: 34.4vw;
    aspect-ratio: 171.834/43.049;
  }
  #history > dl > dd {
    margin-top: 6.2666666667vw;
  }
  #history > dl > dd .explain {
    text-align: center;
    color: #002f80;
    font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
    font-weight: 600;
    font-size: 3.7333333333vw;
    line-height: 6vw;
  }
  #history > dl > dd .product {
    margin: 6.6666666667vw auto 0;
    padding-left: 5.3333333333vw;
  }
  #history > dl > dd .product img {
    width: 100%;
  }
  #history > dl > dd .more {
    margin-top: 8vw;
  }
  #history > dl > dd .more a {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
    width: 60vw;
    height: 11.2vw;
    margin: 0 auto;
    border: 0.2vw solid #002f80;
    border-radius: 6vw;
    position: relative;
  }
  #history > dl > dd .more a::before, #history > dl > dd .more a::after {
    content: "";
    width: 2.6666666667vw;
    height: 100%;
    background-image: url("../../img/top/icon_arrow.png");
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    position: absolute;
    right: 7.0666666667vw;
    top: 0;
  }
  #history > dl > dd .more a::before {
    background-image: url("../../img/top/icon_arrow.png");
    opacity: 1;
  }
  #history > dl > dd .more a::after {
    background-image: url("../../img/top/icon_arrow_w.png");
    opacity: 0;
  }
  #history > dl > dd .more a span {
    display: block;
    color: #002f80;
    font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
    font-weight: 600;
    font-size: 4vw;
    line-height: 1;
  }
  #history > dl > dd .more a:hover {
    background: #002f80;
  }
  #history > dl > dd .more a:hover::before {
    opacity: 0;
  }
  #history > dl > dd .more a:hover::after {
    opacity: 1;
  }
  #history > dl > dd .more a:hover span {
    color: #ffffff;
  }
}