@charset "UTF-8";

/*共通*/
body {
    background-color: #fff;
    position: relative;
    font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
p {
    line-height: 1.6;
    word-wrap: break-word;
    font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.wrapper {
    padding: 0;
    overflow: hidden;
    color: #111;
    background: #fff;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    overflow: hidden;
}

a:link {
    color: #fff;
    text-decoration: none;
}
a:hover{
    opacity: 0.6;
}

img{
    width: 100%;
}

/*----------header----------*/
header {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    padding: 5px 0px;
    background-color: #fff;
    justify-content: space-between;
    align-items: center;
    z-index: 10;
    position: relative;
}
header a{
    margin-right: 10px;
}
.head_flx {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0;
    padding: 1% 2%;
}
.head_logo {
    max-width: 30%;
    margin-right: 10%;
}
@media (max-width: 1450px) { 
    .head_logo {
        max-width: 281px;
    }
}
@media (max-width: 767px) { 
    .head_flx {
        margin: 0;
        padding: 1% 1%;
    }
    .head_logo {
        max-width: 50%;
        margin-right: 2%;
        margin-left: 1%;
    }
}
/* リアルタイム表示 */
#waiting-info-1{
    padding: 10px 0;
}
#waiting-info-2{
    padding: 8% 0 0;
    font-size: 34px;
}
@media (max-width: 789px) {
    #waiting-info-1{
        font-size: 15px;
    }
    #waiting-info-2{
        font-size: 22px;
    }
}
/* 点滅 */
.timer01{
    font-weight: bold;
    text-align: center;
    font-size: 23px;
}
.timer02{
    font-weight: bold;
    text-align: center;
    font-size: 23px;
}
.break-after {
    white-space: pre-wrap; /* 改行を有効にする */
}
.blinking{
	-webkit-animation:blink 1.5s ease-in-out infinite alternate;
    -moz-animation:blink 1.5s ease-in-out infinite alternate;
    animation:blink 1s ease-in-out infinite alternate;
}
@-webkit-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@-moz-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}


/* CTA動き */
.b1{
    padding: 1% 5% 9%;
}
.cta_bg a {
    display: inline-block;
    margin: 10px 5px;
    position: relative; /* 必須：topを適用するため */
    border-radius: 15px;
    transition: box-shadow 0.2s ease;
}

.cta_bg img {
    display: block;
    border-radius: 15px;
}

/* オレンジの影（cta02_tel.png用） */
.cta_tel {
    animation: hekomu2Orange 3s ease-in-out infinite; /* 速さを1.2倍に調整 */
}

/* 緑の影（cta02_mail.png用） */
.cta_mail {
    animation: hekomu2Green 3s ease-in-out infinite; /* 速さを1.2倍に調整 */
}

/* オレンジの影のアニメーション */
@keyframes hekomu2Orange {
    0% {
        box-shadow: 0 8px 0 #bd6000; /* オレンジ */
        top: 0px;
    }
    10% {
        box-shadow: none;
        position: relative;
        top: 8px;
    }
    20% {
        box-shadow: 0 8px 0 #bd6000; /* オレンジ */
        top: 0px;
    }
    30% {
        box-shadow: none;
        position: relative;
        top: 8px;
    }
    40% {
        box-shadow: 0 8px 0 #bd6000; /* オレンジ */
        top: 0px;
    }
    100% {
        box-shadow: 0 8px 0 #bd6000; /* オレンジ */
        top: 0px;
    }
}

/* 緑の影のアニメーション */
@keyframes hekomu2Green {
    0% {
        box-shadow: 0 8px 0 #007a21; /* 緑 */
        top: 0px;
    }
    10% {
        box-shadow: none;
        position: relative;
        top: 8px;
    }
    20% {
        box-shadow: 0 8px 0 #007a21; /* 緑 */
        top: 0px;
    }
    30% {
        box-shadow: none;
        position: relative;
        top: 8px;
    }
    40% {
        box-shadow: 0 8px 0 #007a21; /* 緑 */
        top: 0px;
    }
    100% {
        box-shadow: 0 8px 0 #007a21; /* 緑 */
        top: 0px;
    }
}

