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

/*-------------------------------------------------------------
 *
 *					style_future.css
 *
 *-------------------------------------------------------------*/
#panNavi                        { border-bottom: none; }

#mainContents.future            { padding-bottom: 0; }
.bg-future                      { background: rgba(136, 86, 43, 0.7); padding-bottom: 330px; }
.future > *,
.future div:not(#footer) > a    { color: #fff; }

.future #titleArea > *          { color: #fff; }

/* futureMessage */
#mainContents.future #futureMessage        { padding: 25px 0 90px; }
#mainContents.future #futureMessage p      { font-size: clamp(16px, calc(100vw* 20 / 1300), 20px); line-height: 1.7; }
#mainContents.future #futureMessage .future-btnArea             { margin-top: 50px; display: flex; }
#mainContents.future #futureMessage .future-btnArea > div       { border: 1px solid #fff; width: 125px; text-align: center; height: 80px; display: flex; justify-content: center; align-items: center; border-radius: 30px; }
#mainContents.future #futureMessage .future-btnArea > div > a   { font-size: clamp(30px, calc(100vw* 40 / 1300), 40px); padding-bottom: 3px; letter-spacing: 0.15em; text-indent: 0.15em; }
#mainContents.future #futureMessage .future-btnArea > div + div  { margin-left: 10px; }
#mainContents.future #futureMessage .future-btnArea > div:hover         { background: #fff; }
#mainContents.future #futureMessage .future-btnArea > div:hover > a     { color: #a78566; text-decoration: none; }

/* bgImg */
#mainContents.future .bgImg                 { position: relative; }
#mainContents.future .bgImg > img           { position: absolute; z-index: -1; }

#mainContents.future #bg_xrBox.bgImg > img      { top: -170px; right: 0; }
#mainContents.future #bg_aiBox.bgImg > img      { top: -30px; }
#mainContents.future #bg_randdCenter.bgImg > img      { top: 220px; right: 0; }



/* head */
#mainContents.future section                        { position: relative; }
#mainContents.future section:not(#xrBox) > article.head         { margin-top: 90px; }
#mainContents.future section .head p.headIndex      { position: relative; z-index: 1; font-size: clamp(16px, calc(100vw* 20 / 1300), 20px); line-height: 1.7; margin-top:10px; }
#mainContents.future section .head p.headIndex::before  { position: absolute; font-family: "Kanit", sans-serif; color: #ba9e86; font-size: clamp(230px, calc(100vw* 300 / 1300), 300px); text-transform: uppercase; z-index: -1; line-height: 1; letter-spacing: 0.2em;top: 50%; left: 50%; transform: translate(-50%, -50%);  }
#mainContents.future section#xrBox .head p.headIndex::before  { content: 'XR'; }
#mainContents.future section#aiBox .head p.headIndex::before  { content: 'AI'; }
#mainContents.future section#randdCenter .head p.headIndex::before  { content: 'R&D'; }


/* child */
#mainContents.future .child                { margin-top: 110px; }
#mainContents.future section .child h3     { font-size: clamp(55px, calc(100vw* 60 / 1300), 60px); margin-bottom: 20px; color: #fff; }
#mainContents.future section .child h3 span.ja     { font-size: clamp(45px, calc(100vw* 50 / 1300), 50px); }

#mainContents.future .childFlex            { display: flex; justify-content: space-between; flex-direction: row-reverse; border: 1px solid #fff; border-radius: 70px; padding: 32px; }
#mainContents.future .childFlex p.childIndex          { font-size: clamp(33px, calc(100vw* 36 / 1300), 36px); margin: 0; line-height: 1; }
#mainContents.future .childFlex p.kanit-light          { font-size: clamp(40px, calc(100vw* 48 / 1300), 48px); color: #fff; }

#mainContents.future .child .childFlex > div > article { margin-top: 15px; }
#mainContents.future .child .childFlex > div > article + img   { margin-left: auto; display: block; margin-top: 50px; }
#mainContents.future .child .childFlex > div > span    { display: block; }

#mainContents.future .child .childFlex > div + div     { margin-right: 40px; }
#mainContents.future .child .childFlex > div + div .textRight      { font-size: 100%; margin-top: 70px; }

#mainContents.future .childFlex + .childFlex            { border-width: 0 1px 1px 1px; }

#mainContents.future .childFlex .movOpen:hover						{ opacity: 0.8; }


/* xrBox */
#mainContents.future .child .textRight                  { font-size: clamp(15px, calc(100vw* 16 / 1300), 16px); color: #fff; }
#mainContents.future .child .textRight a.link           { color: #fff; }

#xrBox.pageLink                                         { padding-top: 220px; margin-top: -220px; }


/* randdCenter */
#randdCenter > .child       { margin-top: 40px; border: 1px solid #fff; border-radius: 70px; padding: 40px 40px; }
#randdCenter > .child img   { margin: 0 auto; }



@media screen and ( max-width:1200px ) {
    .future img             { width: 100%; max-width: fit-content; }
    #mainContents.future .child .childFlex div { width: 50%; }

}

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

    .future .bg-future      { margin-top: -16px; padding-bottom: 200px; }

    /* bgImg */
    #mainContents.future #bg_xrBox.bgImg > img,
    #mainContents.future #bg_aiBox.bgImg > img                  { top: 0; }

    #mainContents.future #bg_randdCenter.bgImg > img            { top: 330px; }


    /* child */
    #mainContents.future .child                { margin-top: 60px; }
    #mainContents.future .childFlex            { display: block; }
    #mainContents.future .child .childFlex div { width: 100%; }
    #mainContents.future .child .childFlex > div > article + img    { margin-top: 20px; }

    #mainContents.future .child .childFlex > div + div     { margin-right: 0; margin-top: 30px; }

}


@media screen and ( max-width:620px ) {
    #mainContents.future section#randdCenter .head p.headIndex::before  { font-size: clamp(160px, calc(100vw* 300 / 1300), 300px); letter-spacing: 0.1em; }


}