@charset "shift_jis";

/* -----------------------------------------------------------
 共通タグ
----------------------------------------------------------- */
*{ margin:0; padding:0;}
a{outline: none;}
a:focus{outline:none;}
a {text-decoration: none;}
/*html{ background-color:#4E4A41;}*/
img{
	vertical-align:bottom;
	border: none;
	}
#lp_wrapper {
	width:100%;
	font-size:12px;
-webkit-text-size-adjust: 100%;
  /* font-family: "Hiragino Sans","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック",sans-serif; */
	font-family: "Noto Sans JP","Hiragino Sans","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック",sans-serif;
}


p, dl, dt, dd, ul li{
	margin: 0px;
	padding: 0px; 
}
h4, h5{
	margin: 0px 0px 0px 0px;
	padding: 0px; 
}
li{ list-style-type: none;}

.top_btn{ float:right;}

.w1000px{
	width: 1000px;
	margin: auto;
	/* position: relative; */
}


/* -----------------------------------------------------------
 ClearFix
----------------------------------------------------------- */
#lp_wrapper div:after,
#lp_wrapper ul:after,
#lp_wrapper ol:after,
#lp_wrapper dl:after,
#lp_wrapper .clearfix:after{
display:none;
}


/* for IE7 only */
*:first-child+html div,
*:first-child+html ul,
*:first-child+html ol,
*:first-child+html dl,
*:first-child+html .clearfix{
height:1%;
}

/* for IE6 and below */
/*\*/
* html .clearfix{
height:1%;
}
/* ClearFix End */



/*新規CSS/////////////////////////////////////////////////////  */



/* ▼ MAなどでスムーススクロールをアクティブにすると商品一覧のスクロール時間かかりすぎ注意*/
html { scroll-behavior: smooth;}

#page {
	overflow: hidden;
}
#pro_wrapper {
	width: 100%;
}
body #lp_wrapper a:hover {
	text-decoration: none;
}

.wf-loading {
  opacity: 0; /* Adobe Fontsが表示されるときのカクつき解消 */
}

.mv_page {
  color: #3e3830;
	font-size: 16px;
	line-height: 1.8em;
}

.sp_only { display: none;}
.pc_only { display: inline-block;}

.section {
  margin-bottom: 40px;
}

.w1000px {
	max-width: 1000px;
	margin: 0 auto;
  text-align: center;
  width: 100%;
}
.center {
	text-align: center;
	width: 100%;
}
.one_phrase {
	display: inline-block;
}

h1 {
	margin: 0;
}

.mv_body {
  margin: 0 0 40PX;
}
				.switch_sp_tab .mv_body {
					margin: 0 0 40PX;
				}
.mv_body.mv_body_scroll {
  margin: 110px 0 40PX;
}
/* スマホ時 */
.switch_sp_tab .mv_body.mv_body_scroll {
  margin: 300px 0 40PX;
}


.mv_inner.w_full.mv_title {
  margin: 0 calc(50% - 50vw);
  width: 100vw;
	background-image: url(../../../../include_html/pharmacy/site/images/UXTEAM-2713/UXTEAM-2713_lp_mv_bgimg.png);
    background-size:  cover;
		background-position: center;
}


/* 下帯非表示 */
/* .pointcp-header {
  display: none;
} */

/* 各セクションをスクロールすると下からふわっとさせるためのコード */
.inview {
  transform: translateY(30px);
  opacity: 0;
  transition: transform 1.2s, opacity 2s;
}
.inview.show {
  transform: translateY(0);
  opacity: 1;
}

				/* スマホ時には解除 */
				.switch_sp_tab .inview {
					animation: none;
					transform: none;
					transition: unset;
					opacity: 1;

				}
				.switch_sp_tab .inview.show {
					animation: none;
					transform: none;
					transition: unset;
					opacity: 1;
				}

.mv_img {
  max-width: 1000px;
	width: 100%;
}

/* MVのテキスト部分だけフェードイン*/
/* 下から */
.fadeUp {
	animation-name:fadeUpAnime;
	animation-duration:1.5s;
	animation-fill-mode:forwards;
	opacity:0;
	}
	
	@keyframes fadeUpAnime{
		from {
			opacity: 0;
		transform: translateY(100px);
		}
	
		to {
			opacity: 1;
		transform: translateY(0);
		}
	}
/* 左から */
.fadeLeft {
	animation-name:fadeLeftAnime;
	animation-duration:0.5s;
	animation-fill-mode:forwards;
	opacity:0;
	}
	
	@keyframes fadeLeftAnime{
		from {
			opacity: 0;
		transform: translateX(-100px);
		}
	
		to {
			opacity: 1;
		transform: translateX(0);
		}
	}


					/* デバイスで切り替え  ---------------------------------------- */
					.switch_sp_tab .fadeUp {
						animation: none;
						transform: none;
						transition: unset;
						opacity: 1;
					}
					.switch_sp_tab .mv_img {
						padding: 0;
						margin: 0 calc(50% - 50vw);
						width: 100vw;
					}





/* ナビ ----------------------------------------------*/
.navi_body {
  height: 110px;/*Headerの高さ設定*/
  /* width:1000px; */
  text-align: center;
  padding: 10px 0;
		box-sizing: border-box;
		z-index: 1000;
		margin: 0 calc(50% - 50vw);
		width: 100vw;
		background: rgba( 255, 255, 255, 0.85 );
		backdrop-filter: blur(3px);
}

/*MV下帯の高さ*/
/* #global-nav.m_fixed {
	position: fixed;
	top:56px;
	left: 0;
} */
/*非ログイン状態で帯が出てないとき*/
/* #global-nav.m_fixed_non_login {
	position: fixed;
	top:0;
	left: 0;
} */


