@charset "UTF-8";
/* ***********************************************************************
    Yuzu Pharmacy - <Home> 241001〜
*********************************************************************** */
/*
    0 : Common, Format
    1 : MainImage
    2 : NewsTitle
	3 : StoresBnr
	4 : Courses
	5 : Wellness
	6 : Parking
	7 : Wellness Mark
*/
/* ***********************************************************************
    0 : Common, Format
************************************************************************ */
section .secInner .LeftColumn,
section .secInner .RightColumn {
	float: none;
}
@media screen and (min-width:768px) {
/** [ TABLET ] **/
	section .secInner .LeftColumn {
		float: left;
	}
	section .secInner .RightColumn {
		float: right;
	}
	section .secInner p {
		font-size: 16px;
	}
}
@media screen and (min-width: 1080px) {
/**[ PC ]**/
	section .secInner {
		max-width: 1080px;
		width    : 100%;
		padding  : 60px 0 120px;
	}
}


/* ***********************************************************************
    1 : MainImage
************************************************************************ */
/** [ SP ] **/
#mainImg {
	position       : relative;
	background     : url(../images/mainImg_bg_s.jpg) center top 80px no-repeat;
	background-size: 100% auto; 
	width          : 100%;
	height         : 334px;
	padding-top    : 80px;
	text-align     : center;
}
#mainImg div {
	background     : url(../images/mainImg_copy.png) center center no-repeat;
	background-size: 470px 334px;
	height    : 334px;
	width     : 100%;
	text-align: center;
	overflow  : hidden;
}
#mainImg div p {
	text-indent: -99999px;
}
@media screen and (min-width: 768px) {
/**[ TABLET ]**/
	#mainImg {
		background     : url(../images/mainImg_bg_p.jpg) center top 80px repeat-x;
		background-size: 1153px 480px; 
		height         : 480px;
		padding-top    : 80px;
	}
	#mainImg div {
		background-size: auto 470px;
		height         : 470px;
		padding        : 5px auto 5px;
	}
} 
@media screen and (min-width: 1080px) {
/**[ PC ]**/
	#mainImg {
		background-position: center top 120px;
		background-size    : 1153px 625px;
		height             : 625px; 
		padding-top        : 120px;
	}
	#mainImg div {
		background-size: auto 625px;
		height         : 625px;
	}
}


