@charset "UTF-8";
.amahashi-hero-area {
	height:100vh;
}

.inner-wrapper {
	max-width:1140px;
	margin:20px auto;
}

#primary {
	padding-top:0;
}

#introduction {
	/* margin-top:100px; */
	margin-top:0px !important;
	margin-bottom:60px !important;
	padding:15px;
	background-color:#ffffff;
	background-image:url(../../images/bg-amanohashidate.webp);
	background-size:100%;
	background-repeat:no-repeat;
	background-position:bottom;
}

#introduction .highlight-area {
	margin-bottom:50px;
	flex-wrap:wrap;
}

#introduction .highlight-area h3 {
	text-align:center;
	font-size:2.6em;
	font-weight:normal;
	margin-top:0;
/* writing-mode: vertical-rl; */
}

#introduction .highlight-area h3 span {
	display:block;
	font-size:0.6em;
}

#introduction .highlight-area h4 {
	font-weight:normal;
}

#introduction .highlight-img {
	max-width:400px;
	margin:auto;
}


#introduction .highlight-text {
	padding:20px;
	flex-shrink:2;
}

#introduction .highlight-text p {
	margin-bottom:40px;
	text-align:justify;
}




#top-spots,
#top-tour,
#top-meal,
#top-accomodation,
#top-event,
#top-souvenir,
#top-info,
#top-access {
/*
	background-image:url(../../test/images/bg-matsu-A.webp);
	background-size:50%;
	background-position:right;
	background-repeat:no-repeat;
*/
	padding:30px 0;
	margin-bottom:50px;
}

#bn-footer {
	margin:80px auto;
}

#top-spots .highlight-area {
	margin-bottom:50px;
}

#top-spots .hightlight-area h3 {
	text-align:center;
	margin-top:0;
}

#top-spots .highlight-img {
	max-width:600px;
}


#top-spots .highlight-text {
	padding:20px;
}

.h-recommend,
.h-tour,
.h-spots,
.h-accomodation,
.h-souvenir,
.h-meal,
.h-areamap,
.h-event {
	text-align:center;
	line-height:1;
	position:relative;
	margin-bottom:50px !important;
}



/* 三角形を背景として追加 */
.h-recommend::before,
.h-tour::before,
.h-spots::before,
.h-meal::before,
.h-accomodation::before,
.h-souvenir::before,
.h-event::before {
    content: '';
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
    border-top: 20px solid #c3dcef;
	left:50%;
	transform: translate(-50%, 0);
	bottom:-30px;
	position:absolute;
}

	
.h-recommend::after {
	content:"\A Recommended Contents";
	white-space:pre;
	font-size:1rem;
	font-weight:normal;
	color:#36819b;
	display:block;
	text-align:center;
}	
	
.h-tour::after {
	content:"\A Experiential Programs & Optional Tours";
	white-space:pre;
	font-size:1rem;
	font-weight:normal;
	color:#36819b;
	display:block;
	text-align:center;
	word-wrap: break-word;
}	
	
.h-spots::after {
	content:"\A Sightseeing Spots";
	white-space:pre;
	font-size:1rem;
	font-weight:normal;
	color:#36819b;
	display:block;
	text-align:center;
}

.h-event::after {
	content:"\A Event Information";
	white-space:pre;
	font-size:1rem;
	font-weight:normal;
	color:#36819b;
	display:block;
	text-align:center;
}

.h-souvenir::after {
	content:"\A Search for Souvenirs";
	white-space:pre;
	font-size:1rem;
	font-weight:normal;
	color:#36819b;
	display:block;
	text-align:center;
}


/* 三角形を背景として追加 */
.h-stay::before,
/*.h-souvenir::before, */
/*.h-meal::before, */
.h-areamap::before {
    content: '';
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
    border-top: 20px solid rgba(255,255,255,0.3);
	left:50%;
	transform: translate(-50%, 0);
	bottom:-30px;
	position:absolute;
}

.h-accomodation::after {
	content:"\A Search for Accommodation";
	white-space:pre;
	font-size:1rem;
	font-weight:normal;
	/* color:rgba(255,255,255,0.6); */
	color:#36819b;
	display:block;
	text-align:center;
}	

