@charset "utf-8";

.p-db {
	display: block !important;
}
.p-dn {
	display: none !important;
}

/*================================================================================================

* UNDER LINE *

================================================================================================*/
span.under-line {
	background: linear-gradient(transparent 65%, #F4D522 35%);
	padding: 0 5px;
}

/*================================================================================================

* BORDER SPACE *

================================================================================================*/
.border-space {
	padding-top: 1.5rem;
	border-top: 1px solid #e7e7e7;
}
.border-space-big {
	padding-top: 2rem;
	border-top: 1px solid #e7e7e7;
}
/*================================================================================================

* TEXT ALIGN *

================================================================================================*/
.p-t-left {
	text-align: left;
}
.p-t-center {
	text-align: center;
}
.p-t-right {
	text-align: right;
}
/*================================================================================================

* MARGIN SYSTEM *

================================================================================================*/
.p-mb05 {
	margin-bottom: 0.5rem;
}
.p-mb1 {
	margin-bottom: 1rem;
}
.p-mb1-5 {
	margin-bottom: 1.5rem;
}
.p-mb2 {
	margin-bottom: 2rem;
}
.p-mb2-5 {
	margin-bottom: 2.5rem;
}
.p-mb3 {
	margin-bottom: 3rem;
}
.p-mb3-5 {
	margin-bottom: 3.5rem;
}
.p-mb4 {
	margin-bottom: 4rem;
}
.p-mt2 {
	margin-top: 2rem;
}

/*================================================================================================

* PADDING SYSTEM *

================================================================================================*/
.p-pb1 {
	padding-bottom: 1rem;
}
.p-pb1-5 {
	padding-bottom: 1.5rem;
}
.p-pb2 {
	padding-bottom: 2rem;
}
.p-pb2-5 {
	padding-bottom: 2.5rem;
}
.p-pb3 {
	padding-bottom: 3rem;
}
.p-pb3-5 {
	padding-bottom: 3.5rem;
}
.p-pb4 {
	padding-bottom: 4rem;
}


/*================================================================================================

* PADDING SYSTEM *

================================================================================================*/
.p-pt1 {
	padding-top: 1rem;
}
.p-pt1-5 {
	padding-top: 1.5rem;
}
.p-pt2 {
	padding-top: 2rem;
}
.p-pt2-5 {
	padding-top: 2.5rem;
}
.p-pt3 {
	padding-top: 3rem;
}
.p-pt3-5 {
	padding-top: 3.5rem;
}
.p-pt4 {
	padding-top: 4rem;
}

/*================================================================================================

* 影 *

================================================================================================*/
.p-shadow01 {
	box-shadow: 0 2px 5px -1px rgba(10,10,10,0.25);
}
.p-shadow02 {
	box-shadow: 0 7px 15px -3px rgba(10,10,10,0.25);
}
.p-shadow03 {
	box-shadow: 0 21px 27px -7px rgba(10,10,10,0.2)
}
.p-shadow04 {
	box-shadow: 0 33px 40px -10px rgba(10,10,10,0.05);
}
.p-shadow05 {
	box-shadow: 0 45px 45px -15px rgba(10,10,10,0.05);
}

/* 小見出し ================================================*/


/*================================================================================================

* SECTION TITLE *

================================================================================================*/
.section-title {
	width: 100%;
	text-align: center;
	margin-bottom: 2rem;
}
		.section-title .main {
			font-weight: 700;
			font-size: 2rem;
			color: #256AAA;
			font-family: "montserrat";
			line-height: 1.2;
			margin-bottom: 0.5rem;
		}
		.section-title .sub {
			font-size: 0.8rem;
			font-weight: 700;
			color: #929292;
		}

@media only screen and (max-width: 768px) {
.section-title .main {
	font-size: 1.5rem;
}
/* ** */}

/*================================================================================================

* LINK BTN *

================================================================================================*/

.link-btn-main {
	display: block;
	padding: 1rem 1rem;
	text-align: center;
	background: -webkit-linear-gradient(342deg, #3aaede 0%, #24c19f 100%);
	background: -o-linear-gradient(342deg, #3aaede 0%, #24c19f 100%);
	background: linear-gradient(72deg, #3aaede 0%, #24c19f 100%);
	color: #fff;
	max-width: 380px;
	border-radius: 100px;
	font-size: 0.8rem;
	position: relative;
	font-weight: 700;
}
.link-btn-main span {
	position: relative;
}
.link-btn-main span::after {
	width: 10px;
	height: 10px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	content: "";
	position: absolute;margin: auto;top: 0;right: -1rem;bottom: 0;
	transform: translateX(0) rotate(45deg);
	transition: 0.35s ease;
}
.link-btn-main:hover span::after {
	transform: translateX(0.5rem) rotate(45deg);
	transition: 0.35s ease;
}

@media only screen and (max-width: 768px) {
.link-btn-main {
	padding: 1rem 1rem;
}
/* ** */}
/*================================================================================================

* HEADEING *

================================================================================================*/
.p-item-heading {
	font-size: 1.5rem;
	color: #256AAA;
}
.p-item-heading.medium {
	font-size: 1.25rem;
	color: #256AAA;
}
.p-input-heading{
	font-size: 1rem;
}

/*================================================================================================

* LABEL TITLE *

================================================================================================*/
.label-title {
	width: 100%;
	position: relative;
	margin-bottom: 2rem;
}
.label-title::after {
	width: 100%;
	height: 1px;
	background: #256AAA;
	content: "";
	margin: auto;position: absolute;top: 0;right: 0;bottom: 0;left: 0;
	z-index: 1;
}

.label-title span {
	background: #fff;
	padding: 0.5rem 2rem;
	color: #256AAA;
	border: 1px solid;
	display: inline-block;
	position: relative;
	z-index: 2;
}


/*================================================================================================

* 補足 *

================================================================================================*/
p.sup {
	font-size: 0.8rem;
	padding-left: 1rem;
	text-indent: -1rem;
	color: #929292;
}
p.indent {
	padding-left: 1rem;
	text-indent: -1rem;
}
p.indent-two {
	padding-left: 2rem;
	text-indent: -2rem;
}
p.indent-in {
	padding-left: 2rem;
	text-indent: -1rem;
}

/*================================================================================================

* 区切り線 *

================================================================================================*/
.p-separator-line {
	padding-top: 3rem;
	border-top: 1px solid #ccc;
}

/*================================================================================================

* GRID SYSTEM *

================================================================================================*/
.p-grid-wrap {
	width: 100%;
}
.p-grid-wrap > div.p-grid {
	margin-right: 30px;
	position: relative;
}

.p-grid-wrap p.title {
	width: 100%;
	font-size: 0.9rem;
	color: #929292;
}

/* 2col ================================================*/
.p-grid-wrap.col1 > div.p-grid {
	width: 100%;
	margin-right: 0px;
}

/* 2col ================================================*/
.p-grid-wrap.col2 > div.p-grid {
	width: calc(50% - 15px);
}
	.p-grid-wrap.col2 > div.p-grid:nth-of-type(2n) {
		margin-right: 0px;
	}

@media only screen and (max-width: 480px) {
.p-grid-wrap.col2 > div.p-grid {
	width: calc(100% - 0px);
	margin-right: 0px;
}
/********************/}

/* 2col ================================================*/
.p-grid-wrap.col2ex > div.p-grid:nth-of-type(1) {
	width: calc(33.333% - 15px);
	font-size: 0.8rem;
	font-weight: 700;
}
.p-grid-wrap.col2ex > div.p-grid:nth-of-type(2) {
	width: calc(66.666% - 15px);
}
	.p-grid-wrap.col2ex > div.p-grid:nth-of-type(2) {
		margin-right: 0px;
	}


/* 3col ================================================*/
.p-grid-wrap.col3 > div.p-grid {
	width: calc(33.333% - 20px);
}
.p-grid-wrap.col3.spkeep > div.p-grid {
	width: calc(33.333% - 20px);
}
.p-grid-wrap.col3.spkeep > div.p-grid input[type="tel"] {
	padding: 1rem;
}
	.p-grid-wrap.col3 > div.p-grid:nth-of-type(3n) {
		margin-right: 0px;
	}

/* 4col ================================================*/
.p-grid-wrap.col4 > div.p-grid {
	width: calc(25% - 23px);
}
	.p-grid-wrap.col4 > div.p-grid:nth-of-type(4n) {
		margin-right: 0px;
	}

/* 5col ================================================*/
.p-grid-wrap.col5 > div.p-grid {
	width: calc(20% - 24px);
}
	.p-grid-wrap.col5 > div.p-grid:nth-of-type(5n) {
		margin-right: 0px;
	}

/* 6col ================================================*/
.p-grid-wrap.col6 > div.p-grid {
	width: calc(16.666% - 25px);
}
	.p-grid-wrap.col6 > div.p-grid:nth-of-type(6n) {
		margin-right: 0px;
	}

/* 7col ================================================*/
.p-grid-wrap.col7 > div.p-grid {
	width: calc(14.28% - 26px);
}
	.p-grid-wrap.col7 > div.p-grid:nth-of-type(7n) {
		margin-right: 0px;
	}

/* 〒 / 電話番号 ================================================*/
.p-grid-wrap.yubinbango .p-grid.hyphen::after,
.p-grid-wrap.denwabango .p-grid.hyphen::after {
	height: 1px;
	width: 10px;
	background: #666;
	content: "";
	margin: auto;position: absolute;top: 0;right: -20px;bottom: 0;
}


/*================================================================================================

* GRID SYSTEM - SP *

================================================================================================*/

@media only screen and (max-width: 480px) {
.p-grid-wrap > div.p-grid {
	width: 100% !important;
	margin-right: 0px !important;
}
.p-grid-wrap > div.p-grid.sp50 {
	width: calc(50% - 14px) !important;
	margin-right: 24px !important;
}
.p-grid-wrap.button > div.p-grid.sp50 {
	width: calc(40% - 0px) !important;
	margin-right: 0px !important;
}
.p-grid-wrap.button > div.p-grid.sp50:nth-child(2) {
	width: calc(60% - 0px) !important;
}
.p-grid-wrap > div.p-grid.sp50:nth-of-type(2n) {
	margin-right: 0px !important;
}

.p-grid-wrap.col3.spkeep > div.p-grid {
	width: calc(33.333% - 14px) !important;
	margin-right: 20px !important;
}
.p-grid-wrap.col3.spkeep > div.p-grid:last-child {
	margin-right: 0px !important;
}
.p-grid-wrap.yubinbango .p-grid.hyphen::after,
.p-grid-wrap.denwabango .p-grid.hyphen::after {
	margin: auto;position: absolute;top: 0;right: -17px;bottom: 0;
}

/********************/}

/*================================================================================================

* GRID SYSTEM - Table style *

================================================================================================*/
.p-grid-wrap.table {
	border-left: 1px solid #e7e7e7;
	border-top: 1px solid #e7e7e7;
}
.p-grid-wrap.table > div.p-grid {
	margin-right: 0px;
	border-right: 1px solid #e7e7e7;
	border-bottom: 1px solid #e7e7e7;
}

/* 2col ================================================*/
.p-grid-wrap.table.col2 > div.p-grid {
	width: calc(50% - 0px);
}

/* 3col ================================================*/
.p-grid-wrap.table.col3 > div.p-grid {
	width: calc(33.333% - 0px);
}

/* 4col ================================================*/
.p-grid-wrap.table.col4 > div.p-grid {
	width: calc(25% - 0px);
}

/* 5col ================================================*/
.p-grid-wrap.table.col5 > div.p-grid {
	width: calc(20% - 0px);
}

/* 6col ================================================*/
.p-grid-wrap.table.col6 > div.p-grid {
	width: calc(16.666% - 0px);
}

/* 7col ================================================*/
.p-grid-wrap.table.col7 > div.p-grid {
	width: calc(14.28% - 0px);
}

/*================================================================================================

* GRID SYSTEM - UNIT style *

================================================================================================*/
/* 2col ================================================*/
.p-grid-wrap.unit.col2 > div.p-grid {
	width: calc(85% - 15px);
	margin-right: 15px;
}
.p-grid-wrap.unit.col2 > div.p-grid-unit {
	width: calc(15% - 0px);
}

/* 3col ================================================*/
.p-grid-wrap.unit.col3 > div.p-grid {
	width: calc(40% - 30px);
}
.p-grid-wrap.unit.col3 > div.p-grid-unit {
	width: calc(10% - 0px);
}

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

.p-grid-wrap.unit.col2 > div.p-grid {
	width: calc(80% - 0px) !important;
}
.p-grid-wrap.unit.col2 > div.p-grid-unit {
	width: calc(20% - 0px) !important;
	text-align: center;
}

/********************/}

/*================================================================================================

* GRID SYSTEM - list style *

================================================================================================*/
.p-grid-wrap.list > div.p-grid {
	border-bottom: 1px solid #e7e7e7;
	position: relative;
	text-align: left;
}

/*================================================================================================

* 計算結果 / 自動計算 / 確認などの表示 *

================================================================================================*/

/* BOX TYPE ================================================*/
.calc-box {
	width: 100%;
	border-radius: 3px;
	overflow: hidden;
	border: 1px solid #256AAA;
	background: #256AAA;
}
.calc-box .title {
	width: 40%;
	padding: 1rem;
	color: #256AAA;
	background: #fff;
}
.calc-box .number {
	width: 60%;
	text-align: right;
	font-size: 1.25rem;
	padding: 0.75rem 1rem;
	color: #fff;
}
.calc-box span.unit {
	font-size: 1rem;
}

@media only screen and (max-width: 480px) {
.calc-box .title,
.calc-box .number {
	width: 100%;
	text-align: center;
}
/********************/}


/* LIST TYPE ================================================*/
ul.calc-list {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}
ul.calc-list li {
	width: 100%;
	padding-bottom: 1rem;
	margin-bottom: 1rem;
	border-bottom: 1px solid #e7e7e7;
}
ul.calc-list li:last-of-type {
	margin-bottom: 0rem;
}
		ul.calc-list li .text {
			width: 50%;
			color: #256AAA;
		}
		ul.calc-list li .number {
			width: 50%;
			color: #256AAA;
			text-align: right;
		}
				ul.calc-list li .number span {
					width: 100%;
					font-size: 1.5rem;
					color: #256AAA;
				}

@media only screen and (max-width: 480px) {
ul.calc-list li .text {
	font-size: 0.8rem;
}
ul.calc-list li .number span {
	font-size: 1.25rem;
}
/********************/}


/* LIST TYPE - edit ================================================*/
ul.calc-list.edit li .text {
	width: 40%;
}
ul.calc-list.edit li .number {
	width: 40%;
	padding-right: 2rem;
}
ul.calc-list.edit li .edit {
	width: 20%;
	padding: 0.5rem 1rem;
	text-align: center;
	color: #fff;
	background: #24C19F;
	border-radius: 5px;
	font-size: 0.8rem;
	cursor: pointer;
}

/*================================================================================================

* 波紋エフェクト *

================================================================================================*/
.p-ripple {
	position: relative;
	overflow: hidden;
}

.p-ripple .p-rp-effect {/*エフェクト*/
	position: absolute;
	border-radius: 50%;
	opacity: 0.35;/*波紋の濃さ*/
	transform: scale(0);
	background: #FFF;/*波紋色*/
	animation: ripple 1000ms;
	pointer-events: none;
}
.p-ripple.dark .p-rp-effect {/*エフェクト*/
	opacity: 0.15;/*波紋の濃さ*/
	background: #000;/*波紋色*/
}

@-webkit-keyframes ripple {
to {
		opacity: 0;
		transform: scale(2.0);
	}
}

@keyframes ripple {
to {
		opacity: 0;
		transform: scale(2.0);
	}
}

/*================================================================================================

* TOOL TIP *

================================================================================================*/
.tooltip {
	width: 85%;
	max-width: 280px;
	padding: 0.5rem 1rem;
	background: #24C19F;
	content: "";
	position: absolute;margin: auto;top: 0;right: 0;
	transform: translateZ(0) translate3d(0,0,0) translate3d(1rem,-100%,0);
	font-size: 0.8rem;
	color: #fff;
	border-radius: 5px;
	z-index: 10;
	pointer-events: none;
	opacity: 0;
	transition: 0.35s ease;
	box-shadow: 0 21px 27px -7px rgba(10,10,10,0.2)
}
		.tooltip.on {
			opacity: 1;
			transform: translateZ(0) translate3d(0,0,0) translate3d(1rem,-120%,0);
			transition: 0.35s ease;
		}

.tooltip::after {
	width: 10px;
	height: 10px;
	content: "";
	background: #24C19F;
	position: absolute;margin: auto;right: 2rem;bottom: -6px;
	transform: rotate(45deg);
}

.tooltip span.pc {
	display: inline;
}
.tooltip span.sp {
	display: none;
}

/* スクロール用 ================================================*/
.trigger.on + .tooltip {
	opacity: 1;
	transform: translateZ(0) translate3d(0,0,0) translate3d(1rem,-120%,0);
	transition: 0.35s ease;
	animation-duration: 7s;
	animation-delay: 0s;
	animation-name: tooltipMove;
	animation-timing-function: ease;
	animation-fill-mode: forwards;
}


@keyframes tooltipMove {
	0%{
		opacity: 0;
		-webkit-transform: translateZ(0) translate3d(0,0,0) translate3d(1rem,-100%,0);
		transform: translateZ(0) translate3d(0,0,0) translate3d(1rem,-100%,0);
	}
	6%{
		opacity: 1;
		-webkit-transform: translateZ(0) translate3d(0,0,0) translate3d(1rem,-120%,0);
		transform: translateZ(0) translate3d(0,0,0) translate3d(1rem,-120%,0);
	}
	94%{
		opacity: 1;
		-webkit-transform: translateZ(0) translate3d(0,0,0) translate3d(1rem,-120%,0);
		transform: translateZ(0) translate3d(0,0,0) translate3d(1rem,-120%,0);
	}
	100%{
		opacity: 0;
		-webkit-transform: translateZ(0) translate3d(0,0,0) translate3d(1rem,-140%,0);
		transform: translateZ(0) translate3d(0,0,0) translate3d(1rem,-140%,0);
	}
}


@media only screen and (max-width: 1024px) {
/********************/}
@media only screen and (max-width: 768px) {
/********************/}
@media only screen and (max-width: 580px) {
.tooltip span.pc {
	display: none;
}
.tooltip span.sp {
	display: inline;
}
/********************/}


/*================================================================================================

* パターン変更ボタン *

================================================================================================*/
.ptn-chng-wrap {
	width: 100%;
	max-width: 180px;
	position: fixed;
	top: 2rem;
	right: 2rem;
	z-index: 9000;
}
.ptn-chng-wrap > .inner {
	width: 100%;
	transform: translateX(250px);
	transition: 0.35s;
	pointer-events: none;
	background: #fff;
	padding: 1rem;
}
.ptn-chng-wrap:hover > .inner {
	transform: translateX(0px);
	transition: 0.35s;
	pointer-events: auto;
}
.ptn-chng-wrap > .inner > div {
	cursor: pointer;
	width: 30px;
	height: 30px;
	text-align: center;
	border: 2px solid;
}

/*================================================================================================

* お電話導線 *

================================================================================================*/
.tel-info-item {
	width: calc(100% - 2rem);
	max-width: 840px;
	margin: 0 auto;
	margin-bottom: 4rem;
}
.tel-info-item .img {
	width: 35%;
	background: url(../../img/operator.svg)no-repeat center / contain;
}
.tel-info-item .info {
	width: 65%;
	padding-left: 1rem;
}
	.tel-info-item .info .bubble {
		width: 100%;
		background: #fff;
		color: #24C19F;
		border: 2px solid;
		padding: 1rem;
		border-radius: 15px;
		margin-bottom: 1rem;
		position: relative;
		font-weight: 700;
	}
			.tel-info-item .info .bubble::after {
				width: 20px;
				height: 20px;
				content: "";
				position: absolute;margin: auto;top: 0;bottom: 0;left: -11px;
				background: #fff;
				border-top: 2px solid;
				border-left: 2px solid;
				transform: rotate(-45deg);
			}

	.tel-info-item .info p.copy {
		font-size: 1.25rem;
		margin-bottom: 1rem;
		padding-bottom: 1rem;
		border-bottom: 1px solid #ddd;
	}
	.tel-info-item .info a.tel {
		font-size: 2rem;
		background: #fff;
		border-radius: 5px;
		overflow: hidden;
		margin-bottom: 1rem;
		font-weight: 700;
	}
			.tel-info-item .info a.tel .icon {
				background: #24C19F url(../../img/icon/tel.svg)no-repeat center / auto 50%;
				width: 90px;
			}
			.tel-info-item .info a.tel .num {
				width: calc(100% - 90px);
				background: #fff;
				text-align: center;
				position: relative;
			}
			.tel-info-item .info a.tel .num span {
				position: relative;
				z-index: 10;
				transition: 0.35s ease;
			}
			.tel-info-item .info a.tel .num::after {
				width: 100%;
				height: 100%;
				background: #24C19F;
				content: "";
				position: absolute;margin: auto;top: 0;bottom: 0;left: 0;
				transform: scaleX(0);
				transform-origin: left;
				z-index: 1;
				transition: 0.25s ease;
			}

			.tel-info-item .info div.tel:hover .num span {
				color: #fff;
				transition: 0.35s ease;
			}
			.tel-info-item .info div.tel:hover .num::after {
				transform: scaleX(1);
				transition: 0.25s ease;
			}
			.tel-info-item .info div.tel {
				font-size: 2rem;
				background: #fff;
				border-radius: 5px;
				overflow: hidden;
				margin-bottom: 1rem;
				font-weight: 700;

				color: #24C19F;
				text-decoration: none;
				outline:none;
			}
					.tel-info-item .info div.tel .icon {
						background: #24C19F url(../../img/icon/tel.svg)no-repeat center / auto 50%;
						width: 90px;
					}
					.tel-info-item .info div.tel .num {
						width: calc(100% - 90px);
						background: #fff;
						text-align: center;
						position: relative;
					}
					.tel-info-item .info div.tel .num span {
						position: relative;
						z-index: 10;
						transition: 0.35s ease;
					}
					.tel-info-item .info div.tel .num::after {
						width: 100%;
						height: 100%;
						background: #24C19F;
						content: "";
						position: absolute;margin: auto;top: 0;bottom: 0;left: 0;
						transform: scaleX(0);
						transform-origin: left;
						z-index: 1;
						transition: 0.25s ease;
					}
		
					.tel-info-item .info div.tel:hover .num span {
						color: #fff;
						transition: 0.35s ease;
					}
					.tel-info-item .info div.tel:hover .num::after {
						transform: scaleX(1);
						transition: 0.25s ease;
					}

	.tel-info-item .info p.last {
		font-size: 0.8rem;
		text-align: center;
	}


@media only screen and (max-width: 580px) {
.tel-info-item .img {
	width: 100%;
	height: 180px;
	margin-bottom: 1rem;
}

.tel-info-item .info {
	width: 100%;
	padding-left: 0rem;
}
	.tel-info-item .info .bubble {
		font-size: 0.8rem;
	}
			.tel-info-item .info .bubble::after {
				position: absolute;margin: auto;top: -11px;bottom: auto;left: 0;right: 0;
				transform: rotate(45deg);
			}

	.tel-info-item .info p.copy {
		font-size: 1rem;
	}

	.tel-info-item .info a.tel {
		font-size: 1.25rem;
	}
			.tel-info-item .info a.tel .icon {
				width: 60px;
			}
			.tel-info-item .info a.tel .num {
				width: calc(100% - 60px);
				padding: 0.5rem 1rem;
			}

/********************/}

/*================================================================================================

* ステップ移行のフェード *

================================================================================================*/
.step-fade-ovl {
	width: 100%;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	background: #fff;
	pointer-events: none;
	opacity: 0;
	transition: 0.35s;
	z-index: 9999;
}
.step-fade-ovl.on  {
	opacity: 1;
	transition: 0.35s;
}

/*================================================================================================

* 一時保存ボタン *

================================================================================================*/
.save-wrap {
	width: 100%;
	max-width: 285px;
	margin: 0 auto;
}

/*================================================================================================

* 簡易シミュレーション *

================================================================================================*/

.simple-s-item-wrap {
	width: 100%;
}
.simple-s-item-wrap .item {
	width: calc(33.333% - 25px);
	margin-bottom: 2rem;
	background: #fff;
	border-radius: 5px;
	overflow: hidden;
	box-shadow: 0 3px 5px -3px rgba(10,10,10,0.1);
}

@media only screen and (max-width: 768px) {
body.index .simple-simulation > .inner {
	max-width: 480px;
}
.simple-s-item-wrap .item {
	width: calc(100% - 0px);
}
/* ** */}


/* 吹き出し ================================================*/
.simple-s-item-wrap .item .bubble {
	width: 100%;
	height: 65px;
	padding: 0.5rem 1rem;
	background: #fff;
	color: #256AAA;
	border: 1px solid;
	border-radius: 15px;
	position: relative;
	margin-bottom: 2rem;
	font-size: 0.8rem;
	font-weight: 700;
}
		.simple-s-item-wrap .item .bubble::after {
			width: 15px;
			height: 15px;
			background: #fff;
			color: #256AAA;
			border-bottom: 1px solid;
			border-right: 1px solid;
			content: "";
			margin: auto;position: absolute;right: 0;bottom: -8px;left: 0;
			transform: rotate(45deg);
		}


/* ICON ================================================*/
.simple-s-item-wrap .item .title {
	width: 100%;
	height: 120px;
	padding: 1rem 1rem;
	color: #fff;
	background: #256AAA;
	margin-bottom: 1.5rem;
	position: relative;
}
		.simple-s-item-wrap .item .title::after {
			width: 15px;
			height: 15px;
			background: #256AAA;
			content: "";
			margin: auto;position: absolute;right: 0;bottom: -8px;left: 0;
			transform: rotate(45deg);
		}
@media only screen and (min-width:769px) and (max-width: 804px) {
	.simple-s-item-wrap .item .title {
		height: 180px;
	}
}


/* ICON ================================================*/
.simple-s-item-wrap .item .icon {
	width: 100%;
	height: 180px;
	margin: 0 auto;
	margin-bottom: 1rem;
}
		.simple-s-item-wrap .item.no01 .icon {
			background: url(../../img/index/sm01.png)no-repeat center / auto 90%;
		}
		.simple-s-item-wrap .item.no02 .icon {
			background: url(../../img/index/sm02.png)no-repeat center / auto 90%;
		}
		.simple-s-item-wrap .item.no03 .icon {
			background: url(../../img/index/sm03.png)no-repeat center / auto 90%;
		}

@media only screen and (max-width: 580px) {
.simple-s-item-wrap .item .icon {
	height: 130px;
}
/* ** */}

/* INFO ================================================*/
.simple-s-item-wrap .item .info {
	min-height: 113px;
	border-top: 1px solid #e7e7e7;
	padding: 1rem 1rem 1rem 1rem;
}
.simple-s-item-wrap .item .info p {
	font-size: 0.9rem;
}

@media only screen and (max-width: 1188px) {
	.simple-s-item-wrap .item .info {
			min-height: 139px;
			border-top: 1px solid #e7e7e7;
			padding: 1rem 1rem 1rem 1rem;
	}
	/* ** */}

@media only screen and (max-width: 944px) {
.simple-s-item-wrap .item .info {
		min-height: 165px;
		border-top: 1px solid #e7e7e7;
	  padding: 1rem 1rem 1rem 1rem;
}
/* ** */}

@media only screen and (max-width: 797px) {
	.simple-s-item-wrap .item .info {
			min-height: 191px;
			border-top: 1px solid #e7e7e7;
			padding: 1rem 1rem 1rem 1rem;
	}
	/* ** */}

@media only screen and (max-width: 580px) {
.simple-s-item-wrap .item .info {
	min-height: auto;
}
/* ** */}

/* LINK ================================================*/
.simple-s-item-wrap .item a {
	padding: 1rem 1rem 1rem 1rem;
	display: block;
	width: 100%;
	color: #24C19F;
	text-align: center;
	font-size: 0.9rem;
}
.simple-s-item-wrap .item a span {
	position: relative;
	padding-left: 2rem;
}
.simple-s-item-wrap .item a span::before {
	width: 28px;
	height: 28px;
	content: "";
	margin: auto;position: absolute;top: 0;bottom: 0;left: 0;
	background: url(../../mypage/img/icon/simple-simulation-grn.svg)no-repeat center / contain;
}

@media only screen and (max-width: 768px) {
/* ** */}

/*================================================================================================

* FOOTER *

================================================================================================*/
footer .info {
	width: 65%;
	text-align: left;
	font-size: 10px;
}
footer .img {
	width: 35%;
}
footer .img img {
	max-width: 280px;
}

@media only screen and (max-width: 768px) {
footer .info {
	width: 100%;
	max-width: 400px;
	margin: 0 auto;
	margin-bottom: 1rem;
}
footer .img {
	width: 100%;
}
/********************/}

@media only screen and (max-width: 580px) {
footer .img {
	text-align: left;
}
footer .img img {
	max-width: 220px;
}
/********************/}


/*================================================================================================

* ERROR *

================================================================================================*/
.error-content-wrap {
	width: 100%;
	max-width: 580px;
	margin: 0 auto;
	padding-top: 4rem;
}
.error-content-wrap .icon {
	width: 100%;
	max-width: 160px;
	margin: 0 auto;
}
.error-content-wrap h2 {
	font-size: 1.25rem;
	font-weight: 700;
	text-align: center;
	margin-bottom: 0.5rem;
	color: #004eff;
}
.error-content-wrap p {
	font-size: 0.9rem;
	max-width: 468px;
	margin: 0 auto;
	margin-bottom: 1rem;
}

/*================================================================================================

* 

================================================================================================*/
.wordbreak {
	word-wrap : break-word;
	overflow-wrap : break-word;
	word-break: break-all;
}