@charset "utf-8";

a:hover img { opacity: 0.7; }

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

p {
  margin-top: 0;
  line-height: 1.6;
}

header {
  width: 1200px;
  margin: 0 auto;
}

header h1 {
  float: left;
  margin: 5px 0 10px;
}

header #header_link {
  float: right;
  margin: 35px 0 0;
}

header #header_about-us {
  float: right;
  margin: 35px 0 0;
}

#global_navi {
  width: 1200px;
  clear: both;
  overflow: hidden;
  margin: 16px auto;
}

#global_navi ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#global_navi ul li {
  width: 199px;
  float: left;
  margin: 0;
  text-align: center;
}

#global_navi ul li a {
  display: block;
  padding: 16px;
  background-color: #A000FF;
  color: #fff;
  text-decoration: none;
}

#global_navi ul li.current a {
  background-color: #FF5CFF;
}

#global_navi ul li a:hover {
  background-color: #A080FF;
}

body {
  width: 1200px;
  margin: 0 auto;
}

#breadcrumb { font-size: smaller; }

#breadcrumb ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

#breadcrumb ol li { display: inline; }

#breadcrumb ol li::after {
  content: ">";
  padding-left: 7px;
}

#breadcrumb ol li:last-child::after { content: none; }

/* 全体設定 */
.css-carousel-slider {
    width: 100%;
    /* max-width: 800px */ /* サイズ設定をする場合はここ(*1) */
    overflow: hidden;
    position: relative;
}
.css-carousel-slider img {
    width: 100%;
    height: auto;
    vertical-align: top;
}

/* スライド設定 */
.css-carousel-slider .slide-wrap {
    width: 400%; /* 画像の合計数*100%を設定(*2) */
    position: absolute;
    display: flex;
    top: 0;
    left: 0;
    z-index: 0;
    animation: css-carousel-slider 20s infinite; /* スライダーアニメーション全体の時間(*3) */
    animation-delay: 4s; /* スライダーが始まるまでの時間(*4) */
}
.css-carousel-slider .slide-wrap-main {
    width: 100%;
    z-index: 1;
    animation: css-carousel-slider-main 20s infinite; /* (*3)と同じ内容を設定 */
    animation-delay: 4s; /* (*4)と同じ内容を設定 */
}
.css-carousel-slider .slide {
    width: 100%;
}

/* スライダーアニメーションの設定(*5) */
@keyframes css-carousel-slider {
    0% { transform: translateX(0); }

    20% { transform: translateX(calc(1 / 4 * -100%)); }
    25% { transform: translateX(calc(1 / 4 * -100%)); }

    45% { transform: translateX(calc(2 / 4 * -100%)); }
    50% { transform: translateX(calc(2 / 4 * -100%)); }

    70% { transform: translateX(calc(3 / 4 * -100%)); }
    75% { transform: translateX(calc(3 / 4 * -100%)); }

    95% { transform: translateX(calc(4 / 4 * -100%)); }
    100% { transform: translateX(calc(4 / 4 * -100%)); }
}

@keyframes css-carousel-slider-main {
    0% { transform: translateX(100%); }
    75% { transform: translateX(100%); }
    95% { transform: translateX(0%);}
}