@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
*/

html {
      font-family: "Noto Sans JP","Zen Kaku Gothic New", sans-serif;
      line-height: 1.8;
      height: 100%;
      word-break: break-word;
      color: #333;
      -webkit-appearance: none;
      -webkit-tap-highlight-color: transparent;
}

/*スマホのメニュー非表示*/
.l-header__menuBtn.sp_ {
	display: none;
}

.home {
	.c-loader-bg {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #000;
      z-index: 100;
      display: grid;
      place-items: center;
      pointer-events: none;
    }
 
    .c-loader-dot {
      display: inline-flex;
      align-items: center;
      justify-content: start;
      pointer-events: none;
    }
 
    .c-loader-dot>span {
      display: block;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background-color: #fff;
    }
 
    .c-loader-dot>span+span {
      margin-left: 3rem;
    }
	
	.post_content .is-style-section_ttl.accent-border {
    font-size: 1.8rem;
    position: relative;
    display:inline-block;
    text-align: center;
    width: 100%;
    }

    .triangle-container {
        position: relative;
    }

    .triangle-container::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0%;
        transform: translateX(-50%);
        width: 0;
        height: 0;
        border-left: 280px solid transparent;
        border-right: 280px solid transparent;
        border-top: 100px solid #3498db;
    }

    .triangle-container::after {
        content: "";
        position: absolute;
        bottom: 0;
        right: 0;
        transform: translateX(50%);
        width: 0;
        height: 0;
        border-left: 280px solid transparent;
        border-right: 280px solid transparent;
        border-bottom: 100px solid #3498db;
    }

    .post_content .is-style-section_ttl.accent-border::after {
        content: "";
        position: absolute;
        bottom: -5px;  /* 文字の下に配置 */
        left: 50%;  /* 文字列の中央を基準に */
        transform: translateX(-50%);  /* 左に50%移動して中央に配置 */
        width: 60px;  /* 線の幅を文字列より短く設定 */
        height: 5px;  /* 線の太さ */
        background-color: var(--color_deep02);
    }

    .d-flex {
        display: flex;
    }

    @media (max-width:720px) {
        .flex-sp-column {
            flex-direction: column;
        }
        span.has-background-gradient {
            background: none;
            &+ img {
                width: 100%;
                height: auto;
            }
        }
    }

    .post_content h3:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title))::before {
        content: none;
    }

    .post_content h4:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title)) {
        padding: 0 32px;
        border-left: none;
        color: #fff;
        background: var(--color_deep02);
        display: inline-block;
        text-align:center;
    }

    .rounded-circle {
        position: relative;
        top: 32px;
        z-index: 1;
        background: #162288;
        border-radius: 50%;
        width: 120px;
        height: 120px;
        margin: auto;
        color: #ffffff;
        font-size: 3rem;
        font-weight: bold;
        text-align: center;
    }

    .circle-text {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    @media (max-width:720px) {
        .rounded-circle {
            font-size: 2.6rem;
        }
    }

    .card {
        background: #ffffff;
        padding: 16px;
        padding-top: 48px;
        border-radius: 10px;
        filter: drop-shadow(1px 1px 3px gray);
    }

    @media (max-width:720px) {
        .wp-block-columns .wp-block-column {
            margin: 16px!important;
            margin-top: inherit;
            margin-bottom: inherit;
        }
        .card {
            padding: 24px;
            padding-top: 48px;
        }
    }

    .post_content h4:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title)).border-none {
        padding: 0;
        border-left: none;
        color: #4c4c4c;
        background: transparent;
        width: 100%;
    }

    .position-relative {
        position: relative;
    }

    .top-100 {
        top: 100px;
    }

    .width-900 {
        width: 100%;
        max-width: 900px;
        left: 50%;
        transform: translateX(-50%);
    }
}

/* 背景文字のラッパー */
.background-text-wrapper {
  position: absolute;
  top: 500px;
  left: 0;
  width: 100%;
  z-index: 1; /* 前景の下に配置 */
}

/* 各スライドするテキスト */
.sliding-text {
	font-size: 14rem; /* 大きめのフォントサイズ */
	font-weight: bold;
	text-transform: uppercase;
	color: transparent;
	-webkit-text-stroke: 2px rgba(0, 123, 255, 0.2); /* 背景用に薄めのアウトライン */
	position: absolute;
	display: inline-block;
	width: 100%;
	white-space: nowrap;
}

