@charset "UTF-8";

/* ------------------ basic ------------------ */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, /*ol, ul, li,*/
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, copyright {
    display: block;
}

/**, no -padding effect */
*, *:before, *:after {
	box-sizing: border-box;
}

html {
  min-height: 100%;
  font-size: 18px;
  line-height: 1.4;
  color: #666;
  background: #fff;
  font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
}

body {
  margin: 0;
  padding:0;
}

:lang(en):not(.fa) {
  font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
}



h1, h2, h3, h4, h5, h6 {
  font-weight:600;
}

p,table,ul,ol,dl,figcaption,small {
  font-weight:600;
}

h1:lang(en), h2:lang(en), h3:lang(en), h4:lang(en), h5:lang(en), h6:lang(en) {
  font-weight:700;
}

a {
    color: #666;
    transition: 0.3s;
    text-decoration: underline;
}

a.anchor{
    display: block;
    padding-top: 280px;
    margin-top: -280px;
}

strong {
  font-weight: 800;
  letter-spacing: 2px;
}

figcaption {
  font-size: 0.9rem;
  margin-top: 0.4rem!important;
}

body a img:hover   {
	filter: alpha(opacity=80);
	opacity:0.8;
}



.forMo {
  display: none;
}




/* ------------------ header ------------------ */

header#globalHeader {
  width: 100%;
  height: 190px;
  z-index: 3;
  background: url("../images/bg-top.webp") repeat-x center 90px;
  background-color: #fff;
}
  header#globalHeader .inner {
    display: flex;
    justify-content: space-between;
    max-width: 1200px;
    margin: 16px auto 40px;
  }

    #taskLogo {
      width: 300px;
    }
      #taskLogo img { 
        width: 100%;
      }

    #companyLogo {
      width: 137px;
    }
      #companyLogo img { 
        width: 100%;
      }


/* transition */
header#globalHeader,
header#globalHeader:after,
header#globalHeader .inner {
    transition: all 0.1s ease;
}

/* Fixed */
header#globalHeader.fixed {

}
  header#globalHeader.fixed .inner {

  }
      header#globalHeader.fixed nav#globalNav {
        position: fixed;
        z-index: 3;
        top: 0;
        width: 100%;
        height: 60px;
        box-shadow: 0 3px 6px -3px rgba(0, 0, 0, 0.3);
        background: #fff4e8;
      }


/* ------------ article ------------ */

article {
  display: flex;
  max-width: 1200px;
  margin: 0 auto;
  justify-content: space-between;
}


/* --- pageTitle --- */

#pageTitle {
  background: #fff4e8;
  padding: 2rem 0;
  margin: 0 0 3rem;
}
  #pageTitle .inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction:row-reverse;
    justify-content: space-between;
  }
    #pageTitle .titArea {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 0;
      padding: 0;
      order: 1;
    }
    #pageTitle .titArea img {
      width: 120px;
      margin: 0 2rem 0 0;
    }
    #pageTitle .titArea h2 span {
      display: block;
      font-size: 1.2rem;
      font-weight: 300;
      margin: 0 0 0.5rem;
      padding: 0;
      color: #bf752c;
    }
    #pageTitle .titArea h2 {
      display: block;
      font-size: 2.8rem;
      font-weight: 500;
      margin: 0;
      padding: 0;
      color: #bf752c;
    }

    #pageTitle p {
      font-size: 1.2rem;
      font-weight: 300;
      line-height: 1.6;
      letter-spacing: 1px;
      color: #bf752c;
      order: 2;
    }


/* --- topCenter left right --- */

  #topCenter {
    display: flex;
    max-width: 680px;
    padding: 0 1rem;
    flex-wrap: wrap;
    flex-direction: row;
    order: 2;
  }


/* --- leftSide --- */

    body.home #leftSide {
      max-width: 260px;
      order: 1;
    }
    body:not(.home) #leftSide {
      max-width: 260px;
      order: 2;
      margin: 0 0 0 1rem;
    }

      #leftSide .bannerArea {
        margin: 0 0 1.5rem;
      }
        #leftSide .bannerArea a img {
          width: 100%;
          margin: 0 0 1rem;
        }
      #leftSide .fraFB {
        display: block;
        width: 100%;
      }


