@charset "UTF-8";

/*
Theme Name: yamamori
*/
  /*************  about ******************/

  section#about{
    background: url(../images/about_bg.jpg)no-repeat center;
    background-size: cover;
  }

  /*************  News ******************/

  section#News .comm__Inner{
    display: flex;
    column-gap: 5%;
  }

  section#News .comm__Inner .Title{
    width: 35%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  ul.News__wrap{
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    width: 70%;
  }

  .News__wrap.archive{
    max-width: 1000px;
    margin: auto;
    width: 100%;
  }

  ul.News__wrap li{
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding-bottom: 1em;
    padding-top: 1em;
    column-gap: 1em;
    align-items: center;
  }
  ul.News__wrap li h3{
    font-size: 16px;
    margin: 0;
    color:#031b7f;
  }
.days{
  font-size: 14px;
  color:#031b7f;
  margin-bottom: .75em;
}

ul.News__wrap li picture{
  width: 19%;
}

ul.arrow{
  padding-left: 0;
}

.roundebox .Text ul.arrow{
  margin-left: 2em;
}

  section.News li a{
    color:#031b7f;
    text-decoration: none;
    font-weight: 400;
    font-size: 17px;
  }
  @media screen and (max-width: 767px) {
    section#News .comm__Inner{
      flex-direction: column;
    }

    ul.News__wrap{
      width: 100%;
    }
    .News .containner{
      border-radius: 0.6em;
    }
    section.News ul.flex{
      margin-bottom: 0;
    }
    section.News ul.flex li{
      flex-direction: column;
      align-items: flex-start;
    }
    section.News ul.flex li h3{
      margin-top: 0;
		margin-bottom:0;
		font-size:16px;
    }
  }
    /*************  achivement ******************/

