@charset "UTF-8";

/*----------------------------------------------------
	TOP
----------------------------------------------------*/

#top .video {
  position: relative;
  overflow: hidden;
  width: 100%;
  margin: 0 0 100px 0;
  height: calc(100vh - 70px);
}
#top .video video {
  position: absolute;
  top: 0;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, 0);
}
#top .video .news {
  padding: 0 0 10px;
  position: absolute;
  bottom: 0;
  right: 0;
}
#top .video .news a {
  color: #282828;
  text-decoration: none;
  display: block;
}
#top .video .news a dl {
  padding: 10px;
  background: rgba(255,255,255,.8);
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 0 10px;
  transition: .3s;
}
#top .video .news a:hover dl {
  background: #fff;
}
#top .video .news a + a {
  margin: 5px 0 0 0;
}
#top .video .news a dl dt {
  width: 100px;
  color: #0068b7;
  font-weight: 700;
  text-align: center;
  border-radius: 30px;
  border: 1px solid #0068b7;
  font-size: 11px;
}
#top .video .news a dl dd.date {
  width: 62px;
  font-size: 12px;
}
#top .video .news a dl dd.ttl {
  font-size: 14px;
  font-weight: 700;
}
#top .video .news a:hover dl dd.ttl {
  text-decoration: none;
}
#top .video h1 {
  width: 100%;
  padding: 0 5%;
  color: #fff;
  font-size: 54px;
  font-feature-settings: "palt";
  letter-spacing: 2px;
  text-align: center;
  line-height: 1.3;
  text-shadow: #000000 0 0 8px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
#top .video h1 span {
  font-size: 24px;
  display: block;
}
@media screen and (max-width: 1080px) {
  #top .video h1 {
    font-size: 34px;
  }
  #top .video h1 span {
    font-size: 18px;
  }
}
.cp_arrows {
	position: absolute;
	display: flex;
	height: 300px;
	margin: 0 auto;
	justify-content: center;
	align-items: center;
  bottom: -170px;
  left: 50%;
  transform: translate(-50%, -50%);
}
.cp_arrows .cp_arrow {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	        transform: translate(-50%, -50%);
	-webkit-transform-origin: 50% 50%;
	        transform-origin: 50% 50%;
	opacity: 0;
}
.cp_arrows .cp_arrowfirst {
	-webkit-animation: arrow-move08 2s ease-in-out infinite;
	        animation: arrow-move08 2s ease-in-out infinite;
}
.cp_arrows .cp_arrowsecond {
	-webkit-animation: arrow-move08 2s 1s ease-in-out infinite;
	        animation: arrow-move08 2s 1s ease-in-out infinite;
}
.cp_arrows .cp_arrow:before, .cp_arrows .cp_arrow:after {
	position: absolute;
	top: 0;
	left: -10px;
	display: block;
	width: 30px;
	height: 3px;
	content: '';
	background: #fff;
}
.cp_arrows .cp_arrow:before {
  transform: rotate(30deg) translateX(-39%);
  transform-origin: top left;
}
.cp_arrows .cp_arrow:after {
  transform: rotate(-30deg) translateX(37%);
  transform-origin: top right;
}
.cp_arrows .btn {
  width: 100px;
  height: 70px;
  cursor: pointer;
}
@-webkit-keyframes arrow-move08 {
	0% {
		top: 40%;
		opacity: 0;
	}
	70% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
@keyframes arrow-move08 {
	0% {
		top: 40%;
		opacity: 0;
	}
	70% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
#top .block_technology .block1 {
  padding: 0 0 100px 5%;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 50px;
}
#top .block_technology .block1 .vertical {
  width: 75px;
  /* position: sticky;
  top: 90px;
  left: 0; */
}
#top .block_technology .block1 .vertical h2 {
  width: 100%;
  padding: 70px 0 0 0;
  font-family: serif;
  font-size: 30px;
  writing-mode: vertical-rl;
  background: url(../images/top/about_h2.png) no-repeat center top / 75px auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
#top .block_technology .block1 .vertical h2 span {
  color: #0068b7;
}
#top .block_technology .block1 .box {
  width: 360px;
}
#top .block_technology .block1 .box h3 {
  margin: 0 0 20px 0;
  font-size: 38px;
  font-weight: 700;
}
#top .block_technology h4 {
  margin: 0 0 20px 0;
  color: #0068b7;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.4;
}
#top .block_technology p {
  margin: 0 0 20px 0;
  font-size: 16px;
}
#top .block_technology .block1 figure {
  width: calc(100% - 535px);
  padding: 40px 0 0 0;
  position: relative;
}
#top .block_technology .block1 figure img {
  position: relative;
}
#top .block_technology .block1 figure:before {
  content: "";
  width: calc(100% - 40px);
  height: calc(100% + 40px);
  background: #eae8e5;
  position: absolute;
  top: 0;
  right: 0;
}
#top .block_technology .block2 {
  padding: 0 5% 140px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  flex-direction: row-reverse;
  gap: 50px;
}
#top .block_technology .block2 .box {
  width: 500px;
}
#top .block_technology .block2 figure {
  width: calc(100% - 550px);
  position: relative;
}
#top .block_technology .block2 figure img {
  position: relative;
}
#top .block_technology .block2 figure:before {
  content: "";
  width: calc(100% - 40px);
  height: 100%;
  background: #eae8e5;
  position: absolute;
  top: 40px;
  left: 0;
}
#top .block_technology .block3 {
  padding: 0 0 100px calc(5% + 125px);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 50px;
}
#top .block_technology .block3 .box {
  width: 380px;
}
#top .block_technology .block3 figure {
  width: calc(100% - 430px);
  padding: 40px 5% 0 0;
  position: relative;
}
#top .block_technology .block3 figure img {
  position: relative;
}
#top .block_technology .block3 figure:before {
  content: "";
  width: calc(100% - 40px);
  height: calc(100% + 40px);
  background: #eae8e5;
  position: absolute;
  top: 0;
  right: 0;
}
#top .block_technology .anim-btn {
  margin: 0 0 100px 0;
  font-size: 16px;
}
#top .block_about {
  margin: 0 0 100px 0;
  padding: 60px 0 60px 5%;
  background: #e0e1ea;
}
#top .block_about .block {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 50px;
}
#top .block_about .block .vertical {
  width: 75px;
  /* position: sticky;
  top: 90px;
  left: 0; */
}
#top .block_about .block .vertical h2 {
  width: 100%;
  padding: 70px 0 0 0;
  font-family: serif;
  font-size: 30px;
  writing-mode: vertical-rl;
  background: url(../images/top/about_h2.png) no-repeat center top / 75px auto;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
#top .block_about .block .vertical h2 span {
  color: #0068b7;
}
#top .block_about .block .box {
  width: calc(100% - 125px);
  overflow: hidden;
}
#top .block_about .block .box h3 {
  margin: 0 0 20px 0;
  font-size: 38px;
  font-weight: 700;
}
#top .block_about .block .box .slideshow {
  width: 3000px;
  display: flex;
  animation: loop-slide 50s infinite linear 1s both;
}
#top .block_about .block .box .slideshow img {
  width: 500px;
}
@keyframes loop-slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
#top .block_about .block .box dl {
  max-width: 1400px;
  margin: 40px 0 60px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
#top .block_about .block .box dl dt {
  width: 300px;
  color: #0068b7;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.5;
}
#top .block_about .block .box dl dd {
  width: calc(100% - 340px);
  font-size: 16px;
  padding: 0 5% 0 0;
}
#top .block_works {
  margin: 0 0 70px 0;
  padding: 0 5%;
  position: relative;
}
#top .block_works::before {
  content: "";
  width: 100%;
  height: calc(100% - 60px);
  background: url(../images/top/works_bg.png) no-repeat center center / cover;
  position: absolute;
  top: 130px;
  left: 0;
}
#top .block_works .inner {
  max-width: 1000px;
  margin: 0 auto;
  position: relative;
}
#top .block_works h2 {
  height: 45px;
  margin: 0 0 40px 0;
  font-size: 30px;
  font-weight: 700;
  text-align: center;
  background: url(../images/top/works_h2_l.png) no-repeat left center / auto 100%,
  url(../images/top/works_h2_r.png) no-repeat right center / auto 100%;
  position: relative;
}
#top .block_works h2::before {
  content: "";
  width: 100%;
  height: 1px;
  background: #000;
  position: absolute;
  top: 22px;
  left: 0;
}
#top .block_works h2 span {
  padding: 0 30px;
  line-height: 1;
  background: #fff;
  position: relative;
  z-index: 2;
}
#top .block_works ul {
  margin: 0 0 60px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}
#top .block_works ul li {
  width: calc(33.33% - 20px);
}
#top .block_works ul li a {
  text-decoration: none;
}
#top .block_works ul li figure {
  margin: 0 0 5px 0;
  overflow: hidden;
}
#top .block_works ul li a figure img {
  transition: .3s;
}
#top .block_works ul li a:hover figure img {
  transition: .5s;
  transform: scale(1.07);
}
#top .block_works ul li h3 {
  font-size: 15px;
  font-weight: 700;
}
#top .block_works ul li p {
  font-size: 13px;
}
#top .block_project {
  padding: 80px 0;
}
#top .block_project .inner {
  padding: 0 5%;
}
#top .block_project .inner a {
  max-width: 1000px;
  margin: 0 auto;
  display: block;
  transition: .3s;
}
#top .block_project .inner a:hover {
  opacity: .7;
}
#top .block_equipment {
  margin: 0 0 100px 0;
  padding: 80px 5%;
  background: #dee0e1;
  position: relative;
}
#top .block_equipment .inner {
  max-width: 1000px;
  margin: 0 auto;
  position: relative;
}
#top .block_equipment h2 {
  height: 45px;
  margin: 0 0 40px 0;
  font-size: 30px;
  font-weight: 700;
  text-align: center;
  background: url(../images/top/works_h2_l.png) no-repeat left center / auto 100%,
  url(../images/top/works_h2_r.png) no-repeat right center / auto 100%;
  position: relative;
}
#top .block_equipment h2::before {
  content: "";
  width: 100%;
  height: 1px;
  background: #000;
  position: absolute;
  top: 22px;
  left: 0;
}
#top .block_equipment h2 span {
  padding: 0 30px;
  line-height: 1;
  background: #dee0e1;
  position: relative;
  z-index: 2;
}
#top .block_equipment dl {
  margin: 0 0 30px 0;
  text-align: center;
}
#top .block_equipment dl dt {
  margin: 0 0 20px 0;
  font-size: 22px;
  font-weight: 500;
}
#top .block_equipment dl dd {
  max-width: 800px;
  margin: 0 auto;
}
#top .block_equipment ul {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}
#top .block_equipment ul li {
  width: calc(33.33% - 20px);
}
#top .block_equipment ul li a {
  background: #fff;
  text-decoration: none;
  display: block;
}
#top .block_equipment ul li figure {
  overflow: hidden;
}
#top .block_equipment ul li a figure img {
  width: 100%;
  transition: .3s;
}
#top .block_equipment ul li a:hover figure img {
  transition: .5s;
  transform: scale(1.07);
}
#top .block_equipment ul li p {
  padding: 10px 0;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
}
#top .block_flow {
  padding: 0 5% 100px;
}
#top .block_flow a {
  max-width: 1000px;
  margin: 0 auto;
  padding: 15px 100px 15px 40px;
  text-decoration: none;
  border: 3px solid #0068b7;
  background: url(../images/top/ico_flow.png) no-repeat right 40px center / 40px auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  transition: .3s;
}
#top .block_flow a:hover {
  background-color: #e0f2fa;
}
#top .block_flow h2 {
  width: 220px;
  color: #0068b7;
  font-weight: 500;
  font-size: 30px;
  line-height: 1.4;
}
#top .block_flow p {
  width: calc(100% - 230px);
  font-size: 16px;
  font-weight: 700;
}
#top .block_flow.english h2 {
  width: 260px;
  font-size: 28px;
}
#top .block_flow.english p {
  width: calc(100% - 270px);
  font-size: 14px;
}
#top .block_news {
  padding: 0 5% 150px;
}
#top .block_news .inner {
  max-width: 1000px;
  margin: 0 auto;
}
#top .block_news h2 {
  margin: 0 0 30px 0;
  font-size: 30px;
  font-weight: 700;
  text-align: center;
}
#top .block_news ul {
  margin: 0 0 20px 0;
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 30px;
}
#top .block_news ul li {
  width: calc(25% - 22.5px);
  display: flex;
  transition: .3s;
}
#top .block_news ul li a {
  width: 100%;
  padding: 60px 20px 50px 20px;
  text-decoration: none;
  border: 2px solid #0068b7;
  display: block;
  position: relative;
}
#top .block_news ul li:hover {
  background: #e0f2fa;
}
#top .block_news ul li a::after {
  content: "";
  width: 32px;
  height: 32px;
  background: url(../images/top/ico_news.png) no-repeat center center / 32px auto;
  position: absolute;
  right: 10px;
  bottom: 10px;
}
#top .block_news ul li a p {
  width: 100px;
  margin: 0 0 10px 0;
  padding: 3px 0;
  color: #0068b7;
  font-size: 10px;
  font-weight: 700;
  text-align: center;
  line-height: 1;
  border-radius: 30px;
  border: 1px solid #0068b7;
  background: #fff;
}
#top .block_news ul li a p.important {
  color: #cd311b;
  border: 1px solid #cd311b;
}
#top .block_news ul li a p.recruit {
  background: #f2f091;
}
#top .block_news ul li a dl dt {
  font-size: 12px;
}
#top .block_news ul li a dl dd {
  font-size: 16px;
}
#top .block_news ul li:first-child {
  background: #0068b7 url(../images/top/ico_news_new.png) no-repeat left top / 80px auto;
}
#top .block_news ul li:first-child a {
  color: #fff;
}
#top .block_news ul li:first-child a::after {
  background: url(../images/top/ico_news_w.png) no-repeat center center / 32px auto;
}
#top .block_news ul li:first-child:hover {
  opacity: .8;
}
#top .block_news .more_btn {
  text-align: center;
}
#top .block_news .more_btn a {
  color: #0068b7;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}
