@charset "utf-8";
/* page
-----------------------------------------------*/
.contentsMain h1 {
	padding: 0;
	margin: 0;
}
.contentsTit01 {
	margin-bottom: 15px;
}
h3.topStit{
	margin:25px 0 15px;
}
.offerLayout01{
margin:15px 0 0 0;
padding:0;
width:691px;
clear:both;
}
.offerLayout01Left{
margin:0;
padding:0;
width:320px;
float:left;
padding-right:25px;
border-right:1px dotted #ccc;
}
.offerLayout01Right{
margin:0;
padding:0;
width:320px;
float:right;
}
.offerLayout01 h3{
	margin-top:15px;
}
.offerLayout01 p{
	margin-top:10px;
}
.contentsLeft p.offerLink01 a{
margin:0;
padding:0 0 0 15px;
background:transparent url(../../../common/images/arrow02.gif) no-repeat 0 1px;
}
.offerLayout02{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	column-gap: 23px;
	row-gap: 15px;
	width:691px;
	margin:0;
	padding:0;
}
.offerLayout02Left,
.offerLayout02Right{
padding:0;
}
.offerLayout02 h3{
margin:10px 0 0 0;
padding:0 0 0 10px;
background:transparent url(../../../common/images/arrow01.gif) no-repeat 0 5px;
font-size:120%;
clear:both;
}
.contentsLeft .offerLayout02 p{
margin:10px 0 0 0;
padding:0;
clear:both;
}
.offerLayout03{
margin:15px 0 0 0;
padding:0;
width:691px;
clear:both;
}
.offerLayout03Left{
margin:0;
padding:0;
width:153px;
float:left;
}
.offerLayout03Right{
margin:0 0 0 26px;
padding:0;
width:153px;
float:left;
}
.offerLayout03 h3{
margin:5px 0 0 0;
padding:0 0 0 10px;
background:transparent url(../../../common/images/arrow01.gif) no-repeat 0 5px;
font-size:100%;
font-weight:normal;
clear:both;
}
.offerLayoutIndexBan{
	margin:15px 0 0 0;
	padding:0;
	width:691px;
	clear:both;
}
.offerLayoutIndexBan ul{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
	margin:0;
	padding:0;
	list-style:none;
}
.offerLayoutIndexBan li{
	padding:0;
	margin: 0;
}
.offerLayoutIndexBan li.rightEnd{
	margin:0 0 15px;
}
.contentsLeft p.offerLink02{
margin:0;
padding:15px 0 0 0;
}
.contentsLeft p.offerLink02 a{
margin:0;
padding:0 0 0 15px;
background:transparent url(../../../common/images/arrow02.gif) no-repeat 0 1px;
}
.offerRelation{
margin:15px 0 0 10px;
padding:0;
width:671px;
clear:both;
}
.offerRelationLeft{
margin:0;
padding:0;
width:145px;
float:left;
}
.offerRelationRight{
margin:0 0 0 30px;
padding:0;
width:145px;
float:left;
}
.offerRelationImg{
margin:0;
padding:0;
text-align:center;
clear:both;
}
.offerRelation h3{
margin:20px 0 0 0;
padding:0;
font-size:120%;
clear:both;
}
.offerRelation h3 a{
margin:0;
padding:0 0 0 10px;
background:transparent url(../../../../common/images/arrow01.gif) no-repeat 0 5px;
clear:both;
}
.offerRelation p{
margin:10px 0 0 0;
padding:0;
clear:both;
}

@media screen and (max-width: 900px) and (min-width: 768px) {
	.contentsMain h1 img {
		width: 100%;
		height: auto;
	}
	.offerLayout02 {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		gap: 10px;
		width: auto;
	}
	.offerLayout02Left,
	.offerLayout02Right {
		width: auto;
		float: none;
	}
	/* .offerLayout02Right {
		margin: 15px 0 0;
	} */
	.offerLayout02Left img,
	.offerLayout02Right img {
		width: 100%;
		height: auto;
	}
}
.spOnly {
	display: none;
}

@media screen and (max-width: 767px) {
  .pcOnly {
		display: none;
	}
	.spOnly {
		display: block;
	}
  .mainBox {
		padding: 0 10px;
	}
	.spTtl {
		padding: 35px 20px;
		background: #fff;
		border-top: solid 3px #1B558C;
		border-bottom: solid 1px #d9d9d9;
		font-size: 20px;
		font-weight: bold;
	}

	.contentsLeft p.contentsLead {
		width: auto;
	}

	.offerLayout02 {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 10px;
		width: auto;
	}
	.offerLayout02Left img,
	.offerLayout02Right img {
		width: 100%;
		height: auto;
	}

	h3.topStit img {
		width: 100%;
		height: auto;
	}

	.offerLayoutIndexBan,
	.offerRelation {
		width: auto;
	}
	.offerLayoutIndexBan ul {
		grid-template-columns: 1fr;
		gap: 8px 0;
	}
	.offerLayoutIndexBan li img {
		width: 100%;
		height: auto;
	}
	.offerRelation {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 10px;
	}
	.offerRelationLeft,
	.offerRelationRight {
		width: auto;
		float: none;
		margin: 0;
	}
}

.catalog-bnr {
	margin: 40px 0;
}
.catalog-bnr a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	background: #00afdd;
	padding: 24px;
	color: #fff;
	font-weight: bold;
	transition: .3s cubic-bezier(.4, .4, 0, 1);
}
.catalog-bnr a .left h2 {
	margin-bottom: 12px;
	font-size: 20px;
	line-height: 1.2;
}
.catalog-bnr a .left p {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
}
.catalog-bnr a .left p.note {
	font-size: 12px;
	font-weight: normal;
}
.catalog-bnr a .left .catalog_btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: fit-content;
	padding: 12px 24px;
	margin: 12px 0 4px;
	background: #003459;
	border-radius: 4px;
	font-size: 14px;
	line-height: 1.2;
}
.catalog-bnr a .left .catalog_btn span {
	position: relative;
	width: 7px;
	height: 7px;
	transition: .3s cubic-bezier(.4, .4, 0, 1);
}
.catalog-bnr a .left .catalog_btn span::after {
	content: '';
	position: absolute;
	width: 7px;
	height: 7px;
	border-top: solid 2px #fff;
	border-right: solid 2px #fff;
	rotate: 45deg;
}
.catalog-bnr a .right img {
	width: 266px;
}
.catalog-bnr a:hover {
	filter: brightness(.8);
	text-decoration: none;
}
.catalog-bnr a:hover .left .catalog_btn span {
	translate: 3px 0;
}
@media screen and (max-width: 960px) {
	.catalog-bnr a {
		flex-direction: column;
		gap: 16px;
		padding: 24px;
	}
}
@media screen and (max-width: 767px) {
	.catalog-bnr a {
		padding: 16px;
	}
	.catalog-bnr a .left h2 {
		font-size: 18px;
	}
	.catalog-bnr a .left p {
		font-size: 14px;
		line-height: 1.3;
	}
	.catalog-bnr a .left .catalog_btn {
		justify-content: space-between;
		width: 100%;
		padding: 12px 16px;
	}
	.catalog-bnr a .right img {
		width: 100%;
	}
}