.service__bottom__box a{
	position:relative !important;
	width:auto !important;
	height:auto !important;
}

  .flex{
    display: flex;
    justify-content: flex-start;
    gap:2.864583333333333vw;
    flex-direction: row;
    padding: 0;
    margin: 0 auto;
    width: 100%;
  }
  .flex.align__center{
    align-items: center;
  }
  .flex.mt{
    margin-top: var(--row-space);
  }

  ul.flex.fukuri{
    gap: 2%;
  }
  ul.flex.center{
    justify-content: center;
  }

  .flex .Hurf{
    width: var(--flex_hurf);
  }
  .flex .four{
    width: var(--flex_fourth);
    display: flex;
    flex-direction: column;
    position: relative;
  }
  ul.flex.wrap{
    flex-wrap: wrap;
  }
  
  ul.flex li.three{
    width: var(--flex_third);
    list-style: none;
  }

  ul.flex li.four{
    width: var(--flex_fourth);
    display: flex;
    flex-direction: column;
    position: relative;
  }

  img.d-border{
    border: 1px solid #ddd;
    padding: 8px;
  }

  ul.flex li picture{
    display: block;
    margin-bottom: clamp(1em,1.0625vw,1.5em);
  }

  ul.flex li picture img{
    width: 100%;
    height: auto;
    object-fit: cover;
  }

  ul.flex li.four a{
    text-decoration: none;
    color:#3a3a3a;
    position: absolute;
    top:0;
    left:0;
    z-index: 2;
    width: 100%;
    height: 100%;
  }

  ul.flex li.four h3{
    font-size: clamp(15px,1.25vw,20px);
    margin: 0;
    font-weight: 400;
    color:#202020;
    padding-bottom: .5em;
    position: relative;
    border-bottom: 1px solid #000;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  ul.flex li.four picture{
    overflow: hidden;
    border-radius: 0.46em;
  }

  ul.flex li.four p{
    color:#202020;
  }
  span.arrow{
    width:0;
    height:0;
    border-style:solid;
    border-width: 4.5px 0 4.5px 8.3px;
    border-color: transparent transparent transparent var(--blue);
  }

  ul.flex li .days{
    font-size: clamp(13px,1.05vw,15px);
    font-style: italic;
    color: #6d5090;
  }

  ul.flex li p{
    color:#fff;
    font-size:0.9rem;
  }

  @media screen and (max-width: 767px) {

    ul.flex{
      flex-wrap: wrap;
      flex-direction: column;
    }

    ul.flex.row{
      flex-direction: row;
		row-gap:0;
    }

    ul.flex li{
      margin-bottom: 2em;
    }
	  ul.flex li.four:nth-last-of-type(-n+2){
		  margin-bottom:0;
	  }
	  ul.flex li.four h3{
		  font-size:17px;
	  }
    ul.flex.row li.four h3{
      font-size: 14px;
    }
    ul.flex li.three{
      margin: 0 0 0;
      max-width: 49%;
    }
    ul.flex.fukuri{
      flex-direction: row;
      row-gap: 1vh;
      justify-content: flex-start;
    }
  }

  /*************  achivement ******************/
  section#triangle{
    background: url(../images/achivement__bg.jpg)no-repeat center top;
    background-size: contain;
    padding:var(--col-space) var(--row-space);
    position: relative;
  }

  .border-double{
    position: relative;
    padding: 1em 0;
    border-top: 4px solid #efe300;
    border-bottom: 4px dashed #efe300;
    margin-bottom: 1em;
    margin-top: 0;
    line-height: 1.855;
  }
  .border-double::before{
    content: '';
    position: absolute;
    left:0;
    background: #ddc80d;
    height: 1px;
    width: 100%;
    top:5px;
  }
  .border-double::after{
    content: '';
    position: absolute;
    left:0;
    background: #ddc80d;
    height: 1px;
    width: 100%;
    bottom:5px;
  }
  .border-double .title{
    background: #ddc80d;
    display: block;
    padding: .25em 1em;
    color:#fff;
    max-width: 100%;
    font-weight: bold;
    border-top-left-radius: .6em;
    border-bottom-right-radius: .6em;
    font-size: 1.15rem;
    margin-bottom: .5em;
  }
  .border-double.three{
    width: var(--flex_third)
  }

   /*************  recruit ******************/

   section#center__Image{
    width: 100vw;
    height: 50vh;
    background: url(../images/bg.jpg)no-repeat center;
   }

   @media only screen and (min-width: 768px) and (max-width: 1024px) {

    section#center__Image{
      height: 25vh;
    }
    .border-double{
      padding-left: 0;
      padding-right: 0;
    }
   }

   section#hurf__image{
    position: relative;
   }

   section#hurf__image .Inner__wrap{
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto;
   }

   .Recruit .comm__Inner{
    display: flex;
    width: 100%;
    max-width: 100%;
    gap: 2.864583333333333vw;
    position: relative;
    z-index: 2;
    align-items: flex-start;
   }

   .Recruit .comm__Inner .Item{
    width: var(--flex_third);
    position: relative;
   }

   .Recruit .comm__Inner .Item.four{
    width: var(--flex_fourth);
   }

   .Recruit .comm__Inner .Item.four picture img{
    max-height: 250px;
    width: 100%;
    object-fit: cover;
   }

   div.icon{
    background: var(--key-Color);
    padding: .25em 1em;
    display: block;
    color:#fff;
    max-width: max-content;
    text-align: center;
    margin-bottom: .25em;
    font-size: 0.8rem;
   }

   .Recruit .comm__Inner .Item picture{
    margin-bottom: 1em;
    display: block;
   }

   .Recruit .comm__Inner .Item picture img{
    overflow: hidden;
    border-radius: 0.46em;
   }
   img.round{
   overflow: hidden;
   border-radius: 0.46em;
   }

   @media only screen and (min-width: 768px) and (max-width: 1024px){
    .logo-wrap{
      margin-top: 1em;
    }
    }

    @media screen and (min-width: 1921px) {
      section#hurf__image .Inner__wrap{
       max-width: 1540px;
       margin: auto;
      }
      .Recruit .comm__Inner .Item{
       padding-left: 0;
       padding-right: 0;
      }
      .Recruit.Sec .comm__Inner .Item{
        padding-left: 1.6vw;
        padding-right: 1.6vw;
      }
      .p-page-visual__mv{
        height: 1000px !important;
      }
     }
   .Recruit .comm__Inner .Item h3{
    font-size: clamp(20px,1.45vw,28px);
    margin: 0;
    font-weight: 600;
    color:#202020;
    padding-bottom: .5em;
    position: relative;
    border-bottom: 1px solid #000;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    color:var(--key-Color);
  }

  section#blue picture{
    position: relative;
    display: block;
  }

  .number{
    color:var(--key-Color);
    font-size:clamp(40px, 4.260416666666667vw, 4.260416666666667vw);
    position: relative;
    margin: .2em 0 0 auto;
    font-family: "Anton", sans-serif;
    font-weight: 400;
    line-height: 1.0;
    text-align: right;
  }

  .number span{
    font-size: clamp(24px,2.4375000000000004vw,2.4375000000000004vw);
    display: inline-block;
    font-weight: 300;
    vertical-align: bottom;
  }

    picture .number{
      position: absolute;
      left: .2em;
      top:.2em;
      opacity:0.45;
      color:#fff;
      z-index: 2;
    }

   @media screen and (max-width: 767px) {
    .Recruit .comm__Inner .Item:nth-of-type(even){
      margin-top: 0;
    }
    .Recruit .comm__Inner{
      flex-direction: column;
    }
    section#hurf__image::after {
      content: '';
      background: url(../images/recruit__bg.png) no-repeat center  top;
      background-size: cover;
      width: 100vw;
      height: 100%;
      position: absolute;
      right: 0;
      top: 0;
    }
    
   section#center__Image{
    width: 100vw;
    height: 30vh;
    background: url(../images/bg.jpg)no-repeat left;
    background-size: cover;
   }
	   .Recruit .comm__Inner.interview{
		   flex-direction:row;
       flex-wrap: wrap;
	   }
	   p.small{
		   font-size:0.85rem;
	   }

  }

  /*************  Service ******************/

    section#service{
      padding:var(--col-space) var(--row-space) 0;
      position: relative;
    }

    section#service h2,    section#service h2 *{
      color:#fff !important;
     }
     section#service h2 span.jan::before{
      background-color: #fff;
      margin-left: auto;
      margin-right: auto;
     }

     section#service .comm__Inner{
      display: flex;
      flex-wrap: wrap;
      gap: 1.4583333333333333vw;
     }
     section#service .comm__Inner .Item{
      width: var(--flex_hurf);
      border-radius: 0.46em;
      padding:clamp(1em, 1.604166666666667vw, 1.604166666666667vw);
      display: flex;
      row-gap: 3%;
      align-items: center;
      justify-content: space-between;
     }
     section#service .comm__Inner .Item picture{
      width:40%;
     }
     section#service .comm__Inner .Item .Text{
      width: 57%;
     }
     section#service .comm__Inner .Item picture img{
      width: 100%;
      object-fit: cover;
     }

    #service .comm__Inner .Item p{
      font-size: 0.8rem;
      line-height: 1.45;
    }

    #service .comm__Inner .Item a.btn{
      padding: .25em;
      font-size: 13px;
      border-radius: 6px;
      width: 120px;
      margin-left: auto;
      margin-right: 0;
    }

    .wd100{
      width: 100%;
      margin-top:calc( var(--row-space) / 2);
    }

    .service__bottom__box a{
      position: absolute;
      top:0;
      left:0;
      width: 100%;
      height: 100%;
      z-index: 10;
    }

    .service__bottom__box{
      display: flex;
      border-radius: 2.46em;
      background: #f2f4f9;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      overflow: hidden;
      position: relative;
    }

    .service__bottom__box .Item{
      width: calc(100% / 2);
            padding:clamp(1em, 1.604166666666667vw, 1.604166666666667vw);
            display: flex;
            flex-direction: column;
            align-items: flex-start;
    }

    .service__bottom__box picture{
      width: calc(100% / 2);
    }

    .service__bottom__box picture img{
      width: 100%;
    }

  @media screen and (max-width: 767px) {


    section#service .comm__Inner .Item {
      width:100%;
    }
    section#service .comm__Inner .Item{
      flex-direction: column;
    }
    section#service .comm__Inner{
      flex-direction: column;
    }
    section#service .comm__Inner .Item picture{
      width:100%;
     }
     section#service .comm__Inner .Item .Text{
      width: 100%;
      margin-top: 1em;
     }
     section#service .comm__Inner .Item picture img{
      width: 100%;
      object-fit: cover;
      max-height: 180px;
     }
  }

    section#products .comm__Inner{
      position: relative;
      z-index: 2;
      margin-bottom: 2.416666666666667vw;
    }


