@charset "utf-8";
/*==================================================================================================

基本設定

==================================================================================================*/
/* 共通class */
@import url('https://secure.apap.jp/vc/base/usr/docs/css/common_smart.css');

/*########################################################################################

ヘッダー
#wrap_header

########################################################################################*/
#header h1 {
	margin-bottom: 6px;
}
#header h1 a {
	background-size: 180px 40px;
	width: 180px;
	height: 40px;
}
#header .kenpo_name {
	font-size: 14px;
	font-size: 1.4rem;
}

/*########################################################################################

トップページ、セカンダリページの基本設定

########################################################################################*/
.contents { /* 商品購入ページでも使用しているので「#main_style」は付けない */
	width: 100%;
	padding: 16px;
}
#main_style .main_ttl .contents {
	padding: 16px;
}
#main_style .main_ttl .contents .main_ill_pcpad {
	display: none;
}
#main_style .main_ttl .contents .main_ill_sp {
	background-position: center top;
	display: block;
	margin-top: 16px;
	width: 100%;
}
#main_style .main_ttl h2 {
	font-size: 28px;
	font-size: 2.8rem;
}
#main_style .main_ttl .ttl_lead {
	margin-top: 16px;
}
#main_style h1 {
	font-size: 20px;
	font-size: 2.0rem;
}
#main_style h3 {
	font-size: 24px;
	font-size: 2.4rem;
	margin-top: 96px;
}
#main_style h3 span {
	font-size: 14px;
	font-size: 1.4rem;
}
/* 禁煙マーク付きタイトル */
#main_style .kinenmark_ttl,
#main_style .kinenmark_ttl_red {
	font-size: 20px;
	font-size: 2.0rem;
}
#main_style .kinenmark_ttl span::before,
#main_style .kinenmark_ttl_red span::before {
	vertical-align: -10px;
	width: 36px;
	height: 36px;
}
/* 青背景タイトル */
#main_style .blue_ttl {
	font-size: 16px;
	font-size: 1.6rem;
}
/* メインタイトル内のリンクボタン */
#main_style a.btn_link_ttl {
	font-size: 16px;
	font-size: 1.6rem;
}
#main_style .btn_link_ttl span {
	font-size: 14px;
	font-size: 1.4rem;
}


/*########################################################################################

トップページ

########################################################################################*/
/* 期間マーク */
#main_style .mk_period {
	margin-bottom: 8px;
}
#main_style .index_ttl {
	margin-top: 0;
}
#main_style .index_ttl img {
	margin-bottom: 24px;
	width: 100%;
	height: auto;
}
/* メインタイトルの画像を指定 */
#main_style .main_ill_index {
	background-size: 220px 220px;
	margin-top: 16px !important;
	height: 220px;
}

/* STEP01 */
#main_style .diacrisis_step01 {
	background: none;
	margin-top: 56px;
	padding: 44px 0 0 44px;
}
#main_style .mark_step01 {
	top: 0;
	left: 0;
	width: 66px;
	height: 66px;
}
#main_style a.btn_diagnosis {
	padding: 16px;
	width: 100%;
}
#main_style a.btn_diagnosis > div:first-child {
	font-size: 20px;
	font-size: 2.0rem;
}
#main_style a.btn_diagnosis > div:nth-child(2) {
	font-size: 14px;
	font-size: 1.4rem;
}
#main_style a.btn_diagnosis > div:last-child {
	font-size: 14px;
	font-size: 1.4rem;
}
#main_style a.btn_diagnosis > div:last-child span::before {
	width: 13px;
	height: 10px;
}

/* STEP02 */
#main_style .diacrisis_step02 {
	margin-top: 16px;
	padding: 44px 0 0 44px;
}
#main_style .diacrisis_step02::after {
	content: none;
}
#main_style .mark_step02 {
	top: 0;
	right: auto;
	left: 0;
	width: 66px;
	height: 66px;
}
#main_style a.btn_method {
	margin-left: auto;
	padding: 16px;
	width: 100%;
}
#main_style a.btn_method > div:first-child {
	font-size: 20px;
	font-size: 2.0rem;
}
#main_style a.btn_method > div:nth-child(2) {
	font-size: 14px;
	font-size: 1.4rem;
}
#main_style a.btn_method > div:last-child {
	font-size: 14px;
	font-size: 1.4rem;
}
#main_style a.btn_method > div:last-child span::before {
	width: 13px;
	height: 10px;
}
#main_style a:hover.btn_method > div:last-child span::before {
	width: 13px;
	height: 10px;
}

