/*
Theme Name: iicrest
Version:1.0
*/

/* ======================
RESET
====================== */

*{
box-sizing:border-box;
margin:0;
padding:0;
}

body{
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial;
line-height:1.7;
color:#333;
background:#fff;
}

img{
max-width:100%;
height:auto;
display:block;
}

a{
text-decoration:none;
color:#333;
}

/* ======================
LAYOUT
====================== */

.container{
max-width:1100px;
margin:auto;
padding:0 20px;
}

/* ======================
HEADER
====================== */

.site-header{
position:absolute;
top:0;
left:0;
width:100%;
z-index:1000;
}

.header-inner{
display:flex;
justify-content:space-between;
align-items:center;
padding:24px 0;
}

.site-header .logo img{
width:180px;
height:auto;
}

/* NAV */

.main-nav ul{
display:flex;
gap:40px;
list-style:none;
}

.main-nav a{
color:#fff;
font-weight:600;
font-size:14px;
letter-spacing:0.05em;
}

/* BURGER */

.menu-toggle{
display:none;
font-size:26px;
color:#fff;
cursor:pointer;
}

/* ======================
HERO
====================== */

.hero{
height:750px;
background:url('./images/hero.webp') center / cover no-repeat;
display:flex;
align-items:center;
}

.hero > div{
max-width:1100px;
width:100%;
margin:auto;
padding:0 20px;
display:flex;
flex-direction:column;
align-items:flex-end;
}

.hero h1{
font-size:64px;
font-weight:700;
line-height:1.2;
color:#000;
margin-bottom:24px;
letter-spacing:0.02em;
text-align:right;
}

.hero p{
font-size:22px;
letter-spacing:0.12em;
color:#000;
text-align:right;
}

.hero-title span{
display:block;
opacity:0;
transform:translateY(40px);
}

.hero-title span:nth-child(1){
animation:heroFadeUp 1s 0.3s forwards;
}

.hero-title span:nth-child(2){
animation:heroFadeUp 1s 0.7s forwards;
}

@keyframes heroFadeUp{
to{
opacity:1;
transform:translateY(0);
}
}

/* ======================
SECTION
====================== */

section{
padding:100px 0;
}

/* 見出し */
.container h2,
.sp-title{
font-size:28px;
margin-bottom:12px;
position:relative;
display:inline-block;
padding-bottom:8px;
}

/* 下線 */
.container h2::after,
.sp-title::after{
content:"";
position:absolute;
left:0;
bottom:0;
width:100%;
height:3px;
background:#CFDB00;

transform:scaleX(0);
transform-origin:left;
animation:lineGrow 0.8s ease forwards;
}

@keyframes lineGrow{
to{
transform:scaleX(1);
}
}

.container p{
font-size:16px;
line-height:1.7;
margin:6px 0;
max-width:900px;
word-break:keep-all;
overflow-wrap:break-word;
}

/* ======================
ABOUT
====================== */

.about{
background:#CBEA41;
}

/* ======================
SERVICE
====================== */

.service{
padding:100px 0;
}

.service-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:40px;
margin-top:16px;
}

.service-item{
text-align:center;
opacity:0;
transform:translateY(40px);
transition:all .8s ease;
}

.service.visible .service-item{
opacity:1;
transform:translateY(0);
}

.service-item:nth-child(2){transition-delay:.1s;}
.service-item:nth-child(3){transition-delay:.2s;}
.service-item:nth-child(4){transition-delay:.3s;}
.service-item:nth-child(5){transition-delay:.4s;}

.service-item img{
width:100%;
height:220px;
object-fit:cover;
margin-bottom:10px;
}

.service-item h3{
font-size:18px;
}

/* ======================
NEWS LIST
====================== */

.news{
background:#F4F5E2;
}

.news-list{
list-style:none;
margin-top:16px;
max-width:700px;
}

.news-list li{
display:flex;
gap:20px;
border-bottom:1px solid #eee;
padding:14px 0;
font-size:16px;
}

