@charset "UTF-8";
/* スマートフォン用CSS */

.hidden-sp {
	display:none !important;
}
.hidden-pc {
	display: inherit !important;
}
.only-sp {
	display: inherit !important;
}
.only-pc {
	display: none !important;
}

html {
    font-size:2vw !important;
}

#wrapper {
  width:100vw;
  overflow-x: hidden;
}

  .inner,
  .pankuzu,
  .page-title {
    width:90vw;
  }

  #header {}
  #header.kaso {
    min-width: auto;
  }
#header.kaso.page-business {
  background: url("/img/title-bg05.png") no-repeat center center;
  background-size: 100%;
  background-color: #f1f2f5;
}
#header.kaso.page-works {
  background: url("/img/title-bg01.png") no-repeat center center;
  background-size: 100%;
  background-color: #f1f2f5;
}
#header.kaso.page-recruit {
  background: url("/img/title-bg02.png") no-repeat center center;
  background-size: 100%;
  background-color: #f1f2f5;
}
#header.kaso.page-company,
#header.kaso.page-privacypolicy {
  background: url("/img/title-bg03.png") no-repeat center center;
  background-size: 100%;
  background-color: #f1f2f5;
}
#header.kaso.page-contact {
  background: url("/img/title-bg04.png") no-repeat center center;
  background-size: 100%;
  background-color: #f1f2f5;
}

#header .inner {
  height:18rem;
}
  #header .inner .header-menu {
    display: flex;
    align-items: center;
    height: auto;
    background-color: rgba(255,255,255,.3);
    padding: 0 1em;
    border-radius: 0 0 1.6rem 1.6rem;
    margin: 0;
    transition: all 0.5s linear;
    justify-content: space-between;
    height: 7rem;
  }
 .inner .header-menu {
    width:90vw;
  }
 .inner .header-menu i::before {
    font-size: 3.4rem;
  }




  #header .inner .logo {
    width:20rem;
  }
#header .inner .logo img {}
 #header .inner .header-menu ul {
    visibility: hidden;
   display: none;
  }
 #header.open .inner .header-menu ul {
    visibility: visible;
   display: block;
   position: absolute;
   bottom:0;
   left:0;
	-webkit-transform: translate(0%, 100%);
	-moz-transform: translate(0%, 100%);
	-ms-transform: translate(0%, 100%);
	-o-transform: translate(0%, 100%);
	transform: translate(0%, 100%);
   width:90vw;
   padding: 1em 0;
   background-color: rgba(255,255,255,.9);
   border-radius: 1rem;
}

#header .inner li {
  list-style-type: none;
  margin: 0 2.6em;
}
#header .inner li a {
  text-decoration: none;
  color: #1a1a1a;
  font-weight: 700;
}
#header .inner li a {
	display: block;
	position: relative;
	text-decoration: none;
  padding:0.6em 0;
}
#header .inner li a::after {
	position: absolute;
	content: '';
	bottom: -0.6rem;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 2px;
	background: #e18526;
	transition: all .3s ease 0s;
}
#header .inner li a:hover{
	cursor: pointer;
}
#header .inner li a:hover::after {
	width: 100%;
}

#header .inner li a span {
  display: block;
  text-align: center;
  line-height: 1.2;
}
  #header .inner li a .en {
    font-size: 2.2rem;
  }
  #header .inner li a .ja {
    font-size: 1.1rem;
  }
/*.header-title-area {
  display: flex;
  flex-direction: column;
  align-items: start;
  margin-left:calc( 3em + 6.4rem);
  height: calc( 100% - 12rem);
  justify-content: center;
}*/
.header-title-area {
  display: flex;
  flex-direction: column;
  align-items: start;
  margin-left:2rem;
  padding-top:7rem;
  height: 18rem;
  justify-content: center;
}
.header-title {
  height:5rem;
}

