@charset "UTF-8";

/* /menu/type/
-------------------*/
/*body {
background: url("../images/bg_01.png") right 500px no-repeat;
background-size: 30% auto;
}*/
.Inr {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 60px;
}
 .txt {
    line-height: 2!important;
    margin: 0 auto;
    text-align: left;
}
#area01{
	padding-bottom: 80px;
}
#area01 .inr{
position: relative;
}	
#area01 h2 {
text-align: center;
font-size: 34px;
font-size: 3.4rem;
font-weight: 400;
margin-bottom: 60px;
font-family: 'Noto Serif JP', serif;
}
#area01 .catch{
padding-bottom: 40px;
line-height: 2!important;
width: 660px;
margin: 0 auto;
text-align: left;
}


#area02,#area03,#area04 {
background: #f5f1ef;
padding-bottom: 80px;
}
#area02 .imgBox,#area03 .imgBox,#area04 .imgBox{
position: relative;
}
#area02 .titleBox,#area03 .titleBox,#area04 .titleBox{
color: #fff;
text-align: center;
width: 90%;
max-width: 1400px;
  position: absolute;
  left: 50%;
  transform:translateX(-50%);
  -webkit- transform:translateX(-50%);
  top: 21%;
  font-family: 'Noto Serif JP', serif;
}
#area02 .titleBox h2 span,#area03 .titleBox h2 span,#area04 .titleBox h2 span{
display: block;
font-size: 21px;
font-size: 2.1rem;	
color: #b07121;
background-color: #FFF;
font-weight: 200;
line-height: 1.7;
margin:0 auto 30px auto;
padding: 4px 15px;
border-radius: 30px;
width: 260px;
}
#area02 .titleBox h2,#area03 .titleBox h2,#area04 .titleBox h2{
display: block;
font-size: 36px;
font-size: 3.6rem;
font-weight: 200;
	margin-bottom: 15px;
}
#area02 .titleBox .catchTxt,#area03 .titleBox .catchTxt,#area04 .titleBox .catchTxt{
font-size: 21px;
font-size: 2.1rem;
}