.news-date{
width:120px;
color:#888;
}

/* ======================
FOOTER
====================== */

.site-footer{
background:#CFDB00;
padding:70px 0;
}

.site-footer .container{
display:flex;
justify-content:space-between;
align-items:flex-end;
}

.site-footer p{
margin:0;
font-size:13px;
}

.footer-logo img{
width:180px;
}

/* ======================
COMPANY
====================== */

.company-hero{
background:
linear-gradient(rgba(0,0,0,.3), rgba(0,0,0,.3)),
url('./images/company-bg.webp') center / cover no-repeat;
min-height:900px;
padding:120px 0;
}

.company-content{
background:rgba(255,255,255,0.92);
padding:80px;
max-width:900px;
margin:0 auto;
}

.company-table{
width:100%;
border-collapse:collapse;
}

.company-table th{
width:200px;
text-align:left;
padding:16px 0;
border-bottom:1px solid #ddd;
}

.company-table td{
padding:16px 0;
border-bottom:1px solid #ddd;
}

/* ======================
NEWS ARTICLE
====================== */

.news-hero{
background:
linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.35)),
url('./images/hero.webp') center / cover no-repeat;
min-height:900px;
display:flex;
align-items:center;
}

.news-overlay{
width:100%;
padding:120px 0;
}

.news-article{
background:rgba(255,255,255,.92);
padding:80px;
max-width:760px;
margin:auto;
}

.news-title{
font-size:32px;
margin-bottom:10px;
}

.news-date{
color:#888;
margin-bottom:30px;
}

.news-content{
line-height:1.9;
}

/* ======================
MOBILE
====================== */

@media(max-width:768px){

.site-header .logo img{
margin-left:16px;
}

.menu-toggle{
display:block;
margin-right:16px;
}

.main-nav{
display:none;
position:absolute;
top:70px;
left:0;
width:100%;
background:#000;
}

.main-nav.active{
display:block;
}

.main-nav ul{
flex-direction:column;
padding:20px;
gap:20px;
}

.hero{
height:65vh;
min-height:420px;
background:url('./images/hero-sp-highres.webp') center top / cover no-repeat;
}

.hero h1{
font-size:34px;
line-height:1.3;
}

.hero p{
font-size:16px;
}

.service-grid{
grid-template-columns:1fr;
gap:25px;
}

.news-list li{
flex-direction:column;
gap:5px;
}

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

.site-footer .container{
display:block;
}

.footer-logo{
text-align:center;
margin-bottom:16px;
}

.footer-logo img{
margin:auto;
}

.site-footer p{
margin-top:12px;
line-height:1.8;
}

.company-hero{
background:
linear-gradient(rgba(0,0,0,.3), rgba(0,0,0,.3)),
url('./images/company-bg-mobile.webp') center / cover no-repeat;
min-height:auto;
padding:120px 0 80px;
}

.company-content{
width:90%;
margin:auto;
padding:30px 20px;
}

.company-content h1{
font-size:28px;
margin-bottom:30px;
}

.company-table th,
.company-table td{
display:block;
width:100%;
padding:12px 0;
}

.company-table th{
font-weight:700;
border-bottom:none;
}

.company-table td{
border-bottom:1px solid #ddd;
margin-bottom:12px;
}

.news-hero{
background:
linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.35)),
url('./images/news-bg-mobile.webp') center / cover no-repeat;
min-height:auto;
padding:120px 0 60px;
}

.news-article{
padding:30px 20px;
}

.news-title{
font-size:24px;
}

.news-content{
font-size:15px;
}

}

/* BURGER MENU FIX */

@media(max-width:768px){

.main-nav{
display:none !important;
}

.main-nav.active{
display:block !important;
}

}

/* SERVICE PAGE */

.sp-hero{
background:
linear-gradient(rgba(0,0,0,.3), rgba(0,0,0,.3)),
url('./images/service-bg.webp') center / cover no-repeat;
min-height:900px;
display:flex;
align-items:center;
}

