/* ============================================================================================== */
/* PC Size Style                                                                                  */
/* ============================================================================================== */
@media screen and (1024px <= width) {
  #firstview {
    height: 712px;
    position: relative;
    z-index: 0;
  }
  #firstview .product {
    position: absolute;
    left: calc(50% + 182px);
    top: 78px;
    z-index: 100;
  }
  #firstview .product img {
    width: 164px;
    aspect-ratio: 164/423;
  }
  #firstview .catchphrase {
    position: absolute;
    left: calc(50% - 361px);
    top: 160px;
    z-index: 150;
  }
  #firstview .catchphrase .item {
    display: block;
    position: relative;
  }
  #firstview .catchphrase .item.num01 img {
    width: 355.726px;
    aspect-ratio: 355.726/43.508;
  }
  #firstview .catchphrase .item.num02 .line,
  #firstview .catchphrase .item.num02 .text, #firstview .catchphrase .item.num03 .line,
  #firstview .catchphrase .item.num03 .text {
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    position: absolute;
    left: 0;
    top: 0;
  }
  #firstview .catchphrase .item.num02 .line img,
  #firstview .catchphrase .item.num02 .text img, #firstview .catchphrase .item.num03 .line img,
  #firstview .catchphrase .item.num03 .text img {
    width: 100%;
    height: 100%;
    transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
    position: absolute;
    left: 0;
    top: 0;
  }
  #firstview .catchphrase .item.num02 .line, #firstview .catchphrase .item.num03 .line {
    z-index: 5;
  }
  #firstview .catchphrase .item.num02 .text, #firstview .catchphrase .item.num03 .text {
    z-index: 10;
  }
  #firstview .catchphrase .item.num02 .text img, #firstview .catchphrase .item.num03 .text img {
    transform-origin: left bottom;
    transform: translate3d(0, 110%, 0);
  }
  #firstview .catchphrase .item.num02 .text img:nth-child(1), #firstview .catchphrase .item.num03 .text img:nth-child(1) {
    transition-delay: 0.0322086s;
  }
  #firstview .catchphrase .item.num02 .text img:nth-child(2), #firstview .catchphrase .item.num03 .text img:nth-child(2) {
    transition-delay: 0.0644172s;
  }
  #firstview .catchphrase .item.num02 .text img:nth-child(3), #firstview .catchphrase .item.num03 .text img:nth-child(3) {
    transition-delay: 0.0966258s;
  }
  #firstview .catchphrase .item.num02 .text img:nth-child(4), #firstview .catchphrase .item.num03 .text img:nth-child(4) {
    transition-delay: 0.1288344s;
  }
  #firstview .catchphrase .item.num02 .text img:nth-child(5), #firstview .catchphrase .item.num03 .text img:nth-child(5) {
    transition-delay: 0.161043s;
  }
  #firstview .catchphrase .item.num02 .text img:nth-child(6), #firstview .catchphrase .item.num03 .text img:nth-child(6) {
    transition-delay: 0.1932516s;
  }
  #firstview .catchphrase .item.num02 .text img:nth-child(7), #firstview .catchphrase .item.num03 .text img:nth-child(7) {
    transition-delay: 0.2254602s;
  }
  #firstview .catchphrase .item.num02 .text img:nth-child(8), #firstview .catchphrase .item.num03 .text img:nth-child(8) {
    transition-delay: 0.2576688s;
  }
  #firstview .catchphrase .item.num02 .text img:nth-child(9), #firstview .catchphrase .item.num03 .text img:nth-child(9) {
    transition-delay: 0.2898774s;
  }
  #firstview .catchphrase .item.num02 .text img:nth-child(10), #firstview .catchphrase .item.num03 .text img:nth-child(10) {
    transition-delay: 0.322086s;
  }
  #firstview .catchphrase .item.num02 .text img:nth-child(11), #firstview .catchphrase .item.num03 .text img:nth-child(11) {
    transition-delay: 0.3542946s;
  }
  #firstview .catchphrase .item.num02 {
    width: 536px;
    aspect-ratio: 536/57;
    margin-top: 33px;
  }
  #firstview .catchphrase .item.num03 {
    width: 463px;
    aspect-ratio: 463/58;
    margin-top: 19px;
  }
  #firstview .catchphrase.active .item.num02 .line img,
  #firstview .catchphrase.active .item.num02 .text img, #firstview .catchphrase.active .item.num03 .line img,
  #firstview .catchphrase.active .item.num03 .text img {
    transform: translate3d(0, 0, 0);
  }
  #firstview .decoration_01,
  #firstview .decoration_02 {
    width: calc(100% - 42px);
    height: 100%;
    transform: translateX(-50%);
    pointer-events: none;
    position: absolute;
    left: 50%;
    top: 0;
    z-index: 10;
  }
  #firstview .decoration_01 img,
  #firstview .decoration_02 img {
    width: 1357px;
    aspect-ratio: 1357/723;
    transform: translateX(-50%);
    position: absolute;
    left: 50%;
    top: 0;
    z-index: 10;
  }
  #firstview .decoration_01 {
    clip-path: url("#mask___firstview_clip_path_pc");
    overflow: hidden;
  }
  #firstview .bg {
    width: calc(100% - 42px);
    height: 100%;
    margin: 0 auto;
    pointer-events: none;
  }
  #firstview .bg img {
    width: 100%;
    height: 100%;
    clip-path: url("#mask___firstview_clip_path_pc");
  }
  #pickup {
    height: 340px;
    margin-top: -163px;
    background-image: url("../../img/top/pickup_decoration.png");
    background-position: center bottom;
    background-size: auto 130px;
    background-repeat: repeat-x;
    position: relative;
    z-index: 100;
  }
  #pickup .label {
    position: absolute;
    left: 0;
    top: 10px;
    z-index: 500;
  }
  #pickup .label img {
    width: 84.919px;
    aspect-ratio: 84.919/212.459;
  }
  #pickup .content {
    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;
  }
  #pickup .content a {
    border-radius: 10px;
    background: #ffffff;
  }
  #pickup .content a img {
    width: 300px;
    aspect-ratio: 300/300;
    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 {
    height: 50.8571428571vw;
    position: relative;
    z-index: 0;
  }
  #firstview .product {
    position: absolute;
    left: calc(50% + 13vw);
    top: 5.5714285714vw;
    z-index: 100;
  }
  #firstview .product img {
    width: 11.7142857143vw;
    aspect-ratio: 164/423;
  }
  #firstview .catchphrase {
    position: absolute;
    left: calc(50% - 25.7857142857vw);
    top: 11.4285714286vw;
    z-index: 150;
  }
  #firstview .catchphrase .item {
    display: block;
    position: relative;
  }
  #firstview .catchphrase .item.num01 img {
    width: 25.409vw;
    aspect-ratio: 355.726/43.508;
  }
  #firstview .catchphrase .item.num02 .line,
  #firstview .catchphrase .item.num02 .text, #firstview .catchphrase .item.num03 .line,
  #firstview .catchphrase .item.num03 .text {
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    position: absolute;
    left: 0;
    top: 0;
  }
  #firstview .catchphrase .item.num02 .line img,
  #firstview .catchphrase .item.num02 .text img, #firstview .catchphrase .item.num03 .line img,
  #firstview .catchphrase .item.num03 .text img {
    width: 100%;
    height: 100%;
    transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
    position: absolute;
    left: 0;
    top: 0;
  }
  #firstview .catchphrase .item.num02 .line, #firstview .catchphrase .item.num03 .line {
    z-index: 5;
  }
  #firstview .catchphrase .item.num02 .text, #firstview .catchphrase .item.num03 .text {
    z-index: 10;
  }
  #firstview .catchphrase .item.num02 .text img, #firstview .catchphrase .item.num03 .text img {
    transform-origin: left bottom;
    transform: translate3d(0, 110%, 0);
  }
  #firstview .catchphrase .item.num02 .text img:nth-child(1), #firstview .catchphrase .item.num03 .text img:nth-child(1) {
    transition-delay: 0.0322086s;
  }
  #firstview .catchphrase .item.num02 .text img:nth-child(2), #firstview .catchphrase .item.num03 .text img:nth-child(2) {
    transition-delay: 0.0644172s;
  }
  #firstview .catchphrase .item.num02 .text img:nth-child(3), #firstview .catchphrase .item.num03 .text img:nth-child(3) {
    transition-delay: 0.0966258s;
  }
  #firstview .catchphrase .item.num02 .text img:nth-child(4), #firstview .catchphrase .item.num03 .text img:nth-child(4) {
    transition-delay: 0.1288344s;
  }
  #firstview .catchphrase .item.num02 .text img:nth-child(5), #firstview .catchphrase .item.num03 .text img:nth-child(5) {
    transition-delay: 0.161043s;
  }
  #firstview .catchphrase .item.num02 .text img:nth-child(6), #firstview .catchphrase .item.num03 .text img:nth-child(6) {
    transition-delay: 0.1932516s;
  }
  #firstview .catchphrase .item.num02 .text img:nth-child(7), #firstview .catchphrase .item.num03 .text img:nth-child(7) {
    transition-delay: 0.2254602s;
  }
  #firstview .catchphrase .item.num02 .text img:nth-child(8), #firstview .catchphrase .item.num03 .text img:nth-child(8) {
    transition-delay: 0.2576688s;
  }
  #firstview .catchphrase .item.num02 .text img:nth-child(9), #firstview .catchphrase .item.num03 .text img:nth-child(9) {
    transition-delay: 0.2898774s;
  }
  #firstview .catchphrase .item.num02 .text img:nth-child(10), #firstview .catchphrase .item.num03 .text img:nth-child(10) {
    transition-delay: 0.322086s;
  }
  #firstview .catchphrase .item.num02 .text img:nth-child(11), #firstview .catchphrase .item.num03 .text img:nth-child(11) {
    transition-delay: 0.3542946s;
  }
  #firstview .catchphrase .item.num02 {
    width: 38.2857142857vw;
    aspect-ratio: 536/57;
    margin-top: 2.3571428571vw;
  }
  #firstview .catchphrase .item.num03 {
    width: 33.0714285714vw;
    aspect-ratio: 463/58;
    margin-top: 1.3571428571vw;
  }
  #firstview .catchphrase.active .item.num02 .line img,
  #firstview .catchphrase.active .item.num02 .text img, #firstview .catchphrase.active .item.num03 .line img,
  #firstview .catchphrase.active .item.num03 .text img {
    transform: translate3d(0, 0, 0);
  }
  #firstview .decoration_01,
  #firstview .decoration_02 {
    width: calc(100% - 3vw);
    height: 100%;
    transform: translateX(-50%);
    pointer-events: none;
    position: absolute;
    left: 50%;
    top: 0;
    z-index: 10;
  }
  #firstview .decoration_01 img,
  #firstview .decoration_02 img {
    width: 96.9285714286vw;
    aspect-ratio: 1357/723;
    transform: translateX(-50%);
    position: absolute;
    left: 50%;
    top: 0;
    z-index: 10;
  }
  #firstview .decoration_01 {
    clip-path: url("#mask___firstview_clip_path_pc");
    overflow: hidden;
  }
  #firstview .bg {
    width: calc(100% - 3vw);
    height: 100%;
    margin: 0 auto;
    pointer-events: none;
  }
  #firstview .bg img {
    width: 100%;
    height: 100%;
    clip-path: url("#mask___firstview_clip_path_pc");
  }
  #pickup {
    height: 24.2857142857vw;
    margin-top: -11.6428571429vw;
    background-image: url("../../img/top/pickup_decoration.png");
    background-position: center bottom;
    background-size: auto 9.2857142857vw;
    background-repeat: repeat-x;
    position: relative;
    z-index: 100;
  }
  #pickup .label {
    position: absolute;
    left: 0;
    top: 0.7142857143vw;
    z-index: 500;
  }
  #pickup .label img {
    width: 6.0656428571vw;
    aspect-ratio: 84.919/212.459;
  }
  #pickup .content {
    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;
  }
  #pickup .content a {
    border-radius: 0.7142857143vw;
    background: #ffffff;
  }
  #pickup .content a img {
    width: 21.4285714286vw;
    aspect-ratio: 300/300;
    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 {
    height: 168vw;
    position: relative;
    z-index: 0;
  }
  #firstview .product {
    width: 100%;
    text-align: center;
    position: absolute;
    left: 0;
    top: 51.4666666667vw;
    z-index: 100;
  }
  #firstview .product img {
    width: 30.9333333333vw;
    aspect-ratio: 164/423;
  }
  #firstview .catchphrase {
    position: absolute;
    left: 0;
    top: 11.6vw;
    z-index: 150;
  }
  #firstview .catchphrase .item {
    display: block;
    position: relative;
  }
  #firstview .catchphrase .item.num01 img {
    width: 55.4666666667vw;
    aspect-ratio: 355.726/43.508;
  }
  #firstview .catchphrase .item.num02 .line,
  #firstview .catchphrase .item.num02 .text, #firstview .catchphrase .item.num03 .line,
  #firstview .catchphrase .item.num03 .text {
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    position: absolute;
    left: 0;
    top: 0;
  }
  #firstview .catchphrase .item.num02 .line img,
  #firstview .catchphrase .item.num02 .text img, #firstview .catchphrase .item.num03 .line img,
  #firstview .catchphrase .item.num03 .text img {
    width: 100%;
    height: 100%;
    transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
    position: absolute;
    left: 0;
    top: 0;
  }
  #firstview .catchphrase .item.num02 .line, #firstview .catchphrase .item.num03 .line {
    z-index: 5;
  }
  #firstview .catchphrase .item.num02 .text, #firstview .catchphrase .item.num03 .text {
    z-index: 10;
  }
  #firstview .catchphrase .item.num02 .text img, #firstview .catchphrase .item.num03 .text img {
    transform-origin: left bottom;
    transform: translate3d(0, 110%, 0);
  }
  #firstview .catchphrase .item.num02 .text img:nth-child(1), #firstview .catchphrase .item.num03 .text img:nth-child(1) {
    transition-delay: 0.0322086s;
  }
  #firstview .catchphrase .item.num02 .text img:nth-child(2), #firstview .catchphrase .item.num03 .text img:nth-child(2) {
    transition-delay: 0.0644172s;
  }
  #firstview .catchphrase .item.num02 .text img:nth-child(3), #firstview .catchphrase .item.num03 .text img:nth-child(3) {
    transition-delay: 0.0966258s;
  }
  #firstview .catchphrase .item.num02 .text img:nth-child(4), #firstview .catchphrase .item.num03 .text img:nth-child(4) {
    transition-delay: 0.1288344s;
  }
  #firstview .catchphrase .item.num02 .text img:nth-child(5), #firstview .catchphrase .item.num03 .text img:nth-child(5) {
    transition-delay: 0.161043s;
  }
  #firstview .catchphrase .item.num02 .text img:nth-child(6), #firstview .catchphrase .item.num03 .text img:nth-child(6) {
    transition-delay: 0.1932516s;
  }
  #firstview .catchphrase .item.num02 .text img:nth-child(7), #firstview .catchphrase .item.num03 .text img:nth-child(7) {
    transition-delay: 0.2254602s;
  }
  #firstview .catchphrase .item.num02 .text img:nth-child(8), #firstview .catchphrase .item.num03 .text img:nth-child(8) {
    transition-delay: 0.2576688s;
  }
  #firstview .catchphrase .item.num02 .text img:nth-child(9), #firstview .catchphrase .item.num03 .text img:nth-child(9) {
    transition-delay: 0.2898774s;
  }
  #firstview .catchphrase .item.num02 .text img:nth-child(10), #firstview .catchphrase .item.num03 .text img:nth-child(10) {
    transition-delay: 0.322086s;
  }
  #firstview .catchphrase .item.num02 .text img:nth-child(11), #firstview .catchphrase .item.num03 .text img:nth-child(11) {
    transition-delay: 0.3542946s;
  }
  #firstview .catchphrase .item.num01 {
    margin-left: 22vw;
  }
  #firstview .catchphrase .item.num02 {
    width: 83.2vw;
    aspect-ratio: 536/57;
    margin-top: 5.0666666667vw;
    margin-left: 8.5333333333vw;
  }
  #firstview .catchphrase .item.num03 {
    width: 71.4666666667vw;
    aspect-ratio: 463/58;
    margin-top: 3.0666666667vw;
    margin-left: 14.1333333333vw;
  }
  #firstview .catchphrase.active .item.num02 .line img,
  #firstview .catchphrase.active .item.num02 .text img, #firstview .catchphrase.active .item.num03 .line img,
  #firstview .catchphrase.active .item.num03 .text img {
    transform: translate3d(0, 0, 0);
  }
  #firstview .decoration_01,
  #firstview .decoration_02 {
    display: none;
  }
  #firstview .bg {
    width: 100%;
    height: 168vw;
    pointer-events: none;
  }
  #firstview .bg img {
    width: 100%;
    height: 100%;
  }
  #pickup {
    height: 204.9333333333vw;
    margin-top: -23.4666666667vw;
    background-image: url("../../img/top/pickup_decoration.png");
    background-position: center bottom;
    background-size: auto 17.3333333333vw;
    background-repeat: repeat-x;
    position: relative;
    z-index: 100;
  }
  #pickup .label {
    position: absolute;
    left: -2.6666666667vw;
    top: 0;
    z-index: 500;
  }
  #pickup .label img {
    width: 11.3225333333vw;
    aspect-ratio: 84.919/212.459;
  }
  #pickup .content {
    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;
  }
  #pickup .content 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: 12.9333333333vw;
    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;
  }
}