@charset "utf-8";



/* LP - 定期購入 2022.04.28
----------------------------------------------- */

div#container { padding: 0 !important; }
#lp-teiki { width: 640px; margin: 0 auto; }

@media screen and (max-width: 640px) {
	#wrapper { margin: 0 !important; }
	#lp-teiki { width: 100%; }
	#lp-teiki img { width: 100%; height: auto; }
}

/* 商品 */
#lp-teiki > .product {
	width: 100%;
	padding: 10px;
	box-sizing: border-box;
	display: none;
}
#lp-teiki > .product.pr-block {
	width: 100%;
	padding: 10px;
	box-sizing: border-box;
	display: block;
  }
#lp-teiki > .product > .inner {
	position: relative;
	width: 100%;
	padding: 25px;
	margin-top: 20px;
	border: 1px solid #ccc;
	border-radius: 15px;
	box-sizing: border-box;
}
#lp-teiki > .product > .inner::before {
	position: absolute;
	content: url('../img/flag.png');
	top: -8px;
	left: 30px;
}
#lp-teiki > .product > .inner50::before {
	position: absolute;
	content: url('https://store.wassershop.jp/upload/lp-teiki/images/flag50.png');
	top: -8px;
	left: 30px;
}
#lp-teiki > .product > .inner img,
#lp-teiki > .product img { width: 100%; height: auto; }
#lp-teiki > .product > .inner p { margin: 15px 0 0; }

@media screen and (max-width: 640px) {
	#lp-teiki > .product .inner::before {
		content: '';
		top: -9px;
		left: 18px;
		width: 65px;
		height: 60px;
		background: url('../img/flag.png');
		background-size: contain;
		background-repeat: no-repeat;
	}
    #lp-teiki > .product .inner50::before {
		content: '';
		top: -9px;
		left: 18px;
		width: 65px;
		height: 60px;
		background: url('https://store.wassershop.jp/upload/lp-teiki/images/flag50.png');
		background-size: contain;
		background-repeat: no-repeat;
	}

}

/* 定期購入注意 */
#lp-teiki > .att {
	width: 100%;
	margin: 30px 0;
	padding: 0 20px;
	box-sizing: border-box;
}
#lp-teiki > .att > ul {
	padding: 0 0 0 25px;
	list-style-position: outside;
}
#lp-teiki > .att > ul li {
	font-size: 1rem;
	color: #333;
	list-style-type: circle;
}


/* IG */
#lp-teiki > .ig {
	width: 100%;
	padding: 30px;
	text-align: center;
	background-color: #f5f5ee;
	box-sizing: border-box;
}
#lp-teiki > .ig > p {
	display: inline-block;
	font-family: 'Noto Serif JP', serif;
	height: 50px;
	padding-left: 60px;
	line-height: 50px;
	text-align: center;
	font-size: 1.3rem;
	background: url('https://store.wassershop.jp/upload/lp-teiki/images/profile.jpg') left center no-repeat;
}

/* youtube short */
.youtube {
	position: relative;
	width: 100%;
	margin: 20px 0;
  	padding-bottom: 56.25%;
	background-color: #ccc;
}
.youtube iframe {
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
}


/* FOOTER
----------------------------------------------- */
#footer {
	font-family: 'Noto Serif JP', serif;
	width: 100%;
	padding: 0 20px;
	box-sizing: border-box;
}
#footer > .inner {
	width: 640px;
	margin: 60px auto;
}
#footer > .inner p { text-align: center; }
#footer > .inner > nav ul.footer-nav { text-align: center; margin-bottom: 20px; letter-spacing: -.4em; }
#footer > .inner > nav ul.footer-nav li { display: inline; letter-spacing: normal; }
#footer > .inner > nav ul.footer-nav li a { color: #22116e; text-decoration: none; }
#footer > .inner small p { color: #333; }


/* sepalater */
#footer > .inner > nav ul.footer-nav li a::after {
	content: "|";
	padding: 0 15px;
	color: #ccc;
}
#footer > .inner > nav ul.footer-nav li:last-child a::after { content: none; }

@media screen and (max-width: 640px) {
	#footer > .inner { width: 100%; }
	#footer > .inner > nav ul.footer-nav li { display: block; }
	#footer > .inner > nav ul.footer-nav li a::after { content: none; }
}

/* バッサ相談室 */
#footer > .inner .sodan {
	width: 100%;
	padding: 30px;
	margin: 20px auto;
	color: #3781c0;
	border: 1px solid #0471ce;
	box-sizing: border-box;
}
#footer > .inner .sodan > h3 {
	margin-bottom: 15px;
	text-align: center;
	font-size: 20px;
	color: #3781c0;
}
#footer > .inner .sodan p { line-height: 1; }
#footer > .inner .sodan p a {
	font-size: 25px;
	color: #22116e;
	text-decoration: none;
}
@media screen and (max-width: 640px) {
	#footer > .inner .sodan { width: 100%; }
}

