@charset "UTF-8";

/* ▼▼▼ トップ
======================================================*/
.container {
	width: 100%;
	max-width: 1240px;
	padding: 0 20px;
	margin: 0 auto;
	position: relative;
}

.container.hero{
	width: 50%;
	margin: 0 0;
}
/* ▼ スライダー
----------------------------------------*/
#mainVisual {
	width: 100%;
	font-size: 0;
	position: relative;
	overflow: hidden;
	}
	.slider{
		display: none;
	}
	.slider.slick-initialized{
		display: block;
	}
	/* dotsカスタム */
	#mainVisual .slick-dots{
		display: flex;
		justify-content: flex-end;
		width: calc(100% - 170px);
		bottom: -35px!important;
	}
	#mainVisual .slick-dots li{
		margin: 0;
	}
	#mainVisual .slick-dots li button {
		border: 0;
		background: transparent;
		display: block;
		height: 10px;
		width: 10px;
		outline: none;
		line-height: 0px;
		font-size: 0px;
		color: transparent;
		padding: 10px;
		cursor: pointer;
		position: relative;
	}
	#mainVisual .slick-dots li button:before {
		position: absolute;
		top: 0;
		left: 0;
		content: "";
		font-size: 0!important;
		opacity: 1!important;
		background: #f0f0f0;
		border-radius: 50%;
		width: 10px!important;
		height: 10px!important;
		line-height: 10px!important;
		text-align: center;
		-webkit-font-smoothing: antialiased;
	}
	#mainVisual .slick-dots li.slick-active button:before{
		content: "";
		background: #000;
	}
	.mainVisual_txt{
		color: #fff;
		position:absolute;
	  top:50%;
	  left:50%;
	  transform:translate(-50%,-50%);
		width: 100%;
		text-align:center;

	}
	.mainVisual_txt p:nth-child(1){
		font-size: 18px;
		/* line-height: 1.9; */
		font-weight: 500;
		letter-spacing: 0.2em;
		text-align:center;
	}
	.mainVisual_txt p:nth-child(1) span.small{
		display: inline-block;
		font-size: 18px;
	}
	.mainVisual_txt p:nth-child(2){
		/* margin-bottom: 10px; */
		font-size: 18px;
		text-align:center;
	}
	.mainVisual_txt p:nth-child(2) span.boder{
		position: relative;
	}
	.mainVisual_txt p:nth-child(2) span.boder::after{
		content: "";
		display: inline-block;
		width: 30px;
		height: 1px;
		background: #fff;
		margin: auto;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 13px;
	}
	.mainVisual_txt p:nth-child(3){
		font-size: 18px;
		text-align:center;
	}

/* ▼ menu
----------------------------------------*/
.top_menu_list h2{
	margin-bottom: 30px;
	text-align: center;
	}
	/* flex_box共通 */
	.top_menu_list .flex_box{
		margin-bottom: 20px;
		position: relative;
	}
	.top_menu_list .flex_box p.photo{
		flex: 1;
	}
	.top_menu_list .flex_box .txt{
		display: flex;
		align-items: center;
		flex: 1;
		background: #f7f7f7;
	}
	.top_menu_list .flex_box .txt div{
		padding: 0 5%;
	}
	.top_menu_list .flex_box .txt div.news{
		padding: 30px 5%;
	}
	.top_menu_list .flex_box .txt h3{
		font-size: 32px;
		font-weight: bold;
	}
	.top_menu_list .flex_box .txt span{
		display: block;
		font-size: 20px;
		font-weight: bold;
	}
	.top_menu_list .flex_box .txt p{
		font-size: 18px;
	}
	.top_menu_list .flex_box .txt p:not(:last-child){
		margin-bottom: 20px;
	}
	/* 注射・点滴 */
	.top_menu_list .drip_injection::after{
		content: "";
		width: 55%;
		height: 100%;
		background: #f7f7f7;
		position: absolute;
		top: 0;
		right: -30vw;
		z-index: -1;
	}
	/* ドクター処方 */
	.top_menu_list .prescription{
		flex-direction: row-reverse;
	}
	.top_menu_list .prescription::after{
		content: "";
		width: 55%;
		height: 100%;
		background: #f7f7f7;
		position: absolute;
		top: 0;
		left: -30vw;
		z-index: -1;
	}
	.top_menu_list .flex_box02{
		margin-bottom: 90px;
	}
	.flex_box02 > div:nth-child(1){
		margin-right: 20px;
	}
	.flex_box02 .txt{
		justify-content: center;
	}
	.top_menu_list .flex_box02 .txt div{
		padding: 20px 0 30px;
	}
	.top_menu_list .flex_box02 .txt div h3,
	.top_menu_list .flex_box02 .txt div p{
		text-align: center;
	}
	/* オンラインストア */
	.online_store{
		background: url(../img/top/online_bg.jpg)no-repeat center/cover;
	}
	.online_store a{
		width: 100%;
		height: 295px;
		padding: 5%;
		color: #fff;
	}
	.online_store h3{
		margin-bottom: 20px;
		font-size: 38px;
	}
	/* 準備中 */
	.preparation{
		position: relative;
	}
	.preparation::before,
	.preparation::after{
		content: "";
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
		position: absolute;
		top: 0;
		z-index: 9;
	}
	.preparation::before{
		background: rgba(0,0,0,.6)
	}
	.preparation::after{
		content: "公開準備中";
		color: #fff;
		font-size: 38px;
	}



