/* =========================================================
	サポートトップページ用CSS
========================================================= */

/* --- common ------------------------------------------- */

/* 見出し */
.container h1 {
	font-weight:400;
	font-size:40px;
}
.container h2{
	font-weight:500;
	margin-top:60px;
	font-size:24px;
}
@media screen and (max-width: 640px) {
	.container h1 {
		font-size:28px;
	}
	.container h2{
		margin-top:40px;
		font-size:22px
	}
}
/* ボタン */
.container a.btn_460 {
	width:460px;
	box-sizing: border-box;
	display:inline-block;
	border-radius:10px;
	text-decoration: none;
	border: 1px solid #ccc;
	box-shadow: 5px 5px 10px rgb(0 0 0 / 10%);
	padding:20px 60px 20px 120px;
	background-repeat: no-repeat;
	background-position:30px center;
	position: relative;
	transition: 0.2s
}
.container a.btn_460:hover {
	box-shadow: none;
}
.container a.btn_460::after {
	content:"";
	position:absolute;
	right:20px;
	top:calc(50% - 5px);
	border-bottom:2px solid #aaa;
	border-right:2px solid #aaa;
	width:8px;
	height:8px;
	transform: rotate(-45deg);
}
.container a.btn_460 dl {
	text-align: left
}
.container a.btn_460 dl dt{
	font-weight:500;
	font-size:20px;
}
@media screen and (max-width: 640px) {
	.container a.btn_460 dl {
		min-height: 72px;
	}
	.container a.btn_460 {
		width:auto;
		display:block;
		padding: 15px 40px 15px 105px;
		background-position: 20px center;
	}
}

.container a.btn_920 {
	width:960px;
	box-sizing: border-box;
	display:inline-block;
	border-radius:10px;
	text-decoration: none;
	border: 1px solid #ccc;
	box-shadow: 5px 5px 10px rgb(0 0 0 / 10%);
	padding:20px 60px 20px 120px;
	background-repeat: no-repeat;
	background-position:30px center;
	position: relative;
	transition: 0.2s
}
.container a.btn_920:hover {
	box-shadow: none;
}
.container a.btn_920::after {
	content:"";
	position:absolute;
	right:20px;
	top:calc(50% - 5px);
	border-bottom:2px solid #aaa;
	border-right:2px solid #aaa;
	width:8px;
	height:8px;
	transform: rotate(-45deg);
}
.container a.btn_920 dl {
	text-align: left
}
.container a.btn_920 dl dt{
	font-weight:500;
	font-size:20px;
}
@media screen and (max-width: 640px) {
	.container a.btn_920 dl {
		min-height: 72px;
	}
	.container a.btn_920 {
		width:auto;
		display:block;
		padding: 15px 40px 15px 105px;
		background-position: 20px center;
	}
}
/* --- お問い合わせ ------------------------------------------- */
#contact .contact_wrap{
	display:flex;
	justify-content: space-between
}
#contact .contact_wrap > dl{
	width:270px;
	background-color: #eee;
	padding:20px 20px 85px;
	border-radius: 10px;
	position:relative;
	background:  linear-gradient(179deg, #eeeeee, #f5f5f5);
}
#contact .contact_wrap > dl dt{
	font-weight: 500;
	font-size:20px;
}
#contact .contact_wrap > dl .cont_detail{
	margin-top:10px;
}
#contact .contact_wrap > dl .cont_btn{
	position: absolute;
	bottom:0;
	left:0;
	width:100%;
	height:65px;
}
#contact .contact_wrap > dl .cont_btn a{
	margin:0 20px;
	display:block;
	text-align: center;
	background-color: #fff;
	text-decoration: none;
	padding:8px 0;
	border:1px solid #ccc;
	border-radius:5px;
	cursor: pointer;
	box-shadow: 3px 3px 6px rgb(0 0 0 / 10%);
	transition: 0.2s;
}
#contact .contact_wrap > dl .cont_btn a:hover{
	box-shadow:none;
}
#contact .contact_wrap > dl .cont_btn a::after{
	content:"";
	display:inline-block;
	border-bottom:2px solid #aaa;
	border-right:2px solid #aaa;
	width:6px;
	height:6px;
	transform: rotate(-45deg);
	margin-left: 10px;
	margin-bottom: 1px;
}
@media screen and (max-width: 640px) {
	#contact .contact_wrap{
		display:block;
	}
	#contact .contact_wrap > dl{
		width:auto;
	}
	#contact .contact_wrap > dl:nth-child(n+2){
		margin-top: 1em;
	}
	#contact .contact_wrap > dl dt{
		font-size:18px;
	}
	#contact .contact_wrap > dl .cont_btn a{
		padding: 10px 0;
	}
}
#contact .contact_wrap2{
	display:flex;
	justify-content: space-between;
	flex-wrap: wrap;

}
#contact .contact_wrap2 > dl{
	width:430px;
	padding:20px 20px 85px;
	border-radius: 10px;
	position:relative;
	background: #f2f2f2;
}
@media screen and (min-width: 641px) {
#contact .contact_wrap2 > dl:first-child{
	width:920px;
	margin-bottom:20px;
}
}
#contact .contact_wrap2 > dl dt{
	font-weight: 500;
	font-size:20px;
}
#contact .contact_wrap2 > dl .cont_detail{
	margin-top:10px;
}
#contact .contact_wrap2 > dl .cont_btn{
	position: absolute;
	bottom:0;
	left:0;
	width:100%;
	height:65px;
}
#contact .contact_wrap2 > dl .cont_btn a{
	margin:0 auto;
	display:block;
	width:410px;
	text-align: center;
	background-color: #fff;
	text-decoration: none;
	padding:8px 0;
	border:1px solid #ccc;
	border-radius:5px;
	cursor: pointer;
	box-shadow: 3px 3px 6px rgb(0 0 0 / 10%);
	transition: 0.2s;
}
#contact .contact_wrap2 > dl .cont_btn a:hover{
	box-shadow:none;
}
#contact .contact_wrap2 > dl .cont_btn a::after{
	content:"";
	display:inline-block;
	border-bottom:2px solid #aaa;
	border-right:2px solid #aaa;
	width:6px;
	height:6px;
	transform: rotate(-45deg);
	margin-left: 10px;
	margin-bottom: 1px;
}
@media screen and (max-width: 640px) {
	#contact .contact_wrap2{
		display:block;
	}
	#contact .contact_wrap2 > dl{
		width:auto;
	}
	#contact .contact_wrap2 > dl:nth-child(n+2){
		margin-top: 1em;
	}
	#contact .contact_wrap2 > dl dt{
		font-size:18px;
	}
	#contact .contact_wrap2 > dl .cont_btn a{
		padding: 10px 0;
		width:auto;
		margin:0 20px;
	}
}
/* --- Q&A ---------------------------------------------- */
#faq .faq_wrap {
	display:flex;
	justify-content: space-between;
}

