@charset "UTF-8";

.container { max-width: 100%; padding-left: 0; padding-right: 0; }
.colWrap { display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: wrap; flex-wrap: wrap; }

.border-text { text-align: center; border: 1px solid #000; font-size: 0.875rem; padding: 10px 50px; max-width: 590px; }

@media (min-width:769px) {
    body { padding-right: 0 !important; }
    .border-text { margin: 0 auto 60px; }
}

@media (max-width:768px) {
  .container { width: 100%; padding-left: 0; padding-right: 0; }
  .border-text { padding: 5px; margin: 0 auto 40px; }

}

@media (max-width:480px) {
  .container {  }

}




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

    header

===========================================*/
header { position: relative; }
header h1 { }
.headerScroll { width: 76px; position: absolute; right: 0; left: 0; margin: 0 auto; }


@media (min-width:769px) {
  header { margin-bottom: 85px; }
  header h1 { background: url(/weboc/images/topVisual.jpg) no-repeat center top ; background-size: 2000px; height: 875px; text-align: center; margin-bottom: 80px; }
  header h1::before { content: ''; position: absolute; bottom: 0; left: 0; right: 0; margin: 0 auto; background: url(/weboc/images/topVisualCity.png) no-repeat center bottom; background-size: cover; height: 360px; }
  header h1 img { max-width: 442px; width: 100%; margin-top: 65px; }
  .headerScroll { width: 76px; bottom: -38px; }
}

@media (max-width:768px) {
  header { padding-left: 0; padding-right: 0; margin-bottom: 45px; }
  header h1 { }
  .headerScroll { width: 30px; bottom: -15px; }

}

@media (max-width:480px) {
  header { margin-bottom: 20px; }
}



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

    hello

===========================================*/
#hello { position: relative;}
#hello .img { text-align: center; margin-bottom: 60px; }
#hello p { max-width: 720px; margin: 0 auto; line-height: 1.6;}

#hello .bnr_area {  position: absolute; right: 0; left: 0; margin: 0 auto; z-index: 10;  }

#hello .bnr_area a {  width: 100%; display: block; }


@media (min-width:769px) {
  #hello { padding-bottom: 180px; }
  #hello .img { padding-top: 40px; margin-top: -40px; }
  #hello .img img { max-width: 585px;  }
  #hello p { font-size: 1.1875rem; }

  #hello .bnr_area { max-width: 800px; bottom: -130px; }
  #hello .bnr_area a { height: 260px; }
  #hello .bnr_area a:hover { opacity: 0.8; transition : 0.3s; }
}

@media (max-width:768px) {
  #hello { padding-bottom: 85px; }
  #hello .img { margin-bottom: 30px; padding-left: 20px; padding-right: 20px; padding-top: 10px; margin-top: -10px; }
  #hello .img img { max-width: 350px; width: 100%; }
  #hello p { font-size: 0.875rem; margin-left: 25px; margin-right: 25px; }

  #hello .bnr_area { max-width: 375px; bottom: -60px;  }

}

@media (max-width:480px) {

}



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

    SP_nav

===========================================*/
#menuBtn { width: 60px; height:  60px; position: absolute; top: 0; background: rgba(255, 255, 255, 0.9); z-index: 2; }
#menuBtn span { display: block; margin-top: 14px; margin-left: auto; margin-right: auto; width: 38px; height: 1px; background: #b3b3b3; }
#menuBtn span:nth-of-type(1) { }
#menuBtn span:nth-of-type(2) { }
#menuBtn span:nth-of-type(3) { }

#menuBtn span:nth-of-type(1) { -webkit-animation: menu-bar01 .2s forwards; animation: menu-bar01 .2s forwards; }
@-webkit-keyframes menu-bar01 {
  0% {
    -webkit-transform: translateY(13px) rotate(45deg);
  }
  50% {
    -webkit-transform: translateY(13px) rotate(0);
  }
  100% {
    -webkit-transform: translateY(0) rotate(0);
  }
}
@keyframes menu-bar01 {
  0% {
    transform: translateY(13px) rotate(45deg);
  }
  50% {
    transform: translateY(13px) rotate(0);
  }
  100% {
    transform: translateY(0) rotate(0);
  }
}
#menuBtn span:nth-of-type(2) { transition: all .15s .15s; opacity: 1; }
#menuBtn span:nth-of-type(3) {
-webkit-animation: menu-bar02 .2s forwards; animation: menu-bar02 .2s forwards; }
@-webkit-keyframes menu-bar02 {
  0% {
    -webkit-transform: translateY(-15px) rotate(-45deg);
  }
  50% {
    -webkit-transform: translateY(-15px) rotate(0);
  }
  100% {
    -webkit-transform: translateY(0) rotate(0);
  }
}
@keyframes menu-bar02 {
  0% {
    transform: translateY(-15px) rotate(-45deg);
  }
  50% {
    transform: translateY(-15px) rotate(0);
  }
  100% {
    transform: translateY(0) rotate(0);
  }
}
#menuBtn.active span:nth-of-type(1) { -webkit-animation: active-menu-bar01 .2s forwards; animation: active-menu-bar01 .2s forwards; }
@-webkit-keyframes active-menu-bar01 {
  0% {
    -webkit-transform: translateY(0) rotate(0);
  }
  50% {
    -webkit-transform: translateY(15px) rotate(0);
  }
  100% {
    -webkit-transform: translateY(15px) rotate(45deg);
  }
}
@keyframes active-menu-bar01 {
  0% {
    transform: translateY(0) rotate(0);
  }
  50% {
    transform: translateY(15px) rotate(0);
  }
  100% {
    transform: translateY(15px) rotate(45deg);
  }
}
#menuBtn.active span:nth-of-type(2) { opacity: 0; }
#menuBtn.active span:nth-of-type(3) { -webkit-animation: active-menu-bar03 .2s forwards; animation: active-menu-bar03 .2s forwards; }
@-webkit-keyframes active-menu-bar03 {
  0% {
    -webkit-transform: translateY(0) rotate(0);
  }
  50% {
    -webkit-transform: translateY(-15px) rotate(0);
  }
  100% {
    -webkit-transform: translateY(-15px) rotate(-45deg);
  }
}
@keyframes active-menu-bar03 {
  0% {
    transform: translateY(0) rotate(0);
  }
  50% {
    transform: translateY(-15px) rotate(0);
  }
  100% {
    transform: translateY(-15px) rotate(-45deg);
  }
}


