@charset "utf-8";

body {background: #fff;}
#col1_contents #mboxImported-default-rakuten_g_siryoseikyubutton-0 {margin: 40px auto 20px;}
.att {font-size: 13px;}

/**************** #main_image ****************/

#main_image {
  background: url(../image/top02/main_bg_rp.gif) repeat center center;
  position: relative;
  height: 541px;
  margin-bottom: 20px;
}
#main_image:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 487px;
  height: 58px;
  background: #003399;
  box-shadow: 0 5px 5px rgba(0,0,0,0.2);
  z-index: 0;
}
#main_image .inner {
  width: 950px;
  height: 570px;
  margin: 0 auto;
  position: relative;
  z-index: 5;
}
#main_image .txt {padding-top: 25px;}
#main_image .term {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 38px;
  color: #fff;
  font-size: 18px;
  text-align: center;
}
#main_image .term span {
  font-size: 22px;
  font-weight: bold;
  letter-spacing: 1px;
  margin-left: 1px;
}
#main_image .term02 {
  position: absolute;
  left: 100px;
  right: 0;
  bottom: 30px;
  color: #fff;
  font-size: 16px;
}
#main_image .term02 a {
  color: #fff;
  font-size: 13px;
  letter-spacing: -1px;
  text-decoration: none;
  display: inline-block;
  border: 1px solid #fff;
  -webkit-border-radius: .7em;
  border-radius: .7em;
  margin: 0 5px;
  padding: 1px 8px 0;
  vertical-align: 2px;
  transition: all .2s;
}
#main_image .term02 a:hover {
  background: #fff;
  color: #039;
}

/***** modal *****/

#TB_ajaxContent .cp_box {
  font-family: Meiryo, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", sans-serif;
  text-align: left;
  font-size: 15px;
  line-height: 1.4;
  margin: 15px auto 0;
}
#TB_ajaxContent .cp_box h4 {
  color: #633f00;
	font-weight: bold;
  font-size: 20px;
  line-height: 1.8;
  padding-top: 4px;
  text-align: center;
}
#TB_ajaxContent .cp_box .lead {
  margin: 0 15px 15px;
  line-height: 1.8;
}
#TB_ajaxContent .lead strong {
	color: #e24343;
  font-size: 18px;
  line-height: 1.25;
  font-weight: bold;
}
#TB_ajaxContent .cp_box dl {
	background: #fff;
  padding: 5px 15px 15px;
  border-top: 1px dotted #633f00;
}
#TB_ajaxContent .cp_box dt {
	margin-top: 10px;
  font-weight: bold;
}


/**************** #lead_box ****************/

#lead_box {margin: 20px 0 65px;}
#lead_box > dt {
	height: 210px;
  position: relative;
}
#lead_box > dt img {
	position: absolute;
  left: -27px;
}
#lead_box > dt .image01 {top: 0;}
#lead_box > dt .image02 {bottom: -6px;}

#lead_box > dd {overflow: hidden;}
#lead_box dd dl {
	width: 230px;
  float: left;
}
#lead_box dd dl + dl {margin-left: 10px;}
#lead_box dd dt {
  font-size: 24px;
  color: #fff;
  background: #039;
  text-align: center;
  padding: 10px;
}
#lead_box dd dt > a{
	display:block;
	width:100%;
	height:100%;
	text-decoration:none;
	color:#fff;
}
#lead_box dd dt > a:after{
	border-color: #fff transparent transparent transparent;
	border-style: solid;
	border-width:  10px 8px 0 8px;
	content: "";
	display: inline-block;
	height: 0;
	margin-left: 10px;
	width: 0;
	margin-bottom: 3px;
	
}

#lead_box dd dd {
	font-size: 16px;
  line-height: 1.8;
  background: #fffee5;
  border: 2px solid #a9963e;
  padding: 15px 10px;
}


/**************** title ****************/

