/* ---------- setting ---------- ---------- */ .block-thanks { padding: 120px 0; position: relative; } .block-thanks ._row-header { text-align: center; } .block-thanks ._row-body { margin-top: 100px; text-align: center; line-height: 1.8; } .block-thanks ._row-body ._title { font-size: 24px; padding: 20px; } .block-thanks ._row-footer { margin-top: 40px; } @media print, screen and (min-width: 768px) { .block-index-mv { background-color: #f6f6f6; position: relative; height: 62vw; } .block-index-mv img { width: 100%; } .block-index-mv ._bg { position: absolute; top: 0vw; right: 0vw; width: 92.91vw; height: 55.06vw; } .block-index-mv ._deco1 { position: absolute; top: 9.5vw; left: 35vw; width: 6.5vw; height: 7.68vw; } .block-index-mv ._logo { position: absolute; top: 11.8vw; left: 17.36vw; width: 20.83vw; height: 6.94vw; } .block-index-mv ._p1 { position: absolute; top: 41.52vw; left: 42.5vw; width: 6.87vw; height: 17.01vw; } .block-index-mv ._p2 { position: absolute; top: 37.63vw; left: 53.54vw; width: 9.16vw; height: 20.48vw; } .block-index-mv ._p3 { position: absolute; top: 40.34vw; left: 65vw; width: 7.77vw; height: 16.18vw; } .block-index-mv ._p4 { position: absolute; top: 36.45vw; left: 74.86vw; width: 9.16vw; height: 18.33vw; } .block-index-mv ._p5 { position: absolute; top: 38.75vw; left: 86.59vw; width: 6.66vw; height: 16.8vw; } .block-index-mv ._movie-wrap { position: absolute; top: 8.33vw; left: 53.75vw; width: 46.31vw; height: 27.56vw; } .block-index-mv ._movie-place { position: absolute; top: 11.05vw; left: 46.1vw; width: 50.2vw; height: 24.5vw; } .block-index-mv ._p1 { background-image: url(../../images/index/mv/p1.png); background-size: cover; } .block-index-mv ._p2 { background-image: url(../../images/index/mv/p2.png); background-size: cover; } .block-index-mv ._p3 { background-image: url(../../images/index/mv/p3.png); background-size: cover; } .block-index-mv ._p4 { background-image: url(../../images/index/mv/p4.png); background-size: cover; } .block-index-mv ._p5 { background-image: url(../../images/index/mv/p5.png); background-size: cover; } .block-index-mv ._deco1 { background-image: url(../../images/index/mv/deco1.svg); background-size: cover; } .block-index-mv ._bg { background-image: url(../../images/index/mv/bg.png); background-size: cover; } .block-index-mv ._movie-wrap {} .block-index-mv ._movie-place video { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; } .block-index-mv ._movie-btn { position: absolute; top: 34.16vw; left: 82.5vw; width: 17.56vw; height: 2.98vw; } .block-index-mv ._btn { position: absolute; top: 37vw; left: 11.11vw; width: 33.54vw; height: 6.3vw; } .block-index-mv ._t1 { position: absolute; top: 15.3vw; left: 16vw;color: #fff;text-shadow: 0 0 5px #000,0 0 5px #000,0 0 5px #000,0 0 5px #000;font-weight: 800; } .block-index-mv ._t2 { position: absolute; top: 22vw; left: 17vw;color: #fff;text-shadow: 0 0 5px #000,0 0 5px #000,0 0 5px #000,0 0 5px #000;font-weight: 800; } .block-index-mv ._t3 { position: absolute; top: 26.0vw; left: 14vw;color: #fff;text-shadow: 0 0 5px #000,0 0 5px #000,0 0 5px #000,0 0 5px #000;font-weight: 800; } .block-index-mv ._t1 { display: inline-block; font-size: 2.22222vw; letter-spacing: 0.1em; font-weight: bold;text-align: center; line-height: 1.4;} .block-index-mv ._t2 { display: inline-block; font-size: 1.25vw; letter-spacing: 0.15em; font-weight: bold; } .block-index-mv ._t2 span { font-size: 2.08333vw; } .block-index-mv ._t3 { display: inline-block; font-size: 2.22222vw; letter-spacing: 0.1em; position: relative; font-weight: bold;text-align: center;line-height: 1.2; } .block-index-mv ._t3:after { content: ""; display: block; position: absolute; bottom: -0.38889vw; right: 0.34722vw; left: 0.34722vw; height: 0.20833vw; background: #fff; } .block-index-mv ._t3 span { font-size: 4.16667vw; } .block-index-problems { padding-top: 110px; } .block-index-problems ._row-header { text-align: center; line-height: 1.8; } .block-index-problems ._row-header ._t1 { font-size: 30px; font-weight: bold; position: relative; letter-spacing: 0.1em; } .block-index-problems ._row-header ._t1:before { content: ""; display: inline-block; width: 40px; height: 5px; background: #ffed58; border-radius: 5px; -ms-transform: translate(-30px, -8px) rotate(55deg); transform: translate(-30px, -8px) rotate(55deg); } .block-index-problems ._row-header ._t1:after { content: ""; display: inline-block; width: 40px; height: 5px; background: #ffed58; border-radius: 5px; -ms-transform: translate(30px, -8px) rotate(-55deg); transform: translate(30px, -8px) rotate(-55deg); } .block-index-problems ._row-header ._t2 { font-size: 22px; font-weight: bold; margin: 0 auto; margin-top: 80px; letter-spacing: 0.1em; width: 410px; height: 50px;display: -ms-flexbox; display: flex; -ms-flex-pack: center; justify-content: center; -ms-flex-align: center; align-items: center; text-align: center; position: relative; } .block-index-problems ._row-header ._t2 img{ width: 410px; height: auto;} .block-index-problems ._row-header ._t2:after { content: ""; display: block; position: absolute; bottom: -14px; left: 0px; background: url(../../images/index/problems/deco1.png) left top no-repeat; background-size: contain; width: 16px; height: 14px; } .block-index-problems ._row-header h2 { margin-top: 100px; font-size: 15px; font-weight: bold; letter-spacing: 0.1em;margin-bottom:50px; } .block-index-problems ._row-header h2 span { font-size: 22px; } .block-index-problems ._row-body { margin-top: 20px; } .block-index-problems ._last { position: relative; padding: 120px 0 120px 0; } .block-index-problems ._last:after { content: ""; display: block; position: absolute; top: 30px; left: 50%; background: url(../../images/index/problems/arorw.png) left top no-repeat; background-size: contain; -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); width: 180px; height: 101px; } .block-index-problems ._last ._image { display: block; position: absolute; top: 20px; right: 0px; width: 350px; height: 200px; } .block-index-problems ._last ._image img { width: 100%; } .block-index-problems ._last ._texts { text-align: center;color: #fff } .block-index-problems ._last ._texts p { position: relative; display: inline-block; font-size: 40px; font-weight: bold; letter-spacing: 0.1em; text-shadow: 0 0 5px #000,0 0 5px #000,0 0 5px #000,0 0 5px #000; } .block-index-problems ._last ._texts p:after { content: ""; display: block; position: absolute; bottom: -15px; left: 0px; right: 0px; height: 3px; background: #fff;} .block-index-problems ._items { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .block-index-problems ._items li { width: calc(33.33% - 26.66px); margin-left: 40px; } .block-index-problems ._items li:nth-child(1) ._item { background: #f6c471; } .block-index-problems ._items li:nth-child(2) ._item { background: #fea6bb; } .block-index-problems ._items li:nth-child(3) ._item { background: #afe3f9; } .block-index-problems ._items li:nth-child(4) ._item { background: #b8e09f; } .block-index-problems ._items li:nth-child(5) ._item { background: #e1b0d4; } .block-index-problems ._items li:nth-child(6) ._item { background: #8cd3d5; } .block-index-problems ._items li:nth-child(3n+1) { margin-left: 0; } .block-index-problems ._items li:nth-child(n+4) { margin-top: 40px; } .block-index-problems ._items li ._item { padding: 28px 10px 15px 10px; border-radius: 20px; height: 310px; position: relative; text-align: center; } .block-index-problems ._items li ._item:after { content: ""; display: block; position: absolute; top: 30px; left: 60px; background: url(../../images/index/problems/deco2.png) left top no-repeat; background-size: contain; width: 232px; height: 31px; } .block-index-problems ._items li ._item ._image { margin: 0 auto; margin-top: 35px; width: 260px; } .block-index-problems ._items li ._item ._image img { width: 100%; } .block-index-problems ._items li ._item h3 { text-align: center; font-weight: bold; font-size: 24px; letter-spacing: 0.1em; } .block-index-problems ._items li ._item ._text { position: absolute; bottom: 46px; left: 0px; right: 0px; } .block-index-problems ._items li ._item ._text span { position: relative; font-weight: bold; font-size: 18px; letter-spacing: 0.1em; } .block-index-problems ._items li ._item ._text span:after { content: ""; display: block; position: absolute; bottom: -10px; left: 0px; right: 0px; height: 3px; background: #333; } .block-index-howto { padding: 120px 0 50px 0; position: relative; } .block-index-howto img { width: 100%; } .block-index-howto ._row-body { margin-top: 5px; } .block-index-howto ._row-meirt { margin-top: 50px; } .block-index-howto ._row-meirt h3 { font-size: 28px; letter-spacing: 0.1em; line-height: 42px; font-weight: bold; text-align: center; } .block-index-howto ._row-meirt ._items { margin-top: 40px; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .block-index-howto ._row-meirt ._items li { width: calc(33.33% - 0px); margin-left: 0px; padding: 0 50px; } .block-index-howto ._row-meirt ._items li:nth-child(3n+1) { margin-left: 0; } .block-index-howto ._row-meirt ._items li:nth-child(n+4) { margin-top: 0px; } .block-index-howto ._row-meirt ._items li:nth-child(1) { border-right: 2px dotted #333; } .block-index-howto ._row-meirt ._items li:nth-child(2) { border-right: 2px dotted #333; } .block-index-howto ._row-meirt ._items li ._item { position: relative; } .block-index-howto ._row-meirt ._items li ._item ._image { width: 70px; margin: 0 auto; } .block-index-howto ._row-meirt ._items li ._item ._texts { margin-top: 10px; } .block-index-howto ._row-meirt ._items li ._item ._texts h4 { text-align: center; font-size: 18px; line-height: 27px; font-weight: bold; } .block-index-howto ._row-meirt ._items li ._item ._texts p { margin-top: 10px; } .block-index-bg { position: relative; background-color: #f6f6f6; background-image: url(../../images/index/bg2.png); background-position: center 800px, center bottom 0px; background-repeat: no-repeat;background-size:contain; } .block-index-bg:before { content: ""; display: block; position: absolute; top: 2200px; left: 0px; right: 0px; bottom: 1500px; background: #ccc; background: #ffed58; } .block-index-management { padding: 80px 0; position: relative; } .block-index-management img { width: 100%; } .block-index-management ._row-header { padding-bottom: 10px; } .block-index-management ._row-body { position: relative; margin-top: 30px; } .block-index-management ._row-body:after { content: ""; display: block; position: absolute; top: -300px; right: 0px; background: url(../../images/index/management/deco_chara.png) left top no-repeat; background-size: contain; width: 231px; height: 300px; } .block-index-management ._boxs { margin-top: 122px; display: -ms-flexbox; display: flex; -ms-flex-pack: justify; justify-content: space-between; } .block-index-management ._boxs > div { width: 460px; } .block-index-management ._box { border-radius: 20px; background: #fff; border: 3px solid #000; padding: 45px 40px 40px 40px; } .block-index-management ._box.is-2, .block-index-management ._box.is-3 { position: relative; padding-top: 65px; padding-bottom: 20px; } .block-index-management ._box.is-2:before, .block-index-management ._box.is-3:before { content: ""; display: block; position: absolute; top: -120px; left: 50%; -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); background: url(../../images/index/management/deco_arrow.png) left top no-repeat; background-size: contain; width: 30px; height: 75px; } .block-index-management ._box.is-2:after, .block-index-management ._box.is-3:after { content: ""; display: block; position: absolute; top: -45px; left: 50%; -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); background: url(../../images/index/management/mark/p1.png) left top no-repeat; background-size: contain; width: 90px; height: 90px; } .block-index-management ._box.is-3:after { background-image: url(../../images/index/management/mark/p2.png); } .block-index-management ._box ._head { text-align: center; } .block-index-management ._box ._head h3 { font-size: 28px; letter-spacing: 0.1em; line-height: 42px; font-weight: bold; } .block-index-management ._box ._head p { margin-top: 10px; font-size: 16px; letter-spacing: 0.1em; line-height: 24px; } .block-index-management ._box ._body2 { margin-top: 15px; } .block-index-management ._box ._body { margin-top: 25px; } .block-index-management ._box ._body ._col { display: -ms-flexbox; display: flex; } .block-index-management ._box ._body ._col > div:nth-child(1) { -ms-flex: 1; flex: 1; } .block-index-management ._box ._body ._col > div:nth-child(2) { width: 420px; } .block-index-management ._box ._body ._col > div:nth-child(2) img { width: 400px; } .block-index-management ._box ._body ._anno { margin-top: 20px; border: 3px solid #ffed58; height: 50px; display: -ms-flexbox; display: flex; -ms-flex-pack: center; justify-content: center; -ms-flex-align: center; align-items: center; text-align: center; border-radius: 30px; position: relative; } .block-index-management ._box ._body ._anno p { font-weight: bold; margin-bottom: 0; } .block-index-management ._box ._body ._anno:after { content: ""; display: block; position: absolute; top: -10px; right: 20px; background: url(../../images/index/management/deco_track.png) left top no-repeat; background-size: contain; width: 81px; height: 49px; } .block-index-management ._row-footer { margin-top: 30px; text-align: center; } .block-index-management ._row-footer p { font-size: 16px; font-weight: bold; margin-bottom: 0; } .block-index-management ._row-footer ._items { display: -ms-flexbox; display: flex; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: wrap; flex-wrap: wrap; } .block-index-management ._row-footer ._items li { width: 200px; } .block-index-management ._row-footer ._items li:nth-child(2) { -ms-transform: translate(0, 45px); transform: translate(0, 45px); } .block-index-management ._row-footer ._items li:nth-child(3) { -ms-transform: translate(0, 45px); transform: translate(0, 45px); } .block-index-management ._row-footer ._items li ._item { width: 200px; height: 200px; background: #fff; border-radius: 50%; padding-top: 35px; } .block-index-management ._row-footer ._items li ._item ._image img { width: 100px; } .block-index-management ._row-footer ._items li ._item ._texts { margin-top: 5px; -ms-flex: 1; flex: 1; } .block-index-management ._row-footer ._items li ._item ._texts ._t1 { font-size: 16px; font-weight: bold; } .block-index-management ._row-footer ._items li ._item ._texts ._t2 { margin-top: 8px; font-size: 10px; font-weight: bold; } .mod-order-flow { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .mod-order-flow li { width: 380px; position: relative; } .mod-order-flow li:nth-child(n+2):before { content: ""; display: block; margin: 10px 0 10px 0; background: url(../../images/index/management/deco_line.png) left top no-repeat; background-size: contain; width: 380px; height: 15px; } .mod-order-flow li h4 { text-align: center; font-size: 18px; letter-spacing: 0.1em; line-height: 27px; } .mod-order-flow li ._item { margin-top: 15px; display: -ms-flexbox; display: flex; -ms-flex-pack: justify; justify-content: space-between; position: relative; width: 100%; } .mod-order-flow li ._item ._image { width: 180px; } .mod-order-flow li ._item ._image img { width: 100%; } .mod-order-flow li ._item ._texts { width: 180px; margin-top: -5px; } .mod-index-point dt { color: #fff; font-size: 14px; letter-spacing: 0.1em; line-height: 21px; text-align: center; padding: 5px; background: url(../../images/index/management/bg_point.png) left top no-repeat; background-size: contain; width: 170px; height: 35px; } .mod-index-point dd { margin: 0; font-size: 14px; line-height: 21px; font-weight: bold; letter-spacing: 0.1em; } .block-index-introduction { padding: 80px 0 100px 0; position: relative; background-color: #f6f6f6; } .block-index-introduction ._row-header h2 { text-align: center; line-height: 1.8; } .block-index-introduction ._row-header h2 span { display: block; } .block-index-introduction ._row-header h2 span:nth-child(1) { font-size: 24px; } .block-index-introduction ._row-header h2 span:nth-child(2) { font-size: 18px; } .block-index-introduction ._row-body { margin-top: 20px; } .block-index-introduction ._row-body ._title { font-size: 16px; font-weight: bold; text-align: center; background: url(../../images/index/introduction/bg_titie.png) left top no-repeat; background-size: contain; width: 963px; height: 58px; padding-top: 0px; letter-spacing: 0.1em; } .block-index-introduction ._row-body ._title span { font-size: 28px; -ms-transform: translate(0, 3px); transform: translate(0, 3px); display: inline-block; } .block-index-introduction ._row-body h3 { margin-top: 20px; font-size: 28px; text-align: center; letter-spacing: 0.1em; } .block-index-introduction ._row-body h3 span { display: inline-block; position: relative; } .block-index-introduction ._row-body h3 span:after { content: ""; display: block; position: absolute; left: 0px; right: 0px; height: 3px; bottom: -12px; background: #333; } .block-index-introduction ._row-body ._flow { margin-top: 40px; } .block-index-introduction ._row-body ._note { margin-top: -65px; text-align: right; } .block-index-introduction ._row-body ._note p { font-size: 11px; } .block-index-introduction ._row-footer { margin-top: 40px; } .mod-index-flow { position: relative; width: 960px; height: 354px; } .mod-index-flow ._bar1 { position: absolute; top: 74px; left: 110px; width: 850px; height: 21px; background: #1FB9E8; } .mod-index-flow ._bar2 { position: absolute; top: 195px; left: 300px; width: 550px; height: 21px; background: #E5203D; } .mod-index-flow ._box_cus { position: absolute; top: 15px; left: 0; width: 110px; height: 132px;color: #fff } .mod-index-flow ._box_cus { background: url(../../images/index/introduction/box_cus.png) left top no-repeat; background-size: contain;} .mod-index-flow ._box_mov { position: absolute; top: 143px; left: 0; width: 110px; height: 127px;color: #fff } .mod-index-flow ._box_mov { background: url(../../images/index/introduction/box_mov.png) left top no-repeat; background-size: contain; } .mod-index-flow .is-label span { position: absolute; left: 0px; right: 0px; bottom: 15px; text-align: center; letter-spacing: 0.1em; font-weight: bold; } .mod-index-flow ._box_last { position: absolute; top: 21px; left: 920px; width: 40px; height: 250px; } .mod-index-flow ._box_last { background: #FFED58; border-radius: 25px; display: -ms-flexbox; display: flex; -ms-flex-pack: center; justify-content: center; -ms-flex-align: center; align-items: center; text-align: center; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; font-weight: bold; letter-spacing: 0.1em; font-size: 16px; } .mod-index-flow ._box1 { position: absolute; top: 20px; left: 120px; width: 150px; height: 255px; } .mod-index-flow ._box2 { position: absolute; top: 20px; left: 280px; width: 150px; height: 255px; } .mod-index-flow ._box3 { position: absolute; top: 20px; left: 440px; width: 150px; height: 255px; } .mod-index-flow ._box4 { position: absolute; top: 20px; left: 600px; width: 150px; height: 255px; } .mod-index-flow ._box5 { position: absolute; top: 20px; left: 760px; width: 150px; height: 255px; } .mod-index-flow ._box { padding: 20px 10px 0 10px; background: #fff; border-radius: 10px; } .mod-index-flow ._box ._no { position: absolute; top: -35px; left: 15px; font-size: 40px; line-height: 60px; font-weight: 200; } .mod-index-flow ._box ._t { font-weight: bold; height: 50px; letter-spacing: 0.1em; display: -ms-flexbox; display: flex; -ms-flex-pack: center; justify-content: center; -ms-flex-align: center; align-items: center; text-align: center; } .mod-index-flow ._box ._body p { font-size: 13px; letter-spacing: 0.1em; line-height: 1.5; } .mod-index-flow ._box_time { position: absolute; top: 292px; left: 0px; width: 915px; height: 59px; } .mod-index-flow ._box_time { background: url(../../images/index/introduction/box_time.png) left top no-repeat; background-size: contain; } .mod-index-flow ._t_time1 { position: absolute; top: 300px; left: 0px; width: 110px; } .mod-index-flow ._t_time2 { position: absolute; top: 305px; left: 290px; } .mod-index-flow ._t_time3 { position: absolute; top: 305px; left: 610px; } .mod-index-flow ._t_time1 { text-align: center; font-weight: bold; line-height: 1.6; letter-spacing: 0.1em; } .mod-index-flow ._t_time2, .mod-index-flow ._t_time3 { text-align: center; font-weight: bold; letter-spacing: 0.1em; } .mod-index-flow ._t_time2 span, .mod-index-flow ._t_time3 span { font-size: 28px; } .block-index-voice { background: #F6F6F6; padding: 120px 0 100px 0; position: relative; } .block-index-voice ._row-body { margin-top: 40px; } .mod-index-voice-list .mod-index-voice:nth-child(2n+1):before { content: ""; position: absolute; top: 60px; left: 150px; width: 15px; height: 15px; margin-top: -15px; box-sizing: border-box; border: 15px solid transparent; border-right: 15px solid #fff; -ms-transform: scale(1.4, 1); transform: scale(1.4, 1); z-index: 10; } .mod-index-voice-list .mod-index-voice:nth-child(2n+2) { -ms-flex-direction: row-reverse; flex-direction: row-reverse; } .mod-index-voice-list .mod-index-voice:nth-child(2n+2):before { content: ""; position: absolute; top: 60px; right: 150px; top: 60px; right: 150px; width: 15px; height: 15px; margin-top: -15px; box-sizing: border-box; border: 15px solid transparent; border-left: 15px solid #fff; -ms-transform: scale(1.4, 1); transform: scale(1.4, 1); z-index: 10; } .js-voice.js-open .js-place:after { display: none; } .js-voice .js-place { transition-duration: 0.2s; height: 200px; overflow: hidden; position: relative; } .js-voice .js-place:after { content: ""; display: block; position: absolute; bottom: 0px; left: 0px; right: 0; height: 80px; background: linear-gradient(rgba(255, 255, 255, 0) 0%, #fff 100%); } .mod-index-voice { display: -ms-flexbox; display: flex; position: relative; } .mod-index-voice + .mod-index-voice { margin-top: 40px; } .mod-index-voice ._prof { width: 180px; padding-top: 50px; } .mod-index-voice ._texts { -ms-flex: 1; flex: 1; } .mod-index-voice ._prof { text-align: center; } .mod-index-voice ._prof img { width: 100px; } .mod-index-voice ._prof p { margin-top: 20px; font-weight: bold; } .mod-index-voice ._texts { position: relative; padding: 30px 40px 20px 40px; line-height: 1.8; } .mod-index-voice ._texts ._inner { position: relative; z-index: 10; } .mod-index-voice ._texts:after { content: ""; display: block; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; border-radius: 10px; background: #fff; } .mod-index-voice ._texts:before { content: ""; display: block; position: absolute; border-radius: 10px; top: 0px; left: 0px; right: 0px; bottom: 0px; -ms-transform: translate(10px, 10px); transform: translate(10px, 10px); background: url(../images/mod-btn/bg.png) left top; } .mod-index-voice ._texts:hover:before { animation: move-stripe1 .4s infinite linear; } .mod-index-voice ._texts ._q { font-size: 24px; letter-spacing: 0.1em; line-height: 36px; text-align: left; color: #23b8bc; font-weight: bold; padding-left: 40px; } .mod-index-voice ._texts ._q span { position: relative; } .mod-index-voice ._texts ._q span:before { position: absolute; top: 5px; left: -40px; content: ""; display: inline-block; background: url(../../images/index/voice/quote.png) left top no-repeat; background-size: contain; width: 21px; height: 16px; -ms-transform: rotate(180deg); transform: rotate(180deg); } .mod-index-voice ._texts ._q span:after { content: ""; display: inline-block; background: url(../../images/index/voice/quote.png) left top no-repeat; background-size: contain; width: 21px; height: 16px; } .mod-index-voice ._texts ._a { margin-top: 20px; } .mod-index-voice ._btns { position: relative; margin-top: -20px; text-align: center; padding-bottom: 20px; cursor: pointer; } .mod-index-voice .js-open ._btns { margin-top: 20px; } .block-index-faq { padding: 110px 0 100px 0; background-color: #FDEF68; position: relative; } .block-index-faq ._row-body { margin-top: 40px; }/* ---------------------------------------------------------- .mod-toggle ---------------------------------------------------------- */ .mod-faq { position: relative; } .mod-faq + .mod-faq { margin-top: 30px; } .mod-faq:after { content: ""; display: block; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; border-radius: 10px; background: #fff; } .mod-faq:before { content: ""; display: block; position: absolute; border-radius: 10px; top: 0px; left: 0px; right: 0px; bottom: 0px; -ms-transform: translate(10px, 10px); transform: translate(10px, 10px); background: url(../images/mod-btn/bg.png) left top; } .mod-faq:hover:before { animation: move-stripe1 .4s infinite linear; } .mod-faq ._head { position: relative; z-index: 1; cursor: pointer; background: #E6EAF1; border-radius: 10px 10px 0 0; border-radius: 10px; padding: 0 0 0 100px; font-size: 18px; letter-spacing: 0.1em; line-height: 27px; color: #2b7dc2; font-weight: bold; height: 90px; display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; } .mod-faq ._head ._icon:after { content: ""; display: block; position: absolute; top: 50%; right: 40px; background: url(../images/mod-btn/icon_toggle.svg) left top no-repeat; background-size: contain; width: 16px; height: 17px; -ms-transform: translate(0, -50%) rotate(180deg); transform: translate(0, -50%) rotate(180deg); } .mod-faq ._head:hover .js-open { opacity: 0.7; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; } .mod-faq.js-open ._head { border-radius: 10px 10px 0 0; } .mod-faq.js-open ._head ._icon:after { -ms-transform: translate(0, -50%) rotate(0); transform: translate(0, -50%) rotate(0); } .mod-faq ._body { position: relative; display: none; z-index: 2; border-radius: 0 0 10px 10px; padding: 40px 40px 40px 100px; } .mod-faq ._body i { top: 25px; } .mod-faq i { position: absolute; top: 15px; left: 20px; right: 0px; bottom: 0px; width: 60px; height: 60px; font-weight: normal; background: #fff; color: #2b7dc2; font-style: normal; font-size: 40px; display: -ms-flexbox; display: flex; -ms-flex-pack: center; justify-content: center; -ms-flex-align: center; align-items: center; text-align: center; padding-bottom: 5px; box-sizing: border-box; border-radius: 50%; } .block-index-download { padding: 120px 0 80px 0; position: relative; } .block-index-download:before { content: ""; display: block; position: absolute; top: 0px; left: 0px; background: url(../../images/index/download/bg1.svg) left top no-repeat; background-size: contain; width: 390px; height: 400px; z-index: -1; } .block-index-download ._row-body { margin-top: 60px; } .block-index-download ._box { position: relative; z-index: 1; } .block-index-download ._box ._header { border-radius: 20px 20px 0 0; background: #FFED58; height: 150px; padding: 50px 40px 40px 30px; text-align: center; position: relative; } .block-index-download ._box ._header:after { content: ""; display: block; position: absolute; bottom: -20px; right: 20px; background: url(../../images/index/download/deco-person.png) left top no-repeat; background-size: contain; width: 300px; height: 198px; } .block-index-download ._box ._header ._reccomend { display: block; position: absolute; top: 0px; left: 50%; -ms-transform: translate(-50%, -40%); transform: translate(-50%, -40%); background: url(../../images/index/download/bg_reccomend.png) left top no-repeat; background-size: contain; width: 300px; height: 58px; font-size: 16px; letter-spacing: 0.1em; line-height: 27px; text-align: center; padding-top: 12px; font-weight: bold; } .block-index-download ._box ._header ul { display: inline-block; width: 300px;margin-left: -180px; } .block-index-download ._box ._header ul li { position: relative; font-size: 30px; text-align: center; } .block-index-download ._box ._header ul li + li { margin-top: 20px; } .block-index-download ._box ._body { border-radius: 0 0 20px 20px; background: #F6F6F6; padding: 60px 0 120px 0; } .block-index-download ._box ._body table { width: 900px; } .mod-index-head { text-align: center; } .mod-index-head h2 { font-size: 40px; font-weight: bold; line-height: 1.2; text-align: center; letter-spacing: 0.12em; } .mod-index-head h2:before { content: ""; display: block; margin: 0 auto; background: url(../../images/index/howto/mark.png) left top no-repeat; background-size: contain; width: 320px; height: 160px;} .mod-index-head.is-problems h2:before { background-image: url(../../images/index/problems/mark.html); } .mod-index-head.is-howto h2:before { background-image: url(../../images/index/howto/mark.png); } .mod-index-head.is-management h2:before { background-image: url(../../images/index/management/mark.png); } .mod-index-head.is-introduction h2:before { background-image: url(../../images/index/introduction/mark.png); } .mod-index-head.is-voice h2:before { background-image: url(../../images/index/voice/mark.png); } .mod-index-head.is-faq h2:before { background-image: url(../../images/index/faq/mark.png); } .mod-index-head.is-download h2:before { display: none; } .mod-index-head p { margin-top: 25px; margin-bottom: 0; font-size: 16px; font-weight: bold; line-height: 1.6; letter-spacing: 0.1em; } } @media screen and (max-width: 767px) { .block-index-mv { background-color: #f6f6f6; position: relative; height: 186vw; } .block-index-mv img { width: 100%; } .block-index-mv ._btn { position: absolute; top: 110.26vw; left: 10vw; width: 78.8vw; height: 15.6vw; } .block-index-mv ._movie-btn { position: absolute; top: 77.46vw; left: 49.06vw; width: 50.93vw; height: 8.66vw; } .block-index-mv ._bg { position: absolute; top: 0; right: 0; width: 97.2vw; height: 186vw; } .block-index-mv ._logo { position: absolute; top: 17.59vw; left: 30.53vw; width: 39.2vw; height: 12.53vw; } .block-index-mv ._people { position: absolute; top: 129.5vw; left: 7vw; width: 80.8vw; height: 41.6vw; } .block-index-mv ._deco1 { position: absolute; top: 5.3vw; left: 67.5vw; width: 10vw; height: 12vw; } .block-index-mv ._people { background-image: url(../../images/index/mv/sp/people.png); background-size: cover; } .block-index-mv ._deco1 { background-image: url(../../images/index/mv/deco1.svg); background-size: cover; } .block-index-mv ._bg { background-image: url(../../images/index/mv/sp/bg.png); background-size: cover; } .block-index-mv ._movie-wrap { position: absolute; top: 34vw; left: 5.33vw; width: 89.46vw; height: 50.8vw; } .block-index-mv ._movie-place { position: absolute; top: 28.5vw; left: 7.5vw; width: 84vw; height: 44.5vw; } .block-index-mv ._movie-wrap { } .block-index-mv ._movie-place video { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; } .block-index-mv ._t1 { position: absolute; top: 13vw; left: 15vw; right: 10vw;color: #fff;text-shadow: 0 0 5px #000,0 0 5px #000,0 0 5px #000,0 0 5px #000;font-weight: 800;} .block-index-mv ._t2 { position: absolute; top: 75.33vw; left: 11vw; right: 10vw;color: #fff;text-shadow: 0 0 5px #000,0 0 5px #000,0 0 5px #000,0 0 5px #000;font-weight: 800; } .block-index-mv ._t3 { position: absolute; top: 85vw; left: 12vw; right: 10vw;color: #fff;text-shadow: 0 0 5px #000,0 0 5px #000,0 0 5px #000,0 0 5px #000;font-weight: 800;line-height: 1.2;} .block-index-mv ._t1 { text-align: center; display: inline-block; font-size: 5vw; letter-spacing: 0.1em; font-weight: bold; line-height: 1.5} .block-index-mv ._t2 { text-align: center; display: inline-block; font-size: 3.2vw; letter-spacing: 0.15em; font-weight: bold; } .block-index-mv ._t2 span { font-size: 4.8vw; } .block-index-mv ._t3 { text-align: center; display: inline-block; font-size: 6.4vw; letter-spacing: 0.1em; position: relative; font-weight: bold; } .block-index-mv ._t3:after { content: ""; display: block; position: absolute; bottom: -4vw; right: 1.33333vw; left: 1.33333vw; height: 0.53333vw; background: #fff; } .block-index-mv ._t3 span { font-size: 9vw; } .block-index-problems { padding-top: 10px; } .block-index-problems ._row-header { text-align: center; line-height: 1.8; } .block-index-problems ._row-header ._t1 { font-size: 20px; font-weight: bold; position: relative; letter-spacing: 0.1em; } .block-index-problems ._row-header ._t1:before { content: ""; display: inline-block; width: 30px; height: 4px; background: #ffed58; border-radius: 4px; -ms-transform: translate(-15px, -4px) rotate(55deg); transform: translate(-15px, -4px) rotate(55deg); } .block-index-problems ._row-header ._t1:after { content: ""; display: inline-block; width: 30px; height: 4px; background: #ffed58; border-radius: 4px; -ms-transform: translate(15px, -4px) rotate(-55deg); transform: translate(15px, -4px) rotate(-55deg); } .block-index-problems ._row-header ._t2 { font-size: 16px; font-weight: bold; margin: 0 auto; margin-top: 55px; letter-spacing: 0.1em; width: 310px; height: 37px; background: #ffed58; border-radius: 5px 5px 5px 0; display: -ms-flexbox; display: flex; -ms-flex-pack: center; justify-content: center; -ms-flex-align: center; align-items: center; text-align: center; position: relative; } .block-index-problems ._row-header ._t2:after { content: ""; display: block; position: absolute; bottom: -7px; left: 0px; background: url(../../images/index/problems/deco1.png) left top no-repeat; background-size: contain; width: 8px; height: 7px; } .block-index-problems ._row-header h2 { margin-top: 65px; font-size: 12px; font-weight: bold; letter-spacing: 0.1em; padding: 0 10px;} .block-index-problems ._row-header h2 span { font-size: 15px; } .block-index-problems ._row-body { margin-top: 10px; padding: 0 20px; } .block-index-problems ._last { position: relative; padding: 85px 0 0 0; } .block-index-problems ._last:after { content: ""; display: block; position: absolute; top: 10px; left: 50%; background: url(../../images/index/problems/arorw.png) left top no-repeat; background-size: contain; -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); width: 100px; height: 75px;} .block-index-problems ._last ._image { display: none; } .block-index-problems ._last ._texts { text-align: center;margin-top: -25px;padding-bottom: 10px; } .block-index-problems ._last ._texts p { position: relative; display: inline-block; font-size: 18px; line-height: 1.5; font-weight: bold; letter-spacing: 0.1em;color: #fff; } .block-index-problems ._last ._texts p:after { content: ""; display: block; position: absolute; bottom: 0px; left: 0px; right: 0px; height: 3px; background: #fff; } .block-index-problems ._items { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .block-index-problems ._items li { width: calc(100% - 10px); margin-left: 0px; margin-top: 10px; } .block-index-problems ._items li:nth-child(1) ._item { background: #f6c471; } .block-index-problems ._items li:nth-child(2) ._item { background: #fea6bb; } .block-index-problems ._items li:nth-child(3) ._item { background: #afe3f9;} .block-index-problems ._items li:nth-child(4) ._item { background: #b8e09f; } .block-index-problems ._items li:nth-child(5) ._item { background: #e1b0d4; } .block-index-problems ._items li:nth-child(6) ._item { background: #8cd3d5; } .block-index-problems ._items li ._item { padding: 20px 5px 7px 5px; border-radius: 10px; height: 180px; position: relative; text-align: center; } .block-index-problems ._items li ._item:after { content: ""; display: block; position: absolute; top: 20px; left: 28%; background: url(../../images/index/problems/deco2.png) center top no-repeat; background-size: auto; width: 130px; height: 20px; } .block-index-problems ._items li ._item ._image { margin: 0 auto; margin-top: 10px; width: 170px; } .block-index-problems ._items li ._item ._image img { width: 100%; } .block-index-problems ._items li ._item h3 { text-align: center; font-weight: bold; font-size: 16px; letter-spacing: 0.1em; } .block-index-problems ._items li ._item ._text { position: absolute; bottom: 23px; left: 0px; right: 0px; } .block-index-problems ._items li ._item ._text span { position: relative; font-weight: bold; font-size: 13px; letter-spacing: 0.1em; } .block-index-problems ._items li ._item ._text span:after { content: ""; display: block; position: absolute; bottom: -5px; left: 0px; right: 0px; height: 2px; background: #333; } .block-index-howto { padding: 60px 20px 20px 20px; position: relative; } .block-index-howto img { width: 100%; } .block-index-howto ._row-body { margin-top: 20px; } .block-index-howto ._row-meirt { margin-top: 35px; } .block-index-howto ._row-meirt h3 { font-size: 21px; letter-spacing: 0.1em; font-weight: bold; text-align: center; } .block-index-howto ._row-meirt ._items { margin-top: 20px; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; width: 100%; } .block-index-howto ._row-meirt ._items li { width: 100%; } .block-index-howto ._row-meirt ._items li ._item { display: -ms-flexbox; display: flex; padding: 10px 0 15px 0; border-bottom: 2px dotted #333; position: relative; } .block-index-howto ._row-meirt ._items li ._item ._image { width: 80px; text-align: center; padding-top: 5px; } .block-index-howto ._row-meirt ._items li ._item ._texts { -ms-flex: 1; flex: 1; padding-right: 10px; } .block-index-howto ._row-meirt ._items li ._item ._image img { width: 55px; } .block-index-howto ._row-meirt ._items li ._item ._texts { margin-top: 10px; } .block-index-howto ._row-meirt ._items li ._item ._texts h4 { font-size: 14px; font-weight: bold; } .block-index-howto ._row-meirt ._items li ._item ._texts p { margin-top: 10px; margin-bottom: 0; } .block-index-bg { position: relative; background-color: #f6f6f6; background-image: url(../../images/index/bg1_sp.jpg);background-position: center 660px, center bottom 70px; background-repeat: no-repeat;background-size: contain; } .block-index-bg:before { content: ""; display: block; position: absolute; top: 1300px; left: 0px; right: 0px; bottom: 200px; background: #ccc; background: #ffed58; } .block-index-management { padding: 50px 20px 0px 20px; position: relative; } .block-index-management img { width: 100%; } .block-index-management ._row-header p { padding-right: 110px; } .block-index-management ._row-body { position: relative; margin-top: 20px; } .block-index-management ._row-body:after { content: ""; display: block; position: absolute; top: -120px; right: 0px; background: url(../../images/index/management/deco_chara.png) left top no-repeat; background-size: contain; width: 115.5px; height: 150px; } .block-index-management ._boxs ._box { margin-top: 40px; } .block-index-management ._box { position: relative; z-index: 1; border-radius: 10px; background: #fff; border: 3px solid #000; padding: 20px 20px 20px 20px; } .block-index-management ._box.is-2, .block-index-management ._box.is-3 { position: relative; padding-top: 45px; padding-bottom: 14px; } .block-index-management ._box.is-2:after, .block-index-management ._box.is-3:after { content: ""; display: block; position: absolute; top: -31px; left: 50%; -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); background: url(../../images/index/management/mark/p1_sp.png) left top no-repeat; background-size: contain; width: 68px; height: 68px; } .block-index-management ._box.is-3:after { background-image: url(../../images/index/management/mark/p2_sp.png); } .block-index-management ._box ._head h3 { font-size: 20px; letter-spacing: 0.1em; line-height: 29px; font-weight: bold; text-align: center; } .block-index-management ._box ._head p { margin-top: 7px; letter-spacing: 0.1em; } .block-index-management ._box ._body2 { margin-top: 10px; } .block-index-management ._box ._body { margin-top: 17px; } .block-index-management ._box ._body ._col ._p { text-align: center; } .block-index-management ._box ._body ._col ._p img { width: 200px; } .block-index-management ._box ._body ._anno { margin-top: 14px; border: 2px solid #ffed58; padding: 17px 80px 17px 17px; border-radius: 10px; position: relative; } .block-index-management ._box ._body ._anno p { font-weight: bold; margin-bottom: 0; } .block-index-management ._box ._body ._anno:after { content: ""; display: block; position: absolute; top: 17px; right: 12px; background: url(../../images/index/management/deco_track.png) left top no-repeat; background-size: contain; width: 61.6px; height: 37.4px; } .block-index-management ._row-footer { margin-top: 45px; } .block-index-management ._row-footer p { font-size: 12px; font-weight: bold; margin-bottom: 0; } .block-index-management ._row-footer ._items { margin-top: 20px; display: -ms-flexbox; display: flex; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: wrap; flex-wrap: wrap; } .block-index-management ._row-footer ._items li { width: 50%; } .block-index-management ._row-footer ._items li ._item { width: 150px; height: 150px; margin: 10px auto; background: #fff; border-radius: 50%; padding-top: 24px; text-align: center; } .block-index-management ._row-footer ._items li ._item ._image img { width: 70px; } .block-index-management ._row-footer ._items li ._item ._texts { margin-top: 3px; -ms-flex: 1; flex: 1; } .block-index-management ._row-footer ._items li ._item ._texts ._t1 { font-size: 12px; font-weight: bold; } .block-index-management ._row-footer ._items li ._item ._texts ._t2 { margin-top: 8px; font-size: 8px; font-weight: bold; } .mod-order-flow { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; width: 100%; } .mod-order-flow li { width: 100%; position: relative; } .mod-order-flow li:nth-child(n+2):before { content: ""; display: block; margin: 17px 0 17px 0; background: url(../../images/index/management/deco_line_sp.png) center top repeat-x; background-size: contain; width: 100%; height: 10px; } .mod-order-flow li h4 { text-align: center; font-size: 14px; letter-spacing: 0.1em; } .mod-order-flow li ._item { margin-top: 15px; display: -ms-flexbox; display: flex; position: relative; } .mod-order-flow li ._item ._image { width: 135px; } .mod-order-flow li ._item ._image img { width: 100%; } .mod-order-flow li ._item ._texts { -ms-flex: 1; flex: 1; padding: 0 15px 0 0; margin-top: -3px; } .mod-index-point dt { color: #fff; font-size: 12px; letter-spacing: 0.1em; line-height: 14px; text-align: center; padding: 4px 0 0 0; background: url(../../images/index/management/bg_point.png) left top no-repeat; background-size: contain; width: 124.5px; height: 24.5px; } .mod-index-point dd { margin: 0; font-size: 12px; line-height: 1.5; font-weight: bold; letter-spacing: 0.1em; } .block-index-introduction { padding: 80px 20px 50px 20px; position: relative; background-color: #f6f6f6; } .block-index-introduction ._row-header h2 { text-align: center; line-height: 1.8; } .block-index-introduction ._row-header h2 span { display: block; } .block-index-introduction ._row-header h2 span:nth-child(1) { font-size: 12px; } .block-index-introduction ._row-header h2 span:nth-child(2) { font-size: 10px; } .block-index-introduction ._row-body { margin-top: 10px; } .block-index-introduction ._row-body ._title { font-size: 14px; font-weight: bold; text-align: center; background: url(../../images/index/introduction/sp/bg_titie.png) left top no-repeat; background-size: contain; width: 335px; height: 46px; margin: 0 auto; padding-top: 0px; letter-spacing: 0.1em; } .block-index-introduction ._row-body ._title span { font-size: 21px; -ms-transform: translate(0, 1px); transform: translate(0, 1px); display: inline-block; } .block-index-introduction ._row-body h3 { margin-top: 20px; font-size: 20px; text-align: center; letter-spacing: 0.1em; } .block-index-introduction ._row-body h3 span { display: inline-block; position: relative; } .block-index-introduction ._row-body h3 span:after { content: ""; display: block; position: absolute; left: 0px; right: 0px; height: 2px; bottom: -6px; background: #333; } .block-index-introduction ._row-body ._flow { margin-top: 20px; } .block-index-introduction ._row-body ._note { text-indent: -1em; margin-left: 1em; } .block-index-introduction ._row-body ._note p { font-size: 10px; } .block-index-introduction ._row-footer { margin-top: 20px; } .mod-index-flow { width: 100%; margin: 0 auto; position: relative; background-size: cover; } .mod-index-flow img { max-width: 100%; } .mod-index-flow:after { display: block; content: ""; padding-top: 231.34%; } .mod-index-flow ._bar1 { position: absolute; top: 15%; left: 22.5%; width: 3.13%; height: 70.06%; background: #E5203D; } .mod-index-flow ._bar2 { position: absolute; top: 10%; left: 74.5%; width: 3.13%; height: 85%; background: #1FB9E8; } .mod-index-flow ._box_cus { position: absolute; top: 0.64%; left: 52%; width: 49%; height: 12.32%;color: #fff } .mod-index-flow ._box_mov { position: absolute; top: 0.58%; left: 0%; width: 49%; height: 12.45%;color: #fff;font-size: 14px; } .mod-index-flow ._box1 { position: absolute; top: 14.45%; left: 0%; width: 100%; height: 15%; } .mod-index-flow ._box2 { position: absolute; top: 31.5%; left: 0%; width: 100%; height: 18%; } .mod-index-flow ._box3 { position: absolute; top: 51.5%; left: 0%; width: 100%; height: 12.5%; } .mod-index-flow ._box4 { position: absolute; top: 66%; left: 0%; width: 100%; height: 10%; } .mod-index-flow ._box5 { position: absolute; top: 78%; left: 0%; width: 100%; height: 11%; } .mod-index-flow ._box_last { position: absolute; top: 91%; left: -0.15%; width: 100%; height: 7%; } .mod-index-flow ._box_time { position: absolute; top: 1.48%; left: -0.3%; width: 13.43%; height: 90%; } .mod-index-flow ._box_cus { background: url(../../images/index/introduction/sp/box_cus.png) left top no-repeat; background-size: contain; } .mod-index-flow ._box_mov { background: url(../../images/index/introduction/sp/box_mov.png) left top no-repeat; background-size: contain; } .mod-index-flow .is-label span { position: absolute; left: 0px; right: 0px; bottom: 12px; font-size: 16px; text-align: center; letter-spacing: 0.1em; font-weight: bold; } .mod-index-flow ._box_last { background: #FFED58; border-radius: 12px; display: -ms-flexbox; display: flex; -ms-flex-pack: center; justify-content: center; -ms-flex-align: center; align-items: center; text-align: center; font-weight: bold; letter-spacing: 0.1em; font-size: 14px; } .mod-index-flow ._box { padding: 15px 5px 0 15px; background: #fff; border-radius: 5px; } .mod-index-flow ._box ._no { position: absolute; top: -7px; left: 7px; font-size: 30px; font-weight: 200; } .mod-index-flow ._box ._t { font-size: 14px; font-weight: bold; letter-spacing: 0.1em; text-align: center; margin-bottom: 5px; } .mod-index-flow ._box ._body { font-size: 12px; letter-spacing: 0.1em; line-height: 1.4;padding-bottom: 10px;text-align: center } .mod-index-flow ._box ._body p { font-size: 12px; letter-spacing: 0.1em; line-height: 1.4; } .mod-index-flow ._box_time { background: url(../../images/index/introduction/sp/box_time.png) left top no-repeat; background-size: contain; } .mod-index-flow ._t_time1 { position: absolute; top: 3.5%; left: 4.1%; } .mod-index-flow ._t_time1 { -ms-writing-mode: tb-rl; writing-mode: vertical-rl; font-size: 14px; font-weight: bold; letter-spacing: 0.1em; } .mod-index-flow ._t_time2 { position: absolute; top: 25%; left: 3.5%; } .mod-index-flow ._t_time2 { -ms-writing-mode: tb-rl; writing-mode: vertical-rl; font-size: 14px; font-weight: bold; letter-spacing: 0.1em; } .mod-index-flow ._t_time3 { position: absolute; top: 62%; left: 3.5%; } .mod-index-flow ._t_time3 { -ms-writing-mode: tb-rl; writing-mode: vertical-rl; font-size: 14px; font-weight: bold; letter-spacing: 0.1em; } .mod-index-flow ._int { -webkit-text-combine: horizontal; -ms-text-combine-horizontal: all; text-combine-upright: all; font-size: 20px; } .mod-index-flow ._point { display: inline-block; -ms-transform: rotate(-90deg); transform: rotate(-90deg); font-size: 20px; text-align: center; } .block-index-voice { background: #f6f6f6; padding: 60px 20px 80px 20px; position: relative; } .block-index-voice ._row-body { margin-top: 5px; } .js-voice.js-open .js-place:after { display: none; } .js-voice .js-place { transition-duration: 0.2s; height: 110px; overflow: hidden; position: relative; } .js-voice .js-place:after { content: ""; display: block; position: absolute; bottom: 0px; left: 0px; right: 0; height: 30px; background: linear-gradient(rgba(255, 255, 255, 0) 0%, #fff 100%); } .mod-index-voice { position: relative; } .mod-index-voice + .mod-index-voice { margin-top: 20px; } .mod-index-voice:before { content: ""; position: absolute; top: 65px; left: 50%; width: 10px; height: 10px; box-sizing: border-box; border: 10px solid transparent; border-bottom: 10px solid #fff; -ms-transform: scale(1, 1.4); transform: scale(1, 1.4); } .mod-index-voice ._prof { text-align: center; height: 85px; } .mod-index-voice ._prof img { position: absolute; top: 0px; left: 0px; width: 75px; } .mod-index-voice ._prof p { padding-top: 20px; font-weight: bold; } .mod-index-voice ._texts { position: relative; padding: 15px 20px 20px 20px; line-height: 1.8; } .mod-index-voice ._texts ._inner { position: relative; z-index: 10; } .mod-index-voice ._texts:after { content: ""; display: block; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; border-radius: 5px; background: #fff; } .mod-index-voice ._texts:before { content: ""; display: block; position: absolute; border-radius: 5px; top: 0px; left: 0px; right: 0px; bottom: 0px; -ms-transform: translate(5px, 5px); transform: translate(5px, 5px); background: url(../images/mod-btn/bg.png) left top; background-size: 8px 8px; } .mod-index-voice ._texts ._q { font-size: 14px; letter-spacing: 0.1em; text-align: left; color: #23b8bc; font-weight: bold; padding-left: 30px; line-height: 1.5; } .mod-index-voice ._texts ._q span { position: relative; display: block; padding-right: 30px; } .mod-index-voice ._texts ._q span:before { position: absolute; top: 0px; left: -30px; content: ""; display: inline-block; background: url(../../images/index/voice/quote.png) left top no-repeat; background-size: contain; width: 20px; height: 15px; -ms-transform: rotate(180deg); transform: rotate(180deg); } .mod-index-voice ._texts ._q span:after { position: absolute; bottom: 0px; right: 0px; content: ""; display: inline-block; background: url(../../images/index/voice/quote.png) left top no-repeat; background-size: contain; width: 20px; height: 15px; } .mod-index-voice ._texts ._a { margin-top: 10px; } .mod-index-voice ._btns { margin-top: -10px; text-align: center; } .mod-index-voice .js-open ._btns { margin-top: 10px; } .block-index-faq { padding: 40px 20px 70px 20px; background-color: #FDEF68; position: relative; } .block-index-faq ._row-body { margin-top: 20px; }/* ---------------------------------------------------------- .mod-toggle ---------------------------------------------------------- */ .mod-faq { position: relative; } .mod-faq + .mod-faq { margin-top: 15px; } .mod-faq:after { content: ""; display: block; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; border-radius: 5px; background: #fff; } .mod-faq:before { content: ""; display: block; position: absolute; border-radius: 5px; top: 0px; left: 0px; right: 0px; bottom: 0px; -ms-transform: translate(5px, 5px); transform: translate(5px, 5px); background: url(../images/mod-btn/bg.png) left top; background-size: 8px 8px; } .mod-faq:hover:before { animation: move-stripe1 .4s infinite linear; } .mod-faq ._head { position: relative; z-index: 1; cursor: pointer; background: #E6EAF1; border-radius: 5px; padding: 12px 20px 12px 50px; font-size: 14px; letter-spacing: 0.1em; line-height: 1.5; color: #2b7dc2; font-weight: bold; display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; } .mod-faq ._head ._icon:after { content: ""; display: block; position: absolute; top: 50%; right: 10px; background: url(../images/mod-btn/icon_toggle.svg) left top no-repeat; background-size: contain; width: 10px; height: 10px; -ms-transform: translate(0, -50%) rotate(180deg); transform: translate(0, -50%) rotate(180deg); } .mod-faq ._head:hover .js-open { opacity: 0.7; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; } .mod-faq.js-open ._head { border-radius: 5px 5px 0 0; } .mod-faq.js-open ._head ._icon:after { -ms-transform: translate(0, -50%) rotate(0); transform: translate(0, -50%) rotate(0); } .mod-faq ._body { position: relative; display: none; z-index: 2; border-radius: 0 0 5px 5px; padding: 20px 20px 20px 50px; } .mod-faq ._body i { top: 12px; } .mod-faq i { position: absolute; top: 7px; left: 10px; right: 0px; bottom: 0px; width: 30px; height: 30px; font-weight: normal; background: #fff; color: #2b7dc2; font-style: normal; font-size: 20px; display: -ms-flexbox; display: flex; -ms-flex-pack: center; justify-content: center; -ms-flex-align: center; align-items: center; text-align: center; padding-bottom: 2px; box-sizing: border-box; border-radius: 50%; } .block-index-download { padding: 60px 20px 40px 20px; position: relative; } .block-index-download:before { content: ""; display: block; position: absolute; top: 0px; left: -70px; background: url(../../images/index/download/bg1.svg) left top no-repeat; background-size: contain; width: 195px; height: 200px; z-index: -1; } .block-index-download ._row-header p { margin-top: 20px; font-size: 12px; } .block-index-download ._row-body { margin-top: 50px; } .block-index-download ._box { position: relative; z-index: 1; } .block-index-download ._box ._header { border-radius: 10px 10px 0 0; background: #FFED58; padding: 45px 0 30px 20px; text-align: center; position: relative; } .block-index-download ._box ._header ._reccomend { display: block; position: absolute; top: 0px; left: 50%; -ms-transform: translate(-50%, -40%); transform: translate(-50%, -40%); background: url(../../images/index/download/bg_reccomend.png) left top no-repeat; background-size: contain; width: 225px; height: 43.5px; font-size: 13px; letter-spacing: 0.1em; text-align: center; padding-top: 10px; font-weight: bold; } .block-index-download ._box ._header ul li { position: relative; font-size: 30px; text-align: left; padding-left: 30px; letter-spacing: 0.1em; } .block-index-download ._box ._header ul li + li { margin-top: 10px; } .block-index-download ._box ._body { border-radius: 0 0 10px 10px; background: #F6F6F6; padding: 30px 20px 60px 20px; } .mod-index-head { text-align: center; } .mod-index-head h2 { font-size: 25px; font-weight: bold; line-height: 1.4; text-align: center; letter-spacing: 0.12em; } .mod-index-head h2:before { content: ""; display: block; margin: 0 auto; background: url(../../images/index/howto/mark.png) left top no-repeat; background-size: contain; width: 120px; height: 60px; } .mod-index-head.is-problems h2:before { background-image: url(../../images/index/problems/mark.html); } .mod-index-head.is-howto h2:before { background-image: url(../../images/index/howto/mark.png); } .mod-index-head.is-management h2:before { background-image: url(../../images/index/management/mark.png); } .mod-index-head.is-introduction h2:before { background-image: url(../../images/index/introduction/mark.png); } .mod-index-head.is-voice h2:before { background-image: url(../../images/index/voice/mark.png); } .mod-index-head.is-faq h2:before { background-image: url(../../images/index/faq/mark.png); } .mod-index-head.is-download h2:before { display: none; } .mod-index-head p { margin-top: 35px; margin-bottom: 0; font-size: 14px; font-weight: bold; line-height: 1.55; letter-spacing: 0.1em; text-align: left; } } @media screen and (min-width: 650px){ .br-pc { display:block; } .br-sp { display:none; } } @media screen and (max-width: 650px){ .br-pc { display:none; } .br-sp { display:block; } } .kaisha { width: 100%; } .kaisha th, .kaisha td { border: 1px solid #ccc; padding: 20px; letter-spacing:1px; line-height: 1.5; } .kaisha th { font-weight: bold; background-color: #dedede; } @media screen and (max-width: 767px) { .kaisha, .kaisha tr, .kaisha td, .kaisha th {display:block;} .kaisha th {width:auto;} .kaisha { margin-top: 20px; } } /*# sourceMappingURL=maps/block.css.map */