@charset "utf-8";
/* CSS Document */

/*-------------------------------------------------------------
 *
 *					style_business.css
 *
 *-------------------------------------------------------------*/

 body                                           { overflow-x: hidden; }
.business .main-content .business-container     { display: flex; flex-wrap: wrap; max-width: 1010px; margin: 90px auto 0; justify-content: space-between; }
.business .main-content .business-container .business-box       { width: calc(100% / 3); margin: 35px 0; }
.business .main-content .business-container .business-box:nth-child(3n+2):last-child { margin-left: auto; margin-right: 33%; }

.business .main-content .business-container .business-box img   { margin: 0 auto; }
.business .main-content .business-container .business-box .btn  { width: 245px; margin: 0 auto; line-height: 1.2; min-height: 70px; display: flex; justify-content: center; align-items: center; }
.business .main-content .business-container .business-box .btn a{ padding: 0; }


/* bussiness.html */
.business-detail-box                      { margin-bottom: 160px; }
.business-detail-box .index               { display: flex; align-items: center; width: 700px; }
.business-detail-box .index img           { width: 160px; margin-right: 10px; }
.business-detail-box .index h1,
.business-detail-box .index h2            { font-size: 250%; letter-spacing: 0.05em; }

.business-detail-box.even .index            { margin-left: auto; }

.business-detail-box .textBox               { display: flex; align-items: center; justify-content: space-between; }
.business-detail-box.odd .textBox           { flex-direction: row-reverse; }

.business-detail-box .textBox .people         { width: 500px; position: relative; }
.business-detail-box.odd .textBox .people img        { margin: -300px 70px 0 auto; }
.business-detail-box.even .textBox .people img       { margin: -300px auto 0 70px; }

.business-detail-box .textBox .people p.name  { position: absolute; font-size: 110%; line-height: 1.4; bottom: -33px;  }
.business-detail-box.odd .textBox .people p.name   { right: 150px; }
.business-detail-box.even .textBox .people p.name  { left: 170px; }


.business-detail-box .textBox .people span   { position: absolute; height: 310px; width: 310px; transform: rotateX(55deg) rotateZ(45deg) translate(75px); display: inline-block; background: linear-gradient(65deg, rgba(176,86,189,1) 14%, rgba(17,156,241,1) 60%, rgba(61,210,214,1) 95%); bottom: -100px; z-index: -1; }
.business-detail-box.odd .textBox .people span    { right: 110px; }
.business-detail-box.even .textBox .people span   { left: 20px; }
.business-detail-box .textBox .people span::after   { content: ""; height: 310px; width: 260px; transform: rotateX(32deg) rotateZ(0deg) translate(24px); display: inline-block; background: #fff; }


.business-detail-box .textBox .text       { width: 700px; }
.business-detail-box .textBox .text p.colBlue     { font-size: 115%; margin-bottom:7px; letter-spacing: 0.05em; }
.business-detail-box .textBox .text p.setsumei    { margin-bottom: 33px; }


.business-detail-box .textBox .text .gray { background: #ebebeb; padding: 30px; border-radius: 30px; }


/* business-menuArea */
#business-menuArea                          { max-width: 1050px; margin: 0 auto; }
#business-menuArea ul                       { row-gap: 31px; }
#business-menuArea li                       { width: 175px; line-height: 1.3; font-size: 14px; }
#business-menuArea li:hover                 { opacity: 0.8; }
#business-menuArea li:hover a               { text-decoration: none; }
#business-menuArea li img                   { width: 78%; margin: 0 auto 5px; }

@media screen and ( max-width:1400px ) {
    .business-detail-box .index h1,
    .business-detail-box .index h2  { font-size: 220%; }
}

@media screen and ( max-width:1100px ) {
    .business .main-content .business-container .business-box img    { width: 100%; height: auto; }
    .business .main-content .business-container .business-box .btn   { width: 226px; }

    .business-detail-box .textBox .text                        { width: 50%; }
}


@media screen and ( max-width:767px ) {

    .business .main-content .business-container                 { display: block; margin: 50px auto 0; }
    .business .main-content .business-container .business-box   { width: 100%; }
    .business .main-content .business-container .business-box img   { width: 225px; }
    .business .main-content .business-container .business-box .btn  { min-height: 57px; }


    /* bussiness.html */
    .child .main-content                                      { overflow-x: hidden; width: 100%; }
    .business-detail-container                            { margin-top: 100px; }
    .business-detail-box .index                           { display: block; width: 190px; text-align: center; margin-left: 7%; }
    .business-detail-box.even .index                      { margin-right: 4%; }
    .business-detail-box .textBox                         { display: block; }

    .business-detail-box .index img                       { width: 100px; margin: 0 auto; }
    .business-detail-box .index h1,
    .business-detail-box .index h2                        { font-size: 150%; line-height: 1.3; }

    .business-detail-box .textBox .people,
    .business-detail-box .textBox .text                   { width: 100%; }
    .business-detail-box .textBox .people img             { width: 180px; }
    .business-detail-box.odd .textBox .people img    { margin: -210px 0 0 auto; }
    .business-detail-box.even .textBox .people img   { margin: -210px auto 0 5%; }
    .business-detail-box .textBox .people p.name          { font-size: 79%; bottom: -29px; }
    .business-detail-box.odd .textBox .people p.name  { right: 50px;  }
    .business-detail-box.even .textBox .people p.name { left: 75px; }

    .business-detail-box .textBox .people span            { width: 200px; height: 200px; bottom: -60px; }
    .business-detail-box.odd .textBox .people span   { right: 40px; }
    .business-detail-box.even .textBox .people span  { left: -39px; }
    .business-detail-box .textBox .people span::after     { height: 200px; width: 170px; transform: rotateX(31deg) rotateZ(0deg) translate(15px); }

    .business-detail-box .textBox .text                   { margin-top: 80px; padding-right: 15px; padding-left: 15px; }


    /* business-menuArea */
    #business-menuArea li                               { width: calc(100% / 3); font-size: 12px; }



}