#faq a.btn_460.faq {
	background-image: url(../d_common_v2/images/icon_support_faq.png);
}
#faq a.btn_460.chat {
	background-image: url(../d_common_v2/images/icon_support_shchat.png);
}
@media screen and (max-width: 640px) {
	#faq .faq_wrap {
		display:block;
	}
	#faq a.btn_460.chat {
		margin-top: 1em
	}
}

#faq a.btn_920.faq {
	background-image: url(../d_common_v2/images/icon_support_faq.png);
}
#faq a.btn_920.chat {
	background-image: url(../d_common_v2/images/icon_support_shchat.png);
}
@media screen and (max-width: 640px) {
	#faq .faq_wrap {
		display:block;
	}
	#faq a.btn_920.chat {
		margin-top: 1em
	}
}

/* --- 機種別サポート ------------------------------------------ */
#model .support-carrier {
	display: flex;
	flex-wrap: wrap;
}
#model .support-carrier > dl{
	width:300px;
	margin-left:30px;
	border:1px solid #ccc;
	border-radius:5px;
	box-sizing: border-box;
	padding:20px 20px;
	background-color: #fafafa;
}

#model .support-carrier > dl dt {
	text-align: center;
	height:30px;
	line-height: 30px;
	font-weight:600;
	vertical-align: middle;
	background-repeat: no-repeat;
	background-position: center center;
	text-indent: 100%;
	overflow: hidden;
}
#model .support-carrier > dl.docomo dt {
	background-image: url("../d_common_v2/images/logo_support_docomo.png");
	background-size: 106px;
}
#model .support-carrier > dl.softbank dt {
	background-image: url("../d_common_v2/images/logo_support_softbank.png");
	background-size: 144px;
}
#model .support-carrier > dl.au dt {
	background-image: url("../d_common_v2/images/logo_support_au.png");
	background-size: 65px;
}
#model .support-carrier > dl.ymobile dt {
	background-image: url("../d_common_v2/images/logo_support_ymobile.png");
	background-size: 120px;
}
#model .support-carrier > dl.uqmobile dt {
	background-image: url("../d_common_v2/images/logo_support_uqmobile.png");
	background-size: 142px;
}
#model .support-carrier > dl.rakuten dt {
	background-image: url("../d_common_v2/images/logo_support_rakuten.png");
	background-size: 149px;
}
#model .support-carrier > dl.other dt {
	text-indent: 0;
}
#model .support-carrier > dl select{
	width:100%;
	border:1px solid #ccc;
	padding:5px;
	margin-top:15px;
	cursor: pointer;
	outline: none;
	font-size:0.875em;
	background-color: #fff;
}

