@charset "utf-8";
/* =========================================== *
adjuster
2018.01
エコシップクルーズページ作成より追加した調整用CSSです
主目的は画像パーツで配置されていたものをCSS化すること
2018.02
トップページのCSS化に対応する追記
2018.03
PCトップページのサイドバーなどアイコン部分に関する記述、
SPトップページ・クルーズページのリニューアルを追記
2019.06
サイドバーモジュールに cate_waiting を追加
プレゼントページ用スタイルを移植
* =========================================== */
.redcomment {
	font-size: 110%;
	font-weight: 700;
	color: #E13537;
	letter-spacing: -0.05em;
}

/* =========================================== *
クルーズトップ index
* =========================================== */
.flex {
	clear: both;
	display: flex;
	justify-content: space-between;
}
#schedule_eco {width: 320px;}
#price_room_eco {width: 400px;}
/* 料金表が4段 */
.flex .row4 {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	margin-bottom: 20px;
	height: 306px;
}
/* 3段 */
.flex .row4.row3 {
	height: 286px;
}

/* 共通見出し */
.h3border {
	margin-bottom: 10px;
	border-bottom: 5px solid #0056AD;
}
.headline {
	display: flex;
	justify-content: space-between;
	background: #0056AD;
	padding: 5px 7px;
	margin: 0;
	margin-bottom: 3px;
	align-items: center;
}
.headline_inner,.headline_inner2 {
	display: block;
	font-size: 16px;
	color: #ffffff;
}
.headline_inner::before {
	content: "";
	display: inline-block;
	height: 20px;
	width: 5px;
	margin-right: 7px;
	background: #FFCB2B;
	vertical-align: middle;
}

/* ボタン */
.linkbtn {
	display:block;
	width: 200px;
	height: 40px;
	line-height: 40px;
	color: #fff !important;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-decoration: none !important;
	text-align: center;
	background-color: #608AB5;
	border-radius: 10px;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
	margin: 20px auto;
}
.linkbtn:hover {
	opacity: 0.8;
	text-decoration: none !important;
}
.linkbtn_ship {
	width: 100%;
	height: 20px;
	line-height: 20px;
	font-size: 13px;
	background-color: #C99D32;
	border-radius: 5px;
	margin: 5px auto;
}

/* スケジュール */
.schedule_smalltitle {
	margin: 10px 0;
	font-size: 14px;
	font-weight: 700;
}
.bluebg {
	color: #fff;
	background: #191F95;
	padding: 2px 8px;
	margin-right: 5px;
}
.schedule_title {
	font-size: 28px;
	font-weight: 700;
	line-height: 1.5;
	border-bottom: 4px solid #191F95;
	margin: 5px 0;
}
.schedule_text {
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
	margin-bottom: 5px;
}

/* 旅行代金・客室のご案内 */
.p_r_wrap {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0px 10px 0px 5px;
	margin-bottom: 5px;
	border-bottom: 1px dashed #608AB5;
}
.r_wrap {
	border-left: 5px solid #FFCB2B;
	padding-left: 5px;
}
.r_type {
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
}
.r_text {
	color: #777;
	font-size: 12px;
	line-height: 1.2;
}
.p_em {
	font-size: 24px;
	font-weight: 700;
}

/* 旅の見どころ ＆ 寄港地のご案内 */
.spot_eco {width: 440px;}
.spot_img {width: 250px;}
.spot_title {
	font-size: 18px;
	font-weight: 700;
	margin-bottom: 10px;
}

/* =========================================== *
旅の見どころ spot/index
寄港地のご案内 program/index
* =========================================== */
/* ページ内リンクボタン */
.square_btn {
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	width: 157px;
	height: 50px;
	display: inline-flex;
	align-items: center;
	justify-content: start;
	padding: 0.5em;
	text-decoration: none !important;
	background: #E99700;
	color: #80460E !important;
	border-radius: 3px;
	box-shadow: 0px 0px 0px 2px #E99700;
	border: solid 1px #FFF;
	text-shadow:
	#fff 0.5px 0.5px 0px,
	#fff -0.5px 0.5px 0px,
	#fff -0.5px -0.5px 0px,
	#fff 0.5px -0.5px 0px,
	#fff 0.5px 0px 0px,
	#fff 0px 0.5px 0px,
	#fff -0.5px 0px 0px,
	#fff 0px -0.5px 0px;
}
.mgr {margin-right: 10px !important;}
.square_btn_spot {
	font-size: 16px;
	width: 337px;
	height: 30px;
}
.square_btn:hover {opacity: 0.8;}
.fa-arrow-circle-right {
	margin-right: 10px;
	text-shadow:
	#fff 1px 1px 0px,
	#fff -1px 1px 0px,
	#fff -1px -1px 0px,
	#fff 1px -1px 0px,
	#fff 1px 0px 0px,
	#fff 0px 1px 0px,
	#fff -1px 0px 0px,
	#fff 0px -1px 0px;
}

