@charset "utf-8";
/* CSS Document */
.section01.top_concept{
  position:relative;
  overflow:hidden;
}
.section01.top_concept .inner{
  position:relative;
  width:100%;
  margin:0 auto;
  align-items:flex-start;
  justify-content:space-between;
  gap:0;
  z-index:2;
}
.section01.top_concept .main_img{
  width:33%;
  aspect-ratio:430/500;
  border-radius:5px;
  overflow:hidden;
  flex:0 0 33%;
}
.section01.top_concept .main_img img,
.section01.top_concept .sub_img img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}
.section01.top_concept .deco img{
  width:100%;
  height:auto;
  display:block;
}
.section01.top_concept .txtarea{
  width:44%;
  padding-top:clamp(58px,5.8vw,74px);
  flex:0 0 44%;
  box-sizing:border-box;
  padding-left:clamp(34px,4vw,70px);
  padding-right:clamp(20px,3vw,46px);
}
.section01.top_concept .titlebox .en{
  margin-bottom:clamp(22px,3vw,34px);
}
.section01.top_concept .titlebox .title{
  color:#6A513F;
  font-weight:400;
}
.section01.top_concept .txtbox{
  margin-top:clamp(30px,3.4vw,44px);
}
.section01.top_concept .more_btn{
  margin-top:clamp(34px,4vw,52px);
}
.section01.top_concept .sub_img{
  position:relative;
  width:23%;
  aspect-ratio:310/170;
  border-radius:5px;
  overflow:hidden;
  z-index:3;
  flex:0 0 23%;
  align-self:flex-end;
  margin-top:auto;
}
.section01.top_concept .deco{
  position:absolute;
  z-index:1;
  pointer-events:none;
}
.section01.top_concept .deco1{
  width:clamp(120px,13vw,190px);
  right:clamp(70px,9vw,140px);
  top:clamp(70px,7vw,110px);
}
.section01.top_concept .deco2{
  width:clamp(86px,9vw,128px);
  left:clamp(210px,22vw,300px);
  bottom:clamp(86px,9vw,128px);
}
@media screen and (max-width:1280px){
   .section01.top_concept .inner{
    flex-wrap:wrap;
  }
  .section01.top_concept .main_img{
    width:38%;
    flex-basis:38%;
  }
  .section01.top_concept .txtarea{
    width:62%;
    flex-basis:62%;
    padding-left:clamp(24px,4vw,42px);
    padding-right:0;
  }
  .section01.top_concept .sub_img{
    width:clamp(220px,34vw,315px);
    flex-basis:clamp(220px,34vw,315px);
    margin-top:clamp(28px,4vw,46px);
    margin-left:auto;
    margin-right:clamp(20px,6vw,80px);
  }
}
@media screen and (max-width:900px){
  .section01.top_concept .inner{
    flex-wrap:wrap;
    justify-content:space-between;
  }
  .section01.top_concept .main_img{
    width:42%;
    flex-basis:42%;
  }
  .section01.top_concept .txtarea{
    width:58%;
    flex-basis:58%;
    padding-left:clamp(24px,4vw,38px);
    padding-right:0;
    padding-top:clamp(8px,2vw,24px);
  }
  .section01.top_concept .sub_img{
    width:32%;
    flex-basis:32%;
    margin-top:clamp(24px,4vw,38px);
    margin-left:auto;
    margin-right:6%;
  }
}
@media screen and (max-width:768px){
  .section01.top_concept .inner{
    flex-direction:column;
    flex-wrap:nowrap;
    align-items:flex-start;
    gap:clamp(28px,6vw,42px);
  }
  .section01.top_concept .main_img{
    width:100%;
    max-width:520px;
    flex-basis:auto;
    aspect-ratio:4/3;
  }
  .section01.top_concept .txtarea{
    width:100%;
    flex-basis:auto;
    padding:0;
  }
  .section01.top_concept .titlebox .title{
    line-height:1.7;
  }
  .section01.top_concept .sub_img{
    width:78%;
    max-width:360px;
    flex-basis:auto;
    margin:0 0 0 auto;
  }
  .section01.top_concept .deco1{
    right:clamp(18px,6vw,42px);
    top:clamp(48px,9vw,70px);
  }
  .section01.top_concept .deco2{
    left:auto;
    right:clamp(30px,8vw,60px);
    bottom:clamp(40px,8vw,70px);
  }
}
@media screen and (max-width:576px){
  .section01.top_concept .titlebox .en{
    letter-spacing:.24em;
  }
  .section01.top_concept .titlebox .title{
    letter-spacing:.08em;
  }
  .section01.top_concept .txtbox p{
    line-height:2;
  }
  .section01.top_concept .sub_img{
    width:100%;
  }
  .section01.top_concept .deco{
    opacity:.75;
  }
}
.section02.top_clay{
  position:relative;
  overflow:hidden;
  padding-bottom:clamp(80px,9vw,130px);
}
.section02.top_clay .main_img{
  width:100%;
  aspect-ratio:1440/560;
  min-height:clamp(320px,39vw,560px);
  overflow:hidden;
}
.section02.top_clay .main_img img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}
.section02.top_clay .contentbox{
  position:relative;
  z-index:2;
  margin-top:clamp(-150px,-10vw,-90px);
}
.section02.top_clay .inner{
  --clay-gap:clamp(42px,5vw,70px);
  width:100%;
  margin:0 auto;
  padding:clamp(48px,5vw,70px) clamp(48px,6vw,80px);
  background:#fff;
  align-items:flex-start;
  justify-content:space-between;
  gap:var(--clay-gap);
  box-sizing:border-box;
}
.section02.top_clay .titlebox{
  width:calc(32% - var(--clay-gap) / 2);
  flex:0 0 calc(32% - var(--clay-gap) / 2);
}
.section02.top_clay .txtbox{
  width:calc(68% - var(--clay-gap) / 2);
  flex:0 0 calc(68% - var(--clay-gap) / 2);
}

