@charset "utf-8";


/*--------------------------------------------------------------
>>> 全体:
----------------------------------------------------------------*/
* {
	margin:0;
	padding:0;
}

body {
	font-family: 'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', 'Noto Sans Japanese', Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;

/*サイト全体のフォントサイズ*/
	font-size: 16px;
	line-height: 1.7;

/*サイト全体にかかるmargin,paddingをリセット*/
	margin: 0;
	padding: 0;
	color: #000;
	overflow-x: hidden;
}

html {
/*	overflow-y:scroll;*/
	min-height: 100%;
	position: relative;
	overflow-x: hidden;
}

/*見出しを全て太字で表示するように指定*/
h1, h2, h3, h4, h5, h6 {
	font-weight: bold;
}

/*画像の最大幅を画面のサイズの最大幅に設定*/
img {
	max-width: 100%;
	height: auto;
	border:0;
	margin: 0;
	padding: 0;
	vertical-align: bottom;
}

@media screen and (max-width: 768px) {
	img {
		width: 100%;
	}
	.br-pc {
		display:none; 
	}
}

p,li,dt,dl {
	line-height:1.6;
}
p {
	margin:0 auto;
}
li {
	list-style-type:none;
}

.clear {
	clear:both;
}
a {
	word-break: break-all;
}

/*コンテンツのサイズ指定*/
.header-inner,
.container,
.footer-inner {
	max-width: 1080px;
	margin-right: auto;
	margin-left: auto;
}

.inner {
	max-width: 860px;
	margin-right: auto;
	margin-left: auto;
}

@media screen and (max-width: 980px) {
	/*コンテンツのサイズ指定*/
	.header-inner,.container,.footer-inner {
		max-width: 96%;
		margin-right: auto;
		margin-left: auto;

		/*↓記述を追加*/
/*		padding: 20px;
		-webkit-box-sizing:border-box;
		-moz-box-sizing:border-box;
		box-sizing:border-box;*/
	}
	.inner {
		margin-right: auto;
		margin-left: auto;

		/*↓記述を追加*/
		padding: 0;
		-webkit-box-sizing:border-box;
		-moz-box-sizing:border-box;
		box-sizing:border-box;
	}
}

/*
 Link Color [
----------------------------------------------------------- */
a:link {
	color: #333;
	text-decoration:none;
}
a:visited {
	color: #333;
	text-decoration:none;
}
a:hover {
	color: #333;
	text-decoration:underline;
}
a:active {
	color: #333;
	text-decoration:none
}


/*
 Main [
----------------------------------------------------------- */
#mainbg {
	width: 100%;
	background: #fff;
}
.main {
	width: 100%;
	margin-right: auto;
	margin-left: auto;
}
.main img {
	width: 100%;
	margin: 0 auto;
}

/*
 Container [
----------------------------------------------------------- */
.container {
/*	background-color: #9db2ea;*/
	height: auto !important;
	height: 100%;
	min-height: 100%;
	position: relative;
}

/*
 Contents [
----------------------------------------------------------- */
.contents {
/*	background-color: #a5e2ff;*/
}



/*
 Kikan [
----------------------------------------------------------- */
.kikan {
	background-color: #fff;
	margin: 0 -100%;
	padding: 0 100%;
	text-align: center;
}
.kikan img {
	padding: 4% 0;
}

@media screen and (max-width: 768px) {
	.kikan {
		margin: 0 -6%;
		padding: 0 6%;
	}
	.kikan img {
		padding: 0 0 8%;
	}
}

/*
 Present [
----------------------------------------------------------- */
.present {
	background-image: url("../img/bg_blue.jpg");
	margin: 0 -100%;
	padding: 0 100%;
	text-align: center;
}
.present .wrap {
	margin: 0;
	padding: 8% 0;
	text-align: center;
}
.present .wrap img {
	padding: 0 0 4%;
}
.present .wrap .button img {
	padding: 0;
}
.present .wrap .mykinso img {
	padding-top: 30px;
}


@media screen and (max-width: 768px) {
	.present {
		margin: 0 -6%;
		padding: 0 6%;
	}
	.present .wrap {
		padding: 20% 4%;
	}
	.present .wrap img {
		padding: 0 0 8%;
	}
	.present .txt {
		text-align: justify;
	}
}


