@charset "UTF-8";

/*******************
	Animation
********************/
@keyframes pulsebtn {
  0% {
    -webkit-transform: scale(0.85);
            transform: scale(0.85);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

/*base*/
a:hover{
	opacity:.7;
}
/*div#container,#content{
	background: #f5fbff;
}*/
.column-wrapper{
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}
.column-wrapper,header,main,footer{
	width: 100%;
	max-width: 750px;
	margin: 0 auto;
}
/*header*/
header{
	box-sizing: border-box;
	background: #fff;
	padding: 3.73333333% 3.3333333% 4.666666666%;
}
header h1{
	width: 77.101449275%;
}

/*menu*/
.menuOc ul li{
	margin-bottom: 4%;
}
.menuOc ul li:last-of-type{
	margin-bottom: 20%;
}
.menuOc ul li a{
	display: block;
	width: 90.13333333%;
	margin: 0 auto;
}
/* menuOcとlineupOcの間の縦線 */
.menuOc{
	position: relative;
}
.menuOc::after {
	content: "";
	display: block;
	background-color: #0846bd;
	width: 2px;
	height: min(13.34vw, 100px);
	position: absolute;
	bottom: -9%;
	left: calc(50% - 1px);
}

/* ==========================
   offerSlider
========================== */


/* レイアウトシフト対策 */
.offerSliderList {
	opacity: 0;
}
.offerSliderList:not(.slick-initialized) {
	display: flex;
	overflow: hidden;
}

.offerSliderList:not(.slick-initialized) .offerSliderItem {
	flex: 0 0 auto;
	width: calc(50% - 8px);
}
.offerSliderList.slick-initialized {
	opacity: 1;
	transition: opacity 0.3s ease;
}
@media screen and (max-width: 750px) {
	.offerSliderList:not(.slick-initialized) .offerSliderItem {
		width: 85%;
	}
}

/* slider */
.lineupOc{
	background: url("/upload/lp/onlineclinic_mtotal01/img/menu_bg.webp");
	background-size: contain;
	padding-bottom: 21.6666666%;
}
.offerSlider {
	width: 100%;
	max-width: 750px;
	margin: 0;
	padding-left: 40px;
	box-sizing: border-box;
}

.slick-slider .slick-list{
    padding-bottom: 6.66666666%;
}

/* 右のコンテンツを見切れさせる */
.offerSlider .slick-list {
	padding-right: 80px; /* PC：見切れ量 */
}

/* --- スライド1枚 --- */
.offerSliderItem {
	position: relative;
	margin-right: 16px;
	box-sizing: border-box;
}
.offerSliderImg {
	margin: 0;
}

.offerSliderImg img {
	width: 100%;
	height: auto;
	vertical-align: bottom;
	filter: drop-shadow(5px 5px 10px rgba(24, 25, 25, 0.2));
}

/* 購入ボタン（オファー画像の下部に重ねる） */
.offerSliderBtn {
	position: absolute;
	left: 50%;
	bottom: 3.2%;
	width: 83.7%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
}

.offerSliderBtn img {
	width: 100%;
	height: auto;
	vertical-align: bottom;
}

/* --- arrow / dot（下部にまとめて配置） --- */
.offerSliderCtrl {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 0 10%;
}

/* arrow */
.offerSliderCtrl .slick-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	width: 32px;
	height: 32px;
	padding: 0;
	border: none;
	background: transparent;
	font-size: 0;
	line-height: 0;
	cursor: pointer;
}

.offerSliderCtrl .slick-arrow::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 12px;
	height: 12px;
	border-top: 2px solid #333;
	border-right: 2px solid #333;
}

.offerSliderCtrl .slick-prev {
	left: 50px;
}

.offerSliderCtrl .slick-prev::before {
	transform: translate(-30%, -50%) rotate(-135deg);
	-webkit-transform: translate(-30%, -50%) rotate(-135deg);
}

.offerSliderCtrl .slick-next {
	right: 90px;
}

.offerSliderCtrl .slick-next::before {
	transform: translate(-70%, -50%) rotate(45deg);
	-webkit-transform: translate(-70%, -50%) rotate(45deg);
}

