/* * PC・共通スタイルシート
 * Tailwind CSSのユーティリティでカバーしきれないカスタムアニメーション等を定義
 */

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-fade-up {
    animation: fadeUp 1s ease-out forwards;
}

.glass-panel {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
}

/* ヒーロースライドショー用アニメーション (20秒周期、各5秒表示) */
@keyframes fadeShow {
    0%   { opacity: 0; transform: scale(1.05); }
    5%   { opacity: 1; transform: scale(1); }
    25%  { opacity: 1; transform: scale(1); }
    30%  { opacity: 0; transform: scale(1.05); }
    100% { opacity: 0; transform: scale(1.05); }
}

.hero-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    animation: fadeShow 20s infinite ease-in-out;
}

.hero-slide-1 { animation-delay: 0s; }
.hero-slide-2 { animation-delay: 5s; }
.hero-slide-3 { animation-delay: 10s; }
.hero-slide-4 { animation-delay: 15s; }

/* HIS Brand Colors */

.text-brand-blue{
    color:#00A0E9;
}

.text-brand-dark{
    color:#004986;
}

.text-brand-orange{
    color:#ff9900;
}

.bg-brand-blue{
    background:#00A0E9;
}

.bg-brand-light{
    background:#f2faff;
}

.bg-brand-dark{
    background:#004986;
}

.bg-brand-button{
    background:#1a368b;
}

.border-brand-blue{
    border-color:#00A0E9;
}

.border-brand-dark{
    border-color:#004986;
}

.hover\:bg-brand-blue:hover{
    background:#00A0E9;
}

.hover\:text-white:hover{
    color:#fff;
}

.text-brand-blue{color:#00A0E9;}
.text-brand-dark{color:#004986;}
.text-brand-orange{color:#ff9900;}

.bg-brand-blue{background:#00A0E9;}
.bg-brand-light{background:#f2faff;}
.bg-brand-dark{background:#004986;}
.bg-brand-orange{background:#ff9900;}
.bg-brand-button{background:#1a368b;}

.border-brand-blue{border-color:#00A0E9;}
.border-brand-dark{border-color:#004986;}

/* Tailwind v3代替 */

.aspect-\[4\/3\]{
    aspect-ratio:4/3;
}

.aspect-\[16\/9\]{
    aspect-ratio:16/9;
}

.h-\[80vh\]{
    height:80vh;
}

.max-h-\[70vh\]{
    max-height:70vh;
}

.pt-\[60px\]{
    padding-top:60px;
}

@media (min-width:768px){
    .md\:pt-\[104px\]{
        padding-top:104px;
    }
}

.bg-brand-dark\/60{
    background-color:rgba(0,73,134,.6);
}

.bg-brand-dark\/70{
    background-color:rgba(0,73,134,.7);
}

.bg-brand-dark\/85{
    background-color:rgba(0,73,134,.85);
}

.bg-brand-blue\/80{
    background-color:rgba(0,160,233,.8);
}

.border-brand-blue\/20{
    border-color:rgba(0,160,233,.2);
}

.border-white\/10{
    border-color:rgba(255,255,255,.1);
}

.border-white\/50{
    border-color:rgba(255,255,255,.5);
}

.bg-brand-light{
    background:#f2faff;
}

.bg-brand-blue{
    background:#00A0E9;
}

.bg-brand-dark{
    background:#004986;
}

.bg-brand-orange{
    background:#ff9900;
}

.bg-brand-button{
    background:#1a368b;
}

.text-brand-blue{
    color:#00A0E9;
}

.text-brand-dark{
    color:#004986;
}

.text-brand-orange{
    color:#ff9900;
}

.border-brand-blue{
    border-color:#00A0E9;
}

/* Hero Overlay */

.bg-gradient-to-b{
    background-image: linear-gradient(to bottom,
        rgba(0,73,134,.7) 0%,
        rgba(0,0,0,.3) 50%,
        rgba(0,73,134,.7) 100%);
}

/* Hover Animation */

.transition-all{
    transition: all .3s ease;
}

.transition-colors{
    transition: color .3s ease,
                background-color .3s ease,
                border-color .3s ease;
}

.transition-transform{
    transition: transform .3s ease;
}

.hover\:scale-105:hover{
    transform: scale(1.05);
}

.group:hover .group-hover\:scale-105{
    transform: scale(1.05);
}

.hover\:bg-orange-600:hover{
    background:#ea580c;
}

.hover\:bg-blue-600:hover{
    background:#2563eb;
}

.hover\:bg-blue-900:hover{
    background:#1e3a8a;
}

.hover\:text-brand-orange:hover{
    color:#ff9900;
}

.hover\:text-white:hover{
    color:#fff;
}

.group:hover .group-hover\:text-white{
    color:#fff;
}

.group:hover .group-hover\:text-brand-blue{
    color:#00A0E9;
}

.group:hover .group-hover\:border-brand-blue{
    border-color:#00A0E9;
}

.group:hover .group-hover\:border-brand-orange{
    border-color:#ff9900;
}

.group:hover .group-hover\:scale-105{
    transform:scale(1.05);
}

a.group:hover .group-hover\:text-brand-orange,
.group:hover span.group-hover\:text-brand-orange{
    color:#ff9900 !important;
}

.staff-blog-section{
    padding:50px 0;
    background:#eef5f8;
}

.staff-blog-link{
    position:relative;
    display:block;
    max-width:1200px;
    margin:auto;
}

.staff-blog-bg{
    width:100%;
    height:400px;
    object-fit:cover;
    border-radius:10px;
    display:block;
}

.staff-blog-overlay{
    position:absolute;
    inset:0;

    display:flex;
    align-items:center;
    justify-content:center;

    background:rgba(0,0,0,.25);
}

.staff-blog-card{
    background:#fff;
    padding:50px;

    width:80%;
    max-width:700px;

    border-radius:8px;
    text-align:center;

    box-shadow:0 10px 30px rgba(0,0,0,.15);
}

.staff-blog-label{
    display:block;
    color:#0094ff;
    font-weight:bold;
    letter-spacing:.2em;
    margin-bottom:20px;
}

.staff-blog-card h3{
    font-size:2rem;
    line-height:1.7;
    font-weight:bold;
}

.staff-blog-btn{
    display:inline-block;
    margin-top:30px;
    color:#0094ff;
    font-weight:bold;
}

.staff-blog-overlay{
    position:absolute;
    inset:0;

    background:rgba(0,40,80,.35);

    display:flex;
    align-items:center;
    justify-content:center;

    transition:.3s;
}

.staff-blog-link:hover .staff-blog-overlay{
    background:rgba(0,40,80,.55);
}

.staff-blog-link{
    overflow:hidden;
    border-radius:10px;
}

.staff-blog-bg{
    transition:transform .5s ease;
}

.staff-blog-link:hover .staff-blog-bg{
    transform:scale(1.05);
}

.staff-blog-link:hover .staff-blog-btn{
    color:#ff7a00;
}

.staff-blog-btn{
    display:inline-block;
    margin-top:20px;
    color:#0094ff;
    font-weight:bold;
    border-bottom:1px solid #0094ff;
    padding-bottom:3px;
    transition:all .3s ease;
}

.staff-blog-link:hover .staff-blog-btn{
    color:#ff7a00;
    border-color:#ff7a00;
}

.rank-1{
    background:#f6c343;
}

.rank-2{
    background:#b0b7c3;
}

.rank-3{
    background:#cd7f32;
}