html{
    font-size: 62.5%;
}

*,*::before,*::after{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

:root{
    --color-green:#99C29E;
    --color-red:#e54f54;
    --color-at-green:#00913a;
    --color-yGreen:#99C29E;
    --color-yellow:#f8b62d;
    --color-black:#333;
    --color-gray:#898989;
    --color-white:#fefefe;
    --color-purple:#b47ac9;
    --color-yellowBlue:#00a6c1;
    --color-blue:#0062c8;
    --font-montserrat:"Montserrat", sans-serif;
    --font-gothic:'Noto Sans JP',"游ゴシック体", YuGothic ,"游ゴシック",Yu Gothic,'Noto Sans JP', sans-serif;
    --font-serif:"Noto Serif JP", serif;
    --font-urbanist:"Urbanist", sans-serif;
    --weight-400:400;
    --weight-500:500;
    --weight-600:600;
    --weight-700:700;
}

body{
    font-family: var(--font-gothic);
    color: var(--color-black);
    font-size: 1.6rem;
    letter-spacing: 0.12em;
    line-height: 1.8;
    padding-top: 110px;
    position: relative;
}

img{
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
}

h1,h2{
    font-weight: var(--weight-400);
}

a {
    color: var(--color-black);
    transition: ease 0.5s;
    display: inline-block;
    outline: none;
    text-decoration: none;
}

.br{
    display: none;
}

ul,li,tr,th,td,dl,dt,dd{
    text-decoration: none;
    list-style: none;
}

/*--- swiper ----*/
.swiper-wrapper {
    transition-timing-function: linear;
}

.swiper-slide{
    padding: 0 2px;
}

.swiper-horizontal>.swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-horizontal{
    bottom: -2vw;
}


/*---- link -----*/
.linkText span{
    position: relative;
    padding-right: min(34px, 7vw);
    display: flex;
    justify-content: center;
    align-items: center;
}

.linkArrow:hover span::before{
    opacity: 0;
}

.linkText{
    position: relative;
    font-weight: 300;
}

.linkText::after {
    position: absolute;
    left: 0;
    content: '';
    width: 100%;
    height: 1px;
    background:var(--color-yGreen);
    bottom: -1px;
    transform: scale(0, 1);
    transform-origin: left top;
    transition: transform 0.3s;
}

.linkText-green{
    color: var(--color-yGreen);
}

.linkText-green span:after{
    background-color: var(--color-yGreen);
}

.linkText-green span::before{
    background: url(img/arrow-white.svg) no-repeat;
    background-size: 100%;
}

.linkText-white{
    color: var(--color-white);
}

.linkText-white span:after{
    background-color: var(--color-white);
}

.linkText-white span::before{
    background: url(img/arrow-green.svg) no-repeat;
    background-size: 100%;
}

.linkBox{
    border-radius: 26px;
    padding: 8px 12px;
    text-transform: uppercase;
    display: block;
    max-width: 235px;
}

.linkBox span{
    position: relative;
    padding-right: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.linkBox-green{
    background: var(--color-yGreen);
    color: var(--color-white);
}

.linkBox-green.linkArrow span::after{
    background: var(--color-white);
}

.linkBox-green:hover{
    background: #79997c;
}

.linkBox-white{
    background: var(--color-white);
    color: var(--color-at-green);
}

/*----- scroll -----*/
.scrollBar{
    position: absolute;
    top: 70svh;
    left: 5vw;
    padding-bottom: 8px;
}

.scrollBar p{
    color: var(--color-gray);
    font-family: var(--font-montserrat);
    text-transform: uppercase;
    writing-mode: tb;
}


.scrollBar:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-gray);
    animation: circlemove 2.4s ease-in-out infinite, cirlemovehide 2.4s ease-out infinite;
    padding-bottom: 6px;
  }
  
  @keyframes circlemove{
    0%{bottom: -18%;}
    100%{bottom:-124%;}
  }
  
  @keyframes cirlemovehide{
    0%{opacity:0}
    50%{opacity:1;}
    80%{opacity:0.9;}
    100%{opacity:0;}
  }
  
  .scrollBar:after{
    content: "";
    position: absolute;
    bottom: -124%;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 85px;
    background: var(--color-gray);
  }


