body {
    overflow-x: hidden !important;
    font-family: 'Zen Kaku Gothic New', sans-serif !important;
    font-weight: 500;
    background-image: url(../images/akiakane/top-back.jpg);
    background-size: contain;
    background-repeat: repeat-y;
}

.container {
    max-width: 1280px;
    margin: 0 auto;
}

img {
    width: 100%;
    height: auto;
    display: block;
    vertical-align: bottom;
}

.header {
    padding: 1% 0;
    position: relative;
    background-color: #fff;
}

.header-logo {
    display: flex;
}

.header-akiakane {
    width: 13%;
}

.header-logo img {
    margin-left: 4%;
}

.header-menu {
    display: flex;
    align-items: center;
    width: 75%;
}

.header-nav {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    font-size: clamp(12px, 1vw, 17px);
    font-weight: 600;
}

.header-menu-button {
    display: none;
}

.header-select {
    width: 50%;
}

.header-select ul {
    display: flex;
}

.header-select li {
    flex-grow: 1;
    text-align: center;
}

.menu-text-line-mobile {
    display: none;
}

.header-select li+li {
    border-left: 1px solid #B12727;
}

.header .button {
    width: 40%;
    display: flex;
    justify-content: space-between;
}

.header-menu button {
    width: 47%;
    padding: 2% 0;
    color: #fff;
    background: linear-gradient(45deg, transparent 5%, #B12727 5%), linear-gradient(135deg, transparent 5%, #B12727 5%), linear-gradient(225deg, transparent 5%, #B12727 5%), linear-gradient(315deg, transparent 5%, #B12727 5%);
    background-position: bottom left, top left, top right, bottom right;
    background-size: 55% 55%;
    background-repeat: no-repeat;
}

.sns {
    width: 10%;
}

.sns img {
    width: 50%;
    margin: auto;
}

.thumb {
    display: flex;
    width: 100%;
    background-image: url(../images/akiakane/top-back.jpg);
    background-size: cover;
}

.thumb-dish {
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.thumb .thumb-dish-txt {
    z-index: 10;
    width: 15%;
    position: absolute;
    top: 10%;
    left: 12%;
}

.thumb .thumb-dish-container {
    width: 75%;
    aspect-ratio: 1;
    position: relative;
}

.thumb .thumb-dish-img {
    width: 100%;
    aspect-ratio: 1;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    opacity: 0;
    background-size: contain;
    background-position: center center;

    animation: image-switch-animation 12s infinite;
}

.thumb-dish-img.src1 {
    background-image: url(../images/akiakane/top-buri.png);
}

.thumb-dish-img.src2 {
    background-image: url(../images/akiakane/top-beef.png);
}

.thumb-dish-img.src3 {
    background-image: url(../images/akiakane/top-chicken.png);
}

.thumb-dish-img:nth-of-type(1) {
    animation-delay: 0s;
}

.thumb-dish-img:nth-of-type(2) {
    animation-delay: 4s;
}

.thumb-dish-img:nth-of-type(3) {
    animation-delay: 8s;
}

@keyframes image-switch-animation {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    33% {
        opacity: 1;
    }

    43% {
        opacity: 0;
    }
}

.thumb .thumb-dish-icon {
    position: absolute;
    bottom: 8%;
    right: 10%;
}

.thumb-counter {
    width: 50%;
    height: auto;
}

.thumb-counter img {
    object-fit: cover;
    width: 100%;
}

.message {
    width: 100%;
    position: relative;
    background-image: url(../images/akiakane/message-back.jpg);
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10% 0 15%;
}

.message-title {
    width: 30%;
}

.message-icon-right {
    position: absolute;
    width: 30%;
    right: 0;
    top: 7%;
    opacity: 0.4;
    filter: brightness(0.5)
}

.message-icon-left {
    position: absolute;
    width: 18%;
    left: 0;
    bottom: 12%;
    opacity: 0.4;
    filter: brightness(0.5)
}

.message-text {
    text-align: center;
    color: #fff;
}

.message-text-main {
    font-size: clamp(12px, 2vw, 20px);
    margin: 5% 0 3%;
}

.message-text-desc {
    font-size: clamp(12px, 1.5vw, 20px);
}

.inside {
    width: 100%;
    display: flex;
    flex-direction: column;
    background-image: url(../images/akiakane/inside-back.jpg);
    background-size: cover;
    font-size: clamp(12px, 1.5vw, 20px);
}

.inside-first,
.inside-second,
.inside-third {
    width: 100%;
    height: auto;
    display: flex;
}

.inside-second {
    flex-direction: row-reverse;
}

.inside-first-left,
.inside-second-right,
.inside-third-left {
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.inside-first-left div,
.inside-second-right div,
.inside-third-left div {
}

.inside-first-left div+div,
.inside-second-right div+div,
.inside-third-left div+div {
    margin-top: 7%;
}

.inside-first-left img {
    width: 12%;
    position: absolute;
    right: 10%;
    bottom: 10%;
}

.inside-first-right,
.inside-second-left,
.inside-third-right {
    width: 50%;
    height: auto;
    overflow: hidden;
}

.inside-first-right img,
.inside-second-left img,
.inside-third-right img {
    object-fit: cover;
    width: 100%;
}

.inside-textWrapper {
    display: flex;
    flex-direction: column;
    margin: 0 !important;
}

.inside-media {
    display: none;
}

.inside-dragonfly-second {
    position: absolute;
    right: 15%;
    bottom: 20%;
}

.inside-akiakane-text {
    width: 10.1%;
    position: absolute;
    top: 0;
    left: 3%;
}

.menu {
    width: 100%;
    padding-bottom: 40%;
    display: flex;
    flex-direction: column;
    background-image: url(../images/akiakane/menu-back.jpg);
    background-size: cover;
    align-items: center;
    position: relative;
}

.menu-title {
    width: 33%;
    padding: 10% 0;
}

.menu-text {
    text-align: center;
    position: absolute;
    top: 82%;
    font-size: clamp(12px, 1.8vw, 20px);
}

.middle {
    background-image: url(../images/akiakane/middle-back.jpg);
    background-size: cover;
}

.menu-image-media {
    display: none;
}

.menu-regular {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40% 0 5%;
}

.menu-regular-desc {
    text-align: center;
    margin-bottom: 5%;
    font-size: clamp(12px, 1.5vw, 20px);
}

.menu-regular-wrapper {
    width: 90%;
}

.menu-regular div+div {
    display: flex;
    justify-content: space-evenly;
}

.menu-regular-lunch {
    margin-right: 2%;
    background-image: url(../images/akiakane/menu-regular-back.png);
    display: flex;
    justify-content: center;
    align-items: center;
    background-size: cover;
    width: 48%;
}

.menu-regular-dinner {
    background-image: url(../images/akiakane/menu-regular-back.png);
    display: flex;
    justify-content: center;
    align-items: center;
    background-size: cover;
    width: 48%;
}

.menu-regular-lunch img,
.menu-regular-dinner img {
    transform: scale(0.97);
}

.menu-text-line-pc {
    position: absolute;
}

.access {
    position: relative;
    font-size: clamp(12px, 1.5vw, 20px);
}

.access img {
    width: 21%;
    margin: 0 auto 5%;
}

.access-info {
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.access-info dl {
    width: 70%;
    display: flex;
    border-bottom: 1px solid #BDBDBD;
    padding: 3% 0;
}

.access-info dt {
    width: 25%;
    padding-left: 5%;
    font-weight: 600;
}

.access-button {
    width: 70%;
    margin: auto;
    padding: 5% 0 15%;
    display: flex;
    justify-content: space-between;
}

.access-button button {
    width: 48%;
    padding: 2% 0;
    color: #fff;
    background: linear-gradient(45deg, transparent 5%, #B12727 5%), linear-gradient(135deg, transparent 5%, #B12727 5%), linear-gradient(225deg, transparent 5%, #B12727 5%), linear-gradient(315deg, transparent 5%, #B12727 5%);
    background-position: bottom left, top left, top right, bottom right;
    background-size: 55% 55%;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.access-button button img {
    width: 9%;
    margin: 0;
    position: absolute;
    right: 5%;
}

.footer-akiakane {
    background-color: #fff;
    padding: 5% 0;
    display: flex;
    justify-content: center;
    border-bottom: 1px solid #BDBDBD;
}

.footer {
    background-color: #fff;
    padding: 5% 0;
    display: flex;
    flex-direction: column;
    font-size: clamp(12px, 1.5vw, 20px);
}

.footer-logo {
    display: flex;
    align-items: baseline;
    margin: auto;
}

.footer-text {
    margin: 1% 0;
    text-align: center;
}

.footer-link {
    margin: auto;
}

.swiper-outer {
    width: 100%;
    overflow-x: hidden;
    overflow-y: visible;
}

.mySwiper {
    overflow: visible !important;
}

.mySwiper {
    width: 100%;
    padding: 10% 0;
}

.swiper-slide {
    width: 35%;
    aspect-ratio: 1;
    transition: transform 0.5s ease, opacity 0.5s ease;
}

.swiper-slide img {
    width: 100%;
    display: block;
    transition: transform 0.5s ease;
}

.mySwiper .swiper-slide-active img {
    transform: scale(1.3);
}

.swiper {
    overflow: hidden !important;
    position: absolute !important;
    bottom: -18%;
    padding: 5% 0 !important;
}

div.swiper .swiper-wrapper {
    margin-bottom: 5%;
}

.swiper-name-container img {
    width: 4%;
    position: absolute;
    top: 0.5%;
    right: 30%;
    z-index: 100;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.swiper-name-container img.active {
    opacity: 1;
}

/* ページネーション */
.swiper-pagination-bullet {
    background: #ccc;
    opacity: 1;
    margin: 0 1% !important;
}

.swiper-pagination-bullet-active {
    background: #333;
}

div.swiper .swiper-button-prev {
    top: 90%;
    left: 37%;
    content: none;
    z-index: 999;
}

div.swiper .swiper-button-prev::before {
    content: "←";
}

div.swiper .swiper-button-next {
    top: 90%;
    right: 37%;
    content: none;
    z-index: 999;
}

div.swiper .swiper-button-next::before {
    content: "→";
}

div.swiper .swiper-pagination {
    bottom: 6.5%;
}

/* 選択されているドット */
.swiper-pagination-bullet-active {
    background: #B12727 !important;
}

/* 六角形ボタンの基本 */
.hex-btn {
    width: 5% !important;
    height: 10% !important;
    background: #000;
    color: #fff !important;
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    clip-path: polygon(25% 0%,
            /* 左上 */
            75% 0%,
            /* 右上 */
            100% 50%,
            /* 右中 */
            75% 100%,
            /* 右下 */
            25% 100%,
            /* 左下 */
            0% 50%
            /* 左中 */
        );
    user-select: none;
}

/* ホバー・アクティブで気持ちよく */
.hex-btn:hover {
    background: #333;
    transform: scale(1.05);
}

.hex-btn:active {
    background: #111;
    transform: scale(0.95);
}

/* Swiper デフォルト矢印を消す */
.swiper-button-next::after,
.swiper-button-prev::after {
    display: none;
}

.message-media {
    display: none;
}

.menu-regular-title {
    width: 100%;
}

.menu-regular-title img {
    width: 42%;
    margin: auto;
}

.access .access-media {
    display: none;
}

.footer-link a {
    text-decoration: none;
    color: black;
}

.footer-link a::after {
    content: url(../images/akiakane/link.svg);
    align-items: baseline;
}

.br-media {
    display: none;
}

@media screen and (max-width: 959px) {
    .header {
        flex-direction: column;
    }

    .header-logo {
        width: 100vw;
        background-color: #fff;
        top: 0;
        left: 0;
        right: 0;
        z-index: 999;
    }

    .thumb-dish-icon {
        width: 12% !important;
    }

    .header-logo img {
        width: 40% !important;
        margin: 3% auto;
    }

    .header-nav {
        position: relative;
    }

    .header-menu {
        display: none;
        z-index: -999;
        width: 100%;
        padding-top: 22%;
        flex-direction: column;
        position: fixed;
        right: 0;
        left: 0;
        top: 0;
        background-color: #F4F3ED;
        opacity: 0;
        font-size: 3.5vw;
    }

    .header-menu-button {
        width: 12%;
        aspect-ratio: 1;
        display: block;
        background: #B12727;
        clip-path: polygon(25% 0%,
                /* 左上 */
                75% 0%,
                /* 右上 */
                100% 50%,
                /* 右中 */
                75% 100%,
                /* 右下 */
                25% 100%,
                /* 左下 */
                0% 50%
                /* 左中 */
            );
    }

    .header-menu-button-line {
        transform: scale(0.5);
    }

    .header-menu .sns {
        width: 35%;
        margin-bottom: 10%;
    }

    .hamburger {
        width: 10%;
        position: fixed;
        top: 9.5%;
        right: 5%;
        border-color: transparent;
        z-index: 9999;
    }

    .hamburger span {
        width: 100%;
        height: 3px;
        background-color: #FFF;
        position: relative;
        transition: ease .4s;
        display: block;
    }

    .hamburger span:nth-child(1) {
        top: 0;
    }

    .hamburger span:nth-child(2) {
        margin: 8px 0;
    }

    .hamburger span:nth-child(3) {
        top: 0;
    }

    /* ハンバーガーメニュークリック後のスタイル */
    .header-menu.active {
        display: flex;
        z-index: 999;
        opacity: 1;
    }

    .hamburger.active span:nth-child(1) {
        top: 10px;
        transform: rotate(45deg);
    }

    .hamburger.active span:nth-child(2) {
        opacity: 0;
    }

    .hamburger.active span:nth-child(3) {
        top: -13px;
        transform: rotate(-45deg);
    }

    .header-select {
        width: 70%;
    }

    .header-select ul {
        flex-direction: column;
    }

    .header-select li {
        padding: 4% 0;
    }

    .header-select li+li {
        border-left: none;
        border-top: 1px solid #B12727;
    }

    .header .button {
        width: 80%;
        margin: 5% 0;
    }

    .message {
        padding: 20% 0 30%;
    }

    .message-title {
        width: 60%;
    }

    .message-text-main {
        font-size: 5vw;
    }

    .message-text-desc {
        font-size: 3.5vw;
    }

    /* 959px以下に適用されるCSS（タブレット用） */
    .thumb {
        flex-direction: column;
    }

    .thumb-dish,
    .thumb-counter {
        width: 100%;
    }

    .thumb-dish {
        padding: 5% 0;
    }

    .message-media {
        display: block;
    }

    .message-pc {
        display: none;
    }

    .message-icon-right {
        width: 42%;
        top: 5%;
    }

    .message-icon-left {
        width: 32%;
        bottom: 8%;
    }

    .inside {
        font-size: 3.3vw;
    }

    .inside-first,
    .inside-second,
    .inside-third {
        flex-direction: column;
    }

    .inside-first-left,
    .inside-first-right,
    .inside-second-left,
    .inside-second-right,
    .inside-third-left,
    .inside-third-right {
        width: 100%;
        z-index: 1;
    }

    .inside-first-left,
    .inside-second-right,
    .inside-third-left {
        padding: 20% 0;
    }

    .inside-dragonfly-second {
        position: absolute;
        right: 5%;
        bottom: 5%;
    }

    .inside-akiakane-text {
        width: 9.5%;
        left: 87%;
    }

    .inside-pc {
        display: none;
    }

    .inside-media {
        display: block;
    }

    .br-media {
        display: block;
    }

    .menu {
        padding-bottom: 70%;
    }

    .menu-title {
        width: 60%;
        padding: 20% 0;
    }

    .menu-image-pc {
        display: none;
    }

    .menu-image-media {
        display: block;
    }

    .mySwiper {
        overflow: hidden !important;
    }

    .swiper {
        padding-top: 10% !important;
        bottom: -13%;
    }

    .swiper-slide-prev,
    .swiper-slide-next,
    .swiper-slide-duplicate-prev,
    .swiper-slide-duplicate-next {
        /* transform: scale(0.7) !important; */
    }

    .swiper-slide img {
        width: 75%;
        display: block;
        transition: transform 0.5s ease;
        margin: auto;
    }

    .swiper-name-container img {
        width: 9%;
        top: 1.5%;
        right: 13%;
    }

    .hex-btn {
        width: 12% !important;
    }

    div.swiper .swiper-button-prev {
        top: 83.5%;
        left: 25%;
    }

    div.swiper .swiper-button-next {
        top: 83.5%;
        right: 25%;
    }

    div.swiper .swiper-pagination {
        bottom: 12.5%;
    }

    .swiper-pagination-bullet {
        margin: 0 2% !important;
    }

    .menu-regular-title {
        width: 100%;
    }

    .menu-regular-title img {
        width: 70%;
        margin: auto;
    }

    .menu-regular {
        padding: 70% 0 5%;
    }

    .menu-regular div+div {
        width: 100%;
        flex-direction: column;
    }

    .menu-regular-desc {
        font-size: 3vw;
    }

    .menu-regular-lunch,
    .menu-regular-dinner {
        width: 90% !important;
        margin: auto;
    }

    .menu-regular-dinner {
        margin-top: 5%;
        margin-bottom: 15%;
    }

    .menu-text {
        font-size: 3.5vw;
        top: 87%;
    }

    .menu-text-mobile {
        position: relative;
    }

    .menu-text-line-mobile {
        display: block;
        position: absolute;
        left: 0;
        width: 100%;
    }

    .access {
        font-size: 3vw;
    }

    .access img {
        width: 50%;
    }

    .access-info {
        font-size: 3vw;
    }

    .access-info dl {
        flex-direction: column;
    }

    .access-info dt {
        padding-left: 0;
    }

    .access .access-media {
        display: block;
    }

    .access-button {
        flex-direction: column;
        padding: 15% 0;
    }

    .access-button button {
        width: 100%;
        padding: 4% 0;
        position: relative;
    }


    .access-button button+button {
        margin-top: 10%;
    }

    .footer-akiakane img {
        width: 40% !important;
    }

    .access-button button img {
        width: 5%;
    }

    .footer {
        padding: 5% 0 10%;
        font-weight: 500;
    }

    .footer-logo {
        font-size: 3.5vw;
    }

    .footer-text {
        width: 80%;
        margin: 5% auto;
        font-size: 3vw;
    }

    .footer-text-pc {
        display: none;
    }

    .footer-link {
        font-size: 3vw;
    }
}
