/* --- 変数定義 --- */
:root {
    --fm-green: #00a33e;
    --fm-blue: #008cd6;
    --fm-dark: #333333;
    --fm-light: #f8fafc;
    --color-white: #ffffff;
    --color-gray-50: #f9fafb;
    --color-gray-100: #f3f4f6;
    --color-gray-200: #e5e7eb;
    --color-gray-400: #9ca3af;
    --color-gray-500: #6b7280;
    --color-gray-600: #4b5563;
    --color-gray-700: #374151;
    --color-gray-800: #1f2937;
    --color-red: #ef4444;
    --color-emerald: #10b981;
    --color-yellow: #FACC15;
    --color-blue-600: #2563eb;
    --shadow-soft: 0 10px 40px -10px rgba(0,0,0,0.08);
    --header-height: 3rem;
}

.site-header .nav-item:nth-child(1) .dropdown-toggle {
    color: var(--fm-green) !important;
    font-weight: 600 !important;
    /* pointer-events: none; */
}

.mySwiper1 {
  /* aspect-ratio: 16 / 9; */
  width: 100%;
  height: 800px;
}

/* ② スライド画像が枠にフィットするように */
.mySwiper1 .swiper-slide picture,
.mySwiper1 .swiper-slide img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.mySwiper1 .swiper-wrapper,
.mySwiper1 .swiper-slide,
.top-swiper-slide {
  height: 100%;
}
.top-swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ③ モバイルは縦長にする（初期崩れ軽減） */
@media (max-width: 500px) {
  .mySwiper1 {
    aspect-ratio: 4 / 5;   /* 例：縦長。実際の画像比率に合わせて */
  }
}

