@charset "utf-8";

img,
a img,
a:hover img {
	transition: .3s;
	vertical-align: bottom;
}

@media screen and (min-width:736px) {

	.secWrap {
		margin: 0 auto;
		position: relative;
		max-width: 1100px;
	}

	a {
		opacity: 1;
		transition: .3s;
	}

	a:hover {
		opacity: 0.5;
		transition: .3s;
	}

	._sp {
		display: none !important;
	}

	.secWrap img {
		max-width: 1100px;
		width: 100%;
		display: inline-block;
	}

}

@media screen and (max-width: 736px) {

	._pc {
		display: none !important;
	}

	.secWrap img {
		width: 100%;
		display: block;
	}

	.secWrap {
		margin: 0 1.5em;
		position: relative;
	}

}


/*
 header
///////////////////////////////////////// */

header {
	background: #fff;
}

header {
	padding: 1em;
}

header h1 {
	max-width: 1100px;
	margin: 0 auto;
}

@media screen and (min-width:736px) {

	header h1 a img {
		position: absolute;
	}

}

@media screen and (max-width:736px) {

	#header h1.logo, #header p.logo {
		margin-left: 0;
	}

	#header h1.logo a:before {
		position: absolute;
	}

	header h1 a:before {
		margin: 0 0 0 0;
		content: " ";
		display: inline-block;
		width: 2.5em;
		height: 1.5em;
		background: url(/msppoint/shared/img/common/h1_icon.png) no-repeat;
		background-size: auto;
		background-size: cover;
		vertical-align: middle;
		position: absolute;
	}

	#header h1 a img {
		left: 2.5em;
	}

	header h1 a img {
		width: 60%;
		margin-left: 3em;
	}

	.read02 {
		background: #6e5530;
		text-align: center;
		padding: 0.5em 0;
	}

	.read02 img {
		width: 78%;
		margin: 0 auto;
		display: block;
	}

}

@media screen and (min-width:736px) {

	.footer .pagetop {
		margin-top: 0;
	}

}

@media screen and (max-width:736px) {

	.footer .pagetop {
		margin-top: 0;
	}

	#sec04 {
		font-size: 2.5vw;
	}

	.footer p {
		margin-bottom: 0;
	}

	.footer .footer__body ul li {
		margin-bottom: 0;
	}

}


/*
head
///////////////////////////////////////// */

#head {
	background: #0093da;
}

@media screen and (min-width:736px) {

	#head {
		padding: 2vw 0;
	}

}

@media screen and (max-width:736px) {

	#head .secWrap {
		margin: 0;
	}

}



/*
 sec01
///////////////////////////////////////// */


@media screen and (min-width:736px) {

	#sec01 .secWrap h2 {
		margin: 4vw 0 2vw;
	}

	#sec01 .secWrap p {
		margin: 2vw 0;
	}

}

@media screen and (max-width:736px) {

	#sec01 .secWrap h2 {
		margin: 2em auto 1em;
		width: 90%;
	}

	#sec01 .secWrap p {
		margin: 2vw 0;
	}

}


/*
 sec02
///////////////////////////////////////// */

#sec02 {
	margin: 3vw 0 1vw;
}

#sec02 .secWrap {
}

@media screen and (min-width:736px) {

	#sec02 h2 {
		margin: 0 auto;
		width: 80%;
	}

	#sec02 .sec02_block01 {
		overflow: hidden;
		padding: 1.5vw 0 2.5vw;
		border-bottom: 2px solid #004898;
	}

	#sec02 .sec02_block01 .sec02_left {
		float: left;
		width: 53.1%;
	}

	#sec02 .sec02_block02 {
		background: #bfe4f6;
		padding: 1em;
	}

	#sec02 .sec02_block02.carshare {
		margin-top: 1em;
	}

	#sec02 .sec02_block02 ul {
		margin: 1em 0 0;
		font-size: 80%;
	}

	#sec02 .sec02_block02.carshare ul {
		margin: 1em auto 0;
		width: 83%;
	}

	#sec02 .sec02_block02 ul li {
		padding-left: 1em;
		text-indent: -1em;
	}

	#sec02 .sec02_img {
		float: right;
		width: 44.3%;
	}

	.sec02_title01 {
		margin-bottom: 1vw;
	}

	.sec02_title02 {
		margin: 3vw 0 2vw;
	}

	.sec02_text02 {
		font-size: 110%;
		margin-bottom: 1vw;
	}

	.sec02_btn01 {
		background: url(/msppoint/clever/service/other/shared/image/202604/sec02_btn01_o.png) center no-repeat;
		background-size: contain;
		margin: 1em auto;
		width: 70%;
	}

	.sec02_btn01 a img {
		opacity: 1;
		transition: .3s;
	}

	.sec02_btn01 a:hover img {
		opacity: 0;
	}

}

@media screen and (max-width:736px) {

	#sec02 h2 {
		margin: 1em auto;
	}

	#sec02 .sec02_block01 {
		overflow: hidden;
		padding: 0 1em 2em;
		border-bottom: 2px solid #004898;
	}

	#sec02 .sec02_block02 {
		background: #bfe4f6;
		padding: 1em;
		margin: 1em 0 1.5em;
	}

	#sec02 .sec02_block02.carshare {
		padding: 1em 2em 1em;
	}

	#sec02 .sec02_block02 ul {
		margin: 1em auto 0;
		font-size: 85%;
	}

	#sec02 .sec02_block02 ul.carshare {
		margin: 1em auto 0;
		width: 85%;
	}

	#sec02 .sec02_block02 ul li {
		padding-left: 1em;
		text-indent: -1em;
	}

	#sec02 .sec02_img {
	}

	.sec02_title01 {
		margin-bottom: 1em;
	}

	.sec02_title02 {
		margin: 2em 1em 1em;
	}

	.sec02_title02 + p {
		margin: 1em;
	}

	.sec02_text02 {
		margin-bottom: 1em;
	}

	.sec02_btn01 {
		margin: 1em auto;
		width: 85%;
	}

}


/*
 sec03
///////////////////////////////////////// */

#sec03 {
	margin: 3vw 0;
}

@media screen and (min-width:736px) {

	#sec03 .secWrap {
		text-align: center;
		font-size: 85%;
	}

	#sec03 ul {
		margin-bottom: 2vw;
	}

	#sec03 ul li {
		display: inline-block;
	}

}


@media screen and (max-width:736px) {

	#sec03 {
		margin: 1em 0;
	}

	#sec03 .secWrap {
		font-size: 85%;
	}

	#sec03 .secWrap ul {
		margin: 1em auto;
		width: 80%;
	}

	#sec03 .secWrap ul li {
		padding-left: 1em;
		text-indent: -1em;
	}

	#sec03 .secWrap p {
		width: 80%;
		margin: 1em auto;
		text-align: center;
	}

}

.pgtop {
	position: fixed;
	right: 1em;
	bottom: 1em;
}

@media screen and (min-width:736px) {

	.pgtop {
		background: url(/msppoint/clever/service/other/shared/image/202604/pagetop_o.png) no-repeat;
		background-size: contain;
		width: 75px;
	}

	.pgtop a img {
		transition: .3s;
		width: 75px;
		opacity: 1;
	}

	.pgtop a:hover img {
		opacity: 0;
	}

}

@media screen and (max-width:736px) {

	.pgtop {
		width: 15%;
	}

}