@charset "utf-8";

/* --- 全体 ----- */

#wrap{
 width: 100%;
 clear: both;
 margin: 0 auto;
}

body{
  margin: 0;
  padding: 0;
  font-family:'Roboto','Noto Serif JP', serif, cursive;
  background: url(../images-home/bg3.png)0/cover fixed;
  font-size: 16px;
  text-align: center;
}

p,h1,h2,h3,h4,h5,h6{
  margin-top: 0;
}

img{
    vertical-align:bottom;
}

ul{
  margin: 0;
  padding: 0;
}
/* --- 全体終わり ----- */

/* --- 全体スライド ----- */
.parallax {
    position: relative;
    background:transparent;
    height: 100%; 
    background-attachment:fixed;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
}

.parallax h2 {
    color:#fff;
    font-size: 100px;
    text-align: center;
    position: fixed;
    width :100%;
    top: 20%;
    opacity: 0.5;
    font-family:'Roboto','Noto Serif JP', serif, cursive;
    z-index: -1;
}


.contents {
    position: relative;
    z-index: 1;
    height:650px;
    font-size:60px;
    padding: 20px 20px;
    text-align :center;
    border:0px solid #f08080;
    border-radius: 0px;
    width:auto;
    }

@media (max-width: 768px){
.contents {
    position: relative;
    z-index: 1;
    height:450px;
    font-size:60px;
    padding: 20px 20px;
    text-align :center;
    border:0px solid #f08080;
    border-radius: 0px;
    width:auto;
    margin-bottom: 50px;
    }
    
.parallax h2 {
    color:#fff;
    font-size: 80px;
    text-align: center;
    position: fixed;
    width :100%;
    top: 20%;
    opacity: 0.5;
    font-family:'Roboto','Noto Serif JP', serif, cursive;
    z-index: -1;
}
    
}

.contents-baibai {
    position: relative;
    z-index: 1;
    height:1900px;
    font-size:60px;
    padding: 20px 20px;
    text-align :center;
    border:0px solid #f08080;
    border-radius: 0px;
    width:auto;
    }

@media (max-width: 768px){
.contents-baibai {
    position: relative;
    z-index: 1;
    height:4100px;
    font-size:60px;
    padding: 20px 20px;
    text-align :center;
    border:0px solid #f08080;
    border-radius: 0px;
    width:auto;
    }
}

.contents-baibai2 {
    position: relative;
    z-index: 1;
    height:2000px;
    font-size:60px;
    padding: 20px 20px;
    text-align :center;
    border:0px solid #f08080;
    border-radius: 0px;
    width:auto;
    }

@media (max-width: 768px){
.contents-baibai2 {
    position: relative;
    z-index: 1;
    height:1850px;
    font-size:60px;
    padding: 20px 20px;
    text-align :center;
    border:0px solid #f08080;
    border-radius: 0px;
    width:auto;
    }
}


.contents-about {
    position: relative;
    z-index: 1;
    height:600px;
    font-size:60px;
    padding: 20px 20px;
    text-align :center;
    border:0px solid #f08080;
    border-radius: 0px;
    width:auto;
    }

@media (max-width: 768px){
.contents-about {
    position: relative;
    z-index: 1;
    height:900px;
    font-size:60px;
    padding: 20px 20px;
    text-align :center;
    border:0px solid #f08080;
    border-radius: 0px;
    width:auto;
    }
}

@media (max-width: 768px){
   .contents {
    position: relative;
    z-index: 1;
    height:400px;
    font-size:32px;
    padding: 5px 5px;
    text-align :center;
    border:0px solid #f08080;
    border-radius: 0px;
    width:auto;
    } 
}

.contents2 {
    position: relative;
    z-index: 1;
    height:750px;
    font-size:60px;
    padding: 20px 20px;
    text-align :center;
    border-bottom:0px solid #fff;
    border-radius: 0px;
    display: none;
    }

