@charset "utf-8"; /* Theme Name: 湯沢中里 Theme URI: https://www.yuzawa-nakazato.com/ Description: 湯沢中里 Version: 1.00β Author: 湯沢中里 Author URI: https://www.yuzawa-nakazato.com/ */ /* reset CSS html5doctor.com Reset Stylesheet v1.6.1 Last Updated: 2010-09-17 Author: Richard Clark - http://richclarkdesign.com Twitter: @rich_clark */ html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,abbr, address, cite, code,del, dfn, em, img, ins, kbd, q, samp,small, strong, sub, sup, var,b, i,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary,time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;} body { line-height:1;} article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { display:block;} nav ul { list-style:none;} blockquote, q { quotes:none;} blockquote:before, blockquote:after,q:before, q:after { content:''; content:none;} a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent;} /* change colours to suit your needs */ ins { background-color:#ff9; color:#000; text-decoration:none;} /* change colours to suit your needs */ mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold;} del { text-decoration: line-through;} abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help;} table { border-collapse:collapse; border-spacing:0;} /* change border colour to suit your needs */ hr { display:block; height:1px; border:0; border-top:1px solid #cccccc; margin: 1em 0; padding:0;} input, select { vertical-align:middle;} /*--- base ---*/ * { margin:0px; padding:0px;} html { font-size: 87.5%;} body { -ms-overflow-x: hidden; overflow-x: hidden; font-family: 'Open Sans',"Hiragino Maru Gothic W4 JIS2004", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 500; line-height: 1.7; text-align: left; color:#231815; -webkit-text-size-adjust: 100%; font-size: 100%;} h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight: normal;} img { border:0; vertical-align:bottom;} li { list-style:none;} table { border:none; border-collapse:collapse; font-size:100%;} table caption { display:none;} td,th { text-align:left; line-height: 1.5;} a,a img { outline: none; -moz-transition: all .2s ease-in-out; -webkit-transition: all .1s ease-in-out; -o-transition: all .1s ease-in-out; -ms-transition: all .1s ease-in-out; transition: all .1s ease-in-out;} a:link,a:visited { text-decoration: none; color: #231815;} a:active,a:hover { text-decoration: none; color: #231815; opacity: 0.5;} a:link img,a:visited img { } a:active img,a:hover img { opacity: 0.8;} a.noOp:active,a.noOp:hover { opacity: 1;} a.noOp:active img,a.noOp:hover img { opacity: 1;} img { max-width: 100%; height: auto;} video { max-width: 100%; height: auto;} img[src$=".svg"] { width: 100%;} object { pointer-events: none;} /*--- loader ---*/ #loader { width: 141px; height: 12px; display: none; position: fixed; _position: absolute; top: 50%; left: 50%; margin-top: -30px; margin-left: -70px; z-index: 100;} #fade { width: 100%; height: 100%; display: none; background-color: #FFFFFF; position: absolute; top: 0px; left: 0px; z-index: 50;} #container { display: none;} .lt-ie9 #container,.ie9 #container { display/***/: block\9;} /*--- header ---*/ header { position: fixed; top: 0; left: 0; z-index: 60; width: 100%; height: 48px;} #winterIndexBody header.visible { opacity: 1;} #summerIndexBody header.visible { opacity: 1;} header #title { position: absolute; top: 8px; left: 3.125%; } header #title img { width: auto; height: 40px; } #fixedNav { display: none; } #spMenu { width: 48px; height: 48px; position: fixed; top: 0; right: 0; padding: 10px 0 0; box-sizing: border-box; z-index: 10001;} #spMenu span { display: block; width: 30px; height: 3px; margin-left: 10px; margin-top: 4px; background: #000F3A; -moz-transition: all .2s ease-in-out; -webkit-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; -ms-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } #spMenu.active #spMenu01 { -webkit-transform: translateY(7px) translateX(0) rotate(45deg); -ms-transform: translateY(7px) translateX(0) rotate(45deg); transform: translateY(7px) translateX(0) rotate(45deg);} #spMenu.active #spMenu02 { -webkit-transform: translateY(0) translateX(0) rotate(-45deg); -ms-transform: translateY(0) translateX(0) rotate(-45deg); transform: translateY(0) translateX(0) rotate(-45deg);} #spMenu.active #spMenu03 { display: none;} nav { display: none; position: absolute; top: 56px; left: 0; width: 100%; max-height: calc( 100vh - 56px ); color: #000F3A; overflow: auto;} nav > ul { background: rgba(255,255,255,0.95); padding-left: 40%;} nav > ul > li { overflow: hidden; clear: both;} nav > ul > li > span, nav > ul > li > a { font-weight: bold; display: block; color: #000F3A; padding: 8px; cursor: pointer; color: #000F3A;} nav > ul > li ul { display: none; } nav > ul > li li a { display: block; padding: 0.5em 8px 0.5em 2em; position: relative; color: #000F3A;} nav > ul > li li a:after { content: '・'; display: block; position: absolute; top: 0.5em; left: 1em; } /*.enLinkSP { background: #FFF; background: rgba(255,255,255,0.95); text-align: center; padding: 16px 0;}*/ .langNav { background: rgba(255,255,255,0.95); padding: 16px 0 16px 40%; letter-spacing: -0.4em;} .langNav li { display: inline-block; letter-spacing: normal; border: #CCC 1px solid; margin: 0 8px; } .langNav li a { padding: 0;} /*--- footer ---*/ footer { position: relative; overflow: hidden; clear: both; background: url(images/footer_winter_bg.jpg) 50% 0 no-repeat; background-size: cover; color: #0B3960;} .summer footer, .summer-season footer { background: url(images/footer_summer_bg.jpg) 50% 0 no-repeat; background-size: cover; color: #0B3960;} footer a { color: #0B3960 !important;} #footerWrapper { padding: 64px 3.125% 32px; } #footerTitle { text-align: center; padding: 0 0 33px;} #footerTitle img { width: 142px; } #footerSec01 { overflow: hidden; clear: both; } #footerAccess { color: #0B3960; text-align: center;} #footerAccess li { width: 48.5%; float: left; padding: 56px 0 0; margin: 0 0 16px; background-position: 50% 0; background-repeat: no-repeat; } #footerAccess li:nth-child(2n) { float: right;} #footerAccess li#footerAccessMap { background-image: url(images/footer_icon_map.png);} #footerAccess li#footerAccessTrain { background-image: url(images/footer_icon_train.png);} #footerAccess li#footerAccessTrain02 { background-image: url(images/footer_icon_train02.png);} #footerAccess li#footerAccessCar { background-image: url(images/footer_icon_car.png);} #footerAccess li dl { border-top: #0B3960 solid 1px; padding: 8px 0 0; } #footerAccess li dt { font-weight: bold; font-size: 100%; padding: 0 0 6px; margin: 0 0 6px; border-bottom: #0B3960 solid 1px;} #footerAccess li dd { font-size: 85.7%;} .footerTel { display: inline-block; padding: 0 0 0 18px; font-size: 121.4%; font-weight: bold; background: url(images/footer_icon_tel.png) 0 50% no-repeat; } #footerSec02 { overflow: hidden; clear: both; padding: 28px 0 24px; border-top: #0B3960 solid 1px;} #footerSec02L { float: left; width: 50%; overflow: hidden; padding: 0 0 24px;} #footerSec02R { float: left; width: 50%; overflow: hidden;} .footerSec02Dome { overflow: hidden; position: relative;} .footerSec02Dome a { display: block; background: #FFF;} .footerSec02Dome a img { float: left; width: 33%; } .footerSec02Dome a span { display: block; position: absolute; top: 50%; right: 10px; width: calc( 67% - 20px ); transform: translateY(-50%) translateX(0); font-size: 114.3%; font-weight: bold;} #footerSec02 dl { overflow: hidden;} #footerSec02 dt { font-size: 114.3%; font-weight: bold;} #footerSec02 dd { } #footerSec03 { overflow: hidden; clear: both; padding: 24px 0 140px; border-top: #0B3960 solid 1px;} #footerSec03L { overflow: hidden; box-sizing: border-box; padding: 0 0 24px 0; margin: 0 0 32px; border-bottom: #0B3960 solid 1px;} #footerSec03R { overflow: hidden; box-sizing: border-box; padding: 0 0 0; margin: 0 0 0;} .footerSec03Logo { text-align: center; padding: 0 0 8px;} #footerSec03L .footerSec03Logo img { width: auto; height: 40px; } #footerSec03R .footerSec03Logo img { width: auto; height: 24px; } #footerSec03 dt { font-weight: bold; font-size: 114.3%; line-height: 1.2; padding: 0 0 12px; text-align: center;} #footerSec03 dd li { position: relative; padding-left: 1em; float: left; width: 50%; box-sizing: border-box;} #footerSec03 dd li:before { content: "・"; display: block; position: absolute; top: 0.1em; left: 0; } footer small { clear: both; display: block; font-weight: bold; text-align: center; line-height: 1.2;} #footerWinterTrain { position: absolute; bottom: 80px; left: 50%; margin-left: -850px; height: 48px;} #footerWinterSnowman { position: absolute; bottom: 80px; right: 10px; width: 30%;} .summer #footerWinterSnowman, .summer-season #footerWinterSnowman { display: none;} /*--- loader ---*/ #loadingBg { position: fixed; left: 0; top: 0; width: auto; min-width: 100%; height: auto; min-height: 100%; background: #ffffff; opacity: 0.95; z-index: 10000;} #loading { position: fixed; top: 50%; left: 5%; width: 90%; padding: 20px; margin: -70px 0 0; box-sizing: border-box; z-index: 10000;} #loading #percent { margin-bottom: 5px; text-align: center;} #loading #gauge { width: 0px; height: 2px; -webkit-transition: all .1s ease-in-out; transition: all .1s ease-in-out; } .loader, .loader:before, .loader:after { width: 0; height: 0; border-style: solid; border-width: 0 20px 34.6px 20px; border-color: transparent transparent #bfd3ac transparent; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation: load7 1.2s infinite ease-in-out; animation: load7 1.2s infinite ease-in-out; -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; } .loader { color: #000; font-size: 10px; margin: 10px auto; position: relative; text-indent: -9999em; -webkit-animation-delay: -0.2s; animation-delay: -0.2s;} .loader:before, .loader:after { content: ''; position: absolute; top: 0;} .loader:before { left: -64px; -webkit-animation-delay: -0.4s; animation-delay: -0.4s;} .loader:after { left: 24px;} @-webkit-keyframes load7 { 0%, 80%, 100% { opacity: 0; } 40% { opacity: 1; }} @keyframes load7 { 0%, 80%, 100% { opacity: 0; } 40% { opacity: 1; }} /*--- general ---*/ .fs10 { font-size: 71.4% !important;} .fs11 { font-size: 78.6% !important;} .fs12 { font-size: 85.70% !important;} .fs13 { font-size: 92.90% !important;} .fs14 { font-size: 100.00% !important;} .fs15 { font-size: 107.10% !important;} .fs16 { font-size: 114.30% !important;} .fs17 { font-size: 121.40% !important;} .fs18 { font-size: 128.60% !important;} .fs19 { font-size: 135.70% !important;} .fs20 { font-size: 142.90% !important;} .fs21 { font-size: 150.00% !important;} .fs22 { font-size: 157.10% !important;} .fs23 { font-size: 164.30% !important;} .fs24 { font-size: 171.40% !important;} .fs25 { font-size: 178.60% !important;} .fs26 { font-size: 185.70% !important;} .fs27 { font-size: 192.90% !important;} .fs28 { font-size: 200.00% !important;} .fs29 { font-size: 207.10% !important;} .fs30 { font-size: 214.30% !important;} .fs31 { font-size: 221.40% !important;} .fs32 { font-size: 228.60% !important;} .fs33 { font-size: 235.70% !important;} .fs34 { font-size: 242.90% !important;} .fs35 { font-size: 250.00% !important;} .fs36 { font-size: 257.10% !important;} .fs37 { font-size: 264.30% !important;} .fs38 { font-size: 271.40% !important;} .fs39 { font-size: 278.60% !important;} .fs40 { font-size: 285.70% !important;} .fs41 { font-size: 292.90% !important;} .fs42 { font-size: 300.00% !important;} .fs43 { font-size: 307.10% !important;} .fs44 { font-size: 314.30% !important;} .fs45 { font-size: 321.40% !important;} .fs46 { font-size: 328.60% !important;} .fs47 { font-size: 335.70% !important;} .fs48 { font-size: 342.90% !important;} .fs49 { font-size: 350.00% !important;} .fs50 { font-size: 357.10% !important;} .fs51 { font-size: 364.30% !important;} .fs52 { font-size: 371.40% !important;} .fs53 { font-size: 378.60% !important;} .fs54 { font-size: 385.70% !important;} .fs55 { font-size: 392.90% !important;} .fs56 { font-size: 400.00% !important;} .fs57 { font-size: 407.10% !important;} .fs58 { font-size: 414.30% !important;} .fs59 { font-size: 421.40% !important;} .fs60 { font-size: 428.60% !important;} .fs61 { font-size: 435.70% !important;} .fs62 { font-size: 442.90% !important;} .fs63 { font-size: 450.00% !important;} .fs64 { font-size: 457.10% !important;} .fs65 { font-size: 464.30% !important;} .fs66 { font-size: 471.40% !important;} .fs67 { font-size: 478.60% !important;} .fs68 { font-size: 485.70% !important;} .fs69 { font-size: 492.90% !important;} .fs70 { font-size: 500.00% !important;} .fs71 { font-size: 507.10% !important;} .fs72 { font-size: 514.30% !important;} .fs73 { font-size: 521.40% !important;} .fs74 { font-size: 528.60% !important;} .fs75 { font-size: 535.70% !important;} .fs76 { font-size: 542.90% !important;} .fs77 { font-size: 550.00% !important;} .fs78 { font-size: 557.10% !important;} .fs79 { font-size: 564.30% !important;} .fs80 { font-size: 571.40% !important;} .mB6 { margin-bottom: 6px !important; } .mB7 { margin-bottom: 7px !important; } .mB8 { margin-bottom: 8px !important; } .mB9 { margin-bottom: 9px !important; } .mB10 { margin-bottom: 10px !important; } .mB11 { margin-bottom: 11px !important; } .mB12 { margin-bottom: 12px !important; } .mB13 { margin-bottom: 13px !important; } .mB14 { margin-bottom: 14px !important; } .mB15 { margin-bottom: 15px !important; } .mB16 { margin-bottom: 16px !important; } .mB17 { margin-bottom: 17px !important; } .mB18 { margin-bottom: 18px !important; } .mB19 { margin-bottom: 19px !important; } .mB20 { margin-bottom: 20px !important; } .mB21 { margin-bottom: 21px !important; } .mB22 { margin-bottom: 22px !important; } .mB23 { margin-bottom: 23px !important; } .mB24 { margin-bottom: 24px !important; } .mB25 { margin-bottom: 25px !important; } .mB26 { margin-bottom: 26px !important; } .mB27 { margin-bottom: 27px !important; } .mB28 { margin-bottom: 28px !important; } .mB29 { margin-bottom: 29px !important; } .mB30 { margin-bottom: 30px !important; } .mB31 { margin-bottom: 31px !important; } .mB32 { margin-bottom: 32px !important; } .mB33 { margin-bottom: 33px !important; } .mB34 { margin-bottom: 34px !important; } .mB35 { margin-bottom: 35px !important; } .mB36 { margin-bottom: 36px !important; } .mB37 { margin-bottom: 37px !important; } .mB38 { margin-bottom: 38px !important; } .mB39 { margin-bottom: 39px !important; } .mB40 { margin-bottom: 40px !important; } .mB41 { margin-bottom: 41px !important; } .mB42 { margin-bottom: 42px !important; } .mB43 { margin-bottom: 43px !important; } .mB44 { margin-bottom: 44px !important; } .mB45 { margin-bottom: 45px !important; } .mB46 { margin-bottom: 46px !important; } .mB47 { margin-bottom: 47px !important; } .mB48 { margin-bottom: 48px !important; } .mB49 { margin-bottom: 49px !important; } .mB50 { margin-bottom: 50px !important; } .mB51 { margin-bottom: 51px !important; } .mB52 { margin-bottom: 52px !important; } .mB53 { margin-bottom: 53px !important; } .mB54 { margin-bottom: 54px !important; } .mB55 { margin-bottom: 55px !important; } .mB56 { margin-bottom: 56px !important; } .mB57 { margin-bottom: 57px !important; } .mB58 { margin-bottom: 58px !important; } .mB59 { margin-bottom: 59px !important; } .mB60 { margin-bottom: 60px !important; } .mB61 { margin-bottom: 61px !important; } .mB62 { margin-bottom: 62px !important; } .mB63 { margin-bottom: 63px !important; } .mB64 { margin-bottom: 64px !important; } .mB65 { margin-bottom: 65px !important; } .mB66 { margin-bottom: 66px !important; } .mB67 { margin-bottom: 67px !important; } .mB68 { margin-bottom: 68px !important; } .mB69 { margin-bottom: 69px !important; } .mB70 { margin-bottom: 70px !important; } .mB71 { margin-bottom: 71px !important; } .mB72 { margin-bottom: 72px !important; } .mB73 { margin-bottom: 73px !important; } .mB74 { margin-bottom: 74px !important; } .mB75 { margin-bottom: 75px !important; } .mB76 { margin-bottom: 76px !important; } .mB77 { margin-bottom: 77px !important; } .mB78 { margin-bottom: 78px !important; } .mB79 { margin-bottom: 79px !important; } .mB80 { margin-bottom: 80px !important; } .mB81 { margin-bottom: 81px !important; } .mB82 { margin-bottom: 82px !important; } .mB83 { margin-bottom: 83px !important; } .mB84 { margin-bottom: 84px !important; } .mB85 { margin-bottom: 85px !important; } .mB86 { margin-bottom: 86px !important; } .mB87 { margin-bottom: 87px !important; } .mB88 { margin-bottom: 88px !important; } .mB89 { margin-bottom: 89px !important; } .mB90 { margin-bottom: 90px !important; } .mT6 { margin-top: 6px !important; } .mT7 { margin-top: 7px !important; } .mT8 { margin-top: 8px !important; } .mT9 { margin-top: 9px !important; } .mT10 { margin-top: 10px !important; } .mT11 { margin-top: 11px !important; } .mT12 { margin-top: 12px !important; } .mT13 { margin-top: 13px !important; } .mT14 { margin-top: 14px !important; } .mT15 { margin-top: 15px !important; } .mT16 { margin-top: 16px !important; } .mT17 { margin-top: 17px !important; } .mT18 { margin-top: 18px !important; } .mT19 { margin-top: 19px !important; } .mT20 { margin-top: 20px !important; } .mT21 { margin-top: 21px !important; } .mT22 { margin-top: 22px !important; } .mT23 { margin-top: 23px !important; } .mT24 { margin-top: 24px !important; } .mT25 { margin-top: 25px !important; } .mT26 { margin-top: 26px !important; } .mT27 { margin-top: 27px !important; } .mT28 { margin-top: 28px !important; } .mT29 { margin-top: 29px !important; } .mT30 { margin-top: 30px !important; } .mT31 { margin-top: 31px !important; } .mT32 { margin-top: 32px !important; } .mT33 { margin-top: 33px !important; } .mT34 { margin-top: 34px !important; } .mT35 { margin-top: 35px !important; } .mT36 { margin-top: 36px !important; } .mT37 { margin-top: 37px !important; } .mT38 { margin-top: 38px !important; } .mT39 { margin-top: 39px !important; } .mT40 { margin-top: 40px !important; } .mT41 { margin-top: 41px !important; } .mT42 { margin-top: 42px !important; } .mT43 { margin-top: 43px !important; } .mT44 { margin-top: 44px !important; } .mT45 { margin-top: 45px !important; } .mT46 { margin-top: 46px !important; } .mT47 { margin-top: 47px !important; } .mT48 { margin-top: 48px !important; } .mT49 { margin-top: 49px !important; } .mT50 { margin-top: 50px !important; } .mT51 { margin-top: 51px !important; } .mT52 { margin-top: 52px !important; } .mT53 { margin-top: 53px !important; } .mT54 { margin-top: 54px !important; } .mT55 { margin-top: 55px !important; } .mT56 { margin-top: 56px !important; } .mT57 { margin-top: 57px !important; } .mT58 { margin-top: 58px !important; } .mT59 { margin-top: 59px !important; } .mT60 { margin-top: 60px !important; } .mT61 { margin-top: 61px !important; } .mT62 { margin-top: 62px !important; } .mT63 { margin-top: 63px !important; } .mT64 { margin-top: 64px !important; } .mT65 { margin-top: 65px !important; } .mT66 { margin-top: 66px !important; } .mT67 { margin-top: 67px !important; } .mT68 { margin-top: 68px !important; } .mT69 { margin-top: 69px !important; } .mT70 { margin-top: 70px !important; } .mT71 { margin-top: 71px !important; } .mT72 { margin-top: 72px !important; } .mT73 { margin-top: 73px !important; } .mT74 { margin-top: 74px !important; } .mT75 { margin-top: 75px !important; } .mT76 { margin-top: 76px !important; } .mT77 { margin-top: 77px !important; } .mT78 { margin-top: 78px !important; } .mT79 { margin-top: 79px !important; } .mT80 { margin-top: 80px !important; } .mT81 { margin-top: 81px !important; } .mT82 { margin-top: 82px !important; } .mT83 { margin-top: 83px !important; } .mT84 { margin-top: 84px !important; } .mT85 { margin-top: 85px !important; } .mT86 { margin-top: 86px !important; } .mT87 { margin-top: 87px !important; } .mT88 { margin-top: 88px !important; } .mT89 { margin-top: 89px !important; } .mT90 { margin-top: 90px !important; } .pB6 { padding-bottom: 6px !important;} .pB7 { padding-bottom: 7px !important;} .pB8 { padding-bottom: 8px !important;} .pB9 { padding-bottom: 9px !important;} .pB10 { padding-bottom: 10px !important;} .pB11 { padding-bottom: 11px !important;} .pB12 { padding-bottom: 12px !important;} .pB13 { padding-bottom: 13px !important;} .pB14 { padding-bottom: 14px !important;} .pB15 { padding-bottom: 15px !important;} .pB16 { padding-bottom: 16px !important;} .pB17 { padding-bottom: 17px !important;} .pB18 { padding-bottom: 18px !important;} .pB19 { padding-bottom: 19px !important;} .pB20 { padding-bottom: 20px !important;} .pB21 { padding-bottom: 21px !important;} .pB22 { padding-bottom: 22px !important;} .pB23 { padding-bottom: 23px !important;} .pB24 { padding-bottom: 24px !important;} .pB25 { padding-bottom: 25px !important;} .pB26 { padding-bottom: 26px !important;} .pB27 { padding-bottom: 27px !important;} .pB28 { padding-bottom: 28px !important;} .pB29 { padding-bottom: 29px !important;} .pB30 { padding-bottom: 30px !important;} .pB31 { padding-bottom: 31px !important;} .pB32 { padding-bottom: 32px !important;} .pB33 { padding-bottom: 33px !important;} .pB34 { padding-bottom: 34px !important;} .pB35 { padding-bottom: 35px !important;} .pB36 { padding-bottom: 36px !important;} .pB37 { padding-bottom: 37px !important;} .pB38 { padding-bottom: 38px !important;} .pB39 { padding-bottom: 39px !important;} .pB40 { padding-bottom: 40px !important;} .pB41 { padding-bottom: 41px !important;} .pB42 { padding-bottom: 42px !important;} .pB43 { padding-bottom: 43px !important;} .pB44 { padding-bottom: 44px !important;} .pB45 { padding-bottom: 45px !important;} .pB46 { padding-bottom: 46px !important;} .pB47 { padding-bottom: 47px !important;} .pB48 { padding-bottom: 48px !important;} .pB49 { padding-bottom: 49px !important;} .pB50 { padding-bottom: 50px !important;} .pB51 { padding-bottom: 51px !important;} .pB52 { padding-bottom: 52px !important;} .pB53 { padding-bottom: 53px !important;} .pB54 { padding-bottom: 54px !important;} .pB55 { padding-bottom: 55px !important;} .pB56 { padding-bottom: 56px !important;} .pB57 { padding-bottom: 57px !important;} .pB58 { padding-bottom: 58px !important;} .pB59 { padding-bottom: 59px !important;} .pB60 { padding-bottom: 60px !important;} .pB61 { padding-bottom: 61px !important;} .pB62 { padding-bottom: 62px !important;} .pB63 { padding-bottom: 63px !important;} .pB64 { padding-bottom: 64px !important;} .pB65 { padding-bottom: 65px !important;} .pB66 { padding-bottom: 66px !important;} .pB67 { padding-bottom: 67px !important;} .pB68 { padding-bottom: 68px !important;} .pB69 { padding-bottom: 69px !important;} .pB70 { padding-bottom: 70px !important;} .pB71 { padding-bottom: 71px !important;} .pB72 { padding-bottom: 72px !important;} .pB73 { padding-bottom: 73px !important;} .pB74 { padding-bottom: 74px !important;} .pB75 { padding-bottom: 75px !important;} .pB76 { padding-bottom: 76px !important;} .pB77 { padding-bottom: 77px !important;} .pB78 { padding-bottom: 78px !important;} .pB79 { padding-bottom: 79px !important;} .pB80 { padding-bottom: 80px !important;} .pB81 { padding-bottom: 81px !important;} .pB82 { padding-bottom: 82px !important;} .pB83 { padding-bottom: 83px !important;} .pB84 { padding-bottom: 84px !important;} .pB85 { padding-bottom: 85px !important;} .pB86 { padding-bottom: 86px !important;} .pB87 { padding-bottom: 87px !important;} .pB88 { padding-bottom: 88px !important;} .pB89 { padding-bottom: 89px !important;} .pB90 { padding-bottom: 90px !important;} .pB100 { padding-bottom: 100px !important;} .pB120 { padding-bottom: 120px !important;} .pB148 { padding-bottom: 148px !important;} .pT6 { padding-top: 6px !important;} .pT7 { padding-top: 7px !important;} .pT8 { padding-top: 8px !important;} .pT9 { padding-top: 9px !important;} .pT10 { padding-top: 10px !important;} .pT11 { padding-top: 11px !important;} .pT12 { padding-top: 12px !important;} .pT13 { padding-top: 13px !important;} .pT14 { padding-top: 14px !important;} .pT15 { padding-top: 15px !important;} .pT16 { padding-top: 16px !important;} .pT17 { padding-top: 17px !important;} .pT18 { padding-top: 18px !important;} .pT19 { padding-top: 19px !important;} .pT20 { padding-top: 20px !important;} .pT21 { padding-top: 21px !important;} .pT22 { padding-top: 22px !important;} .pT23 { padding-top: 23px !important;} .pT24 { padding-top: 24px !important;} .pT25 { padding-top: 25px !important;} .pT26 { padding-top: 26px !important;} .pT27 { padding-top: 27px !important;} .pT28 { padding-top: 28px !important;} .pT29 { padding-top: 29px !important;} .pT30 { padding-top: 30px !important;} .pT31 { padding-top: 31px !important;} .pT32 { padding-top: 32px !important;} .pT33 { padding-top: 33px !important;} .pT34 { padding-top: 34px !important;} .pT35 { padding-top: 35px !important;} .pT36 { padding-top: 36px !important;} .pT37 { padding-top: 37px !important;} .pT38 { padding-top: 38px !important;} .pT39 { padding-top: 39px !important;} .pT40 { padding-top: 40px !important;} .pT41 { padding-top: 41px !important;} .pT42 { padding-top: 42px !important;} .pT43 { padding-top: 43px !important;} .pT44 { padding-top: 44px !important;} .pT45 { padding-top: 45px !important;} .pT46 { padding-top: 46px !important;} .pT47 { padding-top: 47px !important;} .pT48 { padding-top: 48px !important;} .pT49 { padding-top: 49px !important;} .pT50 { padding-top: 50px !important;} .pT51 { padding-top: 51px !important;} .pT52 { padding-top: 52px !important;} .pT53 { padding-top: 53px !important;} .pT54 { padding-top: 54px !important;} .pT55 { padding-top: 55px !important;} .pT56 { padding-top: 56px !important;} .pT57 { padding-top: 57px !important;} .pT58 { padding-top: 58px !important;} .pT59 { padding-top: 59px !important;} .pT60 { padding-top: 60px !important;} .pT61 { padding-top: 61px !important;} .pT62 { padding-top: 62px !important;} .pT63 { padding-top: 63px !important;} .pT64 { padding-top: 64px !important;} .pT65 { padding-top: 65px !important;} .pT66 { padding-top: 66px !important;} .pT67 { padding-top: 67px !important;} .pT68 { padding-top: 68px !important;} .pT69 { padding-top: 69px !important;} .pT70 { padding-top: 70px !important;} .pT71 { padding-top: 71px !important;} .pT72 { padding-top: 72px !important;} .pT73 { padding-top: 73px !important;} .pT74 { padding-top: 74px !important;} .pT75 { padding-top: 75px !important;} .pT76 { padding-top: 76px !important;} .pT77 { padding-top: 77px !important;} .pT78 { padding-top: 78px !important;} .pT79 { padding-top: 79px !important;} .pT80 { padding-top: 80px !important;} .pT81 { padding-top: 81px !important;} .pT82 { padding-top: 82px !important;} .pT83 { padding-top: 83px !important;} .pT84 { padding-top: 84px !important;} .pT85 { padding-top: 85px !important;} .pT86 { padding-top: 86px !important;} .pT87 { padding-top: 87px !important;} .pT88 { padding-top: 88px !important;} .pT89 { padding-top: 89px !important;} .pT90 { padding-top: 90px !important;} .pT100 { padding-top: 100px !important;} .pT128 { padding-top: 128px !important;} .pT148 { padding-top: 148px !important;} .pL1em { padding-left: 1em !important; } .pL6 { padding-left: 6px !important;} .pL7 { padding-left: 7px !important;} .pL8 { padding-left: 8px !important;} .pL9 { padding-left: 9px !important;} .pL10 { padding-left: 10px !important;} .pL11 { padding-left: 11px !important;} .pL12 { padding-left: 12px !important;} .pL13 { padding-left: 13px !important;} .pL14 { padding-left: 14px !important;} .pL15 { padding-left: 15px !important;} .pL16 { padding-left: 16px !important;} .pL17 { padding-left: 17px !important;} .pL18 { padding-left: 18px !important;} .pL19 { padding-left: 19px !important;} .pL20 { padding-left: 20px !important;} .pL21 { padding-left: 21px !important;} .pL22 { padding-left: 22px !important;} .pL23 { padding-left: 23px !important;} .pL24 { padding-left: 24px !important;} .pL25 { padding-left: 25px !important;} .pL26 { padding-left: 26px !important;} .pL27 { padding-left: 27px !important;} .pL28 { padding-left: 28px !important;} .pL29 { padding-left: 29px !important;} .pL30 { padding-left: 30px !important;} .pL31 { padding-left: 31px !important;} .pL32 { padding-left: 32px !important;} .pL33 { padding-left: 33px !important;} .pL34 { padding-left: 34px !important;} .pL35 { padding-left: 35px !important;} .pL36 { padding-left: 36px !important;} .pL37 { padding-left: 37px !important;} .pL38 { padding-left: 38px !important;} .pL39 { padding-left: 39px !important;} .pL40 { padding-left: 40px !important;} .pL41 { padding-left: 41px !important;} .pL42 { padding-left: 42px !important;} .pL43 { padding-left: 43px !important;} .pL44 { padding-left: 44px !important;} .pL45 { padding-left: 45px !important;} .pL46 { padding-left: 46px !important;} .pL47 { padding-left: 47px !important;} .pL48 { padding-left: 48px !important;} .pl1em { padding-left: 1em !important; } .ffGoth { font-family: 'Open Sans',"Hiragino Maru Gothic W4 JIS2004", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "Helvetica Neue", Helvetica, Arial, sans-serif;} .ffMin { font-family: "游明朝", "Yu Mincho", "游明朝体", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "ＭＳ 明朝", serif !important; font-weight: normal;} .ffNun { font-family: 'Nunito', sans-serif;} .dB { display: block; } .dIB { display: inline-block; } .ofH { overflow: hidden; } .ofV { overflow: visible !important; } .aL { text-align: left !important;} .aC { text-align: center !important;} .aR { text-align: right !important;} .fwB { font-weight: bold !important;} .fwN { font-weight: 500 !important;} .fwL { font-weight: 300 !important; } .fsI { font-style: italic; } .clB { clear: both !important;} .posR { position: relative; } /*--- winter index main ---*//********************************************************************************************************************************************************************************************************************************************************************************************************************/ #winterIndexBody {} #winterMainImg { overflow: hidden; position: relative; height: 652px; width: 100%; z-index: 0; background: url(images/winter_main_bg.png) 50% 0; background-size: auto 100%;} .winterMainMt { transition: all 2s ease-in-out; opacity: 0;} .winterMainMt.visible { opacity: 1;} #winterMainMt01 { position: absolute; height: 652px; width: 100%; z-index: 2; background: url(images/winter_main_mt01.png) 50% 0 no-repeat; background-size: auto 100%;} #winterMainMt02 { position: absolute; height: 652px; width: 100%; z-index: 4; background: url(images/winter_main_mt02.png) 50% 0 no-repeat; background-size: auto 100%;} #winterMainMt03 { position: absolute; height: 652px; width: 100%; z-index: 6; background: url(images/winter_main_mt03.png) 50% 0 no-repeat; background-size: auto 100%;} #winterMainMt04 { position: absolute; height: 652px; width: 100%; z-index: 8; background: url(images/winter_main_mt04.png) 50% 0 no-repeat; background-size: auto 100%;} #winterMainSnowfallPC { overflow: hidden; position: relative; height: 652px; width: 100%; z-index: 11;} #winterMainSnowfallSP { display: none;} #winterMainTitle { opacity: 0; position: absolute; top: 50%; left: 50%; z-index: 10; width: 216px; transform: translateY(-50%) translateX(-50%); transition: all .1s ease-in-out;} #winterMainTitle.visible { opacity: 1;} #winterMainTitle #winterMainTitle01 img { vertical-align: top; } #winterMainTitle.active02 { transform: translateY(75px) translateX(-58%);} #winterMainTitle.active #winterMainTitle01 { transform: scale(0.5); transition: all .75s ease-out; transition-delay: 0.1s;} #winterMainTitle.active #winterMainTitle02 { opacity: 0;} #winterMainTitle.active02 #winterMainTitle01 { opacity: 0; transform: scale(6.563); transition: none;} #winterMainTitle.active03 #winterMainTitle01 { opacity: 1; transition: all 4s ease-out;} .winterMainObj { opacity: 0; position: absolute; left: 50%; z-index: 10;} .winterMainObj.visible { opacity: 1;} .winterMainObj img { width: 100%;} .winterMainTree { transition: all .3s ease-in-out;} .winterMainTreeCircle01 { margin-left: -484px; top: 275px; width: 73px;} .winterMainTreeCircle02 { margin-left: -353px; top: 224px; width: 58px;} .winterMainTreeCircle03 { margin-left: -41px; top: 126px; width: 52px;} .winterMainTreeCircle04 { margin-left: 380px; top: 560px; width: 58px;} .winterMainTreeTriangle01 { margin-left: -74px; top: 138px; width: 35px;} .winterMainTreeTriangle02 { margin-left: 21px; top: 109px; width: 35px;} .winterMainTreeTriangle03 { margin-left: 228px; top: 214px; width: 35px;} .winterMainTreeTriangle04 { margin-left: 366px; top: 412px; width: 59px;} .winterMainTreeTriangle05 { margin-left: 439px; top: 426px; width: 78px;} .winterMainTreeTriangle06 { margin-left: 450px; top: 226px; width: 36px;} .winterMainTreeHexagon01 { margin-left: -394px; top: 290px; width: 38px;} .winterMainTreeHexagon02 { margin-left: 263px; top: 300px; width: 43px;} .winterMainCloud { transition: all .3s ease-in-out;} .winterMainCloud01 { margin-left: -574px; top: 204px; width: 116px; z-index: 0;} .winterMainCloud02 { margin-left: -516px; top: 96px; width: 91px; z-index: 5;} .winterMainCloud03 { margin-left: -238px; top: 110px; width: 116px; z-index: 5;} .winterMainCloud04 { margin-left: 114px; top: 74px; width: 116px; z-index: 5;} .winterMainCloud05 { margin-left: 395px; top: 105px; width: 166px;} .active.winterMainCloud01 { animation: winterMaincloudAnimation01 30s ease-in-out infinite;} @keyframes winterMaincloudAnimation01 { 0% { transform: translateY(0) translateX(0);} 25% { transform: translateY(0) translateX(-100px);} 75% { transform: translateY(0) translateX(10px);} 100% { transform: translateY(0) translateX(0);} } .active.winterMainCloud02 { animation: winterMaincloudAnimation02 25s linear infinite;} @keyframes winterMaincloudAnimation02 { 0% { transform: translateY(0) translateX(0);} 25% { transform: translateY(0) translateX(20px);} 75% { transform: translateY(0) translateX(-30px);} } .active.winterMainCloud03 { animation: winterMaincloudAnimation03 240s linear infinite;} @keyframes winterMaincloudAnimation03 { 0% { transform: translateY(0) translateX(0);} 25% { transform: translateY(0) translateX(-300px);} 75% { transform: translateY(0) translateX(300px);} } .active.winterMainCloud04 { animation: winterMaincloudAnimation04 90s linear infinite;} @keyframes winterMaincloudAnimation04 { 0% { transform: translateY(0) translateX(0);} 25% { transform: translateY(0) translateX(150px);} 75% { transform: translateY(0) translateX(-200px);} } .active.winterMainCloud05 { animation: winterMaincloudAnimation05 20s linear infinite;} @keyframes winterMaincloudAnimation05 { 0% { transform: translateY(0) translateX(0);} 25% { transform: translateY(0) translateX(14px);} 75% { transform: translateY(0) translateX(-14px);} } .winterMainLiftPare { position: absolute; margin-left: -69px; top: 103px; left: 50%; width: 278px; height: 272px; z-index: 8;} .winterMainLift { position: relative; width: 278px; left: 0; top: 0;} .winterMainLift, .winterMainLiftDown, .winterMainLiftUp { transition: all .3s ease-in-out;} .winterMainLiftDown { margin-left: 0; top: 0; left: auto; right: 4.3%; width: 31px; line-height: 1;} .winterMainLiftUp { margin-left: 0; bottom: 0; left: auto; right: 78.2%; width: 29px; line-height: 1;} .winterMainLiftDown01 { animation: winterMainLiftDown 16s linear infinite -3.2s;} .winterMainLiftDown02 { animation: winterMainLiftDown 16s linear infinite 0s;} .winterMainLiftDown03 { animation: winterMainLiftDown 16s linear infinite 3.2s;} .winterMainLiftDown04 { animation: winterMainLiftDown 16s linear infinite 6.4s;} .winterMainLiftDown05 { animation: winterMainLiftDown 16s linear infinite 9.6s;} @keyframes winterMainLiftDown { 0% { transform: translateY(0) translateX(0) scale(0,0);} 0.1% { transform: translateY(0) translateX(0) scale(1,1);} 90% { transform: translateY(230px) translateX(-230px) scale(1,1);} 90.5% { transform: translateY(230px) translateX(-230px) scale(0,0);} 91% { transform: translateY(0) translateX(0) scale(0,0);} } .winterMainLiftUp01 { animation: winterMainLiftUp 16s linear infinite -3.2s;} .winterMainLiftUp02 { animation: winterMainLiftUp 16s linear infinite 0s;} .winterMainLiftUp03 { animation: winterMainLiftUp 16s linear infinite 3.2s;} .winterMainLiftUp04 { animation: winterMainLiftUp 16s linear infinite 6.4s;} .winterMainLiftUp05 { animation: winterMainLiftUp 16s linear infinite 9.6s;} @keyframes winterMainLiftUp { 0% { transform: translateY(0) translateX(0) scale(0,0);} 0.1% { transform: translateY(0) translateX(0) scale(1,1);} 90% { transform: translateY(-230px) translateX(230px) scale(1,1);} 94% { transform: translateY(-230px) translateX(230px) scale(0,0);} 94.5% { transform: translateY(0) translateX(0) scale(0,0);} } .winterMainskier { transition: all .3s ease-in-out;} .winterMainskier01 { margin-left: -477px; top: 420px; width: 109px; } .winterMainskier02 { margin-left: -360px; top: 435px; width: 58px; } .winterMainskier03 { margin-left: -265px; top: 245px; width: 65px; } .winterMainskier04 { margin-left: -147px; top: 165px; width: 56px; } .winterMainskier05 { margin-left: 149px; top: 258px; width: 67px; } .winterMainskier06 { margin-left: 216px; top: 150px; width: 41px; } .winterMainskier07 { margin-left: 234px; top: 400px; width: 56px; } .winterMainskier08 { margin-left: 416px; top: 340px; width: 53px; } .winterMainskier01 { animation: winterMainskier01 12s ease-in-out infinite;} @keyframes winterMainskier01 { 0% { transform: translateY(0) translateX(0) scale(0,0);} 0.01% { transform: translateY(0) translateX(0) scale(1,1);} 20% { transform: translateY(0) translateX(0) scale(1,1);} 75% { transform: translateY(300px) translateX(-350px) scale(1, 1);} 75.5% { transform: translateY(300px) translateX(-350px) scale(1, 1);} 90% { transform: translateY(300px) translateX(-350px) scale(0,0);} 95% { transform: translateY(0) translateX(0) scale(0,0);} } .winterMainskier02 { animation: winterMainskier02 12s ease-in-out infinite;} @keyframes winterMainskier02 { 0% { transform: translateY(0) translateX(0) scale(0,0);} 0.01% { transform: translateY(0) translateX(0) scale(1,1);} 75% { transform: translateY(400px) translateX(-450px) scale(1, 1);} 75.5% { transform: translateY(400px) translateX(-450px) scale(1, 1);} 90% { transform: translateY(400px) translateX(-450px) scale(0,0);} 95% { transform: translateY(0) translateX(0) scale(0,0);} } .winterMainskier03 { animation: winterMainskier03 20s ease-in-out infinite;} @keyframes winterMainskier03 { 0% { transform: translateY(0) translateX(0) scale(0,0);} 0.01% { transform: translateY(0) translateX(0) scale(1,1);} 25% { transform: translateY(20px) translateX(100px) scale(1,1);} 26% { transform: translateY(20px) translateX(100px) scale(-1, 1);} 75% { transform: translateY(400px) translateX(-700px) scale(-1, 1);} 75.5% { transform: translateY(400px) translateX(-700px) scale(-1, 1);} 90% { transform: translateY(400px) translateX(-700px) scale(0,0);} 95% { transform: translateY(0) translateX(0) scale(0,0);} } .winterMainskier04 { animation: winterMainskier04 24s ease-in-out infinite;} @keyframes winterMainskier04 { 0% { transform: translateY(0) translateX(0) scale(0,0);} 0.01% { transform: translateY(0) translateX(0) scale(1,1);} 10% { transform: translateY(20px) translateX(20px) scale(1,1);} 11% { transform: translateY(20px) translateX(20px) scale(-1, 1);} 33% { transform: translateY(40px) translateX(-50px) scale(-1, 1);} 33.5% { transform: translateY(40px) translateX(-50px) scale(1, 1);} 50% { transform: translateY(110px) translateX(20px) scale(1, 1);} 50.5% { transform: translateY(110px) translateX(20px) scale(-1, 1);} 75% { transform: translateY(220px) translateX(-220px) scale(-1, 1);} 75.5% { transform: translateY(220px) translateX(-220px) scale(-1, 1);} 76.5% { transform: translateY(220px) translateX(-220px) scale(1, 1);} 95% { transform: translateY(600px) translateX(600px) scale(1.2,1.2);} 95.5% { transform: translateY(600px) translateX(600px) scale(0,0);} 96% { transform: translateY(0) translateX(0) scale(0,0);} } .winterMainskier05 { animation: winterMainskier05 16s ease-in-out infinite;} @keyframes winterMainskier05 { 0% { transform: translateY(0) translateX(0) scale(0,0);} 0.001% { transform: translateY(0) translateX(0) scale(1,1);} 10% { transform: translateY(80px) translateX(50px) scale(1,1);} 11% { transform: translateY(80px) translateX(50px) scale(-1,1);} 33% { transform: translateY(140px) translateX(-50px) scale(-1,1);} 33.1% { transform: translateY(140px) translateX(-50px) scale(1,1);} 50% { transform: translateY(200px) translateX(0px) scale(1,1);} 50.1% { transform: translateY(200px) translateX(0px) scale(-1,1);} 80% { transform: translateY(500px) translateX(-300px) scale(-1,1);} 80.1% { transform: translateY(500px) translateX(-300px) scale(0,0);} 80.2% { transform: translateY(0) translateX(0) scale(0,0);} } .winterMainskier06 { animation: winterMainskier06 24s ease-in-out infinite;} @keyframes winterMainskier06 { 0% { transform: translateY(0) translateX(0) scale(0,0);} 0.01% { transform: translateY(0) translateX(0) scale(1,1);} 10% { transform: translateY(100px) translateX(-100px) scale(1,1);} 11% { transform: translateY(100px) translateX(-100px) scale(-1, 1);} 33% { transform: translateY(180px) translateX(20px) scale(-1, 1);} 33.5% { transform: translateY(180px) translateX(20px) scale(1, 1);} 50% { transform: translateY(300px) translateX(-300px) scale(1.2, 1.2);} 50.5% { transform: translateY(300px) translateX(-300px) scale(-1.2, 1.2);} 51% { transform: translateY(300px) translateX(-300px) scale(-1.2, 1.2);} 51.5% { transform: translateY(300px) translateX(-300px) scale(-1.2, 1.2);} 80% { transform: translateY(550px) translateX(300px) scale(-1.5, 1.5);} 80.5% { transform: translateY(550px) translateX(300px) scale(0, 0);} 95% { transform: translateY(0) translateX(0) scale(0,0);} } .winterMainskier07 { animation: winterMainskier07 10s ease-in-out infinite;} @keyframes winterMainskier07 { 0% { transform: translateY(0) translateX(0) scale(0,0);} 0.0001% { transform: translateY(0) translateX(0) scale(1,1);} 20% { transform: translateY(40px) translateX(-140px) scale(1,1);} 21% { transform: translateY(40px) translateX(-140px) scale(-1,1);} 33% { transform: translateY(140px) translateX(-50px) scale(-1,1);} 33.1% { transform: translateY(140px) translateX(-50px) scale(1,1);} 50% { transform: translateY(200px) translateX(0px) scale(1,1);} 50.1% { transform: translateY(200px) translateX(0px) scale(-1,1);} 80% { transform: translateY(500px) translateX(-300px) scale(-1,1);} 80.1% { transform: translateY(500px) translateX(-300px) scale(0,0);} 80.2% { transform: translateY(0) translateX(0) scale(0,0);} } .winterMainskier08 { animation: winterMainskier08 16s ease-in-out infinite;} @keyframes winterMainskier08 { 0% { transform: translateY(0) translateX(0) scale(0,0);} 0.0001% { transform: translateY(0) translateX(0) scale(1,1);} 20% { transform: translateY(40px) translateX(140px) scale(1,1);} 21% { transform: translateY(40px) translateX(140px) scale(-1,1);} 33% { transform: translateY(80px) translateX(80px) scale(-1,1);} 33.1% { transform: translateY(80px) translateX(80px) scale(1,1);} 50% { transform: translateY(160px) translateX(200px) scale(1,1);} 50.1% { transform: translateY(160px) translateX(200px) scale(-1,1);} 80% { transform: translateY(800px) translateX(-240px) scale(-1,1);} 80.1% { transform: translateY(800px) translateX(-240px) scale(0,0);} 80.2% { transform: translateY(0) translateX(0) scale(0,0);} } .winterMainAnimal { transition: all .3s ease-in-out; line-height: 1;} .winterMainAnimalBear { margin-left: -192px; top: 340px; width: 85px; line-height: 1;} .winterMainAnimalBird { margin-left: 42px; top: 146px; width: 36px; line-height: 1;} .winterMainAnimalRabbit { margin-left: 316px; top: 156px; width: 46px; line-height: 1;} .winterMainAnimalGoat { margin-left: 346px; top: 290px; width: 73px; line-height: 1;} .winterMainAnimalA { } .winterMainAnimalB { position: absolute; top: 0; left: 0; opacity: 0;} .blink .winterMainAnimalA { opacity: 0;} .blink .winterMainAnimalB { opacity: 1;} .winterMainSnowman { margin-left: 146px; top: 488px; width: 86px; transition: all .3s ease-in-out;} .winterMainSnowmanChild { margin-left: 93px; top: 540px; width: 55px; transition: all .3s ease-in-out;} .winterMainSnowmanSki { margin-left: 236px; top: 500px; width: 102px; transition: all .3s ease-in-out;} .active.winterMainSnowman { animation: SnowmanAnimation 10s steps(1,start) infinite 2s;} @keyframes SnowmanAnimation { 0% { transform: translateY(0) translateX(0%);} 50% { transform: translateY(0) translateX(0%);} 69% { transform: translateY(0) translateX(0);} 70% { transform: translateY(-4px) translateX(0);} } .active.winterMainSnowmanChild { animation: SnowmanChildAnimation 10s ease-out infinite 2s;} @keyframes SnowmanChildAnimation { 0% { transform: translateY(0) translateX(0%);} 50% { transform: translateY(0) translateX(0%);} 69% { transform: translateY(0) translateX(0);} 71% { transform: translateY(0) translateX(-16px);} 80% { transform: translateY(0) translateX(-16px);} } .winterMainTrain { transition: all .3s ease-in-out;} .winterMainTrain01 { margin-left: -139px; top: 580px; width: 167px;} .winterMainTrain02 { margin-left: -309px; top: 580px; width: 167px;} .winterMainTrain03 { margin-left: -479px; top: 580px; width: 167px;} .winterMainTrain04 { margin-left: -649px; top: 580px; width: 167px;} .winterMainTrain05 { margin-left: -819px; top: 580px; width: 167px;} #winterMainSnowDome { position: absolute; top: 50%; left: 50%; z-index: 10; transform: translateY(-33%) translateX(-50%) rotate(0.1deg); opacity: 0; transition: all .5s ease-in-out; will-change: transform;} #winterMainSnowDome.active01 { transform: translateY(-33%) translateX(-50%) scale(10,10) rotate(0.1deg); opacity: 0 !important; transform-origin: 50% 50%; transition: all 1s ease-out;} #winterMainSnowDome.visible { opacity: 1;} #winterMainSnowDomeCircle { } #winterMainSnowDomeSnow { position: absolute; top: 0; left: 0; border-radius: 280px; width: 280px; height: 280px; overflow: hidden; z-index: 10;} #winterMainSnowDomeSnowTar { opacity: 0; position: absolute; top: 0; left: 0; border-radius: 280px; width: 280px; height: 280px; transition: all 2s ease-in-out;} #winterMainSnowDomeSnowTar.visible { opacity: 1;} #winterMainSnowDomeBase { position: absolute; top: 0; left: 0; z-index: 20;} #winterMainSnowDomeReflect { position: absolute; top: 0; left: 0; z-index: 20;} #winterMainSummer { position: absolute; top: 110px; left: 50%; margin-left: -465px; z-index: 11;} /*--- winter index main end ---*//********************************************************************************************************************************************************************************************************************************************************************************************************************/ /*--- winter index ---*//********************************************************************************************************************************************************************************************************************************************************************************************************************/ #indexInformation { overflow: hidden; padding: 24px 3.125%; } #indexInformationSub01 { overflow: hidden; margin: 0 0 24px; color: #F18700; font-weight: 800; font-size: 171.4%; text-align: center; letter-spacing: 0.1em; line-height: 1.2;} #indexInformationSub01 span { display: inline-block; background-repeat: no-repeat;} #indexInformationSub0101 { padding-left: 48px; background-image: url(images/winter_index_information_title_icon01.png); background-position: 0 0; } #indexInformationSub0102 { padding: 31px 60px 31px 0; background-image: url(images/winter_index_information_title_icon02.png); background-position: 100% 0; } #indexInformationSub0103 { padding: 31px 60px 31px 0; background-image: url(images/winter_index_information_title_icon03.png); background-position: 100% 0; } #indexInformationList { overflow: hidden; } #indexInformationList li { overflow: hidden; padding: 0 0 16px; } #indexInformationList li:nth-child(n+5) { display: none;} .indexInformationListHead { padding: 0 8px 6px; margin: 0 0 8px; line-height: 1.2; border-bottom: #000E38 solid 1px; font-weight: 700; color: #000F3A;} .indexInformationListHead01 { display: inline-block; padding: 4px 0 0; margin: 0 8px 0 0; width: 80px; font-size: 92.9%; color: #FFF; font-style: italic; text-align: center;} .indexInformationListHead01News { background: #9BC11C; } .indexInformationListHead01Event { background: #E95514; } .indexInformationListHead01Campaign { background: #3e96c0; } .indexInformationListHead02 {} #indexInformationList li a { display: inline-block; padding: 0 8px; } .indexInformationListTime { float: left; width: 7em; } .indexInformationListTxt { overflow: hidden; } #winterIndexEvent { overflow: hidden; padding: 24px 3.125% 60px; } #winterIndexEventSub01 { overflow: hidden; margin: 0 0 24px; color: #F18700; font-weight: 800; font-size: 171.4%; text-align: center; letter-spacing: 0.1em; line-height: 1.2;} #winterIndexEventSub01 span { display: inline-block; background-repeat: no-repeat;} #winterIndexEventSub0101 { padding-left: 84px; background-image: url(images/winter_index_event_title_icon01.png); background-position: 0 0; } #winterIndexEventSub0102 { padding: 32px 106px 32px 0; background-image: url(images/winter_index_event_title_icon02.png); background-position: 100% 0; } #winterIndexEventList01 { float: left; width: 59.5%; padding-top: 1.9vw; margin: 0 0 24px;} #winterIndexEventList01 li:nth-child(1) { margin-bottom: 4vw;} #winterIndexEventList01 li img { width: 100%;} #winterIndexEventCal { text-align: center; margin: 0 0 24px;} #winterIndexEventCal img { width: 50%;} /*#winterIndexEventCal { float: right; width: 34.4%; margin: 0 0 24px;}*/ /*#winterIndexEventCal img { width: 100%;}*/ #winterIndexEventList02 { clear: both; overflow: hidden;} #winterIndexEventList02 li { margin: 0 9px; } #winterIndexCampain { overflow: hidden; padding: 24px 3.125% 60px; } #winterIndexCampainSub01 { overflow: hidden; margin: 0 0 24px; color: #4396c0; font-weight: 800; font-size: 171.4%; text-align: center; letter-spacing: 0.1em; line-height: 1.2;} #winterIndexCampainSub01 span { display: inline-block; background-repeat: no-repeat;} #winterIndexCampainSub0101 { padding-left: 94px; background-image: url(images/winter_index_campaing_title_icon01.png); background-position: 0 0; } #winterIndexCampainSub0102 { padding: 32px 76px 32px 0; background-image: url(images/winter_index_campaing_title_icon02.png); background-position: 100% 0; } #winterIndexCampainList01 { float: left; width: 59.5%; padding-top: 1.9vw; margin: 0 0 24px;} #winterIndexCampainList01 li:nth-child(1) { margin-bottom: 4vw;} #winterIndexCampainList01 li img { width: 100%;} #winterIndexCampainCal { text-align: center; margin: 0 0 24px;} #winterIndexCampainCal img { width: 50%;} /*#winterIndexCampainCal { float: right; width: 34.4%; margin: 0 0 24px;}*/ /*#winterIndexCampainCal img { width: 100%;}*/ #winterIndexCampainList02 { clear: both; overflow: hidden;} #winterIndexCampainList02 li { float: left; width: 31.3%; margin: 0 3% 8px 0; } #winterIndexCampainList02 li:nth-child(3n) { margin-right: 0;} .prTxt { position: absolute; top: 420px; left: 0; width: 100%; height: 100vw; will-change: transform; transform: translate3d(0,0,1px);} #winterIndexSki { position: relative; width: 100%; height: 100vw; overflow: hidden;} #winterIndexSkiBG { width: 100%; height: calc( 100vw + 250px ); background: url(images/winter_index_ski_img.jpg) 60% 50% no-repeat; background-size: cover; will-change: transform;} #winterIndexSkiTxt { width: 40.8%; position: absolute; top: 100%; left: 4%;} .winterIndexSkiBG2019 #winterIndexSkiBG { background: url(images/winter_index_ski_img2019.jpg) 25% 50% no-repeat; background-size: cover;} .winterIndexSkiBG2019 #winterIndexSkiTxt { width: 40.8%; position: absolute; top: 100%; left: auto; right: 4%;} #winterIndexKidsPark { } #winterIndexKidsParkSub01 { position: relative; z-index: 2; padding: 120px 3.125% 0; margin: -120px 0 25px; text-align: center; background: url(images/winter_index_kids-park_title_bg.png) 50% 0 no-repeat; } #winterIndexKidsParkTxt01 { padding: 0 3.125% 24px; } #winterIndexKidsParkStage { overflow: hidden; position: relative; width: 100%; height: 331px; margin: 0 0 100px; background: url(images/winter_index_kids-park_stage_bg.png) 50% 0 no-repeat; } #winterIndexKidsParkClick { position: absolute; bottom: 39px; left: 50%; margin: 0 0 0 -71px; } .winterIndexKidsParkStageCar { position: absolute; bottom: 0; left: 50%; } #winterIndexKidsParkStageCar01 { width: 143px; margin-left: -500px; animation: winterIndexKidsParkStageCar 15s ease-in-out 1;} #winterIndexKidsParkStageCar02 { width: 114px; margin-left: -290px; animation: winterIndexKidsParkStageCar 18s ease-in-out 1;} #winterIndexKidsParkStageCar03 { width: 130px; margin-left: 190px; animation: winterIndexKidsParkStageCar 19s ease-in-out 1;} #winterIndexKidsParkStageCar04 { width: 108px; margin-left: 400px; animation: winterIndexKidsParkStageCar 20s ease-in-out 1;} @keyframes winterIndexKidsParkStageCar { 0% { transform: translateX(100vw);} 100% { transform: translateX(0);} } #winterIndexFlowChart { padding: 0 3.125% 114px; } #winterIndexFlowChartTxt01 { text-align: center; padding: 0 0 24px;} #winterIndexFlowChartTxt02 { position: relative; color: #EA6400; font-size: 171.4%; line-height: 1.4; max-width: 383px; margin: 0 auto 14px; font-weight: bold;} #winterIndexFlowChartTxt02 p { position: absolute; top: 0; left: 0; } #winterIndexFlowChartTxt03 { font-size: 114.3%; } #winterIndexFlowChartBtn02 { text-align: center; padding: 24px 0 0; } #winterIndexFF { padding: 0 3.125% 40px; } #winterIndexFFSub01 { overflow: hidden; margin: 0 0 24px; color: #9bc11d; font-weight: 800; font-size: 171.4%; text-align: center; letter-spacing: 0.1em; line-height: 1.2;} /*#winterIndexFFTxt01 { color: #4396C0; text-align: center; font-size: 114.3%; padding: 0 0 24px;}*/ #winterIndexFFList {} #winterIndexFFList li { position: relative; font-size: 128.6%; line-height: 1.47; position: relative; width: 50%; float: left; text-align: center; padding: 24px 0 60px; margin: 0 1px 16px 0;} #winterIndexFFList li:nth-child(2n-1) { width: calc( 50% - 1px );} #winterIndexFFList li:nth-child(2n) { margin-right: 0;} #winterIndexFFList li:before { content: ''; display: block; width: 25px; height: 11px; position: absolute; top: 0; left: 50%; margin-left: -12px; background: url(images/icon_tri03.png) 0 0 no-repeat; background-size: cover; } #winterIndexFFList li:after { content: ''; display: block; width: 15px; height: 23px; position: absolute; bottom: 17px; left: 50%; margin-left: -7px; background: url(images/icon_tri02.png) 0 0 no-repeat; background-size: cover; } #winterIndexFFList li a { display: block; color: #231815; } #winterIndexFFList li:nth-child(1) { background-image: url(images/winter_index_ff01_bg.png); } #winterIndexFFList li:nth-child(2) { background-image: url(images/winter_index_ff02_bg.png); } #winterIndexFFList li:nth-child(3) { background-image: url(images/winter_index_ff03_bg.png); } #winterIndexFFList li:nth-child(4) { background-image: url(images/winter_index_ff04_bg.png); } #winterIndexFFList li:nth-child(5) { background-image: url(images/winter_index_ff05_bg.png); } #winterIndexFFList li:nth-child(6) { background-image: url(images/winter_index_ff06_bg.png); } #winterIndexFFList li:nth-child(7) { background-image: url(images/winter_index_ff07_bg.png); } #winterIndexFFList li:nth-child(8) { background-image: url(images/winter_index_ff08_bg.png); } .winterIndexFFListImg { padding: 0 0 5px; } .winterIndexFFListTxt {} .winterIndexFFListTxt span { font-weight: bold; } #indexMovie { padding: 48px 3.125% 70px; overflow: hidden; clear: both;} #indexMovieSub01 { text-align: center; padding-bottom: 16px;} #indexMovieList { text-align: center; position: relative;} #indexMovieList li:nth-child(1) { width: 50%; margin: 0 auto; position: relative; z-index: 1;} #indexMovieList li:nth-child(2) { position: absolute; top: 50%; left: 0%; transform: translateY(-50%); width: 35%; z-index: 0; margin-top: 16px;} #indexMovieList li:nth-child(3) { position: absolute; top: 50%; right: 0%; transform: translateY(-50%); width: 35%; z-index: 0; margin-top: 16px;} #indexInstagram { padding: 0 3.125% 70px; overflow: hidden; clear: both;} #indexInstagramSub01 { text-align: center; padding: 0 0 24px; } #indexInstagram ul { min-height: calc( ( 46.25vw - 12px ) * 2 + 48px ); background: url(images/loading.gif) no-repeat 50% 50% ;} #indexInstagram ul.loaded { background: none;} #indexInstagram li { float: left; width: calc( 50% - 12px ); height: calc( 46.25vw - 12px ); margin: 0 0 24px;} #indexInstagram li:nth-child(2n) { float: right;} #indexSNS { padding: 0 0 76px; clear: both;} #indexSNSSub01 { overflow: hidden; margin: 0 0 24px; color: #4396C0; font-weight: 800; font-size: 171.4%; text-align: center; letter-spacing: 0.1em; line-height: 1.2; } #snsList { padding: 0 3.125%; } #snsList > li { margin: 0 0 24px; line-height: 1.2;text-align: center;} #snsList > li dt { text-align: center; padding: 0 0 24px;} #indexBnr { } #indexBnr li { margin: 0 8px 40px; width: 100%; } #indexBnr li a { display: block; text-align: center; padding: 2px; font-size: 121.4%; line-height: 1.2; color: #FFF; font-weight: bold;} #indexBnr li.bnrBlog a { background: #98bc1a;} #indexBnr li.bnrBlog a > span span { background-image: url(images/bnr_icon_blog.png);} #indexBnr li.bnrPhoto a { background: #f08602;} #indexBnr li.bnrPhoto a > span span { background-image: url(images/bnr_icon_photo.png);} #indexBnr li.bnrMovie a { background: #3e96c0;} #indexBnr li.bnrMovie a > span span { background-image: url(images/bnr_icon_movie.png);} #indexBnr li a > span { display: block; width: 100%; height: 100%; box-sizing: border-box; padding: 6px; border: #FFF 1px solid; } #indexBnr li a > span span { padding: 16px 0 16px 70px; display: inline-block; background-position: 0 50%; background-repeat: no-repeat; } #indexCompanyBnr { overflow: hidden; padding: 0 3.125%;} #indexCompanyBnr li { float: left; width: 48.5%; margin: 0 3% 8px 0; border: #CCC 1px solid; box-sizing: border-box;} #indexCompanyBnr li.indexCompanyBnrBN { border: none;} #indexCompanyBnr li:nth-child(2n) { margin-right: 0;} /*--- winter index end ---*//********************************************************************************************************************************************************************************************************************************************************************************************************************/ /*--- winter module ---*//********************************************************************************************************************************************************************************************************************************************************************************************************************/ /*today*/ #todayYuzawa { overflow: hidden; padding: 16px 3.125% 24px; background: url(images/header_winter_today_bg.jpg); color: #000F3A;} #todayYuzawaWrap {} #todayYuzawaClimate { line-height: 1; overflow: hidden; padding: 0 0 16px;} #todayYuzawaClimate li:nth-child(1) { float: left; width: 46%; margin-right: 3.125%; text-align: center;} #todayYuzawaClimate li:nth-child(1) dl {} #todayYuzawaClimate li:nth-child(1) dt { position: relative; float: left; width: 59%; height: 13vw; padding: 1.5vw 6px 0; box-sizing: border-box;} #todayYuzawaClimate li:nth-child(1) dd { float: left; width: 41%; padding: 0 6px; box-sizing: border-box;} #todayYuzawaClimate li:nth-child(2), #todayYuzawaClimate li:nth-child(3) { float: left; width: 25.4%; padding: 2vw 0 0; box-sizing: border-box; font-size: 85.7%; font-weight: 700;} #todayYuzawaClimate li:nth-child(2) dd, #todayYuzawaClimate li:nth-child(3) dd { padding: 4px 0 0 1em;} .todayYuzawaClimateTxt01 { font-size: 214.3%; } .todayYuzawaClimateTxt02 { font-size: 121.4%; } .todayYuzawaClimateTxt03 { font-size: 200.0%; } .todayYuzawaClimateTxt04 { font-size: 164.3%; } #todayYuzawaLift { overflow: hidden; clear: both; } #todayYuzawaLift > li { padding: 0 0 24px; background: url(images/header_winter_today_lift.png) 0 1.2em no-repeat; } #todayYuzawaLift > li:last-child { padding: 0;} #todayYuzawaLift > li:nth-child(3) { background: url(images/header_winter_today_snowman.png) 0 1.2em no-repeat; } #todayYuzawaLift dt { margin: 0 0 6px; font-weight: 700; text-indent: -0.5em; border-bottom: #000E38 solid 1px; line-height: 1.2;} #todayYuzawaLift dd { padding: 0 0 0 38px; overflow: hidden; min-height: 20px;} #todayYuzawaLift dd ul { position: relative; width: 100%; float: left;} #todayYuzawaLift dd ul#todayLift01 li:nth-child(n+5) { position: absolute; left: 50%;} #todayYuzawaLift dd ul#todayLift01 li:nth-child(5) { top: 0;} #todayYuzawaLift dd ul#todayLift01 li:nth-child(6) { top: calc( 1.2em + 6px );} #todayYuzawaLift dd ul#todayLift01 li:nth-child(7) { top: calc( 2.4em + 12px );} .todayYuzawaTxt01 { display: block; font-weight: 900; font-size: 107.1%;} .todayYuzawaTxt02 { display: block;; font-weight: 700;} .todayYuzawaWeekSp { position: relative; padding: 3px 0; margin: 2px 0 0; display: block; background: #3d94bd; border-radius: 4px; color: #FFF !important; font-weight: 700;} .todayYuzawaWeekSp:after { content: ""; display: block; position: absolute; top: 50%; left: 50%; margin: -5px 0 0 1.7em; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 8px solid #FFF; } .todayYuzawaWeekPc { display: none; } /*seasonInfo*/ #seasonInfo { overflow: hidden; background: url(images/header_winter_season-info_bg.jpg);} #seasonInfo01 { width: 100%; padding: 8px 0; font-size: 114.3%; line-height: 1.4; text-align: center; background: #3D94BD; color: #FFF; font-style: italic; font-weight: bold;} #seasonInfo02 { width: 100%; overflow: hidden; font-size: 85.7%; color: #073B66; font-weight: bold; line-height: 1.4;} #seasonInfo0201 { width: 36%; float: left; padding: 8px 0 8px 8px; box-sizing: border-box;} #seasonInfo0202 { width: 30%; float: left; padding: 8px 0 8px 8px; box-sizing: border-box;} #seasonInfo0202 li { position: relative; padding-left: 1em; } #seasonInfo0202 li:before { content: "・"; position: absolute; top: 0; left: 0; } #seasonInfo0203 { width: 34%; float: left; padding: 8px; box-sizing: border-box;} .seasonInfo02Ch { border-right: #245177 solid 1px; padding: 0 8px 0 0;} /*--- winter module end ---*//********************************************************************************************************************************************************************************************************************************************************************************************************************/ /*--- summer index main ---*//********************************************************************************************************************************************************************************************************************************************************************************************************************/ #summerIndexBody {} #summerMainImg { overflow: hidden; position: relative; height: 620px; width: 100%; z-index: 0; background: url(images/summer_main_bg.png) 50% 0; background-size: auto 100%;} #summerMainMt01 { position: absolute; height: 620px; width: 100%; z-index: 2; background: url(images/summer_main_mt01.png) 50% 0 no-repeat; background-size: auto 100%;} #summerMainMt02 { position: absolute; height: 620px; width: 100%; z-index: 4; background: url(images/summer_main_mt02.png) 50% 0 no-repeat; background-size: auto 100%;} #summerMainMt03 { position: absolute; height: 620px; width: 100%; z-index: 6; background: url(images/summer_main_mt03.png) 50% 0 no-repeat; background-size: auto 100%;} #summerMainMt04 { position: absolute; height: 620px; width: 100%; z-index: 8; background: url(images/summer_main_mt04.png) 50% 0 no-repeat; background-size: auto 100%;} .summerMainMt { transition: all 1.5s ease-in-out; opacity: 0;} .summerMainMt.visible { opacity: 1;} #summerMainTitle { opacity: 0; position: absolute; top: 50%; left: 50%; z-index: 10; width: 216px; transform: translateY(-50%) translateX(-50%); transition: all .1s ease-in-out;} #summerMainTitle.visible { opacity: 1;} #summerMainTitle #summerMainTitle01 img { vertical-align: top; } #summerMainTitle.active02 { transform: translateY(75px) translateX(-58%);} #summerMainTitle.active #summerMainTitle01 { transform: scale(0.5); transition: all .75s ease-out; transition-delay: 0.1s;} #summerMainTitle.active #summerMainTitle02 { opacity: 0;} #summerMainTitle.active02 #summerMainTitle01 { opacity: 0; transform: scale(6.563); transition: none;} #summerMainTitle.active03 #summerMainTitle01 { opacity: 1; transition: all 3s ease-out;} .summerMainObj { opacity: 0; position: absolute; left: 50%; z-index: 10;} .summerMainObj.visible { opacity: 1;} .summerMainObj img { width: 100%;} .summerMainTree { transition: all .3s ease-in-out;} .summerMainTreeCircle01 { margin-left: -484px; top: 275px; width: 73px;} .summerMainTreeCircle02 { margin-left: -353px; top: 224px; width: 58px;} .summerMainTreeCircle03 { margin-left: -41px; top: 126px; width: 52px; z-index: 11;} .summerMainTreeCircle04 { margin-left: 380px; top: 530px; width: 58px;} .summerMainTreeCircle05 { margin-left: -443px; top: 423px; width: 45px;} .summerMainTreeCircle06 { margin-left: -405px; top: 400px; width: 54px;} .summerMainTreeTriangle01 { margin-left: -74px; top: 138px; width: 35px;} .summerMainTreeTriangle02 { margin-left: 21px; top: 109px; width: 35px;} .summerMainTreeTriangle03 { margin-left: 366px; top: 382px; width: 59px;} .summerMainTreeTriangle04 { margin-left: 439px; top: 396px; width: 78px;} .summerMainTreeTriangle05 { margin-left: 450px; top: 226px; width: 36px;} .summerMainTreeTriangle06 { margin-left: -377px; top: 304px; width: 66px;} .summerMainTreeTriangle07 { margin-left: 208px; top: 432px; width: 51px; z-index: 11;} .summerMainTreeTriangle08 { margin-left: 249px; top: 437px; width: 50px; z-index: 11;} .summerMainTreeTriangle09 { margin-left: 292px; top: 446px; width: 51px;} .summerMainTreeTriangle10 { margin-left: 260px; top: 217px; width: 50px;} .summerMainTreeTriangle11 { margin-left: 300px; top: 232px; width: 50px;} .summerMainTreeTriangle12 { margin-left: 340px; top: 257px; width: 50px;} .summerMainTreeTriangle13 { margin-left: 380px; top: 279px; width: 50px;} .summerMainTreeHexagon01 { margin-left: -394px; top: 290px; width: 38px;} .summerMainCloud { transition: all .3s ease-in-out;} .summerMainCloud01 { margin-left: -574px; top: 204px; width: 116px; z-index: 0;} .summerMainCloud02 { margin-left: -516px; top: 96px; width: 91px; z-index: 5;} .summerMainCloud03 { margin-left: -238px; top: 110px; width: 116px; z-index: 5;} .summerMainCloud04 { margin-left: 114px; top: 74px; width: 116px; z-index: 5;} .summerMainCloud05 { margin-left: 395px; top: 105px; width: 166px;} .active.summerMainCloud01 { animation: summerMaincloudAnimation01 30s ease-in-out infinite;} @keyframes summerMaincloudAnimation01 { 0% { transform: translateY(0) translateX(0);} 25% { transform: translateY(0) translateX(-100px);} 75% { transform: translateY(0) translateX(10px);} 100% { transform: translateY(0) translateX(0);} } .active.summerMainCloud02 { animation: summerMaincloudAnimation02 25s linear infinite;} @keyframes summerMaincloudAnimation02 { 0% { transform: translateY(0) translateX(0);} 25% { transform: translateY(0) translateX(20px);} 75% { transform: translateY(0) translateX(-30px);} } .active.summerMainCloud03 { animation: summerMaincloudAnimation03 240s linear infinite;} @keyframes summerMaincloudAnimation03 { 0% { transform: translateY(0) translateX(0);} 25% { transform: translateY(0) translateX(-300px);} 75% { transform: translateY(0) translateX(300px);} } .active.summerMainCloud04 { animation: summerMaincloudAnimation04 90s linear infinite;} @keyframes summerMaincloudAnimation04 { 0% { transform: translateY(0) translateX(0);} 25% { transform: translateY(0) translateX(150px);} 75% { transform: translateY(0) translateX(-200px);} } .active.summerMainCloud05 { animation: summerMaincloudAnimation05 20s linear infinite;} @keyframes summerMaincloudAnimation05 { 0% { transform: translateY(0) translateX(0);} 25% { transform: translateY(0) translateX(14px);} 75% { transform: translateY(0) translateX(-14px);} } .summerMainAnimal { transition: all .3s ease-in-out; line-height: 1;} .summerMainAnimalBear { margin-left: -192px; top: 340px; width: 85px; line-height: 1;} .summerMainAnimalBird { margin-left: 42px; top: 146px; width: 36px; line-height: 1;} .summerMainAnimalRabbit { margin-left: 316px; top: 126px; width: 46px; line-height: 1;} .summerMainAnimalGoat { margin-left: 346px; top: 260px; width: 73px; line-height: 1; z-index: 9;} .summerMainAnimalA { } .summerMainAnimalB { position: absolute; top: 0; left: 0; opacity: 0;} .blink .summerMainAnimalA { opacity: 0;} .blink .summerMainAnimalB { opacity: 1;} .summerMainTrain { transition: all .3s ease-in-out;} .summerMainTrain01 { margin-left: -139px; top: 550px; width: 167px;} .summerMainTrain02 { margin-left: -309px; top: 550px; width: 167px;} .summerMainTrain03 { margin-left: -479px; top: 550px; width: 167px;} .summerMainTrain04 { margin-left: -649px; top: 550px; width: 167px;} .summerMainTrain05 { margin-left: -819px; top: 550px; width: 167px;} .summerMainPin { transition: all .3s ease-in-out;} .summerMainPin01 { margin-left: -240px; top: 250px; width: 28px;} .summerMainPin02 { margin-left: 160px; top: 165px; width: 28px;} .summerMainPin03 { margin-left: 60px; top: 530px; width: 28px;} .summerMainGolfer { transition: all .3s ease-in-out;} .summerMainGolfer01 { margin-left: 200px; top: 216px; width: 40px;} .summerMainAdventureStage { margin-left: -435px; bottom: 0; left: 50%; width: 871px; z-index: 10;} .summerMainSlider { transition: all .3s ease-in-out;} .summerMainSlider01 { margin-left: -362px; top: 192px; width: 50px;} .summerMainSlider02 { margin-left: 389px; top: 139px; width: 38px;} .active.summerMainSlider01 { animation: summerMainSliderAnimation01 16s ease-in-out infinite;/* transform-origin: 62% 50%;*/} @keyframes summerMainSliderAnimation01 { 0% { transform: translateY(0) translateX(0) scale(1,1);} 70% { transform: translateY(90px) translateX(567px) scale(1,1);} 71% { transform: translateY(90px) translateX(567px) scale(0,0);} 72% { transform: translateY(0) translateX(0) scale(0,0);} 99% { transform: translateY(0) translateX(0) scale(0,0);} } .active.summerMainSlider02 { animation: summerMainSliderAnimation02 10s ease-in-out infinite;/* transform-origin: 62% 50%;*/} @keyframes summerMainSliderAnimation02 { 0% { transform: translateY(0) translateX(0) scale(1,1);} 45% { transform: translateY(130px) translateX(-178px) scale(1,1);} 46% { transform: translateY(130px) translateX(-178px) scale(0,0);} 47% { transform: translateY(0) translateX(0) scale(0,0);} 99% { transform: translateY(0) translateX(0) scale(0,0);} } .summerMainMan { transition: all .3s ease-in-out;} .summerMainMan01 { margin-left: -148px; top: 271px; width: 24px; z-index: 9;} .active.summerMainMan01 { animation: summerMainManAnimation01 16s ease-in-out infinite; transform-origin: 50% 100%;} @keyframes summerMainManAnimation01 { 0% { transform: translateY(0) translateX(0) scale(1,1);} 16% { transform: translateY(0) translateX(0) scale(1,1);} 19% { transform: translateY(0) translateX(0) scale(1.2,1.2);} 27% { transform: translateY(0) translateX(0) scale(1,1);} 99% { transform: translateY(0) translateX(0) scale(1,1);} } .summerMainKayakStage { position: absolute; margin-left: 121px; bottom: 0; left: 50%; width: 280px; z-index: 10;} .summerMainkayak { transition: all .3s ease-in-out;} .summerMainkayak01 { margin-left: -140px; top: -20px; width: 76px;} .active.summerMainkayak01 { animation: summerMainkayakAnimation01 30s ease-in-out infinite;/* transform-origin: 62% 50%;*/} @keyframes summerMainkayakAnimation01 { 0% { transform: translateY(0) translateX(0) scale(1,1);} 1% { transform: translateY(0) translateX(0) scale(-1,1);} 10% { transform: translateY(5px) translateX(20px) scale(-1,1);} 20% { transform: translateY(10px) translateX(30px) scale(-1,1);} 30% { transform: translateY(20px) translateX(35px) scale(-1,1);} 60% { transform: translateY(30px) translateX(180px) scale(-1,1);} 61% { transform: translateY(30px) translateX(180px) scale(1,1);} } #summerMainSnowDome { position: absolute; top: 50%; left: 50%; z-index: 10; transform: translateY(-33%) translateX(-50%); opacity: 0; transition: all .3s ease-in-out;} #summerMainSnowDome.visible { opacity: 1;} #summerMainSnowDome.active01 { transform: translateY(-33%) translateX(-50%) scale(10,10) rotate(0.1deg); opacity: 0 !important; transform-origin: 50% 50%; transition: all 1s ease-out;} #summerMainWinter { position: absolute; top: 160px; left: 50%; margin-left: -465px; z-index: 10;} #summerMainWinterSnowDome { width: 124px; /*position: absolute; top: 50%; left: 50%; z-index: 10; transform: translateY(-33%) translateX(-50%) rotate(0.1deg);*/ opacity: 1; transition: all .5s ease-in-out; will-change: transform;} #summerMainWinterSnowDome.active01 { transform: translateY(-33%) translateX(-50%) scale(10,10) rotate(0.1deg); opacity: 0 !important; transform-origin: 50% 50%; transition: all 1s ease-out;} #summerMainWinterSnowDome.visible { opacity: 1;} #summerMainWinterSnowDomeCircle { } #summerMainWinterSnowDomeSnow { position: absolute; top: 0; left: 0; border-radius: 124px; width: 124px; height: 124px; overflow: hidden; z-index: 10;} #summerMainWinterSnowDomeSnowTar { opacity: 0; position: absolute; top: 0; left: 0; border-radius: 124px; width: 124px; height: 124px; transition: all 2s ease-in-out;} #summerMainWinterSnowDomeSnowTar.visible { opacity: 1;} #summerMainWinterSnowDomeBase { position: absolute; top: 0; left: 0; z-index: 20;} #summerMainWinterSnowDomeReflect { position: absolute; top: 0; left: 0; z-index: 20;} /*--- summer index main end ---*//********************************************************************************************************************************************************************************************************************************************************************************************************************/ /*--- summer index ---*//********************************************************************************************************************************************************************************************************************************************************************************************************************/ #summerIndexForest { padding-bottom: 120px; } #summerIndexForestAdventureBg { text-align: center; padding: 80px 3.125% 0; background: url(images/summer_index_forest-adventure_bg.png) 50% 0 no-repeat; } #summerIndexForestStage { position: relative; margin: 11vw 0 30px; width: 100%; height: 53vw; background: url(images/summer_index_forest-adventure_img01.jpg) 50% 0 no-repeat; background-size: auto 100%; } #summerIndexForestAdventureSub02 { width: 37.1%; position: absolute; top: 0; left: 50%; transform: translateY(-50%) translateX(-50%);} .summerIndexForestObj { position: absolute; left: 50%; } #summerIndexForestAdventureAnimalBird { margin-left: 33.7%; top: 13.4%; width: 3.9%; } #summerIndexForestAdventureAnimalGoat { margin-left: 35.7%; top: -14%; width: 11.3%; } #summerIndexForestAdventurePlayer01 { margin-left: -520px; top: 212px; width: 83px; } #summerIndexForestAdventurePlayer02 { margin-left: -520px; top: 220px; width: 90px; } #summerIndexForestAdventurePlayer03 { margin-left: -520px; top: 203px; width: 70px; } .summerIndexForestAdventurePlayerA { } .summerIndexForestAdventurePlayerB { position: absolute; top: 0; left: 0; opacity: 0;} .blink .summerIndexForestAdventurePlayerA { opacity: 0;} .blink .summerIndexForestAdventurePlayerB { opacity: 1;} #summerIndexForestBtn01 { text-align: center; padding-left: 3.125%; padding-right: 3.125%; } #summerIndexForestAdventurePlayer01 { animation: summerIndexForestAdventurePlayer01 70s linear infinite; transform-origin: 100% 0%;} @keyframes summerIndexForestAdventurePlayer01 { 0% { transform: translateY(0) translateX(0) scale(0,0) rotate(0deg);} 3% { transform: translateY(0) translateX(0) scale(1,1) rotate(0deg);} 15% { transform: translateY(0) translateX(0) scale(1,1) rotate(0deg);} 60% { transform: translateY(124px) translateX(427px) scale(0.75,0.75) rotate(-10deg);} 70% { transform: translateY(124px) translateX(517px) scale(0.75,0.75) rotate(-10deg);} 90% { transform: translateY(60px) translateX(740px) scale(1,1) rotate(-10deg);} 90.1% { transform: translateY(60px) translateX(740px) scale(0,0) rotate(-10deg);} 99% { transform: translateY(60px) translateX(740px) scale(0,0) rotate(-10deg);} 99.5% { transform: translateY(0) translateX(0) scale(0,0) rotate(0deg);} } #summerIndexForestAdventurePlayer02 { animation: summerIndexForestAdventurePlayer02 45s linear infinite; transform-origin: 100% 0%;} @keyframes summerIndexForestAdventurePlayer02 { 0% { transform: translateY(0) translateX(0) scale(0,0) rotate(0deg);} 3% { transform: translateY(0) translateX(0) scale(0.7,0.7) rotate(0deg);} 15% { transform: translateY(0) translateX(0) scale(0.7,0.7) rotate(0deg);} 60% { transform: translateY(116px) translateX(427px) scale(0.48,0.48) rotate(-10deg);} 70% { transform: translateY(116px) translateX(517px) scale(0.48,0.48) rotate(-10deg);} 90% { transform: translateY(50px) translateX(740px) scale(0.6,0.6) rotate(-10deg);} 93% { transform: translateY(50px) translateX(740px) scale(0.6,0.6) rotate(-10deg);} 94% { transform: translateY(50px) translateX(740px) scale(0,0) rotate(-10deg);} 95% { transform: translateY(0) translateX(0) scale(0,0) rotate(0deg);} 100% { transform: translateY(0) translateX(0) scale(0,0) rotate(0deg);} } #summerIndexForestAdventurePlayer03 { animation: summerIndexForestAdventurePlayer03 30s linear infinite; transform-origin: 100% 0%;} @keyframes summerIndexForestAdventurePlayer03 { 0% { transform: translateY(0) translateX(0) scale(0,0) rotate(0deg);} 3% { transform: translateY(0) translateX(0) scale(0.8,0.8) rotate(0deg);} 15% { transform: translateY(0) translateX(0) scale(0.8,0.8) rotate(0deg);} 60% { transform: translateY(128px) translateX(427px) scale(0.5,0.5) rotate(-10deg);} 70% { transform: translateY(128px) translateX(517px) scale(0.5,0.5) rotate(-10deg);} 90% { transform: translateY(70px) translateX(740px) scale(0.6,0.6) rotate(-10deg);} 93% { transform: translateY(70px) translateX(740px) scale(0.6,0.6) rotate(-10deg);} 94% { transform: translateY(70px) translateX(740px) scale(0,0) rotate(-10deg);} 95% { transform: translateY(0) translateX(0) scale(0,0) rotate(0deg);} 100% { transform: translateY(0) translateX(0) scale(0,0) rotate(0deg);} } #summerIndexActivity { overflow: hidden; padding-left: 3.125%; padding-right: 3.125%; padding-bottom: 120px; } #summerIndexActivityList { overflow: hidden; } #summerIndexActivityList li { float: left; width: 32%; margin: 0 2% 16px 0; } #summerIndexActivityList li:nth-child(3n) { margin-right: 0;} /**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ /*general*/ body { padding: 48px 0 0; background: url(images/body_bg.png) 50% -120px no-repeat;} body#notfound { padding: 48px 0 0; background: none;} body.summer, body.summer-season { background: url(images/body_summer-bg.png) 50% -120px no-repeat;} .commingSoon01 { text-align: center; font-size: 142.90% !important; color: #E98200;} .commingSoon02 { text-align: center; font-size: 142.90% !important; color: #E98200; padding: 0 0 40px;} #winterIndexBody { padding: 0; background: none;} #summerIndexBody { padding: 0; background: none;} .summer .winterDisp, .summer-season .winterDisp { display: none !important; } .winter .summerDisp, .winter-season .summerDisp { display: none !important; } #contentArticle { position: relative; overflow: hidden; padding: 0 0 120px;} .spLR { padding-left: 3.125%; padding-right: 3.125%; } .w390R { padding-bottom: 24px; } .w400L { overflow: hidden; padding-bottom: 24px; } .w400R {} .w410L { padding-bottom: 40px; } .w386L { padding-bottom: 40px; } .w386R {} .w430L { } .w430R {} .w50PerL { padding: 0 0 24px; } .w50PerR {} .pageTitleEn01 { font-size: 171.4%; letter-spacing: 0.1em; padding: 24px 0 24px; line-height: 1.2; /*font-family: 'Nunito', sans-serif;*/ font-weight: bold; text-align: center;} .mainImg { text-align: center;} .pageTitleJp01 { text-align: center; font-size: 157.1%; line-height: 1.2; padding: 24px 0 56px; box-sizing: border-box;} .pageTitleJp01-Bk01 { background: #000000; color: #FFF; font-weight: bold; padding-bottom: 24px !important;} .pageTitleJp01-bl01 { background: #7cb8d4; color: #FFF; font-weight: bold;} .pageTitleJp01-Pk01 { background: #f3447f; color: #FFF; font-weight: bold; padding-bottom: 24px;} .pageTitleJp01-Gn01 { background: #056928; color: #FFF; font-weight: bold; padding-bottom: 24px;} .pageTitleJp01-Gn02 { background: #afcd49; border-bottom: #408F67 solid 1px; color: #FFF; font-weight: bold; padding-bottom: 24px;} .pageTitleJp01-Gn03 { background: #00b4b6; color: #FFF; font-weight: bold; padding-bottom: 24px;} .pageTitleJp01-Rd01 { background: #ff0000; color: #FFF; font-weight: bold; padding-bottom: 24px;} .pageTitleJp02 { position: absolute; top: 50%; font-size: 142.9%; line-height: 2; font-weight: bold; z-index: 1;} .pageTitleJp02LC { left: 3.125%; transform: translateY(-50%); } .pageTitleJp02LC02 { left: 3.125%; top: 25%; transform: translateY(-50%); } .pageTitleJp02RC { right: 3.125%; transform: translateY(-50%); } .subBgBl01 { background: #3E96C0; color: #FFF; padding: 8px 16px; line-height: 1.7;} .subBgBl01 .iconCard { display: inline-block; padding: 0 0 0 26px; } .subBgBl01 .iconCard img { height: 1.7em; width: auto; } .subBgGn01 { background: #88c9b5; color: #FFF; padding: 8px 16px; line-height: 1.7;} .subBgGn02 { background: #70bfb2; color: #FFF; padding: 8px 16px; line-height: 1.7;} .subBgGn03 { background: #9bc11c; color: #FFF; padding: 8px 16px; line-height: 1.7;} .subBgPk01 { background: #ea638e; color: #FFF; padding: 8px 16px; line-height: 1.7;} .subBgGy01 { background: #e2e7e5; color: #FFF; padding: 8px 16px; line-height: 1.7;} .subBgBl01 { background: #3e96c0; color: #FFF; padding: 8px 16px; line-height: 1.7;} .beforeCircleTxt { margin-left: 1em; text-indent: -1em; display: inline-block; } .beforeCircleTxt:before { content: '〇'; font-weight: normal;} .bbBl01 { border-bottom: #3E96C0 solid 1px;} .bbBl02 { border-bottom: #225568 solid 1px;} .bbPk01 { border-bottom: #F3447F solid 1px; } .bbGn01 { border-bottom: #b8dfd9 solid 1px; } .bbGn02 { border-bottom: #9bc11d solid 1px; } .box01 { overflow: hidden; padding: 20px; margin-left: 8px; border-left: #7CB8D4 solid 1px;} .box01Btn { margin-left: -20px; margin-bottom: 20px; } .box01.box1ColPk01 { border-left: #f3447f solid 1px; } .box02 { overflow: hidden; padding: 16px; background: #F0F8F7; border-bottom: #b8dfd9 solid 2px;} .box03 { overflow: hidden; border: #00b4b6 solid 1px;} .box03Wrap { overflow: hidden; padding: 16px; } .box03Row { padding: 16px; border-top: #00b4b6 solid 1px;} .ytPare { position:relative; width:100%; padding-top:56.25%;} .ytPare iframe{ position:absolute; top:0; right:0; width:100%; height:100%;} .indentList01 {} .indentList01 li { margin-left: 2.5em; text-indent: -2.5em; } .hasCheckbox {} .hasCheckbox li { position: relative; padding-left: 1.2em;} .hasCheckbox li input { position: absolute; top: 0.7em; left: 0; } .btns01 { text-align: center; letter-spacing: -0.4em; } .btns01 li { display: inline-block; letter-spacing: normal; width: 50%; box-sizing: border-box; padding: 0 4px;} .twoColList01 { overflow: hidden; } .twoColList01 li { width: 47%; float: left; margin: 0 0 40px;} .twoColList01 li:nth-child(2n) { float: right; } .twoColList01 li:nth-child(2n+1) { clear: left; } .twoColList02 { overflow: hidden; } .twoColList02 li { width: 47%; float: left; margin: 0 0 40px;} .twoColList02 li:nth-child(2n) { float: right; } .twoColList02 li:nth-child(2n+1) { clear: left; } .twoColList03 { overflow: hidden; } .twoColList03 li { width: 48.5%; float: left; margin: 0 0 40px;} .twoColList03 li:nth-child(2n) { float: right; } .twoColList03 li:nth-child(2n+1) { clear: left; } .twoColList04 { overflow: hidden; } .twoColList04 li { width: 47%; float: left; margin: 0 0 40px;} .twoColList04 li:nth-child(2n) { float: right; } .twoColList04 li:nth-child(2n+1) { clear: left; } .threeColList01 { overflow: hidden; } .threeColList01 li { width: 47%; float: left; margin: 0 0 40px;} .threeColList01 li:nth-child(2n) { float: right; } .threeColList02 { overflow: hidden; } .threeColList02 li { width: 47%; float: left; margin: 0 0 40px;} .threeColList02.threeColList02Pt02 li { margin-bottom: 24px; } .threeColList02 li:nth-child(2n) { float: right;} .threeColList02 li:nth-child(2n+1) { clear: left;} .threeColList03 { overflow: hidden; } .threeColList03 li { width: 47%; float: left; margin: 0 0 40px;} .threeColList03 li:nth-child(2n) { float: right;} .threeColList03 li:nth-child(2n+1) { clear: left;} .threeColList04 { overflow: hidden; } .threeColList04 li { width: 47%; float: left; margin: 0 0 40px;} .threeColList04 li:nth-child(2n) { float: right;} .threeColList04 li:nth-child(2n+1) { clear: left;} .threeColList05 { overflow: hidden; } .threeColList05 li { width: 50%; margin: 0 0 10px;} .threeColList05 li:nth-child(1) { width: 100%;} .threeColList05 li img { width: 100%;} .threeColList05 li:nth-child(2n) { float: left;} .threeColList05 li:nth-child(2n+1) { float: right;} .bnrList { display: flex; flex-wrap: wrap; justify-content: center;} .bnrList > li { width: calc( (100% - 16px)/2 ); margin: 16px 16px 0 0; } .bnrList > li:nth-child( -n + 2 ) { margin-top: 0;} .bnrList > li:nth-child( 2n ) { margin-right: 0;} .noteList {} .noteList li { margin-left: 1em; text-indent: -1em;} .noteList li:before { content: "※"; } .middotList01 {} .middotList01 li { margin-left: 1em; text-indent: -1em;} .middotList01 li:before { content: "・"; } .circleList01 {} .circleList01 li { margin-left: 1em; text-indent: -1em;} .circleList01 li:before { content: "●"; padding-right: 0.2em; } .circleList02 {} .circleList02 li { margin-left: 1em; text-indent: -1em;} .circleList02 li:before { content: "○"; padding-right: 0.2em; } .decimalList {} .decimalList li { list-style: decimal; margin-left: 1.5em;} .iconTri04List {} .iconTri04List li { background: url(images/icon_tri04.png) 0 0.2em no-repeat; padding-left: 20px; margin: 0 0 8px; } .noteTxt { margin-left: 1em; text-indent: -1em;} .noteTxt:before { content: "※"; } .tiTxt { margin-left: 1em; text-indent: -1em;} .listInd2em {} .listInd2em li { margin-left: 2em; text-indent: -2em; } .aCList01 { letter-spacing: -0.4em; text-align: center;} .aCList01 li { display: inline-block; letter-spacing: normal; padding: 0 5px;} .instaList {} .instaList li { width: 50%; float: left; text-align: center; color: #E95514; font-weight: bold;} .instaList li .instaListImg { width: 50%; float: left; } .instaList li .instaListTxt { width: 50%; float: left; overflow: auto; position: relative; color: #E95514;} .instaList li .instaListTxt span { width: 100%; position: absolute; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); } .instaList li:nth-child(3n) { margin-left: 25%;} .dlPt01 { } .dlPt01 dt { float: left; margin-right: 1em; } .dlPt01 dd { overflow: hidden; } .tableWrap { overflow-x: auto; -webkit-overflow-scrolling: touch;} .tableWrap{ overflow: auto; white-space: nowrap; } .tableWrap::-webkit-scrollbar{ height: 5px; } .tableWrap::-webkit-scrollbar-track { background: #F1F1F1; } .tableWrap::-webkit-scrollbar-thumb { background: #BCBCBC; } .table01 { width: 100%; } .table01 th,.table01 td { border: #499CC4 solid 1px; line-height: 1.4; padding: 12px; vertical-align: middle;} .table01BgBl01 th,.table01BgBl01 td,.table01BgBl01 { background: #EBF4F9; } .table01W01 { width: 5em; } .table02 { width: 100%; } .table02 th,.table02 td { background: #EBF4F9; border: #3e96c0 solid 1px; line-height: 1.4; padding: 12px 16px; vertical-align: middle;} .table02 tr:nth-child(2n) th,.table02 tr:nth-child(2n) td { background: #FFF;} .table02 th { white-space: nowrap; width: 1%;} .table02 td {} .table03 { width: 100%; } .table03 th,.table03 td { background: #EBF4F9; border: #3e96c0 solid 1px; line-height: 1.4; padding: 6px 8px; vertical-align: middle;} .table03 tr:nth-child(2n) th,.table03 tr:nth-child(2n) td { background: #FFF;} .table03 th { font-size: 85.7%;} .table03 th.table03W01 { width: 25%;} .table03 td { font-size: 71.4%; } .colOr01 { color: #E95514; } .colOr02 { color: #f18700; } .colOr03 { color: #e84818; } .colBl01 { color: #4396C0; } .colBl02 { color: #036eb7; } .colBl03 { color: #225568; } .colBl04 { color: #577aad; } .colBl05 { color: #00238b; } .colBl06 { color: #3d96be; } .colBl07 { color: #4396c0; } .colBl08 { color: #1075BD; } .colBl09 { color: #4C86AD; } .colNv01 { color: #000F3A; } .colGn01 { color: #00AE00; } .colGn02 { color: #00c893; } .colGn03 { color: #9bc11d; } .colGn04 { color: #026b28; } .colGn05 { color: #6dbc7f; } .colGn06 { color: #0f653a !important; } .colGn07 { color: #1a653a; } .colGn08 { color: #00a199; } .colGn09 { color: #3b8c48; } .colGn10 { color: #70BFB2; } .colGn11 { color: #5BA262; } .colRd01 { color: #e50012; } .colRd02 { color: #ff0000; } .colGy01 { color: #595757; } .colGy01 a { color: #595757; } .colGy02 { color: #727171; } .colPk01 { color: #F3447F; } .colPk02 { color: #D8417E; } .colPk03 { color: #EB6BA3; } .colWh01 { color: #FFF; } .colYl01 { color: #D9AF00; } .colYl02 { color: #bd8c48; } .colYl03 { color: #F9ED00; } .del { color: #e50012; text-decoration: line-through;} .bgPk01 { background-color: #F3447F; } .bgPk02 { background-color: #F1B9CF; } .bgGn01 { background-color: #6DBC7F; } .bgGn02 { background-color: #1a653a; } .bgGn03 { background-color: #abc6b6; } .bgGn04 { background-color: #a7c74a; } .bgOr01 { background-color: #d9af00; } .bgWh01 { background-color: #FFF; } .bgBl01 { background-color: #4FABBB; } .bgBl02 { background-color: #0180b6; } .bgYl01 { background-color: #E7C149; } .bGn01 { border: #286F46 solid 1px;} .linkColGy01 { color: #595757 !important; } .linkColGn01 { color: #00AE00 !important; } .linkColBl01 { color: #54aacb !important; } .linkColYl01 { color: #FFF000 !important; } .linkColWh01 { color: #FFF !important; } .covidBtn {} .linkBtn01 { position: relative; display: inline-block; padding: 10px 24px 10px 44px; font-size: 114.3%; font-weight: bold; color: #FFF !important; background: #7CB8D4 url(images/icon_arrow01.jpg) 100% 0 no-repeat; background-size: 17px 100%; line-height: 1.2;} .linkBtn01:before { content: '▶'; position: absolute; top: 50%; left: 20px; transform: translateY(-50%);} .linkBtn01.linkBtn01ColPk01 { background: #f3447f url(images/icon_arrow02.jpg) 100% 0 no-repeat; background-size: 17px 100%;} .linkBtn01 img { width: auto; height: 1.2em; margin-right: 0.5em; line-height: 1;} .linkBtn02 { text-align: left; position: relative; display: inline-block; padding: 10px 60px 10px 10px; font-weight: bold; color: #FFF !important; background: #3e96c0 url(images/link_bg_bl01_02.jpg) 100% 0 no-repeat; background-size: 60px 100%; line-height: 1.2;} .linkBtn02 span { display: inline-block; background: url(images/link_bg_bl01_01.png) 100% 50% no-repeat; background-size: auto 32px; padding: 0 96px 0 0;} .linkBtn03 { position: relative; display: inline-block; padding: 8px 24px 8px 44px; font-size: 107.1%; color: #FFF !important; background: #9bc11c; line-height: 1.2;} .linkBtn03:before { content: '▶'; position: absolute; top: 50%; left: 20px; transform: translateY(-50%);} .linkBtnInBd { display: inline-block; padding: 8px; background: #3E96C0;} .linkBtnInBd span { display: block; padding: 0.7em 1.4em; border: #FFF 1px solid; color: #FFF; } .linkHasIcon { display: inline-block; background: #00B4B6; border-radius: 6px; padding: 6px 16px; font-weight: bold;} .linkHasIcon span { display: inline-block; font-size: 114.2%; line-height: 37px; color: #FFF;} .iconFormLink span { padding: 0 0 0 3em; background: url(images/icon_form.png) 0 50% no-repeat;} .iconMailLink span { padding: 0 1em 0 3em; background: url(images/icon_mail.png) 0 50% no-repeat;} .iconTelLink span { padding: 0 0 0 2em; background: url(images/icon_tel-w.png) 0 50% no-repeat;} .iconTelLink { padding: 6px 40px; } .summerBnrList { } .summerBnrList li { margin: 0 8px 0; width: 100%; } .summerBnrList li a { display: block; text-align: center; padding: 2px; font-size: 121.4%; line-height: 1.2; color: #FFF; font-weight: bold; background-color: #1A653A;} .summerBnrList li.bnrBlog a > span span { background-image: url(images/bnr_icon_blog.png);} .summerBnrList li.bnrPhoto a > span span { background-image: url(images/bnr_icon_photo.png);} .summerBnrList li.bnrMovie a > span span { background-image: url(images/bnr_icon_movie.png);} .summerBnrList li a > span { display: block; width: 100%; height: 100%; box-sizing: border-box; padding: 6px;} .summerBnrList li a > span span { padding: 16px 0 16px 70px; display: inline-block; background-position: 0 50%; background-repeat: no-repeat; } .iconCardPt01 { transform: translateY(8px) translateX(10px);} .iconCardPt02 { transform: translateY(-8px) translateX(10px);} .lh120 { line-height: 1.2;} .lh140 { line-height: 1.4;} .lh200 { line-height: 2.0;} .lsN { letter-spacing: normal !important; } .lsM0500 { letter-spacing: -0.05em; } .lsM01000 { letter-spacing: -0.1em; } .tInM05 { text-indent: -0.5em; } .imgL { text-align: center; padding-bottom: 24px; } .imgR { text-align: center; padding-bottom: 24px;} .imgLList { float: left; padding-bottom: 24px; overflow: hidden;} .imgLList li { float: left; width: 47.5%; } .imgLList li:nth-child(2n) { float: right; } /*flow chart*/ .contentNav01 { overflow: hidden; margin-top: -45px; padding: 0 0 70px; } .contentNav01 li { position: relative; padding: 0 0 32px; margin: 0 auto; } .contentNav01 li:last-child { padding: 0;} .contentNav01 li:before { content: ''; display: block; width: 5px; height: 100%; position: absolute; bottom: 4px; left: 50%; background: #036EB7; z-index: -1;} .contentNav01 li:nth-child(2):after { content: ""; position: absolute; bottom: 0; left: 50%; width: 0px; height: 0px; margin: auto; border-style: solid; border-color: #036EB7 transparent transparent transparent; border-width: 24px 16px 0 16px; margin-left: -14px;} .contentNav01 li:nth-child(3):before { display: none;} .contentNav01 li:nth-child(2) { width: 75%;} .contentNav01 li:nth-child(2) a { border-radius: 90px; font-size: 128.6%; padding: 14px 0 0;} .contentNav01 li a { display: block; height: 90px; box-sizing: border-box; padding: 20px 0 0; font-weight: bold; background: #FFF; border: #036EB7 solid 1px; font-size: 171.4%; text-align: center; line-height: 1.2; color: #036EB7;} .contentNav01 li a span { display: block; font-size: 75%; padding: 8px 0 0; color: #D9AF00;} .contentNav01 li a:hover { opacity: 1; } .contentNav01 li.active a, .contentNav01 li a:hover { background: #036EB7; color: #FFF;} .flowChart { text-align: center; bold; line-height: 1.2;} .flowChart > li { clear: left;} .flowChartStep01 {} .flowChartStep01 > ul > li { position: relative; overflow: hidden; } #flowChartStep01-02 { position: absolute; bottom: 0; left: 0; width: 100%; } .flowChartStep01Txt01 { font-size: 100%; font-weight: bold; padding: 44px 0 16px;} .flowChartStep01Txt0101 { background: url(images/flow-chart_img01.png) 50% 0 no-repeat; background-size: auto 32px;} .flowChartStep01Txt0102 { background: url(images/flow-chart_img02.png) 50% 0 no-repeat; background-size: auto 32px;} .flowChartStep01Txt0103 { background: url(images/flow-chart_img01-02.png) 50% 0 no-repeat; background-size: auto 32px;} .flowChartStep01Txt0103 a { color: #E84818 !important;} .flowChartStep01Txt02 { font-size: 114.3%; border: #5FAFCE solid 1px; padding: 18px 0; font-weight: bold;} .flowChartStep02 { } .flowChartStep02 .flowChartCh-25-25-50 li { padding-top: 60px; padding-bottom: 30px; } .flowChartStep02 .flowChartCh-25-25-50 li:before { background: #54aacb;} .flowChartStep02 .flowChartCh-25-25-50 li:after { border-color: #54aacb transparent transparent transparent; border-style: solid; border-width: 18px 10px 0 10px;} .flowChartStep02 img { width: auto; height: 20px; } .flowChartStep02Img { background: #FFF; padding: 16px 0;} .flowChartStep02Txt { background: #FFF; padding: 0 0 16px;} .flowChartStep03 { position: relative; } .flowChartStep03Txt01 { font-size: 114.3%; padding: 16px 8px; font-weight: bold; background: #A9D4E5; } .flowChartStep03Txt02 { font-size: 114.3%; padding: 16px 8px; font-weight: bold; background: #54AACB; color: #FFF; } .flowChartStep03Ul { overflow: hidden; position: relative;} .flowChartStep03Ul:before { content: '直結'; position: absolute; top: 0; left: calc( 20% - 8px ); transform: translateY(75%) translateX(0); padding: 0 8px; z-index: 1; text-align: center; border-bottom: #54AACB solid 5px;} .flowChartStep03Ul li { position: relative; float: left; padding: 0 4px; box-sizing: border-box;} .flowChartStep03Ul li:nth-child(1) { width: 25%; } .flowChartStep03Ul li:nth-child(2) { width: 75%; } #flowChartImg06 { position: absolute; top: -7vw; left: 15%; width: 63%; z-index: 2;} .flowChartStep04 {} .flowChartStep04 p { background: #FFF; } .flowChartStep04 .flowChartCh-25-25-50 li { padding-top: 60px; padding-bottom: 30px; } .flowChartStep04 .flowChartCh-25-25-50 li:nth-child(2):before { background: #22ab38;} .flowChartStep04 .flowChartCh-25-25-50 li:nth-child(2):after { border-color: #22ab38 transparent transparent transparent; border-style: solid; border-width: 18px 10px 0 10px;} .flowChartStep04 .flowChartCh-25-25-50 li:nth-child(3):before { background: #f29700; bottom: 0;} .flowChartStep05 {} .flowChartStep05 .flowChartCh-50-50 li { padding-bottom: 80px; } .flowChartStep05 p { font-weight: bold; background: #FFF; border: #8AC5DB solid 1px; color: #54aacb; padding: 8px; } .flowChartStep05 .flowChartCh-50-50 li:nth-child(1):before { left: 75%; background: #22ab38;} .flowChartStep05 .flowChartCh-50-50 li:nth-child(1):after { left: 75%; border-color: #22ab38 transparent transparent transparent; bottom: 0; border-style: solid; border-width: 18px 10px 0 10px;} .flowChartStep05 .flowChartCh-50-50 li:nth-child(2):before { background: #f29700;} .flowChartStep05 .flowChartCh-50-50 li:nth-child(2):after { border-color: #f29700 transparent transparent transparent; bottom: 0; border-style: solid; border-width: 18px 10px 0 10px;} .flowChartStep06 { position: relative; } .flowChartStep06 .flowChartStep06Txt01 { background: #54AACB; color: #fff000; font-size: 114.3%; font-weight: bold; padding: 8px;} .flowChartStep06 #flowChartImg14 { position: absolute; top: 0; right: 0; width: 20%; transform: translateY(-90%) translateX(0);} .flowChartStep07 {} .flowChartStep07 p { padding: 8px 0; background: #FFF; } .flowChartStep07 .flowChartCh-25-25-50 li { padding-top: 48px; padding-bottom: 48px; } .flowChartStep07 .flowChartCh-25-25-50 li:nth-child(1):before { background: #54aacb; bottom: 0;} .flowChartStep07 .flowChartCh-25-25-50 li:nth-child(3):before { background: #f29700; bottom: 0;} .flowChartStep08 {} .flowChartStep08Txt01 { text-align: left; padding: 0 40% 16px 0;} .flowChartStep08Txt02 { background: #54AACB; color: #FFF; font-size: 114.3%; font-weight: bold; padding: 8px;} #flowChartImg09 { position: absolute; bottom: 24px; right: 0; width: 30%; } .flowChartStep08 .flowChartCh-25-75 li:nth-child(1):before { background: #54aacb; bottom: 0;} .flowChartStep08 .flowChartCh-25-75 li:nth-child(2):before { background: #f29700; left: 66.5%;} .flowChartStep08 .flowChartCh-25-75 li:nth-child(2):after { border-color: #f29700 transparent transparent transparent; border-style: solid; border-width: 18px 10px 0 10px; left: 66.5%;} .flowChartStep09 { overflow: visible; } .flowChartStep09 .flowChartCh-25-75 { overflow: visible; } .flowChartStep09 .flowChartCh-25-75 li:nth-child(1):before { background: #54aacb; bottom: 0;} .flowChartStep10 {} .flowChartStep10 p { padding: 8px 0; background: #FFF; } .flowChartStep10 .flowChartCh-25-25-50 li { padding-top: 40px; padding-bottom: 56px; } .flowChartStep10 .flowChartCh-25-25-50 li:nth-child(1):before { background: #54aacb; bottom: 0;} .flowChartStep10 .flowChartCh-25-25-50 li:nth-child(2):before { background: #22ab38; bottom: 0;} .flowChartStep10 .flowChartCh-25-25-50 li:nth-child(3):before { background: #f29700;} .flowChartStep10 .flowChartCh-25-25-50 li:nth-child(3):after { border-color: #f29700 transparent transparent transparent; border-style: solid; border-width: 18px 10px 0 10px;} .flowChartStep11 {} .flowChartStep11 .flowChartCh-25-25-50 li { padding-bottom: 56px; } .flowChartStep11 dl { background: #54AACB; color: #FFF; padding: 8px;} .flowChartStep11 dt { font-size: 114.3%; font-weight: bold; padding: 0 0 8px;} .flowChartStep11 dd { } .flowChartStep11 .flowChartCh-25-25-50 li:nth-child(1):before { background: #54aacb;} .flowChartStep11 .flowChartCh-25-25-50 li:nth-child(1):after { border-color: #54aacb transparent transparent transparent; border-style: solid; border-width: 18px 10px 0 10px;} .flowChartStep11 .flowChartCh-25-25-50 li:nth-child(2):before { background: #22ab38;} .flowChartStep11 .flowChartCh-25-25-50 li:nth-child(2):after { border-color: #22ab38 transparent transparent transparent; border-style: solid; border-width: 18px 10px 0 10px;} .flowChartStep11 .flowChartCh-25-25-50 li:nth-child(3):before { background: #f29700;} .flowChartStep11 .flowChartCh-25-25-50 li:nth-child(3):after { border-color: #f29700 transparent transparent transparent; border-style: solid; border-width: 18px 10px 0 10px;} .flowChartStep12 {} .flowChartStep12 p { background: #036EB7; color: #fff000; font-size: 114.3%; font-weight: bold; padding: 8px;} .flowChartStep12 p > span { display: block; padding: 32px 0 0; background: url(images/flow-chart_img13.png) 50% 0 no-repeat; background-size: auto 24px;} .flowChartStep12 p > span > span { display: block; padding: 0 0 32px; background: url(images/flow-chart_img13.png) 50% 100% no-repeat; background-size: auto 24px;} .flowChartCh-50-50 { overflow: hidden; } .flowChartCh-50-50 li { position: relative; float: left; padding: 0 4px; box-sizing: border-box;} .flowChartCh-50-50 li:nth-child(1) { width: 50%; } .flowChartCh-50-50 li:nth-child(2) { width: 50%; } .flowChartCh-25-25-50 { overflow: hidden;} .flowChartCh-25-25-50 li { position: relative; float: left; padding: 0 4px; box-sizing: border-box;} .flowChartCh-25-25-50 li:nth-child(1) { width: 25%; } .flowChartCh-25-25-50 li:nth-child(2) { width: 25%; } .flowChartCh-25-25-50 li:nth-child(3) { width: 50%; } .flowChartCh-25-75 { overflow: hidden;} .flowChartCh-25-75 li { position: relative; float: left; padding: 0 4px; box-sizing: border-box;} .flowChartCh-25-75 li:nth-child(1) { width: 25%; } .flowChartCh-25-75 li:nth-child(2) { width: 75%; } .flowChartCh-50-50 li:before, .flowChartCh-25-25-50 li:before, .flowChartCh-25-75 li:before { content: ''; display: block; width: 5px; height: 100%; position: absolute; bottom: 4px; left: 50%; z-index: -1;} .flowChartCh-50-50 li:after, .flowChartCh-25-25-50 li:after, .flowChartCh-25-75 li:after {content: ""; position: absolute; bottom: 0; left: 50%; width: 0px; height: 0px; margin: auto; margin-left: -8px;} /*play*/ .playBox01 { padding: 20px 10px; box-sizing: border-box; position: relative; border: #56A3C8 solid 1px; border-radius: 8px; margin: 48px 0 60px;} .playBox01L { } .playBox01R { } .playBox01Img01 { margin: -68px 0 0; text-align: center; } .playBox01Sub01 { text-align: center; font-size: 128.6%; border-bottom: #56A3C8 solid 1px; padding: 0 0 20px; margin: 0 0 16px;} .playBox01DL01 dt { text-align: center; font-size: 128.6%; color: #E95514; padding: 0 0 12px; line-height: 1.4; font-weight: bold;} .playBox01DL01 dd { padding: 0 10px 48px; } .playBox01DL01 dd:before { content: '○'; } .playBox01DL02 { font-size: 128.6%; color: #036EB7; text-align: center; line-height: 1.4;} .playBox01DL02 dt { border-bottom: #036EB7 solid 1px; padding: 0 0 6px; margin: 0 0 16px;} .playBox01DL02 dd { font-weight: bold; } /*kids park*/ #kidsParkSub01 { overflow: hidden; padding: 0 3.125%; background: url(images/kids_park_img01.png) 50% 0 no-repeat; background-size: cover; text-align: center;} #kidsParkImg02 { position: relative; z-index: 2; padding: 0 0 24px; } #kidsParkSub03 { padding: 26vw 0 12px; font-size: 114.3%; font-weight: bold; color: #F86796; background: url(images/kids_park_sub03.png) 50% 0 no-repeat; background-size: 100% auto;} #kidsParkSub0301 { float: left; font-size: 207.1%; font-weight: bold;} #kidsParkSub0302 { overflow: hidden;font-weight: bold; } #kidsParkSub0303 { clear: both; text-align: center; font-weight: bold; padding: 16px 0 0;} #kidsParkSub0303 a { display: inline-block; width: 200px; height: 62px; line-height: 62px; background: url(images/link_bg_gn01.png) 0 0 no-repeat; background-size: cover; color: #FFF; font-size: 128.6%;} #instaKids { min-height: calc( (46.875vw * 2.5) ); background: url(images/loading.gif) no-repeat 50% 50% ;} #instaKids.loaded { background: none;} /*beginners area*/ #beginnersAreaImg01 { } #beginnersAreaImg01Ch { margin-top: -20vw; z-index: 1; position: relative;} /*course*/ #courseMain { position: fixed; top: 48px; left: 0; width: 100%;} #courseMain.fixed { background: #FFF;} #courseMainBtm { padding-top: calc( 63vw + 50px + 32px + 48px ); } #courseMainBg { position: relative; height: 63vw; background: url(images/course_map.png) 50% 100% no-repeat; background-size: 140% auto;} #courseMainBg.courseMainBg2020 { background: url(images/course_map-2020.png) 50% 100% no-repeat;} #courseMain ul { } #courseMain ul li { position: absolute; width: 3.1%; top: 50%; left: 50%; line-height: 1; transform: translateY(-0%) translateX(-0%);} #courseMain ul li a { line-height: 1;} #courseMain ul li a img { vertical-align: top;} #courseA { margin-left: -29.90%; margin-top: -0.80%;} #courseB { margin-left: -8.50%; margin-top: -19.10%;} #courseC { margin-left: 7.60%; margin-top: -19.80%;} #courseD { margin-left: 16.00%; margin-top: -16.50%;} #courseE { margin-left: 32.00%; margin-top: -27.50%;} #courseF { margin-left: 27.90%; margin-top: -13.90%;} #courseG { margin-left: 9.10%; margin-top: -5.60%;} #courseH { margin-left: 21.00%; margin-top: -16.00%;} #courseI { margin-left: 11.30%; margin-top: -17.70%;} #courseJ { margin-left: -16.50%; margin-top: -2.90%;} #courseK { margin-left: -8.10%; margin-top: -6.00%;} #courseL { margin-left: -0.60%; margin-top: -6.00%;} #courseM { margin-left: -9.00%; margin-top: 3.90%;} #courseN { margin-left: 6.30%; margin-top: 1.80%;} #courseO { margin-left: 34.00%; margin-top: 8.50%;} #courseP { margin-left: 38.10%; margin-top: 13.00%;} #courseQ { margin-left: 45.10%; margin-top: -4.50%;} #courseTarget { position: absolute; top: 0%; left: 50%; width: 240px; padding: 0px 8px 12px; box-sizing: border-box; margin: -40px 0 0 -500px; transform: translateY(-0%) translateX(-0%); background: #FFF; transition: all .1s ease-in-out; display: none;} #courseTarget.visible { display: block; } .courseTable { width: 100%;} .courseTable th,.courseTable td { vertical-align: middle; padding: 8px; border: #6AAECE solid 1px; border-left: #f3f8fb solid 1px; border-right: #f3f8fb solid 1px; line-height: 1.4;} .courseTable th:nth-child(1) { border-left: #6AAECE solid 1px;} .courseTable td:last-child, .courseTable th:last-child { border-right: #6AAECE solid 1px;} .courseTable th {} .courseTable th[scope=col] { border: none; font-size: 85.7%; font-weight: 500; text-align: center; vertical-align: bottom;} .courseTable th[scope=col]:nth-child(1) { width: 6em; font-size: 100%; font-weight: 800; text-align: left;} .courseTable th[scope=col]:nth-child(2) { } .courseTable th[scope=col]:nth-child(3) { } .courseTable th[scope=col]:nth-child(4) { } .courseTable td { font-size: 92.9%; } .courseTable tr:nth-child(2n) { background: #ebf4f9; } .stviewLink { display: inline-block; border: #3E96C0 solid 1px; border-radius: 4px; padding: 12px; text-align: center; line-height: 1;} .stviewLink span { display: inline-block; background: url(images/icon_streetview.png) 0 50% no-repeat; line-height: 37px; padding-left: 50px;} /*fee*/ #feeMainIcon01 { position: absolute; top: 0; right: 0; width: 33%;} #feeImg01 { position: absolute; top: 32px; right: 0; width: 20%; } #feeImg02 { position: absolute; top: 0; right: 0; width: 20%; } #feeImg03 { position: absolute; top: 8px; right: 0; width: 20%; } .feeW650 { width: 75%; } .feeTable01 { width: 99%; box-sizing: border-box;} .feeTable01 th,.feeTable01 td { padding: 8px; border: #3E96C0 solid 1px; vertical-align: middle; line-height: 1.4; box-sizing: border-box;} .feeTable01.feeTable01aC th,.feeTable01.feeTable01aC td { text-align: center;} .feeTable01 th[scope=col] { border: none; padding-bottom: 4px; vertical-align: bottom; font-size: 85.7%; color: #4396C0; text-align: center; line-height: 1.2;} .feeTable01 td { font-size: 85.7%;} .feeTable01 tr.bgBl01 th, .feeTable01 tr.bgBl01 td { background: #EBF4F9;} .feeTableTh01 { width: 8em; } .feeTableTh02 { width: 6em; } .feeTableTh03 { width: 10em; } .feeTable01Txt01 { display: block; } .feeTable02 { width: 100%; box-sizing: border-box;} .feeTable02 th,.feeTable02 td { padding: 8px; border: #3E96C0 solid 1px; vertical-align: middle; line-height: 1.4; box-sizing: border-box;} .feeTable02.feeTable02aC th,.feeTable02.feeTable02aC td { text-align: center;} .feeTable02 th { font-weight: 500;} .feeTable02 th[scope="col"] { text-align: center;} .feeTable02 td { font-size: 85.7%;} .feeTable02 tr.bgBl01 th, .feeTable02 tr.bgBl01 td { background: #EBF4F9;} .feeDl01L { padding-bottom: 24px; } .feeDl01R {} #feeImg05 { text-align: center; } #feeImg06 { text-align: center; } #feeImg07 { text-align: center; } /*school*/ .contentNav02 { overflow: hidden; margin-top: -35px; padding: 0 0 48px; } .contentNav02 li { float: left; width: 20%; text-align: center; line-height: 1.2; font-weight: bold;} .contentNav02.contentNav02-w li { float: left; width: calc( 100% / 3 ); text-align: center; line-height: 1.2; font-weight: bold;} .contentNav02 li a:hover { opacity: 1; } .contentNav02 li a { position: relative; display: block; height: 70px; background: #FFF; border: #6EB0D0 solid 1px; border-right: none; color: #4396C0;} .contentNav02.contentNav02-bcR li a { border: #FF0000 solid 1px; } .contentNav02 li:last-child a { border-right: #6EB0D0 solid 1px; color: #8ec42d;} .contentNav02.contentNav02-bcR li:last-child a { border-right: #FF0000 solid 1px; } .contentNav02 li a span { position: absolute; top: 50%; left: 0; width: 100%; transform: translateY(-50%) translateX(0); } .contentNav02 li.active a, .contentNav02 li a:hover { background: #f7b52d; color: #FFF;} .contentNav02 li:nth-child(5).active a, .contentNav02 li:nth-child(5) a:hover { background: #88c9b5; color: #FFF;} .schoolTable01 { width: 100%; } .schoolTable01 th,.schoolTable01 td { padding: 8px; border: #6EB0D0 solid 1px; vertical-align: middle;} .schoolTable01.schoolTable01aC th,.schoolTable01.schoolTable01aC td { text-align: center;} .schoolTable01.schoolTable01Pk th,.schoolTable01.schoolTable01Pk td { border: #f3447f solid 1px;} .schoolTable01 .schoolTable01W01 { width: 25%; word-break: break-all;} .schoolTable01 .schoolTable01W02 { width: 6em; word-break: break-all;} .schoolTable01 .schoolTable01W03 { width: 4em; word-break: break-all;} .schoolTable01 .schoolTable01Bg01 th,.schoolTable01 .schoolTable01Bg01 td { background: #EBF4F9;} .schoolTable01 .schoolTable01Bg02 th,.schoolTable01 .schoolTable01Bg02 td { background: #feecf2;} .schoolTable01.schoolTable0102 { width: 99%; } .schoolTable01.schoolTable0102 th,.schoolTable01.schoolTable0102 td { padding: 8px 4px; font-size: 85.7%;} .schoolTable01 th[scope=col] { padding-bottom: 4px; font-size: 85.7%; text-align: center; color: #4396C0; border: none; vertical-align: bottom;} .schoolLevel {overflow: hidden; display: flex; flex-wrap: wrap; justify-content: center;} .schoolLevel li { max-width: 25%; float: left; padding: 0 4px; box-sizing: border-box; } .schoolContactList { overflow: hidden; } .schoolContactList li { float: left; width: 100%; margin: 0 0 16px; box-sizing: border-box; border: #6EB0D0 solid 1px; padding: 10px 0; text-align: center; line-height: 1.2; font-weight: bold;} .schoolContactList li > p { } .schoolContactList li > p > span { padding: 0 8px 8px; display: inline-block; border-bottom: #6EB0D0 solid 1px; } .schoolContactList li:nth-child(3n) { margin-right: 0;} .schoolContactList li dt { padding: 0 0 8px; color: #4396C0; font-size: 114.3%;} .schoolContactList li dd { font-size: 150.0%;} .schoolContactList li a { display: block; color: #727171 !important;} .schoolContactList li a span { display: inline-block; font-size: 114.3%; background: url(images/icon_tel.png) 0 50% no-repeat; padding-left: 18px;} /*mamamiki*/ .mamamikiChart { text-align: center; bold; line-height: 1.2;} .mamamikiChart > li { clear: left;} .mamamikiChartTime01 { text-align: left; margin-left: 3.5em; text-indent: -3em;} .mamamikiChartTime02 { text-align: left; margin-left: 3.5em; text-indent: -3.5em;} .mamamikiChartBox01 { padding: 8px; box-sizing: border-box; border: #f45087 1px solid; background: #FFF;} .mamamikiChartStep01 {} .mamamikiChartStep01 .mamamikiChartCh-50-50 li { padding-bottom: 40px; } .mamamikiChartStep01 span { display: block; padding-bottom: 16px;} .mamamikiChartStep02 {} .mamamikiChartStep02 .mamamikiChartCh-100 { padding-bottom: 40px; } .mamamikiChartStep02 dt { padding-bottom: 12px; text-align: left; margin-left: 3em; text-indent: -3em;} .mamamikiChartStep02 dd { padding-left: 4.2em; } .mamamikiChartStep03 {} .mamamikiChartStep03 .mamamikiChartCh-50-50 li { padding-bottom: 40px; } #schoolMamamikiSchedule03 { padding-bottom: 16px; } #schoolMamamikiSchedule03Txt { padding-bottom: 16px; } #schoolMamamikiSchedule04 { padding-bottom: 16px; } #schoolMamamikiSchedule04Txt {} .mamamikiChartCh-50-50 { overflow: hidden; } .mamamikiChartCh-50-50 > li { position: relative; float: left; padding: 0 4px; box-sizing: border-box;} .mamamikiChartCh-50-50 > li:nth-child(1) { width: 50%; } .mamamikiChartCh-50-50 > li:nth-child(2) { width: 50%; } .mamamikiChartCh-50-50 li:before { content: ''; display: block; background: #F45087; width: 1px; height: 100%; position: absolute; bottom: 0; left: 50%; z-index: -1;} .mamamikiChartCh-100 { position: relative; float: left; padding: 0 4px; box-sizing: border-box;} .mamamikiChartCh-100:before { content: ''; display: block; background: #F45087; width: 1px; height: 100%; position: absolute; bottom: 0; left: 25%; z-index: -1;} .mamamikiChartCh-100:after { content: ''; display: block; background: #F45087; width: 1px; height: 100%; position: absolute; bottom: 0; left: 75%; z-index: -1;} .mamamikiReservationTable { width: 100%; } .mamamikiReservationTable th,.mamamikiReservationTable td { border: #F3447F solid 1px; text-align: center; line-height: 1.4;} .mamamikiReservationTableTh01 { background: #F3447F; color: #FFF; padding: 16px 0; } .mamamikiReservationTableTd01 { padding: 16px 0; width: 50%; vertical-align: middle;} .mamamikiReservationTableTd02 { padding: 16px 8px 8px; box-sizing: border-box;} .mamamikiReservationTableTd03 { background: #FEECF2; padding: 16px 0;} /*neige*/ #neigeImg01 { position: absolute; top: -70px; right: 0; width: 20%; } #neigeImg02 { display: flex; flex-wrap: wrap; align-items: center; justify-content: center;} #neigeImg02 > p { width: 64px; margin-right: 24px;} #neigeImg02 > div { width: calc( 100% - 91px - 24px);} /*fssks*/ #fssksImg02 { display: flex; flex-wrap: wrap; align-items: center; justify-content: center;} #fssksImg02 > p { width: 64px; margin-right: 24px;} #fssksImg02 > div { width: calc( 100% - 91px - 24px);} /*access*/ #accessMapPare { position: relative; } #accessMap { position: relative; padding-bottom: 100vw; padding-top: 0; height: 0; overflow: hidden;} #accessMap iframe, #accessMap object, #accessMap embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%;} #accessTxt01 { position: absolute; bottom: 0; left: 0; width: 100%; z-index: 1; text-align: center; background: rgba(84,170,203,0.72); color: #FFF; font-weight: bold; line-height: 1.2;} #accessTxt01 a { display: block; padding: 1em; color: #FFF;} #winterAccessImg0301 { width: 240px; margin: 0 auto 24px; padding: 0 0 0 80px; font-weight: bold; background: url(images/winter_access_img03_01.png) 0 50% no-repeat; background-size: auto 100%;} #winterAccessDl01 { } #winter_access_img03_02 { text-align: center; padding: 0 0 40px;} #winter_access_img03_03 { text-align: center; border-top: #54AACB solid 2px;} .accessSlideNav { overflow: hidden; position: relative; margin: 0 0 24px;} .accessSlideNav:before { content: ""; width: 100%; height: 10px; position: absolute; top: 26px; left: 0; border: #54aacb 1px solid; box-sizing: border-box;} .accessSlideNav li { width: 33.3%; float: left; text-align: center;} .accessSlideNav li a { position: relative; display: block; padding: 40px 0 0; background-position: 50% 0; background-repeat: no-repeat; background-size: auto 25px; line-height: 1.2; font-weight: bold; color: #000000;} .accessSlideNav li a.active:after { content: ""; width: 100%; height: 10px; position: absolute; top: 26px; left: 0; box-sizing: border-box;background: #54aacb;} #accessSlideNav-01 { background-image: url(images/icon_access_map.png); } #accessSlideNav-02 { background-image: url(images/icon_access_car.png); } #accessSlideNav-03 { background-image: url(images/icon_access_train.png); } #accessSlideNav-04 { background-image: url(images/icon_access_shuttle.png); } a:hover img.winter_access_img04, a:active img.winter_access_img04 { opacity: 1 !important; } .accessBtn01 {} .accessBtn01 > li { overflow: hidden; line-height: 1.2;} .accessBtn01 > li > span { display: block; padding: 0.7em 0; font-size: 114.3%; font-weight: bold; color: #FFF; text-align: center; background: #54AACB;} .accessBtn01 li ul { overflow: hidden;} .accessBtn01 li li { width: 47%; float: left; padding-bottom: 100px; position: relative;} .accessBtn01 li li:before { content: ''; display: block; width: 5px; height: 90px; background: #54AACB; position: absolute; bottom: 5px; left: 50%; margin-left: -2px; z-index: -1; } .accessBtn01 li li:after { border-color: #54AACB transparent transparent transparent; border-style: solid; border-width: 18px 10px 0 10px; left: 50%; content: ""; position: absolute; bottom: 0; left: 50%; width: 0px; height: 0px; margin: auto; margin-left: -9px;} .accessBtn01 li li:nth-child(2) { float: right;} .accessBtn01 li li a { position: relative; display: block; padding: 0.7em 0; font-weight: bold; color: #FFF; text-align: center; box-sizing: border-box;} .accessBtn01 li li:nth-child(1) a { padding: 1.2em 0 1.2em 0;} .accessBtn01 li li a:after { border-color: transparent transparent #54AACB transparent; border-style: solid; border-width: 0 10px 18px 10px; left: 50%; content: ""; position: absolute; bottom: 0; left: 50%; width: 0px; height: 0px; margin: auto; margin-left: -9px; transform: translateY(100%);} .accessBtn01 li li:nth-child(1) a { background: #6dbc7f;} .accessBtn01 li li:nth-child(2) a { background: #d9af00;} .accessSub { display: inline-block; padding: 1em;} .accessSub02 { padding: 0.5em;} .busTable { width: 100%; } .busTable th,.busTable td { border: #62AACC solid 1px; padding: 4px; vertical-align: middle; font-weight: 500; position: relative;} .busTable td { text-align: center;} .busTableW01 { width: 9%; white-space: nowrap; } .busTableBg01 th,.busTableBg01 td,.busTableBg01 { background: #F8F8F8; } .busTableArrow { position: relative;} .busTableArrow:before { content: ""; width: 5px; height: calc( 100% - 30px ); background: #6dbc7f; position: absolute; top: 15px; left: 50%; margin-left: -2px; } .busTableArrow::after { border-color: #6dbc7f transparent transparent transparent; border-style: solid; border-width: 14px 7px 0 7px; left: 50%; content: ""; position: absolute; bottom: 10px; left: 50%; width: 0px; height: 0px; margin: auto; margin-left: -6px;} .busTableArrow02 { position: relative;} .busTableArrow02:before { content: ""; width: 5px; height: calc( 100% - 30px ); background: #d9af00; position: absolute; top: 15px; left: 50%; margin-left: -2px; } .busTableArrow02::after { border-color: #d9af00 transparent transparent transparent; border-style: solid; border-width: 14px 7px 0 7px; left: 50%; content: ""; position: absolute; bottom: 10px; left: 50%; width: 0px; height: 0px; margin: auto; margin-left: -6px;} .busTable02 { width: 840px;} .busTable02 th,.busTable02 td { border: #3e96c0 solid 1px; padding: 4px 1px; vertical-align: middle; font-weight: 500; position: relative; line-height: 1.2;} .busTable02 .bb th,.busTable02 .bb td { border-bottom: #3e96c0 solid 4px;} .busTable02 th:last-child,.busTable02 td:last-child { border-right: #3e96c0 solid 2px;} .busTable02 td { text-align: center;} /* .busTable02ThW-6-1 { width: 34%; } .busTable02ThW-6-2 { width: 11%; } .busTable02ThW-6-3 { width: 11%; } .busTable02ThW-6-4 { width: 22%; } .busTable02ThW-8 { width: 9%; } */ .busTable02ThW-6-1 { width: 286px; } .busTable02ThW-6-2 { width: 76px; } .busTable02ThW-6-3 { width: 76px; } .busTable02ThW-6-4 { width: 150px; } .busTable02ThW-8 { width: 70px; } .busTable02JR { padding-left: 16px; background: url(images/icon_jr.png) 0 50% no-repeat; background-size: 12px auto; color: #3B8C48;} .busTable02 th[scope="col"] { text-align: center; background: #E0F0F6;} .busTable02 th[scope="row"] { position: relative; padding-left: 30px;} .busTable02 th[scope="row"]:before { content: ''; display: block; width: 1px; height: 100%; min-height: 56px; position: absolute; top: 0; left: 15px; background: #000;} .busTable02 th[scope="row"]:after { content: ''; display: block; width: 9px; height: 9px; position: absolute; top: 50%; left: 10px; z-index: 1; transform: translateY(-4px); background: #FFF; border: #000 1px solid; border-radius: 8px;} .busTable02 th.busStart {} .busTable02 th.busStart:before { top: 50%;} .busTable02 th.busGoal {} .busTable02 th.busGoal:before { height: 50%; top: auto; bottom: 50%;} .busTable02 th.busGoal:after { content: ''; display: block; width: 25px; height: 14px; position: absolute; top: 50%; left: 2px; transform: translateY(-50%); background: #FFF url(images/icon_nakazato.png) 0 0 no-repeat; background-size: cover; border: none; border-radius: 0;} .busTable02 th.busStart02 {} .busTable02 th.busStart02:before { height: 50%; top: 50%;} .busTable02 th.busStart02:after { content: ''; display: block; width: 25px; height: 14px; position: absolute; top: 50%; left: 2px; transform: translateY(-50%); background: #FFF url(images/icon_nakazato.png) 0 0 no-repeat; background-size: cover; border: none; border-radius: 0;} .busTable02 th.busGoal02 {} .busTable02 th.busGoal02:before { top: auto; bottom: 50%;} .parkingPriceDl {} .parkingPriceDl dt { float: left; margin-right: 1em; } .parkingPriceDl dd { overflow: hidden; } .parkingTable { width: 99%; box-sizing: border-box;} .parkingTable th,.parkingTable td { border: #6DB6D1 solid 1px; padding: 10px 6px; box-sizing: border-box; vertical-align: middle;} .parkingTableW01 { width: 20%; } .parkingTableW02 { width: 30%;} .winterAccessJR {} .winterAccessJRList { display: flex; flex-wrap: wrap; width: 99%;} .winterAccessJRList > li { width: calc( (100% - 20px)/2 ); margin-right: 20px;} .winterAccessJRList > li:nth-child(2) { margin-right: 0;} .winterAccessJRList > li > a { display: block; box-sizing: border-box; padding: 10px; border: #4C86AD solid 1px; } .winterAccessJRListTxt01 { text-align: center; margin: -1.5em 0 8px;} .winterAccessJRListTxt01 > span { display: inline-block; padding: 0 4px; background: #FFF;} .winterAccessJRListTxt01 > span > span { display: inline-block; padding-left: 30px; background: url(images/icon_jr_gy01.png) no-repeat 0 50% /auto;} .winterAccessJRListTxt02 { line-height: 1.4;} .winterAccessJRListTxt02 > span { display: block; } .winterAccessJRListTxt02 > span:nth-child(1) { text-align: left;} .winterAccessJRListTxt02 > span:nth-child(2) { text-align: center;} .winterAccessJRListTxt02 > span:nth-child(3) { text-align: right;} /*restraunt*/ .restrauntInsta { overflow: hidden; } .restrauntInsta { min-height: calc( 44vw * 4 + 80px ); background: url(images/loading.gif) no-repeat 50% 50% ;} .restrauntInsta.loaded { background: none;} .restrauntInsta li { width: 47%; float: left; margin: 0 0 20px;} .restrauntInsta li:nth-child(2n) { float: right; } .restrauntInsta li:nth-child(2n+1) { clear: left; } /*freespace*/ #freeSpaceImg01 { position: absolute; bottom: -20px; right: 0; width: 20%; } /*season ticket*/ #seasonTicletTitle { letter-spacing: 0.1em; padding: 24px 0 0; margin: 0 0 24px; line-height: 1.2; font-weight: bold; text-align: left;} #seasonTicletTitle span { display: inline-block; background-repeat: no-repeat; } #seasonTicletTitle > span { background-image: url(images/season-ticket_title.png); background-position: 0 50%; padding: 16px 0 16px 140px; margin: 0 4%; background-size: auto 100%;} #seasonTicletTitle > span > span { font-size: 228.6%;} #seasonTicletTitle > span > span > span { font-size: 69%;} #seasonTicletTxt01 { font-size: 171.4%; letter-spacing: 0.1em; padding: 0 0 24px; margin: 0 0 32px; line-height: 1.2; /*font-family: 'Nunito', sans-serif;*/ font-weight: bold; text-align: center;} #seasonTicletTxt01 span { display: inline-block; background-repeat: no-repeat; background-size: auto 67px;} #seasonTicletTxt01 > span { background-image: url(images/season-ticket_img01.png); background-position: 0 50%; padding-left: 56px; margin: 0 4%;} #seasonTicletTxt01 > span > span { background-image: url(images/season-ticket_img02.png); background-position: 100% 50%; min-height: 82px; box-sizing: border-box; padding: 14px 0 0; padding-right: 52px;} .seasonTicketPass { font-family: 'M PLUS 1p', sans-serif; color: #58525B;} .seasonTicketPass > li { position: relative; border: #3e96c0 2px solid; border-radius: 10px; padding: 0 0 0 54px; margin: 48px 0 0; box-sizing: border-box;} .seasonTicketPass > li:nth-child(1) { margin-top: 0; } .seasonTicketPass > li:nth-child(2) { margin-top: 72px; } .seasonTicketPass > li:after { content: ''; display: block; width: 54px; height: 100%; position: absolute; top: 0; left: 0; background: #8ad0df url(images/season-ticket_txt01.png) no-repeat -2px -8px / 60px auto; } .seasonTicketPassTitle { padding: 16px 0 3px 20px; margin: 0 0 12px; font-size: 192.9%; color: #FFF; background: #3E96C0; font-weight: 900; letter-spacing: 0.1em; line-height: 1.37;} .seasonTicketPassTitle01 { font-size: 81.48%; letter-spacing: -0.05em;} .seasonTicketPassTitle02 { font-size: 95%; letter-spacing: -0.05em;} .seasonTicketPassSub01 { margin: 0 8px 7px 24px; padding: 0 0 6px; font-size: 150.0%; line-height: 1.38; font-weight: 700; color: #4396C0; border-bottom: #4396C0 solid 1px;} .seasonTicketPassSub02 { margin: 0 8px 10px 24px; padding: 0 0 3px; font-size: 128.6%; line-height: 1.38; font-weight: 700; color: #4396C0; border-bottom: #4396C0 solid 1px;} .seasonTicketPassTxt01 { margin: 0 8px 15px 24px; font-size: 121.4%; line-height: 1.58;} .seasonTicketPassTxt02 { padding: 13px 0 8px 21px; margin: 0 0 8px; background: #F3447F; color: #FFFF; line-height: 1.2;} .seasonTicketPassTxt02.seasonTicketPassTxt02-01 { padding: 11px 0 10px 0; text-align: center;} .seasonTicketPassTxt03 { padding: 0 10px 10px 20px; font-size: 85.7%; color: #666868; line-height: 1.5;} .seasonTicketPass > li .middotList01 { margin-left: 24px; line-height: 1.5;} .seasonTicketPassDl01 { font-size: 114.3%; line-height: 1.5; padding: 0 0 8px 20px; margin: 0 0 5px; border-bottom: #7BB7D4 solid 2px;} .seasonTicketPassDl01 dt { color: #453E49; } .seasonTicketPassDl01 dd { color: #666868; } .seasonTicketPassUl01 { line-height: 1.43; padding: 0 0 8px 20px; } .seasonTicketPassUl02 { line-height: 1.43; margin: 0 20px 8px 20px;} .seasonTicketPassUl02 > li { position: relative; padding-left: 1em;} .seasonTicketPassUl02 > li:before { content: "・"; position: absolute; top: 0; left: 0; } .seasonTicketPassUl02 li dt { float: left; } .seasonTicketPassUl02 li dd { overflow: hidden; } .seasonTicketPassUl0201 { display: inline-block; padding-left: 0.5em; } .seasonTicketPassBadge { position: absolute; width: 88px; top: -64px; right: 15px; color: #F3447F; text-align: center; font-weight: 700;} .seasonTicketPassBadge01 { } .seasonTicketPassBadge01 span { display: inline-block; font-size: 114.3%; letter-spacing: 0.2em;} .seasonTicketPassBadge01 span:nth-child(1) { transform: rotate( -15deg ) translateY(3px) translateX(-2px); } .seasonTicketPassBadge01 span:nth-child(2) {} .seasonTicketPassBadge01 span:nth-child(3) { transform: rotate( 15deg ) translateY(3px) translateX(2px); } .seasonTicketPassBadge02 { position: relative; width: 88px; height: 88px; background: #FFF; border-radius: 88px; border: #F3447F solid 1px; line-height: 1;} .seasonTicketPassBadge02:after { content: ""; display: block; width: 64px; height: 1px; background: #F3447F; position: absolute; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%) rotate(-45deg); margin: -6px 0 0;} .seasonTicketPassBadge02 p { position: absolute; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%);n} .seasonTicketPassBadge0201 { font-size: 171.4%; margin: -19px 0 0 -17px;} .seasonTicketPassBadge0202 { font-size: 171.4%; margin: 5px 0 0 17px;} .seasonTicketPassBadge0203 { font-size: 114.3%; margin: 28px 0 0;} .seasonTicketPass > li.seasonTicketPassColOr01 { border-color: #f69761;} .seasonTicketPass > li.seasonTicketPassColOr01:after { background-color: #F9C1A8;} .seasonTicketPassColOr01 .seasonTicketPassTitle { background-color: #F69761;} .seasonTicketPassColOr01 .seasonTicketPassSub01 { color: #F66015; border-color: #F66015;} .seasonTicketPassColOr01 .seasonTicketPassSub02 { color: #F66015; border-color: #F66015;} .seasonTicketPassColOr01 .seasonTicketPassDl01 { border-color: #F66015;} .seasonTicketPass > li.seasonTicketPassColBl01 { border-color: #1795a5;} .seasonTicketPass > li.seasonTicketPassColBl01:after { background-color: #9ed1cb;} .seasonTicketPassColBl01 .seasonTicketPassTitle { background-color: #1795a5;} .seasonTicketPassColBl01 .seasonTicketPassSub01 { color: #1795a5; border-color: #1795a5; font-size: 135.7%;} .seasonTicketPassColBl01 .seasonTicketPassSub01 span { letter-spacing: -0.15em; } .seasonTicketPassColBl01 .seasonTicketPassSub02 { color: #1795a5; border-color: #1795a5;} .seasonTicketPassColBl01 .seasonTicketPassDl01 { border-color: #1795a5;} .seasonTicketPass > li.seasonTicketPassColGn01 { border-color: #62bf81;} .seasonTicketPass > li.seasonTicketPassColGn01:after { background-color: #cbe4a7;} .seasonTicketPassColGn01 .seasonTicketPassTitle { background-color: #62bf81;} .seasonTicketPassColGn01 .seasonTicketPassSub01 { color: #62bf81; border-color: #62bf81; font-size: 135.7%;} .seasonTicketPassColGn01 .seasonTicketPassSub02 { color: #62bf81; border-color: #62bf81;} .seasonTicketPassColGn01 .seasonTicketPassDl01 { border-color: #62bf81;} .seasonTicletTable { width: 100%; } .seasonTicletTable th,.seasonTicletTable td { padding: 4px; font-size: 85.7%; vertical-align: middle; box-sizing: border-box;} .seasonTicletTable02 th,.seasonTicletTable02 td { padding: 8px; font-size: 85.7%; vertical-align: middle; box-sizing: border-box;} .seasonTicletTable02 th { white-space: nowrap;} .seasonTicletTableBl {} .seasonTicletTableBl th,.seasonTicletTableBl td { border: #3E96C0 solid 1px; } .seasonTicletTableBl01 th,.seasonTicletTableBl01 td,.seasonTicletTableBl01 { background: #EBF4F9;} .seasonTicletTablePk th,.seasonTicletTablePk td { border: #ed779c solid 1px; } .seasonTicletTablePk01 th,.seasonTicletTablePk01 td,.seasonTicletTablePk01 { background: #fdeff3;} .seasonTicletTableGn th,.seasonTicletTableGn td { border: #b8dfd9 solid 1px; } .seasonTicletTableGn01 th,.seasonTicletTableGn01 td,.seasonTicletTableGn01 { background: #F0F8F7;} .seasonTicletTableBBNone th,.seasonTicletTableBBNone td { border-bottom: none; } .seasonTicletTableW03 {} .seasonTicletTableW04 { width: 22%;} .seasonTicletTableW05 { width: 22%;} .seasonTicletTableW06 { width: 22%;} .seasonTicketPassNew { position: relative; } .seasonTicketPassNew:after { content: "New!"; display: inline-block; position: absolute; top: 0; left: 0; z-index: 10; transform: translateY(-4px) translateX(-2.5em); font-size: 1.9rem; font-size: 5.06667vw; font-weight: 700; color: #FFF; text-shadow: 2px 2px 0 #E60012, -2px -2px 0 #E60012,-2px 2px 0 #E60012, 2px -2px 0 #E60012,0px 2px 0 #E60012, 0-2px 0 #E60012,-2px 0 0 #E60012, 2px 0 0 #E60012;} /*plivacy policy*/ .plivacyDl { line-height: 2; } .plivacyDl dt { text-indent: -0.5em; font-size: 114.3%; font-weight: bold;} .plivacyDl dd { padding-left: 1em; padding-bottom: 32px;} .plivacyDl dd li { margin-left: 1.5em; text-indent: -1.5em;} /*.plivacyDl dd li { list-style: decimal; margin-left: 1em;}*/ /*post*/ #winterInformationSub01 { overflow: hidden; margin: 0 0 24px; color: #F18700; font-weight: 800; font-size: 171.4%; text-align: center; letter-spacing: 0.1em; line-height: 1.2;} #winterInformationSub01 span { display: inline-block; background-repeat: no-repeat;} #winterInformationSub0101 { padding-left: 48px; background-image: url(images/winter_information_title_bg01.png); background-position: 0 0; } #winterInformationSub0102 { padding: 31px 60px 31px 0; background-image: url(images/winter_information_title_bg02.png); background-position: 100% 0; } #winterEventSub01 { overflow: hidden; margin: 0 0 24px; color: #F18700; font-weight: 800; font-size: 171.4%; text-align: center; letter-spacing: 0.1em; line-height: 1.2;} #winterEventSub01 span { display: inline-block; background-repeat: no-repeat;} #winterEventSub0101 { padding-left: 56px; background-image: url(images/winter_event_title_bg01.png); background-position: 0 0; } #winterEventSub0102 { padding: 19px 86px 19px 0; background-image: url(images/winter_event_title_bg02.png); background-position: 100% 0; } #winterMovieSub01 { overflow: hidden; margin: 24px 0 24px; font-size: 171.4%; text-align: center; line-height: 1.2;} #winterMovieSub01 span { display: inline-block; padding: 0 0 0 2.5em; background: url(images/movie-garelley_title_bg01.png) 0 50% no-repeat; background-size: auto 100% ;} #winterPhotoSub01 { overflow: hidden; margin: 24px 0 24px; font-size: 171.4%; text-align: center; line-height: 1.2;} #winterPhotoSub01 span { display: inline-block; padding: 0 0 0 2.5em; background: url(images/photo-garelley_title_bg01.png) 0 50% no-repeat; background-size: auto 100% ;} /*post list*/ .postList { overflow: hidden; } .postList li { float: left; width: 47%; margin: 0 0 24px; } .postList li:nth-child(2n) { float: right; } .postList li:nth-child(2n+1) { clear: left;} .postListThumb { padding: 0 0 8px; } .postListTitle { line-height: 1.4; font-weight: bold; padding: 0 0 8px; } .postListDate { font-size: 85.7%; } .postTitle { font-size: 142.9%; font-weight: bold; padding: 0 0 4px; } .postDate { padding: 0 0 24px; } .postWraper { overflow: hidden; } .postWraper p { padding-bottom: 16px; } .movieList { overflow: hidden; } .movieList li { float: left; width: 47%; margin: 0 0 24px;} .movieList.movieList1 li { float: left; width: 100%; margin: 0 0 24px;} .movieList li:nth-child(2n) { float: right; } .movieList li:nth-child(2n+1) { clear: left;} .movieList li .moviePare { width: 100%; position:relative; padding-top:56.25%;} .movieList li iframe { position:absolute; top:0; right:0; width:100%; height:100%;} .photoSub { font-size: 128.6%; font-weight: bold; padding: 0 0 24px; text-align: center; } .photoList { overflow: hidden; padding-bottom: 80px;} .photoList li { float: left; width: 47%; margin: 0 0 24px; } .photoList li:nth-child(2n) { float: right; } .photoList li:nth-child(2n+1) { clear: left;} .singlePager { overflow: hidden; padding: 80px 0 0; clear: both;} .singlePager .prev { float: left; } .singlePager .next { float: right; } .toList { text-align: center; margin-top: -1.6em;} .pagerPare { text-align: center; } /*activity*/ #activityNav { overflow: hidden; margin: 0 0 56px; } #activityNav li { float: left; width: 50%; border: #4094C8 solid 1px; border-right: none; box-sizing: border-box;} #activityNav li:nth-child(2n) { border-right: #4094C8 solid 1px;} #activityNav li:nth-child(1), #activityNav li:nth-child(2) { border-bottom: none;} #activityNav li button { cursor: pointer; background: #FFF; border: none; outline-style: none; width: 100%; font-size: 114.3%; padding: 10px 0; text-align: center; font-weight: bold; color: #4094C8;} #activityNav li button.is-checked { background: #4094C8; color: #FFF;} #activityList { overflow: hidden; } #activityList li { float: left; width: 50%; margin: 0 0 40px; text-align: center; box-sizing: border-box; border-right: #FFF 1px solid;} #activityList li a { position: relative; display: block; box-sizing: border-box; padding: 32px 0; line-height: 1.47;} #activityList li a:after { content: ""; position: absolute; top: 0; left: 50%; margin-left: -10px; border-color: #FFF transparent transparent transparent; border-style: solid; border-width: 9px 10px 0 10px;} #activityList li.forest-adventure a { background-color: #8EC21F; } #activityList li.family-short-course a { background-color: #84c689; } #activityList li.golf-practice a { background-color: #b8d469; } #activityList li.mtb a { background-color: #b9aa1f; } #activityList li.cross-country a { background-color: #b8bd72; } #activityList li.daigenta-canion a { background-color: #ed7d5c; } #activityList li.naturecraft a { background-color: #ffd618; } #activityList li.kayak a { background-color: #30b5b0; } #activityList li.sup a { background-color: #439dd9; } #activityList li.nordic-walk a { background-color: #f9b233; } #activityList li.pizza a { background-color: #89ba1d; } #activityList li.ground-golf a { background-color: #def4cd; } #activityList li.disc-golf a { background-color: #f7dfe2; } #activityList li.auto-camp a { background-color: #f9b233; } #activityList li.indoor-activity a { background-color: #89ba1d; } #activityList li.bbq a { background-color: #a9d5f3; } .activityListArea { font-weight: bold; padding: 0 0 8px; } .activityListImg { padding: 0 16px 16px; } .activityListTxt {} .activityListTxt span { display: block; } /*forest-adventure*/ body.forest-adventure { background: url(images/forest-adventure_body_bg.jpg); } body.forest-adventure #contentArticle { padding-bottom: 0; } #forestAdventureBg { text-align: center; padding: 80px 3.125% 0; background: url(images/summer_index_forest-adventure_bg.png) 50% 0 no-repeat; } .forestAdventureImg01 { background: url(images/forest-adventure_img01.png) 100% 2em no-repeat; background-size: 25% auto;} #forestAdventureBgWh { background: #FFF; padding: 40px 0 0;} .forestAdventureTable01 { width: 100%;} .forestAdventureTable01 th,.forestAdventureTable01 td { border: #888 solid 1px; padding: 1em 0.5em; vertical-align: middle;} .forestAdventureTable01 th { border-right: #efefef solid 1px; white-space: nowrap; padding: 1em; text-align: center;} .forestAdventureTable01Td01 { background: #FDFCED;} .forestAdventureAccdBox { border: #888 solid 1px; } .forestAdventureAccdTitle {} .forestAdventureAccdTitle a { position: relative; display: block; color: #FFF; padding: 1.3em 0;} .forestAdventureAccdTitle a:after { content: ""; display: inline-block; margin: 0 0 0 16px; width: 10px; height: 10px; border: 2px solid; border-color: transparent transparent #FFF #FFF; transform: rotate(-45deg);} .forestAdventureAccdSub { padding: 1.3em 0;} .forestAdventureAccdTar { display: none; } .forestAdventureAccdTarTxt01 { padding: 20px 14px; } .forestAdventureAccdTarDl01 {} .forestAdventureAccdTarDl01 dd { padding: 20px 14px 50px; } .forestAdventureAccdTarDl01 table { margin-bottom: 20px; } .forestAdventureAccdTarDl01 table th,.forestAdventureAccdTarDl01 table td { font-weight: 500; } .forestAdventureAccdLink { display: inline-block; padding: 0.5em 1em; color: #FFF !important;} #forestAdventureTel { border: #888 1px solid; padding: 20px;} #forestAdventureTelL { text-align: center; padding: 0 0 24px; } #forestAdventureTelLBg { display: inline-block; background: url(images/forest-adventure_img08.png) 0 50% no-repeat; padding-left: 100px;} #forestAdventureTelR {} #forestAdventureOl01 {} #forestAdventureOl01 li { position: relative; padding-bottom: 40px; clear: both; overflow: hidden;} #forestAdventureOl01 li:after { content: ""; position: absolute; top: 0; left: 85px; width: 1px; height: 100%; background: #286f46; z-index: 0;} #forestAdventureOl01 li:last-child:after { content: none;} #forestAdventureOl01 dt { float: left; position: relative; width: 12em; padding: 10px 0; font-weight: bold; text-align: center; border-radius: 32px; z-index: 1;} #forestAdventureOl01 dd { clear: left; padding: 24px 0 0 7em;} #forestAdventureYt { border: #CBCBCB solid 1px; text-align: center;} #forestAdventureYtL { padding: 20px; } #forestAdventureYtR {} #forestAdventureYtR img { width: 100%; } /*activity common*/ .activityTable01 { width: 100%; } .activityTable01 th,.activityTable01 td { border: #AECD47 solid 1px; padding: 4px; vertical-align: middle; box-sizing: border-box;} .activityTable01Bg01 th,.activityTable01Bg01 td,.activityTable01Bg01 { background-color: #E9F1CD;} .activityTable0102 tr:nth-child(2n+1) th,.activityTable0102 tr:nth-child(2n+1) td { background-color: #ebf3d2;} .activityTable0102 th { white-space: nowrap;} .activityTable01W01 { } .activityTable01W02 { } .activityTable01.courseLayoutTable { font-size: 85.7%;} .activityTable01.courseLayoutTable th,.activityTable01.courseLayoutTable td { text-align: center;} .activityTable02 { width: 100%; } .activityTable02 th,.activityTable02 td { border: #00B4B6 solid 1px; padding: 4px; vertical-align: middle; box-sizing: border-box;} .activityTable02 th { white-space: nowrap;} .activityBtnTxt { padding: 0 0 16px; } .activityBtn {} .activitySub01 { background: #9bc11c; color: #FFF; padding: 8px 16px; line-height: 1.7;} .activitySub01.activitySub01ColBl01 { background-color: #00B4B6; } .activitySub01.activitySub01ColBl01 span { color: #fff000; } .activitySub02 { border: #9bc11c solid 1px; border-bottom: none; padding: 8px 16px; line-height: 1.7;} .activitySub02.activitySub02ColBl01 { border: #00B4B6 solid 1px; border-bottom: none; color: #00B4B6;} .activityTileList01 {} .activityTileList01 li { padding-bottom: 8px; } .activityTileList01 li:last-child { padding-bottom: 0; } .activityTileList01 dt { float: left; width: 6.5em; text-align: right; margin-right: 1em;} .activityTileList01 dd { overflow: hidden; } /*golf*/ #golfImg01 { position: absolute; top: -56px; right: 8px; width: 25%; } #golfImg02 { position: relative; } #golfImg02 #golfImg02Ch { padding: 24px 0 0; } .termTimeList01 { overflow: hidden; border-bottom: #9BC11C 3px solid; color: #006934; font-size: 114.3%; font-weight: bold;} .termTimeList01 li { overflow: hidden; padding: 0 0 16px; } .termTimeList01 li:last-child { padding: 0 0 4px; } .termTimeList01 dt { } .termTimeList01 dd {} #golfImg05 { padding: 80px 0 24px; margin: 0 0 24px; background: url(images/golf_img05.png) 50% 0 no-repeat; background-size: auto 64px; border-bottom: #9BC11D solid 1px;} #golfImg06 { position: absolute; top: -48px; left: 0; width: 25%; } .golfImg06Txt { padding-left: 28%; } .cal_wrapper { max-width: 800px; min-width: 300px; margin: 2.0833% auto;} .googlecal { position: relative; padding-bottom: 100%; height: 0; overflow: hidden;} .googlecal iframe { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important;} @media only screen and (min-width: 600px) { .googlecal { padding-bottom: 75%; } } /*sitemap*/ .sitemapList {} .sitemapList > li { padding-bottom: 24px; float: left; width: 50%; padding-right: 1em; box-sizing: border-box;} .sitemapList > li > span, .sitemapList > li > a { font-weight: bold;} .sitemapList > li > span:before, .sitemapList > li > a:before { content: "・";} .sitemapList > li > ul { padding: 8px 0 0 1em;} .sitemapList > li > ul li { padding-bottom: 8px;} /*notfound*/ #notfoundTitle { } #notfoundTitle img { max-width: 40%; } /*send-package*/ #send-package { background: none; padding: 20px 0 0;} #sendPackageWrap { padding: 20px 0; border: #000F3A solid 1px; color: #000F3A;} #sendPackageWrap a { color: #000F3A !important;} .sendPackageTxt01 { border-top: #000F3A solid 1px; padding: 10px 0 0; } .sendPackageTxt02 { width: 260px; margin: 0 auto; line-height: 1.3;} /*rental*/ .volkl01 { padding: 0 0 32px;} .volkl01 p:nth-child(1) { padding: 0 0 16px; } .volkl01 p:nth-child(2) {} .rentalUl01 { padding: 16px 0; margin: 0 0 16px; background: #ecf4f9; border: #4e97c2 solid 1px;} .rentalUl01 > li { padding: 0 0 8px; margin: 0 0 8px; border-bottom: #4e97c2 dotted 1px;} .rentalUl01 > li:last-child { padding: 0; margin: 0; border-bottom: none;} .rentalUl01 > li > dl { display: flex; flex-wrap: wrap; } .rentalUl01 > li > dl > dt { width: 175px; padding: 0 0 0 8px; box-sizing: border-box;} .rentalUl01 > li > dl > dd { width: calc( 100% - 175px ); } /**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ /* SP向けレイアウトの指定 *//******************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ @media only print, screen and ( max-width: 600px ) { .pcDisp { display: none !important; } .spclB { clear: both; } .spdB { display: block; } .spaL { text-align: left !important; } #sbi_images { display: flex; flex-wrap: wrap; justify-content: space-between; } .sbi_item { width: calc( 100% / 3) !important; } .sitemapList > li.spw100per { width: 100%; } /*--- winter index main ---*//********************************************************************************************************************************************************************************************************************************************************************************************************************/ #winterIndexBody {} #winterMainImg { height: 100vw;} #winterMainMt01 { height: 100vw;} #winterMainMt02 { height: 100vw;} #winterMainMt03 { height: 100vw;} #winterMainMt04 { height: 100vw;} #winterMainSnowfallPC { display: none;} #winterMainSnowfallSP { display: block; overflow: hidden; position: relative; height: 100vw; width: 100%; z-index: 11;} #winterMainTitle { width: 21.6%;} #winterMainTitle.visible { } #winterMainTitle #winterMainTitle01 img { } #winterMainTitle.active02 { transform: translateY(166.7%) translateX(-58%);} #winterMainTitle.active #winterMainTitle01 { } #winterMainTitle.active #winterMainTitle02 { } #winterMainTitle.active03 #winterMainTitle01 { } .winterMainObj { } .winterMainObj.visible { } .winterMainObj img { } .winterMainTree { } .winterMainTreeCircle01 { margin-left: -48.4%; top: 42.2%; width: 7.3%;} .winterMainTreeCircle02 { margin-left: -35.3%; top: 34.4%; width: 5.8%;} .winterMainTreeCircle03 { margin-left: -4.1%; top: 19.3%; width: 5.2%;} .winterMainTreeCircle04 { margin-left: 38.0%; top: 85.9%; width: 5.8%;} .winterMainTreeTriangle01 { margin-left: -7.4%; top: 21.2%; width: 3.5%;} .winterMainTreeTriangle02 { margin-left: 2.1%; top: 16.7%; width: 3.5%;} .winterMainTreeTriangle03 { margin-left: 22.8%; top: 32.8%; width: 3.5%;} .winterMainTreeTriangle04 { margin-left: 36.6%; top: 63.2%; width: 5.9%;} .winterMainTreeTriangle05 { margin-left: 43.9%; top: 65.3%; width: 7.8%;} .winterMainTreeTriangle06 { margin-left: 45.0%; top: 34.7%; width: 3.6%;} .winterMainTreeHexagon01 { margin-left: -39.4%; top: 44.5%; width: 3.8%;} .winterMainTreeHexagon02 { margin-left: 26.3%; top: 46.0%; width: 4.3%;} .winterMainCloud { } .winterMainCloud01 { margin-left: -57.4%; top: 31.3%; width: 11.6%;} .winterMainCloud02 { margin-left: -51.6%; top: 14.7%; width: 9.1%;} .winterMainCloud03 { margin-left: -23.8%; top: 16.9%; width: 11.6%;} .winterMainCloud04 { margin-left: 11.4%; top: 11.3%; width: 11.6%;} .winterMainCloud05 { margin-left: 39.5%; top: 16.1%; width: 16.6%;} .active.winterMainCloud01 {} @keyframes winterMaincloudAnimation01 { 0% { transform: translateY(0) translateX(0);} 25% { transform: translateY(0) translateX(-10%);} 75% { transform: translateY(0) translateX(1%);} 100% { transform: translateY(0) translateX(0);} } .active.winterMainCloud02 {} @keyframes winterMaincloudAnimation02 { 0% { transform: translateY(0) translateX(0);} 25% { transform: translateY(0) translateX(2%);} 75% { transform: translateY(0) translateX(-3%);} } .active.winterMainCloud03 { } @keyframes winterMaincloudAnimation03 { 0% { transform: translateY(0) translateX(0);} 25% { transform: translateY(0) translateX(-30%);} 75% { transform: translateY(0) translateX(30%);} } .active.winterMainCloud04 {} @keyframes winterMaincloudAnimation04 { 0% { transform: translateY(0) translateX(0);} 25% { transform: translateY(0) translateX(15%);} 75% { transform: translateY(0) translateX(-20%);} } .active.winterMainCloud05 { } @keyframes winterMaincloudAnimation05 { 0% { transform: translateY(0) translateX(0);} 25% { transform: translateY(0) translateX(1.4%);} 75% { transform: translateY(0) translateX(-1.4%);} } .winterMainLiftPare { position: absolute; margin-left: -6.9%; top: 15.8%; left: 50%; width: 27.8vw; height: 27.2vw; z-index: 8;} .winterMainLift { position: relative; width: 27.8vw; height: 27.2vw; left: 0; top: 0;} .winterMainLift, .winterMainLiftDown, .winterMainLiftUp { } .winterMainLiftDown { margin-left: 0; top: 0; left: auto; right: 4.3%; width: 11.2%;} .winterMainLiftUp { margin-left: 0; bottom: 0; left: auto; right: 78.2%; width: 10.4%;} .winterMainLiftDown01 { } .winterMainLiftDown02 { } .winterMainLiftDown03 { } .winterMainLiftDown04 { } .winterMainLiftDown05 { } @keyframes winterMainLiftDown { 0% { transform: translateY(0) translateX(0) scale(0,0);} 0.1% { transform: translateY(0) translateX(0) scale(1,1);} 90% { transform: translateY(23VW) translateX(-23VW) scale(1,1);} 90.5% { transform: translateY(23VW) translateX(-23VW) scale(0,0);} 91% { transform: translateY(0) translateX(0) scale(0,0);} } .winterMainLiftUp01 { } .winterMainLiftUp02 { } .winterMainLiftUp03 { } .winterMainLiftUp04 { } .winterMainLiftUp05 { } @keyframes winterMainLiftUp { 0% { transform: translateY(0) translateX(0) scale(0,0);} 0.1% { transform: translateY(0) translateX(0) scale(1,1);} 90% { transform: translateY(-23VW) translateX(23VW) scale(1,1);} 94% { transform: translateY(-23VW) translateX(23VW) scale(0,0);} 94.5% { transform: translateY(0) translateX(0) scale(0,0);} } .winterMainskier { transition: all .3s ease-in-out;} .winterMainskier01 { margin-left: -47.7%; top: 69.4%; width: 10.9%; } .winterMainskier02 { margin-left: -36.0%; top: 71.7%; width: 5.8%; } .winterMainskier03 { margin-left: -31.5%; top: 41.6%; width: 6.5%; } .winterMainskier04 { margin-left: -22.7%; top: 30.3%; width: 5.6%; } .winterMainskier05 { margin-left: 20.9%; top: 44.6%; width: 6.7%; } .winterMainskier06 { margin-left: 26.6%; top: 28.0%; width: 4.1%; } .winterMainskier07 { margin-left: 32.4%; top: 66.3%; width: 5.6%; } .winterMainskier08 { margin-left: 46.6%; top: 57.1%; width: 5.3%; } .winterMainskier01 { } @keyframes winterMainskier01 { 0% { transform: translateY(0) translateX(0) scale(0,0);} 0.01% { transform: translateY(0) translateX(0) scale(1,1);} 20% { transform: translateY(0) translateX(0) scale(1,1);} 75% { transform: translateY(30vw) translateX(-35vw) scale(1, 1);} 75.5% { transform: translateY(30vw) translateX(-35vw) scale(1, 1);} 90% { transform: translateY(30vw) translateX(-35vw) scale(0,0);} 95% { transform: translateY(0) translateX(0) scale(0,0);} } .winterMainskier02 { } @keyframes winterMainskier02 { 0% { transform: translateY(0) translateX(0) scale(0,0);} 0.01% { transform: translateY(0) translateX(0) scale(1,1);} 75% { transform: translateY(40vw) translateX(-45vw) scale(1, 1);} 75.5% { transform: translateY(40vw) translateX(-45vw) scale(1, 1);} 90% { transform: translateY(40vw) translateX(-45vw) scale(0,0);} 95% { transform: translateY(0) translateX(0) scale(0,0);} } .winterMainskier03 { } @keyframes winterMainskier03 { 0% { transform: translateY(0) translateX(0) scale(0,0);} 0.01% { transform: translateY(0) translateX(0) scale(1,1);} 25% { transform: translateY(2vw) translateX(10vw) scale(1,1);} 26% { transform: translateY(2vw) translateX(10vw) scale(-1, 1);} 75% { transform: translateY(40vw) translateX(-70vw) scale(-1, 1);} 75.5% { transform: translateY(40vw) translateX(-70vw) scale(-1, 1);} 90% { transform: translateY(40vw) translateX(-700px) scale(0,0);} 95% { transform: translateY(0) translateX(0) scale(0,0);} } .winterMainskier04 { } @keyframes winterMainskier04 { 0% { transform: translateY(0) translateX(0) scale(0,0);} 0.01% { transform: translateY(0) translateX(0) scale(1,1);} 10% { transform: translateY(2vw) translateX(2vw) scale(1,1);} 11% { transform: translateY(2vw) translateX(2vw) scale(-1, 1);} 33% { transform: translateY(4vw) translateX(-5vw) scale(-1, 1);} 33.5% { transform: translateY(4vw) translateX(-5vw) scale(1, 1);} 50% { transform: translateY(11vw) translateX(2vw) scale(1, 1);} 50.5% { transform: translateY(11vw) translateX(2vw) scale(-1, 1);} 75% { transform: translateY(22vw) translateX(-22vw) scale(-1, 1);} 75.5% { transform: translateY(22vw) translateX(-22vw) scale(-1, 1);} 76.5% { transform: translateY(22vw) translateX(-22vw) scale(1, 1);} 95% { transform: translateY(60vw) translateX(60vw) scale(1.2,1.2);} 95.5% { transform: translateY(60vw) translateX(60vw) scale(0,0);} 96% { transform: translateY(0) translateX(0) scale(0,0);} } .winterMainskier05 { } @keyframes winterMainskier05 { 0% { transform: translateY(0) translateX(0) scale(0,0);} 0.001% { transform: translateY(0) translateX(0) scale(1,1);} 10% { transform: translateY(8vw) translateX(5vw) scale(1,1);} 11% { transform: translateY(8vw) translateX(5vw) scale(-1,1);} 33% { transform: translateY(14vw) translateX(-5vw) scale(-1,1);} 33.1% { transform: translateY(14vw) translateX(-5vw) scale(1,1);} 50% { transform: translateY(20vw) translateX(0) scale(1,1);} 50.1% { transform: translateY(20vw) translateX(0) scale(-1,1);} 80% { transform: translateY(50vw) translateX(-30vw) scale(-1,1);} 80.1% { transform: translateY(50vw) translateX(-30vw) scale(0,0);} 80.2% { transform: translateY(0) translateX(0) scale(0,0);} } .winterMainskier06 { } @keyframes winterMainskier06 { 0% { transform: translateY(0) translateX(0) scale(0,0);} 0.01% { transform: translateY(0) translateX(0) scale(1,1);} 10% { transform: translateY(10vw) translateX(-10vw) scale(1,1);} 11% { transform: translateY(10vw) translateX(-10vw) scale(-1, 1);} 33% { transform: translateY(18vw) translateX(2vw) scale(-1, 1);} 33.5% { transform: translateY(18vw) translateX(2vw) scale(1, 1);} 50% { transform: translateY(30vw) translateX(-30vw) scale(1.2, 1.2);} 50.5% { transform: translateY(30vw) translateX(-30vw) scale(-1.2, 1.2);} 51% { transform: translateY(30vw) translateX(-30vw) scale(-1.2, 1.2);} 51.5% { transform: translateY(30vw) translateX(-30vw) scale(-1.2, 1.2);} 80% { transform: translateY(55vw) translateX(30vw) scale(-1.5, 1.5);} 80.5% { transform: translateY(55vw) translateX(30vw) scale(0, 0);} 95% { transform: translateY(0) translateX(0) scale(0,0);} } .winterMainskier07 { } @keyframes winterMainskier07 { 0% { transform: translateY(0) translateX(0) scale(0,0);} 0.0001% { transform: translateY(0) translateX(0) scale(1,1);} 20% { transform: translateY(4vw) translateX(-14vw) scale(1,1);} 21% { transform: translateY(4vw) translateX(-14vw) scale(-1,1);} 33% { transform: translateY(14vw) translateX(-5vw) scale(-1,1);} 33.1% { transform: translateY(14vw) translateX(-5vw) scale(1,1);} 50% { transform: translateY(20vw) translateX(0) scale(1,1);} 50.1% { transform: translateY(20vw) translateX(0) scale(-1,1);} 80% { transform: translateY(50vw) translateX(-30vw) scale(-1,1);} 80.1% { transform: translateY(50vw) translateX(-30vw) scale(0,0);} 80.2% { transform: translateY(0) translateX(0) scale(0,0);} } .winterMainskier08 { } @keyframes winterMainskier08 { 0% { transform: translateY(0) translateX(0) scale(0,0);} 0.0001% { transform: translateY(0) translateX(0) scale(1,1);} 20% { transform: translateY(4vw) translateX(14vw) scale(1,1);} 21% { transform: translateY(4vw) translateX(14vw) scale(-1,1);} 33% { transform: translateY(8vw) translateX(8vw) scale(-1,1);} 33.1% { transform: translateY(8vw) translateX(8vw) scale(1,1);} 50% { transform: translateY(16vw) translateX(20vw) scale(1,1);} 50.1% { transform: translateY(16vw) translateX(20vw) scale(-1,1);} 80% { transform: translateY(80vw) translateX(-24vw) scale(-1,1);} 80.1% { transform: translateY(80vw) translateX(-24vw) scale(0,0);} 80.2% { transform: translateY(0) translateX(0) scale(0,0);} } .winterMainAnimal { transition: all .3s ease-in-out;} .winterMainAnimalBear { margin-left: -30.2%; top: 52.1%; width: 10.5%;} .winterMainAnimalBird { margin-left: 4.2%; top: 22.4%; width: 5.6%;} .winterMainAnimalRabbit { margin-left: 31.6%; top: 23.9%; width: 6.6%;} .winterMainAnimalGoat { margin-left: 34.6%; top: 44.5%; width: 9.3%;} .winterMainAnimalA { } .winterMainAnimalB { } .blink .winterMainAnimalA { } .blink .winterMainAnimalB { } .winterMainSnowman { margin-left: 14.6%; top: auto; bottom: 0.5%; width: 8.6%;} .winterMainSnowmanChild { margin-left: 9.3%; top: auto; bottom: 0.5%; width: 5.5%;} .winterMainSnowmanSki { margin-left: 23.6%; top: auto; bottom: 0.5%; width: 10.2%;} .active.winterMainSnowman {} @keyframes SnowmanAnimation {} .active.winterMainSnowmanChild {} @keyframes SnowmanChildAnimation {} .winterMainTrain { transition: all .3s ease-in-out;} .winterMainTrain01 { margin-left: -13.9%; top: auto; bottom: 1.5%; width: 16.7%;} .winterMainTrain02 { margin-left: -30.9%; top: auto; bottom: 1.5%; width: 16.7%;} .winterMainTrain03 { margin-left: -47.9%; top: auto; bottom: 1.5%; width: 16.7%;} .winterMainTrain04 { margin-left: -64.9%; top: auto; bottom: 1.5%; width: 16.7%;} .winterMainTrain05 { margin-left: -81.9%; top: auto; bottom: 1.5%; width: 16.7%;} #winterMainSnowDome { width: 28vw; position: absolute; top: 50%; left: 50%; z-index: 10; transform: translateY(-33%) translateX(-50%); opacity: 0; transition: all .3s ease-in-out;} #winterMainSnowDome.visible { opacity: 1;} #winterMainSnowDomeCircle { } #winterMainSnowDomeSnow { border-radius: 28vw; width: 28vw; height: 28vw;} #winterMainSnowDomeSnowTar { border-radius: 28vw; width: 28vw; height: 28vw;} #winterMainSnowDomeSnowTar.visible { opacity: 1;} #winterMainSnowDomeBase { position: absolute; top: 0; left: 0; z-index: 20;} #winterMainSnowDomeReflect { position: absolute; top: 0; left: 0; z-index: 20;} #winterMainSummer { top: 16.9%; margin-left: -46.5%; width: 20%;} /*--- winter index main end ---*//********************************************************************************************************************************************************************************************************************************************************************************************************************/ /*--- winter index ---*//********************************************************************************************************************************************************************************************************************************************************************************************************************/ #winterIndexKidsParkStage { } #winterIndexKidsParkClick { } .winterIndexKidsParkStageCar { } #winterIndexKidsParkStageCar01 { animation: winterIndexKidsParkStageCar 15s ease-in-out 1;} #winterIndexKidsParkStageCar02 { animation: winterIndexKidsParkStageCar 21s ease-in-out 1;} #winterIndexKidsParkStageCar03 { animation: winterIndexKidsParkStageCar 23s ease-in-out 1;} #winterIndexKidsParkStageCar04 { animation: winterIndexKidsParkStageCar 27s ease-in-out 1;} @keyframes winterIndexKidsParkStageCar { 0% { transform: translateX(1000px);} 100% { transform: translateX(0);} } /*--- winter index end ---*//********************************************************************************************************************************************************************************************************************************************************************************************************************/ /*--- summer index main ---*//********************************************************************************************************************************************************************************************************************************************************************************************************************/ #summerIndexBody {} #summerMainImg { height: 100vw;} #summerMainMt01 { height: 100vw;} #summerMainMt02 { height: 100vw;} #summerMainMt03 { height: 100vw;} #summerMainMt04 { height: 100vw;} #summerMainTitle { width: 21.6%;} #summerMainTitle.visible { } #summerMainTitle #summerMainTitle01 img { } #summerMainTitle.active02 { transform: translateY(166.7%) translateX(-58%);} #summerMainTitle.active #summerMainTitle01 { } #summerMainTitle.active #summerMainTitle02 { } #summerMainTitle.active03 #summerMainTitle01 { } .summerMainObj { } .summerMainObj.visible { } .summerMainObj img { } .summerMainTree { } .summerMainTreeCircle01 { margin-left: -48.4%; top: 42.2%; width: 7.3%;} .summerMainTreeCircle02 { margin-left: -35.3%; top: 34.4%; width: 5.8%;} .summerMainTreeCircle03 { margin-left: -4.1%; top: 19.3%; width: 5.2%; z-index: 11;} .summerMainTreeCircle04 { margin-left: 38.0%; top: 85.9%; width: 5.8%;} .summerMainTreeCircle05 { margin-left: -44.3%; top: 71.3%; width: 4.5%;} .summerMainTreeCircle06 { margin-left: -40.5%; top: 69.0%; width: 5.4%;} .summerMainTreeTriangle01 { margin-left: -7.4%; top: 22.3%; width: 3.5%;} .summerMainTreeTriangle02 { margin-left: 2.1%; top: 17.6%; width: 3.5%;} .summerMainTreeTriangle03 { margin-left: 38.6%; top: 56.6%; width: 5.9%;} .summerMainTreeTriangle04 { margin-left: 43.9%; top: 63.9%; width: 7.8%;} .summerMainTreeTriangle05 { margin-left: 45.0%; top: 36.5%; width: 3.6%;} .summerMainTreeTriangle06 { margin-left: -37.7%; top: 61.0%; width: 6.6%;} .summerMainTreeTriangle07 { margin-left: 20.8%; top: 74.7%; width: 5.1%; z-index: 11;} .summerMainTreeTriangle08 { margin-left: 24.9%; top: 75.5%; width: 5.0%; z-index: 11;} .summerMainTreeTriangle09 { margin-left: 29.2%; top: 76.9%; width: 5.1%;} .summerMainTreeTriangle10 { margin-left: 26.0%; top: 35.0%; width: 5.0%;} .summerMainTreeTriangle11 { margin-left: 30.0%; top: 37.4%; width: 5.0%;} .summerMainTreeTriangle12 { margin-left: 34.0%; top: 41.5%; width: 5.0%;} .summerMainTreeTriangle13 { margin-left: 38.0%; top: 45.0%; width: 5.0%;} .summerMainTreeHexagon01 { margin-left: -39.4%; top: 44.5%; width: 3.8%;} .summerMainCloud { } .summerMainCloud01 { margin-left: -57.4%; top: 31.3%; width: 11.6%;} .summerMainCloud02 { margin-left: -51.6%; top: 14.7%; width: 9.1%;} .summerMainCloud03 { margin-left: -23.8%; top: 16.9%; width: 11.6%;} .summerMainCloud04 { margin-left: 11.4%; top: 11.3%; width: 11.6%;} .summerMainCloud05 { margin-left: 39.5%; top: 16.1%; width: 16.6%;} .active.summerMainCloud01 {} @keyframes summerMaincloudAnimation01 { 0% { transform: translateY(0) translateX(0);} 25% { transform: translateY(0) translateX(-10%);} 75% { transform: translateY(0) translateX(1%);} 100% { transform: translateY(0) translateX(0);} } .active.summerMainCloud02 {} @keyframes summerMaincloudAnimation02 { 0% { transform: translateY(0) translateX(0);} 25% { transform: translateY(0) translateX(2%);} 75% { transform: translateY(0) translateX(-3%);} } .active.summerMainCloud03 { } @keyframes summerMaincloudAnimation03 { 0% { transform: translateY(0) translateX(0);} 25% { transform: translateY(0) translateX(-30%);} 75% { transform: translateY(0) translateX(30%);} } .active.summerMainCloud04 {} @keyframes summerMaincloudAnimation04 { 0% { transform: translateY(0) translateX(0);} 25% { transform: translateY(0) translateX(15%);} 75% { transform: translateY(0) translateX(-20%);} } .active.summerMainCloud05 { } @keyframes summerMaincloudAnimation05 { 0% { transform: translateY(0) translateX(0);} 25% { transform: translateY(0) translateX(1.4%);} 75% { transform: translateY(0) translateX(-1.4%);} } .summerMainAnimal { transition: all .3s ease-in-out;} .summerMainAnimalBear { margin-left: -30.2%; top: 52.1%; width: 10.5%;} .summerMainAnimalBird { margin-left: 4.2%; top: 22.4%; width: 5.6%;} .summerMainAnimalRabbit { margin-left: 31.6%; top: 20.3%; width: 4.6%; line-height: 1;} .summerMainAnimalGoat { margin-left: 34.6%; top: 41.9%; width: 7.3%; line-height: 1; z-index: 9;} .summerMainAnimalA { } .summerMainAnimalB { } .blink .summerMainAnimalA { } .blink .summerMainAnimalB { } .summerMainTrain { transition: all .3s ease-in-out;} .summerMainTrain01 { margin-left: -13.9%; top: auto; bottom: 1.5%; width: 16.7%;} .summerMainTrain02 { margin-left: -30.9%; top: auto; bottom: 1.5%; width: 16.7%;} .summerMainTrain03 { margin-left: -47.9%; top: auto; bottom: 1.5%; width: 16.7%;} .summerMainTrain04 { margin-left: -64.9%; top: auto; bottom: 1.5%; width: 16.7%;} .summerMainTrain05 { margin-left: -81.9%; top: auto; bottom: 1.5%; width: 16.7%;} .summerMainPin { } .summerMainPin01 { margin-left: -24.0%; top: 40.3%; width: 2.8%;} .summerMainPin02 { margin-left: 16.0%; top: 26.6%; width: 2.8%;} .summerMainPin03 { margin-left: 6.0%; top: 85.5%; width: 2.8%;} .summerMainGolfer { } .summerMainGolfer01 { margin-left: 20.0%; top: 34.8%; width: 4.0%;} .summerMainAdventureStage { margin-left: -43.5%; bottom: auto; top: 52%; width: 87.1vw;} .summerMainSlider { } .summerMainSlider01 { margin-left: -41.6%; top: 47.3%; width: 5vw;} .summerMainSlider02 { margin-left: 44.7%; top: 34.2%; width: 3.8vw;} .active.summerMainSlider01 { animation: summerMainSliderAnimation01 16s ease-in-out infinite;/* transform-origin: 62% 50%;*/} @keyframes summerMainSliderAnimation01 { 0% { transform: translateY(0) translateX(0) scale(1,1);} 70% { transform: translateY(9.0vw) translateX(56.7vw) scale(1,1);} 71% { transform: translateY(9.0vw) translateX(56.7vw) scale(0,0);} 72% { transform: translateY(0) translateX(0) scale(0,0);} 99% { transform: translateY(0) translateX(0) scale(0,0);} } .active.summerMainSlider02 { animation: summerMainSliderAnimation02 10s ease-in-out infinite;/* transform-origin: 62% 50%;*/} @keyframes summerMainSliderAnimation02 { 0% { transform: translateY(0) translateX(0) scale(1,1);} 45% { transform: translateY(13.0vw) translateX(-17.8vw) scale(1,1);} 46% { transform: translateY(13.0vw) translateX(-17.8vw) scale(0,0);} 47% { transform: translateY(0) translateX(0) scale(0,0);} 99% { transform: translateY(0) translateX(0) scale(0,0);} } .summerMainMan { } .summerMainMan01 { margin-left: -17.0%; top: 66.7%; width: 2.4vw; z-index: 9;} .active.summerMainMan01 { animation: summerMainManAnimation01 16s ease-in-out infinite;/* transform-origin: 62% 50%;*/} @keyframes summerMainManAnimation01 { 0% { transform: translateY(0) translateX(0) scale(1,1);} 16% { transform: translateY(0) translateX(0) scale(1,1);} 19% { transform: translateY(0) translateX(0) scale(1.5,1.5);} 27% { transform: translateY(0) translateX(0) scale(1,1);} 99% { transform: translateY(0) translateX(0) scale(1,1);} } .summerMainKayakStage { margin-left: 12.1%; width: 28vw; z-index: 10;} .summerMainkayak { } .summerMainkayak01 { margin-left: -50%; top: -40%; width: 7.6vw;} .active.summerMainkayak01 { animation: summerMainkayakAnimation01 30s ease-in-out infinite;/* transform-origin: 62% 50%;*/} @keyframes summerMainkayakAnimation01 { 0% { transform: translateY(0) translateX(0) scale(1,1);} 1% { transform: translateY(0) translateX(0) scale(-1,1);} 10% { transform: translateY(0.5vw) translateX(2.0vw) scale(-1,1);} 20% { transform: translateY(1.0vw) translateX(3.0vw) scale(-1,1);} 30% { transform: translateY(2.0vw) translateX(3.5vw) scale(-1,1);} 60% { transform: translateY(3.0vw) translateX(18.0vw) scale(-1,1);} 61% { transform: translateY(3.0vw) translateX(18.0vw) scale(1,1);} } #summerMainSnowDome { width: 28vw; position: absolute; top: 50%; left: 50%; z-index: 10; transform: translateY(-33%) translateX(-50%); opacity: 0; transition: all .3s ease-in-out;} #summerMainSnowDome.visible { opacity: 1;} #summerMainWinter { top: 16.9%; margin-left: -46.5%; width: 20%;} #summerMainWinterSnowDome { width: 20vw; } #summerMainWinterSnowDome.active01 { } #summerMainWinterSnowDome.visible { } #summerMainWinterSnowDomeCircle { } #summerMainWinterSnowDomeSnow { border-radius: 20vw; width: 20vw; height: 20vw;} #summerMainWinterSnowDomeSnowTar { border-radius: 20vw; width: 20vw; height: 20vw;} #summerMainWinterSnowDomeSnowTar.visible {} #summerMainWinterSnowDomeBase {} #summerMainWinterSnowDomeReflect {} /*--- summer index main end ---*//********************************************************************************************************************************************************************************************************************************************************************************************************************/ /*--- summer index ---*//********************************************************************************************************************************************************************************************************************************************************************************************************************/ #summerIndexForest { } #summerIndexForestAdventureBg { overflow: hidden;} #summerIndexForestStage { } #summerIndexForestAdventureSub02 { } .summerIndexForestObj {} #summerIndexForestAdventureAnimalBird { } #summerIndexForestAdventureAnimalGoat { } #summerIndexForestAdventurePlayer01 { margin-left: -52%; top: 40.0%; width: 8.3%; } #summerIndexForestAdventurePlayer02 { margin-left: -52%; top: 41.5%; width: 9.0%; } #summerIndexForestAdventurePlayer03 { margin-left: -52%; top: 38.3%; width: 7.0%; } .summerIndexForestAdventurePlayerA { } .summerIndexForestAdventurePlayerB { } .blink .summerIndexForestAdventurePlayerA { } .blink .summerIndexForestAdventurePlayerB { } #summerIndexForestBtn01 { } #summerIndexForestAdventurePlayer01 { animation: summerIndexForestAdventurePlayer01 70s linear infinite; transform-origin: 100% 0%;} @keyframes summerIndexForestAdventurePlayer01 { 0% { transform: translateY(0) translateX(0) scale(0,0) rotate(0deg);} 3% { transform: translateY(0) translateX(0) scale(1,1) rotate(0deg);} 15% { transform: translateY(0) translateX(0) scale(1,1) rotate(0deg);} 60% { transform: translateY(12.4vw) translateX(42.7vw) scale(0.75,0.75) rotate(-10deg);} 70% { transform: translateY(12.4vw) translateX(51.7vw) scale(0.75,0.75) rotate(-10deg);} 90% { transform: translateY(6.0vw) translateX(74.0vw) scale(1,1) rotate(-10deg);} 90.1% { transform: translateY(6.0vw) translateX(74.0vw) scale(0,0) rotate(-10deg);} 99% { transform: translateY(6.0vw) translateX(74.0vw) scale(0,0) rotate(-10deg);} 99.5% { transform: translateY(0) translateX(0) scale(0,0) rotate(0deg);} } #summerIndexForestAdventurePlayer02 { animation: summerIndexForestAdventurePlayer02 45s linear infinite; transform-origin: 100% 0%;} @keyframes summerIndexForestAdventurePlayer02 { 0% { transform: translateY(0) translateX(0) scale(0,0) rotate(0deg);} 3% { transform: translateY(0) translateX(0) scale(0.7,0.7) rotate(0deg);} 15% { transform: translateY(0) translateX(0) scale(0.7,0.7) rotate(0deg);} 60% { transform: translateY(11.6vw) translateX(42.7vw) scale(0.48,0.48) rotate(-10deg);} 70% { transform: translateY(11.6vw) translateX(51.7vw) scale(0.48,0.48) rotate(-10deg);} 90% { transform: translateY(5.0vw) translateX(74.0vw) scale(0.6,0.6) rotate(-10deg);} 93% { transform: translateY(5.0vw) translateX(74.0vw) scale(0.6,0.6) rotate(-10deg);} 94% { transform: translateY(5.0vw) translateX(74.0vw) scale(0,0) rotate(-10deg);} 95% { transform: translateY(0) translateX(0) scale(0,0) rotate(0deg);} 100% { transform: translateY(0) translateX(0) scale(0,0) rotate(0deg);} } #summerIndexForestAdventurePlayer03 { animation: summerIndexForestAdventurePlayer03 30s linear infinite; transform-origin: 100% 0%;} @keyframes summerIndexForestAdventurePlayer03 { 0% { transform: translateY(0) translateX(0) scale(0,0) rotate(0deg);} 3% { transform: translateY(0) translateX(0) scale(0.8,0.8) rotate(0deg);} 15% { transform: translateY(0) translateX(0) scale(0.8,0.8) rotate(0deg);} 60% { transform: translateY(12.8vw) translateX(42.7vw) scale(0.5,0.5) rotate(-10deg);} 70% { transform: translateY(12.8vw) translateX(51.7vw) scale(0.5,0.5) rotate(-10deg);} 90% { transform: translateY(7.0vw) translateX(74.0vw) scale(0.6,0.6) rotate(-10deg);} 93% { transform: translateY(7.0vw) translateX(74.0vw) scale(0.6,0.6) rotate(-10deg);} 94% { transform: translateY(7.0vw) translateX(74.0vw) scale(0,0) rotate(-10deg);} 95% { transform: translateY(0) translateX(0) scale(0,0) rotate(0deg);} 100% { transform: translateY(0) translateX(0) scale(0,0) rotate(0deg);} } /*--- summer index end ---*//********************************************************************************************************************************************************************************************************************************************************************************************************************/ /*--- general ---*/ .spfs10 { font-size: 71.4% !important;} .spfs11 { font-size: 78.6% !important;} .spfs12 { font-size: 85.7% !important;} .spfs14 { font-size: 100.00% !important;} .spfs16 { font-size: 114.30% !important;} .spfs18 { font-size: 128.60% !important;} .spfs20 { font-size: 142.90% !important;} .spfs24 { font-size: 171.40% !important;} .spmB6 { margin-bottom: 6px !important; } .spmB7 { margin-bottom: 7px !important; } .spmB8 { margin-bottom: 8px !important; } .spmB9 { margin-bottom: 9px !important; } .spmB10 { margin-bottom: 10px !important; } .spmB11 { margin-bottom: 11px !important; } .spmB12 { margin-bottom: 12px !important; } .spmB13 { margin-bottom: 13px !important; } .spmB14 { margin-bottom: 14px !important; } .spmB15 { margin-bottom: 15px !important; } .spmB16 { margin-bottom: 16px !important; } .spmB17 { margin-bottom: 17px !important; } .spmB18 { margin-bottom: 18px !important; } .spmB19 { margin-bottom: 19px !important; } .spmB20 { margin-bottom: 20px !important; } .spmB21 { margin-bottom: 21px !important; } .spmB22 { margin-bottom: 22px !important; } .spmB23 { margin-bottom: 23px !important; } .spmB24 { margin-bottom: 24px !important; } .spmB25 { margin-bottom: 25px !important; } .spmB26 { margin-bottom: 26px !important; } .spmB27 { margin-bottom: 27px !important; } .spmB28 { margin-bottom: 28px !important; } .spmB29 { margin-bottom: 29px !important; } .spmB30 { margin-bottom: 30px !important; } .spmB31 { margin-bottom: 31px !important; } .spmB32 { margin-bottom: 32px !important; } .spmB33 { margin-bottom: 33px !important; } .spmB34 { margin-bottom: 34px !important; } .spmB35 { margin-bottom: 35px !important; } .spmB36 { margin-bottom: 36px !important; } .spmB37 { margin-bottom: 37px !important; } .spmB38 { margin-bottom: 38px !important; } .spmB39 { margin-bottom: 39px !important; } .spmB40 { margin-bottom: 40px !important; } .spmB41 { margin-bottom: 41px !important; } .spmB42 { margin-bottom: 42px !important; } .spmB43 { margin-bottom: 43px !important; } .spmB44 { margin-bottom: 44px !important; } .spmB45 { margin-bottom: 45px !important; } .spmB46 { margin-bottom: 46px !important; } .spmB47 { margin-bottom: 47px !important; } .spmB48 { margin-bottom: 48px !important; } .spmB49 { margin-bottom: 49px !important; } .spmB50 { margin-bottom: 50px !important; } .spmB51 { margin-bottom: 51px !important; } .spmB52 { margin-bottom: 52px !important; } .spmB53 { margin-bottom: 53px !important; } .spmB54 { margin-bottom: 54px !important; } .spmB55 { margin-bottom: 55px !important; } .spmB56 { margin-bottom: 56px !important; } .spmB57 { margin-bottom: 57px !important; } .spmB58 { margin-bottom: 58px !important; } .spmB59 { margin-bottom: 59px !important; } .spmB60 { margin-bottom: 60px !important; } .spmB61 { margin-bottom: 61px !important; } .spmB62 { margin-bottom: 62px !important; } .spmB63 { margin-bottom: 63px !important; } .spmB64 { margin-bottom: 64px !important; } .spmB65 { margin-bottom: 65px !important; } .spmB66 { margin-bottom: 66px !important; } .spmB67 { margin-bottom: 67px !important; } .spmB68 { margin-bottom: 68px !important; } .spmB69 { margin-bottom: 69px !important; } .spmB70 { margin-bottom: 70px !important; } .spmB71 { margin-bottom: 71px !important; } .spmB72 { margin-bottom: 72px !important; } .spmB73 { margin-bottom: 73px !important; } .spmB74 { margin-bottom: 74px !important; } .spmB75 { margin-bottom: 75px !important; } .spmB76 { margin-bottom: 76px !important; } .spmB77 { margin-bottom: 77px !important; } .spmB78 { margin-bottom: 78px !important; } .spmB79 { margin-bottom: 79px !important; } .spmB80 { margin-bottom: 80px !important; } .spmB81 { margin-bottom: 81px !important; } .spmB82 { margin-bottom: 82px !important; } .spmB83 { margin-bottom: 83px !important; } .spmB84 { margin-bottom: 84px !important; } .spmB85 { margin-bottom: 85px !important; } .spmB86 { margin-bottom: 86px !important; } .spmB87 { margin-bottom: 87px !important; } .spmB88 { margin-bottom: 88px !important; } .spmB89 { margin-bottom: 89px !important; } .spmB90 { margin-bottom: 90px !important; } .sppB6 { padding-bottom: 6px !important;} .sppB7 { padding-bottom: 7px !important;} .sppB8 { padding-bottom: 8px !important;} .sppB9 { padding-bottom: 9px !important;} .sppB10 { padding-bottom: 10px !important;} .sppB11 { padding-bottom: 11px !important;} .sppB12 { padding-bottom: 12px !important;} .sppB13 { padding-bottom: 13px !important;} .sppB14 { padding-bottom: 14px !important;} .sppB15 { padding-bottom: 15px !important;} .sppB16 { padding-bottom: 16px !important;} .sppB17 { padding-bottom: 17px !important;} .sppB18 { padding-bottom: 18px !important;} .sppB19 { padding-bottom: 19px !important;} .sppB20 { padding-bottom: 20px !important;} .sppB21 { padding-bottom: 21px !important;} .sppB22 { padding-bottom: 22px !important;} .sppB23 { padding-bottom: 23px !important;} .sppB24 { padding-bottom: 24px !important;} .sppB25 { padding-bottom: 25px !important;} .sppB26 { padding-bottom: 26px !important;} .sppB27 { padding-bottom: 27px !important;} .sppB28 { padding-bottom: 28px !important;} .sppB29 { padding-bottom: 29px !important;} .sppB30 { padding-bottom: 30px !important;} .sppB31 { padding-bottom: 31px !important;} .sppB32 { padding-bottom: 32px !important;} .sppB33 { padding-bottom: 33px !important;} .sppB34 { padding-bottom: 34px !important;} .sppB35 { padding-bottom: 35px !important;} .sppB36 { padding-bottom: 36px !important;} .sppB37 { padding-bottom: 37px !important;} .sppB38 { padding-bottom: 38px !important;} .sppB39 { padding-bottom: 39px !important;} .sppB40 { padding-bottom: 40px !important;} .sppB41 { padding-bottom: 41px !important;} .sppB42 { padding-bottom: 42px !important;} .sppB43 { padding-bottom: 43px !important;} .sppB44 { padding-bottom: 44px !important;} .sppB45 { padding-bottom: 45px !important;} .sppB46 { padding-bottom: 46px !important;} .sppB47 { padding-bottom: 47px !important;} .sppB48 { padding-bottom: 48px !important;} .sppB49 { padding-bottom: 49px !important;} .sppB50 { padding-bottom: 50px !important;} .sppB51 { padding-bottom: 51px !important;} .sppB52 { padding-bottom: 52px !important;} .sppB53 { padding-bottom: 53px !important;} .sppB54 { padding-bottom: 54px !important;} .sppB55 { padding-bottom: 55px !important;} .sppB56 { padding-bottom: 56px !important;} .sppB57 { padding-bottom: 57px !important;} .sppB58 { padding-bottom: 58px !important;} .sppB59 { padding-bottom: 59px !important;} .sppB60 { padding-bottom: 60px !important;} .sppB61 { padding-bottom: 61px !important;} .sppB62 { padding-bottom: 62px !important;} .sppB63 { padding-bottom: 63px !important;} .sppB64 { padding-bottom: 64px !important;} .sppB65 { padding-bottom: 65px !important;} .sppB66 { padding-bottom: 66px !important;} .sppB67 { padding-bottom: 67px !important;} .sppB68 { padding-bottom: 68px !important;} .sppB69 { padding-bottom: 69px !important;} .sppB70 { padding-bottom: 70px !important;} .sppB71 { padding-bottom: 71px !important;} .sppB72 { padding-bottom: 72px !important;} .sppB73 { padding-bottom: 73px !important;} .sppB74 { padding-bottom: 74px !important;} .sppB75 { padding-bottom: 75px !important;} .sppB76 { padding-bottom: 76px !important;} .sppB77 { padding-bottom: 77px !important;} .sppB78 { padding-bottom: 78px !important;} .sppB79 { padding-bottom: 79px !important;} .sppB80 { padding-bottom: 80px !important;} .sppB81 { padding-bottom: 81px !important;} .sppB82 { padding-bottom: 82px !important;} .sppB83 { padding-bottom: 83px !important;} .sppB84 { padding-bottom: 84px !important;} .sppB85 { padding-bottom: 85px !important;} .sppB86 { padding-bottom: 86px !important;} .sppB87 { padding-bottom: 87px !important;} .sppB88 { padding-bottom: 88px !important;} .sppB89 { padding-bottom: 89px !important;} .sppB90 { padding-bottom: 90px !important;} .sppB100 { padding-bottom: 100px !important;} .sppB128 { padding-bottom: 128px !important;} .sppB148 { padding-bottom: 148px !important;} .sppT6 { padding-top: 6px !important;} .sppT7 { padding-top: 7px !important;} .sppT8 { padding-top: 8px !important;} .sppT9 { padding-top: 9px !important;} .sppT10 { padding-top: 10px !important;} .sppT11 { padding-top: 11px !important;} .sppT12 { padding-top: 12px !important;} .sppT13 { padding-top: 13px !important;} .sppT14 { padding-top: 14px !important;} .sppT15 { padding-top: 15px !important;} .sppT16 { padding-top: 16px !important;} .sppT17 { padding-top: 17px !important;} .sppT18 { padding-top: 18px !important;} .sppT19 { padding-top: 19px !important;} .sppT20 { padding-top: 20px !important;} .sppT21 { padding-top: 21px !important;} .sppT22 { padding-top: 22px !important;} .sppT23 { padding-top: 23px !important;} .sppT24 { padding-top: 24px !important;} .sppT25 { padding-top: 25px !important;} .sppT26 { padding-top: 26px !important;} .sppT27 { padding-top: 27px !important;} .sppT28 { padding-top: 28px !important;} .sppT29 { padding-top: 29px !important;} .sppT30 { padding-top: 30px !important;} .sppT31 { padding-top: 31px !important;} .sppT32 { padding-top: 32px !important;} .sppT33 { padding-top: 33px !important;} .sppT34 { padding-top: 34px !important;} .sppT35 { padding-top: 35px !important;} .sppT36 { padding-top: 36px !important;} .sppT37 { padding-top: 37px !important;} .sppT38 { padding-top: 38px !important;} .sppT39 { padding-top: 39px !important;} .sppT40 { padding-top: 40px !important;} .sppT41 { padding-top: 41px !important;} .sppT42 { padding-top: 42px !important;} .sppT43 { padding-top: 43px !important;} .sppT44 { padding-top: 44px !important;} .sppT45 { padding-top: 45px !important;} .sppT46 { padding-top: 46px !important;} .sppT47 { padding-top: 47px !important;} .sppT48 { padding-top: 48px !important;} .sppT49 { padding-top: 49px !important;} .sppT50 { padding-top: 50px !important;} .sppT51 { padding-top: 51px !important;} .sppT52 { padding-top: 52px !important;} .sppT53 { padding-top: 53px !important;} .sppT54 { padding-top: 54px !important;} .sppT55 { padding-top: 55px !important;} .sppT56 { padding-top: 56px !important;} .sppT57 { padding-top: 57px !important;} .sppT58 { padding-top: 58px !important;} .sppT59 { padding-top: 59px !important;} .sppT60 { padding-top: 60px !important;} .sppT61 { padding-top: 61px !important;} .sppT62 { padding-top: 62px !important;} .sppT63 { padding-top: 63px !important;} .sppT64 { padding-top: 64px !important;} .sppT65 { padding-top: 65px !important;} .sppT66 { padding-top: 66px !important;} .sppT67 { padding-top: 67px !important;} .sppT68 { padding-top: 68px !important;} .sppT69 { padding-top: 69px !important;} .sppT70 { padding-top: 70px !important;} .sppT71 { padding-top: 71px !important;} .sppT72 { padding-top: 72px !important;} .sppT73 { padding-top: 73px !important;} .sppT74 { padding-top: 74px !important;} .sppT75 { padding-top: 75px !important;} .sppT76 { padding-top: 76px !important;} .sppT77 { padding-top: 77px !important;} .sppT78 { padding-top: 78px !important;} .sppT79 { padding-top: 79px !important;} .sppT80 { padding-top: 80px !important;} .sppT81 { padding-top: 81px !important;} .sppT82 { padding-top: 82px !important;} .sppT83 { padding-top: 83px !important;} .sppT84 { padding-top: 84px !important;} .sppT85 { padding-top: 85px !important;} .sppT86 { padding-top: 86px !important;} .sppT87 { padding-top: 87px !important;} .sppT88 { padding-top: 88px !important;} .sppT89 { padding-top: 89px !important;} .sppT90 { padding-top: 90px !important;} .sppT100 { padding-top: 100px !important;} .sppT128 { padding-top: 128px !important;} .sppT148 { padding-top: 148px !important;} .sppL0 { padding-left: 0px !important;} .sppL6 { padding-left: 6px !important;} .sppL7 { padding-left: 7px !important;} .sppL8 { padding-left: 8px !important;} .sppL9 { padding-left: 9px !important;} .sppL10 { padding-left: 10px !important;} .sppL11 { padding-left: 11px !important;} .sppL12 { padding-left: 12px !important;} .sppL13 { padding-left: 13px !important;} .sppL14 { padding-left: 14px !important;} .sppL15 { padding-left: 15px !important;} .sppL16 { padding-left: 16px !important;} .sppL17 { padding-left: 17px !important;} .sppL18 { padding-left: 18px !important;} .sppL19 { padding-left: 19px !important;} .sppL20 { padding-left: 20px !important;} .sppL21 { padding-left: 21px !important;} .sppL22 { padding-left: 22px !important;} .sppL23 { padding-left: 23px !important;} .sppL24 { padding-left: 24px !important;} .sppL25 { padding-left: 25px !important;} .sppL26 { padding-left: 26px !important;} .sppL27 { padding-left: 27px !important;} .sppL28 { padding-left: 28px !important;} .sppL29 { padding-left: 29px !important;} .sppL30 { padding-left: 30px !important;} .sppL31 { padding-left: 31px !important;} .sppL32 { padding-left: 32px !important;} .sppL33 { padding-left: 33px !important;} .sppL34 { padding-left: 34px !important;} .sppL35 { padding-left: 35px !important;} .sppL36 { padding-left: 36px !important;} .sppL37 { padding-left: 37px !important;} .sppL38 { padding-left: 38px !important;} .sppL39 { padding-left: 39px !important;} .sppL40 { padding-left: 40px !important;} .sppL41 { padding-left: 41px !important;} .sppL42 { padding-left: 42px !important;} .sppL43 { padding-left: 43px !important;} .sppL44 { padding-left: 44px !important;} .sppL45 { padding-left: 45px !important;} .sppL46 { padding-left: 46px !important;} .sppL47 { padding-left: 47px !important;} .sppL48 { padding-left: 48px !important;} .sppR0 { padding-right: 0px !important;} } /* Tablet向けレイアウトの指定 *//******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ @media print, screen and ( min-width: 601px ) { body { min-width: 1000px; } .spDisp { display: none !important; } .pcaC { text-align: center; } #instaWrap { width: 980px; margin: 0 auto;} /*--- header ---*/ body { padding: 187px 0 0; background: url(images/body_bg.png) 50% 0 no-repeat;} body.summer, body.summer-season { padding: 187px 0 0; background: url(images/body_summer-bg.png) 50% 0 no-repeat;} .commingSoon01 { font-size: 171.4% !important;} .commingSoon02 { font-size: 171.4% !important; padding: 0 0 80px;} #winterIndexBody { padding: 0; background: none;} #summerIndexBody { padding: 0; background: none;} header { position: absolute; height: 100px; display: block; opacity: 1; transform: translateY(0) translateX(0);} #otherSeasonLink { display: none; } #fixedNav { display: block; } #fixedNav header { background: rgba(255,255,255,0.9); position: fixed; transform: translateY(-100%) translateX(0); transition: all .25s ease-in-out;} #fixedNav.visible header { transform: translateY(0) translateX(0);} #fixedNav header #title { top: 27px;} #fixedNav header #title img { height: 30px; } #fixedNav header nav { bottom: 20px;} #fixedNav #otherSeasonLink { display: block; position: absolute; top: 12px; left: 50%; margin-left: -390px;} #fixedNav #otherSeasonLink img { height: 60px; width: auto;} header #title { position: absolute; top: 32px; left: 50%; margin-left: -460px; } header #title img { height: 60px; } #spMenu { display: none;} #spMenu span { } #spMenu.active #spMenu01 { } #spMenu.active #spMenu02 { } #spMenu.active #spMenu03 { } nav { display: block; overflow: visible; width: 830px; top: auto; bottom: 0; left: 50%; margin-left: -330px;} nav > ul { background: transparent; font-size: 107.1%; font-weight: bold; padding: 0;} nav > ul > li { overflow: visible; position: relative; clear: none; float: left; padding: 0 6px; min-height: 4.3em; text-align: center; white-space: nowrap;} nav > ul > li ul { display: none; position: absolute; top: 100%; left: 0; text-align: left; background: rgba(255,255,255,1); padding: 8px 16px;} nav > ul > li > span, nav > ul > li > a { display: block; color: #000F3A; padding: 0.5em;} nav > ul > li li a { display: block; padding: 0.5em 0.5em 0.5em 1em; position: relative;} nav > ul > li li a:after { content: '・'; display: block; position: absolute; top: 0.5em; left: 0; } .langNav { position: fixed; top: 16px; right: 16px; z-index: 1000; padding: 0; background: transparent;} .langNav li { } .langNav li a { } /*--- footer ---*/ footer { height: 1010px; background-size: auto 100%;} footer a {} #footerWrapper { padding: 32px 0 32px;} #footerTitle { } #footerTitle img { width: 131px; } #footerSec01 { overflow: hidden; width: 940px; margin: 0 auto 40px;} #footerAccess { } #footerAccess li { margin: 0 20px 6px 0; padding-bottom: 8px; float: left; width: 220px; border-bottom: #0B3960 solid 1px;} #footerAccess li:nth-child(2n) { float: left;} #footerAccess li:nth-child(4n) { margin-right: 0; } #footerAccess li#footerAccessMap { } #footerAccess li#footerAccessTrain { } #footerAccess li#footerAccessTrain02 { } #footerAccess li#footerAccessCar { } #footerAccess li dl { } #footerAccess li dt { font-size: 128.6%;} #footerAccess li dd { font-size: 92.9%;} .footerTel { } #footerSec02 { overflow: hidden; width: 820px; margin: 0 auto;} #footerSec02L { padding: 0; width: 390px; float: left;} #footerSec02R { width: 390px; float: right;} .footerSec02Dome { } #footerSec02 dl { overflow: hidden;} #footerSec02 dt { font-size: 121.4%;} #footerSec02 dd { } #footerSec03 { width: 820px; margin: 0 auto; padding: 0; overflow: visible; } #footerSec03Wrap { float: left; width: 100%; padding: 0 0 100px;} #footerSec03L { box-sizing: border-box; padding: 20px 0 20px 0; margin: 0;} #footerSec03R { box-sizing: border-box; padding: 20px 0 20px 0; margin: 0;} .footerSec03Logo { text-align: left; padding: 0; width: 136px; float: left;} #footerSec03L .footerSec03Logo img { width: 90px; height: auto; margin: 16px 0 0;} #footerSec03R .footerSec03Logo img { width: 120px; height: auto; margin: 30px 0 0;} #footerSec03 dl { overflow: hidden;} #footerSec03 dt { font-weight: bold; font-size: 114.3%; line-height: 1.2; padding: 0 0 12px; text-align: left;} #footerSec03 dd ul { display: inline-block;} #footerSec03 dd li { display: inline-block; width: auto; position: relative; padding-left: 1em; margin-right: 1em; } #footerSec03 dd li:before { content: "・"; display: block; position: absolute; top: 0.1em; left: 0; } .footerSec03Nav { font-size: 92.9%;} .footerSec03Nav03 { } .footerSec03Nav04 { } .footerSec03NavcL { clear: left; } #footerSec03R dd li { padding-bottom: 4px; } footer small { clear: both; display: block; font-weight: bold; text-align: center; line-height: 1.2;} #footerWinterTrain { position: absolute; bottom: 70px; left: 50%; margin-left: -810px; height: auto; width: 839px;} #footerWinterSnowman { position: absolute; bottom: 40px; right: auto; left: 50%; margin-left: 120px; width: 211px;} /*--- winter index ---*//********************************************************************************************************************************************************************************************************************************************************************************************************************/ #indexInformation { overflow: hidden; padding: 44px 0 80px; } #indexInformationWrap { width: 870px; margin: 0 auto; } #indexInformationSub01 { font-size: 192.9%;} #indexInformationSub01 span { } #indexInformationSub0101 { padding-left: 48px; background-image: url(images/winter_index_information_title_icon01.png); background-position: 0 0; } #indexInformationSub0102 { } #indexInformationSub0103 { } #indexInformationList { overflow: hidden; } #indexInformationList li { overflow: hidden; padding: 0 0 16px; width: 420px; float: left; } #indexInformationList li:nth-child(2n) { float: right; } #indexInformationList li:nth-child(2n+1) { clear: left;} #indexInformationList li:nth-child(n+5) { display: block;} .indexInformationListHead { } .indexInformationListHead01 { } .indexInformationListHead01News { } .indexInformationListHead01Event { } .indexInformationListHead02 {} #indexInformationList li a { } .indexInformationListTime { } .indexInformationListTxt { } #winterIndexEvent { overflow: hidden; padding: 0 0 60px; } #winterIndexEventWrap { width: 990px; margin: 0 auto; overflow: hidden; } #winterIndexEventSub01 { font-size: 192.9%;} #winterIndexEventSub01 span { } #winterIndexEventSub0101 {} #winterIndexEventSub0102 { padding: 32px 106px 32px 0;} #winterIndexEventList01 { float: left; width: 280px; padding-top: 10px; margin: 0 28px 0 0;} #winterIndexEventList01 li:nth-child(1) { margin-bottom: 18px;} #winterIndexEventList01 li img { } #winterIndexEventCal { float: left; width: 160px; margin: 0 28px 0 0;} #winterIndexEventCal img { width: 100%;} #winterIndexEventList02 { clear: none; overflow: hidden; width: 712px; margin: 33px 0 0; padding: 0 0 25px;} #winterIndexEventList02 li { margin: 0 8px 0 7px; } #winterIndexEventList02 .slick-dots { bottom: 0; } #winterIndexEventList02 .slick-dots li button:before { font-size: 32px; } #winterIndexEventList02 .slick-dots li.slick-active button:before { color: #f18700; opacity: 1;} #winterIndexCampain { overflow: hidden; padding: 24px 3.125% 60px; } #winterIndexCampainSub01 { overflow: hidden; margin: 0 0 24px; color: #4396c0; font-weight: 800; font-size: 171.4%; text-align: center; letter-spacing: 0.1em; line-height: 1.2;} #winterIndexCampainSub01 span { display: inline-block; background-repeat: no-repeat;} #winterIndexCampainSub0101 { padding-left: 94px; background-image: url(images/winter_index_campaing_title_icon01.png); background-position: 0 0; } #winterIndexCampainSub0102 { padding: 32px 76px 32px 0; background-image: url(images/winter_index_campaing_title_icon02.png); background-position: 100% 0; } #winterIndexCampainList01 { float: left; width: 59.5%; padding-top: 1.9vw; margin: 0 0 24px;} #winterIndexCampainList01 li:nth-child(1) { margin-bottom: 4vw;} #winterIndexCampainList01 li img { width: 100%;} #winterIndexCampainCal { text-align: center; margin: 0 0 24px;} #winterIndexCampainCal img { width: 50%;} /*#winterIndexCampainCal { float: right; width: 34.4%; margin: 0 0 24px;}*/ /*#winterIndexCampainCal img { width: 100%;}*/ #winterIndexCampainList02 { clear: both; overflow: hidden; width: 760px; margin: 0 auto;} #winterIndexCampainList02 li { float: left; width: 160px; margin: 0 40px 10px 0; } #winterIndexCampainList02 li:nth-child(3n) { margin-right: 40px;} #winterIndexCampainList02 li:nth-child(4n) { margin-right: 0;} .prTxt { position: absolute; top: 420px; left: 0; width: 100%; height: 100vh; will-change: transform; transform: translate3d(0,0,1px);} #winterIndexSki { height: 100vh;} #winterIndexSkiBG { width: 100%; height: calc( 100vh + 250px ); background: url(images/winter_index_ski_img.jpg) 50% 50% no-repeat; background-size: cover;} #winterIndexSkiTxt { width: 408px; left: 50%; margin-left: -416px;} .winterIndexSkiBG2019 #winterIndexSkiBG { background: url(images/winter_index_ski_img2019.jpg) 30% 50% no-repeat; background-size: cover;} .winterIndexSkiBG2019 #winterIndexSkiTxt { width: 408px; left: 50%; right: auto; margin-left: 0px;} #winterIndexKidsPark { } #winterIndexKidsParkSub01 { padding: 131px 0 0; margin: -131px 0 25px;} #winterIndexKidsParkTxt01 { padding: 0 0 24px; } #winterIndexFlowChart { padding: 0 0 114px; } #winterIndexFlowChartWrap { position: relative; width: 800px; margin: 0 auto; overflow: visible;} #winterIndexFlowChartTxt01 { padding: 0; float: left; width: 307px; margin-right: 25px;} #winterIndexFlowChartTxt02 { overflow: hidden; font-size: 171.4%; width: 383px; height: 139px; margin: 50px 0 14px;} #winterIndexFlowChartTxt02 p { position: absolute; top: 0; left: 0; } #winterIndexFlowChartTxt03 { overflow: hidden; font-size: 114.3%; } #winterIndexFlowChartTxt03 { overflow: hidden; font-size: 114.3%; } #winterIndexFlowChartBtn02 { text-align: left; position: absolute; top: 0; right: -80px; } #winterIndexFF { padding: 0 0 64px; overflow: hidden; } #winterIndexFFWrap { width: 1000px; margin: 0 auto; } #winterIndexFFSub01 { font-size: 192.9%;} #winterIndexFFList {} #winterIndexFFList li { font-size: 150.0%; width: calc( 25% - 1px );} #winterIndexFFList li:nth-child(2n-1) { width: calc( 25% - 1px );} #winterIndexFFList li:nth-child(2n) { margin-right: 1px;} #winterIndexFFList li:nth-child(4n) { margin-right: 0;} #winterIndexFFList li:before { } #winterIndexFFList li:after { } #winterIndexFFList li a { } #winterIndexFFList li:nth-child(1) { } #winterIndexFFList li:nth-child(2) { } #winterIndexFFList li:nth-child(3) { } #winterIndexFFList li:nth-child(4) { } #winterIndexFFList li:nth-child(5) { } #winterIndexFFList li:nth-child(6) { } #winterIndexFFList li:nth-child(7) { } #winterIndexFFList li:nth-child(8) { } .winterIndexFFListImg { } .winterIndexFFListTxt {} .winterIndexFFListTxt span { } #indexMovie { overflow: hidden; padding: 0 0 100px;} #indexMovieSub01 { } #indexMovieList { width: 867px; margin: 0 auto;} #indexMovieList li:nth-child(1) { width: 368px;} #indexMovieList li:nth-child(2) { position: absolute; top: 50%; left: 0%; transform: translateY(-50%); width: 258px; z-index: 0; margin-top: 25px;} #indexMovieList li:nth-child(3) { position: absolute; top: 50%; right: 0%; transform: translateY(-50%); width: 258px; z-index: 0; margin-top: 25px;} #indexInstagram { padding: 0 0 70px;} #indexInstagramSub01 { } #indexInstagram ul { overflow: hidden; min-height: calc( 25vw - 12px );} #indexInstagram li { float: left; width: calc( 25% - 12px ); height: auto; margin: 0 6px 24px; text-align: center;} #indexInstagram li:nth-child(2n) { float: left;} #indexSNS { padding: 0 0 76px; overflow: hidden;} #indexSNSWrap { width: 800px; margin: 0 auto 24px; overflow: hidden;} #indexSNSSub01 { font-size: 192.9%;} #snsList { padding: 0 0 24px; } #snsList > li { width: 240px; float: left; margin: 0 20px 0 0;} #snsList > li:nth-child(3) { margin-right: 0;} #snsList > li dt { text-align: center; padding: 0 0 24px;} #indexBnr { width: 880px; margin: 0 auto 40px; overflow: hidden; clear: both;} #indexBnr li { margin: 0 20px 0 0; width: 200px; float: left; } #indexBnr li:nth-child(2n) { margin-right: 0;} #indexBnr li:nth-child(3n) { margin-right: 0;} #indexBnr li a { } #indexBnr li.bnrBlog a { } #indexBnr li.bnrBlog a > span span { } #indexBnr li.bnrPhoto a { } #indexBnr li.bnrPhoto a > span span { } #indexBnr li.bnrMovie a { } #indexBnr li.bnrMovie a > span span { } #indexBnr li a > span { padding: 17px 6px 11px; } #indexBnr li a > span span { } #indexCompanyBnr { width: 878px; overflow: hidden; margin: 0 auto; padding: 0;} #indexCompanyBnr li { width: 200px; margin: 0 26px 26px 0;} #indexCompanyBnr li:nth-child(2n) { float: left; margin-right: 26px;} #indexCompanyBnr li:nth-child(4n) { float: left; margin-right: 0;} /*--- winter index end ---*//********************************************************************************************************************************************************************************************************************************************************************************************************************/ /*--- winter module ---*//********************************************************************************************************************************************************************************************************************************************************************************************************************/ /*today*/ #todayYuzawa { padding: 0;} #todayYuzawaWrap { overflow: hidden; width: 920px; margin: 0 auto; padding: 10px 0 2px;} #todayYuzawaClimate { width: 240px; float: left; padding: 0; margin-right: 10px;} #todayYuzawaClimate li:nth-child(1) { width: 90px; margin-right: 30px;} #todayYuzawaClimate li:nth-child(1) dl {} #todayYuzawaClimate li:nth-child(1) dt { float: none; width: 100%; height: auto; padding: 0;} #todayYuzawaClimate li:nth-child(1) dd { float: none; width: 100%; height: auto; padding: 0; text-align: center;} .climateImg { margin: -4px 0 0; } #todayYuzawaClimate li:nth-child(2), #todayYuzawaClimate li:nth-child(3) { overflow: hidden; float: none; width: auto; padding: 6px 0 0; font-size: 100%;} #todayYuzawaClimate li:nth-child(2) dt, #todayYuzawaClimate li:nth-child(3) dt { font-size: 85.7%;} #todayYuzawaClimate li:nth-child(2) dd, #todayYuzawaClimate li:nth-child(3) dd { padding: 0 0 0 2em;} .todayYuzawaClimateTxt01 { } .todayYuzawaClimateTxt02 { } .todayYuzawaClimateTxt03 { } .todayYuzawaClimateTxt04 { } #todayYuzawaLift { overflow: hidden; clear: none; float: left; padding: 6px 0 0; } #todayYuzawaLift > li { padding: 0; float: left;} #todayYuzawaLift > li:last-child { padding: 0;} #todayYuzawaLift > li:nth-child(1) { width: 310px;} #todayYuzawaLift > li:nth-child(2) { width: 185px;} #todayYuzawaLift > li:nth-child(3) { width: 175px;} #todayYuzawaLift dt { font-size: 85.7%; padding: 0 0 2px;} #todayYuzawaLift dd { padding: 0 0 0 38px; overflow: hidden; font-size: 85.7%;} #todayYuzawaLift dd ul { width: 100%; float: left;} #todayYuzawaLift dd ul#todayLift01 li:nth-child(n+5) {} #todayYuzawaLift dd ul#todayLift01 li:nth-child(5) {} #todayYuzawaLift dd ul#todayLift01 li:nth-child(6) {} #todayYuzawaLift dd ul#todayLift01 li:nth-child(7) {} .todayYuzawaTxt01 { font-size: 114.3%;} .todayYuzawaTxt02 { } .todayYuzawaWeekPc { display: block; position: relative; padding: 3px 0; margin: -2px 0 4px; background: #0c3961; border-radius: 4px; color: #FFF !important; font-weight: 700;} .todayYuzawaWeekPc:after { content: ""; display: block; position: absolute; top: 50%; left: 50%; margin: -5px 0 0 1.7em; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 8px solid #FFF; } .todayYuzawaWeekSp { display: none; } /*seasonInfo*/ #seasonInfo { position: relative;} #seasonInfo01 { width: 50vw; padding: 17px 0 24px; font-size: 157.1%; position: absolute; top: 0; right: 50%; margin-right: 300px;} #seasonInfo01 span { display: block; float: right; margin-right: 40px;} #seasonInfo02 { width: 1000px; box-sizing: border-box; padding-left: 200px; margin: 0 auto; font-size: 100%; line-height: 1.67;} #seasonInfo0201 { width: 200px; padding: 9px 0 6px 21px; font-size: 107.1%;} #seasonInfo0202 { width: 220px; padding: 9px 0 6px 21px;} #seasonInfo0202 li { } #seasonInfo0202 li:before { } #seasonInfo0202 li dt { float: left; margin-right: 0.5em;} #seasonInfo0202 li dd { overflow: hidden;} #seasonInfo0203 { width: 380px; float: left; padding: 9px 0 6px 21px; box-sizing: border-box;} #seasonInfo0203 dt { float: left; margin-right: 0.5em;} #seasonInfo0203 dd { overflow: hidden;} .seasonInfo02Ch { padding: 0 20px 0 0;} /*--- winter module end ---*//********************************************************************************************************************************************************************************************************************************************************************************************************************/ /*--- summer index ---*//********************************************************************************************************************************************************************************************************************************************************************************************************************/ #summerIndexForest {} #summerIndexForestAdventureBg { text-align: center; padding: 80px 3.125% 0; background: url(images/summer_index_forest-adventure_bg.png) 50% 0 no-repeat; } #summerIndexForestStage { margin: 110px 0 30px; height: 530px; background-size: auto; } #summerIndexForestAdventureSub02 { width: 371px;} .summerIndexForestObj { } #summerIndexForestAdventureAnimalBird { margin-left: -337px; top: 13.4%; width: 39px; } #summerIndexForestAdventureAnimalGoat { margin-left: 357px; top: -14%; width: 113px; } #summerIndexForestBtn01 { padding-left: 0; padding-right: 0; } #summerIndexActivity { padding-left: 0; padding-right: 0;} #summerIndexActivityList { overflow: hidden; width: 934px; margin: 0 auto; } #summerIndexActivityList li { float: left; width: 174px; margin: 0 16px 32px 0; } #summerIndexActivityList li:nth-child(3n) { margin-right: 16px;} #summerIndexActivityList li:nth-child(5n) { margin-right: 0;} /**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ /*general*/ body { } #winterIndexBody { } body.kids-parkBody { } body.courseBody { padding-top: 147px;} .pcmL0 { margin-left: 0px !important; } .pcpL16 { padding-left: 16px !important; } .pcpL32 { padding-left: 32px !important; } .pcpL40 { padding-left: 40px !important; } .pcpL50 { padding-left: 50px !important; } .pcpL60 { padding-left: 60px !important; } .pcpL110 { padding-left: 110px !important; } .pcpB0 { padding-bottom: 0px !important; } .pcpB80 { padding-bottom: 80px !important; } .pcdIB { display: inline-block; } .pcpR1em { padding-right: 1em; } .pcmR16 { margin-right: 16px; } .pcfL { float: left; } .pcfs10 { font-size: 71.4% !important;} .pcfs11 { font-size: 78.6% !important;} .pcfs12 { font-size: 85.70% !important;} .pcfs13 { font-size: 92.90% !important;} .pcfs14 { font-size: 100.00% !important;} .pcfs15 { font-size: 107.10% !important;} .pcfs16 { font-size: 114.30% !important;} .pcfs17 { font-size: 121.40% !important;} .pcfs18 { font-size: 128.60% !important;} .pcfs19 { font-size: 135.70% !important;} .pcfs20 { font-size: 142.90% !important;} .pcfs21 { font-size: 150.00% !important;} .pcfs22 { font-size: 157.10% !important;} .pcfs23 { font-size: 164.30% !important;} .pcfs24 { font-size: 171.40% !important;} .pcfs25 { font-size: 178.60% !important;} .pcfs26 { font-size: 185.70% !important;} .pcfs27 { font-size: 192.90% !important;} .pcfs28 { font-size: 200.00% !important;} .pcfs29 { font-size: 207.10% !important;} .pcfs30 { font-size: 214.30% !important;} .pcfs31 { font-size: 221.40% !important;} .pcfs32 { font-size: 228.60% !important;} .pcfs33 { font-size: 235.70% !important;} .pcfs34 { font-size: 242.90% !important;} .pcfs35 { font-size: 250.00% !important;} .pcfs36 { font-size: 257.10% !important;} .pcfs37 { font-size: 264.30% !important;} .pcfs38 { font-size: 271.40% !important;} .pcfs39 { font-size: 278.60% !important;} .pcfs40 { font-size: 285.70% !important;} .pcfs41 { font-size: 292.90% !important;} .pcfs42 { font-size: 300.00% !important;} .pcfs43 { font-size: 307.10% !important;} .pcfs44 { font-size: 314.30% !important;} .pcfs45 { font-size: 321.40% !important;} .pcfs46 { font-size: 328.60% !important;} .pcfs47 { font-size: 335.70% !important;} .pcfs48 { font-size: 342.90% !important;} .pcfs49 { font-size: 350.00% !important;} .pcfs50 { font-size: 357.10% !important;} .pcfs51 { font-size: 364.30% !important;} .pcfs52 { font-size: 371.40% !important;} .pcfs53 { font-size: 378.60% !important;} .pcfs54 { font-size: 385.70% !important;} .pcfs55 { font-size: 392.90% !important;} .pcfs56 { font-size: 400.00% !important;} .pcfs57 { font-size: 407.10% !important;} .pcfs58 { font-size: 414.30% !important;} .pcfs59 { font-size: 421.40% !important;} .pcfs60 { font-size: 428.60% !important;} .pcfs61 { font-size: 435.70% !important;} .pcfs62 { font-size: 442.90% !important;} .pcfs63 { font-size: 450.00% !important;} .pcfs64 { font-size: 457.10% !important;} .pcfs65 { font-size: 464.30% !important;} .pcfs66 { font-size: 471.40% !important;} .pcfs67 { font-size: 478.60% !important;} .pcfs68 { font-size: 485.70% !important;} .pcfs69 { font-size: 492.90% !important;} .pcfs70 { font-size: 500.00% !important;} .pcfs71 { font-size: 507.10% !important;} .pcfs72 { font-size: 514.30% !important;} .pcfs73 { font-size: 521.40% !important;} .pcfs74 { font-size: 528.60% !important;} .pcfs75 { font-size: 535.70% !important;} .pcfs76 { font-size: 542.90% !important;} .pcfs77 { font-size: 550.00% !important;} .pcfs78 { font-size: 557.10% !important;} .pcfs79 { font-size: 564.30% !important;} .pcfs80 { font-size: 571.40% !important;} .pcpB6 { padding-bottom: 6px !important;} .pcpB7 { padding-bottom: 7px !important;} .pcpB8 { padding-bottom: 8px !important;} .pcpB9 { padding-bottom: 9px !important;} .pcpB10 { padding-bottom: 10px !important;} .pcpB11 { padding-bottom: 11px !important;} .pcpB12 { padding-bottom: 12px !important;} .pcpB13 { padding-bottom: 13px !important;} .pcpB14 { padding-bottom: 14px !important;} .pcpB15 { padding-bottom: 15px !important;} .pcpB16 { padding-bottom: 16px !important;} .pcpB17 { padding-bottom: 17px !important;} .pcpB18 { padding-bottom: 18px !important;} .pcpB19 { padding-bottom: 19px !important;} .pcpB20 { padding-bottom: 20px !important;} .pcpB21 { padding-bottom: 21px !important;} .pcpB22 { padding-bottom: 22px !important;} .pcpB23 { padding-bottom: 23px !important;} .pcpB24 { padding-bottom: 24px !important;} .pcpB25 { padding-bottom: 25px !important;} .pcpB26 { padding-bottom: 26px !important;} .pcpB27 { padding-bottom: 27px !important;} .pcpB28 { padding-bottom: 28px !important;} .pcpB29 { padding-bottom: 29px !important;} .pcpB30 { padding-bottom: 30px !important;} .pcpB31 { padding-bottom: 31px !important;} .pcpB32 { padding-bottom: 32px !important;} .pcpB33 { padding-bottom: 33px !important;} .pcpB34 { padding-bottom: 34px !important;} .pcpB35 { padding-bottom: 35px !important;} .pcpB36 { padding-bottom: 36px !important;} .pcpB37 { padding-bottom: 37px !important;} .pcpB38 { padding-bottom: 38px !important;} .pcpB39 { padding-bottom: 39px !important;} .pcpB40 { padding-bottom: 40px !important;} .pcpB41 { padding-bottom: 41px !important;} .pcpB42 { padding-bottom: 42px !important;} .pcpB43 { padding-bottom: 43px !important;} .pcpB44 { padding-bottom: 44px !important;} .pcpB45 { padding-bottom: 45px !important;} .pcpB46 { padding-bottom: 46px !important;} .pcpB47 { padding-bottom: 47px !important;} .pcpB48 { padding-bottom: 48px !important;} .pcpB49 { padding-bottom: 49px !important;} .pcpB50 { padding-bottom: 50px !important;} .pcpB51 { padding-bottom: 51px !important;} .pcpB52 { padding-bottom: 52px !important;} .pcpB53 { padding-bottom: 53px !important;} .pcpB54 { padding-bottom: 54px !important;} .pcpB55 { padding-bottom: 55px !important;} .pcpB56 { padding-bottom: 56px !important;} .pcpB57 { padding-bottom: 57px !important;} .pcpB58 { padding-bottom: 58px !important;} .pcpB59 { padding-bottom: 59px !important;} .pcpB60 { padding-bottom: 60px !important;} .pcpB61 { padding-bottom: 61px !important;} .pcpB62 { padding-bottom: 62px !important;} .pcpB63 { padding-bottom: 63px !important;} .pcpB64 { padding-bottom: 64px !important;} .pcpB65 { padding-bottom: 65px !important;} .pcpB66 { padding-bottom: 66px !important;} .pcpB67 { padding-bottom: 67px !important;} .pcpB68 { padding-bottom: 68px !important;} .pcpB69 { padding-bottom: 69px !important;} .pcpB70 { padding-bottom: 70px !important;} .pcpB71 { padding-bottom: 71px !important;} .pcpB72 { padding-bottom: 72px !important;} .pcpB73 { padding-bottom: 73px !important;} .pcpB74 { padding-bottom: 74px !important;} .pcpB75 { padding-bottom: 75px !important;} .pcpB76 { padding-bottom: 76px !important;} .pcpB77 { padding-bottom: 77px !important;} .pcpB78 { padding-bottom: 78px !important;} .pcpB79 { padding-bottom: 79px !important;} .pcpB80 { padding-bottom: 80px !important;} .pcpB81 { padding-bottom: 81px !important;} .pcpB82 { padding-bottom: 82px !important;} .pcpB83 { padding-bottom: 83px !important;} .pcpB84 { padding-bottom: 84px !important;} .pcpB85 { padding-bottom: 85px !important;} .pcpB86 { padding-bottom: 86px !important;} .pcpB87 { padding-bottom: 87px !important;} .pcpB88 { padding-bottom: 88px !important;} .pcpB89 { padding-bottom: 89px !important;} .pcpB90 { padding-bottom: 90px !important;} .pcpB100 { padding-bottom: 100px !important;} .pcpB120 { padding-bottom: 120px !important;} .pcpB148 { padding-bottom: 148px !important;} .pcpT6 { padding-top: 6px !important;} .pcpT7 { padding-top: 7px !important;} .pcpT8 { padding-top: 8px !important;} .pcpT9 { padding-top: 9px !important;} .pcpT10 { padding-top: 10px !important;} .pcpT11 { padding-top: 11px !important;} .pcpT12 { padding-top: 12px !important;} .pcpT13 { padding-top: 13px !important;} .pcpT14 { padding-top: 14px !important;} .pcpT15 { padding-top: 15px !important;} .pcpT16 { padding-top: 16px !important;} .pcpT17 { padding-top: 17px !important;} .pcpT18 { padding-top: 18px !important;} .pcpT19 { padding-top: 19px !important;} .pcpT20 { padding-top: 20px !important;} .pcpT21 { padding-top: 21px !important;} .pcpT22 { padding-top: 22px !important;} .pcpT23 { padding-top: 23px !important;} .pcpT24 { padding-top: 24px !important;} .pcpT25 { padding-top: 25px !important;} .pcpT26 { padding-top: 26px !important;} .pcpT27 { padding-top: 27px !important;} .pcpT28 { padding-top: 28px !important;} .pcpT29 { padding-top: 29px !important;} .pcpT30 { padding-top: 30px !important;} .pcpT31 { padding-top: 31px !important;} .pcpT32 { padding-top: 32px !important;} .pcpT33 { padding-top: 33px !important;} .pcpT34 { padding-top: 34px !important;} .pcpT35 { padding-top: 35px !important;} .pcpT36 { padding-top: 36px !important;} .pcpT37 { padding-top: 37px !important;} .pcpT38 { padding-top: 38px !important;} .pcpT39 { padding-top: 39px !important;} .pcpT40 { padding-top: 40px !important;} .pcpT41 { padding-top: 41px !important;} .pcpT42 { padding-top: 42px !important;} .pcpT43 { padding-top: 43px !important;} .pcpT44 { padding-top: 44px !important;} .pcpT45 { padding-top: 45px !important;} .pcpT46 { padding-top: 46px !important;} .pcpT47 { padding-top: 47px !important;} .pcpT48 { padding-top: 48px !important;} .pcpT49 { padding-top: 49px !important;} .pcpT50 { padding-top: 50px !important;} .pcpT51 { padding-top: 51px !important;} .pcpT52 { padding-top: 52px !important;} .pcpT53 { padding-top: 53px !important;} .pcpT54 { padding-top: 54px !important;} .pcpT55 { padding-top: 55px !important;} .pcpT56 { padding-top: 56px !important;} .pcpT57 { padding-top: 57px !important;} .pcpT58 { padding-top: 58px !important;} .pcpT59 { padding-top: 59px !important;} .pcpT60 { padding-top: 60px !important;} .pcpT61 { padding-top: 61px !important;} .pcpT62 { padding-top: 62px !important;} .pcpT63 { padding-top: 63px !important;} .pcpT64 { padding-top: 64px !important;} .pcpT65 { padding-top: 65px !important;} .pcpT66 { padding-top: 66px !important;} .pcpT67 { padding-top: 67px !important;} .pcpT68 { padding-top: 68px !important;} .pcpT69 { padding-top: 69px !important;} .pcpT70 { padding-top: 70px !important;} .pcpT71 { padding-top: 71px !important;} .pcpT72 { padding-top: 72px !important;} .pcpT73 { padding-top: 73px !important;} .pcpT74 { padding-top: 74px !important;} .pcpT75 { padding-top: 75px !important;} .pcpT76 { padding-top: 76px !important;} .pcpT77 { padding-top: 77px !important;} .pcpT78 { padding-top: 78px !important;} .pcpT79 { padding-top: 79px !important;} .pcpT80 { padding-top: 80px !important;} .pcpT81 { padding-top: 81px !important;} .pcpT82 { padding-top: 82px !important;} .pcpT83 { padding-top: 83px !important;} .pcpT84 { padding-top: 84px !important;} .pcpT85 { padding-top: 85px !important;} .pcpT86 { padding-top: 86px !important;} .pcpT87 { padding-top: 87px !important;} .pcpT88 { padding-top: 88px !important;} .pcpT89 { padding-top: 89px !important;} .pcpT90 { padding-top: 90px !important;} .pcpT100 { padding-top: 100px !important;} .pcpT128 { padding-top: 128px !important;} .pcpT148 { padding-top: 148px !important;} #contentArticle { margin: -50px 0 0;} .spLR { padding-left: 0; padding-right: 0; } .pageTitleEn01 { font-size: 207.1%; padding: 0 0 16px;} .mainImg { } .pageTitleJp01 { font-size: 157.1%; padding: 24px 0 56px; letter-spacing: 0.5em;} .pageTitleJp01-bl01 { } .pageTitleJp01-Pk01 { padding-bottom: 24px;} .pageTitleJp01-Gn01 { padding-bottom: 24px;} .pageTitleJp01-Gn02 { padding-bottom: 24px;} .pageTitleJp01-Gn03 { padding-bottom: 24px;} .pageTitleJp01-Rd01 { padding-bottom: 24px;} .pageTitleJp02 { font-size: 171.4%;} .pageTitleJp02LC { left: 50%; transform: translateY(-50%); margin-left: -300px; } .pageTitleJp02LC02 { left: 50%; margin-left: -320px; } .pageTitleJp02RC { right: auto; left: 50%; margin-left: 134px;} .w200 { width: 200px; margin-left: auto; margin-right: auto; } .w540 { width: 540px; margin-left: auto; margin-right: auto; } .w590 { width: 590px; margin-left: auto; margin-right: auto; } .w600 { width: 600px; margin-left: auto; margin-right: auto; } .w640 { width: 640px; margin-left: auto; margin-right: auto; } .w700 { width: 700px; margin-left: auto; margin-right: auto; } .w780 { width: 780px; margin-left: auto; margin-right: auto; } .w790 { width: 790px; margin-left: auto; margin-right: auto; } .w800 { width: 800px; margin-left: auto; margin-right: auto; } .w810 { width: 810px; margin-left: auto; margin-right: auto; } .w835 { width: 835px; margin-left: auto; margin-right: auto; } .w840 { width: 840px; margin-left: auto; margin-right: auto; } .w850 { width: 850px; margin-left: auto; margin-right: auto; } .w860 { width: 860px; margin-left: auto; margin-right: auto; } .w880 { width: 880px; margin-left: auto; margin-right: auto; } .w900 { width: 900px; margin-left: auto; margin-right: auto; } .w940 { width: 940px; margin-left: auto; margin-right: auto; } .w960 { width: 960px; margin-left: auto; margin-right: auto; } .w1000 { width: 1000px; margin-left: auto; margin-right: auto; } .w360L { width: 360px; font-kerning: ; } .w390R { padding-bottom: 0; float: right; width: 390px; clear: left;} .w400L { float: left; width: 400px; overflow: hidden; padding-bottom: 0; } .w400R { float: right; width: 400px; } .w410L { padding-bottom: 0; } .w386L { width: 386px; float: left; padding-bottom: 0; } .w386R { width: 386px; float: right;} .w430L { width: 430px; float: left;} .w430R { width: 430px; float: right;} .w50PerL { width: 50%; float: left; padding: 0; box-sizing: border-box; } .w50PerR { width: 50%; float: right; box-sizing: border-box;} .box02 { padding: 32px;} .box03 { } .box03Wrap { padding: 32px 24px; } .box03Row { padding: 32px 24px;} .hasCheckbox {} .hasCheckbox li {} .hasCheckbox li input {} .btns01 { text-align: center; letter-spacing: -0.4em; } .btns01 li { width: auto; padding: 0 24px;} .twoColList01 { } .twoColList01 li { width: 50%; box-sizing: border-box; padding: 0 24px; margin: 0 0 40px;} .twoColList01 li:nth-child(2n) { float: right; } .twoColList01 li:nth-child(2n+1) { clear: left; } .twoColList02 { } .twoColList02 li { width: 45%; box-sizing: border-box; margin: 0 10% 40px 0;} .twoColList02 li:nth-child(2n) { margin-right: 0; } .twoColList02 li:nth-child(2n+1) { clear: left; } .twoColList03 { overflow: hidden; } .twoColList03 li { width: 48.75%; float: left; margin: 0 2.5% 40px 0;} .twoColList03 li:nth-child(2n) { float: right; margin-right: 0;} .twoColList03 li:nth-child(2n+1) { clear: left; } .twoColList04 { overflow: hidden; } .twoColList04 li { width: auto; float: left; margin: 0 0 40px;} .twoColList04 li:nth-child(2n) { float: right; } .twoColList04 li:nth-child(2n+1) { clear: left; } .twoColList04.twoColList04W400 li { width: 400px;} .twoColList04.twoColList04W300 li { width: 300px;} .twoColList04.twoColList04W420 li { width: 420px;} .threeColList01 { overflow: hidden; } .threeColList01 li { width: 28.5%; margin: 0 7.25% 40px 0;} .threeColList01 li:nth-child(2n) { float: left; } .threeColList01 li:nth-child(3n) { margin-right: 0;} .threeColList01Dl01 dd { padding: 0 20px; } .threeColList02 { overflow: hidden; } .threeColList02 li { width: 31.1%; float: left; margin: 0 3.35% 40px 0;} .threeColList02.threeColList02Pt02 li { margin-bottom: 24px; } .threeColList02 li:nth-child(2n) { float: left;} .threeColList02 li:nth-child(2n+1) { clear: none;} .threeColList02 li:nth-child(3n) { margin-right: 0;} .threeColList03 { overflow: hidden; } .threeColList03 li { width: 31.8%; float: left; margin: 0 2.3% 56px 0;} .threeColList03 li:nth-child(2n) { float: left;} .threeColList03 li:nth-child(2n+1) { clear: none;} .threeColList03 li:nth-child(3n) { margin-right: 0;} .threeColList04 { overflow: hidden; } .threeColList04 li { width: 33.3%; float: left; margin: 0 0 56px 0;} .threeColList04 li:nth-child(2n) { float: left;} .threeColList04 li:nth-child(2n+1) { clear: none;} .threeColList04 li:nth-child(3n) { margin-right: 0;} .threeColList05 { overflow: hidden; } .threeColList05 li { width: 31.8%; float: left; margin: 0 2.3% 24px 0;} .threeColList05 li:nth-child(1) { width: 31.8%;} .threeColList05 li img { width: auto;} .threeColList05 li:nth-child(2n) { float: left;} .threeColList05 li:nth-child(2n+1) { float: left;} .threeColList05 li:nth-child(3n) { margin-right: 0;} .bnrList { display: flex; flex-wrap: wrap; justify-content: center;} .bnrList > li { width: calc( (100% - 24px)/3 ); margin: 16px 4px 0; } .bnrList > li:nth-child( -n + 3 ) { margin-top: 0;} .aCList01 { } .aCList01 li { padding: 0 10px;} .instaList { width: 1260px; margin: 0 auto; } .instaList li { width: 420px;} .instaList li .instaListImg { width: 210px; } .instaList li .instaListTxt { width: 210px; } .instaList li .instaListTxt span {} .instaList li:nth-child(3n) { margin-left: 0;} .instaList li:nth-child(4n) { margin-left: 210px;} .instaList li:nth-child(8) { margin-left: 0px;} .table01 {} .table01 th,.table01 td { padding: 24px;} .table01BgBl01 th,.table01BgBl01 td,.table01BgBl01 { } .table01W01 { width: 160px; } .table02 { } .table02 th,.table02 td { padding: 20px 40px;} .table02 tr:nth-child(2n) th,.table02 tr:nth-child(2n) td {} .table02 th { } .table02 td {} .table03 { } .table03 th,.table03 td { padding: 12px 16px;} .table03 tr:nth-child(2n) th,.table03 tr:nth-child(2n) td { } .table03 th { font-size: 100%;} .table03 th.table03W01 { width: 25%;} .table03 td { font-size: 100%; } .imgL { text-align: center; padding-bottom: 0; float: left; margin-right: 24px;} .imgL.mR40 { margin-right: 40px; } .imgR { text-align: center; padding-bottom: 0; float: right; margin-left: 24px;} .imgLList { float: left; padding-bottom: 0; margin-right: 24px;} .imgLList li { float: none; width: auto; padding-bottom: 48px;} .imgLList li:nth-child(2n) { float: none; } .linkBtn02 { font-size: 135.7%; padding: 0 134px 0 30px; line-height: 1.4; background: #3e96c0 url(images/link_bg_bl01_02.jpg) 100% 0 no-repeat; background-size: 112px 100%;} .linkBtn02 span { background: url(images/link_bg_bl01_01.png) 100% 50% no-repeat; background-size: auto; padding: 29px 216px 29px 0;} .linkHasIcon { padding: 6px 20px;} .linkHasIcon span { font-size: 135.7%;} .iconFormLink span { padding: 0 0 0 2.4em;} .iconMailLink span { padding: 0 1em 0 2.4em;} .iconTelLink span { padding: 0 0 0 2em;} .iconTelLink { padding: 6px 70px; } .summerBnrList { width: 880px; margin: 0 auto; overflow: hidden; } .summerBnrList li { margin: 0 20px 0 0; width: 200px; float: left; font-size: 142.9%;} .summerBnrList li:nth-child(3n) { margin-right: 0;} .summerBnrList li a { } .summerBnrList li.bnrBlog a { } .summerBnrList li.bnrBlog a > span span { } .summerBnrList li.bnrPhoto a { } .summerBnrList li.bnrPhoto a > span span { } .summerBnrList li.bnrMovie a { } .summerBnrList li.bnrMovie a > span span { } .summerBnrList li a > span { padding: 13px 6px 7px; } .summerBnrList li a > span span { } /*page*/ /*flow chart*/ .contentNav01 { margin-top: -45px; padding: 0 0 70px; } .contentNav01 li { padding: 0 30px 0 0; float: left; } .contentNav01 li:last-child {} .contentNav01 li:before { width: 100%; height: 5px; position: absolute; bottom: 50%; left: 0; z-index: 0;} .contentNav01 li:nth-child(2):before { left: -5px;} .contentNav01 li:nth-child(2):after { bottom: calc( 50% - 14px ); left: auto; right: -16px; border-color: transparent transparent transparent #036EB7; border-width: 16px 16px 16px 24px; margin: 0;} .contentNav01 li:nth-child(3):before { } .contentNav01 li:nth-child(1) { width: 290px;} .contentNav01 li:nth-child(2) { width: 160px;} .contentNav01 li:nth-child(3) { width: 290px;} .contentNav01 li:nth-child(2) a { } .contentNav01 li a { position: relative; z-index: 0;} .contentNav01 li a span { } .contentNav01 li.active a, .contentNav01 li a:hover { } .flowChart { } .flowChart > li { } .flowChartStep01 {} .flowChartStep01Txt01 { font-size: 114.3%; padding: 64px 0 16px;} .flowChartStep01Txt0101 { background-size: auto; width: 50%; float: left;} .flowChartStep01Txt0103 { background-size: auto; width: 50%; float: left; font-size: 92.9%;} .flowChartStep01Txt0102 { background-size: auto;} .flowChartStep01Txt02 { font-size: 150.0%; padding: 18px 0; clear: both;} .flowChartStep02 { font-size: 107.1%;} .flowChartStep02 .flowChartCh-25-25-50 li { padding-top: 60px; padding-bottom: 60px; } .flowChartStep02 .flowChartCh-25-25-50 li:before { } .flowChartStep02 .flowChartCh-25-25-50 li:after { } .flowChartStep02 img { width: auto; height: auto; } .flowChartStep02Img { } .flowChartStep02Txt { } #flowChartImg05 { position: absolute; top: 60px; right: 40px;} .flowChartStep03 { position: relative; } .flowChartStep03Txt01 { font-size: 150.0%; padding: 20px 8px;} .flowChartStep03Txt02 { font-size: 150.0%; padding: 20px 8px;} .flowChartStep03Ul { } .flowChartStep03Ul:before { top: 4px; left: 220px; padding: 0 11px; transform: translateY(0) translateX(0);} .flowChartStep03Ul li { position: relative; float: left; padding: 0; box-sizing: border-box;} .flowChartStep03Ul li:nth-child(1) { width: 220px; box-sizing:} .flowChartStep03Ul li:nth-child(2) { width: 570px; float: right;} #flowChartImg06 { position: absolute; top: -37px; left: 160px; width: 387px;} .flowChartStep04 {} .flowChartStep04 p { font-size: 107.1%;} .flowChartStep04 .flowChartCh-25-25-50 li { padding-top: 20px; padding-bottom: 44px; } .flowChartStep04 .flowChartCh-25-25-50 li:nth-child(2):before { } .flowChartStep04 .flowChartCh-25-25-50 li:nth-child(2):after { } .flowChartStep04 .flowChartCh-25-25-50 li:nth-child(3):before { } .flowChartStep05 {} .flowChartStep05 .flowChartCh-50-50 li { padding-bottom: 80px; } .flowChartStep05 p { font-size: 114.3%; padding: 12px; line-height: 1.6;} .flowChartStep05 .flowChartCh-50-50 li:nth-child(1):before { } .flowChartStep05 .flowChartCh-50-50 li:nth-child(1):after { } .flowChartStep05 .flowChartCh-50-50 li:nth-child(2):before { } .flowChartStep05 .flowChartCh-50-50 li:nth-child(2):after { } .flowChartStep06 {} .flowChartStep06 .flowChartStep06Txt01 { font-size: 135.7%; padding: 20px;} .flowChartStep06 #flowChartImg14 { position: absolute; top: 0; right: 0; width: 100px; transform: translateY(-90%) translateX(-20px);} .flowChartStep07 {} .flowChartStep07 p { font-size: 107.1%;} .flowChartStep07 .flowChartCh-25-25-50 li { padding-top: 48px; padding-bottom: 48px; } .flowChartStep07 .flowChartCh-25-25-50 li:nth-child(1):before { } .flowChartStep07 .flowChartCh-25-25-50 li:nth-child(3):before { } .flowChartStep08 {} .flowChartStep08Txt01 { padding: 0 0 14px; line-height: 1.6; font-size: 107.1%;} .flowChartStep08Txt02 { font-size: 150.0%; padding: 20px;} #flowChartImg09 { right: 20px; width: 101px; } .flowChartStep08 .flowChartCh-25-75 li:nth-child(1):before { } .flowChartStep08 .flowChartCh-25-75 li:nth-child(2):before { left: 64.9%;} .flowChartStep08 .flowChartCh-25-75 li:nth-child(2):after { left: 64.9%;} .flowChartStep09 { } .flowChartStep09 .flowChartCh-25-75 { } .flowChartStep09 .flowChartCh-25-75 li:nth-child(1):before { } .flowChartStep10 {} .flowChartStep10 p { font-size: 107.1%;} .flowChartStep10 .flowChartCh-25-25-50 li { padding-top: 40px; padding-bottom: 56px; } .flowChartStep10 .flowChartCh-25-25-50 li:nth-child(1):before { } .flowChartStep10 .flowChartCh-25-25-50 li:nth-child(2):before { } .flowChartStep10 .flowChartCh-25-25-50 li:nth-child(3):before { } .flowChartStep10 .flowChartCh-25-25-50 li:nth-child(3):after { } .flowChartStep11 {} .flowChartStep11 .flowChartCh-25-25-50 li { padding-bottom: 56px; } .flowChartStep11 dl { padding: 16px;} .flowChartStep11 dt { font-size: 150.0%;} .flowChartStep11 dd { font-size: 107.1%;} .flowChartStep11 .flowChartCh-25-25-50 li:nth-child(1):before { } .flowChartStep11 .flowChartCh-25-25-50 li:nth-child(1):after { } .flowChartStep11 .flowChartCh-25-25-50 li:nth-child(2):before { } .flowChartStep11 .flowChartCh-25-25-50 li:nth-child(2):after { } .flowChartStep11 .flowChartCh-25-25-50 li:nth-child(3):before { } .flowChartStep11 .flowChartCh-25-25-50 li:nth-child(3):after { } .flowChartStep12 {} .flowChartStep12 p { font-size: 185.7%; padding: 26px;} .flowChartStep12 p > span { padding: 0 0 0 316px; background: url(images/flow-chart_img13.png) 0 50% no-repeat; background-size: auto;} .flowChartStep12 p > span > span { padding: 14px 316px 14px 0; background: url(images/flow-chart_img13.png) 100% 50% no-repeat; background-size: auto;} .flowChartCh-50-50 { overflow: hidden; } .flowChartCh-50-50 li { position: relative; float: left; padding: 0; box-sizing: border-box;} .flowChartCh-50-50 li:nth-child(1) { width: 400px; } .flowChartCh-50-50 li:nth-child(2) { width: 400px; float: right; } .flowChartCh-25-25-50 { overflow: hidden;} .flowChartCh-25-25-50 li { position: relative; float: left; padding: 0; box-sizing: border-box;} .flowChartCh-25-25-50 li:nth-child(1) { width: 200px; } .flowChartCh-25-25-50 li:nth-child(2) { width: 200px; } .flowChartCh-25-25-50 li:nth-child(3) { width: 400px; float: right; } .flowChartCh-25-75 { overflow: hidden;} .flowChartCh-25-75 li { position: relative; float: left; padding: 0; box-sizing: border-box;} .flowChartCh-25-75 li:nth-child(1) { width: 200px; } .flowChartCh-25-75 li:nth-child(2) { width: 570px; float: right; } .flowChartCh-50-50 li:before, .flowChartCh-25-25-50 li:before, .flowChartCh-25-75 li:before { content: ''; display: block; width: 5px; height: 100%; position: absolute; bottom: 4px; left: 50%; z-index: -1;} .flowChartCh-50-50 li:after, .flowChartCh-25-25-50 li:after, .flowChartCh-25-75 li:after {content: ""; position: absolute; bottom: 0; left: 50%; width: 0px; height: 0px; margin: auto; margin-left: -8px;} /*play*/ .playBox01 { width: 380px; margin-bottom: 48px;} .playBox01L { float: left;} .playBox01R { float: right;} .playBox01Img01 { } .playBox01Sub01 { } .playBox01DL01 dt { } .playBox01DL01 dd { } .playBox01DL01 dd:before { } .playBox01DL02 { } .playBox01DL02 dt { } .playBox01DL02 dd { } /*kids park*/ #kidsParkSub01 { overflow: hidden; padding: 0; height: 128px;background-size: auto 100%;} #kidsParkSub02 { margin: -14px 0 0; } #kidsParkImg02 {} .kidsPark {} #kidsParkSub03 { padding: 120px 0 0; margin: 0 auto 8px; font-size: 135.7%; width: 447px; height: 160px; box-sizing: border-box; background-size: auto;} #kidsParkSub0301 { } #kidsParkSub0302 { overflow: hidden; float: left;} #kidsParkSub0303 { clear: none; text-align: center; font-weight: bold; padding: 0;} #kidsParkSub0303 a { } #instaKids { min-height: calc( (210px * 3) );} #instaKids.loaded {} /*beginners area*/ #beginnersAreaImg01 { background: url(images/beginners-area_img01.jpg) 50% 0 no-repeat; margin-top: -35px; padding: 720px 0 0; box-sizing: border-box;} #beginnersAreaImg01.beginnersAreaImg01-2020 { background: url(images/beginners-area_img01-2020.jpg) 50% 0 no-repeat; margin-top: -35px; padding: 720px 0 0; box-sizing: border-box;} #beginnersAreaImg01Ch { margin: 0;} /*course*/ #courseMain { position: relative; width: 100%; margin: 0 0 32px; overflow: hidden;} #courseMain.fixed { position: relative; top: auto; left: auto; } #courseMainBtm { padding-top: 0; } #courseMainBg { position: relative; height: 630px; margin: 0 0 32px; background: url(images/course_map.png) 50% 100% no-repeat; background-size: auto;} #courseMainBg.courseMainBg2020 { background: url(images/course_map-2020.png) 50% 100% no-repeat;} #courseMain ul { } #courseMain ul li { position: absolute; width: 3.1%; top: 50%; left: 50%; line-height: 1; transform: translateY(-0%) translateX(-0%);} #courseMain ul li a { line-height: 1;} #courseMain ul li a img { vertical-align: top;} #courseA { margin-left: -299px; margin-top: -8px;} #courseB { margin-left: -85px; margin-top: -191px;} #courseC { margin-left: 76px; margin-top: -198px;} #courseD { margin-left: 160px; margin-top: -165px;} #courseE { margin-left: 320px; margin-top: -275px;} #courseF { margin-left: 279px; margin-top: -139px;} #courseG { margin-left: 91px; margin-top: -56px;} #courseH { margin-left: 210px; margin-top: -160px;} #courseI { margin-left: 113px; margin-top: -177px;} #courseJ { margin-left: -165px; margin-top: -29px;} #courseK { margin-left: -81px; margin-top: -60px;} #courseL { margin-left: -6px; margin-top: -60px;} #courseN { margin-left: -90px; margin-top: 39px;} #courseM { margin-left: 63px; margin-top: 18px;} #courseO { margin-left: 333px; margin-top: 82px;} #courseP { margin-left: 377px; margin-top: 132px;} #courseQ { margin-left: 456px; margin-top: -40px;} .courseTable { } .courseTable th,.courseTable td { padding: 16px; box-sizing: border-box;} .courseTable th:nth-child(1) { } .courseTable td:last-child, .courseTable th:last-child { } .courseTable th {} .courseTable th[scope=row] { font-size: 121.4%; } .courseTable th[scope=col] { font-size: 100%;} .courseTable th[scope=col]:nth-child(1) { width: 220px; font-size: 128.6%;} .courseTable th[scope=col]:nth-child(2) { width: 60px;} .courseTable th[scope=col]:nth-child(3) { width: 60px;} .courseTable th[scope=col]:nth-child(4) { width: 80px;} .courseTable td { font-size: 107.1%; } .courseTable td:last-child { font-size: 92.9%; } .courseTable tr:nth-child(2n) { background: #ebf4f9; } .stviewLink { font-size: 121.4%;} .stviewLink span { } /*fee*/ #feeMainIcon01 { top: 0; right: auto; left: 50%; margin-left: 290px; width: 175px;} #feeImg01 { top: 32px; width: 112px; } #feeImg02 { width: 175px; } #feeImg03 { right: 48px; width: 88px; } .feeW650 { width: 650px; } .feeW650-01 { width: 650px; } .feeW720 { width: 720px; } .feeTable01 {} .feeTable01 th,.feeTable01 td { padding: 16px;} .feeTable01.aC th,.feeTable01.aC td { text-align: center;} .feeTable01 th[scope=col] { font-size: 107.1%;} .feeTable01 th[scope=row] { font-size: 121.4%;} .feeTable01 td { font-size: 107.1%;} .feeTable01 tr.bgBl01 th, .feeTable01 tr.bgBl01 td { } .feeTableTh01 { width: 190px; } .feeTableTh02 { width: 146px; } .feeTableTh03 { width: 424px; } .feeTableTd04 { width: 140px; } .feeTable01Txt01 { display: inline-block; padding-right: 1em; } .feeTable02 { } .feeTable02 th,.feeTable02 td { padding: 16px;} .feeTable02 th { } .feeTable02 th[scope="col"] { } .feeTable02 th[scope="row"] { font-size: 121.4%;} .feeTable02 td { font-size: 107.1%; text-align: center;} .feeTable02 tr.bgBl01 th, .feeTable02 tr.bgBl01 td { } .feeDl01L { padding: 0 78px 0 0; float: left;} .feeDl01R { overflow: hidden; } #feeImg05 { position: absolute; top: 30px; right: 100px;} #feeImg06 { position: absolute; top: 26px; right: 19px;} #feeImg07 { position: absolute; top: 14px; right: 4px;} /*school*/ .contentNav02 { } .contentNav02 li { } .contentNav02.contentNav02-w li { } .contentNav02 li a:hover { } .contentNav02 li a { font-size: 114.3%; line-height: 1.6;} .contentNav02 li:last-child a {} .contentNav02 li a span { } .contentNav02 li.active a, .contentNav02 li a:hover { } .schoolTable01 { } .schoolTable01 th,.schoolTable01 td { padding: 16px;} .schoolTable01 th.pcpLR0,.schoolTable01 td.pcpLR0 { padding-left: 0px; padding-right: 0px;} .schoolTable01 th { font-size: 121.4%; } .schoolTable01 td { font-size: 107.1%;} .schoolTable01 .schoolTable01W01 { width: 29%; } .schoolTable01 .schoolTable01W02 { width: 190px;} .schoolTable01 .schoolTable01W03 { width: 100px;} .schoolTable01 .schoolTable01Bg01 th,.schoolTable01 .schoolTable01Bg01 td {} .schoolTable01.schoolTable0102 { width: 99%; } .schoolTable01.schoolTable0102 th,.schoolTable01.schoolTable0102 td { padding: 16px; font-size: 107.1%;} .schoolTable01 th[scope=col] { padding-bottom: 4px; font-size: 107.1%;} .schoolTable01W01 { width: 216px; } .schoolLevel { width: 632px; margin: 0 auto;} .schoolLevel li { max-width: 112px; padding: 0; margin: 0 18px 0 0;} .schoolLevel li:nth-child(5n) { margin-right: 0;} .schoolContactList { overflow: hidden; } .schoolContactList li { float: left; width: 520px; margin: 0 30px 0 0;} .schoolContactList li:nth-child(2n) { width: 290px; margin-right: 0;} .schoolContactList li > p { } .schoolContactList li > p > span { padding: 0 8px 8px; display: inline-block; border-bottom: #6EB0D0 solid 1px; } .schoolContactList li:nth-child(1) dl { width: 259px; float: left; margin-right: 0; } .schoolContactList li dt { } .schoolContactList li dd { } .schoolContactList li a { } .schoolContactList li a span { } /*mamamiki*/ .mamamikiChart { overflow: visible;} .mamamikiChart > li {} .mamamikiChartTime01 {} .mamamikiChartTime02 {} .mamamikiChartBox01 { padding: 16px;} .mamamikiChartStep01 {} .mamamikiChartStep01 .mamamikiChartCh-50-50 { overflow: visible;} .mamamikiChartStep01 .mamamikiChartCh-50-50 li { position: relative; overflow: visible;} .mamamikiChartStep01 span { display: block; padding-bottom: 0; padding-left: 2em;} .mamamikiChartStep01 img { position: absolute; left: 50%; margin-left: -168px;} #schoolMamamikiSchedule01 { top: -37px;} #schoolMamamikiSchedule02 { top: -28px; } .mamamikiChartStep02 {} .mamamikiChartStep02 .mamamikiChartCh-100 { padding-bottom: 40px; } .mamamikiChartStep02 dl { padding-left: 190px;} .mamamikiChartStep02 dt { } .mamamikiChartStep02 dd { } .mamamikiChartStep03 {} .mamamikiChartStep03 .mamamikiChartCh-50-50 li { } .mamamikiChartStep03 .mamamikiChartCh-50-50 > li { padding-bottom: 0; } #schoolMamamikiSchedule03 { float: left; padding-bottom: 0; } #schoolMamamikiSchedule03Txt { padding: 36px 0 0; } #schoolMamamikiSchedule04 { float: right; margin-top: -60px; padding-bottom: 0; } #schoolMamamikiSchedule04Txt { padding: 16px 0; } .mamamikiChartCh-50-50 { } .mamamikiChartCh-50-50 > li { } .mamamikiChartCh-50-50 > li:nth-child(1) { } .mamamikiChartCh-50-50 > li:nth-child(2) { } .mamamikiChartCh-50-50 li:before { } .mamamikiChartCh-100 { } .mamamikiChartCh-100:before { } .mamamikiChartCh-100:after { } .mamamikiReservationTable { } .mamamikiReservationTable th,.mamamikiReservationTable td { } .mamamikiReservationTableTh01 { padding: 24px 0; } .mamamikiReservationTableTd01 { padding: 20px 0;} .mamamikiReservationTableTd02 { padding: 20px 8px 14px;} .mamamikiReservationTableTd03 { padding: 20px 0;} /*neige*/ #neigeImg01 { position: absolute; top: -90px; right: 60px; width: 20%; } #neigeImg02 { } #neigeImg02 > p { } #neigeImg02 > div { width: auto;} /*fssks*/ #fssksImg02 { display: flex; flex-wrap: wrap; align-items: center; justify-content: center;} #fssksImg02 > p { width: 200px; margin-right: 24px;} #fssksImg02 > div { width: auto;} .fssksTxt01 { display: flex; flex-wrap: wrap; justify-content: center; } /*access*/ #accessMapPare { width: 400px; float: right; } #accessMap { padding-bottom: 400px;} #accessMap iframe, #accessMap object, #accessMap embed { } #accessTxt01 { } #accessTxt01 a { } #winterAccessImg0301 { width: 520px; min-height: 100px; margin: 0 auto 60px; padding: 16px 0 0 164px; font-size: 142.9%; box-sizing: border-box; font-weight: bold; background: url(images/winter_access_img03_01.png) 0 50% no-repeat; background-size: auto;} #winterAccessDl01 { width: 570px; float: right; } #winter_access_img03_02 { padding: 0 0 40px 30px; overflow: hidden; float: left;} #winter_access_img03_03 { overflow: hidden; clear: both; } .accessSlideNav { clear: both; } .accessSlideNav:before { absolute; top: 51px;} .accessSlideNav li a { padding: 72px 0 0; background-size: auto; } .accessSlideNav li a.active:after { top: 51px;} .accessBtn01 {} .accessBtn01 > li { } .accessBtn01 > li > span { padding: 0.9em 0; font-size: 150.0%;} .accessBtn01 li ul { } .accessBtn01 li li { width: 400px;} .accessBtn01 li li:before { } .accessBtn01 li li:after { } .accessBtn01 li li:nth-child(2) {} .accessBtn01 li li a { padding: 0.9em 0; font-size: 150.0%;} .accessBtn01 li li:nth-child(1) a { padding: 1.5em 0 1.5em 0;} .accessBtn01 li li a:hover { opacity: 1;} .accessBtn01 li li a:after { } .accessBtn01 li li:nth-child(1) a { } .accessBtn01 li li:nth-child(2) a { } .accessSub { display: inline-block; padding: 1em;} .accessSub02 { padding: 0.75em;} .busTable { } .busTable th,.busTable td { padding: 18px; box-sizing: border-box;} .busTable td { } .busTableW01 { width: auto;} .busTableW02 { width: 220px;} .busTableBg01 th,.busTableBg01 td,.busTableBg01 {} .busTableArrow { width: 100px;} .busTableArrow:before { } .busTableArrow::after { } .busTableArrow02 { width: 100px;} .busTableArrow02:before { } .busTableArrow02::after { } .busTable02 { width: auto;} .busTable02 th,.busTable02 td { padding: 18px 0;} .busTable02 .bb th,.busTable02 .bb td {} .busTable02 th:last-child,.busTable02 td:last-child { border-right: #3e96c0 solid 1px;} .busTable02 td { text-align: center;} .busTable02ThW-6-1 { width: 286px; } .busTable02ThW-6-2 { width: 76px; } .busTable02ThW-6-3 { width: 76px; } .busTable02ThW-6-4 { width: 150px; } .busTable02ThW-8 { width: 70px; } .busTable02JR { padding-left: 32px; background-size: auto;} .busTable02 th[scope="col"] { } .busTable02 th[scope="row"] { padding-left: 70px;} .busTable02 th[scope="row"]:before { content: ''; display: block; width: 1px; height: 100%; min-height: 56px; position: absolute; top: 0; left: 35px; background: #000;} .busTable02 th[scope="row"]:after { content: ''; display: block; width: 17px; height: 17px; position: absolute; top: 50%; left: 26px; z-index: 1; transform: translateY(-9px); background: #FFF; border: #000 1px solid; border-radius: 17px;} .busTable02 th.busStart {} .busTable02 th.busStart:before { top: 50%;} .busTable02 th.busGoal {} .busTable02 th.busGoal:before { height: 50%; top: auto; bottom: 50%;} .busTable02 th.busGoal:after { content: ''; display: block; width: 50px; height: 28px; position: absolute; top: 50%; left: 7px; transform: translateY(-14px); background: #FFF url(images/icon_nakazato.png) 0 0 no-repeat; background-size: auto; border: none; border-radius: 0;} .busTable02 th.busStart02 {} .busTable02 th.busStart02:before { height: 50%; top: 50%;} .busTable02 th.busStart02:after { content: ''; display: block; width: 50px; height: 28px; position: absolute; top: 50%; left: 7px; transform: translateY(-14px); background: #FFF url(images/icon_nakazato.png) 0 0 no-repeat; background-size: auto; border: none; border-radius: 0;} .busTable02 th.busGoal02 {} .busTable02 th.busGoal02:before { top: auto; bottom: 50%;} .parkingTable { width: 100%;} .parkingTable th,.parkingTable td { padding: 20px;} .parkingTableW01 { width: 180px; } .parkingTableW02 { width: 160px;} .parkingTableTd01 { } .parkingTableTd01 dl { display: flex; flex-wrap: wrap; align-items: center;} .parkingTableTd01 dt { margin-right: 24px;} .parkingTableTd01 dd { } .parkingTableTd02 { padding-left: 48px !important; padding-right: 48px !important; } .winterAccessJR {} .winterAccessJRList { width: 620px; margin: 0 auto;} .winterAccessJRList > li { } .winterAccessJRList > li:nth-child(2) { } .winterAccessJRList > li > a { display: block; box-sizing: border-box; padding: 10px; border: #4C86AD solid 1px; } .winterAccessJRListTxt01 { text-align: center; margin: -1.5em 0 8px;} .winterAccessJRListTxt01 > span { display: inline-block; padding: 0 4px; background: #FFF;} .winterAccessJRListTxt01 > span > span { display: inline-block; padding-left: 30px; background: url(images/icon_jr_gy01.png) no-repeat 0 50% /auto;} .winterAccessJRListTxt02 { text-align: center;} .winterAccessJRListTxt02 > span { display: inline-block; } .winterAccessJRListTxt02 > span:nth-child(1) { text-align: left;} .winterAccessJRListTxt02 > span:nth-child(2) { text-align: left; line-height: 1; padding: 0 4px; transform: translateY(-2px);} .winterAccessJRListTxt02 > span:nth-child(3) { text-align: left;} /*restraunt*/ .restrauntInsta { overflow: hidden; } .restrauntInsta { min-height: calc( 210px * 2 + 40px );} .restrauntInsta li { width: 210px; float: left; margin: 0 20px 20px 0;} .restrauntInsta li:nth-child(2n) { float: left; } .restrauntInsta li:nth-child(2n+1) { clear: none; } .restrauntInsta li:nth-child(4n) { margin-right: 0; } /*freespace*/ #freeSpaceImg01 { position: absolute; bottom: -50px; right: auto; left: 50%; width: 154px; margin-left: 256px; } /*season ticket*/ #seasonTicletTitle { padding: 0; margin: 0px 0 18px; text-align: center;} #seasonTicletTitle span { text-align: left;} #seasonTicletTitle > span { background-image: url(images/season-ticket_title.png); background-position: 0 0; padding: 40px 0 10px 160px; margin: 0; background-size: 137px auto%;} #seasonTicletTitle > span > span { font-size: 300.0%;} #seasonTicletTitle > span > span > span { } #seasonTicletTxt01 { padding: 0 0 24px; margin: 0 0 32px;} #seasonTicletTxt01 span { background-size: auto 135px;} #seasonTicletTxt01 > span { padding: 0 0 0 150px; margin: 0;} #seasonTicletTxt01 > span > span { min-height: 135px; box-sizing: border-box; padding: 35px 0 0; padding-right: 160px;} .seasonTicketPass { display: flex; flex-wrap: wrap;} .seasonTicketPass > li { width: calc( (100% - 38px)/2 ); margin: 48px 38px 0 0; box-sizing: border-box;} .seasonTicketPass > li:nth-child(2n) { margin-right: 0; } .seasonTicketPass > li:nth-child(1) { margin-top: 0; } .seasonTicketPass > li:nth-child(2) { margin-top: 0; } .seasonTicketPass > li:after { content: ''; display: block; width: 54px; height: 100%; position: absolute; top: 0; left: 0; background: #8ad0df url(images/season-ticket_txt01.png) no-repeat -2px -8px / 60px auto; } .seasonTicketPassTitle { padding: 16px 0 3px 20px; margin: 0 0 12px; font-size: 192.9%; color: #FFF; background: #3E96C0; font-weight: 900; letter-spacing: 0.1em; line-height: 1.37;} .seasonTicketPassSub01 { margin: 0 8px 7px 24px; padding: 0 0 6px; font-size: 150.0%; line-height: 1.38; font-weight: 700; color: #4396C0; border-bottom: #4396C0 solid 1px;} .seasonTicketPassSub02 { margin: 0 8px 10px 24px; padding: 0 0 3px; font-size: 128.6%; line-height: 1.38; font-weight: 700; color: #4396C0; border-bottom: #4396C0 solid 1px;} .seasonTicketPassTxt01 { margin: 0 8px 15px 24px; font-size: 121.4%; line-height: 1.58; } .seasonTicketPassTxt02 { padding: 13px 0 8px 21px; margin: 0 0 8px; background: #F3447F; color: #FFFF; line-height: 1.2;} .seasonTicketPassTxt03 { padding: 0 10px 10px 20px; font-size: 85.7%; color: #666868; line-height: 1.5;} .seasonTicketPass > li .middotList01 { margin-left: 24px;} .seasonTicketPassDl01 { font-size: 114.3%; line-height: 1.5; padding: 0 0 8px 20px; margin: 0 0 5px; border-bottom: #7BB7D4 solid 2px;} .seasonTicketPassDl01 dt { color: #453E49; } .seasonTicketPassDl01 dd { color: #666868; } .seasonTicketPassBadge { position: absolute; width: 88px; top: -64px; right: 15px; color: #F3447F; text-align: center; font-weight: 700;} .seasonTicketPassBadge01 { } .seasonTicketPassBadge01 span { display: inline-block; font-size: 114.3%; letter-spacing: 0.2em;} .seasonTicketPassBadge01 span:nth-child(1) { transform: rotate( -15deg ) translateY(3px) translateX(-2px); } .seasonTicketPassBadge01 span:nth-child(2) {} .seasonTicketPassBadge01 span:nth-child(3) { transform: rotate( 15deg ) translateY(3px) translateX(2px); } .seasonTicketPassBadge02 { position: relative; width: 88px; height: 88px; background: #FFF; border-radius: 88px; border: #F3447F solid 1px; line-height: 1;} .seasonTicketPassBadge02:after { content: ""; display: block; width: 64px; height: 1px; background: #F3447F; position: absolute; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%) rotate(-45deg); margin: -6px 0 0;} .seasonTicketPassBadge02 p { position: absolute; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%);n} .seasonTicketPassBadge0201 { font-size: 171.4%; margin: -19px 0 0 -17px;} .seasonTicketPassBadge0202 { font-size: 171.4%; margin: 5px 0 0 17px;} .seasonTicketPassBadge0203 { font-size: 114.3%; margin: 28px 0 0;} .seasonTicketPassColBl01 .seasonTicketPassSub01 span { letter-spacing: -0.1em; } .seasonTicletTable { width: 100%; } .seasonTicletTable th,.seasonTicletTable td { padding: 20px 10px; font-size: 100%;} .seasonTicletTable02 th,.seasonTicletTable02 td { padding: 24px 40px; font-size: 100%;} .seasonTicletTable02 th { padding: 24px 56px;} .seasonTicletTable02 th { white-space: nowrap;} .seasonTicletTableBl {} .seasonTicletTableBl th,.seasonTicletTableBl td { } .seasonTicletTableBl01 th,.seasonTicletTableBl01 td,.seasonTicletTableBl01 { } .seasonTicletTablePk th,.seasonTicletTablePk td { padding: 20px 24px; } .seasonTicletTablePk01 th,.seasonTicletTablePk01 td,.seasonTicletTablePk01 {} .seasonTicletTableW01 { width: 170px; } .seasonTicletTableW02 { width: 280px; } .seasonTicletTablePrice01 { text-align: right; padding-right: 20px !important;} .seasonTicletTablePrice02 { padding-left: 36px !important;} .seasonTicketDl01 {} .seasonTicketDl01 dt { float: left; width: 8em; } .seasonTicketDl01 dd { overflow: hidden; } .seasonTicletTableW03 {} .seasonTicletTableW04 { width: 180px;} .seasonTicletTableW05 { width: 180px;} .seasonTicletTableW06 { width: 180px;} .seasonTicketPassNew { } .seasonTicketPassNew:after { font-size: 135.70%;} /*post*/ .postBody { padding: 137px 0 0 !important; } #winterInformationSub01 { font-size: 192.9%;} #winterInformationSub01 span { } #winterInformationSub0101 { padding-left: 48px; background-image: url(images/winter_index_information_title_icon01.png); background-position: 0 0; } #winterEventSub01 { font-size: 192.9%;} #winterEventSub01 span { } #winterEventSub0101 { padding-left: 96px;} #winterEventSub0102 { padding: 24px 112px 24px 0;} #winterMovieSub01 { margin: 24px 0 80px; font-size: 192.9%;} #winterMovieSub01 span { display: inline-block; padding: 8px 0 8px 90px; background: url(images/movie-garelley_title_bg01.png) 0 50% no-repeat; background-size: auto;} #winterPhotoSub01 { margin: 24px 0 80px; font-size: 192.9%;} #winterPhotoSub01 span { display: inline-block; padding: 8px 0 8px 90px; background: url(images/photo-garelley_title_bg01.png) 0 50% no-repeat; background-size: auto;} /*post list*/ .postList { overflow: hidden; padding: 40px 0 0;} .postList li { float: left; width: 25%; box-sizing: border-box; padding: 0 16px; margin: 0 0 40px; } .postList li:nth-child(2n) { float: left; } .postList li:nth-child(2n+1) { clear: none;} .postList li:nth-child(4n+1) { clear: left;} .postListThumb { padding: 0 0 8px; text-align: center;} .postListTitle { line-height: 1.4; font-weight: bold; padding: 0 0 8px; } .postListDate { font-size: 85.7%; } .postTitle { font-size: 142.9%; font-weight: bold; padding: 0 0 4px; } .postDate { padding: 0 0 24px; } .postWraper { overflow: hidden; } .postWraper p { padding-bottom: 16px; } .movieList { overflow: hidden; } .movieList li { margin: 0 0 40px 0;} .movieList.movieList1 li { float: none; margin: 0 auto 40px auto; width: 640px;} .movieList li:nth-child(2n) { } .movieList li:nth-child(2n+1) { } .movieList li:nth-child(3n) { } .movieList li:nth-child(3n+1) { } .movieList li .moviePare { width: 100%; position:relative; padding-top:56.25%;} .movieList li iframe { position:absolute; top:0; right:0; width:100%; height:100%;} .photoSub { font-size: 157.1%;} .photoList { overflow: hidden; padding: 0 0 80px;} .photoList li { float: left; width: 25%; box-sizing: border-box; padding: 0 16px; margin: 0 0 40px; } .photoList li:nth-child(2n) { float: left; } .photoList li:nth-child(2n+1) { clear: none;} .photoList li:nth-child(4n+1) { clear: left;} .singlePager { overflow: hidden; padding: 80px 0 0; clear: both;} .singlePager .prev { float: left; } .singlePager .next { float: right; } .toList { text-align: center; margin-top: -1.6em;} /*activity*/ #activityNav { } #activityNav li { width: 25%; } #activityNav li:nth-child(2n) { border-right: #4094C8 solid 1px;} #activityNav li:nth-child(2) { border-right: none;} #activityNav li:nth-child(1), #activityNav li:nth-child(2) { border-bottom: #4094C8 solid 1px;} #activityNav li button { font-size: 164.3%; padding: 16px 0;} #activityNav li button.is-checked { } #activityList { } #activityList li { width: 25%; margin: 0 0 60px; border-right: #FFF 1px solid;} #activityList li:nth-child(2n-1) {} #activityList li a { padding: 32px 0;} #activityList li a:after { } #activityList li.forest-adventure a { } #activityList li.family-short-course a { } #activityList li.golf-practice a { } #activityList li.mtb a { } #activityList li.cross-country a { } #activityList li.daigenta-canion a { } #activityList li.kayak a { } #activityList li.sup a { } #activityList li.nordic-walk a { } #activityList li.pizza a { } #activityList li.ground-golf a { } #activityList li.disc-golf a { } #activityList li.auto-camp a { } #activityList li.indoor-activity a { } #activityList li.bbq a { } .activityListArea { } .activityListImg { } .activityListTxt {} .activityListTxt span { } /*forest-adventure*/ body.forest-adventure { background: url(images/forest-adventure_body_bg.jpg); } body.forest-adventure #contentArticle { padding-bottom: 0; } #forestAdventureBg { padding: 80px 0 0;} .forestAdventureImg01 { width: 840px; margin: 0 auto; background: url(images/forest-adventure_img01.png) 100% 2em no-repeat; background-size: auto;} #forestAdventureBgWh { } .forestAdventureTable01 { } .forestAdventureTable01 th,.forestAdventureTable01 td { padding: 18px 40px;} .forestAdventureTable01 th { padding: 18px 70px;} .forestAdventureTable01Td01 { } .forestAdventureTable01 .forestAdventureTable01Tr01 td { padding: 18px 20px;} .forestAdventureAccdBox { } .forestAdventureAccdTitle {} .forestAdventureAccdTitle a { padding: 1.3em 0;} .forestAdventureAccdTitle a:after { content: none;} .forestAdventureAccdSub { } .forestAdventureAccdTar { display: block; } .forestAdventureAccdTarTxt01 { } .forestAdventureAccdTarDl01 {} .forestAdventureAccdTarDl01 dd { } .forestAdventureAccdTarDl01 table { } .forestAdventureAccdTarDl01 table th,.forestAdventureAccdTarDl01 table td { } .forestAdventureAccdLink { } #forestAdventureTel { overflow: hidden; clear: both; } #forestAdventureTelL { float: left; width: 550px; padding: 0 0 0 100px; text-align: left; box-sizing: border-box;} #forestAdventureTelLBg { padding-left: 130px;} #forestAdventureTelR { padding: 20px 0 0; } #forestAdventureOl01 {} #forestAdventureOl01 li { } #forestAdventureOl01 li:after { left: 160px;} #forestAdventureOl01 li:last-child:after { } #forestAdventureOl01 dt { font-size: 171.4%; width: 320px; padding: 10px 0; } #forestAdventureOl01 dd { clear: none; overflow: hidden; padding: 20px 0 0 30px;} #forestAdventureYt { overflow: hidden;} #forestAdventureYtL { float: left; overflow: hidden; width: 450px; box-sizing: border-box; padding: 16px 0 35px; } #forestAdventureYtR { overflow: hidden; } #forestAdventureYtR img { width: auto; } /*activity common*/ .activityTable01 { width: 100%; } .activityTable01 th,.activityTable01 td { padding: 24px 30px; font-size: 107.1%; } .activityTable01Bg01 th,.activityTable01Bg01 td,.activityTable01Bg01 {} .activityTable0102 tr:nth-child(2n+1) th,.activityTable0102 tr:nth-child(2n+1) td { background-color: #ebf3d2;} .activityTable0102 th { white-space: nowrap;} .activityTable01W01 { white-space: nowrap; } .activityTable01W02 { width: 320px;} .activityTable01.courseLayoutTable { font-size: 100%;} .activityTable01.courseLayoutTable th,.activityTable01.courseLayoutTable td { padding: 24px 24px;} .activityTable02 { } .activityTable02 th,.activityTable02 td { padding: 24px 30px; font-size: 107.1%; } .activityTable02 th { white-space: nowrap;} .activityBtnTxt { padding: 0; float: left; max-width: 300px; } .activityBtn { float: right; } .activitySub01 { padding: 16px 16px;} .activitySub02 { padding: 16px 16px;} /*golf*/ #golfImg01 { top: -96px; right: auto; left: 50%; margin-left: 260px; width: auto; } #golfImg02 { position: relative; width: 870px; margin: 0 auto;} #golfImg02 #golfImg02Ch { position: absolute; top: 0; left: 0; padding: 0 0 0 420px; box-sizing: border-box;} .termTimeList01 { padding: 0 20px; font-size: 121.4%; } .termTimeList01 li { overflow: hidden; padding: 0 0 8px; float: left; width: 50%; } .termTimeList01 li:last-child { padding: 0; } .termTimeList01 dt { } .termTimeList01 dd {} #golfImg05 { padding: 0 0 24px 270px; background: url(images/golf_img05.png) 80px 0 no-repeat; background-size: auto;} #golfImg06 { top: -48px; left: 32px; width: auto; } .golfImg06Txt { padding-left: 240px; } .cal_wrapper { max-width: 800px; min-width: 300px; margin: 2.0833% auto;} .googlecal { position: relative; padding-bottom: 100%; height: 0; overflow: hidden;} .googlecal iframe { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important;} @media only screen and (min-width: 600px) { .googlecal { padding-bottom: 75%; } } /*sitemap*/ .sitemapList {} .sitemapList > li { float: left; width: 33%;} .sitemapList > li > span, .sitemapList > li > a { } .sitemapList > li > span:before, .sitemapList > li > a:before { } .sitemapList > li > ul { } .sitemapList > li > ul li { } .sitemapList > li.pcw100per { width: 100%; } .sitemapList > li.pcw50per { width: 50%; } .sitemapList > li.pcw100per li { width: 33%; float: left; padding-right: 1em; box-sizing: border-box;} /*rental*/ .volkl01 { padding: 0 0 48px; text-align: center;} .volkl01 p:nth-child(1) { box-sizing: border-box; padding: 0 0 32px; } .volkl01 p:nth-child(2) { } .volkl02 { padding: 0 0 32px; display: flex; flex-wrap: wrap; align-items: center;} .volkl02 .volkl02Ch01 { width: 52%; box-sizing: border-box; margin-right: 24px;} .volkl02 .volkl02Ch02 { width: calc( 48% - 24px );} .rentalUl01 { padding: 16px 0; margin: 0 0 16px; background: #ecf4f9; border: #4e97c2 solid 1px;} .rentalUl01 > li {} .rentalUl01 > li > dl { } .rentalUl01 > li > dl > dt { width: 220px; padding: 0 0 0 16px;} .rentalUl01 > li > dl > dd { width: calc( 100% - 220px ); } /**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ } /* PC向けレイアウトの指定 *//******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ @media print, screen and ( min-width: 960px ) { } /*covid19Btn*/ footer { margin-bottom: 83px;} #covid19Btn { position: fixed; bottom: 0; left: 0; z-index: 100; width: 100%; height: 83px; text-align: center;} #covid19Btn a { position: relative; display: flex; flex-wrap: wrap; align-items: center; width: 100%; height: 100%; background: #0095a6; padding: 0; color: #FFF !important; font-weight: bold; } #covid19Btn a:before,#covid19Btn a:after { content: ""; display: block; width: 100%; height: 2px; background: #F2B800; position: absolute; left: 0;} #covid19Btn a:before { top: 10px;} #covid19Btn a:after { bottom: 10px;} #covid19Btn a span { font-size: 15px; display: block; width: 100%; text-align: center;} @media only print, screen and ( max-width: 600px ) { .pcDisp { display: none;v } } @media print, screen and ( min-width: 600px ) { footer { margin-bottom: 0;} #covid19Btn { position: fixed; bottom: auto; top: 210px; left: auto; right: 0; width: 150px; } #covid19Btn a { } #covid19Btn a:before,#covid19Btn a:after {} #covid19Btn a:before { } #covid19Btn a:after { } #covid19Btn a span { font-size: 14px;} }