/* --- rightSide --- */

    #rightSide {
      max-width: 200px;
      order: 3;
    }
      #rightSide aside {
        margin-bottom: 2rem;
      }
        #rightSide aside h1 {
          font-size: 0.8rem;
          padding: 0.3rem;
          margin: 0 0 1rem;
          text-align: center;
          border-radius: 3px;
          background: #e2903e;
          color: #fff;
        }
          #rightSide aside a img {
            width: 100%;
            margin: 0 0 1rem;
          }
            #rightSide aside a.textBanner {
              display: block;
              font-size: 0.8rem;
              line-height: 1.2;
              padding: 1rem;
              margin: 0 0 1rem;
              text-align: center;
              text-decoration:none;
              background: #eee;
              border: 1px solid #ccc;
              color: #333;
            }
              #rightSide aside a.textBanner:hover {
                color:#F60;
                border: 1px solid #F60;
              }



/* ------------------ pagetop ------------------ */

#pagetop {
  position: relative;
  max-width: 1200px;
	margin: 3rem auto 0;
}
  #pagetop a img {
    width: 200px;
    position: absolute;
    right: 0;
    bottom: 0;
  }


/* ------------------ footer ------------------ */

#globalFooter {
  position: relative;
  padding: 0 0 1rem;
  color:#fff;
  background: #f6a350;
  border-top: 6px solid #ffcc9a;
}
  #globalFooter .inner {
    display: flex;
    flex-direction: column;
    padding: 3rem 2rem 1rem;
    border-top: 1px solid #fff;
  }

#copyright {
  width: 100%;
	max-width: 1200px;
	font-size: 0.9rem;
	line-height:1.2;
  letter-spacing: 1px;
  text-align:right;
	color:#fff;
	margin: 0 auto;
}
  #copyright a {
    text-decoration:none;
    color:#fff;
  }
    #copyright a:hover {
      text-decoration:underline;
    }




/* -------- btn01 -------- */


  a.btn01 {
    position: relative;
    display: block;
    margin: 0;
    width: auto;
    border-radius: 50vh;
    padding: 1.6em 4.2em;
    text-align: center;
    transition-duration: 200ms;
    background: #CE89DE;
    color:#fff;
    cursor:pointer;
  }
    .btn01::after {
      position: absolute;
      top: 50%;
      right: 2em;
      width: 0.5em;
      height: 0.5em;
      transform: translateY(-50%) rotate(45deg);
      border-right: 2px solid currentColor;
      border-top: 2px solid currentColor;
      content: "";
    }







/* ---------------------------------------- */
/* ------------- flex layout -------------- */
/* ---------------------------------------- */

.flexLayout {
    display: flex;
    width:100%;
    height: auto;
}

  /* --justify-content-- */
    .jc-c { justify-content: center; }
    .jc-fs { justify-content: flex-start; }
    .jc-fe { justify-content: flex-end; }
    .jc-sa { justify-content: space-around; }
    .jc-sb { justify-content: space-between; }

  /* --align-items-- Align to the column*/
    .ai-b { align-items: baseline; }
    .ai-c { align-items: center; }
    .ai-fe { align-items: flex-end; }
    .ai-fs { align-items: flex-start; }
    .ai-s { align-items: stretch; }

  /* --align-content-- Align to the row*/
    .ac-c { align-content: center; }
    .ac-fe { align-content: flex-end; }
    .ac-fs { align-content: flex-start; }
    .ac-sa { align-content: space-around; }
    .ac-sb { align-content: space-between; }
    .ac-s { align-content: stretch; }

  /* --flex-direction-- */
    .fd-c { flex-direction: column; }
    .fd-cr { flex-direction: column-reverse; }
    .fd-r { flex-direction: row; }
    .fd-rr { flex-direction: row-reverse; }

 .flexLayout div img,
 .flexLayout figure img,small {
        display: block;
        width:100%;
        height: auto;
        margin :0;
        padding: 0;
    }

 .item100, .item64, .item60, .item50, .item48, .item34, .item30 {
   width:100%;
   margin :0 0 1rem;
  }



/* ---------------------------------------- */
/* ------------ margin padding ------------ */
/* ---------------------------------------- */

.m20 { margin:20px !important;}
.m30 { margin:30px !important;}
.m40 { margin:40px !important;}
.m50 { margin:50px !important;}

.mt20 { margin-top:20px !important;}
.mt30 { margin-top:30px !important;}
.mt40 { margin-top:40px !important;}
.mt50 { margin-top:50px !important;}
.mt60 { margin-top:60px !important;}
.mt70 { margin-top:70px !important;}
.mt80 { margin-top:80px !important;}

