@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;
}

/*=======================================共通=======================================*/
body *{
    font-family:'Noto Sans JP','Yu Gothic black',sans-serif,'Lato','メイリオ';
    font-size: 4vw;
    letter-spacing:0;
    font-weight: normal;
    box-sizing: border-box;
}

#revenge_trip img{
    width: 100%;
}

#revenge_trip {
    background-color: #fff;
}

#revenge_trip .smp_none {
    display: none;
} 

/*見出し
================================ */
#revenge_trip h1{
    text-align: center;
    font-size: 5vw;
    padding: 3.5vw 0;
    font-weight: bold;
    color: #fff;
} 

/* 共通 カラム
================================ */
#revenge_trip ul[class^="col_"]{
    display: flex;
    flex-wrap: wrap;
    gap:1.2vw 1.2vw;
}

#revenge_trip ul.col_1 > li{
    width:100%;
    margin-bottom: 1.2vw;
}

#revenge_trip ul.col_2 > li,
#revenge_trip ul.col_4 > li{
    width: calc(calc(100% - 1.2vw) / 2);
}

#revenge_trip ul.col_3 > li,
#revenge_trip ul.col_5 > li{
    width: calc(calc(100% - calc(1.2vw * 2)) / 3);
}






/*=======================================
section title 看板
=======================================*/
#revenge_trip .title {
    background-color: #fff;
}

/*=======================================
section side_anchor_link ハンバーガーメニュー
=======================================*/
#revenge_trip .toggle {
    position: fixed;
    z-index: 9999;
    bottom: 17vw;
    right: 2vw;
    width: 14vw;
    height: 14vw;
    background-color: #27547f;
    border: solid 0.5vw #fff;
    border-radius: 50%;
    display: block;
} 

#revenge_trip .toggle span {
    display: inline-block;
    transition: all .4s;
    position: absolute;
    left: 50%;
    width: 50%;
    height: 0.8vw;
    border-radius: 50px;
    background-color: #fff;
    transform: translate(-50%, -50%);
} 
    
#revenge_trip .toggle span:nth-of-type(1) { top: calc(50% - 2.2vw)}
#revenge_trip .toggle span:nth-of-type(2) { top: calc(50%);}
#revenge_trip .toggle span:nth-of-type(3) { top: calc(50% + 2vw);}
#revenge_trip .toggle.active span:nth-of-type(1) {
    top: calc(100%/2);
    transform: translate(-50%,-50%)   rotate(-45deg);
} 
#revenge_trip .toggle.active span:nth-of-type(2) { opacity: 0; }
#revenge_trip .toggle.active span:nth-of-type(3){
    top: calc(100%/2);
    transform: translate(-50%,-50%)  rotate(45deg);;
} 


#revenge_trip .side_anchor_link{/*メニュー*/
    position: fixed;
    bottom: -200%;
    right: 0;
    z-index: 99;
    width: 56%;
    transition: 0.6s;
} 

#revenge_trip .side_anchor_link.panelactive{/*メニュー*/
    bottom: 0;
} 


#revenge_trip .side_anchor_link ul{
    background-color: rgba(255, 255, 255, 0.95);
    border-right: solid 35px #27547f;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
} 

#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:2vw 0;
} 

#revenge_trip .side_anchor_link ul li a{
    display: flex;
    justify-content: center;
    padding: 5%;
    font-size: 4vw;
    transition: 0.2s;
} 

#revenge_trip .side_anchor_link ul li a:hover{
    background-color: #8cc5d4;
    color: #fff;
} 

/*=======================================
section anchor_link アンカーリンク
=======================================*/
#revenge_trip .anchor_link{
    padding: 2vw 0;
    background-color: #fff;
}

#revenge_trip .anchor_link ul{
    justify-content: center;
    gap:1.5vw 0;
}

#revenge_trip .anchor_link ul li a{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 0.2vw 0.2vw;
    font-size: 3.8vw;
    font-weight: bold;
    color: #365f94;
    height: 20vw;
} 

#revenge_trip .anchor_link ul li{
    border-right: solid 0.5vw #365f94;
}

