@charset "utf-8"; @font-face{font-family:themify;src:url(../font/themify/themify_-fvbane.eot);src:url(../font/themify/themify.eot) format('embedded-opentype'),url(../font/themify/themify_-fvbane.woff) format('woff'),url(../font/themify/themify_-fvbane.ttf) format('truetype'),url(../font/themify/themify_-fvbane-themify.svg) format('svg');font-weight:400;font-style:normal}[class*=" ti-"],[class^=ti-]{font-family:themify;speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.ti-wand:before{content:"\e600"}.ti-volume:before{content:"\e601"}.ti-user:before{content:"\e602"}.ti-unlock:before{content:"\e603"}.ti-unlink:before{content:"\e604"}.ti-trash:before{content:"\e605"}.ti-thought:before{content:"\e606"}.ti-target:before{content:"\e607"}.ti-tag:before{content:"\e608"}.ti-tablet:before{content:"\e609"}.ti-star:before{content:"\e60a"}.ti-spray:before{content:"\e60b"}.ti-signal:before{content:"\e60c"}.ti-shopping-cart:before{content:"\e60d"}.ti-shopping-cart-full:before{content:"\e60e"}.ti-settings:before{content:"\e60f"}.ti-search:before{content:"\e610"}.ti-zoom-in:before{content:"\e611"}.ti-zoom-out:before{content:"\e612"}.ti-cut:before{content:"\e613"}.ti-ruler:before{content:"\e614"}.ti-ruler-pencil:before{content:"\e615"}.ti-ruler-alt:before{content:"\e616"}.ti-bookmark:before{content:"\e617"}.ti-bookmark-alt:before{content:"\e618"}.ti-reload:before{content:"\e619"}.ti-plus:before{content:"\e61a"}.ti-pin:before{content:"\e61b"}.ti-pencil:before{content:"\e61c"}.ti-pencil-alt:before{content:"\e61d"}.ti-paint-roller:before{content:"\e61e"}.ti-paint-bucket:before{content:"\e61f"}.ti-na:before{content:"\e620"}.ti-mobile:before{content:"\e621"}.ti-minus:before{content:"\e622"}.ti-medall:before{content:"\e623"}.ti-medall-alt:before{content:"\e624"}.ti-marker:before{content:"\e625"}.ti-marker-alt:before{content:"\e626"}.ti-arrow-up:before{content:"\e627"}.ti-arrow-right:before{content:"\e628"}.ti-arrow-left:before{content:"\e629"}.ti-arrow-down:before{content:"\e62a"}.ti-lock:before{content:"\e62b"}.ti-location-arrow:before{content:"\e62c"}.ti-link:before{content:"\e62d"}.ti-layout:before{content:"\e62e"}.ti-layers:before{content:"\e62f"}.ti-layers-alt:before{content:"\e630"}.ti-key:before{content:"\e631"}.ti-import:before{content:"\e632"}.ti-image:before{content:"\e633"}.ti-heart:before{content:"\e634"}.ti-heart-broken:before{content:"\e635"}.ti-hand-stop:before{content:"\e636"}.ti-hand-open:before{content:"\e637"}.ti-hand-drag:before{content:"\e638"}.ti-folder:before{content:"\e639"}.ti-flag:before{content:"\e63a"}.ti-flag-alt:before{content:"\e63b"}.ti-flag-alt-2:before{content:"\e63c"}.ti-eye:before{content:"\e63d"}.ti-export:before{content:"\e63e"}.ti-exchange-vertical:before{content:"\e63f"}.ti-desktop:before{content:"\e640"}.ti-cup:before{content:"\e641"}.ti-crown:before{content:"\e642"}.ti-comments:before{content:"\e643"}.ti-comment:before{content:"\e644"}.ti-comment-alt:before{content:"\e645"}.ti-close:before{content:"\e646"}.ti-clip:before{content:"\e647"}.ti-angle-up:before{content:"\e648"}.ti-angle-right:before{content:"\e649"}.ti-angle-left:before{content:"\e64a"}.ti-angle-down:before{content:"\e64b"}.ti-check:before{content:"\e64c"}.ti-check-box:before{content:"\e64d"}.ti-camera:before{content:"\e64e"}.ti-announcement:before{content:"\e64f"}.ti-brush:before{content:"\e650"}.ti-briefcase:before{content:"\e651"}.ti-bolt:before{content:"\e652"}.ti-bolt-alt:before{content:"\e653"}.ti-blackboard:before{content:"\e654"}.ti-bag:before{content:"\e655"}.ti-move:before{content:"\e656"}.ti-arrows-vertical:before{content:"\e657"}.ti-arrows-horizontal:before{content:"\e658"}.ti-fullscreen:before{content:"\e659"}.ti-arrow-top-right:before{content:"\e65a"}.ti-arrow-top-left:before{content:"\e65b"}.ti-arrow-circle-up:before{content:"\e65c"}.ti-arrow-circle-right:before{content:"\e65d"}.ti-arrow-circle-left:before{content:"\e65e"}.ti-arrow-circle-down:before{content:"\e65f"}.ti-angle-double-up:before{content:"\e660"}.ti-angle-double-right:before{content:"\e661"}.ti-angle-double-left:before{content:"\e662"}.ti-angle-double-down:before{content:"\e663"}.ti-zip:before{content:"\e664"}.ti-world:before{content:"\e665"}.ti-wheelchair:before{content:"\e666"}.ti-view-list:before{content:"\e667"}.ti-view-list-alt:before{content:"\e668"}.ti-view-grid:before{content:"\e669"}.ti-uppercase:before{content:"\e66a"}.ti-upload:before{content:"\e66b"}.ti-underline:before{content:"\e66c"}.ti-truck:before{content:"\e66d"}.ti-timer:before{content:"\e66e"}.ti-ticket:before{content:"\e66f"}.ti-thumb-up:before{content:"\e670"}.ti-thumb-down:before{content:"\e671"}.ti-text:before{content:"\e672"}.ti-stats-up:before{content:"\e673"}.ti-stats-down:before{content:"\e674"}.ti-split-v:before{content:"\e675"}.ti-split-h:before{content:"\e676"}.ti-smallcap:before{content:"\e677"}.ti-shine:before{content:"\e678"}.ti-shift-right:before{content:"\e679"}.ti-shift-left:before{content:"\e67a"}.ti-shield:before{content:"\e67b"}.ti-notepad:before{content:"\e67c"}.ti-server:before{content:"\e67d"}.ti-quote-right:before{content:"\e67e"}.ti-quote-left:before{content:"\e67f"}.ti-pulse:before{content:"\e680"}.ti-printer:before{content:"\e681"}.ti-power-off:before{content:"\e682"}.ti-plug:before{content:"\e683"}.ti-pie-chart:before{content:"\e684"}.ti-paragraph:before{content:"\e685"}.ti-panel:before{content:"\e686"}.ti-package:before{content:"\e687"}.ti-music:before{content:"\e688"}.ti-music-alt:before{content:"\e689"}.ti-mouse:before{content:"\e68a"}.ti-mouse-alt:before{content:"\e68b"}.ti-money:before{content:"\e68c"}.ti-microphone:before{content:"\e68d"}.ti-menu:before{content:"\e68e"}.ti-menu-alt:before{content:"\e68f"}.ti-map:before{content:"\e690"}.ti-map-alt:before{content:"\e691"}.ti-loop:before{content:"\e692"}.ti-location-pin:before{content:"\e693"}.ti-list:before{content:"\e694"}.ti-light-bulb:before{content:"\e695"}.ti-Italic:before{content:"\e696"}.ti-info:before{content:"\e697"}.ti-infinite:before{content:"\e698"}.ti-id-badge:before{content:"\e699"}.ti-hummer:before{content:"\e69a"}.ti-home:before{content:"\e69b"}.ti-help:before{content:"\e69c"}.ti-headphone:before{content:"\e69d"}.ti-harddrives:before{content:"\e69e"}.ti-harddrive:before{content:"\e69f"}.ti-gift:before{content:"\e6a0"}.ti-game:before{content:"\e6a1"}.ti-filter:before{content:"\e6a2"}.ti-files:before{content:"\e6a3"}.ti-file:before{content:"\e6a4"}.ti-eraser:before{content:"\e6a5"}.ti-envelope:before{content:"\e6a6"}.ti-download:before{content:"\e6a7"}.ti-direction:before{content:"\e6a8"}.ti-direction-alt:before{content:"\e6a9"}.ti-dashboard:before{content:"\e6aa"}.ti-control-stop:before{content:"\e6ab"}.ti-control-shuffle:before{content:"\e6ac"}.ti-control-play:before{content:"\e6ad"}.ti-control-pause:before{content:"\e6ae"}.ti-control-forward:before{content:"\e6af"}.ti-control-backward:before{content:"\e6b0"}.ti-cloud:before{content:"\e6b1"}.ti-cloud-up:before{content:"\e6b2"}.ti-cloud-down:before{content:"\e6b3"}.ti-clipboard:before{content:"\e6b4"}.ti-car:before{content:"\e6b5"}.ti-calendar:before{content:"\e6b6"}.ti-book:before{content:"\e6b7"}.ti-bell:before{content:"\e6b8"}.ti-basketball:before{content:"\e6b9"}.ti-bar-chart:before{content:"\e6ba"}.ti-bar-chart-alt:before{content:"\e6bb"}.ti-back-right:before{content:"\e6bc"}.ti-back-left:before{content:"\e6bd"}.ti-arrows-corner:before{content:"\e6be"}.ti-archive:before{content:"\e6bf"}.ti-anchor:before{content:"\e6c0"}.ti-align-right:before{content:"\e6c1"}.ti-align-left:before{content:"\e6c2"}.ti-align-justify:before{content:"\e6c3"}.ti-align-center:before{content:"\e6c4"}.ti-alert:before{content:"\e6c5"}.ti-alarm-clock:before{content:"\e6c6"}.ti-agenda:before{content:"\e6c7"}.ti-write:before{content:"\e6c8"}.ti-window:before{content:"\e6c9"}.ti-widgetized:before{content:"\e6ca"}.ti-widget:before{content:"\e6cb"}.ti-widget-alt:before{content:"\e6cc"}.ti-wallet:before{content:"\e6cd"}.ti-video-clapper:before{content:"\e6ce"}.ti-video-camera:before{content:"\e6cf"}.ti-vector:before{content:"\e6d0"}.ti-themify-logo:before{content:"\e6d1"}.ti-themify-favicon:before{content:"\e6d2"}.ti-themify-favicon-alt:before{content:"\e6d3"}.ti-support:before{content:"\e6d4"}.ti-stamp:before{content:"\e6d5"}.ti-split-v-alt:before{content:"\e6d6"}.ti-slice:before{content:"\e6d7"}.ti-shortcode:before{content:"\e6d8"}.ti-shift-right-alt:before{content:"\e6d9"}.ti-shift-left-alt:before{content:"\e6da"}.ti-ruler-alt-2:before{content:"\e6db"}.ti-receipt:before{content:"\e6dc"}.ti-pin2:before{content:"\e6dd"}.ti-pin-alt:before{content:"\e6de"}.ti-pencil-alt2:before{content:"\e6df"}.ti-palette:before{content:"\e6e0"}.ti-more:before{content:"\e6e1"}.ti-more-alt:before{content:"\e6e2"}.ti-microphone-alt:before{content:"\e6e3"}.ti-magnet:before{content:"\e6e4"}.ti-line-double:before{content:"\e6e5"}.ti-line-dotted:before{content:"\e6e6"}.ti-line-dashed:before{content:"\e6e7"}.ti-layout-width-full:before{content:"\e6e8"}.ti-layout-width-default:before{content:"\e6e9"}.ti-layout-width-default-alt:before{content:"\e6ea"}.ti-layout-tab:before{content:"\e6eb"}.ti-layout-tab-window:before{content:"\e6ec"}.ti-layout-tab-v:before{content:"\e6ed"}.ti-layout-tab-min:before{content:"\e6ee"}.ti-layout-slider:before{content:"\e6ef"}.ti-layout-slider-alt:before{content:"\e6f0"}.ti-layout-sidebar-right:before{content:"\e6f1"}.ti-layout-sidebar-none:before{content:"\e6f2"}.ti-layout-sidebar-left:before{content:"\e6f3"}.ti-layout-placeholder:before{content:"\e6f4"}.ti-layout-menu:before{content:"\e6f5"}.ti-layout-menu-v:before{content:"\e6f6"}.ti-layout-menu-separated:before{content:"\e6f7"}.ti-layout-menu-full:before{content:"\e6f8"}.ti-layout-media-right-alt:before{content:"\e6f9"}.ti-layout-media-right:before{content:"\e6fa"}.ti-layout-media-overlay:before{content:"\e6fb"}.ti-layout-media-overlay-alt:before{content:"\e6fc"}.ti-layout-media-overlay-alt-2:before{content:"\e6fd"}.ti-layout-media-left-alt:before{content:"\e6fe"}.ti-layout-media-left:before{content:"\e6ff"}.ti-layout-media-center-alt:before{content:"\e700"}.ti-layout-media-center:before{content:"\e701"}.ti-layout-list-thumb:before{content:"\e702"}.ti-layout-list-thumb-alt:before{content:"\e703"}.ti-layout-list-post:before{content:"\e704"}.ti-layout-list-large-image:before{content:"\e705"}.ti-layout-line-solid:before{content:"\e706"}.ti-layout-grid4:before{content:"\e707"}.ti-layout-grid3:before{content:"\e708"}.ti-layout-grid2:before{content:"\e709"}.ti-layout-grid2-thumb:before{content:"\e70a"}.ti-layout-cta-right:before{content:"\e70b"}.ti-layout-cta-left:before{content:"\e70c"}.ti-layout-cta-center:before{content:"\e70d"}.ti-layout-cta-btn-right:before{content:"\e70e"}.ti-layout-cta-btn-left:before{content:"\e70f"}.ti-layout-column4:before{content:"\e710"}.ti-layout-column3:before{content:"\e711"}.ti-layout-column2:before{content:"\e712"}.ti-layout-accordion-separated:before{content:"\e713"}.ti-layout-accordion-merged:before{content:"\e714"}.ti-layout-accordion-list:before{content:"\e715"}.ti-ink-pen:before{content:"\e716"}.ti-info-alt:before{content:"\e717"}.ti-help-alt:before{content:"\e718"}.ti-headphone-alt:before{content:"\e719"}.ti-hand-point-up:before{content:"\e71a"}.ti-hand-point-right:before{content:"\e71b"}.ti-hand-point-left:before{content:"\e71c"}.ti-hand-point-down:before{content:"\e71d"}.ti-gallery:before{content:"\e71e"}.ti-face-smile:before{content:"\e71f"}.ti-face-sad:before{content:"\e720"}.ti-credit-card:before{content:"\e721"}.ti-control-skip-forward:before{content:"\e722"}.ti-control-skip-backward:before{content:"\e723"}.ti-control-record:before{content:"\e724"}.ti-control-eject:before{content:"\e725"}.ti-comments-smiley:before{content:"\e726"}.ti-brush-alt:before{content:"\e727"}.ti-youtube:before{content:"\e728"}.ti-vimeo:before{content:"\e729"}.ti-twitter:before{content:"\e72a"}.ti-time:before{content:"\e72b"}.ti-tumblr:before{content:"\e72c"}.ti-skype:before{content:"\e72d"}.ti-share:before{content:"\e72e"}.ti-share-alt:before{content:"\e72f"}.ti-rocket:before{content:"\e730"}.ti-pinterest:before{content:"\e731"}.ti-new-window:before{content:"\e732"}.ti-microsoft:before{content:"\e733"}.ti-list-ol:before{content:"\e734"}.ti-linkedin:before{content:"\e735"}.ti-layout-sidebar-2:before{content:"\e736"}.ti-layout-grid4-alt:before{content:"\e737"}.ti-layout-grid3-alt:before{content:"\e738"}.ti-layout-grid2-alt:before{content:"\e739"}.ti-layout-column4-alt:before{content:"\e73a"}.ti-layout-column3-alt:before{content:"\e73b"}.ti-layout-column2-alt:before{content:"\e73c"}.ti-instagram:before{content:"\e73d"}.ti-google:before{content:"\e73e"}.ti-github:before{content:"\e73f"}.ti-flickr:before{content:"\e740"}.ti-facebook:before{content:"\e741"}.ti-dropbox:before{content:"\e742"}.ti-dribbble:before{content:"\e743"}.ti-apple:before{content:"\e744"}.ti-android:before{content:"\e745"}.ti-save:before{content:"\e746"}.ti-save-alt:before{content:"\e747"}.ti-yahoo:before{content:"\e748"}.ti-wordpress:before{content:"\e749"}.ti-vimeo-alt:before{content:"\e74a"}.ti-twitter-alt:before{content:"\e74b"}.ti-tumblr-alt:before{content:"\e74c"}.ti-trello:before{content:"\e74d"}.ti-stack-overflow:before{content:"\e74e"}.ti-soundcloud:before{content:"\e74f"}.ti-sharethis:before{content:"\e750"}.ti-sharethis-alt:before{content:"\e751"}.ti-reddit:before{content:"\e752"}.ti-pinterest-alt:before{content:"\e753"}.ti-microsoft-alt:before{content:"\e754"}.ti-linux:before{content:"\e755"}.ti-jsfiddle:before{content:"\e756"}.ti-joomla:before{content:"\e757"}.ti-html5:before{content:"\e758"}.ti-flickr-alt:before{content:"\e759"}.ti-email:before{content:"\e75a"}.ti-drupal:before{content:"\e75b"}.ti-dropbox-alt:before{content:"\e75c"}.ti-css3:before{content:"\e75d"}.ti-rss:before{content:"\e75e"}.ti-rss-alt:before{content:"\e75f"} /* ************************************************************************************************ normalize.css ************************************************************************************************ */ img,legend{border:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body,figure{margin:0}a:focus{outline:dotted thin}a:active,a:hover{outline:0}h1{font-size:2em;margin:.67em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{white-space:pre-wrap}q{quotes:"\201C""\201D""\2018""\2019"}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}svg:not(:root){overflow:hidden}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0} @font-face { font-family: 'nowblack'; src: url('../font/now/now-black-webfont.eot'); src: url('../font/now/now-black-webfont.eot#iefix') format('embedded-opentype'), url('../font/now/now-black-webfont.woff') format('woff2'), url('../font/now/now-black-webfont.woff') format('woff'), url('../font/now/now-black-webfont.ttf') format('truetype'), url('../font/now/now-black-webfont.svg') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'nowbold'; src: url('../font/now/now-bold-webfont.eot'); src: url('../font/now/now-bold-webfont.eot#iefix') format('embedded-opentype'), url('../font/now/now-bold-webfont.woff') format('woff2'), url('../font/now/now-bold-webfont.woff') format('woff'), url('../font/now/now-bold-webfont.ttf') format('truetype'), url('../font/now/now-bold-webfont.svg') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'nowlight'; src: url('../font/now/now-light-webfont.eot'); src: url('../font/now/now-light-webfont.eot#iefix') format('embedded-opentype'), url('../font/now/now-light-webfont.woff') format('woff2'), url('../font/now/now-light-webfont.woff') format('woff'), url('../font/now/now-light-webfont.ttf') format('truetype'), url('../font/now/now-light-webfont.svg') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'nowmedium'; src: url('../font/now/now-medium-webfont.eot'); src: url('../font/now/now-medium-webfont.eot#iefix') format('embedded-opentype'), url('../font/now/now-medium-webfont.woff') format('woff2'), url('../font/now/now-medium-webfont.woff') format('woff'), url('../font/now/now-medium-webfont.ttf') format('truetype'), url('../font/now/now-medium-webfont.svg') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'nowregular'; src: url('../font/now/now-regular-webfont.eot'); src: url('../font/now/now-regular-webfont.eot#iefix') format('embedded-opentype'), url('../font/now/now-regular-webfont.woff') format('woff2'), url('../font/now/now-regular-webfont.woff') format('woff'), url('../font/now/now-regular-webfont.ttf') format('truetype'), url('../font/now/now-regular-webfont.svg') format('svg'); font-weight: normal; font-style: normal; } /*font-family: 'Inconsolata', monospace; 400,700 */ /*font-family: 'Oswald', sans-serif;*/ /*300,400,500,600*/ /* ************************************************************************************************ Base ************************************************************************************************ */ * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; /* remember: box-sizing is not supported by IE7 :( */ outline: none; vertical-align: top; } html { width: 100%; } html, body { font: normal 1em/2em 'Open Sans',"游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif; margin: 0; padding: 0; width: 100%; color: #111; background: #fefefe; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight:500; } blockquote,body,dd,div,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,input,li,ol,p,pre,td,textarea,th,ul{margin:0;padding:0;font-weight:500} p { margin: 0; padding: 0; font-weight: normal; } a { color: inherit; outline: none; text-decoration: none; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } a:focus { outline: none; } button { text-decoration:none; border:none;} /* ----- *::selection ----- */ *::-moz-selection {background: #111;color:#fefefe;} *::selection { background: #111; color: #fefefe; } /* ----- h1,h2,h3,h4,h5 ----- */ h1,h2,h3,h4,h5{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale} /* ----- .cf ----- */ /* For modern browsers */ .cf:before, .cf:after { content: ""; display: block; overflow: hidden; } .cf:after { clear: both; } /* For IE 6/7 (trigger hasLayout) */ .cf { zoom: 1; } /* ----- .transition03 ----- */ .transition03 { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .transition05 { -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } /* ----- img----- */ img { width: 100%; } /* ----- a ----- */ a { color: inherit; outline: none; text-decoration: none; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; -webkit-tap-highlight-color: rgba(0,0,0,0); } a:focus, *:focus { outline: none; text-decoration: none; } a:hover { text-decoration: none; outline: none; } /* ----- p ----- */ p { margin: 0; padding: 0; font-size: 14px; font-weight: 500; line-height: 2.2; letter-spacing: 1px; } p a { border-bottom: #111 1px dashed; } p a:hover { color: #fefefe; background:#111; border-bottom: #111 1px solid;} @media only screen and (max-width: 950px) { p { line-height: 2; } p a:hover { color: #111; background: none; border-bottom: #111 1px dashed;} } @media only screen and (max-width: 768px) { p { font-size: 13px; line-height: 2; } } @media only screen and (max-width: 736px) { p { font-size: 12px; line-height: 2; } } html {height: 100%;} body {height: 100%;margin: 0;} /* ************************************************************************************************ Page ************************************************************************************************ */ /* ----------------------------------------------------------- #page ----------------------------------------------------------- */ #page { height:100%; background:#fefefe; position:relative; z-index:0; } @media only screen and (max-width: 800px) { /*#page { padding-top: 50px; }*/ } /* ----------------------------------------------------------- #content ----------------------------------------------------------- */ #content { padding-top:125px; } @media only screen and (max-width: 800px) { #content { padding-top:50px; } } /* ----------------------------------------------------------- #header ----------------------------------------------------------- */ /* #header */ #header, #header:after{ -webkit-transition: all 0.7s ease; -moz-transition: all 0.7s ease; -o-transition: all 0.7s ease; transition: all 0.7s ease; } /* --- #header --- */ #header { height: 65px; position: fixed; top: 0; left:0; right:0; background: rgba(255,255,255,0.9); background:#fefefe; -moz-box-sizing: border-box; box-sizing: border-box; z-index: 1000; } #header:before { position: absolute; bottom: 0; left: 5%; right: 5%; display: block; height: 0; border-bottom: transparent 1px solid; border-bottom: #ddd 1px solid;content: ""; border-bottom: transparent 1px solid; } #header:before{ -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } #header.autofix_sb.fixed:before { border-bottom: #111 1px solid; left:0; right: 0;} @media only screen and (max-width: 950px) { #header { display: none; } } /* ======== #header .logoArea ======== */ #header .logoArea { position: absolute; top: 0; left: 50%; z-index: 3; margin-left:-65px; } #header .logoArea h1 { width: 130px; height: 65px; line-height: 0; font-size: 0; margin: 0; } #header .logoArea h1 a { width: 130px; height: 65px; display: block; position: relative; overflow: hidden;text-indent: -999px; z-index: 1003; font-size: 0;} #header .logoArea h1 a:before { position: absolute; top: 0; right: 0; left: 0; height: 64px; content: ""; background: url(../images/common/logo_name.svg) center center no-repeat ;background-size:72px 43px; display: block;-webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;} #header .logoArea h1 a:hover:before { top:-64px;opacity: 0;} #header .logoArea h1 a:after { position: absolute; bottom: -64px; right: 0; left: 0; height: 64px; content: ""; background: url(../images/common/logo_name_hover.svg) center center no-repeat ;background-size:72px 43px; background:url(../images/common/logo_smile.svg) center center no-repeat; background-size: 45px 45px; display: block;-webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; opacity: 0;} #header .logoArea h1 a:hover { } #header .logoArea h1 a:hover:after { bottom: 0; opacity: 1; } #header .logoArea h1 .bg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: block; content: ""; background: transparent; z-index: -1; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; -webkit-transform: scale(1, .9); -moz-transform: scale(1, .9); -o-transform: scale(1, .9); -ms-transform: scale(1, .9); transform: scale(1, .9); } /*#header .logoArea h1:hover .bg { background:#111; background: #fefefe; -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1);}*/ /* ======== #header .navArea ======== */ #header .navArea { position: absolute; bottom: 0;left: 5%; right:50%; display: block; z-index: 2; text-align:left; } #header .navArea ul.navi { font-size: 0; width: 100%; position: relative; } #header .navArea ul.navi li { display: inline-block; *display: inline;*zoom: 1; margin:0 20px 0 0; padding:0; width: auto; height: 65px } #header .navArea ul.navi li a { display: block; margin: 0; height: 65px; position: relative; z-index:2; font-size: 13px;font-family: 'nowregular'; font-weight:normal; line-height:65px;letter-spacing:1.5px;text-align: center;/*font-family: 'nowmedium';*/} /* span.en */ @media only screen and (max-width: 1024px) { #header .navArea ul.navi li { margin:0 18px 0 0; } } #header .navArea ul.navi a:hover { /*color:#ff878d; */ } #header .navArea ul.navi a:before { position: absolute; bottom: 0px; left: 100%; right: 0; height: 4px; display: block; content: ""; background: transparent; z-index:-1; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } #header .navArea ul.navi a:after { position: absolute; bottom: 0px; left: 0; right: 100%; height: 4px; display: block; content: ""; background: transparent; z-index:-1; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } /* focus */ #header .navArea ul.navi li:hover a { /* color:#ff878d; */ } #header .navArea ul.navi li:hover a:before { left: 0px; right: 0px; background: #111 } #header .navArea ul.navi li:hover a:after { left: 0px; right: 0px; background: #111; } #header .navAreaSns {position: absolute; top:0; right:5%; z-index: 3; text-align: right; } #header .navAreaSns ul { list-style:none; font-size:0; text-align:right; margin:18px 280px 0 0; } #header .navAreaSns ul li { display:inline-block; margin:0; } #header .navAreaSns ul li a { display:block; width:30px; height:30px; line-height:30px; position:relative; text-align:center; } #header .navAreaSns ul li a:before { position:absolute; top:0; right:0; bottom:0; left:0; font-weight:normal; } #header .navAreaSns ul li a.facebook:before { font-family:themify; content:"\e741"; font-size:13px; } #header .navAreaSns ul li a.instagram:before { font-family:themify; content:"\e73d"; font-size:13px; } #header .navAreaSns ul li a:after { position:absolute; top:-3px; right:-3px; bottom:-3px; left:-3px; content:""; border:transparent 1px solid; z-index:-1; border-radius:100%;-webkit-border-radius:100%;-moz-border-radius:100%; -webkit-transition:all 0.3s ease;-moz-transition:all 0.3s ease;-o-transition:all 0.3s ease;transition:all 0.3s ease; } #header .navAreaSns ul li a:hover:after { top:0; right:0; bottom:0; left:0; border:#111 1px solid; } #header .contactArea { position: absolute; top: 12.5px; right: 5%; z-index: 4; text-align:center; } #header .contactArea ul { list-style:none; margin:0 50px 0 0; } #header .contactArea ul li { display:block; } #header .contactArea ul li a { display:block; font-size:11px; font-weight:500; width:220px ;height:40px; line-height:37px; border:#111 2px solid;position:relative; padding-left:15px; } #header .contactArea ul li a:hover { color: #fefefe; background: #111;} /*#header .contactArea ul li a:after{ position:absolute; top:0; right:0; bottom:0; left:0; content:"";border:#111 2px solid; }*/ #header .contactArea ul li a:before { position:absolute; top:0; bottom:0; left:10px; font-family:themify; content:"\e75a"; font-size:14px; font-weight:normal; } #header .contactArea ul li a:after { position: absolute; bottom: -5px; left: 0; right: 100%; content: ""; border-bottom:#111 1px solid; z-index: -1;-webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease;} #header .contactArea ul li a:hover:after { border-color: #111;right:0;} /* ======== #header .logoArea ======== */ #header .scheduleArea { position: absolute; top: 12.5px; right: 5%; z-index: 5; text-align:center; } #header .scheduleArea ul { list-style:none; font-size:0; text-align:right; } #header .scheduleArea ul li { display:block; margin:0; } #header .scheduleArea ul li a { display:block; width:40px; height:40px; text-align:center; position:relative; z-index: 1; border: #111 1px solid; } #header .scheduleArea ul li a:before { position:absolute; top:1px; right:2px; left:2px; height: 0; content:""; border-top:#111 1px solid; z-index: 0; } #header .scheduleArea ul li a .day { position: absolute; top: 14px; right: 0; left: 0; font-size: 11px;font-family: 'nowlight'; font-weight: normal;letter-spacing:0.5px; line-height:0; } #header .scheduleArea ul li a .month { position: absolute; bottom: 12px; right: 0; left: 0; font-size: 9px; font-family: 'nowmedium'; font-weight:normal; letter-spacing:1px; line-height:0; text-transform:uppercase; } #header .scheduleArea ul li a:after { position: absolute; bottom: -4px; left: 0; right: 100%; content: ""; border-bottom:transparent 1px solid; z-index: -1;-webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease;} #header .scheduleArea ul li a:hover:after { border-color: #111;right:0;} /* ----------------------------------------------------------- #headerSp ----------------------------------------------------------- */ /* ========================================================================== #headerSp ========================================================================== */ #headerSp { display: none; } #headerSp { position: fixed; top:0; left:0; right:0; height:70px; background:#fefefe; /*background: rgba(254,254,254,0.9);*/ z-index:1000; -moz-box-sizing: border-box; box-sizing: border-box;} #headerSp:after { position: absolute; bottom: -1px; left: 5%; right:5%; display: block; height: 1px; background:transparent; content: ""; z-index:2;-webkit-transition: all 0.6s ease; -moz-transition: all 0.6s ease; -o-transition: all 0.6s ease; transition: all 0.6s ease;} #headerSp.autofix_sb.fixed:after { left: 0; right:0; background:#111;} @media only screen and (max-width: 950px) { #headerSp { display: block; } } @media only screen and (max-width: 738px) { #headerSp { height:50px;} } /* ------------------------ .logoArea ------------------------ */ #headerSp .logoArea { position: absolute; top: 0; left: 50%; z-index: 3; margin-left:-43px; } #headerSp .logoArea h1 { width: 86px; height: 70px; line-height: 0; font-size: 0; margin: 0; } #headerSp .logoArea h1 a { width: 86px; height: 70px; background: url(../images/common/logo_name.svg) center center no-repeat; background-size:86px 50px; display: block; position: relative; z-index: 1003; font-size: 0;} @media only screen and (max-width: 738px) { #headerSp .logoArea h1 { height: 50px; } #headerSp .logoArea h1 a { height: 50px; background-size:60px 35px; } } #headerSp .logoSmallArea { position: absolute; top: 0; left: 0; z-index: 3; } #headerSp .logoSmallArea h1 { width: 70px; height: 70px; line-height: 0; font-size: 0; margin: 0; } #headerSp .logoSmallArea h1 a { width: 70px; height: 70px; background: url(../images/common/logo_smile.svg) center center no-repeat ; background-size:45px 45px; display: block; position: relative; z-index: 1003; font-size: 0;} @media only screen and (max-width: 738px) { #headerSp .logoSmallArea h1 { width: 50px; height: 50px; } #headerSp .logoSmallArea h1 a { width: 50px; height: 50px;background-size:32px 32px; } } /* ======== #headerSp a.btnMenu ======== */ #headerSp a.btnMenu { position: absolute; top:0; right: 0; display: block; width:70px; height:70px; /*color: #fefefe; background: #111;*/ z-index:100; } /* span.lineTop, span.lineBottom */ #headerSp a.btnMenu span.hamburger { position: absolute; top:40px; width: 26px; right:22px; height:0; border-top: #111 1px solid; z-index: 1;} #headerSp a.btnMenu span.hamburger:before { position: absolute; top: -8px; left: 0; right: 0; height: 0; content: "";border-top: #111 1px solid; z-index: 0;} #headerSp a.btnMenu span.hamburger:after { position: absolute; bottom: -7px; left: 0; right: 0; height: 0; content: "";border-top: #111 1px solid; z-index: 0;} /* span.menu */ #headerSp a.btnMenu span.menuTxt { position: absolute; z-index: -1; top: 23px; right: 23px; width: 26px; text-align: center; line-height: 0; font-size: 8px; letter-spacing: 1.75px; } @media only screen and (max-width: 738px) { #headerSp a.btnMenu { width:50px; height:50px; } #headerSp a.btnMenu span.hamburger { top:30px; width: 24px; right:12px; } #headerSp a.btnMenu span.hamburger:before { top: -7px; } #headerSp a.btnMenu span.hamburger:after { bottom: -6px;} #headerSp a.btnMenu span.menuTxt { z-index: -1; top: 15px; right: 11.5px; width: 26px;letter-spacing: 1px;} } /* ======== #menu .btnClose ======== */ #menu .btnClose { position: absolute; top:0; right:0; width:70px; height:70px; overflow: hidden; text-indent:-999px; z-index:100;} #menu .btnClose:before { position: absolute; top:0; right:0; left:0; bottom:0; font-family:'themify'; content:"\e646"; font-size:15px; line-height:70px; text-align: center; text-indent:0; z-index:1; } #menu .btnClose:after { position:absolute; top:10px; right:10px; bottom:10px; left:10px; content:""; border: #111 1px solid; z-index:-1; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%;} @media only screen and (max-width: 736px) { #menu .btnClose { width:50px; height:50px; } #menu .btnClose:before { font-size:14px; line-height:50px; } #menu .btnClose:after { top:7px; right:7px; bottom:7px; left:7px;} } /* ----------------------------------------------------------- jQuery.mmenu CSS ----------------------------------------------------------- */ #menu:not( .mm-menu ) { display: none; } /* jQuery.mmenu oncanvas CSS */ .mm-hidden { display: none !important; } .mm-wrapper { overflow-x: hidden; position: relative; } .mm-menu { margin: 0; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 0; } /*.mm-menu,*/ .mm-panels, .mm-panels > .mm-panel { margin: 0; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 0; } .mm-panels > .mm-panel { margin-top: 70px; border-top:#eee 1px solid; } @media only screen and (max-width: 738px) { .mm-panels > .mm-panel { margin-top: 50px; } } .mm-menu { box-sizing: border-box; background: inherit; display: block; overflow: hidden; padding: 0; } .mm-panel { -webkit-transition: -webkit-transform 0.4s ease; -moz-transition: -moz-transform 0.4s ease; -ms-transition: -ms-transform 0.4s ease; -o-transition: -o-transform 0.4s ease; transition: transform 0.4s ease; -webkit-transform: translate3d(100%, 0, 0); -moz-transform: translate3d(100%, 0, 0); -ms-transform: translate3d(100%, 0, 0); -o-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } .mm-panel.mm-opened { -webkit-transform: translate3d(0%, 0, 0); -moz-transform: translate3d(0%, 0, 0); -ms-transform: translate3d(0%, 0, 0); -o-transform: translate3d(0%, 0, 0); transform: translate3d(0%, 0, 0); } .mm-panel.mm-subopened { -webkit-transform: translate3d(-30%, 0, 0); -moz-transform: translate3d(-30%, 0, 0); -ms-transform: translate3d(-30%, 0, 0); -o-transform: translate3d(-30%, 0, 0); transform: translate3d(-30%, 0, 0); } .mm-panel.mm-highest { z-index: 1; } .mm-panels, .mm-panels > .mm-panel { background: inherit; border-color: inherit; } .mm-panels > .mm-panel { background: inherit; border-color: inherit; background:#fefefe; -webkit-overflow-scrolling: touch; overflow: scroll; overflow-x: hidden; overflow-y: auto; box-sizing: border-box; padding: 0 20px; } .mm-panels > .mm-panel.mm-hasnavbar { padding-top: 60px; } @media only screen and (max-width: 738px) { .mm-panels > .mm-panel.mm-hasnavbar { padding-top: 40px; } } .mm-panels > .mm-panel:before, .mm-panels > .mm-panel:after { content: ''; display: block; height: 0px; } .mm-vertical .mm-panel { -webkit-transform: none !important; -moz-transform: none !important; -ms-transform: none !important; -o-transform: none !important; transform: none !important; } .mm-vertical .mm-listview .mm-panel, .mm-listview .mm-vertical .mm-panel { display: none; padding: 10px 0 10px 10px; } .mm-vertical .mm-listview .mm-panel .mm-listview > li:last-child:after, .mm-listview .mm-vertical .mm-panel .mm-listview > li:last-child:after { border-color: transparent; } .mm-vertical li.mm-opened > .mm-panel, li.mm-vertical.mm-opened > .mm-panel { display: block; } /* .mm-listview ul */ .mm-listview ul { /*font-size: 0;*/ background:#fefefe; } .mm-listview, .mm-listview > li { list-style: none; display: block; padding: 0; margin: 0; } .mm-listview { font: inherit; font-size: 11px; line-height: 20px; letter-spacing: 1px; } .mm-listview a, .mm-listview a:hover { text-decoration: none; } .mm-listview > li { position: relative; background:#fefefe;} .mm-listview > li, .mm-listview > li:after, .mm-listview > li .mm-next, .mm-listview > li .mm-next:before { border-color: inherit; border-color: #eee; } .mm-listview > li.border_bottom_no .mm-next:before { border-color: transparent; } /* a */ .mm-listview > li > a, .mm-listview > li > span.block { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; color: inherit; display: block; padding: 0 10px 0 30px; margin: 0; font-size: 14px; line-height:60px;letter-spacing:1.5px; position:relative; z-index:2; } .mm-listview > li > a { font-weight:500; } .mm-listview > li > span.block { font-size: 13px; font-family: 'nowmedium'; font-weight:normal; letter-spacing: 2px; } @media only screen and (max-width: 738px) { .mm-listview > li > a, .mm-listview > li > span.block {font-size: 12px; line-height:50px; } } .mm-listview > li > a.calendar, .mm-listview > li > a.contact, .mm-listview > li > a.notice{padding-left:65px; font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif; font-weight: 500; } .mm-listview > li > a.calendar .mark { position: absolute; top: 16px; left: 30px; display:block; width:25px; height:28px; text-align:center; z-index: 1; border: #111 1px solid;} .mm-listview > li > a.calendar .mark:before { position:absolute; top:1px; right:2px; left:2px; height: 0; content:""; border-top:#111 1px solid; z-index: 0; } .mm-listview > li > a.calendar .mark .day { position: absolute; top: 9px; right: 0; left: 0; font-size: 8px; font-family: 'nowlight'; font-weight: normal; letter-spacing:0.5px; line-height:0; } .mm-listview > li > a.calendar .mark .month { position: absolute; bottom: 7px; right: 0; left: 0; font-size: 7px; font-family: 'nowmedium'; font-weight:normal; letter-spacing:0.5px; line-height:0; text-transform:uppercase; } .mm-listview > li > a.contact:before { position: absolute; top: 0; left: 30px; width: 27px; text-align: center;content: ""; font-size: 18px; font-family: 'themify'; content:"\e75a"; font-weight: normal; z-index:-1;} .mm-listview > li > a.notice:before{ position: absolute; top: 0; left: 30px; width: 27px; text-align: center;content: ""; font-size: 20px; font-family: 'themify'; content:"\e6c5"; font-weight: normal; z-index:-1;} @media only screen and (max-width: 736px) { .mm-listview > li > a.calendar .mark { top: 11px; } } .mm-listview > li > a:after { color: #555; position:absolute; top:0; right:15px; content:""; font-size:10px; font-family: 'themify'; content:"\e649"; z-index:-1;} /* span.block */ /*.mm-listview > li > span.block { font-size: 13px; font-family: "futura-pt", sans-serif; font-weight: 500; letter-spacing:2px; } */ .mm-listview > li:not(.mm-divider):after { content: ''; border-bottom-width: 1px; border-bottom-style: solid; display: block; position: absolute; left: 0; right: 0; bottom: 0; } .mm-listview > li:not(.mm-divider):after { left: 20px; left:0; } /* .bgGray */ .mm-listview .borderGr { /*background:#fefff5;*/ border-top:#ededed 2px solid;} /* .mm-next */ .mm-listview .mm-next { background: rgba(3, 2, 1, 0); width: 50px; padding: 0; position: absolute; right: 0; top: 0; bottom: 0; z-index: 2; } .mm-listview .mm-next:before { content: ''; border-left-width: 1px; border-left-style: solid; display: block; position: absolute; top: 0; bottom: 0; left: 0; } .mm-listview .mm-next + a, .mm-listview .mm-next + span { margin-right: 50px; } .mm-listview .mm-next.mm-fullsubopen { width: 100%; } .mm-listview .mm-next.mm-fullsubopen:before { border-left: none; } .mm-listview .mm-next.mm-fullsubopen + a, .mm-listview .mm-next.mm-fullsubopen + span { padding-right: 50px; margin-right: 0; } .mm-panels > .mm-panel > .mm-listview { margin: 20px -20px 0; } .mm-panels > .mm-panel > .mm-listview:first-child, .mm-panels > .mm-panel > .mm-navbar + .mm-listview { margin-top: 0px; } /* .mm-inset */ .mm-listview .mm-inset { list-style: none; padding: 0; margin: 0; } .mm-listview .mm-inset > li { padding: 0; position:relative; z-index:1; } .mm-listview .mm-inset > li:after{ position:absolute; top:0; right:0; left:0; height:0; content:""; border-top:#eee 1px dashed; z-index:-1; } .mm-listview .mm-inset > li > a { display:block; padding: 0 20px 0 30px; font-size:14px; font-weight: 500;line-height:60px; letter-spacing:1.5px; position:relative; } .mm-listview .mm-inset > li > a:after { color: #555; position:absolute; top:0; right:15px; font-size:10px; font-family: 'themify'; content:"\e649"; z-index:-1;} @media only screen and (max-width: 736px) { .mm-listview .mm-inset > li > a { padding: 0 20px 0 30px; font-size:13px; line-height:50px;} } .mm-listview li.border_top_black { border-top: #eee 2px solid;} /* li.facebookIcon, li.instagramIcon, li.blogIcon */ .mm-listview .mm-inset > li.facebookIcon > a, .mm-listview .mm-inset > li.instagramIcon > a, .mm-listview .mm-inset > li.graphikaIcon > a { border-top:#eee 1px dashed; font-size:13px; font-family: 'nowregular'; font-weight: normal; padding-left:65px; } .mm-listview .mm-inset > li.instagramIcon > a, .mm-listview .mm-inset > li.graphikaIcon > a { border-bottom: #eee 1px solid;} .mm-listview .mm-inset > li.facebookIcon > a:before, .mm-listview .mm-inset > li.instagramIcon > a:before, .mm-listview .mm-inset > li.graphikaIcon > a:before { position: absolute; top:0; left: 33px; border-top:none; font-size: 14px; font-family:themify; font-weight: normal; text-align:center; } .mm-listview .mm-inset > li.facebookIcon > a:before { content:"\e741"; } .mm-listview .mm-inset > li.instagramIcon > a:before { content:"\e73d" } .mm-listview .mm-inset > li.graphikaIcon > a:before { content:""; width:20px; height:60px; background:url(../images/common/logo_heart.svg) center center no-repeat; background-size:15px 14px; left: 31px;} @media only screen and (max-width: 736px) { .mm-listview .mm-inset > li.facebookIcon > a, .mm-listview .mm-inset > li.instagramIcon > a, .mm-listview .mm-inset > li.graphikaIcon > a { font-size:12px; } .mm-listview .mm-inset > li.graphikaIcon > a:before { height:50px;} } .mm-listview .mm-inset > li.facebookIcon > a:after, .mm-listview .mm-inset > li.instagramIcon > a:after, .mm-listview .mm-inset > li.graphikaIcon > a:after{ display:none; } .mm-listview .mm-divider { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; font-size: 10px; text-transform: uppercase; text-indent: 20px; line-height: 25px; } .mm-listview .mm-spacer { padding-top: 40px; } .mm-listview .mm-spacer > .mm-next { top: 40px; } .mm-listview .mm-spacer.mm-divider { padding-top: 25px; } .mm-prev:before, .mm-next:after, .mm-arrow:after { content: ''; border: 1px solid transparent; display: inline-block; width: 7px; height: 7px; margin: auto; position: absolute; top: 0; bottom: 0; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } .mm-prev:before { border-right: none; border-bottom: none; left: 23px; } .mm-next:after, .mm-arrow:after { border-top: none; border-left: none; right: 23px; } /* .mm-menu */ .mm-menu { background: #fefefe; border-color: #eee; color: #111; border-left: #111 1px solid; -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);} .mm-menu .mm-navbar > *, .mm-menu .mm-navbar a { color: rgba(0, 0, 0, 0.3); color: #b09d7c; font-size: 13px; letter-spacing: 2px; } .mm-menu .mm-navbar .mm-btn:before, .mm-menu .mm-navbar .mm-btn:after { border-color: rgba(0, 0, 0, 0.3); } .mm-menu .mm-listview { border-color: rgba(0, 0, 0, 0.1); } .mm-menu .mm-listview > li .mm-next:after, .mm-menu .mm-listview > li .mm-arrow:after { border-color: rgba(0, 0, 0, 0.3); } .mm-menu .mm-listview > li a:not(.mm-next) { -webkit-tap-highlight-color: rgba(255, 255, 255, 0.5); tap-highlight-color: rgba(255, 255, 255, 0.5); } .mm-menu .mm-listview > li.mm-selected > a:not(.mm-next), .mm-menu .mm-listview > li.mm-selected > span { background: rgba(255, 255, 255, 0.5); } .mm-menu.mm-vertical .mm-listview > li.mm-opened > a.mm-next, .mm-menu.mm-vertical .mm-listview > li.mm-opened > .mm-panel, .mm-menu .mm-listview > li.mm-opened.mm-vertical > a.mm-next, .mm-menu .mm-listview > li.mm-opened.mm-vertical > .mm-panel { background: rgba(0, 0, 0, 0.05); } .mm-menu .mm-divider { background: rgba(0, 0, 0, 0.05); } /* jQuery.mmenu offcanvas addon CSS */ .mm-page { box-sizing: border-box; position: relative; } .mm-slideout { -webkit-transition: -webkit-transform 0.4s ease; -ms-transition: -ms-transform 0.4s ease; transition: transform 0.4s ease; } html.mm-opened { overflow-x: hidden; position: relative; } html.mm-blocking { overflow: hidden; } html.mm-blocking body { overflow: hidden; } html.mm-background .mm-page { background: inherit; } #mm-blocker { background: rgba(3, 2, 1, 0); display: none; width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 999999; } html.mm-blocking #mm-blocker { display: block; } .mm-menu.mm-offcanvas { display: none; position: fixed; } .mm-menu.mm-current { display: block; } .mm-menu { width: 80%; min-width: 140px; max-width: 440px; } html.mm-opening .mm-slideout { -webkit-transform: translate(80%, 0); -moz-transform: translate(80%, 0); -ms-transform: translate(80%, 0); -o-transform: translate(80%, 0); transform: translate(80%, 0); } @media all and (max-width: 175px) { html.mm-opening .mm-slideout { -webkit-transform: translate(140px, 0); -moz-transform: translate(140px, 0); -ms-transform: translate(140px, 0); -o-transform: translate(140px, 0); transform: translate(140px, 0); } } @media all and (min-width: 550px) { html.mm-opening .mm-slideout { -webkit-transform: translate(440px, 0); -moz-transform: translate(440px, 0); -ms-transform: translate(440px, 0); -o-transform: translate(440px, 0); transform: translate(440px, 0); } } /* jQuery.mmenu autoHeight addon CSS */ .mm-menu.mm-autoheight { max-height: 80%; } .mm-menu.mm-autoheight.mm-fullscreen { max-height: 100%; } .mm-menu.mm-measureheight > .mm-panels > .mm-panel { bottom: auto !important; height: auto !important; } /* jQuery.mmenu counters addon CSS */ em.mm-counter { font: inherit; font-size: 14px; font-style: normal; text-indent: 0; line-height: 20px; display: block; margin-top: -10px; position: absolute; right: 45px; top: 50%; } em.mm-counter { font-size: 12px; letter-spacing: 0; } em.mm-counter + a.mm-next { width: 90px; } em.mm-counter + a.mm-next + a, em.mm-counter + a.mm-next + span { margin-right: 90px; } em.mm-counter + a.mm-fullsubopen { padding-left: 0; } .mm-vertical > .mm-counter { top: 12px; margin-top: 0; } .mm-vertical.mm-spacer > .mm-counter { margin-top: 40px; } .mm-nosubresults > .mm-counter { display: none; } .mm-menu em.mm-counter { color: rgba(0, 0, 0, 0.3); color: #111; } /* jQuery.mmenu dividers addon CSS */ .mm-divider > span { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; padding: 0; line-height: 25px; } .mm-divider.mm-opened a.mm-next:after { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } .mm-collapsed:not(.mm-uncollapsed) { display: none; } .mm-fixeddivider { background: inherit; display: none; position: absolute; top: 0; left: 0; right: 0; z-index: 2; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .mm-fixeddivider:after { content: none !important; display: none !important; } .mm-hasdividers .mm-fixeddivider { display: block; } .mm-menu .mm-fixeddivider span { background: rgba(0, 0, 0, 0.05); } /* jQuery.mmenu dragOpen addon CSS */ html.mm-opened.mm-dragging .mm-menu, html.mm-opened.mm-dragging .mm-slideout { -webkit-transition-duration: 0s; -moz-transition-duration: 0s; -ms-transition-duration: 0s; -o-transition-duration: 0s; transition-duration: 0s; } /* jQuery.mmenu borderstyle extension CSS */ .mm-menu.mm-border-none .mm-listview > li:after, .mm-listview.mm-border-none > li:after { content: none; } .mm-menu.mm-border-full .mm-listview > li:after, .mm-listview.mm-border-full > li:after { left: 0 !important; } .mm-menu.mm-border-offset .mm-listview > li:after, .mm-listview.mm-border-offset > li:after { right: 20px; } /* jQuery.mmenu multiline extension CSS */ .mm-menu.mm-multiline .mm-listview > li > a, .mm-menu.mm-multiline .mm-listview > li > span, .mm-listview.mm-multiline > li .mm-listview > li.mm-multiline > a, .mm-listview.mm-multiline > li .mm-listview > li.mm-multiline > span { text-overflow: clip; white-space: normal; } /* jQuery.mmenu pagedim extension CSS */ html.mm-pagedim #mm-blocker, html.mm-pagedim-white #mm-blocker, html.mm-pagedim-black #mm-blocker { opacity: 0; } html.mm-pagedim.mm-opening #mm-blocker, html.mm-pagedim-white.mm-opening #mm-blocker, html.mm-pagedim-black.mm-opening #mm-blocker { opacity: 0.1; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;} html.mm-pagedim #mm-blocker { background: inherit; } html.mm-pagedim-white #mm-blocker { background: #fff; } html.mm-pagedim-black #mm-blocker { background: #000; } /* jQuery.mmenu position extension CSS */ .mm-menu.mm-top, .mm-menu.mm-bottom { width: 100%; min-width: 100%; max-width: 100%; } .mm-menu.mm-right { left: auto; right: 0; } .mm-menu.mm-bottom { top: auto; bottom: 0; } html.mm-right.mm-opening .mm-slideout { -webkit-transform: translate(-80%, 0); -moz-transform: translate(-80%, 0); -ms-transform: translate(-80%, 0); -o-transform: translate(-80%, 0); transform: translate(-80%, 0); } @media all and (max-width: 175px) { html.mm-right.mm-opening .mm-slideout { -webkit-transform: translate(-140px, 0); -moz-transform: translate(-140px, 0); -ms-transform: translate(-140px, 0); -o-transform: translate(-140px, 0); transform: translate(-140px, 0); } } @media all and (min-width: 550px) { html.mm-right.mm-opening .mm-slideout { -webkit-transform: translate(-440px, 0); -moz-transform: translate(-440px, 0); -ms-transform: translate(-440px, 0); -o-transform: translate(-440px, 0); transform: translate(-440px, 0); } } /* jQuery.mmenu z-position extension CSS */ html.mm-front .mm-slideout { -webkit-transform: none !important; -moz-transform: none !important; -ms-transform: none !important; -o-transform: none !important; transform: none !important; z-index: 0 !important; } .mm-menu.mm-front { z-index: 1; } .mm-menu.mm-front, .mm-menu.mm-next { -webkit-transition: -webkit-transform 0.4s ease; -ms-transition: -ms-transform 0.4s ease; transition: transform 0.4s ease; -webkit-transform: translate3d(-100%, 0, 0); -moz-transform: translate3d(-100%, 0, 0); -ms-transform: translate3d(-100%, 0, 0); -o-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } .mm-menu.mm-front.mm-right, .mm-menu.mm-next.mm-right { -webkit-transform: translate3d(100%, 0, 0); -moz-transform: translate3d(100%, 0, 0); -ms-transform: translate3d(100%, 0, 0); -o-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } html.mm-opening .mm-menu.mm-front, html.mm-opening .mm-menu.mm-next { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } /* ----------------------------------------------------------- #footer ----------------------------------------------------------- */ footer { border-top:#111 3px solid; position:relative; z-index:1; } /* --- .inner --- */ footer .inner { padding:90px 0 0; margin:0 5%; } @media only screen and (max-width: 950px) { footer .inner { padding:80px 0 0; margin:0 5%; } } @media only screen and (max-width: 736px) { footer .inner { padding:70px 0 0;} } /* --- .logoArea --- */ footer .logoArea { float:left; width:25%; } footer .logoArea h1.logo {width:150px; height:59px; font-size:0; background:url(../images/common/logo_smile_name.svg) center left no-repeat; background-size:150px 59px;} @media only screen and (max-width: 950px) { footer .logoArea { float:left; width:20%; } footer .logoArea h1.logo {width:120px; height:47px; background-size:120px 47px;} } @media only screen and (max-width: 800px) { footer .logoArea { float:none; width:100%; } footer .logoArea h1.logo {width:100%; height:79px; background:url(../images/common/logo_smile_name.svg) center center no-repeat;background-size:200px 79px;} } @media only screen and (max-width: 736px) { footer .logoArea h1.logo {height:59px; background-size:150px 59px;} } /* --- .infoArea --- */ footer .infoArea { float:left; width:37.5%; position:relative; z-index:1;} footer .infoArea h2 { font-size:13px; font-weight:bold; letter-spacing:1px; line-height:1.8; margin-bottom:10px;} footer .infoArea h2 b { display:block; font-size:25px; font-weight:600; } footer .infoArea h2 span { font-size:13px; vertical-align:0; } /* .corporate */ dl.corporate { font-size:13px; line-height:2; letter-spacing:1px;} dl.corporate dt { clear: left; float: left; margin: 5px 0 0; width: 4.5em; } /*dl.corporate dt:first-child { margin-top:0; }*/ dl.corporate dd { margin: 5px 0 0 5.5em; } dl.corporate dd a { border-bottom: #111 1px dashed; } dl.corporate dd a:hover { color: #fefefe; background: #111; border-bottom: #111 1px solid;} dl.corporate dd a.google { padding:0 0 0 18px;line-height:25px; text-align:center; font-size:12px; position:relative; z-index:1; } dl.corporate dd a.google:before { font-family: 'themify'; content: "\e693"; font-size: 13px; font-style: normal; font-weight: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: absolute; top: 0; left: 0; line-height:20px;z-index: 1; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } dl.corporate dd br.spBlock { display:none; } @media only screen and (max-width: 950px) { footer .infoArea { width:37.5%;} footer .infoArea h2 { font-size:12px; margin-bottom:5px;} footer .infoArea h2 b { font-size:20px; } footer .infoArea h2 span { font-size:12px; } dl.corporate { font-size:12px; line-height:1.9;} dl.corporate dd a:hover { color: #111; background: none;border-bottom: #111 1px solid; } } @media only screen and (max-width: 800px) { footer .infoArea { margin-top: 25px; float: none; width: 100%; text-align: center;} footer .infoArea h2 { font-size:13px;ine-height:1.8; margin-bottom:10px;} footer .infoArea h2 b { font-size:25px; font-weight:600; } footer .infoArea h2 span { font-size:13px; } dl.corporate { display: inline-block; text-align: left;font-size:13px; line-height:2; } } @media only screen and (max-width: 736px) { footer .infoArea h2 { font-size:12px;margin-bottom:10px;} footer .infoArea h2 b { font-size:20px; font-weight:600; } footer .infoArea h2 span { font-size:12px; } dl.corporate { font-size:12px; line-height:2; } dl.corporate dd br.spBlock { display:block; } } /* --- .contactArea --- */ footer .contactArea { float:right; width:35%; } footer .contactArea ul { list-style: none; margin-top: -10px;} footer .contactArea ul li { display: block; margin-top: 10px; text-align: center;} footer .contactArea ul li a { display: block; width: 100%; color:#fefefe; background:#111; border:#111 2px solid; font-size: 14px; text-decoration: none; text-align:center; font-weight:500; line-height: 65px; letter-spacing: 1px; position: relative; z-index: 1; -webkit-border-radius:1px; -moz-border-radius:1px; border-radius:1px; } footer .contactArea ul li a.calendar { color: #111; background: #fefefe;} footer .contactArea ul li a.calendar .mark { position: absolute; top: 17px; left: 15px; display:block; width:30px; height:30px; text-align:center; z-index: 1; border: #111 1px solid;} footer .contactArea ul li a.calendar .mark:before { position:absolute; top:1px; right:2px; left:2px; height: 0; content:""; border-top:#111 1px solid; z-index: 0; } footer .contactArea ul li a.calendar .mark .day { position: absolute; top: 10px; right: 0; left: 0; font-size: 8px;font-family: 'nowlight'; font-weight: normal; letter-spacing:0.5px; line-height:0; } footer .contactArea ul li a.calendar .mark .month { position: absolute; bottom: 9px; right: 0; left: 0; font-size: 7px; font-family: 'nowmedium'; font-weight:normal; letter-spacing:1px; line-height:0; text-transform:uppercase; } footer .contactArea ul li a.mail:before {font-family: 'themify'; content:"\e75a"; font-size: 25px; font-style: normal; font-weight: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: absolute; top: 0; left: 15px; z-index: 1;} footer .contactArea ul li a:after { position: absolute; bottom: -4px; left: 0; right: 100%; content: ""; border-bottom:#111 1px solid; z-index: -1;-webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease;} footer .contactArea ul li a:hover:after { border-color: #111;right:0;} footer .contactArea ul li a .arrow { position: absolute; top: 0; right: 15px; z-index: 2; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } footer .contactArea ul li a .arrow:after { position: absolute; top: 0; right: 0; z-index: 2;font-family: 'themify'; content: "\e649"; font-size: 16px; font-style: normal; font-weight: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;} footer .contactArea ul li a:hover .arrow { right: 10px; } @media only screen and (max-width: 950px) { footer .contactArea { float:right; width:35%; } footer .contactArea ul li a { font-size: 14px; line-height: 60px; } footer .contactArea ul li a.calendar .mark { top: 15px; } footer .contactArea ul li a.mail:before {font-size: 20px;left: 19px; } footer .contactArea ul li a:after { display: none;} footer .contactArea ul li a:hover .arrow { right: 15px; } } @media only screen and (max-width: 800px) { footer .contactArea { margin-top: 40px; float:none; width:100%; } footer .contactArea ul { margin: 0 -2%; font-size: 0;} footer .contactArea ul li { display: inline-block; margin:0 2%; width: 46%;} } @media only screen and (max-width: 736px) { footer .contactArea ul li a { font-size: 13px; line-height: 50px; } footer .contactArea ul li a.calendar .mark { top: 10px; left: 10px; width:30px; height:30px; } footer .contactArea ul li a.mail:before {left: 15px; } footer .contactArea ul li a .arrow:after { font-size: 12px; } } @media only screen and (max-width: 667px) { footer .contactArea ul { list-style: none; margin: -10px 0 0;} footer .contactArea ul li { display: block; width: 100%; margin: 10px 0 0; } } /* --- .inner2 --- */ footer .inner2 { padding:70px 0 0; margin:0 5%; } @media only screen and (max-width: 950px) { footer .inner2 { padding:60px 0 0; margin:0 5%; } } @media only screen and (max-width: 736px) { footer .inner2 { display: none; padding:20px 0 0;margin:50px 5% 0; border-top: #111 2px solid;} } /* --- .navArea --- */ footer .navArea { font-size:0; } /* .navBox */ footer .navBox { display:inline-block; margin:0; width:25%; position: relative; z-index:0; } footer .navBox:after { position:absolute; top:0; right:0; bottom:0; width:0; content:""; border-right:#111 1px dotted; z-index:0; } footer .navBox:first-child:before { position:absolute; top:0; left:0; bottom:0; width:0; content:""; border-left:#111 1px dotted; z-index:0;} /* ul */ footer .navBox ul { padding:0 10%; } footer .navBox ul li { display:block; margin:0; padding:0; font-size:12px; letter-spacing:1px; } footer .navBox ul li a { display:inline-block; position:relative; z-index:1;line-height:30px; padding-left:25px; } footer .navBox ul li a:before { position:absolute; top:0; left:0; bottom:0; margin:auto 0; content:""; width:15px; height:0; border-top:#ddd 1px solid; border-bottom: transparent 1px solid; z-index:2; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } footer .navBox ul li a:hover:before { width:100%; border-top:#111 1px solid; border-bottom:#111 1px solid;} @media only screen and (max-width: 950px) { footer .navBox ul li a:hover:before { width:15px; border-top:#ddd 1px solid; border-bottom: transparent 1px solid;} } @media only screen and (max-width: 800px) { footer .navBox ul li a { padding-left:18px; } footer .navBox ul li a:before { width:10px;} footer .navBox ul li a:hover:before { width:10px;} } @media only screen and (max-width: 736px) { footer .navArea { font-size:0; } footer .navBox { display:block; margin:0; width:100%; } footer .navBox:after, footer .navBox:first-child:before { display: none; } /* ul */ footer .navBox ul { margin:20px 0 0; padding:0; font-size:0; text-align:center; position:relative; } footer .navBox ul li { display:inline-block; margin:0; width:50%; padding:0; border: transparent 1px solid; font-size:12px; line-height:40px; text-align:center; } footer .navBox ul li a { display:block; position:relative; z-index:1; padding-left:0;line-height:40px; border: #111 1px dotted;} footer .navBox ul li a:before { display: none;} footer .navBox ul.home li, footer .navBox ul.news li, footer .navBox ul.access li, footer .navBox ul.notice2 li { width:100%; } footer .navBox ul.home:before, footer .navBox ul.about:before, footer .navBox ul.price:before, footer .navBox ul.news:before, footer .navBox ul.access:before, footer .navBox ul.notice2:before { display:block; margin-bottom:10px; font-size: 12px;font-family: 'nowmedium'; font-weight:normal; letter-spacing:2px; line-height:1; text-align:center; } footer .navBox ul.home:before { content: "HOME"} footer .navBox ul.about:before { content: "ABOUT"} footer .navBox ul.price:before { content: "PRICE"} footer .navBox ul.news:before { content: "NEWS"} footer .navBox ul.access:before { content: "ACCESS"} footer .navBox ul.notice2:before { content: "NOTICE"} } @media only screen and (max-width: 414px) { footer .navBox ul li { font-size:11px; line-height:35px;} footer .navBox ul li a { line-height:35px; } } /* --- .copyrightArea --- */ footer .copyrightArea { margin-top:75px; padding:0 5%; text-align:center; position:relative; z-index:1; } footer .copyrightArea:before { position:absolute; top:0; left:5%; right:5%; height:0; content:""; border-top:#111 3px solid; z-index:-1; } footer .copyrightArea p { font-size:11px; line-height:1; letter-spacing:1px; } footer .copyrightArea p.copyright { font-size:11px; line-height:100px; /*font-family: 'Quattrocento Sans', sans-serif; font-weight:700; */font-family: 'nowmedium'; font-weight:normal;letter-spacing:1.5px;} footer .copyrightArea p.copyright span.year { vertical-align: 0 ; } footer .copyrightArea p.copyright span.copy { font-size:12px; vertical-align: 0 ; font-family:'Open Sans';font-weight:300;} footer .copyrightArea p.copyright span.and { vertical-align: 0 ; font-family:'Open Sans'; font-size: 1.1em; font-weight:600;} footer .copyrightArea p.copyright span.by { font-size:9px; vertical-align: 0 ; font-family: 'nowlight'; font-weight:400; font-weight:400; } footer .copyrightArea p a {border-bottom: #111 1px dotted;} @media only screen and (max-width: 950px) { footer .copyrightArea { margin-top:65px; } } @media only screen and (max-width: 736px) { footer .copyrightArea { margin-top:60px; } footer .copyrightArea:before { left:0; right:0; } footer .copyrightArea p.copyright { line-height:80px; letter-spacing:1px;} } @media only screen and (max-width: 414px) { footer .copyrightArea p.copyright { font-size:10px; } footer .copyrightArea p.copyright span.copy { font-size:11px; } } /* ========================================================================== .linkArea ========================================================================== */ .linkArea { text-align: center; margin-top: 60px; } /* .btn */ .btn { display: inline-block; width:350px; max-width:100%; padding: 0; margin:0 10px; color:#fefefe; background:#111; border:#111 2px solid; font-size: 14px; text-decoration: none; text-align:center; font-weight:500; line-height: 65px; letter-spacing: 1px; position: relative; -webkit-border-radius:1px; -moz-border-radius:1px; border-radius:1px; z-index: 1; /*overflow: hidden;*/} .btn:before { font-family: 'themify'; content: "\e649"; font-size: 16px; font-style: normal; font-weight: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: absolute; top: 0; right: 15px; z-index: 2; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .btn:hover:before { right: 10px; } /* .btnBorder */ .btnBorder { color:#111; background:#fefefe; } /* .btnSmall */ .btnSmall { line-height:50px; width:250px; max-width:100%; border:#111 2px solid; } .btnSmall:before { font-size: 12px; } /* .btnMostSmall */ .btnMostSmall { line-height: 45px; width: 200px; max-width: 100%;} .btnMostSmall:before { font-size: 12px; } .btn:hover { padding-right: 10px;} .btn:after { position: absolute; bottom: -4px; left: 0; right: 100%; content: ""; border-bottom:#111 1px solid; z-index: -1;-webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease;} .btn:hover:after { right:0;} .btnBorder:hover:after { border-color: #111;} @media only screen and (max-width: 950px) { .linkArea { margin-top: 40px; } .btn { width:300px; max-width:100%; margin:10px 10px 0; font-size: 14px; line-height: 60px; } .btn:before { font-size: 14px; right: 15px;} .btn:hover:before { right: 15px; } .btn:after { display: none;} .btn:hover { padding-right: 0;} } @media only screen and (max-width: 736px) { .btn { display: block; font-size: 13px; line-height: 50px; margin:10px auto 0;} .btn:before { font-size: 12px; } } /* ---------------------------------------------------------- #preloader ---------------------------------------------------------- */ #preloader { position: fixed; top:0; left:0; right:0; bottom:0; display: block; background:#fefefe; z-index:99998; } /* .spinner */ .spinner { position: absolute; left:0; right:0; bottom:0; top:0; width:100px; height:100px; background: url(../images/common/loading_smile.svg) center center no-repeat; background-size: 100px 100px; margin: auto; text-indent:-9999px; } .spinner:after {position: absolute; top:0; right:0; bottom:0; left:0; content: ""; border-top:1px dotted #000; border-bottom:1px dotted #000; border-right:1px solid #000; border-left:1px solid #000; -webkit-border-radius:100%; -moz-border-radius:100%; border-radius:100%; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -o-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); -webkit-animation: spin .5s linear infinite; -moz-animation: spin .5s linear infinite; -ms-animation: spin .5s linear infinite; -o-animation: spin .5s linear infinite; animation: spin .5s linear infinite} @media only screen and (max-width: 736px) { .spinner { position: absolute; left:0; right:0; bottom:0; top:0; width:70px; height:70px; background: url(../images/common/loading_smile.svg) center center no-repeat; background-size: 70px 70px; margin: auto; text-indent:-9999px; } .spinner:after {border-top:1px dotted #000; border-bottom:1px dotted #000; border-right:1px solid #000; border-left:1px solid #000;} } @-webkit-keyframes spin{0%{-webkit-transform:rotate(0)}100%{-webkit-transform:rotate(360deg)}}@-moz-keyframes spin{0%{-moz-transform:rotate(0)}100%{-moz-transform:rotate(360deg)}}@-ms-keyframes spin{0%{-ms-transform:rotate(0)}100%{-ms-transform:rotate(360deg)}}@-o-keyframes spin{0%{-o-transform:rotate(0)}100%{-o-transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}} /*@media screen and (max-width:768px){.spinner{width:50px;height:50px}}@media screen and (max-width:414px){.spinner{width:40px;height:40px}}*/ /* ----------------------------------------------------------- .central ----------------------------------------------------------- */ .central { max-width: 1300px; margin: 0 auto; position: relative; } /* ----------------------------------------------------------- #headline ----------------------------------------------------------- */ #headline { margin: 65px 5% 0; height: 300px; text-align: center; position: relative; z-index: 0; border-bottom: #111 1px solid; } #headline .inner{ position: absolute; top:50%; left:50%; display: inline-block; width:85%; min-width:85%; z-index:4; -webkit-transform:translate(-50%, -50%);-moz-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);-o-transform:translate(-50%, -50%);transform:translate(-50%, -50%); text-align:center;} #headline h1.title {font-size: 60px; font-family: 'nowmedium'; font-weight:normal; letter-spacing: 5px; line-height: 1; position: relative; z-index: 1; } #headline h1.titleJp { margin-top: 20px; font-size:16px;letter-spacing:2px;line-height:1;font-weight:500;position: relative; z-index: 1; } @media only screen and (max-width: 950px) { #headline { margin: 70px 0 0; height: 250px; } } @media only screen and (max-width: 768px) { #headline h1.title {font-size:50px;} #headline h1.titleJp { margin-top: 10px;font-size:14px; } } @media only screen and (max-width: 736px) { #headline { margin: 50px 0 0; height: 200px; } #headline h1.title {font-size:40px; letter-spacing: 4px;} #headline h1.titleJp { margin-top: 10px;font-size:14px;} } @media only screen and (max-width: 414px) { #headline { height: 180px; } #headline h1.title {font-size:35px; letter-spacing: 3px;} #headline h1.titleJp { margin-top: 10px;font-size:13px; } } @media only screen and (max-width: 320px) { #headline h1.title {font-size:32px;} } /* ----------------------------------------------------------- #breadcrumb ----------------------------------------------------------- */ #breadcrumb { margin: 0; padding:20px 5%; border-top: #111 double; /*border-bottom: #111 1px solid;*/ /*background: #eaeaea;*/ position:relative; z-index:1;} #breadcrumb ol { font-size: 0; margin: 0; padding: 0;line-height:1; } #breadcrumb li { display: inline-block; list-style: none; font-size: 12px; font-weight: 500; margin: 0 30px 0 0; padding: 0; height:30px; line-height:30px; letter-spacing: 0.5px; position: relative; z-index: 1; } #breadcrumb li:after { position: absolute; top: 0; right: -20px; bottom: 0; width: 10px; font-size: 10px; font-family: 'themify'; content: "\e649"; font-weight: normal; } #breadcrumb li:last-child:after { display:none;} #breadcrumb li i { font-size: 16px; padding-right: 5px; font-weight: normal; line-height: 1.3; } #breadcrumb li a { position:relative; z-index:1; height:30px; line-height:30px; display: block; border-bottom: #111 1px dotted;} #breadcrumb li:first-child a { padding-left: 20px;} #breadcrumb li:first-child a:before { position: absolute; top: 0; left: 0;width: 20px; height: 28px; content: ""; background: url(../images/common/logo_smile.svg) center left no-repeat; background-size: 16px 16px; z-index: -1;} #breadcrumb li a:after { position: absolute; bottom: -1px; left: 0; right: 100%; height: 0; content: ""; border-bottom: #111 2px solid; z-index: 1; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;} #breadcrumb li a:hover:after { right: 0;} @media only screen and (max-width: 950px) { #breadcrumb li { font-size: 11px; } #breadcrumb li a:after { display: none;} } @media only screen and (max-width: 736px) { #breadcrumb { margin: 0; padding:15px 5%;} #breadcrumb li { font-size: 11px; margin: 0 20px 0 0; } #breadcrumb li:after { right: -15px; width: 10px; font-size: 8px; } #breadcrumb li:last-child:after { display:none;} #breadcrumb li:first-child a { padding-left: 15px;} #breadcrumb li:first-child a:first-child { font-size: 0;} #breadcrumb li:first-child a:before { position: absolute; top: 0; left: 0; width: 15px; height: 28px;background-size: 15px 15px; z-index: -1;} } @media only screen and (max-width: 667px) { #breadcrumb li:last-child {overflow: hidden;text-overflow: ellipsis; white-space: nowrap; width:10em;} } /*@media only screen and (max-width: 800px) { #breadcrumb { padding:20px 5%; border-top:none;} #breadcrumb:before { display:none;} #breadcrumb li a { border-bottom: #fec6c7 1px solid; } #breadcrumb li a:hover:after { display:none;} #breadcrumb li a:hover { color:#111; border-bottom: #fec6c7 1px solid;} } @media only screen and (max-width: 414px) { #breadcrumb ol { font-size: 0; margin: -10px auto 0; padding: 0; display:block; text-align:left; } #breadcrumb li { font-size: 10px; margin: 10px 0 0; padding: 0; letter-spacing: 1px;} #breadcrumb li:after { margin: 0 5px;} #breadcrumb li:last-child {overflow: hidden;text-overflow: ellipsis; white-space: nowrap; width:10em;} #breadcrumb li:first-child a { font-size:0; width:auto; } #breadcrumb li:first-child a:before {padding-right:0; font-size: 10px;} } @media only screen and (max-width: 320px) { #breadcrumb li:last-child { width:6em;} }*/ /* ----------------------------------------------------------- #headline ----------------------------------------------------------- */ /* ----------------------------------------------------------- .headline ----------------------------------------------------------- */ .headline { text-align:center; margin-bottom:50px; } .headline h2.en { font-size:35px; fonfont-family: 'nowlight'; font-family: 'nowbold'; font-weight:normal; letter-spacing: 3px; line-height: 1; position: relative; z-index: 1;} .headline h2.en span.and { font-family: 'Open Sans'; margin: 0 5px; font-weight: 300; vertical-align: 0;} .headline h2.jp { font-size:18px;letter-spacing:2px;line-height:2;font-weight:500;position: relative; z-index: 1; } @media only screen and (max-width: 1100px) { .headline h2.en { font-size:30px;} } @media only screen and (max-width: 950px) { .headline { text-align:center; margin-bottom:45px; } } @media only screen and (max-width: 736px) { .headline { margin-bottom:40px; } .headline h2.en { font-size:25px; letter-spacing: 3px; } .headline h2.en span.and { font-family: 'Open Sans'; margin: 0 5px; font-weight: 300; vertical-align: 0;} .headline h2.jp { font-size:18px;letter-spacing:2px;line-height:2;font-weight:500;position: relative; z-index: 1; } } @media only screen and (max-width: 414px) { .headline h2.en { font-size:22px; letter-spacing: 2px; } } /* ---------------------------------------------------------- #scrollUp ---------------------------------------------------------- */ #scrollUp { position: fixed; bottom: 20px; right: 20px; z-index: 1000; } #scrollUp a { width: 60px; height: 60px; display: block; color: #fefefe; background: #111; border:none; text-align: center; z-index: 11; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; position:relative; z-index:1; } #scrollUp a:before { position:absolute; top:0; left:0; right:0; bottom:0; font-family: 'themify'; content:"\e648"; font-size: 16px; line-height:58px; } #scrollUp a:hover {-webkit-transform: translate(0px, -10px); -moz-transform: translate(0px, -10px); -o-transform: translate(0px, -10px); -ms-transform: translate(0px, -10px); transform: translate(0px, -10px); } @media only screen and (max-width: 800px) { #scrollUp a:hover { -webkit-transform: translate(0px, 0px); -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); transform: translate(0px, 0px); } } @media only screen and (max-width: 414px) { #scrollUp a { width: 50px; height: 50px; } #scrollUp a:before { font-size: 16px; line-height:48px; } } /* ul.circle */ ul.circle { margin:0; padding:0; list-style: circle; padding-left:1em; } ul.circle li { font-size: 14px;letter-spacing: 1px; line-height: 2; } /* ul.disc */ ul.disc { margin:0; padding:0; list-style: disc; padding-left:1em; } ul.disc li { font-size: 14px; letter-spacing: 1px; line-height: 2; } /* ul.notice */ ul.notice { margin:0; padding:0; list-style: none; } ul.notice li { margin-top: 3px; padding-left:1.25em; font-size: 14px; letter-spacing: 1px; line-height: 2; position:relative; } ul.notice li:before { position:absolute; top:0; left:0; width:10px; display:block; content:"※"; } ul.notice li a{border-bottom: #111 1px dashed;} ul.notice li a:hover{ color: #fefefe; background: #111;} /* ol.no */ ol.no { margin:10px 0 0; padding:0; counter-reset:number; list-style:none; } ol.no li { font-size: 14px; letter-spacing: 1px; line-height: 2; padding-left:30px; position:relative; } ol.no li:before{counter-increment: number;content: counter(number); position:absolute; top:3px; left:0; width:20px; height:20px; line-height:21px; text-align:center; display:block; color:#fefefe; background:#999; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%;} @media only screen and (max-width: 950px) { ul.notice li a:hover{ color: #111; background: none;} } @media only screen and (max-width: 768px) { ul.circle li, ul.disc li, ul.notice li{ font-size: 13px; line-height: 2; } } @media only screen and (max-width: 736px) { ul.circle li, ul.disc li, ul.notice li{ font-size: 12px; line-height: 1.8; } } /* ---------------------------------------------------------- slick.js ---------------------------------------------------------- */ /* Slider */ .slick-list,.slick-slider,.slick-track{position:relative;display:block}.slick-loading .slick-slide,.slick-loading .slick-track{visibility:hidden}.slick-slider{-moz-box-sizing:border-box;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent}.slick-list{overflow:hidden;margin:0;padding:0}.slick-list:focus{outline:0}.slick-list.dragging{cursor:pointer;cursor:hand}.slick-slider .slick-list,.slick-slider .slick-track{-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.slick-track{top:0;left:0}.slick-track:after,.slick-track:before{display:table;content:''}.slick-track:after{clear:both}.slick-slide{display:none;float:left;height:100%;min-height:1px}[dir=rtl] .slick-slide{float:right}.slick-slide img{display:block}.slick-slide.slick-loading img{display:none}.slick-slide.dragging img{pointer-events:none}.slick-initialized .slick-slide{display:block}.slick-vertical .slick-slide{display:block;height:auto;border:1px solid transparent}.slick-arrow.slick-hidden{display:none} /* --- Dots --- */ /*.slick-dots{position:absolute;bottom:-40px;list-style:none;display:block;text-align:center;padding:0;width:100%;height:8px;z-index:100}.slick-dots li{position:relative;display:inline-block;height:8px;width:8px;margin:0 10px;padding:0;cursor:pointer;-webkit-transition:all 1s ease-out;-moz-transition:all 1s ease-out;-o-transition:all 1s ease-out;transition:all 1s ease-out}.slick-dots li button{background:0 0;border:1px solid #999;display:block;height:8px;width:8px;overflow:hidden;line-height:0;font-size:0;color:transparent;cursor:pointer;padding:0px;-webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%;-webkit-transition:all .3s ease-out;-moz-transition:all .3s ease-out;-o-transition:all .3s ease-out;transition:all .3s ease-out}.slick-dots li.slick-active button{outline:0;border:1px solid #111;background:#111}.slick-dots li button:before{position:absolute;top:-1px;right:-1px;bottom:-1px;left:-1px;content:"";border:1px solid transparent;-webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%;-webkit-transition:all .3s ease;-moz-transition:all .3s ease;-o-transition:all .3s ease;transition:all .3s ease}.slick-dots li.slick-active button:before{border:0.5px solid #111;content:""}*/ /* zoom.js */ .lightbox{cursor:pointer;position:fixed;width:100%;height:100%;top:0;left:0;background:rgba(0,0,0,.7);-webkit-filter:none!important;z-index:9997} .lightbox img{display:block;position:absolute; } /*body.blurred>*{-webkit-filter:blur(2px);-webkit-transform:translate3d(0,0,0)}*/ .lightbox__loading{background:url(https://androof.com/css/loading.gif) center center no-repeat;width:32px;height:32px;margin:-16px 0 0 -16px;position:absolute;top:50%;left:50%} .lightbox__caption{display:none;position:absolute;left:0;bottom:0;width:100%;text-align:center;z-index:9998;background:#000;background:rgba(0,0,0,.7)} .lightbox__caption p{margin:0 auto;max-width:70%;display:inline-block;padding:10px;color:#fff;font-size:12px;line-height:18px} .lightbox__button{position:absolute;z-index:9999;background:center center no-repeat;/*width:32px;height:32px;opacity:.4;*/-webkit-transition:all .3s;-moz-transition:all .3s;-ms-transition:all .3s;transition:all .3s} /*.lightbox__button:focus, .lightbox__button:hover{opacity:1;-webkit-transform:scale(1.4);-moz-transform:scale(1.4);-ms-transform:scale(1.4);transform:scale(1.4)}*/ .lightbox__close{right:10px;top:10px;width:60px;height:60px; text-align: center; line-height: 60px; font-size:0;font-style:normal;border:0;color:#fefefe;background:#111;-webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%} .lightbox__close:before{position:absolute;top:0;right:0;left:0;bottom:0;font-family:themify;content:"\e646";font-size:18px;text-indent:0;z-index:1} .lightbox__nav{top:50%;margin-top:-16px} .lightbox__nav--next{right:10px;background-image:url(https://androof.com/css/next.png)} .lightbox__nav--prev{left:10px;background-image:url(https://androof.com/css/previous.png)} /*! Animate.css - http://daneden.me/animate Licensed under the MIT license Copyright (c) 2013 Daniel Eden Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. */ .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated.hinge { -webkit-animation-duration: 2s; animation-duration: 2s; } @-webkit-keyframes fadeIn{0%{opacity:0}100%{opacity:1}}@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn}@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-20px);transform:translateY(-20px)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-20px);-ms-transform:translateY(-20px);transform:translateY(-20px)}100%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}.fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown}@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translateX(-20px);transform:translateX(-20px)}100%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}100%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}.fadeInLeft{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft}@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px);transform:translateX(20px)}100%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}100%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}.fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight}@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(40px);transform:translateY(40px)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(40px);-ms-transform:translateY(40px);transform:translateY(40px)}100%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp}