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

基本設定

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

body {
	min-width: initial;
	min-width: auto; /* IE用 */
}
img {
	max-width: 100%;
	height: auto;
}
a {
	word-break: break-all;
}
/*==================================================================================================

▼サイトの構造
#fixed_header_replace
#wrap_header
	┗#header
		┗h1
		┗#panel_menu
		┗.header_contents
			┗.contact_registration
			┗.user_name
#gnavi
#panel_contents（PAD、SP用）
	┗.gnavi_usr_name
	┗.close_btn
#wrap_main（セカンダリページ用）
#footer
	┗.footer_contents
		┗<nav>
		┗.copyright
.page_top
==================================================================================================*/
#wrap_header {
	border-bottom: 16px solid #1f1f47;
	padding: 20px 20px 12px 20px;
	width: 100%;
	height: auto;
	z-index: 200;
}
nav#gnavi {
	display: none;
}

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

ヘッダー
#wrap_header

########################################################################################*/
#header {
	align-items: flex-start;
	padding: 0;
	width: auto;
	height: auto;
}
#header .header_contents {
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-start;
}
#header h1 {
	margin-bottom: 10px;
}
#header h1 a {
	background-size: 200px 45px;
	width: 200px;
	height: 45px;
}
#header .kenpo_name {
	font-size: 16px;
	font-size: 1.6rem;
	line-height: 1.4;
	width: 100%;
}

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

■┓ハンバーガーメニュー部分
┗┛
-----------------------------------------------------------------------------*/
#panel_menu {
	display: block;
}
#panel_menu {
	z-index: 199;
}
#panel_menu_btn {
	border: 2px solid #fff;
	display: block;
	position: relative;
	width: 40px;
	height: 40px;
}
#panel_menu_icon {
	background: #fff;
	display: block;
	margin: -1px 0 0 -11px;
	position: absolute;
		top: 50%;
		left: 50%;
	transition: .2s;
	width: 22px;
	height: 2px;
}
#panel_menu_icon:before, #panel_menu_icon:after {
	background: #fff;
	content: "";
	display: block;
	position: absolute;
		top: 50%;
		left: 0;
	transition: .3s;
	width: 22px;
	height: 2px;
}
#panel_menu_icon:before {
	margin-top: -8px;
}
#panel_menu_icon:after {
	margin-top: 6px;
}
#panel_menu_btn {
	text-decoration: none;
}
#panel_menu_btn .close {
	background: transparent;
}
#panel_menu_btn .close:before, #panel_menu_btn .close:after {
	margin-top: -1px;
}
#panel_menu_btn .close:before {
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
}
#panel_menu_btn .close:after {
	transform: rotate(-135deg);
	-webkit-transform: rotate(-135deg);
}
/*----------------------------
ハンバーガーメニュー部分のユーザーネームの箇所
----------------------------------------------------------*/
#panel_contents .gnavi_usr_name {
	background: #f6f6f6;
	display: block;
	padding: 12px 20px;
}
#panel_contents .usr_name {
	background-size: 15px 17px;
	padding-left: 27px;
	font-size: 16px;
	font-size: 1.6rem;
}
/*----------------------------
ハンバーガーメニュー部分のグローバルナビゲーションの箇所
----------------------------------------------------------*/
ul.btn_menu {
	flex-direction: column;
	width: 100%;
}
ul.btn_menu li {
	margin: 0;
	padding: 0;
	width: 100%;
}
ul.btn_menu li a {
	background-color: #3482dd;
	background-position: 38px 50%;
	border-top: 1px solid rgba(255, 255, 255, .5);
	border-bottom: 1px solid rgba(0, 0, 0, .1);
	color: #fff;
	font-size: 16px;
	font-size: 1.6rem;
	height: auto;
	padding:  19px 56px 15px;
	position: relative;
}
ul.btn_menu li a::after {
	color: #fff;
	content: "\f054";
	display: block;
	font-family: FontAwesome;
	font-size: 17px;
	font-size: 1.7rem;
	line-height: 1;
	position: absolute;
		top: calc(50% - 8px);
		right: 16px;
}
ul.btn_menu li a.view {
	background-position: 15px 50%;
	padding-left: 47px;
}
ul.btn_menu li a.synchronize {
	background-position: 19px 50%;
	padding-left: 47px;
}
ul.btn_menu li a.release {
	background-position: 20px 50%;
	padding-left: 47px;
}
ul.btn_menu li a.viewpoint {
	background-position: 18px 50%;
	padding-left: 47px;
}
ul.btn_menu li a:hover {
	background-color: #99d52b;
}
/*----------------------------
ハンバーガーメニュー部分のクローズボタンの箇所
----------------------------------------------------------*/
#panel_contents .close_btn {
	background: #f6f6f6;
	display: block;
	padding: 2px 0 16px;
	text-align: center;
}
#panel_contents #panel_close_btn {
	background: #999;
	border-radius: 0 0 40px 40px;
	display: block;
	margin: 0 auto;
	position: relative;
	width: 80px;
	height: 40px;
}
#panel_contents #panel_close_btn:hover {
	text-decoration: none;
}
#panel_contents #panel_close_btn_icon {
	display: block;
	margin: -1px 0 0 -7px;
	position: absolute;
	top: 60%;
	left: 50%;
	width: 14px;
	height: 2px;
}
#panel_contents #panel_close_btn_icon:before, #panel_close_btn_icon:after {
	background: #fff;
	display: block;
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 14px;
	height: 2px;
}
#panel_contents #panel_close_btn_icon:before {
	margin-top: 0;
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
}
#panel_contents #panel_close_btn_icon:after {
	margin-top: 0;
	transform: rotate(-135deg);
	-webkit-transform: rotate(-135deg);
}
#panel_contents #panel_close_btn .menu_text { /* MENUテキスト */
	color: #fff;
	font-size: 10px;
	font-size: 1.0rem;
	text-align: center;
}


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

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