.sp-title{
font-size:40px;
color:#fff;
text-align:center;
margin-bottom:80px;
}

.sp-list{
display:flex;
flex-direction:column;
gap:60px;
max-width:900px;
margin:0 auto;
}

.sp-item{
display:flex;
gap:40px;
align-items:center;
background:rgba(255,255,255,0.92);
padding:40px;
border-radius:10px;
box-shadow:0 10px 30px rgba(0,0,0,0.08);
}

.sp-img{
width:320px;
flex-shrink:0;
}

.sp-img img{
width:100%;
height:auto;
}

.sp-text{
flex:1;
}

.sp-text h3{
font-size:22px;
margin-bottom:12px;
}

.sp-text p{
line-height:1.8;
}

/* MOBILE */

@media(max-width:768px){

.sp-hero{
display:block;
min-height:auto;
padding:120px 0 60px;
}

.sp-title{
font-size:28px;
margin-bottom:40px;
}

.sp-list{
width:92%;
gap:30px;
}

.sp-item{
display:block;
text-align:center;
padding:24px;
}

.sp-img{
width:100%;
margin-bottom:16px;
}

.sp-text h3{
font-size:18px;
}

.sp-text p{
font-size:14px;
line-height:1.7;
text-align:left;
}

.sp-text br{
display:none;
}

}

/* Service more */

.service-more{
max-width:1100px;
margin:40px auto 0;
text-align:right;
padding:0 20px;
}

.service-more a{
display:inline-block;
font-size:16px;
font-weight:600;
color:#333;
text-decoration:none;
border-bottom:2px solid #CFDB00;
padding-bottom:4px;
transition:0.3s;
}

.service-more a:hover{
opacity:0.6;
}

/* スマホ */

@media (max-width:768px){

.service-more{
text-align:center;
margin-top:30px;
}

}

/* FLOW */

.flow{
position:relative;
background:url("images/flow-bg.webp") center / cover no-repeat;
color:#fff;
padding:120px 0;
overflow:hidden;
}

/* 背景レイヤー */

.flow::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.6);
backdrop-filter:blur(4px);
z-index:0;
}

/* コンテンツを前面に */

.flow .container{
position:relative;
z-index:1;
}

/* 見出し */

.flow-head{
margin-bottom:60px;
}

.flow-label{
display:inline-block;
font-size:12px;
letter-spacing:2px;
margin-bottom:10px;
color:#CFDB00;
}

/* グリッド */

.flow-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:40px;
box-sizing:border-box;
}

/* 各ステップ */

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

/* 数字 */

.flow-num{
width:70px;
height:70px;

border:2px solid #CFDB00;
border-radius:14px;

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

margin:0 auto 20px;

font-weight:bold;
font-size:18px;
color:#CFDB00;
}

/* タイトル */

.flow-item h3{
margin-bottom:10px;
font-size:18px;
font-weight:600;
}

/* テキスト */

.flow-item p{
font-size:14px;
opacity:0.9;
line-height:1.7;
max-width:260px;
margin:0 auto;
}

/* ======================
お問い合わせCTA
====================== */

.flow-contact{
margin-top:80px;
text-align:center;
}

.flow-contact a{
display:inline-block;
font-size:16px;
font-weight:600;
color:#fff;
text-decoration:none;
border-bottom:2px solid #CFDB00;
padding-bottom:4px;
transition:0.3s;
}

.flow-contact a:hover{
opacity:0.6;
}

/* ======================
タブレット
====================== */

@media (max-width:1000px){

.flow-grid{
grid-template-columns:repeat(2,1fr);
gap:40px;
}

}

/* ======================
スマホ
====================== */

@media (max-width:768px){

.flow{
padding:80px 0;
}

.flow-head{
padding:0 20px;
}

/* グリッド */

.flow-grid{
grid-template-columns:1fr;
gap:40px;
padding:0 20px;
}

/* カード */

.flow-item{
display:flex;
align-items:flex-start;
gap:16px;
text-align:left;
}

/* 数字 */

.flow-num{
width:60px;
height:60px;
flex-shrink:0;
margin:0;
}

/* テキスト */

.flow-item h3{
margin:0 0 6px 0;
}

.flow-item p{
margin:0;
line-height:1.8;
word-break:break-word;
overflow-wrap:break-word;
}

/* CTA */

.flow-contact{
text-align:center;
margin-top:50px;
}

}

