@charset "utf-8";

/*  アイコン
-----------------------------------------------------------*/
.m-ico{font-style: normal;vertical-align: middle;font-weight:normal;}.m-ico:before{display: inline-flex;align-items: center;font-family:'Material Icons Round';content: attr(data-icon);font-size: 100%;}

/*  共通
============================================================================= */
.dom-contents{
	position: relative;
}
.contents-wraper{
	margin: 0;
	font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", 'メイリオ', Meiryo,"ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Verdana, Roboto, "Droid Sans", sans-serif;
	border-bottom: solid 1px #ccc;
}
.inner{
	margin: 0 auto;
	max-width: 1280px;
}
.dom-dp__bn{
	display: none;
}
.footer-nav{
	padding-top: 0;
	border-top: none;
}

/*  パンくず
============================================================================= */
.breadcrumbs{
	padding: 0 5px;
	font-family: "Yu Gothic Medium",YuGothic,-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",HelveticaNeue,Arial,Verdana,"游ゴシック体","游ゴシック Medium","游ゴシック","Yu Gothic",Meiryo,sans-serif;
}

.breadcrumbs_wrapper{display:flex;align-items:center}.breadcrumbs_contents{display:block;width:100%}.breadcrumbs_item{display:inline-block;color:#6b6e71;font-size:1.2rem;line-height:2}.breadcrumbs_item.-home{flex-shrink:0;margin-right:2.6666666667vw}.breadcrumbs_inner{margin-bottom: -10px;padding-bottom:10px;overflow-x:auto;white-space:nowrap;width:71vw}.breadcrumbs_item{display:inline-block;color:#323743;line-height:2;margin-right:2.6666666667vw}.breadcrumbs_item a{color:#323743}.breadcrumbs_item:not(:last-child):after{-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);display:inline-block;transform:rotate(-45deg);border:1px solid #323743;border-top:none;border-left:none;vertical-align:middle;content:"";width:1.0666666667vw;height:1.0666666667vw;margin-top:-.7vw;margin-left:1.3333333333vw}a.breadcrumbs_anchor{color:#fff}@media screen and (min-width:960px){.breadcrumbs_item.-home,.breadcrumbs_item{margin-right:10px}.breadcrumbs_item:last-child{margin-right:0}.breadcrumbs_inner{width:inherit}.breadcrumbs_item:not(:last-child):after{width:4px;height:4px;margin-top:-3px;margin-left:4px}}

.mv .breadcrumbs_item, .page-mv .breadcrumbs_item{color:#fff;text-shadow: rgb(0, 0, 0) 0 0 5px;}.mv .breadcrumbs_item a,.page-mv .breadcrumbs_item a{color:#fff}.mv .breadcrumbs_item:not(:last-child):after,.page-mv .breadcrumbs_item:not(:last-child):after{border-color:#fff;}

.page-mv .breadcrumbs{
	position: absolute;
}


.f-breadcrumbs{
	margin: 30px 0 0;
	padding: 15px 0;
	border-top: solid 1px #ccc;
	background: #f5f5f5;
}
.f-breadcrumbs .breadcrumbs_item{
	color: #6b6e71;
}
.f-breadcrumbs a.breadcrumbs_anchor{
	color: #323743;
}
.f-breadcrumbs .breadcrumbs_item:not(:last-child):after{
	border-color: #323743;
}
@media screen and (min-width:960px){
	.f-breadcrumbs{
		margin: 50px 0 0;
	}
}


/*  キービジュアル
============================================================================= */
.mv{
	position: relative;
	overflow: hidden;
	width: 100%;
}
.mv .inner{
	position: relative;
	z-index: 1;
}


.mv-ttl{
	margin-top: 50px;
	font-size: 1.8rem;
	font-weight: bold;
	line-height: 1.5;
	
	color: #fff;
	text-shadow: rgb(0, 0, 0) 0 0 5px;	
}
.mv-ttl em{
	display: flex;
	align-items: center;
	font-size: 2.5rem;
	font-weight: bold;
}
.mv-detail{
	position: absolute;
	margin: 10px 0 0 auto;
	padding: 20px 10px 80px;
	width: 100%;
	background-color: rgba(221, 240, 255, 0.9);
}
.mv-detail:before{
	position: absolute;
	left: -25px;
	bottom: 10px;
	content: "";
	display: inline-block;
	width: calc(100% + 50px);
	height: 0;
	padding-top: calc(102 / 600 * 100%);
	background: url("/kokunai/dynamic/jr/jrwkanko-kinki/_images/mv_train.png") center / 100% auto no-repeat;
}
.mv-map{
	position: absolute;
	left: 2px;
	top: -55px;
	max-width: 80px;
}
.mv-map img{
	width: 100%;
	height: auto;
}

.mv-slide{
	position: absolute!important;
	left: 0;
	top: 0;
	width: 100%;
}
.mv-img{
	position: relative;
}
.mv-img .inner{
	display: none;
}
.mv-bg{
	width: 100%;
	overflow: hidden;
}
.mv-img .mv-bg picture{
	position: relative;
	height: 100%;
}
.mv-img .mv-bg img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
    vertical-align: bottom;
	transform: scale(1);
}
.mv-img .mv-bg .mv-caption{
	position: absolute;
	right: 0;
	top: 5px;
	padding: 0 5px;
	color: #fff;
    font-size: 1.2rem;
	font-weight: 600;
    text-align: right;
    line-height: 1.3;
	letter-spacing: 0;
}
.mv-img.slick-active .mv-bg img{
	animation: bg-zoom-in 3s ease-in-out;
	-webkit-animation: bg-zoom-in 3s ease-in-out;
	animation-fill-mode:forwards;
}
.mv-areattl{
	position: relative;
	left: 0;
	display: flex;
	align-items: center;
	color: #fff;
	font-size: 3.6rem;
	font-weight: bold;
	text-shadow: rgb(0, 0, 0) 0 0 5px;
	letter-spacing: .5em;
	opacity: 0;
}
.mv-areattl:after{
	content: "－ " attr(data-en);
	font-size: 2.0rem;
	letter-spacing: .2em;
}
.mv-img.slick-active .mv-areattl{
	animation: slide-in 0.5s ease 0.3s;
	-webkit-animation: slide-in 0.5s ease 0.3s;
	animation-fill-mode:forwards;
}
.mv-cpn{
	position: relative;
    left: 0;
    margin-top: 10px;
    color: #fff;
    font-size: 2.0rem;
    font-weight: bold;
    line-height: 1.3;
    text-shadow: rgb(31 18 0) 4px 4px 8px;
    opacity: 0;
}
.mv-img.slick-active .mv-cpn{
	animation: slide-in 0.5s ease 0s;
	-webkit-animation: slide-in 0.5s ease 0s;
	animation-delay: 0.3s;
	animation-fill-mode:forwards;
}
.mv-cpn_logo{
	max-width: 250px;
	margin-bottom: 10px;
}
.mv-cpn_logo img{
	width: 100%;
	height: auto;
}
.mv-cpn_bt{
	margin-top: 20px;
	max-width: 400px;
}
.mv-cpn_bt a{
	position: relative;
    display: block;
    padding: 15px;
    color: #fff;
    font-weight: bold;
    text-align: center;
    border: solid 3px #fff;
	text-shadow: rgb(0, 0, 0) 0 0 5px;
    transition: all 0.4s;
}

.add-animation {
	animation: zoomUp 10s linear 0s normal both;
}
@keyframes zoomUp {
	0% {
		transform: scale(1);
	}
	100% {
		transform: scale(1.15); /* 拡大率 */
	}
}

@media screen and (max-width: 959px){
	.mv .inner{
		padding: 0 10px;
		height: 100%;
	}
	.mv-slide{
		height: 100%;
	}
	.mv-bg{
		height: 100%;
	}
	.mv-detail{
		position: absolute;
		left: 0;
		bottom: 0;
	}
	.mv-img .mv-bg .mv-caption{
		top: inherit;
		bottom: 180px;
	}
}



@media screen and (min-width: 960px){
	.mv, .mv-slide{
		height: 750px;
	}
	.mv{
		padding: 0 0 100px;
	}
	.mv-ttl{
		padding: 0;
		font-size: 2.5rem;
	}
	.mv-ttl em{
		font-size: 4.0rem;
		letter-spacing: .1em;
	}
	.mv-detail{
		right: 0;
		top: 60px;
		padding: 30px 50px 70px;
		max-width: 500px;
	}
	.mv-detail:before{
		left: -25px;
		bottom: -30px;
	}
	.mv-map{
		left: -55px;
		max-width: 110px;
	}
	
	.mv-img{
		width: 100%;
		height: 100%;
	}
	.mv-img .inner{
		position: relative;
		display: flex;
		justify-content: flex-end;
		flex-direction: column;
		padding-bottom: 150px;
		height: 100%;
	}
	.mv-bg{
		position: absolute;
		left: 0;
		top: 0;
	}
}


@-webkit-keyframes bg-zoom-in {
	from {
		-webkit-transform-origin:50% 50%;
		transform-origin:50% 50%;
		-webkit-transform:scale(1, 1);
		transform:scale(1, 1)
	}
	to {
		-webkit-transform-origin:50% 50%;
		transform-origin:50% 50%;
		-webkit-transform:scale(1.1, 1.1);
		transform:scale(1.1, 1.1)
	}
}
@keyframes bg-zoom-in {
	from {
		-moz-transform:scale(1, 1);
		-ms-transform:scale(1, 1);
		-webkit-transform:scale(1, 1);
		transform:scale(1, 1)
	}
	to {
		-moz-transform:scale(1.1, 1.1);
		-ms-transform:scale(1.1, 1.1);
		-webkit-transform:scale(1.1, 1.1);
		transform:scale(1.1, 1.1)
	}
}
@-webkit-keyframes slide-in {
	from {
		bottom: -50px;
		opacity: 0;
	}
	to {
		bottom: 0px;
		opacity: 1;
	}
}
@keyframes slide-in {
	from {
		bottom: -50px;
		opacity: 0;
	}
	to {
		bottom: 0;
		opacity: 1;
	}
}

@-webkit-keyframes slide-in-discoverwest {
	from {
		left: -50px;
		opacity: 0;
	}
	to {
		left: 0;
		opacity: 1;
	}
}
@keyframes slide-in-discoverwest {
	from {
		left: -50px;
		opacity: 0;
	}
	to {
		left: 0;
		opacity: 1;
	}
}


/*  ページナビゲーション
============================================================================= */
.page-navigation{
	z-index: 1;
	width: 100%;
}
@media screen and (max-width: 959px){
	.page-navigationlist{
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 10;
		width: 100%;
	}
}
.page-navigationlist{
	display: flex;
	justify-content: center;
	align-items: center;
	flex: 1;
}
.page-navigationlist_item{
	flex: 1;
}
.page-navigationlist_item:not(:last-child){
	border-right: solid 1px #555;
}
.page-navigationlist_item.-top{
	letter-spacing: 0;
}
.dom-contents.-top .page-navigationlist_item.-top{
	display: none;
}
.page-navigationlist_item a{
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 5px 2px;
	height: 100%;
	min-height: 60px;
	text-align: center;
	color: #fff;
	font-weight: bold;
	text-shadow: rgb(0, 0, 0) 0 0 5px;
	transition: all 0.4s ease;
	background: #000;
}
.page-navigationlist_box{
	display: flex;
	flex-direction: column;
	text-align: center;
	font-weight: bold;
	letter-spacing: 0;
}
.page-navigationlist_box:after{
	content: attr(data-en);
	font-size: 1.0rem;
	font-weight: normal;
}
.page-navigationlist_item a:before {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 5px;
	margin-left: -15px;
	max-width: 30px;
	width: 100%;
	height: 3px;
	background: #186db3;
	transform: scale(0, 1);
	transition: 0.4s;
}
.-osaka .page-navigationlist_item.-osaka a:before,
.-kyoto .page-navigationlist_item.-kyoto a:before,
.-hyogo .page-navigationlist_item.-hyogo a:before,
.-nara .page-navigationlist_item.-nara a:before,
.-shiga .page-navigationlist_item.-shiga a:before,
.-wakayama .page-navigationlist_item.-wakayama a:before{
	transform: scale(1);
}


@media screen and (max-width: 959px){
	.page-navigation .select-departure{
		position: fixed;
		top: 0;
		right: 7px;
		z-index: 10;
		padding: 5px;
		border-radius: 0 0 4px 4px;
		background-color: rgba(255, 255, 255, 0.9);
		
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.2s ease;
	}
	.fixed .page-navigation .select-departure{
		opacity: 1;
		visibility: visible;
	}
	
	.fixed .page-navigationlist{
		transition: opacity 0.2s ease;
	}
	.nofixed .page-navigationlist,
	.nofixed .page-navigation .select-departure{
		opacity: 0;
		visibility: hidden;
	}
}

@media screen and (min-width: 960px){
	.page-navigation{
		position: sticky;
		margin-top: -82px;
		top: 0;
		width: 100%;
		background-color: rgba(0, 0, 0, 0.4);
		transition: background 0.4s ease;
		
	}
	.page-navigation .inner{
		padding: 20px 20px;
		border-radius: 4px;
	}
	.page-navigationlist_item{
		padding: 0 20px;
	}
	.page-navigationlist_item:not(:last-child){
		border-right-color: #fff;
	}	
	.page-navigationlist_item a{
		padding: 0 5px;
		min-height: inherit;
		background: none;
	}
	.page-navigationlist_box{
		margin-left: .5em;
		letter-spacing: .5em;
	}
	.page-navigationlist_item.-top .page-navigationlist_box{
		letter-spacing: .1em;
	}
	.page-navigationlist_item a:before{
		max-width: 80px;
		margin-left: -40px;
		bottom: -8px;
	}
	.page-navigationlist_item a:hover:before {
		transform: scale(1);
	}
	.page-navigationlist_box:after{
		margin-left: -.4em;
		font-size: 1.2rem;
		letter-spacing: .1em;
	}

	.fixed .page-navigation{
		position: fixed;
		top: 0;
		bottom: inherit;
		z-index: 10;
		margin-top: 0;
		background-color: rgba(255, 255, 255, 0.9);
	}
	.fixed .page-navigation .inner{
		display: flex;
		align-items: center;
		padding: 10px 20px;
	}
	.fixed .page-navigationlist_item{
		width: 100%;
		border-left-color: #323743;
	}
	.fixed .page-navigationlist_item:not(:last-child){
		border-right-color: #ccc;
	}
	.fixed .page-navigationlist_item a{
		color: #323743;
		text-shadow: none;
	}
	.page-navigation .select-departure{
		display: none;
		margin-left: 50px;
		width: 150px;
	}
	.fixed .page-navigation .select-departure{
		display: block;
	}
}

/*  コンテンツ共通
============================================================================= */
.ttl{
	font-size: 2.0rem;
	font-weight: bold;
	text-align: center;
}
.ttl.-bg{
	position: relative;
	padding-top: 40px;
	background-size: 50% auto!important;
}


.ttl-en{
	display: flex;
	flex-direction: column;
	font-size: 2.2rem;
	font-weight: bold;
	text-align: center;
	letter-spacing: .3em;
}
.ttl-en:after{
	content: "－ " attr(data-en) " －";
	margin-top: 5px;
	font-size: 1.2rem;
	font-weight: normal;
	letter-spacing: .1em;
}
@media screen and (min-width: 960px){
	.ttl.-bg{
		padding-top: 80px;
		background-size: 416px auto!important;
	}
	.ttl-en{
		font-size: 3.0rem;
	}
	.ttl-en:after{
		font-size: 1.6rem;
	}
}


/*  地図
============================================================================= */
.sect.-map .ttl{
	background: url("/kokunai/dynamic/jr/jrwkanko-kinki/_images/map_title.png") center top no-repeat;
}
.map-wrap{
	position: relative;
	margin-top: 30px;
}

@media screen and (min-width: 960px){
	.sect.-map .inner{
		position: relative;
	}
}
@media screen and (max-width: 959px){
	.map-box{
		overflow: hidden;
	}
	.map-box_inner{
		margin-left: -130px;
		margin-right: -130px;
	}
}

.target_dept_kokunai_OSA .js-mapfuki#osaka,
.target_dept_kokunai_OSA .js-mapfuki#nara,
.target_dept_kokunai_OSA .js-mapfuki#shiga,
.target_dept_kokunai_OSA .btbg-osaka,
.target_dept_kokunai_OSA .btbg-nara,
.target_dept_kokunai_OSA .btbg-shiga{ display: none; }



.map-box_train{
	position: absolute;
}
.map-box_train img{
	width: auto;
}

@media screen and (max-width: 959px){
	.map-box_train{
		transform: scale(0.4);
	}
	.map-box_train.-train01{right: 0;top: 1%;transform-origin: right center;}
	.map-box_train.-train02{left: 45%;top: 59%;transform-origin: left center;}
	.map-box_train.-train03{left: 24%;top: 19%;transform-origin: left center;}
}

@media screen and (min-width: 960px){
	.map-box_train.-train01{ right: 0; top: 38%; }
	.map-box_train.-train02{left: 48%;top: 65%;}
	.map-box_train.-train03{left: 34%;top: 26%;}
}

.hanrei{
	padding: 0 10px;
	background: #fff;
}
.hanrei-list{
	display: flex;
	flex-wrap: wrap;
}
.hanrei-list_item{
	display: flex;
	align-items: center;
	width: calc(100% / 3);
}
.hanrei-list_item:before{
	content: "";
	display: inline-block;
	width: 30px;
	height: 5px;
	border-radius: 50vw;
	margin-right: 10px;
}
.nozomi:before{ background: url("/kokunai/dynamic/jr/jrwkanko-kinki/_images/map_jr.png") center / 100% no-repeat; }
.kuroshio:before{ background-color: #387CBA; }
.maiduru:before{ background-color: #ff976b; }
.kounotori:before{ background-color: #ffcd5c; }
.hasidate:before{ background-color: #739e42; }
.kinosaki:before{ background-color: #c86ed2; }

@media screen and (min-width: 960px){
	.hanrei{
		position: absolute;
		right: 30px;
		bottom: 30px;
		padding: 20px;
		width: 22.890625%;
		border-radius: 4px;
		background: #fff;
	}
	.hanrei-list{
		display: flex;
		flex-wrap: wrap;
	}
	.hanrei-list_item{
		display: flex;
		align-items: center;
		width: calc(100% / 2);
	}
	.hanrei-list_item:before{
		content: "";
		display: inline-block;
		width: 30px;
		height: 5px;
		border-radius: 50vw;
		margin-right: 10px;
	}
}

/* 吹き出し */
.area-map_tooltip-box{
	position: absolute;
	z-index: 1;
}
.area-map_tooltip-box.is-open{
	z-index: 1;
}
.map-fuki_wrap{
	position: relative;
	padding: 20px;
	border-radius: 15px;
	border-width: 1px;
	border-style: solid;
	background: #fff;
}
.map-fuki{
	width: calc(100% - 10px);
}
.down .map-fuki{
	position: absolute;
	top: 0;
	padding-top: 10px;
}
.up .map-fuki{
	position: absolute;
	bottom: 0;
	padding-bottom: 10px;
}
.map-fuki_bt{
	margin-top: 10px;
}
.map-fuki_bt a{
	display: block;
	padding: 10px 20px;
	color: #fff;
	font-size: 1.4rem;
	text-align: center;
	background: #898989;
	transition: opacity 0.2s ease;
}
@media screen and (max-width: 959px){
	.area-map_tooltip-box{
		position: absolute;
		width: 100%;
	}
	.map-fuki_wrap{
		left: 5px;
	}
}
@media screen and (min-width: 960px){
	.map-fuki{
		width: 350px;
		transform: translateX(-50%);
	}
	.map-fuki_bt a:hover{
		opacity: .6;
	}
}

/* 矢印 */
.area-map_tooltip-arrow{
	position: absolute;
	left: 50%;
	margin-left: -15px;
}
.down .area-map_tooltip-arrow{
	bottom: 100%;
}
.up .area-map_tooltip-arrow{
	top: 100%;
}


.area-map_tooltip-arrow:before, .area-map_tooltip-arrow:after{
	position: absolute;
	content: "";
	transform: translateX(-50%);
}
.area-map_tooltip-arrow:before{
	left: 50%;
	z-index: 2;
	border: 14px solid transparent;
}
.area-map_tooltip-arrow:after{
	left: 50%;
	z-index: 1;
	border: 15px solid transparent;
}

.down .area-map_tooltip-arrow:before{
	bottom: calc(100% - 1px);
	border-bottom: 15px solid #FFF;
}
.down .area-map_tooltip-arrow:after{
	bottom: 100%;
	border-bottom: 15px solid #555;
}

@media screen and (min-width: 960px){
	.area-map_tooltip-arrow{
		margin-left: 0;
	}
}


.js-mapfuki{
	display: block;
	transition: opacity 0.2s ease;
}

@media screen and (min-width: 960px){
	.js-mapfuki:hover, .js-mapfuki.is-open{
		opacity: .6;
	}
}


.map-tooltip-inner{
	display: none;
	padding: 10px 20px 15px;
	width: 400px;
	border-radius: 10px;
	background: #fff;
	box-shadow: 0px 3px 3px 0px rgba(153, 153, 153, 0.3);
}
.map-tooltip dt{
	padding-bottom: 5px;
	text-align: center;
	border-bottom: solid 1px #ccc;
}
.map-tooltip dd{
	margin-top: 5px;
	font-size: 1.3rem;
	text-align: center;
}
.map-sect__bt{
	margin: 10px auto 0;
	max-width: 300px;
}
.map-sect__bt a{
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	padding: 10px;
	color: #fff;
	text-align: center;
	line-height: 1;
	font-weight: bold;
	border-radius: 50vw;
	background: #186db3;
	transition: all 0.4s ease;
}
.map-sect__bt a:hover{
	background-color: #7bb3e1;
}
.map-sect__bt.-recommend a{
	color: #335a84;
	border: solid 1px #335a84;
	background: #fff;
}

.map-sect__bt.-recommend a:hover{
	background-color: #cadeef;
}


.map-sect__bt a:hover{
	opacity: .6;
}
.map-sect__bt a .m-ico{
	position: relative;
	top: 2px;
	margin-left: 5px;
	font-size: 2.0rem;
	line-height: 1;
}




/*  エリア
============================================================================= */
.sect.-area .ttl.-bg{
	background: url("/kokunai/dynamic/jr/jrwkanko-kinki/_images/area_title.png") center top no-repeat;
}
.area-list{
	display: flex;
	flex-wrap: wrap;
	margin: 10px 5px 0 0;
}
.area-list_item{
	position: relative;
	margin: 10px 0 0 5px;
	width: calc(100% / 2 - 5px);
}
.area-list_box{
	position: relative;
}
.area-list_item h3{
	white-space: nowrap;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 1;
	margin-left: .25em;
	padding: 10px calc(20px - .5em) 10px 20px;
	width: 100%;
	max-width: 150px;
	color: #fff;
	font-size: 1.8rem;
	font-weight: bold;
	text-align: center;
	letter-spacing: .5em;
	border-radius: 50vw;
	background-color: rgba(0, 0, 0, 0.6);
	
	transition: top 0.2s ease, background-color 0.2s ease;
}
.area-list_item figure{
	position: relative;
	height: 0;
	padding-top: calc(350 / 500 * 100%);
}
.area-list_item figure img{
	transition:1s all;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
	vertical-align: bottom;	
}
.area-list_item figcaption{
	position: absolute;
	right: 10px;
	bottom: 5px;
	margin: 0 auto;
	color: #fff;
	font-size: 1.2rem;
	line-height: 1.2;
	text-shadow:
		black 1px 1px 2px, black -1px 1px 2px,
		black 1px -1px 2px, black -1px -1px 2px;
}
.area-list_bt li{
	margin-top: 5px;
	width: 100%;
}
.area-list_bt li:not(:first-child){
  margin-top: 5px;
}
.area-list_bt li a{
	position: relative;
	display: block;
	padding: 15px 5px;
	color: #186db3;
	text-align: center;
	letter-spacing: 0;
	line-height: 1;
	border-radius: 50vw;
	background-color: #fff;
	transition: all 0.4s ease;
}
.area-list_bt li:first-child a{
	color: #fff;
	background: #186db3;
}
.area-list_bt li:nth-child(2) a{
	color: #335a84;
	border: solid 1px #186db3;
}

@media screen and (min-width: 960px){
	.sect.-area .inner{
		position: relative;
	}
	.area-list{
		margin: 28px 0 0 -2px;
	}
	.area-list_item{
		margin: 2px 0 0 2px;
		width: calc(100% / 3 - 2px);
	}
	.area-list_item a:hover figure img{
		transform:scale(1.2,1.2);
		transition:1s all;
	}
	.area-list_item h3{
		max-width: 300px;
		font-size: 2.0rem;
	}
	.area-list_link{
		position: absolute;
		left: 0;
		top: 0;
		z-index: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);

		opacity: 0;
		visibility: hidden;
		transition: opacity 0.2s ease;
	}
	.area-list_bt{
		width: 100%;
		max-width: 300px;
	}
	.area-list_bt li{
		margin-top: 0;
		border-radius: 50vw;
	}
	.area-list_bt li:not(:first-child){
	  margin-top: 10px;
	}
	.area-list_bt li a{
		letter-spacing: .1em;
	}
	.area-list_bt li:first-child a:hover{
		background-color: #7bb3e1;
	}
	.area-list_bt li:nth-child(2) a{
		color: #335a84;
		border: none;
	}
	.area-list_bt li:nth-child(2) a:hover{
		background-color: #cadeef;
	}
	.area-list_bt li a .m-ico{
		margin-left: 5px;
		font-size: 2.0rem;
	}
	.is-active h3{
		z-index: 3;
		top: 70px;
		background-color: rgba(0, 0, 0, 0);
	}
	.is-active .area-list_link{
		padding: 60px 0 0;
		opacity: 1;
		visibility: visible;
	}
}




/*  新幹線紹介
============================================================================= */
.sect.-train{
	background: #f5fcfc;
}
.train-wrap{
	display: flex;
	flex-direction: column-reverse;
	margin: 0 10px;
	border: solid 8px #00b0eb;
	background: repeating-linear-gradient(-45deg, rgba(235, 250, 255, 80%), rgba(235, 250, 255, 80%) 4px, rgba(255, 250, 255, 100%) 2px, rgba(255, 250, 255, 100%) 8px);
}
.train-body{
	padding: 10px 10px 20px;
}
.train-ttl{
	color: #00b0eb;
	font-size: 1.6rem;
	font-weight: bold;
}
.train-ttl em{
	font-size: 2.5rem;
	font-weight: bold;
}
.train-txt{
	margin-top: 10px;
	line-height: 1.8;
}
.train-dl{
	display: flex;
	align-items: center;
	margin-top: 10px;
}
.train-dl dt{
	padding: 5px 15px;
	color: #fff;
	background: #00b0eb;
}
.train-dl dd{
	flex: 1;
	margin-left: 10px;
}
.train-photo figure{
	position: relative;
	height: 100%;
}
.train-photo img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
	vertical-align: bottom;
}
.train-photo_caption{
	position: absolute;
	right: 0;
	bottom: 3px;
	padding: 0 5px;
	color: #fff;
	font-size: 1.2rem;
    line-height: 1.2;
    text-shadow: black 1px 1px 2px, black -1px 1px 2px, black 1px -1px 2px, black -1px -1px 2px;
}

@media screen and (min-width: 960px){
	.train-wrap{
		justify-content: space-between;
		flex-direction: row-reverse;
		margin: 0;
	}
	.train-body{
		width: 60%;
		padding: 20px 50px 30px;
	}
	.train-ttl{
		font-size: 2.5rem;
	}
	.train-ttl em{
		font-size: 4.5rem;
	}
	.train-txt{
		margin-top: 20px;
	}
	.train-dl{
		margin-top: 20px;
	}
	.train-photo{
		width: 40%;
	}
}

/*  FAQ
============================================================================= */
.faq-dl{
	margin-top: 20px;
}
.faq-dl dt{
	overflow: hidden;
	cursor: pointer;
	position: relative;
	padding: 20px 35px 20px 50px;
	transition: all .5s ease;
}
.faq-dl dt:not(:first-of-type){
	border-top: solid 1px #ccc;
}

.faq-dl dt:before{
	position: absolute;
	left: 10px;
	top: 8px;
	color: #003B82;
	content: "Q.";
	font-size: 2.6rem;
}
.faq-dl dt:after{
	position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
	display: inline-block;
    font-family: 'Material Icons Round';
    content: "\e313";
	font-size: 2.6rem;
	transition: all .5s ease;
}
.faq-dl dt.is-active:after{
	transform: translateY(-50%) rotateZ(180deg);
}
.faq-dl dd{
	display: none;
	position: relative;
	padding: 20px 30px 20px 50px;
	background: #F4F5F5;
}
.faq-dl dd:before{
	position: absolute;
	left: 10px;
	top: 8px;
	content: "A.";
	color: #003B82;
	font-size: 2.6rem;
}
.faq-dl dd a{
	text-decoration: underline;
	transition: all .5s ease;
}
@media screen and (min-width: 1000px) {
	.faq-dl{
		margin-top: 30px;
	}
	.faq-sect .sect-ttl{
		margin: 0;
	}
	.faq-dl dt{
		padding: 20px 30px 20px 80px;
	}
	.faq-dl dt:before,
	.faq-dl dd:before{
		left: 20px;
		top: 12px;
	}
	.faq-dl dt:hover{
		opacity: .6;
	}
	.faq-dl dt:after{
		right: 15px;
	}
	.faq-dl dd{
		padding: 20px 30px 20px 80px;
	}
	.faq-dl dd a:hover{
		opacity: .6;
	}
}





/*  下層MV
============================================================================= */
.page-mv{
	overflow: hidden;
	position: relative;
}
.page-mv .inner{
	position: relative;
	z-index: 1;
}
.page-mv .mv-ttl{
	margin: 0 5px;
	padding-top: 40px;
}

.page-mv_body{
	width: 100%;
}
.page-mv_img{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}
.page-mv_img figure{
	height: 100%;
}	
.page-mv_img img{
	width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
    vertical-align: bottom;
}
.page-mv_img figcaption{
	position: absolute;
	right: 0;
	bottom: 3px;
	padding: 0 5px;
	color: #fff;
    font-size: 1.2rem;
    font-weight: 600;
    text-align: right;
    line-height: 1.3;
    letter-spacing: 0;
}
@media screen and (max-width: 959px){
	.page-mv .mv-ttl, .page-mv .page-mv_img{
		height: 170px;
	}
	.page-mv .mv-detail{
		position: inherit;
		left: inherit;
		top: inherit;
		margin-top: 0;
		padding: 25px 10px 10px;
	}
	.page-mv .mv-detail:before{
		left: inherit;
		bottom: calc(100% - 25px);
		right: 0;
		width: 70%;
	}
}
@media screen and (min-width: 960px){
	.page-mv{
		padding: 0 10px;
		height: 400px;
	}
	.page-mv .mv-ttl{
		margin: 0;
		padding-top: 75px;
	}
	.page-mv_img figcaption{
		bottom: inherit;
		top: 5px;
	}
}

.dccpn{
	position: relative;
	margin: 0 auto;
    width: 100%;
    max-width: 1236px;
}
.dccpnInr{
	text-align: center;
}
.dccpnLogo{
	margin: 0 auto;
	width: 80%;
}
.dccpnTxt{
	margin-top: 8px;
	font-weight: bold;
	letter-spacing: 0;
}
@media screen and (max-width: 959px){
	.dccpn{
		padding: 16px 8px 0;
		background: #eff6fb;
	}
	.dccpnInr{
		display: flex;
		align-items: center;
		padding: 16px;
		border-radius: 8px;
		background: #fff;
	}
	.dccpnLogo{
		width: 30%;
	}
	.dccpnTxt{
		flex: 1;
		margin: 0 0 0 8px;
	}
}

@media screen and (min-width: 960px){
	.dccpnInr{
		position: absolute;
		left: 0;
		top: -24px;;
		width: 300px;
		text-align: center;
	}
}

/*  エリアインフォメーション
============================================================================= */
.page-areainfo{
	padding: 10px;
	background: #f5f5f5;
}
.page-areainfo_body dt{
	font-size: 1.6rem;
	font-weight: bold;
}
.page-areainfo_body dt span{
	background:linear-gradient(transparent 70%, #ffd900 70%);
}
.page-areainfo_body dd{
	margin-top: 10px;
}
.page-areainfo_body-cpntxt:not(:first-child){
	margin-top: 10px;
}
.page-areainfo_body-cpntxt em{
	font-weight: bold;
}
.page-areainfo_logo{
	margin: 15px auto 0;
	width: 50%;
}
.page-areainfo_logo img{
	width: 100%;
	height: auto;
}

@media screen and (min-width: 960px){
	.page-areainfo{
		padding: 20px;
	}
	.page-areainfo_body dt{
		font-size: 1.8rem;
	}
	.page-areainfo_body dt span{
		display: inline-block;
		padding: 0 10px;
	}
	.page-areainfo_body dd{
		font-size: 1.4rem;
	}
	.page-areainfo_cpn{
		display: flex;
		justify-content: space-between;
	}
	.page-areainfo_logo{
		margin: 0 0 0 20px;
		width: 100%;
		max-width: 350px;
	}
}


/*  ページ内アンカー
============================================================================= */
.page-nav{
	padding: 20px 5px;
	width: 100%;
}
.page-nav_list{
	display: flex;
	justify-content: center;
}
.page-nav_list li{
	padding: 0 2px;
	width: 100%;
	transition: all 0.4s ease;
}
.page-nav_list li a{
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	padding: 5px 2px 0px;
	height: 100%;
	text-align: center;
	color: #186db3;
	font-weight: bold;
	border: solid 1px #186db3;
	transition: all 0.4s ease;
}
.page-nav_list li a .m-ico{
	font-size: 2.0rem;
	line-height: 1;
}
.page-nav_list li a:hover{
	opacity: .6;
}
.page-nav_box{
	flex: 1;
	display: flex;
	flex-direction: column;
}
.page-nav_box span{
	flex: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	line-height: 1.3;
}

.page-nav_list li.page-nav_recommend a{
  color: #335a84;
  border: solid 1px #335a84;
  background: #f3f6f9;
}

@media screen and (min-width: 960px){
	.page-nav{
		padding: 30px 0;
	}
	.page-nav_list li{
		max-width: 250px;
	}
	.page-nav_list li a{
		padding: 15px 10px 5px;
	}
	.page-nav_list li a:hover{
		opacity: .6;
	}
	.page-nav_box:after{
		content: attr(data-en);
		margin-top: 3px;
		font-size: 1.2rem;
		font-weight: normal;
		letter-spacing: 0;
	}
}



/*  プラン下のバナー
============================================================================= */
.plan-bn{
	padding: 0 0 30px;
}
.plan-bn_inner{
	margin: 0 auto;
	padding: 24px 16px;
	width: 100%;
	max-width: 1000px;
	text-align: center;
	background-color: rgba(255,255,255,0.5);
}
.plan-bn_txt{
	font-weight: bold;
}
.plan-bn_img{
	margin: 8px auto 0;
	width: 100%;
	max-width: 767px;
}
@media screen and (min-width: 960px){
	.plan-bn{
		padding: 0 0 50px;
	}
	.plan-bn_inner{
		padding: 56px 0;
		border-radius: 8px;
	}
	.plan-bn_txt{
		font-size: 1.8rem;
	}
	.plan-bn_img{
		margin: 16px auto 0;
	}
}


/*  ご注意事項
============================================================================= */
.att-box{
	position: fixed;
	left: 5px;
	bottom: 70px;
    z-index: 10;
	width: calc(100% - 10px);
	transition: .5s ease;
    visibility: hidden;
    opacity: 0;
	font-size: 1.2rem;
	line-height: 1.2;
}
.attfixed .att-box{
	visibility: visible;
	opacity: 1;
}

.att-box dt{
	margin-left: -2px;
	text-align: left;
}
.att-box dt span{
	display: inline-block;
	padding: 5px 10px;
	color: #fff;
	font-weight: 500;
	line-height: 1;
	border-radius: 5px;
	background: #c0c0c0;
}
.att-box dd{
	margin-top: -8px;
	padding: 10px 10px 5px;
	border: solid 1px #ccc;
	background-color: rgba(255, 255, 255, 0.8);
}
.att-box__list li{
	position: relative;
	padding-left: 1.2em;
}
.att-box__list li:not(:first-child){
	margin-top: 5px;
}
.att-box__list li:before{
	position: absolute;
	left: 0;
	top: 0;
	content: "・";
	display: inline-block;
}

@media screen and (min-width: 960px){
	.att-box{
		left: 50%;
		bottom: 30px;
		transform: translateX(-50%);
		transition: .5s ease;
		margin: 0 auto;
		width: 100%;
		max-width: 800px;
		font-size: 1.6rem;
	}
	.att-box dt{
		margin-left: 0;
		text-align: center;
	}
	.att-box dt span{
		padding: 7px 15px 5px;
	}
	.att-box dd{
		margin-top: -16px;
		padding: 25px 50px 15px;
	}
}


/*  プランカセット
============================================================================= */
.plan-contents{
	background: #eff6fb;
}
.experience-sect .ttl{
	background: url("/kokunai/dynamic/jr/jrwkanko-kinki/_images/experience_title.png") no-repeat center top;
}
.train-sect .ttl{
	background: url("/kokunai/dynamic/jr/jrwkanko-kinki/_images/train_title.png") no-repeat center top;
}
.event-sect .ttl{
	background: url("/kokunai/dynamic/jr/jrwkanko-kinki/_images/event_title.png") no-repeat center top;
}
.eat-sect .ttl{
	background: url("/kokunai/dynamic/jr/jrwkanko-kinki/_images/eat_title.png") no-repeat center top;
}
.sightseeing-sect .ttl{
	background: url("/kokunai/dynamic/jr/jrwkanko-kinki/_images/sightseeing_title.png") no-repeat center top;
}
.plan-sect_inner{
	margin-top: 20px;
	width: 100%;
	max-width: 1236px;
}
.plan-cassette_box{
	display: flex;
	flex-direction: column-reverse;
	margin: 20px 10px 0;
	padding-bottom: 20px;
	background: #fff;
}
.plan-cassette_areaname{
    margin-bottom: 20px;
    padding-bottom: 15px;
    width: 100%;
	font-size: 2.4rem;
	font-weight: bold;
	line-height: 1.2;
	letter-spacing: .5em;
    border-bottom: solid 2px #f5f5f5;
}
.sect:not(.theme-sect) .plan-cassette_areaname{
	display: none;
}
.js-plan-slide{
	display: none;
}
.js-plan-slide.slick-initialized{
	display: block;
}

.js-plan-slide .slick-dots{
	bottom: 10px;
	padding: 0 5px;
}
.js-plan-slide .slick-dots li{
	margin-right: 3px;
}
.js-plan-slide .slick-dots li button:before,
.js-plan-slide .slick-dots li button:hover:before,
.js-plan-slide .slick-dots li button:focus:before{
	color: #fff;
	opacity: .5;
}
.js-plan-slide .slick-dots li button:before{
	font-size: 1.2rem;
}
.js-plan-slide .slick-dots li.slick-active button:before{
	color: #fff;
	opacity: 1;
}

.plan-cassette_photo figure{
	position: relative;
}
.plan-cassette_photo img{
	width: 100%;
	height: auto;
	vertical-align: bottom;
}
.plan-cassette_photo figcaption{
	position: absolute;
	right: 0;
	top: 5px;
	padding: 0 5px;
	color: #fff;
	font-size: 1.2rem;
	line-height: 1.2;
	text-shadow: 1px 1px 0 #333, -1px -1px 0 #333, -1px 1px 0 #333, 1px -1px 0 #333, 0px 1px 0 #333, 0-1px 0 #333, -1px 0 0 #333, 1px 0 0 #333;
}
.nodl img{
	/* PCの右クリック禁止 */
	pointer-events: none;
	
    /* SPの長押し禁止 */
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    -moz-touch-callout:none;
    -moz-user-select:none;
    user-select:none;
}
.nodl{
	position: relative;
}
.nodl:before{
	position: absolute;
	left: 0;
	top: 0;
	content: "";
	width: 100%;
	height: 100%;
}

.plan-cassette_detail{
	position: relative;
}
.plan-cassette_detail-inner{
	overflow: hidden;
}
.plan-cassette_detail-inner.is-hide {
	height: 310px;
}
.plan-cassette_detail-inner.is-hide::before {
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 1;
	content: "";
	width: 100%;
	height: 60px; /*グラデーションで隠す高さ*/
	background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.9) 50%, #fff 100%);
	background: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.9) 50%, #fff 100%);
}
.plan-cassette_ttl{
	margin: 15px 20px 0;
	font-size: 1.8rem;
	font-weight: bold;
	line-height: 1.4;
}
.plan-cassette_ttl span{
	display: block;
	font-size: 1.6rem;
}
.plan-cassette_txt{
	margin: 10px 20px 0;
	line-height: 1.8;
}
.plan-cassette_txtBold{
	font-weight: bold;
	background: linear-gradient(transparent 60%, #ffd900 60%);
}
.plan-cassette_information{
	margin-top: 15px;
}
.plan-cassette_information-dl{
	margin: 0 10px;
	padding: 20px 10px;
	line-height: 1.8;
	background: #f8f8f8;
}
.plan-cassette_information-dl dt,
.plan-cassette_information-dl dd{
	padding: 0 10px;
	font-size: 1.4rem;
}
.plan-cassette_information-dl dt:not(:first-of-type){
	margin-top: 10px;
	padding-top: 10px;
	border-top: dotted 1px #ccc;
}
.plan-cassette_information-dl dt{
	font-weight: bold;
}
.plan-cassette_information-dl dd{
}
.plan-cassette_more{
	z-index: 2;
	position: absolute;
	right: 0;
	top: calc(100% - 20px);
	left: 0;
	width: 148px;
	margin: auto;
	padding: 3px 0;
	background: #186db3;
	color: #fff;
	font-size: 1.3rem;
	text-align: center;
	line-height: 1;
	cursor: pointer;
	transition: .2s ease;
	box-shadow: 0 0 3px rgba(0,0,0,.3);
}
.plan-cassette_more span{
	position: relative;
}
.plan-cassette_more span .m-ico{
	margin-left: 5px;
	font-size: 2.0rem;
}
.plan-cassette_more.is-show span .m-ico:before{
    -webkit-transform: rotateZ(180deg);
    transform: rotateZ(180deg);
}
.plan-cassette_more.is-show + .plan-cassette_detail-inner{
	margin-bottom: 30px;
}
.plan-cassette_more.is-show + .plan-cassette_detail-inner::before {
	display: none;
}


.plan-cassette_information-dl dd .bold{
	font-weight: bold;
}
.plan-cassette_dataTxt + .plan-cassette_dataTxt{
	margin-top: 8px;
}

ul.kome > li{
	position: relative;
	padding-left: 1.2em;
}
ul.kome > li:before{
	position: absolute;
	left: 0;
	top: 0;
	content: "※";
}
ul.list > li{
	position: relative;
	padding-left: 1em;
}
ul.list > li:not(:first-child){
	margin-top: 8px;
}
ul.list > li:before{
	position: absolute;
	left: 0;
	top: 0;
	content: "・";
}
.plan-cassette_columItem + .plan-cassette_columItem{
	margin-top: 8px;
}
@media screen and (min-width: 960px){
	.plan-sect_inner{
		margin: 50px auto 0;
	}
	.plan-cassette_box{
		flex-wrap: wrap;
		flex-direction: row;
		margin: 20px 0 0;
		padding: 50px;
	}
	.plan-cassette_box:nth-of-type(odd){
		flex-direction: row-reverse;
	}
	.plan-cassette_photo{
		width: 40%;
	}
	.plan-cassette_detail{
		margin: 0 0 0 40px;
		width: calc(60% - 40px);
	}
	.plan-cassette_box:nth-of-type(even) .plan-cassette_detail{
		margin: 0 40px 0 0;
	}
	.plan-cassette_ttl{
		margin: 0;
		font-size: 2.2rem;
	}
	.plan-cassette_txt{
		margin: 10px 0 0;
	}
	.plan-cassette_information-dl{
		display: flex;
		flex-wrap: wrap;
		margin: 0;
		padding: 20px;
	}
	.plan-cassette_information-dl dt,
	.plan-cassette_information-dl dd{
		padding: 0;
	}
	.plan-cassette_information-dl dd:not(:first-of-type){
		margin-top: 10px;
		padding-top: 10px;
		border-top: dotted 1px #ccc;
	}
	.plan-cassette_information-dl dt{
		width: 150px;
	}
	.plan-cassette_information-dl dd{
		width: calc(100% - 150px);
	}
	.plan-cassette_more:hover {
		opacity: .6;
	}
	.plan-cassette_more.is-show {
		top: calc(100% + 10px);
	}
	.plan-cassette_more.is-show + .plan-cassette_detail-inner{
		margin-bottom: 0;
	}
	.plan-cassette_colum{
		display: flex;
		margin-left: -16px;
	}
	.plan-cassette_columItem{
		margin: 0 0 0 16px!important;
		flex: 1;
	}
}



/*  ツアーカセット
============================================================================= */
.sect.-recommend .ttl{
	background: url("/kokunai/dynamic/jr/jrwkanko-kinki/_images/recommend_title.png") center top no-repeat;
}
.recommend-cassette{
	margin: 0 10px;
}

.recommend-cassette_item{
	margin-top: 10px;
}
.recommend-cassette_item a{
	display: flex;
	flex-wrap: wrap;
	padding: 10px;
	color: #323743;
	box-shadow: 0 0 0.2em rgb(0 0 0 / 20%);
	background: #fff;
}
.recommend-cassette_mesh{
	order: 1;
	position: relative;
	font-size: 1.2rem;
}
.recommend-cassette_mesh .m-ico{
	font-size: 150%;
}
.recommend-cassette_name{
	order: 2;
    font-size: 1.6rem;
    font-weight: bold;
}
.recommend-cassette_info{
	order: 4;
	flex: 1;
	margin: 10px 0 0 10px;
}


.recommend-cassette_evaluation{
}

.recommend-cassette_evaluation dd{
	display: flex;
	align-items: center;
}
.recommend-cassette_evaluationstar{
	display: flex;
	align-items: center;
	margin: 0 5px 0 0;
}
.recommend-cassette_evaluationstar .m-ico{
	color: #ccc;
	font-size: 1.5rem;
	letter-spacing: 0;
}


.recommend-cassette_evaluationstar.-star30 .m-ico:nth-child(-n+3),
.recommend-cassette_evaluationstar.-star35 .m-ico:nth-child(-n+3),
.recommend-cassette_evaluationstar.-star40 .m-ico:nth-child(-n+4),
.recommend-cassette_evaluationstar.-star45 .m-ico:nth-child(-n+4),
.recommend-cassette_evaluationstar.-star50 .m-ico:nth-child(-n+5){
	color: #e4b142;
}
.recommend-cassette_evaluationstar.-star35 .m-ico:nth-child(4),
.recommend-cassette_evaluationstar.-star45 .m-ico:nth-child(5){
	color: #e4b142;
	background: -webkit-linear-gradient(0deg, #e4b142 0 50%, #ccc 50% 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}



.recommend-cassette_link{
	text-align: right;
}
.recommend-cassette_images{
	opacity: 0;
	transition: opacity .3s linear;
}


.recommend-cassette_images.slick-initialized{
	opacity: 1;
}
.recommend-cassette_images .slick-prev, .recommend-cassette_images .slick-next{
	top: 50%;
	transform: translateY(-50%);
}
.recommend-cassette_images .slick-dots{
	bottom: 10px;
	justify-content: flex-start;
	padding: 0 5px;
	text-align: left;
}
.recommend-cassette_images .slick-dots li{
	margin-right: 3px;
}
.recommend-cassette_images .slick-dots li button:before,
.recommend-cassette_images .slick-dots li button:hover:before, .recommend-cassette_images .slick-dots li button:focus:before{
	color: #fff;
	opacity: .5;
}
.recommend-cassette_images .slick-dots li button:before{
	font-size: 1.2rem;
}
.recommend-cassette_images .slick-dots li.slick-active button:before{
	color: #fff;
	opacity: 1;
}
.recommend-cassette_photo{
	position: relative;
	overflow: hidden;
	padding-top: calc(350 / 500 * 100%);
}

.recommend-cassette_photo img{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%) scale(1.2,1.2);
	width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
	vertical-align: bottom;
}
.recommend-cassette_images-item-caption{
	margin-top: 5px;
	font-size: 1.2rem;
	line-height: 1.3;
}

.recommend-cassette_link{
	order: 5;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 20px 20px 0;
	padding: 10px 20px;
	letter-spacing: .1em;
	text-align: center;
	color: #3498DB;
	font-weight: bold;
	line-height: 1;
	border-radius: 50vw;
	border: solid 2px #3498DB;
	background: #fff;
}
.recommend-cassette_link .m-ico{
	position: relative;
	top: 1px;
	margin-left: 5px;
	font-size: 2.0rem;
	line-height: 1;
}
.recommend-sect_other{
	margin: 30px 10px 0;
}
.recommend-sect_other a{
	display: flex;
	justify-content: center;
	align-items: center;
	
	margin: 0 auto;
	padding: 15px 20px 15px 30px;
	max-width: 600px;
	color: #fff;
	font-weight: bold;
	border-radius: 50vw;
	background: #186db3;
	transition: opacity 0.2s ease;
}
.recommend-sect_other a:hover{
	opacity: .6;
}
.recommend-sect_other .m-ico{
	position: relative;
	top: 1px;
	margin-left: 5px;
    font-size: 2.0rem;
    line-height: 1;
}


@media screen and (min-width: 960px) {
	.recommend-sect_other{
		margin: 50px 0 0;
	}
	.recommend-sect_other a{
		font-size: 1.8rem;
	}
	.recommend-sect_other a:hover{
		opacity: .6;
	}
}

@media screen and (max-width: 959px){
	.recommend-cassette_images{
		order: 3;
		margin: 10px 0 0!important;
		width: 40%!important;
	}
	
	.recommend-cassette_images .slick-dots{
		display: none!important;
	}
	.recommend-cassette_mesh, .recommend-cassette_name{
		width: 100%;
	}
	.recommend-cassette_link{
		order: 5;
		width: 100%;
	}
}

@media screen and (min-width: 960px){
	
	.recommend-cassette{
		display: flex;
		flex-wrap: wrap;
		margin: 30px 0 0 -20px;
	}
	.recommend-cassette_item{
		margin: 20px 0 0 20px;
		width: calc(100% / 3 - 20px);
	}
	.recommend-cassette_item a{
		flex-direction: column;
		padding: 0 0 20px;
		height: 100%;
	    transition: opacity .2s;
	}
	.recommend-cassette_item a:hover{
		opacity: .6;
	}
	
	
	.recommend-cassette_images{
		order: 0;
	}
	.recommend-cassette_images-item-caption{
		position: absolute;
		left: 0;
		bottom: 2px;
		margin: 0;
		padding: 0 5px 0 70px;
		color: #fff;
		text-align: right;
		text-shadow:1px 1px 0 #333, -1px -1px 0 #333,
			-1px 1px 0 #333, 1px -1px 0 #333,
			0px 1px 0 #333,  0-1px 0 #333,
			-1px 0 0 #333, 1px 0 0 #333;

		width: 100%;
		font-size: 1.2rem;
	}
	.recommend-cassette_mesh{
		order: 1;
		margin: 10px 20px 0;
		font-size: 1.2rem;
	}
	.recommend-cassette_name{
		order: 2;
		display: flex;
		align-items: center;
		margin: 2px 20px 0	;
		font-size: 2.0rem;
	}
	.recommend-cassette_info{
		order: 3;
		margin: 10px 20px 0;
	}
	.recommend-cassette_evaluation{
		padding: 5px 20px;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 1.4rem;
		border-radius: 4px;
		background: #f5f5f5;
	}
	.recommend-cassette_evaluationstar{
		margin: 0 5px;
	}
	.recommend-cassette_evaluationstar .m-ico{
		font-size: 2.0rem;
	}
	.recommend-cassette_access dt{
		display: flex;
		align-items: center;
		width: 100%;
	}
	.recommend-cassette_access dt:after{
		flex: 1;
		display: inline-block;
		content: "";
		margin-left: 10px;
		height: 1px;
		border-top: dashed 1px #ccc;
	}

	.recommend-cassette_access dd{
		font-size: 1.4rem;
	}
	
	
	.recommend-cassette_images{
		float: inherit;
		order: -1;
		width: 100%;
		margin: 0!important;
	}
	.recommend-cassette_photo{
		position: relative;
	}
	.recommend-cassette_photo figcaption{
		padding: 0 5px 0 70px;
		width: 100%;
		text-align: right;
		transform: scale(1);
	}
}

@media screen and (min-width: 740px) and (max-width: 1120px){
	.recommend-sect{
		padding: 50px 20px;
	}
	.recommend-cassette_cassette{
		margin: 10px 0 0 -10px;
	}
	.recommend-cassette_list{
		margin: 10px 0 0 10px;
		width: calc(100% / 3 - 10px);
	}
	.recommend-cassette_list a{
		padding: 15px;
	}
}





/*  dpjr-link
============================================================================= */
.dpjr-wrap{
	border-top: solid 1px #ccc;
}
.dpjr-link{
	margin: 50px 10px;
	max-width: 700px;
	border-radius: 5px;
	background: #fff;
}
.dpjr-link a{
	position: relative;
	display: block;
	padding: 20px 40px 20px 20px;
	color: #0d72b8;
	text-align: center;
	border-radius: 5px;
	border: solid 3px #0d72b8;
	background: #fff;
	transition: all 0.4s ease;
}
.dpjr-link a:hover{
	opacity: .7;
}
.dpjr-link a:after{
	position: absolute;
	right: 5px;
	top: 50%;
	transform: translateY(-50%);
	display: block;
	font-size: 1.4rem;

	font-family: 'kkrs-dp' !important;
    content: "\e902";
	text-decoration: none;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    vertical-align: middle;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.dpjr-link span{
	display: inline-block;
	position: relative;
	padding-left: 5.0em;
	text-align: left;
	font-size: 1.6rem;
	font-weight: bold;
	line-height: 1.3;
}
.dpjr-link span:before{
	position: absolute;
	left: 10px;
	top: 50%;

	transform: translateY(-50%);
	display: block;
	font-size: 1.8rem;

	font-family: 'kkrs-dp' !important;
    content: "\e969＋\e960";
	text-decoration: none;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    vertical-align: middle;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.dpjr-link em{
	font-size: 1.2rem;
	font-weight: bold;
}

@media screen and (min-width: 960px){
	.dpjr-link{
		margin: 50px auto;
		max-width: 700px;
		border-radius: 5px;
		background: #fff;
	}
	.dpjr-link a{
		position: relative;
		display: block;
		padding: 20px 40px 20px 20px;
		color: #0d72b8;
		text-align: center;
		border-radius: 5px;
		border: solid 3px #0d72b8;
		background: #fff;
		transition: all 0.4s ease;
	}
	.dpjr-link a:hover{
		opacity: .7;
	}
	.dpjr-link a:after{
		position: absolute;
		right: 15px;
		top: 50%;
		-webkit-transform: translateY(-50%);
		-moz-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		-o-transform: translateY(-50%);
		transform: translateY(-50%);
		display: block;
		font-size: 2.6rem;

		font-family: 'kkrs-dp' !important;
		content: "\e902";
		text-decoration: none;
		speak: none;
		font-style: normal;
		font-weight: normal;
		font-variant: normal;
		text-transform: none;
		line-height: 1;
		vertical-align: middle;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	.dpjr-link span{
		display: inline-block;
		position: relative;
		padding-left: 7.0em;
		text-align: left;
		font-size: 2.2rem;
		font-weight: bold;
	}
	.dpjr-link span:before{
		position: absolute;
		left: 10px;
		top: 50%;
		-webkit-transform: translateY(-50%);
		-moz-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		-o-transform: translateY(-50%);
		transform: translateY(-50%);
		display: block;
		font-size: 3.4rem;

		font-family: 'kkrs-dp' !important;
		content: "\e969＋\e960";
		text-decoration: none;
		speak: none;
		font-style: normal;
		font-weight: normal;
		font-variant: normal;
		text-transform: none;
		line-height: 1;
		vertical-align: middle;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}
	.dpjr-link em{
		font-size: 2.6rem;
		font-weight: bold;
	}
}


/*  CLOSE
============================================================================= */
.close{
	margin: 100px auto 150px;
	text-align: center;
}
.close-txt{
	font-size: 3.0rem;
	font-weight: bold;
}
.close-bt{
	margin: 50px auto 0;
	padding: 0 20px;
	max-width: 500px;
}
.close-bt a{
	display: block;
	padding: 20px;
	color: #fff;
	font-size: 2.0rem;
	font-weight: bold;
	border-radius: 8px;
	background: #cc0d21;
	transition: all 0.4s ease;
}
.close-bt a:hover{
	text-decoration: none;
	opacity: .6;
}
.close-bt a span:after{
	margin-left: 20px;
	font-family: 'jtb-dom' !important;
	text-decoration: none;
	content: "\e905";
	speak: none;
	color: #fff;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	vertical-align: middle;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}






/* =============================================================================
    Slider
============================================================================= */
.slick-slider{position:relative;display:block;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent;width:100%}.slick-list{position:relative;display:block;overflow:hidden;margin:0;padding:0}.slick-list:focus{outline:none}.slick-list.dragging{cursor:pointer;cursor:hand}.slick-slider .slick-track,.slick-slider .slick-list{-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0);width:100%;height:100%}.slick-track{position:relative;top:0;left:0;display:block;margin-left:auto;margin-right:auto}.slick-track:before,.slick-track:after{display:table;content:''}.slick-track:after{clear:both}.slick-loading .slick-track{visibility:hidden}.slick-slide{display:none;float:left}[dir='rtl'] .slick-slide{float:right}.slick-slide img{display:block}.slick-slide.slick-loading img{display:none}.slick-slide.dragging img{pointer-events:none}.slick-initialized .slick-slide{display:block}.slick-loading .slick-slide{visibility:hidden}.slick-vertical .slick-slide{display:block;height:auto;border:1px solid transparent}.slick-arrow.slick-hidden{display:none}.slick-prev,.slick-next{position:absolute;top:50%;display:block;font-size:0;padding:0;cursor:pointer;border:none;outline:none;z-index:2;background:none}.slick-prev.slick-disabled:before,.slick-next.slick-disabled:before{opacity:.25}.slick-prev:before,.slick-next:before{font-size:3rem;line-height:1;opacity:.75;color:#3d2502;font-family:'Material Icons Round'}.slick-prev{left:-50px}.slick-next{right:-50px}.slick-prev:before{content:"\e5e0"}.slick-next:before{content:"\e5e1"}.slick-dotted.slick-slider{margin-bottom:0;padding-bottom:0px}.slick-dots{position:absolute;bottom:15px;display:flex;justify-content:center;width:100%}.slick-dots li{position:relative;display:inline-block;width:10px;height:10px;margin:0 5px;padding:0;cursor:pointer}.slick-dots li button{font-size:0;line-height:0;display:block;width:10px;height:10px;padding:5px;cursor:pointer;color:transparent;border:0;outline:none;background:transparent}.slick-dots li button:hover,.slick-dots li button:focus{outline:none}.slick-dots li button:hover:before,.slick-dots li button:focus:before{opacity:1}.slick-dots li button:before{font-size:1rem;line-height:20px;position:absolute;top:0;left:0;content:'●';font-family:Osaka,"ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;text-align:center;opacity:.25;color:#000;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.slick-dots li.slick-active button:before{opacity:.75;color:#000}.slick-dots>li:first-child:last-child{display:none}