@charset "utf-8";


body,
h1 {
	margin: 0;
	padding: 0;
	font-size: calc(1ren + 4.5vw) !important;
}
body {
  font-family: 'Noto Sans JP', sans-serif;
}
.container {
    color: #fff;
    z-index: 100;
    position: relative;
    padding-top: 4em;
}
.container.h3double {
    top: 7em;
}
#navi {
	height: 5vw;
	background-color: #333;
}
#navi .logo {
	color: #fff;
	text-align: center;
	font-size: 2vw;
	font-weight: 500;
	vertical-align: middle;
}
#navi .logo img {
	height: 5vw;
	padding: 0 1rem;
}
#corpinfo .container {
	padding-top: 0;
}
.carousel-caption {
    transform: translateY(calc(100vw * -0.05));
}
#carrousel h1 {
    -webkit-text-shadow: rgba(255, 255, 255, 1) 0 0 5px;
    text-shadow: rgba(255, 255, 255, 1) 0 0 5px;
}
#carrousel h1 span {
	color:#f7931e;
}
h2.subtitle {
    color: #F7931E;
}
.midasi h2,
.midasi h3 {
	transform: rotate(350.5deg);
	position: relative;
	font-weight: 700;
}
.midasi h2 {
    font-size: calc(30px + 82 * (100vw - 400px)/1520);
	padding-left: calc(100vw * 0.05);
    top: calc(-0.7em + (100vw - 400px)/1520);
    -webkit-text-shadow: rgba(255, 255, 255, 1) 0 0 5px;
    text-shadow: rgba(255, 255, 255, 1) 0 0 5px;
}
.midasi h3 {
	font-size: calc(24px + 24 * (100vw - 400px)/1520);
	top: calc(-144 * (100vw - 400px)/1520);
	text-indent: 2em;
	padding-left: calc(100vw * 0.05);
	color: #fff;
}
#product h4 {
    font-size: 1.2em;
    font-weight: 700;
    padding: 1em 0;
    text-align: center;
}

.section-name {
	transform: rotate(90deg);
/*
	top: calc(100vw * 0.5);
	left: calc(100vw * -0.48 + 0.5em);
*/
    top: 1.5em;
    left: -1.3em;
	position: absolute;
	font-size: 11em;
	z-index: 10;
	color: #4d4d4d;
    font-weight: 900;
    width: max-content;
}
.section-name.hosei {
    left: -1em;
}

#speedy .row,
#safety .row,
#feature .row,
#product .row {
    padding-left: 100px;
}
.explanation {
    padding: 2em 0;
    margin-bottom: 2em;
}
#carrousel h1 {
	font-size: calc(1.375rem + 2.5vw) !important;
	font-weight: 900;
	color: black;
}
#top {
	height: calc(100vw * 0.8);
	position: relative;
}
#top h1 {
    text-align: center;
    font-size: calc(100vw * 0.07);
    position: relative;
    -webkit-text-shadow: rgba(255, 255, 255, 1) 0 0 5px;
    text-shadow: rgba(255, 255, 255, 1) 0 0 5px;
}
#top h2 {
    text-align: center;
    font-size: 3em;
    font-weight: 700;
    top: 5%;
    position: relative;
    -webkit-text-shadow: rgba(255, 255, 255, 1) 0 0 5px;
    text-shadow: rgba(255, 255, 255, 1) 0 0 5px;
}
#top .intoroimage {
/*
	position: absolute;
	bottom: 0;
*/
}
#speedy,
#safety,
#feature,
#product {
	position: relative;
}
#feature li {
	list-style: disc;
}
.midasi {
	position: absolute;
	z-index: 200;
	top: -4em;
}
.mid {
	background: #333333;
	clip-path: polygon(0 -1px, 0 101%, 100% 101%, 100% -1px);
	height: auto;
	min-height: calc(100vw * 0.5 + 6em);
	padding-bottom: 2em;
}

.midbottom {
	background: #333333;
	clip-path: polygon(0 -1px, 0 100%, 70% calc(100% - 100vw * 0.25), 100% 100%, 100%  calc(100vw * 0.25), 100% -1px);
	height: auto;
	min-height: calc(100vw * 0.5 + 6em);
}