#top .block_news .more_btn a:hover {
  text-decoration: underline;
}
#top .block_recruit {
  margin: 0 0 100px 0;
  padding: 0 5%;
  background: url(../images/top/recruit_bg.png) no-repeat center center / cover;
  position: relative;
}
#top .block_recruit .inner {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
#top .block_recruit figure {
  width: calc(100% - 370px);
  transform: translate(0, -50px);
}
#top .block_recruit .box {
  width: 330px;
  padding: 20px 0;
}
#top .block_recruit .box h2 {
  margin: 0 0 5px 0;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.4;
}
#top .block_recruit .box dl dt {
  font-size: 18px;
}
#top .block_recruit .box dl dd {
  margin: 0 0 20px 0;
  font-size: 16px;
}
#top .block_recruit .box a {
  padding: 10px 20px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  border-radius: 30px;
  background: #fff;
  display: inline-block;
  transition: .3s;
}
#top .block_recruit .box a:hover {
  color: #fff;
  background: #282828;
}
#top .block_instagram {
  padding: 0 5%;
}
#top .block_instagram .inner {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
#top .block_instagram .box {
  width: 220px;
  padding: 0 20px 0 0;
}
#top .block_instagram .box a {
  text-decoration: none;
  display: block;
}
#top .block_instagram .box a:hover {
  text-decoration: underline;
}
#top .block_instagram .box dl {
  min-height: 70px;
  margin: 0 0 10px 0;
  padding: 0 0 0 80px;
  background: url(../images/common/ico_insta.png) no-repeat left center / 70px auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#top .block_instagram .box dl dt {
  font-size: 20px;
}
#top .block_instagram .box dl dd {
  font-size: 13px;
}
#top .block_instagram .list {
  width: calc(100% - 220px);
}
#top .block_instagram .list #sbi_images {
  padding: 0!important;
  display: flex;
  justify-content: space-between;
  gap: 20px;
}
#top .anim {
  transform: translate(0,50px);
  opacity: 0;
  transition-duration: 0.1s;
  transition-delay: 0.1s;
}
#top .anim.active {
  transform: translate(0,0);
  transition-duration: 1s;
  opacity: 1;
}

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

  #top .video {
    width: 100%;
    margin: 0 0 40px 0;
    height: auto;
  }
  #top .video video {
    width: 100%;
    position: static;
    min-width: 100%;
    min-height: 100px;
    height: auto;
    transform: translate(0, 0);
  }
  #top .video .news {
    padding: 0 5%;
    position: static;
  }
  #top .video .news a {
    margin: 15px 0 0 0;
  }
  #top .video .news a + a {
    margin: 10px 0 0 0;
  }
  #top .video .news a dl {
    padding: 0;
  }
  #top .video .news a dl dt {
    width: 80px;
    font-size: 10px;
  }
  #top .video .news a dl dd.date {
    width: 62px;
    font-size: 10px;
  }
  #top .video .news a dl dd.ttl {
    width: 100%;
    font-size: 11px;
  }

  #top .video #video_area {  
    position: relative;
  }
  #top .video h1 {
    font-size: 20px;
    line-height: 1.5;
    transform: translate(-50%,-50%);
  }
  #top .video h1 span {
    margin: 0 0 5px 0;
    font-size: 14px;
    display: block;
  }
  .cp_arrows {
    bottom: -140px;
  }
  #top .block_technology .block1 {
    padding: 0 5% 60px;
    gap: 20px;
  }
  #top .block_technology .block1 .vertical {
    width: 40px;
  }
  #top .block_technology .block1 .vertical h2 {
    padding: 40px 0 0 0;
    font-size: 20px;
    background: url(../images/top/about_h2.png) no-repeat center top / 40px auto;
  }
  #top .block_technology .block1 .box {
    width: calc(100% - 60px);
  }
  #top .block_technology .block1 .box h3 {
    margin: 0 0 5px 0;
    font-size: 24px;
  }
  #top .block_technology h4 {
    margin: 0 0 10px 0;
    font-size: 16px;
  }
  #top .block_technology p {
    margin: 0 0 20px 0;
    font-size: 13px;
  }
  #top .block_technology .block1 figure {
    width: calc(100% - 60px);
    margin: 0 0 0 auto;
    padding: 20px 0 0 0;
  }
  #top .block_technology .block1 figure:before {
    content: "";
    width: calc(100% - 20px);
    height: calc(100% + 20px);
  }
  #top .block_technology .block2 {
    padding: 0 5% 60px calc(5% + 60px);
    gap: 0;
  }
  #top .block_technology .block2 .box {
    width: 100%;
  }
  #top .block_technology .block2 figure {
    width: 100%;
  }
  #top .block_technology .block2 figure img {
    position: relative;
  }
  #top .block_technology .block2 figure:before {
    width: calc(100% - 20px);
    top: 20px;
  }
  #top .block_technology .block3 {
    padding: 0 5% 60px calc(5% + 60px);
    gap: 0;
  }
  #top .block_technology .block3 .box {
    width: 100%;
  }
  #top .block_technology .block3 figure {
    width: 100%;
    padding: 20px 5% 0 0;
  }
  #top .block_technology .block3 figure:before {
    width: calc(100% - 20px);
    height: calc(100% + 20px);
    top: 0;
    right: 0;
  }
  #top .block_technology .anim-btn {
    margin: 0 0 40px 0;
  }
  #top .block_about {
    margin: 0 0 60px 0;
    padding: 60px 0 60px 5%;
    background: #e0e1ea;
  }
  #top .block_about .block {
    gap: 20px;
  }
  #top .block_about .block .vertical {
    width: 40px;
  }
  #top .block_about .block .vertical h2 {
    padding: 40px 0 0 0;
    font-size: 20px;
    background: url(../images/top/about_h2.png) no-repeat center top / 40px auto;
  }
  #top .block_about .block .box {
    width: calc(100% - 60px);
    overflow: hidden;
  }
  #top .block_about .block .box h3 {
    margin: 0 0 10px 0;
    font-size: 24px;
  }
  #top .block_about .block .box .slideshow {
    width: 1200px;
  }
  #top .block_about .block .box .slideshow img {
    width: 200px;
  }
  #top .block_about .block .box dl {
    margin: 20px 0 30px;
  }
  #top .block_about .block .box dl dt {
    width: 100%;
    padding: 0 5% 0 0;
    font-size: 16px;
  }
  #top .block_about .block .box dl dd {
    width: 100%;
    padding: 10px 5% 0 0;
    font-size: 13px;
  }
  #top .block_works {
    margin: 0 0 60px 0;
    padding: 0 5%;
  }
  #top .block_works::before {
    height: calc(100% - 40px);
    top: 100px;
  }
  #top .block_works h2 {
    height: 30px;
    margin: 0 0 30px 0;
    font-size: 20px;
  }
  #top .block_works h2::before {
    top: 15px;
  }
  #top .block_works h2 span {
    padding: 0 20px;
  }
  #top .block_works ul {
    margin: 0 0 40px 0;
    gap: 20px;
  }
  #top .block_works ul li {
    width: calc(50% - 10px);
  }
  #top .block_works ul li h3 {
    font-size: 14px;
    font-weight: 700;
  }
  #top .block_works ul li p {
    font-size: 12px;
  }
  #top .block_project {
    padding: 40px 0;
  }
  #top .block_equipment {
    margin: 0 0 60px 0;
    padding: 60px 5%;
  }
  #top .block_equipment h2 {
    height: 30px;
    margin: 0 0 30px 0;
    font-size: 20px;
  }
  #top .block_equipment h2::before {
    top: 15px;
  }
  #top .block_equipment h2 span {
    padding: 0 20px;
  }
  #top .block_equipment dl {
    margin: 0 0 20px 0;
  }
  #top .block_equipment dl dt {
    margin: 0 0 10px 0;
    font-size: 16px;
    text-align: left;
  }
  #top .block_equipment dl dd {
    font-size: 13px;
    text-align: left;
  }
  #top .block_equipment ul {
    gap: 20px;
  }
  #top .block_equipment ul li {
    width: 100%;
  }
  #top .block_equipment ul li p {
    font-size: 14px;
  }
  #top .block_flow {
    padding: 0 5% 60px;
  }
  #top .block_flow a {
    padding: 15px 60px 15px 15px;
    background: url(../images/top/ico_flow.png) no-repeat right 15px center / 30px auto;
  }
  #top .block_flow a:hover {
    background-color: #e0f2fa;
  }
  #top .block_flow h2 {
    width: 100%;
    font-size: 16px;
  }
  #top .block_flow p {
    width: 100%;
    font-size: 13px;
  }
  #top .block_flow.english h2 {
    width: 100%;
    font-size: 16px;
  }
  #top .block_flow.english p {
    width: 100%;
    font-size: 12px;
  }
  #top .block_news {
    padding: 0 5% 60px;
  }
  #top .block_news h2 {
    margin: 0 0 20px 0;
    font-size: 18px;
  }
  #top .block_news ul {
    margin: 0 0 20px 0;
    gap: 20px;
  }
  #top .block_news ul li {
    width: 100%;
  }
  #top .block_news ul li a {
    padding: 15px 15px 50px 15px;
  }
  #top .block_news ul li a dl dt {
    font-size: 11px;
  }
  #top .block_news ul li a dl dd {
    font-size: 14px;
  }
  #top .block_news ul li:first-child a {
    padding: 55px 15px 50px 15px;
  }
  #top .block_news .more_btn {
    text-align: center;
  }
  #top .block_news .more_btn a {
    font-size: 15px;
  }
  #top .block_recruit {
    margin: 40px 0 60px 0;
  }
  #top .block_recruit figure {
    width: 100%;
    transform: translate(0, -40px);
  }
  #top .block_recruit .box {
    width: 100%;
    padding: 0 0 60px 0;
    margin: -20px 0 0 0;
  }
  #top .block_recruit .box h2 {
    font-size: 18px;
  }
  #top .block_recruit .box dl dt {
    font-size: 15px;
  }
  #top .block_recruit .box dl dd {
    margin: 0 0 20px 0;
    font-size: 13px;
  }
  #top .block_recruit .box .btn {
    text-align: center;
  }
  #top .block_instagram .box {
    width: 100%;
    padding: 0;
  }
  #top .block_instagram .box dl {
    min-height: 50px;
    padding: 0 0 0 60px;
    background: url(../images/common/ico_insta.png) no-repeat left center / 50px auto;
  }
  #top .block_instagram .box dl dt {
    font-size: 16px;
  }
  #top .block_instagram .box dl dd {
    font-size: 14px;
  }
  #top .block_instagram .box p {
    margin: 0 0 10px 0;
    font-size: 13px;
  }
  #top .block_instagram .list {
    width: 100%;
  }
  #top .block_instagram .list #sbi_images {
    gap: 10px;
  }
  #top .sp-non-anim {
    transform: translate(0,0);
    opacity: 1;
    transition-duration: 0.1s;
    transition-delay: 0.1s;
  }
  /* #top .anim.active {
    transform: translate(0,0);
    transition-duration: 1s;
    opacity: 1;
  } */



}

/*----------------------------------------------------
	COMMON
----------------------------------------------------*/

h1.common {
  margin: 0 0 50px 0;
  font-size: 25px;
  font-weight: 700;
  text-align: center;
}
h1.common span {
  padding: 0 10px 8px 10px;
}
h1.common span.purple {
  border-bottom: 5px solid #e7e3f0;
}
h1.common span.green {
  border-bottom: 5px solid #d5e6ac;
}
h1.common span.bgreen {
  border-bottom: 5px solid #88d2cd;
}
h1.common span.gray {
  border-bottom: 5px solid #d4d0c8;
}
h1.common span.blue {
  border-bottom: 5px solid #b8d5eb;
}
h1.common span.dblue {
  border-bottom: 5px solid #71b1df;
}
h1.common span.yellow {
  border-bottom: 5px solid #f2f091;
}
h1.common em {
  font-size: 0.7em;
  font-style: normal;
  font-weight: 700;
}

