@charset "utf-8";

article * {font-family: "Noto Sans JP", "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", sans-serif;}

/* 基本レイアウト・フォント装飾関連 */
.f-bold { font-weight: bold}
.f-b-red { font-weight: bold ; color: #FF0000}
.f-b-y { font-weight: bold ; color: #FFFFCC}
.f-b-pink { font-weight: bold ; color: #FF6666}
.f-b-orange { font-weight: bold ; color: #FF6600}
.f-b-s-pink { font-weight: bold ; color: #FF3399}
.f-b-white { font-weight: bold ; color: #FFFFFF}
.f-b-purple { font-weight: bold; color: #B086B9}
.f-b-dp { font-weight: bold; color: #663399}
.f-b-green { font-weight: bold; color: #008888}
.f-b-blue { font-weight: bold; color: #0066CC}
.f-dp { color: #663399}
.f-white { color: #FFFFFF}
.f-red { color: #a00000}
.f-redf00 { color: #FF0000}

/* レイアウト */
.t10b { font-size: 10px; line-height:14px;}
.t10-r { font-size: 10px ; color: #FF0000}	
.t10w { font-size: 10px; color: #FFFFFF}
.t14b { font-size: 14px ; font-weight: bold ; color: #666666}
.t14y { font-size: 14px ; font-weight: bold ; color: #FFFFCC}
.t16b { font-size: 16px; font-weight: bold; color: #3366CC}
.fc_787878{color:#787878;}

/*スクロール制限*/
html,body{overflow:auto;}
html.hidden,body.hidden{overflow:hidden;}

/* CSS初期設定 */
.clear {clear: both;}
.clearFloat:after { 
	content: "."; 
	display: block; 
	clear: both; 
	height: 0; 
	visibility: hidden; 
	line-height: 0; 
} 
.clearFloat { 
	display: inline-table; 
	min-height: 1%; 
} 
/* for macIE \*/ 
* html .clearFloat {height: 1%;} 
.clearFloat {display: block;} 
/* end of for macIE */
.clearFloat {overflow:hidden;}
a.OpaChange:hover *{
filter:alpha(opacity=70); /*IE*/
-moz-opacity:0.70; /*FF*/
opacity:0.70;
}
.clearfix:after {
  content: "";
  clear: both;
  display: block;
}
html {scroll-behavior: smooth;}
main img{
	width:100%;
	height: auto;
}
.disnone{display:none!important;}

/*759px以下*/
@media screen and (max-width: 759.9px) {
#wrapper {line-height: 1.4;}
.spnone,.smpnone{display:none!important;}

/* CSS */
#dirPathBlock,
#anchorLinkBlock {
	font-size: 10px;
	margin: 1% 1% 0 1%;
}
#dirPathBlock p,
#anchorLinkBlock a{
	color: #FFF;
	font-size: 12px;
}
h1 {
	font-size: 10px;
	margin: 0 1%;
	color: #FFF;
    font-weight: bold;
}
#wrapper article{
	width:100%;
	height:auto;
}
article * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

#wrapper #dirPathBlock {margin: 5px 0 0;}
#wrapper #dirPathBlock p,
#wrapper #dirPathBlock p a{
	color:#fff!important;
	font-size: 8px!important;
	padding: 0 3px;
}
p.pageBackBlock a{color:#fff!important;}

/*title---------------------------------------------------*/
#title {
	width: 100%;
	height: 200px;
	position: relative;
}
#bg_back2{
	width: 100%;
    height: 800px;
    position: fixed;
    background: url(../images/bg.jpg) 50% 0;
    background-repeat: no-repeat;
    background-size: cover;
	z-index: -1;
}
#title > img {
	width: 380px;
	height: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
}
.mainTit01{margin:6px 10px 10px;}

/*nav*/
#follow-up_nav-box {
	height:52px;
	margin-bottom: 12%;
}
#follow-up_nav.fixed {
	width: 100%;
	position: fixed!important;
	top: 0;
	left: 0;
	z-index: 9999;
	text-align: center;
	background: #FFF;
	margin: 0;
}
#follow-up_nav.fixed ul{
	width: 94%;
	margin: 0 3%;
}
#follow-up_nav {margin: 0 1%;}
#follow-up_nav ul {display:flex;}
#follow-up_nav li {
	width: 25%;
	text-align: center;
	background: #01479d;
	margin: 0 1px;
}
#follow-up_nav li a {
	width: 100%;
	display: block;
	line-height: 1.2;
	color: #FFF!important;
	padding: 8px 0;
}

.commonBox{
	margin: 5% 2% 15%;
    padding: 20px 10px 1px;
    background: rgb(255,255,255,0.8);
}
.commonBox .inner{
	margin:0 auto 20px;
	overflow:hidden;
	padding:1px;
}
.commonBox h2{
	font-weight: bold;
	text-align:center;
	font-size:18px;
	margin: 20px 0;
}
.commonBox h2 span{
	background:url(../images/ti_sub.png) no-repeat 50% 0;
	background-size:170px auto;
	height:48px;
	display:block;
	font-size:28px;
	color:#FCD43F;
	padding:12px 0 0 0;
	margin:0 0 10px 0;
}
.commonBox h2 strong strong{font-size:18px;}
.commonBox h3{
    position: relative;
    text-align: center;
    line-height: 2.4;
    background: #fff0b0;
    font-size: 16px;
    border-bottom: 8px solid #FFE37B;
    -webkit-border-radius: 10px 10px 0 0;
    border-radius: 10px 10px 0 0;
}
.commonBox h3 br{display:none}
.commonBox h3 img{
	width:auto;
	height:28px;
	vertical-align:middle;
	border:3px solid #FFF;
	margin-right:10px;
	margin-top:-3px;
	background:#FFF;
	line-height:30px;
}
.commonBox h3 strong{
	display:inline-block;
	color:#333
}
.paddB{padding:0 10px;}
a.btnAll{
	background:#FDDD40;
	color:#000;
	display:block;
	-webkit-border-radius: 5px 5px 5px 5px;
	border-radius: 5px 5px 5px 5px;
	padding:6px;
	font-size:14px;
	text-align:center;
	margin:0 auto;
	width:100%;
	position:relative;
	border-bottom:3px solid rgba(0,0,0,0.1);
}
a.btnAll:hover{
	transition: 0.2s ;
	opacity: 0.7 ;
	text-decoration:none!important
}
.mt10{margin-top:10px;}

/*各カテゴリ新幹線*/
section.nozomi,
section.kodama,
section.kagayaki,
section.railstar{position: relative;}

section.nozomi:before,
section.kodama:before,
section.kagayaki:before,
section.railstar:before{
	content: "";
    width: 150px;
    height: 150px;
    display: block;
    position: absolute;
	top: -80px;
    left: 28%;
}
.nozomi:before{
	/*background: url(../images/ico_nozomi.png) no-repeat;*/
    background: url(../images/ico_pattoride.png) no-repeat;
    background-size: 100%;
}
.kodama:before{
    /*background: url(../images/ico_kodama.png) no-repeat;*/
	background: url(../images/ico_pattoride.png) no-repeat;
    background-size: 100%;
}
.kagayaki:before{
    /*background: url(../images/ico_kagayaki.png) no-repeat;*/
	background: url(../images/ico_pattoride.png) no-repeat;
    background-size: 100%;
}
.railstar:before{
    /*background: url(../images/ico_railstar.png) no-repeat;*/
	background: url(../images/ico_pattoride.png) no-repeat;
    background-size: 100%;
}

/*JRセットプランのネット予約限定の新サービスとは？*/
.nozomi .comment {
    font-size: 14px;
    margin-bottom: 10px;
    padding: 10px;
}
.nozomi h2{color:#005bac;}
#hakken_tab{display: flex;}
#hakken_tab li{
	width: 50%;
    text-align: center;
    font-size: 20px;
    background: #EBEBEB;
	display: grid;
    align-items: center;
    cursor: pointer;
}
#hakken_tab li h3{
	background: none;
    margin: 0;
    padding: 8px 5px;
    font-size: 14px;
    border-bottom: none;
    color: #787878;
    line-height: 1.4;
}
#hakken_tab li.select{background: #fff;}
#hakken_tab li.select h3{
	font-weight:bold;
	color:#005BAC;
}
section#hakken_wrap li{
	background: #FFF;
    margin-bottom: 40px;
    padding: 15px;
    font-size: 16px;
	position: relative;
}
section#hakken_wrap li:after{
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 10px 20px 0 20px;
	border-color: #20208C transparent transparent transparent;
	position: absolute;
	bottom: -25px;
    left: calc((100% / 2) - 20px);
}
section#hakken_wrap li:last-child{margin-bottom: 25px;}
section#hakken_wrap li:last-child:after{border:none;}
section#hakken_wrap li dt{margin: 0 0 25px;}
section#hakken_wrap li dt h4{font-weight: bold;}
section#hakken_wrap li dt h4 hr{
	display:block;
	border: 1px solid #01479d;
}
section#hakken_wrap li dd div:nth-of-type(1),
section#hakken_wrap li dd div:nth-of-type(2){
	margin-bottom: 25px;
}
section#hakken_wrap img.w100 {
    width: 100px;
    margin: auto;
    display: block;
}

/*FAQ*/
div.kagayaki h2{color:#006cb7;}
.fandq{
	display:block;
	margin-bottom:5%;
}
.fandq li{
	font-size: 16px;
    list-style-type: none;
    background: #FFF;
    padding: 20px 20px 5px;
    margin: 2% 2% 5%;
}
.fandq li dt{margin-bottom: 5%;}
.fandq li dt span,
.fandq li dd span{
	width: 13%;
    display: block;
    float: left;
    text-align: center;
    color: #fff;
    line-height: 2;
    margin: 0 2% 0 0;
    padding: 0;
    box-sizing: border-box;
    font-weight: bold;
    font-size: 16px;
}
.fandq li dt strong{font-weight:bold;color:#006cb7;}
.fandq li dt strong,
.fandq li dd strong{
    width: 85%;
    display: block;
    float: left;
	font-weight: normal;
}
.fandq li dd{margin-bottom: 5%;}
.fandq li dt span{background: #006cb7;}
.fandq li dd span{background: #dd934a;}

/*ガシェット*/
div.kodama h2{color:#243ba1;}
#ax02 {padding: 20px 5px 1px;}
div.commonBox .search_kokunaiBar .serchBox.kokunaiS ul li.select {
	width: 50%;
    background: #243ba1;
    color: #ff544c;
    font-weight: bold;
}
div.commonBox .search_kokunaiBar .serchBox.kokunaiS ul li:nth-of-type(n+2) {display:none!important;}
div.commonBox .search_kokunaiBar .serchBox.kokunaiS .content_wrap.serchBox {border: 8px solid #243ba1;}
div.commonBox .search_kokunaiBar {
    width: 100%;
    margin: 0;
}

/*その他おすすめ*/
div.railstar h2{color:#f18e00;}
.special_recomend li{
    width: 48%;
    margin: 0.5% 1%;
    float: left;
    display: block;
}

/*clear*/
.fandq li dt:after,
.fandq li dd:after,
.special_recomend:after{
	content: ".";
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
}

/*調整*/
/*footer*/
.snsArea {
	width: 100%!important;
    margin: 0px auto!important;
    padding: 20px 0!important;
    background: #fff;
}
footer {margin-top: 0!important;}

/*news*/
.news{font-size: 14px;}
.news img{
	width:98%;
	margin:0 auto;
	display: block;
}

/*video*/
.titlebar{
	background: #005bac;
    display: block;
    width: 100%;
    border-radius: 50px;
    color: #FFF;
    text-align: center;
    line-height: 2;
    font-size: 16px;
    margin: 0 auto 15px;
}
video {
	width:100%;
	height:auto;
    margin: 2% auto;
    display: block;
}

/*btn*/
.accodion{position: relative;}
.accodion:after{
	content: '－';
	position: absolute;
    right: 25px;
}
.accodion.open:after{
	content: '＋';
	position: absolute;
    right: 25px;
}
.accodion_p {margin: 15px;}

.border_btn{
	text-align: center;
    width: 100%;
    display: block;
    border: 1px solid #01479d;
    padding: 5px 0 8px;
    color: #01479d;
}

/*モーダル*/
span.modal01btn,
span.modal02btn {
    width: 24px;
    height: 24px;
    display: inline-block;
    background: #999;
    text-align: center;
    color: #FFF;
    border-radius: 12px;
}
#modal01,#modal02 {
	width: 90%;
    visibility: visible;
    z-index: 1000;
    background: #fff;
    margin: auto;
    padding: 10px;
    border: 2px solid #ccc;
    box-sizing: border-box;
    font-size: 14px;
}
#modal01 {
	top: calc((100% / 3));
	left: 5%;
	position: fixed;
}
#modal02 {
    height: 182px;
    top: calc((100% / 2) - 91px);
    left: 5%;
    position: fixed;
}
.modalClose {
    position: absolute;
    top: -15px;
    right: -11px;
    background: url(/sp/shared2015/common/images/bt_close_01.png) left top no-repeat;
    background-size: 30px auto;
    width: 30px;
    height: 30px;
}
#modal_overlay {
	width: 100%;
    height: 150%;
    position: fixed;
    background: rgba(0,0,0,.7);
    display: none;
    left: 0;
    overflow: hidden;
    top: -1px;
    background: rgba(0,0,0,.7);
    z-index: 999;
}

}

/*760px以上*/
@media screen and (min-width: 760px),print {
/* CSS */
#wrapper {line-height: 1.231;}
.pcnone{display: none!important;}
#dirPathBlock,
h1,
#anchorLinkBlock{
	width: 100%;
	max-width:970px;
	min-width:760px;
	margin: auto;
}

/*panlist&back*/
#dirPathBlock,
#anchorLinkBlock {
	width: 100%;
	margin: 0 auto;
	display: block;
	font-size: 12px;
}
#dirPathBlock p,
#anchorLinkBlock a{
	color: #FFF;
	font-size: 12px;
}
h1 {
	font-size: 14px;
    width: auto;
    max-width: 970px;
    margin: 0 auto 5px;
	color: #FFF;
    font-weight: bold;
}

p.images img{
	width:250px;
	height:auto!important;
}
.colum3T div{cursor:pointer;}
.colum3T div:hover img{
opacity:0.7;
filter: alpha(opacity=70);
-ms-filter: "alpha( opacity=70 )";
background: #fff;
}
.colum3T div:hover a{
	color:#FF8000;
	text-decoration:underline;
}
.naviNormal li{font-size: 1.2em;}
#templeteWrap{width:100%;}
.contInner02 .column2Area .section{
	width:950px!important;
	float:none!important;
	overflow:hidden;
}
article{width:100%!important;}
#inner950{
	width:950px;
	margin:0 auto;
	display:block;
}
.inner950{
	width:950px;
	margin:30px auto 0;
	display:block;
}
#Foot .footBtmInner{font-size:12px!important;}
.itemList4 a{color:#383333!important;}
#pc_header{background: #fff;}
#wrapper #dirPathBlock p,
#wrapper #dirPathBlock p a{color:#fff!important;}
p.pageBackBlock a{color:#fff!important;}

/*title---------------------------------------------------*/
#title{
	width: 100%;
	height: 450px;
    position: relative;
}
#bg_back{
	width: 125%;
	height: 100%;
    position: fixed;
	z-index: -1;
}
div.parallax-mirror {
    visibility: visible!important;
    overflow: visible!important;
}
#title > img {
	width: 850px;
	height: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    color: #FFF;
    font-weight: bold;
    display: block;
}
.mainTit01{margin:14px 0 18px 0;}

/*nav*/
#follow-up_nav-box {
	height:74px;
	margin-bottom: 2%;
}
#follow-up_nav.fixed {
	position: fixed!important;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 9999;
	margin: 0;
	text-align: center;
	background: #FFF;
}
#follow-up_nav.fixed ul{
	width: 100%;
	max-width:970px;
	margin: 0 auto;
}
#follow-up_nav ul {
	width: 970px;
    margin: 0 auto;
	display:flex;
}
#follow-up_nav li {
	width: 25%;
    text-align: center;
    background: #01479d;
    margin: 2px;
}
#follow-up_nav li a {
	width: 100%;
	display: block;
	line-height: 1.2;
	font-size: 20px;
	color: #FFF!important;
	padding: 10px 0;
}
#follow-up_nav li a:hover,
a.bluebtn:hover {
	transition: 0.2s ;
	color:#FDDD41!important;
	text-decoration:none!important;
}
.commonBox{
	width: 970px;
    margin: 0 auto 30px;
	padding:50px 0 1px;
	background:rgb(255,255,255,0.8);
}
.commonBox .inner{
	width:950px;
	margin:0 auto 50px;
	overflow:hidden;
	padding:1px;
}
.commonBox h2{
	text-align:center;
	font-size:32px;
	margin-bottom:40px;
}
.commonBox h2 span{
	background:url(../images/ti_sub.png) no-repeat 50% 0;
	background-size:200px auto;
	height:38px;
	display:block;
	font-size:30px;
	color:#FCD43F;
	padding:14px 0 0 0;
	margin:0 0 20px 0;
}
.commonBox h2 strong strong{font-size:18px;}
.commonBox h3{
    position: relative;
    padding: 0.6em;
    background: #fff0b0;
    margin: 0 auto;
    font-size: 22px;
    border-bottom: 8px solid #FFE37B;
    text-align: center;
}
.commonBox h3 img{
	width:auto;
	height:25px;
	border:3px solid #FFF;
	margin-right:20px;
	background:#FFF;
}
.commonBox h3 strong{
	display:inline-block;
	color:#333
}
.paddB{padding:0 20px;}
a.btnAll{
	background:#FDDD40;
	color:#000;
	display:block;
	-webkit-border-radius: 5px 5px 5px 5px;
	border-radius: 5px 5px 5px 5px;
	padding:15px;
	font-size:18px;
	text-align:center;
	margin:0 auto;
	width:70%;
	position:relative;
	border-bottom:3px solid rgba(0,0,0,0.1);
}
a.btnAll:hover{
	transition: 0.2s ;
	opacity: 0.7 ;
	text-decoration:none!important
}
.mt10{margin-top:10px;}

