@charset "utf-8";
:root {
    --lp-col-white: #ffffff;
    --lp-col-black: #000000;
    --lp-col-gray: #636f72;
    --lp-col-d-gry: #2f2826;
    --lp-col-l-gray: #f2f2f2;
    --lp-col-beige: rgb(254 235 200);
    --lp-col-l-wht: rgb(242 242 242);
    --lp-col-blue: rgb(223 229 235);
    --lp-col-green: rgb(220 237 229);
    --lp-font-jp: "Noto Sans JP", sans-serif;
    --lp-font-en: "Barlow", sans-serif;
    --lp-fw-bold: 700;
    --lp-fs-basic: clamp(1.4rem, 1.309rem + 0.284vw, 1.6rem);
    --lp-fs-xs: clamp(1.2rem, 1.155rem + 0.142vw, 1.3rem);
    --lp-fs-m: clamp(1.6rem, 1.509rem + 0.284vw, 1.8rem);
    --lp-fs-l: clamp(1.8rem, 1.709rem + 0.284vw, 2rem);
    --lp-fs-xl: clamp(2rem, 1.773rem + 0.71vw, 2.5rem);
    --lp-section-side: 4.67%;
    --lp-section-space: min(100px,12vw);
    --lp-max-sp: 92.53vw;
    --lp-max-pc: 1200px;
    --lp-container-pc: 1100px;
    --lp-space-100: min(16vw,120px)
}
#himitsunodrip {
    font-family: var(--lp-font-en),var(--lp-font-jp);
    line-height: 1.8;
    letter-spacing: 0;
    -webkit-font-smoothing: antialiased;
    color: var(--lp-col-black);
}
#himitsunodrip a {
    color: var(--lp-col-black);
    cursor: pointer;
}
#himitsunodrip img {
    width: 100%;
    max-width: 100%;
    vertical-align: bottom;
}
#himitsunodrip p {
    text-align: justify;
    color: var(--lp-col-black);
    line-height: 1.6;
    font-size: var(--lp-fs-basic);
}
@media (min-width:768px){
    #himitsunodrip p {
        line-height: 1.78;
    }
}
#himitsunodrip .fadeIn {
    transition: all 0.8s ease-in-out;
    opacity: 0;
}
#himitsunodrip .active {
	opacity: 1;
}
@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
#himitsunodrip .pc {
    display: none;
}
@media (min-width:768px){
    #himitsunodrip .sp {
        display: none;
    }
    #himitsunodrip .pc {
        display: inline-block;
    }
}
#himitsunodrip .navigation.special {
    opacity: 0;
}
#himitsunodrip .navigation.special ul {
    display: flex;
    background-color: var(--lp-col-gray);
    text-align: center;
}
#himitsunodrip .navigation .nav_inner {
    position: fixed;
    bottom: 0;
    z-index: 9999999;
    width: min(100%,var(--lp-max-pc));
    margin: 0 auto;
    left: 50%;
    transform: translateX(-50%);
}
#himitsunodrip .navigation ul .nav_list {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
#himitsunodrip .navigation ul .nav_list:not(:last-child) {
    border-right: 1px solid var(--lp-col-white);
}
#himitsunodrip .navigation ul .nav_list button {
    color: var(--lp-col-white);
    padding: min(15px,2vw) 0;
    display: block;
    line-height: 1.5;
    font-size: var(--lp-fs-xs);
    font-weight: var(--lp-fw-bold);
}
@media (min-width:768px){
    #himitsunodrip .navigation ul .nav_list button {
        font-size: var(--lp-fs-basic);
    }
}