/* 共通ナビ ここから ----------------------------------------------*/
#global-nav.m_fixed {
	position: fixed;/*header固定*/
	top:0;
	/* top:56px; */
	/*MV下帯の高さ*/
	left: 0;
}
#global-nav.m_fixed_non_login { /*非ログイン状態で追従帯が出てないとき*/
	position: fixed;/*header固定*/
	top:0; /*MV下帯がない時の高さ*/
	left: 0;
}

/* デネブ用 フローティング */
#global-nav.m_fixed_deneb {
	position: fixed;/*header固定*/
	top:60px; /*MV下帯の高さ*/
	left: 0;
}



/* 薬局用追加要素 -------------------------------- */
.upper_nav_section {
	max-width: 1000px;
	width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
	padding-top: 10px;
}
			/* デネブ対応 */
			.switch_sp_tab .upper_nav_section {
				display: block;
				height: 83px;
			}
			.switch_sp_tab .upper_nav_section .navi_list_logo .logo_img {
				width: 180px;
				margin: 0 auto;
			}
			.switch_sp_tab .upper_nav_section {
				padding-top: 3px;
			}

.navi_inner {
	max-width: 1000px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 100px;
	margin: 0 auto;
}
#lp_wrapper div.navi_inner::after {
	display: none;
}
ul.nav_btn {
	/* width: 1000px; */
	list-style: none;
    display: flex;
    justify-content: center;
		align-items: center;
			height: 50px;
}
ul.nav_btn li {
	color: #1d2088;
	display: grid;
  place-content: center;
	margin-right: 24px;
	line-height: 16px;
}
ul.nav_btn.anchor_link li:last-of-type {
	margin-right: 0;
}


.sns_list .sns_img {
	margin-right: 3px;
}
.sns_list .sns_img.sns_img_end {
	margin-right: 0;
}
				.switch_sp_tab .sns_list {
					/* display: none; */
				}
				.switch_sp_tab .sns_list .sns_img {
					width: 20px;
				}
				.switch_sp_tab ul.navi_list li {
					margin-right: 10px;
				}



ul.nav_btn li.navi_link {
	height: 34px;
	border-radius: 20px;
	color: #fff;
	/* font-size: 15px; */
	padding: 0 20px;
}
				.switch_sp_tab ul.nav_btn li.navi_link {
					height: 28px;
					/* font-size: 13px; */
					padding: 0 12px;
				}
				.switch_sp_tab ul.nav_btn li {
					line-height: 13px;
				}

ul.nav_btn li.navi_link a:hover {
	opacity: 0.7;
}
ul.nav_btn li.prescription_link {
	background: #1d2088;
	margin-right: 10px;
}
ul.nav_btn li.contact_link {
	background: #fc9216;
	margin-right: 0;
}
ul.nav_btn li a,
ul.nav_btn li a:visited {
	color: #1d2088;
	font-weight: bold;
}
ul.nav_btn li.navi_link a,
ul.nav_btn li.navi_link a:visited {
	color: #fff !important;
}
ul.nav_btn img.logo_img {
	margin-top: 20px;
}
.anchor_link li a:hover {
	opacity: 0.8;
}

/* ナビのボタン横のテキスト */
.speechBubble {
	position: relative;
	display: inline-block;
	text-align: center;
	padding: 8px 9px 8px 12px;
	background-color: #34a5c2;
	border-radius: 0;
		font-size: 15px;
		color:#fff;
		font-weight: 700;
		line-height: 1;
		font-feature-settings: "palt";
}
				.switch_sp_tab .speechBubble {
					padding: 7px 10px 7px 8px;
					font-size: 12px;
				}
#lp_wrapper .speechBubble:before {
	content: '';
	position: absolute;
	display: block;
	z-index: 1;
	border-style: solid;
	border-color: transparent #34a5c2;
	border-width: 13px 0 13px 25px;
	top: 50%;
	right: -13px;
	margin-top: -13px;
	z-index: -1;
}
					.switch_sp_tab .navi_body .speechBubble {
						padding: 16px 18px 16px 22px;
						font-size: 29px;
					}
.speechBubble .basic_version { display: block;}
.speechBubble .short_version { display: none;}
				.switch_sp_tab .speechBubble .basic_version { display: none;}
				.switch_sp_tab .speechBubble .short_version { display: block;}

#lp_wrapper div.speechBubble:after {
	display:none;
}
/* バウンド */
/* .bounce_box {
  animation: bounce 2s infinite;
}
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
} */

/* バウンド アニメーションの再生時間を5秒に変更*/
.bounce_box {
  animation: bounce 5s infinite; 
}
@keyframes bounce {
  0%, 8%, 20%, 32%, 40% {
    transform: translateY(0);
  }
  16% {
    transform: translateY(-10px);
  }
  24% {
    transform: translateY(-5px);
  }
  /* 40%以降は静止した状態（transform: translateY(0);）を維持 */
  40.001%, 100% {
    transform: translateY(0);
  }
}



/* ずっとふわふわ */
/* .bounce_box {
  animation: floating-y 1.8s ease-in-out infinite alternate-reverse;
}
@keyframes floating-y {
  0% {
    transform: translateY(-10%);
  }
  100% {
    transform: translateY(10%);
  }
} */



					/* ナビのスマホ切り替え */
					.switch_sp_tab .navi_body {
						height: 300px;
					}
					.switch_sp_tab .navi_body .navi_inner {
						display: block;
						/* height: auto; */
						height: 80px;
					}
				.switch_sp_tab .navi_body ul.navi_list {
					justify-content: center;
					/* height: auto; */
					height: 80px;
					font-size: 26px;
				}
