@charset "UTF-8";
/* CSS Document */
html{
  scroll-behavior: smooth;
}

body {
  font-family: 'Noto Sans JP', "ヒラギノ角ゴ W3", "ヒラギノ角ゴ ", "Hiragino Kaku Gothic", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", sans-serif;
  font-weight:400;
  font-feature-settings: "palt";
  line-height: 2;
  letter-spacing: .1em;
  overflow-wrap: break-word;
  line-break: strict;
  font-size: clamp(14px, 1.8vw, 15px);
  color:#2E2E2E;
  -webkit-font-smoothing: antialiased;
}

.wrapper {
  max-width: 980px;
  margin: 0 auto;
}

.wrapper2{
  max-width: 1100px;
  margin: 0 auto;
  padding:0 20px;
  overflow: hidden;
}

.noto-bold{
  font-weight:700;
}

.english {
  font-family: Montserrat, Arial, 'Noto Sans JP',sans-serif;
  font-weight:400;
}

.capital{
  text-transform: uppercase;
}

.en-bold{
  font-family: Montserrat, Arial, sans-serif;
  font-weight:700;
}

.tex-bg {
  background-image: url(/../asset/img/img_paper-pat.webp);
  background-repeat: repeat;
  background-size: 476px;
}
  
/*---------------------------------

	PCメニュー

---------------------------------*/

#site_header{
  position:relative;
  width:100%;
}

.header-flex {
  z-index: 70;
  position: absolute;
  top: 0;
  right: 144px;
  letter-spacing:inherit;
}

.header-flex ul {
  width:980px;
  display: flex;
  justify-content: flex-end;
}

.header-flex ul li{
  padding: 56px 0 0 0;
  margin-left: 24px;
  list-style: none;
}

.header-flex :hover>a {
  color: #B5AE5E;
  transition : all .3s ease 0s;
  letter-spacing: .2em;
}

/*---------------------------------

	ハンバーガーメニュー

---------------------------------*/

.menu-btn {
  position: fixed;
  top: 24px;
  right: 24px;
  display: flex;
  height: 88px;
  width: 88px;
  justify-content: center;
  align-items: center;
  z-index: 90;
  border-radius: 50%;
  background-color: #DDD86D;
}
.menu-btn span,
.menu-btn span:before,
.menu-btn span:after {
  content: '';
  display: block;
  height: 1px;
  width: 40px;
  border-radius: 1px;
  background-color: #2E2E2E;
  position: absolute;
  transition: 0.3s;
}
.menu-btn span:before {
  bottom: 8px;
}
.menu-btn span:after {
  top: 8px;
}

.menu-btn:hover {
  transform: scale(.90);
  transition: .3s ease-in-out;
  cursor : pointer;
}

#menu-btn-check:checked ~ .menu-btn span {
  background-color: rgba(255, 255, 255, 0); /* メニューオープン時は真ん中の線を透明にする */
}

#menu-btn-check:checked ~ .menu-btn span::before {
  bottom: 0;
  transform: rotate(45deg);
}
#menu-btn-check:checked ~ .menu-btn span::after {
  top: 0;
  transform: rotate(-45deg);
}

#menu-btn-check {
  display: none;
}

/* ▼メニューの中身 */
.menu-content {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 80;
  background-color: #908b31;
}
.menu-content ul {
  padding: 100px 10px 0;
}
.menu-content ul li {
  list-style: none;
}
.menu-content ul li a {
  display: block;
  width: 100%;
  font-size: 15px;
  box-sizing: border-box;
  color:#2E2E2E;
  text-decoration: none;
  padding: 10px 16px 10px 32px;
  position: relative;
}

.menu-content {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 100%;/*leftの値を変更してメニューを画面外へ*/
  z-index: 80;
  background-color: hsla(57, 49%, 38%, 0.9);
  transition: all 0.5s;
}

#menu-btn-check:checked ~ .menu-content {
  left: 60%;/*メニューを画面内へ*/
}

.menu-content :hover>a {
  color:#ddd86d;
  transition : all .3s ease 0s;
  letter-spacing: .2em;
}