########################################################################################*/
#main_style .main_ttl .contents {
	padding: 16px;
}
#main_style .main_ttl .contents::after {
	clear:both;
	content:" ";
	display:block;
}
#main_style .main_ttl .contents .main_ill_pcpad {
	float: right;
	margin: 24px 0 8px 8px;
	position: relative;
}
#main_style .main_ttl h2 {
	font-size: 32px;
	font-size: 3.2rem;
}
#main_style .main_ttl h2 .main_ttl_en {
	font-size: 16px;
	font-size: 1.6rem;
}
#main_style .main_ttl .ttl_lead {
	font-size: 16px;
	font-size: 1.6rem;
}
.contents { /* 商品購入ページでも使用しているので「#main_style」は付けない */
	width: 100%;
	padding: 16px;
}
#main_style h3 {
	font-size: 28px;
	font-size: 2.8rem;
	margin-top: 80px;
}
#main_style h3 span {
	font-size: 18px;
	font-size: 1.8rem;
}


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

トップページ

########################################################################################*/
/* メインタイトル */
#main_style .index_ttl {
	border: 4px solid #fff;
	margin-top: 0;
	padding: 24px;
	position: relative;
}
#main_style .index_ttl img {
	margin-bottom: 24px;
	width: calc(100% - 304px);
}
/* メインタイトルの画像を指定 */
#main_style .main_ill_index {
	background-size: 240px 240px;
	margin-top: 8px !important;
	width: 240px;
	height: 240px;
}
#main_style a.to_step {
	bottom: -80px;
}

/* STEP01 */
#main_style .diacrisis_step01 {
	background-position: right 20% top 0;
	background-size: 260px 212px;
	margin-top: 80px;
	padding: 68px 0 0 64px;
}
#main_style .mark_step01 {
	top: 0;
}
#main_style a.btn_diagnosis > div:first-child {
	font-size: 22px;
	font-size: 2.2rem;
}

/* STEP02 */
#main_style .diacrisis_step02 {
	margin-top: 24px;
	padding: 68px 0 0 64px;
}
#main_style .diacrisis_step02::after {
	bottom: calc(100% - 80px);
	width: 220px;
	height: 160px;
}
#main_style a.btn_method > div:first-child {
	font-size: 22px;
	font-size: 2.2rem;
}

/* STEP03 */
/*
#main_style .ab_line1 {
	flex-wrap: wrap;
	justify-content: flex-start;
	margin-top: 0;
}
#main_style .ab_line1 > div:nth-child(2) {
	font-size: 22px;
	font-size: 2.2rem;
	white-space: nowrap;
}
#main_style .ab_line1 > img {
	margin-top: -56px;
	width: calc(100% - 176px);
	max-width: 170px;
	height: auto;
}
#main_style .ab_line1 > div:last-child {
	margin: 16px 0 24px;
	padding: 8px 16px;
	text-align: center;
	width: 100%;
}
#main_style .ab_line2 {
	margin-top: 0;
}
*/
#main_style .ab_line3 {
	flex-direction: column;
}
#main_style .ab_line3 > div:first-child {
	margin-top: 16px;
}
#main_style a.btn_application {
	margin: 24px auto 0;
	width: 280px;
}
#main_style span.btn_application.btn_end {
	margin: .5em auto 0;
}