/* --- ボタン共通スタイル --- */
.button-primary {
    background-image: linear-gradient(to right, var(--fm-green), var(--color-emerald));
    color: var(--color-white);
    padding: 0.75rem 2rem;
    border-radius: 9999px;
    font-weight: bold;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.button-primary:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.button-secondary {
    background-color: var(--fm-blue);
    color: var(--color-white);
    border-radius: 9999px;
    font-weight: bold;
    font-size: 1rem;
    padding: 0.8rem 2.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease, transform 0.3s ease;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.button-secondary:hover {
    background-color: var(--color-blue-600);
}

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

dd{
    margin-inline-start:0 !important;
}

/* --- ヒーローセクション --- */
.hero-section {
    position: relative;
    max-height: 90%;
    display: flex;
    /* padding-top: 5rem;  */
    padding-top: 0;
}

.top-container{
    width: 100%;
}
.top-swiper-slide {
    height: 670px;
    transition: transform 0.3s ease, opacity 0.3s ease;
    position: relative;
    background-color: var(--color-white);
    z-index: 2;
    pointer-events: all;
}
.mySwiper1 .swiper-wrapper{
    pointer-events: none;
}


.top-swiper-slide img{
    width: 100%;
    height: 100%;
    opacity: 0.8;
    object-fit: cover;
    object-position: center top;
}



.top-swiper-textbox{
    position: absolute;
    /* overflow: hidden; */
    top: 0;
    z-index: 100;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        to right, 
        rgba(255, 255, 255, 1) 0%,   
        rgba(255, 255, 255, 0.7) 40%,  
        rgba(255, 255, 255, 0) 100%    
    );
    padding-top: var(--header-height);
}.top-swiper-textbox h3{
    margin: 2em 5rem 1rem  0 ;
    padding: 0 0 0.5rem 5rem;
    font-size: clamp(40px,8.2vw,64px);
    background: linear-gradient(to right, 
    rgba(255, 255, 255, 0.9) 0%,  
    rgba(255, 255, 255, 0.5) 70%, 
    rgba(255, 255, 255, 0) 100% 
  );
    color: var(--fm-green);
    font-weight: 900;
    letter-spacing: 0.05em;
    font-family: 'Zen Kaku Gothic New', sans-serif;
}

.top-swiper-textbox.slide2 h3{
    color: var(--fm-blue);
    background: linear-gradient(to right, 
    rgba(255, 255, 255, 0.9) 0%,   
    rgba(255, 255, 255, 0.5) 70%,  
    rgba(255, 255, 255, 0) 100%   
    );
    /* text-shadow: 0 0 3px var(--fm-blue); */
}
.top-swiper-textbox.slide2 .top-swiper-text-emphasis span{
    color: var(--fm-blue);
    /* text-shadow: 0 0 3px var(--fm-blue); */
}
.top-swiper-textbox.slide3 h3{
    color: var(--color-yellow);
    font-weight: 900;
}
.top-swiper-text-emphasis-3{
    color: var(--color-yellow); 
}

.top-swiper-slide h3 span{
    /* transform: translateX(-100%); */
    overflow: hidden;
    display: block;
    opacity: 0;
    transition: 0.4s ease;
    transition-property: transform,opacity;
}

.top-swiper-slide h3{
    opacity: 0;
    transition: 0.4s ease;
    transition-property: opacity;
}

.top-swiper-slide .slide3 h3{
    padding: 0rem 5rem 0rem;
    margin: 1.3em 5rem 1rem 0;
}

.top-swiper-slide p,dl{
    /* overflow: hidden; */
    opacity: 0;
    transform: translateY(-80px);
    transition: 0.4s ease;
    transition-property: transform,opacity;
    
}


.top-swiper-slide.swiper-slide-active h3 span,
.top-swiper-slide.swiper-slide-duplicate-active h3 span{
    opacity: 1;
    transform: translateX(0px);
    transition: 0.5s ease;
    transition-property: transform,opacity;
    transition-delay: 0.5s;
    display: contents;
}

.top-swiper-slide.swiper-slide-active h3,
.top-swiper-slide.swiper-slide-duplicate-active h3 {
    opacity: 1;
    transition: 1s ease;
    transition-property: opacity;
    transition-delay: 1s;
}


.top-swiper-slide.swiper-slide-active p,
.top-swiper-slide.swiper-slide-duplicate-active p,
.top-swiper-slide.swiper-slide-active dl,
.top-swiper-slide.swiper-slide-duplicate-active dl{
    opacity: 1;
    transform: translateY(0px);
    transition: 0.5s ease;
    transition-property: transform,opacity;
    transition-delay: 0.5s;
}


.top-swiper-textbox-span{
    font-size: clamp(18px,1.5vw,20px);
    font-weight: 700;
    line-height: 28px;
    padding:1rem 0 1rem clamp(1rem,4.8vw,5rem);
    display: flex;
    white-space: nowrap;
}

.top-swiper-textbox-span-3{
    font-size: clamp(14px,1.5vw,16px);
    font-weight: 700;
    line-height: 23px;
    padding:0.5rem 0 0.5rem clamp(1rem,4.8vw,5rem);
    /* display: flex; */
    margin-bottom: 0;
    white-space: nowrap;
}

.top-swiper-text-emphasis{
    color: var(--fm-green); 
    font-weight: 900; 
    font-size: clamp(20px,1.5vw,28px);

}

.top-swiper-text-emphasis-3{
    font-weight: 900; 
    font-size: clamp(18px,1.5vw,20px);
    white-space: nowrap;
}

@media(max-width:1400px){
    .top-swiper-textbox-span{
        padding:1rem 0 1rem 4rem;
    }
    /* .top-swiper-textbox-span-3{
        font-size: 18px;
        line-height: 21px;
        padding: 0.5rem 0 0.5rem 4rem;
    } */
    /* .top-swiper-text-emphasis-3{
        font-size: 21px;
    } */
}

@media(max-width:1100px){
    .top-swiper-textbox{
        width: 70%;
        background: linear-gradient(
            to right, 
            rgba(255, 255, 255, 0.9) 0%, 
            rgba(255, 255, 255, 0.8) 40%,   
            rgba(255, 255, 255, 0) 100%    
        );
    }
    .top-swiper-textbox-span-3{
        display: block;
    }
    /* .top-swiper-textbox h3{
        margin:2rem 5rem 0 0;
        padding: 6rem 3rem 3rem !important;
    } */
}
@media(max-width:839px){
    .top-swiper-textbox h3 {
        margin-top: 0rem;
    }
}

@media(max-width:839px){
    .top-swiper-textbox{
        width: 80%;
        background: linear-gradient(
            to right, 
            rgba(255, 255, 255, 0.9) 0%, 
            rgba(255, 255, 255, 0.8) 50%,   
            rgba(255, 255, 255, 0) 100%    
        );
    }
    /* .text-back-white{
        background-color: rgba(255,255,255,0.5);
    } */
    .top-swiper-textbox-span{
        line-height: 1.5;
        padding:1rem 0 1rem 1rem !important;
    }

    .top-swiper-textbox h3{
        margin:0 5rem 0 0;
        padding: 4rem 2rem 3rem !important;
        background: linear-gradient(to right, rgba(255, 255, 255, 0.5));
    }

    .top-swiper-textbox.slide2 h3 {
        background: linear-gradient(to right, rgba(255, 255, 255, 0.5));
    }
    
    .top-swiper-text-emphasis-3{
        font-weight: 900; 
        font-size: clamp(14px,2.5vw,25px);
        white-space: nowrap;
    }
    .top-swiper-textbox-span-3{
        font-size: clamp(12px,2.5vw,20px);
        white-space:unset;
    }

    .top-swiper-slide .slide3 h3{
    margin: 0;
}


}

@media(max-width:839px){

    .top-swiper-textbox{
        width: 100%;
        padding-top: 4rem;
    }

    .top-swiper-textbox h3{
        margin: 0;
        padding: 0.3rem !important;
        text-align: center;
    }

    .top-swiper-textbox-span{
        line-height: 1.5;
        padding:1rem 2rem;
        font-size: clamp(14px,3.5vw,20px);
        white-space: normal;
    }

    .top-swiper-text-emphasis{
        font-size: clamp(15px,3.5vw,28px);
    }
     .mySwiper1 {
        height: clamp(450px,100.5vw,650px);
        /* height: 60vh; */
    }

    .hero-section{
        height: clamp(450px,100.5vw,650px);
        /* height: 60vh; */
    }

    .top-swiper-slide img{
        height: 80vh;
    }

    .top-swiper-textbox-span-3{
        padding: clamp(0rem,2vw,1rem) ;
        margin: 0;
    }
    .top-swiper-slide h3{
        font-size: clamp(24px,7.5vw,60px);
    }

    

}
@media(max-width:461px){
    .top-swiper-textbox-span-3{
        padding: clamp(0rem,1vw,0.3rem) ;
        margin: 0;
    }
}

/* --- ニュースセクション --- */
.news-section {
    /* padding-top: clamp(8rem, 30vw, 11.5rem);
    padding-bottom: clamp(2rem,9vw,3.5rem); */
    background-color: var(--color-white);
    position: relative;
    z-index: 20;
}

.news-list-card {
    border-radius: 1rem; /* rounded-2xl 相当 */
    /* box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); */
    /* border: 1px solid var(--color-gray-100); */
    overflow: hidden;
    max-width: 64rem; /* max-w-5xl 相当 */
    margin-left: auto;
    margin-right: auto;
}

.news-header {
    /* background-color: var(--color-gray-50); */
    padding: 1rem 1.5rem; /* px-6 py-4 相当 */
    /* border-bottom: 1px solid var(--color-gray-100); */
    display: grid;
    /* justify-content: space-between; */
    align-items: center;
}

.news-title-header {
    font-size: clamp(17px, 3.5vw, 2.2rem) !important;
    font-weight: bold;
    color: var(--fm-green);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
}

.news-icon {
    color: var(--fm-blue);
}

.news-all-link {
    font-size: clamp(13px, 3.5vw, 18px); /* text-sm 相当 */
    font-weight: bold;
    color: var(--fm-blue);
    display: flex;
    justify-content: end;
}

.news-all-link:hover {
    text-decoration: underline;
}

.news-body {
    padding: 0.5rem; /* p-2 相当 */
}

.news-item {
    display: block;
    padding: 1rem; /* p-4 相当 */
    border-radius: 0.75rem; /* rounded-xl 相当 */
    transition: background-color 0.3s;
    border-bottom: 1px dashed var(--color-gray-200);
}

.news-item:last-child {
    border-bottom: none;
}

.item-important:hover {
    background-color: #fff1ef; /* hover:bg-blue-50 相当 */
}

.item-normal:hover {
    background-color: #f0fff4; /* hover:bg-green-50 相当 */
}

.news-item-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem; /* gap-2 相当 */
}