@media screen and (max-width: 767px) {
  h1.common {
    margin: 0 0 30px 0;
    font-size: 14px;
  }
  h1.common span {
    font-size: 18px;
  }
}

/*----------------------------------------------------
	TECHNOLOGY
----------------------------------------------------*/

#technology .block {
  padding: 80px 5% 0;
  background: #eae8e5;
  overflow: hidden;
}
#technology .block h1 {
  margin: 0 0 50px 0;
  font-size: 20px;
  font-weight: 700;
  text-align: center;
}
#technology .block h1 span {
  font-size: 30px;
  display: block;
}
#technology .block .flex {
  padding: 0 0 80px 0;
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
}
#technology .block .flex .box {
  width: 60%;
  padding: 60px 100px 30px 50px;
  background: #fff;
}
#technology .block .flex .box .txt {
  margin: 0 0 30px 0;
  padding: 0 0 0 25px;
  border-left: 1px solid #0068b7;
}
#technology .block .flex .box h2 {
  margin: 0 0 10px 0;
  color: #0068b7;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.5;
}
#technology .block .flex .box img {
  margin: -110px 0 0 0;
  transform: translate(0,110px);
}
#technology .block .flex .box a {
  text-align: center;
  border: 2px solid #0068b7;
  display: block;
  transition: .3s;
}
#technology .block .flex .box a:hover {
  background: #e0f2fa;
}
#technology .block .flex .box a span {
  padding: 15px 60px 15px 0;
  color: #0068b7;
  font-size: 20px;
  font-weight: 700;
  background: url(../images/technology/ico_btn.png) no-repeat right 2px center / 40px auto;
  display: inline-block;
}
#technology .block .flex .box #inline_1 {
  display: none;
}
.h-grade {
  margin: 0!important;
}
#h-grade .desc {
  max-width: 800px;
  margin: 0 auto 30px;
  text-align: center;
}
#h-grade h3 {
  margin: 0 0 30px 0;
  padding: 5px 0;
  color: #0068b7;
  font-size: 26px;
  font-weight: 700;
  border: 2px solid #0068b7;
  text-align: center;
}
#technology .block .flex1 {
  margin: 0 0 80px 0;
}
#technology .block .flex1 figure {
  width: 40%;
  padding: 60px 0 0 0;
}
#technology .block .flex1 figure img {
  max-width: calc(100% + 60px);
  transform: translate(-60px,0);
}
#technology .block .flex2 figure {
  width: 40%;
  padding: 60px 0 0 0;
}
#technology .block .flex2 figure img {
  max-width: calc(100% + 60px + 15%);
  transform: translate(-60px,0);
}
#technology .block .flex2 figure img + img {
  margin: 10px 0 0 0;
}
#technology .history {
  padding: 80px 5% 100px;
}
#technology .history .inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 50px 0;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  position: relative;
}
#technology .history .inner::before {
  content: "";
  width: 100%;
  height: 1px;
  border-top: 2px solid #000;
  background: #000;
  position: absolute;
  top: -6px;
  left: 0;
}
#technology .history .inner::after {
  content: "";
  width: 100%;
  height: 1px;
  border-bottom: 2px solid #000;
  position: absolute;
  bottom: -6px;
  left: 0;
}
#technology .history h2 {
  margin: 0 0 30px 0;
  font-family: serif;
  font-size: 30px;
  text-align: center;
  line-height: 1.4;
}
#technology .history .flex {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
#technology .history figure {
  width: 45%;
}
#technology .history .box {
  width: 52%;
  font-size: 16px;
  line-height: 1.8;
}
#technology .history .box p span {
  padding: 0 5px;
  color: #fff;
  background: #000;
}
#technology .greeting {
  margin: 0 0 100px 0;
  padding: 80px 5%;
  background: #e9e8f0;
  position: relative;
}
#technology .greeting::after {
  content: "";
  width: calc(55%);
  height: 140px;
  background: #fff;
  position: absolute;
  top: 0;
  left: 0;
}
#technology .greeting .inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 0 30px 0;
  border-bottom: 1px solid #0068b7;
  position: relative;
}
#technology .greeting .flex {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
#technology .greeting .box {
  width: 56%;
  margin: 100px 0 0 0;
  font-size: 16px;
  line-height: 1.8;
}
#technology .greeting .box h2 {
  margin: 0 0 30px 0;
  color: #0068b7;
  font-size: 14px;
  font-weight: 700;
  position: relative;
}
#technology .greeting .box h2 span {
  padding: 0 10px 0 0;
  background: #e9e8f0;
  position: relative;
  z-index: 2;
}
#technology .greeting .box h2::after {
  content: "";
  width: 100%;
  height: 1px;
  border-bottom: 1px solid #0068b7;
  position: absolute;
  top: 50%;
  left: 0;
}
#technology .greeting figure {
  width: 40%;
}
#technology .greeting figure figcaption {
  margin: 20px 0 0 0;
  font-size: 24px;
  line-height: 1.5;
}
#technology .greeting figure figcaption span {
  font-size: 14px;
  display: block;
}
#technology .philosophy {
  margin: 0 0 100px 0;
  padding: 0 5%;
  background: #e0edf6;
  position: relative;
}
#technology .philosophy .inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 0 30px 0;
  position: relative;
}
#technology .philosophy .flex {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#technology .philosophy .box {
  padding: 70px 0;
}
#technology .philosophy .box + .box {
  border-top: 1px solid #0068b7;
}
#technology .philosophy .flex h2 {
  width: 165px;
  height: 165px;
  color: #0068b7;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  border-radius: 100px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
#technology .philosophy .box .flex .txt {
  width: calc(100% - 190px);
  font-size: 18px;
}
#technology .philosophy .box .flex .txt ul li + li {
  margin: 20px 0 0 0;
}
#technology aside {
  padding: 0 5%;
}
#technology aside .inner {
  max-width: 860px;
  margin: 0 auto;
}
#technology aside .instagram {
  margin: 0 0 60px 0;
  border: 1px solid #000;
}
#technology aside .instagram a {
  padding: 15px 0;
  text-decoration: none;
  display: block;
  transition: .3s;
}
#technology aside .instagram a:hover {
  background: #e9e8f0;
}
#technology aside .instagram .box {
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
#technology aside .instagram dl {
  min-height: 70px;
  padding: 0 0 0 80px;
  background: url(../images/common/ico_insta.png) no-repeat left center / 70px auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#technology aside .instagram dl dt {
  font-size: 20px;
}
#technology aside .instagram dl dd {
  font-size: 16px;
}
#technology aside h3 {
  margin: 0 0 20px 0;
  font-size: 20px;
  text-align: center;
}

#technology aside .nakanotekko {
  margin: 0 0 15px 0;
  border: 1px solid #f5b32d;
}
#technology aside .nakanotekko a {
  text-decoration: none;
  display: block;
  transition: .3s;
}
#technology aside .nakanotekko a:hover {
  opacity: .7;
}
#technology aside .center {
  text-align: center;
}

@media screen and (max-width: 767px) {
  #technology .block {
    padding: 40px 5% 30px;
  }
  #technology .block h1 {
    margin: 0 0 30px 0;
    font-size: 14px;
  }
  #technology .block h1 span {
    font-size: 18px;
  }
  #technology .block .flex {
    padding: 0 0 30px 0;
    flex-direction: column-reverse;
  }
  #technology .block .flex .box {
    width: 100%;
    padding: 20px;
  }
  #technology .block .flex .box .txt {
    margin: 0 0 20px 0;
    padding: 0 0 0 20px;
  }
  #technology .block .flex .box h2 {
    margin: 0 0 10px 0;
    color: #0068b7;
    font-size: 16px;
  }
  #technology .block .flex .box img {
    margin: 0;
    transform: translate(0,0);
  }
  #technology .block .flex .box a span {
    padding: 15px 50px 15px 0;
    font-size: 16px;
    background: url(../images/technology/ico_btn.png) no-repeat right center / 30px auto;
    display: inline-block;
  }
  #h-grade .desc {
    margin: 0 auto 20px;
    font-size: 13px;
  }
  #h-grade h3 {
    margin: 0 0 20px 0;
    font-size: 18px;
  }
  #technology .block .flex1 {
    margin: 0;
  }
  #technology .block .flex1 figure {
    width: 100%;
    padding: 0;
  }
  #technology .block .flex1 figure img {
    max-width: 100%;
    transform: translate(0,0);
  }
  #technology .block .flex2 figure {
    width: 100%;
    padding: 0;
  }
  #technology .block .flex2 figure img {
    max-width: 100%;
    transform: translate(0,0);
  }
  #technology .block .flex2 figure img + img {
    margin: 0;
  }
  #technology .history {
    padding: 60px 5%;
  }
  #technology .history .inner {
    padding: 30px 0;
  }
  #technology .history h2 {
    margin: 0 0 30px 0;
    font-size: 18px;
  }
  #technology .history figure {
    width: 100%;
    margin: 0 0 20px 0;
  }
  #technology .history .box {
    width: 100%;
    font-size: 13px;
  }
  #technology .greeting {
    margin: 0 0 30px 0;
    padding: 60px 5%;
  }
  #technology .greeting::after {
    display: none;
  }
  #technology .greeting .inner {
    padding: 0 0 30px 0;
  }
  #technology .greeting .box {
    width: 100%;
    margin: 0;
    font-size: 13px;
  }
  #technology .greeting .box h2 {
    margin: 0 0 20px 0;
    font-size: 12px;
  }
  #technology .greeting figure {
    width: 100%;
    max-width: 180px;
    margin: 30px auto 0;
  }
  #technology .greeting figure figcaption {
    margin: 10px 0 0 0;
    font-size: 18px;
  }
  #technology .greeting figure figcaption span {
    font-size: 12px;
  }
  #technology .philosophy {
    margin: 0 0 60px 0;
    padding: 0 5%;
  }
  #technology .philosophy .inner {
    padding: 20px 0;
    position: relative;
  }
  #technology .philosophy .flex {
    display: block;
  }
  #technology .philosophy .box {
    padding: 30px 0;
  }
  #technology .philosophy .box + .box {
    border-top: 1px solid #0068b7;
  }
  #technology .philosophy .flex h2 {
    width: 120px;
    height: 120px;
    margin: 0 auto 20px;
    font-size: 16px;
  }
  #technology .philosophy .box .flex .txt {
    width: 100%;
    font-size: 13px;
  }
  #technology .philosophy .box .flex .txt ul li + li {
    margin: 5px 0 0 0;
  }
  #technology aside .instagram {
    margin: 0 0 40px 0;
  }
  #technology aside .instagram a {
    padding: 20px;
  }
  #technology aside .instagram dl {
    margin: 0 0 10px 0;
  }
  #technology aside .instagram dl dt {
    font-size: 18px;
  }
  #technology aside .instagram dl dd {
    font-size: 14px;
  }
  #technology aside .instagram p {
    font-size: 13px;
  }
  #technology aside h3 {
    margin: 0 0 10px 0;
    font-size: 18px;
  }
 
  #technology aside .nakanotekko {
    margin: 0 0 10px 0;
  }
}

/*----------------------------------------------------
	ABOUT
----------------------------------------------------*/