/* オンライン禁煙プログラム */
#main_style .online_area {
	background-position: left 50% bottom 0, left 50% top 16px;
	background-size: 220px 300px, 221px 100px;
	padding-top: 124px;
}
#main_style .online_merit {
	margin: 0 auto;
	padding: 10px 0 160px;
	position: static;
	width: 80%;
	max-width: 320px;
}
#main_style .online_merit li {
	width: auto;
}
#main_style a.btn_more {
	margin-top: 24px;
}
#main_style .round_cmt_declaration {
	display: none;
}

/* 「禁煙の方法」「禁煙コラム」へのリンク */
#main_style .link_method_column a {
	font-size: 13px;
	font-size: 1.3rem;
	padding: 16px;
	width: 49%;
}
#main_style .link_method_column a div > div:first-child span {
	font-size: 22px;
	font-size: 2.2rem;
}
#main_style .link_method_column a div > div:nth-child(2) {
	margin-top: 16px;
}
#main_style .link_method_column a div > div:last-child {
	font-size: 14px;
	font-size: 1.4rem;
}
#main_style .btn_link_method img {
	margin-right: -8px;
	width: 111px;
	height: 122px;
}
#main_style .btn_link_column img {
	margin-right: 8px;
	width: 81px;
	height: 136px;
}

/* 自己診断ポップアップ  商品購入ページでも使用しているので「#main_style」は付けない */
.diagnosis_header {
	background-position: left 16px top 12px;
	background-size: 144px 32px;
	padding: 16px;
}
.diagnosis_contents {
	margin: 0 40px 16px;
	padding: 24px;
	min-height: calc(100% - 110px);
}
.diagnosis_ttl {
	margin-bottom: 24px;
}
.diagnosis_ttl > div {
	font-size: 28px;
	font-size: 2.8rem;
}
.diagnosis_ttl > div::after {
	margin: 16px auto 12px;
	width: 56px;
	height: 3px;
}
/* 自己診断スタート */
.diagnosis_start {
	background-position: top 0 left 32px;
}
.diagnosis_start_fukidasi {
	border-radius: 40px;
	font-weight: bold;
	margin-left: 168px;
	padding: 24px;
}
a.btn_diagnosis_single {
	font-size: 32px;
	font-size: 3.2rem;
	margin-top: 48px;
	margin-bottom: 32px;
	width: 280px;
	height: 80px;
}
/* 自己診断質問 */
.diagnosis_question {
	background-position: top 0 left 0;
	font-size: 24px;
	font-size: 2.4rem;
	padding-left: 120px;
}
/* 「YES」「NO」 */
.wrap_diagnosis_btn {
	flex-wrap: wrap;
	justify-content: center;
	margin-top: 24px;
	width: auto;
	max-width: 100%
}
a.btn_diagnosis_yes,
a.btn_diagnosis_no {
	font-size: 32px;
	font-size: 3.2rem;
	margin: 8px 16px;
	width: 240px;
	height: 80px;
}
a:hover.btn_diagnosis_yes {
	background: #f1f50d;
	color: #3482dd;
	text-decoration: none;
}
a:hover.btn_diagnosis_no {
	background: #99d52b;
	text-decoration: none;
}

/* 自己診断結果 */
.diagnosis_result {
	max-width: 100%;
	height: 172px;
}
.diagnosis_result > div:first-child {
	font-size: 32px;
	font-size: 3.2rem;
}
.diagnosis_result > div:last-child {
	font-size: 18px;
	font-size: 1.8rem;
}
/* 自力で禁煙 */
.diagnosis_result.resutl_self {
	margin-bottom: 120px;
}
.diagnosis_result.resutl_self::after {
	left: calc(50% - 182px);
	width: 353px;
	height: 94px;
}
/* 薬で禁煙 */
.diagnosis_result.resutl_drug {
	margin: 8px auto 32px;
	max-width: calc(100% - 56px);
}
.diagnosis_result.resutl_drug::before {
	left: -56px;
	width: 56px;
	height: 158px;
}
.diagnosis_result.resutl_drug::after {
	left: calc(100% - 5px);
	width: 69px;
	height: 144px;
}
/* 禁煙外来で禁煙 */
.diagnosis_result.resutl_gairai::after {
	top: calc(100% - 8px);
	left: calc(50% - 81px);
	width: 162px;
	height: 130px;
}


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

セカンダリページ

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

■┓みんなで禁煙プロジェクトとは？
┗┛
-----------------------------------------------------------------------------*/
/* メインタイトルの画像を指定 */
#main_style .main_ill_about {
	background-size: 240px 158px;
	width: 240px;
	height: 158px;
}
#main_style .about {
	padding: 24px;
	width: 100%;
}


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