/*************  concept ******************/

section#concepts{
  background:#1c1b1b;
  padding:4.333333333333332vw 2.46vw;
  position: relative;

}

section#concepts::after{
  content: '';
  background: #efe300;
  position: absolute;
  bottom: 0;
  left:0;
  width: 100vw;
  height: 50%;
}

section#concepts .comm__Inner{
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  max-width: 1760px;
  margin: auto;
}

section#concepts .comm__Inner .Item{
  width:var(--flex_hurf);
  display: flex;
  flex-direction: column;
}

section#concepts .comm__Inner .Item:first-child{
  flex-direction: column-reverse;
}

section#concepts .comm__Inner .Text{
  padding: clamp(1em,12.222222222222221vw,110px);
  font-family: "ryo-display-plusn", serif;
}

section#concepts .comm__Inner .Text a{
  margin: 2.333333333333332vw 0 0;
}

section#concepts h2{
  color:#fff;
}

@media screen and (max-width: 767px) {

  section#concepts .comm__Inner{
    flex-wrap: wrap;
  }
  section#concepts .comm__Inner .Text{
    padding-top: 1em;
    padding-bottom: 1em;
    padding-left: 0;
    padding-right: 0;
  }

  section#concepts .comm__Inner .Item{
    padding-left: var(--row-space);
    padding-right: var(--row-space);
  }

}

