@charset "utf-8";

/*�� PC : 641px < Window Size ��*/
@media print,screen and (min-width: 641px) {
	/* ------ Body ------ */
	article{
		background-color:#f5f2e9;
	}
	#manners{
		border-bottom:3px solid #d6cdaf;
		padding-bottom:100px;
	}
	#main_column #manners h2{
		margin-bottom:15px;
	}
	#manners > p{
		font-size:18px;
		color:#111111;
		text-align:center;
		line-height: 1.6em;
		margin-bottom:60px;
	}
	#manners .manners{
		position: relative;
	}
	#manners .manners > div:not(#fnav){
		width:70%;
	}
	#manners .manners h3{
		font-size:32px;
		color:#6b3c30;
		padding-bottom:15px;
		border-bottom:1px solid #d6cdaf;
		margin-bottom:40px;
		line-height: 1.2em;
	}
	#manners .manners .left,
	#manners .manners .right{
		float:none;
	}
	#manners .toggle{
		display:block !important;
	}

	#noshi_sel{
		margin-bottom:100px;
	}
	#noshi_sel .type li{
		display:flex;
		-js-display:flex;
		display:-webkit-flex;
		-webkit-justify-content: flex-start;
		justify-content: flex-start;
		flex-flow: row nowrap;
		-webkit-flex-flow: row nowrap;
		align-items: flex-start;
		-webkit-align-items: flex-start;
		margin-bottom:40px;
	}
	#noshi_sel .type li:last-child{
		margin-bottom:0;
	}
	#noshi_sel .type li .left{
		width:22.9%;
		max-width:160px;
		margin-right:5.7%;
	}
	#noshi_sel .type li .right{
		width:71.4%;
	}
	#noshi_sel .type li .right h4{
		font-size:24px;
		color:#6b3c30;
		padding-bottom:10px;
		line-height:1.2em;
	}
	#noshi_sel .type li .right > p{
		font-size:18px;
		padding-bottom:10px;
	}
	#noshi_sel .type li .right .ex{
		letter-spacing:-1px;
		line-height: 1.6em;
	}

	#noshi_write{
		margin-bottom:100px;
	}
	#noshi_write .noshi_write{
		display:flex;
		-js-display:flex;
		display:-webkit-flex;
		-webkit-justify-content: flex-start;
		justify-content: flex-start;
		flex-flow: row nowrap;
		-webkit-flex-flow: row nowrap;
		align-items: flex-start;
		-webkit-align-items: flex-start;
	}
	#noshi_write .left{
		width:62.9%;
		margin-right:5.7%;
	}
	#noshi_write .right{
		width:31.4%;
		line-height: 1.6em;
	}

	#noshi_inout{
		margin-bottom:100px;
	}
	#noshi_inout .toggle > div{
		display:flex;
		-js-display:flex;
		display:-webkit-flex;
		-webkit-justify-content: flex-start;
		justify-content: flex-start;
		flex-flow: row nowrap;
		-webkit-flex-flow: row nowrap;
		align-items: flex-start;
		-webkit-align-items: flex-start;
		margin-bottom:40px;
	}
	#noshi_inout .noshi_out{
		margin-bottom:0;
	}
	#noshi_inout .left{
		width:22.9%;
		max-width:160px;
		margin-right:5.7%;
	}
	#noshi_inout .right{
		width:71.4%;
	}
	#noshi_inout .right h4{
		font-size:24px;
		color:#6b3c30;
		padding-bottom:10px;
		line-height:1.2em;
	}
	#noshi_inout .right > p{
		font-size:18px;
		padding-bottom:10px;
	}
	#noshi_inout .right .ex{
		line-height: 1.6em;
		letter-spacing:-1px;
	}

	#noshi_use{
		margin-bottom:100px;
	}
	#noshi_use .toggle > p{
		line-height:1.6em;
		margin-bottom:35px;
	}
	#noshi_use .step li{
		display:flex;
		-js-display:flex;
		display:-webkit-flex;
		-webkit-justify-content: flex-start;
		justify-content: flex-start;
		flex-flow: row nowrap;
		-webkit-flex-flow: row nowrap;
		align-items: flex-start;
		-webkit-align-items: flex-start;
		margin-bottom:40px;
	}
	#noshi_use .step li:last-child{
		margin-bottom:0;
	}
	#noshi_use .step li .left{
		width:22.9%;
		max-width:160px;
		margin-right:5.7%;
	}
	#noshi_use .step li .right{
		width:71.4%;
	}
	#noshi_use .step li .right h4{
		font-size:24px;
		color:#6b3c30;
		padding-bottom:10px;
		line-height:1.2em;
	}
	#noshi_use .step li .right > p{
		font-size:18px;
		line-height:1.6em;
	}
	#noshi_use .step li .right .ex{
		margin-top:15px;
		display:flex;
		-js-display:flex;
		display:-webkit-flex;
		-webkit-justify-content: flex-start;
		justify-content: flex-start;
		flex-flow: row nowrap;
		-webkit-flex-flow: row nowrap;
		align-items: flex-start;
		-webkit-align-items: flex-start;
	}
	#noshi_use .step li .right .ex .img{
		width:60%;
		text-align:left;
	}
	#noshi_use .step li .right .ex .img img{
		display:inline-block;
		vertical-align:top;
		width:94%;
		max-width:279px;
	}
	#noshi_use .step li .right .ex p{
		width:40%;
		line-height:1.6em;
	}
	#noshi_use .step li .right .ex p .no{
		position:relative;
		color:#fff;
		width:13px;
		height:13px;
		font-size:12px;
		display:inline-block;
		background-color:#000;
		-moz-border-radius: 50%;
		-webkit-border-radius: 50%;
		border-radius: 50%;
		text-align:center;
		line-height:13px;
		margin-right:2px;
	}

	#tesage{
		margin-bottom:100px;
	}
	#tesage p{
		line-height:1.6em;
	}
	#tesage .img{
		text-align:left;
		margin:15px auto 15px 0;
		width:48%;
	}

	#utiiwai .toggle > p{
		line-height:1.6em;
		margin-bottom:35px;
	}
	#utiiwai .toggle > div h4{
		font-size:24px;
		color:#6b3c30;
		padding-bottom:10px;
		line-height:1.2em;
	}
	#utiiwai .souba{
		margin-bottom:35px;
	}
	#utiiwai .toggle > div p{
		font-size:18px;
		line-height:1.6em;
	}

	/* ------ Nav Menu ------ */
	#fnav{
		position:absolute;
		width:24%;
		box-sizing:border-box;
		-webkit-box-sizing:border-box;
		z-index:2;
		right:0;
		top:0;
	}
	#fnav ul{
		border-top:2px solid #d6cdaf;
		border-bottom:2px solid #d6cdaf;
		background-color:#fff;
		padding:10px;
	}
	#fnav ul li{
		border-bottom:1px dashed #d6cdaf;
		margin-bottom:10px;
	}
	#fnav ul li:last-child{
		border-bottom:none;
		margin-bottom:0;
	}
	#fnav ul li:last-child a{
		margin-bottom:0;
	}
	#fnav ul li a{
		padding: 10px 0;
		color: #6b3c30;
		font-size: 16px;
		margin-bottom: 10px;
		display: block;
		box-sizing: border-box;
		-webkit-box-sizing: border-box;
		text-indent: -1.5em;
		margin-left: 1.5em;
	}
	#fnav ul li a:before{
		content:"\f138";
		font-family: "FontAwesome";
		color:#ed6c00;
		margin-right:0.5em;
	}
}

