@CHARSET "UTF-8";
/**************************************************/
/*bootstrap上書き                                 */
/**************************************************/
/***********************/
/*色                   */
/***********************/
.btn {/*baseの上書き*/
    font-weight:normal;
    border-radius: 0;
}
/*primary(水色系)*/
.btn-outline-primary{
	color: #234E77 !important;
	background-color: #fff !important;
	border: 2px solid #234E77 !important;
	position:relative;
	/*font-weight:bold;*/
}
.btn-primary,
.btn-primary:hover,
.btn-primary:active,
a.btn-primary,
a.btn-primary:hover,
a.btn-primary:active{
	cursor: pointer;
	color: #fff !important;
    background-color: #234E77 !important;
    border-color: #234E77 !important;
}

a.printBtn{/*印刷ボタン*/
	color: #234E77 !important;
	background-color: #fff !important;
	border: 2px solid #234E77 !important;
	
	display: none; /*縄文では印刷ボタンを非表示にする*/
}
.btn-outline-primary:hover, /*遷移用ボタン*/
a.printBtn:hover,
a.printBtn:active{/*印刷ボタン*/
	color: #fff !important;
	background-color: #234E77 !important;
	border: 2px solid #234E77 !important;
	opacity: 1 !important;
}
.btn-outline-primary:hover:after{
	color:#fff;
}

.bg-primary {
	background-color: #234E77 !important;
}
.text-primary {
	color: #234E77 !important;
}
a.text-primary:focus, a.text-primary:hover {
	color: #234E77 !important;

}
.text-muted{/*footerの利用規約*/
	color:#fff !important;
}
/*ドロップダウン*/
.dropdown a{
	opacity:1;

}
.dropdown-item.active, .dropdown-item:active {
	color: #fff !important;
	background-color: #234E77 !important;
}
/*ページャー*/
.page-link{/*通常*/
	background-color: #fff;
    border: 1px solid #234E77;
}
.page-item.active .page-link {/*現在のページ*/
	background-color: #234E77;
    border-color: #234E77;
}
/* MAPのタブ */
#p_Point_Map #mapNavi{
	border-left:2px solid  #234E77;
}
#p_Point_Map #mapNavi .nav-tabs li{
	background-color:#fff;
}
#p_Point_Map #mapNavi .nav-tabs li a{
	color: #234E77  !important;
}
#p_Point_Map #mapNavi .nav-tabs li.active{
	border-color: #234E77;
}

/*secondary(グレー)*/
.btn-secondary{
	color: #fff !important;
	background-color: #909090 !important;
	border-color: #909090 !important;
}
.bg-secondary {
	background-color: #909090 !important;
}
.text-secondary {
	color: #909090 !important;
}
a.text-secondary:focus, a.text-secondary:hover {
	color: #909090 !important;
}

/*gotoPageTopのカスタマイズ設定*/
#gotoPageTop #svgGotoPageCircleLine,
#gotoPageTop #svgGotoPageArrow{
	stroke: #234E77;
}
#gotoPageTop #svgGotoPageTopText{
	fill: #234E77;
}

/*共通カード色設定*/
/*ポイント・コース*/
.card.comLayout{
	box-shadow:3px 3px 0px #234E77;	/*藍色*/
}
/*イベントだけ色が違う*/
#p_Event_List .card.comLayout,
#p_Point_Detail .card.comLayout{
	box-shadow:3px 3px 0px #269CC5;	/*軽い藍色*/
}
#p_Event_List .card.comLayout .city,
#p_Point_Detail .card.comLayout .city{
	background-color: rgba(38, 156, 197,0.8);	/*軽い藍色*/
}

/**************************************************/
/*共通系                                          */
/**************************************************/

/*bootstrapの上書き：カード*/
.card{
	border-radius:0 !important;
}
.card-img-top {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}

/*共通カード上書き*/
/*スマホ時間隙調整*/
body.size_sm .card.comLayout,
body.size_xs .card.comLayout{
	margin-left:0.25rem;
	margin-right:0.25rem;
}

/***********************/
/*全体           */
/***********************/
html,
body{
	line-height:1.6 !important;/*base.css共通を上書き。base.cssはメディアクエリ内に記述があるが、siteに書いてあると悪さするのでメディアクエリ外した。*/
}
body {
	padding-top:0;
}
/*明朝を使いたい時*/
body.ja .mincho{
	font-family:"YuMincho","Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho","Sawarabi Mincho", serif;
}
/*中国語用フォント*/
body.zh-cn{
	font-family: "宋体-简";
}

