@charset "UTF-8";

/*==============================================================
Theme Name: uragentLP
Description: uragentLP
Version: 1.0
==============================================================*/

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    word-wrap: break-word;
}

html{
    background-color:#F5F5F5 ;
}

body{
	font-family: "Noto Sans JP", "Yu Gothic", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
    margin: 0 auto;
    text-align: center;
    max-width: 1000px;
    background-color:#F5F5F5 ;
    box-shadow: 0px 0px 20px 0px rgba(148, 112, 220, 0.1);
}


/*==============================================================

カラー・フォント・サイズ・隙間

==============================================================*/

:root {
    /*カラー定義 */
    --color-main: rgb(148, 112, 220);    /* メインカラー */
    --color-sub: #CAB9EC;     /* サブカラー */
    --color-point: #ECE2FF;   /* ポイントカラー */
    --color-base: #F5F5F5;    /* ベースカラー */
    --color-white: #FFFFFF;   /* ホワイト */
    --color-black: #372E41;   /* ブラック */

    /* 文字サイズ */
    --font-xsmall: clamp(10px, 1vw, 16px);
    --font-small: clamp(13px, 1.5vw, 18px);
    --font-medium: clamp(16px, 2.5vw, 23px);
    --font-large: clamp(20px, 2.5vw, 32px);
    --font-xl: clamp(23px, 2.5vw, 36px);
    --font-xxl: clamp(40px, 5vw, 72px);
    --font-menu: clamp(13px, 1.5vw, 16px);

    /* 文字の太さ */
    --font-regular: 400;
    --font-medium-weight: 500;
    --font-bold: 700;
  }

/* 文字色 */
.text-main { color: var(--color-main); }      /* メインカラー */
.text-sub { color: var(--color-sub); }       /* サブカラー */
.text-point { color: var(--color-point); }   /* ポイントカラー */
.text-base { color: var(--color-base); }     /* ベースカラー */
.text-white { color: var(--color-white); }   /* ホワイト */
.text-black { color: var(--color-black); }   /* ブラック */

/* 文字サイズ */
.font-xsmall { font-size: var(--font-xsmall); }  /* 10px */
.font-small { font-size: var(--font-small); }    /* 13px */
.font-medium { font-size: var(--font-medium); }  /* 16px */
.font-large { font-size: var(--font-large); }    /* 20px */
.font-xl { font-size: var(--font-xl); line-height: 1.5;}          /* 22px */
.font-xxl { font-size: var(--font-xxl);  line-height: 1.2;}        /* 40px */

/* 文字の太さ */
.font-regular { font-weight: var(--font-regular); }
.font-medium-weight { font-weight: var(--font-medium-weight); }
.font-bold { font-weight: var(--font-bold); }

/* 背景色クラス */
.bg-base { background-color: var(--color-base); }
.bg-white { background-color: var(--color-white); }

/* マージン系 */
.m-sm { margin: 1rem 0; }
.m-md { margin: 2rem 0; }
.m-lg { margin: 3rem 0; }
.m-bottom-60px{margin-bottom: 60px;}

/* パディング系 */
.p-sm { padding: 1rem 0; }
.p-md { padding: 2rem 0; }
.p-lg { padding: 3rem 0; }

/* 縦の隙間 隣接セレクタ　最初の要素には margin-top をつけず、2番目以降の要素にだけ margin-top をつける*/
.space-y-sm > * + * { margin-top: 1rem; display: block; /* flexの影響をなくす */}
.space-y-md > * + * { margin-top: 2rem; }
.space-y-lg > * + * { margin-top: 3rem; }

/* テキスト位置 */
.text-left{
    text-align: left;
}

.text-center{
    text-align: center;
}

.text-justify{
    text-align: justify;
}

/* 下線 */
.border-bottom {
    display: inline; /* インライン要素として適用 */
    border-bottom: 3px solid var(--color-main); /* 1行目・2行目両方に適用 */
}

@media (max-width: 480px) { /* スマホサイズ以下 */
    .hide-on-mobile {
        display: none;
    }
}

/*==============================================================

top

==============================================================*/

.top-image{
    width: clamp(90vw, 60vw, 500px);
    max-width: 500px;
    height: auto;
    display: block;
    margin: 0 auto;
    padding-bottom: 1rem;
  }

  .point-container {
    display: flex;
    justify-content: center;  /* 中央揃え */
    gap: 8px;  /* 画像間の余白 */
    flex-wrap: nowrap;  /* 折り返し禁止 */
    overflow-x: auto;  /* 画面が小さい場合はスクロール可 */
    margin: 20px 15px;
}