.title02 {
	font-size: 40px;
  color: #fff;
  letter-spacing: .05em;
  text-align: center;
  padding: 20px;
}
.title02 span {font-size: 32px;}
.title02.bgY {background: #FFB400;}
.title02.bgB {background: #039;}
.title02.bglB {color: #013483;background-color: #cfdefb;}


/**************** .step_box ****************/

.outer {padding: 40px 0 65px;}
.outer.bgY {background: #fefdee;}

/**************** .step_box ****************/

.step_box {
	border: 5px solid #e5e2e2;
  padding: 30px 25px;
  background: #fff;
}
.step_box > h3 {
	font-size: 26px;
  color: #633f00;
  line-height: 1.2;
  background: #ffe7b0;
  margin: 0 -40px 30px;
  padding: 11px 35px 9px 215px;
  position: relative;
}
.step_box > h3 img {
	position: absolute;
  top: -45px;
  left: 35px;
  z-index: 2;
}
.step_box > h3 + * {
	position: relative;
  z-index: 5;
}
.step_box > h3:before, .step_box > h3:after {
	content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px;
  position: absolute;
  bottom: -10px;
}
.step_box > h3:before {border-color: #c18902 #c18902 transparent transparent; left: 0;}
.step_box > h3:after {border-color: #c18902 transparent transparent #c18902; right: 0;}


/***** .step1 *****/

.step1 dl {
  float: left;
  width: 390px;
  background: #fefdee;
  padding: 25px 15px 0;
  box-shadow: 2px 2px 2px rgba(0,0,0,.1);
}
.step1 dl + dl {float: right;}
.step1 dt {
	color: #633f00;
  font-size: 26px;
  text-align: center;
  padding-bottom: 5px;
  border-bottom: 2px dotted #633f00;
}
.step1 dd {
  padding: 20px;
  font-size: 18px;
  line-height: 1.8;
}
.step1 dd p + p {margin-top: 5px;}
.step1 dd p span {
  font-size: 90%;
  line-height: 1.25;
}


/***** .step2 *****/

.step2 {margin-top: 60px;}
.cp_box {
  text-align: center;
  background: #fef5c5;
  padding: 10px;
  box-shadow: 2px 2px 2px rgba(0,0,0,.1);
}
.cp_box + .cp_box {margin-top: 30px;}
.cp_box h4 {
  margin-bottom: 10px;
  padding-bottom: 10px;
  background: url(../image/top02/step2_line.png) repeat-x left bottom;
}
.cp_box .cp > li {
  display: table;
  width: 100%;
}
.cp_box .cp > li + li {margin-top: 10px;}
.cp_box .cp > li > * {
  display: table-cell;
  vertical-align: middle;
}

/* left box */
.cp_box .cp li > dl {
  width: 475px;
  background: #fefdee;
  position: relative;
}
.cp_box .cp li > dl:after {
	content: "";
  width: 0;
  position: absolute;
  top: 10px;
  right: 0;
  bottom: 10px;
  border-right: 2px dotted #633f00;
}
.cp_box .cp li > dl dt {
  font-size: 24px;
  padding: 30px 20px 25px;
}.cp_box .cp li > dl dd {padding: 0 10px 20px;}
.cp_box .cp .name {
  font-size: 27px;
  line-height: 1.25;
  font-weight: bold;
  margin-bottom: 25px;
}
.cp_box .cp .name span {
  font-size: 16px;
  line-height: 1.8;
  font-weight: normal;
  display: block;
}
.cp_box .cp .data {font-size: 13px;}
.cp_box .cp .data + .data {margin-top: 12px;}
.cp_box .cp .label {
	position: absolute;
  left: 0;
  top: 0;
}

/* right box */
.cp_box .cp > li > div {
  background: #fff;
  font-weight: bold;
  padding: 15px 15px 80px;
  position: relative;
}
.cp_box .cp > li > div p {
  color:	#e24343;
  font-size: 16px;
  line-height: 1.8;
}
.cp_box .cp > li > div strong {
	color: inherit;
  line-height: 1.4;
  font-size: 28px;
  margin: 0 2px;
}
.cp_box .btn {
  overflow: hidden;
  position: absolute;
  bottom: 15px;
  left: 15px;
  right: 15px;
}
.cp_box .btn li {
	width: 175px;
  float: left;
  padding-bottom: 5px;
}
.cp_box .btn li + li {float: right;}
.cp_box .btn li a {
	display: block;
  font-size: 16px;
  color: #fff;
  text-decoration: none;
  padding: 10px 6px 8px;
  background: #2c6ef2;
  border-radius: 5px;
  box-shadow: 0 3px 0 rgba(0,0,0,.25);
  text-shadow: 1px 1px 1px rgba(0,0,0,.25);
  transition: .2s;
}
.cp_box .btn li + li a {background: #fab300;}
.cp_box .btn li a:hover {opacity: .75;}

/* point total */
#point_total {
	width: 660px;
  height: 135px;
  margin: 40px 0 35px;
  padding: 185px 235px 0 55px;
  background: url(../image/top02/point_total.jpg) no-repeat 0 0;
  position: relative;
  text-align: center;
  font-size: 26px;
  line-height: 1.25;
}
#point_total strong {color: #de4242;}
#point_total > strong {display: block;}
#point_total strong span {
  font-size: 86px;
  margin: 0 5px;
}

a.btn{
    background: #2c6ef2 none repeat scroll 0 0;
    border-radius: 5px;
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.25);
    color: #fff;
    display: block;
    font-size: 16px;
	margin:0 auto;
    padding: 10px 6px 8px;
    text-decoration: none;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25);
    transition: all 0.2s ease 0s;
	text-align:center;
}
a.btn:hover {
	opacity: 0.75;
}

/* point total_02 （201712追加）*/
#point_total_02 {
	width: 660px;
  height: 135px;
  margin: 40px 0 35px 85px;
  padding: 185px 50px 0 55px;
  background: url(../image/top02/point_total_02.png) no-repeat 0 0;
  position: relative;
  text-align: center;
  font-size: 26px;
  line-height: 1.25;
}
#point_total_02 strong {color: #de4242;}
#point_total_02 > strong {display: block;}
#point_total_02 strong span {
  font-size: 86px;
  margin: 0 5px;
}

a.btn{
    background: #2c6ef2 none repeat scroll 0 0;
    border-radius: 5px;
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.25);
    color: #fff;
    display: block;
    font-size: 16px;
	margin:0 auto;
    padding: 10px 6px 8px;
    text-decoration: none;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25);
    transition: all 0.2s ease 0s;
	text-align:center;
}
a.btn:hover {
	opacity: 0.75;
}
/**************** miryoku ****************/

