﻿/* =========================================================

	Dr.衣理に聞く、「５つのこだわり」 /about/kodawari.html

	@create		: 2018/1/31
	@version	: 2.00

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



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


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

	#kodawariPage {
		display			: block;
		margin			: 0 0 0 10px;
		color			: #444444;
		background		: #FFF9F7;
		font-size		: 11pt;
		font-family		: "游明朝","YuMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif;
		font-weight		: 500;
		line-height		: 1.7;
	}
	#kodawariPage:lang(zh) {
		font-family: "Microsoft YaHei","微软雅黑","黑体","无衬线","宋体","宋体","Tahoma","Helvetica","Ariel","STHeiti";
	}
	#kodawariPage:lang(en) {
		font-family: 'Roboto', 'Helvetica', 'Ariel', sans-serif;
	}
	#kodawariPage:lang(vi) {
		font-family: 'Times New Roman','Arial','Tahoma','Verdana','Arial Unicode MS','Roboto', 'Helvetica', 'Ariel', sans-serif; 
	}

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


	#kodawariPage a         { color:#c39317; text-decoration:none;      }
	#kodawariPage a:visited { color:#c39317; text-decoration:none;      }
	#kodawariPage a:hover   { color:#d91f69; text-decoration:underline; }


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


	/* -----------------------------------------------------
		Header
	-------------------------------------------------------- */


	#kodawariPage > header {
		margin: 0;
		padding: 10px 0 0 50px;
	}

	/* #kodawariPage  header .lead {
		font-size		: 24pt;
		font-weight     : 700;
		margin-bottom   : 34px;
	}

	#kodawariPage  header p {
		margin			: 20px 0 0 0;
		padding     	: 0;
		width           : 575px;
	} */
#kodawariPage h2 {
	margin: 30px 0 0 0;
	padding: 0;
	line-height: 1.5;
	font-size: 22pt;
	font-weight: 500;
}
#kodawariPage h2 span.shironuki{
	display:block;
	font-size: 18pt;
	font-weight: 700;
	color:#fff;
	text-shadow: black 0 0 8px;
	padding-top:15px;
}
#kodawariPage h2 span.shironuki > span{
	display:block;
	font-size: 44pt;
}
#kodawariPage h2 span.shironuki2{
	display:block;
	font-size: 44pt;
	font-weight: 700;
	color:#fff;
	text-shadow: black 0 0 8px;
	padding-top:15px;
}
#kodawariPage h2 span.shironuki2 > span{
	display:block;
	font-size: 18pt;
}

#kodawariPage .catch {
	display: block;
	width: 550px;
	margin: 10px 30px 0;
	padding: 0;
	line-height: 1.8;
}
#kodawariPage .catch p {
	margin-top:20px;
	background: rgba(255,255,255,0.8);
	padding: 12px;
	border-radius: 5px;
	border: 1px solid #f3f3f3;
}
#kodawariPage .dreri {
	display: block;
	width: 280px;
	margin: 40px 30px 0 0;
	padding: 0;
}
#kodawariPage .dreri dl {
	margin: 0;
	padding: 0;
}
#kodawariPage .dreri dl dt {
	margin: 0;
	padding: 0;
}
#kodawariPage .dreri dl dt img {
}
#kodawariPage .dreri dl dd {
	margin-top:-47px;
	text-align:right;
}
.bx {
	display: flex;
}
.bx::after {
	content:"";
	clear:both;
	display:block;
}
#kodawariPage > .bx {
	padding: 0;
	background: #ffffff url(../img/kodawari/bg.png) left top no-repeat;
	margin-bottom:70px;
}
.sp-display {
	display:none;
}
	/* -----------------------------------------------------
		section
	-------------------------------------------------------- */

#kodawariPage > section {
	margin: 30px 20px 70px;
	background:#fff;
	border-radius:5px;
	padding-bottom:10px;
	box-shadow: 2px 2px 4px gray;
}
#kodawariPage section > .title {
	position:relative;
	padding:30px 20px 20px 80px;
	margin:0 15px  15px;
}
.no-cycle {
	background: #FF98AB;
	border-radius: 100%;
	width: 80px;
	height: 80px;
	text-align: center;
	color: #fff;
	position: absolute;
	top: -25px;
	left: -23px;
}
.no-cycle span {
	text-align:center;
	vertical-align:middle;
	font-size:50px;
	font-style: italic;
	padding-right: 10px;
}
#kodawariPage > section h2 {
	margin:0;
	font-size:15pt;
}

#kodawariPage > section h2 .name1 {
	font-size:11pt;
}
#kodawariPage > section .bx {
	background:#FFF9F7;
	border:1px solid #f3f3f3;
	border-radius:5px;
	margin:0 20px 12px;
	padding:10px;
}

#kodawariPage section >
.txt ,.photo {
	padding:20px;
}

.bx .txt {
	width:60%;
}
.bx .photo {
	width:40%;
	padding-top:26px;
}
.txt p {
	margin:0;
	padding:20px;
	font-size:12pt;
}
.txt .name2 {
	color: #B7183F;
	font-weight: bold;
	font-size:11pt;
}

