/*!
 * Responsive Stylesheet
 * Copyright © マイナビ介護・福祉のシゴト
 */

@media (min-width: 1224px) {
	#lp1 #top-banner {
		padding: 13% 0;
		background-position: left 10%;
	}
	#lp1 #top-banner .container .title {
		margin-top: -5em;
	}
	#features .row {
		width: 85%;
	}
	#call-to-action .container.bg-blue {
		max-width: 100%;
	}
	#points img {
		max-width: 250px;
		margin: 0 auto;
		max-height: 230px;
	}
}

@media (min-width: 768px) {
	#main-content .container {
		margin: 0;
		max-width: none;
		width: 100%;
		padding-left: 25px!important;
		padding-right: 25px!important;
	}
}

@media only screen and (max-width: 992px) {
	#lp3 #top-banner {
		background: url(../images/lp3/image-firstview-md.jpg) right bottom no-repeat;
		background-size: cover;
	}
	#lp3 #top-banner .container {
		max-width: 100%;
	}
	#lp3 #top-banner .col-6 {
		-ms-flex: 0 0 70%;
		flex: 0 0 70%;
		max-width: 70%;
	}
	#features .title {
		height: 170px;
	}


}

@media only screen and (max-width:825px) {
	#lp4 header .container span {
		font-size: 14px;
	}
}

@media only screen and (max-width: 768px) {
	h1,
	h2,
	h3,
	h4,
	h5,
	p {
		line-height: 1.6;
	}
	h1,
	.sub-title {
		font-size: 1.7em;
	}
	#main-content .container {
		padding: 2em 0;
	}
	h1.larger {
		font-size: 2em;
		width: 100%;
	}
	.message .sub-title {
		margin: 0 auto 10px;
	}
	h2 {
		max-width: 80%;
		font-size: 1.5em;
		margin: 0 auto 1em;
	}
	h3 {
		font-size: 1.3em;
		margin-bottom: 0.8em;
	}
	h4 {
		font-size: 1.2em;
	}
	h5 {
		font-size: 1em;
		max-width: 80%;
	}
	.txt-larger {
		font-size: 1.1em;
	}
	#top-banner h3 {
		font-size: 1em;
	}
	.top-banner button {
		margin: 0 auto;
	}
	#call-to-action .buttons {
		width: 70%;
	}
	#lp1 #top-banner .container .title {
		margin-right: 0;
	}
	.speech-bubble {
		padding: 25px 5px;
	}
	#call-to-action .bubble-s {
		left: -15px;
	}
	#call-to-action .buttons {
		padding: 4em 4em 2em;
		margin-top: -0.5em;
	}
	#job-list .col-md-4.full-sp {
		max-width: 100%;
		margin: 0 0 10px;
		-ms-flex: 0 0 100%;
		flex: 0 0 100%;
		max-width: 100%;
	}
	#job-list .w-100 {
		max-width: 550px;
		margin: 0 auto;
	}
	#lp3 h1 {
		font-size: 1.2em;
		margin: 0px auto 10px;
		color: #163b4d;
	}
	#lp3 #top-banner h3 {
		font-size: 0.8em;
	}
}

