@charset "utf-8";
/*
* ★★CSS for smartphone
*
* @date 2017.08.07
* @gyy
*/

/* ------------------------------------------

------------------------------------------ */
.pc {
	display: none;
}
#widewrapper {
	width: 100%;
}
#contents.column1 {
	background: #fff;
	padding: 0;
	width: 100%;
}
#keyVisual {
	overflow: hidden;
	margin: 0;
	width: 100%;
	position: relative;
	/* background: url(https://img.travel.rakuten.co.jp/kaigai_package/special/barcelona/images/top_bg_2020.jpg) top center no-repeat; */
	background-size: cover;
	height: auto;
}
#keyVisual h1 {
	overflow: hidden;
	width: 100%;
	position: relative;
	z-index: 100;
}
.atten {
	background: #0f2a56;
	font-size: 12px;
	color: #a3b7d9;
	padding: 10px;
	position: relative;
	z-index: 100;
}
#keyVisual h1 img {
	margin:0;
	width: 100%;
}
/* navi */
.navibox {
	/* height: 105px; */
}
.navi {
	/* width: 100%;
	overflow: hidden; */
	box-shadow: -2px 3px 6px #000;z-index:100;
}
.navi ul {
	overflow: hidden;
}
.navi li {
	float: left;
	width: 50%;
}
.navi li img{display: none;}
#contentsArea .navi li a {
	color: #fff;
	display: block;
	font-size: 16px;
	font-weight: bold;
	text-align: center;
	padding: 10px 0;
	border-bottom: 1px solid #981736;
	background: #72142e;
	white-space: nowrap;
}
#contentsArea .navi li:nth-child(even) a {
	border-left: 1px solid #981736;
}
/*#contentsArea .navi li:last-child {
	width: 100%;
}*/
#contentsArea .navi li:last-child a {
	background: #981736;
}
#contentsArea .navi li a:hover {
	color: #fff;
	text-decoration: none;
	opacity: 0.8;
}
/* special */
.special {
	background: linear-gradient(45deg, #72142e 0, #131e32 55%);
}
.special img {
	display: block;
	padding: 20px 0;
	margin: 0 auto;
	width: 80%;
	max-width: 458px;
}
/* bg */
.w100 {
	width: 100%;
}
.bg1 {
	background: url(https://img.travel.rakuten.co.jp/kaigai_package/special/barcelona/images/bg1.jpg) center center no-repeat;
	background-size: cover;
	overflow: hidden;
}
.ttl img {
	display: block;
	margin: 20px auto;
	width: 80%;
	max-width: 270px;
}
.plan_box {
	width: 90%;
	border-radius: 0 0 5px 5px;
	background: #fff;
	padding: 15px;
	box-sizing: border-box;
	display: block;
	margin: 0 auto;
}
.img1_1 {
	border-radius: 5px 5px 0 0;
	width: 90%;
	display: block;
	margin: 0 auto;
}
.plan_box h3 {
	font-size: 24px;
	margin-bottom: 15px;
}
.plan_box .finish {
	margin-bottom: 5px;
	color: #981736;
	font-weight: bold;
}
.plan_box p {
	font-size: 14px;
	color: #111;
	line-height: 1.4;
}
.plan_box p span {
	color: #981736;
	font-size: 18px;
	display: block;
}
.plan_box p span em {
	font-size: 26px;
	font-style: normal;
}
.right {
	text-align: right;
}

#contentsArea .plan_box a {
	display: block;
	color: #fff;
	font-size: 18px;
	text-align: center;
	width: 90%;
	padding: 15px 5px;
	margin: 20px auto;
	background: linear-gradient(0deg, #72142e, #971736);
	border-radius: 5px;
	white-space: nowrap;
	box-sizing: border-box;
}
#contentsArea .plan_box a:hover {
	color: #fff;
	text-decoration: none;
	opacity: 0.7;
}
.note_txt {
	font-size: 12px;
	color: #fff;
	margin: 10px auto;
	width: 90%;
	line-height: 1.4;
}
/* tokuten */
.bg2 {
	background: url(https://img.travel.rakuten.co.jp/kaigai_package/special/barcelona/images/bg2.jpg) top center no-repeat;
	background-size: cover;
	overflow: hidden;
	background-attachment: fixed;
	padding-bottom: 20px;
}
.tokuten li {
	background: #fff;
	margin: 0 auto 20px;
	width: 90%;
	display: block;
}
.tokuten li img {
	width: 100%;
}
.tokuten li div {
	box-sizing: border-box;
	padding: 20px;
}
.tokuten li div h3 {
	margin-bottom: 20px;
}
.tokuten li div p {
	font-size: 16px;
	line-height: 1.4;
}
/* daikin */
.bg3 {
	background: #fff;
	overflow: hidden;
	padding-bottom: 20px;
}
.bg3 table {
	display: block;
	margin: 0 auto 20px;
	width: 100%;
}
.bg3 table tr td {
	background: rgba(245, 240, 227, 0.8);
	padding: 5px 3px;
	font-size: 13px;
	font-weight: bold;
	border: 1px solid #576d7e;
}
.bg3 .table1 tr td {
	text-align: right;
}
.bg3 .table1 tr:nth-child(1) td,
.bg3 .table2 tr:nth-child(1) td,
.bg3 .table3 tr:nth-child(1) td {
	background: rgba(15,42,86,1);
	text-align: center;
	color: #fff;
	font-weight: bold;
	font-size: 14px;
}
.bg3 table tr td.date {
	text-align: center;
}
.bg3 table tr td.tl {
	text-align: left;
}
#PART4 {
	padding-bottom: 50px;
}
#PART4 p,
.terms_white p {
	font-size: 14px;
	line-height: 1.4;
	color: #000;
	padding: 0 15px;
}
#PART5 p{font-size: 14px;
	line-height: 1.4;
	color: #fff;
	}
