/* メインビジュアル*/
#main-visual {
    margin-bottom: var(--space-xxl);
    height: 100vh;
    overflow: hidden;
    position: relative;
}

#main-visual .container {
    width: 100%;
    height: 100%;
    position: relative;
}


#main-visual .container .video-pc {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#main-visual .container {
    border: 10px solid var(--color-accent-orangered);
}


.circle-link {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 50px;
    display: inline-block;
    text-decoration: none;
    z-index: 10;
    background-color: var(--color-yellow-light);
    border-radius: var(--border-radius-full);
    display: flex;
    justify-content: center;
    align-items: center;
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0% {
        transform: translateX(-50%) translateY(0);
    }

    25% {
        transform: translateX(-50%) translateY(5px);
    }

    50% {
        transform: translateX(-50%) translateY(0);
    }

    75% {
        transform: translateX(-50%) translateY(8px);
    }

    100% {
        transform: translateX(-50%) translateY(0);
    }
}

.circle-link:hover {
    background-color: var(--color-accent-orangered);
    transition: all 0.2s ease;
}

.circle-link::after {
    content: "";
    position: absolute;
    top: 46%;
    left: 50%;
    width: 14px;
    height: 14px;
    border-top: 3px solid var(--color-white);
    border-right: 3px solid var(--color-white);
    transform: translate(-50%, -50%) rotate(135deg);
}

.video-pc {
    display: block;
    width: 100%;
    height: auto;
}


@media screen and (max-width: 767px) {
    #main-visual {
        margin-bottom: var(--space-xl);
        height: 50vh;
        overflow: hidden;
        position: relative;
    }
}

/* AJISAI*/
#ajisai {
    margin-bottom: var(--space-xxxl);
}

#ajisai h2 {
    font-size: var(--font-size-fixed-xl);
    color: var(--color-accent-orangered);
    margin-bottom: var(--space-ml);
    font-weight: var(--font-weight-bold);
    font-family: var(--font-family-accent-2);
}

#ajisai p {
    margin-bottom: var(--space-ml);
    line-height: var(--line-height-relaxed);
}

.swiper {
    height: 500px;
    border-radius: var(--border-radius-lg);
    margin-bottom: var(--space-m);
}

.swiper-container {
    position: relative;
}

.swiper-slide img {
    height: 100%;
    object-fit: cover;
}

.swiper-pagination-bullet-active {
    opacity: var(--swiper-pagination-bullet-opacity, 1);
    background: var(--swiper-pagination-color, var(--swiper-theme-color));
}

.swiper-pagination {
    position: static;
    display: flex;
    justify-content: center;
    margin-bottom: var(--space-xl);
    gap: var(--space-m);
}

.swiper-pagination-bullet {
    background: var(--color-white);
    border: 1px solid var(--color-yellow-light);
    width: 15px;
    height: 15px;
    opacity: 1;
}

.swiper-pagination-bullet-active {
    background: var(--color-accent-orangered);
    border: 1px solid var(--color-accent-orangered);
}

@media screen and (max-width: 767px) {
    #ajisai {
        margin-bottom: var(--space-xxl);
    }

    .swiper {
        height: 300px;
    }
}

/*********************************** 
NEWS
************************************/
#news {
    margin-bottom: var(--space-xxxl);
}

#news .container .wrapper {
    position: relative;
    height: 500px;
    margin-bottom: var(--space-xxxl);
}

#news .container .left {
    position: absolute;
    background-color: rgba(255, 255, 255, 0.7);
    width: 48%;
    z-index: 10;
    padding: 50px;
    top: -32px;
}

#news .container .left .box {
    margin-bottom: var(--space-ml);
}

#news .container .left .box dl {
    border-bottom: 2px dotted var(--color-yellow-light);
    margin-bottom: var(--space-ml);
}

#news .container .right {
    position: absolute;
    width: 48%;
    right: 128px;
}