/*---------------------------------

	top-MV

---------------------------------*/

.mv{
  width:100%;
  height: 100vh;
  position:relative;
}

.mv img{
  max-width:570px;
  height:auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
}

.top-logo{
  animation-name: fadeUpAnime;/*アニメーションの定義名*/
  animation-duration:1s;
  animation-delay:.5s;
  animation-timing-function:ease-out;
  animation-fill-mode:forwards;
  opacity: 0;
}

 @keyframes fadeUpAnime{ /*定義 */
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/*---------------------------------

	about-me

---------------------------------*/
#about-me{
  margin-bottom: 130px;
}

.top-container{
  display: grid;
  grid-template-columns: 1fr 2fr;
}

.my-portrait{
  position: relative;
}

.my-portrait::before{
  content: url("/asset/img/txt_aboutme.svg");
  position: absolute;
  left: -30%;
  top:-100px;
}
.my-portrait::after{
  content: url("/asset/img/img_me.svg");
  position: absolute;
  top: 0px;
  padding-left:24%;
}

.my-portrait h2{
  position: absolute;
  height:auto;
  top: 112px;
  padding-left: 12px;
}

.introduce{
  padding-top:80px;
  margin-left:28px;
}

.introduce-txt{
  padding-top:24px;
}

.ye-bold{
  display: block;
  color: #7b7723;
  font-weight: 700;
}

.cando{
  margin: 56px 0 24px;
  font-size: 18px;
  display: flex;
}

.cando p{
  padding-left: 10px;
}


.introduce ul{
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.introduce ul li{
  list-style-type: none;
  padding:10px 0;
  display:flex;
  align-items: center;
}

.introduce ul li p {
  padding-left: 20px;
  line-height: 1.6;
  color: #605d1d;
}

/*---------------------------------

	works

---------------------------------*/
.common-works{
  margin-bottom: 120px;
}

.common-works h2{
  font-size: 28px;
  text-align: center;
  margin-bottom: 56px;
}

.works-flex{
  display: flex;
  justify-content: space-between;
}

.works-cat  {
  height: 230px;
  overflow: hidden;
  border-radius: 8px;
  margin-right: 16px;
}

.works-cat a {
  display:block;
  width:100%;
  background-color: #838383;
  position: relative;
}

.works-cat img:nth-child(1){
  display: block;
  height: 256px;
  object-fit: cover;
  mix-blend-mode: luminosity;
  opacity: .9;
}

.works-cat img:nth-last-child(1){
  position:absolute;
  bottom:38px;
  right:16px;
  width:40px;
  display: block;
  mix-blend-mode: normal;
  transform: rotate(90deg);
  transition:.3s;
}

.works-cat h3 {
  position:absolute;
  top: 16px;
  left: 20px;
  line-height:1.6;
  font-size: clamp(18px,1.8vw,20px);
  color:#ffe500;
  filter:drop-shadow(0 0 2px #2e2e2e);
  transition:.3s;
}

/* ▼ホバー */
.works-cat :hover ::before  {
  content: "";
  display: block;
  position:absolute;
  top:0;
  left:0;
  width: 100%;
  height: 110%;
  transition:.3s;
  z-index:100;
  background-color: #c2ba1eac; 
} 

.works-cat :not(.link-over) :hover ::before  {
  background-color: #c2ba1e00; 
} 

.works-cat :hover img:nth-child(1) {
  transform: scale(120%);
  transition:.3s;
}

.works-cat :hover img:nth-last-child(1) {
  right:8px;
  opacity: .5;
}

.works-cat :hover h3 {
  color:#2E2E2E;
  filter:initial;
  z-index:101;
}

.works-cat :not(.link-over) :hover ::after{
  opacity: .6;
  transition:.3s;
}

/*---------------------------------

	Contact

---------------------------------*/

.ft-center {
  display: grid;
  place-content: center;
  letter-spacing: 0.05em;
}

.ft-center img{
  margin: 0 auto;
  padding-left: 12px;
  width:100%;
}

.ft-txt{
  padding: 16px 0 56px;
  font-size: 14px;
  margin: 0 auto;
}

.mail-link {
  display: block;
  color:#17A8A8;
  padding: 8px 10px;
  background-color: #d4f0f300;
  text-decoration: underline;
  font-size: clamp(16px,1.8vw,20px);
  margin: 0 auto;
}

.copyright {
 text-align: center;
 display:block;
 color:#7B7723;
 font-size:12px;
 padding: 16px 0;
 margin-top: 140px;
 background-color: #DDDBC7;
 width:calc(100% - 80px);
}

.copyright span {
  padding-left: 80px;
 }

.arrow{
  display:block;
  width:80px;
  height:100px;
  background-color: #BFBA55;
  border-top-left-radius: 48px;
  transition-duration: .3s;
}

.arrow svg{
  margin: 46% 23px 0;
}

.ft-bottom{
  display:flex;
  align-items: end;
  margin-top: -20px;
}

#back-to-top{
  order:2;
}

/* ▼ホバー */

#back-to-top :hover {
  background-color: #9c962d;
  transition-duration: .3s;
  border-top-left-radius: 32px;
}

