/* =========================================================

	マンスリーキャンペーン /campaign/coupon.html

	@create		: 2017/6/19
	@version	: 2.00
	@author		: K.Sekioka of HEVIZ Co.,Ltd.

============================================================ */



@import url(../styles2017/common_pc.css);
@import url(../styles2017/common_sp.css) only screen and (max-width: 760px);



	/* -----------------------------------------------------
		Base
	-------------------------------------------------------- */

	#couponPage {
		display			: block;
		position		: relative;
		margin			: 0 0 0 10px;
		padding			: 0 0 80px;

		color			: #231815;
		font-size		: 11pt;
		font-family		: "游明朝","YuMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif;
		font-weight		: 500;
		line-height		: 1.5;

		background-color		: #ffffff;
		background-image		: url(img/coupon/bg.jpg);
		background-position		: center top;
		background-repeat		: no-repeat;

		zoom			: 1;
	}
	#couponPage:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }

	#couponPage strong {
		color			: #ad1c3d;
	}

	#couponPage ul,
	#couponPage ul li,
	#couponPage dl,
	#couponPage dl dt,
	#couponPage dl dd {
		margin			: 0;
		padding			: 0;
		list-style-type	: none;
	}






	#couponPage > header {
		padding			: 50px 0 70px 50px;
	}

	#couponPage > header h2 {
		margin			: 0;
		padding			: 0;
		font-size		: 14pt;
		font-weight		: 500;
	}

	#couponPage > header h1 {
		margin			: 40px 0 0 0;
	}



	/* -----------------------------------------------------
		NEXT
	-------------------------------------------------------- */

	#couponPage > .next {
		display			: block;
		position		: relative;
		width			: 841px;
		margin			: 0 auto;
		padding			: 0;
	}

	#couponPage > .next dl dt {
		color			: #ad1c3d;
		margin			: 0 10px;
		padding			: 5px 0 5px 25px;
		background		: url(img/coupon/sankaku.png) left center no-repeat;
		font-size		: 16pt;
	}

	#couponPage > .next dl dd {
		display			: block;
		position		: relative;
		margin			: 0;
		padding			: 0;
		overflow		: hidden;
		background		: url(img/coupon/ribbon.png) center top no-repeat;
		line-height		: 48px;
		color			: #ffffff;
		font-size		: 12pt;
		font-weight		: 500;
		letter-spacing	: 3px;
		text-align		: center;
		vertical-align	: bottom;
	}

	#couponPage > .next dl dd ul {
		display			: block;
		position		: relative;
		float			: left;
		left			: 50%;
		margin			: 0;
		padding			: 0;
		zoom			: 1;
	}
	#couponPage > .next dl dd ul:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }

	#couponPage > .next dl dd ul li {
		display			: block;
		position		: relative;
		float			: left;
		left			: -50%;
		margin			: 0;
		padding			: 0 35px 0 25px;
		background		: url(img/coupon/slash.png) right 7px no-repeat;
	}
	#couponPage > .next dl dd ul li:last-child {
		padding			: 0 30px;
		background-image	: none;
	}

	#couponPage > .next dl dd strong {
		color			: #ffffff;
		font-size		: 22pt;
		font-weight		: 300;
	}



	/* -----------------------------------------------------
		article common
	-------------------------------------------------------- */

	#couponPage > article {
		display				: block;
		position			: relative;
		margin				: 50px 20px 0 20px;
		padding				: 30px 0 30px 30px;
		background-color	: #f8f2ec;
		background-image	: url(img/coupon/dot.png);
		background-position	: center top;
		background-repeat	: repeat-x;

		border-radius		: 20px;
		zoom				: 1;
	}
	#couponPage > article:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }

	#couponPage > article > header {
		margin				: 0;
		padding				: 0;
	}


	#couponPage > article > header h1 {
		margin				: 0;
		padding				: 10px 0 10px 55px;
		color				: #ad1c3d;
		font-weight			: 700;
		font-size			: 16pt;
		background			: url(img/coupon/heart.png) left center no-repeat;
		line-height			: 1;
	}



	/* 「初めてご予約頂く患者様」へ ------------------------ */


	#couponPage > article#first .tokuten {
		display				: block;
		margin				: 30px 0 0 0;
		padding				: 0;
	}

	#couponPage > article#first .tokuten ul {
		margin				: 0;
		padding				: 0;
		zoom				: 1;
	}
	#couponPage > article#first .tokuten ul:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }


	#couponPage > article#first .tokuten ul li {
		float				: left;
		margin				: 0 3px 0 0;
		padding				: 0 27px 0 0;
		background			: url(img/coupon/plus.png) right center no-repeat;
	}
	#couponPage > article#first .tokuten ul li:last-child {
		padding				: 0;
		background			: none;
	}

	#couponPage > article#first .tokuten ul li dl {
		display				: block;
		position			: relative;
		width				: 262px;
		height				: 263px;
		background			: url(img/coupon/circle.png) center center no-repeat;
		box-sizing			: border-box;
	}

	#couponPage > article#first .tokuten ul li dl dt {
		text-align			: center;
		font-size			: 16pt;
		line-height			: 35px;
		padding				: 70px 0 0 0;
	}

	#couponPage > article#first .tokuten ul li dl dd {
		text-align			: center;
		font-size			: 10pt;
		line-height			: 1.5;
		padding				: 10px 0 0 0;
	}



	#couponPage > article#first .tokuten ul li.tokuten02 dl dt,
	#couponPage > article#first .tokuten ul li.tokuten03 dl dt {
		padding				: 50px 0 0 0;
	}
	#couponPage > article#first .tokuten ul li.tokuten03 dl dd a {
		display				: block;
		margin				: 0 55px;
		height				: 35px;
		line-height			: 35px;
		color				: #ffffff;
		text-decoration		: none;
		text-align			: center;
		background			: #cf9a6e;
		background			: linear-gradient(to right, #e4b38b 0%,#cf9a6e 100%);
	}

	
	#couponPage > article#first > footer {
		display				: block;
		position			: relative;
		margin				: 20px 30px 0 0;
		padding				: 15px 35px;
		background			: #fcfaf7;
		text-align			: center;
		font-size			: 16pt;
		line-height			: 1.5;
	}

	#couponPage > article#first > footer span {
		font-size			: 14pt;
		font-weight			: 500;
	}



	/* いつもお越しいただいている患者様 ---------- */

	#couponPage > article#second {
		margin				: 10px 20px 0 20px;
	}

	#couponPage > article#second .tokuten {
		display				: block;
		margin				: 30px 30px 0 0;
		padding				: 20px 35px;
		background			: #ffffff;
		border-bottom		: 2px solid #ad1c3d;
		border-right		: 2px solid #ad1c3d;
		text-align			: center;
		font-size			: 16pt;
		line-height			: 1.5;
	}


	#couponPage > article#second .tokuten dl dd {
		text-align			: center;
		font-size			: 10pt;
		line-height			: 1.5;
		padding				: 10px 0 0 0;
	}


	#couponPage > footer {
		display				: block;
		position			: relative;
		margin				: 50px 50px 0 50px;
		padding				: 0;
		zoom				: 1;
	}
	#couponPage > footer:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }


	#couponPage > footer p {
		margin				: 0;
		padding				: 0;
		text-align			: center;
		font-size			: 16pt;
		line-height			: 2;
	}

	#couponPage > footer .more {
		margin				: 50px 0 0 0;
	}

	#couponPage > footer .more a {
		display				: block;
		height				: 100px;
		line-height			: 100px;

		font-size			: 14pt;
		text-align			: center;
		color				: #ffffff;
		text-decoration		: none;

		background			: #ad1c3d;
		background			: linear-gradient(to right, #c83c5c 0%,#ad1c3d 100%);
	}


	#couponPage > footer .more a:hover {
		color				: #ffffff;
		background			: #e26380;
		text-decoration		: none;
	}