#spNav { position: absolute; top: 0; z-index: 1; background: #4d4d4d; border-bottom: 1px solid #fff; -moz-transform: translateY(-460px); -webkit-transform: translateY(-460px); -o-transform: translateY(-460px); -ms-transform: translateY(-460px); -webkit-transition: all 600ms cubic-bezier(0.165, 0.84, 0.44, 1); transition: all 600ms cubic-bezier(0.165, 0.84, 0.44, 1); }
#spNav ul { }
#spNav ul li { text-align: center; border-top: 1px solid #fff; color: #fff; }
#spNav ul li a { color: #fff; font-weight: bold; display: block; }
#spNav.open { -moz-transform: translateY(0); -webkit-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); }



@media (min-width:769px) {
  #menuBtn { right: 0; }
  #spNav { right: 0; width: 375px; }
  #spNav ul li a { padding: 20px 0; }

}

@media (max-width:768px) {
  #menuBtn { right: 0; }
  #spNav { width: 100%; }
  #spNav ul li a { font-size: 0.875rem; padding: 15px 0; }
}

@media (max-width:480px) {
}



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

    welcome

===========================================*/
#welcome { background: #ddedd3; position: relative; margin: 0 auto; }
#welcome h2 { text-align: center; margin-bottom: 30px; }
#welcome h2 img { max-width: 417px; width: 100%; }
#welcome .lead { font-size: 0.875rem; max-width: 720px; margin: 0 auto; padding-bottom: 55px; line-height: 1.6; }
#welcome .colWrap { max-width: 800px; padding-top: 25px; margin: 0 auto; border-top: 1px solid #fff; }
#welcome .colWrap a { display: block; }
#welcome .colWrap a:hover { opacity: 0.8; }
#welcome .colInner { width: calc(50% - 4%);}
#welcome .movie_title { font-weight: bold; text-align: center; font-size: 0.875rem; margin-bottom: 25px; }
#welcome .movie_title a { color: inherit; }
#welcome .movie_title a:hover { text-decoration: underline; }
#welcome .movieWrap { background: #fff; padding: 4px; max-width: 368px; margin: 0 auto 20px auto; }
#welcome .colInner > p:not(.movie_title) { font-size: 0.875rem; line-height: 1.6; }


@media (min-width:769px) {
  #welcome { padding: 200px 0 90px; }

}

@media (max-width:768px) {
  #welcome { padding: 90px 0 30px; }
  #welcome h2 img { max-width: 380px; }
  #welcome > div { padding-left: 25px; padding-right: 25px; }
  #welcome .lead { padding-bottom: 10px; }
  #welcome .colWrap { padding-top: 20px; padding-left: 15px; padding-right: 15px; }
  #welcome .colInner { width: 100%; margin-bottom: 35px; }
  #welcome .movie_title { margin-bottom: 15px; }
  #welcome .colInner > p:not(.movie_title) { font-size: 0.875rem; }

  /* base打ち消し */
  .colWrap > div:not(:first-child) { margin-top: 0;}
}