.mail-link :hover{
  padding: 8px 10px;
  background-color: #d4f0f3;
  border-radius: 25px;
  transition: .3s;
  letter-spacing: .08em;
}

/*---------------------------------

	下層-tit

---------------------------------*/

.back2home{
  display: inline-block;
  position:relative;
}

.back2home a{
  display: block;
  position:absolute;
  top: 32px;
  left: 24px;
  width:200px;
}

.back2home a :hover{
  opacity: .7;
  transition: .3s;
}

/*---------------------------------

	worksの各一覧

---------------------------------*/
.works-flex2{
  display: flex;
  flex-wrap: wrap;
}

.works-list{
  display:block;
  margin: 230px 0 130px;
}

.works-tit{
  font-size: 28px;
  margin-bottom: 56px;
  position: relative;
  width:100%;
}

.works-tit h2{
  line-height: 1.3;
  font-size: clamp(20px,1.8vw,28px);
}

.works-tit :before{
  content:url("/asset/img/img_txt-deco.svg");
  display:block;
  position: absolute;
  top:0;
  left:0;
  mix-blend-mode: darken;
}

.works-flex :nth-child(3n){
  margin-right:0;
}

.list-cat{
    width:calc((100% / 3) - 16px );
    margin-right:16px;
    border-radius: 8px;
    position:relative;
}
.list-cat img:nth-child(1){
  display: block;
  height: 190px;
  width:100%;
  object-fit: cover;
  overflow: hidden;
  border-radius: 8px;
  mix-blend-mode: luminosity;
}

.list-cat a{
 display: block;
}

.list-cat h3{
  font-weight:700;
  padding-top: 14px;
  margin-bottom: 48px;
}

.list-cat img:nth-last-child(1){
  position:absolute;
  top:144px;
  right:16px;
  width:40px;
  display: block;
  mix-blend-mode: normal;
  transform: rotate(90deg);
  transition:.3s;
}

/* ▼ホバー */
.list-cat :hover {
  transition: .3s;
  color:#908b31;
} 

.list-cat :hover h3{
  padding-left:4px;
  transition: .3s;
}

.list-cat :hover img:nth-child(1) {
  mix-blend-mode: initial;
} 

.list-cat :hover img:nth-last-child(1){
  right:10px;
}

/*---------------------------------

	works各詳細

---------------------------------*/
.work-link{
  display: inline-flex;
  font-size: clamp(12px, 1.8vw, 15px);
  margin-top: 28px;
  padding-bottom:6px;
  border-bottom: solid 1px #2E2E2E;
}

.work-link img{
  padding: 0 8px;
  width: 34px;
}

.works-tit :not([a]) :before {
  content:"";
  display: none;
}

.link-bottom{
  margin: 0 0 32px;
}

/* ホバー */
.works-tit a :hover, .overview a :hover {
  opacity: .5;
  transition: .3s;
}

.post-img1{
  display: grid;
  place-items: center;
  margin: 56px 0;
  overflow: hidden;
}

