@charset "UTF-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;600;700;800;900&display=swap');

@media screen and (max-width: 999px){
   
.pc{
    display: none;
}

.sp{
    display: block!important;
}
	
.wrapper{
	width: 94%;
	margin-left: 3%;
	margin-right: 3%;
}
	
	
/*🔲🔲🔲🔲🔲🔲🔲🔲🔲🔲 フローティングバナー 🔲🔲🔲🔲🔲🔲🔲🔲🔲🔲*/

.floating_banner {
    position: fixed;
	background-color: rgba(0,0,0,0.8); /* 背景色：黒（透明度あり） */
    bottom: 0;
	color: #fff;
	font-size: 18px;
    font-weight: 600;
	line-height: 1.5rem;
	padding: 10px;
	text-align: center;
    text-orientation: mixed;
    width: 100vw;
    z-index: 50;
}
	
.floating_banner .contact_box {
    column-gap: 2%;
}
	

.floating_banner .contact_box li {
    width: calc(100% / 2);
}	
	
.floating_banner .contact_box li.btn a {
    width: 100%;
	padding: 10px;
    position: relative;
}
	
.floating_banner .contact_box li.btn a::after {
    content: "";
    position: absolute;
    background-repeat: no-repeat;
	width: 25px;
	height: 25px;
    right: calc(100vw / 30);
    top: 18px;
}
	
.floating_banner .contact_box li.contact_btn a::after {
	background-image: url("../images/arrow_white.svg");

}
	
.floating_banner .contact_box li.download_btn a::after {
	background-image: url("../images/arrow_red.svg");

}
	
.floating_banner .contact_box li.download_btn a {
    border: none;
}
	
	
	
/*🔲🔲🔲🔲🔲🔲🔲🔲 ヘッダー 🔲🔲🔲🔲🔲🔲🔲🔲🔲🔲*/
header {
	background-color: rgb(255, 255, 255);
    padding: 10px;
}
	
header .flex_around_center {
	column-gap: 2%;
	display: block;
    justify-content: space-between;
}

header .flex_bet_center {
	column-gap: 2%;
}
	
header .flex_around_center .left_side {
    width: 100%;
}
	
header .flex_around_center a {
	width: 100%;
}
	
header .flex_around_center .info_box {
    width: 40%;
}

	
header .flex_around_center .info_box.sp {
    width: 100%;
}
	
header .right_box.flex_end_center {
    width: 60%;
}
	
header .info_box {
    margin-right: 5px;
}
	
header p.phone_number a {
    font-size: calc(100vw / 20);
    margin-left: calc(100vw / 24);
    width: 100%;
}
	
header .btn a {
    border-radius: 30px;
    margin-top: 3px;
	padding: calc(100vw / 90) 0;
    width: 100%;
}
	
header .right_box.flex_end_center {
    display: block;
	width: 100%;
}
	
header li.btn {
	width: 50%;
}
	
header p.phone_number a::before {
    background-size: calc(100vw / 28);
    left: calc(100vw / -27);
    top: 13%;
}
	

header .info_box p:nth-child(2), header .info_box p span {
    line-height: 1.4em;
    font-size: calc(100vw / 40);
}


/*🔲🔲🔲🔲🔲🔲🔲🔲 TOP page  🔲🔲🔲🔲🔲🔲🔲🔲🔲🔲*/
	
#top_bg {
    background-image: url(../images/top_bg_sp.webp?0314);
    height: calc(100vw / 0.9);
    margin-top: 11%;
}
	
.border_txt_box {
    right: 32%;
    top: 33%;
}
	
#top_bg p {
    font-size: calc(100vw / 37);
}
	
#top_bg img:first-child {
    width: calc(100vw / 1.6);
    top: 12%;
    right: 19%;
}

	
h1 {
	font-size: calc(100vw / 13);
    right: 19%;
    top: 38%;
}
	
