@charset "utf-8";

/******************************************************
 SP・PC共通
******************************************************/
/**/


/******************************************************
 SP
******************************************************/
@media only screen and (max-width: 768px) {	
	/* aboutMes */
	#aboutMes {
		margin-bottom: 5px;
	}
	.aboutMes-ttl {
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #948a54;
		padding: 50px 0;
	}
	.aboutMes-ttl .inner {
	}
	.aboutMes-ttl .hn {
		font-size: 2.8rem;
		color: #fff;		
	}
	.aboutMes-photo {
		position: relative;
		background-image: url(/img/about/img_mes.png);
		background-repeat: no-repeat;
		background-position: center top;
		background-size: cover;
	}
	.aboutMes-photo::before {
		content: '';
		display: block;
		padding-top: 104.666666667%;
	}
	.aboutMes-photo dl {
		position: absolute;
		bottom: 15px;
		left: 15px;
		color: #fff;
		opacity: .9;
		line-height: 1.6;
		text-shadow: 2px 2px 10px rgba(0,0,0,0.5);
	}
	.aboutMes-photo dl dt {
		font-size: 2.0rem;
		text-indent: -.45em;
	}
	.aboutMes-photo dl dd {
		font-size: 1.8rem;
	}
	
	/* aboutItem */
	.aboutItem {
		position: relative;
	}
	.aboutItem::before {
		content: '';
		display: block;
		padding-top: 52.777777777%;
		background-repeat: no-repeat;
		background-position: center center;
		background-size: cover;
	}
	.aboutItem:nth-of-type(1) .inner {
		background-color: #a57375;
	}
	.aboutItem:nth-of-type(1)::before {
		background-image: url(/img/about/img_about_01.png);
	}
	.aboutItem:nth-of-type(2) .inner {
		background-color: #131313;
	}
	.aboutItem:nth-of-type(2)::before {
		background-image: url(/img/about/img_about_02.png);
	}
	.aboutItem:nth-of-type(3) .inner {
		background-color: #c4825e;
	}
	.aboutItem:nth-of-type(3)::before {
		background-image: url(/img/about/img_about_03.png);
	}
	.aboutItem:nth-of-type(4) .inner {
		background-color: #463156;
	}
	.aboutItem:nth-of-type(4)::before {
		background-image: url(/img/about/img_about_04.png);
	}
	.aboutItem .inner {
		padding: 5%;
	}
	.aboutItem .textWrap .hn {
		font-size: 2.8rem;
		color: #fff;
		text-align: center;
		text-shadow: 2px 2px 10px rgba(0,0,0,0.5);
	}
	.aboutItem .textWrap p {
		font-size: 1.8rem;
		color: #fff;
		text-shadow: 2px 2px 10px rgba(0,0,0,0.5);
	}
	
	/* topLead */
	#aboutLead {
		width: 100%;
		padding: 100px 30px;
		background-image: url(/img/about/img_about_05.png);
		background-repeat: no-repeat;
		background-position: center center;
		background-size: cover;
		margin-bottom: 5px;
		color: #fff;
	}
	#aboutLead .hn {
		font-size: 2.6rem;
		font-weight: bold;
		padding-bottom: 1.5em;
		text-align: center;
	}
	#aboutLead p {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 2.0rem;
		line-height: 2.4;
	}
	#aboutLead p br {
		display: none;
	}
	#aboutLead p br.spBr {
		display:block;
	}
}

/******************************************************
 PC
******************************************************/
@media print,
screen and (min-width: 769px) {
	/* aboutMes */
	#aboutMes {
		display: flex;
		flex-flow: row-reverse nowrap;
	}
	.aboutMes-ttl {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 50%;
		background-color: #948a54;
		padding: 50px 0;
	}
	.aboutMes-ttl .inner {
		-webkit-writing-mode: vertical-rl;
		-ms-writing-mode: tb-rl;
		writing-mode: vertical-rl;
		white-space: nowrap;
	}
	.aboutMes-ttl .hn {
		font-size: 3.2rem;
		color: #fff;		
	}
	.aboutMes-photo {
		position: relative;
		width: 50%;
		background-image: url(/img/about/img_mes.png);
		background-repeat: no-repeat;
		background-position: center top;
		background-size: cover;
	}
	.aboutMes-photo::before {
		content: '';
		display: block;
		padding-top: 104.666666667%;
	}
	.aboutMes-photo dl {
		position: absolute;
		bottom: 30px;
		left: 30px;
		color: #fff;
		opacity: .9;
		line-height: 1.6;
		text-shadow: 2px 2px 10px rgba(0,0,0,0.5);
	}
	.aboutMes-photo dl dt {
		font-size: 2.0rem;
		text-indent: -.45em;
	}
	.aboutMes-photo dl dd {
		font-size: 1.6rem;
	}
	
	/* aboutItem */
	.aboutItem {
		position: relative;
		background-repeat: no-repeat;
		background-position: center center;
		background-size: cover;
	}
	.aboutItem:nth-of-type(1) {
		background-image: url(/img/about/img_about_01.png);
	}
	.aboutItem:nth-of-type(2) {
		background-image: url(/img/about/img_about_02.png);
	}
	.aboutItem:nth-of-type(3) {
		background-image: url(/img/about/img_about_03.png);
	}
	.aboutItem:nth-of-type(4) {
		background-image: url(/img/about/img_about_04.png);
	}
	.aboutItem::before {
		content: '';
		display: block;
		padding-top: 52.777777777%;
	}
	.aboutItem .inner {
		position: absolute;
		display: flex;
		justify-content: flex-end;
		top: 0;
		right: 0;
		width: 100%;
		height: 100%;
	}
	#spring.aboutItem .inner { padding: 7.5% 55%;}
	#summer.aboutItem .inner { padding: 7.5% 47%;}
	#autumn.aboutItem .inner { padding: 7.5% 12%;}
	#winter.aboutItem .inner { padding: 7.5% 64%;}
	.aboutItem .textWrap {
		-webkit-writing-mode: vertical-rl;
		-ms-writing-mode: tb-rl;
		writing-mode: vertical-rl;
		word-break: keep-all;
	}
	.aboutItem .textWrap .hn {
		font-size: 2.8rem;
		color: #fff;
		text-align: center;
		text-shadow: 2px 2px 10px rgba(0,0,0,0.5);
	}
	.aboutItem .textWrap p {
		font-size: 2.0rem;
		color: #fff;
		line-height: 2;
		text-shadow: 2px 2px 10px rgba(0,0,0,0.5);
	}
	
	/* aboutLead */
	#aboutLead {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		padding: 120px 0;
		background-image: url(/img/about/img_about_05.png);
		background-repeat: no-repeat;
		background-position: center center;
		background-size: cover;
		margin-bottom: 10px;
		white-space: nowrap;
		color: #fff;
		/*word-break: keep-all;
		overflow: hidden;*/
	}
	#aboutLead .inner {
		-webkit-writing-mode: vertical-rl;
		-ms-writing-mode: tb-rl;
		writing-mode: vertical-rl;
	}
	#aboutLead .hn {
		font-size: 2.8rem;
		font-weight: bold;
		padding-left: 70px;
	}
	#aboutLead p {
		font-size: 1.7rem;
		line-height: 3;
		text-orientation: upright;
	}
}