@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;
}


/*商品一覧用　ここから///////////////////////////////////////////// */

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
----------------------------------------------------------- */
div:after,
ul:after,
ol:after,
dl:after,
.clearfix:after{
height:0;
visibility:hidden;
content:".";
display:block;
clear:both;
}

/* 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 {
  /* font-family: "Hiragino Sans","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック",sans-serif; */
	font-family: ryo-gothic-plusn,"Hiragino Sans","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック",sans-serif;
  color: #3e3830;
	font-size: 16px;
	line-height: 1.8em;
}
/* .mv_page div:after, .mv_page ul:after, .mv_page ol:after, .mv_page dl:after, .mv_page .clearfix:after {
  display: none !important;
} */
.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%;
}

h1 {
	margin: 0;
}

.mv_body {
  margin: 0 0 40PX;
}
.mv_body.mv_body_scroll {
  margin: 110px 0 40PX;
}
/* スマホ時 */
.mv_body.switch_sp.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;
}

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

}
.inview.show.switch_sp {
	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);
		}
	}


/* デバイスで切り替え  ---------------------------------------- */
.fadeUp.switch_sp {
	animation: none;
	transform: none;
	transition: unset;
	opacity: 1;
}
.mv_img.switch_sp {
	padding: 0 15px;
}





/* ナビ ----------------------------------------------*/
.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;
}






.navi_inner {
	max-width: 1000px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 100px;
	margin: 0 auto;
}
div.navi_inner::after {
	display: none;
}
ul.navi_list {
	/* width: 1000px; */
	list-style: none;
    display: flex;
    justify-content: flex-end;
		align-items: center;
			height: 50px;x;
}
ul.navi_list li {
	color: #1d2088;
	display: grid;
  place-content: center;
	margin-right: 24px;
	line-height: 1rem;
}
ul.navi_list.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;
}


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

/* ナビのスマホ切り替え */
.navi_body.switch_sp {
	height: 300px;
}
.navi_body.switch_sp .navi_inner {
	display: block;
	/* height: auto; */
	height: 80px;
}
.navi_body.switch_sp ul.navi_list {
	justify-content: center;
	/* height: auto; */
	height: 80px;
	font-size: 1.6rem;
}
.navi_body.switch_sp ul.navi_list li {
	line-height: 2rem;
}
.navi_body.switch_sp ul.navi_list li.navi_link {
	font-size: 2rem;
	/* height: 50px; */
	padding: 5px 18px;
	/* line-height: 2rem; */
	border-radius: 60px;
}
.navi_body.switch_sp ul.navi_list li.navi_link a {
	height: 80px;
    display: flex;
    align-items: center;
}
.navi_body.switch_sp ul.navi_list li.prescription_link {
	margin-right: 30px;
}
.navi_body.switch_sp ul.navi_list.navi_list_logo {
	height: 120px;
}
.navi_body.switch_sp 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 {
	margin-top: -150px;
	padding-top: 150px;
}


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



/* MV下の境界線 SVG 固定 ここから ----------------------------------------*/
.mv_title {
	overflow:hidden;
	position:relative;
	}
	.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) {
				.mv_title::before {
				background-size: 180% 82px;
				}
	}

.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: 46px;
	font-weight: bold;
	font-feature-settings: "palt";
	letter-spacing: 0.04em;
}
.section h3:before {
  content: '';
  position: absolute;
  bottom: -45px;
  display: inline-block;
  width: 60px;
  height: 12px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  background-color: #1d2088;
  /* border-radius: 2px; */
}
.switch_sp .section h3 {
	font-size: 5rem;
}
.switch_sp .section h3:before {
	bottom: -75px;
}
.switch_sp .section h3 {
	margin-bottom: 160px;
}

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


.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: #faf9e6;
}
.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-top: 40px;
}
.section_inner {
	max-width: 1000px;
	margin: 0 auto;
	padding: 40px 0 80px;
}
.section.w_full_light_blue,
.section.w_full_light_yellow {
	padding-top: 60px;
	margin-bottom: 100px;
}

