@charset "UTF-8";

/*==================================================================

CONTENTS_HEADER

==================================================================*/
@media screen and (min-width:1024px) {
.smp{
display:none;
}
.contents_header{
width:100%;
height:350px;
margin:100px auto 50px;
background:url("../../about/images/header_about.jpg") no-repeat 50%;
background-size:cover;
}
}
@media only screen and (min-width:768px) and (max-width:1023px) {
.smp{
display:none;
}
.pc{
display:none;
}
.tablet{
display:block;
}
.contents_header{
width:100%;
height:200px;
margin:100px auto 50px;
background:url("../../about/images/header_about_smp.jpg") no-repeat 50%;
background-size:cover;
}
}
@media only screen and (min-width:320px) and (max-width:767px) {
.pc{
display:none;
}
.contents_header{
width:100%;
height:150px;
margin:80px auto 50px;
background:url("../../about/images/header_about_smp.jpg") no-repeat 50%;
background-size:cover;
}
}









/*==================================================================

GREETING_AREA

==================================================================*/
@media screen and (min-width:1024px) {
.greeting_area{
width:1000px;
margin:0 auto;
padding:10px 0 80px;
}
.greeting_area h3{

font-size:25px;
text-align:center;
background:url("../../images/mark.png") no-repeat center top;
background-size:5%;
padding-top:80px;
margin:2em auto 1em;
letter-spacing:0.1em;
}
.greeting_area h3 span{
position:relative;
display:inline-block;
padding:0 0.5em;
}     
.greeting_area h3 span::before, .greeting_area h3 span::after{
position:absolute;
top:50%;
content:'';
width:1.5em;
height:1px;
background-color:#000;
} 
.greeting_area h3 span::before{
left:100%;
}
.greeting_area h3 span::after{
right:100%;
}
.greeting{
position:relative;
width:100%;
margin:0 auto 30px;
}
.greeting div.message{
position:absolute;
background-color:#FFF;
padding:6em 6em 6em 0;
width:55%;
top:20%;
left:0;
}
.greeting div.message p{
font-size:14px;
line-height:1.8em;
}
.greeting div.message h4{
font-size:15px;
text-align:right;
letter-spacing:0.05em;
margin:1.5em 0 0 auto;
}
.greeting_image{
padding-left:50%;
}
.greeting img{
width:100%;
}
}
@media only screen and (min-width:768px) and (max-width:1023px) {
.greeting_area{
width:98%;
margin:0 auto;
padding:5px 0 0;
}
.greeting_area h3{

font-size:23px;
text-align:center;
background:url("../../images/mark.png") no-repeat center top;
background-size:5%;
padding-top:80px;
margin:1em auto 1em;
letter-spacing:0.1em;
}
.greeting_area h3 span{
position:relative;
display:inline-block;
padding:0 0.5em;
}     
.greeting_area h3 span::before, .greeting_area h3 span::after{
position:absolute;
top:50%;
content:'';
width:1.5em;
height:1px;
background-color:#000;
} 
.greeting_area h3 span::before{
left:100%;
}
.greeting_area h3 span::after{
right:100%;
}
.greeting{
width:100%;
margin:0 auto 30px;
}
.greeting div.message{
background-color:#FBFAF6;
padding:3em;
width:80%;
margin:0 auto;
}
.greeting div.message h4{
font-size:14px;
text-align:right;
letter-spacing:0.05em;
margin:2em 0 0 auto;
}
.greeting div.message p{
font-size:12px;
line-height:1.5em;
}
.greeting_image{
width:50%;
margin:0 auto;
}
.greeting img{
width:100%;
}
}
@media only screen and (min-width:320px) and (max-width:767px) {
.greeting_area{
width:98%;
margin:0 auto;
padding:1px 0 20px;
}
.greeting_area h3{

font-size:20px;
text-align:center;
background:url("../../images/mark.png") no-repeat center top;
background-size:10%;
padding-top:60px;
margin:1em auto 1em;
letter-spacing:0.1em;
}
.greeting_area h3 span{
position:relative;
display:inline-block;
padding:0 0.5em;
}     
.greeting_area h3 span::before, .greeting_area h3 span::after{
position:absolute;
top:50%;
content:'';
width:1.5em;
height:1px;
background-color:#000;
} 
.greeting_area h3 span::before{
left:100%;
}
.greeting_area h3 span::after{
right:100%;
}
.greeting{
width:100%;
margin:0 auto;
}
.greeting div.message{
background-color:#FBFAF6;
padding:2.5em;
width:80%;
margin:0 auto;
}
.greeting div.message h4{
font-size:14px;
text-align:right;
letter-spacing:0.05em;
margin:1.5em 0 0 auto;
}
.greeting div.message p{
font-size:14px;
line-height:1.35em;
}
.greeting_image{
width:70%;
margin:0 auto;
}
.greeting img{
width:100%;
}
}









