@charset "UTF-8";
/* CSS Document */
/***********************************
共通
***********************************/
#contents,#point{
	margin-bottom: 8%;
}
.wrapper{
	padding-bottom: 8%;
}
.titleWrp{
	text-align: center;
}
.titleWrp p.subtitl{
	display: inline-block;
}
.titleWrp p.subtitl::before,
.titleWrp p.subtitl::after{
	content: "ノノノノ";
	padding: 0 1em;
	color: #d6ca90;
}
/***********************************
トップ
***********************************/
#contents h2{
	text-align: center;
}
#contents .contBox{
	margin: 20px 0;
}
#contents .contBox .photo{
	width: 40%;
	position: relative;
}
#contents .contBox .photo::before{
	content: url(../../img/contents/straight/natural.svg);
	position: absolute;
	left: -30px;
}
#contents figcaption{
	width: 53%;
	line-height: 180%;
}
#contents figcaption,
#contents figcaption .subtitl{
	text-align: center;
}
#contents figcaption h3{
	display: inline-block;
	background-color: #fff;
	margin-top: 10px;
	margin-bottom: 30px;
	font-weight: bold;
	line-height: 100%;
}
#contents figcaption h4,
#contents figcaption p{
	text-align: left;
}
#contents figcaption h4{
	font-weight: bold;
	margin-bottom: 15px;
}
#contents .contBox:nth-of-type(2).flexbox{
	-webkit-flex-direction: row-reverse;
	flex-direction: row-reverse;
}
#contents .contBox:nth-of-type(2) .photo::before{
	content: url(../../img/contents/straight/natural.svg);
	position: absolute;
	left: auto;
	right: -30px;
}

/***********************************
ポイント
***********************************/
#point{
	text-align: center;
	padding: 30px;
	border: 2px solid #BD7C15;
}
#point .pointList{
	text-align: left;
	margin-top: 30px;
}
#point p{
	text-align: left;
}
#point .price{
	width: 100%;
	margin-left: auto;
	position: relative;
}
#point .price .photo:nth-of-type(1){
text-align: right;
}
#point .price .priceList{
	width: 50%;
	margin-left: auto;
	padding-top: 15%;
}
#point .price .priceBox{
	display: inline-block;
	text-align: center;
	position: relative;
}
#point .price .priceList li:nth-child(1) {
	text-align: right;
	position: relative;
}
#point .price .priceList li:nth-child(1) .priceBox::before ,
#point .price .priceList li:nth-child(3) .priceBox::before {
	content: "";
	display: block;
	position: absolute;
	width: 200px;
	height: 200px;
	/*padding-top: 200%;*/
	bottom: 20px;
	right: 110%;
	background-image: url(../../img/contents/straight/img_03.png);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}
#point .price .priceList li:nth-child(3) .priceBox::before{
	background-image: url(../../img/contents/straight/img_04.png);	
}
#point .price .priceList li:nth-child(3) {
	text-align: left;
}


/***********************************
メニュー
***********************************/
#menu .menuBox{
	text-align: center;
	width: 90%;
	margin:auto;
	margin-top: 30px;
}
#menu .flexbox {
	-webkit-align-items: stretch;
	align-items: stretch;
}
#menu .menuBox li{
	border: 2px solid #A88E2A;
	border-top: none;
	position: relative;
	margin-bottom: 50px;
}
#menu .menuBox li .inner{
	padding: 30px;
}
#menu .menuBox h3{
	font-weight: bold;
	background-color: #fff;
}
#menu .menuBox .menuTitl{
	position: absolute;
	top: -9px;
	width: 100%;
	display: flex;
    align-items: center;
    text-align: center; /* for no-flexbox browsers */
}
#menu .menuBox .menuTitl::before,
#menu .menuBox .menuTitl::after{
    border-top: 2px solid;
    content: "";
    display: inline; /* for IE */
    flex-grow: 1;
}
#menu .menuBox .menuTitl::before{
	margin-right: 1em;
}
#menu .menuBox .menuTitl::after{
	margin-left: 1em;
}
#menu .menuBox dt{
	margin: 10px 0;
}
#menu .menuBox dd{
	text-align: left;
}
#menu .menuBox .btn_a{
	margin-top: 50px;
	margin-bottom: 10px;
	width: 100%;
}
#menu .menuBox .info p{
	display: inline-block;
}

/***********************************
Q&A
***********************************/
.qa .titleWrp{
	margin-bottom: 30px;
}
.qa .box {
	margin-bottom: 40px;
	padding-bottom: 40px;
	border-bottom: 1px solid #e1dcc5;
}
.qa .box p {
	margin-bottom: 10px;
}
.qa .box .title {
	margin-bottom: 20px;
	font-weight: bold;
}
.qa .box .txt {
	line-height: 30px;
}
@media screen and (max-width:768px){
.qa .box {
	margin-bottom: 50px;
}
.qa .box p {
	margin-bottom: 5px;
}
.qa .box .txt {
	line-height: 24px;
}
#contents .contBox .photo{
	width: 70%;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	margin-bottom: 30px;
}
#contents figcaption{
	width: 100%;
	line-height: 180%;
}	
#point .price .priceList{
	width: 50%;
	margin-left: auto;
	padding-top: 35%;
}
#point .price .priceList li:nth-child(1) .priceBox::before{
	content: "";
	display: block;
	position: absolute;
	width: 160px;
	height: 160px;
	/*padding-top: 100%;*/
	bottom: 20px;
	right: 110%;
}
#point .price .priceList li:nth-child(3) .priceBox::before {
	content: "";
	display: block;
	position: absolute;
	width: 160px;
	height: 160px;
	/*padding-top: 100%;*/
	bottom: -10px;
	right: 110%;
}
}
@media screen and (max-width:480px){

#contents .contBox .photo::before{
	content: url(../../img/contents/straight/natural.svg);
	position: absolute;
}
#point .price .priceList li:nth-child(1) .priceBox::before{
	content: "";
	display: block;
	position: absolute;
	width: 120px;
	height: 120px;
	/*padding-top: 100%;*/
	bottom: 20px;
	right: 110%;
}
#point .price .priceList li:nth-child(3) .priceBox::before {
	content: "";
	display: block;
	position: absolute;
	width: 120px;
	height: 120px;
	/*padding-top: 100%;*/
	bottom: -10px;
	right: 110%;
}
#menu .menuBox li{
	width: 100%;
}
.titleWrp p.subtitl::before,
.titleWrp p.subtitl::after{
	content: "ノノノノ";
	padding: 0 0.5em;
	color: #d6ca90;
	letter-spacing: -2px;
}
}