#himitsunodrip .first_view {
    background-color: var(--lp-col-l-gray);
    position: relative;
    height: min(138.67vw,680px);
    width: min(100%,var(--lp-max-pc));
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: min(40px,6vw);
}
#himitsunodrip .first_view > .symbol {
    width: min(48vw,280px);
}
#himitsunodrip .first_view > h1 {
    width: min(57vw,380px);
}
#himitsunodrip .first_view > .symbol,
#himitsunodrip .first_view > h1 {
    opacity: 0;
    transform: translateY(10px);
    animation: fadeInUp 0.8s ease-out forwards;
}
#himitsunodrip .first_view > .symbol {
    animation-delay: 0.8s;
}
#himitsunodrip .first_view > h1 {
    animation-delay: 1.4s;
}
@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#himitsunodrip .main_contents {
    width: min(100%,var(--lp-max-pc));
    margin: 0 auto;
}
#himitsunodrip #about {
    background-color: var(--lp-col-l-gray);
}
#himitsunodrip #about .introduction {
    padding: var(--lp-space-100) 0;
}
#himitsunodrip #about .introduction p {
    text-align: center;
    font-size: clamp(1.6rem, 1.418rem + 0.568vw, 2rem);
    line-height: 2;
}
#himitsunodrip #about .introduction h2 {
    width: min(420px,80vw);
    margin: min(50px,10vw) auto;
}
#himitsunodrip #about .date p {
    font-size: calc( var(--lp-fs-l) * 1.3);
    line-height: 1.4;
    letter-spacing: 0.02em;
}
#himitsunodrip #about .date p span {
    font-size: var(--lp-fs-xs);
}
#himitsunodrip #about .date p small {
    font-size: var(--lp-fs-m);
}
@media (min-width:768px){
    #himitsunodrip #about .date p {
        font-size: calc( var(--lp-fs-l) * 1.4);
    }
    #himitsunodrip #about .date p span {
        font-size: var(--lp-fs-basic);
    }
}
#himitsunodrip #about .message {
    position: relative;
    overflow: hidden;
    padding: min(150px,40vw) 0;
}
#himitsunodrip #about .message::before {
    content: '';
    position: absolute;
    width: 150%;
    height: 90%;
    background: var(--lp-col-white);
    border-radius: 50%;
    z-index: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    filter: blur(10px);
    opacity: .8;
}
@media (min-width:768px){
    #himitsunodrip #about .message::before {
        border-radius: 10%;
    }
}
#himitsunodrip #about .message p {
    position: relative;
    z-index: 1;
    text-align: center;
    font-size: clamp(1.6rem, 1.418rem + 0.568vw, 2rem);
    line-height: 2;
}
#himitsunodrip #about .message p:not(:last-child) {
    padding-bottom: min(40px,6vw);
}
#himitsunodrip #about .message > p > span {
    font-weight: var(--lp-fw-bold);
}
#himitsunodrip #about .drink_map > p {
    padding-left: var(--lp-section-side);
}
@media (min-width:768px){
    #himitsunodrip #about .drink_map > p {
        padding-left: 0;
        font-size: var(--lp-fs-m);
    }
}
#himitsunodrip #about .drink_map {
    margin: min(100px,10vw) 0;
}
@media (min-width:768px){
    #himitsunodrip #about .drink_map {
        display: flex;
        flex-direction: column;
        width: 60%;
        margin: 0 auto;
        padding: min(40px,6vw) 0;
    }
}
#himitsunodrip #about .map_wrap {
    position: relative;
}
#himitsunodrip #about .map_wrap .map_text {
    position: absolute;
    top: 0;
    left: var(--lp-section-side);
    background-color: rgb(255 255 255 / .8);
}
@media (min-width:768px){
    #himitsunodrip #about .map_wrap .map_text {
        top: min(3vw,30px);
        left: 0;
    }
}
#himitsunodrip #about .map_wrap .map_text p {
    display: flex;
    align-items: center;
    gap: min(10px,2vw);
    padding: min(2.5vw,10px) min(3vw,20px);
    line-height: 1.4;
    font-size: var(--lp-fs-xs);
}
#himitsunodrip #about .map_wrap .map_text p::before {
    content: "";
    background: url(../images/ico_pin_red.png) center center / contain no-repeat;
    width: min(5vw,15px);
    height: min(7vw,30px);
}
#himitsunodrip #about .map_wrap .map_container {
    padding: 0 min(1vw,10px);
    position: relative;
    margin: min(40px,8vw) 0;
}
@media (min-width:768px){
    #himitsunodrip #about .map_wrap .map_container {
        padding: 0;
    }
}
#himitsunodrip #about .map_wrap [data-modal] {
    position: absolute;
    display: flex;
    align-items: center;
    gap: min(5px,0.5vw);
    font-size: var(--lp-fs-basic);
    color: var(--lp-col-white);
    line-height: 1.1;
    font-feature-settings: "palt";
}
#himitsunodrip #about .map_wrap [data-modal="modal-hokkaido"] {
    top: 11vw;
    left: 81vw;
}
#himitsunodrip #about .map_wrap [data-modal="modal-tohoku"] {
    top: 36vw;
    left: 73.5vw;
}
#himitsunodrip #about .map_wrap [data-modal="modal-kanto"] {
    top: 61vw;
    left: 73vw;
}
#himitsunodrip #about .map_wrap [data-modal="modal-chubu"] {
    top: 66vw;
    left: 57vw;
}
#himitsunodrip #about .map_wrap [data-modal="modal-kinki"] {
    top: 72vw;
    left: 47vw;
    flex-direction: column;
}
#himitsunodrip #about .map_wrap [data-modal="modal-chugoku"] {
    top: 66.5vw;
    left: 23.5vw;
    flex-direction: column;
}
#himitsunodrip #about .map_wrap [data-modal="modal-kyushu"] {
    top: 73.6vw;
    left: 9.5vw;
    flex-direction: column;
    align-items: baseline;
}
@media (min-width:768px){
    #himitsunodrip #about .map_wrap [data-modal="modal-hokkaido"] {
        top: min(7vw,90px);
        left: min(50vw,600px);
    }
    #himitsunodrip #about .map_wrap [data-modal="modal-tohoku"] {
        top: min(23vw,280px);
        left: min(44.5vw,536px);
    }
    #himitsunodrip #about .map_wrap [data-modal="modal-kanto"] {
        top: min(37vw,440px);
        left: min(43.5vw,520px);
    }
    #himitsunodrip #about .map_wrap [data-modal="modal-chubu"] {
        top: min(40vw,480px);
        left: min(34vw,420px);
    }
    #himitsunodrip #about .map_wrap [data-modal="modal-kinki"] {
        top: min(44vw,540px);
        left: min(29vw,342px);
    }
    #himitsunodrip #about .map_wrap [data-modal="modal-chugoku"] {
        top: min(40.8vw,492px);
        left: min(16vw,180px);
    }
    #himitsunodrip #about .map_wrap [data-modal="modal-kyushu"] {
        top: min(46vw,552px);
        left: min(5.5vw,68px);
    }
}
#himitsunodrip #about [data-modal]  span::after{
    content: "";
    background: url(../images/ico_plus.svg) center center / contain no-repeat;
    width: min(4vw,25px);
    height: min(4vw,25px);
    display: block;
}
#himitsunodrip .modal {
    display: none;
    place-content: center;
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    overflow: auto;
    background: rgb(255 255 255 / .8);
    transition: opacity 0.5s, visibility 0.5s;
    z-index: 9999999;
    flex-direction: column;
}
#himitsunodrip .modal .modal-box {
    overflow-y: scroll;
    background-color: var(--lp-col-white);
    max-width: 350px;
    width: 80%;
    margin: 0 auto;
    position: relative;
    border-radius: 10px;
    border: 1px solid var(--lp-col-gray);
    padding: min(4vw,20px) min(5vw,30px);
}
#himitsunodrip .modal .modalOpen {
    cursor: pointer;
}
#himitsunodrip .modal .modalClose {
    max-width: 350px;
    text-align: right;
    width: 80%;
    margin: 0 auto;
    cursor: pointer;
    font-size: 40px;
    font-weight: 200;
    line-height: 1;
    color: var(--lp-col-gray);
}
#himitsunodrip .modal.modalClose img {
    width: min(22px,4vw);
}
#himitsunodrip .modal-box button,
.swiper-button-prev,
.swiper-button-next,
#himitsunodrip .splide .profile_link a {
    outline: none!important;
}
#himitsunodrip .modal-box button:focus,
.swiper-button-prev:focus,
.swiper-button-next:focus,
#himitsunodrip .splide .profile_link a:focus  {
    outline: none!important;
}
#himitsunodrip .swiper-button-prev {
    position: absolute;
    top: 50%;
    left: 4vw;
    transform: translateY(-50%);
    width: min(35px, 15vw);
    z-index: 99999;
}
#himitsunodrip .swiper-button-next {
    position: absolute;
    top: 50%;
    right: 4vw;
    transform: translateY(-50%);
    width: min(35px, 15vw);
    z-index: 99999;
}
@media (min-width: 768px) {
    #himitsunodrip .swiper-button-prev {
        left: calc( (100% - 350px) / 2.2 );
    }
    #himitsunodrip .swiper-button-next {
        right: calc( (100% - 350px) / 2.2 );
    }
}
#himitsunodrip .swiper-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    height: min(2vw, 40px);
    margin-top: min(20px, 4vw);
    position: static;
}
#himitsunodrip .swiper-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    height: min(2vw,40px);
    gap: min(2vw,10px);
}
#himitsunodrip .swiper-pagination-bullet {
    width: min(15px,2vw);
    height: min(15px,2vw);
    background: var(--lp-col-white);
    opacity: 1;
    border-radius: 50%;
    border: 1px solid var(--lp-col-gray);
}
#himitsunodrip .swiper-pagination-bullet-active {
    background: var(--lp-col-gray)
}
#himitsunodrip .swiper .modal-title {
    font-size: var(--lp-fs-m);
    background-color: var(--lp-col-gray);
    color: var(--lp-col-white);
    border-radius: 60px;
    text-align: center;
    display: inline-block;
    padding: min(3px,1vw) min(40px,12vw);
    margin-bottom: min(20px,4vw);
}
#himitsunodrip .swiper .swiper-slide {
    text-align: center;
}
#himitsunodrip .swiper .drink-title {
    text-align: center;
    padding: min(15px,3vw) 0 min(10px,2vw);
    font-weight: var(--lp-fw-bold);
}
#himitsunodrip .swiper .drink-title > small {
    font-size: var(--lp-fs-xs);
}
#himitsunodrip .swiper p {
    line-height: 1.6;
}
#himitsunodrip .swiper .profile {
    display: flex;
    gap: min(20px,4vw);
    margin-top: min(20px,4vw);
}
#himitsunodrip .swiper .profile-img img {
    border-radius: 50%;
    width: min(100px,30vw);
}
#himitsunodrip .swiper .profile-text {
    text-align: left;
}
#himitsunodrip .swiper .profile-text .area {
    font-weight: var(--lp-fw-bold);
    line-height: 1.3;
    padding-bottom: min(10px,1vw);
}
#himitsunodrip .swiper .profile-text .farm {
    line-height: 1.3;
    text-align: left;
}
#himitsunodrip .swiper .profile_link {
    display: inline-block;
}
#himitsunodrip .swiper .profile_link a {
    display: flex;
    align-items: center;
    font-size: var(--lp-fs-basic);
    gap: min(5px,1vw);
    margin-top: min(2px,1.4vw);
    border-bottom: 1px solid;
}
#himitsunodrip .swiper .profile_link a::after  {
    content: "";
    background: url(../images/profile_arrow.png) center center / contain no-repeat;
    width: min(3.5vw,18px);
    height: min(3.5vw,18px);
}
#himitsunodrip .no-swipe .swiper-wrapper {
    transform: none !important;
    transition: none !important;
    display: flex;
}
#himitsunodrip .no-swipe .swiper-button-next,
#himitsunodrip .no-swipe .swiper-button-prev,
#himitsunodrip .no-swipe .swiper-pagination {
    display: none !important;
}

