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

.tile-top {
	position: relative;
	max-width: 1280px;
	margin : 20px auto 0;
}
.tile-btn {
	position: absolute;
	right: 12%;
	bottom: 17%;
	overflow: hidden;
	width: calc(100% * (306 / 1280)); /*(306px / 1280px)*/
	height: calc(100% * (118 / 393)); /*(118px / 393px)*/
	display: block;
}
.tile-btn img {
	position: absolute;
	left: 0;
	width: 100%;
	height: 100%;
}
.tile-btn img:nth-of-type(2) {
	opacity: 0;
}
.tile-btn img:nth-of-type(1) {
	opacity: 1;
}
.tile-btn:hover img:nth-of-type(2) {
	opacity: 1;
}
.tile-btn:hover img:nth-of-type(1) {
	opacity: 0;
}

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

/* 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 .detail__title.line-blue {
  display: inline;
  background: linear-gradient(transparent 65%, #C2F2FF 65%);
}
.detail-col .detail__lead {
  margin: 35px auto 54px;
  font-size: 28px;
  font-weight: bold;
}
.detail-col .detail__img-box.flex {
  display: flex;
  justify-content: center;
  align-items: center;
}
.detail-col .detail__img-item .detail__img-text,
.detail-col .detail__item .detail__img-text {
  margin-top: 22px;
  font-size: 18px;
  font-weight: bold;
  line-height: 1.667;
}
.detail-col .detail__img-item .detail__img-note {
  font-size: 12px;
  text-align: left;
}
@media screen and (min-width: 769px) {
  .detail-col .detail__img-box.flex > div.detail__item {
    width: 50%;
  }
  .detail-col .detail__img-box.flex > div.detail__item:nth-of-type(2) {
    width: 45%;
    margin-left: 5%;
  }
  /* .detail-col .detail__img-box.flex > img {
    width: 50%;
  }
  .detail-col .detail__img-box.flex > img:nth-of-type(2) {
    width: 45%;
    margin-left: 5%;
  } */
  .detail-col .detail__img-item {
/*    max-width: 400px;
    width: 50%; */
    width:100%;
  }
  .detail-col .detail__img-item img {
    max-width: 800px;
    width: 100%;
  }
  .detail-col .detail__img-item:nth-of-type(2) {
    margin-left: 2.5%;
  }
  .detail-col .detail__img-item .detail__img-text,
  .detail-col .detail__item .detail__img-text {
    font-size: 16px;
    font-size: clamp(16px, calc(14.091603053435115px + 0.5089058524173028vw), 18px);
  }
  .detail-col .detail__img-item .detail__img-note {
    max-width: 365px;
    margin: 0 auto;
  }
  .detail-col .detail__img-item .detail__img-note.row {
    height: calc(1.6em* 2);
    line-height: 1.6;
  }
  .detail-col .detail__img-item .detail__img-note.row + .detail__img-text {
    margin-top: 5px;
  }
}

.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%;
	}
  
	.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: 16px;
    font-size: clamp(16px, calc(11px + 1.5625vw), 23px);
  }
  .detail-col h4 {
    font-size: 24px;
    font-size: clamp(24px, calc(10.641221374045802px + 3.5623409669211195vw), 38px);
  }
  .detail-col .detail__lead {
    margin: 25px auto 40px;
    font-size: 18px;
    font-size: clamp(18px, calc(16.091603053435115px + 0.5089058524173028vw), 20px);
  }
  .detail-col .detail__img-box.flex {
    display: flex;
    flex-direction: column;
  }
  .detail-col .detail__img-box.flex > div.detail__item {
    max-width: 640px;
    width: 100%;
    margin: 0 auto;
  }
  .detail-col .detail__img-box.flex > div.detail__item:nth-of-type(2) {
    margin-top: 8%;
  }
  /* .detail-col .detail__img-box.flex > img {
    max-width: 640px;
    width: 100%;
    margin: 0 auto;
  }
  .detail-col .detail__img-box.flex > img:nth-of-type(2) {
    margin-top: 8%;
  } */
  .detail-col .detail__img-item img,
  .detail__img-note {
    max-width: 450px;
    width: 100%;
    margin: 0 auto;
  }
  .detail-col .detail__img-item:nth-of-type(2) {
    margin-top: max(40px, 9%);
  }
  
	.spdisp{
		display: block;
	}
	.pcdisp{
		display: none;
	}
}