.switch_sp_tab .navi_body ul.navi_list li {
	line-height: 32px;
}
.switch_sp_tab .navi_body ul.navi_list li.navi_link {
	font-size: 32px;
	padding: 30px 28px;
	border-radius: 60px;
}
.switch_sp_tab .navi_body ul.navi_list li.navi_link a {
	height: 80px;
    display: flex;
    align-items: center;
}
.switch_sp_tab .navi_body ul.navi_list li.prescription_link {
	margin-right: 30px;
}
.switch_sp_tab .navi_body ul.navi_list.navi_list_logo {
	height: 120px;
}
.switch_sp_tab .navi_body ul.navi_list.navi_list_logo .logo_img {
	width: 450px;
}


/* アンカーの位置調整 */
#id_feature,
#id_service_flow {
	margin-top: -200px;
	padding-top: 200px;
}
#id_price,
#id_application,
#id_news,
#id_voc {
	margin-top: -150px;
	padding-top: 150px;
}


/* アンカーの位置調整 スマホ時 */
.switch_sp_tab #id_feature,
.switch_sp_tab #id_service_flow,
.switch_sp_tab #id_voc {
	margin-top: -180px;
	padding-top: 180px;
}
.switch_sp_tab #id_price,
.switch_sp_tab #id_application,
.switch_sp_tab #id_news {
	margin-top: -180px;
	padding-top: 180px;
}



/* MV下の境界線 SVG 固定 ここから ----------------------------------------*/
.mv_title {
	overflow:hidden;
	position:relative;
	}
#lp_wrapper .mv_title::before { 
	content:'';
	font-family:'shape divider from ShapeDividers.com';
	position: absolute;
	z-index: 1;
	pointer-events: none;
	background-repeat: no-repeat;
	bottom: -0.1vw;
	left: -0.1vw;
	right: -0.1vw;
	top: -0.1vw; 
	background-size: 119% 102px;
	background-position: 50% 100%; 
	transform: rotateY(180deg); background-image: url('data:image/svg+xml;charset=utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35.28 2.17" preserveAspectRatio="none"><path d="M35.28 1.16c-3.17-.8-7.3.4-10.04.56-2.76.17-9.25-1.47-12.68-1.3-3.42.16-4.64.84-7.04.86C3.12 1.31 0 .4 0 .4v1.77h35.28z" fill="%23ffffff"/></svg>'); 
	}

	@media (min-width:2100px) {
				#lp_wrapper .mv_title::before {
				background-size: 180% 82px;
				}
	}

#lp_wrapper .mv_title.switch_sp::before {
	background-size: 180% 82px;
}
/* MV下の境界線 SVG 固定 ここまで ----------------------------------------*/





/* 見出し */
.section h3 {
  position: relative;
  display: inline-block;
  margin-bottom: 130px;
	color: #1d2088;
	font-size: 42px;
	font-weight: 700;
	font-feature-settings: "palt";
	letter-spacing: 0.04em;
	line-height: 1.3;
}
#lp_wrapper .section h3:before {
  content: '';
  position: absolute;
  bottom: -35px;
  display: inline-block;
  width: 50px;
  height: 7px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  background-color: #1d2088;
  /* border-radius: 2px; */
}


.section .section_inner h4 {
	font-size: 36px;
	color: #3e3830;
	font-weight: 900;
	margin-bottom: 40px;
	line-height: 1.5;
}


.section.w_full,
.section.w_full_light_blue,
.section.w_full_light_yellow {
  margin: 0 calc(50% - 50vw);
  width: 100vw;
}
.section.w_full_light_blue {
	background: #f5f9fe;
}
.section.w_full_light_yellow {
	background: #fefcf2;
}
/* .section.w_full {
	background: #e8fefd;
} */

.price_box {
	margin-bottom: 70px;
}
.price_box img {
	max-width: 1000px;
	width: 100%;
}

h2.main_heading {
	font-size: 42px;
	font-weight: 400;
	color: #033d6d;
	font-feature-settings: "palt";
	letter-spacing: 3;
	margin: 120px 0 80px;
}

.section {
	margin: -100px 0 100px;
	padding-top: 100px;
}
.section.sns_section {
	margin: -140px 0 60px;
	padding: 40px 40px 0;
}
.section_inner {
	max-width: 1000px;
	margin: 0 auto;
	padding: 40px 0 80px;
}
.w_full .section_inner {
	padding: 40px 20px 80px;
}
.section.w_full_light_blue,
.section.w_full_light_yellow {
	padding-top: 60px;
	margin-bottom: 100px;
}
.section.w_full_light_yellow.continuous_section {
	margin-bottom: 0;
}



#id_application .section.w_full_light_blue {
	margin-bottom: 0;
}

.under_text {
	font-size: 16px;
	margin-top: 50px;
}

.section_inner h3 p span.small_text {
	font-size: 14px;
}



/* シグニペット薬局の特徴 */
#lp_wrapper .feature_inner.feature_flex::after {
	display: none;
}
.feature_flex {
	display: flex;
	justify-content: space-between;
}
.feature_child img {
	margin-bottom: 20px;
	max-width: 100%;
}
.feature_child p {
	font-size: 20px;
	font-weight: bold;
}
.feature_child p span {
	font-size: 14px;
	font-weight: normal;
	line-height: 1.5;
}
.section.switch .pc_text {
	display: block;
}
.section.switch .sp_text {
	display: none;
}




/* flex3分割 */
.application_flex,
.service_flow_flex {
	display: flex;
	justify-content: space-between;
	max-width: 880px;
	margin: 0 auto;
}
#lp_wrapper .application_flex::after,
#lp_wrapper .service_flow_flex::after {
	display: none;
}
.application_child img,
.service_flow_child img {
	margin-bottom: 20px;
}
.application_child p,
.service_flow_child p {
	font-size: 15px;
	font-weight: bold;
}
.application_title,
.service_flow_title {
	display: flex;
	justify-content: start;
	align-items: center;
}