@media (min-width: 768px) {
    .news-section {
        padding-top: 12rem; /* py-16 相当 */
        padding-bottom: 8rem;
    }
    .news-item-content {
        flex-direction: row;
        align-items: center;
        gap: 1rem; /* md:gap-4 相当 */
    }
    .news-title-header {
    font-size: 1.25rem; 
    }
}

@media (max-width: 767px) {
    .news-section {
        padding-top: 8rem; /* py-16 相当 */
    }
}

.news-item-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem; /* gap-3 相当 */
    flex-shrink: 0;
}

.news-date {
    color: var(--color-gray-400);
    font-family: monospace;
    font-size: 0.875rem; /* text-sm 相当 */
}

.news-badge {
    color: var(--color-white);
    font-size: 0.75rem; /* text-xs 相当 */
    padding: 0.25rem 0.75rem; /* px-3 py-1 相当 */
    border-radius: 9999px;
    font-weight: bold;
    width: 75px;
    text-align: center;
}

.badge-important {
    background-color: var(--color-red);
}

.badge-normal {
    background-color: var(--color-white);
    border: 1px solid var(--fm-green);
    color: var(--fm-green);
}

.pulse-badge {
    animation: pulse-red 2s infinite;
}

@keyframes pulse-red {
    0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
    70% { box-shadow: 0 0 0 6px rgba(0, 175, 240, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 175, 240, 0); }
}

.news-item-heading {
    font-size: 1rem; /* text-base 相当 */
    font-weight: bold;
    color: var(--fm-dark);
    transition: color 0.3s;
}

.item-important .news-item-heading:hover {
    color: var(--color-red);
}

.item-normal .news-item-heading {
    font-weight: 100;
    color: var(--color-gray-700);
}

.item-normal .news-item-heading:hover {
    color: var(--fm-green);
}

.news-item-subtext {
    font-size: 0.875rem; /* text-sm 相当 */
    font-weight: normal;
    color: var(--color-gray-500);
    margin-left: 0.5rem;
    display: inline; /* hidden md:inline 相当 */
}

@media (max-width: 768px) {
    .news-item {
        padding: clamp(0.5rem,2.5vw,1rem);
    }
    .news-date {
        font-size: clamp(12px,2.5vw,0.875rem); /* text-sm 相当 */
    }
    .news-badge {
    font-size: clamp(11px,2.5vw,0.75rem);
    padding: clamp(0.2rem,0.5vw,0.25rem) clamp(0.3rem,1.5vw,0.75rem)
    }
    .news-item-subtext {
        display: none;
    }
    .news-item-heading {
        font-size: clamp(14px,2.5vw,1rem);
        margin-top: clamp(0.5em,2.5vw,1em);
        margin-bottom: clamp(0.5em,2.5vw,1em);
    }
}
/* --- 「インターネットによるお手続き」セクション --- */