.fade-in {
    opacity: 0;
    transform: translate(0, 10px);
    transition: ease 1.4s;
}
.scroll-in {
    opacity: 1;
    transform: translate(0, 0);
}

.blur-in {
    opacity: 0;
    filter: blur(10px);
    transition: ease 1.4s;
}
.scroll-in {
    opacity: 1;
    filter: blur(0px);
    transform: translate(0, 0);
}


/*----------*/
/* KV
/*----------*/
.KV{
    position: relative;
    height: 62vw;
}

.KV-wrapper{
    position: relative;
    width:70%;
    height: 100%;
    margin: 0 auto;
}

.KV-logo{
    position: absolute;
    width: min(300px, 18vw);
    left: 7%;
    top: 7%;
    animation: blurIn 1s ease 1.6s forwards;
    opacity: 0;
}
.KV-logo img{
    display: block;
    margin-bottom: 8px;
}
.KV-logo p{
    font-size: min(1.4rem, 3vw);
    padding-bottom: 6px;
}

.KV-modelImage{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    animation: blurIn 1s ease 1.4s forwards;
    opacity: 0;
}

.KV-decoItem.-decoItem1{
    position: absolute;
    z-index: -1;
    width: 78%;
    height: auto;
    top: 6vh;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    animation: fadeIn 1.2s ease .6s forwards;
}

.KV-decoItem.-decoItem2{
    position: absolute;
    z-index: -2;
    width: 25%;
    bottom: 6vw;
    right: 10vw;
    animation: fadeIn 1.2s ease .9s forwards;
    opacity: 0;
}

@keyframes fadeIn {
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}

@keyframes blurIn {
    0%{
        opacity: 0;
        filter: blur(10px);
    }
    100%{
        opacity: 1;
        filter: blur(0px);
    }
}


/*----------*/
/* Concept
/*----------*/
.concept{
    position: relative;
    height: 54vw;
    margin: 8vw 12vw 172px;
}

.concept-copy{
    position: absolute;
    text-align: center;
    right: 16vw;
    font-size: min(1.6rem,2.94vw);
    line-height: 2.2;
}

.concept-model{
    position: absolute;
}

.c-modelImage1{
    width: 38vw;
}

.c-modelImage2{
    width: 26vw;
    right: 8vw;
    bottom: 0;
}

.c-modelImage3{
    z-index: -1;
    width: 18vw;
    right:28vw;
}

/*----------*/
/* Campaign
/*----------*/
.campaign{
    max-width: 1180px;
    width: 90%;
    margin: 0 auto 10vw;
    text-align: center;
    background: url(img/an-twenty/c-bg.jpg) no-repeat;
    background-size: cover;
    padding: min(56px, 10vw) min(32px, 6vw);
    position: relative;
}
.campaign::before{
    content: "event";
    position: absolute;
    font-family: var(--font-serif);
    font-size: min(10rem,14vw);
    top: -50px;
    left: 1%;
    color: rgb(137, 137, 137, 0.2);
    text-transform: uppercase;
    line-height: 1;
}

.campaign h2{
    font-family: var(--font-serif);
    font-size: min(4.24rem,8.24vw);
    line-height: 1.5;
    padding-bottom: min(24px,4vw);
}
.campaign h2 span{
    font-size: min(2.4rem,4.83vw);
    border-bottom: solid 1px var(--color-yellow);
}

.campaign p{
    font-size: min(1.83rem,3.6vw);
    line-height: 2;
}

.campaign-days {
    padding: min(24px, 4vw) 0 min(30px, 5vw);
    display: flex;
    justify-content: center;
    gap: min(14px, 1.2vw);
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
}
.campaign-days p{
    font-family: var(--font-montserrat)!important;
}
p.-days_date{
    font-size: min(4.24rem,7.4vw);
    line-height: 1.4;
}
p.-days_date span{
    font-size: min(2.24rem,4.24vw);
    padding-left: min(6px, 1vw);
    font-family: var(--font-gothic);;
}

p.-days_hour{
    font-size: min(2.24rem, 4vw);
    line-height: 1.5;
}
p.-days_hour span{
    font-size: min(1.83rem,3.24vw);
}

p.campaign-ann{
    font-size: min(1.6rem, 3.4vw);
}

