@charset "utf-8";
/*------------------------------------------------------------
	index
------------------------------------------------------------*/
#main {
	padding: 0 0 77px;
}
#main .mainImg {
	margin:  0 auto ;
	padding: 124px 0 113px 12px;
	width: 1200px;
	box-sizing: border-box;
}
#main .ways {
	padding: 153px 0 149px;
	background-color: #F0F0F0;
}
#main .ways h2,
#main .safe h2,
#main .voice h2 {
	margin-bottom: 65px;
}
#main .ways .titleBox,
#main .safe .titleBox {
	margin-bottom: 41px;
}
#main .ways .titleBox .photo,
#main .safe .titleBox .photo {
	margin: 0 auto;
	width: 100px;
	transform: translate(-11px , -7px);
}
#main .safe {
	margin-bottom: 150px;
	padding-top: 154px;
}
#main .safe .comBlueBox {
	background: #299EAC url("../img/common/icon02.png") no-repeat center -2px / 60px 36px;
}
#main .safe .effortUl > li {
	padding-bottom: 35px;
	width: 363px;
	border-bottom: 1px solid #fff;
}
#main .safe .effortUl > li:nth-child(2n)::before {
	height: 250px;
}
#main .safe .effortUl > li:nth-child(3),
#main .safe .effortUl > li:nth-child(4),
#main .safe .effortUl > li:nth-child(5) {
	padding-bottom: 0;
	border-bottom: none;
}
#main .safe .effortUl > li:nth-child(5) {
	margin-top: 38px;
	padding-top: 35px;
	width: 100%;
	border-top: 1px solid #fff;
}
#main .safe .effortUl > li:nth-child(2) .ttl {
	margin-bottom: 46px;
}
#main .safe .subUl {
	margin: -20px 0 15px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
#main .safe .subUl::after {
	width: 113px;
	content: "";
}
#main .safe .subUl li {
	margin-top: 20px;
	padding: 5px;
	width: 113px;
	color: #299EAC;
	font-size: 1.6rem;
	text-align: center;
	border-radius: 8px;
	box-sizing: border-box;
	background-color: #fff;
}
#main .safe .subUl li span {
	margin-bottom: 10px;
	padding: 1px 0 2px;
	width: 101px;
	display: inline-block;
	color: #fff;
	font-size: 1.3rem;
	font-weight: 700;
	border-radius: 14px;
	background-color: #299EAC;
}
#main .safe .subUl li strong {
	display: block;
	font-size: 3rem;
	font-weight: 700;
	line-height: 1;
	word-break: break-all;
}
#main .safe .subUl li:nth-child(3) strong {
	margin-top: 3px;
	font-size: 2.5rem;
}
#main .voice {
	padding: 153px 0 149px;
	background-color: #F0F0F0;
}
#main .voice .titleBox {
	margin-bottom: 40px;
}
#main .voice .titleBox .text {
	font-size: 2rem;
	line-height: 1.85;
	text-align: center;
}
#main .voice .slideBox {
	padding: 32px 0 65px;
	position: relative;
	background-color: #DCE8EA;
}
#main .voice .slideBox::before,
#main .voice .slideBox::after {
	width: 182px;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 10;
	background: url("../img/index/slide_bg01.png") no-repeat left top / 182px 100%;
	content: "";
}
#main .voice .slideBox::after {
	left: auto;
	right: 0;
	background-image: url("../img/index/slide_bg02.png");
}
#main .voice .slide li {
	margin: 0 57px;
	max-width: 363px;
	box-sizing: border-box;
}
#main .voice .slide .pho {
	margin-bottom: 30px;
	text-align: center;
}
#main .voice .slide .pho img {
	margin-bottom: 12px;
	display: inline-block;
	height: 141px;
}
#main .voice .slide .pho span {
	display: block;
	color: #299EAC;
	font-size: 1.6rem;
	font-weight: 700;
}
#main .voice .slide p {
	padding: 25px;
	min-height: 314px;
	position: relative;
	font-size: 1.5rem;
	line-height: 2;
	box-sizing: border-box;
	background-color: #fff;
}
#main .voice .slide p::before {
	margin-left: -15px;
	width: 30px;
	height: 23px;
	position: absolute;
	top: -23px;
	left: 50%;
	background: url("../img/common/icon03.png") no-repeat center / 30px 23px;
	content: "";
}
#main .voice .slideBox .arrowUl li {
	width: 40px;
	position: absolute;
	top: 60.5%;
	z-index: 20;
	cursor: pointer;
}
#main .voice .slideBox .arrowUl li:hover {
	opacity: 0.7;
}
#main .voice .slideBox .prev {
	left: 215px;
}
#main .voice .slideBox .next {
	right: 215px;
}
#main .voice .slideBox .slick-dots {
	position: absolute;
	bottom: -35px;
	left: 0;
	right: 0;
	display: flex;
	justify-content: center;
	align-items: center;
}
#main .voice .slideBox .slick-dots li {
	margin: 0 10px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background-color: #C6C6C6;
	cursor: pointer;
}
#main .voice .slideBox .slick-dots li.slick-active {
	background-color: #299EAC;
}
#main .voice .slideBox .slick-dots button {
	display: none;
}
#main .owner {
	margin-bottom: 150px;
	padding-top: 150px;
}
#main .owner h2 {
	margin-bottom: 65px;
}
#main .owner ul {
	margin-top: -40px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
