/* =========================================================
   utility.css
   余白・表示切替など、小さな便利クラス
========================================================= */

.u-center { text-align: center !important; }
.u-sp-only { display: none !important; }

@media (max-width: 767px){
  .u-pc-only { display: none !important; }
  .u-sp-only { display: block !important; }
}


/*SNSアイコンを文頭に*/
.line p,
.instagram p{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.line p::before{
  content: "";
  width: 35px;
  height: 35px;
  background: url("https://matrabbityoga.com/wp-content/uploads/2026/06/line.png") no-repeat center center;
  background-size: contain;
}

.instagram p::before{
  content: "";
  width: 35px;
  height: 35px;
  padding-right: 5px;
  background: url("https://matrabbityoga.com/wp-content/uploads/2026/06/instagram.png") no-repeat center center;
  background-size: contain;
}

/* スラッシュ装飾 */
.slash {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.slash::before,
.slash::after {
  content: "";
  display: inline-block !important;
  width: 16px;
  height: 16px;
  border-top: 2px solid #CB717F;
  opacity: 0.8;
  position: relative !important;
  top: 5px !important; /* ←下に移動 */
}

.slash::before {
  transform: rotate(60deg);
}

.slash::after {
  transform: rotate(-60deg);
}


/*アクセスの区切り線（点線）*/
.wp-block-separator.line {
  border: none;
  height: 1px;
  background-image: repeating-linear-gradient(
    to right,
    #e0e0e0 0,
    #e0e0e0 8px,
    transparent 8px,
    transparent 14px
  );
}



/* =========================================================
   クラス紹介レイアウト
========================================================= */

.class {
  border: 1px solid #d8d8d8;
  padding: 30px 36px;
  margin-bottom: 22px;
}

/* カラム */
.class .wp-block-columns {
  gap: 36px;
  margin-bottom: 0;
}

.class .wp-block-column:first-child {
  border-right: 1px solid #cfcfcf;
  padding-right: 36px;
}

/* テーブル */
.class table {
  width: auto;
  margin: 0;
  border-collapse: separate !important;
  border-spacing: 16px 12px;
}

.class table,
.class table tbody,
.class table tr,
.class table td {
  border: none !important;
}

/* 左ラベル */
.class table tr td:first-child {
  background: #ececec !important;
  text-align: center;
  font-weight: 400;
  white-space: nowrap;
  padding: 8px 16px !important;
  font-size: 16px;
}

/* 右側 */
.class table tr td:nth-child(2) {
  background: #fff !important;
  text-align: left;
  white-space: nowrap;
  padding: 8px 12px !important;
  font-size: 16px;
}

/* 説明文ボックス */
.class .class-text,
.class .setsumei {
  border: 1px solid #cfcfcf;
  padding: 16px;
  margin-top: 18px;
  text-align: center;
}

/* スマホ */
@media (max-width:768px){

  .class{
    padding:24px 20px;
  }

  .class .wp-block-columns{
    gap:20px;
  }

  .class .wp-block-column:first-child{
    border-right:none;
    border-bottom:1px solid #cfcfcf;
    padding-right:0;
    padding-bottom:24px;
  }

  .class table{
    border-spacing:12px 10px;
  }

}