/***********************/
/*ヘッダー             */
/***********************/
/*ドロワーボタン色設定*/
.drawer button{
	background-color: #234E77; /*藍色*/
}
.drawer button:hover{
	background-color: #234E77; /*藍色*/
}
.drawer button:focus {
	background-color: #234E77; /*藍色*/
}
.drawer .drawer-nav{
	background-color: rgba(35, 78, 119, 0.9); /*藍色 透過するためrgba*/
	z-index: 3002; /*ヘッダー要素より上に*/
}
.drawer .drawer-nav .drawer-menu{
	transition-timing-function: cubic-bezier(0.1, 0.57, 0.1, 1);
	transition-duration: 0ms;
	transform: translate(0px, 0px) translateZ(0px);
}
.drawer .drawer-nav .drawer-menu li:first-child{
	padding-top: 1.4rem; /*メニューを開くボタン高さを合わせる*/
}
/*スマホサイズでメニューを開くボタン高さを合わせる*/
body.size_xs .drawer .drawer-nav .drawer-menu li:first-child{
	padding-top: 0; /*メニューを開くボタン高さを合わせる*/
}
.drawer .drawer-nav a{
	color:#fff !important;
}
.drawer-hamburger-icon, .drawer-hamburger-icon:after, .drawer-hamburger-icon:before{
	background-color:#fff;
}



header{
	position: relative;
	z-index: 3000;
}
/*ヘッダー領域の調整*/
header #HeaderWhite{
	width: 100%;
	height: 5rem;
	background-color: #fff;
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
	position: fixed;
	z-index: 3001; /*タイトルが上に表示されるためここで調整*/
}
/*ヘッダー左の画像サイズ*/
header #HeaderWhite .logo svg{
	height: 3rem; /*ヘッダー領域と同じ大きさに*/
	width:  3rem; /*IEで必要*/
}
/*SNSアイコン*/
header #HeaderWhite .sns svg{
	width: 2rem;
	height: 2rem; /*IEで必要*/
	fill: #bababa;	/*グレー*/
}
/*SNSアイコン(スマホ)*/
header .drawer svg{
	width: 2rem;
	height: 2rem; /*IEで必要*/
	fill: #ffffff;	/*白*/
}

/*言語選択メニュー*/
header #HeaderWhite .dropdown{
	margin-right: 7.5rem; /*drawer分ずらす*/
}
/*bootstrap上書き borderの色変更*/
header #HeaderWhite .dropdown .border{
	background-color: #fff;
	border: 2px solid #234E77 !important; /*濃い青色*/
}
/*スマホサイズのヘッダー領域*/
body.size_xs header #HeaderWhite{
	height: 3.5rem;
}
/*スマホサイズのヘッダーline-height*/
body.size_xs header #HeaderWhite p{
	line-height: 1;
}
/*スマホサイズのヘッダー左の画像の隙間*/
body.size_xs header #HeaderWhite .logo{
	padding: 0.75rem 0;
}
/*スマホサイズのヘッダー左の画像サイズ*/
body.size_xs header #HeaderWhite .logo svg{
	height: 2rem; /*ヘッダー領域と同じ大きさに*/
	width: 2rem; /*IEで必要*/
}
/*スマホサイズの言語選択メニュー*/
body.size_xs header #HeaderWhite .dropdown{
	margin-right: 5rem; /*drawer分ずらす*/
}
/*スマホサイズの言語選択メニューの隙間*/
body.size_xs header #HeaderWhite .dropdown a{
	padding: 0.3rem 1rem;
}

/*ヘッダー画像の高さ*/
#headerImg{
	padding-top: 5rem;
	Height: 20rem;
}
/*スマホサイズのヘッダー画像の高さ*/
body.size_xs #headerImg{
	padding-top: 3.5rem;
}
/*ヘッダー画像の高さ固定*/
body.size_lg #headerImg,
body.size_md #headerImg,
body.size_sm #headerImg,
body.size_xs #headerImg{
	background-size: auto !important;
}
/*スマホサイズでヘッダー画像を小さく*/
body.size_xs #headerImg{
	Height: 10rem;
}

/*選択中の色*/
header .drawer .drawer-nav ul li.active{
	background: #1C4163; /*より濃い青色*/
}
/*選択中はaタグクリック禁止*/
header .drawer .drawer-nav ul li.active{
	pointer-events: none;
}
/*サイドメニューのSNS幅調整*/
header .drawer .drawer-nav ul li .snslist{
	width:10.6rem;
}
/*サイドメニューのSNSの隙間や下線を削除*/
header .drawer .drawer-nav ul li .snslist a{
	margin: 0;
	padding: 0;
	width: 2rem;
	border: 0;
}
/*サイドメニュー表示ボタンの大きさ調整*/
header .drawer-hamburger{
	padding: 1.9rem 1.5rem 2.35rem;
}
/*スマホサイズのヘッダーの高さと合わせる*/
body.size_xs header .drawer-hamburger{
	padding: 1rem 1rem 1.65rem;
}

