@charset "utf-8";
/* CSS Document */

/* 共通 
-------------------------------------------------------*/
body {
    font-feature-settings: "palt" 1;
    letter-spacing: .3px;
}
.pc {
    display: block;
}
.sp {
    display: none;
}
.l-inner-l {
    max-width: 1200px;
    margin: 0 auto 0;
    position: relative;
    z-index: 20;
}
.l-inner {
    max-width: 1200px;
    margin: 0 auto 0;
    position: relative;
    z-index: 20;
}
.l-inner-s {
    max-width: 850px;
    margin: 0 auto 0;
    position: relative;
    z-index: 25;
}

@media screen and (max-width: 2024px) {
}
@media screen and (max-width: 1280px) {
    .l-inner {
        padding: 0 5%;
    }
}
@media screen and (max-width: 767px) {
    .l-inner,
    .l-inner-s {
        padding: 0 5%;
    }
    .pc {
        display: none;
    }
    .sp {
        display: block;
    }
}

.trial-container {
    width: 80%;
}

.markerUnder {
    background: linear-gradient(transparent 60%, rgba(255, 162, 82, 0.4) 0%);
    display: inline;
    padding: 0 1px 0px;
    font-weight: bold;
}

.mt-01 {
    margin-top: 1rem;
}
.mt-02 {
    margin-top: 2rem;
}
p a,
li a,
a {
    text-decoration: underline;
    color: #003090;
}
.list-disc {
    list-style: disc;
    margin-left: 1rem;
    padding-left: 1rem;
}
.text-indent-01 {
    text-indent: -1rem;
    padding-left: 1rem;
}

.section-title {
    font-size: 3rem;
    font-weight: bold;
    color: #003090;
    margin-bottom: 2rem;
}

.section-lead {
    font-size: 1.5rem;
    font-weight: bold;
    line-height: 1.5;
}
.heading-3 {
    padding: 0 0 .5rem;
    font-size: 2rem;
    font-weight: bold;
    position: relative;
    color: #003090;
    margin-bottom: 1.5rem
}
.heading-4 {
    padding: 0 0 .5rem;
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 1rem
}

@media screen and (max-width: 767px) {
    .section-title {
        font-size: 6vw;
    }
    .section-lead {
        font-size: 4vw;
    }
    .heading-3 {
        font-size: 5vw;
    }
    .heading-4 {
        font-size: 4.5vw;
    }
}

.ta-c {
    text-align: center !important;
}

/* 余白（大）：セクション間の区切りなど */
.m-lg { margin: 120px 0; }
.mt-lg { margin-top: 120px; }
.mb-lg { margin-bottom: 120px; }

/* 余白（中）：コンテンツのブロック間など */
.m-md { margin: 60px 0; }
.mt-md { margin-top: 60px; }
.mb-md { margin-bottom: 60px; }

/* 余白（小）：テキストとボタンの間など */
.m-sm { margin: 40px 0; }
.mt-sm { margin-top: 40px; }
.mb-sm { margin-bottom: 40px; }

/* 余白（極小）：補足説明など */
.mt-xs { margin-top: 20px; }
.mb-xs { margin-bottom: 20px; }

.p-top-60 {padding-top: 60px;}

@media screen and (max-width: 767px) {
/* 余白（大）：セクション間の区切りなど */
.m-lg { margin: 60px 0; }
.mt-lg { margin-top: 60px; }
.mb-lg { margin-bottom: 60px; }

/* 余白（中）：コンテンツのブロック間など */
.m-md { margin: 30px 0; }
.mt-md { margin-top: 30px; }
.mb-md { margin-bottom: 30px; }

/* 余白（小）：テキストとボタンの間など */
.m-sm { margin: 20px 0; }
.mt-sm { margin-top: 20px; }
.mb-sm { margin-bottom: 20px; }

/* 余白（極小）：補足説明など */
.mt-xs { margin-top: 10px; }
.mb-xs { margin-bottom: 10px; }
}

/* 2. ヒーローセクション 
-------------------------------------------------------*/
.hero-section {
    overflow: hidden;
    background-color: #E1F1F9;
/*    height: 100vh;*/
}
.hero-section__decoration {
    background: #fff;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    /*  height: 200px;*/
    margin-left: -300px;
    margin-right: -300px;
    padding-left: 300px;
    padding-right: 300px;
    padding-bottom: 1rem;
/*    height: 100vh;*/
}
.hero-blok {
    position: relative;
    border-radius: 50px;
    margin: 3rem auto 2rem;
    background-color: #fff;
    display: flex;
    justify-content: space-around;
    padding: 50px 50px 30px 100px;
}

