@charset "UTF-8"; /*** The new CSS reset - version 1.7.3 (last updated 7.8.2022) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { -webkit-box-sizing: border-box; box-sizing: border-box; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; } /* For images to not be able to exceed their container */ img { max-width: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; -moz-appearance: revert; appearance: revert; } /* reset default text opacity of input placeholder */ ::-webkit-input-placeholder { color: unset; } ::-moz-placeholder { color: unset; } :-ms-input-placeholder { color: unset; } ::-ms-input-placeholder { color: unset; } ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable=false])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } .global-marginTop-0px { margin-top: 0px !important; } .global-paddingTop-0px { padding-top: 0px !important; } .global-marginRight-0px { margin-right: 0px !important; } .global-paddingRight-0px { padding-right: 0px !important; } .global-marginBottom-0px { margin-bottom: 0px !important; } .global-paddingBottom-0px { padding-bottom: 0px !important; } .global-marginLeft-0px { margin-left: 0px !important; } .global-paddingLeft-0px { padding-left: 0px !important; } .global-marginTop-10px { margin-top: 10px !important; } .global-paddingTop-10px { padding-top: 10px !important; } .global-marginRight-10px { margin-right: 10px !important; } .global-paddingRight-10px { padding-right: 10px !important; } .global-marginBottom-10px { margin-bottom: 10px !important; } .global-paddingBottom-10px { padding-bottom: 10px !important; } .global-marginLeft-10px { margin-left: 10px !important; } .global-paddingLeft-10px { padding-left: 10px !important; } .global-marginTop-20px { margin-top: 20px !important; } .global-paddingTop-20px { padding-top: 20px !important; } .global-marginRight-20px { margin-right: 20px !important; } .global-paddingRight-20px { padding-right: 20px !important; } .global-marginBottom-20px { margin-bottom: 20px !important; } .global-paddingBottom-20px { padding-bottom: 20px !important; } .global-marginLeft-20px { margin-left: 20px !important; } .global-paddingLeft-20px { padding-left: 20px !important; } .global-marginTop-30px { margin-top: 30px !important; } .global-paddingTop-30px { padding-top: 30px !important; } .global-marginRight-30px { margin-right: 30px !important; } .global-paddingRight-30px { padding-right: 30px !important; } .global-marginBottom-30px { margin-bottom: 30px !important; } .global-paddingBottom-30px { padding-bottom: 30px !important; } .global-marginLeft-30px { margin-left: 30px !important; } .global-paddingLeft-30px { padding-left: 30px !important; } .global-marginTop-40px { margin-top: 40px !important; } .global-paddingTop-40px { padding-top: 40px !important; } .global-marginRight-40px { margin-right: 40px !important; } .global-paddingRight-40px { padding-right: 40px !important; } .global-marginBottom-40px { margin-bottom: 40px !important; } .global-paddingBottom-40px { padding-bottom: 40px !important; } .global-marginLeft-40px { margin-left: 40px !important; } .global-paddingLeft-40px { padding-left: 40px !important; } .global-marginTop-50px { margin-top: 50px !important; } .global-paddingTop-50px { padding-top: 50px !important; } .global-marginRight-50px { margin-right: 50px !important; } .global-paddingRight-50px { padding-right: 50px !important; } .global-marginBottom-50px { margin-bottom: 50px !important; } .global-paddingBottom-50px { padding-bottom: 50px !important; } .global-marginLeft-50px { margin-left: 50px !important; } .global-paddingLeft-50px { padding-left: 50px !important; } .global-marginTop-60px { margin-top: 60px !important; } .global-paddingTop-60px { padding-top: 60px !important; } .global-marginRight-60px { margin-right: 60px !important; } .global-paddingRight-60px { padding-right: 60px !important; } .global-marginBottom-60px { margin-bottom: 60px !important; } .global-paddingBottom-60px { padding-bottom: 60px !important; } .global-marginLeft-60px { margin-left: 60px !important; } .global-paddingLeft-60px { padding-left: 60px !important; } .global-marginTop-70px { margin-top: 70px !important; } .global-paddingTop-70px { padding-top: 70px !important; } .global-marginRight-70px { margin-right: 70px !important; } .global-paddingRight-70px { padding-right: 70px !important; } .global-marginBottom-70px { margin-bottom: 70px !important; } .global-paddingBottom-70px { padding-bottom: 70px !important; } .global-marginLeft-70px { margin-left: 70px !important; } .global-paddingLeft-70px { padding-left: 70px !important; } .global-marginTop-80px { margin-top: 80px !important; } .global-paddingTop-80px { padding-top: 80px !important; } .global-marginRight-80px { margin-right: 80px !important; } .global-paddingRight-80px { padding-right: 80px !important; } .global-marginBottom-80px { margin-bottom: 80px !important; } .global-paddingBottom-80px { padding-bottom: 80px !important; } .global-marginLeft-80px { margin-left: 80px !important; } .global-paddingLeft-80px { padding-left: 80px !important; } .global-marginTop-90px { margin-top: 90px !important; } .global-paddingTop-90px { padding-top: 90px !important; } .global-marginRight-90px { margin-right: 90px !important; } .global-paddingRight-90px { padding-right: 90px !important; } .global-marginBottom-90px { margin-bottom: 90px !important; } .global-paddingBottom-90px { padding-bottom: 90px !important; } .global-marginLeft-90px { margin-left: 90px !important; } .global-paddingLeft-90px { padding-left: 90px !important; } .global-marginTop-100px { margin-top: 100px !important; } .global-paddingTop-100px { padding-top: 100px !important; } .global-marginRight-100px { margin-right: 100px !important; } .global-paddingRight-100px { padding-right: 100px !important; } .global-marginBottom-100px { margin-bottom: 100px !important; } .global-paddingBottom-100px { padding-bottom: 100px !important; } .global-marginLeft-100px { margin-left: 100px !important; } .global-paddingLeft-100px { padding-left: 100px !important; } .global-displayNone { display: none !important; } .global-fontSizeSmallest { font-size: 0.6em !important; } .global-fontSizeSmaller { font-size: 0.8em !important; } .global-fontSizeLarger { font-size: 1.2em !important; } .global-fontSizeLargest { font-size: 1.4em !important; } .global-fontWeightNormal { font-weight: normal !important; } .global-fontWeightBold { font-weight: bold !important; } .global-textAlignLeft { text-align: left !important; } .global-textAlignRight { text-align: right !important; } .global-textAlignCenter { text-align: center !important; } .global-pcOnly { display: block !important; } .global-spOnly { display: none !important; } span.global-pcOnly { display: inline !important; } html { overflow-x: auto !important; } body { font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳＰゴシック", sans-serif !important; background: #2e2461; font-size: 16px; color: #222; line-height: 1.6; word-break: break-all; overflow-x: auto !important; } img { vertical-align: bottom; } .kv__inner { max-width: 840px; margin: 0 auto; } .kv__h1 { display: block; } .kv__img { max-width: 100%; vertical-align: bottom; } .lead__inner { max-width: 840px; margin: 0 auto; } .lead__list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: wrap; flex-wrap: wrap; padding: 0 40px; background: #1a1a1a url(../img/bg_lead.jpg) no-repeat left top; } .lead__item { width: 362px; margin-bottom: 40px; } .lead__cv { padding: 50px 40px; background: #1a1a1a; } .lead__h3 { text-align: center; } .lead__cvLink { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; height: 110px; margin-top: 25px; padding: 0 90px; background: -webkit-gradient(linear, left top, left bottom, from(#f29552), to(#ed7218)); background: linear-gradient(to bottom, #f29552, #ed7218); border: 2px solid #ed7218; border-radius: 20px; font-size: 50px; font-weight: bold; color: #fff; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: 0.2s; transition: 0.2s; } .lead__cvLink:hover { opacity: 0.8; } .lead__cvLink::before { content: ""; position: absolute; right: 60px; top: 50%; width: 50px; height: 50px; border-radius: 50px; background: #333; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .lead__cvLink::after { content: ""; position: absolute; right: 72px; top: 52%; width: 0; height: 0; border-style: solid; border-width: 20px 13px 0 13px; border-color: #fff transparent transparent transparent; -webkit-transform: translateY(-50%); transform: translateY(-50%); } @media (max-width: 840px) { .lead__list { padding: 0 4.7619047619vw; background: #1a1a1a url(../img/bg_lead.jpg) no-repeat left top/100% auto; } .lead__item { width: 41.6666666667vw; margin-bottom: 4.7619047619vw; } .lead__cv { padding: 5.9523809524vw 4.7619047619vw; } .lead__cvLink { height: 13.0952380952vw; margin-top: 2.9761904762vw; padding: 0 10.7142857143vw; border: 0.2380952381vw solid #ed7218; border-radius: 2.380952381vw; font-size: 5.9523809524vw; } .lead__cvLink::before { right: 7.1428571429vw; width: 5.9523809524vw; height: 5.9523809524vw; border-radius: 5.9523809524vw; } .lead__cvLink::after { right: 8.5714285714vw; border-width: 2.380952381vw 1.5476190476vw 0 1.5476190476vw; } } .sec01__inner { max-width: 840px; margin: 0 auto; padding: 20px 0; background: #fff; } .sec01__checkBlock { position: relative; margin-top: 120px; padding: 105px 40px 0; background: url(../img/sec01_bg01.png) no-repeat left top; } .sec01__checkBlock::before { content: ""; position: absolute; left: 25px; top: -110px; width: 429px; height: 217px; background: url(../img/sec01_balloon01.png) no-repeat left top; } .sec01__checkList { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-top: 30px; } .sec01__checkItem { width: 244px; margin-bottom: 45px; } .sec01__checkbox { display: none; /* &:checked { + label { &::before { background: url(../img/check_on.png) no-repeat left top; } } } */ } .sec01__checkbox + label::before { content: ""; position: absolute; left: 6px; top: 0; width: 47px; height: 47px; background: url(../img/check_off.png) no-repeat left top; } .sec01__checkLabel { display: block; position: relative; /* transition: .2s; &:hover { cursor: pointer; } */ } .sec01__bottom { position: relative; margin-top: -20px; z-index: 1; } .sec01__imgWrapper { text-align: center; } .sec01__borderTxt { 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; width: 770px; height: 100px; margin: 0 auto; border: 3px solid #808080; border-radius: 20px; font-size: 26px; font-weight: bold; line-height: 1.3; } @media (max-width: 840px) { .sec01__inner { padding: 2.380952381vw 0; } .sec01__checkBlock { margin-top: 14.2857142857vw; padding: 12.5vw 4.7619047619vw 0; background: url(../img/sec01_bg01.png) no-repeat left top/100% auto; } .sec01__checkBlock::before { left: 2.9761904762vw; top: -13.0952380952vw; width: 51.0714285714vw; height: 25.8333333333vw; background: url(../img/sec01_balloon01.png) no-repeat left top/100% auto; } .sec01__checkList { margin-top: 3.5714285714vw; } .sec01__checkItem { width: 27.8571428571vw; margin-bottom: 5.3571428571vw; } .sec01__checkbox { display: none; /* &:checked { + label { &::before { background: url(../img/check_on.png) no-repeat left top; } } } */ } .sec01__checkbox + label::before { left: 0.7142857143vw; top: 0; width: 5.5952380952vw; height: 5.5952380952vw; background: url(../img/check_off.png) no-repeat left top/100% auto; } .sec01__bottom { margin-top: -2.380952381vw; } .sec01__borderTxt { width: 91.6666666667vw; height: 11.9047619048vw; border: 0.3571428571vw solid #808080; border-radius: 2.380952381vw; font-size: 3.0952380952vw; } } .sec02__inner { max-width: 840px; margin: 0 auto; padding: 70px 0; } .sec02__h2 { 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; width: 760px; height: 120px; margin: 0 auto; padding-left: 110px; background: url(../img/sec02_ttlicon.png) no-repeat left 130px center; border: 5px solid #fff; border-radius: 80px; font-size: 60px; font-weight: bold; color: #fff; -webkit-box-sizing: border-box; box-sizing: border-box; } .sec02__h2 .-small { position: relative; top: 6px; font-size: 48px; } .sec02__imgWrapper { margin-top: 70px; text-align: center; } .sec02__imgWrapper.-negativeMargin { margin-top: -10px; } .sec02__item { margin-top: 80px; } .sec02__txt { margin: 10px 0 0 40px; font-size: 26px; color: #fff; } .sec02__overview { margin-top: 70px; background: #fff; } .sec02__overviewTtl { padding: 10px 0 0; background: #000; font-size: 52px; font-weight: bold; color: #fff; text-align: center; } .sec02__overviewTxt { padding: 30px 40px; font-size: 23px; font-weight: bold; } .sec02__overviewTxt .-bg { padding: 0 5px; background: #ff0000; color: #fff; } .sec02__overviewTxt .-red { color: #ff0000; } @media (max-width: 840px) { .sec02__inner { padding: 8.3333333333vw 0; } .sec02__h2 { width: 90.4761904762vw; height: 14.2857142857vw; padding-left: 13.0952380952vw; background: url(../img/sec02_ttlicon.png) no-repeat left 15.4761904762vw center/9.2857142857vw auto; border: 0.5952380952vw solid #fff; border-radius: 9.5238095238vw; font-size: 7.1428571429vw; } .sec02__h2 .-small { top: 0.7142857143vw; font-size: 5.7142857143vw; } .sec02__imgWrapper { margin-top: 8.3333333333vw; } .sec02__imgWrapper.-negativeMargin { margin-top: -1.1904761905vw; } .sec02__item { margin-top: 9.5238095238vw; } .sec02__txt { margin: 1.1904761905vw 4.7619047619vw 0; font-size: 2.8571428571vw; } .sec02__overview { margin-top: 8.3333333333vw; } .sec02__overviewTtl { padding: 1.1904761905vw 0 0; font-size: 6.1904761905vw; } .sec02__overviewTxt { padding: 3.5714285714vw 4.7619047619vw; font-size: 2.7380952381vw; } .sec02__overviewTxt .-bg { padding: 0 0.5952380952vw; } } .sec03__inner { max-width: 840px; margin: 0 auto; padding: 70px 0; } .sec03__h2 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 760px; height: 160px; margin: 0 auto; border: 5px solid #fff; border-radius: 160px; font-weight: bold; color: #fff; -webkit-box-sizing: border-box; box-sizing: border-box; line-height: 1; } .sec03__h2Txt01 { margin-bottom: 5px; font-size: 40px; } .sec03__h2Txt02 { font-size: 52px; } .sec03__imgWrapper { margin-top: 100px; text-align: center; } .sec03__imgWrapper.-negativeMargin { margin-top: 40px; margin-bottom: -155px; } .sec03__item { margin-top: 80px; } .sec03__txt { margin: 10px 0 0; padding: 0 40px; font-size: 24px; color: #fff; } .sec03__bgTxt { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 760px; height: 166px; margin: 0 auto; padding: 20px 30px; background: url(../img/sec03_bg01.jpg) no-repeat center; font-size: 28px; color: #fff; } @media (max-width: 840px) { .sec03__inner { padding: 8.3333333333vw 0; } .sec03__h2 { width: 90.4761904762vw; height: 19.0476190476vw; border: 0.5952380952vw solid #fff; border-radius: 19.0476190476vw; } .sec03__h2Txt01 { margin-bottom: 0.5952380952vw; font-size: 4.7619047619vw; } .sec03__h2Txt02 { font-size: 6.1904761905vw; } .sec03__imgWrapper { margin-top: 11.9047619048vw; text-align: center; } .sec03__imgWrapper.-negativeMargin { margin-top: 4.7619047619vw; margin-bottom: -18.4523809524vw; } .sec03__item { margin-top: 9.5238095238vw; } .sec03__txt { margin: 1.1904761905vw 0 0; padding: 0 4.7619047619vw; font-size: 2.8571428571vw; } .sec03__bgTxt { width: 90.4761904762vw; height: 19.7619047619vw; padding: 2.380952381vw 3.5714285714vw; font-size: 3.3333333333vw; } } .sec04__inner { max-width: 840px; margin: 0 auto; background: #fff; } .sec04__imgWrapper { text-align: center; } .sec04__imgWrapper.-mt { margin-top: 70px; } .sec04__h3 { text-align: center; } .sec04__item { margin-top: 80px; padding: 0 40px; } .sec04__h4 { font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳＰ明朝", "ＭＳ明朝", "Noto Serif JP", serif !important; margin-bottom: 20px; font-size: 42px; font-weight: bold; border-bottom: 1px solid #2e2461; } .sec04__column { display: -webkit-box; display: -ms-flexbox; display: flex; } .sec04__txt { width: 385px; margin-right: 20px; font-size: 22px; color: #4d4d4d; } .sec04__voice { margin-top: 80px; padding: 26px 0 56px; background: #9fd9f6; } .sec04__voiceH3 { padding: 0 40px; background: #2e2461; font-size: 35px; font-weight: bold; color: #fff; } .sec04__voiceColumn { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-top: 30px; padding: 0 0 0 40px; } .sec04__voiceH4 { font-size: 32px; font-weight: bold; color: #ed1c24; } .sec04__voiceBalloonTxt { 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; width: 501px; height: 359px; margin-right: 10px; padding: 0 30px 40px; background: url(../img/sec04_balloon.png) no-repeat left top; font-size: 22px; color: #4d4d4d; } .sec04__voiceImg { margin-top: -14px; } .sec04__voiceCommentTxt { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; width: 100%; height: 60px; } .sec04__voiceCommentTxt span { display: inline-block; padding: 10px 40px 10px 70px; background: url(../img/icon_person.png) no-repeat left center; font-size: 28px; color: #4d4d4d; } @media (max-width: 840px) { .sec04__imgWrapper.-mt { margin-top: 8.3333333333vw; } .sec04__h3 { text-align: center; } .sec04__item { margin-top: 9.5238095238vw; padding: 0 4.7619047619vw; } .sec04__h4 { font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳＰ明朝", "ＭＳ明朝", "Noto Serif JP", serif !important; margin-bottom: 2.380952381vw; font-size: 5vw; font-weight: bold; border-bottom: 0.119047619vw solid #2e2461; } .sec04__column { display: -webkit-box; display: -ms-flexbox; display: flex; } .sec04__column .sec04__imgWrapper { width: 42.1428571429vw; } .sec04__txt { width: 45.8333333333vw; margin-right: 2.380952381vw; font-size: 2.619047619vw; color: #4d4d4d; } .sec04__voice { margin-top: 9.5238095238vw; padding: 3.0952380952vw 0 6.6666666667vw; background: #9fd9f6; } .sec04__voiceH3 { padding: 0 4.7619047619vw; background: #2e2461; font-size: 4.1666666667vw; font-weight: bold; color: #fff; } .sec04__voiceColumn { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-top: 3.5714285714vw; padding: 0 0 0 4.7619047619vw; } .sec04__voiceH4 { font-size: 3.8095238095vw; font-weight: bold; color: #ed1c24; } .sec04__voiceBalloonTxt { 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; width: 57.1428571429vw; height: 42.7380952381vw; margin-right: 1.1904761905vw; padding: 0 2.380952381vw 4.7619047619vw; background: url(../img/sec04_balloon.png) no-repeat left top/100% auto; font-size: 2.5vw; color: #4d4d4d; } .sec04__voiceImg { width: 31.5476190476vw; margin-top: -1.6666666667vw; } .sec04__voiceCommentTxt { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; width: 100%; height: 7.1428571429vw; } .sec04__voiceCommentTxt span { display: inline-block; padding: 1.1904761905vw 4.7619047619vw 1.1904761905vw 8.3333333333vw; background: url(../img/icon_person.png) no-repeat left center/6.5476190476vw auto; font-size: 3.3333333333vw; color: #4d4d4d; } } .contact.-confirm .contact__inner { padding: 0; } .contact.-confirm .contact__formDd { padding: 20px; background: #e3e3e3; } .contact__inner { max-width: 840px; margin: 0 auto; padding: 90px 0 0; background: #000; } .contact__balloon { position: relative; text-align: center; margin-bottom: -40px; z-index: 1; } .contact__cv { padding: 50px 40px; } .contact__h3 { text-align: center; } .contact__cvLink { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; height: 110px; margin-top: 25px; padding: 0 90px; background: -webkit-gradient(linear, left top, left bottom, from(#f29552), to(#ed7218)); background: linear-gradient(to bottom, #f29552, #ed7218); border: 2px solid #ed7218; border-radius: 20px; font-size: 50px; font-weight: bold; color: #fff; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: 0.2s; transition: 0.2s; } .contact__cvLink:hover { opacity: 0.8; } .contact__cvLink::before { content: ""; position: absolute; right: 60px; top: 50%; width: 50px; height: 50px; border-radius: 50px; background: #333; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .contact__cvLink::after { content: ""; position: absolute; right: 72px; top: 52%; width: 0; height: 0; border-style: solid; border-width: 20px 13px 0 13px; border-color: #fff transparent transparent transparent; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .contact__formBlock { padding: 60px 40px; background: #fff; } .contact__formTtl { padding: 20px 0; border-bottom: 4px solid #909090; font-size: 42px; font-weight: bold; line-height: 1; text-align: center; } .contact__form { margin-top: 70px; } .contact__formItem:not(:first-child) { margin-top: 36px; } .contact__formDt { font-size: 24px; } .contact__formDt .-required { position: relative; top: -2px; display: inline-block; margin-left: 15px; padding: 8px; background: #ff0000; font-size: 20px; color: #fff; line-height: 1; } .contact__formDd { margin-top: 10px; font-size: 20px; } .contact__formInput { width: 100%; height: 70px; padding: 0 20px; border: 1px solid #b3b3b3; font-size: 24px; } .contact__formTextarea { width: 100%; height: 160px; padding: 20px; border: 1px solid #b3b3b3; font-size: 24px; } .contact__btnList { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-top: 80px; } .contact__btnItem { width: 350px; } .contact__btnItem.-long { width: 100%; } .contact__btn { 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; width: 100%; height: 110px; font-size: 42px; font-weight: bold; -webkit-transition: 0.2s; transition: 0.2s; } .contact__btn.-btn01 { background: url(../img/contact_btn01.png) no-repeat center; } .contact__btn.-btn02 { padding-right: 70px; background: url(../img/contact_btn02.png) no-repeat center; color: #fff; } .contact__btn.-btn03 { padding-right: 50px; background: url(../img/contact_btn03.png) no-repeat center; color: #fff; } .contact__btn:hover { cursor: pointer; opacity: 0.8; } .contact__formConfirmTxt { 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; width: 760px; height: 60px; margin-top: 14px; background: #ff0000; font-size: 32px; color: #fff; border-radius: 60px; } @media (max-width: 840px) { .contact.-confirm .contact__formDd { padding: 2.380952381vw; background: #e3e3e3; } .contact__inner { padding: 10.7142857143vw 0 0; } .contact__balloon { width: 89.4047619048vw; margin: 0 auto -4.7619047619vw; } .contact__cv { padding: 5.9523809524vw 4.7619047619vw; } .contact__h3 { text-align: center; } .contact__cvLink { height: 13.0952380952vw; margin-top: 2.9761904762vw; padding: 0 10.7142857143vw; border: 0.2380952381vw solid #ed7218; border-radius: 2.380952381vw; font-size: 5.4761904762vw; } .contact__cvLink:hover { opacity: 0.8; } .contact__cvLink::before { right: 7.1428571429vw; top: 50%; width: 5.9523809524vw; height: 5.9523809524vw; border-radius: 5.9523809524vw; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .contact__cvLink::after { right: 8.5714285714vw; border-width: 2.380952381vw 1.5476190476vw 0 1.5476190476vw; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .contact__formBlock { padding: 7.1428571429vw 4.7619047619vw; } .contact__formTtl { padding: 2.380952381vw 0; border-bottom: 0.4761904762vw solid #909090; font-size: 5vw; } .contact__form { margin-top: 8.3333333333vw; } .contact__formItem:not(:first-child) { margin-top: 4.2857142857vw; } .contact__formDt { font-size: 2.8571428571vw; } .contact__formDt .-required { top: -0.2380952381vw; margin-left: 1.7857142857vw; padding: 0.9523809524vw; font-size: 2.380952381vw; } .contact__formDd { margin-top: 1.1904761905vw; font-size: 2.380952381vw; } .contact__formInput { width: 100%; height: 8.3333333333vw; padding: 0 2.380952381vw; border: 0.119047619vw solid #b3b3b3; font-size: 2.8571428571vw; } .contact__formTextarea { width: 100%; height: 19.0476190476vw; padding: 2.380952381vw; border: 0.119047619vw solid #b3b3b3; font-size: 2.8571428571vw; } .contact__btnList { margin-top: 9.5238095238vw; } .contact__btnItem { width: 41.6666666667vw; } .contact__btn { height: 13.0952380952vw; font-size: 5vw; } .contact__btn.-btn01 { background: url(../img/contact_btn01.png) no-repeat center/100% auto; } .contact__btn.-btn02 { padding-right: 8.3333333333vw; background: url(../img/contact_btn02.png) no-repeat center/100% auto; } .contact__btn.-btn03 { padding-right: 5.9523809524vw; background: url(../img/contact_btn03.png) no-repeat center/100% auto; } .contact__formConfirmTxt { width: 90.4761904762vw; height: 7.1428571429vw; margin-top: 1.6666666667vw; font-size: 3.8095238095vw; border-radius: 7.1428571429vw; } } @-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } .footer__inner { max-width: 840px; margin: 0 auto; padding: 70px 0 100px; } .footer__pagetop { display: block; position: fixed; bottom: 65px; z-index: 100; right: 20px; width: 70px; opacity: 0; -webkit-transition: 0.3s; transition: 0.3s; } .footer__pagetop.-active { opacity: 1; } .footer__pagetop.-active:hover { opacity: 0.8; } .footer__copyright { font-size: 20px; color: #fff; text-align: center; } @media (max-width: 840px) { .footer__inner { padding: 8.3333333333vw 0 11.9047619048vw; } .footer__pagetop { bottom: 7.7380952381vw; right: 2.380952381vw; width: 11.9047619048vw; } .footer__copyright { font-size: 2.380952381vw; } }