.section02.top_clay .titlebox .en{
  margin-bottom:clamp(18px,2vw,26px);
    letter-spacing: 0.15em;
}
.section02.top_clay .titlebox .title{
  color:#6A513F;
  font-weight:400;
}
.section02.top_clay .more_btn{
  margin-top:clamp(28px,3vw,38px);
}

.section02.top_clay .txtbox p{
  color:#6A513F;
}
.section02.top_clay .deco{
  position:absolute;
  z-index:1;
  pointer-events:none;
}
.section02.top_clay .deco3{
  width:clamp(120px,9vw,180px);
  right:clamp(10px,9vw,30px);
  bottom:clamp(-44px,-3vw,-20px);
}
.section02.top_clay .deco img{
  width:100%;
  height:auto;
  display:block;
}
@media screen and (max-width:1080px){
  .section02.top_clay .inner{
    max-width:860px;
    padding:clamp(42px,5vw,60px) clamp(36px,5vw,60px);
    gap:clamp(32px,4vw,50px);
  }
  .section02.top_clay .contentbox{
    margin-top:clamp(-120px,-9vw,-70px);
  }
}
@media screen and (max-width:768px){
  .section02.top_clay{
    padding-bottom:clamp(70px,12vw,100px);
  }
  .section02.top_clay .main_img{
    aspect-ratio:4/3;
    min-height:300px;
  }
  .section02.top_clay .contentbox{
    margin-top:-60px;
  }
  .section02.top_clay .inner{
    flex-direction:column;
    gap:clamp(26px,6vw,36px);
    padding:clamp(34px,7vw,48px) clamp(24px,6vw,38px);
  }
  .section02.top_clay .titlebox,
  .section02.top_clay .txtbox{
    width:100%;
  }
      .section02.top_clay .inner{
    --clay-gap:clamp(26px,6vw,36px);
  }

    
  .section02.top_clay .deco3{
    right:clamp(20px,7vw,44px);
    bottom:clamp(-36px,-6vw,-20px);
  }
}
@media screen and (max-width:576px){
  .section02.top_clay .main_img{
    min-height:240px;
  }
  .section02.top_clay .contentbox{
    margin-top:-38px;
  }
  .section02.top_clay .inner{
    padding:32px 22px;
  }
  .section02.top_clay .deco{
    opacity:.75;
  }
}
.section03.top_guide .titlebox2{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(10px,1.6vw,18px);
  text-align:center;
}
.section03.top_guide .titlebox2 h2{
  line-height:1;
  letter-spacing:.18em;
  font-weight:400;
}
.section03.top_guide .titlebox2 .title_deco{
  width:clamp(42px,4.4vw,62px);
  height:auto;
  display:block;
  object-fit:contain;
}
@media screen and (max-width:576px){
  .section03.top_guide .titlebox2{
    gap:8px;
  }
  .section03.top_guide .titlebox2 h2{
    letter-spacing:.1em;
  }
  .section03.top_guide .titlebox2 .title_deco{
    width:34px;
  }
}
.section03.top_guide .titlebox2 .title_deco{
  width:clamp(42px,4.4vw,62px);
  height:auto;
  display:block;
  object-fit:contain;
}

