@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, 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;}textarea{font-family:inherit;font-size:100%;font-weight:inherit;font-style:inherit;vertical-align:baseline;margin:0;padding: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;} /* 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;} /*MAIN CONTAINER Set the width to whatever you want the width of your site to be. */ .container{width:100%; max-width:1360px; margin:0 auto; padding:0 6%;} /*SELF CLEARING FLOATS - CLEARFIX METHOD */ .container:after,.row:after,.col:after,.clr:after,.group:after{content:"";display:table;clear:both;} /* DEFAULT ROW STYLES Set bottom padding according to preference */ .row{padding:auto; margin:0 auto;} /* DEFAULT COLUMN STYLES */ .col{display:block;float:left;width:100%;} .reverse .col{float:right;} @media(min-width:769px){ .container{width:1360px; padding:0 60px;} } // COLOR @black:#111111; @white:#FFF; @green:#00D084; @greenD:#00915C; @greenDD:#005334; @greenL:#E1EBE7; @sky:#39CCF9; @blue:#EBF9FE; @blueD:#DFE9ED; @gray:#ddd; @grayD:#666; @grayL:#F9F9F9; @red:#C61213; // LESS @ncc:no-repeat center center; // MIXIN .trans{-webkit-transition:0.3s; transition:0.3s;} .notrans{-webkit-transition:0s; transition:0s;} .fb{font-weight:700;} .tac{text-align:center;} .tar{text-align:right;} .tdn{text-decoration:none;} .tdu{text-decoration:underline;} .bgsc{background-size:cover;} .inline{display:inline-block;} /*BASE*/ html,body{height:100%; width:100%; margin:0;} body{background:@white; color:@black; line-height:1; -webkit-text-size-adjust:100%; font-weight:400; font-style:normal; font-smoothing:antialiased; -webkit-font-smoothing:antialiased; font-family:YakuHanJP,Roboto,"Noto Sans JP","Helvetica Neue",Helvetica,"Droid Sans",Arial,Avenir,Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Sans","ヒラギノ角ゴシック","Meiryo UI","メイリオ",Meiryo,sans-serif;} img{max-width:100%; height:auto; vertical-align:middle;} /*CF*/ .cf:before,.cf:after{content:" ";display:table;}.cf:after{clear:both;}.cf{*zoom:1;} /*LETTER*/ strong{.fb();} .wf{font-family:'Bricolage Grotesque';} .md{font-weight:500;} .arrow{font-family:-apple-system,"system-ui","Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;} .arrow.tri{transform:rotate(-45deg); .inline();} .attention{color:@red;} .fontgray{color:@gray;} .fontsmall{font-size:85%!important;} .fontlarge{font-size:124%!important;} .italic{font-style:italic;} ::selection{background:@green; color:@white;} ::-moz-selection{background:@green; color:@white;} /*LINK*/ a:link{color:@black; .tdu(); .trans();} a:visited{color:@black; .tdu();} a:hover{color:@green; .tdu();} a:active{color:@black; .tdn();} a img{border:none; .tdn(); .trans();} a img:hover{opacity:0.7; .tdn();} /*FADE*/ .fade{opacity:0;} .faded{opacity:0;} .fade.fadeSt{animation:fadeIn 0.85s ease-in-out 0.25s forwards;} .faded.fadeSt{animation:fadeIn 0.85s ease-in-out 0.5s forwards;} /*LOADING*/ div#splash{position:fixed; z-index:20000; top:0; left:0; width:100%; height:100%; pointer-events:none; background:linear-gradient(160deg, rgba(39,142,174,1) 0%, rgba(0,145,92,1) 100%); div.loading{width:100%; position:absolute; top:50%; transform:translateY(-50%);} div.txt{margin:0 auto; .tac(); p{font-size:22px; color:@white; white-space:nowrap; span{opacity:0;} } } } div#splash.start{animation:blackOut 0.7s linear 2.8s forwards; div.txt{ span.s01{animation:fadeIns 0.3s linear 0.2s forwards;} span.s02{animation:fadeIns 0.3s linear 0.3s forwards;} span.s03{animation:fadeIns 0.3s linear 0.4s forwards;} span.s04{animation:fadeIns 0.3s linear 0.5s forwards;} span.s05{animation:fadeIns 0.3s linear 0.6s forwards;} span.s06{animation:fadeIns 0.3s linear 0.7s forwards;} span.s07{animation:fadeIns 0.3s linear 0.8s forwards;} span.s08{animation:fadeIns 0.3s linear 0.9s forwards;} span.s09{animation:fadeIns 0.3s linear 1.0s forwards;} span.s10{animation:fadeIns 0.3s linear 1.1s forwards;} span.s11{animation:fadeIns 0.3s linear 1.2s forwards;} span.s12{animation:fadeIns 0.3s linear 1.3s forwards;} span.s13{animation:fadeIns 0.3s linear 1.4s forwards;} span.s14{animation:fadeIns 0.3s linear 1.5s forwards;} span.s15{animation:fadeIns 0.3s linear 1.6s forwards;} span.s16{animation:fadeIns 0.3s linear 1.7s forwards;} span.s17{animation:fadeIns 0.3s linear 1.8s forwards;} span.s18{animation:fadeIns 0.3s linear 1.9s forwards;} span.s19{animation:fadeIns 0.3s linear 2.0s forwards;} span.s20{animation:fadeIns 0.3s linear 2.1s forwards;} } } /*SP NAV*/ button.spmenu{z-index:9998; position:fixed; top:43px; right:41px; height:32px; width:32px; .trans(); background-color:transparent; border:none; cursor:pointer; outline:none; padding:0; appearance:none; border-radius:50%; border:1px solid @white; span{position:absolute; left:30%; width:40%; height:2px; background-color:@white; .inline(); .trans(); border-radius:4px;} span:nth-of-type(1){top:11px;} span:nth-of-type(2){top:17px;} } button.spmenu.fixed{border:1px solid @black; span{background-color:@black;} } button.spmenu:hover{background:@white; border:1px solid @white; mix-blend-mode:normal; span{background-color:@black;} } button.spmenu.active{position:fixed; background-color:@black; border:1px solid @black; mix-blend-mode:normal; span{background-color:@white;} span:nth-of-type(1){-webkit-transform:translateY(3px) rotate(30deg); transform:translateY(3px) rotate(30deg);} span:nth-of-type(2){-webkit-transform:translateY(-3px) rotate(-30deg); transform:translateY(-3px) rotate(-30deg);} } div#spnav{z-index:9990; position:fixed; top:0; right:0; width:100%; height:100%; opacity:0; background:#E1EAE7; .trans(); overflow-y:auto; -webkit-overflow-scrolling:touch; visibility:hidden; div.bg{z-index:9991; width:100%; height:100%; position:absolute; right:0; top:0;} header{width:calc(~'100% - 40px'); padding:19px; margin:24px 0 0 20px; 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; h1{width:100px; margin:0;} div.ctabtn{margin:0 46px 0 0; a{display:block; width:fit-content; font-size:14px; border:1px solid @black; border-radius:42px; padding:7px 12px 8.5px;} a:link{color:@black; .tdn();} a:visited{color:@black; .tdn();} a:hover{color:@white; .tdn(); background:@green; border:1px solid @green} a:active{color:@black; .tdn();} } } nav{padding:160px 39px 0; ul{ li{font-size:16px; margin:0 0 32px; a:link{color:@black; .tdn();} a:visited{color:@black; .tdn();} a:hover{color:@green; .tdn();} a:active{color:@black; .tdn();} } } } } div#spnav.active{top:0; right:0; opacity:1; -moz-transform:translateX(0); -webkit-transform:translateX(0); transform:translateX(0); visibility:visible;} /*HEADER*/ header#header{z-index:1000; position:fixed; top:24px; left:20px; width:calc(~'100% - 40px'); padding:19px; background:rgba(255,255,255,0); .trans(); 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; h1{width:100px; margin:0; img{.trans();} } div.ctabtn{margin:0 46px 0 0; a{display:block; width:fit-content; font-size:14px; border:1px solid @white; border-radius:42px; padding:7px 12px 8.5px;} a:link{color:@white; .tdn();} a:visited{color:@white; .tdn();} a:hover{color:@black; .tdn(); background:@white; border:1px solid @white;} a:active{color:@white; .tdn();} } } header#header.fixed{background:rgba(255,255,255,0.3); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); border-radius:12px; h1{ img{filter:brightness(0);} } div.ctabtn{ a{border:1px solid @black;} a:link{color:@black; .tdn();} a:visited{color:@black; .tdn();} a:hover{color:@black; .tdn(); background:@white; border:1px solid @white;} a:active{color:@black; .tdn();} } } .home{ header#header{ h1.sitelogo{opacity:0; pointer-events:none; .trans();} } header#header.fixed{ h1.sitelogo{opacity:1; pointer-events:auto;} } } .single{ button.spmenu{border:1px solid @black; span{background-color:@black;} } button.spmenu.active{ span{background-color:@white;} } header#header{ h1{ img{filter:brightness(0);} } div.ctabtn{ a{border:1px solid @black;} a:link{color:@black; .tdn();} a:visited{color:@black; .tdn();} a:hover{color:@black; .tdn(); background:@white; border:1px solid @white;} a:active{color:@black; .tdn();} } } } /*TOP KV*/ div.topteaser{z-index:1; position:relative; overflow:hidden; width:100%; height:100%; margin:0; background:url("../img/bg/kv_sp.jpg") @ncc; .bgsc(); div.topslider{z-index:3; position:relative; width:100%; height:100%; div.playbtnsp{position:absolute; top:88px; right:41px; cursor:pointer; border:1px solid @white; border-radius:42px; padding:7px 50px 8px; .trans(); img{width:14px; margin:0;} span{color:@white; .fb(); padding:0 0 0 5px;} } div.playbtnsp:hover{background:@white; img{filter:brightness(0);} span{color:@black;} } div.logo{position:absolute; bottom:6%; left:6%; width:88%; color:@white; h1{margin:0 0 20px;} h2{font-size:20px; margin:0 0 20px; line-height:1.5;} p{font-size:14px; line-height:1.8; margin:0 0 20px;} div.topnews{position:relative; z-index:2; background:@white; padding:12px 6%; border-radius:12px; h2{color:@black; margin:0 0 8px; line-height:1;} article{ div.postdata{margin:0 0 4px; 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; span.postdate{font-size:13px; color:@grayD; .md(); white-space:nowrap;} span.postcat{font-size:12px; color:@grayD; .md(); border:1px solid @gray; border-radius:8px; padding:5px 10px; white-space:nowrap;} span.postnew{font-size:13px; color:@red; .md(); white-space:nowrap;} } h3{font-size:14px; line-height:1.8; .md(); color:@black;} a:link{.tdn();} a:visited{.tdn();} a:hover{.tdn();} a:active{.tdn();} } } } } div.mask{z-index:2; position:absolute; top:0; left:0; width:100%; height:100%; background:url('../img/bg/dot.png'); opacity:0.2;} video{position:absolute; z-index:1; top:50%; left:50%; transform:translate(-50%,-50%); width:177.77777778vh; height:56.25vw; min-height:100%; min-width:100%;} } /*LAYOUT*/ main{position:relative; clear:both; display:block;} /*COMMON BTN*/ div.morebtn{width:220px; margin:0; .fb(); font-size:16px; a{position:relative; display:block; padding:20px 24px; border-radius:64px; background:linear-gradient(160deg, #39ccf9 0%, #00d084 100%); em{position:absolute; right:9%; top:16px; background:@white; color:@green; .trans(); border-radius:50%; width:26px; height:26px; line-height:26px; display:block; .tac();} } a:link{color:@white; .tdn();} a:visited{color:@white; .tdn();} a:hover{color:@white; .tdn(); opacity:0.65; em{background:@white; color:@green; transform:rotate(360deg);} } a:active{color:@white; .tdn();} } div.whtver{ a{border:1px solid @white; background:none; em{color:@black; .trans();} } a:link{color:@white; .tdn();} a:visited{color:@white; .tdn();} a:hover{color:@green; .tdn(); background:@white; opacity:1; em{background:@green; color:@white; transform:rotate(360deg);} } a:active{color:@white; .tdn();} } /*TOP*/ div.topintro{position:relative; z-index:1; padding:72px 0 112px; background:url("../img/bg/intro_sp.jpg") @ncc; .bgsc(); article{color:@white; h2{font-size:30px; line-height:1.7; margin:0 0 40px;} p{font-size:15px; line-height:2; margin:0 0 40px;} div.morebtn{margin:0 0 64px;} div.imgbox.pc{display:none;} div.imgbox{ display:flex; -webkit-flex-flow:row wrap; flex-flow:row wrap; -webkit-justify-content:space-between; justify-content:space-between; -webkit-align-items:flex-start; align-items:flex-start; img{display:block;} img:first-child{width:70%; margin:0 0 6%;} img:nth-child(2){width:52%; margin:30% 0 6%;} img:nth-child(3){width:42%;} img:last-child{width:88%; margin:0 0 0 auto;} } } } div.topoffice{position:relative; z-index:3; margin-top:-30px; border-radius:20px 20px 0 0; background:#DFE9ED; padding:80px 0 64px; article{ section:first-child{padding:0 6%; h2{font-size:18px; line-height:1.6; margin:0 0 16px;} h3{font-size:32px; line-height:1.4; margin:0 0 32px;} p{font-size:15px; line-height:1.8; margin:0 0 32px;} } section:nth-child(2){margin:0 0 40px;} img{} } } div.sliderrow{display:-ms-grid; -ms-grid-columns:min-content; overflow:hidden; -webkit-backface-visibility:hidden; backface-visibility:hidden; ul{display:flex; min-width:100%; width:min-content; overflow:hidden; will-change:transform,animation; -webkit-backface-visibility:hidden; backface-visibility:hidden; transform:translate3d(0,0,0); li{position:relative; width:192px; height:auto; padding:0 8px; will-change:transform,animation; -webkit-backface-visibility:hidden; backface-visibility:hidden; transform:translate3d(0,0,0);} li.mt1{margin-top:20px;} li.mt2{margin-top:40px;} } ul.start{animation:sliderAnimation 33s linear infinite;} } div.ttl{margin:0 0 40px; h2{font-size:24px; margin:0 0 10px;} p{font-size:14px; color:@sky;} } div.topaccess{position:relative; z-index:1; background:#d2dfe6; section:last-child{padding:56px 6%; h3{font-size:26px; line-height:1.6; margin:0 0 32px;} p{font-size:15px; line-height:1.8;} } } div.topfacility{position:relative; z-index:1; background:@blueD; section:last-child{padding:56px 6% 110px; h3{font-size:26px; line-height:1.6; margin:0 0 32px;} p{font-size:15px; line-height:1.8;} } } div.topvoice{position:relative; z-index:2; margin-top:-30px; border-radius:20px; background:@grayL; article{padding:80px 0 110px; h2{font-size:24px; line-height:1.6; .tac(); margin:0 0 35px;} } } ul#vlist{padding:0 0 32px; margin:0 0 56px; li.vsg{position:relative; padding:24px; margin:5px 15px; background:@white; box-shadow:0 0 6px rgba(0,0,0,0.1); border-radius:12px; div.vbox{ section{margin:0 0 24px; 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;} h3{width:66%; margin:0 0 0 5%; span{font-size:12px; color:@grayD; display:block; margin:0 0 10px;} strong{font-size:16px;} } img{width:29%; border-radius:50%;} p{font-size:14px; line-height:1.9;} } } .slick-list{padding:0 15% 0!important;} .slick-dots{width:100%; text-align:center;} } .slick-dots{position:absolute;bottom:0;display:block;width:100%;padding:0;margin:0;list-style:none;text-align:left} .slick-dots li,.slick-dots li button{width:8px;height:8px;cursor:pointer;} .slick-dots li{position:relative;display:inline-block;margin:0 8px 0;padding:0} .slick-dots li button{font-size:0;line-height:0;display:block;padding:0;color:transparent;border:0;outline:0;background:none;} .slick-dots li button:focus,.slick-dots li button:hover{outline:0} .slick-dots li button:focus:before,.slick-dots li button:hover:before{opacity:1} .slick-dots li button:before{content:'';background:@gray;position:absolute;top:0;left:0;width:8px;height:8px; border-radius:50%;} .slick-dots li.slick-active button:before{background:@green} div.bnbox{margin:0 auto; padding:48px 24px; border-radius:20px; width:88%; background:linear-gradient(#e5faf2 0%, #ebf9fe 100%); h3{font-size:20px; line-height:1.6; .tac(); margin:0 0 16px;} div.morebtn{margin:0 auto;} } div.topsight{position:relative; z-index:1; margin-top:-30px; padding:110px 0 110px; background:url("../img/bg/sight_sp.jpg") @ncc; .bgsc(); div.sliderrow{margin:0 0 54px; ul{ li{width:198px; height:auto; padding:0 8px;} } ul.start{animation:sliderAnimationR 27s linear infinite;} } section:last-child{padding:0 6%; color:@white; div.ttlbox{margin:0 0 40px; h2{font-size:42px; margin:0 0 10px;} p{font-size:14px;} } p{font-size:15px; line-height:1.8; margin:0 0 40px;} } } div.topapply{position:relative; z-index:3; margin-top:-30px; padding:64px 0; border-radius:20px; background:linear-gradient(160deg, rgba(39,142,174,1) 0%, rgba(0,145,92,1) 100%); article{padding:0 6%; margin:0 0 20px; section:first-child{margin:0 0 32px;} section{color:@white; div.ttlbox{margin:0 0 40px; h2{font-size:42px; margin:0 0 10px;} p{font-size:14px;} } p{font-size:15px; line-height:1.8; margin:0 0 48px;} } } div.ticker{width:100%; z-index:1; position:relative; overflow:hidden; white-space:nowrap; padding:0; pointer-events:none; ul{.inline(); animation:hscroll 150s linear infinite; opacity:0.1; li{.inline(); font-size:100px; color:@white; .fb(); padding:0 0 20px;} } } } /*PAGETTL*/ div.pagettl{padding:152px 0 102px; color:@white; div.container{opacity:0; animation:fadeIn 0.85s ease-in-out 0.25s forwards;} div.bread{margin:0 0 30px; font-size:13px; a:link{color:@white; .tdn();} a:visited{color:@white; .tdn();} a:hover{color:@gray; .tdu();} a:active{color:@white; .tdn();} } h2{font-size:36px; line-height:1.5; letter-spacing:1px; .fb(); margin:0 0 12px;} h3{font-size:15px; .fb();} p{font-size:14px; line-height:2.2; margin:40px 0 0;} } div.pnav{opacity:0; animation:fadeIn 0.85s ease-in-out 0.5s forwards;} .category{ div.pagettl{background:@white url("../img/bg/news.jpg") @ncc; .bgsc();} } .page-sightseeing{ div.pagettl{background:@white url("../img/bg/sightseeing.jpg") @ncc; .bgsc();} } .page-office{ div.pagettl{background:@white url("../img/bg/office.jpg") @ncc; .bgsc();} } .page-about{ div.pagettl{background:@white url("../img/bg/about.jpg") @ncc; .bgsc();} } div.subttl{margin:0 0 40px; h3{font-size:40px; margin:0 0 10px; div{font-size:14px; .fb(); color:@white; background:@green; width:fit-content; .inline(); padding:10px 15px; border-radius:12px; vertical-align:middle; margin-left:15px;} } p.gr{color:@green;} } div.ltttl{ h3{font-size:24px;} } div.newspage{background:@white; margin-top:-30px; border-radius:20px 20px 0 0; padding:56px 0 0;} div.newsbox{width:100%;} div.newsselect{background:@greenL; padding:20px; width:calc(~'50% + 50vw'); overflow-x:scroll; margin:0 0 56px; ul{padding:20px 0; overflow-x:scroll; width:fit-content; display:flex; -webkit-flex-flow:row nowrap; flex-flow:row nowrap; -webkit-justify-content:space-between; justify-content:space-between; -webkit-align-items:flex-start; align-items:flex-start; li{margin:0 15px 0 0; a{background:@white; .fb(); .tdn(); padding:16px; border-radius:48px; white-space:nowrap; color:@black;} a:hover{background:linear-gradient(160deg, #39ccf9 0%, #00d084 100%); color:@white;} } } ul.pc{display:none;} } div.newslists{margin:0 0 110px;} ul.newslist{margin:0 0 64px; li{padding:0 0 30px; margin:0 0 30px; border-bottom:1px solid @gray; div.postdata{margin:0 0 20px; 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; span.postdate{font-size:13px; color:@grayD; .md();} span.postcat{font-size:12px; color:@grayD; .md(); border-radius:8px; padding:5px 10px; background:@greenL;} span.postnew{font-size:13px; color:@red; .md();} } h3{font-size:16px; line-height:1.7; .fb();} a:link{.tdn();} a:visited{.tdn();} a:hover{.tdn();} a:active{.tdn();} } li:last-child{margin:0;} } div.newsttl{padding:152px 0 72px; color:@black; div.container{opacity:1; animation:none;} div.bread{margin:0 0 30px; font-size:13px; color:@grayD; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; a:link{color:@green; .tdn();} a:visited{color:@green; .tdn();} a:hover{color:@green; .tdu();} a:active{color:@green; .tdn();} } h2{font-size:26px; margin:0 0 32px;} div.postdata{ 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; span.postdate{font-size:13px; color:@grayD; .md();} span.postcat{font-size:12px; color:@grayD; .md(); border-radius:8px; padding:5px 10px; background:@greenL;} span.postnew{font-size:13px; color:@red; .md();} } } div.pagebody{ article.newssingle{position:relative; padding:0; margin:0 auto 110px; div.postbody{word-wrap:break-word; line-height:2; margin:0 0 64px; h4{font-size:24px; color:@black; line-height:1.8; letter-spacing:1px; margin:0 0 32px; .fb();} img{margin:0 0 32px;} p{color:@black; margin:0 0 32px; font-size:16px; a::after{content:" →"; transform: rotate(-45deg); .inline();} } p > img{margin-bottom:0;} p:last-child{margin-bottom:0;} a{.fb();} ul.p-single-file__list{ li{ div{.inline(); font-size:16px; img{margin:0 5px 0 0;} } } } } div.pagenavs{font-size:14px; border-bottom:1px solid @gray; border-top:1px solid @gray; padding:32px 0; 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; div{width:32%;} div:nth-child(2){.tac(); .fb();} div:last-child{.tar();} a:link{color:@black; .tdn();} a:visited{color:@black; .tdn();} a:hover{color:@green; .tdn();} a:active{color:@black; .tdn();} } } .nhdg{font-size:26px; line-height:1.7; margin:0 0 32px; .fb();} .ntxt{font-size:15px; line-height:2.1;} table{font-size:15px; width:100%; tr{border-bottom:1px solid @gray; width:100%; th{width:100%; display:block; color:@greenDD; .fb(); text-align:left; padding:24px 0 16px;} td{width:100%; display:block; padding:0 0 24px; line-height:1.8; a{display:block; margin:0 0 12px;} a:hover{color:#bbb;} a:last-child{margin:0;} } } tr:last-child{border-bottom:none;} } } section.innerbody{padding:0 6%;} /*ABOUT*/ article.introbox{background:@white; margin-top:-30px; border-radius:20px 20px 0 0; padding:80px 0 0; div.bgbox{width:100%; height:320px; background:url("../img/bg/myoko.jpg") @ncc; .bgsc(); margin:64px 0;} } article.myokobox{padding:0 0 110px; section.myokobody{ section:first-child{padding:0 6% 48px; h3{font-size:16px; line-height:1.8; margin:0 0 10px; .fb();} } } } ul.mlist{padding:0 0 0 6%; li.msg{margin:80px 15px 0 0; position:relative; .trans();} li.msg.slick-current{margin:0 15px 0 0!important;} .slick-prev{bottom:0px; right:calc(~'6% + 128px');} .slick-next{bottom:0px; right:calc(~'6% + 70px');} .slick-list{padding:0 15% 0 0!important;} } section.pointbox{border-radius:12px; background:#E1EBE7; margin:64px auto 0; padding:40px 6%; h3{font-size:20px; line-height:1.7; .fb(); .tac(); color:@greenD; margin:0 0 24px;} ul{ li{background:@white; border-radius:12px; padding:24px 6%; margin:0 0 16px; span{font-size:70px; .tac(); display:block; margin:0 0 22px;} h4{font-size:18px; margin:0 0 12px; line-height:1.7; .tac(); .fb();} p{margin:0 0 12px; .tac();} p:last-child{text-align:left; line-height:1.8; margin:0;} } li:last-child{margin:0;} } } article.satebox{background:@greenL; margin-top:-30px; border-radius:20px 20px 0 0; padding:80px 0 88px; h2{font-size:20px; line-height:1.7; .fb(); .tac(); color:@greenD; margin:0 0 56px;} section.satebody{ section:first-child{padding:0 6% 48px; h3{font-size:16px; line-height:1.8; margin:0 0 10px; .fb();} } } ul.mlist{padding:0 6% 0 0; .slick-prev{bottom:0px; left:calc(~'6% + 70px');} .slick-next{bottom:0px; left:calc(~'6% + 128px');} .slick-list{padding:0 0 0 15%!important;} } } article.howtobox{background:@greenL; padding:0 0 80px; border-radius:0 0 20px 20px; section.howtobody{ section{padding:0 6% 30px;} } ul{margin:0 0 56px; li{margin:0 0 48px; div.mask{padding:24px 6% 0; h5{font-size:18px; .fb(); margin:0 0 12px;} p{line-height:1.8;} } } li:last-child{margin:0;} } } article.ivpbox{padding:80px 0 0; div.container{ p:first-child{.fb(); font-size:18px; line-height:1.7; .tac(); margin:0 0 10px;} } section.ivpbody{padding:30px 0 0; strong{font-size:16px; margin:0 0 15px; line-height:1.5; display:block;} } div.graphbox{width:100%; overflow:hidden; position:relative; div.graphin{width:100%; background:#FAFAFA; padding:48px 6% 0; border-radius:12px;} div.overflowbox{width:100%; overflow:hidden; overflow-x:scroll;} div.overflowimg{width:200%; overflow:hidden; overflow-x:scroll; padding:0 0 48px;} h4{font-size:20px; line-height:1.7; .fb(); .tac(); color:@greenD; margin:0 0 30px;} } section.supbody{padding:80px 0 110px; div.supcon{background:#FAFAFA; padding:32px 6%; margin:0 0 40px; border-radius:12px; h5{font-size:18px; .fb(); color:@greenD; margin:0 0 24px;} p{line-height:1.8; margin:0 0 12px; span{display:block; color:#666; font-size:12px;} em{.fb(); color:@greenD;} } p:last-child{margin:0;} } } } article.casebox{background:#DFE9ED; margin-top:-30px; border-radius:20px 20px 0 0; padding:80px 0 88px; section.caseinner{padding:0 6% 48px; h4.nhdg{margin:0 0 12px;} } div.pictbox{width:100%; overflow:hidden; position:relative; margin:0 0 72px; div.pictin{width:100%; background:#fff; padding:48px 6% 0; border-radius:12px;} div.overflowbox{width:100%; overflow:hidden; overflow-x:scroll;} div.overflowimg{width:200%; overflow:hidden; overflow-x:scroll; padding:0 0 48px;} } } div.slidebox{ div.slidebody{ div.ltttl{margin:0 0 32px 6%;} } } div.slidebg{background:#F5FAFC; border-radius:30px 0 0 30px; padding:48px 0 48px 0; margin:0 0 0 6%; width:94%;} ul.splist{padding:0 0 80px 6%; margin:0; li.spsg{margin:0 30px 0 0; position:relative; div.mask{padding:24px 0 0; h5{font-size:16px; line-height:1.6; .fb();} p{line-height:1.8; margin:15px 0 0;} } } .slick-prev{bottom:0px; right:86px;} .slick-next{bottom:0px; right:24px;} .slick-list{padding:0 6% 0 0!important;} } article.urbox{background:#DFE9ED; padding:0 0 118px; section.urbody{margin:0 0 86px; section:first-child{padding:0 6% 40px;} h4.nhdg{margin:0 0 12px;} } div.ticker{width:100%; z-index:1; position:relative; overflow:hidden; white-space:nowrap; padding:0; pointer-events:none; ul{.inline(); animation:hscrollrev 150s linear infinite; opacity:0.3; padding:0 20px 0 0; li{.inline(); font-size:100px; color:@white; .fb(); padding:0;} } } div.sliderrow{position:relative; z-index:2; margin-top:-30px;} } article.case02{background:@white; div.slidebg{background:@greenL;} } article.gamabox{padding:0 0 118px; section.gamabody{margin:0 0 86px; section:first-child{padding:0 6% 40px;} h4.nhdg{margin:0 0 12px;} } div.gbox{position:relative; img{position:relative; z-index:1;} span{position:absolute; z-index:2; background:@green; color:@white; .fb(); border-radius:42px; padding:15px 20px; top:6%; left:6%;} } div.ticker{width:100%; z-index:1; position:relative; overflow:hidden; white-space:nowrap; padding:0; pointer-events:none; ul{.inline(); animation:hscrollrev 150s linear infinite; opacity:0.3; padding:0 20px 0 0; li{.inline(); font-size:100px; color:#E1EBE7; .fb(); padding:0;} } } div.sliderrow{position:relative; z-index:2; margin-top:-30px;} } /*OFFICE*/ article.officebox{background:@greenL; margin-top:-30px; border-radius:20px 20px 0 0; padding:67px 0 56px; section.officebody{ section:first-child{padding:0 6% 48px;} section:last-child{margin:0 0 56px;} } div.ticker{width:100%; z-index:1; position:relative; overflow:hidden; white-space:nowrap; padding:0; pointer-events:none; ul{.inline(); animation:hscrollrev 150s linear infinite; opacity:0.1; padding:0 20px 0 0; li{.inline(); font-size:100px; color:@greenDD; .fb(); padding:0;} } } div.sliderrow{position:relative; z-index:2; margin-top:-30px;} } article.outlinebox{background:@greenL; padding:0 0 80px; border-radius:0 0 20px 20px; section.outlinebody{padding:56px 0 80px 6%; div.txtbox{background:@white; border-radius:20px 0 0 20px; padding:20px 6%;} } h4{color:@greenD; font-size:24px; line-height:1.8; margin:0 0 40px; .tac(); .fb();} ul.tokutenbox{ li{margin:0 0 40px; img{margin:0 0 24px;} p{margin:0 0 30px; line-height:1.8;} } } } ul#tlist{padding:0 0 32px; margin:0; li.tsg{position:relative; margin:0 15px;} .slick-list{padding:0 15% 0!important;} .slick-dots{width:100%; text-align:center;} .slick-dots li button:before{content:'';background:@white;} .slick-dots li.slick-active button:before{background:@green} } article.accessbox{padding:80px 0 64px; section.accessbody{padding:0 0 56px; section:first-child{padding:0 6% 48px; p{margin:0 0 40px;} } } div.ticker{width:100%; z-index:1; position:relative; overflow:hidden; white-space:nowrap; padding:0; pointer-events:none; ul{.inline(); animation:hscrollrev 150s linear infinite; opacity:0.4; padding:0 20px 0 0; li{.inline(); font-size:100px; color:@greenL; .fb(); padding:0;} } } div.sliderrow{position:relative; z-index:2; margin-top:-30px;} } article.resortbox{padding:0 0 96px; section:first-child{padding:0 6% 48px; h3{font-size:18px; margin:0 0 5px; .fb();} p{margin:0 0 30px;} img{width:330px; margin:0 auto; display:block;} } } article.facilitybox{padding:80px 0 110px 6%; border-radius:20px 20px 0 0; background:@blueD; div.spbg{padding:48px 0 48px 6%; border-radius:20px 0 0 20px; background:#F5FAFC; h4{padding-right:6%;} p{margin:0 0 32px; padding-right:6%;} } } ul#wlist{padding:0 0 80px; .slick-prev{bottom:0px; right:calc(~'6% + 58px');} .slick-next{bottom:0px; right:6%;} .slick-list{padding:0 15% 0 0!important;} li.wsg{margin:0 15px 0 0; position:relative; img{position:relative; width:100%; height:100%; z-index:1;} div.wmask{position:absolute; width:100%; height:100%; z-index:2; color:@white; h5{font-size:14px; line-height:1.8; .tac(); .fb(); padding:18% 0 24px;} p{font-size:12px; line-height:1.8;} span.vm{position:absolute; right:6%; bottom:6%; border-radius:50%; border:1px solid @white; padding:12px 0 0; width:56px; height:56px; line-height:1.1; .tac(); display:block; .wf(); .fb();} } div.ov{opacity:0; .trans();} } li.wsg:hover{ div.ov{z-index:3; padding:6%; color:@black; opacity:1; background:rgba(223,233,237,0.9); -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px);} } } .slick-prev,.slick-next{z-index:100; font-size:0; line-height:0; padding:0; width:48px; height:48px; position:absolute; display:block; cursor:pointer; color:transparent; border:none; outline:none; background:transparent;} .slick-prev::before,.slick-next::before{position:relative; display:block; font-size:18px; line-height:48px; height:48px; width:48px; opacity:1; border-radius:50%;} .slick-prev::before{content:'←'; background:#ddd; color:@black; .arrow();} .slick-next::before{content:'→'; background:#ddd; color:@black; .arrow();} .slick-prev:hover::before{background:linear-gradient(160deg, #39ccf9 0%, #00d084 100%); color:@white;} .slick-next:hover::before{background:linear-gradient(160deg, #39ccf9 0%, #00d084 100%); color:@white;} div.topvoicealt{border-radius:20px; z-index:2; article{padding-bottom:68px;} } article.moneybox{z-index:1; margin-top:-30px; padding:110px 0 80px; border-radius:0 0 20px 20px; background:url("../img/bg/money.jpg") @ncc; .bgsc(); h3{color:@greenD; font-size:24px; line-height:1.8; margin:0 0 40px; .tac(); .fb();} div.tablebox{background:@white; padding:40px 6% 20px; border-radius:20px; margin:0 0 40px; h4{font-size:16px; color:@green; margin:0 0 10px;} h5{font-size:20px; .fb(); margin:0 0 12px;} } div.tablebox:last-child{margin:0;} } article.flowbox{padding:80px 0 110px;} ul#flist{padding:0 0 33px; margin:0; .slick-prev{top:-84px; right:calc(~'6% + 58px');} .slick-next{top:-84px; right:6%;} .slick-list{padding:0 6% 0!important;} li.flowsg{position:relative; margin:0 8px; padding:0 0 33px;} li.flow1::before{position:absolute; bottom:0; left:0; width:calc(~'200% + 16px'); background:#39CCF9; padding:5px 0; content:"約2週間〜1ヶ月"; color:@white; .fb(); .tac();} li.flow3::before{position:absolute; bottom:0; left:0; width:calc(~'200% + 16px'); background:#39CCF9; padding:5px 0; content:"約1ヶ月"; color:@white; .fb(); .tac();} li.flow5::before{position:absolute; bottom:0; left:0; width:calc(~'200% + 16px'); background:#39CCF9; padding:5px 0; content:"約3ヶ月"; color:@white; .fb(); .tac();} li.flow7::before{position:absolute; bottom:0; left:0; width:calc(~'200% + 16px'); background:#39CCF9; padding:5px 0; content:"約2週間〜1ヶ月"; color:@white; .fb(); .tac();} } /*SIGHTSEEING*/ article.sightbox{background:@grayL; margin-top:-30px; border-radius:20px; padding:67px 0 110px; ul{ li{margin:0 0 48px; a{.fb(); .tdn(); border-radius:12px; section{position:relative; border-radius:12px; margin:0 0 20px; overflow:hidden;} img{position:relative; border-radius:12px;} div{position:absolute; bottom:6%; right:6%; border-radius:50%; width:40px; height:40px; line-height:40px; font-size:18px; .tac(); background:linear-gradient(160deg, #39ccf9 0%, #00d084 100%);} h3{font-size:18px; margin:0 0 12px;} } a:hover{ img{transform:scale(1.05); opacity:1;} } } } } /*PAGENAVI div.pagenavi{margin:0;} div.wp-pagenavi{.md(); span{width:40px; height:40px; line-height:38px; .inline(); border:1px solid @green; background:@green; color:@white; border-radius:50%; margin:0 0.5em; .tac();} span:first-child{margin:0 0.5em 0 0;} span:last-child{margin:0 0 0 0.5em;} a:first-child{margin:0 0.5em 0 0;} a:last-child{margin:0 0 0 0.5em;} a{width:40px; height:40px; line-height:38px; .inline(); border-radius:50%; border:1px solid @grayD; margin:0 0.5em; .tac();} a:link{color:@grayD; .tdn();} a:visited{color:@grayD; .tdn();} a:hover{color:@white; background:@green; border:1px solid @green; .tdn();} a:active{color:@grayD; .tdn();} }*/ /*FOOTER*/ footer{position:relative; z-index:10; padding:80px 0 0; border-radius:20px 20px 0 0; background:@greenL; margin-top:-30px; /*div.footcta{position:absolute; z-index:3; top:-186px; left:6%; width:88%; background:@black; border-radius:12px; div{ section{ h2{font-size:40px; margin:0 0 10px;} h3{font-size:14px; margin:0 0 30px;} p{font-size:15px; line-height:1.8; margin:0 0 22px;} span{display:block; border:1px solid @white; border-radius:50%; width:80px; height:80px; margin:0 0 0 auto; .trans();} em{display:block; font-size:24px; line-height:80px; .tac(); .trans();} } } a{display:block; padding:56px 6%;} a:link{color:@white; .tdn();} a:visited{color:@white; .tdn();} a:hover{color:@white; .tdn(); opacity:0.7; span{ em{transform:rotate(360deg);} } } a:active{color:@white; .tdn();} }*/ div.footbox{margin:0 6% 48px; h1{width:120px; margin:0 0 32px;} nav{ ul{ li{font-size:14px; margin:0 0 24px; a:link{color:@black; .tdn();} a:visited{color:@black; .tdn();} a:hover{color:@green; .tdn();} a:active{color:@black; .tdn();} } } } } div.address{padding:0 6% 48px; border-bottom:1px solid @gray; h2{font-size:15px; margin:0 0 10px;} p{font-size:14px; line-height:1.7;} } div.copy{padding:24px 6%; small{display:block; color:#ccc; font-size:13px;} } div.logos{margin:0 0 30px; 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{.fb(); .wf(); color:#ccc; padding:0 15px 0 0;} a{width:80px;} } } /*MODAL*/ div.topmodal{position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.85); z-index:9999; overflow:hidden!important; -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px); div.mov{width:94%; margin:0 auto; display:block; position:absolute; top:50%; left:50%; transform:translateY(-50%) translateX(-50%); -webkit-transform:translateY(-50%) translateX(-50%);} } div.modalclose{position:absolute; top:4.5%; right:4.5%; width:36px; display:block; cursor:pointer;} /****************************************************/ /************************ PC ************************/ /****************************************************/ @media(min-width:769px){ html,body{min-width:1360px;} .sp{display:none!important;} /*LOADING*/ div#splash{ div.txt{ p{font-size:36px;} } } /*SP NAV*/ button.spmenu{top:68px; right:100px; height:48px; width:48px; span{left:13px; width:20px;} span:nth-of-type(1){top:18.5px;} span:nth-of-type(2){top:24.5px;} } div#spnav{background:rgba(0,0,0,0.7); div.bg{width:400px; background:#E1EAE7;} header{width:100%; padding:28px 40px 0 0; margin:40px 0 0; -webkit-justify-content:flex-end; justify-content:flex-end; div.ctabtn{margin:0 124px 0 0; a{font-size:17px; border-radius:42px; padding:13.5px 24px 14.5px; span{font-size:16px;} } } } nav{padding:104px 0 0 94px; ul{ li{font-size:16px; margin:0 0 28px;} } } } /*HEADER*/ header#header{padding:28px 40px; top:40px; left:60px; width:calc(~'100% - 120px'); h1{width:152px;} div.ctabtn{margin:0 64px 0 0; a{font-size:17px; border-radius:42px; padding:13.5px 24px 14.5px; span{font-size:16px;} } } } /***header#header.fixed{width:40%; main-width:520px; left:auto; right:60px;} ***/ /*TOP KV*/ div.topteaser{background:url("../img/bg/kv_pc.jpg") @ncc; .bgsc(); min-width:1080px; div.topslider{ div.logo{position:absolute; bottom:96px; left:6%; width:fit-content; h1{width:560px;} h2{font-size:28px; margin:0 0 20px; line-height:1; white-space:nowrap;} p{font-size:18px; letter-spacing:1px; margin:0 0 48px; line-height:1; white-space:nowrap;} div.topnews{padding:12px 6%; width:800px; 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; h2{font-size:24px; margin:0 15px 0 0;} article{ 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; div.postdata{margin:0;} h3{margin:0 0 0 15px;} } } } div.playbtn{position:absolute; bottom:96px; right:6%; width:160px; height:160px; cursor:pointer; border:1px solid @white; border-radius:50%; .tac(); .trans(); img{width:38px; display:block; margin:46px 0 15px 65px;} span{color:@white; .tac(); font-size:15px; padding-left:3px;} } div.playbtn:hover{background:@white; img{filter:brightness(0);} span{color:@black;} } } } /*COMMON BTN*/ div.morebtn{width:240px; a{padding:22px 32px; em{ top:17px;} } } /*TOP*/ div.topintro{padding:190px 0; background:url("../img/bg/intro_pc.jpg") @ncc; .bgsc(); background-attachment:fixed; margin-top:-30px; border-radius:20px 20px 0 0; article{ section{width:560px; margin:0 auto 160px;} h2{font-size:40px; margin:0 0 64px;} p{font-size:18px; letter-spacing:1px; margin:0 0 64px;} div.morebtn{margin:0;} div.imgbox.pc{display:flex; width:960px; margin:0 auto; img:first-child{width:420px; margin:0 0 6% 87px;} img:nth-child(2){width:270px; margin:30% 87px 0 0;} img:nth-child(3){width:280px; margin:-20px 0 0;} img:last-child{width:520px; margin:96px 0 0;} } } } div.topoffice{border-radius:30px 30px 0 0; padding:80px 0 120px; article{margin:0 0 64px; display:flex; -webkit-align-items:center; align-items:center; section{width:50%;} section:first-child{padding:0 6%; h2{font-size:20px; line-height:1; margin:0 0 12px;} h3{font-size:40px; line-height:1; margin:0 0 48px;} p{font-size:16px; line-height:2; margin:0 0 48px;} } section:nth-child(2){margin:0 0 40px;} img{} } } div.sliderrow{ ul{ li{width:290px; padding:0 10px;} li.mt1{margin-top:40px;} li.mt2{margin-top:80px;} } ul.start{animation:sliderAnimation 24s linear infinite;} } div.ttl{margin:0 0 80px;} div.topaccess{ article{display:flex; section{width:50%;} } section:last-child{padding:134px 6% 0; h3{font-size:32px; margin:0 0 40px;} p{font-size:16px; line-height:2;} } } div.topfacility{background:@blue; article{display:flex; section{width:50%;} } section:last-child{padding:134px 6% 0; h3{font-size:32px; margin:0 0 40px;} p{font-size:16px; line-height:2;} } } div.topvoice{border-radius:30px; article{padding:120px 0 126px; h2{font-size:34px; line-height:1; margin:0 0 48px;} } } ul#vlist{margin:0 0 112px; li.vsg{padding:24px 32px; margin:5px 16px;} } div.bnbox{width:72%; padding:60px; 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; h3{font-size:26px; line-height:1.6; text-align:left; margin:0;} div.morebtn{margin:0;} } div.topsight{padding:180px 0; background:url("../img/bg/sight_pc.jpg") @ncc; .bgsc(); background-attachment:fixed; article{display:flex; -webkit-flex-flow:row-reverse nowrap; flex-flow:row-reverse nowrap; -webkit-justify-content:space-between; justify-content:space-between; -webkit-align-items:center; align-items:center; section{width:50%;} } div.sliderrow{margin:0; ul{ li{width:352px; padding:0 16px;} } ul.start{animation:sliderAnimation 30s linear infinite;} } section:last-child{padding:0 6%; color:@white; div.ttlbox{margin:0 0 48px; h2{font-size:58px;} } p{font-size:16px; line-height:2; margin:0 0 48px;} } } div.topapplybg{background:@white; position:relative;} div.topapply{position:relative; padding:112px 0 80px; border-radius:30px 30px 0 0; article{padding:0 6%; margin:0; z-index:5; position:relative; display:flex; -webkit-flex-flow:row-reverse nowrap; flex-flow:row-reverse nowrap; -webkit-justify-content:space-between; justify-content:space-between; -webkit-align-items:center; align-items:center; section:first-child{width:44%; margin:0;} section{width:50%; div.ttlbox{margin:0 0 48px; h2{font-size:58px;} } p{font-size:16px; line-height:2; margin:0 0 64px;} } } div.ticker{margin-top:-60px; ul{animation:hscroll 150s linear infinite; li{font-size:140px; padding:0 0 30px;} } } } /*PAGETTL*/ div.pagettl{padding:270px 0 196px; min-width:1080px; div.bread{margin:0 0 50px; font-size:15px;} h2{font-size:60px; letter-spacing:2px; margin:0 0 15px;} h3{margin:0 0 50px;} p{font-size:16px; margin:0;} } div.subttl{margin:0 0 48px; h3{font-size:58px;} } div.ltttl{ h3{font-size:24px;} } div.newspage{background:@white; margin-top:-30px; border-radius:30px 30px 0 0; padding:120px 0 150px;} div.newsbox{width:100%; display:flex; -webkit-flex-flow:row nowrap; flex-flow:row nowrap; -webkit-justify-content:space-between; justify-content:space-between; -webkit-align-items:flex-start; align-items:flex-start; } div.newsselect{padding:0; width:297px; overflow-x:hidden; margin:0; border-radius:20px; box-shadow:2px 2px 10px rgba(0,0,0,0.1); ul{padding:40px; overflow-x:hidden; width:100%; display:block; li{margin:0 0 30px; font-size:15px; a{background:none; padding:0; border-radius:0; color:@black; font-weight:normal;} a:hover{background:none; color:@green;} } li:last-child{margin:0;} } ul{ li{font-size:16px; margin:0 0 24px; a{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; p{line-height:1;} em.arrow{font-size:14px; background:@white; color:@black; width:26px; height:26px; line-height:26px; .tac(); border-radius:50%; .trans();} } a{.tdn();} a:hover{.fb(); em{background:linear-gradient(160deg, #39ccf9 0%, #00d084 100%); color:@white;} } } li:last-child{margin:0;} } ul.pc{display:block;} } div.newslists{margin:0; width:calc(~'100% - 427px');} ul.newslist{margin:0 0 64px; li{padding:0 0 40px; margin:0 0 40px; border-bottom:1px solid @gray; h3{font-size:16px; line-height:1.7; .md();} } li:last-child{margin:0;} } div.newsttl{padding:270px 0 120px; div.container{opacity:1;} div.bread{margin:0 0 56px; font-size:15px;} h2{font-size:50px; margin:0 0 36px;} div.postdata{ span.postdate{font-size:18px;} span.postcat{font-size:16px;} span.postnew{font-size:18px;} } } div.pagebody{ article.newssingle{margin:0 auto 150px; div.postbody{max-width:960px ;margin:0 auto 96px; h4{font-size:22px; margin:0 0 32px;} img{margin:0 0 32px;} img.alignleft + br{display:none;} img.alignright + br{display:none;} img.nomargin{margin-bottom:0;} img.width50{max-width:50%; height:auto;} .size-thumbnail{width:320px; height:auto;} .size-medium{width:320px; height:auto;} .size-large{width:600px; height:auto;} .aligncenter{clear:both; display:block; overflow:hidden; margin: 0 auto 32px;} .alignleft{float:left; margin:0 32px 32px 0; .inline();} .alignright{float:right; margin:0 0 32px 32px; .inline();} p{font-size:16px; margin:0 0 32px;} } div.pagenavs{font-size:16px; padding:56px 0;} } .nhdg{font-size:32px; margin:0 0 48px;} .ntxt{font-size:16px;} table{font-size:16px; tr{ th{width:auto; display:table-cell; font-size:18px; padding:40px 24px 40px 0;} td{width:auto; display:table-cell; padding:40px 0; a{margin:0 0 12px;} } } } } /*ABOUT*/ article.introbox{padding:120px 0 0; div.bgbox{width:100%; height:700px; background:url("../img/bg/myoko.jpg") @ncc; .bgsc(); background-attachment:fixed; margin:96px 0 112px;} section{width:fit-content; margin:0 auto; h3.nhdg{font-size:40px; line-height:2; letter-spacing:3px;} p.ntxt{font-size:18px; line-height:2.1;} } } article.myokobox{padding:0 0 146px; section.myokobody{ display:flex; -webkit-flex-flow:row nowrap; flex-flow:row nowrap; -webkit-justify-content:space-between; justify-content:space-between; -webkit-align-items:flex-start; align-items:flex-start; section{width:50%;} section:first-child{padding:0 6%; h3{font-size:20px; line-height:1.8; margin:0 0 10px; .fb();} h4.nhdg{font-size:40px; letter-spacing:3px;} p.ntxt{line-height:2.1;} } } } ul.mlist{ .slick-prev{bottom:0px; right:calc(~'9% + 128px');} .slick-next{bottom:0px; right:calc(~'9% + 70px');} } section.pointbox{border-radius:20px; margin:80px auto 0; padding:48px 60px; h3{font-size:26px; line-height:1; margin:0 0 32px;} ul{display:flex; li{padding:32px 16px; margin:0 auto; width:23.5%; span{font-size:70px; .tac(); display:block; margin:0 0 22px;} h4{font-size:18px; margin:0 0 12px; line-height:1.7; .tac(); .fb();} p{margin:0 0 12px; .tac(); line-height:1.6;} } li:last-child{margin:0 auto;} } } article.satebox{padding:120px 0 118px; h2{font-size:40px; margin:0 0 64px;} section.satebody{ display:flex; -webkit-flex-flow:row-reverse nowrap; flex-flow:row-reverse nowrap; -webkit-justify-content:space-between; justify-content:space-between; -webkit-align-items:flex-start; align-items:flex-start; section{width:50%;} section:first-child{padding:0 6%; h3{font-size:20px; line-height:1.8; margin:0 0 10px; .fb();} h4.nhdg{font-size:40px; letter-spacing:3px;} p.ntxt{line-height:2.1;} } } ul.mlist{ .slick-prev{bottom:0px; left:calc(~'9% + 70px');} .slick-next{bottom:0px; left:calc(~'9% + 128px');} } } article.howtobox{padding:0 0 120px; section.howtobody{margin:0 0 96px; display:flex; section{width:50%; padding:6% 6% 0; div.sticky{position:sticky; top:6%; left:0;} } } ul{width:50%; margin:0; li{margin:0; position:relative; div.mask{padding:6%; position:absolute; color:@white; bottom:0; left:0; z-index:2; h5{font-size:18px; .fb(); margin:0 0 12px;} p{line-height:1.8;} } img{z-index:1; position:relative;} } } } article.ivpbox{padding:96px 0 0; div.container{ p:first-child{font-size:20px; line-height:1; margin:0 0 20px;} h2.nhdg{font-size:40px; letter-spacing:3px;} } section.ivpbody{margin:0 0 96px; display:flex; section{width:50%;} strong{font-size:20px;} } div.graphbox{width:88%; margin:0 auto; div.graphin{padding:56px 90px 72px; border-radius:12px;} div.overflowbox{width:100%; overflow:hidden; overflow-x:hidden;} div.overflowimg{width:100%; overflow:hidden; overflow-x:hidden; padding:0;} h4{font-size:20px; line-height:1; margin:0 0 40px;} } section.supbody{padding:80px 0 140px; div.supflex{ display:flex; align-items:center;} section{width:50%;} section:last-child{padding:0 0 0 6%;} div.supcon{background:#FAFAFA; padding:32px 6%; margin:0; border-radius:12px; h5{font-size:18px; .fb(); color:@greenD; margin:0 0 24px;} p{line-height:1.8; margin:0 0 12px; span{display:block; color:#666; font-size:12px;} em{.fb(); color:@greenD;} } } } } article.casebox{padding:96px 0 120px; section.caseinner{padding:0 9% 64px; h4.nhdg{margin:0 0 12px;} } div.flex{ display:flex; -webkit-flex-flow:row nowrap; flex-flow:row nowrap; -webkit-justify-content:space-between; justify-content:space-between; -webkit-align-items:flex-start; align-items:flex-start; h4{width:30%; margin:0;} p{width:70%;} } div.pictbox{width:88%; margin:0 auto 96px; div.pictin{padding:48px 160px 0;} div.overflowbox{overflow-x:hidden;} div.overflowimg{width:100%; overflow-x:hidden; padding:0 0 48px;} } } div.slidebox{ div.slidebody{ div.ltttl{margin:0 0 64px 6%;} } } div.slidebg{margin:0 0 0 9%; width:91%; padding:64px 0;} ul.splist{ li.spsg{ div.mask{ h5{font-size:20px;} p{font-size:14px;} } } .slick-prev{top:-108px; bottom:auto; right:86px;} .slick-next{top:-108px; bottom:auto; right:24px;} .slick-list{padding:0 6% 0 0!important;} } article.urbox{padding:0 0 118px; section.urbody{margin:0 0 86px; display:flex; -webkit-flex-flow:row-reverse nowrap; flex-flow:row-reverse nowrap; -webkit-justify-content:space-between; justify-content:space-between; -webkit-align-items:center; align-items:center; section:first-child{padding:0 6% 40px;} h4.nhdg{margin:0 0 12px;} } div.ticker{ ul{animation:hscrollrev 150s linear infinite; padding:0 30px 0 0; li{font-size:140px;} } } div.sliderrow{margin-top:-50px;} } article.case02{background:@white; div.slidebg{background:@greenL;} } article.gamabox{padding:0 0 138px; section.gamabody{margin:0 0 86px; display:flex; -webkit-flex-flow:row-reverse nowrap; flex-flow:row-reverse nowrap; -webkit-justify-content:space-between; justify-content:space-between; section{width:50%;} section:first-child{width:50%; padding:6% 6% 40px; div.sticky{position:sticky; top:6%; left:0;} } h4.nhdg{margin:0 0 12px;} } div.gbox{ span{font-size:16px;} } div.ticker{ ul{animation:hscrollrev 150s linear infinite; padding:0 30px 0 0; li{font-size:140px;} } } div.sliderrow{margin-top:-50px;} } /*OFFICE*/ div.pnav{position:absolute; right:0; top:240px; padding:40px 60px; background:@white; width:388px; border-radius:20px 0 0 20px; ul{ li{font-size:16px; margin:0 0 24px; a{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; p{line-height:1;} em.arrow{background:@gray; color:@black; width:26px; height:26px; line-height:26px; .tac(); border-radius:50%; transform:rotate(90deg); .trans();} } a{.tdn();} a:hover{.fb(); em{background:linear-gradient(160deg, #39ccf9 0%, #00d084 100%); color:@white;} } } li.ll a p{line-height:1.4;} li:last-child{margin:0;} } } article.officebox{padding:120px 0 80px; section.officebody{margin:0 0 96px; 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; section:first-child{width:50%; padding:0 3% 0 6%; h4{white-space:nowrap;} } section:last-child{width:50%; margin:0;} } div.ticker{ ul{animation:hscrollrev 150s linear infinite; padding:0 30px 0 0; li{font-size:140px;} } } div.sliderrow{margin-top:-50px;} } article.outlinebox{padding:0 0 80px; section.innerbody{width:66%; margin:0 auto;} section.outlinebody{padding:80px 0 96px 6%; display:flex; -webkit-flex-flow:row nowrap; flex-flow:row nowrap; -webkit-justify-content:space-between; justify-content:space-between; -webkit-align-items:flex-start; align-items:flex-start; div.ttl{padding:80px 0 0;} div.txtbox{width:64%; padding:80px 6% 60px;} } h4{font-size:32px; margin:0 0 48px;} ul.tokutenbox{ display:flex; -webkit-flex-flow:row nowrap; flex-flow:row nowrap; -webkit-justify-content:space-between; justify-content:space-between; -webkit-align-items:flex-start; align-items:flex-start; li{width:47%; margin:0 0 80px; img{margin:0 0 32px;} p{margin:0 0 32px;} } } } article.accessbox{padding:120px 0 112px; section.accessbody{padding:0 0 56px; display:flex; -webkit-flex-flow:row-reverse nowrap; flex-flow:row-reverse nowrap; -webkit-justify-content:space-between; justify-content:space-between; -webkit-align-items:flex-start; align-items:flex-start; section:first-child{width:50%; padding:0 6%; p{margin:0 0 48px;} } section:last-child{width:50%;} } div.ticker{ ul{animation:hscrollrev 150s linear infinite; padding:0 30px 0 0; li{font-size:140px;} } } div.sliderrow{margin-top:-50px;} } article.resortbox{padding:0 0 120px; display:flex; -webkit-flex-flow:row nowrap; flex-flow:row nowrap; -webkit-justify-content:space-between; justify-content:space-between; -webkit-align-items:flex-start; align-items:flex-start; section:first-child{width:50%; padding:0 3% 0 6%; h3{font-size:20px;} p{margin:0 0 40px;} img{width:340px; margin:0;} } section:last-child{width:50%;} } article.facilitybox{position:relative; padding:120px 0 150px 15%; section.facilitybody{width:50%; position:absolute; top:240px; left:6%; pointer-events:none; h4.nhdg{margin:0 0 18px;} } div.spbg{padding:160px 0 168px 50%;} } ul#wlist{padding:0 0 80px; .slick-prev{bottom:0px; right:calc(~'6% + 58px');} .slick-next{bottom:0px; right:6%;} .slick-list{padding:0 15% 0 0!important;} li.wsg{margin:0 15px 0 0;} li.wsg{ div.wmask{ h5{font-size:16px; line-height:1.9; letter-spacing:1px; padding:36% 0 24px;} p{font-size:14px; line-height:2.2;} span.vm{padding:21px 0 0; font-size:16px; width:80px; height:80px;} } div.ov{opacity:0; z-index:3; .trans(); padding:6%; color:@black; background:rgba(223,233,237,0.9); -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px);} } li.wsg:hover{ div.ov{opacity:1;} } } div.topvoicealt{border-radius:20px; z-index:2; article{padding-bottom:30px;} } article.moneybox{z-index:1; margin-top:-30px; padding:136px 0 120px; background:url("../img/bg/money.jpg") @ncc; .bgsc(); background-attachment:fixed; h3{font-size:34px; margin:0 0 64px;} div.tablebox{padding:64px 6% 40px; margin:0 0 48px; h4{font-size:20px; margin:0 0 15px;} h5{font-size:26px; margin:0 0 48px;} } } article.flowbox{padding:120px 0 150px;} ul#flist{padding:0 0 64px; .slick-list{padding:0 6% 0!important;} } /*SIGHTSEEING*/ article.sightbox{padding:120px 0 150px; ul{display:flex; -webkit-flex-flow:row nowrap; flex-flow:row nowrap; -webkit-justify-content:space-between; justify-content:space-between; -webkit-align-items:flex-start; align-items:flex-start; li{width:47%; margin:0; a{ section{margin:0 0 20px;} div{bottom:7.5%; right:4%; border-radius:36px; width:auto; height:48px; line-height:48px; font-size:16px; padding:0 18px; span{font-size:16px; color:@white; .fb(); .wf();} } h3{font-size:18px; margin:0 0 12px;} } a:hover{ img{transform:scale(1.05); opacity:1;} } } } } /*FOOTER*/ footer{padding:88px 0 0; border-radius:30px 30px 0 0; /*div.footcta{top:-186px; div{ 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; section{ h2{font-size:50px; margin:0 0 10px;} h3{font-size:14px; margin:0 0 40px;} p{font-size:16px; line-height:2; margin:0;} span{width:120px; height:120px; margin:0 0 0 auto;} em{font-size:36px; line-height:120px;} } } a{padding:64px 80px;} }*/ div.footbox{margin:0 6% 32px; 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; h1{width:144px;} nav{ ul{ display:flex; -webkit-flex-flow:row nowrap; flex-flow:row nowrap; -webkit-justify-content:flex-end; justify-content:flex-end; -webkit-align-items:center; align-items:center; li{margin:0 0 0 48px;} } } } div.address{padding:0 6% 80px;} div.copy{padding:32px 6%; 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; small{text-align:right;} } div.logos{margin:0;} } /*MODAL*/ div.topmodal{position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.85); z-index:9999; overflow:hidden!important; -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px); div.mov{width:66%; margin:0 auto; display:block; position:absolute; top:50%; left:50%; transform:translateY(-50%) translateX(-50%); -webkit-transform:translateY(-50%) translateX(-50%);} } div.modalclose{position:absolute; top:4.5%; right:4.5%; width:50px; display:block; cursor:pointer;} } /************************ SP ************************/ @media (max-width:768px){ .pc{display:none;} .spmb{margin-bottom:6%;} } /************************ VIDEO ************************/ div.video_box{position:relative; overflow:hidden; padding-bottom:56.25%; height:0;} div.video_box iframe,div.video_box object,div.video_box embed{position:absolute; top:0; left:0; width:100%; height:100%} /************************ ANIM ************************/ @keyframes fadeIn{ 0%{opacity:0; transform:translate(0,12px);} 100%{opacity:1; transform:translate(0,0px);} } @keyframes fadeIns{ 0%{opacity:0;} 100%{opacity:1;} } @keyframes blackOut{ 0%{opacity:1; top:0;} 99%{opacity:0; top:0;} 100%{opacity:0; top:-200%;} } @keyframes sliderAnimation{ 100%{transform:translateX(-50%);} } @keyframes sliderAnimationR{ 0%{transform:translateX(-50%);} 100%{transform:translateX(0%);} } @keyframes hscroll{ 0%{transform:translateX(4px);} 100%{transform:translateX(-100%);} } @keyframes hscrollrev{ 0%{transform:translateX(-100%);} 100%{transform:translateX(4%);} }