@charset "utf-8"; /* @media screen and (min-width:769px) { } @media screen and (max-width:768px) { } */ body.culture-ja { line-height: 1.8; } #action-subpage, #module-special { background-image: url(../img/bg.gif) !important; } #container { background-image: url(../img/bg.gif) !important; width: 100% !important; text-align: left; } #header_content { width: 100% !important; background-color: #fff !important; } #header_content div { width: 890px !important; margin: 0 auto !important; } #footer { width: 100% !important; background-color: #fff !important; } #footer div { width: 890px !important; margin: 0 auto !important; } #globalNavi, #globalNavi3 { padding: 8px 0 10px !important; } #userSupport { background: url(../../../../img/sw/foot_bg.gif) no-repeat 0 0; } #globalNavi3 ul#navi li a { background: url(../img/head_global_navi2.gif) no-repeat 0 0; } #userSupport ul li a { background: url(../img/foot_support_navi.gif) no-repeat 0 0; } p#copyright { background: url(../img/dotline.gif) repeat-x left top; } .globalHeaderSearchInputOff { background: url(../img/input_off.gif) no-repeat; } #pagetop a { background: url(../img/icon_up.gif) no-repeat 0 2px; } /** * -------------------------------------------------------------------------- * clearfix * -------------------------------------------------------------------------- */ .clearfix:after { content: ""; display: block; height: 0; clear: both; } .clearfix { *zoom: 1; } /** * -------------------------------------------------------------------------- * common class * -------------------------------------------------------------------------- */ .hidden { display: none; } .img_hover, .jqHover {} .jqHidden { display: none; } .jqInv { visibility: hidden; } .cssHover { -webkit-transition: opacity 0.3s; -moz-transition: opacity 0.3s; -ms-transition: opacity 0.3s; -o-transition: opacity 0.3s; transition: opacity 0.3s; opacity: 1; } .cssHover:hover { opacity: 0.6; } .fitImg { width: 100%; max-width: 100%; } @media screen and (min-width:641px) { .onlyPc {} .onlySp { display: none; } } @media screen and (max-width:640px) { .onlyPc { display: none; } .onlySp {} } #point_wrap * { padding: 0; margin: 0; font-size: inherit; transform: rotate(0.05deg); letter-spacing: 0.1em; } /* =================================== color: #036EB8; color: #E60039; -------------------------------------- =================================== */ .mod-freeHTML { font-weight: 400; background-image: url(../img/bg.gif); letter-spacing: 0.35em; } @media screen and (min-width:641px) { .mod-freeHTML { font-size: 14px; line-height: 1.8; padding: 60px 40px; } #point_wrap { width: 964px; margin: 70px auto 0px auto; padding-bottom: 30px; letter-spacing: 0.35em; font-family: "MS Pゴシック", "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif; } #intro { padding-bottom: 80px; } #intro h1 { padding-left: 40px; padding-bottom: 26px; } #intro .txt1 { font-weight: 500; padding-left: 40px; } #intro .img1 { margin-top: -4em; text-align: center; } #s1 { margin-bottom: 64px; } #s1 h2 { font-size: 26px; line-height: 60px; padding: 0 10px; background: url(../img/point/pc_h2_bg.png) no-repeat center top; color: #E60039; margin-bottom: 40px; } #s1 .c1 { padding-bottom: 40px; } #s1 .onlyPc { background: url(../img/point/pc_s1_bg.png) no-repeat center top; height: 683px; position: relative; } #s1 .onlyPc .c2 h3 { position: absolute; left: 87px; top: 25px; color: #E60039; font-size: 26px; } #s1 .onlyPc .c2 .txt1 { position: absolute; left: 22px; top: 203px; color: #E60039; width: 240px; } #s1 .onlyPc .c2 .txt2 { position: absolute; left: 16px; top: 454px; color: #E60039; letter-spacing: 0.1em; width: 240px; } #s1 .onlyPc .c3 h3 { position: absolute; left: 733px; top: 25px; font-size: 26px; color: #036EB8; } #s1 .onlyPc .c3 .txt1 { position: absolute; left: 705px; top: 203px; color: #036EB8; width: 240px; } #s1 .onlyPc .c3 .txt2 { position: absolute; left: 705px; top: 454px; color: #036EB8; width: 240px; } #s2 { margin-bottom: 80px; } #s2 h2 { font-size: 26px; line-height: 60px; padding: 0 10px; background: url(../img/point/pc_h2_bg.png) no-repeat center top; color: #E60039; margin-bottom: 40px; } #s2 .l { float: left; } #s2 .r { float: right; width: 606px; } #s2 .txt1 { margin-bottom: 65px; } #s2 .txt2 { font-size: 12px; } #s3 { margin-bottom: 80px; } #s3 h2 { font-size: 26px; line-height: 60px; padding: 0 10px; background: url(../img/point/pc_h2_bg.png) no-repeat center top; color: #E60039; margin-bottom: 40px; } #s3 .txt1 { margin-bottom: 56px; } #s3 .l { float: left; margin: 0 0 0 37px; } #s3 .r { float: right; margin: 0 98px 0 0; } #s4 { margin-bottom: 80px; } #s4 h2 { font-size: 26px; line-height: 60px; padding: 0 10px; background: url(../img/point/pc_h2_bg.png) no-repeat center top; color: #E60039; margin-bottom: 40px; } #s4 .txt1 { margin-bottom: 40px; } #s4 .l { float: left; margin: 0 0 0 34px; } #s4 .c { float: left; margin: 0 62px 0 62px; } #s4 .r { float: left; } #s5 { margin-bottom: 80px; } #s5 h2 { font-size: 26px; line-height: 60px; padding: 0 10px; background: url(../img/point/pc_h2_bg.png) no-repeat center top; color: #E60039; margin-bottom: 40px; } #s5 .txt1 { max-width: 630px; margin: auto auto 40px auto; } #s5 .l { float: left; margin: 0 0 0 34px; } #s5 .c { float: left; margin: 0 62px 0 62px; } #s5 .r { float: left; } #s6 { margin-bottom: 110px; } #s6 h2 { font-size: 26px; line-height: 60px; padding: 0 10px; background: url(../img/point/pc_h2_bg.png) no-repeat center top; color: #E60039; margin-bottom: 40px; } #s6 .txt1 { margin-bottom: 40px; } #s6 .l { float: left; } #s6 .r { float: right; width: 606px; } #s6 .txt1 { margin-bottom: 27px; } #s6 .txt2 { height: 63px; background: url(../img/point/pc_s6_txt_bg.png) no-repeat left top; box-sizing: border-box; padding: 0.3em 1em; margin-bottom: 30px; font-weight: 500; } #s6 .txt3 { height: 63px; background: url(../img/point/pc_s6_txt_bg.png) no-repeat left top; box-sizing: border-box; padding: 0.3em 1em; font-weight: 500; } #s6 a { font-size: 12px; text-decoration: none; color: #000; letter-spacing: 0; font-weight: 400; } .copy { width: 950px; margin: 0 auto; padding: 20px 0 30px 0; text-align: center; border-top: 1px solid #333333; } } @media screen and (min-width:641px) and (max-width:1044px) { .mod-freeHTML { padding: 60px 15px; } #point_wrap { width: auto; } #intro h1 { padding-left: 0; text-align: center; } #intro .txt1 { padding-left: 0; text-align: center; } #intro .img1 { margin-top: -0em; } #intro p.img1>img { width: 95%; } #s1 { overflow: hidden } #s1 h2 { font-size: 17px; padding: 0; text-align: center; } #s1 div.onlyPc { display: none; } #s1 div.onlySp { display: block; } #s1 .c1 { text-align: center; } #s1 .c2 { text-align: center; display: block; float: left; width: 35%; } #s1 .c2 img { width: 90%; } #s1 .c3, #s1 .c4 { float: right; width: 65%; } #s1 .c3 h3 { background: url(../img/point/sp_s1_c3_h3_bg.png) no-repeat bottom; background-size: contain; padding: 0 0 8px 0; color: #55B4A2; font-size: 18px; text-align: left; margin: 0 0 20px 0; } #s1 .c3 h4:nth-of-type(1), #s1 .c4 h4:nth-of-type(1) { background: url(../img/point/sp_s1_h4_red.png) no-repeat center bottom; background-size: contain; color: #E60039; font-size: 16px; text-align: center; margin: 0 auto 15px auto; line-height: 47px; } #s1 .c3 p:nth-of-type(1), #s1 .c4 p:nth-of-type(1) { text-align: left; color: #E60039; margin-bottom: 25px; } #s1 .c4 h3 { background: url(../img/point/sp_s1_c4_h3_bg.png) no-repeat center bottom; background-size: contain; padding: 0 0 8px 0; color: #D47D7B; font-size: 18px; text-align: left; margin: 25px 0 20px 0; } #s1 .c3 h4:nth-of-type(2), #s1 .c4 h4:nth-of-type(2) { background: url(../img/point/sp_s1_h4_blue.png) no-repeat center bottom; background-size: contain; color: #036EB8; font-size: 16px; text-align: center; margin: 0 auto 15px auto; line-height: 47px; } #s1 .c3 p:nth-of-type(2), #s1 .c4 p:nth-of-type(2) { text-align: left; color: #036EB8; } #s2 { clear: both; margin-top: 30px; } #s2 h2 { font-size: 17px; padding: 0; text-align: center; } #s2 .txt1, #s2 .txt2 { text-align: center; max-width: 630px; margin: auto auto 40px auto; } #s2 .l { float: none; text-align: center; } #s2 .r { float: none; width: auto; margin: 15px auto 0; } #s3 h2 { font-size: 17px; padding: 0; text-align: center; } #s3 .clearfix { display: table; width: 100%; text-align: center; } #s3 .txt1 { text-align: center; max-width: 630px; margin: auto auto 40px auto; } #s3 .l { display: inline-block; float: none; height: 35vw; margin: 0 12px 0 0; } #s3 .l img, #s3 .r img { height: 100%; } #s3 .r { display: inline-block; float: none; height: 35vw; margin: 0 12px 0 0; } #s4 h2 { font-size: 17px; padding: 0; text-align: center; } #s4 h3 { text-align: center; } #s4 .txt1 { text-align: center; max-width: 630px; margin: auto auto 40px auto; } #s4 .clearfix { display: table; width: 100%; } #s4 .l, #s4 .c, #s4 .r { display: inline-block; float: none; width: 32%; margin: auto } #s4 .l img, #s4 .c img, #s4 .r img { width: 100%; } #s4 .mod-media7023 { max-width: 630px; margin: auto; } #s4 .mod-media7023_img { width: 200px; } #s4 .mod-media7023_text h3 { text-align: left; } #s5 h2 { font-size: 17px; padding: 0; text-align: center; } #s5 .clearfix { display: table; width: 100%; text-align: center; } #s5 .l, #s5 .c { display: inline-block; float: none; width: 40%; margin: auto } #s5 .l img, #s5 .c img { width: 100%; } #s6 h2 { font-size: 17px; padding: 0; text-align: center; } #s6 h3 { text-align: center; } #s6 .l { float: none; text-align: center; } #s6 .r { float: none; width: auto; margin-top: 15px; text-align: center; } #s6 .txt1 { margin: 20px auto; text-align: center; max-width: 630px; } #s6 .txt2, #s6 .txt3 { background: url(../img/point/pc_s6_txt_bg.png) no-repeat; background-position: center center; } #s6 .mod-media7023 { text-align: center; } #s6 .mod-media7023_img { text-align: center; margin: auto; } #point_wrap .mod-linkList { padding: 0 15px; } #point_wrap .mod-backToIndex { padding: 0 15px; } } @media screen and (max-width:640px) { #container { padding-top: 50px; } .mod-freeHTML { font-size: 2.8vw; line-height: 2; padding-top: 36px; } #point_wrap { text-align: center; width: 338px; margin: 0 auto; } #point_wrap img { max-width: 100%; } #intro h1 { width: 282px; margin: 0 auto 32px auto; } #intro .txt1 { margin: 0 0 25px 0; } #intro .img1 { margin: 0 auto 48px auto; width: 338px; } #s1 { margin-bottom: 50px; } #s1 h2 { background: url(../img/point/sp_h2_bg.png) no-repeat center center; background-size: contain; height: 89px; width: 338px; line-height: 89px; font-size: 5vw; font-weight: 500; color: #E60039; margin: 0 auto 25px auto; } #s2 h2, #s3 h2, #s4 h2, #s5 h2, #s6 h2 { background: url(../img/point/sp_h2_bg.png) no-repeat center center; background-size: contain; height: 89px; width: 338px; line-height: 1.5em; font-size: 4.7vw; font-weight: 500; color: #E60039; margin: 0 auto 25px auto; box-sizing: border-box; padding-top: 16px; } #s1 .c1 { text-align: left; margin: 0 0 10px 0; } #s1 .c2 { width: 276px; margin: 0 auto 30px auto; } #s1 .c3 h3 { background: url(../img/point/sp_s1_c3_h3_bg.png) no-repeat center bottom; background-size: contain; padding: 0 0 8px 0; color: #55B4A2; font-size: 4vw; text-align: left; margin: 0 0 20px 0; } #s1 .c4 h3 { background: url(../img/point/sp_s1_c4_h3_bg.png) no-repeat center bottom; background-size: contain; padding: 0 0 8px 0; color: #D47D7B; font-size: 4vw; text-align: left; margin: 25px 0 20px 0; } #s1 .c3 h4:nth-of-type(1), #s1 .c4 h4:nth-of-type(1) { background: url(../img/point/sp_s1_h4_red.png) no-repeat center bottom; background-size: contain; color: #E60039; font-size: 4vw; text-align: center; margin: 0 auto 15px auto; width: 152px; height: 47px; line-height: 47px; } #s1 .c3 h4:nth-of-type(2), #s1 .c4 h4:nth-of-type(2) { background: url(../img/point/sp_s1_h4_blue.png) no-repeat center bottom; background-size: contain; color: #036EB8; font-size: 4vw; text-align: center; margin: 0 auto 15px auto; width: 152px; height: 47px; line-height: 47px; } #s1 .c3 p:nth-of-type(1), #s1 .c4 p:nth-of-type(1) { text-align: left; color: #E60039; margin-bottom: 25px; } #s1 .c3 p:nth-of-type(2), #s1 .c4 p:nth-of-type(2) { text-align: left; color: #036EB8; } #s2 { margin-bottom: 50px; } #s2 .l { margin-bottom: 20px; } #s2 .r { text-align: left; } #s2 .r .txt1 { margin-bottom: 10px; } #s3 { margin-bottom: 50px; } #s3 .txt1 { margin-bottom: 20px; text-align: left; } #s3 .l { width: 335px; margin: 0 auto 30px auto; } #s3 .r { width: 335px; margin: 0 auto; } #s4 { margin-bottom: 50px; } #s4 .txt1 { text-align: left; margin-bottom: 20px; } #s4 .clearfix { width: 335px; margin: 0 auto; } #s4 .l, #s4 .c { margin-bottom: 40px; } #s5 { margin-bottom: 50px; } #s5 .txt1 { margin-bottom: 20px; text-align: left; } #s5 .l { width: 335px; margin: 0 auto 30px auto; } #s5 .c { width: 335px; margin: 0 auto 30px auto; } #s5 .r { width: 335px; margin: 0 auto 0 auto; } #s6 { padding-bottom: 50px; } #s6 h2 { letter-spacing: 0.05em; } #s6 .l { width: 335px; margin: 0 auto 30px auto; } #s6 .txt1 { margin-bottom: 30px; text-align: left; } #s6 .txt2 { background: url(../img/point/sp_s6_txt_bg.png) no-repeat center center; background-size: contain; height: 66px; width: 334px; margin: 0 auto 10px auto; text-align: left; box-sizing: border-box; padding: 1em; line-height: 1.6; } #s6 .txt3 { background: url(../img/point/sp_s6_txt_bg.png) no-repeat center center; background-size: contain; height: 66px; width: 334px; margin: 0 auto 0 auto; text-align: left; box-sizing: border-box; padding: 1em; line-height: 1.6; } #s6 a { font-size: 12px; text-decoration: none; color: #000; letter-spacing: 0; } .copy { width: 90vw; margin: 0 auto; padding: 3vw 0; text-align: center; font-size: 2vw; border-top: 1px solid #333333; } }