#news h2 {
    font-size: var(--font-size-fixed-xl);
    color: var(--color-accent-orangered);
    margin-bottom: var(--space-ml);
    font-weight: var(--font-weight-bold);
    position: absolute;
    right: 25px;
    top: -44px;
    font-family: var(--font-family-accent-2);
}

#news dd,
#news dt {
    margin-bottom: var(--space-xs);
}

#news dt {
    color: #DDDDDD;
}

#news dd {
    font-weight: var(--font-weight-bold);
}

#news .btn {
    margin-left: 0;
}

@media screen and (max-width: 767px) {
    #news .container .left {
        position: static;
        background-color: rgba(255, 255, 255, 0.7);
        width: 100%;
        z-index: 10;
        padding: 50px;
        top: -32px;
    }

    #news h2 {
        font-size: var(--font-size-fixed-xl);
        color: var(--color-accent-orangered);
        margin-bottom: var(--space-ml);
        font-weight: var(--font-weight-bold);
        position: static;
        right: 0;
        top: -30px;
    }

    #news .container .right {
        width: 100%;
        position: static;
    }

    #news .container .wrapper {
        display: flex;
        flex-direction: column-reverse;
    }

    #news .container .wrapper {
        height: auto;
    }
}

/********************************* 
MENU
**********************************/
#menu {
    margin-bottom: var(--space-xxxl);
    position: relative;
}

#menu .container {
    background-color: var(--color-yellow-light);
    padding: 100px 0;
    overflow: hidden;
}

#menu h2 {
    font-size: var(--font-size-fixed-xl);
    color: var(--color-accent-orangered);
    font-weight: var(--font-weight-bold);
    font-family: var(--font-family-accent-2);
}

#menu::before,
#menu::after {
    content: "";
    display: block;
    background: url(http://h-ajisai.jp/wp-content/uploads/line-yellow.png) repeat-x center top;
    background-size: contain;
    position: absolute;
    height: 40px;
    width: 100%;
}

#menu::before {
    top: -18px;
}

#menu::after {
    bottom: -18px;
    transform: rotate(180deg);
}

#menu .container .menu-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: var(--space-xl);
}

#menu .container .menu-wrapper img {
    width: clamp(125px, 7.143rem + 3.35vw, 200px);
}

#menu .detail-wrapper img {
    margin: 0 auto;
}

#menu .detail-1 img {
    width: 54%;
}

#menu .detail-2 img {
    width: 68%;
}

#menu .detail-wrapper .detail-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 450px;
    padding: 80px;
    background-image: url('http://h-ajisai.jp/wp-content/uploads//menu-flame_modified.svg');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    max-width: 1000px;
    margin: auto;
}

#menu .detail-wrapper .bg {
    width: 100%;
    background: radial-gradient(circle at top left, transparent 70px, #FFFFFF 0) top left,
        radial-gradient(circle at top right, transparent 70px, #FFFFFF 0) top right,
        radial-gradient(circle at bottom right, transparent 70px, #FFFFFF 0) bottom right,
        radial-gradient(circle at bottom left, transparent 70px, #FFFFFF 0) bottom left;
    background-size: 50% 50%;
    background-repeat: no-repeat;
    max-width: 1000px;
    margin: auto;
}

#menu .detail-box h3 {
    color: var(--color-accent-orangered);
    margin-bottom: var(--space-ml);
    font-weight: var(--font-weight-bold);
    font-family: var(--font-family-accent-2);
    text-align: center;
    font-size: var(--font-size-fixed-l);
}

#menu .detail-wrapper .detail-box p {
    line-height: var(--line-height-relaxed);
}

#menu .detail-wrapper {
    display: flex;
    flex-direction: column;
    row-gap: var(--space-l);
    margin-bottom: 150px;
}

#menu .text-wrapper {
    display: flex;
    gap: 10px;
    align-items: baseline;
}

/* 雲挿入 */
.wide_full{
    position: relative;
}

#menu .cloud{
  position: absolute;
  height: auto;
}

#menu .detail-wrapper .cloud.cloud1{
  top: -15%;
  right: 2%;
  width: 25%;
}