.pankuzu {
  display: flex;
}
.pankuzu li {
  list-style-type: none;
  font-weight: 400;
  color: #9B9A9C;
  font-size: 1.2rem;
}
.pankuzu li ~ li::before {
  content: "＞";
  display: inline-block;
  color: #9B9A9C;
  margin: 0 0.4em;
}
.pankuzu li a {
  color: #9B9A9C;
  text-decoration: none;
}
.pankuzu li a:hover {
  text-decoration: underline;
}

#article {
  padding:3.2rem 0 18rem;
}

.page-title {
  margin: 10rem auto;
}
.page-title span {
  display: block;
  text-align: center;
  line-height: 1.2;
}
.page-title .en {
  color: #e18526;
  font-family: century-gothic, sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 4rem;
}
.page-title .ja {
  font-size: 1.2rem;
}

  .contact-info {
    min-width: auto;
  }
.contact-info .inner {
  background: url("/img/contact-info.png") no-repeat right -22% top 8%;
  background-size: 40%;
  padding:7.2rem 0 5rem;
}
.contact-info .row1 {}
.contact-info .row1 .htag2 {
  font-size: 2.4rem;
  margin-bottom: 0.5em;
  font-weight: 700;
  line-height: 1.8;
}
.contact-info .row1 .p01 {
  font-size: 1.8rem;
  font-weight: 400;
}
.contact-info .row2 {
  margin-top: 4rem;
  display: flex;
  width:100%;
  justify-content: space-between;
}
.contact-info .row2 dl {
  width:48%;
}
.contact-info .row2 .tel {
  color: #1b8ecd;
  font-weight: 400;
}
.contact-info .row2 .web {
  color: #e18526;
  font-weight: 400;
}
.contact-info .row2 dt {
  font-size: 1.6rem;
}
.contact-info .row2 dt::before {
  font-family: "icomoon";
  content: "\f509";
  font-weight: normal;
}
.contact-info .row2 dd {}
.contact-info .row2 dd a {
  margin: 0.6rem 0;
  width: 100%;
  height:6.8rem;
}
.contact-info .row2 .tel dd a.btn {
  font-size: 2rem;
}
.contact-info .row2 .tel dd a.btn:hover {
  color: #fff;
  background-color: #1b8ecd;
}
/*.contact-info .row2 .tel dd a.btn img {
  width:0.5em;
  display: inline-block;
  margin:0 0.8rem -0.3rem 0;
}*/
  .contact-info .row2 .tel dd a.btn::before {
    font-size: 2.2rem;
  }
.contact-info .row2 .web dd a {}
.contact-info .row2 .web dd a.btn {
  font-size: 1.4rem;
  font-weight: 400;
  font-style: normal;
  background-color: #e18526;
  border-radius: 0.6rem;
  border:1px solid #e18526;
  color: #fff;
}
.contact-info .row2 .web dd a.btn::before {
  font-family: "icomoon";
  content: "\f509";
  font-weight: normal;
  display: inline-block;
  margin: 0 0.5rem 0 0;
}
.contact-info .row2 .web dd a.btn:hover {
  color: #e18526;
  background-color: #fff;
}
.contact-info .row2 dd .time {
  text-align: center;
  font-size: 1.3rem;
}
.contact-info .row2 dd .time span {
  font-size: 1.95rem;
  font-family: century-gothic, sans-serif;
  font-weight: 400;
  font-style: normal;
}

