/*common*/ .pc-only { display: block!important; } .sp-only { display: none!important; } section, main { position: relative; display: block; } body { width: 100%; overflow-x: hidden; } img { max-width: 100%; } @media screen and (max-width: 1024px) { body.single-case main { overflow-x: hidden; } } @media screen and (max-width: 768px) { .pc-only { display: none!important; } .sp-only { display: block!important; } } /*no-js*/ .no-js .js-scroll-fade, .no-js main, .no-js header, .no-js .bgFix, .no-js .top_main_img, .no-js .top_main_txt, .no-js .top_main_img .item01, .no-js .top_main_img .parts02, .no-js .top_main_img .parts03, .no-js .top_main_img .parts04{ opacity: 1!important; } /*bg*/ .bgFixWrapper { width: 100%; height: 110vh; overflow: hidden; position: fixed; } .bgFix { width: 3000px; height: 2000px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } .bgFixInner { content: ""; display: block; width: 100%; height: 100vh; position: absolute; top: 0; left: 0; background: linear-gradient(180deg, rgb(53, 48, 49 ,0) 10%, rgb(53, 48, 49, 1) 100%); } .bgFix span { display: block; background: url("../img/bg_ico.svg") no-repeat center / contain; transform: translate(-200%,200%); } @keyframes bgIco01{ 0%{ transform: translate(0%,0%); } to{ transform: translate(-200%,200%); } } @keyframes bgIco02{ 0%{ top: 0%; left: 70%; } to{ top: 100%; left: -30%; transform: translate(100%,100%); } } @keyframes bgIco03{ 0%{ top: 0%; left: 90%; } to{ top: 100%; left: -10%; transform: translate(100%,100%); } } @keyframes bgIco04{ 0%{ top: 0%; left: 110%; } to{ top: 100%; left: 10%; transform: translate(100%,100%); } } @keyframes bgIco05{ 0%{ top: 0%; left: 130%; } to{ top: 100%; left: 30%; transform: translate(100%,100%); } } @keyframes bgIco06{ 0%{ top: 0%; left:150%; } to{ top: 100%; left: 50%; transform: translate(100%,100%); } } @keyframes bgIco07{ 0%{ top: 0%; left: 170%; } to{ top: 100%; left: 70%; transform: translate(100%,100%); } } .bgFix span:nth-child(1) { width: 136px; height: 86px; position: absolute; top: calc(0px + 0px); right: calc(-200px + 0px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(2) { width: 136px; height: 86px; position: absolute; top: calc(100px + 0px); right: calc(200px + 0px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(3) { width: 136px; height: 86px; position: absolute; top: calc(200px + 0px); right: calc(1400px + 0px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(4) { width: 136px; height: 86px; position: absolute; top: calc(240px + 0px); right: calc(-480px + 0px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(5) { width: 136px; height: 86px; position: absolute; top: calc(530px + 0px); right: calc(1500px + 0px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(6) { width: 68px; height: 43px; position: absolute; top: calc(580px + 0px); right: calc(1000px + 0px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(7) { width: 136px; height: 86px; position: absolute; top: calc(600px + 0px); right: calc(2000px + 0px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(8) { width: 223px; height: 134px; position: absolute; top: calc(0 + 0px); right: calc(2000px + 0px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(9) { display: none; width: 223px; height: 134px; position: absolute; top: calc(100px + 0px); right: calc(-400px + 0px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(10) { display: none; width: 223px; height: 134px; position: absolute; top: calc(200px + 0px); right: calc(1500px + 0px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(11) { display: none; width: 223px; height: 134px; position: absolute; top: calc(300px + 0px); right: calc(900px + 0px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(12) { display: none; width: 223px; height: 134px; position: absolute; top: calc(400px + 0px); right: calc(1580px + 0px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(13) { display: none; width: 223px; height: 134px; position: absolute; top: calc(500px + 0px); right: calc(500px + 0px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(14) { width: 223px; height: 134px; position: absolute; top: calc(600px + 0px); right: calc(0px + 0px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(15) { width: 272px; height: 172px; position: absolute; top: calc(0px + 0px); right: calc(1500px + 0px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(16) { display: none; width: 68px; height: 43px; position: absolute; top: calc(100px + 0px); right: calc(100px + 0px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(17) { width: 272px; height: 172px; position: absolute; top: calc(200px + 0px); right: calc(-300px + 0px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(18) { width: 272px; height: 172px; position: absolute; top: calc(300px + 0px); right: calc(0 + 0px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(19) { width: 272px; height: 172px; position: absolute; top: calc(280px + 0px); right: calc(120px + 0px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(20) { width: 68px; height: 43px; position: absolute; top: calc(500px + 0px); right: calc(750px + 0px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(21) { width: 272px; height: 172px; position: absolute; top: calc(760px + 0px); right: calc(1660px + 0px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(22) { width: 136px; height: 86px; position: absolute; top: calc(0px + 700px); right: calc(-200px + 1000px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(23) { width: 136px; height: 86px; position: absolute; top: calc(100px + 700px); right: calc(200px + 1000px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(24) { width: 136px; height: 86px; position: absolute; top: calc(200px + 700px); right: calc(1400px + 1000px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(25) { width: 136px; height: 86px; position: absolute; top: calc(240px + 700px); right: calc(-480px + 1000px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(26) { width: 136px; height: 86px; position: absolute; top: calc(530px + 700px); right: calc(1500px + 1000px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(27) { width: 68px; height: 43px; position: absolute; top: calc(580px + 700px); right: calc(1000px + 1000px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(28) { width: 136px; height: 86px; position: absolute; top: calc(600px + 700px); right: calc(2000px + 1000px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(29) { width: 223px; height: 134px; position: absolute; top: calc(0 + 700px); right: calc(2000px + 1000px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(30) { display: none; width: 223px; height: 134px; position: absolute; top: calc(100px + 700px); right: calc(-400px + 1000px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(31) { display: none; width: 223px; height: 134px; position: absolute; top: calc(200px + 700px); right: calc(1500px + 1000px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(32) { display: none; width: 223px; height: 134px; position: absolute; top: calc(300px + 700px); right: calc(900px + 1000px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(33) { display: none; width: 223px; height: 134px; position: absolute; top: calc(400px + 700px); right: calc(1580px + 1000px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(34) { display: none; width: 223px; height: 134px; position: absolute; top: calc(500px + 700px); right: calc(500px + 1000px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(35) { width: 223px; height: 134px; position: absolute; top: calc(600px + 700px); right: calc(0px + 1000px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(36) { width: 272px; height: 172px; position: absolute; top: calc(0px + 700px); right: calc(1500px + 1000px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(37) { display: none; width: 68px; height: 43px; position: absolute; top: calc(100px + 700px); right: calc(100px + 1000px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(38) { width: 272px; height: 172px; position: absolute; top: calc(200px + 700px); right: calc(-300px + 1000px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(39) { width: 272px; height: 172px; position: absolute; top: calc(300px + 700px); right: calc(0 + 1000px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(40) { width: 272px; height: 172px; position: absolute; top: calc(280px + 700px); right: calc(120px + 1000px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(41) { width: 68px; height: 43px; position: absolute; top: calc(500px + 700px); right: calc(750px + 1000px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(42) { width: 272px; height: 172px; position: absolute; top: calc(760px + 700px); right: calc(1660px + 1000px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(43) { width: 136px; height: 86px; position: absolute; top: calc(0px + 1400px); right: calc(-200px + 2000px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(44) { width: 136px; height: 86px; position: absolute; top: calc(100px + 1400px); right: calc(200px + 2000px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(45) { width: 136px; height: 86px; position: absolute; top: calc(200px + 1400px); right: calc(1400px + 2000px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(46) { width: 136px; height: 86px; position: absolute; top: calc(240px + 1400px); right: calc(-480px + 2000px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(47) { width: 136px; height: 86px; position: absolute; top: calc(530px + 1400px); right: calc(1500px + 2000px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(48) { width: 68px; height: 43px; position: absolute; top: calc(580px + 1400px); right: calc(1000px + 2000px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(49) { width: 136px; height: 86px; position: absolute; top: calc(600px + 1400px); right: calc(2000px + 2000px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(50) { width: 223px; height: 134px; position: absolute; top: calc(0 + 1400px); right: calc(2000px + 2000px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(51) { display: none; width: 223px; height: 134px; position: absolute; top: calc(100px + 1400px); right: calc(-400px + 2000px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(52) { display: none; width: 223px; height: 134px; position: absolute; top: calc(200px + 1400px); right: calc(1500px + 2000px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(53) { display: none; width: 223px; height: 134px; position: absolute; top: calc(300px + 1400px); right: calc(900px + 2000px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(54) { display: none; width: 223px; height: 134px; position: absolute; top: calc(400px + 1400px); right: calc(1580px + 2000px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(55) { display: none; width: 223px; height: 134px; position: absolute; top: calc(500px + 1400px); right: calc(500px + 2000px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(56) { width: 223px; height: 134px; position: absolute; top: calc(600px + 1400px); right: calc(0px + 2000px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(57) { width: 272px; height: 172px; position: absolute; top: calc(0px + 1400px); right: calc(1500px + 2000px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(58) { display: none; width: 68px; height: 43px; position: absolute; top: calc(100px + 1400px); right: calc(100px + 2000px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(59) { width: 272px; height: 172px; position: absolute; top: calc(200px + 1400px); right: calc(-300px + 2000px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(60) { width: 272px; height: 172px; position: absolute; top: calc(300px + 1400px); right: calc(0 + 2000px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(61) { width: 272px; height: 172px; position: absolute; top: calc(280px + 1400px); right: calc(120px + 2000px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(62) { width: 68px; height: 43px; position: absolute; top: calc(500px + 1400px); right: calc(750px + 2000px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(63) { width: 272px; height: 172px; position: absolute; top: calc(760px + 1400px); right: calc(1660px + 2000px); animation: 12s ease-out 0s 1 bgIco01; } @media screen and (max-width: 768px) { .bgFix { width: 1500px; height: 1000px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } .bgFix span:nth-child(1) { width: 51px; height: 32px; position: absolute; top: calc(0px + 0px); right: calc(-100px + 0px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(2) { width: 51px; height: 32px; position: absolute; top: calc(50px + 0px); right: calc(100px + 0px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(3) { width: 51px; height: 32px; position: absolute; top: calc(100px + 0px); right: calc(700px + 0px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(4) { width: 51px; height: 32px; position: absolute; top: calc(120px + 0px); right: calc(345px + 0px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(5) { width: 51px; height: 32px; position: absolute; top: calc(265px + 0px); right: calc(750px + 0px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(6) { width: 68px; height: 43px; position: absolute; top: calc(290px + 0px); right: calc(500px + 0px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(7) { width: 51px; height: 32px; position: absolute; top: calc(300px + 0px); right: calc(1000px + 0px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(8) { width: 83px; height: 50px; position: absolute; top: calc(0px + 0px); right: calc(1000px + 0px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(9) { display: none; width: 83px; height: 50px; position: absolute; top: calc(50px + 0px); right: calc(-200px + 0px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(10) { display: none; width: 83px; height: 50px; position: absolute; top: calc(100px + 0px); right: calc(750px + 0px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(11) { width: 83px; height: 50px; position: absolute; top: calc(150px + 0px); right: calc(450px + 0px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(12) { width: 83px; height: 50px; position: absolute; top: calc(200px + 0px); right: calc(790px + 0px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(13) { display: none; width: 83px; height: 50px; position: absolute; top: calc(250px + 0px); right: calc(250px + 0px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(14) { width: 83px; height: 50px; position: absolute; top: calc(300px + 0px); right: calc(0px + 0px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(15) { width: 122px; height: 77px; position: absolute; top: calc(0px + 0px); right: calc(750px + 0px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(16) { display: none; width: 68px; height: 43px; position: absolute; top: calc(50px + 0px); right: calc(50px + 0px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(17) { width: 122px; height: 77px; position: absolute; top: calc(100px + 0px); right: calc(-150px + 0px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(18) { width: 122px; height: 77px; position: absolute; top: calc(150px + 0px); right: calc(0px + 0px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(19) { width: 122px; height: 77px; position: absolute; top: calc(140px + 0px); right: calc(60px + 0px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(20) { width: 68px; height: 43px; position: absolute; top: calc(250px + 0px); right: calc(375px + 0px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(21) { width: 122px; height: 77px; position: absolute; top: calc(300px + 0px); right: calc(625px + 0px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(22) { width: 51px; height: 32px; position: absolute; top: calc(0px + 175px); right: calc(-100px + 350px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(23) { width: 51px; height: 32px; position: absolute; top: calc(50px + 350px); right: calc(100px + 350px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(24) { width: 51px; height: 32px; position: absolute; top: calc(100px + 350px); right: calc(700px + 350px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(25) { width: 51px; height: 32px; position: absolute; top: calc(120px + 350px); right: calc(345px + 350px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(26) { width: 51px; height: 32px; position: absolute; top: calc(265px + 350px); right: calc(750px + 350px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(27) { width: 68px; height: 43px; position: absolute; top: calc(290px + 350px); right: calc(500px + 350px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(28) { width: 51px; height: 32px; position: absolute; top: calc(300px + 350px); right: calc(1000px + 350px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(29) { width: 83px; height: 50px; position: absolute; top: calc(0 + 350px); right: calc(1000px + 350px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(30) { display: none; width: 83px; height: 50px; position: absolute; top: calc(50px + 350px); right: calc(-200px + 350px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(31) { display: none; width: 83px; height: 50px; position: absolute; top: calc(100px + 350px); right: calc(750px + 350px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(32) { width: 83px; height: 50px; position: absolute; top: calc(150px + 350px); right: calc(450px + 350px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(33) { width: 83px; height: 50px; position: absolute; top: calc(200px + 350px); right: calc(790px + 350px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(34) { display: none; width: 83px; height: 50px; position: absolute; top: calc(250px + 350px); right: calc(250px + 350px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(35) { width: 83px; height: 50px; position: absolute; top: calc(300px + 350px); right: calc(0px + 350px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(36) { width: 122px; height: 77px; position: absolute; top: calc(0px + 350px); right: calc(750px + 350px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(37) { display: none; width: 68px; height: 43px; position: absolute; top: calc(50px + 350px); right: calc(50px + 350px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(38) { width: 122px; height: 77px; position: absolute; top: calc(100px + 350px); right: calc(-150px + 350px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(39) { width: 122px; height: 77px; position: absolute; top: calc(150px + 350px); right: calc(0 + 350px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(40) { width: 122px; height: 77px; position: absolute; top: calc(140px + 350px); right: calc(60px + 350px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(41) { width: 68px; height: 43px; position: absolute; top: calc(250px + 350px); right: calc(375px + 350px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(42) { width: 122px; height: 77px; position: absolute; top: calc(300px + 350px); right: calc(625px + 350px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(43) { width: 51px; height: 32px; position: absolute; top: calc(0px + 700px); right: calc(-100px + 700px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(44) { width: 51px; height: 32px; position: absolute; top: calc(50px + 700px); right: calc(100px + 700px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(45) { width: 51px; height: 32px; position: absolute; top: calc(100px + 700px); right: calc(350px + 700px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(46) { width: 51px; height: 32px; position: absolute; top: calc(120px + 700px); right: calc(345px + 700px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(47) { width: 51px; height: 32px; position: absolute; top: calc(265px + 700px); right: calc(750px + 700px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(48) { width: 68px; height: 43px; position: absolute; top: calc(290px + 700px); right: calc(500px + 700px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(49) { width: 51px; height: 32px; position: absolute; top: calc(300px + 700px); right: calc(1000px + 700px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(50) { width: 83px; height: 50px; position: absolute; top: calc(0 + 700px); right: calc(1000px + 700px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(51) { display: none; width: 83px; height: 50px; position: absolute; top: calc(50px + 700px); right: calc(-200px + 700px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(52) { display: none; width: 83px; height: 50px; position: absolute; top: calc(100px + 700px); right: calc(750px + 700px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(53) { width: 83px; height: 50px; position: absolute; top: calc(150px + 700px); right: calc(450px + 700px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(54) { width: 83px; height: 50px; position: absolute; top: calc(200px + 700px); right: calc(790px + 700px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(55) { display: none; width: 83px; height: 50px; position: absolute; top: calc(250px + 700px); right: calc(250px + 700px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(56) { width: 83px; height: 50px; position: absolute; top: calc(300px + 700px); right: calc(0px + 700px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(57) { width: 122px; height: 77px; position: absolute; top: calc(0px + 700px); right: calc(750px + 700px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(58) { display: none; width: 68px; height: 43px; position: absolute; top: calc(50px + 700px); right: calc(50px + 700px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(59) { width: 122px; height: 77px; position: absolute; top: calc(100px + 700px); right: calc(-150px + 700px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(60) { width: 122px; height: 77px; position: absolute; top: calc(150px + 700px); right: calc(0 + 700px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(61) { width: 122px; height: 77px; position: absolute; top: calc(140px + 700px); right: calc(60px + 700px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(62) { width: 68px; height: 43px; position: absolute; top: calc(250px + 700px); right: calc(375px + 700px); animation: 12s ease-out 0s 1 bgIco01; } .bgFix span:nth-child(63) { width: 122px; height: 77px; position: absolute; top: calc(300px + 700px); right: calc(625px + 700px); animation: 12s ease-out 0s 1 bgIco01; } } /*loading*/ body.home .bgFix span { opacity: 0; -webkit-transition: opacity 1.0s cubic-bezier(0.36, 0.14, 0, 1); transition: opacity 1.0s cubic-bezier(0.36, 0.14, 0, 1); } .bgFix span { opacity: 0; -webkit-transition: opacity 1.0s cubic-bezier(0.36, 0.14, 0, 1); transition: opacity 1.0s cubic-bezier(0.36, 0.14, 0, 1); } .bgFix span:nth-child(7n) { transition-delay: 0.0s; } .bgFix span:nth-child(7n+1) { transition-delay: 0.4s; } .bgFix span:nth-child(7n+2) { transition-delay: 0.8s; } .bgFix span:nth-child(7n+3) { transition-delay: 0.9s; } .bgFix span:nth-child(7n+4) { transition-delay: 0.3s; } .bgFix span:nth-child(7n+5) { transition-delay: 0.7s; } .bgFix span:nth-child(7n+6) { transition-delay: 0.1s; } body.home .bgFix.is-animation span, .bgFix.is-animation span { opacity: 1; } .top_main_img { transform: scale(0.7); transition: transform 0.7s cubic-bezier(0.36, 0.14, 0, 1) 0.7s; } .top_main_img.is-animation { transform: scale(1); } .top_main_img .item01 { opacity: 0; transition: opacity 0.7s cubic-bezier(0.36, 0.14, 0, 1) 1.0s; } .top_main_img.is-animation .item01 { opacity: 1; } .top_main_img .parts02 { opacity: 0; margin-top: 10px; transition: all 1.6s cubic-bezier(0.36, 0.14, 0, 1) 1.3s; } .top_main_img.is-animation .parts02 { opacity: 1; margin-top: 0; } .top_main_img .parts03 { opacity: 0; margin-top: 10px; top: 0px; transition: all 1.6s cubic-bezier(0.36, 0.14, 0, 1) 1.5s; } .top_main_img.is-animation .parts03 { opacity: 1; margin-top: 0; } .top_main_img .parts04 { opacity: 0; margin-top: 10px; transition: all 1.6s cubic-bezier(0.36, 0.14, 0, 1) 1.7s; } .top_main_img.is-animation .parts04 { opacity: 1; margin-top: 0; } body.home header { opacity: 0; -webkit-transition: opacity 1.0s cubic-bezier(0.36, 0.14, 0, 1) 2.4s; transition: opacity 1.0s cubic-bezier(0.36, 0.14, 0, 1) 2.4s; } header { opacity: 0; -webkit-transition: opacity 1.0s cubic-bezier(0.36, 0.14, 0, 1) 0.9s; transition: opacity 1.0s cubic-bezier(0.36, 0.14, 0, 1) 0.9s; } header.is-animation { opacity: 1!important; } .top_main_txt { opacity: 0; -webkit-transition: all 1.2s cubic-bezier(0.36, 0.14, 0, 1) 2.0s; transition: all 1.2s cubic-bezier(0.36, 0.14, 0, 1) 2.0s; -webkit-transform:translateY(20px);transform:translateY(20px) } .top_main_txt.is-animation { opacity: 1;-webkit-transform:none;transform:none; } body:not(.home) main { opacity: 0; -webkit-transition: opacity 1.0s cubic-bezier(0.36, 0.14, 0, 1) 1.2s; transition: opacity 1.0s cubic-bezier(0.36, 0.14, 0, 1) 1.2s; } body:not(.home) main.is-animation { opacity: 1; } /*fade*/ .js-scroll-fade:not(.top_about_ph):not(.hd_anime) { opacity: 0; } .isActive:not(.top_about_ph):not(.hd_anime) { -webkit-animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1); animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1); -webkit-animation-duration: 1.8s; animation-duration: 1.8s; -webkit-animation-name: fadeUp; animation-name: fadeUp; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } @-webkit-keyframes fadeUp{ 0%{opacity:0;-webkit-transform:translateY(20px);transform:translateY(20px)} 10%{opacity:0; } to{opacity:1;-webkit-transform:none;transform:none} } @keyframes fadeUp{ 0%{opacity:0;-webkit-transform:translateY(20px);transform:translateY(20px)} 10%{opacity:0; } to{opacity:1;-webkit-transform:none;transform:none} } /*navi*/ header { justify-content: space-between; width: 100%; padding: 20px 0 0; } .header_logo, .nav_logo { width: 223px; display: flex; justify-content: space-between; flex-wrap: wrap; position: relative; line-height: 1; z-index: 4; } .nav_logo { position: fixed; left: 1.97%; top: 37px; } .header_logo img, .nav_logo img{ width: 100%; line-height: 0; } header > .inner { display: flex; align-items: center; width: 100%; height: 75px; padding: 0 280px 0 1.97%; justify-content: space-between; box-sizing: border-box; } .global_nav { display: flex; align-items: center; } .main_nav { display: flex; } .main_nav li { font-size: 1.5rem; font-weight: 500; line-height: 1.35; margin-left: calc(35 / 1568 * 100vw); } .main_nav li .arrow { width: 8px; height: 4px; margin-left: 5px; display: inline-block; line-height: 8px; } .main_nav li .hd { position: relative; cursor: pointer; z-index: 4; } .main_nav li .btn_dd { display: block; width: 100%; height: 55px; position: absolute; top: 0; left: 0; } .main_nav li:not(.menu_item) { position: relative; z-index: 4; } .global_nav .serviceNav li:not(.menu_item) { position: 0; } .lang_nav { /*display: flex;*/ display: none; margin-left: 32px; position: relative; z-index: 4; } .lang_nav li { font-size: 1.4rem; margin-left: 12px; /*font-weight: 400;*/ } .lang_nav li span { border-bottom: 1px solid #333; } .contanct_nav { width: 140px; height: 75px; font-size: 2.0rem; text-align: center; background: #B7282E; border: 1px solid #B7282E; box-sizing: border-box; border-radius: 10px; color: #fff; position: relative; z-index: 9999; box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.25); } body.open .contanct_nav { opacity: 0; } .contanct_nav .txt { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); line-height: 1; -webkit-transition: padding 0.5s cubic-bezier(0.36, 0.14, 0, 1); transition: padding 0.5s cubic-bezier(0.36, 0.14, 0, 1); } .contanct_nav .ico_arrow { display: inline-block; width: 11px; line-height: 15px; position: absolute; top: 50%; right: 0; -webkit-transform: translate(0%,-50%); transform: translate(0%,-50%); opacity: 0; -webkit-transition: opacity 0.5s cubic-bezier(0.36, 0.14, 0, 1); transition: opacity 0.5s cubic-bezier(0.36, 0.14, 0, 1); } .contanct_nav .arrow_svg { fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round; } .header_function { width: 221px; display: flex; justify-content: space-between; position: fixed; z-index: 10001; right: 20px; top: 20px; } .op_global_nav { opacity: 0; pointer-events: none; width: 100%; height: 100vh; position: fixed; z-index: 10000; top: 0; left: 0; -webkit-transition: opacity 0.5s cubic-bezier(0.36, 0.14, 0, 1); transition: opacity 0.5s cubic-bezier(0.36, 0.14, 0, 1); background: #353031; } .op_global_nav > .inner { width: 72.13%; min-width: 700px; margin: 147px 0 0 17.53%; } .global_nav_list { display: flex; } .global_nav_item { width: 36.87%; } .global_nav_item.last { width: 26.26%; } .global_nav_item.last .item:first-child { margin-top: 15px; } .global_nav_item:not(.last) .ttl { font-size: 5.0rem; line-height: 1.2; color: #B7282E; margin-bottom: 29px; } .global_nav_item.last .ttl { font-size: 3.0rem; line-height: 1.2; color: #B7282E; } .single_link { margin-bottom: 38px; font-size: 1.6rem; font-weight: 500; } .top_nav { font-size: 2.0rem; font-weight: 500; } .global_nav_item .hd { font-size: 1.2rem; font-weight: 500; color: #B3B3B3; margin: 30px 0 10px; } .global_nav_item .sub_nav { font-size: 1.5rem; font-weight: 500; margin-left: 8px; } .global_nav_item .sub_nav a:before { content: "-"; display: inline-block; padding-right: 5px; } .global_nav_footer { display: flex; flex-direction: row-reverse; margin-top: 69px; } .global_nav_footer > .txt { width: 36.87%; padding-right: 20px; } .global_nav_footer > .btn { width: 63.13%; } .global_nav_footer .main_copy { font-size: 2.7rem; font-weight: 500; line-height: 1.5; } .global_nav_footer .name { font-size: 1.6rem; margin-top: 33px; } .global_nav_footer address { font-style: normal; font-size: 1.6rem; } .global_nav_footer .link_privacy { text-align: right; font-size: 1.2rem; margin-top: 19px; } .op_service_nav > .inner { width: 87.75vw; max-width: 1568px; padding: 81px 5.95vw 68px 3.63vw; box-sizing: border-box; position: absolute; top: 95px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); z-index: 2; background: #57669E; z-index: 10000; border-radius: 20px; opacity: 0; pointer-events: none; -webkit-transition: opacity 0.5s cubic-bezier(0.36, 0.14, 0, 1); transition: opacity 0.5s cubic-bezier(0.36, 0.14, 0, 1); } .op_service_nav.acrive > .inner { opacity: 1; pointer-events: visible; } .op_service_nav .item { display: flex; } .op_service_nav .item .ttl { width: 220px; font-weight: 500; font-size: 2.0rem; } .op_service_nav .item .service_search, .op_service_nav .item .top_service_list { width: calc(100% - 120px); margin-top: 0; } .bgServiceNav { opacity: 0; pointer-events: none; width: 100%; height: 100vh; position: fixed; top: 0; left: 0; z-index: 3; background: rgba(53, 48, 49, 0.6); -webkit-transition: opacity 0.5s cubic-bezier(0.36, 0.14, 0, 1); transition: opacity 0.5s cubic-bezier(0.36, 0.14, 0, 1); } .bgServiceNav.acrive { opacity: 1; pointer-events: visible; } .btn_humberger_box { display: block; width: 75px; z-index: 10001; background: #B7282E; border: 1px solid #B7282E; border-radius: 10px; position: relative; box-sizing: border-box; box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.25); cursor: pointer; } .btn_humberger { width: 33px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); z-index: 2; } .btn_humberger .line { display: block; position: relative; width: 33px; height: 9px; -webkit-transition: height 0.5s cubic-bezier(0.36, 0.14, 0, 1); transition: height 0.5s cubic-bezier(0.36, 0.14, 0, 1); } .btn_humberger .line span {content: ""; width: 33px; height: 1px; display: block; -webkit-transition: all 0.2s cubic-bezier(0.36, 0.14, 0, 1); transition: all 0.2s cubic-bezier(0.36, 0.14, 0, 1); background:#fff; position: absolute; } .btn_humberger .line span:nth-child(2){ left: 0; bottom: 0; } .btn_humberger .line span:nth-child(1){ left: 0; top: 0; } body.open .btn_humberger .line span:nth-child(2){ width: 33px; transform: rotate(45deg); top: 50%; } body.open .btn_humberger .line span:nth-child(1){ width: 33px; transform: rotate(-45deg); top: 50%; } body.open .op_global_nav { opacity: 1; pointer-events: visible; } @media screen and (max-width: 1100px) { .main_nav li { font-size: 1.3rem; line-height: 1.35; margin-left: calc(28 / 1568 * 100vw); position: relative; } .op_global_nav { overflow-y: scroll; } } @media screen and (max-width: 1024px) { .main_nav, .lang_nav { display: none; } .op_global_nav > .inner { width: 86.66%; min-width: 700px; margin: 147px auto; } .global_nav_footer .main_copy { font-size: 2.4rem; font-weight: 500; line-height: 1.5; } } @media screen and (max-width: 768px) { header { z-index: 100; justify-content: space-between; width: 100%; padding: 13px 0; -webkit-transition: all 0.5s cubic-bezier(0.36, 0.14, 0, 1); transition: all 0.5s cubic-bezier(0.36, 0.14, 0, 1); } .header_logo, .nav_logo { width: 165px; position: relative; z-index: 9999; line-height: 1; } .nav_logo { position: absolute; left: 4.80%; top: 0; height: 40px; } .nav_logo img { position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } header { z-index: 100; justify-content: space-between; width: 100%; padding: 10px 0; -webkit-transition: all 0.5s cubic-bezier(0.36, 0.14, 0, 1); transition: all 0.5s cubic-bezier(0.36, 0.14, 0, 1); } header > .inner { display: flex; align-items: center; z-index: 10; width: 100%; height: 40px; padding: 0 0 0 4.80%; justify-content: space-between; box-sizing: border-box; } .contanct_nav { width: 75px; height: 40px; padding: 11px 0; font-size: 1.1rem; text-align: center; background: #B7282E; border: 1px solid #B7282E; box-sizing: border-box; border-radius: 5.5px; color: #fff; } .header_function { width: 117px; display: flex; justify-content: space-between; position: fixed; right: 2.66%; top: 10px; } .op_global_nav { opacity: 0; pointer-events: none; width: 100%; height: 100vh; position: fixed; z-index: 10000; top: 0; left: 0; -webkit-transition: opacity 0.5s cubic-bezier(0.36, 0.14, 0, 1); transition: opacity 0.5s cubic-bezier(0.36, 0.14, 0, 1); background: #353031; overflow-y: scroll; } .op_global_nav > .inner { width: 86.66%; min-width: auto; margin: 83px auto 0; padding-bottom: 41px; } .global_nav_list { display: block; } .global_nav_item:not(.last) { width: auto; display: flex; margin-bottom: 15px; } .global_nav_item.last { width: auto; } .global_nav_item.last .item { display: flex; } .global_nav_list .list { margin-left: 20px; } .global_nav_item:not(.last) .ttl { min-width: 85px; font-size: 1.5rem; line-height: 1.2; text-align: right; color: #B7282E; margin-bottom: 0; margin-top: 8px; } .global_nav_item.last .ttl { min-width: 85px; font-size: 1.5rem; line-height: 1.2; text-align: right; color: #B7282E; margin-top: 8px; } .single_link { margin-bottom: 29px; margin-left: 20px; font-size: 1.6rem; } .top_nav { font-size: 1.6rem; } .top_nav li + li { margin-top: 17px; } .global_nav_item .hd { font-size: 1.2rem; color: #B3B3B3; margin: 26px 0 8px; } .global_nav_item .sub_nav { font-size: 1.5rem; margin-left: 8px; } .global_nav_item .sub_nav a:before { content: "-"; display: inline-block; padding-right: 5px; } .global_nav_footer { display: block; flex-direction: row-reverse; margin-top: 10px; } .global_nav_footer > .txt { width: auto; padding-right: 20px; } .global_nav_footer > .btn { width: auto; } .global_nav_footer .main_copy { font-size: 2.0rem; line-height: 1.5; margin-top: 48px; } .global_nav_footer .name { font-size: 1.4rem; margin-top: 19px; } .global_nav_footer address { font-style: normal; font-size: 1.1rem; } .global_nav_footer .link_privacy { text-align: right; font-size: 1.1rem; margin-top: 17px; } .btn_humberger_box { display: block; width: 40px; z-index: 10001; background: #B7282E; border: 1px solid #B7282E; border-radius: 5.5px; position: relative; } .btn_humberger { width: 18px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); z-index: 2; } .btn_humberger .line { display: block; position: relative; width: 18px; height: 5px; } .btn_humberger .line span {content: ""; width: 18px; height: 1px; display: block; -webkit-transition: all 0.2s cubic-bezier(0.36, 0.14, 0, 1); transition: all 0.2s cubic-bezier(0.36, 0.14, 0, 1); background:#fff; position: absolute; } .btn_humberger .line span:nth-child(2){ left: 0; bottom: 0; } .btn_humberger .line span:nth-child(1){ left: 0; top: 0; } body.open .btn_humberger .line span:nth-child(2){ width: 18px; transform: rotate(45deg); top: 50%; } body.open .btn_humberger .line span:nth-child(1){ width: 18px; transform: rotate(-45deg); top: 50%; } } /*top*/ .top_main { padding-top: 30px; } .top_main > .inner { max-width: 2000px; margin: 0 auto; } .top_main_img { width: 83.16%; padding-bottom: 47%; margin: 0 0 0 6.56%; position: relative; } .top_main_img img { width: 100%; } .top_main_img .item01 { width: 79.66%; position: absolute; left: 12.55%; top: 8.39%; z-index: 2; animation: 3s linear -1.5s infinite item01; } .top_main_img .parts02 { width: 13.05%; position: absolute; left: 0; bottom: 0; z-index: 1; animation: 6s linear 0s infinite parts02; } .top_main_img .parts03 { width: 9.91%; position: absolute; left: 23.14%; top: 0; z-index: 1; animation: 6s linear -2s infinite parts02; } .top_main_img .parts04 { width: 11.48%; position: absolute; right: 0; top: 8.67%; z-index: 1; animation: 6s linear -4s infinite parts02; } @keyframes item01{ 0%{ -webkit-transform: translate(-50%,-50%); transform: translate(0,0%); } 10%{ -webkit-transform: translate(-50%,-50%); transform: translate(0,-0.05%); } 40%{ -webkit-transform: translate(-50%,-50%); transform: translate(0,-0.45%); } 50%{ -webkit-transform: translate(-50%,-50%); transform: translate(0,-0.5%); } 60%{ -webkit-transform: translate(-50%,-50%); transform: translate(0,-0.45%); } 90%{ -webkit-transform: translate(-50%,-50%); transform: translate(0,-0.05%); } to{ -webkit-transform: translate(-50%,-50%); transform: translate(0,0%); } } @keyframes parts02{ 0%{ -webkit-transform: translate(-50%,-50%); transform: translate(0,0%); } 10%{ -webkit-transform: translate(-50%,-50%); transform: translate(0,-0.5%); } 40%{ -webkit-transform: translate(-50%,-50%); transform: translate(0,-6.5%); } 50%{ -webkit-transform: translate(-50%,-50%); transform: translate(0,-7%); } 60%{ -webkit-transform: translate(-50%,-50%); transform: translate(0,-6.5%); } 90%{ -webkit-transform: translate(-50%,-50%); transform: translate(0,-0.5%); } to{ -webkit-transform: translate(-50%,-50%); transform: translate(0,0%); } } .top_main_txt { margin-left: 58.16%; margin-top: -16%; position: relative; z-index: 3;} .top_main_txt .hd { font-size: 3.0rem; color: #B7282E; } .top_main_txt .read { font-size: 4.5rem; font-weight: 500; line-height: 1.44; margin: 24px 0 67px; } .top_main_txt p { font-size: 2.0rem; font-weight: 500; } .top_main_txt p + p { margin-top: 2em; } .top_service { width: 87.75%; margin: 116px auto 0; } .top_common_hd { font-size: 7.0rem; color: #ffffff; line-height: 1.2; } .top_service_hd { font-size: 10.0rem; color: #ffffff; line-height: 1.2; } .top_common_ttl { font-size: 1.9rem; font-weight: 400; } .top_service_cat { margin: 112px 0 0 6.97%; padding-bottom: 82px; display: flex; justify-content: space-between; } .top_service_catitem { width: 44.85%; background: #fff; border-radius: 20px; position: relative; -webkit-transition: background 0.5s cubic-bezier(0.36, 0.14, 0, 1); transition: background 0.5s cubic-bezier(0.36, 0.14, 0, 1); } .top_service_catitem:last-child { top: 82px; } .top_service_catitem .num { font-size: 11.5rem; color: #B7282E; position: absolute; top: 0; left: 0; -webkit-transform: translate(-57px,-50%); transform: translate(-57px,-50%); } .top_service_catitem .hd { font-size: 3.0rem; color: #B7282E; position: absolute; top: 60px; left: 0; -webkit-transform: rotate(90deg); transform: rotate(90deg);transform-origin: top left; } .top_service_body { display: block; padding: 61px 15.74% 120px 17.56%; } .top_service_body .ttl { margin: 0 -15%; font-size: 3.6rem; font-weight: 500; color: #353031; line-height: 1.44; text-align: center; } .top_service_body .ttl span { border-bottom: 1px solid #CB1425; } .top_service_body p { color: #353031; } .top_service_body .img { margin: 57px 0 44px; text-align: center; } .top_service_body .btn { background: #B7282E; text-align: center; font-size: 2.4rem; color: #fff; width: 100%; height: 80px; position: absolute; bottom: -1px; left: 0; border-radius: 0 0 20px 20px; } .top_service_body .btn .txt { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); line-height: 1; -webkit-transition: padding 0.5s cubic-bezier(0.36, 0.14, 0, 1); transition: padding 0.5s cubic-bezier(0.36, 0.14, 0, 1); } .top_service_body .btn .ico_arrow { display: inline-block; width: 11px; line-height: 15px; position: absolute; top: 50%; right: 0; -webkit-transform: translate(0%,-50%); transform: translate(0%,-50%); opacity: 0; -webkit-transition: opacity 0.5s cubic-bezier(0.36, 0.14, 0, 1); transition: opacity 0.5s cubic-bezier(0.36, 0.14, 0, 1); } .top_service_body .btn .arrow_svg { fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round; } .top_service_other { margin-top: 100px; background: rgba(87, 102, 158, 0.5); border-radius: 20px; margin-left: 6.97%; } .top_service_other > .inner { padding: 75px 9.96% 90px; } .top_service_other .ttl { font-size: 2.5rem; color: #fff; } .top_service_list { display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: 58px; } .top_service_listitem { width: 31.12%; margin-bottom: 40px; } .top_service_listitem .img { border-radius: 10px; position: relative; overflow: hidden; } .top_service_listitem .img img { border-radius: 10px; width: 100%; } .top_service_listitem .name { font-size: 1.6rem; line-height: 1.87; margin: 10px 0 2px; } .top_service_listitem p { font-size: 1.4rem; line-height: 1.57; } .top_case { width: 87.75%; margin: 135px auto 0; } .top_case_body { margin-left: 17.08%; margin-top: 36px; } .top_case_body .swiper-wrapper { margin-bottom: 67px; } .top_case_hd { font-size: 7.0rem; color: #ffffff; line-height: 1.2; } .top_case_body .case_item { display: block; min-width: 35.29%; padding-right: 5.88%; box-sizing: border-box; } .case_item .ph { display: block; padding-bottom: 66.25%; margin-bottom: 18px; border-radius: 10px; overflow: hidden; position: relative; z-index:1; } .case_item .ph img { width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); object-fit: cover; border-radius: 10px; } .case_item .cat { font-size: 1.1rem; margin-top: 15px; line-height: 1.66; } .case_item .ttl { display: block; font-size: 2.0rem; margin-top: 26px; line-height: 1.5; } .case_item .meta { font-size: 1.3rem; margin-top: 10px; line-height: 1.5; } .link_more { text-align: right; } .link_more a { width: 122px; height: 46px; display: inline-block;font-size: 2.0rem; text-align: center; background: #B7282E; color: #fff; border-radius: 25px; position: relative; } .link_more a .txt { position: absolute; top: calc(50% - 2px); left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); line-height: 1; } .link_more a .ico_arrow { display: inline-block; width: 11px; line-height: 15px; position: absolute; top: 50%; right: 0; -webkit-transform: translate(0%,-50%); transform: translate(0%,-50%); opacity: 0; } .arrow_svg { fill:none;stroke:#B7282E;stroke-width:2;stroke-linecap:round; } .top_company { width: 74.04%; margin: 143px 0 0 11.67%; } .top_company > .inner { display: flex; justify-content: space-between; align-items: flex-start; } .top_company_img { width: 48.03%; } .top_company_img img { width: 100%;} .top_company_txt { width: 41.38%; margin-top: 57px; } .top_company_img01 { width: 40.37%; height: 51.25%; position: absolute; top: 12.00%; left: 21.45%; z-index: 3;} .top_company_img02 { width: 30.91%; height: 68.99%; position: absolute; top: 31.00%; left: 69.08%; z-index: 2; } .top_company_img03 { width: 84.45%; height: 93.01%; position: absolute; top: 0%; left: 0%; z-index: 1; } .top_company_txt .read { margin: 82px 0 136px; } .top_news { width: 79.59%; margin: 168px 0 0 6.12%; } .top_news > .inner { display: flex; justify-content: space-between; align-items: flex-start; } .top_news_head { width: 23.08%; min-width: 268px; } .top_news_body { width: 76.92%; } .news_item { display: flex; justify-content: space-between; justify-content: space-between; margin-bottom: 60px; } .news_item .ph { width: 23.33%; } .news_item .ph > div { padding-bottom: 66.25%; border-radius: 10px; overflow: hidden; position: relative; } .news_item .ph img { width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); object-fit: cover; } .news_item .txt { width: 70.20%; margin-top: 3%; } .news_item .meta { font-size: 1.3rem; display: flex; flex-wrap: wrap; } .news_item .meta .tag { margin-left: 21px; line-height: 1.5; } .news_item .meta .tag + .tag { margin-left: 11px; } .news_item .ttl { font-size: 1.8rem; line-height: 1.5; margin-top: 8px; } .top_note { width: 384px; margin: 158px auto 0; text-align: center; } .top_note > .inner { display: block; background: #F5F5F5; border-radius: 20px; padding: 27px 53px 46px; } .top_note > .inner:before { content: ""; display: block; position: absolute; top: 10px; left: 15px; width: 100%; height: 100%; background: rgba(245, 245, 245, 0.3); -webkit-transform: rotate(7.52deg); transform: rotate(7.52deg); border-radius: 20px; z-index: -1; } .top_note .hd { font-size: 5.0rem; } .top_note p { font-size: 1.3rem; } .top_note .img { margin: 16px 0 26px; } .top_note * { color: #333; } footer { position: relative; margin-top: 112px; padding: 206px 0 86px; background: #B7282E; } footer:before { content: ""; display: block; width: 100%; height: 100px; border-radius: 0 0 100px 100px; position: absolute; top: 0; left: 0; background: #353031; } footer > .inner { width: 85.96%; margin-left: 8.16%; display: flex; justify-content: space-between; flex-direction: row-reverse; } .footer_company { width: 35.36%; } .footer_nav { width: 59.64%; } .footer_company .read { font-size: 2.7rem; font-weight: 500; letter-spacing: 0.15em; line-height: 1.5; margin-top: 20px; } .footer_company .name { font-size: 1.6rem; margin-top: 69px; } .footer_company address { font-size: 1.6rem; font-style: normal; } .footer_company .sns { display: flex; align-items: center; margin-top: 40px; } .footer_company .sns_x { width: 20px; line-height: 1; } .footer_company .sns_fb { width: 20px; margin-left: 25px; line-height: 1; } .footer_company .sns_note { width: 39px; margin-left: 25px; line-height: 1; } .btn_contanct { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; background: #fff; border-radius: 20px; padding: 45px 5.84% 45px 7.83%;box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.25); } .btn_contanct * { color: #333; } .btn_contanct .font_en { font-size: 6.0rem; line-height: 1; } .btn_contanct .ja { font-size: 1.6rem; display: flex; align-items: center; } .btn_contanct .ico { position: relative; display: block; margin-left: 14px; width: 40px; height: 40px;} .btn_contanct .circle { display: inline-block; width: 40px; height: 40px; background: #B7282E; border-radius: 50%; overflow: hidden; } .btn_contanct .arrow { width: 11px; height: 11px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); line-height: 0; display: flex; } .btn_contanct .arrow .arrow_nm { width: 11px; position: absolute; left: 0; top: 0; } .btn_contanct .arrow .arrow_ov { width: 11px; position: absolute; left: -11px; top: 0; opacity: 0; } .footer_nav_list { display: flex; margin-top: 67px; } .footer_nav_listbox { display: flex; } .footer_nav_listbox:nth-child(1) { width: 56%; } .footer_nav_listbox:nth-child(2) { width: 44%; } .footer_nav_listitem { width: 50%; } .footer_nav_listbox:nth-child(1) .footer_nav_listitem:nth-child(1) { width: 39%; } .footer_nav_listbox:nth-child(1) .footer_nav_listitem:nth-child(2) { width: 61%; } .footer_nav_listitem .main { font-size: 1.6rem; font-weight: 500; } .footer_nav_listitem .function { font-size: 1.2rem; font-weight: 500; } .footer_nav_listitem .main li li { font-size: 1.3rem; padding-left: 1em; position: relative; } .footer_nav_listitem .main li li:before { display: inline-block; content: "-"; position: absolute; left: 2px; } .footer_nav_listitem .main > li + li { margin-top: 16px; } .footer_nav_listitem .main ul { margin-top: 16px; } .footer_nav_listitem .main li li + li { margin-top: 4px; } .footer_nav_listitem .function > li + li { margin-top: 12px; } .footer_copyrights { width: 85.96%; margin: 40px 0 0 8.16%; font-size: 1.2rem; } @media screen and (max-width: 1400px) { .top_service_body .ttl { margin: 0 -15%; font-size: 2.4rem; font-weight: 500; color: #353031; line-height: 1.44; text-align: center; } } @media screen and (max-width: 1200px) { footer > .inner { width: 86.66%; margin-left: 6.67%; display: block; } .footer_company { width: 100%; } .footer_nav { width: 100%; } } @media screen and (max-width: 1100px) { .top_main { padding-top: 14px; } .top_main_txt .read { font-size: 4.0rem; font-weight: 500; line-height: 1.44; margin: 24px 0 67px; } .top_service_body .ttl { margin: 0 -15%; font-size: 1.8rem; font-weight: 500; color: #353031; line-height: 1.44; text-align: center; } } @media screen and (max-width: 1024px) { .top_main_img { width: 92%; margin: 0 auto; position: relative; } .top_main_img .item01 { width: 79.66%; position: absolute; left: 12.55%; top: 8.39%; } .top_main_img .item02 { width: 100%; position: relative; } .top_common_hd { font-size: 7.0rem; color: #B7282E; line-height: 1.2; } .top_service_hd { font-size: 7.0rem; color: #B7282E; line-height: 1.2; } .top_main_txt { width: 80.8%; margin-left: 12%; margin-top: 81px; } .top_main_txt p { margin-left: 21.45%; } .top_service { width: 86.66%; margin: 75px auto 0; } .top_service_cat { display: block; } .top_service_catitem { width: 100%; background: #fff; border-radius: 10px; position: relative; } .top_service_catitem:last-child { top: 63px; } .top_service_body .ttl span { display: inline-block; padding-bottom: 5px; border-bottom: 1px solid #CB1425; } .top_service_body p { color: #353031; } .top_service_body .btn { background: #B7282E; text-align: center; font-size: 1.6rem; color: #fff; width: 100%; height: 55px; position: absolute; bottom: -1px; left: 0; border-radius: 0 0 10px 10px; } .top_service_other { width: 115.40%; margin-left: -7.7%; margin-top: 60px; background: rgba(87, 102, 158, 0.5); border-radius: 0; } .top_service_other .ttl { font-size: 3.6rem; color: #fff; } .top_service_list { display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: 24px; } .top_service_listitem { width: 48%; margin-bottom: 40px; } .top_service_listitem .img { border-radius: 5px; position: relative; padding-bottom: 31.25%; } .top_service_listitem .img img { border-radius: 5px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); z-index: 2; } .top_case { width: 100%; margin: 100px auto 0; overflow-x: hidden; } .top_case > .inner { display: block; } .top_case_head { width: 86.66%; margin: 0 auto; } .top_case_body { margin: 33px 0 0 6.67%; } .top_case_body .swiper-wrapper { margin-bottom: 52px; } .top_case_body .case_item { min-width: 35.29%; padding-right: 11.76%; box-sizing: border-box; } .case_item .ph { display: block; padding-bottom: 66.25%; margin-bottom: 18px; border-radius: 5px; overflow: hidden; position: relative; } .case_item .ph img { width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); object-fit: cover; border-radius: 5px; } .link_more { text-align: right; } .link_more a { width: 81px; height: 30px; display: inline-block;font-size: 1.1rem; height: auto; padding: 5px 0 10px; text-align: center; background: #B7282E; color: #fff; border-radius: 25px; } .link_more a .txt { position: relative; top: 0; left: 0; -webkit-transform: translate(0,0); transform: translate(0,0); line-height: 1; vertical-align: middle; } .top_case .link_more { margin-right: -27.45%; } .top_company { width: 86.66%; margin: 79px auto 0; } .top_company > .inner { display: block; justify-content: space-between; align-items: flex-start; } .top_company_img { width: 96%; max-width: 400px; margin: 0 auto; } .top_company_img img { width: 100%;} .top_company_txt { width: auto; margin-top: 16px; margin-left: 9.23%; } .top_company_img01 { width: 40.37%; height: 51.25%; position: absolute; top: 12.00%; left: 21.45%; z-index: 3;} .top_company_img02 { width: 30.91%; height: 68.99%; position: absolute; top: 31.00%; left: 69.08%; z-index: 2; } .top_company_img03 { width: 84.45%; height: 93.01%; position: absolute; top: 0%; left: 0%; z-index: 1; } .top_company_txt .read { margin: 16px 0 48px; } .top_news { width: 86.66%; margin: 60px auto; } .top_news > .inner { display: block; justify-content: space-between; align-items: flex-start; } .top_news_head { width: 100%; } .top_news_body { width: 100%; margin-top: 32px; } .top_note { width: 69.86%; max-width: 384px; margin: 100px auto 0; text-align: center; } .top_note > .inner:before { content: ""; display: block; position: absolute; top: 10px; left: 15px; width: 100%; height: 100%; background: rgba(245, 245, 245, 0.3); -webkit-transform: rotate(7.52deg); transform: rotate(7.52deg); border-radius: 10px; z-index: -1; } .top_note * { color: #333; } footer { position: relative; margin-top: 112px; padding: 103px 0 86px; background: #B7282E; } footer:before { display: none; } } @media screen and (max-width: 768px) { .top_main_txt .hd { font-size: 1.6rem; color: #B7282E; } .top_main_txt .read { font-size: 2.5rem; line-height: 1.44; margin: 8px 0 30px; } .top_main_txt p { font-size: 1.4rem; margin-left: 21.45%; } .top_main_txt p + p { margin-top: 2em; } .top_common_hd { font-size: 5.0rem; color: #ffffff; line-height: 1.2; } .top_service_hd { font-size: 5.0rem; color: #ffffff; line-height: 1.2; } .top_common_ttl { font-size: 1.9rem; } .top_service_cat { margin: 63px 0 0 30px; padding-bottom: 82px; display: block; } .top_service_catitem .num { font-size: 5.5rem; color: #B7282E; position: absolute; top: 0; left: 0; -webkit-transform: translate(-30px,-50%); transform: translate(-30px,-50%); } .top_service_catitem .hd { font-size: 1.4rem; color: #B7282E; position: absolute; top: 30px; left: -7px; -webkit-transform: rotate(90deg); transform: rotate(90deg);transform-origin: top left; } .top_service_body { padding: 30px 8.13% 100px; } .top_service_body .ttl { font-size: 1.8rem; color: #353031; line-height: 1.44; text-align: center; } .top_service_body .img { width: 83.40%; margin: 14px auto 18px; text-align: center; } .top_service_listitem { width: 100%; margin-bottom: 30px; } .top_service_other > .inner { padding: 31px 6.66% 0; } .top_service_listitem .name { font-size: 1.4rem; line-height: 1.87; margin: 10px 0 2px; } .top_service_listitem p { font-size: 1.2rem; } .top_case_hd { font-size: 5.0rem; color: #ffffff; line-height: 1.2; } .top_case_body { margin: 33px 25.33% 0 6.67%; } .case_item .cat { font-size: 1.0rem; } .case_item .ttl { display: block; font-size: 1.5rem; margin-top: 10px; line-height: 1.5; } .case_item .meta { font-size: 1.1rem; margin-top: 8px; } .link_more a { display: inline-block;font-size: 1.1rem; height: auto; padding: 5px 0 10px; text-align: center; background: #B7282E; color: #fff; border-radius: 25px; } .news_item { display: block; margin-bottom: 45px; } .news_item .ph { width: auto; } .news_item .ph > div { padding-bottom: 66.25%; border-radius: 5px; overflow: hidden; position: relative; } .news_item .ph img { width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); object-fit: cover; } .news_item .txt { width: auto; } .news_item .meta { font-size: 1.1rem; margin-top: 14px; } .news_item .tag { font-size: 1.0rem; margin-left: 10px; } .news_item .ttl { font-size: 1.5rem; line-height: 1.5; margin-top: 8px; } .top_note { width: 78.66%; max-width: 384px; margin: 100px auto 0; text-align: center; } .top_note > .inner { display: block; background: #F5F5F5; border-radius: 10px; padding: 13px 25px 20px; margin-right: 12.59%; position: relative; } .top_note .hd { font-size: 3.4rem; } .top_note p { font-size: 1.3rem; line-height: 1.7; text-align: left; } .top_note .img { margin: 0px 0 12px; } footer { position: relative; margin-top: 62px; padding: 75px 0 34px; background: #B7282E; } body.data-utilization footer, body.data-trading footer, body.jdex-tactics-launch footer, body.data-science-support footer, body.data-management-support footer, body.jdex footer, body.jdex-private-station footer, body.jdex-marketing-support footer { margin-top: 0; } footer > .inner { width: 86.66%; margin-left: 6.67%; display: block; } .footer_company { width: 100%; margin-top: 124px; } .footer_nav { width: 100%; } .footer_company .read { font-size: 2.7rem; line-height: 1.5; margin-top: 20px; } .footer_company .name { font-size: 1.6rem; margin-top: 32px; } .footer_company address { font-size: 1.3rem; font-style: normal; } .footer_company .sns { margin-top: 27px; } .btn_contanct { display: block; background: #fff; border-radius: 10px; padding: 15px 5.84% 22px 24px;box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.25); position: relative; } .btn_contanct * { color: #333; } .btn_contanct .font_en { font-size: 3.0rem; line-height: 1.2; display: block; } .btn_contanct .ja { font-size: 1.0rem; } .btn_contanct .arrow { width: 11px; height: 11px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); line-height: 0; display: flex; } .btn_contanct .arrow img { width: 100%; } .btn_contanct .ico { position: absolute; display: block; margin-left: 14px; width: 40px; height: 40px; right: 5.23%; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .footer_nav_list { display: flex; margin-top: 45px; } .footer_nav_listbox { display: block; } .footer_nav_listitem { width: 100%; } .footer_nav_listbox:nth-child(1) .footer_nav_listitem:nth-child(1) { width: 100%; } .footer_nav_listbox:nth-child(1) .footer_nav_listitem:nth-child(2) { width: 100%; } .footer_nav_listitem .main { font-size: 1.3rem; } .footer_nav_listitem .function { font-size: 1.1rem; } .footer_nav_listitem .main li li { font-size: 1.1rem; padding-left: 1em; position: relative; } .footer_nav_listitem .main li li:before { display: inline-block; content: "-"; position: absolute; left: 2px; } .footer_nav_listitem .main > li + li { margin-top: 16px; } .footer_nav_listitem .main ul { margin-top: 10px; } .footer_nav_listitem .main li li + li { margin-top: 4px; } .footer_nav_listitem .function > li + li { margin-top: 12px; } .footer_nav_listitem + .footer_nav_listitem { margin-top: 16px; } .footer_copyrights { width: 86.66%; margin: 113px 0 0 8.16%; font-size: 1.2rem; } } /*common*/ .page_head { padding-top: 127px; } .page_head > .inner { width: 63.13%; margin: 0 auto; } .page_head .en { font-size: 3.0rem; color: #B7282E; } .page_head .ja { font-size: 5.5rem; font-weight: 500; line-height: 1.2; letter-spacing: 0.1em; } .page_common { margin: 286px 0 125px; } .page_head + .page_common { margin-top: 140px; } .page_common > .inner { display: flex; justify-content: space-between; margin: 0 8.16%; } .page_common_head { width: 29.26%; box-sizing: border-box; } .page_common_body { width: 65.85%; } .page_archive { margin: 286px 0 125px; } .page_nav { margin: 84px auto 0; display: flex; align-items: center; justify-content: space-between; } .page_nav_recommended { margin-bottom: 150px; } .page_nav .prev, .page_nav .next { width: 46px; } .page_nav img { width: 100%; } .page_nav .index a { font-size: 2.0rem; border-bottom: 1px solid #333; } .swiper-wrapper { -webkit-transition: all 0.8s cubic-bezier(0.36, 0.14, 0, 1); transition: all 0.8s cubic-bezier(0.36, 0.14, 0, 1); } @media screen and (max-width: 1024px) { .page_head { padding-top: 122px; } .page_head > .inner { width: auto; margin: 0 6.66%; } .page_common { margin: 122px 0 125px; } .page_head + .page_common { margin-top: 22px; } .page_common > .inner { display: block; justify-content: space-between; margin: 0 6.66%; } .page_common_head { width: auto; box-sizing: border-box; } .page_common_body { width: 100%; } .page_archive { margin: 122px 0 125px; } .page_nav .index a { font-size: 1.6rem; border-bottom: 1px solid #333; } } @media screen and (max-width: 768px) { .page_head { padding-top: 70px; } .page_head .en { font-size: 1.6rem; } .page_head .ja { font-size: 2.5rem; font-weight: 500; line-height: 1.5; } .page_nav { margin: 79px auto 0; display: flex; align-items: center; justify-content: space-between; } .page_nav_recommended { margin-bottom: 100px; } } /* Google Mapを囲う要素 */ .googlemap { position: relative; width: 100%; height: 0; margin-top: 16px; padding-top: 52.08%; /* 比率を4:3に固定 */ border-radius: 5px; overflow: hidden; } /* Google Mapのiframe */ .googlemap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /*company*/ .company_head { margin: 27px 0 0 18.43%; } .company_head > .inner { min-height: 450px; display: flex; align-items: center; } .company_head_txt { min-width: 500px; width: 48.17%; } .company_head_txt .en { font-size: 10.0rem; color: #B7282E; line-height: 1.26; margin-bottom: 43px; } .company_head_ph { width: 34.16%; } .company_head_ph img { width: 100%; } .company_body > .inner { width: 95.92%; margin: 34px auto 0; padding-top: 46px; display: flex; justify-content: space-between; flex-direction: row-reverse; border-top: 1px solid #626172; } .company_nav { width: 13.29%; } .company_nav ul { position: sticky; right: 0; top: 150px; font-size: 1.5rem; } .company_nav ul li { opacity: 0.5; margin-bottom: 8px; } .company_nav ul .current { opacity: 1; } .company_item_list { width: 82.98%; } .company_item { display: flex; justify-content: space-between; } .company_item + .company_item { margin-top: 110px; padding-top: 46px; border-top: 1px solid #626172; } .company_item_hd { width: 18.43%; } .company_item_main { width: 79.57%; } .company_nav .btn { opacity: 1; margin-top: 16px; } .company_nav .btn a { font-size: 1.6rem; display: block; background: #B7282E; padding: 15px 0; text-align: center; border-radius: 10px; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.25); } .company_nav .btn a .ico_exlink { display: inline-block; line-height: 16px; margin-left: 8px; } .company_nav .circle { margin-left: 20px; margin-top: 8px; } .company_nav .circle { padding-left: 10px; margin-bottom: 0; position: relative; } .company_nav .circle + .circle { margin-top: 0; } .company_nav .circle:before { content: ""; display: block; width: 4px; height: 4px; background: #fff; border-radius: 50%; position: absolute; left: 0; top: calc(50% - 2px); } .company_item_main .common_data { margin-bottom: 80px; } .company_item_main .common_shareholder_item .common_data { margin-bottom: 0px; } .ico_ex_comp { display: inline-block; width: 8px; line-height: 8px; margin-left: 5px; } .ico_ex_comp .ico_ex_img { fill: #fff; } .ico_ex_comp svg { width: 100%; } .company_item_hd { padding-left: 19px; font-size: 1.6rem; font-weight: 500; line-height: 1.5; position: relative; } .company_item_hd:before { content: ""; display: block; width: 8px; height: 8px; background: #B7282E; border-radius: 50%; position: absolute; left: 0; top: 8px;} .common_en { font-size: 3.0rem; line-height: 1.26; color: #B7282E; margin-bottom: 24px; } * + .common_en { margin-top: 150px; } .company_item_main .read { font-size: 3.5rem; font-weight: 500; line-height: 1.44; margin: 0 0 35px; letter-spacing: 0.15em; } .company_item_main p + p { margin-top: 2em; } .company_item_main .philosophy_list { font-size: 2.5rem; } .company_item_main .philosophy_list li { list-style: decimal; margin-left: 1.2em; line-height: 1.6; padding-left: 10px; } .company_item_main .philosophy_list li + li { margin-top: 10px; } .company_item_main .philosophy_list li::marker { font-family: 'Outfit', sans-serif; } .company_item_main .philosophy_value { font-size: 2.0rem; display: flex; } .company_item_main .philosophy_value { display: flex; flex-wrap: wrap; border-top: 1px solid #626172; } .company_item_main .philosophy_value dt { width: 165px; border-bottom: 1px solid #626172; padding: 26px 0; } .company_item_main .philosophy_value dd { width: calc(100% - 165px); border-bottom: 1px solid #626172;padding: 26px 0; } .company_item_ceo .ph { position: relative; } .company_item_ceo .ph img { border-radius: 20px; } .company_item_ceo .en { font-size: 3.0rem; color: #fff; position: absolute; left: 60px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); line-height: 1.5; } .company_item_ceo .meta { padding: 20px 23px; position: absolute; right: 0; bottom: 0; background: #fff; border-radius: 20px 0 20px 0; } .company_item_ceo .meta * { color: #231815; } .company_item_ceo .meta .type { font-size: 1.4rem; line-height: 1.7; } .company_item_ceo .meta .name { font-size: 2.4rem; line-height: 1.2; margin-top: 8px; } .company_item_ceo .read { font-weight: 500; margin-top: 56px; } .company_item_ceo .txt { margin-left: 31.86%; margin-top: 50px; } .company_item .profile .ttl { font-size: 1.5rem; color: #B7282E; } .company_item_ceo .profile .ttl { margin: 52px 0 15px; } .company_item_coo .profile .ttl { margin: 34px 0 8px; } .company_item_officer .profile .ttl { margin: 32px 0 8px; } .company_item_member .profile .ttl { margin: 15px 0 8px; } .company_item .profile p { font-size: 1.4rem; line-height: 1.85; color: #D9D9D9; } .company_item_coo { display: flex; justify-content: space-between; align-items: flex-start; margin: 62px 0 26px; } .company_item_coo .ph { width: 48.38%; position: relative; } .company_item_coo .ph img { border-radius: 15px; } .company_item_coo .en { font-size: 1.4rem; color: #231815; position: absolute; left: 6.66%; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); line-height: 1.5; } .company_item_coo .txt { width: 48.38%; } .company_item_coo .meta .type { font-size: 1.4rem; line-height: 1.7; } .company_item_coo .meta .name { font-size: 2.4rem; line-height: 1.2; margin-top: 8px; } .company_item_officer { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; } .company_item_officer .item { width: 44.96%; margin-top: 93px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; } .company_item_officer .ph { width: 64.34%; position: relative; } .company_item_officer .ph img { border-radius: 10px; } .company_item_officer .en { font-size: 1.4rem; color: #231815; position: absolute; left: 7.31%; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); line-height: 1.5; } .company_item_officer .txt { width: 32.27%; } .company_item_officer .meta .type { font-size: 1.4rem; line-height: 1.7; } .company_item_officer .meta .name { font-size: 2.4rem; line-height: 1.2; margin-top: 8px; } .company_item_member { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; } .company_item_member .item { width: 44.96%; margin-bottom: 55px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; } .company_item_member .ph { width: 28.57%; position: relative; background: #fff; border-radius: 10px; } .company_item_member .ph img { width: 100%; } .company_item_member .txt { width: 66.51%; } .company_item_member .name { font-size: 2.0rem; line-height: 1.2; display: flex; flex-wrap: wrap; align-items: baseline; } .company_item_member .ja { margin-right: 14px; } .company_item_member .en { font-size: 1.5rem; } .common_data { font-size: 1.6rem; border-collapse: separate; width: 100%; border-top: 1px solid #626172;} .common_data_top { border-top: none; } .common_data th, .common_data td { border-bottom: 1px solid #626172; padding: 35px 0; } .common_data td .notes { position: relative; padding-left: 1em; } .common_data td .notes:before { content: "※"; display: inline-block; position: absolute; left: 0; } .common_data td .list { margin: 19px 0; } .common_data td .list li { position: relative; padding-left: 1em; } .common_data td .list li:before { content: "・"; display: inline-block; position: absolute; left: 0; } .common_data_top tr:first-child th, .common_data_top tr:first-child td { padding-top: 0; } .common_data th { width: 224px; } .btn_common a { font-size: 2.0rem; display: inline-block;background: #B7282E; color: #fff; padding: 2px 20px; border-radius: 20px; } .common_data .btn_common { display: inline-block; } .common_partner_item { display: flex; justify-content: space-between; margin-top: 50px; } .common_partner_item .img { width: 38.70%; } .common_partner_item .img > div img { border-radius: 20px; width: 100%; } .common_partner_item .txt { width: 58.06%; } .common_partner_item .btn_common { margin-top: 17px; text-align: right; } .common_partner_item .name { font-size: 2.4rem; font-weight: 500; margin-bottom: 24px; line-height: 1.33; } .common_shareholder_item .head { display: flex; justify-content: space-between; margin-bottom: 32px; } .common_shareholder_item .name { font-size: 2.4rem; font-weight: 500; line-height: 1.5; } .common_shareholder_item .name .notes { font-size: 1.4rem; display: inline-block; margin-left: 11px; } .common_shareholder_item + .common_shareholder_item { margin-top: 128px; } .common_shareholder_item .btn_common { min-width: 120px; } @media screen and (max-width: 1024px) { .company_head { margin: 0 6.67%; } .company_body > .inner { width: auto; margin: 34px 0 0; padding: 46px 0 0; display: flex; justify-content: space-between; flex-direction: row-reverse; border-top: 1px solid #626172; } .company_nav { display: none; } .company_item_list { width: auto; } .company_item { padding-left: 6.67%; padding-right: 6.67%; } .company_item { display: block; justify-content: space-between; } .company_item + .company_item { margin-top: 100px; padding-top: 36px; border-top: 1px solid #626172; } .company_item_hd { width: auto; } .company_item_main { width: auto; } #philosophy .company_item_main, .recruit_body .company_item_main{ margin-left: 6.46%; } .common_en { margin: 36px 0 8px; } .company_item_hd { margin-bottom: 35px; } } @media screen and (max-width: 768px) { .company_head { margin: 0 auto; padding-top: 70px; width: 86.66%; } .company_head > .inner { min-height: auto; display: block; align-items: center; } .company_head_txt { min-width: auto; width: auto; } .company_head_txt .en { font-size: 5.0rem; color: #B7282E; line-height: 1.26; margin-bottom: 30px; } .company_head_txt .read { margin-left: 7.69%; } .company_head_ph { width: auto; margin: 39px 7.69% 0; } .company_head_ph img { width: 100%; } .company_body > .inner { width: auto; margin: 56px 0 0; padding: 36px 0 0; display: flex; justify-content: space-between; flex-direction: row-reverse; border-top: 1px solid #626172; } .company_nav { width: 13.29%; } .company_nav ul { position: sticky; right: 0; top: 150px; font-size: 1.5rem; } .company_nav ul li { opacity: 0.5; margin-bottom: 8px; } .company_nav ul .current { opacity: 1; } .company_nav .btn { opacity: 1; margin-top: 16px; } .company_nav .btn a { font-size: 1.6rem; display: block; background: #B7282E; padding: 15px 0; text-align: center; border-radius: 10px; box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25); } .company_nav .btn a .ico_exlink { display: inline-block; line-height: 16px; margin-left: 8px; } .company_nav .circle { margin-left: 20px; margin-top: 8px; } .company_nav .circle { padding-left: 10px; margin-bottom: 0; position: relative; } .company_nav .circle + .circle { margin-top: 0; } .company_nav .circle:before { content: ""; display: block; width: 4px; height: 4px; background: #fff; border-radius: 50%; position: absolute; left: 0; top: calc(50% - 2px); } .company_item_hd { padding-left: 19px; margin-bottom: 35px; font-size: 1.4rem; line-height: 1.5; position: relative; } .company_item_hd:before { content: ""; display: block; width: 8px; height: 8px; background: #B7282E; border-radius: 50%; position: absolute; left: 0; top: 8px;} .common_en { font-size: 1.6rem; line-height: 1.26; color: #B7282E; margin: 36px 0 8px; } * + .common_en { margin-top: 55px; } .company_item_main .read { font-size: 2.0rem; line-height: 1.44; margin: 0 0 24px; } #message .company_item_main .read, #philosophy .company_item_main p { margin-left: 21.45%; } .company_item_main p + p { margin-top: 2em; } .company_item_main .philosophy_list { font-size: 1.4rem; } .company_item_main .philosophy_list li { list-style: decimal; margin-left: 1.2em; line-height: 1.6; padding-left: 6px; } .company_item_main .philosophy_list li + li { margin-top: 10px; } .company_item_main .philosophy_value { font-size: 1.3rem; display: flex; } .company_item_main .philosophy_value { display: flex; flex-wrap: wrap; border-top: 1px solid #626172; } .company_item_main .philosophy_value dt { width: 115px; border-bottom: 1px solid #626172; padding: 18px 0; } .company_item_main .philosophy_value dd { width: calc(100% - 115px); border-bottom: 1px solid #626172;padding: 18px 0; } .company_item_ceo .ph { position: relative; } .company_item_ceo .ph img { border-radius: 10px; } .company_item_ceo .en { font-size: 1.3rem; color: #fff; position: absolute; left: 7.38%; top: 29vw; -webkit-transform: translateY(-50%); transform: translateY(-50%); line-height: 1.5; } .company_item_ceo .meta { padding: 0; position: relative; right: auto; bottom: auto; background: none; border-radius: 0; } .company_item_ceo .meta * { color: #fff; } .company_item_ceo .meta .type { font-size: 1.2rem; line-height: 1.7; margin-top: 16px; } .company_item_ceo .meta .name { font-size: 1.8rem; line-height: 1.2; margin-top: 8px; } #message .company_item_ceo .read { margin-top: 49px; margin-left: 0; } .company_item_ceo .txt { margin-left: 0; margin-top: 26px; } .company_item .profile .ttl { font-size: 1.1rem; color: #B7282E; } .company_item_ceo .profile .ttl { margin: 52px 0 15px; } .company_item_coo .profile .ttl { margin: 13px 0 8px; } .company_item_officer .profile .ttl { margin: 13px 0 8px; } .company_item_member .profile .ttl { margin: 8px 0 5px; } .company_item .profile p { font-size: 1.3rem; color: #D9D9D9; } .company_item_coo { display: flex; justify-content: space-between; flex-wrap: wrap; justify-content: space-between; align-items: center; margin: 33px 0 26px; } .company_item_coo .ph { width: 61.53%; position: relative; } .company_item_coo .ph img { border-radius: 7.7px; } .company_item_coo .en { font-size: 1.1rem; color: #231815; position: absolute; left: 6.66%; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); line-height: 1.5; } .company_item_coo .txt { width: 34.15%; } .company_item_coo .meta .type { font-size: 1.1rem; line-height: 1.7; } .company_item_coo .meta .name { font-size: 1.6rem; line-height: 1.2; margin-top: 8px; } .company_item_officer { display: block; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; } .company_item_officer .item { width: auto; margin-top: 50px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; } .company_item_officer .ph { width: 61.53%; position: relative; } .company_item_officer .ph img { border-radius: 7.7px; } .company_item_officer .en { font-size: 1.1rem; color: #231815; position: absolute; left: 7.31%; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); line-height: 1.5; } .company_item_officer .txt { width: 34.15%; } .company_item_officer .meta .type { font-size: 1.1rem; line-height: 1.7; } .company_item_officer .meta .name { font-size: 1.6rem; line-height: 1.2; margin-top: 8px; } .company_item_member { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; } .company_item_member .item { width: 100%; margin-bottom: 55px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; } .company_item_member .ph { width: 26.46%; position: relative; background: #fff; border-radius: 10px; } .company_item_member .ph img { border-radius: 10px; } .company_item_member .txt { width: 69.23%; } .company_item_member .name { font-size: 1.6rem; line-height: 1.2; margin-top: 0; } .company_item_member .en { font-size: 1.1rem; } .common_data { font-size: 1.6rem; border-collapse: separate; width: 100%; border-top: 1px solid #626172;} .common_data_top { border-top: none; } .common_data th, .common_data td { border-bottom: 1px solid #626172; padding: 15px 0; } .common_data_top tr:first-child th, .common_data_top tr:first-child td { padding-top: 0; } .common_data th { width: 86px; padding-right: 10px; font-size: 1.2rem; } .common_data td { font-size: 1.4rem; white-space:normal; } .btn_common a { font-size: 1.1rem; display: inline-block;background: #B7282E; color: #fff; padding: 3px 15px; border-radius: 20px; } .service_recommend_item .btn_common a { font-size: 2.0rem; padding: 6px 0; } .common_data .btn_common { display: inline-block; } .common_partner_item { display: flex; justify-content: space-between; margin-top: 50px; } .common_partner_item .img { width: 27.07%; } .common_partner_item .img > div img { border-radius: 5px; width: 100%; } .common_partner_item .txt { width: 69.23%; } .common_partner_item .btn_common { margin-top: 17px; text-align: right; } .common_partner_item .name { font-size: 1.6rem; margin-bottom: 6px; line-height: 1.33; } .common_shareholder_item .head { display: block; justify-content: space-between; margin-bottom: 14px; } .common_shareholder_item .name { font-size: 1.6rem; line-height: 1.5; } .common_shareholder_item .name .notes { font-size: 1.0rem; margin-left: 0; } .common_shareholder_item .head .btn_common { text-align: right; margin-top: 18px; } .common_shareholder_item + .common_shareholder_item { margin-top: 64px; } } /*service*/ .service_common_head { width: 69.32%; margin: 127px 0 0 18.43%; } .service_common_txt .en { font-size: 3.0rem; color: #B7282E; } .service_common_txt .ttl { font-size: 5.5rem; font-weight: 500; line-height: 1.36; } .service_common_txt .read { margin: 120px 0 0 32.32%; } .service_common_body > .inner { width: 95.92%; margin: 67px auto 0; padding-top: 46px; border-top: 1px solid #626172; } .service_item_ttl { font-size: 3.0rem; line-height: 1.5; margin: 0 0 75px 4.25%; font-weight: 500; } .service_item { width: 72.34%; margin-left: 17.02%; } .service_item + .service_item { margin-top: 108px; } .service_item .ttl { font-size: 2.4rem; font-weight: 500; margin-bottom: 61px; } .service_problem { display: flex; justify-content: space-between; flex-wrap: wrap; } .service_problem_item { width: 29.41%; background: #D8CFCC; text-align: center; padding: 35px 0 30px; border-radius: 20px; } .service_problem_item .txt p { color: #353031; line-height: 1.62; font-weight: 500; } .service_problem_item .ph { margin-top: 34px; } .service_point_item { display: flex; justify-content: space-between; position: relative; } .service_point:not(.service_step) .service_point_item + .service_point_item { margin-top: 86px; } .service_point_item .ico { min-width: 128px; width: 128px; height: 128px; position: relative; background: #fff; border-radius: 50%; font-size: 2.0rem; text-align: center; } .service_point_item .ico > div { display: inline-block; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } .service_point_item .ico * { color: #B7282E; } .service_point_item .ico .num { font-size: 4.0rem; display: block; line-height: 1; } .service_point_item .txt { width: calc(100% - 164px); margin-left: 36px; flex-shrink: 2; } .service_step .txt { width: calc(100% - 164px - 25.87%); margin-left: 36px; padding-bottom: 50px; flex-shrink: 2; } .service_point_item .txt .ttl { font-size: 2.4rem; font-weight: 500; margin: 24px 0 12px; line-height: 1.33; } .service_point_item .txt .ttl .small { font-size: 1.4rem; display: inline-block;} .service_point_item .img { min-width: 171px; width: 25.87%; margin-left: 20px; } .service_point_item .img img { width: 100%; } .service_step .service_point_item:before { content: ""; display: block; position: absolute; left: 62px; top: 0; z-index: -1; width: 5px; height: 100%; background: #CB1425; } .service_step .service_point_item:last-child:before { display: none; } .service_point_item .link_service { display: flex; align-items: center; flex-wrap: wrap; margin-top: 12px; } .service_point_item .link_service .hd { font-size: 1.4rem; margin: 0 16px 9px 0; padding: 5px 10px; background: #57669E; } .service_point_item .link_service a { font-size: 1.6rem; } .service_point_item P + P { margin-top: 2em; } .service_point_notes { font-size: 1.4rem; color: #D6D6D6; padding-left: 1em; position: relative; line-height: 1.7; } .service_point_notes:before { content: "※"; display: inline-block; position: absolute; left: 0; } .notes_gr { color: #d6d6d6; } .service_price { background: #fff; border-radius: 20px; text-align: center; padding: 107px 5% 91px; } .service_price p { font-weight: 500; } .service_price * { color: #353031; } .service_price .num { font-size: 4.0rem; font-weight: 500; line-height: 1.1; } .service_price .notes { font-size: 1.6rem; margin-top: 28px; } .service_price .ico_ex { width: 16px; display: inline-block; line-height: 8px; padding: 0 3px; } .service_price .ico_ex_img { fill: #B7282E; } .service_price .ico_ex svg { width: 100%; } .service_faq { margin-left: 8.82%; } .service_menu { width: 95.92%; margin: 103px auto 0; padding-top: 132px; border-top: 1px solid #626172; } .service_faq dt, .service_faq dd { padding-left: 68px; position: relative; } .service_faq dt { font-size: 2.0rem; padding-top: 30px; border-top: 1px solid #626172; line-height: 1.5; } .service_faq dd { font-size: 1.6rem; margin-top: 46px; padding-bottom: 72px; } .service_faq dd p + p { margin-top: 2em;} .service_faq dt .ico { display: inline-block; width: 28px; font-size: 3.0rem; color: #B7282E; position: absolute; top: 25px; left: 0; text-align: center; } .service_faq dd .ico { display: inline-block; width: 28px; font-size: 2.0rem; position: absolute; left: 0; text-align: center; } .service_faq dt .type { display: inline-block; font-size: 1.4rem; line-height: 1.5; background: #fff; color: #B7282E; margin: 0 8px 10px 0; padding: 3px 14px; border-radius: 20px; } .service_menu > .inner { width: 85.37%; margin-left: 10.63%; padding: 118px 10.12% 97px; background: rgba(87, 102, 158, 0.5); border-radius: 20px; box-sizing: border-box; position: relative; } .service_menu .en { font-size: 10.0rem; position: absolute; top: 0; left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); line-height: 1; } .service_menu .ttl { font-size: 2.5rem; font-weight: 500; margin-bottom: 39px; } .service_menu .top_service_list { margin-top: 39px; } .service_search { margin-bottom: 84px; display: flex; justify-content: space-between; } .service_search_item { font-size: 2.0rem; color: #333; line-height: 1.5; width: 46.87%; border-radius: 10px; padding: 35px 0 35px 30px; box-sizing: border-box; letter-spacing: 0.1em; } .service_search_item01 { background: #fff url("../img/btn_search01_img.svg") no-repeat right 10px/ 200px; } .service_search_item02 { background: #fff url("../img/btn_search02_img.svg") no-repeat right 10px/ 200px; } @media screen and (max-width: 1200px) { .service_search_item01 { background: #fff url("../img/btn_search01_img.svg") no-repeat right bottom/ 50%; } .service_search_item02 { background: #fff url("../img/btn_search02_img.svg") no-repeat right bottom/ 50%; } } @media screen and (max-width: 1024px) { .service_common_head { width: auto; margin: 127px 6.67% 0; } .service_item { width: 90.35%; margin: 0 auto; } .service_common_txt .ttl { font-size: 4.5rem; font-weight: 500; line-height: 1.36; } .service_menu > .inner { width: 90.35%; margin: 0 auto; padding: 118px 10.12% 97px; background: rgba(87, 102, 158, 0.5); border-radius: 20px; box-sizing: border-box; position: relative; } .service_search_item { font-size: 2.0rem; color: #333; line-height: 1.5; width: 46.87%; border-radius: 10px; padding: 20px 0 55px 20px; box-sizing: border-box; letter-spacing: 0.1em; } } @media screen and (max-width: 768px) { .service_common_head { width: 86.66%; margin: 70px auto 0; } .service_common_txt .en { font-size: 1.6rem; color: #B7282E; } .service_common_txt .ttl { font-size: 2.5rem; line-height: 1.36; } .service_common_txt .read { margin: 37px 0 0 0; } .service_common_body > .inner { width: auto; margin: 67px auto 0; padding: 21px 6.67% 0; border-top: 1px solid #626172; } .service_item_ttl { font-size: 2.0rem; margin: 0 0 20px 0; } .service_item { width: auto; margin-left: 0; } .service_item + .service_item { margin-top: 54px; } .service_item .ttl { font-size: 1.6rem; margin-bottom: 21px; } .service_problem { display: flex; justify-content: space-between; flex-wrap: wrap; } .service_problem_item { width: 100%; background: #D8CFCC; text-align: center; padding: 35px 0 30px; border-radius: 10px; } .service_problem_item .txt { text-align: left; } .service_problem_item .txt p { font-size: 1.4rem; color: #353031; line-height: 1.62; font-weight: 500; } .service_problem_item .ph { margin-top: 0; } .service_problem_item + .service_problem_item { margin-top: 20px; } .service_point_item { display: flex; justify-content: space-between; position: relative; flex-wrap: wrap; padding-bottom: 0; } .service_point:not(.service_step) .service_point_item + .service_point_item { margin-top: 13px; } .service_point_item + .service_point_item { margin-top: 33px; } .service_step .service_point_item + .service_point_item { margin-top: 0; } .service_point_item .ico { min-width: 54px; width: 54px; height: 54px; position: relative; background: #fff; border-radius: 50%; font-size: 1.1rem; text-align: center; } .service_point_item .ico > div { display: inline-block; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } .service_point_item .ico * { color: #B7282E; } .service_point_item .ico .num { font-size: 2.1rem; display: block; line-height: 1; } .service_point_item .txt { width: calc(100% - 77px); margin-left: 23px; padding-bottom: 20px; } .service_point_item .txt .ttl { font-size: 1.6rem; margin: 0 0 10px; } .service_point_item .img { min-width: auto; width: calc(100% - 77px); margin: 0 0 0 77px; text-align: center; } .service_step .service_point_item .img { padding-bottom: 55px; } .service_point_item .img img { min-width: 180px; width: 180px; margin: 0 auto; } .service_step .service_point_item:before { content: ""; display: block; position: absolute; left: 26px; top: 0; z-index: -1; width: 3px; height: 100%; background: #CB1425; } .service_step .service_point_item:last-child:before { display: none; } .service_point_item .link_service { display: flex; align-items: flex-start; flex-wrap: wrap; flex-direction: column; margin-top: 18px; } .service_point_item .link_service .hd { font-size: 1.1rem; padding: 5px 10px; background: #57669E; } .service_point_item .link_service a { font-size: 1.3rem; } .service_price { background: #fff; border-radius: 10px; text-align: left; padding: 40px 20px 30px; } .service_price * { color: #353031; } .service_price .num { font-size: 2.0rem; font-weight: 500; line-height: 1.1; } .service_price .notes { font-size: 1.4rem; margin-top: 14px; } .service_faq { margin-left: 0; border-bottom: 1px solid #626172; } .service_price .ico_ex { display: inline-block; line-height: 6px; padding: 0 3px; width: 6px; } .service_menu { width: auto; margin: 123px auto 0; padding-top: 0; border-top: none; } .service_faq dt, .service_faq dd { padding-left: 35px; position: relative; } .service_faq dt { font-size: 1.4rem; padding-top: 25px; border-top: 1px solid #626172; line-height: 1.5; } .service_faq dd { font-size: 1.3rem; margin-top: 16px; padding-bottom: 25px; } .service_faq dt .ico { display: inline-block; width: 28px; font-size: 1.6rem; color: #B7282E; position: absolute; top: 25px; left: 0; text-align: center; line-height: 1.5; } .service_faq dd .ico { display: inline-block; width: 28px; font-size: 1.3rem; position: absolute; left: 0; text-align: center; } .service_faq dt .type { display: inline-block; font-size: 1.1rem; line-height: 1.5; background: #fff; color: #B7282E; margin: 0 6px 8px 0; padding: 2px 8px; border-radius: 20px; } .service_menu > .inner { width: auto; margin-left: 0; padding: 68px 6.66% 39px; background: rgba(87, 102, 158, 0.5); border-radius: 0; box-sizing: border-box; position: relative; } .service_menu .en { font-size: 4.0rem; position: absolute; top: 0; left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); line-height: 1; } .service_menu .ttl { font-size: 1.6rem; margin-bottom: 24px; } .service_menu .top_service_list { margin-top: 24px; } .service_search { margin-bottom: 84px; display: block; justify-content: space-between; } .service_search_item { display: block; font-size: 1.6rem; color: #333; line-height: 1.5; width: auto; border-radius: 5px; padding: 25px 0 25px 30px; box-sizing: border-box; letter-spacing: 0.1em; } .service_search_item + .service_search_item { margin-top: 20px; } .service_search_item01 { background: #fff url("../img/btn_search02_img.svg") no-repeat right 6px / contain; } .service_search_item02 { background: #fff url("../img/btn_search01_img.svg") no-repeat right 6px / contain; } } /*service01*/ .service_head { margin: 27px 0 0 18.43%; } .service_head > .inner { min-height: 450px; display: flex; align-items: center; } .service_head_txt { min-width: 350px; width: 48.17%; } .service_head_txt .en { font-size: 3.0rem; color: #B7282E; line-height: 1.26; margin-bottom: 43px; } .service_head_txt .en .num { display: block; font-size: 11.5rem; line-height: 0.8; } .service_head_txt .ttl { font-size: 5.5rem; letter-spacing: 0.1em; font-weight: 500; line-height: 1.36; } .service_head_ph { width: 34.16%; min-width: 300px; } .service_head_ph img { width: 100%; } .service01_item { width: 95.92%; margin: 103px auto 0; padding-top: 46px; border-top: 1px solid #626172; } .service_body_read { width: 89.82%; display: flex; justify-content: space-between; } .service_body_read .txt { width: 54.84%; } .service01_item_inner { width: 72.34%; margin-left: 17.02%; } .service01_img01 { margin: 62px 0 121px; display: flex; justify-content: space-between; background: #fff; padding: 39px; border-radius: 20px; } .service01_img01_ill { width: 29%; color: #353031; text-align: center; font-size: 1.6rem; line-height: 1.6; } .service01_img01_ill img { margin-bottom: 10px;} .service01_img01_arrow { align-self: center; } .service01_item .ttl { font-size: 2.4rem; font-weight: 500; margin-bottom: 61px; } .service_problem_item3 .service_problem_item { width: 29.41%; padding: 16px 16px; box-sizing: border-box; } .service_problem_item4 .service_problem_item { width: 23.62%; padding: 16px 16px; box-sizing: border-box; } .service_problem_item3 .service_problem_item > div { width: 100%; box-sizing: border-box; position: relative; } .service_problem_item4 .service_problem_item > div { width: 100%; height: 100%; padding-bottom: 80%; box-sizing: border-box; position: relative; } .service_problem_item3 .service_problem_item .hd, .service_problem_item4 .service_problem_item .hd { font-size: 1.4rem; color: #B7282E; font-weight: 500; margin-bottom: 13px; } .service_problem_item3 .service_problem_item .ph, .service_problem_item4 .service_problem_item .ph { width: 80%; position: absolute; bottom: 0; left: 10%; } .service01_set { display: flex; justify-content: space-between; margin-bottom: 103px; } .service01_set .ph { width: 52.11%; border-radius: 20px; overflow: hidden;} .service01_set .txt { width: 43.93%; } .service01_btn { margin-left: 52.95%; } .service02_set .service01_btn { margin-left: 0; margin-top: 30px;} .service02_set .service01_btn .txt { margin-top: 0; } .service02_btn { margin-top: 67px; } .service01_btn a, .service02_btn a { display: block; padding: 70px 9.17%; background: #B7282E; border-radius: 20px; font-size: 2.0rem; box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25); position: relative; } .service02_btn a { text-align: center; } /*.service01_btn a .arrow, .service02_btn a .arrow{ margin-left: 24px; }*/ .service01_btn a .ico_jdex { display: block; width: 24.60%; position: absolute; right: 9.17%; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .btn_arrow { fill:none;stroke:#B7282E;stroke-width:2;stroke-linecap:round; } .anime_btn a { display: flex; justify-content: center; align-items: center; } .service01_btn.anime_btn a { justify-content: flex-start; } .anime_btn .ico { position: relative; display: inline-block; margin-left: 14px; width: 34px; height: 34px;} .anime_btn .circle { display: inline-block; width: 34px; height: 34px; background: #fff; border-radius: 50%; overflow: hidden; } .anime_btn .arrow { width: 11px; height: 11px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); line-height: 0; display: flex; } .anime_btn .arrow svg{ width: 100%; } .anime_btn .arrow .arrow_nm { width: 11px; position: absolute; left: 0; top: 0; } .anime_btn .arrow .arrow_ov { width: 11px; position: absolute; left: -11px; top: 0; opacity: 0; } .anime_btn .arrow .arrow_nm .ico_ex_img, .anime_btn .arrow .arrow_ov .ico_ex_img{ fill: #B7282E; } .service02_img01 { border-radius: 20px; overflow: hidden; margin: 62px 0 98px; padding: 50px 0 18px; background: #fff; text-align: center;} .service02_img01 img { width: 75.55%; } .service02_set { display: flex; justify-content: space-between; margin-bottom: 103px; } .service02_set .ph { width: 38.60%; } .service02_set .txt { width: 53.03%; } .service02_set .txt .top_service_listitem { display: block; width: 320px; margin-top: 30px; } .service_problem2 { display: flex; justify-content: space-between; } .service_problem2 .service_problem_item { width: 47.05%; padding: 30px; box-sizing: border-box; } .service_problem2 .service_problem_item .main { display: flex; justify-content: space-between; } .service_problem2 .service_problem_item .ttl { color: #353031; margin-bottom: 40px; font-weight: 500; } .service_problem2 .service_problem_item .ph { width: 35%; } .service_problem2 .service_problem_item .txt { width: 59.77%; } .service_problem2 .service_problem_item dl { display: flex; flex-wrap: wrap; justify-content: space-between; font-size: 1.4rem; } .service_problem2 .service_problem_item dt { color: #57669E; width: 60px; text-align: right; } .service_problem2 .service_problem_item dd { color: #353031; width: calc(100% - 80px); text-align: left; line-height: 1.57; margin-bottom: 15px; } .service02_strengths { display: flex; justify-content: space-between; margin: 25px 0 16px; } .service02_strengths_item { width: 47.05%; padding: 127px 0 43px; background: #D6D6D6; border-radius: 20px; text-align: center; position: relative; } .service02_strengths_item .ph { width: 80%; margin: 0 auto; } .service02_strengths_item .ttl { font-size: 2.4rem; position: absolute; top: 40px;left: 0; width: 100%; color: #353031; } .service02_strengths_item.red .ttl { font-size: 3.6rem; color: #fff; } .service02_strengths_item .txt { margin-top: 20px; } .service02_strengths_item li { font-size: 1.6rem; color: #353031; text-align: left; } .service02_strengths_item.red li { color: #fff; } .service02_strengths_item ul { display: inline-block; } .service02_strengths_item.red { background: #B7282E; } .service_recommend { border-top: 1px solid #626172; margin-top: 121px; } .service_recommend_item { display: flex; align-items: center; border-bottom: 1px solid #626172; padding: 75px 0 67px; } .service_recommend_item .type { width: 50.18%; margin-right: 20px; font-size: 2.4rem; line-height: 1.5; align-self: flex-start; } .service_recommend_item .type .small { font-size: 1.6rem; } .service_recommend_item .ph { width: 112px; } .service_recommend_item .detail { width: 320px; align-self: flex-start; } .service_recommend_item .link { text-align: right; flex-grow: 2; min-width: 180px; } .service_recommend_item .link a { width: 122px; text-align: center; box-sizing: border-box; } @media screen and (max-width: 1250px) { .service_problem_item4 .service_problem_item { width: 48.95%; margin-bottom: 2.10%; padding-top: 16px; } } @media screen and (max-width: 1024px) { .service_problem_item3 .service_problem_item { text-align: left;} .service_head_txt .ttl { font-size: 4.5rem; letter-spacing: 0.1em; font-weight: 500; line-height: 1.36; } .service_head { margin: 0 0 0 6.67%; } .service01_item_inner { width: 90.35%; margin: 0 auto; } .service01_btn a, .service02_btn a { display: flex; padding: 28px 9.17%; background: #B7282E; border-radius: 20px; font-size: 1.4rem; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.25); position: relative; } .service02_btn a .ico_jdex{ display: block; width: 56px; position: absolute; right: 9.17%; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .service02_btn a { padding: 28px 0; } } @media screen and (max-width: 768px) { .service_head { margin: 0 6.67%; padding-top: 39px; } .service_head > .inner { min-height: auto; display: flex; align-items: center; flex-wrap: wrap; flex-direction: column-reverse; } .service_head_txt { min-width: auto; width: 100%; margin-top: -38px; } .service_head_txt .en { font-size: 1.6rem; color: #B7282E; line-height: 1.26; margin-bottom: 21px; } .service_head_txt .en .num { display: block; font-size: 5.4rem; line-height: 0.8; } .service_head_txt .ttl { font-size: 2.5rem; line-height: 1.6; } .service_head_ph { width: 64.92%; min-width: auto; margin-left: 35.08%; } .service_head_ph img { width: 100%; } .service01_item { width: auto; margin: 60px auto 0; padding: 20px 6.67% 0; border-top: 1px solid #626172; } .service_body_read { width: 100%; display: block; } .service_body_read .txt { width: 100%; } .service01_item_inner { width: auto; margin: 14px auto 0; } .service01_img01 { margin: 25px 0 46px; flex-direction: column; display: flex; justify-content: space-between; background: #fff; padding: 21px; border-radius: 10px; } .service01_img01_ill { width: 75.76%; margin: 0 auto; color: #353031; text-align: center; font-size: 1.4rem; line-height: 1.6; } .service01_img01_ill img { margin-bottom: 10px;} .service01_img01_arrow { align-self: center; margin: 10px 0; } .service01_img01_arrow img { -webkit-transform: rotate(90deg); transform: rotate(90deg); } .service01_item .ttl { font-size: 1.6rem; margin-bottom:26px; } .service_problem_item3 .service_problem_item { width: 100%; padding: 20px 6.15%; box-sizing: border-box; } .service_problem_item4 .service_problem_item { width: 100%; padding: 10px 6.15%; box-sizing: border-box; } .service_problem_item3 .service_problem_item > div { width: 100%; box-sizing: border-box; position: relative; } .service_problem_item4 .service_problem_item > div { display: flex; align-items: center; justify-content: space-between; padding-bottom: 0; } .service_problem_item4 .service_problem_item + .service_problem_item { margin-top: 20px; } .service_problem_item3 .service_problem_item .hd, .service_problem_item4 .service_problem_item .hd { font-size: 1.2rem; color: #B7282E; font-weight: 500; margin-bottom: 13px; } .service_problem_item3 .service_problem_item .hd { width: 70px; } .service_problem_item3 .service_problem_item p { width: calc(100% - 70px); } .service_problem_item3 .service_problem_item .txt { display: flex; } .service_problem_item4 .service_problem_item .txt { width: 55%; } .service_problem_item4 .service_problem_item .ph { width: 39.64%; position: relative; bottom: auto; left: auto; } .service01_set { display: block; justify-content: space-between; margin-bottom: 26px; } .service01_set .ph { width: auto; border-radius: 10px; } .service01_set .txt { width: auto; margin-top: 25px; } .service01_btn { margin-left: 0; } .service01_btn a { display: flex; padding: 22px 7.97%; background: #B7282E; border-radius: 10px; font-size: 1.4rem; text-align: left; box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25); position: relative; } .service02_btn a { border-radius: 10px; } .service01_btn.txt_c a { text-align: center; } .service01_btn a .ico_jdex { width: 56px; position: absolute; right: 5.23%; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .service01_btn .ico, .service02_btn .ico { position: relative; display: inline-block; margin-left: 14px; width: 22px; height: 22px;} .service01_btn .circle, .service02_btn .circle { display: inline-block; width: 22px; height: 22px; background: #fff; border-radius: 50%; overflow: hidden; } .service01_btn.anime_btn .arrow, .service02_btn.anime_btn .arrow { width: 6px; height: 6px; } .anime_btn .arrow .ico_ex .ico_ex_img { width: 8px; height: 8px; } .service01_btn.anime_btn .arrow .arrow_nm, .service02_btn.anime_btn .arrow .arrow_nm, .service01_btn.anime_btn .arrow .arrow_ov, .service02_btn.anime_btn .arrow .arrow_ov { width: 6px; } .service02_img01 { border-radius: 10px; overflow: hidden; margin: 25px 0 42px; padding: 20px 0; background: #fff; text-align: center;} .service02_img01 img { width: 92.30%; } .service02_set { display: block; justify-content: space-between; margin-bottom: 84px; } .service02_set .ph { width: 68.51%; margin: 0 auto; } .service02_set .txt { width: auto; margin-top: 15px; } .service02_set .txt .top_service_listitem { display: block; width: 100%; margin-top: 30px; } .service_problem2 { display: block; justify-content: space-between; } .service_problem2 .service_problem_item { width: 100%; padding: 30px; box-sizing: border-box; } .service_problem2 .service_problem_item .head { display: flex; justify-content: space-between; align-items: center; } .service_problem2 .service_problem_item .main { display: flex; justify-content: space-between; margin-top: 26px; } .service_problem2 .service_problem_item .ttl { width: 60%; color: #353031; margin-bottom: 0; font-weight: 500; text-align: left; } .service_problem2 .service_problem_item .ph { width: 35%; } .service_problem2 .service_problem_item .txt { width: auto; } .service_problem2 .service_problem_item dl { display: flex; flex-wrap: wrap; justify-content: space-between; font-size: 1.4rem; } .service_problem2 .service_problem_item dt { color: #57669E; width: 60px; text-align: right; } .service_problem2 .service_problem_item dd { color: #353031; width: calc(100% - 80px); text-align: left; line-height: 1.57; margin-bottom: 15px; } .service02_strengths { display: flex; justify-content: space-between; flex-wrap: wrap; margin: 0 0 5px; } .service02_strengths_item { width: 100%; padding: 23px 0 22px; background: #D6D6D6; border-radius: 10px; text-align: center; position: relative; } .service02_strengths_item.red { margin-top: 18px; } .service02_strengths_item .ph { width: 80%; margin: 0 auto; } .service02_strengths_item .ttl { font-size: 1.6rem; position: relative; top: auto;left: auto; width: 100%; color: #353031; } .service02_strengths_item.red .ttl { font-size: 2.8rem; color: #fff; } .service02_strengths_item .txt { margin-top: 20px; } .service02_strengths_item li { font-size: 1.6rem; line-height: 1.57; color: #353031; text-align: left; } .service02_strengths_item.red li { color: #fff; } .service02_strengths_item ul { display: inline-block; } .service02_strengths_item.red { background: #B7282E; } .service_recommend { border-top: 1px solid #626172; margin-top: 39px; } .service_recommend_item { display: block; align-items: flex-start; border-bottom: 1px solid #626172; padding: 36px 0 54px; } .service_recommend_item .type { width: 100%; margin-right: 20px; font-size: 1.6rem; line-height: 1.5; } .service_recommend_item .type .small { font-size: 1.2rem; } .service_recommend_item .type p { font-size: 1.6rem; line-height: 1.62; margin-bottom: 24px; } .service_recommend_item .detail { width: 100%; margin-top: 24px; } .service_recommend_item .link { text-align: right; flex-grow: 2; padding-top: 20px; } .service_recommend_item .link a { width: 122px; text-align: center; box-sizing: border-box; } } /*recruit*/ .btn_list { display: flex; margin-top: 27px; } .btn_list a { font-size: 1.6rem; background: #B7282E; padding: 14px 0; margin-right: 7px; width: 140px;border-radius: 10px; text-align: center; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.25); } .ico_exlink { display: inline-block; line-height: 16px; margin: 0 5px; } .recruit_list .ttl { font-size: 2.0rem; color: #B7282E; margin-bottom: 39px; } .recruit_list .type, .recruit_listitem .type { display: inline-block; background: #fff; color: #B7282E; font-size: 1.4rem; width: 100px; min-width: 100px; padding: 3px 0; text-align: center; border-radius: 20px; } .recruit_list li { margin-top: 15px; } .recruit_list li a { display: flex; align-items: flex-start; } .recruit_list li .name { font-size: 2.5rem; margin-left: 22px; line-height: 1.5; } .recruit_list li .arrow { min-width: 15px; margin: 14px 0 0 11px; line-height: 0; } .recruit_listitem { margin: 150px 0 0; } .recruit_listitem .name { font-size: 3.0rem; font-weight: 500; line-height: 1.5; margin: 14px 0 39px; } .recruit_listitem p + .common_data { margin-top: 30px; } @media screen and (max-width: 768px) { .btn_list { display: flex; margin: 38px 0 100px; margin-left: 7.69%; } .btn_list a { font-size: 1.6rem; background: #B7282E; padding: 14px 0; margin-right: 7px; width: 140px;border-radius: 10px; text-align: center; box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25); } .ico_exlink { display: inline-block; line-height: 16px; margin-left: 5px; } .recruit_list .ttl { font-size: 1.6rem; color: #B7282E; margin-bottom: 20px; } .recruit_list .type, .recruit_listitem .type { display: inline-block; background: #fff; color: #B7282E; font-size: 0.9rem; width: 60px; min-width: 60px; padding: 1px 0; text-align: center; border-radius: 20px; } .recruit_list li { margin-top: 15px; } .recruit_list li a { display: flex; align-items: flex-start; } .recruit_list li .name { font-size: 1.3rem; margin-left: 9px; line-height: 1.5; } .recruit_list li .arrow { display: inline-block; min-width: 9px; width: 9px; margin: 7px 0 0 11px; line-height: 0; } .recruit_listitem { margin: 89px 0 0; } .recruit_listitem .name { font-size: 2.0rem; line-height: 1.5; margin: 14px 0 35px; } .recruit_listitem p + .common_data { margin-top: 30px; } } /*news*/ .archive_news { width: 63.13%; margin: 162px auto 0; } .category_list { display: flex; flex-wrap: wrap; margin-bottom: 160px; } .category_list li a { display: block; padding: 10px 12px; margin: 0 5px 7px 0; background: rgba(183, 40, 46, 0.5); border-radius: 5px; line-height: 1.5; } .category_list li.here a { background: rgba(183, 40, 46, 1); } @media screen and (max-width: 1024px) { .archive_news { width: 86.66%; margin: 162px auto 0; } } @media screen and (max-width: 768px) { .archive_news { width: 86.66%; margin: 93px auto 0; } .category_list { display: flex; margin-bottom: 80px; } .category_list li a { padding: 10px 12px; margin-right: 8px; background: rgba(183, 40, 46, 0.5); border-radius: 5px; line-height: 1.5; } .category_list li.here a { background: rgba(183, 40, 46, 1); } } /*news single*/ .single_news { min-width: 550px; max-width: 900px; width: 46.81%; margin: 162px auto 0; } .single_news_meta { display: flex; align-items: center; } .single_news_meta .date { font-size: 1.3rem; margin-right: 16px; } .single_news_meta .cat { font-size: 1.2rem; padding: 10px 12px; background: #B7282E; margin-right: 16px; line-height: 1.2; border-radius: 5px; } .single_news_ttl { font-size: 3.0rem; font-weight: 500; line-height: 1.5; margin: 33px 0 56px; } .single_news .edit h1, .single_news .edit h2, .single_news .edit h3, .single_news .edit h4, .single_news .edit h5, .single_news .edit h6 { font-size: 2.0rem; margin-top: 56px; } .single_news .edit h1 + *, .single_news .edit h2 + *, .single_news .edit h3 + *, .single_news .edit h4 + *, .single_news .edit h5 + *, .single_news .edit h6 + * { margin-top: 25px; } .single_news .edit > * + * { margin-top: 2em; } .single_news .edit figure { text-align: center; } .single_news .edit img { border-radius: 10px; } .single_news ul { margin-left: 2em; } .single_news ul li { font-size: 1.6rem; list-style: disc; } .single_news ol { margin-left: 2em; } .single_news ol li { font-size: 1.6rem; list-style: decimal; } @media screen and (max-width: 1024px) { .single_news { min-width: auto; width: 86.66%; margin: 162px auto 0; } } @media screen and (max-width: 768px) { .single_news { min-width: auto; width: auto; margin: 92px auto 0; padding: 12px 6.66% 0; border-top: 1px solid #626172; } .single_news_meta { display: flex; align-items: center; flex-wrap: wrap; } .single_news_meta .date { width: 100%; font-size: 1.1rem; margin: 0 0 6px; } .single_news_meta .cat { font-size: 1.05rem; padding: 8px 10px; background: #B7282E; margin-right: 12px; line-height: 1.2; border-radius: 5px; } .single_news_ttl { font-size: 2.0rem; font-weight: 500; line-height: 1.5; margin: 13px 0 40px; } .single_news .edit h1, .single_news .edit h2, .single_news .edit h3, .single_news .edit h4, .single_news .edit h5, .single_news .edit h6 { font-size: 1.6rem; margin-top: 40px; } .single_news .edit h1 + *, .single_news .edit h2 + *, .single_news .edit h3 + *, .single_news .edit h4 + *, .single_news .edit h5 + *, .single_news .edit h6 + * { margin-top: 18px; } .single_news .edit > * + * { margin-top: 2em; } .single_news ul li { font-size: 1.4rem; list-style: disc; } .single_news ol li { font-size: 1.4rem; list-style: decimal; } } /*case*/ .archive_case { min-width: 816px; width: 69.38%; margin: 162px 0 0 18.43%; } .archive_case_list { display: flex; flex-wrap: wrap; } .archive_case_list .case_item { width: 29.41%; margin-left: 5.88%; margin-bottom: 100px; } .archive_case_list .case_item:nth-child(3n+1) { margin-left: 0; } @media screen and (max-width: 1024px) { .archive_case { min-width: auto; width: auto; margin: 162px 6.66% 0; } .archive_case_list .case_item { width: 47.05%; margin-bottom: 100px; margin-left: 5.9%; } .archive_case_list .case_item:nth-child(3n+1) { margin-left: 5.9%; } .archive_case_list .case_item:nth-child(2n+1) { margin-left: 0; } } @media screen and (max-width: 768px) { .archive_case { min-width: auto; width: auto; margin: 92px 6.66% 0; } .archive_case_list .case_item { width: 100%; margin-bottom: 50px; margin-left: 0; } .archive_case_list .case_item:nth-child(3n+1) { margin-left: 0; } } /*case single*/ .single_case { min-width: 768px; width: 69.38%; margin: 118px 0 0 18.43%; padding-top: 47px; border-top: 1px solid #626172; } .single_case_meta { display: flex; flex-wrap: wrap; } .single_case_meta .cat { font-size: 1.2rem; padding: 10px 12px; background: #B7282E; margin-right: 16px; margin-bottom: 8px; line-height: 1.2; border-radius: 5px; } .single_case_ttl { font-size: 4.5rem; font-weight: 500; line-height: 1.44; margin: 23px 0 63px; } .single_case_body { display: flex; justify-content: space-between; } .single_case_client { width: 20.40%; } .single_case_edit { width: 66.91%; } .single_case_client .ph { display: block; padding-bottom: 66.25%; margin-bottom: 13px; border-radius: 10px; overflow: hidden; position: relative; } .single_case_client .ph img { width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); object-fit: cover; } .single_case_client .name span { font-size: 1.3rem; } .single_case_edit h1, .single_case_edit h2, .single_case_edit h3, .single_case_edit h4, .single_case_edit h5, .single_case_edit h6 { font-size: 2.0rem; } .single_case_edit h1 + *, .single_case_edit h2 + *, .single_case_edit h3 + *, .single_case_edit h4 + *, .single_case_edit h5 + *, .single_case_edit h6 + * { margin-top: 25px; } .single_case_edit * + h1, .single_case_edit * + h2, .single_case_edit * + h3, .single_case_edit * + h4, .single_case_edit * + h5, .single_case_edit * + h6 { margin-top: 50px; } .single_case_edit > * + * { margin-top: 2em; } .single_case_edit ul { margin-left: 2em; } .single_case_edit ul li { font-size: 1.6rem; list-style: disc; } .single_case_edit ol { margin-left: 2em; } .single_case_edit ol li { font-size: 1.6rem; list-style: decimal; } .single_case_edit img { border-radius: 10px; } .single_news .edit figure { text-align: center; } .single_case_recommend_ttl { font-size: 2.0rem; padding-top: 81px; margin: 69px 0 50px; border-top: 1px solid #626172; } .single_case_recommend .case_item { min-width: 35.29%; padding-right: 5.88%; box-sizing: border-box; } .single_case_voice { border: 1px solid #626172; border-radius: 10px; margin-top: 80px; padding: 34px 7.69% 60px 5.49%; } .single_case_voice .ttl { font-size: 2.2rem; } .single_case_voice .body { display: flex; justify-content: space-between; margin-top: 33px; } .single_case_voice .body + .body { margin-top: 68px; } .single_case_voice .comment { font-size: 1.6rem; line-height: 2.0; width: 66.93%; } .single_case_voice .meta { width: 25.94%; } .single_case_voice .name { font-size: 1.3rem; line-height: 1.84; margin-top: 15px; } @media screen and (max-width: 1024px) { .single_case { min-width: auto; width: 86.66%; margin: 118px auto 0; padding-top: 47px; border-top: 1px solid #626172; } } @media screen and (max-width: 768px) { .single_case { min-width: auto; width: auto; margin: 90px auto 0; padding: 21px 6.66% 0; border-top: 1px solid #626172; overflow-x: hidden; } .single_case_meta .cat { font-size: 1.0rem; padding: 8px 10px; background: #B7282E; margin-right: 10px; line-height: 1.2; border-radius: 4px; } .single_case_ttl { font-size: 2.0rem; font-weight: 500; line-height: 1.44; margin: 13px 0 21px; } .single_case_body { display: block; justify-content: space-between; } .single_case_client { width: auto; } .single_case_client .name span { font-size: 1.1rem; line-height: 1.2; } .single_case_client .name span + span { border-left: 1px solid #fff; padding-left: 20px; margin-left: 20px; } .single_case_edit { width: auto; margin-top: 38px; } .single_case_client .ph { display: block; padding-bottom: 66.25%; margin-bottom: 21px; border-radius: 5px; overflow: hidden; position: relative; } .single_case_client .ph img { width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); object-fit: cover; } .single_case_edit h1, .single_case_edit h2, .single_case_edit h3, .single_case_edit h4, .single_case_edit h5, .single_case_edit h6 { font-size: 1.6rem; line-height: 1.5; } .single_case_edit h1 + *, .single_case_edit h2 + *, .single_case_edit h3 + *, .single_case_edit h4 + *, .single_case_edit h5 + *, .single_case_edit h6 + * { margin-top: 19px; } .single_case_edit * + h1, .single_case_edit * + h2, .single_case_edit * + h3, .single_case_edit * + h4, .single_case_edit * + h5, .single_case_edit * + h6 { margin-top: 40px; } .single_case_edit > * + * { margin-top: 2em; } .single_case_edit img { border-radius: 5px; } .single_case_edit ul li { font-size: 1.4rem; list-style: disc; } .single_case_edit ol li { font-size: 1.4rem; list-style: decimal; } .single_case_voice { border: 1px solid #626172; border-radius: 10px; margin-top: 80px; padding: 20px 7.69% 30px 5.49%; } .single_case_voice .ttl { font-size: 1.6rem; } .single_case_voice .body { display: block; margin-top: 20px; } .single_case_voice .body + .body { margin-top: 40px; } .single_case_voice .comment { font-size: 1.3rem; line-height: 2.0; width: auto; } .single_case_voice .meta { width: auto; margin-top: 20px; display: flex; justify-content: space-between; align-items: center; } .single_case_voice .ph { width: 25.94%; } .single_case_voice .name { width: 66.93%; font-size: 1.1rem; line-height: 1.84; margin-top: 0; } .single_case_recommend { width: 70% } } /*privacy*/ .page_privacy_body { width: 63.13%; margin: 162px auto 0; } .page_privacy_body section + section { margin-top: 72px; } .page_privacy_body h2 { font-size: 2.0rem; margin-bottom: 25px; line-height: 1.5; } .page_privacy_body .privacy_contact_ttl { font-size: 1.6rem; font-weight: 500; margin-bottom: 11px; line-height: 1.5; } .page_privacy_body .notes { font-size: 1.3rem; } .page_privacy_body p + p { margin-top: 2em; } .page_privacy_body p + .notes { margin-top: 0; } .page_privacy_body section ol > li { list-style-type: decimal; } .page_privacy_body section ul > li { list-style-type:disc; } .page_privacy_body section ol, .page_privacy_body section ul { font-size: 1.6rem; margin-left: 1.5em; line-height: 2; font-weight: 500; } .page_privacy_body section > ol > li { margin-bottom: 45px; } .page_privacy_body section > ol > li h3 { margin-bottom: 15px; font-weight: 500; } .page_privacy_body section > ol > li h4 { margin-top: 20px; font-weight: 500; } .page_privacy_body section table { width: 100%; font-size: 1.6rem; margin-top: 32px; } .page_privacy_body section table caption { text-align: left; font-size: 1.6rem; margin-bottom: 10px; } .page_privacy_body section table th, .page_privacy_body section table td { border: 1px solid #626172; } .page_privacy_body section table th { background: #494949; padding: 22px 18px; font-weight: 500; } .page_privacy_body section table td { padding: 18px;} .page_privacy_body section p + ol { margin-top: 1em; } .page_privacy_body section h4 + ul { margin-left: 3em; } .privacy_cookie_item > * + * { margin-top: 30px; } .privacy_cookie_item ul + p { margin-top: 10px; } .privacy_cookie_item { margin-left: 1.5em; } .privacy_contact_body { margin-left: 3em; } .txt_r { text-align: right; } .w33 { width: 33%; } .w22 { width: 22%; } @media screen and (max-width: 1024px) { .page_privacy_body { width: 86.66%; margin: 162px auto 0; } } @media screen and (max-width: 768px) { .page_privacy_body { width: 86.66%; margin: 22px auto 0; } .page_privacy_body section + section { margin-top: 69px; } .page_privacy_body h2 { font-size: 1.6rem; margin-bottom: 13px; line-height: 1.5; } .page_privacy_body .notes { font-size: 1.3rem; } .page_privacy_body p + p { margin-top: 2em; } .page_privacy_body p + .notes { margin-top: 0; } .page_privacy_body section ol > li { list-style-type: decimal; } .page_privacy_body section ul > li { list-style-type:disc; } .page_privacy_body section ol, .page_privacy_body section ul { font-size: 1.3rem; margin-left: 17px; line-height: 2; font-weight: 500; } .page_privacy_body section > ol > li { margin-bottom: 22px; } .page_privacy_body section > ol > li h3 { font-size: 1.3rem; margin-bottom: 7px; font-weight: 500; } .page_privacy_body section > ol > li h4 { margin-top: 10px; font-weight: 500; } .table-scroll { width: 100vw; padding: 0 7.69%; padding-left: calc(7.69% + 17px); margin-left: calc(-7.69% - 17px); overflow-x: scroll; box-sizing: border-box; } .privacy_cookie_item .table-scroll { padding-left: calc(7.69% + 42px); margin-left: calc(-7.69% - 42px); } .page_privacy_body section table { width: auto; font-size: 1.2rem; margin-top: 16px; } .page_privacy_body section .prv_tb01 { width: 834px; } .page_privacy_body section .prv_tb02 { width: 600px; } .page_privacy_body section table caption { text-align: left; font-size: 1.2rem; margin-bottom: 10px; } .page_privacy_body section table th, .page_privacy_body section table td { border: 1px solid #626172; } .page_privacy_body section table th { background: #494949; padding: 22px 18px; font-weight: 500; } .page_privacy_body section table td { padding: 18px;} .page_privacy_body section p + ol { margin-top: 1em; } .page_privacy_body section h4 + ul { margin-left: 3em; } .privacy_cookie_item > * + * { margin-top: 30px; } .privacy_cookie_item ul + p { margin-top: 10px; } .privacy_cookie_item { margin-left: 22px; } .privacy_contact_body { margin-left: 3em; } .txt_r { text-align: right; } .w33 { width: 33%; } .w22 { width: 22%; } } /*contact*/ .contact_wrapper { display: flex; justify-content: space-between; width: 67.28%; margin: 127px 0 0 18.43%; } .contact_head { width: 36.39%; } .thanks_head { width: 100%; } .contact_head .en { font-size: 3.0rem; color: #B7282E; } .contact_head .page_ttl { font-size: 5.5rem; font-weight: 500; line-height: 1.0; margin-bottom: 53px; } .contact_head .page_ttl_s { font-size: 3.0rem; font-weight: 500; line-height: 1.33; margin: 5px 0 35px; } .thanks_head .page_ttl_s { margin-bottom: 55px; } .contact_head p + p { margin-top: 2em; } .contact_help { margin-top: 88px; } .contact_help .hd { font-size: 1.6rem; line-height: 1.75; } .contact_help .detail { margin-top: 18px; padding: 24px 32px; border: 1px solid #999; border-radius: 10px; } .contact_help .ttl { font-size: 1.6rem; margin-bottom: 9px; } .contact_help .detail h3 { font-size: 1.6rem; margin-bottom: 9px; } .contact_help .detail p + h3 { margin-top: 25px; } .contact_help.sp { display: none; } .contact_body { width: 54.50%; margin-bottom: 55px; } .contact_body .ttl { font-size: 3.0rem; color: #B7282E; } .contact_item { width: 100%; font-size: 1.6rem; } .contact_item th, .contact_item td { padding: 30px 0 0; vertical-align: top; } .contact_item th { width: 160px; font-weight: 500; } .contact_item .notes { font-size: 1.4rem; } .privacy_notes { font-size: 1.2rem; margin-top: 15px; } .required { display: inline-block; position: relative; color: #B7282E; font-size: 2.0rem; font-weight: 700; } .contact_item .required { margin-left: 5px; } input { color: #333; } .input_txt, select.select { width: 100%; box-sizing: border-box; border: none; font-size: 1.6rem; padding: 12px 20px; color: #333; } select.select { padding: 11px 20px; } select.select * { color: #333; } textarea.message { width: 100%; height: 212px; box-sizing: border-box; border: none; font-size: 1.6rem; padding: 12px 20px; color: #333; } .input_txt::placeholder, textarea.message::placeholder { color: #999999; } .label_type .inq_type { display: flex; flex-wrap: wrap; } .label_type .inq_type .wpcf7-list-item { width: 100%; margin-bottom: 5px; } .check_privacy { font-size: 1.6rem; text-align: center; margin-top: 65px; } .btn_submit input { background: #B7282E; color: #fff; font-size: 2.0rem; font-weight: 500; text-align: center; width: 100%; padding: 30px 0; margin-top: 45px; border-radius: 5px; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.25); } .btn_submit input:disabled { background: #ccc; } .contact_privacy .formErrorContent { display: none!important; } .wpcf7-checkbox.acceptance .wpcf7-list-item-label { display: none!important; } .parentFormcontact-form { opacity: 1!important; left: 20px!important; } .wpcf7-list-item { margin-left: 0!important; } .grecaptcha-badge { visibility: hidden; } .notes_privacy { font-size: 1.2rem; color: #999; margin-top: 20px; margin-left: 160px; } .wpcf7-spinner { display: none!important; } .select-box { background: #fff; position: relative; z-index: 1; } .select-box::after { position: absolute; display: block; content: ""; width: 8px; height: 8px; right: 15px; top: 50%; transform: translateY(-50%) rotate(45deg); border-bottom: 2px solid #333; border-right: 2px solid #333; z-index: -1; } @media screen and (max-width: 1250px) { .contact_wrapper { display: flex; justify-content: space-between; width: 86.66%; margin: 127px auto 0; } } @media screen and (max-width: 1024px) { .contact_wrapper { display: block; justify-content: space-between; width: 86.66%; margin: 127px auto 0; } .contact_head { width: auto; } .contact_body { width: auto; margin-bottom: 55px; margin-top: 50px; } .contact_help.pc { display: none; } .contact_help.sp { display: block; } } @media screen and (max-width: 768px) { .contact_wrapper { display: block; justify-content: space-between; width: 86.66%; margin: 70px auto 0; } .contact_head .en { font-size: 1.6rem; color: #B7282E; } .contact_head .page_ttl { font-size: 2.5rem; line-height: 1.5; margin-bottom: 22px; } .contact_head .page_ttl_s { font-size: 1.8rem; line-height: 1.5; margin: 0 0 22px; } .contact_help { margin-top: 20px; } .contact_help .hd { font-size: 1.3rem; line-height: 1.75; } .contact_help .detail { margin-top: 18px; padding: 22px; border: 1px solid #999; border-radius: 10px; } .contact_help .detail h3 { font-size: 1.3rem; margin-bottom: 9px; } .contact_body { width: auto; margin-bottom: 55px; margin-top: 0; } .contact_body .ttl { font-size: 1.5rem; margin-bottom: 10px; } .contact_item { font-size: 1.3rem; margin-top: 25px; } .contact_item, .contact_item thead, .contact_item tbody, .contact_item tr, .contact_item th, .contact_item td { display: block; width: 100%; } .contact_item th, .contact_item td { padding: 8px 0 0; vertical-align: top; } .contact_item th { width: auto; border: none; padding: 20px 0 0; } .contact_item .notes { font-size: 1.0rem; margin-left: 9px; } .privacy_notes { font-size: 1.2rem; margin-top: 15px; } .required { font-size: 1.6rem; font-weight: 700; display: inline-block; position: relative; color: #B7282E; } .contact_item .required { margin-left: 5px; } .input_txt { width: 100%; box-sizing: border-box; border: none; font-size: 1.4rem; } textarea.message { width: 100%; height: 180px; box-sizing: border-box; border: none; font-size: 1.4rem; } select.select { width: 100%; border: none; font-size: 1.4rem; } .label_type label { max-width: none; width: 100%; margin-bottom: 10px; } .label_type .wpcf7-list-item { display: block; } .check_privacy { font-size: 1.4rem; text-align: left; margin-top: 49px; } .btn_submit input { background: #B7282E; color: #fff; font-size: 1.6rem; font-weight: 500; text-align: center; width: 100%; padding: 30px 0; margin-top: 39px; border-radius: 5px; } .btn_submit input:disabled { background: #ccc; } .contact_privacy .formErrorContent { display: none!important; } .notes_privacy { font-size: 1.1rem; color: #999; margin: 20px 0 50px; } .select-box { border-radius: 3px; } } /*thanks*/ .thanks_body { margin-top: 133px; } .thanks_txt { text-align: center; } body.thanks .contents_footer_illust, body.error404 .contents_footer_illust { margin-top: 100px;} @media screen and (max-width: 768px) { body.thanks .common_page_ttl { display: none; } .thanks_body { margin: 80px auto 0; width: 81.53%; } .thanks_txt { text-align: left; } body.thanks .contents_footer_illust, body.error404 .contents_footer_illust { margin-top: 73px;} } /*form*/ .wpcf7-not-valid-tip { display: none!important; } .formError .formErrorContent { font-size: 1.4rem!important; margin-top: 5px; } .wpcf7 form.sent .wpcf7-response-output, .wpcf7 form.failed .wpcf7-response-output, .wpcf7 form.aborted .wpcf7-response-output, .wpcf7 form.spam .wpcf7-response-output, .wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.init .wpcf7-response-output, .wpcf7 form.resetting .wpcf7-response-output, .wpcf7 form.submitting .wpcf7-response-output { display: none!important; } .error-message .undefinedformError { display: none!important; } .error-message .parentFormcontact-form .formErrorContent { border-radius: 5px!important; } /*link*/ .news_single_body .edit a, *.link_txt { text-decoration: underline!important; } @media screen and (min-width: 900px) { .news_single_body .edit a:hover, *.link_txt:hover { text-decoration: none!important; } .service_menu a:not(.here) span { -webkit-transition: opacity 0.3s cubic-bezier(0.19, 1, 0.22, 1); transition: opacity 0.3s cubic-bezier(0.19, 1, 0.22, 1);} .service_menu a:not(.here):hover span { opacity: 0.6; } .global_nav_list a, .main_nav > li > a, .lang_nav a, .link_privacy a, .footer_nav_listitem a { -webkit-transition: color 0.5s cubic-bezier(0.36, 0.14, 0, 1); transition: color 0.5s cubic-bezier(0.36, 0.14, 0, 1); } .global_nav_list a:hover, .main_nav > li > a:hover, .lang_nav a:hover, .link_privacy a:hover { color: #B3B3B3; } .footer_nav_listitem a:hover { color: #B3B3B3; } .btn_contanct .font_en, .btn_contanct .ja .txt { -webkit-transition: color 0.5s cubic-bezier(0.36, 0.14, 0, 1); transition: color 0.5s cubic-bezier(0.36, 0.14, 0, 1); } .btn_contanct:hover .font_en, .btn_contanct:hover .ja .txt { color: #B7282E; } .btn_contanct .circle, .anime_btn .circle { -webkit-transition: transform 0.5s cubic-bezier(0.36, 0.14, 0, 1); transition: transform 0.5s cubic-bezier(0.36, 0.14, 0, 1); } .btn_contanct:hover .circle, .anime_btn:hover .circle { -webkit-transform: scale(1.05) translate(-50%, -50%); transform: scale(1.4); } .case_item > a .ph img, .news_item .ph img { -webkit-transition: transform 1.0s cubic-bezier(.16,1,.3,1); transition: transform 1.0s cubic-bezier(.16,1,.3,1); -webkit-transform-origin: left top; transform-origin: left top; } .case_item > a:hover .ph img, .news_item:hover .ph img { -webkit-transform: scale(1.07) translate(-50%, -50%); transform: scale(1.07) translate(-50%, -50%); } .link_more a .txt { -webkit-transition: padding 0.5s cubic-bezier(0.36, 0.14, 0, 1); transition: padding 0.5s cubic-bezier(0.36, 0.14, 0, 1); } .link_more a .ico_arrow { -webkit-transition: opacity 0.5s cubic-bezier(0.36, 0.14, 0, 1); transition: opacity 0.5s cubic-bezier(0.36, 0.14, 0, 1); } .link_more a:hover .txt { padding-right: 16px; } .link_more a:hover .ico_arrow { opacity: 1; } .link_more > a, .recruit_interview_body .item .link_more > span, .top_service_item .link_more > span, .btn_wide a { -webkit-transition: all 0.5s cubic-bezier(0.36, 0.14, 0, 1); transition: all 0.5s cubic-bezier(0.36, 0.14, 0, 1); } .link_more > a:hover, .recruit_interview_body .item:hover .link_more > span, .top_service_item:hover .link_more > span, .btn_wide a:hover { background: #fff; color: #B7282E; } .page_head .btn a { -webkit-transition: opacity 0.5s cubic-bezier(0.36, 0.14, 0, 1); transition: opacity 0.5s cubic-bezier(0.36, 0.14, 0, 1); } .page_head .btn a:hover { opacity: 0.7; } .top_service_item .ph ._cover { display: block; padding-bottom: 66.66%; -webkit-clip-path: inset(0); clip-path: inset(0); transition: clip-path .8s cubic-bezier(.16,1,.3,1); transition: clip-path .8s cubic-bezier(.16,1,.3,1), -webkit-clip-path .8s cubic-bezier(.16,1,.3,1); } .top_service_item .ph ._cover img { position: absolute; top: 0; left: 0; transition: all .8s cubic-bezier(.16,1,.3,1); } .top_service_item:hover .ph ._cover { -webkit-clip-path: inset(3%);clip-path: inset(3%); overflow: hidden; } .top_service_item:hover .ph ._cover img { position: absolute; top: 0; left: 0; transform: scale(1.05) rotate(.1deg); } .btn_humberger_box:hover .btn_humberger .line { height: 13px; } .btn_contanct:hover .arrow .arrow_nm { opacity: 0; left: 10px; -webkit-transition: all 0.5s cubic-bezier(.16,1,.3,1); transition: all 0.5s cubic-bezier(.16,1,.3,1); } .btn_contanct:hover .arrow .arrow_ov { opacity: 1; left: 0; -webkit-transition: all 0.5s cubic-bezier(.16,1,.3,1) 0.3s; transition: all 0.5s cubic-bezier(.16,1,.3,1) 0.3s; } .contanct_nav:hover .txt { padding-right: 16px; } .contanct_nav:hover .ico_arrow { opacity: 1; } .top_service_catitem:hover { background: #FCE3E4; } .top_service_catitem:hover .btn .txt { padding-right: 16px; } .top_service_catitem:hover .btn .ico_arrow { opacity: 1; } .anime_btn:hover .arrow .arrow_nm { opacity: 0; left: 10px; -webkit-transition: all 0.5s cubic-bezier(.16,1,.3,1); transition: all 0.5s cubic-bezier(.16,1,.3,1); } .anime_btn:hover .arrow .arrow_ov { opacity: 1; left: 0; -webkit-transition: all 0.5s cubic-bezier(.16,1,.3,1) 0.3s; transition: all 0.5s cubic-bezier(.16,1,.3,1) 0.3s; } .top_note > .inner:before { -webkit-transition: transform 0.7s cubic-bezier(0.36, 0.14, 0, 1); transition: transform 0.7s cubic-bezier(0.36, 0.14, 0, 1); } .top_note > .inner:hover:before { -webkit-transform: rotate(9.52deg); transform: rotate(9.52deg); } .top_service_listitem .img, .service_search_item {-webkit-transition: all 0.7s cubic-bezier(0.36, 0.14, 0, 1); transition: all 0.7s cubic-bezier(0.36, 0.14, 0, 1); } .top_service_listitem:hover .img, .service_search_item:hover { box-shadow: 0 6px 6px 0 rgba(0, 0, 0, 0.4); -webkit-transform: translateY(-6px); transform: translateY(-6px); } }