@charset "UTF-8";
/*  */
.pageWrap{
  background-image: url(../images/top/bg01.jpg);
  background-attachment: fixed;
  background-size: cover;
  background-position: center center;
}

.eyeCatch{
  position: relative;
  aspect-ratio: 1920/1080;
  width: 100%;
  overflow: hidden;              
}
.eyeCatch>.eyeCatch_box{
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  scale: 1.1;
  opacity: 0;
  animation: zoomIn 15s ease-in infinite;               
}
.eyeCatch>.eyeCatch_box:nth-child(1){
  background-image:url(../images/top/eyeBg01.jpg);
}
.eyeCatch>.eyeCatch_box:nth-child(2){
  background-image:url(../images/top/eyeBg02.jpg);
  animation-delay:5s;
}
.eyeCatch>.eyeCatch_box:nth-child(3){
  background-image:url(../images/top/eyeBg03.jpg);
  animation-delay:10s;
}
.eyeFrame{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.eyeFrame:after{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #c9caca;
  mix-blend-mode: multiply;
}
@keyframes zoomIn{
  0%{
      scale: 1.1;
      opacity: 0;
  }
  20%{
      opacity: 1;
  }
  33%{
      scale: 1;
      opacity: 1;
  }
  63%{
      opacity: 0;
  }
  100%{
      opacity: 0;
  }
}
.eyeCatch>.eyeTxt1024{
  max-width: 1100px;
  width:90%;
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%,-60%);
  opacity:0;
  animation:fadeIn 3s forwards 2s ease-in;
}
@keyframes fadeIn{
  0%{
      opacity: 0;
  }
  100%{
      opacity: 1;
  }
}
.is-safari .eyeFrame:after {
  background-color: #000;
  opacity: 0.25; /* Safariだけブレンド代替 */
}
.under1024{
  display: none;
}
@media (max-width:1024px){
  .eyeCatch{
      aspect-ratio: 1/1;             
  }
  .over1024{
      display: none;
  }
  .under1024{
      display: block;
  }
}

.sellPoint{
  background-color: #494f3f;
  padding: 10px 0;
}
.sellPoint>.mainWrap{
  max-width: 1320px;
  width: 95%;
  margin: 0 auto;
}
.sellPoint>.mainWrap>ul{
  display: flex;
  justify-content: center;
}
.sellPoint>.mainWrap>ul>li{
  border-right: 1px solid #d7cdba;
  box-sizing: border-box;
}
.sellPoint>.mainWrap>ul>li:last-child{
  border-right: none;
  box-sizing: border-box;
}
@media (max-width:1024px){
  .sellPoint>.mainWrap{
      width: 90%;
  }
  .sellPoint>.mainWrap>ul{
      flex-wrap: wrap;
  }
  .sellPoint>.mainWrap>ul>li{
      width: 33.33%;
      margin-bottom: 10px;
  }
  .sellPoint>.mainWrap>ul>li:nth-child(4),
  .sellPoint>.mainWrap>ul>li:nth-child(5),
  .sellPoint>.mainWrap>ul>li:nth-child(6){
      margin-bottom: 0px;
  }
  .sellPoint>.mainWrap>ul>li:last-child{
      border-right: 1px solid #d7cdba;
  }
  .sellPoint>.mainWrap>ul>li:first-child,
  .sellPoint>.mainWrap>ul>li:nth-child(4){
      border-left: 1px solid #d7cdba;
  }
}
@media (max-width:768px){
  .sellPoint>.mainWrap>ul>li{
      width: 50%;
      margin-bottom: 10px;
  }
  .sellPoint>.mainWrap>ul>li:nth-child(3),
  .sellPoint>.mainWrap>ul>li:nth-child(5){
      border-left: 1px solid #d7cdba;
  }
  .sellPoint>.mainWrap>ul>li:nth-child(4){
      border-left: none;
  }
}

.mainText{
  padding: 80px 0;
}
.mainText_wrap{
  max-width: 700px;
  width: 70%;
  margin: 0 auto;
}
.mainText_wrap>h2,
.mainText_wrap>p{
  margin-bottom: 20px;
}
.mainText_wrap>.btnBox{
  max-width: 360px;
  width: 70%;
  margin: 0 auto;
}
.mainText_wrap>.btnBox>p>a{
  transition: 0.5s all;
}
.mainText_wrap>.btnBox>p>a:hover,
.mainText_wrap>.btnBox>p>a:active{
  opacity: 0.5;
  transition: 0.5s all;
}
@media (max-width:768px){
  .mainText{
      padding: 50px 0;
  }
  .mainText_wrap{
      max-width: 500px;
      width: 90%;
      margin: 0 auto;
  }
}