/* ---------------------------------------------------------
	レスポンシブ
------------------------------------------------------------ */



	@media (max-width: 767px) {


		#couponPage img {
			width			: auto;
			max-width		: 100%;
			vertical-align	: bottom;
		}



		/* Base	--------------------------------- */

		#couponPage {
			margin			: 0;
			padding			: 0 0 50px 0;
			font-size		: 10pt;

			background-position		: left top;
			background-repeat		: no-repeat;
		}


		#couponPage > header {
			padding			: 40px 5% 0;
		}

		#couponPage > header h2 {
			font-size		: 12pt;
		}

		#couponPage > header h1 {
			margin			: 40px 0% 0;
		}



	/* -----------------------------------------------------
		NEXT
	-------------------------------------------------------- */

		#couponPage > .next {
			width			: auto;
			margin			: 50px 5% 0;
		}

		#couponPage > .next dl dt {
			margin			: 0;
			font-size		: 12pt;
		}

		#couponPage > .next dl dd {
			padding			: 5px;
			border-radius	: 5px;
			background		: #ad1c3d;
			line-height		: 1;
			overflow		: visible;
		}

		#couponPage > .next dl dd ul {
			float			: none;
			left			: auto;
		}

		#couponPage > .next dl dd ul li,
		#couponPage > .next dl dd ul li:last-child {
			float			: none;
			left			: auto;
			padding			: 10px 0;
			background		: transparent;
			text-align		: center;
			border-top		: 2px dotted #ffffff;
		}
		#couponPage > .next dl dd ul li:first-child {
			border-top		: 0;
		}



		/* article common ----------------------- */

		#couponPage > article {
			margin				: 50px 0 0 0;
			padding				: 30px 5%;
			border-radius		:  0;
		}

		#couponPage > article > header h1 {
			padding				: 0;
			font-size			: 12pt;
			background			: transparent;
			line-height			: 1.5;
			text-align			: center;
		}



		/* 「初めてご予約頂く患者様」へ --------- */


		#couponPage > article#first .tokuten {
			display				: block;
			margin				: 30px 0 0 0;
			padding				: 0;
		}

		#couponPage > article#first .tokuten ul li,
		#couponPage > article#first .tokuten ul li:last-child {
			float				: none;
			margin				: 20px 0 0;
			padding				: 0;
			background			: none;
		}

		#couponPage > article#first .tokuten ul li dl {
			width				: auto;
			height				: auto;
			margin				: 0 auto;
			padding				: 10px;
			background			: #ffffff;
			border-bottom		: 2px solid #ad1c3d;
			border-right		: 2px solid #ad1c3d;
		}


		#couponPage > article#first .tokuten ul li dl dt,
		#couponPage > article#first .tokuten ul li.tokuten02 dl dt,
		#couponPage > article#first .tokuten ul li.tokuten03 dl dt {
			line-height			: 1.5;
			padding				: 0;
		}

		#couponPage > article#first .tokuten ul li dl dd {
			margin				: 10px 0 0 0;
			padding				: 0;
			font-size			: 10pt;
		}

		#couponPage > article#first .tokuten ul li.tokuten03 dl dd a {
			margin				: 0;
		}



		#couponPage > article#first > footer {
			display				: block;
			position			: relative;
			margin				: 30px 0 0;
			padding				: 10pt;
			text-align			: center;
			font-size			: 12pt;
		}

/*
		#couponPage > article#first > footer br {
			display				: none;
		}
*/

		#couponPage > article#first > footer span {
			font-size			: 10pt;
		}



		/* いつもお越しいただいている患者様 ---------- */

		#couponPage > article#second {
			margin				: 10px 0 0 0;
		}
	
		#couponPage > article#second .tokuten {
			display				: block;
			margin				: 30px 0 0 0;
			padding				: 10px;
			font-size			: 12pt;
		}



		#couponPage > footer {
			display				: block;
			position			: relative;
			margin				: 50px 5% 0;
		}

		#couponPage > footer p {
			text-align			: center;
			font-size			: 12pt;
			line-height			: 1.5;
		}

		#couponPage > footer .more {
			margin				: 50px 0 0 0;
		}

		#couponPage > footer .more a {
			display				: block;
			padding				: 20px 10px;
			height				: auto;
			line-height			: 1.5;
			font-size			: 12pt;
		}
	}