.h-meal::after {
	content:"\A Search for Dining Spot";
	white-space:pre;
	font-size:1rem;
	font-weight:normal;
/*	color:rgba(255,255,255,0.6); */
	color:#36819b;
	display:block;
	text-align:center;
}	
	


.h-areamap::after {
	content:"\A Area Map";
	white-space:pre;
	font-size:1rem;
	font-weight:normal;
	color:rgba(255,255,255,0.6);
	display:block;
	text-align:center;
}



.parallax-wrapper {
    height: 150px;
    position: relative;
    clip-path: inset(0);
}
.parallax-wrapper img {
    object-fit: cover;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.dtl-link {
	border:1px solid #000000;
	color:#000000 !important;
	background-color:#fff;
	padding:10px 20px;
	display:inline-block;
	min-width:250px;
	text-align:center;
	transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
}

.dtl-link:hover {
	background-color:#000;
	color:#fff !important;
}

.event-wrapper {
	justify-content:space-between;
	flex-wrap:wrap;
}

.event-wrapper .events-swiper {
	min-width:300px;
	/* max-width:64%; */
	max-width:74%;
	margin:auto;
}

.event-wrapper .event-pv {
	min-width:300px;
	/* max-width:34%; */
	max-width:20%;
	flex-grow:1;
	margin:0 auto;
	text-align:center;
}

.events-list {
/*	display:flex; */
}

.event-item {
	padding:0 15px;
	background-color:#ffffff;
}

.event-item h3 {
	font-size:1rem;
}


.event-item .thumb img {
	width:100%;
	/* aspect-ratio: 1 / 1; */
	aspect-ratio: 1 / 1.4;
	object-fit: cover;
	object-position:top;
}

.event-date {
  display: flex;
  align-items: center;
  gap: 0.5em;
	font-size:0.8em;
}

.event-date .date-title {
	background-color:#000;
	color:#fff;
	padding:0 5px;
	border-radius:3px;
}

.event-date .separator::before {
  content: "▲";
  display: inline-block;
  font-size: 0.8em;
  color: black;
  transform: rotate(90deg); /* 矢印を右向きに回転 */
  font-size:0.6em;
}

.event-status.ended {
	color:#900;
	font-size:0.9em;
}

.all-event-link a {
	height:100%;
}

#top-info {
	padding:0;
	margin-bottom:0;
}

#top-info .tab-panels li {
	list-style:none;
	border-bottom: 1px dotted #ccc;
	padding: 10px 0
}

#info-tab {
	display:flex;
	justify-content:center;
}

#info-tab > div {
	padding:10px 20px;
	border-bottom:1px solid #ccc;
	cursor:pointer;
}

#info-tab > div.active {
	border-bottom:2px solid #000;
}

/* タブリストのスタイル */
#top-info [role="tablist"] {
    display: flex;
	justify-content:center;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* タブボタンのスタイル */
#top-info [role="tab"] {
	background-color:#fff;
	color:#000;
	border:none;
    border-bottom: 1px solid #999;;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 0.8rem;
}

#top-info [role="tab"][aria-selected="true"] {
    background: #fff;
    border-bottom: 2px solid #000000; /* アクティブタブの色 */
}

#top-info [role="tabpanel"] {
    padding: 15px;
    margin-top: -1px;
    background: #fff;
}

#top-info .tab-panels {
	height:500px;
	overflow-y:scroll;
	margin-bottom:20px;
}

#top-info .tab-panels ul {
	padding-left:0;
}

#top-info .pickup-label {
	font-family:serif;
	font-size:0.7em;
	background-color:#900;
	color:#fff;
	padding:2px 5px;
	margin-right:5px;
}

#top-info time {
	display:block;
	font-size:0.8em;
}

#top-info .event-info {
	color:#900;
	font-size:0.9em;
}

#top-access .image-container {
	height:30vh;
	position:relative;
	overflow:hidden;
	/* background-color:#f5f6ff */
	background-color:#ebedf9;
}

#top-access .image-container img {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	height: 150%;
	max-width:unset;
}

#top-access .image-container a.dtl-link {
	position:absolute;
	top:22%;
	left:calc(50% - 170px);
	min-width:120px;
	padding:5px 10px;
	border-radius:5px;
	z-index:1;
	background-color:#ffffff;
	font-size:14px;
}

