@charset "utf-8";

/* ブラウザのデフォルトスタイルをリセットする */
/*@import url('html5reset-1.6.1.css');*/
/* 共通class */
@import url('/vc/base/usr/docs/css/common.css');
/* Google Fonts読み込み */
@import url(/vc/base/usr/docs/fonts/roboto/css/font.css);
@import url('/vc/base/usr/docs/fonts/notosans/css/font.css');
/* Icon Fonts読み込み */
@import url('/vc/base/usr/docs/css/fontawesome_ver4.css');

/*--------------
■┓基本設定
┗┛
----------------------------------------------------------*/
* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
/* html5用 */
article,aside,canvas,details,figcaption,figure,
header,footer,main,menu,nav,section,summary {
	display: block;
}
html {
	font-size: 62.5%; /* sets the base font to 10px for eaiser math */
}
#vc_style p {
	margin-bottom: 1em;
}
#form_style p,
.cart_style p {
	margin-bottom: 0;
}
br {
	letter-spacing: normal;
}
label {
	cursor: pointer;
}
#vc_style img,
#form_style img,
.cart_style img {
	vertical-align: bottom;
}
#vc_style a,
#form_style a,
.cart_style a {
	color: #03c;
	outline: none;
	text-decoration: none;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
#vc_style a img,
#form_style a img,
.cart_style a img {
	transition: all .2s;
}
#vc_style a:hover,
#form_style a:hover,
.cart_style a:hover {
	color: #f00;
	text-decoration: underline;
}
#vc_style a:hover img,
#form_style a:hover img,
.cart_style a:hover img {
	opacity: .6;
}
#form_style .flex_area,
.cart_style .flex_area {
	display: flex;
		flex-wrap: wrap;
}

/*--------------
サービスタイトル
（.service_title）
----------------------------------------------------------*/
.service_title {
	background-image: linear-gradient(
		-45deg,
		#fff 25%,
		#ddd 25%, #ddd 50%,
		#fff 50%, #fff 75%,
		#ddd 75%, #ddd
		);
	background-size: 4px 5px;
	background-repeat: repeat-x;
	background-position: left bottom;
	display: flex;
		align-items: center;
		justify-content: flex-start;
	font-size: 26px;
	font-size: 2.6rem;
	letter-spacing: .03em;
	line-height: 1.1;
	margin-bottom: .5em;
	padding: 16px 0 16px .5em;
	position: relative;
}
.service_title:before {
	background: #888;
	content: "";
	position: absolute;
		bottom: 0;
		left: 0;
	width: 5px;
	height: 5px;
}
/* サービスタイトルのサブテキスト */
.service_title.add_txt_sub {
	display: block;
}
.service_title.add_txt_sub span {
	display: block;
}
.service_title.add_txt_sub .txt_sub {
	font-size: 16px;
	font-size: 1.6rem;
	margin-top: 6px;
}

/*--------------
背景色付きタイトル
（.block_title）
----------------------------------------------------------*/
.block_title {
	background-color: #888;
	border-radius: 4px;
	color: #fff;
	font-size: 22px;
	font-size: 2.2rem;
	line-height: 1.4;
	margin: 80px 0 1em;
	padding: 16px;
}
.service_title + .block_title {
	margin-top: 24px;
}

/*--------------
下線付きタイトル
（.underbar_title）
----------------------------------------------------------*/
.underbar_title {
	border-bottom: 3px solid #e3e3e3;
	font-size: 20px;
	font-size: 2.0rem;
	margin: 56px 0 .5em;
	padding: 8px 0;
	position: relative;
}
.underbar_title::after {
	border-bottom: 3px solid #888;
	content: " ";
	display: block;
	position: absolute;
		bottom: -3px;
	width: 20%;
}
.service_title + .underbar_title,
.block_title + .underbar_title {
	margin-top: 16px;
}

/*--------------
「>」付きタイトル
（.angle_right_title）
----------------------------------------------------------*/
.angle_right_title {
	font-size: 16px;
	font-size: 1.6rem;
	font-weight: bold;
	margin: 1.5em 0 .5em;
	padding-left: 16px;
	position: relative;
}
.angle_right_title::before {
	content: "\f054";
	font-family: FontAwesome;
	font-size: 12px;
	font-weight: normal;
	position: absolute;
		top: 4px;
		left: 0;
}

/*--------------
ショッピングカートナビ
（#shop_nav）
----------------------------------------------------------*/
#shop_nav {
	margin-bottom: 24px;
}
#shop_nav ul {
	display: flex;
		justify-content: space-between;
}
#shop_nav ul li {
	border-top: 2px solid #8a8a8a;
	border-bottom: 2px solid #8a8a8a;
	color: #8a8a8a;
	display: flex;
		align-items: center;
		justify-content: center;
	flex: 1 1 20%;
	font-size: 14px;
	font-size: 1.4rem;
	height: 44px;
	line-height: 1.2;
	margin-right: 12px;
	position: relative;
	text-align: center;
	white-space: nowrap;
}
#shop_nav ul li::before,
#shop_nav ul li::after {
	background-position: 0 0;
	background-repeat: no-repeat;
	background-size: 12px 44px;
	content: "";
	display: block;
	position: absolute;
		top: -2px;
	width: 12px;
	height: 44px;
}
#shop_nav ul li::before {
	background-image: url(/vc/base/usr/apply/images/nav_left.svg);
		left: -2px;
}
#shop_nav ul li::after {
	background-image: url(/vc/base/usr/apply/images/nav_right.svg);
		left: calc(100% - 1px);
}
#shop_nav ul li:not(:first-child) {
	padding-left: 12px;
}
/* 今の場所（.current）終わった場所（.finish） */
#shop_nav ul li.current,
#shop_nav ul li.finish {
	border-color: #f60;
	color: #f60;
}
#shop_nav ul li.current::before,
#shop_nav ul li.finish::before {
	background-image: url(/vc/base/usr/apply/images/nav_left_fin.svg);
}
#shop_nav ul li.current::after,
#shop_nav ul li.finish::after {
	background-image: url(/vc/base/usr/apply/images/nav_right_fin.svg);
}
/* 「商品選択」 */
#shop_nav ul li:first-child {
	border-left: 2px solid #f60;
	border-radius: 2px 0 0 2px;
	padding-right: 4px;
	padding-left: 4px;
}
#shop_nav ul li:first-child::before {
	display: none;
}

