@charset "Shift_JIS";



/* pc
----------------------------------------------- */

@media print, screen and (min-width:1000px) {


	/* nav
	----------------------------------------------- */
	
	.nav__item--about a {
		background-position: 0 -90px;
	}


	/* contents
	----------------------------------------------- */

	.contents__inner {
		padding: 0 0 40px;
		background: url(../../about/images/bg.png) no-repeat right top;
		background-size: 270px 270px;
	}

	.contents__title {
		padding: 40px 0 20px;
		font-size: 3rem;
		text-align: center;
		background: url(../images/line.png) no-repeat center bottom;
		background-size: 384px 14px;
	}
	.contents__subtitle {
		margin: 50px 30px 35px;
		font-size: 2.2rem;
		line-height: 1.25;
		text-align: center;
	}


	/* box
	----------------------------------------------- */

	.box {
		position: relative;
		margin: 0 45px;
	}
	.box__columns {
		display: flex;
		flex-wrap: wrap;
	}

	/* material */
	.box--material .contents__content {
		width: 390px;
	}
	.box--material .contents__image {
		position: absolute;
		top: 35px;
		right: -45px;
	}

	/* notuse */
	.box--notuse {
		padding: 20px 0 0;
	}
	.box--notuse .contents__content {
		margin: 0 30px 0 170px;
		width: 450px;
	}
	.box--notuse .contents__image {
		position: absolute;
		top: 120px;
		left: -10px;
	}

	/* mobile */
	.box--mobile {
	}
	.box--mobile .box__columns {
		margin: -15px 0 0;
	}
/*
	.box--mobile .contents__content {
		width: 460px;
	}
*/
	.box--mobile .contents__image {
		padding: 15px 0 0 0;
	}

	/* faq */
	.box--faq .contents__subtitle {
		margin: 50px 30px 20px;
	}


	/* qr
	----------------------------------------------- */

	.qr {
		position: relative;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		margin: 25px 30px 0;
		padding: 0 98px 0 40px;
		height: 98px;
		background: #f5f4f2;
		border-radius: 5px;
		box-sizing: border-box;
	}
	.qr span {
		display: block;
		padding: 3px 0;
		width: 100%;
	}
	.qr__title {
		font-size: 1.3rem;
	}
	.qr__url {
		margin: 2px 0 0;
		font-size: 1.8rem;
		font-family: serif;
	}
	.qr__caution {
		font-size: 1rem;
		line-height: 1.5;
	}
	.qr_image {
		position: absolute;
		top: 8px;
		right: 8px;
	}


	/* faq
	----------------------------------------------- */

	.faq {
		margin: auto;
		padding: 30px 30px 25px;
		width: 560px;
		border: 2px solid #f1e9db;
		border-radius: 6px;
		box-sizing: border-box;
	}
	.faq__title {
		position: relative;
		padding: 0 0 0 45px;
		font-size: 1.6rem;
		line-height: 1.25;
		color: #6e5a37;
	}
	.faq__title:before {
		position: absolute;
		top: 2px;
		left: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		content: "Q";
		width: 34px;
		height: 34px;
		font-size: 2.2rem;
		font-family: arial;
		border: 1px solid #aaa096;
		border-radius: 50%;
	}
	.faq__content {
		padding: 10px 0 0;
		font-size: 1.3rem;
		line-height: 1.5;
	}


}



/* mobile
----------------------------------------------- */

@media only screen and (max-width:999px) {


	/* contents
	----------------------------------------------- */

	.contents__inner {
		background: url(../../about/images/bg.png) no-repeat right top;
		background-size: 270px 270px;
	}

	.contents__subtitle {
		margin: 40px 20px 15px;
		font-size: 1.8rem;
		line-height: 1.25;
		text-align: center;
	}
	.contents__image {
		margin: 20px auto 0;
		padding: 0 80px;
		max-width: 240px;
		text-align: center;
	}
	.contents__image img {
		width: auto;
		height: auto;
		max-width: 100%;
		max-height: 100%;
	}


	/* qr
	----------------------------------------------- */

	.qr {
		margin: 20px 20px 0;
		padding: 15px;
		background: #f5f4f2;
		border-radius: 6px;
		box-sizing: border-box;
	}
	.qr__title,
	.qr__url {
		display: block;
		font-size: 1.5rem;
		line-height: 1.5;
		text-align: center;
	}
	.qr__title {
		font-weight: 700;
		font-size: 1.3rem;
	}
	.qr__url {
		margin: 5px 0 0;
	}
	.qr_image {
		position: absolute;
		top: 8px;
		right: 8px;
	}


	/* faq
	----------------------------------------------- */

	.faq {
		margin: 0 20px;
		padding: 20px 15px 15px;
		border: 2px solid #f1e9db;
		border-radius: 6px;
		box-sizing: border-box;
	}
	.faq__title {
		position: relative;
		padding: 0 0 0 40px;
		font-size: 1.5rem;
		line-height: 1.4;
		color: #6e5a37;
	}
	.faq__title:before {
		position: absolute;
		top: 2px;
		left: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		content: "Q";
		width: 28px;
		height: 28px;
		font-size: 1.8rem;
		font-family: arial;
		border: 1px solid #aaa096;
		border-radius: 50%;
	}
	.faq__content {
		padding: 10px 0 0;
		font-size: 1.5rem;
		line-height: 1.5;
		text-align: justify;
	}


}