#top_bg h2 {
    font-size: calc(100vw / 33);
    top: 50%;
    right: 23%;
}

	
/*🔲🔲🔲🔲🔲🔲🔲🔲 TOP page の下部分 🔲🔲🔲🔲🔲🔲🔲🔲🔲🔲*/
#under_top {
	padding-bottom: 0;
}

	
#under_top .flex_bet_center.sp {
	align-items: baseline;
	column-gap: 2%;
	display: flex!important;
}
	
.flex_bet_center.pc {
    display: none;
}
	
#under_top .flex_bet_center img {
    width: 50%;
}

	
#under_top .flex_bet_center img:first-child {
    margin-bottom: 20px;
}
	
#logo_contents {
	padding-bottom: 20px;
}

#worries .flex_center_center {
    display: block;
	text-align: center;
	margin-top: 20px;
	margin-bottom: 20px;
}
	
h2.section_ttl {
    position: relative;
    z-index: 2;
}
	
#worries .flex_center_center img {
    width: 80%;
}
	
#worries img {
    margin-top: 0;
}

#worries .flex_center_center img:first-child {
    margin-bottom: 40px;
}

	
#worries .left_side, #worries .right_side {
    position: relative;
    z-index: 2;
}
	
#worries .left_side{
    margin-bottom: 40px;
}
	

	
h2.section_ttl span {
    font-size: 42px;
}
	
/*🔲🔲🔲🔲🔲🔲🔲🔲 選ばれる理由🔲🔲🔲🔲🔲🔲🔲🔲🔲🔲*/
	
#reason {
	background-image: url("../images/reason_bg_sp.png");
}

.slider img {
    max-width: 999px;
    width: 95vw;

}
	
/*🔲🔲🔲🔲🔲🔲🔲🔲 価格帯 🔲🔲🔲🔲🔲🔲🔲🔲🔲🔲*/

#plan {
    background-image: url("../images/plan_bg_sp.webp");
}
	
#plan .flex_bet_center {
    display: block;
    text-align: center;
    margin: 0 auto;
}
	
#plan  img {
	margin-top: 40px;
}
	
#plan img.pc {
   display: none;
	}
	
	
#plan .flex_bet_center img {
    width: 100%;
}
	

	
/*🔲🔲🔲🔲🔲🔲🔲🔲 メニュー 🔲🔲🔲🔲🔲🔲🔲🔲🔲🔲*/
	
h2.section_ttl span.bigger {
    font-size: 60px;
}
	
#menu h2.section_ttl span.bigger::before {
    left: -80%;
    top: 20%;
}
	
#menu h2.section_ttl span::after {
    right: -55%;
    top: -20%;
}
	

p.ttl_bottom {
    font-size: 16px;
}
	
#menu ul.menu_area li {
    height: 240px;
    min-width: 210px;
}
	
.menu_area {
    animation: scrollAnime 35s linear infinite both;
}
	
#menu .btn a {
	font-size: 20px;
    padding: 20px 45px;
    width: 80%;
}
	
#menu .btn a::after {
    top: 25px;
}
	
/*🔲🔲🔲🔲🔲🔲🔲🔲 CTA 🔲🔲🔲🔲🔲🔲🔲🔲🔲🔲*/
#cta, #cta_02 {
    padding: 50px 0;
}
	
#cta p, #cta_02 p {
    font-size: 26px;
}
	
#cta p span, #cta_02 p span {
    font-size: 18px;
}
	
#cta .flex_center_center, #cta_02 .flex_center_center {
    column-gap: 3%;
    display: block;
	text-align: center;
}
	
#cta .btn a, #cta_02 .btn a {
    font-size: 20px;
    padding: 20px 0;
    width: 80%;
}
	
	
#cta li.btn.contact_btn.arrow_btn, #cta_02 li.btn.contact_btn.arrow_btn  {
    margin-bottom: 20px;
}
	
