/* Google Fonts - Noto Sans JP */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&display=swap');

/* ==================================================
   リセット・基本設定

   font-family: helvetica-lt-pro, sans-serif;
font-weight: 700;
font-style: normal;
================================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    /* scroll-behavior: smooth; */
}

ul, ol {
    list-style: none;
}

a {
    color: #102a6b;
    text-decoration: none;
}

.sp-indent {
    display: none;
}

.pc-indent {
    display: block;
}

body {
    position: relative;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    z-index: 0;
    font-family: "Noto Sans JP", 'helvetica-lt-pro', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
    font-size: 100%;
    line-height: 1.6;
    color: #102a6b;
    letter-spacing: .05em;
    font-feature-settings: "palt" 1; /* プロポーショナル詰め */
    background: #f5f5f5;
    /* overflow-wrap: break-word; */
    /* word-break: normal; */
    /* line-break: strict;  */
    hyphens: auto;               /* 英語の自動ハイフネーション */
    -webkit-text-size-adjust: 100%;/* Safari, Chrome, OperaなどWebKit系 */
    text-size-adjust: 100%;
    
}

/* ==================================================
   font-size 指定
================================================== */
:root {
    /* 補助・キャプション (例: 12.8px 〜 14.4px 相当)
    近しいサイズ: .6rem, 14px, 1.2dvw, min(1.2vw, 16px) */
    --fs-xs: clamp(0.8rem, 0.75rem + 0.1vw, 0.9rem); 

    /* 小さい本文 (例: 14.4px 〜 16px 相当)
    近しいサイズ: .8rem, .9rem, 14px, 1.5dvw */
    --fs-sm: clamp(0.9rem, 0.85rem + 0.1vw, 1rem); 

    /* 標準本文 (16px 基準)
    近しいサイズ: 16px, 1rem, 1.1rem */
    --fs-base: 1rem; 

    /* やや大きい本文・リード文 (例: 18px 〜 20px 相当)
    近しいサイズ: 18px, 1.2rem, 1.4rem, 1.6dvw, 2dvw */
    --fs-lg: clamp(1.125rem, 1.1rem + 0.2vw, 1.25rem); 

    /* セクション見出し (例: 22px 〜 24px 相当)
    近しいサイズ: 1.4rem, 1.5rem, 1.8rem, 2.4dvw */
    --fs-xl: clamp(1.25rem, 1.1rem + 1vw, 1.5rem);

    /* 大見出し (例: 28px 〜 32px 相当)
    近しいサイズ: 2rem, 2.4rem, 3dvw */
    --fs-2xl: clamp(1.5rem, 1.4rem + 1.6vw, 2rem);

    /* H2/H3レベル (例: 38px 〜 48px 相当)
     近しいサイズ: 2.4rem, 3rem, 2.4vw, 3.6dvw */
    --fs-h2: clamp(1.5rem, 1.4rem + 1.6vw, 3rem);

    /* H1/メインタイトル (例: 48px 〜 64px 相当)
        近しいサイズ: 4rem, 6dvw */
    --fs-h1: clamp(3rem, 2.5rem + 3vw, 4rem); 

    /* ヒーロー要素 (画面を大きく占める特大テキスト)
        近しいサイズ: 15dvw, 50dvw */
    --fs-hero: clamp(5rem, 5rem + 10vw, 12rem);
    }

/* ==================================================
   改行処理（用途別設定）
================================================== */

/* 見出し - 改行を抑制 */
h1, h2, h3, h4, h5, h6 {
    word-break: keep-all;         /* 日本語の単語境界を保持 */
    line-break: strict;           /* 厳格な改行規則 */
    overflow-wrap: break-word;    /* 必要時のみ折り返し */
}

/* 本文テキスト - 自然な改行 */
p, div, span {
    word-break: normal;           /* 通常の単語境界で改行 */
    line-break: auto;             /* 自動改行 */
    overflow-wrap: break-word;    /* 長い単語を適切に処理 */
}

/* コードやURL - 折り返し抑制 */
code, .url, .no-break {
    white-space: nowrap;          /* 改行しない */
    overflow: hidden;             /* はみ出し部分を隠す */
    text-overflow: ellipsis;      /* ...で省略表示 */
}

/* 強制改行が必要な場合 */
.force-break {
    word-break: break-all;        /* どこでも改行可能 */
    overflow-wrap: anywhere;      /* より積極的な折り返し */
}

/* 改行を保持したい場合（詩や住所など） */
.preserve-breaks {
    white-space: pre-line;        /* 改行を保持、空白は正規化 */
}

/* 英語コンテンツ用 */
.english-content {
    hyphens: auto;                /* 自動ハイフネーション */
    word-break: normal;           /* 単語境界で改行 */
    line-break: auto;             /* 自動改行 */
}

/* ==================================================
   アニメーション
================================================== */
.fade-out {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    pointer-events: none;
}

.fade-in {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

:not(.bg-mask).fade-out {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    pointer-events: none;
}

:not(.bg-mask).fade-in {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

.bg-mask.fade-out {
    opacity: 0;
    transform: translateY(10px) scale(1);
    transition: all 0.25s cubic-bezier(0.4, 0.0, 0.2, 1);
    pointer-events: none;
}

.bg-mask.fade-in {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition: all .1s cubic-bezier(0.0, 0.0, 0.2, 1); /* 0.1sで「すっと」出現するはずです */
}

/* 色変更アニメーション */
.color-white {
    color: #fff !important;
    transition: color 0.6s ease-out;
}

.color-dark {
    color: #102a6b !important;
    transition: all 0.6s ease-out;
}

/* タイトルのフォントサイズ変更 */
.fv_area .title-area h1.color-white {
    transition: all 0.6s ease-out;
    font-size: var(--fs-2xl);
}

@keyframes fadeInAnimation {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.load-fade-in {
    transform: translateY(40px);
    animation-name: fadeInAnimation;
    animation-duration: .6s;
    animation-timing-function: ease-out; 
    animation-delay: 0.3s;
    animation-fill-mode: forwards;
    opacity: 0;
}


/* ==================================================
   背景要素
================================================== */
.bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    background: 
        /* (2a) 上層：光沢を表現するハイライト */
        radial-gradient(
            circle at 10% 20%,
            rgba(255, 255, 255, 0.4) 0%,
            rgba(255, 255, 255, 0) 25%
        ),
        /* (2b) 下層：ベースとなる4色のグラデーション */
        linear-gradient(
            -45deg, 
            #5ca9ff, 
            #102a6b, 
            #3983fd, 
            #1d5fd6
        );
    background-size: 150% 150%, 400% 400%;
    background-repeat: no-repeat; /* 光沢が繰り返されないように設定 */
    animation: glossyEffect 30s ease infinite;
}

@keyframes glossyEffect {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

.bg .bg-geometry {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
}

.bg .bg-geometry .square01,
.bg .bg-geometry .square02 {
    background: transparent;
    border: 1px solid #3983FD;
}

.bg .bg-geometry .square01 {
    position: absolute;
    top: 10%;
    left: 90%;
    width: 100%;
    aspect-ratio: 1/1;
    transform: translate(-50%, -50%) rotate(0deg);
    animation: bg-rotate 120s linear infinite;
}

.bg .bg-geometry .square02 {
    position: absolute;
    top: 65%;
    left: 35%;
    width: 55%;
    aspect-ratio: 1/1;
    transform: translate(-50%, -50%) rotate(0deg);
    animation: bg-rotate 90s linear infinite;
}

@keyframes bg-rotate {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

.bg .bg-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../img/bg_tx.webp) #ddd repeat center/cover;
    background-size: 150px;
}

/* ==================================================
   ヘッダー
================================================== */
header {
    position: fixed;
    top: 16px;
    left: 50%;
    width: 95%;
    margin: 0 auto;
    padding: .5em 2em;
    border-radius: 999px;
    transform: translateX(-50%);
    height:8vh;
    max-height: 80px;
    z-index: 999;
}

/* ガラスモーフィズム効果 */
.c-liquid {
    background: rgba(255, 255, 255, 0.4); /* (1) 半透明の背景 */
    border: 1px solid rgba(255, 255, 255, 0.3); /* (5) ガラスの輪郭線 */
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); /* (3) 影で立体感を演出 */
    backdrop-filter: blur(5px); /* (4) 背景のぼかし */
    -webkit-backdrop-filter: blur(5px); /* Safari向けプレフィックス */
}

header .gnav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

header .gnav .logo {
    height: 32px;
}

header .gnav .logo a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

header .gnav .logo img {
    height: 100%;
    vertical-align: middle;
}

header .gnav nav {
    margin-left: auto;
    height: 100%;
}

header .gnav nav ul {
    display: flex;
    height: 100%;
    width: 100%;
    gap: 16px;
    align-items: center;
    justify-content: space-around;
}

header .gnav nav ul li {
    width: calc(100% / 6);
    height: 100%;
}

header .gnav nav ul li a {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: .6s;
    font-size: var(--fs-xs);
    font-weight: 600;
}

header .gnav nav ul li a svg {
    object-fit: contain;
    height: 100%;
    width: auto;
    overflow: visible;
}

header .gnav nav ul li a::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    height: 0%;
    aspect-ratio: 1 / 1;
    background-color: #102a6bff;
    z-index: -1;
    transition: 0.3s ease;
}

header .gnav nav ul li a:hover::after {
    height: 150%;
}

header .gnav nav ul li a::before {
    content: "";
    position: absolute;
    width: 0%;
    padding: 0 1em;
    height: 0em;
    top: calc(100% + 2em);
    left: 50%;
    transform: translate(-50%, -50%);
    color: #102a6b;
    white-space: nowrap;
    background-color: #fff;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    z-index: -1;
    transition: .3s;
}

header .gnav nav ul li a.h-nav-what_is_moteru:hover::before {
    content: "Moteruとは";
    width: fit-content;
    height: 2em;
    opacity: 1;
}

header .gnav nav ul li a.h-nav-functions:hover::before {
    content: "基本機能";
    width: fit-content;
    height: 2em;
    opacity: 1;
}

header .gnav nav ul li a.h-nav-case_studies:hover::before {
    content: "導入事例";
    width: fit-content;
    height: 2em;
    opacity: 1;
}

header .gnav nav ul li a.h-nav-pricing:hover::before {
    content: "プラン/料金";
    width: fit-content;
    height: 2em;
    opacity: 1;
}

header .gnav nav ul li a.h-nav-contact:hover::before {
    content: "お問い合わせ";
    width: fit-content;
    height: 2em;
    opacity: 1;
}

header .gnav nav ul li a.h-nav-login:hover::before {
    content: "ログイン";
    width: fit-content;
    height: 2em;
    opacity: 1;
}

