@charset "UTF-8";

/**,body,ul {
  margin: 0;
  padding: 0;
}*/

/* スライド枚数変更するとき
CSS 3ヶ所 　
 .slide-wrapper .slideのwidth
 .slide-wrapper .slide divのwidth
 .slide1～スライド数 のtransform
HTML 2ヶ所 スマホも同時に
　スライド（コンテンツ）
　インジケーター
JS 変更なし
 */

:root {
  --slides: 6; /* ここを変えるだけで全体が調整される htmlは編集要*/
}

.slide-wrapper li {
  list-style: none;
}
/* ↓ スライドの外枠 */
.slide-wrapper {
  width: 100%;
  /*width: 640px;*/
  height: 250px;
  /*height: auto;*/
  position: relative;
  overflow: hidden; /* はみ出したスライドを隠す */
  margin-bottom:30px;
}
/* スマホ用*/
.slide-sp {
  max-width:720px;
  height: 300px;
}
/*  ↓ スライド（コンテンツ） */
.slide-wrapper .slide { /*スライド全体 2枚200% 3枚300% 4 枚400% 5 枚500% 6 枚600%*/
  /*width: 1100%;*/
  width: calc(100% * var(--slides));
  height: 100%;
  display: flex;
  transition: all 0.3s;
}
.slide-wrapper .slide div { /* スライド  2枚50%  3枚33.33% 4 枚25% 5 枚20% 6枚16.66% 7枚14.28% 8枚12.5 9枚11.11 10枚10 */
  /*width: 9.09%;*/
  width: calc(100% / var(--slides));
  height: 100%;
  font-size: 16px;
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
}
/* 3枚なら0,-33.33%,-66.66% ,4枚なら0,-25%,-50%,-75%  */
/*動的に複数枚対応バージョン*/
.slide1  { transform: translateX(calc(-100% / var(--slides) * 0)); }
.slide2  { transform: translateX(calc(-100% / var(--slides) * 1)); }
.slide3  { transform: translateX(calc(-100% / var(--slides) * 2)); }
.slide4  { transform: translateX(calc(-100% / var(--slides) * 3)); }
.slide5  { transform: translateX(calc(-100% / var(--slides) * 4)); }
.slide6  { transform: translateX(calc(-100% / var(--slides) * 5)); }
.slide7  { transform: translateX(calc(-100% / var(--slides) * 6)); }
.slide8  { transform: translateX(calc(-100% / var(--slides) * 7)); }
.slide9  { transform: translateX(calc(-100% / var(--slides) * 8)); }
.slide10 { transform: translateX(calc(-100% / var(--slides) * 9)); }
.slide11 { transform: translateX(calc(-100% / var(--slides) * 10)); }

/* 11枚のケース */
/* .slide1 {
  transform: translateX(0%);
}
.slide2 {
  transform: translateX(-9.09%);
}
.slide3 {
  transform: translateX(-18.18%);
}
.slide4 {
  transform: translateX(-27.27%);
}
.slide5 {
  transform: translateX(-36.36%);
}
.slide6 {
  transform: translateX(-45.45%);
}
.slide7 {
  transform: translateX(-54.54%);
}
.slide8 {
  transform: translateX(-63.63%);
}
.slide9 {
  transform: translateX(-72.72%);
}
.slide10 {
  transform: translateX(-81.81%);
}
.slide11 {
  transform: translateX(-90.90%);
}
 */
/* 10枚のケース */
/* .slide1 {
  transform: translateX(0%);
}
.slide2 {
  transform: translateX(-10%);
}
.slide3 {
  transform: translateX(-20%);
}
.slide4 {
  transform: translateX(-30%);
}
.slide5 {
  transform: translateX(-40%);
}
.slide6 {
  transform: translateX(-50%);
}
.slide7 {
  transform: translateX(-60%);
}
.slide8 {
  transform: translateX(-70%);
}
.slide9 {
  transform: translateX(-80%);
}
.slide10 {
  transform: translateX(-90%);
}
 *//* 9枚のケース */