/* ▼▼▼ 480px〜768px
======================================================*/
@media screen and (max-width: 768px) {
	.container.hero{
		width: 100%;
		margin: 0 auto;
	}
	/* ▼ スライダー
	----------------------------------------*/
	#mainVisual{
		margin-top: 72px;
	}
		/* dotsカスタム */
		#mainVisual .slick-dots{
			width: calc(100% - 15px);
			bottom: -26px!important;
		}
		#mainVisual .slick-dots li{
			width: 17px;
			height: 17px;
		}
		#mainVisual .slick-dots li button {
			padding: 5px;
		}
		#mainVisual .slick-dots li button:before {
			width: 8px!important;
			height: 8px!important;
		}
		#mainVisual .slick-dots li.slick-active button:before{
			width: 8px!important;
			height: 8px!important;
		}
		.mainVisual_txt{
			width: 325px;
			top: 47%;
			text-shadow: 1px 1px 6px rgb(0 0 0 / 50%);
		}
		.mainVisual_txt p:nth-child(1){
			font-size: 11px;
		}
		.mainVisual_txt p:nth-child(1) span.small{
			font-size: 11px;
		}
		.mainVisual_txt p:nth-child(2){
			margin-bottom: 5px;
			font-size:11px;
		}
		.mainVisual_txt p:nth-child(2) span.boder::after{
			width: 20px;
		}
		.mainVisual_txt p:nth-child(3){
			font-size: 11px;
		}

	/* ▼ menu
	----------------------------------------*/
	.top_menu_list h2{
			width: 70px;
			margin: 0 auto 25px;
		}
		/* flex_box共通 */
		.top_menu_list .flex_box{
			margin-bottom: 15px;
		}
		.top_menu_list .flex_box .txt div{
			padding: 15px 15px 20px;
		}
		.top_menu_list .flex_box .txt h3{
			margin-bottom: 7px;
			font-size: 20px;
			line-height: 1.4;
		}
		.top_menu_list .flex_box .txt span{
			font-size: 14px;
		}
		.top_menu_list .flex_box .txt p{
			font-size: 14px;
		}
		.top_menu_list .flex_box .txt p:not(:last-child){
			margin-bottom: 15px;
		}
		.top_menu_list .flex_box .txt p img{
			max-width: 130px;
		}
		/* 注射・点滴 */
		.top_menu_list .drip_injection::after{
			display: none;
		}
		/* ドクター処方 */
		.top_menu_list .prescription{
			flex-direction: row;
		}
		.top_menu_list .prescription::after{
			display: none;
		}
		.top_menu_list .flex_box02{
			margin-bottom: 40px;
		}
		.flex_box02 > div:nth-child(1){
			margin: 0 auto 15px;
		}
		.top_menu_list .flex_box02 .txt div{
			padding: 15px;
		}
		.top_menu_list .flex_box02 .txt div h3,
		.top_menu_list .flex_box02 .txt div p{
			text-align: left;
		}
		/* オンラインストア */
		.online_store a{
			height: 170px;
			padding: 9% 5%;
		}
		.online_store h3{
			margin-bottom: 4px;
			font-size: 22px;
		}
		/* 準備中 */
		.preparation::after{
			font-size: 19px;
		}
}