@charset "utf-8";


/* common */
#contents section{
	margin-bottom:2em;
}

#contents > section > section,
#contents > div,
#contents > section > div,
#contents > dl,
#contents > section >dl{
	margin-left: 1em;
}

#contents section div > p,
#contents section div > div,
#contents section div > span,
#contents section div > dl{
	margin-left: 0;
}


#contents section > div.wrapper{
	margin-left: 1em;
}



@media (max-width: 640px){
	#contents > section > section,
	#contents > div,
	#contents section > div,
	#contents > dl,
	#contents > section >dl{
		margin-left:5px !important;
	}
}

/* list */

#contents ul{
	padding:0;
}

#contents li{
	margin-bottom:0.5em;
	margin-left:0;
}

#contents section > ul{
	margin-left:1em;
}

#contents section > ul.disc{
	margin-left:3em;
}

#contents section > ul > li > ul{
	margin:0.5em 1em 1em 1.5em;
}

#contents ul.disc > li > p{
	margin: 0;
}

#contents dl,
#contents dl dt,
#contents dl dd{
	margin:0;
	padding:0;
}

#contents dl dt{
	margin-bottom: 0.5em;
	font-weight: 400;
}

#contents section h3 ~ ul.disc{
	margin-left: 2.5em;
}

#contents section h3 ~ ul.disc > li{
	margin-bottom: 1em;
}

#contents section h3 ~ ul.disc li p{
	margin-left: 0;
}



@media (max-width: 640px){
	#contents section ul{
		margin-left:5px;
	}

	#contents section ul.disc,
	#contents section > ul.indent{
		margin-left:2em;
	}

}

/* txtlink textLink */

#contents a.textLink{
	background-position: 0 6px;
	
}

#contents ul.txtlink{
	margin-left:1.5em;
	margin-top: 0.5em;
}

#contents ul > li > ul.txtlink{
	margin-left: 4px;
}

#contents ul > li > ul.txtlink > li{
	margin-bottom: 0;
}

#contents ul > li > a.textLink,
#contents p > a.textLink{
	display: inline-block;
	margin: 0.5em 0 0 4px;
}

#contents .bnrLink{
	margin: 2em 0;
}

#contents .bnrLink a > img{
	display: block;
	margin: 1em;
}


/*20200804*btn*/

#contents div.btn{
	display:block;
	color: #000;
	margin-bottom:0.5em;
}

#contents .section > p + div.btn{
	margin-left: 1em;
	margin-bottom: 1.5em;
}

#contents div.btn a{
	display: block;
	width: 45%;
	background: url(/support/share/images/bg_mod-linkButton.jpg) repeat-x scroll left center;
	border: solid 1px #CCCCCC;
	border-radius: 5px;
	padding: 0.7em 1em;
	color: #000;
	margin: 10px 0;
}
#contents div.btn a:hover,
#contents div.btn a:active,
#contents div.btn a:focus{
	text-decoration:none;
	color:#000;
	opacity:0.7;
}
	
#contents .btn:hover,
#contents .btn:active,
#contents .btn:focus{
	text-decoration:none;
	opacity:0.7;
	color: #000;
}

#contents a span.textLink{
	background: url(/share/images/arrow_black.gif) no-repeat left .4em;
	padding-left:1em;
}

#contents a span.textLink.indent{
	margin-left: 1em;
}

@media (max-width: 640px){

	#contents div.btn a{
		width: auto;
		margin-right: 1em;
	}
}


/* p */
#contents div > p{
	margin-bottom: 0;
}
#contents p + p{
	margin-top:0.5em;
}

#contents p.indent{
	/* margin-left: 1em !important; */
}

#contents p > img{
	display: block;
	margin: 10px 0;
}

#contents .notice > p{
	margin-left: 0;
}

@media (max-width: 640px){
	#contents p.indent,
	#contents p + a.textLink{
		margin-left: 5px;
	}
}

/* h2 h3 */
#contents section h2{
	margin-top: 3em;
	/* font-size: 1.231em; */
}

#contents section h2.title{
    border-bottom: #000 solid 1px;
}

#contents h3{
	margin-bottom: 0.5em;
}

#contents h3 ~ p,
#contents h3 ~ div{
	margin-left: 1em !important;
}

#contents h3 ~ ul.annotation{
	margin-left: 2em;
	margin-top: 1.5em;
}

@media (max-width: 640px){
	
	#contents h2.title{
		padding-left:5px;
	}
}

/* annotation */

#contents .annotation{
	padding-left: 1em;
	text-indent: -1em;
}

#contents p.annotation,
#contents ul.annotation{
	margin-left:1em;
}

#contents ul.annotation li{
    margin-left: 0;
}

#contents ul > li > ul.annotation{
	margin:0.5em 1em 1em 0.5em;
}

#contents p + p.annotation{
	margin-top:0.5em;
	margin-bottom: 0.5em;
}

@media screen and (max-width: 640px){
	#contents p.annotation,
	#contents ul.annotation{
		margin-left:0.5em;
	}
}

/* image */

