/*=============================== General ================================*/ body { font-family: "Hiragino Kaku Gothic ProN","メイリオ", sans-serif; line-height: normal; } body .trial_button { position: fixed; right: 0; top: 180px; z-index: 99; } h2 { color: #004fa2; } h3 { font-size: 45px; font-weight: bold; } a { color: #000; text-decoration: none; transition: all .25s ease-out; } a:hover { text-decoration: none; } #wrap { overflow: hidden; position: relative; width: 100%; min-width: 1080px; max-width: 2000px; padding-top: 80px; margin: 0 auto; } .inner { width: 1020px; margin: 0 auto; position: relative; } .content { min-width: 1020px; overflow: hidden; } body .modal { width: 100%; height: 100%; position: fixed; background: rgba(0, 0, 0, 0.9); top: 0; left: 0; display: flex; align-items: center; justify-content: center; z-index: 100; } body .modal .modal_inner { position: absolute; top: calc(50% + 6vh); transform: translate(-50%, -50%); left: 50%; } body .modal .modal_inner a { position: absolute; top: -100px; right: -30px; width: 120px; height: 120px; display: inline-block; transform: scale(0.5); cursor: pointer; } body .modal .modal_inner a:before { content: ''; position: absolute; display: inline-block; top: 2px; left: 57px; width: 6px; height: 120px; background-color: white; transform: rotate(45deg); } body .modal .modal_inner a:after { content: ''; position: absolute; display: inline-block; top: 2px; left: 57px; width: 6px; height: 120px; background-color: white; transform: rotate(-45deg); } body .modal .modal_inner iframe { width: 54.87vw !important; height: 30.87vw !important; } /*=============================== main ================================*/ #main { overflow: hidden; } /*=============================== hero ================================*/ #hero { margin-top: 1px; border-bottom: solid 1px #505050; } #hero .slids_wrap { height: 35.98vw; min-height: 366px; position: relative; overflow: hidden; } #hero .slids_wrap .bx-wrapper .bx-viewport { height: 35.98vw !important; min-height: 366px; } #hero .slids_wrap .bx-wrapper a { width: 100%; min-width: 1020px; } #hero .slids_wrap .bx-wrapper a img { width: 100%; min-width: 1020px; } #hero .slids_wrap .bx-wrapper img { width: 100%; min-width: 1020px; } #hero .slids_wrap .bx-wrapper .bx-viewport .slides .slide { width: 100vw !important; min-width: 1020px !important; } #hero .slids_wrap .bx-wrapper .bx-pager.bx-default-pager { background: transparent; box-shadow: none; } #hero .slids_wrap .bx-wrapper .bx-pager.bx-default-pager a { background:#606060; text-indent: -9999px; display: block; min-width: 90px; width: 90px; height: 4px; margin: 0 5px; outline: 0; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; opacity: 1.0; } #hero .slids_wrap .bx-wrapper .bx-pager.bx-default-pager a:hover, #hero .slids_wrap.slids_wrap .bx-wrapper .bx-pager.bx-default-pager a.active { background: #FFF; opacity: 1.0; border: solid 2px #000; } .hero_textWrap { margin: 178px 0 190px 60px; } .hero_logo { width: 237px; display: block; margin-bottom: 40px; } .hero_text { width: 498px; display: block; } /*=============================== banner ================================*/ .body-joyplus #banner { width: 100%; } #banner { background: #000; } #banner .important_news_area { width: 1020px; padding: 20px 0; box-sizing: border-box; margin: auto; display: flex; align-items: center; justify-content: center; } #banner .important_news_area .important_news_title p { color: #fff; padding: 10px 0; border: solid 1px #505050; border-radius: 30px; width: 100%; } #banner .important_news_area .important_news-wrap { padding: 0 25px; background: #000; } #banner .important_news_area .important_news-wrap .important_news_box li { padding: 0 ; } #banner .important_news_area .important_news-wrap .important_news_box li + li { padding-top: 8px; } #banner .important_news_area .important_news-wrap .important_news_box li a { color: #fff; text-decoration: underline; } #banner .important_news_area .important_news-wrap .btn__more { margin-top: 12px; padding: 0; position: relative; left: calc(50% - 35em); transform: translateX(-50%); } #banner .important_news_area .important_news-wrap.js__on .btn__more { left: calc(50% - 36em); } #banner .important_news_area .important_news-wrap .btn__more span { color: #fff; } #banner .important_news_area .important_news-wrap .btn__more span:after { content: ""; display: block; width: 6px; height: 6px; border-bottom: #fff solid 1px; border-right: #fff solid 1px; position: absolute; top: 50%; right: -14px; transform: rotate(45deg) translate(-50%, -50%); } /*=============================== #ems_mvArea ================================*/ #ems_mvArea img { width: 100%; } /*=============================== #ems_effect ================================*/ #ems_effect { padding: 100px 0 0; background: #D5F0FF; } #ems_effect .ems_effect_inner { display: flex; justify-content: space-between; align-items: center; width: 1110px; margin: auto; position: relative; left: -45px; padding-bottom: 100px; } #ems_effect .ems_effect_inner .ems_effectTxt { width: 535px; position: relative; } #ems_effect .ems_effect_inner .ems_effectTxt h3 { font-size: 55px; color: #2C2C2C; line-height: 1.27; } #ems_effect .ems_effect_inner .ems_effectTxt h3 .c_blue { color: #0097d0; } #ems_effect .ems_effect_inner .ems_effectTxt h3 .t_small { font-size: 40px; } #ems_effect .ems_effect_inner .ems_effectTxt h3 .underline_blue { background: -webkit-gradient(linear, left top, left bottom, color-stop(85%, transparent), color-stop(85%, #86DEFF)); background: linear-gradient(transparent 85%, #86DEFF 85%); } #ems_effect .ems_effect_inner .ems_effectTxt img { margin: 32px 0; position: relative; left: 50%; transform: translateX(-50%); } #ems_effect .ems_effect_inner .ems_effectTxt p { font-size: 18px; color: #2C2C2C; line-height: 1.78; } #ems_effect .ems_feature { display: flex; justify-content: center; flex-wrap: wrap; min-width: 1020px; background: #0D0D0D; } #ems_effect .ems_feature .ems_featureBox { width: 33.33%; box-sizing: border-box; } #ems_effect .ems_feature .ems_featureBox + .ems_featureBox { border-left: 1px solid #fff; } #ems_effect .ems_feature .ems_featureBox img { width: 100%; } #ems_effect .ems_feature .ems_featureBox p { background: #000; color: #fff; padding: 20px 40px; font-size: 14px; min-height: 6em; } @media screen and (max-width: 1314px){ #ems_effect .ems_feature .ems_featureBox p { min-height: 7.5em; } } @media screen and (max-width: 1103px){ #ems_effect .ems_feature .ems_featureBox p { min-height: 9em; } } /*=============================== #ems_problem ================================*/ #ems_problem { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; width: 1020px; margin: auto; padding: 65px 0 100px; position: relative; } #ems_problem:after { content: ''; width: 0; height: 0; border-style: solid; border-width: 60px 66px 0 66px; border-color: #ffffff transparent transparent transparent; position: absolute; bottom: -60px; left: 50%; transform: translateX(-50%); z-index: 1; } #ems_problem h3 { width: 100%; font-size: 40px; margin-bottom: 55px; } #ems_problem .ems_problemBox { width: 165px; height: 200px; box-sizing: border-box; display: flex; justify-content: space-between; flex-direction: column; } #ems_problem .ems_problemBox:first-of-type img { width: 115px; align-self: center; } #ems_problem .ems_problemBox:nth-of-type(2) img { width: 94px; align-self: center; } #ems_problem .ems_problemBox:nth-of-type(3) img { width: 90px; align-self: center; margin-bottom: 5px; } #ems_problem .ems_problemBox:nth-of-type(4) img { width: 84px; align-self: center; } #ems_problem .ems_problemBox:nth-of-type(5) img { width: 84px; align-self: center; } #ems_problem .ems_problemBox:nth-of-type(6) img { width: 102px; align-self: center; } #ems_problem .ems_problemBox p { background:#008CC0; color: #fff; font-size: 15px; display: flex; justify-content: center; align-items: center; height: 70px; border-radius: 4px; text-align: center; position: relative; } #ems_problem .ems_problemBox p:after { content: ''; width: 0; height: 0; border-style: solid; border-width: 15px 9.5px 0 9.5px; border-color: #008CC0 transparent transparent transparent; position: absolute; bottom: -15px; left: 50%; transform: translateX(-50%);} /*=============================== #ems_point ================================*/ #ems_point { background: #D5F0FF; padding: 95px 0 100px; } #ems_point .ems_point_inner { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; width: 1020px; margin: auto; position: relative; } #ems_point .ems_point_inner h3 { width: 100%; font-size: 55px; color: #2C2C2C; line-height: 1.27; margin-bottom: 50px; letter-spacing: -.01em; } #ems_point .ems_point_inner h3 .c_blue { color: #0097d0; } #ems_point .ems_point_inner h3 .t_small { font-size: 40px; } #ems_point .ems_point_inner h3 .underline_blue { background: -webkit-gradient(linear, left top, left bottom, color-stop(85%, transparent), color-stop(85%, #86DEFF)); background: linear-gradient(transparent 85%, #86DEFF 85%); } #ems_point .ems_point_inner img { width: 160px; align-self: center; } #ems_point .ems_point_inner p { color: #2C2C2C; font-size: 18px; text-align: center; margin: 65px auto 0; } /*=============================== #ems_facility ================================*/ #ems_facility { display: flex; justify-content: center; flex-wrap: wrap; min-width: 1020px; background: #0D0D0D; } #ems_facility h3 { width: 100%; font-size: 40px; margin: 70px auto 60px; text-align: center; color: #fff;} #ems_facility .ems_facilityBox { width: 50%; box-sizing: border-box; } #ems_facility .ems_facilityBox:nth-of-type(even) { border-left: 1px solid #fff; } #ems_facility .ems_facilityBox img { width: 100%; } #ems_facility .ems_facilityBox p { position: relative; background: #000; color: #fff; padding: 25px 50px; font-size: 14px; min-height: 3em; } #ems_facility .ems_facilityBox p img { position: absolute; left: 50px; top: -15px; width: 206px; height: 30px; } #ems_facility .ems_movie { min-width: 1020px; width: 100%; background: #D5F0FF; padding: 50px 0; margin: auto; text-align: center; } #ems_facility .ems_movie a { position: relative; display: inline-block; } #ems_facility .ems_movie a img:last-child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } #ems_facility .ems_movie a img:last-child:hover { opacity: .7; } /*=============================== #ems_trial ================================*/ #ems_trial { background: #D5F0FF; padding-bottom: 95px; } /* #ems_trial .ems_trial_inner { width: 1100px; background: #fff; padding: 60px 90px; margin: auto; } */ #ems_trial .ems_trial_inner h3 { text-align: center; font-size: 40px; } #ems_trial .ems_trial_inner h3 span { display: block; font-size: 18px; color: #0097D0; } #ems_trial .ems_trial_inner h3 span:before { content: ''; display: inline-block; background: #0097D0; width: 20px; height: 1px; transform: rotate(50deg); position: relative; top: -6px; left: -4px; } #ems_trial .ems_trial_inner h3 span:after { content: ''; display: inline-block; background: #0097D0; width: 20px; height: 1px; transform: rotate(-50deg); position: relative; top: -6px; left: 4px; } #ems_trial .ems_trial_inner a { display: flex; align-items: center; justify-content: center; width: 920px; height: 100px; background: #FE6280; box-shadow: 0 6px rgba(224,62,93,1); color: #fff; font-size: 35px; font-weight: bold; margin: auto; padding: 0 35px 0 140px; box-sizing: border-box; } #ems_trial .ems_trial_inner a:after { content: ''; display: block; position: relative; width: 25px; height: 25px; border-top: 4px solid #fff; border-right: 4px solid #fff; transform: rotate(45deg); margin-left: auto; } #ems_trial .ems_trial_inner .ems_trial_flow { width: 890px; display: flex; justify-content: center; flex-wrap: wrap; margin: auto; padding: 25px 0 55px; } #ems_trial .ems_trial_inner .ems_trial_flow .ems_trial_flowBox { position: relative; margin-top: 30px; } #ems_trial .ems_trial_inner .ems_trial_flow .ems_trial_flowBox h4 { font-size: 18px; line-height: 1.44; text-align: center; margin-top: 15px; font-weight: bold; } #ems_trial .ems_trial_inner .ems_trial_flow .ems_trial_flowBox p { font-size: 14px; line-height: 1.57; text-align: center; margin-top: 10px; } #ems_trial .ems_trial_inner .ems_trial_flow .ems_trial_flowBox + .ems_trial_flowBox { margin-left: 40px; } #ems_trial .ems_trial_inner .ems_trial_flow .ems_trial_flowBox + .ems_trial_flowBox:before { content: ''; position: absolute; top: calc(50% - 41px); left: -28.5px; transform: translateY(-50%); width: 0; height: 0; border-style: solid; border-width: 13.5px 0 13.5px 21px; border-color: transparent transparent transparent #d5f0ff; } #ems_trial .ems_trial_inner { width: 1100px; background: #fff; padding: 60px 0; margin: auto; } /*=============================== #ems_entry ================================*/ #ems_entry { background: #D5F0FF; } #ems_entry h3 { background: #000; width: 100%; text-align: center; font-size: 40px; color: #fff; padding: 40px 0; } #ems_entry h3 span { display: block; font-size: 18px; color: #fff; font-weight: normal; } #ems_entry .ems_entry_inner { display: flex; justify-content: space-between; width: 1020px; padding: 80px 0; margin: auto; box-sizing: border-box; } #ems_entry .ems_entry_inner .ems_entryBox { display: flex; justify-content: space-between; align-items: center; flex-direction: column; width: 320px; height: 420px; } #ems_entry .ems_entry_inner .ems_entryBox p { font-size: 18px; line-height: 1.44; margin-top: 25px; min-height: 80px; text-align: justify; width: 100%; } #ems_entry .ems_entry_inner .ems_entryBox span { font-size: 12px; line-height: 1.57; letter-spacing: -.05em; width: 100%; } /*=============================== #ems_shopinfo ================================*/ #ems_shopinfo { padding: 65px 0; background-color: #000; background-image: url("/img/joyplus/top/shopinfo_bg.png"); background-repeat: no-repeat; background-position: top left; background-size: 50% auto; } @media only screen and (-webkit-min-device-pixel-ratio: 2) { #ems_shopinfo { background-image: url("/img/joyplus/top/shopinfo_bg@2x.png"); } } #ems_shopinfo h3 {text-align: center; font-size: 40px; color: #fff; padding-bottom: 55px; } #ems_shopinfo .ems_shopinfo_inner { width: 1020px; margin: auto; } #ems_shopinfo .ems_shopinfo_inner .ems_shopinfoBox { background: #fff; } #ems_shopinfo .ems_shopinfo_inner .ems_shopinfoBox + .ems_shopinfoBox { margin-top: 20px; } #ems_shopinfo .ems_shopinfo_inner .ems_shopinfoBox .title { display: flex; align-items: center; justify-content: space-between; width: 1020px; height: 90px; font-size: 20px; font-weight: bold; margin: auto; padding: 0 40px 0 60px; box-sizing: border-box; } #ems_shopinfo .ems_shopinfo_inner .ems_shopinfoBox .title:after { content: ''; display: block; position: relative; width: 15px; height: 15px; border-bottom: 2px solid #2C2C2C; border-right: 2px solid #2C2C2C; transform: rotate(45deg); } #ems_shopinfo .ems_shopinfo_inner .ems_shopinfoBox .title.active:after { transform: rotate(45deg) scale(-1, -1) translate(-25%, -25%); } #ems_shopinfo .ems_shopinfo_inner .ems_shopinfoBox .ems_shopinfoBox_detailWrap { display: none; } #ems_shopinfo .ems_shopinfo_inner .ems_shopinfoBox .ems_shopinfoBox_detail { display: flex; flex-wrap: wrap; justify-content: space-between; padding: 25px 51px 45px; } #ems_shopinfo .ems_shopinfo_inner .ems_shopinfoBox .ems_shopinfoBox_detail .ems_shopinfoBox_detail_l, #ems_shopinfo .ems_shopinfo_inner .ems_shopinfoBox .ems_shopinfoBox_detail .ems_shopinfoBox_detail_r { display: flex; flex-direction: column; justify-content: space-between; text-align: left; color: #2C2C2C; width: 400px; } #ems_shopinfo .ems_shopinfo_inner .ems_shopinfoBox .ems_shopinfoBox_detail .ems_shopinfoBox_detail_l dt, #ems_shopinfo .ems_shopinfo_inner .ems_shopinfoBox .ems_shopinfoBox_detail .ems_shopinfoBox_detail_r dt { font-size: 14px; font-weight: bold; border-bottom: solid 1px #2C2C2C; padding-bottom: 3px; } #ems_shopinfo .ems_shopinfo_inner .ems_shopinfoBox .ems_shopinfoBox_detail .ems_shopinfoBox_detail_l dd, #ems_shopinfo .ems_shopinfo_inner .ems_shopinfoBox .ems_shopinfoBox_detail .ems_shopinfoBox_detail_r dd { font-size: 14px; margin: 10px 0; line-height: 1.71; } #ems_shopinfo .ems_shopinfo_inner .ems_shopinfoBox .ems_shopinfoBox_detail .ems_shopinfoBox_detail_l dd a.btn_map, #ems_shopinfo .ems_shopinfo_inner .ems_shopinfoBox .ems_shopinfoBox_detail .ems_shopinfoBox_detail_r dd a.btn_map { position: relative; display: flex; align-items: center; justify-content: center; border: solid 1px #2C2C2C; font-size: 14px; color: #2C2C2C; margin: 15px 0; width: 128px; height: 35px; } #ems_shopinfo .ems_shopinfo_inner .ems_shopinfoBox .ems_shopinfoBox_detail .ems_shopinfoBox_detail_l dd a.btn_map:after, #ems_shopinfo .ems_shopinfo_inner .ems_shopinfoBox .ems_shopinfoBox_detail .ems_shopinfoBox_detail_r dd a.btn_map:after { content: ''; position: absolute; right: 15px; width: 7px; height: 7px; border-top: 1px solid #2C2C2C; border-right: 1px solid #2C2C2C; transform: rotate(45deg); top: 13px; } #ems_shopinfo .ems_shopinfo_inner .ems_shopinfoBox .ems_shopinfoBox_detail li { width: 100%; height: 60px; } #ems_shopinfo .ems_shopinfo_inner .ems_shopinfoBox .ems_shopinfoBox_detail li + li { margin-top: 7px; } #ems_shopinfo .ems_shopinfo_inner .ems_shopinfoBox .ems_shopinfoBox_detail li a { position: relative; width: 100%; height: 60px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: bold; } #ems_shopinfo .ems_shopinfo_inner .ems_shopinfoBox .ems_shopinfoBox_detail li a:after { content: ''; position: absolute; right: 20px; width: 12px; height: 12px; border-top: 1px solid #fff; border-right: 1px solid #fff; transform: rotate(45deg); top: 23px; } #ems_shopinfo .ems_shopinfo_inner .ems_shopinfoBox .ems_shopinfoBox_detail li.btn_shop a { background: #000; color: #ffffff; } #ems_shopinfo .ems_shopinfo_inner .ems_shopinfoBox .ems_shopinfoBox_detail li.btn_trial a { background-color: #fe6280; color: #ffffff; } #ems_shopinfo .ems_shopinfo_inner .ems_shopinfoBox .ems_shopinfoBox_detail li.btn_tel a { border: solid 1px #2C2C2C; background-color: #ffffff; color: #2C2C2C; padding: 0 35px; justify-content: space-between; } #ems_shopinfo .ems_shopinfo_inner .ems_shopinfoBox .ems_shopinfoBox_detail li.btn_tel a span { font-size: 14px; font-weight: bold; line-height: 1; } /*=============================== #ems_dokodemo ================================*/ #ems_dokodemo { padding: 30px 0; } #ems_dokodemo .ems_dokodemo_inner { width: 1020px; margin: auto; } #ems_dokodemo .ems_dokodemo_inner .ems_dokodemoBox { display: block; padding: 40px 45px; background: #F1F1F1; } #ems_dokodemo .ems_dokodemo_inner .ems_dokodemoBox h4 { font-size: 20px; font-weight: bold; line-height: 1.44; letter-spacing: .1em; } #ems_dokodemo .ems_dokodemo_inner .ems_dokodemoBox p { font-size: 13px; line-height: 2; margin: 20px 0; letter-spacing: normal; } #ems_dokodemo .ems_dokodemo_inner .ems_dokodemoBox .note { font-size: 10px; line-height: 1.78; margin: 0; } /*=============================== #ems_otherProgram ================================*/ #ems_otherProgram { display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap; min-width: 1020px; padding: 40px 0 120px; } #ems_otherProgram h3 { width: 100%; font-size: 40px; margin: 32px auto 30px; text-align: center; color: #2C2C2C; } #ems_otherProgram .ems_otherProgramBox { width: 450px; box-sizing: border-box; } #ems_otherProgram .ems_otherProgramBox img { width: 100%; } #ems_otherProgram .ems_otherProgramBox .text_box { padding: 35px 0 40px; text-align: center; } #ems_otherProgram .ems_otherProgramBox .text_box { background: #C3D700; } #ems_otherProgram .ems_otherProgramBox .text_box h4 { } #ems_otherProgram .ems_otherProgramBox .text_box h4 img { width: 136px; } #ems_otherProgram .ems_otherProgramBox .text_box h4 span { display: block; color: #2C2C2C; font-size: 16px; margin-bottom: 15px; } #ems_otherProgram .ems_otherProgramBox .text_box p { font-size: 14px; margin-top: 20px; } #ems_otherProgram .ems_otherProgramBox .text_box a { display: flex; align-items: center; justify-content: center; width: 165px; height: 45px; color: #fff; border: 1px solid #fff; font-size: 14px; margin: 30px auto 0; padding: 0 15px 0 25px; box-sizing: border-box; } #ems_otherProgram .ems_otherProgramBox .text_box a:after { content: ''; display: block; position: relative; width: 7px; height: 7px; border-top: 1px solid #fff; border-right: 1px solid #fff; transform: rotate(45deg); margin-left: 17px; } /*=============================== #ems_suits ================================*/ #ems_suits { position: relative; overflow: hidden; background: url(/img/joyplus/top/ems_pc_1600x600.png) 50% 50% no-repeat; background-size: auto; background-size: cover; height: 596px; margin:0px auto; } #ems_suits p{ display: block; margin: 160px auto 50px auto; color:#FFF; text-align: center; font-size: 26px; line-height: 2; letter-spacing: 3px; } #ems_suits span{ font-size: 32px; } #ems_suits .btn { -webkit-transition: .25s ease; transition: .25s ease; width: 329px; display: block; margin: 0 auto; border: #fff solid 1px; padding: 15px 15px 15px 0; font-size: 20px; color: #fff; position: relative; letter-spacing: 0.2em; text-decoration:none; text-align: center; line-height: 1.5; } #ems_suits .btn:after { content: ""; width: 16px; height: 16px; border-top: #fff solid 1px; border-right: #fff solid 1px; display: block; position: absolute; top: 50%; right: 16px; margin-top: -8px; -webkit-transform: rotate(45deg); transform: rotate(45deg); } #ems_suits .btn:hover { opacity: .6; }