/*各カテゴリ新幹線*/
.nozomi h2,
div.kodama h2,
div.kagayaki h2,
div.railstar h2{
	position: relative;
}
.nozomi h2:before,
div.kodama h2:before{
	content: "";
    width: 150px;
    height: 150px;
    display: block;
    position: absolute;
	top: -40px;
    left: 3%;
}
div.kagayaki h2:before,
div.railstar h2:before{
	content: "";
    width: 150px;
    height: 150px;
    display: block;
    position: absolute;
	top: -52px;
    left: 3%;
}
.nozomi h2:before{
	/*background: url(../images/ico_nozomi.png) no-repeat;*/
    background: url(../images/ico_pattoride.png) no-repeat;
    background-size: 100%;
}
.kodama h2:before{
    /*background: url(../images/ico_kodama.png) no-repeat;*/
	background: url(../images/ico_pattoride.png) no-repeat;
    background-size: 100%;
}
.kagayaki h2:before{
    /*background: url(../images/ico_kagayaki.png) no-repeat;*/
	background: url(../images/ico_pattoride.png) no-repeat;
    background-size: 100%;
}
.railstar h2:before{
    /*background: url(../images/ico_railstar.png) no-repeat;*/
	background: url(../images/ico_pattoride.png) no-repeat;
    background-size: 100%;
}