/* STEP03 */
#main_style .diacrisis_step03 {
	padding: 56px 0 24px;
}
#main_style .mark_step03 {
	width: 66px;
	height: 66px;
}
#main_style .application_box {
	padding: 16px;
}
#main_style .ab_line1 {
	flex-flow: wrap;
	justify-content: center;
}
#main_style .ab_line1 > div:nth-child(2) {
	font-size: 20px;
	font-size: 2.0rem;
}
#main_style .ab_line1 > img {
/*
	margin-top: -48px;
	width: calc(100% - 160px);
	max-width: 119px;
	height: auto;
*/
	width: 150px;
	height: 159px;
}
#main_style .ab_line1 > div:last-child {
	text-align: left;
}
#main_style .ab_line3 > div:first-child {
	font-size: 16px;
	font-size: 1.6rem;
	text-align: center;
	width: 100%;
}
#main_style .ab_line3_kome {
		left: 0;
}
#main_style a.btn_application {
	font-size: 22px;
	font-size: 2.2rem;
	max-width: 100%;
}
#main_style span.btn_application {
	margin: .5em 0 0 0;
	width: auto;
}
#main_style span.btn_application.btn_end {
	font-size: 22px;
	font-size: 2.2rem;
}

/* 「禁煙の方法」「禁煙コラム」へのリンク */
#main_style .link_method_column {
	flex-direction: column;
}
#main_style .link_method_column a {
	padding: 16px;
	width: 100%;
}
#main_style .btn_link_method {
	margin-bottom: 16px;
}

/* 自己診断ポップアップ */
.diagnosis_header {
	background-position: left 16px top 12px;
	background-size: 126px 28px;
	font-size: 12px;
	font-size: 1.2rem;
	padding: 44px 16px 8px;
	text-align: left;
}
.diagnosis_contents {
	margin: 0 8px 8px;
	padding: 24px 16px;
	min-height: calc(100% - 119px);
}
.diagnosis_ttl {
	font-size: 14px;
	font-size: 1.4rem;
}
.diagnosis_ttl > div {
	font-size: 22px;
	font-size: 2.2rem;
}
/* 自己診断スタート  商品購入ページでも使用しているので「#main_style」は付けない */
.diagnosis_start {
	background-position: top 0 left 0;
	background-size: 55px 73px;
	min-height: 73px;
}
.diagnosis_start_fukidasi {
	border-radius: 8px;
	font-size: 12px;
	font-size: 1.2rem;
	margin-left: 64px;
	padding: 8px;
}
.diagnosis_start_fukidasi::after {
	content: none;
}
a.btn_diagnosis_single {
	font-size: 28px;
	font-size: 2.8rem;
	margin-top: 32px;
	margin-bottom: 16px;
	width: 240px;
	height: 64px;
}
/* 自己診断質問 */
.diagnosis_question {
	background-size: 55px 73px;
	font-size: 18px;
	font-size: 1.8rem;
	margin-top: 40px;
	padding: 20px 0 0 64px;
	min-height: 73px;
}
.question_fukidasi {
	border-radius: 80px;
	font-size: 16px;
	font-size: 1.6rem;
	padding: 4px 16px 6px;
	top: -24px;
	left: 40px;
}
.question_fukidasi::after {
	top: calc(100% - 6px);
	left: 16px;
	width: 20px;
	height: 9px;
}
a.btn_diagnosis_yes,
a.btn_diagnosis_no {
	font-size: 28px;
	font-size: 2.8rem;
	margin: 8px 16px;
	width: 240px;
	height: 64px;
}
/* 自己診断チェックシート */
.diagnosis_check {
	margin-top: 24px;
}
.mark_check_question {
	width: 18px;
	height: 18px;
}
.diagnosis_check input[type="checkbox"] + label {
	font-size: 14px;
	font-size: 1.4rem;
	margin: 0 0 16px 0;
	padding: 12px 48px 12px 12px;
}
.diagnosis_check input[type="checkbox"] + label span span {
	font-size: 12px;
	font-size: 1.2rem;
}
.diagnosis_check input[type="checkbox"] + label::before {
	border-width: 3px;
	top: calc(50% - 13px);
	right: 12px;
	width: 24px;
	height: 24px;
}
.diagnosis_check input[type="checkbox"] + label::after {
	border-left-width: 3px;
	border-bottom-width: 3px;
	top: calc(50% - 7px);
	right: 18px;
	width: 16px;
	height: 10px;
}
.diagnosis_check input[type="checkbox"]:checked + label::before {
	border: 3px solid #000; /* 共通のチェックボックスの指定を上書き */
}