.contentsIntro01{
  margin-bottom: 50px;
}
.contentsIntro01_row{
  display: flex;
  height: 500px;
  margin-bottom: 30px;
}
.contentsIntro01_row:nth-of-type(even){                
  background-color: #d7cdba;
}
.contentsIntro01_row:nth-of-type(odd){
  background-color: #363838;
  justify-content: flex-end;
}
.contentsIntro01_row:last-of-type{
  margin-bottom: 0px;
}
.contentsIntro01_row>.imgBox{
  width:65%;
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;
}
.contentsIntro01_row>.imgBox:before{
  content: '';
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  transform: scale(1.1);
  opacity: 0;
  transition: opacity 1.5s ease,transform 4s ease;
}
.contentsIntro01_row>.txtBox{
  width:35%;
}
.contentsIntro01_row:nth-of-type(1)>.imgBox:before{
  background-image: url(../images/top/bg04_02@2x.jpg);
}
.contentsIntro01_row:nth-of-type(2)>.imgBox:before{
  background-image: url(../images/top/bg02_02@2x.jpg);
}
.contentsIntro01_row:nth-of-type(3)>.imgBox:before{
  background-image: url(../images/top/bg03_02@2x.jpg);
}
.contentsIntro01_row>.imgBox.active:before{
  opacity: 1;
  transform: scale(1);                
}           
.contentsIntro01_row>.txtBox>a{
  height: 100%;
  display: flex;
  align-items: center;
  transition: 0.5s all;   
}
.contentsIntro01_row>.txtBox>a:hover,
.contentsIntro01_row>.txtBox>a:active{
  opacity: 0.5;
  transition: 0.5s all;             
}
.contentsIntro01_row:nth-of-type(even)>.txtBox>a{
  justify-content: flex-start;      
}
.contentsIntro01_row:nth-of-type(odd)>.txtBox>a{
  justify-content: flex-end;                      
}
.contentsIntro01_row>.txtBox>a>.txtBox_inner{
  max-width:350px;
  width: 100%;
  padding-left: 30px;
  box-sizing: border-box;
}
.contentsIntro01_row>.txtBox>a>.txtBox_inner>h3{
  margin-bottom: 10px;
}           
.contentsIntro01_row>.txtBox>a>.txtBox_inner>h3>span{
  display: inline-block;
  font-family: "Oswald", sans-serif;
  line-height: 1;
}
.contentsIntro01_row:nth-of-type(odd)>.txtBox>a>.txtBox_inner>h3>span{
  color: #fff;
}
.contentsIntro01_row>.txtBox>a>.txtBox_inner>h3>span:nth-child(1){
  font-size: 1em;
}
.contentsIntro01_row>.txtBox>a>.txtBox_inner>h3>span:nth-child(3){
  font-size: 2.5em;
  letter-spacing: 0.1em;
}
.contentsIntro01_row>.txtBox>a>.txtBox_inner>p{
  text-align: right;
} 
.contentsIntro01_row>.txtBox>a>.txtBox_inner>p>img{
  max-width:190px;
  width: 70%;
}
@media (max-width:1024px){
  .contentsIntro01_row{
      flex-wrap: wrap;
      height: auto;
  }
  .contentsIntro01_row>.imgBox{
      width:100%;
      height: 300px;                    
  }
  .contentsIntro01_row>.txtBox{
      width:100%;
      padding: 50px 0;
      box-sizing: border-box;
      order: 1;
  }
  .contentsIntro01_row>.txtBox>a>.txtBox_inner>p>img{
      max-width:190px;
      width: 50%;
  }
}
@media (max-width:768px){
  .contentsIntro01_row>.imgBox{
      height: 250px;                    
  }
  .contentsIntro01_row>.txtBox>a>.txtBox_inner>h3>span:nth-child(1){
      font-size: 0.9em;
  }
  .contentsIntro01_row>.txtBox>a>.txtBox_inner>h3>span:nth-child(3){
      font-size: 2.25em;
  }
}
@media (max-width:500px){
  .contentsIntro01_row>.imgBox{
      height: 200px;                    
  }
  .contentsIntro01_row>.txtBox{
      padding: 30px 0;
  }
  .contentsIntro01_row>.txtBox>a>.txtBox_inner>h3>span:nth-child(1){
      font-size: 0.8em;
  }
  .contentsIntro01_row>.txtBox>a>.txtBox_inner>h3>span:nth-child(3){
      font-size: 2em;
  }
}
/* 251111追加 */
.contentsIntro01_row>.imgBox:after{
  content: '';
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
}
.contentsIntro01_row>.imgBox>p{
  width: 100%;
  text-align: center;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.15em;
  letter-spacing: 0.25em;
  line-height: 1.8;
  color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index:5;                
}
@media (max-width:1024px){
  .contentsIntro01_row>.imgBox>p{
      font-size: 1.05em;                
  }
}
@media (max-width:768px){
  .contentsIntro01_row>.imgBox>p{
      font-size: 0.95em;                
  }
}

.topBtn_row{
  max-width:768px;
  width: 80%;
  margin: 0 auto;
  margin-bottom: 50px;
}
.topBtn_row>ul{
  display: flex;
}
.topBtn_row>ul>li{
  width: 50%;
}
.topBtn_row>ul>li>a{
  display: block;
  transition: 0.5s all;
}
.topBtn_row>ul>li:nth-child(1)>a{
  background-color: #5c6450;
}
.topBtn_row>ul>li:nth-child(2)>a{
  background-color: #d7cdba;
}
.topBtn_row>ul>li>a:hover,
.topBtn_row>ul>li>a:active{
  opacity: 0.5;
  transition: 0.5s all;
}
@media (max-width:768px){
  .topBtn_row{
      max-width:375px;
      width: 70%;
      margin: 0 auto;
      margin-bottom: 30px;
  }
  .topBtn_row>ul{
      flex-wrap: wrap;
  }
  .topBtn_row>ul>li{
      width: 100%;
  }
}