﻿@charset "UTF-8";

/******************
common
*******************/
.sp {
    display: none;
}
@media screen and (max-width: 767px) {
  .pc {
    display: none;
  }    
  .sp {
    display: block;
  }
}
.content_inner {
    width: 1200px;
    margin: 0 auto;
}
@media screen and (max-width: 767px) {
    .content_inner {
        width: 100%;
        padding: 0 10px;
    }
}
.region_name::before {
    display: none;
}
@media screen and (max-width: 767px) {
    .pane-footer {
        margin-top: 0;
    }
}
/******************
mv
*******************/
.mv {
    position: relative;
    height: calc((954 / 1920) * 100vw);  
}
@media screen and (max-width: 767px) {
    .mv {
        height: calc((1837 / 793) * 100vw); 
    }
}
.mv_img {
    width: 100%;
    position: absolute;
    z-index: -1;
    margin-bottom: 0;
}
.mv_img img {
    width: 100%;
}
.mv_inner {
    width: 1200px;
    margin: 0 auto;
    height: 100%;
    position: relative;
}
@media screen and (max-width: 767px) {
    .mv_inner {
        width: 100%;
        height: 100%;
    }
}
.mv_txt_box {
    width: calc((655 / 1920) * 100vw);
    left: calc(10% - calc((50 / 1920) * 100vw));
    position: absolute;
    bottom: calc((160 / 1920) * 100vw);
}
@media screen and (max-width: 767px) {
    .mv_txt_box {
        width: 100%;
        left: auto;
        padding: 50px;
        bottom: calc((200 / 495) * 100vw); 
    }
}
.mv_ttl {
    font-family: "Zen Maru Gothic", sans-serif;
    font-weight: 700;
    font-size: calc((25 / 1920) * 100vw );
    margin-bottom: 20px;
}
@media screen and (max-width: 767px) {
    .mv_ttl {
        margin-bottom: 20px;
        font-size: calc((18 / 375) * 100vw);
    }
}
.mv_txt {
    font-family: "Noto Sans JP", sans-serif;
    font-size: calc((16 / 1920) * 100vw );
}
@media screen and (max-width: 767px) {
    .mv_txt {
        font-size: calc((14 / 375) * 100vw);
    }
}
@media screen and (max-width: 767px) {
.mv_inner {
    width: 100%;
}
}
/******************
アンカー
*******************/
.anchor {
    width: 100%;
    background-color: #000fff;
}
@media screen and (max-width: 767px) {
    .anchor {
        background-color: transparent;
    }
}
.anchor_link {
    width: 1200px;
    display: flex;
    margin: 0 auto;
}
@media screen and (max-width: 767px) {
    .anchor_link {
        width: 100%;
        flex-wrap: wrap;
        background-color: #ffffff;
        gap: 1px;
    }
}
@media screen and (max-width: 767px) {
    .anchor_link {
        width: 100%;
    }
}
.anchor_link li {
    width: calc(100% / 6);
}
@media screen and (max-width: 767px) {
    .anchor_link li {
        width: calc((100% - 1px) / 2);
        background-color: #000fff;
    }
}
.anchor_link li a {
    position: relative;
    font-family: "Zen Maru Gothic", sans-serif;
    font-weight: 700;
    text-align: center;
    width: 100%;
    display: block;
    color: #ffffff;
    font-size: 20px;
    padding: 25px 10px;
}
@media screen and (max-width: 767px) {
    .anchor_link li a {
        text-indent: -0.8em;
    }
}
.anchor_link li a::before {
    content: "";
    position: absolute;
    background-color: #ffffff;
    width: 1px;
    height: 70%;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
}
@media screen and (max-width: 767px) {
    .anchor_link li a::before {
        display: none;
    }
}
.anchor_link > li:last-child a::after {
    content: "";
    position: absolute;
    background-color: #ffffff;
    width: 1px;
    height: 70%;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
}
@media screen and (max-width: 767px) {
    .anchor_link > li:last-child a::after {
        display: none;
    }
}
.anchor_link li a span {
    position: relative;
}
.anchor_link li a span::after {
    position: absolute;
    content: "";
    top: 50%;
    right: -20px;
    width: 10px;
    height: 10px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: translate3d(0, -50%, 0) rotate(135deg);
}
/******************
都道府県エリア
*******************/
.region {
    position: relative;
    padding: 80px 0 60px;
    z-index: 0;
    overflow: hidden;
}
@media screen and (max-width: 767px) {
    .region {
        padding: 50px 0 50px;
    }
}
.region::before,
.region::after {
    content: "";
    position: absolute;
    background-repeat: no-repeat;
    background-size: contain;
    z-index: -1;
}
#region_01::before,
#region_03::before,
#region_05::before {
    left: 0px;
}
#region_02::before,
#region_04::before,
#region_06::before {
    right: 0px;
}
.region_name {
    font-family: "Zen Maru Gothic", sans-serif;
    font-size: 48px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 70px;
}
@media screen and (max-width: 767px) {
    .region_name {
        font-size: 34px;
        margin-top: 0;
        margin-bottom: 50px;        
    }
}
.prefectures_list {
    display: flex;
    gap: 40px 100px;
    flex-wrap: wrap;
}
@media screen and (max-width: 767px) {
    .prefectures_list {
        flex-wrap: wrap;
        gap: 60px 0;
    }
}
.prefectures_list li {
    width: calc((100% - 100px) / 2);
    background-color: #ffffff;
    padding: 40px 40px;
    border-radius: 30px;
    margin-bottom: 60px;
    position: relative;
}
@media screen and (max-width: 767px) {
    .prefectures_list li {
        width: 100%;
        padding: 20px 15px;
        margin-bottom: 0;
    }
}
.prefectures_list > li:nth-child(even) {
    transform: translateY(40px);
}
@media screen and (max-width: 767px) {
    .prefectures_list > li:nth-child(even) {
        transform: translateY(0);
    }
}
.card.new::before {
    content: "";
    position: absolute;
    background-image: url(/cms/feature/ca/2026/img/new.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 80px;
    height: 80px;
    top: -40px;
    left: 30px;
}
@media screen and (max-width: 767px) {
    .card.new::before {
        width: 60px;
        height: 60px;
    }
}
.prefectures_name {
    font-family: "Zen Maru Gothic", sans-serif;
    font-size: 40px;
    font-weight: 700;
    padding-left: 24px;
}
@media screen and (max-width: 767px) {
    .prefectures_name {
        width: calc(100% - 80px);
        display: block;
        position: absolute;
        top: 20px;
        padding-left: 30px;
        font-size: 28px;
    }
}
.prefectures_name_en {
    font-family: "Zen Maru Gothic", sans-serif;
    font-size: 18px;
    font-weight: 700;
    display: inline-block;
    margin-left: 20px;
}
@media screen and (max-width: 767px) {
    .prefectures_name_en {
        font-size: 14px;
        margin-left: 10px;
    }
}
.sort_number {
    font-family: "Quicksand", sans-serif;
    color: #ffffff;
    font-size: 24px;
    width: 60px;
    text-align: center;
    border-radius: 0 20px 20px 0;
    padding-left: 10px;
    position: absolute;
    left: -10px;
    top: 54px;
}
@media screen and (max-width: 767px) {
    .sort_number {
        width: 45px;
        left: -5px;
        top: 28px;
        padding-left: 0px;
        font-size: 14pt;
    }
}
.top_content {
    display: flex;
    gap: 30px;
    margin-bottom: 40px;
}
@media screen and (max-width: 767px) {
    .top_content {
        gap: 10px;
        margin-bottom: 20px;
    }
}
.top_content_left {
    width: calc((100% - 30px) - 140px); 
}
@media screen and (max-width: 767px) {
    .top_content_left {
        margin-top: 50px;
        width: calc((100% - 20px) - 90px);
    }
}
.manager_txt-box {
    font-family: "Noto Sans JP", sans-serif;
}
.manager_ttl {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 14px;
    padding-bottom: 8px;
    background-image: radial-gradient(circle, #aed7f6 2px, transparent 2px);
    background-position: left -2px bottom;
    background-repeat: repeat-x;
    background-size: 10px 4px;   
}
.manager_local {
   font-size: 15px;
   margin-bottom: 5px;
}
@media screen and (max-width: 767px) {
    .manager_local {
        font-size: 13px;
    }
}
.manager_local span {
   position: relative; 
   font-size: 18px;
   padding-left: 35px;
   font-weight: 600;
}
@media screen and (max-width: 767px) {
    .manager_local span {
        font-size: 16px;
        padding-left: 30px;
    }
}
.manager_local span::before {
   content: "";
   position: absolute;
   background-image: url(/cms/feature/ca/2026/img/plane.png);
   background-repeat: no-repeat;
   background-size: contain;
   width: 20px;
   height: 20px;
   top: 0px;
   left: 3px;
}
.manager_txt {
   font-size: 15px;
}
.manager_img {
    width: 140px;
    height: 100%;
}
@media screen and (max-width: 767px) {
    .manager_img {
        width: 100px;
        margin-top: 50px;
    }
}
.manager_img img {
    object-fit: cover;
    /*aspect-ratio: 2 / 3;
    border-radius: 40px;
    object-position: 50% 20%; */
}
.region .block-pickup-list-p--items li {
    padding: 0;
    width: 100%;
    border-radius: 0;
    display: flex;
    gap: 40px;
    margin-bottom: 0;
}
@media screen and (max-width: 767px) {
    .region .block-pickup-list-p--items li {
        gap: 7px;
    }
}
/* .prefectures_list > .card:not(:has(> .bottom_content.has-pickups)) {
    display: flex;
    flex-direction: column;
    gap: 60px;   
} */
.bottom_content:not(.has-pickups) {
    margin-bottom: 40px;
    height: calc(100% - 151px);
    display: flex;
    align-items: center;
}
@media screen and (max-width: 767px) {
    .bottom_content:not(.has-pickups) {
        margin-bottom: 40px;
        height: calc(100% - 110px);
    }
}
.region .block-pickup-list-p--item-body {
    margin-left: 0px;
    flex: 0 0 215px;
    max-width: 215px;
    width: 215px;
    margin-bottom: 0px;
}
@media screen and (max-width: 767px) {
    .region .block-pickup-list-p--item-body {
        flex: 0 0 calc((100% - 7px) / 2);
        max-width: calc((100% - 7px) / 2);
        width: calc((100% - 7px) / 2);
    }
}
.region .block-pickup-list-p--item-body figure {
    height: auto;
}
.region .block-pickup-list-p--item-body .block-pickup-list-p--goods-name {
    max-height: none;
}
.region .block-pickup-list-p--item-body .block-pickup-list-p--goods-name a {
    font-size: 16px;
    font-weight: bold;
    line-height: 1.2;
}
@media screen and (max-width: 767px) {
    .region .block-pickup-list-p--item-body .block-pickup-list-p--goods-name a {
        font-size: 16px;
    }
}
.region .block-pickup-list-p--item-body .price {
    font-size: 24px;
    font-weight: bold;
}
@media screen and (max-width: 767px) {
    .region .block-pickup-list-p--item-body .price {
        font-size: 18px;
    }
}
@media screen and (min-width: 768px) {
	.block-pickup-list-p--image figure img {
	    height: 135px;
	}
}

@media screen and (max-width: 768px) {
	.block-pickup-list-p--image figure img {
	    height: 26vw;
	}
}

.region .block-pickup-list-p--bookmark {
    display: none;
}
.region .no_data {
    text-align: center;
}
/* 北海道・東北 */
#region_01 {
    background-color: #aed7f6;
}
#region_01::before {
    background-image: url(/cms/feature/ca/2026/img/bg_name_01.png);
    width: 1261px;
    height: 320px;
}
@media screen and (max-width: 767px) {
    #region_01::before {
        background-image: url(/cms/feature/ca/2026/img/bg_name_01_sp.png);
        width: 90%;
        height: calc((171 / 375) * 100vw);
    }
}
#region_01::after {
    background-image: url(/cms/feature/ca/2026/img/bg_area_01.png);
    width: 640px;
    height: 941px;
    top: 403px;
}
@media screen and (max-width: 767px) {
    #region_01::after {
        display: none;
    }
}
#region_01 .region_name,
#region_01 .prefectures_name {
    color: #0067b5;
}
#region_01 .prefectures_name_en {
    color: #aed7f6;
}
#region_01 .sort_number {
    background-color: #0067b5;
}

