@charset "UTF-8";
/* CSS Document */
html {
    scroll-behavior: smooth;
}

* {
    font-family: 'Noto Sans JP', 'Ubuntu', sans-serif; /* 日本語はNoto Sans JP、英語はUbuntuを優先して適用 */
}

/* 変数の定義 */
:root {
    --white: white;
    --primary: rgba(35, 125, 255, 1); /* プライマリーカラー */
    --on-surface: rgba(0,0,0,1); /*テキスト色*/
    --on-surface-var: rgba(0,0,0,0.8);
    --on-surface-var2: rgba(0,0,0,0.64);
    --BG: #DBDBDB;
    
    -primary-opacity: 0.5; /* 透過度 */
    
    /* Material Design 3 フォントサイズ */
    --md-font-size-display-large: 3.1875rem; /* Display Large */
    --md-font-size-display-medium: 2.8125rem; /* Display Medium */
    --md-font-size-display-small: 2.25rem; /* Display Small */
    --md-font-size-headline-large: 1.5rem; /* Headline Large */
    --md-font-size-headline-medium: 1.25rem; /* Headline Medium */
    --md-font-size-headline-small: 1.125rem; /* Headline Small */
    --md-font-size-title-large: 1.125rem; /* Title Large */
    --md-font-size-title-medium: 1rem; /* Title Medium */
    --md-font-size-title-small: 0.875rem; /* Title Small */
    --md-font-size-label-large: 0.875rem; /* Label Large */
    --md-font-size-label-medium: 0.75rem; /* Label Medium */
    --md-font-size-label-small: 0.6875rem; /* Label Small */
    --md-font-size-body-large: 1rem; /* Body Large */
    --md-font-size-body-medium: 0.875rem; /* Body Medium */
    --md-font-size-body-small: 0.75rem; /* Body Small */

    /* フォントウェイトを調整 */
    --md-font-weight-400: 400; 
    --md-font-weight-500: 500;    

    /* 文字間の定義 */
    --md-letter-spacing-large: 0.05em; /* 大 */
    --md-letter-spacing-medium: 0.03em; /* 中 */
    --md-letter-spacing-small: 0.02em; /* 小 */
    
    /* 行間 */
    --md-line-height-large: 1.8;
    --md-line-height-medium: 1.4;
    --md-line-height-small: 1.2;
}

/* 全体で使用するスタイル */
body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    font-family: var(--font-family); /* フォントスタイル */
    background-color: var(--BG);
}

/* テキストスタイル */

a {
    text-decoration: none; /* リンクテキストの下線を削除 */
    color: inherit; /* 親要素の色を継承する */
}

p {
    padding: 0;
    margin: 0;
}

.display-large {
    font-size: var(--md-font-size-display-large);
}

.display-medium {
    font-size: var(--md-font-size-display-medium);
}

.display-small {
    font-size: var(--md-font-size-display-small);
}

.headline-large {
    font-size: var(--md-font-size-headline-large);
}

.headline-medium {
    font-size: var(--md-font-size-headline-medium);
    letter-spacing: var(--md-letter-spacing-large);
    font-weight: var(--md-font-weight-400);
}

.headline-small {
    font-size: var(--md-font-size-headline-small);
    letter-spacing: var(--md-letter-spacing-large);
    font-weight: var(--md-font-weight-500);
}

.title-large {
    font-size: var(--md-font-size-title-large);
    letter-spacing: var(--md-letter-spacing-large);
}

.title-medium {
    font-size: var(--md-font-size-title-medium);
    letter-spacing: var(--md-letter-spacing-large);
}

.title-small {
    font-size: var(--md-font-size-title-small);
    letter-spacing: var(--md-letter-spacing-large);
}

.label-large {
    font-size: var(--md-font-size-label-large);
}

.label-medium {
    font-size: var(--md-font-size-label-medium);
}

.label-small {
    font-size: var(--md-font-size-label-small);
}

.body-large {
    font-size: var(--md-font-size-body-large);
    letter-spacing: var(--md-letter-spacing-large);
}

.body-medium {
    font-size: var(--md-font-size-body-medium);
    letter-spacing: var(--md-letter-spacing-medium);
}

.body-small {
    font-size: var(--md-font-size-body-small);
}