.contact-info .row2 .tel dd a.btn {
    cursor: pointer;
    margin: 0.5rem;
    padding: 1rem 2rem;
    background-image: linear-gradient(90deg, #1b8ecd 50%, transparent 50%);
    background-position: 100%;
    background-size: 250%;
    text-decoration: none;
    transition: all 0.3s;
}
.contact-info .row2 .tel dd a.btn:hover {
    background-position: 0;
    color: #fff;
}

.contact-info .row2 .web dd a.btn {
    cursor: pointer;
    margin: 0.5rem;
    padding: 1rem 2rem;
    background-image: linear-gradient(90deg, #fff 50%, transparent 50%);
    background-position: 100%;
    background-size: 250%;
    text-decoration: none;
    transition: all 0.3s;
}
.contact-info .row2 .web dd a.btn:hover {
    background-position: 0;
    color: #e18526;
}

  #footer {
    padding: 10rem 0;
    min-width: auto;
  }
#footer .inner {
  display: flex;
  justify-content: space-between;
}
#footer .col1 {}
#footer .col1 .logo {
  width:29rem;
  display: block;
}
#footer .col1 .logo img {}
#footer .col1 .info {
  font-size: 1.8rem;
  line-height: 1.9;
  margin: 3.6rem 0;
}
#footer .col1 ul {
  display: flex;
  margin: 3.6rem 0;
}
#footer .col1 li {
  width:3.2rem;
  list-style-type: none;
}
#footer .col1 li ~ li {
  margin-left: 1rem;
}
#footer .col1 li a {}
#footer .col1 li a img {}
#footer .col1 .copyright {
  font-size: 1.2rem;
}
#footer .col2 {
  display: none;
}
/*#footer .col2 {
  display: flex;
  align-items: flex-end;
}
#footer .col2 dl {
  margin-right: 5.6rem;
  width:24rem;
}
#footer .col2 dt {
  color: #1b8ecd;
  font-size: 2.4rem;
  font-family: century-gothic, sans-serif;
  font-weight: 700;
  font-style: normal;
  border-bottom: 1px dotted #1b8ecd;
  padding-bottom: 0.3rem;
}
#footer .col2 dd {
  border-bottom: 1px dotted #1b8ecd;
}
#footer .col2 dd a {
  text-decoration: none;
  color: inherit;
  display: block;
  padding: 0.2rem 0 0.8rem;
  transition: all 0.3s ease-out;
}
#footer .col2 dd a:hover {
  -webkit-transform: translate(8%, 0%);
  -moz-transform: translate(8%, 0%);
  -ms-transform: translate(8%, 0%);
  -o-transform: translate(8%, 0%);
  transform: translate(8%, 0%);
  
}
#footer .col2 dd a span {
  color: #1b8ecd;
  display: block;
}
#footer .col2 dd a .en {
  font-size: 1.9rem;
  font-family: century-gothic, sans-serif;
  font-weight: 400;
  font-style: normal;
}
#footer .col2 dd a .ja {
  font-weight: 400;
  font-size: 1rem;
  line-height: 1;
  margin-top: -0.2rem;
}
#footer .col2 .googlemap {
  width: 40rem;
  height: calc(100% - 4rem);
  overflow: hidden;
}
#footer .col2 .googlemap iframe {
  width:100%;
  height:calc(100% + 40rem);
  margin-top: -20rem;
}*/

#animation_container {
  width:100% !important;
  height: auto !important;
  margin-top:-5px;
}
#canvas {
  width:100% !important;
  height: auto !important;
}

#wrapper.top {}

body.top {
  background-color: #f3f3f3;
}

.top #header .inner {
  height: auto;
}

  .animation-wrap {
    top:50%;
    width:260%;
    min-width: auto;
    margin: 0 0 0 -12%;
  }

.top #article {
  padding: 100vh 0 0;
}

.catchcopy-wrap {
  position: absolute;
  top:50%;
  left: 24%;
  width: 30%;
  min-width:26rem;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
  opacity: 1;
  transition: all 0.5s linear;
}
.catchcopy-wrap2 {
  position: absolute;
  top:50%;
  left: 24%;
  width: auto;
  min-width:auto;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
  opacity: 1;
  transition: all 0.5s linear;
}
.catchcopy-text img {
  height:7.4vw;
  min-height: 4rem;
  margin:0 1.2vw;
}
.catchcopy-text img:nth-of-type(3) {
  margin-right:0;
}
.catchcopy-text img:nth-of-type(6) {
  margin-right:4.6vw;
}
.catchcopy-text img:nth-of-type(7) {
  margin-right:0;
}
.catchcopy-text img:nth-of-type(8) {
  margin-right:0.3vw;
}
.catchcopy-text img:nth-of-type(9) {
  margin-right:0.3vw;
}
.catchcopy-text img:nth-of-type(10) {
  margin-right:0.5vw;
}
.catchcopy-text img:nth-of-type(11) {
  margin-right:0.3vw;
}
.catchcopy-text img:nth-of-type(12) {
  margin-right:0.2vw;
}