#what_x5F_is_x5F_moteru #circle .st0,
#what_x5F_is_x5F_moteru #body .st0,
#functions_moteru .st0,
#clients_moteru .st0,
#pricing_x5F_moteru #body.st0 {
    fill: #3983fd;
    stroke: #fff;
    stroke-width: 16px;
    transition: .3s;
}

header .gnav nav ul li a:hover #what_x5F_is_x5F_moteru #circle .st0,
header .gnav nav ul li a:hover #what_x5F_is_x5F_moteru #body .st0,
header .gnav nav ul li a:hover #functions_moteru .st0,
header .gnav nav ul li a:hover #clients_moteru .st0 {
    fill: #fff;
    stroke-width: 0px;
}

header .gnav nav ul li a:hover #pricing_x5F_moteru #body.st0 {
    fill: #fff;
    stroke: none;
    stroke-width: 0;
}

#contact_moteru #line.st0 {
    fill: none;
    stroke: #fff;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 16px;
    transition: .3s;
}

#contact_moteru #body.st1 {
    fill: #3983fd;
    stroke: #fff;
    stroke-width: 16px;
    transition: .3s;
}

header .gnav nav ul li a:hover #contact_moteru #line.st0 {
    stroke: #102a6bff;
}

header .gnav nav ul li a:hover #contact_moteru #body.st1 {
    fill: #fff;
    stroke-width: 0px;
}

.h-nav-login #header-nav-icon .st1 {
    fill: #3983fd;
    transition: .3s;
}

.h-nav-login #header-nav-icon #body {
    stroke: #fff;
    stroke-width: 16px;
}

.h-nav-login #header-nav-icon #circle {
    stroke: #fff;
    stroke-width: 16px;
}

.h-nav-login #header-nav-icon .st2 {
    fill: none;
    stroke: #fff;
    stroke-width: 32px;
}

.h-nav-login:hover #header-nav-icon .st1 {
    fill: #fff;
    stroke: none;
}

/* ==================================================
   main
================================================== */
main {
    width: 100%;
    margin: 0;
    padding: 0 8px;
    position: relative;
}

/* ==================================================
   fv-area
================================================== */
.fv_area {
    display: flex;
    gap: 24px;
    margin-bottom: 33dvh;
    justify-content: space-between;
}

.fv_area .title-area {
    width: fit-content;
}

.fv_area .title-area h1 {
    line-height: 1.4;
    color: #102a6b;
    width: fit-content;
    height: fit-content;
    transform: translateY(-50%);
    position: sticky;
    top: 50dvh;
    left: 0;
    margin-left: 5dvw;
    font-weight: 900;
    white-space: nowrap; /* <br>以外での折り返しを防止 */
    word-break: keep-all; /* 単語境界での改行を防止 */
    overflow-wrap: normal; /* 自動折り返しを無効化 */
    font-size: var(--fs-h2);
}

.fv_area .title-area h1 span {
    font-size: 1.5em;
}

.fv_area .fv-right {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.fv_area .fv-right .fv-right_img {
    width: 100%;
    height: 100dvh;
    position: relative;
    max-width: 50dvw;
    margin-left: auto;
}

.fv_area .fv-right .fv-right_img .img-area::before,
.fv_area .fv-right .fv-right_img .img-area::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    aspect-ratio: 1/1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    z-index: -1;
}

.fv_area .fv-right .fv-right_img .img-area::before {
    width: 90%;    
    background:
        /* (2a) 上層：光沢を表現するハイライト */
        radial-gradient(
            circle at 10% 20%,
            rgba(255, 255, 255, 0.4) 0%,
            rgba(255, 255, 255, 0) 25%
        ),
        /* (2b) 下層：ベースとなる4色のグラデーション */
        linear-gradient(
            -45deg, 
            #5ca9ff, 
            #102a6b, 
            #3983fd, 
            #1d5fd6
        );
    background-size: 150% 150%, 400% 400%;
    background-repeat: no-repeat; /* 光沢が繰り返されないように設定 */
    animation: glossyEffect 30s ease infinite;
    pointer-events: none;
}

.fv_area .fv-right .fv-right_img .img-area::after {
    width: 60%;
    background: url(../img/bg_tx.webp) #ddd repeat center/cover;
    background-size: 150px;
    pointer-events: none;
}

.fv_area .fv-right .fv-right_img .img-area {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    top: 50dvh;
    transform: translateY(-50%);
}

/* スライドショーコンテナ */
.fv_area .fv-right .fv-right_img .img-area .slideshow-container {
    width: 100%;
    height: 50%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transform: translateY(24px);
}

.fv_area .fv-right .fv-right_img .img-area .slideshow-container .slideshow-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.fv_area .fv-right .fv-right_img .img-area .slideshow-image.active {
    opacity: 1;
}

/* スライドショーナビゲーション */
.fv_area .fv-right .fv-right_img .img-area .slideshow-nav {
    display: flex;
    gap: 12px;
    z-index: 10;
    align-items: center;
    height: fit-content;
    margin-top: 32px;
}

.fv_area .fv-right .fv-right_img .img-area .nav-dot {
    width: 12px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    border: 2px solid #102a6b;
    background: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
    position: relative;
}

.fv_area .fv-right .fv-right_img .img-area .nav-dot:hover {
    background: #eee;
    transform: scale(1.1);
}

.fv_area .fv-right .fv-right_img .img-area .nav-dot.active {
    transform: origin-center;
    width: 15px;
    /* box-shadow: 0 0 0 1px #102a6b; */
}

.fv_area .fv-right .fv-right_img .img-area .nav-dot.active::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70%;
    aspect-ratio: 1 / 1;
    background-color: #102a6b;
    border-radius: 50%;
}

.fv_area .fv-right .fv-right_img .img-area .nav-dot::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% + 8px);
    height: calc(100% + 8px);
    background: url(../img/bg_tx.webp) #ddd repeat center/cover;
    border-radius: 50%;
    z-index: -1;
}

.fv_area .fv-right .fv-right_img .img-area img {
    width: 80%;
    height: auto;
    object-fit: contain;
}

/* ==================================================
   main-txt
================================================== */
.fv-right_txt {
    width: 100%;
    padding-top: 66dvh;
    padding-bottom: 25dvh;
    position: relative;
}

.fv-right_txt .main-txt {
    line-height: 1.2em;
    font-weight: 700;
    color: #102a6b;
    width: fit-content;
    margin: 0 auto;
    letter-spacing: .1em;
    text-align: left;
    font-size: var(--fs-xl);
}

.fv-right_txt .main-txt span {
    display: block;
    position: relative;
    opacity: 0;
    transition: opacity 0.3s ease-out;
    padding: 1em 1em;
    margin-bottom: 1em;
    width: fit-content;
}

.fv-right_txt .main-txt span:last-child {
    color: #fefefe;
    line-height: 1.4;
    font-size: var(--fs-2xl);
}

.fv-right_txt .main-txt span::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background: url(../img/bg_tx.webp) #ddd repeat center/cover;
    background-size: 150px;
    z-index: -1;
    transition: .3s;
}

.fv-right_txt .main-txt span:last-child::after {
    background: none;
}

/* spanのアニメーション用クラス */
.fv-right_txt .main-txt span.span-visible {
    opacity: 1 !important;
}

.fv-right_txt .main-txt span.span-visible::after {
    width: 100%;
}


/* ==================================================
   section
================================================== */
section.what_is-moteru,
section.moteru-client,
.moteru-function-wrapper {
    width: 100%;
    position: relative;
    top: 0;
    left: 0;
    padding: 40px 0
}

.s-title {
    margin-left: 2em;
}

.s-title h2 {
    line-height: 1.4;
    color: #102a6b;
    width: fit-content;
    height: fit-content;
    font-weight: 900;
    font-size: var(--fs-h2);
}

.s-title h2 span {
    height: 1em;
}

.s-title h2 span small {
    vertical-align: bottom;
    display: inline-block;
    margin: 0 .025em;
    line-height: 1;
}

.s-title h2 span img {
    object-fit: contain;
    height: 1.2em;
    vertical-align: bottom;
    display: inline-block;
    margin: 0 .2em;
}

.s-title p.c-liquid {
    width: 200px;
    border-radius: 999px;
    overflow: hidden;
    margin-top: 0.25em;
}

.s-title p.c-liquid a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    width: 100%;
    height: 100%;
    font-size: var(--fs-sm);
    transition: .3s;
}

.s-title p.c-liquid a:hover {
    color: #fff;
}

.s-title p.c-liquid a span {
    display: inline-block;
    margin-left: 1.2em;
    height: .5em;
    background-color: #3983FD;
    border-radius: 50%;
    aspect-ratio: 1 / 1;
    position: relative;
    transition: .3s;
}

.s-title p.c-liquid a span::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background-color: #3983FD;
    z-index: -1;
    border-radius: 50%;
    transition: .6s;
}

.s-title p.c-liquid a:hover span::after  {
    height: 500px;
    width: 500px;
}

/* ==================================================
   what_is-moteru
================================================== */
section.what_is-moteru .s-title {
    position: sticky;
    top: 0;
    left: 0;
    height: 100dvh;
    padding-top: 92px;
    width: 50%;
    z-index: 9;
}

section.what_is-moteru .s-wrapper {
    padding-bottom: 24px;
}

section.what_is-moteru .s-wrapper .s-wrapper-content {
    display: flex;
    width: 100%;
    height: 100%;
    gap: 24px;
    justify-content: space-between;
    align-items: flex-end;
    padding-top: 33dvh;
}

section.what_is-moteru .s-wrapper .s-wrapper-content:nth-child(1) {
    padding-top: 0;
}

section.what_is-moteru .s-wrapper .s-wrapper-content .s-wrapper-content-left {
    width: 50%;
    height: calc(100dvh - 92px - 30dvh);
    border-radius: 16px;
    position: sticky;
    bottom: 8px;
    overflow: hidden;
}

section.what_is-moteru .s-wrapper .s-wrapper-content .s-wrapper-content-left .content-left-bg {
    width: 100%;
    height: 100%;
    background: 
    linear-gradient(
        -45deg, 
        #c5e7f7ee,
        #fcfcfcee,
        #c5e7f7ee
    );
    background-size: 150% 150%, 400% 400%;
    background-repeat: no-repeat; /* 光沢が繰り返されないように設定 */
    animation: glossyEffect 30s ease infinite;
    scale: 1.5;
    z-index: 1;
}

section.what_is-moteru .s-wrapper .s-wrapper-content .s-wrapper-content-left .loop-txt {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    display: flex;
    align-items: flex-end;
    font-size: var(--fs-hero);
}

section.what_is-moteru .s-wrapper .s-wrapper-content .s-wrapper-content-left .loop-txt .looptxt {
    font-weight: 900;
    color: #ffffffee;
    white-space: nowrap;
    animation: scrollText 60s linear infinite;
    line-height: 1;
}

@keyframes scrollText {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(-100%);
    }
}

