@charset "UTF-8";
/**************ラジオボタンでタブ切り替えの実装**************/
.tab-contents-wrap {
  display: flex;
  flex-wrap: wrap;
}

.tab-contents-label {
  text-align: center;
  order: -1;
  cursor: pointer;
  flex: 1;
  transition: 0.3s;
  background-color: #000000;
  color: #fff;
  border: 2px #000000 solid;
  padding: 0.5em 0.8em;
}

.tab-contents-main {
  width: 100%;
  height: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.3s;
  visibility: hidden;
  background-color: #fff;
  padding-right: 2em;
  padding-left: 2em;
  position: relative;
  top: -2px;
}

.tab-contents-input {
  display: none;
}
.tab-contents-input:checked + .tab-contents-label {
  background-color: #fff;
  color: #000000;
  border-bottom-color: #fff;
}
.tab-contents-input:checked + .tab-contents-label + .tab-contents-main {
  height: auto;
  opacity: 1;
  visibility: visible;
  border-right: 2px #000000 solid;
  border-left: 2px #000000 solid;
  border-bottom: 2px #000000 solid;
  padding-top: 2.6em;
  padding-bottom: 2.6em;
}

/**************jsなし！チェックボックスで開閉するコンテンツを作る方法**************/
.faq-contents-item {
  margin-bottom: 2px;
}

.faq-contents-item-label {
  display: flex;
  width: 100%;
  margin: 0;
  padding: 0;
  cursor: pointer;
  background-color: #000;
  color: #fff;
  padding: 1rem 1.4rem;
}

.faq-contents-item-label-main {
  width: calc(100% - 4rem);
}

.faq-contents-item-icon {
  width: 4rem;
  position: relative;
}
.faq-contents-item-icon::before, .faq-contents-item-icon::after {
  content: " ";
  width: 1.6rem;
  height: 1px;
  background-color: #fff;
  top: 1.3rem;
  right: 0;
  position: absolute;
  display: block;
  transition: 0.3s;
}

.faq-contents-item-main {
  transition: 0.3s;
  overflow: hidden;
  height: 0;
  opacity: 0;
  visibility: hidden;
  background-color: #fff;
  padding-right: 1.4rem;
  padding-left: 1.4rem;
}

