@charset "utf-8";

/* page
-----------------------------------------------*/
.contentsImg h1 {
	padding: 0;
	margin: 0;
}

.offerLayout{
margin:15px 0 0 0;
padding:0;
width:691px;
clear:both;
}
.offerLayout p{
margin:10px 0 0 0;
padding:0;
clear:both;
}

.offerLayoutImg{
margin:15px 0 0 0;
padding:0;
clear:both;
}

.offerLayout p.offerLayoutTxt{
margin:10px 0 0 0;
padding:0;
clear:both;
}

.offerLayoutTxt h3{
margin:0;
padding:0;
font-size:120%;
clear:both;
}


.offerLayout01{
margin:15px 0 0 0;
padding:0;
width:691px;
clear:both;
}

.offerLayout01Left{
margin:0;
padding:0;
width:320px;
float:left;
}

.offerLayout01Right{
margin:0;
padding:0;
width:320px;
float:right;
}

.offerLayout01Img{
margin:15px 0 0 0;
padding:0;
width:320px;
clear:both;
}

.offerLayout01Txt{
margin:10px 0 0 0;
padding:0;
width:320px;
clear:both;
}

.offerLayout01Txt h3{
margin:0;
padding:0;
font-size:120%;
clear:both;
}

.contentsLeft .offerLayout01 p{
margin:10px 0 0 0;
padding:0;
clear:both;
}

.contentsLeft p.offerGalleryLead{
margin:20px 0 0 10px;
padding:0 0 0 20px;
background:transparent url(../images/icon_zoom.gif) no-repeat 0 2px;
clear:both;
}

.offerGallery{
margin:0 0 0 0;
padding:0;
}

.offerGallery ul{
margin:0;
padding:0 0 0 2px;
list-style:none;
}
.offerGallery li{
margin:0;
padding:10px 9px;
display:inline;
float:left;
height:102px;
}

.contentsLeft p.offerGalleryLink{
margin:0 0 0 10px;
padding:10px 0 0 15px;
background:transparent url(../../../../common/images/arrow02.gif) no-repeat 0 13px;
clear:both;
}

.contentsLeft p.offerIconLink{
margin:10px 0 0 0;
padding:0;
clear:both;
}

.contentsLeft p.offerIconLink a{
margin:0;
padding:0 0 0 15px;
background:transparent url(../../../../common/images/arrow02.gif) no-repeat 0 0;
clear:both;
}

.offerPlan{
margin:25px 0 0 10px;
padding:20px;
width:631px;
background:#F7F7F7;
clear:both;
}
.offerPlanTit{
margin:0;
padding:0;
width:631px;
clear:both;
}
.offerPlan h4{
margin:0;
padding:0;
font-size:120%;
width:178px;
float:left;
}
.contentsLeft p.offerPlanLink{
margin:10px 0 0 15px;
padding:2px 2px 2px 12px;
background:#DFDFDF url(../../../../common/images/arrow01.gif) no-repeat 5px 50%;
width:10.5em;
float:left;
}
.contentsLeft p.offerPlanLink a{
margin:0;
padding:3px 20px 3px 3px;
background:transparent url(../images/icon_pdf.gif) no-repeat 100% 3px;
}
.contentsLeft p.offerPlanTxt{
margin:0;
padding:10px 0 0 0;
clear:both;
}

.offerPlanImg{
margin:20px 0 0 0;
padding:0;
width:631px;
text-align:center;
clear:both;
}

.contentsLeft .offerPlanImg p{
margin:0;
padding:0;
}
.contentsLeft .offerPlanZoom{
text-align:center;
}

.contentsLeft .offerPlanZoom a{
margin:0;
padding:2px 0 2px 18px;
background:transparent url(../images/icon_zoom.gif) no-repeat 0 0;
}

/* �֘A���i
-----------------------------------------------*/
.offerRelation{
margin:20px 0 0 10px;
padding:15px 30px 15px 15px;
width:624px;
border:1px solid #CCC;
clear:both;
}
.offerRelationLeft{
	float:left;
}
.offerRelationLeft h4{
	margin:0;
	padding:0 0 4px;
}
.offerRelationLeft ul{
	margin:0 0 0 10px;
	padding:0;
	list-style:none;
	font-size:120%;
}
.offerRelationLeft li{
	margin:6px 0 0;
	padding:0 0 0 16px;
	list-style:none;
	background:url(../images/icon_bluedot.jpg) no-repeat 0 2px;
}
.offerRelationLeft p{
	margin:10px 0 0 10px;
}
.offerRelationRight{
	float:right;
}

/**/
.mt30{
	margin-top:30px;
}

.spOnly {
	display: none;
}