/* 自己診断結果 */
.diagnosis_result {
	padding: 0 8px;
	max-width: 100%;
	height: 144px;
}
.diagnosis_result > div:first-child {
	font-size: 24px;
	font-size: 2.4rem;
	line-height: 1.4;
}
.diagnosis_result > div:last-child {
	font-size: 14px;
	font-size: 1.4rem;
}
/* 自力で禁煙 */
.diagnosis_result.resutl_self {
	margin-top: 0;
	margin-bottom: 80px;
}
.diagnosis_result.resutl_self::after {
	left: calc(50% - 124px);
	width: 247px;
	height: 66px;
}
/* 薬で禁煙 */
.diagnosis_result.resutl_drug {
	margin-top: 0;
	margin-bottom: 24px;
	max-width: calc(100% - 56px);
}
.diagnosis_result.resutl_drug::before {
	left: -45px;
	width: 45px;
	height: 126px;
}
.diagnosis_result.resutl_drug::after {
	left: calc(100% - 3px);
	width: 55px;
	height: 115px;
}
.diagnosis_result_txt {
	font-size: 14px;
	font-size: 1.4rem;
}


/*########################################################################################

セカンダリページ

########################################################################################*/
/*-----------------------------------------------------------------------------

■┓みんなで禁煙プロジェクトとは？
┗┛
-----------------------------------------------------------------------------*/
/* メインタイトルの画像を指定 */
#main_style .main_ill_about {
	background-size: 240px 158px;
	width: 240px;
	height: 158px;
}
#main_style .about {
	padding: 16px;
}
#main_style .tbl_about th {
	padding: 0 0 .25em 0;
}
#main_style .tbl_about td {
	padding: 0 0 1.5em 1em;
}
#main_style .tbl_about .tbl_about_period tbody {
	margin-top: 0;
}
#main_style .tbl_about .tbl_about_period th,
#main_style .tbl_about .tbl_about_period td {
	vertical-align: top;
}
#main_style .tbl_about .tbl_about_period td {
	padding-bottom: 1em;
}
#main_style .contact {
	border-radius: 8px;
	padding: 12px 16px;
}
#main_style .contact > div:last-child > div:first-child {
	margin-bottom: 8px
}
#main_style .contact {
	flex-wrap: wrap;
}
#main_style .contact > div:first-child {
	margin: 0 0 8px 0;
	text-align: center;
	width: 100%;
}
/*インセンティブのテーブル*/
#main_style .tbl_about .tbl_about_incentive tbody td:not(:last-child) {
	display: flex;
		justify-content: space-between;
}
#main_style .tbl_about .tbl_about_incentive tbody td:first-child {
	background-color: #f1f50d;
}
#main_style .tbl_about .tbl_about_incentive tbody td::before {
	content: attr(label);
	display: inline-block;
	float: left;
	clear: both;
	font-size: 14px;
	font-size: 1.4rem;
	font-weight: bold;
	padding-right: 16px;
	text-align: left;
	white-space: nowrap;
}
#main_style .tbl_about .tbl_about_incentive tbody td.bikou {
	padding-top: 0;
	width: 100%;
}
#main_style .tbl_about .tbl_about_incentive .sp_displaynone { /* 備考欄がないときの削除用 */
	display: none;
}
#main_style .tbl_about .tbl_about_incentive tbody tr:not(:last-child) {
	border-bottom: none;
}
#main_style .tbl_about .tbl_about_incentive.tbl_caption tbody td:first-child::before {
	content: none;
}
#main_style a.btn_blue {
	font-size: 18px;
	font-size: 1.8rem;
	padding: 8px;
	flex: 0 1 100%;
}
#main_style a.btn_blue:not(:last-child) {
	margin: 24px 0 0;;
}
#main_style .ope dt {
	font-size: 14px;
	font-size: 1.4rem;
}
#main_style .online_contact {
	border-radius: 16px;
	padding: 12px 16px;
}
#main_style .online_contact .online_contact_ttl {
	margin-right: 0;
	text-align: center;
}
/*-----------------------------------------------------------------------------

■┓禁煙の方法
┗┛
-----------------------------------------------------------------------------*/
/* メインタイトルの画像を指定 */
#main_style .main_ill_method {
	background-size: 190px 170px;
	margin: 16px 0 0 0 !important;
	height: 170px;
}
#main_style .wrap_anc_link {
	flex-direction: column;
	margin-top: 16px;
}
#main_style a.btn_anc_method {
	background-position: right 24px center;
	margin: 8px 0;
	padding: 16px 64px 16px 16px;
	text-align: left;
	width: 100%;
}