#main .owner li {
	margin-top: 40px;
	width: 430px;
}
#main .owner li:last-child .ttlBox {
	margin-right: -15px;
}
#main .owner .ttlBox {
	margin-bottom: 15px;
	display: flex;
	align-items: center;
}
#main .owner .ttlBox .num {
	margin-right: 17px;
}
#main .owner .ttlBox .num span {
	padding: 8px 5px 5px;
	width: 77px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	color: #299EAC;
	font-size: 4.5rem;
	font-weight: 700;
	line-height: 1;
	text-align: center;
	border: 2px solid #299EAC;
	box-sizing: border-box;
	background-color: #FFF39B;
}
#main .owner .ttlBox .num small {
	margin-bottom: -2px;
	display: inline-block;
	font-size: 2rem;
}
#main .owner .ttlBox .comTitle {
    text-align: left;
}
#main .owner .ttlBox .comTitle span {
	padding-left: 0;
}
#main .owner .pho {
	margin-bottom: 30px;
	text-align: center;
}
#main .owner li > p {
	font-size: 2rem;
	line-height: 1.85;
}
#main .owner li .notes {
	margin-top: 13px;
	font-size: 1.2rem;
	line-height: 1.67;
}
#main .step {
	padding: 153px 0 100px;
	background-color: #F0F0F0;
}
#main .step h2 {
	margin-bottom: 70px;
}
#main .step h2 span::after,
#main .step h2 span::before {
	width: 309px;
    background-size: 309px 9px;
}
#main .step .inner {
	padding: 43px 45px;
	background-color: #fff;
}
#main .step .title {
	margin-bottom: 33px;
	padding: 14px 10px;
	position: relative;
	color: #299EAC;
	font-size: 2.1rem;
	font-weight: 700;
	line-height: 1.67;
	text-align: center;
	border: 2px solid #299EAC;
}
#main .step .title::after {
	width: 47px;
	height: 26px;
	position: absolute;
	bottom: -26px;
	left: 50%;
	background: url("../img/common/icon04.png") no-repeat center / 47px 26px;
	transform: translateX(-50%);
	content: "";
}
#main .step ul {
	margin-top: -50px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
