@charset "UTF-8";

.main-img-area {
	position: relative;
	color: #FFF;
}
.main-img-area p {
	position: absolute;
	bottom: 0;
	left: 0;
	margin-bottom: 0;
	padding: 20px 30px;
	font-size: 22px;
    font-size: 2.2rem;
	font-weight: 900;
	line-height: 1.8;
	text-shadow: 3px 3px 3px rgba(0,0,0,0.3);
}
@media screen and (max-width: 640px) {
	.main-img-area p {
		padding: 1.5rem 1rem;
		font-size: clamp(1.429rem, calc(1.081rem + 0.649vw), 1.714rem);
	}
}

.clause {
	width: 666px;
	margin-right: auto;
	margin-bottom: 70px;
	margin-left: auto;
}
.clause .note {
	font-size: 1.2rem;
	line-height: 1.3;
	margin-top: 1em;
}
.clause p.fs-l {
    font-weight: bold;
    line-height: 1;
	margin-top: 13.5%;
}
@media screen and (max-width: 640px) {
	.clause {
		width: 100%;
		margin-bottom: 5rem;
	}
}


.construction {
	margin: 3em 0 6em;
}
@media screen and (max-width: 640px) {
	.construction {
		margin: 2em 0 4em;
	}
}

.clause h3 {
	font-size: 2.1rem;
	line-height: 1.3;
	margin-bottom: 0.8em;
}
.clause p .red {
	color: #FF0000;
}
.mark {
	margin-bottom: 6em;
}
@media screen and (max-width: 640px) {
	.clause h3 {
		font-size: 1.7rem;
		text-align: center;
	}
	.clause h3.title-lv3 {
		text-align: left;
		border-left: solid 6px #169139;
	}
	.mark {
		width: 60vw;
		margin:0 auto 3em;
	}
}


.box._howtoBox{
	padding:35px;
	background-color:#f0f0f0;
	width:870px;
}

@media screen and (max-width: 640px) {
	.box._howtoBox{
	width:100%;
	padding:10px;
	text-align:center;
}
	.box._howtoBox img{
		margin:0 auto;
}

}

.box._howtoBox ol{
	list-style-type:none;
	margin-left:1em;
}

@media screen and (max-width: 640px) {
.box._howtoBox ol{
	margin-left:0;
}

}

.box._howtoBox ol li{
	padding:0 0 0 1.5em;
	margin:0;
	position:relative;
	text-align:center;
}



.box._howtoBox ol li span{
	margin:0 0 0 -1em;
}

@media screen and (max-width: 640px) {
.box._howtoBox ol li ._img{

	text-align:center;
}
.box._howtoBox ol li span{
	margin:0 0 0 -1.0em;
}

}

.box._howtoBox ol li img.arrow{
	margin:20px auto;
	display:block;
}

.box._howtoBox ol li div.right{
	text-align:right;
}

@media screen and (max-width: 640px) {
.box._howtoBox ol li div.right{
	text-align:center;
}

}
.box._howtoBox ol li span.align-ctr{
	margin:0 auto;
	display:block;
}

.box._howtoBox ol li span.gTxt{
	margin:20px 0;
	color:#1d8f45;
	display:block;
	text-align:center;
}

.box._howtoBox ol li span.card{
	margin:0 0 0 -35px;
	display:block;
	}
@media screen and (max-width: 640px) {
	.box._howtoBox ol li span.card{
		margin:0;
	}
}

.box._howtoBox ol li span.card img{
	margin:0 15px 0 0;
}

@media screen and (max-width: 640px) {
	.box._howtoBox ol li span.card img,
	.box._howtoBox ol li span.card img.last{
	display:block;
	max-width:235px;
	height:auto;
	margin:0 auto 15px auto !important;
}
}


.box._howtoBox ol li span.card img.last{
	margin:0;
}

@media screen and (max-width: 640px) {
._resize img{

	max-width:100%;
	}

}

.sp-hide{
	}
.sp-show{
	display:none;
	}

@media screen and (max-width: 640px) {
.sp-hide{
	display:none;
	}
.sp-show{
	display:block;

	}
}


.mt20{
	margin-top:20px !important;

	}

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

.mt40{
	margin-top:40px !important;

	}

}