/* ***********************************************************************
    2 : NewsTitle
************************************************************************ */
/** [ SP ] **/
#newsTitle {
	background: #007346;
	width     : 90%;
	height    : auto;
	padding   : 24px 5%;
	text-align: center;
}
#newsTitle .innerBox {
	width  : 100%;
	height : auto;
	margin : 0;
	padding: 0;
	/*
	border: solid 1px red;*/
}
#newsTitle .innerBox h2 {
	height        : 30px;
	text-align    : center;
	color         : #fff;
	font-family   : 'Hind', sans-serif;
	font-weight   : 600;
	font-size     : 30px;
	line-height   : 30px;
	letter-spacing: 0.05em;
}
#newsTitle .innerBox #oshiraseList {
	width     : 100%;
	margin-top: 16px;
}
#newsTitle .innerBox #oshiraseList dl {
	width        : 100%;
	height       : 42px;
	border-bottom: dotted 1px #fff;
}
#newsTitle .innerBox #oshiraseList dl dt,
#newsTitle .innerBox #oshiraseList dl dd {
	height     : 40px;
	padding-top: 2px;
}
#newsTitle .innerBox #oshiraseList dl dt,
#newsTitle .innerBox #oshiraseList dl dd a {
	line-height: 40px;
	text-align : left;
	color      : #fff;
	font-size  : 14px;
}
#newsTitle .innerBox #oshiraseList dl dt {
	float: left;
	width: 26%;
}
#newsTitle .innerBox #oshiraseList dl dd {
	float: right;
	width: 74%;
}
#newsTitle .innerBox #oshiraseList dl dd a {
	display      : block;
	height       : 40px;
	width        : 100%;
	overflow     : hidden;
	white-space  : nowrap;
	text-overflow: ellipsis;
}
#newsTitle .innerBox #oshiraseList #toNewsPage {
	width : 100%;
	height: 40px;
}
#newsTitle .innerBox #oshiraseList #toNewsPage .rightLink {
	height     : 40px;
	line-height: 40px;
	color      : #fff;
	font-size  : 14px;
}
@media screen and (min-width: 768px) {
/**[ TABLET ]**/
	#newsTitle {
		padding: 32px 5%;
	}
	#newsTitle .innerBox h2 {
		float         : left;
		width         : 25%;
		height        : auto;
		margin-top    : 8px;
		text-align    : left;
		font-size     : 36px;
		line-height   : 36px;
	}
	#newsTitle .innerBox #oshiraseList {
		float     : right;
		width     : 75%;
		margin-top: 0;
	}
	#newsTitle .innerBox #oshiraseList dl dt {
		width: 20%;
	}
	#newsTitle .innerBox #oshiraseList dl dd {
		width: 80%;
		
	}
	#newsTitle .innerBox #oshiraseList #toNewsPage {
		clear      : both;
		width      : 75%;
		margin-left: 25%;
	}
}
@media screen and (min-width: 1080px) {
/**[ PC ]**/
	#newsTitle .innerBox {
		min-width: 768px;
		max-width: 1280px;
		width    : 100%;
		margin   : 0 auto;	
	}
	#newsTitle .innerBox h2 {
		margin-top : 16px; 
		width      : 20%;
		font-size  : 40px;
		line-height: 40px;
	}
	#newsTitle .innerBox #oshiraseList {
		width: 80%;
	}
	#newsTitle .innerBox #oshiraseList dl {
		height: 56px;
	}
	#newsTitle .innerBox #oshiraseList dl dt,
	#newsTitle .innerBox #oshiraseList dl dd {
		height: 56px;
	}
	#newsTitle .innerBox #oshiraseList dl dt,
	#newsTitle .innerBox #oshiraseList dl dd a {
		height     : 56px;
		font-size  : 16px;
		line-height: 56px;
	}
	#newsTitle .innerBox #oshiraseList dl dt {
		width: 15%;
	}
	#newsTitle .innerBox #oshiraseList dl dd {
		width: 85%;
	}
	#newsTitle .innerBox #oshiraseList #toNewsPage,
	#newsTitle .innerBox #oshiraseList #toNewsPage .rightLink {
		height     : 56px;
		line-height: 56px;
	}
}


/* ***********************************************************************
	3 : StoresBnr
************************************************************************ */
/** [ SP ] **/
#storesBnr {
	text-align: center;
}
#storesBnr ul {
	width : 80%;
	margin: 48px auto 0;
}
#storesBnr ul li {
	margin-top: 18px;
}
#storesBnr ul li:first-child {
	margin-top: 0;
}
#storesBnr ul li,
#storesBnr ul li a,
#storesBnr ul li a img {
	display: block;
	width  : 100%;
	height : auto;
}

#storesBnr iframe {
	width : 90%;
	height: 440px;/* ←これ以上低くすると広域範囲が変わってしまう */
	margin: 24px auto 48px;
}

@media screen and (min-width: 768px) {
/**[ TABLET ]**/
	#storesBnr ul {
		width : 62%;
	}
	#storesBnr ul li {
		float      : left;
		width      : 49%;
		margin-top : 0;
		margin-left: 2%;
	}
	#storesBnr ul li:first-child {
		margin-left: 0;
	}
}
@media screen and (min-width: 1080px) {
/**[ PC ]**/
	#storesBnr ul {
		/*max-width: 1280px;
		min-width: 1080px;
		width    : 98%;98*/
		width : 840px;
		margin: 64px auto 48px;
	}
	#storesBnr ul li {
		width      : 47.5%;/*31%（3つの時）*/
		margin-top : 0;
		margin-left: 5%;/*3.5*/
	}
	
	#storesBnr iframe {
		max-width: 1280px;
		min-width: 1080px;
		width    : 98%;
		margin-bottom: 64px;
	}
}