/*JRセットプランのネット予約限定の新サービスとは？*/
.nozomi h2{color:#005bac;}
.nozomi .comment {
    font-size: 18px;
    line-height: 25px;
	margin-bottom: 25px;
	padding: 25px;
}
#hakken_tab{display: flex;}
#hakken_tab li{
	width: 50%;
    text-align: center;
    font-size: 20px;
    background: #EBEBEB;
    line-height: 2.5;
    cursor: pointer;
}
#hakken_tab li h3{
	padding: 0;
    background: none;
    margin: 0;
     font-size: 20px; 
    border-bottom: none;
	color:#787878;
}
#hakken_tab li.select{background: #fff;}
#hakken_tab li.select h3{
	font-weight:bold;
	color:#005BAC;
}
section#hakken_wrap{padding:25px;}
section#hakken_wrap li{
	background: #FFF;
    margin-bottom: 40px;
    padding: 25px;
    font-size: 18px;
	position: relative;
}
section#hakken_wrap li:after{
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 10px 20px 0 20px;
	border-color: #20208C transparent transparent transparent;
	position: absolute;
	bottom: -25px;
    left: calc((100% / 2) - 20px);
}
section#hakken_wrap li:last-child{margin-bottom: 25px;}
section#hakken_wrap li:last-child:after{border:none;}
section#hakken_wrap li dt{margin: 0 0 25px;}
section#hakken_wrap li dt h4{font-weight: bold;}
section#hakken_wrap li dt h4 hr{
	display:block;
	border: 1px solid #01479d;
}
section#hakken_wrap li dd{}
section#hakken_wrap li dd div:nth-of-type(1){
	width: 50%;
	float: right;
}
section#hakken_wrap li dd div:nth-of-type(2){
	width: 45%;
	float: right;
	margin-right:5%;
}
section#hakken_wrap img.w100 {
    width: 100px;
    margin: auto;
    display: block;
}