.photo img{
	display: inline-block;
	box-shadow: 0px 0px 15px -5px rgba(0, 0, 0, 0.8);
	width:100%;
}

#no4 .bx {
	display: inherit;
}
#no4 .bx .photo {
	float:left;
	padding-bottom:0;
}
#no4 .bx .txt {
	width:auto;
}
.br {
	display:block;
	padding-top:8px;
}

	/* -----------------------------------------------------
		footer
	-------------------------------------------------------- */

	#kodawariPage  .footer {
		border              : thick solid #EF8F7D;
		padding             : 20px;
		position            : relative;
		margin-top          : 15px;
		box-shadow          : none;
	}
	#kodawariPage:lang(zh) .footer dl {
		padding-bottom:1rem;
	}
	#kodawariPage .footer dl dt {
		width               : 680px;
		padding             : 10px 0 0 180px;
		margin-bottom       : 20px;
		font-size           : 20pt;
		font-weight         : bold;
	}

	#kodawariPage .footer dl dt span {
		padding             : 5px 10px;
		margin-right        : 10px;
		color               : #ffffff;
		font-size           : 18px;
		font-weight         : bold;
		background          : #B7183F;
		vertical-align      : middle;
	}

	#kodawariPage .footer dl dd.img {
		position            : absolute;
		top                 : 10px;
		left                : 10px;
	}

	#kodawariPage .footer dl dd.profile {
		padding   : 0 0 0 180px;
	}

	#kodawariPage .footer dl dd.profile span {
		color   : #B7183F;
		font-size: 18px;
	}
	#eriFooter {
		margin-top: 30px!important;
	}
/* ---------------------------------------------------------
	レスポンシブ
------------------------------------------------------------ */



	@media (max-width: 767px) {



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

		#kodawariPage {
			width			    : auto;
			margin				: 0;
			padding				: 7px ;
			line-height			: 1.5;
			background-size		: 100% auto;
		}

/*		#kodawariPage img {
			width				: auto;
			max-width			: 100%;
			vertical-align		: bottom;
		} */


		#kodawariPage > .bx {
			display:block;
			margin-bottom:60px;
			background-size:cover;
		}
		#kodawariPage .catch {
			width:98%;
			padding:1%;
			margin:0 auto;
		}
		#kodawariPage h2 {
			font-size:13pt;
			margin:0;
			padding-top:10px;
		}
		#kodawariPage h2 span.shironuki {
			font-size:13pt;
		}
		#kodawariPage h2 span.shironuki > span {
			font-size:24pt;
		}
		#kodawariPage h2 span.shironuki2 {
			font-size:24pt;
		}
		#kodawariPage h2 span.shironuki2 > span {
			font-size:13pt;
		}
		#kodawariPage .catch p {
			margin:20px 5px 10px;
		}
		#kodawariPage .dreri {
			margin:0;
			display:none;
		}
		.sp-display {
			display:block;
			text-align:center;
			margin-bottom:10px;
			position:relative;
		}
		.sp-display img {
			max-width:50%;
		}
		.sp-display span {
			position:absolute;
			left:60%;
			bottom:0;
		}
		/* Section ----------------------------------------- */
		#kodawariPage > section {
			margin:30px 10px 70px;
		}
		#kodawariPage > section .bx {
			display:-webkit-box;
			display: -webkit-flex;
			display:-ms-flexbox;
			display: flex;
			-webkit-flex-wrap:wrap;
			-ms-flex-wrap:wrap;
			flex-wrap:wrap;
			flex-direction: column;
			flex-wrap: wrap;
			margin:0 10px 12px;
			padding:5px;
		}

		.bx .txt, .bx .photo {
			width:100%;
			padding:10px 0;
		}
		.bx .photo img {
			max-width:90%;
		}
		.bx .txt {
			-webkit-box-ordinal-group:1;
			-ms-flex-order:1;
			-webkit-order:1;
			order:1;
		}
		.txt p {
			padding:5px 5px 15px;
		}
		.bx .photo {
			-webkit-box-ordinal-group:2;
			-ms-flex-order:2;
			-webkit-order:2;
			order:2;
			text-align:center;
		}
		#kodawariPage section > .title {
			padding: 30px 10px 10px;
			margin:0 0 15px;
			font-size:14pt;
		}
		#kodawariPage > section h2 {
			font-size:14pt;
		}
		.no-cycle {
			width:60px;
			height:60px;
			left:-10px;
		}
		.no-cycle span {
			font-size:45px;
		}

		/* Footer ----------------------------------------- */

		#kodawariPage .footer {
			width    	        : auto;
			padding             : 20px;
		}

		#kodawariPage .footer dl dt {
			width    	        : auto;
			padding             : 0;
			text-align          : center;
		}

		#kodawariPage .footer dl dd.img {
			position            : static;
			text-align          : center;
		}

		#kodawariPage .footer dl dd.profile {
			padding             : 0;
			width    	        : 100%;
		}



