/* ループなしのため端では非活性 */
.offerSliderCtrl .slick-arrow.slick-disabled {
	opacity: 0.3;
	pointer-events: none;
}

/* dot */
.offerSliderCtrl .slick-dots {
	order: 2;
	display: flex;
	margin: 0 45px 0 0;
	padding: 0;
	list-style: none;
}

.offerSliderCtrl .slick-dots li {
	margin: 0 5px;
}

.offerSliderCtrl .slick-dots button {
	display: block;
	width: 10px;
	height: 10px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: #ccc;
	font-size: 0;
	line-height: 0;
	cursor: pointer;
}

.offerSliderCtrl .slick-dots .slick-active button {
	background: #333;
}

/*pcの時は非表示*/
div#container._pcView .offerSliderCtrl.edCtrl{
	display: none;
}

/* --- SP --- */
@media screen and (max-width: 750px) {
	.offerSlider {
		padding-left: 5.33%;
	}
	.offerSlider .slick-list {
		padding-right: 15%;
	}

	.offerSliderItem {
		margin-right: 10px;
	}
	.offerSliderCtrl .slick-prev {
		left: calc(12% - 5.33%);
	}

	.offerSliderCtrl .slick-next {
		right: 12%;
	}
}


/* ==========================
   FAQアコーディオン
========================== */
.qa{
	background: #e4f5ff;
	padding-bottom: 13.3333333%;
}
.qa dl.faqAcco{
	width: 89.3333333333%;
	margin: 0 auto;
}
.qa dl.faqAcco dt{
	cursor: pointer;
	display: block;
	position: relative;
	margin-top: 4%;
}
.qa dl.faqAcco dt::before,.qa dl.faqAcco dt::after{
	position: absolute;
	content: '';
	bottom: 50%;
	right: 5.33333333%;
	width: 3.4666666%;
	height: 2px;
	background: #104a9e;
}
.qa dl.faqAcco dt::after{
	transform: rotate(-90deg);
    transition: transform 0.3s;
}
.qa dl.faqAcco dt.active::after{
	transform: rotate(0deg);
}
.qa dl.faqAcco dd{
	margin: 0;
	display: none;
}

/* ============================================
   フローティングバナー（STEP）
============================================ */
.jsFltBnrStep {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-49.3%);
  width: 750px;
  z-index: 9999;
  display: none;
}

.jsFltBnrStep a {
	display: block;
	position: relative;
	overflow: hidden;
}
.jsFltBnrStep a:hover{
	opacity: 0.9;
}
.jsFltBnrStep a img {
  width: 100%;
  height: auto;
  display: block;
  vertical-align: bottom;
}

/* ---- 光が走るアニメーション ---- */
.jsFltBnrStep a span.twinkle {
  display: block;
  z-index: 11;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

.jsFltBnrStep a span.twinkle::before {
  content: '';
  display: block;
  width: 68px;
  height: 300px;
  position: absolute;
  top: -60px;
  left: -120px;
  transform: rotate(30deg);
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0)   0%,
    rgba(255, 255, 255, 0.8) 50%,
    rgba(255, 255, 255, 0)   100%
  );
  animation: twinkle01 1.8s ease-in-out infinite;
}

@keyframes twinkle01 {
  0%   { left: -110%;  opacity: 0.8; }
  100% { left: 110%;    opacity: 0.8; }
}
/*SP*/
@media screen and (max-width: 750px) {
  .jsFltBnrStep {
    width: 100%;
    left: 0;
    transform: none;
  }
	.jsFltBnrStep a{
		opacity: 1;
	}
}
/* ============================================
   フローティングバナー(V2)
============================================ */
.jsFltBnrStepV2 {
  position: fixed;
  bottom: 1%;
  left: 50%;
  transform: translateX(-49.5%);
  width: 700px;
  z-index: 9999;
  display: none;
}

