@charset "utf-8";
/* CSS Document */

.tile-top {
	position: relative;
	max-width: 1280px;
	margin : 20px auto 0;
}
.tile-top img.top_title {
  position: absolute;
  left: 10.2%;
  top: 50%;
  transform: translateY(-50%);
  max-width: 380px;
}

.top-txt{
	max-width: 900px;
  margin : 45px auto;
	font-size: 20px;
  font-weight: bold;
  line-height: 1.8;
  text-align: center;
}

.movie {
  position: relative;
  width: 100%;
  max-width: 875px;
  margin: 80px auto 0;
}
.movie video {
  width: 100%;
  vertical-align: top;
  cursor: pointer;
}
.movie .play_btn {
  width: 20%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
}
.movie .play_btn.playActive {
  width: 0.1px;
}
@media screen and (max-width: 768px) {
  .movie {
    margin: 45px auto 0;
    padding: 0 5%;
  }
}

/* fade-out */
.js-fade {
  opacity: 0;
  visibility: hidden;
  transform: translateY(100px);
  transition: opacity 1s,visibility 1s, transform 1s;
}
.scroll {
  opacity: 1;
  visibility: visible;
  transform: translateY(0px);
}

.main-wrap .detail-col{
	margin : 110px auto 120px;
  text-align: center;
}
.detail-col h3 {
  display: inline-block;
  margin-bottom: 48px;
  padding: 8px 35px;
  font-size: 23px;
  font-weight: bold;
  color: #fff;
  background-color: #4D4D4D;
  border-radius: 999px;
}
.detail-col h4 {
  padding: 0 1%;
  font-size: 48px;
  font-weight: bold;
}
.detail-col h5 {
  display: inline-block;
  margin-bottom: 24px;
  padding: 4px 30px;
  font-size: 18px;
  font-weight: bold;
  color: #fff;
  background-color: #2DBDC4;
  border-radius: 999px;
}
.detail-col .detail__title.line-blue {
  display: inline;
  background: linear-gradient(transparent 65%, #9CE9ED 65%);
}
.detail-col .flex {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2.5%;
}
.detail-col .flex > * {
  flex: 1;
}
.detail-col .detail__item-box {
  padding: 54px 1% 0;
}
.detail-col .detail__item-text {
  font-size: 18px;
  font-weight: bold;
  line-height: 1.667;
  text-align: left;
}
.detail-col .detail__item-text--blue {
  max-width: 395px;
  margin: 0 auto;
  margin-bottom: 30px;
  font-size: 22px;
  font-weight: bold;
  color: #2DBDC4;
  line-height: 1.667;
}
.detail-01 .detail__item img {
  max-width: 500px;
  width: 100%;
}
.detail-03 .detail__item-text,
.detail-04 .detail__item-text {
  display: inline-block;
  padding-top: 45px;
}
.detail-05 .detail__item .detail__item-text {
  padding-bottom: 25px;
  font-size: 26px;
  text-align: center;
}
.detail-05 .detail__item img {
  max-width: 620px;
  width: 100%;
}
.detail__item-box + .detail__item-box {
  padding-top: 100px;
}
.detail-col .img_ui {
  max-width: 400px;
  width: 39vw;
}
.detail-col .img_tool {
  max-width: 550px;
  width: 100%;
}
@media screen and (min-width: 769px) {
  .br_span-pc {
    display: inline-block;
  }
}

.pcdisp{
	display: block;
}
.spdisp{
	display: none;
}


@media screen and (max-width: 768px) {
	.title-area{
		padding: 30px 0 30px;
	}
	.title-area-inr{
		padding: 0 3%;
	}
	.title-area-inr2{
		margin: 0 auto;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.title-area-inr h2{
		font-size: 120%;
	}
	.title-area-inr .ic{
		width: 12%;
    max-width: 48px;
    min-width: 40px;
		margin-right: 10px;
	}
	.title-area-inr p{
		text-align: center;
		font-weight: bold;
		margin-top: 10px;
	}
  
  .top-txt{
		text-align: center;
		font-size: 16px;
    font-size: clamp(16px, calc(13.142857142857142px + 0.8928571428571428vw), 20px);
		margin : 0px auto;
		padding: 0 3%;
	}
  
  .link_youTube {
    margin: 45px auto 0;
    padding: 0 5%;
  }
  
	.main-wrap .detail-col {
		padding: 0 3%;
		margin: max(70px, 15%) auto;
	}
  .detail-col h3 {
    margin-bottom: max(25px, 6%);
    padding: 0.3em 1.5em;
    font-size: clamp(16px, calc(11px + 1.5625vw), 23px);
  }
  .detail-col h4 {
    font-size: clamp(24px, calc(10.641221374045802px + 3.5623409669211195vw), 38px);
  }
  .detail-col .flex {
    display: flex;
    flex-direction: column;
  }
  .detail-col .detail__item-box {
    padding: 0;
    margin-top: max(40px, 9%);
  }
  .detail-col .detail__item {
    margin-bottom: 9%;
  }
  .detail-col .detail__item-text {
    padding-top: 20px;
    text-align: center;
  }
  .detail-col .detail__item-text--blue {
    max-width: 360px;
    margin: 0 auto;
    margin-bottom: 20px;
    font-size: clamp(18px, calc(16.091603053435115px + 0.5089058524173028vw), 20px);
  }
  .detail-02 figure + figure {
    margin-top: max(40px, 9%);
  }
  .detail-05 .detail__item {
    margin-top: max(40px, 9%);
    margin-bottom: 0;
  }
  .detail-05 .detail__item .detail__item-text {
    padding-top: 0;
    font-size: clamp(20px, calc(14.289340101522843px + 1.5228426395939088vw), 26px);
  }
  .detail-col .img_ui {
    max-width: 400px;
    width: 68%;
  }
	.spdisp{
		display: block;
	}
	.pcdisp{
		display: none;
	}
}