■┓禁煙の方法
┗┛
-----------------------------------------------------------------------------*/
/* メインタイトルの画像を指定 */
#main_style .main_ill_method {
	background-size: 238px 200px;
	bottom: 0 !important;
	margin: 0 0 0 24px !important;
	width: 238px;
	height: 200px;
}

/* アンカーリンク */
#main_style .wrap_anc_link {
	justify-content: space-between;
}
#main_style a.btn_anc_method {
	align-self: stretch;
	font-size: 14px;
	font-size: 1.4rem;
	margin: 0 8px;
	padding: 16px 4px 40px;
	width: 220px;
	height: auto;
}
#main_style a.btn_anc_method span {
	font-size: 24px;
	font-size: 2.4rem;
}

/* ポイントボックス */
#main_style .point_box {
	margin-bottom: 64px;
	padding: 24px;
}
#main_style .point_contents > img {
	margin-right: 24px;
	width: 100px;
	height: 100px;
}
#main_style .method_cmt_1 {
	padding-right: 160px;
	width: 100%;
	min-height: 120px;
}
#main_style .method_cmt_1::after {
	background-size: 121px 154px;
	right: 24px;
	width: 121px;
	height: 154px;
}
#main_style .method_cmt_2,
#main_style .method_cmt_3 {
	align-items: flex-start;
}
#main_style .method_cmt_2 {
	background-image: url(../images/fukidashi_gum.svg), url(../images/method_gum_man.svg);
	background-position: right 8px bottom 0, right 16px bottom 64px;
	background-size:  217px 120px, 79px 120px;
	padding-right: 240px;
	min-height: auto;
}
#main_style .method_cmt_3 {
	background-image: url(../images/fukidashi_patch.svg), url(../images/method_patch_woman.svg);
	background-position: right 8px bottom 0, right 16px bottom 64px;
	background-size:  217px 125px, 134px 127px;
	padding-right: 224px;
	min-height: auto;
}
#main_style .method_cmt_2 img,
#main_style .method_cmt_3 img {
	flex-shrink: .2;
}

/* スケジュール */
#main_style .wrap_method3_schedule {
	align-items: flex-start;
}
#main_style .wrap_method3_schedule > img {
	margin: 0 24px 0 0;
}
#main_style .method3_schedule {
	flex-direction: column;
	align-items: center;
	margin: 16px 0 0 0;
	width: 100%;
}
#main_style .method3_schedule > div {
	flex-direction: row;
	margin: 0 0 32px 0;
	padding: 16px 16px 16px 40px;
	width: 100%;
	height: auto;
}
#main_style .method3_schedule > div .behavior {
	width: 50%
}
#main_style .method3_schedule > div .period {
	margin-top: 0;
	width: 50%
}
#main_style .method3_schedule .first_msg .behavior,
#main_style .method3_schedule .first_msg .period {
	width: auto;
}
#main_style .method3_schedule .first_msg .behavior {
	text-align: right;
}
#main_style .method3_schedule .first_msg .period {
	text-align: left;
}
#main_style .method3_schedule > div .consultation { /* 受診回数 */
	top: -44px;
	left: -16px;
}
#main_style .method3_schedule > div .consultation.start {
	left: -16px;
}
#main_style .method3_schedule > div .consultation.finish {
	top: calc(100% + -22px);
	left: -16px;
}
#main_style .method3_schedule > div:nth-child(2)::before,
#main_style .method3_schedule > div:nth-child(3)::before,
#main_style .method3_schedule > div:nth-child(4)::before {
	border-width: 20px 10px 0 10px;
	border-color: #fff transparent transparent transparent;
	top: calc(100% + 5px);
	left: calc(50% - 8px);
}
#main_style .method3_schedule > div:nth-child(2)::after,
#main_style .method3_schedule > div:nth-child(3)::after,
#main_style .method3_schedule > div:nth-child(4)::after {
	border-width: 14px 7px 0 7px;
	border-style: solid;
	border-color:  #f40009 transparent transparent transparent;
	top: calc(100% + 7px);
	left: calc(50% - 5px);
}
#main_style .wrap_method3_schedule.schedule_drug {
	margin-top: 48px;
}
#main_style .wrap_method3_schedule.schedule_drug .method3_schedule > div {
	padding: 16px;
}
#main_style .wrap_method3_schedule.schedule_drug .method3_schedule > div .period {
	width: 100%;
}
#main_style .wrap_method3_schedule.schedule_drug .method3_schedule > div.first_msg .period {
	width: auto;
}
#main_style .fukidashi_gailai {
	position: absolute;
	top: calc(50% - 37px);
	left: calc(50% - 35px);
}

