/*present style.css */ /* color_site:#EB8221; color_text:#333333; color_comment:#939393 --------------------- color_puzzle:#FFB782; color_brain:#EFD018; color_card:#9CC0FF; color_action:#6FDD8E; color_typing:#E682E8; color_puzzle_text:#CE824E; color_brain_text:#AD9B3E; color_card_text:#5381C4; color_action_text:#3CAF57; color_typing_text:#A456A8; --------------------- color_sub_red:#EA2824; color_sub_green:#59C65F; color_sub_blue:#2487EA; color_sub_yellow:#F7C34D; */ @charset "utf-8"; #present {} #present #eyecatch_area {} #present #eyecatch_area h3 { font-size: 1.3rem; color:#EB8221;} #present #eyecatch_area p { font-size: 1.2rem; text-align: center;} #present .present_info { font-size: 1.4rem; margin-bottom: 20px;} #present .present_info dt { text-align: right;} #present .present_info dd {} #present .present_info dd span, #present .present_info dd p.attention { font-size: 1.0rem; font-weight: normal;} #present .present_info dd span a { color:#EB8221; text-decoration: underline; } #present .text_box { text-align: center;} #present .text_box .before_event { font-size: 1.4rem; color:#EB8221; font-weight: bold;} #present .text_box .during_event { font-size: 1.8rem; color:#EB8221;} #present .text_box .end_event { font-size: 1.4rem; color:#EB8221; font-weight: bold;} #present .button_box .btn, #mypage_present .button_box .btn { position: relative; } #present .button_box i, #mypage_present .button_box i { position: absolute; display: inline-block;} #present .button_box i:nth-of-type(1) { top: 10px; left: 15px;} #present .button_box i:nth-of-type(2) { top: 10px; right: 15px;} #mypage_present .button_box .btn.to_top i:nth-of-type(1) { top: 10px; left: 15px;} #mypage_present .button_box .btn.to_top i:nth-of-type(2) { top: 10px; right: 15px;} #mypage_present .button_box .btn.to_input i:nth-of-type(1) { top: 10px; left: 15px;} #mypage_present .button_box .btn.to_input i:nth-of-type(2) { top: 10px; right: 15px;} #mypage_present .button_box .btn.to_confirm i:nth-of-type(1) { top: 7px; left: 15px;} #mypage_present .button_box .btn.to_confirm i:nth-of-type(2) { top: 7px; right: 15px;} #mypage_present .button_box .btn.to_do i:nth-of-type(1) { top: 16px; left: 18px;} #mypage_present .button_box .btn.to_do i:nth-of-type(2) { top: 16px; right: 18px;} #mypage_present .button_box .btn.to_mypage i:nth-of-type(1) { top: 6px; left: 15px;} #mypage_present .button_box .btn.to_mypage i:nth-of-type(2) { top: 6px; right: 15px;} #mypage_present .present_info { font-size: 1.2rem; margin-bottom: 20px;} #mypage_present .present_info label { text-align: right;} @media screen and (max-width: 767px) { #mypage_present .present_info { font-size: inherit;} #mypage_present .present_info label { text-align: left;} #mypage_present .present_info .form-control { font-size: inherit; height: inherit;} } #present_result {} #present_result .present_list .present_box { padding-bottom: 15px; border-bottom: 1px solid #EB8221; margin-bottom: 15px;} #present_result .present_list .present_box h3 { font-size: 18px; color: #EB8221;} #present_result .present_list .present_box img { width: 100%; vertical-align: bottom;} #present_result .present_list .present_box img:hover { opacity: 0.8;} #present_result .present_list .present_box table.simple-table { width: 100%; table-layout: fixed; margin: 0;} #present_result .present_list .present_box table.simple-table th { width: 80px;} #present_result .present_list .present_box table.simple-table td { padding: 8px 10px;} #present_result .present_list .present_box .title_box { position: relative; } #present_result .present_list .present_box .title_box h3 { float: left; line-height: 25px;} #present_result .present_list .present_box .title_box a.change_info { float: right; margin-top: 0; width: 160px; height: 25px; line-height: 25px; padding-right: 10px;} #present_result .present_list .present_box .title_box a.change_info.disabled { background-color: #333; padding-right: 0; } #present_result .present_list .present_box .title_box a.change_info img { position: absolute; width: 15px; height: 15px; } #present_result_detail {} #present_result_detail .result_wrap { background-color: #e70012; background-image:url(../../images/site/present/result/back.png);} #present_result_detail .result_wrap > .inner { width: 868px; margin: 0 auto; padding: 30px 0 0; background-color: #e70012;} #present_result_detail .result_wrap > .inner h3 { margin-bottom: 30px; } #present_result_detail .result_wrap > .inner h3 img { width: 640px; } #present_result_detail .result_wrap > .inner .result_box { /*margin-bottom: 30px;*/ padding: 18px; background-color: #fbd8b5;} #present_result_detail .result_wrap > .inner .result_box > .inner { text-align: center; border:18px solid #e70012; background-image: url(../../images/site/present/result/frame_back.png); background-repeat: repeat; padding: 18px 0 22px; background-position: center;} #present_result_detail .result_wrap > .inner .result_box > .inner .term { font-size: 30px; line-height: 1.2; margin-bottom: 18px;} #present_result_detail .result_wrap > .inner .result_box > .inner img.total { width: 232px; margin-bottom: 18px; } #present_result_detail .result_wrap > .inner .result_box > .inner .num_box { width: 540px; margin: 0 auto 22px;} #present_result_detail .result_wrap > .inner .result_box > .inner .roulette { float: left; } #present_result_detail .result_wrap > .inner .result_box > .inner .roulette.num { width: 151px; height: 186px !important; border: 3px solid #000; margin-right: 5px;} #present_result_detail .result_wrap > .inner .result_box > .inner .roulette.parts { padding: 111px 0 0 4px;} #present_result_detail .result_wrap > .inner .result_box > .inner .roulette.parts img { width: 68px; height: 69px;} #present_result_detail .result_wrap > .inner .result_box > .inner .thanks img { width: 632px;} #present_result_detail .result_wrap > .inner .result_box > .inner .num_box.for_4digits { width: 702px;} #present_result_detail .result_wrap > .inner .result_box > .inner.winner_box { background-image:none; position: relative; } #present_result_detail .result_wrap > .inner .result_box > .inner.winner_box h4 { width: 908px; position: absolute; top: -56px; left: -56px; } #present_result_detail .result_wrap > .inner .result_box > .inner.winner_box .parts { margin-top: 36px; margin-bottom: 20px; } #present_result_detail .result_wrap > .inner .result_box > .inner.winner_box .parts img { width: 482px;} #present_result_detail .result_wrap > .inner .result_box > .inner.winner_box .present_box { position: relative; width: 730px; border:5px solid #e70012; margin: 0 auto 66px; background-color: #FFF ; padding: 20px 0 40px; } #present_result_detail .result_wrap > .inner .result_box > .inner.winner_box .present_box h5 { font-size: 44px; font-weight: bold; padding-top: 86px; width: 798px; height: 143px; position: absolute; bottom: -36px; left: -34px; color:#fbd8b5; background-image: url(../../images/site/present/result/ribbon_b.svg); background-size: cover;} #present_result_detail .result_wrap > .inner .result_box > .inner.winner_box .present_box img { max-width: 100%; vertical-align: bottom;} #present_result_detail .result_wrap > .inner .result_box > .inner.winner_box .comment_box {} #present_result_detail .result_wrap > .inner .result_box > .inner.winner_box .comment_box h5 { font-size: 44px; font-weight: bold; margin-bottom: 26px;} #present_result_detail .result_wrap > .inner .result_box > .inner.winner_box .comment_box h6 { font-size: 34px; font-weight: bold; margin-bottom: 16px;} #present_result_detail .result_wrap > .inner .result_box > .inner.winner_box .comment_box p { font-size: 24px; font-weight: bold; margin-bottom: 16px;} #present_result_detail .next_wrap { background-color: #e70012; padding: 50px 0 0;} #present_result_detail .next_wrap > .inner { max-width:1170px; margin: 0 auto;} #present_result_detail .next_wrap > .inner h4 {} #present_result_detail .next_wrap > .inner h4 img{ width: 100%;} #present_result_detail .next_wrap > .inner .announce_box { width: 868px; margin: -30px auto 0;} #present_result_detail .next_wrap > .inner .announce_box .next_box { width: 100%;} #present_result_detail .next_wrap > .inner .announce_box .next_box > img { width: 100%; vertical-align: bottom;} #present_result_detail .next_wrap > .inner .announce_box .next_box.left, #present_result_detail .next_wrap > .inner .announce_box .next_box.right { width: 434px; float: left;} #present_result_detail .next_wrap > .inner .announce_box .next_box h5 { width: 424px; margin-bottom: 20px; padding: 9px 0; text-align: center; background-color: #fbd8b5; height: 100px; color: #ff0000; font-size: 42px; font-weight: bold;} #present_result_detail .next_wrap > .inner .announce_box .next_box h5 span { display: block; border-top:5px solid #ff0000; border-bottom:5px solid #ff0000; line-height: 70px; } #present_result_detail .next_wrap > .inner .announce_box .next_box.right h5 { margin-left: 10px; } #present_result_detail .next_wrap > .inner .announce_box .next_box .item_box { position: relative; background-color: #fbd8b5; padding: 10px 10px 0;} #present_result_detail .next_wrap > .inner .announce_box .next_box .item_box .inner { padding: 10px 15px; border: 10px solid #e70012; } #present_result_detail .next_wrap > .inner .announce_box .next_box .item_box .inner .img_box { border: 5px solid #e70012; background-color: #FFF; text-align: center; margin-bottom: 42px;} #present_result_detail .next_wrap > .inner .announce_box .next_box .item_box .inner .img_box img { max-width: 100%; } #present_result_detail .next_wrap > .inner .announce_box .next_box .item_box .info_box { width: 100%; text-align: center; line-height: 1.2;} #present_result_detail .next_wrap > .inner .announce_box .next_box .item_box .info_box th { font-size: 30px; font-weight: bold; color: #000000; text-align: center;} #present_result_detail .next_wrap > .inner .announce_box .next_box .item_box .info_box td.term { font-size: 46px; font-weight: bold; color: #ff0000; text-align: center; padding-bottom: 30px;} #present_result_detail .next_wrap > .inner .announce_box .next_box .item_box .info_box td.point { font-size: 30px; font-weight: bold; color: #000000; text-align: center; padding-bottom: 10px;} #present_result_detail .next_wrap > .inner .announce_box .next_box .item_box h6 { font-size: 30px; font-weight: bold; text-align: center; padding-top: 58px; width: 394px; height: 98px; position: absolute; top: 254px; left: 20px; color:#fbd8b5; background-image: url(../../images/site/present/result/ribbon_s.svg); background-size: cover;} #present_result_detail .next_wrap > .inner .announce_box .next_box .item_box .circle_box { width: 143px; height: 143px; position: absolute; top: -5px; left: -5px; border-radius: 50%; background-color: #e70012; color: #fbd8b5; font-size: 28px; font-weight: bold; text-align: center; padding-top: 36px; line-height: 1.1;} #present_result_detail .next_wrap > .inner .announce_box .next_box .item_box .circle_box span { font-size: 42px; font-weight: bold;} #present_result_detail .next_wrap > .inner .attention { width: 868px; margin: 0 auto; line-height: 60px; background-color: #fbd8b5; text-align: center; font-size: 18px; font-weight: bold; color:#000; } #present_result_detail .howto_wrap { background-color: #e70012; padding: 50px 0 0;} #present_result_detail .howto_wrap > .inner { max-width: 868px; margin: 0 auto;} #present_result_detail .howto_wrap > .inner .title { width: 100%; margin-bottom: 30px;} #present_result_detail .howto_wrap > .inner .howto_box { float: left;} #present_result_detail .howto_wrap > .inner .howto_box.box01 { width: 430px; margin-right: 9px;} #present_result_detail .howto_wrap > .inner .howto_box.box02 { width: 210px; margin-right: 9px;} #present_result_detail .howto_wrap > .inner .howto_box.box03 { width: 210px;} #present_result_detail .howto_wrap > .inner .howto_box img.subtitle { height: 20px; margin-bottom: 18px; } #present_result_detail .howto_wrap > .inner .howto_box a { display: inline-block; } #present_result_detail .howto_wrap > .inner .howto_box a + a { margin-left: 9px; } #present_result_detail .howto_wrap > .inner .howto_box a img { width: 210px; height: 110px; vertical-align: bottom;} #present_result_detail .howto_wrap > .inner .step_box { float: left;} #present_result_detail .howto_wrap > .inner .step_box img { width: 100%;} #present_result_detail .howto_wrap > .inner .step_box.box01 { width: 260px; margin-right: 13px;} #present_result_detail .howto_wrap > .inner .step_box.box02 { width: 260px; margin-right: 13px;} #present_result_detail .howto_wrap > .inner .step_box.box03 { width: 260px;} #present_result_detail .howto_wrap > .inner img.arrow { float: left; width: 22px; height: 60px; margin-right: 9px; margin-top: 160px; padding: 0;} #present_result_detail .howto_wrap > .inner .attention { width: 868px; margin: 0 auto; padding: 30px 0; line-height: 1.2; text-align: center; font-size: 18px; font-weight: bold; color:/*#000*/#FFF; } /*SP*/ #present.sp #eyecatch_area h3 { font-size: inherit;} #present.sp #eyecatch_area p { font-size: inherit;} #present.sp .present_info { font-size: inherit;} #present.sp .present_info p.attention { font-size: inherit;} #present.sp .present_info dd span { font-size: inherit;} #present.sp .text_box .before_event { font-size: inherit;} #present.sp .text_box .during_event { font-size: inherit;} #present.sp .text_box .end_event { font-size: inherit;} #present_result.sp .present_list .present_box { padding-top: 30px; padding-bottom: 30px; margin-bottom: 0; float: none;} #present_result.sp .present_list .present_box h3 { font-size: inherit; line-height: /*40px;*/60px; float:none;} #present_result.sp .present_list .col-xs-12 { width: 100%;} #present_result.sp .present_list .present_box img { margin-bottom: 10px;} #present_result.sp .present_list .present_box table.simple-table th { width: 240px;} #present.sp .button_box .btn.btn_style1, #mypage_present.sp .button_box .btn.btn_style1 { height: 128px; line-height: 128px;} #present.sp .button_box .btn.btn_style1 i { font-size: 108px;} #mypage_present.sp .button_box .btn.btn_style1 i { font-size: 114px;} #mypage_present.sp .button_box .btn.btn_style1[name="action_user_mypage_present_init"] i { font-size: 108px;} #mypage_present.sp .button_box .btn.btn_style1[name="action_user_mypage_present_do"] i { font-size: 102px;} #mypage_present.sp .present_info { font-size: inherit;} #mypage_present.sp .present_info label { text-align: left;} #mypage_present.sp .present_info .form-control { font-size: inherit; height: inherit;} #mypage_present.sp #eyecatch_area ul {text-align: left;} #present_result_detail.sp .next_wrap > .inner .attention, #present_result_detail.sp .howto_wrap > .inner .attention { font-size: 36px;} #present_result_detail.sp .next_wrap > .inner .attention br.visible-xs, #present_result_detail.sp .howto_wrap > .inner .attention br.visible-xs { display: block!important;} #present.sp .cnt_title_h2, #present_result.sp .cnt_title_h2, #present_result_detail.sp .cnt_title_h2 { margin-bottom: 90px; } #present.sp .change_info, #present_result.sp .change_info, #present_result_detail.sp .change_info { position: absolute; bottom: -70px; font-size: 2.5rem; width: 460px; height: 60px; line-height: 60px; right: 0; } #present_result.sp .present_list .present_box a.change_info.for_sp { width: 460px; font-size: 2.5rem; line-height: 60px; height: 60px; display: block; position: relative; bottom: 0; margin-top: 20px; } #present.sp .change_info img, #present_result.sp .change_info img, #present_result.sp .present_list .present_box .title_box a.change_info img, #present_result_detail.sp .change_info img { width: 50px; height: 50px; } #present.sp .change_info:nth-of-type(1), #present_result.sp .change_info:nth-of-type(1), #present_result_detail.sp .change_info:nth-of-type(1) { right: 0;} #present.sp .change_info:nth-of-type(2), #present_result.sp .change_info:nth-of-type(2), #present_result_detail.sp .change_info:nth-of-type(2) { right: 470px; margin-right: 0!important;} #present.sp .present_info dt { width: 100%; text-align: left;} #present.sp .present_info dd { width: 100%;} #present.sp .twitter_campaign img { width: 100%; max-width: 1200px;}