/* フォーム部分
----------------------------------------------- */
#lpshoppingcolumn {
	width: 640px;
	margin: 0 auto;
	padding: 40px 20px;
	background-color: #f6f3f2;
	box-sizing: border-box;
}
@media screen and (max-width: 640px) {
	#lpshoppingcolumn { width: 100%; }
}

#lpshoppingcolumn h2 {
	margin-bottom: 25px;
	font-size: 2rem;
	text-align: center;
}
#lpshoppingcolumn .notice { margin: 0; padding-top: 5px; font-size: 80%; line-height: 1.7; }

/* product list */
table.list-select-product {}
@media screen and (max-width: 640px) {
	table.list-select-product th,
	table.list-select-product td { display: block; width: 100%; }
}


/* register */
.register_btn,
.deliv_btn {
	width: 100%;
	padding: 20px;
	color: #82b1d0;
	text-align: center;
	font-weight: bold;
	border-radius: 10px;
	background-color: #f5fbfd;
	border: 3px solid #d4f2fb;
	box-sizing: border-box;
}
#lp-login {
	width: 100%;
	margin: 20px 0;
	padding: 20px;
	border-radius: 10px;
	background-color: #f5fbfd;
	border: 3px solid #d4f2fb;
	box-sizing: border-box;
}

@media screen and (max-width: 640px) {
	#lp-login table th,
	#lp-login table td { display: block; width: 100%; }
}

/* table */
#lpshoppingcolumn table.doregister {
	width: 100%;
	margin-top: 30px;
	border-collapse: collapse;
}
#lpshoppingcolumn table.doregister th,
#lpshoppingcolumn table.doregister td { width: 100%; display: block; }

#lpshoppingcolumn table.doregister th { padding: 15px 0 0; }
#lpshoppingcolumn table.doregister td { padding: 0 0 15px; border-bottom: 1px solid #ccc; }


/* お名前入力フォーム　 */
ul.form-list-name {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
}
ul.form-list-name li:nth-child(1),
ul.form-list-name li:nth-child(3) { width: 45px; }
ul.form-list-name li:nth-child(2) { width: 245px; margin: 0 20px 0 0; }
ul.form-list-name li:nth-child(4) { width: 245px; }

@media screen and (max-width: 640px) {
	ul.form-list-name li:nth-child(1) { width: 13%; margin: 0 0 10px 0;}
	ul.form-list-name li:nth-child(3) { width: 13%; }
	ul.form-list-name li:nth-child(2) { width: 87%; margin: 0 0 10px 0; }
	ul.form-list-name li:nth-child(4) { width: 87%; }
}

/* input */
#lpshoppingcolumn input[type='button'] {
	width: 100%;
	padding: 30px;
    margin: 30px 0;
    font-size: 1.4rem;
    font-weight: bold;
    color: #fff;
    border-radius: 50px !important;
    border: none;
    background-color: #fb1f8e;
    -webkit-appearance: none;
}
@media screen and (max-width: 640px) {
	#lpshoppingcolumn input[type='button'] {
		font-size: 1.2rem;
	}
}


#lpshoppingcolumn .w30,
#lpshoppingcolumn .w40,
#lpshoppingcolumn .w100 {
	padding: 23px 15px;
    margin: 0;
    font-size: 1rem;
    line-height: 1.1;
    border-radius: 5px !important;
    background-color: #fff;
    border: none;
	box-sizing: border-box;
}

#lpshoppingcolumn .w30  { width: 30%;  }
#lpshoppingcolumn .w40  { width: 40%;  }
#lpshoppingcolumn .w100 { width: 100%; }

@media screen and (max-width: 640px) {
	#lpshoppingcolumn .w30,
	#lpshoppingcolumn .w40,
	#lpshoppingcolumn .w100 { width: 100%; }
}


/* button effect */
.bururi { animation: bururi 1s infinite; }
@keyframes bururi {
    50% { transform: scale(1, 1); }
    52% { transform: scale(0.98, 0.95) }
    54% { transform: scale(1, 1); }
    56% { transform: scale(0.98, 0.95) }
    58% { transform: scale(1, 1); }
    60% { transform: scale(0.98, 0.95) }
}

/* select */
#lpshoppingcolumn select {
	height: 40px !important;
	padding: 5px;
	/*width: 80% !important;*/
	float: none !important;
	border: none !important;
	border-radius: 5px !important;
}

@media screen and (max-width: 640px) {
	#lpshoppingcolumn select {
		width: 100%;
		height: 50px !important;
		padding: 5px;
		box-sizing: border-box;
		color: #000;
		background-color: #fff;
	}
}

#lpshoppingcolumn ul.lp-birthday {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-items: center;
}
#lpshoppingcolumn ul.lp-birthday li:nth-child(odd)  { width: 26%; }
#lpshoppingcolumn ul.lp-birthday li:nth-child(even) { width: 5%; text-align: center; }

.select-birth { width: 80%; }
.custom-select3 { display: inline; }


