@charset "utf-8";

/*=======================================スタイルリセット=======================================*/
	/* http://meyerweb.com/eric/tools/css/reset/
	v2.0 | 20110126
	License: none (public domain)
	*/

	html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,
	q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,
	th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 100%;
	}
	
	article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
		display: block;
	}
	
	ul, ol, li {
		list-style: none;
	}
	
	a, a:hover {
		color: #333;
		text-decoration: none;
		transition: 0.2s;
	}
	
	a:hover {
		opacity: 0.5;
	}
	
	/*=======================================共通=======================================*/
	body *{
		font-family:'Noto Sans JP','Yu Gothic black',sans-serif,'Lato','メイリオ';
		font-size: 15px;
		letter-spacing:0;
		font-weight: normal;
		box-sizing: border-box;
	}
	
	#revenge_trip img{
		width: 100%;
		vertical-align:top;
	}
	
	#revenge_trip {
		width: 980px;
		margin: 0 auto;
		background-image:url(../IMAGE/revenge_trip/revenge_trip24_back_img3.jpg);
		background-attachment: fixed;
		background-size: 100%;
		background-position: bottom;
	}
	
	#revenge_trip .pc_none {
		display: none;
	}
	
	/*見出し========*/
	#revenge_trip h1{
		text-align: center;
		font-size: 30px;
		padding: 2% 0;
		font-weight: bold;
		color: #fff;
	} 
	
	/* 共通 カラム
	================================ */
	#revenge_trip ul[class^="col_"]{
		display: flex;
		flex-wrap: wrap;
		gap: 10px 1%;
	}
	
	#revenge_trip ul.col_1 > li{
		width:100%;
		margin-bottom: 10px;
	}
	
	#revenge_trip ul.col_2 > li{
		width: calc(calc(100% - 1%) / 2);
	}
	
	#revenge_trip ul.col_3 > li{
		width: calc(calc(100% - 2%) / 3);
	}
	
	#revenge_trip ul.col_4 > li{
		width: calc(calc(100% - 3%) / 4);
	}
	
	#revenge_trip ul.col_5 > li{
		width: calc(calc(100% - 4%) / 5);
	}
	
	#revenge_trip ul.col_6 > li{
		width: calc(calc(100% - 5%) / 6);
	}
	
	/*=======================================
	section title 看板
	=======================================*/
	#revenge_trip .title {
		width: 100%;
		margin: 0 auto;
	}
	
	/*=======================================
	section side_anchor_link ハンバーガーメニュー
	=======================================*/
	#revenge_trip .side_anchor_link{
		position: fixed;
		top: 10%;
		right: 0;
		opacity: 0;
		transition: 0.6s;
		z-index: 99;
	} 
	
	#revenge_trip .side_anchor_link.on{
		opacity: 1;
	} 
	
	
	#revenge_trip .side_anchor_link ul{
		background-color: #fff;
		border-radius: 10px;
		border-right: solid 35px #27547f;
		width: 250px;
		padding: 10% 0 0 0;
	} 
	
	#revenge_trip .side_anchor_link ul li{
		border-bottom: solid 1px #222;
		width: 90%;
		margin: 0 auto;
	} 
	
	#revenge_trip .side_anchor_link ul li:last-child{
		border-bottom: solid 0px #222;
		padding:20% 0;
	} 
	
	#revenge_trip .side_anchor_link ul li a{
		display: flex;
		justify-content: center;
		padding: 5%;
		font-size: 18px;
		transition: 0.2s;
	} 
	
	#revenge_trip .side_anchor_link ul li a:hover{
		background-color: #27547f;
		color: #fff;
	} 
	
	/*=======================================
	section anchor_link アンカーリンク
	=======================================*/
	#revenge_trip .anchor_link ul{
		width: 100%;
		margin: 0 auto;
		padding: 1% 0;
		flex-wrap: nowrap;
		gap:10px 0;
		background-color: #fff;
	}
	
	#revenge_trip .anchor_link ul li a{
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		font-size: 20px;
		font-weight: bold;
		color: #365f94;
		height: 85px;
		line-height: 30px;
	} 
	
	#revenge_trip .anchor_link ul li{
		border-right: dotted 1px #38648f;
	}
	
	#revenge_trip .anchor_link ul li:last-child{
		border-right: 0vw;
	} 
	
	#revenge_trip .anchor_link ul li a::before{
		font-family: 'FontAwesome';
		font-size: 35px;
	}
	
	#revenge_trip .anchor_link ul li:nth-child(1) a::before{
		content: "\f5c1";
	} 
	
	#revenge_trip .anchor_link ul li:nth-child(2) a::before{
		content: "\f0e9";
	} 
	
	#revenge_trip .anchor_link ul li:nth-child(3) a::before{
		content: "\e4c5";
	} 
	
	#revenge_trip .anchor_link ul li:nth-child(4) a::before{
		content: "\f000";
	} 
	
	#revenge_trip .anchor_link ul li:nth-child(5) a::before{
		content: "\f553";
	} 
	
	
	#revenge_trip .anchor_link ul li a::after{
		font-family:'Material Icons';
		content: "\e5cf";
		transition: 0.2s;
	} 
	
	#revenge_trip .anchor_link ul li a:hover::after{
		transform: translateY(30%);
	} 
	
	
	/*=======================================
	section item_block
	=======================================*/
	#revenge_trip .bn{/*キャンペーンバナー*/
		display: block;
		width: 800px;
		margin: 0% auto;
	}
	
	#revenge_trip .item_block{
		width: 100%;
		background-color: #385d8c;
		margin: 0 auto;
		padding: 1% 0;
	} 
	
	#revenge_trip .item_block .item{
		width: 800px;
		margin: 0 auto;
		display: flex;
		flex-wrap: wrap;
	} 
	
	#revenge_trip .item_block .item li{
		background-color: #fff;
		padding: 2%;
		position: relative;
	} 
	
	#revenge_trip .item_block .item li .camp_icon{
		position: absolute;
		width: 26%;
		left: 0%;
		top: 0%;
		z-index: 1;
	}
	
	#revenge_trip .item_block .item	dl dt{/*商品名*/
		font-size: 25px;
		text-align: center;
		font-weight: bold;
		margin: 2% 0;
	} 
	
	
	#revenge_trip .item_block .item dl dd.icon ul{/*訴求アイコン リセット*/
		display: flex;
		flex-wrap: wrap;
		gap:4px 4px;
		margin: 4% 0;
	} 
	
	#revenge_trip .item_block .item dl dd.icon ul li{/*訴求アイコン*/
		border: solid 1px #a1a1a1;
		border-radius: 3px;
		width: auto;
		padding:7px;
		font-size: 17px;
		letter-spacing: 1px;
		font-weight: bold;
	} 
	
	#revenge_trip .item_block .item	dl dd.point{/*ポイント*/
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 2% 0;
		padding: 2% 0;
		font-size: 22px;
		background-color: #8b001a;
		color: #fff65f;
		font-weight: bold;
	} 
	
	/*価格プロ====================*/
	#revenge_trip .prdisp-price span:first-child{/*価格*/
		display: none;
	}
	
	#revenge_trip .item_block .price_block{
		display: flex;
		justify-content: center;
		color: #b60123;
		text-align: center;
		font-weight: bolder;
		align-items: flex-end;
	}
	
	#revenge_trip .item_block .price_block .value{
		font-family: 'Lato';
		font-weight: bolder;
		letter-spacing: 2px;
		font-size: 48px;
	}
	
	#revenge_trip .item_block .price_block span{
		font-family: 'Noto Sans JP';
		font-size: 25px;
		letter-spacing: 0px;
		font-weight: bolder;
		margin-bottom: 2%;
	} 
	
	#revenge_trip .item_block .price_block span.tax{
		font-size: 15px;
		margin-bottom: 2%;
	} 
	
	#revenge_trip .item_block .price_block.sale::before{
		font-family:'Material Icons';
		content: "\e579";
		font-weight: bolder;
		transform: rotate(-135deg);
		margin-bottom: 1%;
		font-size: 48px;
	}
	
	
	#revenge_trip .item_block .item	dl dd.price_nomal{/*通常価格*/
		font-family: 'Lato';
		text-align: left;
		font-size: 20px;
		color: #8c8c8c;
		text-decoration: line-through;
		margin-left:13%;
	} 
	
	#revenge_trip .item_block .item	dl .btn{/*ご購入はこちら*/
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 5% 0 0 0;
		height: 60px;
		border-radius: 50px;
		color: #fff;
		font-size: 22px;
		background-color: #282828;
		/* border:solid 2px #8f2e14; */
		transition: 0.2s;
	} 
	
	#revenge_trip .item_block .item	dl .btn:hover{
		color: #282828;
		background-color: #fff;
	} 
	
	#revenge_trip .item_block .item	dl .btn::after{
		position: absolute;
		right: 12%;
		top:50%;
		transform: translate(50%,-50%);
		font-family:'Material Icons';
		content: "\e5cc";
	} 
	
	/*もっと見る
	==========================*/
	
	#revenge_trip .cate{/*ご購入はこちら*/
		width: 800px;
		margin: 3% auto;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 80px;
		border-radius: 50px;
		color: #2d5c98;
		font-size: 25px;
		font-weight: bold;
		background-color: #fbff4c;
		/* border:solid 2px #8f2e14; */
		transition: 0.2s;
	} 
	
	#revenge_trip .cate:hover{
		color: #2d5c98;
		background-color: #fff;
	} 
	
	#revenge_trip .cate::after{
		position: absolute;
		right: 12%;
		top:50%;
		transform: translate(50%,-50%);
		font-family:'Material Icons';
		content: "\e5cc";
	} 
	
	/*-----------------------------------------------
	section bottom
	-----------------------------------------------*/
	#revenge_trip .bottom{
		width: 100%;
		background-color: #294d7a;
		margin: 0 auto;
		padding: 2% 0;
		text-align: center;
		color: #fff;
		font-size: 18px;
		
	}
	
	#revenge_trip .bottom a{
		color: #fff;
		font-size: 18px;
		letter-spacing: 3px;
		transition: 0.2s;
	}
	
	#revenge_trip .bottom a:hover{
		opacity: 0.6;
	}