@charset "UTF-8";
/* ---rakuten_award.css---- */

#rakuten_award .mincho{ font-family: "Times New Roman", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "メイリオ", Meiryo, serif; }
/* ---------------------------------------------------
	#title_col
------------------------------------------------------ */
#rakuten_award #title_col {  background: url(../../rakuten_award/img/title.jpg) center 0 no-repeat; padding:121px 0;}
#rakuten_award #smple{ width:100%; min-width:1100px; overflow:hidden;}
#rakuten_award #sample img{ width: 1600px; margin: 0 auto; position:relative; left:50%; margin-left:-800px; max-width:1600px;}


/* ---------------------------------------------------
	#sec1
------------------------------------------------------ */
#rakuten_award #sec1{ width: 100%; padding: 80px 0 50px; position: relative; overflow: hidden;}
#rakuten_award #sec1 h3{ font-size: 36px; color: #492703; text-align: center; line-height: 1.5; padding: 0 0 50px;}
#rakuten_award #sec1 .box_wrap{ display: flex; flex-direction: row-reverse;}
#rakuten_award #sec1 .box_wrap .box_text{ width: 38%; min-width: 440px;}
#rakuten_award #sec1 .box_wrap .box_text .inner{ width: 400px; margin: 0 0 0 40px; text-align: center; padding: 20px 0 0;}
#rakuten_award #sec1 .box_wrap .box_text .inner p{ text-align: left; color: #492703; padding: 20px 0 0; font-size: 15px; line-height: 2; letter-spacing: -0.05em;}
#rakuten_award #sec1 .box_wrap .box_img{ width: 62%; min-width: 1000px; overflow: hidden; text-align: right;}

@media screen and (max-width: 1100px) {
#rakuten_award #sec1{ width: 96%; padding: 80px 0 50px; margin: 0 auto;}
#rakuten_award #sec1 h3{ font-size: 30px;}
#rakuten_award #sec1 .box_wrap .box_text{ min-width: 290px;}
#rakuten_award #sec1 .box_wrap .box_text .inner{ width: calc( 100% - 40px); margin: 0 0 0 40px; padding: 20px 0 0;}
#rakuten_award #sec1 .box_wrap .box_img{ min-width: 850px;}
}

@media screen and (max-width: 768px) {
#rakuten_award #sec1{ padding: 40px 0 20px;}
#rakuten_award #sec1 h3{ font-size: 24px; padding: 0 0 20px;}
#rakuten_award #sec1 .box_wrap{ flex-direction: column;}
#rakuten_award #sec1 .box_wrap .box_text{ width: 92%; min-width: 92%; margin: 0 auto;}
#rakuten_award #sec1 .box_wrap .box_text .inner{ width: 100%; margin: 0; padding: 0;}
#rakuten_award #sec1 .box_wrap .box_img{ width: 92%; min-width: 92%; margin: 20px auto 0;}
}

@media screen and (max-width: 600px) {
#rakuten_award #sec1 h3{ font-size: 22px; padding: 0 4% 20px;}
#rakuten_award #sec1 .box_wrap .box_text .inner img{ width: 125px; height: auto;}
}


/* ---------------------------------------------------
	#sec2
------------------------------------------------------ */
#rakuten_award #sec2{ padding: 0 0 80px;}
#rakuten_award #sec2 .box_wrap{ width: 1100px; margin: 0 auto; float: none; border: solid 1px #a67646; padding: 40px 40px 40px 0; clear: both; overflow: hidden; box-sizing: border-box;}
#rakuten_award #sec2 .box_wrap .box_text{ float: left; width: 400px; margin: 0 0 0 40px;}
#rakuten_award #sec2 .box_wrap .box_text h3{ position: relative; font-size: 26px; color: #db7102; padding: 0 0 20px;}
#rakuten_award #sec2 .box_wrap .box_text h3:before{ position: absolute; top: 5px; left: -40px; content: ""; display: block; width: 13px; height: 13px; background: #f67200;}
#rakuten_award #sec2 .box_wrap .box_text p{ font-size: 15px; line-height: 2; letter-spacing: -0.05em;}
#rakuten_award #sec2 .box_wrap .box_text p.sign{ text-align: right; padding: 1em 0 0;}
#rakuten_award #sec2 .box_wrap .img1{ float: right; width: 580px;}
#rakuten_award #sec2 .imgs{ display: flex; flex-wrap: wrap; justify-content: space-between; float: none; clear: both; width: 1100px; margin: 0 auto;}
#rakuten_award #sec2 .imgs li{ width: 32%; padding: 2% 0 0; line-height: 0;}

@media screen and (max-width: 1100px) {
#rakuten_award #sec2{ padding: 0 0 80px;}
#rakuten_award #sec2 .box_wrap{ width: 96%;}
#rakuten_award #sec2 .box_wrap .box_text{ width: 40%;}
#rakuten_award #sec2 .box_wrap .img1{ width: 53%;}
#rakuten_award #sec2 .imgs{ width: 96%;}
}