#menu .detail-wrapper .cloud.cloud2{
  top: -10%;
  left: -4%;
  width: 20%;
}

#menu .reservation-wrapper .cloud.cloud3{
  top: -30%;
  right: -14%;
  width: 32%;
}

#menu .cloud img {
  width: 100%;  
  height: auto;
  display: block;         
}
/* /雲挿入 */

/* レスポンシブ対応 */
@media screen and (max-width: 767px) {
    #menu .detail-wrapper-2 {
        flex-direction: column;
    }

    #menu .detail-wrapper-2 .img-box {
        width: 100%;
    }

    #menu .detail-wrapper-2 .text-box {
        width: 100%;
    }

    #menu .detail-wrapper-2 .text-box h3 {
        font-size: var(--sp-heading);
    }

    #menu .detail-wrapper img {
        width: 90%;
    }
/* 雲挿入 */
    #menu .cloud img {
    width: 100%;
    height: auto;
    display: block;
}

#menu .detail-wrapper .cloud.cloud1 {
    top: -7%;
    right: 2%;
    width: 40%;
}

#menu .detail-wrapper .cloud.cloud2 {
    top: -13%;
    left: -4%;
    width: 35%;
}

#menu .reservation-wrapper .cloud.cloud3 {
    top: -15%;
    right: -14%;
    width: 47%;
}

/* /雲挿入 */
    #menu .detail-wrapper-2 .img-box img {
        height: 320px;
        width: 100%;
        object-fit: cover;
    }

    #menu .detail-wrapper .detail-box {
        padding: 80px 30px;
    }

    #menu .detail-wrapper .detail-box {
        min-height: 350px;
    }

    #menu .detail-wrapper .bg {
        width: 100%;
        background: radial-gradient(circle at top left, transparent 50px, #FFFFFF 0) top left,
            radial-gradient(circle at top right, transparent 50px, #FFFFFF 0) top right,
            radial-gradient(circle at bottom right, transparent 50px, #FFFFFF 0) bottom right,
            radial-gradient(circle at bottom left, transparent 50px, #FFFFFF 0) bottom left;
        background-size: 50% 50%;
        background-repeat: no-repeat;
    }
}

/* INFORMATION */
#INFORMATION {
    margin-bottom: var(--space-xxxl);
}

#INFORMATION .container {
    background-color: var(--color-white);
    position: relative;
    padding: 60px 40px;
}

#INFORMATION .container h2 {
    font-size: var(--font-size-fixed-xl);
    color: var(--color-accent-orangered);
    margin-bottom: var(--space-ml);
    font-weight: var(--font-weight-bold);
    font-family: var(--font-family-accent-2);
    text-align: center;
    position: absolute;
    top: -40px;
    left: 20px;
}

#INFORMATION .container h3 {
    font-size: var(--font-size-fixed-l);
    color: var(--color-black);
    margin-bottom: var(--space-l);
    font-weight: var(--font-weight-bold);
    font-family: var(--font-family-accent-2);
    text-align: center;
}

#INFORMATION .container img {
    margin-bottom: var(--space-l);
}

#INFORMATION .container .table01 {
    width: 100%;
    margin-bottom: 40px;
}

#INFORMATION .info-wrapper {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

.map-wrapper {
    height: 500px;
    margin-bottom: var(--space-ml);
}

.table01 tr {
    border-bottom: 1px solid #b5b1b1;
}

.table01 th,
.table01 td {
    padding: 24px 0;
    border: none;
    line-height: var(--line-height-normal);
}

.table01 th {
    width: 30%;
}

@media screen and (max-width: 767px) {
    #INFORMATION .container h2 {
        position: static;
    }

    #INFORMATION .container {
        background-color: var(--color-white);
        position: relative;
        padding: 60px 0px;
    }

    #INFORMATION .info-wrapper {
        width: 90%;
    }

    .table01,
    .table01 thead,
    .table01 tbody,
    .table01 th,
    .table01 td,
    .table01 tr {
        display: block;
        width: 100%;
    }

    .table01 th,
    .table01 td {
        padding: 12px 0;
    }

}