@charset"UTF-8";

/* 
***********************************************************
* Copyright(C) CIDARIO Inc.
* URI:https://cidario.co.jp
* Editor:Hiromi Yoshino
***********************************************************
*/

/*sell-nav
========================================================================================================
*/
.sell-nav{
  width:100%;
  margin: 0 auto 60px auto;
}

.sell-nav ul{
  width:90%;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  padding: 0 0 60px 0;
  margin: 0 auto;
}

@media print, screen and (min-width:1100px) {
.sell-nav ul{
  padding: 0;
  margin: 0 auto;
  }
}

.sell-nav ul li{
  display: inline-block;
  border-left: 1px solid #CCC;
  border-right: 1px solid #CCC;
  text-align: center;
  padding: 3px 15px;
  margin: 5px 0 5px -1px;
}

@media print, screen and (min-width:768px) {
.sell-nav ul li{
  padding: 15px 30px;
  margin: 10px 0 10px -1px;
 }
}

@media print, screen and (min-width:1100px) {
.sell-nav ul li{
  padding: 15px 30px;
  margin: 10px 0 10px -1px;
  }
}

.sell-nav ul li a{
  font-size: 1.3rem;
  line-height: 1.5em;
}

@media print, screen and (min-width:768px) {
.sell-nav ul li a{
  font-size: 1.6rem;
 }
}

.sell-nav ul li a span{
  padding: 0 0 5px 0;
}

/*sell
========================================================================================================
*/

#sell{
  width:100%;
}

