@charset "utf-8";

/* Reset */
html,body,h1,h2,h3,h4,h5,h6,div,p,blockquote,pre,code,address,ul,ol,li,nav,section,article,header,footer,main,aside,dl,dt,dd,table,thead,tbody,tfoot,label,caption,th,td,form,fieldset,legend,hr,input,button,textarea,object,figure,figcaption {margin:0;padding:0;}
body,input,select,textarea,button,img,fieldset {border:none;}
a, abbr, address, article, aside, audio, b, blockquote, body, br, button, canvas, caption, cite, code, col, data, datalist, dd, del, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hr, html, i, iframe, img, input, ins, kbd, label, legend, li, main, mark, meter, nav, object, ol, output, p, pre, progress, q, s, samp, section, select, small, span, strong, sub, sup, table, td, textarea, th, time, u, ul, var, video {-webkit-box-sizing: border-box;box-sizing: border-box;}
ul,ol,li{list-style:none;}
u,ins,a{text-decoration:none;}
a {color: inherit;text-decoration: none;-webkit-tap-highlight-color: rgba(0,0,0,.1);}

html { font-size: 10px;}
body {font-size: 1rem;font-family: 'SUIT', sans-serif;color: #21242A;}

.intro {position: relative;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;height: 80rem;background: url(../img/bg_intro.png) lightgray 50% / cover no-repeat;}



.intro .intro-inner {position: relative;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;width: 110rem;height: 60.3rem;padding-left: 3rem;margin: 0 auto;}
.intro .intro-txt01  {font-size: 4rem;font-weight: 600;}
.intro .intro-txt02  {margin-top: 12rem;}
.intro .intro-txt02 .txt01 {font-size: 2.4rem;font-weight: 700;}
.intro .intro-txt02 .txt02 {font-size: 1.6rem;font-weight: 500;margin-top: 2rem;}
.intro .intro-img {position: absolute;top: 0rem;right: 0;}
.intro .intro-img img.pc {width: 63rem;height:60.3rem;}
.intro .intro-img img.mobile {display: none;}
.contact {width: 104rem;padding: 12rem 0;margin: 0 auto;}
.contact h3 {font-size: 3.2rem;font-weight: 700;}
.contact .contact-list {display: -webkit-box;display: -ms-flexbox;display: flex;margin-top: 6rem;}
.contact .contact-list li {-webkit-box-flex: 1;-ms-flex: 1;flex: 1;}
.contact .contact-list .tit {display: block;line-height: 6rem;font-size: 1.6rem;font-weight: 700;}
.contact .contact-list .email {display: inline-block;line-height: 6rem;font-size: 1.6rem;font-weight: 500;vertical-align: top;}

.footer {background-color: #F7F7F7;padding: 8rem 0;}
.footer .footer-inner {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;width:104rem;margin: 0 auto;}
.footer h4 {font-size: 2rem;font-weight: 600;margin-bottom: 3.6rem;}
.footer .address {display: -webkit-box;display: -ms-flexbox;display: flex;gap: 3.6rem;}
.footer .address strong {display: block;font-size: 1.4rem;font-weight: 700;margin-bottom: 1.2rem;}
.footer .address span {display: block;font-size: 1.2rem;font-weight: 500;}
.footer .logo {width: 10rem;height:2.4rem;background: url(../img/puzzle_logo02.svg) no-repeat 0 50% / auto 2.4rem;font-size: 0;line-height: 0;margin-bottom: 1.2rem;}
.footer .copyright {font-size: 1.2rem;font-weight: 500;}

.intro .logo-area {display: block;padding: 2rem 0.6rem;
    padding: 2rem 0.6rem;
    position: absolute;
    top: 0;
    left: 5px;
}
.intro .logo {width: 8rem;height: 2rem;background: url(../img/puzzle_logo01.svg) no-repeat 0 50% / auto 2rem;font-size: 0;line-height: 0;}



@media (max-width: 1099px) and (min-width: 768px) {
    html {font-size: 8px;}
    .intro .logo {width: 13rem;height: 2.5rem;background: url(../img/puzzle_logo01.svg) no-repeat 0 50% / auto 2.5rem;font-size: 0;line-height: 0;}
    .intro .intro-inner {width: 100%;}
    .contact,
    .footer .footer-inner  {width: 100%;padding-left: 3rem;padding-right: 3rem;}
}

@media (max-width: 767px) {
    .intro {display: block;height: auto;background-image: url(../img/bg_intro_m.png);}
    .intro .logo-area {display: block;padding: 2rem 0.6rem;}
    .intro .logo {width: 8rem;height: 2rem;background: url(../img/puzzle_logo01.svg) no-repeat 0 50% / auto 2rem;font-size: 0;line-height: 0;}

    .intro .intro-inner {width: 100%;height: auto;padding-bottom: 3rem;}
    .intro .intro-txt01  {font-size: 1.7rem;padding-right: 8.9rem;margin-top: 4rem;}
    .intro .intro-txt02 {padding-right: 8.9rem;margin-top: 3.2rem;}
    .intro .intro-txt02 .txt01 {font-size: 1.4rem;}
    .intro .intro-txt02 .txt02 {font-size: 1.3rem;margin-top: 1.8rem;}
    .intro .intro-img {position: relative;margin-top: 3.4rem;padding-left: 2.7vw;}
    .intro .intro-img img.mobile {display: block;width: 100%;height: 100%;}
    .intro .intro-img img.pc {display: none;}

    .contact {width: 100%;padding: 4rem 2rem;}
    .contact .contact-list {-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;gap:3.2rem;;margin-top: 3.2rem;}
    .contact h3 {font-size: 1.5rem;}
    .contact .contact-list .tit {line-height: 1.6rem;font-size: 1.3rem;}
    .contact .contact-list .email {line-height: 1.6rem;font-size: 1.3rem;}
    
    .footer {padding: 4rem 2rem;}
    .footer .footer-inner {width: 100%;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;grid-gap: 6rem   ;}
    .footer h4 {font-size: 1.2rem;margin-bottom: 2rem;}
    .footer .address {-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;gap: 2rem;}
    .footer .address strong {font-size: 1.2rem;margin-bottom: 0.8rem;} 
    .footer .address span {font-size: 1.1rem;}
    .footer .logo {height: 1.8rem;background-size: auto 1.8rem;margin-bottom: 0.8rem;}
    .footer .copyright {font-size: 1.1rem;}
}