@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%; 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: "Avenir Next", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "游ゴシック", "Yu Gothic", "メイリオ", Meiryo, Osaka, sans-serif; font-size: 26px; font-size: 16px; background: url("../img/bg.gif") 24px center; } .sp { display: none; } #main { background: -webkit-linear-gradient(90deg, #08a8cb 0%, #6dc6d1 100%); background: -moz-linear-gradient(90deg, #08a8cb 0%, #6dc6d1 100%); background: -o-linear-gradient(90deg, #08a8cb 0%, #6dc6d1 100%); background: -ms-linear-gradient(90deg, #08a8cb 0%, #6dc6d1 100%); background: linear-gradient(0deg, #08a8cb 0%, #6dc6d1 100%); height: 70px; position: relative; z-index: 60; } #main .headWrap { width: 980px; margin: auto; } /*#main .headWrap .home { float: left; padding: 10px 0 0 0; position: relative; }*/ #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; } #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: url("../img/arrow.png") no-repeat 95% center white; overflow: hidden; } #navigation li:nth-child(odd) { background-color: #e6e6e6; } #navigation li a { display: block; width: 100%; height: 100%; color: #1eacbf; font-size: 30px; font-size: 1.875rem; line-height: 120px; padding-left: 40px; font-weight: bold; text-decoration: none; } #bottomnav { width: 100%; } #bottomnav li { width: 100%; height: 120px; background: #fff; overflow: hidden; } #bottomnav li:nth-child(odd) { background-color: #e6e6e6; } #bottomnav li a { display: block; width: 100%; height: 100%; text-decoration: none; } #bottomnav li a span { display: block; width: 955px; padding-left: 25px; height: 100%; margin: 0 auto; background: url("../img/arrow.png") no-repeat 942px center; color: #1eacbf; font-size: 30px; font-size: 1.875rem; line-height: 120px; font-weight: bold; } footer { background: #e6e6e6; padding: 60px 0; width: 100%; 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; text-decoration: none; } footer .copyright { font-size: 14px; font-size: 0.875rem; line-height: 1.4; } /* ***************************************************/ .title { position: relative; min-width: 1100px; overflow: hidden; margin-bottom: 100px; margin-top: 24px; } .title h1 { position: relative; left: 50%; margin: 100px 0 42px -490px; } .title .catch { text-align: center; font-size: 30px; line-height: 1.4; font-weight: bold; } .pc_bg { position: absolute; top:70px; left:50%; margin: 0 0 0 -550px; width: 1100px; height: 1270px; background: url(../img/pc/bg_main.png) no-repeat top center; z-index: -1; } .pc_copy { position: absolute; top:910px; left:50%; width: 291px; height: 13px; margin-left: 246px; background: url(../img/text_copy.png) no-repeat top center; } /* ***************************************************/ .point { width: 1100px; margin: 0 auto 100px; position: relative; } .point h2 { background: url("../img/icon_section.png") no-repeat 60px center #1eacbf; height: 56px; padding: 24px 0 0 114px; color: #ffffff; font-size: 36px; margin-bottom: 55px; } .point .textWrap { width: 980px; margin: auto; position: relative; } .point .textWrap section { position: relative; margin-bottom: 35px; } .point .textWrap h3 { width: 690px; height: 236px; padding: 34px 0 0 290px; color: #1eacbf; font-size: 40px; line-height: 1.2; } .point .textWrap h3.p01 { background: url("../img/img_face01.png") no-repeat top left; } .point .textWrap h3.p02 { background: url("../img/img_face02.png") no-repeat top left; } .point .textWrap h3.p03 { background: url("../img/img_face03.png") no-repeat top left; } .point .textWrap h3.p04 { background: url("../img/img_face04.png") no-repeat top left; } .point .textWrap .txt { position: absolute; top:105px; left:290px; width: 690px; height: 170px; font-size: 26px; line-height: 1.4; } /* ***************************************************/ .news .newsWrap { width: 980px; margin: auto; /* max-height: 300px; -ms-overflow-y: auto; overflow-y: auto;*/ margin-bottom: 14px; } .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 solid #e6e6e6; } .news .newsWrap dl dt { color: #1eacbf; font-weight: bold; font-size: 22px; margin-bottom: 10px; } .news .newsWrap dl dt:before { content: "・"; } .news .newsWrap dl dd { font-size: 26px; line-height: 1.4; } .news .newsWrap dl dd a{ color: #d580b2; } /* ***************************************************/ .rakutenWrap { width: 980px; margin: 0 auto; text-align: center; } .detail { color: #fff; background: #1eacbf; } .detail .detailWrap { width: 840px; margin: 0 auto; padding: 100px 70px; } .detail .detailWrap h2 span { font-size: 22px; } .detail .detailWrap h2 { font-size: 40px; line-height: 1.3; padding-bottom: 50px; } .detail .detailWrap dl { font-size: 18px; line-height: 1.6; } .detail .detailWrap dl dt { float: left; width: 150px; font-weight: bold; } .detail .detailWrap dl dd { float: right; width:690px; } .detail .detailWrap dl dd a { margin-left: 1em; color: #fff; text-decoration: underline; transition: opacity 0.3s ease; } .detail .detailWrap dl dd a:hover { opacity: .5; } .detail .detailWrap span { display: inline-block; font-size: 16px; padding-top: 12px; } /* ***************************************************/ .google { width: 840px; text-align: center; } /*.google .btn { margin-bottom: 40px; }*/ .google .btn{ margin: 60px 0 0; } .google .btn .gl{ width: 350px; margin-right: 22px; } .google .btn .rk{ width: 461px; } .google .btn p{ display: inline-block; } /* */ .marquee { width:100%; height: 24px; line-height: 24px; padding:0.5em 0; overflow:hidden; background-color:#000; position:relative; letter-spacing: 0.025em; } .marquee span.yel { color: #faff00; } .marquee span.grn,.marquee span.grn a { color: #00e8e3 } .marquee p:after { content:""; white-space:nowrap; padding-right:50px; } .marquee p { margin:0; padding-left:100%; display:inline-block; font-weight: bold; white-space:nowrap; -webkit-animation-name:marquee; -webkit-animation-timing-function:linear; -webkit-animation-duration:26s; -webkit-animation-iteration-count:infinite; -moz-animation-name:marquee; -moz-animation-timing-function:linear; -moz-animation-duration:26s; -moz-animation-iteration-count:infinite; -ms-animation-name:marquee; -ms-animation-timing-function:linear; -ms-animation-duration:26s; -ms-animation-iteration-count:infinite; -o-animation-name:marquee; -o-animation-timing-function:linear; -o-animation-duration:26s; -o-animation-iteration-count:infinite; animation-name:marquee; animation-timing-function:linear; animation-duration:26s; animation-iteration-count:infinite; } @-webkit-keyframes marquee { from { -webkit-transform: translate(0%);} 99%,to { -webkit-transform: translate(-100%);} } @-moz-keyframes marquee { from { -moz-transform: translate(0%);} 99%,to { -moz-transform: translate(-100%);} } @-ms-keyframes marquee { from { -ms-transform: translate(0%);} 99%,to { -ms-transform: translate(-100%);} } @-o-keyframes marquee { from { -o-transform: translate(0%);} 99%,to { -o-transform: translate(-100%);} } @keyframes marquee { from { transform: translate(0%);} 99%,to { transform: translate(-100%);} } /* */ a { transition: opacity 0.3s ease; } a:hover { opacity: .5; }