@charset "UTF-8";

#page_main{
background: url("../images/main_about.jpg") no-repeat center center;
background-size: cover;
}

/*----------------------------------------------------------------------------------------------------------------------#msg----------*/

#about{ 
position:relative;
margin:100px auto 0;
width:83%;
}

#about img, #about_btm img{ 
width:100%;
height: auto;
}

#msg{ display: flex; }

.tit_box{ width:20%; }

.tit_box p{
font-size:14px;
color:#78502f;
font-weight: bold;
}

.tit_box h3{
font-size:24px;
font-weight: bold;
margin-top:10px;
}

.tit_box h3 span{
border-bottom:1px solid #333;
padding-bottom:14px;
}

#msg .txt_box{ 
width:70%;
margin-left: 10%;
}

#msg .txt_box h4{
color:#E37059;
font-size:22px;
font-weight: bold;
/*font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";*/
letter-spacing:0.2em;
}

#msg .txt_box p{ margin-top:20px; }

#profile{
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 35px;
}

.prof_img{ width:20%; }

.prof_txt{ width:70%; }

.prof_txt h3{
font-size:12px;
color:#78502f;
font-weight: bold;
}

.prof_txt h4{
font-weight: bold;
margin-top: 10px;
}

.prof_txt h4 span{
color:#E37059;
font-weight: bold;
font-size:10px;
padding-left:15px;
}

.prof_txt p{ margin-top: 10px; }



@media screen and (max-width:1100px){
}

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

#about{ 
position:relative;
margin:30px auto 0;
width:90%;
}

#msg{ display:block; }

.tit_box{ width:100%; }

.tit_box p{
font-size:12px;
}

.tit_box h3{
font-size:20px;
margin-top:6px;
}

.tit_box h3 span{
border-bottom:1px solid #333;
padding-bottom:10px;
}

#msg .txt_box{ 
width:100%;
margin-top:28px;
margin-left:0%;
}

#msg .txt_box h4{
font-size:18px;
letter-spacing:0.1em;
}

#msg .txt_box p{ margin-top:15px; }

#profile{
display:block;
margin-top:40px;
}

.prof_img{ 
width:70%;
margin: 0 auto;
}

.prof_txt{ 
width:100%;
margin-top:20px;
}

}


/*----------------------------------------------------------------------------------------------------------------------#point----------*/


#point{ 
margin-top:150px;
display: flex;
flex-direction: row-reverse;
}

#point ul{
border-top: 1px solid #e6e0db;
padding-top:70px;
width:70%;
margin-right:10%;
display: flex;
flex-wrap: wrap;
}

#point ul li{ 
width:47.6%;
position: relative;
margin-top:70px;
}

#point ul li:nth-child(even){ margin-left: 4.8%; }

#point ul li .number{
font-size:14px;
color:#fff;
background-color:#E37059;
border-radius:50%;
width:45px;
height:45px;
line-height: 45px;
text-align: center;
position: absolute;
top:-22px;
left:-22px;
z-index: 1;
}

#point ul li h4{ 
font-weight: bold;
margin-top: 30px;
position: relative;
padding-left:15px;
line-height: 1.6;
}

#point ul li h4:before{
position: absolute;
top: 0;
left: 0;
content: "";
width: 3px;
height: 100%;
background:#E37059;
border-radius:2px
}


#point ul li p{ margin-top:10px; }


@media screen and (max-width:1100px){
}

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

#point{ 
margin-top:80px;
display: block;
}

#point ul{
border-top:none;
padding-top:10px;
width:100%;
margin-right:0;
display:block;
}

#point ul li{ 
width:95%;
position: relative;
margin-top:50px;
margin-left: 5%;
}

#point ul li:nth-child(even){ margin-left: 5%; }

}

/*----------------------------------------------------------------------------------------------------------------------#large_img----------*/


.large_img{ 
width:91.7%;
height: 700px;
margin-top: 140px;
}