#PART5 p.box950 { padding: 0 10px; line-height: 150%; text-align: left;}
#modal-content {
	width: 50%;
	margin: 1.5em auto 0;
	padding: 10px 20px;
	border: 2px solid #aaa;
	background: #fff;
	z-index: 2;
}
.modal-p {
	margin-top: 1em;
}
.modal-p:first-child {
	margin-top: 0;
}
.button-link {
	color: #00f;
	text-decoration: underline;
}
.button-link:hover {
	cursor: pointer;
	color: #f00;
}
#PART4 .modal-content p {
	color: #000;
	font-size: 10px;
}
#contentsArea #PART4 a {
	color: #fff;
}
#PART5 {
	padding: 30px 0;
	background: #0f2a56;
}
#PART5 h2 {
	font-size: 22px;
	text-align: center;
	color: #fff;
	margin-bottom: 15px;
}
#PART5 .tel a {
	text-align: center;
	color: #d19a13;
	font-size: 36px;
	margin-bottom: 15px;
	margin: auto 0px;
}
#PART5 .tel {
	width: 100%;
}
#PART5 p {
	text-align: center;
}
#PART5 p span {
	display: block;
	font-size: 12px;
	color: #ccc;
}
.text_s {
	font-size: 70%;
	color: #000;
}
#PART5 .box950 a:link:hover,
#PART5 .box950 a:link,
#PART5 .box950 a:visited {
	color: #ffffff;
}
.bnr_ad {
	text-align: center;
	margin: 10px 0px;
}
.bnr_ad img {
	width: 100%;
}
.mt20 {
	margin-top: 20px;
}
/* 2017.10.10 teri */
.chara {
	margin: 0;
	padding: 0;
	height: auto;
}
.chara li {
	display: block;
	width:auto;
	float: left;
	padding: 5px 10px;
	border-radius: 20px;
	background: #700D2D;
	font-size: 62%;
	color: #ffffff;
	text-align: center;
	margin: 0 5px 10px 0;
}
.repoBox {
	border: 1px solid #cccccc;
	margin: 10px;
	background: #fbf1d1 !important;
	position: relative;
	text-align: center;
	overflow: visible !important;
}
.repoBox .repoTitle {
	width: 196px;
	height: 77px;
	position: absolute;
	top: -10px;
	left: -10px;
}
.subTitle {
	padding: 70px 10px 20px 10px;
	font-size: 92%;
	color: #72142e;
	text-align: left;
}
.repoBox ul li {
	width: 270px;
	margin: 0 auto 10px;
	background: #fbf1d1 !important;
}
.repoBox ul li img {
	font-size: 0;
	line-height: 0;
	padding-bottom: 5px;
}
.repoBox ul li span {
	font-size: 78%;
	line-height: 160%;
	padding-bottom: 20px;
	text-align: left !important;
	display: block;
}
.table1 .date {
	background: #72142e !important;
	color: #ffffff;
}
.table1 td {
	text-align: center !important;
white-space: nowrap;　
}