.application_title div:first-of-type,
.service_flow_title div:first-of-type  {
	padding-right: 10px;
}
.application_title p,
.service_flow_title p {
	font-size: 23px;
	font-weight: bold;
}
.service_flow_title p {
	color: #f8b408;
}
.application_title p {
	color: #00b3d4;
}
.application_detail,
.service_flow_detail {
	font-weight: 500;
	padding-left: 30px;
}
.application_detail a,
.application_detail a:valid,
.service_flow_detail a,
.service_flow_detail a:valid {
	color: #00b3d4;
	padding-right: 2px;
}
.application_detail a:hover,
.service_flow_detail a:hover {
	opacity: 0.7;
}
.service_flow_child_sp,
.application_child_sp {
	display: none;
}




/* 料金について  pc */
.price_img_pc { display: block;}
.price_img_sp { display: none;}

.price_img_pc {
	max-width: 100%;
}




/* 利用申込書をダウンロードする */
body .download_btn_body {
	margin: 70px 0 50px;
}
body .download_btn a {
	background: #FFF;
	border-radius: 50px;
	border: 2px solid #00b3d4;
	position: relative;
	display: flex;
	justify-content: space-around;
	align-items: center;
	margin: 0 auto;
	max-width: 300px;
	padding: 10px 25px 10px 10px;
	color: #00b3d4;
	transition: 0.3s ease-in-out;
	font-weight: bold;
}
body #lp_wrapper .download_btn a:after {
	position: absolute;
	top: 50%;
	right: 20px;
	border-radius: 1px;
	transition: 0.2s ease-in-out;
	content: "\f1c1";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	transform: translateY(-50%);
}
body .download_btn a,
body .email_inner a,
body .download_btn a:visited,
body .email_inner a:visited, 
body .download_btn a:hover,
body .email_inner a:hover {
	color: #00b3d4;
}
.download_btn a:hover {
	background: #FFF;
	color: #00b3d4;
	opacity: 0.7;
}



/* 処方箋ボタン */
.btn_set_body,
.btn_single_body {
	margin: 80px 0;
}
.btn_set_inner, .btn_single_inner {
	display: inline-block;
	/* justify-content: center; */
}
.btn_set_inner div:first-of-type {
	/* margin-right: 60px; */
}
body .prescription_btn a {
	background: #1d2088;
	border-radius: 50px;
	position: relative;
	display: flex;
	justify-content: space-around;
	align-items: center;
	margin: 0 auto;
	max-width: 590px;
	padding: 20px 45px 20px 90px;
	color: #fff;
	transition: 0.3s ease-in-out;
	font-weight: 500;
	font-size: 22px;
	letter-spacing: 0.03em;
}
#lp_wrapper .prescription_btn a:after {
	position: absolute;
	/* top: 50%; */
	left: 40px;
	/* border-radius: 1px; */
	transition: 0.2s ease-in-out;
	content: '';
	display: inline-block;
	background-image: url(../../../../include_html/pharmacy/site/images/UXTEAM-2713/btn_pad.png);
	background-repeat: no-repeat;
	/* transform: translateY(-50%); */
	background-size: contain;
  vertical-align: middle;
	width: 35%;
	height: 35%;
}
body .btn_set_body .prescription_btn a:visited {
	color: #fff;
}
.prescription_btn a:hover {
	background: #1d2088;
	color: #fff;
	opacity: 0.7;
}
.btn_lower_text {
	margin-top: 30px;
	font-size: 18px;
	font-weight: 700;
	padding-left: 10px;
}
			.switch_sp_tab .btn_lower_text {
				/* font-size: 32px; */
			}
.btn_lower_text a {
	color: #1a0dab;
}
.btn_lower_text a:visited {
	color: #1a0dab;
}
.btn_lower_text a:hover {
	opacity: 0.7;
}

/* 処方箋ボタンの単体 */
body .btn_single_inner .prescription_btn a {
	max-width: 300px;
}





/* メールアドレス */
.email_body {
	border: 2px solid #00b3d4;
	padding: 15px 25px 12px 25px;
	display: inline-block;
	background: #fff;
	box-sizing: border-box;
}
.email_inner {
	display: flex;
	justify-content: center;
	color: #00b3d4;
	font-weight: bold;
}
.email_inner div:first-of-type {
	font-size: 17px;
	margin-right: 20px;
}
.email_inner div:last-of-type {
	font-size: 24px;
}
.email_inner a {
	margin-left: 15px;
}
body .email_inner a:link, 
body .email_inner a:link:visited {
	color: #00b3d4;
}



/* お知らせ */
#id_news .section_inner {
	padding: 40px 0 150px;
	box-sizing: border-box;
}
				.switch_sp_tab #id_news .section_inner {
					padding: 40px 20px 150px;
				}
.news{
	text-align: center;
	font-weight: bold;
}
.news a{
	text-decoration: underline;
}
.news_list_body {
	margin: 20px 0 20px;
}
.news_list_inner {
	max-width: 1000px;
	margin: 0 auto;
}
.news_list_content {
		border: 1px solid #d71e18;
	padding: 10px 10px 10px 20px;
}
.news_top_title {
	background: #ca231d;
	padding: 7px 20px;
	color: #fff;
	font-size: 16px;
	line-height: 1.4em;
}

ul.news_list {
  display: flex;
  align-items: center; 
  font-size: 14px;
  line-height: 1.4em;
  padding-bottom: 15px;
  width: 100%;
}
.date_label_inner {
	display: flex;
}

.news_list_child.news_date {
  width: 95px;
  flex-shrink: 0;
  /* padding: 5px 0; */
}

.news_list_child {
	text-align: left;
	/* padding: 5px 0; */
}

