/*
Theme Name: Coo Child
Theme URI: https://lexco2023.xsrv.jp/coo/
Description: Coo専用 GeneratePress子テーマ
Author: M.Y
Version: 2.1
Template: generatepress
Text Domain: coo-child
*/

/*====================================================
Base
====================================================*/

:root{

    --main:#46352d;
    --accent:#D29A45;
    --bg:#f7f3ec;
    --white:#ffffff;
    --text:#555;

    --radius:24px;

    --shadow:0 8px 24px rgba(61,52,47,.08);

}

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:"Yu Gothic","Hiragino Kaku Gothic ProN",sans-serif;
    color:var(--text);
    line-height:1.9;
    background:#fff;

}

img{

    display:block;
    width:100%;
    height:auto;

}

a{

    text-decoration:none;

}

.coo-container{

    width:min(1200px,calc(100% - 60px));
    margin-inline:auto;

}

section{

    padding:100px 0;

}

.coo-heading{

    text-align:center;
    margin-bottom:60px;

}

.coo-heading span{

    display:block;
    color:var(--accent);
    font-size:.9rem;
    font-weight:600;
    letter-spacing:6px;
    margin-bottom:12px;

}

.coo-heading h2{

    color:var(--main);
    font-size:2.5rem;
    line-height:1.3;

}

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

.coo-site-header{

    position:sticky;
    top:0;
    z-index:1000;

    background:rgba(255,255,255,.95);
    backdrop-filter:blur(12px);

    border-bottom:1px solid #ece7df;

}

.coo-header-inner{

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

    height:80px;

}

.coo-logo{

    display:flex;
    align-items:center;
    gap:14px;

}

.coo-logo img{

    width:64px;
    height:64px;

    border-radius:50%;
    object-fit:cover;

}

.coo-logo-text{

    display:flex;
    flex-direction:column;

    line-height:1.2;

}

.coo-logo-text span{

    font-size:.78rem;
    color:#777;
    letter-spacing:.05em;

}

.coo-logo-text strong{

    font-size:1.4rem;
    color:var(--main);

}

.coo-nav{

    display:flex;
    gap:30px;

}

.coo-nav a{

    color:var(--main);
    font-weight:600;
    transition:.25s;

}

.coo-nav a:hover{

    color:var(--accent);

}

.coo-nav a.current-page{

    color:var(--accent);

}

.coo-menu-toggle{

    display:none;

    background:none;
    border:none;

    color:var(--main);

    font-size:1.8rem;

    cursor:pointer;

}

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

.hero{

    position:relative;

    display:flex;
    align-items:center;

    min-height:620px;

    overflow:hidden;

    background:

    url("/coo/wp-content/uploads/2026/07/newtop.png")

    center center / cover no-repeat;

}

.hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

    90deg,

    rgba(255,255,255,.92) 0%,

    rgba(255,255,255,.78) 30%,

    rgba(255,255,255,.22) 48%,

    rgba(255,255,255,0) 65%

    );

}

.hero .coo-container{

    position:relative;

    z-index:2;

}

.hero-content{

    max-width:700px;

    margin-left:70px;

}

.hero h1{

    color:var(--main);

    font-size:4.2rem;

    font-weight:700;

    line-height:1.25;

    letter-spacing:.02em;

    margin-bottom:32px;

    text-shadow:
        0 3px 8px rgba(255,255,255,.9),
        0 0 18px rgba(255,255,255,.8);

}

.hero p{

    max-width:560px;

    font-size:1.15rem;

    line-height:2;

    text-shadow:
        0 2px 6px rgba(255,255,255,.85),
        0 0 12px rgba(255,255,255,.75);

}

