@charset "UTF-8";
/* ====================
reset, root
=================== */
:root {
    --a-duration: .3s;
    --b-s: clamp(2.5px, 0.4vw, 5px);
    --b-l: clamp(5px, 0.8vw, 10px);
    --c-black: #231815;
    --c-white: #fff;
    --c-red: #e50012;
    --c-yellow: #fff100;
    --c-green: #00a199;
    --f-f: "Noto Sans JP", sans-serif;
    --f-w-bold: 900;
    --f-w-normal: 400;
    --f-lh-m: 1.8em;
    --f-lh-s: 1.5em;
    --f-ls: -0.03em;
    --f-s-h1: clamp(2.125rem, 1.107rem + 4.52vw, 4.5rem);
    --f-s-h2: clamp(1.75rem, 0.893rem + 3.81vw, 3.75rem);
    --f-s-h3: clamp(1.5rem, 1.179rem + 1.43vw, 2.25rem);
    --f-s-h4: clamp(1.375rem, 1.214rem + 0.71vw, 1.75rem);
    --f-s-h5: clamp(1.25rem, 1.196rem + 0.24vw, 1.375rem);
    --f-s-h6: clamp(1rem, 0.946rem + 0.24vw, 1.125rem);
    --f-s-p: clamp(0.875rem, 0.821rem + 0.24vw, 1rem);
    --f-s-small: clamp(0.75rem, 0.696rem + 0.24vw, 0.875rem);
    --g-5: 5px;
    --g-10: 10px;
    --g-20: clamp(0.938rem, 0.793rem + 0.64vw, 1.25rem);
    --g-30: clamp(1.25rem, 0.962rem + 1.28vw, 1.875rem);
    --g-40: clamp(1.875rem, 1.587rem + 1.28vw, 2.5rem);
    --g-60: clamp(2.5rem, 1.923rem + 2.56vw, 3.75rem);
    --g-90: clamp(3.75rem, 2.885rem + 3.85vw, 5.625rem);
    --g-90h: clamp(1.875rem, 0.144rem + 7.69vw, 5.625rem);
    --g-120v: clamp(4.688rem, 3.389rem + 5.77vw, 7.5rem);
    --w-s: 720px;
    --w-m: 900px;
    --w-l: 1200px;
}
body {
    color: var(--c-black);
	font-family: var(--f-f);
    font-size: var(--f-s-p);
	font-weight: var(--f-w-normal);
    letter-spacing: var(--f-ls);
	line-height: var(--f-lh-m);
}
hr {
    margin: 0;
    width: 100%;
}
/* ====================
split, margin
==================== */
main > *{
    display: flex;
    flex-direction: column;
    gap: var(--g-20);
}
main > * > *{
    margin-left: auto;
	margin-right: auto;
    width: min(var(--w-s), 100%);
}
.w_medium {
    margin-left: auto;
	margin-right: auto;
	width: min(var(--w-m), 100%);
}
.w_large {
    margin-left: auto;
	margin-right: auto;
	width: min(var(--w-l), 100%);
}
.split {
    --item: 1;
    display: grid;
    column-gap: calc((7 - var(--item))*1%);
    grid-template-columns: repeat(var(--item), 1fr);
}
.split > * {
    display: flex;
    flex-direction: column;
    gap: var(--g-10);
}
@media screen and (min-width: 600px) {
    .split.two {--item: 2;}
}
.has_padding {
    padding: var(--g-120v) var(--g-90h);
}
/* ====================
font
==================== */
h1, h2, h3, h4, h5, h6 {
	font-weight: var(--f-w-bold);
	line-height: var(--f-lh-s);
    margin-bottom: 0;
    margin-top: 0;
    text-wrap: auto;
}
h1 {font-size: var(--f-s-h1);}
h2 {font-size: var(--f-s-h2);}
h3 {font-size: var(--f-s-h3);}
h4 {font-size: var(--f-s-h4);}
h5 {font-size: var(--f-s-h5);}
h6 {font-size: var(--f-s-h6);}
strong {font-weight: var(--f-w-bold);}
small {font-size: smaller;}
.small{
    font-size: var(--f-s-small);
    line-height: var(--f-lh-s);
}
.red{
    color: var(--c-red);
}
.text_center{
    text-align: center;
}
.headline_frame  {
    background-color: var(--c-white);
    border: var(--b-l) solid var(--c-black);
    border-radius: var(--b-l);
    box-shadow: var(--b-l) var(--b-l) 0px 0px var(--c-black);
    padding: 0.3em 0.5em;
    text-align: center;
}
/* ====================
button
==================== */
.btn_standard {
    display: flex;
    font-weight: var(--f-w-bold);
    flex-wrap: wrap;
    gap: var(--g-20);
    justify-content: center;
}
.btn_standard a {
    background-color: var(--c-yellow);
    border: var(--b-l) solid var(--c-black);
    border-radius: 1000px;
    box-shadow: 5px 5px 0px 0px var(--c-black);
    display: block;
    line-height: var(--f-lh-s);
    padding: 0.8lh 1.2lh;
    text-align: center;
    transition: var(--a-duration);
}
.btn_standard :is(a:hover, a:active, a:focus){
    box-shadow: none;
    translate: 5px 5px;
}
/* ====================
mainvisual
==================== */
.header{
    background-color: #f7b52c;
    position: relative;
}
.header .conic {
    background-image: repeating-conic-gradient(from 3deg at 50% 100%, #ffffff00 15deg 20deg, #f9be00 20deg 25deg);
    bottom: 0;
    content: "";
    display: block;
    height: 60%;
    position: absolute;
    width: 100%;
    top: 0;
}
.header .gradation{
    bottom: 20%;
    background: linear-gradient(0deg, #e4352b 0%, #f0932e 50%, #fbcc0000 100%);
    content: "";
    display: block;
    height: 60%;
    mix-blend-mode: multiply;
    position: absolute;
    width: 100%;
}
.mainvisual {
    overflow: hidden;
    position: relative;
}
.mv_pc_visual,
.mv_pc_logo,
.mv_pc_copy,
.mv_pc_detail,
.mv_pc_num{
    display: none;
}
.mv_sp_visual{
    padding-top: var(--g-60);
    position: relative;
}
.mv_sp_detail {
    background-color: #9f8c55;
    margin: -1px 0;
    padding: var(--g-40) var(--g-60);
    position: relative;
    text-align: center;
}
.mv_sp_detail img{
    max-width: 600px;
    width: 100%;
}
@media (min-width:900px) and (orientation: landscape){
    .header .conic {
        height: 100%;
    }
    .header .gradation{
        bottom: 0;
    }
    .mv_sp_visual,
    .mv_sp_detail{
        display: none;
    }
    .mv_pc_visual{
        display: block;
        position: relative;
        text-align: center;
    }
    .mv_pc_visual img{
        max-height: 100svh;
    }
    .mv_pc_logo{
        display: block;
        left: var(--g-30);
        position: absolute;
        top: var(--g-60);
        width: min(400px, 40svh, 25vw);
    }
    .mv_pc_copy{
        bottom: var(--g-60);
        display: block;
        left: var(--g-30);
        position: absolute;
        width: min(120px, 12svh, 8vw);
    }
    .mv_pc_detail{
        bottom: var(--g-60);
        display: block;
        position: absolute;
        right: var(--g-30);
        width: min(360px, 35svh, 20vw);
    }
    .mv_pc_num{
        display: block;
        position: absolute;
        right: 69%;
        top: 30%;
        width: min(200px, 20svh, 14vw);
    }
}
/* ====================
.nav-global
==================== */
.nav-global {
    background-color: #9f8c55;
    padding: 0 var(--g-60) var(--g-90);
    position: relative;
}
.nav-global h2{
    font-size: var(--f-s-h4);
}
.nav-global ul {
    display: flex;
    flex-direction: column;
    gap: var(--g-5);
}
.nav-global a{
    background-color: var(--c-black);
    display: block;
    line-height: 1;
    transition: var(--a-duration);
}
.nav-global :is(a:hover, a:active, a:focus) {
    background-color: var(--c-red);
}
.nav-global img{
    height: 30px;
}
@media (min-width:900px) and (orientation: landscape){
    .nav-global {
        background: none;
        position: absolute;
        padding: 0;
        right: var(--g-30);
        top: var(--g-60);
    }
    .nav-global h2{
        display: none;
    }
    .nav-global ul {
        flex-direction: row;
    }
    .nav-global a{
        rotate: -8deg;
    }
    .nav-global :is(a:hover, a:active, a:focus) {
        background-color: var(--c-red);
        rotate: 0deg;
        scale: 1.1;
    }
    .nav-global img{
        height: min(35px, 4svh, 2.2vw);
    }
}
/* ====================
.text-infinity-scroll
==================== */
.text-infinity-scroll {
    color: #512803;
    display: flex;
    font-size: var(--f-s-p);
    font-weight: var(--f-w-bold);
    letter-spacing: 0.02em;
    overflow: hidden;
    position: absolute;
    writing-mode: vertical-rl;
}
.text-infinity-scroll:nth-of-type(2){
    right: 0;
}
.text-infinity-scroll .first {
  animation: anim--first 100s infinite linear 0.1s both;
  text-wrap: nowrap;
}
.text-infinity-scroll .second {
  animation: anim--second 100s infinite linear 0.1s both;
  text-wrap: nowrap;
}
.text-infinity-scroll:nth-of-type(1) :where(.first, .second){
    animation-direction: reverse;
}
@keyframes anim--first {
  from {transform: translateY(0%);}
  to {transform: translateY(-100%);}
}
@keyframes anim--second {
  from {transform: translateY(0%);}
  to {transform: translateY(-100%);}
}
@media (min-width:900px) and (orientation: landscape){
    .text-infinity-scroll {
        font-size: var(--f-s-h5);
        writing-mode: horizontal-tb;
        width: 100%;
    }
    .text-infinity-scroll:nth-of-type(1){
        top: var(--g-5);
    }
    .text-infinity-scroll:nth-of-type(2){
        bottom: var(--g-5);
    }
    @keyframes anim--first {
        from {transform: translateX(0%);}
        to {transform: translateX(-100%);}
    }
    @keyframes anim--second {
        from {transform: translateX(0%);}
        to {transform: translateX(-100%);}
    }
}
/* ====================
about
==================== */
.about{
    background-color: var(--c-black);
    color: var(--c-white);
    font-weight: var(--f-w-bold);
    font-size: var(--f-s-h6);
    line-height: var(--f-lh-m);
    padding: var(--g-90) var(--g-90h);
}
.about .split{
    gap: var(--g-20);
    position: relative;
}
.about h2 {
    align-items: center;
}
.about h2 img {
    max-width: 90%;
    width: 360px;
}
.about p {
    align-self: center;
}
.about .origin {
    position: absolute;
    right: 50%;
    top: 0;
    translate: 85% -90%;
    width: min(240px, 55vw);
}
@media (min-width:900px){
    .about .split{
        gap: var(--g-40);
        grid-template-columns: repeat(2, minmax(50%, 480px));
        justify-content: center;
    }
    .about h2 img {
        max-width: none;
        width: 100%;
    }
    .about .origin {
        right: -5%;
        translate: 10% -85%;
    }
}
/* ====================
ozedappay
==================== */
.ozedappay{
    background: #76c5ab url(../img/back_dot.png) repeat center /30px fixed;
    padding-top: 0;
}
.ozedappay .hukidasi{
    display: block;
    margin-top: -40px;
}
.ozedappay .hukidasi img{
    max-width: 50%;
}
.ozedappay h2{
    text-align: center;
}
.ozedappay h2 img:nth-of-type(1){
    max-width: 76%;
}
.ozedappay h2 img:nth-of-type(2){
    max-width: 53.5%;
}

/* 枠 */
.ozedappay .frame{
    background-color: var(--c-white);
    border: var(--b-l) solid var(--c-black);
    border-radius: var(--b-l);
    box-shadow: var(--b-l) var(--b-l) 0px 0px var(--c-black);
    padding: var(--g-40) var(--g-30);
}
@media (min-width:900px){
    .ozedappay .frame{
        padding: var(--g-30) var(--g-40);
    }
}

/* ケース1・2 */
[class*="box_case"] {
    display: flex;
    flex-direction: column;
    gap: var(--g-10);
    margin-top: var(--g-20);
}
[class*="box_case"] h3{
    font-size: var(--f-s-h4);
}
[class*="box_case"] .frame{
    margin-bottom: var(--g-10);
}
.box_case1 .split{
    row-gap: var(--g-20);
}

/* 上限 */
.limit{
    align-items: center;
    background-color: var(--c-red);
    border: var(--b-s) solid var(--c-black);
    display: flex;
    flex-direction: column;
    padding: var(--g-20) var(--g-30);
    text-align: center;
}
.box_case1 .limit{
    background: var(--c-red) url(../img/back_fire.png) no-repeat left bottom / 240px auto;
}
.box_case2 .limit{
    background-color: var(--c-green);
}
.limit span{
    color: var(--c-white);
    display: inline-block;
    font-size: var(--f-s-h6);
	font-weight: var(--f-w-bold);
    margin-right: 0.5em;
}
.limit img:nth-of-type(1){
    margin-top: 0.5em;
    width: 65%;
}
@media (min-width:600px){
    .limit{
        display: grid;
        grid-template-columns: max-content 0.65fr 1fr;
    }
    .limit img:nth-of-type(1){
        margin-top: 0;
        width: 100%;
    }
}

/* アプリとカード */
.ozedappay .box_more {
    display: flex;
    flex-direction: column;
    gap: var(--g-20);
    position: relative;
    margin-top: var(--g-40);
    padding: var(--g-40) var(--g-40) var(--g-30);
}
.ozedappay .box_more .accent {
    left: 0;
    position: absolute;
    top: 0;
    translate: -45% -45%;
    width: min(135px, 18vw);
}

/* 制覇特典 */
.ozedappay .box_present {
    display: flex;
    flex-direction: column;
    gap: var(--g-20);
    position: relative;
}
.ozedappay .box_present ul {
    row-gap: var(--g-20);
}
.ozedappay .box_present .accent {
    position: absolute;
    right: 0;
    bottom: 0;
    translate: 20% 75%;
    width: min(210px, 35vw);
}
@media screen and (min-width: 900px) {
    .ozedappay .box_present .accent {
        translate: 20% 45%;
    }
}
/* ====================
restaurant
==================== */
.restaurant{
    background: var(--c-red) url(../img/back_fire.png) no-repeat left bottom / max(720px, 120%) auto fixed;
    gap: var(--g-60);
}
.restaurant h2 {
    margin-bottom: 0.3em;
}
.list_restaurant {
    row-gap: var(--g-60);
}
.list_restaurant li {
    background-color: var(--c-white);
    border: var(--b-l) solid var(--c-black);
    border-radius: var(--b-l);
    box-shadow: var(--b-l) var(--b-l) 0px 0px var(--c-black);
    gap: 0;
}
@media (min-width:750px){
    .list_restaurant{
        --item: 2;
    }
}

/* 画像 */
.list_restaurant .img {
    position: relative;
}
.list_restaurant .img img {
    aspect-ratio: 3 / 2;
    object-fit: cover;
    width: 100%;
}

/* 星評価 */
.list_restaurant .box_rate {
    align-items: center;
    border: var(--b-s) solid var(--c-black);
    border-radius: var(--b-s);
    background-color: var(--c-yellow);
    display: flex;
    font-weight: var(--f-w-bold);
    left: 0;
    line-height: 1;
    padding: 0.3em 0.6em;
    position: absolute;
    top: 0;
    translate: -10% -40%;
}
.list_restaurant .level{
    font-size: var(--f-s-p);
    margin-right: 0.2em;
}
.list_restaurant .rate{
    color: var(--c-black);
    font-size: var(--f-s-h5);
    opacity: 0.7;
}
.list_restaurant .regarded{
    color: var(--c-red);
    font-size: var(--f-s-h5);
}

/* 商品名・価格 */
.list_restaurant h3{
    background-color: var(--c-black);
    color: var(--c-white);
    padding: 0.4em 0.8em;
    text-shadow: 0.06em 0.06em var(--c-black);
}
.list_restaurant .menu{
    margin-right: 0.3em;
}
.list_restaurant .price {
    color: var(--c-red);
    font-size: var(--f-s-h4);
    line-height: 1;
}

/* 商品説明 */
.list_restaurant .pr {
    padding: var(--g-10) var(--g-20);
}

/* 店舗概要 */
.list_restaurant .details {
    line-height: var(--f-lh-s);
    padding: 0 var(--g-20) var(--g-10);
}
.list_restaurant .details a{
    text-decoration: underline;
}
.list_restaurant .name{
    display: block;
    font-size: var(--f-s-h6);
    margin-bottom: var(--g-5);
}
.list_restaurant .address,
.list_restaurant .tel,
.list_restaurant .time{
    font-size: var(--f-s-small);
    margin-right: 1em;

}
.list_restaurant .tel::before,
.list_restaurant .time::before{
    background-color: var(--c-black);
    content: "";
    display: inline-block;
    height: 1ic;
    margin-right: 0.2em;
    translate: 0 0.15em;
}
.list_restaurant .tel::before{
    aspect-ratio: 124/100;
    mask: url(../img/icon_tel.svg) no-repeat center /contain;
}
.list_restaurant .time::before{
    aspect-ratio: 100/100;
    mask: url(../img/icon_time.svg) no-repeat center /contain;
}

/* おぜだっペイ対応 */
.list_restaurant .pay{
    align-items: center;
    color: var(--c-green);
    display: flex;
    font-size: var(--f-s-small);
    font-weight: var(--f-w-bold);
    gap: var(--g-5);
    padding: 0 var(--g-20) var(--g-20);
}
.list_restaurant .method {
    background-color: var(--c-green);
    border-radius: var(--b-s);
    color: var(--c-white);
    font-weight: var(--f-w-normal);
    line-height: 1;
    padding: 0.3em 0.4em;
}
.list_restaurant .method.none{
    background-color: #ccc;
}

/* 注釈 */
.restaurant .notes{
    color: var(--c-white);
    text-shadow: 0px 0px 4px var(--c-red);
}
/* ====================
faq
==================== */
.box_faq {
    background-color: #d2c0ae;
    gap: var(--g-40);
}
.box_faq h3 {
    margin-bottom: var(--g-20);
    text-align: center;
}
.list_faq details:not(:first-of-type){
    border-top: 4px dotted #bbb;
    margin-top: var(--g-20);
    padding-top: var(--g-20);
}
.list_faq summary::-webkit-details-marker {
    display: none;
}
.list_faq summary{
    font-weight: var(--f-w-bold);
    display: grid;
    grid-template-columns: 15px 1fr;
    gap: 10px;
}
.list_faq .summary_inner{
    font-size: var(--f-s-default);
    font-weight: var(--f-w-bold);
}
.list_faq .icon {
    display: block;
    height: min-content;
    position: relative;
    top: var(--g-10);
    transition: var(--a-duration);
    &::before,
    &::after {
        content: "";
        position: absolute;
        display: block;
        width: 10px;
        height: 3px;
        background-color: var(--c-green);
    }
    &::before {
        left: 0;
        transform: rotate(45deg);
    }
    &::after {
        right: 0;
        transform: rotate(-45deg);
    }
}
.list_faq details.is-opened .icon {
    transform: rotate(180deg);
}
.list_faq .content {
    overflow: hidden;
}
.list_faq .content_inner {
    padding-left: 25px;
    padding-top: var(--g-30);
    display: flex;
    flex-direction: column;
    gap: var(--g-10);
    position: relative;
}
.list_faq .content_inner::before{
    content: "A.";
    color: var(--c-red);
    font-size: var(--f-s-h5);
    font-weight: var(--f-w-bold);
    left: 0;
    position: absolute;
}
.list_faq .content_inner a{
    text-decoration: underline;
}
/* ====================
pamphlet
==================== */
.pamphlet {
    background-color: #f1cb9d;
    gap: var(--g-40);
    padding-bottom: calc(var(--g-120v) + var(--g-120v));
}
.pamphlet .split{
    row-gap: var(--g-20);
}
/* ====================
totop
==================== */
.totop{
    position: relative;
}
.totop a {
    left: 50%;
    max-width: 35%;
    position: absolute;
    top: 0;
    translate: -50% -75%;
    width: fit-content;
}
/* ====================
footer
==================== */
.footer {
    background-color: var(--c-black);
    color: var(--c-white);
    text-align: center;
}
.footer h1 img {
    max-width: 80%;
}
.footer h2 {
    font-size: var(--f-s-h4);
    margin-bottom: var(--g-10);
    margin-top: var(--g-20);
}
.footer a {
    text-decoration: underline;
}
.footer .copyright {
    display: block;
    font-size: var(--f-s-small);
    margin-top: var(--g-20);
}