@charset "utf-8";

/* layout
------------------------------------------------ */

/*@media screen and (min-width: 780px) {*/
	#content {
		margin: 0 auto;
		padding-top: 0px;
		width: 100%;
	}
	.colum200_l{
		display: none !important;
	}
	.colum800_r {
		float: none;
		width: auto;
		margin-bottom: 0px;
	}
	#contents-wrap {
		padding-top: 0;
		width: 100%;
	}
	#main {
		overflow: visible; /* onliy LD_2018wintergift */
	}
/*}*/

/* base
------------------------------------------------ */

#lipovitan {
	font-feature-settings: "palt";
	line-height: 1;
	min-width: 1256px;
	padding-bottom: 70px;
}
@media screen and (min-width: 0) {
	#lipovitan .pc { display: block !important;}
	#lipovitan .sp { display: none !important; }
	#lipovitan img.pc { display: inline-block !important; }
	#lipovitan img.sp { display: none !important; }
}
@media screen and (max-width: 750px) {
	#lipovitan {
		min-width: 0;
		padding-bottom: 0;
	}
	#lipovitan .pc { display: none !important; }
	#lipovitan .sp { display: block !important; }
	#lipovitan img.pc { display: none !important; }
	#lipovitan img.sp { display: inline-block !important; }
}

/* module
------------------------------------------------ */

.kv {
	background: url(/simages/feature/lipovitan/img/bg01.png) 0 100% no-repeat scroll;
	background-size: cover;
}
	.kv__inner {
		margin: 0 auto;
		padding: 20px 0 40px 0;
		width: 1256px;
	}
		.kv__title {}
@media screen and (max-width: 750px) {
	.kv {
		background-image: url(/simages/feature/lipovitan/img/bg01_sp.png);
	}
		.kv__inner {
			padding: 0;
			width: auto;
		}
			.kv__title {
				margin-bottom: 0;
			}
}

.nav {
	padding: 30px 0;
}
	.nav__inner {
		margin: 0 auto;
		width: 1250px;
	}
		.nav__list {
			display: flex;
			flex-wrap: wrap;
			gap: 30px 0;
		}
			.nav__li {
				border-left: 1px solid #dcdcdc;
				width: calc((100% - 5px) / 4);
			}
				.nav__li a {
					display: block;
					padding: 0 20px;
					width: 100%;
				}
@media screen and (max-width: 750px) {
	.nav {
		padding: 0;
	}
		.nav__inner {
			margin: 0;
			width: auto;
		}
			.nav__list {
				border-bottom: 1px solid #dcdcdc;
				flex-wrap: wrap;
				gap: 0;
			}
				.nav__li {
					border-top: 1px solid #dcdcdc;
					width: 50%;
				}
					.nav__li a {
						padding: 10px 15px;
						width: 100%;
					}
				.nav__li:nth-child(even) {
					border-right: 1px solid #dcdcdc;
				}

}


.liposec {
	background: url(/simages/feature/lipovitan/img/main01.png) 0 0  no-repeat scroll;
	background-size: contain;
	margin-bottom: 100px;
	padding-top: calc(20% + 60px);
}
	#liposec02 { background-image: url(/simages/feature/lipovitan/img/main02.png); }
	#liposec03 { background-image: url(/simages/feature/lipovitan/img/main03.png); }
	#liposec04 { background-image: url(/simages/feature/lipovitan/img/main04.png); }
	#liposec05 { background-image: url(/simages/feature/lipovitan/img/main05.png); }
	#liposec06 { background-image: url(/simages/feature/lipovitan/img/main06.png); }
	.liposec__inner {
		margin: 0 auto;
		width: 1240px;
	}
		.liposec__hn {
			margin: 0 0 50px 0;
			text-align: center;
		}
@media screen and (max-width: 750px) {
	.liposec {
		background: url(/simages/feature/lipovitan/img/main01_sp.png) 0 0  no-repeat scroll;
		background-size: contain;
		margin-bottom: 30px;
		padding-top: calc(42.67% + 30px);
	}
		#liposec02 { background-image: url(/simages/feature/lipovitan/img/main02_sp.png); }
		#liposec03 { background-image: url(/simages/feature/lipovitan/img/main03_sp.png); }
		#liposec04 { background-image: url(/simages/feature/lipovitan/img/main04_sp.png); }
		#liposec05 { background-image: url(/simages/feature/lipovitan/img/main05_sp.png); }
		#liposec06 { background-image: url(/simages/feature/lipovitan/img/main06_sp.png); }
		.liposec__inner {
			margin: auto;
			width: auto;
		}
			.liposec__hn {
				margin: 0 0 30px 0;
			}
}