@media(max-width:768px){

section{

    padding:80px 0;

}

.coo-container{

    width:min(1200px,calc(100% - 40px));

}

.coo-heading{

    margin-bottom:50px;

}

.coo-heading h2{

    font-size:2rem;

}

.coo-header-inner{

    height:70px;

}

.coo-logo img{

    width:50px;
    height:50px;

}

.coo-logo-text span{

    font-size:.68rem;

}

.coo-logo-text strong{

    font-size:1.2rem;

}

.coo-menu-toggle{

    display:block;

}

.coo-nav{

    display:none;

    flex-direction:column;

    position:absolute;

    top:100%;
    left:0;
    right:0;

    background:#fff;

    padding:24px;

    box-shadow:var(--shadow);

}

.coo-nav.active{

    display:flex;

}

.hero{

    min-height:auto;

    padding:80px 0;

    background-position:center bottom;

}

.hero-content{

    max-width:100%;

    margin-left:0;

    padding-top:35px;

}

.hero h1{

    font-size:2.1rem;

    margin-bottom:20px;

    text-shadow:

    0 3px 8px rgba(255,255,255,.95),

    0 0 18px rgba(255,255,255,.85);

}

.hero p{

    font-size:1.2rem;

    line-height:1.9;

    text-shadow:

    0 2px 6px rgba(255,255,255,.95),

    0 0 14px rgba(255,255,255,.85);

}

.hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        90deg,
        rgba(255,255,255,.76) 0%,
        rgba(255,255,255,.56) 20%,
        rgba(255,255,255,.18) 40%,
        rgba(255,255,255,0) 62%
    );

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

.about{

    background:#fff;

}

/* 説明文 */

.coo-about-single{

    max-width:920px;

    margin:0 auto 42px;

    padding:0;

    background:transparent;

    box-shadow:none;

}

.coo-about-single p{

    font-size:1.05rem;

    line-height:1.9;

    margin-bottom:18px;

}

.coo-about-single p:last-child{

    margin-bottom:0;

}

/* ご利用をご検討いただける方 */

.coo-target{

    max-width:760px;

    margin:0 auto;

    padding:30px;

    background:#fff;

    border-radius:var(--radius);

    box-shadow:var(--shadow);

}

.coo-target h3{

    color:var(--main);

    font-size:1.2rem;

    margin-bottom:20px;

    text-align:center;

}

.coo-target ul{

    list-style:none;

    display:grid;

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

    gap:14px 28px;

    margin:0;

    padding:0;

}

.coo-target li{

    display:flex;

    align-items:flex-start;

    gap:10px;

    line-height:1.8;

}

.coo-target li::before{

    content:"✓";

    color:var(--accent);

    font-weight:bold;

    flex-shrink:0;

    margin-top:2px;

}

@media(max-width:768px){

.coo-about-single{

    margin-bottom:32px;

}

.coo-about-single p{

    font-size:1rem;

}

.coo-target{

    padding:24px;

}

.coo-target ul{

    grid-template-columns:1fr;

    gap:12px;

}

}

/*====================================================
 Work
====================================================*/

.work{

    background:var(--bg);

}

.coo-work-grid{

    display:grid;

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

    gap:22px;

}

.coo-work-card{

    background:#fff;

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    padding:30px 20px;

    text-align:center;

    transition:.3s;

    display:flex;

    flex-direction:column;

    min-height:330px;

}

.coo-work-card:hover{

    transform:translateY(-8px);

    box-shadow:0 16px 36px rgba(61,52,47,.12);

}

.coo-work-card img{

    width:82px;

    margin:0 auto 20px;

}

.coo-work-card h3{

    color:var(--main);

    font-size:1.05rem;

    line-height:1.5;

    margin-bottom:14px;

white-space: nowrap;

}

.coo-work-card p{

    margin-top:auto;

    font-size:.95rem;

    line-height:1.9;

    word-break:normal;

    overflow-wrap:anywhere;

}

@media(max-width:768px){

.coo-work-grid{

    grid-template-columns:1fr;

    gap:20px;

}

.coo-work-card{

    min-height:auto;

    padding:28px 22px;

}

.coo-work-card img{

    width:78px;

}

.coo-work-card h3{

    font-size:1.15rem;

}

.coo-work-card p{

    font-size:1rem;

    text-align:left;

}

}
/*====================================================
 Guide
====================================================*/

.guide{

    background:#fff;

}

.coo-guide-box{

    max-width:760px;

    margin:0 auto;

    background:#fff;

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    padding:34px;

}

.coo-guide-list{

    list-style:none;

    margin:0;

    padding:0;

    display:grid;

    gap:16px;

}

.coo-guide-list li{

    display:flex;

    align-items:flex-start;

    gap:10px;

    line-height:1.9;

}