#about .block {
  margin: 0 0 150px 0;
  padding: 80px 5% 0;
  background: #e0e1ea;
}
#about .block .inner {
  max-width: 1100px;
  margin: 0 auto;
}
#about .block h1 {
  margin: 0 0 50px 0;
  font-size: 20px;
  font-weight: 700;
  text-align: center;
}
#about .block h1 span {
  font-size: 30px;
  display: block;
}
#about .block .desc {
  font-size: 16px;
  text-align: center;
}
#about .block .gallery {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 30px;
  transform: translate(0,50px);
}
#about .block .gallery ul {
  width: calc(50% - 15px);
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}
#about .block .gallery ul.left li:nth-child(1) {
  width: 100%;
}
#about .block .gallery ul.left li:nth-child(2) {
  width: 70%;
  margin: 0 0 0 auto;
}
#about .block .gallery ul.left li:nth-child(3) {
  width: calc(50% - 15px);
}
#about .block .gallery ul.left li:nth-child(4) {
  width: calc(50% - 15px);
}
#about .block .gallery ul.right li:nth-child(1) {
  width: 100%;
}
#about .block .gallery ul.right li:nth-child(2) {
  width: calc(50% - 15px);
}
#about .block .gallery ul.right li:nth-child(3) {
  width: calc(50% - 15px);
}
#about .block .gallery ul.right li:nth-child(4) {
  width: calc(50% - 15px);
}
#about .block .gallery ul.right li:nth-child(5) {
  width: calc(50% - 15px);
}
#about .project {
  margin: 0 0 100px 0;
  padding: 0 5%;
}
#about .project .inner {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}
#about .project .inner .item_1 {
  background: #a4dede;
}
#about .project .inner .item_2 {
  background: #71b1df;
}
#about .project .inner .item + .item {
  margin: 40px 0 0 0;
}
#about .project .inner .item a {
  padding: 40px 100px;
  display: block;
  text-decoration: none;
  position: relative;
}
#about .project .inner .item a .new {
  width: 90px;
  height: 90px;
  background: url(../images/common/ico_new.png) no-repeat left top / 100% 100%;
  position: absolute;
  top: 0;
  left: 0;
}
#about .project .inner .item .overlay {
  padding: 20px 10% 60px calc(100px + 10%);
  position: absolute;
  left: 0;
  bottom: 0;
}
#about .project .inner .item .overlay::before {
  content: "";
  width: 50px;
  height: 50px;
  background: url(../images/about/ico_project.png) no-repeat right bottom / 100% auto;
  position: absolute;
  right: 25px;
  bottom: 25px;
  z-index: 3;
}
#about .project .inner .item .overlay::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  opacity: .75;
  mix-blend-mode: multiply;
}
#about .project .inner .item_1 .overlay::after {
  background: #81cbc6;
}
#about .project .inner .item_2 .overlay::after {
  background: #6e8cc0;
}
#about .project .inner .item .overlay img {
  z-index: 4;
}
#about .project .flex {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
#about .project .flex dl {
  width: 70px;
  font-family: serif;
  line-height: 1.4;
  writing-mode: vertical-rl;
}
#about .project .flex dl dt {
  font-size: 16px;
  font-weight: 700;
}
#about .project .flex dl dd {
  font-size: 28px;
  font-weight: 700;
}
@media screen and (max-width: 1100px) {
  #about .project .flex dl dt {
    font-size: 13px;
  }
  #about .project .flex dl dd {
    font-size: 22px;
  }
}
#about .project .flex figure {
  width: calc(100% - 100px);
  overflow: hidden;
}
#about .project .flex figure img {
  transition: .3s;
}
#about .project a:hover .flex figure img {
  transition: .8s;
  transform: scale(1.05);
}
#about .recruit {
  padding: 0 5%;
}
#about .recruit .inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 50px;
  background: #f2f091;
  position: relative;
}
#about .recruit .box {
  background: #fff;
  padding: 70px 5% 50px;
}
#about .recruit .box h2 {
  margin: 0 0 40px 0;
  color: #0068b7;
  font-size: 30px;
  font-weight: 700;
  text-align: center;
}
#about .recruit .box h3 {
  margin: 0 0 30px 0;
  color: #0068b7;
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  border-bottom: 1px solid #0068b7;
}
#about .recruit .box .interview {
  margin: 0 0 60px 0;
}
#about .recruit .box .interview ul {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 30px;
}
#about .recruit .box .interview ul li {
  width: calc(33.33% - 20px);
  background: #f2f091;
}
#about .recruit .box .interview ul li a {
  height: 100%;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  position: relative;
}
#about .recruit .box .interview ul li a .new {
  width: 60px;
  height: 60px;
  background: url(../images/common/ico_new.png) no-repeat left top / 100% 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}
#about .recruit .box .interview ul li figure {
  overflow: hidden;
}
#about .recruit .box .interview ul li figure img {
  width: 100%;
  transition: .3s;
}
#about .recruit .box .interview ul li:hover figure img {
  transition: .8s;
  transform: scale(1.05);
}
#about .recruit .box .interview ul li .txt {
  height: 100%;
  margin: 0 20px -20px;
  padding: 16px;
  color: #0068b7;
  font-weight: 700;
  background: #fff;
  transform: translate(0,-40px);
}
#about .recruit .box .interview ul li .txt dl {
  padding: 0 0 10px 0;
  margin: 0 0 10px 0;
  font-size: 12px;
  border-bottom: 1px solid #0068b7;
}
#about .recruit .box .interview ul li .txt dl dt {
  font-weight: 700;
}
#about .recruit .box .interview ul li .txt dl dd {
  font-weight: 700;
}
#about .recruit .box .interview ul li .txt dl dd span {
  font-size: 16px;
}
#about .recruit .box .interview ul li .txt p {
  font-weight: 700;
}
#about .recruit .box p.large {
  color: #0068b7;
  font-size: 26px;
  font-weight: 700;
  text-align: center;
}
#about .recruit .box p.medium {
  color: #0068b7;
  font-size: 22px;
  font-weight: 700;
  text-align: center;
}
#about .recruit .box p.small {
  color: #0068b7;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
}
#about .recruit .box .recruit_btn {
  width: 500px;
  margin: 30px auto;
  padding: 10px 0 12px;
  font-size: 26px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  line-height: 1;
  border-radius: 30px;
  border: 1px solid #000;
  background: #f2f091;
  display: block;
  transition: .3s;
}
#about .recruit .box .recruit_btn:hover {
  color: #fff;
  background: #282828;
}
#about .recruit .box .recruit_btn.english {
  font-size: 22px;
}
#about .recruit .box ul.btn_list {
  max-width: 460px;
  margin: 20px auto 0;
  display: flex;
  justify-content: space-between;
}
#about .recruit .box ul.btn_list li {
  width: calc(50% - 10px);
}
#about .recruit .box ul.btn_list li a {
  padding: 5px 0;
  color: #0068b7;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  border-radius: 30px;
  border: 1px solid #0068b7;
  display: block;
  transition: .3s;
}
#about .recruit .box ul.btn_list li a:hover {
  color: #fff;
  background: #0068b7;
}

@media screen and (max-width: 767px) {
  #about .block {
    margin: 0 0 80px 0;
    padding: 40px 5% 0;
  }
  #about .block h1 {
    margin: 0 0 30px 0;
    font-size: 14px;
  }
  #about .block h1 span {
    font-size: 18px;
  }
  #about .block .desc {
    font-size: 13px;
  }
  #about .block .gallery {
    gap: 10px;
    transform: translate(0,20px);
  }
  #about .block .gallery ul {
    width: calc(50% - 5px);
    gap: 10px;
  }
  #about .block .gallery ul.left li:nth-child(1) {
    width: 100%;
  }
  #about .block .gallery ul.left li:nth-child(2) {
    width: 70%;
    margin: 0 0 0 auto;
  }
  #about .block .gallery ul.left li:nth-child(3) {
    width: calc(50% - 5px);
  }
  #about .block .gallery ul.left li:nth-child(4) {
    width: calc(50% - 5px);
  }
  #about .block .gallery ul.right li:nth-child(1) {
    width: 100%;
  }
  #about .block .gallery ul.right li:nth-child(2) {
    width: calc(50% - 5px);
  }
  #about .block .gallery ul.right li:nth-child(3) {
    width: calc(50% - 5px);
  }
  #about .block .gallery ul.right li:nth-child(4) {
    width: calc(50% - 5px);
  }
  #about .block .gallery ul.right li:nth-child(5) {
    width: calc(50% - 5px);
  }
  #about .project {
    margin: 0 0 60px 0;
    padding: 0 5%;
  }
  #about .project .inner .item + .item {
    margin: 20px 0 0 0;
  }
  #about .project .inner .item a {
    padding: 20px 20px 70px 20px;
  }
  #about .project .inner .item a .new {
    width: 40px;
    height: 40px;
  }
  #about .project .inner .item .overlay {
    padding: 10px 30px 50px 30px;
  }
  #about .project .inner .item .overlay::before {
    width: 30px;
    height: 30px;
    background: url(../images/about/ico_project.png) no-repeat right bottom / 100% auto;
    position: absolute;
    right: 15px;
    bottom: 15px;
  }
  #about .project .inner .overlay img {
    z-index: 4;
  }
  #about .project .flex dl {
    width: 100%;
    margin: 0 0 10px 0;
    writing-mode: horizontal-tb;
  }
  #about .project .flex dl dt {
    font-size: 13px;
  }
  #about .project .flex dl dd {
    font-size: 20px;
  }
  #about .project .flex figure {
    width: 100%;
  }
  #about .recruit .inner {
    padding: 10px;
  }
  #about .recruit .box {
    background: #fff;
    padding: 30px 15px;
  }
  #about .recruit .box h2 {
    margin: 0 0 20px 0;
    font-size: 18px;
  }
  #about .recruit .box h3 {
    margin: 0 0 20px 0;
    font-size: 14px;
  }
  #about .recruit .box .interview {
    margin: 0 0 40px 0;
  }
  #about .recruit .box .interview ul {
    width: 90%;
    margin: 0 auto;
    gap: 20px
  }
  #about .recruit .box .interview ul li {
    width: 100%;
  }
  #about .recruit .box .interview ul li .txt {
    padding: 15px;
  }
  #about .recruit .box .interview ul li .txt p {
    font-size: 13px;
  }
  #about .recruit .box p.large {
    font-size: 15px;
  }
  #about .recruit .box p.medium {
    font-size: 14px;
  }
  #about .recruit .box p.small {
    font-size: 13px;
  }
  #about .recruit .box .recruit_btn {
    width: 100%;
    margin: 20px auto;
    font-size: 14px;
  }
  #about .recruit .box .recruit_btn.english {
    font-size: 12px;
  }
  #about .recruit .box ul.btn_list {
    max-width: 100%;
    margin: 20px auto 0;
  }
  #about .recruit .box ul.btn_list li {
    width: calc(50% - 5px);
  }
  #about .recruit .box ul.btn_list li a {
    font-size: 13px;
  }
}

/*----------------------------------------------------
	WORKS
----------------------------------------------------*/

#works .block {
  padding: 80px 5% 0;
  position: relative;
}
#works .block .inner {
  max-width: 1000px;
  margin: 0 auto;
  position: relative;
}
#works .block ul {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}
#works .block ul li {
  width: calc(33.33% - 20px);
}
#works .block ul li a {
  height: 100%;
  text-decoration: none;
  display: flex;
  flex-direction: column;
}
#works .block ul li figure {
  height: auto;
  overflow: hidden;
}
#works .block ul li a figure img {
  transition: .3s;
}
#works .block ul li a:hover figure img {
  transition: .5s;
  transform: scale(1.07);
}
#works .block ul li .box {
  width: 100%;
  padding: 10px;
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  flex-direction: column;
  background: #d9e2c0;
}
#works .block ul li h3 {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
}
#works .block ul li p {
  font-size: 13px;
}

@media screen and (max-width: 767px) {
  #works .block {
    padding: 40px 5% 0;
  }
  #works .block ul {
    margin: 0;
    gap: 10px;
  }
  #works .block ul li {
    width: calc(50% - 5px);
  }
  #works .block ul li h3 {
    font-size: 14px;
  }
  #works .block ul li p {
    font-size: 12px;
  }
}

/*----------------------------------------------------
	WORKS SINGLE
----------------------------------------------------*/

#works_single .block {
  padding: 80px 5% 0;
  position: relative;
}
#works_single .block .inner {
  max-width: 800px;
  margin: 0 auto;
  position: relative;
}
#works_single .slider {
  position: relative;
}
#works_single .slider .swiper_thumb {
  margin: 15px 0 0 0;
}
#works_single .slider .swiper_thumb .swiper-slide {
  position: relative;
}
#works_single .slider .swiper_thumb .swiper-slide-thumb-active img {
  opacity: .7;
}
#works_single .slider .swiper_thumb img {
  will-change: transform;
  transition: .3s;
  opacity: 1;
}
#works_single .slider .swiper_thumb img:hover {
  opacity: .7;
}
#works_single .slider figure {
  width: 100%;
  padding-top: 68%;
  position: relative;
  display: block;
  overflow: hidden;
  background: #000;
}
#works_single .slider figure img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#works_single .title {
  margin: 30px 0;
}
#works_single .title dl dd {
  font-size: 23px;
  font-weight: 700;
  line-height: 1.3;
}
#works_single .box {
  margin: 0 0 60px 0;
  padding: 30px;
  background: #d9e2c0;
}
#works_single .box dl + dl {
  margin: 10px 0 0 0;
}
#works_single .box dl dd {
  font-size: 16px;
}

@media screen and (max-width: 767px) {
  #works_single .block {
    padding: 40px 5% 0;
  }
  #works_single .slider .swiper_thumb {
    margin: 10px 0 0 0;
  }
  #works_single .title {
    margin: 20px 0;
  }
  #works_single .title dl dt {
    font-size: 13px;
  }
  #works_single .title dl dd {
    font-size: 18px;
  }
  #works_single .box {
    margin: 0 0 40px 0;
    padding: 20px;
  }
  #works_single .box dl + dl {
    margin: 10px 0 0 0;
  }
  #works_single .box dl dt {
    font-size: 13px;
  }
  #works_single .box dl dd {
    font-size: 14px;
  }
}

/*----------------------------------------------------
	EQUIPMENT
----------------------------------------------------*/

#equipment .block {
  padding: 80px 5% 0;
  position: relative;
}
#equipment .block .inner {
  max-width: 1000px;
  margin: 0 auto;
  position: relative;
}
#equipment .block .desc {
  max-width: 800px;
  margin: 0 auto 30px;
  text-align: center;
}
#equipment .block .desc h2 {
  margin: 0 0 20px 0;
  font-size: 22px;
  font-weight: 700;
}
#equipment .block .list {
  margin: 0 0 100px 0;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