#top-access .image-container a.dtl-link:hover {
	background-color:#000;
}

#top-access .image-container .map-line {
	position:absolute;
	top:18%;
	left:2%;
	width:50%;
	height:auto;
}

#top-access .image-container .map-text {
	position:absolute;
	left:2%;
	font-size:2em;
}

#top-access .image-container .map-text span {
	font-size:0.5em;
}

.h-bn-footer {
	text-align:center;
}



/* -------------------------------- 検討中レイアウト --------------------------------  */
.info-wrapper {
	justify-content:space-between;
	flex-wrap:wrap;
}

.info-wrapper > div {
	flex-basis: 100%;
}


.info-wrapper h2 {
	text-align:center;
	margin-top:0 !important;
}

#info2 {
	padding:30px;
	margin-bottom:0;
	background-color:#fff;
}

#event2 {
	padding:30px;
	margin-bottom:0;
	background-color:#fff;
}

.title-wrapper {
	align-items:center;
	justify-content:space-between;
}

.title-wrapper h2 {
	/* flex-basis:100%; */
	text-align:left;
}

.title-wrapper div {
	flex-basis:auto;
	text-align:right;
}

.title-wrapper a.button {
	display:inline-block;
	border:1px solid #000;
	border-radius:3px;
	color:#000;
	padding:5px 10px;
}


#info2 .tab-panels li {
	list-style:none;
	border-bottom: 1px dotted #ccc;
	padding: 10px 0
}

#info-tab {
	display:flex;
	justify-content:center;
}

#info-tab > div {
	padding:10px 20px;
	border-bottom:1px solid #ccc;
	cursor:pointer;
}

#info-tab > div.active {
	border-bottom:2px solid #000;
}

/* タブリストのスタイル */
#info2 [role="tablist"] {
    display: flex;
	justify-content:center;
    list-style: none;
    padding: 0;
    margin: 0;
}

#info2 [role="tablist"] > li {
	flex-basis:33%;
}

#info2 [role="tablist"] > li > button {
	width:100%;
}

/* タブボタンのスタイル */
#info2 [role="tab"] {
	background-color:#fff;
	color:#000;
	border:none;
    border-bottom: 1px solid #999;;
/*    padding: 10px 20px; */
	padding:10px;
    cursor: pointer;
    font-size: 0.8rem;
}

#info2 [role="tab"][aria-selected="true"] {
    background: #fff;
    border-bottom: 2px solid #000000; /* アクティブタブの色 */
}

#info2 [role="tabpanel"] {
    padding: 15px;
    margin-top: -1px;
    background: #fff;
}

#info2 .tab-panels {
	height:500px;
	overflow-y:scroll;
	/* margin-bottom:50px; */
}

#info2 .tab-panels ul {
	padding-left:0;
}

#info2 .pickup-label {
	font-family:serif;
	font-size:0.7em;
	background-color:#900;
	color:#fff;
	padding:2px 5px;
	margin-right:5px;
}

#info2 time {
	display:block;
	font-size:0.8em;
}

#info2 .event-info {
	color:#900;
	font-size:0.9em;
}

#event2 .events-list h3 {
	background-color:#e5eff4;
	font-size:1.2em;
	padding:5px 10px;
}

#event2 .events-list ul {
	padding-left:0;
}

#event2 .events-list li {
	list-style: none;
	border-bottom: 1px dotted #ccc;
	padding: 10px 0;
}


/* -------- recommended contents --------- */


#contents-slides {
	padding:20px 0;
	margin-top:50px !important;
	margin-bottom:50px;
	background-color:#e6f1f5;
}

#contents-slides .section-title {
	position:relative;
	margin-top:-20px;
	margin-bottom:100px;
}

#contents-slides .section-title .ribbon {
	position: absolute;
	top: -4px;
	width: 40px;
}

#contents-slides .section-title .deco {
	position: absolute;
	top: 20px;
	left:150px;
	width: 10px;
}

#contents-slides .section-title h2{
	color:#0071bc;
    display: inline-block;
    position: absolute;
    top: 10px;
    left: 50px;
	margin:0;
}