/*==================================================================

OUTLINE_AREA

==================================================================*/
@media screen and (min-width:1024px) {
.outline_area{
width:1000px;
margin:0 auto;
padding:10px 0 50px;
}
.outline_area h3{

font-size:25px;
text-align:center;
background:url("../../images/mark.png") no-repeat center top;
background-size:5%;
padding-top:80px;
margin:2em auto 2em;
letter-spacing:0.3em;
}
.outline_area h3 span{
position:relative;
display:inline-block;
padding:0 0.5em;
}     
.outline_area h3 span::before, .outline_area h3 span::after{
position:absolute;
top:50%;
content:'';
width:1.5em;
height:1px;
background-color:#000;
} 
.outline_area h3 span::before{
left:100%;
}
.outline_area h3 span::after{
right:100%;
}
.outline_area img{
width:40%;
float:left;
margin-top:30px;
}
.outline_area dl{

font-size:14px;
width:57%;
float:left;
margin:0 0 0 3%;
}
.outline_area dl dt{
width:30%;
margin:0 5% 0 0;
float:left;
padding:0.6em 0;
text-align:right;
letter-spacing:0.01em;
}
.outline_area dl dd{
width:65%;
margin:0;
float:left;
padding:0.6em 0;
text-align:left;
}
.outline_area dl dd span{
font-size:0.8em;
}
}
@media only screen and (min-width:768px) and (max-width:1023px) {
.outline_area{
width:98%;
margin:0 auto;
padding:5px 0 20px;
}
.outline_area h3{

font-size:23px;
text-align:center;
background:url("../../images/mark.png") no-repeat center top;
background-size:5%;
padding-top:80px;
margin:2em auto 1em;
letter-spacing:0.3em;
}
.outline_area h3 span{
position:relative;
display:inline-block;
padding:0 0.5em;
}     
.outline_area h3 span::before, .outline_area h3 span::after{
position:absolute;
top:50%;
content:'';
width:1.5em;
height:1px;
background-color:#000;
} 
.outline_area h3 span::before{
left:100%;
}
.outline_area h3 span::after{
right:100%;
}
.outline_area img{
width:50%;
margin:0 25% 15px;
}
.outline_area dl{

font-size:13px;
width:70%;
margin:0 auto 0;
}
.outline_area dl dt{
width:30%;
margin:0 5% 0 0;
float:left;
padding:0.4em 0;
text-align:right;
letter-spacing:0.01em;
}
.outline_area dl dd{
width:65%;
margin:0;
float:left;
padding:0.4em 0;
text-align:left;
}
.outline_area dl dd span{
font-size:0.8em;
}
}
@media only screen and (min-width:320px) and (max-width:767px) {
.outline_area{
width:98%;
margin:30px auto;
padding:0px;
}
.outline_area h3{

font-size:20px;
text-align:center;
background:url("../../images/mark.png") no-repeat center top;
background-size:10%;
padding-top:60px;
margin:1em auto 1em;
letter-spacing:0.3em;
}
.outline_area h3 span{
position:relative;
display:inline-block;
padding:0 0.5em;
}     
.outline_area h3 span::before, .outline_area h3 span::after{
position:absolute;
top:50%;
content:'';
width:1.5em;
height:1px;
background-color:#000;
} 
.outline_area h3 span::before{
left:100%;
}
.outline_area h3 span::after{
right:100%;
}
.outline_area img{
width:80%;
margin:0 10% 15px;
}
.outline_area dl{
font-weight:500;
font-size:14px;
width:80%;
margin:0 auto;
}
.outline_area dl dt{
font-size:0.9em;
text-align:center;
letter-spacing:0.1em;
background:#000;
color:#FFF;
padding:0.15em 0.3em;
margin-bottom:0.5em;
}
.outline_area dl dd{

margin:0 0 0.5em 0;
padding:0 0 0.1em;
text-align:left;
}
.outline_area dl dd span{
font-size:0.8em;
}
}
#google_map{
position:relative;
padding-bottom:30%;
padding-top:30px;
height:0;
overflow:hidden;
}
#google_map iframe,
#google_map object,
#google_map embed{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}








