/* ==========================================
   共通設定
========================================== */

/* ブラウザごとの余白をリセット */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ページ全体 */
body {
    font-family: "Yu Gothic", "Hiragino Sans", sans-serif;
    color: #333;
    background: #f6fbff;
    line-height: 1.8;
}

/* 画像 */
img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* リンク */
a {
    color: inherit;
    text-decoration: none;
}

/* セクション共通 */
section {
    padding: 60px 0;
}

/* コンテンツ横幅 */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 見出し */

.section-title {

    font-family: "Yu Mincho", serif;
    font-size: 26px;
    font-weight: 600;
    color: #003366;
    text-align: center;
    margin-bottom: 40px;
    letter-spacing: 0.08em;

}



/* ==========================================
   Header
========================================== */

header {

    width: 100%;
    background: #f6fbff;
    border-bottom: 1px solid #dddddd;

}


.header-inner {

    max-width: 1200px;
    margin: 0 auto;

    padding: 20px;

    display: flex;
    justify-content: space-between;

    align-items: flex-end; 

}


.logo {

    font-family: "Yu Mincho", serif;
    font-size: 28px;
    font-weight: 600;
    color: #003366;
    letter-spacing: 0.12em;

}


.logo a {
    display: inline-block;
    color: #003366;
    border-left: 5px solid #4A90C2;
    padding-left: 12px;
}


.header-contact {

    text-align: right;

}


.tel-number {

    display: block;

    font-size: 26px;
    font-weight: bold;
    color: #004CA0;

}


.business-hours {

    margin-top: -2px;
    font-size: 13px;
    color: #555555;
    line-height: 1.4;

}


/* ==========================================
   Hero
========================================== */

#hero {

    padding: 0;

}

.hero-image{

    position: relative;

    height: 300px;

    overflow: hidden;

}

#hero-image img {

    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;

}

.hero-overlay{

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:100%;

    background:rgba(255,255,255,0.60);

}

.hero-text{

    position:absolute;

    top:50%;
    left:10%;

    transform:translateY(-50%);

    max-width:600px;

}

.hero-text h2{

    font-size:48px;

    font-family:"Yu Mincho", serif;

    color:#004CA0;

}

.hero-text p{

    margin-top:20px;

    font-size:20px;

    font-family: "Yu Gothic", sans-serif;

    color:#004CA0;

}


/* ==========================================
   Feature
========================================== */

#feature {

    background: #eef6fb;

}

.feature-list {

    display: flex;
    flex-direction: column;
    gap: 40px;

}


/* カード */

.feature-item {

    display: flex;

    align-items: center;

    gap: 28px;

    padding: 0 0 0 24px;

    background: #ffffff;

    border-radius: 0;

    box-shadow: 0 6px 16px rgba(0,0,0,0.08);

}


/* 番号 */

.feature-number {

    width: 64px;
    height: 64px;

    flex-shrink: 0;

    display: flex;

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

    background: #4A90C2;

    color: #ffffff;

    border-radius: 50%;

    font-size: 24px;

    font-weight: bold;

}


/* テキスト */

.feature-content {

    flex: 1;

    padding:18px 0;

}

.feature-content h3 {

    margin-bottom: 12px;

    font-size: 24px;

    color: #003366;

}

.feature-content p {

    font-size: 16px;

    line-height: 1.7;

    color: #333333;

}


/* 画像 */

.feature-image {

    width: 330px;

    height: 180px;

    flex-shrink: 0;

    overflow: hidden;

}

.feature-image img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;

}



/* ==========================================
   About
========================================== */

#about{

    background:#eef6fb;

}


/* 共通カード */

.about-card{

    display:flex;

    gap:28px;

    align-items:center;

    background:#ffffff;

    padding:20px;

    margin-bottom:28px;

    box-shadow:0 6px 16px rgba(0,0,0,.08);

}


/* 画像 */

.about-image{

    width:300px;

    height:220px;

    flex-shrink:0;

    overflow:hidden;

}

.about-image img{

    width:100%;
    height:100%;

    object-fit:cover;
    transform: scale(1.15);

}

.representative-image img {
    
    object-position: center 20%;

}


/* 内容 */

.about-content{

    flex:1;

    padding:0;

}