@media screen and (min-width: 641px) {
	#model .support-carrier > dl:nth-child(3n+1){
		margin-left:0;
	}
	#model .support-carrier > dl:nth-child(n+4){
		margin-top:30px;
	}
	.carrier_list{display: none;}
	.no-carrier {display:none;}
}
@media screen and (max-width: 640px) {
	#model .support-carrier {
		display: block;
	}
	#model .support-carrier > dl{
		width:auto;
		margin-left:0;
	}
	#model .support-carrier > dl:nth-child(n+2){
		margin-top: 1em;
	}
	#model .support-carrier > dl select{
		font-size:14px
	}
	.carrier_list{
		border-left:1px solid #ccc;
		border-top:1px solid #ccc;
		display:flex;
		flex-wrap: wrap;
		margin-bottom: 40px;
		position: relative;
	}
	.carrier_list::before,
	.carrier_list::after{
		content:"";
		position: absolute;
		bottom:-28px;
		width:18px;
		height:4px;
		border-top:6px solid #eee;
		border-bottom:6px solid #eee;
	}
	.carrier_list::before{
		right:50%;
		transform: skewY(30deg)
	}
	.carrier_list::after{
		left:50%;
		transform: skewY(-30deg)
	}
	.carrier_list li{
		box-sizing: border-box;
		width:50%;
		text-align: center;
		font-size:15px;
		font-weight: 500;
		border-right:1px solid #ccc;
		border-bottom:1px solid #ccc;
		padding:12px 5px 12px;
		min-height: 35px;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
	}
	.carrier_list li:last-child{
		width:100%;
	}
	.carrier_list li.active{
		background-color: #aaa;
		color:#fff;
	}
	.carrier_list li.active::after{
		border-color: #fff transparent transparent transparent;
	}
	.no-carrier {
		border:1px solid #ccc;
		text-align: center;
		padding:30px;
		border-radius:5px;
		background-color: #fafafa;
		color:#666;
		font-size:15px;
		font-weight:500;
	}
	.support-carrier > dl:not(.active){display: none;}

}
/* --- お知らせ --------------------------------------------- */

/* 重要なお知らせ*/
#infomation .important_news > li{
	border:1px solid #ccc;
	padding:15px 35px;
	font-size:14px;
}
#infomation .important_news > li:nth-child(n+2){
	margin-top:1em;
}
#infomation .important_news > li p:nth-child(n+2){
	margin-top:1em;
}
#infomation h3 {
	font-size:18px;
	font-weight:500;
	margin:1.5em auto 0.5em;
}
@media screen and (max-width: 640px) {
	#infomation .important_news > li{
		padding:15px 20px;
	}
}
/*サポートに関するお知らせ*/
@media screen and (min-width: 641px) {
	.list__info .list__info--date {
		padding: 1em 0 1em 0;
		width: 10em;
	}
	.list__info .list__info--link{
		padding: 1em 0 1em 10em;
	}
}
@media screen and (max-width: 640px) {

	#infomation .info_area > div {
		border:1px solid #ccc;
		border-top:none;
	}
	#infomation .info_area > div:first-child {
		margin-top:1em;
		border-top:1px solid #ccc;
	}
	#infomation .info_area > div h3 {
		margin-top:0;
		background: linear-gradient(180deg, #eee ,transparent 30px);
		padding:10px 15px;
		
	}
	#infomation .list__info{
		padding:0 15px;
	}

}
/* 一覧を見る */
#infomation .toList{
	text-align: right;
	margin:1.5em 0 0;
}
#infomation .toList a{
	font-size:0.875em;
	text-decoration: none;
	border-radius:5px;
}
#infomation .toList a::after{
	content:"";
	display:inline-block;
	height:5px;
	width:5px;
	border-bottom:2px solid;
	border-right:2px solid;
	margin-left: 10px;
	transform: translateY(-1px) rotate(-45deg);
		
}
@media screen and (max-width: 640px) {
	#infomation .toList{
		margin-right: 15px;
		margin-bottom: 15px;
	}
}

