/* 最小化できませんでした。最小化されていないコンテンツを返します。 (181,40): run-time error CSS1046: Expect comma, found '0' (181,44): run-time error CSS1046: Expect comma, found '/' (6056,47): run-time error CSS1046: Expect comma, found '0' (6056,51): run-time error CSS1046: Expect comma, found '/' (6057,39): run-time error CSS1046: Expect comma, found '0' (6057,43): run-time error CSS1046: Expect comma, found '/' */ @charset "UTF-8"; html, body, p, li, dl, dt, dd, blockquote, td, form { margin: 0; padding: 0; } h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; font-size: 100%; } ul, ol { list-style: none outside none; margin: 0; padding: 0; } address, em, code, cite, dfn, var, optgroup { font-style: normal; } caption, th { font-style: normal; font-weight: normal; margin: 0; padding: 0; text-align: left; } img { border: none; vertical-align: bottom; } table { border-collapse: collapse; border-spacing: 0; font-size: 100%; line-height: inherit; } input, select, textarea { font-size: inherit; } fieldset { border: none; margin: 0; padding: 0; } html[lang="es"] body, html[lang="th"] body, html[lang="id"] body { font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 62.5%; line-height: 1; } html[lang="es"]:not(:target) body, html[lang="th"]:not(:target) body, html[lang="id"]:not(:target) body { font-family: Tahoma, Arial,Helvetica, sans-serif; font-size: 62.5%; line-height: 1; } html[lang="vi"] body { font-family: Arial, Tahoma, Helvetica, sans-serif; font-size: 62.5%; line-height: 1; } html[lang="vi"]:not(:target) body { font-family: Arial, Tahoma, Helvetica, sans-serif; font-size: 62.5%; line-height: 1; } html body, html[lang="en"] body, html[lang="ja"] body { font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", Verdana, Arial, Helvetica, sans-serif; font-size: 62.5%; line-height: 1; } html:not(:target) body, html[lang="en"]:not(:target) body, html[lang="ja"]:not(:target) body { font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", Verdana, Arial, Helvetica, sans-serif; font-size: 62.5%; line-height: 1; } html[lang="zh-cn"] body { font-family: "Microsoft YaHei", "微软雅黑", Arial, Helvetica, sans-serif; font-size: 62.5%; line-height: 1; } html[lang="zh-cn"]:not(:target) body { font-family: "Microsoft YaHei", "微软雅黑", Arial, Helvetica, sans-serif; font-size: 62.5%; line-height: 1; } a { outline: none !important; } a:focus, *:focus { outline: none !important; } a:active { outline: none !important; } /* * custombox v3.0.0 - 2015-08-04 * Modal Window Effects with transitions CSS3. * http://dixso.github.io/custombox/ * (c) 2015 Julio de la Calle - @dixso9 * * Under MIT License - http://opensource.org/licenses/MIT */ .custombox-modal-wrapper,.custombox-overlay{right:0;top:0;bottom:0;left:0;position:fixed}.custombox-open,.custombox-open body{overflow:hidden}.custombox-perspective,.custombox-perspective body{-webkit-perspective:600px;perspective:600px;height:100%}.custombox-modal-container-fall,.custombox-modal-container-flip,.custombox-modal-container-rotate,.custombox-modal-container-sidefall,.custombox-modal-container-sign,.custombox-modal-container-slit{-webkit-perspective:1300px;perspective:1300px}.custombox-overlay-open{visibility:visible;opacity:1}.custombox-overlay{-webkit-transition-delay:0s;transition-delay:0s}.custombox-overlay-default{-webkit-transition-timing-function:linear;transition-timing-function:linear;-webkit-transition-property:opacity;transition-property:opacity;opacity:0}.custombox-modal-wrapper{outline:0;overflow:auto;text-align:center}.custombox-modal-container{margin:0 auto;position:relative}.custombox-modal img{max-width:100%;height:auto}.custombox-scrollbar{position:absolute;top:-9999px;width:50px;height:50px;overflow:scroll}.custombox-loading{position:fixed;-webkit-transform:translateY(-50%)translateX(-50%);-ms-transform:translateY(-50%)translateX(-50%);transform:translateY(-50%)translateX(-50%);top:50%;left:50%}.custombox-overlay-letmein{-webkit-transition-property:all;transition-property:all;-webkit-transition-timing-function:ease;transition-timing-function:ease;visibility:hidden}.custombox-overlay-open.custombox-overlay-slidetogether,.custombox-overlay-slidetogether{-webkit-transition-property:-webkit-transform ease-in-out;transition-property:transform ease-in-out}.custombox-overlay-open.custombox-overlay-letmein{-webkit-transform:rotateX(-2deg);transform:rotateX(-2deg);-webkit-transform-origin:50% 0;-ms-transform-origin:50% 0;transform-origin:50% 0;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;visibility:visible;opacity:1}.custombox-overlay-slidetogether{-webkit-transform:translateY(-100%);-ms-transform:translateY(-100%);transform:translateY(-100%)}.custombox-overlay-open.custombox-overlay-slidetogether{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}.custombox-overlay-corner{-webkit-transform:translateY(150px)translateX(150px);-ms-transform:translateY(150px)translateX(150px);transform:translateY(150px)translateX(150px);-webkit-transition-property:opacity,-webkit-transform,visibility;transition-property:opacity,transform,visibility}.custombox-overlay-open.custombox-overlay-corner{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);-webkit-transition-property:opacity,-webkit-transform;transition-property:opacity,transform}.custombox-overlay-open.custombox-overlay-scale,.custombox-overlay-scale{-webkit-transition-property:-webkit-transform;transition-property:transform}.custombox-overlay-scale{-webkit-transform:scale(.9);-ms-transform:scale(.9);transform:scale(.9)}.custombox-overlay-open.custombox-overlay-scale{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}.custombox-overlay-door,.custombox-overlay-open.custombox-overlay-door{-webkit-transition-property:width ease-in-out;transition-property:width ease-in-out}.custombox-overlay-door{visibility:hidden;width:0;left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%)}.custombox-overlay-open.custombox-overlay-door{visibility:visible;width:100%}.custombox-container-push{overflow-x:hidden;-webkit-transition-property:-webkit-transform;transition-property:transform}.custombox-overlay-open.custombox-overlay-push,.custombox-overlay-push{-webkit-transition-property:-webkit-transform ease-in-out;transition-property:transform ease-in-out}.custombox-container-open.custombox-container-push{-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%)}.custombox-overlay-push{-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%)}.custombox-overlay-open.custombox-overlay-push{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}.custombox-open-contentscale body{background-color:#DDD}.custombox-container-contentscale{-webkit-transition:-webkit-transform .5s;transition:transform .5s;overflow:hidden;height:100%}.custombox-overlay-contentscale,.custombox-overlay-open.custombox-overlay-contentscale{-webkit-transition-property:-webkit-transform ease-in-out;transition-property:transform ease-in-out}.custombox-container-open.custombox-container-contentscale{-webkit-transform:scale(.8);-ms-transform:scale(.8);transform:scale(.8)}.custombox-overlay-contentscale{-webkit-transform:translateY(100%);-ms-transform:translateY(100%);transform:translateY(100%)}.custombox-overlay-open.custombox-overlay-contentscale{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}.custombox-modal-container-blur,.custombox-modal-fadein,.custombox-modal-flip-horizontal,.custombox-modal-flip-vertical,.custombox-modal-newspaper,.custombox-modal-open .custombox-modal-fall,.custombox-modal-rotate-bottom,.custombox-modal-rotate-left,.custombox-modal-superscaled,.custombox-overlay-blur,.custombox-overlay-newspaper,.custombox-overlay-open.custombox-overlay-makeway,.custombox-overlay-open.custombox-overlay-slip{-webkit-transition-property:all;transition-property:all}.custombox-container-open.custombox-container-makeway{height:100%;overflow:hidden}.custombox-container-open.custombox-container-makeway,.custombox-overlay-open.custombox-overlay-makeway{-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transform-origin:0 50%;-ms-transform-origin:0 50%;transform-origin:0 50%;-webkit-animation:rotateRightSideFirst .5s forwards ease-in;animation:rotateRightSideFirst .5s forwards ease-in}@-webkit-keyframes rotateRightSideFirst{50%{-webkit-transform:translateZ(-50px)rotateY(5deg);transform:translateZ(-50px)rotateY(5deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}100%{-webkit-transform:translateZ(-200px);transform:translateZ(-200px)}}@keyframes rotateRightSideFirst{50%{-webkit-transform:translateZ(-50px)rotateY(5deg);transform:translateZ(-50px)rotateY(5deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}100%{-webkit-transform:translateZ(-200px);transform:translateZ(-200px)}}.custombox-container-open.custombox-container-slip,.custombox-overlay-open.custombox-overlay-slip{-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transform-origin:50% 100%;-ms-transform-origin:50% 100%;transform-origin:50% 100%;-webkit-animation:OpenTop .5s forwards ease-in-out;animation:OpenTop .5s forwards ease-in-out}@-webkit-keyframes OpenTop{50%{-webkit-transform:rotateX(10deg);transform:rotateX(10deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}@keyframes OpenTop{50%{-webkit-transform:rotateX(10deg);transform:rotateX(10deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}.custombox-modal-fadein{-webkit-transform:scale(.7);-ms-transform:scale(.7);transform:scale(.7);opacity:0;visibility:hidden}.custombox-modal-open .custombox-modal-fadein{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);opacity:1;visibility:visible}.custombox-modal-container-slide>div,.custombox-modal-container-slidetogether>div{opacity:0;float:left}.custombox-modal-open>.custombox-modal-container-slide>div,.custombox-modal-open>.custombox-modal-container-slidetogether>div{opacity:1}.custombox-modal-slide-top{-webkit-transform:translateY(-300%);-ms-transform:translateY(-300%);transform:translateY(-300%)}.custombox-modal-open .custombox-modal-slide-top{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}.custombox-modal-slide-left{-webkit-transform:translateX(-300%);-ms-transform:translateX(-300%);transform:translateX(-300%)}.custombox-modal-open .custombox-modal-slide-left{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}.custombox-modal-slide-right{-webkit-transform:translateX(300%);-ms-transform:translateX(300%);transform:translateX(300%)}.custombox-modal-open .custombox-modal-slide-right{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}.custombox-modal-slide-bottom{-webkit-transform:translateY(300%);-ms-transform:translateY(300%);transform:translateY(300%)}.custombox-modal-open .custombox-modal-slide-bottom{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}.custombox-modal-newspaper{-webkit-transform:scale(0)rotate(720deg);-ms-transform:scale(0)rotate(720deg);transform:scale(0)rotate(720deg);opacity:0;position:absolute}.custombox-modal-open .custombox-modal-newspaper{-webkit-transform:scale(1)rotate(0);-ms-transform:scale(1)rotate(0);transform:scale(1)rotate(0);opacity:1}.custombox-modal-fall{-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transform:translateZ(600px)rotateX(20deg);transform:translateZ(600px)rotateX(20deg);opacity:0}.custombox-modal-open .custombox-modal-fall{-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in;-webkit-transform:translateZ(0)rotateX(0);transform:translateZ(0)rotateX(0);opacity:1}.custombox-modal-wrapper-sidefall{overflow-x:hidden}.custombox-modal-sidefall{-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transform:translate(30%)translateZ(600px)rotate(10deg);transform:translate(30%)translateZ(600px)rotate(10deg);opacity:0}.custombox-modal-open .custombox-modal-sidefall{-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in;-webkit-transition-property:all;transition-property:all;-webkit-transform:translate(0)translateZ(0)rotate(0);transform:translate(0)translateZ(0)rotate(0);opacity:1}.custombox-open-blur .custombox-container-blur{-webkit-filter:blur(3px);filter:blur(3px)}@media all and (-ms-high-contrast:none){.custombox-open-blur .custombox-container-blur{text-shadow:0 0 8px #000;color:rgba(255,255,255,0);filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='3');zoom:1}}.custombox-modal-blur{-webkit-transform:translateY(-5%);-ms-transform:translateY(-5%);transform:translateY(-5%);opacity:0;position:absolute}.custombox-modal-open .custombox-modal-blur{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);opacity:1}.custombox-modal-flip-horizontal{position:absolute;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transform:rotateY(-70deg);transform:rotateY(-70deg);opacity:0}.custombox-modal-open .custombox-modal-flip-horizontal{-webkit-transform:rotateY(0);transform:rotateY(0);opacity:1}.custombox-modal-flip-vertical{position:absolute;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transform:rotateX(-70deg);transform:rotateX(-70deg);opacity:0}.custombox-modal-open .custombox-modal-flip-vertical{-webkit-transform:rotateX(0);transform:rotateX(0);opacity:1}.custombox-modal-sign{-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transform:rotateX(-60deg);transform:rotateX(-60deg);-webkit-transform-origin:50% 0;-ms-transform-origin:50% 0;transform-origin:50% 0;opacity:0;-webkit-transition-property:all;transition-property:all}.custombox-modal-open .custombox-modal-sign{-webkit-transform:rotateX(0);transform:rotateX(0);opacity:1}.custombox-modal-superscaled{-webkit-transform:scale(2);-ms-transform:scale(2);transform:scale(2);opacity:0;position:absolute}.custombox-modal-open .custombox-modal-superscaled{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);opacity:1}.custombox-modal-slit{-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transform:translateZ(-3000px)rotateY(90deg);transform:translateZ(-3000px)rotateY(90deg);opacity:0}.custombox-modal-open .custombox-modal-slit{-webkit-animation:slit .7s forwards ease-out;animation:slit .7s forwards ease-out}.custombox-modal-rotatedown,.custombox-modal-swell{-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}@-webkit-keyframes slit{50%{-webkit-transform:translateZ(-250px)rotateY(89deg);transform:translateZ(-250px)rotateY(89deg);opacity:1;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}100%{-webkit-transform:translateZ(0)rotateY(0);transform:translateZ(0)rotateY(0);opacity:1}}@keyframes slit{50%{-webkit-transform:translateZ(-250px)rotateY(89deg);transform:translateZ(-250px)rotateY(89deg);opacity:1;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}100%{-webkit-transform:translateZ(0)rotateY(0);transform:translateZ(0)rotateY(0);opacity:1}}.custombox-modal-rotate-bottom{-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transform:translateY(100%)rotateX(90deg);transform:translateY(100%)rotateX(90deg);-webkit-transform-origin:0 100%;-ms-transform-origin:0 100%;transform-origin:0 100%;opacity:0;-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out;position:absolute}.custombox-modal-open .custombox-modal-rotate-bottom{-webkit-transform:translateY(0)rotateX(0);transform:translateY(0)rotateX(0);opacity:1}.custombox-modal-rotate-left{-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transform:translateZ(100px)translateX(-30%)rotateY(90deg);transform:translateZ(100px)translateX(-30%)rotateY(90deg);-webkit-transform-origin:0 100%;-ms-transform-origin:0 100%;transform-origin:0 100%;opacity:0;position:absolute}.custombox-modal-open .custombox-modal-rotate-left{-webkit-transform:translateZ(0)translateX(0)rotateY(0);transform:translateZ(0)translateX(0)rotateY(0);opacity:1}.custombox-modal-container-letmein{-webkit-transition-property:-webkit-transform;transition-property:transform;-webkit-transform:rotateX(-2deg);transform:rotateX(-2deg);-webkit-transform-origin:50% 0;-ms-transform-origin:50% 0;transform-origin:50% 0;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;opacity:1}.custombox-modal-letmein{opacity:0;-webkit-transform:translateY(300%);-ms-transform:translateY(300%);transform:translateY(300%);float:left}.custombox-modal-open .custombox-modal-letmein{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);opacity:1;-webkit-transition-property:all;transition-property:all}.custombox-modal-makeway{-webkit-transform:translateX(200%);-ms-transform:translateX(200%);transform:translateX(200%);opacity:0;float:left}.custombox-modal-open .custombox-modal-makeway{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);opacity:1}.custombox-modal-wrapper-makeway{overflow:hidden}.custombox-modal-slip{-webkit-transform:translateY(-350%);-ms-transform:translateY(-350%);transform:translateY(-350%)}.custombox-modal-open .custombox-modal-slip{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);-webkit-transition-property:all;transition-property:all}.custombox-modal-corner{opacity:0;-webkit-transform:translateY(150px)translateX(150px);-ms-transform:translateY(150px)translateX(150px);transform:translateY(150px)translateX(150px);-webkit-transition-property:opacity,-webkit-transform,visibility;transition-property:opacity,transform,visibility}.custombox-modal-open .custombox-modal-corner{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);opacity:1;-webkit-transition-property:opacity,-webkit-transform;transition-property:opacity,transform}.custombox-modal-slidetogether{-webkit-transform:translateY(-600%);-ms-transform:translateY(-600%);transform:translateY(-600%)}.custombox-modal-open .custombox-modal-slidetogether{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}.custombox-modal-scale{-webkit-transform:scale(.9);-ms-transform:scale(.9);transform:scale(.9);-webkit-transition:-webkit-transform;transition:transform;opacity:0}.custombox-modal-open .custombox-modal-scale{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);-webkit-transition:-webkit-transform;transition:transform;opacity:1}.custombox-modal-door{visibility:hidden;opacity:0}.custombox-modal-open .custombox-modal-door{opacity:1;visibility:visible}.custombox-modal-push{-webkit-transform:translateX(-300%);-ms-transform:translateX(-300%);transform:translateX(-300%)}.custombox-modal-open .custombox-modal-push{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}.custombox-modal-contentscale{-webkit-transform:translateY(600%);-ms-transform:translateY(600%);transform:translateY(600%);-webkit-transition-property:-webkit-transform ease-in-out;transition-property:transform ease-in-out;position:absolute}.custombox-modal-open .custombox-modal-contentscale{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}.custombox-modal-swell{-webkit-animation-duration:.5s;animation-duration:.5s;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;-webkit-animation-name:swell-close;animation-name:swell-close}.custombox-modal-open .custombox-modal-swell{-webkit-animation-name:swell-open;animation-name:swell-open}@-webkit-keyframes swell-open{0%{opacity:0;-webkit-transform:translate3d(-webkit-calc(-100vw - 50%),0,0);transform:translate3d(calc(-100vw - 50%),0,0)}50%{opacity:1;-webkit-transform:translate3d(100px,0,0);transform:translate3d(100px,0,0)}100%{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes swell-open{0%{opacity:0;-webkit-transform:translate3d(-webkit-calc(-100vw - 50%),0,0);transform:translate3d(calc(-100vw - 50%),0,0)}50%{opacity:1;-webkit-transform:translate3d(100px,0,0);transform:translate3d(100px,0,0)}100%{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@-webkit-keyframes swell-close{0%{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}50%{opacity:1;-webkit-transform:translate3d(-100px,0,0)scale3d(1.1,1.1,1);transform:translate3d(-100px,0,0)scale3d(1.1,1.1,1)}100%{opacity:0;-webkit-transform:translate3d(-webkit-calc(100vw + 50%),0,0);transform:translate3d(calc(100vw + 50%),0,0)}}@keyframes swell-close{0%{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}50%{opacity:1;-webkit-transform:translate3d(-100px,0,0)scale3d(1.1,1.1,1);transform:translate3d(-100px,0,0)scale3d(1.1,1.1,1)}100%{opacity:0;-webkit-transform:translate3d(-webkit-calc(100vw + 50%),0,0);transform:translate3d(calc(100vw + 50%),0,0)}}.custombox-modal-rotatedown{-webkit-animation-duration:.4s;animation-duration:.4s;-webkit-animation-timing-function:cubic-bezier(.7,0,.3,1);animation-timing-function:cubic-bezier(.7,0,.3,1);-webkit-transform-origin:-150% 50%;-ms-transform-origin:-150% 50%;transform-origin:-150% 50%;-webkit-animation-name:rotatedown-close;animation-name:rotatedown-close;overflow:hidden}.custombox-modal-open .custombox-modal-rotatedown{-webkit-animation-name:rotatedown-open;animation-name:rotatedown-open}.custombox-modal-open .custombox-modal-rotatedown div>*{-webkit-animation:rotatedown-elem .4s both;animation:rotatedown-elem .4s both;-webkit-transform-origin:-50% 50%;-ms-transform-origin:-50% 50%;transform-origin:-50% 50%;-webkit-animation-timing-function:cubic-bezier(.7,0,.3,1);animation-timing-function:cubic-bezier(.7,0,.3,1);-webkit-animation-delay:.15s;animation-delay:.15s}@-webkit-keyframes rotatedown-open{0%{opacity:0;-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg)}100%{opacity:1;-webkit-transform:rotate3d(0,0,1,0deg);transform:rotate3d(0,0,1,0deg)}}@keyframes rotatedown-open{0%{opacity:0;-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg)}100%{opacity:1;-webkit-transform:rotate3d(0,0,1,0deg);transform:rotate3d(0,0,1,0deg)}}@-webkit-keyframes rotatedown-close{0%{opacity:1}100%{opacity:0;-webkit-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg)}}@keyframes rotatedown-close{0%{opacity:1}100%{opacity:0;-webkit-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg)}}@-webkit-keyframes rotatedown-elem{0%{opacity:0;-webkit-transform:translate3d(0,-150px,0)rotate3d(0,0,1,-20deg);transform:translate3d(0,-150px,0)rotate3d(0,0,1,-20deg)}100%{opacity:1;-webkit-transform:translate3d(0,0,0)rotate3d(0,0,1,0deg);transform:translate3d(0,0,0)rotate3d(0,0,1,0deg)}}@keyframes rotatedown-elem{0%{opacity:0;-webkit-transform:translate3d(0,-150px,0)rotate3d(0,0,1,-20deg);transform:translate3d(0,-150px,0)rotate3d(0,0,1,-20deg)}100%{opacity:1;-webkit-transform:translate3d(0,0,0)rotate3d(0,0,1,0deg);transform:translate3d(0,0,0)rotate3d(0,0,1,0deg)}}.custombox-modal-flash{-webkit-animation-duration:.4s;animation-duration:.4s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:cubic-bezier(.7,0,.3,1);animation-timing-function:cubic-bezier(.7,0,.3,1);-webkit-animation-name:flash-close;animation-name:flash-close;overflow:hidden}.custombox-modal-open .custombox-modal-flash{-webkit-animation-name:flash-open;animation-name:flash-open}.custombox-modal-open .custombox-modal-flash div>*{-webkit-animation:flash-elem-open .4s cubic-bezier(.7,0,.3,1)both;animation:flash-elem-open .4s cubic-bezier(.7,0,.3,1)both}.custombox-modal-flash div>*{-webkit-animation:flash-elem-close .4s cubic-bezier(.7,0,.3,1)both;animation:flash-elem-close .4s cubic-bezier(.7,0,.3,1)both}@-webkit-keyframes flash-open{0%{opacity:0;-webkit-transform:translate3d(-400px,0,0)scale3d(1.4,0,1);transform:translate3d(-400px,0,0)scale3d(1.4,0,1)}100%{opacity:1;-webkit-transform:translate3d(0,0,0)scale3d(1,1,1);transform:translate3d(0,0,0)scale3d(1,1,1)}}@keyframes flash-open{0%{opacity:0;-webkit-transform:translate3d(-400px,0,0)scale3d(1.4,0,1);transform:translate3d(-400px,0,0)scale3d(1.4,0,1)}100%{opacity:1;-webkit-transform:translate3d(0,0,0)scale3d(1,1,1);transform:translate3d(0,0,0)scale3d(1,1,1)}}@-webkit-keyframes flash-close{0%,20%{opacity:1;-webkit-transform:translate3d(0,0,0)scale3d(1,1,1);transform:translate3d(0,0,0)scale3d(1,1,1)}100%{opacity:0;-webkit-transform:translate3d(-400px,0,0)scale3d(1.4,0,1);transform:translate3d(-400px,0,0)scale3d(1.4,0,1)}}@keyframes flash-close{0%,20%{opacity:1;-webkit-transform:translate3d(0,0,0)scale3d(1,1,1);transform:translate3d(0,0,0)scale3d(1,1,1)}100%{opacity:0;-webkit-transform:translate3d(-400px,0,0)scale3d(1.4,0,1);transform:translate3d(-400px,0,0)scale3d(1.4,0,1)}}@-webkit-keyframes flash-elem-open{0%,20%{opacity:0;-webkit-transform:translate3d(-100px,0,0);transform:translate3d(-100px,0,0)}100%{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes flash-elem-open{0%,20%{opacity:0;-webkit-transform:translate3d(-100px,0,0);transform:translate3d(-100px,0,0)}100%{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@-webkit-keyframes flash-elem-close{0%{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}100%{opacity:0;-webkit-transform:translate3d(-100px,0,0);transform:translate3d(-100px,0,0)}}@keyframes flash-elem-close{0%{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}100%{opacity:0;-webkit-transform:translate3d(-100px,0,0);transform:translate3d(-100px,0,0)}} /* universal.css */ html, body { padding-bottom: 0 !important; } #loading { background: #FFF; position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 1000; } #loading img { position: absolute; top: 50%; left: 50%; margin-top: -50px; margin-left: -50px; } #wrapper { border-top: 5px solid #3C8CF0; background: url(../img/bg_mainvisual_loop.png) repeat-x center 50px; } .wrapper-login-header { background: #FFF !important; } #header { position: relative; z-index: 15; background: #FFF; } #header h1 { font-size: 25px; font-weight: bold; margin: 0; } .header-responsive-shadow { box-shadow: 0px 5px 5px -3px rgb(0 0 0 / 50%); } #header-inner { position: relative; width: 1000px; height: 75px; margin: 0 auto; } .header-inner-responsive { position: relative; max-width: 1000px; width: 100%; height: 75px; margin: 0 auto; } .header-inner-responsive .logo-jf { height: 75px; margin-left: 1rem; display: flex; align-items: center; } .header-inner-responsive .logo-jf img, #header-floating-inner .logo-jf img { width: auto; height: 65px; } #header-nav, .header-nav-responsive { position: absolute; right: 0; top: 24px; } #header-nav .select-box { overflow: hidden; float: left; } #header-nav select, .header-nav-responsive select, .header-nav-responsive select[disabled] { color: #505050; height: 26px; min-height: 26px; font-size: 12px; width: 140px; box-sizing: border-box; padding: 4px 10px 4px 12px; border: 1px solid #B3B3B3; border-radius: 2px; text-indent: .01px; text-overflow: ""; margin: 0 0 0 0; } .ie9 #select-lang { color: #505050; height: 26px; font-size: 11px; width: 140px; box-sizing: border-box; padding: 3px 12px 3px 12px; border: 1px solid #B3B3B3; border-radius: 2px; -webkit-appearance: none; -moz-appearance: none; appearance: none; text-indent: .01px; text-overflow: ""; background: #FFF; margin: 0 0px 0 0; } /* select::-ms-expand { display: none; } */ /* * ヘッダ内の言語selectボックスの２重矢印を消す対応 */ #header-nav .ul-header-nav { float: left; } #header-nav .ul-header-nav li { display: inline-block; margin: 0 17px 0 0; font-size: 12px; } #header-nav .header-username span, .header-nav-responsive .header-username span { display: table-cell; vertical-align: middle; height: 26px; font-size: 12px; color: #1a63af; } #header-nav .header-btn { border-radius: 2px; height: 26px; width: 100px; color: #FFF; font-size: 12px; text-align: center; display: table-cell; vertical-align: middle; box-shadow: 0 1px 1px 0 rgba(0,0,0,0.4); } .header-nav-responsive .header-btn:hover { text-decoration: none; } .header-nav-responsive .header-text a { display: table-cell; vertical-align: middle; height: 26px; text-align: center; margin: 0 0 0 0 !important; } .header-nav-responsive .header-text:last-child { margin: 0 20px 0 0; padding: 0 0 0 0; } .header-nav-responsive .header-text:last-child span { border-right: none; margin: 0 0 0 0; padding: 0 0 0 0px; } .header-nav-responsive .header-text a { color: #505050; } .ul-header-nav-responsive { display: flex; flex-flow: row wrap; justify-content: flex-end; align-items: center; margin-right: 0; } .ul-header-nav-responsive li { display: inline-block; margin: 0 17px 0 0; font-size: 12px; } .ul-header-nav-responsive li:last-child { margin-right: 0; } .header-nav-responsive .header-btn { border-radius: 2px; height: 26px; width: 13rem; color: #FFF; font-size: 12px; text-align: center; display: table-cell; vertical-align: middle; box-shadow: 0 1px 1px 0 rgba(0,0,0,0.4); } /* 新規登録ボタンの幅調整（タイ語の場合改行される。） */ #header-nav .header-btn-account, .header-nav-responsive .header-btn-account .he { width: 8rem !important; } .header-regist a { background: #58cee2; background: -moz-radial-gradient(top, ellipse cover, #58cee2 0%, #1db4d5 100%); background: -webkit-gradient(radial, center top, 0px, center center, 100%, color-stop(0%,#58cee2), color-stop(99%,#1db4d5)); background: -webkit-radial-gradient(top, ellipse cover, #58cee2 0%,#1db4d5 100%); background: -o-radial-gradient(top, ellipse cover, #58cee2 0%,#1db4d5 100%); background: -ms-radial-gradient(top, ellipse cover, #58cee2 0%,#1db4d5 100%); background: radial-gradient(ellipse at top, #58cee2 0%,#1db4d5 100%); } .header-login a { background: #3a80c1; background: -moz-radial-gradient(top, ellipse cover, #3a80c1 0%, #0a53a7 100%); background: -webkit-gradient(radial, center top, 0px, center center, 100%, color-stop(0%,#3a80c1), color-stop(100%,#0a53a7)); background: -webkit-radial-gradient(top, ellipse cover, #3a80c1 0%,#0a53a7 100%); background: -o-radial-gradient(top, ellipse cover, #3a80c1 0%,#0a53a7 100%); background: -ms-radial-gradient(top, ellipse cover, #3a80c1 0%,#0a53a7 100%); background: radial-gradient(ellipse at top, #3a80c1 0%,#0a53a7 100%); } .header-logoff a { background: #3a80c1; background: -moz-radial-gradient(top, ellipse cover, #3a80c1 0%, #0a53a7 100%); background: -webkit-gradient(radial, center top, 0px, center center, 100%, color-stop(0%,#3a80c1), color-stop(100%,#0a53a7)); background: -webkit-radial-gradient(top, ellipse cover, #3a80c1 0%,#0a53a7 100%); background: -o-radial-gradient(top, ellipse cover, #3a80c1 0%,#0a53a7 100%); background: -ms-radial-gradient(top, ellipse cover, #3a80c1 0%,#0a53a7 100%); background: radial-gradient(ellipse at top, #3a80c1 0%,#0a53a7 100%); } .header-mypage a, .header-mypage-sub a { background: #58cee2; background: -moz-radial-gradient(top, ellipse cover, #58cee2 0%, #1db4d5 100%); background: -webkit-gradient(radial, center top, 0px, center center, 100%, color-stop(0%,#58cee2), color-stop(99%,#1db4d5)); background: -webkit-radial-gradient(top, ellipse cover, #58cee2 0%,#1db4d5 100%); background: -o-radial-gradient(top, ellipse cover, #58cee2 0%,#1db4d5 100%); background: -ms-radial-gradient(top, ellipse cover, #58cee2 0%,#1db4d5 100%); background: radial-gradient(ellipse at top, #58cee2 0%,#1db4d5 100%); } .header-application a { background: #3a80c1; background: -moz-radial-gradient(top, ellipse cover, #5d6dff 0%, #4650ff 100%); background: -webkit-gradient(radial, center top, 0px, center center, 100%, color-stop(0%,#5d6dff), color-stop(100%,#4650ff)); background: -webkit-radial-gradient(top, ellipse cover, #5d6dff 0%,#4650ff 100%); background: -o-radial-gradient(top, ellipse cover, #5d6dff 0%,#4650ff 100%); background: -ms-radial-gradient(top, ellipse cover, #5d6dff 0%,#4650ff 100%); background: radial-gradient(ellipse at top, #5d6dff 0%,#4650ff 100%); } #header-nav .header-btn:hover { text-decoration: none; } #header-nav .header-text a { display: table-cell; vertical-align: middle; height: 26px; text-align: center; margin: 0 0 0 0 !important; } #header-nav .header-text:last-child { margin: 0 20px 0 0; padding: 0 0 0 0; } #header-nav .header-text:last-child span { border-right: none; margin: 0 0 0 0; padding: 0 0 0 0px; } #header-nav .header-text a { color: #505050; } @media screen and (max-width: 400px) { .header-inner-responsive .logo-jf img, #header-floating-inner .logo-jf img { height: 60px; } } /*追従ヘッダー*/ #header-floating { position: fixed; z-index: 200; background: #FFF; top: 0px; height: 0px; display: none; overflow: hidden; width: 100%; box-shadow: 0 1px 1px 1px rgba(0,0,0,0.2); border-top: 5px solid #3C8CF0; } #header-floating-inner { position: relative; width: 100%; max-width: 1000px; margin: 0 auto; } #header-floating-inner .logo-jf { height: 75px; margin-left: 1rem; display: flex; align-items: center; } #header-floating .ul-header-nav-responsive li a { color: #505050; font-size: 1.3rem; position: relative; padding: 0 0 0 15px; } #header-floating .ul-header-nav-responsive li a:before { content: ""; position: absolute; border-left: 1px solid #505050; width: 1px; height: 14px; top: 50%; margin-top: -7px; left: 0; z-index: 100; } #header-floating .ul-header-nav-responsive li:first-child a:before, #header-floating .ul-header-nav-responsive li:last-child a:before, #header-floating .ul-header-nav-responsive li.no-border a:before { border: none; } #header-floating .ul-header-nav-responsive li:first-child a, #header-floating .ul-header-nav-responsive li:last-child a { border-left: none; } #header-floating .ul-header-nav-responsive li a.active.tab1 { color: #3C8CF0; text-decoration: none; } #header-floating .ul-header-nav-responsive li a.active.tab2 { color: #5A73EB; text-decoration: none; } #header-floating .ul-header-nav-responsive li a.active.tab3 { color: #4664C8; text-decoration: none; } #header-floating .ul-header-nav-responsive li a.active.tab4 { color: #00AADC; text-decoration: none; } #header-floating .ul-header-nav-responsive li span.double { line-height: 1.5; } #header-floating .ul-header-nav-responsive li a.header-btn { border-radius: 2px; height: 26px; width: 100px; color: #FFF; font-size: 12px; text-align: center; display: table-cell; vertical-align: middle; box-shadow: 0 1px 1px 0 rgba(0,0,0,0.4); padding-left: 0 !important; } #header-floating .ul-header-nav-responsive li a.header-btn:hover { text-decoration: none; } .hamburger_menu_footer { color: black; font-size: 1.12rem; } .follow_header { position: fixed; z-index: 1050; top: 0%; width: 100vw; height: 5rem; } .header-shadow { display: block; max-width: 1000px; width: 100%; margin: 0 auto; text-align: center; } #mainvisual { position: relative; margin: 0 auto 0 auto; } .content-top { position: relative !important; } /*ハンバーガーメニューのコンテンツが隠れるためz-indexを100から10に変更*/ #content { width: 100%; z-index: 10; } #content.tab1 { border-top: 5px solid #3C8CF0; } #content.tab2 { border-top: 5px solid #5A73EB; } #content.tab3 { border-top: 5px solid #4664C8; } #content.tab4 { border-top: 5px solid #00AADC; } .content-inner-responsive { position: relative; background: #FFF; min-height: calc(100vh - 80px - 135px - 144px - 30px); /* header - JapanFoundationLogo - footerLink - copyRight */ } #content-inner { position: relative; z-index: 100; min-height: 350px; background: #FFF; } #content-inner .tab { min-height: 500px; } #content-inner #tab1 { /* background: url(../../img/bg_content_header_1.jpg) no-repeat center top,url(../../img/bg_content_footer.png) repeat-x center bottom; */ } #content-inner #tab2 { /* background: url(../../img/bg_content_header_2.jpg) no-repeat center top,url(../../img/bg_content_footer.png) repeat-x center bottom; */ display: none; } #content-inner #tab3 { /* background: url(../../img/bg_content_header_3.jpg) no-repeat center top,url(../../img/bg_content_footer.png) repeat-x center bottom; */ display: none; } #content-inner #tab4 { /* background: url(../../img/bg_content_header_4.jpg) no-repeat center top,url(../../img/bg_content_footer.png) repeat-x center bottom; */ display: none; } #mainvisual-contents { position: relative; max-width: 1000px; width: 100%; height: 620px; margin: 0 auto; } #mainvisual-contents .logo { position: absolute; top: 55px; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); z-index: 10; } #mainvisual-contents .logo-login { position: absolute; top: 20px; left: 20px; z-index: 10; } #mainvisual-contents .logo-login img { width: 260px; } #mainvisual-contents .main-nav { position: absolute; top: 215px; width: 410px; left: 50%; margin-left: -205px; z-index: 10; } #mainvisual-contents .main-nav { text-align: center; } #mainvisual-contents .main-nav .main-regist { border-radius: 2px; padding: 15px 20px; margin: 0 18px 0 0; font-weight: normal; color: #FFF; width: 180px; box-sizing: border-box; font-size: 18px; display: inline-block; vertical-align: middle; box-shadow: 0 3px 0 0 rgba(0,0,0,0.3); background: #58cee2; background: -moz-radial-gradient(top, ellipse cover, #58cee2 0%, #1db4d5 100%); background: -webkit-gradient(radial, center top, 0px, center center, 100%, color-stop(0%,#58cee2), color-stop(99%,#1db4d5)); background: -webkit-radial-gradient(top, ellipse cover, #58cee2 0%,#1db4d5 100%); background: -o-radial-gradient(top, ellipse cover, #58cee2 0%,#1db4d5 100%); background: -ms-radial-gradient(top, ellipse cover, #58cee2 0%,#1db4d5 100%); background: radial-gradient(ellipse at top, #58cee2 0%,#1db4d5 100%); } #mainvisual-contents .main-nav .main-login { border-radius: 2px; padding: 15px 20px; margin: 0 0 0 18px; width: 180px; box-sizing: border-box; font-weight: normal; color: #FFF; font-size: 18px; display: inline-block; vertical-align: middle; box-shadow: 0 3px 0 0 rgba(0,0,0,0.3); background: #3a80c1; background: -moz-radial-gradient(top, ellipse cover, #3a80c1 0%, #0a53a7 100%); background: -webkit-gradient(radial, center top, 0px, center center, 100%, color-stop(0%,#3a80c1), color-stop(100%,#0a53a7)); background: -webkit-radial-gradient(top, ellipse cover, #3a80c1 0%,#0a53a7 100%); background: -o-radial-gradient(top, ellipse cover, #3a80c1 0%,#0a53a7 100%); background: -ms-radial-gradient(top, ellipse cover, #3a80c1 0%,#0a53a7 100%); background: radial-gradient(ellipse at top, #3a80c1 0%,#0a53a7 100%); } #mainvisual-contents .main-nav a:hover { text-decoration: none; color: #FFF; } #mainvisual-contents .news { position: absolute; height: 175px; width: 100%; max-width: 1000px; box-sizing: border-box; background: rgba(255,255,255,0.7); top: 320px; left: 0px; z-index: 11; padding: 10px 15px; } #mainvisual-contents .news h2 { font-size: 1.6rem; color: #505050; text-align: center; padding-bottom: 0.3rem; } #mainvisual-contents .news .dl-news { height: 129px; overflow-y: auto; } #mainvisual-contents .news .dl-news dt { font-size: 14px; font-weight: normal; } #mainvisual-contents .news .dl-news dd { font-size: 14px; margin: 0 0 3px 0; } #mainvisual-contents .news .dl-news a { color: #0000FF; text-decoration: underline; } #mainvisual-contents .news .dl-news a:hover { color: #0000FF; text-decoration: none; } #mainvisual-contents .news .dl-news .tx-red { color: #F00000; } @media screen and (max-width: 1020px) { #mainvisual-contents .news { width: 730px; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); } } @media screen and (max-width: 999px) { #mainvisual-contents { position: relative; max-width: 1000px; width: 100%; height: 526px; margin: 0 auto; } #mainvisual-contents .news { height: 100px; top: 310px; } #mainvisual-contents .news .dl-news { height: 60px; overflow-y: auto; } #mainvisual-contents .logo img { width: 335px; } } @media screen and (max-width: 922px) { #mainvisual-contents { position: relative; max-width: 1000px; width: 100%; height: 526px; margin: 0 auto; } #mainvisual-contents .logo { top: 58px; text-align: center; } } @media screen and (max-width: 768px) { #mainvisual-contents { height: 370px; } #mainvisual-contents .logo { top: 42px; } #mainvisual-contents .logo img { width: 250px; } #mainvisual-contents .news { width: 80%; } #mainvisual-contents .news { top: 250px; } #mainvisual-contents .logo-login { top: 10px; left: -6px; } #mainvisual-contents .logo-login img { width: 240px; } } @media screen and (max-width: 576px) { #mainvisual-contents { height: 276px; /*height: 305px;*/ } #mainvisual-contents .logo { top: 28px; text-align: center; } #mainvisual-contents .logo img { width: 220px; } #mainvisual-contents .news { width: 93%; height: 85px; top: 177px; /*top: 207px;*/ } #mainvisual-contents .news .dl-news { /*height: 49px;*/ height: 65px; overflow-y: auto; line-height: 1.2 !important; } #mainvisual-contents .logo-login { /*top: 5px; left: -18px;*/ top: 10px; left: 0px; } #mainvisual-contents .logo-login img { width: 200px; } } #tabs { width: 100%; position: absolute; top: 627px; left: 0; z-index: 10; } #tabs-inner { position: relative; max-width: 1000px; width: 100%; margin: 0 auto; } #tabs-inner ul { padding: 0; margin: 0; } #tabs-inner li { list-style: none; float: left; margin: 0 2px 0 0; width: 248px; height: 90px; position: relative; } #tabs-inner li:last-child { margin: 0 0 0 0; width: 249px; height: 90px; } #tabs-inner li a { position: absolute; bottom: 0; display: block; width: 248px; height: 76px; background: url(/img/bg_tab_off.png) no-repeat center bottom #FFF; box-shadow: 0px 0px 8px 2px rgba(0,0,0,0.2); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } #tabs-inner li:last-child a { display: block; width: 249px; height: 76px; background: url(/img/bg_tab_off_last.png) no-repeat center bottom #FFF; } #tabs-inner li a img { position: absolute; left: 0; z-index: 1; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; transition: all 0.3s ease-out; opacity: 0; } #tabs-inner li a.active img, #tabs-inner li a:hover img { opacity: 1; } #tabs-inner li a.active, #tabs-inner li a:hover { height: 90px; } #tabs-inner li a span { font-size: 18px; color: #3C8CF0; font-weight: bold; position: absolute; display: inline-block; width: 100%; z-index: 2; left: 0; text-align: center; top: 50%; margin-top: -9px; } #tabs-inner li #tabh3 span { font-size: 17px; } #tabs-inner li a.active span, #tabs-inner li a:hover span { color: #FFF; } #tabs-inner li a span.double { top: 35%; line-height: 1.37; } @media screen and (max-width: 1020px) { #tabs { width: 730px; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); } #tabs-inner li, #tabs-inner li:last-child, #tabs-inner li a, #tabs-inner li:last-child a { width: 180px; } #tabs-inner li a.active, #tabs-inner li a:hover { height: 90px; } #tabs-inner li a img { width: 180px; height: 90px; } #tabs-inner li a span, #tabs-inner li #tabh3 span { font-size: 13px; } } @media screen and (max-width: 999px) { #tabs { top: 532px; } } @media screen and (max-width: 922px) { #tabs { top: 533px; } } #mainvisual-contents .btn-todays-word { position: relative; margin: 0 auto; width: 122px; height: 122px; top: 120px; margin-right: 10px; z-index: 10; -webkit-animation: tdw 5s linear infinite; /* Safari 4+ */ -moz-animation: tdw 5s linear infinite; /* Fx 5+ */ -o-animation: tdw 5s linear infinite; /* Opera 12+ */ animation: tdw 5s linear infinite; /* IE 10+, Fx 29+ */ } #mainvisual-contents .btn-todays-word.login { top: 20px; margin-right: 10px; } @-webkit-keyframes tdw { 0% { -webkit-transform: rotate(0deg) translateX(5%) rotate(0deg); } 100% { -webkit-transform: rotate(360deg) translateX(5%) rotate(-360deg); } } @-moz-keyframes tdw { 0% { transform: rotate(0deg) translateX(5%) rotate(0deg); } 100% { transform: rotate(360deg) translateX(5%) rotate(-360deg); } } @-o-keyframes tdw { 0% { transform: rotate(0deg) translateX(5%) rotate(0deg); } 100% { transform: rotate(360deg) translateX(5%) rotate(-360deg); } } @keyframes tdw { 0% { transform: rotate(0deg) translateX(5%) rotate(0deg); } 100% { transform: rotate(360deg) translateX(5%) rotate(-360deg); } } #mainvisual-contents .btn-todays-word img { -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; transition: all 0.3s ease-out; -webkit-filter: drop-shadow(0 0 2px rgba(0, 0, 0, .5)); filter: drop-shadow(0 0 2px rgba(0, 0, 0, .5)); } #mainvisual-contents .btn-todays-word a.active:after, #mainvisual-contents .btn-todays-word a:after { content: ""; width: 122px; height: 122px; display: block; border-radius: 50%; top: 0; left: 0; padding: 0; position: absolute; z-index: 11; box-shadow: 0 0 0 2px rgba(255,255,255,0.1); opacity: 0; -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -ms-transform: scale(0.9); transform: scale(0.9); } #mainvisual-contents .btn-todays-word a.active:before, #mainvisual-contents .btn-todays-word a:before { content: ""; width: 122px; height: 122px; display: block; border-radius: 50%; position: absolute; top: 0; left: 0; padding: 0; z-index: 11; box-shadow: 0 0 0 2px rgba(255,255,255,0.1); opacity: 0; -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); transform: scale(0.8); } #mainvisual-contents .btn-todays-word a:hover img { -webkit-transform: scale(0.93); -moz-transform: scale(0.93); -ms-transform: scale(0.93); transform: scale(0.93); } @media screen and (max-width: 1100px) { #mainvisual-contents .btn-todays-word { right: 5%; } } @media screen and (max-width: 992px) { #mainvisual-contents .btn-todays-word { top: 150px; } } @media screen and (max-width: 768px) { #mainvisual-contents .btn-todays-word { position: relative; width: 72px; height: 72px; top: 89px; } #mainvisual-contents .btn-todays-word a.active:after, #mainvisual-contents .btn-todays-word a:after, #mainvisual-contents .btn-todays-word a.active:before, #mainvisual-contents .btn-todays-word a:before { width: 72px; height: 72px; } #mainvisual-contents .btn-todays-word img { width: 72px; } } @media screen and (max-width: 576px) { #mainvisual-contents .btn-todays-word { top: 100px; } } /* #mainvisual-contents .btn-todays-word a.active:after, #mainvisual-contents .btn-todays-word a:hover:after { -webkit-animation: sonarEffect 1.3s ease-out 75ms; -moz-animation: sonarEffect 1.3s ease-out 75ms; animation: sonarEffect 1.3s ease-out 75ms; } #mainvisual-contents .btn-todays-word a.active:before, #mainvisual-contents .btn-todays-word a:hover:before { -webkit-animation: sonarEffect2 0.8s ease-out 75ms; -moz-animation: sonarEffect2 0.8s ease-out 75ms; animation: sonarEffect2 0.8s ease-out 75ms; } */ @-webkit-keyframes sonarEffect { 0% { opacity: 0.3; } 40% { opacity: 0.5; box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #5693da, 0 0 0 10px rgba(255,255,255,0.5); } 100% { box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #5693da, 0 0 0 10px rgba(255,255,255,0.5); -webkit-transform: scale(1.5); opacity: 0; } } @-moz-keyframes sonarEffect { 0% { opacity: 0.3; } 40% { opacity: 0.5; box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #5693da, 0 0 0 10px rgba(255,255,255,0.5); } 100% { box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #5693da, 0 0 0 10px rgba(255,255,255,0.5); -moz-transform: scale(1.5); opacity: 0; } } @keyframes sonarEffect { 0% { opacity: 0.3; } 40% { opacity: 0.5; box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #5693da, 0 0 0 10px rgba(255,255,255,0.5); } 99% { box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #5693da, 0 0 0 10px rgba(255,255,255,0.5); transform: scale(1.5); opacity: 0; } } @-webkit-keyframes sonarEffect2 { 0% { opacity: 0.3; } 40% { opacity: 0.5; box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #5693da, 0 0 0 10px rgba(255,255,255,0.5); } 100% { box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #5693da, 0 0 0 10px rgba(255,255,255,0.5); -webkit-transform: scale(1.1); opacity: 0; } } @-moz-keyframes sonarEffect2 { 0% { opacity: 0.3; } 40% { opacity: 0.5; box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #5693da, 0 0 0 10px rgba(255,255,255,0.5); } 100% { box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #5693da, 0 0 0 10px rgba(255,255,255,0.5); -moz-transform: scale(1.1); opacity: 0; } } @keyframes sonarEffect2 { 0% { opacity: 0.3; } 40% { opacity: 0.5; box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #5693da, 0 0 0 10px rgba(255,255,255,0.5); } 100% { box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #5693da, 0 0 0 10px rgba(255,255,255,0.5); transform: scale(1.1); opacity: 0; } } .bubble { position: absolute; left: 0; z-index: 10; } .bubble1 { -webkit-animation: bubble1 10s linear infinite; /* Safari 4+ */ -moz-animation: bubble1 10s linear infinite; /* Fx 5+ */ -o-animation: bubble1 10s linear infinite; /* Opera 12+ */ animation: bubble1 10s linear infinite; /* IE 10+, Fx 29+ */ } .bubble2 { -webkit-animation: bubble2 15s linear infinite; /* Safari 4+ */ -moz-animation: bubble2 15s linear infinite; /* Fx 5+ */ -o-animation: bubble2 15s linear infinite; /* Opera 12+ */ animation: bubble2 15s linear infinite; /* IE 10+, Fx 29+ */ } .bubble1 > img, .bubble2 > img, .bubble3 > img { max-width: 100%; height: auto; } .bubble3 { -webkit-animation: bubble3 20s linear infinite; /* Safari 4+ */ -moz-animation: bubble3 20s linear infinite; /* Fx 5+ */ -o-animation: bubble3 20s linear infinite; /* Opera 12+ */ animation: bubble3 20s linear infinite; /* IE 10+, Fx 29+ */ } @-webkit-keyframes bubble1 { 0% { -webkit-transform: rotate(0deg) translateX(2%) rotate(0deg); } 100% { -webkit-transform: rotate(360deg) translateX(2%) rotate(-360deg); } } @-moz-keyframes bubble1 { 0% { transform: rotate(0deg) translateX(2%) rotate(0deg); } 100% { transform: rotate(360deg) translateX(2%) rotate(-360deg); } } @-o-keyframes bubble1 { 0% { transform: rotate(0deg) translateX(2%) rotate(0deg); } 100% { transform: rotate(360deg) translateX(2%) rotate(-360deg); } } @keyframes bubble1 { 0% { transform: rotate(0deg) translateX(2%) rotate(0deg); } 100% { transform: rotate(360deg) translateX(2%) rotate(-360deg); } } @-webkit-keyframes bubble2 { 0% { -webkit-transform: rotate(0deg) translateX(1%) rotate(0deg); } 100% { -webkit-transform: rotate(360deg) translateX(1%) rotate(-360deg); } } @-moz-keyframes bubble2 { 0% { transform: rotate(0deg) translateX(1%) rotate(0deg); } 100% { transform: rotate(360deg) translateX(1%) rotate(-360deg); } } @-o-keyframes bubble2 { 0% { transform: rotate(0deg) translateX(1%) rotate(0deg); } 100% { transform: rotate(360deg) translateX(1%) rotate(-360deg); } } @keyframes bubble2 { 0% { transform: rotate(0deg) translateX(1%) rotate(0deg); } 100% { transform: rotate(360deg) translateX(1%) rotate(-360deg); } } @-webkit-keyframes bubble3 { 0% { -webkit-transform: rotate(0deg) translateX(1%) rotate(0deg); } 100% { -webkit-transform: rotate(360deg) translateX(1%) rotate(-360deg); } } @-moz-keyframes bubble3 { 0% { transform: rotate(0deg) translateX(1%) rotate(0deg); } 100% { transform: rotate(360deg) translateX(1%) rotate(-360deg); } } @-o-keyframes bubble3 { 0% { transform: rotate(0deg) translateX(1%) rotate(0deg); } 100% { transform: rotate(360deg) translateX(1%) rotate(-360deg); } } @keyframes bubble3 { 0% { transform: rotate(0deg) translateX(1%) rotate(0deg); } 100% { transform: rotate(360deg) translateX(1%) rotate(-360deg); } } #wave { } #wave-inner { width: 1200px; overflow: hidden; position: absolute; height: 635px; top: 0; left: 50%; margin-left: -600px; z-index: 0; background: url(../img/bg_mainvisual.png) no-repeat center top; } #wave img { position: absolute; } #wave .item { display: none; } #wave .wave { display: block; } #wave-0 { top: 270px; } #wave-1 { top: 215px; } #wave-2 { top: 135px; } #wave-3 { top: 230px; } #wave-4 { top: 267px; } #wave-l0 { top: 416px; left: -346px; } #wave-l1 { top: 357px; left: -587px; } #wave-l2 { top: 466px; left: -550px; } .wave-r { position: absolute; left: -625px; -webkit-animation: wave-r 5s ease-in-out infinite; /* Safari 4+ */ -moz-animation: wave-r 5s ease-in-out infinite; /* Fx 5+ */ -o-animation: wave-r 5s ease-in-out infinite; /* Opera 12+ */ animation: wave-r 5s ease-in-out infinite; /* IE 10+, Fx 29+ */ } .wave-l { position: absolute; left: -500px; -webkit-animation: wave-l 8s ease-in-out infinite; /* Safari 4+ */ -moz-animation: wave-l 8s ease-in-out infinite; /* Fx 5+ */ -o-animation: wave-l 8s ease-in-out infinite; /* Opera 12+ */ animation: wave-l 8s ease-in-out infinite; /* IE 10+, Fx 29+ */ } .wave-r2 { position: absolute; left: -655px; -webkit-animation: wave-r2 5s ease-in-out infinite; /* Safari 4+ */ -moz-animation: wave-r2 5s ease-in-out infinite; /* Fx 5+ */ -o-animation: wave-r2 5s ease-in-out infinite; /* Opera 12+ */ animation: wave-r2 5s ease-in-out infinite; /* IE 10+, Fx 29+ */ } .wave-r3 { position: absolute; left: -587px; -webkit-animation: wave-r3 8s ease-in-out infinite; /* Safari 4+ */ -moz-animation: wave-r3 8s ease-in-out infinite; /* Fx 5+ */ -o-animation: wave-r3 8s ease-in-out infinite; /* Opera 12+ */ animation: wave-r3 8s ease-in-out infinite; /* IE 10+, Fx 29+ */ } .wave-l2 { position: absolute; left: -500px; -webkit-animation: wave-l2 6s ease-in-out infinite; /* Safari 4+ */ -moz-animation: wave-l2 6s ease-in-out infinite; /* Fx 5+ */ -o-animation: wave-l2 6s ease-in-out infinite; /* Opera 12+ */ animation: wave-l2 6s ease-in-out infinite; /* IE 10+, Fx 29+ */ } .wave-l-top { position: absolute; width: 100%; height: 301px; top: 140px; background: url(../img/wave_top_1.png) repeat-x 0 0; /* left: -10px; */ -webkit-animation: wave-l-top 30s linear infinite; /* Safari 4+ */ -moz-animation: wave-l-top 30s linear infinite; /* Fx 5+ */ -o-animation: wave-l-top 30s linear infinite; /* Opera 12+ */ animation: wave-l-top 30s linear infinite; /* IE 10+, Fx 29+ */ } .wave-l-top-login { position: absolute; width: 100%; height: 301px; top: 170px; background: url(../img/wave_top_2.png) repeat-x 0 0; /* left: -10px; */ -webkit-animation: wave-l-top-login 60s linear infinite; /* Safari 4+ */ -moz-animation: wave-l-top-login 60s linear infinite; /* Fx 5+ */ -o-animation: wave-l-top-login 60s linear infinite; /* Opera 12+ */ animation: wave-l-top-login 60s linear infinite; /* IE 10+, Fx 29+ */ } @media screen and (max-width: 768px) { .wave-l-top-login { height: 150px; top: 170px; /*background: url(../img/wave_top_small.png) repeat-x 0 0;*/ -webkit-animation: wave-l-top-login 30s linear infinite; /* Safari 4+ */ -moz-animation: wave-l-top-login 30s linear infinite; /* Fx 5+ */ -o-animation: wave-l-top-login 30s linear infinite; /* Opera 12+ */ animation: wave-l-top-login 30s linear infinite; /* IE 10+, Fx 29+ */ } } .wave-l3 { position: absolute; left: -550px; -webkit-animation: wave-l3 5s ease-in-out infinite; /* Safari 4+ */ -moz-animation: wave-l3 5s ease-in-out infinite; /* Fx 5+ */ -o-animation: wave-l3 5s ease-in-out infinite; /* Opera 12+ */ animation: wave-l3 5s ease-in-out infinite; /* IE 10+, Fx 29+ */ } .wave-c { position: absolute; left: -574px; -webkit-animation: wave-c 12s ease-in-out infinite; /* Safari 4+ */ -moz-animation: wave-c 12s ease-in-out infinite; /* Fx 5+ */ -o-animation: wave-c 12s ease-in-out infinite; /* Opera 12+ */ animation: wave-c 12s ease-in-out infinite; /* IE 10+, Fx 29+ */ } .wave-c2 { position: absolute; left: -346px; -webkit-animation: wave-c2 8s ease-in-out infinite; /* Safari 4+ */ -moz-animation: wave-c2 8s ease-in-out infinite; /* Fx 5+ */ -o-animation: wave-c2 8s ease-in-out infinite; /* Opera 12+ */ animation: wave-c2 8s ease-in-out infinite; /* IE 10+, Fx 29+ */ } @media screen and (max-width: 992px) { .wave-l-top-login { top: 160px; } } @media screen and (max-width: 768px) { .wave-l-top { top: 78px; } .wave-l-top-login { top: 158px; } } @media screen and (max-width: 576px) { .wave-l-top { top: 74px; } .wave-l-top-login { top: 118px; } } @-webkit-keyframes wave-r { 0% { left: -625px; } 50% { left: -554px; } 100% { left: -625px; } } @-moz-keyframes wave-r { 0% { left: -625px; } 50% { left: -554px; } 100% { left: -625px; } } @-o-keyframes wave-r { 0% { left: -625px; } 50% { left: -554px; } 100% { left: -625px; } } @keyframes wave-r { 0% { left: -625px; } 50% { left: -554px; } 100% { left: -625px; } } @-webkit-keyframes wave-r2 { 0% { left: -685px; } 50% { left: -594px; } 100% { left: -685px; } } @-moz-keyframes wave-r2 { 0% { left: -685px; } 50% { left: -594px; } 100% { left: -685px; } } @-o-keyframes wave-r2 { 0% { left: -685px; } 50% { left: -594px; } 100% { left: -685px; } } @keyframes wave-r2 { 0% { left: -685px; } 50% { left: -504px; } 100% { left: -685px; } } @-webkit-keyframes wave-r3 { 0% { left: -587px; } 50% { left: -557px; } 100% { left: -587px; } } @-moz-keyframes wave-r3 { 0% { left: -587px; } 50% { left: -557px; } 100% { left: -587px; } } @-o-keyframes wave-r3 { 0% { left: -587px; } 50% { left: -557px; } 100% { left: -587px; } } @keyframes wave-r3 { 0% { left: -607px; } 50% { left: -527px; } 100% { left: -607px; } } @-webkit-keyframes wave-l { 0% { left: -500px; } 50% { left: -594px; } 100% { left: -500px; } } @-moz-keyframes wave-l { 0% { left: -500px; } 50% { left: -594px; } 100% { left: -500px; } } @-o-keyframes wave-l { 0% { left: -500px; } 50% { left: -594px; } 100% { left: -500px; } } @keyframes wave-l { 0% { left: -500px; } 50% { left: -594px; } 100% { left: -500px; } } @-webkit-keyframes wave-l2 { 0% { left: -500px; } 50% { left: -594px; } 100% { left: -500px; } } @-moz-keyframes wave-l2 { 0% { left: -500px; } 50% { left: -594px; } 100% { left: -500px; } } @-o-keyframes wave-l2 { 0% { left: -500px; } 50% { left: -594px; } 100% { left: -500px; } } @keyframes wave-l2 { 0% { left: -500px; } 50% { left: -594px; } 100% { left: -500px; } } @-webkit-keyframes wave-l3 { 0% { left: -630px; } 50% { left: -500px; } 100% { left: -630px; } } @-moz-keyframes wave-l3 { 0% { left: -630px; } 50% { left: -500px; } 100% { left: -630px; } } @-o-keyframes wave-l3 { 0% { left: -630px; } 50% { left: -500px; } 100% { left: -630px; } } @keyframes wave-l3 { 0% { left: -630px; } 50% { left: -500px; } 100% { left: -630px; } } @-webkit-keyframes wave-l-top { 0% { background-position: 0px 0px; } 100% { background-position: -1220px 0px; } } @-moz-keyframes wave-l-top { 0% { background-position: 0px 0px; } 100% { background-position: -1220px 0px; } } @-o-keyframes wave-l-top { 0% { background-position: 0px 0px; } 100% { background-position: -1220px 0px; } } @keyframes wave-l-top { 0% { background-position: 0px 0px; } 100% { background-position: -1220px 0px; } } @-webkit-keyframes wave-l-top-login { 0% { background-position: 0px 0px; } 100% { background-position: -1400px 0px; } } @-moz-keyframes wave-l-top-login { 0% { background-position: 0px 0px; } 100% { background-position: -1400px 0px; } } @-o-keyframes wave-l-top-login { 0% { background-position: 0px 0px; } 100% { background-position: -1400px 0px; } } @keyframes wave-l-top-login { 0% { background-position: 0px 0px; } 100% { background-position: -1400px 0px; } } @-webkit-keyframes wave-c { 0% { left: -574px; } 50% { left: -614px; } 100% { left: -574px; } } @-moz-keyframes wave-c { 0% { left: -574px; } 50% { left: -614px; } 100% { left: -574px; } } @-o-keyframes wave-c { 0% { left: -574px; } 50% { left: -614px; } 100% { left: -574px; } } @keyframes wave-c { 0% { left: -574px; } 50% { left: -614px; } 100% { left: -574px; } } @-webkit-keyframes wave-c2 { 0% { left: -346px; } 50% { left: -366px; } 100% { left: -346px; } } @-moz-keyframes wave-c2 { 0% { left: -346px; } 50% { left: -366px; } 100% { left: -346px; } } @-o-keyframes wave-c2 { 0% { left: -346px; } 50% { left: -366px; } 100% { left: -346px; } } @keyframes wave-c2 { 0% { left: -346px; } 50% { left: -366px; } 100% { left: -346px; } } .login #minato-0 { display: block; top: 269px; left: 484px; z-index: 0; } .login2 #minato-1 { display: block; top: 178px; left: -698px; } .login2 #minato-1b { display: block; top: 285px; left: -272px; } /* #wave-inner{ -moz-transition: -moz-transform 0.5s linear; -webkit-transition: -webkit-transform 0.5s linear; -o-transition: -o-transform 0.5s linear; -ms-transition: -ms-transform 0.5s linear; transition: transform 0.5s linear; } #mainvisual-contents:hover { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -o-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); } */ .opac { -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; transition: all 0.3s ease-out; opacity: 1; } .opac:hover { opacity: 0.6; } .table-center { margin: 0 auto; text-align: center; display: table; } #content-footer-inner { max-width: 1000px; width: 100%; margin: 0 auto; text-align: center; padding: 20px 0; } .footer-login p { color: #00B4D7; font-size: 25px; text-align: center; margin: 0 0 20px 0; } .footer-login a { border-radius: 2px; padding: 20px 40px; font-weight: normal; color: #FFF; font-size: 25px; display: table-cell; vertical-align: middle; box-shadow: 0 3px 0 0 rgba(0,0,0,0.3); } .footer-login a { background: #58cee2; background: -moz-radial-gradient(top, ellipse cover, #58cee2 0%, #1db4d5 100%); background: -webkit-gradient(radial, center top, 0px, center center, 100%, color-stop(0%,#58cee2), color-stop(99%,#1db4d5)); background: -webkit-radial-gradient(top, ellipse cover, #58cee2 0%,#1db4d5 100%); background: -o-radial-gradient(top, ellipse cover, #58cee2 0%,#1db4d5 100%); background: -ms-radial-gradient(top, ellipse cover, #58cee2 0%,#1db4d5 100%); background: radial-gradient(ellipse at top, #58cee2 0%,#1db4d5 100%); } .footer-login a:hover { text-decoration: none; } .footer-logoff p { color: #003264; font-size: 25px; text-align: center; margin: 0 0 20px 0; } .footer-logoff a { border-radius: 2px; padding: 20px 40px; font-weight: normal; color: #FFF; font-size: 25px; display: table-cell; vertical-align: middle; box-shadow: 0 3px 0 0 rgba(0,0,0,0.3); } .footer-logoff a { background: #58cee2; background: -moz-radial-gradient(top, ellipse cover, #0160be 0%, #003365 100%); background: -webkit-gradient(radial, center top, 0px, center center, 100%, color-stop(0%,#0160be), color-stop(99%,#003365)); background: -webkit-radial-gradient(top, ellipse cover, #0160be 0%,#003365 100%); background: -o-radial-gradient(top, ellipse cover, #0160be 0%,#003365 100%); background: -ms-radial-gradient(top, ellipse cover, #0160be 0%,#003365 100%); background: radial-gradient(ellipse at top, #0160be 0%,#003365 100%); } .footer-logoff a:hover { text-decoration: none; } #footer { background: url(../img/bg_footer_shadow.png) no-repeat center top #EBEBEB; } #footer-inner { width: 1000px; margin: 0 auto; text-align: center; padding: 60px 0 60px 0; } .footer-inner-responsive { max-width: 1000px; width: 100%; margin: 0 auto; text-align: center; padding: 60px 0 60px 0; } #footer_b { } #footer-inner_b { width: 100%; margin: 0 auto; text-align: center; padding: 60px 0 60px 0; background: url(../img/bg_footer_shadow.png) no-repeat center top #EBEBEB; } .footer-bn { margin-bottom: 0px; } .footer-bn a { display: inline-block; /* border: 1px solid #DCDCDC; */ background: #FFF; padding: 10px 20px; } .ul-nav-footer { margin: 0 auto; } .ul-nav-footer li { display: inline-block; padding: 0 20px; margin-bottom: 1rem; border-right: 1px solid #505050; font-size: 14px; } .ul-nav-footer li:last-child { border-right: none; } .ul-nav-footer li a { color: #505050; } .footer-inner-responsive .ul-nav-footer li a span { white-space: nowrap; } .ul-nav-footer-sns { text-align: right; margin: 10px 20px auto auto; } .ul-nav-footer-sns li { display: inline-block; padding: 0 5px; } .ul-nav-footer-sns li.fb-like { position: relative; left: 2px; } .ul-nav-footer-sns li.twitter { padding-left: 4px; padding-right: 4px; position: relative; top: 2px; } .ul-nav-footer-sns li.line { position: relative; top: 2px; } .ul-nav-footer-sns .fb_iframe_widget > span { height: 20px !important; } #footer .copyright, #footer .copyright-responsive { font-size: 12px; text-align: center; line-height: 1.4; padding: 0.5rem; background: #002d5a; width: 100%; color: #fff; } #footer_b .copyright { font-size: 12px; text-align: center; line-height: 2.5; background: #002D5A; width: 100%; color: #FFF; } /*以下、フッターのボタンがカラム落ちするwidthで設定*/ @media screen and (max-width: 976px) { .footer-inner-responsive .ul-nav-footer { flex-flow: row wrap; align-items: center; position: relative; margin-right: 0; } .footer-inner-responsive .ul-nav-footer li { border-right: none; font-size: 13px; padding: 0 0 0 16px; } .footer-inner-responsive .ul-nav-footer li a { position: relative; padding: 0 0 0 16px; } .footer-inner-responsive .ul-nav-footer li a:before { content: ""; position: absolute; border-left: 1px solid #505050; width: 1px; height: 14px; top: 50%; margin-top: -7px; left: 0; } .footer-inner-responsive .ul-nav-footer li:first-child, .footer-inner-responsive .ul-nav-footer li:first-child a { padding-left: 0 !important; } .footer-inner-responsive .ul-nav-footer li:first-child a:before { border: none; } .footer-inner-responsive .ul-nav-footer li:last-child { max-width: 250px; } .footer-inner-responsive .ul-nav-footer li:last-child a span { white-space: normal; } html[lang="ja"] .footer-inner-responsive .ul-nav-footer li:last-child { width: auto; max-width: none; } } @media screen and (max-width: 576px) { .ul-nav-footer-sns li { padding: 0; } .ul-nav-footer-sns li.fb-like { left: 0; } } /* tabs common */ #content-inner #tab1 .tab-box, #content-inner #tab2 .tab-box, #content-inner #tab3 .tab-box, #content-inner #tab4 .tab-box { position: relative; margin: 0 auto; width: 100%; } #content-inner #tab1 .tab-box { max-width: 1000px; } #content-inner #tab2 .tab-box, #content-inner #tab3 .tab-box, #content-inner #tab4 .tab-box { max-width: 920px; } @media screen and (min-width: 992px) { #content-inner #tab1 .tab-box, #content-inner #tab2 .tab-box, #content-inner #tab3 .tab-box, #content-inner #tab4 .tab-box { padding: 80px 0; } } #content-inner .tab-inner { max-width: 1000px; width: 100%; padding: 0 40px; margin: 0 auto; } .tab-box h2 { font-size: 34px; line-height: 1.5; margin: 0 0 40px 0; color: #508CF0; } #tab2 .tab-box h2 { color: #5A73EB; } #tab3 .tab-box h2 { color: #4664C8; } #tab4 .tab-box h2 { color: #00AADC; } /*About Japanese Course css*/ .about_japanese_course { color: #508CF0 !important; background-color: white !important; border-color: #68B2F2 !important; border-width: 3px; border-style: solid !important; position: relative; padding: 5px 50px; text-align: center; font-size: 16px; text-decoration: none; line-height: 35px; } a.about_japanese_course:hover { text-decoration: none; } /*検索*/ #tab1 .tab-box .search-btn { text-align: left; margin-top: 20px; display: block; } #tab1 .tab-box .search-btn button { width: 230px; height: 40px; } #tab1 .tab-box .search-btn .row { justify-content: space-between; align-items: center; } /*コースタブ*/ /*iPhone6s,7(safari)でカラム落ちするのを解消*/ #tab1 .row::before, #tab1 .row::after, #tab3 .row::before, #tab3 .row::after { display: none; } #tab1 .tab-box .course-tab { margin-top: 30px; height: 60px; border-bottom: solid 3px #5797DF; } #tab1 .tab-box .course-tab button { color: white !important; font-size: 19px; padding-top: 4px; border-top-left-radius: 10px; border-top-right-radius: 10px; flex: 0 0 33.1%; max-width: 33.1%; } #tab1 .tab-box .course-tab .intabbtn_on { height: 56px; margin-top: 1px; background: linear-gradient(#71C8FD, #2C7CD7 60%) !important; background-color: #5797DF !important; border: none !important; box-shadow: none !important; } #tab1 .tab-box .course-tab .intabbtn_off { height: 38px; margin-top: 19px; background-color: #D3D3D3 !important; border: none; } #tab1 .tab-box .box-course-list { max-width: 935px; width: 100%; margin: 0 auto; padding: 50px 0 0; } @media screen and (max-width: 999px) { #content-inner #tab1 .tab-box { padding: 50px 0; } } @media screen and (max-width: 992px) { #tab1 .tab-box .course-tab button { font-size: 1.6rem !important; flex: 0 0 33%; max-width: 33%; } } @media screen and (max-width: 768px) { #content-inner #tab1 .tab-box { padding: 0; } #content-inner .tab-inner { padding: 0 15px; } #tab1 .tab-box .search-btn { text-align: center; } #tab1 .tab-box .search-btn button { font-size: 1.6rem; } #tab1 .tab-box .course-tab button { font-size: 1.3rem !important; line-height: 1.2; font-weight: 700; text-align: left; padding: 0.65rem 0.8rem; } } @media screen and (max-width: 576px) { #tab1 .tab-box .box-course-list { padding: 20px 0 0; } #content-inner .course-tab .tab-inner { padding: 0 5px; } #tab1 .tab-box .search-btn { margin-top: 0; display: flex !important; flex-wrap: wrap; justify-content: space-between; } #tab1 .tab-box .search-btn button { font-size: 1.4rem; } #tab1 .tab-box .search-btn button.col-6 { -ms-flex: 0 0 49%; flex: 0 0 49%; max-width: 49%; } #tab1 .tab-box .course-tab { margin-top: 15px; } #tab1 .tab-box .course-tab button { font-size: 1rem !important; line-height: 1.2; padding: 0.35rem 0.4rem; } } /* 日本語コース一覧 */ .go-about-course { text-align: right; padding: 8px; border: 1px solid #1db4d5; background: #58cee2; background: -moz-radial-gradient(top, ellipse cover, #58cee2 0%, #1db4d5 100%); background: -webkit-gradient(radial, center top, 0px, center center, 100%, color-stop(0%,#58cee2), color-stop(99%,#1db4d5)); background: -webkit-radial-gradient(top, ellipse cover, #58cee2 0%,#1db4d5 100%); background: -o-radial-gradient(top, ellipse cover, #58cee2 0%,#1db4d5 100%); background: -ms-radial-gradient(top, ellipse cover, #58cee2 0%,#1db4d5 100%); background: radial-gradient(ellipse at top, #58cee2 0%,#1db4d5 100%); color: #FFF; position: absolute; box-shadow: 0 3px 0 0 rgba(0,0,0,0.3); right: 0; top: 160px; font-size: 14px; } .go-about-course span { margin: 0 10px 0 0; } .go-about-course:hover { color: #FFF; text-decoration: none; } .go-about-course:focus { color: #FFF; text-decoration: none; } .box-course-list { margin: 80px 0 0px 0; } .box-course-list h3.h-drop { background: url(../img/icon_bubble.png) left center no-repeat; padding: 4px 0 0 38px; margin: 0 0 25px 0; line-height: 1.5; font-size: 24px; color: #508CF0; font-weight: normal; } .box-course-list h4.h-drop { padding-left: 15px; text-align: left; border-bottom: 1px solid #e5f1ff; margin: -10px 0 15px; line-height: 1.5; font-size: 24px; color: #508CF0; font-weight: normal; } .box-course-list h4.course-title-drop { padding-left: 15px; text-align: left; border-bottom: 2px solid #1c64b1; margin: -10px 0 15px; line-height: 1.5; font-size: 24px; color: #1c64b1; font-weight: normal; color: #1c64b1; } .box-course { margin: 0 0 40px; padding: 0; } .table-course { width: 100%; } .table-course .course-row { justify-content: flex-start; } .table-course tr td:nth-child(2n) { padding: 0 40px; } .table-course .course-data-box { background: #F6F6F6; box-shadow: 2px 2px 0px 0px rgba(195,195,195,0.9); max-width: 280px; width: 100%; margin: 0 auto; } .table-course .course-data-box a:hover { text-decoration: none; } .table-course td { vertical-align: top; margin-bottom: 30px; } .course-img { margin: 0; } .course-status .course-id { float: left; font-size: 12px; padding: 5px 0; margin: 0 0 0 5px; box-sizing: border-box; color: #636363; text-align: center; } .course-details { padding: 10px; height: 105px; } .level-language { height: 40px; text-align: left; display: flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .course-level { display: inline; vertical-align: top; background-color: #2980ff; color: #ffffff; font-size: 1.4rem; text-align: center; max-height: 26px; margin-right: 0.5rem; padding: 6px 10px; // border-radius: 18px; border-radius: 0.3rem; } .course-lang { display: inline; max-height: 26px; vertical-align: top; background-color: #2980ff; color: #ffffff; font-size: 1.4rem; text-align: left; padding: 6px 10px; // border-radius: 18px; border-radius: 0.3rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .course-tuitionfeetype { color: #333; font-size: 1.5rem; font-weight: bold; } .course-tuitionfeetype-charge { color: #ff9300 } .course-tuitionfeetype-free { color: #2980ff } .course-status { max-width: inherit; max-height: 2rem; height: 2rem; margin: 10px 0 0; text-align: right; overflow: hidden; position: relative; } .course-status .arrow { display: inline-block; border-top-color: #333; border-top-style: solid; border-top-width: 2px; border-right-color: #333; border-right-style: solid; border-right-width: 2px; width: 9px; height: 9px; transform: rotate(45deg); position: absolute; top: 3px; right: 1px; } .course-status .course-result { display: inline-block; max-width: 92%; max-height: 1.5rem; height: 1.5rem; margin-right: 14px; font-size: 1.2rem; line-height: 1.2; font-weight: 700; color: #333; text-align: right; text-overflow: ellipsis; overflow-wrap: normal !important; overflow: hidden; } .course-pv { margin: 30px 0 0 0; } .box-course:last-child { margin: 0 0 0 0; } /*ステータスの色設定*/ /*TODO：いったん既存の色設定を引継ぎ　決定したら変更*/ .cr-red { color: #FF0000 !important; } .cr-red + .arrow { border-top-color: #FF0000 !important; border-right-color: #FF0000 !important; } .cr-purple { color: #9c25b4 !important; } .cr-purple + .arrow { border-top-color: #9c25b4 !important; border-right-color: #9c25b4 !important; } .cr-yellow { color: #DFA70F !important; } .cr-yellow + .arrow { border-top-color: #DFA70F !important; border-right-color: #DFA70F !important; } .cr-grey { color: #999 !important; } .cr-grey + .arrow { border-top-color: #999 !important; border-right-color: #999 !important; } /*どこに使用されているか分からないスタイル　一旦コメントアウト*/ /*.course-lvtype { background: #002D5A; border-top: 1px solid #78C8FF; vertical-align: middle; margin: 0 0 15px 0; padding: 15px 0; } .course-lvtype-inner { display: table; width: 100%; } .course-lvtype .course-level { color: #FFF; display: table-cell; text-align: center; width: 30%; font-size: 14px; border-right: 1px solid #64C8FF; } .course-lvtype .course-type { color: #FFF; display: table-cell; text-align: center; width: 70%; font-size: 14px; }*/ @media screen and (max-width: 768px) { .box-course-list h4.h-drop, .box-course-list h4.course-title-drop { padding-left: 10px; } .course-details { padding: 10px; height: 100px; } .table-course td { vertical-align: top; margin-bottom: 20px; } .course-level, .course-lang, .course-tuitionfeetype, .course-status .course-result { font-size: 1.2rem; } } @media screen and (max-width: 576px) { .box-course-list h4.course-title-drop, .box-course-list h4.h-drop { font-size: 16px; } .box-course { margin-bottom: 25px; padding: 0; } .table-course td { margin-bottom: 10px; } .course-details { padding: 5px; height: 64px; } .course-level, .course-lang, .course-tuitionfeetype, .course-status .course-result { font-size: 1rem; } .level-language { height: 25px; } .course-lang, .course-level { max-height: 18px; margin-bottom: 4px; padding: 3px 8px; } .course-level { margin-right: 0.2rem; } .course-status { margin: 5px 0 0; } .course-status .course-result { margin-right: 7px; line-height: 1.2; } .course-status .arrow { top: 3px; width: 6px; height: 6px; border-top-width: 1px; border-right-width: 1px; } } @media screen and (max-width: 400px) { .course-details { padding: 6px 2px; } .course-level, .course-lang { height: 16px; padding: 3px 4px; } .course-status .course-result { letter-spacing: -0.1rem; } } /*日本語コースについて　モーダル*/ #about-course h2 { font-size: 3rem !important; text-align: center !important; padding: 1rem !important; } .table-quarter { width: 100%; } .table-quarter h3.h-drop { background: url(../img/icon_bubble.png) left center no-repeat; padding: 4px 0 0 38px; margin: 0 0 10px 0; line-height: 1.5; font-size: 24px; color: #508CF0; font-weight: normal; } .table-quarter td { padding: 0 20px 10px; vertical-align: top; } .table-quarter td:nth-child(2n) { padding: 0 0 40px 0; } .p-main { line-height: 1.5; font-size: 14px; color: #636363; margin: 0 0 15px 0; } .bn-marugoto { display: block; margin: 40px 0 0 0; } @media screen and (max-width: 992px) { .table-quarter h3.h-drop { font-size: 2.1rem; } } @media screen and (max-width: 768px) { #about-course h2 { font-size: 2.5rem !important; } .table-quarter td { padding: 0 0 10px; } } @media screen and (max-width: 576px) { .table-quarter h3.h-drop { font-size: 1.8rem; font-weight: bold; } } /* コミュニティ */ .table-triple { width: 100%; } .table-triple td { width: 286px; vertical-align: top; padding: 0 15px 0 0; } .table-triple td:last-child { width: 288px; padding: 0 0 0 15px; } .table-triple td:nth-child(2n) { width: 286px; padding: 0 15px 0 15px; } .table-triple h3.h-drop { background: url(../img/icon_bubble.png) left center no-repeat; padding: 4px 0 0 38px; margin: 0 0 25px 0; line-height: 1.5; font-size: 24px; color: #5A73EB; font-weight: normal; } h3.h-drop_2, .table-triple h3.h-drop, .course-detail h4.h-drop { background: url(../img/icon_bubble.png) left center no-repeat; padding: 4px 0 0 38px; margin: 0 0 25px 0; line-height: 1.5; font-size: 24px; color: #5A73EB; font-weight: normal; } .btn-search-comm-box { margin: 40px auto 40px auto; text-align: center; display: table; } .btn-search-comm { border-radius: 2px; padding: 20px 40px; font-weight: normal; color: #FFF; font-size: 25px; display: table-cell; vertical-align: middle; box-shadow: 0 3px 0 0 rgba(0,0,0,0.3); background: #58cee2; background: -moz-radial-gradient(top, ellipse cover, #4ba2f7 0%, #5c76e8 100%); background: -webkit-gradient(radial, center top, 0px, center center, 100%, color-stop(0%,#4ba2f7), color-stop(99%,#5c76e8)); background: -webkit-radial-gradient(top, ellipse cover, #4ba2f7 0%,#5c76e8 100%); background: -o-radial-gradient(top, ellipse cover, #4ba2f7 0%,#5c76e8 100%); background: -ms-radial-gradient(top, ellipse cover, #4ba2f7 0%,#5c76e8 100%); background: radial-gradient(ellipse at top, #4ba2f7 0%,#5c76e8 100%); } .btn-search-comm:hover { text-decoration: none; color: #FFF; } .btn-search-comm-reg { border-radius: 2px; padding: 20px 40px; font-weight: normal; color: #FFF; font-size: 25px; display: table-cell; vertical-align: middle; box-shadow: 0 3px 0 0 rgba(0,0,0,0.3); background: #58cee2; background: -moz-radial-gradient(top, ellipse cover, #58cee2 0%, #1db4d5 100%); background: -webkit-gradient(radial, center top, 0px, center center, 100%, color-stop(0%,#58cee2), color-stop(99%,#1db4d5)); background: -webkit-radial-gradient(top, ellipse cover, #58cee2 0%,#1db4d5 100%); background: -o-radial-gradient(top, ellipse cover, #58cee2 0%,#1db4d5 100%); background: -ms-radial-gradient(top, ellipse cover, #58cee2 0%,#1db4d5 100%); background: radial-gradient(ellipse at top, #58cee2 0%,#1db4d5 100%); } .btn-search-comm-reg:hover { text-decoration: none; color: #FFF; } #tab2 .com_btn { background-image: url(/img/bg_tab_2_on.png); width: 300px; height: 80px; } /* JF日本語学習サイト */ .table-triple { width: 100%; table-layout: fixed; } .table-triple td { width: 280px; vertical-align: top; padding: 0 27px 30px 0; } .table-triple td:nth-child(2n) { width: 280px; padding: 0 18px 0 9px; } .table-triple td:nth-child(3n) { width: 280px; padding: 0 9px 0 17px; } #tab3 img.dummy { width: 100%; height: 160px; background: #DCDDDD; } #tab3 .table-triple a { color: #0000FF; font-size: 18px; margin: 15px 0; display: block; text-decoration: underline; } #tab3 .table-triple a:hover { text-decoration: none; } #tab3 .card { max-width: 283px; width: 100%; } #tab3 .card-title a { font-size: 18px; color: #00f; text-decoration: underline; } /* みなととは */ .about-box { margin: 0 0 40px 0; } .about-box h3.h-drop { background: url(../img/icon_bubble.png) left center no-repeat; padding: 4px 0 0 38px; margin: 0 0 25px 0; line-height: 1.5; font-size: 24px; color: #00AADC; font-weight: normal; text-align: left; } .about-box h3.h-drop_2 { background: url(../img/icon_bubble.png) left center no-repeat; padding: 4px 0 0 38px; margin: 0 0 25px 0; line-height: 1.5; font-size: 24px; color: #5A73EB; font-weight: normal; } .about-box h3.h-nodrop { padding: 4px 0 0 0; margin: 0 0 25px 0; line-height: 1.5; font-size: 24px; color: #00AADC; font-weight: bold; } .p-large { line-height: 1.7; font-size: 16px; color: #636363; margin: 0 0 15px 0; text-align: justify; text-justify: inter-ideograph; } html[lang="th"] .p-large { line-height: 1.7; font-size: 16px; color: #636363; margin: 0 0 15px 0; text-align: justify; text-justify: inter-cluster; } #tab2 .p-large, #tab3 .p-large, #tab4 .p-large { line-height: 1.7; font-size: 1.5rem; } #tab2 .com_btn, #tab4 .reg_btn { margin-top: 40px; font-size: 25px; } #tab3 .card-title a { font-size: 1.6rem; font-weight: bold; text-decoration: none; color: #4664c8; } #tab4 .movie img { max-width: 473px; width: 100%; } #tab4 .reg_btn { width: 300px; height: 80px; background: radial-gradient(ellipse at top, #58cee2 0%, #1db4d5 100%); margin-top: 10px; } /* Bootstrapのブレイクポイントより。Extra large（≥1020px） */ @media screen and (max-width: 1020px) { #tab1 .tab-box, #tab2 .tab-box, #tab3 .tab-box, #tab4 .tab-box { padding: 5rem 3rem 3rem; } #tab2 h3, #tab4 h3 { font-size: 24px; } #tab3 .card-title a { line-height: 1; font-size: 15px; } .course-detail h4.h-drop { margin: 0 0 10px; } #tab1 .mb-4half, #tab2 .mb-4half, #tab3 .mb-4half, #tab4 .mb-4half { margin-bottom: 4rem; } #tab2 .com_btn, #tab4 .reg_btn { margin-top: 35px; font-size: 22px; } } /* headerのブレイクポイント1000pxに合わせる */ @media screen and (max-width: 999px) { #tab1 .tab-box h2, #tab2 .tab-box h2, #tab3 .tab-box h2, #tab4 .tab-box h2 { font-size: 3.1rem; } #tab2 h3, #tab4 h3 { font-size: 2.1rem; } #tab3 .card-text { line-height: 1.4; } } /* Bootstrapのブレイクポイントより。Medium（≥768px） */ @media screen and (max-width: 768px) { #tab1 .tab-box { padding: 1rem 2rem 3rem; } #tab2 .tab-box, #tab3 .tab-box, #tab4 .tab-box { padding: 3rem 2rem 3rem; } #tab3 .card-title a { line-height: 1; font-size: 15px; } } /* Bootstrapのブレイクポイントより。Small（≥576px） */ @media screen and (max-width: 576px) { #tab1 .tab-box { padding: 1.5rem 1rem 2rem; } #tab2 .tab-box, #tab3 .tab-box, #tab4 .tab-box { padding: 1.5rem 1.5rem 2rem; } #tab2 h3, #tab4 h3 { font-size: 1.8rem; font-weight: bold; } #tab1 .mb-4half, #tab2 .mb-4half, #tab3 .mb-4half, #tab4 .mb-4half { margin-bottom: 2rem; } #tab2 .com_btn, #tab4 .reg_btn { margin-top: 50px; width: 250px; height: 70px; font-size: 18px; } #tab3 .p-large { line-height: 1.3; } #tab3 .card { max-width: 95% !important; } #tab4 .row { display: block; margin: 0; } #tab4 .col { padding: 0; } .p-large, html[lang="th"] .p-large { line-height: 1.4; font-size: 13px; } } /* 今日のことば */ .custombox-modal-container { margin-top: 0 !important; width: 100% !important; } #tw-overlay { z-index: 999; display: none; position: fixed; top: 0; left: 0; width: 100%; height: 120%; background-color: rgba(0,0,0,0.75); } #tw-overlay2 { z-index: 15001; display: none; position: fixed; top: 0; left: 0; width: 100%; height: 120%; background-color: rgba(0,0,0,0.75); } #todaysword { width: 880px; height: auto; position: relative; z-index: 1000; display: none; top: 0; left: 0; text-align: left; } #todaysword .tw-header { position: relative; } #todaysword .tw-body { position: relative; background: url(../img/bg_tw.png) no-repeat center top; padding: 0 0 0 0; width: 890px !important; height: 585px; margin: 0 auto; } #todaysword .tw-body-content { position: relative; margin: 60px auto 0; width: 450px; height: 530px; z-index: 2; } #todaysword .tw-body-content .tw-close { width: 36px; height: 36px; font-size: 26px; box-sizing: border-box; border: 1px solid #FFF; border-radius: 50%; color: #FFF; display: block; position: absolute; right: -134px; top: -58px; text-align: center; } #todaysword .tw-body-content .tw-close .glyphicon { line-height: 33px !important; } #todaysword .tw-body-content h2 { font-size: 30px; color: #FFF; text-decoration: underline; padding: 12px 0 20px 40px; } #todaysword .tw-body-content #tw-photo { cursor: pointer; position: absolute; width: 150px; height: 150px; background: #000; right: -147px; bottom: 142px; display: table; } #todaysword .tw-body-content #tw-photo .zoom-up-inner { width: 100%; height: 100%; position: absolute; bottom: 0; left: 0; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; transition: all 0.2s ease-out; background: rgba(255,255,255,0); } #todaysword .tw-body-content #tw-photo .zoom-up-inner i { -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; transition: all 0.2s ease-out; opacity: 0; position: absolute; top: 50%; left: 50%; margin-top: -15px; margin-left: -15px; font-size: 30px; color: #333; } #todaysword .tw-body-content #tw-photo:hover .zoom-up-inner { background: rgba(255,255,255,0.5); } #todaysword .tw-body-content #tw-photo:hover .zoom-up-inner i { opacity: 1; } #todaysword .tw-body-content #tw-photo span { display: table-cell; vertical-align: middle; text-align: center; width: 150px; height: 150px; } #todaysword .tw-body-content #tw-photo img { width: 100%; height: 100%; visibility: hidden; } #todaysword .tw-body-content #tw-txt { position: relative; padding-top: 150px; margin: 0 auto; width: 390px; } #todaysword .tw-body-content #zoomup { position: absolute; bottom: 0px; right: 4px; font-size: 30px; color: #FFF; } #tw-photo-zoom { width: 480px !important; height: 480px; background: url(../img/bg_tw_ph_zoom.png) no-repeat center center; background-size: cover; display: none; position: fixed; text-align: center; top: 50%; left: 50%; margin-top: -240px; margin-left: -240px; z-index: 15002; } #tw-photo-zoom #tw-photo { width: 474px !important; height: 474px; background: #000; display: table; text-align: center; margin: 3px auto; } #tw-photo-zoom span { display: table-cell; vertical-align: middle; text-align: center; width: 474px !important; height: 474px; } #tw-photo-zoom img { width: auto; height: auto; } .zoom-close { width: 36px; height: 36px; font-size: 26px; box-sizing: border-box; border: 1px solid #FFF; border-radius: 50%; color: #FFF; display: block; position: absolute; right: 8px; top: 8px; text-align: center; } .zoom-close:hover { color: #FFF; } .zoom-close .glyphicon { line-height: 33px !important; } #todaysword .tw-body-content h3 { font-size: 26px; margin: 20px 0 10px 0; color: #FFF; text-align: center; border-bottom: 1px solid #3f71ce; } #todaysword .tw-body-content h3 span { display: block; font-size: 22px; margin: 5px 0 10px 0; color: #FFF; text-align: center; font-weight: normal; } #todaysword .tw-body-content .tw-exp { font-size: 18px; color: #FFF; line-height: 1.7; } #todaysword .tw-footer { position: absolute; bottom: 0; left: 0; z-index: 1; } #todaysword img.dummy { width: 100%; height: 300px; background: #DCDDDD; } #todaysword .btn-todaysword-box { clear: both; } #todaysword .btn-todaysword-box { margin: 40px auto 0px auto; text-align: center; display: table; } #todaysword .btn-app-next { position: absolute; bottom: 70px; left: 170px; z-index: 2; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } #todaysword .btn-app-next span { color: #FFF; font-weight: bold; text-shadow: 0px 1px 2px black; position: absolute; font-size: 16px; letter-spacing: 1px; top: 47px; left: 20px; } #todaysword .tw-body .btn-app-next span.next-harbor-en { top: 32px; text-align: center; } #todaysword .btn-app-next.disable { opacity: 0.3; } a.btn-app-next:hover { -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -ms-transform: scale(0.9); transform: scale(0.9); } a.btn-app-next:focus { text-decoration: none; color: #FFF; } #todaysword .btn-app-next-msg { position: absolute; color: #e6f6ff; font-size: 12px; width: 200px; text-align: center; line-height: 1.5; bottom: 25px; left: 124px; } #header-floating .ul-header-nav li a.header-btn.mypage-btn span { background: #58cee2; background: -moz-radial-gradient(top, ellipse cover, #58cee2 0%, #1db4d5 100%); background: -webkit-gradient(radial, center top, 0px, center center, 100%, color-stop(0%,#58cee2), color-stop(99%,#1db4d5)); background: -webkit-radial-gradient(top, ellipse cover, #58cee2 0%,#1db4d5 100%); background: -o-radial-gradient(top, ellipse cover, #58cee2 0%,#1db4d5 100%); background: -ms-radial-gradient(top, ellipse cover, #58cee2 0%,#1db4d5 100%); background: radial-gradient(ellipse at top, #58cee2 0%,#1db4d5 100%); } /*トップページコースパネル*/ .course-data-box .img-resize { display: inline-block; background-color: #FFF; background-position: center center; background-repeat: no-repeat; background-size: contain; } .course-data-box .img-course { width: 100%; height: 0; padding-top: 57.142%; /* 表示画像の高さ ÷ 表示画像の幅 × 100 */ } /*コース詳細*/ .course-detail .img-resize { display: inline-block; background-color: #FFF; background-position: center center; background-repeat: no-repeat; background-size: contain; } .course-detail .img-course-detail { width: 280px; height: 160px; margin: 30px auto; } .course-detail .img-profile-user { width: 150px; height: 150px; } .required { color: #ed4040; } /* Bootstrapのブレイクポイントより。Large（≥992px） */ @media screen and (max-width: 992px) { .custombox-modal-wrapper { overflow: hidden; } #todaysword .tw-body { background-size: 768px; } } /* Bootstrapのブレイクポイントより。Medium（≥768px） */ @media screen and (max-width: 768px) { .custombox-modal #todaysword img { width: 80%; } #todaysword .tw-body { width: 576px !important; height: auto !important; background-size: 576px !important; } #todaysword .tw-body-content { margin: 50px auto 0; width: 284px; height: 400px; } #todaysword .tw-body-content .tw-close .glyphicon { line-height: 33px !important; } #todaysword .tw-body-content #tw-photo { width: 98px; height: 98px; right: -104px; bottom: 154px; } #todaysword .tw-body-content #tw-photo span { width: 98px; height: 98px; } #todaysword .tw-body-content #tw-txt { padding-top: 100px; width: 100%; } #todaysword .tw-body-content h3 { font-size: 2rem; margin: 0 0 0.5rem; } #todaysword .tw-body-content h3 span { font-size: 1.8rem; margin: 5px 0; } #todaysword .tw-body-content .tw-exp { font-size: 1.4rem; line-height: 1.5; padding-top: 0.5rem; } #todaysword .btn-app-next { width: 120px; margin: 0 auto; text-align: center; left: 0; right: 0; } #todaysword .btn-app-next span.next-harbor-jp { font-size: 1.3rem !important; top: 45px !important; left: 0; right: 0; } #todaysword .btn-app-next span.next-harbor-en { font-size: 1.3rem !important; top: 30px !important; left: 0; right: 0; } #todaysword .btn-app-next-msg { margin: 0 auto; top: 344px; left: 0; right: 0; } } /* Bootstrapのブレイクポイントより。Small（≥576px） */ @media screen and (max-width: 576px) { .custombox-modal #todaysword img { width: 60%; } #todaysword .tw-body { width: 320px !important; height: auto !important; background-size: 320px !important; } #todaysword .tw-body-content { width: 250px; height: 275px; } #todaysword .tw-body-content .tw-close { width: 30px; height: 30px; font-size: 22px; top: -68px; right: -25px; } #todaysword .tw-body-content #tw-photo { width: 54px; height: 54px; right: -11px; bottom: 161px; } #todaysword .tw-body-content #tw-photo span { width: 54px; height: 54px; } #todaysword .tw-body-content #tw-txt { width: 156px; padding-top: 24px; } #todaysword .tw-body-content h3 { font-size: 1.2rem; line-height: 1.2rem; margin: 0.5rem 0; } #todaysword .tw-body-content h3 span { font-size: 1.2rem; margin: 3px 0 5px; } #todaysword .tw-body-content .tw-exp { font-size: 1rem; line-height: 1.4; margin-top: 0; } #todaysword .tw-body-content .tw-exp br { display: none; } #todaysword .tw-body-content .tw-close .glyphicon { line-height: 27px !important; } #todaysword .btn-app-next { top: 127px; } #todaysword .btn-app-next.disable { opacity: 0.8; } #todaysword .btn-app-next span.next-harbor-jp { font-size: 0.8rem !important; top: 33px !important; } #todaysword .btn-app-next span.next-harbor-en { font-size: 0.8rem !important; top: 22px !important; } #todaysword .btn-app-next-msg { line-height: 1.4; top: 200px; } #tw-photo-zoom { width: 300px !important; height: 300px; margin-top: -150px; margin-left: -150px; } #tw-photo-zoom #tw-photo { width: 300px !important; height: 300px; } #tw-photo-zoom span { width: 300px !important; height: 300px; } .zoom-close { width: 30px; height: 30px; font-size: 22px; } .zoom-close .glyphicon { line-height: 26px !important; } } /*ヘッダーレスポンシブ用*/ nav#globalMenuSp { position: fixed; z-index: 20000; left: 60%; color: #000; text-align: center; transform: translateX(100%); transition: all 0.6s; width: 45%; height: calc(100% - 75px); /* 75px: header-inner-responsive */ overflow-y: scroll; } nav#globalMenuSp ul { position: relative; margin: 0 auto; padding: 0; width: 100%; overflow: auto; } nav#globalMenuSp ul li { list-style-type: none; padding: 0; width: 100%; border-bottom: 1px solid #fff; } nav#globalMenuSp ul li.separator { background-color: cadetblue; height: 0.4rem; } nav#globalMenuSp ul li:last-child { padding-bottom: 0; border-bottom: none; } nav#globalMenuSp ul li a, nav#globalMenuSp ul li.nickname { display: block; color: #000; padding: 1.4rem 0.4rem; text-decoration: none; line-height: 1.6rem; } nav#globalMenuSp ul li a:hover { background: #ddd; } nav#globalMenuSp.active { transform: translateX(-10%); } @media screen and (max-width:1024px) { .header-nav-responsive { right: 10px; } } @media screen and (min-width: 1000px) { .header-member .for-pc { display: block !important; } .header-member .for-sp { display: none !important; } .pc-button { display: block !important; } .sp-button { display: none !important; } } @media screen and (max-width: 999px) { .header-member .for-pc, .header-non-member .header-text.for-pc { display: none !important; } .header-member .for-sp { display: block !important; } .header-nav-responsive { top: 7px; right: 50px; } .header-nav-responsive select, .header-nav-responsive select[disabled] { width: 253px; } .pc-button { display: none !important; } .sp-button { display: inline-block !important; } .header-nav-responsive { top: 7px; right: 50px; } .header-nav-responsive select { width: 253px; } .header-nav-responsive .ul-header-nav-responsive li { margin: 0 1rem 0 0; } .header-nav-responsive .ul-header-nav-responsive .header-text { margin-top: 1rem; } .header-nav-responsive .ul-header-nav-responsive .select-box { margin-top: 0.6rem; } .header-nav-responsive .ul-header-nav-responsive .select-box select { float: right; } #header .nav_btn, #header-floating .nav_btn { width: 44px; height: 44px; z-index: 300; top: 7px; right: 7px; cursor: pointer; position: absolute; } .header-nav-responsive .header-member .header-mypage a, .header-nav-responsive .header-member .header-application a { width: 13rem !important; } .humberger { background-color: whitesmoke; } .hamburger_line { transition: all 0.6s; width: 34px; height: 2px; left: 5px; background-color: #000; position: absolute; } .hamburger_line1 { top: 10px; } .hamburger_line2 { top: 21px; } .hamburger_line3 { top: 32px; } .nav_open .nav_bg { opacity: 0.8; visibility: visible; } .nav_open .hamburger_line1 { transform: rotate(45deg); top: 20px; } .nav_open .hamburger_line2 { width: 0; left: 50%; } .nav_open .hamburger_line3 { transform: rotate(-45deg); top: 20px; } .header-nav-responsive .ul-header-nav-responsive { display: block; } .header-nav-responsive .ul-header-nav-responsive li.select-box { display: block; } .nav_btn { margin-top: 0.85rem; } } /*SPメニュー*/ @media screen and (min-width: 768px) { .sub-select { display: none; } .top-page-footer .for-pc, .sub-page-footer .for-pc { display: flex; justify-content: center; } #toppage-tab.for-pc { display: block !important; } .header-non-member .for-sp, .top-page-footer .for-sp, .sub-page-footer .for-sp, .tab-label, .jp-course-sp { display: none !important; } .ul-nav-footer-sns .for-pc { display: inline-block !important; } } @media screen and (max-width: 768px) { #content-inner { min-height: calc(100vh - 80px - 124px - 25px); /* header - JapanFoundationLogo - copyRight */ } .sub-select { display: block; } .header-non-member .for-pc, .top-page-footer .for-pc, .sub-page-footer .for-pc, #toppage-tab.for-pc, .tab-box .for-pc { display: none !important; } .header-non-member .for-sp, .top-page-footer .for-sp, .sub-page-footer .for-sp, .tab-label, .jp-course-sp { display: block !important; } #tab1 .tab-label { background: rgb(84,148,241); background: linear-gradient( 65deg, rgba(84,148,241,1) 0%, rgba(104,198,250,1) 100%); } #tab1 .jp-course-sp a { cursor: pointer; font-size: 1.6rem; text-decoration: underline !important; } #tab2 .tab-label { background: rgb(142,163,248); background: linear-gradient( 65deg, rgba(91,116,235,1) 0%, rgba(142,163,248,1) 100%); } #tab3 .tab-label { background: rgb(72,105,203); background: linear-gradient( 65deg, rgba(72,105,203,1) 0%, rgba(91,157,239,1) 100%); } #tab4 .tab-label { background: rgb(9,174,222); background: linear-gradient( 65deg, rgba(9,174,222,1) 0%, rgba(109,216,245,1) 100%); } .tab-label h2 { font-size: 1.7rem; } #content.tab1, #content.tab2, #content.tab3, #content.tab4 { border-top: none; } #content-footer img { width: 85%; } .footer-inner-responsive { padding: 0; } .top-page-footer { padding: 10px 0 !important; } .sub-page-footer { padding: 0; } #footer .ul-nav-footer-sns { text-align: center; margin: 0; } #footer .copyright-responsive { font-size: 0.8rem; line-height: 1.5rem; padding: 0.5rem; } } @media screen and (max-width: 576px) { .tab-label h2 { font-size: 1.5rem; } #tab1 .jp-course-sp a { font-size: 1.4rem; } .header-nav-responsive .header-regist, .header-nav-responsive .header-mypage-sub { width: 112px; } .header-nav-responsive .header-login, .header-nav-responsive .header-logoff { width: 10rem; } .header-nav-responsive .header-member .header-mypage a, .header-nav-responsive .header-member .header-application a { width: 10rem !important; } .header-nav-responsive select, .header-nav-responsive select[disabled] { width: 205px; } } @media screen and (max-width: 412px) { .header-inner-responsive .logo-jf, #header-floating .logo-jf { margin-left: 0.4rem; } #header-floating .ul-header-nav-responsive li a.header-btn { padding-left: 0.2rem !important; padding-right: 0.2rem !important; } .header-nav-responsive { right: 50px; } .header-nav-responsive select, .header-nav-responsive select[disabled] { width: 200px; } .header-nav-responsive .header-member .header-mypage a, .header-nav-responsive .header-member .header-application a, .header-nav-responsive .header-btn-account { min-width: 80px; white-space: nowrap; padding: 0 0.2rem; } .header-nav-responsive .ul-header-nav-responsive li { margin: 0 0.4rem 0 0; } .header-nav-responsive .nav_btn { right: 4px; } .header-nav-responsive .header-login, .header-nav-responsive .header-logoff { width: 10rem; } } @media screen and (max-width: 340px) { #content-inner { min-height: calc(100vh - 80px - 124px - 40px); /* header - JapanFoundationLogo - copyRight */ } .header-inner-responsive .logo-jf .for-sp-logo img { width: auto; height: 40px; } } @charset 'utf-8'; /*-------------------------------------------------- * * jquery.scrollButton.js * Sample CSS * --------------------------------------------------*/ .fadeTopBtn { right: 0; z-index: 100; } .fadeTopBtn a { display: block; background: url(../img/btn_backtotop.png) no-repeat center top; width: 67px; height: 70px; text-indent: 5000px; } .fadeTopBtn a:link { color : #fff; } .fadeTopBtn a:visited { color : #fff; } .fadeTopBtn a:active { color : #fff; } .fadeTopBtn a:hover { color : #fff; } /* pages.css */ /* pages common */ .pages #wrapper { background: #FFF; } .pages #header { background: url(../img/bg_pages_header.png) repeat-x center top #FFF; } .pages .header-shadow { width: 1000px; } .pages #content-inner { width: 1000px; margin: 0 auto; padding: 0 0 100px 0; position: relative; } .pages .content-inner-responsive { max-width: 1000px; width: 100%; margin: 0 auto; padding: 0 0 100px 0; position: relative; } .pages #footer { background: url(../img/bg_pages_footer.png) repeat-x center bottom #FFF; } .pages #footer-inner { padding: 50px 0 50px 0; } .pages .footer-bn { text-align: center; margin: 20px 0 0 0; } .pages .footer-bn a { padding: 0; } .pages .h-drop { background: url(../img/icon_bubble.png) left center no-repeat; padding: 4px 0 0 38px; margin: 0 0 25px 0; line-height: 1.5; font-size: 24px; color: #508CF0; font-weight: normal; } /* コース詳細 */ .course-detail { max-width: 930px; width: 100%; margin: 0 auto; } .course-detail .course-id { font-size: 16px; } .course-detail .right li { line-height: 1.3; word-break: break-word; } .course-detail .right .course-detail-title { font-weight: bold; } .course-detail .course-title { color: #508cf0; font-size: 40px; line-height: 1.37; padding: 10px 0 40px; } .course-detail .course-box { margin: 0 0 50px 0; } .course-detail .right .course-box ul li { font-size: 1.6rem; } .course-detail .ph-box { margin: 0 0 20px 0; display: table; width: 100%; } .course-detail .ph { display: table-cell; vertical-align: middle; text-align: right; } .course-detail .teacher-name { display: table-cell; vertical-align: middle; font-size: 20px; font-weight: bold; text-align: left; color: #636363; } .course-detail .word-break { word-break: break-word; } .course-detail .borders { border: 1px solid #ededed; } .course-detail .overflow-wrap-btn { white-space: pre-line; overflow-wrap: break-word; } .course-detail .btn-signup { border-radius: 2px; height: 36px; width: 320px; color: #FFF; font-size: 16px; text-align: center; display: table-cell; vertical-align: middle; box-shadow: 0 1px 1px 0 rgba(0,0,0,0.4); background: #58cee2; background: -moz-radial-gradient(top, ellipse cover, #58cee2 0%, #1db4d5 100%); background: -webkit-gradient(radial, center top, 0px, center center, 100%, color-stop(0%,#58cee2), color-stop(99%,#1db4d5)); background: -webkit-radial-gradient(top, ellipse cover, #58cee2 0%,#1db4d5 100%); background: -o-radial-gradient(top, ellipse cover, #58cee2 0%,#1db4d5 100%); background: -ms-radial-gradient(top, ellipse cover, #58cee2 0%,#1db4d5 100%); background: radial-gradient(ellipse at top, #58cee2 0%,#1db4d5 100%); } .course-detail .btn-signup:hover { text-decoration: none; } .course-detail .course-img { margin: 30px 0; } .course-detail .img-course-detail { width: 280px; height: 160px; margin: 30px auto; } .course-detail .disabled-btn { background-color: gray !important; border-color: gray !important; font-size: 2.3rem !important; } .course-detail iframe { max-width: 290px; max-height: 163px; width: 100%; height: 100%; } @media screen and (max-width: 992px) { .course-detail { padding: 0 15px; } .course-detail .course-id { font-size: 1.4rem; } .course-detail .course-title { font-size: 3rem; padding-top: 30px; font-weight: 600; } .course-detail .course-box .h-drop { font-weight: 600; font-size: 2rem; } } @media screen and (min-width: 768px) { .course-detail .for-pc { display: block !important; } .course-detail .for-sp { display: none !important; } } @media screen and (max-width: 767px) { .course-detail .for-pc { display: none !important; } .course-detail .for-sp { display: block !important; } .attention { font-size: 1.4rem !important; color: darkorange; margin-bottom: 15px !important; } .course-detail .course-title { font-size: 2.8rem; padding: 20px 0 20px; } .course-detail .img-course-detail { width: 280px; height: 160px; margin: 0 auto 2.5rem; } } @media screen and (max-width: 576px) { .course-detail { width: 100%; padding: 0 15px; } .course-detail .course-id { font-size: 1.3rem; } .course-detail .course-title { font-size: 2.3rem; line-height: 1.2; padding: 20px 0 15px; } .course-detail .course-box { margin: 0 0 20px 0; } .course-detail .course-box .h-drop { font-size: 1.8rem; } .course-detail .course-box .p-large { line-height: 1.4; } .course-detail .right .course-box ul li { font-size: 1.4rem; } .course-detail .disabled-btn { font-size: 2.3rem; padding: 12px 0 !important; } .course-detail .img-course-detail { width: 230px; height: 131px; margin: 0 auto 2rem; } .course-detail .ph-box { display: block; } .course-detail .teacher-name { display: block; } .course-detail .ph { display: block; text-align: left; margin-top: 15px; } .course-detail .for-sp .conversion-button { font-size: 2.3rem; } } .table-course-detail { width: 100%; } .table-course-detail th, .table-course-detail td { font-size: 16px; padding: 0 0 28px 0; line-height: 1.5; } .table-course-detail td { text-align: right; } .course-movie .movie-title { color: #FFF; line-height: 1.5; padding: 4px 10px; background: #000; font-size: 16px; } /* アプリケーション一覧 */ .application-list { max-width: 1000px; width: 100%; margin: 0 auto; } .application-list .app-container-btn { background: none !important; border: none !important; outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; margin-bottom: 3rem; } .application-list .pages-title { color: #508cf0; font-size: 30px; text-align: left; margin: 6rem 0; } .application-box { margin: 0 0 80px 0; display: table; } .app-ph { margin: 0 0 20px 0; } .application-box .app-name-box .app-name { color: #508cf0; font-size: 20px; margin: 0 0 15px 0; line-height: 1.37; } .app-star { padding: 4px 4px 2px 0; color: #636363; font-size: 18px; letter-spacing: 2px; margin: 0 0 0 0; } .app-star-sp { display: inline-block; background-color: #2980ff; /*background-color: #FFB800;*/ border-radius: 0.3rem; padding: 0.5rem 0.5rem 0.3rem; color: #fff !important; font-size: 1.3rem; } .app-store { display: flex; align-items: center; justify-content: center; margin: 0 auto; } .badge-app-box { width: 100%; } .badge-app-box a { margin: 0 0 0 10px; display: inline-block; } .badge-app-box a img { width: auto; height: 45px; } .kindleWidget { vertical-align: middle; } .app-exp { clear: both; font-size: 16px; color: #636363; line-height: 1.5; text-align: justify; } .application-box .app-name-box { padding: 0 0 0 20px; } .application-list .btn { font-size: 14px; color: #fff; padding: 6px 14px; border: 1px solid #28a4c9; border-radius: 4px; transition: none; white-space: pre-line; } .application-list .btn-info { color: #fff; background-color: #5bc0de; border-color: #46b8da; } .application-list .btn-info:hover { color: #fff; background-color: #31b0d5; border-color: #269abc; } .application-list .btn-white, .jp-course-list .btn-white { background-color: #fff !important; color: #31b0d5 !important; border: 2px solid #31b0d5 !important; } .jp-course-list .btn { padding-left: 3rem !important; padding-right: 3rem !important; } .application-list .btn-white:hover, .jp-course-list .btn-white:hover { background-color: #31b0d5 !important; color: #fff !important; border: 2px solid #31b0d5 !important; } .application-list .btn-lg { padding: 10px 16px; font-size: 18px; line-height: 1.3333333; border-radius: 6px; } .app-modal .modal-header { justify-content: end; } .app-modal .modal-dialog { min-width: 300px; margin: 0 auto !important; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) !important; -webkit-transform: translate(-50%, -50%) !important; -ms-transform: translate(-50%, -50%) !important; } .app-modal .modal-body { padding: 0 15px 15px !important; margin-top: 15px; } .app-modal .modal-body .app-ph { padding-right: 15px; } .app-modal .modal-body .app-name { font-size: 1.6rem; line-height: 1.4; } .app-modal .modal-body .app-exp { font-size: 1.4rem; } .app-modal .modal-body .badge-app-box a { margin: 0 0.3rem; display: inline-block; } /* Bootstrapのブレイクポイントより。Large（≥992px） */ @media screen and (max-width: 992px) { .application-list { padding-left: 15px; padding-right: 15px; } .application-box .app-name-box .app-name { font-size: 1.8rem; } .badge-app-box img { margin-bottom: 1rem !important; } } /* Bootstrapのブレイクポイントより。Medium（≥768px） */ @media screen and (max-width: 768px) { .application-box .row { justify-content: center; } .application-box .app-name-box { padding-left: 0; } .badge-app-box { text-align: center; } .app-modal .modal-dialog { max-width: 570px; width: 95% !important; } } /* Bootstrapのブレイクポイントより。Small（≤576px） */ @media screen and (min-width: 576px) { .application-list .for-pc { display: block !important; } .application-list .for-sp { display: none !important; } } @media screen and (max-width: 575px) { .application-list .for-pc { display: none !important; } .application-list .for-sp { display: block !important; } .application-list { min-width: 300px; padding-left: 10px; padding-right: 10px; } .application-list .app-container-btn { background-color: #F6F6F6 !important; border-radius: 0.8rem; width: 100%; margin-bottom: 1rem; } .application-list .pages-title { font-size: 2.5rem; font-weight: bold; margin-top: 1rem; margin-bottom: 3.5rem; /*margin: 4rem 0;*/ } .jp-course-list .btn { padding-left: 1rem !important; padding-right: 1rem !important; } .application-box { width: 100%; padding: 1rem 0.5rem 0; margin: 0; } .application-box .row { justify-content: flex-start; -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .app-ph { margin: 0 0 10px 0; padding-right: 10px !important; } .application-box .app-name-box { padding: 0 !important; } .application-box .app-name-box .app-name { font-size: 1.5rem !important; line-height: 1.25; margin: 0 0 10px 0; width: auto; } .app-exp { font-size: 1.4rem; line-height: 1.4; } .badge-app-box a { margin-left: 0.5rem; } .badge-app-box img { height: 35px !important; } .badge-app-box a img { width: auto; height: 40px; } .app-modal .modal-body .row { display: inline-flex !important; flex-wrap: nowrap; } } /*==================== 生島追加分 ====================*/ /*etc*/ .mt10 { margin-top: 10px !important; } .mt20 { margin-top: 20px !important; } .mt30 { margin-top: 30px !important; } .mt40 { margin-top: 40px !important; } .mt50 { margin-top: 50px !important; } .mt60 { margin-top: 60px !important; } .mt70 { margin-top: 70px !important; } .pt10 { padding-top: 10px !important; } .pt20 { padding-top: 20px !important; } .pt30 { padding-top: 30px !important; } .pt40 { padding-top: 40px !important; } .pt50 { padding-top: 50px !important; } .pt60 { padding-top: 60px !important; } .pt70 { padding-top: 70px !important; } .mb10 { margin-bottom: 10px !important; } .mb20 { margin-bottom: 20px !important; } .mb30 { margin-bottom: 30px !important; } .mb40 { margin-bottom: 40px !important; } .mb50 { margin-bottom: 50px !important; } .mb60 { margin-bottom: 60px !important; } .mb70 { margin-bottom: 70px !important; } .pb10 { padding-bottom: 10px !important; } .pb20 { padding-bottom: 20px !important; } .pb30 { padding-bottom: 30px !important; } .pb40 { padding-bottom: 40px !important; } .pb50 { padding-bottom: 50px !important; } .pb60 { padding-bottom: 60px !important; } .pb70 { padding-bottom: 70px !important; } .mr10 { margin-right: 10px !important; } .mr20 { margin-right: 20px !important; } .mr30 { margin-right: 30px !important; } .mr40 { margin-right: 40px !important; } .mr50 { margin-right: 50px !important; } .mr60 { margin-right: 60px !important; } .mr70 { margin-right: 70px !important; } .pr10 { padding-right: 10px !important; } .pr20 { padding-right: 20px !important; } .pr30 { padding-right: 30px !important; } .pr40 { padding-right: 40px !important; } .pr50 { padding-right: 50px !important; } .pr60 { padding-right: 60px !important; } .pr70 { padding-right: 70px !important; } .ml10 { margin-left: 10px !important; } .ml20 { margin-left: 20px !important; } .ml30 { margin-left: 30px !important; } .ml40 { margin-left: 40px !important; } .ml50 { margin-left: 50px !important; } .ml60 { margin-left: 60px !important; } .ml70 { margin-left: 70px !important; } .pl10 { padding-left: 10px !important; } .pl20 { padding-left: 20px !important; } .pl30 { padding-left: 30px !important; } .pl40 { padding-left: 40px !important; } .pl50 { padding-left: 50px !important; } .pl60 { padding-left: 60px !important; } .pl70 { padding-left: 70px !important; } .lh120 { line-height: 120% !important; } .lh130 { line-height: 130% !important; } .lh150 { line-height: 150% !important; } .clearfix:after { display: block; clear: both; height: 0px; visibility: hidden; content: "."; } .container-width { width: 1200px; margin: 0 auto; } .p0 { padding: 0 !important; } .pl0 { padding-left: 0 !important; } .Float-Left { float: left; } .Float-Right { float: right; } .text-Left { text-align: left; } .text-Right { text-align: right; } .text-Center { text-align: center; } .font-nomal { font-size: 16px !important; } .font-small { font-size: 14px !important; } .font-Vsmall { font-size: 12px !important; } .wh100 { width: 100%; } /*ログイン画面*/ .login-content-form { width: 1020px; margin: 0 auto; } .login-content-responsive-form { max-width: 1020px; width: 100%; margin: 0 auto; } .login-leftcontent { padding-left: 0; margin-top: 20px; } .login-leftcontent { padding-left: 15px; padding-right: 50px; } .login-leftcontent .form-group label { font-size: 16px; } .login-leftcontent .form-group .color-red { color: #FF0000; } .login-leftcontent .form-group .hint { font-size: 12px; float: right; margin-top: 4px; } .login-leftcontent .form-group .input-box { width: 270px; } .login-leftcontent .form-group .input-box .error-msg { white-space: nowrap; font-size: 15px; } .login-leftcontent .form-group .input-box input { max-width: 270px !important; } .login-leftcontent .form-group .textstyle { line-height: 1.42857143; } .h-5 { height: 5rem; } .login-rightcontent { margin: 20px 0 0; padding-left: 0 !important; } .login-content-form h4, .login-content-responsive-form h4 { font-size: 18px; font-weight: bold; } .login-content-form p, .login-content-responsive-form p { font-size: 16px; line-height: 1.2; } .login-content-buttom { text-align: center; } .login-content-buttom-two { text-align: left; } .login-content-buttom button { padding: 10px 50px; font-size: 16px; } .login-content-form h2, .login-content-responsive-form h2 { font-size: 26px; font-weight: bold; margin: 2.2rem 1.5rem 0; padding-bottom: 0.4rem; border-bottom: 1px solid #d3d3d3; } .content-footer-login { background-color: #FFFFFF; } .d-none { display: none !important; } .input-box_Password { position: relative; } #invisible, #visible, #invisible1, #visible1, #invisible2, #visible2 { position: absolute; font-size: 2rem; color: lightgray; cursor: pointer; } #invisible, #visible { top: 3.55rem; /*top: 2.85rem;*/ right: 1rem; } #invisible1, #visible1, #invisible2, #visible2 { top: 5.9rem; right: 1rem; } /*ユーザーID確認・新パスワード発行*/ .forgot-password { max-width: 1020px; width: 100%; margin: 0 auto; } .forgot-password .content-box { margin: 2rem 2.6rem 1rem; } .forgot-password h2 { font-size: 26px; font-weight: bold; margin: 2.2rem 1.5rem 0; padding-bottom: 0.4rem; border-bottom: 1px solid #d3d3d3; } .forgot-password #hTitle1, divTitle1 { font-size: 16px; font-weight: bold; margin: 10px; text-align: left; } .forgot-password #divDanger { font-size: 16px; margin: 10px 25px 10px 0; } .forgot-password h3 { font-size: 16px; font-weight: bold; } .forgot-password input { max-width: 400px; width: 100%; } .forgot-password .ul-default { margin: 1rem 0 2rem; } .forgot-password .ul-default li { font-size: 1.6rem; line-height: 1.5; margin: 0 5px 8px 30px; list-style-type: disc; } .forgot-password p { font-size: 1.6rem; line-height: 1.4; } /* Bootstrapのブレイクポイントより。Medium（≥768px） */ @media screen and (min-width: 768px) { .login-content-responsive-form .for-pc { display: block !important; } .login-content-responsive-form .for-sp { display: none !important; } } @media screen and (max-width: 767px) { .login-content-form, .login-content-responsive-form { width: 100%; } .login-content-responsive-form .for-pc { display: none !important; } .login-content-responsive-form .for-sp { display: block !important; } .login-content-form h2, .login-content-responsive-form h2, .forgot-password h2 { font-size: 2.4rem; } .login-content-form .attention, .login-content-responsive-form .attention { text-align: center; } .login-leftcontent { padding-right: 15px; } .login-leftcontent .form-group .input-box { max-width: 270px; width: 100%; margin: 0 auto; padding: 0 !important; } .login-rightcontent { margin: 30px auto 0; background-color: #FAFAFA; padding: 30px 80px 5px !important; } } /* Bootstrapのブレイクポイントより。Small（≥576px） */ @media screen and (max-width: 576px) { .login-content-form h2, .login-content-responsive-form h2, .forgot-password h2 { font-size: 2.2rem; padding-bottom: 8px; } .login-content-form .attention, .login-content-responsive-form .attention { text-align: center; } .login-content-form h4, .login-content-responsive-form h4 { font-size: 16px; } .login-leftcontent { padding: 0 15px; } .login-leftcontent .form-group .input-box { padding: 0; } .login-leftcontent .form-group .input-box .error-msg { white-space: normal; } .login-rightcontent { margin-top: 15px; padding: 30px 15px 5px !important; } .login-rightcontent p { font-size: 1.4rem; } .forgot-password .ul-default li { font-size: 1.4rem; margin: 0 0 0.8rem 2.6rem; } .forgot-password p { font-size: 1.4rem; line-height: 1.3; } } /* inputの幅が400以下になる時の指定 */ @media screen and (max-width: 400px) { .forgot-password .content-box { margin: 2rem 1.5rem 1rem; } .forgot-password #divDanger { margin: 10px 10px 10px 0; } } /*新規登録画面*/ .sign-up-form, .sign-up-comfirm, .sign-up-complete { max-width: 1020px; width: 100%; margin: 0 auto; } .sign-up-form h2, .sign-up-comfirm h2, .sign-up-complete h2 { font-size: 26px; font-weight: bold; margin: 2.2rem 1.5rem 0; padding-bottom: 0.4rem; border-bottom: 1px solid #d3d3d3; } .sign-up-form .text-black, .sign-up-comfirm .text-black { color: #000; } .sign-up-form .orange { color: darkorange; line-height: 1.4; } .sign-up-form .borders { border: 1px solid #ddd; } .sign-up-form .img-profile-user, .sign-up-comfirm .img-profile-user { width: 150px; height: 150px; } .sign-up-form .img-resize, .sign-up-comfirm .img-resize { display: inline-block; background-color: #FFF; background-position: center center; background-repeat: no-repeat; background-size: contain; } .sign-up-form .add-field { font-size: 1.6rem; word-break: break-word; min-height: 3.5rem; height: auto; padding: 1rem 12px 1rem; background-color: #f2f2f2; } .sign-up-form p { font-size: 16px; line-height: 1.2; } .sign-up-form .checkbox li { cursor: default; list-style: none; line-height: 1.5 } .sign-up-form .checkbox li span { color: #800080; font-size: 14px; text-decoration: none; } .sign-up-comfirm .row::before, .sign-up-confirm .row::after { display: none; } .sign-up-form .btn, .inquiry-form .btn, .confirm-form .btn, .jp-course-list .btn, .community-modal-responsive .btn { font-size: 14px; color: #fff; padding: 6px 14px; border: 1px solid #28a4c9; border-radius: 4px; transition: none; white-space: pre-line; } .sign-up-form .btn-lg, .inquiry-form .btn-lg, .confirm-form .btn-lg, .jp-course-list .btn-lg { padding: 10px 16px; font-size: 18px; line-height: 1.3333333; border-radius: 6px; } .sign-up-form .occupation + .btn-group .btn { display: inline-block; width: 100%; text-align: left; font-weight: 400; line-height: 1.5; color: #495057; border: 1px solid #ccc; vertical-align: middle; background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right 0.75rem center; background-size: 12px 10px; -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: default; } /* 選択時の枠線 */ .sign-up-form .occupation + .btn-group .btn:focus { border-color: #80bdff; } .sign-up-form .occupation + .btn-group .btn .caret, .sign-up-form .occupation + .btn-group .btn::after { display: none; } .sign-up-form .occupation + .btn-group .dropdown-menu { text-align: left; } .sign-up-form .occupation + .btn-group .dropdown-menu > li > a { padding: 0; } .sign-up-form .occupation + .btn-group .dropdown-menu > li > a label { cursor: default; } .sign-up-form .occupation + .btn-group .dropdown-menu > .active > a { background-color: lightgrey; background-image: none; color: black; } .sign-up-form .occupation + .btn-group .dropdown-menu > li:hover { box-shadow: 0 0 10px 100px #1882A8 inset; } .sign-up-form .occupation-selected { margin-top: -8px; } .regist-form-container .popover { top: -42.7344px !important; } .regist-form-container #occupationList .form-control { box-shadow: none !important; -webkit-transition: none !important; } .regist-form-container #occupationList .form-control:focus { border-color: #66afe9 !important; outline: 0 !important; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6) !important; box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6) !important; } .form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control { background-color: #f2f2f2 !important; font-size: 1.6rem; word-break: break-word; width: 100%; min-height: 3.5rem; height: auto; display: block; padding: 6px 12px; line-height: 1.42857143; color: #555; background-image: none; border: 1px solid #ddd; border-radius: 0; box-shadow: none; } .form-control::-moz-placeholder { color: #999; opacity: 1; } .form-control:-ms-input-placeholder, .form-control::-webkit-input-placeholder { color: #999; } .regist-form-container .caret { border: none !important; } .regist-form-container .multiselect { display: block; width: 100%; height: 34px; padding: 6px 12px; font-size: 14px; line-height: 1.42857143; color: #555 !important; background-color: #fff; background-image: none; border: 1px solid #ccc !important; border-radius: 4px; -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%); box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%); -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s; -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; margin-bottom: 15px; text-align: left; } /*セレクトボックスがクリックで閉じないため追加*/ .regist-form-container .multiselect-container { display: none; } .regist-form-container .multiselect-container > li > a > label.checkbox, .multiselect-container > li > a > label.radio { padding-left: 1rem; } .regist-form-container .multiselect-container input[type="checkbox"] { margin-top: 2px !important; } .regist-form-container .dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus { background-color: #A9A9A9 !important; background-image: none; font-weight: bold; } .regist-form-container .dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus { color: #000 !important; } .regist-form-container .btn-group { width: 100%; } .selectedJob { cursor: default !important; } .sign_up-form-botton { padding-top: 13px; } .sign_up-form-botton button { clear: none; padding: 0 20px; } .sign_up-form-title { padding: 15px 0; font-weight: bold; font-size: 16px; } .sign_up-form-title span, .asterisk { color: #ed4040; } .sign_up-form-Information { text-align: right; padding-top: 13px; } .sign_up-form-infomation-p p { padding-top: 60px; text-align: right; } .sign_up-period { font-size: 20px; padding-top: 9px; } .period { padding: 6px 0; } #myModal.account-regist { padding: 15px !important; } #myModal.account-regist .modal-dialog { max-width: 1030px; width: 100%; margin: 0 auto; position: relative; top: 50%; transform: translateY(-50%); } #myModal.account-regist .modal-dialog .modal-body img { max-width: 1000px; width: 100%; } .sign-up-form .birthday .sign_up-period { font-size: 18px; } .sign-up-form .birthday .select-field { padding-left: 0; } /*登録確認画面*/ .sign-up-comfirm p, .sign-up-complete p { font-size: 16px; line-height: 1.4; } .sign-up-comfirm .label-tag, .sign-up-comfirm .label-tag-two-lines { font-size: 10px; padding-left: 0; padding-right: 0; } .sign-up-comfirm .sign_up-form-title, .sign-up-comfirm .lh-12 { line-height: 1.2; } .sign-up-comfirm .pc-label { display: inline-block !important; } .sign-up-comfirm .sp-label { display: none !important; } .sign-up-comfirm .comfirm-sp-title { color: #333 !important; } /* Bootstrapのブレイクポイントより。Large（≥992px） */ @media screen and (max-width: 992px) { .sign-up-form .birthday .sign_up-period { font-size: 16px; } } /* Bootstrapのブレイクポイントより。Medium（≥768px） */ @media screen and (max-width: 768px) { .sign-up-form .birthday .sign_up-period { font-size: 13px; } .sign-up-form .birthday .select-field { padding-right: 0.7rem; } .sign-up-form h2, .sign-up-comfirm h2, .sign-up-complete h2 { font-size: 2.4rem; } .sign-up-form .img-profile-user, .sign-up-comfirm .img-profile-user { width: 125px; height: 125px; } .sign-up-form .jp-experience { display: block; text-align: left; } .sign-up-form .jp-experience .sign_up-form-title { padding-top: 0; margin-right: 15px; position: relative; top: 4px; } } /* Bootstrapのブレイクポイントより。Small（≥576px） */ @media screen and (max-width: 576px) { .sign-up-comfirm .pc-label { display: none !important; } .sign-up-comfirm .sp-label { display: inline-block !important; color: #fff !important; padding: 0.4em 0.6em 0.3em; vertical-align: middle; } .sign-up-comfirm .sign_up-form-title { padding: 15px 0 5px; } .sign-up-comfirm .comfirm-sp-title { color: #333 !important; margin-right: 15px; } .sign-up-form h2, .sign-up-comfirm h2, .sign-up-complete h2 { font-size: 2.2rem; padding-bottom: 8px; } .sign-up-form p, .sign-up-comfirm p, .sign-up-complete p { font-size: 14px; line-height: 1.2; font-weight: normal; } .sign-up-comfirm .label-tag-two-lines { font-size: 10px; margin-top: 0; margin-bottom: 1.8rem; padding-left: 15px; padding-right: 0; } .sign-up-form .jp-experience { text-align: right; } } /*お問合わせ(非ログインユーザー)*/ .change-login-form { margin: 20px 40px; } .change-login-form .change-form-group .change-formtitle { font-size: 14px; margin: 20px 10px; } .change-login-form .change-form-group label { margin: 20px 0; font-size: 14px; padding-left: 0; } .change-login-form .change-form-group .radio { margin-top: 0; } .change-login-form .change-form-group .form-control { margin: 10px 0; } .change-login-form p { font-size: 14px; } .contact-title h2 { font-size: 26px; font-weight: bold; padding-bottom: 16px; border-bottom: 1px solid #d3d3d3; margin: 0 40px; } /*お問合わせ*/ .inquiry-content-form { max-width: 1020px; width: 100%; margin: 0 auto; } .inquiry-content-form h2 { font-size: 26px; font-weight: bold; margin: 2.2rem 1.5rem 0; padding-bottom: 0.4rem; border-bottom: 1px solid #d3d3d3; } .info-head { margin: 20px 40px 20px 40px; border: 1px solid #CCC; padding: 20px; line-height: 1.2; } .info-head .text-bk-bold { color: black; font-weight: bold; } .inquiry-content-form p { font-size: 16px; line-height: 1.2; } .p-message { font-size: 16px; line-height: 1.5; } .contact-message, .text-red { color: red; } .inquiry-content-form .text-danger { margin: 10px 10px 10px 0 !important; } .inquiry-form { margin-left: 40px; margin-right: 40px; } .inquiry-form textarea { height: 214px; } .inquiry-form .require-id { font-size: 16px; color: red; } .inquiry-form label.form-check-label { font-weight: normal; } .conversion-button { font-size: 26px; font-weight: bold; } .confirm-form { line-height: 1.5; margin: 0 auto; } .confirm-form .form-group { margin-bottom: 35px; } .confirm-form .dd-text-size { font-size: 16px; } /* Bootstrapのブレイクポイントより。Medium（≥768px） */ @media screen and (max-width: 768px) { .inquiry-content-form h2 { font-size: 2.4rem; } .confirm-form .border-left { border-left: none; } } /* Bootstrapのブレイクポイントより。Small（≥576px） */ @media screen and (max-width: 576px) { .inquiry-content-form h2 { font-size: 2.2rem; padding-bottom: 8px; } .info-head { margin: 15px; padding: 15px; line-height: 1.8rem; } .info-head p { font-size: 1.4rem; } .inquiry-form { margin: 30px 15px 0; } } /*モーダル用スタイル*/ #open01, #open02, #open03, #open04, #open05 { top: 0; left: 0; width: 100%; height: 100%; display: none; position: absolute; } .close_overlay { top: 0; left: 0; width: 100%; height: 100%; display: block; text-indent: -9999px; position: absolute; background: #000; opacity: 0.5; z-index: 500; } .modal_window { top: 50%; left: 50%; margin: -150px 0 0 -200px; width: 300px; text-align: center; display: block; background: #fff; position: absolute; z-index: 10; } /*お問い合わせページ用のモーダル 上のスタイル（modal-window）を修正すると別ページで崩れる可能性があるため、 新規のクラスを下記に追加*/ .confirm-modal { top: 40% !important; left: 50% !important; margin: 0 auto !important; margin-left: -250px !important; padding: 0 !important; width: 500px !important; text-align: center !important; display: block !important; background: #fff !important; position: absolute !important; z-index: 1000 !important; } /* Bootstrapのブレイクポイントより。Small（≥576px） */ @media screen and (max-width: 576px) { .confirm-modal { margin-left: -150px !important; width: 300px !important; } } .modal_window h2 { margin-bottom: 20px; width: 300px; height: 50px; line-height: 30px; color: #fff; font-size: 14px; font-weight: bold; text-align: left; text-indent: 15px; background: #000; padding: 10px 0; } .modal_window p { padding: 0 15px 15px 15px; font-size: 12px; line-height: 160%; text-align: left; } @-webkit-keyframes modalFadeIn { 0% { opacity: 0; display: block; } 100% { opacity: 1; } } div#modal div:target { opacity: 1; display: block; } /*コースページボタンパターン*/ .right .course-box p, .course-detail .registered { font-size: 14px; margin-bottom: 20px; } .right .course-box .cancel { color: red; } .course-detail .registered { line-height: 20px; color: #e44e63; } /*ボタンの大きさ固定*/ .btn { min-width: 60px; } .last_btn { text-align: center; clear: both; } .last_btn .btn { width: 200px; } .last_btn_b { text-align: center; } .last_btn_b .btn { width: 250px; } /* Bootstrapのブレイクポイントより。Small（≥576px） */ @media screen and (max-width: 576px) { .sign-up-comfirm .last_btn .btn { width: 140px !important; white-space: pre-line; overflow-wrap: break-word; } .last_btn .two-btns { width: 92%; } } /* ツールチップの大きさ*/ .popover { max-width: 800px; } .button-center { text-align: center; } .thanks-change { line-height: 130%; font-weight: bold; text-align: center; font-size: 20px; padding: 50px; } /*受講取消ボタン*/ .btn-cancel { color: #fff; background-color: #d396d3; border-color: #d598d5; } .btn-cancel:focus, .btn-cancel.focus { color: #fff; background-color: #d598d5; border-color: #cc99ff; } .btn-cancel:hover { color: #fff; background-color: #d598d5; border-color: #cc77ff; } .btn-cancel:active, .btn-cancel.active, .open > .dropdown-toggle.btn-cancel { color: #fff; background-color: #d396d3; border-color: #cc77ff; } .btn-cancel:active:hover, .btn-cancel.active:hover, .open > .dropdown-toggle.btn-cancel:hover, .btn-cancel:active:focus, .btn-cancel.active:focus, .open > .dropdown-toggle.btn-cancel:focus, .btn-cancel:active.focus, .btn-cancel.active.focus, .open > .dropdown-toggle.btn-cancel.focus { color: #fff; background-color: #cc77ff; border-color: #cc99ff; } .btn-cancel:active, .btn-cancel.active, .open > .dropdown-toggle.btn-cancel { background-image: none; } .btn-cancel.disabled, .btn-cancel[disabled], fieldset[disabled] .btn-cancel, .btn-cancel.disabled:hover, .btn-cancel[disabled]:hover, fieldset[disabled] .btn-cancel:hover, .btn-cancel.disabled:focus, .btn-cancel[disabled]:focus, fieldset[disabled] .btn-cancel:focus, .btn-cancel.disabled.focus, .btn-cancel[disabled].focus, fieldset[disabled] .btn-cancel.focus, .btn-cancel.disabled:active, .btn-cancel[disabled]:active, fieldset[disabled] .btn-cancel:active, .btn-cancel.disabled.active, .btn-cancel[disabled].active, fieldset[disabled] .btn-cancel.active { background-color: #9966ff; border-color: #9977ff; } .btn-cancel .badge { color: #9966ff; background-color: #fff; } a { outline: none !important; } a:focus, *:focus { outline: none !important; } a:active { outline: none !important; } /*日本語コース検索モーダル*/ .CourseSearch { width: 100% !important; height: 100vh; position: relative; } .CourseSearch .modal-content { width: 90%; height: 90%; max-width: 1200px; margin: 10px auto !important; overflow: auto; overflow-y: scroll; font-size: 16px; padding: 30px 40px; border: none; border-radius: 6px 0 0 6px; } .CourseSearch .modal-body > .row { margin-left: 0; margin-right: 0; border-bottom: 1px solid #ddd; } .CourseSearch .modal-body .category.row:last-child { border-bottom: none; } /*iPhone6s,7(safari)でカラム落ちするのを解消*/ .CourseSearch .modal-body .row::before, .CourseSearch .modal-body .row::after { display: none; } .CourseSearch table { width: 100%; } .CourseSearch input[type="checkbox"], .CourseSearch input[type="radio"] { display: none; } .CourseSearch input[type="checkbox"]:disabled + label { color: #999 !important; background-color: #e5e5e5 !important; } .CourseSearch input[type="checkbox"]:checked + label, .CourseSearch input[type="radio"]:checked + label { background: #57CEE2; color: #ffffff; } .CourseSearch dt.subtitle { margin: 0 0 10px -10px; } .CourseSearch dd.level tr, .CourseSearch dd.language tr, .CourseSearch dd.category tr td, .CourseSearch .tuition-fee { border: 0.7px solid lightgrey; } .CourseSearch .tuition-fee-row { border-bottom: none !important; } .CourseSearch dd.level td { -ms-flex: 0 0 16.666667%; flex: 0 0 16.666667%; max-width: 16.666667%; font-weight: 700; text-align: center; border-left: 0.7px solid lightgrey; } .CourseSearch dd.level td label { display: flex; justify-content: center; align-items: center; min-height: 46px; margin-bottom: 0 !important; cursor: pointer; } .CourseSearch dd.level td:first-child { border-left: none; } .CourseSearch dd.language td, .CourseSearch dd.category td { -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333%; font-weight: 700; text-align: center; border-left: 0.7px solid lightgrey; } .CourseSearch dd.language td label, .CourseSearch dd.category td label { display: flex; justify-content: center; align-items: center; min-height: 46px; padding: 0 2px; margin-bottom: 0 !important; line-height: 1.1; cursor: pointer; } .CourseSearch dd.tuition-fee label { -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333%; min-height: 46px; display: flex; justify-content: center; align-items: center; font-weight: 700; border-left: 0.7px solid lightgrey; text-align: center; margin-bottom: 0 !important; cursor: pointer; } .CourseSearch dd.language td:first-child, .CourseSearch dd.tuition-fee .tutuionfee_1 { border-left: none; } .CourseSearch dd.category td:last-child { border-right: 0.7px solid lightgrey; } .CourseSearch .modal-footer.row { justify-content: center; } .CourseSearch .modal-footer .modal-inside-btn { max-width: 190px; width: 100%; } @media screen and (max-width: 992px) { .CourseSearch .modal-content { border-radius: 6px; } .CourseSearch label { font-size: 1.3rem; } } @media screen and (max-width: 768px) { .CourseSearch .modal-content { padding: 0 10px; } .CourseSearch .modal-body { padding: 10px 0 0; } } @media screen and (max-width: 567px) { .CourseSearch { width: auto; height: auto; margin: 0 !important; } .CourseSearch dt.subtitle { padding: 0 10px; } .CourseSearch dd.level td label { min-height: 38px; } .CourseSearch .modal-header { padding: 15px 0; } .CourseSearch .modal-footer .modal-inside-btn { font-size: 1.4rem; } .CourseSearch .modal-footer .modal-inside-btn.col-5 { -ms-flex: 0 0 48%; flex: 0 0 48%; padding: 10px; } .CourseSearch label { font-size: 1rem; } } @media screen and (max-width: 400px) { .CourseSearch .modal-content { width: 93%; } .CourseSearch .modal-footer { padding: 15px 0; text-align: right; border-top: 1px solid #e5e5e5; } .CourseSearch .modal-footer .modal-inside-btn { font-size: 1.2rem; } } input[type="radio"] { margin-right: 5px; } /* 日本語レベルモーダル */ .reg-modal .modal-dialog { max-width: 1000px; margin: 1.75rem auto; } .reg-modal .modal-header { border: none !important; padding-bottom: 0; display: flex; } .reg-modal .modal-header .close { padding: 1rem 1rem; margin: -1rem -1rem -1rem auto; } .reg-modal .modal-body { padding: 0 16px 48px; } .reg-modal .modal-body .row::before, .reg-modal .modal-body .row::after { display: none; } .reg-modal .modal-body img { max-width: 495px; width: 100%; } .reg-modal .modal-body .level-bar { color: #fff; font-weight: 700; font-size: 24px; letter-spacing: 0.2rem; padding: 0 8px; display: flex; align-items: center; justify-content: center; } .reg-modal .modal-body .c2-box .level-bar { border-radius: 0 0 8px 8px; } .reg-modal .modal-body .a1-box .level-bar { border-radius: 8px 8px 0 0; } .reg-modal .modal-body .level-contents { padding: 8px 0 0 16px; } .reg-modal .modal-body .level-contents li { list-style-type: none; position: relative; padding-left: 0.8em; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; line-height: 1.5; font-size: 16px; } .reg-modal .modal-body .level-contents li:last-child { border-bottom: 1px #c7c7c7 dashed; padding-bottom: 8px; } .reg-modal .modal-body .c2-box .level-contents li:last-child { border-bottom: none; padding-bottom: 0; } .reg-modal .modal-body .level-contents li:before { border-radius: 50%; width: 8px; height: 8px; display: block; position: absolute; left: 0; top: 0.5em; content: ""; } .reg-modal .modal-body .c2-box .level-bar, .reg-modal .modal-body .c2-box .level-contents li:before { background: rgba(118, 28, 117, 1); } .reg-modal .modal-body .c1-box .level-bar, .reg-modal .modal-body .c1-box .level-contents li:before { background: rgba(100, 81, 159, 1); } .reg-modal .modal-body .b2-box .level-bar, .reg-modal .modal-body .b2-box .level-contents li:before { background: rgba(104, 163, 215, 1); } .reg-modal .modal-body .b1-box .level-bar, .reg-modal .modal-body .b1-box .level-contents li:before { background: rgba(56, 156, 56, 1); } .reg-modal .modal-body .a2-box .level-bar, .reg-modal .modal-body .a2-box .level-contents li:before { background: rgba(253, 208, 0, 1); } .reg-modal .modal-body .a1-box .level-bar, .reg-modal .modal-body .a1-box .level-contents li:before { background: rgba(232, 65, 136, 1); } .reg-modal .modal-footer { border: none; padding-top: 0; } .sign_up-period-day { margin-left: 0.6rem; padding: 0rem; width: 110%; } .day-label { margin-left: 4%; } .sign_up-period-month { margin-left: 0.5rem; padding: 0rem; width: 250%; } .month-label { margin-left: 30% } .sign_up-period-year { margin-left: 0.5rem; padding: 0rem; width: 140%; } .year-label{ margin-left:18%; } /* Bootstrapのブレイクポイントより。Medium（≥768px） */ @media screen and (min-width: 768px) { .reg-modal .modal-dialog { width: auto; } } /* Bootstrapのブレイクポイントより。Small（≥576px） */ @media screen and (max-width: 576px) { .reg-modal .modal-header { padding: 8px; padding-bottom: 0 !important; } .reg-modal .modal-body { padding: 8px 8px 24px; } .reg-modal .modal-body .level-bar { font-size: 16px; letter-spacing: 0; } .reg-modal .modal-body .c2-box .level-bar { border-radius: 0 0 4.8px 4.8px; } .reg-modal .modal-body .a1-box .level-bar { border-radius: 4.8px 4.8px 0 0; } .reg-modal .modal-body .level-contents { padding: 8px 0 0 8px; } .reg-modal .modal-body .level-contents li { padding-left: 16px; font-size: 12.8px; } } /* 育成アプリ */ .custombox-open, .custombox-open body { overflow: auto; padding-right: 0 !important; } #application { /*PCでの島の位置がずれるため、下記のwidthは触らない*/ width: 1200px; left: -100px; margin-top: 30px; position: absolute; z-index: 0; } .beforeimage { overflow: hidden; } @media screen and (max-width: 1200px) { #application { width: 100%; left: 0; margin-top: 30px; top: 26px; } } /*以下、島の位置を指定してあるpositionを各widthで微調整*/ /* Bootstrapのブレイクポイント */ @media screen and (max-width: 992px) { #application { top: 35px; } } /* 視覚補正 */ @media screen and (max-width: 850px) { #application { top: 64px; } } /* Bootstrapのブレイクポイント */ @media screen and (max-width: 768px) { #application { top: 24px; } } /* 視覚補正 */ @media screen and (max-width: 680px) { #application { top: 36px; } } /* 視覚補正 */ @media screen and (max-width: 630px) { #application { top: 42px; } } /* Bootstrapのブレイクポイント */ @media screen and (max-width: 576px) { #application { top: 18px; } } /* 視覚補正 */ @media screen and (max-width: 512px) { #application { top: 32px; } } /*iPhone6/7/8 Plus*/ @media screen and (max-width: 414px) { #application { top: 44px; } } /* iPhone6/7/8 */ @media screen and (max-width: 375px) { #application { top: 56px; } } /* Android */ @media screen and (max-width: 360px) { #application { top: 62px; } } /* iPhone5/SE */ @media screen and (max-width: 320px) { #application { top: 68px; } } /*島の位置の微調整ここまで*/ .city { position: absolute; top: 0; left: 0; } .city img { width: 100%; } .city.p0 { top: 145px; left: 609px; } .city.p5 { top: 88px; left: 300px; } .city.p10 { top: 15px; left: 10px; } .city.current { /* opacity: 0; */ } .city.next { opacity: 0; } .city.last { opacity: 0; } /* マップ */ #maps { width: 886px; margin: 0 auto; position: relative; z-index: 15000; display: none; } #maps .maps-close { width: 36px; height: 36px; font-size: 26px; box-sizing: border-box; border: 1px solid #FFF; border-radius: 50%; color: #FFF; display: block; position: absolute; right: 20px; top: 20px; text-align: center; } #maps .maps-close .glyphicon, .maps-port-close .glyphicon { line-height: 33px !important; } #maps .maps-remain { position: absolute; font-size: 33px; font-weight: bold; top: 170px; left: 136px; color: #0050AA; letter-spacing: 0; text-align: center; width: 50px; } #maps .maps-laps { position: absolute; font-size: 26px; top: 51px; left: 210px; color: #ffffff; letter-spacing: 0; } #maps .maps-point { display: block; position: absolute; width: 13px; height: 13px; border-radius: 50%; border: 2px solid #FFF; background: #0096ff; z-index: 0; } #maps .maps-point.past { display: none; position: absolute; width: 14px; height: 14px; border-radius: 50%; border: none; box-shadow: 0 0 0 3px #0050b4, 0 0 0 5px #FFF; background: #0096ff; z-index: 1; } /* #maps .maps-point.current{ display: block; position: absolute; width: 14px; height: 14px; border-radius: 50%; border: none; box-shadow: 0 0 0 3px #8b164b, 0 0 0 5px #FFF; background: #fd0163; z-index: 1; } */ #maps .maps-point { -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } #maps .maps-point.active:hover { cursor: pointer; -webkit-transform: scale(2); -moz-transform: scale(2); -ms-transform: scale(2); transform: scale(2); } #maps-port { display: none; position: fixed; text-align: center; top: 50%; left: 50%; z-index: 15002; transform: translateX(-50%) translateY(-50%); } @media screen and (max-width: 886px) { #maps .maps-laps { top: 9px; left: 92px !important; } #maps .maps-close .glyphicon, .maps-port-close .glyphicon { line-height: 34px !important; } } /* 各みなと座標*/ #maps .maps-koobe.past { top: 317px; left: 408px; } #maps .maps-hiroshima.past { top: 325px; left: 367px; } #maps .maps-naha.past { top: 515px; left: 216px; } #maps .maps-hakata.past { top: 333px; left: 321px; } #maps .maps-sakaiminato.past { top: 291px; left: 401px; } #maps .maps-niigata.past { top: 242px; left: 555px; } #maps .maps-tomakomai.past { top: 114px; left: 629px; } #maps .maps-sendai.past { top: 242px; left: 605px; } #maps .maps-tookyoo.past { top: 312px; left: 566px; } #maps .maps-yokohama.past { top: 323px; left: 545px; } #maps .maps-nagoya.past { top: 330px; left: 484px; } #maps .maps-oosaka.past { top: 327px; left: 449px; } /* 航路 */ #maps .maps-route { display: block; position: absolute; width: 6px; height: 6px; border-radius: 100%; border: 1px solid #50ebff; background: #50ebff; z-index: 0; } #maps .maps-route.past { border: 1px solid #fd0163; background: #fd0163; } #maps .maps-route-0-0 { top: 333.707px; left: 401.77px; } #maps .maps-route-0-1 { top: 335.525px; left: 392.667px; } #maps .maps-route-0-2 { top: 334.584px; left: 382.278px; } #maps .maps-route-1-0 { top: 340.584px; left: 369.612px; } #maps .maps-route-1-1 { top: 349.251px; left: 366.279px; } #maps .maps-route-1-2 { top: 358.166px; left: 364.667px; } #maps .maps-route-1-3 { top: 367.834px; left: 364.333px; } #maps .maps-route-1-4 { top: 377.5px; left: 364.333px; } #maps .maps-route-1-5 { top: 387.166px; left: 362.333px; } #maps .maps-route-1-6 { top: 395.834px; left: 360.667px; } #maps .maps-route-1-7 { top: 405.166px; left: 358px; } #maps .maps-route-1-8 { top: 414.167px; left: 355.333px; } #maps .maps-route-1-9 { top: 422.834px; left: 352.333px; } #maps .maps-route-1-10 { top: 431.834px; left: 348.667px; } #maps .maps-route-1-11 { top: 440.833px; left: 344px; } #maps .maps-route-1-12 { top: 448.834px; left: 339.667px; } #maps .maps-route-1-13 { top: 456.834px; left: 335px; } #maps .maps-route-1-14 { top: 464.5px; left: 330px; } #maps .maps-route-1-15 { top: 471.5px; left: 323.667px; } #maps .maps-route-1-16 { top: 477.834px; left: 316px; } #maps .maps-route-1-17 { top: 483.834px; left: 308px; } #maps .maps-route-1-18 { top: 488.834px; left: 299.667px; } #maps .maps-route-1-19 { top: 493.5px; left: 290.667px; } #maps .maps-route-1-20 { top: 497.167px; left: 281.667px; } #maps .maps-route-1-21 { top: 500.166px; left: 272.667px; } #maps .maps-route-1-22 { top: 502.166px; left: 263px; } #maps .maps-route-1-23 { top: 502.834px; left: 252.667px; } #maps .maps-route-1-24 { top: 503.166px; left: 242.667px; } #maps .maps-route-1-25 { top: 504.166px; left: 233px; } #maps .maps-route-1-26 { top: 508.5px; left: 224.667px; } #maps .maps-route-2-0 { top: 507.833px; left: 215.612px; } #maps .maps-route-2-1 { top: 500.499px; left: 220px; } #maps .maps-route-2-2 { top: 493.166px; left: 226px; } #maps .maps-route-2-3 { top: 485.166px; left: 232px; } #maps .maps-route-2-4 { top: 476.833px; left: 237.333px; } #maps .maps-route-2-5 { top: 467.5px; left: 242px; } #maps .maps-route-2-6 { top: 457.833px; left: 245.611px; } #maps .maps-route-2-7 { top: 449.499px; left: 248.667px; } #maps .maps-route-2-8 { top: 439.833px; left: 250.667px; } #maps .maps-route-2-9 { top: 430.833px; left: 252.167px; } #maps .maps-route-2-10 { top: 421.5px; left: 253.333px; } #maps .maps-route-2-11 { top: 411.834px; left: 254.833px; } #maps .maps-route-2-12 { top: 402.834px; left: 255.667px; } #maps .maps-route-2-13 { top: 393.166px; left: 256.167px; } #maps .maps-route-2-14 { top: 384.334px; left: 256.167px; } #maps .maps-route-2-15 { top: 375.832px; left: 255.612px; } #maps .maps-route-2-16 { top: 366.5px; left: 254.5px; } #maps .maps-route-2-17 { top: 357.834px; left: 254.333px; } #maps .maps-route-2-18 { top: 349.166px; left: 255.5px; } #maps .maps-route-2-19 { top: 340.833px; left: 260.279px; } #maps .maps-route-2-20 { top: 333.166px; left: 267.333px; } #maps .maps-route-2-21 { top: 327.832px; left: 275px; } #maps .maps-route-2-22 { top: 324.5px; left: 283.667px; } #maps .maps-route-2-23 { top: 323.833px; left: 293px; } #maps .maps-route-2-24 { top: 324.166px; left: 302.5px; } #maps .maps-route-2-25 { top: 325.251px; left: 311px; } #maps .maps-route-2-26 { top: 328.833px; left: 318.333px; } #maps .maps-route-3-0 { top: 325.751px; left: 326.612px; } #maps .maps-route-3-1 { top: 317.5px; left: 326.833px; } #maps .maps-route-3-2 { top: 309.5px; left: 328.833px; } #maps .maps-route-3-3 { top: 301.667px; left: 332.166px; } #maps .maps-route-3-4 { top: 295px; left: 336.833px; } #maps .maps-route-3-5 { top: 289.167px; left: 342.833px; } #maps .maps-route-3-6 { top: 284.667px; left: 350.833px; } #maps .maps-route-3-7 { top: 282.333px; left: 359.667px; } #maps .maps-route-3-8 { top: 282.334px; left: 369.167px; } #maps .maps-route-3-9 { top: 283.667px; left: 378.5px; } #maps .maps-route-3-10 { top: 286.333px; left: 386.833px; } #maps .maps-route-3-11 { top: 290.333px; left: 394.5px; } #maps .maps-route-4-0 { top: 287.167px; left: 413px; } #maps .maps-route-4-1 { top: 283.833px; left: 422.833px; } #maps .maps-route-4-2 { top: 279.5px; left: 431.833px; } #maps .maps-route-4-3 { top: 273.5px; left: 439.334px; } #maps .maps-route-4-4 { top: 266.833px; left: 446px; } #maps .maps-route-4-5 { top: 260.5px; left: 453px; } #maps .maps-route-4-6 { top: 254.833px; left: 460.667px; } #maps .maps-route-4-7 { top: 248.5px; left: 467.167px; } #maps .maps-route-4-8 { top: 242.833px; left: 475px; } #maps .maps-route-4-9 { top: 238.833px; left: 483.666px; } #maps .maps-route-4-10 { top: 236.5px; left: 493px; } #maps .maps-route-4-11 { top: 237.5px; left: 502.834px; } #maps .maps-route-4-12 { top: 241.333px; left: 511px; } #maps .maps-route-4-13 { top: 246.833px; left: 518.333px; } #maps .maps-route-4-14 { top: 252.667px; left: 524.833px; } #maps .maps-route-4-15 { top: 256.167px; left: 532.5px; } #maps .maps-route-4-16 { top: 253.5px; left: 541px; } #maps .maps-route-4-17 { top: 248.5px; left: 548.333px; } #maps .maps-route-5-0 { top: 234.625px; left: 557.083px; } #maps .maps-route-5-1 { top: 225.875px; left: 555.958px; } #maps .maps-route-5-2 { top: 217px; left: 552.458px; } #maps .maps-route-5-3 { top: 207.625px; left: 549.708px; } #maps .maps-route-5-4 { top: 198.875px; left: 548.833px; } #maps .maps-route-5-5 { top: 190.25px; left: 548.833px; } #maps .maps-route-5-6 { top: 181.375px; left: 550.458px; } #maps .maps-route-5-7 { top: 173.75px; left: 554.708px; } #maps .maps-route-5-8 { top: 167px; left: 560.708px; } #maps .maps-route-5-9 { top: 162.625px; left: 569.208px; } #maps .maps-route-5-10 { top: 159.625px; left: 578.083px; } #maps .maps-route-5-11 { top: 156px; left: 586.458px; } #maps .maps-route-5-12 { top: 151.583px; left: 594.124px; } #maps .maps-route-5-13 { top: 148.417px; left: 603.207px; } #maps .maps-route-5-14 { top: 145.083px; left: 612.29px; } #maps .maps-route-5-15 { top: 142.5px; left: 621.373px; } #maps .maps-route-5-16 { top: 135.833px; left: 627.207px; } #maps .maps-route-5-17 { top: 128px; left: 630.79px; } #maps .maps-route-6-0 { top: 127.5px; left: 638.124px; } #maps .maps-route-6-1 { top: 134.333px; left: 644.124px; } #maps .maps-route-6-2 { top: 141.5px; left: 649.167px; } #maps .maps-route-6-3 { top: 148.833px; left: 654.333px; } #maps .maps-route-6-4 { top: 157.167px; left: 658.833px; } #maps .maps-route-6-5 { top: 165.333px; left: 662.667px; } #maps .maps-route-6-6 { top: 174.5px; left: 666px; } #maps .maps-route-6-7 { top: 183.167px; left: 669.834px; } #maps .maps-route-6-8 { top: 192.5px; left: 671.834px; } #maps .maps-route-6-9 { top: 202.333px; left: 671.333px; } #maps .maps-route-6-10 { top: 212.833px; left: 669.334px; } #maps .maps-route-6-11 { top: 222.167px; left: 665.667px; } #maps .maps-route-6-12 { top: 230.166px; left: 660.501px; } #maps .maps-route-6-13 { top: 236.833px; left: 654.167px; } #maps .maps-route-6-14 { top: 241.833px; left: 646.335px; } #maps .maps-route-6-15 { top: 245.833px; left: 638.334px; } #maps .maps-route-6-16 { top: 247.833px; left: 628.668px; } #maps .maps-route-6-17 { top: 246.833px; left: 619.334px; } #maps .maps-route-7-0 { top: 254.167px; left: 615.001px; } #maps .maps-route-7-1 { top: 261.5px; left: 620px; } #maps .maps-route-7-2 { top: 269.166px; left: 625px; } #maps .maps-route-7-3 { top: 278.166px; left: 627.334px; } #maps .maps-route-7-4 { top: 287.5px; left: 628.667px; } #maps .maps-route-7-5 { top: 295.833px; left: 629.667px; } #maps .maps-route-7-6 { top: 305.5px; left: 629.001px; } #maps .maps-route-7-7 { top: 314.166px; left: 628.334px; } #maps .maps-route-7-8 { top: 321.666px; left: 624px; } #maps .maps-route-7-9 { top: 328.499px; left: 618.333px; } #maps .maps-route-7-10 { top: 334.166px; left: 610.668px; } #maps .maps-route-7-11 { top: 340.166px; left: 602.667px; } #maps .maps-route-7-12 { top: 344.166px; left: 594.001px; } #maps .maps-route-7-13 { top: 346.999px; left: 585.001px; } #maps .maps-route-7-14 { top: 346.166px; left: 575.668px; } #maps .maps-route-7-15 { top: 343.499px; left: 567.5px; } #maps .maps-route-7-16 { top: 335.832px; left: 564.333px; } #maps .maps-route-7-17 { top: 327.499px; left: 565.333px; } #maps .maps-route-8-0 { top: 316.333px; left: 554.169px; } #maps .maps-route-9-0 { top: 334.834px; left: 552.667px; } #maps .maps-route-9-1 { top: 343.5px; left: 548.668px; } #maps .maps-route-9-2 { top: 351.832px; left: 545.001px; } #maps .maps-route-9-3 { top: 359.499px; left: 541.333px; } #maps .maps-route-9-4 { top: 366.165px; left: 535.999px; } #maps .maps-route-9-5 { top: 368.832px; left: 528.165px; } #maps .maps-route-9-6 { top: 370.666px; left: 519.165px; } #maps .maps-route-9-7 { top: 369.499px; left: 509.999px; } #maps .maps-route-9-8 { top: 364.499px; left: 502.167px; } #maps .maps-route-9-9 { top: 355.832px; left: 498.501px; } #maps .maps-route-9-10 { top: 347.166px; left: 495.668px; } #maps .maps-route-9-11 { top: 339.665px; left: 492.835px; } #maps .maps-route-10-0 { top: 340.165px; left: 484.333px; } #maps .maps-route-10-1 { top: 349.499px; left: 485.335px; } #maps .maps-route-10-2 { top: 358.498px; left: 484.666px; } #maps .maps-route-10-3 { top: 366.499px; left: 479.335px; } #maps .maps-route-10-4 { top: 372.832px; left: 472.001px; } #maps .maps-route-10-5 { top: 375.832px; left: 463.667px; } #maps .maps-route-10-6 { top: 376.165px; left: 453.668px; } #maps .maps-route-10-7 { top: 372.832px; left: 446.334px; } #maps .maps-route-10-8 { top: 364.832px; left: 439.666px; } #maps .maps-route-10-9 { top: 356.166px; left: 438.001px; } #maps .maps-route-10-10 { top: 348.499px; left: 441.333px; } #maps .maps-route-10-11 { top: 342.165px; left: 447.334px; } #maps .maps-route-11-0 { top: 335.191px; left: 442.101px; } #maps .maps-route-11-1 { top: 335.191px; left: 432.708px; } #maps .maps-route-11-2 { top: 331.584px; left: 424.677px; } /* みなとポップアップ */ #maps-port .maps-port-title { position: absolute; top: 25px; left: 60px; font-size: 25px; color: #0050aa; } #maps-port .maps-port-close { width: 36px; height: 36px; font-size: 26px; box-sizing: border-box; border: 1px solid #00aadc; border-radius: 50%; color: #00aadc; display: block; position: absolute; right: 20px; top: 20px; text-align: center; } /* #maps-port .maps-prev{ width: 36px; height: 36px; font-size: 26px; box-sizing: border-box; border: 1px solid #00aadc; border-radius: 50%; color: #00aadc; display: block; position: absolute; left: 20px; top: 160px; text-align: center; line-height: 40px!important; } #maps-port .maps-next{ width: 36px; height: 36px; font-size: 26px; box-sizing: border-box; border: 1px solid #00aadc; border-radius: 50%; color: #00aadc; display: block; position: absolute; right: 20px; top: 160px; text-align: center; line-height: 40px!important; } */ a { outline: none !important; } a:focus, *:focus { outline: none !important; } a:active { outline: none !important; } /*レスポンシブ対応のため以下の指定を追加*/ .custombox-modal-container { margin-left: 0 !important; margin-right: 0 !important; width: auto !important; } .custombox-modal-wrapper { width: 100% !important; display: flex; align-items: center; justify-content: center; } .custombox-modal img { max-width: 886px !important; } @media screen and (max-width: 886px) { #maps { width: 320px; position: relative; } #maps img { max-width: 320px !important; height: auto; } #maps .maps-close { width: 25px !important; height: 25px !important; font-size: 20px !important; right: 8px !important; top: 8px !important; } #maps .glyphicon-remove { top: -5px; } #maps .maps-remain { position: absolute; font-size: 16px; font-weight: bold; top: 59px; left: 33px; color: #0050aa; letter-spacing: 0; text-align: center; width: 50px; } #maps .maps-point.past { width: 3px; height: 3px; } #maps .maps-naha.past { top: 181px; left: 75px; } #maps .maps-hakata.past { top: 122px; left: 115px; } #maps .maps-hiroshima.past { top: 117px; left: 132px; } #maps .maps-sakaiminato.past { top: 105px; left: 144px; } #maps .maps-koobe.past { top: 117px; left: 145px; } #maps .maps-oosaka.past { top: 119px; left: 163px; } #maps .maps-nagoya.past { top: 120px; left: 176px; } #maps .maps-yokohama.past { top: 121px; left: 199px; } #maps .maps-tookyoo.past { top: 113px; left: 207px; } #maps .maps-niigata.past { top: 89px; left: 202px; } #maps .maps-sendai.past { top: 89px; left: 219px; } #maps .maps-tomakomai.past { top: 39px; left: 228px; } #maps .maps-route { display: block; position: absolute; width: 2px; height: 2px; border-radius: 100%; border: 1px solid #50ebff; background: #50ebff; z-index: 0; } #maps .maps-route-0-0 { top: 123px; left: 144px; } #maps .maps-route-0-1 { top: 124px; left: 140px; } #maps .maps-route-0-2 { top: 122px; left: 137px; } #maps .maps-route-1-0 { top: 124px; left: 132px; } #maps .maps-route-1-1 { top: 128px; left: 131px; } #maps .maps-route-1-2 { top: 132px; left: 130px; } #maps .maps-route-1-3 { top: 136px; left: 130px; } #maps .maps-route-1-4 { top: 140px; left: 131px; } #maps .maps-route-1-5 { top: 143px; left: 133px; } #maps .maps-route-1-6 { top: 146.5px; left: 135.5px; } #maps .maps-route-1-7 { top: 150.5px; left: 137.5px; } #maps .maps-route-1-8 { top: 154.5px; left: 139.5px; } #maps .maps-route-1-9 { top: 158.5px; left: 139.5px; } #maps .maps-route-1-10 { top: 162.5px; left: 139px; } #maps .maps-route-1-11 { top: 166.5px; left: 138px; } #maps .maps-route-1-12 { top: 170.5px; left: 135.5px; } #maps .maps-route-1-13 { top: 174px; left: 132.5px; } #maps .maps-route-1-14 { top: 177px; left: 128.5px; } #maps .maps-route-1-15 { top: 180px; left: 124.5px; } #maps .maps-route-1-16 { top: 182.5px; left: 120.5px; } #maps .maps-route-1-17 { top: 184px; left: 116.5px; } #maps .maps-route-1-18 { top: 185px; left: 112.5px; } #maps .maps-route-1-19 { top: 185px; left: 108.5px; } #maps .maps-route-1-20 { top: 184.5px; left: 104.5px; } #maps .maps-route-1-21 { top: 184px; left: 100.5px; } #maps .maps-route-1-22 { top: 183px; left: 97px; } #maps .maps-route-1-23 { top: 182px; left: 93px; } #maps .maps-route-1-24 { top: 181px; left: 89px; } #maps .maps-route-1-25 { top: 182px; left: 85px; } #maps .maps-route-1-26 { top: 184px; left: 82px; } #maps .maps-route-2-0 { top: 182.5px; left: 79px; } #maps .maps-route-2-1 { top: 179px; left: 80px; } #maps .maps-route-2-2 { top: 176px; left: 83px; } #maps .maps-route-2-3 { top: 173px; left: 86px; } #maps .maps-route-2-4 { top: 169.5px; left: 89px; } #maps .maps-route-2-5 { top: 166px; left: 91px; } #maps .maps-route-2-6 { top: 162px; left: 93px; } #maps .maps-route-2-7 { top: 158px; left: 93.5px; } #maps .maps-route-2-8 { top: 154px; left: 92px; } #maps .maps-route-2-9 { top: 151px; left: 89px; } #maps .maps-route-2-10 { top: 148px; left: 86px; } #maps .maps-route-2-11 { top: 145.5px; left: 83px; } #maps .maps-route-2-12 { top: 143px; left: 80px; } #maps .maps-route-2-13 { top: 139.5px; left: 78px; } #maps .maps-route-2-14 { top: 136px; left: 77px; } #maps .maps-route-2-15 { top: 132px; left: 77px; } #maps .maps-route-2-16 { top: 128px; left: 78px; } #maps .maps-route-2-17 { top: 124.5px; left: 80.5px; } #maps .maps-route-2-18 { top: 121px; left: 83px; } #maps .maps-route-2-19 { top: 118px; left: 86px; } #maps .maps-route-2-20 { top: 116px; left: 89px; } #maps .maps-route-2-21 { top: 114px; left: 92px; } #maps .maps-route-2-22 { top: 113px; left: 100px; } #maps .maps-route-2-23 { top: 113px; left: 96px; } #maps .maps-route-2-24 { top: 114px; left: 104px; } #maps .maps-route-2-25 { top: 116px; left: 108px; } #maps .maps-route-2-26 { top: 119px; left: 112px; } #maps .maps-route-3-0 { top: 118px; left: 116px; } #maps .maps-route-3-1 { top: 114px; left: 115px; } #maps .maps-route-3-2 { top: 110px; left: 115px; } #maps .maps-route-3-3 { top: 106px; left: 116px; } #maps .maps-route-3-4 { top: 102px; left: 118px; } #maps .maps-route-3-5 { top: 99px; left: 121px; } #maps .maps-route-3-6 { top: 97px; left: 125px; } #maps .maps-route-3-7 { top: 96px; left: 129px; } #maps .maps-route-3-8 { top: 96px; left: 133px; } #maps .maps-route-3-9 { top: 97px; left: 137px; } #maps .maps-route-3-10 { top: 100px; left: 140px; } #maps .maps-route-3-11 { top: 103px; left: 142.5px; } #maps .maps-route-4-0 { top: 104px; left: 148px; } #maps .maps-route-4-1 { top: 103px; left: 151px; } #maps .maps-route-4-2 { top: 101.5px; left: 154px; } #maps .maps-route-4-3 { top: 99px; left: 156.5px; } #maps .maps-route-4-4 { top: 96.5px; left: 159px; } #maps .maps-route-4-5 { top: 93.5px; left: 161.5px; } #maps .maps-route-4-6 { top: 91px; left: 164px; } #maps .maps-route-4-7 { top: 88px; left: 165px; } #maps .maps-route-4-8 { top: 85px; left: 167.5px; } #maps .maps-route-4-9 { top: 83px; left: 171px; } #maps .maps-route-4-10 { top: 82px; left: 175px; } #maps .maps-route-4-11 { top: 82.5px; left: 178.5px; } #maps .maps-route-4-12 { top: 85px; left: 182px; } #maps .maps-route-4-13 { top: 88px; left: 185px; } #maps .maps-route-4-14 { top: 91.5px; left: 187px; } #maps .maps-route-4-15 { top: 93px; left: 190.5px; } #maps .maps-route-4-16 { top: 92px; left: 194px; } #maps .maps-route-4-17 { top: 90px; left: 197px; } #maps .maps-route-5-0 { top: 85px; left: 200px; } #maps .maps-route-5-1 { top: 82px; left: 198px; } #maps .maps-route-5-2 { top: 79px; left: 196px; } #maps .maps-route-5-3 { top: 76px; left: 194px; } #maps .maps-route-5-4 { top: 72px; left: 193px; } #maps .maps-route-5-5 { top: 68px; left: 193px; } #maps .maps-route-5-6 { top: 64.5px; left: 194px; } #maps .maps-route-5-7 { top: 61px; left: 195.5px; } #maps .maps-route-5-8 { top: 58.5px; left: 198px; } #maps .maps-route-5-9 { top: 56.5px; left: 202px; } #maps .maps-route-5-10 { top: 55px; left: 206px; } #maps .maps-route-5-11 { top: 56px; left: 209.5px; } #maps .maps-route-5-12 { top: 56px; left: 213px; } #maps .maps-route-5-13 { top: 54px; left: 216px; } #maps .maps-route-5-14 { top: 54px; left: 220px; } #maps .maps-route-5-15 { top: 52px; left: 223px; } #maps .maps-route-5-16 { top: 49px; left: 225px; } #maps .maps-route-5-17 { top: 46px; left: 226px; } #maps .maps-route-6-0 { top: 47px; left: 229px; } #maps .maps-route-6-1 { top: 50.5px; left: 230.5px; } #maps .maps-route-6-2 { top: 53px; left: 233px; } #maps .maps-route-6-3 { top: 56px; left: 235.5px; } #maps .maps-route-6-4 { top: 58.5px; left: 238px; } #maps .maps-route-6-5 { top: 61px; left: 240.5px; } #maps .maps-route-6-6 { top: 63.5px; left: 243px; } #maps .maps-route-6-7 { top: 66.5px; left: 245px; } #maps .maps-route-6-8 { top: 70px; left: 246px; } #maps .maps-route-6-9 { top: 74px; left: 246px; } #maps .maps-route-6-10 { top: 78px; left: 244.5px; } #maps .maps-route-6-11 { top: 81px; left: 242.5px; } #maps .maps-route-6-12 { top: 84px; left: 240px; } #maps .maps-route-6-13 { top: 86px; left: 236.5px; } #maps .maps-route-6-14 { top: 87.5px; left: 233px; } #maps .maps-route-6-15 { top: 88.5px; left: 229px; } #maps .maps-route-6-16 { top: 89px; left: 225px; } #maps .maps-route-6-17 { top: 89px; left: 222px; } #maps .maps-route-7-0 { top: 92px; left: 222px; } #maps .maps-route-7-1 { top: 94px; left: 225px; } #maps .maps-route-7-2 { top: 96.5px; left: 227.5px; } #maps .maps-route-7-3 { top: 100px; left: 229px; } #maps .maps-route-7-4 { top: 103px; left: 230px; } #maps .maps-route-7-5 { top: 107px; left: 230px; } #maps .maps-route-7-6 { top: 111px; left: 229px; } #maps .maps-route-7-7 { top: 115px; left: 228px; } #maps .maps-route-7-8 { top: 118px; left: 226px; } #maps .maps-route-7-9 { top: 121.5px; left: 224px; } #maps .maps-route-7-10 { top: 124px; left: 221px; } #maps .maps-route-7-11 { top: 126px; left: 217.5px; } #maps .maps-route-7-12 { top: 128px; left: 214px; } #maps .maps-route-7-13 { top: 128.5px; left: 210px; } #maps .maps-route-7-14 { top: 128px; left: 206px; } #maps .maps-route-7-15 { top: 126px; left: 202.5px; } #maps .maps-route-7-16 { top: 122.5px; left: 202px; } #maps .maps-route-7-17 { top: 119px; left: 203px; } #maps .maps-route-8-0 { top: 115px; left: 199px; } #maps .maps-route-9-0 { top: 122px; left: 199px; } #maps .maps-route-9-1 { top: 125.5px; left: 199px; } #maps .maps-route-9-2 { top: 129px; left: 198.5px; } #maps .maps-route-9-3 { top: 132.5px; left: 198px; } #maps .maps-route-9-4 { top: 135.5px; left: 195.5px; } #maps .maps-route-9-5 { top: 137.5px; left: 191.5px; } #maps .maps-route-9-6 { top: 138px; left: 187.5px; } #maps .maps-route-9-7 { top: 137px; left: 184px; } #maps .maps-route-9-8 { top: 134.5px; left: 181px; } #maps .maps-route-9-9 { top: 131.5px; left: 179px; } #maps .maps-route-9-10 { top: 128.5px; left: 178px; } #maps .maps-route-9-11 { top: 125px; left: 177px; } #maps .maps-route-10-0 { top: 125px; left: 174px; } #maps .maps-route-10-1 { top: 129px; left: 174px; } #maps .maps-route-10-2 { top: 133px; left: 173px; } #maps .maps-route-10-3 { top: 136px; left: 171px; } #maps .maps-route-10-4 { top: 138px; left: 168px; } #maps .maps-route-10-5 { top: 139px; left: 164px; } #maps .maps-route-10-6 { top: 138px; left: 160px; } #maps .maps-route-10-7 { top: 136px; left: 157px; } #maps .maps-route-10-8 { top: 133px; left: 155px; } #maps .maps-route-10-9 { top: 130px; left: 155px; } #maps .maps-route-10-10 { top: 127px; left: 157px; } #maps .maps-route-10-11 { top: 124px; left: 160px; } #maps .maps-route-11-0 { top: 122px; left: 158px; } #maps .maps-route-11-1 { top: 123px; left: 155px; } #maps .maps-route-11-2 { top: 121px; left: 152px; } #maps-port img { width: 300px; } #maps-port .maps-port-title { top: 10px; left: 26px; font-size: 16px; } #maps-port .maps-port-close { width: 25px !important; height: 25px !important; font-size: 20px !important; right: 8px !important; top: 8px !important; } #maps-port .maps-port-close .glyphicon { top: -5px !important; } } @media print { a[href]:after { content: "" !important; } abbr[title]:after { content: "" !important; } } /***** アカウント削除、新規登録画面（チェックボックス縦位置調整）*****/ /* 英語、日本語 */ .form-group input[type="checkbox"] { margin-top: 1px !important; } /* スペイン語、インドネシア語、ベトナム語 */ html[lang="es"] .form-group input[type="checkbox"], html[lang="zh-cn"] .form-group input[type="checkbox"], html[lang="id"] .form-group input[type="checkbox"], html[lang="th"] .form-group input[type="checkbox"] { margin-top: 2px !important; } /***** アンケート画面（ラジオ、チェックボックス縦位置調整）*****/ .ul-default input[type="checkbox"], input[type="radio"] { margin-top: 5px !important; }