@CHARSET "UTF-8";
/**************************************************/
/*bootstrap上書き                                 */
/**************************************************/

/***********************/
/*色                   */
/***********************/
/*primary(水色系)*/
.btn-primary,
.btn-outline-primary:hover{
	color: #fff !important;
	background-color: #4BC6EA !important;
	border-color: #4BC6EA !important;
}
.btn-outline-primary:hover{
	opacity: 1;
}

.btn-outline-primary,
.btn-outline-primary.disabled, 
.btn-outline-primary:disabled{
	color:#4BC6EA !important;
	background-color: #fff;
	border-color: #4BC6EA;
	
}

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

}
/*ドロップダウン*/
.dropdown-item.active, .dropdown-item:active {
	color: #fff !important;
	background-color: #4BC6EA !important;
}
/*ページャー*/
.page-item.active .page-link {
    background-color: #4BC6EA;
    border-color: #4BC6EA;
}

/* MAPのタブ */
#p_Point_Map #mapNavi{
	border-left:2px solid  #4BC6EA;
}
#p_Point_Map #mapNavi .nav-tabs li{
	background-color:#fff;
}
#p_Point_Map #mapNavi .nav-tabs li a{
	color:#4BC6EA  !important;
}
#p_Point_Map #mapNavi .nav-tabs li.active{
	border-color: #4BC6EA;
}

/*gotoPageTopの色設定*/
#gotoPageTop #svgGotoPageCircleLine,
#gotoPageTop #svgGotoPageArrow{
	stroke: #4BC6EA;
}
#gotoPageTop #svgGotoPageTopText{
	fill: #4BC6EA;
}

/*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;
}



/***********************/
/*ヘッダー             */
/***********************/
/*ハンバーガーメニュー四角枠 */
.navbar-light .navbar-toggler {
	border-color:#fff;
}
/*アクティブ時*/
#leftNavi .nav-item.active a span{
	border-bottom:1px solid #000;
	color: #222;
}
/*アクティブ時(スマホ)*/
body.size_xs .nav-item.active a span,
body.size_sm .nav-item.active a span,
body.size_md .nav-item.active a span{
	border-bottom:1px solid #fff !important;
	color: #fff !important;
}

/*英語時のヘッダー調整*/
body.size_xs header .navbar #spNavBar {
	margin-left: 0.3rem;
	margin-right: 0.3rem;
}
body.size_xs.en header .navbar #spNavBar .navbar-brand{
	font-size:0.87rem;
	margin-right:0.1rem;
	width:46%;
	line-height:1;
	white-space: normal;
}
body.size_xs.en header .navbar #spNavBar #navbarDropdownSp{
	font-size:0.87rem;
}

body.size_xs.en header .navbar #spNavBar .dropdown{
	padding-right:0!important;
}

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

/**************************************************/
/*共通系                                          */
/**************************************************/
/*ヘッダーの画像*/
#headerImg{
	Height:10rem;
	background-size:cover;
}

/**************************************************/
/*各ページ                                         */
/**************************************************/
/***********************/
/*top                  */
/***********************/
#p_Top #contents{
	padding:0 !important;	/*全画面表示用に共通のpadding打ち消し*/
}

/*-------------------
上部写真
--------------------*/
/*上部写真タイルワイヤー*/
#p_Top .container-fluid {
    padding-right:0;
    padding-left:0;
}
/*写真枚数設定*/
#p_Top ul#photolist li{
    width: 10%;	/*横10枚*/
}
#p_Top.size_xs ul#photolist li,
#p_Top.size_sm ul#photolist li{
    width: 25%;	/*横4枚*/
}
#p_Top ul#photolist li img{
	width:100%;
}
/*-------------------
topコンテンツ共通
--------------------*/
/*各ヘッドライン*/
#p_Top section h2{
	font-family: "Century Gothic","游ゴシック",YuGothic,"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-serif;
	font-size:3.125rem;
	line-height:1;
}
/*more ボタン*/
#p_Top #Event a.btn,
#p_Top #News a.btn{
	width:11.44rem;
	padding:0.7rem 0;
	position:relative;
	font-size:0.875rem;
	border-color:#707070 !important;	/*グレー*/
}

#p_Top #Event a.btn i,
#p_Top #News a.btn i{
	line-height: 1.5 !important;	/*テキストのline-heightに合わせる*/
	position:absolute;
	right:10%;
}

/*イベント・PickUp背景色*/
#p_Top #Event,
#p_Top #PickUp{
	background-color:#F7F7F7;		/*薄いグレー*/
}

/*-------------------
イベント
--------------------*/
/*イベントスマホ非表示*/
#p_Top.size_xs .displayNone,
#p_Top.size_sm .displayNone {
	display:none;	/*  d-none d-md-block で制御すると高さが揃わないのでサイズクラスで設定 */
}

/*-------------------
News
--------------------*/
#p_Top.size_xs #News a.newsList{
	display:block;	/*d-block を指定するとレイアウトが崩れる*/
}

#p_Top #News{
	font-size:0.875rem;
}
#p_Top.size_xs #News,
#p_Top.size_sm #News,
#p_Top.size_md #News{
	background:none;
}
/*スマホ時*/
#p_Top.size_xs #News a div.newsDate,
#p_Top.size_sm #News a div.newsDate{
	border:none !important;	/*日付のボーダーを非表示*/
}
/*-------------------
PickUp
--------------------*/
/*カード位置調整共通*/
#p_Top #PickUp .card{
	position:relative;
}

