@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* =========================================
   ATHLEAD ファーストビュー (First View)
   ========================================= */
:root {
    --ath-main: #021e4c;
    --ath-accent: #E86830;
    --ath-text: #4A4A4A;
    --ath-font: "Noto Serif JP", sans-serif;
}

.ath-fv {
    position: relative;
	top: -60px;
    padding: 8rem 0 5rem;
    overflow: hidden;
    min-height: 65svh;
    display: flex;
    align-items: center;
    color: var(--ath-text);
    
    /* ⬇️ 追加：SWELLのコンテナ制限を突破して強制フルワイドにする記述 */
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    box-sizing: border-box;
}

.ath-fv__title-main{
    font-family: var(--ath-font);
	padding: 20px 0 160px 0;
}

.cover-title{
	font-size: 2rem!important;
}

.sec-title{
	border-bottom: 2px solid var(--ath-main)!important;
}


/* --- 背景のBlob（有機的図形）アニメーション --- */
@keyframes ath-blob-bounce {
    0%   { border-radius: 40% 60% 70% 30% / 40% 40% 60% 50%; transform: translateY(0) scale(1); }
    34%  { border-radius: 70% 30% 50% 50% / 30% 30% 70% 70%; transform: translateY(-5px) scale(1.02); }
    67%  { border-radius: 100% 60% 60% 100% / 100% 100% 60% 60%; transform: translateY(5px) scale(0.98); }
    100% { border-radius: 40% 60% 70% 30% / 40% 40% 60% 50%; transform: translateY(0) scale(1); }
}

.ath-fv__bg-blob {
    position: absolute;
    z-index: -10;
}
.ath-fv__bg-blob--1 {
    top: 2.5rem;
    left: -5%;
    width: 18rem;
    height: 18rem;
    background-color: rgba(184, 216, 229, 0.3);
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
    animation: ath-blob-bounce 12s infinite alternate ease-in-out;
    filter: blur(40px);
}
.ath-fv__bg-blob--2 {
    bottom: -10%;
    right: -10%;
    width: 24rem;
    height: 24rem;
    background-color: rgba(151, 217, 192, 0.2);
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    animation: ath-blob-bounce 15s infinite alternate-reverse ease-in-out;
    filter: blur(60px);
}
.ath-fv__bg-blob--3 {
    top: 25%;
    right: 33%;
    width: 8rem;
    height: 8rem;
    background-color: rgba(151, 217, 192, 0.3);
    border-radius: 50%;
    filter: blur(20px);
}

/* 画像の切り抜き・影 */
.ath-fv__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50% 50% 40% 60% / 60% 40% 60% 40%;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    animation: ath-blob-bounce 15s infinite alternate ease-in-out;
}

/* ボタン */
.ath-fv__btn {
    display: inline-block;
    background-color: var(--ath-main);
    color: #fff;
    text-align: center;
    padding: 1rem 2rem;
    font-weight: bold;
    font-size: 1.125rem;
    text-decoration: none;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    border-radius: 40% 60% 70% 30% / 40% 40% 60% 50%;
    animation: ath-blob-bounce 6s infinite alternate ease-in-out;
    transition: all 0.3s ease;
}
.ath-fv__btn:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 10px 20px rgba(136, 176, 75, 0.4);
    color: #fff;
}