/*--------------
サービス名（.shop_name_list）
list.jsp

現在は健康づくりカフェテリアのみで使用（2019.05.24）
----------------------------------------------------------*/
.shop_name_list {
	background: url(/vc/base/usr/docs/images/ic_shop.svg) 0 4px no-repeat;
	background-size: 18px 16px;
	font-size: 14px;
	font-size: 1.4rem;
	margin-bottom: 4px;
	padding-left: 24px;
}
.shop_name_list a {
	color: #206ba8 !important;
}
.shop_name_list a:hover {
	opacity: .6;
	text-decoration: none;
}

/*--------------
サービス名（.shop_name_cf）
goodsList.jsp  goodsDetail.jsp  cartList.jsp  cart.jsp  applyForm.jsp  applyConfirm.jsp

現在は健康づくりカフェテリアのみで使用（2019.05.24）
----------------------------------------------------------*/
/*
---
#form_style h3,
.cart_style h3 {
で指定すると、現在稼働中（/vc/base/usr/apply/）のページに影響があるのでclass名で指定
---
*/
.shop_name_cf {
	background: url(/vc/base/usr/docs/images/ic_shop.svg) 0 23px no-repeat;
	background-size: 28px 24px;
	border-top: 1px solid #999;
	border-bottom: 1px solid #999;
	font-size: 20px;
	font-size: 2.0rem;
	font-weight: bold;
	line-height: 1.4;
	margin: 16px 0 14px;
	padding: 1em 0 1em 1.75em;
}
.shop_name_cf a {
	color: #126ab3 !important;
}
.shop_name_cf a:hover {
	opacity: .6;
	text-decoration: none !important;
}

/*--------------
セクションタイトル（h4.sec_ttl）
agreement.jsp  agreementOk.jsp  applyChecksheet.jspapplyChecksheetConfirm.jsp
applyForm.jsp  cartConfirmation.jsp  cartPrecaution.jsp  goodsList.jsp


現在は健康づくりカフェテリアのみで使用（2019.05.24）
----------------------------------------------------------*/
/*
---
#form_style h4,
.cart_style h4 {
で指定すると、現在稼働中（/vc/base/usr/apply/）のページに影響があるのでclass名で指定
---
.section_titleのクラス名は既に使用しているので使わない
---
*/
h4.sec_ttl {
	background-color: #8a8a8a;
	border-radius: 4px;
	color: #fff;
	margin: 32px 0 16px;
	padding: 12px 8px 12px 12px;
}

/*--------------
案内（.guide_box）
list.jsp  cartList.jsp (/vc/apply/の方でも使用）
-------------------------------------------------------------------------------------*/
.cart_style .guide_box {
	background: url(/vc/base/usr/docs/images/ic_useguide.svg) 20px 50% no-repeat;
	background-size: 26px 26px;
	background-color: #fff7f2;
	border: 1px solid #f96;
	font-size: 1.3rem;
	font-size: 13px;
	line-height: 1.4;
	padding: 12px 12px 12px 56px;
}

/*--------------
背景付きテキストボックス（.text_lead）
cart.jsp  cartList.jsp
-------------------------------------------------------------------------------------*/
.cart_style .text_lead {
	background-color: #fafafa;
	border-radius: 4px;
	font-size: 13px;
	font-size: 1.3rem;
	padding: 16px;
}
/*--------------
お知らせ枠（section.redeliver）
/vc/apply/の方でも使用するため service.css より移動
----------------------------------------------------------*/
section.redeliver {
	background: #fffaf0;
	border: 1px solid #d2b48c;
	border-radius: 8px;
	margin: 32px 0;
	padding: 16px;
}
section.redeliver .redeliver_title {
	border-bottom: 1px solid #d2b48c;
	color: #333;
	font-weight: bold;
	padding: 0 8px 8px;
}
section.redeliver .redeliver_contents {
	padding: 16px 8px 0;
}
/*--------------
アイコン
/vc/health-promotion/service_menu.jsp
/vc/base/usr/apply/include/serviceinfoPopup.jsp

現在は健康づくりカフェテリアのみで使用（2019.05.24）
----------------------------------------------------------*/
.ic_send,
.ic_ticket,
.ic_online {
	color: #000;
	font-size: 12px;
	font-size: 1.2rem;
	padding: 0 4px 2px 28px;
	position: relative;
}
.ic_send {
	background: #fcd04b;
}
.ic_send::before,
.ic_ticket::before,
.ic_online::before,
.ic_card::before {
	content: "";
	display: inline-block;
	height: 100%;
	position: absolute;
		left: 0;
		top: 0;
}
.ic_send::before {
	background-image: url(/vc/base/usr/docs/images/ic_send.svg);
	background-repeat: no-repeat;
	background-size: 20px 20px;
	width: 20px;
}
.ic_ticket {
	background: #ffc107;
}
.ic_ticket::before {
	background-image: url(/vc/base/usr/docs/images/ic_ticket.svg);
	background-repeat: no-repeat;
	background-size: 22px 19px;
	width: 22px;
}
.ic_online {
	background: #bbeb0c;
}
.ic_online::before {
	background-image: url(/vc/base/usr/docs/images/ic_online.svg);
	background-repeat: no-repeat;
	background-size: 22px 19px;
	width: 22px;
}
.ic_card {
	padding: 0 4px 0 0;
	width: 20px;
	height: 20px;
}
.ic_card::before {
	background-image: url(/vc/base/usr/docs/images/ic_card.svg);
	background-repeat: no-repeat;
	background-size: 20px 20px;
	width: 20px;
}
.ic_card span {
	display: none;
}