/*
#p_Top.size_md #PickUp .ttl_img{
	width:46%;
}*/
#p_Top.size_md #PickUp .ttl_img{
	width:100%;
}
#p_Top.size_xs #PickUp .ttl_img,
#p_Top.size_sm #PickUp .ttl_img{
	width:30%;
}
#p_Top #PickUp .card .card-body{
	width:80%;
	position:absolute;
	left:0;
	right:0;
	
}
#p_Top #PickUp .card .card-text{
	font-size:0.875rem;
	line-height:1.2rem;
}
/*右の調整*/
#p_Top #PickUp #PickUpRight .card .card-body{
	bottom:-2.5rem;
}
/*左の調整*/
#p_Top #PickUp #PickUpLeft .card .card-body{
	top:-2rem;
}
#p_Top #PickUp #PickUpLeft .col-md-8{
	padding-right:0;
}


/*見出しのフォントを変える*/
#p_Top #PickUp #PickUpLeft h5{
	font-size:1rem;
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
#p_Top #PickUp #PickUpRight h5{
	font-size:1.57rem;
	font-family: "Century Gothic","游ゴシック",YuGothic,"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-serif;
}

/*左のスマホ時の調整*/
#p_Top.size_xs #PickUp #PickUpLeft .card ,
#p_Top.size_sm #PickUp #PickUpLeft .card{
	margin-bottom:5rem;
}

#p_Top.size_xs #PickUp #PickUpLeft .card .card-body,
#p_Top.size_sm #PickUp #PickUpLeft .card .card-body{
	width:90.5%;
	top:auto;
	bottom:-3rem;
}
/*スマホ時の写真高さ調整*/
#p_Top.size_xs #PickUp .card .card-img-top,
#p_Top.size_sm #PickUp .card .card-img-top{
	width: 100%;
	height: 16rem;
	object-fit: cover;
	font-family: 'object-fit: cover;';
}
/*-------------------
Story
--------------------*/
#p_Top #Story{
	background-color:#F2EDDB;		/*ベージュ*/
}
#StoryInfo #StoryLink a {
    display: block;
   /* padding: 32px 28px;*/
    background: #fff;
    box-shadow: 3px 3px 2px rgba(0, 0, 0, 0.1);
    line-height: 0;
    text-align: center;
}
#StoryInfo p{
	font-size:0.875rem;
}
/*-------------------
AppMainImage.tpl上書き
--------------------*/
#p_Top #appMainImage h2 img{
	width:75% !important;
}

/***********************/
/*News(Announce)       */
/***********************/
#p_Announce_List #headerImg,
#p_Announce_Detail #headerImg{
	background:url(../img/announce/bg_pageimg.png)center center no-repeat;
	background-size:cover;
}

/*下線*/
#p_Info_List div.border-bottom{
	border-bottom:1px dashed #707070 !important;
}


/***********************/
/*Event            */
/***********************/
#p_Event_List #headerImg,
#p_Event_Detail #headerImg{
	background:url(../img/event/bg_pageimg.png)center center no-repeat;
	background-size:cover;
}

/***********************/
/*Download          */
/***********************/
#p_Download_Card #headerImg{
	background:url(../img/download/bg_pageimg.png)center center no-repeat;
	background-size:cover;
}

/***********************/
/*コース            */
/***********************/
#p_Course_List #headerImg,
#p_Course_Detail #headerImg{
	background:url(../img/course/bg_pageimg.png)center center no-repeat;
	background-size:cover;
}

/*英語版時間が改行するのでフォントを小さくする*/
#p_Course_List.size_xs.en .card.comLayout .card-title{
	margin-bottom: 3.5rem;
}

/***********************/
/*Point                */
/***********************/
#p_Point_Detail #headerImg{
	background:url(../img/point/bg_pageimg.png)center center no-repeat;
	background-size:cover;
}

/***********************/
/*app                  */
/***********************/
/*今の所なし*/

/***********************/
/*物語                 */
/***********************/
/*ヘッダー画像*/
#p_Story{
	background:#EBEBEB;
}
#p_Story .container-fluid{
	padding-right:0;
	padding-left:0;
}
#p_Story .sp_announce{
	background:#fff;
	padding:2rem;
	height:15rem;
	position:relative;
	text-align:center;
}
#p_Story .sp_announce img{
	margin: auto;
	width:14rem;
	position:absolute;
	top:9rem;
	left: 0;
	right: 0;
}
#p_Story #headerImg{
	background:url(../img/story/bg_pageimg.png)center center no-repeat;
	background-size:cover;
}
#p_Story .card{
	border-radius:0;
	background:none;
}
/*説明文*/
#p_Story .card-img-top {
    width: 100%;
	margin-bottom:1.5rem;
}
#p_Story .card-body{
}
#p_Story .card-body .card-text{
    font-size: 0.87rem;
}
/*再生アイコン中央*/
#p_Story .card .card-img-top{
	position: relative;
}
#p_Story .card .card-img-top a.icoPlay{
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
#p_Story .card .card-img-top a.icoPlay i{
	font-size: 7rem;
}

/*モーダル閉じるボタン*/
#p_Story .modal .close i{
	font-size: 3rem;
}