/*英仏はサブタイトル非表示*/
body.en header .mincho a span,
body.fr header .mincho a span{
	display: none !important;
}

/***********************/
/*パンクズ             */
/***********************/
/*区切りを>に変更*/
.breadcrumb-item + .breadcrumb-item::before {
    content: ">";
}

/* パンクズ非表示ページ */
#p_Top #breadcrumb{
	display:none;
}
/***********************/
/*footer             */
/***********************/
footer{
	background: #234E77;
}
body.size_xs footer{
	font-size: 0.5rem;
}

/**************************************************/
/*フォント                                    */
/**************************************************/
/*ボタンに使用
------------------------------------*/
@font-face {
	font-family: 'Utsukushi';
	src: url('../fonts/Utsukushi.otf') format("opentype");
	src: url('../fonts/Utsukushi.eot'); /* IE9 Compat Modes */
	src: url('../fonts/Utsukushi.eot?#iefix') format('embedded-opentype'),
	/* IE6-IE8 */
	url('../fonts/Utsukushi.woff') format('woff'),
	/* Modern Browsers */
	url('../fonts/Utsukushi.ttf') format('truetype'),
	/* Safari, Android, iOS */
	url('../webfont.svg#svgFontName') format('svg');
	/* Legacy iOS */
}

/*bootstrapにないフォントサイズ設定*/
.fs-18{
	font-size: 1.125rem;  /*font-size: 18px*/
}
.fs-14{
	font-size: 0.875rem; /*font-size: 14px*/
}
/*スマホサイズで文字を小さくしたいのでここでスマホ用のサイズ設定*/
body.size_xs .xs_fs-18{
	font-size: 1.3rem
}
body.size_xs .xs_fs-11{
	font-size: 0.8rem
}


/**************************************************/
/*各ページ                                         */
/**************************************************/
/*top
*******************************************/
#p_Top .container-fluid{
	padding:0;
}



/************************************/
/*英仏資材がないため非表示にしている*/
/************************************/
#p_Top.en #Event, /*イベント非表示*/
#p_Top.fr #Event, /*イベント非表示*/
#p_Top.en #ExpPg, /*体験プログラム非表示*/
#p_Top.fr #ExpPg{ /*体験プログラム非表示*/
	display: none !important;
}

/************************************/
/*200312 英語版TOP改修*/
/**********************************{**/
#p_Top #MainSepalate{/*英語のみの表示*/
	display: none ;
}
#p_Top.en #MainSepalate{/*英語のみの表示*/
	display: block ;
	padding-top: 5rem;
}
#p_Top.en.size_xs #MainSepalate{/*英語のみの表示*/
	padding-top: 3.5rem;
}
#p_Top.en #MainSepalate .row{/*英語のみの表示*/
	margin-left:0;
	margin-right:0;
}
#p_Top.en #MainSepalate a h4{/*英語のみの表示*/
	color:#fff !important;
	font-weight:bold !important;
	font-size:1.8rem !important;
}
#p_Top .VisitMap h4{
	position: absolute;
	text-align:center;
	margin:auto;
	padding-left:7px;/*左詰めにみえるので*/
	top: 50%;
	width:100%;
}
#p_Top .AboutArea h4,
#p_Top .YatsugatakeArea h4,
#p_Top .HowToTravelArea h4{
	position:absolute;
	left:1.7rem;
	bottom:0.8rem;
	padding:0 7px;
}
#p_Top.en #Overview,
#p_Top.en #Mainimage,
#p_Top.en #Course,
#p_Top.en #Spot,/*コラム非表示*/
#p_Top.en #Column{ /*スポット非表示*/
	display: none !important;
}
#p_Top .VisitMap{
	background: url(../img/top/bg_VisitMap.jpg) no-repeat;
	background-size:cover;
	height:-webkit-calc(100vh - 5rem) ;
	height:calc(100vh - 5rem) ;
	position:relative;
}
#p_Top .AboutArea{
	background: url(../img/top/bg_AboutArea.jpg) no-repeat;
	background-size:cover;
	height:-webkit-calc(33.3vh - 1.66666666667rem) ;
	height:calc(33.3vh - 1.66666666667rem) ;
	position:relative;
}
#p_Top .YatsugatakeArea{
	background: url(../img/top/bg_YatsugatakeArea.jpg) no-repeat;
	background-size:cover;
	height:-webkit-calc(33.3vh - 1.66666666667rem) ;
	height:calc(33.3vh - 1.66666666667rem) ;
	position:relative;
}
#p_Top .HowToTravelArea{
	background: url(../img/top/bg_HowToTravelArea.jpg) no-repeat;
	background-size:cover;
	height:-webkit-calc(33.4vh - 1.66666666667rem) ;
	height:calc(33.4vh - 1.66666666667rem) ;
	position:relative;
}
/*スマホ・タブレットだと
ブラウザヘッダーもカウントしてしまうので数値を変更
************************************/
#p_Top.size_lg .VisitMap{
	height:-webkit-calc(100vh - 17rem) ;
	height:calc(100vh - 17rem) ;
}
#p_Top.size_lg .AboutArea{
	height:-webkit-calc(33.3vh - 5.66666666667rem) ;
	height:calc(33.3vh - 5.66666666667rem) ;
}
#p_Top.size_lg .YatsugatakeArea{
	height:-webkit-calc(33.3vh - 5.66666666667rem) ;
	height:calc(33.3vh - 5.66666666667rem) ;
}
#p_Top.size_lg .HowToTravelArea{
	height:-webkit-calc(33.4vh - 5.66666666667rem) ;
	height:calc(33.4vh - 5.66666666667rem) ;
}
#p_Top.en.size_lg #MainSepalate a h4,
#p_Top.en.size_md #MainSepalate a h4,
#p_Top.en.size_sm #MainSepalate a h4{
	font-size:1.3rem !important;
}
#p_Top.size_md .VisitMap,
#p_Top.size_sm .VisitMap{
	height:510px;
}
#p_Top.size_md .AboutArea,
#p_Top.size_sm .AboutArea{
	height:170px;
}
#p_Top.size_md .YatsugatakeArea,
#p_Top.size_sm .YatsugatakeArea{
	height:170px;
}
#p_Top.size_md .HowToTravelArea,
#p_Top.size_sm .HowToTravelArea{
	height:170px;
}