/* ***********************************************************************
	4 : Courses
************************************************************************ */
/** [ SP ] **/
#courses {
	background: #fffde4;
	width     : 100%;
	padding   : 40px 0 56px;
	text-align: center;
}
#courses .innerBox {
	width : 90%;
	margin: 0 auto;
}
/*
#courses .innerBox h2 {
	color      : #007346;
	font-family: "Jun 501", sans-serif;
	font-size  : 28px;
	line-height: 1.25em;
}*/
#courses .innerBox #leadcopy {
	text-align : left;
	color      : #007346;
	font-family: "Jun 201", sans-serif;
	font-size  : 15px;
	line-height: 1.75em;
}
#courses .innerBox .lessonBox {
	background: #fff;
	width     : 100%;
	margin-top: 24px;
}
#courses .innerBox .lessonBox img {
	display: block;
	width  : 100%;
	height : auto;
}
#courses .innerBox .lessonBox dl {
	width     : 96%;
	padding   : 8px 2% 20px 2%;
	text-align: left;
}
#courses .innerBox .lessonBox dl dt {
	background   : #4d82bf;
	width        : 100%;
	margin-bottom: 8px;
	color        : #fff;
	font-family  : "Jun 501", sans-serif;
	font-size    : 22px;
	line-height  : 1.75em;
	text-align   : center;
	border-radius: 4px;	
}
#courses .innerBox .lessonBox dl dd {
	width      : 98%;
	margin     : 8px auto 0;
	font-size  : 14px;
	line-height: 1.75em;
}
#courses .innerBox .lessonBox dl dd table {
	width     : 100%;
	margin-bottom: 12px;
	border-top: solid 1px #719bcc;
}
#courses .innerBox .lessonBox dl dd table tr {
	width        : 100%;
	border-bottom: solid 1px #719bcc;
}
#courses .innerBox .lessonBox dl dd table th {
	background: #b8cde5;
	width     : 20%;
	padding   : 8px 1%;
}
#courses .innerBox .lessonBox dl dd table td {
	padding       : 8px 2%;
	line-height   : 1.5em;
	letter-spacing: 0.01em;
}
#courses .innerBox .lessonBox dl dd table td .komeList {
	font-size  : 12px;
	line-height: 1.25em;
}

/**[ top_ReserveBtn, top_InquiryBtn ]**/
#reserInqu {
	width     : 85%;
	margin    : 56px auto 8px;
	text-align: center;
}
#courses .innerBox .top_ReserveBtn,
#courses .innerBox .top_InquiryBtn  {
	display      : block;
	width        : 100%;
	height       : 64px;
	border-radius: 32px;
	text-align   : center;
}
#courses .innerBox .top_ReserveBtn {
	background: #f4872e;
}
#courses .innerBox .top_InquiryBtn {
	background: #fff;
	margin-top: 24px;
}
#courses .innerBox .top_ReserveBtn img,
#courses .innerBox .top_InquiryBtn img {
	display: block;
	height : 64px;
	width  : auto;
	margin : 0 auto;
}

