@charset "UTF-8"; /* RESET - ADAPTED FROM MEYER RESET URL - http://meyerweb.com/eric/tools/css/reset/ LICENSE - PUBLIC DOMAIN */ a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, caption, canvas, center, cite, code,dd, del, details, dfn, dialog, div, dl, dt, em, embed, fieldset, figcaption, figure, form, footer, header, hgroup, h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, main, small, span, strike, strong, sub, summary, sup, tt, table, tbody, textarea, tfoot, thead, time, tr, th, td,u, ul, var, video{font-family:inherit;font-size:100%;font-weight:inherit;font-style:inherit;vertical-align:baseline;margin:0;padding:0;border:0;outline:0;background:transparent;}article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main{display:block;}ol, ul{list-style:none;}blockquote, q{quotes:none;}table{border-collapse:collapse;border-spacing:0;}body{line-height:1;} textarea{font-family:inherit;font-size:100%;font-weight:inherit;font-style:inherit;vertical-align:baseline;margin:0;padding:0;} /* YUI 3.14.1 (build 63049cb) Copyright 2013 Yahoo! Inc. All rights reserved. Licensed under the BSD License. http://yuilibrary.com/license/ */ body{font:13px/1.231 arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;} select,input,button,textarea{font:99% arial,helvetica,clean,sans-serif} table{font-size:inherit;font:100%} pre,code,kbd,samp,tt{font-family:monospace;*font-size:108%;line-height:100%} #yui3-css-stamp.cssfonts{display:none} /*12 COLUMN :RESPONSIVE GRID SYSTEM DEVELOPER :DENIS LEBLANC URL :http://responsive.gs VERSION :3.0 LICENSE :GPL & MIT */ /* SET ALL ELEMENTS TO BOX-SIZING :BORDER-BOX */ *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box; *behavior:url(boxsizing.htc);} /*MAIN CONTAINER Set the width to whatever you want the width of your site to be. */ .container{max-width:1120px; margin:0 auto;} /*SELF CLEARING FLOATS - CLEARFIX METHOD */ .container:after,.row:after,.col:after,.clr:after,.group:after{content:"";display:table;clear:both;} @media (min-width:768px){ .container{width:1120px; padding:0 20px;} } @font-face { font-family: 'fontello'; src: url('font/fontello.eot?97413330'); src: url('font/fontello.eot?97413330#iefix') format('embedded-opentype'), url('font/fontello.woff2?97413330') format('woff2'), url('font/fontello.woff?97413330') format('woff'), url('font/fontello.ttf?97413330') format('truetype'), url('font/fontello.svg?97413330#fontello') format('svg'); font-weight: normal; font-style: normal; } [class^="icon-"]:before, [class*=" icon-"]:before { font-family: "fontello"; font-style: normal; font-weight: normal; display: inline-block; text-decoration: inherit; width: 1em; text-align: center; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-down-open:before { content: '\e800'; } /* '' */ .icon-up-open:before { content: '\e801'; } /* '' */ // BASE COLOR @white:#FFF; @black:#000000; @gray:#999; @grayD:#666; @grayL:#bebebe; @grayLL:#eee; @grayLLL:#FAFAFA; @red:#E20303; @green:#00A78C; @pink:#FFC1CF; @pinkL:#FFF0F3; @blue:#1383E3; @blueL:#CFE6FA; @yellow:#FDDD54; @yellowL:#FFF7D4; // LESS @ncc:no-repeat center center; // MIXIN .trans{-webkit-transition:0.4s; -moz-transition:0.4s; -o-transition:0.4s; -ms-transition:0.4s; transition:0.4s;} .tac{text-align:center;} .tar{text-align:right;} .tdn{text-decoration:none;} .tdu{text-decoration:underline;} .bgsc{-webkit-background-size:cover; -moz-background-size:cover; -ms-background-size:cover; -o-background-size:cover; background-size:cover;} .inline{display:-moz-inline-box; display:inline-block;} .fb{font-family:a-otf-midashi-go-mb31-pr6n; font-weight:600;} /*BASE*/ html,body{width:100%; margin:0; padding:0;} body{line-height:1; -webkit-text-size-adjust:100%; color:@white; background:@black; font-size:16px; font-family:a-otf-gothic-bbb-pr6n,sans-serif; font-feature-settings:"palt";} img{max-width:100%; height:auto; vertical-align:middle;} /*CF*/ .cf:before,.cf:after{content:" ";display:table;}.cf:after{clear:both;}.cf{*zoom:1;} /*LINK*/ a:link{color:@white; .tdu; .trans;} a:visited{color:@white; .tdu;} a:hover{color:@white; .tdu;} a:active{color:@white; .tdu;} a img{border:none; .tdn; .trans;} a img:hover{border:none; opacity:0.6; .tdn;} /*LETTER*/ strong{.fb();} .wf{font-family:"Heebo"; font-weight:500;} .attention{color:@red;} .fontsmall{font-size:85%!important;} .fontlarge{font-size:124%!important;} ::selection{background:@black; color:@white;} ::-moz-selection{background:@black; color:@white;} /*MAIN*/ .mt05{ margin-top: 5px!important;} .mt10{ margin-top: 10px!important;} .mt15{ margin-top: 15px!important;} .mt20{ margin-top: 20px!important;} main{position:relative; clear:both; overflow:hidden; display:block; height:100%;background:@black;} div.spbox{position:relative;} /*KV*/ div.topteaser{position:relative; width:100%; margin:0 0 0%; } .min { font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "MS P明朝", "MS 明朝", serif; } /*box01*/ div.box01{background:url("../img/box01_bg01.png") repeat-y 0 0;background-size:100%; padding: 0px 5% 20px; div{ width: 327px; text-align: center; margin: 0 auto;} p.min{font-size:18px; line-height: 1.8; padding: 40px 0 60px; } ul{display:-webkit-flex; display:flex; -webkit-flex-flow:row nowrap; flex-flow:row nowrap; -webkit-justify-content:space-between; justify-content:space-between; -webkit-align-items:center; align-items:center; li{ width: 30%;} } } /*box02*/ div.box02{ padding: 35px 5% 0px; h2{margin:0 auto; text-align: center; img{ width:242px;} } p{margin:50px auto 0; text-align: center; img{ width:205px;} } dt{ margin: 45px 0 0;background:url("../img/box02_ico.png")no-repeat 0 50%; background-size: 24px 24px; padding:3px 0 3px 25px;text-shadow: 0px 0px 10px #078dff; font-size: 25px; font-weight: bold;} dd{ margin: 20px 0 0 30px; font-size: 28px; line-height: 1.2;} dd span{font-size: 15px; margin: 0 ; padding: 0;} dd p{font-size: 15px; line-height: 1.5; margin: 0 ; padding: 0; text-align: left;} dd div{ margin-top: 15px;} dd span.fs30{font-size: 30px;} p.txt{text-align:left; text-indent: -1em; padding-left: 1em; margin: 50px 5% 0; line-height: 1.4;} } /*box03*/ div.box03 .inbox{ padding: 0px 5% 0px; div{ margin-top: 80px;} h3{font-size:24px; margin-top: 25px; span{font-size: 16px;} } p.min{font-size: 18px; margin-top: 10px; line-height: 1.5;} div.inner{ margin: 0px 0% 15px; padding:0 15px 15px 15px !important; background-color: #FFF; dl{ width: 100%;color:#000; font-size: 18px;line-height: 1.5;padding:15px 0 0 0 ; dt{} dd{ padding-left: 1em;} } dl.mt20{ margin-top: 20px;} } p.btn{margin:0 auto; text-align: center; img{ width:242px;} } } /*アコーディオンcss*/ .acd-check{ display: none; } .acd-label{ cursor: pointer; display: block; margin-top: 15px; padding: 10px; position: relative; width: 100%; border: 1px solid #CCC; } .acd-label:after{ box-sizing: border-box; content: '+'; display: block; font-family: "Font Awesome 5 Free"; padding: 10px 20px; position: absolute; right: 0; top: 0px; } .acd-content{ display: block; height: 0; opacity: 0; padding: 0 10px; transition: .5s; visibility: hidden; } .acd-check:checked + .acd-label:after{ content: '-'; } .acd-check:checked + .acd-label + .acd-content{ height: auto; opacity: 1; padding: 10px; visibility: visible; } .acd-content p{ margin:0; } /*アコーディオンcss*/ /*box03_att_Area*/ div.box03 .att_box{ padding: 0px 5% 50px; ul li{ text-indent: -0.5em; padding-left: 0.5em;} } /*box04*/ div.box04 { margin: 80px 5%; background: url("../img/box04_bg02.png") 100% 100% no-repeat; background-size: 100% auto; padding-bottom: 60px; .inner{ background: url("../img/box04_bg01.png") 100% 0 no-repeat; background-size: 100% auto; padding: 30px 40px 0; h3{margin:0px auto 0; text-align: center; img{ width:136px;} } p.min{ font-size: 16px; line-height: 1.5; margin-top: 30px;} .img{ margin-top: 35px;} } } /*box05*/ div.box05 { margin: 0px auto; background: url("../img/box05_bg01.png") 0% 0% no-repeat #173582; background-size: 100% auto; padding: 60px 5%; h3{margin:0px auto 0; text-align: center; img{ width:374px;} } h4{margin:30px auto 0; text-align: center; img{ width:135px;} } p.min{ font-size: 22px; margin: 20px 12%; line-height: 1.5; } ul {display:-webkit-flex; display:flex; -webkit-flex-flow:row wrap; flex-flow:row wrap; -webkit-justify-content:space-between; justify-content:space-between; -webkit-align-items:center; align-items:center; li{ width: 48%; margin-bottom: 20px;} } p.txt01{ margin: 25px 3em 20px; line-height: 1.5;} p.txt02{ margin: 15px auto 40px; line-height: 1.5;} p.more{ margin: 20px auto 40px; text-align: center; img{ width:150px;} } .banner02{ margin-top: 40px;} p.copy{ margin: 40px auto; text-align: center; font-size: 12px;} } /****************************************************/ /************************ PC ************************/ /****************************************************/ @media(min-width:768px){ html,body{min-width:1120px;} .sp{display:none!important;} .pc{display:block;} main{width:430px; margin:0 auto; border-left:2px solid @black; border-right:2px solid @black;} /*KV*/ div.topteaser{height:auto; div.topkv{height:auto; padding:30% 0 48%;} } div.pcbody{position:relative; width:100%; height:100vh; div.pcbox{position:fixed; width:60%; min-width:740px; height:100vh; display:-webkit-flex; display:flex; -webkit-flex-flow:row nowrap; flex-flow:row nowrap; -webkit-justify-content:center; justify-content:center; -webkit-align-items:center; align-items:center; div.pcboxin{width:740px; margin:0 auto;} article{margin-left:calc(~'94px + 5%'); h1{font-size:3em;; margin:0 0 10px; line-height:1.4; } p.min{font-size:2em; margin:0 0 100px;} div.linelink{display:flex; -webkit-flex-flow:row nowrap; flex-flow:row nowrap; -webkit-justify-content:flex-start; justify-content:flex-start; -webkit-align-items:center; align-items:center; p{font-size:1.5em;line-height: 1.4; span{font-size:0.8em;} } div.qrbox{width:152px; margin-left:50px;} } } } div.spbox{width:430px; margin:0 0 0 62.5%;} } #teaser{ h1{opacity:0; blur:20px;} p{opacity:0; blur:20px;} div.linelink{opacity:0; blur:20px;} } #teaser.starts{ h1{animation:blurIn 0.7s ease-out 0.1s forwards;} p{animation:blurIn 0.75s ease-out 0.8s forwards;} div.linelink{animation:blurIn 0.7s ease-out 1.5s forwards;} } footer{margin-bottom:0;} /*BN*/ div#bnbox{z-index:10; bottom:0; width:373px;} } /************************ SP ************************/ @media (max-width:767px) { .pc{display:none;} .sp{display:block;} } /************************ ANIM ************************/ @keyframes blurIn{ 0%{opacity:0; filter:blur(20px); } 100%{opacity:1; filter:blur(0px); } } /*----------------------------------------------------- 10px = 77% 11px = 85% 12px = 93% 13px = 100% 14px = 108% 15px = 116% 16px = 123.1% 17px = 131% 18px = 138.5% 19px = 146.5% 20px = 153.9% 21px = 161.6% 22px = 167% 23px = 174% 24px = 182% 25px = 189% 26px = 197% ------------------------------------------------------*/