/* ポイントボックス */
#main_style .point_box {
	margin-bottom: 48px;
	padding: 24px;
}
#main_style .point_name {
	left: 16px;
}
#main_style .point_contents > img {
	display: none;
}
#main_style .point_ttl {
	font-size: 20px;
	font-size: 2.0rem;
	line-height: 1.4;
}
#main_style .method_cmt_1 {
	font-size: 16px;
	font-size: 1.6rem;
	padding-right: 96px;
}
#main_style .method_cmt_1::after {
	background-size: 87px 110px;
	right: 8px;
	width: 87px;
	height: 110px;
}
#main_style .method_cmt_2 {
	background-position: right 88px bottom 0, right 16px bottom -8px;
	background-size:  217px 120px, 79px 120px;
	padding: 16px 16px 120px 16px;
}
#main_style .method_cmt_3 {
	background-position: right 104px bottom 0, right 8px bottom -16px;
	background-size:  217px 125px, 134px 127px;
	padding: 16px 16px 120px 16px;
}
/* スケジュール */
#main_style .wrap_method3_schedule {
	flex-direction: column;
}
#main_style .wrap_method3_schedule > img {
	margin: 0 auto;
}
#main_style .method3_schedule {
	padding-left: 8px;
}
#main_style .method3_schedule > div {
	padding: 16px 16px 16px 24px;
}

/* 金額 */
#main_style .tbl_scroll.method3_price {
	margin: 8px 0;
}
#main_style .tbl_method3_price td {
	font-size: 12px;
	font-size: 1.2rem;
	padding: 8px;
}
#main_style .tbl_method3_price td .burden {
	padding: 4px 16px;
}
#main_style .tbl_method3_price td .burden span {
	font-size: 12px;
	font-size: 1.2rem;
}
#main_style .tbl_method3_price td .amount {
	font-size: 14px;
	font-size: 1.4rem;
}

/* 保険診療の条件 */
#main_style .conditions {
	margin-left: 0;
	padding: 16px;
}
#main_style .conditions::after {
	background-position: bottom -40px left 0;
	background-size: 94px 188px;
	position: absolute;
		bottom: -20px;
		left: -8px;
	width: 94px;
	height: 188px;
}
#main_style .foreign_txt {
	padding-left: 80px;
}


/*-----------------------------------------------------------------------------

■┓禁煙コラム
┗┛
-----------------------------------------------------------------------------*/
/* メインタイトルの画像を指定 */
#main_style .main_ill_column {
	background-size: 180px 170px;
	height: 170px;
}

/* 成分表 */
#main_style .component {
	padding: 16px;
}
#main_style .tbl_component thead {
	display: none;
}
#main_style .tbl_component tbody tr td:first-child {
	padding: 0;
}
#main_style .tbl_component tbody tr td:nth-child(2) {
	display: none;
}
#main_style .tbl_component tbody tr td:last-child {
	padding: 0 0 16px .5em;
}
#main_style .tbl_component tbody tr td:last-child::before {
	content: "（例）";
}
#main_style .component_fukidashi {
	padding-right: 64px;
}
#main_style .component_char {
	background-size: 136px 160px;
	width: 136px;
	height: 160px;
}

/*-----------------------------------------------------------------------------

■┓オンライン禁煙プログラム
┗┛
-----------------------------------------------------------------------------*/
#main_style .step_wrap {
	margin-top: 0;
}
#main_style .step_box {
	width: 100%;
}
#main_style .step_box:last-child {
	padding: 24px 16px;
}
#main_style .step_contents > img {
	display: none;
}
#main_style dl.acd_method .acd_ttl {
	padding: 16px;
}
#main_style dl.acd_method .acd_ttl::after {
	content: none;
}

/*-----------------------------------------------------------------------------

■┓禁煙補助薬を購入
┗┛
-----------------------------------------------------------------------------*/
/* メインタイトルの画像を指定 */
#main_style .main_ill_goodslist {
	background-size: 200px 235px;
	margin: 0 !important;
	height: 212px;
}

/* 保有ポイント欄 */
#main_style .possession_point {
	flex-wrap: wrap;
	margin: 16px 0 32px;
}
#main_style .possession_point > div:first-child {
	padding: 8px 8px 4px 8px;
	width: 100%;
}
#main_style .possession_point > div:last-child {
	padding: 8px;
	width: 100%;
}

/* 商品一覧 */
#main_style .contents_box_item {
	padding: 8px;
}
#main_style .goods_item_box {
	padding: 12px 8px 8px;
	margin: 1.5%;
	width: 47%;
}
#main_style .manufacturer_name {
	margin: 0;
}
#main_style .type_name {
	font-size: 10px;
	font-size: 1.0rem;
}
#main_style .type_name span {
	font-size: 15px;
	font-size: 1.5rem;
}
#main_style .price_area {
	padding: 0;
}
#main_style .price_ctg {
	font-size: 8px;
	font-size: 0.8rem;
}
#main_style .price {
	font-size: 10px;
	font-size: 1.0rem;
	margin-top: -4px;
}
#main_style .price span {
	font-size: 15px;
	font-size: 1.5rem;
}
#main_style .oubo_btn a {
	padding: 8px;
}
#main_style .oubo_btn a::before {
	font-size: 16px;
	font-size: 1.6rem;
}

/* 商品説明ボタン */
#main_style a.btn_about_goods {
	font-size: 16px;
	font-size: 1.6rem;
	width: 256px;
}


/*-----------------------------------------------------------------------------

■┓禁煙補助申請フォーム
┗┛
-----------------------------------------------------------------------------*/
/* メインタイトルの画像を指定 */
#main_style .main_ill_application {
	background-size: 208px 170px;
	height: 170px;
}
#main_style .application_nav ul li.nav_step {
	border-width: 2px;
	font-size: 12px;
	font-size: 1.2rem;
	width: 64px;
	height: 64px;
}
#main_style .application_nav ul li.nav_step > span:first-child span {
	font-size: 14px;
	font-size: 1.4rem;
}
#main_style .application_nav ul li.nav_step > span:last-child {
	font-size: 16px;
	font-size: 1.6rem;
}
#main_style .application_nav ul li.nav_arrow img {
	width: 32px;
	height: 19px;
}
#main_style .wrap_application_area {
	margin-top: 24px;
}
#main_style .personal_date {
	margin: 24px 0;
	padding: 12px 8px;
}
#main_style .tbl_personal_date th {
	padding-bottom: 0;
}
#main_style .tbl_personal_date td {
	padding: 0 0 .5em 1em;
}


/*########################################################################################

サイト共通スタイルまとめ

########################################################################################*/
/*-----------------------------------------------------------------------------

■┓input
┗┛
-----------------------------------------------------------------------------*/
input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select {
	max-width: 100%;
}
/*-----------------------------------------------------------------------------

■┓submitボタン(.submit_area)
┗┛
-----------------------------------------------------------------------------*/
.submit_area {
	justify-content: center;
	margin-top: 64px;
}
.submit_area > .btn_submit {
	margin-top: 1em;
	margin-left: 0;
}
/* 戻る 閉じる*/
a.btn_back,
a.btn_close {
	min-width: 256px;
}

/*-------------

■┓テーブルスタイル
┗┛
-----------------------------------------------------------------------------*/
/*-------------------
SP表示では縦に並べて<tbody>で分割し表示させる
複数のidやclassを全て持った要素にだけスタイルを適用させたい場合の記述(複数指定箇所はドット(.)つなぎにして絞り込む)
--------------------------------------------------*/
#main_style table.sp_change_lengthway.sp_width_max {
	display: block;
}
#main_style table.sp_change_lengthway.sp_tbl_center {
	margin-right: auto;
	margin-left: auto;
}
#main_style table.sp_change_lengthway tbody,
#main_style table.sp_change_lengthway tbody tr,
#main_style table.sp_change_lengthway tbody tr th,
#main_style table.sp_change_lengthway tbody tr td {
	display: block;
	text-align: left;
}
#main_style table.sp_change_lengthway thead {
	display: none;
}
#main_style table.sp_change_lengthway tbody {
	margin-top: 10px;
}
#main_style table.sp_change_lengthway tbody th,
#main_style table.sp_change_lengthway tbody td {
	border-bottom: none;
}
#main_style table.sp_change_lengthway tbody tr:last-of-type td:last-of-type {
/*	border-bottom: 1px solid #ccc;*/
}