芝麻web文件管理V1.00

编辑当前文件:/home/r5772835/public_html/tt.kahokutaku.com/wp-content/plugins/my-snow-monkey/css/style.css

@charset "UTF-8";
.btn .smb-btn {
  align-items: center;
  width: 240px;
  height: 60px;
  margin-top: 60px;
}

.swiper-slide {
  /* 表示させる高さの調整 */
  position: relative;
  height: 70vh;
  overflow: hidden;
}
.swiper-slide .main-visual {
  width: 100%;
  height: 100%;
  max-width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transform: scale(1);
  transition: transform 9s ease;
}
.swiper-slide-active .main-visual {
  transform: scale(1.2);
}
.swiper-slide-active .hero__title {
  transform: translateX(-50%);
  opacity: 1;
}
.swiper-slide-active .hero__btn {
  transform: translateX(-50%);
  opacity: 1;
}

.hero {
  overflow: hidden;
}
.hero__title {
  position: absolute;
  top: 30%;
  left: 50%;
  color: #fff;
  text-align: center;
  width: 90vw;
  transform: translate(-50%, 20px);
  transition: opacity 1.2s ease 1.5s, transform 1.2s ease 1.5s;
  z-index: 1;
  opacity: 0;
}
.hero__title h2 {
  font-size: 36px;
  text-shadow: 1px 2px 3px rgba(0, 0, 0, 0.8);
  line-height: 2em;
}
.hero__title span {
  display: block;
}
.hero__btn {
  position: absolute;
  bottom: 30%;
  left: 50%;
  font-size: 16px;
  color: #fff;
  transform: translate(-50%, 20px);
  transition: opacity 1.2s ease 2.5s, transform 1.2s ease 2.5s;
  opacity: 0;
  z-index: 1;
}
.hero__btn a {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  background-color: #cd162c;
  text-decoration: none;
  width: 240px;
  height: 60px;
}

/* ヘッダー */
/* グローバルメニュー位置調整 */
.l-header .c-navbar__item {
  position: relative;
}
.l-header .c-navbar__item::after {
  /* メニューアイテムの左に区切り線 */
  content: "";
  position: absolute;
  top: 50%;
  display: block;
  height: 30px;
  margin-top: -15px;
  border-right: 1px solid #ccc;
}
.l-header .c-navbar__item:last-of-type::before {
  /* 最後のメニューアイテムの右に区切り線 */
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  display: block;
  height: 30px;
  margin-top: -15px;
  border-right: 1px solid #ccc;
}

/* *****************************************************************

Stylesheet: ベーススタイル（全て）に適応

******************************************************************/
body {
  background-color: rgb(207, 207, 207) !important;
}

/* TOPのパネル */
.top-panel {
  /* 位置調整 */
  position: relative;
  transform: translateY(-100px);
  z-index: 1;
}
.top-panel .smb-panels__item {
  /* パネルの影 */
  box-shadow: 0 -6px 8px rgba(0, 0, 0, 0.1) !important;
}
.top-panel .smb-panels__item:hover {
  /* 標準であるホバーエフェクトの除去 */
  box-shadow: none;
}
.top-panel .smb-panels__item__body {
  /* 標準のh2装飾の除去 */
  padding: 80px;
}
.top-panel .smb-panels__item__body h2 {
  background-color: transparent;
  border-left: none;
}

/* 3枚並んだパネルの装飾 */
.panels .c-row__col {
  /* パネルの余白除去 */
  padding: 0;
}
.panels .smb-panels__item {
  display: flex;
  flex-direction: column;
  box-shadow: none;
  padding: 0;
  /* パネルホバー時の装飾 */
}
.panels .smb-panels__item__figure {
  /* テキストと画像の位置変更 */
  position: relative;
  order: 2;
  overflow: hidden;
}
.panels .smb-panels__item__figure::before {
  /* ホバー時の装飾 */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  content: "◯◯◯◯◯◯◯◯\a◯◯◯◯◯◯◯◯\a\a◯◯◯◯◯◯◯◯◯◯◯◯";
  white-space: pre;
  background: radial-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.9));
  color: #fff;
  font-size: 13px;
  transition: all 0.6s 70ms;
  opacity: 0;
  z-index: 1;
}
.panels .smb-panels__item__figure img {
  /* 変化の時間 */
  transition: all 0.6s;
}
.panels .smb-panels__item__body {
  /* パネルのボーダー部分 */
  box-shadow: 0 0 0 1px #ccc;
  /* パネルのテキストと画像の順序を変更*/
  order: 1;
}
.panels .smb-panels__item__title {
  font-size: 24px;
}
.panels .smb-panels__item__content {
  font-size: 14px;
}
.panels .smb-panels__item:hover .smb-panels__item__figure::before {
  /* ホバー時に文字浮き出して見えるようにscaleで拡大 */
  transform: scale(1.4);
  opacity: 1;
}
.panels .smb-panels__item:hover .smb-panels__item__figure img {
  /* ホバー時に画像を拡大 */
  transform: scale(1.2);
}

.smb-section__title {
  /* セクションタイトルサイズ変更 */
  font-size: 2.5em;
}
.smb-section__title::after {
  /* 標準であるセクションタイトルの下線除去 */
  display: none;
}

@media (max-width: 1023px) {
  /******************************************************************

Stylesheet: 1023px以下（タブレット）で適用

******************************************************************/
  /* ヒーロースライダー */
  .hero__title h2 {
    font-size: 32px;
  }
  .hero .swiper-slide {
    height: 80vh;
  }
}
@media (max-width: 639px) {
  /******************************************************************

Stylesheet: 639px以下(スマホ)で適用

******************************************************************/
  /* ヒーロースライダー */
  .hero__title {
    top: 15%;
  }
  .hero__title h2 {
    font-size: 24px;
  }
  .hero__btn {
    bottom: 20%;
  }
  .hero__btn a {
    /* ボタンのサイズを小さく */
    width: 180px;
    height: 45px;
  }
  /* 3つ並んだパネル */
  .panels {
    /* パネルの余白追加 */
  }
  .panels .c-row__col {
    padding: 0 14px;
  }
  /* ボタン */
  .btn .smb-btn {
    width: 180px;
    height: 45px;
    margin-top: 30px;
  }
}

ページが見つかりませんでした – kahoku table tennis

ページが見つかりませんでした。
お探しのページは移動したか削除されています。
この検索ボックスから検索してください。