/*.catchcopy {
  position: absolute;
  width: 42%;
  min-width:50rem;
  align-self: center;
}*/

  .top section {
    background-color: rgba(255,255,255,.8);
    min-width: auto;
    padding:5rem 0 15rem;
  }
.top section:last-of-type {
  padding-bottom: 24rem;
}

.top-title {}
.top-title img {
  height: 5rem;
}

.top-vision {}
.top-vision dt {
  font-size: 2rem;
  font-weight: 400;
  margin: 2em 0 1.6em;
}
.top-vision dd,
.p08 {
  font-size: 1.7rem;
  line-height: 2.4;
  font-weight: 400;
}


.top-business {
  display: flex;
  justify-content:center;
  flex-wrap: wrap;
  padding: 3rem 0 0;
}
.top-business a {
  display: block;
  width:46%;
  margin: 0 2%;
}
.top-business a:last-of-type {
  margin-top:-4.5%;
}
/*.top-business a img.hover {
  opacity: 0;
  position: absolute;
  width: 31%;
}
.top-business a img.btn {}
.top-business a:hover img.hover {
  opacity: 1;
}
.top-business a:hover img.btn {
  opacity: 0;
}

.flip:hover {
  animation: flip;
  animation-duration: 1s;
}*/
.top-business a img.hover {
  visibility: hidden;
  position: absolute;
  width: 44%;
}
.top-business a img.btn {}
.top-business a:hover img.hover {
  visibility: visible;
}
.top-business a:hover img.btn {
  visibility: hidden;
}

.flip img {
  transition: transform 0.4s ease-out;
}
.flip:hover img {
  transition: transform 1s ease-out;
  transform: rotateY(360deg);
}

.top-works {
  position: relative;
}
.top-works .japan-map {
  display: block;
  width:100%;
  margin: 1rem 0 0 0;
}
  .top-works .readmore-btn {
    bottom: -10%;
  }
  .position-total {
    font-size: 6rem;
    top:20%;
    left:3%;
  }
  .position-total .title {
    font-size: 1.2rem;
  }
  .position-total .oyoso {
    font-size: 2.2rem;
    padding-right: 0.5em;
  }
  .position-total .unit {
    font-size: 3.6rem;
  }
  .position-area {
    font-size: 3rem;
  }
  .position-area.hokkaido {
    top:0%;
    right:4.5%;
  }
  .position-area.tohoku {
    top:36%;
    right:0%;
  }
  .position-area.kanto {
    top:59%;
    right:0%;
  }
  .position-area.chubu {
    bottom: 16.5%;
    left: 53.5%;
  }
  .position-area.kinki {
    top:54%;
    left:16%;
  }
  .position-area.kyushu {
    top:73%;
    left:0%;
  }
.position-area .area {
  font-size: 1.5rem;
  font-family: noto-sans-cjk-jp, sans-serif;
  font-weight: 400;
  font-style: normal;
  display: inline-block;
  padding-right: 1em;
}
.position-area .unit {
  font-size: 1.8rem;
  display: inline-block;
  padding-left: 0.5em;
}