.bottom {
	background: #333333;
	clip-path: polygon(0 -1px, 0 100%, 70% calc(100% - 100vw * 0.15 + 1em), 100% calc(50% + 1em), 100% -1px);
	height: auto;
	min-height: calc(100vw * 0.15);
}

.gutter {
	height: 30vh;
}

.back-gra,
.back-gra2 {
	display: block;
	position: sticky;
	top: 0;
	z-index: -1;
	height: 0;
	max-height: 0;
	overflow: visible;
}
.back-gra::before {
	background: #333333;
	height: calc(100vw * 0.12);
	clip-path: polygon(70% 0, 0 100%, 0 calc(100% + 1px), 100% calc(100% + 1px), 100% 50%);
	content: "";
	display: block;
	position: relative;
	z-index: 100;
	top: calc(100vw * -0.12);
}
.back-gra::after,
.back-gra2::after {
	content: "";
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background-position: center;
	background-repeat: no-repeat;
	-webkit-background-size: contain;
	background-size: cover;
}

.back-img-a::after {
	background-image: url("/img/bg01.jpg");
}
.back-img-b::after {
	background-image: url("/img/bg02.jpg");
}
.back-img-c::after {
	background-image: url("/img/bg03.jpg");
}
.back-img-d::after {
	background-image: url("/img/bg04.jpg");
}
.back-img-e::after {
	background: #f0f0f0;
/* 	background: linear-gradient(0deg, #f0f0f0 50%, rgba(240,240,240,0.0) 100%); */
}
#introduction {
	min-height: 500px;
	padding-bottom: calc(100vw * 0.2);
/* 	padding-top: 200px; */
/*     background: linear-gradient(0deg, #f0f0f0 80%, rgba(240,240,240,0.0) 100%); */
}
/*
.form {
    margin-top: -10px;
    padding-top: 10px;
}

.js_main_form {
    margin-top: -10px;
    padding-top: 10px;
}
*/

#corpinfo {
    padding: 3em;
    background-color: #071278;
    color: #FFFFFF;
}
#corpinfo h2 {
    font-weight: 700;
    font-size: 2em;
    margin-bottom: 0;
}
#corpinfo .corp-kana {
    text-align: right;
    padding-top: 0;
}
.corp-info {
    padding-top: 2em;
}
.corp-info p {
    padding-top: 1em;
}

.issue1,
.issue2,
.issue3 {
    height: calc(100vw * 0.1);
    min-height: 6em;
    margin-bottom: 1.6em;
}

.issue1 {
    rotate: 359deg;
}
.issue2 {
    rotate: 1deg;
}
.issue3 {
    rotate: 359deg;
}

.issue1 h2 {
    color: #fff;
}
.issue2 h2 {
    color: #fff;
}
.issue3 h2 {
    color: #fff;
}

.issue1-bg,
.issue2-bg,
.issue3-bg {
    display: flex;
    align-items: center;
}
.issue1-bg {
    background: #0f0f0f;
}
.issue2-bg {
    background: #935c5c;
}
.issue3-bg {
    background: #f0f0f0;
}

.issue-photo1 {
    background: url("/img/bg01.jpg");
}
.issue-photo2 {
    background: url("/img/bg02.jpg");
}
.issue-photo3 {
    background: url("/img/bg03.jpg");
}
.issue-photo1,
.issue-photo2,
.issue-photo3 {
    background-size: cover;
    background-position: center center;
}

.row.issue1>*,
.row.issue2>*,
.row.issue3>* {
    padding-left: 0;
    padding-right: 0;
}

