@charset 'utf-8';

/* タイトル部分 */
div.pien-title {
	display: flex;
	width: 100%;
	flex-flow: column;
	flex-wrap: wrap;
	height: 180px;
	padding: 0 30px;
}

div.pien-title>div {
	width: 180px;
}

div.pien-title h1 {
	line-height: 1.1;
	margin-bottom: 10px;
	font-size: 3.2em;
	width: calc(100% - 180px);
	padding: 0 65px;
	padding-top: 10px;
}

div.pien-title>span {
	text-align: justify;
	font-size: 1.6em;
	width: 550px;
	width: calc(100% - 180px);
	padding: 0 65px;
	line-height: 1.4;
}

div.pien-title>span span.title_strong {
	color: #937421;
}

div.pien-title div p.pien-title_image {
	height: 180px;
	width: 180px;
	display: flex;
	overflow: hidden;
	border-radius: 100px;
}

div.pien-title div p.pien-title_image img {
	width: 100%;
	margin: auto;
	display: inline-block;
}

/* cmpごとのタイトルアレンジ↓ */
#christmas div.pien-title div p.pien-title_image {
	background: #122756;
}
#newyear div.pien-title div p.pien-title_image {
	background: url(../images/newyearbg.svg);
	background-repeat: repeat;
	background-position-y: -30px;
}
#sapporo_sp div.pien-title div p.pien-title_image {
	background: url(../images/sapporo_spbg.svg);
	background-repeat: repeat;
	background-position-y: -30px;
}
#february div.pien-title div p.pien-title_image {
	background: #FF8093;
}

#martin div.pien-title div p.pien-title_image {
	background: rgb(57, 21, 109);
	background: radial-gradient(circle, rgba(57, 21, 109, 1) 0%, rgba(226, 1, 131, 1) 100%);
}

#disney div.pien-title div p.pien-title_image {
	background: rgba(60 99, 183, .31);
}

#winter div.pien-title div p.pien-title_image {
	background: rgb(212, 229, 247);
	background: linear-gradient(180deg, rgba(212, 229, 247, 1) 0%, rgba(178, 207, 239, 1) 100%);
}

#march div.pien-title div p.pien-title_image {
	background: rgb(148, 48, 48);
	background: linear-gradient(180deg, rgba(148, 48, 48, .9) 0%, rgba(148, 48, 48, .9) 100%);
}
#VeteransDay div.pien-title div p.pien-title_image {
	background:#81a4ff;
}
#Thanksgiving div.pien-title div p.pien-title_image {
	background:#f67f00;
}
#china div.pien-title div p.pien-title_image {
	background:#fff;
}

#OctoberSp div.pien-title div p.pien-title_image {
	background: #FF7518;
	background: linear-gradient(107deg, rgba(255, 117, 24, 1) 0%, rgba(178, 34, 34, 1) 100%);
}

#hotel_plan div.pien-title div p.pien-title_image {
	background: rgb(212, 229, 247);
	background: linear-gradient(135deg, rgba(224, 212, 193, 1) 0%, rgba(241, 236, 228, 1) 100%);
}

#usj div.pien-title div p.pien-title_image {
	background: #1a1a1a;
}

#juneteenth div.pien-title div p.pien-title_image {
	background: #F8A654;
	background: linear-gradient(0deg, rgba(248, 166, 84, 1) 0%, rgba(250, 199, 147, 1) 50%);
}

#usj div.pien-title div p.pien-title_image img {
	width: 80%;
}

#inter_pkg div.pien-title div p.pien-title_image {
	background: rgb(212, 229, 247);
}

#spring_break div.pien-title div p.pien-title_image {
	background: rgb(64, 180, 247);
	background: linear-gradient(122deg, rgba(64, 180, 247, 1) 0%, rgba(172, 218, 144, 1) 100%);
}

#independenceday div.pien-title div p.pien-title_image {
	background: linear-gradient(0deg, rgba(60, 59, 110, .11) 0%, rgba(60, 59, 110, .05) 50%);
}

#memorial div.pien-title div p.pien-title_image {
	background: rgba(228, 193, 126, .1);
}

#winter div.pien-title div p.pien-title_image img {
	width: 114%;
	max-width: unset;
	position: relative;
	right: 11px;
}

#march div.pien-title div p.pien-title_image img {
	width: 110%;
	max-width: unset;
	position: relative;
	right: 9px;
}


#christmas div.pien-title div p.pien-title_image img {
	width: 70%;
}

#president div.pien-title div p.pien-title_image {
	background: rgb(183, 14, 15);
	background: linear-gradient(0deg, rgba(183, 14, 15, 1) 50%, rgba(8, 19, 119, 1) 50%);
}

