@charset "UTF-8";
/*! Writen  by SCSS */
/*幅検知用*/
.conW {
  max-width: 976px; }

.contentsWrap {
  background: #fff; }
  .contentsWrap img {
    display: block;
    width: 100%; }

.inner {
  /*width: 100%;*/
  max-width: 976px;
  padding: 0 2px;
  box-sizing: content-box;
  margin-left: auto;
  margin-right: auto; }
  .inner.type02 {
    max-width: 620px; }
  .inner.type03 {
    max-width: 540px; }
  @media screen and (max-width: 768px) {
    .inner {
      margin-left: 4.00vw;
      margin-right: 4.00vw;
      padding: 0; } }

.lNav {
  display: flex;
  justify-content: space-between;
  margin-bottom: 100px; }
  @media screen and (max-width: 768px) {
    .lNav {
      margin-bottom: 60px; } }
  .lNav li {
    width: calc((310 / 976) * 100%); }
    @media screen and (max-width: 768px) {
      .lNav li {
        width: calc((120 / 375) * 100%); } }
    .lNav li a {
      position: relative;
      display: block;
      border-width: 1px;
      border-style: solid;
      border-color: #bbb;
      transition: .3s; }
      .lNav li a::after {
        content: "";
        position: absolute;
        right: 15px;
        top: 50%;
        display: block;
        width: 40px;
        height: 40px;
        background-image: url("../images/ico_lnav02.svg");
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        transform: translate(0, -50%); }
        @media screen and (max-width: 768px) {
          .lNav li a::after {
            /*right: 10px;
            width: 13px;
            height: 13px;*/
            top: auto;
            left: 50%;
            bottom: 10px;
            width: 30px;
            height: 30px;
            transform: translate(-50%, 0); } }
      .lNav li a:hover {
        border-color: #202124; }
        .lNav li a:hover img {
          opacity: 1; }
      .lNav li a img {
        opacity: 0.5;
        transition: .3s; }
    .lNav li.current a {
      border-color: #202124; }
      .lNav li.current a img {
        opacity: 1; }

.pageHTec {
  min-height: 650px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 100px;
  background-color: #000000;
  background-image: url("../images/mv_pc.jpg");
  background-position: center center;
  background-size: auto 100%;
  color: #ffffff;
  text-align: center; }
  @media screen and (max-width: 768px) {
    .pageHTec {
      min-height: 480px;
      margin-bottom: 60px;
      background-image: url("../images/mv_sp.jpg");
      background-position: left center; } }
  .pageHTec .ttlPage {
    line-height: 1.0; }
    .pageHTec .ttlPage img {
      width: calc((460 / 976) * 100%);
      max-width: 460px;
      margin: 0 auto;
      filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.9)); }
      @media screen and (max-width: 768px) {
        .pageHTec .ttlPage img {
          width: calc((210 / 375) * 100%); } }
    .pageHTec .ttlPage h1 {
      margin: 40px 0;
      font-size: clamp(16.1px, calc(23vw / 9.76), 23px);
      letter-spacing: 0.1em; }
      @media screen and (max-width: 768px) {
        .pageHTec .ttlPage h1 {
          margin: 20px 0;
          font-size: clamp(10.5px, calc(15vw / 3.75), 15px); } }
    .pageHTec .ttlPage + p {
      font-size: clamp(11.2px, calc(16vw / 9.76), 16px);
      line-height: 2.0; }
      @media screen and (max-width: 768px) {
        .pageHTec .ttlPage + p {
          font-size: clamp(9.1px, calc(13vw / 3.75), 13px); } }
  .pageHTec .lNav {
    margin: 80px 0 0 0; }
    @media screen and (max-width: 768px) {
      .pageHTec .lNav {
        margin: 25px 0 0 0; } }
    .pageHTec .lNav li a {
      background-color: rgba(0, 0, 0, 0.5);
      border-color: transparent; }
      .pageHTec .lNav li a::after {
        background-image: url("../images/ico_lnav01.svg"); }
      .pageHTec .lNav li a:hover {
        background-color: rgba(0, 0, 0, 0.9);
        border-color: #transparent; }
        .pageHTec .lNav li a:hover img {
          opacity: 0.5; }
      .pageHTec .lNav li a img {
        opacity: 1; }
    .pageHTec .lNav li.current a {
      border-color: transparent; }

.tecSec {
  margin-bottom: 100px; }
  @media screen and (max-width: 768px) {
    .tecSec {
      margin-bottom: 60px; } }
  .tecSec:last-of-type {
    margin-bottom: 0; }

.tecInner {
  max-width: 700px;
  padding: 0 2px;
  box-sizing: content-box;
  margin-left: auto;
  margin-right: auto; }
  @media screen and (max-width: 768px) {
    .tecInner {
      margin-left: 4.00vw;
      margin-right: 4.00vw;
      padding: 0; } }

.tecUnit {
  margin-bottom: 100px; }
  @media screen and (max-width: 768px) {
    .tecUnit {
      margin-bottom: 50px; } }

.tecCopy01 {
  margin: 0 0 30px 0;
  font-size: clamp(16.8px, calc(24vw / 9.76), 24px);
  text-align: left;
  line-height: 1.8; }
  @media screen and (max-width: 768px) {
    .tecCopy01 {
      margin: 0 0 20px 0;
      font-size: clamp(12.6px, calc(18vw / 3.75), 18px);
      text-align: center; } }

.tecLead01 {
  margin: 0 0 40px 0;
  font-size: clamp(11.2px, calc(16vw / 9.76), 16px);
  text-align: left;
  line-height: 2.0; }
  @media screen and (max-width: 768px) {
    .tecLead01 {
      margin: 0 0 30px 0;
      font-size: clamp(10.5px, calc(15vw / 3.75), 15px); } }

.txtLink {
  color: #004DFF;
  text-decoration: underline; }

.tecH {
  position: relative;
  z-index: 2; }
  @media screen and (max-width: 768px) {
    .tecH {
      display: flex;
      justify-content: space-between; } }
  .tecH .ttlTec {
    position: absolute;
    left: 50%;
    top: 0;
    width: 100%;
    max-width: 976px;
    transform: translate(-50%, 0); }
    @media screen and (max-width: 768px) {
      .tecH .ttlTec {
        position: relative;
        left: 0;
        width: 30%;
        transform: none; } }
    .tecH .ttlTec h2 {
      width: 90px; }
      @media screen and (max-width: 768px) {
        .tecH .ttlTec h2 {
          width: 40%;
          margin: 0 auto; } }
      .tecH .ttlTec h2 figure {
        margin: 0 0 20px 0;
        padding: 0 0 20px 0;
        border-bottom: 1px solid #202124; }
      .tecH .ttlTec h2 span {
        display: inline-block;
        writing-mode: vertical-rl;
        text-orientation: mixed;
        font-size: clamp(53.9px, calc(77vw / 9.76), 77px);
        line-height: 1.0;
        letter-spacing: 0.1me; }
        @media screen and (max-width: 768px) {
          .tecH .ttlTec h2 span {
            font-size: clamp(35px, calc(50vw / 3.75), 50px); } }
    .tecH .ttlTec + figure {
      margin-left: auto;
      margin-right: 0; }
      @media screen and (max-width: 768px) {
        .tecH .ttlTec + figure {
          width: 70%; } }
      .tecH .ttlTec + figure img {
        width: calc(100% - 50px);
        margin-left: auto;
        margin-right: 0; }
        @media screen and (max-width: 768px) {
          .tecH .ttlTec + figure img {
            width: 100%;
            object-fit: cover;
            object-position: left center;
            height: 250px;
            width: auto; } }

.tecB {
  position: relative; }
  .tecB .copyTec {
    position: relative;
    margin-bottom: 100px;
    color: #ffffff; }
    @media screen and (max-width: 768px) {
      .tecB .copyTec {
        margin-bottom: 60px; } }
    .tecB .copyTec > .bg {
      position: absolute;
      left: 0;
      top: -110px;
      display: block;
      width: calc(100vw - 120px);
      height: calc(100% - 110px);
      min-height: 300px;
      background: #A1A8AF;
      z-index: 1; }
      @media screen and (max-width: 768px) {
        .tecB .copyTec > .bg {
          top: -30px;
          width: calc(100vw - 10px);
          height: calc(100% + 30px);
          min-height: 160px; } }
    .tecB .copyTec .tecInner {
      position: relative;
      padding: 65px 0 50px 0;
      z-index: 3; }
      @media screen and (max-width: 768px) {
        .tecB .copyTec .tecInner {
          padding: 35px 0 20px 0; } }
    .tecB .copyTec .t01 {
      font-size: clamp(12.6px, calc(18vw / 9.76), 18px);
      line-height: 1.4;
      letter-spacing: 0.15em;
      text-align: left; }
    .tecB .copyTec .t02 {
      margin: 10px 0 0 0;
      font-size: clamp(26.6px, calc(38vw / 9.76), 38px);
      line-height: 1.4;
      text-align: left; }

.technology01 .tec01List section {
  display: flex;
  justify-content: space-between; }
  .technology01 .tec01List section:nth-of-type(2n+1) {
    flex-direction: row; }
  .technology01 .tec01List section:nth-of-type(2n) {
    flex-direction: row-reverse; }
  @media screen and (max-width: 768px) {
    .technology01 .tec01List section {
      display: block; } }
  .technology01 .tec01List section div {
    width: calc((320 / 700) * 100%); }
    @media screen and (max-width: 768px) {
      .technology01 .tec01List section div {
        width: 100%; } }
  .technology01 .tec01List section figure {
    width: calc((350 / 700) * 100%); }
    @media screen and (max-width: 768px) {
      .technology01 .tec01List section figure {
        width: 80%;
        margin: 0 auto; } }
    .technology01 .tec01List section figure figcaption {
      margin: 10px 0 0 0;
      font-size: clamp(11.2px, calc(16vw / 9.76), 16px);
      text-align: center;
      line-height: 1.0; }
.technology01 .tec0103 figure {
  position: relative;
  width: calc((380 / 700) * 100%) !important; }
  @media screen and (max-width: 768px) {
    .technology01 .tec0103 figure {
      width: 80% !important; } }
  .technology01 .tec0103 figure img {
    margin-left: -30px; }
    @media screen and (max-width: 768px) {
      .technology01 .tec0103 figure img {
        margin-left: 0; } }
.technology01 .tec0107 figure {
  position: relative; }
  .technology01 .tec0107 figure img:nth-of-type(2) {
    position: absolute;
    left: -100px;
    top: -35px;
    width: 170px; }
    @media screen and (max-width: 768px) {
      .technology01 .tec0107 figure img:nth-of-type(2) {
        left: -40px;
        top: -20px;
        width: 110px; } }
.technology01 .tec0108 {
  padding: 100px 0;
  background: #f4f4f4; }
  .technology01 .tec0108 .anshinLogo {
    max-width: 340px;
    margin: 0 auto 70px auto; }
    @media screen and (max-width: 768px) {
      .technology01 .tec0108 .anshinLogo {
        width: 80%;
        margin-bottom: 40px; } }
  .technology01 .tec0108 .tecCopy01 {
    text-align: center; }
  .technology01 .tec0108 ul {
    display: flex;
    justify-content: space-between; }
    @media screen and (max-width: 768px) {
      .technology01 .tec0108 ul {
        flex-wrap: wrap; } }
    .technology01 .tec0108 ul li {
      width: calc((200 / 700) * 100%);
      text-align: center; }
      .technology01 .tec0108 ul li figure {
        background: linear-gradient(135deg, #DEEAF7, #ffffff 50%, #ffffff 100%);
        border: 1px solid #fff;
        border-radius: 50%;
        overflow: hidden;
        box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2);
        text-align: center; }
      @media screen and (max-width: 768px) {
        .technology01 .tec0108 ul li {
          width: 48%; }
          .technology01 .tec0108 ul li:nth-of-type(1) {
            display: flex;
            width: 100%; }
            .technology01 .tec0108 ul li:nth-of-type(1) figure {
              width: 48%;
              margin: 0 auto; } }
  .technology01 .tec0108 .cap_l {
    display: block;
    margin-top: 20px;
    font-size: clamp(9.1px, calc(13vw / 9.76), 13px); }
    @media screen and (max-width: 768px) {
      .technology01 .tec0108 .cap_l {
        font-size: clamp(8.4px, calc(12vw / 3.75), 12px); } }

.technology02 .tec0203 {
  padding: 70px calc((70 / 700) * 100%);
  background: #f4f4f4; }
  @media screen and (max-width: 768px) {
    .technology02 .tec0203 {
      padding: 20px 10px; }
      .technology02 .tec0203 .tecCopy01 {
        font-size: clamp(11.9px, calc(17vw / 3.75), 17px); } }
  .technology02 .tec0203 figure {
    max-width: 460px;
    margin: 0 auto; }
  .technology02 .tec0203 .cap_l {
    display: block;
    margin-top: 20px; }
.technology02 .tec0205 {
  padding: 70px calc((70 / 700) * 100%);
  border: 1px solid #202124; }
  @media screen and (max-width: 768px) {
    .technology02 .tec0205 {
      padding: 20px; } }
  .technology02 .tec0205 ul {
    display: flex;
    justify-content: center;
    margin: 0 0 30px 0; }
    @media screen and (max-width: 768px) {
      .technology02 .tec0205 ul {
        justify-content: space-around;
        margin-bottom: 20px; } }
    .technology02 .tec0205 ul li {
      width: 200px;
      margin: 0 15px;
      text-align: center; }
      @media screen and (max-width: 768px) {
        .technology02 .tec0205 ul li {
          width: 48%;
          margin: 0; } }

.technology03 .tec0301 ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; }
  @media screen and (max-width: 768px) {
    .technology03 .tec0301 ul {
      width: 80%;
      margin: 0 auto; } }
  .technology03 .tec0301 ul li {
    width: calc((175 / 700) * 100%); }
    @media screen and (max-width: 768px) {
      .technology03 .tec0301 ul li {
        width: 50%; } }
    .technology03 .tec0301 ul li:nth-of-type(5), .technology03 .tec0301 ul li:nth-of-type(6) {
      width: calc((340 / 700) * 100%);
      margin-top: 20px; }
      @media screen and (max-width: 768px) {
        .technology03 .tec0301 ul li:nth-of-type(5), .technology03 .tec0301 ul li:nth-of-type(6) {
          width: 100%;
          margin-top: 10px; } }
.technology03 .tec0302 ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; }
  @media screen and (max-width: 768px) {
    .technology03 .tec0302 ul {
      display: block;
      width: 80%;
      margin: 0 auto; } }
  .technology03 .tec0302 ul li {
    width: calc((180 / 700) * 100%); }
    @media screen and (max-width: 768px) {
      .technology03 .tec0302 ul li {
        width: 100%;
        margin: 0 0 30px 0; } }
    .technology03 .tec0302 ul li h5 {
      padding: 15px calc(15px + 0.2em) 15px 15px;
      background: #002870;
      color: #ffffff;
      font-size: clamp(10.5px, calc(15vw / 9.76), 15px);
      text-align: center;
      line-height: 1.0;
      letter-spacing: 0.2em; }
      @media screen and (max-width: 768px) {
        .technology03 .tec0302 ul li h5 {
          padding-top: 10px;
          padding-bottom: 10px;
          font-size: clamp(10.5px, calc(15vw / 3.75), 15px); } }
    .technology03 .tec0302 ul li p {
      margin: 15px 0;
      font-size: clamp(10.5px, calc(15vw / 9.76), 15px);
      text-align: center;
      line-height: 1.0; }
      @media screen and (max-width: 768px) {
        .technology03 .tec0302 ul li p {
          font-size: clamp(10.5px, calc(15vw / 3.75), 15px); } }
.technology03 .tec0303 ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; }
  @media screen and (max-width: 768px) {
    .technology03 .tec0303 ul {
      display: block;
      width: 90%;
      margin: 0 auto; } }
  .technology03 .tec0303 ul li:nth-of-type(1) {
    width: calc(((260 + ((40 / 700) * 100%)) / 700) * 100%);
    padding-right: calc((25 / 700) * 100%);
    border-right: 1px solid #202124; }
    @media screen and (max-width: 768px) {
      .technology03 .tec0303 ul li:nth-of-type(1) {
        width: 90%;
        margin: 0 auto 30px auto;
        padding: 0 0 30px 0;
        border-right: none;
        border-bottom: 1px solid #202124; } }
  .technology03 .tec0303 ul li:nth-of-type(2) {
    width: calc((380 / 700) * 100%); }
    @media screen and (max-width: 768px) {
      .technology03 .tec0303 ul li:nth-of-type(2) {
        width: 100%; } }
  .technology03 .tec0303 ul li h5 {
    margin: 0 0 10px 0;
    font-size: clamp(10.5px, calc(15vw / 9.76), 15px);
    text-align: center;
    line-height: 1.0; }
    @media screen and (max-width: 768px) {
      .technology03 .tec0303 ul li h5 {
        font-size: clamp(10.5px, calc(15vw / 3.75), 15px); } }
.technology03 .tec0303 .cap_l {
  display: block;
  margin-top: 20px; }
.technology03 .tec0304 figure {
  max-width: 460px;
  margin: 0 auto; }
.technology03 .tec03List {
  padding: 100px 0;
  background: #f4f4f4; }
  @media screen and (max-width: 768px) {
    .technology03 .tec03List {
      padding: 60px 0; } }

@media screen and (max-width: 768px) {
  .scrlX {
    overflow-x: scroll;
    padding-bottom: 10px; }
    .scrlX figure {
      width: 150vw; }
      .scrlX figure img {
        width: 100%; } }

/*set aos
--------------------------------- */
/*custom animation*/
* [data-aos="ca-slideup"] {
  transform: translateY(30px); }

* [data-aos="ca-slideup"].aos-animate {
  transform: translateY(0); }

* [data-aos="ca-slideleft"] {
  transform: translateX(30px); }

* [data-aos="ca-slideleft"].aos-animate {
  transform: translateY(0); }

* [data-aos="ca-slideright"] {
  transform: translateX(-30px); }

* [data-aos="ca-slideright"].aos-animate {
  transform: translateY(0); }

* [data-aos="ca-fade"] {
  opacity: 0; }

* [data-aos="ca-fade"].aos-animate {
  opacity: 1; }

* [data-aos="ca-fadeup"] {
  transform: translateY(30px);
  opacity: 0; }

* [data-aos="ca-fadeup"].aos-animate {
  transform: translateY(0);
  opacity: 1; }

/*ca-fadeup02*/
* [data-aos="ca-fadeup02"] {
  transform: translateY(30px); }

* [data-aos="ca-fadeup02"].aos-animate {
  transform: translateY(0); }

* [data-aos="ca-fadeup02"] img {
  opacity: 0;
  transition-duration: .6s; }

* [data-aos="ca-fadeup02"].aos-animate img {
  opacity: 1; }

* [data-aos="ca-fadeleft"] {
  transform: translateX(30px);
  opacity: 0; }

* [data-aos="ca-fadeleft"].aos-animate {
  transform: translateX(0);
  opacity: 1; }

* [data-aos="ca-faderight"] {
  transform: translateX(-30px);
  opacity: 0; }

* [data-aos="ca-faderight"].aos-animate {
  transform: translateX(0);
  opacity: 1; }

/* for pc*/
@media screen and (min-width: 768px) {
  /*custom animation*/
  * [data-aos="ca-slideup"] {
    transform: translateY(60px); }

  * [data-aos="ca-fadeup"] {
    transform: translateY(60px); }

  * [data-aos="ca-fadeup02"] {
    transform: translateY(60px); }

  * [data-aos="ca-slideleft"] {
    transform: translateX(60px); }

  * [data-aos="ca-slideright"] {
    transform: translateX(-60px); }

  * [data-aos="ca-fadeleft"] {
    transform: translateX(60px); }

  * [data-aos="ca-faderight"] {
    transform: translateX(-60px); } }