/* 関東 */
#region_02 {
    background-color: #ddc2f2;
}
#region_02::before {
    background-image: url(/cms/feature/ca/2026/img/bg_name_02.png);
    width: 1107px;
    height: 130px;
}
@media screen and (max-width: 767px) {
    #region_02::before {
        background-image: url(/cms/feature/ca/2026/img/bg_name_02_sp.png);
        width: 90%;
        height: calc((166 / 375) * 100vw);
    }
}
#region_02::after {
    background-image: url(/cms/feature/ca/2026/img/bg_area_02.png);
    width: 343px;
    height: 382px;
    top: 250px;
    right: 100px;
}
@media screen and (max-width: 767px) {
    #region_02::after {
        display: none;
    }
}
#region_02 .region_name,
#region_02 .prefectures_name {
    color: #8148a8;
}
#region_02 .prefectures_name_en {
    color: #ddc2f2;
}
#region_02 .sort_number {
    background-color: #8148a8;
}

/* 中部 */
#region_03 {
    background-color: #b4dcbc;
}
#region_03::before {
    background-image: url(/cms/feature/ca/2026/img/bg_name_03.png);
    width: 1112px;
    height: 129px;
}
@media screen and (max-width: 767px) {
    #region_03::before {
        background-image: url(/cms/feature/ca/2026/img/bg_name_03_sp.png);
        width: 90%;
        height: calc((166 / 375) * 100vw);
    }
}
#region_03::after {
    background-image: url(/cms/feature/ca/2026/img/bg_area_03.png);
    width: 368px;
    height: 438px;
    top: 250px;
    right: 100px;
}
@media screen and (max-width: 767px) {
    #region_03::after {
        display: none;
    }
}
#region_03 .region_name,
#region_03 .prefectures_name {
    color: #127a27;
}
#region_03 .prefectures_name_en {
    color: #b4dcbc;
}
#region_03 .sort_number {
    background-color: #127a27;
}