/* 金額 */
#main_style .tbl_method3_price {
	width: auto;
}

/* 保険診療の条件 */
#main_style .wrap_conditions {
	width: 100%;
}
#main_style .conditions::after {
	bottom: -20px;
}
/*-----------------------------------------------------------------------------

■┓禁煙コラム
┗┛
-----------------------------------------------------------------------------*/
/* メインタイトルの画像を指定 */
#main_style .main_ill_column {
	background-size: 240px 226px;
	width: 240px;
	height: 226px;
}
#main_style .round_cmt_column_ttl {
	display: none;
}
#main_style .round_cmt_column {
	display: none;
}
#main_style .h3_first_column {
	margin-top: 32px;
}
/* 成分表 */
#main_style .component {
	padding: 24px;
	width: 100%;
}
#main_style .tbl_component thead tr td .blue_ttl {
	font-size: 16px;
	font-size: 1.6rem;
}
#main_style .tbl_component tbody tr td:first-child {
	padding-right: 1em;
}
#main_style .tbl_component tbody tr td:nth-child(2)::before {
	content: "……";
}
#main_style .tbl_component tbody tr td:last-child {
	padding-left: 1em;
}
#main_style .component_fukidashi img {
	width: 249px;
	height: 69px;
}
#main_style .component_char {
	background-size: 182px 214px;
	bottom: -20px;
	right: -20px;
	width: 182px;
	height: 214px;
}

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

■┓オンライン禁煙プログラム
┗┛
-----------------------------------------------------------------------------*/
/* メインタイトルの画像を指定 */
#main_style .main_ill_online {
	background-size: 256px 185px;
	width: 256px;
	height: 185px;
}
#main_style .step_box {
	width: calc(100% / 2 - 8px);
}
#main_style .step_contents > div:first-child {
	flex-basis: 100%;
}
#main_style .step_contents > img {
	margin: 8px 0;
	width: 120px;
	height: 120px;
}
#main_style .online_contact .online_contact_ttl {
	margin: 0 0 4px;
	width: 100%;
}
/*-----------------------------------------------------------------------------

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

/* 保有ポイント欄 */
#main_style .possession_point {
	margin: 16px auto 40px;
	width: 100%;
}
#main_style .possession_point > div:last-child {
	flex-direction: column;
	align-items: center;
	padding: 16px;
}
#main_style .point_value {
	margin: 0 0 16px 0;
}

/* 商品一覧 */
#main_style .contents_box_item {
	padding: 16px;
}
#main_style .product_name {
	font-size: 14px;
	font-size: 1.4rem;
}
/*
#main_style .item_type {
	flex-wrap: wrap;
}
*/
#main_style .type_name {
	border: 0;
	margin: 0 0 8px 0;
	padding: 0 8px;
	width: 100%;
}
#main_style .type_name span {
	font-size: 16px;
	font-size: 1.6rem;
}
#main_style .price_area {
	width: 100%;
	max-width: 100%;
}
#main_style .price_ctg {
	font-size: 10px;
	font-size: 1.0rem;
	text-align: center;
}
#main_style .price {
	font-size: 13px;
	font-size: 1.3rem;
	text-align: center;
}
#main_style .price span {
	font-size: 16px;
	font-size: 1.6rem;
}
#main_style .oubo_btn {
	text-align: center;
}
#main_style .oubo_btn a {
	font-size: 13px;
	font-size: 1.3rem;
}
#main_style .oubo_btn a::before {
	font-size: 18px;
	font-size: 1.8rem;
}

/* 第１類医薬品の申込方法 */
#main_style h1.add_link_text {
	padding-bottom: 48px;
}
#main_style a.link_howto_ichirui {
	bottom: 12px;
	right: auto;
	left: 13px;
}


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

■┓禁煙補助申請フォーム
┗┛
-----------------------------------------------------------------------------*/
/* メインタイトルの画像を指定 */
#main_style .main_ill_application {
	background-size: 245px 200px;
	background-position: right 0 bottom 0;
	width: 245px;
	height: 200px;
}
#main_style .wrap_application_area .zipcode_cmt {
	display: none;
}


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

フッター
#footer

########################################################################################*/
.footer_contents {
	font-size: 10px;
	font-size: 1.0rem;
	padding: 12px 0 32px;
	width: 100%;
}


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

■┓ページ遷移で使用のボタン
┗┛「a.btn_submit」「a.btn_back」
		「input.btn_submit」「input.btn_back」
		（サービスページ以降でも使用）
-----------------------------------------------------------------------------*/
/*
.submit_area .btn_submit {
	margin-right: auto;
}
*/