#contents img.icon{
	display: inline-block !important;
	padding-bottom: 3px;
}

#contents img.icon.top{
	vertical-align: top;
}

#contents img.maxImage{
	max-width: 100%;
	height: auto;
	padding-top: 1em;
}

#contents img.maxImage.onlymobile{
	display: none;
}


@media screen and (max-width: 640px){
	#contents img.maxImage.onlymobile{
		display: block !important;
	}
	
	#contents .bnrLink img{
		max-width: 300px;
		width: 100%;
	}
}

@media screen and (max-width: 360px){
	#contents img.maxImage.onlymobile{
		display: block !important;
		width: 270px;
		height: auto;
	}
}


/* other */
#contents .container{
	display: flex;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	flex-direction: row;
	-webkit-box-orient: horizontal;
  	-webkit-box-direction: normal;
  	-ms-flex-direction: row;
	justify-content: space-between;
	padding: 3em 0 2em 0;
	text-align: center;
	height: 300px;
	margin-left: 5em;
}

#contents .container .leftBox{
	border: 2px solid #ccc;
	padding: 30px 38px;
	position: relative;
	margin: 0;
	box-sizing: border-box;
}

#contents .container .leftBox p{
	border: 2px solid #ccc;
	background: #fff;
	padding: 0.5em;
	position: absolute;
	margin: 0;
	top: -20px;
	left: 30px;
	right: 30px;
}

#contents .container .rightBox{
	padding-top: 30px;
}

#contents .notice{
	margin-left: 1em;
}

#contents .bgColor{
	padding: 1em;
}

#contents .bgColor.gray{
	background-color: #f6f6f6;
	margin-left: 0;
}

#contents .bgColor.gray > p.annotation{
	margin-left: 0.75em;
}

@media screen and (max-width: 640px){
	#contents .container{
		flex-direction: column;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		height: auto;
		padding: 10px 0;
		margin: 3em 0 !important;
	}
	
	#contents .container .leftBox{
		padding: 30px 0;
	}
	
	#contents p > img.inner_aibo{
		max-width: 300px;
		width: 100%;
	}
	
	#contents .container .leftBox p{
		left: 20px;
		right: 20px;
		padding: 5px;
	}
}


/* aiboRepairForm */



[class*='step'] {
	margin-bottom: 30px;
}
.aiboRepairForm select {
	border: 1px solid #666;
	padding: 5px;
	font: inherit;
	width: 11em;
}
.aiboRepairForm input {
	font: inherit;
}
@media screen and (max-width: 767px){
	.aiboRepairForm select {
		width: 100%;
		box-sizing: border-box;
	}
}
.conditionBox {
	padding: 10px;
	border: 1px solid #000;
	margin: 1em;
}

#contents .main-form{ 
	margin: 2em 0;
	overflow: hidden;
	padding: 0;
}

#contents .main-form div.notice{
    margin-left: 0;
	}

#contents .main-form .bgColor{
	padding: 1em 0;
}

#contents .main-form .bgColor.gray{
	background-color: #f6f6f6;
	padding-left: 1em;
}

#contents .main-form .bgColor.white{
	background-color: #fff;
	margin-top: 1.5em;
}

#contents .main-form dl{
	margin-bottom: 2em;
	padding: 0;
}
#contents .main-form dl dt{
	font-size: 19px;
	font-weight: bold;
	margin-bottom: 1em;
}

#contents .main-form dl dd{
	margin-left: 0;
	margin-bottom: 0.5em;
}

#contents .main-form dl dd .notice_gray_b{
	padding: 1em !important;
	margin: 2em .5em 2em 0;
    background-color: #ffffff;
    border-color: #ff0000;
}

#contents .notice_gray_b.accent p{
	color:#ff0000;
	font-weight: bold;
}

#contents .main-form dl.step5 dd{
	margin-bottom: 1em;
}

#contents .main-form dl dd > p{
	margin-left: 0;
}
#contents .main-form dl dd > label ~ p,
#contents .main-form dl dd > label ~ a.textLink{
	margin-left: 1em;
}

#contents .main-form p a.textLink{
	display: inline;
	margin: 0 5px;
}

#contents .nextBtn{
	text-align: center;
	width: 285px;
	margin: 0 auto;
	font-size: 1em;
}

#contents .agreements input{
	background: none;
}

#contents p.check{
	text-align: center;
}

input[type="checkbox"]{
	vertical-align: middle;
	margin-right: 0.2em;
}

input[type="submit"]{
	color: #FFF;
	font-weight: bold;
	padding: 15px 30px;
	border-radius: 6px;
	background: #5787f4;
	width: 100%;
	box-shadow: 1px 2px #666;
}
input[type="submit"][disabled]{
	background: #abc4ff
}
input[type="submit"]:not([disabled]):hover,
input[type="submit"]:not([disabled]):focus{
	opacity: 0.8;
	transform: translate(2px, 1px);
	box-shadow: none;
}
input[type="submit"][disabled]:hover,
input[type="submit"][disabled]:focus{
	cursor: default;
}
@media screen and (max-width: 640px){
    #contents .main-form .bgColor.gray{
	padding: 0.5em;
	}
}