.news_list_child:last-child {
  flex-grow: 1;
  flex-shrink: 1;
  min-width: 0;
}
.news_list_child a.news_text, .news_list_child .news_text_no_link {
	color: #504538;
	font-size: 16px;
  display: block;
  word-break: break-all;
  overflow-wrap: break-word;
  padding: 5px 0;
}


.news_list_child a.news_text:hover {
	opacity: 0.7;
	text-decoration: underline;
}

.category_label {
  width: 90px;
  flex-shrink: 0;
  margin-right: 35px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #00b3d4;
  color: #fff;
  font-size: 13px;
  padding: 2px 5px 1px;
  border-radius: 4px;
  text-align: center;
  box-sizing: border-box;
}
.category_label.mainte_label {
		background: #b0b4b5;
}
.category_label.youtube_label{
	background: #ff656b;
}
.category_label p {
	margin: 0 auto;
}
@media (max-width: 768px) {
				.category_label { margin-right: 20px;}
				.grad-item .news_list_child.news_date { width: 90px;}
}
@media (max-width: 680px) {
				.grad-item .news_list {
					display: inline-block;
				}
				.date_label_inner {
					display: flex;
				}
				.grad-item .news_list_child {
					flex-grow: 0;
				}
				.category_label { margin-right: 0;}
				ul.news_list { padding-bottom: 20px;}
}
.section.w_full_light_yellow .section_inner {
	padding: 30px 0 100px;
}


/* お知らせのアコーディオン */
.grad-wrap {
	position: relative;
}
.grad-btn {
	z-index: 2;
	position: absolute;
		bottom: -60px;
		left: calc(50% - 60px);
	width: 120px;
	margin: auto;
	padding: 5px 0 6px;
	border-radius: 6px;
	background: #00b3d4;
	color: #fff;
	font-size: 14px;
		font-weight: bold;
	text-align: center;
	cursor: pointer;
	transition: .2s ease;
	box-shadow: 0 0 3px rgba(0,0,0,.3);
		line-height: 1em;
		height: 20px;
}
				.switch_sp_tab .grad-btn {
					height: 30px;
				}

.grad-btn-inner {
	position: relative;

}
#lp_wrapper .grad-btn-inner::before {
	visibility: visible;
	display: inline-block;
  content: "\f107";
	font-family: "Font Awesome 5 Free";
	font-weight: bold;
	color: #fff;
	font-size: 20px;
	padding-top: 5px;
		position: absolute;
		left: 20px;
}
#lp_wrapper .grad-btn-inner::after {
	visibility: visible;
	display: inline-block;
  content: "全て表示";
		position: absolute;
		left: 45px;
		top: 3px;
}
/* .grad-btn-inner::after {
	display: inline-block;
  content: "全て表示";
		position: absolute;
		left: 45px;
		top: 3px;
} */
.grad-item {
  position: relative;
  overflow: hidden;
	/* height: 90px; */
  /* height: 90px;  *//*隠した状態の高さ*/
			transition: height 0.5s;
}
.grad-item::before {/*グラデーションで隠す高さ*/
	visibility: visible;
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 57px; 
  background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0.4) 50%, #fefcf2 100%);
  background: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0.4) 50%, #fefcf2 100%);	
  content: "";
		pointer-events: none;
		/*グラデの下のリンクを押せるようにする*/
}
.grad-trigger {
  display: none; /*チェックボックスは常に非表示*/
}
#lp_wrapper .grad-trigger:checked ~ .grad-btn .grad-btn-inner::after {
  content: "閉じる"; /*チェックされていたら、文言を変更する*/
	left: 50px;
}
#lp_wrapper .grad-trigger:checked ~ .grad-btn .grad-btn-inner::before {
  content: "\f106";/*チェックされていたら、文言を変更する*/
}
.grad-btn-inner::before,
.grad-btn-inner::after {
  position: static;
}
.grad-trigger:checked ~ .grad-item {
	/*チェックされていたら、高さを戻す (transition効かすのに高さautoじゃダメなので追加した分高さ調整)*/
  /* height: 160px; */
}

		.grad-trigger:checked ~ .grad-item.grad-item-sp {
			/*スマホ時*/
			height: auto;
		}

#lp_wrapper .grad-trigger:checked ~ .grad-item::before {
	visibility: visible;
  display: none; /*チェックされていたら、grad-itemのbeforeを非表示にする*/
}

/* snsセクション */
.sns_body {
	margin-top: 60px;
}
.sns_flex {
	display: flex;
	justify-content: space-between;
	align-items: end;
	max-width: 880px;
	width: 100%;
	box-sizing: border-box;
}
.sns_text_body {
	text-align: left;
	margin-right: 40px;
}
.sns_lead {
	background: #1d2088;
	border-radius: 6px;
	color: #fff;
	font-size: 20px;
	font-weight: 500;
	padding: 8px 20px;
	line-height: 1em;
	display: inline-block;
	margin-bottom: 15px;
	letter-spacing: 1px;
}
.sns_title {
	font-size: 40px;
	color: #1d2088;
	font-weight: bold;
	line-height: 1.3em;
}
.sns_title span {
	font-size: 46px;
}
.sns_copy {
	margin-bottom: 25px;
}
.sns_icon_4c{
	display: flex;
	justify-content: space-between;
}
.icon_4c {
	margin: 0 25px;
}
.icon_4c img {
	max-width: 90px;
	width: 90px;
}

/* ホバーでふわっと */
/* .icon_4c {
	transition-duration: .4s;
}
.icon_4c:hover {
	transform: scale(1.1);
} */

/* ホバーでぽよっと */
.icon_4c:hover {
	animation: poyo .8s;
}
@keyframes poyo {
	from, to { transform: none; }
	10% { transform: scale(1.2); }
	40% { transform: scale(.9); }
	60% { transform: scale(1.04); }
	80% { transform: scale(.98); }
}