.method-box {
	margin: 30px 0;
	text-align: center;
}
.method-arrow {
	display: block;
	margin: 0.5em auto;
}
.method-arrow.pc-hide {
	display: none;
}
@media print, screen and (max-width: 640px) {
	.method-box {
		width: 60%;
		margin: 1.5em auto;
	}
	.method-box img {
		width: 100%;
	}
	.method-box img.method-arrow.pc-hide {
		display: block;
	}
	.method-box img.method-arrow.sd-hide {
		display: none;
	}
}

.how_to_use-box {
	background-color: #F0F0F0;
	padding: 4% 3.5%;
	text-align: center;
}
.how_to_use-brands {
	display: flex;
	justify-content: space-between;
}
.gr-text {
	color: #1D8E45;
}
.how_to_use-arrow {
	display: block;
	margin: 1.5em auto;
}
@media print, screen and (max-width: 640px) {
	.how_to_use-box {
		padding: 4% 5% 8%;
	}
	.how_to_use-box img {
		width: 100%;
	}
	.how_to_use-brands {
		display: block;
		width: 100%;
		margin: 0 auto;
	}
	.how_to_use-brands img {
		margin-bottom: 1em;
	}
	.how_to_use-box img.how_to_use-arrow {
		width: 2em;
	}
}

/* アコーディオン */
.accordion {
	margin-top: 21%;
	background-color: #F4F4F4;
}
.accordion + .accordion {
	margin-top: 10px
}
.accordion:last-of-type {
	margin-bottom: 12em;
}
.accordion .accordion-title {
	background-color: #D9D9D9;
	border-left: 6px solid #169139;
	padding: 7px 10px;
	min-height: 24px;
	display: flex;
	align-items: center;
	cursor: pointer;
}
.accordion .accordion-title h3 {
	position: relative;
	font-size: 1.6rem;
	line-height: 1.25;
	margin-bottom: 0;
	width: 100%;
}
.accordion .accordion-title h3::after {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	margin: auto 0;
	content:"";
	display: block;
	background-image: url(../img/arrow-accordion.png);
	background-size: 100%;
	width: 24px;
	height: 24px;
	transform: rotate(270deg);
}
.accordion .accordion-content {
	width: 82%;
	margin: 0 auto;
}
.accordion.tab-wrapper .accordion-content {
	width: 83%;
	margin: 0 auto;
}
.accordion .accordion-content_inner {
	padding: 4em 0;
}
.accordion .accordion-content ul {
	margin-left: 10%;
}

.tab-wrapper .arrow-bottom + h6.step {
	margin-top: 8%;
}
.accordion .accordion-content h6.step {
	font-size: 1.8rem;
	margin-bottom: 0.5em;
	font-weight: bold;
	font-weight: 900;
}
.accordion .accordion-content p span {
	color: #FB0000;
}
.accordion .accordion-content p a {
	color: #333333;
	text-decoration: underline;
	text-underline-offset: 0.05rem;
	text-decoration-color: #000;
}

.accordion.tab-wrapper .accordion-content .num-circle {
	margin-right: 6%;
	margin-left: 6%;
}
.accordion .accordion-content .tab_contents {
	width: 95.6%;
	margin: 3.6% auto 8.7%;
	background-color: #FFF;
}

.accordion .accordion-content .note {
	margin: 7% 5% 7% 10%;
	font-size: 1.4rem;
}
.accordion .accordion-content .note.one-line {
	margin-top: 2.7%;
}
.accordion .accordion-content ul.note li {
    text-indent: -1em;
    margin: 0 0 0.5em 1em;
}
.accordion.tab-wrapper .accordion-content .note {
	width: 95.6%;
	margin: 0 auto;
}

/* アコーディオン動作 */
.accordion-checkbox {
	display: none;
}
.accordion-title.active h3::after {
	transform: rotate(0deg);
}
.accordion-content {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease-out;
}
.accordion-content.active {
  max-height: 5000px; /* 適切な最大値に調整してください */
}
.accordion-checkbox:not(:checked) + .accordion-title + .accordion-content {
	max-height: 0;
	padding: 0;
	border: none;
}

@media screen and (max-width: 640px) {
	.accordion:last-of-type {
		margin-bottom: 5em;
	}
	.accordion .accordion-title h3 {
		padding-right: 5.6vw;
		text-align: left;
	}
	.accordion .accordion-title h3::after {
		width: 5.6vw;
		height: 5.6vw;
	}
	.accordion .accordion-content,
	.accordion.tab-wrapper .accordion-content {
		width: 84.5vw;
		margin: 0 auto;
	}
	.accordion .accordion-content_inner {
		padding: 2em 0;
	}
	.accordion .accordion-content p,
	.accordion .accordion-content ul,
	.accordion .accordion-content .tab_contents {
		margin-right: 0;
	}

	.accordion .accordion-content h6.step {
		font-size: 1.4rem;
	}

	.accordion .accordion-content .note {
		width: 96%;
		margin: 7% 0;
	}

	.accordion.tab-wrapper .accordion-content .num-circle,
	.accordion.tab-wrapper .accordion-content .note {
		margin-right: 0;
		margin-left: 0;
	}
}