.bold-text {
    font-weight: var(--md-font-weight-500); 
}

/*カード*/
.card_section {
    font-size: var(--md-font-size-label-medium);
    letter-spacing: var(--md-letter-spacing-large);
    color: var(--primary);
}

.card_headline {
    font-size: var(--md-font-size-headline-small);
    letter-spacing: var(--md-letter-spacing-medium);
}

.card-concept {
    font-size: var(--md-font-size-body-small);
    letter-spacing: var(--md-letter-spacing-medium);
    line-height: var(--md-line-height-large);
}

.card_title {
    font-size: var(--md-font-size-title-small);
    letter-spacing: var(--md-letter-spacing-medium);
    font-weight: var(--md-font-weight-500); 
}

/*子ページ*/

.second_section {
    font-size: var(--md-font-size-title-medium);
    letter-spacing: var(--md-letter-spacing-large);
    color: var(--primary);
    font-weight: var(--md-font-weight-500); 
}

.second_headline {
    font-size: var(--md-font-size-label-medium);
    letter-spacing: var(--md-letter-spacing-large);
    color: var(--on-surface);
}

.timeline-container {
    font-size: var(--md-font-size-body-samll);
    letter-spacing: var(--md-letter-spacing-medium);
    line-height: var(--md-line-height-large);    
}

.second_container {
    font-size: var(--md-font-size-body-small);
    letter-spacing: var(--md-letter-spacing-large);
    line-height: var(--md-line-height-large);
}

/*ボタン
/* 共通のhover背景アニメーションクラス */
.hover-bg:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    background: #2A96FF;
    width: 100%;
    height: 100%;
    transition: transform .3s cubic-bezier(0.8, 0, 0.2, 1) 0s;
    transform: scale(0, 1);
    transform-origin: top;
}

.hover-bg:hover:before {
    transform: scale(1, 1);
}

/* fullr_button用のスタイル */
.fullr_button {
    position: relative;
    overflow: hidden;
    display: flex;
    width: auto;
    padding: 0.5em 2em;
    justify-content: center;
    align-items: center;
    border-radius: 100px;
    background: var(--primary, #237DFF);
    color: white;
    font-size: var(--md-font-size-title-medium);
    transition: ease .2s;
    box-shadow: none; /* 影を削除 */
    border: none;
    outline: none;
    transform: none; /* transformの影響を除去 */
}

/* ボタン内spanの形状 */
.fullr_button span {
    z-index: 3; /* z-indexの数値をあげて文字を背景よりも手前に表示 */
    display: inline-flex;
    align-items: center; /* アイコンとテキストを縦方向で中央に配置 */
    transform: none; /* transformの影響を除去 */
}

/* round-button用のスタイル */
.round-button {
    position: relative;
    overflow: hidden;
    width: 48px;
    height: 48px;
    border-radius: 50%; /* 半径50%で丸い形状に */
    background-color: var(--primary); /* 背景色を設定 */
    color: #fff; /* ボタンのテキスト色を設定 */
    border: none; /* 枠線をなしにする */
    display: flex; /* 要素内のコンテンツを中央に配置するために flexbox を使用 */
    justify-content: center; /* 水平方向にコンテンツを中央に配置 */
    align-items: center; /* 垂直方向にコンテンツを中央に配置 */
    cursor: pointer;
}
.round-button span {
    z-index: 3; /* z-indexの数値をあげて文字を背景よりも手前に表示 */
    display: inline-flex;
    align-items: center; /* アイコンとテキストを縦方向で中央に配置 */
    gap:8px;
}


/* round-button用のスタイル */
.fullr_button_more{
    display: flex;
    position: relative;
    overflow: hidden;
width: auto;
padding: 0.5em 0.6em 0.5em 1.5em;
justify-content: center;
align-items: center;
border-radius: 100px;
background: var(--primary, #237DFF);
color: white;
    gap:4px;
    font-size: var(--md-font-size-title-medium);
}

.fullr_button_more span {
    z-index: 3; /* z-indexの数値をあげて文字を背景よりも手前に表示 */
    display: inline-flex;
    align-items: center; /* アイコンとテキストを縦方向で中央に配置 */
    gap:8px;
}

/* アイコンのスタイル */
.button-icon {
    width: 3em;
}

.more-icon {
    width: 2em;
}