section.what_is-moteru .s-wrapper .s-wrapper-content .s-wrapper-content-left svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
    height: auto;
    z-index: 1;
}

section.what_is-moteru .s-wrapper .s-wrapper-content .s-wrapper-content-right {
    width: 50%;
    min-height: calc(100dvh - 92px);
    height: fit-content;
    border-radius: 16px;
    position: sticky;
    top: 92px;
    overflow: hidden;
}

section.what_is-moteru .s-wrapper .s-wrapper-content .s-wrapper-content-right .content-wrapper {
    width: 100%;
    height: 100%;
    min-height: calc(100dvh - 92px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    color: #102a6b;
}

section.what_is-moteru .s-wrapper .s-wrapper-content .s-wrapper-content-right .content-wrapper .problem,
section.what_is-moteru .s-wrapper .s-wrapper-content .s-wrapper-content-right .content-wrapper .solution {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

section.what_is-moteru .s-wrapper .s-wrapper-content .s-wrapper-content-right .content-wrapper .problem {
    width: 100%;
    height: fit-content;
    position: relative;
    top: 0;
    left: 0;
    padding-top: 24px;
    gap: 16px;
    padding-bottom: 24px;
}

section.what_is-moteru .s-wrapper .s-wrapper-content .s-wrapper-content-right .content-wrapper .problem::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    background-color: #102a6b;
    height: calc(100% + 24px);
    width: 100%;
    z-index: -1;
    clip-path: polygon(0 0, 100% 0, 100% 90%, 50% 100%, 0 90%);
}

section.what_is-moteru .s-wrapper .s-wrapper-content .s-wrapper-content-right .content-wrapper .solution {
    width: 100%;
    flex-grow: 1;
    padding: 32px 0 16px;
    gap: 24px;
    justify-content: space-evenly;
    container-type: inline-size;
}

section.what_is-moteru .s-wrapper .s-wrapper-content .s-wrapper-content-right .content-wrapper .problem h4 {
    color: #fff;
    /* font-size: var(--fs-lg); */
    font-size: clamp(1.25rem, 1.0rem + 1.5cqw, 2cqw);
}

section.what_is-moteru .s-wrapper .s-wrapper-content .s-wrapper-content-right .content-wrapper .problem p,
section.what_is-moteru .s-wrapper .s-wrapper-content .s-wrapper-content-right .content-wrapper .solution p {
    background-color: #ddd;
    border-radius: 8px;
    color: #102a6b;
    padding: .5em 1.25em;
    width: fit-content;
    max-width: 95%;
    margin: 0 auto;
    /* font-size: var(--fs-sm); */
}

section.what_is-moteru .s-wrapper .s-wrapper-content .s-wrapper-content-right .content-wrapper .problem p {
    font-size: clamp(.8rem, 1.0rem + .5cqw, 1.25cqw);
}

section.what_is-moteru .s-wrapper .s-wrapper-content .s-wrapper-content-right .content-wrapper .solution p {
    font-size: clamp(1rem, 1.25rem + 1cqw, 1.25cqw);
}


section.what_is-moteru .s-wrapper .s-wrapper-content .s-wrapper-content-right .content-wrapper .solution h3 {
    line-height: 1.6;
    width: fit-content;
    margin: 0 auto;
    font-size: clamp(1.25rem, 1.0rem + 2.5cqw, 6cqw);
}

section.what_is-moteru .s-wrapper .s-wrapper-content .s-wrapper-content-right .content-wrapper .solution h3 span {
    color: #3983FD;
    position: relative;
    font-size: 1.2em;
}

section.what_is-moteru .s-wrapper .s-wrapper-content .s-wrapper-content-right .content-wrapper .solution h3 span::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: #3983FD;
    height: 2px;
    width: 100%;
}

section.what_is-moteru .s-wrapper .s-wrapper-content .s-wrapper-content-right .content-wrapper .solution p.exp {
    background-color: transparent;
}

/* ==================================================
   moteru-client
================================================== */
section.moteru-client {
    height: 100dvh;
    padding-top: 92px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    /* align-items: center; */
    padding-bottom: 16px;
}

section.moteru-client .s-title {
    padding: 40px 0;
}

section.moteru-client .s-title h2 span,
section.moteru-function .s-title h2 span,
section.moteru-pricing .s-title h2 span {
    font-weight: 900;
    color: #3983FD;
    display: inline-block;
    margin: 0 0.05em;
    line-height: 1;
    font-size: 1.2em;
}

/* ==================================================
   GSAP スライダーカルーセル
================================================== */
.s-slider-wrapper {
    width: 100%;
    height: 100%;
    padding: 40px 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 16px;
}

.slider-top,
.slider-bottom {
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.slider {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    width: max-content;
    will-change: transform;
    height: 100%;
}

.slide-item {
    flex: 0 0 auto;
    padding: 0 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: auto;
    aspect-ratio: 8 / 5;
    margin: 8px;
}

.slide-item img {
    object-fit: contain;
    width: 100%;
}

/* ==================================================
   moteru-function
================================================== */

.moteru-function-wrapper {
    padding-top: 0;
    /* margin: 80px 0; */
}

/* セクション全体とタイトルのスタイル（任意） */
.moteru-function {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100vh;
    padding: 12vh 0 24px;
    justify-content: space-around;
}

.moteru-function .s-title {
    text-align: center;
}


.horizontal-scroll-wrapper {
    flex-grow: 1;
    max-height: 60vh;
    /* overflow: hidden; */
}

/* スライドを横に並べるコンテナ(ul) */
.horizontal-scroll-container {
    display: flex; /* liを横並びにする */
    flex-wrap: nowrap; /* 折り返さない */
    height: 100%;
    width: 320dvw; 
    padding-left: 50dvw;
    gap: 80px;
}

/* 各スライド(li) */
.horizontal-slide {
    width: 44dvw;
    height: 100%;
    flex-shrink: 0;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    box-sizing: border-box;
    border-radius: 16px;
    flex-direction: column;
    padding: 0 .75em .75em;
}

.horizontal-slide h3 {
    line-height: 1.4;
    color: #102a6b;
    width: 100%;
    height: fit-content;
    margin-bottom: .25em;
    font-weight: 700;
    position: relative;
    top: 0;
    left: 0;
    padding:  .5em 0;
    text-align: center;
    font-size: clamp(1.25rem, 1.0rem + 2cqw, 3cqw);
}

.horizontal-slide h3::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: #102a6b;
    height: 2px;
    width: calc(100% - 16px);
}

.horizontal-slide h3 span {
    display: inline-block;
    font-size: 1.5em;
    margin-right: .25em;
    letter-spacing: 0em;
    font-weight: 900;
}

.horizontal-slide p {
    line-height: 1.8;
    color: #102a6b;
    margin: 0 auto;
    font-weight: 500;
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    letter-spacing: .075em;
    padding: 0 1.5em;
    font-size: var(--fs-base);
    font-size: clamp(.8rem, 1.25rem + 1cqw, 1.25cqw);

}

.horizontal-slide p span small {
    color: #102a6b;
    font-size: 0.8em;
}

/* ==================================================
   moteru-pricing
================================================== */
section.moteru-pricing {
    height: 100%;
    padding-top: 88px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 64px;
}

section.moteru-pricing .s-title {
    padding: 40px 0;
    margin-left: 0;
}

.pricing-card {
    flex:1;
    width: 100%;
    height: 100%;
}

.pricing-card .img-area {
    width: 100%;
    height: 100%;
    max-width: 1000px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

.pricing-card .img-area img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ==================================================
   moteru-flow
================================================== */
section.moteru-flow {
    position: relative;
    top: 0;
    left: 0;
    z-index: 0;
    padding-top: 80px;
    padding-bottom: 80px;
}

section.moteru-flow::before {
    content: "";
    position: absolute;
    z-index: -1;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    width: 100dvw;
    height: 100%;
    border-radius: 24px;
    box-shadow: 0 0 40px #102a6b;
    background: 
        /* (2a) 上層：光沢を表現するハイライト */
        radial-gradient(
            circle at 10% 20%,
            rgba(255, 255, 255, 0.4) 0%,
            rgba(255, 255, 255, 0) 25%
        ),
        /* (2b) 下層：ベースとなる4色のグラデーション */
        linear-gradient(
            -45deg, 
            #5ca9ff, 
            #102a6b, 
            #3983fd, 
            #1d5fd6
        );
    background-size: 150% 150%, 400% 400%;
    background-repeat: no-repeat; 
    animation: glossyEffect 30s ease infinite;
}

section.moteru-flow .s-title {
    margin-left: 0;
}

section.moteru-flow .s-title h2 {
    width: fit-content;
    margin: 0 auto 40px;
    color: #f5f5f5;
}

section.moteru-flow .flow-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 40px;
}

section.moteru-flow .flow-wrapper .flow-content {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 80px;
    width: 100%;
}

section.moteru-flow .flow-wrapper .flow-content .flow-content-icon {
    flex-shrink: 0;
    width: 120px;
    height: 120px;
    box-shadow: 0 0 16px #102a6b;
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fdfdfd22;
    border: 2px solid #f0f0f088;
    overflow: hidden;
}

section.moteru-flow .flow-wrapper .flow-content .flow-content-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

section.moteru-flow .flow-wrapper .flow-content .flow-content-txt {
    line-height: 1.8;
    color: #f5f5f5;
    width: 40%;
    position: relative;
    top: 0;
    left: 0;
    font-size: var(--fs-base);
}

section.moteru-flow .flow-wrapper .flow-content .flow-content-txt p.step {
    letter-spacing: .1em;
    font-weight: 700;
    font-size: var(--fs-xs);
}

section.moteru-flow .flow-wrapper .flow-content .flow-content-txt p.flow-txt {
    font-weight: 700;
    letter-spacing: .075em;
}

section.moteru-flow .flow-wrapper .flow-content .flow-content-txt p.flow-txt span {
    font-weight: 400;
    display: block;
    font-size: var(--fs-sm);
}

/* ==================================================
   footer
================================================== */

footer .footer-wrapper {
    display: flex;
    padding: 10dvh 10dvw;
}

footer .footer-wrapper .footer-nav {
    width: 50%;
}