.large_img{
background: url("../images/img_about.jpg") no-repeat center center;
background-size: cover;
}

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

.large_img{ 
height: 550px;
margin-top: 100px;
}

}

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

.large_img{ 
width:95%;
height:400px;
margin-top:80px;
background-position-x: -400px;
}

}


/*----------------------------------------------------------------------------------------------------------------------#outline----------*/

#about_btm{ 
margin:130px auto 0;
width:83%;
}

#outline{ display: flex; }

#outline .tit_box{ width:20%; }

#outline table{
width:70%;
margin-left:10%;
}

#outline table tr th{
border-bottom: 1px dotted #ccc;
padding: 25px 0;
}

#outline table tr td{
border-bottom: 1px dotted #ccc;
padding:25px 0;
}

#outline table tr:first-child th{ padding: 0 0 22px 0; }

#outline table tr:first-child td{ padding: 0 0 22px 0; }

#outline table tr td a{
text-decoration: underline;
color:#E37059;
}

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

#about_btm{ 
margin:80px auto 0;
width:90%;
}

#outline{ display:block; }

#outline .tit_box{ width:100%; }

#outline table{
width:100%;
margin-left:0;
margin:50px auto 0;
font-size:15px;
}

#outline table tr th{ width:25%; }

#outline table tr td{ width:75%; }

}

/*----------------------------------------------------------------------------------------------------------------------#area----------*/

#area{ 
margin:130px auto 0;
width:100%;
display: flex;
}

#area .tit_box{ width:20%; }

#area .cont_box{
width:70%;
margin-left:10%;
padding-top:30px;
}

#area table{ margin-top:20px; }

#area table tr th{
vertical-align: top;
padding: 25px 0 0 0;
width: 25%;
color:#E37059;
}

#area table tr td{
width: 75%;
padding: 25px 0 0 0;
}

#area p{ margin-top:35px; }


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

#area{ 
margin:80px auto 0;
display:block;
}

#area .tit_box{ width:100%; }

#area .cont_box{
width:100%;
margin-left:0;
padding-top:40px;
}

#area table{ 
margin-top:10px;
font-size:15px;
}

#area p{ margin-top:35px; }

#area table td span{ font-weight:bold; }

}



/*----------------------------------------------------------------------------------------------------------------------#step----------*/

#step{ 
margin:130px auto 0;
width:100%;
display: flex;
}

#step .tit_box{ width:20%; }

#step .cont_box{
width:70%;
margin-left:10%;
}

#step .box_step{
display: flex;
justify-content: space-between;
position: relative;
padding-top:100px;
}

#step .cont_box div:first-child{
padding-top:0px;
}

#step .box_step:after{
position: absolute;
top: 0;
left: 40px;
content: "";
width: 1px;
height: 100%;
background:#ccc;
z-index:-1;
}

#step .box_step .number{
width: 80px;
height: 80px;
line-height: 80px;
font-weight:bold;
border: 1px solid #E37059;
border-radius:50%;
text-align: center;
color:#E37059;
background-color:#faf7f1;
}

#step .box_step .txt{
width: 85.7%;
}

#step .box_step h4{
color: #78502f;
font-size:18px;
font-weight:bold;
padding-bottom: 6px;
border-bottom: 1px dotted #ccc;
}

#step .box_step p{ margin-top:10px; }


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

#step{ 
margin:80px auto 0;
display:block;
}

#step .tit_box{ width:100%; }

#step .cont_box{
width:100%;
margin-left:0;
margin-top:40px;
}

#step .box_step{
display: flex;
padding-top:60px;
}

#step .cont_box div:first-child{
padding-top:0px;
}

#step .box_step:after{
left: 25px;
}

#step .box_step .number{
width: 50px;
height: 50px;
line-height: 50px;
font-size:14px;
}

#step .box_step .txt{
width: 80%;
}

#step .box_step h4{
font-size:16px;
}

#step .box_step p{ margin-top:10px; }



}