#area02 .whBox,#area03 .whBox{
width: 90%;
max-width: 1400px;
margin: 80px auto 0 auto;
position: relative;
padding: 30px;
background: #fff;
box-shadow: 0 0 6px rgb(0,0,0,0.1);
position: relative;
}
#area02 .whBox .boxArea,#area03 .whBox .boxArea,#area04 .whBox .boxArea{
}
#area02 .whBox .boxArea:after,#area03 .whBox .boxArea:after,#area04 .whBox .boxArea:after{
content: "";
display: block;
clear: both;
}
#area02 .whBox .boxArea .box,#area03 .whBox .boxArea .box{
width: 44%;
margin: 3%; 
float: left;
}
#area02 .whBox .boxArea .box h3,#area03 .whBox .boxArea .box h3,#area04 .whBox .boxArea .box h3{
	font-size: 24px;
	font-size: 2.4rem;
	font-weight: 400;
	color: #b07121;
	text-align: center;
	background-color: #f2f2f2;
	padding: 7px;
	font-family: 'Noto Serif JP', serif;

}
#area02 .whBox .boxArea .box .infoBox,#area03 .whBox .boxArea .box .infoBox,#area04 .whBox .boxArea .box .infoBox{
	padding-top: 20px;
}
#area02 .whBox .boxArea .box .infoBox:after,#area03 .whBox .boxArea .box .infoBox:after,#area04 .whBox .boxArea .box .infoBox:after{
content: "";
display: block;
clear: both;
}
#area02 .whBox .boxArea .box .infoBox .imgArea,#area03 .whBox .boxArea .box .infoBox .imgArea{
width: 35%;
margin-right: 5%;
float: left;
}
#area02 .whBox .boxArea .box .infoBox .txt,#area03 .whBox .boxArea .box .infoBox .txt,#area04 .whBox .boxArea .box .infoBox .txt{
	padding-top: 20px;
    width: 60%;
	float: left;
}
#area03 .whBox .boxArea h4{
	font-size: 21px;
	font-size:2.1rem;
	background-color: #b07121;
	color: #fff;
	padding: 12px 0;
	border-radius: 5px;
	width: 400px;
	margin: -46px auto 46px auto;
	font-family: 'Noto Serif JP', serif;
	font-weight: 400;
	text-align: center;
}
#area03 .whBox .boxArea .column3{
	width: 94%;
	margin: 3% auto;
}
#area03 .whBox .boxArea .column3:nth-last-child(1){
	margin: 0 auto 3% auto;
}
#area03 .whBox .boxArea .column3:after{
	content: "";
	display: block;
	clear: both;
}
#area03 .whBox .boxArea .column3 li{
	float: left;
}
#area03 .whBox .boxArea .column3 li img{
	width: 100%;
}
#area03 .whBox .boxArea .column3 li.box{
	width: 20%;
}
#area03 .whBox .boxArea .column3 li.box h5{
	font-size: 18px;
	font-size: 1.8rem;
	font-weight: 300;
	color: #b07121;
	padding: 4px 0;
	background-color: #f2f2f2;
	border-radius: 20px;
	text-align: center;
	margin: 10px auto;
	
}
#area03 .whBox .boxArea .column3 li.arrow{
	width: 5%;
	margin: 3%;
	margin-top: 12%;
	
}
#area04 .whBox {
    width: 90%;
    max-width: 1400px;
    margin: 80px auto 0 auto;
    position: relative;
    padding: 60px;
    background: #fff;
    box-shadow: 0 0 6px rgb(0,0,0,0.1);
    position: relative;
}
#area04 .whBox .boxArea .box h3{
	margin-bottom: 30px;
	
}
#area04 .whBox .boxArea .box ul.infoBox{
	margin-bottom: 30px;
}
#area04 .whBox .boxArea .box ul.infoBox:nth-child(2){
	margin-bottom: 0px;
}
#area04 .whBox .boxArea .box ul.infoBox:after{
	content: "";
	display: block;
	clear: both;
}
#area04 .whBox .boxArea .box ul.infoBox li{
	width: 15%;
	float: left;
	margin: 20px 0.8% ;
}
#area04 .whBox .boxArea .box ul.infoBox li h4{
	text-align: center;
	margin-top: 10px;
}
.stepBox {
padding-top: 80px;
}
/*.stepBox .arrowLine{
background: #910700;
background: -moz-linear-gradient(left, #b98c04 0%, #d60a00 80%, #910700 100%);
background: -webkit-gradient(linear, left center, right center, from(#b98c04), color-stop(80%, #d60a00), to(#910700));
background: -webkit-linear-gradient(left, #b98c04 0%, #d60a00 80%, #910700 100%);
background: -o-linear-gradient(left, #b98c04 0%, #d60a00 80%, #910700 100%);
background: linear-gradient(to right, #b98c04 0%, #d60a00 80%, #910700 100%);
height: 15px;
position: relative;
}
.stepBox .arrowLine:after {
content: "";
display: block;
position: absolute;
right: -15px;
top: -7px;
  width: 0;
  height: 0;
  border-left: 15px solid #910700;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
}*/
.stepBox ul {
display: flex;
justify-content: space-between;
}
.stepBox ul li {
width:15%;
position: relative;
}
.stepBox ul li .brownHead {
margin-bottom: 0;
}
.stepBox ul li .brownHead span {
padding: 3px 0;
display: block;
font-size: 18px;
font-size: 1.8rem;
margin-top: 10px;
}



@media only screen and (max-width: 1300px) {
.stepBox ul li .brownHead span {
    font-size: 17px;
    font-size: 1.7rem;
}
}

@media only screen and (max-width: 1200px) {
#area02 .titleBox h2 small,#area03 .titleBox h2 small,#area04 .titleBox h2 small {
    font-size: 22px;
    font-size: 2.2rem;
}

#area02 .titleBox .catchTxt,#area03 .titleBox .catchTxt,#area04 .titleBox .catchTxt {
    font-size: 18px;
    font-size: 1.8rem;
}
#area02 .titleBox,#area03 .titleBox,#area04 .titleBox {
    top: 66px;
}
#area03 .whBox h2 {
    font-size: 30px;
    font-size: 3.0rem;
}
#area03 .whBox h3 {
    font-size: 22px;
    font-size: 2.2rem;
}
#area03 .whBox .boxArea .column3{
		margin-bottom: 30px;
	}	
#area03 .whBox .boxArea .column3 li{
	margin-bottom: 0;
}	
#area03 .whBox .boxArea .column3 li.box {
    width: 22.8%;
}
#area03 .whBox .boxArea .column3 li.arrow {
    width: 2.8%;
    margin: 2%;
    margin-top: 18%;
}
.stepBox ul li .brownHead span {
    font-size: 15px;
    font-size: 1.5rem;
}
.stepBox ul li:before {
    font-size: 13px;
    font-size: 1.3rem;
}	
}
@media only screen and (max-width: 1080px) {
.Inr {
    padding-top: 30px;
}
#area02 .titleBox,#area03 .titleBox,#area04 .titleBox {
    top: 50px;
}	
}