/*==================================================================

MEDIA_AREA

==================================================================*/
@media screen and (min-width:1024px) {
#media{
margin-top:-100px;
padding-top:100px;
}
.media_area{
width:1000px;
margin:0 auto;
padding:10px 0 20px;
}
.media_area h3{

font-size:25px;
text-align:center;
background:url("../../images/mark.png") no-repeat center top;
background-size:5%;
padding-top:80px;
margin:2em auto 2em;
letter-spacing:0.3em;
}
.media_area h3 span{
position:relative;
display:inline-block;
padding:0 0.5em;
}     
.media_area h3 span::before, .media_area h3 span::after{
position:absolute;
top:50%;
content:'';
width:1.5em;
height:1px;
background-color:#000;
} 
.media_area h3 span::before{
left:100%;
}
.media_area h3 span::after{
right:100%;
}
.accordion{
width:98%;
margin:1em auto;
}
.toggle{
display:none;
}
.option{
position:relative;
margin-bottom:1em;
}
.title,
.content{
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
transform:translateZ(0);
transition:all 0.3s;
}
.title{
font-weight:500;
font-size:25px;
letter-spacing:0.1em;
border:solid 1px #000;
padding:0.8em 1.2em 0.8em 3em;
display:block;
color:#000;
background:url("../../images/mark.png") no-repeat 3%;
background-size:2.4%;
background-color:#FBFAF6;
}
.title span{

font-size:0.8em;
letter-spacing:0.1em;
margin-left:0.3em;
}
.title::after,
.title::before{
content:"";
position:absolute;
right:1.75em;
top:0.7em;
width:1px;
height:1em;
background-color:#000;
transition:all 0.3s;
}
.title::after{
transform:rotate(90deg);
}
.content{
width:100%;
margin:0 auto;
max-height:0;
overflow:hidden;
}
.toggle:checked + .title + .content{
max-height:2000px;
transition:all 1.5s;
}
.toggle:checked + .title::before{
transform:rotate(90deg) !important;
}
.content dl{
width:90%;
margin:1em auto 2em;
font-size:12px;
display:flex;
flex-wrap:wrap;
}
.content dl dt{
float:left;
width:9%;
padding-top:0.5em;
padding-bottom:0.5em;
border-bottom:dashed 1px #AAA;
letter-spacing:0.07em;
}
.content dl dd{
float:left;
width:90%;
padding-top:0.5em;
padding-bottom:0.5em;
padding-left:1%;
border-bottom:dashed 1px #AAA;
}
.content dl dd span{
background-color:#000;
padding:0.3em 0.7em;
margin-right:1em;
color:#FFF;
font-size:0.9em;
letter-spacing:0.1em;
}
.content dl dd span.kana{
letter-spacing:-0.1em;
}
.media_area h6{
width:50%;
margin:50px auto 0;
}
}
@media only screen and (min-width:768px) and (max-width:1023px) {
#media{
margin-top:-100px;
padding-top:100px;
}
.media_area{
width:98%;
margin:0 auto;
padding:5px 0 20px;
}
.media_area h3{

font-size:23px;
text-align:center;
background:url("../../images/mark.png") no-repeat center top;
background-size:4%;
padding-top:80px;
margin:2em auto 1em;
letter-spacing:0.3em;
}
.media_area h3 span{
position:relative;
display:inline-block;
padding:0 0.5em;
}     
.media_area h3 span::before, .media_area h3 span::after{
position:absolute;
top:50%;
content:'';
width:1.5em;
height:1px;
background-color:#000;
} 
.media_area h3 span::before{
left:100%;
}
.media_area h3 span::after{
right:100%;
}
.accordion{
width:98%;
margin:1em auto;
}
.toggle{
display:none;
}
.option{
position:relative;
margin-bottom:1em;
}
.title,
.content{
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
transform:translateZ(0);
transition:all 0.3s;
}
.title{
font-weight:500;
font-size:20px;
letter-spacing:0.1em;
border:solid 1px #000;
padding:0.8em 1.2em 0.8em 3em;
display:block;
color:#000;
background:url("../../images/mark.png") no-repeat 3%;
background-size:3%;
background-color:#FBFAF6;
}
.title span{

font-size:0.8em;
letter-spacing:0.1em;
margin-left:0.3em;
}
.title::after,
.title::before{
content:"";
position:absolute;
right:1.75em;
top:0.8em;
width:1px;
height:1em;
background-color:#000;
transition:all 0.3s;
}
.title::after{
transform:rotate(90deg);
}
.content{
width:100%;
margin:0 auto;
max-height:0;
overflow:hidden;
}
.toggle:checked + .title + .content{
max-height:2000px;
transition:all 1.5s;
}
.toggle:checked + .title::before{
transform:rotate(90deg) !important;
}
.content dl{
margin:1em auto 2em;
font-size:12px;
display:flex;
flex-wrap:wrap;
}
.content dl dt{
float:left;
width:11%;
padding-top:0.5em;
padding-bottom:0.5em;
border-bottom:dashed 1px #AAA;
letter-spacing:0.07em;
}
.content dl dd{
float:left;
width:88%;
padding-top:0.5em;
padding-bottom:0.5em;
padding-left:1%;
border-bottom:dashed 1px #AAA;
}
.content dl dd span{
background-color:#000;
padding:0.3em 0.7em;
margin-right:1em;
color:#FFF;
font-size:0.9em;
letter-spacing:0.1em;
}
.content dl dd span.kana{
letter-spacing:-0.1em;
}
.media_area h6{
width:60%;
margin:35px auto 0;
}
}
@media only screen and (min-width:320px) and (max-width:767px) {
#media{
margin-top:-80px;
padding-top:80px;
}
.media_area{
width:98%;
margin:30px auto;
padding:0px;
}
.media_area h3{

font-size:20px;
text-align:center;
background:url("../../images/mark.png") no-repeat center top;
background-size:10%;
padding-top:60px;
margin:1em auto 1em;
letter-spacing:0.3em;
}
.media_area h3 span{
position:relative;
display:inline-block;
padding:0 0.5em;
}     
.media_area h3 span::before, .media_area h3 span::after{
position:absolute;
top:50%;
content:'';
width:1.5em;
height:1px;
background-color:#000;
} 
.media_area h3 span::before{
left:100%;
}
.media_area h3 span::after{
right:100%;
}
.accordion{
width:100%;
margin:1em auto;
}
.toggle{
display:none;
}
.option{
position:relative;
margin-bottom:1em;
}
.title,
.content{
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
transform:translateZ(0);
transition:all 0.3s;
}
.title{
font-weight:500;
font-size:18px;
letter-spacing:0.1em;
border:solid 1px #000;
padding:0.8em 1.5em 0.8em 2.5em;
display:block;
color:#000;
background:url("../../images/mark.png") no-repeat 3%;
background-size:5%;
background-color:#FBFAF6;
}
.title span{

font-size:0.8em;
letter-spacing:0.1em;
margin-left:0.3em;
}
.title::after,
.title::before{
content:"";
position:absolute;
right:1.5em;
top:1.0em;
width:1px;
height:0.75em;
background-color:#000;
transition:all 0.3s;
}
.title::after{
transform:rotate(90deg);
}
.content{
width:100%;
margin:0 auto;
max-height:0;
overflow:hidden;
}
.toggle:checked + .title + .content{
max-height:5000px;
transition:all 1.5s;
}
.toggle:checked + .title::before{
transform:rotate(90deg) !important;
}
.content dl{
margin:0.5em auto 1em;
font-size:12px;
}
.content dl dt{
padding-top:0.4em;
padding-bottom:0;
letter-spacing:0.07em;
}
.content dl dd{
padding-bottom:0.3em;
border-bottom:dashed 1px #AAA;
}
.content dl dd span{
background-color:#000;
padding:0.3em 0.7em;
margin-right:1em;
color:#FFF;
font-size:0.8em;
letter-spacing:0.1em;
}
.content dl dd span.kana{
letter-spacing:-0.1em;
}
.media_area h6{
width:80%;
margin:30px auto 0;
}
}