#p_Top.size_xs .VisitMap,
#p_Top.size_xs .AboutArea,
#p_Top.size_xs .YatsugatakeArea,
#p_Top.size_xs .HowToTravelArea{
	height:-webkit-calc(20vh - 1.66666666667rem) ;
	height:calc(20vh - 1.66666666667rem) ;
}


#p_Top.en.size_xs #MainSepalate a .VisitMap h4,
#p_Top.en.size_xs #MainSepalate a .AboutArea h4,
#p_Top.en.size_xs #MainSepalate a .YatsugatakeArea h4,
#p_Top.en.size_xs #MainSepalate a .HowToTravelArea h4{
	position: absolute;
	text-align:center;
	margin:auto;
	padding-left:0px;/*左詰めにみえるので*/
	top: 44%;
	left:0rem;
	width:100%;
	font-size: 1.35rem !important;
}


/*top: 共通設定 ボタン
*********************************/
#p_Top .btn-outline-primary i.material-icons,
#p_Top .course-btn i.material-icons {
	line-height: 1rem !important;
	font-size: 1.5rem;
	position: absolute;
	top: 50%;
	right: 0.25rem;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	vertical-align: bottom;
}

/*トップのボタンサイズ調整*/
#p_Top .btn-outline-primary,
#p_Top .btn-outline-primary.disabled, 
#p_Top .btn-outline-primary:disabled,
#p_Top .course-btn{
	width:21rem; /*当初18.75remだったが英語が入らないので広げた*/
}
#p_Top.size_xs .btn-outline-primary,
#p_Top.size_xs .btn-outline-primary.disabled, 
#p_Top.size_xs .btn-outline-primary:disabled,
#p_Top.size_xs .course-btn{
	width:16.25rem;
}

/*---------------------------------------------------------------------------------------------------------------------------------------------------*/
/*top: 画像スライダー
*******************************************/
/*ロゴとタイトルを中央に配置するためにrelative設定*/
#p_Top #Mainimage{
	position: relative;
	padding-top: 5rem; /*ヘッダーの高さだけ隙間を作る*/
}
/*スマホサイズのヘッダーに合わせる*/
#p_Top #Mainimage{
	padding-top: 3.5rem; /*ヘッダーの高さだけ隙間を作る*/
}
/*インジケーターの形変更*/
#p_Top #Mainimage .carousel-indicators li{
	margin-right: 15px;
	margin-left: 15px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
}
/*インジケーターの形変更*/
#p_Top.size_xs #Mainimage .carousel-indicators li{
	margin-right: 5px;
	margin-left: 5px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
}
/*画像スライダーの高さ設定*/
#p_Top #Mainimage .carousel-item,
#p_Top #Mainimage .carousel-item img{
	height: auto; /*画像の高さに合わせる*/
	object-fit: cover;
	object-position: center top;
    font-family: 'object-fit: cover; object-position: center top;';
}
#p_Top.size_xl #Mainimage .carousel-item,
#p_Top.size_xl #Mainimage .carousel-item img{
	height: 95vh; /*モニターの高さに合わせる*/
}