.coo-guide-list li::before{

    content:"✓";

    color:var(--accent);

    font-weight:bold;

    flex-shrink:0;

    margin-top:2px;

}

.about-note{

    margin-top:22px;

    padding-top:18px;

    border-top:1px solid #eee;

    color:var(--main);

    line-height:1.9;

    font-size:1rem;

}

.about-note strong{

    font-weight:700;

}

@media(max-width:768px){

.coo-guide-box{

    padding:24px;

}

}


/*====================================================
 Flow
====================================================*/

.flow{

    background:var(--bg);

}

.coo-flow{

    max-width:900px;

    margin:0 auto;

    position:relative;

}

.coo-flow::before{

    content:"";

    position:absolute;

    left:32px;

    top:30px;

    bottom:30px;

    width:3px;

    background:#e7d7c3;

}

.coo-flow-item{

    display:flex;

    gap:28px;

    position:relative;

    margin-bottom:36px;

    align-items:flex-start;

}

.coo-flow-item:last-child{

    margin-bottom:0;

}

.coo-flow-icon{

    width:64px;

    height:64px;

    border-radius:50%;

    background:var(--accent);

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:1.2rem;

    font-weight:bold;

    flex-shrink:0;

    position:relative;

    z-index:2;

}

.coo-flow-content{

    flex:1;

    background:#fff;

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    padding:28px;

}

.coo-flow-content h3{

    color:var(--main);

    margin-bottom:12px;

}

.coo-flow-content p{

    line-height:1.9;

}

@media(max-width:768px){

.coo-flow::before{

    left:30px;

}

.coo-flow-item{

    gap:18px;

}

.coo-flow-icon{

    width:54px;

    height:54px;

    font-size:1rem;

}

.coo-flow-content{

    padding:22px;

}

}


/*====================================================
 Tour
====================================================*/

.tour{

    background:#fff;

}

.coo-step-list{

    display:grid;

    grid-template-columns:
        175px 30px
        175px 30px
        175px 30px
        175px 30px
        175px;

    justify-content:center;

    align-items:center;

    column-gap:10px;

}
.coo-step{

    width:175px;

    background:#faf8f3;

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    padding:28px 18px;

    text-align:center;

}

.coo-step-number{

    width:52px;

    height:52px;

    margin:0 auto 18px;

    border-radius:50%;

    background:var(--accent);

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:bold;

}

.coo-step h3{

    color:var(--main);

    font-size:1rem;

    line-height:1.6;

}

.coo-step-arrow{

    text-align:center;

    color:var(--accent);

    font-size:1.8rem;

}

.coo-step-message{

    display:flex;

    justify-content:center;

    margin-top:40px;

}

.coo-step-message p{

    margin:0;

    text-align:center;

    font-size:1.1rem;

    color:var(--main);

    font-weight:400;

}
@media(max-width:768px){

    .coo-step-list{

        display:flex;

        flex-direction:column;

        align-items:center;

        gap:18px;

        width:100%;

    }

    .coo-step{

        width:100%;

        max-width:320px;

    }

    .coo-step-arrow{

        transform:rotate(90deg);

        font-size:1.6rem;

    }

}

/*====================================================
 Requirements
====================================================*/

.requirements{

    background:var(--bg);

}

.coo-requirements-box{

    max-width:900px;

    margin:0 auto;

    background:#fff;

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    padding:50px;

}

.coo-requirements-lead{

    color:var(--main);

    font-size:1.08rem;

    line-height:2;

    margin-bottom:32px;

}

.coo-requirements-list{

    list-style:none;

    margin:0;

    padding:0;

}

.coo-requirements-list li{

    padding:22px 24px;

    margin-bottom:18px;

    border-left:5px solid var(--accent);

    border-radius:16px;

    background:#fff;

    line-height:1.9;

}

.coo-requirements-list strong{

    color:var(--main);

}

.coo-note{

    margin-top:32px;

    padding-top:24px;

    border-top:1px solid #eee;

    line-height:1.9;

    color:#666;

}

@media(max-width:768px){

.coo-requirements-box{

    padding:30px 22px;

}

.coo-requirements-lead{

    font-size:1rem;

}

.coo-requirements-list li{

    padding:18px;

}

}


