@charset "UTF-8";

/*************************************
    hakaru.aiの特長ページスタイル
**************************************/
.mb-0 {
  margin-bottom: 0;
}

.sec{
  padding: 80px 0;
  @media screen and (max-width: 39.9375em) {
    padding: 40px 0;
  }
}

/* KV */
.kv{
  .lead-area {
    .page-ttl,h2,p{ 
      color: #292929;
    }
  }
}

.s-introMovie {
  display: inline-block;
}

.s-introMovie svg {
  margin: auto;
  transition-property: transform;
  transition-duration: .2s;
  transform-origin: 50% 50%;
}

.s-introMovie:hover svg {
  transform: scale(1.1);
}

.btn-circle {
  fill: #040000;
  fill-opacity: 0.4;
}

.s-introMovie:hover svg .btn-circle {
  fill: #fff;
  fill-opacity: 0.4;
}

.s-introMovie:hover .stroke-solid {
  fill-opacity: 0;
}

@media screen and (min-width: 40em) {

  /*　videoエリア下のパンくずようスタイル*/
  .video-top+.breadcrumbs {
    width: 100%;
    padding: 15px 0;
  }

  .video-top+.breadcrumbs li {
    display: inline-block;
    font-size: 14px;
    color: #4e4644;
  }

  .video-top+.breadcrumbs li a {
    color: #999;
    display: inline-block;
    position: relative;
  }

  .video-top+.breadcrumbs li a:after {
    display: inline-block;
    content: '/';
    padding: 0 0.5rem;
    text-decoration: none;
  }

  /* 動画はめ込みトップ */
  .video-top {
    position: relative;
    width: 100%;
    height: 650px;
    overflow: hidden;
  }

  .video-wrap {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 100%;
    height: auto;
    min-height: 650px;
    max-height: 650px;
    z-index: 1;
  }

  .video-wrap:before {
    display: block;
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
    background-image: url(../img/aboutai_video_overlay.png);
    background-size: cover;
    opacity: 1;
  }

  .video-wrap video {
    width: 100%;
    height: auto;
    min-height: 650px;
  }

  .video-top .lead-area {
    position: absolute;
    z-index: 5;
    width: 100%;
    max-width: 1000px;
    top: 215px;
    left: 0;
    right: 0;
    margin: auto;
  }

  .video-top .lead-area .page-ttl,
  .video-top .lead-area .ttl-h2 {
    margin-bottom: 20px;
  }

  .intro_play_btn_box {
    position: absolute;
    top: 70%;
    left: 0;
    right: 0;
    z-index: 5;
    width: 120px;
    height: 120px;
    margin: 0 auto;
  }

  .aboutai-content,
  .hakaruai-something {
    padding: 70px 0;
  }

  .abouthakaruai-content {
    padding: 230px 0 30px;
    margin-bottom: 80px;
  }

  /*hakasu.aiコンパネ画面画像エリア*/
  .about_conpane {
    padding: 70px 0;
  }

  .about_conpane h3+p {
    text-align: center;
  }

  .about_conpane .sp_img {
    display: none;
  }

  /*hakaru.aiでできること*/
  .hakaruai-something .flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
  }

  .hakaruai-something .flex li {
    width: 45%;
    max-width: 482px;
    min-height: 187px;
    background: #fff;
    box-shadow: 0 0 7px 1px rgba(17, 26, 43, 0.15);
    display: table;
    padding: 10px 15px 10px 20px;
    margin-bottom: 40px;
  }

  .hakaruai-something .flex li figure {
    display: table-cell;
    width: 33%;
    vertical-align: middle;
  }

  .hakaruai-something .flex li p {
    display: table-cell;
    padding-left: 20px;
    vertical-align: middle;
  }

  /*hakaru.aiの「AI（人工知能）」について*/
  .aboutai-content .lead-text {
    text-align: center;
    font-size: 1.25rem;
  }

  .abouthakaru_dl {
    width: calc((100% - 40px)/3);
    margin: 20px 0 30px;
  }

  .abouthakaru_dl:not(:last-of-type) {
    margin-right: 20px;
  }

  .abouthakaru_dl .abouthakaru-img {
    margin-bottom: 15px;
    text-align: center;
  }

  .abouthakaru_dl .abouthakaru-img img {
    box-shadow: 0 2px 7px 1px rgba(17, 26, 43, 0.2);
  }

  .abouthakaru_dl dt {
    font-size: 1.5rem;
    margin-bottom: 20px;
  }

  .abouthakaru_dl .abouthakaru-text {
    word-break: normal;
    /*font-size: 0.95rem;*/
  }

  .abouthakaru_dl .abouthakaru-text .no-break {
    word-break: keep-all;
  }

  .abouthakaru_dl .text-green {
    font-size: 1.5rem;
    line-height: 1.4;
    margin-bottom: 20px;
    font-weight: 500;
  }

  /*AIってなに？*/
  .abouthakaruai-content {
    background: #eaf0f4;
    width: 100%;
    position: relative;
  }

  .whatsai-box {
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 180px;
    height: 180px;
    background: #387d94;
    padding-top: 40px;
  }

  .whatsai-box figure {
    text-align: center;
  }

  .whatsai-box h3 {
    color: #fff;
    font-size: 1.5rem;
    text-align: center;
  }

  .abouthakaruai-content h4.text-green {
    font-weight: 400;
    font-size: 1.5rem;
  }

  .aboutai_box {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    margin: 30px auto;
  }

  .aboutaiimg {
    width: 50%;
    background: #fff;
    padding: 20px 10px;
  }

  .aboutaiimg figcaption {
    font-size: 1.25rem;
    margin-bottom: 20px;
    color: #387d94;
  }

  .aboutaiimg figure {
    width: 95%;
    margin: 0 auto;
  }

  .hakaruai_box {
    width: 50%;
    box-sizing: border-box;
    padding-left: 48px;
  }

  .learning_dl {
    margin-bottom: 30px;
  }

  .learning_dl dt {
    font-size: 1.125rem;
    font-weight: 500;
    position: relative;
  }

  .learning_dl dt:before {
    display: inline-block;
    content: '●';
    font-size: .5rem;
    color: #387d94;
    font-weight: 400;
    position: absolute;
    top: .5rem;
    left: -1.2rem;
  }

  .learning_dl dd {
    line-height: 1.4;
  }

  .hakaru-ai-tech {
    width: 100%;
    border-top: 1px solid #b7c5ca;
    padding: 10px 5px 30px;
    display: flex;
    align-items: center;
  }

  .hakaru-ai-tech .ttl-logo {
    width: 30%;
  }
}

