@charset "utf-8";
/* CSS Document */

/*PC*/
@media print, screen and (min-width: 769px) {

/*-----hed----*/

.com_hed_img {
background:url(../images/reason/hed_img.jpg) center center;
background-size: cover;
height: 350px;
}


.reason_titBox { width: 100%; margin: 0 auto; position: relative; margin-bottom: 50px; }
.reason_box { margin: 0 auto 50px; }
.reason_tit { font-size: 30px; font-weight: bold; color: #233B6C; text-align: left; line-height: 1em; margin-bottom: 50px; letter-spacing: .1em; }
.reason_tit span { display: inline-block; background:#233B6C; padding:2px; color:#FFF; font-size:0.7em; margin-bottom:20px;}


.outline_font { font-size: 200px; font-weight: bold; font-family: Arial, Helvetica, "sans-serif"; color: #f4f4f4; line-height: 0.9em; position: absolute; right: 0; bottom: -50px; z-index: -1; text-align: right; }
.outline_font2 { font-size: 200px; font-weight: bold; font-family: Arial, Helvetica, "sans-serif"; color: #f4f4f4; line-height: 0.9em; position: absolute; right: 0; bottom: -0px; z-index: -1; text-align: right; }
.reason_subtit { font-size: 18px; font-weight: bold; text-align: left; margin-bottom: 15px; color: #233B6C;  }
.reason_subtit2 { font-size: 18px; font-weight: bold; text-align: left; margin-bottom: 15px; color: #000;  }
.title-sm { margin-bottom: 30px!important;}


.reason_flow {
	width:80%;
	margin:0 auto 60px;
}


/*----------------------------------------------------*/
.maList {
	width:100%;
	padding:0;
	margin:0 0 60px;
	list-style:none;
}

.maList li {
position: relative;
color: #000;
font-size:1.2em;
font-weight:bold;
letter-spacing:0.1em;
padding-left: 1.5em;
margin-bottom: 10px;
}

.maList li:last-child {
margin-bottom: 0;
}

.maList li:before {
font-family: "Font Awesome 5 Free";
content: "\f14a";
position: absolute;
font-size: 1.2em;
left: 0;
top: -5px;
color: #cf0006;
font-weight: normal;
}


.about_imgList { width: 100%; margin: 100px auto 0px; display: flex; flex-wrap: wrap; }
.about_imgBox { flex-basis: 48%; margin-right: 4%; }
.about_imgBox2 { flex-basis: 48%; margin-top: -50px; }
.about_img { width: 100%; margin: 0 auto; }
.about_img2 { width: 100%; margin: 30px auto 0;}
.about_img img,.about_img2 img { width: 100%; height: auto; }


.map_img {
	width:90%;
	margin:0 auto;
}


.flowList {
width: 770px;
margin-left: auto;
margin-right: auto;
margin-bottom: 80px;
}

.flowList li {
padding-bottom: 40px;
margin-bottom: 40px;
border-bottom: #ccc 1px dashed;
position: relative;
}

.flowList li:last-child  {
padding-bottom: 0;
margin-bottom: 0;
border-bottom: none;
}

.fukidasi {
position: absolute;
top: -20px;
right: -40px;
}
.fukidasi p{
padding: 20px 30px;	/* 蜀��縺ｮ菴咏區 */
position: relative;
z-index: 0;
}
.fukidasi p:before{
background: repeating-linear-gradient(-45deg, #f5d5da, #f5d5da 5px, #fcf0f1 0, #fcf0f1 10px); /* 繧ｹ繝医Λ繧､繝励�濶ｲ */
content: '';
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
z-index: -2;
border-radius: 10px;
}
.fukidasi p:after{
background: #fff; /* 閭梧勹濶ｲ */
content: '';
position: absolute;
top: 8px;	/* 繧ｹ繝医Λ繧､繝鈴Κ蛻��螟ｪ縺輔�荳� */
bottom: 8px;	/* 繧ｹ繝医Λ繧､繝鈴Κ蛻��螟ｪ縺輔�荳� */
left: 8px;	/* 繧ｹ繝医Λ繧､繝鈴Κ蛻��螟ｪ縺輔�蟾ｦ */
right: 8px;	/* 繧ｹ繝医Λ繧､繝鈴Κ蛻��螟ｪ縺輔�蜿ｳ */
z-index: -1;
border-radius: 6px;
}

.flowList h4 {
position: relative;
margin-bottom: 15px;
}

span.no {
position: absolute;
left: 0;
top: 0;
font-family: 'Slabo 27px', serif;
font-size: 3.6rem;
letter-spacing: 0.1em;
color: #e8a02b;
font-weight: normal;
}

span.no:after {
content: "";
display: block;
position: absolute;
left: 50px;
top: 4px;
background-color: #000;
-webkit-transform: skewX(-40deg);
transform: skewX(-40deg);
height: 43px;
width: 1px;
}

.title_wrap {
padding-top: 18px;
padding-left: 80px;
}

.title {
margin: 0;
padding: 0;
border: 0;
outline: 0;
vertical-align: baseline;
background: transparent;
font-size: 2rem;
letter-spacing: 0.05em;
}


}









/*sp*/
@media only screen and (max-width: 768px) {
/*-----hed----*/

.com_hed_img {
background:url(../images/reason/hed_img.jpg) center center;
background-size: cover;
height: 170px;
}

.reason_titBox { width: 100%; margin: 0 auto; position: relative;  margin-bottom: 50px; overflow:hidden;}
.reason_box { margin: 0 auto 50px; }
.reason_tit { font-size: 20px; font-weight: bold; color: #233B6C; text-align: left; line-height: 1.8em; margin-bottom: 30px; }

.outline_font { font-size: 100px; font-weight: bold; font-family: Arial, Helvetica, "sans-serif"; color: #f4f4f4; line-height: 1em; position: absolute; right: -150px; bottom: -50px; z-index: -1; text-align: right; }
.outline_font2 { font-size: 200px; font-weight: bold; font-family: Arial, Helvetica, "sans-serif"; color: #f4f4f4; line-height: 1em; position: absolute; right: 0; bottom: -0px; z-index: -1; text-align: right; }
.reason_subtit { font-size: 18px; font-weight: bold; text-align: left; margin-bottom: 15px; color: #233B6C;  }
.reason_subtit2 { font-size: 18px; font-weight: bold; text-align: left; margin-bottom: 15px; color: #000;  }
.title-sm { margin-bottom: 30px!important;}


.reason_flow {
	width:100%;
	margin:0 auto 30px;
}

/*----------------------------------------------------*/
.maList {
	width:100%;
	padding:0;
	margin:0 0 60px;
	list-style:none;
}

.maList li {
position: relative;
color: #000;
font-size:1em;
font-weight:bold;
letter-spacing:0.2em;
padding-left: 1.5em;
margin-bottom: 10px;
}

.maList li:last-child {
margin-bottom: 0;
}

.maList li:before {
font-family: "Font Awesome 5 Free";
content: "\f14a";
position: absolute;
font-size: 1em;
left: 0;
top: 0px;
color: #cf0006;
font-weight: normal;
}



.about_imgList { width: 100%; margin: 50px auto 0px; }
.about_imgBox { flex-basis: 100%; }
.about_imgBox2 { flex-basis: 100%; margin-top: 30px; }
.about_img { width: 100%; margin: 0 auto; }
.about_img2 { width: 100%; margin: 30px auto 0;}
.about_img img,.about_img2 img { width: 100%; height: auto; }

.about_illust { width: 95%; margin: 50px auto 0px; }
.about_illust img { width: 100%; height: auto; }


.map_img {
	width:100%;
	margin:0 auto;
}


.flowList {
width: 100%;
margin-left: auto;
margin-right: auto;
margin-bottom: 40px;
}

.flowList li {
padding-bottom: 20px;
margin-bottom: 20px;
border-bottom: #ccc 1px dashed;
}

.flowList li:last-child  {
padding-bottom: 0;
margin-bottom: 0;
border-bottom: none;
}

.fukidasi {
margin-bottom: 20px;
}
.fukidasi p{
padding: 20px 20px;	/* 蜀��縺ｮ菴咏區 */
position: relative;
z-index: 0;
}
.fukidasi p:before{
background: repeating-linear-gradient(-45deg, #f5d5da, #f5d5da 5px, #fcf0f1 0, #fcf0f1 10px); /* 繧ｹ繝医Λ繧､繝励�濶ｲ */
content: '';
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
z-index: -2;
border-radius: 10px;
}
.fukidasi p:after{
background: #fff; /* 閭梧勹濶ｲ */
content: '';
position: absolute;
top: 8px;	/* 繧ｹ繝医Λ繧､繝鈴Κ蛻��螟ｪ縺輔�荳� */
bottom: 8px;	/* 繧ｹ繝医Λ繧､繝鈴Κ蛻��螟ｪ縺輔�荳� */
left: 8px;	/* 繧ｹ繝医Λ繧､繝鈴Κ蛻��螟ｪ縺輔�蟾ｦ */
right: 8px;	/* 繧ｹ繝医Λ繧､繝鈴Κ蛻��螟ｪ縺輔�蜿ｳ */
z-index: -1;
border-radius: 6px;
}

.flowList h4 {
position: relative;
margin-bottom: 15px;
}

span.no {
position: absolute;
left: 0;
top: 0;
font-family: 'Slabo 27px', serif;
font-size: 3rem;
letter-spacing: 0.1em;
color: #e8a02b;
font-weight: normal;
}

span.no:after {
content: "";
display: block;
position: absolute;
left: 40px;
top: 4px;
background-color: #000;
-webkit-transform: skewX(-40deg);
transform: skewX(-40deg);
height: 43px;
width: 1px;
}

.title_wrap {
padding-top: 18px;
padding-left: 60px;
}

.title {
margin: 0;
padding: 0;
border: 0;
outline: 0;
vertical-align: baseline;
background: transparent;
font-size: 2rem;
letter-spacing: 0.05em;
}

}