#reason {
  text-align: center;
  letter-spacing: -.4em;
}
#reason li {
  display: inline-block;
  letter-spacing: normal;
  vertical-align: top;
  margin: 0 10px;
}
#reason li p {
  font-size: 16px;
  line-height: 1.8;
  margin: 20px 0 25px;
}





/* -------------------- add 20180201 --------------------
 *
 * アンカーリンク(共通スタイル)
 *
 ------------------------------------------------------ */
.anc-link__list{
  overflow: hidden;
  margin-bottom: 74px;
}

.anc-link__item{
  height: 148px;
  float: left;
  background-color: #003399;
  border-left: 1px solid #fff;
  box-sizing: border-box;
  position: relative;
}

/* アンカーリンク上部のボーダーを擬似要素で対応 */
.anc-link__item:before{
  display: block;
  content: '';
  height: 7px;
  background-color: #011a4a; 
  position: absolute;
  top: 0;
  left: -2px;
}
.anc-link__item:first-child:before{
  left: 0;
}

/* hover時の背景色とボーダートップ色 */
.anc-link__item:hover{
  background-color: #cfdefb;
  border-left: 1px solid #cfdefb;
}

.anc-link__item:hover:before{
  background-color: #003399;
}

/* 先頭アンカーリンクのみ左ボーダー非表示 */
.anc-link__item:first-child{
  border-left: none;
}

.anc-link__item:first-child:hover{
  border-left: none;
}

.anc-link__item a{
  display: block;
  padding-top: 7px;
}


/* -------------------- add 20171201 --------------------
 *
 * アンカーリンク(4カラム) ※20180201更新
 *
 * - クラス共通化のため不要スタイル削除
 *
 ------------------------------------------------------ */

.anc-link__item--col4{
  width: 236px;
}
/* アンカーリンク上部のボーダー幅 */
.anc-link__item--col4:before{
  width: 237px;
}
/* アンカーリンク（最後）の幅調整 */
.anc-link__item--col4:last-child{
  width: 239px;
}
/* アンカーリンク上部（最後）のボーダー幅 */
.anc-link__item--col4:last-child:before{
  width: 239px;
}

/* -------------------- add 20180201 --------------------
 *
 * アンカーリンク(5カラム)
 *
 ------------------------------------------------------ */