@media screen and (max-width: 750px) {
	.spOnly {
		display: block;
	}
	.pcOnly {
		display: none;
	}
	.mainBox {
		padding: 0 10px;
	}
  .clear {
    display: none;
  }
	
	.productNavi,
	.contentsImg,
	.contentsLeft,
	.contentsBox,
	.footstepBox {
		width: auto;
	}
  .contentsTit02 {
		background-size: 100% 100%;
	}
	.contentsImg {
    width: auto;
  }
	.contentsImg img {
		width: 100%;
		height: auto;
	}

	.offerLayout01Inner .txt,
  .offerLayout01Inner .img {
    width: auto;
  }
	.offerLayout,
  .offerLayout01 {
    width: auto;
    margin: 0;
  }
	.offerLayout {
		margin-top: 20px;
	}
	.offerLayoutTxt h3,
	.offerLayout01Txt h3 {
		position: relative;
		padding-left: 45px;
		font-size: 16px;
	}
	.offerLayoutTxt h3 span,
	.offerLayout01Txt h3 span {
		position: absolute;
		left: 0;
		display: inline-block;
		width: 36px;
		height: 36px;
		padding: 8px;
		margin-right: 10px;
		border: solid 1px #000;
		font-size: 20px;
		text-align: center;
	}
	.offerLayout01Txt h3 {
		line-height: 2.2;
	}
	.offerLayout01Txt h3 span {
		line-height: 1;
	}
	.offerLayoutImg img {
		width: 100%;
		height: auto;
	}
  .offerLayout01Inner {
    float: none;
    width: auto;
    margin-bottom: 30px;
  }
  .offerLayout01Left,
  .offerLayout01Right {
    float: none;
    display: flex;
    gap: 10px;
    flex-direction: column;
    width: auto;
    margin: 20px 0 30px;
  }
  .offerLayout01Img,
  .offerLayout01Txt {
    float: none;
    width: auto;
  }
  .offerLayout01Img img,
  .offerLayout01Inner .img img {
    width: 100%;
    height: auto;
  }
  .offerLayout01Txt h3 {
    margin: 0;
  }

	.offerPlan,
  .offerPlanImg {
    width: auto;
  }
	.offerPlanTit {
		width: auto;
	}
	.offerPlan h4 {
		width: 140px;
	}
	.offerPlan h4 img {
		width: 100%;
		height: auto;
	}
	.contentsLeft p.offerPlanLink {
		width: 150px;
		margin: 0 0 0 15px;
	}
	.contentsLeft p.offerPlanLink a {
		padding: 3px 16px 3px 3px;
		background-position: 100% 5px;
	}
	.contentsLeft p.offerPlanTxt img {
		width: 100%;
		height: auto;
	}
  .offerPlanLeft,
  .offerPlanRight,
  .offerPlanImg01Left,
  .offerPlanImg01Right,
  .offerPlanImg02Left,
  .offerPlanImg02Right {
    float: none;
    width: auto;
  }
  .offerPlanImg img {
    display: block;
		width: 100%;
		height: auto;
    margin: 0 auto;
  }
  .offerPlanImg01Right,
  .offerPlanImg02Right {
    padding: 10px 0 0 20px;
  }
  .offerPlanImg02Left img {
    width: 100%;
  }

	.offerMerit {
		width: auto;
	}
	.offerMeritLeft01,
	.offerMeritLeft {
		float: none;
		width: auto;
	}
	.offerMerit h4 img {
		height: auto;
	}
	.offerMerit p img {
		width: 100%;
		height: auto;
	}
	.offerMeritImg01,
	.offerMeritImg {
		float: none;
		margin: 10px auto;
	}
	.offerMeritImg01 img,
	.offerMeritImg img {
		display: block;
		margin: 0 auto;
	}
	.offerMeritLeftL,
	.offerMeritImgL2 {
		float: none;
		width: auto;
	}
	.offerMeritImgL2 img {
		width: 100%;
		height: auto;
	}
	.offerMerit .prPoint {
		width: auto;
	}

	#pickupArea {
		width: auto;
	}
	#pickupArea .detail {
		float: none;
	}
	#pickupArea .books img {
		width: 100%;
		height: auto;
	}
	#pickupArea .img {
		float: none;
		width: auto;
		margin: 15px auto 0;
	}

	#unithouseExample,
	#unithouseExample dl {
		width: auto;
	}
	#unithouseExample dl:not(:first-child) {
		margin-top: 40px;
	}
	#unithouseExample dt {
		float: none;
		margin: 0 auto 10px;
	}
	#unithouseExample dd {
		float: none;
		width: auto;
	}
	#unithouseExample dd h3 {
		height: auto;
		padding: 8px;
		background-size: 100% 100%;
	}

	#userVoiceArea,
	#userVoiceArea ul {
		width: auto;
	}
	#userVoiceArea li {
		float: none;
		display: block;
	}
	#userVoiceArea li img {
		display: block;
		width: 85%;
		height: auto;
		margin: 0 auto;
	}

	.offerGallery,
  .offerGallery ul {
    width: auto;
  }
  .offerGallery ul {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 20px;
  }
  .offerGallery li {
    float: none;
    width: calc(100% / 2 - 10px);
		height: auto;
    padding: 0;
    margin: 0;
  }
  .offerGallery li img {
    width: 100%;
    height: auto;
  }
  .offerFeatureImg img {
    width: 100%;
    height: auto;
  }
  .offerTable {
		width: auto;
    margin: 25px 0 0;
  }

  .offerRelation {
    display: flex;
    flex-wrap: wrap;
		flex-direction: column-reverse;
		justify-content: flex-start;
    gap: 20px;
    width: auto;
		padding: 15px;
    margin: 15px 0 0;
  }
  .offerRelationLeft {
    float: none;
    display: inline-block;
    width: auto;
    margin: 0;
  }
  .offerRelationRight {
    float: none;
    display: inline-block;
    width: auto;
    margin: 0 auto;
  }
	.offerRelation br {
		display: none;
	}

	.bottomTel-sp {
		margin: 0 15px 40px;
	}
}