.section03.top_guide{
  position:relative;
  overflow:hidden;
}
.section03.top_guide .boxwrap6{
  width:100%;
  margin:0 auto;
  position:relative;
  z-index:2;
}
.section03.top_guide .titlebox2{
  text-align:center;
}
.section03.top_guide .titlebox2 h2{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(10px,1.6vw,18px);

}
.section03.top_guide .titlebox2 h2 span{
  display:inline-block;
}
.section03.top_guide .titlebox2 .title_deco{
  width:clamp(42px,4.4vw,62px);
  height:auto;
  display:block;
  object-fit:contain;
}
.section03.top_guide .guide_list{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:clamp(58px,7vw,92px) clamp(42px,7vw,82px);
  width:100%;
  margin:0 auto;
    max-width: 1280px;
}
.section03.top_guide .guide_item a{
  position:relative;
  display:block;
  color:#6A513F;
}
.section03.top_guide .guide_item .imgbox{
  position:relative;
  overflow:hidden;
  border-radius:5px;
}
.section03.top_guide .guide_item .imgbox img{
  width:100%;
  aspect-ratio:520/290;
  object-fit:cover;
  display:block;
  transition:.4s ease;
}
.section03.top_guide .guide_item a:hover .imgbox img{
  transform:scale(1.04);
}
.section03.top_guide .guide_item .txtbox{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  padding:clamp(20px,2vw,26px) 0 clamp(18px,2vw,24px);
  border-bottom:1px solid rgba(106,81,63,.18);
}
.section03.top_guide .guide_item .txtbox .en{
  line-height:1;
  letter-spacing:.14em;
  font-weight:400;
}
.section03.top_guide .guide_item .txtbox .jp{
  margin-top:clamp(8px,1vw,12px);
  color:#6A513F;
}