.intoro {
/* 	position: absolute; */
	bottom: 0;
/* 	left: 50%; */
/*
    transform: translate(-50%, 0%);
    -webkit-transform: translate(-50%, 0%);
    -ms-transform: translate(-50%, 0%);
*/
}
.intoroimage {
    margin-top: 5rem;
}
.intoroimage img {
	width: calc(100vw * 0.4);
	max-width: 750px;
/*     margin-left: calc(100vw * 0.1); */
    position: absolute;
    bottom: 0;
}
h3.fukidashi,
h3.bubble {
    position: relative;
    background: #333333;
    width: fit-content;
    padding: 1em;
    border-radius: 1em;
    margin-left: calc(100vw * 0.07);
    color: #ffffff;
    font-size: calc(100vw * 0.02);
}
h3.bubble::before {
    position: absolute;
    content:'';
    display: block;
    width:20px;
    height:20px;
    border-radius:10px;
    top:65px;
    left:-1em;
    background: #333333;
    
}
h3.bubble::after {
    position: absolute;
    content:'';
    display: block;
    width:10px;
    height:10px;
    border-radius:5px;
    top:85px;
    left:-2em;
    background: #333333;
}
h3.bubble2::before,
h3.bubble2::after {
    top:50%;    
}
h3.bubble3::before,
h3.bubble3::after {
    top:30%;    
}
h3.fukidashi::before {
    content: '';
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    right: -22px;
    top: 20%;
    border-left: 23px solid #333;
    border-top: 5px solid transparent;
    border-bottom: 6px solid transparent;
}
h3.fukidashi span {
    color: #f4a460;
    font-weight: 900;
}
.solution-title {
    background: #333;
    padding: 3em;
    color: #fff;
    text-align: center;
}
.solution-title h2,
.solution-title p {
    font-weight: 900;
}
.solution-title h2 {
    font-size: 2.5em;
}
.solution-title p {
    font-size: 2.5em;
    margin-bottom: 0;
}
.solution h2 {
    color: #333;
}
.solution h3 {
    top: 20%;
}
.solution-title {
    background: #333;
}
.contact-phone,
.contact-form {
    color: #666666;
}

.section.contact .partsWhitebox {
	margin-top: 2em;
}
.contact-phone .phone-number {
    font-size: 3em;
    font-weight: 700;
    color: #77f;
    text-align: center;
    margin-bottom: 0;
}
.contact-phone .phone-time {
    font-size: 1.5em;
    font-weight: 700;
    color: #666666;
    text-align: center;
}
.section.contact .partsWhitebox .contact-form {
	padding-top: 2em;
}

.contact-btn {
	text-align: center;
}
/* ボタン */
a.btn_blue {
    display: block;
    max-width: 350px;
    margin: 0 auto;
    padding: 1.5rem 3.0rem;
    background-color: #1755aa;
    border-radius: 8px;
  box-sizing: border-box;
    text-decoration: none;
    transition: 0.3s;
}
a.btn_blue span.bl__text {
    display: block;
    position: relative;
    color: #fff;
    font-size: 16px;
    text-align: center;
    padding-left: 30px;
}
a.btn_blue span.bl__text:before {
    content: '';
    width: 20px;
    height: 20px;
    background: #ffffff;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    margin: auto;
}
a.btn_blue span.bl__text:after {
    content: '';
    width: 8px;
    height: 8px;
    border-top: 3px solid #1755aa;
    border-right: 3px solid #1755aa;
  box-sizing: border-box;
    transform: rotate(130deg);
    position: absolute;
    top: 0;
    left: 6px;
    bottom: 2px;
    margin: auto;
    transition: 0.3s;
}
a.btn_blue:hover {
    background-color: #1c6bd6;
}
a.btn_blue:hover span.bl__text:after {
    border-top: 3px solid #1c6bd6;
    border-right: 3px solid #1c6bd6;
}
@media (max-width: 736px) {
    a.btn_blue {
        max-width: 280px;
        padding: 1.5rem 2.0rem;
    }
    a.btn_blue span.bl__text {
        font-size: 14px;
    }
}