#equipment .block .list h3 {
  width: 100%;
  padding: 5px 10px;
  font-weight: 700;
}
#equipment .block .list ul {
  width: calc(50% - 20px);
  border-top: 2px solid #d4d0c8;
}
#equipment .block .list ul li {
  padding: 5px 10px;
  border-bottom: 2px solid #d4d0c8;
}
#equipment .block .list ul li dl {
  font-size: 18px;
  font-weight: 700;
  display: flex;
  justify-content: space-between;
}
#equipment .block .list ul li dl dt {
  padding: 0 20px 0 0;
  flex: 1;
}
#equipment .block .list.english ul li dl {
  font-size: 16px;
}
#equipment .block .gallery {
  margin: 0 0 100px 0;
}
#equipment .block .gallery ul {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}
#equipment .block .gallery ul li {
  width: calc(33.33% - 20px);
}
#equipment .block .gallery ul li figure figcaption {
  margin: 5px 0 0 0;
  font-size: 16px;
  font-weight: 700;
}
#equipment .block #h-grade {
  margin: -100px 0 0 0;
  padding: 100px 0 0 0;
}
.h-grade {
  margin: 0 0 100px 0;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.h-grade a {
  color: #000;
}
.h-grade a:hover {
  text-decoration: none;
}
.h-grade .left {
  width: calc(54% - 20px);
}
.h-grade .right {
  width: calc(46% - 20px);
}
.h-grade .right dl {
  margin: 0 0 20px 0;
}
.h-grade .right dl dt {
  font-size: 18px;
  font-weight: 700;
}
#equipment .block #environment {
  margin: -100px 0 0 0;
  padding: 200px 0 0 0;
}
#equipment .block .environment {
  margin: 0 0 100px 0;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
#equipment .block .environment .left {
  width: calc(50% - 20px);
}
#equipment .block .environment .right {
  width: calc(50% - 20px);
}
#equipment .block .environment h2 {
  margin: 0 0 20px 0;
  font-size: 20px;
  font-weight: 700;
}
#equipment .block .environment figure {
  margin: 0 0 20px 0;
}

@media screen and (max-width: 767px) {
  #equipment .block {
    padding: 40px 5% 0;
  }
  #equipment .block .desc h2 {
    margin: 0 0 10px 0;
    font-size: 18px;
  }
  #equipment .block .desc p {
    font-size: 13px;
  }
  #equipment .block .list {
    margin: 0 0 60px 0;
  }
  #equipment .block .list h3 {
    font-size: 13px;
  }
  #equipment .block .list ul {
    width: 100%;
  }
  #equipment .block .list ul + ul {
border-top: none;
  }
  #equipment .block .list ul li dl {
    font-size: 15px;
  }
  #equipment .block .list.english ul li dl {
    font-size: 13px;
  }
  #equipment .block .gallery {
    margin: 0 0 60px 0;
  }
  #equipment .block .gallery ul {
    gap: 20px;
  }
  #equipment .block .gallery ul li {
    width: calc(50% - 10px);
  }
  #equipment .block .gallery ul li figure figcaption {
    font-size: 13px;
  }
.h-grade {
    margin: 0 0 60px 0;
  }
.h-grade .left {
    width: 100%;
    margin: 0 0 20px 0;
  }
  .h-grade .right {
    width: 100%;
  }
  .h-grade .right dl dt {
    font-size: 16px;
  }
  .h-grade .right dl dd {
    font-size: 13px;
  }
  #equipment .block .environment {
    margin: 0 0 60px 0;
  }
  #equipment .block .environment .left {
    width: 100%;
    margin: 0 0 40px 0;
  }
  #equipment .block .environment .right {
    width: 100%;
  }
  #equipment .block .environment h2 {
    margin: 0 0 15px 0;
    font-size: 16px;
  }
  #equipment .block .environment h2 br {
    display: none;
  }
  #equipment .block .environment figure {
    margin: 0 0 20px 0;
  }
  
}

/*----------------------------------------------------
	FLOW
----------------------------------------------------*/

#flow .block {
  padding: 80px 5% 0;
  position: relative;
}
#flow .block .inner {
  max-width: 1000px;
  margin: 0 auto;
  position: relative;
}
#flow .block .desc {
  max-width: 800px;
  margin: 0 auto 30px;
  text-align: center;
}
#flow .block .desc h2 {
  margin: 0 0 20px 0;
  font-size: 22px;
  font-weight: 700;
}
#flow .block .list ul li {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
#flow .block .list ul li {
  display: flex;
  flex-wrap: wrap;
}
#flow .block .list ul li::after {
  content: "";
  width: 46px;
  height: 20px;
  margin: 40px auto;
  background: url(../images/flow/arrow.png) no-repeat center center / 100% 100%;
}
#flow .block .list ul li:last-child::after {
  display: none;
}
#flow .block .list ul li figure {
  width: 290px;
}
#flow .block .list ul li dl {
  width: calc(100% - 330px);
}
#flow .block .list ul li dl dt {
  margin: 0 0 10px 0;
  color: #0068b7;
  font-size: 20px;
  font-weight: 700;
}


@media screen and (max-width: 767px) {
  #flow .block {
    padding: 40px 5% 0;
  }
  #flow .block .desc h2 {
    margin: 0 0 10px 0;
    font-size: 18px;
  }
  #flow .block .desc p {
    font-size: 13px;
  }
  #flow .block .list ul li::after {
    width: 35px;
    height: 15px;
    margin: 30px auto;
  }
  #flow .block .list ul li:last-child::after {
    display: none;
  }
  #flow .block .list ul li figure {
    width: 100%;
    margin: 0 0 10px 0;
  }
  #flow .block .list ul li figure img {
    width: 100%;
  }
  #flow .block .list ul li dl {
    width: 100%;
  }
  #flow .block .list ul li dl dt {
    margin: 0 0 5px 0;
    font-size: 16px;
  }
  #flow .block .list ul li dl dd {
    font-size: 13px;
  }
}

/*----------------------------------------------------
	NEWS
----------------------------------------------------*/

#news .block {
  padding: 80px 5% 0;
  position: relative;
}
#news .block .inner {
  max-width: 1000px;
  margin: 0 auto;
  position: relative;
}
#news .block .list ul {
  margin: 0 0 40px 0;
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 30px;
}
#news .block .list ul li {
  width: calc(25% - 22.5px);
  display: flex;
  transition: .3s;
}
#news .block .list ul li a {
  width: 100%;
  padding: 60px 20px 50px 20px;
  text-decoration: none;
  border: 2px solid #0068b7;
  display: block;
  position: relative;
}
#news .block .list ul li:hover {
  background: #e0f2fa;
}
#news .block .list ul li a::after {
  content: "";
  width: 32px;
  height: 32px;
  background: url(../images/top/ico_news.png) no-repeat center center / 32px auto;
  position: absolute;
  right: 10px;
  bottom: 10px;
}
#news .block .list ul li a p {
  width: 100px;
  margin: 0 0 10px 0;
  padding: 3px 0;
  color: #0068b7;
  font-size: 10px;
  font-weight: 700;
  text-align: center;
  line-height: 1;
  border-radius: 30px;
  border: 1px solid #0068b7;
  background: #fff;
}
#news .block .list ul li a p.important {
  color: #cd311b;
  border: 1px solid #cd311b;
}
#news .block .list ul li a p.recruit {
  background: #f2f091;
}
#news .block .list ul li a dl dt {
  font-size: 12px;
}
#news .block .list ul li a dl dd {
  font-size: 16px;
}
#news .block .list ul li.new {
  background: #0068b7 url(../images/top/ico_news_new.png) no-repeat left top / 80px auto;
}
#news .block .list ul li.new a {
  color: #fff;
}
#news .block .list ul li.new a::after {
  background: url(../images/top/ico_news_w.png) no-repeat center center / 32px auto;
}
#news .block .list ul li.new:hover {
  opacity: .8;
}
.pager ul {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}
.pager ul li {
	margin: 0 5px;
	text-align: center;
	line-height: 1.8;
}
.pager ul li span {
	width: 32px;
	height: 32px;
	color: #fff;
	border: 1px solid #282828;
	background: #282828;
	display: flex;
  align-items: center;
  justify-content: center;
}
.pager ul li a {
  text-decoration: none;
}
.pager ul li a.page-numbers {
	width: 32px;
	height: 32px;
	color: #282828;
	border: 1px solid #282828;
	display: flex;
  align-items: center;
  justify-content: center;
  transition: .3s;
}
.pager ul li .dots {
	color: #282828;
	border: none;
	background: #fff;
}
.pager ul li a.page-numbers:hover {
	color: #fff;
	background: #282828;
}
.pager ul li .next {
	position: relative;
  background: url(../images/news/ico_next.png) no-repeat center center / 7px auto;
}
.pager ul li .next:hover {
	color: #fff;
  background: #282828 url(../images/news/ico_next_w.png) no-repeat center center / 7px auto!important;
}
.pager ul li .prev {
	position: relative;
  background: url(../images/news/ico_prev.png) no-repeat center center / 7px auto;
}
.pager ul li .prev:hover {
	color: #fff;
	background: #282828 url(../images/news/ico_prev_w.png) no-repeat center center / 7px auto!important;
}

@media screen and (max-width: 767px) {
  #news .block {
    padding: 40px 5% 0;
  }
  #news .block .list ul {
    margin: 0 0 30px 0;
    gap: 20px;
  }
  #news .block .list ul li {
    width: 100%;
  }
  #news .block .list ul li a {
    padding: 15px 15px 50px 15px;
  }
  #news .block .list ul li a dl dt {
    font-size: 11px;
  }
  #news .block .list ul li a dl dd {
    font-size: 14px;
  }
  #news .block .list ul li:first-child a {
    padding: 55px 15px 50px 15px;
  }
  .pager ul li {
    margin: 0 3px;
  }
}

/*----------------------------------------------------
	NEWS SINGLE
----------------------------------------------------*/

#news_single .block {
  padding: 80px 5% 0;
  position: relative;
}
#news_single .block .inner {
  max-width: 850px;
  margin: 0 auto;
  position: relative;
}
#news_single .block .title {
  padding: 0 0 5px 0;
  border-bottom: 2px solid #0068b7;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
#news_single .block .title p {
  width: 120px;
  padding: 2px 0 0 0;
  font-size: 15px;
}
#news_single .block .title h1 {
  width: calc(100% - 120px);
  font-size: 19px;
  font-weight: 700;
}
#news_single .block .eyecatch {
  max-width: 100%;
  margin: 40px auto 0;
  text-align: center;
}
#news_single .block .content {
  margin: 40px 0;
}
#news_single .block .content p {
  margin: 20px 0;
}
#news_single .block .button {
  margin: 60px 0 0 0;
}
#news_single .block .button a {
  width: 280px;
  margin: 0 auto;
  padding: 12px 0;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  border-radius: 50px;
  border: 1px solid #4c4c4c;
  background: url(../images/news/ico_prev.png) no-repeat 20px center / 7px auto;
  display: block;
  transition: .3s;
}
#news_single .block .button a:hover {
  color: #fff;
  background: #4c4c4c url(../images/news/ico_prev_w.png) no-repeat 20px center / 7px auto;
}

@media screen and (max-width: 767px) {
  #news_single .block {
    padding: 40px 5% 0;
    font-size: 13px;
  }
  #news_single .block .title {
    padding: 0 0 10px 0;
  }
  #news_single .block .title p {
    width: 100%;
    font-size: 12px;
  }
  #news_single .block .title h1 {
    width: 100%;
    font-size: 15px;
  }
  #news_single .block .eyecatch {
    margin: 20px auto 0;
  }
  #news_single .block .content {
    margin: 20px 0;
  }
  #news_single .block .content p {
    margin: 20px 0;
  }
  #news_single .block .button {
    margin: 40px 0 0 0;
  }
}

/*----------------------------------------------------
	COMPANY
----------------------------------------------------*/

#company .block {
  padding: 80px 5% 0;
  position: relative;
}
#company .block .inner {
  max-width: 1000px;
  margin: 0 auto;
  position: relative;
}
#company .block .list {
  margin: 0 0 100px 0;
}
#company .block .list dl {
  display: flex;
  flex-wrap: wrap;
  font-size: 16px;
}
#company .block .list dl dt {
  width: 180px;
  padding: 15px 5px;
  border-bottom: 1px solid #808080;
}
#company .block .list dl dd {
  width: calc(100% - 180px);
  padding: 15px 5px;
  border-bottom: 1px solid #0068b7;
}
#company .block .list dl dd .image {
  margin: 20px 0;
  display: flex;
  gap: 22.5px;
}
#company .block .list dl dd .image figure {
  width: calc(33.33% - 15px);
}
#company .block .btn {
  margin: 0 0 100px 0;
  text-align: center;
}
#company .block .btn a {
  padding: 10px 70px;
  color: #0068b7;
  font-size: 20px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 30px;
  border: 1px solid #0068b7;
  display: inline-block;
  transition: .3s;
}
#company .block .btn a:hover {
  color: #fff;
  background: #0068b7;
}
#company .block .access {
  margin: 0 0 100px 0;
}
#company .block .access iframe {
  width: 100%;
  height: 400px;
}
#company .block .access dl {
  margin: 30px 0 0 0;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