.switch_sp .section.w_full,
.switch_sp .section.w_full_light_blue,
.switch_sp .section.w_full_light_yellow {
	padding-top: 100px;
	padding-bottom: 20px;
}
.switch_sp .section {
	padding-top: 150px;
}

#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;
}



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

/* シグニペット薬局の特徴 スマホ表示 */
.section.switch_sp {
	width: 90%;
	margin: 0 auto;
}
.section.switch_sp .feature_flex {
	display: block;
	margin-bottom: 50px;
}
.section.switch_sp .feature_child {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.section.switch_sp .feature_child img {
	width: 40%;
	margin-right: 40px;
	box-sizing: border-box;
}
.section.switch_sp .pc_text {
	display: none;
}
.section.switch_sp .sp_text {
	display: block;
	text-align: left;
	font-size: 1.8rem;
	width: 60%;
}
.section.switch_sp .sp_text p {
	font-size: 2.4rem;
	line-height: 1.8em;
}
.section.switch_sp .feature_child p span {
	font-size: 1.8rem;
}



/* flex3分割 */
.application_flex,
.service_flow_flex {
	display: flex;
	justify-content: space-between;
	max-width: 880px;
	margin: 0 auto;
}
.application_flex::after,
.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 {
	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_body.switch .service_flow_child_sp,
.section_inner.switch .application_child_sp {
	display: none;
}


/* flex3分割 スマホ表示 */
.service_flow_body.switch_sp .service_flow_child_pc,
.section_inner.switch_sp .application_child_pc {
	display: none;
}
.service_flow_body.switch_sp .service_flow_child_sp,
.section_inner.switch_sp .application_child_sp {
	display: flex;
    justify-content: space-between;
    align-items: center;
}
.service_flow_body.switch_sp .service_flow_child_sp .sp_icon_body,
.section_inner.switch_sp .application_child_sp .sp_icon_body {
	width: 40%;
}
.service_flow_body.switch_sp .service_flow_child_sp .sp_text_body,
.section_inner.switch_sp .application_child_sp .sp_text_body {
width: calc(60% - 40px);

}
.section_inner.switch_sp,
.service_flow_body.switch_sp {
	width: 90%;
	margin: 0 auto;
}
.section_inner.switch_sp .application_title,
.service_flow_body.switch_sp .service_flow_title {
	/* display: flex;
	justify-content: start;
	align-items: center; */
	margin-bottom: 15px;
}
.service_flow_body.switch_sp .service_flow_flex,
.section_inner.switch_sp .application_flex {
	display: block;
}
.service_flow_body.switch_sp .service_flow_flex div::after,
.section_inner.switch_sp .application_flex div::after {
	display: none;
}
.service_flow_child_sp img.sp_icon,
.application_child_sp img.sp_icon {
	max-width: 100%;
    margin-right: 40px;
		margin-top: 20px;
    box-sizing: border-box;
}

.service_flow_body.switch_sp .service_flow_child img,
.section_inner.switch_sp .application_child img {
	width: 40%;
	margin-right: 40px;
	box-sizing: border-box;
}
.service_flow_body.switch_sp .sp_detail p,
.section_inner.switch_sp .sp_detail p {
	font-size: 1.8rem;
    line-height: 1.6em;
		font-weight: bold;
		text-align: left;
		margin-left: 20px;
}

.service_flow_body.switch_sp .service_flow_child_sp .service_flow_title p,
.section_inner.switch_sp .application_child_sp .application_title p {
	font-size: 2.5rem;
    line-height: 1.6em;
		font-weight: bold;
		text-align: left;
}



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


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



/* 利用申込書をダウンロードする */
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 .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 {
	display: flex;
	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: 25px 45px 25px 100px;
	color: #fff;
	transition: 0.3s ease-in-out;
	font-weight: bold;
	font-size: 22px;
	letter-spacing: 0.03em;
}
.prescription_btn a:after {
	position: absolute;
	/* top: 50%; */
	left: 30px;
	/* 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);
	/* transform: translateY(-50%); */
	background-size: contain;
  vertical-align: middle;
	width: 48px;
	height: 47px;
}
body .btn_set_body .prescription_btn a:valid {
	color: #fff;
}
.prescription_btn a:hover {
	background: #1d2088;
	color: #fff;
	opacity: 0.7;
}

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

/* 処方箋ボタン sp */
.btn_set_inner.switch_sp {
	display: block;
}
.btn_set_inner.switch_sp div:first-of-type {
	margin-right: 0;
	margin-bottom: 30px;
}
body .btn_set_inner.switch_sp .prescription_btn a,
.btn_single_inner.switch_sp .prescription_btn a {
	font-size: 1.8rem;
}
body .btn_single_inner.switch_sp .prescription_btn a {
	max-width: 60%;
}



/* メールアドレス */
.email_body {
	border: 2px solid #00b3d4;
	padding: 15px 25px 12px 25px;
	display: inline-block;
	background: #fff;
}
.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;
}
.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: baseline;
	font-size: 14px;
	line-height: 1.4em;
}
.news_list_child.news_date {
    width: 100px;
}
.news_list_child {
	padding: 5px 0;
	text-align: left;
}

