@charset "UTF-8";
/* CSS Document */

@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@1,600&display=swap");

:root {
	--main-color: #2ac67d;
	--grad-color01: #fc4f55;
	--grad-color02: #f8d13a;
	--bg-color: #f3f3f3;
}

.En {
	font-family: "Montserrat", sans-serif;
}

#PageName {
	width: 1024px;
	margin: 10px auto;
	font-weight: bold;
}

section {
	padding: 80px 0;
}

.Sec__dept {
	padding-bottom: 0;
}

.bg01 {
	background-color: var(--bg-color);
	padding-bottom: 60px;
    margin-top: 60px;
}

.Heading__h2 {
	position: relative;
	font-size: 38px;
	font-weight: 700;
	margin-bottom: 40px;
	z-index: 1;
}

.Heading__h2::after {
	position: absolute;
	top: calc(50% - 3px);
	left: 0;
	transform: translateY(-50%);
	font-size: 100px;
	font-family: "Montserrat", sans-serif;
	color: rgba(18, 18, 18, 0.1);
	z-index: -1;
}

.Heading__h3 {
	position: relative;
	font-size: 38px;
	font-weight: 700;
	text-align: center;
	color: #121212;
	margin-bottom: 20px;
	z-index: 1;
}

.Heading__h3::before {
	content: "";
	position: absolute;
	top: -40px;
	left: 50%;
	transform: translateX(-50%);
	background-size: contain;
	background-repeat: no-repeat;
	width: 40px;
	height: 40px;
}

.Heading__h3-inner {
	position: relative;
	display: inline-block;
}

.Heading__h3-inner::after {
	content: "";
	position: absolute;
	bottom: 10px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--grad-color01);
	background: linear-gradient(90deg, var(--grad-color01) 0%, var(--grad-color02) 100%);
	width: 100%;
	height: 10px;
	z-index: -1;
}

.Common__button {
	transition: opacity 0.5s;
}

.Common__button:hover {
	opacity: 0.5;
}

/* keyvisual */
.keyvisual {
	width: 100%;
	height: auto;
	margin: 0 auto;
	max-width: 1400px;
	position: relative;
}


.mainHatyaku01 {
	position: absolute;
    background-color: #202020;
    color: #fff;
    padding: 4px;
    font-weight: 600;
    font-size: 0.9vw;
    top: 3%;
    left: 21%;
    transform: skewX(-10deg);
    width: 8vw;
    text-align: center;
}

.seo {
	width: 1024px;
	font-weight: 500;
	text-align: center;
	margin: 0 auto;
	font-size: 17px;
}

/* 出発地からツアーを探す */
.Sec__dept .Heading__h2::after {
	content: "DEPARTURE";
}

.Dept__items {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: 1fr;
	column-gap: 20px;
}

.Dept__item {
	transition: opacity 0.5s;
}

.Dept__item:hover {
	opacity: 0.5;
}

.Dept__item-inner {
	transform: skewX(-15deg);
}

.Dept__link {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #fff;
	box-shadow: 0px 0px 0px 2px #121212 inset;
	font-size: 18px;
	font-weight: 600;
	padding: 20px 0;
}

.Dept__link:after {
	content: "";
	position: absolute;
	bottom: -5px;
	right: -5px;
	display: block;
	background: rgb(252, 79, 85);
	background: linear-gradient(90deg, var(--grad-color01) 0%, var(--grad-color02) 100%);
	width: 100%;
	height: 100%;
	z-index: -1;
}

.Dept__link-inner {
	position: relative;
	display: flex;
	justify-content: center;
	width: 100%;
	transform: skewX(15deg);
}

.Dept__link-inner:before {
	content: "";
	display: block;
	position: absolute;
	top: 50%;
	right: 10px;
	width: 8px;
	height: 8px;
	border-top: 2px solid #121212;
	border-right: 2px solid #121212;
	transform: translate(-50%, -50%) rotate(45deg);
}