@media screen and (max-width: 768px) {
#rakuten_award #sec2{ padding: 0 0 40px;}
#rakuten_award #sec2 .box_wrap{ width: 92%; padding: 4%;}
#rakuten_award #sec2 .box_wrap .box_text{ float: none; width: 100%; margin: 0;}
#rakuten_award #sec2 .box_wrap .box_text h3{ position: relative; font-size: 26px; margin: 0 0 0 4%;}
#rakuten_award #sec2 .box_wrap .box_text h3:before{ position: absolute; top: 5px; left: -4%;}
#rakuten_award #sec2 .box_wrap .img1{ float: none; width: 100%; margin: 10px 0 0 0;}
#rakuten_award #sec2 .imgs{ width: 92%;}
}

@media screen and (max-width: 600px) {
#rakuten_award #sec2 .box_wrap .box_text h3{ font-size: 22px; margin: 0 0 0 6%; padding: 0 0 10px;}
#rakuten_award #sec2 .box_wrap .box_text h3:before{ top: 5px; left: -6%;}
#rakuten_award #sec2 .imgs li{ width: 48%; padding: 4% 0 0;}
}

/* ---------------------------------------------------
	#sec3
------------------------------------------------------ */
#rakuten_award #sec3{ background: #fbf6e6; padding: 100px 0 50px; margin: 0 0 180px; text-align: center; color: #492703;}
#rakuten_award #sec3 h3{ font-size: 26px; line-height: 1.5;}
#rakuten_award #sec3 h3 span{ font-size: 36px;}
#rakuten_award #sec3 .lead{ padding: 20px 0 30px; line-height: 2;}
#rakuten_award #sec3 .box_plan{ margin: 0 auto 50px; width: 1100px; box-sizing: border-box; background: #fff; overflow: hidden;}
#rakuten_award #sec3 .box_plan .img{ float: left; width: 530px; display: block; line-height: 0;}
#rakuten_award #sec3 .box_plan .img:hover{ opacity: 0.8;}
#rakuten_award #sec3 .box_plan .inner{ float: right; width: 570px; padding: 40px 40px; box-sizing: border-box; text-align: left;}
#rakuten_award #sec3 .box_plan h4{ font-size: 25px; line-height: 1.4; padding: 0 0 20px;}
#rakuten_award #sec3 .box_plan dl{ display: table; margin: 0 0 10px;}
#rakuten_award #sec3 .box_plan dl dt,
#rakuten_award #sec3 .box_plan dl dd{ display: table-cell; font-size: 15px; vertical-align: middle;}
#rakuten_award #sec3 .box_plan dl dt{ width: 70px; background: #492703; color: #fff; text-align: center;}
#rakuten_award #sec3 .box_plan dl dd{ padding: 0 0 0 10px;}
#rakuten_award #sec3 .box_plan .btn{ display: block; background: url("../../rakuten_award/img/ico_arrow.png") no-repeat center right 20px rgba(255,102,0,1); color: #fff; text-align: center; padding: 10px 0; font-size: 15px; width: 200px; margin: 30px 0 0;}
#rakuten_award #sec3 .box_plan .btn:hover{ background: url("../../rakuten_award/img/ico_arrow.png") no-repeat center right 20px rgba(255,102,0,0.8);}

@media screen and (max-width: 1100px) {
#rakuten_award #sec3 .box_plan{ width: 96%;}
#rakuten_award #sec3 .box_plan .inner{ width: 50%;}
#rakuten_award #sec3 .box_plan h4{ font-size: 20px;}
#rakuten_award #sec3 .box_plan .img { width: 50%;}
#rakuten_award #sec3 .box_plan .img img{ width: 100%; height: auto;}
}

@media screen and (max-width: 768px) {
#rakuten_award #sec3{ padding: 50px 0 25px; margin: 0 0 90px;}
#rakuten_award #sec3 .box_plan{ margin: 0 auto 25px; width: 92%;}
#rakuten_award #sec3 .box_plan .inner{ float: none; width: 100%; padding: 20px 40px 40px;}
#rakuten_award #sec3 .box_plan h4 br{ display: none;}
#rakuten_award #sec3 .box_plan .img { float: none; width: 100%;}
}

@media screen and (max-width: 600px) {
#rakuten_award #sec3{ padding: 30px 0 15px; margin: 0 0 30px;}
#rakuten_award #sec3 h3{ font-size: 20px; padding: 0 4%;}
#rakuten_award #sec3 h3 span{ font-size: 26px;}
#rakuten_award #sec3 .lead{ padding: 15px 4% 20px; text-align: left;}
#rakuten_award #sec3 .lead br{ display: none;}
#rakuten_award #sec3 .box_plan .inner{ padding: 20px;}
#rakuten_award #sec3 .box_plan h4{ font-size: 18px;}
#rakuten_award #sec3 .box_plan .btn{ margin: 20px auto 0;}
}