/* ============================================================================================== */
/* PC Size Style                                                                                  */
/* ============================================================================================== */
@media screen and (1024px <= width) {
  #firstview {
    position: relative;
  }
  #firstview::after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
  }
  #firstview img {
    width: 100%;
    pointer-events: none;
    position: relative;
    z-index: 0;
  }
  #movie {
    container-type: inline-size;
    --base-width: 1400;
    --unit-ratio: calc(100cqi / var(--base-width));
    margin-top: 81px;
    overflow: hidden;
    position: relative;
    z-index: 0;
  }
  #movie .label {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 500;
  }
  #movie .label img {
    width: 66px;
  }
  #movie .headline {
    padding-top: 54px;
    padding-bottom: 38px;
    text-align: center;
    postion: relative;
    z-index: 10;
  }
  #movie .headline img {
    width: 208px;
  }
  #movie .content {
    margin-top: calc(-6 * var(--unit-ratio));
    margin-bottom: calc(-30 * var(--unit-ratio));
    position: relative;
  }
  #movie .content .bg {
    position: relative;
    z-index: 0;
  }
  #movie .content .bg img {
    width: 100%;
    pointer-events: none;
  }
  #movie .content .front {
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
  }
  #movie .content .front .movie_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;
    padding-top: calc(155 * var(--unit-ratio));
    gap: calc(73 * var(--unit-ratio)) 0;
  }
  #movie .content .front .movie_list li {
    width: 100%;
    position: relative;
  }
  #movie .content .front .movie_list li .movie_item {
    width: calc(609 * var(--unit-ratio));
    margin: 0 auto;
    position: relative;
    left: calc(11 * var(--unit-ratio));
  }
  #movie .content .front .movie_list li .movie_item a {
    display: block;
    position: relative;
    z-index: 0;
  }
  #movie .content .front .movie_list li .movie_item a::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 7;
  }
  #movie .content .front .movie_list li .movie_item a::after {
    content: "";
    width: 100%;
    height: 100%;
    background-image: url("../../img/top/movie_icon_play.svg");
    background-size: 100% auto;
    transition: opacity 0.4s ease;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 5;
  }
  #movie .content .front .movie_list li .movie_item a:hover::after {
    opacity: 0.4;
  }
  #movie .content .front .movie_list li .movie_item a img {
    width: 100%;
    pointer-events: none;
    position: relative;
    z-index: 0;
  }
  #movie .content .front .movie_list li .movie_item span::before, #movie .content .front .movie_list li .movie_item span::after {
    content: "";
    opacity: 0;
    position: absolute;
    z-index: 100;
  }
  #movie .content .front .movie_list li .movie_item span:nth-of-type(1)::before, #movie .content .front .movie_list li .movie_item span:nth-of-type(1)::after {
    width: 100%;
    left: 0;
  }
  #movie .content .front .movie_list li .movie_item span:nth-of-type(1)::before {
    height: calc(25 * var(--unit-ratio));
    top: 0;
  }
  #movie .content .front .movie_list li .movie_item span:nth-of-type(1)::after {
    height: calc(89 * var(--unit-ratio));
    bottom: 0;
  }
  #movie .content .front .movie_list li .movie_item span:nth-of-type(2)::before, #movie .content .front .movie_list li .movie_item span:nth-of-type(2)::after {
    width: calc(34 * var(--unit-ratio));
    height: 100%;
    top: 0;
  }
  #movie .content .front .movie_list li .movie_item span:nth-of-type(2)::before {
    left: 0;
  }
  #movie .content .front .movie_list li .movie_item span:nth-of-type(2)::after {
    right: 0;
  }
  #movie .content .front .movie_list li .decoration {
    pointer-events: none;
    position: absolute;
    z-index: 200;
  }
  #movie .content .front .movie_list li .decoration .animation {
    position: absolute;
  }
  #movie .content .front .movie_list li .decoration .animation img {
    width: 100%;
    position: relative;
    z-index: 0;
  }
  #movie .content .front .movie_list li .decoration .animation::after {
    content: "";
    width: 100%;
    height: 100%;
    pointer-events: auto;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 100;
  }
  #movie .content .front .movie_list li:nth-of-type(1) .decoration {
    left: calc(116 * var(--unit-ratio));
    top: calc(-37 * var(--unit-ratio));
  }
  #movie .content .front .movie_list li:nth-of-type(1) .decoration img.text {
    width: calc(236.504 * var(--unit-ratio));
  }
  #movie .content .front .movie_list li:nth-of-type(1) .decoration .animation {
    width: calc(320 * var(--unit-ratio));
    left: calc(-64 * var(--unit-ratio));
    top: calc(89 * var(--unit-ratio));
  }
  #movie .content .front .movie_list li:nth-of-type(2) .decoration {
    right: calc(94 * var(--unit-ratio));
    top: calc(-140 * var(--unit-ratio));
  }
  #movie .content .front .movie_list li:nth-of-type(2) .decoration img.text {
    width: calc(236.504 * var(--unit-ratio));
  }
  #movie .content .front .movie_list li:nth-of-type(2) .decoration .animation {
    width: calc(300 * var(--unit-ratio));
    left: calc(0 * var(--unit-ratio));
    top: calc(73 * var(--unit-ratio));
  }
  #movie .content .front .movie_list li:nth-of-type(3) .decoration {
    left: calc(74 * var(--unit-ratio));
    top: calc(-90 * var(--unit-ratio));
  }
  #movie .content .front .movie_list li:nth-of-type(3) .decoration img.text {
    width: calc(237.518 * var(--unit-ratio));
  }
  #movie .content .front .movie_list li:nth-of-type(3) .decoration .animation {
    width: calc(230 * var(--unit-ratio));
    left: calc(-10 * var(--unit-ratio));
    top: calc(70 * var(--unit-ratio));
  }
  #movie .content .front .movie_list li:nth-of-type(4) .decoration {
    right: calc(76 * var(--unit-ratio));
    top: calc(-129 * var(--unit-ratio));
  }
  #movie .content .front .movie_list li:nth-of-type(4) .decoration img.text {
    width: calc(234.658 * var(--unit-ratio));
  }
  #movie .content .front .movie_list li:nth-of-type(4) .decoration .animation {
    width: calc(270 * var(--unit-ratio));
    transform: translateX(-50%);
    left: 50%;
    top: calc(79 * var(--unit-ratio));
  }
  #movie .content .front .movie_list li:nth-of-type(5) .decoration {
    left: calc(115 * var(--unit-ratio));
    top: calc(-90 * var(--unit-ratio));
  }
  #movie .content .front .movie_list li:nth-of-type(5) .decoration img.text {
    width: calc(264.144 * var(--unit-ratio));
  }
  #pickup {
    margin-top: 30px;
    position: relative;
    z-index: 10;
  }
  #pickup .label {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 500;
  }
  #pickup .label img {
    width: 84.919px;
  }
  #pickup .headline {
    padding-top: 18px;
    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 {
    position: relative;
  }
  #firstview::after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
  }
  #firstview img {
    width: 100%;
    pointer-events: none;
    position: relative;
    z-index: 0;
  }
  #movie {
    container-type: inline-size;
    --base-width: 1400;
    --unit-ratio: calc(100cqi / var(--base-width));
    margin-top: 5.7857142857vw;
    overflow: hidden;
    position: relative;
    z-index: 0;
  }
  #movie .label {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 500;
  }
  #movie .label img {
    width: 4.7142857143vw;
  }
  #movie .headline {
    padding-top: 3.8571428571vw;
    padding-bottom: 2.7142857143vw;
    text-align: center;
    postion: relative;
    z-index: 10;
  }
  #movie .headline img {
    width: 14.8571428571vw;
  }
  #movie .content {
    margin-top: calc(-6 * var(--unit-ratio));
    margin-bottom: calc(-30 * var(--unit-ratio));
    position: relative;
  }
  #movie .content .bg {
    position: relative;
    z-index: 0;
  }
  #movie .content .bg img {
    width: 100%;
    pointer-events: none;
  }
  #movie .content .front {
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
  }
  #movie .content .front .movie_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;
    padding-top: calc(155 * var(--unit-ratio));
    gap: calc(73 * var(--unit-ratio)) 0;
  }
  #movie .content .front .movie_list li {
    width: 100%;
    position: relative;
  }
  #movie .content .front .movie_list li .movie_item {
    width: calc(609 * var(--unit-ratio));
    margin: 0 auto;
    position: relative;
    left: calc(11 * var(--unit-ratio));
  }
  #movie .content .front .movie_list li .movie_item a {
    display: block;
    position: relative;
    z-index: 0;
  }
  #movie .content .front .movie_list li .movie_item a::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 7;
  }
  #movie .content .front .movie_list li .movie_item a::after {
    content: "";
    width: 100%;
    height: 100%;
    background-image: url("../../img/top/movie_icon_play.svg");
    background-size: 100% auto;
    transition: opacity 0.4s ease;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 5;
  }
  #movie .content .front .movie_list li .movie_item a:hover::after {
    opacity: 0.4;
  }
  #movie .content .front .movie_list li .movie_item a img {
    width: 100%;
    pointer-events: none;
    position: relative;
    z-index: 0;
  }
  #movie .content .front .movie_list li .movie_item span::before, #movie .content .front .movie_list li .movie_item span::after {
    content: "";
    opacity: 0;
    position: absolute;
    z-index: 100;
  }
  #movie .content .front .movie_list li .movie_item span:nth-of-type(1)::before, #movie .content .front .movie_list li .movie_item span:nth-of-type(1)::after {
    width: 100%;
    left: 0;
  }
  #movie .content .front .movie_list li .movie_item span:nth-of-type(1)::before {
    height: calc(25 * var(--unit-ratio));
    top: 0;
  }
  #movie .content .front .movie_list li .movie_item span:nth-of-type(1)::after {
    height: calc(89 * var(--unit-ratio));
    bottom: 0;
  }
  #movie .content .front .movie_list li .movie_item span:nth-of-type(2)::before, #movie .content .front .movie_list li .movie_item span:nth-of-type(2)::after {
    width: calc(34 * var(--unit-ratio));
    height: 100%;
    top: 0;
  }
  #movie .content .front .movie_list li .movie_item span:nth-of-type(2)::before {
    left: 0;
  }
  #movie .content .front .movie_list li .movie_item span:nth-of-type(2)::after {
    right: 0;
  }
  #movie .content .front .movie_list li .decoration {
    pointer-events: none;
    position: absolute;
    z-index: 200;
  }
  #movie .content .front .movie_list li .decoration .animation {
    position: absolute;
  }
  #movie .content .front .movie_list li .decoration .animation img {
    width: 100%;
    position: relative;
    z-index: 0;
  }
  #movie .content .front .movie_list li .decoration .animation::after {
    content: "";
    width: 100%;
    height: 100%;
    pointer-events: auto;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 100;
  }
  #movie .content .front .movie_list li:nth-of-type(1) .decoration {
    left: calc(116 * var(--unit-ratio));
    top: calc(-37 * var(--unit-ratio));
  }
  #movie .content .front .movie_list li:nth-of-type(1) .decoration img.text {
    width: calc(236.504 * var(--unit-ratio));
  }
  #movie .content .front .movie_list li:nth-of-type(1) .decoration .animation {
    width: calc(320 * var(--unit-ratio));
    left: calc(-64 * var(--unit-ratio));
    top: calc(89 * var(--unit-ratio));
  }
  #movie .content .front .movie_list li:nth-of-type(2) .decoration {
    right: calc(94 * var(--unit-ratio));
    top: calc(-140 * var(--unit-ratio));
  }
  #movie .content .front .movie_list li:nth-of-type(2) .decoration img.text {
    width: calc(236.504 * var(--unit-ratio));
  }
  #movie .content .front .movie_list li:nth-of-type(2) .decoration .animation {
    width: calc(300 * var(--unit-ratio));
    left: calc(0 * var(--unit-ratio));
    top: calc(73 * var(--unit-ratio));
  }
  #movie .content .front .movie_list li:nth-of-type(3) .decoration {
    left: calc(74 * var(--unit-ratio));
    top: calc(-90 * var(--unit-ratio));
  }
  #movie .content .front .movie_list li:nth-of-type(3) .decoration img.text {
    width: calc(237.518 * var(--unit-ratio));
  }
  #movie .content .front .movie_list li:nth-of-type(3) .decoration .animation {
    width: calc(230 * var(--unit-ratio));
    left: calc(-10 * var(--unit-ratio));
    top: calc(70 * var(--unit-ratio));
  }
  #movie .content .front .movie_list li:nth-of-type(4) .decoration {
    right: calc(76 * var(--unit-ratio));
    top: calc(-129 * var(--unit-ratio));
  }
  #movie .content .front .movie_list li:nth-of-type(4) .decoration img.text {
    width: calc(234.658 * var(--unit-ratio));
  }
  #movie .content .front .movie_list li:nth-of-type(4) .decoration .animation {
    width: calc(270 * var(--unit-ratio));
    transform: translateX(-50%);
    left: 50%;
    top: calc(79 * var(--unit-ratio));
  }
  #movie .content .front .movie_list li:nth-of-type(5) .decoration {
    left: calc(115 * var(--unit-ratio));
    top: calc(-90 * var(--unit-ratio));
  }
  #movie .content .front .movie_list li:nth-of-type(5) .decoration img.text {
    width: calc(264.144 * var(--unit-ratio));
  }
  #pickup {
    margin-top: 2.1428571429vw;
    position: relative;
    z-index: 10;
  }
  #pickup .label {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 500;
  }
  #pickup .label img {
    width: 6.0656428571vw;
  }
  #pickup .headline {
    padding-top: 1.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 {
    position: relative;
  }
  #firstview::after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
  }
  #firstview img {
    width: 100%;
    pointer-events: none;
    position: relative;
    z-index: 0;
  }
  #movie {
    margin-top: 12.6666666667vw;
    overflow: hidden;
    position: relative;
    z-index: 0;
  }
  #movie .label {
    position: absolute;
    right: 0;
    top: 2.8vw;
    z-index: 500;
  }
  #movie .label img {
    width: 8.5333333333vw;
  }
  #movie .headline {
    text-align: center;
    postion: relative;
    z-index: 10;
  }
  #movie .headline img {
    width: 26.9333333333vw;
  }
  #movie .content {
    position: relative;
  }
  #movie .content .bg {
    position: relative;
    z-index: 0;
  }
  #movie .content .bg img {
    width: 100%;
    pointer-events: none;
  }
  #movie .content .front {
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
  }
  #movie .content .front .movie_list {
    padding-top: 35.0666666667vw;
  }
  #movie .content .front .movie_list li {
    width: 100%;
    position: relative;
  }
  #movie .content .front .movie_list li .movie_item {
    width: 65.2vw;
    margin: 0 auto;
    position: relative;
  }
  #movie .content .front .movie_list li .movie_item a {
    display: block;
    position: relative;
    z-index: 0;
  }
  #movie .content .front .movie_list li .movie_item a::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 7;
  }
  #movie .content .front .movie_list li .movie_item a::after {
    content: "";
    width: 100%;
    height: 100%;
    background-image: url("../../img/top/movie_icon_play.svg");
    background-size: 100% auto;
    transition: opacity 0.4s ease;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 5;
  }
  #movie .content .front .movie_list li .movie_item a:hover::after {
    opacity: 0.4;
  }
  #movie .content .front .movie_list li .movie_item a img {
    width: 100%;
    pointer-events: none;
    position: relative;
    z-index: 0;
  }
  #movie .content .front .movie_list li .movie_item span::before, #movie .content .front .movie_list li .movie_item span::after {
    content: "";
    opacity: 0;
    position: absolute;
    z-index: 100;
  }
  #movie .content .front .movie_list li .movie_item span:nth-of-type(1)::before, #movie .content .front .movie_list li .movie_item span:nth-of-type(1)::after {
    width: 100%;
    left: 0;
  }
  #movie .content .front .movie_list li .movie_item span:nth-of-type(1)::before {
    height: 2.6765188834vw;
    top: 0;
  }
  #movie .content .front .movie_list li .movie_item span:nth-of-type(1)::after {
    height: 9.528407225vw;
    bottom: 0;
  }
  #movie .content .front .movie_list li .movie_item span:nth-of-type(2)::before, #movie .content .front .movie_list li .movie_item span:nth-of-type(2)::after {
    width: 3.6400656814vw;
    height: 100%;
    top: 0;
  }
  #movie .content .front .movie_list li .movie_item span:nth-of-type(2)::before {
    left: 0;
  }
  #movie .content .front .movie_list li .movie_item span:nth-of-type(2)::after {
    right: 0;
  }
  #movie .content .front .movie_list li .decoration {
    pointer-events: none;
    position: absolute;
    z-index: 200;
  }
  #movie .content .front .movie_list li .decoration .animation {
    position: absolute;
  }
  #movie .content .front .movie_list li .decoration .animation img {
    width: 100%;
    position: relative;
    z-index: 0;
  }
  #movie .content .front .movie_list li .decoration .animation::after {
    content: "";
    width: 100%;
    height: 100%;
    pointer-events: auto;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 100;
  }
  #movie .content .front .movie_list li:nth-of-type(1) .decoration {
    left: 4.9333333333vw;
    top: -6.6666666667vw;
  }
  #movie .content .front .movie_list li:nth-of-type(1) .decoration img.text {
    width: 28.3733333333vw;
  }
  #movie .content .front .movie_list li:nth-of-type(1) .decoration .animation {
    width: 25.6vw;
    left: -4vw;
    top: 13.3333333333vw;
  }
  #movie .content .front .movie_list li:nth-of-type(1) .movie_item {
    margin-left: 27.4666666667vw;
    margin-right: auto;
  }
  #movie .content .front .movie_list li:nth-of-type(2) {
    margin-top: 12vw;
  }
  #movie .content .front .movie_list li:nth-of-type(2) .decoration {
    right: 3.3333333333vw;
    top: -1.7333333333vw;
  }
  #movie .content .front .movie_list li:nth-of-type(2) .decoration img.text {
    width: 23.1466666667vw;
  }
  #movie .content .front .movie_list li:nth-of-type(2) .decoration .animation {
    width: 24vw;
    left: 0vw;
    top: 5.8666666667vw;
  }
  #movie .content .front .movie_list li:nth-of-type(2) .movie_item {
    margin-left: 7.6vw;
    margin-right: auto;
  }
  #movie .content .front .movie_list li:nth-of-type(3) {
    margin-top: 12vw;
  }
  #movie .content .front .movie_list li:nth-of-type(3) .decoration {
    left: 1.0666666667vw;
    top: 6.2666666667vw;
  }
  #movie .content .front .movie_list li:nth-of-type(3) .decoration img.text {
    width: 24.3866666667vw;
  }
  #movie .content .front .movie_list li:nth-of-type(3) .decoration .animation {
    width: 18.4vw;
    left: 4vw;
    top: 9.3333333333vw;
  }
  #movie .content .front .movie_list li:nth-of-type(3) .movie_item {
    margin-left: 28vw;
    margin-right: auto;
  }
  #movie .content .front .movie_list li:nth-of-type(4) {
    margin-top: 12vw;
  }
  #movie .content .front .movie_list li:nth-of-type(4) .decoration {
    right: 3.7333333333vw;
    top: 5.2vw;
  }
  #movie .content .front .movie_list li:nth-of-type(4) .decoration img.text {
    width: 22.8533333333vw;
  }
  #movie .content .front .movie_list li:nth-of-type(4) .decoration .animation {
    width: 21.6vw;
    transform: translateX(-50%);
    left: 50%;
    top: 9.8666666667vw;
  }
  #movie .content .front .movie_list li:nth-of-type(4) .movie_item {
    margin-left: 7.3333333333vw;
    margin-right: auto;
  }
  #movie .content .front .movie_list li:nth-of-type(5) {
    margin-top: 20.5333333333vw;
  }
  #movie .content .front .movie_list li:nth-of-type(5) .decoration {
    left: 8vw;
    top: -13.7333333333vw;
  }
  #movie .content .front .movie_list li:nth-of-type(5) .decoration img.text {
    width: 27.12vw;
  }
  #movie .content .front .movie_list li:nth-of-type(5) .movie_item {
    margin-left: 18.6666666667vw;
    margin-right: auto;
  }
  #pickup {
    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;
  }
}