.procedure-section{
    padding-bottom: 8rem;
}
#procedure {
    scroll-margin-top: 120px;
}
.procedure-grid{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* grid-cols-1 相当 */
    place-content: center;
    gap: 1rem 2rem; /* gap-8 相当 */
    max-width: 1024px;
    margin: 0 auto;
}
.procedure-card{
    box-shadow: var(--shadow-soft);
    padding: 20px;
    border-radius: 1.5rem;
    border: 1px solid var(--color-gray-100);
}
.procedure-card h3{
    font-size: 16px;
}
.procedure-card-flex{
    display: block;
    gap:20px;
}
.procedure-card-text{
    display: grid;
    align-items: center;
    font-size: 14px;
    margin-top: clamp(8px, 1.4vw, 10px);
}
.procedure-card-text p{
    margin: 0;
}
.procedure-card-img{
    display: grid;
    align-items: center;
    justify-content: center;
    max-height: 100px;
    max-width: 100%;
    width: 100%;
}
.procedure-card-img img{
    transform: translateY(0);
    max-height: 100px;
    max-width: clamp(150px,29vw,300px);
    transition: 0.3s ease;
    transition-property: box-shadow, transform;
    box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.1);
}
.procedure-card-img img:hover{
    transform: translateY(-4px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
@media (max-width:768px) {
    .procedure-card h3 {
        font-size: clamp(16px,3vw,20px);
        margin-bottom: clamp(8px,1.4vw,10px);
    }
    .procedure-card{
        padding: clamp(10px,7vw,40px);
    }
    .procedure-card-text{
        font-size: clamp(13px,2.4vw,16px);
        margin-top: clamp(8px,1.4vw,10px);
    }
    .procedure-grid{
        gap: 1.2rem;
        grid-template-columns: repeat(1, minmax(0, 1fr)); /* grid-cols-1 相当 */
    }
    .procedure-card:nth-child(2){
        order: 3;
    }
    .procedure-card-linkbutton{
        order: 2;
    }
    .procedure-section{
        padding-top: clamp(2rem,9vw,3.5rem); 
        padding-bottom: clamp(2rem,9vw,3.5rem);
    }
    .procedure-card-img{
        max-width: 100%;
        width: 100%;
    }
    .procedure-card-img img{
        /* max-width: clamp(150px,45vw,300px); */
        max-width: 100%;
    }
    .procedure-card-flex{
    display: block;
    }

}

.procedure-card-linkbutton{
    box-shadow: var(--shadow-soft);
    padding: 10px 20px;
    border-radius: 1.5rem;
    border: 1px solid var(--color-gray-100);
    position: relative;
    display: flex;
    align-items: center;
    color: var(--fm-blue);
    font-size: 18px;
    font-weight: 700;
    gap: 25px;
    border: 1px solid var(--fm-blue);
    transition: all 0.4s ease-out;
    justify-content: center;
}

.procedure-card-linkbutton a{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.procedure-card-linkbutton-circle{
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background-color: #FACC15;
    position: relative;
}

.procedure-card-linkbutton-arrow{
    z-index: 1;
    display: none;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    border-top: solid 3px var(--fm-blue);
    border-right: solid 3px var(--fm-blue);
    transform: translate(33%,-50%) rotate(45deg);
    position: absolute;
    transition: all 0.4s ease-out;
    margin-right: 30px;
}

.procedure-card-linkbutton-text{
    margin-left: 40px;
    position: relative;
}
.procedure-card-linkbutton-text::after{
    content: "";
    z-index: 1;
    display: block;
    top: 50%;
    /* transform: translateY(-50%); */
    width: 10px;
    height: 10px;
    border-top: solid 3px var(--fm-blue);
    border-right: solid 3px var(--fm-blue);
    transform: translate(33%,-50%) rotate(45deg) translateX(-25px) translateY(25px);
    position: absolute;
    transition: all 0.4s ease-out;
    /* margin-right: 30px; */
}

.procedure-card-linkbutton i{
    font-size: 28px;
}

.procedure-card-linkbutton:hover{
    background-color: var(--fm-blue);
    color: #fff;
}

.procedure-card-linkbutton:hover .procedure-card-linkbutton-text::after{
    border-top: solid 3px #fff;
    border-right: solid 3px #fff;
}

/* --- 「私たちの強み」セクション --- */
.strong-section {
    padding-top: 1rem;
    padding-bottom: clamp(3rem, 9vw, 6rem);
    background: #ffffff;
}

/* グリッドレイアウト */
.strong-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 769px) {
    .strong-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .strong-ribbon {
        height: 5px !important;
    }
}

/* --- カード本体 --- */
.strong-card {
    position: relative;
    padding: 0 !important; /* 写真を端まで広げるため */
    overflow: hidden;
    height: clamp(200px, 52vw, 350px);
    border-radius: 1.5rem;
    box-shadow: var(--shadow-soft);
    transition: transform 0.3s ease;
    background-color: var(--color-white);
}


/* リンクをカード全体に広げる */
.strong-card a {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

/* --- 画像部分 --- */
.strong-hero-image {
    width: 100%;
    height: 100%;
}

.strong-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    transition: transform 0.5s ease;
}

.strong-card:hover .strong-hero-image img {
    transform: scale(1.1);
}

/* --- テキストエリア（写真の上に重なる部分） --- */
.strong-text-area {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box; /* paddingによるはみ出しを防止 */
    padding: 1rem 1.5rem 1rem;
    z-index: 5;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    transition: background 0.4s ease;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.4) 90%, transparent 100%);
}   

/* ホバー時に背景を少し濃くする */
/* .strong-card:hover .strong-text-area {
    background: linear-gradient(to top, rgba(0, 140, 214, 0.9) 0%, rgba(0, 140, 214, 0.4) 70%, transparent 100%);;
} */

