/* section-map */
html{
  scroll-behavior:smooth;
}

#campaign-contents .h2-img-wrap {
    text-align: center;
    max-width: 600px;
    margin: auto;
}

/* ---------------------------------------------  */
/* --------------------- SP --------------------  */
/* ---------------------------------------------  */
@media screen and (max-width:768px){
    /* #section-greeting .inner-s-wrap {
        width: calc(100% - 28px);
        margin: var(--size32) auto;
    } */
    #section-greeting .lead-text {
        font-size: 1.6rem;
        width: 100%;
        margin: 0 auto 40px;
    }
}

/*
*********************************************************
#section-kv
*********************************************************
*/
#section-kv .kv-photo {
  aspect-ratio: 1440/200 !important;
}


/* ---------------------------------------------  */
/* --------------------- SP --------------------  */
/* ---------------------------------------------  */
@media screen and (max-width:768px) {
  #section-kv .kv-photo {
    aspect-ratio: 768/272 !important;
  }
}
/* ==============================
  Japan map area navigation
============================== */
#japan-map {
    margin: 50px auto;
}

#japan-map .map-area {
    position: relative;
    width: 700px;
    margin-inline: auto;
}
  
/* 地図画像とエリアナビを同じ場所に重ねる */
#japan-map .map-image {
position: relative;
}

#japan-map .map-image:before {
content: "";
position: absolute;
top: 10%;
left: -10%;
width: 45%;
aspect-ratio: 565 / 236;
background: url(/campaign/boxer60th-anniversary/message/assets/images/message-text.webp) center / contain no-repeat;
z-index: 2;
pointer-events: none;
}

/* ---------------------------------------------  */
/* --------------------- SP --------------------  */
/* ---------------------------------------------  */
@media screen and (max-width:768px) {
    #japan-map .map-image:before {
        top: 5%;
        left: 1%;
    }
}

#japan-map .map-image img {
display: block;
width: 100%;
height: auto;
}
  
/* エリアナビ全体 */
#japan-map .area-nav {
position: absolute;
inset: 0;
z-index: 2;
margin: 0;
padding: 0;
list-style: none;
pointer-events: none;
}

/* 各エリア */
#japan-map .area-nav li {
position: absolute;
left: var(--x);
top: var(--y);
transform: translate(-50%, -50%);
pointer-events: auto;
}

/* 地図へ伸びる線 */
#japan-map .area-nav li::before {
content: "";
position: absolute;
z-index: 0;
left: var(--line-left, 100%);
top: var(--line-top, 50%);
bottom: var(--line-bottom, auto);
width: var(--line-w, 0);
height: var(--line-h, 2px);
background-color: var(--area-color);
transform: var(--line-transform, translateY(-50%));
transform-origin: left center;
pointer-events: none;
}

/* ボタン本体 */
#japan-map .area-nav a {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 129px;
height: 60px;
font-size: 15px;
padding: 0.45em 0.8em 0;
border: 2px solid var(--area-color);
border-radius: 999px;
background-color: #fff;
color: var(--area-color);
font-weight: 700;
line-height: 1.2;
text-align: center;
text-decoration: none;
white-space: nowrap;
}

/* 下向き矢印 */
#japan-map .area-nav a::after {
content: "";
width: 0.42em;
height: 0.42em;
margin-top: 0.1em;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(45deg);
}

/* hover */
#japan-map .area-nav a:hover {
opacity: 0.75;
}

/* ==============================
配置
HTMLのli順に指定
============================== */

/* 北海道 */
#japan-map .area-nav li:nth-child(1) {
--x: 61%;
--y: 17%;
--area-color: #4fa1d3;
--line-w: clamp(38px, 6vw, 76px);
--line-left: 100%;
--line-top: 50%;
--line-transform: translateY(-50%);
}

/* 東北 */
#japan-map .area-nav li:nth-child(2) {
--x: 58%;
--y: 34%;
--area-color: #58bfae;
--line-w: clamp(32px, 5vw, 64px);
--line-left: 100%;
--line-top: 50%;
--line-transform: translateY(-50%);
}

/* 関東 */
#japan-map .area-nav li:nth-child(3) {
--x: 85%;
--y: 90%;
--area-color: #5aa95b;
--line-w: 2px;
--line-h: clamp(42px, 7vw, 82px);
--line-left: 50%;
--line-top: auto;
--line-bottom: 100%;
--line-transform: translateX(-50%);
}