/*スライド内のロゴとタイトルの設定*/
#p_Top #Mainimage .TitleLogo{
	position: absolute;
	margin: 0 auto;
	width: 90%;
	top: 50%;
    left: 0;
    right:0;
    color: #fff;
    text-shadow: 2px 2px 2px #333;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
}
/*スマホサイズでロゴを小さく*/
#p_Top.size_xs #Mainimage .TitleLogo svg{
	width: 10%;
}

/*英仏はスライダー内のキャッチコピーを非表示*/
#p_Top.en.size_sm #Mainimage .TitleLogo h1,
#p_Top.en.size_sm #Mainimage .TitleLogo h2,
#p_Top.fr.size_sm #Mainimage .TitleLogo h1,
#p_Top.fr.size_sm #Mainimage .TitleLogo h2{
	display: none !important;
}

/*top: 概要
*********************************/
/*スマホ時のタイトル横の日本遺産ロゴは非表示*/
#p_Top.size_xs #Overview .JapanLogo:after{
	display: none;
}
/*スマホ時の日本遺産ロゴ*/
#p_Top.size_xs #Overview img{
	width: 10%;
}

/*top:スライダーコントロール共通
*********************************/
/*矢印の調整*/
#p_Top .carousel-control-prev{
	background: url(../img/top/btn_prev.svg) no-repeat;
	background-position: left center;
	left: -4%;
	width: 5%;
}
#p_Top .carousel-control-next{
	background: url(../img/top/btn_next.svg) no-repeat;	
	background-position: right center;
	right: -4%;
	width: 5%;
}
/*各スライダーの外に出す量を調整*/
#p_Top.size_md .carousel-control-prev{
	left: -7%;
}
#p_Top.size_md .carousel-control-next{
	right: -7%;
}
#p_Top.size_sm .carousel-control-prev{
	left: -6.6%;
}
#p_Top.size_sm .carousel-control-next{
	right: -6.6%;
}
#p_Top.size_xs .carousel-control-prev{
	left: -4%;
}
#p_Top.size_xs .carousel-control-next{
	right: -4%;
}
/*一番小さいサイズは大きさも変更*/
#p_Top.size_xs .carousel-control-prev,
#p_Top.size_xs .carousel-control-next{
	background-size:20px;
}

#p_Top .carousel-control-next-icon:before,
#p_Top .carousel-control-prev-icon:before {
	content:'' !important;	/*base.cssを打ち消し*/
}

/*top:カード系共通
*********************************/
#p_Top .card{
	border:none;	/*枠線をとる*/
}
#p_Top .card.comLayout .card-body{
	border-bottom-right-radius: 0 !important;
	border-bottom-left-radius: 0 !important;
}
/*カード個々の外側*/
#p_Top .topComCardOuter{
	padding:0 !important;
}

/*card-title*/
#p_Top .card-title{
	height: 3rem;
	overflow: hidden;
	line-height: 1.5rem;
}

/*TOPページEvent系のカード共通
---------------------------------*/
/*カードの高さ*/
#p_Top .comEvent .card {
    min-height: 21.5rem;
}
#p_Top.size_md .comEvent .card,
#p_Top.size_sm .comEvent .card{
	min-height: 17.5rem;
}
#p_Top.size_xs .comEvent .card{
    min-height: 17.5rem;
}

/*画像の高さ*/
#p_Top .comEvent .card-img-top{
	height: 13rem;
}
#p_Top.size_md .comEvent .card-img-top,
#p_Top.size_sm .comEvent .card-img-top,
#p_Top.size_xs .comEvent .card-img-top{
    height: 9rem;
}


/*top: イベント
*********************************/
/*背景色設定*/
#p_Top #Event{
	background: #FDF3F2; /*薄い赤色*/ 
}
/*イベント独自の文字色設定*/
#p_Top #Event h4 a{
	color: #ED746B !important; /*ピンク色*/
}
/*カードに色指定*/
#p_Top #Event .card{
	box-shadow:3px 3px 0px #ED746B;	/*ピンク*/
}

#p_Top #Event .card .city{
	background-color: rgba(237, 116, 107, 0.8);	/*ピンク*/
}

#p_Top #Event .card .category{
	color: #ED746B; /*ピンク色*/
}


/*top: コラム
*********************************/
/*背景色設定*/
#p_Top #Column {
    background-color: #E0F4E3 /*薄い緑色*/
}
/*コラム独自の文字色設定*/
#p_Top #Column h4 a{
	color: #48BE5B !important; /*明るい緑色*/
}

/*カードに色指定*/
#p_Top #Column .card{
	box-shadow:3px 3px 0px #48BE5B; /*明るい緑色*/
}

#p_Top #Column .card .city{
	background-color: rgba(72, 190, 91, 0.8);/*明るい緑色*/
}

#p_Top #Column .card .category{
	color: #48BE5B; /*明るい緑色*/
}



