/* =====================================
   ESPASO Computer School LP
   style.css
   ===================================== */

/* ---------- Reset ---------- */

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    sans-serif;

    color:#333;
    background:#f8f8f8;
    line-height:1.8;

}

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

a{
    text-decoration:none;
}

ul{
    list-style:none;
}

.container{

    width:min(1100px,92%);
    margin:auto;

}


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

.fixed-header{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    display:flex;

    z-index:9999;

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

}

.fixed-header a{

    flex:1;

    text-align:center;

    color:#fff;

    padding:14px 6px;

    font-size:.95rem;

    font-weight:bold;

}

.btn-phone{

    background:#e74c3c;

}

.btn-line{

    background:#06c755;

}

.btn-reserve{

    background:#f39c12;

}


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




.hero{



}

.hero-inner{

    width:min(700px,92%);
    margin:auto;

    text-align:center;

}


.hero-innerimg{

    background:
        linear-gradient(
            rgba(255,255,255,0.2),
            rgba(255,255,255,0.2)
        ),
        url("images/hero-bg.jpg");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    border-radius: 20px;
    padding: 40px 20px;
    margin: 30px 0;

}


.hero-sub{

    color:#2f855a;

    font-weight:bold;

    font-size:1rem;

    margin-bottom:18px;

}

.hero h1{

    font-size:2rem;

    line-height:1.45;

    margin-bottom:20px;

    color:#E67E22;

}

.hero-copy{

    font-size:1.45rem;

    color:#0F766E;

    font-weight:bold;

    margin-bottom:30px;

}

.hero-image{

    border-radius:20px;

    overflow:hidden;

    margin-bottom:30px;

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

}

.hero-buttons{

    display:flex;

    flex-direction:column;

    gap:15px;

    margin-bottom:30px;

}

.hero-phone{

    background:#e74c3c;

    color:#fff;

    padding:18px;

    border-radius:15px;

    font-size:1.2rem;

    font-weight:bold;

}

.hero-line{

    background:#06c755;

    color:#fff;

    padding:18px;

    border-radius:15px;

    font-size:1.2rem;

    font-weight:bold;

}

.hero-sub,
.hero h1,
.hero-copy{

    text-shadow:
        0 0 8px rgba(255,255,255,0.9),
        2px 2px 6px rgba(0,0,0,0.35);

}


/* 無料体験 */

.trial-box{

    background:#fff;

    border-radius:18px;

    padding:30px;

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

}

.trial-box h2{

    color:#e67e22;

    font-size:1.6rem;

    margin-bottom:15px;

}

.trial-box p{

    font-size:1.1rem;

}


/* =====================================
   Manga
===================================== */

.manga{

    background:#fff;

    padding:70px 0;

}

.manga h2{

    text-align:center;

    font-size:1.8rem;

    margin-bottom:35px;

    color:#2d3748;

}

.manga-image{

    width:100%;

    border-radius:20px;

    box-shadow:0 8px 25px rgba(0,0,0,.15);

}


/* =====================================
   共通Section
===================================== */

section{

    padding:80px 0;

}

section h2{

    text-align:center;

    font-size:2rem;

    margin-bottom:25px;

    color:#2d3748;

}

.section-text{

    text-align:center;

    margin-bottom:40px;

    font-size:1.05rem;

}


/* =====================================
   Tablet
===================================== */

@media(min-width:768px){

.hero h1{

    font-size:3rem;

}

.hero-copy{

    font-size:2rem;

}

.hero-buttons{

    flex-direction:row;

}

.hero-phone,
.hero-line{

    flex:1;

}

}


/* =====================================
   PC
===================================== */

@media(min-width:1024px){

.hero{

    padding-top:110px;

}

.hero h1{

    font-size:3.5rem;

}

.hero-copy{

    font-size:2.2rem;

}

.fixed-header{

    max-width:900px;

    left:50%;

    transform:translateX(-50%);

    border-radius:0 0 15px 15px;

}

}








/* =====================================
   Voice
===================================== */

.voice{

    background:#f8f8f8;

}

.voice-grid{

    display:grid;
    gap:30px;

}

.voice-card{

    background:#fff;

    border-radius:20px;

    padding:25px;

    box-shadow:0 5px 20px rgba(0,0,0,.08);

    transition:.3s;

}

.voice-card:hover{

    transform:translateY(-5px);

}

.voice-card img{

    width:140px;
    height:140px;

    object-fit:cover;

    border-radius:50%;

    margin:0 auto 20px;

    border:5px solid #e8f5e9;

}

.voice-card h3{

    text-align:center;

    color:#2f855a;

    margin-bottom:15px;

    font-size:1.2rem;

}

.voice-card p{

    line-height:1.9;

}


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

.about{

    background:#ffffff;

}

.about-wrap{

    display:flex;

    flex-direction:column;

    gap:35px;

}

.about-image img{

    border-radius:20px;

    box-shadow:0 8px 25px rgba(0,0,0,.15);

}

.about-text p{

    margin-bottom:20px;

    font-size:1.05rem;

}


/* =====================================
   STEP
===================================== */

.step{

    background:#fdfaf2;

}