/*==================================================================

MARCHE_AREA

==================================================================*/
@media screen and (min-width:1024px) {
.marche_area{
width:1000px;
margin:0 auto;
padding:10px 0 30px;
}
.marche_area h3{

font-size:25px;
text-align:center;
background:url("../../images/mark.png") no-repeat center top;
background-size:5%;
padding-top:80px;
margin:2em auto 2em;
letter-spacing:0.3em;
}
.marche_area h3 span{
position:relative;
display:inline-block;
padding:0 0.5em;
}     
.marche_area h3 span::before, .marche_area h3 span::after{
position:absolute;
top:50%;
content:'';
width:1.5em;
height:1px;
background-color:#000;
} 
.marche_area h3 span::before{
left:100%;
}
.marche_area h3 span::after{
right:100%;
}
.swiper-container{
width:45%;
float:left;
}
.swiper-wrapper{
width:100%;
height:auto;
}
.swiper-slide{
width:100%;
height:auto;
text-align:center;
}
.marche_area p{
width:45%;
float:left;
margin:0 0 0 5%;
line-height:1.65em;
}
}
@media only screen and (min-width:768px) and (max-width:1023px) {
.marche_area{
width:98%;
margin:0 auto;
padding:5px 0 20px;
}
.marche_area h3{

font-size:23px;
text-align:center;
background:url("../../images/mark.png") no-repeat center top;
background-size:4%;
padding-top:80px;
margin:2em auto 1em;
letter-spacing:0.3em;
}
.marche_area h3 span{
position:relative;
display:inline-block;
padding:0 0.5em;
}     
.marche_area h3 span::before, .marche_area h3 span::after{
position:absolute;
top:50%;
content:'';
width:1.5em;
height:1px;
background-color:#000;
} 
.marche_area h3 span::before{
left:100%;
}
.marche_area h3 span::after{
right:100%;
}
.swiper-container{
width:45%;
margin:0 auto;
}
.swiper-wrapper{
width:100%;
height:auto;
}
.swiper-slide{
width:100%;
height:auto;
text-align:center;
}
.marche_area p{
width:90%;
margin:20px auto 0;
line-height:1.55em;
}
}
@media only screen and (min-width:320px) and (max-width:767px) {
.marche_area{
width:98%;
margin:30px auto;
padding:0px;
}
.marche_area h3{

font-size:20px;
text-align:center;
background:url("../../images/mark.png") no-repeat center top;
background-size:10%;
padding-top:60px;
margin:1em auto 1em;
letter-spacing:0.3em;
}
.marche_area h3 span{
position:relative;
display:inline-block;
padding:0 0.5em;
}     
.marche_area h3 span::before, .marche_area h3 span::after{
position:absolute;
top:50%;
content:'';
width:1.5em;
height:1px;
background-color:#000;
} 
.marche_area h3 span::before{
left:100%;
}
.marche_area h3 span::after{
right:100%;
}
.swiper-container{
width:80%;
margin:0 auto;
}
.swiper-wrapper{
width:100%;
height:auto;
}
.swiper-slide{
width:100%;
height:auto;
text-align:center;
}
.marche_area p{
width:90%;
margin:20px auto 0;
line-height:1.35em;
}
}