#revenge_trip .anchor_link ul li:nth-child(3),
#revenge_trip .anchor_link ul li:last-child{
    border-right: 0vw;
} 

#revenge_trip .anchor_link ul li a::before{
    font-family: 'FontAwesome';
    font-size: 9vw;
}

#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";
    font-size: 8vw;
} 

#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: 96%;
	margin: 1vw auto;
}

#revenge_trip .item_block{
    background-color: #385d8c;
    padding: 2vw 0;
} 

/*商品カラム
================*/
#revenge_trip .item_block .item{
    padding: 2%;
} 

#revenge_trip .item_block .item li{
    width: 100%;
    padding: 2%;
    background-color: #fff;
	position: relative;
} 

#revenge_trip .item_block .item li .camp_icon{
	position: absolute;
	width: 18vw;
	left: 0%;
	top: 0%;
	z-index: 1;
}

#revenge_trip .item_block .item li a{
    display: flex;
    align-items: center;
} 

#revenge_trip .item_block .item .thumb{/*サムネ*/
    width: 49%;
} 


#revenge_trip .item_block .item  dl{
    width: 48%;
    margin: 0 0 0 3%;
}  

#revenge_trip .item_block .item  dl dt{/*商品名*/
    font-size: 4vw;
    text-align: center;
    font-weight: bolder;
    line-height: 5vw;
} 

#revenge_trip .item_block .item dl dd.icon ul{/*訴求アイコン リセット*/
    margin: 2vw 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1.2vw 1.2vw;
} 

#revenge_trip .item_block .item dl dd.icon ul li{/*訴求アイコン*/
    border: solid 0.3vw #a1a1a1;
    border-radius: 1.2vw;
    width: auto;
    padding: 1vw 1.5vw;
    font-weight: 500;
    font-size: 3.5vw;
    letter-spacing: 0;
} 


#revenge_trip .item_block .item  dl dd.point{/*ポイント*/
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 3% 0 3% 0;
    padding: 2% 0;
    font-size: 3.5vw;
    background-color: #8b001a;
    color: #fff65f;
    font-weight: bold;
    text-align: center;
} 

/*価格
====================*/
#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: baseline;
}

#revenge_trip .item_block .price_block .value{
    font-family: 'Lato';
    font-weight: bolder;
    letter-spacing: 0px;
	font-size: 6vw;
}

#revenge_trip .item_block .price_block span{
	font-family: 'Noto Sans JP';
	font-size: 4vw;
	letter-spacing: 0px;
	font-weight: bolder;
	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: 6vw;
}


#revenge_trip .item_block .item  dl dd.price_nomal{/*通常価格*/
    font-family: 'Lato';
    text-align: center;
    font-size: 3.5vw;
    color: #8c8c8c;
    text-decoration: line-through;
} 


#revenge_trip .item_block .item  dl .btn{/*ご購入はこちら*/
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1.2vw 0;
    border-radius: 50px;
    color: #fff;
    font-size: 3.5vw;
    background-color: #282828;
    height: 9vw;
} 

#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: 98%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1.2vw auto;
    border-radius: 50px;
    color: #2d5c98;
    font-size: 4.5vw;
    font-weight: bold;
    background-color: #fbff4c;
    /* border:solid 1.2vw #8f2e14; */
    height: 15vw;
} 

#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{
    background-color: #294d7a;
    text-align: center;
    color: #fff;
    font-size: 4.5vw;
    padding: 7vw 0 3vw 0;
    font-weight: normal;
}

#revenge_trip .bottom a{
    color: #fff;
    font-size: 4.5vw;
    letter-spacing: 1px;
    font-weight: normal;
}

/*-----------------------------------------------
id2 
-----------------------------------------------*/


#revenge_trip ul.sp_col2 > li{
	width: calc(calc(100% - 2%) / 2)!important;
}

/*商品カラム
================*/

#revenge_trip .item_block ul.sp_col2 li a{
	display: block;
}

#revenge_trip .item_block ul.sp_col2 .thumb {
        width: 100%;
}

#revenge_trip .item_block ul.sp_col2 dl {
        width: 100%;
        margin: 0 0 0 3%;
    }