@charset "UTF-8";
/* 基本 */

body {
    margin: 0 auto;
	padding: 0px!important;
}

.container {
    width: auto!important;
	background-color: #fff;
	margin-bottom: -60px;
}
.container.container--contents-full>.row>.section:first-child {
    margin-top: 0px!important;
}

@media (max-width: 760px) { 
	.container {	
	padding: 0!important;
	margin-bottom: -30px;
	}
}

.wrap {
    font-family: "Overpass", "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", "繝偵Λ繧ｮ繝手ｧ偵ざ ProN W3", Meiryo, sans-serif;
    background-color: #fff;
    color: #fff;
    margin: auto;
}

img,video{
	width: 100%;
	vertical-align: middle;
}
h1{
    margin: 0;
}

/* SP/PC切り替え */
.sp{
    display: none;
    margin: 0 auto;
}
.pc{
    display: inline-block;
    width: 100%;
}
@media screen and (max-width:760px){
    .sp{
        display: inline-block;
    }
    .pc{
        display: none;
    }

    body {
        box-shadow: none;
        width: 100%;
    }
}

/* CTA */
.cta_box{
    position: relative;
}
.cta{
    position: absolute;
    width: 30%;
    bottom: 19%;
    right: 26%;
}
@media screen and (max-width:760px){
    .cta{
        width: 90%;
        bottom: 13%;
        right: 5%;
    }
}

/* 動画差し込み */
.con1_box{
    position: relative;
}
.movie01{
    position: absolute;
    width: 20.2%;
    top: 27.2%;
    right: 24%;
}
.movie02{
    position: absolute;
    width: 20.2%;
    top: 50.8%;
    left: 24%;
}
.movie03{
    position: absolute;
    width: 20.2%;
    top: 73.8%;
    right: 24%;
}
@media screen and (max-width:760px){
    .movie01{
        position: absolute;
        width: 83.6%;
        top: 12.6%;
        left: 8%;
    }
    .movie02{
        position: absolute;
        width: 83.5%;
        top: 44.1%;
        left: 8.2%;
    }
    .movie03{
        position: absolute;
        width: 83.5%;
        top: 72.2%;
        left: 8.2%;
    }
}

.ma20{
    margin-top: 20px;
}

h2{
    margin: 0;
}
.content2_box{
    position: relative;
}

/* スライダー */
.slider-area {
  width: 88%;
  max-width: 1200px;
  margin: 0 auto 2%;
  overflow: hidden;
  position: relative;
}

.slider {
  display: flex;
  transition: transform 0.7s ease;
  gap: 20px;
  padding: 0 10%; /* ← 中央寄せ用 */
}

.slider > div {
  flex: 0 0 calc((100% - 40px) / 3);
  transform: scale(0.8);
  opacity: 0.6;
  transition: transform 0.7s ease, opacity 0.7s ease;
}

.slider > div.active {
  transform: scale(1);
  opacity: 1;
}

.dots {
  text-align: center;
  margin-top: 10px;
}


.dots button {
  font-size: 6px;
  background: none;
  border: none;
  color: #eb8137;
  opacity: 0.4;
  cursor: pointer;
  margin: 0 10px;
}

.dots button.active {
  opacity: 1;
  color: #ea7927;
}

@media only screen and (max-width: 767px) {
    .slider {
      gap: 0;
      padding: 0;
    }
    .slider-area {
        position: absolute !important;
        top: 60%;
        left: 22px;
    }
    .dots button {
        font-size: 6px;
        background: none;
        border: none;
        color: #eb8137;
        opacity: 0.4;
        cursor: pointer;
        margin: 0 4px;
    }
  
    .slider > div {
      flex: 0 0 50%; /* 2枚表示なら幅を50%に固定 */
      transform: none !important;
      opacity: 1 !important;
    }
  
    .slider > div.active {
      transform: none;
      opacity: 1;
    }
  }