@charset "UTF-8";

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

 .wrapper {
  padding-top: 91px;
 }
 .profilearea .threerivers {
  font-size: 16px;
  font-size: clamp(16px, 4.267vw, 20px);
  text-align: center;
  margin-bottom: 20px;
 }
 .profilearea h1,.profilearea h2 {
  /* font-size: 50px; */
  font-size: clamp(50px, 13.333vw, 100px);
  text-align: center;
  line-height: 1;
 }
 .profilearea h2 {
  margin-top: -3px;
 }
 .profilearea h3 {
  /* font-size: 28px; */
  font-size: clamp(28px, 7.467vw, 56px);
  line-height: 1.17857;
  text-align: center;
  /* margin-top: 36px; */
  margin-top:  clamp(36px, 9.6vw, 72px);
 }
 .profilearea h4 {
  /* font-size: 20px; */
  font-size: clamp(20px, 5.333vw, 40px);
  line-height: 1;
  text-align: center;
  /* margin-top: 31px; */
  margin-top:  clamp(31px, 8.267vw, 62px);
 }
 .profilearea .myimage {
  width: 88%; /* width: 330px; */
  margin: 36px auto 0;
  margin-top:  clamp(36px, 9.6vw, 72px);
 }
 .profilearea .tab-wrap {
  width: 84%; /* width: 315px; */
  margin: 0 auto;
 }
 .profilearea .tab-list {
  text-align: center;
  margin: 20px 0 16px;
  font-size: 0;
 }
 .profilearea .tab-item {
  display: inline;
  text-align: center;
  cursor: pointer;
  transition: .4s ease-in-out;
  font-size: 13px;
 }
 .profilearea .tab-item:first-child {
  position: relative;
  margin-right: 14px;
 }
 .profilearea .tab-item:first-child::after {
  content: "/";
  position: absolute;
  right: -10px;
 }
 .profilearea .tab-item:hover,
 .profilearea .tab-item.is-active {
  text-decoration: underline;
 }
 .profilearea .panel-list {
 }
 .profilearea .panel-item {
  display: none;
  width: 100%;
 }
 .profilearea .panel-item:last-child {
  letter-spacing: -0.05em;
  }
 .profilearea .panel-item .name {
  font-size: 28px;
  text-align: center;
 }
 .profilearea .panel-item .yakushoku {
  font-size: 16px;
  text-align: center;
  margin: 4px 0 24px;
 }
 .profilearea .panel-item .txt {
  font-size: 11px;
  line-height: 2;
  text-align: justify;
 }
 .profilearea .panel-item.is-active {
  display: block;
  animation: panel-show .9s ease-in-out forwards;
 }
 .profilearea .panel-item dl {
  width: 100%;
  margin-top: 30px;
 }
 .profilearea .panel-item dt {
  font-weight: normal;
  margin-bottom: 9px;
  font-size: 13px;
 }
 .profilearea .panel-item dd {
  margin-bottom: 29px;
  font-size: 12px;
  line-height: 2;
  word-break: break-all;
 }
  .profilearea .panel-item:last-child dd:last-child {
  letter-spacing: normal;
 }
 .profilearea .panel-item dd ul li a {
  text-decoration: underline;
 }
 .profilearea .panel-item dd ul li {
  float: left;
  margin-right: 15px;
 }
 .profilearea .panel-item dd ul li:first-child {
  position: relative;
  margin-right: 14px;
}
.profilearea .panel-item dd ul li:first-child::before {
  content: "/";
  position: absolute;
  right: -10px;
}

  @keyframes panel-show {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  .projectarea {
   margin-top: 82px;
   margin-bottom: 76px;
  }
  .projectarea h1 {
   /* font-size: 32px; */
   font-size: clamp(32px, 8.533vw, 64px);
   text-align: center;
   margin-bottom: 39px;
  }
  .projectarea ul {
   width: 88%; /* width: 330px; */
   margin: 0 auto;
  }
  .projectarea ul li {
   width: 100%;
   margin-bottom: 43px;
  }
  .projectarea ul li a {
   display: block;
  }
  .projectarea ul li a .inner {
    overflow: hidden;
   }  
  .projectarea ul li h2 {
    font-size: 20px;
    margin: 18px 0 8px;
  }
  .projectarea ul li p {
    color: #666666;
    font-size: 11px;
  }
  .projectarea .viewallprojects {
   text-align: center;
   font-size: 16px;
   margin-top: 48px;
   margin-bottom: 48px;
   padding-bottom: 5px;
  }
  .projectarea .viewallprojects a {
    position: relative;
    display: inline-block;
    text-decoration: none;
   }
  .projectarea .viewallprojects a::after {
    position: absolute;
    bottom: -5px;
    left: 0;
    content: '';
    width: 100%;
    height: 1px;
    background: #333333;
    transform: scale(1, 1);
    transform-origin: right top;
    transition: transform .3s;
  }
  .projectarea .attention {
   width: 84%; /* width: 315px; */
   margin: 0 auto;
   font-family: "dnp-shuei-gothic-gin-std", sans-serif;
   font-weight: 500;
   font-style: normal;
   text-align: left;
   font-size: 10px;
   line-height: 1.5;
   color: #666666;
  }
  .projectarea .attention a {
    text-decoration: underline;
   }  
 
}