/* for sp
-------------------------------------------------------------------------------------*/


@media only screen and (max-width: 900px) {
.is-pc	{
	display: block !important;
}
#area01 h2 {
    font-size: 30px;
    font-size: 3.0rem;
    font-weight: 400;
    margin-bottom: 30px;
}
.stepBox {
    width: 1000px;
}
.stepBox {
    overflow-x: scroll;
    overflow-y: hidden;
}d	
#area02 .titleBox, #area03 .titleBox, #area04 .titleBox {
    top: 46px;
}
#area02 .titleBox h2 span, #area03 .titleBox h2 span, #area04 .titleBox h2 span {
    display: block;
    font-size: 18px;
    font-size: 1.8rem;
    margin: 0 auto 30px auto;
    padding: 3px 10px;
    border-radius: 30px;
    width: 240px;
}	
#area02 .titleBox h2, #area03 .titleBox h2, #area04 .titleBox h2 {
    display: block;
    font-size: 28px;
    font-size: 2.8rem;
    margin-bottom: 20px;
}	
#area02 .whBox, #area03 .whBox {
    margin: 50px auto 0 auto;
}
#area03 .whBox {
    padding: 20px 40px;
}
#area04 .whBox {
    margin: 50px auto 0 auto;
    padding: 30px 60px;
}	
	
	
	
#area01 .flexBox {
flex-wrap: wrap;
}
#area01 .flexBox .Img {
    width: 100%;
    margin-bottom: 30px;
}
/*#area01 .flexBox .infoBox {
    width: 100%;
}*/


#area02 .imgBox {
    line-height: 0;
}
#area03 .whBox {
    padding: 60px 40px;
}

#area03 .whBox.d02 .txt {
    text-align: left;
}
.stepBox {
overflow-x: scroll;
overflow-y: hidden;
}
.stepBox ul {
width: 1000px;
}
.arrowLine{
width: 1000px;
}
.scrollArea{
  overflow: auto; /*スクロールさせる*/
  white-space: nowrap; /*文字の折り返しを禁止*/
  /*width:200px; 今回の設置を分かりやすくするためワザと狭い幅を指定。本来は不必要な指定です。*/
}

/* 以下、スクロールバーを追加 */
.scrollArea::-webkit-scrollbar{　　
 height: 5px;
}
.scrollArea::-webkit-scrollbar-track{
 background: #333;
}
.scrollArea::-webkit-scrollbar-thumb {
 background: #999;
}
	
}
@media only screen and (max-width: 480px) {
.Inr {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 0;
}
	#area01 h2 {
    font-size: 25px;
    font-size: 2.5rem;
    margin-bottom: 15px;
	line-height: 1.6em;
}
#area01 .catch {
    padding-bottom: 30px;
    width: 100%;
}
#area02 .titleBox h2 , #area03 .titleBox h2, #area04 .titleBox h2  {
	line-height: 1.5em;
	font-size: 22px;
	font-size: 2.2rem;
}
#area02 .titleBox h2 span, #area03 .titleBox h2 span, #area04 .titleBox h2 span {
    display: block;
    font-size: 18px;
    font-size: 1.8rem;
    margin: 0 auto 15px auto;
    width: 70%;
}
#area02 .whBox .boxArea .box h3, #area03 .whBox .boxArea .box h3, #area04 .whBox .boxArea .box h3 {
    font-size: 21px;
    font-size: 2.1rem;
}	
	
	
#area01 {
    padding-bottom: 40px;
}
#area02 .imgBox img,#area03 .imgBox img,#area04 .imgBox img{
object-fit: cover;
height: 300px;
}
#area02 .titleBox h2 small,#area03 .titleBox h2 small,#area04 .titleBox h2 small {
    font-size: 18px;
    font-size: 1.8rem;
}

#area02 .titleBox .catchTxt,#area03 .titleBox .catchTxt,#area04 .titleBox .catchTxt {
    font-size: 16px;
    font-size: 1.6rem;
}
#area02 .titleBox,#area03 .titleBox,#area04 .titleBox {
    top: 65px;
}
#area02 .whBox .boxArea .box, #area03 .whBox .boxArea .box {
    width: 100%;
    margin: 3%auto;
    float: none;
}
#area03 .whBox .boxArea h4 {
    font-size: 20px;
    font-size: 2.0rem;
    padding: 12px 0;
    border-radius: 5px;
    width: 90%;
    margin: -60px auto 20px auto;
}
h3, #area03 .whBox .boxArea .box h3, #area04 .whBox .boxArea .box h3 {
    font-size: 21px;
    font-size: 2.1rem;
    padding: 7px;
}	
#area02 .whBox .boxArea .box .infoBox .imgArea, #area03 .whBox .boxArea .box .infoBox .imgArea {
    width: 100%;
    margin-right: 0%;
    float: none;
	text-align: center;

}
#area02 .whBox .boxArea .box .infoBox .imgArea img, #area03 .whBox .boxArea .box .infoBox .imgArea img {
	width: 50%;
	margin: 0 auto;
	}	
