@charset "UTF-8";

/* common */
:root{
    --main:#e51616;
    scroll-behavior: smooth;
    scroll-padding-top: 1em;
}

.is--pc{display:unset;}
.is--sp{display:none;}
@media (max-width:768px) {
    .is--pc{display:none;}
    .is--sp{display:unset;}
}

body {
font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;}

.common-inner{
    max-width:820px;
    margin:0 auto;
}

/* google-font */
.m-plus-r {
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-weight: 400;
    font-style: normal;
  }
  
  .m-plus-b {
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-weight: 700;
    font-style: normal;
  }
  
  .m-plus-u {
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-weight: 800;
    font-style: normal;
  }


/* flex grid def */
.flex{ display:flex; }
.flex-center{justify-content:center;}
.flex-middle{align-items:center;}
.flex-between{justify-content:space-between;}

.grid{ display:grid;grid-template-columns:100% }
.grid-center{justify-items:center;}

.grid-2 { grid-template-columns: repeat(2,1fr) }
.grid-3 { grid-template-columns: repeat(3,1fr) }
.grid-4 { grid-template-columns: repeat(4,1fr) }

.gap-0 {gap: 0}
.gap-1 {gap: 0.25rem}
.gap-2 {gap: 0.5rem}
.gap-3 {gap: 1rem}
.gap-4 {gap: 1.5rem}
.gap-5 {gap: 3rem}
.gap-6 {gap: 4rem}
.gap-7 {gap: 5rem}
.gap-8 {gap: 6rem}
.gap-9 {gap: 7rem}
.gap-10 {gap: 8rem}





/********************************
    PC
********************************/

/* header */
.header{
}
.header-inner{padding: 1em 0;}
.header-logo{
    max-width:320px;
}
.header-links{
}
.header-links a{
    max-width:64px;
}

/* fv */
.fv{background: url(../img/fv-bg.png) center/cover;padding: 2em 0;}
.fv-head{background: var(--main);color: white;width: fit-content;padding: 0.2em 1.4em;font-size: 20px;}
.fv-head__catch{text-align: center;}
.fv-head__circle{}

.fv-head__circle img {
    max-width: 160px;
}
.fv-head__img{margin: 0 auto;width: fit-content;max-width: 420px;}
.fv-bottom-cta{background: var(--main);padding: 1em 0;}