/* 2ボタンフレックス */
.b2{
    padding: 9% 1% 3%;
    display: flex;
}
.card{
    width: 95%;
    margin: 0 auto 9%;
}

/* 価格 */
.cost{
    background-color: #fff4b8;
    padding: 7% 7% 1%;
}
.cost img{
    margin-bottom: 7%;
}
/* 実績 */
.jisseki{
    padding: 7%;
    margin-top: -8%;
}
.jisseki img{
    margin-bottom: 5%;
}
/* 要注意 */
.caution{
    background-color: #e9e9e9;
    padding: 4% 7% 7%;
}
.caution img{
    margin-bottom: 5%;

}


/*-----------お客様の声---------*/
.voice_bg{
    background-color: #fff1f1;
}
.ttl_bg_or {
    padding: 55px 0 100px;
}
.voice_ttl {
    max-width: 550px;
    margin: 0 auto;
}
.voice-contents{
    padding: 8px 0 7% 0;
    margin-top: -105px;
}
.slick-prev:before, .slick-next:before{
    opacity: 1;
}
.slick-dots li.slick-active button:before {
    opacity: 1 !important;
    color: #252423 !important;
}
@media screen and (max-width:767px){ 
    .ttl_bg_or {
        padding: 45px 0 55px;
    }
    .voice_ttl {
        max-width: 85%;
        margin: 0 auto;
        padding: 20px 0;
    }
    li.slide_contents{
        width: 83vw!important;
        padding: 22px 20px 20px;
    }
    .voice-contents{
        padding: 4% 0 5%;
        margin-top: -35px;
    }
}
/*===========スライダー============*/
.slider {/*横幅94%で左右に余白を持たせて中央寄せ*/
    width: 100%;
    margin:168px auto 0;
}

.slick-slide img {
    display: inline-block;
    padding: 0;
    margin: 0 auto;
    width: 100%;
    max-width: 500px;
}

.slider .slick-slide {
    transform: scale(0.8);/*左右の画像のサイズを80%に*/
    transition: all .5s;/*拡大や透過のアニメーションを0.5秒で行う*/
    opacity: 0.5;/*透過50%*/
}

.slider .slick-slide.slick-center{
    transform: scale(1);/*中央の画像のサイズだけ等倍に*/
    opacity: 1;/*透過なし*/
}

.slick-list {
    overflow: inherit;
}

/*矢印の設定*/
.slick-prev {/*戻る矢印の位置と形状*/
    left: 8.4% !important;
    z-index: 10 !important;
}

.slick-next {/*次へ矢印の位置と形状*/
    right: 14.2% !important;
}

/*ドットナビゲーションの設定*/

.slick-dots {
    text-align:center;
    margin:20px 0 0 0;
}
.slick-dots li button:before{
    font-size: 13px !important;
}

.slick-dots li {
    display:inline-block;
    margin:0 5px;
}

.slick-next:before {
    content: '▶' !important;
}
.slick-prev:before {
    content: '◀' !important;
}
.slick-prev:before, .slick-next:before{
    color: #252423 !important;
    font-size: 60px !important;
}
ul {
    padding-inline-start: 0px;
}
.slick-dots {
    position: absolute;
    bottom: -50px !important;
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;

    list-style: none;
    text-align: center;
}
@media (min-width: 767px) {
    .slick-prev {/*戻る矢印の位置と形状*/
        left: 3% !important;
        z-index: 999 !important;
    }
    .slick-next {/*次へ矢印の位置と形状*/
        right: 9% !important;
    }
}
@media (max-width: 767px) {
    .slider {/*横幅94%で左右に余白を持たせて中央寄せ*/
        margin: 0 auto;
    }

    /*矢印の設定*/
    .slick-prev {/*戻る矢印の位置と形状*/
        left: 4% !important;
        z-index: 10;
    }

    .slick-next {/*次へ矢印の位置と形状*/
        right: 4% !important;
        z-index: 10;
    }
    .slick-prev:before, .slick-next:before{
        font-size: 40px !important;
    }
    .slick-dots {
        bottom: -25px !important;
    }
}