.mb20 { margin-bottom:20px !important;}
.mb30 { margin-bottom:30px !important;}
.mb40 { margin-bottom:40px !important;}
.mb50 { margin-bottom:50px !important;}
.mb80 { margin-bottom:80px !important;}

.p10 { padding:10px !important;}
.p20 { padding:20px !important;}
.p30 { padding:30px !important;}
.p40 { padding:40px !important;}
.p50 { padding:50px !important;}
.p60 { padding:60px !important;}
.p70 { padding:70px !important;}
.p80 { padding:80px !important;}
.p90 { padding:90px !important;}
.p100 { padding:100px !important;}
.p110 { padding:110px !important;}
.p120 { padding:120px !important;}

/* ---------- color ---------- */

.col-blue { color: #3155a4!important; }
.col-red { color: #cf001b !important; }
.col-orange { color:#FF8139 !important; }
.col-green { color:#4B8819 !important; }
.col-indblue { color: #2b4e76 !important; }
.col-white { color: #fff !important; }


/* ---------- text ---------- */

.mid { font-size: 1.4rem!important;
       line-height: 1.6!important; }
.mid3rem { font-size: 2rem!important;
           line-height: 1.6!important; }




/* ---------- align ---------- */

.tal { text-align:left;}
.tar { text-align:right;}
.tac { text-align:center;}



/* ---------- break ---------- */

.brsp { display: block; }
.brpc { display: none; }



/* --------------- Youtube & GoogleMap --------------- */

.youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  margin-bottom:60px;
}
    .youtube iframe {
      position: absolute;
      top: 0;
      right: 0;
      width: 100% !important;
      height: 100% !important;
    }

.gmap {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 75%;
    overflow: hidden;
    margin-bottom: 16px;
}
.gmap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


/* --- HPリンク --- */

a.siteLink {
  display: inline-block;
  margin: 0.5rem 0 0 0;
	word-break: break-all;
}
  a.siteLink:after {
    content: '';
    display: inline-block;
    width: 1.4rem;
    height: 1.4rem;
    margin-left: 0.3rem;
    background-image: url( 'data:image/svg+xml;utf-8,<svg fill="%23999" version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 841.9 595.3" enable-background="new 0 0 841.9 595.3" xml:space="preserve"><g><path d="M260.8,41.5v416h416v-416H260.8z M636.8,417.5h-336v-336h336V417.5z"/><polygon points="204.8,513.5 204.8,337.5 204.8,177.5 204.8,137.5 164.8,137.5 164.8,553.5 580.8,553.5 580.8,513.5 540.8,513.5"/><polygon points="397.6,354.4 515.5,236.5 515.5,321.3 555.5,321.3 555.5,168.2 402.4,168.2 402.4,208.2 487.2,208.2 369.4,326.1"/></g></svg>' );
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center bottom -20%;
  }
    a.siteLink:hover {
      text-decoration: underline;
    }

a.siteLinkBtn {
  display: flex;
  justify-content: left;
  align-items: center;
  width: 80%;
  height: 2rem;
  padding: 0 1rem;
  margin: 0.5rem 0 0 0;
	word-break: break-all;
  font-size: 0.6rem;
  color: #fff!important;
  background: skyblue;
/*  padding: 0.5rem 1rem;*/
  border-radius: 0.3rem;
  position: relative;
}
  a.siteLinkBtn:after {
    content: '';
    display: inline-block;
    width: 1.4rem;
    height: 1.4rem;
    margin-left: 0.3rem;
    background-image: url( 'data:image/svg+xml;utf-8,<svg fill="%23fff" version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 841.9 595.3" enable-background="new 0 0 841.9 595.3" xml:space="preserve"><g><path d="M260.8,41.5v416h416v-416H260.8z M636.8,417.5h-336v-336h336V417.5z"/><polygon points="204.8,513.5 204.8,337.5 204.8,177.5 204.8,137.5 164.8,137.5 164.8,553.5 580.8,553.5 580.8,513.5 540.8,513.5"/><polygon points="397.6,354.4 515.5,236.5 515.5,321.3 555.5,321.3 555.5,168.2 402.4,168.2 402.4,208.2 487.2,208.2 369.4,326.1"/></g></svg>' );
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
  }
  a.siteLinkBtn:hover {
    text-decoration: none!important;
  }



/* ------------ fadein ------------ */

.fadein {
  opacity : 0;
  transform : translate(0, 60px);
  transition : all 1s;
}
 
.fadein.scrollin {
  opacity : 1;
  transform : translate(0, 0);
}