/*.about_conpaneエリアのコンパネ画像は1000px以下で少し縮めて余白をつける*/
@media screen and (max-width: 62.50em) {
  .about_conpane .pc_img img {
    width: 98%;
  }
}

@media screen and (max-width: 39.9375em) {

  /* 動画はめ込みトップ */
  .video-top {
    position: relative;
    width: auto;
    height: calc(76vh + 50px);
    overflow: hidden;
    z-index: 99;
    top: 50px;
  }

  .video-wrap {
    position: absolute;
    top: 0;
    width: 100vw;
    height: auto;
    text-align: center;
  }

  .video-wrap:before {
    display: block;
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 3;
    background-image: url(../img/aboutai_video_overlay.png);
    background-size: cover;
    opacity: 1;
  }

  .video-wrap:after {
    display: block;
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    background-image: url(../img/videoback_sp.gif);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }

  .video-wrap video {
    width: auto;
    height: 76vh;
    transform: translateX(-25%);
    opacity: 0;
  }

  .video-top .lead-area {
    position: absolute;
    z-index: 5;
    width: 100%;
    max-width: 1000px;
    top: calc(50% - 50px);
    left: 0;
    right: 0;
    margin: auto;
    transform: translateY(-50%);
  }

  .video-top .lead-area .page-ttl,
  .video-top .lead-area .ttl-h2 {
    margin-bottom: 10px;
  }

  .video-top .lead-area p {
    padding: 0 1em;
    line-height: 1.5;
  }

  /* svg再生ボタン */
  .s-introMovie {
    transform: scale(0.8);
  }

  .s-introMovie:hover svg {
    transform: scale(1.1);
  }

  .intro_play_btn_box {
    position: absolute;
    bottom: 100px;
    left: 0;
    right: 0;
    z-index: 5;
    width: 90px;
    height: 90px;
    margin: 0 auto;
  }

  .intro_play_btn_box a {
    display: inline-block;
    width: 80px;
    height: 80px;
    text-align: center;
  }

  .aboutai-content,
  .hakaruai-something {
    padding: 30px 0;
  }

  /*　videoエリア下のパンくずようスタイル*/
  .video-top+.breadcrumbs {
    width: 100%;
    padding: 15px 0 5px;
  }

  .video-top+.breadcrumbs li {
    display: inline-block;
    font-size: 14px;
    color: #4e4644;
  }

  .video-top+.breadcrumbs li a {
    color: #999;
    display: inline-block;
    position: relative;
  }

  .video-top+.breadcrumbs li a:after {
    display: inline-block;
    content: '/';
    padding: 0 0.5rem;
    text-decoration: none;
  }

  /*hakaru.aiでできること*/
  .hakaruai-something .flex li {
    width: calc(100% -(14px + 2em));
    background: #fff;
    box-shadow: 0 0 7px 1px rgba(17, 26, 43, 0.15);
    padding: 10px 20px 15px;
    margin-bottom: 20px;
  }

  .hakaruai-something .flex li figure {
    text-align: center;
  }

  .hakaruai-something .flex li figure img {
    width: 40%;
  }

  .hakaruai-something .flex li p {}

  /*hakasu.aiコンパネ画面画像エリア*/
  .about_conpane {
    padding: 30px 0;
  }

  .about_conpane h3+p {
    margin-bottom: 30px;
  }

  .about_conpane .pc_img {
    display: none;
  }

  /*hakaru.aiの「AI（人工知能）」について*/
  .abouthakaru_dl {
    margin-bottom: 20px;
    padding-top: 20px;
    border-top: 1px solid #b7c5ca;
  }

  .abouthakaru_dl:first-of-type {
    margin-top: 30px;
  }

  .abouthakaru_dl .abouthakaru-img {
    text-align: center;
    margin-bottom: 15px;
  }

  .abouthakaru_dl .abouthakaru-img img {
    box-shadow: 0 2px 7px 1px rgba(17, 26, 43, 0.2);
  }

  .abouthakaru_dl dt {
    font-size: 1.2rem;
    margin-bottom: 10px;
  }

  .abouthakaru_dl .text-green {
    font-size: 1.125rem;
    margin-bottom: 20px;
    font-weight: bold;
  }

  .aboutaiimg {
    margin: 30px auto 35px;
  }

  /*AIってなに？*/
  .abouthakaruai-content {
    padding: 160px 0 15px;
    margin-bottom: 40px;
  }

  .abouthakaruai-content {
    background: #eaf0f4;
    width: 100%;
    position: relative;
  }

  .whatsai-box {
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 140px;
    height: 140px;
    background: #387d94;
    padding-top: 40px;
  }

  .whatsai-box figure {
    text-align: center;
  }

  .whatsai-box figure img {
    width: 75%;
  }

  .whatsai-box h3 {
    color: #fff;
    font-size: 1rem;
    text-align: center;
    font-weight: 400;

  }

  .abouthakaruai-content h4.text-green {
    font-weight: 400;
    text-align: center;
    font-size: 1.2rem;

  }

  .aboutai_box {
    margin: 30px auto;
  }

  .aboutaiimg {
    background: #fff;
    padding: 20px 10px;
  }

  .aboutaiimg figcaption {
    font-size: .8rem;
    margin-bottom: 20px;
    color: #387d94;
  }

  .aboutaiimg figure {
    /*width: 95%;*/
    margin: 0 auto;
  }

  .hakaruai_box {
    /*box-sizing: border-box;
		padding-left:48px;*/
  }

  .learning_dl {
    margin-bottom: 15px;
  }

  .learning_dl dt {
    font-size: 1.2rem;
    font-weight: 500;
    text-indent: 1.28rem;
    position: relative;
  }

  .learning_dl dt:before {
    display: inline-block;
    content: '●';
    font-size: .5rem;
    color: #387d94;
    font-weight: 400;
    position: absolute;
    top: .6rem;
    left: -1rem;
  }

  .learning_dl dd {}

  .hakaru-ai-tech {
    border-top: 1px solid #b7c5ca;
    padding: 10px 5px 30px;
  }

  .hakaru-ai-tech .ttl-logo {
    text-align: center;
  }

  .hakaru-ai-tech .ttl-logo img {
    height: 90px;
  }

}