/*
 Howto [
----------------------------------------------------------- */
.howto {
	background-image: url("../img/bg_pat.jpg");
	margin: 0 -100%;
	padding: 0 100%;
	text-align: center;
}
.howto .wrap {
	margin: 0;
	padding: 8% 0;
	text-align: center;
}
.howto .wrap img {
	padding: 0 0 4%;
}
.howto .wrap .stepcont {
	display: flex;
	justify-content: space-around;
	padding: 0 8%;
}
.howto .wrap .stepcont .step01,
.howto .wrap .stepcont .step02,
.howto .wrap .stepcont .step03 {
	padding: 0 1%;
}

.howto .wrap .stepcont .step01,
.howto .wrap .stepcont .step02 {
	position: relative;
}
.howto .wrap .stepcont .step01 .btn {
	position: absolute;
	top: 68%;
	left: 0;
	right: 0;
}
.howto .wrap .stepcont .step02 .btn {
	position: absolute;
	top: 68%;
	left: 0;
	right: 0;
}
.howto .wrap .stepcont .step01 .btn img,
.howto .wrap .stepcont .step02 .btn img {
	width: 80%;
}

@media screen and (max-width: 768px) {
	.howto {
		margin: 0 -6%;
		padding: 0 6%;
	}
	.howto .wrap {
		padding: 20% 4%;
	}
	.howto .wrap img {
		padding: 0 0 8%;
	}
	.howto .wrap .stepcont {
	flex-wrap: wrap;
	padding: 0;
}
	.howto .wrap .stepcont .step01 .btn {
		top: 58%;
	}
	.howto .wrap .stepcont .step02 .btn {
		top: 58%;
	}
	.howto .wrap .stepcont .step01 .btn img,
	.howto .wrap .stepcont .step02 .btn img {
		width: 90%;
	}
}


/*
 Kiyaku [
----------------------------------------------------------- */
.kiyaku {
	background-image: url("../img/bg_blue.jpg");
	margin: 0 -100%;
	padding: 0 100%;
	text-align: center;
}
.kiyaku .wrap {
	margin: 0;
	padding: 8% 20%;
	text-align: center;
}
.kiyaku .wrap img {
	padding: 0 0 4%;
}

