/*
-------------------
  common
-------------------
*/

:root {
  --color-bg: #fef6ed;
    --color-bggray: #F2F2F3;
    --color-accent: #F39800;
    --padding-spwrap:6vw;
    --radius:20px;
}

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

.image.fit{
  overflow:hidden;
}
.image.fit img{
  object-fit:cover;
  width:100%;
  height:100%;
}

p{
    line-height:1.8;
}

.wp-block-button .wp-block-button__link,
.button{
  position:relative;
  display:block;
  width: 260px!important;
  margin-block:24px;
  padding: 18px 0px;
  border-radius:20px;
  background:var(--color-accent);
  text-align:center;
  color:#fff;
  font-weight:bold;
  text-decoration:none;
}


.bg{
    background:var(--color-bg);
}

.bggray{
    background:var(--color-bggray);
}

.bggurade{
    position:absolute;
    top: -100px;
    z-index:-1;
    width:100%;
    height: 100px;
}

.ckobe-subpage-head{
    padding-top:40px;
    background-image: url("../assets/headbg.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.ckobe-wrap{
    max-width:1200px;
    margin:auto;
}

.ckobe-subpage-head .ckobe-wrap{
    display:grid;
    grid-template-columns:minmax(0, 1fr) 832px;
    grid-template-areas:
        "title image"
        "sub   image"
        "body  image";
    column-gap:24px;
    align-items:center;
}


/* .text をレイアウト上だけ透明化 */
.ckobe-subpage-head .ckobe-wrap .text{
    display:contents;
}


/* Let’s try */
.ckobe-subpage-head .ckobe-wrap .text h3{
    grid-area:title;
    align-self:end;

    font-size:4rem;
    font-weight:bold;
    margin-bottom:16px;
}


/* トヨタカローラ神戸で〜 */
.ckobe-subpage-head .ckobe-wrap .text sub{
    grid-area:sub;

    display:block;
    font-size:1.4rem;
    letter-spacing:0.2rem;
    line-height:1.4;
}


/* 説明文 */
.ckobe-subpage-head .ckobe-wrap .text p{
    grid-area:body;
    align-self:start;

    margin-top:24px;
}


/* 写真 */
.ckobe-subpage-head .ckobe-wrap .image{
    grid-area:image;

    width:100%;
    border-radius:30px;
    overflow:hidden;
}

.ckobe-subpage-head .ckobe-wrap .image img{
    display:block;
    width:100%;
    height:auto;
}

.ckobe-subpage-head .ckobe-wrap .text h3{
    font-size:4rem;
    font-weight:bold;
     margin-bottom:16px;
}

.ckobe-subpage-head .ckobe-wrap .text sub{
    font-size:1.4rem;
    letter-spacing:0.2rem;
    line-height:1.4;
}

.ckobe-subpage-head .ckobe-wrap .text p{
     margin-top:24px;
}



.ckobe-subpage-head .ckobe-wrap .image{
    width:832px;
    border-radius:var(--radius);
    overflow:hidden;
}

/*
-------------------
  contact
-------------------
*/

.contact-choice{
    position:relative;
    padding:40px 0;
}

.contact-choice .box{
    display:flex;
    align-items:center;
    padding:40px;
    margin:40px auto;
    background:#fff;
    border-radius:var(--radius);
}

.contact-choice .box .image{
    width:495px;
    height:280px;
    border-radius: 14px;
    overflow:hidden;
    border:4px solid var(--color-accent);
}

.contact-choice .box .text{
    width:calc(100% - 495px);
    padding:0px 100px;
}

.contact-choice .box .text h4{
    font-size:1.8rem;
    margin-bottom:24px;
    line-height:1.4;
}

.contact-other{
    padding:90px 0;
}

.contact-other h4{
    font-size: 3.4rem;
    margin-bottom:16px;
    font-weight:900;
}

.contact-other sub{
    font-size: 1.6rem;
    
}

.contact-other section{
    display:flex;
    width:100%;
    margin:40px 0;
    justify-content:space-between;
}

.contact-other section .box{
    width:30%;
   
}

.contact-other h5{
    font-size: 1.4rem;
    margin:8px 0;
    font-weight:900;
}

.contact-komatta{
    position:relative;
}

.contact-komatta img.sp{
    display:none;
}

.contact-komatta .text{
    position:absolute;
    top:0;
    left:0;
}

.contact-komatta .text h3{
    font-size: 2.6rem;
    line-height:1.2;
    letter-spacing:0.2rem;
}

.contact-komatta .text p{
    width:320px;
    margin-top:32px;
}

.contact-tel{
    padding:60px 0;
}

.contact-tel h3{
    font-size:1.8rem;
    font-weight:bold;
    margin-bottom:32px;
    text-align:center;
}

.tel-list{
    /* display:flex; */
    flex-wrap:wrap;
    gap:48px;
    text-align:center;
}

.tel-item{
    flex:1 1 320px;
    margin-bottom:40px;
}

.tel-item .label{
    font-size:0.95rem;
    margin-bottom:8px;
}

.tel-number{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    font-size:2.2rem;
    font-weight:bold;
    color:#333;
    text-decoration:none;
    line-height:1;
}

.tel-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:36px;
    height:36px;
    border-radius:8px;
    background:#3a3a3a;
    color:#fff;
    flex-shrink:0;
}

.tel-icon svg{
    width:18px;
    height:18px;
}

.tel-note{
    margin-top:8px;
    font-size:0.9rem;
    color:#666;
}

.hl .button{
    font-size:1.6rem;
    padding:8px 10px;
}