#main .step li {
	margin-top: 50px;
	width: 249px;
	position: relative;
	font-weight: 700;
	border: 2px solid #299EAC;
	box-sizing: border-box;
}
#main .step li:not(:last-child)::after {
	width: 23px;
	height: 79px;
	position: absolute;
	right: -43px;
	top: 37%;
	background: url("../img/common/icon05.png") no-repeat center / 23px auto;
	content: "";
}
#main .step li .ttl {
	padding: 2px 8px 0 32px;
	color: #fff;
	font-size: 2rem;
	text-align: center;
	background-color: #299EAC;
}
#main .step li .ttl span {
	display: inline-block;
	width: 57px;
	position: absolute;
	top: -10px;
	left: -20px;
}
#main .step li .txtBox {
	padding: 18px 23px 110px;
	color: #299EAC;
	font-size: 1.6rem;
	line-height: 1.5;
}
#main .step li:first-child .txtBox {
	background: url("../img/index/step_img01.png") no-repeat center bottom / 196px auto;
}
#main .step li:nth-child(2) .txtBox {
	background: url("../img/index/step_img02.png") no-repeat center bottom -2px / 197px auto;
}
#main .step li:nth-child(3) .txtBox {
	background: url("../img/index/step_img03.png") no-repeat center bottom / 136px auto;
}
#main .faq {
	padding-top: 150px;
}
#main .faq h2 {
	margin-bottom: 65px;
}
#main .faq h2 span::after,
#main .faq h2 span::before {
	width: 279px;
    background-size: 279px 9px;
}
#main .faq .title {
	margin-bottom: 46px;
	color: #299EAC;
	font-size: 2.5rem;
	font-weight: bold;
	text-align: center;
}
#main .faq .title span {
	padding: 0 5px;
	display: inline-block;
	line-height: 0.5;
	border-bottom: 12px solid #FFF39B;
}
#main .faq .faqDl {
	margin: -20px 0 34px;
}
#main .faq dt {
	margin-top: 20px;
	padding: 20px 50px 17px;
	position: relative;
	color: #299EAC;
	font-size: 1.7rem;
	font-weight: 700;
	line-height: 1.29;
	border: 1px solid #299EAC;
	background: url("../img/common/icon06.png") no-repeat 8px 11px / 35px 36px;
	cursor: pointer;
}
#main .faq dt:hover {
	opacity: 0.7;
}
#main .faq dt::before,
#main .faq dt::after {
	width: 27px;
	height: 1px;
	position: absolute;
	top: 50%;
	right: 15px;
	background-color: #299EAC;
	content: "";
}
#main .faq dt::after {
	transform: rotate(90deg);
	transition: 0.3s;
}
#main .faq dt.on {
	border-bottom: 1px dashed #299EAC;
}
#main .faq dt.on::after {
	transform: rotate(0);
}
#main .faq dd {
	padding: 25px 35px 37px 50px;
	display: none;
	font-size: 1.7rem;
	line-height: 1.65;
	border: 1px solid #299EAC;
	border-top: none;
	background: url("../img/common/icon07.png") no-repeat 8px 22px / 35px 36px;
}
#main .faq dd .notes {
	margin-top: 15px;
	font-size: 1.2rem;
	line-height: 1.67;
}
#main .faq dd a {
	color: #EF7660;
	font-size: 2rem;
	font-weight: bold;
	text-decoration: underline;
}
#main .faq .ddStyle01 .notes {
	margin-top: 5px;
}
@media all and (max-width: 896px) {
	#main {
		padding-bottom: 0;
	}
	#main .mainImg {
		margin: 0 auto;
		padding: 40px 0 60px;
		width: 87.2%;
		padding-left: 0;
		text-align: center;
	}
	#main .ways {
		padding: 100px 0 70px;
	}
	#main .ways h2,
	#main .safe h2,
	#main .voice h2 {
		margin-bottom: 36px;
	}
	#main .ways .titleBox,
	#main .safe .titleBox {
		margin-bottom: 50px;
	}
	#main .ways .titleBox .photo,
	#main .safe .titleBox .photo {
		margin: 0 auto;
		width: 86px;
		transform: translate(-15px , -5px);
	}
	#main .safe {
		margin-bottom: 100px;
		padding-top: 100px;
	}
	#main .safe .comBlueBox {
		background: #299EAC url("../img/common/icon02.png") no-repeat center -12px / 60px 36px;
	}
	#main .safe .effortUl > li {
		width: auto;
		border-bottom: 1px solid #fff;
	}
	#main .safe .effortUl > li:nth-child(3),
	#main .safe .effortUl > li:nth-child(4) {
		padding-bottom: 35px;
		border-bottom: 1px solid #fff;
	}
	#main .safe .effortUl > li:nth-child(5) {
		padding-top: 0;
		border-top: none;
	}
	#main .safe .effortUl > li:nth-child(2) .ttl {
		margin-bottom: 15px;
	}
	#main .safe .subUl {
		margin: -20px auto 10px;
		max-width: 279px;
	}
	#main .safe .subUl::after {
		width: 77px;
	}
	#main .safe .subUl li {
		margin-top: 20px;
		padding: 5px 0 0;
		width: 84px;
		font-size: 1.4rem;
		border-radius: 9px;
	}
	#main .safe .subUl li span {
		margin-bottom: 10px;
		padding: 1px 0 0;
		width: 77px;
		font-size: 0.9rem;
		border-radius: 9px;
	}
	#main .safe .subUl li strong {
		font-size: 2rem;
	}
	#main .safe .subUl li:nth-child(3) strong {
		margin-top: 0;
		font-size: 1.8rem;
	}
	#main .voice {
		padding: 100px 0 90px;
	}
	#main .voice h2 span::before,
	#main .voice h2 span::after {
		width: 25%;
	}
	#main .voice .titleBox .comTitle {
		margin-bottom: 10px;
	}
	#main .voice .titleBox .text {
		font-size: 1.8rem;
		line-height: 1.66;
		text-align: left;
	}
	#main .voice .slideBox {
		margin: 0 12px;
		padding: 32px 30px 54px;
	}
	#main .voice .slideBox::before,
	#main .voice .slideBox::after {
		display: none;
	}
	#main .voice .slide li {
		max-width: calc(100vw - 134px);
	}
	#main .voice .slide .pho {
		margin-bottom: 35px;
	}
	#main .voice .slide .pho img {
		margin-bottom: 8px;
	}
	#main .voice .slide p {
		padding: 25px;
		min-height: inherit;
		font-size: 1.4rem;
		line-height: 1.79;
	}
	#main .voice .slideBox .arrowUl li {
		width: 37px;
		top: 48%;
	}
	#main .voice .slideBox .arrowUl li:hover {
		opacity: 1;
	}
	#main .voice .slideBox .prev {
		left: -12px;
	}
	#main .voice .slideBox .next {
		right: -12px;
	}
	#main .voice .slideBox .slick-dots li {
		margin: 0 7px;
		width: 8px;
		height: 8px;
	}
	#main .owner {
		margin-bottom: 95px;
		padding-top: 100px;
	}
	#main .owner h2 {
		margin-bottom: 60px;
	}
	#main .owner ul {
		margin-top: -30px;
		display: block;
	}
	#main .owner li {
		margin-top: 30px;
		width: auto;
	}
	#main .owner li:last-child .ttlBox {
		margin-right: -15px;
	}
	#main .owner .ttlBox {
		padding-left: 10px;
	}
	#main .owner li:nth-child(2) .ttlBox {
		padding-left: 20px;
	}
	#main .owner .ttlBox .num {
		margin-right: 15px;
	}
	#main .owner .ttlBox .num span {
		padding: 5px 5px 2px;
		width: 56px;
		font-size: 3.3rem;
	}
	#main .owner .ttlBox .num small {
		margin-bottom: -2px;
		font-size: 1.6rem;
	}
	#main .owner li:first-child {
		padding-bottom: 40px;
		border-bottom: 1px solid #000;
	}
	#main .owner li:first-child .comTitle {
		margin-top: -20px;
	}
	#main .owner li:first-child .pho {
		margin: 0 auto 30px;
		width: 48.27vw;
	}
	#main .owner li:nth-child(2) .pho {
		margin: 0 auto 30px;
		width: 57vw;
	}
	#main .owner li > p {
		font-size: 1.8rem;
		line-height: 1.67;
	}
	#main .owner li .notes {
		margin-top: 5px;
	}
	#main .step {
		padding: 100px 0 50px;
	}
	#main .step h2 {
		margin-bottom: 50px;
	}
	#main .step h2 span::after,
	#main .step h2 span::before {
		width: 14%;
	}
	#main .step .inner {
		padding: 24px;
	}
	#main .step .title {
		margin-bottom: 36px;
		padding: 14px 10px 10px;
	}
	#main .step .title::after {
		width: 40px;
		height: 22px;
		bottom: -22px;
		background-size: 40px 22px;
	}
	#main .step ul {
		margin-top: 0;
		display: block;
	}
	#main .step li {
		margin: 0 0 60px;
		width: auto;
	}
	#main .step li:last-child {
		margin-bottom: 0;
	}
	#main .step li:not(:last-child)::after {
		right: auto;
		top: auto;
		bottom: -70px;
		left: 47%;
		transform: rotate(90deg);
	}
	#main .step li .ttl {
		padding: 2px 10px 0 50px;
	}
	#main .step li .ttl span {
		top: -10px;
		left: -10px;
	}
	#main .step li .txtBox {
		padding: 20px 12px 14px;
	}
	#main .step li:first-child .txtBox {
		background: url("../img/index/step_img01.png") no-repeat right -8px bottom -2px / 147px auto;
	}
	#main .step li:nth-child(2) .txtBox {
		background: url("../img/index/step_img02.png") no-repeat right bottom -2px / 130px auto;
	}
	#main .step li:nth-child(3) .txtBox {
		background: url("../img/index/step_img03.png") no-repeat right bottom / 101px auto;
	}
	#main .faq {
		padding-top: 100px;
	}
	#main .faq h2 {
		margin-bottom: 36px;
	}
	#main .faq h2 span::after,
	#main .faq h2 span::before {
		width: 10%;
	}
	#main .faq .title {
		margin-bottom: 35px;
		font-size: 1.7rem;
	}
	#main .faq .title span {
		border-width: 8px;
	}
	#main .faq .faqDl {
		margin: -20px 0 25px;
	}
	#main .faq dt {
		padding: 8px 40px 8px 45px;
		min-height: 60px;
		display: flex;
		align-items: center;
		background: url("../img/common/icon06.png") no-repeat 9px center / 31px auto;
		box-sizing: border-box;
	}
	#main .faq dt:hover {
		opacity: 1;
	}
	#main .faq dt::before,
	#main .faq dt::after {
		width: 16px;
	}
	#main .faq dd {
		padding: 7px 10px 30px 45px;
		display: none;
		font-size: 1.5rem;
		line-height: 2;
		background: url("../img/common/icon07.png") no-repeat 9px 9px / 31px auto;
	}
	#main .faq dd .notes {
		margin-top: 5px;
	}
	#main .faq dd a {
		font-size: 1.8rem;
	}
}
@media all and (min-width: 376px) and (max-width: 896px) {
    #main .step li:not(:last-child)::after {
        left: 48%;
    }
}
@media all and (max-width: 374px) {
	#main .safe .comBlueBox {
		padding: 60px 10px 40px;
	}
	#main .safe .subUl li {
		width: 80px;
	}
	#main .voice .slideBox {
		margin: 0;
	}
	#main .voice .slideBox {
		padding: 20px 27px 60px;
	}
    #main .step li .ttl {
        font-size: 1.4rem;
    }
    #main .step li .txtBox {
        font-size: 1.2rem;
    }
    #main .step li .ttl span {
        top: -15px;
        left: -15px;
    }
    #main .step li:first-child .txtBox {
        background-size: 120px auto;
    }
    #main .step li:nth-child(2) .txtBox {
        background-size: 110px auto;
    }
    #main .step li:nth-child(3) .txtBox {
        background-size: 80px auto;
    }
    #main .faq .title {
        font-size: 1.4rem;
    }
    #main .faq dt {
        font-size: 1.3rem;
    }
}