.table1 td {text-align: center !important;}
.table2 .date {
	background: #72142e !important;
	color: #ffffff;
	text-align: center !important;
}

.table2 td {text-align:right;}
.table2 .lt {text-align:left !important;}
.table2 .ce {text-align:center !important;}
.c_red{color:#CC0000;}
.c_blue{color:#0000CC;}
.bg3 table tr td.bg_y{background:#FF0;}
.bg_blue{background:#0f2a56 !important; color:#ffffff;}

.class {
	margin: 0 auto;
	font-size: 120%;
	font-weight: bold;
	color: #000;
	padding: 10px 0;
}

.class {
	margin:10px;
	font-size: 120%;
	font-weight: bold;
	color: #000;
}

.class span {
	font-size: 80%;
	font-weight: normal;
}



.table_wrap{
width:100%;
}
.table1,.table2{
width:100%;
overflow: auto;　　　　/*tableをスクロールさせる*/
white-space: nowrap;　　/*tableのセル内にある文字の折り返しを禁止*/
}
.table_wrap::-webkit-scrollbar{　　/*tableにスクロールバーを追加*/
 height: 5px;
}
.table_wrap::-webkit-scrollbar-track{　　/*tableにスクロールバーを追加*/
 background: #F1F1F1;
}
.table_wrap::-webkit-scrollbar-thumb {　　/*tableにスクロールバーを追加*/
 background: #BCBCBC;
}

.table_wrap::-webkit-scrollbar {
height: 8px; /* スクロールバーの高さ */
}
.table_wrap::-webkit-scrollbar-thumb {
background: #aaa; /* スクロールバーの色 */
}
.table_wrap::-webkit-scrollbar-track {
background: #ccc; /* スクロールバーの背景色 */
}


/* 1130 */
.pbox{ background:#bf0000; color:#fff; overflow:hidden; position:relative;}
.pbox .pr{ font-size:13px; padding:8px 15px 0;}
.pbox .pr b{ display:block;font-size:14px; padding-bottom:5px; text-align:center;}
.pbox .pr b small{ display:block; font-size:13px;}
.pbox .pbtn{ margin:10px 20px; background:#fff; border-radius:50px;}
.pbox .pbtn a{ display:block; background:#fff; color:#bf0000 !important; border-radius:50px; font-size:13px; font-weight:bold; padding:5px 0; text-align:center;}
.pbox .pbtn a:hover{ opacity:.7; text-decoration:none !important;}
.pbox .pbtn a span{ display:inline-block; font-size:20px; vertical-align:-2px;}
.pbox .photo{ display:none; position:absolute; right:0; top:0; width:25%; padding:10px; box-sizing:border-box; max-width:100px;}
.pbox .photo img{ width:100%;}

#PST.w100{ background:#0b1326;overflow:hidden;}
#PST .box950{ margin:20px; padding:20px; box-sizing:border-box; background:#bf0000;}
#PST .psttop{ overflow:hidden;}
#PST .psttop dt{ text-align:center;}
#PST .psttop dt img{ width:100%; max-width:430px;}
#PST .psttop dd{ margin-top:10px;color:#fff;}
#PST .psttop .pname{font-size:20px; font-weight:bold; text-align:center;}
#PST .psttop .pr{font-size:13px;}
#PST .psttop .photo{ text-align:center;}


.cp__acordion{ margin:10px 0 0;}
.cp__acordion p{ overflow:hidden; clear:both; background:#ccc;color:#333;padding:10px 10px 10px 40px;cursor: pointer; position: relative; font-size:15px;}
.cp__acordion p:after{ background-image:url(../images/sprite-small.png);background-repeat: no-repeat;background-position: -207px -5px; position:absolute;  height: 20px;left: 10px;margin-top: -10px;width: 20px;top: 50%;margin-top: -10px; content:"";}
.cp__acordion .cp__trigger.active-submenu::after{background-position: -199px -109px}
.cp__acordion dl{ border:1px solid #ccc; padding:20px; background:#fff;}
.cp__acordion dl dt{padding-bottom: 10px; font-weight: bold;}
.cp__acordion dl dd{ padding-bottom:15px; line-height:1.7; font-size:14px;}
.cp__acordion dl dd b{ font-size:15px;}
.cp__acordion dl dd a{ color:#00F !important; text-decoration:underline !important;}
.cp__acordion dl dd a:hover{ text-decoration:none !important;}


#PART5 .mail a {
	text-align: center;
	color: #d19a13;
	font-size: 15px;
	margin-bottom: 15px;
	margin: auto 0px;
}
#PART5 .mail a:hover {
	text-decoration: none;
	color: #d19a13;
}


/* 1219 */

.p2box1 { width: 90%; margin: auto; background: #ffffff;} 
.p2box1 dl { padding: 20px 20px 0px 20px; }
.p2box1 dl dt img { width: 100%; display: block; margin-bottom: 20px;}
.p2box1 dl dd {font-size: 16px; line-height: 1.4; }
.p2box1 p { padding: 0 20px 20px 20px; }
.p2box1 p img { width: 100%; display: block;}



/*0316天本*/
h2#PART10 {
    font-size: 22px;
    text-align: center;
    color: #fff;
    margin-bottom: 20px;
    margin-top: 20px;
}

html,
body {
	width: 100%;
	overflow-x: hidden;
}
.pagetop {
	position: fixed;
	right: 20px;
	bottom: 20px;
	width: 45px;
	height: 45px;
	line-height: 45px;
	background-color: #72142e;
	text-align: center;
}
.pagetop a {
	display: block;
	color: #fff;
}
.pagetop a:hover {
	text-decoration: none;
}
#PART3 dl {
	text-align: center;
	color: #fff;
}
.foldBar {
	position: relative;
	text-indent: 40px;
	font-weight: normal;
	background-color: rgba(15,42,86,1);
	border-radius: 5px;
	cursor: pointer;
	padding: 5px 0;
}
.foldBar em {
	position: absolute;
	left: 8px;
	top: 5px;
	width: 26px;
	height: 26px;
	text-indent: 0;
	line-height: 26px;
	text-align: center;
	border-radius: 50%;
	background:#72142e url(https://img.travel.rakuten.co.jp/kaigai_package/special/barcelona/images/plus.png) no-repeat center center/50% 50%;
}


/*0517*/

.topcp{
    padding: 20px; text-align: center; color: #ffc217;font-size: 148%;
    background-image:linear-gradient(45deg, #6d152e, #131e32);}

.subttl{ font-size: 88%;text-align: center;line-height: 1.5;}
.sppresent{background: #0f2a57; width:90%; margin: 3% auto; padding: 3%;}
.sppresent dt{text-align: center;}
.sppresent dd{color: #fff; font-size:128%;line-height: 1.4;}

.sppresent dd.entrybtn{text-align: center; margin-top: 3%;}
.sppresent dd.entrybtn a{background: #950d35; border: 5px;padding: 5%;display: block; color: #fff !important;position: relative;}
.sppresent dd.entrybtn a:before{content: "▼";
    display: block;position: absolute; top: 22%; left: 8%;
    transform:rotate(-90deg);
-ms-transform:rotate(-90deg); 	/* IE 9 */
-moz-transform:rotate(-90deg); 	/* Firefox */
-webkit-transform:rotate(-90deg); /* Safari 和 Chrome */
-o-transform:rotate(-90deg);}
.sppresent dd.entrybtn a:hover{opacity: 0.8 !important; text-decoration: none !important;}

p.moredtl{text-align:left;font-size: 98%; width: 94%; margin: 5% auto 0;}
p.moredtl a{display: block; font-size: 128%; color: #0f2a57 !important; text-decoration: underline !important; text-align: center; padding-bottom: 10px; opacity: 0.8 !important;}
p.moredtl img{display: block;margin: 10px auto; width: 94%;}



.jdsCoponSwitch{background: #920e36; font-size: 98%; margin: 20px auto; width: 90%; text-align: center;color: #fff; padding: 5%;position: relative;}
.jdsCoponSwitch.grey{background: #555;}
.jdsCoponSwitch:before{content:"▼"; position: absolute; left: 1%; top: 37%;}
.jdsCoponSwitch:after{content:"▼";position: absolute; right: 1%; top: 37%;}
.jdsCoponSwitch.active-submenu:before{content:"▲";position: absolute; left: 1%; top: 37%;}
.jdsCoponSwitch.active-submenu:after{content:"▲";position: absolute; right: 1%; top: 37%;}


.spcp{width: 88%; margin: 0 auto; border: 1px solid #920e36;padding: 5%; font-size: 78%; line-height: 1.8; background: #fff;}
.spcp dl dt{font-weight: bold;color: #920e36;}
.spcp dl dd.tourdtl{padding: 20px;}
.spcp dl dd.tourdtl span{font-weight: bold;display: block;}


.bg4 {
	background: url(https://img.travel.rakuten.co.jp/kaigai_package/special/barcelona/images/bg4.jpg) top center no-repeat;
	background-size: cover;
	overflow: hidden;
	padding-bottom: 20px;
	background-attachment: fixed;
}
.bg5 {
	background: url(https://img.travel.rakuten.co.jp/kaigai_package/special/barcelona/images/bg5.jpg) top center no-repeat;
	background-size: cover;
	overflow: hidden;
	padding-bottom: 20px;
	background-attachment: fixed;
}

h2.ttl100 img { width: 92%; max-width:520px; }
.pc {display: none}
h2.ttl100 img.pc { display: none;}
.sp { display: block;}

.Pa { 	background: url(https://img.travel.rakuten.co.jp/kaigai_package/special/barcelona/images/bg2.jpg) top center no-repeat; padding: 15px 0 2px 0; background-size: cover;}
.Pa .ttl1 img ,.Pa .ttl2 img,.bgWhite .ttl2 img,.bgWhite .ttl1 img { max-width:100%;}
.Pa .ttl1,.bgWhite .ttl1{ text-align: center; padding:30px 4px 0;}
.Pa .ttl2,.bgWhite .ttl2{ text-align: center; padding: 50px 0;}
.bgWhite{background: #f6f5f1;}
.bgWhite .koe{padding: 15px 0 2px 0;}

.koebox{ margin:0 10px; }

.txtbox{padding:15px 10px; margin-top:20px; background:#fff; overflow:hidden;/*border: 1px solid #6e1127;*/}
.txtbox dt{ font-size:22px; font-weight:bold; color:#004a99; margin-bottom:20px;}
.txtbox dd{ font-size:16px; line-height:1.4;}

.headbox{ margin-top:20px; overflow:hidden;}
.headbox .htxt{ width:65%; padding:15px 2%; background:#fff; border-radius:10px; float:left; position:relative;/*border: 1px solid #6e1127;*/}
.headbox .htxt:after{ content:""; position:absolute; right:-10px; top:50%; margin-top:-10px; transform:rotate(45deg); width:20px; height:20px; background:#fff;/*border-right: 1px solid #6e1127;border-top: 1px solid #6e1127;*/}
.headbox .hage{ width:65%; font-size:16px; float:left; text-align:right; margin-top:15px;}
.headbox .himg{ float:right; width:28%; line-height:1.4; text-align:right;}
.headbox .himg img{ width:100%; max-width:130px;}

/* 0704 gyy */
.subttl .red{color: #950d35;}
.thesale{padding: 30px 0 20px;}

.video_box{width: 94%; margin: 3% auto;}
.video_box video { width: 100%; height: auto; display: block; padding: 0; margin:auto;}

.jdsTabNav{width:96%; margin: 10px auto;overflow: hidden;}
.jdsTabNav li{float: left;font-size:88%;width: 32.5%;  height: auto;margin-right: 1%; color: #fff; font-weight: bold;text-align: center;position: relative;padding-bottom: 3%;}
.jdsTabNav li span{background: #691126; display: block;width:96%;padding: 5% 2%; border-radius: 5px 5px 0 0;}
.jdsTabNav li:last-child{margin-right: 0;}
.jdsTabNav li img{display: none;}
.jdsTabNav li.here span{background: #981736;}
.jdsTabNav li.here:after{content: "▼"; position: absolute; left: 44%; bottom: 0; color: #981736;width: 3%;}
.jdsTabNav li em{display: block; font-weight: normal; font-size: 78%;}

.tel img{ width: 90%;}

.class span.hot{background: url(https://img.travel.rakuten.co.jp/kaigai_package/special/barcelona/images/hot.png) no-repeat left;padding-left: 35px; font-weight: bold; font-size: 14px; margin-left: 5px;display: block;}
.bg3 table td.hot{background: url(https://img.travel.rakuten.co.jp/kaigai_package/special/barcelona/images/hot.png) no-repeat 6% center rgba(245, 240, 227, 0.8) !important;padding-left: 42px; font-weight: bold; font-size: 14px; margin-left: 5px;}

.class span.hot2{background: url(https://img.travel.rakuten.co.jp/kaigai_package/special/barcelona/images/hot2.png) no-repeat left;padding-left: 35px; font-weight: bold; font-size: 14px; margin-left: 5px;display: block;}
.bg3 table td.hot2{background: url(https://img.travel.rakuten.co.jp/kaigai_package/special/barcelona/images/hot2.png) no-repeat 6% center rgba(245, 240, 227, 0.8) !important;padding-left: 42px; font-weight: bold; font-size: 14px; margin-left: 5px;}

/* navi 3 */

#contentsArea .navi li:last-child a {background: #72142e;} 

#PART3{
	display: none;
}


#PART6{
	background-color: #72142e
}

#PART6 .ttl img.pc {
    display: none;


}
#PART6 .ttl img {
    display: block;
    margin: 0 auto;
}

#PART6 .tour2020 {
	
	display: block;
	
	overflow: hidden;
	text-align: center;
	background: #72142e;
padding: 20px 0 30px;
}


#PART6 .tour2020 p{
	font-size: 16px;
color: #111;
line-height: 1.6;
	font-size:90%;
	margin: 0 auto;
	text-align: left;
   padding: 20px;
	background-color: #fff;
	width:80%;
	
}

#PART6 .tour2020 p span{
	font-size:80%;}

#PART6 .ttl{
	padding-top:20px;
}

#PART6 img{
	width:88%;
	height:88%;
}

#PART6 .tour2020 p.book{
	font-size: 20px!important;
color: #111;
line-height: 1.6;
	font-size:90%;
	margin: 0 auto 20px;
	text-align: center;
	width:80%;
	font-weight:bold;
	text-decoration: underline 2px solid;
}
#PART6 .logo{
	width:15%;
    height:15%;
	vertical-align: middle;
}