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

#mainvisual {
	margin-top:99px;
	position:relative;
}

#main_slide {
	position:relative;
}

#main_slide:before {
  content: "";
  display: block;
  background: rgba(0,0,0,0.5);
  width: 100%;
  height: 980px;
  position: absolute;
  top: 0;
  z-index:1;
}

#main_slide span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit- transform: translateY(-50%) translateX(-50%);
    margin: auto;
    display: inline-block;
	z-index:2;
	width:79%;
	text-align:center;
}

#main_slide span img {
	width:100%;
	max-width:1512px;
	height:auto;
}

@media (max-width: 980px) {
#mainvisual {
	margin-top:60px;
}

#main_slide span {
	width:94%;
}

}

@media (max-width: 680px) {
#main_slide ul {
	height: 600px !important;
}

#main_slide ul li img {
	height:600px !important;
}

#main_slide span {	 
	top: 44%;
	transform: translateY(-44%) translateX(-50%);
	-webkit- transform: translateY(-44%) translateX(-50%);
}
}

h2.title01 {
	position:relative;
	text-align:center;
	font-size:clamp(24px, 2.4vw, 36px);
	font-weight:700;
	color:#FFF;
	margin-bottom:12rem;
    display: flex;
    align-items: center;
}

h2.title01 span {
	z-index:1;
}

h2.title01:before,
h2.title01:after {
    content: "";
    height: 1px;
    flex-grow: 1;
    background-color: #FFF;
}

h2.title01:before {
    margin-right: 11%;
}

h2.title01:after {
    margin-left: 11%;
}

h2.title01 span:before {
    display: block;
    content: attr(data-eng);
    font-family: "Oswald", sans-serif;
    font-size: clamp(40px, 6vw, 100px);
    font-weight: normal;
    color: rgba(255,255,255,0.2);
    line-height: 1;
    z-index: -1;
	
	/*中央*/
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	-webkit- transform: translateY(-50%) translateX(-50%);
	margin: auto;
	display:inline-block;
}

h2.title02 {
	position:relative;
	font-size:clamp(24px, 2.4vw, 36px);
	font-weight:700;
	color:#054397;
	margin-bottom:4.5rem;
}

h2.title02 span:before {
    display: block;
    content: attr(data-eng);
    font-family: "Oswald", sans-serif;
    font-size: clamp(40px, 6vw, 100px);
    font-weight: normal;
    color: #f2f4f8;
    line-height: 1;
    z-index: -1;
	width: 200%;
	bottom:0;
	
	/*中央*/
	position: absolute;
	display:inline-block;
}

@media (max-width: 980px) {
h2.title01 {
	margin-bottom:3rem;
}

h2.title02 {
	margin-bottom:3rem;
}


}

/* ==========================
   買取品目
========================== */

#index01 {
	background:url(../../images/bg_ptn01.jpg) repeat;
	padding-top:15rem !important;
}

#index01 ul{
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 30px;
	margin: 60px 0;
	padding: 0;
	list-style: none;
}

#index01 li{
	background: #fff;
	overflow: hidden;
	box-shadow: 0 5px 15px rgba(0,0,0,.08);
	transition: .3s;
	position:relative;
}

#index01 li:hover{
	transform: translateY(-5px);
	box-shadow: 0 10px 25px rgba(0,0,0,.15);
}

#index01 figure{
	margin: 0;
	aspect-ratio: 1 / 1;
	overflow: hidden;
}

#index01 figure a{
	display: block;
	width: 100%;
	height: 100%;
}

#index01 figure img{
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	transition: transform .4s;
}

#index01 li:hover figure img{
}

#index01 .box01{
	width:100%;
	position:absolute;
	bottom:0;
	background: rgba(0,0,0,0.8);
	padding: 1.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

#index01 .box01 h3{
	font-size: clamp(14px, 1.2vw, 16px);
	font-weight: 500;
	color:#FFF;
	line-height: 1.3;
}

#index01 .box01 h3 a{
	color: inherit;
	text-decoration: none;
}

/* ---------- タブレット ---------- */

@media (max-width:1280px){

	#index01 ul{
		grid-template-columns: repeat(4, 1fr);
		gap: 25px;
	}

}

/* ---------- タブレット ---------- */

@media (max-width:980px){
#index01 {
	background: url(../../images/bg_ptn01.jpg) repeat;
	padding-top: 7.5rem !important;
}

#index01 ul{
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-bottom:0;
}

}

/* ---------- スマホ ---------- */

@media (max-width:680px){

	#index01 ul{
		grid-template-columns: repeat(2, 1fr);
		gap: 2px;
		background:#FFF;
		margin-top:4.5rem;
	}

	#index01 .box01{
		padding:7.5px;
	}

}

/* ---------- 小型スマホ ---------- */

@media (max-width:480px){
	#index01 .box01 h3{
	}
}


#index02 .base{
    display:flex;
    align-items:stretch;
    gap:4rem;
}

/* --------------------
   見出し
-------------------- */
#index02 h2{
    width:min(247px,25vw);
    aspect-ratio:1/1;
    flex-shrink:0;
    margin:0;
	background:#054397;
	position:relative;
	transition: .3s;
}

#index02 h2:hover {
	transform: translateY(-5px);
}

#index02 h2 a{
    display:flex;
    justify-content:center;
    align-items:center;
    width:100%;
    height:100%;
    text-align:center;
    box-sizing:border-box;
	color:#FFF;
}

#index02 h2 span {
	font-weight:500;
	position:relative;
	top: -9%;
}