/* お客様の声 --------------------------------*/
.voc_flex.sp_only { display: none;}

.voc_inner {
	padding: 30px 20px;
}
/* 親要素をGridに変更 */
.voc_flex.pc_only {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto auto auto; /* 行ごとの高さをautoに定義することで、横並びの要素で一番高いものに揃う */
  gap: 30px;
  align-items: stretch;
}
.voc_child.pc_only {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 4;
  gap: 0;
}
.voc_child {
  background: #fff;
  border-radius: 10px;
  padding: 20px 30px 40px;
  box-sizing: border-box;
  box-shadow: 0 0 16px rgba(0, 0, 0, .1);
}

/* rid-rowで各パーツが1行ずつ占有するようにする */
.voc_logo {
	grid-row: 1;
}
.voc_title {
	grid-row: 2;
	display: flex;
	align-items: center;
	flex-grow: 0;
	margin: 0 auto;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.5;
}
.voc_img {
	grid-row: 3;
	flex-shrink: 0;
	margin: 5px 0 20px;
}
.voc_detail {
	grid-row: 4;
	text-align: left;
	letter-spacing: 0.01em;
	line-height: 1.6;
}
/* .sp_only.voc_child {
	display: none;
} */
.voc_logo img {
	width: auto;
	max-width: 100%;
	/* height: auto; */
}
.logo-title {
	display: flex;
	flex-direction: column;
	flex: 1;
}
.voc_child:nth-child(-n+2) .voc_title p {
	margin-bottom: 5px;
}
.img-detail {
	display: flex;
	flex-direction: column;
	flex: 1;
}
.voc_img img {
	width: 100%;
	max-width: 240PX;
}
.voc_detail p.voc_name {
	font-size: 17px;
	font-weight: 700;
	margin-bottom: 6px;
}
.voc_detail p {
	font-size: 14px;
}





/* YouTubeセクション */
#lp_wrapper .order_howto_flex::after {
	display: none;
}
.order_howto_flex {
	display: flex;
	justify-content: space-around;
}
.youtube-ratio {
	max-width: 296px;
	margin: 0 15px;
}
.youtube-ratio iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
}
.about_video {
	font-size: 20px;
	font-weight: bold;
	margin-top: 25px;
	line-height: 1.5;
}