.point-image {
    max-width: 200px;
    width: 90%; /* 画像の幅を調整しやすく */
    height: auto;
}

/*==============================================================

button

==============================================================*/

.btn-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 1rem;
}

.btn {
    display: flex;
    flex-direction: row; /* 横並び */
    justify-content: center;
    align-items: center;
    gap: 6px;
    width: 90%;
    max-width: 450px;
    height: 66px;
    padding: 9px 20px;
    border-radius: 40px;
    background-color: var(--color-main);
    color: var(--color-white);
    text-decoration: none;
    overflow: hidden;
    font-weight: var(--font-bold);
    font-size: var(--font-medium);

}

.btn img {
    width: 30px;
    height: auto;
}

/*==============================================================

上部のタイトル区切りの丸角（白）

==============================================================*/

.section-wrapper {
    position: relative;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 60px 15px;
    border-radius: 40px 40px 0 0; /* 上角丸 */
    background: var(--color-base); /* 交互に背景色 */
    box-shadow: 0px -3px 0px 0px #CAB9EC;
}

.section-content{
    max-width: 800px;
    margin: 0 auto; /* センター配置 */
}

/*==============================================================

上部のタイトル区切りの丸角（紫）

==============================================================*/

.section-wrapper2 {
    position: relative;
    width: 100%;
    padding: 60px 15px;
    border-radius: 40px 40px 0 0; /* 上角丸 */
    background: var(--color-point); /* 次のセクションの背景色 */
}

/* セクション全体を中央揃え */
.section-content2 {
    max-width: 800px;
    margin: 0 auto; /* センター配置 */
}

/* セクション全体を囲む背景用のラッパー */
.section-bg {
    background: var(--color-point); /* 一つ前のセクションの背景色を継続 */
    width: 100%;
    /* padding-bottom: 40px; 角丸の下に余白を作る */
    border-radius: 0 0 40px 40px; /* 下の角を丸くする */
}


/*==============================================================

文字

==============================================================*/

.h2-main {
    line-height: 1.5; /* メインの見出しは少し広め */
    letter-spacing: 0.38px;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.p-main {
    line-height: 1.7;
    letter-spacing: 0.02em;
}

span.marker-purple {
    background: linear-gradient(transparent 0%, var(--color-sub) 80%);
}



/*==============================================================

上部の文字3つ

==============================================================*/
.badge-container {
    display: flex;
    justify-content: center; /* 横並びで中央配置 */
    align-items: center;
    gap: 6px; /* バッジの間隔 */
    flex-wrap: nowrap;  /* 折り返し禁止 */
}

.badge {
    display: flex;
    padding: 4px 16px;
    justify-content: center;
    align-items: center;
    border-radius: 40px;
    background: var(--color-sub); /* サブカラー */
    color: var(--color-black); /* 文字色 */
    font-size: var(--font-small); /* フォントサイズ */
    font-weight: var(--font-bold); /* 文字の太さ */
    white-space: nowrap; /* 文字が折り返されないようにする */
}

/*==============================================================

各社ロゴ配置

==============================================================*/
.image-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    max-width: 700px; /* PCでは700pxに制限 */
    width: 100%; /* デフォルトでは少し余白を確保 */
    margin: 0 auto; /* センター配置 */
    padding-top: 1rem;
}

.image-row {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: nowrap;  /* 折り返し禁止 */
    width: 100%; /* 親要素にフィット */
}

.image-row img {
    width: clamp(100px, 30vw, 250px); /* 画像サイズをレスポンシブ対応 */
    height: auto;
}

/*==============================================================

各セクションイメージ

==============================================================*/
.section-image{
    width: clamp(80vw, 60vw, 200px);
    max-width: 400px;
    height: auto;
    display: block;
    margin: 0 auto;
  }

.section-image2{
    width: clamp(60vw, 40vw, 100px);
    max-width: 300px;
    height: auto;
    display: block;
    margin: 0 auto;
}

/*==============================================================

アイコン横並び

==============================================================*/

.icon-text-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* 左揃えにする */
    width: 100%; /* 全体幅を最大限使う */
    max-width: 480px; /* 最大幅を制限（調整可能） */
    margin: 0 auto; /* 真ん中に配置 */
    gap: 8px;
}