@media only screen and (max-width: 580px) {
	br {
		display: none;
	}
	br.sp,
	.br-show br {
		display: block!important
	}
	body,
	html {
		font-size: 95%;
	}
	h1,
	.sub-title {
		margin-bottom: 10px;
	}
	h1.larger {
		text-align: center;
	}
	#top-banner .txt-smaller {
		font-size: 0.5em;
		margin-bottom: 5px;
	}
	#top-banner h3 {
		font-size: 0.9em;
	}
	.sp-show {
		display: block!important
	}
	.triagle.white {
		bottom: -18px;
	}
	.sp-hide {
		display: none;
	}
	.triagle {
		border-width: 20px 21.5px 0 20px;
	}
	.col-md-6,
	.col-md-4.full-sp {
		max-width: 100%;
		margin: 0 0 10px;
	}
	.btn-lg {
		font-size: 1em;
	}
	header .bt-reg {
		font-size: 0.8em;
	}
	.speech-bubble {
		padding: 35px 5px 15px;
	}
	#main-content .container {
		padding: 1.5em 15px;
	}
	.hide-sp {
		display: none;
	}
	#lp1 #top-banner {
		background-size: cover;
		background-position: 60% center;
	}
	ul.two-columns {
		columns: 1;
		-webkit-columns: 1;
		-moz-columns: 1;
	}
	.border-b-sp {
		border-bottom: 1px solid #eeeeee;
	}
	#search-keywords ul li {
		width: 32%;
		font-size: 1em;
	}
	#search-keywords ul li.sp-smaller {
		font-size: 0.85em;
		padding: 19px 0!important;
	}
	#lp1 #top-banner .container .title {
		margin-top: 0;
		margin-right: -15px;
	}
	.speech-bubble:after {
		left: 45%;
	}
	header object {
		width: 220px;
	}
	.btn-primary.icon svg {
		top: calc(50% - 8px);
	}
	#features .title {
		height: 65px;
	}
	#features h4 {
		font-size: 1.1em;
		line-height: 1.5;
		margin-bottom: 0;
	}
	#call-to-action .container.bg-blue {
		padding-top: 2em;
	}
	#call-to-action .buttons {
		width: 95%;
		padding: 2em 10px;
		border: none;
		background: none;
	}
	.bubble-angled {
		width: 300px;
		height: 96px;
		line-height: 48px;
		top: -24px;
		margin-left: -158px;
	}
	.social-login-list {
		flex-direction: inherit;
	}
	.btn-primary {
		max-width: 300px;
	}
	#lp1 #top-banner {
		background: url(../images/lp1/image-firstview-sp.jpg) center top no-repeat;
	}
	#lp2 #top-banner {
		background: url(../images/lp2/image-firstview-sp.jpg) right bottom no-repeat #ebe5dd;
		background-size: contain;
		padding: 5% 0 60%;
	}
	#lp3 #top-banner {
		background: url(../images/lp3/image-firstview-sp.jpg) 65% top no-repeat;
		background-size: cover;
		padding: 5% 0;
	}
	#lp1 h1 {
		font-size: 1.4em;
	}
	#lp2 #top-banner .message button {
		margin: 0 auto;
	}
	#job-list .row {
		margin: 0;
	}
	#lp2 #job-list .col-md-4 h5 {
		padding: 8% 2% 2%;
	}
	#lp2 .sub-title img {
		width: 20px;
		height: auto;
	}
	#lp3 #top-banner .col-6 {
		-ms-flex: 0 0 80%;
		flex: 0 0 80%;
		max-width: 80%;
	}
	#lp3 .call-to-action {
		max-width: 300px;
		margin: 30px 0 0;
	}
	#lp3 .message .sub-title {
		margin-bottom: 10px;
		font-size: 1.4em;
		;
	}
	#lp3 .message .line-subtitle span:before,
	#lp3 .message .line-subtitle span:after {
		width: 15px;
	}
	#lp3 #points h2 {
		margin-bottom: 0.5em;
	}
	#lp3 #points .col-8 {
		-ms-flex: 0 0 100%;
		flex: 0 0 100%;
		max-width: 100%;
		padding-top: 0.5rem!important;
		padding-bottom: 0.5rem!important;
	}
	#lp3 #points h3 {
		padding-left: 80px;
		background-size: 65px 65px!important;
		min-height: 65px;
		margin-bottom: 10px;
	}
	#lp3 #points .point1 h3 {
		background: url(../images/lp3/icon_point1_sp.png) left top no-repeat;
	}
	#lp3 #points .point2 h3 {
		background: url(../images/lp3/icon_point2_sp.png) right top no-repeat;
		padding-right: 80px;
		padding-left: 0;
	}
	#lp3 #points .point3 h3 {
		background: url(../images/lp3/icon_point3_sp.png) left top no-repeat;
	}
	#lp3 #job-list {
		margin-top: 0;
		padding-top: 0;
	}
	#lp3 .message ul {
		padding: 0 10px;
		margin-top: 15px!important;
	}
	#lp3 .message ul li {
		max-width: 31.3333333%;
		margin: 1%;
		float: left;
		font-size: 0.9em;
	}
	#lp3 .message ul li img {
		margin: 0 auto 15px;
		max-width: 40px;
	}
	#call-to-action ul.two-columns {
		background: #f4f4f4;
		border-radius: 10px;
		padding: 10px;
	}
	#call-to-action .two-columns li {
		padding-top: 9%!important;
	}
	#call-to-action .two-columns li.question {
		padding-top: 16%!important;
	}
	#lp3 .bubble-s {
		left: -15px;
	}
	.carousel {
		padding-bottom: 45px;
		margin-bottom: -30px;
	}
	.carousel-indicators li {
		width: 10px;
		height: 10px;
		background-color: #acbfc4;
		border-radius: 1000px;
		border: none;
	}
	#lp4 header .container span.float-right {
		float: none!important;
		display: block;
	}
	#lp4 header .container span {
		line-height: 18px!important;
		margin-top: 5px;
		font-size: 13px;
		letter-spacing: .2px;
	}
	#lp4 h5 {
		text-align: center;
		margin: 1.2em auto 25px!important;
	}
	#lp4 .btn-lg {
		min-height: 102px;
		box-shadow: 3px 5px 8px #999;
		font-size: 1.2em;
		padding-left: 98px;
		padding-right: 30px;
		letter-spacing: .5px!important;
		background-position: 3px center;
		background-size: 90px 90px;
	}
	#lp4 #main-content .container-fluid {
		height: auto;
	}
	#lp4 #main-content .container {
		width: 90%;
		padding: 5% 5% 15%!important;
	}
	#lp4 header.pt-4 {
		padding-top: 1.1em!important;
	}
	#lp4 header:after {
		margin-top: 1em;
	}
	#lp4 header object {
		width: 260px;
		margin-left: -5px;
	}
	#lp4 .btn svg {
		width: 20px;
		height: 20px;
	}
	#lp4 .btn svg {
		right: 8px;
	}
}

@media only screen and (max-width: 375px) {
	header object {
		width: 185px;
	}
	#top-banner .txt-small {
		font-size: 0.4em;
	}
	.btn-lg {
		font-size: 0.9em;
	}
	.btn-primary.icon svg {
		top: calc(50% - 7px);
		right: 5px;
	}
	.mt-5,
	.my-5 {
		margin-top: 1.5rem!important;
	}
	#lp1 #intro img.updown {
		width: 20px;
		height: auto;
	}
	#lp1 #intro ul li {
		font-size: 0.9em;
	}
	#lp1 h5 {
		font-size: 1.1em;
		max-width: 100%;
	}
	#features .numbers {
		width: 15%;
		min-width: 0;
	}
	.animated-box {
		padding: 1em 1.5em;
	}
}

@media only screen and (max-width:321px) {
	#lp4 .btn-lg {
		min-height: 90px;
		font-size: 1.1em;
		padding-left: 85px;
		letter-spacing: 0!important;
		background-position: 4px center;
		background-size: 80px 80px;
		padding-right: 25px;
	}
	#lp4 .btn svg {
		width: 17px;
		height: 17px;
		right: 3px;
	}
}