p.campaign-ann br{
    display: block;
}

.eventBanner-area {
    padding-bottom: min(50px, 9vw);
}

.eventBanner-list {
    max-width: 1240px;
    width: 86%;
    margin: 0px auto;
    padding-top: min(24px, 4vw);
    display: flex;
    gap: 24px;
    justify-content: space-around;
}

.eventBanner-list li {
    width: 100%;
    max-width: 650px;
}

.eventBanner-list li a:hover {
    opacity: 0.7;
}

.campaign-resavation h3{
    font-size: min(2.24rem,4vw);
    padding-bottom: min(18px, 3vw);
    font-weight: 400;
}

.campaign-resavation ul{
    display: flex;
    font-family: var(--font-montserrat);
    text-transform: uppercase;
    justify-content: center;
    gap: min(32px,5vw);
    max-width: 800px;
    margin: 0 auto;
}

.campaign-resavation ul li{
    width: calc(100% / 2);
}

.campaign .linkBox{
    display: block;
    width: min(50rem, 100%);
    max-width: none;
    margin: min(5rem, 10vw) auto 0;
    font-size: min(2.24rem, 4vw);
}

li.-resavation_item.f-c_link a{
    background: rgba(255,255,255,0.6);
    font-size: min(2.24rem,3.83vw);
    height: 4em;
}

li.-resavation_item.f-c_link a:hover{
    box-shadow: 0px 0px 26px 8px rgba(137,137,137,0.2);
    -webkit-box-shadow: 0px 0px 26px 8px rgba(137,137,137,0.2);
}

li.-resavation_item ._linkImage{
    width: 130px;
}

li.-resavation_item.f-c_tel ._linkImage{
    width: 100px;
}

/*----------*/
/* Plan
/*----------*/
.plan{
    overflow: hidden;
}

.plan h2{
    font-weight: 400;
    font-size: min(1.6em, 4vw);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0 10vw 2.4em;
}

.plan h2 span{
    display: block;
}

.plan-linkBg{
    background: linear-gradient(to bottom, transparent 0%, transparent 90%, #fff 100%),url(img/an-twenty/f-lineUp_contents_bg.jpg) no-repeat center;
    background-size: cover;
    height: 88vw;
    width: 100%;
    margin-top: -24vw;
    margin-bottom: 12vw;
}

.plan-lineUpLink{
    width: 80%;
    margin: auto;
}

/*----- plan slider links -----*/
.-lineUpLink_items{
    display: block;
    position: relative;
}

.swiper-area .swiper-slide .-lineUpLink-details{
    position: absolute;
    bottom: 0;
    width: 100%;
    left: 50%;
    transform: translateX(-50%);
    height: auto;
}

h3.-lineUpLink_title{
    width: 100%;
    color: var(--color-white);
    text-align: center;
    font-weight: var(--weight-400);
    padding: 4px 6px;
    font-size: min(1.83rem, 1.6vw);
}

ul.-lineUpLink_tags{
    display: flex;
    flex-wrap: wrap;
    gap: 0.4em;
    text-align: center;
    color: var(--color-white);
    font-size: 0.9vw;
    justify-content: end;
    margin-right: 8px;
    margin-bottom: 8px;
}

ul.-lineUpLink_tags li span{
    padding: 2px 6px;
}

._items-plan1 h3.-lineUpLink_title,
._items-plan1 ul.-lineUpLink_tags li span{
    background: var(--color-red);
}

._items-plan2 h3.-lineUpLink_title,
._items-plan2 ul.-lineUpLink_tags li span{
    background: var(--color-yellow);
}

._items-plan3 h3.-lineUpLink_title,
._items-plan3 ul.-lineUpLink_tags li span{
    background: var(--color-yellowBlue);
}

._items-plan4 h3.-lineUpLink_title,
._items-plan4 ul.-lineUpLink_tags li span{
    background: var(--color-blue);
}

._items-plan5 h3.-lineUpLink_title,
._items-plan5 ul.-lineUpLink_tags li span{
    background: var(--color-purple);
}

.-lineUpLink_items picture{
    display: block;
    position: relative;
    padding-top: 100.5%;
    overflow: hidden;
}

.-lineUpLink_items picture img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: ease .5s;
}