#company .block .access dl dt {
  width: 70px;
}
#company .block .access dl dd {
  width: calc(100% - 90px);
}
#company .block .access dl dd h3 {
  font-size: 22px;
  font-weight: 700;
  color: #ab9cca;
}
#company .block .access dl dd p {
  font-size: 20px;
}
#company .block .link .inner {
  max-width: 1000px;
  margin: 0 auto;
}
#company .block .link ul li + li {
  margin: 20px 0 0 0;
}
#company .block .link ul li a {
  padding: 20px 30px;
  font-size: 20px;
  font-weight: 700;
  text-decoration: none;
  border: 2px solid #0068b7;
  background: #fff;
  display: block;
  transition: .3s;
}
#company .block .link ul li a:hover {
  background: #e0f2fa;
}
#company .block .link ul li a span {
  padding: 0 30px 0 0;
  background: url(../images/recruit/ico_button_b.png) no-repeat right 2px center / 20px auto;
  transition: background .2s;
}
#company .block .link ul li a:hover span {
  background: url(../images/recruit/ico_button_w.png) no-repeat right 2px center / 20px auto;
}

/* history page */

#company .block .history table {
  width: 100%;
  font-size: 16px;
}
#company .block .history table tr th {
  padding: 20px;
  text-align: left;
  background: #d1e4f2;
}
#company .block .history table tr:nth-child(odd) th {
  background: #b8d5eb;
}
#company .block .history table tr td {
  padding: 20px;
  background: #e8f1f9;
}
#company .block .history table tr:nth-child(odd) td {
  background: #d6e7f3;
}
#company .block .history table tr td .flex {
  display: flex;
  gap: 20px;
}
#company .block .history table tr td figure {
  width: 200px;
}

@media screen and (max-width: 767px) {
  #copmany .block {
    padding: 40px 5% 0;
  }
  #company .block .list {
    margin: 0 0 60px 0;
  }
  #company .block .list dl {
    font-size: 13px;
  }
  #company .block .list dl dt {
    width: 110px;
    padding: 10px 5px;
  }
  #company .block .list dl dd {
    width: calc(100% - 110px);
    padding: 10px 5px;
  }
  #company .block .list dl dd .image {
    margin: 10px 0;
    flex-wrap: wrap;
    gap: 10px;
  }
  #company .block .list dl dd .image figure {
    width: 100%;
  }
  #company .block .btn {
    margin: 0 0 60px 0;
  }
  #company .block .btn a {
    font-size: 16px;
  }
  #company .block .access {
    margin: 0 0 60px 0;
  }
  #company .block .access iframe {
    height: 300px;
  }
  #company .block .access dl {
    margin: 20px 0 0 0;
  }
  #company .block .access dl dt {
    width: 50px;
  }
  #company .block .access dl dd {
    width: calc(100% - 60px);
  }
  #company .block .access dl dd h3 {
    font-size: 16px;
  }
  #company .block .access dl dd p {
    font-size: 14px;
  }
  #company .block .link .inner {
    max-width: 1000px;
    margin: 0 auto;
  }
  #company .block .link ul li + li {
    margin: 15px 0 0 0;
  }
  #company .block .link ul li a {
    padding: 20px;
    font-size: 13px;
  }
  #company .block .link ul li a:hover {
    background: #e0f2fa;
  }
  #company .block .link ul li a span {
    padding: 0 30px 0 0;
    background: url(../images/recruit/ico_button_b.png) no-repeat right 2px center / 20px auto;
    transition: background .2s;
  }
  #company .block .link ul li a:hover span {
    background: url(../images/recruit/ico_button_w.png) no-repeat right 2px center / 20px auto;
  }
}

/*----------------------------------------------------
	CONTACT
----------------------------------------------------*/

#contact .block {
  padding: 80px 5% 100px;
}
#contact .block .inner {
  max-width: 1000px;
  margin: 0 auto;
}
#contact .block .desc {
  margin: 0 0 40px 0;
  text-align: center;
}
#contact .block .desc p {
  font-size: 18px;
  font-weight: 700;
}

@media screen and (max-width: 767px) {
  #contact .block {
    padding: 40px 5% 60px;
  }
  #contact .block .desc {
    margin: 0 0 30px 0;
  }
  #contact .block .desc p {
    font-size: 14px;
  }
}

/*----------------------------------------------------
	RECRUIT
----------------------------------------------------*/

#recruit .block {
  padding: 80px 5% 0;
}
#recruit .block .inner {
  max-width: 1000px;
  margin: 0 auto;
}
#recruit .block .desc {
  max-width: 1000px;
  margin: 0 auto 80px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
#recruit .block .desc .box {
  width: 57%;
}
#recruit .block .desc figure {
  width: 40%;
}
#recruit .block .desc .box h2 {
  margin: 0 0 20px 0;
  font-size: 22px;
  font-weight: 700;
}
#recruit .block .desc .box .large {
  margin: 30px 0 0 0;
  font-size: 22px;
  font-weight: 700;
}
#recruit h3 {
  margin: 0 0 40px 0;
  color: #0068b7;
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  border-bottom: 1px solid #0068b7;
}
#recruit .block .interview {
  margin: 0 0 100px 0;
}
#recruit .block .interview ul {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 30px;
}
#recruit .block .interview ul li {
  width: calc(33.33% - 20px);
}
#recruit .block .interview ul li.yellow {
  background: #f2f091;
}
#recruit .block .interview ul li.pink {
  background: #eec9b8;
}
#recruit .block .interview ul li.green {
  background: #cbe4b2;
}
#recruit .block .interview ul li.purple {
  background: #c4adcb;
}
#recruit .block .interview ul li.blue {
  background: #a2d2d5;
}

#recruit .block .interview ul li a {
  height: 100%;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  position: relative;
}
#recruit .block .interview ul li a .new {
  width: 60px;
  height: 60px;
  background: url(../images/common/ico_new.png) no-repeat left top / 100% 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}
#recruit .block .interview ul li figure {
  overflow: hidden;
}
#recruit .block .interview ul li figure img {
  width: 100%;
  transition: .3s;
}
#recruit .block .interview ul li:hover figure img {
  transition: .8s;
  transform: scale(1.05);
}
#recruit .block .interview ul li .txt {
  height: 100%;
  margin: 0 20px -20px;
  padding: 16px;
  color: #0068b7;
  font-weight: 700;
  background: #fff;
  transform: translate(0,-40px);
}
#recruit .block .interview ul li .txt dl {
  padding: 0 0 10px 0;
  margin: 0 0 10px 0;
  font-size: 12px;
  border-bottom: 1px solid #0068b7;
}
#recruit .block .interview ul li .txt dl dt {
  font-weight: 700;
}
#recruit .block .interview ul li .txt dl dd {
  font-weight: 700;
}
#recruit .block .interview ul li .txt dl dd span {
  font-size: 16px;
}
#recruit .block .interview ul li .txt p {
  font-weight: 700;
}
#recruit .block .application {
  margin: 0 0 60px 0;
}
#recruit .block .application .list {
  margin: 0 0 60px 0;
  font-size: 16px;
}
#recruit .block .application .list dl {
  max-width: 800px;
  margin: 0 auto 20px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
}
#recruit .block .application .list dl dt {
  width: 180px;
  padding: 3px 0;
  font-weight: 700px;
  text-align: center;
  border-radius: 50px;
  border: 2px solid #f2f091;
}
#recruit .block .application .list dl dd {
  width: calc(100% - 200px);
}
#recruit .block .application .txt {
  text-align: center;
}
#recruit .block .application .txt h4 {
  margin: 0 0 15px 0;
  color: #4bb793;
  font-size: 20px;
  font-weight: 700;
}
#recruit .block .application .txt dl dt {
  font-size: 16px;
}
#recruit .block .application .txt dl dd {
  font-size: 16px;
}
#recruit .block .application .txt p {
  margin: 20px 0 0 0;
  font-size: 16px;
  font-weight: 700;
}
#recruit .block .welfare {
  margin: 0 0 60px 0;
}
#recruit .block .welfare ul {
  max-width: 700px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
#recruit .block .welfare ul + ul {
  margin: 20px auto 0;
}
#recruit .block .welfare ul li {
  font-size: 16px;
  text-align: center;
  border-radius: 15px;
  border: 2px solid #f2f091;
  display: flex;
  justify-content: center;
  align-items: center;
}
#recruit .block .welfare ul.col4 li {
  width: calc(25% - 15px);
  min-height: 120px;
}
#recruit .block .welfare ul.col3 li {
  width: calc(33.33% - 15px);
  min-height: 120px;
  padding: 20px;
  flex-direction: column;
}
#recruit .block .welfare ul.col3 li figure {
  margin: 10px 0 0 0;
}
#recruit .block .entry .desc {
  max-width: 1000px;
  margin: 0 auto 40px;
  text-align: center;
  display: block;
}
#recruit .block .entry .desc p {
  font-size: 18px;
  font-weight: 700;
}
#recruit .block .link {
  margin: 60px 0 0 0;
}
#recruit .block .link p {
  color: #0068b7;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
}
#recruit .block .link ul.btn_list {
  max-width: 460px;
  margin: 20px auto 0;
  display: flex;
  justify-content: space-between;
}
#recruit .block .link ul.btn_list li {
  width: calc(50% - 10px);
}
#recruit .block .link ul.btn_list li a {
  padding: 5px 0;
  color: #0068b7;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  border-radius: 30px;
  border: 1px solid #0068b7;
  display: block;
  transition: .3s;
}
#recruit .block .link ul.btn_list li a:hover {
  color: #fff;
  background: #0068b7;
}
#recruit .block .contact {
  margin: 60px 0 0 0;
  text-align: center;
}
#recruit .block .contact h4 {
  margin: 0 0 20px 0;
  font-size: 18px;
  font-weight: 700;
}
#recruit .block .contact p span {
  font-weight: 700;
}
@media screen and (max-width: 767px) {
  #recruit .block {
    padding: 40px 5% 0;
  }
  #recruit .block .desc {
    margin: 0 auto 40px;
    flex-direction: column-reverse;
  }
  #recruit .block .desc .box {
    width: 100%;
    font-size: 13px;
  }
  #recruit .block .desc figure {
    width: 100%;
    margin: 20px 0;
  }
  #recruit .block .desc .box h2 {
    margin: 0 0 10px 0;
    font-size: 16px;
  }
  #recruit .block .desc .box .large {
    margin: 20px 0 0 0;
    font-size: 15px;
  }
  #recruit h3 {
    margin: 0 0 30px 0;
    font-size: 15px;
  }
  #recruit .block .interview {
    margin: 0 0 40px 0;
  }
  #recruit .block .interview ul {
    width: 90%;
    margin: 0 auto;
    gap: 20px;
  }
  #recruit .block .interview ul li {
    width: 100%;
  }
  #recruit .block .interview ul li .txt {
    padding: 15px;
  }
  #recruit .block .interview ul li .txt p {
    font-size: 13px;
  }
  #recruit .block .application {
    margin: 0 0 40px 0;
  }
  #recruit .block .application .list {
    margin: 0 0 40px 0;
    font-size: 13px;
  }
  #recruit .block .application .list dl dt {
    width: 100px;
    font-size: 12px;
  }
  #recruit .block .application .list dl dd {
    width: calc(100% - 110px);
  }
  #recruit .block .application .txt {
    text-align: center;
  }
  #recruit .block .application .txt h4 {
    margin: 0 0 15px 0;
    font-size: 15px;
  }
  #recruit .block .application .txt dl dt {
    font-size: 13px;
  }
  #recruit .block .application .txt dl dd {
    font-size: 13px;
  }
  #recruit .block .application .txt p {
    margin: 15px 0 0 0;
    font-size: 13px;
  }
  #recruit .block .welfare {
    margin: 0 0 40px 0;
  }
  #recruit .block .welfare ul {
    gap: 10px;
  }
  #recruit .block .welfare ul + ul {
    margin: 10px auto 0;
  }
  #recruit .block .welfare ul li {
    font-size: 13px;
    border-radius: 15px;
    border: 2px solid #f2f091;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #recruit .block .welfare ul.col4 li {
    width: calc(50% - 5px);
    min-height: 70px;
  }
  #recruit .block .welfare ul.col3 li {
    width: 100%;
    min-height: 120px;
    padding: 20px;
    flex-direction: column;
  }
  #recruit .block .welfare ul.col3 li figure {
    margin: 10px 0 0 0;
  }
  #recruit .block .entry .desc {
    margin: 0 0 30px 0;
  }
  #recruit .block .entry .desc p {
    font-size: 14px;
  }
  #recruit .block .link {
    margin: 30px 0 0 0;
  }
  #recruit .block .link p {
    font-size: 14px;
  }
  #recruit .block .link ul.btn_list li {
    width: calc(50% - 5px);
  }
  #recruit .block .link ul.btn_list li a {
    font-size: 13px;
  }
  #recruit .block .contact {
    margin: 60px 0 0 0;
    font-size: 13px;
  }
  #recruit .block .contact h4 {
    font-size: 16px;
  }
}