.news_list_child a.news_text,
.news_list_child .news_text_no_link {
	color: #504538;
	font-size: 16px;
	max-width: 750px;
	display: block;
}
.news_list_child a.news_text:hover {
	opacity: 0.7;
	text-decoration: underline;
}
.category_label  {
	margin-right: 35px;
		display: flex;
    align-items: center;
		background: #00b3d4;
		color: #fff;
		font-size: 13px;
		padding: 2px 5px 1px;
		border-radius: 4px;
		width: 90px;
		text-align: center;
}
.category_label p {
	margin: 0 auto;
}
			.grad-item.grad-item-sp .news_list {
				/*スマホ時*/
				display: inline-block;
			}
			.grad-item.grad-item-sp .news_list_child {
				/*スマホ時*/
				padding: 1px 0 4px 0;
			}
			.grad-item.grad-item-sp .news_list_child.news_date {
				/*スマホ時*/
				padding: 5px 0 0 0;
			}
.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: 4px 0;
	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;
}

.grad-btn-inner {
	position: relative;
}
.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: 4px;
		position: absolute;
		left: 20px;
}
.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%, #fff 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%, #fff 100%);	
  content: "";
		pointer-events: none; */
		/*グラデの下のリンクを押せるようにする*/
}
.grad-trigger {
  display: none; /*チェックボックスは常に非表示*/
}
.grad-trigger:checked ~ .grad-btn .grad-btn-inner::after {
  content: "閉じる"; /*チェックされていたら、文言を変更する*/
	left: 50px;
}
.grad-trigger:checked ~ .grad-btn .grad-btn-inner::before {
  content: "\f106";/*チェックされていたら、文言を変更する*/
}
.grad-trigger:checked ~ .grad-item {
	/*チェックされていたら、高さを戻す (transition効かすのに高さautoじゃダメなので追加した分高さ調整)*/
  /* height: 160px; */
}

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

.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: center;
}
.sns_text_body {
	text-align: left;
	margin-right: 100px;
}
.sns_lead {
	background: #1d2088;
	border-radius: 6px;
	color: #fff;
	font-size: 22px;
	font-weight: bold;
	padding: 10px 20px;
	line-height: 1em;
	display: inline-block;
	margin-bottom: 20px;
	letter-spacing: 1px;
}
.sns_title {
	font-size: 42px;
	color: #1d2088;
	font-weight: bold;
	line-height: 1.3em;
}
.sns_title span {
	font-size: 48px;
}
.sns_copy {
	margin-bottom: 25px;
}
.sns_icon_4c{
	display: flex;
	justify-content: space-between;
}
.icon_4c {
	margin: 0 25px;
}

/* ホバーでふわっと */
/* .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); }
}

/* YouTubeセクション */
.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;
}