/* 北信越 */
#japan-map .area-nav li:nth-child(4) {
--x: 50%;
--y: 49%;
--area-color: #b9dc37;
--line-w: 2px;
--line-h: clamp(40px, 11vw, 85px);
--line-left: 50%;
--line-top: 100%;
--line-transform: translateX(-50%);
}

/* 東海 */
#japan-map .area-nav li:nth-child(5) {
--x: 64%;
--y: 95%;
--area-color: #f1aa22;
--line-w: 2px;
--line-h: clamp(44px, 6vw, 86px);
--line-left: 50%;
--line-top: auto;
--line-bottom: 100%;
--line-transform: translateX(-50%);
}

/* 近畿 */
#japan-map .area-nav li:nth-child(6) {
--x: 35%;
--y: 62%;
--area-color: #f47b5c;
--line-w: clamp(44px, 7vw, 82px);
--line-left: 50%;
--line-top: 98%;
--line-transform: rotate(38deg);
}

/* 中国・四国 */
#japan-map .area-nav li:nth-child(7) {
--x: 15%;
--y: 62%;
--area-color: #e9553f;
--line-w: clamp(44px, 7vw, 82px);
--line-left: 50%;
--line-top: 98%;
--line-transform: rotate(38deg);
}

/* 九州・沖縄 */
#japan-map .area-nav li:nth-child(8) {
--x: 1%;
--y: 73%;
--area-color: #a487bd;
--line-w: clamp(44px, 3vw, 82px);
--line-left: 100%;
--line-top: 50%;
--line-transform: rotate(38deg);
}

/* ---------------------------------------------  */
/* --------------------- SP --------------------  */
/* ---------------------------------------------  */
@media screen and (max-width:768px){
    .area-nav {
      gap:8px;
    }
  
    .area-nav a {
      font-size:14px;
      padding:8px 12px;
    }

    #japan-map .map-area {
        position: relative;
        width: calc(686 / 768 * 100vw);
        max-width: 686px;
        margin-inline: auto;
    }

  #japan-map .area-nav a {
    width: 63px;
    height: 37px;
    font-size: 10px;
  }

  #japan-map .area-nav a::after {
    width: 5px;
    height: 5px;
  }

  /* 北海道 */
  #japan-map .area-nav li:nth-child(1) {
    --x: 66%;
    --y: 12%;
    --area-color: #4fa1d3;
    --line-w: clamp(38px, 11vw, 95px);
    --line-left: 100%;
    --line-top: 50%;
    --line-transform: translateY(-50%);
  }
  
  /* 東北 */
  #japan-map .area-nav li:nth-child(2) {
    --x: 61%;
    --y: 29%;
    --area-color: #58bfae;
    --line-w: clamp(32px, 11vw, 90px);
    --line-left: 100%;
    --line-top: 50%;
    --line-transform: translateY(-50%);
  }
  
  /* 関東 */
  #japan-map .area-nav li:nth-child(3) {
    --x: 87%;
    --y: 90%;
    --area-color: #5aa95b;
    --line-w: 2px;
    --line-h: clamp(42px, 9vw, 82px);
    --line-left: 50%;
    --line-top: auto;
    --line-bottom: 100%;
    --line-transform: translateX(-50%);
  }
  
  /* 北信越 */
  #japan-map .area-nav li:nth-child(4) {
    --x: 57%;
    --y: 44%;
    --area-color: #b9dc37;
    --line-w: 2px;
    --line-h: clamp(40px, 11vw, 85px);
    --line-left: 50%;
    --line-top: 100%;
    --line-transform: translateX(-50%);
  }
  
  /* 東海 */
  #japan-map .area-nav li:nth-child(5) {
    --x: 66%;
    --y: 95%;
    --area-color: #f1aa22;
    --line-w: 2px;
    --line-h: clamp(44px, 11vw, 86px);
    --line-left: 50%;
    --line-top: auto;
    --line-bottom: 100%;
    --line-transform: translateX(-50%);
  }
  
  /* 近畿 */
  #japan-map .area-nav li:nth-child(6) {
    --x: 43%;
    --y: 58%;
    --area-color: #f47b5c;
    --line-w: clamp(44px, 11vw, 86px);
    --line-left: 50%;
    --line-top: 98%;
    --line-transform: rotate(38deg);
  }
  
  /* 中国・四国 */
  #japan-map .area-nav li:nth-child(7) {
    --x: 22%;
    --y: 58%;
    --area-color: #e9553f;
    --line-w: clamp(44px, 11vw, 86px);
    --line-left: 50%;
    --line-top: 98%;
    --line-transform: rotate(38deg);
  }
  
  /* 九州・沖縄 */
  #japan-map .area-nav li:nth-child(8) {
    --x: 5%;
    --y: 70%;
    --area-color: #a487bd;
    --line-w: clamp(44px, 8vw, 86px);
    --line-left: 100%;
    --line-top: 50%;
    --line-transform: rotate(38deg);
  }
}