#contents-slides .section-title .description {
	position:absolute;
	top:50px;
	font-size:14px;
}

#contents-slides .nexus-link{
	display:none;
}

#contents-slides .pickup-swiper {
	/* margin-top:50px; */
	margin-bottom:30px !important;
}

#contents-slides .metaslider {
	margin-bottom:30px;
}

#contents-slides .main-slider{
	width:100%;
	margin-bottom:20px;
}

#contents-slides .sub-slider{
	width:100%;
	height:80px;
}

#bn-footer ul.footer-banners {
	padding:0;
	list-style:none;
	gap:10px;
	justify-content:center;
	margin-bottom:30px;
}

#bn-footer ul.footer-banners li {
	flex-basis:calc(50% - 5px);
	border:1px solid #ddd;
}


/* ================================
ブレイクポイント
================================== */
@media (min-width: 480px) {

}

@media (min-width: 768px) {

	#top-access .image-container .map-text {
		position:absolute;
		top:4%;
		left:calc(50% - 200px);
		font-size:2em;
	}

	#top-access .image-container .map-line {
		top:20%;
		left:calc(50% - 220px);
		width:30%;
	}

	#top-access .image-container a.dtl-link {

		left:calc(50% - 180px);
	}




	#contents-slides .section-title {
		position:relative;
		margin-top:-20px;
		margin-bottom:80px;
	}

	#contents-slides .section-title .ribbon {
		position: absolute;
		top: -4px;
		width: 40px;
	}

	#contents-slides .section-title .deco {
		position: absolute;
		top: 24px;
		left:180px;
		width: 10px;
	}

	#contents-slides .section-title h2{
	    display: inline-block;
	    position: absolute;
	    top: 10px;
	    left: 50px;
		margin:0;
	}

	#contents-slides .section-title .description {
		position:absolute;
		top:20px;
		font-size:14px;
		left:200px;
	}

	#contents-slides .pickup-swiper {
		/* margin-top:50px; */
		margin-bottom:30px !important;
	}
	#contents-slides .sub-slider{
		height:130px;
	}

	#info2 [role="tab"] {
		font-size:16px;
	}
}

@media (min-width: 1024px) {
	#introduction .highlight-area {
		flex-wrap:nowrap;
	}

	.parallax-wrapper {
		min-height: 250px;
	}

	.event-item {
		width:25%;
	}

	.info-wrapper > div {
		flex-basis:48%;
	}

	#top-access .image-container {
		height:500px;
	}

	#top-access .image-container img {
		height:150%;
	}

	#top-access .image-container .map-text {
		position:absolute;
		top:4%;
		left:28%;
	}

	#top-access .image-container .map-line {
		top:20%;
		left:26%;
		width:25%;
	}

	#top-access .image-container a.dtl-link {
		left:calc(50% - 250px);
	}



	#contents-slides .container {
		margin:0 calc(25% - 20vw);
		width:auto;
	}

	#contents-slides .section-title .deco {
		position: absolute;
		top: 30px;
		left:200px;
		width: 12px;
	}

	#contents-slides .section-title h2{
	    top: 10px;
	    left: 50px;
		margin:0;
	}

	#contents-slides .section-title .description {
		position:absolute;
		top:24px;
		font-size:16px;
		left:240px;
	}

	#contents-slides .main-slider{
		width:68%;
		margin-bottom:20px;
		float:left;
	}

	#contents-slides .sub-slider{
		width:28%;
		height:310px;
		float:right;
	}

	#bn-footer ul.footer-banners {
		gap:20px;
	}

	#bn-footer ul.footer-banners li {
		flex-basis:calc((100% - 40px) / 3);
	}



}

@media (min-width: 1200px) {
	#contents-slides .container {
		/*
		margin:0 calc(25% - 20vw);
		width:auto;
		*/
		width:1140px;
		margin:auto;
	}

	#contents-slides .sub-slider{
		width:28%;
		height:400px;
		float:right;
	}


}

@media (min-width: 1400px) {
	#contents-slides .container {
		/*
		margin:0 calc(25% - 16vw);
		width:auto;
		*/
	}
}



/* ================================
swiper
================================== */
.swiper-container {
	position:relative;
}