#area02 .whBox .boxArea .box .infoBox .txt, #area03 .whBox .boxArea .box .infoBox .txt, #area04 .whBox .boxArea .box .infoBox .txt {
    padding-top: 20px;
    width: 100%;
    float: none;
}	
#area03 .whBox .boxArea .column3 li{
	float: none;
}	
#area03 .whBox .boxArea .column3 li.box {
    width: 100%;
	text-align: center;
	float: none;
	margin: 0 auto;
}
#area03 .whBox .boxArea .column3 li.arrow {
    width: 18%;
    margin: 4% auto;
}
#area03 .whBox .boxArea .column3 li.is-pc{
		display: none !important;
	}	
#area03 .whBox .boxArea .column3 li.sp-pcS{
		display: block !important;
	}	
#area03 .whBox .boxArea .column3 li.box img{
		width: 45%;
		margin: 0 auto;
	text-align: center;
}	

#area03 .whBox .boxArea .column3 li.box h5 {
    padding: 5px 0;
}	
#area03 .whBox .boxArea .column3 {
    margin-bottom: 0px;
}	
#area03 .whBox .boxArea .column3 {
    width: 94%;
    margin: 0% auto;
}	
#area04 .whBox {
    margin: 40px auto 0 auto;
    padding: 20px 20px;
}	
#area02 .titleBox .catchTxt, #area03 .titleBox .catchTxt, #area04 .titleBox .catchTxt {
	line-height: 1.6em;
}	
	
	
#area02 {
    padding-bottom: 40px;
}
#area03 .whBox {
    padding: 40px 20px;
}
#area03 .whBox.d01::before {
    font-size: 40px;
    font-size: 4rem;
    top: -10px;
}
#area03 .whBox.d02::before {
    font-size: 40px;
    font-size: 4rem;
    top: -10px;
}
#area03 .flexBox .Img {
    width: 100%;
}
/*#area03 .flexBox .infoBox {
    width: 100%;
}*/
#area03 .whBox h2 {
    font-size: 22px;
    font-size: 2.2rem;
    text-align: center;
    margin-bottom: 5px;
}
#area03 .whBox h3 {
    font-size: 16px;
    font-size: 1.6rem;
    text-align: center;
}

.pointBox .Img {
    width: 100%;
    margin-bottom: 20px;
}
#area03 .flexBox {
    margin-bottom: 40px;
}
.pointBox dl {
    width: 100%;
}
.pointBox dl dt {
    font-size: 18px;
    font-size: 1.8rem;
    text-align: center;
}
.pointBox dl dd.typeList ul {
justify-content: center;
}
.pointBox dl dd.typeList ul li {
    width: 30%;
    margin-bottom: 20px;
    margin-right: 12px;
}
.pointBox dl dd.typeList ul li:nth-child(3),.pointBox dl dd.typeList ul li:last-child{
margin-right: 0;
}
.pointBox dl dd.typeList ul li span {
    font-size: 14px;
    font-size: 1.4rem;
    padding: 5px 16px;
    margin-top: 5px;
}
.pointBox dl dd.typeList ul li img {
    filter: drop-shadow(0px 0px 3px rgba(0,0,0,0.2));
}
.pointBox {
margin-bottom: 30px;
}
.pointBox dl dd.col4List ul {
flex-wrap: wrap;
}
.pointBox dl dd.col4List ul li {
width: 49%;
margin-bottom: 5px;
}
.faImg {
flex-wrap: wrap;
}
.faImg li {
    width: 50%;
    line-height: 0;
}
#area03 .whBox.d02 h2 {
    padding-top: 30px;
    margin-bottom: 20px;
}
.stepBox {
    padding-top: 20px;
}

#area03 .whBox {
margin-bottom: 30px;
}
#area03 {
    padding-bottom: 40px;
}
#area01 .scrollArea img{
	width: 700px;
	margin-top: 10px;
} 	
.scrollArea ul{
		width: 1000px;
}	
}

.nofloat {
float: none!important;
margin: 0 auto!important;
}