@charset "utf-8";

/* CSS Document */

@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);


html{font-family:'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif;color:#513616;}

body{width:100%;min-width:1040px;background:url(../images/graybg.jpg), #fafafa}

body *{color:#513616}

#wrapper{width:1040px;height:auto;box-shadow:0 0 60px 2px rgba(0,0,0,.02);position:relative;margin:0 auto;padding:0}

#foot-container {width:1040px;height:auto;box-shadow:0 0 60px 2px rgba(0,0,0,.02);margin:0 auto;padding:0;}

header{position:fixed;z-index:9900;width:1040px;height:151px;background:url(../images/topbar.jpg) 0 0 repeat-x, url(../images/bodybg.jpg), #fafafa}

header .top{padding-top:20px;height:52px;margin:0 50px 13px}

header #logo{float:left; width:169px; height:46px;  }

header .login{float:right; width:630px; height:46px; font-size: 12px; text-align: right; vertical-align: middle; }

.login i{
  float:left;
  display:block; 
  background-color: rgba(254,196,58,.7); 
  padding: 3px 5px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  margin:10px 12px 0 0;
  font-style: normal;
 }

.login a{
  float:left;
  margin-right:15px;
  display: block;
  text-align: center;
  width:170px;
  height:50px;
  /*line-height: 46px;*/
  background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #5b3c19), color-stop(.53, #5c3d19), color-stop(.50, #664929), color-stop(.00, #583e1f));
  background: -webkit-linear-gradient(top, #583e1f 0%, #664929 50%, #5c3d19 53%, #5b3c19 100%);
  background: -moz-linear-gradient(top, #583e1f 0%, #664929 50%, #5c3d19 53%, #5b3c19 100%);
  background: -o-linear-gradient(top, #583e1f 0%, #664929 50%, #5c3d19 53%, #5b3c19 100%);
  background: -ms-linear-gradient(top, #583e1f 0%, #664929 50%, #5c3d19 53%, #5b3c19 100%);
  background: linear-gradient(to bottom, #583e1f 0%, #664929 50%, #5c3d19 53%, #5b3c19 100%);
  color: #fff;
  font-size: 16px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 300;
  box-shadow:2px 2px 5px rgba(0,0,0,.18);
}

.login a:hover{
  color: #6b5032;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #b5833c), color-stop(0.53, #ae8448), color-stop(0.50, #ae8448), color-stop(0.00, #9b7348));
  background: -webkit-linear-gradient(top, #9b7348 0%, #ae8448 50%, #ae8448 53%, #b5833c 100%);
  background: -moz-linear-gradient(top, #9b7348 0%, #ae8448 50%, #ae8448 53%, #b5833c 100%);
  background: -o-linear-gradient(top, #9b7348 0%, #ae8448 50%, #ae8448 53%, #b5833c 100%);
  background: -ms-linear-gradient(top, #9b7348 0%, #ae8448 50%, #ae8448 53%, #b5833c 100%);
  background: linear-gradient(to bottom, #9b7348 0%, #ae8448 50%, #ae8448 53%, #b5833c 100%);
 }

header nav{width:940px;height:63px;margin:0 auto;box-shadow:2px 2px 5px rgba(0,0,0,.18);}

header nav li{float:left;width:25%;height:63px;text-align:center;margin:0;}

header nav li a{
  display:block;
  width:100%;
  height:55px;
  font-size:23px;
  /*text-shadow:1px 1px 0 #ffffff, -1px 1px 0 #ffffff, 1px -1px 0 #ffffff, -1px -1px 0 #fff;*/
  border:1px solid #eef5f6;background:url(../images/navbg.png) 0 0 repeat-x;
  padding:6px 0 0;}

#worksm{letter-spacing:4px;}

#rewardm{letter-spacing:12px;}

#supportm{letter-spacing:0;}

#everyonem{letter-spacing:8px;}

#worksm a{color:#fbac2d;}

#rewardm a{color:#16a83b;}

#supportm a{color:#ec9190;}

#everyonem a{color:#76a9ba;}

header nav li a small{display:block;font-size:10px;color:#513616;text-shadow:none;text-align:center;letter-spacing:0}

header nav li a:hover{
  margin-top:-1px;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #d7e5e7), color-stop(.00, #fefefe));
  background: -webkit-linear-gradient(#fefefe, #d7e5e7);
  background: -moz-linear-gradient(#fefefe, #d7e5e7);
  background: -o-linear-gradient(#fefefe, #d7e5e7);
  background: -ms-linear-gradient(#fefefe, #d7e5e7);
  background: linear-gradient(#fefefe, #d7e5e7);
  height: 56px;
  }

header nav li a:active{
  margin-top:2px;
  background-image:url(../images/navbg.png);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #d7e5e7), color-stop(.00, #fefefe));
  background: -webkit-linear-gradient(#fefefe, #d7e5e7);
  background: -moz-linear-gradient(#fefefe, #d7e5e7);
  background: -o-linear-gradient(#fefefe, #d7e5e7);
  background: -ms-linear-gradient(#fefefe, #d7e5e7);
  background: linear-gradient(#fefefe, #d7e5e7);
}

#contents{width:1040px;height:auto; }

#contents>*{position:relative;margin:0;padding:0}


#base1 {
  margin:0 0 100px 0;
  padding:150px 0 30px;
  height:662px;
  background:url(../images/recruit_base1.png) center 150px no-repeat, url(../images/bodybg.jpg) repeat left top;
}

#base2 {
  margin-bottom: 100px;
  border-top: 20px #b6a693 solid;
  background: url(../images/bodybg.jpg) repeat left top;
  padding: 0 0 45px;
  }
  
 #base3 {
  margin-bottom: 100px;
  border-top: 20px #609aa8 solid;
  background: url(../images/bodybg.jpg) repeat left top;
  padding: 0 0 45px;
   }

 #base4 {
  margin-bottom: 100px;
  background: url(../images/bg-base4.png) repeat-x left top, url(../images/bodybg.jpg) repeat left top;
  padding: 0 0 45px;
   }

#base5 {
  background: url(../images/bg-base5.png) repeat-x left top, url(../images/bodybg.jpg) repeat left top;
  padding: 0 0 45px;
  }
  
#base7 {
  margin: 0 0 60px;
  background:url(../images/bodybg.jpg) repeat left top;
  padding: 0 0 45px;
}

.sec-title {
  position: relative;
  background: url(../images/bg-title.png) no-repeat left top;
  height: 147px;
  top: -40px;
}

.title1,
.title2,
.title3 {
  font-size: 40px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  text-align: center;
}

.title1 {
  margin: 0 0 30px 0;
}

.title2 {
  margin: 80px 0 30px 0;
}

.title3 {
  margin: 60px 0 30px 0;
}

.title1:before,
.title2:before,
.title3:before {
  content: "【 ";
}

.title1:after,
.title2:after,
.title3:after {
  content: " 】";
}

.sec-title h1 {
  position: absolute;
  left: 130px;
  top: 35px;
  display: inline;
  width: 415px;
  text-align: center;
  font-size: 43px;
  font-family: "Noto Sans JP", sans-serif;
  color: #fff;
  font-weight: 300;
  transform: rotate(-6.5deg);
}

#base2 .sec-title img {
  position: absolute;
  right: 0;
  top: -20px;
}

#base4 .sec-title img {
  position: absolute;
  right: 0;
  top: 20px;
}

#base5 .sec-title img {
  position: absolute;
  right: 0;
  top: 10px;
}

.marker-title {
  background: url(../images/marker-title.png) repeat-x left center;
  -webkit-border-radius:6px 2px 7px 4px;
  -moz-border-radius:6px 2px 7px 4px;
  border-radius:6px 2px 7px 4px; 
  }

#base6{height:200px;background: #c9c7c8;}

.register_btn{
  display:block;
  width:300px;
  height:80px;
  /*background-image:url(../images/register.png);*/
  background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #fca02f), color-stop(.00, #fcb52c));
  background: -webkit-linear-gradient(#fcb52c, #fca02f);
  background: -moz-linear-gradient(#fcb52c, #fca02f);
  background: -o-linear-gradient(#fcb52c, #fca02f);
  background: -ms-linear-gradient(#fcb52c, #fca02f);
  background: linear-gradient(#fcb52c, #fca02f);
  background-repeat:no-repeat;
  background-position:0 0;
  color: #fff;
  text-align: center;
  line-height: 80px;
  font-size: 30px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  box-shadow:2px 2px 5px rgba(0,0,0,.18);
}

.register_btn:hover{
  color: #ab721d;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #e5a529), color-stop(.00, #e37e28));
  background: -webkit-linear-gradient(#e37e28, #e5a529);
  background: -moz-linear-gradient(#e37e28, #e5a529);
  background: -o-linear-gradient(#e37e28, #e5a529);
  background: -ms-linear-gradient(#e37e28, #e5a529);
  background: linear-gradient(#e37e28, #e5a529);
  /*background-position-y:-88px;*/
 }

#base1 .register_btn{  position:absolute;bottom:312px;left:460px;}

.btn-area {
  background: url(../images/bg-register.png) no-repeat 145px top;
  text-align: center;
  height: 131px;
  padding: 15px 0 0 0;
}

.ft-btnarea {
  padding: 30px 0 0;
  position: relative;
  background: url(../images/btn-register-big.png) no-repeat center 30px;
  height: 133px;
}

.big {
  position: relative;
  width: 380px;
  top: 40px;
}

.btn-area .register_btn,
.ft-btnarea .register_btn {
  margin: 0 auto;
}

#circle {
  position: absolute;
  top: 448px;
  left: 35px;
  width: 367px;
  height: 367px;
  -o-border-radius: 50%;
  -ms-border-raadius: 50%;
  border-radius: 50%;
  background-color: rgba(253,222,114,.4);
  text-align: center;
}

#circle dl {
  margin: 10px auto;
  border: 2px #654c2c dashed;
  -o-border-radius: 50%;
  -ms-border-raadius: 50%;
  border-radius: 50%;
  width: 347px;
  height: 347px;
}

#circle dl dt {
  margin: 0 0 20px;
  padding: 60px 0 0;
  font-size: 20px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;

}

#circle dl dd {
  margin: 0 20px 0 30px;
  text-align: left;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
}

#circle dl dd li {
  margin-bottom: 10px;
  padding-left: 30px;
  background: url(../images/ico-pencil.png) no-repeat left top;
}

footer{ width:100%; display: inline-block;}

footer nav{margin:0 auto;padding:72px 0 23px}

footer nav ul{width:684px;margin:0 auto}

footer nav ul li{float:left;width:170px;height:17px;line-height:17px;font-size:16px;text-align:center;border-right:1px solid #fff}

footer nav ul li:last-child{border:none}

footer nav ul li a{color:#fff}

footer nav ul li a:hover{color:#cc7f0a}

footer p{text-align:center;margin:0 auto}

footer p small{font-family:Meiryo, メイリオ;font-size:14px;color:#fff}

.hide *{text-indent:-9999px}

.work_1{letter-spacing:3px;width:740px;margin:0 auto 80px;}

.work_2{width:740px;margin:0 auto;}

.work_2 .mgn {
  margin-bottom: 60px;
}

#base2-content {
    display: -webkit-flex;
    display: flex;
    width: 771px;
    margin: 0 auto 10px auto;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}

#base2-content p {
  text-align: center;
  width: 210px;
}

#step {
  width: 821px;
  margin: 0 auto;
}

#step p {
  position: absolute;
  display: inline;
  top: 50%;
  left: 350px;
  vertical-align: middle;
  background: rgba(255,255,255,.8);
  padding: 2px 3px;
  font-size: 18px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
}

#step p:before {
  content: "『 "
}

#step p:after {
  content: " 』"
}

#step1,
#step2,
#step3 {
  position: relative;
}

#step1 {
  width: 821px;
  height: 213px;
  background: url(../images/step1.png) no-repeat left top;
  margin-bottom: 10px;
}

#step2 {
  width: 819px;
  height: 197px;
  background: url(../images/step2.png) no-repeat left top;
  margin-bottom: 10px;
}

#step3 {
  width: 814px;
  height: 165px;
  background: url(../images/step3.png) no-repeat left top;
}

#work_3 {
  width: 940px;
  margin: 0 auto 30px auto;
  background: url(../images/woman.png) no-repeat right bottom;
}

#free-list {
  margin: 0 0 50px 0;
  height: 489px;
  background: url(../images/speechbubbles.png) no-repeat center top;
  text-indent: -9999px;
}

#add-note {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
}

.fs14 { font-size: 14px; }
.fs30 { font-size: 30px; }

.marker30 { 
  background: url(../images/marker30.png) repeat-x left center; 
  -webkit-border-radius:3px 2px 7px 4px;
  -moz-border-radius:3px 2px 7px 4px;
  border-radius:6px 2px 7px 4px; 
  line-height: 0;
}

.reward{ 
  width: 940px;
  margin: 0 auto;
}

#job {
  margin: 0 0 20px 0;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}

#job>div{ 
  padding:30px 0 5px 0;
  width: 456px;
}


.job_1{
  background: url(../images/case1.png) no-repeat 2px 1px, url(../images/bg-job.jpg) repeat left top;
  }

.job_2{ 
   background: url(../images/case2.png) no-repeat 2px 1px, url(../images/bg-job.jpg) repeat left top;
}

.reward>div h3, 
.reward>div h4{
  text-align: right;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  }

.reward>div h3{
  margin: 0 20px 0 0;
    font-size: 18px;
}

.reward>div h4{
  margin: 0 20px 20px 0;
    font-size: 16px;
}

.job_1 .man {
  background: url(../images/ico-case1.png) no-repeat 23px top;
}

.job_2 .man {
  background: url(../images/ico-case2.png) no-repeat 23px top;
}

.man,
.balloon,
.sum {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
}

.man{
  font-size:14px;
  padding-left:160px;
  margin-bottom:16px;
  width: 230px;
  height: 108px;
  }

.man h5{
  color: #513616;
  display: inline;
  margin-bottom: 10px;
  background: rgba(255,255,255,.8);
  padding: 2px;
 }

.man p{ font-size:11px; line-height:17px;}

.man span { color: #af9b82; }

  
.balloon {
	position: relative;
	border: 2px solid #5c4325;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  font-size: 11px;
  width: 370px;
  margin: 0 auto 9px;
  padding: 15px 20px
}

.balloon:after, .balloon:before {
	bottom: 100%;
	left: 13%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.balloon:after {
	border-color: rgba(255, 255, 255, 0);
	border-bottom-color: #f4f4f4;
	border-width: 8px;
	margin-left: -8px;
}

.balloon:before {
	border-color: rgba(92, 67, 37, 0);
	border-bottom-color: #5c4325;
	border-width: 11px;
	margin-left: -11px;
}

.sum{font-family:'Lucida Grande', 'Hiragino Kaku Gothic Pro', ヒラギノ角ゴ, sans-serif;font-size:11px;width:350px;height:82px;margin:0 auto}

.sum span{ color:#b54646; font-size:20px;}

.rank{ padding-left:4px;}

.rank > p{ width:740px; letter-spacing:1px; margin:0 auto 30px; }

.ranklist {
  margin: 0 auto 30px auto;
  padding: 15px 20px;
  width: 940px;
  background: url(../images/bg-ranklist.jpg) repeat left top;
  box-sizing: border-box;
}

.inner-ranklist {
  background: url(../images/bg-job.jpg) repeat left top;
}

.ranklist p {
  font-size: 14px;
}

.ranklist table th {
  text-align: center;
  padding: 20px 20px;
}

.ranklist table td {
  padding: 20px 10px;
}

.img-rank {
  vertical-align: bottom;
}

.price {
  text-align: center;
}

.rank-txt {
  vertical-align: top;
}

.ranks{position:absolute;bottom:50px;padding-left:275px;width:658px}

.ranks p{float:left;width:180px;height:120px;margin-right:30px;font-size:13px;line-height:24px;text-align:center}

.ranks p:first-child{padding-top:25px}

.rank_aside{width:940px;margin:0 auto 30px auto;}

.rank_aside p{margin:0 auto;}

.rank_aside p:first-child{margin-bottom:10px;}

.rank_aside p:last-child{margin-top:28px;text-align:center;}

.rank_aside a{margin:0 auto;display:block;padding-left:22px;width:212px;height:44px;line-height:44px;font-size:15px;background:url(../images/linkl.png) 0 0 no-repeat;}

.rank_aside a:hover{background:url(../images/linkl-hover.png) 0 0 no-repeat;color:#cc7f0a;}

.support{width: 940px; margin: 0 auto; }

#support_header{}

#support_1{overflow: hidden;line-height:28px;letter-spacing:1.5pt;}

.intro{width:620px;float:left;}

.intro p{width:620px;line-height:28px;letter-spacing:1.5pt;margin-bottom:0;}

#support_1 .photo{position:relative;float:left;margin:0 0 0 70px;}

.caption{position:absolute;right:16px;bottom:21px;font-size:11px;letter-spacing:0;}

#support_2{background:url(../images/photo2.png) no-repeat left top;;height:354px;}

#support_2 p{margin-left:325px;width:620px;line-height:28px;letter-spacing:1.5pt;margin-bottom:0;}

#support_2 p:first-of-type{margin-bottom:30px;}

#support_2 a,#support_3 a{display:block;padding-left:22px;font-size:14px;margin-top:25px;width:147px;height:44px;line-height:44px;background:url(../images/link.png) 0 0 no-repeat;}

#support_2 a{margin-left:325px}

#support_2 a:hover,#support_3 a:hover{background-image:url(../images/link-hover.png);color:#cc7f0a}

#support_3{width: 740px; margin: 0 auto 30px auto;}

#support_3 > p { overflow: hidden; margin-bottom: 30px; }

.number1,.number2,.number3,.number4{display:block;float:left;margin-top:-4px;width:80px;height:60px;text-indent:-9999px}

.number1{background:url(../images/sp_1.png) 0 0 no-repeat;}

.number2{background:url(../images/sp_2.png) 0 0 no-repeat;}

.number3{background:url(../images/sp_3.png) 0 0 no-repeat;}

.number4{background:url(../images/sp_4.png) 0 0 no-repeat;}

#support_3 a{margin:0 auto;}

.support_footer{}

.question {
    display: -webkit-flex;
    display: flex;
    width: 920px;
    margin: 0 auto 30px;
    padding: 40px 0 0;
    -webkit-justify-content: space-between;
    justify-content: space-between;
 }

.question>div {
  width: 409px; 
  transform: rotate(3deg);  
  position: relative;
  box-shadow:2px 2px 5px rgba(0,0,0,.18);
 }

.question>div img {
  position: absolute;
  right: 30px;
  top: -40px;
  z-index: 100;
}

#memo1,
#memo5 {
  background-color: #e1f1f3;
}

#memo2,
#memo6 {
  background-color: #e0dbcf;
}

#memo3,
#memo7 {
  background-color: #eedad9;
}

#memo4,
#memo8 {
  background-color: #d5e7d9;
}

.question dl{
  transform: rotate(-3deg);  
  line-height:30px; 
  padding:45px 38px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 300;
  box-sizing: border-box;
  background: url(../images/bg-job.jpg) repeat left top;
  box-shadow:2px 2px 5px rgba(0,0,0,.18);
}

.question dl dt{
  margin-bottom:30px;
  padding-right:40px;
  font-family: "Noto Sans JP", sans-serif;
  font-size:20px;
  letter-spacing:1.9pt;
  font-weight:400;
 }

.question dl dd{letter-spacing:.8pt;line-height:28px}

.memopad_1{top:0;left:0;}

.memopad_2{top:50px;right:0;}

.memopad_2 dt,.memopad_4 dt{letter-spacing:1pt!important;padding-right:0!important}

.memopad_2 dd,.memopad_3 dd{letter-spacing:0!important}

.memopad_3{top:420px;left:0;}

.memopad_4{top:470px;right:0;}

.memopad_5{top:840;left:0;}

.memopad_6{top:890px;right:0;}

.memopad_7{bottom:49px;left:0;}

.memopad_8{height:319px!important;padding-top:78px!important;bottom:0;right:0;background:url(../images/memopad4.png)}

.user-voice {
  width: 940px;
  margin: 0 auto 15px auto;
  background: url(../images/bg-job.jpg) repeat left top;
  padding: 30px 0 15px 0;
}

.user-voice h3 {
  margin: 0px auto 30px auto;
  font-size: 24px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  text-align: center;
}

.user-voice h3 span {
  background: rgba(252,209,158,.7);
}

.user-voice h3 span:before {
  content: "「 "
}

.user-voice h3 span:after {
  content: " 」"
}

.balloons,
.user-icon {
  width:740px;
  margin:0 auto;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
 }

.balloons div {
	position: relative;
	background: #ffffff;
  width: 223px;
  font-size: 11px;
  box-sizing: border-box;
  padding: 15px 20px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  box-shadow:2px 2px 5px rgba(0,0,0,.18);
}

.user-icon div {
  padding: 18px 0 0 0;
  width: 223px;
  text-align: center;
}

.balloons div:after {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(255, 255, 255, 0);
	border-top-color: #ffffff;
	border-width: 8px;
	margin-left: -8px;
}

#balloon_3 div:last-child {
  padding: 10px 8px;
}


mark{background-color:rgba(253,151,33,.28);background-position-x:0;background-position-y:-65px;background-repeat:no-repeat;background-image:url(../images/marker.png);-webkit-border-radius:6px 2px 7px 4px;-moz-border-radius:6px 2px 7px 4px;border-radius:6px 2px 7px 4px;box-shadow:inset 3px 14px 0 rgba(253,151,33,.2), inset 0 -13px 0 rgba(253,151,33,.32), 0 0 4px rgba(253,151,33,.5);padding:0 3px 0 4px;}

header nav li:last-child,.balloons p:last-child{margin:0}

.register_btn:active,.big:active{margin-bottom:-3px}

footer nav:before,footer nav:after,.reward:before,.reward:after,.support_footer:before,.support_footer:after{content:"";display:table}

footer nav:after,.reward:after,.support_footer:after{clear:both}




/* =========================================================
modalwindow
========================================================= */
div#modalwindow {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9999;
	background:rgba(0,0,0,.65);
	font-family: "Hiragino Kaku Gothic Pro", sans-serif;
}

div#modalwindow > .modal_inner {
	position: relative;
	max-width: 620px;
	min-width: 400px;
	margin: 5% auto;
	height: 500px;
	background-color: white;
	box-shadow: 5px 5px 18px rgba(0,0,0,.75);
	border-width: 3px;
	border-style: solid;
	border-color: #9a6523 #614017 #503312 #8f5d1f;
	z-index: 200;
	border-radius: 6px 6px 3px 3px;
	background: url(../images/noisy_grid.png);
}
.modalheader, .modalcontent, .modalfooter {
	position: relative;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 10px;
	width: 100%;
}
#modalwindow .modalheader {
	z-index: 200;
	min-height: 80px;
	background: url(../images/topbar.jpg) repeat-x 0 0, rgba(255,255,255,.7);
/* 	border-bottom: 1px dashed #9a6523; */
	padding-top: 12px;
}

.wrap_title {
	height: 40px;
	line-height: 42px;
}
/*
.wrap_title:before {
	width: 136px;
	height: 137px;
	content: "";
	display: block;
	position: absolute;
	top:-13px;
	left: -13px;
	z-index:100;
	background: url(../images/ribbon_rainbow.png) no-repeat 0 0;
}
.modalfooter:after {
	width: 136px;
	height: 137px;
	content: "";
	display: block;
	position: absolute;
	bottom:-52px;
	right:-52px;
	z-index:100;
	background: url(../images/ribbon_rainbow_b.png) no-repeat 0 0;
}
*/
.modalheader .wrap_title h3 {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 800;
	font-size: 30px;
	padding: 13px 30px 0 30px;
	color: #513616;
	text-align: center;
	position: relative;
	/*background: url(../images/campainetitle2.png) no-repeat center 13px;*/
}
.modalheader .wrap_title h3:after {
	display: inline-block;
	width: 20px;
	height: 40px;
	content: " ";
	position: absolute;
	right: 0;
}

.modal_inner .modalcontent {
	width: 100%;
	height: auto;
	min-height: 400px;
}

.modalcontent .modalcntbox {
	line-height: 1.8em;
	margin: 15px auto;
	padding: 16px 14px 16px 20px;
	background: rgba(249,247,250,.8);
	box-shadow: 0px 0px 3px 1px rgba(95,95,95,.19);
	height: 330px;
  overflow: auto;
}

.modalcontent .modalcntbox h4 {
	padding: 0 0 0 22px;
	height: 30px;
	color:#9a6523;
	text-shadow: 0 -1px 0 #ffffff;
	position: relative;
	font-weight: bolder;
	font-family: "Hiragino Kaku Gothic Pro", sans-serif;
}
.modalcontent .modalcntbox h4:after {
	content: "";
	display: block;
	width: 8px;
	height: 8px;
	box-shadow: -1px -1px rgba(0,0,0,.5);
	background-color: #9a6523;
	position: absolute;
	top:7px;
	left: 5px;
}
.modal_inner .modalfooter {
	position: absolute;
	bottom: 0;
	height: 8px;
	padding: 0;
	width: 100%;
	background: url(../images/topbar.jpg) repeat-x 0 3px, rgba(249,247,250,.8);
	-webkit-box-sizing: padding-box;
	-moz-box-sizing: padding-box;
	box-sizing: padding-box;
	box-shadow: 0 -2px 1px rgba(79,79,79,.08);
/* 	border-top:1px solid rgba(255,255,255,.3);
*/
}

.btn_modal_link {
	cursor: pointer;
	display: block;
	margin: 2px 30px 0 0;
	float: right;
	width: 120px;
	height: 36px;
	padding: 0 10px;
	line-height: 38px;
	color: white;
	border-width: 1px;
	border-style: solid;
	border-color: #9a6523 #614017 #503312 #8f5d1f;
	border-radius: 2px;
	box-shadow: 0 0 5px rgba(0,0,0,.5);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(5%, #fbc36a), color-stop(100%, #e49a21));
	background: -moz-linear-gradient(center top, #fbc36a 5%, #e49a21 100%);
	background: -ms-linear-gradient(top, #fbc36a 5%, #e49a21 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fbc36a', endColorstr='#e49a21');
	background-color: #fbc36a;
	text-shadow: 0 -1px 0 rgba(58,34,15,.81);
	text-align: center;
	-webkit-transition: all .2s linear;
	-moz-transition: all .2s linear;
	transition: all .2s linear;
	opacity: .85;
}
.btn_modal_link:hover {
	background: -webkit-gradient(linear, left top, left bottom, color-stop(5%, #dd9015), color-stop(100%, #f2a62d));
	background: -moz-linear-gradient(center top, #dd9015 5%, #f2a62d 100%);
	background: -ms-linear-gradient(top, #dd9015 5%, #f2a62d 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dd9015', endColorstr='#f2a62d');
	color: rgb(126,92,53);
	background-color: #dd9015;
	text-shadow: 1px 1px 0 rgba(200,200,200,.31);
	opacity: 1;
}
.btn_modal_link:active {position: relative; top:2px;}

/* =========================================================
cbtn
========================================================= */
#cbtn {
	position: absolute;
	right: -13px;
	top: -13px;
	z-index: 300;
	width: 24px;
	height: 24px;
	line-height: 26px;
	text-align: center;
	-webkit-border-radius: 0 0px 0 0;
	font-size: 14px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	background: url(../images/xmark.png) no-repeat 6px 6px, #9a6523;
	background-size: 12px 12px;
	box-shadow: inset 0 0 0 2px white, 0 0 6px rgba(0,0,0,.52);
	color: white;
	cursor: pointer;
	text-indent: -9999px;
}
/* =========================================================
ccontent
========================================================= */
div#modalwindow div#ccontent {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}
div#modalwindow p span.s2 {
	background: url(../images/marker.png) no-repeat -3px -22px;
	padding: 1px 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}
div#modalwindow a {
	color:#9a6523;
	-webkit-transition: color .2s linear, border-color .2s linear;
	-moz-transition: color .2s linear, border-color .2s linear;
	transition: color .2s linear, border-color .2s linear;
	border-bottom: 2px solid #9a6523;
	padding-bottom: 2px;
	padding: 0 5px 2px;
}
div#modalwindow a:hover {
	color:#14bedc;
	border-color: #14bedc;
}
div#modalwindow a:active {position: relative; top:1px;}