.icon-text {
    display: flex;
    align-items: center; /* アイコンとテキストの高さを揃える */
    justify-content: flex-start; /* 左揃え */
    gap: 8px; /* アイコンとテキストの間隔 */
    text-align: left; /* テキストは左揃え */
    line-height: 1.3;
    letter-spacing: 0.02em;
}

.icon-text2 {
    display: flex;
    align-items: center; /* アイコンとテキストの高さを揃える */
    justify-content: flex-start; /* 左揃え */
    gap: 4px; /* アイコンとテキストの間隔 */
    text-align: left; /* テキストは左揃え */
    line-height: 1.3;
    letter-spacing: 0.02em;
    white-space: nowrap;
}



.icon {
    width: clamp(28px, 1.5em, 40px); /* 24px〜40pxの間でフォントサイズに応じて変動 */
    height: auto;
    min-width: 28px;
}

/* 親要素をセンター揃え */
.centered-wrapper {
    display: flex;
    justify-content: center; /* 中央配置 */
    width: 100%; /* 親要素の幅を広げる */
}

/*==============================================================

キラキラアイコン横並び

==============================================================*/
.heading-container {
    display: flex;
    align-items: center;
    justify-content: center; /* h2 を中央配置 */
    gap: 4px; /* アイコンとh2の間に余白 */
}

.shine {
    width: 40px; /* 必要に応じて調整 */
    height: auto;
}

/*==============================================================

吹き出し

==============================================================*/

/* 吹き出し全体のレイアウト */
.speech-container {
    display: flex;
    align-items: flex-start; /* アイコンと吹き出しの高さを揃える */
    gap: 24px; /* アイコンと吹き出しの間隔 */
    justify-content: center; /* 横方向の中央揃え */
}

/* アイコンのスタイル */
.avatar {
    width: 90px; /* 必要に応じて調整 */
    height: auto;
}

/* 吹き出しのスタイル */
.speech-bubble {
    position: relative;
    background: #fff;
    border-radius: 12px;
    padding: 12px 16px;
    max-width: 600px;
}

/* 吹き出しの先端（speech-bubble.svg） */
.speech-tail {
    position: absolute;
    left: -20px; /* アイコンの方向に飛び出す */
    top: 10px;
    width: 32px; /* サイズ調整 */
    height: auto;
}

/*==============================================================

tell部分

==============================================================*/
.tell-base{
    background: var(--color-point);
    border-radius: 16px;
}

/*==============================================================

step部分

==============================================================*/

.step-content{
    width: 90%; /* 全体幅を最大限使う */
    max-width: 480px; /* 最大幅を制限（調整可能） */
    margin: 0 auto; /* センター配置 */
}

.step-base{
    background: var(--color-base);
    border-radius: 16px;
}

.step-image{
    width: clamp(10vw, 30vw, 100px);
    max-width: 150px;
    height: auto;
    display: block;
    margin: 0 auto;
}
/*==============================================================

プライバシーポリシー

==============================================================*/

.privacy-wrapper {
    position: relative;
    width: 100%;
    padding: 40px 15px;
}

.icon-text3 {/* プライバシーポリシー */
    display: flex;
    align-items: center; /* アイコンとテキストの高さを揃える */
    justify-content: flex-start; /* 左揃え */
    gap: 2px; /* アイコンとテキストの間隔 */
    text-align: left; /* テキストは左揃え */
    line-height: 1.3;
    letter-spacing: 0.02em;
    margin-bottom: 0.2rem;
}

.icon2 {
    width: clamp(28px, 1.5em, 40px); /* 24px〜40pxの間でフォントサイズに応じて変動 */
    height: auto;
    min-width: 28px;
}

/*==============================================================

ヘッター

==============================================================*/
/* ===== ヘッダーの基本スタイル ===== */
/* ヘッダー */
.header {
    position: fixed; /* 固定表示 */
    top: 0;
    left: 0;
    width: 100%; /* 横幅いっぱいに */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 20px;
    z-index: 1000;
}