.anc-link__item--col5{
  width: 190px;
}
/* アンカーリンク上部のボーダー幅 */
.anc-link__item--col5:before{
  width: 191px;
}

/* -------------------- add 20190104 --------------------
 *
 * アンカーリンク(3カラム)
 *
 ------------------------------------------------------ */

.anc-link__item--col3{
  width: 236px;
}
/* アンカーリンク3カラムの場合の全体位置調整 */
.anc-link__item--col3:first-child{
	margin-left:115px;
}
/* アンカーリンク上部のボーダー幅 */
.anc-link__item--col3:before{
  width: 237px;
}


/* -------------------- add 20180402 --------------------
 *
 * 看板エリア_パターン03
 *
 ------------------------------------------------------ */

/* 看板エリアとテキストの相対指定 */
.main-visual-area-03,
.main-visual-area-03__txt{
  position: relative;
}
/* 看板エリアの基本スタイル */
.main-visual-area-03__bg{
  position: absolute;
  height: 680px;
  width: 100%;
  left: 0;
  right: 0;
  top: 0;
  z-index: 0;
}
.main-visual-area-03__inner {
  width: 950px;
  height: 100%;
  margin: 0 auto;
  position: relative;
}
/* 開設ボタン */
.main-visual-area-03__btn {
  position: absolute;
}
.main-visual-area-03__btn02 a{
  display: block;
}
/* 開催期間 */
.main-visual-area-03__term{
  display: inline-block;
  position: absolute;
  font-weight: bold;
  color: #000;
}

/* -------------------- add 20180702 --------------------
 *
 * 看板エリア_パターン04
 *
 ------------------------------------------------------ */

/* 看板エリアとテキストの相対指定 */
.main-visual-area-04,
.main-visual-area-04__txt{
  position: relative;
}
/* 看板エリアの基本スタイル */
.main-visual-area-04__bg{
  position: absolute;
  height: 580px;
  width: 100%;
  left: 0;
  right: 0;
  top: 0;
  z-index: 0;
}
.main-visual-area-04__inner {
  width: 950px;
  height: 100%;
  margin: 0 auto;
  position: relative;
}

/* 開設ボタン */
.main-visual-area-04__btn {
  position: absolute;
}

.main-visual-area-04__btn .button01{
     display:block;
     width: 370px;
     height:60px;
     line-height: 60px;
     color: #FFF;
     text-decoration: none;
     text-align: center;
     background-color: #c70614;
     border-radius: 30px;
     -webkit-transition: all 0.5s;
     transition: all 0.5s;
}
.main-visual-area-04__btn .button01:hover{
     background-color: #f9c500;
}

.main-visual-area-04__btn .button02{
     display:block;
     width: 717px;
     height:162px;
     line-height: 60px;
     color: #FFF;
     text-decoration: none;
     text-align: center;
    background: url(/ITS/rakuten_g/image/top03/ttl-20181001-btn.png) no-repeat center center;
     border-radius: 30px;
     /*-webkit-transition: all 0.5s;*/
     /*transition: all 0.5s;*/
}
.main-visual-area-04__btn .button02:hover{
     background: url(/ITS/rakuten_g/image/top03/ttl-20181001-btn_on.png) no-repeat center center;
}

.main-visual-area-05__btn {
  position: absolute;
}

.main-visual-area-05__btn {
    bottom: 155px;
    font-size: 22px;
    letter-spacing: 0.25em;
    right: 160px;
}

.main-visual-area-05__btn .button03{
     display:block;
     width: 666px;
     height:119px;
     line-height: 60px;
     color: #FFF;
     text-decoration: none;
     text-align: center;
    background: url(/web/shared/images/button/btn-account-login-main-01.png) no-repeat center center;
     /*-webkit-transition: all 0.5s;*/
     /*transition: all 0.5s;*/
}
.main-visual-area-05__btn .button03:hover{
     background: url(/web/shared/images/button/btn-account-login-main-01_h.png) no-repeat center center;
}


/* 開催期間 */
.main-visual-area-04__term{
  font-weight: bold;
  color: #fff;
	background-color: #000;
	padding: 8px;
	text-align: center;
	margin-bottom: 15px !important;
}

.lead-text {
	text-align: center;
	font-size: 36px;
	font-weight: bold;
	margin-top: 60px;
	margin-bottom: 24px;
}