a.-lineUpLink_items:hover picture img{
    transform: scale(1.06);
}

.-lineUpLink_items._items-plan2 img.limited-markImage{
    width: min(72px, 12vw);
    display: block;
    margin: 0 8px 6px auto;
}

p.-lineUpLink_decoText{
    position: absolute;
    z-index: 1;
    top: -8%;
    left: 0;
    text-transform: uppercase;
    font-family: var(--font-montserrat);
    font-size: 1.4vw;
    font-weight: var(--weight-500);
}
._items-plan1 p.-lineUpLink_decoText{
    color: var(--color-red);
}
._items-plan2 p.-lineUpLink_decoText{
    color: var(--color-yellow);
}
._items-plan3 p.-lineUpLink_decoText{
    color: var(--color-yellowBlue);
}
._items-plan4 p.-lineUpLink_decoText{
    color: var(--color-blue);
}
._items-plan5 p.-lineUpLink_decoText{
    color: var(--color-purple);
}

/*---- swiper ---*/
.swiper-area .swiper{
    overflow: visible;
}

.swiper-area .swiper-slide{
    width: 26vw;
}

.swiper-controller{
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    gap: 1em;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    margin-top: min(16px,4vw);
}

.swiper-button-prev,
.swiper-button-next {
    position: relative;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    margin: 0;
    display: grid;
    place-content: center;
    width: 2em;
    height: 2em;
    cursor: pointer;
    -webkit-transition: .5s;
    transition: .5s;
    background: var(--color-orange);
    border-radius: 50%;
    margin: 0 6px;
}

.swiper-button-prev::after,
.swiper-button-next::after {
    width: 1.2rem;
    height: 1.2rem;
    content: "";
    border: solid var(--color-white);
    border-width: 3px 3px 0 0;
}

.swiper-button-next::after {
    margin-right: 0.4rem;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.swiper-button-prev::after {
    margin-left: 0.4rem;
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);
}


/*----- plan details -----*/
.-detailsWrap_contents{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: min(172px, 18vw);
    width: 92vw;
}

.-detailsWrap_contents._contents3,
.-detailsWrap_contents._contents5{
    flex-direction: row;
    margin: 0 0 min(162px, 20vw) auto;
}

.-detailsWrap_textArea{
    width: calc(100% - 58vw);
    font-family: var(--font-serif);
}

.-detailsWrap_textArea h3{
    font-weight: var(--weight-400);
    font-size: 2.6vw;
    line-height: 1.4;
    display: flex;
    align-items: baseline;
    gap: 0.14em;
    padding: 0.8vw 0 1.8vw;
}

._contents1 .-detailsWrap_textArea h3{
    color: var(--color-red);
}
._contents2 .-detailsWrap_textArea h3{
    color: var(--color-yellow);
}
._contents3 .-detailsWrap_textArea h3{
    color: var(--color-yellowBlue);
}
._contents4 .-detailsWrap_textArea h3{
    color: var(--color-blue);
    flex-wrap: wrap;
    gap: 0;
}
._contents5 .-detailsWrap_textArea h3{
    color: var(--color-purple);
    flex-wrap: wrap;
    gap: 0;
}
._contents5 .-detailsWrap_textArea h3 span{
    width: 100%;
}

.-detailsWrap_textArea h3 span{
    text-transform: uppercase;
    font-family: var(--font-montserrat);
    font-size: 1.2vw;
}

.-detailsWrap_textArea .linkBox{
    max-width: 410px;
    width: 100%;
    padding: min(16px, 4vw) 12px;
    border-radius: 9999px;
    font-size: min(1.83rem, 4vw);
}
.-detailsWrap_textArea .linkBox.linkArrow span:after{
    height: min(32px, 8vw);
    width: min(32px, 8vw);
}
.-detailsWrap_textArea .linkBox.linkArrow span::before{
    height: min(10px, 3.6vw);
    width: min(16px, 3.8vw);
    right: 2%;
    top: 50%;
}

._contents1 .-detailsWrap_textArea .linkBox{
    background: var(--color-red);
}

._contents1 .-detailsWrap_textArea .linkArrow span::before{
    background: url(img/an-twenty/arrow-red.svg) no-repeat;
    background-size: 100%;
}

