@charset "UTF-8";
@media screen and (max-width: 768px){
    :root{
        --main--blue: #0083cf;
        --sub--blue: #4ca1d9;
        --right--blue: #eaf8fc;
        --yellow: #f7e328;
        --orange: #eb7633;
        --white: #fff;
        --black: #333;
        --green: #34ac37;
    }
    body{
        line-height: 1.2;
    }
    .wrapper{
        padding: 10% 4%;
    }
    .onlysp{
        display: block;
    }
    .onlypc{
        display: none;
    }
    .sec-Title{
        font-size: 1.3rem;
    }

    /*=========== header ===========*/
    #header{
		display: none;
        background-color: transparent;
		padding: 0.5rem 4% 0 4%;
    }
	#site-Title{
		width: 40%;
	}
    #header-Navi{
        display: none;
    }

	main{
		padding-top: 0;
	}
	
    /*=========== スマホ用メニュー ===========*/
    #sp-Navi{
        display: block;
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        z-index: 999;
        background-color: #fffeac;
        padding: 0.8rem 0.3rem;
		border-top: solid 0.75px #d7d7d7;
    }
    #sp-Navi .cta-Button{
        display: flex;
        justify-content: space-between;
        align-items: stretch;
        gap: 0.3rem;
    }
    #sp-Navi .cta-Button li{
        width: calc(33.3% - 0.3rem);
    }
    #sp-Navi .cta-Button li a{
        display: block;
        padding: 6px 3px;
        color: var(--white);
    }
    #sp-Navi .cta-Button li .cta-Title{
        text-align: center;
    }
    #sp-Navi .cta-Button li .cta-Title img{
        width: 20%;
		margin-bottom: 0.5rem;
    }
	#sp-Navi .cta-Button li.tel .cta-Title img{
        width: 15%;
    }
    #sp-Navi .cta-Button li .title{
        font-weight: bold;
        font-size: 0.75rem;
		margin-bottom: 0.3rem;
    }
    #sp-Navi .cta-Button .tel{
        background-color: var(--main--blue);
        border: solid 2px #00679b;
        border-radius: 8px;
    }
    #sp-Navi .cta-Button .mail{
        background-color: var(--yellow);
        border: solid 2px #bfac22;
        border-radius: 8px;
    }
    #sp-Navi .cta-Button .mail a{
        color: var(--orange);
    }
    #sp-Navi .cta-Button .line{
        background-color: var(--green);
        border: solid 2px #2a822a;
        border-radius: 8px;
    }
	#sp-Navi .cta-Button li.line .title{
        font-size: 0.7rem;
    }
    #sp-Navi .cta-Button li .cta-text{
        font-size: 0.7rem;
		text-align: center;
    }

    /*=========== 導入 ===========*/
    #concept{
        flex-direction: column;
        gap: 1rem;
    }
    #concept .concept-Text-Container{
        width: 100%;
		margin-bottom: 2rem;
    }
    #concept .youtube-Container{
        width: 100%;
		padding-bottom: 56.25%;
    }

    /*=========== CTA ===========*/
    #cta-Caution p{
        font-size: 1.2rem;
    }
    #cta-Caution p.border{
        font-size: 1.2rem;
		margin: 0.5rem 0;
		padding: 0.2rem 0.5rem;
    }
    #cta-Caution p.border::before{
        height: 100%;
    }
    #cta-Caution p.small{
        font-size: 1.1rem;
    }

    #cta-Container .cta-Wrapper,
    #cta-Container2 .cta-Wrapper,
    #cta-Container3 .cta-Wrapper{
        padding: 8% 6%;
    }
    #cta-Container .cta-Wrapper::before,
    #cta-Container2 .cta-Wrapper::before,
    #cta-Container3 .cta-Wrapper::before{
        width: 96.5%;
    }
    #cta-Container .feature,
    #cta-Container2 .feature,
    #cta-Container3 .feature{
        flex-direction: column;
        margin-bottom: 1rem;
    }
    #cta-Container .feature li,
    #cta-Container2 .feature li,
    #cta-Container3 .feature li{
        font-size: 1rem;
        margin-bottom: 0.5rem;
    }
    #cta-Container .feature li::before,
    #cta-Container2 .feature li::before,
    #cta-Container3 .feature li::before{

    }
    #cta-Container .feature li.border,
    #cta-Container2 .feature li.border,
    #cta-Container3 .feature li.border{
        display: none;
    }
    #cta-Container .sec-Title,
    #cta-Container2 .sec-Title,
    #cta-Container3 .sec-Title{
        margin-bottom: 1.5rem;
    }
	
	/*=========== CTA(共通) ===========*/
    #cta-Container .cta-Button,
    #cta-Container2 .cta-Button,
    #cta-Container3 .cta-Button{
        flex-direction: column;
        gap: 0.5rem;
    }
    #cta-Container .cta-Button li,
    #cta-Container2 .cta-Button li,
    #cta-Container3 .cta-Button li{
        width: 100%;
    }
	#cta-Container .cta-Button li a,
	#cta-Container2 .cta-Button li a,
	#cta-Container3 .cta-Button li a{
		padding: 1rem;
	}
    #cta-Container .cta-Button li .cta-Title,
    #cta-Container2 .cta-Button li .cta-Title,
    #cta-Container3 .cta-Button li .cta-Title{
        gap: 0;
		justify-content: flex-start;
		margin-bottom: 0.5rem;
    }
    #cta-Container .cta-Button li .cta-Title img,
    #cta-Container2 .cta-Button li .cta-Title img,
    #cta-Container3 .cta-Button li .cta-Title img{
        width: 8%;
		margin-right: 0.5rem;
    }
    #cta-Container .cta-Button li .title,
    #cta-Container2 .cta-Button li .title,
    #cta-Container3 .cta-Button li .title{
        width: 80%;
        font-size: 1.3rem;
    }
    #cta-Container .cta-Button li.tel .title,
    #cta-Container2 .cta-Button li.tel .title,
    #cta-Container3 .cta-Button li.tel .title{
        font-size: 1.6rem;
    }

    /*=========== YouTube ===========*/
	.carousel-item {
    	flex: 0 0 85%;
    	padding: 0 8px;
  	}
  	.carousel-arrow { width: 40px; height: 40px; }
  	.prev-arrow { left: 2%; }
  	.next-arrow { right: 2%; }

    /*=========== 対応エリア ===========*/
    #area .area-List{
        padding: 0;
    }
    #area .area-List li{
        width: calc(33.3% - 1rem);
    }

    /*=========== サービス内容 ===========*/
    #service .service-Container{
        flex-direction: column;
    }
    #service .service-Container .service-Item{
        width: 100%;
    }
	#service .service-Container .service-Explanation{
		padding: 1.5rem;
	}
    #service .service-Container .service-Explanation .service-Title{
        font-size: 1.3rem;
    }
	#service .service-Container .service-Explanation .check-List img{
		width: calc(10% - 0.5rem);
	}
    #service .service-Container .service-Explanation .check-List .check-Text{
        font-size: 0.9rem;
    }

    /*=========== 料金 ===========*/
    #price .sectitle-Container{
        margin-bottom: 0;
    }
    #price .sectitle-Container .point{
        font-size: 0.75rem;
        width: 62px;
        height: 62px;
        left: 10%;
    }
    #price .sectitle-Container .point span{
        font-size: 1rem;
    }
    #price .option{
        padding: 2rem 1rem;
    }
    #price .option .option-Title{
        top: -1.1rem;
        width: 48%;
    }
    #price .option .option-List{
        flex-direction: column;
		gap: 0.5rem;
    }
    #price .option .option-List li{
        width: 100%;
        font-size: 1rem;
    }
	
	/*=========== 公式LINE ===========*/
	#cta-Line img{
		margin-bottom: 1rem;
	}
	#cta-Line .line-Button{
		padding: 2rem 0;
		font-size: 1.1rem;
		width: 90%;
	}

    /*=========== 選ばれる理由 ===========*/
    #feature .feature-Item{
        flex-direction: column;
        gap: 1rem;
    }
    #feature .feature-Item:nth-child(odd){
        flex-direction: column;
    }
	#feature .feature-Item .image-Container{
		width: 100%;
	}
	#feature .feature-Item .text-Container{
		width: 100%;
		padding-left: 1rem;
	}
	#feature .feature-Item .text-Container .feature-Title{
		font-size: 1.2rem;
		margin-bottom: 1rem;
	}

    /*=========== コラムバナー ===========*/
    #banner .banner-List{
        flex-direction: column;
        gap: 1rem;
    }
    #banner .banner-List li{
        width: 100%;
    }

    /*=========== 会社概要 ===========*/
    #company .text-List li{
        font-size: 0.85rem;
    }
    #company .profile-List li{
        gap: 1rem;
        padding: 1rem;
    }
    #company .profile-List li .title{
        width: calc(35% - 1rem);
        font-size: 0.95rem;
    }
    #company .profile-List li .text{
        width: calc(65% - 1rem);
        font-size: 0.85rem;
    }
	
	/*=========== お問い合わせ ===========*/
	#contact form{
		width: 100%;
	}
	#contact label{
		margin-bottom: 0.3rem;
	}
	#contact form input,
	#contact form textarea{
		font-size: 1rem;
	}
	#contact form select{
		padding: 0.8rem 1rem;
		font-size: 1rem;
	}
	#contact form input#button{
		width: 50%;
		font-size: 1.1rem;
	}
	
	/*=========== footer ===========*/
	#footer{
		padding-bottom: 9rem;
	}
	#footer img{
		width: 20%;
		margin-bottom: 1rem;
	}
}