/*==================================================================

CSR_AREA

==================================================================*/
@media screen and (min-width:1024px) {
.csr_area{
width:1000px;
margin:0 auto;
padding:10px 0 30px;
}
.csr_area h3{

font-size:25px;
text-align:center;
background:url("../../images/mark.png") no-repeat center top;
background-size:5%;
padding-top:80px;
margin:2em auto 2em;
letter-spacing:0.3em;
}
.csr_area h3 span{
position:relative;
display:inline-block;
padding:0 0.5em;
}     
.csr_area h3 span::before, .csr_area h3 span::after{
position:absolute;
top:50%;
content:'';
width:1.5em;
height:1px;
background-color:#000;
} 
.csr_area h3 span::before{
left:100%;
}
.csr_area h3 span::after{
right:100%;
}
.csr_area ul{
overflow:hidden;
}
.csr_area ul li{
width:30%;
padding:30px 1.5%;
float:left;
}
.csr_area ul li img{
width:100%;
height:auto;
margin:0 auto 15px;
border-radius:50%;
}
.csr_area ul li h6{

font-size:20px;
text-align:center;
letter-spacing:0.07em;
margin-bottom:0.8em;
}
}
@media only screen and (min-width:768px) and (max-width:1023px) {
.csr_area{
width:98%;
margin:0 auto;
padding:5px 0 20px;
}
.csr_area h3{

font-size:23px;
text-align:center;
background:url("../../images/mark.png") no-repeat center top;
background-size:4%;
padding-top:80px;
margin:2em auto 1em;
letter-spacing:0.3em;
}
.csr_area h3 span{
position:relative;
display:inline-block;
padding:0 0.5em;
}     
.csr_area h3 span::before, .csr_area h3 span::after{
position:absolute;
top:50%;
content:'';
width:1.5em;
height:1px;
background-color:#000;
} 
.csr_area h3 span::before{
left:100%;
}
.csr_area h3 span::after{
right:100%;
}
.csr_area ul{
overflow:hidden;
}
.csr_area ul li{
width:30%;
padding:20px 1.5%;
float:left;
}
.csr_area ul li img{
width:100%;
height:auto;
margin:0 auto 15px;
border-radius:50%;
}
.csr_area ul li h6{

font-size:16px;
text-align:center;
letter-spacing:0.07em;
margin-bottom:0.8em;
}
.csr_area ul li p{
font-size:12px;
line-height:1.3em;
}
}
@media only screen and (min-width:320px) and (max-width:767px) {
.csr_area{
width:98%;
margin:30px auto;
padding:0px;
}
.csr_area h3{

font-size:20px;
text-align:center;
background:url("../../images/mark.png") no-repeat center top;
background-size:10%;
padding-top:60px;
margin:1em auto 1em;
letter-spacing:0.3em;
}
.csr_area h3 span{
position:relative;
display:inline-block;
padding:0 0.5em;
}     
.csr_area h3 span::before, .csr_area h3 span::after{
position:absolute;
top:50%;
content:'';
width:1.5em;
height:1px;
background-color:#000;
} 
.csr_area h3 span::before{
left:100%;
}
.csr_area h3 span::after{
right:100%;
}
.csr_area ul{
}
.csr_area ul li{
width:90%;
padding:20px 5%;
}
.csr_area ul li img{
width:80%;
height:auto;
margin:0 10% 10px;
border-radius:50%;
}
.csr_area ul li h6{

font-size:18px;
text-align:center;
letter-spacing:0.07em;
margin-bottom:0.5em;
}
.csr_area ul li p{
font-size:12px;
line-height:1.3em;
}
}