/*************************************
    モーダルyoutubeスタイル
**************************************/

/* body.is-youtubemodalOpen .modal_Overlay{
	height: 100%;
	opacity:1;
	z-index:1000;
	display: block;
} */
.modal_Overlay,
.scrollModal_Overlay {
  background: rgba(0, 0, 0, 0.7);
}

.modal_Overlay,
.scrollModal_Overlay {
  width: 100%;
  height: 100%;
  display: table;
  position: fixed;
  left: 0;
  top: 0;
  overflow: hidden;
  transition: opacity .2s;
  display: none;
  opacity: 1;
  z-index: 1000;
}

.modal_overlay_close {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
}

.modal_content_close {
  position: absolute;
  cursor: pointer;
  display: block;
  z-index: 1005;
}

.modal_content_close {
  width: 50px;
  height: 50px;
  top: 80px;
  right: 30px;
}

.modal_content_close:before,
.modal_content_close:after {
  height: 2px;
  width: 50px;
  content: '';
  background: #fff;
  position: absolute;
  top: 25px;
  transition: transform .3s;
}

.modal_content_close:before {
  transform: rotate(45deg);
}

.modal_content_close:after {
  transform: rotate(-45deg);
}

.modal_content,
.scrollModal_content {
  display: none;
  position: absolute;
  z-index: 1003;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  margin: auto;
}