/* ボタン幅 調整用 */
.list_pagelink {margin-right: 20px;}
.list_pagelink:last-child {margin-right: 0;}

/* 共通見出し　オレンジ色 */
.orange {background: #E99700;}
.h3orange {border-bottom: 5px solid #E99700;}

/* 和文フォント見出し */
.mincho {font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;}
.bold {font-weight: bold; font-weight: 700;}
.normal {font-weight: normal; font-weight: 500;}
.catchcopy_text {
	font-size: 24px;
	margin: 20px 0;
}

/* =========================================== *
スケジュール schedule/index
* =========================================== */
.graybg {
	font-size: 16px;
	font-weight: 700;
	color: #191F95;
	background: #EEE;
	border: 1px solid #191F95;
	padding: 2px;
	text-align: center;
}
div#schedule table th, div#schedule table td {line-height: 2;}
div#schedule table th {
	color: #fff;
	background: #171c61;
}

/* =========================================== *
旅行代金・客室のご案内 price_room/index
* =========================================== */
.eco_roomcategory {
	display: inline-block;
	padding-left: 5px;
	font-size: 1.2em;
	color: #184976;
}

/* =========================================== *
エコシップのご案内 ecoship/index
* =========================================== */
.readbox {
	display: flex;
	background: #FFF7CC;
	padding: 10px;
	align-items: center;
}
.readbox_left {
	width: 335px;
	padding-right: 10px;
}

/* 大見出し、及び左の黄色帯 */
.obi_yellow {
	font-size: 20px; /* edit.css準拠 */
	border-left: 8px solid #FFCB2B;
	padding-left: 7px;
	margin: 0 0 10px 10px;
}
.readbox .readbox_left .detail {
	margin: 8px 0 0 6px;
	line-height: 1.4;
	font-size: 10px;
}
.imgcap {
	text-align: center;
	font-weight: 900;
	font-size: 1.1em;
}

/* =========================================== *
MODULE_共通サイドバー
各ページの右サイドバナー用
* =========================================== */
.sidemenu1_list ul {border-bottom: 1px dashed #ccc;}
.sidemenu1_list ul:last-child {border: none;}
.sidemenu1 a:hover {
	text-decoration: none!important;
	background: #F4F9FF;
	transition: all .2s
}
.sidemenu1 a:link {text-decoration: none!important;}
.sidemenu1 a:visited {text-decoration: none!important;}
.sidemenu_link {
	display: block;
	font-size: 12px;
	padding: 2px;
	text-decoration: none!important;
}
.sidemenu_date {
	color: #035b9f;
	font-weight: 700;
}
.cate_world::after {
	content: "〈世界一周〉";
	font-weight: 700;
	color: #C49307;
	margin-left: 5px;
}
.cate_middle::after {
	content: "〈ミドル〉";
	font-weight: 700;
	color: #79B73D;
	margin-left: 5px;
}
.cate_short::after {
	content: "〈ショート〉";
	font-weight: 700;
	color: #55A8AF;
	margin-left: 5px;
}
.cate_waiting::after {
	content: "［空席待ち］";
	font-weight: 700;
	color: #E13537;
	margin-left: 5px;
}
.sidemenu_title {
	line-height: 1.2;
	padding: 0 1px;
}
.sidemenu_link_under a {
	padding-left: 1em;
	display: block;
}

/* =========================================== *
MODULE_募集中クルーズ
クルーズ一覧ページ用
（http://www.pbcruise.jp/cruiseList/）
* =========================================== */
/* タブの挙動 */
.tabs {
	background-color: #fff;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
	width: 100%;
	margin: 10px auto;
}

.tab_item {
	width: calc(100%/3);
	height: 60px;
	padding-top: 10px;
	border-bottom: 5px solid #124575;
	background-color: #d9d9d9;
	line-height: 30px;
	font-size: 16px;
	text-align: center;
	color: #565656;
	display: block;
	float: left;
	text-align: center;
	font-weight: bold;
	transition: all 0.2s ease;
}

.tab_item:hover {
	opacity: 0.75;
}

input[name="tab_item"] {
	display: none;
}

.tab_content {
	display: none;
	padding: 10px 3px;
	clear: both;
	overflow: hidden;
}

#tab1:checked ~ #tab1_content,
#tab2:checked ~ #tab2_content,
#tab3:checked ~ #tab3_content {
	display: block;
}

.tabs input:checked + .tab_item {
	background-color: #124575;
	color: #fff;
}
/* //タブの挙動 */

.cruiseList_box {
	display: flex;
	justify-content: space-between;
	max-width: 729px;
	font-weight: 700;
	margin-bottom: 20px;
	padding-bottom: 20px;
	border-bottom: 1px dotted #c9c9c9;
}
.cruiseList_left {
	max-width: 479px;
	width: 66%;
}
.cruiseList_right {
	max-width: 240px;
	width: 33%;
}
.cruiseList_head {
	text-align: center;
	border: 1px solid #124575;
	color: #124575;
	font-size: 1.25em;
	background: #E8EFF3;
	padding: 2px 0;
	margin-bottom: 10px;
}
.cruiseList_number {
	color: #124575;
	font-size: 1.2em;
}
.cruiseList_title {
	font-size: 1.75em;
	padding-left: 4rem;
}
.cruiseList_date {
	padding-left: 4rem;
}
.cruiseList_price {
	padding-left: 4rem;
	line-height: 2;
	margin-bottom: 15px;
}
.cruiseList_red {
	font-size: 1.5em;
	margin-right: 0.1em;
	color: #E61919;
}
.cruiseList_linkbtn {
	display: inline-block;
	padding: 3px 90px;
	background: #5F80C1;
	color: #fff !important;
	text-decoration: none!important;
	font-size: 1.2em;
	box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
}



/* =========================================== *
TOPページ
クルーズタブをCSS化
pbcruise.jp #plantab内
* =========================================== */
#plantab a:link, #plantab a:visited, #plantab a:hover {text-decoration: none!important;}
#eventtab a:link, #eventtab a:visited, #eventtab a:hover {text-decoration: none!important;}
#programtab a:link, #programtab a:visited, #programtab a:hover {text-decoration: none!important;}
figure {margin: 0; padding: 0;}
.tar {text-align: right; margin-top: auto;}
#plantab, #descriptiontab, #programtab {margin-bottom: 20px;}

/* タブ切り替えCSS */
.cp_tab *, .cp_tab *:before, .cp_tab *:after {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	background: #fff;
}
.cp_tab {width: 100%;}
.cp_tab > input[type='radio'] {
	margin: 0;
	padding: 0;
	border: none;
	border-radius: 0;
	outline: none;
	background: none;
	-webkit-appearance: none;
	appearance: none;
	display: none;
}
.cp_tab .cp_tabpanel {display: none;}
.cp_tab > input:first-child:checked ~ .cp_tabpanels > .cp_tabpanel:first-child,
.cp_tab > input:nth-child(3):checked ~ .cp_tabpanels > .cp_tabpanel:nth-child(2),
.cp_tab > input:nth-child(5):checked ~ .cp_tabpanels > .cp_tabpanel:nth-child(3),
.cp_tab > input:nth-child(7):checked ~ .cp_tabpanels > .cp_tabpanel:nth-child(4),
.cp_tab > input:nth-child(9):checked ~ .cp_tabpanels > .cp_tabpanel:nth-child(5),
.cp_tab > input:nth-child(11):checked ~ .cp_tabpanels > .cp_tabpanel:nth-child(6),
.cp_tab > input:nth-child(13):checked ~ .cp_tabpanels > .cp_tabpanel:nth-child(7),
.cp_tab > input:nth-child(15):checked ~ .cp_tabpanels > .cp_tabpanel:nth-child(8) ,
.cp_tab > input:nth-child(17):checked ~ .cp_tabpanels > .cp_tabpanel:nth-child(9) {
	display: block;
}
.cp_tab > label {
	position: relative;
	display: inline-block;
	padding: 5px 2px;
	cursor: pointer;
	border: 2px solid #ccc;
	border-bottom: 0;
	border-radius: 6px 6px 0 0;
	line-height: 1.2;
	width: 19.5%;
	text-align: center;
	color: #5A5A5A;
}
.cp_tab > label:hover,.cp_tab > input:focus + label {color: #0066cc;}
.cp_tab > input:checked + label {
	margin-bottom: -2px;
	border: 2px solid #3a6cad;
	border-radius: 6px 6px 0 0;
	background: #D7EEFD;
	color: #4879BC;
}
.cp_tab .cp_tabpanel {
	padding: 15px;
	border: 2px solid #3a6cad;
}

/* タブの中身 レイアウト*/
.plantab_title {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	height: 3em;
	line-height: 3em;
	background: #E5F2FF;
	font-size: 16px;
	color: #1470CC;
	border-radius: 6px 6px 0 0;
	padding-left: 54px;
}
.tabcontent {
	display: flex;
	justify-content: space-between;
}
#plantab .tabcontent_left, #plantab .tabcontent_right {width: 49%;}
.tabcontent_img {margin-top: 20px;}
.tabcontent_img ul {
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: space-between;
}
.tabcontent_img ul li {
	list-style: none;
	width: 130px;
	max-width: 19.5%;
}

/* タブの中身 テキストスタイル c-ruise */
.c_category {
	color: #CC981D;
	font-size: 12px;
	font-weight: 700;
}
.c_name {
	color: #0352AB;
	font-size: 18px;
	line-height: 1.2;
	font-weight: normal;
}
.c_date {font-size: 11px;}
.c_date::after {
	content: "";
	display: block;
	border-bottom: 1px dotted;
}
.c_price_box {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 0;
}
.c_price_type {
	font-size: 11px;
	line-height: 13px;
	letter-spacing: -0.05em;
}
.c_price_price {
	font-size: 26px;
	font-weight: 700;
	color: #E13537;
	line-height: 24px;
	letter-spacing: -0.05em;
}
.c_price_price::after {
	content:"円";
	font-size: 22px;
	padding-left: 2px;
}
.c_price_cap {
	text-align: right;
	font-size: 10px;
}
.c_point {
	display: inline-block;
	background: #E2A62E;
	color: #404040;
	padding: 1px 5px;
	font-weight: 700;
}
.c_point_text {
	padding: 5px 0;
	line-height: 1.5;
}
.c_pagelinkbtn {
	display: inline-block;
	border: 2px solid #cccccc;
	border-radius: 6px;
	padding: 7px 10px;
	background: #E3AA26;
	color: #606060!important;
	font-size: 12px;
	font-weight: 700;
	text-shadow: #fff 1px 1px 1px;
	text-decoration: none;
}
.c_pagelinkbtn::after {
	font-family: "Font Awesome 5 Free";
	content: '\f138';
	font-weight: 900;
	background: #E3AA26!important;
	color: #fff;
	margin-left: 0.5em;
	text-shadow: none;
}
.c_pagelinkbtn:hover {
	opacity: 0.8;
}

/* =========================================== *
TOPページ
イベントタブ・プログラムタブをCSS化（タブ部分の記述などはクルーズタブと共通）
pbcruise.jp
* =========================================== */
#eventtab {margin-bottom: 30px!important;}
#eventtab h2 {margin-bottom: 2px!important;}
/* レイアウト（説明会＆イベント・洋上プログラム 共通） */
#eventtab .tabcontent_left, #programtab .tabcontent_left {width: 43%; display: block;}
#eventtab .tabcontent_right, #programtab .tabcontent_right {width: 57%; display: flex; flex-direction: column;}
.e_p_point {
	display: block;
	font-weight: 700;
	font-size: 18px;
}
.e_p_red {display: inline-block; color: #DC4A6D; font-size: 10px; margin-left: 5px;}
.e_p_red2 {display: block; color: #DC4A6D; font-size: 12px; font-weight: 700; margin-top: 10px;}

/* カラー調整 */
/* 説明会＆イベントを探す #eventtab */
.eventtab_title {background: #FFF0F9; color: #CC3D89;}
#eventtab .cp_tab > label:hover,#eventtab .cp_tab > input:focus + label {color: #BD2659;}
#eventtab .cp_tab > input:checked + label {
	border: 2px solid #B12B8B;
	background: #FFF0F9;
	color: #BD2659;
}
#eventtab .cp_tab .cp_tabpanel {border: 2px solid #B12B8B;}
#eventtab .e_p_point {color: #B12B8B;}

/* 洋上プログラムを探す #programtab */
.programtab_title {background: #ECF7E6;	color: #00802A;}
#programtab .cp_tab > label {width: 24.5%;} /* タブ幅4等分 */
#programtab .cp_tab > label:hover,#programtab .cp_tab > input:focus + label {color: #02654A;}
#programtab .cp_tab > input:checked + label {
	border: 2px solid #02654A;
	background: #EEFDC6;
	color: #02654A;
}
#programtab .cp_tab .cp_tabpanel {border: 2px solid #02654A;}
#programtab .e_p_point {color: #167807;}

/* =========================================== *
TOPページ
アイコンを刷新
pbcruise.jp
* =========================================== */
/* メインページ部分 */
.odcruisetab_title:before,.ecocruisetab_title:before,.eventtab_title:before,.programtab_title:before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 15px;
	display: inline-block;
	margin: auto;
	width: 2em;
	height: 2em;
	max-width: 24.4px;
	max-height: 32px;
}
.odcruisetab_title:before {background: url(../images/icon/h2icon_odcruise.png) center center / contain no-repeat;}
.ecocruisetab_title:before {background: url(../images/icon/h2icon_ecocruise.png) center center / contain no-repeat;}
.eventtab_title:before {background: url(../images/icon/h2icon_event.png) center center / contain no-repeat;}
.programtab_title:before {background: url(../images/icon/h2icon_program.png) center center / contain no-repeat;}

/* トップボタン */
#topbtn .sidebaricon_small {width: auto; height: 30.5px; margin-right: 10px;}
#topbtn > ul {
	display: flex;
	justify-content: space-between;
	align-items: center;
	text-align: center;
}
#topbtn > ul >li {
	width: 32.5%;
	list-style-type: none;
	display: block;
	padding: 0;
}

#mainimage #topbtn > ul > li > a {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 5px;
	border-radius: 6px;
	font-size: 16px;
	font-weight: 700;
	color: #666;
	transition: 0.2s;
	background: #FFFDF2;
	-webkit-box-shadow: 0 3px 0 0 #CECBC2;
			box-shadow: 0 3px 0 0 #CECBC2;
	height: 40px;
	border: 1px solid #c0c0c0;
}
#mainimage #topbtn > ul > li > a > p > span {font-size: 10px;}
#mainimage #topbtn > ul > li > a:hover {
	-webkit-box-shadow: none!important;
			box-shadow: none!important;
	-webkit-transform: translate3d(0, 3px, 0);
			transform: translate3d(0, 3px, 0);
	text-decoration: none!important;
}