/*�� Mobile (Low Res) : 640px > 0 ��*/
@media only screen and (max-width: 640px) {
	/* ------ Body ------ */
	article{
		background-color:#f5f2e9;
	}
	#main_column #manners h2{
		margin-bottom:2.3vw;
	}
	#manners > p{
		color:#111111;
		text-align:center;
		line-height: 1.5em;
		margin-bottom:2.3em;
	}
	#manners .manners h3{
		font-size:1.08em;
		color:#fff;
		padding:0.85em 0.77em;
		margin-bottom:1.54em;
		line-height: 1em;
		background-color:#6a3b2f;
		position:relative;
	}
	#manners .manners h3 .ico{
		position:absolute;
		right:1.6vw;
		top:50%;
		width:7.8vw;
		height:7.8vw;
		background-color:#ed6c00;
		text-align:center;
		margin-top:-3.9vw;
		display:flex;
		-js-display:flex;
		display:-webkit-flex;
		-webkit-justify-content: center;
		justify-content: center;
		align-items: center;
		-webkit-align-items: center;
		-moz-transition: all 0.5s ease;
		-ms-transition: all 0.5s ease;
		-webkit-transition: all 0.5s ease;
		transition: all 0.5s ease;
	}
	#manners .manners h3.rotate .ico{
		-moz-transform: rotate(180deg);
		-webkit-transform: rotate(180deg);
		-o-transform: rotate(180deg);
		-ms-transform: rotate(180deg);
		transform: rotate(180deg);
	}
	#manners .manners h3 .ico i{
		margin-bottom:0.1em;
	}
	#manners .manners .left,
	#manners .manners .right{
		float:none;
	}

	#noshi_sel{
		margin-bottom:9.4vw;
	}
	#noshi_sel .type li{
		display:flex;
		-js-display:flex;
		display:-webkit-flex;
		-webkit-justify-content: flex-start;
		justify-content: flex-start;
		flex-flow: row nowrap;
		-webkit-flex-flow: row nowrap;
		align-items: flex-start;
		-webkit-align-items: flex-start;
		margin-bottom:1.46em;
	}
	#noshi_sel .type li:last-child{
		margin-bottom:0;
	}
	#noshi_sel .type li .left{
		width:26.7%;
		max-width:160px;
		margin-right:6.7%;
	}
	#noshi_sel .type li .right{
		width:66.6%;
	}
	#noshi_sel .type li .right h4{
		font-size:1.42em;
		color:#6b3c30;
		padding-bottom:0.29em;
		line-height:1.2em;
	}
	#noshi_sel .type li .right > p{
		font-size:1.17em;
		padding-bottom:0.36em;
		line-height:1.3em;
	}

	#noshi_write{
		margin-bottom:9.4vw;
	}
	#noshi_write .left{
		margin-bottom:1.46em;
	}

	#noshi_inout{
		margin-bottom:9.4vw;
	}
	#noshi_inout .toggle > div{
		display:flex;
		-js-display:flex;
		display:-webkit-flex;
		-webkit-justify-content: flex-start;
		justify-content: flex-start;
		flex-flow: row nowrap;
		-webkit-flex-flow: row nowrap;
		align-items: flex-start;
		-webkit-align-items: flex-start;
		margin-bottom:1.46em;
	}
	#noshi_inout .noshi_out{
		margin-bottom:0;
	}
	#noshi_inout .left{
		width:26.7%;
		max-width:160px;
		margin-right:6.7%;
	}
	#noshi_inout .right{
		width:66.6%;
	}
	#noshi_inout .right h4{
		font-size:1.42em;
		color:#6b3c30;
		padding-bottom:0.29em;
		line-height:1.2em;
	}
	#noshi_inout .right > p{
		font-size:1.17em;
		padding-bottom:0.36em;
		line-height:1.3em;
	}

	#noshi_use{
		margin-bottom:9.4vw;
	}
	#noshi_use .toggle > p{
		margin-bottom:1.46em;
	}
	#noshi_use .step li{
		display:flex;
		-js-display:flex;
		display:-webkit-flex;
		-webkit-justify-content: flex-start;
		justify-content: flex-start;
		flex-flow: row nowrap;
		-webkit-flex-flow: row nowrap;
		align-items: flex-start;
		-webkit-align-items: flex-start;
		margin-bottom:1.46em;
	}
	#noshi_use .step li:last-child{
		margin-bottom:0;
	}
	#noshi_use .step li .left{
		width:26.7%;
		max-width:160px;
		margin-right:6.7%;
	}
	#noshi_use .step li .right{
		width:66.6%;
	}
	#noshi_use .step li .right h4{
		font-size:1.42em;
		color:#6b3c30;
		padding-bottom:0.29em;
		line-height:1.2em;
	}
	#noshi_use .step li .right > p{
		font-size:1.17em;
		padding-bottom:0.36em;
		line-height:1.3em;
	}
	#noshi_use .step li .right .ex{
		margin-top:1.04em;
	}
	#noshi_use .step li .right .ex .img{
		text-align:left;
		margin-bottom:0.42em;
	}
	#noshi_use .step li .right .ex .img img{
		display:inline-block;
		vertical-align:top;
	}
	#noshi_use .step li .right .ex p .no{
		position:relative;
		color:#fff;
		width:1em;
		height:1em;
		font-size:0.9em;
		display:inline-block;
		background-color:#000;
		-moz-border-radius: 50%;
		-webkit-border-radius: 50%;
		border-radius: 50%;
		text-align:center;
		line-height:1em;
		margin-right:2px;
		box-sizing:border-box;
		-webkit-box-sizing:border-box;
		padding:0.05em;
	}

	#tesage{
		margin-bottom:9.4vw;
	}
	#tesage .img{
		text-align:center;
		margin:0.63em auto;
	}

	#utiiwai .toggle > p{
		margin-bottom:1.46em;
	}
	#utiiwai .toggle > div h4{
		font-size:1.42em;
		color:#6b3c30;
		padding-bottom:0.29em;
		line-height:1.2em;
	}
	#utiiwai .souba{
		margin-bottom:1.46em;
	}
	#utiiwai .toggle > div p{
		font-size:1.17em;
		line-height:1.3em;
	}
}

/* IE10- */
@media all and (-ms-high-contrast:none){
	#noshi_use .step li .right .ex p .no{
		line-height:18px;
	}
}