#clubmed div.pien-title div p.pien-title_image {
	background: rgb(15, 187, 254);
	background: linear-gradient(0deg, rgba(15, 187, 254, 0.2) 50%, rgba(15, 187, 254, 0.2) 50%);
}

#junesp div.pien-title div p.pien-title_image {
	background: #DBDFEE;
	background: linear-gradient(180deg, rgba(219, 223, 238, 0.54) 0%, rgba(234, 236, 245, 0.58) 50%);
}

#julysp div.pien-title div p.pien-title_image {
	background: #A7BBED;
	background: radial-gradient(circle, rgba(167, 187, 237, .5) 100%, rgba(233, 242, 250, .5) 0%);
}

#Augustsp div.pien-title div p.pien-title_image {
	background: #F18F01;
	background: linear-gradient(90deg, rgba(241, 143, 1, 1) 0%, rgba(244, 170, 62, 1) 100%);
}

#september div.pien-title div p.pien-title_image {
	background: #fdf5e9;

}

#september div.pien-title div p.pien-title_image img {
	width: 93%;
}

#Augustsp div.pien-title div p.pien-title_image img {
	width: 70%;
}

#Columbus div.pien-title div p.pien-title_image {
	background: url(../images/columbus_bg.svg);
	background-size: 1px 1px;
}

#Columbus div.pien-title div p.pien-title_image img {
	width: 85%;
}


#maysp div.pien-title div p.pien-title_image {
	background: #817BCC;
	background: linear-gradient(180deg, rgba(129, 123, 204, 0.54) 0%, rgba(129, 123, 204, 0.44) 50%);
}

#labor div.pien-title div p.pien-title_image {
	background: #F8DE7F;
	background: radial-gradient(circle, rgba(248, 222, 127, 1) 100%, rgba(251, 238, 191, 1) 0%);
}

#msc div.pien-title div p.pien-title_image {
	background: #BDD6EA;
	background: radial-gradient(circle, rgba(189, 214, 234, 1) 100%, rgba(226, 237, 247, 1) 0%);
}

#summer_sp div.pien-title div p.pien-title_image {
	background: #1A45BA;
	background: linear-gradient(180deg, rgba(26, 69, 186, 0.89) 0%, rgba(99, 201, 212, 0.89) 100%);
}

div.pien-title h1 {
	color: #122756;
}

#martin div.pien-title h1 {
	color: rgba(57, 21, 109, 1);
}
#sapporo_sp div.pien-title h1 {
	color: #3a7f5f;
}
#newyear div.pien-title h1 {
	color: #008ebb;
}
#february div.pien-title h1 {
	color: #ff6b81;
}

#disney div.pien-title h1 {
	color: #3c63b7;
}

#independenceday div.pien-title h1 {
	color: #3c3b6e;
}

#juneteenth div.pien-title h1 {
	color: #F8A654;
}

#president div.pien-title h1 {
	color: rgba(8, 19, 119, 1);
}

#winter div.pien-title h1 {
	color: #537BBA;
}

#march div.pien-title h1 {
	color: #943030;
}
#VeteransDay div.pien-title h1 {
	color: #81a4ff;
}
#Thanksgiving div.pien-title h1 {
	color: #f67f00;
}
#china div.pien-title h1 {
	color: #2a5ea0;
}
#OctoberSp div.pien-title h1 {
	color: #B22222;
}
#hotel_plan div.pien-title h1 {
	color: #2F220F;
}

#usj div.pien-title h1 {
	color: #1a1a1a;
}

#inter_pkg div.pien-title h1 {
	color: #1D4984;
}

#clubmed div.pien-title h1 {
	color: #50476c;
}

#spring_break div.pien-title h1 {
	color: #2EA214;
}

#memorial div.pien-title h1 {
	color: #00205B;
}

#junesp div.pien-title h1 {
	color: #07248d;
}

#julysp div.pien-title h1 {
	color: #4C74D7;
}

#Augustsp div.pien-title h1 {
	color: #F18F01;
}

#september div.pien-title h1 {
	color: #d35836;
}

#maysp div.pien-title h1 {
	color: #817BCC;
}

#labor div.pien-title h1 {
	color: #EDBA02;
}

#msc div.pien-title h1 {
	color: #236CA7;
}

#summer_sp div.pien-title h1 {
	color: #1A45BA;
}

#Columbus div.pien-title h1 {
	color: #f78611;
}

/* cmpごとのタイトルアレンジ↑*/

#clubmed div.clubmed_information {
	display: block;
	background-color: aliceblue;
	padding: 40px;
	margin-top: 30px;
	border-radius: 5px;
}