@media screen and (max-width: 365px){
	#contents .main-form div.notice{
	padding: 0.5em;
	}
}

/* 20200214 */

#contents .priceTbl{
	width: 90%;
	overflow: hidden;
}

#contents .priceTbl table{
	margin-left: 0;
	margin-bottom: 0.5em;
	width: 100%;
}

#contents .priceTbl table th,
#contents .priceTbl table td{
	border: 1px solid #D6CECC;
	background-color: #fff;
	color: #333;
}

#contents .priceTbl table thead th{
	background-color: #FFE4E8;
}

#contents .priceTbl table thead th:first-child{
	background-color: #fff !important;
}

#contents .priceTbl table thead th > span{
	width: 4em;
	display: inline-block;
}

#contents .priceTbl table tbody th{
	text-align: left;
}

#contents .priceTbl table tbody td{
	width: 20%;
	text-align: center;
	font-size: 14px;
}

#contents .priceTbl table + span.annotation.right{
	float: right;
}

@media screen and (max-width: 640px){
	#contents .priceTbl{
		width: 98%;
		margin-right: 0.5em;
	}
	#contents .priceTbl table,
	#contents .priceTbl table + span.annotation.right{
		font-size: 85%;
	}
	#contents .priceTbl table tbody td{
		width: 18%;
		text-align: center;
	}
	
	#contents .priceTbl table thead th > span{
		width: auto;
	}
}

/*20200218*/
#contents dl.info.notice{
	padding: 0;
    border: 1px solid #f00;
}
#contents dl.info dt,
#contents dl.info dd{
	padding: 1em;
	margin: 0;
}

#contents dl.info.notice > dt.bgColor{
	display: block;
	background-color: #FFE4E8;
	font-weight: bold;
	padding: 0.5em 0.5em 0.5em 1em;
	border-bottom: 1px dotted #D6CECC;
}


/* 20200601 none*/

#contents ul.none {
    list-style-type: none;
	margin-left: 1em;
}

#contents ul.none > li {
    margin-bottom: 0.5em;
}

#contents ul.none > li {
    margin-bottom: 0.5em;
}

#contents img.icon {
    display: inline-block !important;
    vertical-align: middle;
    padding-bottom: 2px;
}

#contents ul.annotation {
    padding: 0;
    margin: 0 0 0 1em;
}

#contents ul.annotation li {
    padding-left: 1em;
    text-indent: -1em;
    margin-bottom: 0.5em;
    font-size: 1em;
}

#contents ul.annotation li a.textLink{
	padding-left: 25px;
}

#contents ul.annotation li span.annotation{
	margin-left: 1em;
}





/* 20200601 packingArea*/

#contents .packingArea{
	margin: 0 0 1.5em 0;
}

#contents .packingArea ol{
	list-style: none;
	margin: 1em 0 0 0;
}

#contents .packingArea ol li{
	margin-bottom: 2em;
}

#contents .packingArea ol li > p:first-child{
	font-weight: bold;
	padding-left: 4em;
    text-indent: -4em;
}
#contents .packingArea ol li > p:first-child + p{
	margin-left: 5em;
}

#contents .annotation {
    display: inline-block;
    margin-top: 0.5em;
    padding-left: 1em;
    text-indent: -1em;
}

@media screen and (max-width: 640px){
	#contents .container{
		flex-direction: column;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		height: auto;
		padding: 10px 0;
		margin: 3em 0;
	}
	
	#contents .container .leftBox{
		padding: 30px 0;
	}
	
	#contents .container .leftBox p{
		left: 20px;
		right: 20px;
		padding: 5px;
		top: -20px;
	}
	#contents p > img.inner_aibo{
		max-width: 300px;
		width: 100%;
	}
	#contents .packingArea ol li > p:first-child + p{
		margin-left: 5px;
	}
	
}

/* 20210304 */
#contents h1.title {
    font-size: 22px;
}

#contents section h2.title {
    font-size: 19px;
}

#contents  {
    font-size: 16px;
}

/* 20210322 */
#contents .notice_b.text{
	float: right;
    width: 72%;
    font-size: 0.875em;
	margin: 0 10px 1.5em;
    padding: 6px 0 6px 10px;
	box-sizing: border-box;
}

#contents .bgColor dl.step2 dd select option:disabled {
   color: #bcbcbc;
}

@media (max-width: 640px){
	#contents .notice_b.text{
		float: none;
		width: 100%;
		margin-top: 1em;
		margin-left: 0;
	}
}

/* 20210507 */
#contents p.noticeA{
    border: 1px solid #f00;
    margin: 0 0 1em 1em;
    padding: 1em;
}
@media (max-width: 640px){
#contents p.noticeA{
    margin: 0 0 1em 0;
    }
#contents .nextBtn {
    width: 260px;
}    
}

/* 20221107 */
@media (max-width: 640px){
	input[type="submit"]{
		padding: 15px 0;
	}
}