.lipo-btn {
	background: #ee881a;
	border-radius: 999px;
	color: #fff;
	display: inline-block;
	font-weight: bold;
	font-size: 20px;
	padding: 15px;
	text-align: center;
	width: 100%;
}
@media screen and (max-width: 750px) {
	.lipo-btn {
		font-size: 14px;
		padding: 10px;
		text-align: center;
		width: 100%;
	}
}

.lipo-btn02 {
	background: #146aab;
	border-radius: 999px;
	color: #fff;
	display: inline-block;
	font-weight: bold;
	font-size: 18px;
	padding: 15px 20px;
	text-align: center;
}
@media screen and (max-width: 750px) {
	.lipo-btn02 {
		font-size: 14px;
		padding: 10px;
		text-align: center;
	}
}


.items {
	align-items: flex-start;
	display: flex;
	justify-content: center;
	margin: 0 -5px;
	padding: 0 0 32px 0;
	max-width: none;
}
@media screen and (max-width: 750px) {
	.items {
		margin: 0;
		padding: 0 15px 20px 15px;
		justify-content: flex-start;
		overflow-x: auto;
	}
	.items::-webkit-scrollbar {
		height: 10px;
	}
	.items::-webkit-scrollbar-track {
		background: #eee;
		border-radius: 10px;
		height: 10px;
		margin: 0 20px;
	}
	.items::-webkit-scrollbar-thumb {
		background: #ddd;
		border-radius: 10px;
	}
}