/*FAQ*/
div.kagayaki h2{color:#006cb7;}
.fandq{
	display:block;
	margin-bottom:50px;
}
.fandq li{
	font-size: 18px;
    list-style-type: none;
    background: #FFF;
    padding: 20px 20px 5px;
    margin: 2%;
}
.fandq li dt{margin-bottom: 2%;}
.fandq li dt span,
.fandq li dd span{
	width: 4%;
    display: block;
    float: left;
    text-align: center;
    color: #fff;
    line-height: 2;
    margin: 0 2% 0 0;
    padding: 0;
    box-sizing: border-box;
    font-weight: bold;
    font-size: 18px;
}
.fandq li dt strong{font-weight:bold;color:#006cb7;}
.fandq li dt strong,
.fandq li dd strong{
    width: 94%;
    display: block;
    float: left;
	padding-top: 5px;
}
.fandq li dd{margin-bottom: 2%;}
.fandq li dt span{background: #006cb7;}
.fandq li dd span{background: #dd934a;}

/*ガシェット*/
div.kodama h2{color:#243ba1;}
div.commonBox .search_kokunaiBar .serchBox.kokunaiS ul li.select {
	width: 64%;
    background: #243ba1;
    color: #ff544c;
    font-weight: bold;
}
div.commonBox .search_kokunaiBar .serchBox.kokunaiS ul li:nth-of-type(n+2) {display:none!important;}
div.commonBox .search_kokunaiBar .serchBox.kokunaiS .content_wrap.serchBox {border: 8px solid #243ba1;}

/*その他おすすめ*/
div.railstar h2{color:#f18e00;}
.special_recomend li{
    width: 23%;
    margin: 0 1%;
    float: left;
    display: block;
}

/*clear*/
.fandq li dt:after,
.fandq li dd:after,
.special_recomend:after{
	content: ".";
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
}

/*news*/
.news{font-size: 18px;}
.news img{
	margin:0 auto;
	display: block;
}

/*video*/
.titlebar{
	background: #005bac;
    display: block;
    width: 100%;
    border-radius: 50px;
    color: #FFF;
    text-align: center;
    line-height: 2;
    font-size: 18px;
    margin: 0 auto 15px;
}
video {
	width:960px;
	height:540px;
    margin: 0 auto 2%;
	padding: 1% 0 0;
    display: block;
}

/*btn*/
.accodion{position: relative;}
.accodion:after{
	content: '－';
	position: absolute;
    right: 25px;
}
.accodion.open:after{
	content: '＋';
	position: absolute;
    right: 25px;
}
.accodion_p {margin: 15px;}

.border_btn{
	text-align: center;
    width: 100%;
    display: block;
    border: 1px solid #01479d;
    padding: 5px 0 8px;
    color: #01479d;
}

}