@media screen and (min-width: 768px) {
/**[ TABLET ]**/
	#courses .innerBox h2 {
		font-size: 32px;
	}
	#courses .innerBox #leadcopy {
		text-align : center;
		font-size  : 16px;
		line-height: 2.0em;
	}
	#courses .innerBox .lessonBox {
		float      : left;
		width      : 32%;
		margin-top : 0;
		margin-left: 2%;
	}
	#courses .innerBox .lessonBox:first-child {
		margin-left: 0;
	}
	#courses .innerBox .lessonBox dl dd table th {
		color: #0068af;
		width: 30%;
	}
	/**[ top_ReserveBtn, top_InquiryBtn ]**/
	#reserInqu {
		width : 80%;
		margin: 48px auto 0;
	}
	#courses .innerBox .top_ReserveBtn {
		float : left;
		width : 48%;
	}
	#courses .innerBox .top_InquiryBtn {
		float     : right;
		width     : 48%;
		margin-top: 0;
	}
	
	
}
@media screen and (min-width: 1080px) {
/**[ PC ]**/
	#courses {
		padding: 80px 0;
	}
	#courses .innerBox {
		max-width: 1280px;
		min-width: 1080px;
		width    : 98%;
	}
	#courses .innerBox h2 {
		font-size  : 46px;
		line-height: 1.0em;
	}
	#courses .innerBox .lessonBox {
		width      : 31%;
		margin-top : 0;
		margin-left: 3.5%;
	}
	#courses .innerBox .lessonBox dl dd table th {
		width: 20%;
	}
	#courses .innerBox .lessonBox dl dd table td {
		width: 80%;
	}
	/**[ top_ReserveBtn, top_InquiryBtn ]**/
	#reserInqu {
		width : 60%;
		margin: 48px auto 0;
	}
	#courses .innerBox .top_ReserveBtn,
	#courses .innerBox .top_InquiryBtn {
		height: 80px;
		border-radius: 40px;
	}
	#courses .innerBox .top_ReserveBtn img,
	#courses .innerBox .top_InquiryBtn img {
		height: 80px;
	}
}


/* ***********************************************************************
	5 : Wellness
************************************************************************ */
/** [ SP ] **/
#wellness {
	background      : url(../images/bg_wellnessBig.png) right top no-repeat;
	background-size : auto 107%;
	background-color: #719bcc;
	width           : 100%;
	padding-top     : 64px;
	padding-bottom  : 64px;
	text-align      : center;	
}
#wellness .innerBox {
	background: #fff;
	width     : 90%;
	margin    : 0 auto;
	text-align: center;
}
#wellness .innerBox dl {
	width : 88%;
	margin: 0 auto;
	padding-bottom: 32px;
}
#wellness .innerBox dl dt {
	width     : 100%;
	padding   : 48px 0;
	text-align: center;
}
#wellness .innerBox dl dt img {
	display: block;
	width  : 40%;
	height : auto;
	margin : 0 auto;
}
#wellness .innerBox dl dd h3,
#wellness .innerBox dl dd p {
	color: #0068af;
}
#wellness .innerBox dl dd h3 {
	margin : 0;
	padding: 0;
	text-align : center;
	font-family: "Jun 201", sans-serif;
	font-size  : 24px;
	line-height: 1.2em;
}
#wellness .innerBox dl dd p {
	margin-top : 24px;
	text-align : left;
	font-size  : 14px;
	line-height: 2.0em;
}

@media screen and (min-width: 768px) {
/**[ TABLET ]**/
	#wellness {
		background-size: auto 107%;
	}
	#wellness .innerBox dl {
		width         : 100%;
		padding-bottom: 0;
	}
	#wellness .innerBox dl dt {
		float  : left;
		width  : 32%;
		padding: 50px 0 0;
	}
	#wellness .innerBox dl dt img {
		width: 60%;
	}
	#wellness .innerBox dl dd {
		float  : right;
		width  : 63%;
		padding: 56px 5% 64px 0;
	}
	#wellness .innerBox dl dd h3 {
		text-align : left;
		font-size  : 28px;
		line-height: 1.0em;
	}
	#wellness .innerBox dl dd p {
		font-size: 15px;
	}
}
@media screen and (min-width: 1080px) {
/**[ PC ]**/
	#wellness {
		background-size: auto 210%;
		padding-top    : 80px;
		padding-bottom : 80px;
	}
	#wellness .innerBox {
		max-width     : 1080px;
		min-width     : 980px;
		width         : 90%;
		padding-top   : 8px;
		padding-bottom: 8px;
	}
	#wellness .innerBox dl dt {
		padding: 48px 0 56px;
	}
	#wellness .innerBox dl dt img {
		max-width : 220px;
		max-height: 100%;
		width     : auto;
		height    : auto;
	}
	#wellness .innerBox dl dd {
		width  : 62%;
		padding: 60px 6% 64px 0;
	}
	#wellness .innerBox dl dd h3 {
		font-size: 32px;
	}
	#wellness .innerBox dl dd p {
		margin-top: 32px;
		font-size : 16px;
	}
}