@media screen and (max-width: 750px) {
	.items-groups {
		margin: 0;
		padding: 0 15px 32px 15px;
	}
		.items-groups__group {
			display: flex !important;
			flex-wrap: wrap;
			margin: 0;
		}
		.items-groups__group .item {
			margin: 5px !important;
			min-width: 0 !important;
			width: calc((100% - 20px) / 2) !important;
		}
}


	.item {
		border: 1px solid #dcdcdc;
		margin: 0 5px;
		position: relative;
		width: 240px;
	}
		.item__sub {
			font-size: 0.75em;
		}
			.item__sub--baseline {
				vertical-align: baseline;
			}
		.item__badge {
			background: #ccc;
			border-radius: 999px;
				color: #fff;
			font-size: 16px;
			height: 55px;
			left: 15px;
			line-height: 55px;
			position: absolute;
			text-align: center;
			top: 15px;
			width: 55px;
		}
			.item__badge--kids {
				background: #1163d3;
			}
			.item__badge--mama {
				background: #e60012;
			}
		.item__tag {}
			.item__tag-list {
				display: flex;
				gap: 5px;
				list-style: none;
				position: absolute;
				right: 15px;
				top: 15px;
			}
			.item__tag-li {
				width: 129px;
			}
		.item__images {
			/*padding: 40px 30px 30px 30px;*/
			padding: 40px 30px 20px 30px;
		}
			.item__image {
				margin-bottom: 7px;
			}
			.item__logo {
				margin-bottom: 20px;
			}
			.item__btn {
				margin-bottom: 20px;
			}
			.item__btn2 {
				text-align: center;
			}
				.item__btn2 a,
				.item__btn2 span {
					color: #146aab;
					font-size: 18px;
					font-weight: bold;
					padding-left: 15px;
					position: relative;
					text-decoration: underline;
				}
					.item__btn2 a:before {
						border-right: 3px solid #146aab;
						border-top: 3px solid #146aab;
						content: "";
						display: block;
						height: 8px;
						left: -5px;
						position: absolute;
						top: 4px;
						transform: rotate(45deg);
						width: 8px;
					}
		.item__detail-group {
			border-top: 1px dashed #dcdcdc;
			color: #333;
			/* padding: 20px 10px; */
			padding: 10px 10px;
		}
			.item__dl {
				margin: 0;
				/*padding: 20px 0;*/
				padding: 10px 0;
				text-align: center;
			}
				.item__dt {
					color: #999;
					font-size: 14px;
					line-height: 1.3;
					margin-bottom: 10px;
				}
				.item__dt--acordion {
					cursor: pointer;
					padding-bottom: 20px;
					position: relative;
				}
					.item__dt--acordion::after {
						border-color: #999;
						border-style: solid;
						border-width: 0 3px 3px 0;
						bottom: 0;
						content: '';
						display: inline-block;
						height: 8px;
						left: calc(50% - 6px);
						vertical-align: middle;
						width: 8px;
						transform: rotate(45deg);
						position: absolute;
					}
				.item__dt--acordion + .item__dd {
					display: none;
				}
				.item__dd {
					font-size: 18px;
					font-weight: bold;
					line-height: 1.4;
					text-align: center !important;
				}
					.item__dd img {
						display: inline-block;
					}
				.item__symbol {
					width: 18px;
				}
		.item__detail-group--red { color: #e60012; }
		.item__detail-group--blue { color: #1163d3; }
		.item__detail-group--small { padding: 15px 0; }
@media screen and (max-width: 750px) {
	.item {
		min-width: 150px;
		width:  150px;
	}
		.item__badge {
			font-size: 12px;
			height: 40px;
			left: 5px;
			line-height: 40px;
			top: 5px;
			width: 40px;
		}
		.item__tag {}
			.item__tag-list {
				right: 12px;
				top: 12px;
			}
			.item__tag-li {
				width: 65px;
			}
		.item__images {
			padding: 20px 15px 15px 15px;
		}
			.item__image {
				margin-bottom: 0;
			}
			.item__logo {
				margin-bottom: 20px;
			}
			.item__btn {
				margin-bottom: 10px;
			}
			.item__btn2 {}
				.item__btn2 a {
					font-size: 12px;
					padding-left: 11px;
				}
					.item__btn2 a:before {
						border-right: 2px solid #146aab;
						border-top: 2px solid #146aab;
						height: 6px;
						left: -3px;
						top: 3px;
						width: 6px;
					}
		.item__detail-group {
			/*padding: 10px 5px;*/
			padding: 5px;
		}
			.item__dl {
				margin: 0;
				padding: 10px 0;
				text-align: center;
			}
				.item__dt {
					font-size: 12px;
					/*margin-bottom: 10px;*/
					margin-bottom: 5px;
				}
				.item__dt--acordion {
					padding-bottom: 20px;
				}
					.item__dt--acordion::after {
						border-width: 0 3px 3px 0;
						bottom: 0;
						height: 6px;
					}
				.item__dd {
					/*font-size: 15px;*/
					font-size: 14px;
				}
				.item__symbol {
					width: 12px;
				}
	.item {
		position: relative;
	}
		.item:last-child::after {
			content: "";
			display: block;
			height: 15px;
			left: 100%;
			position: absolute;
			top: 0;
			width: 15px;
		} 
}


.faqsec {
	background: #b2e1f7;
	margin-bottom: 80px;
	padding: 80px 0;
}
	 .faqsec__inner {
		 background: #fff;
		 margin: 0 auto;
		 padding: 40px;
		 width: 1000px;
	 }
	 .faqsec__hn {
		 background: #146aab;
		 border-radius: 10px;
		 font-size: 32px;
		 color: #fff;
		 letter-spacing: normal;
		 margin-bottom: 60px;
		 padding: 20px;
		 text-align: center;
	 }
@media screen and (max-width: 750px) {
	.faqsec {
		margin-bottom: 30px;
		padding: 30px 20px;
	}
		 .faqsec__inner {
			 padding: 30px 20px;
			 width: auto;
		 }
		 .faqsec__hn {
			 border-radius: 5px;
			 font-size: 20px;
			 margin-bottom: 30px;
			 padding: 10px;
		 }
}


.faq {
	padding: 0 15px;
}
	.faq__q {
		color: #146aab;
		font-size: 16px;
		font-weight: bold;
		line-height: 1.6;
		padding-left: 2em;
		position: relative;
	}
		.faq__q:before {
			border: 1px solid #146aab;
			border-radius: 999px;
			content: "Q";
			height: 1.2em;
			left: 0;
			line-height: 1.2;
			position: absolute;
			text-align: center;
			top: 0.1em;
			width: 1.2em;
		}
	.faq__a {
		font-size: 16px;
		line-height: 1.6;
		margin-top: 20px;
	}
.faq + .faq {
	margin-top: 55px;
}
@media screen and (max-width: 750px) {
	.faq {
		padding: 0;
	}
		.faq__q {
			font-size: 14px;
			padding-left: 1.5em;
		}

		.faq__a {
			font-size: 14px;
			line-height: 1.6;
			margin-top: 15px;
		}
	.faq + .faq {
		margin-top: 35px;
	}
}

/* 診断 */

.special {
	background: rgba(0,0,0,0.65);
	bottom: -150px;
	left: 0;
	padding: 15px;
	position: fixed;
	text-align: center;
	transition: all 0.3s ease;
	width: 100%;
	z-index: 100;
}
	.special__inner {
		background: #fff;
		display: inline-block;
		position: relative;
	}
	.special a {}
	.special a:hover {
		opacity: 1;
	}
		.special a:hover img {
			opacity: 0.7;
		}
		.special__close {
			align-items: center;
			background-color: #fff;
			border-radius: 20px;
			cursor: pointer;
			display: block;
			font-size: 14px;
			height: 26px;
			line-height: 20;
			overflow: hidden;
			position: absolute;
			right: -10px;
			text-indent: 100%;
			top: -10px;
			white-space: nowrap;
			width: 26px;
		}
		.special__close::before,
		.special__close::after {
			background-color: black;
			content: '';
			height: 2px;
			left: 4px;
			position: absolute;
			top: 12px;
			width: 18px;
		}
		.special__close::before {
			transform: rotate(45deg);
		}
		.special__close::after {
			transform: rotate(-45deg);
		}
.special.fixed {
	bottom: 0;
	position: fixed;
}
#page-top.bn-open {
	bottom: 160px;
}
@media screen and (max-width: 750px) {
	.special {
		max-height: 120px;
		padding: 10px;
	}
		.special a img {
			max-height: 100px;
			width: auto;
		}
		.special__close {
			border-radius: 20px;
			height: 20px;
			line-height: 20;
			right: -6px;
			top: -6px;
			width: 20px;
		}
		.special__close::before,
		.special__close::after {
			background-color: black;
			content: '';
			height: 2px;
			left: 3px;
			position: absolute;
			top: 9px;
			width: 14px;
		}
		.special__close::before {
			transform: rotate(45deg);
		}
		.special__close::after {
			transform: rotate(-45deg);
		}
	#page-top.bn-open {
		bottom: 130px;
	}
}
@media screen and (max-width: 318px) {
	#page-top.bn-open {
		bottom: 10px;
		margin-bottom: 37.966%;
	}
}