@media (max-width:480px) {

}




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

    explanation

===========================================*/
#explanation { margin-bottom: 80px; margin-left: auto; margin-right: auto; }
#explanation h2 { background: #8cc63f; padding-top: 69px; padding-bottom: 69px; text-align: center; }
#explanation h2 img { max-width: 175px; width: 100%; }
#explanation .inner { max-width: 1100px; margin: 0 auto; }
#explanation .inner .img { text-align: center; }
#explanation .inner > .img.sp img { max-width: 378px; width: 100%; }
#explanation .lead { font-size: 0.875rem; line-height: 1.4; max-width: 590px; margin-top: 60px; margin-left: auto; margin-right: auto; margin-bottom: 65px; /*margin-bottom: 30px;*/ }
#explanation .caution { font-size: bold; max-width: 590px; margin: 0 auto 60px; font-size: 0.875rem; line-height: 1.4; }
#explanation .colWrap { max-width: 860px; margin: 0 auto; }
#explanation .colWrap::after { content: ''; display: block; background: url(/weboc/images/bg_explanation.png) no-repeat; width: 100%; height: 242px; max-width: 322px; background-size: 100%; margin-top: 60px; margin-right: 50px; }
#explanation .colWrap li { width: 46.512%; margin-bottom: 60px; }
#explanation .colWrap li:last-of-type { margin-bottom: 80px; }
#explanation .colWrap li h3 { margin-bottom: 25px; text-align: center; }
#explanation .colWrap li h3 img { max-width: 400px; width: 100%; }
#explanation .colWrap li .img { max-width: 365px; margin: 0 auto; }
#explanation .colWrap li iframe { height: 205px; width: 100%; max-width: 364px; }


@media (min-width:769px) {

}

@media (max-width:768px) {
  #explanation { margin-bottom: 40px; }
  #explanation h2 { padding: 60px; }
  #explanation h2 img { max-width: 150px; }
  #explanation .inner { padding-left: 25px; padding-right: 25px; }
  #explanation .lead { margin-top: 30px; margin-bottom: 25px; }
  #explanation .colWrap li { width: 100%; margin-bottom: 50px; }
  #explanation .colWrap li:last-of-type { margin-bottom: 40px; }
  #explanation .colWrap::after { margin: 0 auto 40px auto; }
  #explanation .colWrap li iframe { }

}

@media (max-width:480px) {

}




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

    tour

===========================================*/
#tour { background: url(/weboc/images/bg_tour.png) repeat; position: relative; margin: 0 auto; }
#tour .inner { max-width: 1100px; margin: 0 auto; }
#tour h2 { background: #8cc63f; padding-top: 70px; padding-bottom: 70px; text-align: center; }
#tour h2 img { max-width: 524px; width: 100%; }
#tour .lead { font-size: 0.875rem; max-width: 600px; margin: 60px auto; text-align: center; line-height: 1.4; }
#tour .map { height: 450px; margin-bottom: 20px; }
#tour .map + p { font-size: 0.875rem; width: 100%; text-align: center; margin-bottom: 20px; }
#tour .location { text-align: center; /*margin-bottom: 55px;*/ padding-bottom: 55px; }
#tour .location img { max-width: 842px; width: 100%; }
#tour .spot { text-align: center; margin-bottom: 55px; }
#tour .spot img { max-width: 336px; width: 100%; }
#tour ul { max-width: 920px; margin-left: auto; margin-right: auto; }
#tour ul li { max-width: 388px; margin-bottom: 30px; }
#tour ul li img { width: 100%; }
#tour ul + p { font-size: 0.875rem; text-align: center; margin-bottom: 30px; }
#tour .magazine { background: #ddedd3; text-align: center; position: relative; }
#tour .magazine img { max-width: 1100px; width: 100%; z-index: 2; box-shadow: 30px 5px 15px rgba(0, 0, 0, 0.2); }
#tour::before { content: ''; position: absolute; }
#tour a:hover { opacity: 0.8; }

@media (min-width:769px) {
  #tour::before { background: url(/weboc/images/img_tour01.png) no-repeat right; background-size: 200px; top: 40px; left: 0; right: 0; margin-left: auto; margin-right: auto; width: 1000px; height: 254px; }
  #tour { z-index: 1; }
}

