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

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

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

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



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


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



	#kodawariPage {
		display			: block;
		margin			: 0 0 0 10px;
		color			: #444444;
		font-size		: 11pt;
		font-family		: "游明朝","YuMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif;
		font-weight		: 500;
		line-height		: 1.7;

	}
	#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 > article > header {
		display			: block;
		position		: relative;
		width			: 945px;
		height          : 389px;
		margin			: 0;
		padding 		: 60px 0 0 40px;
		
		background-image		: url(../img/kodawari/bg01.png);
		background-position		: left top;
		background-repeat		: no-repeat;
		zoom			: 1;
	}

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

	#kodawariPage > article > header p {
		margin			: 20px 0 0 0;
		padding     	: 0;
		width           : 575px;
	}



	/* -----------------------------------------------------
		section
	-------------------------------------------------------- */

	#kodawariPage > article > section {
		padding			: 20px 20px 40px 20px;
	}

	#kodawariPage > article > section.odd-number {
		background			: #ffffff;
	}

	#kodawariPage > article > section.even-number {
		background			: #eef4f3;
	}

	#kodawariPage > article > section > h2 {
		font-size			: 21pt;
		font-weight         : bold;
		color               : #18b78f;
		line-height         : 1.5em;
		margin              : 0;
		padding             : 50px 35px 0 35px; 
	}

	#kodawariPage > article > section#no1 > h2 {
		background-image		: url(../img/kodawari/1.png);
		background-position		: left top;
		background-repeat		: no-repeat;
		zoom			: 1;
	}

	#kodawariPage > article > section#no2 > h2 {
		background-image		: url(../img/kodawari/2.png);
		background-position		: left top;
		background-repeat		: no-repeat;
		zoom			: 1;
	}

	#kodawariPage > article > section#no3 > h2 {
		background-image		: url(../img/kodawari/3.png);
		background-position		: left top;
		background-repeat		: no-repeat;
		zoom			: 1;
	}

	#kodawariPage > article > section#no4 > h2 {
		background-image		: url(../img/kodawari/4.png);
		background-position		: left top;
		background-repeat		: no-repeat;
		zoom			: 1;
	}

	#kodawariPage > article > section#no5 > h2 {
		background-image		: url(../img/kodawari/5.png);
		background-position		: left top;
		background-repeat		: no-repeat;
		zoom			: 1;
	}

	#kodawariPage > article > section p {
		padding     : 0 35px;
	}

	#kodawariPage > article > section#no3 {
		position	: relative;
	}

	#kodawariPage > article > section#no3 > p {
		width		: 650px;
	}

	#kodawariPage > article > section#no3 > p.img {
		width       : 210px;
		padding     : 0;
		position    : absolute;
		top         : -70px;
		right       : 10px;
	}

	#kodawariPage > article > section span.name1 {
		font-size			: 14pt;
		margin-left         : -0.5em;
	}

	#kodawariPage > article > section span.name2 {
		color               : #ef8f7d;
		font-weight         : bold;
	}



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

	#kodawariPage > article > footer {
		border              : thick solid #18b78f;
		padding             : 10px 30px 40px 10px;
		position            : relative;
		margin-top          : 15px;
	}

	#kodawariPage > article > footer dl dt {
		width               : 680px;
		padding             : 10px 0 0 180px;
		margin-bottom       : 20px;
		font-size           : 20pt;
		font-weight         : bold;
	}

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

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

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

	#kodawariPage > article > footer dl dd.profile span {
		color   : #18b78f;
		font-size: 18px;
	}

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



	@media (max-width: 767px) {



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

		#kodawariPage {
			width			    : auto;
			margin				: 0 10px;
			padding				: 0 0 10px 0;
			line-height			: 1.5;
			background-size		: 100% auto;
		}
		
		#kodawariPage img {
			width				: auto;
			max-width			: 100%;
			vertical-align		: bottom;
		}

		/* Header ----------------------------------------- */
	
		#kodawariPage > article > header {
			width			    : auto;
			margin-bottom       : 15px;
			padding             : 15px;
			
			background-image		: url(../img/kodawari/bg02.png);
			background-position		: right bottom;
			background-repeat		: no-repeat;
			zoom			: 1;
		}
		
		#kodawariPage > article > header .lead {
			font-size		    : 16pt;
			margin-bottom       : 10px;
		}
		
		#kodawariPage > article > header p {
			width			    : 15em;
		}

		/* Section ----------------------------------------- */
		
		#kodawariPage > article > section {
			padding			    : 0 0 15px 0;
			margin-bottom       : 15px;
		}
		
		#kodawariPage > article > section > h2 {
			font-size			: 14pt;
		}

		#kodawariPage > article > section#no3 > p {
			width		        : auto;
		}
		
		#kodawariPage > article > section#no3 > p.img {
			width               : auto;
			padding             : 0;
			position            : static;
			text-align          : center;
		}
		

		
		
		
		/* Footer ----------------------------------------- */
		
		#kodawariPage > article > footer {
			width    	        : auto;
			padding             : 20px;
		}
		
		#kodawariPage > article > footer dl dt {
			width    	        : auto;
			padding             : 0;
			text-align          : center;
		}
		
		#kodawariPage > article > footer dl dd.img {
			position            : static;
			text-align          : center;
		}

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