html{ -webkit-text-size-adjust:none; margin:0 auto; padding:0;} body{ margin:0;} .clear{ clear:both; height:0;} .center{ text-align:center;} img{ border:0; vertical-align:bottom; max-width: 100%;} ul{ margin:0; padding:0; list-style:none;} p{ margin:0;} /*--------------------------------------------- CONTAINER ---------------------------------------------*/ #container{ font-family: 'Noto Sans JP', sans-serif; color: #1A1A1A; width: 100%; overflow: hidden; padding-bottom: 100px; min-width: 980px;} #container p{ line-height: 2.2;} /*-- mainBox --*/ #container .mainBox{ background: linear-gradient(-60deg, #97dee7, #3fbf93); padding: 80px 0 260px; position: relative;} #container .mainBox::before{ content: ""; display: block; position: absolute; bottom: -1px; height: calc(100% - 540px); width: calc(50% + 410px); background: #fff; } #container .mainBox .innerMainBox{ position: relative; z-index: 2; margin-bottom: 40px;} #container .mainBox h1{ font-weight: 900; margin: 0 auto; width: 540px; position: absolute; top: 80px; left: calc(50% - 610px); z-index: 2;} #container .mainBox h1 .ja{ display: block; line-height: 1; margin-bottom: 40px; font-size: 28px;} #container .mainBox h1 .en{ display: block; line-height: 1;} #container .mainBox .mainImg{ width: calc(50% + 200px); margin: 0 0 0 auto; height: auto; position: relative; z-index: 1;} #container .mainBox .mainImg img.pc{ display: block; width: 100%;} #container .mainBox .attention{ text-align: center; background: #fff; border: 1px solid #1a1a1a; box-sizing: border-box; width: 1220px; margin: 0 auto; line-height: 1; padding: 20px 0; font-weight: 500; position: relative; font-size: 16px;} /*-- lifestyleBox --*/ #container .lifestyleBox{ position: relative; margin: -140px auto 200px; padding-top: 250px;} #container .lifestyleBox h2{ text-align: center; line-height: 1.75; font-size: 40px; margin: 0 auto; position: relative; z-index: 2; letter-spacing: 0.1em;} #container .lifestyleBox .iuty{ position: absolute; top: 0; right: calc(50% - 115px); width: 863px;} #container .bgBlueBox{ margin-top: -100px;} #container .bgBlueBox .bgBlueInner{ background: #ebf8f4; position: relative;} #container .bgBlueBox .bgBlueInner:first-child{ padding-top: 170px;} #container .bgBlueBox .bgBlueInner::after{ content: ""; display: block; background: #fff; height: 100%; width: calc(50% - 570px); position: absolute; top: 0; } #container .bgBlueBox .bgBlueInner:nth-child(odd)::after{ left: calc(50% + 570px);} #container .bgBlueBox .bgBlueInner:nth-child(even)::after{ right: calc(50% + 570px);} #container .bgBlueBox .lead{ width: 980px; margin: 0 auto 160px; font-weight: 300; font-size: 22px; text-align: center; line-height: 2.5;} #container .bgBlueBox .bgBlueInner .lifestyleSec{ width: 980px; margin: 0 auto; position: relative; padding-bottom: 80px;} #container .bgBlueBox .bgBlueInner .lifestyleSec.section01{ padding-top: 100px;} #container .bgBlueBox .bgBlueInner .lifestyleSec.section02{ padding-top: 120px; padding-bottom: 550px;} /*#container .bgBlueBox .bgBlueInner .lifestyleSec.section03{ padding-top: 120px; padding-bottom: 550px;}*/ #container .bgBlueBox .bgBlueInner .lifestyleSec::before{ content: ""; display: block; position: absolute; top: 0;} #container .bgBlueBox .bgBlueInner .lifestyleSec.section01::before{ background: url("../img/ilu-lifestyle01.svg") no-repeat 0 0; background-size: 100%; width: 210px; height: 210px; right: calc(50% + 87px);} #container .bgBlueBox .bgBlueInner .lifestyleSec.section02::before{ background: url("../img/ilu-lifestyle02.svg") no-repeat 0 0; background-size: 100%; width: 172px; height: 216px; left: calc(50% + 130px);} #container .bgBlueBox .bgBlueInner .lifestyleSec.section03::before{ background: url("../img/ilu-lifestyle03.svg") no-repeat 0 0; background-size: 100%; width: 207px; height: 216px; right: calc(50% + 86px);} #container .bgBlueBox .bgBlueInner .lifestyleSec h3{ height: 170px; width: 590px; color: #fff; font-size: 32px; font-weight: 900; text-align: center; box-sizing: border-box; line-height: 1.7; position: relative; z-index: 2; letter-spacing: 0.1em;} #container .bgBlueBox .bgBlueInner:nth-child(odd) .lifestyleSec h3{ background: url("../img/balloon-l-pc.svg") no-repeat 0 0; padding: 30px 60px 30px 100px; margin: 0 auto 0 calc(50% - 100px); } #container .bgBlueBox .bgBlueInner:nth-child(even) .lifestyleSec h3{ background: url("../img/balloon-r-pc.svg") no-repeat 0 0; padding: 30px 100px 30px 60px; margin: 0 calc(50% - 100px) 0 auto; text-align: center; } #container .bgBlueBox .bgBlueInner .lifestyleSec .innerLifestyleSec{ margin-top: -40px; display: flex; justify-content: space-between; } #container .bgBlueBox .bgBlueInner:nth-child(odd) .lifestyleSec .innerLifestyleSec{ flex-direction: row; } #container .bgBlueBox .bgBlueInner:nth-child(even) .lifestyleSec .innerLifestyleSec{ flex-direction: row-reverse; } #container .bgBlueBox .bgBlueInner .lifestyleSec .innerLifestyleSec .img{ width: 490px;} #container .bgBlueBox .bgBlueInner .lifestyleSec .innerLifestyleSec .img img{ width: 100%; display: block; max-width: 100%;} #container .bgBlueBox .bgBlueInner .lifestyleSec .innerLifestyleSec .textBox{ width: 370px; padding-top: 160px;} #container .bgBlueBox .bgBlueInner:nth-child(odd) .lifestyleSec .innerLifestyleSec .textBox{ padding-right: 60px;} #container .bgBlueBox .bgBlueInner:nth-child(even) .lifestyleSec .innerLifestyleSec .textBox{ padding-left: 60px;} #container .bgBlueBox .bgBlueInner .lifestyleSec .innerLifestyleSec .textBox h4{ font-size: 28px; font-weight: 900; line-height: 1.8; margin: 0 auto 30px; letter-spacing: 0.01em;} #container .bgBlueBox .bgBlueInner .lifestyleSec .innerLifestyleSec .textBox .text{ font-size: 18px; font-weight: 300;} #container .bgBlueBox .bgBlueInner .lifestyleSec .formBtn{ margin: 100px auto 0; width: 500px; text-align: center;} #container .bgBlueBox .bgBlueInner .lifestyleSec .formBtn a{ background: #1A1A1A; height: 100px; display: flex; flex-wrap: wrap; flex-direction: column; justify-content: center; text-decoration: none; color: #fff; font-weight: 900; font-size: 28px; letter-spacing: 0.01em; padding: 0 40px; min-width: 280px; box-sizing: border-box; width: auto;} #container .bgBlueBox .bgBlueInner .lifestyleSec .formBtn a > span{ position: relative; display: inline-block; padding-right: 30px; line-height: 1; width: auto;} #container .bgBlueBox .bgBlueInner .lifestyleSec .formBtn a > span::after{ content: ""; display: block; height: 14px; width: 14px; border-top: 4px solid #fff; border-right: 4px solid #fff; position: absolute; top: calc(50% - 7px); right: 5px; transform: rotate(45deg); transition: all 0.5s;} #container .bgBlueBox .bgBlueInner .lifestyleSec .formBtn a:hover > span::after{ right: 0;} #container .bgBlueBox .bgBlueInner .lifestyleSec .small{ font-size: 14px; display: block; margin: 10px auto 0;} #container .flowBox{ position: relative; margin-top: -350px; padding: 80px 0; box-sizing: border-box;} #container .flowBox::before{ content: ""; display: block; background: url("../img/arrow-flow.svg") no-repeat 0 0; background-size: 100%; width: 210px; height: 310px; position: absolute; top: -140px; right: calc(50% + 280px); z-index: 2;} #container .flowBox::after{ content: ""; background: linear-gradient(-60deg, #97dee7, #3fbf93); height: 100%; width: calc(50% + 570px); position: absolute; top: 0; left: 0; z-index: 1;} #container .flowBox h3{ margin: 0 auto 80px; line-height: 1; letter-spacing: 0.01em; font-size: 32px; width: 980px; box-sizing: border-box; padding-left: 20px; color: #fff; position: relative; z-index: 3;} #container .flowBox .flowList{ width: 980px; margin: 0 auto; position: relative; z-index: 2;} #container .flowBox .flowList li{ background: #fff; margin-bottom: 40px; box-sizing: border-box; padding: 40px 40px 35px 45px; display: flex; justify-content: space-between; flex-wrap: wrap; width: 100%; position: relative;} #container .flowBox .flowList li::after{ content: ""; display: block; width: 0; height: 0; border-style: solid; border-width: 20px 20px 0 20px; border-color: #ffffff transparent transparent transparent; position: absolute; bottom: -18px; left: 85px;} #container .flowBox .flowList li:last-of-type{ margin-bottom: 0;} #container .flowBox .flowList li:last-of-type::after{ border-color: transparent;} #container .flowBox .flowList li .num{ width: 121px; } #container .flowBox .flowList li .textBox{ width: 730px;} #container .flowBox .flowList li .textBox h4{ margin: 0 auto 20px; font-weight: 900; font-size: 28px; line-height: 1; letter-spacing: 0.005em;} #container .flowBox .flowList li .textBox .text{ font-size: 18px; font-weight: 300; line-height: 2.2; } /*-- industryBox --*/ #container .industryBox{ position: relative; padding-top: 250px;} #container .industryBox h2{ text-align: center; line-height: 1.75; font-size: 40px; margin: 0 auto; position: relative; z-index: 2; letter-spacing: 0.1em;} #container .industryBox .myl{ position: absolute; top: 0; right: calc(50% - 697px); width: 1395px; z-index: 2;} #container .industryList{ background: #ebf8f4; padding: 180px 0 500px; margin-top: -35px;} #container .industryList::before{ content: ""; display: block; background: #fff; height: 100%; width: calc(50% - 570px); position: absolute; top: 0; right: calc(50% + 570px);} #container .industryList li{ position: relative; z-index: 2; width: 980px; margin: 0 auto 40px;} #container .industryList li:last-of-type{ margin-bottom: 0;} #container .industryList li h3{ background: linear-gradient(to bottom, #97dee7, #3fbf93); margin: 0 auto; box-sizing: border-box; padding-left: 20px; position: relative; cursor: pointer;} #container .industryList li h3::before{ content: ""; display: block; width: 40px; height: 40px; position: absolute; top: calc( 50% - 20px); right: 40px; background: linear-gradient(-60deg, #97dee7, #3fbf93); z-index: 2;} #container .industryList li h3::after{ content: ""; display: block; width: 40px; height: 40px; position: absolute; z-index: 2; top: calc( 50% - 20px); right: 40px; background: url("../img/arrow-accordion.svg") no-repeat 0 0; background-size: 100%; transition: all 0.6s; transform: rotate(180deg);} #container .industryList li h3.active::after{ transform: rotate(0deg);} #container .industryList li h3 .innerTtl{ display: flex; position: relative;} #container .industryList li h3 .img{ width: 150px; } #container .industryList li h3 .img img{ display: block; width: 100%;} #container .industryList li h3 .text{ width: 810px; background: #fff; display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; padding-left: 40px; font-size: 24px; font-weight: 900;} #container .industryList li h3 .text .small{ font-weight: 500; font-size: 16px;} #container .industryList li .industryDetailBox{ background: linear-gradient( -30deg, #97dee7, #3fbf93); box-sizing: border-box; padding: 0 0 20px 170px; display: none;} #container .industryList li .industryDetailInner{ background: #fff; box-sizing: border-box; padding: 0 40px 40px;} #container .industryList li .industryDetailInner .detailMain{ display: flex; padding-top: 40px; border-top: 1px solid #E6E6E6; justify-content: space-between; margin: 0 auto 40px;} #container .industryList li .industryDetailInner .detailMain .textBox{ width: 320px;} #container .industryList li .industryDetailInner .detailMain .textBox .innerTextBox{ margin-top: 40px;} #container .industryList li .industryDetailInner .detailMain .textBox .innerTextBox:first-child{ margin-top: 0;} #container .industryList li .industryDetailInner .detailMain h4{ font-size: 18px; font-weight: bold; margin: 0 auto 15px;} #container .industryList li .industryDetailInner .detailMain h4 .small{ font-size: 14px; font-weight: normal; } #container .industryList li .industryDetailInner .detailMain .text{ font-size: 16px; line-height: 2.2; font-weight: 300; width: 320px;} #container .industryList li .industryDetailInner .detailMain .img{ width: 370px;} #container .industryList li .industryDetailInner .detailMain .img img{ width: 100%; display: block;} #container .industryList li .industryDetailInner .tableBox{ margin-bottom: 40px;} #container .industryList li .industryDetailInner .tableBox:last-child{ margin-bottom: 0;} #container .industryList li .industryDetailInner .detailTable01{ width: 100%; border-bottom: 1px solid #E6E6E6;} #container .industryList li .industryDetailInner .detailTable01 th, #container .industryList li .industryDetailInner .detailTable01 td{ padding: 25px 20px; box-sizing: border-box; border-top: 1px solid #E6E6E6; font-size: 16px; line-height: 2; vertical-align: top; text-align: left;} #container .industryList li .industryDetailInner .detailTable01 th{ width: 210px; background: #ebf8f4; font-weight: 500; border-right: 1px solid #E6E6E6; } #container .industryList li .industryDetailInner .detailTable01 td{ font-weight: 300;} #container .industryList li .industryDetailInner .detailTable02{ width: 100%; border-bottom: 1px solid #E6E6E6;} #container .industryList li .industryDetailInner .detailTable02 th, #container .industryList li .industryDetailInner .detailTable02 td{ padding: 25px 20px; box-sizing: border-box; border-top: 1px solid #E6E6E6; font-size: 16px; line-height: 2; vertical-align: top; text-align: left; border-right: 1px solid #E6E6E6;} #container .industryList li .industryDetailInner .detailTable02 th:last-child, #container .industryList li .industryDetailInner .detailTable02 td:last-child{ border-right: none;} #container .industryList li .industryDetailInner .detailTable02 th.type01{ background: #b2e5d4; font-weight: 500;} #container .industryList li .industryDetailInner .detailTable02 th.type02{ background: #ebf8f4; width: 210px; font-weight: 500;} #container .industryList li .industryDetailInner .detailTable02 td{ font-weight: 300;} #container .industryList li .industryDetailInner .detailTable01 th .small, #container .industryList li .industryDetailInner .detailTable02 th .small, #container .industryList li .industryDetailInner .detailTable01 td .small, #container .industryList li .industryDetailInner .detailTable02 td .small{ font-size: 14px;} #container .industryList li .industryDetailInner h4{ margin: 0 auto 20px; font-size: 16px; font-weight: 500;} #container .otherBox{ margin-top: -300px; position: relative; padding-top: 80px;} #container .otherBox::after{ content: ""; display: block; background: #fff; height: 100%; width: calc(50% + 570px); position: absolute; top: 0; left: 0; z-index: 1;} #container .otherBox .wrapOther{ position: relative; z-index: 2; width: 980px; margin: 0 auto;} #container .otherBox .innerOther{ margin: 0 auto 80px;} #container .otherBox .innerOther:last-child{ margin-bottom: 0;} #container .otherBox .innerOther h3{ margin: 0 auto 30px; padding-bottom: 25px; line-height: 1.6; font-weight: 900; font-size: 28px; border-bottom: 1px solid #E6E6E6;} #container .otherBox .innerOther.hourlyPay h3{ margin-bottom: 25px; border-bottom: none; padding-bottom: 0;} #container .otherBox .innerOther p, #container .otherBox .innerOther ul{ font-size: 16px; line-height: 2; font-weight: 300;} #container .otherBox .innerOther p.caution{ line-height: 1.8;} #container .otherBox .innerOther ul li{ margin-bottom: 5px; text-indent: -2em; padding-left: 2em; box-sizing: border-box;} #container .otherBox .innerOther ul li::before{ content: "\25A0\3000";} #container .otherBox .innerOther ul li:last-child{ margin-bottom: 0;} #container .otherBox .swipeIcon{ display: none;} #container .otherBox .innerScroll{ margin-bottom: 30px;} #container .otherBox h3{ margin: 0 auto 25px;line-height: 1.6; font-weight: 900; font-size: 28px;} #container .otherBox table{ width: 100%; border-bottom: 1px solid #E6E6E6;} #container .otherBox table th, #container .otherBox table td{ padding: 25px 20px; box-sizing: border-box; border-top: 1px solid #E6E6E6; font-size: 16px; line-height: 2; vertical-align: top; text-align: left; border-right: 1px solid #E6E6E6;} #container .otherBox table td.brNone, #container .otherBox table th:last-child{ border-right: none;} #container .otherBox table th.type01{ background: #b2e5d4; font-weight: 500;} #container .otherBox table th.type02{ background: #ebf8f4; font-weight: 500;} #container .otherBox table td{ font-weight: 300;} #container .otherBox table td.gray{ background: #F5F5F5;} #container .otherBox table .w320{ width: 320px !important;} #container .otherBox table tbody th:first-child{ width: 270px;} /*-- ページトップ --*/ #page-top{ display:none; position:fixed; right: 20px; bottom: 22px; z-index:200; } #page-top .totopInner{ display: flex;} #page-top .totopInner .form a{ height: 100px; display: flex; flex-direction: column; justify-content: center; background: #1A1A1A; text-decoration: none; color: #fff; font-weight: 900; font-size: 28px; letter-spacing: 0.01em; padding: 0 40px;} #page-top .totopInner .form a span{ position: relative; display: inline-block; padding-right: 30px; line-height: 1;} #page-top .totopInner .form a span::after{ content: ""; display: block; height: 14px; width: 14px; border-top: 4px solid #fff; border-right: 4px solid #fff; position: absolute; top: calc(50% - 7px); right: 5px; transform: rotate(45deg); transition: all 0.5s;} #page-top .totopInner .form a:hover span::after{ right: 0;} #page-top .totopInner .totop{ margin:0; padding:0; width: 100px; height: 100px;} #page-top .totopInner .totop a{ display: block; background: linear-gradient( -30deg, #97dee7, #3fbf93,#3fbf93,#97dee7); background-size: 200%; background-position: bottom right; transition: all 0.5s;} #page-top .totopInner .totop a:hover{ background-position: top left; } #page-top .totopInner .totop img{ width: 100%;} #move-page-top{ text-decoration:none; cursor:pointer; transition: opacity 0.5s;} p.note{ font-size:12px; line-height:140%; margin:40px auto 0; padding:0 0 10px; width:980px;} .fs80{ font-size: 80%;} @media screen and (min-width:751px) { /*-- other --*/ .sp{ display: none;} } /*========================================================================================================== SP ==========================================================================================================*/ @media screen and (max-width:750px) { html{ -webkit-text-size-adjust:none; margin:0 auto; padding:0;} body{ margin:0;} .clear{ clear:both; height:0;} .center{ text-align:center;} img{ border:0; vertical-align:bottom;} ul{ margin:0; padding:0; list-style:none;} p{ margin:0; } /*--------------------------------------------- CONTAINER ---------------------------------------------*/ #container{ font-family: 'Noto Sans JP', sans-serif; color: #1A1A1A; width: 100%; overflow: hidden; padding-bottom: 20vw; min-width: 0;} #container p{ line-height: 2.2;} /*-- mainBox --*/ #container .mainBox{ background: linear-gradient(-60deg, #97dee7, #3fbf93); padding: 16.21621621621621vw 0 14.864864864864864vw; position: relative; margin-bottom: 16.21621621621621621621vw;} #container .mainBox::before{ content: ""; display: block; position: absolute; bottom: -1px; height: 51.35135135135135vw; width: 70vw; background: #fff; } #container .mainBox .innerMainBox{ position: relative; z-index: 2; margin-bottom: 8.1081081081081081vw;} #container .mainBox h1{ font-weight: 900; margin: 0 auto 0 5vw; width: 73vw; position: relative; top: auto; left: auto; z-index: 2;} #container .mainBox h1 .ja{ display: block; line-height: 1; margin-bottom: 8.1081081081081081vw; font-size: 5.4054054054054054054054vw;} #container .mainBox h1 .en{ display: block; line-height: 1;} #container .mainBox .mainImg{ width: 85vw; margin: -4vw 0 0 auto; height: 80vw; position: relative; z-index: 1;} #container .mainBox .mainImg img.sp{ display: block; width: 100%; height: 100%; object-fit: cover; font-family: 'object-fit: cover;';} #container .mainBox .attention{ text-align: center; background: #fff; border: 1px solid #1a1a1a; box-sizing: border-box; width: 90vw; margin: 0 auto; line-height: 1; padding: 4.054054054054054vw 0; font-weight: 500; position: relative; font-size: 3.2432432432432432vw;} /*-- lifestyleBox --*/ #container .lifestyleBox{ position: relative; margin: 0 auto 27.027027027027vw; padding-top: 28vw;} #container .lifestyleBox h2{ text-align: center; line-height: 1.75; font-size: 5.4054054054054054054054vw; margin: 0 auto; position: relative; z-index: 2; letter-spacing: 0.1em;} #container .lifestyleBox .iuty{ position: absolute; top: 0; right: 6vw; width: 88vw;} #container .bgBlueBox{ margin-top: -14vw;} #container .bgBlueBox .bgBlueInner{ position: relative; background: none;} #container .bgBlueBox .bgBlueInner:first-child{ padding-top: 21.081081081081081vw;} #container .bgBlueBox .bgBlueInner::after{ content: ""; display: block; background: #ebf8f4; height: 100%; width: 90vw; position: absolute; top: 0; } #container .bgBlueBox .bgBlueInner:nth-child(odd)::after{ left: 0} #container .bgBlueBox .bgBlueInner:nth-child(even)::after{ right: 0;} #container .bgBlueBox .lead{ width: 90vw; margin: 0 auto 18.91891891891891891vw; font-weight: 400; font-size: 3.5135135135135135135vw; text-align: center; line-height: 2.5; position: relative; z-index: 2;} #container .bgBlueBox .bgBlueInner .lifestyleSec{ width: 85vw; margin: 0 auto; position: relative; padding-bottom: 5vw;} #container .bgBlueBox .bgBlueInner .lifestyleSec.section01{ padding-top: 0; margin: 0 auto 0 10vw;} #container .bgBlueBox .bgBlueInner .lifestyleSec.section02{ padding-top: 10vw; margin: 0 10vw 0 auto; padding-bottom: 95.9459459459459459vw;} /*#container .bgBlueBox .bgBlueInner .lifestyleSec.section03{ padding-top: 10vw; margin: 0 auto 0 10vw;}*/ #container .bgBlueBox .bgBlueInner .lifestyleSec::before{ content: ""; display: block; position: absolute; z-index: 3;} #container .bgBlueBox .bgBlueInner .lifestyleSec.section01::before{ background: url("../img/ilu-lifestyle01.svg") no-repeat 0 0; background-size: 100%; width: 27.972972972972972vw; height: 27.972972972972972vw; right: 16.89189189189189vw; top: 27.027027027027vw;} #container .bgBlueBox .bgBlueInner .lifestyleSec.section02::before{ background: url("../img/ilu-lifestyle02.svg") no-repeat 0 0; background-size: 100%; width: 23.378378378378vw; height: 29.189189189189vw; left: 17.432432432432vw; top: 37.027027027027vw;} #container .bgBlueBox .bgBlueInner .lifestyleSec.section03::before{ background: url("../img/ilu-lifestyle03.svg") no-repeat 0 0; background-size: 100%; width: 27.972972972972972vw; height: 29.189189189189189vw; right: 22.027027027027vw; top: 37.027027027027vw;} #container .bgBlueBox .bgBlueInner .lifestyleSec h3{ height: 29vw; width: 75vw; color: #fff; font-size: 4.32432432432432432vw; font-weight: 900; text-align: center; box-sizing: border-box; line-height: 1.7; position: relative; z-index: 2; letter-spacing: 0.1em;} #container .bgBlueBox .bgBlueInner:nth-child(odd) .lifestyleSec h3{ background: url("../img/balloon-r-sp.svg") no-repeat 0 0; background-size: 100%; padding: 4vw 0 0; margin: 0 0 21.35135135135135135vw auto; } #container .bgBlueBox .bgBlueInner:nth-child(even) .lifestyleSec h3{ background: url("../img/balloon-l-sp.svg") no-repeat 0 0; background-size: 100%; padding: 4vw 0 0; margin: 0 auto 21.35135135135135135vw 0; text-align: center; } #container .bgBlueBox .bgBlueInner .lifestyleSec .innerLifestyleSec{ width: 70vw; display: block; position: relative; z-index: 2;} #container .bgBlueBox .bgBlueInner .lifestyleSec.section01 .innerLifestyleSec, #container .bgBlueBox .bgBlueInner .lifestyleSec.section03 .innerLifestyleSec{ margin: 0 auto 0 0; } #container .bgBlueBox .bgBlueInner .lifestyleSec.section02 .innerLifestyleSec{ margin: 0 0 0 auto; } #container .bgBlueBox .bgBlueInner .lifestyleSec .innerLifestyleSec .img{ width: 100%; margin: 0 auto 7.2972972972972972vw;} #container .bgBlueBox .bgBlueInner .lifestyleSec .innerLifestyleSec .img img{ width: 100%; display: block; max-width: 100%;} #container .bgBlueBox .bgBlueInner .lifestyleSec .innerLifestyleSec .textBox{ width: 100%; padding-top: 0;} #container .bgBlueBox .bgBlueInner:nth-child(odd) .lifestyleSec .innerLifestyleSec .textBox{ padding-right: 0;} #container .bgBlueBox .bgBlueInner:nth-child(even) .lifestyleSec .innerLifestyleSec .textBox{ padding-left: 0;} #container .bgBlueBox .bgBlueInner .lifestyleSec .innerLifestyleSec .textBox h4{ font-size: 4.32432432432432432vw; font-weight: 900; line-height: 1.8; margin: 0 auto 7.2972972972972972vw; letter-spacing: 0.01em;} #container .bgBlueBox .bgBlueInner .lifestyleSec .innerLifestyleSec .textBox .text{ font-size: 3.2432432432432432vw; font-weight: 400;} #container .bgBlueBox .bgBlueInner .lifestyleSec .formBtn{ margin: 15vw 0 0 auto; width: 70vw; text-align: center; position: relative; z-index: 2;} #container .bgBlueBox .bgBlueInner .lifestyleSec .formBtn a{ background: #1A1A1A; height: 13.513513513513513vw; display: flex; flex-wrap: wrap; flex-direction: column; justify-content: center; text-decoration: none; color: #fff; font-weight: 900; font-size: 3.78378378378378vw; letter-spacing: 0.01em; padding: 0 5vw; box-sizing: border-box; width: 100%; max-width: 100%; min-width: 0;} #container .bgBlueBox .bgBlueInner .lifestyleSec .formBtn a > span{ position: relative; display: inline-block; padding-right: 10px; box-sizing: border-box; line-height: 1; width: auto;} #container .bgBlueBox .bgBlueInner .lifestyleSec .formBtn a > span::after{ content: ""; display: block; height: 2.027027027027vw; width: 2.027027027027vw; border-top: 0.54054054054054vw solid #fff; border-right: 0.54054054054054vw solid #fff; position: absolute; top: calc(50% - 3px); right: 0; transform: rotate(45deg); transition: all 0.5s;} #container .bgBlueBox .bgBlueInner .lifestyleSec .small{ font-size: 2.8vw; display: block; margin: 2vw auto 0;} #container .flowBox{ position: relative; margin: -68.9189189189189vw auto 0 0; padding: 9.864864864864864vw 0 5vw; box-sizing: border-box; width: 90vw; } #container .flowBox::before{ content: ""; display: block; background: url("../img/arrow-flow.svg") no-repeat 0 0; background-size: 100%; width: 28.378378378378378vw; height: 41.89189189189189vw; position: absolute; top: -18.91891891891891891vw; left: 5vw; z-index: 2;} #container .flowBox::after{ content: ""; background: linear-gradient(-60deg, #97dee7, #3fbf93); height: 100%; width: 100%; position: absolute; top: 0; left: 0; z-index: 1;} #container .flowBox h3{ margin: 0 auto 10vw; line-height: 1; letter-spacing: 0.01em; font-size: 4.32432432432vw; width: 80vw; box-sizing: border-box; padding-left: 3vw; color: #fff; position: relative; z-index: 3;} #container .flowBox .flowList{ width: 80vw; margin: 0 auto; position: relative; z-index: 2;} #container .flowBox .flowList li{ background: #fff; margin-bottom: 5.4054054054054054054054vw; box-sizing: border-box; padding: 8.1081081081081vw 5vw; display: flex; justify-content: space-between; flex-wrap: wrap; width: 100%; position: relative;} #container .flowBox .flowList li::after{ content: ""; display: block; width: 0; height: 0; border-style: solid; border-width: 2.7027027027027027vw 2.7027027027027027vw 0 2.7027027027027027vw; border-color: #ffffff transparent transparent transparent; position: absolute; bottom: calc(1px - 2.7027027027027027vw); left: 11vw;} #container .flowBox .flowList li:last-of-type{ margin-bottom: 0;} #container .flowBox .flowList li:last-of-type::after{ content: none; } #container .flowBox .flowList li .num{ width: 16.21621621621621vw; } #container .flowBox .flowList li .textBox{ width: 48.1081081081081081vw;} #container .flowBox .flowList li .textBox h4{ margin: 0 auto 5vw; font-weight: 900; font-size: 4.32432432432432vw; line-height: 1; letter-spacing: 0.005em;} #container .flowBox .flowList li .textBox .text{ font-size: 3.2432432432432vw; font-weight: 400; line-height: 2.2; } /*-- industryBox --*/ #container .industryBox{ position: relative; padding-top: 47.972972972972972vw;} #container .industryBox h2{ text-align: center; line-height: 1.75; font-size: 5.4054054054054054054054vw; margin: 0 auto; position: relative; z-index: 2; letter-spacing: 0.1em;} #container .industryBox .myl{ position: absolute; top: 0; right: 11vw; width: 78vw; z-index: 2;} #container .industryList{ background: #ebf8f4; padding: 25vw 5vw 27.027027027027vw; margin-top: -5vw;} #container .industryList::before{ content: ""; display: block; background: #fff; height: 100%; width: calc(50% - 570px); position: absolute; top: 0; left: calc(50% + 570px);} #container .industryList li{ position: relative; z-index: 2; width: 100%; margin: 0 auto 5vw;} #container .industryList li:last-of-type{ margin-bottom: 0;} #container .industryList li h3{ background: linear-gradient(to bottom, #97dee7, #3fbf93); margin: 0 auto; box-sizing: border-box; padding-left: 2.7027027027027027vw; position: relative; cursor: pointer;} #container .industryList li h3::before{ content: ""; display: block; width: 5vw; height: 5vw; position: absolute; top: calc( 50% - 2.5vw); right: 0; background: linear-gradient(-60deg, #97dee7, #3fbf93); z-index: 2;} #container .industryList li h3::after{ content: ""; display: block; width: 5vw; height: 5vw; position: absolute; z-index: 2; top: calc( 50% - 2.5vw); right: 0; background: url("../img/arrow-accordion.svg") no-repeat 0 0; background-size: 100%; transition: all 0.6s; transform: rotate(180deg);} #container .industryList li h3.active::after{ transform: rotate(0deg);} #container .industryList li h3 .innerTtl{ display: flex; position: relative;} #container .industryList li h3 .img{ width: 26.35135135135135vw; } #container .industryList li h3 .img img{ display: block; width: 100%;} #container .industryList li h3 .text{ width: calc(100% - 26.35135135135135vw); background: #fff; display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; padding-left: 4vw; font-size: 3.78378378378378vw; font-weight: 900;} #container .industryList li h3 .text .small{ font-weight: 500; font-size: 3.24324324324324324vw;} #container .industryList li .industryDetailBox{ background: linear-gradient( -30deg, #97dee7, #3fbf93); box-sizing: border-box; padding: 0; display: none;} #container .industryList li .industryDetailInner{ background: #fff; box-sizing: border-box; padding: 10vw; border-top: 1px solid #E6E6E6;} #container .industryList li .industryDetailInner .detailMain{ display: block; margin: 0 auto 10.81081081081081081vw; padding-top: 0; border-top: none;} #container .industryList li .industryDetailInner .detailMain .textBox{ width: 100%;} #container .industryList li .industryDetailInner .detailMain .textBox .innerTextBox{ margin-top: 7vw;} #container .industryList li .industryDetailInner .detailMain .textBox .innerTextBox:first-child{ margin-top: 0;} #container .industryList li .industryDetailInner .detailMain h4{ font-size: 3.4vw; font-weight: bold; margin: 0 auto 3vw;} #container .industryList li .industryDetailInner .detailMain h4 .small{ font-size: 2.8vw; font-weight: normal; } #container .industryList li .industryDetailInner .detailMain .text{ font-size: 3.2432432432432vw; line-height: 2.2; font-weight: 400; width: 100%; margin: 0 auto 8.1081081081081vw;} #container .industryList li .industryDetailInner .detailMain .img{ width: 100%;} #container .industryList li .industryDetailInner .detailMain .img img{ width: 100%; display: block;} #container .industryList li .industryDetailInner .tableBox{ margin-bottom: 10.81081081081081081vw;} #container .industryList li .industryDetailInner .tableBox:last-child{ margin-bottom: 0;} #container .industryList li .industryDetailInner .detailTable01{ width: 100%; border-bottom: 1px solid #E6E6E6; display: block;} #container .industryList li .industryDetailInner .detailTable01 tbody, #container .industryList li .industryDetailInner .detailTable01 tr{ width: 100%; display: block;} #container .industryList li .industryDetailInner .detailTable01 th, #container .industryList li .industryDetailInner .detailTable01 td{ padding: 4vw; box-sizing: border-box; border-top: 1px solid #E6E6E6; font-size: 3.2432432432432432vw; line-height: 2; vertical-align: top; text-align: left; display: block;} #container .industryList li .industryDetailInner .detailTable01 th{ width: 100%; background: #ebf8f4; font-weight: 500; } #container .industryList li .industryDetailInner .detailTable01 td{ font-weight: 400;} #container .industryList li .industryDetailInner .detailTable02{ width: 100%; border-bottom: 1px solid #E6E6E6;} #container .industryList li .industryDetailInner .detailTable02 tr{ display: flex; flex-wrap: wrap;} #container .industryList li .industryDetailInner .detailTable02 th, #container .industryList li .industryDetailInner .detailTable02 td{ padding: 4vw; box-sizing: border-box; border-top: 1px solid #E6E6E6; font-size: 3.2432432432432432vw; line-height: 2; vertical-align: top; text-align: left; border-right: 1px solid #E6E6E6; display: block;} #container .industryList li .industryDetailInner .detailTable02 th:last-child, #container .industryList li .industryDetailInner .detailTable02 td:last-child{ border-right: none;} #container .industryList li .industryDetailInner .detailTable02 th.type01{ background: #b2e5d4; font-weight: 500; width: 50%; } #container .industryList li .industryDetailInner .detailTable02 th.type02{ background: #ebf8f4; width: 100%; font-weight: 500; border-right: none;} #container .industryList li .industryDetailInner .detailTable02 td{ font-weight: 400; width: 50%;} #container .industryList li .industryDetailInner .detailTable02 td:only-of-type{ width: 100%;} #container .industryList li .industryDetailInner h4{ margin: 0 auto 20px; font-size: 3.2432432432432432vw; font-weight: 500;} #container .otherBox{ margin-top: 0; position: relative; padding-top: 10vw;} #container .otherBox::after{ content: ""; display: block; background: #fff; height: 100%; width: calc(50% + 570px); position: absolute; top: 0; right: 0; z-index: 1;} #container .otherBox .wrapOther{ position: relative; z-index: 2; width: 90vw; margin: 0 auto;} #container .otherBox .innerOther{ margin: 0 auto 10vw; position: relative;} #container .otherBox .innerOther:last-child{ margin-bottom: 0;} #container .otherBox .innerOther h3{ margin: 0 auto 4.054054054054054vw; padding-bottom: 2.7027027027027027vw; line-height: 1.6; font-weight: 900; font-size: 4.32432432432432vw; border-bottom: 1px solid #E6E6E6;} #container .otherBox .innerOther.hourlyPay h3{ margin-bottom: 4vw; border-bottom: none; padding-bottom: 0;} #container .otherBox .innerOther p, #container .otherBox .innerOther ul{ font-size: 3.2432432432432432vw; line-height: 2; font-weight: 400;} #container .otherBox .innerOther p.caution{ line-height: 1.8;} #container .otherBox .innerOther ul li{ margin-bottom: 0; text-indent: -2em; padding-left: 2em; box-sizing: border-box;} #container .otherBox .innerOther ul li::before{ content: "\25A0\3000";} #container .otherBox .innerOther ul li:last-child{ margin-bottom: 0;} #container .otherBox .swipeIcon{ display: block; width: 11.35135135135135vw; position: absolute; top: 2vw; right: 0;} #container .otherBox .swipeIcon img{ display: block; width: 100%;} #container .otherBox .innerScroll{ margin-bottom: 4vw; overflow: scroll;} #container .otherBox table{ width: 159.189189189189189189vw; border-bottom: 1px solid #E6E6E6;} #container .otherBox table th, #container .otherBox table td{ padding: 4vw 3.5vw; box-sizing: border-box; border-top: 1px solid #E6E6E6; font-size: 3.2432432432432432vw; line-height: 2; vertical-align: top; text-align: left; border-right: 1px solid #E6E6E6;} #container .otherBox table td.brNone, #container .otherBox table th:last-child{ border-right: none;} #container .otherBox table th.type01{ background: #b2e5d4; font-weight: 500;} #container .otherBox table th.type02{ background: #ebf8f4; font-weight: 500;} #container .otherBox table td{ font-weight: 400;} #container .otherBox table td.gray{ background: #F5F5F5;} #container .otherBox table .w320{ width: 50vw !important;} #container .otherBox table tbody th:first-child{ width: 48vw;} /*-- ページトップ --*/ #page-top{ display:none; position:fixed; right: 2vw; bottom: 7vw; z-index:200; } #page-top .totopInner{ display: flex;} #page-top .totopInner .form a{ height: 13.513513513513513vw; display: flex; flex-direction: column; justify-content: center; background: #1A1A1A; text-decoration: none; color: #fff; font-weight: 900; font-size: 3.78378378378378vw; letter-spacing: 0.01em; padding: 0 5vw;} #page-top .totopInner .form a span{ position: relative; display: inline-block; padding-right: 4vw; line-height: 1;} #page-top .totopInner .form a span::after{ content: ""; display: block; height: 2.027027027027vw; width: 2.027027027027vw; border-top: 0.54054054054054vw solid #fff; border-right: 0.54054054054054vw solid #fff; position: absolute; top: calc(50% - 7px); right: 0; transform: rotate(45deg); transition: all 0.5s;} #page-top .totopInner .totop{ margin:0; padding:0; width: 13.513513513513513vw; height: 13.513513513513513vw;} #page-top .totopInner .totop a{ display: block; background: linear-gradient( -30deg, #97dee7, #3fbf93,#3fbf93,#97dee7); background-size: 200%; background-position: bottom right; transition: all 0.5s;} #page-top .totopInner .totop img{ width: 100%;} #move-page-top{ text-decoration:none; cursor:pointer; transition: opacity 0.5s;} /*-- other --*/ .pc{ display: none !important;} p.note{ font-size:12px; line-height:140%; margin:5% auto; padding:0 5px 5px; width:auto;} .fs80{ font-size: 80%;} }