.post-img1 img{
  object-fit: cover;
  width:100%;
}

.post-img2{
  display: grid;
  grid-template-columns: repeat(2, 48%);
  gap:2%;
  justify-content: center;
  padding: 40px 0;
}

.overview{
  display:block;
  margin-left:45%;
  padding: 16px 0;
}

.overview p{
  padding:16px 0 32px 0;
}

.in-charge{
  margin: 16px 0 32px;
  border-collapse: collapse;
}

.in-charge td{
  padding:8px 0 8px 32px;
  border-left: solid 1px #908b31;
}

.in-charge th{
  color:#908b31;
  font-size: clamp(18px,1.8vw,26px);
  line-height: 1.6;
  text-align: left;
  padding-right: 24px;
}

.check-list{
  list-style: none;
  padding: 32px 0 24px;
}
.check-list li{
  display: flex;
  margin-bottom: 32px;
}

.check-list :before{
  content: url("/asset/img/icon/icon_check.svg");
  padding: 6px 16px 0 0;
  width: auto;
}

/*---------------------------------

	以下 画面幅1020px以下

---------------------------------*/
@media screen and (max-width: 1020px) {
  .sp-none{
    display:none;
  }
}

/*---------------------------------

	以下 画面幅768px以下

---------------------------------*/
@media screen and (max-width: 768px) {
  .mv img{
    width: 75%;
  }
  .my-portrait::before{
    position:initial;
  }

  .my-portrait h2 {
    top: 42%;
    padding-left: 22%;
  }

  .my-portrait::after {
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
  }

  .introduce {
    padding-top: 56px;
  }

  .top-container{
    grid-template-columns: repeat(auto-fit, 90%);
    justify-content: center;
  }

  .works-flex, .works-flex2{
    display:block;
  }

  .works-cat{
    height:auto;
    margin: 16px;
  }

  .works-cat img:nth-child(1){
     height:auto;
  }

  .works-cat img:nth-last-child(1) {
    bottom: 0;
    right: 0;
  }

  .works-flex :nth-child(3n) {
    margin: 16px;
  }

/* ▼下層 */
  .list-cat{
    width:100%;
    margin-right: 0;
  }

  .list-cat img:nth-child(1) {
    height: 240px;
    mix-blend-mode:initial;
  }

  .list-cat img:nth-last-child(1) {
    top: 193px;
  }

  .overview {
    margin: auto 0;
  }

  .in-charge{
    margin: 16px 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .in-charge th{
    min-width: 180px;
    padding-right: 5%;
  }

}

/*---------------------------------

	以下 画面幅480px以下

---------------------------------*/

@media screen and (max-width: 480px) {
  .menu-btn{
    top: 16px;
    right: 16px;
    height: 72px;
    width: 72px;
  }
  #menu-btn-check:checked ~ .menu-content {
    left: 16%;
  }

  .mv{
    height: 85vh;
  }

  .my-portrait::before {
    margin-left: -18%;
  }
  .my-portrait h2 {
    padding-left: 12%;
  }

  .my-portrait::after {
    padding-left: 100px;
  }

  .introduce {
    padding-top: 32px;
  }

  .introduce ul {
    display:block;
  }

  .ft-txt {
    padding:16px 24px 56px;
  }
  .ft-bottom {
    display:block;
    width:100%;
    margin-top: 120px;
    text-align: center;
  }

  .arrow, .copyright{
    width:100%;
    margin-top: 0;
    height: auto;
  }

  .arrow{
    border-radius: 16px 16px 0 0;
  }

  .arrow svg{
    margin: initial;
    padding-top:6px;
  }

  .copyright span {
    padding-left: 0;
  }

  /* ▼下層 */
  .back2home a {
    top: 20px;
    left: 16px;
    width: 160px;
  }
  .works-tit{
    margin-bottom: 48px;
  }

  .post-img1{
    margin: 32px 0;
  }
  .in-charge th{
    min-width: 90px;
  }
  .in-charge td {
    padding-left: 24px;
  }

  .post-img2{
    grid-template-columns:initial;
    padding-top:24px;
  }

}