@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; font-weight: 500; } 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; letter-spacing: -0.1rem; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } .pc{ display: none; } #wrapper { width: 750px; margin: auto; background: url("../img/bg.gif"); overflow: hidden; } header#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%); width: 750px; height: 150px; position: relative; z-index: 100; } header#main .menu { float: left; padding: 25px 0 0 25px; position: relative; } header#main .menu p { position: absolute; top: 25px; } header#main .menu p.close { display: none; } header#main ul { float: right; padding: 25px 25px 0 0; } header#main ul li { float: left; margin-left: 20px; } header#main ul li.toEnglish a{ display: block; width: 98px; height: 98px; text-decoration: none; color: #fff; background: #027bd3; text-align: center; line-height: 98px; font-weight: bold; letter-spacing: 0.03em; font-size: 1.2rem; -moz-border-radius: 10px; -webkit-border-radius: 10px; -o-border-radius: 10px; -ms-border-radius: 10px; } #navigation { position: absolute; width: 750px; height: 100%; top: 0; background: rgba(0, 0, 0, 0.5); z-index: 50; display: none; opacity: 0; overflow: hidden; } #navigation ul { margin-top: 150px; } #navigation li { height: 120px; background: url("../img/arrow_pink.png") no-repeat 688px center white; overflow: hidden; } #navigation li:nth-child(odd) { background-color: #e6e6e6; } #navigation li a { display: block; width: 100%; height: 100%; color: #F86671; font-size: 30px; line-height: 120px; padding-left: 25px; font-weight: bold; text-decoration: none; } #bottomnav li { height: 120px; background: url("../img/arrow_pink.png") no-repeat 688px center 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; line-height: 120px; padding-left: 25px; font-weight: bold; text-decoration: none; } article .copyright { font-size: 22px; line-height: 1.3; margin-left: 25px; margin-bottom: 80px; } footer { background: #fff; padding: 62px 0 180px; text-align: center; } footer h1 { margin-bottom: 50px; } footer ul { margin-bottom: 58px; } footer ul li { display: inline-block; font-size: 26px; font-size: 1.8rem; font-weight: bold; } footer ul li:first-child:after { content: "|"; margin-left: 55px; margin-right: 56px; } footer ul li a { color: #000000; text-decoration: none; border-bottom: 1px solid #000; padding-bottom: 10px; } footer .copyright { font-size: 20px; font-size: 1.25rem; line-height: 1.4; } .title { background: #FFF; color: #F86671; padding: 25px; font-size: 40px; border-bottom: 1px solid #F86671; margin-bottom: 70px; } .subnav { width: 700px; margin: 0 auto 40px; } .subnav li { background: url("../img/arrow_white_down.png") no-repeat 654px center #FFB820; margin-bottom: 20px; width: 700px; height: 80px; -webkit-border-radius: 10px 10px 10px 10px; border-radius: 10px 10px 10px 10px; } .subnav li a { color: #FFF; display: block; width: 100%; height: 100%; text-decoration: none; line-height: 80px; font-size: 26px; padding-left: 30px; } .moreInfo { background: #FFF; border: 2px solid #e6e6e6; -webkit-border-radius: 8px 8px 8px 8px; border-radius: 8px 8px 8px 8px; margin: 0 25px 0; padding: 30px 25px 30px 30px; } .moreInfo h4 { color: #F86671; font-size: 36px; text-align: center; margin-bottom: 25px; } .moreInfo .text { font-size: 24px; line-height: 1.6; } .info1 { margin-bottom: 70px; } .contents { margin-bottom: 80px; } .contents h2 { background: #f87aa9; height: 80px; padding-left: 25px; color: #ffffff; font-size: 34px; line-height: 80px; margin-bottom: 60px; } .contents .catch { color: #F86671; font-size: 40px; font-weight: bold; text-align: center; line-height: 1.4; margin: 0 24px 60px; } .contents .step { margin: 0 25px 60px; } .contents .step h3 { background: #1a1a1a; color: #FFF; font-size: 24px; /*height: 74px;*/ /* line-height: 74px;*/ padding: 20px; /*padding-left: 25px;*/ margin-bottom: 40px; } .contents .step .text, .lead { font-size: 28px; line-height: 1.6; margin: 0 25px 0 0; } .lead { margin-bottom: 80px; } .attention { font-size: 24px; margin-top: 20px; } .contents .step .text.float { float: left; width: 352px; } .contents .step .image { float: right; /* margin-right: 25px; */ } .contents .step .moreInfo { margin-top: 50px; } .contents .step .moreInfo .text { margin: 0; } .contents .step .moreInfo .btn { width: 520px; height: 74px; background: #ff667f; margin: auto; -webkit-border-radius: 8px 8px 8px 8px; border-radius: 8px 8px 8px 8px; overflow: hidden; margin-top: 30px; } .contents .step .moreInfo .btn a { display: block; width: 100%; height: 100%; text-align: center; color: #ffffff; text-decoration: none; font-size: 24px; background: url("../img/arrow_white.png") no-repeat 482px center; line-height: 74px; margin-left: -20px; padding-right: 20px; } .contents .step .moreInfo .bold { color: #ff667f; font-weight: bold; margin: 25px 0; } .contents .leard { text-align: center; font-size: 36px; font-weight: bold; line-height: 1.4; margin-bottom: 80px; } .contents .leard span { color: #ff667f; } .contents .leard a { color: #000; } .contents .other__text { color: #F86671; font-size: 40px; font-weight: bold; text-align: left; line-height: 1.4; margin: 0 24px 60px; padding-left: 1em; } .contents .other__text li { text-indent: -1em; } #other .btn { display: block; width: 520px; height: 74px; background: #FFB820; margin: 55px 90px 0 90px; -webkit-border-radius: 8px 8px 8px 8px; border-radius: 8px 8px 8px 8px; overflow: hidden; } #other .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; } #base .moreText { font-size: 28px; line-height: 1.6; margin: 0 25px 40px; } .contents .copyright { margin: 0 24px; line-height: 1.6;} .btn a { margin: 0 24px; color: #ff667f; font-size: 24px;} /*****************************/ p.image:nth-of-type(even){ text-align: left; background: #FFF; width: 300px; } p.image:nth-of-type(odd){ text-align: right; background: #FFF; width: 320px; }