footer .footer-wrapper .footer-nav nav ul {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

footer .footer-wrapper .footer-nav nav ul li {
    width: 16em;
    text-align: center;
    border-radius: 8px;
    transition: .6s;
}

footer .footer-wrapper .footer-nav nav ul li:hover {
    background-color: #1d5fd6;
    scale: 1.2;
    font-weight: 900;
}

footer .footer-wrapper .footer-nav nav ul li a {
    color: #102a6b;
    transition: .6s;
    width: 100%;
    height: 100%;
    padding: 16px;
    display: block;
}

footer .footer-wrapper .footer-nav nav ul li:hover a {
    color: #fefefe;
}

footer .footer-wrapper .footer-contact-wrapper {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

footer .footer-wrapper .footer-contact {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    border-radius: 24px;
    padding: 24px;
    flex-grow: 1;
}

footer .footer-wrapper .footer-contact-wrapper .footer-tel {
    width: 100%;
}

footer .footer-wrapper .footer-contact h3,
footer .footer-wrapper .footer-contact .contact-box .s-title p a {
    color: #102a6b;
}

footer .footer-wrapper .footer-contact h3 {
    line-height: 1.2;
    margin-bottom: 16px;
    line-height: 1.6;
    font-size: var(--fs-base);
}

footer .footer-wrapper .footer-contact h3 span {
    font-weight: 700;
    display: inline-block;
    margin-bottom: .5em;
    font-size: var(--fs-lg);
}

footer .footer-wrapper .footer-contact h3 span.strong {
    font-size: 1.4em;
    font-weight: 900;
}

footer .footer-wrapper .footer-contact .contact-box {
    position: relative;
}

footer .footer-wrapper .footer-contact .contact-box .s-title {
    margin-left: 0;
}

footer .footer-wrapper .footer-contact .contact-box:hover .s-title p a {
    color: #fff;
}

footer .footer-coppy {
    padding: 32px 0;
    position: relative;
}

footer .footer-coppy::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    background: 
        /* (2a) 上層：光沢を表現するハイライト */
        radial-gradient(
            circle at 10% 20%,
            rgba(255, 255, 255, 0.4) 0%,
            rgba(255, 255, 255, 0) 25%
        ),
        /* (2b) 下層：ベースとなる4色のグラデーション */
        linear-gradient(
            -45deg, 
            #5ca9ff, 
            #102a6b, 
            #3983fd, 
            #1d5fd6
        );
    background-size: 150% 150%, 400% 400%;
    background-repeat: no-repeat; 
    animation: glossyEffect 30s ease infinite;
}

footer .footer-coppy .Privacy_Policy {
    text-align: center;
    font-weight: 200;
    font-size: var(--fs-xs);
    color: #fefefe;
}

footer .footer-coppy .Privacy_Policy p a {
    text-decoration: underline;
    color: #fefefe;
}

footer.contact-footer .footer-wrapper .footer-nav {
    width: 100%;
}

footer.contact-footer .footer-wrapper .footer-nav nav ul {
    display: flex;
    flex-direction: row;
    gap: 40px;
}

/* ==================================================
   page
================================================== */
.p-side-nav {
    width: 20dvw;
    height: calc(100dvh - 112px);
    position: sticky;
    top: 112px;
    left: 0px;
    border-radius: 16px;
    z-index: 9;
    min-width: 200px;
}

.p-side-nav nav {
    height: 100%
}

.p-side-nav nav ul {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    height: 100%;
    padding: 8px;
    gap: 8px;
}

.p-side-nav nav ul li {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.p-side-nav nav ul li a {
    display: block;
    width: 100%;
    height:100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #ddd;
    border-radius: 8px;
    transition: .3s;
    border: 1px solid #ddd;
    font-size: var(--fs-xs);
}

.p-side-nav nav ul li:hover a {
    background-color: #fff;
    border: 1px solid #3983FD;
    color: #3983FD;
}

.p-side-nav nav ul li a.active {
    background-color: #3983FD;
    color: #fff;
}

.p-side-nav nav ul li a p {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.p-side-nav nav ul li a p span {
    display: block;
    font-size: var(--fs-base);
    font-weight: 600;
}

main.page {
    margin-top: 10dvh;
    display: flex;
    gap: 8px;
}

.main-contents_wrapper {
    flex: 1;
    max-width: calc(100dvw - 208px);
    height: 100%;
    margin: 0 auto;
}

.main-contents_wrapper.top-main-contents {
    max-width: 100%;
    margin: 0 auto
}

.p-title {
    height: 33dvh;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    flex-direction: column;
    width: fit-content;
    margin: 0 auto;
    gap: 8px;
}

.p-title h1 {
    line-height: 1.4;
    color: #102a6b;
    width: fit-content;
    height: fit-content;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .2em;
    font-size: var(--fs-h1);
    font-weight: 900;
}

.p-title h1 span {
    height: 1em;
    display: inline-block;
    margin-left: .05em;
}

.p-title h1 span img {
    object-fit: contain;
    height: 1em;
}

.p-title p {
    width: fit-content;
    margin-left: auto;
    font-weight: 900;
    font-size: var(--fs-sm);
}

.p-title p span {
    width: 4em;
    height: 2px;
    display: inline-block;
    background-color: #102a6b;
    vertical-align: middle;
    margin: 0 4px;
}

/* ==================================================
   Contact Phone Info
================================================== */
.contact-phone-info {
    text-align: center;
    padding: 32px 16px;
    width: 100%;
    background: rgba(255, 255, 255, 0.6);
    border: 2px solid #3983FD;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.contact-phone-info .phone-label {
    font-size: var(--fs-lg);
    font-weight: 700;
    color: #102a6b;
}

.contact-phone-info .phone-number {
    display: block;
    font-weight: 900;
    color: #3983FD;
    text-decoration: none;
    margin: .25em 0;
    letter-spacing: 0.05em;
    transition: color 0.3s ease;
    font-size: var(--fs-xl);
}

.contact-phone-info .phone-number:hover {
    color: #1d5fd6;
}

.contact-phone-info .phone-hours {
    color: #102a6b;
    font-weight: 500;
    font-size: var(--fs-sm);
}

/* ==================================================
   page-what-is-moteru
================================================== */
.p-what_moteru-main_coppy {
    width: fit-content;
    margin: 0 auto;
}

.p-what_moteru-main_coppy p {
    line-height: 2.8em;
    font-weight: 400;
    font-size: var(--fs-base);
}

section.p-what_moteru-contents,
section.p-function-list {
    width: 100%;
    margin: 25dvh 0 0;
    position: relative;
    bottom: 0;
    left: 0;
}

section.p-what_moteru-contents .page-s-bg {
    position: sticky; 
    width: 100%;
    height: 100dvh;
    top: 0;
    left: 0;
    z-index: -1; /* コンテンツの下に隠す（必要であれば） */
}

section.p-what_moteru-contents .page-s-bg .page-s-bg-img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100dvh;
    height: 100%;
    display: flex;
    will-change: filter;
    align-items: center;
    justify-content: center;
}

section.p-what_moteru-contents .page-s-bg .page-s-bg-img img {
    object-fit: contain;
    width: 100%;
}

section.p-what_moteru-contents .p-what_moteru-contents-wrapper {
    display: flex;
    gap: 8px;
}

section.p-what_moteru-contents .p-what_moteru-contents-wrapper .wrapper-left,
section.p-what_moteru-contents .p-what_moteru-contents-wrapper .wrapper-right {
    width: 50%;
}

section.p-what_moteru-contents .p-what_moteru-contents-wrapper .wrapper-left {
    height: calc(100dvh - 112px);
    position: sticky;
    top: 112px;
    left: 0;
    border-radius: 16px;
    padding: 1em;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    background: linear-gradient(-45deg, #c5e7f7ee, #fcfcfcee, #c5e7f7ee);
    background-size: 150% 150%, 400% 400%;
    background-repeat: no-repeat;
    animation: glossyEffect 30s 
ease infinite;
}

section.p-what_moteru-contents .p-what_moteru-contents-wrapper .wrapper-left .s-title {
    /* color: #fefefe; */
    color: #102a6b;
    width: fit-content;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: .1em;
    margin: 0 auto;
    font-weight: 700;
    line-height: 1.2;
    font-size: var(--fs-h2);
}

section.p-what_moteru-contents .p-what_moteru-contents-wrapper .wrapper-left .s-title span {
    display: block;
    padding: .2em .2em;

}

section.p-what_moteru-contents .p-what_moteru-contents-wrapper .wrapper-left .s-title span:first-child {
    border: 2px solid #102a6b;
}

section.p-what_moteru-contents .p-what_moteru-contents-wrapper .wrapper-left .s-title > span + span {
    border-top: 2px solid #102a6b;
    border-right: 2px solid #102a6b;
    border-bottom: 2px solid #102a6b;
}

section.p-what_moteru-contents .p-what_moteru-contents-wrapper .wrapper-left .read-coppy {
    color: #102a6b;
    font-weight: 700;
    line-height: 1.6;
    display: flex;
    justify-content: center;
    background-color: #eee;
    padding: 1em .5em;
    width: 100%;
    border-radius: 8px;
    font-size: var(--fs-lg);
    box-shadow: .25em .25em 0 0 #102a6b;
}

section.p-what_moteru-contents .p-what_moteru-contents-wrapper .wrapper-left .txt {
    color: #102a6b;
    font-weight: 500;
    line-height: 1.8;
    font-size: clamp(.8rem, 1.0rem + .5cqw, 1.25cqw);
}

section.p-what_moteru-contents .p-what_moteru-contents-wrapper .wrapper-right { 
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
    justify-content: center;
}

section.p-what_moteru-contents .p-what_moteru-contents-wrapper .wrapper-right .content-box {
    flex-grow: 1;
    width: 100%;
    height: 100%;
    min-height: calc((100dvh - 112px - 16px) / 2);
    border-radius: 16px;
    padding: 1em;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5em;
}

section.p-what_moteru-contents .p-what_moteru-contents-wrapper .wrapper-right .content-box h4.subheading {
    color: #102a6b;
    font-weight: 700;
    line-height: 1.4;
    font-size: var(--fs-lg);
    text-align: center;
}

section.p-what_moteru-contents .p-what_moteru-contents-wrapper .wrapper-right .content-box p {
    line-height: 1.8em;
    color: #102a6b;
    letter-spacing: .075em;
    font-weight: 500;
    font-size: var(--fs-sm);
}

section.p-what_moteru-contents .p-what_moteru-contents-wrapper .wrapper-right .content-box .txt > p + p {
    margin-top: .5em;
}

section.p-what_moteru-contents .p-what_moteru-contents-wrapper .wrapper-right .content-box span {
    color: #102a6b;
}

/* ==================================================
   page-functions of moteru
================================================== */
.p-function-list-wrapper {
    display: flex;
    gap: 8px;
    width: 100%;
    height: 100%;
    min-height: calc(100dvh - 112px);
    flex-wrap: wrap;
    margin: 24px 0;
}

/* 子要素の共通スタイル */
.p-function-list-wrapper div {
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
  gap: 16px;
  padding: 1em;
  width: calc(50% - 4px);
  flex-grow: 1;
  min-height: calc((100dvh - 88px) / 3);
}

.p-function-list-wrapper div h3.fv-subheading {
    font-size: clamp(1.25rem, 1.0rem + 1.5cqw, 2cqw);
}

.p-function-list-wrapper div p {
    font-size: var(--fs-base);
    line-height: 1.8;
    flex-grow: 1;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    font-size: clamp(.8rem, 1.0rem + .5cqw, 1.25cqw);
}

.p-functions-creation_management {
    margin: 80px auto; 
    border-radius: 16px;
    padding: 40px 16px;
}

.p-functions-creation_management h2.p-s-title {
    color: #102a6b;
    font-weight: 900;
    line-height: 1.4;
    padding-left: 1em;
    margin-bottom: 1em;
    font-size: var(--fs-2xl);
    letter-spacing: .05em;
}

.p-functions-creation_management dl {
    width: 100%;
    display: flex;
    gap: 24px;
    flex-direction: column;
}

.p-functions-creation_management dl .list-wrapper {
    display: flex;
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    background-color: #ddd;
    color: #102a6b;
}

.p-functions-creation_management dl dt,
.p-functions-creation_management dl dd {
    padding: 24px 16px;
}

.p-functions-creation_management dl dt {
    width: 30%;
    font-weight: 700;
    color: #102a6b;
    border-left: 12px solid #102a6b;
    font-size: var(--fs-base);
    letter-spacing: .025em;
}

.p-functions-creation_management dl dd {
    width: 70%;
    position: relative;
    top: 0;
    left: 0;
    font-size: var(--fs-sm);
}

.p-functions-creation_management dl dd::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    background-color: #3983FD;
    height: 80%;
    width: 2px;
    transform: translateY(-50%);
}

/* ==================================================
   page-case-study
================================================== */
.page .main-contents_wrapper section.moteru-client {
    width: 100%;
}

.page .main-contents_wrapper section.moteru-client .txt {
    display: flex;
    align-items: center;
    justify-content: center;
}

.page .main-contents_wrapper section.moteru-client .txt h2 {
    line-height: 1.4;
    color: #102a6b;
    width: fit-content;
    height: fit-content;
    margin: 10dvh 0;
    font-size: var(--fs-xl);
}

.page .main-contents_wrapper section.moteru-client .txt h2 span {
    display: inline-block;
    font-weight: 900;
    margin: .05em;
    position: relative;
    font-size: 1.5em;
}

.page .main-contents_wrapper section.moteru-client .txt h2 span::after {
    content:"";
    position: absolute;
    width: 100%;
    height: .3em;
    bottom: .15em;
    left: 0;
    background-color: #3983FD;
    z-index: -1;
}

.page .main-contents_wrapper section.client-contents {
    width: 100%;
    background-color: #ffffffdd;
    padding: 80px 24px;
}

.page .main-contents_wrapper section.client-contents .case-line {
    display: flex;
    width: 100%;
}

.page .main-contents_wrapper section.client-contents .case-line .case-line-left {
    width: 10%;
    padding: 0;
    border-bottom: 1px solid #3983FD;
}

.page .main-contents_wrapper section.client-contents .case-line .case-line-left p {
    font-weight: 200;
    text-align: center;
    color: #3983FD;
    font-size: var(--fs-xs);
}

.page .main-contents_wrapper section.client-contents .case-line .case-line-left p span {
    display: inline-block;
    font-weight: 200;
    margin-left: 0;
    letter-spacing: -.025em;
    font-size: 2em;
}

.page .main-contents_wrapper section.client-contents .case-line .case-line-right {
    flex-grow: 1;
    border-top: 1px solid #3983FD;
    border-left: 1px solid #3983FD;
}

.page .main-contents_wrapper section.client-contents .clinet-content {
    padding-left: calc(10% + 24px);
}

.page .main-contents_wrapper section.client-contents .clinet-content h3 {
    font-weight: 900;
    margin-bottom: .05em;
    font-size: var(--fs-h2);
}

.page .main-contents_wrapper section.client-contents .clinet-content .client-b_a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    width: 100%;
    margin-bottom: 40px;
}

.page .main-contents_wrapper section.client-contents .clinet-content .client-b_a .client-before,
.page .main-contents_wrapper section.client-contents .clinet-content .client-b_a .client-after {
    padding: 1.5em 1em;
    width: 100%;
}

.page .main-contents_wrapper section.client-contents .clinet-content .client-b_a .client-before dl,
.page .main-contents_wrapper section.client-contents .clinet-content .client-b_a .client-after dl {
    display: flex;
    width: 100%;
}

.page .main-contents_wrapper section.client-contents .clinet-content .client-b_a .client-before dl dt,
.page .main-contents_wrapper section.client-contents .clinet-content .client-b_a .client-after dl dt {
    width: 30%;
    font-weight: 700;
    letter-spacing: .075em;
    margin-right: 1.2em;
}

.page .main-contents_wrapper section.client-contents .clinet-content .client-b_a .client-before dl dt {
    border-right: 2px solid #102a6b;
    font-size: var(--fs-base);
}

.page .main-contents_wrapper section.client-contents .clinet-content .client-b_a .client-after dl dt {
    border-right: 2px solid #fefefe;
    font-size: var(--fs-lg);
}

.page .main-contents_wrapper section.client-contents .clinet-content .client-b_a .client-before dl dd,
.page .main-contents_wrapper section.client-contents .clinet-content .client-b_a .client-after dl dd {
    width: 70%;
    line-height: 1.8;
    font-weight: 500;
    font-size: var(--fs-sm);
}

.page .main-contents_wrapper section.client-contents .clinet-content .client-b_a .client-before {
    background-color: #ddd;
}

.page .main-contents_wrapper section.client-contents .clinet-content .client-b_a .client-after {
    background-color: #3983FD;
    color: #fefefe;
}

.page .main-contents_wrapper section.client-contents .clinet-content .client-table p.content-title {
    font-weight: 700;
    font-size: var(--fs-lg);
    text-align: center;
    margin-top: 1.5em;
    margin-bottom: 1em;
}

.page .main-contents_wrapper section.client-contents .clinet-content .client-table .table-wrapper {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
}

.page .main-contents_wrapper section.client-contents .clinet-content .client-table .table-wrapper .tabele-grid-area {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: repeat(5, 1fr);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
}

.page .main-contents_wrapper section.client-contents .clinet-content .client-table .table-wrapper .tabele-grid-area .content1 { grid-area: 1 / 1 / 2 / 2; }
.page .main-contents_wrapper section.client-contents .clinet-content .client-table .table-wrapper .tabele-grid-area .content2 { grid-area: 1 / 2 / 2 / 4; }
.page .main-contents_wrapper section.client-contents .clinet-content .client-table .table-wrapper .tabele-grid-area .content3 { grid-area: 1 / 4 / 2 / 6; }
.page .main-contents_wrapper section.client-contents .clinet-content .client-table .table-wrapper .tabele-grid-area .content4 { grid-area: 1 / 6 / 2 / 8; }
.page .main-contents_wrapper section.client-contents .clinet-content .client-table .table-wrapper .tabele-grid-area .content5 { grid-area: 2 / 1 / 3 / 2; }
.page .main-contents_wrapper section.client-contents .clinet-content .client-table .table-wrapper .tabele-grid-area .content6 { grid-area: 2 / 2 / 3 / 4; }
.page .main-contents_wrapper section.client-contents .clinet-content .client-table .table-wrapper .tabele-grid-area .content7 { grid-area: 2 / 4 / 3 / 6; }
.page .main-contents_wrapper section.client-contents .clinet-content .client-table .table-wrapper .tabele-grid-area .content8 { grid-area: 2 / 6 / 3 / 8; }
.page .main-contents_wrapper section.client-contents .clinet-content .client-table .table-wrapper .tabele-grid-area .content9 { grid-area: 3 / 1 / 4 / 2; }
.page .main-contents_wrapper section.client-contents .clinet-content .client-table .table-wrapper .tabele-grid-area .content10 { grid-area: 3 / 2 / 4 / 4; }
.page .main-contents_wrapper section.client-contents .clinet-content .client-table .table-wrapper .tabele-grid-area .content11 { grid-area: 3 / 4 / 4 / 6; }
.page .main-contents_wrapper section.client-contents .clinet-content .client-table .table-wrapper .tabele-grid-area .content12 { grid-area: 3 / 6 / 4 / 8; }
.page .main-contents_wrapper section.client-contents .clinet-content .client-table .table-wrapper .tabele-grid-area .content13 { grid-area: 4 / 1 / 5 / 2; }
.page .main-contents_wrapper section.client-contents .clinet-content .client-table .table-wrapper .tabele-grid-area .content14 { grid-area: 4 / 2 / 5 / 4; }
.page .main-contents_wrapper section.client-contents .clinet-content .client-table .table-wrapper .tabele-grid-area .content15 { grid-area: 4 / 4 / 5 / 6; }
.page .main-contents_wrapper section.client-contents .clinet-content .client-table .table-wrapper .tabele-grid-area .content16 { grid-area: 4 / 6 / 5 / 8; }
.page .main-contents_wrapper section.client-contents .clinet-content .client-table .table-wrapper .tabele-grid-area .content17 { grid-area: 5 / 1 / 6 / 2; }
.page .main-contents_wrapper section.client-contents .clinet-content .client-table .table-wrapper .tabele-grid-area .content18 { grid-area: 5 / 2 / 6 / 4; }
.page .main-contents_wrapper section.client-contents .clinet-content .client-table .table-wrapper .tabele-grid-area .content19 { grid-area: 5 / 4 / 6 / 6; }
.page .main-contents_wrapper section.client-contents .clinet-content .client-table .table-wrapper .tabele-grid-area .content20 { grid-area: 5 / 6 / 6 / 8; }

.page .main-contents_wrapper section.client-contents .clinet-content .client-table .table-wrapper .tabele-grid-area .tabele-content {
    border-bottom: 1px solid #102a6b;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px 32px;
    text-align: center;
    font-size: var(--fs-xs);
    white-space: nowrap;
}

.page .main-contents_wrapper section.client-contents .clinet-content .client-table .table-wrapper .tabele-grid-area .content2,
.page .main-contents_wrapper section.client-contents .clinet-content .client-table .table-wrapper .tabele-grid-area .content3,
.page .main-contents_wrapper section.client-contents .clinet-content .client-table .table-wrapper .tabele-grid-area .content4 {
    font-weight: 700;
    font-size: var(--fs-sm);
}

.page .main-contents_wrapper section.client-contents .clinet-content .client-table .table-wrapper .tabele-grid-area .content2,
.page .main-contents_wrapper section.client-contents .clinet-content .client-table .table-wrapper .tabele-grid-area .content6,
.page .main-contents_wrapper section.client-contents .clinet-content .client-table .table-wrapper .tabele-grid-area .content10,
.page .main-contents_wrapper section.client-contents .clinet-content .client-table .table-wrapper .tabele-grid-area .content14,
.page .main-contents_wrapper section.client-contents .clinet-content .client-table .table-wrapper .tabele-grid-area .content18 {
    background-color: #eee;
}

.page .main-contents_wrapper section.client-contents .clinet-content .client-table .table-wrapper .tabele-grid-area .content3,
.page .main-contents_wrapper section.client-contents .clinet-content .client-table .table-wrapper .tabele-grid-area .content7,
.page .main-contents_wrapper section.client-contents .clinet-content .client-table .table-wrapper .tabele-grid-area .content11,
.page .main-contents_wrapper section.client-contents .clinet-content .client-table .table-wrapper .tabele-grid-area .content15,
.page .main-contents_wrapper section.client-contents .clinet-content .client-table .table-wrapper .tabele-grid-area .content19 {
    border-right: 1px solid #102a6b;
    border-left: 1px solid #102a6b;
}

.page .main-contents_wrapper section.client-contents .clinet-content .client-table .table-wrapper .tabele-grid-area .content4 p,
.page .main-contents_wrapper section.client-contents .clinet-content .client-table .table-wrapper .tabele-grid-area .content15 p,
.page .main-contents_wrapper section.client-contents .clinet-content .client-table .table-wrapper .tabele-grid-area .content19 p {
    position: relative;
    width: 80%;
    font-weight: 700;
    z-index: 0;
    color: #3388ff;
    font-size: var(--fs-sm);
}

.page .main-contents_wrapper section.client-contents .clinet-content .client-table .table-wrapper .tabele-grid-area .content4 p:after,
.page .main-contents_wrapper section.client-contents .clinet-content .client-table .table-wrapper .tabele-grid-area .content15 p:after,
.page .main-contents_wrapper section.client-contents .clinet-content .client-table .table-wrapper .tabele-grid-area .content19 p:after {
    content: "";
    position: absolute;
    bottom: -.25em;
    left: 50%;
    width: 100%;
    height: 2px;
    z-index: -1;
    transform: translateX(-50%);
    background-color: #3388ff;
}

.page .main-contents_wrapper section.client-contents .clinet-content .client-table .table-wrapper .tabele-grid-area .content16 p,
.page .main-contents_wrapper section.client-contents .clinet-content .client-table .table-wrapper .tabele-grid-area .content20 p {
    position: relative;
    width: 100%;
    z-index: 0;
    color: #f5f5f5;
    font-weight: 700;
}

.page .main-contents_wrapper section.client-contents .clinet-content .client-table .table-wrapper .tabele-grid-area .content16 p::after,
.page .main-contents_wrapper section.client-contents .clinet-content .client-table .table-wrapper .tabele-grid-area .content20 p::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 95%;
    height: 150%;
    z-index: -1;
    transform: translate(-50%, -50%);
    background-color: #3388ff;
    border-radius: 999px;
} 