.kiyaku .list > li h2 {
	font-size: 28px;
	font-weight: bold;
}
@media screen and (max-width: 768px) {
	.kiyaku .list > li h2 span {
		font-size: 22px;
	}
}
.kiyaku .list > li {
	width: 100%;
	border: 1px solid #333;
	background: #fff;
	text-align: left;
}
.kiyaku .list > li > a {
	display: block;
	position: relative;
}
.kiyaku .list > li > a::after {
	content: '';
	display: block;
	border: 2px solid #000;
	border-top: transparent;
	border-right: transparent;
	-webkit-transform: rotate(-45deg) translateY(-50%);
					transform: rotate(-45deg) translateY(-50%);
	-webkit-transform-origin: 0 20%;
					transform-origin: 0 20%;
	position: absolute;
	top: 50%;
	-webkit-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.kiyaku .list > li > a.is-active::after {
	-webkit-transform: rotate(135deg) translateY(-50%);
					transform: rotate(135deg) translateY(-50%);
	-webkit-transform-origin: 28% 15%;
					transform-origin: 28% 15%;
}
.kiyaku .list__content {
	color: #333;
	display: none;
}
.kiyaku .list__ttl {
	font-weight: bold;
}
.kiyaku .list__note > li,
.kiyaku .list__disc > li,
.kiyaku .list__num > li,
.kiyaku .list__circle-num > li {
	position: relative;
	padding-left: 1em;
}
.kiyaku .list__note > li::before,
.kiyaku .list__disc > li::before,
.kiyaku .list__num > li::before,
.kiyaku .list__circle-num > li::before {
	position: absolute;
	left: 0;
	top: 0;
}
.kiyaku .list__note > li::before {
	content: '※';
}
.kiyaku .list__disc > li::before {
	content: '・';
}
.kiyaku .list__num > li:nth-child(1)::before {
	content: '1.';
}
.kiyaku .list__num > li:nth-child(2)::before {
	content: '2.';
}
.kiyaku .list__num > li:nth-child(3)::before {
	content: '3.';
}
.kiyaku .list__num > li:nth-child(4)::before {
	content: '4.';
}
.kiyaku .list__num > li:nth-child(5)::before {
	content: '5.';
}
.kiyaku .list__num > li:nth-child(6)::before {
	content: '6.';
}
.kiyaku .list__num > li:nth-child(7)::before {
	content: '7.';
}
.kiyaku .list__num > li:nth-child(8)::before {
	content: '8.';
}
.kiyaku .list__num > li:nth-child(9)::before {
	content: '9.';
}
.kiyaku .list__num > li:nth-child(10)::before {
	content: '10.';
}
.kiyaku .list__num > li:nth-child(11)::before {
	content: '11.';
}
.kiyaku .list__num > li:nth-child(12)::before {
	content: '12.';
}
.kiyaku .list__num > li:nth-child(13)::before {
	content: '13.';
}
.kiyaku .list__num > li:nth-child(14)::before {
	content: '14.';
}
.kiyaku .list__num > li:nth-child(15)::before {
	content: '15.';
}
.kiyaku .list__circle-num > li:nth-child(0)::before {
	content: '\2459';
}
.kiyaku .list__circle-num > li:nth-child(1)::before {
	content: '\2460';
}
.kiyaku .list__circle-num > li:nth-child(2)::before {
	content: '\2461';
}
.kiyaku .list__circle-num > li:nth-child(3)::before {
	content: '\2462';
}
.kiyaku .list__circle-num > li:nth-child(4)::before {
	content: '\2463';
}
.kiyaku .list__circle-num > li:nth-child(5)::before {
	content: '\2464';
}
.kiyaku .list__circle-num > li:nth-child(6)::before {
	content: '\2465';
}
.kiyaku .list__circle-num > li:nth-child(7)::before {
	content: '\2466';
}
.kiyaku .list__circle-num > li:nth-child(8)::before {
	content: '\2467';
}
.kiyaku .list__circle-num > li:nth-child(9)::before {
	content: '\2468';
}

.kiyaku .list {
		margin-top: 35px;
}

.kiyaku .list > li > a {
		padding: 26.5px 20px;
}

.kiyaku .list > li > a::after {
		width: 26px;
		height: 26px;
		right: 24px;
}

.kiyaku .list > li:nth-child(n+2) {
		margin-top: 19px;
}

.kiyaku .list__content {
		font-size: 16px;
		padding: 13px 20px 26.5px;
		line-height: 1.571428571428571;
}

.kiyaku .list__ttl:nth-of-type(n+2) {
		margin-top: 20px;
}

.kiyaku .list__txt + .list__note,
.kiyaku .list__txt + .list__disc,
.kiyaku .list__txt + .list__num,
.kiyaku .list__txt + .list__circle-num {
		margin-top: 20px;
}

.kiyaku .list__note + .list__txt,
.kiyaku .list__disc + .list__txt,
.kiyaku .list__num + .list__txt,
.kiyaku .list__circle-num + .list__txt {
		margin-top: 20px;
}

.kiyaku .list__num > li:nth-child(n+2) {
		margin-top: 5px;
}

@media screen and (max-width: 768px) {
	.kiyaku {
		margin: 0 -6%;
		padding: 0 6%;
	}
	.kiyaku .wrap {
		padding: 20% 4%;
	}
	.kiyaku .wrap img {
		padding: 0 0 8%;
	}

	.kiyaku .list {
			margin-top: 4vw;
		}

	.kiyaku .list > li > a {
			padding: 4vw 2.666666666666667vw;
		}

	.kiyaku .list > li > a::after {
			width: 3.466666666666666vw;
			height: 3.466666666666666vw;
			right: 3.2vw;
		}

	.kiyaku .list > li:nth-child(n+2) {
			margin-top: 2.533333333333333vw;
		}

	.kiyaku .list__content {
			font-size: 2.933333333333333vw;
			padding: 2vw 2.666666666666667vw 4vw;
			line-height: 1.571428571428571;
		}

	.kiyaku .list__ttl:nth-of-type(n+2) {
			margin-top: 2.666666666666667vw;
		}

	.kiyaku .list__txt + .list__note,
	.kiyaku .list__txt + .list__disc,
	.kiyaku .list__txt + .list__num,
	.kiyaku .list__txt + .list__circle-num {
			margin-top: 2.666666666666667vw;
		}

	.kiyaku .list__note + .list__txt,
	.kiyaku .list__disc + .list__txt,
	.kiyaku .list__num + .list__txt,
	.kiyaku .list__circle-num + .list__txt {
			margin-top: 2.666666666666667vw;
		}

	.kiyaku .list__num > li:nth-child(n+2) {
			margin-top: 0.666666666666667vw;
		}
}


/*
 Contact [
----------------------------------------------------------- */
.contact {
	background-image: url("../img/bg_pat.jpg");
	margin: 0 -100%;
	padding: 0 100%;
	text-align: center;
}
.contact .wrap {
	margin: 0;
	text-align: center;
	padding: 8% 0;
}
.contact .wrap h1 {
	padding-bottom: 4%;
}
.contact .wrap .inner {
	text-align: left;
}
.contact .wrap .inner h2 {
	font-size: 20px;
}
.contact .wrap img {
	padding: 0;
}
.contact .wrap p {
	text-align: left;
	padding-bottom: 3%;
}
.contact .wrap p h2 {
	font-weight: bold;
}

@media screen and (max-width: 768px) {
	.contact {
		margin: 0 -6%;
		padding: 0 6%;
	}
	.contact .wrap {
		padding: 15% 4%;
	}
	.contact .wrap img {
		padding: 0 0 8%;
	}
}


/*
 Banner [
----------------------------------------------------------- */
.contact .wrap .banner{
	display:flex;
	justify-content: space-between;
	margin-bottom: 30px;
}
@media screen and (max-width: 768px) {
	.contact .wrap .banner{
		flex-wrap: wrap;
		margin-bottom: 0;
	}
}


/*
 Footer [
----------------------------------------------------------- */
footer {
	background-image: url("../img/bg_foot.png");
/*	background: #ddd;*/
	bottom: 0;
	margin: 0 auto;
}
footer .footer-inner {
/*	background: #eee;*/
	height: auto;
	padding: 6% 0;
}
footer .footer-inner ul {
	display: flex;
	justify-content: space-between;
	color: #000;
}
footer .footer-inner li {
	text-align: center;
	font-size: 22px;
}
footer p {
	background-color: #fff;
	text-align: center;
	padding: 2% 0;
	font-size: 14px;
	margin: 0 auto;
	color: #000;
}

@media screen and (max-width: 768px) {
	footer {
	}
	footer .footer-inner {
		padding: 8% 0;
	}
	footer .footer-inner ul {
		flex-wrap: wrap;
	}
	footer .footer-inner li {
		margin: 0 auto;
		padding: 1% 0;
	}
	footer .footer-inner p {
		padding: 5% 0;
		font-size: 12px;
	}
}


/*
 Pagetop [
----------------------------------------------------------- */
.pagetop {
		display: none;
		position: fixed;
		bottom: 20px;
		right: 40px;
}
.pagetop a {
		display: block;
		text-align: center;
		color: #222;
		font-size: 12px;
		text-decoration: none;
	filter:alpha(opacity=80);
		-moz-opacity: 0.8;
		opacity: 0.8;
}
.pagetop a:hover {
		display: block;
		text-align: center;
		color: #fff;
		font-size: 12px;
		text-decoration: none;
	filter:alpha(opacity=50);
		-moz-opacity: 0.6;
		opacity: 0.6;
}

@media screen and (max-width: 770px) {
	.pagetop {
		bottom: 150px;
		right: 0;
	}
	.pagetop img {
		width: 70%;
		height: 70%;
	}
}

@media screen and (max-width: 468px) {
	.pagetop {
		bottom: 20px;
		right: 0;
	}
	.pagetop img {
		width: 60%;
		height: 60%;
	}
}

a img:hover {
	opacity: 0.8;
}