/* ### TOPページ専用CSS ※他のページのCSSは絶対に入れない事 ### */ .swiper-container{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1}.swiper-container-no-flexbox .swiper-slide{float:left}.swiper-container-vertical>.swiper-wrapper{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;-o-transition-property:transform;transition-property:transform;transition-property:transform,-webkit-transform;-webkit-box-sizing:content-box;box-sizing:content-box}.swiper-container-android .swiper-slide,.swiper-wrapper{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.swiper-container-multirow>.swiper-wrapper{-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.swiper-container-free-mode>.swiper-wrapper{-webkit-transition-timing-function:ease-out;-o-transition-timing-function:ease-out;transition-timing-function:ease-out;margin:0 auto}.swiper-slide{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;width:100%;height:100%;position:relative;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;-o-transition-property:transform;transition-property:transform;transition-property:transform,-webkit-transform}.swiper-slide-invisible-blank{visibility:hidden}.swiper-container-autoheight,.swiper-container-autoheight .swiper-slide{height:auto}.swiper-container-autoheight .swiper-wrapper{-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start;-webkit-transition-property:height,-webkit-transform;transition-property:height,-webkit-transform;-o-transition-property:transform,height;transition-property:transform,height;transition-property:transform,height,-webkit-transform}.swiper-container-3d{-webkit-perspective:1200px;perspective:1200px}.swiper-container-3d .swiper-wrapper,.swiper-container-3d .swiper-slide,.swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right,.swiper-container-3d .swiper-slide-shadow-top,.swiper-container-3d .swiper-slide-shadow-bottom,.swiper-container-3d .swiper-cube-shadow{-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right,.swiper-container-3d .swiper-slide-shadow-top,.swiper-container-3d .swiper-slide-shadow-bottom{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-container-3d .swiper-slide-shadow-left{background-image:-webkit-gradient(linear,right top,left top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));background-image:-webkit-linear-gradient(right,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-o-linear-gradient(right,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-right{background-image:-webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));background-image:-webkit-linear-gradient(left,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-o-linear-gradient(left,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-top{background-image:-webkit-gradient(linear,left bottom,left top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));background-image:-webkit-linear-gradient(bottom,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-o-linear-gradient(bottom,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-bottom{background-image:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));background-image:-webkit-linear-gradient(top,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-o-linear-gradient(top,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-wp8-horizontal,.swiper-container-wp8-horizontal>.swiper-wrapper{-ms-touch-action:pan-y;touch-action:pan-y}.swiper-container-wp8-vertical,.swiper-container-wp8-vertical>.swiper-wrapper{-ms-touch-action:pan-x;touch-action:pan-x}.swiper-button-prev,.swiper-button-prev-part,.swiper-button-next,.swiper-button-next-part{position:absolute;top:50%;width:27px;height:44px;margin-top:-22px;z-index:10;cursor:pointer;background-size:27px 44px;background-position:center;background-repeat:no-repeat}.swiper-button-prev.swiper-button-disabled,.swiper-button-next.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}.swiper-button-prev,.swiper-container-rtl .swiper-button-next{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");left:10px;right:auto}.swiper-button-next,.swiper-container-rtl .swiper-button-prev{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");right:10px;left:auto}.swiper-button-prev.swiper-button-white,.swiper-container-rtl .swiper-button-next.swiper-button-white{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E")}.swiper-button-next.swiper-button-white,.swiper-container-rtl .swiper-button-prev.swiper-button-white{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E")}.swiper-button-prev.swiper-button-black,.swiper-container-rtl .swiper-button-next.swiper-button-black{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E")}.swiper-button-next.swiper-button-black,.swiper-container-rtl .swiper-button-prev.swiper-button-black{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E")}.swiper-button-lock{display:none}.swiper-pagination{position:absolute;text-align:center;-webkit-transition:300ms opacity;-o-transition:300ms opacity;transition:300ms opacity;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-pagination-fraction,.swiper-pagination-custom,.swiper-container-horizontal>.swiper-pagination-bullets{bottom:10px;left:0;width:100%}.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{-webkit-transform:scale(.33);-ms-transform:scale(.33);transform:scale(.33);position:relative}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{-webkit-transform:scale(.66);-ms-transform:scale(.66);transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{-webkit-transform:scale(.33);-ms-transform:scale(.33);transform:scale(.33)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{-webkit-transform:scale(.66);-ms-transform:scale(.66);transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{-webkit-transform:scale(.33);-ms-transform:scale(.33);transform:scale(.33)}.swiper-pagination-bullet{width:8px;height:8px;display:inline-block;border-radius:100%;background:#000;opacity:.2}button.swiper-pagination-bullet{border:none;margin:0;padding:0;-webkit-box-shadow:none;box-shadow:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-bullet-active{opacity:1;background:#007aff}.swiper-container-vertical>.swiper-pagination-bullets{right:10px;top:50%;-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{margin:6px 0;display:block}.swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);width:8px}.swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;-webkit-transition:200ms top,200ms -webkit-transform;transition:200ms top,200ms -webkit-transform;-o-transition:200ms transform,200ms top;transition:200ms transform,200ms top;transition:200ms transform,200ms top,200ms -webkit-transform}.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 4px}.swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);white-space:nowrap}.swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{-webkit-transition:200ms left,200ms -webkit-transform;transition:200ms left,200ms -webkit-transform;-o-transition:200ms transform,200ms left;transition:200ms transform,200ms left;transition:200ms transform,200ms left,200ms -webkit-transform}.swiper-container-horizontal.swiper-container-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{-webkit-transition:200ms right,200ms -webkit-transform;transition:200ms right,200ms -webkit-transform;-o-transition:200ms transform,200ms right;transition:200ms transform,200ms right;transition:200ms transform,200ms right,200ms -webkit-transform}.swiper-pagination-progressbar{background:rgba(0,0,0,.25);position:absolute}.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:#007aff;position:absolute;left:0;top:0;width:100%;height:100%;-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);-webkit-transform-origin:left top;-ms-transform-origin:left top;transform-origin:left top}.swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{-webkit-transform-origin:right top;-ms-transform-origin:right top;transform-origin:right top}.swiper-container-horizontal>.swiper-pagination-progressbar,.swiper-container-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite{width:100%;height:4px;left:0;top:0}.swiper-container-vertical>.swiper-pagination-progressbar,.swiper-container-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite{width:4px;height:100%;left:0;top:0}.swiper-pagination-white .swiper-pagination-bullet-active{background:#fff}.swiper-pagination-progressbar.swiper-pagination-white{background:rgba(255,255,255,.25)}.swiper-pagination-progressbar.swiper-pagination-white .swiper-pagination-progressbar-fill{background:#fff}.swiper-pagination-black .swiper-pagination-bullet-active{background:#000}.swiper-pagination-progressbar.swiper-pagination-black{background:rgba(0,0,0,.25)}.swiper-pagination-progressbar.swiper-pagination-black .swiper-pagination-progressbar-fill{background:#000}.swiper-pagination-lock{display:none}.swiper-scrollbar{border-radius:10px;position:relative;-ms-touch-action:none;background:rgba(0,0,0,.1)}.swiper-container-horizontal>.swiper-scrollbar{position:absolute;left:1%;bottom:3px;z-index:50;height:5px;width:98%}.swiper-container-vertical>.swiper-scrollbar{position:absolute;right:3px;top:1%;z-index:50;width:5px;height:98%}.swiper-scrollbar-drag{height:100%;width:100%;position:relative;background:rgba(0,0,0,.5);border-radius:10px;left:0;top:0}.swiper-scrollbar-cursor-drag{cursor:move}.swiper-scrollbar-lock{display:none}.swiper-zoom-container{width:100%;height:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;text-align:center}.swiper-zoom-container>img,.swiper-zoom-container>svg,.swiper-zoom-container>canvas{max-width:100%;max-height:100%;-o-object-fit:contain;object-fit:contain}.swiper-slide-zoomed{cursor:move}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;-webkit-transform-origin:50%;-ms-transform-origin:50%;transform-origin:50%;-webkit-animation:swiper-preloader-spin 1s steps(12,end) infinite;animation:swiper-preloader-spin 1s steps(12,end) infinite}.swiper-lazy-preloader:after{display:block;content:'';width:100%;height:100%;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");background-position:50%;background-size:100%;background-repeat:no-repeat}.swiper-lazy-preloader-white:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")}@-webkit-keyframes swiper-preloader-spin{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes swiper-preloader-spin{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.swiper-container .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}.swiper-container-fade.swiper-container-free-mode .swiper-slide{-webkit-transition-timing-function:ease-out;-o-transition-timing-function:ease-out;transition-timing-function:ease-out}.swiper-container-fade .swiper-slide{pointer-events:none;-webkit-transition-property:opacity;-o-transition-property:opacity;transition-property:opacity}.swiper-container-fade .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-fade .swiper-slide-active,.swiper-container-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-container-cube{overflow:visible}.swiper-container-cube .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1;visibility:hidden;-webkit-transform-origin:0 0;-ms-transform-origin:0 0;transform-origin:0 0;width:100%;height:100%}.swiper-container-cube .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-cube.swiper-container-rtl .swiper-slide{-webkit-transform-origin:100% 0;-ms-transform-origin:100% 0;transform-origin:100% 0}.swiper-container-cube .swiper-slide-active,.swiper-container-cube .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-container-cube .swiper-slide-active,.swiper-container-cube .swiper-slide-next,.swiper-container-cube .swiper-slide-prev,.swiper-container-cube .swiper-slide-next+.swiper-slide{pointer-events:auto;visibility:visible}.swiper-container-cube .swiper-slide-shadow-top,.swiper-container-cube .swiper-slide-shadow-bottom,.swiper-container-cube .swiper-slide-shadow-left,.swiper-container-cube .swiper-slide-shadow-right{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-container-cube .swiper-cube-shadow{position:absolute;left:0;bottom:0;width:100%;height:100%;background:#000;opacity:.6;-webkit-filter:blur(50px);filter:blur(50px);z-index:0}.swiper-container-flip{overflow:visible}.swiper-container-flip .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1}.swiper-container-flip .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-flip .swiper-slide-active,.swiper-container-flip .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-container-flip .swiper-slide-shadow-top,.swiper-container-flip .swiper-slide-shadow-bottom,.swiper-container-flip .swiper-slide-shadow-left,.swiper-container-flip .swiper-slide-shadow-right{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-container-coverflow .swiper-wrapper{-ms-perspective:1200px} :root { --viewport: 750; --lightBlue: #00aafa; --yellow: #fffe00; } body { overflow: auto !important; padding: 0 !important; } .font-oswald { transform: skew(0deg); } .odometer.odometer-auto-theme .odometer-digit .odometer-digit-inner, .odometer.odometer-theme-minimal .odometer-digit .odometer-digit-inner { text-align: center !important; } /*blue slider*/ .border-font { border-top: 2px solid #fff; border-bottom: 2px solid #fff; } .flex-title { display: flex; align-items: center; justify-content: space-between; } .smooth { transition: 1.4s cubic-bezier(.37, 0, .63, 1); transition-property: clip-path; clip-path: inset(0 100% 0 0); } .smooth.is-animated { clip-path: inset(0); } .yen { display: inline-block; width: 63px; margin-right: 10px; margin-left: 15px; } @media screen and (max-width:767px) { .btn.black a { color: #fff; border-color: #000; background: #000; } .btn.black a:hover { color: #000; border-color: #fff; background: #fff; } .btn.black a:before { background: url(../img/top/arr-blue.png) no-repeat; background-size: contain; } } .main-visual .kv_top .balloon { height: auto; cursor: pointer; transition: opacity 0.4s; } .main-visual .kv_top .balloon:hover { opacity: 0.8; } @media screen and (max-width:767px) { .main-visual .mv_monitor a { width: auto; height: 100%; } } @media screen and (min-width:768px) { .main-visual .mv_monitor a { object-fit: cover; height: 100%; } .main-visual .mv_monitor .container { max-width: initial; } .main-visual .mv_monitor img { object-fit: cover; width: 100%; height: 100%; } .main-visual .mv1 .container { max-width: initial; } .main-visual .mv1 { background: url(/common/images/kv/kv3/bg_mv.jpg) center center no-repeat; background-size: 100% 100%; } .main-visual .mv1 img { object-fit: cover; height: 100%; } .main-visual .mv_caresys { background: url(/common/images/kv/kv_caresys/mv_pc.jpg) center center no-repeat; background-size: cover; } } .middle-text { margin-top: 14px; margin-bottom: 20px; letter-spacing: 1px; } .border-font li { float: left; width: 68px; padding: 10.5px 0; text-align: center; border-right: 2px solid #fff; } .border-font li:first-child { border-left: 2px solid #fff; } .blue-slider-title { width: 434px; padding-bottom: 26px; margin: 0 auto; } @media screen and (max-width:767px) { .blue-slider-title { width: calc(208px + (460 - 208) * ((100vw - 320px) / (767 - 320))); padding-bottom: calc(13px + (26 - 13) * ((100vw - 320px) / (767 - 320))); } .border-font { display: inline-flex; border-top: calc(1px + (2 - 1) * ((100vw - 320px) / (767 - 320))) solid #fff; border-bottom: calc(1px + (2 - 1) * ((100vw - 320px) / (767 - 320))) solid #fff; } } .blue-slider-img { width: 13.55735805330243%; margin-left: 2%; } .slider-bg-white { position: relative; } .name-text { position: absolute; top: -20px; right: 0; left: 0; width: 267px; padding: 13px 0; margin-right: auto; margin-left: auto; text-align: center; border-radius: 30px; background: #00aafa; } .name-text:after { position: absolute; right: 0; bottom: -11px; left: 0; width: 22px; height: 11px; margin-right: auto; margin-left: auto; content: ""; background: url(/img/top/text-angle.png)no-repeat; background-size: contain; } .swiper-blue-slider-sec .swiper-pagination-bullet { box-sizing: border-box; border: 2px solid #00aafa; background: none; } .swiper-blue-slider-sec .swiper-pagination-bullet-active { width: 12px; height: 12px; border: none; background: #00aafa; } .swiper-blue-slider-sec .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 12px; } .slider-bg-white .time span { font-family: "Oswald", sans-serif; font-size: 33px; } .slider-bg-white .time small { font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "游ゴシック", "Yu Gothic", sans-serif; font-size: 19px; font-weight: bold; vertical-align: 5px; } .slider-inner-text { width: 37.06720741599073%; margin-right: 4.141367323290846%; } .slider-bg-white .calc { margin-top: 24px; font-size: 19px; font-weight: bold; color: #00aafa; } .slider-bg-white .calc small { font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "游ゴシック", "Yu Gothic", sans-serif; font-size: 15px; font-weight: bold; } .slider-bg-white .calc span { font-family: "Oswald", sans-serif; font-size: 33px; font-weight: normal; } .slider-bg-white .calc b { font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "游ゴシック", "Yu Gothic", sans-serif; font-weight: bold; vertical-align: 4px; } .highlight-text { margin-top: 5px; font-weight: bold; line-height: 1.5; } .highlight-text span { display: inline-block; margin-bottom: 5px; line-height: 1; color: #00aaeb; background: linear-gradient(#fff 80%, #ff0 20%); } .slider-bg-white .normal { font-weight: bold; line-height: 1.7; } .slider-bg-white { display: flex; padding-top: 53px; padding-bottom: 60px; border-radius: 10px; background: #fff; align-items: center; justify-content: space-between; } .slider-bg-white .line-text { width: 28.96871378910776%; padding-top: 10px; margin-left: 7.415990730011587%; line-height: 1.2; } .slider-bg-white .line-text { text-align: center; } .slider-bg-white .line-text span { display: inline-block; padding-bottom: 5px; margin-bottom: 5px; border-bottom: 4px solid #00aafa; } .swiper-blue-slider-sec { background: #002882; } .swiper-blue-slider-inner { padding-top: 62.5px; padding-bottom: 80px; margin: 0 auto; background: url(/img/top/slider_bg.jpg)no-repeat; background-position: top center; background-size: 1420px; } .swiper-blue-slider { width: 100%; padding-top: 50px; overflow: hidden; } .swiper-blue-slider .country-slider-container { margin: 0 auto; overflow: visible; } .swiper-blue-slider .swiper-slide img { width: 100%; max-width: 863px; } .swiper-blue-slider .country-slider-item-photo { max-width: 863px; margin: 0 auto 70px; } .swiper-blue-slider .swiper-button-prev, .swiper-blue-slider .swiper-button-next { top: calc(50% - 10px); width: 60px; height: 60px; background: none; } .swiper-blue-slider .swiper-button-prev img, .swiper-blue-slider .swiper-button-next img { height: auto; } .swiper-blue-slider .swiper-pagination + div { position: absolute; top: 0; right: 0; left: 0; width: 1280px; height: 100%; margin: 0 auto; } .swiper-blue-slider .swiper-pagination + div .swiper-button-prev { left: 180px; } .swiper-blue-slider .swiper-pagination + div .swiper-button-next { right: 180px; } @media screen and (max-width:767px) { .name-text { top: calc(-10px + (-20 + 10) * ((100vw - 320px) / (767 - 320))); width: calc(170px + (400 - 170) * ((100vw - 320px) / (767 - 320))); padding: calc(6.5px + (15 - 6.5) * ((100vw - 320px) / (767 - 320))) 0 calc(6.5px + (17 - 6.5) * ((100vw - 320px) / (767 - 320))); } .name-text:after { bottom: -25px; width: calc(14px + (35 - 14) * ((100vw - 320px) / (767 - 320))); height: 25px; } .swiper-blue-slider-sec .swiper-pagination-bullet { border: calc(2px + (3 - 2) * ((100vw - 320px) / (767 - 320))) solid #00aafa; } .swiper-blue-slider-sec .swiper-pagination-bullet-active { width: calc(8px + (21 - 8) * ((100vw - 320px) / (767 - 320))); height: calc(8px + (21 - 8) * ((100vw - 320px) / (767 - 320))); border: 0; } .swiper-pagination-bullet { width: calc(7px + (16 - 7) * ((100vw - 320px) / (767 - 320))); height: calc(7px + (16 - 7) * ((100vw - 320px) / (767 - 320))); } .swiper-blue-slider-sec .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 calc(9px + (21 - 9) * ((100vw - 320px) / (767 - 320))); } .slider-bg-white .time span { font-size: calc(18px + (40 - 18) * ((100vw - 320px) / (767 - 320))); } .slider-bg-white .time small { font-size: calc(12px + (26 - 12) * ((100vw - 320px) / (767 - 320))); vertical-align: calc(2.5px + (5 - 2.5) * ((100vw - 320px) / (767 - 320))); } .slider-bg-white .calc { margin-top: 0; margin-bottom: calc(20px + (45 - 20) * ((100vw - 320px) / (767 - 320))); font-size: calc(12px + (26 - 12) * ((100vw - 320px) / (767 - 320))); line-height: 1.3; letter-spacing: 1px; } .slider-bg-white .calc small { font-size: calc(10px + (25 - 10) * ((100vw - 320px) / (767 - 320))); } .slider-bg-white .calc span { font-size: calc(18px + (40 - 18) * ((100vw - 320px) / (767 - 320))); } .slider-bg-white .calc b { vertical-align: calc(2px + (4 - 2) * ((100vw - 320px) / (767 - 320))); } .highlight-text { margin-top: 0; font-size: calc(9px + (25 - 9) * ((100vw - 320px) / (767 - 320))); line-height: 1.7; } .highlight-text span { margin-bottom: calc(2.5px + (5 - 2.5) * ((100vw - 320px) / (767 - 320))); } .slider-bg-white { display: block; padding-top: calc(27px + (53 - 27) * ((100vw - 320px) / (767 - 320))); padding-right: calc(25px + (58 - 25) * ((100vw - 320px) / (767 - 320))); padding-bottom: calc(70px + (160 - 70) * ((100vw - 320px) / (767 - 320))); padding-left: calc(25px + (58 - 25) * ((100vw - 320px) / (767 - 320))); border-radius: calc(2.5px + (5 - 2.5) * ((100vw - 320px) / (767 - 320))); } .slider-bg-white .line-text { width: 100%; padding-top: calc(10px + (38 - 10) * ((100vw - 320px) / (767 - 320))); padding-bottom: calc(10px + (26 - 10) * ((100vw - 320px) / (767 - 320))); margin-left: 0; line-height: 1; } .slider-inner-text { width: 100%; margin-right: 0; } .yen { width: calc(40px + (98 - 40) * ((100vw - 320px) / (767 - 320))); margin-right: calc(6px + (14 - 6) * ((100vw - 320px) / (767 - 320))); margin-left: calc(8px + (20 - 8) * ((100vw - 320px) / (767 - 320))); } .border-font li { width: calc(33px + (72 - 33) * ((100vw - 320px) / (767 - 320))); padding: calc(4px + (10 - 4) * ((100vw - 320px) / (767 - 320))) 0 calc(6px + (14 - 6) * ((100vw - 320px) / (767 - 320))); } .middle-text { margin-top: calc(10px + (28 - 10) * ((100vw - 320px) / (767 - 320))); margin-bottom: calc(8px + (22 - 8) * ((100vw - 320px) / (767 - 320))); } .blue-slider-img { float: right; width: calc(40px + (97 - 40) * ((100vw - 320px) / (767 - 320))); margin-right: 0; } .slider-bg-white .line-text span { padding-bottom: calc(2.5px + (5 - 2.5) * ((100vw - 320px) / (767 - 320))); margin-bottom: calc(2.5px + (5 - 2.5) * ((100vw - 320px) / (767 - 320))); border-bottom: calc(2px + (4 - 2) * ((100vw - 320px) / (767 - 320))) solid #00aafa; } .swiper-blue-slider-inner { padding-top: calc(31.25px + (62.5 - 31.25) * ((100vw - 320px) / (767 - 320))); padding-bottom: calc(30px + (90 - 30) * ((100vw - 320px) / (767 - 320))); background: url(/img/top/slider_bg_sp.png)no-repeat; background-position: top right; background-size: contain; } .swiper-blue-slider { width: 100%; padding-top: calc(25px + (50 - 25) * ((100vw - 320px) / (767 - 320))); } .swiper-blue-slider .swiper-slide img { max-width: calc(250px + (560 - 250) * ((100vw - 320px) / (767 - 320))); } .swiper-blue-slider .country-slider-item-photo { max-width: calc(250px + (560 - 250) * ((100vw - 320px) / (767 - 320))); margin: 0 auto calc(20px + (0 - 20) * ((100vw - 320px) / (767 - 320))); /*margin: 0 auto calc(45px + (100 - 45) * ((100vw - 320px) / (767 - 320)));*/ } .swiper-blue-slider .swiper-button-prev, .swiper-blue-slider .swiper-button-next { top: calc(50% - calc(5px + (10 - 5) * ((100vw - 320px) / (767 - 320)))); width: calc(30px + (80 - 30) * ((100vw - 320px) / (767 - 320))); height: calc(30px + (80 - 30) * ((100vw - 320px) / (767 - 320))); } .swiper-blue-slider .swiper-pagination + div { width: 100%; } .swiper-blue-slider .swiper-pagination + div .swiper-button-prev { left: calc(21px + (60 - 21) * ((100vw - 320px) / (767 - 320))); } .swiper-blue-slider .swiper-pagination + div .swiper-button-next { right: calc(21px + (60 - 21) * ((100vw - 320px) / (767 - 320)));; } } /*slider*/ .map-title { padding-top: 80px; padding-bottom: 95px; text-align: center; background: url(/img/top/map.png)no-repeat; background-position: 59% 66%; background-size: 257.5px; } .blue-text-eng { padding: 0 10px 0 18px; color: #00aafa; } .map-title .text-space { letter-spacing: 4px; } .map-title-text { padding-left: 48px; } @media screen and (max-width:767px) { .map-title { padding-top: calc(40px + (80 - 40) * ((100vw - 320px) / (767 - 320))); padding-bottom: calc(55px + (120 - 55) * ((100vw - 320px) / (767 - 320))); background-position: 77% 64%; background-size: calc(145px + (318 - 145) * ((100vw - 320px) / (767 - 320))); } .blue-text-eng { padding: 0 calc(5px + (10 - 5) * ((100vw - 320px) / (767 - 320))) 0 calc(9px + (18 - 9) * ((100vw - 320px) / (767 - 320))); } .map-title .text-space { letter-spacing: calc(1px + (3 - 1) * ((100vw - 320px) / (767 - 320))); } .map-title-text { padding-left: calc(24px + (48 - 24) * ((100vw - 320px) / (767 - 320))); } } /*slider*/ .swiper-country { width: 100%; overflow: hidden; } .swiper-country .swiper-slide img, .swiper-country .swiper-slide video { width: 100%; max-width: 620px; height: 352px; object-fit: cover; border-radius: 10px; } .swiper-country .country-slider-item-photo { max-width: 620px; margin: 0 auto 60px; } .swiper-country .swiper-button-prev, .swiper-country .swiper-button-next { top: calc(50% - 40px); width: 60px; height: 60px; background: none; } .swiper-country .swiper-button-prev img, .swiper-country .swiper-button-next img { height: auto; } .swiper-country .swiper-pagination + div { position: absolute; top: 0; right: 0; left: 0; width: 1280px; height: 100%; margin: 0 auto; } .swiper-country .swiper-pagination + div .swiper-button-prev { left: 38px; } .swiper-country .swiper-pagination + div .swiper-button-next { right: 38px; } @media screen and (max-width:767px) { .swiper-country .swiper-slide img, .swiper-country .swiper-slide video{ width: 100%; max-width: calc(380px + (620 - 380) * ((100vw - 320px) / (767 - 320))); height: 45vw; border-radius: 1vw; } .swiper-country .country-slider-item-photo { max-width: calc(380px + (620 - 380) * ((100vw - 320px) / (767 - 320))); margin: 0 auto calc(30px + (60 - 30) * ((100vw - 320px) / (767 - 320))); } .swiper-country .swiper-button-prev, .swiper-country .swiper-button-next { top: calc(50% - calc(20px + (40 - 20) * ((100vw - 320px) / (767 - 320)))); width: calc(40px + (80 - 40) * ((100vw - 320px) / (767 - 320))); height: calc(40px + (80 - 40) * ((100vw - 320px) / (767 - 320))); } .swiper-country .swiper-pagination + div { width: calc(320px + (768 - 320) * ((100vw - 320px) / (767 - 320))); } .swiper-country .swiper-pagination + div .swiper-button-prev { left: calc(24px + (75 - 24) * ((100vw - 320px) / (767 - 320))); } .swiper-country .swiper-pagination + div .swiper-button-next { right: calc(24px + (75 - 24) * ((100vw - 320px) / (767 - 320))); } } /*faq*/ .question-text, .answer-text { display: flex; align-items: center; justify-content: flex-start; } .question-text span, .answer-text span { position: relative; display: inline-block; width: 38px; padding: 8px 0 20px; margin-right: 20px; text-align: center; } .question-text span { transform: none; color: #00aafa; background: url(/img/common/q_bg.png)no-repeat; background-size: contain; } .question-text { margin-bottom: 35px; } .answer-text { margin-bottom: 25px; } .question-text p, .answer-text p { font-weight: bold; line-height: 1.6; } .answer-text span { transform: none; color: #000; background: url(/img/common/a_bg.png)no-repeat; background-size: contain; } .answer-text p { color: #00aafa; } .answer-detail { position: relative; padding: 30px; border-radius: 5px; background: #eef0f5; } .answer-detail i, .answer-detail a { cursor: pointer; } .answer-detail i { position: absolute; top: auto; right: 20px; bottom: 25px; width: 30px; height: 30px; transition: .3s; border-radius: 50%; background: url(/img/common/plus_icon.png)#00aafa no-repeat; background-size: contain; -erbkit-transition: .3s; } .answer-detail .on-click i { transform: none; background: url(/img/common/minus_icon.png)#00aafa no-repeat; background-size: contain; } .answer-detail .on-click a.open { display: none; } .answer-detail .more-text { display: none; } .answer-detail a { color: #969696; } .answer-detail a.close { position: absolute; right: 60px; bottom: 25px; display: none; } .answer-detail .on-click a.close { display: block; } .answer-detail p { padding-right: 100px; font-weight: bold; line-height: 1.5; letter-spacing: 1px; } .answer-detail .on-click { padding-bottom: 20px; } .qa-block { padding-bottom: 40px; margin-bottom: 40px; border-bottom: 1px solid #646464; } .more-text { display: none; margin-left: -6px; } .faq-sec { padding: 60px 0 70px; } @media screen and (max-width:767px) { .question-text { margin-bottom: calc(17px + (35 - 17) * ((100vw - 320px) / (767 - 320))); } .answer-detail { padding: calc(15px + (30 - 15) * ((100vw - 320px) / (767 - 320))) calc(40px + (90 - 40) * ((100vw - 320px) / (767 - 320))) calc(15px + (30 - 15) * ((100vw - 320px) / (767 - 320))) calc(10px + (30 - 10) * ((100vw - 320px) / (767 - 320))); border-radius: calc(2.5px + (5 - 2.5) * ((100vw - 320px) / (767 - 320))); } .answer-detail .on-click { padding-bottom: calc(24px + (52 - 24) * ((100vw - 320px) / (767 - 320))); } .answer-detail .font-26-sp { font-size: calc(10.5px + (25 - 10.5) * ((100vw - 320px) / (767 - 320))); } .question-text span, .answer-text span { width: 10%; padding: calc(7px + (16 - 7) * ((100vw - 320px) / (767 - 320))) 0 calc(15px + (32 - 15) * ((100vw - 320px) / (767 - 320))); margin-right: 4%; } .question-text p, .answer-text p { width: 86%; } .answer-detail p { padding-right: 0; letter-spacing: 0; } .answer-text { margin-bottom: calc(12px + (25 - 12) * ((100vw - 320px) / (767 - 320))); } .qa-block { padding-bottom: calc(23px + (40 - 23) * ((100vw - 320px) / (767 - 320))); margin-bottom: calc(20px + (40 - 20) * ((100vw - 320px) / (767 - 320))); } .faq-sec { padding: calc(30px + (70 - 30) * ((100vw - 320px) / (767 - 320))) 0 calc(48px + (100 - 48) * ((100vw - 320px) / (767 - 320))); } .answer-detail i { top: auto; right: calc(15px + (30 - 15) * ((100vw - 320px) / (767 - 320))); bottom: calc(20px + (38 - 14) * ((100vw - 320px) / (767 - 320))); width: calc(20px + (45 - 20) * ((100vw - 320px) / (767 - 320))); height: calc(20px + (45 - 20) * ((100vw - 320px) / (767 - 320))); } .answer-detail .on-click i { transform: none; } .answer-detail a.close { right: calc(40px + (90 - 40) * ((100vw - 320px) / (767 - 320))); bottom: calc(22px + (44 - 22) * ((100vw - 320px) / (767 - 320))); } .more-text { margin-left: calc(-4px + (-9 + 4) * ((100vw - 320px) / (767 - 320)));; } } @media all and (min-width: 768px) { .faq-animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .answer-detail i:hover { -webkit-animation-name: rotateIn; animation-name: rotateIn; } @-webkit-keyframes rotateIn { 0% { -webkit-transform: rotate3d(0, 0, 1, -200deg); transform: rotate3d(0, 0, 1, -200deg); -webkit-transform-origin: center; transform-origin: center; opacity: 0; } 100% { -webkit-transform: none; transform: none; -webkit-transform-origin: center; transform-origin: center; opacity: 1; } } .rotateIn { -webkit-animation-name: rotateIn; animation-name: rotateIn; } } /*news*/ .news-sec { padding: 90px 0 100px; background: #eef0f5; } .date { margin-right: 26px; } .news-block { position: relative; border-top: 1px solid #646464; } .news-sec .news-block:last-child { border-bottom: 1px solid #646464; } .detail-text { display: -webkit-box; width: 90%; max-height: 48px; margin-top: 20px; overflow: hidden; font-weight: bold; line-height: 1.5; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .news-block a:after { position: absolute; top: calc(50% - 15px); right: 0; width: 30px; height: 30px; content: ""; border-radius: 50%; background: url(/img/common/link_arrow.png) #00aafa no-repeat center; background-size: 6px; } .news-block a { position: relative; display: block; padding: 36px 0; color: #000; } @media screen and (max-width:767px) { .news-block a { padding: calc(18px + (36 - 18) * ((100vw - 320px) / (767 - 320))) calc(30px + (60 - 30) * ((100vw - 320px) / (767 - 320))) calc(18px + (36 - 18) * ((100vw - 320px) / (767 - 320))) 0; } .news-sec { padding: calc(30px + (70 - 30) * ((100vw - 320px) / (767 - 320))) 0 calc(50px + (100 - 50) * ((100vw - 320px) / (767 - 320))); } .detail-text { min-height: calc(32px + (78 - 32) * ((100vw - 320px) / (767 - 320))); margin-top: calc(10px + (20 - 10) * ((100vw - 320px) / (767 - 320))); } .date { margin-right: calc(20px + (48 - 20) * ((100vw - 320px) / (767 - 320))); } } .gray-bg { padding-bottom: 80px; background: #eef0f5; } @media screen and (max-width:767px) { .gray-bg { padding-bottom: calc(52px + (104 - 52) * ((100vw - 320px) / (767 - 320))); } } .odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-minimal .odometer-digit, .odometer.odometer-auto-theme .odometer-digit .odometer-digit-spacer, .odometer.odometer-theme-minimal .odometer-digit .odometer-digit-spacer { vertical-align: baseline; } /*reason*/ #reasons { background-color: #00aafa; background-image: linear-gradient(to right, #0093f8 1px, transparent 1px), linear-gradient(to bottom, #0093f8 1px, transparent 1px); background-size: 40px 40px; } #reasons .flex { width: 90.5%; margin: 0 auto; flex-wrap: wrap; } .hige-pagination .swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets { left: -3.5%; } .font_blue { color: #00aafa; } .txt-navy { color: #002882; } .full-bnr { height: calc(100vw / var(--viewport) * 1628) !important; position: relative; overflow: hidden; } .full-bnr .bg { object-fit: cover; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: -1; } .full-bnr .aboutus { color: #fff; text-align: center; position: relative; } .full-bnr .aboutus h1 { font-size: calc(100vw / var(--viewport) * 48); line-height: 1.3; position: absolute; top: calc(100vw / var(--viewport) * 160); left: 0; right: 0; margin: 0 auto; z-index: 10; } .full-bnr .aboutus h1 .small { font-size: calc(100vw / var(--viewport) * 32); } .full-bnr .aboutus h1 .font_blue { color: #16AAFA; font-size: calc(100vw / var(--viewport) * 88); } .full-bnr .aboutus .caption { font-size: 5.3333333333vw; text-align: center; margin-top: 10.6666666667vw; } @media screen and (max-width:767px) { .full-bnr { height: calc(555px + (1330 - 555) * ((100vw - 320px) / (767 - 320))); } } @media screen and (min-width: 768px) { .full-bnr { height: 580px !important; } .full-bnr .aboutus h1 { font-size: 32px; top: 120px; } .full-bnr .aboutus h1 .small { font-size: 24px; } .full-bnr .aboutus h1 .font_blue { font-size: 60px; } } /*reason*/ #reasons { color: #fff; text-align: center; background: var(--lightBlue) !important; padding: calc(100vw / var(--viewport) * 108) 0 !important; } #reasons h2 { font-size: calc(100vw / var(--viewport) * 64); line-height: 1.3; margin-bottom: calc(100vw / var(--viewport) * 192); } #reasons h2 .sub { font-size: calc(100vw / var(--viewport) * 28); } #reasons .flex { flex-wrap: nowrap; } #reasons .box { margin-top: calc(100vw / var(--viewport) * 120); position: relative; } #reasons .box .title { font-size: calc(100vw / var(--viewport) * 40); font-weight: bold; border-top: 2px solid #fff; padding: 0.8em 1em; border-bottom: 2px solid #fff; display: table; margin: 0 auto; position: relative; z-index: 1; } #reasons .box01:before { content: ""; width: 100%; height: calc(100vw / var(--viewport) * 752); background: url(/img/top/reasons/bg_sp.png) top center no-repeat; background-size: 100% auto; position: absolute; top: calc(100vw / var(--viewport) * 120); left: 0; z-index: 1; } #reasons .box:after { color: #0071F5; font-size: calc(100vw / var(--viewport) * 320); font-family: 'Oswald', sans-serif; font-weight: normal; position: absolute; top: calc(100vw / var(--viewport) * -80); left: 0; z-index: 0; } #reasons .box01:after { content: "01"; } #reasons .box02:after { content: "02"; } #reasons .box03:after { content: "03"; } #reasons .box04:after { content: "04"; } #reasons .box .midashi { margin-top: calc(100vw / var(--viewport) * 168); position: relative; z-index: 1; } #reasons .box01 .midashi ul li { color: var(--yellow); font-size: calc(100vw / var(--viewport) * 96); font-weight: bold; line-height: 1.3; } #reasons .box01 .midashi ul li:nth-child(1) { margin-bottom: calc(100vw / var(--viewport) * 104); position: relative; } #reasons .box01 .midashi ul li:nth-child(1):before, #reasons .box01 .midashi ul li:nth-child(1):after { content: ""; background: #fff; display: block; position: absolute; left: 0; right: 0; bottom: calc(100vw / var(--viewport) * -54); margin: 0 auto; } #reasons .box01 .midashi ul li:nth-child(1):before { width: calc(100vw / var(--viewport) * 90); height: calc(100vw / var(--viewport) * 4); transform: rotate(45deg); } #reasons .box01 .midashi ul li:nth-child(1):after { width: calc(100vw / var(--viewport) * 4); height: calc(100vw / var(--viewport) * 90); transform: translateY(50%) rotate(45deg); } #reasons .box01 .midashi ul li .small { color: #fff; font-size: calc(100vw / var(--viewport) * 40); display: block; } #reasons .box .reasonsSwiper { margin-top: calc(100vw / var(--viewport) * 168); } #reasons .box .reasonsSwiper .swiper__title { font-size: calc(100vw / var(--viewport) * 40); font-weight: bold; line-height: 1.5; margin-bottom: calc(100vw / var(--viewport) * 24); } #reasons .reasons__parts{ margin-bottom: calc(100vw / var(--viewport) * 24); padding: calc(100vw / var(--viewport) * 12) calc(100vw / var(--viewport) * 20); box-sizing: border-box; background: #fff; border: calc(100vw / var(--viewport) * 2) solid #20396F; } #reasons .reasons__parts--left{ width: calc(100vw / var(--viewport) * 278); margin-top: calc(100vw / var(--viewport) * 12); } #reasons .reasons__parts__title{ font-size: calc(100vw / var(--viewport) * 18); padding: calc(100vw / var(--viewport) * 8); color: #fff; background: #20396F; border-radius: calc(100vw / var(--viewport) * 40); } #reasons .reasons__parts__planName{ font-size: calc(100vw / var(--viewport) * 30); color: #20396F; margin-top: calc(100vw / var(--viewport) * 10); } #reasons .reasons__parts img{ width: calc(100vw / var(--viewport) * 190); } #reasons .box .reasonsSwiper .lead { font-size: calc(100vw / var(--viewport) * 32); text-align: center; line-height: 1.5; margin-bottom: calc(100vw / var(--viewport) * 44); } #reasons .box .reasonsSwiper .swiper-slide .js-dialog { color: #000; font-size: calc(100vw / var(--viewport) * 20); font-weight: bold; line-height: 1.25; background: var(--yellow); border-radius: 50vw; width: calc(100vw / var(--viewport) * 120); height: calc(100vw / var(--viewport) * 120); display: flex; flex-direction: column; justify-content: center; align-items: center; position: absolute; right: calc(100vw / var(--viewport) * 10); bottom: calc(100vw / var(--viewport) * 10); } #reasons .box .reasonsSwiper .swiper-slide:nth-child(2n) .js-dialog { left: calc(100vw / var(--viewport) * 10); right: initial; } #reasons .box .reasonsSwiper .swiper-slide .js-dialog:before { content: "+"; font-size: calc(100vw / var(--viewport) * 24); } #reasons .box .reasonsSwiper + .caption { font-weight: 500; text-align: left; line-height: 1.5; width: 91.47%; margin: calc(100vw / var(--viewport) * 25) auto 0; } #reasons .box01 .button a { color: #000; font-size: calc(100vw / var(--viewport) * 32); font-weight: bold; text-decoration: none; width: calc(100vw / var(--viewport) * 600); height: calc(100vw / var(--viewport) * 112); background: #fff; display: flex; justify-content: center; align-items: center; border-radius: 50vw; margin: calc(100vw / var(--viewport) * 80) auto 0; } #reasons .box02 .imgBox { width: 91.47%; margin: calc(100vw / var(--viewport) * 80) auto 0; position: relative; z-index: 1; } #reasons .box02 .imgBox h4 { font-size: calc(100vw / var(--viewport) * 48); font-weight: bold; line-height: 1.3; white-space: nowrap; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } #reasons .box02 .imgBox h4 .sub { font-size: calc(100vw / var(--viewport) * 28); } #reasons .box02 .text { font-size: calc(100vw / var(--viewport) * 24); font-weight: 500; text-align: left; line-height: 1.8; width: 91.47%; margin: calc(100vw / var(--viewport) * 40) auto 0; } #reasons .box02 .moreText { display: none; } #reasons .box02 .more { text-align: center; text-decoration: underline; display: block; margin-top: 1.8em; cursor: pointer; } #reasons .box03 .pc_flex { margin-top: calc(100vw / var(--viewport) * 124); position: relative; z-index: 1; } #reasons .box03 .imgBox { position: relative; } #reasons .box03 .imgBox .caption { color: #000; font-size: calc(100vw / var(--viewport) * 32); font-weight: bold; text-align: center; line-height: 1.5; width: calc(100vw / var(--viewport) * 355); height: calc(100vw / var(--viewport) * 94); background: #fff; display: flex; flex-direction: column; justify-content: center; align-items: center; position: absolute; left: 0; right: 0; bottom: calc(100vw / var(--viewport) * -54); margin: 0 auto; } #reasons .box03 .imgBox .caption .small { font-size: calc(100vw / var(--viewport) * 20); } #reasons .box03 .text { font-size: calc(100vw / var(--viewport) * 24); font-weight: 500; text-align: left; line-height: 1.5; width: 91.47%; margin: calc(100vw / var(--viewport) * 134) auto 0; } #reasons .box03 .button a { color: #fff; font-size: calc(100vw / var(--viewport) * 32); text-decoration: none; width: calc(100vw / var(--viewport) * 600); height: calc(100vw / var(--viewport) * 112); background: none; display: flex; justify-content: center; align-items: center; border: 2px solid #fff; border-radius: 50vw; margin: calc(100vw / var(--viewport) * 80) auto 0; } #reasons .box04 .ttl_aco { color: #000; font-size: calc(100vw / var(--viewport) * 36); font-weight: bold; text-align: left; line-height: 1.3; background: #fff; width: 91.47%; height: calc(100vw / var(--viewport) * 150); display: flex; justify-content: flex-start; align-items: center; padding: calc(100vw / var(--viewport) * 35) calc(100vw / var(--viewport) * 32); margin: calc(100vw / var(--viewport) * 16) auto 0; box-sizing: border-box; position: relative; z-index: 1; cursor: pointer; } #reasons .box04 .ttl_aco.first { margin-top: calc(100vw / var(--viewport) * 80); } #reasons .box04 .ttl_aco:after { content: ""; border-right: 2px solid #000; border-top: 2px solid #000; border-radius: 2px; width: calc(100vw / var(--viewport) * 17); height: calc(100vw / var(--viewport) * 17); position: absolute; top: calc(50% - calc(100vw / var(--viewport) * 6)); right: calc(100vw / var(--viewport) * 32); transform: translateY(-50%) rotate(135deg); } #reasons .box04 .ttl_aco.active:after { top: calc(50% - calc(100vw / var(--viewport) * -4)); transform: translateY(-50%) rotate(-45deg); } #reasons .box04 .ttl_aco img { width: calc(100vw / var(--viewport) * 80); margin-right: calc(100vw / var(--viewport) * 32); } #reasons .box04 .ttl_aco .sub { font-size: calc(100vw / var(--viewport) * 28); font-weight: 500; } #reasons .box04 .body_aco { color: #000; font-size: calc(100vw / var(--viewport) * 24); font-weight: 500; text-align: left; line-height: 1.8; background: #fff; width: 91.47%; padding: 5.33vw calc(100vw / var(--viewport) * 32); margin: 0 auto; box-sizing: border-box; display: none; } #reasons .box04 .body_aco .caption { font-size: calc(100vw / var(--viewport) * 16); margin-top: calc(100vw / var(--viewport) * 16); } #reasons .box04 .body_aco .example { margin-top: calc(100vw / var(--viewport) * 40); } #reasons .box04 .body_aco .example .flex { justify-content: flex-start; align-items: center; margin-top: calc(100vw / var(--viewport) * 16); } #reasons .box04 .body_aco .example .flex dt { text-align: center; width: 32vw; height: 8vw; display: flex; justify-content: center; align-items: center; border: 2px solid #000; border-radius: calc(100vw / var(--viewport) * 16); } #reasons .box04 .body_aco .example .flex dd { width: calc(100% - 32vw); padding-left: 3.2vw; } @media screen and (max-width:767px) { #reasons { padding: calc(45px + (100 - 45) * ((100vw - 320px) / (767 - 320))) 0 calc(48px + (120 - 48) * ((100vw - 320px) / (767 - 320))); background-color: #00aafa; background-image: linear-gradient(to right, #0093f8 .5px, transparent .5px), linear-gradient(to bottom, #0093f8 .5px, transparent .5px); background-size: calc(17px + (37 - 17) * ((100vw - 320px) / (767 - 320))) calc(17px + (37 - 17) * ((100vw - 320px) / (767 - 320))); } #reasons .container { width: 100%; } #reasons .flex { width: 100%; } #reasons .box01 .midashi ul { flex-direction: column; } #beforeAfter .body02, #beforeAfter .body03 { display: none; } #reasons .reasonsSwiper .swiper-button-prev, #reasons .reasonsSwiper .swiper-button-next { width: calc(100vw / var(--viewport) * 40); height: calc(100vw / var(--viewport) * 64); background: none; top: 50%; } #reasons .reasonsSwiper .swiper-button-prev { left: 8vw; } #reasons .reasonsSwiper .swiper-button-next { right: 8vw; } #reasons .reasonsSwiper .swiper-button-prev:before, #reasons .reasonsSwiper .swiper-button-next:after { content: ''; width: calc(100vw / var(--viewport) * 40); height: calc(100vw / var(--viewport) * 64); background: #fff; display: block; clip-path: polygon(0 0, 0 100%, 100% 50%); pointer-events: none; } #reasons .reasonsSwiper .swiper-button-prev:before { clip-path: polygon(100% 0, 100% 100%, 0 50%); } #reasons .swiper-button-disabled{ display:none; } } @media screen and (min-width: 768px) { #reasons { padding: 60px 0 80px !important; } #reasons h2 { font-size: 40px; margin-bottom: 80px; } #reasons h2 .sub { font-size: 20px; } #reasons .flex { width: 100%; flex-wrap: nowrap; } #reasons .box { margin-top: 60px; } #reasons .box .title { font-size: 28px; border-width: 1px; } #reasons .box01:before { width: 980px; height: 382px; background: url(/img/top/reasons/bg_pc.png) top center no-repeat; background-size: 100% auto; top: 108px; left: 0; right: 0; margin: 0 auto; } #reasons .box:after { font-size: 200px; top: -10px; } #reasons .box .midashi { width: 580px; margin: 40px auto 0; } #reasons .box01 .midashi ul li { font-size: 60px; width: 270px; } #reasons .box01 .midashi ul li:nth-child(1) { margin-bottom: 0; } #reasons .box01 .midashi ul li:nth-child(1):before, #reasons .box01 .midashi ul li:nth-child(1):after { top: 0; left: initial; right: 0; bottom: initial; margin: 0; } #reasons .box01 .midashi ul li:nth-child(1):before { width: 45px; height: 2px; transform: translate(42px,51px) rotate(45deg); } #reasons .box01 .midashi ul li:nth-child(1):after { width: 2px; height: 45px; transform: translate(21px, 30px) rotate(45deg); } #reasons .box01 .midashi ul li .small { font-size: 24px; } #reasons .box .reasonsSwiper { width: 580px; margin-top: 20px; } #reasons .box .reasonsSwiper .swiper__title { font-size: 26px; margin-bottom: 20px; } #reasons .reasons__parts{ margin-bottom: 12px; padding: 6px 10px; border: 1px solid #20396F; } #reasons .reasons__parts--left{ width: 140px; margin-top:6px; } #reasons .reasons__parts__title{ font-size: 9px; padding: 4px; border-radius: 40px; } #reasons .reasons__parts__planName{ font-size: 16px; margin-top: 6px; } #reasons .reasons__parts img{ width: 95px; } #reasons .box .reasonsSwiper .lead { font-size: 16px; margin-bottom: 20px; } #reasons .box .reasonsSwiper .swiper-slide .js-dialog { font-size: 10px; width: 60px; height: 60px; right: 5px; bottom: 5px; cursor: pointer; } #reasons .box .reasonsSwiper .swiper-slide:nth-child(2n) .js-dialog { left: 5px; right: initial; } #reasons .box .reasonsSwiper .swiper-slide .js-dialog:before { font-size: 12px; margin-top: -3px; margin-bottom: 3px; } #reasons .box .reasonsSwiper + .caption { width: auto; display: table; margin: 20px auto 0; } #reasons .box01 .button a { font-size: 16px; width: 300px; height: 56px; margin: 33px auto 0; } #reasons .box02 .pc_flex { width: 980px; display: flex; justify-content: space-between; align-items: flex-start; margin: 0 auto; } #reasons .box02 .pc_flex > div { width: 470px; position: relative; } #reasons .box02 .imgBox { width: 470px; margin: 40px auto 0; } #reasons .box02 .imgBox h4 { font-size: 32px; } #reasons .box02 .imgBox h4 .sub { font-size: 14px; } #reasons .box02 .text { font-size: 16px; width: 100%; margin: 20px auto 0; } #reasons .box02 .more { display: inline-block; position: absolute; right: 0; bottom: 0; margin: 0; } #reasons .box03 .pc_flex { display: flex; justify-content: space-between; width: 980px; margin: 40px auto 0; } #reasons .box03 .pc_flex .flex { width: 582px; } #reasons .box03 .imgBox .caption { font-size: 16px; width: 271px; height: 32px; flex-direction: row; bottom: 10px; } #reasons .box03 .imgBox .caption .small { font-size: 12px; } #reasons .box03 .text { font-size: 16px; width: 360px; margin: 0; } #reasons .box03 .button a { font-size: 16px; width: 300px; height: 56px; border-width: 1px; margin: 40px auto 0; } #reasons .box04 .pc_flex { width: 980px; display: flex; justify-content: space-between; margin: 40px auto 0; } #reasons .box04 .pc_flex > li { width: 190px; } #reasons .box04 .ttl_aco { font-size: 18px; text-align: center; width: 190px; height: 240px; flex-direction: column; align-items: center; align-items: stretch; border-radius: 20px; padding: 20px 0 0; margin: 0; transition: all .4s; } #reasons .box04 .ttl_aco.first { margin-top: 0; } #reasons .box04 .ttl_aco.open:before { content: ""; width: 190px; height: 0; display: block; background: #fff; position: absolute; left: 0; top: 219px; /* transition: all .4s;*/ } #reasons .box04 .ttl_aco.open:before { height: 30px; } #reasons .box04 .ttl_aco:after { border-width: 2px; width: 14px; height: 14px; top: initial; left: 0; right: 0; bottom: 20px; margin: 0 auto; } #reasons .box04 .ttl_aco.active:after { transform: translateY(-50%) rotate(-45deg); top: initial; bottom: 10px; } #reasons .box04 .ttl_aco img { width: 80px; margin: 0 auto 20px; } #reasons .box04 .ttl_aco .sub { font-size: 14px; line-height: 1.2; letter-spacing: 0.05em; display: inline-block; margin-bottom: 8px; } #reasons .box04 .body_aco { font-size: 16px; width: 980px; padding: 30px; /*margin: 0 auto; position: absolute; top: 362px; left: 50px;*/ z-index: 5; margin-top: 9px; display: none; } #reasons .box04 .no2 .body_aco { margin-left: -197.5px; } #reasons .box04 .no3 .body_aco { margin-left: -395px; } #reasons .box04 .no4 .body_aco { margin-left: -592.5px; } #reasons .box04 .no5 .body_aco { margin-left: -790px; } #reasons .box04 .body_aco .caption { font-size: 11px; margin-top: 8px; } #reasons .box04 .body_aco .example { margin-top: 20px; } #reasons .box04 .body_aco .example .flex { margin-top: 8px; } #reasons .box04 .body_aco .example .flex dt { width: 120px; height: 30px; border-radius: 10px; } #reasons .box04 .body_aco .example .flex dd { width: auto; padding-left: 20px; } #reasons .box04 .body_aco .r04-2 { width: 624px; display: block; margin: 20px auto 0; } #reasons .box04 .body_aco .r04-3, #reasons .box04 .body_aco .r04-4 { width: 624px; display: block; margin: 20px auto 0; } .reasonsSwiper .swiper-button-prev, .reasonsSwiper .swiper-button-next { display: none; } .reasonsSwiper .swiper-wrapper { display: flex; justify-content: space-between; gap: 24px; } .reasonsSwiper .swiper-slide { width: 270px; opacity: 1; } } .swiper-blue-slider-sec .flex-title { flex-wrap: wrap; justify-content: center; } .swiper-blue-slider-sec .flex-title .middle-text { width: 100%; } .swiper-blue-slider-sec .flex { width: 100%; align-items: center; } .swiper-blue-slider-sec .flex .border-font { border-top: 2px solid #fff; border-bottom: 2px solid #fff; } .swiper-blue-slider-sec .flex .border-font b { text-align: center; float: left; } @media screen and (max-width:767px) { .swiper-blue-slider .swiper-slide { height: auto; } .swiper-blue-slider .swiper-slide .country-slider-item-photo { background: #fff; height: 100%; border-radius: calc(2.5px + (5 - 2.5) * ((100vw - 320px) / (767 - 320))); } .swiper-blue-slider-sec .flex .border-font { display: inline-flex; border-top: calc(1px + (2 - 1) * ((100vw - 320px) / (767 - 320))) solid #fff; border-bottom: calc(1px + (2 - 1) * ((100vw - 320px) / (767 - 320))) solid #fff; } .swiper-blue-slider-sec .flex .border-font b { border-right: calc(1px + (2 - 1) * ((100vw - 320px) / (767 - 320))) solid #fff; width: calc(33px + (72 - 33) * ((100vw - 320px) / (767 - 320))); padding: calc(4px + (10 - 4) * ((100vw - 320px) / (767 - 320))) 0 calc(6px + (14 - 6) * ((100vw - 320px) / (767 - 320))); } .swiper-blue-slider-sec .flex .border-font b:first-child { border-left: calc(1px + (2 - 1) * ((100vw - 320px) / (767 - 320))) solid #fff; } } @media screen and (min-width:768px) { .swiper-blue-slider-sec .blue-slider-title { width: 434px; padding-bottom: 26px; margin: 0 auto; } .swiper-blue-slider-sec .flex-title .middle-text { margin-top: 14px; margin-bottom: 20px; letter-spacing: 1px; } .swiper-blue-slider-sec .flex .border-font b { float: left; width: 68px; padding: 10.5px 0; text-align: center; border-right: 2px solid #fff; } .swiper-blue-slider-sec .flex .border-font b:first-child { border-left: 2px solid #fff; } } #plan { background: var(--lightBlue); padding: calc(100vw / var(--viewport) * 80) 0 calc(100vw / var(--viewport) * 108); } #plan h2 { color: #fff; font-size: calc(100vw / var(--viewport) * 64); text-align: center; line-height: 1.3; margin-bottom: calc(100vw / var(--viewport) * 80); } #plan h2 .sub { font-size: calc(100vw / var(--viewport) * 28); } #plan .planSwiper .title { color: #fff; font-size: calc(100vw / var(--viewport) * 120); text-align: center; margin-bottom: calc(100vw / var(--viewport) * 20); } #plan .planSwiper .midashi { color: var(--lightBlue); font-size: calc(100vw / var(--viewport) * 40); font-weight: bold; text-align: center; background: #fff; height: calc(100vw / var(--viewport) * 60); display: flex; justify-content: center; align-items: center; margin-bottom: calc(100vw / var(--viewport) * 20); } #plan .swiper-button-disabled { display: none; } #plan .planSwiper .courseBoxArea { font-weight: 600; margin-top: 2.6666666667vw; } #plan .planSwiper .courseBoxArea .tabs { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } #plan .planSwiper .courseBoxArea .tabs.two_tabs li { width: 49.68%; } #plan .planSwiper .courseBoxArea .tabs.three_tabs li { width: 32.91%; } #plan .planSwiper .courseBoxArea .tabs li { color: #fff; font-size: calc(100vw / var(--viewport) * 24); font-weight: bold; text-align: center; background: #666; display: flex; justify-content: center; align-items: center; height: 5.8666666667vw; border-radius: 1.0666666667vw 1.0666666667vw 0 0; cursor: pointer; } #plan .planSwiper .courseBoxArea .tabs li.active { color: #16AAFA; background: #F0F0F0; border-radius: 1.0666666667vw 1.0666666667vw 0 0; cursor: default; } #plan .planSwiper .courseBoxArea .bodys { color: #333; line-height: 1.6; background: #f0f0f0; } #plan .planSwiper .courseBoxArea .bodys .body02, #plan .planSwiper .courseBoxArea .bodys .body03 { display: none; } #plan .planSwiper .courseBoxArea .flex { justify-content: space-between; align-items: center; } #plan .planSwiper .courseBoxArea .flex .totalPrice .priceBox { line-height: 1; justify-content: center; align-items: baseline; } #plan .planSwiper .courseBoxArea .flex .totalPrice .priceBox .total { font-size: 2.6666666667vw; line-height: 1.1; letter-spacing: 0.1em; transform: translateY(-1.2em); } #plan .planSwiper .courseBoxArea .flex .totalPrice .priceBox .price { color: var(--lightBlue); font-size: 12.8vw; margin: 0 1.0666666667vw; } #plan .planSwiper .courseBoxArea .flex .totalPrice .priceBox .yen { font-size: 3.7333333333vw; position: relative; width: initial; margin: 0; } #plan .planSwiper .courseBoxArea .flex .totalPrice .priceBox .yen:after { content: "(税込)"; font-size: 1.6vw; text-align: center; white-space: nowrap; position: absolute; top: -2.6666666667vw; left: 0; right: 0; margin: 0 auto; } #plan .planSwiper .courseBoxArea .flex .monthPrice .flex { flex-direction: column; align-items: center; } #plan .planSwiper .courseBoxArea .flex .monthPrice .flex .priceBox { border-bottom: 1px solid #333; } #plan .planSwiper .courseBoxArea .flex .monthPrice .flex .priceBox .month { font-size: 2.6666666667vw; } #plan .planSwiper .courseBoxArea .flex .monthPrice .flex .priceBox .price { font-size: 5.3333333333vw; } #plan .planSwiper .courseBoxArea .flex .monthPrice .flex .priceBox .yen { font-size: 2.6666666667vw; width: initial; margin: 0; } #plan .planSwiper .courseBoxArea .flex .monthPrice .flex .bunkatsu { font-size: 2.4vw; margin-top: 0.6666666667vw; } #plan .button a { color: #fff; font-size: calc(100vw / var(--viewport) * 32); font-weight: bold; text-decoration: none; width: calc(100vw / var(--viewport) * 600); height: calc(100vw / var(--viewport) * 112); background: #20396F; display: flex !important; justify-content: center; align-items: center; border-radius: 50vw; margin: calc(100vw / var(--viewport) * 80) auto 0; } #plan .swiper-slide .button a { height: calc(100vw / var(--viewport) * 75); margin-top: 2.6666666667vw; } @media screen and (max-width:767px) { #plan .container { width: 82.93%; } } @media screen and (min-width:768px) { #plan { padding: 60px 0 80px; } #plan h2 { font-size: 40px; margin-bottom: 80px; } #plan h2 .sub { font-size: 20px; } #plan .container { max-width: 980px; } #plan .planSwiper .swiper-wrapper { justify-content: space-between; } #plan .planSwiper .swiper-slide { width: 311px; opacity: 1; } #plan .planSwiper .title { font-size: 60px; margin-bottom: 10px; } #plan .planSwiper .midashi { font-size: 20px; height: 30px; margin-bottom: 10px; } #plan .planSwiper .courseBoxArea { margin-top: 10px; } #plan .planSwiper .courseBoxArea .tabs li { font-size: 12px; height: 22px; border-radius: 10px 10px 0 0; } #plan .planSwiper .courseBoxArea .tabs li.active { border-radius: 10px 10px 0 0; } #plan .planSwiper .courseBoxArea .flex .totalPrice .priceBox .total { font-size: 10px; } #plan .planSwiper .courseBoxArea .flex .totalPrice .priceBox .price { font-size: 48px; margin: 0 4px; } #plan .planSwiper .courseBoxArea .flex .totalPrice .priceBox .yen { font-size: 12px; margin: 0; } #plan .planSwiper .courseBoxArea .flex .totalPrice .priceBox .yen:after { font-size: 6px; top: -10px; } #plan .planSwiper .courseBoxArea .flex .monthPrice .flex .priceBox .month { font-size: 10px; } #plan .planSwiper .courseBoxArea .flex .monthPrice .flex .priceBox .price { font-size: 20px; } #plan .planSwiper .courseBoxArea .flex .monthPrice .flex .priceBox .yen { font-size: 10px; width: initial; margin: 0; } #plan .planSwiper .courseBoxArea .flex .monthPrice .flex .bunkatsu { font-size: 9px; margin-top: 5px; } #plan .planSwiper .courseBoxArea .bodys .weekdayBox .ttl_aco { border-top: 2px solid #707070; margin-top: 3.4666666667vw; } #plan .planSwiper .courseBoxArea .bodys .weekdayBox .ttl_aco .midashi { color: #000; font-size: 4vw; background: none; margin: 2.6666666667vw auto 0; position: relative; } #plan .planSwiper .courseBoxArea .bodys .weekdayBox .ttl_aco .midashi span { font-size: 5.0666666667vw; padding: 0.2em 0; } #plan .planSwiper .swiper-button-prev, #plan .planSwiper .swiper-button-next { display: none; } #plan .button a { font-size: 16px; width: 300px; height: 56px; margin: 80px auto 0; } #plan .swiper-slide .button a { height: 37px; margin-top: 10px; } } #skinBanner { padding: calc(100vw / var(--viewport) * 120) 0; } @media screen and (min-width:768px) { #skinBanner { text-align: center; padding: 120px 0; } #skinBanner img { width: 980px; } } #needle { color: #fff; text-align: left; background: url(/img/top/needle/bg.png) top left no-repeat, var(--lightBlue); background-size: calc(100vw / var(--viewport) * 360) auto; padding: calc(100vw / var(--viewport) * 374) 0 calc(100vw / var(--viewport) * 108); } #needle h2 { color: var(--yellow); font-size: calc(100vw / var(--viewport) * 64); text-align: center; margin-bottom: calc(100vw / var(--viewport) * 80); } #needle .lead { font-size: calc(100vw / var(--viewport) * 36); line-height: 1.5; } #needle .button a { color: #fff; font-size: calc(100vw / var(--viewport) * 32); font-weight: bold; text-decoration: none; width: calc(100vw / var(--viewport) * 600); height: calc(100vw / var(--viewport) * 112); background: #20396F; display: flex; justify-content: center; align-items: center; border-radius: 50vw; margin: calc(100vw / var(--viewport) * 80) auto 0; } @media screen and (min-width:768px) { #needle { text-align: center; background: var(--lightBlue); padding: 0; } @media screen and (max-width: 1280px) { #needle { width: 1280px; } } #needle .container { max-width: 980px; background: url(/img/top/needle/bg.png) top left no-repeat; background-size: 180px auto; padding: 120px 0 80px; } #needle h2 { font-size: 40px; margin-bottom: 40px; } #needle .lead { font-size: 20px; } #needle .caption { font-size: 11px; margin-top: 40px; } #needle .button a { font-size: 16px; width: 300px; height: 56px; margin: 40px auto 0; } } #waribiki { background: #EEF0F5; padding: calc(100vw / var(--viewport) * 60) 0; } #waribiki h2 { color: var(--lightBlue); font-size: calc(100vw / var(--viewport) * 64); text-align: center; line-height: 1.3; margin-bottom: calc(100vw / var(--viewport) * 180); } #waribiki h2 .sub { font-size: calc(100vw / var(--viewport) * 28); } #waribiki .box { color: #fff; font-weight: bold; background: var(--lightBlue); border-radius: calc(100vw / var(--viewport) * 20); padding: calc(100vw / var(--viewport) * 30) 0 calc(100vw / var(--viewport) * 30) calc(100vw / var(--viewport) * 30); margin-top: calc(100vw / var(--viewport) * 20); position: relative; } #waribiki .box:after { content: ""; display: block; position: absolute; } #waribiki .gakuwari:after { background: url(/img/top/waribiki/icon_gakuwari.png?v2) center center no-repeat; background-size: 100% auto; width: calc(100vw / var(--viewport) * 153); height: calc(100vw / var(--viewport) * 121); right: calc(100vw / var(--viewport) * 39); } #waribiki .norikae:after { background: url(/img/top/waribiki/icon_norikae.png?v2) center center no-repeat; background-size: 100% auto; width: calc(100vw / var(--viewport) * 105); height: calc(100vw / var(--viewport) * 141); right: calc(100vw / var(--viewport) * 38); } #waribiki .pair:after { background: url(/img/top/waribiki/icon_pair.png?v2) center center no-repeat; background-size: 100% auto; width: calc(100vw / var(--viewport) * 169); height: calc(100vw / var(--viewport) * 142); right: calc(100vw / var(--viewport) * 34); } #waribiki .weekday:after { background: url(/img/top/waribiki/icon_weekday.png?v2) center center no-repeat; background-size: 100% auto; width: calc(100vw / var(--viewport) * 162); height: calc(100vw / var(--viewport) * 152); right: calc(100vw / var(--viewport) * 34); } #waribiki .box .flex { line-height: 1.3; justify-content: flex-start; align-items: center; } #waribiki .box .icon { color: #fff; font-size: calc(100vw / var(--viewport) * 50); line-height: 1; height: calc(100vw / var(--viewport) * 66); display: flex; border: 3px solid #fff; margin-right: calc(100vw / var(--viewport) * 10); } #waribiki .box .icon span { padding: 0 calc(100vw / var(--viewport) * 8); height: calc(100vw / var(--viewport) * 66); display: flex; justify-content: center; align-items: center; } #waribiki .box .icon span.bg_white { color: #00BBFF; background: #fff; width: auto; } #waribiki .box .percent { color: var(--yellow); font-size: calc(100vw / var(--viewport) * 50); line-height: 1; display: flex; justify-content: flex-start; align-items: end; } #waribiki .box .percent .number { font-size: calc(100vw / var(--viewport) * 140); } #waribiki .button a { color: #fff; font-size: calc(100vw / var(--viewport) * 32); font-weight: bold; text-decoration: none; width: calc(100vw / var(--viewport) * 600); height: calc(100vw / var(--viewport) * 112); background: #20396F; display: flex; justify-content: center; align-items: center; border-radius: 50vw; margin: calc(100vw / var(--viewport) * 80) auto 0; } @media screen and (max-width:767px) { #waribiki .container { width: 91.47%; } #waribiki .box:first-child { margin-top: 0; } #waribiki .box:after { top: 50%; transform: translateY(-50%); } #waribiki .gakuwari:after { right: calc(100vw / var(--viewport) * 39); } #waribiki .norikae:after { right: calc(100vw / var(--viewport) * 38); } #waribiki .pair:after { right: calc(100vw / var(--viewport) * 34); } #waribiki .weekday:after { right: calc(100vw / var(--viewport) * 34); } #waribiki .box.weekday .icon { flex-direction: column; height: auto; } } @media screen and (min-width:768px) { #waribiki { padding: 60px 0; } @media screen and (max-width: 1280px) { #waribiki { width: 1280px; } } #waribiki h2 { font-size: 40px; margin-bottom: 0; } #waribiki h2 .sub { font-size: 20px; } #waribiki .container { max-width: 1100px; } #waribiki .pc_flex { display: flex; justify-content: space-between; } #waribiki .box { width: 260px; border-radius: 20px; padding: 136px 0 20px; margin-top: 60px; } #waribiki .box:after { height: 92px; top: 24px; left: 0; right: 0; margin: 0 auto; } #waribiki .gakuwari:after { width: 115px; } #waribiki .norikae:after { width: 68px; } #waribiki .pair:after { width: 110px; } #waribiki .weekday:after { width: 98px; } #waribiki .box .flex { line-height: 1.3; flex-direction: column; justify-content: center; align-items: center; } #waribiki .box .icon { font-size: 32px; height: 50px; margin-right: 0; } #waribiki .box .icon span { padding: 0 8px; height: 50px; } #waribiki .box .percent { font-size: 50px; } #waribiki .box .percent .number { font-size: 140px; } #waribiki .button a { font-size: 16px; width: 300px; height: 56px; margin: 40px auto 0; } } #possibleArea { color: var(--lightBlue); background: #fff; padding: calc(100vw / var(--viewport) * 80) 0 calc(100vw / var(--viewport) * 108); } #possibleArea h2 { color: var(--lightBlue); font-size: calc(100vw / var(--viewport) * 64); text-align: center; line-height: 1.3; margin-bottom: calc(100vw / var(--viewport) * 80); } #possibleArea h2 .sub { font-size: calc(100vw / var(--viewport) * 28); } #possibleArea .possibleSwiper { padding-top: calc(100vw / var(--viewport) * 152); padding-bottom: calc(100vw / var(--viewport) * 20); } .possibleSwiper .swiper-slide { margin-bottom: calc(100vw / var(--viewport) * 134); } #possibleArea .possibleSwiper .swiper-pagination { display: flex; justify-content: space-between; top: 0; bottom: initial; } #possibleArea .possibleSwiper .swiper-pagination-bullet { color: var(--lightBlue); font-size: calc(100vw / var(--viewport) * 30); font-weight: 600; text-align: center; width: calc(100vw / var(--viewport) * 208); height: calc(100vw / var(--viewport) * 72); display: flex; justify-content: center; align-items: center; background: #fff; border: 2px solid var(--lightBlue); border-radius: 50vw; opacity: 1; box-sizing: border-box; } #possibleArea .possibleSwiper .swiper-pagination-bullet-active { color: #fff; background: #20396F; border-color: #20396F; } #possibleArea .possibleSwiper .swiper-button-disabled { display: none; } #possibleArea .possibleSwiper .swiper-slide { text-align: center; height: auto; } #possibleArea .possibleSwiper .swiper-slide .left, #possibleArea .possibleSwiper .swiper-slide .right { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; } #possibleArea .possibleSwiper .swiper-slide .left { left: 1px; } #possibleArea .possibleSwiper .swiper-slide .right { right: 1px; } #possibleArea .possibleSwiper .swiper-slide .right li a { margin-left: auto; } #possibleArea .possibleSwiper .swiper-slide li { font-size: calc(100vw / var(--viewport) * 24); font-weight: 600; margin-top: calc(100vw / var(--viewport) * 20); } #possibleArea .possibleSwiper .swiper-slide li:first-child { margin-top: 0; } #possibleArea .possibleSwiper .swiper-slide li a { color: var(--lightBlue); text-align: left; line-height: 1.3; width: calc(100vw / var(--viewport) * 198); height: calc(100vw / var(--viewport) * 56); display: flex !important; align-items: center; border: 1px solid var(--lightBlue); padding-left: calc(100vw / var(--viewport) * 20); box-sizing: border-box; transition: all .4s; } #possibleArea .possibleSwiper .swiper-slide li.line2 a { height: calc(100vw / var(--viewport) * 78); } #possibleArea .possibleSwiper .swiper-slide li.active a { color: #fff; width: calc(100vw / var(--viewport) * 230); background: #20396f; border-color: #20396f; position: relative; } #possibleArea .possibleSwiper .swiper-slide li.active a:after { content: ""; border-right: 2px solid #fff; border-top: 2px solid #fff; border-radius: 2px; width: calc(100vw / var(--viewport) * 17); height: calc(100vw / var(--viewport) * 17); position: absolute; top: calc(50% - calc(100vw / var(--viewport) * 12)); right: calc(100vw / var(--viewport) * 20); transform: rotate(45deg); } #possibleArea .possibleSwiper .swiper-slide .parts { width: 100%; position: absolute; top: 0; left: 0; right: 0; margin: 0 auto; z-index: 1; } #possibleArea .possibleSwiper .swiper-slide .imgBox { width: calc(100vw / var(--viewport) * 320); margin: 0 auto; } #possibleArea .possibleSwiper .swiper-slide .parts img { width: calc(100vw / var(--viewport) * 320); position: absolute; top: 0; left: 0; right: 0; opacity: 0; margin: 0 auto; } #possibleArea .possibleSwiper .swiper-slide .parts img.active { opacity: 1; transition: all .4s; } #possibleArea .possibleSwiper .swiper-slide.hige .imgBox svg { width: calc(100vw / var(--viewport) * 320); height: auto; } #possibleArea .possibleSwiper .swiper-slide.all .imgBox svg { width: calc(100vw / var(--viewport) * 320); height: auto; } #possibleArea .possibleSwiper .swiper-slide.vio .imgBox { background: url(/img/top/possibleArea/bg_vio.png) top center no-repeat; background-size: calc(100vw / var(--viewport) * 320) auto; margin: 0 auto; } #possibleArea .possibleSwiper .swiper-slide.vio .imgBox svg { width: calc(100vw / var(--viewport) * 320); height: auto; } .possibleSwiper .button a { color: var(--lightBlue); font-size: calc(100vw / var(--viewport) * 34); font-weight: bold; text-align: center; display: flex !important; justify-content: center; align-items: center; border: 1px solid var(--lightBlue); width: calc(100vw / var(--viewport) * 450); height: calc(100vw / var(--viewport) * 70); position: absolute; left: 0; right: 0; bottom: calc(100vw / var(--viewport) * -134); margin: 0 auto; } @media screen and (max-width:767px) { #possibleArea .container { width: 91.47%; } #possibleArea .possibleSwiper ~ .swiper-button-prev, #possibleArea .possibleSwiper ~ .swiper-button-next { display: none; } } @media screen and (min-width:768px) { #possibleArea { padding: 60px 0 80px; } @media screen and (max-width: 1280px) { #possibleArea { width: 1280px; } } #possibleArea h2 { font-size: 40px; margin-bottom: 40px; } #possibleArea h2 .sub { font-size: 20px; } #possibleArea .container { max-width: 700px; position: relative; } #possibleArea .possibleSwiper { padding-top: 80px; padding-bottom: 0; } .possibleSwiper .swiper-slide { margin-bottom: 101px; } #possibleArea .possibleSwiper .swiper-pagination { width: 520px; justify-content: space-between; left: 0; right: 0; margin: 0 auto; } #possibleArea .possibleSwiper .swiper-pagination-bullet { font-size: 20px; width: 150px; height: 40px; } #possibleArea .possibleSwiper .swiper-pagination-bullet-active { background: #20396F; } #possibleArea .possibleSwiper .swiper-slide .left { left: 83px; } #possibleArea .possibleSwiper .swiper-slide .right { right: 83px; } #possibleArea .possibleSwiper .swiper-slide li { font-size: 14px; margin-top: 20px; } #possibleArea .possibleSwiper .swiper-slide li:first-child { margin-top: 0; } #possibleArea .possibleSwiper .swiper-slide li a { width: 112px; height: 30px; padding-left: 10px; } #possibleArea .possibleSwiper .swiper-slide li.line2 a { height: 48px; } #possibleArea .possibleSwiper .swiper-slide li.active a { width: 130px; } #possibleArea .possibleSwiper .swiper-slide li.active a:after { width: 8px; height: 8px; top: calc(50% - 3px); right: 10px; } #possibleArea .possibleSwiper .swiper-slide .parts { width: 270px; } #possibleArea .possibleSwiper .swiper-slide.hige .imgBox { width: 270px; } #possibleArea .possibleSwiper .swiper-slide.hige .imgBox svg { width: 270px; } /*#possibleArea .possibleSwiper .swiper-slide.hige .left li a { width: 127px; }*/ /*#possibleArea .possibleSwiper .swiper-slide.hige .left li.active a { width: 135px; }*/ #possibleArea .possibleSwiper .swiper-slide.all .imgBox { background-size: 270px auto; width: 270px; } #possibleArea .possibleSwiper .swiper-slide.all .imgBox svg { width: 270px; } #possibleArea .possibleSwiper .swiper-slide.vio .imgBox { background-size: 273px auto; width: 273px; } #possibleArea .possibleSwiper .swiper-slide.vio .imgBox svg { width: 273px; } #possibleArea .possibleSwiper ~ .swiper-button-prev, #possibleArea .possibleSwiper ~ .swiper-button-next { width: 20px; height: 30px; transform: translateY(-50%); margin-top: 0; background: none; } #possibleArea .possibleSwiper ~ .swiper-button-prev { left: 0; } #possibleArea .possibleSwiper ~ .swiper-button-next { right: 0; } #possibleArea .possibleSwiper ~ .swiper-button-prev:before, #possibleArea .possibleSwiper ~ .swiper-button-next:after { content: ''; width: 20px; height: 30px; background: #fff; display: block; clip-path: polygon(0 0, 0 100%, 100% 50%); pointer-events: none; } #possibleArea .possibleSwiper ~ .swiper-button-prev:before { clip-path: polygon(100% 0, 100% 100%, 0 50%); } .possibleSwiper .button a { font-size: 20px; width: 360px; height: 50px; bottom: -100px; } } /* flow */ #flow { padding: calc(100vw / var(--viewport) * 108) 0; } #flow h2 { font-size: calc(100vw / var(--viewport) * 64); text-align: center; line-height: 1.3; margin-bottom: calc(100vw / var(--viewport) * 80); } #flow h2 .sub { font-size: calc(100vw / var(--viewport) * 28); } #flow .container { width: 100%; } #flow .tabs { width: calc(100vw / var(--viewport) * 686); margin: 0 auto calc(100vw / var(--viewport) * 90); } #flow .tabs li { font-size: calc(100vw / var(--viewport) * 24); width: 48.54%; display: flex; height: calc(100vw / var(--viewport) * 71); justify-content: center; align-items: center; border: calc(100vw / var(--viewport) * 2) solid #000; border-radius: calc(100vw / var(--viewport) * 20); box-sizing: border-box; cursor: pointer; } #flow .tabs li.active { color: #fff; background: #00AAFA; border: calc(100vw / var(--viewport) * 2) solid #00AAFA; border: none; cursor: default; } #flow .swiper-slide { height: auto; padding-top: calc(100vw / var(--viewport) * 80); padding-bottom: calc(100vw / var(--viewport) * 50); } #flow .swiper-slide .box { height: 100%; background: #EEF0F5; border-radius: calc(100vw / var(--viewport) * 20); padding: 0 calc(100vw / var(--viewport) * 20) calc(100vw / var(--viewport) * 20); filter: drop-shadow(0 calc(100vw / var(--viewport) * 8) calc(100vw / var(--viewport) * 8) rgba(0,0,0,.25)); } #flow .swiper-slide .box:before { content: ""; background: #EEF0F5; width: calc(100vw / var(--viewport) * 160); height: calc(100vw / var(--viewport) * 160); position: absolute; top: calc(100vw / var(--viewport) * -80); left: 0; right: 0; margin: 0 auto; display: block; border-radius: 50%; } #flow .swiper-slide .num { color: #00AAFA; font-size: calc(100vw / var(--viewport) * 80); text-align: center; display: flex; justify-content: center; align-items: center; position: absolute; top: calc(100vw / var(--viewport) * -40); left: 0; right: 0; } #flow .swiper-slide .box .title { color: #00AAFA; font-size: calc(100vw / var(--viewport) * 40); font-weight: bold; line-height: 1.3; text-align: center; height: calc(100vw / var(--viewport) * 104); /* 2行分を確保 */ padding-top: calc(100vw / var(--viewport) * 60); position: relative; z-index: 11; } #flow .swiper-slide .box .time { height: calc(100vw / var(--viewport) * 105); /* 所要時間の分を確保 */ position: relative; } #flow .swiper-slide .box .time span { font-size: calc(100vw / var(--viewport) * 24); font-weight: normal; width: calc(100vw / var(--viewport) * 326); height: calc(100vw / var(--viewport) * 44); background: #fff; border-radius: 50vw; display: flex; justify-content: center; align-items: center; position: absolute; left: 0; right: 0; bottom: calc(100vw / var(--viewport) * 40); margin: 0 auto; } #flow .swiper-slide .box img { width: 100%; } #flow .swiper-slide .under { color: #000; padding: calc(100vw / var(--viewport) * 40) 0 0; } #flow .swiper-slide .under .text { font-size: calc(100vw / var(--viewport) * 24); font-weight: 500; line-height: 1.8; } #flow .swiper-slide .under .text .small { font-size: calc(100vw / var(--viewport) * 20); line-height: 1.5; display: inline-block; } #flow .swiper-button-next, #flow .swiper-button-prev { width: calc(100vw / var(--viewport) * 80); height: calc(100vw / var(--viewport) * 80); background: #00AAFA; position: absolute; top: 50%; transform: translateY(-50%); } #flow .swiper-button-prev { left: calc(100vw / var(--viewport) * 52); } #flow .swiper-button-next { right: calc(100vw / var(--viewport) * 52); } #flow .swiper-button-next { right: calc(100vw / var(--viewport) * 32); } #flow .swiper-button-next:after, #flow .swiper-button-prev:after { content: ""; display: block; border-right: calc(100vw / var(--viewport) * 4) solid #fff; border-top: calc(100vw / var(--viewport) * 4) solid #fff; border-radius: 2px; width: calc(100vw / var(--viewport) * 28); height: calc(100vw / var(--viewport) * 28); position: absolute; top: calc(100vw / var(--viewport) * 25); } #flow .swiper-button-prev:after { transform: rotate(-135deg); left: calc(100vw / var(--viewport) * 32); } #flow .swiper-button-next:after { transform: rotate(45deg); right: calc(100vw / var(--viewport) * 32); } #flow .body02 { display: none; } @media screen and (max-width: 1280px) and (min-width: 768px) { #flow { width: 1280px; } } @media screen and (min-width:768px) { #flow { padding: 60px 0 80px; } #flow .main-width { width: auto; } #flow h2 { font-size: 40px; margin-bottom: 76px; } #flow h2 .sub { font-size: 20px; } #flow .tabs { width: 600px; margin: 0 auto 68px; } #flow .tabs li { font-size: 21px; width: 292px; height: 57px; border: 2px solid #000; border-radius: 20px; } #flow .tabs li.active { border: 2px solid #00AAFA; } #flow .bodys { position: relative; } #flow .swiper-slide { width: 450px; height: auto; padding-top: 60px; padding-bottom: 40px; } #flow .swiper-slide .box { border-radius: 20px; padding: 0 15px 10px; filter: drop-shadow(0 8px 8px rgba(0,0,0,.25)); } #flow .swiper-slide .box:before { width: 120px; height: 120px; top: -60px; } #flow .swiper-slide .num { font-size: 60px; top: -40px; } #flow .swiper-slide .box .title { font-size: 24px; height: 63px; /* 2行分を確保 */ padding-top: 45px; } #flow .swiper-slide .box .time { height: 75px; /* 所要時間の分を確保 */ position: relative; } #flow .swiper-slide .box .time span { font-size: 18px; width: 245px; height: 33px; bottom: 30px; } #flow .swiper-slide .under { padding: 20px 0 0; } #flow .swiper-slide .under .text { font-size: 16px; } #flow .swiper-slide .under .text .small { font-size: 14px; } #flow .buttons { width: 1440px; position: absolute; top: 50%; transform: translateY(-50%); left: 0; right: 0; margin: 0 auto; z-index: 10; } #flow .swiper-button-next, #flow .swiper-button-prev { width: 60px; height: 60px; } #flow .swiper-button-prev { left: 0; } #flow .swiper-button-next { right: 0; } #flow .swiper-button-next:after, #flow .swiper-button-prev:after { border-right: 4px solid #fff; border-top: 4px solid #fff; width: 21px; height: 21px; top: 17px; } #flow .swiper-button-prev:after { left: 22px; } #flow .swiper-button-next:after { right: 22px; } } #clinic { padding-bottom: calc(100vw / var(--viewport) * 7); } #clinic .note { text-align: center; transform: translateY(calc(40px + (80 - 40) * ((100vw - 320px) / (767 - 320)))); } #clinic .note span { position: relative; margin-left: calc(10px + (20 - 10) * ((100vw - 320px) / (767 - 320))); } #clinic .note span:before { position: absolute; top: -8px; left: -25px; width: 17px; height: 36px; content: ""; background: url(/img/top/open.png) no-repeat; background-size: contain; } #clinic .note span:after { position: absolute; top: -8px; right: -22px; width: 17px; height: 36px; content: ""; background: url(/img/top/close.png) no-repeat; background-size: contain; } @media screen and (min-width:768px) { #clinic { padding-bottom: 0; } #clinic .note { transform: translateY(80px); } #clinic .note span { margin-left: 20px; } #clinic .map-title { background-position: 59% 51%; } } .faq-sec .title-01 { margin-bottom: 0; } .faq-sec h2 { text-align: center; margin-bottom: calc(35px + (70 - 35) * ((100vw - 320px) / (767 - 320))); } @media screen and (min-width:768px) { .faq-sec h2 { margin-bottom: 76px; } } #doctor { padding: calc(100vw / var(--viewport) * 160) 0; } #doctor img { width: calc(100vw / var(--viewport) * 348); } #doctor .container .text { font-size: calc(100vw / var(--viewport) * 28); font-weight: 600; line-height: 2; margin-top: calc(100vw / var(--viewport) * 40); } @media screen and (max-width:767px) { #doctor .container { width: 91.47%; position: relative; } #doctor .container .text01, #doctor .container .text02, #doctor .container .text03 { font-weight: 600; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; position: absolute; } #doctor .container .text01 { font-size: calc(100vw / var(--viewport) * 20); letter-spacing: 0.1em; top: calc(100vw / var(--viewport) * 688); right: calc(100vw / var(--viewport) * 233); } #doctor .container .text02 { font-size: calc(100vw / var(--viewport) * 32); letter-spacing: 0.1em; top: calc(100vw / var(--viewport) * 688); right: calc(100vw / var(--viewport) * 269); } #doctor .container .text03 { font-size: calc(100vw / var(--viewport) * 52); line-height: 1.5; letter-spacing: 0.1em; top: 0; right: calc(100vw / var(--viewport) * 48); } } @media screen and (min-width:768px) { #doctor { padding: 120px 0; } #doctor .container { max-width: 700px; } #doctor img { width: 157px; height: auto; margin-right: 36px; } #doctor .pc_flex { display: flex; justify-content: space-between; } #doctor .container .text01 { font-size: 10px; } #doctor .container .text02 { font-size: 16px; margin-top: 8px; } #doctor .container .text03 { font-size: 32px; line-height: 1.5; margin-top: 20px; } #doctor .container .text { font-size: 16px; margin-top: 20px; } } .overlay_reasons { background-color: rgba(0, 0, 0, 0.6); bottom: 0; display: none; left: 0; position: fixed; right: 0; top: 0; z-index: 1003; } .overlay_reasons .balloon { color: #fff; width: 90%; background: #333; padding: calc(100vw / var(--viewport) * 40) calc(100vw / var(--viewport) * 32); position: relative; top: calc(50% - calc(100vw / var(--viewport) * 65)); left: 50%; transform: translate(-50%, -50%); box-sizing: border-box; } .overlay_reasons .balloon .midashi { font-size: calc(100vw / var(--viewport) * 32); text-align: center; line-height: 1.6; margin-bottom: calc(100vw / var(--viewport) * 40); } .overlay_reasons .balloon .flex img { width: 49.56%; } .overlay_reasons .balloon .detail { font-weight: normal; padding-left: 4.2666666667vw; margin-top: 5.3333333333vw; } .overlay_reasons .balloon .detail .flex { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .overlay_reasons .balloon .detail .flex dt { width: 16vw; border-right: 2px solid #fff; } .overlay_reasons .balloon .detail .flex dd { width: calc(100% - 16vw); padding-left: 3.2vw; } .overlay_reasons .balloon .detail .flex:nth-child(n+2) { margin-top: 2.1333333333vw; } .overlay_reasons .balloon .close { font-size: calc(100vw / var(--viewport) * 32); font-weight: bold; text-align: center; width: calc(100vw / var(--viewport) * 420); height: calc(100vw / var(--viewport)* 112); display: flex; justify-content: center; align-items: center; position: absolute; left: 0; right: 0; bottom: calc(100vw / var(--viewport) * -130); margin: 0 auto; background: var(--lightBlue); border-radius: 50vw; cursor: pointer; } @media screen and (min-width:768px) { .overlay_reasons .balloon { width: 640px; padding: 28px 28px 50px; top: calc(50% - 40px); } .overlay_reasons .balloon .midashi { font-size: 27px; margin-bottom: 34px; } .overlay_reasons .balloon .detail { padding-left: 27px; margin-top: 34px; } .overlay_reasons .balloon .detail .flex dt { width: 102px; } .overlay_reasons .balloon .detail .flex dd { width: calc(100% - 102px); padding-left: 20px; } .overlay_reasons .balloon .detail .flex:nth-child(n+2) { margin-top: 14px; } .overlay_reasons .balloon .close { font-size: 16px; width: 300px; height: 56px; bottom: -80px; } } .after-text-pool .after-text { display: none; } .after-text-pool .after-text.active { display: block; } .case-image { padding: calc(100vw / var(--viewport) * 40) 0 calc(100vw / var(--viewport) * 108); } .case-image .container { width: 100%; } @media screen and (min-width:768px) { .case-image .container { width: 100%; max-width: 1165px; } } .case-image h2 { color: var(--lightBlue); font-size: calc(100vw / var(--viewport) * 64); text-align: center; line-height: 1.3; margin-bottom: calc(100vw / var(--viewport) * 80); } .case-image h2 .sub { font-size: calc(100vw / var(--viewport) * 28); } @media screen and (min-width:768px) { .case-image { padding: 60px 0 80px; } .case-image h2 { font-size: 40px; margin-bottom: 40px; } .case-image h2 .sub { font-size: 20px; } } .case-image .case-image__tab { position: relative; z-index: 0; } .case-image .case-image__tab-content { position: relative; z-index: 0; } .case-image .case-image__tab-content .image-compare-wrapper:not(.is-active) { position: absolute; top: 0; display: none; width: 100%; } .case-image .case-image__block-header { position: relative; z-index: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: calc(100vw * (10 / 375)); margin-bottom: calc(100vw * (-30 / 375)); } @media screen and (min-width:768px) { .case-image .case-image__block-header { width: 328px; justify-content: space-between; gap: 10px; margin: 0 auto; } } .case-image .case-image__block-header button { -webkit-appearance: none; -moz-appearance: none; appearance: none; vertical-align: middle; color: inherit; font: inherit; background: transparent; padding: 0; margin: 0; border: none; border-radius: 0; text-align: inherit; text-transform: inherit; color: #222; font-size: calc(100vw / var(--viewport) * 26); font-weight: bold; background: #BFEAFE; border-radius: 50vw; display: flex; justify-content: center; align-items: center; width: calc(100vw / var(--viewport) * 130); height: calc(100vw / var(--viewport) * 61); } @media screen and (min-width:768px) { .case-image .case-image__block-header button { font-size: 13px; width: 70px; height: 35px; } } .case-image .case-image__block-header button.is-active { color: #fff; background: #00AAFA; } .case-image .case-image__block-body { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; border: 1px solid #fff; gap: calc(100vw * (20 / 375)); padding: calc(100vw * (55 / 375)) calc(100vw * (16 / 375)) 0; } @media screen and (min-width:768px) { .case-image .case-image__block-body { width: 664px; gap: 20px; padding: 0; margin: 19px auto 0; } } .case-image .icv__control .icv__control-line { background: #222 !important; } .case-image .icv__circle { background: rgba(255,255,255,0.6); border-color: #222 !important; } .case-image .icv__control .icv__arrow-wrapper svg path { stroke: #222 !important; } .case-image .icv__control .icv__arrow-wrapper:nth-child(1) { transform: translateX(5px) !important; } .case-image .icv__control .icv__arrow-wrapper:nth-child(1) svg { transform: scale(0.7, 1) rotateZ(180deg) !important; } .case-image .icv__control .icv__arrow-wrapper:nth-child(2) { transform: translateX(-5px) !important; } .case-image .icv__control .icv__arrow-wrapper:nth-child(2) svg { transform: scale(0.7, 1) rotateZ(0deg) !important; } .case-image .image-compare-under .flex { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .case-image .image-compare-under .flex > div { text-align: center; width: 50%; } .case-image .image-compare-under .flex > div.left, .case-image .image-compare-under .flex > div.right { color: #222; background: #F0F0F0; padding: calc(100vw * (2.5 / 375)) calc(100vw * (4 / 375)) calc(100vw * (20 / 375)); position: relative; } @media (min-width: 768px), print { .case-image .image-compare-under .flex > div.left, .case-image .image-compare-under .flex > div.right { padding: 5px 5px 40px; } } .case-image .image-compare-under .flex > div.left .midashi, .case-image .image-compare-under .flex > div.right .midashi { font-size: 20px; font-weight: bold; line-height: 1.8; } @media (max-width: 767.98px) { .case-image .image-compare-under .flex > div.left .midashi, .case-image .image-compare-under .flex > div.right .midashi { font-size: calc(100vw * (15 / 375)); } } .case-image .image-compare-under .flex > div.left .text, .case-image .image-compare-under .flex > div.right .text { font-size: calc(100vw / var(--viewport) * 20); font-weight: normal; line-height: 1.5; margin-bottom: calc(100vw * (2.5 / 375)); } @media (min-width: 768px), print { .case-image .image-compare-under .flex > div.left .text, .case-image .image-compare-under .flex > div.right .text { font-size: 12px; margin-bottom: 0.5em; } } @media (min-width: 768px), print { .case-image .image-compare-under .flex > div.left .flex, .case-image .image-compare-under .flex > div.right .flex { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 15px; } } .case-image .case-image__tab-content .image-compare-wrapper:nth-child(n+2) .image-compare-under .after-text-pool ~ .flex { display: none; /* ヒゲ以外の回数ボタンを非表示 */ } .case-image .image-compare-under .flex > div.left .flex button, .case-image .image-compare-under .flex > div.right .flex button { color: #fff; text-align: center; width: calc(100vw * (68 / 375)); height: calc(100vw * (22 / 375)); background: #00AAFA; border: none; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-filter: drop-shadow(3px 3px 2px #425D69); filter: drop-shadow(3px 3px 2px #425D69); } @media (min-width: 768px), print { .case-image .image-compare-under .flex > div.left .flex button, .case-image .image-compare-under .flex > div.right .flex button { width: 140px; height: 30px; } } .case-image .image-compare-under .flex > div.left .flex button[disabled], .case-image .image-compare-under .flex > div.right .flex button[disabled] { opacity: 0; visibility: hidden; } .case-image .image-compare-under .flex > div.left .flex button.arrow-left svg, .case-image .image-compare-under .flex > div.left .flex button.arrow-right svg, .case-image .image-compare-under .flex > div.right .flex button.arrow-left svg, .case-image .image-compare-under .flex > div.right .flex button.arrow-right svg { width: calc(100vw * (15 / 375)); height: auto; } @media (min-width: 768px), print { .case-image .image-compare-under .flex > div.left .flex button.arrow-left svg, .case-image .image-compare-under .flex > div.left .flex button.arrow-right svg, .case-image .image-compare-under .flex > div.right .flex button.arrow-left svg, .case-image .image-compare-under .flex > div.right .flex button.arrow-right svg { width: 22px; } } .case-image .image-compare-under .flex > div.left .flex button.arrow-left, .case-image .image-compare-under .flex > div.right .flex button.arrow-left { border-radius: 50vw 0 0 50vw; } .case-image .image-compare-under .flex > div.left .flex button.arrow-left svg, .case-image .image-compare-under .flex > div.right .flex button.arrow-left svg { -webkit-transform: scale(0.7, 1) rotateZ(180deg); transform: scale(0.7, 1) rotateZ(180deg); } .case-image .image-compare-under .flex > div.left .flex button.arrow-right, .case-image .image-compare-under .flex > div.right .flex button.arrow-right { border-radius: 0 50vw 50vw 0; } .case-image .image-compare-under .flex > div.left .flex button.arrow-right svg, .case-image .image-compare-under .flex > div.right .flex button.arrow-right svg { -webkit-transform: scale(0.7, 1) rotateZ(0deg); transform: scale(0.7, 1) rotateZ(0deg); } .case-image .image-compare-under .flex > div.left:before, .case-image .image-compare-under .flex > div.left:after, .case-image .image-compare-under .flex > div.right:before, .case-image .image-compare-under .flex > div.right:after { width: 100%; height: calc(100vw * (16 / 375)); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: absolute; left: 0; bottom: 0; } @media (min-width: 768px), print { .case-image .image-compare-under .flex > div.left:before, .case-image .image-compare-under .flex > div.left:after, .case-image .image-compare-under .flex > div.right:before, .case-image .image-compare-under .flex > div.right:after { height: 30px; } } .case-image .image-compare-under .flex > div.left:before, .case-image .image-compare-under .flex > div.right:before { content: ""; background: #BFEAFE; } .case-image .image-compare-under .flex > div.left:after, .case-image .image-compare-under .flex > div.right:after { color: #222; font-size: 20px; font-family: "Oswald"; font-weight: bold; letter-spacing: 0.1em; } @media (max-width: 767.98px) { .case-image .image-compare-under .flex > div.left:after, .case-image .image-compare-under .flex > div.right:after { font-size: calc(100vw * (13 / 375)); } } .case-image .image-compare-under .flex > div.left { border-right: 1px solid #222; } .case-image .image-compare-under .flex > div.left:after { content: "BEFORE"; } .case-image .image-compare-under .flex > div.right { border-left: 1px solid #222; } .case-image .image-compare-under .flex > div.right:after { content: "AFTER"; } .case-image .case-image__block-footer { background: #F0F0F0; padding: calc(100vw / var(--viewport) * 32) 0; } .case-image .case-image__block-footer .footer-content { display: none; opacity: 0; transition: opacity 0.3s ease; } .case-image .case-image__block-footer .footer-content.active { display: block; opacity: 1; } .case-image .case-image__block-footer dl { font-size: calc(100vw / var(--viewport) * 26); width: 91.47%; display: flex; justify-content: flex-start; padding: calc(100vw / var(--viewport) * 20) 0; border-bottom: 2px solid #000; margin: 0 auto; } .case-image .case-image__block-footer .pc_flex div:nth-child(1) dl:first-child { border-top: 2px solid #000; } .case-image .case-image__block-footer dt, .case-image .case-image__block-footer dd { font-weight: 500; } .case-image .case-image__block-footer dt { text-align: center; width: calc(100vw / var(--viewport) * 140); margin-right: calc(100vw / var(--viewport) * 40); } @media screen and (min-width:768px) { .case-image .case-image__block-footer { padding: 18px 20px; } .case-image .case-image__block-footer .pc_flex { display: flex; justify-content: space-between; } .case-image .case-image__block-footer .pc_flex div:nth-child(2) dl:first-child { border-top: 2px solid #000; } .case-image .case-image__block-footer .pc_flex div { width: 48%; } .case-image .case-image__block-footer dl { font-size: 13px; width: 100%; padding: 10px 0; } .case-image .case-image__block-footer dt { width: 100px; margin-right: 0; } } .case-image .button a { color: #fff; font-size: calc(100vw / var(--viewport) * 32); font-weight: bold; text-decoration: none; width: calc(100vw / var(--viewport) * 600); height: calc(100vw / var(--viewport) * 112); background: #20396F; display: flex; justify-content: center; align-items: center; border-radius: 50vw; margin: calc(100vw / var(--viewport) * 80) auto 0; } @media screen and (min-width:768px) { .case-image .button a { font-size: 16px; width: 300px; height: 56px; margin: 80px auto 0; } } #medical { color: #000; line-height: 1.5; letter-spacing: 0.05em; position: relative; } #medical * { box-sizing: border-box; } #medical .balloon--blue { color: #fff; font-size: calc(100vw / var(--viewport) * 32); display: flex; justify-content: center; align-items: center; width: max-content; height: calc(100vw / var(--viewport) * 72); background: #002882; padding: 0 0.8em; margin: 0 auto calc(100vw / var(--viewport) * 70); position: relative; } #medical .balloon--blue:before { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-25%) translateY(-50%); border: calc(100vw / var(--viewport) * 26) solid transparent; border-left: calc(100vw / var(--viewport) * 26) solid #002882; z-index: -1; } #medical h2 { font-size: calc(100vw / var(--viewport) * 80); font-weight: bold; line-height: 0.8; margin-bottom: calc(100vw / var(--viewport) * 160); position: relative; } #medical h2 .small { font-size: calc(100vw / var(--viewport) * 40); } #medical h2:after { content: ""; background: #000; width: 2px; height: calc(100vw / var(--viewport) * 80); position: absolute; bottom: calc(100vw / var(--viewport) * -120); left: 0; right: 0; margin: 0 auto; } #medical .lead { font-size: calc(100vw / var(--viewport) * 40); margin-bottom: calc(100vw / var(--viewport) * 80); } #medical .font_red { color: #FF0101; } #medical .lead .big { font-size: calc(100vw / var(--viewport) * 56); } #medical .pc_flex .mainContent { text-align: center; } #medical .pc_flex .scrollContent { background: #D9D9D9; padding: calc(100vw / var(--viewport) * 40) calc(100vw / var(--viewport) * 32) calc(100vw / var(--viewport) * 188); position: relative; } #medical .pc_flex .scrollContent .box { background: #fff; border-radius: calc(100vw / var(--viewport) * 20); overflow: hidden; } #medical .pc_flex .scrollContent .box:nth-child(n+2) { margin-top: calc(100vw / var(--viewport) * 20); } #medical .pc_flex .scrollContent .box .midashi { color: #fff; font-size: calc(100vw / var(--viewport) * 24); text-align: center; background: #002882; height: calc(100vw / var(--viewport) * 44); display: flex; justify-content: center; align-items: center; } #medical .pc_flex .scrollContent .box .innerBox { padding: calc(100vw / var(--viewport) * 20) calc(100vw / var(--viewport) * 16); } #medical .pc_flex .scrollContent .box .innerBox .leftBox, #medical .pc_flex .scrollContent .box .innerBox .rightBox { width: 48.47%; } #medical .pc_flex .scrollContent .box .innerBox .title { font-size: calc(100vw / var(--viewport) * 20); text-align: center; border-radius: 50vw; height: calc(100vw / var(--viewport) * 40); display: flex; justify-content: center; align-items: center; margin-bottom: calc(100vw / var(--viewport) * 20); } #medical .pc_flex .scrollContent .box .innerBox .leftBox .title { color: #fff; background: #00AAFA; } #medical .pc_flex .scrollContent .box .innerBox .rightBox .title { color: #00AAFA; background: #D9D9D9; } #medical .pc_flex .scrollContent .box .innerBox .icon { font-size: calc(100vw / var(--viewport) * 40); text-align: center; line-height: 1; } #medical .pc_flex .scrollContent .box .innerBox .text { font-size: calc(100vw / var(--viewport) * 20); font-weight: normal; text-align: center; margin-top: calc(100vw / var(--viewport) * 20); } #medical .pc_flex .scrollContent .box .innerBox .text .semiBig { font-size: calc(100vw / var(--viewport) * 24); } #medical .pc_flex .scrollContent .box .innerBox .text .big { font-size: calc(100vw / var(--viewport) * 28); } #medical .pc_flex .scrollContent .caption { font-size: calc(100vw / var(--viewport) * 16); text-align: center; margin-top: calc(100vw / var(--viewport) * 20); } @media screen and (max-width:767px) { #medical .pc_flex .mainContent { background: url(/img/top/medical/bg_medical.jpg) center center no-repeat; background-size: cover; padding: calc(100vw / var(--viewport) * 120) 0 1px; position: relative; z-index: -5; } #medical .pc_flex .mainContent:after { content: ""; background-color: rgba(255,255,255,.7); width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: -5; } #medical .pc_flex .scrollContent { max-height: calc(100vw / var(--viewport) * 1217); transition: max-height .6s; overflow: hidden; } #medical .pc_flex .scrollContent.active { max-height: 2000px; } #medical .pc_flex .button { width: 100%; height: calc(100vw / var(--viewport) * 148); background: linear-gradient(rgba(217,217,217,0), #D9D9D9); position: absolute; left: 0; bottom: 0; padding: calc(100vw / var(--viewport) * 40) 0 0; box-sizing: border-box; } #medical .pc_flex .button .buttonInner { color: #fff; font-size: calc(100vw / var(--viewport) * 24); background: #696969; border-radius: 50vw; width: calc(100vw / var(--viewport) * 450); height: calc(100vw / var(--viewport) * 68); display: flex; justify-content: center; align-items: center; margin: 0 auto; cursor: pointer; } #medical .pc_flex .button .buttonInner span { padding-right: calc(100vw / var(--viewport) * 44); position: relative; } #medical .pc_flex .button .buttonInner span:after { content: ""; border-right: 2px solid #fff; border-bottom: 2px solid #fff; border-radius: 2px; width: calc(100vw / var(--viewport) * 17); height: calc(100vw / var(--viewport) * 17); position: absolute; top: calc(50% - calc(100vw / var(--viewport) * 6)); right: 0; transform: translateY(-50%) rotate(45deg); } #medical .pc_flex .button .buttonInner.active span:after { top: calc(50% + calc(100vw / var(--viewport) * 6)); transform: translateY(-50%) rotate(225deg); } #medical .pc_flex .bg_btn { background: #D9D9D9; padding: 1px 0 16%; } } @media screen and (min-width:768px) { #medical { background: url(/img/top/medical/bg_medical.jpg) center center no-repeat; background-size: cover; padding: 60px 0; } #medical:after { content: ""; background-color: rgba(255,255,255,.7); width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; pointer-events: none; } #medical .balloon--blue { font-size: 16px; height: 36px; padding: 0 0.8em; margin: 0 auto 33px; } #medical .balloon--blue:before { border: 13px solid transparent; border-left: 13px solid #002882; } #medical h2 { font-size: 40px; margin-bottom: 80px; } #medical h2 .small { font-size: 20px; } #medical h2:after { height: 40px; bottom: -60px; } #medical .lead { font-size: 20px; margin-bottom: 40px; } #medical .lead .big { font-size: 28px; } #medical .pc_flex { width: 1040px; display: flex; justify-content: space-between; align-items: center; margin: 0 auto; } #medical .pc_flex .mainContent { width: 500px; z-index: 10; } #medical .pc_flex .mainContent .btn { margin-top: 0; } #medical .pc_flex .scrollContent { width: 500px; height: 600px; background: #D9D9D9; overflow-y: scroll; z-index: 10; } #medical .pc_flex .scrollContent { padding: 20px; } #medical .pc_flex .scrollContent .box { border-radius: 10px; } #medical .pc_flex .scrollContent .box:nth-child(n+2) { margin-top: 10px; } #medical .pc_flex .scrollContent .box .midashi { font-size: 14px; height: 28px; } #medical .pc_flex .scrollContent .box .innerBox { padding: 10px 20px; } #medical .pc_flex .scrollContent .box .innerBox .leftBox, #medical .pc_flex .scrollContent .box .innerBox .rightBox { width: 44.44%; } #medical .pc_flex .scrollContent .box .innerBox .title { font-size: 12px; height: 22px; margin-bottom: 10px; } #medical .pc_flex .scrollContent .box .innerBox .icon { font-size: 20px; } #medical .pc_flex .scrollContent .box .innerBox .text { font-size: 14px; margin-top: 10px; } #medical .pc_flex .scrollContent .box .innerBox .text .semiBig { font-size: 14px; } #medical .pc_flex .scrollContent .box .innerBox .text .big { font-size: 18px; } #medical .pc_flex .scrollContent .caption { font-size: 10px; margin-top: 10px; } #medical .pc_flex .scrollContent .button { display: none; } } .courseBoxArea.campaign .bodys > div > .flex, .courseBoxArea.campaign .body_aco > .flex { padding: 5.3333333333vw 3.2vw; } @media screen and (min-width:768px) { .courseBoxArea.campaign .bodys > div > .flex, .courseBoxArea.campaign .body_aco > .flex { padding: 20px 12px; } } /*social*/ @media screen and (max-width:767px) { .social-block { width: 100%; margin-right: 0; } .social-inner .social-block:last-child { overflow: hidden; } .twitter-icon, .instagram-icon, .facebook-icon { width: calc(24px + (52 - 24) * ((100vw - 320px) / (767 - 320))); margin-right: calc(7px + (15 - 7) * ((100vw - 320px) / (767 - 320))); } .social-inner { display: block; padding-top: calc(48px + (100 - 48) * ((100vw - 320px) / (767 - 320))); padding-bottom: calc(55px + (120 - 55) * ((100vw - 320px) / (767 - 320))); } .social-show { margin-top: calc(22px + (50 - 22) * ((100vw - 320px) / (767 - 320))); margin-bottom: calc(38px + (82 - 38) * ((100vw - 320px) / (767 - 320))); border-radius: calc(3px + (5 - 3) * ((100vw - 320px) / (767 - 320))); } .social-show.twitter { /*height: calc(170px + (410 - 170) * ((100vw - 320px) / (767 - 320)));*/ height: auto; text-align: center; } .social-show.instagram { height: calc(270px + (630 - 270) * ((100vw - 320px) / (767 - 320))); } .social-show.facebook { /*height: calc(180px + (424 - 180) * ((100vw - 320px) / (767 - 320)));*/ height: auto; margin-bottom: 0; text-align: center; } } .skipLinkTop { background: #486691; padding: calc(100vw / var(--viewport) * 40) 0; } .skipLinkTop ul { width: calc(100vw / var(--viewport) * 686); display: flex; flex-wrap: wrap; gap: calc(100vw / var(--viewport) * 16); margin: 0 auto; } .skipLinkTop ul li { width: 48.83%; } .skipLinkTop ul li a { color: #486691; font-weight: bold; background: #fff; height: calc(100vw / var(--viewport) * 80); display: flex; justify-content: flex-start; align-items: center; border-radius: calc(100vw / var(--viewport) * 10); padding: 0 calc(100vw / var(--viewport) * 20); position: relative; } .skipLinkTop ul li a:before { content: ""; width: calc(100vw / var(--viewport) * 48); height: calc(100vw / var(--viewport) * 48); margin-right: calc(100vw / var(--viewport) * 20); } .skipLinkTop ul li:nth-child(1) a:before { background: url(/img/top/skipLinkTop/icon01.svg) center center no-repeat; background-size: 100% auto; } .skipLinkTop ul li:nth-child(2) a:before { background: url(/img/top/skipLinkTop/icon02.svg) center center no-repeat; background-size: 100% auto; } .skipLinkTop ul li:nth-child(3) a:before { background: url(/img/top/skipLinkTop/icon03.svg) center center no-repeat; background-size: 100% auto; } .skipLinkTop ul li:nth-child(4) a:before { background: url(/img/top/skipLinkTop/icon04.svg) center center no-repeat; background-size: 100% auto; } .skipLinkTop ul li:nth-child(5) a:before { background: url(/img/top/skipLinkTop/icon05.svg) center center no-repeat; background-size: 100% auto; } .skipLinkTop ul li:nth-child(6) a:before { background: url(/img/top/skipLinkTop/icon06.svg) center center no-repeat; background-size: 100% auto; } .skipLinkTop ul li a:after { content: ""; border-right: calc(100vw / var(--viewport) * 3) solid #486691; border-top: calc(100vw / var(--viewport) * 3) solid #486691; border-radius: 2px; width: calc(100vw / var(--viewport) * 17); height: calc(100vw / var(--viewport) * 17); position: absolute; top: calc(50% - (calc(100vw / var(--viewport) * 17) / 2)); right: calc(100vw / var(--viewport) * 23); transform: translateY(-50%) rotate(135deg); } #merit, #medical, #flow, #faq { position: relative; } #merit:before, #medical:before, #flow:before, #faq:before { content: ""; width: calc(100vw / var(--viewport) * 115); height: calc(100vw / var(--viewport) * 115); background: url(/img/top/icon_beginner.svg) center center no-repeat; background-size: 100% auto; position: absolute; top: calc(100vw / var(--viewport) * 88); left: calc(100vw / var(--viewport) * 45); z-index: 10; } .news_area { overflow-y: auto; max-height: 25em; } .news_area .category { font-weight: bold; font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "游ゴシック", "Yu Gothic", sans-serif; } .news_area .new { color: #c52b69; margin-left: 1em; } #slide-clinic1 ul, #slide-clinic2 ul { display: block; } .white-bg-block { align-items: center; } .white-bg-block .text { padding-left: 6%; margin-right: 6.5%; } .white-bg-block .text01 { font-size: 1em; } .white-bg-block .text02 { font-size: 1.15em; } .white-bg-block .text03 { font-size: 1.42em; } .doctor_area h2{ color: #000; font-size: calc(100vw / var(--viewport) * 64); text-align: center; line-height: 1.3; margin-bottom: calc(100vw / var(--viewport) * 80); } #doctor .doctor_career { font-weight: normal; line-height: 1.25; } #doctor .doctor_career .doctor_career_title { font-weight: bold; margin-top: 6%; } #doctor .doctor_career .doctor_career_title:before { content: ""; display: inline-block; width: 3vw; height: 3vw; background: #00aafa; margin-right: 2%; vertical-align: middle; } #doctor .doctor_career .doctor_career_txt { margin-top: 2%; } #doctor .button a { color: #fff; font-size: calc(100vw / var(--viewport) * 32); font-weight: bold; text-decoration: none; width: calc(100vw / var(--viewport) * 600); height: calc(100vw / var(--viewport) * 112); background: #20396F; display: flex; justify-content: center; align-items: center; border-radius: 50vw; margin: calc(100vw / var(--viewport) * 80) auto 0; } .midashi.badge, .midashi.badgeNatsumae{ position: relative; } .midashi.badge:after{ content: ""; background: url(/img/common/ico_campaign_stamp.png?summer) no-repeat; background-size: contain; width: calc(100vw / var(--viewport) * 130); height: calc(100vw / var(--viewport) * 130); position: absolute; right: 1vw; top: -2vw; } .midashi.badgeNatsumae:after { content: "" !important; background: url(/img/common/campaign/icon_stamp.png) no-repeat; background-size: contain; width: calc(100vw / var(--viewport) * 130); height: calc(100vw / var(--viewport) * 130); position: absolute; right: 1vw; top: -2vw; } .priceBox .yen.tax { display: inline-block; } body.index #plan .swiper-slide .button a { width: 100%; } @media screen and (max-width:767px) { .fav-box .lower-block .btn a { color: #fff; border: none; background: #000; } .webp .swiper-blue-slider-inner { background: url(../img/top/slider_bg_sp.webp)no-repeat; background-position: top right; background-size: contain; } .doctor_area h2{ transform: translateY(-10vw); } body.index #plan .container { width: 100%; } body.index #plan .planSwiper .courseBoxArea .bodys .flex .totalPrice .priceBox .price { letter-spacing: -0.05em; } } @media screen and (min-width:768px) { .skipLinkTop { min-width: 1280px; padding: 40px 0; } .skipLinkTop ul { width: 1300px; flex-wrap: nowrap; gap: 8px; } .skipLinkTop ul li { width: 100%; } .skipLinkTop ul li a { font-size: 14px; height: 48px; border-radius: 5px; padding: 0 10px; } .skipLinkTop ul li a:before { width: 30px; height: 30px; margin-right: 10px; } .skipLinkTop ul li a:after { border-right: 2px solid #486691; border-top: 2px solid #486691; width: 8px; height: 8px; top: calc(50% - (8px / 2)); right: 11px; } #merit:before, #medical:before, #flow:before, #faq:before { width: 80px; height: 80px; background-size: 80px; background-position: center left; top: 64px; left: 0; right: 0; margin: 0 auto; padding-right: 860px; box-sizing: content-box; } .news_area { max-height: 310px; } .human-img { width: 205px; margin-left: 100px; } .white-bg-block .text { padding-left: 0; padding-bottom: 20px; margin-right: 11.94444444444444%; } .white-bg-block .text01 { font-size: 12px; } .white-bg-block .text02 { font-size: 18px; } .white-bg-block .text03 { font-size: 30px; } .full-plan .drop-down-content.flex ul li { width: 100%; } .doctor_area h2{ font-size: 40px; margin-bottom: 71px; } body.index #doctor{ padding: 120px 0 0; } body.index #doctor .container{ max-width: 900px; position: relative; } #doctor .container .doctor_career .doctor_career_title { margin-top: 4%; } #doctor .container .doctor_career .doctor_career_title:before { width: 12px; height: 12px; margin-right: 1%; } #doctor .doctor_career{ transform: translate3d(260px, -290px, 0); } #doctor .container .text { font-size: 16px; margin-top: 0; transform: translateY(-20px); } #doctor .button a { font-size: 16px; width: 300px; height: 56px; margin: 40px auto 0; position: absolute; bottom: 140px; left: 0; right: 0; } body.index #doctor img{ width: 220px; } .midashi.badge:after{ width: 90px; height: 80px; right: 5px; top: -69px; } .midashi.badgeNatsumae:after{ width: 90px; height: 80px; right: 5px; top: -69px; } } .banner_link_hige{ padding: calc(100vw / var(--viewport) * 40) calc(100vw / var(--viewport) * 32); background: #EEF0F5; } .banner_link_hige .button a { color: #fff; font-size: calc(100vw / var(--viewport) * 32); font-weight: bold; text-decoration: none; width: calc(100vw / var(--viewport) * 600); height: calc(100vw / var(--viewport) * 112); background: #20396F; display: flex; justify-content: center; align-items: center; border-radius: 50vw; margin: calc(100vw / var(--viewport) * 40) auto 0; } @media screen and (min-width:768px) { .banner_link_hige{ padding: 40px 0; } .banner_link_hige a{ display: block; width: 865px; margin: 0 auto; } .banner_link_hige .button a { font-size: 16px; width: 300px; height: 56px; margin: 15px auto 0; } .banner_link_hige a:hover{ opacity: .8; } } /*#plan色反転*/ body.index #plan{ background: #fff; } body.index #plan h2, body.index #plan .planSwiper .title{ color: var(--lightBlue); } body.index #plan .planSwiper .midashi{ color: #fff; background: var(--lightBlue); }