#cta .contact_btn.btn.arrow_btn a::after, #cta_02 .contact_btn.btn.arrow_btn a::after {
    top: 30px;
}
	
#cta .download_btn.btn.arrow_btn a::after, #cta_02 .download_btn.btn.arrow_btn a::after {
    background-image: url(../images/arrow_red.svg);
    top: 30px;
}
	
#cta .phone_number a, #cta_02 .phone_number a {
    margin: 20px auto;
}
	
/*🔲🔲🔲🔲🔲🔲🔲🔲 ご利用の流れ 🔲🔲🔲🔲🔲🔲🔲🔲🔲🔲*/
#flow {
	padding-top: 0;
}
	
#flow .flex_bet_center {
    display: block;
}
	
#flow .flex_bet_center li {
    width: 100%;
}
	
#flow .flex_bet_center.pc li::after {
	display: none;
}
	
#flow .flex_bet_center.sp li::after {
	background-image: url(../images/step_dot.svg);
    background-repeat: no-repeat;
    background-size: 70%;
    content: "";
    display: block;
    position: absolute;
    height: 10px;
    width: 70px;
    z-index: 2;
    right: 41%;
    transform: rotate(90deg);
    top: 110%;
}
	
#flow .flex_bet_center.sp li:last-child::after {
	display: none;
}
	
/*🔲🔲🔲🔲🔲🔲🔲🔲企業様の声🔲🔲🔲🔲🔲🔲🔲🔲🔲🔲*/
#voice {
    padding: 50px 0;
	background-image: url("../images/companyVoice_sp.webp");
}
	
#voice .flex_start_center {
    display: block;
	margin-top: 20px;
}
	
#voice .flex_start_center li {
    height: auto;
    margin: 0 auto;
    margin-bottom: 40px;
    width: 80%;
}
	
#voice .flex_start_center li p {
    padding-top: 10px;
}
	
	
#voice .flex_start_center li img:nth-child(2) {
    width: 30%;
    margin: 10px auto;
}

/*🔲🔲🔲🔲🔲🔲🔲🔲 フッター 🔲🔲🔲🔲🔲🔲🔲🔲🔲🔲*/
footer {
	margin-bottom: 70px;
    padding-bottom: 80px;
}

footer a img {
    width: 320px;
}
	
#scrollTop_arrow {
    mix-blend-mode: multiply;
}
	
footer p.mb20 {
    font-size: 20px;
}

}

@media screen and (max-width: 450px){
	
header {
    padding: 5px;
}
	

header .flex_bet_end {
    align-items: center;
	column-gap: 2%;
}
	
header .btn a {
    padding: calc(100vw / 540) 0;
}
	
header p.phone_number a {
    font-size: calc(100vw / 18);
    margin-top: calc(100vw / 50);
}
	
header p.phone_number a::before {
    background-size: calc(100vw / 23);
    left: calc(100vw / -23);
}
	
footer a img {
    width: 65%;
}

	
#top_bg {
    margin-top: 17%;
}
	
#logo_contents {
	margin-top: calc(100vw / -10);
}
	
h2.section_ttl {
    font-size: 20px;
}
	
h2.section_ttl span {
    font-size: 25px;
}
	
h2.section_ttl span.bigger {
    font-size: 48px;
}
	
	
#menu h2.section_ttl span.bigger::before {
    left: -100%;
}
	
#menu h2.section_ttl span::after {
    right: -75%;
    top: -40%;
}
	
#menu .btn a {
    font-size: 16px;
}
	
#cta p, #cta_02 p {
    font-size: 18px;
}
	
#cta p span, #cta_02 p span {
    font-size: 16px;
}
	
#voice .flex_start_center li img:nth-child(2) {
    width: 55%;
	margin: 20px auto;
}

#voice .flex_start_center li:nth-child(2) img:nth-child(2), #voice .flex_start_center li:last-child img:nth-child(2) {
    width: 40%;
}
	

	
}