/*top: 体験プログラム
*********************************/
/*背景色設定*/
#p_Top #ExpPg{
	background-color: #EDF6FA; /*薄い水色*/
}
/*体験プログラム独自の文字色設定*/
#p_Top #ExpPg h4 a{
	color: #269CC5 !important; /*濃い水色*/
}
/*カードに色指定*/
#p_Top #ExpPg .card{
	box-shadow:3px 3px 0px #269CC5; /*濃い水色*/
}

#p_Top #ExpPg .card .city{
	background-color: rgba(38, 156, 197, 0.8);/*濃い水色*/
}

#p_Top #ExpPg .card .category{
	color: #269CC5; /*濃い水色*/
}

/*top: コース
*********************************/
/*背景画像設定*/
#p_Top #Course{
	background:url(../img/top/bg_course.jpg) no-repeat center;
	background-size:cover;
}
/*コースボタンだけ白色なのでコースのみの独自対応*/
#p_Top #Course .course-btn{
	border: 2px solid #fff;
	position: relative;
}

/*top: Spot
*********************************/
#p_Top #Spot{
	background:url(../img/top/bg_spot.jpg) no-repeat center;
	background-size:cover;
}

/*イベント独自の文字色設定*/
#p_Top #Spot h4 a{
	color:#234E77 !important; /*藍色*/
}

/*カードの設定上書き*/

/*カードの高さ*/
#p_Top #Spot .card {
	min-height: 18rem;
}
#p_Top.size_xl #Spot .card{
	min-height: 20rem;
}
#p_Top.size_md #Spot .card {
	min-height: 14.5rem;
}

/*画像の高さ*/
#p_Top #Spot .card-img-top{
	height: 10rem;
}
#p_Top.size_xl #Spot .card-img-top {
	height: 12rem;
}
#p_Top.size_md #Spot .card-img-top {
    height: 7rem;
}

/*タイトル*/
#p_Top #Spot .card-title{
   color:#234E77; /*藍色*/
}

/*詳細*/
#p_Top #Spot .card-text {
	height: 2.5rem;
	overflow: hidden;
	font-size:0.875rem;
}

/*top:セクション movie
*********************************/
#p_Top #Movie{
	background-color: #234E77 /*濃い青色*/
}
#p_Top #Movie iframe{/*動画の高さ指定 画面幅別*/
	height:36rem;
}
#p_Top.size_lg #Movie iframe{/*動画の高さ指定 画面幅別*/
	height:28rem;
}
#p_Top.size_md #Movie iframe{/*動画の高さ指定 画面幅別*/
	height:20rem;
}
#p_Top.size_sm #Movie iframe{/*動画の高さ指定 画面幅別*/
	height:16rem;
}
#p_Top.size_xs #Movie iframe{/*動画の高さ指定 画面幅別*/
	height:10rem;
}
/*ムービーボタンは白色なので対応*/
#p_Top #Movie .course-btn{
	border: 2px solid #fff;
    position: relative;
}
/*top:セクション NEWS
*********************************/
#p_Top #News{
	background-color: #EFEFEF;
}
/*facebookボタンの画像のサイズ*/
#p_Top #News #facebook-banner img{
	width: 21rem;
}
#p_Top.size_xs #News #facebook-banner img{
	width: 16.345rem;
}

/*mdサイズでBoxからはみ出るので幅を変える*/
#p_Top.size_md #News .newslist .btn-outline-primary{
	width: 17rem;
}


/*top:セクション インスタグラム
*********************************/
#p_Top #Instagram{
	background: #F7F7F7;
}
#p_Top #Instagram h2{
	background: #F7F7F7;
	background:url(../common/svg/icon_instagram.svg) no-repeat center top;
	background-size:2.25rem !important;
}

/*top:セクション バナー一覧
*********************************/
/*5カラムに設定*/
#p_Top #Bannerlist .w-20{
	margin-right: 2.5%;
	width: 18%;
}
/*スマホサイズで2カラムに設定*/
#p_Top.size_xs #Bannerlist .w-20{
	margin-right: 2%;
	width: 48%;
	display: inline-block;
}
/*偶数はmargin-rightを0*/
#p_Top.size_xs #Bannerlist .w-20.even{
	margin-right: 0;
}
#p_Top #Bannerlist a{
	opacity:1;
}
#p_Top #Bannerlist p{
	color: #462E31;
}

/*top:セクション TOPのみにあるフッター
*********************************/
#p_Top #ContetsFooter_top{
	background-color: #F4F5F5;
}