#himitsunodrip h4 {
    font-size: clamp(2rem, 1.091rem + 2.841vw, 4rem);
    text-align: center;
    font-weight: var(--lp-fw-bold);
    margin-bottom: min(20px,4vw);
    line-height: 1.4;
    letter-spacing: 0.04em;
}
#himitsunodrip h4.ja{
    font-size: var(--lp-fs-l);
}
#himitsunodrip #about .drink_lineup {
    position: relative;
    padding-bottom: min(54px,8vw);;
}
#himitsunodrip #about .wave {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
}
#himitsunodrip #about .wave svg path {
    fill: var(--lp-col-l-gray);
    animation: wave linear 16s infinite;
}
@keyframes wave {
    from {
        transform: translateX(-66.66%);
    }
    to {
        transform: translateX(0);
    }
}
#himitsunodrip #about .lineup_wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
@media (min-width:768px){
    #himitsunodrip #about .lineup_wrap {
        grid-template-columns: repeat(4, 1fr);
    }
}
#himitsunodrip #about .lineup_item {
    position: relative;
}
#himitsunodrip #about .lineup_item .modalOpen {
    position: relative;

}
#himitsunodrip #about .lineup_item {
    cursor: pointer;
}
#himitsunodrip #about .lineup_item  [data-modal]::after{
    content: "";
    background: url(../images/ico_plus.svg) center center / contain no-repeat;
    width: min(5vw,30px);
    height: min(5vw,30px);
    display: block;
        position: absolute;
    top: min(2vw,10px);
    right: min(2vw,10px);
}
#himitsunodrip #about .map {
    padding: var(--lp-section-space) var(--lp-section-side);
}
@media (min-width:768px){
    #himitsunodrip #about .map {
        width: 80%;
        margin: 0 auto min(60px,10vw);
    }
}
#himitsunodrip #about .map .address {
    line-height: 1.4;
}
#himitsunodrip #about .map .address a {
    border-bottom: 1px solid var(--lp-col-black);
}
#himitsunodrip #about .map_img {
    margin-top: min(30px,6vw);
}
#himitsunodrip #about .campaign {
    background-color: var(--lp-col-blue);
    padding-bottom: min(130px,30vw);
}
#himitsunodrip #about .campaign_intro {
    padding: var(--lp-section-space) var(--lp-section-side);
    text-align: center;
}
#himitsunodrip #about .campaign_intro h4 {
    clip-path: polygon( 0px 0%, 100% 0%, 93% 50%, 100% 100%, 0 100%, 7% 50%);
    background-color: var(--lp-col-white);
    display: inline-block;
    text-align: center;
    padding: min(15px,2vw) min(80px,15vw);
}
@media (min-width:768px){
    #himitsunodrip #about .campaign_intro h4 {
    clip-path: polygon( 0px 0%, 100% 0%, 96% 50%, 100% 100%, 0 100%, 4% 50%);
    }
}
#himitsunodrip #about .campaign_intro p {
    text-align: center;
}
#himitsunodrip #about .campaign_lineup {
    padding: 0 var(--lp-section-side);
}
#himitsunodrip #about .campaign_lineup > p {
    font-weight: var(--lp-fw-bold);
    font-size: var(--lp-fs-xl);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: min(var(--lp-max-sp),var(--lp-container-pc));
    margin: 0 auto;
    gap: min(20px,3vw);
}
#himitsunodrip #about .campaign_lineup > p::before,
#himitsunodrip #about .campaign_lineup > p::after {
    content: "";
    height: min(0.25vw,1px);
    background-color: var(--lp-col-black);
    display: block;
    flex-grow: 1;
}
#himitsunodrip #about .campaign_wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: min(60px,6vw);
    padding: var(--lp-section-space) 0;
}
@media (min-width:768px){
    #himitsunodrip #about .campaign_wrap {
        grid-template-columns: repeat(4, 1fr);
        padding: min(60px,4vw) 0 0;
    }
}
#himitsunodrip #about .entry_item_img img {
    border-radius: 50%;
}
#himitsunodrip img.box_blue {
    box-shadow: 0 4px 10px rgb(191 216 231 / .8);
}
#himitsunodrip img.box_pink {
    box-shadow: 0 4px 10px rgb(255 215 202 / .8);
}
#himitsunodrip img.box_purple {
    box-shadow: 0 4px 10px rgb(231 208 215 / .8);
}
#himitsunodrip img.box_yellow {
    box-shadow: 0 4px 10px rgb(255 207 106 / .8);
}
#himitsunodrip #about .entry_item .item_name {
    font-weight: var(--lp-fw-bold);
    line-height: 1.8;
    font-size: var(--lp-fs-l);
    padding: min(20px,3vw) 0;
} 
#himitsunodrip #about .entry_item .item_name span {
    font-size: var(--lp-fs-basic);
    display: flex;
    align-items: center;
    gap: min(10px,3vw);
} 
#himitsunodrip #about .entry_item .item_name span::before {
    content: "";
    flex-grow: 1;
    height: min(0.25vw,1px);
    background-color: var(--lp-col-black);
} 
#himitsunodrip #about .item_detail {
    line-height: 1.6;
}
#himitsunodrip #about .participation {
    padding: var(--lp-section-space) var(--lp-section-side);
}
#himitsunodrip #about .participation_wrap {
    display: flex;
    flex-direction: column;
    gap: min(20px,4vw);
    position: relative;
}
@media (min-width:768px){
    #himitsunodrip #about .participation_wrap {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
    }
}
#himitsunodrip #about .participation_wrap.disabled::before {
    content: "投票は終了いたしました。\Aたくさんの投票、\Aありがとうございました。";
    white-space: pre-line;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(240, 240, 240, 0.8);
    color: #333;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-weight: bold;
    padding: 1rem;
    border-radius: 0 8px 0 0;
    z-index: 2;
    font-size: var(--lp-fs-m);
}
#himitsunodrip #about .participation_wrap.disabled * {
    opacity: 0.6;
}
#himitsunodrip #about .participation_item {
    background-color: var(--lp-col-white);
    padding: var(--lp-section-side);
    border-radius: 0 10px 0 0;
}
#himitsunodrip #about .participation_item p {
    text-align: center;
}
#himitsunodrip #about .participation_item p small {
    font-size: calc(var(--lp-fs-xs) * 0.9);
    text-align: left;
    color: var(--lp-col-gray);
    display: inline-block;
    padding: min(30px,3vw) 0 min(10px,2vw);
}
#himitsunodrip #about .participation_item .step {
    display: block;
    border-bottom: 1.6px dotted var(--lp-col-black);
    padding-bottom: min(10px,3vw);
    margin-bottom: min(20px,5vw);
    font-size: var(--lp-fs-m);
    font-weight: var(--lp-fw-bold);
}
#himitsunodrip #about .link_x a {
    width: 70%;
    margin: min(10px,3vw) auto;
    padding: min(10px,2vw) 0 min(10px,3vw);
    text-align: center;
    background-color: var(--lp-col-black);
    color: var(--lp-col-white);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: min(10px,3vw);
    border-radius: 40px;
    font-size: var(--lp-fs-basic);
    box-shadow: 0 2px 5px rgb(0 0 0 / .6);
}
#himitsunodrip #about .link_x a::before {
    content: "";
    background: url(../images/ico_x.png) center center / contain no-repeat;
    width: min(20px,3vw);
    height: min(20px,5vw);
}
#himitsunodrip h3 {
    font-size: clamp(2.2rem, 2.109rem + 0.284vw, 2.4rem);
    line-height: 1.4;
    text-align: center;
    font-weight: var(--lp-fw-bold);
}
#himitsunodrip .heading {
    margin: min(60px,8vw) 0;
}
#himitsunodrip .heading > p {
    font-size: var(--lp-fs-m);
    font-weight: var(--lp-fw-bold);
    text-align: center;
    padding-bottom: min(20px,3vw);
}
#himitsunodrip .heading > h3 {
    width: min(78vw,400px);
    padding: 0 var(--lp-section-side);
    margin: 0 auto;
}
@media (min-width:768px) {
    #himitsunodrip .heading > h3 {
        padding: 0;
    }
}
#himitsunodrip #fruit {
    background-color: var(--lp-col-beige);
}
#himitsunodrip #fruit .fruit_sub_visual {
    margin: min(40px,5vw) 0;
}
#himitsunodrip #fruit .fruit_intro {
    padding: 0 var(--lp-section-side);
}
@media (min-width:768px){
    #himitsunodrip #fruit {
        gap: min(40px,6vw);
    }
    #himitsunodrip #fruit .fruit_intro {
        padding: var(--lp-section-space) var(--lp-section-side);
    }
    #himitsunodrip #fruit .heading {
        padding: 0;
    }
    #himitsunodrip #fruit .fruit_sub_visual {
        margin: 0 0 min(30px,5vw);
        flex: 1;
    }
    #himitsunodrip #fruit .fruit_intro {
        padding: 0 var(--lp-section-side);
        margin: 0 auto;
        display: flex;
        gap: min(40px,4vw);
        align-items: center;
    }
    #himitsunodrip #fruit .fruit_sub_item {
        flex: 1;
    }
}
#himitsunodrip #fruit .fruit_subtitle {
    font-weight: var(--lp-fw-bold);
    padding: 0 0 min(10px,2vw);
}
#himitsunodrip #fruit .link_btn.gray {
    display: block;
    width: 86%;
    margin: min(30px,2vw) auto;
    padding: min(8px,1vw) 0 min(10px,1.4vw);
    border-radius: 40px;
    font-size: var(--lp-fs-basic);
    background-color: var(--lp-col-gray);
    color: var(--lp-col-white);
    text-align: center;
    letter-spacing: 0.04em;
}
#himitsunodrip #fruit .link_btn a {
    display: block;
    width: min(56vw,240px);
    margin: min(30px,3vw) auto;
    padding: min(10px,2vw) 0 min(10px,3vw);
    border-radius: 40px;
    font-size: var(--lp-fs-basic);
    background-color: var(--lp-col-gray);
    color: var(--lp-col-white);
    text-align: center;
    position: relative;
}
#himitsunodrip #fruit .link_btn a::after {
    content: "";
    border-right: 1px solid var(--lp-col-white);
    border-bottom: 1px solid var(--lp-col-white);
    width: min(10px,2vw);
    height: min(10px,2vw);
    position: absolute;
    right: 10%;
    top: 50%;
    transform: translateY(-50%) rotate(-45deg);
}
#himitsunodrip #fruit .fruit_howto {
    padding: var(--lp-section-space) var(--lp-section-side) min(130px,30vw);
}
@media (min-width:768px){
    #himitsunodrip #fruit .fruit_howto {
        grid-column: 1 / 3;
        padding: min(70px,10vw) var(--lp-section-side) var(--lp-section-space);
    }
}
#himitsunodrip #fruit .fruit_item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: min(60px,6vw);
}
@media (min-width:768px){
    #himitsunodrip #fruit .fruit_item {
        grid-template-columns: repeat(4, 1fr);
    }
}
#himitsunodrip #fruit .fruit_item a {
    width: 100%;
    padding: min(10px,2vw) 0 min(9px,3vw);
    font-size: var(--lp-fs-xs);
}
@media (min-width:768px){
    #himitsunodrip #fruit .fruit_item a {
        width: 100%;
        padding: min(10px,2vw) 0 min(9px,3vw);
        font-size: var(--lp-fs-xs);
        margin: min(10px,3vw) auto;
    }
}
#himitsunodrip #fruit .fruit_item .title {
    text-align: center;
    font-size: var(--lp-fs-basic);
    font-weight: var(--lp-fw-bold);
    line-height: 1.4;
    padding-top: min(20px,4vw);
}
#himitsunodrip #collection {
    background-color: var(--lp-col-green);
    padding: 0 0 min(130px,30vw);
}
@media (min-width:768px){
    #himitsunodrip #collection .collection_head {
        align-items: center;
        padding: 0 0 var(--lp-section-space);
        gap: min(40px,6vw);
    }
}
#himitsunodrip #collection .collection_logo {
    width: min(180px,29vw);
    margin: min(8vw,60px) auto min(6vw,20px);
}
@media (min-width:768px){
    #himitsunodrip #collection .collection_logo {
        margin: 0 auto min(6vw,30px);
    }
}
#himitsunodrip #collection .shoplist_wrap {
    padding: 0 var(--lp-section-side);
}
#himitsunodrip #collection .collection_lead {
    padding: 0 var(--lp-section-side) min(16vw,170px);
    line-height: 1.78;
}
@media (min-width:768px){
    #himitsunodrip #collection .collection_lead {
        padding: 0;
        text-align: center;
    }
}