/* --- タイトルと説明文 --- */
.strong-title {
    color: #ffffff !important;
    font-weight: bold;
    font-size: clamp(1.1rem, 2vw, 1.25rem);
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.strong-description {
    color: #ffffff !important;
    font-size: clamp(14px, 1.5vw, 16px);
    line-height: 1.6;
    margin: 0;
    width: 100%;
    box-sizing: border-box;
    word-wrap: break-word;
    
    /* 初期状態は非表示（高さ0） */
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.1s ease, margin 0.3s ease;
}

/* ホバー時に説明文を表示 */
/* .strong-card:hover .strong-description {
    max-height: 200px;
    opacity: 1;
    margin-top: 0.5rem;
} */

/* --- 装飾（リボン） --- */
.strong-ribbon {
    position: absolute;
    display: block;
    top: 0;
    left: 15%;
    width: 70%;
    height: 3px;
    z-index: 6; /* テキストエリアより上に */
}

.card-green .strong-ribbon { background-color: var(--fm-green);}
.card-blue .strong-ribbon { background-color: var(--fm-blue);}
.card-yellow .strong-ribbon { background-color: var(--color-yellow);}


/* .card-green .strong-ribbon { background: linear-gradient(to top, rgba(0, 163, 62, 0.9) 0%, rgba(0, 163, 62, 0.4) 70%, transparent 100%); }
.card-blue .strong-ribbon {  background: linear-gradient(to top, rgba(0, 140, 214, 0.9) 0%, rgba(0, 140, 214, 0.4) 70%, transparent 100%); }
.card-yellow .strong-ribbon { background: linear-gradient(to top, rgba(245, 158, 11, 0.9) 0%, rgba(245, 158, 11, 0.4) 70%, transparent 100%);} */

/* --- 「私たちの仕事について」セクション --- */
.work-section {
    padding-top: clamp(3rem, 9vw, 6rem);
    padding-bottom: clamp(3rem, 18vw, 12rem);
        background-color: #ffffff;
}

.section-title {
    font-size: clamp(17px,3.5vw,2.2rem) !important; /* text-3xl 相当 */
    font-weight: bold;
    color: var(--fm-dark);
}

.text-alarm {
    color: var(--color-red);
}

.title-underline {
    width: 4rem; /* w-16 相当 */
    height: 0.25rem; /* h-1 相当 */
    background-color: var(--color-gray-200);
    margin: 0.5rem auto 1rem; /* mx-auto mt-4 相当 */
    border-radius: 9999px;
}

/* 事業紹介 */

.business-content-wrapper{
    position: relative;
    max-width: 1000px;
    height: 550px;
    margin: 0 auto;
}

.business-ring{
    position: absolute;
    border: 5px solid #B3B3B3;
    border-radius: 50%;
    width: 500px;
    height: 500px;
    z-index: 1;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 1;
}

.busines-list{
    display: block;
    box-shadow: 1px 1px 4px #6e6e6e;
    border-radius: 15px;
    padding: 2rem 1rem;
    width: 330px;
    margin: 1rem;
    position: absolute;
    text-align: center;
    letter-spacing: 1.5px;
    transition: transform 0.3s;
    z-index: 2;
}

.busines-list:hover{
    transform: translateY(-8px);
}

.busines-list p{
    font-size: 20px;
    font-weight: 700;
    margin: 0;
    color: var(--fm-blue);
}

.busines-list-flex{
    display: flex;
    margin: 1rem 0 0;
}

.busines-list-icon{
    width: 45%;
    position: relative;
}

.busines-list-icon i{
    font-size: 60px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    color: #767676;
}

.busines-list-innerlist{
    width: 55%;
    text-align: left;
}

.busines-list-1{
    background-color: #E3F2FD;
    top: 0;
    left: 0;
}

.busines-list-2{
    background-color: #E8F5E9;
    top: 0;
    right: 0;
}

.busines-list-3{
    background-color: #FFF3E0;
    bottom: 0;
    left:  0;
}

.busines-list-4{
    background-color: #FFEBEE;
    bottom: 0;
    right: 0;
}

.busines-list-innerlist p{
    color: var(--fm-dark);
    font-size: 18px;
    font-weight: 400;
}

@media(max-width:1000px) and (min-width:680px){

    .business-ring{
        width: 400px;
        height: 400px;
    }

    .busines-list{
        width: 280px;
        padding: 1rem 0.5rem;
    }

    .busines-list-innerlist p{
        font-size: 16px;
    }

.busines-list-1{
    /* background-color: #D9E6FF; */
    top: 80px;
    left: 40px;
}

.busines-list-2{
    /* background-color: #C2E4D1; */
    top: 80px;
    right: 40px;
}

.busines-list-3{
    /* background-color: #FFF0B3; */
    bottom: 80px;
    left: 40px;
}

.busines-list-4{
    /* background-color: #FFDADA; */
    bottom: 80px;
    right: 40px;
}

}

@media(max-width:800px){

.busines-list-1{
    left: 0;
}

.busines-list-2{
    right: 0;
}

.busines-list-3{
    left: 0;
}

.busines-list-4{
    right: 0;
}

}

@media(max-width:680px){

.business-content-wrapper{
    display: block;
    width: 100%;
    height: auto;
}

.busines-list{
    margin: 0 auto 20px;
    position: static;
    display: block;
    padding: 2rem 1rem;
}

    .business-ring{
        display: none;
    }
}

@media(max-width:499px){

    .busines-list{
        width: 260px;
        padding: 1rem 0.5rem;
    }

    .busines-list p{
        font-size: 18px;
    }

    .busines-list-innerlist p{
        font-size: 15px;
    }
}





/* --- コラムセクション --- */
.column-swiper-slide {
  opacity: 0.5;             /* 薄くする */
  transition: transform 0.3s ease, opacity 0.3s ease; /* 変化を滑らかに */
}
.mySwiper2.swiper.is-looping .swiper-slide-active,
.mySwiper2.swiper.is-looping .swiper-slide-duplicate-active
{
    transform: scale(1.0) !important;
    opacity: 1;
}
.mySwiper2.swiper.is-looping .swiper-slide-active a,
.mySwiper2.swiper.is-looping .swiper-slide-duplicate-active a
{
    pointer-events: auto !important;
}
.mySwiper2 .swiper-slide{
    transform: scale(0.7);
    opacity: 0.5;
}
.mySwiper2 .swiper-slide a{
    pointer-events: none;
}
/* 中央（アクティブ）のスライドだけを強調する */
.mySwiper2.swiper.is-looping .swiper-slide-prev,
.mySwiper2.swiper.is-looping .swiper-slide-next,
.mySwiper2.swiper.is-looping .swiper-slide-duplicate-prev,
.mySwiper2.swiper.is-looping .swiper-slide-duplicate-next
{
  transform: scale(0.7);
  opacity: 0.5;
  
}
.mySwiper2.swiper.is-looping .swiper-slide-active {
  opacity: 1;
}

/* カードの中身が切れないように調整 */
.mySwiper2.swiper {
  overflow: hidden !important;
  position: relative; /* 両端をはみ出させて見せる */
}

/* 1枚だけの時はスライドさせない（ドラッグ無効） */
.mySwiper2.swiper-no-swiping {
  cursor: default;
}

/* リンクをカード全体に貼る場合の微調整 */

.column-swiper-slide img{
    width: 200px;
}

/* スライダーの外側に少し余白を（影が切れないように） */
.mySwiper2 {
  padding: 20px 0px 60px !important;
}

/* カードのデザイン */
.column-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
}