/*各ページ共通部分まとめ
----------------------------------------------*/
/*ページ全体の背景色*/
#p_Story,
#p_Access,
#p_Sitemap,
#p_Terms,
#p_Link{
	background-color: #F7F7F7; /*灰色*/
}
/*ヘッダー画像のサイズ、位置*/
#p_Story #headerImg,
#p_Point_Detail #headerImg,
#p_Course_List #headerImg,
#p_Course_Detail #headerImg,
#p_Access #headerImg,
#p_Movie #headerImg,
#p_Event_List #headerImg,
#p_Event_Detail #headerImg,
#p_Announce_List #headerImg,
#p_Announce_Detail #headerImg,
#p_Sitemap #headerImg,
#p_Download_List #headerImg,
#p_Terms #headerImg,
#p_Link #headerImg{
	background-position: center 5rem;
	background-repeat: no-repeat;
	background-size:100%;
}
/*スマホサイズのヘッダー画像のサイズ、位置*/
#p_Story.size_xs #headerImg,
#p_Point_Detail.size_xs #headerImg,
#p_Course_List.size_xs #headerImg,
#p_Course_Detail.size_xs #headerImg,
#p_Access.size_xs #headerImg,
#p_Movie.size_xs #headerImg,
#p_Event_List.size_xs #headerImg,
#p_Event_Detail.size_xs #headerImg,
#p_Announce_List.size_xs #headerImg,
#p_Announce_Detail.size_xs #headerImg,
#p_Sitemap.size_xs #headerImg,
#p_Download_List.size_xs #headerImg,
#p_Terms.size_xs #headerImg,
#p_Link.size_xs #headerImg{
	background-position: center;
}
/*検索画面に余白を持たせる*/
#p_Point_Map.size_sm,
#p_Point_List.size_sm,
#p_Course_List.size_sm.isRefine #sidebar-container,
#p_Event_List.size_sm.isRefine #sidebar-container{
	padding-top: 5.5rem;
}
#p_Point_Map.size_xs,
#p_Point_List.size_xs,
#p_Course_List.size_xs.isRefine #sidebar-container,
#p_Event_List.size_xs.isRefine #sidebar-container{
	padding-top: 4rem;
}

/*概要
----------------------------------------------*/
/*ヘッダー画像*/
#p_Story #headerImg{
	background-image: url(../img/story/bg_pageimg.jpg);
}
/*section内の背景色*/
#p_Story .bg-sky{
	background-color: #DBF5FC; /*薄い水色*/
}
/*ストーリ概要内のリンク文字色*/
#p_Story .bg-sky a{
	color: #269CC5 !important;
}
/*スマホ時のタイトル横の日本遺産ロゴは非表示*/
#p_Story.size_xs .JapanLogo:after{
	display: none;
}
/*スマホ時の日本遺産ロゴ*/
#p_Story.size_xs .JapanLogo img{
	width: 10%;
}

/*スポット マップ
----------------------------------------------*/
/*body要素を上書き*/
#p_Point_Map,
#p_Point_List{
	padding-top: 5rem;
}
/*header要素を上書き*/
#p_Point_Map header,
#p_Point_List header{
	position: fixed;
	width: 100%;
	height: 5rem;
	top: 0;
	background: #fff;
}
#p_Point_Map.size_xs header,
#p_Point_List.size_xs header{
	height: 3.5rem;
}
/*背景色設定*/
#p_Point_Map #contents,
#p_Point_List #contents{
	background: #F7F7F7; /*灰色*/
}
/*パンくずと検索結果をヘッダーに合わせる*/
#p_Point_Map #contents .container{
	max-width: 100%;
}

/*フランス語で崩れたためボタンの文字サイズを小さくする*/
#p_Point_Map.fr #contents #mapContents #mapNavi #sidebar-container #search #refineBtnGroup input,
#p_Point_Map.fr #contents #mapContents #mapNavi #sidebar-container #search #refineBtnGroup a,
#p_Point_List.fr #contents #sidebar-container #refineBtnGroup input,
#p_Point_List.fr #contents #sidebar-container #refineBtnGroup a,
#p_Course_List.fr #contents #sidebar-container #refineBtnGroup input{
	font-size: 0.8rem;
}

/*スポット
----------------------------------------------*/
/*ヘッダー画像*/
#p_Point_Detail #headerImg{
	background-image: url(../img/point/bg_pageimg.jpg);
}
/*スマホの時住所などが被らないように調整*/
#p_Point_Detail #contents #pointInfo .row dd{
	padding-left: 25px;
}

/*コース
----------------------------------------------*/
/*ヘッダー画像*/
#p_Course_List #headerImg,
#p_Course_Detail #headerImg{
	background-image: url(../img/course/bg_pageimg.jpg);
}

/*アクセス
----------------------------------------------*/
/*ヘッダー画像*/
#p_Access #headerImg{
	background-image: url(../img/access/bg_pageimg.jpg);
}
/*市町村ごとの点線*/
#p_Access .DottedLine{
	border-bottom: 2px dotted #707070;
}