/* ========== 効果バッジのスタイル ========== */

.comparison-table .badge {
    display: inline-block;
    padding: 8px 15px;
    border-radius: 20px; /* 丸みを帯びた角 */
    font-weight: 700;
    color: #fff;
    background-color: #3388ff; /* 標準の青 */
    white-space: nowrap; /* テキストの改行を防ぐ */
}

.comparison-table .badge.efficiency {
    background-color: #007bff; /* 濃いめの青 */
    padding: 8px 12px;
}

/* ==================================================
   page-pricing
================================================== */
.page .main-contents_wrapper .pricing-card {
    height: 100dvh;
}
.page .main-contents_wrapper .p-pricing-comparison-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.page .main-contents_wrapper .p-pricing-comparison-wrapper h3 {
    line-height: 1.4;
    color: #102a6b;
    width: fit-content;
    height: fit-content;
    margin: 10dvh 0;
    font-size: var(--fs-xl);
}

.page .main-contents_wrapper .p-pricing-comparison-wrapper .comparison-box {
    width: 80dvw;
    background-color: #fff;
    border-radius: 24px;
    height: auto;
    padding: 24px 0;
}

.page .main-contents_wrapper .p-pricing-comparison-wrapper .comparison-box img {
    object-fit: contain;
    width: 100%;
    height: auto;
}