.plan-linkBox{
    max-width: 325px;
    width: 88%;
    padding: min(16px, 4vw) 12px;
    border-radius: 9999px;
    color: var(--color-white);
}

._contents1 .plan-linkBox{
    background: var(--color-red);
}

.plan-linkBox span{
    position: relative;
    padding-right: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.plan-linkBox span::after{
    background: var(--color-white);
    border-radius: 50%;
    content: "";
    display: block;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(0, -50%);
    height: min(26px, 6vw);
    width: min(26px, 6vw);
    transition: ease .3s;
}
.plan-linkBox span::before{
    content: "";
    position: absolute;
    -webkit-mask-size: auto;
    mask-size: auto!important;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat!important;
    background-repeat: no-repeat;
    background-color: var(--color-red);
    height: min(8px, 2vw);
    width: min(15px, 3vw);
    right: min(4px, 1.4vw);
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    -webkit-mask: url(img/arrow-red.svg);
    mask: url(img/arrow-red.svg);
}

p.-detailsWrap_copy{
    font-size: 1.08vw;
}

.-detailsWrap_contents._contents2 img.limited-markImage{
    width: min(84px, 17vw);
    margin-bottom: min(12px, 1vw);
}

dl.plan-menu{
    font-size: 1.16vw;
    padding-bottom: 1.8vw;
    display: flex;
    flex-direction: column;
    gap: 0.6em;
}

div.plan-menu_item{
    display: flex;
    align-items: center;
    gap: 0.6em;
    line-height: 1.5;
}

div.plan-menu_item dt{
    color: var(--color-white);
    width: 5vw;
    text-align: center;
    padding: 4px;
}
._contents1 div.plan-menu_item dt{
    background: var(--color-red);
}
._contents2 div.plan-menu_item dt{
    background: var(--color-yellow);
}
._contents3 div.plan-menu_item dt{
    background: var(--color-yellowBlue);
    width: 9vw;
}
._contents4 div.plan-menu_item dt{
    background: var(--color-blue);
}
._contents5 div.plan-menu_item dt{
    background: var(--color-purple);
    width: 9vw;
}

div.plan-menu_item dd span {
    font-size: 85%;
}

._contents3 div.plan-menu_item dd{
    width: calc(100% - 9vw);
}

ul.plan-tags{
    display: flex;
    flex-wrap: wrap;
    gap: 0.8em;
    padding-bottom: 1.8vw;
}

ul.plan-tags li{
    border-radius: 50em;
    padding: 2px 12px;
    font-size: 1vw;
}
._contents1 ul.plan-tags li{
    border: solid 1px var(--color-red);
}
._contents2 ul.plan-tags li{
    border: solid 1px var(--color-yellow);
}
._contents3 ul.plan-tags li{
    border: solid 1px var(--color-yellowBlue);
}
._contents4 ul.plan-tags li{
    border: solid 1px var(--color-blue);
}
._contents5 ul.plan-tags li{
    border: solid 1px var(--color-purple);
}

.plan-price{
    font-size: 1.2vw;
}

.plan-price h4{
    font-family: var(--font-montserrat);
    font-weight: var(--weight-500);
    text-transform: uppercase;
    font-size: 1.4vw;
    padding-bottom: 0.5em;
    line-height: 1.4;
}

.plan-price h4 span{
    font-size: 1vw;
    padding-left: .5em;
}

.plan-price p{
    padding-bottom: 1vw;
}

.plan-price p.plan-wanted{
    padding: 0;
}

.plan-price p.plan-price-note{
    font-size: 75%;
}

._contents1 .plan-price{
    padding-bottom: .4em;
}

.plan-price>dl.-price_list{
    display: flex;
    flex-direction: column;
    gap: 1vw;
    padding-top: .3em;
    padding-bottom: 1.8vw;
}
.plan-price>dl.-price_list>._list-item{
    display: flex;
    gap: 1.2vw;
    align-items: center;
}
.plan-price>dl.-price_list>._list-item dt{
    width: 8vw;
    text-align: center;
}
._contents5 .plan-price>dl.-price_list>._list-item dt{
    background: #fcf2ff;
}

p.plan-wanted{
    padding-top: 1.6vw;
    font-size: min(1.6rem, 3.2vw);
}

.-detailsWrap_imageArea{
    width: calc(100% - 38vw);
    position: relative;
    padding-top: 36vw;
}

.-detailsWrap_swiper{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.-detailsWrap_swiper img{
    width: 100%;
    height: 100%;
    object-position: center;
    object-fit: cover;
}

.cursive-textImage{
    position: absolute;
    z-index: 1;
}

._contents1 .cursive-textImage,
._contents4 .cursive-textImage{
    top: -5vw;
    left: 0;
    width: 28vw;
}

._contents2 .cursive-textImage,
._contents3 .cursive-textImage{
    bottom: -3vw;
    right: 1vw;
    width: 27vw;
}

._contents5 .cursive-textImage{
    bottom: -3vw;
    left: 1vw;
    width: 27vw;
}

a.-detailsWrap{
    display: block;
    width: min(600px,10vw);
    font-size: 1.2vw;
}

._contents1 a.-detailsWrap_link{
    color: var(--color-red);
}

._contents1 a.-detailsWrap_link span{
    position: relative;
    padding-right: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}
._contents1 a.-detailsWrap_link span::after{
    position: absolute;
    content: "";
    height: min(24px, 5vw);
    width: min(24px, 5vw);
    border-radius: 50%;
    display: block;
    background: var(--color-red);
    top: 50%;
    transform: translateY(-50%);
    bottom: -1px;
    right: 0;
    transform-origin: left top;
    transition: transform 0.3s;
}
._contents1 a.-detailsWrap_link span::before{
    content: "";
    display: block;
    background: url(img/arrow-white.svg) no-repeat;
    background-size: 100%;
    height: min(8px, 1.2vw);
    width: min(12px, 2.6vw);
    position: absolute;
    z-index: 1;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 1;
    transition: ease .3s;
}
a.-detailsWrap_link:hover span:after{
    transform: translateY(-24%) scale(0.4);
}
a.-detailsWrap_link:hover span::before{
    opacity: 0;
}

/*----------*/
/* reference-photo
/*----------*/
.reference-photo{
    margin-bottom: min(172px, 18vw);
}

/*----------*/
/* furisode contact
/*----------*/
.f-contact_links{
    text-align: center;
}

.f-contact_links p{
    padding-bottom: 40px;
}

.f-contact_links ul{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6vw;
    z-index: 1;
    position: relative;
}

.f-contact_links ul li{
    width: 30vw;
}

li.f-c_link a{
    text-transform: uppercase;
    font-family: var(--font-montserrat);
    font-size: 1.4vw;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 6em;
    background: var(--color-white);
}

li.f-c_link a:hover{
    box-shadow: 0px 0px 26px 8px rgba(229,79,84,0.1);
    -webkit-box-shadow: 0px 0px 26px 8px rgba(229,79,84,0.1);
}

span._linkImage{
    position: absolute;
    right: 0;
    bottom: -2vw;
    width: 9vw;
    opacity: 0;
    transition: ease .6s;
}

li.f-c_link a:hover span._linkImage{
    opacity: 1;
}

.f-c_tel span._linkImage{
    width: 6vw;
}

.f-contactBg{
    z-index: -1;
    position: relative;
    background: linear-gradient(to top, transparent 0%, transparent 47%, #fff 91%), url(img/an-twenty/f-linkBg.jpg) no-repeat bottom;
    background-size: cover;
    height: 56vw;
}


/*----------*/
/* f end
/*----------*/
.f-end{
    position: relative;
    margin: 12vw;
    height: 60vw;
}

.f-end img{
    position: absolute;
    display: block;
}

.f-end_modelImage{
    top: 0;
    width: 46vw;
    left: 8vw;
}
.f-end_bgImage{
    width: 40vw;
    right: 12vw;
    top: 6vw;
    z-index: -1;
}

/*----------*/
/* banner
/*----------*/

.page-photoMenu_banner{
    max-width: 1240px;
    width: 86%;
    margin: min(250px, 18vw) auto 130px;
}

.page-photoMenu_banner ul {
    display: flex;
    gap: 24px;
    justify-content: space-around;
}

.page-photoMenu_banner ul li{
    width: 100%;
    max-width: 820px;
}

.page-photoMenu_banner ul li a:hover{
    opacity: 0.6;
}

.page-photoMenu_banner ul li img{
    border: solid 1px #D9D9D9;
    vertical-align: bottom;
}


@media screen and (max-width:1024px) {
    .KV{
        height: 80vw;
    }

    .KV-wrapper{
        width: 90%;
    }

    p.campaign-ann br{
        display: none;
    }

/*--------------*/
/*  concept
/*--------------*/
.concept{
    margin: 10vw 12vw 12vw;
}

.concept-copy{
    right: 8vw;
}

.c-modelImage2{
    width: 24vw;
    right: 4vw;
}

/*--------------*/
/*  Plan
/*--------------*/
.plan h2{
    padding: 0 5vw 1.4em;
}

p.-lineUpLink_decoText{
    top: -13%;
    font-size: 2.4vw;
}

.plan-lineUpLink{
    width: 90%;
}

}



@media screen and (max-width:768px) {
body{
    font-size: 1.4rem;
    padding-top: 72px;
}

.br{
    display: block;
}

/*---- swiper ----*/
.scrollBar{
    left: 2vw;
}

.swiper-horizontal>.swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-horizontal {
    bottom: -5vw;
}


/*--------------*/
/*  KV
/*--------------*/
.KV{
    height: 90vh;
    overflow: hidden;
}

.KV-wrapper{
    width: 100%;
}

.KV-logo{
    max-width: 248px;
    width: 58vw;
    left: 58vw;
    bottom: 0;
    top: auto;
}

.KV-logo img{
    width: 50vw;
    margin: 0 auto;
    display: block;
}

.KV-logo p{
    font-size: min(1.4rem, 3vw);
}

.KV-modelImage{
    width: 40vh;
}

.KV-decoItem.-decoItem1{
    width: 83%;
}
.KV-decoItem.-decoItem2{
    width: 27%;
    bottom: 25vh;
    right: 11%;
}

/*--------------*/
/*  concept
/*--------------*/
.concept{
    margin: 16vw 4vw 20vw;
    height: 89vw;
}

.c-modelImage1 {
    width: 54vw;
}
.c-modelImage2 {
    width: 36vw;
    right: 0;
}
.c-modelImage3{
    width: 30vw;
}

.concept-copy {
    right: 6vw;
    font-size: min(1.4rem,2.86vw);
}

/*----------*/
/* Campaign
/*----------*/
.campaign::before{
    top: -8vw;
}

.campaign-days{
    flex-wrap: wrap;
}

.campaign-resavation ul{
    flex-wrap: wrap;
}
.campaign-resavation ul li{
    width: 100%;
}

li.f-c_link.-resavation_item a{
    font-size: min(1.83rem, 4vw);
    box-shadow: 0px 0px 26px 8px rgba(137,137,137,0.2);
    -webkit-box-shadow: 0px 0px 26px 8px rgba(137,137,137,0.2);
}


/*--------------*/
/*  Plan
/*--------------*/
.plan h2{
    padding: 0 5vw 10vw;
}

p.-lineUpLink_decoText{
    top: -12%;
    font-size: 4.4vw;
}

/*----- plan slider -----*/
.swiper-area .swiper-slide {
    width: 54vw;
}

/*----- plan details -----*/
.-detailsWrap_contents{
    flex-wrap: wrap;
    width: 100%;
    gap: 6vw;
}

.-detailsWrap_contents._contents3,
.-detailsWrap_contents._contents5 {
    flex-direction: column-reverse;
}

.-detailsWrap_imageArea{
    width: 100%;
    padding-top: 70vw;
}

.-detailsWrap_textArea{
    width: 100%;
    padding: 0 6vw;
}

.-detailsWrap_textArea h3{
    font-size: min(3.83rem, 5.83vw);
    padding: 1.8vw 0 3.8vw;
    gap: 6px;
}
.-detailsWrap_textArea h3 span{
    font-size: min(1.83rem, 3.4vw);
}

p.-detailsWrap_copy{
    font-size: min(1.4rem,2.86vw);
}

p.-detailsWrap_copy span{
    display: block;
}

dl.plan-menu,
ul.plan-tags li,
a.-detailsWrap_link {
    font-size: min(1.6rem, 3.6vw);
}

.plan-price{
    font-size: min(1.6rem, 4vw);
}

dl.plan-menu,
ul.plan-tags,
._contents1 .plan-price{
    padding-bottom: 5.6vw;
}

div.plan-menu_item dt{
    width: 20vw;
    padding: 2px;
}
div.plan-menu_item dd{
    width: calc(100% - 20vw);
}

div.plan-menu_item dd span {
    font-size: 90%;
}

._contents1 a.-detailsWrap_link span{
    padding-right: 22px;
}

._contents3 div.plan-menu_item dt,
._contents5 div.plan-menu_item dt{
    width: 26vw;
}
._contents3 div.plan-menu_item dd{
    width: calc(100% - 26vw);
}

.plan-price h4{
    font-size: min(2.24rem, 4.4vw);
}
.plan-price h4 span{
    font-size: min(1.83rem, 3.83vw);
}

.plan-price>dl.-price_list{
    gap: 2vw;
}
.plan-price>dl.-price_list>._list-item{
    gap: 2.2vw;
}
.plan-price>dl.-price_list>._list-item dt{
    width: 23vw;
}

._contents1 .cursive-textImage,
._contents4 .cursive-textImage{
    top: -10vw;
    left: 3vw;
    width: 57vw;
}

._contents2 .cursive-textImage,
._contents3 .cursive-textImage{
    bottom: -5vw;
    width: 44vw;
}

._contents5 .cursive-textImage{
    width: 44vw;
}


/*--------------*/
/*  Furisode contact
/*--------------*/
.f-contact_links ul li {
    width: 42vw;
}

h3.-lineUpLink_title{
    font-size: min(1.83rem,3.24vw);
    padding: 2px;
}

ul.-lineUpLink_tags{
    font-size: min(1.4rem,1.54vw);
}

.plan-linkBg{
    margin-top: -22vw;
    margin-bottom: 25vw;
}

.f-contact_links{
    padding: 0 6vw 18vw;
}

li.f-c_link a{
    font-size: min(1.83rem, 4.8vw);
    height: 5em;
    box-shadow: 0px 0px 26px 8px rgba(229,79,84,0.2);
    -webkit-box-shadow: 0px 0px 26px 8px rgba(229,79,84,0.2);
}

span._linkImage{
    opacity: 1;
    width: 21vw;
}

.f-c_tel span._linkImage {
    width: 14vw;
}

li.-resavation_item span._linkImage{
    width: 20vw;
    opacity: 1;
}
li.-resavation_item.f-c_tel span._linkImage{
    width: 14vw;
}

.f-contactBg{
    background-size: 128%;
    height: 70vw;
}

/*--------------*/
/*  f end
/*--------------*/
.f-end {
    height: 78vw;
}

.f-end_modelImage {
    top: 0;
    width: 60vw;
    left: 0vw;
}
.f-end_bgImage {
    width: 48vw;
    right: 4vw;
    top: 10vw;
}

/*----------*/
/* banner
/*----------*/
.page-photoMenu_banner ul {
    flex-wrap: wrap;
}

.page-photoMenu_banner ul li{
    width: 100%;
}

.page-photoMenu_banner {
    margin: min(130px, 22vw) auto min(100px, 8vw);
}
}



@media screen and (max-width:521px) {

/*--------------*/
/*  KV
/*--------------*/
.KV-modelImage{
    width: 38vh;
}

.KV-decoItem.-decoItem1 {
    width: 100%;
    top: 6vh;
}
.KV-decoItem.-decoItem2{
    width: 37%;
    bottom: 30vh;
    right: 2%;
}

.KV-logo{
    left: 40vw;
    width: 52vw;
}

.concept{
    margin: 30vw 4vw 20vw;
}

.concept-copy {
    right: 2vw;
    top: -10vw;
}

/*--------------*/
/*  campaign
/*--------------*/
.eventBanner-list {
    flex-wrap: wrap;
    width: 100%;
}

.eventBanner-list li {
    width: 100%;
}

/*--------------*/
/*  Furisode contact
/*--------------*/
    .f-contact_links ul{
        flex-wrap: wrap;
    }

    .f-contact_links ul li{
        width: 88vw;
    }
}