.faq-contents-item-input {
  display: none;
}
.faq-contents-item-input:checked + .faq-contents-item-label .faq-contents-item-icon::before {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.faq-contents-item-input:checked + .faq-contents-item-label .faq-contents-item-icon::after {
  -webkit-transform: rotate(130deg);
          transform: rotate(130deg);
}
.faq-contents-item-input:checked + .faq-contents-item-label + .faq-contents-item-main {
  height: auto;
  opacity: 1;
  visibility: visible;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

/**************画像hoverアニメーションの例まとめ**************/
.common-img-animation a img {
  transition: 0.6s; /*アニメーションの動きを滑らかにする*/
  max-width: 100%;
  height: auto;
}
.common-img-animation.common-transform-opacity-animation a:hover img {
  opacity: 0.5; /*透明度の指定*/
}
.common-img-animation.common-transform-scale-animation {
  overflow: hidden; /*はみ出し防止*/
}
.common-img-animation.common-transform-scale-animation a:hover img {
  -webkit-transform: scale(1.2);
          transform: scale(1.2); /*ズームの指定*/
}
.common-img-animation.common-transform-rotate-animation {
  overflow: hidden; /*はみ出し防止*/
}
.common-img-animation.common-transform-rotate-animation a:hover img {
  -webkit-transform: rotate(360deg);
          transform: rotate(360deg); /*回転の指定*/
}
.common-img-animation.common-transform-scale-rotate-animation {
  overflow: hidden; /*はみ出し防止*/
}
.common-img-animation.common-transform-scale-rotate-animation a:hover img {
  -webkit-transform: scale(1.4) rotate(15deg);
          transform: scale(1.4) rotate(15deg); /*ズームと回転の指定*/
}
.common-img-animation.common-transform-rotateY-animation a:hover img {
  -webkit-transform: rotateY(360deg);
          transform: rotateY(360deg); /*Y軸回転の指定*/
}
.common-img-animation.common-transform-rotateX-animation a:hover img {
  -webkit-transform: rotateX(360deg);
          transform: rotateX(360deg); /*X軸回転の指定*/
}
.common-img-animation.common-filter-grayscale-animation a:hover img {
  -webkit-filter: grayscale(100%);
          filter: grayscale(100%); /*グレースケールの指定*/
}
.common-img-animation.common-filter-sepia-animation a:hover img {
  -webkit-filter: sepia(100%);
          filter: sepia(100%); /*セピアの指定*/
}
.common-img-animation.common-filter-drop-shadow-animation a:hover img {
  -webkit-filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.5));
          filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.5)); /*影の指定*/
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
}
.common-img-animation.common-filter-blur-animation a:hover img {
  -webkit-filter: blur(10px);
          filter: blur(10px); /*ぼかしの指定*/
}
.common-img-animation.common-filter-contrast-animation a:hover img {
  -webkit-filter: contrast(200%);
          filter: contrast(200%); /*コントラストの指定*/
}
.common-img-animation.common-filter-brightness-animation a:hover img {
  -webkit-filter: brightness(200%);
          filter: brightness(200%); /*明るさの指定*/
}
.common-img-animation.common-filter-saturate-animation a:hover img {
  -webkit-filter: saturate(200%);
          filter: saturate(200%); /*彩度の指定*/
}
.common-img-animation.common-filter-hue-rotate-animation a:hover img {
  -webkit-filter: hue-rotate(180deg);
          filter: hue-rotate(180deg); /*色相の回転の指定*/
}
.common-img-animation.common-filter-invert-animation a:hover img {
  -webkit-filter: invert(100%);
          filter: invert(100%); /*階調の反転の指定*/
}

/**************HTMLとCSSでタイムラインを作ります**************/
ul.timeline-list {
  padding-left: 0;
  margin: 0;
}
ul.timeline-list li {
  list-style: none;
  padding-left: 4rem;
  position: relative;
}
ul.timeline-list li:not(:last-of-type) {
  padding-bottom: 4rem;
}
ul.timeline-list li:not(:last-of-type)::before {
  content: " ";
  display: block;
  position: absolute;
  background-color: #000;
  width: 2px;
  height: calc(100% - 1.4rem);
  top: calc(1.5rem + 0.45em);
  left: 0.8rem;
}
ul.timeline-list li::after {
  content: " ";
  display: block;
  position: absolute;
  background-color: #000;
  width: 1.6rem;
  height: 1.6rem;
  top: 0.45em;
  left: 0;
  color: #fff;
  line-height: 5.6rem;
  font-family: "Quantico", sans-serif;
  text-align: center;
  font-size: 1.6rem;
}

.timeline-list-title {
  font-weight: 700;
  font-size: 1.6rem;
  margin-bottom: 1rem;
}

/**************HTMLとCSSでタイムラインを作ります**************/
ol.timeline-list {
  padding-left: 0;
  margin: 0;
}
ol.timeline-list li {
  list-style: none;
  padding-top: 1.5rem;
  padding-left: 8rem;
  position: relative;
  counter-increment: timelineNum;
}
ol.timeline-list li:not(:last-of-type) {
  padding-bottom: 4rem;
}
ol.timeline-list li:not(:last-of-type)::before {
  content: " ";
  display: block;
  position: absolute;
  background-color: #000;
  width: 2px;
  height: calc(100% - 5.4rem);
  top: 5.5rem;
  left: 2.8rem;
}
ol.timeline-list li::after {
  content: counter(timelineNum, decimal-leading-zero);
  display: block;
  position: absolute;
  background-color: #000;
  width: 5.6rem;
  height: 5.6rem;
  top: 0;
  left: 0;
  color: #fff;
  line-height: 5.6rem;
  font-family: "Quantico", sans-serif;
  text-align: center;
  font-size: 1.6rem;
}/*# sourceMappingURL=tips.css.map */