/* text color */
#lpshoppingcolumn table.doregister h3,
#payment_area h3,
.delivery_calendar h3,
.deliv_time_area h3 { font-size: 1.2rem; color: #fb1c8d; }

.regular_deliv_day { color: #212382; font-weight: bold; }

li.lp-error { color: #fb1c8d; }


/* お届け間隔 */
#cycle_type1_form,
#cycle_type3_form {
	margin: 10px;
	padding: 15px 20px;
	background-color: #ede8e6;
	border-radius: 10px;
}


/* GMO payment クレジットカード */
#gmopg_credit_block {
	padding: 20px 0;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}
#gmopg_credit_block table { width: 100%; }
#gmopg_credit_block table th,
#gmopg_credit_block table td { display: block; width: 100%; }

input#gmopg_token_card_number,
input#gmopg_token_card_name {
	width: 100%;
	padding: 23px 15px;
    margin: 0;
    font-size: 1rem;
    line-height: 1.1;
    border-radius: 5px !important;
    background-color: #fff;
    border: none;
	box-sizing: border-box;
}
input.gmopg_form_input {
	/*width: 100%;*/
	padding: 23px 15px;
    margin: 0;
    font-size: 1rem;
    line-height: 1.1;
    border-radius: 5px !important;
    background-color: #fff;
    border: none;
	box-sizing: border-box;
}
.gmopg_credit input[type='text'] {
	padding: 23px 15px;
    margin: 0;
    font-size: 1rem;
    line-height: 1.1;
    border-radius: 5px !important;
    background-color: #fff;
    border: none;
	box-sizing: border-box;
}

.attention1 { padding-top: 10px; font-size: 80%; line-height: 1.7; }

.custom-select { display: inline; }
select#gmopg_token_card_expires_month,
select#gmopg_token_card_expires_year {
	width: 40%;
	height: 40px !important;
	padding: 5px;
	display: inline;
	border-none;
}

/* ログインボタン */
.sec-btn {
	width: 50%;
	margin: 15px auto 0 auto;
}
.sec-btn button {
	width: 100%;
	padding: 15px 10px;
	color: #fff;
	font-weight: bold;
	border-radius: 50px;
	border: none;
	background-color: #53cbf2;
}
@media screen and (max-width: 640px) {
	.sec-btn { width: 100%; }
}
/* update 12/03/2022 */
.custom-doctor {
	position: relative;
  }

  .infor-doctor {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	background: #F4FCFF;
	margin: 5px 0 0 ;
	padding: 20px 20px 70px;
  }
  @media(max-width: 640px){
	.infor-doctor {
	  justify-content: center;
	  flex-wrap: wrap;
	}
	.infor-doctor img {
	  width: 200px !important;
	  height: 200px !important;
	}
  }
  .infor-doctor img {
	width: 170px;
	height: 170px;
  }
  .custom-doctor__img {
	position: absolute;
	bottom: 0;
	left: -3px;
	width: 100%;
  }
  @media(max-width: 640px){
	.custom-doctor__img {
	  position: absolute;
	  bottom: 0;
	  left: -2px;
	  width: 100%;
	}
  }
  .infor-doctor .detail h4 {
	margin: 10px 0;
  }
  .infor-doctor .detail .list {
	display: flex;
	gap: 10px;
  }
  .infor-doctor .detail .list .left{
	width: 70px;
	font-weight: 600;
  }
  .infor-doctor .detail .list .right {
	width: 355px;
	font-weight: 600;
  }
  @media(max-width: 640px){
	.infor-doctor .detail .list .left{
	  flex: 1;
	  width: 100%;
	}
	.infor-doctor .detail .list .right{
	  flex: 3;
	  width: 100%;
	}
  }

  .main-buy {
	position: relative;
	width: 100%;
	height: 100%;
  }
  .fixed-btn {
	position: fixed;
	right: 80px;
	bottom: 17px;
    width: 220px;
    height: 60px;
	background: linear-gradient(to top, #22116E 0%, #22116E 50%, #200595 50%, #200595 100%);
	color: #fff;
	font-size: 18px;
	font-weight: 500;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 5px;
	font-family: 'Noto Serif JP', serif;
	z-index: 99;
  }
  @media(max-width: 640px){
	.fixed-btn {
	  width: calc(100% - 30px);
	  left: 15px;
	  bottom: 0;
	  right: 15px;
	  height: 50px;
	}
	#page_top {
		bottom: 55px;
	}
  }

  .special {
	text-align: center;
	padding-top: 30px;
  }
  .special .list {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	margin-top: 30px;
  }
  @media(max-width: 640px){
	.special .list{
	  justify-content: center;
	  flex-wrap: wrap;
	  gap: 40px;
	}
  }
  .special .list .box {
	border: 1px solid #eee;
	border-radius: 20px;
	padding: 20px;
	width: 200px;
	text-align: left;
	position: relative;
  }
  .special .list .box .sub-header {
	position: absolute;
	top: -18px;
	left: 50%;
	transform: translate(-50%, 0);
	background: #ddd;
	padding: 5px 10px;
  }
  .special .list .box .title {
	padding: 20px 0;
	height: 40px;
  }
  .special .list .box .content .po-img {
	position: absolute;
	right: 0;
	bottom: 28px;
	width: auto !important;
  }