/* ======================
CONTACT PAGE
====================== */

.contact-wrap {
    max-width: 640px;
    margin: 0 auto;
}

.contact-lead {
    color: #fff;
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 40px;
}

/* フォーム全体 */
.contact-wrap .wpcf7-form p {
    margin-bottom: 20px;
    max-width: 100%;
}

/* ラベル */
.contact-wrap .wpcf7-form label {
    display: block;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 6px;
    letter-spacing: 0.05em;
}

/* テキスト・メール・電話 */
.contact-wrap .wpcf7-form input[type="text"],
.contact-wrap .wpcf7-form input[type="email"],
.contact-wrap .wpcf7-form input[type="tel"] {
    width: 100%;
    height: 52px;
    padding: 12px 16px;
    background-color: rgba(255, 255, 255, 0.95);
    border: 2px solid rgba(255, 255, 255, 0.6);
    border-radius: 6px;
    font-size: 16px;
    color: #333;
    box-sizing: border-box;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

/* テキストエリア */
.contact-wrap .wpcf7-form textarea {
    width: 100%;
    height: 220px;
    padding: 14px 16px;
    background-color: rgba(255, 255, 255, 0.95);
    border: 2px solid rgba(255, 255, 255, 0.6);
    border-radius: 6px;
    font-size: 16px;
    color: #333;
    box-sizing: border-box;
    resize: vertical;
    transition: border-color 0.2s ease;
}

/* フォーカス時 */
.contact-wrap .wpcf7-form input[type="text"]:focus,
.contact-wrap .wpcf7-form input[type="email"]:focus,
.contact-wrap .wpcf7-form input[type="tel"]:focus,
.contact-wrap .wpcf7-form textarea:focus {
    border-color: #CFDB00;
    background-color: #fff;
    outline: none;
}

/* span（CF7が自動生成するラッパー） */
.contact-wrap .wpcf7-form .wpcf7-form-control-wrap {
    display: block;
    width: 100%;
}

/* 送信ボタン */
.contact-wrap .wpcf7-form input[type="submit"] {
    display: inline-block;
    padding: 14px 56px;
    background-color: #CFDB00;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 700;
    color: #333;
    cursor: pointer;
    letter-spacing: 0.05em;
    transition: background-color 0.2s ease, opacity 0.2s ease;
    margin-top: 10px;
}

.contact-wrap .wpcf7-form input[type="submit"]:hover {
    background-color: #beca00;
    opacity: 0.9;
}

/* バリデーションエラー */
.contact-wrap .wpcf7-not-valid {
    border-color: #e05555 !important;
}

.contact-wrap .wpcf7-not-valid-tip {
    color: #CFDB00;
    font-size: 13px;
    margin-top: 4px;
    display: block;
}

/* 送信完了メッセージ */
.contact-wrap .wpcf7-response-output {
    color: #fff;
    border: 1px solid #CFDB00;
    padding: 12px 16px;
    border-radius: 6px;
    margin-top: 16px;
    font-size: 15px;
}

/* ======================
CONTACT PAGE MOBILE
====================== */

@media (max-width: 768px) {

    .contact-wrap {
        width: 92%;
    }

    .contact-lead {
        font-size: 14px;
    }

    .contact-wrap .wpcf7-form input[type="text"],
    .contact-wrap .wpcf7-form input[type="email"],
    .contact-wrap .wpcf7-form input[type="tel"] {
        height: 48px;
        font-size: 15px;
    }

    .contact-wrap .wpcf7-form textarea {
        height: 180px;
        font-size: 15px;
    }

    .contact-wrap .wpcf7-form input[type="submit"] {
        width: 100%;
        text-align: center;
    }

}