.about-content h3{

    font-size:24px;

    color:#003366;

    margin-bottom:18px;

}

.about-content p{

    font-size:16px;

    line-height:1.8;

}


/* 表 */

.about-table{

    width:100%;

    border-collapse:collapse;

}

.about-table th{

    width:120px;

    text-align:left;

    color:#003366;

    padding:10px 0;

    vertical-align:top;

}

.about-table td{

    padding:10px 0;

}


/* アクセス */

.access-card{

    background:#ffffff;

    padding:28px;

    box-shadow:0 6px 16px rgba(0,0,0,.08);

}

.access-card h3{

    font-size:24px;

    color:#003366;

    margin-bottom:16px;

}

.access-card p{

    line-height:1.8;

    margin-bottom:24px;

}


/* GoogleMap */

.about-map{

    width:100%;

    height:320px;

    overflow:hidden;

}

.about-map iframe{

    width:100%;

    height:100%;

    border:0;

}



/* ==========================================
   Links
========================================== */

#links{

    background:#ffffff;

}

.link-list{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:16px 40px;

}


.link-list a{
    
    display:flex;

    justify-content: space-between;

    align-items: center;
    
    padding:12px 16px;
    
    background:#fafcff;
    
    border:1px solid #d6d6d6;
    
    border-left:4px solid #4A90C2;
    
    color:#003366;
    
    transition:0.2s;

}

.link-list a:hover{
    
    background:#eef6fb;
    
    border-left-color:#003366;
    
}

.link-list a::after{

    content:"›";

    font-size:20px;

    color:#4A90C2;

    transition:0.2s;

}

.link-list a:hover::after{

    transform:translateX(4px);

}

/* ==========================================
   Contact
========================================== */

#contact-cta {
    padding: 55px 0;
    background: #eef6fb;
}

.contact-cta-inner {
    text-align: center;
}

.contact-cta-inner h2 {
    margin-bottom: 10px;
    font-family: "Yu Mincho", serif;
    font-size: 26px;
    font-weight: 600;
    color: #003366;
}

.contact-cta-button {
    display: inline-block;
    padding: 11px 45px;
    background: #004CA0;
    color: #fff;
    border: 1px solid #004CA0;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 0.08em;
    transition: 0.2s;
}

.contact-cta-button:hover {
    background: #003366;
    border-color: #003366;
}



/* ==========================================
   Footer
========================================== */

footer{

    background:#003366;

    color:#ffffff;
    
    border-top:4px solid #4A90C2;

}

.footer-inner{

    max-width:1200px;

    margin:0 auto;

    padding:20px;

    text-align:center;

}

.footer-inner p{

    margin:4px 0;

    font-size:13px;

    line-height:1.6;

}



/* ==========================================
   Responsive
========================================== */

@media screen and (max-width:768px) {

    .header-inner {

        padding: 15px;

    }

    .logo {
        
        font-size: 18px;
    
    }

    .tel-number {
        
        font-size: 16px;
    
    }

    .business-hours {
        
        font-size: 11px;

    }

    .section-title {
        
        font-size: 22px;
    
    }

    /* Hero */

    .hero-image {
        
        height: 220px;
    
    }

    .hero-text h2 {
        
        font-size: 28px;
    
    }

    .hero-text p {

        font-size: 15px;

    }


    /* Feature */
    
    .feature-item{

        flex-direction: column;
        padding: 20px 0 0;
        gap: 0;

    }
    
    .feature-number{

        margin: 0 auto 8px;
        width: 50px;
        height: 50px;
        font-size: 20px;

    }

    .feature-content{
        
        padding: 0 20px 15px;

    }

    .feature-image{

        width: 100%;
        height: 240px;

    }

    /* About */

    .about-card{
        
        flex-direction:column;
    
    }

    .about-image{
        
        width:100%;
        
        height:240px;
    
    }

    .about-image img {

        transform: scale(1.06);

    }

    .about-content{
        
        padding:24px 10px;
    
    }

    /* Contact */

    #contact-cta {
        padding: 45px 0;
    }

    .contact-cta-inner h2 {
        font-size: 23px;
    }

    .contact-cta-button {
        padding: 10px 32px;
        font-size: 14px;
    }

}