/* .slide1 {
  transform: translateX(0%);
}
.slide2 {
  transform: translateX(-11.11%);
}
.slide3 {
  transform: translateX(-22.22%);
}
.slide4 {
  transform: translateX(-33.33%);
}
.slide5 {
  transform: translateX(-44.44%);
}
.slide6 {
  transform: translateX(-55.55%);
}
.slide7 {
  transform: translateX(-66.66%);
}
.slide8 {
  transform: translateX(-77.77%);
}
.slide9 {
  transform: translateX(-88.88%);
} */
/* 8枚のケース*/
/* .slide1 {
  transform: translateX(0);
}
.slide2 {
  transform: translateX(-12.5%);
}
.slide3 {
  transform: translateX(-25%);
}
.slide4 {
  transform: translateX(-37.5%);
}
.slide5 {
  transform: translateX(-50%);
}
.slide6 {
  transform: translateX(-62.5%);
}
.slide7 {
  transform: translateX(-75%);
}
.slide8 {
  transform: translateX(-87.5%);
} */

/* 7枚のケース*/
/* .slide1 { 
  transform: translateX(0);
}
.slide2 { 
  transform: translateX(-14.28%);
}
.slide3 { 
  transform: translateX(-28.56%);
}
.slide4 { 
  transform: translateX(-42.84%);
}
.slide5 { 
  transform: translateX(-57.12%);
}
.slide6 { 
  transform: translateX(-71.40%);
} 
.slide7 { 
  transform: translateX(-85.68%);
} */

/* 6枚のケース*/
/* .slide1 { 
  transform: translateX(0);
}
.slide2 { 
  transform: translateX(-16.66%);
}
.slide3 { 
  transform: translateX(-33.32%);
}
.slide4 { 
  transform: translateX(-50%);
}
.slide5 { 
  transform: translateX(-66.64%);
}
.slide6 { 
  transform: translateX(-83.3%);
} */


/* 5枚のケース*/
/* .slide1 { 
  transform: translateX(0);
}
.slide2 { 
  transform: translateX(-20%);
}
.slide3 { 
  transform: translateX(-40%);
}
.slide4 { 
  transform: translateX(-60%);
}
.slide5 { 
  transform: translateX(-80%);
}*/ 

/* 3枚なら0,-33.33%,-66.66%   
.slide1 { 
  transform: translateX(0);
}
.slide2 { 
  transform: translateX(-33.33%);
}
.slide3 { 
  transform: translateX(-66.66%);
}*/

/* 2枚なら0,-50%   
.slide1 { 
  transform: translateX(0);
}
.slide2 { 
  transform: translateX(-50%);
}*/

/* 4枚のケース ,4枚なら0,-25%,-50%,-75%*/ 
/* .slide1 { 
  transform: translateX(0);
}
.slide2 { 
  transform: translateX(-25%);
}
.slide3 { 
  transform: translateX(-50%);
}
.slide4 {
  transform: translateX(-75%);
} */




/* 背景色 スライド4枚なら追加*/
/* .slide div:nth-of-type(1){ 
  background-color: #E1F3FC;
}
.slide div:nth-of-type(2){ 
  background-color: #FCE8F0;
}
.slide div:nth-of-type(3){ 
  background-color: #E3F1E4;
}
.slide div:nth-of-type(4){  
  background-color: #E3F1E4;
}
 */
 /* ↓ 左右のボタン */
.slide-wrapper .next {
  position: absolute;
  width: 15px;
  height: 15px;
  right: 10px;
  bottom: 50%;
  z-index: 10;
  cursor: pointer;
  border-top: solid 3px #000;
  border-right: solid 3px #000;
  -webkit-transform: rotate(45deg) translateY(50%);
  transform: rotate(45deg) translateY(50%);
}
.slide-wrapper .prev {
  position: absolute;
  width: 15px;
  height: 15px;
  left: 25px;
  bottom: 50%;
  z-index: 10;
  cursor: pointer;
  border-top: solid 3px #000;
  border-right: solid 3px #000;
  -webkit-transform: rotate(-135deg) translateY(-50%);
  transform: rotate(-135deg) translateY(-50%);
}
/* ↓ インジケーター */
.slide-wrapper .indicator {
  width: 100%;
  position: absolute;
  bottom: 20px;
  display: flex;
  column-gap: 18px;
  z-index: 10;
  justify-content: center;
  align-items: center;
}
.slide-wrapper .indicator li {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  list-style: none;
  background-color: #fff;
  border: 2px #000 solid;
  cursor: pointer;
}
.slide-wrapper .indicator li:first-of-type {
  background-color: #000;
}
/* 追加 */
.slide-wrapper .slide img {
    width:100%;
    /*max-width: 720px;*/
    border:1px solid #ccc;
}
.slide-wrapper .slide p {
    width:100%;
    font-size:1rem;
}
.slide-wrapper .slide a:hover {
	opacity:0.8;
}