/*----------------------------------------------------
	INTERVIEW
----------------------------------------------------*/

#interview .block {
  padding: 80px 5% 0;
}
#interview .block .inner {
  max-width: 1000px;
  margin: 0 auto;
}
#interview .block .top {
  display: flex;
  justify-content: space-between;
  flex-direction: row-reverse;
  flex-wrap: wrap;
}
#interview .block .top figure {
  width: 42%;
  padding: 0 0 30px 0;
  text-align: right;
  object-fit: cover;
}
#interview .block .top figure img {
  max-width: 120%;
  margin: 0 0 0 auto;
  transform: translate(-20%,0);
}
#interview .block .top .box {
  width: 58%;
  padding: 30px 13% 30px 30px;
}
#interview .block .top .yellow,
#interview .block .content .yellow,
#interview .block .recruit .yellow {
  background: #f2f091;
}
#interview .block .top .pink,
#interview .block .content .pink,
#interview .block .recruit .pink {
  background: #eec9b8;
}
#interview .block .top .green,
#interview .block .content .green,
#interview .block .recruit .green {
  background: #cbe4b2;
}
#interview .block .top .purple,
#interview .block .content .purple,
#interview .block .recruit .purple {
  background: #c4adcb;
}
#interview .block .top .blue,
#interview .block .content .blue,
#interview .block .recruit .blue {
  background: #a2d2d5;
}
#interview .block .top .box h2 {
  margin: 0 0 20px 0;
  padding: 10px 0 30px 0;
  font-size: 25px;
  font-weight: 700;
  border-bottom: 2px solid #fff;
}
#interview .block .top .box h3 {
  margin: 0 0 15px 0;
  padding: 3px 20px;
  font-weight: 700;
  border-radius: 50px;
  background: #fff;
  display: inline-block;
}
#interview .block .top .box .txt {
  padding: 15px;
  background: #fff;
}
#interview .block .top .box .txt dl {
  margin: 0 0 10px 0;
}
#interview .block .top .box .txt dl dd {
  font-size: 13px;
}
#interview .block .top .box .txt dl dd span {
  font-size: 15px;
}
#interview .block .top .box .txt p {
  font-size: 15px;
}
#interview .block .top .box .txt p span {
  font-size: .9em;
}
#interview .block .content {
  margin: 100px 0 0 0;
}
#interview .block .content .circle {
  width: 125px;
  height: 125px;
  margin: 0 0 20px 0;
  text-align: center;
  border-radius: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}
#interview .block .content .circle p {
  font-size: 15px;
  font-weight: 700;
}
#interview .block .content .circle.english {
  padding: 10px;
}
#interview .block .content .circle.english p {
  font-size: 12px;
}
#interview .block .content .circle p.s {
  font-size: 14px;
  font-feature-settings: "palt";
}
#interview .block .content .txt h3 {
  margin: 0 0 10px 0;
  font-size: 22px;
  font-weight: 700;
}
#interview .block .content .txt p {
  font-size: 16px;
}
#interview .block .content.v1 {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  flex-direction: row-reverse;
}
#interview .block .content.v1 figure {
  width: 40%;
}
#interview .block .content.v1 .box {
  width: 55%;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
}
#interview .block .content.v1 .box .txt {
  width: calc(100% - 145px);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
#interview .block .content.v2 {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  flex-direction: reverse;
}
#interview .block .content.v2 figure {
  width: 60%;
}
#interview .block .content.v2 .box {
  width: 35%;
  display: block;
}
#interview .block .content.v2 .box .txt {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
#interview .block .content.v3 {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
#interview .block .content.v3 figure {
  width: 40%;
}
#interview .block .content.v3 .box {
  width: 55%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
}
#interview .block .content.v3 .box .txt {
  width: calc(100% - 145px);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
#interview .recruit .recruit_inner {
  margin: 100px 0 0 0;
  padding: 50px;
  background: #f2f091;
  position: relative;
}
#interview .recruit .box {
  background: #fff;
  padding: 70px 10% 50px;
}
#interview .recruit .box h2 {
  margin: 0 0 40px 0;
  color: #0068b7;
  font-size: 30px;
  font-weight: 700;
  text-align: center;
}
#interview .recruit .box h3 {
  margin: 0 0 30px 0;
  color: #0068b7;
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  border-bottom: 1px solid #0068b7;
}
#interview .recruit .box .interview {
  margin: 0 0 60px 0;
}
#interview .recruit .box .interview ul {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 40px;
}
#interview .recruit .box .interview ul li {
  width: calc(50% - 20px);
}
#interview .recruit .box .interview ul li a {
  height: 100%;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  position: relative;
}
#interview .recruit .box .interview ul li a .new {
  width: 60px;
  height: 60px;
  background: url(../images/common/ico_new.png) no-repeat left top / 100% 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}
#interview .recruit .box .interview ul li figure {
  overflow: hidden;
}
#interview .recruit .box .interview ul li figure img {
  width: 100%;
  transition: .3s;
}
#interview .recruit .box .interview ul li:hover figure img {
  transition: .8s;
  transform: scale(1.05);
}
#interview .recruit .box .interview ul li .txt {
  height: 100%;
  margin: 0 20px -20px;
  padding: 20px;
  color: #0068b7;
  font-weight: 700;
  background: #fff;
  transform: translate(0,-40px);
}
#interview .recruit .box .interview ul li .txt dl {
  padding: 0 0 10px 0;
  margin: 0 0 10px 0;
  font-size: 12px;
  border-bottom: 1px solid #0068b7;
}
#interview .recruit .box .interview ul li .txt dl dt {
  font-weight: 700;
}
#interview .recruit .box .interview ul li .txt dl dd {
  font-weight: 700;
}
#interview .recruit .box .interview ul li .txt dl dd span {
  font-size: 16px;
}
#interview .recruit .box .interview ul li .txt p {
  font-weight: 700;
}
#interview .recruit .box p.large {
  color: #0068b7;
  font-size: 26px;
  font-weight: 700;
  text-align: center;
}
#interview .recruit .box p.medium {
  color: #0068b7;
  font-size: 22px;
  font-weight: 700;
  text-align: center;
}
#interview .recruit .box p.small {
  color: #0068b7;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
}
#interview .recruit .box .recruit_btn {
  width: 500px;
  margin: 30px auto;
  padding: 10px 0 12px;
  font-size: 26px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  line-height: 1;
  border-radius: 30px;
  border: 1px solid #000;
  background: #f2f091;
  display: block;
  transition: .3s;
}
#interview .recruit .box .recruit_btn.english {
  font-size: 22px;
}
#interview .recruit .box .recruit_btn:hover {
  color: #fff;
  background: #282828;
}
#interview .recruit .box ul.btn_list {
  max-width: 460px;
  margin: 20px auto 0;
  display: flex;
  justify-content: space-between;
}
#interview .recruit .box ul.btn_list li {
  width: calc(50% - 10px);
}
#interview .recruit .box ul.btn_list li a {
  padding: 5px 0;
  color: #0068b7;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  border-radius: 30px;
  border: 1px solid #0068b7;
  display: block;
  transition: .3s;
}
#interview .recruit .box ul.btn_list li a:hover {
  color: #fff;
  background: #0068b7;
}

@media screen and (max-width: 767px) {
  #interview .block {
    padding: 40px 5% 0;
  }
  #interview .block .top figure {
    width: 100%;
    padding: 0;
  }
  #interview .block .top figure img {
    max-width: 100%;
    transform: translate(0,0);
  }
  #interview .block .top .box {
    width: 100%;
    padding: 20px;
  }
  #interview .block .top .box h2 {
    margin: 0 0 20px 0;
    padding: 0 0 20px 0;
    font-size: 18px;
  }
  #interview .block .top .box h3 {
    font-size: 13px;
  }
  #interview .block .top .box .txt {
    padding: 10px;
  }
  #interview .block .top .box .txt dl dd {
    font-size: 13px;
  }
  #interview .block .top .box .txt dl dd span {
    font-size: 14px;
  }
  #interview .block .top .box .txt p {
    font-size: 13px;
  }
  #interview .block .content {
    margin: 40px 0 0 0;
  }
  #interview .block .content .circle {
    width: 125px;
    height: 125px;
    margin: 0 auto 20px;
  }
  #interview .block .content .circle p {
    font-size: 14px;
    font-weight: 700;
  }
  #interview .block .content .circle.english p {
    font-size: 11px;
  }
  #interview .block .content .txt h3 {
    margin: 0 0 10px 0;
    font-size: 16px;
    font-weight: 700;
  }
  #interview .block .content .txt p {
    font-size: 13px;
  }
  #interview .block .content.v1 figure {
    width: 100%;
    margin: 0 0 20px 0;
  }
  #interview .block .content.v1 .box {
    width: 100%;
    display: block;
  }
  #interview .block .content.v1 .box .txt {
    width: 100%;
  }
  #interview .block .content.v2 figure {
    width: 100%;
    margin: 0 0 20px 0;
  }
  #interview .block .content.v2 .box {
    width: 100%;
    display: block;
  }
  #interview .block .content.v2 .box .txt {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  #interview .block .content.v3 figure {
    width: 100%;
    margin: 0 0 20px 0;
  }
  #interview .block .content.v3 .box {
    width: 100%;
    display: block;
  }
  #interview .block .content.v3 .box .txt {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  #interview .recruit .recruit_inner {
    margin: 40px 0 0 0;
    padding: 10px;
  }
  #interview .recruit .box {
    background: #fff;
    padding: 30px 15px;
  }
  #interview .recruit .box h2 {
    margin: 0 0 20px 0;
    font-size: 18px;
  }
  #interview .recruit .box h3 {
    margin: 0 0 20px 0;
    font-size: 14px;
  }
  #interview .recruit .box .interview {
    margin: 0 0 40px 0;
  }
  #interview .recruit .box .interview ul {
    width: 90%;
    margin: 0 auto;
    gap: 20px;
  }
  #interview .recruit .box .interview ul li {
    width: 100%;
  }
  #interview .recruit .box .interview ul li .txt {
    padding: 15px;
  }
  #interview .recruit .box .interview ul li .txt p {
    font-size: 13px;
  }
  #interview .recruit .box p.large {
    font-size: 15px;
  }
  #interview .recruit .box p.medium {
    font-size: 14px;
  }
  #interview .recruit .box p.small {
    font-size: 13px;
  }
  #interview .recruit .box .recruit_btn {
    width: 100%;
    margin: 20px auto;
    font-size: 14px;
  }
  #interview .recruit .box .recruit_btn.english {
    font-size: 12px;
  }
  #interview .recruit .box ul.btn_list {
    max-width: 100%;
    margin: 20px auto 0;
  }
  #interview .recruit .box ul.btn_list li {
    width: calc(50% - 5px);
  }
  #interview .recruit .box ul.btn_list li a {
    font-size: 13px;
  }
}

/*----------------------------------------------------
	PROJECT TOP
----------------------------------------------------*/

#project_top .block {
  padding: 80px 0 0 0;
}
#project_top .project {
  margin: 70px 0 100px 0;
  padding: 0 5%;
}
#project_top .project .inner {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}
#project_top .project .inner .item_1 {
  background: #a4dede;
}
#project_top .project .inner .item_2 {
  background: #71b1df;
}
#project_top .project .inner .item + .item {
  margin: 40px 0 0 0;
}
#project_top .project .inner .item a {
  padding: 40px 100px;
  display: block;
  text-decoration: none;
  position: relative;
}
#project_top .project .inner .item a .new {
  width: 90px;
  height: 90px;
  background: url(../images/common/ico_new.png) no-repeat left top / 100% 100%;
  position: absolute;
  top: 0;
  left: 0;
}
#project_top .project .inner .item .overlay {
  padding: 20px 10% 60px calc(100px + 10%);
  position: absolute;
  left: 0;
  bottom: 0;
}
#project_top .project .inner .item .overlay::before {
  content: "";
  width: 50px;
  height: 50px;
  background: url(../images/about/ico_project.png) no-repeat right bottom / 100% auto;
  position: absolute;
  right: 25px;
  bottom: 25px;
  z-index: 3;
}
#project_top .project .inner .item .overlay::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  opacity: .75;
  mix-blend-mode: multiply;
}
#project_top .project .inner .item_1 .overlay::after {
  background: #81cbc6;
}
#project_top .project .inner .item_2 .overlay::after {
  background: #6e8cc0;
}
#project_top .project .inner .item .overlay img {
  z-index: 4;
}
#project_top .project .flex {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
#project_top .project .flex dl {
  width: 70px;
  font-family: serif;
  line-height: 1.4;
  writing-mode: vertical-rl;
}
#project_top .project .flex dl dt {
  font-size: 16px;
  font-weight: 700;
}
#project_top .project .flex dl dd {
  font-size: 28px;
  font-weight: 700;
}
@media screen and (max-width: 1100px) {
  #project_top .project .flex dl dt {
    font-size: 13px;
  }
  #project_top .project .flex dl dd {
    font-size: 22px;
  }
}
#project_top .project .flex figure {
  width: calc(100% - 100px);
  overflow: hidden;
}
#project_top .project .flex figure img {
  transition: .3s;
}
#project_top .project a:hover .flex figure img {
  transition: .8s;
  transform: scale(1.05);
}