.step-list{

    display:flex;

    flex-direction:column;

    gap:25px;

}

.step-item{

    background:#fff;

    border-radius:20px;

    padding:30px;

    text-align:center;

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

}

.step-number{

    width:80%;
    height:80%;

    margin:auto;

    border-radius:50%;

    background:#2f855a;

    color:#fff;

    display:flex;

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

    font-size:1.4rem;

    font-weight:bold;

    margin-bottom:20px;

}

.step-icon{

    font-size:2.5rem;

    margin-bottom:15px;
    text-align:center;
}

.step-icon img{

    display:block;
    margin:0 auto;
    max-width:auto;   /* お好みで変更 */
    height:auto;

}

.step-item h3{

    margin-bottom:15px;

    color:#2f855a;

    font-size:1.3rem;

}

.step-arrow{

    text-align:center;

    font-size:2rem;

    color:#2f855a;

}


/* =====================================
   Tablet
===================================== */

@media(min-width:768px){

.voice-grid{

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

}

.about-wrap{

    flex-direction:row;

    align-items:center;

}

.about-image,
.about-text{

    flex:1;

}

.step-list{

    gap:35px;

}

}


/* =====================================
   PC
===================================== */

@media(min-width:1024px){

.voice-card{

    padding:35px;

}

.about-text p{

    font-size:1.1rem;

}

.step-item{

    padding:40px;

}

}




/* =====================================
   Price
===================================== */

.price{

    background:#ffffff;

}

.price-card{

    max-width:700px;

    margin:auto;

    background:#fff;

    border-radius:20px;

    padding:40px 30px;

    text-align:center;

    box-shadow:0 8px 25px rgba(0,0,0,.08);

    border:4px solid #2f855a;

}

.price-card h3{

    color:#2f855a;

    font-size:1.8rem;

    margin-bottom:20px;

}

.price-main{

    font-size:3rem;

    font-weight:bold;

    color:#e74c3c;

    margin-bottom:10px;

}

.price-sub{

    font-size:1.4rem;

    font-weight:bold;

    margin-bottom:25px;

}

.price-list{

    text-align:left;

    display:inline-block;

    line-height:2;

}


/* =====================================
   FAQ
===================================== */

.faq{

    background:#f8f8f8;

}

.faq-item{

    background:#fff;

    border-radius:15px;

    padding:25px;

    margin-bottom:20px;

    box-shadow:0 5px 15px rgba(0,0,0,.08);

}

.faq-item h3{

    color:#2f855a;

    margin-bottom:15px;

    font-size:1.2rem;

}

.faq-item p{

    line-height:1.8;

}


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

.access{

    background:#ffffff;

}

.map{

    border-radius:20px;

    overflow:hidden;

    box-shadow:0 8px 20px rgba(0,0,0,.12);

    margin-bottom:30px;

}

.map iframe{

    display:block;

    width:100%;

}

.access h3{

    color:#2f855a;

    font-size:1.5rem;

    margin-bottom:15px;

}

.access p{

    margin-bottom:15px;

}

.access-point{

    margin-top:25px;

    background:#fdfaf2;

    padding:20px;

    border-radius:15px;

    font-weight:bold;

    text-align:center;

    color:#2f855a;

}


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

.contact{

    background:#fdfaf2;

}

.contact-buttons{

    display:flex;

    flex-direction:column;

    gap:15px;

    margin:35px 0;

}

.contact-phone,
.contact-line{

    padding:18px;

    border-radius:15px;

    color:#fff;

    font-weight:bold;

    text-align:center;

    font-size:1.2rem;

}

.contact-phone{

    background:#e74c3c;

}

.contact-line{

    background:#06c755;

}

.contact form{

    background:#fff;

    padding:30px;

    border-radius:20px;

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

}

.contact input,
.contact textarea{

    width:100%;

    padding:16px;

    margin-bottom:20px;

    border:1px solid #ddd;

    border-radius:10px;

    font-size:1rem;

}

.contact textarea{

    min-height:160px;

    resize:vertical;

}

.contact button{

    width:100%;

    background:#2f855a;

    color:#fff;

    border:none;

    padding:18px;

    border-radius:12px;

    font-size:1.2rem;

    font-weight:bold;

    cursor:pointer;

    transition:.3s;

}

.contact button:hover{

    background:#256b48;

}


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

footer{

    background:#2f855a;

    color:#fff;

    text-align:center;

    padding:50px 20px;

}

footer img{

    width:120px;

    margin:0 auto 20px;

}

footer p{

    margin-bottom:10px;

}

footer small{

    display:block;

    margin-top:25px;

    opacity:.8;

}


/* =====================================
   Tablet
===================================== */

@media(min-width:768px){

.contact-buttons{

    flex-direction:row;

}

.contact-phone,
.contact-line{

    flex:1;

}

.price-main{

    font-size:3.5rem;

}

}


/* =====================================
   PC
===================================== */

@media(min-width:1024px){

.price-card{

    padding:60px;

}

.contact form{

    max-width:800px;

    margin:auto;

}

.access{

    text-align:center;

}

footer{

    padding:70px 20px;

}

}