/* ***********************************************************************
	6 : Parking
************************************************************************ */
/** [ SP ] **/
#parking {
	display    : block;
	width      : 100%;
	text-align : center;
	overflow   : hidden;
}
#parking .secInner {
	width  : 90%;
	margin : 0 auto;
	padding: 40px 0 80px;
}
#parking .secInner .leftColumn {
	width : 100%;
	margin: 0 auto;
}
#parking .secInner .rightColumn {
	width      : 100%;
	margin-top : 32px;
	line-height: 2.0em;
}
#parking .secInner .rightColumn p {
	text-align: left;
	margin-top: 1.0em;
}
@media screen and (min-width:768px) {
/** [ TABLET ] **/
	#parking .secInner p {
		font-size: 16px;
	}
	#parking .secInner .leftColumn {
		float: left;
		width: 40%;
	}
	#parking .secInner .rightColumn {
		float     : right;
		width     : 56%;
		margin-top: 0;
	}
	#parking .secInner .rightColumn p:first-child {
		margin-top: -12px;
	}
}
@media screen and (min-width: 1080px) {
/**[ PC ]**/
	#parking .secInner {
		max-width: 1080px;
		width    : 100%;
		padding  : 60px 0 120px;
	}
	#parking .secInner p {
		font-size  : 17px;
		line-height: 2.4em;
	}
}



/* ***********************************************************************
	7 : Wellness Mark
************************************************************************ */
/** [ SP ] **/
#wellnessMark {
	background    : #bfdcd1;
	width         : 100%;
	padding-top   : 72px;
	padding-bottom: 80px;
	text-align    : center;	
}
#wellnessMark .secInner {
	background    : #fff;
	width         : 90%;
	margin-left   : auto;
	margin-right  : auto;
	padding-bottom: 40px;
}
#wellnessMark .secInner h3 {
	display       : block;
	background    : #609d88;
	width         : 100%;
	min-height    : 22px;
	margin-bottom : 24px;
	padding       : 20px 0;
	text-align    : center;
	color         : #fff;
	font-family   : "Jun 201", sans-serif;
	font-size     : 22px;
	line-height   : 1.25em;
	letter-spacing: -0.05em;
}
#wellnessMark .secInner .LeftColumn img {
	display: block;
	width  : 50%;
	height : auto;
	margin : 40px auto;
}
#wellnessMark .secInner .RightColumn {
	width : 90%;
	margin: 0 auto;
}
#wellnessMark .secInner .RightColumn p {
	margin-top : 1.0em;
	text-align : left;
	font-size  : 15px;
	line-height: 2.0em;
}
@media screen and (min-width: 768px) {
/**[ TABLET ]**/
	#wellnessMark .secInner h3 {
		font-size: 28px;
	}
	#wellnessMark .secInner .LeftColumn {
		width: 30%;
	}
	#wellnessMark .secInner .LeftColumn img {
		width       : 70%;
		padding-left: 5%;
	}
	#wellnessMark .secInner .RightColumn {
		float        : right;
		width        : 66%;
		padding-right: 3%;
		margin-left  : 0;
		margin-right : 0;
	}
}
@media screen and (min-width: 1080px) {
/**[ PC ]**/
	#wellnessMark {
		padding-top   : 112px;
		padding-bottom: 120px;
	}
	#wellnessMark .secInner {
		max-width: 1080px;
		width    : 100%;
		padding  : 0 0 64px;
	}
	#wellnessMark .secInner h3 {
		padding      : 25px 0 26px;
		margin-bottom: 40px;
		font-size    : 36px;
	}
	#wellnessMark .secInner .RightColumn p {
		font-size  : 17px;
		line-height: 2.4em;
		letter-spacing: normal;
	}
}