.column-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.12);
}

.card-img {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.column-card:hover .card-img img {
  transform: scale(1.1);
}

.category {
  position: absolute;
  top: 15px;
  left: 15px;
  background: #333;
  color: #fff;
  font-size: 11px;
  padding: 4px 12px;
  border-radius: 20px;
  text-transform: uppercase;
}

.card-body {
  padding: 25px;
}

.card-body time {
  font-size: 0.8rem;
  color: #999;
  display: block;
  margin-bottom: 10px;
}

.card-body h3 {
  font-size: 1.15rem;
  line-height: 1.5;
  margin-bottom: 15px;
  color: #333;
  /* 2行で省略する設定 */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-body p {
  font-size: 0.9rem;
  color: #666;
  line-height: 1.6;
  margin-bottom: 20px;
}
.card-link {
  display: block;
  text-decoration: none;
  height: 100%;
}

.more-link {
  font-size: 0.85rem;
  font-weight: bold;
  color: #333;
  text-decoration: none;
  border-bottom: 2px solid #ddd;
  transition: border-color 0.3s;
}

.more-link:hover {
  border-color: #333;
}

/* Swiperのナビボタンの色調整 */
.swiper-button-next, .swiper-button-prev {
    color: #fff !important;
    background-color: var(--fm-green);
    border-radius: 100px;
    width: 4.5rem;
    height: 4.5rem;
    transition: 0.25s;
    z-index: 1;
}

.swiper-button-next{
    left: calc((110.7% / 1.2) + (50px / 2));
    right: auto;
    transform: translateX(-50%);
}
.swiper-button-prev{
    right: calc((110.7% / 1.2) + (50px / 2));
    left: auto;
    transform: translateX(50%);
}
.swiper-button-prev::after ,.swiper-button-next::after{
    font-size: 22px;
}

.column-section {
    padding-top: 1rem;
    padding-bottom: 16rem;
    background: #fff;
}
.column-section .container{
    padding-left: 0;
    padding-right: 0;
}
.card-body {
        position: relative;
        height: 150px;
    }
.card-body a {
        position: absolute;
        bottom: 18px;
    }
@media (max-width: 839px) {
    .swiper-button-next{
        display: none;
    }
    .swiper-button-prev{
        display: none;
    }
}
@media (max-width: 768px) {
    .column-section {
        padding-top: clamp(2rem,9vw,3.5rem); 
        padding-bottom: clamp(2rem,9vw,3.5rem);
    }
    .column-section .container{
        padding: 0;
    }
    .card-body {
        padding: clamp(10px,3.5vw,25px);
    }
    .card-body h3 {
        font-size: clamp(0.9rem,2.5vw,1.15rem);
        line-height: 1.;
        margin-bottom: 5px;
    }
    .card-body p {
        line-height: 1;
    }

    
}

/* --- 採用セクション --- */
.recruit-section {
    padding-top: 1rem;
    padding-bottom: 6rem;
    background-color: var(--color-white);
    position: relative;
    overflow: hidden;
}

.recruit-bg-shape {
    position: absolute;
    top: auto;
    right: 0;
    width: 33.3333%; /* w-1/3 相当 */
    height: 100%;
    background-color: #eff6ff; /* bg-blue-50 相当 */
    transform: skewX(12deg);
    transform-origin: top;
    z-index: 0;
}

.recruit-inner {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column; /* flex-col 相当 */
    gap: 4rem; /* gap-16 相当 */
    align-items: center;
}

@media (min-width: 1024px) {
    .recruit-inner {
        flex-direction: row; /* lg:flex-row 相当 */
    }
    .recruit-content {
        width: 50%; /* lg:w-1/2 相当 */
    }
    .recruit-image-area {
        width: 50%; /* lg:w-1/2 相当 */
    }
}

.recruit-sub-heading {
    color: var(--fm-blue);
    font-weight: bold;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: 0.875rem; /* text-sm 相当 */
    margin-bottom: 0.5rem; /* mb-2 相当 */
    display: block;
}

.recruit-title {
    font-size: 2rem; /* text-3xl/5xl 相当 */
    font-weight: bold;
    margin-bottom: 1.5rem; /* mb-6 相当 */
    color: var(--fm-dark);
    line-height: 1.4;
}

@media (min-width: 768px) {
    .recruit-title {
        font-size: 3rem;
    }
}

.recruit-title .text-blue-highlight {
    color: var(--fm-blue);
}

.recruit-description {
    color: var(--color-gray-600);
    font-size: 1.125rem; /* text-lg 相当 */
    line-height: 1.625; /* leading-relaxed 相当 */
    margin-bottom: 2rem; /* mb-8 相当 */
}

.recruit-advantage-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr)); /* grid-cols-1 相当 */
    gap: 1rem; /* gap-4 相当 */
    margin-bottom: 2.5rem; /* mb-10 相当 */
}