/* ==============================
area-section
============================== */
#campaign-contents .area-section {
    border-radius: 15px;
    margin: 0 auto 30px;
    padding: 40px 50px 60px;
}

#campaign-contents .area-section h2 {
    font-size: 27px;
    font-weight: bold;
    text-align:center;
    margin-bottom:30px;
}

/* 北海道 */
#hokkaido.area-section {
    background: #e6f1f7;
}
#hokkaido.area-section h2 {
    color: #006fb6;
}
#hokkaido .swiper-wrap .swiper-button-next,
#hokkaido .swiper-wrap .swiper-button-prev {
    border-top: 2px solid #589fcc;
    border-right: 2px solid #589fcc;
}
#hokkaido .swiper-slide::after {
    content: "";
    background: url("/campaign/boxer60th-anniversary/message/assets/images/hokkaido-ribbon.webp") no-repeat;
    background-size: contain;
}

/* 東北 */
#tohoku.area-section {
    background: #ebf9f4;
}
#tohoku.area-section h2 {
    color: #3a9487;
}
#tohoku .swiper-wrap .swiper-button-next,
#tohoku .swiper-wrap .swiper-button-prev {
    border-top: 2px solid #61bbaf;
    border-right: 2px solid #61bbaf;
}
#tohoku .swiper-slide::after {
    content: "";
    background: url("/campaign/boxer60th-anniversary/message/assets/images/tohoku-ribbon.webp") no-repeat;
    background-size: contain;
}

/* 関東 */
#kanto.area-section {
    background: #66a35b21;
}
#kanto.area-section h2 {
    color: #66a35b;
}
#kanto .swiper-wrap .swiper-button-next,
#kanto .swiper-wrap .swiper-button-prev {
    border-top: 2px solid #61bbaf;
    border-right: 2px solid #61bbaf;
}
#kanto .swiper-slide::after {
    content: "";
    background: url("/campaign/boxer60th-anniversary/message/assets/images/kanto-ribbon.webp") no-repeat;
    background-size: contain;
}

/* 北信越 */
#hokushinetsu.area-section {
    background: #f9fceb;
}
#hokushinetsu.area-section h2 {
    color: #81a60c;
}
#hokushinetsu .swiper-wrap .swiper-button-next,
#hokushinetsu .swiper-wrap .swiper-button-prev {
    border-top: 2px solid #d0e662;
    border-right: 2px solid #d0e662;
}
#hokushinetsu .swiper-slide::after {
    content: "";
    background: url("/campaign/boxer60th-anniversary/message/assets/images/hokushinetsu-ribbon.webp") no-repeat;
    background-size: contain;
}

/* 東海 */
#tokai.area-section {
    background: #fef7e6;
}
#tokai.area-section h2 {
    color: #e8aa17;
}
#tokai .swiper-wrap .swiper-button-next,
#tokai .swiper-wrap .swiper-button-prev {
    border-top: 2px solid #f5ba31;
    border-right: 2px solid #f5ba31;
}
#tokai .swiper-slide::after {
    content: "";
    background: url("/campaign/boxer60th-anniversary/message/assets/images/tokai-ribbon.webp") no-repeat;
    background-size: contain;
}

/* 近畿 */
#kinki.area-section {
    background: #fcefe8;
}
#kinki.area-section h2 {
    color: #f08960;
}
#kinki .swiper-wrap .swiper-button-next,
#kinki .swiper-wrap .swiper-button-prev {
    border-top: 2px solid #f08960;
    border-right: 2px solid #f08960;
}
#kinki .swiper-slide::after {
    content: "";
    background: url("/campaign/boxer60th-anniversary/message/assets/images/kinki-ribbon.webp") no-repeat;
    background-size: contain;
}

/* 中国・四国 */
#chugoku.area-section {
    background: #fbe6e6;
}
#chugoku.area-section h2 {
    color: #db5837;
}
#chugoku .swiper-wrap .swiper-button-next,
#chugoku .swiper-wrap .swiper-button-prev {
    border-top: 2px solid #db5837;
    border-right: 2px solid #db5837;
}
#chugoku .swiper-slide::after {
    content: "";
    background: url("/campaign/boxer60th-anniversary/message/assets/images/chugoku-ribbon.webp") no-repeat;
    background-size: contain;
}