.page .main-contents_wrapper .pricing_options {
    width: 80dvw;
    margin: 80px auto;
}

.page .main-contents_wrapper .pricing_options .options-title {
    display: flex;
    gap: 24px;
    align-items: center;
}

.page .main-contents_wrapper .pricing_options .options-title h3 {
    letter-spacing: .1em;
    font-size: var(--fs-lg);
}

.page .main-contents_wrapper .pricing_options .options-title .title-line {
    flex-grow: 1;
    height: 2px;
    background-color: #102a6b;
}

.page .main-contents_wrapper .pricing_options .options-box {
    margin: 24px 0;
    border-radius: 24px;
    display: flex;
    justify-content: space-around;
    padding: 24px;
    gap: 16px;
}

.page .main-contents_wrapper .pricing_options .options-box .options-icon {
    width: 150px;
    height: 150px;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    border: 4px double #3388ff;
}

.page .main-contents_wrapper .pricing_options .options-box .options-icon img {
    width: 100px;
    height: 100px;
}

.page .main-contents_wrapper .pricing_options .options-box .options-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.8;
    font-size: var(--fs-base);
}

.page .main-contents_wrapper .pricing_options .options-box .options-text .options-price {
    text-align: right;
    font-weight: 700;
    font-size: var(--fs-lg);
}

.page .main-contents_wrapper .pricing_options .options-box .options-text p:nth-child(1) {
    font-weight: 700;
    margin-bottom: .25em;
    font-size: 1.1em;
}

/* ==================================================
   page-contact
================================================== */
main.contact-page .main-contents_wrapper {
    display: flex;
    align-items: flex-start;
    padding-top: 20dvh;
}

main.contact-page .main-contents_wrapper .p-title {
    position: sticky;
    top: 20dvh;
    height: fit-content;
    width: fit-content;
}

.contact-container {
    width: 50%;
    border-radius: 24px;
    padding: 56px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 32px;
}


.contact-container #contactForm {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 0 5%;
}

.contact-container #contactForm .form-group {
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 4px;
    padding: 8px;
    border-bottom: 1px solid #33333355;
}

.contact-container #contactForm .form-group span.hint {
    margin-top: .25em;
    display: inline;
}

.contact-container #contactForm .form-row {
    display: flex;
    gap: 16px;
    width: 100%;
}

.contact-container #contactForm .form-group label {
    width: 100%;
    font-weight: 700;
    letter-spacing: .075em;
    display: flex;
    align-items: center;
    gap: 0em;
    display: block;
    font-size: var(--fs-sm);
}

.contact-container #contactForm .form-group label span.required {
    font-weight: 400;
    color: #fefefe;
    background-color: #102a6b;
    border-radius: 4px;
    width: fit-content;
    vertical-align: top;
    font-weight: 400;
    padding: 0em .24em .15em;
    font-size: .8em;
}

.form-row .half {
    width: 50% !important;
}

.contact-container #contactForm .form-group input[type="text"],
.contact-container #contactForm .form-group input[type="tel"],
.contact-container #contactForm .form-group input[type="email"] {
    height: 2rem;
    border-radius: 4px;
    border: 1px solid #ddd;
    padding: 0 .25em;
    width: 100%;
}

.contact-container #contactForm .form-group input[type="text"]::placeholder,
.contact-container #contactForm .form-group input[type="tel"]::placeholder,
.contact-container #contactForm .form-group input[type="email"]::placeholder {
    color: #aaa;
    font-weight: 500;
}

.contact-container #contactForm .form-group textarea {
    height: 7em;
    padding: .25em;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.contact-container #contactForm .form-group textarea::placeholder {
    color: #aaa;
    font-weight: 500;
}

.contact-container #contactForm .form-group .checkbox-group .checkbox-label,
.contact-container #contactForm .form-group .recaptcha-box {
    display: flex;
    align-items: center;
    gap: 8px;
    user-select: none;
}

.contact-container #contactForm .form-group .checkbox-label a {
    display: inline-block;
    margin-right: .25em;
    text-decoration: underline;
}

/* 1. デフォルトのUIを非表示にする */
.checkbox-label input[type="checkbox"],
.recaptcha-box input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 1.2em;
  aspect-ratio: 1 / 1;
  border: 2px solid #102a6b;
  border-radius: 50%;
  vertical-align: middle;
  cursor: pointer;
  position: relative;
  transition: all 0.2s ease;
}

/* 6. チェックが入った時の「外枠」のスタイル */
.checkbox-label input[type="checkbox"]:checked,
.recaptcha-box input[type="checkbox"]:checked {
  border-color: #102a6b; /* 例: チェック時の枠線の色 */
}

/* 7. チェックが入った時の「中の丸」を作成 */
.checkbox-label input[type="checkbox"]:checked::before,
.recaptcha-box input[type="checkbox"]:checked::before {
  content: '';
  display: block;
  width: 70%; 
  height: 70%;
  background-color: #102a6b;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#contactForm button.btn-submit {
    width: fit-content;
    padding: 16px 48px;
    background-color: #102a6b;
    color: #fefefe;
    border: none;
    font-weight: 900;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    border: 2px solid #102a6b;
    margin-left: 16px;
}

#contactForm button.btn-submit:hover {
    background-color: #fefefe;
    color: #102a6b;
    border: 2px solid #102a6b;
}


/* ==================================================
   responsive
================================================== */
@media (max-width: 768px){

html {
    overflow-x: hidden;
}

.sp-indent {
    display: block;
}

.pc-indent {
    display: none;
}


header {
    position: fixed;
    top: 8px;
    /* left: 0; */
    width: 98dvw;
    padding: .25em 1.5em;
}

.bg .bg-geometry .square01 {
    width: 150%;
}

.bg .bg-geometry .square02 {
    width: 120%;
}

header .gnav .logo img {
    height: 18px;
}

header .gnav nav {
    /* margin-left: auto; */
    /* height: 100%; */
    width: auto;
}

header .gnav nav ul {
    /* display: flex; */
    /* height: 100%; */
    gap: 12px;
    /* width: 100%; */
    /* align-items: center; */
    /* justify-content: space-around; */
}

header .gnav nav ul li {
    width: 20%;
    height: 65%;
}

header .gnav nav ul li a::after {
    display: none;
}

header .gnav nav ul li a:hover::after {
    display: none;
}

header .gnav nav ul li a::before {
    display: none;
}
header .gnav nav ul li a.h-nav-what_is_moteru:hover::before,
header .gnav nav ul li a.h-nav-functions:hover::before,
header .gnav nav ul li a.h-nav-functions:hover::before,
header .gnav nav ul li a.h-nav-case_studies:hover::before,
header .gnav nav ul li a.h-nav-pricing:hover::before,
header .gnav nav ul li a.h-nav-contact:hover::before {
    display: none;
}

header .gnav nav ul li a:hover #what_x5F_is_x5F_moteru #circle .st0,
header .gnav nav ul li a:hover #what_x5F_is_x5F_moteru #body .st0,
header .gnav nav ul li a:hover #functions_moteru .st0,
header .gnav nav ul li a:hover #clients_moteru .st0 {
    fill: #3983fd;
    stroke-width: 16px;
}