#himitsunodrip #collection .area_tabs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: min(10px,1vw);
    margin: 0 0 min(50px,8vw);
}
@media (min-width:768px){
    #himitsunodrip #collection .area_tabs {
        grid-template-columns: repeat(8, 1fr);
        margin:0 0 min(50px,8vw);
    }
}
#himitsunodrip #collection .tab_btn {
    border-radius: 40px;
    border: 1px solid var(--lp-col-d-gry);
    text-align: center;
    padding: min(5px,1vw) 0;
    font-size: var(--lp-fs-basic);
    cursor: pointer;
}
#himitsunodrip #collection .tab_btn.active {
    background-color: var(--lp-col-d-gry);
    color: var(--lp-col-white);
}
#himitsunodrip #collection .area_content {
    display: none;
}
#himitsunodrip #collection .area_content {
    margin-bottom: min(70px,10vw);
}
@media (min-width:768px){
    #himitsunodrip #collection .area_content {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: min(60px,4vw);
        margin-bottom: min(60px,6vw);
    }
    #himitsunodrip #collection .area_item {
        grid-template-rows: subgrid;
        grid-row: span 3;
        display: grid;
        gap: 0;
    }
}
#himitsunodrip #collection .area_content .area_item + .area_item {
    padding-top: min(70px,10vw);
}
@media (min-width:768px){
    #himitsunodrip #collection .area_content .area_item + .area_item {
        padding-top: 0;
    }
}
#himitsunodrip #collection .area_name {
    font-weight: var(--lp-fw-bold);
    font-size: var(--lp-fs-l);
    line-height: 1.3;
}
#himitsunodrip #collection .area_name span {
    font-size: var(--lp-fs-m);
}
#himitsunodrip #collection .address {
    padding: min(10px,2vw) 0 min(5px,1vw);
    line-height: 1.5;
}
#himitsunodrip #collection .info {
    display: flex;
    gap: min(6px,1vw);
    line-height: 1.4;
    padding-bottom: min(5px,1vw);
}
#himitsunodrip #collection .info_time::before {
    content: "";
    background: url(../images/ico_time.png) center center / contain no-repeat;
    width: min(16px,3.6vw);
    height: min(16px,5vw);
    margin-top: min(3px,1vw);
}
#himitsunodrip #collection .info_ig::before {
    content: "";
    background: url(../images/ico_ig.png) center center / contain no-repeat;
    width: min(16px,3.6vw);
    height: min(16px,5vw);
    margin-top: min(3px,1vw);
}
#himitsunodrip #collection .info_ig a {
    border-bottom: 1px solid var(--lp-col-black);
}
#himitsunodrip #collection .area_img {
    display: flex;
    gap: min(10px,2vw);
    margin-top: min(3vw,10px);
}
#himitsunodrip #collection .area_note {
    font-size: calc(var(--lp-fs-xs) * .8);
    opacity: .7;
    text-align: right;
    padding-top: min(5px,2vw);
}
#himitsunodrip #collection .shoplist_note {
    font-size: var(--lp-fs-xs);
}