@charset "utf-8";
/* CSS Document */

header{
	position: sticky;
	top:0;
	left:0;
	z-index: 3;
	background-color: #fff;
}

.kanri-no{
	padding: 0 2.7% 5px;
	text-align: right;
	font-size: 0.85em;
	margin-top: -5px;
}

.sButton .btn .shop_info{
	font-size: 3.8vw;
}

.sLogo{
	width: 60%;
}

.sLineup .subTabs li{
	padding: .5em 1em 0.3em;
}

.subTabs li.is-active img{
	filter: contrast(300%);
}

.sLineup .panelSg .mds span, .sLineup .panelSx .mds span{
	margin: 0 0 .3em;
	padding: 0 0 .3em;
	border-bottom: 1px solid #ffffff;
}

.note_5g, .sWarranty .note_anshin{
	font-size: max(10px, 2.66vw);
	text-align: center;
	margin-top: 10px;
	padding: 0;
	background-color: #FFFFFF;
}

.note_product, .note_plan{
	font-size: max(10px, 2.66vw);
	margin-top: 10px;
	text-align: justify;
}

.note_5g a, .sWarranty .note_anshin a, .note_product a, .note_plan a{
	font-weight: 600;
	color: #0078ff;
	display: inline;
}

.note_product a:hover, .note_plan a:hover{
	display: inline;
}

.note_plan{
	width: 94.66%;
	margin: 12px auto;
}

.flow{
    width: 94.66%;
    margin: 5% auto;
}

.flow p img{
    margin-bottom: 10px;
}

.note_guide{
	background-color: #dcf4f9;
	padding: 1em;
}

.note_guide h4{
	font-size: 1.4em;
	text-align: center;
	margin-bottom: 10px;
}

.note_guide p{
	font-size: 1.2em;
	font-weight: 600;
}

.info_btm{
	text-align: justify;
}

.sOther .opanel.merihari .note, .sOther .opanel.paytoku .note{
	padding: 0 0 1em;
	font-size: min(7px, 1.8vw);
	text-align: center;
	font-weight: 400;
	margin-top: -20px;
}

.sOther .opanel.paytoku .note{
	margin-top: 10px;
}

.sLanding .sOnline img{
	margin: 5% auto 2%;
}

.sOther .opanel.merihari h2{
	width: 70%;
}

.sOther .opanel.paytoku .info a{
    bottom: 1.5em;
}

.sOther .opanel.paytoku h2{
	width: 62%;
}

.note-ytp{
	color: red;
	font-size: 10px;
	font-weight: bold;
}

.note-teigaku{
	font-size: min(10px, 2.66vw);
	margin-top: 15px;
}

@media screen and (min-width: 721px) {
	.kanri-no{
		padding: 0 1% 5px;
	}
	
	.area-kanri-no{
		width: min(41.16%, 494px);
		margin: 0 auto;
	}
	
	.sHeader{
		height: min(4.5vw, 50px);
	}
    .sButton .btn .shop_info{
        font-size: 20px;
    }
	
	.sLogo{
		width: min(23%, 300px);
	}
	
	.vertical-lines{
		padding-left: 10px;
		border-left: 1px solid #B0B0B0;
	}
	
	.sLineup .subTabs li{
		padding: .5em 2em 0.3em;
	}
	
	.note_5g, .note_product, .note_plan, .sWarranty .note_anshin{
		font-size: clamp(10px, 1vw, 12px);
	}
	
	.note_plan{
		width: min(83.33%, 1000px);
		padding: 0;
	}
	
	.flow{
		width: min(75%, 900px);
	}
	
	.flow p img{
		margin-bottom: 20px;
	}
	
	.note_guide h4{
        font-size: 1.6em;
		margin-bottom: 10px;
    }
	
	.note_guide p{
        font-size: 1.4em;
    }
	
	.sOther .opanel.merihari .note, .sOther .opanel.paytoku .note{
		font-size: min(1vw, 12px);
	}
	
	.sOther .opanel.paytoku .info a{
        bottom: 4em;
    }
	
	.note-ytp{
        font-size: 14px;
    }
	
	.note-teigaku{
		font-size: min(1vw, 12px);
	}
	
}


/* bigPanelがis-showクラスを持たない場合、subPanelsを非表示 */
.bigPanel:not(.is-show) .subPanels {
    display: none !important;
}

/* 明示的に表示状態のbigPanel内のsubPanelsのみ表示 */
.bigPanel.is-show .subPanels {
    display: block;
}