.hero-blok__contents {
    width: 45%;
    text-align: left;
}
.hero-blok__contents .eyebrow {
    color: #003090;
    font-size: 1.5rem;
    font-weight: bold;
}
.hero-blok__contents .page-title {
    width: 100%;
    margin-top: 1rem;
    
}
.hero-blok__contents {
    
}
.hero-blok__img {
    width: 50%;
}
.page-title__text {
    margin-top: 5rem;
    font-size: 2rem;
    font-weight: bold;
    line-height: 2;
    
}
.hero-section__text {
    font-size: 1.5rem;
    font-weight: bold;
}
@media screen and (min-width:768px) and ( max-width: 1280px) {
    .trial-container {
        width: 90%;
    }
    .hero-blok {
        padding: 50px 50px 30px;
    }
}
@media screen and (max-width: 767px) {
    .hero-section {
        height: auto;
    }
    .trial-container {
        width: 100%;
        padding: 0 5%;
    }
    .hero-blok {
        margin-top: 2rem;
        padding: 7% 7% 0;
        display: block;
        height: auto;
    }
    .hero-blok__contents {
        width: 100%;
    }
    .hero-blok__contents .page-title {
        max-width: 100%;
    }
    .hero-blok__img{
        width: 100%;
        margin-top: 1rem;
    }
    .hero-blok__contents .eyebrow{
        font-size: 1.2rem;
    }
    .page-title__text {
        margin-top: 2rem;
        font-size: 1rem;
        line-height: 1.75;
        
    }
    .hero-section__text {
        font-size: 1.1rem;
        text-align: left;
    }
    .hero-section__decoration {
        height: auto;
    }
}


.background-color {
    background: #E1F1F9;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    border-bottom-left-radius: 50%;
    border-bottom-right-radius: 50%;
/*
    margin-left: -300px;
    margin-right: -300px;
    padding-left: 300px;
    padding-right: 300px;
*/
    margin-left: -100%;
    margin-right: -100%;
    padding-left: 100%;
    padding-right: 100%;
    padding-bottom: 100px;
}
@media screen and (max-width: 767px) {
    .background-color {
        margin-left: -200%;
        margin-right: -200%;
        padding-left: 200%;
        padding-right: 200%;
        padding-bottom: 50px;
    }
}

.title-block {
/*    display: flex;
    justify-content: space-between;*/
    align-items: center;
    padding-top: 60px;
}
@media screen and (max-width: 767px) {
    .background-color .title-block {
        padding-top: 60px;
    }
    .title-block {
        align-items: center;
        padding-top: 0;
    }
}
.title-block img {
    margin-left: 4.5%;
}

.title-block__text {
    margin-top: 2rem;
    font-size: 1.2rem;
    line-height: 2;
    text-align: justify;
    
}

.plan-section,
.section-blue {
    padding-top: 100px;
}

.plan-section,
.trial-end-section,
.section-blue {
    overflow: hidden;
/*    padding-bottom: 100px;*/
    position: relative;
}
.plan-section::before,
.trial-end-section::before,
.section-blue::before {
    /* contentプロパティは空にするか、省略する */
    content: ""; 
    /* 挿入したいサイズを指定 */
    width: 100px;
    height: 100px;
    /* ブロック要素にする（インライン要素のままだと幅と高さが適用されない） */
    display: inline-block; 
    /* 背景画像として指定 */
    background-image: url("../images/android-chrome-192x192.png");
    /* サイズを制御 */
    background-size: contain; /* または cover, 50px 50px など */
    background-repeat: no-repeat;
    position: absolute;
    top: 50px;
    left: 0;
    right: 0;
    margin: 0 auto;
}
.plan-section::before {
    top: 100px;
}
@media screen and (max-width: 767px) {
    .plan-section::before,
    .trial-end-section::before {
        width: 70px;
        height: 70px;
        top: 160px;
    }
}

.signup-button {
    position: absolute;
    bottom: 0;
    padding: 1rem 2rem;
    width: 100%;
}
.signup-button a {
    position: relative;
    display: flex;
    justify-content: left;
    align-items: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
    background-color: #236CFF;
    color: #fff;
    border-radius: 10px;
    padding: 0.5rem 2rem;
    font-size: 1.2rem;
    font-weight: bold;
}
.signup-button a:before {
    display: block;
    content: "";
    position: absolute;
    right: 1rem;
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-left: 16px solid #fff;
}
.contact a{
    background-color: #707070;
}


/* 2. トライアル申込み・お問い合わせ
-------------------------------------------------------*/

.contact-area {
    background-color: #e6f2f8; /* 背景の薄い水色 */
    padding: 60px 0;
}
@media screen and (max-width: 767px) {
    .contact-area {
        padding: 60px 5%;
    }
}
.cta-container {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

/* 左側：ロゴエリア */
.cta-logo img {
    height: 60px; /* ロゴのサイズは適宜調整してください */
    display: block;
}

/* 右側：コンテンツエリア */
.cta-content {
    flex: 1;
}

.cta-title {
    color: #003399;
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 25px;
    letter-spacing: 0.05em;
}

/* ボタンのグループ */
.btn-group {
    display: flex;
    gap: 20px;
}

/* ボタン共通スタイル */
.cta-btn {
    flex: 1;
    padding: 20px 25px;
    border-radius: 15px;
    text-decoration: none;
    color: #fff;
    position: relative;
    transition: transform 0.2s, opacity 0.2s, box-shadow 0.2s;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.cta-btn:hover {
    transform: translateY(-3px);
    opacity: 0.9;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.sub-text {
    font-size: 13px;
    margin-bottom: 5px;
    opacity: 0.9;
}

.main-text {
    font-size: 20px;
    font-weight: bold;
}

/* 右矢印アイコン */
.cta-btn::after {
    content: '▶';
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
}

/* 個別カラー設定 */
.btn-blue {
    background-color: #2e71ff; /* 明るい青 */
}

.btn-navy {
    background-color: #003399; /* 濃い紺 */
}

/* レスポンシブ対応：スマホで縦並び */
@media (max-width: 768px) {
    .cta-container {
        flex-direction: column;
        text-align: center;
    }
    .btn-group {
        flex-direction: column;
    }
}