/* slick スライダー */

#lipovitan .slick-prev {
	left: 6px;
}
#lipovitan .slick-next {
	right: 4px;
}
#lipovitan .slick-dots {
	bottom: 0;
}
	#lipovitan .slick-dots button {
		background: #dcdcdc;
		border-radius: 12px;
		height: 12px;
		width: 12px;
	}
	#lipovitan .slick-dots .slick-active button,
	#lipovitan .slick-dots button:hover  {
		background: #9b9b9b !important;
		border-radius: 12px;
		height: 12px;
		width: 12px;
	}

@media screen and (max-width: 750px) {
	#lipovitan .slick-list {
		overflow: visible;
	}
	#lipovitan .slick-prev {
		left: 0;
	}
	#lipovitan .slick-next {
		right: 0;
	}
	#lipovitan .slick-dots {
		bottom: 0;
	}
}


/* モーダル */

#lipovitan .modal-header {
	display: flex;
	min-height: 60px;
	width:100%;
	align-items: center;
	justify-content:space-between;
	
	padding: 15px 5px;
	text-align: center;
	font-weight: bold;
	color:#000;
	font-size:18px;
	line-height: 1;
	width:100%;
	background:#ebebeb;
	border-radius: 5px 5px 0 0;
	border-bottom: 1px solid #eeeeee;
}
	#lipovitan .modal-header__ttl {
		margin: 0 auto;
		padding-left: 20px; /* 閉じるボタン分 */
		text-align: center;
	}
#lipovitan .modal-content {}
#lipovitan .modal_body {}
	#lipovitan .modal-body__link {
		margin-top: 20px;
	}
		#lipovitan .modal-body__link span {
			text-align: center;
		}
#lipovitan .modal-footer {
	display: none;
}
@media screen and (max-width: 750px) {
	#lipovitan .modal-header {
		background: #eee;
	}
		#lipovitan .modal-header__ttl {
			text-align: center;
			font-size: 16px;
		}
		#lipovitan .modal-header__close{
			margin-right: 8px;
		}
			#lipovitan .modal-header__close a {
				display: block;
				width: 30px;
				height: 30px;
				background: url(/simages/images/common/icon_close_bl.svg) 50% 50% no-repeat;
				background-size: 16px 16px;
			}
	#lipovitan .modal-content {
		margin: 20px;
	}
		#lipovitan .modal-body__inner {
			padding: 20px;
		}
	#lipovitan .modal-footer {
		display: block;
	}
		#lipovitan .modal-footer__close a {
			background: none;
			margin-top: -20px;
		}
}


/* モーダル内詳細 */

#lipovitan .tbl-type01,
#lipovitan .tbl-type01-plus {
	line-height: 1.7;
	margin: 0;
}
@media screen and (max-width: 750px) {
	#lipovitan .tbl-type01,
	#lipovitan .tbl-type01-plus {
		line-height: 1.5;
	}
		#lipovitan .tbl-type01 th,
		#lipovitan .tbl-type01 td,
		#lipovitan .tbl-type01-plus th,
		#lipovitan .tbl-type01-plus td {
			font-size: 12px;
			padding: 15px 10px;
		}
		#lipovitan .tbl-type01 th,
		#lipovitan .tbl-type01-plus th {
			width: 5em;
		}
}