@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/
.os-style {
  position: relative;
  top: -30px; /* 上に30px移動 */
}

.os-01-style {
  position: relative;
  display: inline-block; /* テキスト幅に合わせる */
}

/* 水平線 */
.os-01-style::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;          /* 線の太さ */
  width: 100%;          /* テキスト幅いっぱい */
  background-color: #fff;
}

/* 斜め線 */
.os-01-style::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 100%;           /* テキストの右端から開始 */
  height: 2px;
  width: 70px;         /* 斜め線の長さ */
  background-color: #fff;
  transform-origin: left bottom;
  transform: rotate(-30deg); /* 斜め角度 */
}

/* os-02 */
/* os-02 水平線 */
.os-02-style {
  position: relative;
  display: inline-block; /* テキスト幅に合わせる */
	
}

.os-02-style::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 100%;
  background-color: #fff;
}

/* os-02 斜め線 */
.os-02-style::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 100%;
  height: 2px;
  width: 70px;
  background-color: #fff;
  transform-origin: right bottom; /* ← 修正 */
  transform: rotate(30deg);      /* ← 右下方向に */
}

/* 右の斜め線 */
/* 4つの機能のstyle */
.wp-block-image.is-style-border img,
.wp-block-video.is-style-border video,
img.border {
    border: 2px solid #fff;   /* 白色のボーダー */
    border-radius: 50%;       /* 円形にする */
    width: 100px;             /* 既存の style 属性と揃える */
    height: 100px;            /* 既存の style 属性と揃える */
    object-fit: cover;        /* 画像をきれいに収める */
}

/* テキストに下線 + 右端に斜め線 */
.four-functions-right-border-style {
    position: relative;
    display: inline-block;
    padding-bottom: 4px; /* 下線との距離調整 */
}

/* 下線 */
.four-functions-right-border-style::before {
    content: "";
    position: absolute;
    left: -27px;
    bottom: 0;
    width: calc(100% + 28px);
    height: 2px;
    background-color: #fff;
}

/* 斜め線 */
.four-functions-right-border-style::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 100%;           /* テキストの右端から開始 */
  height: 2px;
  width: 70px;         /* 斜め線の長さ */
  background-color: #fff;
  transform-origin: left bottom;
  transform: rotate(30deg); /* 斜め角度 */
}

/* 左斜め線のstyle */
/* テキストに下線 + 右端に斜め線 */
.four-functions-left-border-style {
    position: relative;
    display: inline-block;
    padding-bottom: 4px; /* 下線との距離調整 */
}

/* 下線 */
.four-functions-left-border-style::before {
    content: "";
    position: absolute;
    right: -27px;
    bottom: 0;
    width: calc(100% + 28px);
    height: 2px;
    background-color: #fff;
}

/* 斜め線 */
.four-functions-left-border-style::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;              /* テキスト左端から開始 */
  width: 70px;           /* 斜め線の長さ */
  height: 2px;           /* 線の太さ */
  background-color: #fff;
  transform-origin: left bottom;
  transform: rotate(30deg); /* 右上がりの斜め線 */
}

/* スクロールのところ */


.origin-top-sytle {

  /* stickyが無効にならないよう overflow解除 */
  > *,
  .swell-block-columns,
  .swell-block-columns__inner,
  .swell-block-column {
    overflow: visible !important;
  }

  .origin-info-style {
    max-width: 900px;
    margin: 0 auto;
    line-height: 1.9;
    font-size: 18px;
  }

  .origin-info-style h2 {
    font-size: 32px;
    margin-top: 80px;
    margin-bottom: 30px;
    scroll-margin-top: 120px;
  }

  .origin-info-style p {
    margin-bottom: 28px;
  }

  /* ← sticky対象を .origin-mokuji-style ではなく ul に変更 */
  .origin-mokuji-style ul {
    position: sticky;
    top: 110px;
    z-index: 30;
  }

  .origin-mokuji-style li {
    cursor: pointer;
    opacity: 0.6;
    transition: 0.2s;
	list-style: none;

  }

  .origin-mokuji-style li:hover {
    opacity: 1;
  }

  .origin-mokuji-style .active {
    font-weight: bold;
    opacity: 1;
    color: #000;
  }
}