.readmore-btn {}
.readmore-btn a {
  color: #1b8ecd;
  font-size: 1.6rem;
  font-family: century-gothic, sans-serif;
  font-weight: 400;
  font-style: normal;
  text-decoration: none;
  background-color: #fff;
  border: 1px solid #1b8ecd;
  border-radius: 0.6rem;
  display: flex;
  place-items:center;
  place-content:center;
  display: -webkit-box;
  display: -ms-flexbox;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width:23rem;
  height: 5.6rem;
}
.readmore-btn a::before {
  font-family: "icomoon";
  content: "\f509";
  font-weight: normal;
  display: inline-block;
  margin-right: 0.5rem;
  font-size: 1.4rem;
}
.readmore-btn a {
    cursor: pointer;
    margin: 0.5rem;
    padding: 1rem 2rem;
    background-image: linear-gradient(90deg, #1b8ecd 50%, transparent 50%);
    background-position: 100%;
    background-size: 250%;
    text-decoration: none;
    transition: all 0.3s;
}
.readmore-btn a:hover {
    background-position: 0;
    color: #fff;
}

.top-layout1 {
  display: flex;
  justify-content: space-between;
  flex-direction:column-reverse;
}
.top-layout1 .col1 {
  width:100%;
  display: flex;
  flex-direction: column;
}
.top-layout1 .p08 {
  margin: 1.5em 0;
}
.top-layout1 .readmore-btn {
  margin: auto 0 0 auto;
  
}
.top-layout1 .col2 {
  width: 100%;
  margin:2em 0 0;
}
.top-layout1 .col2 img {
  width: 100%;
}


.table1,
.table2 {
  width: 90%;
  margin: 0 auto;
}
.table1 th,
.table1 td,
.table2 th,
.table2 td {
  text-align: left;
  font-size: 1.5rem;
  line-height: 2;
  padding: 1.6em 0;
  border-bottom: 1px solid #ccc;
  letter-spacing: 0.1rem;
}
.table1 th {
  width:27%;
  font-weight: 400;
  vertical-align: middle;
}
.table1 th.word2 {
  letter-spacing: 2em
}
.table1 th.word3 {
  letter-spacing: 0.5em
}
.table1 th.word4 {}
.table1 th.word6 {}

.table1 td {
  position: relative;
}
.table1 td dl {}
.table1 td dl ~ dl {
  margin-top:1em;
}
.table1 td dt {
  font-weight: 400;
}
.table1 td dd {}
.table1 td a,
.table2 td a {
  position: static;
  display: inline-block;
  text-decoration: none;
  color: #e18526;
  font-weight: bold;
  padding:0.1em 1.2em;
  border-radius: 0.6rem;
  border: 1px solid #e18526;
  right:20%;
  top:50%;
	-webkit-transform: translate(0%, 0%);
	-moz-transform: translate(0%, 0%);
	-ms-transform: translate(0%, 0%);
	-o-transform: translate(0%, 0%);
	transform: translate(0%, 0%);
  transition: all 0.2s linear;
  margin-top:0.5em;
}
.table1 td a:hover,
.table2 td a:hover {
  background-color: #e18526;
  color: #fff;
}


.table2 {
  border-bottom: 2px solid #1b8ecd;
}
.table2 th,
.table2 td {
  border-bottom: 0px;
  position: relative;
  line-height: 1.6;
  padding: 1em 0;
}
.table2 th {
  width:28%;
}
.table2 th::before {
  content:"";
  display: block;
  height:1px;
  background-color: #1b8ecd;
  position: absolute;
  top:0;
  left: 0;
  width:calc(100% - 2em);
}
.table2 td {
  border-top:1px solid #ccc;
}
.table2 td a {
  line-height: 2;
}
.table2 tr:last-of-type td {
  padding-bottom: 10rem;
}

.htag002 {
  text-align: center;
  font-size:2.1rem;
  font-weight: 400;
  margin-bottom: 2em;
}


.pp-wrap {
  width: 90%;
  margin: 0 auto;
  letter-spacing: 0.1rem;
}
.pp-intro {
  font-size: 1.7rem;
  margin-bottom: 4em;
}
.pp-wrap dl {
  margin-top: 2.5em;
}
.pp-wrap dt {
  font-size: 2rem;
  font-weight: bold;
  color: #e18526;
  border-bottom: 1px solid #e18526;
  margin-bottom: 0.3em;
  line-height: 2;
}
.pp-wrap dd {
  font-size: 1.7rem;
  line-height: 2;
}
.pp-wrap dd ul {}
.pp-wrap dd li {
  list-style-type:none;
  padding-left: 1em;
  text-indent: -1em;
}
.pp-wrap dd li::before {
  content: "■";
}
.pp-wrap dd a {
  color: inherit;
  text-decoration: none
}
.pp-wrap dd a:hover {
  text-decoration: underline;
}


.works-wrap {}
.works-intro {
  font-size: 1.7rem;
  letter-spacing: 0.1rem;
  margin-bottom: 2em;
}
.works-images {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.works-images a {
  display: block;
  width:31%;
  margin-top:3.5%;
}
.works-images a img {
  display: block;
  width:100%;
}

.pagination {
  margin-top:6em;
  display: flex;
  place-items:center;
  place-content:center;
  display: -webkit-box;
  display: -ms-flexbox;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.pagination a,
.pagination span {
  display: block;
  background-color: #fff;
  border: 1px solid #e18526;
  color: #e18526;
  font-size: 1.8rem;
  padding:0.2em 0.4em;
  text-decoration: none;
  font-weight: bold;
  margin:0 0.4rem;
  border-radius: 0.2rem;
}
.pagination span.current,
.pagination a:hover {
  background-color:#e18526;
  color: #fff;
}


.business-contents {
  margin-top: 5.6rem;
}
.business-contents img {
  margin-top: 4.6rem;
  padding-top: 2rem;
}


.partner {
  margin: 10rem 0 0;
}
.partner .p01 {
  width:80%;
  margin:0 auto;
  font-size: 1.7rem;
  line-height: 2;
  letter-spacing: 0.1rem;
}
.partner a {
  margin: 6rem auto 0;
  width: 28rem;
  height:7.4rem;
  display: flex;
  place-items: center;
  place-content: center;
  display: -webkit-box;
  display: -ms-flexbox;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  text-decoration: none;
  font-size: 1.8rem;
  font-weight: 400;
  font-style: normal;
  background-color: #e18526;
  border-radius: 0.6rem;
  border:1px solid #e18526;
  color: #fff;
  cursor: pointer;
  padding: 1rem 2rem;
  background-image: linear-gradient(90deg, #fff 50%, transparent 50%);
  background-position: 100%;
  background-size: 250%;
  transition: all 0.3s;
}
.partner a:hover {
    background-position: 0;
    color: #e18526;
}


.table3 th label {
  margin-right: 1em;
}


.form-contents {
  width: 90%;
  margin: 0 auto;
}
.table3 {
  width:100%;
}
.table3 th,
.table3 td {
  font-size: 1.5rem;
  vertical-align: top;
  font-weight: 400;
  padding: 1.5em 0;
}
.table3 th {
  text-align: left;
  width:36%;
  line-height: 4.8rem;
  position: relative;
}
.table3 th.kind {
  text-align: right;
}
.table3 th.req::before,
.table3 th.any::before {
  display: inline-block;
  border-radius: 0.2rem;
  font-size: 1.2rem;
  padding: 0.2rem 0.6rem 0.2rem 0.8rem;
  letter-spacing: 0.2rem;
  margin-right: 2em;
  line-height: 1.8;
}
.table3 th.any::before {
  display: none;
}
.table3 th.kind::before {
  position: absolute;
  left:0;
  top:2.5em;
}
.table3 th.req::before {
  content: "必須";
  background-color: #e18613;
  color: #fff;
}
.table3 th.any::before {
  content: "任意";
  border: 1px solid #1b8ecd;
  color: #1b8ecd;
}

.table3 td span {
  position: relative;
  top:-0.4rem;
  display: inline-block;
  margin-right: 1rem;
}
.table3 td input:not([type="radio"]),
.table3 td textarea {
  width:100%;
  padding:0.5em 1em;
}
.table3 td input.zipcode {
  width:40%;
  margin-bottom: 0.8em;
}

input[type="submit"] {
  background-color: #e18613;
  color:#fff;
  text-align: center;
  border: 0;
  display: block;
  width: 10em;
  margin: 6rem auto 0;
  cursor: pointer;
}