.sell-wrap01{
  background: linear-gradient(180deg, #EEE 0%, #EEE 100px, #FFF 100px, #FFF 100%);
  padding: 0 0 60px 0;
  margin: 0 auto;
}

@media print, screen and (min-width:768px) {
.sell-wrap01{
  background: linear-gradient(180deg, #EEE 0%, #EEE 325px, #FFF 325px, #FFF 100%); 
  padding: 0 0 100px 0;
  margin: 0 auto;
  }
}

.sell-wrap01 h3{
  width:90%;
  font-family: 'Noto Serif JP', serif;
  font-size: 2.0rem;
  font-weight: 600;
  font-style: italic;
  text-align: center;  
  line-height: 2.0em;
  margin: 40px auto;
}

@media print, screen and (min-width:768px) {
.sell-wrap01 h3{
  width:90%;
  max-width: 1200px;
  font-size: 3.0rem;
  margin: 80px auto;
 }
}

.sell-wrap01 h3 span{	
  font-size: 1.8rem;
}

@media print, screen and (min-width:768px) {
.sell-wrap01 h3 span{	
  font-size: 2.4rem;
  }
}

.sell-wrap01 figure{
  max-width: 1200px;
  margin: 0 auto;
}

.sell-wrap01 figure img{
  display: block;
  width:100%;
  height: 100%;
}

.sell-box {	
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  column-gap: 80px;
}

.sell-box01 div{	
  grid-row:2/3;
  grid-column: 1/2;
}
.sell-box01 figure{	
  grid-row:1/2;
  grid-column: 1/2;
}
.sell-box02 div{	
  grid-row:2/3;
  grid-column: 1/2;
}
.sell-box02 figure{	
  grid-row:1/2;
  grid-column: 1/2;
}


@media print, screen and (min-width:768px) {
.sell-box {	
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  column-gap: 80px;
 }

.sell-box01 div{	
  grid-row:1/2;
  grid-column: 2/3;
}
.sell-box01 figure{	
  grid-row:1/2;
  grid-column: 1/2;
}
.sell-box02 div{	
  grid-row:1/2;
  grid-column: 1/2;
}
.sell-box02 figure{	
  grid-row:1/2;
  grid-column: 2/3;
}
}

.sell-box div{	
  width:100%;
  margin: 0 auto 40px auto;
}

@media print, screen and (min-width:768px) {
.sell-box div{	
  width:100%;
  margin: 0 0 120px 0;
  }
}

.sell-box div p{	
 width:90%;
 max-width: 620px;
 line-height: 2.5em;
}

.sell-box01 div p{	
  margin: 0 auto;
}
.sell-box02 div p{	
  margin: 0 auto;
}

@media print, screen and (min-width:768px) {
.sell-box01 div p{	
  margin: 0 auto 0 0;
}
.sell-box02 div p{	
  margin: 0 0 0 auto;
  }
}

.sell-box01 div p + p{	
  margin: 40px auto 0 auto;
}
.sell-box02 div p + p{	
  margin: 40px auto 0 auto;
}

@media print, screen and (min-width:768px) {
.sell-box01 div p + p{	
  margin: 40px auto 0 0;
 }
.sell-box02 div p + p{	
  margin: 40px 0 0 auto;
 }
}

.sell-box figure{	
  width:100%;
  height: 280px;
  margin: 0 0 40px 0;
}
@media print, screen and (min-width:768px) {
.sell-box figure{	
  width:100%;
  height: 480px;
  margin: 0;
  }
}

.sell-box figure img{
  display: block;
  width:100%;
  height: 100%;
  object-fit: cover;
}

.sell-wrap01 ul.sell-btn-box{
  width:100%;
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 10px;
  margin: 0 auto;
}

@media print, screen and (min-width:768px) {
.sell-wrap01 ul.sell-btn-box{
  width:100%;
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 20px;
  margin: 0 auto;
 }
}

@media print, screen and (max-width:768px) {
.sell-wrap01 ul.sell-btn-box a.btn03{
  width:170px;
  height: 40px;  
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  }
  .sell-wrap01 ul.sell-btn-box a.btn03 span{
    font-size:1.4rem; 
  }
}

.sell-wrap02{
  width:100%;
  padding: 60px 0;
  margin: 0 auto;
}

@media print, screen and (min-width:768px) {
.sell-wrap02{
  width:100%;
  max-width: 1200px;
  padding: 120px 0;
  }
}

.sell-wrap02 h3{
  width:90%;
  font-family: 'Noto Serif JP', serif;
  font-size: 2.2rem;
  font-weight: 600;
  text-align: center;
  line-height: 2.0em;
  margin: 0 auto;
}

@media print, screen and (min-width:768px) {
.sell-wrap02 h3{
  font-size: 3.0rem;
  }
}

.sell-wrap02 h3 + p{
  width:90%;
  line-height: 2.5em;
  text-align: center;
  margin: 40px auto;
}

@media print, screen and (min-width:768px) {
.sell-wrap02 h3 + p{
  width:90%;
  max-width: 1000px;
  line-height: 2.5em;
  margin: 80px auto;
  }
}

.sell-wrap02 .sell-list{
  width:100%;
  background: url("/images/sell/sell04.jpg") no-repeat 0 0;
  background-size: cover;
  padding: 40px 20px;
  margin: 0 auto;
}

@media print, screen and (min-width:768px) {
.sell-wrap02 .sell-list{
  width:100%;
  background: url("/images/sell/sell04.jpg") no-repeat 0 0;
  background-size: cover;
  padding: 80px 20px;
  margin: 0 auto;
 }
}

.sell-list dl {
  width:95%;
  text-align: center;
  margin: 0 auto;
}
@media print, screen and (min-width:768px) {
  .sell-list dl {
  width:75%;
  max-width: 880px;
  text-align: center;
  margin: 0 auto;
  }
}

.sell-list dl dt{
  position: relative;
  display: inline-block;
  font-size: 1.8rem;
  color: #FFF;
  padding: 0 20px;
  margin: 0 0 40px 0;
}

@media print, screen and (min-width:768px) {
.sell-list dl dt{
  position: relative;
  display: inline-block;
  font-size: 2.4rem;
  padding: 0 70px;
  margin: 0 0 40px 0;
  }
}

.sell-list dl dt::before,
.sell-list dl dt::after{
  content: "";
  width:30px;
  height: 1px;
  background: #FFF;  
  position: absolute;
  top:50%;
  transform: translateY(-50%);
}

@media print, screen and (min-width:768px) {
.sell-list dl dt::before,
.sell-list dl dt::after{
  content: "";
  width:50px;
  height: 1px;
  background: #FFF;  
  position: absolute;
  top:50%;
  transform: translateY(-50%);
 }
}

.sell-list dl dt::before{
  left:0;
}
.sell-list dl dt::after{
  right:0;
}

.sell-list dd{
  background: #FFF;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 2.4em;
  padding: 25px 20px;
}
.sell-list dd span{
  display: inline-block;
}


@media print, screen and (min-width:768px) {
.sell-list dd{
  background: #FFF;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 2.4em;
  padding: 45px 10px;
  }
}

.sell-list dl + p{
  width:100%;
  color: #FFF;
  line-height: 2em;
  text-align: center;
  margin: 50px auto 30px auto;
}
@media print, screen and (min-width:768px) {
.sell-list dl + p{ 
  width:90%;
  color: #FFF;
  line-height: 2em;
  text-align: center;
  margin: 50px auto 30px auto;
  }
}

.sell-wrap02 a{
  margin: -40px auto 0 auto;
}

/*reason
========================================================================================================
*/
#reason-about{
  width:100%;
  background: #FFF;
  margin: 0 auto;
}

.reason-wrap01{
  position: relative;
  width:100%;
  padding: 60px 0 100px 0;
  margin: 0 auto 60px auto;
}

@media print, screen and (min-width:768px) {
.reason-wrap01{
  position: relative;
  width:100%;
  max-width: 1200px;
  padding: 120px 0 100px 0;
  margin: 0 auto 120px auto;
  }
}

.reason-wrap01::after{
  content: "";
  width: 90%;
  max-width: 800px;
  height: 150px;
  background: url("/images/reason/reason04.svg") no-repeat 0 100%;
  background-size: 100%;
  position: absolute;
  bottom:-10px;
  left:50%;
  transform: translateX(-50%);
}

.reason-wrap01 h3{
  font-size:2.4rem;
  font-weight: 700;
  text-align: center;
  margin: 0 auto 60px auto;
}  

@media print, screen and (min-width:768px) {
.reason-wrap01 h3{
  font-size: 4.0rem;
  margin: 0 auto 120px auto;
  }
}

.reason-box{
  width:100%;
  max-width: 1200px;
  margin: 0 auto 20px auto;
}

@media print, screen and (min-width:768px) {
.reason-box{
  margin: 0 auto 40px auto;
  }
}

.reason-box01{  
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
}

.reason-box02{
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;

}

@media print, screen and (min-width:768px) {
.reason-box{
  width:100%;
  max-width: 1200px;
  margin: 0 auto 120px auto;
 }
  
.reason-box01{
  display: grid;
  grid-template-columns: 1fr 40%;
  grid-template-rows: auto;
  column-gap: 80px;
 }

.reason-box02{
  display: grid;
  grid-template-columns: 40% 1fr;
  grid-template-rows: auto;
  column-gap: 80px;
  }
}

.reason-box div{
  padding: 0 20px;
}

.reason-box01 div{
  grid-row: 2/3;
  grid-column: 1/2;
}

.reason-box01 figure{
  grid-row: 1/2;
  grid-column: 1/2;
}

.reason-box02 div{
  grid-row: 2/3;
  grid-column: 1/2;
}
.reason-box03 figure{
  grid-row: 1/2;
  grid-column: 1/2;
}
  
@media print, screen and (min-width:768px) {
.reason-box div{
  padding: 0 20px;
}

.reason-box01 div{
  grid-row: 1/2;
  grid-column: 2/3;
}

.reason-box01 figure{
  grid-row: 1/2;
  grid-column: 1/2;
}

.reason-box02 div{
  grid-row: 1/2;
  grid-column: 1/2;
}
.reason-box03 figure{
  grid-row: 1/2;
  grid-column: 2/3;
}
}

.reason-box div h4{
  position: relative;
  font-size: 1.6rem;
  font-weight: 700;
  color: #4AB8CE;  
  padding: 0 0 0 60px;
  margin: 30px 0 0 0;  
}  

@media print, screen and (min-width:768px) {
.reason-box div h4{
  font-size: 2.4rem;
  padding: 0 0 0 80px;
  margin: 30px 0 0 0;  
 }
}

.reason-box div h4::before{
  content: "";
  width:40px;
  height: 1px;
  background: #4AB8CE;
  position: absolute;
  top:50%;
  left:0;
  transform: translateY(-50%);
}

@media print, screen and (min-width:768px) {
.reason-box div h4::before{
  width:60px;
  }
}

.reason-box div dl{
  margin: 30px 0;
}

@media print, screen and (min-width:768px) {
.reason-box div dl{
  margin: 60px 0;
  }
}

.reason-box div dl dt{
  font-size: 2.0rem;
  font-weight: 700;
  margin: 0 0 30px 0;
}

@media print, screen and (min-width:768px) {
.reason-box div dl dt{
  font-size: 2.6rem;
  text-align: left;
  margin: 0 0 30px 0;
  }
}

.reason-box div dl dd{
  line-height: 2.5em;  
}

.reason-wrap01 a{
  position: relative;
  margin: 0 auto;
  z-index: 102;
}

.reason-box figure{
  position: relative;
  height: 180px;  
}

@media print, screen and (min-width:768px) {
.reason-box figure{
  position: relative;
  height: inherit;
 }
}

.reason-box figure img{
  display: block;
  width:100%;
  height: 100%;
  object-fit: cover;
}

.reason-box figcaption{
	font-family: 'Times New Roman', serif;
  font-size: 3.6rem;
  letter-spacing: 0.05em;
  color: #FFF;  
  font-weight: normal;
}

.reason-box01 figcaption{
  position: absolute;
  top:50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.reason-box02 figcaption{
  position: absolute;
  top:50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

@media print, screen and (min-width:768px) {
.reason-box01 figcaption{
  position: absolute;
  top:inherit;
  left:inherit;
  bottom:30px;
  right: 60px;
  transform: none;
 }

.reason-box02 figcaption{
  position: absolute;  
  top:inherit;
  bottom:30px;
  left: 60px;  
  transform: none;
 }
}

.reason-box figcaption span{
  display: inline-block;
  font-size: 6.0rem;
  font-weight: 400;
  margin: 0 0 0 10px;
}

/*archive
========================================================================================================
*/
#archive{
  
}

.archive-wrap01{
  width:90%;
  max-width: 1200px;  
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap:20px;
  margin: 0 auto 40px auto;
}

@media print, screen and (min-width:768px) {
  .archive-wrap01{
  width:90%;
  max-width: 1200px;  
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap:40px;
  margin: 0 auto 40px auto;
  }
}

.archive-box{
  width:100%;
  background: #FFF;
  padding: 20px;
  margin: 0 auto;
}

.archive-swiper01{
  position: relative;
  z-index: 300;
}

.archive-swiper01 .swiper-slide{
  height: 240px!important;
  background: #EEE;
}

.archive-swiper01 .swiper-slide img{
  display: block;
  width:100%;
  height: 100%;
  object-fit: contain;
}

.archive-box .swiper-slide .archive-data{
  width:100%;  
  background: rgba( 0, 0 ,0 ,0.7);
  padding: 0;
  margin: 0;
}

.archive-box .archive-swiper01 .swiper-slide .archive-data{
  width:100%;
  height: 100%;
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-content: center;
}

.archive-box .archive-swiper01 .swiper-slide .archive-data dt{
  width:80px;
  background: #FFF;
  font-size: 1.2rem;
  text-align: center;
  padding: 5px;
  margin: 0 auto 3px auto;
}
.archive-box .archive-swiper01 .swiper-slide .archive-data dd{
  font-size: 1.6rem;
  text-align: center;
  color: #FFF;
  padding: 5px;
  margin: 0 auto;
}
.archive-box .archive-swiper01 .swiper-slide .archive-data dd:first-of-type{
  margin:0 auto 15px auto;
}

.swiper-button-prev, 
.swiper-button-next {
  width: 12px;
  height: 25px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 301;
}

.swiper-button-next, .swiper-rtl .swiper-button-prev {
  background: url(/common/images/icon06.png) no-repeat 0 0;
  background-size: 100%;  
  filter: drop-shadow(-4px 2px 2px rgba(0, 0, 0, 0.6));
  right: 10px;
}
.swiper-button-prev, .swiper-rtl .swiper-button-next {
  background: url(/common/images/icon05.png) no-repeat 0 0;
  background-size: 100%;  
  filter: drop-shadow(-4px 2px 2px rgba(0, 0, 0, 0.6));
  left: 10px;
}

.archive-box dl{
  width:100%;
  margin: 20px 0 0 0;
}

.archive-box dl dt{ 
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5em;
}

@media print, screen and (min-width:768px) {
.archive-box dl dt{
  font-size: 1.6rem;
  }
}

.archive-box dl dt span{
  width:120px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #4AB8CF;
  font-size: 1.3rem;
  color: #FFF;
  letter-spacing: -0.05em;
  line-height: 100%;
  font-weight: 600;
  margin: 20px 0 0 0;
}

.archive-box dl dd{
  font-size: 1.4rem;
  line-height: 2.0em;
  margin: 20px 0 0 0;
}

#archive .btn-more{
  width:90%;
  height: 60px;
  background: #999;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  color: #FFF;
  margin: 0 auto 60px auto;
  cursor: pointer;
  transition: 0.8s;
}

@media print, screen and (min-width:768px) {
#archive .btn-more{
  width:90%;
  max-width: 1200px;
  height: 100px;
  font-size: 1.8rem;
  margin: 0 auto 60px auto;
  }
}

