
/*--------------------------------------

    main-visual

--------------------------------------*/
.main-visual {}
.main-visual img {}

@media (min-width: 768px){
    .main-visual { margin-bottom: 50px; }
}

@media (max-width: 767px){
    .main-visual { margin-bottom: 30px; }
}


/*--------------------------------------

    feature

--------------------------------------*/
#feature {}
#feature .title-a {}
#feature .outline {}
#feature .outline .text {}
#feature .outline figure { margin-bottom: 0;}
#feature .outline figure img {}

#feature .lead-b { text-align: center; margin-bottom: 40px;}
#feature .lead-b span {}

#feature .service {}
#feature .service section { position: relative;}
#feature .service .title { color: #0086E0; text-align: center; font-size: 2rem; font-weight: 700; border-top: 3px solid #0086E0; border-bottom: 3px solid #0086E0; height: 53px; line-height: 47px; margin-bottom: 10px;}
#feature .service figure { margin-bottom: 0;}
#feature .service figure img {}
#feature .service .list-a { padding: 15px;}
#feature .service .list-a li {}

#feature .bg-yellow { text-align: center; padding: 20px;}
#feature .bg-yellow .btn-a { margin-left: auto; margin-right: auto; margin-bottom: 15px;}
#feature .bg-yellow .text { font-size: 1.4rem; line-height: 1.4; margin-bottom: 0;}
#feature .bg-yellow .text p {}


@media (min-width: 768px){
    #feature .title-a { margin-bottom: 30px; }
    #feature .outline { margin-bottom: 40px;}
    #feature .outline > * { width: calc( 50% - 15px ); }
    #feature .outline .text { margin-bottom: 0;}
    #feature .outline figure { max-width: 347px; }
    
    #feature .service { margin-bottom: 30px;}
    #feature .service section { width: calc( 50% - 18px ); max-width: 347px; margin-bottom: 0; }
    #feature .service section > div { width: 100%; height: calc(100% - (53px + 10px)); background-color: #EDF3FA;}
    #feature .service .list-a li { font-size: 1.4rem; margin-bottom: 5px; /* width: calc(50% - 10px);*/ }
    /* #feature .service .list-a li:nth-child(n+2) { margin-top: 12px;} */
  
}

@media (max-width: 767px){
    #feature .outline { margin-bottom: 50px;}
    #feature .outline .text { margin-bottom: 15px;}


    #feature .service section { margin-bottom: 50px;}
    #feature .service .list-a li { margin-bottom: 10px;}
    #feature .service .list-a li:last-child { margin-bottom: 0;}

}


/*--------------------------------------

    point

--------------------------------------*/
#point { margin-bottom: 100px !important;}
#point .title-a {}
#point section { border-bottom: 2px dotted #0086E0; padding-bottom: 15px; margin-bottom: 20px;}
#point .l_col-point { margin-bottom: 15px;}
#point .l_col-point dt { color: #FFFFFF; font-size: 2rem; font-weight: 700; width: 145px; height: 40px; border-radius: 20px; background: #EE0100; line-height: 40px; padding-left: 15px; position: relative; }
#point .l_col-point dt span { color: #1D4A8C; position: absolute; width: 30px; height: 30px; background-color: #fff; border-radius: 50%; text-align: center; line-height: 30px; right: 7px; top: 5px;}
#point .l_col-point dd { color: #1D4A8C; font-size: 2rem; font-weight: 700; }
#point .text { margin-bottom: 0;}
#point .text p {}


@media (min-width: 768px){
    #point .title-a { margin-bottom: 30px; }
    #point .l_col-point { align-items: baseline;}
    #point .l_col-point dd { width: calc(100% - (145px + 15px));}
}

@media (max-width: 767px){
    #point .l_col-point { justify-content: center;}
    #point .l_col-point dt { margin-bottom: 10px;}
    #point .l_col-point dd { width: 100%; margin-bottom: 0; text-align: center;}
}


/*--------------------------------------

    omakase

--------------------------------------*/
#omakase { margin-bottom: 100px !important;}
#omakase .title-a {}
#omakase .l_col-3 { list-style-type: none;}
#omakase .l_col-3 li { color: #0A1F38; text-align: center; font-weight: 700; line-height: 1.2; border-radius: 12px; border: 3px solid #EE0100; height: 80px; display: inline-flex; justify-content: center; align-items: center; }
#omakase .l_col-3 li:first-child { font-size: 2.4rem; color: #fff; background-color: #EE0100;}
#omakase .l_col-3 li:first-child span { margin-right: 10px; font-size: 90%;}

#omakase .lead-a { margin-bottom: 30px;}

#omakase section { border-bottom: 2px dotted #0086E0; margin-bottom: 20px; }
#omakase section .title-b { margin-bottom: 15px; text-align: left;}
#omakase section .title-b span { margin-right: 8px; color: #F82811; vertical-align: -1px; }

#omakase section .text {}
#omakase section .text p {}
#omakase section figure { margin-bottom: 30px;}
#omakase section figure img {}

#omakase section:last-child figure { max-width: 281px; margin-left: auto; margin-right: auto; }
#omakase section:last-child figure img {}