@media (max-width: 768px){
.contents2 {
    position: relative;
    z-index: 1;
    height:600px;
    font-size:60px;
    padding: 5px 5px;
    text-align :center;
    border-bottom:0px solid #f08080;
    border-radius: 0px;
    display: none;
    }
}

.contents3 {
    position: relative;
    z-index: 1;
    height:1000px;
    font-size:60px;
    padding: 20px 20px;
    text-align :center;
    border:0px solid #f08080;
    border-radius: 0px;
    }

@media (max-width: 768px){
.contents3 {
    position: relative;
    z-index: 1;
    height:700px;
    font-size:60px;
    padding: 5px 5px;
    text-align :center;
    border:0px solid #f08080;
    border-radius: 0px;
    width: auto;
    }
}

.contents4 {
    position: relative;
    z-index: 1;
    height:750px;
    font-size:60px;
    padding: 20px 20px;
    text-align :center;
    border:0px solid #f08080;
    border-radius: 0px;
    }

@media (max-width: 768px){
.contents4 {
    position: relative;
    z-index: 1;
    height:600px;
    font-size:60px;
    padding: 5px 5px;
    text-align :center;
    border:0px solid #f08080;
    border-radius: 0px;
    }
}
.contents5 {
    position: relative;
    z-index: 1;
    height:700px;
    font-size:60px;
    padding: 20px 20px;
    text-align :center;
    border:0px solid #f08080;
    border-radius: 0px;
    }

@media (max-width: 768px){
.contents5 {
    position: relative;
    z-index: 1;
    height:500px;
    font-size:60px;
    padding: 5px 5px;
    text-align :center;
    border:0px solid #f08080;
    border-radius: 0px;
    }
}

.contents6 {
    position: relative;
    z-index: 1;
    height:1100px;
    font-size:60px;
    padding: 20px 20px;
    text-align :center;
    border:0px solid #f08080;
    border-radius: 0px;
    }

@media (max-width: 768px){
.contents6 {
    position: relative;
    z-index: 1;
    height:1400px;
    font-size:60px;
    padding: 5px 5px;
    text-align :center;
    border:0px solid #f08080;
    border-radius: 0px;
    }
}

.contents7 {
    position: relative;
    z-index: 1;
    height:1100px;
    font-size:60px;
    padding: 20px 20px;
    text-align :center;
    border:0px solid #f08080;
    border-radius: 0px;
    }

@media (max-width: 768px){
.contents7 {
    position: relative;
    z-index: 1;
    height:1100px;
    font-size:60px;
    padding: 5px 5px;
    text-align :center;
    border:0px solid #f08080;
    border-radius: 0px;
    }
}


/* --- 全体スライド終わり ----- */


/* グローバルナビ */
.gnavi {
  display: inline-block;
  -webkit-box-shadow: 0 0 70px #fff;
  -moz-box-shadow: 0 0 70px #fff;
  box-shadow: 0 0 70px #fff;
  margin-top: 0px;
  margin-bottom: 0px;
 font-family:'Roboto','Noto Serif JP', serif, cursive;
opacity: 1;
   }

@media (max-width: 768px){
.gnavi {
  display: none;
  -webkit-box-shadow: 0 0 70px #fff;
  -moz-box-shadow: 0 0 70px #fff;
  box-shadow: 0 0 70px #fff;
  margin-top: 0px;
  margin-bottom: 0px;
 font-family:'Roboto','Noto Serif JP', serif, cursive;
    opacity: 1;
       }
}