@media (max-width: 1080px) {
					#id_news .section_inner { padding: 40px 20px 150px;}

}
@media (max-width: 980px) {
				#lp_wrapper .section h3:before {
					
				}
				.sns_text_body {
					/* margin-right: 70px; */
				}
				.sns_lead {
					font-size: 18px;
					padding: 8px 20px;
				}
				.sns_title {
					font-size: 38px;
					/* margin-bottom: 15px; */
				}
				.sns_title span { font-size: 40px;}
				.icon_4c img { width: 80px;}
}
@media (max-width: 860px) {
				.sns_title { font-size: 35px;}
				.sns_title span { font-size: 38px;}
				.icon_4c img { width: 70px;}
				.icon_4c { margin: 0 20px;}

}
@media (max-width: 768px) {

				/* sp切り替え */
				.sp_only { display: block;}
				.pc_only { display: none;}

				.section.w_full_light_blue, .section.w_full_light_yellow { margin-bottom: 60px;}
				.section.w_full, .section.w_full_light_blue, .section.w_full_light_yellow { padding-top: 40px; padding-bottom: 20px;}

				.section.w_full_light_yellow .section_inner { padding: 30px 0 0px;}

				.section.sns_section { margin: -110px 0 50px;}

				.voc_flex.pc_only {	display: none;}
				.voc_flex.sp_only {	display: block;}
				.voc_child {
					text-align: left;
					padding: 40px 40px 50px;
				}

				.img-logo-title_sp {
					display: flex;
					justify-content: start;
					align-items: end;
					margin-bottom: 25px;
				}
				.voc_logo_sp img {
					max-width: 100%;
					margin-bottom: 15px;
				}
				.voc_title_sp,
				.voc_name_sp {
					font-size: 16px;
					font-weight: 700;
					line-height: 1.2;
				}
				.voc_title_sp {
					margin-bottom: 5px;
				}
				.voc_img_sp {
					margin-right: 30px;
					/* width: calc((100% - 30px) / 2); */
					width: calc((40% - 30px));
				}
				.voc_img_sp img {
					max-width: 100%;
				}
				.voc_logo_sp {
					text-align: left;
					width: 60%;
				}
				.voc_detail_sp {
					font-size: 15px;
					font-weight: 400;
					line-height: 1.5;
				}

				.voc_child {
					margin-bottom: 40px;
					width: 100%;
				}
				.voc_flex {
					display: block;
				}
				.logo-title {
					display: flex;
					align-items: center;
				}
				.img-detail {
					display: flex;
				}
				.voc_logo {
					margin-right: 20px;
				}
				.voc_logo img {
					width: 150%;
				}
				.voc_title {
					font-size: 28px;
				}
				.voc_img {
					margin-right: 20px;
				}
				.voc_detail {
					width: 40%;
				}
				.voc_detail p.voc_name {
					font-size: 28px;
				}
				.voc_detail p {
					font-size: 24px;
				}


				.section h3 { font-size: 40px;}
				#lp_wrapper .section h3:before {
					bottom: -35px;
					width: 40px;
					height: 8px;
				}
				.section h3 {	margin-bottom: 100px;}

				.section .section_inner h4 { font-size: 30px;}


				/* シグニペット薬局の特徴 スマホ表示 */
				.section {
					/* width: 90%; */
					margin: 0 auto;
				}
				.section .feature_flex {
					display: block;
					margin-bottom: 50px;
					margin: 0 auto;
					width: 80%;
				}
				.section .feature_child {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 15px;
				}
				.section .feature_child img.feature_img {
					max-width: 100%;
					padding-right: 30px;
					box-sizing: border-box;
						margin-bottom:0;
						width: 40%;
				}
				.feature_text {
					width: 60%;
				}

				.section {
					padding-top: 20px;
				}
				.feature_child p {
					font-size: 18px;
					text-align: left;
				}
				.feature_child p span {
					font-size: 14px;
				}




				/* 料金について  sp */
				.price_img_pc { display: none; }
				.price_img_sp  {
					display: block;
					width: 100%;
				}



				/* flex3分割 スマホ表示 */
				.service_flow_child_pc,
				.application_child_pc {
					display: none;
				}
				.service_flow_child_sp,
				.application_child_sp {
					display: flex;
					justify-content: space-between;
					align-items: center;
				}
				.service_flow_child_sp .sp_icon_body {
					width: 35%;
				}
				.service_flow_child_sp .sp_text_body {
					width: 65%;
				}
				.application_child_sp .sp_icon_body {
					width: 30%;
				}
				.application_child_sp .sp_text_body {
					width: 70%;
				}

				/* .section_inner, */
				.service_flow_body {
					width: 90%;
					margin: 0 auto;
				}
				.application_title, .service_flow_body .service_flow_title {
					margin-bottom: 7px;
				}
				.service_flow_flex,
				.application_flex {
					display: block;
				}
				.service_flow_flex div::after,
				.application_flex div::after {
					display: none;
				}
				.service_flow_child_sp img.sp_icon,
				.application_child_sp img.sp_icon {
					max-width: 100%;
					margin-top: 0;
					padding-right: 20px;
					box-sizing: border-box;
				}

				.service_flow_child img,
				.application_child img {
					width: 40%;
					margin-right: 40px;
					box-sizing: border-box;
				}
				.application_title div:first-of-type img,
				.service_flow_title div:first-of-type img {
					width: 50px;
					box-sizing: border-box;
				}
				.sp_detail p {
					font-size: 16px;
						line-height: 1.4;
						font-weight: bold;
						text-align: left;
						margin-left: 10px;
				}

				.service_flow_child_sp .service_flow_title p, .application_child_sp .application_title p {
					font-size: 20px;
						line-height: 1.4;
						font-weight: bold;
						text-align: left;
				}



				/* 処方箋ボタン sp */
				.btn_set_inner {
					/* display: block; */
				}
				.btn_set_inner div:first-of-type {
					margin-right: 0;
					/* margin-bottom: 30px; */
				}
				body .prescription_btn a,
				body .btn_single_inner .prescription_btn a {
					padding: 15px 35px 15px 70px;
				}
				body .btn_set_inner .prescription_btn a,
				.btn_single_inner .prescription_btn a {
					font-size: 21px;
				}
				#lp_wrapper .prescription_btn a:after{
					width: 40%;
 				  height: 40%;
				}
				body .btn_single_inner .prescription_btn a {
					/* max-width: 60%; */
				}

				.email_inner {display: block;}
				.email_inner div:first-of-type { margin-right: 0;}


				.sns_lead { font-size: 15px; padding: 6px 13px;}
				.sns_title { font-size: 30px;}
				.sns_title span { font-size: 34px;}
				.icon_4c img { width: 60px;}
				.icon_4c { margin: 0 15px;}

				.about_video { font-size: 17px;}

}
@media (max-width: 680px) {

				.switch_sp_tab #id_news .section_inner {
					padding: 40px 30px 150px;
				}

				.sns_text_body { margin-right: 20px;}
				.sns_copy img { max-width: 130px;}
				.sns_lead { font-size: 14px; margin-bottom: 10px;}
				.sns_title { font-size: 26px;}
				.sns_title span { font-size: 32px;}
				.sns_copy { margin-bottom: 20px;}

				.about_video { font-size: 15px;}


}
@media (max-width: 620px) {
				.section h3 {
					font-size: 28px;
				}
				.section.w_full_light_blue, .section.w_full_light_yellow { margin-bottom: 50px;}
				.section.w_full_light_yellow .section_inner { padding: 30px 20px 0px;}
				#lp_wrapper .section h3:before {
					/* bottom: -75px; */
				}
				.section h3 {
					margin-bottom: 80px;
				}
				.section .section_inner h4 { font-size: 28px;}

				.img-logo-title_sp { margin-bottom: 20px;}
				.voc_detail_sp { font-size: 14px;}
				.voc_child { padding: 40px 40px 45px;}
				.voc_logo_sp img { margin-bottom: 10px;}
				.voc_title_sp,
				.voc_name_sp {
					font-size: 14px;
				}
				.news_list_child a.news_text, .news_list_child .news_text_no_link { font-size: 15px;}

}

@media (max-width: 580px) {
				.section .feature_flex {
					width: calc(100% - 40px);
				}
				.feature_child p {
					font-size: 16px;
					line-height: 1.4;
				}
				.section .section_inner h4 { font-size: 26px;}
				.voc_logo_sp img { margin-bottom: 5px;}

				.application_title div:first-of-type img,
				.service_flow_title div:first-of-type img {
					width: 40px;
				}
				.application_title,
				.service_flow_body .service_flow_title {
					margin-bottom: 6px;
					line-height: 1.4;
				}

}

