@charset "utf-8"; /* CSS Document */ /*================================== business ==================================*/ #business #contents .mainTitArea { background: url("../img/business/mv.jpg") center center no-repeat; background-size: cover;} #business #contents .firstBlock { padding: 120px 0 100px; text-align: center;} #business #contents .firstBlock .tit { font-size: 28px; color: #2e4fb5; font-weight: 700; line-height: 2;} #business #contents .firstBlock .tit span { display: inline-block;} #business #contents .firstBlock .txt { font-size: 20px; margin-top: 40px; line-height: 2.2;} #business #contents .secondBlock { padding: 120px 0; background: linear-gradient(to bottom right, #2e4fb5, #098fcf); overflow: hidden;} #business #contents .secondBlock .inner { position: relative;} #business #contents .secondBlock .blockTit { color: #fff;} #business #contents .secondBlock .tit { color: #fff; border: solid 1px #d8e0e2; font-weight: 600; text-align: center;} #business #contents .secondBlock .list { color: #2e4fb5;} #business #contents .secondBlock .list li { padding: 140px 0 40px;} #business #contents .secondBlock .list .en { font-size: 18px;} #business #contents .secondBlock .list .jp { font-size: 30px; font-weight: 600;} #business #contents .secondBlock .put { position: absolute;} #business #contents .secondBlock .box01 { margin-top: 50px; position: relative;} #business #contents .secondBlock .box01 .list { display: flex; justify-content: space-between;} #business #contents .secondBlock .box01 .list li { width: 32.9%; text-align: center;} #business #contents .secondBlock .box01 .list li:nth-child(1) { background: url("../img/business/second_icon01.png") top 50px center no-repeat #fff;} #business #contents .secondBlock .box01 .list li:nth-child(2) { background: url("../img/business/second_icon02.png") top 60px center no-repeat #fff;} #business #contents .secondBlock .box01 .list li:nth-child(3) { background: url("../img/business/second_icon03.png") top 50px center no-repeat #fff;} #business #contents .secondBlock .box02 { margin-top: 20px; position: relative;} #business #contents .secondBlock .box02 .list {} #business #contents .secondBlock .box02 .list li { padding: 60px 0 60px 30%; background: url("../img/business/second_icon04.png") center left 23% no-repeat #fff;} #business #contents .secondBlock .put { position: absolute; z-index: 5;} #business #contents .secondBlock .deco01 { right: 150px; bottom: -50px;} #business #contents .secondBlock .deco02 { right: 80px; bottom: -50px;} #business #contents .secondBlock .deco03 { right: -40px; bottom: -50px;} #business #contents .typeBlockArea { overflow: hidden;} #business #contents .typeBlock { padding-top: 120px; position: relative;} #business #contents .typeBlock .inner { position: relative; z-index: 1;} #business #contents .typeBlock:before { content: ""; display: inline-block; position: absolute;} #business #contents .typeBlock.type01:before { left: calc( 50% - 80px); top: 300px; width: 1050px; height: 1051px; background: url("../img/business/typeBg.png") no-repeat;} #business #contents .typeBlock.type02:before { right: calc( 50% - 180px); top: 400px; width: 1050px; height: 1051px; background: url("../img/business/typeBg.png") no-repeat;} #business #contents .typeBlock.type03:before { left: calc( 50% - 80px); top: 300px; width: 1050px; height: 1051px; background: url("../img/business/typeBg.png") no-repeat;} #business #contents .typeBlock.type04:before { right: calc( 50% + 360px); top: -300px; width: 506px; height: 507px; background: url("../img/business/typeBg.png") no-repeat; background-size: cover;} #business #contents .typeBlock.type04:after { left: calc( 50% + 400px); top: 80px; width: 506px; height: 507px; background: url("../img/business/typeBg.png") no-repeat; background-size: cover; content: ""; display: inline-block; position: absolute;} #business #contents .typeBlock .blockTit { margin-bottom: 60px;} #business #contents .typeBlock .blockTit:before { width: 60px; height: 1px; margin: 0 auto 60px auto; background: #2e4fb5; content: ""; display: block;} #business #contents .typeBlock.type01 .blockTit:before { display: none;} #business #contents .typeBlock .blockTit .en { font-size: 60px; margin-bottom: 10px; font-weight: 600;} #business #contents .typeBlock .blockTit .jp { font-size: 28px; padding: 7px 40px 5px 40px; font-weight: 600; background: #2e4fb5; color: #fff; display: inline-block; line-height: 1;} #business #contents .typeBlock .detailBox {} #business #contents .typeBlock .detailBox .txtBox { position: relative;} #business #contents .typeBlock .detailBox .txtBox .subtit { font-size: 28px; color: #2e4fb5; font-weight: 700; } #business #contents .typeBlock .detailBox .txtBox .subtit span { display: inline-block;} #business #contents .typeBlock .detailBox .txtBox .subtit_en { font-size: 24px; color: #2e4fb5; font-weight: 600;} #business #contents .typeBlock .detailBox .txtBox .txt {} #business #contents .typeBlock .detailBox .txtBox .txt p { margin-top: 40px; line-height: 2.2;} #business #contents .typeBlock.type01 .detailBox .txtBox { background: url("../img/business/type01_ph01.jpg") left top no-repeat;} #business #contents .typeBlock.type02 .detailBox .txtBox { margin-bottom: 60px; background: url("../img/business/type02_ph01.jpg") left top no-repeat;} #business #contents .typeBlock.type03 .detailBox .txtBox { margin-bottom: 30px; background: url("../img/business/type03_ph01.jpg") left top no-repeat;} #business #contents .typeBlock.type04 .detailBox .txtBox { background: url("../img/business/type04_ph01.jpg") right 270px top 70px no-repeat;} #business #contents .typeBlock .circleBox {} #business #contents .typeBlock .circleBox .list { display: flex; justify-content: center; align-items: flex-end;} #business #contents .typeBlock .circleBox .list li { margin: 0 20px;} #business #contents .typeBlock .circleBox .list li p { font-size: 24px; width: 200px; height: 200px; border-radius: 200px; color: #fff; background: linear-gradient(to bottom right, #2e4fb5, #098fcf); display: flex; align-items: center; justify-content: center; font-weight: 600; text-align: center; line-height: 1.2;} #business #contents .typeBlock .circleBox .notes { width: 86.66%; max-width: 1040px; margin: 20px auto 0; line-height: 2;} #business #contents .typeBlock .interviewBox { margin-top: 80px;} #business #contents .typeBlock .interviewBox .subtit { margin-bottom: 30px; font-size: 28px; font-weight: 700; color: #2e4fb5;} #business #contents .typeBlock .interviewBox .linkBox { background: #3b3d3a;} #business #contents .typeBlock .interviewBox .linkBox a { padding-left: calc( 100% - 420px); padding-top: 70px; padding-bottom: 50px; padding-right: 80px; color: #fff; position: relative;} #business #contents .typeBlock .interviewBox .linkBox a:before { width: calc( 100% - 490px); height: 100%; position: absolute; left: 0; top: 0; content: "";} #business #contents .typeBlock.type01 .interviewBox .linkBox a:before { background: url("../img/business/type01_ph03.jpg") center center no-repeat; background-size: cover;} #business #contents .typeBlock.type02 .interviewBox .linkBox a:before { background: url("../img/business/type02_ph03.jpg") center center no-repeat; background-size: cover;} #business #contents .typeBlock.type03 .interviewBox .linkBox a:before { background: url("../img/business/type03_ph03.jpg") center center no-repeat; background-size: cover;} #business #contents .typeBlock .interviewBox .linkBox a span { display: block;} #business #contents .typeBlock .interviewBox .linkBox a .txt { font-size: 28px;} #business #contents .typeBlock .interviewBox .linkBox a .post { margin-top: 20px;} #business #contents .typeBlock .interviewBox .linkBox a .join {} #business #contents .typeBlock .interviewBox .linkBox a .name { font-size: 48px;} #business #contents .typeBlock .interviewBox .linkBox a .arr { right: 40px; bottom: 30px; position: absolute;} #business #contents .typeBlock .interviewBox .linkBox a .arr { border: solid 1px #fff; width: 120px; height: 120px; border-radius: 120px; display: block; display: flex; align-items: center; justify-content: center;} #business #contents .typeBlock .interviewBox .linkBox a .arr:before { width: 24px; height: 16px; background-size: 24px 16px; content: ""; background: url("../img/arr_wh.svg") no-repeat; display: block;} @media screen and (min-width: 1200px) { #business header #navArea nav .hdNav li:nth-child(3) a { opacity: 1; color: #2e4fb5; border-bottom: solid 1px #2e4fb5;} #business #contents .typeBlock.type01 .detailBox .txtBox .txt p:nth-of-type(2) { padding-right: 250px; min-height: 250px; background: url("../img/business/type01_ph02.jpg") right bottom no-repeat;} #business #contents .typeBlock.type02 .detailBox .txtBox .txt p:nth-of-type(2) { padding-right: 250px; min-height: 250px; background: url("../img/business/type02_ph02.jpg") right bottom no-repeat;} #business #contents .typeBlock.type03 .detailBox .txtBox .txt p:nth-of-type(2) { padding-right: 300px; min-height: 310px; background: url("../img/business/type03_ph02.jpg") right bottom no-repeat;} #business #contents .typeBlock.type04 .detailBox .txtBox:after { width: 230px; height: 310px; background: url("../img/business/type04_ph02.jpg") right bottom no-repeat; position: absolute; content: ""; display: block; right: 0; top: 0;} #business #contents .typeBlock.type04 .detailBox .txtBox { padding-right: 720px;} } @media screen and (max-width: 1199px) { #business #contents .secondBlock .deco01 { right: 50px;} #business #contents .secondBlock .deco02 { display: none;} #business #contents .typeBlock .circleBox { margin-top: 30px;} #business #contents .typeBlock .circleBox .list li { margin: 0 10px;} #business #contents .typeBlock .circleBox .list li p { font-size: 22px; width: 180px; height: 180px; border-radius: 180px;} #business #contents .typeBlock .interviewBox .linkBox a .arr { width: 80px; height: 80px; border-radius: 80px;} #business #contents .typeBlock .interviewBox .linkBox a .arr:before { width: 18px; height: 10px; background-size: 18px 10px;} #business #contents .typeBlock.type01 .detailBox .txtBox {} #business #contents .typeBlock.type02 .detailBox .txtBox {} #business #contents .typeBlock.type03 .detailBox .txtBox {} #business #contents .typeBlock.type04 .detailBox .txtBox { padding-right: 450px; background-position: right top 70px;} } @media screen and (min-width: 1100px) { #business #contents .secondBlock .tit { font-size: 28px; width: 270px; height: 270px; border-radius: 270px; position: absolute;left: 0; display: flex; justify-content: center; align-items: center; line-height: 1.6;} #business #contents .secondBlock .tit .line { text-align: center;} #business #contents .secondBlock .tit .line span { display: block;} #business #contents .secondBlock .box01 .tit { top: -10px; } #business #contents .secondBlock .box01 .list { width: 78%; margin-left: 22%;} #business #contents .secondBlock .box02 .tit { top: -50px; } #business #contents .secondBlock .box02 .list { width: 78%; margin-left: 22%;} } @media screen and (max-width: 1099px) { #business #contents .secondBlock .tit { padding: 15px; border-radius: 10px; margin-bottom: 10px;} } @media screen and (max-width: 1024px) { #business #contents .typeBlock .circleBox .notes { width: 100%;} } @media screen and (min-width: 1000px) { #business #contents .typeBlock .detailBox .txtBox { min-height: 520px; padding-left: 500px;} #business #contents .typeBlock.type04 .detailBox .txtBox { min-height: 520px; padding-left: 0;} } @media screen and (max-width: 999px) { #business #contents .typeBlock { padding: 60px 5.14% 0 5.14%;} #business #contents .typeBlock.type01 .detailBox .txtBox { padding-top: 50vw; background: url("../img/business/type01_ph01_sp.jpg") left top no-repeat; background-size: 100% auto;} #business #contents .typeBlock.type02 .detailBox .txtBox { padding-top: 50vw; background: url("../img/business/type02_ph01_sp.jpg") left top no-repeat; background-size: 100% auto; margin-bottom: 0;} #business #contents .typeBlock.type03 .detailBox .txtBox { padding-top: 50vw; background: url("../img/business/type03_ph01_sp.jpg") left top no-repeat; background-size: 100% auto;} #business #contents .typeBlock .circleBox .list li { margin: 0 5px;} #business #contents .typeBlock .circleBox .list li p { font-size: 18px; width: 130px; height: 130px; border-radius: 130px;} #business #contents .typeBlock .interviewBox .linkBox a { padding-left: calc( 50% + 20px) ; padding-top: 20px; padding-bottom: 20px; padding-right: 20px; min-height: 25vw;} #business #contents .typeBlock .interviewBox .linkBox a:before { width: 50%;} #business #contents .typeBlock .interviewBox .linkBox a .arr { right: 10px; bottom: 20px;} #business #contents .typeBlock .interviewBox .linkBox a .txt { font-size: 24px;} #business #contents .typeBlock.type04 .detailBox .txtBox { min-height: inherit; padding-right: 0; background: none;} #business #contents .typeBlock.type04 .detailBox .txtBox .txt { margin-top: 30px; padding-top: 48vw; background: url("../img/business/type04_ph01_sp.jpg") center top no-repeat; background-size: 100% auto;} #business #contents .typeBlock.type01:before { left: calc( 50% - 26vw); top: auto; bottom: 0; width: 140vw; height: 140vw; background: url("../img/business/typeBg.png") no-repeat; background-size: cover;} #business #contents .typeBlock.type02:before { left: calc( 50% + 18vw); right: auto; top: 120px; width: 67vw; height: 67vw; background: url("../img/business/typeBg.png") no-repeat; background-size: cover;} #business #contents .typeBlock.type02:after { right: calc( 50% - 18vw); bottom: 60px; width: 100vw; height: 100vw; background: url("../img/business/typeBg.png") no-repeat; background-size: cover; content: ""; display: inline-block; position: absolute;} #business #contents .typeBlock.type03:before { left: calc( 50% + 18vw); right: auto; top: 120px; width: 67vw; height: 67vw; background: url("../img/business/typeBg.png") no-repeat; background-size: cover;} #business #contents .typeBlock.type03:after { right: calc( 50% - 18vw); bottom: 60px; width: 100vw; height: 100vw; background: url("../img/business/typeBg.png") no-repeat; background-size: cover; content: ""; display: inline-block; position: absolute;} #business #contents .typeBlock.type04:before { left: calc( 50% + 18vw); top: 120px; width: 67vw; height: 67vw; background: url("../img/business/typeBg.png") no-repeat; background-size: cover;} #business #contents .typeBlock.type04:after { right: calc( 50% + 18vw); left: auto; bottom: 60px; top: auto; width: 67vw; height: 67vw; background: url("../img/business/typeBg.png") no-repeat; background-size: cover;} } @media screen and (min-width: 751px) { } @media screen and (max-width: 750px) { #business #contents .mainTitArea { background: url("../img/recruit/mv_sp.jpg") center center no-repeat; background-size: cover;} #business #contents .firstBlock { padding: 60px 0 50px; text-align: left;} #business #contents .firstBlock .tit { font-size: 14px;} #business #contents .firstBlock .tit span { display: inline;} #business #contents .firstBlock .tit .en { font-weight: 600;} #business #contents .firstBlock .txt { font-size: 12px; margin-top: 20px;} #business #contents .secondBlock { padding: 60px 0;} #business #contents .secondBlock .tit { font-size: 14px;} #business #contents .secondBlock .list li { padding: 80px 0 20px;} #business #contents .secondBlock .list .en { font-size: 9px;} #business #contents .secondBlock .list .jp { font-size: 15px;} #business #contents .secondBlock .box01 .list li:nth-child(1) { background-position: top 30px center; background-size: 27% auto;} #business #contents .secondBlock .box01 .list li:nth-child(2) { background-position: top 40px center; background-size: 31% auto;} #business #contents .secondBlock .box01 .list li:nth-child(3) { background-position: top 30px center; background-size: 49% auto;} #business #contents .secondBlock .box02 .list li { padding: 25px 0 25px 22%; background-position: center left 10%; background-size: 8% auto;} #business #contents .secondBlock .deco01 { right: 8%; bottom: -30px; width: 8.93%;} #business #contents .secondBlock .deco03 { right: -3%; bottom: -30px; width: 10.4%;} #business #contents .typeBlock .blockTit { margin-bottom: 30px;} #business #contents .typeBlock .blockTit .en { font-size: 30px; margin-bottom: 5px;} #business #contents .typeBlock .blockTit .jp { font-size: 14px;} #business #contents .typeBlock .detailBox .txtBox .subtit { margin-top: 15px; font-size: 16px; line-height: 2;} #business #contents .typeBlock .detailBox .txtBox .txt { font-size: 12px;} #business #contents .typeBlock .detailBox .txtBox .txt p { margin-top: 15px;} #business #contents .typeBlock.type02 .circleBox .list, #business #contents .typeBlock.type04 .circleBox .list { width: 320px; margin: 0 auto; flex-wrap: wrap;} #business #contents .typeBlock.type04 .circleBox .list { padding-right: 20px;} #business #contents .typeBlock.type04 .circleBox .list li.nado { position: absolute; left: calc( 50% + 90px); bottom: 0;} #business #contents .typeBlock.type04 .detailBox .txtBox .subtit { margin-top: 0;} #business #contents .typeBlock.type04 .detailBox .txtBox .txt { margin-top: 20px;} #business #contents .typeBlock.type04 .detailBox .txtBox .txt p { margin-top: 20px;} #business #contents .typeBlock .circleBox .list li:nth-child(n+3) { margin-top: 10px;} #business #contents .typeBlock .circleBox .list li p { font-size: 14px; width: 100px; height: 100px; border-radius: 100px;} #business #contents .typeBlock .circleBox .list li p.min { font-size: 12px;} #business #contents .typeBlock .circleBox .notes { font-size: 9px;} #business #contents .typeBlock .interviewBox { margin-top: 45px;} #business #contents .typeBlock .interviewBox .subtit { font-size: 14px; margin-bottom: 15px;} #business #contents .typeBlock .interviewBox .linkBox a .txt { font-size: 12px;} #business #contents .typeBlock .interviewBox .linkBox a .post { font-size: 8px; margin-top: 15px;} #business #contents .typeBlock .interviewBox .linkBox a .join { font-size: 8px;} #business #contents .typeBlock .interviewBox .linkBox a .name { font-size: 24px;} #business #contents .typeBlock .interviewBox .linkBox a .arr { width: 40px; height: 40px; border-radius: 40px;} #business #contents .typeBlock .interviewBox .linkBox a .arr:before { width: 11px; height: 6px; background-size: 11px 6px;} } /*================================== aboutus ==================================*/ #aboutus { background: url("../img/top/bg.jpg") top center no-repeat #fff; background-size: 2200px auto;} #aboutus #contents .mainTitArea { background: url("../img/aboutus/mv.jpg") center center no-repeat; background-size: cover;} #aboutus #contents .anchorList li { width: 32%;} #aboutus #contents .inner { width: 86%; max-width: 1040px;} #aboutus #contents #top_vision { padding-top: 120px; position: relative;} #aboutus #contents #top_vision:before { width: 545px; height: 201px; right: 0; top: 90px; background: url("../img/top/vision_deco.png") no-repeat; content: ""; position: absolute;} #aboutus #contents #top_vision .inner { position: relative; z-index: 5;} #aboutus #contents #top_vision .topTxtArea { text-align: center;} #aboutus #contents #top_vision .topTxtArea .tit { color: #2e4fb5;} #aboutus #contents #top_vision .topTxtArea .img { margin-top: 50px;} #aboutus #contents #top_vision .topTxtArea .img img { max-width: 100%;} #aboutus #contents #top_vision .topTxtArea .txt { margin-top: 55px; line-height: 2;} #aboutus #contents #top_vision .topTxtArea .txt p { margin-top: 20px;} #aboutus #contents #top_vision .topTxtArea .txt .imp { margin-top: 55px; color: #2e4fb5; font-weight: 700;} #aboutus #contents #top_vision .topTxtArea .txt .imp .mid { font-size: 24px; line-height: 1.8;} #aboutus #contents #top_vision .topTxtArea .txt .imp .big { font-size: 32px; line-height: 1.8;} #aboutus #contents #top_vision .topTxtArea .txt span { display: inline-block;} #aboutus #contents .companyTable a.link { color: #2e4fb5; text-decoration: underline;} #aboutus #contents .mapArea { margin-top: 50px;} #aboutus #contents .mapArea { position: relative; width: 100%; padding-top: 38.19%; height: 0;} #aboutus #contents .mapArea iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%;} #aboutus #contents .bgBL .spAccordionBox { margin-top: 0; padding: 120px 0 100px;} #aboutus #contents .baseAccordion {} #aboutus #contents .baseAccordion dt { font-size: 20px; margin-top: 30px; padding: 25px 30px; border: solid 1px #d5dddf; text-align: center; font-weight: bold; background: url("../img/arr_btm_bk.svg") right 5% center no-repeat #f3f6f7; background-size: 8px 16px; cursor: pointer; -webkit-transition:0.8s; -moz-transition:0.8s; -ms-transition:0.8s; -o-transition:0.8s; transition:0.8s;} #aboutus #contents .baseAccordion dt.open { background: url("../img/arr_top_bk.svg") right 5% center no-repeat #f3f6f7; background-size: 8px 16px;} #aboutus #contents .baseAccordion dt:hover { color: #2e4fb5; background: url("../img/arr_btm_blG.svg") right 5% center no-repeat #fff; background-size: 8px 16px;} #aboutus #contents .baseAccordion dt.open:hover { color: #111; background: url("../img/arr_top_bk.svg") right 5% center no-repeat #f3f6f7; background-size: 8px 16px;} #aboutus #contents .baseAccordion .baseTable { border-top: 0;} #aboutus #contents .baseAccordion .baseTable li { font-size: 20px;} #aboutus #contents .baseAccordion .baseTable li p { line-height: 2; margin-bottom: 5px;} #aboutus #contents .baseAccordion .baseTable li .sub { font-weight: 600;} #aboutus #contents .baseAccordion .baseTable li .sub.mt { margin-top: 50px;} #aboutus #contents .baseAccordion .baseTable li .line { display: flex;} #aboutus #contents .baseAccordion .baseTable li .line .lineTit { width: 100px; display: block;} #aboutus #contents .baseAccordion .baseTable li .line .lineTxt { width: calc( 100% - 100px); display: block;} #aboutus #contents .baseAccordion .baseTable li .line .lineTxt a { color: #111;} #aboutus #contents .baseAccordion .baseTable li .line .lineTxt a.link { color: #2e4fb5; text-decoration: underline;} @media screen and (min-width: 1200px) { #aboutus header #navArea nav .hdNav li:nth-child(2) a { opacity: 1; color: #2e4fb5; border-bottom: solid 1px #2e4fb5;} } @media screen and (max-width: 1200px) { } @media screen and (min-width: 751px) { } @media screen and (max-width: 750px) { body#aboutus { background-size: 1500px auto;} #aboutus #contents .inner { width: 90.66%;} #aboutus #contents .inner .block { padding: 0 5.14%;} #aboutus #contents .mainTitArea { background: url("../img/aboutus/mv_sp.jpg") center center no-repeat; background-size: cover;} #aboutus #contents #top_vision { padding-top: 60px;} #aboutus #contents #top_vision:before { width: 260px; height: 96px; right: -60px; top: 50px; background-size: cover;} #aboutus #contents #top_vision .topTxtArea .txt { margin-top: 20px; text-align: left;} #aboutus #contents #top_vision .topTxtArea .txt .imp { margin-top: 20px; text-align: center;} #aboutus #contents #top_vision .topTxtArea .txt .imp .mid { font-size: 18px;} #aboutus #contents #top_vision .topTxtArea .txt .imp .big { font-size: 20px;} #aboutus #contents .inner .table { border-top: 0;} #aboutus #contents .mapArea { margin: 25px 0; padding-top: 70%;} #aboutus #contents .bgBL { background: #fff;} #aboutus #contents .bgBL .spAccordionBox { padding: 0;} #aboutus #contents .inner .spAccordionBox .tit#anchor01 { margin-top: 30px;} #aboutus #contents .inner .spAccordionBox .tit#anchor02 { margin-top: 25px;} /*#aboutus #contents .baseAccordion { padding: 0 5.73%;}*/ #aboutus #contents .baseAccordion dt { font-size: 14px; margin-top: 30px; padding: 15px; border: solid 1px #d5dddf; text-align: center; font-weight: bold; background: url("../img/arr_btm_bk.svg") right 5% center no-repeat #fff; background-size: 6px 16px; cursor: pointer;} #aboutus #contents .baseAccordion dt.open { background: url("../img/arr_top_bk.svg") right 5% center no-repeat #fff; background-size: 6px 16px;} #aboutus #contents .baseAccordion .baseTable { border-top: 0;} #aboutus #contents .baseAccordion .baseTable li { font-size: 14px;} #aboutus #contents .baseAccordion .baseTable li .cont { padding-left: 10%;} #aboutus #contents .baseAccordion .baseTable li p { line-height: 2; margin-bottom: 5px;} #aboutus #contents .baseAccordion .baseTable li .sub.mt { margin-top: 25px;} #aboutus #contents .baseAccordion .baseTable li .line .lineTit { width: 80px; display: block;} #aboutus #contents .baseAccordion .baseTable li .line .lineTxt { width: calc( 100% - 80px); display: block;} } /* slide css */ #aboutus #contents #top_vision { overflow: hidden;} #aboutus #contents #top_vision .slideshowArea { margin-top: 30px; display: flex; align-items: center; overflow: hidden; height: 44.66vw;} #aboutus #contents #top_vision .slideshowArea { margin-top: 30px; display: flex; align-items: center; overflow: hidden; height: 44.66vw;} #aboutus #contents #top_vision .slideshowArea .slideshow { display: flex; animation: loop-slide 40s infinite linear 1s both;} #aboutus #contents #top_vision .slideshowArea li { margin: 0 3.33vw;} #aboutus #contents #top_vision .slideshowArea li.size01 { width: 44.66vw; height: 44.66vw;} #aboutus #contents #top_vision .slideshowArea li.size02 { width: 33.33vw; height: 33.33vw;} #aboutus #contents #top_vision .slideshowArea li.size02.pt { padding-top: 11.33vw;} #aboutus #contents #top_vision .slideshowArea li img { width: 100%;} @media screen and (min-width: 750px) { #aboutus #contents #top_vision .slideshowArea { margin-top: 60px; height: 335px;} #aboutus #contents #top_vision .slideshowArea li { margin: 0 25px;} #aboutus #contents #top_vision .slideshowArea li.size01 { width: 335px; height: 335px;} #aboutus #contents #top_vision .slideshowArea li.size02 { width: 250px; height: 250px;} #aboutus #contents #top_vision .slideshowArea li.size02.pt { padding-top: 85px;} } /* history */ #aboutus #contents .historyTit { font-size: 30px; margin-bottom: 100px; text-align: center; font-weight: 700;} #aboutus #contents .historyList { position: relative; width: 84.61%; margin: 0 auto;} #aboutus #contents .historyList:before { height: calc(100% - 40px); position: absolute; content: ""; top: 0; border-left: solid 1px #f2f5f5;} #aboutus #contents .historyList li { padding-bottom: 25px; position: relative;} #aboutus #contents .historyList li:before { width: 26px; height: 26px; left: 0; content: ""; background: url("../img/aboutus/ico_history.gif") no-repeat; background-size: 26px 26px; position: absolute; top: auto; bottom: auto;} #aboutus #contents .historyList li:first-child:before { top: 0;} #aboutus #contents .historyList li:last-child { padding-bottom: 0;} #aboutus #contents .historyList li .date { color: #2e4fb5; font-weight: bold;} #aboutus #contents .historyList li .txt {} @media screen and (min-width: 750px) { #aboutus #contents .historyList:before { height: calc(100% - 14px);} #aboutus #contents .historyList li { padding-bottom: 50px;} } @media screen and (min-width: 751px) { #aboutus #contents .historyList {} #aboutus #contents .historyList:before { left: 200px;} #aboutus #contents .historyList li:before { left: 188px;} #aboutus #contents .historyList li { padding-left: 290px;} #aboutus #contents .historyList li .date { position: absolute; left: 0; top: 0;} #aboutus #contents .historyList li .txt {} } @media screen and (max-width: 750px) { #aboutus #contents .historyList { width: 100%; padding: 5.14%;} #aboutus #contents .historyList:before { top: 8px; height: calc(100% - 60px);} #aboutus #contents .historyList li { padding-left: 20px;} #aboutus #contents .historyList li:before { top: -5px; left: -12px;} #aboutus #contents .historyList li:first-child:before { top: -5px;} #aboutus #contents .historyList li .date { margin-bottom: 5px;} #aboutus #contents .historyTit { font-size: 18px; margin-bottom: 20px;} } /*================================== privacy ==================================*/ #privacy #contents .mainTitArea { background: url("../img/privacy/mv.jpg") center center no-repeat; background-size: cover;} #privacy #contents .inner .privacyBox { width: 86%; max-width: 1040px; margin: 0 auto;} #privacy #contents .inner .privacyBox .anchorList li { width: 47.59%;} #privacy #contents .inner .privacyBox .accordion { font-size: 20px;} #privacy #contents .inner .privacyBox .accordion a { color: #2e4fb5; text-decoration: underline; display: inline-block; pointer-events:auto; text-indent: 0 !important;} #privacy #contents .inner .privacyBox .accordion .txt { margin-bottom: 80px; font-weight: 600; line-height: 2.2;} #privacy #contents .inner .privacyBox .accordion .list { margin-left: 30px; line-height: 2;} #privacy #contents .inner .privacyBox .accordion .list dt { text-indent: -30px; margin-left: 30px; margin-top: 20px; margin-bottom: 10px; font-weight: 600;} #privacy #contents .inner .privacyBox .accordion .list dt:before { display: inline-block;} #privacy #contents .inner .privacyBox .accordion .list dt:nth-of-type(1):before { content: "1.";} #privacy #contents .inner .privacyBox .accordion .list dt:nth-of-type(2):before { content: "2.";} #privacy #contents .inner .privacyBox .accordion .list dt:nth-of-type(3):before { content: "3.";} #privacy #contents .inner .privacyBox .accordion .list dt:nth-of-type(4):before { content: "4.";} #privacy #contents .inner .privacyBox .accordion .list dt:nth-of-type(5):before { content: "5.";} #privacy #contents .inner .privacyBox .accordion .list dt:nth-of-type(6):before { content: "6.";} #privacy #contents .inner .privacyBox .accordion .list dt:nth-of-type(7):before { content: "7.";} #privacy #contents .inner .privacyBox .accordion .list dt:nth-of-type(8):before { content: "8.";} #privacy #contents .inner .privacyBox .accordion .list dt:nth-of-type(9):before { content: "9.";} #privacy #contents .inner .privacyBox .accordion .list dt:nth-of-type(10):before { content: "10.";} #privacy #contents .inner .privacyBox .accordion .list dd { line-height: 2.2;} #privacy #contents .inner .privacyBox .accordion .list dd .num {} #privacy #contents .inner .privacyBox .accordion .list dd .num li { text-indent: -14px; margin-left: 24px; margin-top: 10px;} #privacy #contents .inner .privacyBox .accordion .list dd .num li:before { margin-right: 10px; display: inline-block;} #privacy #contents .inner .privacyBox .accordion .list dd .num li:nth-child(1):before { content: "1)";} #privacy #contents .inner .privacyBox .accordion .list dd .num li:nth-child(2):before { content: "2)";} #privacy #contents .inner .privacyBox .accordion .list dd .num li:nth-child(3):before { content: "3)";} #privacy #contents .inner .privacyBox .accordion .list dd .num li:nth-child(4):before { content: "4)";} #privacy #contents .inner .privacyBox .accordion .list dd .num li:nth-child(5):before { content: "5)";} #privacy #contents .inner .privacyBox .accordion .list dd .disc { text-indent: -16px; margin-left: 26px; display: block;} #privacy #contents .inner .privacyBox .accordion .list dd .disc:before { margin-right: 10px; content: "・"; display: inline-block;} #privacy #contents .inner .privacyBox .accordion .txt.taR {} #privacy #contents .inner .privacyBox .accordion .txt.taR .min { margin: 70px 0 5px 0; font-size: 16px; font-weight: 400; display: block;} #privacy #contents .inner .privacyBox .accordion .contactBox { margin-top: 100px; padding: 75px 60px; border: solid 1px #d5dddf;} #privacy #contents .inner .privacyBox .accordion .contactBox .boxTit { margin-bottom: 20px; font-weight: 700;} #privacy #contents .inner .privacyBox .accordion .contactBox .boxTxt { margin-bottom: 20px;} #privacy #contents .inner .privacyBox .accordion .contactBox .boxInfo { font-size: 16px; line-height: 2;} #privacy #contents .inner .privacyBox .accordion .contactBox .boxInfo span { text-indent: -16px; margin-left: 16px; display: block;} #privacy #contents .inner .privacyBox .accordion .contactBox .boxInfo span:before { content: "・";} @media screen and (min-width: 1201px) { } @media screen and (max-width: 1200px) { } @media screen and (min-width: 751px) { } @media screen and (max-width: 750px) { #privacy #contents .mainTitArea { background: url("../img/privacy/mv_sp.jpg") center center no-repeat; background-size: cover;} #privacy #contents .inner .privacyBox { width: 100%;} #privacy #contents .spAccordionBox .taL { padding: 0 10%;} #privacy #contents .inner .spAccordionBox .tit { margin-bottom: 0;} #privacy #contents .inner .privacyBox .accordion { font-size: 15px;} #privacy #contents .inner .privacyBox .accordion .txt { margin-top: 20px; margin-bottom: 40px; line-height: 1.8;} #privacy #contents .inner .privacyBox .accordion .list { line-height: 1.8; margin-left: 15px;} #privacy #contents .inner .privacyBox .accordion .list dt { text-indent: -10px; margin-left: 0; margin-top: 10px; margin-bottom: 5px;} #privacy #contents .inner .privacyBox .accordion .list dt:before { width: 10px;} #privacy #contents .inner .privacyBox .accordion .list dd .num li { text-indent: -14px; margin-left: 24px; margin-top: 10px;} #privacy #contents .inner .privacyBox .accordion .list dd .num li:before { margin-right: 10px;} #privacy #contents .inner .privacyBox .accordion .list dd .disc { text-indent: -11px; margin-left: 20px;} #privacy #contents .inner .privacyBox .accordion .list dd .disc:before { margin-right: 5px;} #privacy #contents .inner .privacyBox .accordion .txt.taR {} #privacy #contents .inner .privacyBox .accordion .txt.taR .min { margin: 20px 0 5px 0; font-size: 14px;} #privacy #contents .inner .privacyBox .accordion .contactBox { margin-top: 30px; padding: 20px;} #privacy #contents .inner .privacyBox .accordion .contactBox .boxTit { margin-bottom: 10px;} #privacy #contents .inner .privacyBox .accordion .contactBox .boxTxt { margin-bottom: 10px; line-height: 1.8;} #privacy #contents .inner .privacyBox .accordion .contactBox .boxInfo { font-size: 13px; line-height: 1.8;} } /*================================== faq ==================================*/ #faq #contents .mainTitArea { background: url("../img/faq/mv.jpg") center center no-repeat; background-size: cover;} #faq #contents .inner .faqBox { width: 86%; max-width: 1040px; margin: 0 auto; font-weight: 600;} #faq #contents .inner .faqBox .anchorList li { width: 45%;} #faq #contents .inner .faqBox .faqList .accordion { border-bottom: solid 1px #d5dddf;} #faq #contents .inner .faqBox .faqList .accordion dt { font-size: 20px; padding: 45px 12%; font-weight: 600; border-top: solid 1px #d5dddf; background: url("../img/arr_bk.svg") no-repeat; cursor: pointer; position: relative; -webkit-transition:0.8s; -moz-transition:0.8s; -ms-transition:0.8s; -o-transition:0.8s; transition:0.8s;} #faq #contents .inner .faqBox .faqList .accordion dt:hover { color: #2e4fb5; background: url("../img/arr_blG.svg")no-repeat;} #faq #contents .inner .faqBox .faqList .accordion dt:before, #faq #contents .inner .faqBox .faqList .accordion dd:before { position: absolute; left: 6%; font-family: "Jost", sans-serif; font-weight: 400;} #faq #contents .inner .faqBox .faqList .accordion dt:before { content: "Q."; margin-right: 20px;} #faq #contents .inner .faqBox .faqList .accordion dt.open { background: url("../img/arr_btm_gr.svg") no-repeat;} #faq #contents .inner .faqBox .faqList .accordion dt.open:hover { color: #111;} #faq #contents .inner .faqBox .faqList .accordion dd { font-size: 20px; padding: 40px 6% 40px 12%; display: none; border-top: solid 1px #d5dddf; background: #f3f6f7; position: relative; line-height: 2;} #faq #contents .inner .faqBox .faqList .accordion dd:before { content: "A."; margin-right: 20px;} @media screen and (min-width: 1200px) { #faq header #navArea nav .hdNav li:nth-child(6) a { opacity: 1; color: #2e4fb5; border-bottom: solid 1px #2e4fb5;} } @media screen and (max-width: 1200px) { } @media screen and (min-width: 751px) { #faq #contents .inner .faqBox .faqList .accordion dt, #faq #contents .inner .faqBox .faqList .accordion dt:hover { background-size: 19px 7px; background-position: right 4.5% center;} #faq #contents .inner .faqBox .faqList .accordion dt.open { background-size: 8px 20px; background-position: right 5% center;} } @media screen and (max-width: 750px) { #faq #contents .mainTitArea { background: url("../img/faq/mv_sp.jpg") center center no-repeat; background-size: cover;} #faq #contents .inner .faqBox { width: 100%;/* padding: 0 5.14%;*/} #faq #contents .inner .faqBox .anchorList { display: none;} #faq #contents .inner .faqBox .faqList .accordion dt, #faq #contents .inner .faqBox .faqList .accordion dt:hover { font-size: 15px; padding: 20px 10% 20px 15%; background-size: 17px 5px; background-position: right 2% center;} #faq #contents .inner .faqBox .faqList .accordion dt:nth-of-type(1){ border-top: 0;} #faq #contents .inner .faqBox .faqList .accordion dt.open { background-size: 6px 18px; background-position: right 3.5% center;} #faq #contents .inner .faqBox .faqList .accordion dd { font-size: 15px; padding: 20px 5% 20px 15%;} } /*================================== news ==================================*/ #news #contents .mainTitArea { background: url("../img/news/mv.jpg") center center no-repeat; background-size: cover;} #news #contents #newsList .list li { border-bottom: solid 1px #d5dddf;} #news #contents #newsList .list li a { min-height: 122px; padding: 25px 102px 25px 80px; font-weight: 600; display: flex; align-items: center; position: relative;} #news #contents #newsList .list li a:after { background-size: 22px 12px; width: 22px; height: 12px; right: 80px; background: url("../img/arr_bk.svg") no-repeat; position: absolute; content: "";} #news #contents #newsList .list li a .info { width: 230px; display: flex; align-items: center;} #news #contents #newsList .list li a .info .date { width: 130px;} #news #contents #newsList .list li a .info .tag { width: 100px;} #news #contents #newsList .list li a .info .tag .item { padding: 10px 15px; margin: 2px 0; border-radius: 20px; color: #fff; background: #2e4fb5; display: inline-block; line-height: 1; font-weight: 400;} #news #contents #newsList .list li a .txt { width: calc( 100% - 230px);} #news #contents #newsList .list li a:hover { opacity: 1; background: #f3f6f7;} #news #contents #newsList .list li a:hover:after { background-size: 22px 12px; width: 22px; height: 12px; right: 80px; background: url("../img/arr_blG.svg") no-repeat;} #news #contents #newsList .pageNavi { margin-top: 100px; text-align: center;display: flex; justify-content: center; align-items: center;} #news #contents #newsList .pageNavi li { margin: 0 5px;} #news #contents #newsList .pageNavi .arr { background-size: 22px 12px; width: 22px; height: 12px; display: block;} #news #contents #newsList .pageNavi a .arr { transition: all 0.6s;} #news #contents #newsList .pageNavi a:hover .arr { opacity: 0.5;} #news #contents #newsList .pageNavi .prev { margin-right: 35px;} #news #contents #newsList .pageNavi .prev .arr { background: url("../img/arr_blL.svg") no-repeat;} #news #contents #newsList .pageNavi .next { margin-left: 35px;} #news #contents #newsList .pageNavi .next .arr { background: url("../img/arr_bl.svg") no-repeat;} #news #contents #newsList .pageNavi .num { width: 50px; height: 50px; border-radius: 50px; line-height: 50px; display: block; color: #fff; background: #2e4fb5;} #news #contents #newsList .pageNavi a:hover { opacity: 1;} #news #contents #newsList .pageNavi a .num { color: #2e4fb5; background: #fff; transition: all 0.6s;} #news #contents #newsList .pageNavi a:hover .num { background: #f3f6f7;} #news #contents #newsList .pageNavi .abb { width: 50px; display: block; color: #2e4fb5;} #news #contents #newsDetail .post { width: 86%; max-width: 1040px; margin: 0 auto; font-weight: 600;} #news #contents #newsDetail .post{ font-weight: 600;} #news #contents #newsDetail .post .info .date { margin-right: 30px; font-weight: 600;} #news #contents #newsDetail .post .info .tag span { padding: 5px 15px; border-radius: 30px; margin-right: 10px; background: #2e4fb5; color: #fff; display: inline-block; font-weight: 400;} #news #contents #newsDetail .post .tit { font-size: 30px; margin: 40px 0 100px 0; font-weight: 700;} #news #contents #newsDetail .post .txt { font-size: 20px; line-height: 2;} #news #contents #newsDetail .post .txt p { margin-bottom: 50px;} #news #contents #newsDetail .post .txt a { color: #2e4fb5; text-decoration: underline;} #news #contents #newsDetail .post figure { margin: 0 0 50px 0; text-align: center;} #news #contents #newsDetail .post figure img { max-width: 100%;} #news #contents #newsDetail .postPageNavi { font-size: 20px; position: relative; text-align: center;} #news #contents #newsDetail .postPageNavi a { display: inline-block; padding: 10px 30px;} #news #contents #newsDetail .postPageNavi .prev { left: 0; position: absolute;} #news #contents #newsDetail .postPageNavi .prev a { padding-left: 60px; color: #2e4fb5; background: url("../img/arr_blL.svg") left center no-repeat; background-size: 22px 12px;} #news #contents #newsDetail .postPageNavi .next { right: 0; position: absolute;} #news #contents #newsDetail .postPageNavi .next a { padding-right: 60px; color: #2e4fb5; background: url("../img/arr_bl.svg") right center no-repeat; background-size: 22px 12px;} #news #contents #newsDetail .postPageNavi .back { margin: 0 auto;} #news #contents #newsDetail .postPageNavi .back a { background: #2e4fb5; color: #fff; border-radius: 30px;} @media screen and (max-width: 1100px) { #news #contents #newsList .list li a { padding: 25px 50px 25px 40px;} #news #contents #newsList .list li a:after { right: 30px;} #news #contents #newsList .list li a:hover:after { right: 30px;} #news #contents #newsDetail .postPageNavi .back { padding-top: 60px;} } @media screen and (min-width: 751px) { } @media screen and (max-width: 750px) { #news #contents .mainTitArea { background: url("../img/news/mv_sp.jpg") center center no-repeat; background-size: cover;} #news #contents #newsList .list li a { padding: 15px 10% 20px 5%; display: block; min-height: inherit;} #news #contents #newsList .list li a:after { background-size: 11px 6px; width: 11px; height: 6px; right: 10px; top: 0; bottom: 0; margin: auto;} #news #contents #newsList .list li a:hover:after { background-size: 11px 6px; width: 11px; height: 6px; right: 10px;} #news #contents #newsList .list li a .info { width: 100%; margin-bottom: 10px;} #news #contents #newsList .list li a .info .date { width: 100px;} #news #contents #newsList .list li a .info .tag { width: calc( 100% - 100px); display: flex;} #news #contents #newsList .list li a .info .tag .item { padding: 5px 10px; font-size: 12px; margin-right: 5px;} #news #contents #newsList .list li a .txt { width: 100%;} #news #contents #newsList .pageNavi { margin-top: 50px;} #news #contents #newsList .pageNavi li { margin: 0 2px;} #news #contents #newsList .pageNavi .arr { background-size: 11px 6px; width: 11px; height: 6px;} #news #contents #newsList .pageNavi .prev { margin-right: 15px;} #news #contents #newsList .pageNavi .next { margin-left: 15px;} #news #contents #newsList .pageNavi .num { width: 30px; height: 30px; border-radius: 30px; line-height: 30px;} #news #contents #newsList .pageNavi .abb { width: 30px;} #news #contents #newsDetail .post { width: 100%; padding: 0 5.14%;} #news #contents #newsDetail .post .info .date { margin-right: 15px;} #news #contents #newsDetail .post .info .tag span { padding: 5px 10px; margin-right: 5px;} #news #contents #newsDetail .post .tit { font-size: 25px; margin: 20px 0 30px 0;} #news #contents #newsDetail .post .txt { font-size: 16px;} #news #contents #newsDetail .post .txt p { margin-bottom: 30px;} #news #contents #newsDetail .post figure { margin: 0 0 30px 0;} #news #contents #newsDetail .postPageNavi { font-size: 16px;} #news #contents #newsDetail .postPageNavi a { padding: 10px 15px;} #news #contents #newsDetail .postPageNavi .prev a { padding-left: 20px; background-size: 11px 6px;} #news #contents #newsDetail .postPageNavi .next a { padding-right: 20px; background-size: 11px 6px;} #news #contents #newsDetail .postPageNavi .back { padding-top: 50px;} }