#archive .btn-more span.material-icons{
  margin: 3px 10px 0 0; 
  font-family: 'Material Symbols Outlined';
  font-size:2.8rem;
}
@media print, screen and (min-width:768px) {  
#archive .btn-more span.material-icons{
  margin: 3px 20px 0 0;
  font-size:3.8rem;
  }
}

#archive .btn-more:hover{
  background: #FFF;
  color: #999;
}

#archive a.btn05{
  margin: 60px auto;
}

@media print, screen and (min-width:768px) {
  #archive a.btn05{
  margin: 100px auto;
  }
}

/* archive-wrap02 */

.archive-wrap02{
  position: relative;
  width:100%;
  padding: 0 0 60px 0;
  margin: 0 0 30px 0;
}

@media print, screen and (min-width:768px) {
.archive-wrap02{
  position: relative;
  width:100%;
  padding: 0 0 80px 0;
  margin: 0 0 50px 0;
  }
}

.archive-swiper02 .swiper-slide img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.archive-wrap02 .swiper-pagination {
  width:100%;
  text-align: center;   
  transition: 300ms opacity; 
  position: absolute;
  bottom:0;
  left:50%;
  transform: translateX(-50%);
  opacity: 0.8; 
  z-index: 103;
}

.archive-wrap02 .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  display: inline-block;
  border-radius: 50%;
  background: #CCC;
}

.archive-wrap02 .swiper-pagination-bullet.swiper-pagination-bullet-active{
  background: #4AB8CF;
}