/* 内部のヘッダーコンテンツを中央に寄せる */
.header-container {
    max-width: 960px; /* ヘッダーの最大幅を設定 */
    width: 100%;
    margin: 0 auto; /* 中央寄せ */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

body {
    padding-top: 80px; /* ヘッダー高さ分の余白を確保 */
}

.nav-menu {
    display: flex;
    background-color: rgba( 255, 255, 255, 0.6 );
    border-radius: 20px; /* 角丸 */
    padding: 8px 26px;
    box-shadow: 0px 0px 20px 0px rgba(148, 112, 220, 0.5);
    gap: 16px; /* メニュー間の間隔 */
}

/* メニューのリンク */
.nav-menu a {
    text-decoration: none; /* 青色を無効化 */
    color: var(--color-black); /* 文字色を黒に */
    font-weight: var(--font-bold);
    font-size: var(--font-menu);
    transition: color 0.3s;
}

.nav-menu a:hover {
    color: var(--color-main);
}

/* ナビゲーションのコンテナ */
.nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 950px; /* 中央寄せ */
    margin: 0 auto;
}

/* ロゴ */
.logo {
    position: relative; /* 子要素の `absolute` を適用する基準 */
    display: flex;
    align-items: center;
}

.logo img {
    width: 200px;
    height: auto;
}

.logo a {
    display: block; /* インライン要素からブロック要素へ */
    width: 100%; /* 画像の幅いっぱいに */
    height: 100%; /* 画像の高さいっぱいに */
    position: absolute; /* 画像の上に重ねる */
    top: 0;
    left: 0;
}

/* PC用メニュー */
.nav {
    display: block;
}

.nav-list {
    display: flex;
    gap: 20px;
    list-style: none;
}

.nav-list a {
    text-decoration: none;
    color: var(--color-black);
    font-weight: var(--font-bold);
    font-size: var(--font-regular);
    transition: color 0.3s;
}

.nav-list a:hover {
    color: var(--color-main);
}

/* スマホ用メニュー */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
}

.menu-icon {
    width: 30px;
    height: auto;
}

/* === スマホ用メニュー === */
.mobile-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 70%;
    height: 100%;
    background: var(--color-white);
    box-shadow: -5px 0 10px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
    transition: right 0.3s ease-in-out;
    z-index: 1000; /* オーバーレイより上 */
}

.mobile-menu.active {
    right: 0;
}


.menu-close {
    background: none;
    border: none;
    cursor: pointer;
    align-self: flex-end;
}

.mobile-nav-list {
    list-style: none;
    padding: 26px 36px;
    width: 100%;
}

.mobile-nav-list li {
    margin-bottom: 26px;
}

/* スマホメニューのリンク（デフォルトは黒） */
.mobile-nav-list a {
    text-decoration: none;
    color: var(--color-black);
    font-size: var(--font-small);
    font-weight: var(--font-bold);
    transition: color 0.3s ease;
}

/* クリックされたときにメインカラーになる */
.mobile-nav-list a.active {
    color: var(--color-main);
}

/* ===== オーバーレイ背景を追加 ===== */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(40, 27, 64, 0.5); /* 半透明の黒 */
    z-index: 999; /* メニューの下に */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out;
}

/* メニューが開いた時にオーバーレイを表示 */
.overlay.active {
    opacity: 1;
    visibility: visible;
}

/* 860px以下でPCメニューを非表示、ハンバーガーメニューを表示 */
@media (max-width: 860px) {
    .nav-menu {
        display: none;
    }
    .menu-toggle {
        display: block; /* ハンバーガーメニューを表示 */
    }

    .header {
        padding: 10px 15px; /* ロゴ側には少し余白を持たせる */
        display: flex;
        align-items: center;
        justify-content: space-between;
    }


    .menu-toggle {
        position: absolute;
        top: 0;
        right: 0;
        padding: 0;
    }

    .header {
        transition: opacity 1s ease-in-out;
    }

    .hide-header {
        opacity: 0;
        pointer-events: none; /* 透明時はクリック無効 */
    }
}



/*==============================================================

フッター

==============================================================*/

footer{
    font-size: var(--font-small);  
}

footer ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: var(--color-sub);
}

footer li {
	float: left;
    width: 100%;
}
footer li:last-child {
	border-right: none;
}
footer li a {
	display: block;
	color: #ffffff;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
}
footer li a:hover {
	background-color: var(--color-main);
}

.li-bottom{
    border-bottom: 1px solid var(--color-base);
}

.copywriter{
    font-size: var(--font-xsmall);
    color: #372E41;
    background-color: #CCCCCC;
    text-align: center;
    padding: 14px 16px;
}