@charset "UTF-8"; /* html5doctor.com Reset Stylesheet v1.6.1 Last Updated: 2010-09-17 Author: Richard Clark - //richclarkdesign.com Twitter: @rich_clark */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; font-weight:500; vertical-align: baseline; background: transparent; } body { line-height: 1; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } nav ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } a { margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent; } ins { background-color: #ff9; color: #000; text-decoration: none; } mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; } del { text-decoration: line-through; } abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; } table { border-collapse: collapse; border-spacing: 0; } hr { display: block; height: 1px; border: 0; border-top: 1px solid #cccccc; margin: 1em 0; padding: 0; } input, select { vertical-align: middle; } .clearfix:before, .clearfix:after { content: " "; display: table; } .clearfix:after { clear: both; } img { vertical-align: bottom; } li { list-style: none; } body { font-family: Verdana, "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; font-size: 16px; background: url("../img/bg.gif"); } .sp { display: none; } #main { background: -webkit-linear-gradient(90deg, #F87AA9 0%, #FDAFBF 100%); background: -moz-linear-gradient(90deg, #F87AA9 0%, #FDAFBF 100%); background: -o-linear-gradient(90deg, #F87AA9 0%, #FDAFBF 100%); background: -ms-linear-gradient(90deg, #F87AA9 0%, #FDAFBF 100%); background: linear-gradient(0deg, #F87AA9 0%, #FDAFBF 100%); height: 70px; position: relative; z-index: 60; } #main .headWrap { width: 980px; margin: auto; } #main .headWrap .menu { float: left; padding: 15px 0 0 25px; position: relative; } #main .headWrap .menu p { position: absolute; top: 15px; } #main .headWrap .menu p.close { display: none; } #main .headWrap ul { float: right; padding-top: 13px; } #main .headWrap ul li { float: right; margin-left: 10px; } #main .headWrap ul li.toEnglish a{ display: block; width: 118px; height: 32px; margin: 8px 0 0; text-decoration: none; color: #fff; background: #027bd3; text-align: center; line-height: 32px; font-weight: bold; -moz-border-radius: 10px; -webkit-border-radius: 10px; -o-border-radius: 10px; -ms-border-radius: 10px; } #navigation { position: absolute; height: 100%; top: 0; left: 0; background: rgba(0, 0, 0, 0.5); z-index: 50; width: 100%; min-width: 980px; display: none; overflow: hidden; opacity: 0; filter: alpha(opacity=0); } #navigation ul { margin-top: 70px; } #navigation li { height: 120px; background: white; overflow: hidden; } #navigation li:nth-child(odd) { background-color: #e6e6e6; } #navigation li a { display: block; width: 1024px; height: 100%; color: #F86671; font-size: 30px; font-size: 1.875rem; line-height: 120px; padding-left: 40px; font-weight: bold; text-decoration: none; margin: 0 auto; background: url("../img/arrow_pink.png") no-repeat 95% center; } #bottomnav { width: 1024px; margin: 75px auto 0; } #bottomnav li { height: 120px; background: white; overflow: hidden; } #bottomnav li:nth-child(even) { background-color: #e6e6e6; } #bottomnav li a { display: block; width: 100%; height: 100%; color: #F86671; font-size: 30px; font-size: 1.875rem; line-height: 120px; padding-left: 25px; font-weight: bold; text-decoration: none; background: url("../img/arrow_pink.png") no-repeat 960px center; } footer { background: #fff; padding: 60px 0; width: 1024px; margin: auto; text-align: center; } footer h1 { margin-bottom: 50px; } footer ul { margin-bottom: 50px; } footer ul li { display: inline-block; font-size: 24px; font-size: 1.5rem; } footer ul li:first-child:after { content: "|"; margin-left: 55px; margin-right: 56px; } footer ul li a { color: #000000; font-weight: bold; text-decoration: none; border-bottom: solid 2px #a3a3a3; padding: 0 0 10px; } footer .copyright { font-size: 14px; font-size: 0.875rem; line-height: 1.4; } .title { min-width: 980px; overflow: hidden; margin-bottom: 54px; } .title h1 { position: relative; left: 50%; margin: 44px 0 0 -510px; } .title .catch { text-align: center; font-size: 28px; font-size: 1.75rem; line-height: 1.4; color: #e7308c; margin-top: -59px; } .google { text-align: center; margin-bottom: 62px; } .google .text { color: #F56777; font-size: 28px; font-size: 1.75rem; line-height: 1.4; margin-bottom: 60px; font-weight: 600; } .google div{ text-align: center; margin-bottom: 55px; } .google div .gl{ width: 351px; } .google div p{ display: inline-block; line-height: 2; color: #F56777; font-weight: bold; font-size: 22px; } .google div p:nth-child(2) { margin-left: 28px; } .google .link { margin-bottom: 60px; } .google .link a { color: #ffa018; text-decoration: underline; font-weight: bold; font-size: 28px; font-size: 1.75rem; background: url("../img/arrow_orange.png") no-repeat right center; padding-right: 40px; } .google .link a:hover { text-decoration: underline; } .attention { background: #e6e6e6; /*margin-top: 40px;*/ padding: 40px 0; margin-bottom: 80px; } .attention ul { width: 980px; margin: auto; } .attention ul li { font-size: 20px; font-size: 1.25rem; line-height: 1.4; margin-bottom: 15px; } .attention .btn { width: 520px; height: 74px; background: #ffb820; margin: auto; -webkit-border-radius: 8px 8px 8px 8px; border-radius: 8px 8px 8px 8px; overflow: hidden; } .attention .btn a { display: block; width: 100%; height: 100%; text-align: center; color: #ffffff; text-decoration: none; font-size: 24px; font-size: 1.5rem; background: url("../img/arrow_white.png") no-repeat 420px center; line-height: 74px; margin-left: -20px; padding-right: 20px; } .bn_costume { width: 840px; height: auto; margin: 64px auto; } .info1 { display: none; } .point { width: 980px; margin: auto; position: relative; } .point h2 { background: url("../img/icon_exclamation.png") no-repeat 25px center #F87AA9; height: 80px; padding-left: 77px; color: #ffffff; font-size: 34px; font-size: 2.125rem; line-height: 80px; margin-bottom: 55px; } .point .textWrap { width: 840px; margin: auto; position: relative; } .point .catch { color: #F86671; font-size: 34px; font-size: 2.125rem; font-weight: bold; line-height: 1.4; margin-bottom: 50px; } .point .image { position: absolute; top: 0px; } .point .image .words { position: relative; text-align: center; width: 316px; z-index: 0; border: 2px solid #e6e6e6; background: #ffffff; color: #FF8EBC; font-size: 24px; font-size: 1.5rem; line-height: 1.4; padding: 20px 0; -webkit-border-radius: 8px 8px 8px 8px; border-radius: 8px 8px 8px 8px; margin-bottom: 20px; } .point .image .words:before { content: ""; position: absolute; bottom: -8px; left: 50%; margin-left: -7px; width: 0px; height: 0px; border-style: solid; border-width: 9px 7px 0 7px; border-color: #ffffff transparent transparent transparent; z-index: 0; } .point .image .words:after { content: ""; position: absolute; bottom: -11px; left: 50%; margin-left: -8px; width: 0px; height: 0px; border-style: solid; border-width: 10px 8px 0 8px; border-color: #e6e6e6 transparent transparent transparent; z-index: -1; } .point .attention { background: none; font-size: 18px; font-size: 1.125rem; line-height: 1.6; } .point .text { font-size: 24px; font-size: 1.5rem; line-height: 1.4; } .point.p1 { height: 920px; } .point.p1 .image { right: 0; } .point.p1 .text { margin-right: 380px; } .point.p2 { margin-bottom: 80px; } .point.p2 .image { left: 0; } .point.p2 .catch { margin-left: 380px; } .point.p2 .text { margin-left: 380px; margin-bottom: 80px; } .point.p3 { height: 540px; margin-top: 60px; /* margin-bottom: 80px; */ } .point.p4 { height: 1210px; /* height: 980px; margin-bottom: 80px; */ } .point.p3 .image, .point.p4 .image { top: 0; right: 0; } .point.p3 .image, .point.p4 .image p { display: block; margin-bottom: 30px; } .point.p4 { position: relative; } .point.p3 .text, .point.p4 .text { /*margin-right: 380px;*/ } .point.p3 .btn { width: 520px; height: 74px; background: #ffb820; margin: 30px auto; -webkit-border-radius: 8px 8px 8px 8px; border-radius: 8px 8px 8px 8px; overflow: hidden; } .point.p3 .btn a { display: block; width: 100%; height: 100%; text-align: center; color: #ffffff; text-decoration: none; font-size: 24px; font-size: 1.5rem; background: url("../img/arrow_white.png") no-repeat 480px center; line-height: 74px; margin-left: -20px; padding-right: 20px; } .point.p4 h2 { background: url("../img/icon_exclamation.png") no-repeat 25px center #F87AA9; } .point.p4 .catch { color: #f46676; margin: 58px 0; } .point.p4 .text { margin-right: 380px; } .point.p4 div.clearfix:first-child .catch { margin-top: 0; } .point.p4 .attention{ margin-bottom: 0; padding: 30px 0 60px; } .point.p4 .btn { width: 460px; height: 74px; background: #ffb820; margin: 0 auto 80px; -webkit-border-radius: 8px 8px 8px 8px; border-radius: 8px 8px 8px 8px; overflow: hidden; } .point.p4 .btn a { display: block; width: 100%; height: 100%; text-align: center; color: #ffffff; text-decoration: none; font-size: 24px; font-size: 1.5rem; background: url("../img/arrow_white.png") no-repeat 425px center; line-height: 74px; margin-left: -20px; padding-right: 20px; } .point.p4 .moreInfo { background: #FFF; border: 2px solid #e6e6e6; -webkit-border-radius: 8px 8px 8px 8px; border-radius: 8px 8px 8px 8px; width: 700px; position: relative; margin: 30px auto 0; padding: 30px 70px; } .point.p4 .moreInfo h3 { color: #F86671; font-size: 28px; font-size: 1.75rem; font-weight: bold; margin-bottom: 20px; } .point.p4 .moreInfo .catch { color: #000; font-size: 18px; font-size: 1.25rem; font-weight: bold; margin:0 0 5px; } .point.p4 .moreInfo .txt { font-size: 20px; font-size: 1.25rem; line-height: 1.4; margin-bottom: 30px; } .point.p4 .moreInfo .btn { width: 520px; height: 74px; background: #FFB820; margin: auto; -webkit-border-radius: 8px 8px 8px 8px; border-radius: 8px 8px 8px 8px; overflow: hidden; } .point.p4 .moreInfo .btn a { display: block; width: 100%; height: 100%; text-align: center; color: #ffffff; text-decoration: none; font-size: 24px; font-size: 1.5rem; background: url("../img/arrow_white.png") no-repeat 480px center; line-height: 74px; margin-left: -20px; padding-right: 20px; } .news .newsWrap { width: 840px; margin: auto; max-height: 300px; -ms-overflow-y: auto; overflow-y: auto; margin-bottom: 80px; } .news .newsWrap dl { border-bottom: 1px solid #e6e6e6; padding: 0 0 24px 5px; margin: 0 10px 25px 0; } .news .newsWrap dl:last-child { border-bottom: 0px; } .news .newsWrap dl dt { color: #F56777; font-weight: bold; font-size: 18px; font-size: 1.125rem; margin-bottom: 10px; } .news .newsWrap dl dt:before { content: "・"; } .news .newsWrap dl dd { font-size: 20px; font-size: 1.25rem; line-height: 1.3; } .news .newsWrap dl dd a{ /* color: #ffa018; */ color: #000; } .copyright { width: 840px; margin: auto; } .point.p5 .btn a { background: url("../img/arrow_white.png") no-repeat 454px center!important; } /* */ a, .btn, .btn, .menu p { transition: opacity 0.3s ease; cursor: pointer; } a:hover, .btn:hover, .menu p:hover { opacity: .7; } span.attention_no { font-size: 14px; vertical-align: top; }