#clubmed div.clubmed_information img {
	border-radius: 5px;
}

ul.pien {
	display: flex;
	width: 100%;
	justify-content: space-between;
	flex-wrap: wrap;
	font-size: 16px;
	color: #333;
	margin-top: 50px;
	gap: 13px 0;
}

ul.pien li {
	width: 50%;
	box-sizing: border-box;
	position: relative;
}

ul.pien li div.pien_listwrap {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	background: #fff;
	padding: 15px 10px 8px 15px;
	box-shadow: 3px 3px 15px lightgray;
	border-radius: 7px;
	width: 98%;
}

ul.pien li div.pien_listwrap>p {
	width: 28%;
	display: flex;
	z-index: 1;
	position: relative;
}

ul.pien li div.pien_listwrap>p img {
	border-radius: 3px;
	display: inline-block;
	margin: auto;
	margin-top: 0;

}

ul.pien li.new div.pien_listwrap>p::before {
	content: "";
	position: absolute;
	background-image: url(../images/new.png);
	background-size: contain;
	background-repeat: no-repeat;
	width: 127px;
	height: 16px;
	top: -4px;
	left: 0px;
}

ul.pien li div.pien_listwrap>div {
	width: 72%;
	display: flex;
	flex-flow: column;
	gap: 8.5px;
	box-sizing: border-box;
	line-height: 1;
}

ul.pien li div.pien_listwrap>div p.tour_title {
	font-weight: bold;
	letter-spacing: .5px;
	font-size: 1.15em;
	margin-bottom: 8px;
}

ul.pien li div.pien_listwrap>div p.tour_title span.campaign_title {
	display: none;
}

ul.pien li div.pien_listwrap>div p.tour_title span.tour_name {
	padding: 0px 8px 8px 20px;
	WIDTH: 100%;
	DISPLAY: INLINE-BLOCK;
	COLOR: #333;
	border-bottom: 1px dotted #333;
}

ul.pien li div.pien_listwrap>div p.tour_area a {
	display: inline-block;
	padding-right: 10px;
	transition: .3s;
	text-decoration: underline;
	color: #1250D0;
}

ul.pien li div.pien_listwrap>div p.tour_area a:hover {
	transition: .1s;
	text-decoration: none;

}

ul.pien li div.pien_listwrap>div>p>span.deping {
	display: inline-block;
	width: 100%;
	padding-left: 44px;
	padding-bottom: 7px;
}

ul.pien li div.pien_listwrap>div>p>span.deping span::before {
	content: "";
	position: absolute;
	background-size: contain;
	background-repeat: no-repeat;
	height: 16px;
	width: 16px;
	bottom: 1px;
	left: -23px;
}

ul.pien li div.pien_listwrap>div>p.tour_dep>span.deping span::before {
	background-image: url(../images/calendar.svg);
}

ul.pien li div.pien_listwrap>div>p.tour_area>span.deping span::before {
	background-image: url(../images/plane.svg);
	bottom: 0px;
}

body#hotel_plan ul.pien li div.pien_listwrap>div>p.tour_area>span.deping span::before {
	background-image: url(../images/bed.svg);
	bottom: 0px;
}

body#usj ul.pien li div.pien_listwrap>div>p.tour_area>span.deping span::before {
	background-image: url(../images/bed.svg);
	bottom: 0px;
}

body#disney ul.pien li div.pien_listwrap>div>p.tour_area>span.deping span::before {
	background-image: url(../images/bed.svg);
	bottom: 0px;
}

body#disney ul.pien li div.pien_listwrap>div>p.tour_area>span.deping span::after {
	left: 100px;
}

ul.pien li div.pien_listwrap>div>p>span.deping span::after {
	content: "";
	position: absolute;
	background-color: #6e6e6e;
	height: 69%;
	width: 1px;
	bottom: 2px;
	left: 72px;
	transform: rotate(16deg);
}

ul.pien li div.pien_listwrap>div>p>span.deping span {
	margin-right: 20px;
	font-size: .9em;
	position: relative;

}

ul.pien li div.pien_listwrap>div>p.tour_dep>span.deping span {
	letter-spacing: .5px;
}



body.en_campaign .contents-wrap {
	padding: 0px 0 100px;

}

ul.pien li div.pien_listwrap>div p.tour_area span.deping a {
	background-color: #84CC65;
	color: #fff;
	padding: 4px 10px;
	text-decoration: none;
	border-radius: 20px;
	top: 0;
	right: 0;
	transition: transform, background-color, top, right, box-shadow .3s;
	box-shadow: 1px 1px 2px gray;
	position: relative;
}