@media (max-width: 520px) {
				.section .feature_child img.feature_img {
					padding-right: 20px;
				}
				.section .section_inner h4 { font-size: 24px;}
				.section.w_full, .section.w_full_light_blue, .section.w_full_light_yellow { padding-top: 10px; padding-bottom: 0px;}
				.service_flow_child_sp .service_flow_title p, .application_child_sp .application_title p { font-size: 17px;}
				.service_flow_child_sp, .application_child_sp { margin-bottom: 20px;}
				.sp_detail p { font-size: 14px;}
				body .btn_set_inner .prescription_btn a, .btn_single_inner .prescription_btn a { font-size: 18px;}

				.section.sns_section { padding: 40px 20px 0;}
				.sns_copy img { max-width: 110px;}
				.icon_4c { margin: 0 10px;}
				.icon_4c img { width: 50px;}
				.sns_title { font-size: 24px;}
				.sns_title span { font-size: 30px;}
				.sns_copy { margin-bottom: 15px;}

				.switch_sp_tab ul.nav_btn li.navi_link {
					/* height: 28px;
					padding: 0 12px; */
				}
				body .local-nav li a { font-size: 14px;}
				.switch_sp_tab ul.nav_btn li { line-height: 13px;}

				.email_body { width: 100%;}
				.email_inner div:first-of-type { font-size: 15px;}
				.email_inner div:last-of-type { font-size: 18px;}
				.email_inner a { margin-left: 10px;}

				.section.sns_section { margin: -70px 0 50px;}

				.btn_set_body,
				.btn_single_body {
					margin: 60px 0 30px;
				}

}
@media (max-width: 430px) {
				.section_inner { padding: 40px 0 40px;}
				.w_full .section_inner { padding: 40px 20px 60px;}
				.section.w_full_light_blue, .section.w_full_light_yellow { margin-bottom: 20px;}
				.section .feature_flex { width: 100%;}
				.service_flow_body { width: 100%;}

				.switch_sp_tab .upper_nav_section {height: 78px;}
				.switch_sp_tab ul.nav_btn {
					height: 40px;
					margin-top: 5px;
				}
				.switch.switch_sp_tab .local-nav { padding: 12px 10px 14px 15px;}
				.voc_inner {
					padding: 40px 10px 20px;
				}
				.switch_sp_tab #id_news .section_inner { padding: 40px 30px 110px;}


				#lp_wrapper .prescription_btn a:after {
					width: 30%;
					height: 30%;
				}
				body .prescription_btn a, body .btn_single_inner .prescription_btn a { padding: 15px 25px 15px 60px;}
				#lp_wrapper .prescription_btn a:after { left: 30px;}
				#id_voc .section h3 { margin-bottom: 30px;}
}
@media (max-width: 420px) {
				.section h3 {
					font-size: 25px;
					margin-bottom: 60px;
				}
				#id_voc .section h3 {
					margin-bottom: 30px;
				}
				#lp_wrapper .section h3:before {
					bottom: -22px;
					width: 35px;
					height: 6px;
				}
				.feature_child p {
					font-size: 14px;
				}
				.feature_child p span {
					font-size: 12px;
				}

				body .btn_set_inner .prescription_btn a, .btn_single_inner .prescription_btn a { font-size: 16px;}
}
@media (max-width: 375px) {
				body .local-nav li a { font-size: 13px;}
				#lp_wrapper .speechBubble:before { right: -9px;}
				.local-nav li:not(:last-child) { margin-right: 16px;}
				.switch_sp_tab ul.nav_btn li:first-child { margin-right: 12px;}
				.switch_sp_tab ul.nav_btn li:first-child { margin-right: 15px;}
}
@media (max-width: 350px) {
				body .local-nav li a { font-size: 12px;}
				#lp_wrapper .speechBubble:before { right: -7px;}
				.switch_sp_tab ul.nav_btn li.navi_link { padding: 0 10px;}
				.switch_sp_tab ul.nav_btn li:first-child { margin-right: 12px;}
}





/* Noto Sans JP Thin (100) */
@font-face {
  font-family: 'Noto Sans JP';
  font-weight: 100;
  src: url('/include_html/css/common/fonts/noto-sans/NotoSansJP-Thin.woff2') format('woff2'),
       url('/include_html/css/common/fonts/noto-sans/NotoSansJP-Thin.woff') format('woff');
  font-display: swap;
}

/* Noto Sans JP Light (300) */
@font-face {
  font-family: 'Noto Sans JP';
  font-weight: 300;
  src: url('/include_html/css/common/fonts/noto-sans/NotoSansJP-Light.woff2') format('woff2'),
       url('/include_html/css/common/fonts/noto-sans/NotoSansJP-Light.woff') format('woff');
  font-display: swap;
}

/* Noto Sans JP Regular (400) */
@font-face {
  font-family: 'Noto Sans JP';
  font-weight: 400;
  src: url('/include_html/css/common/fonts/noto-sans/NotoSansJP-Regular.woff2') format('woff2'),
       url('/include_html/css/common/fonts/noto-sans/NotoSansJP-Regular.woff') format('woff');
  font-display: swap;
}

/* Noto Sans JP Medium (500) */
@font-face {
  font-family: 'Noto Sans JP';
  font-weight: 500;
  src: url('/include_html/css/common/fonts/noto-sans/NotoSansJP-Medium.woff2') format('woff2'),
       url('/include_html/css/common/fonts/noto-sans/NotoSansJP-Medium.woff') format('woff');
  font-display: swap;
}

/* Noto Sans JP Bold (700) */
@font-face {
  font-family: 'Noto Sans JP';
  font-weight: 700;
  src: url('/include_html/css/common/fonts/noto-sans/NotoSansJP-Bold.woff2') format('woff2'),
       url('/include_html/css/common/fonts/noto-sans/NotoSansJP-Bold.woff') format('woff');
  font-display: swap;
}

/* Noto Sans JP Black (900) */
@font-face {
  font-family: 'Noto Sans JP';
  font-weight: 900;
  src: url('/include_html/css/common/fonts/noto-sans/NotoSansJP-Black.woff2') format('woff2'),
       url('/include_html/css/common/fonts/noto-sans/NotoSansJP-Black.woff') format('woff');
  font-display: swap;
}