/* おすすめツアー */
.Sec__tour {
	background-image: url(/attending/kaigai/sports/images/Sec__tour-bg.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	margin-top: 80px;
}

.Sec__tour .Heading__h2::after {
	content: "TOUR";
}

/* スポーツから探す */
.Sec__genre {
	padding-bottom: 60px;
	padding-top: 70px;
}
.Sec__genre .Heading__h2::after {
	content: "SPORTS";
}

.Sec__genre .Heading__h2 {
	margin-bottom: 0;
}

.Genre__items {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	margin-bottom: 10px;
	margin-top: 40px;
}

.Genre__items.bottom {
	margin-top: 60px;
}

.even {
	margin-top: 80px;
}

.Genre__item {
	width: calc(100% / 7);
}

.Genre__item-inner {
	transform: skewX(-10deg);
}

.Genre__item:not(:last-child) {
	margin-right: 8px;
}

.Genre__link {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #fff;
	box-shadow: 0px 0px 0px 2px #121212 inset;
	font-size: 15px;
	font-weight: 700;
	padding: 10px 0;
}

.Genre__link:after {
	content: "";
	position: absolute;
	bottom: -5px;
	right: -5px;
	display: block;
	background: rgb(252, 79, 85);
	background: linear-gradient(90deg, var(--grad-color01) 0%, var(--grad-color02) 100%);
	width: 100%;
	height: 100%;
	z-index: -1;
}

.Genre__link-inner {
	position: relative;
	display: flex;
	justify-content: center;
	width: 100%;
	padding: 45px 0 10px;
	transform: skewX(10deg);
}

.Genre__link-inner:before,
.Genre__link-inner:after {
	content: "";
	display: block;
	position: absolute;
}

.Genre__link-inner:before {
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	background-repeat: no-repeat;
	background-size: contain;
	width: 42px;
	height: 43px;
}

.Genre__link-inner:after {
	bottom: 0;
	left: 50%;
	width: 6px;
	height: 6px;
	border-top: 2px solid #121212;
	border-right: 2px solid #121212;
	transform: translate(-50%, -50%) rotate(135deg);
}

.Genre__items.bottom .Genre__link-inner {
	padding: 10px 0 45px;
}

.Genre__items.bottom .Genre__link-inner:before {
	content: "";
	display: block;
	position: absolute;
}

.Genre__items.bottom .Genre__link-inner:before {
	top: inherit;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	background-repeat: no-repeat;
	background-size: contain;
	width: 42px;
	height: 43px;
}

.Genre__items.bottom .Genre__link-inner:after {
	top: 6px;
	bottom: inherit;
	left: 50%;
	width: 6px;
	height: 6px;
	border-top: 2px solid #121212;
	border-right: 2px solid #121212;
	transform: translate(-50%, -50%) rotate(-45deg);
}

/* サッカー */
.Genre__icon01 .Genre__link-inner:before {
	background-image: url(/attending/kaigai/sports/images/icon01.svg);
}
.Heading__h3.Heading__icon01::before {
	background-image: url(/attending/kaigai/sports/images/icon01.svg);
}

/* 野球 */
.Genre__icon02 .Genre__link-inner:before {
	background-image: url(/attending/kaigai/sports/images/icon02.svg);
}
.Heading__h3.Heading__icon02::before {
	background-image: url(/attending/kaigai/sports/images/icon02.svg);
}

/* 競馬 */
.Genre__icon03 .Genre__link-inner:before {
	background-image: url(/attending/kaigai/sports/images/icon03.svg);
}
.Heading__h3.Heading__icon03::before {
	background-image: url(/attending/kaigai/sports/images/icon03.svg);
}

/* テニス */
.Genre__icon04 .Genre__link-inner:before {
	background-image: url(/attending/kaigai/sports/images/icon04.svg);
}
.Heading__h3.Heading__icon04::before {
	background-image: url(/attending/kaigai/sports/images/icon04.svg);
}

/* バスケットボール */
.Genre__icon05 .Genre__link-inner:before {
	background-image: url(/attending/kaigai/sports/images/icon05.svg);
}
.Heading__h3.Heading__icon05::before {
	background-image: url(/attending/kaigai/sports/images/icon05.svg);
}

/* F1 */
.Genre__icon06 .Genre__link-inner:before {
	background-image: url(/attending/kaigai/sports/images/icon06.svg);
}
.Heading__h3.Heading__icon06::before {
	background-image: url(/attending/kaigai/sports/images/icon06.svg);
}

/* その他 */
.Genre__icon07 .Genre__link-inner:before {
	background-image: url(/attending/kaigai/sports/images/icon07.svg);
}

.Heading__h3.Heading__icon07::before {
	background-image: url(/attending/kaigai/sports/images/icon07.svg);
}

.Block__genre {
	padding-top: 100px;
}

.Tour__button {
	width: 460px;
	margin: 30px auto 0;
}

.Tour__button-inner {
	transform: skewX(-10deg);
}

.Tour__Button--link {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #000;
	width: 100%;
	font-size: 17px;
	font-weight: 600;
	color: #fff;
	margin: 0 auto;
}

.Tour__Button--link:after {
	content: "";
	position: absolute;
	bottom: -5px;
	right: -5px;
	display: block;
	background: rgb(252, 79, 85);
	background: linear-gradient(90deg, var(--grad-color01) 0%, var(--grad-color02) 100%);
	width: 100%;
	height: 100%;
	z-index: -1;
}

.Tour__Button--link-inner {
	position: relative;
	display: flex;
	justify-content: center;
	width: 100%;
	padding: 20px 0;
	transform: skewX(10deg);
}

.Tour__link-inner:after {
	content: "";
	position: absolute;
	top: 50%;
	right: 24px;
	width: 8px;
	height: 8px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	transform: translate(-50%, -50%) rotate(45deg);
}

/* 希望の条件からツアーを探す */
.Sec__search {
	background-image: url(/attending/kaigai/sports/images/Sec__search-bg.png);
	background-repeat: no-repeat;
	background-size: cover;
}

.Sec__search .Heading__h2::after {
	content: "SEARCH";
}

/* 関連情報 */
.Sec__relation .Heading__h2::after {
	content: "RELATED";
}

.Block__relation {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.Relation__details {
	text-align: center;
}

.Heading__h3-relation {
	font-size: 26px;
	font-weight: 700;
	line-height: 1.4;
}

.Relation__holder {
	font-weight: 600;
	margin-top: 10px;
}

.Relation__button {
	margin-top: 50px;
	transform: skewX(-10deg);
}

.Relation__link {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #000;
	font-size: 16px;
	font-weight: 600;
	color: #fff;
}

.Relation__link:after {
	content: "";
	position: absolute;
	bottom: -5px;
	right: -5px;
	display: block;
	background: rgb(252, 79, 85);
	background: linear-gradient(90deg, var(--grad-color01) 0%, var(--grad-color02) 100%);
	width: 100%;
	height: 100%;
	z-index: -1;
}

.Relation__link-inner {
	position: relative;
	display: flex;
	justify-content: center;
	width: 100%;
	padding: 20px 0;
	transform: skewX(10deg);
}

.Relation__link-inner:after {
	content: "";
	position: absolute;
	top: 50%;
	right: 10px;
	width: 8px;
	height: 8px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	transform: translate(-50%, -50%) rotate(45deg);
}

/* その他おすすめ特集 */
.Sec__features {
	background-color: var(--bg-color);
}

.Sec__features .Heading__h2::after {
	content: "FEATURES";
}

.swiper-slider__outer {
	position: relative;
}

.bannerCassette_content .bannerImg {
	width: 230px;
	height: 173px;
	transition: opacity 0.5s;
}

.bannerCassette_content .bannerImg:hover {
	opacity: 0.5;
}

/* ツアーカセット */
.Tour__cassette {
	background-color: #fff;
	border: solid 1px #c2c2c2;
	width: 27rem;
	height: auto;
	padding: 14px 14px 20px 14px;
	overflow: hidden;
}

.Tour__swiper-link,
.Tour__swiper-other {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.Tour__swiper-link {
	transition: opacity 0.5s;
}

.Tour__swiper-link:hover {
	opacity: 0.5;
}

.Tour__cassette-inner {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.Tour__dest {
	background-color: var(--main-color);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	color: #fff;
	margin-top: 1rem;
	padding: 5px 10px;
}

.Tour__label-items {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.Tour__label-item {
	display: flex;
	justify-content: center;
	align-items: center;
	border: solid 1px #333;
	width: calc((100% / 2) - 2.5px);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	margin-top: 1rem;
	padding: 5px;
}

.Tour__label-item__inner {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.Tour__title {
	font-weight: 700;
	line-height: 1.4;
	margin-top: 1rem;
}

.Tour__caption {
	font-size: 15px;
	line-height: 1.4;
	margin-top: 1rem;
	margin-bottom: 2rem;
}

.Tour__price {
	font-size: 16px;
	font-weight: 700;
	color: #ef2917;
	text-align: right;
	margin-top: auto;
}

.Tour__swiper-outer {
	position: relative;
}

.Tour__swiper {
	--swiper-theme-color: var(--page-color);
	margin: 0 auto;
	padding-bottom: 0;
	position: static;
	overflow: hidden;
	list-style: none;
	z-index: 1;
}

.Tour__swiper:has(.swiper-scrollbar-lock) {
	padding-bottom: 0;
}

.Tour__swiper-button-next.swiper-button-disabled,
.Tour__swiper-button-prev.swiper-button-disabled {
	display: none;
}

.Tour__swiper-button-next,
.Tour__swiper-button-prev {
	position: absolute;
	top: calc(50% - 2rem);
	z-index: 10;
	width: 58px;
	height: 58px;
	background: #121212;
	border: solid 3px #fff;
	transition: opacity 0.3s;
	cursor: pointer;
}

.Tour__swiper-button-next:hover,
.Tour__swiper-button-prev:hover {
	opacity: 0.7;
}

.Tour__swiper-button-next {
	right: -3rem;
	transform: translateY(-50%);
}

.Tour__swiper-button-prev {
	left: -3rem;
	transform: translateY(-50%) rotate(180deg);
}

.Tour__swiper-button-next:after,
.Tour__swiper-button-prev:after {
	content: "";
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 8px;
	height: 8px;
	border-top: 2px solid white;
	border-right: 2px solid white;
}

.Tour__swiper-button-next:after {
	transform: translate(-70%, -50%) rotate(45deg);
}

.Tour__swiper-button-prev:after {
	transform: translate(-60%, -50%) rotate(45deg);
}

.swiper-scrollbar {
	background: #e5e5e5;
}

.swiper-scrollbar-drag {
	background: var(--main-color);
}

/* swiper */
.swiper-wrapper {
	margin-bottom: 30px;
}

.swiper-button-prev {
	left: -3rem;
}

.swiper-button-next {
	right: -3rem;
}

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

.swiper-button-prev.swiper-button-disabled,
.swiper-button-next.swiper-button-disabled {
	display: none;
}

.swiper-button-prev,
.swiper-button-next {
	background-color: #121212;
	border: solid 3px #fff;
	width: 58px;
	height: 58px;
	cursor: pointer;
	z-index: 10;
	transition: all 0.3s;
	background-image: none;
	transform: translateY(-50%);
	transition: opacity 0.3s;
}

.swiper-button-prev:hover,
.swiper-button-next:hover {
	opacity: 0.7;
}

.swiper-button-prev::before,
.swiper-button-next::before {
	content: "";
	position: absolute;
	top: 50%;
	display: block;
	width: 8px;
	height: 8px;
	border-top: 2px solid white;
	border-right: 2px solid white;
}

.swiper-button-prev::before {
	left: 50%;
	transform: translate(-50%, -50%) rotate(-135deg);
}

.swiper-button-next::before {
	left: 50%;
	transform: translate(-50%, -50%) rotate(45deg);
}

.swiper-container-horizontal > .swiper-scrollbar {
	left: 0;
	width: 100%;
	height: 10px;
}