@-webkit-keyframes flash { 0% { opacity: .6; } 100% { opacity: 1; } }
@keyframes flash { 0% { opacity: .6; } 100% { opacity: 1; } }
a { color: #e40000; }
a:hover { opacity: 1; -webkit-animation: flash 1s; animation: flash 1s; }
@media (min-width: 768px) {
    body { font-family: "Hiragino Kaku Gothic ProN", sans-serif; background: url(../image/bg.webp) left top repeat-y; background-size: 100% auto; color: #333; line-height: 1.8; }
    img {display: inline; vertical-align: bottom; }
    .kv { position: relative; }
    .kv .main { width: 100%; }
    .kv .cut { position: absolute; left: 0vw; bottom: -7vw; width: 25vw; height: 25vw; text-align: center; }
    .container { border-left: 8vw solid #1c8d45; border-right: 8vw solid #cc2428; /* background: url(../image/bg_02.webp) center top repeat-y; background-size: 100% auto;*/ }
    .section { margin: 0 auto; width: 1000px; box-sizing: border-box; }
    .intro { margin: 0 auto 30px auto; }
    .intro .text { margin: -1.5vw 0 60px; }
    .intro .introImage { display: none; }
    .flex { display: flex; gap: 35px; flex-wrap: nowrap; justify-content: center; width: 1000px; }
    .flex.reverse { margin-top: 50px; flex-direction: row-reverse; }
    .flex dd .title { padding-bottom: 15px; margin-bottom: 20px; border-bottom: 2px solid #f39a00; }
    .flex dd .name { margin: 50px 0 30px;}
    .flex dd .text { margin-bottom: 35px; }
    .flex dt.image { margin-left: -40px; }
    .features .float { display: none; }
    .menu .flex.reverse dt { margin-right: -40px; }
    .menu h3,
    .shop h3 { margin: 60px 0 20px; text-align: center; }
    .menu h3 + p,
    .shop h3 + p { margin-bottom: 40px; text-align: center; }
    .shop ul { display: flex; width: 800px; margin: 0 auto; padding-bottom: 30px; gap: 5%; }
    .shop ul li { width: 30%; text-align: center; }
    .shop ul li dt { margin-bottom: 20px; }
    .shop ul li dd p { margin-bottom: 10px; }

    .shop .btn { display: block; margin-top: 25px; padding: 10px; position: relative; cursor: pointer; background: #f00; color: #fff; text-decoration: none; }
    .shop .btn::after { content: ""; position: absolute; top: 50%; right: 15px; width: 8px; height: 8px; border-top: 2px solid #fff; border-right: 2px solid #fff; transform: translateY(-50%) rotate(45deg); }
    .shop .mamma .btn { background: #ec6c00; }
    .shop .grande .btn { background: #ea5b02; }
    .shop .pappa .btn { background: #fbc600; color: #000; }
    .shop .pappa .btn::after { border-top: 2px solid #000; border-right: 2px solid #000; }
    .cauton { text-align: center; padding-bottom: 40px; font-size: 14px; }
    footer { text-align: center; padding: 20px; font-size: 0.8rem; background: #000; color: #fff; }
}
@media screen and (max-width:767px) {
    body { color: #333; line-height: 1.7; background: url(../image/bg.webp) left top repeat-y; background-size: 100% auto;  }
    img { max-width: 100%; }
    .container { padding: 0;/* border-left: 3.5vw solid #1c8d45; border-right: 3.5vw solid #cc2428; */ background: url(../image/bg_02.webp) center top repeat-y; background-size: 105% auto;}
    .section { }
    .intro { margin-bottom: 10vw; }
    .intro h2 { margin: 0 0 6vw 8.5vw; padding-top: 3.5vw; text-align: center; }
    .intro .text { margin: 0 10vw; font-size: 3.44vw; }
    .intro .introImage { float: right; width: 55%; }
    .features  { margin: 0 10vw 10vw 10vw; }
    .features .reverse { margin-top: 7.5vw; }
    .features dt { display: none; }
    .features h3 { padding-bottom: 3vw; margin-bottom: 3vw; border-bottom: 2px solid #f39a00; }
    .features .float { float: right; width: 45%; margin-left: 2vw; }

    .menu h3,
    .shop h3  { margin-bottom: 3vw; text-align: center; }
    .menu h3 + p,
    .shop h3 + p { text-align: center; }
    .menu h3 img,
    .shop h3 img { height: 9vw; }
    .menu { margin-bottom: 15vw; }
    .menu dt { padding: 0 2vw;}
    .menu dd { padding: 0 12vw 0 10vw; font-size: 3.4vw; }
    .menu .flex { text-align: right; }
    .menu .flex.reverse { text-align: left!important; }
    .menu dd .name { margin-bottom: 3vw; }
    .menu dd .name img { height: 5.8vw; }
    .menu dd .text { margin-bottom: 3vw; }
    .menu dd .price img { height: 5.5vw; }

    .shop ul { margin: 5vw 10vw 0 10vw; padding-bottom: 3vw; }
    .shop ul li { margin-bottom: 8vw;  }
    .shop ul li dl { display: flex; flex-wrap: nowrap; gap: 5%; }
    .shop ul li dt { width: 35%; }
    .shop ul li dd { width: 60%; }
    .shop ul li dd .list p { margin-bottom: 2vw; text-indent: -1.0em; padding-left: 1.0em; }
    .shop ul li dd .list p strong::before { content: "◆"; }

    .shop .btn { display: inline-block;  margin-top: 2vw; padding: 6px 28px 6px 15px; position: relative; border-radius: 15px; cursor: pointer; text-decoration: none; color: #000; }
    .shop .btn::after { content: ""; position: absolute; top: 50%; right: 15px; width: 8px; height: 8px; transform: translateY(-50%) rotate(45deg); }
    .shop .pappa .btn::after { border-top: 2px solid #000; border-right: 2px solid #000; }
    .shop .mamma .btn { border: 2px solid #ec6c00; color: #ec6c00; }
    .shop .mamma .btn::after { border-top: 2px solid #ec6c00; border-right: 2px solid #ec6c00; }
    .shop .grande .btn { border: 2px solid #ea5b02; color: #ea5b02; }
    .shop .grande .btn::after { border-top: 2px solid #ea5b02; ; border-right: 2px solid #ea5b02; }
    .shop .pappa .btn {  border: 2px solid #fbc600; color: #fbc600; }
    .shop .pappa .btn::after { border-top: 2px solid #fbc600; border-right: 2px solid #fbc600; }
    .shop  .mamma .list p strong::before { color: #ec6c00; }
    .shop  .grande .list p strong::before { color:  #ea5b02; }
    .shop  .pappa .list p strong::before { color: #fbc600; }
    .cauton { text-align: center; margin: 0 10vw; padding-bottom: 40px; font-size: 3vw; }
    footer { text-align: center; padding: 3vw; font-size: 3vw; background: #000; color: #fff; }
}

@media screen and (max-width:767px) {
	.btn-next { position: relative; text-align: center; margin: 7vw 10vw 10vw 10vw; }
	.btn-next a { position: relative; display: block; padding: 15px 30px 15px 25px; background: #1c8d45; color: #fff; border: 2px solid #fff; box-shadow: 2px 2px 7px #ccc; text-decoration: none; }
}
@media screen and (min-width:768px) {
	.btn-next { position: relative; width: 400px; text-align: center; margin: 20px auto 80px auto; }
	.btn-next a { position: relative; display: block; padding: 20px 25px 18px 25px; background: #1c8d45; color: #fff; border: 2px solid #fff; box-shadow: 2px 2px 7px #ccc; text-decoration: none; }

}
.arrow-btn::after { content: ""; position: absolute; top: 0; bottom: 0; margin: auto; right: 23px; width: 25px; height: auto; background: url(/assets/images/common/arrow.svg) right center no-repeat; transition: all .3s;  }
.arrow-btn:hover::after { right: 13px; }