.jsFltBnrStepV2 a {
	display: block;
	position: relative;
	overflow: hidden;
	width: fit-content;
	border-radius: 16px;
}
.jsFltBnrStepV2 a:hover{
	opacity: 0.9;
}
.jsFltBnrStepV2 a img {
  width: 100%;
  height: auto;
  display: block;
  vertical-align: bottom;
}
/* 画像と光エフェクトを包むマスク要素 */
.jsFltBnrStepV2 a .bnrMask {
	display: block;
	position: relative;
	overflow: hidden;
	border-radius: 16px; /* バナー画像の角丸に合わせて調整 */
	line-height: 0; /* img下の隙間対策 */
}
.jsFltBnrStepV2 a .bnrMask img {
	width: 100%;
	height: auto;
	display: block;
}
/* ---- 光が走るアニメーション ---- */
.jsFltBnrStepV2 a span.twinkle {
  display: block;
  z-index: 11;
  position: absolute;
  left: 0;
  top: 0;
  width: 99%;
  height: 110px;
  overflow: hidden;
  pointer-events: none;
	clip-path: inset(0 round 10px);
	left: 0.2%;
}

.jsFltBnrStepV2 a span.twinkle::before {
  content: '';
  display: block;
  width: 68px;
  height: 300px;
  position: absolute;
  top: -60px;
  left: -120px;
  transform: rotate(30deg);
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0)   0%,
    rgba(255, 255, 255, 0.8) 50%,
    rgba(255, 255, 255, 0)   100%
  );
  animation: twinkle01 1.8s ease-in-out infinite;
}

/*無料相談*/
.jsFltBnrStepV2.fcBnr {
  transform: translateX(-50%);
  width: 750px;
}
.jsFltBnrStepV2.fcBnr a span.twinkle{
	height: 110px;
    width: 93.33333333%;
    left: 3.3%;
    top: 17%;
    clip-path: inset(0 round 50px);
}


@keyframes twinkle01 {
  0%   { left: -110%;  opacity: 0.8; }
  100% { left: 110%;    opacity: 0.8; }
}
/*SP*/
@media screen and (max-width: 750px) {
  .jsFltBnrStepV2 {
    width: 93.33333333333%
  }
	.jsFltBnrStepV2 a{
		opacity: 1;
	}
	.jsFltBnrStepV2 a .twinkle {
		height: 14.66666666vw;
	}
	.jsFltBnrStepV2 a .twinkle::before{
		animation: twinkle01 3s ease-in-out infinite!important;
	}
	
	/*無料相談*/
	.jsFltBnrStepV2.fcBnr {
	  width: 100%;
	}
	.jsFltBnrStepV2.fcBnr a span.twinkle{
		height: 14.66666666vw;
	}
}
/* ============================================
   footer
============================================ */
footer{
	box-sizing: border-box;
	background: #000;
	font-family: 'ヒラギノ角ゴ ProN W3','Hiragino Kaku Gothic ProN','メイリオ', Meiryo,YuGothic,'Yu Gothic',sans-serif;
	padding: 13.33333333% 5.33333333% 6.6666666666%;
}
footer p{
	width: 79.402985074%;
	margin: 0 auto min(16.666666666vw, 125px);
}
footer nav{
	
}
nav[aria-label="法的情報"] small{
	display: flex;
	flex-wrap: wrap;
	
	
}
footer nav small a{
    box-sizing: border-box;
	padding-left: min(1.6vw, 12px);
	color: #fff;
	font-size: min(3.2vw, 24px);
	text-decoration: none;
	width: 50%;
	margin-bottom: min(2.66666666vw, 20px);
	letter-spacing: 0.01em;
	display: flex;
    align-items: center;
	height: min(6.66666666vw, 50px);
	border-right: 1px solid #2c2c2c;
}
footer nav small a:nth-of-type(2){
	padding-left: min(4vw, 30px);
    border: none;
}
footer nav small a:last-of-type{
	margin-bottom: min(10vw, 75px);
}
footer > small{
	display: block;
	font-size: min(2.66vw, 18px);
	color: #fff;
	text-align: center;
	border-top: 1px solid #2c2c2c;
	padding: min(4vw, 30px) 0 0 0;
	letter-spacing: 0.01em;
}