.swiper-container.bn-footer-swiper {
	padding-bottom:40px;
}

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

}

.pickup-swiper,
.spots-swiper,
.tour-swiper,
.meal-swiper,
.accomodation-swiper,
.events-swiper,
.souvenir-swiper,
.bn-footer-swiper {
	overflow:hidden;
	margin-bottom:50px;
}


.spots-swiper h3,
.tour-swiper h3,
.meal-swiper h3,
.accomodation-swiper h3,
.souvenir-swiper h3 {
	font-weight:normal;
	font-size:0.8rem;
	/* text-align:center; */
	position:absolute;
	left:0;
	bottom:0;
	background-color:rgba(0,0,0,0.6);
	color:#fff;
	padding:2px 6px;
}

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


.spots-swiper .swiper-slide a,
.tour-swiper .swiper-slide a,
.meal-swiper .swiper-slide a,
.accomodation-swiper .swiper-slide a,
.souvenir-swiper .swiper-slide a {
	display: block;
	position:relative;
	text-decoration:none;
	overflow:hidden;
	width:100%;
}

.spots-swiper .swiper-slide a img,
.tour-swiper .swiper-slide a img,
.meal-swiper .swiper-slide a img,
.accomodation-swiper .swiper-slide a img,
.souvenir-swiper .swiper-slide a img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: top;
}

.spots-swiper .swiper-slide a:hover img,
.tour-swiper .swiper-slide a:hover img,
.meal-swiper .swiper-slide a:hover img,
.accomodation-swiper .swiper-slide a:hover img,
.souvenir-swiper .swiper-slide a:hover img{
    filter: opacity(0.5);
}

/* 矢印ボタン */
.swiper-button-next, .swiper-button-prev {
  width: 30px;
  height: 30px; /* 矢印高さ */
}
.swiper-button-next svg, .swiper-button-prev svg {
  width: 50px; /* 矢印幅 */
  height: 50px; /* 矢印高さ */  
  fill: #fff; /* 矢印の色 */
  stroke: #fff; /* 外周円の色 */
  transition: 0.2s;
}

.swiper-button-next svg:hover, .swiper-button-prev svg:hover {
  opacity: 0.7; /* ボタンホバー時 */
}

.swiper-button-prev svg {
  transform: rotate(180deg); /* ボタンを反転（prev用） */
}

.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after {
  content: '';
}
.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after {
	content:'';
}

/* ================================
ブレイクポイントswiper
================================== */


@media (min-width: 768px) {

.swiper-button-next, .swiper-button-prev {
  width: 50px;
  height: 50px; /* 矢印高さ */
}

.swiper-button-next svg, .swiper-button-prev svg {
  width: 50px; /* 矢印幅 */
  height: 50px; /* 矢印高さ */  
}

}

@media (min-width: 1025px) {

}

@media (min-width: 1320px) {

}


/*
.org-content {
	margin-top:100px;
}

.my-swiper-container {
	position:relative;
}

.swiper-slide {
	text-align:center;
}

.swiper-slide a {
	position:relative;
	display:block;
}

.swiper-slide img {
	width:100%;
}

.swiper-slide h3 {
	font-weight:normal;
	font-size:0.8rem;
	position:absolute;
	bottom:0;
	background-color:rgba(0,0,0,0.7);
	color:#fff;
	padding:5px 10px;
	margin:0;
	
}

.my-swiper-button-next,
.my-swiper-button-prev {
    position: absolute;
    top: var(--swiper-navigation-top-offset, 50%);
    width: calc(var(--swiper-navigation-size) / 44* 27);
    height: var(--swiper-navigation-size);
    margin-top: calc(0px -(var(--swiper-navigation-size) / 2));
    z-index: 10;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--swiper-navigation-color, var(--swiper-theme-color));
}
.my-swiper-button-next:after,
.my-swiper-button-prev:after {
	position:absolute;
    font-family: swiper-icons;
    font-size: var(--swiper-navigation-size);
    text-transform: none!important;
    letter-spacing: 0;
    font-variant: initial;
    line-height: 1
}


}

.my-swiper-pagination {
    position: absolute;
    bottom: -20px !important;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}
*/