/*--------------
ショップテーブル(店舗情報)
（.popup_shop_detail）
/vc/base/usr/apply_com/include/serviceinfoPopup.jsp

現在は健康づくりカフェテリアのみで使用（2019.05.24）
----------------------------------------------------------*/
.popup_base_box .popup_base_contents.popup_shop_detail {
	padding: 24px 60px;
}
.popup_shop_detail > .shop_summary {
	display: flex;
		justify-content: flex-start;
	width: 100%;
}
.popup_shop_detail > .shop_summary > .shop_detail_img {
	border: solid 1px #ddd;
	display: flex;
		align-items: center;
		justify-content: center;
	width: 40%;
}
.popup_shop_detail > .shop_summary > .shop_detail_img > div {
	padding: 4px 0;
	text-align: center;
	width: 100%;
}
.popup_shop_detail > .shop_summary > .shop_detail_img img {
	max-width: 100%;
	max-height: 200px;
}
.popup_shop_detail > .shop_summary > .shop_detail_img .shop_tag {
	background-color: yellow;
	color: #333;
	display: block;
	margin: 0 auto;
}
.popup_shop_detail > .shop_summary > .shop_detail_text {
	font-size: 16px;
	font-size: 1.6rem;
	margin-left: 24px;
}
.popup_shop_detail > .shop_summary .shop_ttl {
	font-size: 22px;
	font-size: 2.2rem;
	font-weight: bold;
	padding-bottom: 24px;
}
.popup_shop_detail > .shop_summary .shop_text {
	font-size: 16px;
	font-size: 1.6rem;
	padding-bottom: 24px;
}
.popup_shop_detail > .shop_summary .ctg_tag {
	font-size: 13px;
	font-size: 1.3rem;
	padding-bottom: 16px;
}
.popup_shop_detail > .shop_summary .ctg_tag span {
	border: 1px solid #ddd;
	border-radius: 4px;
	display: inline-block;
	letter-spacing: 0;
	margin: 0 4px 4px 0;
	padding: 2px 6px;
}
.popup_shop_detail > .shop_summary a.shop_tolink {
	background-color: #fff;
	border: 2px solid #f07422;
	border-radius: 80px;
	color: #f07422 !important;
	display: block;
	line-height: 1;
	padding: 16px;
	text-align: center;
}
.popup_shop_detail > .shop_summary a.shop_tolink:hover {
	background-color: #f07422;
	color: #fff !important;
	text-decoration: none !important;
	transition: all .3s;
}
.popup_shop_detail > .shop_data > table {
	margin: 40px 0 100px;
	width: 100%;
}
.popup_shop_detail > .shop_data > table tr:nth-child(odd){
	background-color: #eee
}
.popup_shop_detail > .shop_data > table th {
	font-weight: bold;
	padding: 10px 16px;
	text-align: center;
	vertical-align: middle;
	width: 10em;
}
.popup_shop_detail > .shop_data > table td {
	padding: 10px 16px 10px 40px;
	text-align: left;
}
.popup_shop_detail > .shop_data > table td.payment span {
	display: inline-block;
	margin-right: 24px;
	padding-left: 22px;
	position: relative;
}
.popup_shop_detail > .shop_data > table td.payment span::before {
	content: "";
	display: inline-block;
	position: absolute;
		top: 2px;
		left: 0;
	width: 20px;
	height: 100%;
}
.popup_shop_detail > .shop_data > table td.payment span.use::before {
	background-image: url(/vc/base/usr/docs/images/ic_check_square.svg);
	background-repeat: no-repeat;
	background-size: 20px 20px;
}
.popup_shop_detail > .shop_data > table td.payment span.no_use::before {
	background-image: url(/vc/base/usr/docs/images/ic_square.svg);
	background-repeat: no-repeat;
	background-size: 20px 20px;
}
.popup_shop_detail > .shop_data > table td.payment span.no_use {
	color: #999;
}
.popup_shop_detail > .shop_data > table td span.emphasis {
	font-size: 18px;
	font-size: 1.8rem;
	font-weight: bold;
	padding: 0 2px;
}
.popup_shop_detail > .shop_data > table td span.note_text {
	font-size: 14px;
	font-size: 1.4rem;
	text-align: left;
}
/*ポップアップ内テキストリンクスタイルを上書き*/
.popup_shop_detail a {
	color: #333;
	cursor: pointer;
}
.popup_shop_detail .btn_bottom {
	border-top: 1px solid #ddd;
	padding-top: 40px;
}
/* アイコン(ポップアップ内に使用する場合) */
.popup_shop_detail .ic_send,
.popup_shop_detail .ic_ticket,
.popup_shop_detail .ic_online {
	font-size: 12px;
	font-size: 1.2rem;
	padding: 4px 4px 4px 32px;
}
.popup_shop_detail .ic_send::before,
.popup_shop_detail .ic_ticket::before,
.popup_shop_detail .ic_online::before {
	background-repeat: no-repeat;
	background-size: 28px 28px;
	width: 28px;
}

/*--------------
購入商品のテーブル
（.tbl_purchase）
cart.jsp  cartList.jsp  applyForm.jsp  applyConfirm.jsp
----------------------------------------------------------*/
table.tbl_purchase {
	width: 100%;
}
table.tbl_purchase > thead > tr > th,
table.tbl_purchase > tbody > tr > td {
	border: 1px solid #ccc;
	padding: 8px;
	vertical-align: middle;
}
table.tbl_purchase > thead > tr > th {
	background: #efefef;
	font-size: 14px;
	font-size: 1.4rem;
	line-height: 1.2;
	white-space: nowrap;
}
table.tbl_purchase > tbody > tr > td.photo {
	border-right: none;
	width: 116px;
}
table.tbl_purchase > tbody > tr > td.photo img {
	max-width: 100px;
	max-height: 100px;
}
table.tbl_purchase > tbody > tr > td.name {
	border-left: none;
}
table.tbl_purchase > tbody > tr > td.photo,
table.tbl_purchase > tbody > tr > td.quantity,
table.tbl_purchase > tbody > tr > td.quantity_upload { /* cart.jspの再計算のセル */
	text-align: center;
}
table.tbl_purchase > tbody > tr > td.price,
table.tbl_purchase > tbody > tr > td.subtotal {
	text-align: right;
	white-space: nowrap;
}
/* 再計算・削除 */
table.tbl_purchase .recalculation {
	display: inline-flex;
		align-items: center;
}
table.tbl_purchase .recalculation > div:first-child {
	margin-right: 12px;
}
table.tbl_purchase .recalculation > div:last-child {
	text-align: center;
}
table.tbl_purchase .recalculation input {
	border: 1px solid #ccc;
	border-radius: 4px;
	box-shadow: none;
	font-size: 18px;
	font-size: 1.8rem;
	margin: 0; /* inputに設定のtop、bottomを「0」に指定 */
	padding: 0;
	text-align: center;
	width: 60px;
	height: 60px;
}
table.tbl_purchase .recalculation a.btn_recalculation {
	background-color: #f60;
	border-radius: 4px;
	color: #fff;
	display: inline-flex;
		align-items: center;
		justify-content: center;
	font-size: 12px;
	font-size: 1.2rem;
	height: 28px;
	margin-bottom: 8px;
	padding: 0 8px;
	transition: all .2s;
	white-space: nowrap;
}
table.tbl_purchase .recalculation a.delete {
	color: #000;
	font-size: 14px;
	font-size: 1.4rem;
	line-height: 1;
	text-decoration: underline;
}
table.tbl_purchase .recalculation a:hover.btn_recalculation,
table.tbl_purchase .recalculation a:hover.delete {
	opacity: .6;
	text-decoration: none;
}