.hl .button span{
    display:block;
     font-size:1rem;
}


.faqarea{
    padding:64px 32px;
}

.faq{
    padding:60px 0;
        background:#fff;
    border-radius:var(--radius);
}

.faq h3{
    font-size:2.6rem;
    font-weight:bold;
    padding:0px 64px;
}

.faq > sub{
    display:block;
    font-size:1.1rem;
    margin-top:14px;
    padding:0px 64px;
}

.faq-list{
    margin-top:32px;
    padding:56px 64px;

}

.faq-item{
    border-bottom:1px dotted #ccc;
}

.faq-item + .faq-item{
    margin-top:48px;
}

.faq-item summary{
    display:flex;
    align-items:center;
    gap:12px;
    padding-bottom:24px;
    list-style:none;
    cursor:pointer;
}

.faq-item summary::-webkit-details-marker{
    display:none;
}

.faq-item .q-mark{
    font-size:1.3rem;
    font-weight:bold;
    flex-shrink:0;
}

.faq-item .q-text{
    flex:1;
    font-size:1.3rem;
    font-weight:bold;
}

.faq-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:24px;
    height:24px;
    color:#999;
    flex-shrink:0;
}

.faq-icon svg{
    width:100%;
    height:100%;
}

.faq-icon .icon-chevron{
    display:none;
}

.faq-item[open] .faq-icon .icon-plus{
    display:none;
}

.faq-item[open] .faq-icon .icon-chevron{
    display:block;
}

.faq-answer{
    display:flex;
    gap:8px;
    padding:24px 0 0;
}

.faq-answer .a-mark{
    font-size:1rem;
    font-weight:bold;
    flex-shrink:0;
}

.faq-answer p{
    font-size:1rem;
    color:#444;
    line-height:1.8;
}



/*
-------------------
  tablet style
-------------------
*/
@media screen and (max-width:1100px){

  
}


/*
-------------------
  mobile style
-------------------
*/

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


    .ckobe-wrap{
         padding-inline:var(--padding-spwrap);
    }
  
@media screen and (max-width:680px){

    .ckobe-wrap{
        padding-inline:var(--padding-spwrap);
   
    }
    


    .ckobe-subpage-head{
        padding-top: 56px;
        background-size:200%;
        background-position:top;
    }


    .ckobe-subpage-head .ckobe-wrap{
        display:grid;

        grid-template-columns:1fr;

        grid-template-areas:
            "title"
            "sub"
            "image"
            "body";

        align-items:initial;
    }


    .ckobe-subpage-head .ckobe-wrap .text{
        display:contents;
    }


    /* Let's try */
    .ckobe-subpage-head .ckobe-wrap .text h3{
        grid-area:title;

        font-size:2rem;
        line-height:1.2;
        margin:0 0 4px;
    }


    /* トヨタカローラ神戸で相談・体験しよう */
    .ckobe-subpage-head .ckobe-wrap .text sub{
        grid-area:sub;
        display:block;
        font-size: 4.4vw;
        line-height:1.4;
        letter-spacing:0.05rem;
        margin:0 0 16px;
    }


    .ckobe-subpage-head .ckobe-wrap .text sub br{
        display:none;
    }


    /* 写真 */
    .ckobe-subpage-head .ckobe-wrap .image{
        grid-area:image;

        width:100%;
        overflow:hidden;
    }

    .ckobe-subpage-head .ckobe-wrap .image img{
        display:block;
        width:100%;
        height:auto;
    }


    /* 説明文 */
    .ckobe-subpage-head .ckobe-wrap .text p{
        grid-area:body;
        margin:12px 0 0;
    }

    
.contact-choice{
    padding-block:0;
    padding-bottom:var(--padding-spwrap);
}

    .contact-choice .box{
        display:block;
        padding:var(--padding-spwrap);
    }

    .contact-choice .box .image{
        width:auto;
        height:auto;
    }

    .contact-choice .box .text{
        width:auto;
        padding:0;
    }

    .contact-choice .box .text h4{
        margin:0.6rem 0;
        font-size:1.4rem;
    }

    .contact-other{
        padding-bottom:40vw;
    }

    .contact-other section{
        display:block;
        padding-inline:var(--padding-spwrap);
    }

    .contact-other section .box{
        width:auto;
        margin-bottom:16vw;
    }

    .contact-other h4{
        font-size:2rem;
    }

        .contact-other sub{
        font-size:1rem;
    }

    .contact-komatta{
        padding:0;
        padding-bottom: 26vw;
    }

    .contact-komatta img.sp{
    display:block;
}
     .contact-komatta img.pc{
    display:none;
}
        .contact-komatta .text{
            padding-inline:var(--padding-spwrap);
            top: -23%;
            left:0;
            width:100%;
        }
    .contact-komatta .text h3{
        font-size:1.3rem;
    }

.contact-komatta .text p{
    margin-top:3vw;
    width:auto;
}
    
        .contact-komatta .text h3 br{
            display:none;
        }

     .contact-komatta .text .buttonwrap{
         position:absolute;
         top: 111vw;
         left:0;
         width:100%;
     }
     .contact-komatta .text .buttonwrap a{
         margin:auto;
     }

    .tel-note{
        font-size:3vw;
    }

    .faq-list{
        padding:0;
    }

    .faq h3{
        padding:0;
        text-align:center;
    }

    .faq > sub{
        padding:0;
        text-align:center;
    }

    .faq-item .q-text{
        font-size:1rem;
        line-height:1.4;
    }



}

/*
-------------------
  print style
-------------------
*/
  
@media print {
 body{
   width:1080px;
 }
}