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

File name:      common.css
Created:        2018-12-28
Style Info:     鉄道の旅　CSS
----------------------------------------------------------- */
/* common */


.clearfix:after { content: " "; display: block; clear: both; }
.rail-europe{ overflow: hidden; line-height: 200%; text-align: left;}
.rail-europe a { color: #000; }
.rail-europe a:hover { opacity: .75; text-decoration: none; }
.rail-europe ul, .rail-europe ol, .rail-europe li { list-style: none; margin: 0; padding: 0; }
.rail-europe .fl { float: left; display: inline; }
.rail-europe .fr { float: right; display: inline; }
.rail-europe p, .rail-europe li, .rail-europe dt, .rail-europe dd { font-size: 16px; line-height: 200%; color: #000000; }
.rail-europe .container {max-width: 1000px; width: 100%; margin: 0 auto; padding: 0;}
.rail-europe img {width: 100%;}
.rail-europe h2, .rail-europe h3, .rail-europe h4, .rail-europe h5, .rail-europe h6 { padding: 0; margin: 0; }
.rail-europe .dis_sp ,
.rail-europe .dis_ssp { display: none; }

.rail-europe .co_pink {color: #fa625a; font-weight: bold;}


.rail-europe .fs_23 {font-size: 23px;}
.rail-europe .fs_20 {font-size: 20px;}
.rail-europe .fs_18 {font-size: 18px;}

.rail-europe #bl_route ,
.rail-europe #bl_point ,
.rail-europe #bl_menu {background: #f6f4ee; }
.rail-europe #bl_point ,
.rail-europe #bl_menu { padding-top: 80px;}

.rail-europe .bl_wrap {padding-bottom:  70px;}



@media (max-width:1030px) {
  .rail-europe .container {padding: 0 15px; width: 100%;}
  .rail-europe .dis_pc { display: none;}
  .rail-europe .dis_sp { display: block; }

}

@media screen and (max-width:640px) {
  .rail-europe a:hover ,
  .rail-europe a:active {opacity: 1;}
  .rail-europe img { width: 100%; height: auto; }
  .rail-europe .fl,  .rail-europe .fr { float: none; display: block;}
  .rail-europe p, .rail-europe li, .rail-europe dt, .rail-europe dd { font-size: 14px;}
  .rail-europe #bl_menu {background: #fff;}

}

@media (max-width:320px) {
  .rail-europe .hide_ssp {display: none;}
  .rail-europe .dis_ssp {display: block;}
  
}


/* -------------------------------------------------------- */
/* ページ　上部帯 */
/* -------------------------------------------------------- */

.rail-europe  .bl_page_navi {background: #005031; height: 60px; width: 100%; }
.rail-europe  .page_navi {width: 1140px; margin: 0 auto; position: relative; }
.rail-europe  .page_navi .page_logo {width: 210px; position: absolute; top: 10px; left: 50px; z-index: 10;}
.rail-europe  .page_navi ul {position: absolute; right: 0; top: 20px;}
.rail-europe  .page_navi li {float: left; padding: 0 10px; border-right: solid 1px #fff; line-height: 100%;}
.rail-europe  .page_navi li:last-child {padding-right: 0; border-right: none;}
.rail-europe  .page_navi li a {color: #fff; font-size: 12px; text-decoration: none; line-height: 100%;}

@media (max-width:1140px) {
  .rail-europe  .page_navi {width: 100%;}
  .rail-europe  .page_navi li:last-child {padding-right:10px;}
  .rail-europe  .page_navi .page_logo {width: 20%; left: 1%;}

}

@media (max-width:1030px) {
  .rail-europe  .bl_page_navi .dis_pc {display: block;}
  .rail-europe  .bl_page_navi .dis_sp {display: none;}
  .rail-europe  .page_navi .page_logo {width: 15%; left: 3%; top: 60px;}
}


@media (max-width:640px) {
  .rail-europe  .bl_page_navi .dis_sp {display: block;}
  .rail-europe  .bl_page_navi {height: 7.8125vw;}
  .rail-europe  .page_navi ul {display: none;}
  .rail-europe  .page_navi .page_logo {top: 1.5vw; left: 50%; transform: translate(-50%,0); width: 32.8125vw;}
  .rail-europe.sub .page_navi .page_logo {top: 2.34375vw; left: 4.6875vw; width: 28.125vw; transform: translate(0,0);}

  .rail-europe  .page_navi .btn_header_menu {position: absolute; right: 4.6875vw; top:0;}
  .rail-europe  .page_navi .btn_header_menu a {color: #fff; font-weight: bold; text-decoration: none; font-size: 4vw; line-height: 100%; display: block;}
  .rail-europe  .page_navi .btn_header_menu a span {display: inline-block; height: 100%; }
  .rail-europe  .page_navi .btn_header_menu a:before {content:"\f107"; font-family:FontAwesome; font-weight: bold; font-size: 6vw; display: inline-block;  padding: 1.5vw 1.5vw 0 0; }
}
@media (max-width:420px) {

}
/* -------------------------------------------------------- */
/* Visual */
/* -------------------------------------------------------- */

.rail-europe .bl_page_visual {background: #f6f4ee;}

.rail-europe .bl_contents_navi {background: #fff; height: 90px; }
.rail-europe .contents_navi {max-width: 1000px; margin: 0 auto; height: 100%;}
.rail-europe .contents_navi li {float: left; width: 20%; height: 100%;}
.rail-europe .contents_navi li a { font-size: 13px; display: block; width: 100%; height: 100%; position: relative; }
.rail-europe .contents_navi li:nth-child(1) a {background: url(../img/common/icon_route.png) no-repeat left center; background-size: 25%;}
.rail-europe.top .contents_navi li:nth-child(2) a {background: url(../img/common/icon_rec.png) no-repeat left center; background-size: 25%;}
.rail-europe.sub .contents_navi li:nth-child(2) a {background: url(../img/common/icon_train.png) no-repeat left center; background-size: 25%;}
.rail-europe .contents_navi li:nth-child(3) a {background: url(../img/common/icon_city.png) no-repeat left center; background-size: 25%;}
.rail-europe.top .contents_navi li:nth-child(4) a {background: url(../img/common/icon_train.png) no-repeat left center; background-size: 25%;}
.rail-europe.sub .contents_navi li:nth-child(4) a {background: url(../img/common/icon_tour.png) no-repeat left center; background-size: 25%;}
.rail-europe .contents_navi li:nth-child(5) a {background: url(../img/common/icon_point.png) no-repeat left center; background-size: 25%;}
.rail-europe .contents_navi li a .link_txt {position: absolute; left: 27%; top: 50%; transform: translate(0,-50%); text-decoration: underline;}

@media (max-width:1030px){
  .rail-europe .bl_contents_navi {padding: 10px 0 0; height: 100px;}
  .rail-europe .contents_navi li a { line-height:120%;}
  .rail-europe .contents_navi li:nth-child(1) a {background-position: top center; background-size: 70px;}
  .rail-europe.top .contents_navi li:nth-child(2) a {background-position: top center; background-size: 70px;}
  .rail-europe.sub .contents_navi li:nth-child(2) a {background-position: top center; background-size: 70px;}
  .rail-europe .contents_navi li:nth-child(3) a {background-position: top center; background-size: 70px;}
  .rail-europe.top .contents_navi li:nth-child(4) a {background-position: top center; background-size: 70px;}
  .rail-europe.sub .contents_navi li:nth-child(4) a {background-position: top center; background-size: 70px;}
  .rail-europe .contents_navi li:nth-child(5) a {background-position: top center; background-size: 70px;}
  .rail-europe .contents_navi li a .link_txt {position: static; padding-top:60px;transform: translate(0,0); display: block; width: 100%; text-align: center;}
}

@media (max-width:640px) {
  .rail-europe .bl_contents_navi {padding: 10px 0 0; height: 22vw;}
  .rail-europe .contents_navi li a { line-height:120%;}
  .rail-europe .contents_navi li:nth-child(1) a {background-size: 10.9375vw;}
  .rail-europe.top .contents_navi li:nth-child(2) a {background-size: 10.9375vw;}
  .rail-europe.sub .contents_navi li:nth-child(2) a {background-size: 10.9375vw;}
  .rail-europe .contents_navi li:nth-child(3) a {background-size: 10.9375vw;}
  .rail-europe.top .contents_navi li:nth-child(4) a {background-size: 10.9375vw;}
  .rail-europe.sub .contents_navi li:nth-child(4) a {background-size: 10.9375vw;}
  .rail-europe .contents_navi li:nth-child(5) a {background-size: 10.9375vw;}
  .rail-europe .contents_navi li a .link_txt {padding-top:10vw; font-size: 2.5vw;}
}




/* -------------------------------------------------------- */
/* 見出し */
/* -------------------------------------------------------- */

.rail-europe .tit_ty_01 {width: 400px; margin: 0 auto}
.rail-europe .tit_ty_02 {font-size: 23px; color: #00501e; font-weight: bold; text-align: center; margin-bottom: 40px;}
.rail-europe .tit_ty_03 {font-size: 18px; color: #00501e; font-weight: bold; margin-bottom: 20px;}

.rail-europe .bl_tour_list .tit_ty_01 .container {position: relative; height: 100%; padding-top: 30px;}
.rail-europe .bl_tour_list .bl_btn{text-align: center;top: 690px; left: 50%; margin: 20px auto 0 ; width:580px; height: 88px; }
.rail-europe .bl_tour_list .bl_btn a{background: url(../img/visual_btn.png) no-repeat; background-size: 100%; display: table; width: 100%; height: 100%; text-decoration: none;}
.rail-europe .bl_tour_list .bl_btn a span {font-size: 24px; font-weight: bold; display: table-cell; vertical-align: middle;}

@media (max-width:1030px){
  .rail-europe .tit_ty_01 {width: 100%; max-width: 640px; }
	.rail-europe .bl_tour_list .bl_btn{top:auto; bottom: 0; max-width: 580px; max-height:88px; width: 90.625vw; height: 13.75vw;}
}

@media (max-width:767px){
  
}
@media (max-width:640px){
  .rail-europe .bl_tour_list .bl_btn a span{font-size: 3.75vw;}
  .rail-europe .tit_ty_01 {max-width: 640px; width: 100%; margin: 0 auto}
  .rail-europe .tit_ty_02 {font-size: 20px; margin-bottom: 40px; line-height: 120%;}
  .rail-europe .tit_ty_03 {font-size: 16px; margin-bottom: 20px; line-height: 120%;}
}

/* -------------------------------------------------------- */
/* リンクボタン */
/* -------------------------------------------------------- */



.rail-europe .link_btn a {display:block; position:relative;color:#fff;text-align:center;font-weight:bold; background:#aa8a45;border-radius:8px;text-decoration:none;font-size:20px; height:70px;}
.rail-europe .link_btn a span {display: block; width: 100%; padding-right: 30px; position: absolute; top: 50%; transform: translate(0,-50%);}
.rail-europe .link_btn a:after {content:"\f054";font-family:FontAwesome;font-size:1.8rem;position:absolute;top:50%;right:20px;font-weight:normal; transform: translate(0,-50%);}

.rail-europe .link_btn_down a  {display:block; position:relative;color:#fff;text-align:center;font-weight:bold; background:#aa8a45;text-decoration:none;font-size:20px; height:70px; line-height: 70px; }
.rail-europe .link_btn_down a span {display: block; width: 100%; height: 100%; padding-right: 30px;}
.rail-europe .link_btn_down a:after {content:"\f107";font-family:FontAwesome;font-size:24px;;position:absolute;top:0;right:0px;font-weight:bold; width: 30px; text-align: center; background: #917537; display: block; height: 100%;}

@media (max-width:1030px){
  .rail-europe .link_btn a .dis_sp {display: none;}
}

@media (min-width:768px) {
	.rail-europe .link_btn a:hover {opacity:.65;}
}
@media (max-width:767px) {
  .rail-europe {padding-bottom: 10vw;}
	.rail-europe .link_btn a { vertical-align: middle;font-size:1.4rem;width: 100%; height: 60px; line-height: 1.4;}
  .rail-europe .link_btn a:after {top: 50%; transform: translate(0,-50%); font-size: 1.2rem;}
  
  .rail-europe .link_btn_down a  {font-size:14px; height:50px; line-height: 120%; }
  .rail-europe .link_btn_down a span {display: block; width: 100%; height: auto;position: absolute; top: 50%; transform: translate(0,-50%) ;}
  .rail-europe .link_btn_down a:after {line-height: 50px;}

  .rail-europe .link_btn a .dis_sp {display: block;}

  
}


/* -------------------------------------------------------- */
/* 旅のポイント */
/* -------------------------------------------------------- */
.rail-europe #bl_point {padding-bottom: 50px;}
.rail-europe #bl_point .tit_ty_01 {margin-bottom: 50px;}
.rail-europe #bl_point ul li {float: left; width: 22%; margin-right: 4%; text-align: center;}
.rail-europe #bl_point ul li:nth-child(4n) {margin-right: 0;}
.rail-europe #bl_point ul li .tit {font-size: 20px; color: #00501e; font-weight: bold; text-align: center; padding: 15px 0;}
.rail-europe #bl_point ul li p {text-align: left}

@media (max-width:1030px) {
  .rail-europe #bl_point ul li {float: left; width: calc((100% - 20px) / 2); margin-right: 20px; margin-bottom: 20px;}
  .rail-europe #bl_point ul li:nth-child(4n) {margin-right: 20px;}
  .rail-europe #bl_point ul li:nth-child(2n) {margin-right: 0;}  
}

@media (max-width:640px) {
  .rail-europe #bl_point .tit_ty_01 {margin-bottom: 20px;}
  .rail-europe #bl_point.bl_wrap {padding:40px 0;}
  .rail-europe #bl_point ul li .tit {font-size: 16px;}
}

/* -------------------------------------------------------- */
/* MENU */
/* -------------------------------------------------------- */
.rail-europe #bl_menu.bl_wrap {padding:0 0 30px;}
.rail-europe #bl_menu .tit {background: #005031; width: 100%; height: 60px; color: #fff; font-weight: bold; text-align: center;font-size: 25px; line-height: 60px; margin-bottom: 60px;}
.rail-europe #bl_menu ul li {float: left; width: 22%; margin-right: 4%; text-align: center; margin-bottom: 30px;}
.rail-europe #bl_menu ul li:nth-child(4n) {margin-right: 0;}
.rail-europe #bl_menu ul li a .link_box {width: 100%; height: 40px; background: rgba(0,0,0,0.60); display: block; color: #fff; font-weight: bold; position: relative;  margin-top: -40px; }
.rail-europe #bl_menu ul li a .link_box:after {content: "\f054";font-family:FontAwesome;  transform: rotate(10deg); position: absolute; right: 10px; top: 50%; transform: translate(0,-50%);}
.rail-europe #bl_menu ul li a .link_box .link_txt {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); line-height: 120%; display: block; width: 100%;padding: 0 15px;}

@media (max-width:1030px) {
  .rail-europe #bl_menu ul li {float: left; width: calc((100% - 20px) / 2); margin-right: 20px; margin-bottom: 20px;}
  .rail-europe #bl_menu ul li:nth-child(4n) {margin-right: 20px;}
  .rail-europe #bl_menu ul li:nth-child(2n) {margin-right: 0;}  
}

@media (max-width:640px) {
  .rail-europe #bl_menu.bl_wrap {padding:0;}

  .rail-europe #bl_menu .tit {height: 40px; line-height: 40px; margin-bottom: 20px; font-size: 20px;}
  .rail-europe #bl_menu ul li a .link_box:after {font-size: 10px; right: 5px;}
  .rail-europe #bl_menu ul li a .link_box .link_txt {font-size:3.4375vw;}
}






/* -------------------------------------------------------- */
/* お問い合わせ */
/* -------------------------------------------------------- */

.rail-europe .bl_contact.bl_wrap {padding: 80px 0;}

.rail-europe .bl_contact .tit {font-size: 25px; color: #00501e; font-weight: bold; text-align: center; margin-bottom: 40px;}

.rail-europe .contact_box {border: solid 1px #c8c8c8; background: #fff; max-width: 1000px; width: 100%; margin: 0 auto;}
.rail-europe .contact_box p {color: #787878; font-size: 15px;}
.rail-europe .contact_box .contact_txt{font-size: 2.7rem;}
.rail-europe .contact_box .contact_txt span {display: block;}
.rail-europe .contact_box .contact_time {color:#787878;}
.rail-europe .contact_box .link_btn a {background: #ff6e00;}
.rail-europe .contact_box .link_btn a::after {font-size: 1.4rem; right: 10px;}

@media (min-width:1030px){
	.rail-europe .contact_box{display: flex; align-items: center;}
}
@media (min-width:768px){
	.rail-europe .contact_box {overflow:hidden; border:1px solid #c8c8c8;padding:20px 40px; }
	.rail-europe .contact_box .contact_time {font-size:1.4rem;line-height:1.4;}
	.rail-europe .contact_box .tit_01 {font-size:3rem;margin-bottom:30px;text-align:center;font-weight:bold;}
	.rail-europe .contact_box .tit_01 br {display:none;}
	.rail-europe .contact_box .tit_02 {font-size:2.7rem;margin:15px 0;text-align:left; line-height: 1.2;}
	.rail-europe .contact_box .wrap_01 {float:left;width:55%;}
	.rail-europe .contact_box .wrap_02 {float:right;width:45%;max-width:400px;}
	.rail-europe .contact_box .contact_tel {color:#497c15;font-weight:bold;font-size:5.6rem;line-height:1;font-family:'arial',sans-serif; margin:0 auto 10px auto; letter-spacing: -0.02em;}
  .rail-europe .contact_box .contact_tel:before {content: "\f095";font-family:FontAwesome;  transform: rotate(10deg);}
	.rail-europe .contact_box .contact_telshow_fuse  .contact_box .link_btn {margin-top:10px;}
	.rail-europe .contact_box .link_btn a {font-weight:bold;font-size:1.4rem;height:40px;line-height:40px; background: #ff6e00;}
	.rail-europe .contact_box .link_btn a::after {font-weight:normal; font-size: 1.4rem; right: 10px;}
}

@media (max-width:1030px){
	
  .rail-europe .contact_box .dis_pc { display: block;}
  .rail-europe .contact_box .dis_sp { display: none; }

}
@media (max-width:1030px) and (min-width:768px){
  .rail-europe .contact_box {padding:30px 20px;}
	.rail-europe .contact_box .wrap_01,
	.rail-europe .contact_box .wrap_02 {float:none;width:100%;margin:0 auto;text-align:center;}
	.rail-europe .contact_box .wrap_01 {margin-bottom:20px;}
	.rail-europe .contact_box .tit_01 {font-size:2.7rem;margin-bottom:20px;}
	.rail-europe .contact_box .tit_02 {font-size:2.4rem;text-align:center;}
}
@media (max-width:767px){
  .rail-europe .contact_box .dis_pc { display: none;}
  .rail-europe .contact_box .dis_sp { display: block; }
  .rail-europe .contact_box {text-align:center;margin:20px auto 0;overflow:hidden; border: none; background: none; padding: 0;}
	
	.rail-europe .contact_box .contact_time {font-size:1.2rem;}
  .rail-europe .contact_box .contact_time span {display: inline;}
	.rail-europe .contact_box .tit_01 {line-height:1.4;font-size:1.8rem;margin-bottom:10px;}
	.rail-europe .contact_box .tit_02 {line-height:1.4;font-size:1.8rem;margin-bottom:10px;}
	.rail-europe .contact_box .btn_wrap {overflow:hidden;margin:15px -3px;}
	.rail-europe .contact_box .btn_wrap li {float:left;width:50%;}
	.rail-europe .contact_box .btn_wrap li a {display:block;margin:0 3px;border-radius:5px;font-size:1.6rem;position:relative;height:44px;line-height:42px;text-decoration:none;font-weight:bold;}
	.rail-europe .contact_box .btn_wrap li a::before {position:absolute;height:100%;top:0;}
	.rail-europe .contact_box .btn_wrap li.tel a {border:2px solid #497c15;color:#497c15;padding-left:10px;background:#fff;position: relative;}
	.rail-europe .contact_box .btn_wrap li.tel a::before {content: "\f095";font-family:FontAwesome; position: absolute; left: 5px; font-size: 3rem; transform: rotate(10deg);}
	.rail-europe .contact_box .btn_wrap li.order a {border:1px solid #ff6e00;color:#fff;background:#ff6e00;padding-right:5px;}
	.rail-europe .contact_box .btn_wrap li.order a::before {right:10px;content:"\f054";font-size:1.1rem;font-family:FontAwesome;}
}
@media (max-width:640px) {
  .rail-europe .bl_contact.bl_wrap {padding: 25px 0 30px;}
  .rail-europe .bl_contact .tit {font-size: 20px;}
	.rail-europe .contact_box .contact_txt {font-size:1.7rem;}
  .rail-europe .contact_box p {text-align: left;}

}
@media (max-width:360px) {
	.rail-europe .contact_box .btn_wrap li.order a::before {right:5px;}

}