.section03.top_guide .guide_item:nth-child(even){
  transform:translateY(clamp(38px,4vw,58px));
}
@media screen and (max-width:900px){
  .section03.top_guide .guide_list{
    gap:clamp(48px,7vw,70px) clamp(24px,4vw,42px);
  }
  .section03.top_guide .guide_item .txtbox{
    align-items:flex-start;
  }
}
@media screen and (max-width:576px){
  .section03.top_guide .titlebox2 h2{
    gap:8px;
    letter-spacing:.1em;
  }
  .section03.top_guide .titlebox2 .title_deco{
    width:34px;
  }
  .section03.top_guide .guide_list{
    grid-template-columns:1fr;
    gap:46px;
  }
  .section03.top_guide .guide_item:nth-child(even){
    transform:none;
  }
  .section03.top_guide .guide_item .txtbox{
    padding:18px 0;
  }
}
.section04.top_event{
  position:relative;
  overflow:hidden;
}
.section04.top_event .event_box{
  width:100%;
  max-width:1040px;
  margin:0 auto;
  align-items:stretch;
  justify-content:center;
}
.section04.top_event .main_img{
  width:57%;
  aspect-ratio:590/380;
  overflow:hidden;
  border-radius:5px 0 0 5px;
}
.section04.top_event .main_img img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}
.section04.top_event .txtarea{
  width:43%;
  padding:clamp(46px,5vw,70px) clamp(42px,5vw,64px);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  border-radius:0 5px 5px 0;
  box-sizing:border-box;
}
.section04.top_event .event_title{
  align-items:center;
  justify-content:center;
  gap:clamp(8px,1vw,14px);
}
.section04.top_event .title_deco{
  width:clamp(34px,3.5vw,48px);
  height:auto;
  display:block;
  object-fit:contain;
}
.section04.top_event .titlebox .en{
  line-height:1;
  letter-spacing:.2em;
}
.section04.top_event .titlebox .jp{
  margin-top:clamp(8px,1vw,12px);
  color:#6A513F;
}
.section04.top_event .txtbox{
  width:100%;
  margin-top:clamp(22px,2.8vw,34px);
  text-align:left;
}
.section04.top_event .txtbox p{
  color:#6A513F;
}
.section04.top_event .more_btn{
  margin-top:clamp(28px,3.4vw,42px);
}
@media screen and (max-width:900px){
  .section04.top_event .event_box{
    flex-direction:column;
  }
  .section04.top_event .main_img,
  .section04.top_event .txtarea{
    width:100%;
  }
  .section04.top_event .main_img{
    border-radius:5px 5px 0 0;
  }
  .section04.top_event .txtarea{
    border-radius:0 0 5px 5px;
  }
}
@media screen and (max-width:576px){
  .section04.top_event .main_img{
    aspect-ratio:4/3;
  }
  .section04.top_event .txtarea{
    padding:clamp(34px,8vw,44px) 22px;
  }
  .section04.top_event .txtbox{
    text-align:left;
  }
}
.section05.top_news{
  position:relative;
  overflow:hidden;
}
.section05.top_news .boxwrap6{
  width:100%;
  margin:0 auto;
  position:relative;
  z-index:2;
    max-width: 1280px;
}
.section05.top_news .news_head{
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
}
.section05.top_news .news_head .titlebox .en{
  line-height:1;
  letter-spacing:.12em;
  font-weight:400;
}
.section05.top_news .news_head .titlebox .jp{
  margin-top:clamp(8px,1vw,12px);
  color:#6A513F;
}
.section05.top_news .pc_more a,
.section05.top_news .sp_more a{
  display:block;
}
.section05.top_news .sp_more{
  display:none;
}
.newstop_f1 .contents{
  width:100%;
  margin:0 auto;
}
.newstop_f1 .contents .webgene-blog{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-start;
  align-items:flex-start;
  gap:clamp(38px,5vw,70px) clamp(44px,7vw,90px);
}
.newstop_f1 .contents .webgene-blog .webgene-item{
  width:calc(100% / 3 - clamp(44px,7vw,90px) * 2 / 3);
}
.newstop_f1 .contents .webgene-blog .webgene-item a{
  position:relative;
  display:block;
  text-decoration:none;
  color:#6A513F;
}
.newstop_f1 .contents .webgene-blog .webgene-item .imgbox{
  width:100%;
  aspect-ratio:330/230;
  border-radius:8px;
  overflow:hidden;
}
.newstop_f1 .contents .webgene-blog .webgene-item .imgbox img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:.4s ease;
}
.newstop_f1 .contents .webgene-blog .webgene-item a:hover .imgbox img{
  transform:scale(1.04);
}
.newstop_f1 .webgene-blog .webgene-item .date{
  position:absolute;
  top:0;
  right:clamp(-28px,-2vw,-20px);
  writing-mode:vertical-rl;
  letter-spacing:.08em;
  line-height:1;
  font-weight:400;
  color:#231815;
    
}
.newstop_f1 .webgene-blog .webgene-item .catename{
  display:inline-block;
  padding:5px 14px;
  background:#6FA37E;
  color:#fff;
  line-height:1;
  font-weight:400;
}
.newstop_f1 .contents .webgene-blog .webgene-item .titlebox{
  display:block;
  margin-top:-40px;
  margin-left:-30px;
  position:relative;
  z-index:3;
}
.newstop_f1 .contents .webgene-blog .webgene-item h2{
  width:fit-content;
  max-width:80%;
  margin-top:8px;
  line-height:1.6;
  font-weight:400;
  color:#6A513F;
  background:#fff;
  padding:4px 12px;
  box-sizing:border-box;
}
@media screen and (max-width:900px){
  .newstop_f1 .contents .webgene-blog{
    gap:clamp(64px,8vw,86px) clamp(70px,10vw,110px);
    justify-content:center;
  }
  .newstop_f1 .contents .webgene-blog .webgene-item{
    width:calc(100% / 2 - clamp(70px,10vw,110px) / 2);
  }
  .newstop_f1 .contents .webgene-blog .webgene-item:nth-child(3){
    margin-left:auto;
    margin-right:auto;
  }
}
@media screen and (max-width:576px){
  .section05.top_news .news_head{
    display:block;
  }
  .section05.top_news .pc_more{
    display:none;
  }
  .section05.top_news .sp_more{
    display:block;
    width:fit-content;
    margin:40px auto 0;
  }
  .newstop_f1 .contents .webgene-blog{
    width:100%;
    max-width:450px;
    margin:0 auto;
    gap:42px;
  }
  .newstop_f1 .contents .webgene-blog .webgene-item{
    width:90%;
  }
  .newstop_f1 .webgene-blog .webgene-item .date{
    right:-22px;
  }
  .newstop_f1 .contents .webgene-blog .webgene-item .titlebox{
    margin-left:0;
  }
  .newstop_f1 .contents .webgene-blog .webgene-item h2{
    max-width:92%;
  }
}
/* ---------- IEのみ ---------- */
@media all and (-ms-high-contrast: none) {
}
/* ---------- 1280px ~ ---------- */
@media screen and (max-width: 1280px){
}
/* ---------- 1080px ~ ---------- */
@media screen and (max-width: 1080px){
}
/* ---------- 768px ~ ---------- */
@media screen and (max-width: 768px){
}
/* ---------- 576px ~ ---------- */
@media screen and (max-width: 576px){
}
/* ---------- 350px ~ ---------- */
@media screen and (max-width: 350px){
}