.fv-bottom-cta a {
    display: block;
    width: fit-content;
    margin: 0 auto;
}
.fv-bottom-bridge{background: #f5f5f5;text-align: center;padding: 2em 0 4em;}


/* bullet */

.bullet{padding: 4em 0;}
.bullet-title{margin-bottom: 2em;}
.bullet-list{width: fit-content;margin: 0 auto;}
.bullet-list__item{font-size: 2em;color: #5e5e5e;}

.bullet-list__item img {
    max-width: 2em;
}


/* answer */

.answer{
    padding-bottom:4em;
}
.answer-head{max-width: 520px;margin: 0 auto;}
.answer-list{background: #f3f3f3;width: fit-content;margin: 2em auto;color: var(--main);font-size: 1.5em;padding: 1em 2em;border-radius: 1em;text-align: center;}

.answer-list p + p:before {
    content: "";
    display: block;
    width: 32%;
    height: 2px;
    background: #dddddd;
    margin: 0.5em auto;
}
.answer-last{
}



/* cta */

.cta{background: url(../img/cta-bg.png) center/cover;position: relative;padding: 3em 0 2em;margin: 2em 0;}

.cta-title {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
    text-align: center;
}
.cta-head {
}
.cta-links {
    max-width: 560px;
    margin: 0 auto;
}


/* selection */

.selection{
}
.selection-title{font-size: 48px;color: #333;text-align: center;margin-bottom: 1em;}
.selection-list{margin-bottom: 6em;}
.selection-item{
}
.selection-item__head{background: var(--main);color: white;width: fit-content;padding: 0.2em 1.4em;font-size: 28px;}

.selection-item .swiper{
    margin-top: 2em;
}
.selection-item .swiper-wrapper{
}
.selection-item .swiper-slide{
    max-width:320px;
}

.selection-item .swiper-slide p {
    text-align: center;
    font-size:20px;
    font-weight:bold;
    color:#333;
    margin-top:1em;
}
.selection-item .swiper .swiper-pagination{
    position:unset;
}
.selection-item .swiper .swiper-pagination-bullet-active{
    background:var(--main);
}
.selection-item .swiper .swiper-button-prev:before,
.selection-item .swiper .swiper-button-prev:after,
.selection-item .swiper .swiper-button-next:before,
.selection-item .swiper .swiper-button-next:after{
    content:unset;
}
.selection-item .swiper .swiper-button-prev,
.selection-item .swiper .swiper-button-next{
    border:1em solid transparent;
    width:2em;
    height: 2em;
    box-sizing:border-box;
}
.selection-item .swiper .swiper-button-prev{
    border-right-color:red;
}
.selection-item .swiper .swiper-button-next{
    border-left-color:red;
}


/* solution */
.solution {
    padding: 4em 0;
}

.solution-voices {
    margin: 2em auto;
    position: relative;
    width: 100%;
    height: 680px;
    max-width: 680px;
}

.solution-voices img {
    position: absolute;
}

.annoy-illust {
    right: 0;
    bottom: 0;
}

.annoy-voice01 {
    right: 27%;
    bottom: 28%;
}

.annoy-voice02 {
    left: 0%;
    top: 46%;
    width:54%;
}

.annoy-voice03 {
    right: 0%;
    top: 32%;
    width:54%;
}

.annoy-voice04 {
    left: 0%;
    top: 23%;
    width:54%;
}

.annoy-voice05 {
    right: 0%;
    top: 9%;
    width:54%;
}

.annoy-voice06 {
    left: 0%;
    top: 0;
    width:54%;
}

.solution-bridge {
    width: 90%;
    margin: 0 auto;
}

.solution-points {
    display: grid;
    grid-template-columns: auto auto;
    place-content: center;
    gap: 0.4em 0.8em;
    margin: 2em 0;
}

.solution-points p {
    font-weight: bold;
    font-size: 2em;
    display: flex;
    align-items: center;
    gap: .2em;
}

.solution-points p:before {
    content:"";
    display:block;
    width:1.2em;
    height:1.2em;
    border-radius:1em;
    border:.2em solid #e51616;
}

.solution-text {
    display: grid;
    place-items: center;
    gap: 2em;
    margin-top: 4em;
}

.solution-desc {
    background: lightgray;
    padding: 1em;
    font-size: 1.2em;
    width: 100%;
    max-width: 640px;
}


/* merit */
.merit {
    padding: 4em 0;
}

.merit-title {
    margin-bottom: 4em;
}

.merit-flow {
    display: grid;
}

.merit-flow__title {
    margin-bottom: 2em;
}

.merit-flow__image {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2em;
    margin-bottom: 4em;
}

.merit-point {
}

.merit-last-title {
    margin-bottom: 2em;
}

.merit-point__list {
    font-size: 1.5em;
    width: fit-content;
    margin: 0 auto;
}

.merit-point__list p {
    padding: 0.4em 0;
}

.merit-point__list p span {
    color: var(--main);
}

.merit-point__list p + p {
    border-top: 1px solid lightgray;
}




/* plan */
.plan{
    margin:4em 0;
}
.plan-title{
    margin-bottom:4em;
}
.plan-48{
}
.plan-subtitle{
}
.plan-textbox{
    border:6px solid var(--main);
    border-radius:1em;
    position:relative;
    padding: 4em 2em 2em;
    margin-bottom: 4em;
    margin-top: 4em;
}

.plan-textbox img {
    display: block;
    margin: 0 auto;
    max-width: 320px;
}

.plan-textbox p {
    font-size: 1.3em;
}
.plan-textbox__title{
    position:absolute;
    background:var(--main);
    color:white;
    padding:.1em 1em;
    top:0;
    left:50%;
    transform:translate(-50%,-50%);
    font-size:2em;
}
.plan-points{
}
.plan-points__list{width: fit-content;margin: 0 auto;}
.plan-points__item{}
.plan-points__tag{background: var(--main);color: white;padding: 6px .6em 0;font-size: 1.8em;width: fit-content;line-height: 1;}
.plan-points__box{border: 6px solid var(--main);padding: 2em;}

.plan-points__box img {
    margin: 0 auto;
    max-height: 120px;
}

.plan-points__box p {
    font-size: 1.4em;
    text-align: center;
}
.plan-points__box-title{color: var(--main);font-size: 2em;}


/* shinsa */
.shinsa{
    background:var(--main);
    padding:4em 0;
        margin-bottom:4em;
}
.shinsa h2{
    color:white;
    font-size: 2.4em;
    text-align:center;
    margin-bottom: 2rem;
}
.shinsa-steps{width: 100%;max-width: 560px;margin: 0 auto;}
.shinsa-steps__item{
    background:white;
    padding:1em;
    border-radius:1em;
    width:100%;
}
.shinsa-steps__item h3{
    font-size: 1.6em;
    color:var(--main);
    display: flex;
    align-items: center;
    gap: 0.4em;
    margin-bottom: 0.2em;
}

.shinsa-steps__item p {
    font-size: 1.2em;
}

.shinsa-steps__item h3 span{
    background: var(--main);
    color: white;
    display: block;
    width: 1em;
    line-height: 1em;
    text-align: center;
    border-radius: 100%;
    padding: 0.3em;
    box-sizing: content-box;
}
.shinsa-steps>img{
    max-width:1.6em;
    margin:.4em 0;
}

/* faq */
.faq {
    margin: 4em 0;
}

.faq-title {
    margin-bottom: 2em;
}

.faq-list {
    border-top: 1px solid lightgray;
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
}

.faq-item {
    border-bottom: 1px solid lightgray;
    font-size: 1.2em;
    cursor: pointer;
}

.faq-item.active {
    background: #fffff1;
}

.faq-item:hover {
    opacity: 0.5;
}
.faq-item.active:hover{
    opacity:unset;
}
.faq-icon {
    width: 1.4em;
    height: auto;
}

.faq-arrow {
    width: .8em;
    margin-left: auto;
    display: block;
    transition: .2s;
}
.faq-item.active .faq-arrow{
    transform:rotate(180deg);
    filter:saturate(0);
    opacity:.4;
}

.faq-q {
    padding: 1rem .4rem;
}

.faq-a {
    display: none;
    padding: 0 .4rem 1rem;
}

/* about */
.about{
    margin: 8em 0 0;
}
.about-title{
    margin-bottom: 4em;
}
.about-table{grid-template-columns: auto 1fr;font-size: 1.4em;width: fit-content;margin: 0 auto 4rem;}

.about-table dt {
    color: var(--main);
}
.about-map{
}

.about-map iframe {
    width: 100%;
    height: 320px;
}


/* footer */

.footer{background: var(--main);text-align: center;padding: 4em 0 2em;color: white;}

.footer a {
    font-weight: bold;
    text-decoration: underline;
}

.footer a img {
    max-width: 240px;
}

.footer-inner{}



/* video */
.video {
    padding: 4em 0;
}
.video video {
    width: 100%;
    height: auto;
    border: 2px solid lightgray;
}



/********************************
    SP
********************************/

@media (max-width: 768px) {


/* header */
.header-inner {
    padding: .5em;
    gap: 4vw;
}

.header-logo {
    width: 54%;
    flex-shrink: 0;
}

.header-links a {
}

.header-links {
    gap: 5px;
    justify-content: end;
    width: unset;
}


/* fv */
.fv{
    padding: 4vw 0;
}
.fv-head{
    font-size: 5vw;
    padding: 0.2em 0.6em;
}
.fv-head__catch{
    width: 84%;
    margin: 0 auto;
}

.fv-head__catch img:nth-child(2) {
    width: 80%;
}
.fv-head__circle{
    gap: 2vw;
}

.fv-head__circle img {
    width: 24vw;
}

.fv-head__circle img {
}
.fv-head__img{
    width: 80vw;
}
.fv-bottom-cta{
    padding: 4vw;
}

.fv-bottom-cta a {
}
.fv-bottom-bridge{
    padding: 5vw 10vw 10vw;
}


/* bullet */

.bullet{
    padding: 8vw 0;
}
.bullet-title{
    padding: 0 8vw;
}
.bullet-list{}
.bullet-list__item{
    font-size: 5.4vw;
}

.bullet-list__item img {
    width: 1.5em;
}


/* answer */

.answer{padding-bottom: 8vw;}
.answer-head{
    padding: 0 8vw;
    max-width: 100%;
}

.answer-head img:nth-child(1) {
    width: 50%;
}
.answer-list{
    margin: 8vw auto;
    padding: 8vw 0;
    font-size: 4.2vw;
    width: 90%;
}

.answer-list p + p:before {
}
.answer-last{padding: 0 6vw;}



/* cta */

.cta{
    margin: 4vw 0;
    padding: 8vw 0;
}

.cta .common-inner {
    gap: 4vw;
}

.cta-title {width: 90%;}
.cta-head {gap: 3%;}

.cta-head > img{
    width: 22%;
}
.cta-head a {
    width: 66%;
}
.cta-links {width: 94%;}


/* selection */

.selection{
}
.selection-title{
    font-size: 9vw;
}
.selection-list{
    gap: 8vw;
}
.selection-item{
}
.selection-item__head{
    font-size: 5vw;
    padding: .2em 1em;
}

.selection-item .swiper{
}
.selection-item .swiper-wrapper{
}
.selection-item .swiper-slide{
    max-width:unset;
    text-align:center;
}
.selection-item .swiper-slide img{
    width:64%;
}
.selection-item .swiper-slide p {
}
.selection-item .swiper .swiper-button-prev{
    left:0;
}
.selection-item .swiper .swiper-button-next{
    right:0;
}
.selection-item .swiper .swiper-button-prev,
.selection-item .swiper .swiper-button-next{
    width:3vw;
    height: 3vw;
    border-width:3vw;
}



/* solution */
.solution {padding: 8vw 0;}
.solution-title{width:70%;margin: 0 auto;}
.solution-voices {margin: 4vw 2vw;height: 95vw;width: unset;}
.solution-voices img {
}
.annoy-illust {
    width: 41%;
}
.annoy-voice01 {
    width: 20%;
}
.annoy-voice02 {
    top: 48%;
}
.annoy-voice03 {
    top: 31%;
}
.annoy-voice04 {
    top: 24%;
}
.annoy-voice05 {
    top: 7%;
}
.annoy-voice06 {}
.solution-bridge {}
.solution-points {
    margin: 4vw 4vw;
}
.solution-points p {
    font-size: 6vw;
    letter-spacing: -0.1em;
}
.solution-points p:before {}
.solution-text {
    margin: 12vw 4vw 8vw;
    gap: 8vw;
}

.solution-text img[src*="solution-illust-car.png"] {
    width: 54%;
}
.solution-desc {
    padding: 3.2vw;
    font-size: 15px;
}


/* merit */
.merit {
    padding: 8vw 4vw 12vw;
}
.merit-title {
    margin-bottom: 12vw;
}
.merit-flow {}
.merit-flow__title {}
.merit-flow__image {
    grid-template-columns: 100%;
    gap: 4vw;
}
.merit-point {}
.merit-last-title {
    margin: 0 auto 8vw;
    width: 80%;
}
.merit-point__list {
    font-size: 1.2rem;
}
.merit-point__list p {}
.merit-point__list p span {}
.merit-point__list p + p {}


/* plan */
.plan{
    padding: 8vw 4vw;
    margin: unset;
}
.plan-title{
    margin: 0 auto 12vw;
    width: 80%;
}
.plan-48{}
.plan-subtitle{
    width: 72%;
    margin: 0 auto 1em;
}
.plan-textbox{
    margin: 8vw 0;
    padding: 14vw 4vw 4vw;
    border-width: 1.2vw;
}
.plan-textbox img {
    width: 62%;
}
.plan-textbox p {
    font-size: 14px;
}
.plan-textbox__title{
    font-size: 6.4vw;
    width: fit-content;
    padding: .2em 1em;
    white-space: nowrap;
}
.plan-points{}
.plan-points__list{
    width: 90%;
}
.plan-points__item{}
.plan-points__tag{
    font-size: 7vw;
    padding: 0.2em 0.3em 0;
}
.plan-points__box{
    padding: 8vw 4vw;
    border-width: 1.2vw;
}

.plan-points__box img {}

.plan-points__box p {
    font-size: 14px;
}
.plan-points__box-title{
    text-align: center;
    font-size: 8vw;
}


/* shinsa */
.shinsa{
    padding: 12vw 4vw;
}
.shinsa h2{
    font-size: 8.4vw;
}
.shinsa-steps{}
.shinsa-steps__item{}
.shinsa-steps__item h3{
    font-size: 6.4vw;
}
.shinsa-steps__item p {
    font-size: 15px;
}
.shinsa-steps__item h3 span{}
.shinsa-steps>img{}

/* faq */
.faq {
    margin: 12vw 4vw;
}
.faq-title {
    width: 64%;
    margin: 0 auto 8vw;
}
.faq-list {}
.faq-item {
    font-size: 15px;
}
.faq-item:hover {
    opacity: unset;
}
.faq-icon {}
.faq-arrow {}
.faq-q {}
.faq-a {}

/* about */
.about{
    margin: 24vw 0 0;
}
.about-title{
    width: 32%;
    margin: 0 auto 8vw;
}
.about-table{
    font-size: 16px;
    margin: 0 auto 8vw;
}
.about-table dt {}
.about-map{}
.about-map iframe {
    width: 100vw;
    height: 80vw;
}



/* footer */

.footer{}

.footer a {
}

.footer a img {
}

.footer-inner{}

 
/* video */
.video {padding: 6vw 2vw;}
.video video {
}


}