@media (max-width:768px) {
  #tour .inner { width: 100%; padding-left: 25px; padding-right: 25px; }
  #tour h2 { padding: 70px 20px; }
  #tour .lead { width: 60%; margin-left: 0; margin-bottom: 80px; text-align: left; }
  #tour .map { height: 350px; }
  #tour .map + p { margin-bottom: 50px; line-height: 1.4; }
  #tour .magazine { padding: 15px 10px; }
  #tour .magazine img { max-width: 352px; box-shadow: 5px 7px 10px -5px rgba(0, 0, 0, 0.2); }
  #tour .spot { margin-bottom: 30px; }
  #tour ul { max-width: 400px; text-align: center; }
  #tour ul li { width: calc(50% - 20px); margin-bottom: 20px; }
  #tour ul li img { max-width: 200px; }
  #tour ul + p { line-height: 1.4; }
  #tour::before { background: url(/weboc/images/img_tour01_sp.png) no-repeat right; background-size: auto 100%; top: 110px; right: 25px; width: 200px; min-height: 270px; padding-top: 33.073%; }


}

@media (max-width:480px) {
  #tour .lead { margin-bottom: 40px; }
  #tour .map { height: 250px; }
  #tour .map + p { margin-bottom: 30px; }
  #tour ul { margin-bottom: 15px; }
  #tour ul li { width: calc(50% - 10px); }
  #tour ul li img { max-width: 142px; }
  #tour::before { top: 95px; right: 5px; background-size: auto 90%; }


}





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

    faculty

===========================================*/
#faculty { background: #fffa96; min-height: inherit; margin-bottom: 110px; position: relative; }
#faculty .inner { max-width: 1100px; margin: 0 auto; }
#faculty .inner > p { font-size: 0.875rem; text-align: center; }
#faculty h2 { text-align: center; margin-bottom: 85px; }
#faculty h2 img { max-width: 361px; width: 100%; }
#faculty h2 + p { font-size: 0.875rem; line-height: 1.6; max-width: 620px; margin-left: auto; margin-right: auto; margin-bottom: 55px; }
#faculty section h3 { border-left: 6px solid; border-bottom: 1px solid; border-color: #22b573; padding-left: 8px; padding-top: 3px; padding-bottom: 2px; margin-bottom: 20px; }
#faculty section h3 img ,
#faculty section ul li img { max-height: 22px; }
#faculty section ul li a { display: block; background: #fff; border-radius: 17px; text-align: center; padding: 21px 10px; }
#faculty .literature ul { margin-bottom: 40px; }
#faculty .literature ul li { width: 22.181%; }
#faculty .colWrap section { width: calc(50% - 20px); }
#faculty .colWrap section ul li { width: 46.04%; }
#faculty .colWrap section ul { margin-bottom: 20px; }
#faculty::before { content: ''; position: absolute; left: 0; right: 0; background: url(/weboc/images/img_faculty01.png) no-repeat; background-size: 242px; min-height: 190px; width: 1100px; margin-right: auto; margin-left: auto; padding-top: 13.571%; }
#faculty::after { content: ''; background: url(/weboc/images/bg_faculty_02.png) no-repeat #fff; padding-bottom: 6.36%; display: block; background-size: 100%; }
#faculty a:hover { opacity: 0.8; }

@media (min-width:769px) {
  #faculty { padding-top: 125px; }
  #faculty::before { top: 125px; }

}

@media (max-width:768px) {
  #faculty { margin-bottom: 50px; padding-top: 45px; }
  #faculty::before { top: 45px; }
  #faculty h2 { margin-bottom: 30px;}
  #faculty h2 + p { margin-bottom: 30px; }
  #faculty .inner { max-width: 1100px; padding-left: 25px; padding-right: 25px; padding-bottom: 30px; }
  #faculty .lead { margin-top: 250px; }
  #faculty .literature ul { margin-bottom: 20px; }
  #faculty .literature ul li { width: calc(50% - 7px); margin-bottom: 15px; }
  #faculty .colWrap section { width: 100%; margin-bottom: 20px; }
  #faculty .colWrap section ul li { width: calc(50% - 7px); }
  #faculty::before { top: 115px; margin: 0 auto; width: 242px; }

}

@media (max-width:480px) {
  #faculty .literature ul { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
  #faculty .literature ul li { width: 100%; }
  #faculty .colWrap section ul li { width: 100%; margin: 0 auto; }
  #faculty .lead { padding-top: 230px; margin-top: 0; }
  #faculty::before { top: 10%; }


}


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

    movie