/* --- PC用レイアウト (1024px以上) --- */
@media (min-width: 1024px) {
    .ath-fv { padding: 7rem 0 6rem; }
    .ath-fv__sp { display: none; }
    .ath-fv__pc { display: block; width: 100%; padding: 0 2rem; margin: 0 auto; }
    .ath-fv__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2rem; }
    
    .ath-fv__text-area { 
        grid-column: span 5; 
        align-self: flex-start; 
        margin-top: 1rem; 
        position: relative; /* 追加：z-indexを効かせるため */
        z-index: 20;        
    }
    .ath-fv__title { font-weight: 900; line-height: 1.3; letter-spacing: -0.02em; white-space: nowrap; }
    .ath-fv__title-sub { display: block; color: var(--ath-main); margin-bottom: 1.25rem; font-size: 1.5rem; font-weight: bold; }
    .ath-fv__title-main { display: block; font-size: 2.8rem; margin-bottom: 0.2rem; }
    .ath-fv__desc { font-size: 1.125rem; line-height: 1.75; margin: 2rem 0; max-width: 36rem; color: #4b5563; }
    
    .ath-fv__image-area { grid-column: span 7; position: relative; height: 600px; display: flex; justify-content: flex-end; align-items: center; }
    .ath-fv__image-bg { position: absolute; width: 110%; height: 110%; background-color: var(--ath-accent); opacity: 0.2; top: -5%; right: -10%; z-index: -10; border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; animation: ath-blob-bounce 15s infinite alternate-reverse ease-in-out; }
    .ath-fv__image-wrapper { position: absolute; width: 110%; height: 100%; right: -5%; }
    
    /* PCの巨大スクリーン用調整 */
    @media (min-width: 1280px) {
        .ath-fv__bg-blob--1 { width: 32rem; height: 32rem; }
        .ath-fv__bg-blob--2 { width: 48rem; height: 48rem; }
        .ath-fv__bg-blob--3 { width: 14rem; height: 14rem; }
        .ath-fv__pc { padding: 0 4rem; }
        .ath-fv__title-sub { font-size: 1.8rem; }
        .ath-fv__title-main { font-size: 3.5rem; }
        .ath-fv__text-area { margin-top: 2rem; }
        .ath-fv__image-area { height: 750px; }
        .ath-fv__image-wrapper { width: 125%; right: -10%; }
    }
}

/* --- SP用レイアウト (1023px以下) --- */
@media (max-width: 1023px) {
    .ath-fv__pc { display: none; }
    .ath-fv__sp { display: block; width: 100%; max-width: 80rem; margin: 0 auto; padding: 0 1rem; position: relative; z-index: 20; margin-top: 1rem; }
    
    .ath-fv__sp-sub { font-size: 1.25rem; font-weight: bold; color: var(--ath-main); letter-spacing: -0.02em; padding: 0 0.5rem; line-height: 1.3; margin-bottom: 0.5rem; }
    @media (min-width: 640px) { .ath-fv__sp-sub { font-size: 1.5rem; } }
    
    .ath-fv__sp-image-area { position: relative; z-index: 10; height: 360px; width: 90%; margin-left: auto; margin-bottom: -4rem; }
    @media (min-width: 640px) { .ath-fv__sp-image-area { height: 450px; margin-bottom: -5rem; } }
    
    .ath-fv__sp-image-bg { position: absolute; width: 110%; height: 110%; background-color: var(--ath-accent); opacity: 0.2; top: 0.5rem; right: -1rem; z-index: -10; border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; animation: ath-blob-bounce 15s infinite alternate-reverse ease-in-out; }
    .ath-fv__sp-image-wrapper { width: 100%; height: 100%; transform: translateX(1.5rem); }
    @media (min-width: 640px) { .ath-fv__sp-image-wrapper { transform: translateX(2rem); } }
    
    .ath-fv__sp-text-area { position: relative; z-index: 20; padding: 0 0.5rem; }
    .ath-fv__sp-title { font-weight: 900; color: #1f2937; line-height: 1.4; letter-spacing: -0.02em; font-size: 1.5rem; width: 110%; margin-bottom: 1.5rem; }
    @media (min-width: 640px) { .ath-fv__sp-title { font-size: 1.8rem; width: auto; } }
    
    .ath-fv__sp-title-main { display: block; margin-bottom: 0.25rem; white-space: nowrap; }
    .ath-fv__sp-title-main:last-child { margin-top: 0.5rem; }
    
    .ath-fv__sp-desc { font-size: 1.05rem; color: #1f2937; font-weight: 500; line-height: 1.75; background-color: rgba(255, 255, 255, 0.8); backdrop-filter: blur(12px); padding: 1.5rem; border-radius: 1rem; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); border: 1px solid rgba(255, 255, 255, 0.5); }
    @media (min-width: 640px) { .ath-fv__sp-desc { font-size: 1.15rem; } }
}