/* PAD、SP用の表示 */
table.tbl_purchase .sp_add_item > div:first-child {
	display: none;
}

/*-----------------------------------------------------------------------------
■┓以下で使用の「.tbl_point」
┗┛・ポイント確認（/personal/ja-point.jsp）
　　・サービス利用履歴（/personal/ja-reservation.jsp）
-----------------------------------------------------------------------------*/
#main_style .tbl_point {
	width: 100%;
}
#main_style .tbl_point th,
#main_style .tbl_point td {
	border: 1px solid #ccc;
	line-height: 1.2;
	padding: 8px;
	vertical-align: middle;
}
#main_style .tbl_point thead th {
	background: #efefef;
	white-space: nowrap;
}
#main_style .tbl_point tbody.toggle_year th {
	background: #77b359;
	color: #fff;
	cursor: pointer;
	padding-top: 12px;
	padding-bottom: 12px;
}
#main_style .tbl_point tbody.toggle_year th:hover {
	opacity: .6;
}
#main_style .tbl_point tbody.toggle_contents {
	display: none;
}
#main_style .tbl_point tbody:nth-of-type(2) { /* 最新年度の内容は最初から表示 */
	display: table-row-group;
}
/* ポイント確認（/personal/ja-point.jsp） */
#main_style .tbl_point tbody td.point_no {
	background: #ffffef;
	text-align: center;
}
#main_style .tbl_point tbody td.point_expiration_date {
	text-align: center;
	min-width: 152px;
}
#main_style .tbl_point tbody td.point_classification {
	min-width: 160px;
}
#main_style .tbl_point tbody td.point_value,
#main_style .tbl_point tbody td.point_used,
#main_style .tbl_point tbody td.point_available {
	text-align: right;
}
/* ポイント表示（.view_point） */
#main_style .view_point {
	display: flex;
		flex-direction: column;
}
#main_style .view_point .total_point {
	border-bottom: 2px solid #ccc;
	display: flex;
		align-items: flex-end;
		justify-content: space-between;
	font-size: 22px;
	font-size: 2.2rem;
	font-weight: bold;
	line-height: 1.2;
	padding: 24px 24px 12px;
}
#main_style .view_point .total_point_value {
	color: #fda100;
	font-size: 30px;
	font-size: 3.0rem;
}
#main_style .view_point .total_point_unit {
	font-size: 16px !important;
	font-size: 1.6rem !important;
}
#main_style .view_point .comment {
	align-self: flex-end;
	color: #f00;
}
#main_style .view_point .comment i {
	margin-right: 4px;
}
#main_style .tbl_point td.limit_date {
	text-align: right;
	white-space: nowrap;
	width: 10%;
}
#main_style .tbl_point td.limit_date i {
	color: #f00;
	margin-right: .5em;
}
#main_style .tbl_point td.point_bikou a {
	white-space: nowrap;
}
/* ポイント履歴 */
.change_status {
	display :flex;
		align-items: flex-end;
		justify-content: space-between;
}
.select_year {
	display :flex;
		align-items: center;
}
.select_year div {
	margin-right: 4px;
	padding: 4px 16px;
}
ul.sort_order {
	display :flex;
		justify-content: flex-end;
	font-size: 14px;
	font-size: 1.4rem;
	padding: 4px 0;
}
ul.sort_order li {
	border-left: 1px solid #555;
	padding: 0 10px;
}
ul.sort_order li:first-child {
	border-left: none;
}
ul.sort_order li a.select {
	color: #000 !important;
	font-weight: bold;
}
.tbl_point td.point_get,
.tbl_point td.point_use,
.tbl_point td.point_lose {
	text-align: center;
}
.tbl_point td.point_get span::before {
	color: #f00;
	content: "獲得";
}
.tbl_point td.point_use span::before {
	color: #1e90ff;
	content: "利用";
}
.tbl_point td.point_lose span::before {
	color: #000;
	content: "失効";
}

/* サービス利用履歴（/personal/ja-reservation.jsp） */
#main_style .tbl_point tbody td.res_request_no {
	background: #ffffef;
	font-size: 14px;
	font-size: 1.4rem;
	text-align: center;
	white-space: nowrap;
}
#main_style .tbl_point tbody td.res_request_division {
	font-size: 14px;
	font-size: 1.4rem;
	text-align: center;
	white-space: nowrap;
}
#main_style .tbl_point tbody td.res_service_name {
	min-width: 200px;
}
#main_style .tbl_point tbody td.res_used_date {
	font-size: 14px;
	font-size: 1.4rem;
}
#main_style .tbl_point tbody td.res_used_point,
#main_style .tbl_point tbody td.res_used_cash {
	text-align: right;
}
#main_style .tbl_point tbody td.res_used_point {
	line-height: 1.2;
}
#main_style .tbl_point tbody td.res_used_point span {
	font-size: 12px;
	font-size: 1.2rem;
}
#main_style .tbl_point tbody td.res_delivery_status {
	text-align: center;
}