header .gnav nav ul li a:hover #contact_moteru #body.st1 {
    fill: #3983fd;
    stroke-width: 16px;
}

header .gnav nav ul li a:hover #contact_moteru #line.st0 {
    stroke: #fff;
}


/* ==================================================
   sp-main
================================================== */
main {
    /* width: 100%; */
    /* margin: 0; */
    padding: 0 8px;
    /* position: relative; */
}

/* ==================================================
   sp-fv-area
================================================== */
.fv_area {
    display: block;
    padding-top: 30dvh;
}

.fv_area .title-area {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10dvh;
}

.fv_area .title-area h1 {
    line-height: 1.6;
    /* color: #102a6b; */
    /* width: fit-content; */
    /* height: fit-content; */
    transform: translateY(0);
    position: static;
    top: 0;
    left: 0;
    white-space: nowrap; /* <br>以外での折り返しを防止 */
    word-break: keep-all; /* 単語境界での改行を防止 */
    overflow-wrap: normal; /* 自動折り返しを無効化 */
}

.fv_area .title-area h1 span {
}

.fv_area .fv-right {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.fv_area .fv-right .fv-right_img {
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
}

.fv-right_txt {
    /* width: 100%; */
    padding-top: 20dvh;
    padding-bottom: 12dvh;
    padding-bottom: 5dvh;
    /* position: relative; */
}

.fv-right_txt .main-txt {
    line-height: 2.0;
    width: 100%;
    margin: 0 auto;
    letter-spacing: .05em;
    font-size: var(--fs-xs);
}

.fv-right_txt .main-txt span:last-child {
    font-size: 1.8em;
}


.fv-right_txt .main-txt span {
    display: block;
    opacity: 0;
    transform: translateY(.5em);
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

/* ==================================================
   section
================================================== */
.s-title {
    margin-left: 0;
}

.s-title h2 {
    line-height: 1.2;
    /* color: #102a6b; */
    width: 100%;
    /* height: fit-content; */
    text-align: center;
}

.s-title p.c-liquid {
    width: 160px;
    margin: 0 auto;
}

.s-title p.c-liquid a {
padding: 4px 8px;
}

.s-title p.c-liquid a span {
    margin-left: 1em;
}



/* ==================================================
   what_is-moteru
================================================== */
section.what_is-moteru .s-title {
    position: sticky;
    top: 0;
    left: 0;
    height: fit-content;
    padding-top: 0px;
    width: 100%;
    z-index: 9;
    margin-bottom: 24px;
}

section.what_is-moteru .s-title h2 {
    margin-bottom: 8px;
}

section.what_is-moteru .s-wrapper .s-wrapper-content {
    width: 100%;
    height: auto;
    flex-direction: column;
    gap: 24px;
    justify-content: space-between;
    align-items: flex-end;
    padding-top: 0dvh;
}

section.what_is-moteru .s-wrapper .s-wrapper-content .s-wrapper-content-left {
    width: 100%;
    height: calc(100dvh - 92px - 30dvh);
    /* border-radius: 16px; */
    /* position: sticky; */
    /* bottom: 8px; */
    /* overflow: hidden; */
}

section.what_is-moteru .s-wrapper .s-wrapper-content .s-wrapper-content-left .loop-txt .looptxt {
    /* font-weight: 900; */
    /* color: #ffffffee; */
    /* white-space: nowrap; */
    /* animation: scrollText 60s linear infinite; */
    /* line-height: 1; */
}

section.what_is-moteru .s-wrapper .s-wrapper-content .s-wrapper-content-left svg {
    /* position: absolute; */
    /* top: 50%; */
    /* left: 50%; */
    /* transform: translate(-50%, -50%); */
    width: 80%;
    /* height: auto; */
    /* z-index: 1; */
}

section.what_is-moteru .s-wrapper .s-wrapper-content .s-wrapper-content-right {
    width: 100%;
    height: 100%;
    /* border-radius: 16px; */
    position: statick;
    top: 0;
    /* overflow: hidden; */
    min-height: auto;
}

section.what_is-moteru .s-wrapper .s-wrapper-content .s-wrapper-content-right .content-wrapper {
    /* width: 100%; */
    /* height: 100%; */
    /* display: flex; */
    /* flex-direction: column; */
    gap: 64px;
    min-height: auto;
    /* position: relative; */
    /* color: #102a6b; */   
}

section.what_is-moteru .s-wrapper .s-wrapper-content .s-wrapper-content-right .content-wrapper .problem,
section.what_is-moteru .s-wrapper .s-wrapper-content .s-wrapper-content-right .content-wrapper .solution {
    /* display: flex; */
    /* flex-direction: column; */
    /* justify-content: center; */
    /* align-items: center; */
    gap: 16px;
    padding: 8px;
}

section.what_is-moteru .s-wrapper .s-wrapper-content .s-wrapper-content-right .content-wrapper .problem {
    /* width: 100%; */
    height: 50%;
}

section.what_is-moteru .s-wrapper .s-wrapper-content .s-wrapper-content-right .content-wrapper .problem::after {
    /* content: ""; */
    /* position: absolute; */
    /* top: 0; */
    /* left: 0; */
    /* background-color: #102a6b; */
    height: calc(100% + 48px);
    /* width: 100%; */
    /* z-index: -1; */
    /* clip-path: polygon(0 0, 100% 0, 100% 90%, 50% 100%, 0 90%); */
}

section.what_is-moteru .s-wrapper .s-wrapper-content .s-wrapper-content-right .content-wrapper .solution {
    width: 100%;
    height: 50%;
}

section.what_is-moteru .s-wrapper .s-wrapper-content .s-wrapper-content-right .content-wrapper .problem h4 {
    color: #fff;
}

section.what_is-moteru .s-wrapper .s-wrapper-content .s-wrapper-content-right .content-wrapper .problem p,
section.what_is-moteru .s-wrapper .s-wrapper-content .s-wrapper-content-right .content-wrapper .solution p {
    /* background-color: #ddd; */
    /* border-radius: 8px; */
    /* color: #102a6b; */
    padding: 4px 8px;
}

section.what_is-moteru .s-wrapper .s-wrapper-content .s-wrapper-content-right .content-wrapper .solution h3 {
    line-height: 1.6;
    width: fit-content;
    margin: 0 auto;
}



/* ==================================================
   moteru-client
================================================== */


section.moteru-client .s-title h2,
section.moteru-function .s-title h2,
section.moteru-pricing .s-title h2 {
    margin-bottom: 16px;
}

section.moteru-client .s-title h2 span,
section.moteru-function .s-title h2 span,
section.moteru-pricing .s-title h2 span {
    font-weight: 900;
    color: #3983FD;
}

.s-slider-wrapper {
    width: 100%;
    height: 100%;
    padding: 40px 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 16px;
}

.slider-top,
.slider-bottom {
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.slider {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    width: max-content;
    will-change: transform;
    height: 100%;
}

.slide-item {
    flex: 0 0 auto;
    padding: 0 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: auto;
    aspect-ratio: 8 / 5;
    margin: 8px;
}

.slide-item img {
    object-fit: contain;
    width: 100%;
}



/* ==================================================
   moteru-function
================================================== */

/* --------------- 横スクロールエリアのCSS --------------- */
.moteru-function-wrapper {
    margin: 24px 0 0;
}
/* セクション全体とタイトルのスタイル（任意） */
.moteru-function {
    position: relative;
    height: 100%;
}
.moteru-function .s-title {
    text-align: center;
    padding: 40px 0;
    margin-top: 24px;
}

.horizontal-scroll-wrapper {
    height: 100%;
    max-height: 100%;
}

/* スライドを横に並べるコンテナ(ul) */
.horizontal-scroll-container {
    /* display: flex; */
    /* flex-wrap: nowrap; */
    flex-direction: column;
    height: 100%;
    width: 100%; 
    padding-left: 0;
    gap: 24px;
    align-items: center;
    justify-content: center;
}

/* 各スライド(li) */
.horizontal-slide {
    width: 95dvw;
    padding: .5em;
}

.horizontal-slide h3 {
    margin-bottom: 8px;
    text-align: left;
}

.horizontal-slide h3 span {
    display: inline-block;
    margin-right: .1em;
    font-size: 1.2em;
}

.horizontal-slide p {
}

.horizontal-slide span small {
    color: #102a6b;
}

/* ==================================================
   moteru-pricing
================================================== */
section.moteru-pricing {
    height: 100%;
    padding-top: 88px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 88px;
}


/* ==================================================
   moteru-flow
================================================== */
section.moteru-flow {
    padding-top: 40px;
    padding-bottom: 40px;
}

section.moteru-flow::before {
    border-radius: 16px;
    box-shadow: 0 0 16px #102a6b77;
}


section.moteru-flow .flow-wrapper {
    gap: 40px;
}

section.moteru-flow .flow-wrapper .flow-content {
    gap: 24px;
    width: 100%;
}

section.moteru-flow .flow-wrapper .flow-content .flow-content-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    box-shadow: 0 0 0px #102a6b77;
    border-radius: 8px;
}

section.moteru-flow .flow-wrapper .flow-content .flow-content-txt {
    line-height: 1.4;
    width: 80%;
}

section.moteru-flow .flow-wrapper .flow-content .flow-content-txt p.flow-txt {
    letter-spacing: .075em;
    font-weight: 900;
}

section.moteru-flow .flow-wrapper .flow-content .flow-content-txt p.flow-txt span {
}

/* ==================================================
   footer
================================================== */

footer .footer-wrapper {
    flex-direction: column;
    gap: 40px;
}

footer .footer-wrapper .footer-nav {
    width: 100%;
}

footer .footer-wrapper .footer-nav nav ul {
    align-items: center;
    justify-content: center;
    gap: 24px;
}

footer .footer-wrapper .footer-nav nav ul li:hover {
    background-color: inherit;
    scale: 1;
}

footer .footer-wrapper .footer-nav nav ul li:hover a {
    color: #102a6b;
}

footer .footer-wrapper .footer-contact {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    border-radius: 24px;
    padding: 24px;
    flex-grow: 1;
}

footer .footer-wrapper {
    display: flex;
    padding: 10dvh 2dvw;
}


footer .footer-wrapper .footer-contact h3 {
}

footer .footer-wrapper .footer-contact h3 span {
}

footer .footer-wrapper .footer-contact h3 span.strong {
}

footer .footer-wrapper .footer-contact .contact-box {
    padding: 8px;
}

footer .footer-wrapper .footer-contact .contact-box:hover::after {
    width: 0;
}

/* ==================================================
   page
================================================== */
.p-side-nav {
    /* width: 20dvw; */
    /* height: calc(100dvh - 108px); */
    /* position: sticky; */
    /* top: 92px; */
    /* left: 16px; */
    /* border-radius: 16px; */
    /* z-index: 9; */
    display: none;
}

main.page {
    flex-direction: column;
}

.main-contents_wrapper {
    flex: 1;
    max-width: 100%;
    height: 100%;
    margin: 0 auto;
}

.p-title h1 {
    line-height: 1.4;
    color: #102a6b;
    width: 100%;
    height: fit-content;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: var(--fs-h2);
}

.p-title p {
    font-weight: 500;
}

.p-title p span {
    width: 3em;
    height: 2px;
}

/* ==================================================
   page-what_is_moteru
================================================== */
.p-what_moteru-main_coppy p {
    padding: 0;
    line-height: 2;
}

section.p-what_moteru-contents,
section.p-function-list {
    margin: 0dvh 0 0;
}

section.p-what_moteru-contents .page-s-bg {
    z-index: -1; /* コンテンツの下に隠す（必要であれば） */
}

section.p-what_moteru-contents .page-s-bg .page-s-bg-img {
    width: 100%;
}

section.p-what_moteru-contents .p-what_moteru-contents-wrapper {
    display: flex;
    gap: 24px;
    flex-direction: column;
    padding: 8px;
}

section.p-what_moteru-contents .p-what_moteru-contents-wrapper .wrapper-left,
section.p-what_moteru-contents .p-what_moteru-contents-wrapper .wrapper-right {
    width: 100%;
}

section.p-what_moteru-contents .p-what_moteru-contents-wrapper .wrapper-right .content-box {
    width: 100%;
    height: 100%;
    min-height: auto;
    padding: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5em;
}

section.p-what_moteru-contents .p-what_moteru-contents-wrapper .wrapper-right .content-box h4.subheading {
}

section.p-what_moteru-contents .p-what_moteru-contents-wrapper .wrapper-right .content-box p {
}

section.p-what_moteru-contents .p-what_moteru-contents-wrapper .wrapper-right .content-box span {
}


section.p-what_moteru-contents .p-what_moteru-contents-wrapper .wrapper-left {
    height: 100%;
    position: static;
    top: 0;
    left: 0;
    border-radius: 16px;
    padding: 16px;
}

section.p-what_moteru-contents .p-what_moteru-contents-wrapper .wrapper-left .s-title {
    /* color: #fefefe; */
    /* background-color: #3983FD; */
    width: fit-content;
    /* padding: .25em .5em; */
    letter-spacing: .1em;
    margin: 0 auto;
    font-weight: 900;
}

section.p-what_moteru-contents .p-what_moteru-contents-wrapper .wrapper-left .read-coppy {
    /* color: #102a6b; */
    /* font-weight: 900; */
    line-height: 1.6;
    /* background-color: #eee; */
    padding: .25em;
    /* border-radius: 8px; */
    width: 100%;
    margin: 16px 0;
}

section.p-what_moteru-contents .p-what_moteru-contents-wrapper .wrapper-left .txt {
    line-height: 1.6;
}

/* ==================================================
   page-functions of moteru
================================================== */
.p-function-list-wrapper {
    display: flex;
    gap: 8px;
    width: 100%;
    height: 100%;
    flex-wrap: wrap;
    margin: 24px 0;
}

.p-function-list-wrapper div {
  /* border-radius: 16px; */
  /* display: flex; */
  /* align-items: center; */
  justify-content: flex-start;
  flex-direction: column;
  gap: 16px;
  padding: 8px;
  width: 100%;
}


.p-function-list-wrapper div h3.fv-subheading {
}

.p-function-list-wrapper div p.txt {
}

.p-functions-creation_management h2.p-s-title {
    line-height: 1.4;
    padding-left: 0em;
    margin-bottom: .5em;
    margin-top: .25em;
    text-align: center;
}

.p-functions-creation_management dl .list-wrapper {
    flex-direction: column;
}

.p-functions-creation_management dl dt,
.p-functions-creation_management dl dd {
    padding: 12px 8px;
}

.p-functions-creation_management dl dt {
    width: 100%;
    font-weight: 700;
    color: #102a6b;
    border-left: none;
    border-top: 12px solid #102a6b;
    /* 改行処理 */
    word-break: keep-all;
    line-break: strict;
    overflow-wrap: break-word;
}

.p-functions-creation_management dl dd {
    width: 100%;
}

.p-functions-creation_management dl dd::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    background-color: #3983FD;
    height: 2px;
    width: 95%;
    transform: translateX(-50%);
}

/* ==================================================
   page-case-study
================================================== */
.page .main-contents_wrapper section.moteru-client {
    /* height: 100dvh; */
    padding-top: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    /* align-items: center; */
    padding-bottom: 16px;
}

.page .main-contents_wrapper section.moteru-client .txt h2 {
    line-height: 1.4;
    color: #102a6b;
    width: fit-content;
    height: fit-content;
    margin: 5dvh 0;
}

.page .main-contents_wrapper section.client-contents {
    width: 100%;
    background-color: #fff;
    padding: 40px 8px;
}

.page .main-contents_wrapper section.client-contents .case-line .case-line-left {
    width: fit-content;
    padding: 8px 8px 2px 12px;
}

.page .main-contents_wrapper section.client-contents .case-line .case-line-left p {
}

.page .main-contents_wrapper section.client-contents .case-line .case-line-left p span {
}

.page .main-contents_wrapper section.client-contents .clinet-content {
    padding-left: 0;
}


.page .main-contents_wrapper section.client-contents .clinet-content h3 {
}

/* .page .main-contents_wrapper section.client-contents .clinet-content .client-b_a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    width: 100%;
    margin-bottom: 40px;
} */

.page .main-contents_wrapper section.client-contents .clinet-content .client-b_a .client-before,
.page .main-contents_wrapper section.client-contents .clinet-content .client-b_a .client-after {
    padding: 16px 8px;
    /* width: 100%; */
}

.page .main-contents_wrapper section.client-contents .clinet-content .client-b_a .client-before dl,
.page .main-contents_wrapper section.client-contents .clinet-content .client-b_a .client-after dl {
    /* display: flex;
    width: 100%; */
    flex-direction: column;
}

.page .main-contents_wrapper section.client-contents .clinet-content .client-b_a .client-before dl dt,
.page .main-contents_wrapper section.client-contents .clinet-content .client-b_a .client-after dl dt {
    width: 100%;
    font-weight: 700;
    letter-spacing: .075em;
    margin-right: 0;
}

.page .main-contents_wrapper section.client-contents .clinet-content .client-b_a .client-before dl dt {
    border-right: none;
    border-bottom: 2px solid #102a6b;
}

.page .main-contents_wrapper section.client-contents .clinet-content .client-b_a .client-after dl dt {
    border-right: none;
    border-bottom: 2px solid #fefefe;
    letter-spacing: .1em;
}

.page .main-contents_wrapper section.client-contents .clinet-content .client-b_a .client-before dl dd,
.page .main-contents_wrapper section.client-contents .clinet-content .client-b_a .client-after dl dd {
    width: 100%;
    line-height: 1.8;
    font-weight: 500;
    padding-top: 1.5em;
}

.page .main-contents_wrapper section.client-contents .clinet-content .client-table p.content-title {
    /* font-weight: 900;
    text-align: center;
    margin-top: 1.5em;
    margin-bottom: 1em; */
}

.page .main-contents_wrapper section.client-contents .clinet-content .client-table .table-wrapper .tabele-grid-area .tabele-content {
    padding: 8px 0px;
}

.page .main-contents_wrapper section.client-contents .clinet-content .client-table .table-wrapper .tabele-grid-area .content2,
.page .main-contents_wrapper section.client-contents .clinet-content .client-table .table-wrapper .tabele-grid-area .content3,
.page .main-contents_wrapper section.client-contents .clinet-content .client-table .table-wrapper .tabele-grid-area .content4 {
    font-weight: 900;
}

.page .main-contents_wrapper section.client-contents .clinet-content .client-table .table-wrapper .tabele-grid-area .content2,
.page .main-contents_wrapper section.client-contents .clinet-content .client-table .table-wrapper .tabele-grid-area .content6,
.page .main-contents_wrapper section.client-contents .clinet-content .client-table .table-wrapper .tabele-grid-area .content10,
.page .main-contents_wrapper section.client-contents .clinet-content .client-table .table-wrapper .tabele-grid-area .content14,
.page .main-contents_wrapper section.client-contents .clinet-content .client-table .table-wrapper .tabele-grid-area .content18 {
    /* background-color: #eee; */
}

.page .main-contents_wrapper section.client-contents .clinet-content .client-table .table-wrapper .tabele-grid-area .content5,
.page .main-contents_wrapper section.client-contents .clinet-content .client-table .table-wrapper .tabele-grid-area .content9,
.page .main-contents_wrapper section.client-contents .clinet-content .client-table .table-wrapper .tabele-grid-area .content13,
.page .main-contents_wrapper section.client-contents .clinet-content .client-table .table-wrapper .tabele-grid-area .content17{
}

/* ==================================================
   page-pricing
================================================== */

.page .main-contents_wrapper .pricing-card {
    height: 30dvh;
}

.page .main-contents_wrapper .p-pricing-comparison-wrapper .comparison-box {
    width: 100%;
    border-radius: 8px;
    padding: 8px 0;
}

.page .main-contents_wrapper .pricing_options .options-title {
    gap: 16px;
}

.page .main-contents_wrapper .pricing_options .options-title h3 {
}

.page .main-contents_wrapper .pricing_options .options-box {
    flex-direction: column;
    align-items: center;
    padding: 8px;
}

.page .main-contents_wrapper .pricing_options .options-box .options-icon {
    width: 120px;
    height: 120px;
}

.page .main-contents_wrapper .pricing_options .options-box .options-icon img {
    width: 100px;
    height: 100px;
}

.page .main-contents_wrapper .pricing_options .options-box .options-text p:nth-child(1) {
    font-weight: 700;
    margin-bottom: .5em;
}


/* ==================================================
   page-contact
================================================== */

main.contact-page .main-contents_wrapper {
    /* display: flex; */
    /* align-items: flex-start; */
    /* padding-top: 20dvh; */
    flex-direction: column;
    gap: 32px;
}

main.contact-page .main-contents_wrapper .p-title {
    position: static;
    top: 0dvh;
    /* height: fit-content; */
    /* width: fit-content; */
}

.contact-container {
    width: 100%;
    /* border-radius: 24px; */
    padding: 32px 12px;
    /* display: flex; */
    /* align-items: center; */
    /* justify-content: center; */
}

.contact-container #contactForm {
    padding: 0;
}



footer.contact-footer .footer-wrapper .footer-nav nav ul {
    flex-direction: column;
    gap: 24px;
}










}