@media (min-width: 640px) {
    .recruit-advantage-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)); /* sm:grid-cols-2 相当 */
    }
}

.advantage-item {
    display: flex;
    align-items: center;
    gap: 0.75rem; /* gap-3 相当 */
    background-color: var(--color-gray-50);
    padding: 1rem; /* p-4 相当 */
    border-radius: 0.5rem; /* rounded-lg 相当 */
    border: 1px solid var(--color-gray-100);
}

.advantage-icon-wrapper {
    width: 2.5rem; /* w-10 h-10 相当 */
    height: 2.5rem;
    background-color: var(--color-white);
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* shadow-sm 相当 */
}

.item-green .advantage-icon-wrapper { color: var(--fm-green); }
.item-blue .advantage-icon-wrapper { color: var(--fm-blue); }
.item-yellow .advantage-icon-wrapper { color: var(--color-yellow); }
.item-red .advantage-icon-wrapper { color: #f87171; /* red-400 相当 */ }

.advantage-text {
    font-weight: bold;
    font-size: 0.875rem; /* text-sm 相当 */
    color: var(--color-gray-700);
}

.button-dark {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background-color: var(--fm-dark);
    color: var(--color-white);
    padding: 1rem 2rem; /* px-8 py-4 相当 */
    border-radius: 9999px;
    font-weight: bold;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); /* shadow-lg 相当 */
    transition: background-color 0.3s ease;
}

.button-dark:hover {
    background-color: #3f3f46; /* hover:bg-gray-800 相当 */
}

.recruit-image-area {
    position: relative;
}

.recruit-image-frame {
    position: relative;
    z-index: 10;
    border-radius: 1.5rem; /* rounded-3xl 相当 */
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); /* shadow-2xl 相当 */
    transform: rotate(2deg);
    transition: transform 0.5s ease;
}

.recruit-image-area:hover .recruit-image-frame {
    transform: rotate(0deg);
}

.recruit-image {
    width: 100%;
    height: auto;
    display: block;
}

.recruit-image-border {
    position: absolute;
    top: 1rem; /* top-4 相当 */
    left: -1rem; /* -left-4 相当 */
    width: 100%;
    height: 100%;
    border: 2px solid var(--fm-green);
    border-radius: 1.5rem; /* rounded-3xl 相当 */
    z-index: -10; /* -z-10 相当 */
}

/* --- コンタクトセクション --- */
.contact-section {
    padding-top: 5rem; /* py-20 相当 */
    padding-bottom: 5rem;
    background-color: var(--color-white);
}

.contact-card {
    background: linear-gradient(to right, var(--fm-blue), var(--color-blue-600));
    border-radius: 1.5rem; /* rounded-3xl 相当 */
    padding: 2rem; /* p-8 相当 */
    text-align: center;
    color: var(--color-white);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); /* shadow-2xl 相当 */
    position: relative;
    overflow: hidden;
}

@media (min-width: 768px) {
    .contact-card {
        padding: 4rem; /* md:p-16 相当 */
    }
}

.contact-card-pattern {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('https://www.transparenttextures.com/patterns/cubes.png');
    opacity: 0.1;
}

.contact-content {
    position: relative;
    z-index: 10;
}

.contact-title {
    font-size: 1.875rem; /* text-3xl/4xl 相当 */
    font-weight: bold;
    margin-bottom: 1.5rem; /* mb-6 相当 */
}