===========================================*/
#movie { max-width: 800px; margin: 0 auto; margin-bottom: 75px; }
#movie h2 { text-align: center; margin-bottom: 40px; }
#movie h2 img { max-width: 533px; width: 100%; }
#movie .lead { max-width: 740px; line-height: 1.6; margin-left: auto; margin-right: auto; margin-bottom: 75px; }
#movie .colInner { width: 45%; margin-bottom: 30px; }
#movie .movieWrap { border: 1px solid #000; box-sizing: border-box; padding: 4px; margin-bottom: 20px; }
#movie .movieWrap a { display: block; }
#movie .movieWrap a:hover { opacity: 0.8; }
#movie .movie_title { font-size: 0.875rem; font-weight: bold; line-height: 1.4; text-align: center; }
#movie .movie_title a { color: inherit; }
#movie .movie_title a:hover { text-decoration: underline; }




@media (min-width:769px) {

}

@media (max-width:768px) {
  #movie { padding-left: 25px; padding-right: 25px; }
  #movie h2 { margin-bottom: 30px; }
  #movie .lead { font-size: 0.875rem; margin-bottom: 25px; }
  #movie .colInner { width: 48%; }
  #movie .movie_title { font-size: 0.75rem; }

}

@media (max-width:480px) {
  #movie .colInner { width: 100%; }
  #movie .movieWrap { margin-bottom: 10px; }

}



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

    report

===========================================*/
#report { background: url(/weboc/images/bg_ocReport.png) no-repeat #c2dfb0; background-size: 100%; margin: 0 auto; }
#report a { color: inherit; display: block; }
#report a:hover { opacity: 0.8; }
#report .colWrap { max-width: 1100px; margin: 0 auto; background-size: 100%; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
#report .title img { max-width: 460px; width: 100%; }
#report .title p { font-size: 0.75rem; margin-top: 25px; }
#report .colWrap > .img { position: relative; }
#report .colWrap > .img img { width: 100%; }

@media (min-width:769px) {
  #report .title { padding-left: 150px; }
  #report .colWrap > .img::before { content: ''; position: absolute; left: -10px; width: 100%; height: 100%; background: linear-gradient(to right, rgba(194, 223, 176, 1) 5%, rgba(194, 223, 176, 0.1) 45%, rgba(194, 223, 176, 0) 33.5%); }
  #report .colWrap > .img img { max-width: 279px; }
}

@media (max-width:768px) {
  #report { background-size: 200%; padding-top: 40px; }
  #report .colWrap { padding: 30px 25px; }
  #report .colWrap p { width: calc( 50% - 10px ); font-size: 0.875rem; line-height: 1.4; }
  #report .colWrap div { width: calc( 50% - 5px ); }
  #report .title p { margin-bottom: 20px; padding: 0 20px; }
  #report .sp > .img { padding: 0 25px; text-align: center; }
  #report .sp > .img img { width: 100%; max-width: 500px;}
}

@media (max-width:480px) {
  #report { background-size: 300%; }
  #report .colWrap { background-size: 300%;  }

}



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

    access

===========================================*/
#access { background: url(/weboc/images/bg_access.jpg) no-repeat center; margin: 0 auto; }
#access a { display: block; padding-top: 67.63px; padding-bottom: 67px; }
#access a:hover { opacity: 0.8; }
#access img { max-width: 310px; width: 100%; }

@media (min-width:769px) {
  #access { background-size: cover; }
  #access a { }
  #access .container { max-width: 1100px; margin: 0 auto; padding-right: 30px; }
  #access img { margin-left: auto; display: block; }

}

@media (max-width:768px) {
  #access a { text-align: center; }

}

@media (max-width:480px) {
  #access a { padding: 50px 80px; }

}




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

    footer