/* 商品詳細・再購入ボタン角丸オレンジ */
a.to_rsv_detail {
	background-color: #ffa500;
	border-radius: 16px;
	color: #fff;
	cursor: pointer;
	display: inline-block;
	font-size: 12px;
	letter-spacing: 0.05em;
	line-height: 1;
	margin-top: 4px;
	padding: .5em 1em .5em .75em;
	position: relative;
	text-decoration: none;
}
a.to_rsv_detail::after {
	content: "\f0da";
	font-family: FontAwesome;
	font-size: 12px;
	font-size: 1.2rem;
	position: absolute;
		top: 7px;
		right: 4px;
}
a.to_rsv_detail:hover{
	background: #ffc04c;
}
/* 商品詳細・医薬品第一類最終同意ボタン角丸ブルー */
a.to_rsv_detail.to_agr {
	background-color: #3cf;
	font-weight: bold;
}
a.to_rsv_detail.to_agr:hover {
	background-color: #6dd9fd;
}
/* 文中アイコン */
span.to_rsv_detail.to_agr {
	background-color: #3cf;
	border-radius: 16px;
	color: #fff;
	display: inline-block;
	font-size: 12px;
	font-size: 1.2rem;
	font-weight: bold;
	line-height: 1;
	letter-spacing: .05em;
	margin-top: 4px;
	padding: .5em 1em .5em .75em;
	position: relative;
	text-indent: 0;
}
span.to_rsv_detail.to_agr::after {
	content: "\f0da";
	font-family: FontAwesome;
	font-weight: normal;
	position: absolute;
		top: 7px;
		right: 4px;
}
/* 変更履歴ボタン黒 */
a.btn_chg_history {
	border: 1px solid #444;
	border-radius: 4px;
	color: #444;
	display: inline-block;
	font-size: 12px;
	font-size: 1.2rem;
	margin-top: 4px;
	padding: 2px 18px;
	text-decoration: none;
	vertical-align: middle;
	white-space: nowrap;
}
a.btn_chg_history:hover {
	opacity: .6;
}
/* 配送状況ボタン角丸赤 */
a.btn_delivery {
	background: #d00;
	border-radius: 4px;
	color: #fff;
	display: inline-block;
	font-size: 14px;
	font-size: 1.4rem;
	line-height: 1.2;
	padding: 8px 12px;
	text-decoration: none;
	white-space: nowrap;
}
a.btn_delivery.waiting {
	background: #fff;
	border: 1px solid #444;
	color: #444;
}
a.btn_delivery:hover {
	opacity: .6;
}
/* 数量変更のコメント */
table.tbl_purchase .reload_comment {
	font-size: 12px;
	font-size: 1.2rem;
	text-align: right;
}

/* 購入価格・配送料のテーブル */
table.tbl_total_price {
	margin-left: auto;
}
table.tbl_total_price td {
	text-align: right;
}
table.tbl_total_price th {
	text-align: left;
}
table.tbl_total_price td:first-child,
table.tbl_total_price td:nth-child(2),
table.tbl_total_price td:last-child {
}
table.tbl_total_price td:nth-child(3) {
	padding: 0 4px;
}
table.tbl_total_price td:last-child {
	text-align: left;
}
table.tbl_total_price td.payway_confirm {
	font-weight: bold;
	text-align: center;
	padding: 4px 0;
}
/* 合計金額 */
.product_total_price {
	font-size: 20px;
	font-size: 2.0rem;
	font-weight: bold;
	text-align: right;
}
.product_total_price span {
	padding: 0 4px;
}
.reload_comment + .product_total_price,
table.tbl_total_price + .product_total_price {
	margin-top: 8px;
}
.product_total_price + .text_lead {
	margin-top: 24px;
}
/* 購入価格計/配送料/合計 */
table.cost_breakdown {
	font-size: 18px;
	font-size: 1.8rem;
	margin-left: auto;
	text-align: right;
}
/* 送料・お届けについて */
.product_about_yuso {
	font-size: 14px;
	font-size: 1.4rem;
	text-align: right;
}