@media screen and (max-width: 767px) {
  #project_top .block {
    padding: 40px 0 0 0;
  }
  #project_top .project {
    margin: 50px 0 60px 0;
    padding: 0 5%;
  }
  #project_top .project .inner .item + .item {
    margin: 20px 0 0 0;
  }
  #project_top .project .inner .item a {
    padding: 20px 20px 70px 20px;
  }
  #project_top .project .inner .item a .new {
    width: 40px;
    height: 40px;
  }
  #project_top .project .inner .item .overlay {
    padding: 10px 30px 50px 30px;
  }
  #project_top .project .inner .item .overlay::before {
    width: 30px;
    height: 30px;
    background: url(../images/about/ico_project.png) no-repeat right bottom / 100% auto;
    position: absolute;
    right: 15px;
    bottom: 15px;
  }
  #project_top .project .inner .overlay img {
    z-index: 4;
  }
  #project_top .project .flex dl {
    width: 100%;
    margin: 0 0 10px 0;
    writing-mode: horizontal-tb;
  }
  #project_top .project .flex dl dt {
    font-size: 13px;
  }
  #project_top .project .flex dl dd {
    font-size: 20px;
  }
  #project_top .project .flex figure {
    width: 100%;
  }
}

/*----------------------------------------------------
	PROJECT
----------------------------------------------------*/

#project .block {
  padding: 80px 5% 0;
}
#project .block .inner {
  max-width: 1000px;
  margin: 0 auto;
}
#project .block .summary {
  margin: 0 0 60px 0;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
#project .block .summary figure {
  width: 50%;
}
#project .block .summary .box {
  width: 50%;
  padding: 30px;
  background: #88d2cd;
  display: flex;
  flex-direction: column;
}
#project .block .summary .box .txt {
  display: flex;
  justify-content: center;
  flex-direction: column;
  flex: 1;
}
#project .block .summary .box .txt h2 {
  margin: 0 0 20px 0;
  font-size: 25px;
  font-weight: 700;
  line-height: 1.5;
}
#project .block .summary .box .txt p {
  font-size: 15px;
  font-weight: 700;
}
#project .block .summary .box .copy {
  font-size: 12px;
}
#project .block .list ul {
  margin: 23% 0 10px 0;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
#project .block .list ul li {
  width: calc(33.33% - 20px);
  padding: 20px;
  background: #88d2cd;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
}
#project .block .list ul li figure {
  margin: -70% 0 20px 0;
  overflow: hidden;
}
#project .block .list ul li figure img {
  width: 100%;
}
#project .block .list ul li .txt {
  height: 100%;
  padding: 20px;
  background: #fff;
}
#project .block .list ul li .txt dl {
  margin: 0 0 10px 0;
  line-height: 1.4;
}
#project .block .list ul li .txt dl dd {
  margin: 10px 0 0 0;
  font-size: 13px;
}
#project .block .list ul li .txt dl dd.name span {
  font-size: 16px;
}
#project .block .talk {
  max-width: 800px;
  margin: 0 auto;
}
#project .block .talk h2 {
  margin: 80px 0 60px 0;
  font-size: 22px;
  font-weight: 700;
  border-bottom: 6px solid #88d2cd;
  display: inline-block;
}
#project .block .talk ul li {
  padding: 0 105px 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
#project .block .talk ul li:nth-child(even) {
  padding: 0 0 0 105px;
  flex-direction: row-reverse;
}
#project .block .talk ul li + li {
  margin: 30px 0 0 0;
}
#project .block .talk ul li figure {
  width: 85px;
}
#project .block .talk ul li figure figcaption {
  font-size: 10px;
  text-align: center;
}
#project .block .talk ul li figure figcaption span {
  font-size: 12px;
}
#project .block .talk ul li .txt {
  width: calc(100% - 105px);
  font-size: 16px;
}
#project .block .talk .image {
  margin: 60px 0 0 0;
  display: flex;
  justify-content: center;
  gap: 30px;
}
#project .block .talk .image figure {
  width: calc(50% - 15px);
}
#project .block .talk .image figure figcaption {
  font-size: 12px;
  text-align: right;
}
#project .block .last {
  max-width: 1300px;
  margin: 60px auto 0;
}
#project.project2 .block .summary .box,
#project.project2 .block .list ul li {
  background: #71b1df!important;
}
#project.project2 .block .talk h2 {
  border-color: #71b1df;
}

@media screen and (max-width: 767px) {
  #project .block {
    padding: 40px 5% 0;
  }
  #project .block .summary {
    margin: 0 0 40px 0;
  }
  #project .block .summary figure {
    width: 100%;
    padding: 0;
  }
  #project .block .summary .box {
    width: 100%;
    padding: 20px;
  }
  #project .block .summary .box .txt h2 {
    margin: 0 0 10px 0;
    font-size: 16px;
  }
  #project .block .summary .box .txt p {
    font-size: 13px;
  }
  #project .block .summary .box .copy {
    margin: 10px 0 0 0;
    font-size: 11px;
  }
    #project .block .list ul {
    margin: 0 0 10px 0;
  }
  #project .block .list ul li {
    width: 80%;
    margin: 35% auto 0;
    padding: 15px;
  }
  #project .block .list ul li figure {
    margin: -45% 0 20px 0;
    overflow: hidden;
  }
  #project .block .list ul li .txt {
    height: 100%;
    padding: 10px;
    background: #fff;
  }
  #project .block .list ul li .txt dl {
    margin: 0 0 10px 0;
    font-size: 13px;
  }
  #project .block .list ul li .txt dl dd {
    margin: 5px 0 0 0;
    font-size: 12px;
  }
  #project .block .list ul li .txt dl dd.name span {
    font-size: 16px;
  }
  #project .block .list ul li .txt p {
    font-size: 13px;
  }
  #project .block .talk h2 {
    margin: 40px 0 30px 0;
    font-size: 16px;
    border-bottom: 4px solid #88d2cd;
  }
  #project .block .talk ul li {
    padding: 0;
  }
  #project .block .talk ul li:nth-child(even) {
    padding: 0;
  }
  #project .block .talk ul li + li {
    margin: 20px 0 0 0;
  }
  #project .block .talk ul li figure {
    width: 65px;
  }
  #project .block .talk ul li figure figcaption {
    font-size: 10px;
    text-align: center;
  }
  #project .block .talk ul li figure figcaption span {
    font-size: 10px;
  }
  #project .block .talk ul li .txt {
    width: calc(100% - 85px);
    font-size: 13px;
  }
  #project .block .talk .image {
    margin: 30px 0 0 0;
    gap: 10px;
  }
  #project .block .talk .image figure {
    width: calc(100% - 5px);
  }
  #project .block .talk .image figure figcaption {
    font-size: 10px;
  }
  #project .block .last {
    max-width: 1300px;
    margin: 30px auto 0;
  }
}


/*----------------------------------------------------
	FORM
----------------------------------------------------*/

.form {
  max-width: 720px;
  margin: 0 auto;
}
.form dl {
  margin: 0 0 30px 0;
  display: flex;
  justify-content: space-between;
}
.form dl dt {
  width: 200px;
  padding: 5px 0 0 0;
  color: #000;
  font-size: 16px;
  font-weight: 500;
}
.form dl dt.required:after {
  content: "必須";
  margin: 0 0 0 7px;
  padding: 2px 3px 3px;
  color: #c01733;
  font-size: 12px;
  font-style: normal;
  line-height: 1;
  display: inline-block;
}
.form.english dl dt.required:after {
  content: "Required";
  font-size: 10px;
}
.form dl dt span.s {
  font-size: 80%;
}
.form dl dd {
  width: calc(100% - 200px);
  font-size: 16px;
}
.form dd p {
  margin: 3px 0 0 0;
  font-size: 14px;
}
.form input[type="text"],
.form input[type="tel"],
.form input[type="email"] {
  width: 100%;
  padding: 12px;
  font-size: 16px;
  border: 1px  solid #929293;
}
.form input[type="text"].number {
  width: 80px;
  margin: 0 10px 0 0;
}
.form input[type="radio"] {
	margin: 0 5px 3px 0;
}
.form .radio_block span.wpcf7-st-item {
	margin: 5px 20px 5px 0;
	display: inline-block;
}
.form .radio_block span.has-free-text {
  display: block;
  
}
.form input[type="checkbox"] {
	margin: 0 5px 3px 0;
}
.form .check_block span.wpcf7-list-item {
	margin: 5px 20px 5px 0;
  color: #000;
	display: block;
}
.form .check_block span {
  font-weight: 500;
}
.form .last {
  display: flex;
  align-items: center;
}
.form input[type="text"].wpcf7-free-text {
  width: 60%;
  margin: 0 0 0 10px;
  padding: 10px;
}
.form textarea {
  width: 100%;
  height: 200px;
  padding: 12px;
  font-size: 16px;
  border: 1px  solid #929293;
}
.form textarea.small {
  max-width: 600px;
  height: 120px;
}
.form .note {
  margin: 50px 0 0 0;
  text-align: center;
  font-size: 13px;
}
.form .btn {
  margin: 40px 0 0 0;
  text-align: center;
}
.form .btn .submit {
  padding: 15px 70px;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  text-decoration: none;
  border: none;
  background: transparent;
  display: inline-block;
  background: #0068b7;
  position: relative;
  z-index: 2;
  transition: .3s;
  cursor: pointer;
}
.form .btn .submit:hover {
  opacity: .7;
}
.form .wpcf7-spinner {
  display: none;
}
.form select {
  padding: 12px;
  height: 50px;
}
.form input.s {
  width: 100px;
}
.form input.s2 {
  width: 60px;
}
.form .birth {
  display: flex;
  align-items: center;
  gap: 10px;
}
@media screen and (max-width: 767px) {
  .form dl {
    margin: 0 0 20px 0;
    display: block;
  }
  .form dl dt {
    width: 100%;
    font-size: 14px;
  }
  .form dl dt.required:after {
    font-size: 10px;
  }
  .form dl dd {
    width: 100%;
    margin: 10px 0 0 0;
    font-size: 13px;
  }
  .form dd p {
    font-size: 11px;
  }
  .form input[type="text"] {
    padding: 10px;
    font-size: 14px;
  }
  .form input[type="radio"] {
    margin: 0 5px 3px 0;
  }
  .form span.wpcf7-list-item {
    margin: 5px 20px 5px 0;
    display: block!important;
  }
  .form input[type="text"].wpcf7-free-text {
    width: calc(100% - 80px);
    padding: 10px;
  }
  .form textarea {
    height: 150px;
    padding: 10px;
  }
  .form .note {
    margin: 30px 0 0;
    font-size: 13px;
    text-align: left;
  }
  .form .btn {
    margin: 30px 0 0 0;
  }
  .form input.s {
    width: 80px;
  }
  .form input.s2 {
    width: 50px;
  }
}

/*----------------------------------------------------
	PRIVACY
----------------------------------------------------*/

#privacy .block {
  padding: 80px 5% 0;
}
#privacy .block .inner {
  max-width: 1000px;
  margin: 0 auto;
}
#privacy .block h2 {
  margin: 40px 0 0;
  font-weight: 700;
}
#privacy .block p + p {
  margin: 20px 0 0 0;
}

@media screen and (max-width: 767px) {
  #privacy .block {
    padding: 40px 5% 0;
  }
}

/*----------------------------------------------------
	SITE MAP
----------------------------------------------------*/

#sitemap .block {
  padding: 80px 5% 0;
}
#sitemap .block .inner {
  max-width: 1000px;
  margin: 0 auto;
}
#sitemap .block .flex {
  padding: 30px 0 50px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
#sitemap .block .flex ul li {
  font-weight: 700;
}
#sitemap .block .flex ul li a {
  text-decoration: none;
}
#sitemap .block .flex ul li a:hover {
  text-decoration: underline;
}

#sitemap .block .flex > ul > li + li {
  margin: 15px 0 0 0;
}
#sitemap .block .flex > ul > li > ul {
  margin: 10px 0 0 0;
}
#sitemap .block .flex > ul > li > ul > li {
  margin: 0;
  padding: 0 0 0 1em;
  line-height: 2;
}
#sitemap .block .flex ul li img {
  width: 20px;
  margin: 0 10px 0 0;
}

@media screen and (max-width: 767px) {
  #sitemap .block {
    padding: 40px 5% 0;
  }
  #sitemap .block .flex {
    padding: 10px 0 0 0;
  }
  #sitemap .block .flex ul {
    width: 100%;
  }
  #sitemap .block .flex ul + ul {
    margin: 10px 0 0 0;
  }
}