@charset "UTF-8"; /* -------------------------------------------------------------- CSS Information File name: style.css -------------------------------------------------------------- */ /* clearfix */ .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { display: inline-block; } * html .clearfix { height: 1%; } .clearfix { display: block; } /* End clearfix */ #wrapper { min-width: 960px; overflow: hidden; } #youjun_container { font-size: 14px; line-height: 1.8em; color: #ffffff; background: url(/-/Media/com/youjun/top/vi_youjun_bg.jpg) no-repeat center top #252c4f; font-family: YuGothic, '游ゴシック', "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; overflow: hidden; position: relative; } #youjun_container .ir { display: block; text-align: left; text-indent: -999em; overflow: hidden; } #youjun_container .fss { font-size: 10px; vertical-align: top; display: inline-block; margin-right: 2px; } #youjun_container .hover { -webkit-transition: all 400ms; -moz-transition: all 400ms; -ms-transition: all 400ms; -o-transition: all 400ms; transition: all 400ms; filter: alpha(opacity=100); opacity: 1; } #youjun_container .hover:hover { filter: alpha(opacity=60); opacity: 0.6; } #youjun_container .active { -webkit-transition: all 400ms; -moz-transition: all 400ms; -ms-transition: all 400ms; -o-transition: all 400ms; transition: all 400ms; filter: alpha(opacity=100); opacity: 1; } #youjun_container .active:hover { filter: alpha(opacity=0); opacity: 0; } #youjun_container img { display: inline-block; } #youjun_container .inner { width: 940px; margin: 0 auto; position: relative; } #youjun_container #pagetitle { height: 300px; background: url(/%7E/Media/com/youjun/top/vi_youjun_bg2.png) no-repeat top center; } #youjun_container #pagetitle .spresize { display: none; } #youjun_container #pagetitle .title_box { width: 380px; float: left; margin: 58px 0 0 38px; } #youjun_container #pagetitle .title_box p { float: right; } #youjun_container #pagetitle .title_box p span { float: right; } #youjun_container #pagetitle .title_box p span.txt1, #youjun_container #pagetitle .title_box p span.txt2, #youjun_container #pagetitle .title_box p span.txt3 { margin: 0 -2px; } #youjun_container #pagetitle .title_box p span.txt4 { margin-right: 4px; } #youjun_container #pagetitle .right_box { width: 470px; float: right; position: relative; text-align: center; } #youjun_container #pagetitle .right_box h1 { position: absolute; right: 22px; top: 14px; } #youjun_container #pagetitle .right_box .img { margin: 36px 0 0; } #youjun_container #pagetitle .right_box .img img { width: 270px; } #youjun_container #pagetitle .right_box .txt { margin: 20px 0 0 100px; text-align: left; } #youjun_container #pagetitle .right_box .txt img { width: 206px; } #youjun_container #kodawari { background: url(/%7E/Media/com/youjun/top/bg_night.png) repeat-x left top; } #youjun_container #kodawari .wrap { background: url(/%7E/Media/com/youjun/top/bg_moon.png) no-repeat top center; } #youjun_container #kodawari .wrap2 { background: url(/%7E/Media/com/youjun/top/bg_morning.png) repeat-x left bottom; } #youjun_container #kodawari .wrap3 { background: url(/%7E/Media/com/youjun/top/bg_cloud.png) no-repeat bottom center; } #youjun_container #kodawari .inner { padding: 52px 0 64px; } #youjun_container #kodawari h2 { text-align: center; margin-bottom: 44px; } #youjun_container #kodawari dl dt { text-align: center; margin-bottom: 13px; } #youjun_container #kodawari .txt_box1 { margin-left: 144px; float: left; width: 338px; min-height: 280px; background: url(/%7E/Media/com/youjun/top/bg_sub_title1.png) no-repeat center; } #youjun_container #kodawari .txt_box1 dt { padding-top: 42px; } #youjun_container #kodawari .txt_box1 dt img { width: 235px; } #youjun_container #kodawari .txt_box2 { margin: 58px 72px -32px 0; float: right; width: 300px; min-height: 260px; background: url(/%7E/Media/com/youjun/top/bg_sub_title2.png) no-repeat center; } #youjun_container #kodawari .txt_box2 dt { padding-top: 70px; } #youjun_container #kodawari .txt_box2 dt img { width: 250px; } #youjun_container #kodawari .txt_box3 { margin: 5px 0 -60px 62px; clear: both; float: left; width: 360px; min-height: 300px; background: url(/%7E/Media/com/youjun/top/bg_sub_title3.png) no-repeat center; } #youjun_container #kodawari .txt_box3 dt { padding-top: 62px; } #youjun_container #kodawari .txt_box3 dt img { width: 300px; } #youjun_container #kodawari .txt_box4 { margin: 46px 65px -60px 0; float: right; width: 308px; min-height: 276px; background: url(/%7E/Media/com/youjun/top/bg_sub_title4.png) no-repeat center; } #youjun_container #kodawari .txt_box4 dt { padding-top: 38px; } #youjun_container #kodawari .txt_box4 dt img { width: 286px; } #youjun_container #kodawari .txt_box5 { margin: 0 auto 20px; clear: both; width: 334px; min-height: 276px; background: url(/%7E/Media/com/youjun/top/bg_sub_title5.png) no-repeat center; } #youjun_container #kodawari .txt_box5 dt { padding-top: 74px; } #youjun_container #kodawari .txt_box5 dt img { width: 318px; } #youjun_container #kodawari .btn { width: 500px; margin: 0 auto; } #youjun_container #kodawari .btn a { display: block; width: 500px; height: 70px; border-radius: 2px; text-align: center; background: url(/%7E/Media/com/youjun/top/btn_bg.png) repeat-x left center; position: relative; box-shadow: rgba(12, 50, 96, 0.4) 0px 0px 13px 4px; -webkit-box-shadow: rgba(12, 50, 96, 0.4) 0px 0px 13px 4px; -moz-box-shadow: rgba(12, 50, 96, 0.4) 0px 0px 13px 4px; } #youjun_container #kodawari .btn a span { display: inline-block; } #youjun_container #kodawari .btn a .ico { position: absolute; top: -26px; left: 5%; } #youjun_container #kodawari .btn a .txt { padding: 24px 0 0 28px; } #youjun_container #kodawari .arw { position: absolute; left: 50%; bottom: -54px; margin-left: -79px; } #youjun_container #kodawari .pict { position: absolute; left: 50%; bottom: 0px; margin-left: 250px; width: 250px; } #youjun_container #product { border-bottom: 4px solid #fff; background: url(/%7E/Media/com/youjun/top/bg_kodawari_top.jpg) repeat-x top left; } #youjun_container #product .wrap { background: url(/%7E/Media/com/youjun/top/bg_drop.png) no-repeat top center; } #youjun_container #product .inner { padding: 140px 0 0; } #youjun_container #product h2 img { width: 356px; } #youjun_container #product .txt1 { margin: 16px 0 110px; font-weight: bold; } #youjun_container #product .img1 { position: absolute; right: -170px; top: -26px; z-index: 1; } #youjun_container #product .img1 img { width: 840px; } #youjun_container #product .txt_box { width: 440px; float: left; margin: 0 0 0 20px; position: relative; z-index: 2; } #youjun_container #product section { clear: both; position: relative; } #youjun_container #product section h3 { float: left; } #youjun_container #product section h3 img { width: 96px; } #youjun_container #product section h4 { float: left; margin: 0 0 10px -6px; } #youjun_container #product section .txt2 { float: left; width: 380px; margin: 0 0 0 2px; } #youjun_container #product section dl { width: 278px; } #youjun_container #product section dl dt { margin-bottom: 10px; text-align: center; font-weight: bold; line-height: 1.4em; } #youjun_container #product section dl dt img { margin-bottom: 10px; } #youjun_container #product section dl dd { width: 180px; margin: 0 auto; font-size: 10px; line-height: 1.8em; } #youjun_container #product section.odd h3 { float: left; margin-left: -10px; padding: 0 58px 30px 75px; background: url(/%7E/Media/com/youjun/top/ico_kodawari_bg1.png) no-repeat center bottom; } #youjun_container #product section.even h3 { float: right; margin-right: -10px; padding: 0 75px 30px 58px; background: url(/%7E/Media/com/youjun/top/ico_kodawari_bg2.png) no-repeat center bottom; } #youjun_container #product section.kodawari1 { padding-right: 300px; } #youjun_container #product section.kodawari1 dl { position: absolute; right: 0px; top: 0px; } #youjun_container #product section.kodawari2 { padding-top: 94px; padding-left: 330px; } #youjun_container #product section.kodawari2 dl { position: absolute; left: 0px; top: 30px; } #youjun_container #product section.kodawari3 { padding-top: 106px; padding-right: 420px; } #youjun_container #product section.kodawari3 .txt2 { width: 298px; } #youjun_container #product section.kodawari3 .chart { position: absolute; right: 0px; top: 126px; width: 482px; height: 250px; background: url(/%7E/Media/com/youjun/top/180705/chart_kodawari3_p.png) no-repeat center; } #youjun_container #product section.kodawari3 .chart img { display: none; } #youjun_container #product section.kodawari4 { padding: 134px 144px 0 42px; } #youjun_container #product section.kodawari4 .txt2 { width: 500px; text-align: right; } #youjun_container #product section.kodawari4 .txt2 img { width: 266px; } #youjun_container #product section.kodawari4 ul { margin: 0 -10px; } #youjun_container #product section.kodawari4 ul li { float: left; margin-right: 4px; padding-top: 14px; } #youjun_container #product section.kodawari4 ul li img { width: 168px; } #youjun_container #product section.kodawari5 { padding-top: 138px; } #youjun_container #product section.kodawari5 .chart { margin: 6px 8px; width: 678px; float: left; border: 1px solid #3a66b2; border-left: 0px; box-shadow: #384170 0px 0px 6px 1px; -webkit-box-shadow: #384170 0px 0px 6px 1px; -moz-box-shadow: #384170 0px 0px 6px 1px; } #youjun_container #product section.kodawari5 .chart dl { width: 338px; float: left; border-left: 1px solid #3a66b2; } #youjun_container #product section.kodawari5 .chart dl dt { margin-bottom: 0px; padding-top: 20px; height: 40px; text-align: center; border-bottom: 1px solid #3a66b2; box-shadow: #384170 0px 0px 6px 1px inset; -webkit-box-shadow: #384170 0px 0px 6px 1px inset; -moz-box-shadow: #384170 0px 0px 6px 1px inset; } #youjun_container #product section.kodawari5 .chart dl dd { padding: 26px 26px 0; width: auto; height: 370px; font-size: 13px; box-shadow: #384170 0px 0px 6px 1px inset; -webkit-box-shadow: #384170 0px 0px 6px 1px inset; -moz-box-shadow: #384170 0px 0px 6px 1px inset; } #youjun_container #product section.kodawari5 .chart dl dd h5 { margin: 24px 0 6px; font-size: 12px; } #youjun_container #product section.kodawari5 .chart dl dd h5 .txt3, #youjun_container #product section.kodawari5 .chart dl dd h5 .txt4 { display: inline-block; border: 1px solid #a9abb9; border-radius: 9px; text-align: center; font-weight: bold; width: 103px; padding: 8px 0 2px; line-height: 1.6em; box-shadow: #a9abb9 0px 0px 4px 0px; -webkit-box-shadow: #a9abb9 0px 0px 4px 0px; -moz-box-shadow: #a9abb9 0px 0px 4px 0px; } #youjun_container #product section.kodawari5 .chart dl dd h5 .txt3 .fss, #youjun_container #product section.kodawari5 .chart dl dd h5 .txt4 .fss { font-weight: lighter; display: block; font-size: 10px; line-height: 1em; padding-bottom: 2px; } #youjun_container #product section.kodawari5 .chart dl dd h5 .txt3 { float: left; margin-left: 25px; } #youjun_container #product section.kodawari5 .chart dl dd h5 .txt4 { float: right; } #youjun_container #product section.kodawari5 .chart dl.box1 dt img { width: 244px; } #youjun_container #product section.kodawari5 .chart dl.box2 dt img { width: 146px; } #youjun_container #product section.kodawari5 .chart dl.box2 dd img { margin-top: 24px; } #youjun_container #product section.kodawari6 { padding-top: 75px; } #youjun_container #product section.kodawari6 h4 { margin-left: 228px; margin-bottom: 30px; } #youjun_container #product section.kodawari6 .chart dl { float: left; width: 310px; margin-left: 44px; } #youjun_container #product section.kodawari6 .chart dl dt { border: 1px solid #fff; width: 309px; margin: 0 auto; text-align: center; padding: 8px 0; line-height: 1em; } #youjun_container #product section.kodawari6 .chart dl dd { width: auto; } #youjun_container #product section.kodawari6 .chart dl dd ul { margin: 0 auto; padding: 24px 0; } #youjun_container #product section.kodawari6 .chart dl dd ul li { float: left; border-left: 1px dashed #6e6f77; } #youjun_container #product section.kodawari6 .chart dl dd ul li:first-child { border-left: 0px; } #youjun_container #product section.kodawari6 .chart dl dd ul li img { width: 109px; margin: -20px 0; } #youjun_container #product section.kodawari6 .chart dl dd p { font-size: 12px; text-align: center; line-height: 1.8em; } #youjun_container #product section.kodawari6 .chart dl.box1 ul { margin: 0 -10px; } #youjun_container #product section.kodawari6 .chart dl.box2 ul { width: 220px; } #youjun_container #product .btn { width: 500px; margin: 60px auto 62px; background: #def0f4; border-radius: 2px; overflow: hidden; } #youjun_container #product .btn a { display: block; width: 500px; height: 46px; padding-top: 24px; text-align: center; border-radius: 2px; background: url(/%7E/Media/com/youjun/top/btn_bg.png) repeat-x left center; position: relative; box-shadow: rgba(12, 50, 96, 0.4) 0px 0px 13px 4px; -webkit-box-shadow: rgba(12, 50, 96, 0.4) 0px 0px 13px 4px; -moz-box-shadow: rgba(12, 50, 96, 0.4) 0px 0px 13px 4px; } #youjun_container #navigation { position: relative; height: 74px; width: 100%; } #youjun_container #sub_nav { min-width: 960px; width: 100%; position: absolute; z-index: 100; left: 0px; top: 0px; border-top: 1px solid #4f647a; border-bottom: 1px solid #4f647a; background: #252c4f; } #youjun_container #sub_nav ul { margin: 0 auto; width: 684px; padding: 20px 0; background: url(/%7E/Media/com/youjun/top/sub_nav_line.gif) no-repeat right center; } #youjun_container #sub_nav ul li { float: left; height: 32px; padding-left: 2px; background: url(/%7E/Media/com/youjun/top/sub_nav_line.gif) no-repeat left center; } #youjun_container #sub_nav ul li a { display: inline-block; height: 32px; width: 169px; color: #fff; -webkit-transition: all 400ms; -moz-transition: all 400ms; -ms-transition: all 400ms; -o-transition: all 400ms; transition: all 400ms; } #youjun_container #sub_nav ul li a:hover { text-decoration: none; } #youjun_container #sub_nav ul li.nav1 { background: none; padding-left: 0px; } #youjun_container #sub_nav ul li.nav1 a { width: 340px; text-align: center; } #youjun_container #sub_nav ul li.nav1 a span { color: #dbdce2; font-size: 12px; line-height: 1em; display: inline-block; border: 1px solid #dbdce2; padding: 4px; letter-spacing: 1px; margin-left: 10px; vertical-align: sub; } #youjun_container #sub_nav ul li.nav2 a { background: url(/%7E/Media/com/youjun/top/sub_nav_top.png) no-repeat center #252c4f; } #youjun_container #sub_nav ul li.nav3 a { background: url(/%7E/Media/com/youjun/top/sub_nav_hiwa.png) no-repeat center #252c4f; } #youjun_container #sub_nav ul li.nav2 a:hover, #youjun_container #sub_nav ul li.nav2 a.current { background: url(/%7E/Media/com/youjun/top/sub_nav_top_on.png) no-repeat center #252c4f; } #youjun_container #sub_nav ul li.nav3 a:hover, #youjun_container #sub_nav ul li.nav3 a.current { background: url(/%7E/Media/com/youjun/top/sub_nav_hiwa_on.png) no-repeat center #252c4f; } #youjun_container #sub_nav.fix { position: fixed; left: 0px; top: 50px; } #youjun_container.story { border-bottom: 4px solid #fff; background: url(/%7E/Media/com/youjun/top/story_bg_drop.png) repeat-y center top #252c4f; } #youjun_container.story #story { background: url(/%7E/Media/com/youjun/top/story_bg1.png) no-repeat center 0; padding: 60px 0 64px; } #youjun_container.story #story h1 { margin: 0 6px 20px; } #youjun_container.story #story p { margin: 0 6px 44px; width: 490px; } #youjun_container.story #story .img_drop { position: absolute; left: 50%; top: -60px; margin-left: -600px; } #youjun_container.story #story .img_drop img { width: 1200px; max-width: none; } #youjun_container.story #story .exploitation { margin: 0 12px; } #youjun_container.story #story .exploitation li { float: left; border-right: 1px dashed #cccccc; margin: 0 34px 0 0; padding: 0 22px 0 0; } #youjun_container.story #story .exploitation li:last-child { border: 0px; } #youjun_container.story #story .exploitation li dl dt { float: left; margin-right: 14px; } #youjun_container.story #story .exploitation li dl dt img { border: 1px solid #fff; } #youjun_container.story #story .exploitation li dl dd { float: left; padding-top: 13px; } #youjun_container.story #story nav ul { width: 836px; margin: 33px auto 0; } #youjun_container.story #story nav ul li { width: 368px; margin: 25px; background: #def0f4; border-radius: 3px; overflow: hidden; float: left; } #youjun_container.story #story nav ul li a { display: block; width: 368px; height: 104px; text-align: center; border-radius: 2px; background: url(/%7E/Media/com/youjun/top/btn_bg.png) repeat-x left center; position: relative; box-shadow: rgba(12, 50, 96, 0.4) 0px 0px 13px 4px; -webkit-box-shadow: rgba(12, 50, 96, 0.4) 0px 0px 13px 4px; -moz-box-shadow: rgba(12, 50, 96, 0.4) 0px 0px 13px 4px; } #youjun_container.story #story nav ul li a .ico { position: absolute; left: 20px; top: 50%; margin: -28px 0 0; padding-right: 17px; border-right: 1px solid #91badc; } #youjun_container.story #story nav ul li a .txt { text-align: center; display: block; margin: 0 0 0 86px; padding-top: 23px; } #youjun_container.story #story nav ul li a:after { content: ''; position: absolute; right: 8px; bottom: 7px; width: 22px; height: 18px; background: url(/%7E/Media/com/youjun/top/story_btn_arw.png) no-repeat center; } #youjun_container.story #story .episode { padding: 124px 0 0; } #youjun_container.story #story .episode .box { padding: 40px 40px 0; } #youjun_container.story #story .episode .box h3 { padding: 20px 0 22px; } #youjun_container.story #story .episode .box h3 img { height: 28px; margin-right: 10px; } #youjun_container.story #story .episode .box p { width: auto; margin: 0 0 2.4em; } #youjun_container.story #story .episode .box .img { float: right; margin: 0 0 30px 30px; } #youjun_container.story #story .episode .box .img img { border: 1px solid #fff; } #youjun_container.story #story .episode .box .img2 { float: right; margin: 0 0 30px 30px; } #youjun_container.story #story .btn { width: 500px; margin: 64px auto 0; background: #def0f4; border-radius: 3px; position: relative; } #youjun_container.story #story .btn:before { content: ''; position: absolute; top: -26px; left: 5%; background: url(/%7E/Media/com/youjun/top/btn_product_ico_on.png) no-repeat left top; width: 84px; height: 110px; z-index: 1; } #youjun_container.story #story .btn a { position: relative; z-index: 2; display: block; width: 500px; height: 70px; border-radius: 2px; text-align: center; background: url(/%7E/Media/com/youjun/top/btn_bg.png) repeat-x left center; position: relative; box-shadow: rgba(12, 50, 96, 0.4) 0px 0px 13px 4px; -webkit-box-shadow: rgba(12, 50, 96, 0.4) 0px 0px 13px 4px; -moz-box-shadow: rgba(12, 50, 96, 0.4) 0px 0px 13px 4px; } #youjun_container.story #story .btn a span { display: inline-block; } #youjun_container.story #story .btn a .ico { position: absolute; top: -26px; left: 5%; } #youjun_container.story #story .btn a .txt { padding: 24px 0 0 28px; } #youjun_container.story #story .btn a:hover .ico { opacity: 1; } /* sp */ @media screen and (max-width: 768px) { #wrapper { min-width: 100%; } #youjun_container { font-size: 18px; line-height: 1.8em; background: url(/-/Media/com/youjun/top/vi_youjun_bg.jpg) no-repeat 32% top #252c4f; -webkit-background-size: 175% auto; -moz-background-size: 175% auto; -ms-background-size: 175% auto; -o-background-size: 175% auto; background-size: 175% auto; } #youjun_container .inner { width: auto; margin: 0 40px; } #youjun_container #pagetitle { height: auto; background: url(/%7E/Media/com/youjun/top/vi_youjun_bg2.png) no-repeat center bottom; -webkit-background-size: 128% auto; -moz-background-size: 128% auto; -ms-background-size: 128% auto; -o-background-size: 128% auto; background-size: 128% auto; } #youjun_container #pagetitle .inner { margin: 0; } #youjun_container #pagetitle .spresize { display: block; } #youjun_container #pagetitle .spresize img { width: 100%; } #youjun_container #pagetitle .title_box { position: absolute; left: 7%; top: 16%; width: 43%; margin: 0; } #youjun_container #pagetitle .title_box p { float: none; } #youjun_container #pagetitle .title_box p span.txt1 { width: 20%; margin: 0 -4% 0 0; } #youjun_container #pagetitle .title_box p span.txt2 { width: 21%; margin: 0 -4% 0 0; } #youjun_container #pagetitle .title_box p span.txt3 { width: 41%; margin: 0 -3% 0 0; } #youjun_container #pagetitle .title_box p span.txt4 { width: 12%; margin: 0 -3% 0 0; } #youjun_container #pagetitle .title_box p span.txt5 { width: 15%; margin: 0 -3% 0 0; } #youjun_container #pagetitle .title_box p span.txt6 { width: 12%; margin: 0 -3% 0 -2%; } #youjun_container #pagetitle .right_box { position: absolute; width: 40%; top: 0; right: 4%; } #youjun_container #pagetitle .right_box h1 { position: absolute; right: 0; top: 2%; width: 55%; } #youjun_container #pagetitle .right_box .img { text-align: left; margin: 18% 0 0; width: 90%; } #youjun_container #pagetitle .right_box .txt { text-align: left; margin: 6% 0 0; } #youjun_container #pagetitle .right_box .txt img { width: 76%; } #youjun_container #kodawari { background: url(/%7E/Media/com/youjun/top/bg_drop_t.png) repeat-y top center; -webkit-background-size: 100% auto; -moz-background-size: 100% auto; -ms-background-size: 100% auto; -o-background-size: 100% auto; background-size: 100% auto; } #youjun_container #kodawari .wrap { background: url(/%7E/Media/com/youjun/top/bg_night.png) repeat-x left top; } #youjun_container #kodawari .wrap2 { background: url(/%7E/Media/com/youjun/top/bg_moon_t.png) no-repeat top center; -webkit-background-size: 100% auto; -moz-background-size: 100% auto; -ms-background-size: 100% auto; -o-background-size: 100% auto; background-size: 100% auto; } #youjun_container #kodawari .wrap3 { background: url(/%7E/Media/com/youjun/top/bg_morning.png) repeat-x left bottom; } #youjun_container #kodawari .inner { background: url(/%7E/Media/com/youjun/top/bg_cloud_t.png) no-repeat bottom center; -webkit-background-size: 100% auto; -moz-background-size: 100% auto; -ms-background-size: 100% auto; -o-background-size: 100% auto; background-size: 100% auto; padding: 52px 40px 64px; margin: 0; } #youjun_container #kodawari h2 { text-align: center; margin-bottom: 44px; } #youjun_container #kodawari h2.morning { width: 65%; text-align: left; margin-bottom: 74px; } #youjun_container #kodawari dl { float: none !important; } #youjun_container #kodawari dl dt { text-align: center; margin-bottom: 13px; } #youjun_container #kodawari .txt_box1 { margin: 0 auto 0 0; } #youjun_container #kodawari .txt_box1 dt { padding-top: 42px; } #youjun_container #kodawari .txt_box2 { margin: -80px 0 0 auto; } #youjun_container #kodawari .txt_box3 { margin: -50px auto 0 0; } #youjun_container #kodawari .txt_box4 { margin: -50px 0 0 auto; } #youjun_container #kodawari .txt_box5 { margin: -50px auto 0 0; } #youjun_container #kodawari .btn { width: 100%; position: relative; z-index: 2; } #youjun_container #kodawari .btn a { width: 100%; } #youjun_container #kodawari .arw { bottom: -38px; margin-left: -53px; width: 106px; } #youjun_container #kodawari .pict { left: 65%; bottom: 135px; width: 28%; margin: 0; z-index: 1; } #youjun_container #product { border-bottom: 4px solid #fff; background: url(/%7E/Media/com/youjun/top/bg_drop_t.png) repeat-y left top; -webkit-background-size: 100% auto; -moz-background-size: 100% auto; -ms-background-size: 100% auto; -o-background-size: 100% auto; background-size: 100% auto; } #youjun_container #product .wrap { background: url(/%7E/Media/com/youjun/top/bg_night.png) repeat-x left top; padding: 0 40px 1px; } #youjun_container #product .inner { padding: 88px 0 0; width: 100%; max-width: 580px; margin: 0 auto; } #youjun_container #product h2 img { width: auto; } #youjun_container #product .txt1 { margin: 16px 0 0; font-weight: bold; } #youjun_container #product .img1 { right: 0px; top: 0px; margin: -24% -22% 20px; position: inherit; } #youjun_container #product .txt_box { width: 100%; float: none; margin: 0; } #youjun_container #product section { padding: 0 0 14% !important; } #youjun_container #product section h3 { display: none; } #youjun_container #product section h4 { margin: 0; height: 228px; width: 100%; background-repeat: no-repeat; background-position: left bottom; -webkit-background-size: 100% auto; -moz-background-size: 100% auto; -ms-background-size: 100% auto; -o-background-size: 100% auto; background-size: 100% auto; } #youjun_container #product section h4 img { display: none; } #youjun_container #product section .txt2 { clear: both; float: none; width: 100%; margin: 0; padding-top: 20px; } #youjun_container #product section dl { width: 100%; } #youjun_container #product section dl dt { font-size: 26px; margin-bottom: 24px; } #youjun_container #product section dl dt img { margin-bottom: 20px; display: block; } #youjun_container #product section dl dd { width: 100%; font-size: 16px; } #youjun_container #product section.kodawari1 h4 { background-image: url(/%7E/Media/com/youjun/top/txt_kodawari1_t.png); } #youjun_container #product section.kodawari1 dl { position: relative; margin-top: 18px; } #youjun_container #product section.kodawari2 h4 { background-image: url(/%7E/Media/com/youjun/top/txt_kodawari2_t.png); } #youjun_container #product section.kodawari2 dl { position: relative; margin-top: 18px; top: 0px; } #youjun_container #product section.kodawari3 h4 { background-image: url(/%7E/Media/com/youjun/top/txt_kodawari3_t.png); } #youjun_container #product section.kodawari3 .txt2 { width: auto; } #youjun_container #product section.kodawari3 .chart { position: relative; top: 0; width: auto; height: auto; background: none; margin-top: 50px; } #youjun_container #product section.kodawari3 .chart img.tablet { display: block; } #youjun_container #product section.kodawari4 h4 { background-image: url(/%7E/Media/com/youjun/top/txt_kodawari4_t.png); } #youjun_container #product section.kodawari4 .txt2 { padding: 44px 0 32px; width: auto; text-align: center; } #youjun_container #product section.kodawari4 .txt2 img { width: 266px; } #youjun_container #product section.kodawari4 ul { margin: 0; width: 100%; } #youjun_container #product section.kodawari4 ul li { float: left; width: 31%; margin: 0 1%; padding-top: 0; } #youjun_container #product section.kodawari4 ul li img { width: auto; } #youjun_container #product section.kodawari5 h4 { background-image: url(/%7E/Media/com/youjun/top/txt_kodawari5_t.png); } #youjun_container #product section.kodawari5 .chart { clear: both; padding-top: 30px; margin: 0; width: 100%; float: none; border: 0; box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none; } #youjun_container #product section.kodawari5 .chart dl { width: 100%; float: none; border: 1px solid #3a66b2; margin-bottom: 36px; box-shadow: #384170 0px 0px 6px 1px; -webkit-box-shadow: #384170 0px 0px 6px 1px; -moz-box-shadow: #384170 0px 0px 6px 1px; } #youjun_container #product section.kodawari5 .chart dl img { display: block; width: auto !important; margin: 0 auto; } #youjun_container #product section.kodawari5 .chart dl dt { margin-bottom: 0px; padding: 28px 0 26px; height: auto; } #youjun_container #product section.kodawari5 .chart dl dd { padding: 38px 40px; height: auto; font-size: 18px; } #youjun_container #product section.kodawari5 .chart dl dd h5 { margin: 40px auto 2%; font-size: 20px; } #youjun_container #product section.kodawari5 .chart dl dd h5 .txt3, #youjun_container #product section.kodawari5 .chart dl dd h5 .txt4 { border-radius: 12px; width: 36%; padding: 12px 0; line-height: 1; } #youjun_container #product section.kodawari5 .chart dl dd h5 .txt3 .fss, #youjun_container #product section.kodawari5 .chart dl dd h5 .txt4 .fss { font-weight: bold; font-size: 16px; margin-bottom: 4px; } #youjun_container #product section.kodawari5 .chart dl dd h5 .txt3 { margin-left: 9%; } #youjun_container #product section.kodawari5 .chart dl.box1 h5, #youjun_container #product section.kodawari5 .chart dl.box1 .achart { max-width: 460px; } #youjun_container #product section.kodawari5 .chart dl.box1 .achart { margin: 0 auto; } #youjun_container #product section.kodawari5 .chart dl.box2 dd img { margin: 40px auto 0; } #youjun_container #product section.kodawari6 h4 { background-image: url(/%7E/Media/com/youjun/top/txt_kodawari6_t.png); margin: 0; } #youjun_container #product section.kodawari6 .chart { clear: both; margin: 22px 0 0; } #youjun_container #product section.kodawari6 .chart dl { float: none; width: 100%; margin-left: 0; margin-bottom: 38px; } #youjun_container #product section.kodawari6 .chart dl dt { width: 100%; font-size: 18px; padding: 6px 0 4px; } #youjun_container #product section.kodawari6 .chart dl dd { width: auto; } #youjun_container #product section.kodawari6 .chart dl dd ul { margin: 0 auto !important; max-width: 82%; padding: 50px 0 20px; } #youjun_container #product section.kodawari6 .chart dl dd ul li { float: left; width: 33%; } #youjun_container #product section.kodawari6 .chart dl dd ul li img { width: auto; margin: -12% 0; padding: 0 2%; } #youjun_container #product section.kodawari6 .chart dl dd p { font-size: 18px; } #youjun_container #product section.kodawari6 .chart dl.box1 ul { margin: 0 -10px; } #youjun_container #product section.kodawari6 .chart dl.box2 { margin-bottom: 0px; } #youjun_container #product section.kodawari6 .chart dl.box2 ul { width: auto; max-width: 55%; } #youjun_container #product section.kodawari6 .chart dl.box2 ul li { width: 49.5%; } #youjun_container #product .btn { width: 100%; margin: 0 auto 96px; } #youjun_container #product .btn a { width: 100%; } #youjun_container #product .btn a span { padding: 0 20px; display: inline-block; } #youjun_container #sub_nav { min-width: 100%; } #youjun_container #sub_nav ul { width: 86%; background: none; } #youjun_container #sub_nav ul li { width: 33%; } #youjun_container #sub_nav ul li a { display: inline-block; width: 100%; } #youjun_container #sub_nav ul li.nav1 { background: none; } #youjun_container #sub_nav ul li.nav1 a { width: 100%; } #youjun_container #sub_nav ul li.nav1 a span { font-size: 10px; display: block; padding: 2px; width: 7em; margin: -6px auto 0; } #youjun_container #sub_nav ul li.nav1 a img { width: 112px; margin-top: -6px; } #youjun_container #sub_nav.fix { top: 0px; } #youjun_container.story { background: url(/%7E/Media/com/youjun/top/story_bg_drop_t.png) repeat-y center top #252c4f; -webkit-background-size: 100% auto; -moz-background-size: 100% auto; -ms-background-size: 100% auto; -o-background-size: 100% auto; background-size: 100% auto; } #youjun_container.story #story { background: url(/%7E/Media/com/youjun/top/story_bg1.png) no-repeat center top; -webkit-background-size: 130% auto; -moz-background-size: 130% auto; -ms-background-size: 130% auto; -o-background-size: 130% auto; background-size: 130% auto; padding: 74px 0 64px; } #youjun_container.story #story h1 { margin: 0 8% 30px; } #youjun_container.story #story h1 img { width: 342px; } #youjun_container.story #story p { margin: 0 8% 44px; font-weight: bold; width: auto; } #youjun_container.story #story .img_drop { top: -74px; margin-left: -190px; } #youjun_container.story #story .img_drop img { width: 500px; } #youjun_container.story #story .exploitation { margin: 0 auto; width: 461px; } #youjun_container.story #story .exploitation li { float: left; width: 230px; margin: 0; padding: 0; } #youjun_container.story #story .exploitation li dl { text-align: center; } #youjun_container.story #story .exploitation li dl dt { float: none; margin: 0 0 22px; } #youjun_container.story #story .exploitation li dl dd { float: none; margin: 0 auto; padding: 0; } #youjun_container.story #story .exploitation li dl dd img { display: none; } #youjun_container.story #story .exploitation li.first dl dd { width: 134px; height: 70px; background: url(/%7E/Media/com/youjun/top/story_txt1_ts.png) no-repeat left top; } #youjun_container.story #story .exploitation li.last dl dd { width: 112px; height: 70px; background: url(/%7E/Media/com/youjun/top/story_txt2_ts.png) no-repeat left top; } #youjun_container.story #story nav { display: none; } #youjun_container.story #story .episode { padding: 34px 0 0; } #youjun_container.story #story .episode h2 { margin: 0 3%; border-radius: 3px; overflow: hidden; display: block; height: 98px; text-align: center; border-radius: 2px; background: url(/%7E/Media/com/youjun/top/btn_bg.png) repeat-x left center; position: relative; box-shadow: rgba(12, 50, 96, 0.4) 0px 0px 13px 4px; -webkit-box-shadow: rgba(12, 50, 96, 0.4) 0px 0px 13px 4px; -moz-box-shadow: rgba(12, 50, 96, 0.4) 0px 0px 13px 4px; } #youjun_container.story #story .episode h2:before { position: absolute; content: ''; width: 56px; height: 78px; left: 7%; top: 50%; margin: -39px 0 0; padding: 0; } #youjun_container.story #story .episode h2:after { position: absolute; content: ''; background: url(/%7E/Media/com/youjun/top/story_btn_plus.png) no-repeat left top; width: 42px; height: 42px; top: 50%; right: 8%; margin: -21px 0 0 0; } #youjun_container.story #story .episode h2 span { display: block; margin: 20px 16% 0 23.5%; height: 58px; border-left: 1px solid #80bcdc; } #youjun_container.story #story .episode h2 img { display: none; } #youjun_container.story #story .episode h2.open:after { background: url(/%7E/Media/com/youjun/top/story_btn_minus.png) no-repeat left top; } #youjun_container.story #story .episode .box { display: none; margin: 0 3%; padding: 0 30px; border: 1px solid #1f375b; background: rgba(0, 130, 200, 0.1); } #youjun_container.story #story .episode .box.open { display: block; } #youjun_container.story #story .episode .box h3 { padding: 28px 0 22px; } #youjun_container.story #story .episode .box h3 img { height: auto; margin: 0 0 6px; display: block; } #youjun_container.story #story .episode .box p { font-weight: lighter; } #youjun_container.story #story #episode01 h2:before { background: url(/%7E/Media/com/youjun/top/story_btn_ico_ep1_ts.png) no-repeat left top; } #youjun_container.story #story #episode01 h2 span { background: url(/%7E/Media/com/youjun/top/story_btn_txt_ep1.png) no-repeat center; } #youjun_container.story #story #episode02 h2:before { background: url(/%7E/Media/com/youjun/top/story_btn_ico_ep2_ts.png) no-repeat left top; } #youjun_container.story #story #episode02 h2 span { background: url(/%7E/Media/com/youjun/top/story_btn_txt_ep2.png) no-repeat center; } #youjun_container.story #story #episode03 h2:before { background: url(/%7E/Media/com/youjun/top/story_btn_ico_ep3_ts.png) no-repeat left top; } #youjun_container.story #story #episode03 h2 span { background: url(/%7E/Media/com/youjun/top/story_btn_txt_ep3.png) no-repeat center; } #youjun_container.story #story #episode04 h2:before { background: url(/%7E/Media/com/youjun/top/story_btn_ico_ep4_ts.png) no-repeat left top; } #youjun_container.story #story #episode04 h2 span { background: url(/%7E/Media/com/youjun/top/story_btn_txt_ep4.png) no-repeat center; } #youjun_container.story #story .btn { width: auto; margin: 64px 3% 0; } #youjun_container.story #story .btn a { width: auto; height: 70px; border-radius: 2px; text-align: center; background: url(/%7E/Media/com/youjun/top/btn_bg.png) repeat-x left center; position: relative; box-shadow: rgba(12, 50, 96, 0.4) 0px 0px 13px 4px; -webkit-box-shadow: rgba(12, 50, 96, 0.4) 0px 0px 13px 4px; -moz-box-shadow: rgba(12, 50, 96, 0.4) 0px 0px 13px 4px; } #youjun_container.story #story .btn a span { display: inline-block; } #youjun_container.story #story .btn a .ico { position: absolute; top: -26px; left: 5%; } #youjun_container.story #story .btn a .txt { padding: 24px 0 0 28px; } #youjun_container.story #story .btn a:hover .ico { opacity: 1; } } @media screen and (max-width: 600px) { #youjun_container #kodawari .inner { margin: 0 20px; } #youjun_container #kodawari .txt_box2 { margin: -20px 0 0 auto; } #youjun_container #kodawari .txt_box3 { margin: -10px auto 0 0; } #youjun_container #kodawari .txt_box4 { margin: -25px 0 0 auto; } #youjun_container #kodawari .txt_box5 { margin: -25px auto 40px 0; } #youjun_container #story .inner { margin: 0 20px; } #youjun_container #story .inner h1 { margin: 0 0 30px; } #youjun_container #story .inner h1 img { width: 342px; } #youjun_container #story .inner p { margin: 0 0 44px; font-weight: bold; width: auto; } #youjun_container #story .inner .episode h2, #youjun_container #story .inner .episode .box { margin: 0; } #youjun_container #story .inner .btn { margin-left: 0px; margin-right: 0px; } #youjun_container #product section h4 { height: 186px; } } @media screen and (max-width: 480px) { #wrapper { min-width: 320px; } #youjun_container { font-size: 16px; line-height: 1.8em; } #youjun_container .inner { margin: 0; } #youjun_container #pagetitle { height: auto; background: url(/%7E/Media/com/youjun/top/vi_youjun_bg2.png) no-repeat center bottom; -webkit-background-size: 128% auto; -moz-background-size: 128% auto; -ms-background-size: 128% auto; -o-background-size: 128% auto; background-size: 128% auto; } #youjun_container #pagetitle .inner { margin: 0; } #youjun_container #pagetitle .spresize { display: block; } #youjun_container #pagetitle .spresize img { width: 100%; } #youjun_container #pagetitle .title_box { position: absolute; left: 7%; top: 16%; width: 43%; margin: 0; } #youjun_container #pagetitle .title_box p { float: none; } #youjun_container #pagetitle .title_box p span.txt1 { width: 20%; margin: 0 -4% 0 0; } #youjun_container #pagetitle .title_box p span.txt2 { width: 21%; margin: 0 -4% 0 0; } #youjun_container #pagetitle .title_box p span.txt3 { width: 41%; margin: 0 -3% 0 0; } #youjun_container #pagetitle .title_box p span.txt4 { width: 12%; margin: 0 -3% 0 0; } #youjun_container #pagetitle .title_box p span.txt5 { width: 15%; margin: 0 -3% 0 0; } #youjun_container #pagetitle .title_box p span.txt6 { width: 12%; margin: 0 -3% 0 -2%; } #youjun_container #pagetitle .right_box { position: absolute; width: 40%; top: 0; right: 4%; } #youjun_container #pagetitle .right_box h1 { position: absolute; right: 0; top: 2%; width: 55%; } #youjun_container #pagetitle .right_box .img { text-align: left; margin: 18% 0 0; width: 90%; } #youjun_container #pagetitle .right_box .txt { text-align: left; margin: 6% 0 0; } #youjun_container #pagetitle .right_box .txt img { width: 76%; } #youjun_container #kodawari { background: url(/%7E/Media/com/youjun/top/bg_drop_s.png) repeat-y top center; -webkit-background-size: 100% auto; -moz-background-size: 100% auto; -ms-background-size: 100% auto; -o-background-size: 100% auto; background-size: 100% auto; } #youjun_container #kodawari .wrap2 { background: url(/%7E/Media/com/youjun/top/bg_moon_s.png) no-repeat top center; -webkit-background-size: 100% auto; -moz-background-size: 100% auto; -ms-background-size: 100% auto; -o-background-size: 100% auto; background-size: 100% auto; } #youjun_container #kodawari .wrap3 { background: url(/%7E/Media/com/youjun/top/bg_cloud_s.png) no-repeat bottom center, url(/%7E/Media/com/youjun/top/bg_morning.png) repeat-x left bottom; -webkit-background-size: 400px auto, auto; -moz-background-size: 400px auto, auto; -ms-background-size: 400px auto, auto; -o-background-size: 400px auto, auto; background-size: 400px auto, auto; } #youjun_container #kodawari .inner { background: none; padding: 32px 0 52px; max-width: 320px; margin: 0 auto; } #youjun_container #kodawari h2 { text-align: center; margin-bottom: 24px; } #youjun_container #kodawari h2 img { width: 162px; } #youjun_container #kodawari h2.morning { width: auto; margin: 54px 12px 40px; } #youjun_container #kodawari h2.morning img { width: 197px; } #youjun_container #kodawari dl { width: 320px !important; margin: 0 auto 4px; } #youjun_container #kodawari dl dt { margin-bottom: 10px; } #youjun_container #kodawari dl dd { margin: 0 auto; width: 280px; } #youjun_container #kodawari .txt_box1 { background: url(/%7E/Media/com/youjun/top/bg_sub_title1_s.png) no-repeat center top; -webkit-background-size: 100% auto; -moz-background-size: 100% auto; -ms-background-size: 100% auto; -o-background-size: 100% auto; background-size: 100% auto; min-height: 254px; margin: 0; } #youjun_container #kodawari .txt_box1 dt { padding-top: 24px; } #youjun_container #kodawari .txt_box1 dt img { width: 214px; } #youjun_container #kodawari .txt_box2 { background: url(/%7E/Media/com/youjun/top/bg_sub_title2_s.png) no-repeat center top; -webkit-background-size: 100% auto; -moz-background-size: 100% auto; -ms-background-size: 100% auto; -o-background-size: 100% auto; background-size: 100% auto; min-height: 258px; margin: 0; } #youjun_container #kodawari .txt_box2 dt { padding-top: 62px; } #youjun_container #kodawari .txt_box2 dt img { width: 223; } #youjun_container #kodawari .txt_box3 { background: url(/%7E/Media/com/youjun/top/bg_sub_title3_s.png) no-repeat center top; -webkit-background-size: 100% auto; -moz-background-size: 100% auto; -ms-background-size: 100% auto; -o-background-size: 100% auto; background-size: 100% auto; min-height: 254px; margin: 0; } #youjun_container #kodawari .txt_box3 dt { padding-top: 44px; } #youjun_container #kodawari .txt_box3 dt img { width: 273px; } #youjun_container #kodawari .txt_box4 { background: url(/%7E/Media/com/youjun/top/bg_sub_title4_s.png) no-repeat center top; -webkit-background-size: 100% auto; -moz-background-size: 100% auto; -ms-background-size: 100% auto; -o-background-size: 100% auto; background-size: 100% auto; min-height: 254px; margin: 0; } #youjun_container #kodawari .txt_box4 dt { padding-top: 20px; } #youjun_container #kodawari .txt_box4 dt img { width: 261px; } #youjun_container #kodawari .txt_box5 { background: url(/%7E/Media/com/youjun/top/bg_sub_title5_s.png) no-repeat center top; -webkit-background-size: 100% auto; -moz-background-size: 100% auto; -ms-background-size: 100% auto; -o-background-size: 100% auto; background-size: 100% auto; min-height: 254px; margin: 0; } #youjun_container #kodawari .txt_box5 dt { padding-top: 64px; } #youjun_container #kodawari .txt_box5 dt img { width: 278px; } #youjun_container #kodawari .btn { width: auto; margin: 0 12px; } #youjun_container #kodawari .btn a { height: 48px; } #youjun_container #kodawari .btn a .ico { top: -18px; } #youjun_container #kodawari .btn a .ico img { width: 55px; } #youjun_container #kodawari .btn a .txt { padding: 18px 0 0 32px; } #youjun_container #kodawari .btn a .txt img { width: 150px; } #youjun_container #kodawari .arw { bottom: -26px; margin-left: -35px; width: 70px; } #youjun_container #kodawari .pict { left: 65%; bottom: 100px; width: 31%; margin: 0; } #youjun_container #product { border-bottom: 2px solid #fff; background: url(/%7E/Media/com/youjun/top/bg_drop_s.png) repeat-y top center; -webkit-background-size: 100% auto; -moz-background-size: 100% auto; -ms-background-size: 100% auto; -o-background-size: 100% auto; background-size: 100% auto; } #youjun_container #product .wrap { padding: 0 14px; } #youjun_container #product .inner { padding: 58px 0 0; max-width: 320px; margin: 0 auto; } #youjun_container #product h2 img { width: 237px; } #youjun_container #product .txt1 { margin: 12px 0 0; font-size: 14px; line-height: 1.8; } #youjun_container #product .img1 { margin: -38% -52% 20px; } #youjun_container #product .txt_box { width: 100%; float: none; margin: 0; } #youjun_container #product section { padding: 0 0 58px !important; } #youjun_container #product section h3 { display: block; } #youjun_container #product section h3 img { width: 70px; } #youjun_container #product section h4 { width: 222px; height: 128px; margin: 0 -2px; } #youjun_container #product section .txt2 { padding-top: 16px; } #youjun_container #product section dl dt { font-size: 14px; margin-bottom: 10px; line-height: 1.6em; } #youjun_container #product section dl dt img { margin-bottom: 14px; } #youjun_container #product section dl dd { font-size: 10px; line-height: 1.6em; } #youjun_container #product section.odd h3 { margin-left: -12px; padding: 0 2px 2px 14px; background: url(/%7E/Media/com/youjun/top/ico_kodawari_bg1.png) no-repeat center bottom; -webkit-background-size: 100% auto; -moz-background-size: 100% auto; -ms-background-size: 100% auto; -o-background-size: 100% auto; background-size: 100% auto; } #youjun_container #product section.even h3 { margin-right: -12px; padding: 0 14px 2px 2px; background-image: url(/%7E/Media/com/youjun/top/ico_kodawari_bg2.png) no-repeat center bottom; -webkit-background-size: 100% auto; -moz-background-size: 100% auto; -ms-background-size: 100% auto; -o-background-size: 100% auto; background-size: 100% auto; } #youjun_container #product section.kodawari1 h4 { background-image: url(/%7E/Media/com/youjun/top/txt_kodawari1_s.png); -webkit-background-size: 191px auto; -moz-background-size: 191px auto; -ms-background-size: 191px auto; -o-background-size: 191px auto; background-size: 191px auto; } #youjun_container #product section.kodawari1 dl { margin-top: 18px; } #youjun_container #product section.kodawari2 h4 { background-image: url(/%7E/Media/com/youjun/top/txt_kodawari2_s.png); -webkit-background-size: 217px auto; -moz-background-size: 217px auto; -ms-background-size: 217px auto; -o-background-size: 217px auto; background-size: 217px auto; } #youjun_container #product section.kodawari2 dl { margin-top: 18px; top: 0px; } #youjun_container #product section.kodawari3 h4 { background-image: url(/%7E/Media/com/youjun/top/txt_kodawari3_s.png); -webkit-background-size: 184px auto; -moz-background-size: 184px auto; -ms-background-size: 184px auto; -o-background-size: 184px auto; background-size: 184px auto; } #youjun_container #product section.kodawari3 .chart { margin-top: 34px; } #youjun_container #product section.kodawari3 .chart img.tablet { display: none; } #youjun_container #product section.kodawari3 .chart img.sp { display: block; } #youjun_container #product section.kodawari4 h4 { width: 224px; margin-right: -4px; background-image: url(/%7E/Media/com/youjun/top/txt_kodawari4_s.png); -webkit-background-size: 224px auto; -moz-background-size: 224px auto; -ms-background-size: 224px auto; -o-background-size: 224px auto; background-size: 224px auto; } #youjun_container #product section.kodawari4 .txt2 { padding: 14px 0 18px; } #youjun_container #product section.kodawari4 .txt2 img { width: 219px; } #youjun_container #product section.kodawari4 ul { margin: 0 auto; width: 292px; } #youjun_container #product section.kodawari4 ul li { width: auto; margin: 0; } #youjun_container #product section.kodawari4 ul li img { width: 97px; } #youjun_container #product section.kodawari5 h4 { width: 229px; margin-left: -4px; margin-right: -7px; background-image: url(/%7E/Media/com/youjun/top/txt_kodawari5_s.png); -webkit-background-size: 229px auto; -moz-background-size: 229px auto; -ms-background-size: 229px auto; -o-background-size: 229px auto; background-size: 229px auto; } #youjun_container #product section.kodawari5 .chart { padding-top: 30px; margin: 0; width: 100%; float: none; border: 0; box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none; } #youjun_container #product section.kodawari5 .chart dl { width: 100%; float: none; border: 1px solid #3a66b2; margin-bottom: 36px; } #youjun_container #product section.kodawari5 .chart dl dt { padding: 18px 0 16px; } #youjun_container #product section.kodawari5 .chart dl dd { padding: 20px 10px; font-size: 15px; } #youjun_container #product section.kodawari5 .chart dl dd h5 { margin: 18px auto 2%; font-size: 11px; } #youjun_container #product section.kodawari5 .chart dl dd h5 .txt3, #youjun_container #product section.kodawari5 .chart dl dd h5 .txt4 { border-radius: 6px; padding: 8px 0; } #youjun_container #product section.kodawari5 .chart dl dd h5 .txt3 .fss, #youjun_container #product section.kodawari5 .chart dl dd h5 .txt4 .fss { font-size: 10px; } #youjun_container #product section.kodawari5 .chart dl.box1 dt img { width: 241px !important; } #youjun_container #product section.kodawari5 .chart dl.box2 { margin-bottom: 0px; } #youjun_container #product section.kodawari5 .chart dl.box2 dt img { width: 130px !important; } #youjun_container #product section.kodawari5 .chart dl.box2 dd p { margin: 0 10px; } #youjun_container #product section.kodawari5 .chart dl.box2 dd p img { margin: 26px 0 0; } #youjun_container #product section.kodawari6 h4 { margin-right: -4px; background-image: url(/%7E/Media/com/youjun/top/txt_kodawari6_s.png); -webkit-background-size: 209px auto; -moz-background-size: 209px auto; -ms-background-size: 209px auto; -o-background-size: 209px auto; background-size: 209px auto; } #youjun_container #product section.kodawari6 .chart { padding-top: 14px; } #youjun_container #product section.kodawari6 .chart dl { margin-bottom: 26px; } #youjun_container #product section.kodawari6 .chart dl dt { font-size: 12px; padding: 6px 0; } #youjun_container #product section.kodawari6 .chart dl dd { width: auto; } #youjun_container #product section.kodawari6 .chart dl dd ul { max-width: none; padding: 30px 0 24px; } #youjun_container #product section.kodawari6 .chart dl dd ul li { width: auto; } #youjun_container #product section.kodawari6 .chart dl dd ul li img { width: 101px; margin: -18px 0; padding: 0 1px; } #youjun_container #product section.kodawari6 .chart dl dd p { font-size: 12px; line-height: 1.6em; } #youjun_container #product section.kodawari6 .chart dl.box1 dd { margin: 0 -8px; } #youjun_container #product section.kodawari6 .chart dl.box1 ul { margin: 0 auto; width: 311px; } #youjun_container #product section.kodawari6 .chart dl.box2 { margin-bottom: 0px; } #youjun_container #product section.kodawari6 .chart dl.box2 ul { width: 207px; max-width: none; } #youjun_container #product .btn { margin: 0 auto 48px; height: 48px; } #youjun_container #product .btn a { padding: 0px; width: 100%; height: 48px; } #youjun_container #product .btn a span { padding: 18px 0 0; width: 250px; } #youjun_container #navigation { height: 48px; } #youjun_container #sub_nav ul { width: 99%; padding: 12px 0; } #youjun_container #sub_nav ul li { width: 32%; height: 22px; } #youjun_container #sub_nav ul li a { height: 22px; } #youjun_container #sub_nav ul li.nav1 { background: none; } #youjun_container #sub_nav ul li.nav1 a { width: 100%; height: 22px; } #youjun_container #sub_nav ul li.nav1 a span { font-size: 8px; display: block; padding: 2px; width: 7em; margin: -13px auto 0; -webkit-transform: scale(0.6, 0.6); -moz-transform: scale(0.6, 0.6); -ms-transform: scale(0.6, 0.6); -o-transform: scale(0.6, 0.6); transform: scale(0.6, 0.6); } #youjun_container #sub_nav ul li.nav1 a img { width: 76px; margin-top: -3px; } #youjun_container #sub_nav ul li.nav2 a { background: url(/%7E/Media/com/youjun/top/sub_nav_top.png) no-repeat center #252c4f; -webkit-background-size: 25px 9px; -moz-background-size: 25px 9px; -ms-background-size: 25px 9px; -o-background-size: 25px 9px; background-size: 25px 9px; } #youjun_container #sub_nav ul li.nav3 a { background: url(/%7E/Media/com/youjun/top/sub_nav_hiwa.png) no-repeat center #252c4f; -webkit-background-size: 45px 11px; -moz-background-size: 45px 11px; -ms-background-size: 45px 11px; -o-background-size: 45px 11px; background-size: 45px 11px; } #youjun_container #sub_nav ul li.nav2 a:hover, #youjun_container #sub_nav ul li.nav2 a.current { background: url(/%7E/Media/com/youjun/top/sub_nav_top_on.png) no-repeat center #252c4f; -webkit-background-size: 25px 9px; -moz-background-size: 25px 9px; -ms-background-size: 25px 9px; -o-background-size: 25px 9px; background-size: 25px 9px; } #youjun_container #sub_nav ul li.nav3 a:hover, #youjun_container #sub_nav ul li.nav3 a.current { background: url(/%7E/Media/com/youjun/top/sub_nav_hiwa_on.png) no-repeat center #252c4f; -webkit-background-size: 45px 11px; -moz-background-size: 45px 11px; -ms-background-size: 45px 11px; -o-background-size: 45px 11px; background-size: 45px 11px; } #youjun_container.story { background: url(/%7E/Media/com/youjun/top/story_bg_drop_s.png) repeat-y center top #252c4f; -webkit-background-size: 100% auto; -moz-background-size: 100% auto; -ms-background-size: 100% auto; -o-background-size: 100% auto; background-size: 100% auto; border-bottom: 2px solid #fff; } #youjun_container.story #story { background: url(/%7E/Media/com/youjun/top/story_bg1.png) no-repeat center top; -webkit-background-size: 130% auto; -moz-background-size: 130% auto; -ms-background-size: 130% auto; -o-background-size: 130% auto; background-size: 130% auto; padding: 32px 14px 55px; } #youjun_container.story #story .inner { max-width: 320px; margin: 0 auto; } #youjun_container.story #story h1 { margin: 0 0 22px; } #youjun_container.story #story h1 img { width: 228px; } #youjun_container.story #story p { font-size: 14px; line-height: 1.8em; margin-bottom: 26px; } #youjun_container.story #story .img_drop { top: -32px; margin-left: -132px; } #youjun_container.story #story .img_drop img { width: 334px; } #youjun_container.story #story .exploitation { width: 320px; } #youjun_container.story #story .exploitation li { width: 49.5%; } #youjun_container.story #story .exploitation li img { width: 41px; } #youjun_container.story #story .exploitation li dl dt { margin: 0 0 14px; } #youjun_container.story #story .exploitation li.first dl dd { width: 89px; height: 48px; background: url(/%7E/Media/com/youjun/top/story_txt1_ts.png) no-repeat left top; -webkit-background-size: 89px auto; -moz-background-size: 89px auto; -ms-background-size: 89px auto; -o-background-size: 89px auto; background-size: 89px auto; } #youjun_container.story #story .exploitation li.last dl dd { width: 74px; height: 48px; background: url(/%7E/Media/com/youjun/top/story_txt2_ts.png) no-repeat left top; -webkit-background-size: 74px auto; -moz-background-size: 74px auto; -ms-background-size: 74px auto; -o-background-size: 74px auto; background-size: 74px auto; } #youjun_container.story #story .episode { padding: 30px 0 0; } #youjun_container.story #story .episode h2 { height: 66px; } #youjun_container.story #story .episode h2:before { width: 37px; height: 52px; left: 20px; margin: -26px 0 0; } #youjun_container.story #story .episode h2:after { background: url(/%7E/Media/com/youjun/top/story_btn_plus.png) no-repeat left top; -webkit-background-size: 26px 26px; -moz-background-size: 26px 26px; -ms-background-size: 26px 26px; -o-background-size: 26px 26px; background-size: 26px 26px; width: 26px; height: 26px; right: 12px; margin: -13px 0 0 0; } #youjun_container.story #story .episode h2 span { margin: 14px 40px 0 76px; height: 40px; } #youjun_container.story #story .episode h2.open:after { background: url(/%7E/Media/com/youjun/top/story_btn_minus.png) no-repeat left top; -webkit-background-size: 26px 26px; -moz-background-size: 26px 26px; -ms-background-size: 26px 26px; -o-background-size: 26px 26px; background-size: 26px 26px; } #youjun_container.story #story .episode .box { padding: 0 6px; } #youjun_container.story #story .episode .box h3 { padding: 22px 0 18px; } #youjun_container.story #story .episode .box h3 img { height: 23px; margin: 0 0 5px; } #youjun_container.story #story .episode .box p { margin-bottom: 2em; font-size: 16px; } #youjun_container.story #story .episode .box .img { margin: 0 0 16px 16px; width: 50%; } #youjun_container.story #story .episode .box .img2 { margin: 0 0 16px 16px; width: 50%; } #youjun_container.story #story #episode01 h2:before { background: url(/%7E/Media/com/youjun/top/story_btn_ico_ep1_ts.png) no-repeat left top; -webkit-background-size: 37px auto; -moz-background-size: 37px auto; -ms-background-size: 37px auto; -o-background-size: 37px auto; background-size: 37px auto; } #youjun_container.story #story #episode01 h2 span { background: url(/%7E/Media/com/youjun/top/story_btn_txt_ep1.png) no-repeat center; -webkit-background-size: 120px auto; -moz-background-size: 120px auto; -ms-background-size: 120px auto; -o-background-size: 120px auto; background-size: 120px auto; } #youjun_container.story #story #episode02 h2:before { background: url(/%7E/Media/com/youjun/top/story_btn_ico_ep2_ts.png) no-repeat left top; -webkit-background-size: 37px auto; -moz-background-size: 37px auto; -ms-background-size: 37px auto; -o-background-size: 37px auto; background-size: 37px auto; } #youjun_container.story #story #episode02 h2 span { background: url(/%7E/Media/com/youjun/top/story_btn_txt_ep2.png) no-repeat center; -webkit-background-size: 122px auto; -moz-background-size: 122px auto; -ms-background-size: 122px auto; -o-background-size: 122px auto; background-size: 122px auto; } #youjun_container.story #story #episode03 h2:before { background: url(/%7E/Media/com/youjun/top/story_btn_ico_ep3_ts.png) no-repeat left top; -webkit-background-size: 37px auto; -moz-background-size: 37px auto; -ms-background-size: 37px auto; -o-background-size: 37px auto; background-size: 37px auto; } #youjun_container.story #story #episode03 h2 span { background: url(/%7E/Media/com/youjun/top/story_btn_txt_ep3.png) no-repeat center; -webkit-background-size: 120px auto; -moz-background-size: 120px auto; -ms-background-size: 120px auto; -o-background-size: 120px auto; background-size: 120px auto; } #youjun_container.story #story #episode04 h2:before { background: url(/%7E/Media/com/youjun/top/story_btn_ico_ep4_ts.png) no-repeat left top; -webkit-background-size: 37px auto; -moz-background-size: 37px auto; -ms-background-size: 37px auto; -o-background-size: 37px auto; background-size: 37px auto; } #youjun_container.story #story #episode04 h2 span { background: url(/%7E/Media/com/youjun/top/story_btn_txt_ep4.png) no-repeat center; -webkit-background-size: 128px auto; -moz-background-size: 128px auto; -ms-background-size: 128px auto; -o-background-size: 128px auto; background-size: 128px auto; } #youjun_container.story #story .btn:before { top: -18px; background: url(/%7E/Media/com/youjun/top/btn_product_ico_on.png) no-repeat left top; -webkit-background-size: 55px 72px; -moz-background-size: 55px 72px; -ms-background-size: 55px 72px; -o-background-size: 55px 72px; background-size: 55px 72px; width: 55px; height: 72px; } #youjun_container.story #story .btn a { height: 48px; } #youjun_container.story #story .btn a .ico { top: -18px; } #youjun_container.story #story .btn a .ico img { width: 55px; } #youjun_container.story #story .btn a .txt { padding: 18px 0 0 32px; } #youjun_container.story #story .btn a .txt img { width: 150px; } } .lt-ie9 #sub_nav.fix { display: none !important; } .toolBox01 { background-color: #252c4f; } .toolBox01 span { color: #252c4f; }