/*--------------
利用履歴詳細
ja-reservationDetail.jsp
----------------------------------------------------------*/
/* 再購入ボタン*/
table.tbl_purchase a.btn_toform,
table.tbl_purchase a.btn_todetail,
table.tbl_purchase a.btn_close {
	color: #fff;
	display:block;
	font-size: 13px;
	font-size: 1.3rem;
	margin: .5em auto;
	padding: 6px 0;
	position: relative;
	text-align: center;
	text-decoration: none;
	width: 100px;
}
table.tbl_purchase a.btn_toform::after,
table.tbl_purchase a.btn_todetail::after,
table.tbl_purchase a.btn_close::after {
	content: "\f0da";
	font-family: FontAwesome;
	font-size: 12px;
	font-size: 1.2rem;
	position: absolute;
		top: 7px;
		right: 4px;
}
table.tbl_purchase a.btn_toform i.fa,
table.tbl_purchase a.btn_todetail i.fa,
table.tbl_purchase a.btn_close i.fa {/*アイコン位置調整*/
	font-size: 10px;
	font-size: 1.0rem;
	padding-left: 1em;
	position: absolute;
		top: 35%;
		right: 4px;
}
table.tbl_purchase .btn_toform {/*オレンジ*/
	background-color: #ffa500;
}
table.tbl_purchase .btn_toform:hover {
	background-color: #ffb732;
	color: #fff !important;
	text-decoration: none !important;
}
table.tbl_purchase .btn_todetail {/*ブルー*/
	background-color: #015abd;
}
table.tbl_purchase .btn_todetail:hover {
	background-color: #337aca;
	color: #fff !important;
	text-decoration: none !important;
}
table.tbl_purchase .btn_close {/*グレー*/
	background-color: #626262;
	color: #bfbfbf !important;
}
table.tbl_purchase .btn_close:hover {
	text-decoration: none !important;
}
.app_numb{/*申込番号*/
	background-color:#e5f0fd;
	display: inline-block;
	margin: 16px 0 0 ;
	padding: 10px 16px;
}
.app_numb span{
	font-weight: bold;
	font-size: 129% ;
	margin-left: 4px;
}
.cart_style .text_lead p {/*利用日*/
	font-size: 1.8rem;
	font-weight: bold;
	padding-left: .75em;
	position: relative;
}
.cart_style .text_lead p::before {
	content: "\f0da";
	font-family: FontAwesome;
	font-size: 17px;
	font-size: 1.7rem;
	position: absolute;
		top: 0px;
		left: 0px;
}
/*--------------
商品一覧、商品詳細、カート内容確認、申込フォームページの最下部
（.btn_submit_area）
----------------------------------------------------------*/
.submit_area {
	display: flex;
		align-items: flex-start;
		flex-wrap: wrap;
		justify-content: space-between;
	margin-top: 48px;
	text-align: center;
	width: 100%;
}
.submit_area .btn_submit {
	margin-left: auto;
}
/* confirm内のアイコン位置 */
.submit_apply_confirm input.btn_submit {
	background-position-x: 72px;
}
.submit_apply_form input.btn_submit.btn_large,
.submit_apply_confirm input.btn_submit.btn_large {
	background-position-x: 16px;
	padding: 0 16px 0 36px;
}
/*--------------
○内の“→”（.circle_arrow）
○内の“↓”（.circle_arrow_down）
----------------------------------------------------------*/
.circle_arrow,
.circle_arrow_down {
	display: block;
	padding: 0 0 0 20px;
	position: relative;
}
.circle_arrow::before,
.circle_arrow_down::before {
	background-color: #558;
	border-radius: 50%;
	content: "";
	font-size: inherit;
	line-height: 0;
	position: absolute;
		top: .35em;
		left: 0;
	width: 16px;
	height: 16px;
}
.circle_arrow::after {
	border-color: transparent transparent transparent #fff;
	border-style: solid;
	border-width: 5px 0 5px 5px;
	content: "";
	font-size: inherit;
	line-height: 0;
	position: absolute;
		top: calc(.35em + 3px);
		left: 6px;
	width: 0;
	height: 0;
}
.circle_arrow_down::after {
	border-color: #fff transparent transparent transparent;
	border-style: solid;
	border-width: 5px 5px 0 5px;
	content: "";
	font-size: inherit;
	line-height: 0;
	position: absolute;
		top: calc(.35em + 6px);
		left: 3px;
	width: 0;
	height: 0;
}
/*--------------
□内の“→”
（.square_arrow）
----------------------------------------------------------*/
.square_arrow {
	font-weight: bold;
	padding-left: 18px;
	position: relative;
}
.square_arrow::before {
	border: 1px solid #000;
	content: "";
	position: absolute;
		top: .4em;
		left: 0;
	width: 12px;
	height: 12px;
}
.square_arrow::after {
	border-color: transparent transparent transparent #000;
	border-width: 4px 0 4px 6px;
	border-style: solid;
	content: "";
	position: absolute;
		top: calc(.4em + 3px);
		left: 4px;
	width: 0;
	height: 0;
}
/*--------------
申込番号（申込完了ページ）
（.receipt_number）
----------------------------------------------------------*/
.receipt_number {
	margin-top: 1.5em;
	margin-bottom: 1.5em;
}
.receipt_number td,
.receipt_number th {
	border: 1px solid #999;
	padding: 12px;
}
.receipt_number th {
	background-color: #eee;
}
.receipt_number td {
	background-color: #fff;
	font-size: 20px;
	font-size: 2.0rem;
	font-weight: bold;
}
/*--------------
ポップアップ内等で使用
（.btn_bottom）
----------------------------------------------------------*/
.btn_bottom {
	display: flex;
		flex-direction: row-reverse;
		flex-wrap: wrap;
		justify-content: center;
	margin-top: 48px;
	width: 100%;
}
.btn_bottom input,
a.btn_input {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-color: #f3f3f3;
	border: 1px solid #666;
	border-radius: 4px;
	box-shadow: none;
	color: #000 !important;
	cursor: pointer;
	display: inline-flex;
		align-items: center;
		justify-content: center;
	font-family: inherit;
	font-size: inherit;
	height: 56px;
	line-height: 1;
	min-width: 200px;
	margin: 0 8px 8px;
	padding: 0 24px;
	transition: all .2s;
}
.btn_bottom input:hover,
a.btn_input:hover {
	background-color: #fff;
	text-decoration: none !important;
}
.btn_bottom input:focus,
a.btn_input:active {
	background-color: #fff;
}
/*--------------
tableをくくる<div>の設定（テーブル、オーバーフローで横スクロールバー表示）
（.tbl_scroll）
----------------------------------------------------------*/
#vc_style .tbl_scroll,
#form_style .tbl_scroll {
	overflow-x: auto;
	padding-bottom: 1px;/* 要素内の高さがぴったりだと意図せずスクロールバーで出てしまうため、その対応策 */
	width: 100%;
}
#vc_style .tbl_scroll {
	margin-bottom: 1.5em
}
#form_style .tbl_scroll {
	margin-bottom: 0;
}
#vc_style .tbl_scroll::-webkit-scrollbar,
#form_style .tbl_scroll::-webkit-scrollbar {
	height: 4px;
}
#vc_style .tbl_scroll::-webkit-scrollbar-track,
#form_style .tbl_scroll::-webkit-scrollbar-track {
	background: #eee;
	border-radius: 4px;
}
#vc_style .tbl_scroll::-webkit-scrollbar-thumb,
#form_style .tbl_scroll::-webkit-scrollbar-thumb {
	background: #666;
	border-radius: 5px;
}
/*--------------
ページのトップへ
（.page_top_vc）
----------------------------------------------------------*/
.page_top_vc {
	font-size: 12px;
	font-size: 1.2rem;
	position: fixed;
/*
		bottom: 30px;
		right: 10px;
*/
		bottom: 16px;
		right: 16px;
	width: 50px;
	height: 50px;
}
.page_top_vc a {
	background: #999;
	border-radius: 50%;
	box-shadow: 0 0 8px rgba(0, 0, 0, .2);
	color: #fff;
	display: table-cell;
	text-align: center;
	text-decoration: none;
	vertical-align: middle;
	width: 50px;
	height: 50px;
}
.page_top_vc a:hover {
	background: #ccc;
	opacity: .9;
	text-decoration: none;
}
/*--------------
VC用フッター（コピーライト）
（footer#vc_style_footer）
----------------------------------------------------------*/
footer#vc_style_footer {
	font-size: 12px;
	font-size: 1.2rem;
	position: absolute;
		bottom: 4px;
	text-align: center;
	width: 100%;
}