/* 共通サイドバー */
.btn_area {text-align: center;}
#rightMenu #r_top_btn .btn-area > a {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 15px;
	padding: 5px;
	border-radius: 6px;
	font-weight: 700;
	letter-spacing: 0.05em;
	color: #fff;
	transition: 0.2s;
}
.sidebaricon_big {width: auto; height: 40.66px; margin: 5px 0;}
.sidebaricon_small {width: auto; height: 30.5px; margin-right: 5px;}
#rightMenu #r_top_btn .btn-area > a > span {display: inline-block; text-align: center;}
#rightMenu #r_top_btn .btn-area > a > span:nth-child(1) {width: 25%;}
#rightMenu #r_top_btn .btn-area > a > span:nth-child(2) {width: 70%;}
/* オレンジボタン */
#rightMenu #r_top_btn .btn-area > a:nth-child(1) {
	background: #ff6a00;
	-webkit-box-shadow: 0 3px 0 0 #ce5500;
			box-shadow: 0 3px 0 0 #ce5500;
	flex-direction: column;
	font-size: 16px;
}
/* イエローボタン */
#rightMenu #r_top_btn .btn-area > a:nth-child(2) {
	background: #ffaa00;
	-webkit-box-shadow: 0 3px 0 0 #ce8800;
			box-shadow: 0 3px 0 0 #ce8800;
	flex-direction: column;
	font-size: 16px;
}
/* グリーンボタン */
#rightMenu #r_top_btn .btn-area > a:nth-child(n+3):nth-last-child(n+3) {
	background: #60BF60;
	-webkit-box-shadow: 0 3px 0 0 #4D994D;
			box-shadow: 0 3px 0 0 #4D994D;
	font-size: 15px;
}
/* クリームボタン */
#rightMenu #r_top_btn .btn-area > a:nth-last-child(-n+2) {
	color: #94761D;
	background: #FFECB2;
	-webkit-box-shadow: 0 3px 0 0 #CEBD8F;
			box-shadow: 0 3px 0 0 #CEBD8F;
	font-size: 14px;
}
/* ホバーしたら押し込まれる */
#rightMenu #r_top_btn .btn-area > a:hover {
	-webkit-box-shadow: none!important;
			box-shadow: none!important;
	-webkit-transform: translate3d(0, 3px, 0);
			transform: translate3d(0, 3px, 0);
	text-decoration: none!important;
}

/* =========================================== *
プレゼントページ用
http://www.pbcruise.jp/present/
* =========================================== */
.present_title {
	font-size: 22px;
	font-weight: 700;
	color: #000099;
	line-height: 1;
}
.present_date {
	font-size: 14px;
	font-weight: 700;
	color: #9E9E9E;
}
.present_h5 {
	display: block;
    width: 125px;
    padding: 6px!important;
    background: #D8E9FF;
    color: #000099;
    font-size: 12px;
    font-weight: 700;
}