/* 近畿 */
#region_04 {
    background-color: #e6de97;
}
#region_04::before {
    background-image: url(/cms/feature/ca/2026/img/bg_name_04.png);
    width: 810px;
    height: 128px;
}
@media screen and (max-width: 767px) {
    #region_04::before {
        background-image: url(/cms/feature/ca/2026/img/bg_name_04_sp.png);
        width: 90%;
        height: calc((46 / 375) * 100vw);
    }
}
#region_04::after {
    background-image: url(/cms/feature/ca/2026/img/bg_area_04.png);
    width: 359px;
    height: 374px;
    top: 250px;
    right: 100px;
}
@media screen and (max-width: 767px) {
    #region_04::after {
        display: none;
    }
}
#region_04 .region_name,
#region_04 .prefectures_name {
    color: #857100;
}
#region_04 .prefectures_name_en {
    color: #e6de97;
}
#region_04 .sort_number {
    background-color: #857100;
}

/* 中国・四国 */
#region_05 {
    background-color: #fbcda7;
}
#region_05::before {
    background-image: url(/cms/feature/ca/2026/img/bg_name_05.png);
    width: 1284px;
    height: 310px;
}
@media screen and (max-width: 767px) {
    #region_05::before {
        background-image: url(/cms/feature/ca/2026/img/bg_name_05_sp.png);
        width: 90%;
        height: calc((183 / 375) * 100vw);
    }
}
#region_05::after {
    background-image: url(/cms/feature/ca/2026/img/bg_area_05.png);
    width: 386px;
    height: 446px;
    top: 403px;
    right: 100px;
}
@media screen and (max-width: 767px) {
    #region_05::after {
        display: none;
    }
}
#region_05 .region_name,
#region_05 .prefectures_name {
    color: #b35100;
}
#region_05 .prefectures_name_en {
    color: #fbcda7;
}
#region_05 .sort_number {
    background-color: #b35100;
}

/* 九州・沖縄 */
#region_06 {
    background-color: #ffbddb;
}
#region_06::before {
    background-image: url(/cms/feature/ca/2026/img/bg_name_06.png);
    width: 1335px;
    height: 310px;
}
@media screen and (max-width: 767px) {
    #region_06::before {
        background-image: url(/cms/feature/ca/2026/img/bg_name_06_sp.png);
        width: 90%;
        height: calc((188 / 375) * 100vw);
    }
}
#region_06::after {
    background-image: url(/cms/feature/ca/2026/img/bg_area_06.png);
    width: 377px;
    height: 941px;
    top: 403px;
    right: 100px;
}
@media screen and (max-width: 767px) {
    #region_06::after {
        display: none;
    }
}
#region_06 .region_name,
#region_06 .prefectures_name {
    color: #ba2a6a;
}
#region_06 .prefectures_name_en {
    color: #ffbddb;
}
#region_06 .sort_number {
    background-color: #ba2a6a;
}
/******************
ローディング
*******************/
.loading-spinner {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: 30px;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #b7c0e9;
    border-top-color: #00146E;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}