.decor {
  background: blue;
  background: -webkit-linear-gradient(left, #f08080 50%, white 50%);
  background: -moz-linear-gradient(left, #f08080 50%, white 50%);
  background: -o-linear-gradient(left, #f08080 50%, white 50%);
  background: linear-gradient(left, #f08080 50%, white 50%);
  background-size: 50px 25%;
  padding:5px;
  display: block;
}

.gnavi a {
  text-decoration: none;
  color: #333333;
  display: block;
}

.gnavi ul {
  list-style: none;
  position: relative;
  text-align: left;
}

.gnavi li {
  float: left;
}

/* clear'n floats */
.gnavi ul:after {
  clear: both;
}

.gnavi ul:before,
.gnavi ul:after {
    content: " ";
    display: table;
}

nav {
  position: relative;
  background: #ffffff;
  background-image: -webkit-linear-gradient(bottom, #ffffff 7%, #fafafa 100%);
  background-image: -moz-linear-gradient(bottom, #ffffff 7%, #fafafa 100%);
  background-image: -o-linear-gradient(bottom, #ffffff 7%, #fafafa 100%);
  background-image: linear-gradient(bottom, #ffffff 7%, #fafafa 100%);
  text-align: center;
  letter-spacing: 1px;
  text-shadow: 0.5px 0.5px 0.5px #f08080;
  -webkit-box-shadow: 2px 2px 3px #888;
  -moz-box-shadow: 2px 2px 3px #888;
  box-shadow: 2px 2px 3px #888;
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
}

/* prime */
.gnavi ul.primary li a {
  display: block;
  padding: 20px 30px;
  border-right: 1px solid #333;
}

.gnavi ul.primary li:last-child a {
  border-right: none;
}

ul.primary li a:hover {
  color: #333333;
    opacity: 0.5;
}

/* subs */
ul.sub {
  position: absolute;
  z-index: 200;
  box-shadow: 2px 2px 0 #BEBEBE;
  width: 35%;
  display:none;
}

ul.sub li {
  float: none;
  margin: 0;
}

ul.sub li a {
  border-bottom: 1px dotted #ccc;
  border-right: none;
  color: #000;
  padding: 15px 30px;
}

.gnavi ul.sub li:last-child a {
  border-bottom: none;
}

.gnavi ul.sub li a:hover {
  color: #000;
  background: transparent;
}

/* sub display*/
.gnavi ul.primary li:hover ul {
  display: block;
  background: #ffffff;
}

/* keeps the tab background white */
.gnavi ul.primary li:hover a {
  background: #fafafa;
  color: #666;
  text-shadow: none;
}

.gnavi ul.primary li:hover > a{
  color: #000;
} 
/* グローバルナビ終わり */


/* 斜体 */

.backStr-baibai {
  position      : absolute;            
  display       : inline-block;        
  white-space   : nowrap;             
  font-size     : 30pt;                
  font-weight   : bold;                
  color         : #fff;
  top           : 5%;
  left          : 50%;
  transform     : translate(-50%, -50%)
                  rotate(350deg);
font-family:'Roboto','Noto Serif JP', serif, cursive;
z-index: 20;
}

@media (max-width: 768px){
.backStr-baibai {
  position      : absolute;            
  display       : inline-block;        
  white-space   : nowrap;             
  font-size     : 28pt;                
  font-weight   : bold;                
  color         : #fff;
  top           : 2%;
  left          : 50%;
  transform     : translate(-50%, -50%)
                  rotate(350deg);
font-family:'Roboto','Noto Serif JP', serif, cursive;
z-index: 20;
}
}
.backStr {
  position      : absolute;            
  display       : inline-block;        
  white-space   : nowrap;             
  font-size     : 40px;                
  font-weight   : bold;                
  color         : #fff;
  top           : 15%;
  left          : 50%;
  transform     : translate(-50%, -50%)
                  rotate(350deg);
  font-family:'Roboto','Noto Serif JP', serif, cursive;
  z-index: 20;
}

.backStr-ab {
  position      : absolute;            
  display       : inline-block;        
  white-space   : nowrap;             
  font-size     : 40px;                
  font-weight   : bold;                
  color         : #fff;
  top           : 25%;
  left          : 50%;
  transform     : translate(-50%, -50%)
                  rotate(350deg);
  font-family:'Roboto','Noto Serif JP', serif, cursive;
  z-index: 20;
}

.backStr2 {
  position      : absolute;            
  display       : inline-block;        
  white-space   : nowrap;             
  font-size     : 48px;                
  font-weight   : bold;                
  color         : #fff;
  top           : 15%;
  left          : 50%;
  transform     : translate(-50%, -50%)
                  rotate(350deg);
　font-family:'Roboto','Noto Serif JP', serif, cursive;
　z-index: 20;
}

.backStr3 {
  position      : absolute;            
  display       : inline-block;        
  white-space   : nowrap;             
  font-size     : 32pt;                
  font-weight   : bold;                
  color         : #fff;
  top           : 7%;
  left          : 50%;
  transform     : translate(-50%, -50%)
                  rotate(350deg);
　font-family:'Roboto','Noto Serif JP', serif, cursive;
　z-index: 20;
}

.backStr4 {
  position      : absolute;            
  display       : inline-block;        
  white-space   : nowrap;             
  font-size     : 40px;                
  font-weight   : bold;                
  color         : #fff;
  top           : 15%;
  left          : 50%;
  transform     : translate(-50%, -50%)
                  rotate(350deg);
　font-family:'Roboto','Noto Serif JP', serif, cursive;
　z-index: 20;
}

@media (max-width: 768px){
.backStr {
  position      : absolute;            
  display       : inline-block;        
  white-space   : nowrap;             
  font-size     : 24pt;                
  font-weight   : bold;                
  color         : #fff;
  top           : 6%;
  left          : 50%;
  transform     : translate(-50%, -50%)
                  rotate(350deg);
　font-family:'Roboto','Noto Serif JP', serif, cursive;
　z-index: 20;
}

.backStr-ab {
  position      : absolute;            
  display       : inline-block;        
  white-space   : nowrap;             
  font-size     : 24pt;                
  font-weight   : bold;                
  color         : #fff;
  top           : 20%;
  left          : 50%;
  transform     : translate(-50%, -50%)
                  rotate(350deg);
  font-family:'Roboto','Noto Serif JP', serif, cursive;
  z-index: 20;
}
    
.backStr2 {
  position      : absolute;            
  display       : inline-block;        
  white-space   : nowrap;             
  font-size     : 24pt;                
  font-weight   : bold;                
  color         : #fff;
  top           : 5%;
  left          : 50%;
  transform     : translate(-50%, -50%)
                  rotate(350deg);
　font-family:'Roboto','Noto Serif JP', serif, cursive;
　z-index: 20;
}

.backStr3 {
  position      : absolute;            
  display       : inline-block;        
  white-space   : nowrap;             
  font-size     : 24pt;                
  font-weight   : bold;                
  color         : #fff;
  top           : 5%;
  left          : 50%;
  transform     : translate(-50%, -50%)
                  rotate(350deg);
　font-family:'Roboto','Noto Serif JP', serif, cursive;
　z-index: 20;
}
    
.backStr4 {
  position      : absolute;            
  display       : inline-block;        
  white-space   : nowrap;             
  font-size     : 24pt;                
  font-weight   : bold;                
  color         : #fff;
  top           : 7%;
  left          : 50%;
  transform     : translate(-50%, -50%)
                  rotate(350deg);
　font-family:'Roboto','Noto Serif JP', serif, cursive;
　z-index: 20;
}
}
/* 斜体終わり */


/* --- 下線 ----- */

.marker1 {
  background : linear-gradient(transparent 50%, #ffff00 65%);
}
.marker2 {
  background : linear-gradient(transparent 50%, #ffff00 95%);
}

/* --- 下線 ----- */

/*下からフェードイン*/
.fade-in-bottom {
   opacity: 0;
   animation-name: fadein-bottom;
   animation-duration: 1.5s;
   animation-timing-function: ease-out;
   animation-fill-mode: forwards;
}

@keyframes fadein-bottom {
   0% {
      opacity: 0;
      transform: translateY(20px);
   }
   100% {
      opacity: 1;
      transform: translateY(0);
   }
}
/*下からフェードイン*/

.btn-ib {
  display: inline-block;           /* 改行なしのブロック要素 */
     position: relative;              /* 相対位置指定 */
  width: 200px;                    /* 横幅 */
  height: 50px;                    /* 高さ */
  text-align: center;              /* 水平方向は中央揃え */
  line-height: 50px;               /* 行の高さ */
  font-size: 16px;
font-family:'Roboto','Noto Serif JP', serif, cursive;
 }
.btn-ib span {
  display: block;                  /* ブロック要素 */
  position: absolute;              /* 親要素の左上を基準位置 */
  width: 100%;                     /* 横幅 */
  height: 100%;                    /* 高さ */
  border: 1px solid #fff;          /* 罫線 */
  transform-style: preserve-3d;    /* 重なりを3Dで表示 */
  transition: 0.5s;   /* 変化時間 */
    opacity: 1;
    border-radius: 10px;
}
.btn-ib span:nth-child(1) {
  background-color:transparent;   /* Buttonボタンの色 */
  color:#ffffff ;          /* Buttonの文字の色 */
  transform: rotateX(0deg);        /* 横軸の回転なし */
  transform-origin: 0 50%  -30px;  /* transformの起点 */
}
.btn-ib span:nth-child(2) {
  background-color: transparent;   /* Clickボタンの色 */
  color: #ffffff;          /* Clickの文字の色 */
  transform: rotateX(90deg);       /* 横軸で90度回転 */
  transform-origin: 0 50%  -30px;  /* transformの起点 */
}
.btn-ib:hover span:nth-child(1) {
  transform: rotateX(-90deg);      /* 横軸で前方に90度回転 */
}
.btn-ib:hover span:nth-child(2) {
  transform: rotateX(0deg);        /* 横軸の回転なし */
}
/*ボタン終わり*/

/*scrollbar*/
div::-webkit-scrollbar {
    width: 15px;
}

div::-webkit-scrollbar-track {
    background: #f08080;
    border-radius: 5px;
}
div::-webkit-scrollbar-thumb {
    background: #ffffff;
    border-radius:5px;
}

@media (max-width: 768px){
div::-webkit-scrollbar {
    width: 10px;
}

div::-webkit-scrollbar-track {
    background: #f08080;
    border-radius: 5px;
}
div::-webkit-scrollbar-thumb {
    background: #ffffff;
}
}
/*scrollbar*/

.outline {
  display        : inline-block;
  padding-top: 20px;
 padding-bottom: 0px;
  color          : #ffffff;            /* 文字の色 */
  font-size      : 24pt;               /* 文字のサイズ */
  letter-spacing : 4px;                /* 文字間 */
  text-shadow    : 
       2px  2px 1px #333333,
      -2px  2px 1px #333333,
       2px -2px 1px #333333,
      -2px -2px 1px #333333,
       2px  0px 1px #333333,
       0px  2px 1px #333333,
      -2px  0px 1px #333333,
       0px -2px 1px #333333;        /* 文字の影 */
  border-bottom : 2px solid #f08080 ;
}

.outline2 {
  display        : inline-block;
  padding-top: 20px;
 padding-bottom: 0px;
  color          : #fff;            /* 文字の色 */
  font-size      : 24pt;               /* 文字のサイズ */
  letter-spacing : 4px;                /* 文字間 */
  text-shadow    : 
       2px  2px 1px #f08080,
      -2px  2px 1px #f08080,
       2px -2px 1px #f08080,
      -2px -2px 1px #f08080,
       2px  0px 1px #f08080,
       0px  2px 1px #f08080,
      -2px  0px 1px #f08080,
       0px -2px 1px #f08080;        /* 文字の影 */
  border-bottom : 3px solid #f08080 ;
     line-height: 1.5em;
}

.outline3 {
  display        : inline-block;
  padding-top: 20px;
 padding-bottom: 0px;
  color          : #fff;            /* 文字の色 */
  font-size      : 20pt;               /* 文字のサイズ */
  letter-spacing : 4px;                /* 文字間 */
  text-shadow    : 
       2px  2px 1px #333,
      -2px  2px 1px#333,
       2px -2px 1px #333,
      -2px -2px 1px #333,
       2px  0px 1px #333,
       0px  2px 1px #333,
      -2px  0px 1px #333,
       0px -2px 1px #333;        /* 文字の影 */
  border-bottom : 3px solid #f08080 ;
  line-height: 1.5em;
}


.outline4 {
  display        : inline-block;
  padding-top: 20px;
 padding-bottom: 0px;
  color          : #ffffff;            /* 文字の色 */
  font-size      : 18pt;               /* 文字のサイズ */
  letter-spacing : 4px;                /* 文字間 */
  text-shadow    : 
       2px  2px 1px #333333,
      -2px  2px 1px #333333,
       2px -2px 1px #333333,
      -2px -2px 1px #333333,
       2px  0px 1px #333333,
       0px  2px 1px #333333,
      -2px  0px 1px #333333,
       0px -2px 1px #333333;        /* 文字の影 */
    border-bottom : 2px solid #f08080 ;
}

@media (max-width: 768px){
.outline4 {
  display        : inline-block;
  padding-top: 20px;
 padding-bottom: 0px;
  color          : #ffffff;            /* 文字の色 */
  font-size      : 16pt;               /* 文字のサイズ */
  letter-spacing : 4px;                /* 文字間 */
  text-shadow    : 
       2px  2px 1px #333333,
      -2px  2px 1px #333333,
       2px -2px 1px #333333,
      -2px -2px 1px #333333,
       2px  0px 1px #333333,
       0px  2px 1px #333333,
      -2px  0px 1px #333333,
       0px -2px 1px #333333;        /* 文字の影 */
    border-bottom : 2px solid #f08080 ;
}
}

 /* --- 文字アニメーション------------------------------- */
.str {
  display       : inline-block;        /* ブロック化              */
  font-weight   : bold;                /* 太字                    */
  font-size     : 120%;                /* 文字を大きくする        */
  border-bottom : 0px solid #0059b3;   /* 下線                    */
  color         : yellow;             /* 文字色                  */
  animation     : strAnime 3s linear infinite;  /* アニメーション */
}
 
.str2 {
  display       : inline-block;        /* ブロック化              */
  font-weight   : bold;                /* 太字                    */
  font-size     : 120%;                /* 文字を大きくする        */
  border-bottom : 0px solid #0059b3;   /* 下線                    */
  color         : #f08080;             /* 文字色                  */
  animation     : strAnime 3s linear infinite;  /* アニメーション */
}

@keyframes strAnime {
   0% {
       color     : #ffffff;            /* 点滅開始色              */
      }
  50% {
       color     : #ff0000;            /* 点滅中間色              */
      }
 100% {
       color     : #ffffff;            /* 点滅終了色              */
      }
}

@media (max-width: 768px){
.str {
  display       : inline-block;        /* ブロック化              */
  font-weight   : bold;                /* 太字                    */
  font-size     : 120%;                /* 文字を大きくする        */
  border-bottom : 0px solid #0059b3;   /* 下線                    */
  color         : yellow;             /* 文字色                  */
  animation     : strAnime 3s linear infinite;  /* アニメーション */
}
 
.str2 {
  display       : inline-block;        /* ブロック化              */
  font-weight   : bold;                /* 太字                    */
  font-size     : 80%;                /* 文字を大きくする        */
  border-bottom : 0px solid #0059b3;   /* 下線                    */
  color         : #f08080;             /* 文字色                  */
  animation     : strAnime 3s linear infinite;  /* アニメーション */
}

@keyframes strAnime {
   0% {
       color     : #ffffff;            /* 点滅開始色              */
      }
  50% {
       color     : #ff0000;            /* 点滅中間色              */
      }
 100% {
       color     : #ffffff;            /* 点滅終了色              */
      }
}
}

/* --- 文字アニメーション終わり------------------------------- */


/* ---スライダー---- */
.slider,
.slider > div {
  background-position: center center;
  display: block;
  width:100%;
  height: 400px;
  position: relative;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: transparent;
  overflow: hidden;
  -moz-transition: transform 0.4s;
  -o-transition: transform 0.4s;
  -webkit-transition: transform 0.4s;
  transition: transform 0.4s;
 font-size: 20px;
  color: #ffffff;
}

.slider img{
    width: 500px;
    height: 300px;
}

@media (max-width: 768px){
.slider,
.slider > div {
  background-position: center center;
  display: block;
  width:100%;
  height: 400px;
  position: relative;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: transparent;
  overflow: hidden;
  -moz-transition: transform 0.4s;
  -o-transition: transform 0.4s;
  -webkit-transition: transform 0.4s;
  transition: transform 0.4s;
 font-size: 16px;
    color: #ffffff;
}

.slider img{
    width: 100%;
    height: 300px;
}
}

.slider > div {
  position: absolute;
}

.slider > i {
  color: #f08080;
  position: absolute;
  font-size: 60px;
  margin: 20px;
  top: 40%;
  text-shadow: 0 10px 2px #223422;
  transition: 0.3s;
  width: 30px;
  padding: 10px 13px;
  background: #fff;
  background: rgba(255, 255, 255, 0.3);
  cursor: pointer;
  line-height: 0;
  box-sizing: content-box;
  border-radius: 3px;
  z-index: 4;
}

.slider > i svg {
  margin-top: 3px;
}

.slider > .left {
  left: -100px;
}
.slider > .right {
  right: -100px;
}
.slider:hover > .left {
  left: 0;
}
.slider:hover > .right {
  right: 0;
}

.slider > i:hover {
  background: #fff;
  background: rgba(255, 255, 255, 0.8);
  transform: translateX(-2px);
}

.slider > i.right:hover {
  transform: translateX(2px);
}

.slider > i.right:active,
.slider > i.left:active {
  transform: translateY(1px);
}

.slider:hover > div {
  transform: scale(1.01);
}

.hoverZoomOff:hover > div {
  transform: scale(1);
}

.slider > ul {
  position: absolute;
  bottom: 10px;
  left: 50%;
  z-index: 4;
  padding: 0;
  margin: 0;
  transform: translateX(-50%);
  border: none;
    width: auto;
}

@media (max-width: 768px){
.slider > ul {
  position: absolute;
  bottom: 10px;
  left: 50%;
  z-index: 4;
  padding: 0;
  margin: 0;
  transform: translateX(-50%);
  border: none;
    width: auto;
}
}

.slider > ul > li {
  padding: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  list-style: none;
  float: left;
  margin: 10px 10px 0;
  cursor: pointer;
  border: 0px solid #fff;
  background-color: #ffffff;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.slider > ul > .showli {
  background-color: #f08080;
  -moz-animation: boing 0.5s forwards;
  -o-animation: boing 0.5s forwards;
  -webkit-animation: boing 0.5s forwards;
  animation: boing 0.5s forwards;
}

.slider > ul > li:hover {
  background-color: #f08080;
}

.slider > .show {
  z-index: 1;
}

.hideDots > ul {
  display: none;
}

.showArrows > .left {
  left: 0;
}

.showArrows > .right {
  right: 0;
}


@keyframes boing {
  0% {
    transform: scale(1.2);
  }
  40% {
    transform: scale(0.6);
  }
  60% {
    transform: scale(1.2);
  }
  80% {
    transform: scale(0.8);
  }
  100% {
    transform: scale(1);
  }
}


#slider001 {
  min-width: 60%;
}

.index-slider {
  display: flex;
}
/* ---スライダー終わり---- */