/*====================================================
 Community
====================================================*/

.community{

    background:#fff;

}

.community-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:60px;

    align-items:center;

}

.community-image img{

    border-radius:var(--radius);

    box-shadow:var(--shadow);

}

.community-text{

    font-size:1.05rem;

    line-height:2;

}

.community-text p{

    margin-bottom:20px;

}

.community-text p:last-child{

    margin-bottom:0;

}

@media(max-width:768px){

.community-grid{

    grid-template-columns:1fr;

    gap:36px;

}

.community-text{

    font-size:1rem;

}

}


/*====================================================
 Access
====================================================*/

.access{

    background:var(--bg);

}

.coo-access-box{

    max-width:700px;

    margin:0 auto;

    background:#fff;

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    padding:50px;

}

.coo-access-box h3{

    text-align:center;

    color:var(--main);

    font-size:2rem;

    margin-bottom:10px;

}

.coo-access-type{

    text-align:center;

    color:var(--accent);

    font-weight:700;

    margin-bottom:36px;

}

.coo-access-list{

    display:grid;

    grid-template-columns:170px 1fr;

    column-gap:24px;

    row-gap:20px;

}

.coo-access-list dt{

    color:var(--main);

    font-weight:700;

    border-bottom:1px solid #eee;

    padding-bottom:12px;

}

.coo-access-list dd{

    margin:0;

    border-bottom:1px solid #eee;

    padding-bottom:12px;

    line-height:1.8;

}

.coo-access-list dd a{

    color:var(--accent);

    font-weight:600;

}

@media(max-width:768px){

.coo-access-box{

    padding:32px 24px;

}

.coo-access-list{

    display:block;

}

.coo-access-list dt{

    margin-top:20px;

    margin-bottom:6px;

    border:none;

}

.coo-access-list dd{

    margin:0 0 16px;

    border-bottom:1px solid #eee;

}

}

/*====================================================
 Information
====================================================*/

.info-page{

    background:var(--bg);

}

.info-page .coo-heading{

    max-width:700px;

    margin:0 auto 60px;

}

.info-page .coo-heading p{

    margin-top:18px;

    line-height:1.9;

}

.coo-info-grid{

    display:grid;

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

    gap:26px;

}

.coo-info-card{

    display:block;

    background:#fff;

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    padding:36px;

    color:inherit;

    transition:.3s;

}

.coo-info-card:hover{

    transform:translateY(-6px);

    box-shadow:0 16px 36px rgba(61,52,47,.12);

}

.coo-info-icon{

    font-size:2rem;

    margin-bottom:18px;

}

.coo-info-card h3{

    color:var(--main);

    margin-bottom:12px;

}

.coo-info-card p{

    color:#666;

    line-height:1.8;

    margin-bottom:24px;

}

.coo-info-card span{

    color:var(--accent);

    font-weight:700;

}

@media(max-width:768px){

.coo-info-grid{

    grid-template-columns:1fr;

}

.coo-info-card{

    padding:28px;

}

}


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

.site-footer{

    background:var(--main);

    color:#fff;

    padding:70px 0 30px;

}

.footer-logo{

    text-align:center;

    margin-bottom:34px;

}

.footer-logo h2{

    font-size:2rem;

    margin-bottom:8px;

}

.footer-nav ul{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:28px;

    list-style:none;

    margin:0;

    padding:0;

}

.footer-nav a{

    color:#fff;

    transition:.3s;

}

.footer-nav a:hover{

    color:#f4d7a5;

}

.footer-copy{

    margin-top:40px;

    text-align:center;

    font-size:.9rem;

    opacity:.8;

}


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

@media(max-width:768px){

section{

    padding:80px 0;

}

.coo-container{

    width:min(1200px,calc(100% - 40px));

}

.coo-heading{

    margin-bottom:48px;

}

.coo-heading h2{

    font-size:2rem;

}

.footer-nav ul{

    gap:18px;

    font-size:.95rem;

}

.footer-logo h2{

    font-size:1.7rem;

}

}
/*====================================================
 Access Link
====================================================*/

.coo-access-link{
    text-align:center;
    margin-top:25px;
}

.coo-access-link a{
    display:inline-block;
}