ul.pien li div.pien_listwrap>div p.tour_area span.deping a.hij {
	background-color: #F12EFF;
}

ul.pien li div.pien_listwrap>div p.tour_area span.deping a.iwk {
	background-color: #FFFE00;
	color: #000;
}

ul.pien li div.pien_listwrap>div p.tour_area span.deping a.tyo {
	background-color: #B5201B;
}

ul.pien li div.pien_listwrap>div p.tour_area span.deping a.tokyo {
	background-color: #E31612;
}

ul.pien li div.pien_listwrap>div p.tour_area span.deping a.fuk {
	background-color: #1EAFE8;
}

ul.pien li div.pien_listwrap>div p.tour_area span.deping a.ngs {
	background-color: #9EC1DD;
}

ul.pien li div.pien_listwrap>div p.tour_area span.deping a:hover {
	background-color: #696969;
	top: 1px;
	right: -1px;
	box-shadow: unset;
	opacity: 1;
	transition: transform, background-color, top, right, box-shadow .3s;
	color: #fff;
}

@media screen and (max-width: 768px) {
	#main {
		background: linear-gradient(0deg, rgba(156, 173, 216, 0.05) 0%, rgba(156, 173, 216, 0.2) 12%, rgba(156, 173, 216, 0.2) 47%, rgba(156, 173, 216, 0.1) 84%, rgba(156, 173, 216, 0.05) 100%);
	}

	body.en_campaign .contents-wrap {
		padding: 15px 0px 40px;
	}

	#clubmed div.clubmed_information {
		padding: 0;
	}

	div.pien-title {
		flex-flow: initial;
		flex-wrap: wrap;
		height: auto;
		padding: 15px 10px;
		gap: 20px 0;
		gap: 20px 0;
		background: #fff;
	}

	div.pien-title>div {
		width: 100%;
	}

	div.pien-title div p.pien-title_image {
		height: auto;
		width: 100%;
		border-radius: 5px;
	}

	#christmas div.pien-title div p.pien-title_image img {
		width: 100%;
	}

	div.pien-title h1 {
		display: none;
	}

	div.pien-title h1 span {
		margin: auto;
		padding-left: 8px;
		border-left: 2px solid;
		letter-spacing: 1px;
	}

	div.pien-title>span {
		width: 100%;
		padding: 0;
		line-height: 1.5;
	}

	ul.pien li {
		width: 100%;
		box-shadow: 1px 1px 20px #dedede;
	}

	ul.pien li:nth-child(n) div.pien_listwrap {
		border-radius: 5px;
	}

	ul.pien li div.pien_listwrap {
		justify-content: center;
		flex-flow: column;
		padding: 20px 15px 30px;
		gap: 15px;
		background: #fff;
	}

	ul.pien li div.pien_listwrap>p {
		width: 100%;
		order: 2;
	}

	ul.pien li div.pien_listwrap>p img {
		width: 100%;
	}

	ul.pien li div.pien_listwrap>div {
		width: 100%;
		gap: 5px;
	}

	ul.pien li div.pien_listwrap>div p.tour_title {
		margin-bottom: 15px;
	}

	ul.pien li div.pien_listwrap>div p.tour_title span.campaign_title {
		font-size: .8em;
		font-weight: normal;
		padding: 5px 0 10px 3px;
		color: #716C69;
		display: block;
	}

	ul.pien li div.pien_listwrap>div p.tour_title span.tour_name {
		padding: 0;
		font-size: 1.5em;
		border-bottom: none;
	}

	ul.pien li div.pien_listwrap>div p.tour_area span.deping a {
		background-color: #1250D0;
		color: #fff;
		padding: 6px 15px;
		text-decoration: none;
		border-radius: 20px;
		top: 0;
		right: 0;
		transition: transform, background-color, top, right, box-shadow .2s;
		box-shadow: 1px 1px 2px gray;
		position: relative;
	}

	ul.pien li div.pien_listwrap>div p.tour_area span.deping a:active {
		background-color: #dc544a;
		top: 1px;
		right: -1px;
		box-shadow: unset;
	}

	ul.pien li div.pien_listwrap>div p.tour_area a:hover {
		opacity: 1;
	}

	ul.pien li div.pien_listwrap>div>p>span.deping {
		width: 100%;
		padding-left: 25px;
		padding-bottom: 5px;
	}

	ul.pien li.new div.pien_listwrap>p::before {
		content: unset;
	}

	ul.pien li.new::before {
		content: "";
		position: absolute;
		background-image: url(../images/new.png);
		background-size: contain;
		background-repeat: no-repeat;
		width: 183px;
		height: 24px;
		top: -6px;
		left: 0px;
	}

}