/*Movie
----------------------------------------------*/
/*ヘッダー画像*/
#p_Movie #headerImg{
	background-image: url(../img/movie/bg_pageimg.jpg);
}
/*再生ボタンを真ん中に配置するためにrelative*/
#p_Movie .card .card-img-top{
	position: relative;
}
/*再生ボタンの位置調整*/
#p_Movie .card .card-img-top a.icoPlay {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
/*再生ボタンのサイズ*/
#p_Movie .card .card-img-top a.icoPlay i {
    font-size: 7rem;
}
/*モーダルがヘッダーの下に表示されてしまうためheaderのz-indexを動画ページだけ下げる*/
#p_Movie header{
	z-index: 100;
}
/*スマホ時のモーダル位置調整*/
#p_Movie.size_xs #contents .modal-dialog{
	margin: -3rem 0.5rem 0.5rem;
}

/*イベント
----------------------------------------------*/
/*ヘッダー画像*/
#p_Event_List #headerImg,
#p_Event_Detail #headerImg{
	background-image: url(../img/program/bg_pageimg.jpg);
}

/*コラム
----------------------------------------------*/
/*コラムの区切り線 bootstrap設定の上書き*/
#p_Event_Detail #eventType3 hr{
    border-top: 1px solid #707070 !important;
}
#p_Event_Detail #eventType3 h2{
	color:#234E77;
}
/*非表示設定 メイン画像*/
#p_Event_Detail #eventType3 #mainImage{
    display:none;
}
/*リンクのスタイル*/
#p_Event_Detail #eventType3 a{
	font-weight:bold;
	color:#000 !important;
}

/*NEWS
----------------------------------------------*/
/*ヘッダー画像*/
#p_Announce_List #headerImg,
#p_Announce_Detail #headerImg{
	background-image: url(../img/announce/bg_pageimg.jpg);
}

/*サイトマップ
----------------------------------------------*/
/*ヘッダー画像*/
#p_Sitemap #headerImg{
	background-image: url(../img/sitemap/bg_pageimg.jpg);
}
/*▲マーク位置調整用にrelativeを追加*/
#p_Sitemap a{
	position: relative;
}
/*▲マーク*/
#p_Sitemap .Delta:before{
	content: '';
	width: 0;
	height: 0;
	top: 42%;
	left: -20px;
	border-width: 6px 8px;
	border-style: solid;
	border-color: transparent transparent transparent #000;
	position: absolute;
	transform: translate(0, -50%);
}

/*ダウンロード
----------------------------------------------*/
/*ヘッダー画像*/
#p_Download_List #headerImg{
	background-image: url(../img/download/bg_pageimg.jpg);
}


/*利用規約
----------------------------------------------*/
/*ヘッダー画像*/
#p_Terms #headerImg{
	background-image: url(../img/terms/bg_pageimg.jpg);
}

#p_Terms ul li .lh{
	line-height: 2.25;
}

/*リンク集
----------------------------------------------*/
/*ヘッダー画像*/
#p_Link #headerImg{
	background-image: url(../img/link/bg_pageimg.jpg);
}
/*通常は2カラム*/
#p_Link .bg-white li{
	display:inline-block;
	width:45.5%;
	vertical-align:top;
	position:relative;
}
/*スマホサイズで1カラム*/
#p_Link.size_sm .bg-white li,
#p_Link.size_xs .bg-white li{
	width:100%;
}
/*→アイコン*/
	#p_Link .bg-white li:before {
    content: '';
    width: 0;
    height: 0;
    top: 42%;
    left: -20px;
    border-width: 6px 8px;
    border-style: solid;
    border-color: transparent transparent transparent #000;
    position: absolute;
    transform: translate(0, -50%);
}


 /*-------------------
印刷用css
★体験プログラムのオリジナルスタイルはsite.cssに追記

・IE11       → 初期設定「縮小して全体を表示」に揃える
・Edge       → 初期設定「縮小して全体を表示」に揃える
・firefox    → 初期設定「縮小して全体を表示」に揃える
・chrome     → 初期設定「100%」に揃える
・Mac chrome → 初期設定「100%」に揃える
・Mac safari → 初期設定「用紙サイズに合わせて縮小」に揃える
--------------------*/
@media print{
	/*体験プログラム画像 高さ指定*/
	#p_Event_Detail #eventType100 #mainImage{
		height:16rem !important;
	}
	/*通常イベント はpage.cssで文字大きめ設定だが、体験プログラムは普通サイズでOKなので*/
	#p_Event_Detail #eventType100 #detailArea{
		font-size:1rem !important;
	}
}

/*Not Fuundページ暫定対応*/
#p_Notfound #NotFound{
	padding-top: 5rem;
}