@charset "utf-8";




/*----------------------------------------
	for PC
----------------------------------------*/

@media screen and (min-width: 481px){


#header{height:80px;background:url(../img/feature/feature_head.jpg) center bottom repeat-x;background-size:cover;position:relative;}
#header .data_area {position:absolute;right:20px;top:10px;}
#header .logo{width:160px;display:block;position:absolute;top:5px;left:50%;margin-left:-80px;}
#header h1{margin:0;}


.flow_list{font-size:15px;margin-bottom:0px;}
.flow_list a{color:#1c6512;}

h2{margin-bottom:40px;}

#content h2{color:#1c6512;font-weight: bold;font-size:30px;position:relative;margin-top:30px;margin-bottom:30px;padding-top:10px;z-index:2;line-height:1;}
#content h2 span{font-weight: bold;}
#content .twoline_pc h3{float:none;width:385px;}
#content h2 .num{font-size:50px;font-style: italic;font-family: 'PT Serif', serif;line-height:1;margin-right:0.2em;}

#content h3{color:#1c6512;font-weight:bold;font-size:23px;border-bottom:1px solid #1c6512;display:inline-block;margin:30px 0 10px;}

#content{padding:40px 0 100px;}
#content .inner_centering{width:900px;}
#content p{word-wrap: break-word;}
#content .contBox{border-radius:14px;overflow:hidden;box-shadow:0px 0px 4px rgba(0,0,0,0.4);margin-top:40px;}
#content .img_oneline img{width:100%;display:block;}
#content .flexbox{display:flex;}

#content .exp{ font-size:16px; background-color:rgba(0, 103, 4, 0.2);padding:20px 25px;color:#333;}

#content .img_btnblock{width:32%;margin-left:2%;position:relative;}
#content .img_btnblock:nth-of-type(3n+1){margin-left:0;}
#content .img_btnblock img{width:100%;display:block;}
#content .img_btnblock .exp{text-align:center;}
#content .img_btnblock:after{content:'';display:block;position:absolute;right:5px;bottom:5px;background-image:url(../img/feature/next.svg); width:25px; height:25px; background-size:25px; right:18px;bottom:26px;}

#content .ruby{font-size:10px;display:block;line-height:1;}



.btn_back_box{display:flex;justify-content: center;padding-top:100px;}
.btn_back{display:block;color:#fff;font-size:15px;background-color:#1b4d11;padding:17px 30px 17px 19px;line-height:1;border-radius:40px;box-shadow:1px 1px 2px rgba(0,0,0,0.3);margin:0 4px;}
.btn_back .back_icon{transform: rotate( -180deg );width:26px;height:26px;display:inline;margin:-8px 8px -8px -5px;}

.btn_back.fix{display:inline-block;position:fixed;left:50%;bottom:-60px;margin-left:-90px;z-index:80;transition:all 0.3s;}
.btn_back.fix.in{bottom:20px;}


#cboxClose{display:block;color:#fff;font-size:15px;background-color:#1b4d11!important;line-height:1;border-radius:40px;box-shadow:1px 1px 2px rgba(0,0,0,0.3);margin:0 4px;position:fixed!important;bottom:20px!important;top:auto!important;background-image:url(../img/feature/close.svg)!important;height:60px!important;width:60px!important;background-size:40px!important;background-position:center center!important;padding-top:10px;right:auto;left:50%;margin-left:-20px!important;padding-top:10px!important;}

}



/*----------------------------------------
	for SP
----------------------------------------*/

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


  #header{height:80px;background:url(../img/feature/feature_head.jpg) center bottom repeat-x;background-size:cover;position:relative;}
  #header .data_area {position:absolute;right:20px;top:10px;}
  #header .logo{width:160px;display:block;position:absolute;top:5px;left:50%;margin-left:-80px;}
  #header h1{margin:0;}


  .flow_list{font-size:15px;margin-bottom:0px;}
  .flow_list a{color:#1c6512;}

  h2{margin-bottom:40px;}

  #content h2{color:#1c6512;font-weight: bold;font-size:24px;position:relative;z-index:2;margin-bottom:2em;padding-top:20px;display:block;}
	#content h2 span{font-size:16px;display:block;padding-bottom:0px;line-height:1.2;}
	#content h2 .num{display:block;position:absolute;right:0px;bottom:0px;font-size:75px;font-style: italic;font-family: 'PT Serif', serif;opacity:0.3;color:#7b7162;line-height:1;}

  #content h3{color:#1c6512;font-weight:bold;font-size:19px;border-bottom:1px solid #1c6512;display:block;margin:1em 0 10px;line-height:1.3;padding-bottom:0.3em;}

  #content{padding:40px 0 60px;}
  #content .inner_centering{width:90%;margin:0 auto 0;}
  #content p{word-wrap: break-word;}
  #content .contBox{border-radius:10px;overflow:hidden;box-shadow:0px 0px 3px rgba(0,0,0,0.2);margin-top:22px;}
  #content .img_oneline img{width:100%;display:block;}
  #content .flexbox{display:flex;justify-content:space-between;flex-wrap: wrap;}

  #content .exp{ font-size:13px; background-color:rgba(0, 103, 4, 0.2);padding:15px 25px;color:#333;}

  #content .img_btnblock{width:48%;display:block;position:relative;}
  #content .img_btnblock img{width:100%;display:block;}
  #content .img_btnblock .exp{text-align:center;}
  #content .img_btnblock:after{content:'';display:block;position:absolute;right:5px;bottom:5px;background-image:url(../img/feature/next.svg); width:18px; height:18px; background-size:18px; right:6px;bottom:6px;}

  #content .ruby{font-size:10px;display:block;line-height:1;}


  .btn_back_box{display:flex;justify-content: center;padding-top:60px;}
  .btn_back{display:block;color:#fff;font-size:15px;background-color:#1b4d11;padding:17px 30px 17px 19px;line-height:1;border-radius:40px;box-shadow:1px 1px 2px rgba(0,0,0,0.3);margin:0 4px;}
  .btn_back .back_icon{transform: rotate( -180deg );width:26px;display:inline;margin:-8px 8px -8px -5px;}

  .btn_back.fix{display:inline-block;position:fixed;left:50%;bottom:-60px;margin-left:-90px;z-index:80;transition:all 0.3s;}
  .btn_back.fix.in{bottom:20px;}


  #cboxClose{display:block;color:#fff;font-size:15px;background-color:#1b4d11!important;line-height:1;border-radius:30px;box-shadow:1px 1px 2px rgba(0,0,0,0.3);margin:0 4px;position:fixed!important;bottom:20px!important;top:auto!important;background-image:url(../img/feature/close.svg)!important;height:40px!important;width:40px!important;background-size:30px!important;background-position:center center!important;padding-top:10px;right:auto;left:50%;margin-left:-20px!important;padding-top:10px!important;}


}