#index02 h2 span:before {
    display: block;
    content: attr(data-eng);
    font-family: "Oswald", sans-serif;
    font-size: clamp(24px, 3vw, 48px);
    font-weight: normal;
    line-height: 1;
	
	/*中央*/
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	-webkit- transform: translateX(-50%);
	bottom: -280%;
	margin: auto;
	display:inline-block;
}



/* --------------------
   一覧
-------------------- */

#main #primary section#index02 {
	padding-bottom:0;
}

#index02 ul{
    flex:1;
    margin:0;
    padding:0;
    list-style:none;
    display:flex;
    flex-direction:column;
    border-top:1px solid #ddd;
}

#index02 li{
    display:flex;
    align-items:center;
    gap:2rem;
    padding:2rem;
    border-bottom:1px solid #ddd;
    flex:1;
}

#index02 .article-date{
    flex-shrink:0;
    width:7.5em;
}

#index02 .article-date time {
	font-size:clamp(16px, 1.4vw, 20px);
}

#index02 h3{
    margin:0;
    line-height:1.6;
    flex:1;
}

#index02 h3 a{
    display:block;
    color:inherit;
    text-decoration:none;
	font-size:clamp(15px, 1.2vw, 16px);
}

/* --------------------
   Responsive
-------------------- */
@media (max-width:980px){}

@media (max-width:680px){



#index02 .base{
	display:block;
}

#index02 h2{
	width:100%;
	height:100px;
	margin:0 auto 3rem;
}

#index02 h2 a {
}

#index02 h2 span {
  top: -15%;
}

#index02 h2 span::before {
  bottom: -160%;
}

#index02 li{
	display:block;
	padding:2rem;
}

#index02 .article-date{
	display:block;
	width:auto;
	margin-bottom:.5rem;
}


}



.section_wrapper01 {
	background:url(../../images/index/index04_bg.jpg) no-repeat bottom center;
	background-size:cover;
}

.section_wrapper01 h2.title01 {
	color:#054397;
}

.section_wrapper01 h2.title01 span:before {
    color: rgba(255,255,255,0.4);
}

.section_wrapper01 h2.title01:before,
.section_wrapper01 h2.title01:after {
    background-color: #054397;
}

.section_wrapper01 h2.title01:before {
    margin-right: 13%;
}

.section_wrapper01 h2.title01:after {
    margin-left: 13%;
}


#index03 .column-outside-left {
  flex:1;
  margin-left:calc(50% - 50vw);
  margin-right:4%
}

#index03 .column-outside-left img {
  width:100%;
  height:auto
}

#index03 p {
	font-size:clamp(15px, 1.2vw, 16px);
	margin-bottom:4.5rem;
	line-height:2.2;
}

#index03 .detail_btn01 {
}

#index03 .detail_btn01 a {
	display:inline-block;
	background:#fff;
	border-radius:100px;
	padding:1.5rem 10% 1.8rem 10%;
	text-align:center;
	text-decoration:none;
	font-size:clamp(16px, 1.5vw, 18px);
	border:1px solid #054397;
	position:relative;
	transition: .3s;
}

#index03 .detail_btn01 a:hover {
	transform: translateX(5px);
}

#index03 .detail_btn01 a:after {
  content: "";
  display: inline-block;
  background: url(../../images/icon_d-arrow.svg) no-repeat center center;
    background-size: auto;
  background-size: cover;
  width: 13px;
  height: 15px;
  position: absolute;
  right: 2.5rem;
  top: 2rem;
}


@media (max-width: 980px) {
#index03 .box1600.ai-center {
	-webkit-align-items: flex-start;
	align-items: flex-start;
}
}

@media (max-width: 680px) {
#index03 h3 {
	margin-bottom:2rem;
}

#index03 .column-outside-left {
	width:100%;
	flex:inherit;
	margin-left:inherit;
	margin-right:inherit;
    margin-bottom: 3rem;
}

#index03 .w55 {
	width:100%;
}

#index03 .detail_btn01 a {
  padding: 1.3rem 18% 1.5rem 18%;
}

#index03 .detail_btn01 a:after {
  top: 1.7rem;
}



}

#main #primary section#index04 {
	padding-top:24rem;
	padding-bottom:15rem;
}

#index04 dl dt {
	margin-bottom:2rem;
}

#index04 dl dd h3 {
	text-align:center;
	font-weight:500;
	margin-bottom:1.5rem;
	color:#054397;
	font-size:clamp(20px, 1.8vw, 24px);
}

#index04 dl dd p {
	line-height:2;
}

@media (max-width: 980px) {
#main #primary section#index04 {
  padding-top: 9rem;
  padding-bottom: 3rem;
}
}


@media (max-width: 680px) {
#index04 dl.w32 {
	width:100%;
	max-width:470px;
	margin:0 auto 3rem auto;
}
}

.line_hr {
	text-align:center;
    display: flex;
    align-items: center;
}

h2.title01 span {
	z-index:1;
}

.line_hr:before,
.line_hr:after {
    content: "";
    height: 1px;
    flex-grow: 1;
    background-color: #054397;
}

.line_hr:before {
    margin-right: 1.5%;
}

.line_hr:after {
    margin-left: 1.5%;
}

#main #primary section#index05 {
	padding-bottom:24rem;
}

@media (max-width: 768px) {
#main #primary section#index05 {
	padding-bottom:9rem;
}

#main #primary section#index05 ul li.w49 {
	width:100%;
	margin-bottom:2rem;
}

}