/* --- OSV ---------------------------------------------- */
#osv {
	margin-top: 50px;
}
#faq .faq_wrap > a dl.faq {
	background-image: url(../d_common_v2/images/icon_support_faq.png);
}
#faq .faq_wrap > a dl.chat {
	background-image: url(../d_common_v2/images/icon_support_shchat.png);
}
#osv .osv_btn {
	margin-top:2em;
	display:flex;
	justify-content: space-between;
}

@media screen and (max-width: 640px) {
	#osv .osv_btn {
		display:block;
	}
	#osv .osv_btn a.btn_460.dev {
		margin-top: 1em
	}
}

#osv .osv_btn a.btn_460.vup {
	background-image: url(../d_common_v2/images/icon_support_osverup.png);
}

#osv .osv_btn a.btn_460.dev {
	background-image: url(../d_common_v2/images/icon_support_dev.png);
}

/* --- ガイド ---------------------------------------------- */

/*ガイドバナー*/
#guide {
	margin-top:5em;
	background-color: #f2f2f2;
	padding:40px 0;
}
#guide .guide_bnr{
	margin:auto;
	display:flex;
	justify-content: center;
	flex-wrap: wrap;
	
	
}
#guide .guide_bnr li{
	width:310px;

}
#guide .guide_bnr li a{
	display: inline-block;
	text-decoration: none;
}
#guide .guide_bnr li p{
	font-size:14px;
	line-height: 1.5;
	padding: 0.5em;
	border:1px solid #ccc;
	border-top:0px;
	background-color: #fff;
}
@media screen and (min-width: 641px) {
	#guide .guide_bnr li:nth-child(n+2){
		margin-left: 15px;
	}
	/*#guide .guide_bnr li:nth-child(n+3){
		margin-top: 20px;
	}*/
}
@media screen and (max-width: 640px) {
	#guide {
		padding:30px 0;
	}
	#guide .guide_bnr li{
		margin:1em auto 0;
		width:auto;
	}
	#guide .guide_bnr li:first-child{
		margin-top:0;
	}
	#guide .guide_bnr li a{
		display:flex;
	}
	#guide .guide_bnr li a > div,
	#guide .guide_bnr li a > p {
		width:50%;
		display:flex;
		align-items: center;
	}
	#guide .guide_bnr li a > div{
		background-color: #125FAD;
		width:50%
	}
	#guide .guide_bnr li:nth-child(1) a > div{
		    background: linear-gradient(180deg, #0180d4 50%, #5196e2 50%);
	}
	#guide .guide_bnr li:nth-child(2) a > div{
		    background: linear-gradient(180deg, #7ccef4 50%, #125fad 50%);
	}
	#guide .guide_bnr li:nth-child(3) a > div{
		    background: linear-gradient(180deg, #2851ac 50%, #3e6dca 50%);
	}
	#guide .guide_bnr li a > p{
		font-size:13px;
		border:1px solid #ccc;
		border-left:0px;
		width:50%;
	}
}

/* --- 他追加情報 ------------------------------------------ */

#additional{
	font-size:15px;
	margin-top:5em;
	margin-bottom:5em;
}
#additional h3 {
	font-size:18px;
	font-weight:500;
	margin:2em auto 0.5em;
}
#additional p {
	margin-top: 1em;
}
#additional ul {
	margin-top: 0.5em;
}
#additional li{
	margin-top: 1em;
	
}
#additional ul.list > li {
	text-indent: -1em;
	padding-left: 1em;
}
#additional ul.list .listnote {
	text-indent: 0;
	font-size:0.875em;
	margin-top:1em;
	color:#666
}
@media screen and (max-width: 640px) {
	#additional{
		font-size:15px;
		margin-top:3em;
	}
}

/* --- ぱんくず ------------------------------------------ */
.breadcrumb_nav{
	max-width:1245px;
	margin:100px auto 0;
	padding:0 1em;
}
.breadcrumb_nav a {
	text-decoration: none;
	color:#9d9d8f;
	font-size:13px;
}
.breadcrumb_nav a:last-child {
	color:#000;
}
.breadcrumb_nav a + a::before{
	display:inline-block;
	width: 1.4em;
	height: 1px;
	content: "";
	background-color: #9d9d8f;
	margin:0 0.5em;
	transform: translateY(-0.3em) rotate(-45deg);
}