@media screen and (min-width: 1025px) {

 .wrapper {
  padding-top: 126px;
 }
 .profilearea .threerivers {
  text-align: center;
  font-size: 16px;
  font-size: clamp(16px, 1.11vw, 20px);
  margin-bottom: 30px;
 }
 .profilearea h1,.profilearea h2 {
  font-size: 120px;
  font-size: clamp(120px, 8.3vw, 180px);
  text-align: center;
  line-height: 1;
 }
 .profilearea h2 {
  margin-top: -16px;
 }
 .profilearea h3 {
  font-size: 56px;
  font-size: clamp(56px, 3.89vw, 80px);
  line-height: 1.17857;
  text-align: center;
  margin-top: 68px;
 }
 .profilearea h4 {
  font-size: 40px;
  font-size: clamp(40px, 2.778vw, 55px);
  line-height: 1;
  text-align: center;
  margin-top: 40px;
 }
 .profilearea .myimage {
  width: 45.1389%; /* width: 650px; */
  /* max-width: 900px; */
  min-width: 650px;
  margin: 64px auto 0;
 }

 .profilearea .tab-wrap {
  width: 45.1389%; /* width: 650px; */
  /* max-width: 900px; */
  min-width: 650px;
  margin: 0 auto;
 }
 .profilearea .tab-list {
  text-align: center;
  margin: 25px 0 20px;
  font-size: 0;
 }
 .profilearea .tab-item {
  display: inline;
  text-align: center;
  cursor: pointer;
  transition: .4s ease-in-out;
  font-size: 16px;
 }
 .profilearea .tab-item:first-child {
  position: relative;
  margin-right: 14px;
 }
 .profilearea .tab-item:first-child::before {
  content: "/";
  position: absolute;
  right: -10px;
 }
 .profilearea .tab-item {
  position: relative;
  display: inline-block;
  text-decoration: none;
 }
 .profilearea .tab-item::after {
  position: absolute;
  bottom: 0;
  left: 0;
  content: '';
  width: 100%;
  height: 1px;
  background: #333333;
  transform: scale(0, 1);
  transform-origin: right top;
  transition: transform .2s cubic-bezier(.55,.05,.22,.99);
}
.profilearea .tab-item.is-active::after {
  transform: scale(1, 1);
}
.profilearea .tab-item:hover::after {
  transform-origin: left top;
  transform: scale(1, 1);
}


 .profilearea .panel-list {
 }
 .profilearea .panel-item {
  display: none;
  width: 100%;
 }
.profilearea .panel-item:last-child {
  letter-spacing: -0.05em;
  }
 .profilearea .panel-item .name {
  font-size: 32px;
  text-align: center;
 }
 .profilearea .panel-item .yakushoku {
  font-size: 18px;
  text-align: center;
  margin: 6px 0 26px;
 }
 .profilearea .panel-item .txt {
  font-size: 14px;
  line-height: 2.2857;
  text-align: justify;
 }
 .profilearea .panel-item.is-active {
  display: block;
  animation: panel-show .9s ease-in-out forwards;
 }
 .profilearea .panel-item dl {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  font-size: 14px;
  line-height: 2.2857;
  margin-top: 38px;
 }
 .profilearea .panel-item dt {
  width: 230px;
  font-weight: normal;
  margin-bottom: 20px;
 }
 .profilearea .panel-item dd {
  width: calc(100% - 230px);
  margin-bottom: 20px;
  word-break: break-all;
 }
 .profilearea .panel-item:last-child dd:last-child {
  letter-spacing: normal;
 }
 .profilearea .panel-item dd ul li a {
  text-decoration: underline;
 }
 .profilearea .panel-item dd ul li {
  float: left;
  margin-right: 15px;
 }
 .profilearea .panel-item dd ul li:first-child {
  position: relative;
  margin-right: 14px;
}
.profilearea .panel-item dd ul li:first-child::before {
  content: "/";
  position: absolute;
  right: -10px;
}

 @keyframes panel-show {
   from {
     opacity: 0;
   }
   to {
     opacity: 1;
   }
 }

 .projectarea {
  margin-top: 192px;
  margin-bottom: 111px;
 }
 .projectarea h1 {
  font-size: 72px;
  font-size: clamp(72px, 5vw, 130px);
  text-align: center;
  margin-bottom: 92px;
 }
 .projectarea ul {
  width: 91.667%; /* width: 1320px; */
  /* max-width: 1800px; */
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
 }
 .projectarea ul li {
  width: 30.455%; /* width: 398px; */
  float: left;
  margin-bottom: 97px;
  margin-right: 4.3175%; /* margin-right: 63px; */
 }
 .projectarea ul li:nth-child(3n) {
  margin-right: 0;;
 }

 /* .projectarea ul li:nth-child(5n+1), .projectarea ul li:nth-child(5n+2) {
  width: 47.65%;
  margin-right: 4.7%;
}
 .projectarea ul li:nth-child(5n+3), .projectarea ul li:nth-child(5n+4), .projectarea ul li:nth-child(5n+5) {
  width: 30.455%;
}
.projectarea ul li:nth-child(5n+2),
.projectarea ul li:nth-child(5n+5) {
  margin-right: 0;
} */

 .projectarea ul li a {
  display: block;
 }

 /* https://www.omakase.net/blog/2022/05/img-hover.html */
 .projectarea ul li a .inner {
  overflow: hidden;
 }
 .projectarea ul li a img {
	transition: 0.8s;
 }
 .projectarea ul li a:hover img {
	transform: scale(1.1);
	transition: 0.8s;
  cursor: pointer;
}
 .projectarea ul li h2 {
  font-size: 24px;
  line-height: 1.2;
  margin: 26px 0 10px;
 }
 .projectarea ul li p {
  font-size: 12px;
  color: #666666;
 }
 .projectarea .viewallprojects {
  text-align: center;
  font-size: 20px;
  margin-top: 16px;
  margin-bottom: 52px;
  padding-bottom: 5px;
 }
.projectarea .viewallprojects a {
  position: relative;
  display: inline-block;
  text-decoration: none;
 }
 .projectarea .viewallprojects a::before {
  position: absolute;
  bottom: -5px;
  left: 0;
  content: '';
  width: 100%;
  height: 1px;
  border-bottom: 1px solid #aaaaaa;
  z-index: 1;
}
.projectarea .viewallprojects a::after {
  position: absolute;
  bottom: -5px;
  left: 0;
  content: '';
  width: 100%;
  height: 1px;
  background: #333333;
  transform: scale(0, 1);
  transform-origin: right top;
  transition: transform .7s cubic-bezier(.22,1,.36,1);
  z-index: 2;
}
.projectarea .viewallprojects a:hover::after {
  transform-origin: left top;
  transform: scale(1, 1);
}
 .projectarea .attention {
  font-family: "dnp-shuei-gothic-gin-std", sans-serif;
  font-weight: 500;
  font-style: normal;
  text-align: center;
  font-size: 13px;
  line-height: 2;
  color: #666666;
 }
 .projectarea .attention a {
  text-decoration: underline;
 }  

}