.monile_phone_number {
	/* margin-top: 5em; */
}
.monile_phone_number .arrow-bottom,
.tab-wrapper .arrow-bottom {
	width: 84%;
	text-align: center;
	margin: 4% 0 4% 10%;
}
.tab-wrapper .arrow-bottom {
	margin-bottom: 5%;
}
.monile_phone_number p {
	margin-top: 5em;
	padding-right: 8%;
}
@media screen and (max-width: 640px) {
	.monile_phone_number {
		padding-left: 14vw;
		width: 70.5vw;
        box-sizing: content-box;
		margin-top: 3em;
	}
	.monile_phone_number .arrow-bottom {
		width:46.6vw;
		margin-left: 1vw;
	}
	.monile_phone_number .arrow-bottom img {
		width: 6.2vw;
		margin: 0 auto;
	}
	.monile_phone_number p {
		width: 78.2vw;
		margin-left: -11.5vw;
		padding-right: 0;
	}
}

.tab_contents {
	/* width: 80%; */
	margin: 4em auto 0;
	text-align: center;
}

.tab_wrap {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

/*タブボタンデザイン*/
.tab_lab1, .tab_lab2, .tab_lab3, .tab_lab4, .tab_lab5, .tab_lab6 {
	background: #D9D9D9;
	color: #333333;
	width: calc(100% / 3);
	cursor: pointer;
	font-weight: bold;
	padding: 1em 0 0.9em;
	box-sizing: border-box;
}

/*タブにチェック入ったとき*/
#tab1:checked~.tab_lab1,
#tab2:checked~.tab_lab2,
#tab3:checked~.tab_lab3,
#tab4:checked~.tab_lab4,
#tab5:checked~.tab_lab5,
#tab6:checked~.tab_lab6 {
	background: #55936B;
	color: #FFF;
}
.tab_lab2,.tab_lab5 {
border-right: 1px solid #FFF;
border-left: 1px solid #FFF;
}

/*タブボタンとボックス連動*/
#tab1:checked~.panels #area1,
#tab2:checked~.panels #area2,
#tab3:checked~.panels #area3,
#tab4:checked~.panels #area4,
#tab5:checked~.panels #area5,
#tab6:checked~.panels #area6 {
	display: block;
}

.panels {
	width: 100%;
	border-top: 2px solid #FFF;
}

/*チェックボックスとボックス非表示*/
input[name="check"], input[name="check02"] {
	display: none;
}
.panel {
	display: none;
	padding: 7% 0 8%;
}

.panel_content {
	background-color: #fff;
	width: 100%;
	padding: 4em 4.8% 3em;
	box-sizing: border-box;
}
.panel_content .flex {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}
.panel_content .flex img:first-of-type {
	width: 45%;
}
.panel_content .flex img:nth-of-type(2) {
	height: 100%;
}
.panel_content .flex img:last-of-type {
	width: 44.7%;
}

.panel_content p {
	margin: 2em 0 3em;
	padding-bottom: 3em;
	color: #1D8E45;
	border-bottom: 1px solid #BFBFBF;
}

@media print, screen and (max-width: 640px) {
	.panel {
		padding: 9.6% 8.6% 7.8%;
	}

	.accordion .accordion-content .tab_contents {
		width: 100%;
		margin: 2em 0 0;
	}

	.tab_lab1, .tab_lab2, .tab_lab3, .tab_lab4, .tab_lab5, .tab_lab6 {
		line-height: 1.3;
	}

	.accordion .accordion-content .tab_contents + .note {
		margin-top: 6.3%;
	}

	.panel_content {
		padding-top: 2em;
		padding-right: 7%;
		padding-left: 7%;
	}
	.panel_content .flex img:first-of-type,
	.panel_content .flex img:last-of-type {
		width: 100%;
	}

	.panel_content img:nth-of-type(2){
		margin: 3em 0;
	}
	.panel_content .flex {
		display: none;
	}
	.panel_content p {
		text-align: left;
	}

}