.br767 {display: block;}
.br768 {display: none;}
/* スマホ */
@media (max-width: 576px) {

    .sp {
        display: block;
    }
    .pc {
        display: none;
    }
    .pc-inline {
	    display: none;
    }
    #navi {
	    height: auto;
	    padding: 2rem 0;
    }
    #navi .logo {
	    font-size: 1.5rem;
	    font-weight: 900;
    }
    #top {
        height: calc(100vw * 0.8);
    }
    .intoroimage img {
        position: relative;
        width: calc(100vw * 0.6);
    }
    .worries {
        position: absolute;
        top: 10%;
        z-index: 1;
    }
    h3.fukidashi,
    h3.bubble {
        font-size: calc(100vw * 0.03);
    }
    h3.bubble::before {
        top: 23px;
        left: -1.5em;
    }
    h3.bubble2::before {
        top: 20px;
    }
    h3.bubble3::before {
        top: 27px;
    }
    h3.bubble::after {
        left: -2em;
        top: 72%;
    }
    h3.bubble2::after {
        top: 17%;    
        border: 1px solid #4f4e4e;
    }
    h3.bubble3::after {
        top: 21%;    
        border: 1px solid #4f4e4e;
    }
	.contact-phone .phone-number {
        font-size: 2em;
    }
    .contact-phone h3 {
        font-size: 2em;
    }
    #top h2 {
        font-size: 2em;
    }
    .solution-title h2 {
        font-size: 1.5em;
    }
    .solution-title p {
        font-size: 1.5em;
    }
	.carousel-caption {
	    transform: translateY(calc(100vw * -0.05));
	}

}
	@media (min-width: 577px) {
	#navi .logo img {
		height: 5vw;
		padding: 0.5rem 1rem;
	}
	#navi .logo {
		padding-right: 3rem; /* 右文字数不足分 */
	}
	.midasi h2 {
	    top: calc(-1.3em + (100vw - 400px)/1520);
	}
    .section-name {
        width: auto;
    }
    .sp {
        display: none;
    }
    .pc {
        display: block;
    }
    .pc-inline {
	    display: inline-block;
    }
    .pc.worries {
        top: -110px;
        position: relative;
    }
    h3.bubble::before {
        top: 23px;
        left: -2em;
    }
    h3.bubble2::before {
        top: 20px;
    }
    h3.bubble3::before {
        top: 27px;
    }
    h3.bubble::after {
        left: -3em;
        top: 105%;
    }
    h3.bubble2::after {
        top: 83%;    
    }
    h3.bubble3::after {
        top: 71%;    
    }
    .contact-phone .phone-number {
        font-size: 4em;
    }
	.carousel-caption {
	    transform: translateY(calc(100vw * -0.1));
	}
    #corpinfo .corp-kana {
        font-weight: 300;
        font-size: 1rem;
        text-align: right;
        padding-top: 1em;
    }

}
@media (min-width: 768px) {
    .pc.worries {
        top: -50px;
    }
    h3.bubble::before {
        top: auto;
        left: -1.5em;
    }
    h3.bubble::after {
        left: -2.5em;
    }
    h3.bubble.bubble1::after {
        top: 47%;
    }
    h3.bubble2::after {
        top: 38%;    
    }
    h3.bubble3::after {
        top: 22%;    
    }
    #top {
        height: calc(100vw * 0.8);
    }
    #top h2 {
        top: 36%;
    }
    .contact-phone .phone-number {
        font-size: 2.2em;
    }
	.carousel-caption {
	    transform: translateY(calc(100vw * -0.16));
	}
}
@media (min-width: 992px) {
    .br767 {display: none;}
    .br768 {display: block;}

    #top {
        height: calc(100vw * 0.7);
    }
    #top h2 {
        top: 36%;
    }
    .solution-title h2 {
        font-size: 2em;
    }

}
@media (min-width: 1200px) {
    #top {
/*         height: 80vh; */
        height: calc(100vw * 0.6);
    }
    #top h2 {
        font-size: 3.5em;
    }
}
@media (min-width: 1400px) {
    #top h2 {
        font-size: 3.5em;
    }
	.midasi h2 {
	    top: calc(-1.5em + (100vw - 400px)/1520);
	}
    .solution-title h2 {
        font-size: 3em;
    }

}
@media (min-width: 1620px) {
    #top h2 {
        font-size: 5em;
        top: 24%;
    }
    .solution-title h2 {
        font-size: 3.5em;
    }
}
@media (min-width: 1980px) {
    #top h2 {
        top: 25%;
    }
}
@media (min-width: 2200px) {
    #top h2 {
        top: 25%;
    }

	.midasi h3 {
		top: calc(100vw * -0.06);
    }
}


/* OverRide */
.formBtnarea .inBtns button {
    background: #666666;
}
#footer {
    padding-top: 1em;
    padding-bottom: 0;
}