@media (min-width: 768px) {
    .contact-title {
        font-size: 2.25rem;
    }
}

.contact-subtitle {
    font-size: 1.125rem; /* text-lg 相当 */
    margin-bottom: 2.5rem; /* mb-10 相当 */
    color: #bfdbfe; /* blue-100 相当 */
}

.contact-options {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.5rem; /* gap-6 相当 */
}

@media (min-width: 768px) {
    .contact-options {
        flex-direction: row;
    }
}

.contact-option-tel {
    background-color: var(--color-white);
    color: var(--fm-dark);
    padding: 1.5rem; /* p-6 相当 */
    border-radius: 0.75rem; /* rounded-xl 相当 */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); /* shadow-lg 相当 */
    flex: 1;
    max-width: 24rem; /* max-w-sm 相当 */
    margin: 0 auto;
    transition: transform 0.3s ease;
}

.contact-option-tel:hover {
    transform: translateY(-4px); /* hover:-translate-y-1 相当 */
}

.tel-label {
    font-size: 0.875rem; /* text-sm 相当 */
    font-weight: bold;
    color: var(--color-gray-500);
    margin-bottom: 0.25rem; /* mb-1 相当 */
}

.tel-number {
    font-size: 1.875rem; /* text-3xl 相当 */
    font-weight: 900; /* font-black 相当 */
    color: var(--fm-blue);
}

.tel-hours {
    font-size: 0.75rem; /* text-xs 相当 */
    color: var(--color-gray-400);
    margin-top: 0.25rem; /* mt-1 相当 */
}

.contact-option-web {
    background-color: var(--fm-green);
    color: var(--color-white);
    padding: 1.5rem;
    border-radius: 0.75rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    flex: 1;
    max-width: 24rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.contact-option-web:hover {
    background-color: #059669; /* hover:bg-green-600 相当 */
    transform: translateY(-4px);
}

.web-label {
    font-size: 1.125rem; /* text-lg 相当 */
    font-weight: bold;
    margin-bottom: 0.5rem; /* mb-2 相当 */
}

.web-button {
    background-color: rgba(255, 255, 255, 0.2); /* bg-white/20 相当 */
    padding: 0.25rem 1.5rem; /* px-6 py-1 相当 */
    border-radius: 9999px;
    font-size: 0.875rem; /* text-sm 相当 */
}



/* --- セクションタイトルの装飾 --- */
.section-title {
    position: relative;
    display: inline-block; 
    padding: 0rem 1.5rem 1rem; 
    margin-bottom: 3rem;
    margin-top: 0;
    color: var(--fm-green);
}

/* .section-subtitle{
    font-size: 4rem;
    margin-bottom: 0;
    letter-spacing: 5px;
    font-weight: bold;
    color: var(--fm-green);
} */

@media (max-width: 768px) {
    .section-heading {
        margin-bottom: clamp(1rem, 4vw, 4rem);
    }
    .section-subtitle{
        font-size: clamp(10px,1vw,12px);
    }
}

@media (max-width: 839px) {
    .section-title {
        margin-bottom: 1rem;
    }
}

/* 共通の線の設定 */
/* .section-title::before,
.section-title::after {
    content: "";
    position: absolute;
    height: 2px; 
    width: 100%; 
    z-index: -1; 
    opacity: 0.7; 
}

.section-title::before {
    bottom: 10px;
    left: -10px;
    background-color: var(--fm-blue); 
    transform: rotate(-1deg); 
}

.section-title::after {
    bottom: 5px;
    left: 10px;
    background-color: var(--fm-green); 
    transform: rotate(-6deg); 
    width: 110%; 
} */

/* ヒーローセクションのタイトルは対象外にする場合 */
/* #hero .section-title {
    padding: 0;
    background: none;
}
#hero .section-title::before,
#hero .section-title::after {
    content: none;
} */

/* パララックス背景のコンテナ */
.parallax-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* コンテンツの背面に配置 */
    will-change: transform; /* アニメーションを滑らかにする */
}

/* 線の共通スタイル */
.p-line {
    position: absolute;
    width: 200vw;
    height: 2px;
    opacity: 0.5; /* 複数ある場合は少し薄めが上品です */
    will-change: transform;
}

/* --- 1セット目の位置 --- */
.p-line-blue-1 { top: 55%; right: -50%; background-color: var(--fm-blue); transform: rotate(-7deg); }
.p-line-green-1 { top: 53.5%; left: -50%; background-color: var(--fm-green); transform: rotate(-15deg); }

/* --- 2セット目の位置（1セット目より下にずらす） --- */
.p-line-blue-2 {
    display: none;
    top: 53%; /* ここで高さを調整 */
    right: -50%;
    background-color: var(--fm-blue);
    transform: rotate(12deg); /* 少し角度を変えるとより自然です */
}

.p-line-green-2 {
    display: none;
    top: 55.5%; /* ここで高さを調整 */
    left: -50%;
    background-color: var(--fm-green);
    transform: rotate(5deg);
}


/* ニュース赤文字 */
.news-item-red{
    color: #EF4444;
    font-weight: 600;
}

.news-item.no-link-item {
    cursor: default; /* カーソルを通常のマウス矢印に戻す */
    pointer-events: none; /* ホバーエフェクトなどを無効化する場合 */
}