@media screen and (min-width: 768px) and (max-width: 1024px) {

  section#concepts .comm__Inner{
    flex-wrap: wrap;
  }
  section#concepts .comm__Inner .Item{
    width: 100%;
  }

  section#concepts .comm__Inner .Text{
    padding-top: 0;
    padding-bottom: 4.333333333333332vw;
    padding-left: 4vw;
    padding-right: 4vw;
  }
  section#concepts .comm__Inner .Item picture{
    max-width: 50%;
    margin-left: auto;
    margin-right: auto;
  }
  section#concepts .comm__Inner .Item:first-child picture{
    margin-right: 0;
  }
  section#concepts .comm__Inner .Item:last-child picture{
    margin-left: 0;
    margin-top: -25vh;
  }
}

/*************  concept ******************/

/*************  shop ******************/

section#shop, section#recruit{
  background: #000;
  padding:4.333333333333332vw 2.46vw;
}

section#shop .comm__Inner{
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  max-width: 1760px;
  margin: auto;
  gap: 1.5625vw;
  width: 100%;
  align-items: center;
}

section#shop .comm__Inner .Item{
  width: var(--flex_hurf_space);
}

section#shop .comm__Inner .Item:first-child{
  display: flex;
  flex-wrap: wrap;
  gap: 1.5625vw;
}

section#shop .comm__Inner .Item:first-child picture{
  width: var(--flex_hurf_space);
  flex-grow: 2;
}

section#shop .comm__Inner .Item:first-child picture:first-child{
   width: 100%;
   flex-grow: 0;
}

section#shop .comm__Inner .Item:first-child picture img{
  width: 100%;
}

section#shop .comm__Inner .Item:last-child{
  padding:clamp(1em,12.222222222222221vw,110px);
}

dl.border{
  display: flex;
  flex-wrap: wrap;
  margin: auto;
    border-top: var(--key-Color) 0.5px solid;
}

dl.border dt, dl.border dd{
  color:#202020;
  font-size: clamp(15px,1.09375vw,17px);
  margin: 0;
  padding: .5em 1em;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

dl.border dt{
  width:25%;
  border:var(--key-Color) 0.5px solid;
  border-left: none;
  border-right: none;
  border-top: none;
  padding: .75em;
  font-weight: bold;
}

dl.border dd{
  width:75%;
  border:var(--key-Color)  0.5px solid;
  border-right: none;
  border-top: none;
  padding: .75em;
}
dl.border dd p{
	margin-top:0;
}

dl.border dd p:last-child{
	margin-bottom:0;
}

picture.logo{
  width: clamp(120px,21.354166666666664vw,400px);
  margin: 2.333333333333332vw auto;
  display: block;
}

.access__map iframe{
  width: 100vw !important;
  height:60vh !important;
}

section.recruit::after{
  content: '';
  background: #161616;
  position: absolute;
  bottom: 0;
  left:0;
  width: 100vw;
  height: 50%;
}

@media screen and (max-width: 767px) {

  picture.logo{
    width: 200px;
    margin-bottom: 1em;
  }

  section#shop .comm__Inner{
    flex-wrap: wrap;
  }

  section#shop .comm__Inner .Item, section#shop .comm__Inner .Item:last-child{
    width: 100%;
    padding-left: var(--row-space);
    padding-right: var(--row-space);
  }

  section#shop .comm__Inner .Item:last-child{
    padding-bottom: var(--row-space);
    padding-top: var(--row-space);
  }

  dl.border dt, dl.border dd{
    font-size: clamp(14px,1.09375vw,15px);
  }
	
	#access dl.border dd{
		padding-top:.75em;
	}

  dl.border dd p{
    font-size: 14px;
  }

  dl.border dt{
    width: 100%;
    border:1px solid var(--key-Color);
  }

  dl.border dd{
    width: 100%;
    border:none;
    padding-left: 0;
    padding-right: 0;
    padding-top: .75em;
  }

  dl.border dd p{
    margin-top: 0;
    margin-bottom: .5em;
  }

}

@media screen and (min-width: 768px) and (max-width: 1024px) {

  section#shop .comm__Inner{
    flex-wrap: wrap;
  }
  section#shop .comm__Inner .Item{
    width: 100%;
  }

  section#shop .comm__Inner .Item:last-child{
    padding-left: 2vw;
    padding-right: 2vw;
    padding-top: 0;
    padding-bottom: 2vw;
  }
  picture.logo{
    width:clamp(300px, 21.354166666666664vw, 400px);;
  }
}

@media screen and (min-width: 1025px) and (max-width: 1500px) {
section#shop .comm__Inner .Item:last-child{
  padding:clamp(1em,12.222222222222221vw,20px);
}
}


/*************  shop ******************/