===========================================*/
footer { background: #c2dfb0; }
footer nav { max-width: 1100px; margin: 0 auto; padding-top: 60px; padding-bottom: 30px; }
footer ul li img { max-width: 256px; }
.note { font-size: 0.875rem; max-width: 1100px; margin:0 auto; }
#copy { font-size: 0.5626rem; text-align: center; padding-top: 20px; padding-bottom: 25px; }

@media (min-width:769px) {

}

@media (max-width:768px) {
  footer ul li { margin-bottom: 20px; width: 100%; text-align: center; }
  .note { text-align: center; margin-bottom: 10px; }

}

@media (max-width:769px) {
  footer .colWrap { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
}




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

    TOPへ戻る

===========================================*/
#pageTop { position: fixed; bottom: 20px; right: 20px; font-size: 0.875em; z-index: 999; background: #666; text-decoration: none; color: #fff; width: 70px; height: 70px; padding-top: 35px; text-align: center; display: block; border-radius: 50%; opacity:0.8; }
#pageTop:hover { text-decoration: none; background: #999; }
#pageTop span { position: relative; }
#pageTop span:before ,
#pageTop span:after { position: absolute; content: ""; display: inline-block; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-top: 2px solid #fff; border-left: 2px solid #fff; -webkit-transform: rotate(45deg); transform: rotate(45deg); }
#pageTop span:before { top: -22px; }
#pageTop span:after { top: -15px; }


/*------------------------------------------------------

    soudan

------------------------------------------------------*/
#soudan {}
#soudan h2 { text-align: center; border-top: 12px solid #8cc63f; border-bottom: 12px solid #8cc63f;}
#soudan h2 img { width: 100%; max-width: 314px;}
#soudan h2 span { position: relative; display: inline-block;}
#soudan h2 span::before { /*content: url("/weboc/images/icon_soudan.png"); width: 80px; height: 80px;*/ content: ''; position: absolute; width: 80px; height: 80px; background: url("/weboc/images/icon_soudan.png") no-repeat left top; background-size: 100% auto;}
#soudan h2 + .text { font-size: 1rem; font-weight: bold; background: url("/weboc/images/icon_soudan-2.png") no-repeat left top; background-size: 132px auto; }

#soudan .wrapper {}
#soudan .wrapper > section {}
#soudan .wrapper h3 { background: url("/weboc/images/bg_soudan_title.png") no-repeat left top;}
#soudan .wrapper h3 img { max-height: 22px; width: auto;}
#soudan .wrapper .colWrap {}
#soudan .wrapper .colWrap section { background-color: #cfe8c1;}
#soudan .wrapper .colWrap section h4 { text-align: center;}
#soudan .wrapper .colWrap section h4 img { max-height: 50px;}
#soudan .wrapper .colWrap section .body { margin-bottom: 15px;}
#soudan .wrapper .colWrap section .text { font-size: 0.938em; margin: 0;}
#soudan .wrapper .colWrap section .btnWrap { text-align: center;}
#soudan .wrapper .colWrap section .btnWrap a { display: inline-block; width: 100%; max-width: 290px; background-color: #7dc058; border-radius: 20px; padding: 8px 20px 8px 18%;}
#soudan .wrapper .colWrap section .btnWrap img { width: 100%; max-width: 150px;}

#soudan .wrapper figure { text-align: center;}
#soudan .wrapper figure img { max-height: 206px;}
#soudan .wrapper ol { padding-left: 1.5em; list-style-type: none; margin: 0;}
#soudan .wrapper ol li { font-size: 1em; line-height: 1.6; background: url("/weboc/images/img_soudan_no1.png") no-repeat left top+8px; padding-left: 50px; background-size: 32px auto;}
#soudan .wrapper ol li:nth-child(2) { background: url("/weboc/images/img_soudan_no2.png") no-repeat left top+8px; background-size: 32px auto; }
#soudan .wrapper ol li:nth-child(3) { background: url("/weboc/images/img_soudan_no3.png") no-repeat left top+8px; background-size: 32px auto; }
#soudan .wrapper ol li:nth-child(4) { background: url("/weboc/images/img_soudan_no4.png") no-repeat left top+8px; padding-top: 10px; padding-bottom: 10px; background-size: 32px auto; }

#entry { background: url("/weboc/images/bg_soudan.png") repeat left top;}
#entry .colWrap {}
#entry .img {}
#entry .img img { width: 100%; max-width: 239px;}
#entry .body {}
#entry .body > a { display: inline-block;}
#entry .body img { max-width: 470px; width: 100%;}
#entry .body .text { font-size: 1.125rem; font-weight: bold;
text-shadow:
1px  1px 0px #ffffff,
-1px  1px 0px #ffffff,
1px -1px 0px #ffffff,
-1px -1px 0px #ffffff,
1px  0px 0px #ffffff,
0px  1px 0px #ffffff,
-1px  0px 0px #ffffff,
0px -1px 0px #ffffff;
    line-height: 1.4; letter-spacing: -1px;
}
#entry .body .text a {}




@media (min-width: 769px) {
    #soudan {}
    #soudan h2 { margin-bottom: 60px; height: 155px; line-height: 155px;}
    #soudan h2 span::before { left: -160px; top: -28px; }
    #soudan h2 + .text { max-width: 1000px; margin-left: auto; margin-right: auto; margin-bottom: 60px; padding-right: 230px; background-position: right top; padding-top: 30px;}

    #soudan .wrapper { max-width: 1000px; margin-left: auto; margin-right: auto; margin-bottom: 90px;}
    #soudan .wrapper > section:first-child { padding-bottom: 206px; margin-bottom: 55px;}
    #soudan .wrapper > section:last-child {}
    #soudan .wrapper h3 { min-height: 38px; padding-left: 165px; padding-top: 4px; margin-bottom: 35px;}
    #soudan .wrapper .colWrap section { width: calc(50% - 40px); padding: 30px 30px 70px; position: relative;}
    #soudan .wrapper .colWrap section h4 { margin-bottom: 20px;}
    #soudan .wrapper .colWrap section .btnWrap { position: absolute; bottom: 20px; left: 0; right: 0; }
    #soudan .wrapper figure { position: absolute;}
    #soudan .wrapper figure img {}
    #soudan .wrapper ol { padding-right: 100px;}
    #soudan .wrapper ol li:not(:last-child) { margin-bottom: 28px;}

    #entry { height: 191px;}
    #entry .colWrap { max-width: 1100px; margin-left: auto; margin-right: auto;}
    #entry .img { width: 239px;}
    #entry .body { width: calc(100% - 239px); padding-left: 130px; padding-top: 40px;}
    #entry .body > a { margin-left: 30px; margin-bottom: 25px;}
}

@media (max-width: 768px) {
    #soudan {}
    #soudan h2 { margin-bottom: 40px; margin-left: auto; margin-right: auto; border-top-width: 8px; border-bottom-width: 8px; padding: 40px 0;}
    #soudan h2 img { width: 70%; position: relative; left: 20px;}
    #soudan h2 span::before { width: 50px; height: 50px; left: 8px; top: -14px; }
    #soudan h2 + .text { margin-left: 20px; margin-right: 20px; margin-bottom: 50px; background: none;}



    #soudan .wrapper { margin-bottom: 30px;}
    #soudan .wrapper > section { margin-left: 10px; margin-right: 10px; }
    #soudan .wrapper > section:first-child { margin-bottom: 40px;}
    #soudan .wrapper h3 { margin-bottom: 20px; background-size: auto 25px; padding-left: 90px; min-height: 25px; background-position: left -20px bottom; padding-bottom: 8px; padding-right: 40px;}
    #soudan .wrapper h3 img { max-height: 20px;}
    #soudan .wrapper .colWrap section { width: 100%; padding: 20px;}
    #soudan .wrapper .colWrap section:first-child { margin-bottom: 20px;}
    #soudan .wrapper .colWrap section h4 { margin-bottom: 25px;}
    #soudan .wrapper ol li:not(:last-child) { margin-bottom: 20px;}

    #entry { background-repeat: repeat; padding: 0 20px 0; position: relative; padding-top: 70px;}
    #entry .colWrap { flex-direction: row-reverse; }
    #entry .img { width: 50%; }
    #entry .img img { max-width: none; }
    #entry .body { width: 50%;}
    #entry .body img { max-width: 340px;}
    #entry .body > a { margin-bottom: 10px; position: absolute; left: 0; top: 22px; right: 0; bottom: auto; margin: auto; text-align: center; display: inline-block;}
}

@media (max-width: 480px) {
    #entry { padding-top: 18vw;}
    #entry .body img { width: 90%;}
    #entry .body { padding: 10px 10px 20px 0;}
    #entry .body > a { top: 9%;}
    #entry .img img  { width: calc(100% + 20px);}
}


/*------------------------------------------------------

    modal

------------------------------------------------------*/
.close-button {
  overflow: hidden;
}

.bmd-modalContent {
  box-shadow: none;
  background-color: transparent;
  border: 0;
}

.bmd-modalContent .close {
  font-size: 30px;
  line-height: 1;
  padding: 0;
  text-shadow: none;
  opacity: .7;
  color:#fff;
}

.bmd-modalContent .close:hover,
.bmd-modalContent .close:focus {
  opacity: 1;
  outline: none;
}

.modal-header { background: #cfe8c1; padding: 10px 20px; }
.modal-header h5 { color: #7dc058; font-size: 22px; font-weight: bold; }
.modal-body { padding: 30px 40px; }
.modal-body h6 { font-size: 24px; font-weight: bold; padding-left: 90px; padding-top: 20px; padding-bottom: 20px; margin-bottom: 20px; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.modal-body p { font-size: 18px; line-height: 1.8; }
.modal-body .title { font-size: 16px; font-weight: bold; }
.modal-body .caution { color: #ff0000; font-size: 16px; font-weight: bold; }
.modal-body .font14 { font-size: 14px; }
.modal-body .font16 { font-size: 16px; }
.title_icon01::before { content: ''; background: url(/weboc/jyunbi/images/modal_icon_01.svg) no-repeat; width: 75px; height: 64px; position: absolute; left: 40px; background-size: 100%; }
.title_icon02::before { content: ''; background: url(/weboc/jyunbi/images/modal_icon_02.svg) no-repeat; width: 75px; height: 64px; position: absolute; left: 40px; background-size: 100%; }
.title_icon03::before { content: ''; background: url(/weboc/jyunbi/images/modal_icon_03.svg) no-repeat; width: 75px; height: 64px; position: absolute; left: 40px; background-size: 100%; }
#soudanReadyPC .sec01,
#soudanReadyPC .sec02 { margin-bottom: 50px; }
#soudanReadyPC .sec01 .img { max-width: 720px; border: 1px solid #ccc; margin-bottom: 10px; }
#soudanReadyPC .sec02 > p:not(.caution) { margin-bottom: 20px; }
#soudanReadyPC .sec02 .caution + p { margin-bottom: 20px; }
#soudanReadyPC .sec02 .img:nth-of-type(1) { max-width: 720px; border: 1px solid #ccc; margin-bottom: 20px; }
#soudanReadyPC .sec02 .img:nth-of-type(2) { max-width: 370px; }
#soudanReadyPC .sec03 .img:nth-of-type(1) { max-width: 720px; border: 1px solid #ccc; margin-bottom: 20px; }
#soudanReadyPC .sec03 .img:nth-of-type(2) { max-width: 720px; margin-bottom: 50px; }
#soudanReadyPC .sec03 p { margin-bottom: 20px; }
#soudanReadyPC .sec03 .caution { margin-bottom: 0; }
#soudanReadySP .sec01 p:not(.title) { margin-bottom: 40px; }
#soudanReadySP .sec02 .colWrap div { width: 50%; }
#soudanReadySP .sec02 .colWrap p:not(.title) { margin-bottom: 20px; }
#soudanReadySP .sec02 .img { max-width: 220px; border: 1px solid #ccc; margin-bottom: 90px; }
#soudanReadySP .sec03 > .img:first-of-type { max-width: 220px; border: 1px solid #ccc; margin-bottom: 50px; }
#soudanReadySP .sec03 .title_icon03 + p { margin-bottom: 70px; }
#soudanReadySP .sec03 .font14 { margin-bottom: 30px; }
#soudanReadySP .sec03 .colWrap { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; }
#soudanReadySP .sec03 .colWrap .img { max-width: 280px; width: 280px; margin-bottom: 60px; }
#soudanReadySP .sec03 .colWrap .img:first-of-type { margin-right: 50px; }
.modal .modal-header .close { border: 1px solid #7dc058; color: #7dc058; background: #fff; opacity: 10; width: 67px; height: 37px; white-space: nowrap; margin: -0.2rem -1rem -1rem auto; border-radius: 10px; padding: 0; font-size: 16px; }
.modal .btn:not(:disabled):not(.disabled) { font-size: 15px; color: #7dc058; background: #fff; border: 1px solid #7dc058; padding: 6px 10px; border-radius: 10px; font-weight: bold; }
.modal a { text-decoration: underline; }
.modal a:hover { text-decoration: none; }

@media (min-width: 768px) {
	#soudanReadyPC .sec03 .img:nth-of-type(1) { padding: 58px 65px; }

}

@media (min-width: 576px){
    .modal-dialog { max-width: 1000px; }
    .modal-dialog.small { max-width: 480px; }
		#soudanReadySP .sec03 > .img:first-of-type { margin-left: auto; margin-right: auto; }

}

@media (max-width: 767px) {
	.modal-body h6 { font-size: 22px; }
	.modal-body p { font-size: 16px; line-height: 1.6; }
	#soudanReadySP .sec02 .colWrap div { width: 100%; }
	#soudanReadySP .sec02 .img { margin-bottom: 50px; }
	#soudanReadySP .sec03 .title_icon03 + p { margin-bottom: 30px; }
	#soudanReadySP .sec03 .colWrap .img { margin-bottom: 30px; }
	#soudanReadySP .sec03 > .img:first-of-type { margin-bottom: 30px; }

}

@media (max-width: 480px) {
	.modal-body h6 { font-size: 20px; padding-left: 70px; }
	.title_icon01::before { width: 60px; height: 51px; }
	.title_icon02::before { width: 60px; height: 51px; }
	.title_icon03::before { width: 60px; height: 51px; }
	#soudanReadySP .sec03 .colWrap .img:first-of-type { margin-right: 0px; }

}