/*==================================================================

SDGS_AREA

==================================================================*/
@media screen and (min-width:1024px) {
.sdgs_area{
width:1000px;
margin:0 auto;
padding:10px 0 30px;
}
.sdgs_area h4{
width:55%;
margin:0 auto;
}
.sdgs_area h3{

font-size:25px;
text-align:center;
background:url("../../images/mark.png") no-repeat center top;
background-size:5%;
padding-top:80px;
margin:2em auto 2em;
letter-spacing:0.05em;
}
.sdgs_area h3 span{
position:relative;
display:inline-block;
padding:0 0.5em;
}     
.sdgs_area h3 span::before, .sdgs_area h3 span::after{
position:absolute;
top:50%;
content:'';
width:1.5em;
height:1px;
background-color:#000;
} 
.sdgs_area h3 span::before{
left:100%;
}
.sdgs_area h3 span::after{
right:100%;
}
.sdgs_area p{
background:#FBFAF6;
border:1px solid #4D4D4D;
padding:3em;
line-height:1.5em;
}
.sdgs_area ol{
width:80%;
margin:50px auto 0;
overflow:hidden;
}
.sdgs_area ol li{
width:40%;
margin:0 5%;
float:left;
}
.sdgs_area ol li img{
width:50%;
margin:0 25%;
}
.sdgs_area ol li h5.sdgs08{
font-size:15px;
color:#970B31;
margin:1em 0;
line-height:1.5em;
}
.sdgs_area ol li h5.sdgs12{
font-size:15px;
color:#D39200;
margin:1em 0;
line-height:1.5em;
}
.sdgs_area ol li{
font-size:14px;
line-height:1.5em;
}
.sdgs_area ol li span{
border-bottom:1px solid #000;
padding-bottom:0.1em;
}
}
@media only screen and (min-width:768px) and (max-width:1023px) {
.sdgs_area{
width:98%;
margin:0 auto;
padding:5px 0 10px;
}
.sdgs_area h4{
width:55%;
margin:0 auto;
}
.sdgs_area h3{

font-size:23px;
text-align:center;
background:url("../../images/mark.png") no-repeat center top;
background-size:4%;
padding-top:80px;
margin:2em auto;
letter-spacing:0.05em;
}
.sdgs_area h3 span{
position:relative;
display:inline-block;
padding:0 0.5em;
}     
.sdgs_area h3 span::before, .sdgs_area h3 span::after{
position:absolute;
top:50%;
content:'';
width:1.5em;
height:1px;
background-color:#000;
} 
.sdgs_area h3 span::before{
left:100%;
}
.sdgs_area h3 span::after{
right:100%;
}
.sdgs_area p{
background:#FBFAF6;
border:1px solid #4D4D4D;
padding:3em;
line-height:1.5em;
}
.sdgs_area ol{
width:80%;
margin:50px auto 0;
overflow:hidden;
}
.sdgs_area ol li{
width:40%;
margin:0 5%;
float:left;
}
.sdgs_area ol li img{
width:50%;
margin:0 25%;
}
.sdgs_area ol li h5.sdgs08{
font-size:14px;
color:#970B31;
margin:1em 0;
line-height:1.35em;
}
.sdgs_area ol li h5.sdgs12{
font-size:14px;
color:#D39200;
margin:1em 0;
line-height:1.35em;
}
.sdgs_area ol li{
font-size:13px;
line-height:1.5em;
}
.sdgs_area ol li span{
border-bottom:1px solid #000;
padding-bottom:0.1em;
}
}
@media only screen and (min-width:320px) and (max-width:767px) {
.sdgs_area{
width:98%;
margin:30px auto 40px;
padding:0px;
}
.sdgs_area h4{
width:80%;
margin:0 auto;
}
.sdgs_area h3{

font-size:20px;
text-align:center;
background:url("../../images/mark.png") no-repeat center top;
background-size:10%;
padding-top:60px;
margin:1em auto 1.5em;
letter-spacing:0.05em;
}
.sdgs_area h3 span{
position:relative;
display:inline-block;
padding:0 0.5em;
}     
.sdgs_area h3 span::before, .sdgs_area h3 span::after{
position:absolute;
top:50%;
content:'';
width:1.5em;
height:1px;
background-color:#000;
} 
.sdgs_area h3 span::before{
left:100%;
}
.sdgs_area h3 span::after{
right:100%;
}
.sdgs_area p{
font-size:13px;
background:#FBFAF6;
border:1px solid #4D4D4D;
padding:2em;
line-height:1.35em;
}
.sdgs_area ol{
width:80%;
margin:40px auto 0;
}
.sdgs_area ol li{
width:90%;
margin:0 5% 3em;
}
.sdgs_area ol li img{
width:60%;
margin:0 20%;
}
.sdgs_area ol li h5.sdgs08{
font-size:14px;
color:#970B31;
margin:0.5em 0 1em;
line-height:1.35em;
}
.sdgs_area ol li h5.sdgs12{
font-size:14px;
color:#D39200;
margin:0.5em 0 1em;
line-height:1.35em;
}
.sdgs_area ol li{
font-size:13px;
line-height:1.5em;
}
.sdgs_area ol li span{
border-bottom:1px solid #000;
padding-bottom:0.1em;
}
}