@media (min-width: 768px){
    #omakase .title-a { margin-bottom: 30px; }
    #omakase .l_col-3 { margin-bottom: 50px;}
    #omakase .l_col-3 li { width: calc( (100% / 3) - 8px ); font-size: 2rem;}
    #omakase .l_col-3 li:nth-child(n+4) { margin-top: 10px;}
    
 
    #omakase section:nth-child(n+3) { margin-top:10px;}
    #omakase section figure { max-width: 347px;}

    #omakase section:last-child figure { padding-top: 20px;}
    #omakase section:last-child figure img {}

}

@media (max-width: 767px){
    #omakase .l_col-3 { margin-bottom: 30px;}
    #omakase .l_col-3 li { width: calc(50% - 5px); font-size: 1.6rem; margin-bottom: 10px;}
    #omakase .l_col-3 li:first-child { width: 100%;}

    #omakase section .text { margin-bottom: 15px;}

    #omakase section:last-child { border-bottom: none; margin-bottom: 0;}
    #omakase section:last-child figure { margin-bottom: 0; }
    #omakase section:last-child figure img {}

}


/*--------------------------------------

    spare-key

--------------------------------------*/
#spare-key {}
#spare-key .title-a {}
#spare-key > .l_col-2 { margin-bottom: 30px; }
#spare-key > .l_col-2 > div {}
#spare-key > .l_col-2 .title-b { text-align: left;}
#spare-key > .l_col-2 .text { margin-bottom: 0; }
#spare-key > .l_col-2 > figure { margin-bottom: 0; }
#spare-key > .l_col-2 > figure img {}

#spare-key .note { padding: 20px;}
#spare-key .note .title { color: #F82811; margin-bottom: 10px;}
#spare-key .note .text { margin-bottom: 0;}
#spare-key .note .text p {}

#spare-key-flow {}
#spare-key-flow .title-b {}
#spare-key-flow section { border-bottom: 1px solid #1D4A8C; padding-bottom: 25px; position: relative; }
#spare-key-flow section::after { content: ""; position: absolute; width: 24px; height: 14px; border-top: 14px solid #1D4A8C; border-left: 12px solid #fff; border-right: 12px solid #fff; left: 0; right: 0; bottom: -15px; margin: auto; }

#spare-key-flow section:nth-child(4),
#spare-key-flow section:nth-child(5) { border-bottom: none; margin-bottom: 0;}
#spare-key-flow section:nth-child(4)::after,
#spare-key-flow section:nth-child(5)::after { display: none;}

#spare-key-flow .l_col-step { margin-bottom: 15px; }
#spare-key-flow .l_col-step dt { color: #fff; font-size: 2rem; font-weight: 700; width: 110px; height: 40px; border-radius: 20px; background: #F82811; line-height: 40px; padding-left: 15px; position: relative; }
#spare-key-flow .l_col-step dt span { position: absolute; width: 30px; height: 30px; background-color: #fff; border-radius: 50%; text-align: center; line-height: 30px; right: 7px; top: 5px; color: #1D4A8C; }
#spare-key-flow .l_col-step dd { color: #1D4A8C; font-size: 2rem; font-weight: 700; }
#spare-key-flow section .text { margin-bottom: 0;}
#spare-key-flow section .text p {}
#spare-key-flow .bg-red { padding: 20px; list-style-type: none; margin-top: 20px;}
#spare-key-flow .bg-red li {}

#spare-key-flow .bg-blue { text-align: center; padding: 20px;}
#spare-key-flow .bg-blue .lead-a { margin-bottom: 5px;}
#spare-key-flow .bg-blue .text {}
#spare-key-flow .bg-blue .text a {}

@media (min-width: 768px){
    #spare-key { margin-bottom: 140px !important;}
    #spare-key .title-a { margin-bottom: 30px; }
    #spare-key > .l_col-2 > * { width: calc(50% - 18px);}
    #spare-key > .l_col-2 > figure { max-width: 347px; }
    
    #spare-key .note { margin-bottom: 60px;}
    
    #spare-key-flow section { margin-bottom: 25px; }
    #spare-key-flow .l_col-step { align-items: baseline; }
    #spare-key-flow .l_col-step dd { width: calc(100% - (110px + 15px)); }
    
}

@media (max-width: 767px){
    
    #spare-key .note { margin-bottom: 50px;}
    
    #spare-key-flow section { margin-bottom: 40px; }
    #spare-key-flow .l_col-step { justify-content: center;}
    #spare-key-flow .l_col-step dt { margin-bottom: 10px;}
    #spare-key-flow .l_col-step dd { margin-bottom: 0; text-align: center; width: 100%;}
    
    #spare-key-flow .bg-blue .lead-a { text-align: center;}
}


/*--------------------------------------

    repair-remote-control-key

--------------------------------------*/
#repair-remote-control-key {}
#repair-remote-control-key .title-a {}
#repair-remote-control-key .l_col-2 {}
#repair-remote-control-key .l_col-2 > div {}
#repair-remote-control-key .l_col-2 .title-b { text-align: left;}
#repair-remote-control-key .l_col-2 .text { margin-bottom: 0; }
#repair-remote-control-key .l_col-2 > figure { margin-bottom: 0; }
#repair-remote-control-key .l_col-2 > figure img {}


@media (min-width: 768px){
    #repair-remote-control-key .title-a { margin-bottom: 30px; }
    #repair-remote-control-key .l_col-2 > * { width: calc(50% - 18px);}
    #repair-remote-control-key .l_col-2 > figure { max-width: 347px; }
    
    
}

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


/*--------------------------------------



--------------------------------------*/

@media (min-width: 768px){

}

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