/* 九州・沖縄 */
#kyushu.area-section {
    background: #f5f0f5;
}
#kyushu.area-section h2 {
    color: #a88fb7;
}
#kyushu .swiper-wrap .swiper-button-next,
#kyushu .swiper-wrap .swiper-button-prev {
    border-top: 2px solid #a88fb7;
    border-right: 2px solid #a88fb7;
}
#kyushu .swiper-slide::after {
    content: "";
    background: url("/campaign/boxer60th-anniversary/message/assets/images/kyushu-ribbon.webp") no-repeat;
    background-size: contain;
}

/* ---------------------------------------------  */
/* --------------------- SP --------------------  */
/* ---------------------------------------------  */
@media screen and (max-width:768px){
    #campaign-contents .area-section {
        border-radius: 0;
        margin: 0 auto 30px;
        padding: 30px 50px 30px;
    }
    
    #campaign-contents .area-section h2 {
        font-size: 27px;
        font-weight: bold;
        text-align: center;
        margin-bottom: 20px;
    }
}


/* ==============================
swiper
============================== */

#campaign-contents .swiper-wrap {
    max-width: 960px;
    margin: 0 auto;
    position: relative;
}

#campaign-contents .swiper-wrap .swiper-container {
    padding: 0 0 32px;
}
  
#campaign-contents .swiper-wrap .swiper-button-prev {
    left: -4%;
}

#campaign-contents .swiper-wrap .swiper-button-next {
    right: -4%;
}

#campaign-contents .swiper-slide {
    position: relative;
    background: #fff;
    border-radius: 15px;
    padding: 30px;
}
#campaign-contents .swiper-slide::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 260px;
    height: 190px;
    z-index: 1;
}
#campaign-contents .swiper-slide::before {
	content: "";
	position: absolute;
	bottom: -20px;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-left: 16px solid transparent;
	border-right: 16px solid transparent;
	border-top: 20px solid #fff;
	z-index: 1;
}

#campaign-contents .swiper-slide h3 {
    position: relative;
    font-size: 1.6rem;
    margin-bottom: 20px;
}
#campaign-contents .swiper-slide h3::before {
    content: "";
	position: absolute;
	left: 0;
	bottom: -10px;
	width: 100%;
	height: 2px;

	background:
		repeating-linear-gradient(
			to right,
			#999999 0,
			#999999 2px,
			transparent 2px,
			transparent 6px
		);
}

#campaign-contents .swiper-slide p {
    font-size: 1.2rem;
    line-height: 1.8;
}

#campaign-contents .area-section .swiper-button-next,
#campaign-contents .area-section .swiper-button-prev {
    background-image: none;
    width: 20px;
    height: 20px;
}

#campaign-contents .area-section .swiper-button-next::after,
#campaign-contents .area-section .swiper-button-prev::after {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
}

#campaign-contents .area-section .swiper-button-next {
  transform: rotate(45deg);
}

#campaign-contents .area-section .swiper-button-prev {
  transform: rotate(-135deg);
}

/* #campaign-contents .swiper-pagination {
  position:relative;
  margin-top:20px;
} */

/* ---------------------------------------------  */
/* --------------------- SP --------------------  */
/* ---------------------------------------------  */
@media screen and (max-width:768px){

    #campaign-contents .swiper-wrap .swiper-button-prev {
        left: -10%;
    }

    #campaign-contents .swiper-wrap .swiper-button-next {
        right: -10%;
    }
    #campaign-contents .swiper-wrap .swiper-slide {
        height: 200px;
    }

}

/* ==============================
link-area
============================== */
#link-area {
    border-bottom: 1px solid #ccc;
    padding: 20px 0 50px;
}

#link-area .link-btn {
    width: 610px;
    margin: 0 auto;
}

#link-area .link-btn a:hover {
    opacity: .7;
}

@media screen and (min-width:769px){
    #campaign-contents .swiper-slide {
        height: 190px;
    }
}
/* ---------------------------------------------  */
/* --------------------- SP --------------------  */
/* ---------------------------------------------  */
@media screen and (max-width:768px){
    #link-area {
        border-bottom: 1px solid #ccc;
        padding: 5px 0 30px;
    }
    #link-area .inner-s-wrap {
        width: calc(100% - 32px);
        margin: var(--size32) auto;
    }
    #link-area .link-btn {
        width: 100%;
    }
}