.modal {
  display: none;
}

.youtube,
#player2 {
  vertical-align: top;
  width: 640px;
  height: 360px;
}

/* .modal_content.close{
  filter: opacity(0);
  visibility: hidden;
}
.modal_content.open{
  filter: opacity(1);
  visibility: visible;
} */
/* .intro_header_video{
	width:100%;
	position: relative;
} */
.modal_content_close.s-modal_close:hover {
  opacity: .7;
}

@media screen and (max-width: 39.9375em) {
  .modal_content_close {
    width: 30px;
    height: 30px;
    top: 60px;
    right: 1rem;
  }

  .modal_content_close:before,
  .modal_content_close:after {
    height: 2px;
    width: 30px;
    content: '';
    background: #fff;
    position: absolute;
    top: 15px;
    transition: transform .3s;
  }

  .youtube,
  #player2 {
    max-width: 300px;
    min-width: 300px;
  }

}

/* 対応メーター */
.meter-box-area{
  display: flex;
  justify-content: center;
  flex-direction: column;
  row-gap: 40px;
  align-items: center;
  margin-top: 40px;
  h3{
    font-size: 1.5rem;
  }
}
.meter-box {
  background: #fff;
  box-shadow: none;
  padding: 0;
}

.meter-box+p {
  margin-top: 20px;
}

.meter-box div {
  display: flex;
  justify-content: space-between;
}

.meter-dl {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
  width: calc((100% / 5));
  margin-bottom: 10px;
}

.meter-dl dt {
  order: 2;
  text-align: center;
  line-height: 1.2;
  font-size: .75rem;
  letter-spacing: -1.2px;
}

.meter-dl dt span {
  font-size: .7rem;
}

.meter-dl dd {
  display: flex;
  justify-content: center;
  align-items: center;
}

.meter-dl dd img {
  height: auto;
}

@media screen and (min-width: 40em) {
  .meter-dl dd {
    min-height: 85px;
  }

  .meter-dl dd img {
    width: 60%;
  }

  .meter-dl.lowmeter dd img {
    margin-top: 30px;
  }
}

@media screen and (max-width: 39.9375em) {
  .meter-box div {
    margin-top: 20px;
    flex-wrap: wrap;
  }

  .meter-dl {
    width: calc(50% - 20px);
    margin-bottom: 15px;
  }

  .meter-dl dt {
    font-size: 0.8rem;
  }

  .meter-dl dd {
    min-height: 100px;
  }

  .meter-dl.lowmeter dd img {
    height: auto;
  }

  .meter-dl.lowmeter dd img {
    margin-top: 30px;
  }
}

.about_conpane_inner{
  display: flex;
  flex-direction: column;
  row-gap: 40px;
}

/* store-cv */
.store-cv {
  background: #fff;
  border-radius: 4px;
  padding: 24px;
  display: flex;
  align-items: center;
  gap: 16px 32px;
  @media screen and (max-width: 700px) {
    flex-wrap: wrap;
    justify-content: center;
  }
  .cv-text{
    max-width: 499px;
      @media screen and (max-width: 700px) {
        text-align: center;
      }
    small {
      font-size: 12px;
      color: #999;
      margin-top: 4px;
    }
  }
  .store-button{
    display:flex;
    flex-direction: column;
    gap: 8px;
    .app-store{
      width: 162px;
    }
    .google-play{
      width: 200px;
    }
  }
}

.interview{
  display: flex;
  flex-direction: column;
  row-gap: 40px;
  position: relative;
  .interview-header{
    display: flex;
    flex-direction: column;
    row-gap: 20px;
  }
}