/*-----------問い合わせフォーム　タイトルのみ---------*/
.form_bg {
    background-color: #fff;
    padding-bottom: 50px;
}
.toiawase {
    width: 85%;
    max-width: 535px;
    margin: 40px auto;
    background-color: #fff;
    border: 2px #252525 solid;
    border-radius: 10px;
    padding: 15px;
}
@media (max-width: 767px) { 
    .form_ttl {
        padding: 30px 0;
    }
}
/*-----------フッター---------*/
footer {
    padding: 55px ;
    font-size: 14px;
    margin-top: 98px;
    text-align: center;
    background-color: #212121;
}
footer a{
    color: #fff;
}
@media (max-width: 767px) {
    footer {
        margin-top: 64px;
    }
}
/*-----------追従---------*/
.follow_inner{
    bottom: 0;
    /*position: fixed;*/
    width: 600px;
    text-align: center;
    background-color: #2121219e;
}
.follow_inner a {
    width: 90%;
    margin: 4.5% 5% 5%;
    display: inline-block;
    position: relative; /* 必須：topを適用するため */
    border-radius: 13px;
    transition: box-shadow 0.2s ease;
}
@media (max-width: 767px) {
    .follow_inner{
        width: 100%;
    }
}





/* QA */
.QA_bg{
    background-color: #fff4b8;
    padding: 5% 7%7%;
}
.QA_inner{
    background-color: #fff;
    border-radius: 10px;
    padding: 4%;
    margin-bottom: 4.2%;
}
.qin,.ain{
    display: flex;
}
.qin img, .ain img{
    width: 30px;
    height: 30px;
    margin: 0px 8px 0 0;
}
.qin{
    margin-bottom: 2%;
}
.qin p{
    font-size: 25px;
    font-weight: bold;
    color: #ff0000;
    line-height: 1.4;
}
.ain p{
    font-size: 23px;
    line-height: 1.4;

}
@media (max-width: 789px) {
    .qin p{
        font-size: 15px;
        line-height: 1.4;
    }
    .ain p{
        font-size: 14px;
        line-height: 1.4;
    }
    .qin img, .ain img{
        width: 20px;
        height: 20px;
        margin: 0px 6px 0 0;
    }
}

/*お問い合わせフォーム*/
.content-area{
    background-color: #fff;
}

.content-area h3{
    margin: 2% auto;
    font-size: 2em;
    padding: 2%;
    line-height: 1.2;
    text-align: center;
    font-weight: bold;
}

.content-main {
    max-width: 700px;
    margin: 0 auto;
    background-color: #fff;
}
#content {
    margin: 0 2%;
}

@media (max-width: 767px) {
.content-area h3 {
    font-size: 1.4em;
    margin: 10% auto 6%;
    
}
.form_tbl td {
    display: block;
    width: 100%;
    border: none!important;
    margin-bottom: 23px;
    padding-left: 10px;
    margin-top:10px;
}

#content {
    padding-bottom: 20%;
}
}





/* 運営者情報 */
/*会社情報*/
    #profile h2 {
        font-size: 23px;
        margin: 10% 0 2% 0;
        text-align: center;
        font-weight: bold;
    }
    #profile table , #profile td, #profile th {
        border: 1px solid #c3c3c3;
        border-collapse: collapse;
    }
    #profile td, #profile th {
    padding: 3%;
    font-size: 14px;
    }
    #profile table{
        width: 90%;
        margin: 0 auto;
    }
    #profile th {
        background: #e9e9e9;
        width: 30%;
    text-align: left;
    vertical-align: middle;
    }
    #profile td{
    text-align: center;
    }
    #profile p{
        font-size: 14px;
    }