/*-----------------------------------------------------------------------------
■┓リンクスタイル
┗┛
-------------------------------------------------------------------------------*/
/*--------------
「>」付のテキストリンク（大きいサイズ）
（.impt_link a）
----------------------------------------------------------*/
.impt_link {
	font-size: 20px;
	font-size: 2.0rem;
	font-weight: bold;
	margin-bottom: 1em;
}
.impt_link a {
	display: inline-block;
	padding-left: 20px;
	position: relative;
}
.impt_link a:not(:first-child) {
	margin-top: 8px;
}
.impt_link a::before {
	border-color: transparent #03c #03c transparent;
	border-style: solid;
	border-width: 0 2px 2px 0;
	content: "";
	position: absolute;
		top: .55em;
		left: 0;
	transform: rotate(-45deg);
	width: 9px;
	height: 9px;
}
.impt_link a:hover::before {
	border-color: transparent #f00 #f00 transparent;
}
/*--------------
「>」付のテキストリンク（標準サイズ）
（a.arrow_link）
----------------------------------------------------------*/
a.arrow_link {
	display: inline-block;
	padding-left: 16px;
	position: relative;
}
a.arrow_link::before {
	border-color: #03c #03c transparent transparent;
	border-style: solid;
	border-width: 1px 1px 0 0;
	content: "";
	position: absolute;
		top: .55em;
		left: 0;
	transform: rotate(45deg);
	width: 7px;
	height: 7px;
}
a:hover.arrow_link::before {
	border-color: #f00 #f00 transparent transparent;
}
/*-----------------------------------------------------------------------------
■┓レイアウトスタイル
┗┛
-------------------------------------------------------------------------------*/
/* PCで左右並びのdivを、SPで縦並び */
.chg_1column_sp {
	display: flex;
		justify-content: space-between;
}
.chg_1column_sp > div {
	margin-right: 24px;
}
.chg_1column_sp > div.flex_shrink_0 {
	flex-shrink: 0;
}
.chg_1column_sp > div:last-of-type {
	margin-right: 0
}
/*-----------------------------------------------------------------------------
■┓ボタンスタイル
┗┛
-------------------------------------------------------------------------------*/
/* ボタンスタイルの形状設定 */
.btn_apply {
	border-radius: .5em;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
	cursor: pointer;
	display: inline-block;
	line-height: 1.5em;
	outline: none;
	padding: .5em 2em;
	text-align: center;
	text-decoration: none;
	text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
}
.btn_apply_s {
	border-radius: .5em;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
	cursor: pointer;
	display: inline-block;
	font-size: 14px;
	font-size: 1.4rem;
	line-height: 1.0em;
	outline: none;
	padding: .5em 2em;
	text-align: center;
	text-decoration: none;
	text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
}
.btn_apply:hover , .btn_apply_s:hover {
	text-decoration: none;
}
.btn_apply:active , .btn_apply_s:active {
	position: relative;
		top: 1px;
}
/* ボタンスタイルのカラー設定 */
.btn_apply_orange {
	background: linear-gradient(to bottom, #faa51a, #f47a20);
	background-color: #f78d1d; /* IEでborderとbackgroundの隙間を埋める処理 */
	border: 1px solid #da7c0c;
	color: #fef4e9;
	transition: all .2s;
}
.btn_apply_orange:hover {
	background: linear-gradient(to bottom, #f88e11, #f06015);
	background-color: #f47c20; /* IEでborderとbackgroundの隙間を埋める処理 */
}
.btn_apply_orange:active {
	background: linear-gradient(to bottom, #f47a20, #faa51a);
	background-color: #fcd3a5; /* IEでborderとbackgroundの隙間を埋める処理 */
	color: #fcd3a5;
}

/*-----------------------------------------------------------------------------
■┓リストスタイル
┗┛
-------------------------------------------------------------------------------*/
ol.number {
	margin-left: 1.5em;
}
ol.number li {
	margin-bottom: .75em;
}
ol.nest1 li {
	margin-top: 0;
	margin-bottom: 0;
}
ol.nest1 { /* 入れ子1.のol */
	counter-reset: li;
	list-style: none;
	margin-top: .35em;
	padding-left: 0;
}
ol.nest1 > li {
	padding-left: 2em;
	position: relative;
}
ol.nest1 > li:before {
	content: counter(li) "";
	counter-increment: li;
	letter-spacing: -.03em;
	position: absolute;
		left: 0;
	text-align: right;
	width: 1em;
}
ol.nest1 > li:after {/*番号とスタイルを分けるため*/
	content: "）";
	position: absolute;
		top: 0;
		left: 1.2em;
}
ol.nest2 { /* 入れ子2.のol */
	counter-reset: li;
	list-style: none;
	margin-top: .35em;
	padding-left: 0;
}
ol.nest2 > li {
	padding-left: 1.3em;
	position: relative;
}
ol.nest2 > li:before {
	background: #000;
	border-radius: 50px;
	color: #fff;
	content: counter(li) "";
	counter-increment: li;
	font-size: 14px;
	font-size: 1.4rem;
	position: absolute;
		top: calc(0% + 3px);
		left: 0;
	text-align: center;
	width: 1.3em;
	height: 1.3em;
}

/*--------------
「>」付きのリスト
（.angle_right）
----------------------------------------------------------*/
ul.angle_right li {
	padding-left: 1.5em;
	position: relative;
}
ul.angle_right li::before {
	color: gray;
	content: "\f105 ";
	font-family: FontAwesome;
	position: absolute;
		top: 0;
		left: .5em;
}

/*-----------------------------------------------------------------------------
■┓必須アイコン
┗┛
-------------------------------------------------------------------------------*/
/* テーブルの項目等（テキストの左側に挿入） */
.icon_required {
	background: pink;
	border-radius: 2px;
	box-shadow: inset 1px 3px 9px -5px rgba(255, 255, 255, .9);
	color: #000;
	display: inline-block; /* IEで矢印がずれないように対応 */
	font-size: 12px;
	font-size: 1.2rem;
	font-family: 'Noto Sans Japanese', "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", Osaka, "ＭＳ Ｐゴシック", sans-serif;
	margin-right: 1em;
	padding: 2px 6px;
	position: relative;
	white-space: nowrap;
}
.icon_required::after {
	border: 4px solid transparent;
	border-left: 6px solid pink;
	content: '';
	position: absolute;
		top: calc(50% - 4px);
		left: calc(100% - 1px); /* retinaディスプレイで線が出ないよう1pxずらして対応 */
	width: 0;
	height: 0;
}
/* セクションのタイトル等 */
.icon_required_ttl {
	background: #fff3f3;
	border: 1px solid #c00;
	color: #c00;
	display: inline-block; /* IEで矢印がずれないように対応 */
	font-size: 12px;
	font-size: 1.2rem;
	letter-spacing: .05em;
	line-height: 1;
	margin-left: 8px;
	padding: 2px 4px;
	vertical-align: 1px;
}

/*-----------------------------------------------------------------------------
■┓SP1S31 禁煙応援用品用css
┗┛（.nicorette_area）
・/vc/base/usr/docs/nicorette_a.jsp（#vc_style 以下）
・/vc/base/usr/apply/applyForm.jsp（#form_style 以下）
-------------------------------------------------------------------------------*/
.nicorette_area .nicorette_top_info {
	border-bottom: 1px solid #ccc;
	display: flex;
		align-items: center;
	margin-bottom: 24px;
	padding-bottom: 16px;
}
.nicorette_area .nicorette_top_info div:first-child {
	margin-right: 32px;
	width: 100px;
}
.nicorette_area .nicorette_top_info div:first-child img {
	width: 100%;
}
.nicorette_area .nicorette_top_info div:last-child {
	font-size: 18px;
	font-size: 1.8rem;
}
.nicorette_area .qarea_box .ques_item,
.nicorette_area .qarea_box .ans_item {
	border-bottom: 1px solid #e7e7e7;
	display: flex;
		align-items: flex-start;
	margin-bottom: 24px;
	padding-bottom: 24px;
}
.nicorette_area .qarea_box .ques_item label {
	flex-shrink: 1;
	margin-right: 0;
	padding-left: 4em;
}
.nicorette_area .qarea_box .ques_item {
		flex-wrap: wrap;
}
.nicorette_area .qarea_box .ans_item {
		flex-wrap: nowrap;
}
.nicorette_area .qarea_box .ques_item .ques_num,
.nicorette_area .qarea_box .ans_item .ans_num {
	width: 3em;
}
.nicorette_area .qarea_box .ques_item .ques_num {
	display: inline-block;
	margin-left: -2em;
}
.nicorette_area .qarea_box .ans_item .ans_num {
	color: #c00;
}
.nicorette_area .qarea_box .ans_item .ans_txt {
	width: calc(100% - 3em);
}
.nicorette_area .qarea_box .ques_item .out_of_label {
	flex-shrink: 1;
	flex-basis: 100%;
	margin: 8px 0 0 72px;
}
.nicorette_area .qarea_box input[type="checkbox"]:disabled + label + .out_of_label {
	color: #999;
}
.nicorette_area .qarea_box .ques_item ul {
	margin-left: 2.2em;
}
.nicorette_area .qarea_box .ques_item ul.qtd_list {
	list-style-type: lower-alpha;
}
.nicorette_area .qarea_box.nicorette_a input[type="checkbox"]:disabled + label { /* nicorette_a.jsp 内の disabled の color を上書き */
	color: #333;
}
.nicorette_area .submit_area input.btn_submit {
	background-position: 96px 50%;
}

/*-----------------------------------------------------------------------------
■┓共通ページの言語切替ボタン
┗┛/vc/base/usr/personal/idpw/email/inquiryForm.jsp
|   /share/requirements.jsp
|   /share/eng/requirements.jsp 他
-------------------------------------------------------------------------------*/
.commonpage_btn_chglang {
	margin-bottom: -8px;
}
.commonpage_btn_chglang a.btn_chglang {
	border: 1px solid #1c81e5;
	border-radius: 2px;
	color: #1c81e5 !important;
	display: block;
	font-size: 12px;
	font-size: 1.2rem;
	line-height: 1;
	margin-left: auto;
	padding: 4px;
	text-align: center;
	transition: .3s;
	width: 90px;
}
.commonpage_btn_chglang a:hover.btn_chglang {
	background-color: #1c81e5;
	color: #fff !important;
	text-decoration: none !important;
}

/*-----------------------------------------------------------------------------
■┓ヘッダー、フッター等がないページ
┗┛「.main_column」を「#no_head_style」でくくる
-------------------------------------------------------------------------------*/
#no_head_style {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	border-top: 8px solid #888;
	border-bottom: 4px solid #888;
	padding-bottom: 80px;
	position: relative;
	/*
	min-height: 100vh;
	100vh → 画面の高さ → iOS Safariだとアドレスバーの分があふれてしまうので、jsで高さを取得して指定
	*/
}
#no_head_style .main_column {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	margin: 0 auto;
	max-width: 900px;
	padding: 20px;
}
#no_head_style #vc_style .no_head_style_title {
	border-bottom: 1px solid #333;
	font-size: 28px;
	font-size: 2.8rem;
	margin: 24px 0 32px;
	padding-bottom: 10px;
	text-align: center;
}
/* 団体名を入れるとき */
#no_head_style .wrap_group_name {
	background-color: #f6f6f6;
	border-bottom: 1px solid #eee;
	margin-bottom: 8px;
}
#no_head_style .wrap_group_name .nhs_group_name {
	font-size: 20px;
	font-size: 2.0rem;
	font-weight: bold;
	line-height: 1.3;
	margin: 0 auto;
	padding: 24px 20px;
	max-width: 900px;
}

/*-----------------------------------------------------------------------------
■┓各グループcss（/vc/gid/usr/docs/css/main.css）を読まないページ用設定。
┗┛
　　主に/home/vhr/apps/vc/webapps/vc/share/以下のエラー、お知らせページなど対象。
　　「.no_group_style」でfont関係プロパティ設定。
-------------------------------------------------------------------------------*/
body .no_group_style {
	background: #fff;
	color: #333;
	font-size: 16px;
	font-size: 1.6rem;
	font-family: "Noto Sans Japanese","ヒラギノ角ゴ ProN W3", Meiryo, sans-serif;
	letter-spacing: 0.03em;
	line-height: 1.6;
	-webkit-text-size-adjust: 100%;
}