@charset "UTF-8"; /*! * ress.css • v1.2.2 * MIT License * github.com/filipelinhares/ress */html{box-sizing:border-box;overflow-y:scroll;-webkit-text-size-adjust:100%}*,:after,:before{background-repeat:no-repeat;box-sizing:inherit}:after,:before{text-decoration:inherit;vertical-align:inherit}*{padding:0;margin:0}audio:not([controls]){display:none;height:0}hr{overflow:visible}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}summary{display:list-item}small{font-size:80%}[hidden],template{display:none}abbr[title]{border-bottom:1px dotted;text-decoration:none}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}code,kbd,pre,samp{font-family:monospace,monospace}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0;color:#000}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}input{border-radius:0}[role=button],[type=button],[type=reset],[type=submit],button{cursor:pointer}[disabled]{cursor:default}[type=number]{width:auto}[type=search]{-webkit-appearance:textfield}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}textarea{overflow:auto;resize:vertical}button,input,optgroup,select,textarea{font:inherit}optgroup{font-weight:700}button{overflow:visible}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:0;padding:0}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button:-moz-focusring{outline:1px dotted ButtonText}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}button,select{text-transform:none}button,input,select,textarea{background-color:transparent;border-style:none;color:inherit}select{-moz-appearance:none;-webkit-appearance:none}select::-ms-expand{display:none}select::-ms-value{color:currentColor}legend{border:0;color:inherit;display:table;max-width:100%;white-space:normal}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}img{border-style:none}progress{vertical-align:baseline}svg:not(:root){overflow:hidden}audio,canvas,progress,video{display:inline-block}@media screen{[hidden~=screen]{display:inherit}[hidden~=screen]:not(:active):not(:focus):not(:target){position:absolute!important;clip:rect(0 0 0 0)!important}}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-disabled]{cursor:default}::-moz-selection{background-color:#b3d4fc;color:#000;text-shadow:none}::selection{background-color:#b3d4fc;color:#000;text-shadow:none} .suspended{ color: #900; font-weight:bold;} .common-advice .suspended, .common-company-advice .suspended, #footer .suspended{ font-size: 15px;border: solid 1px #900; background:#fff; padding: 3px 10px; border-radius: 2px;} body{ font-size: 16px; line-height: 1.4; letter-spacing: 0.05em; color: #333; background: #fff; font-family:"游ゴシック", YuGothic, "メイリオ", "Meiryo", sans-serif; } a:link, a:visited{ color: #f261a5; text-decoration: none; } a:hover, a:active{ color: #d72f7e; text-decoration: underline; } h1,h2,h3,h4,h5,h6,strong{ font-size: inherit; } b.noBold{ font-weight:normal!important; } /* ===================== Common Layout ===================== */ /* Parts */ .pcCont{ display:inline; } .spCont{ display:none; } .container{ width: 980px; margin: 0 auto; } .mB0{ margin-bottom:0!important; } .clearfix{ zoom: 1; } .clearfix:after{ content: ""; display: block; clear: both; } .iC{ text-align: center; } .iR{ text-align: right; } .b-pc{ display: block; } .b-sp{ display: none; } .i-pc{ display: inline-block; } .i-sp{ display: none; } @media screen and (max-width: 767px) { .b-pc{ display: none; } .b-sp{ display: block; } .i-pc{ display: none; } .i-sp{ display: inline-block; } } .icon{ display: inline-block; vertical-align: middle; background-size: contain; background-repeat: no-repeat; background-position: center center; } .icon.icon-phone{ background-image: url(images/common/icon-phone.png); width: 20px; height: 24px; } .icon.icon-email{ background-image: url(images/common/icon-email.png); width: 24px; height: 15px; } .icon.icon-email-bk{ background-image: url(images/common/icon-email-bk.png); width: 15px; height: 10px; } .icon.icon-office-time{ background-image: url(images/common/icon-office-time.png); width: 24px; height: 25px; } .icon.icon-office-phone{ background-image: url(images/common/icon-office-phone.png); width: 24px; height: 25px; } .icon.icon-office-address{ background-image: url(images/common/icon-office-address.png); width: 24px; height: 25px; } .icon.icon-office-access{ background-image: url(images/common/icon-office-access.png); width: 24px; height: 25px; } .icon.icon-faq{ background-image: url(images/common/icon-faq.png); width: 26px; height: 26px; } .contact{ } .contact .phonenumber{ display: inline-block; margin-right: 20px; vertical-align: middle; } .contact .btn-email{ vertical-align: middle; } .phonenumber{ color: #0d751f; font-family: Arial, Helvetica, sans-serif; font-size: 32px; font-weight: bold; } .phonenumber a{ color: #0d751f; } .phonenumber a:hover{ text-decoration: none; } .phonenumber .icon-phone{ margin-right: 5px; position: relative; top: -2px; } .btn-email{ font-size: 16px; line-height: 0.7; position: relative; } #header .btn-email{ bottom: -5px; } .btn-email a{ display: inline-block; background: #483860; border-radius: 4px; color: #fff; padding: 6px 20px 6px 6px; } .btn-email a:hover{ text-decoration: none; background: #e50c77; } .btn-email a .icon{ margin-right: 20px; position: relative; top: -1px; } .btn-line{ font-size: 16px; line-height: 0.7; font-weight: bold; } .frontpage-flow .btn-line{ line-height: 1.4; position: relative; top: 1px; } #header .btn-line{ position: absolute; top: 1px; right: 0px; } #footer .btn-line, .common-company-advice .btn-line, .common-advice .btn-line{ font-size: 16px; line-height: 0.95; font-weight: bold; top: 2px; position: relative; } .btn-line a{ display: inline-block; background: #00b900; border-radius: 4px; color: #fff; padding: 6px 18px 6px 17px; } .btn-line a:hover{ text-decoration: none; background: #007a00; } /* Header */ #header{ } .header-top{ padding: 20px; } .header-top .logo-wrap{ float: left; padding: 7px 0 0; } .header-top .logo-wrap a{ display: block; } .header-top .logo-wrap a:hover{ text-decoration:none; } .header-top .logo-wrap .logo{ display: inline-block; line-height: 1; vertical-align: middle; } .header-top .logo-wrap p{ display: inline-block; vertical-align: middle; font-size: 18px; color: #757575; } .header-top .right{ float: right; display: table; } .header-top .right .cell{ display: table-cell; vertical-align: middle; position: relative; } .header-top .right .free{ width: 120px; height: 55px; background: #f261a5; color: #fff; border-radius: 2px; text-align: center; line-height: 1.2; padding: 5px 0 0; vertical-align: middle; margin-right: 10px; } .header-top .right .free span{ display: inline-block; font-size: 15px; } .header-top .right .free strong{ display: inline-block; font-size: 20px; font-weight: normal; } .header-top .right .phone{ line-height: 1.1; } .header-top .right .phone>span{ display: block; font-size: 15px; font-weight: bold; } .header-top .right .phone .phonenumber{ display: inline-block; vertical-align: middle; font-size: 32px; color: #0d751f; font-family: Arial, Helvetica, sans-serif; letter-spacing: -0.01em; } .header-top .right .phone .phonenumber:after{ content: ''; display: inline-block; background: url(images/common/text-phone-or.png) no-repeat center center; width: 8px; height: 24px; vertical-align: middle; position: relative; top: -13px; margin: 0 5px; } .header-top .right .phone .btn-email{ display: inline-block; } .header-top .right .phone .btn-email a{ padding: 6px; background: #eeedf5; color: #000; font-weight: bold; font-size: 14px; } .header-top .right .phone .btn-email a:hover{ background: #dfdded; } .header-top .right .phone .btn-email .icon{ margin-right: 5px; } #gnavi{ background: #483860; padding: 20px 0; } #gnavi a{ color: #fff; } #gnavi a:hover{ color: #ffb1d6; text-decoration: none; } #gnavi .inner{ padding: 0 18px; } #gnavi ul{ display: table; width: 100%; table-layout: fixed; letter-spacing: 0.02em; } #gnavi ul li{ display: table-cell; border-left: 1px solid #7f7490; vertical-align: middle; } #gnavi ul li:last-child{ border-right: 1px solid #7f7490; } #gnavi ul li a{ display: block; padding: 4px 0; text-align: center; } /* Common sections */ .common-office{ margin: 0 0 90px; } .common-office .section-title{ background: #f5f5f5; text-align: center; font-size: 26px; padding: 12px 0; margin: 0 0 40px; } .common-office .inner{ display: table; width: 100%; table-layout: fixed; } .common-office .inner .column{ display: table-cell; border: solid #dad7df; border-width: 0 0 0 1px; padding: 5px 25px; } .common-office .inner .column:last-child{ border-width: 0 1px; } .common-office .title{ color: #483860; margin: 0 0 25px; } .common-office .title .icon{ margin-right: 10px; } .common-office p{ color: #000; font-size: 14px; line-height: 1.8; letter-spacing: 0; } .common-office p span{ color: #646464; } .common-office p a{ color: #0036ff; text-decoration: underline; } .common-office p a:hover{ color: #00a2ff; text-decoration: none; } .common-office .photo{ margin: 64px 0 74px; } .common-office .photo img{ display: block; width: 50%; height: auto; float: left; } .common-office .map{ } .common-office .map iframe{ width: 100%; } .common-faq{ margin: 0 0 50px; } .common-faq .inner{ border: 2px solid #483860; } .common-faq .section-title{ background: #483860; color: #fff; font-size: 20px; padding: 10px 25px; } .common-faq .section-title .icon{ margin-right: 10px; position: relative; top: -2px; } .common-faq ul{ padding: 30px; } .common-faq ul li{ display: block; margin: 0 0 15px; } .common-faq ul li:last-child{ margin: 0; } .common-faq ul li a{ color: #0036ff; text-decoration: underline; } .common-faq ul li a:hover{ color: #00a2ff; text-decoration: none; } .common-advice{ } .common-advice .inner{ background: url(images/frontpage/advice-bg.png) no-repeat right center #fff7fb; background-size: contain; border: 2px solid #e50c77; padding: 35px 360px 25px 35px; letter-spacing: 0; margin: 70px 0 70px; } .common-advice.common-advice-frontpage .inner{ margin: 0; } .common-advice .section-title{ } .common-advice .section-title div{ display: inline-block; box-shadow: 0 0 5px #efe9eb; background: #fff; color: #e50c77; border-radius: 2px; line-height: 30px; } .common-advice .section-title span{ display: inline-block; padding: 10px 15px; border-radius: 2px 0 0 2px; font-size: 28px; letter-spacing: 0.1em; vertical-align: top; } .common-advice .section-title span:first-child{ background: #e50c77; color: #fff; padding: 11px 15px; font-size: 19px; letter-spacing: 0; } .common-advice .copy{ margin: 30px 0 20px; font-size: 23px; position: relative; padding-bottom: 30px; } .common-advice .copy span{ display: inline-block; } .common-advice .copy:after{ content: ''; display: block; position: absolute; bottom: 0; left: 0; height: 2px; width: 43px; background: #cdcdcd; } .common-advice p{ font-size: 15px; line-height: 2.1; margin: 0 0 10px; } .common-advice .contact-bottom{ font-size: 12px; margin-left: 30px; } .common-company{ margin: 50px 0; } .common-company .inner{ background: url(images/common/company-bg.png) no-repeat right center #f2f2f2; background-size: contain; padding: 30px 310px 30px 30px; } .common-company .section-title{ font-size: 22px; color: #2a4e9c; padding-bottom: 30px; margin-bottom: 30px; position: relative; } .common-company .section-title:after{ content: ''; display: block; position: absolute; bottom: 0; left: 0; height: 2px; width: 43px; background: #2a4e9c; } .common-company p{ font-size: 14px; line-height: 1.8; margin: 0 0 30px; } .common-company .more{ } .common-company .more a{ display: inline-block; background: #393939; border-radius: 4px; padding: 10px 40px; font-size: 14px; color: #fff; position: relative; } .common-company .more a:hover{ text-decoration: none; background: #777; } .common-company .more a:before, .common-company .more a:after{ content: ''; display: block; position: absolute; top: 0; bottom: 0; margin: auto 0; } .common-company .more a:before{ left: 0; width: 14px; height: 3px; background: #f2f2f2; } .common-company .more a:after{ left: 14px; width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 6px; border-color: transparent transparent transparent #f2f2f2; } .common-company-advice{ } .common-company-advice .inner{ background: url(images/common/advice-company-bg.png) no-repeat right center #e9eff8; background-size: contain; border: 2px solid #2a4e9c; padding: 28px 410px 28px 28px; } .common-company-advice .section-title{ } .common-company-advice .section-title div{ display: inline-block; box-shadow: 0 0 5px #d0d7e4; background: #fff; color: #2a4e9c; border-radius: 2px; line-height: 30px; } .common-company-advice .section-title span{ display: inline-block; padding: 2px 15px; border-radius: 2px 0 0 2px; font-size: 16px; letter-spacing: 0; vertical-align: middle; } .common-company-advice .section-title span:first-child{ background: #2a4e9c; color: #fff; padding: 3px 15px; } .common-company-advice .section-title small{ vertical-align: baseline; font-size: 13px; } .common-company-advice p{ font-size: 14px; letter-spacing: 0; margin: 25px 0 20px; } .common-company-advice .phonenumber{ } .common-company-advice .btn-email a{ background: #717171; } .common-company-advice .btn-email a:hover{ background: #333; } /* Footer */ #footer{ background: #efefef; font-size: 13px; padding: 32px 0; margin: 90px 0 0; letter-spacing: 0; } #footer .inner{ display: table; width: 100%; table-layout: fixed; } #footer .inner .column{ display: table-cell; border-right: 1px solid #c8c8c8; padding: 0 30px; } #footer .inner .column:first-child{ width: 61%; padding-left: 0; } #footer p strong{ color: #e50c77; } #footer .contact{ margin: 30px 0; } #footer address{ font-size: 12px; font-style: normal; } #footer nav h3{ margin: 0 0 10px; } #footer nav ul{ } #footer nav ul li{ display: block; margin: 0 0 5px; } #footer nav ul li a{ color: #000; text-decoration: underline; } #footer nav ul li a:hover{ text-decoration: none; color: #e50c77; } /* ===================== Front page ===================== */ /* Main Visual */ .mainvisual.image3{ background: url(images/frontpage/mainvisual-bg3.jpg) no-repeat center bottom; background-size: cover; } .mainvisual .inner{ /* background: url(images/frontpage/mainvisual-photo.png) no-repeat bottom right; */ margin-right: 40px; min-height: 420px; padding-top: 80px; position: relative; } .mainvisual .freeNotes{ position: absolute; bottom: 20px; left: 20px; font-size: 12px; color: #fff; font-weight:bold; } .mainvisual .point{ display: block; background: rgba(255,255,255,0.7); width: 260px; height: 260px; border-radius: 50%; float: left; text-align: center; margin-right: 20px; } .mainvisual .point sup{ font-size: 14px; top: -20px; } .mainvisual .point .title{ font-size: 16px; color: #e50c77; font-weight: bold; position: relative; margin: 40px 0 25px; } .mainvisual .point .title:before, .mainvisual .point .title:after{ content: ''; display: block; width: 5px; height: 21px; border: solid #eb9fc5; position: absolute; top: 0; bottom: 0; margin: auto 0; } .mainvisual .point .title:before{ border-width: 1px 0 1px 1px; left: 50%; margin-left: -60px; } .mainvisual .point .title:after{ border-width: 1px 1px 1px 0; right: 50%; margin-right: -60px; } .mainvisual .point p{ font-size: 35px; line-height: 45px; font-weight: bold; margin: 0 0 10px; } .mainvisual .point p strong{ color: #e50c77; } .mainvisual .point:after{ content: ''; display: inline-block; width: 44px; height: 40px; } .mainvisual .point.point-1:after{ background: url(images/frontpage/icon-point1.png) no-repeat center center; } .mainvisual .point.point-2:after{ background: url(images/frontpage/icon-point2.png) no-repeat center center; } .mainvisual .link{ position: absolute; right: -10px; bottom: 30px; } .mainvisual .link a{ display: block; background: #3669d8; border-radius: 2px; color: #fff; font-size: 15px; padding: 10px 15px; } .mainvisual .link a:hover{ text-decoration: none; opacity: 0.8; } .mainvisual .link a strong{ font-size: 20px; } .mainvisual .link a:before{ content: ''; display: inline-block; vertical-align: middle; position: relative; top: -4px; margin-right: 10px; background: url(images/frontpage/icon-company.png) no-repeat center center; width: 26px; height: 26px; } .mainvisual .link a:after{ content: ''; display: inline-block; vertical-align: middle; position: relative; top: -2px; margin-left: 5px; background: url(images/frontpage/icon-arrow.png) no-repeat center center; width: 20px; height: 10px; } /* Content */ .frontpage{ } .frontpage h2{ text-align: center; font-size: 36px; line-height: 40px; color: #483860; position: relative; padding: 17px 0; margin: 80px 0; } .frontpage h2:before, .frontpage h2:after{ content: ''; display: block; top: 0; bottom: 0; margin: auto 0; width: 16px; height: 100%; border: solid #d6d2da; position: absolute; } .frontpage h2:before{ left: 50%; margin-left: -340px; border-width: 1px 0 1px 1px; } .frontpage h2:after{ right: 50%; margin-right: -340px; border-width: 1px 1px 1px 0; } .frontpage-nav{ } .frontpage-nav .item{ position: relative; } .frontpage-nav .item.single{ background: url(images/frontpage/photo-nav1.png) no-repeat 20px center; padding: 0 35px 40px; } .frontpage-nav h3{ background: #483860; text-align: center; color: #fff; text-shadow: 0 0 8px #000; } .frontpage-nav .item.single h3{ width: 167px; padding: 3px 0; font-size: 32px; } .frontpage-nav .item.single p{ margin: 35px 0 20px 220px; font-size: 20px; line-height: 1.8; } .frontpage-nav .more{ text-align: right; font-weight: bold; } .frontpage-nav .more a{ display: inline-block; color: #f261a5; border-bottom: 2px solid #f261a5; } .frontpage-nav .more a:hover{ color: #d72f7e; border-color: #d72f7e; text-decoration: none; } .frontpage-nav .item.single .more{ font-size: 20px; } .frontpage-nav .wrap{ display: table; width: 100%; table-layout: fixed; } .frontpage-nav .wrap .item{ display: table-cell; padding: 10px 35px 0; background-repeat: no-repeat; background-position: center 0; } .frontpage-nav .wrap .item:nth-child(1){ background-image: url(images/frontpage/photo-nav2.png); } .frontpage-nav .wrap .item:nth-child(2){ background-image: url(images/frontpage/photo-nav3.png); } .frontpage-nav .wrap .item:nth-child(3){ background-image: url(images/frontpage/photo-nav4.png); } .frontpage-nav .wrap .item h3{ width: 142px; padding: 3px 0; font-size: 27px; } .frontpage-nav .wrap .item p{ margin: 160px 0 20px; } .frontpage-flow{ margin: 0 0 60px; } .frontpage-flow .item{ position: relative; min-height: 290px; padding-right: 400px; margin: 0 0 30px; } .frontpage-flow .photo{ position: absolute; right: 0; top: 0; } .frontpage-flow h3{ display: table; width: 100%; } .frontpage-flow h3 .num, .frontpage-flow h3 .text{ display: table-cell; border-bottom: 2px solid; padding: 5px 0 30px; } .frontpage-flow h3 .num{ border-color: #dd6d83; width: 50px; text-align: center; } .frontpage-flow h3 .text{ border-color: #483860; font-size: 25px; padding-left: 10px; } .frontpage-flow h3 span{ font-size: 20px; } .frontpage-flow h3 strong{ color: #f261a5; } .frontpage-flow p{ line-height: 1.8; margin: 30px 0; } .frontpage-flow .contact{ background: #f3f3f3; border: 2px solid #e50c77; border-radius: 5px; text-align: center; padding: 20px 0; } .frontpage-flow .contact .top{ font-weight: bold; margin: 0 0 15px; } .frontpage-flow .contact .top strong{ color: #f261a5; } .frontpage-flow .contact .phonenumber{ display: inline-block; vertical-align: middle; font-size: 42px; } .frontpage-flow .contact .phonenumber .icon-phone{ width: 26px; height: 32px; } .frontpage-flow .contact .btn-email a{ background: #f261a5; padding: 10px 20px 10px 10px; } .frontpage-flow .contact .btn-email a:hover{ background: #d72f7e; } .frontpage-flow .contact .contact-bottom{ text-align:left; margin-left:30px; } /*faq*/ .page-content .faqBox h3{ padding-left:25px; } .page-content .faqBox h3:before,.page-content .faqBox p:before{ display: block; position: absolute; left: 0px; top: 0px; width: 0; height: 0; border:none; } .page-content .faqBox h3:before{ content: "Q"; color:#0d751f; } .page-content .faqBox p{ padding-left:25px; position:relative; } .page-content .faqBox p:before{ content: "A"; font-size:20px; font-weight:bold; color:#e50c77; top:-5px; } .page-content .faqBox p:last-child{ margin-bottom:40px; } /* margin*/ .mB40{ margin-bottom:40px!important; } /* contact form */ span.large{ font-size:22px; } div#contactForm { margin:30px 0;overflow:hidden;background:#fbfaf9; } div#contactForm h5{ width:30%; float:left; display:block; margin:0; padding:15px; border:none; border-top:1px solid #ccc; font-size:15px; } div#contactForm textarea {line-height:1.3;} div#contactForm h5 span.error{ background:#c03; color:#fff; border-radius:3px; padding:0px 2px; font-size:12px; } div#contactForm p{ width:70%; min-height:100px; float:left; display:block; margin:0; padding:15px;border-top:1px solid #ccc; font-size:15px; background:#fff; } div#contactForm p span.kibou{ background:#777; color:#fff; border-radius:3px; padding:0px 2px; } div#contactForm p.noMark{ width:100%; } div#contactForm p:before{ content:""; } div#contactForm p input,div#contactForm p select,div#contactForm p textarea{ font-size:15px; padding:10px; margin:5px 0; border-radius:3px; border:1px solid #999; background:#f2f7fb; } div#contactForm p.submitButton input{ padding:20px; color:#fff; background-color:#483860; border:none; border-radius:0; } div#contactForm p textarea{ width:100%; } div#contactForm p.width100p{ width:100%; } div#contactForm p.lineWide { line-height:1.8em; } div#contactForm p textarea{ font-size:15px; padding:10px; margin:5px 0; border-radius:3px; border:1px solid #999; background:#f2f7fb; } div#confButton { width:inherit; height:100px; border-top:1px solid #ccc; margin:0 auto; padding:20px 300px 0; text-align:center; } div#confButton form{ width:50%; float:left; display:inline-block; } div#confButton input{ font-size:15px; padding:15px 60px; margin:5px 0; color:#fff; background-color:#483860; } /*下層に流用したトップ用流れ 調整用*/ .page-content .frontpage-flow h3{ padding:0; } .page-content .frontpage-flow h3:before{ border:none; } /* ===================== Bottom Pages ===================== */ /* Page Title */ .page-title{ background: url(images/common/title-bg.png) repeat top center; text-align: center; padding: 40px 0 50px; } .page-title .category{ font-size: 18px; line-height: 20px; color: #959595; margin-bottom: 20px; } .page-title .category span, .page-title .category a{ display: inline-block; border: 1px solid #959595; padding: 5px 15px; color: #959595; text-decoration: none; } .page-title .title{ font-size: 27px; line-height: 30px; letter-spacing: 0.1em; } /* BreadCrumb */ .breadcrumb{ margin: 20px 0 60px; } .breadcrumb ol{ color: #737272; font-size: 12px; line-height: 15px; } .breadcrumb ol li{ display: inline-block; } .breadcrumb ol li:after{ content: ''; display: inline-block; width: 0; height: 0; border-style: solid; border-width: 4px 0 4px 6px; border-color: transparent transparent transparent #737272; vertical-align: middle; position: relative; top: -2px; } .breadcrumb ol li:last-child:after{ display: none; } .breadcrumb ol li a{ color: #737272; } /* Page Body Area */ .page-content{ } .page-content p{ font-size: 16px; line-height: 2.4; margin: 0 0 2.4em; } .page-content p a.buttonLink{ border:1px solid #f261a5; border-radius:3px; padding:15px 20px; } .page-content p a.buttonLink:hover{ background:#f261a5; color:#fff; text-decoration:none; } .page-content p:last-child{ margin: 0; } .page-content h2{ background: url(images/common/title-bg.png) repeat top center; font-size: 20px; line-height: 1.5; padding: 5px 15px; margin: 0 0 1em; } .page-content h3{ font-size: 20px; line-height: 1.5; border-bottom: 1px solid #e8e5ed; padding: 0 15px 5px; margin: 0 0 1em; position: relative; } .page-content h3:before{ content: ''; display: block; position: absolute; left: 2px; top: 11px; width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent #e8e5ed; } .page-content h4{ font-size: 18px; line-height: 1.5; margin: 0 0 1em; text-decoration: underline; } .page-content h5{ color: #e50c77; margin: 0 0 1em; } .page-content strong{ color: #e50c77; } .page-content hr{ margin: 2.4em 0; border: none; border-top: 1px solid #e8e5ed; } .page-content ul, .page-content ol{ margin: 0 0 2.4em; } .page-content ol{ counter-reset: list-count; } .page-content ul li, .page-content ol li{ display: block; margin: 0 0 1em; position: relative; } .page-content ul li{ padding-left: 15px; } .page-content ol li{ padding-left: 35px; } .page-content ul li:before{ content: ''; display: block; position: absolute; left: 2px; top: 7px; width: 6px; height: 6px; background: #e8e5ed; } .page-content ol li:before{ content: counter(list-count); counter-increment: list-count; display: block; position: absolute; left: 2px; top: 1px; width: 20px; height: 20px; font-size: 12px; line-height: 18px; color: #fff; background: #ccc; font-weight: bold; border: 1px solid #e8e5ed; border-radius: 50%; text-align: center; } .page-content .textbox{ background: #fbfbfb; border: 1px solid #f7f7f7; padding: 20px 30px; margin: 0 0 2.4em; } .page-content .floatRight{ float:right; } .page-content .floatLeft{ float:left; } .page-content img.lowerPht{ width: 360px; margin: 0.5em 0 2.4em 2.4em; float:right; } .page-content img.lowerPhtLeft{ width: 360px; margin: 0.5em 0 2.4em 2.4em; float:left; } .page-content img.lowerPht~h2 , .page-content img.lowerPht~h3 , .page-content img.lowerPht~table{ clear:both; } /*仮のTABLE*/ .page-content table{ width: 100%; margin: 0 0 2.4em 0; border-collapse: collapse; font-size: 16px; border-bottom: solid 1px #e3e3e3; text-align:left; } .page-content table tr{ border-top: solid 1px #e3e3e3; } .page-content table tr th{ width:140px; padding: 15px; font-weight: bold; color: #2e2040; background:#fcfafb; } .page-content table tr:first-child th , .page-content table.complex tr.empha th { background:#f9f4f6; } table tr.unEmpha th{ background: #fcfafb!important; } .page-content table tr td{ padding:15px; } .page-content table.complex tr:first-child { background:none; } /* Middle index page navigation */ .page-content ul:after{ display:block; content:""; clear:both; } .page-content ul.indexList li{ margin-bottom:40px; padding:0; float:left; } .page-content ul.indexList li:before{ content:none; } .page-content ul.indexList li a{ width:300px; height:120px; margin-right:40px; padding-top:36px; display:block; position:relative; border:solid 2px #4b3960; text-align:center; font-size:22px; font-weight:bold; color:#fff; background:#4b3960; } .page-content ul.indexList li a:hover{ background:#fff; border:solid 2px #4b3960; color:#4b3960; text-decoration:none; } .page-content ul.indexList li a:after{ content:"▼"; position:absolute; bottom:10px; font-size:10px; right:143px; } .page-content ul.indexList li:nth-child(3n) a{ margin-right:0; } /* Page bottom navigation */ .page-nav{ margin: 90px 0 60px; } .page-nav ul{ display: table; table-layout: fixed; width: 100%; font-weight: bold; } .page-nav ul a{ color: #0036ff; text-decoration: underline; } .page-nav ul a:hover{ text-decoration: none; } .page-nav ul li{ display: table-cell; padding: 0 15px; position: relative; } .page-nav ul li.prev{ text-align: left; } .page-nav ul li.next{ text-align: right; } .page-nav ul li.prev:before, .page-nav ul li.next:after{ content: ''; display: block; width: 0; height: 0; border-style: solid; position: absolute; top: 0; bottom: 0; margin: auto 0; } .page-nav ul li.prev:before{ border-width: 4px 6px 4px 0; border-color: transparent #dedae5 transparent transparent; left: 0; } .page-nav ul li.next:after{ border-width: 4px 0 4px 6px; border-color: transparent transparent transparent #dedae5; right: 0; } /* Related Posts */ .post-related{ border: 1px solid #e8e5ed; padding: 30px 35px; margin: 60px 0 70px; } .post-related a{ color: #0036ff; text-decoration: underline; } .post-related a:hover{ text-decoration: none; } .post-related h2{ font-size: 18px; line-height: 1.2; margin: 0 0 25px; } .post-related ul{ font-weight: bold; } .post-related ul li{ display: block; margin: 0 0 1.2em 0; padding-left: 25px; font-size: 15px; line-height: 1.3; position: relative; list-style:none!important; } .post-related ul li:last-child{ margin: 0; } .post-related ul li:before{ content: ''; width: 12px; height: 12px; background: #dedae5; border-radius: 2px; position: absolute; left: 0; top: 3px; } .post-related ul li.disable { display: none; } .post-related ul li.current a{ color: #888; } .post-related .btn { text-align:center; margin-top:1.2em; } .post-related .link { margin:0; padding: 5px; color: #3f2d59; border: 1px solid #3f2d59; display: inline-block; border-radius: 1px; font-size: 13px; cursor: pointer; text-align: left; } .post-related .link:hover { background: #3f2d59; color: #fff; } /* ===================== Mobile Settings ===================== */ @media screen and (max-width: 1020px) and (min-width: 768px) { .container{ width: auto; margin: 0 20px; } .phonenumber{ font-size: 26px; } .header-top{ padding: 15px 10px; } .header-top .container{ margin: 0; } .header-top .logo-wrap{ padding: 0; } .header-top .logo-wrap p{ font-size: 16px; } .header-top .logo{ } .header-top .logo img{ width: auto; height: 40px; } .header-top .right .free{ width: 80px; height: 40px; padding: 0; } .header-top .right .phone{ line-height: 1; } .header-top .right .phone>span{ font-size: 13px; } .header-top .right .free span{ font-size: 11px; } .header-top .right .free strong{ font-size: 14px; } .header-top .right .phone .phonenumber{ font-size: 20px; } .header-top .right .phone .phonenumber:after{ background-size: contain; width: 6px; height: 18px; } .header-top .right .phone .phonenumber .icon-phone{ width: 16px; height: 20px; } .header-top .right .phone .btn-email a{ font-size: 12px; } .mainvisual .point{ width: 30%; height: auto; position: relative; } .mainvisual .point:before{ content: ''; display: block; padding-top: 100%; } .mainvisual .point:after{ display: block; position: absolute; bottom: 10px; left: 0; right: 0; margin: 0 auto; } .mainvisual .point .text{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .mainvisual .point .title{ margin: 35px 0 15px; } .mainvisual .point p{ position: absolute; height: 70px; margin: auto; top: 0; left: 0; right: 0; bottom: 0; font-size: 30px; line-height: 35px; } #gnavi .inner{ padding: 0; } #gnavi ul li a{ padding: 4px 5px; } #gnavi span{ display: inline-block; } .frontpage h2{ margin: 60px 0; } .frontpage-nav .item.single{ min-height: 300px; margin: 0 0 30px; } .frontpage-nav .item.single p{ font-size: 16px; margin: 20px 0 20px 220px; } .frontpage-nav .wrap .item{ background-size: 90%; padding: 10px 2% 0; } .frontpage-nav .wrap .item h3{ font-size: 20px; width: 100px; } .frontpage-flow .photo{ width: 200px; } .frontpage-flow .photo img{ max-width: 100%; height: auto; } .frontpage-flow .item{ padding-right: 230px; } .common-advice .inner{ padding: 35px 300px 25px 35px; } .common-advice .section-title span{ font-size: 24px; padding: 5px 10px; } .common-advice .section-title span:first-child{ padding: 5px 14px; font-size: 16px; } .common-advice .copy{ font-size: 20px; margin: 20px 0 20px; padding-bottom: 20px; } .common-advice p{ font-size: 12px; line-height: 1.8; } .common-company .section-title{ padding-bottom: 20px; margin-bottom: 20px; } .common-company p{ font-size: 12px; margin: 0 0 20px; } .common-company-advice .inner{ padding: 30px 300px 30px 30px; } .common-company-advice .section-title span{ font-size: 14px; padding: 3px 10px; } .common-company-advice .section-title span:first-child{ padding: 3px 10px; } .contact .phonenumber{ margin-right: 10px; } .btn-email a{ padding: 6px 10px 6px 6px; } .btn-email a .icon{ margin-right: 10px; } #footer .inner .column{ padding: 0 20px; } /*contact*/ div#contactForm p input,div#contactForm p select,div#contactForm p textarea{ width:100%; } div#confButton{ width:100%; padding:20px 30%; } div#confButton form{ width:50%; float:left; display:inline-block; } div#confButton input{ font-size:15px; padding:15px 30%; margin:5px 0; } /* Middle index page navigation 768-1020 */ .page-content ul.indexList{ width:768px; margin-left:auto; margin-right:auto; } .page-content ul.indexList li{ margin-bottom:20px; float:left; } .page-content ul.indexList li a{ height:80px; margin-right:40px!important; padding-top:18px; font-size:20px; } .page-content ul.indexList li:nth-child(2n) a{ margin-right:64px!important; } .page-content ul.indexList li:nth-child(2n+1) a{ margin-left:64px; } .page-content ul.indexList li a:after{ right:49%; bottom:4px; } } @media screen and (max-width: 1020px) { .common-office .inner{ display: flex; flex-wrap: wrap; } .common-office .inner .column{ display: block; width: 50%; margin: 0 0 15px; } .common-office .inner .column:nth-child(2){ border-width: 0 1px; } } @media screen and (max-width: 767px) { body{ font-size: 15px; } img{ max-width: 100%; height: auto; } .container{ width: auto; padding: 0 5%; } .mainvisual .container, .header-top .container{ padding: 0; } .icon.icon-phone, .frontpage-flow .contact .phonenumber .icon-phone{ width: 17px; height: 20px; } .icon.icon-office-time, .icon.icon-office-phone, .icon.icon-office-address, .icon.icon-office-access{ width: 12px; height: 13px; } .icon.icon-faq{ width: 13px; height: 13px; } .icon.icon-email{ width: 12px; height: 8px; } .btn-email a{ font-size: 15px; padding: 10px; } .btn-line a{ font-size: 15px; padding: 10px; margin: 5px 0 0; } .frontpage-flow .contact .btn-email a{ padding: 15px; } .btn-email a .icon{ margin-right: 5px; } .contact{ text-align: center; } .header-top{ padding: 9px 10px; } .header-top .right{ display: none; } .header-top .logo-wrap .logo img{ width: 160px; height: auto; } .header-top .logo-wrap p{ font-size: 12px; } .mainvisual .inner{ background: url(images/frontpage/mainvisual-photo.png) no-repeat bottom right; min-height: 180px; padding: 20px 0; background-size: contain; background-position: right -20px bottom 0; margin-right: 0; } .mainvisual .point{ width: 30%; height: auto; position: relative; margin-right: 3%; } .mainvisual .point sup{ font-size: 10px; top: -15px; } .mainvisual .freeNotes { bottom: 1px; left: 7px; font-size: 10px; } .mainvisual .point:before{ content: ''; display: block; padding-top: 100%; } .mainvisual .point:after{ display: block; width: 15px; height: 15px; background-size: contain !important; position: absolute; bottom: 12px; left: 0; right: 0; margin: 0 auto; } .mainvisual .point .text{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .mainvisual .point .title{ font-size: 10px; margin: 20px 0 0; } .mainvisual .point .title:before, .mainvisual .point .title:after{ width: 2px; height: 9px; } .mainvisual .point .title:before{ margin-left: -30px; } .mainvisual .point .title:after{ margin-right: -30px; } .mainvisual .point p{ position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0; height: 60px; font-size: 24px; line-height: 30px; letter-spacing: 0; } .mainvisual .link{ display: none; } #gnavi{ display: none; } .frontpage h2{ font-size: 16px; margin: 25px 0; padding: 0; } .frontpage h2:before, .frontpage h2:after{ width: 7px; } .frontpage h2:before{ margin-left: -150px; } .frontpage h2:after{ margin-right: -150px; } .frontpage-nav .item.single{ padding: 0; background-size: 150px; background-position: left top; } .frontpage-nav .item.single h3{ font-size: 18px; width: 105px } .frontpage-nav .item.single p{ margin: 15px 0 0 40px; font-size: 15px; text-shadow: 0 0 2px #fff; } .frontpage-nav .item.single .more{ font-size: 15px; margin: 20px 0; } .frontpage-nav .wrap{ display: flex; flex-wrap: wrap; justify-content: space-around; } .frontpage-nav .wrap .item{ display: block; width: 45%; background-size: contain; padding: 0 0 20px; } .frontpage-nav .wrap .item h3{ font-size: 15px; width: 80px; margin: 0 auto; } .frontpage-nav .wrap .item p{ margin: 120px 0 10px; font-size: 12px; text-shadow: 0 0 2px #fff; } .frontpage-nav .wrap .more{ font-size: 12px; text-align: center; } .frontpage-flow .item{ padding-right: 0; min-height: 0; } .frontpage-flow h3{ margin: 0 0 15px; } .frontpage-flow h3 .num, .frontpage-flow h3 .text{ padding: 5px 0 15px; } .frontpage-flow h3 .num{ width: 25px; } .frontpage-flow h3 .text{ font-size: 18px; padding-left: 10px; } .frontpage-flow h3 span{ font-size: 15px; } .frontpage-flow .photo{ position: relative; float: right; width: 110px; margin: 0 0 20px 20px; } .frontpage-flow p{ margin: 0 0 10px; min-height: 110px; } .frontpage-flow .contact{ padding: 8px 0 10px; } .frontpage-flow .contact .top{ margin: 0; } .frontpage-flow .contact .phonenumber, .contact .phonenumber{ font-size: 30px; line-height: 1; margin-right: 0; } .btn-email{ margin: 5px 0 0; } .phone-bottom{ color: #483860; font-weight: bold; font-size: 12px; letter-spacing: 0; } .phone-bottom small{ font-size: 100%; color: #000; font-weight: normal; display: inline-block; } .common-office .section-title{ font-size: 15px; } .common-office .inner .column{ padding: 5px 12px; } .common-office .title{ margin: 0 0 10px; } .common-office p{ font-size: 12px; } .common-office .photo{ margin: 30px 0; } .common-office .photo img{ width: 100%; float: none; } .common-office .map iframe{ height: 210px; } .common-office{ margin: 0 0 30px; } .common-faq{ margin: 0 0 30px; } .common-faq .section-title{ font-size: 18px; padding: 5px 10px; } .common-faq ul{ padding: 20px 15px; } .common-advice .inner{ padding: 45% 14px 14px; position: relative; } .common-advice .inner{ background: url(images/frontpage/advice-bg-sp.png) no-repeat top center #fff7fb; background-size: contain; } .common-advice .section-title{ position: absolute; left: 14px; top: 14px; } .common-advice .section-title span:first-child{ font-size: 15px; padding: 0 10px; } .common-advice .section-title span{ font-size: 16px; padding: 0 10px; } .common-advice .copy{ padding-bottom: 15px; margin: 0 0 15px; font-size: 16px; } .common-advice p{ font-size: 15px; line-height: 1.8; } .common-company{ margin: 30px 0; } .common-company .inner{ padding: 15px; background-image: none; } .common-company .section-title{ font-size: 18px; padding-bottom: 15px; margin-bottom: 15px; } .common-company p{ font-size: 15px; margin: 0 0 15px; } .common-company .more a{ font-size: 12px; padding: 4px 10px 6px 20px; } .common-company .more a:before{ height: 2px; width: 8px; } .common-company .more a:after{ left: 8px; border-width: 3px 0 3px 4px; } .common-company-advice .inner{ padding: 15px; background-image: none; } .common-company-advice .section-title div{ display: block; text-align: center; background: #2a4e9c; border-radius: 0; box-shadow: none; margin: -15px -15px 0; } .common-company-advice .section-title span:first-child{ padding: 0 10px; font-size: 16px; border-radius: 0; background: transparent } .common-company-advice .section-title span{ display: block; font-size: 18px; padding: 0 10px; background: transparent; color: #fff; border-radius: 0; } .common-company-advice .section-title small{ font-size: 12px; } .common-company-advice p{ font-size: 15px; line-height: 1.8; margin: 15px 0; } #footer{ margin: 20px 0 0; padding: 15px 0 120px; } #footer .sp-address{ font-size: 12px; } .breadcrumb{ width: 100%; overflow-x: auto; white-space: nowrap; background: #f7f7f7; padding: 5px; margin: 20px 0; } .page-title .category{ font-size: 16px; line-height: 18px; } .page-title .title{ font-size: 22px; line-height: 25px; } .page-content p{ font-size: 15px; } .page-content .textbox{ padding: 15px; } .post-related{ padding: 15px; } .page-content img.lowerPht{ width:100%; margin: 0 0 1em; float:none; } /*contact*/ div.page-content p.telBox { line-height:1.3!important; } div.page-content p.telBox a{ width:100%; padding:10px; text-align:center; display:block; color:#0d751f; border: solid 2px #0d751f; } div.page-content p.telBox a span{ font-weight:bold; height:30px; width:30px; font-size:24px; } div#contactForm h5{ width:100%; } div#contactForm p{ width:100%; } div#contactForm p input,div#contactForm p select{ width:100%; } div#confButton{ width:100%; height:100px; padding:20px 0 40px 0; } div#confButton form{ width:50%; float:left; display:inline-block; } div#confButton input{ font-size:15px; padding:15px 10px; width:90%; margin:5px 0; } /* Middle index page navigation -768 */ .page-content ul.indexList li{ margin-bottom:1em; float:none; } .page-content ul.indexList li a{ width:100%; height:60px; margin-right:0; padding-top:10px; font-size:18px; } .page-content ul.indexList li a:after{ right:49%; bottom:4px; } } @media screen and (max-width: 530px) { .mainvisual .point p{ height: 46px; font-size: 17px; line-height: 23px; } .mainvisual .point sup{ font-size: 8px; top: -12px; } .mainvisual .freeNotes { bottom: 1px; left: 7px; font-size: 8px; } .mainvisual .freeNotes span{ display: none; } } @media screen and (max-width: 450px) { .mainvisual .point{ width: 37%; } #footer{ padding: 15px 0 70px; } } @media screen and (max-width: 335px) { .common-company-advice .section-title span:first-child{ padding: 0; } .common-company-advice .section-title span{ padding: 0; } .frontpage-flow .contact .phonenumber, .contact .phonenumber{ font-size: 26px; } } /* ===================== Mobile Banner & Menu ===================== */ #fbanner,#slidemenu{ display: none; } @media screen and (max-width: 767px) { .spCont{ display:inline; } .pcCont{ display:none; } /* Fixed banner */ #fbanner{ display: block; position: fixed; bottom: 0; width: 100%; opacity: 0; transition: ease 0.4s; } #fbanner.active{ opacity: 1; } #fbanner .inner{ display: table; width: 100%; } #fbanner .inner a{ display: block; } #fbanner .inner img{ display: block; width: 100%; height: auto; } #fbanner .inner .text, #fbanner .inner .phone, #fbanner .inner .mail, #fbanner .inner .line{ display: table-cell; } #fbanner .inner .text{ width: 55%; } #fbanner .inner .phone, #fbanner .inner .mail, #fbanner .inner .line{ width: 15%; } /* Slide menu */ #slidemenu{ display: block; position: fixed; top: 0; right: -260px; width: 260px; height: 100%; background: #483860; transition: ease 0.4s; } #slidemenu.active{ right: 0; } #slidemenu .switch{ position: absolute; left: -50px; width: 50px; height: 50px; top: 0; background: #483860; color: #fff; padding-top: 33px; font-size: 10px; line-height: 1; letter-spacing: -0.1em; text-align: center; cursor: pointer; } #slidemenu .switch:after{ content: 'メニュー'; } #slidemenu.active .switch:after{ content: '閉じる'; } #slidemenu .switch span{ display: block; width: 20px; height: 2px; background: #fff; position: absolute; top: 18px; left: 16px; transition: ease 1s; } #slidemenu .switch span:before, #slidemenu .switch span:after{ content: ''; display: block; width: 20px; height: 2px; background: #fff; position: absolute; left: 0; } #slidemenu .switch span:before{ top: -6px; } #slidemenu .switch span:after{ bottom: -6px; } #slidemenu.active .switch span{ transform: rotate(-45deg); } #slidemenu.active .switch span:before{ display: none } #slidemenu.active .switch span:after{ bottom: 0; transform: rotate(90deg); } #slidemenu .menu{ } #slidemenu .menu a{ color: #fff; } #slidemenu .menu li{ display: block; } #slidemenu .menu li a{ display: block; padding: 10px; } #slidemenu .menu li span{ display: block; padding: 10px; color:#fff; position:relative; } #slidemenu .menu li span:after{ position:absolute; top:12px; right:15px; content:"▼"; font-size:12px; } #slidemenu .menu li span.active:after{ -webkit-transform: rotate(180deg); transform: rotate(180deg); } #slidemenu .menu li ul{ display:none; background:#8573a0; } }