@charset "utf-8";
@media screen and (min-width: 768px){
    .sp{
      display: none;
    }
    .pc{
      display: block;
    }
*{
    margin: 0;
    padding: 0; 
    box-sizing: border-box;
  }
  body{
    background-color: #FDF1B7;
    font-family:"Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
    font-weight: bold;
    font-size: clamp(12px,1vw,16px);
    /* font-size: max(1vw,12px); */
    /* font-size: min(1vw,20px); */
    color: black; 
  }
  li{
    list-style-type: none;
    /* ＊先頭のリストマーカーを消す＊ */
  }
  img{
    border: none;
    display: block; 
   }
   a{
    text-decoration:none;
    color: black;
   }
.wrapper{
	width: 90%;
	max-width: 1600px;
	margin-left: auto;
	margin-right: auto;
}
.zen-kaku-gothic-new-regular {
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 600;
    font-style: normal;
  }
  #header-inner{
    width: 100vw;
    display: flex;
    position: fixed;
    z-index: 10000;
    justify-content: space-between;
    align-items: center;
  }
  #header-logo{
    width: 8%;
    margin-left: 5%;
  }
  #header-nav{
    /* background-color: #FDF1B7; */
    width: 70%;
    background-color: rgba(253, 241, 183, 0.7);
    background-image: url(../images/img_nav_line.png);
    background-repeat: no-repeat;
    background-position: 0 90%;
    background-size: 100%;
    padding-bottom: 2%;
    margin-right: 5%;
    border-radius:0 0 1rem 1rem;
    position: absolute;
    top:-40%;
    right: 0;
  transition: transform 1s;
}
#header-nav.hidden {
  transform: translateX(250%);
}
  #header-nav ul{
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 600;
    font-style: normal;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size:1vw;
    width: 90%;
    margin-left: 5%;
  }
  #header-nav a{
    display: block;
  }
  #header-nav a p{
    opacity: 0.9;
    transition: all 0.3s ease 0s;
  }

  #header-nav a .hover:hover{
    display: block;
    opacity: 1;
    color: #FC4D0D;
   
  }
  #header-nav ul li{
    padding-left: 2%;
  }
  #header-nav ul li:last-child{
    width: 10%;
    background-image: url(../images/img_nav_contact.png);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: 0% 95%;
    padding-top: 10%;

  }
  #nav-contact{
    font-size:1.5vw;
    color: #FC4D0D;
    -webkit-text-stroke: 0.05rem #FC4D0D;
  }
  #header-nav a .nav-hover{
    width: 100%;
    margin-left: -10%;
    margin-bottom: -40%;
    opacity: 0;
    transition: 1s;
  }
  #header-nav a .hover .nav-hover:hover{
    opacity: 0.9;
    transition: all 0.3s ease 0s;
  }

  #header-nav a .contact-hover{
    width: 80%;
    margin-left: 30%;
    margin-bottom: -40%;
    opacity: 0;
    transition: all 0.3s ease 0s;
  }
  #header-nav a .hover .contact-hover:hover{
    opacity: 1;
  }
  #loadingwrap{
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    background-color: #FDF1B7;
    z-index: 100000;
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* margin-left: 40%;
    padding-top: 30vh; */
  }
  .hideLoadingwrap{
    transition: opacity 2s ease;
    opacity: 0 !important; 
  }
  .showLoading-bird{
    transition: opacity 2s ease; 
    opacity: 1 !important;
  }
  .showOverlayImage{
    transition: opacity 2S 1s ease;
    opacity: 1 !important;
  }
  #loading-bird{
    width: 20%;
  }
  #fixedIcon{
    width: 5%;
    position: absolute;
    position: fixed;
    z-index: 100;
    bottom:5%;
    right: 0;
    transition: transform 0.5s;
  }
  #fixedIcon.hidden {
    transform: translateX(250%);
}
/* main{
  padding-bottom: 50%;
} */
  /* #topScroll{
  width: 5%;
  position: absolute;
  position: fixed;
  z-index: 100;
  bottom:5%;
  right: 0;
  } */
  #topScroll img{
    width: 65%;
    margin-left: auto;
    margin-right: auto;
  }
  .image-container {
    position: relative;
    width: 100%;
    padding-top: 15%;
    margin-left: auto;
    margin-right: auto;
}

.image {
    position: absolute;
    top: 70%;
    left: 0;
    width: 100%; /* 必要に応じてサイズを調整 */
    height: auto; /* 必要に応じてサイズを調整 */
}

.overlay {
  position: absolute;
  top: 70%;
  left: 0;
  z-index: 1;
    opacity: 0;
    transition: opacity 4s ease-in-out;  /* 透明度の変更に関するトランジション */
}
  h1{
    padding-top: 3%;
    text-align: center;
    font-size: clamp(16px, 2vw, 32px);
    /* font-size: min(2vw,32px); */
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 700;
    font-style: normal;
  }
  #main-text p{
    font-size: clamp(12px, 1.2vw, 24px);
    /* font-size: max(1.2vw,8px);
    font-size: min(1.2vw,24px); */
    text-align: left;
    padding: 5%;
    font-family:"Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
  }
  #main-text{
    width: 57%;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    margin-top: 62%;
    margin-bottom: 20%;
  }
  #main-text:before {
    position:absolute;
    content:"";
    box-sizing: border-box;
 
   /*位置は左上を指定*/
    top: 0;
    left: 0;
 
   /*50px × 50px の四角形を作成 */
    width: 10%;
    height: 70%;
 
   /*topとleftの辺だけを可視化する*/
    border-top: 1px solid black;
    border-left: 1px solid black;
}
 
#main-text:after {
    position: absolute;
    content: "";
    box-sizing: border-box;
 
   /*位置は右下を指定*/
    bottom: 0;
    right: 0;
   
    /*50px × 50pxの四角形を作成*/
    width: 10%;
    height: 70%;
 
   /*bottomとrightのへんだけを可視化する*/
    border-bottom: 1px solid black;
    border-right: 1px solid black;
}
#main-logo{
  position: relative;
  color: #fff;
}
#main-logo-1{
  width: 60%;
  position: absolute;
  left: 18%;
  transform: rotate(0deg);
  transition: 2s;
}
.after#main-logo-1{
  transform: rotate(180deg);
}
#main-logo-2{
  width: 80%;
  position: absolute;
  left: 7.7%;
}
#main-girl,#main-fox{
  width: 16%;
  font-size: min(1vw,18px);
  position: absolute;
  left: 70%;
  transition: all 0.5s ease 0.5s;
}
.after#main-girl{
 opacity: 0;
}
.after#main-fox{
  opacity: 1;
}
#main-girl p,#main-fox p{
  padding-top: 45%;
}
#main-fox{
  opacity: 0;
}
#main-girl{
  opacity: 1;
}
#toggle-button{
  position: absolute;
  padding-top: 18%;
  left: 76%;
  animation:rumble 1s linear infinite;
}
#toggle-button img{
  width: 40%;
  margin-left:30%;
  margin-bottom: 10%;
  cursor: pointer;
}
@keyframes rumble {
  0%   { transform:translate(0, 0); }
  25%  { transform:translate(0, 2px); }
  50%  { transform:translate(0, 0); }
  75%  { transform:translate(0, -2px); }
  100% { transform:translate(0, 0); }
}
#concept{
  max-width: 1600px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 90%;
}
#concept ul{
  display: flex;
  flex-wrap: wrap;
  column-count: 2;
  justify-content: space-between;
  margin-bottom: 10%;

}
#concept ul li:first-child{
  width: 40%;
}
#concept ul li:nth-child(2){
  width: 60%;
  /* width: 60%; */
}
#concept ul li:nth-child(3){
  width: 60%;
}
#concept ul li:nth-child(4){
  width: 40%;
}
#concept img{
  width: 40%;
  margin-top: -20%;

}
h2:first-letter {
  font-size: min(18vw,305px);
  letter-spacing: -1rem;/* 1文字目の文字色を赤色に指定 */
}
h2{
font-family: "altesse-std-64pt", sans-serif;
font-weight: 400;
font-style: normal;
font-size: min(9vw,146px);
color: #919BBF;
/* margin-left: 10%; */
}
#concept h2{
  margin-left: 10%;
}
.title img{
  width: 30%;
  margin-top: -4%;
  margin-left: 9%;
}
#concept .title img{
  width: 60%;
  margin-top: -10%;
  margin-left: 16%;
}
.title p{
  color: #919BBF;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: clamp(8px, 1.2vw, 24px);
  margin-left: 33%;
}
#concept .title p{
  margin-left: 63%;
}

h3{
  text-align: center;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: clamp(16px, 1.7vw, 32px);
}

.caption{
  width: 80%;
  padding-top: 3%;
  position: relative;
  margin-left: 10%;
  margin-right: 10%;
  margin-top: 5%;
  margin-bottom: 15%;
}
.caption p{
  /* font-size: clamp(12px, 1.2vw, 24px); */
  font-size: max(1.2vw,8px);
  font-size: min(1.2vw,24px);
  text-align: left;
  padding: 5%;
  font-family:"Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
  font-weight: bold;
}
.caption:before {
  position:absolute;
  content:"";
  box-sizing: border-box;

 /*位置は左上を指定*/
  top: 0;
  left: 0;

 /*50px × 50px の四角形を作成 */
  width: 10%;
  height: 70%;

 /*topとleftの辺だけを可視化する*/
  border-top: 1px solid black;
  border-left: 1px solid black;
}

.caption:after {
  position: absolute;
  content: "";
  box-sizing: border-box;

 /*位置は右下を指定*/
  bottom: 0;
  right: 0;
 
  /*50px × 50pxの四角形を作成*/
  width: 10%;
  height: 70%;

 /*bottomとrightのへんだけを可視化する*/
  border-bottom: 1px solid black;
  border-right: 1px solid black;
}
#concept-illust{
  position: relative;
  margin-top: 50%;
}
#concept-illust img{
  width: 100%;
  /* margin-left: 10%; */
}
.talk{
  writing-mode: vertical-rl;
  color: #fff;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: min(1vw, 20px);
  /* line-height: 1vw;
  letter-spacing: 0.2rem; */
}
#concept-girl{
  position: absolute;
  top: 8%;
  left: 8.5%;
  
}
#concept-fox{
  position: absolute;
  top: 16%;
  right: 34.5%;
}
#news{
  margin-top: max(-15%,-20px);
  margin-top: -6%;
  margin-bottom: 10%;
}
#news h2{
  margin-left: 10%;
}
#news .title{
  margin-left: 3%;
  margin-top: -30%;
  z-index: 1;
}
#news-content{
  background-color: #fff;
  width: 85%;
  margin-left: auto;
  margin-right: auto;
  border-radius: 1.5rem;
  height: 50%;
  /* overflow-y: scroll; */
  /* position: relative; */
}

#news-content ul{
  width: 90%;
  height: 430px;
  margin-left: auto;
  margin-right: auto;
  margin-top:-15%;
  padding-top: 25%;
  overflow-y: scroll;
}
#news-content li{
  background-image: url(../../images/img_line_news.png);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: 0 50%;
}
#news-content li p{
 padding-bottom: 5%;
 padding-left: 7%;
}
#news-content li a{
  color: #ED9C44;
 }
#news-scroll{
  cursor: pointer;
}
#news-scroll img{
  width: 3%;
  margin: auto;
  padding-bottom: 1%;
  z-index: 10;
  /* position: absolute; */
  /* position: fixed; */
  bottom: 5%;
  left: 50%;
}
#news-scroll p{
  text-align: center;
  color: #D9D9D9;
  font-size: 0.9vw;
  margin-top: -1%;
}
#design{
  max-width: 1600px;
  padding-bottom: 5%;
  margin-left: auto;
  margin-right: auto;
  background-image:url(../../images/bg_design.jpg);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: 50% 0;
  position: relative;
  background-color: #CBCCE0;
  /* padding-bottom: 10%; */
}
#design h2,#design h1{
  width: 90%;
  color: #1C8A5E;
  text-align: center;
  padding-top: 1%;
  font-family: "altesse-std-64pt", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: min(9vw,146px);
}
#design h1:first-letter {
  font-size: min(18vw,305px);
  letter-spacing: -1rem;/* 1文字目の文字色を赤色に指定 */
}
#design .title img{
  margin-left: auto;
  margin-right: auto;
  padding-right: 5%;
}
#design .title p{
  color: #1C8A5E;
  padding-left: 21.5%;
}
#design-menu{
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  cursor: pointer;
}
/* #design .scroll{
  margin-bottom: 9%;
} */
.scroll{
  display: flex;
  /* padding-bottom: 5%; */
  margin-left: 50%;
  /* margin-bottom: 3%; */
  animation:rumble 1s linear infinite;
  /* animation:blink 2s ease-in-out infinite alternate; */
}
@keyframes blink{
  0% {opacity:0;}
  100% {opacity:1;}
}
.scroll p{
  writing-mode: vertical-rl;
  font-family: "altesse-std-64pt", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: min(4vw,60px);
  color: #919BBF;
  margin-top: 1%;
  margin-left: -2%;
}
.scroll img{
  width: 1.5%;
}
/* #design-menu{
  margin-left: auto;
  margin-right: auto;
} */
.design-menu ul{
  width: 73%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 5%;
  margin-left: auto;
  margin-right: auto;
}
.design-menu ul li{
  width:18%;
  height: 170px;
  position: relative;
  /* background-image: url(../../images/icon_design_brownbox.png);
  background-repeat: no-repeat; */
}
.design-menu ul li a{
  opacity: 1;
  color: #fff;

}
.design-menu img{
  width: 90%;
  padding-top: 215px;
  /* height: 215px; */
  position: absolute;
  bottom: 0;
  left: 0;
}
.rollover {
  opacity:1;
}
.rollover .off {
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; /* 必要に応じてサイズを設定 */
  height: 100%;
  transition: 1s ease;
}
.rollover .on {
  z-index: 0;
}
.rollover .on,
.rollover .off {
  opacity:1;
}
.rollover:hover .off {
  opacity: 0;
}

.design-menu p{
  width: 80%;
  padding: 5%;
  position: absolute;
  text-align: center;
  bottom:14%;
  left: 5%;
}
.design-menu ul li:first-child::before {
  content: "1";
  display: inline-block;
  background-color: #1C8A5E;
  color: #fff;
  font-weight: bold;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  padding: 11px 19px;
  position: absolute;
  top: 43px;
  left: 2px;
  font-size: 18px;
  box-sizing: border-box;
  z-index: 2;
}
.design-menu ul li:nth-child(2)::before {
  content: "2";
  display: inline-block;
  background-color: #1C8A5E;
  color: #fff;
  font-weight: bold;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  padding: 11px 19px;
  position: absolute;
  top: 43px;
  left: 2px;
  font-size: 18px;
  box-sizing: border-box;
  z-index: 2;
}

.design-menu ul li:last-child::before {
  content: "3";
  display: inline-block;
  background-color: #1C8A5E;
  color: #fff;
  font-weight: bold;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  padding: 11px 19px;
  position: absolute;
  top: 43px;
  left: 2px;
  font-size: 18px;
  box-sizing: border-box;
  z-index: 2;
}
#web{
  display: block;
}
.open#web{
  display: none;
}
#graphic{
  display: none;
}
.open#graphic{
  display: block;
}
#logo-design{
  display: none;
}
.open#logo-design{
  display: block;
}
#illust-flower{
  position: absolute;
  width: 10%;
  bottom: -5px;
  right: 14px;
}
#illust-flower img{
  width: 100%;
}
#design-scroll{
  background-color: #919BBF;
  max-width: 1600px;
  margin-left: auto;
  margin-right: auto;
}
.new{
  width: 30%;
  margin-bottom: -13%;
  margin-left: 9.5%;
  display: block;
  color: black;
  font-size:20px;
  font-weight: 400;
  text-align: center;
  padding: 5%;
  position: relative;
  animation:rumble 1s linear infinite;
}
.new::before{
  position: absolute;
  content: "";
  background-image: url(../images/img_before_line_black.png);
  background-size: 100%;
  background-repeat: no-repeat;
  width: 5%;
  height: 15%;
  left: 34%;
  top: 4%;
  bottom: 0;
  margin: auto;
}
  .new::after {
      position: absolute;
      content: "";
      background-image: url(../images/img_after_line_black.png);
      background-size: 100%;
      background-repeat: no-repeat;
      width: 5%;
      height: 15%;
      left: 60%;
      top: 4%;
      bottom: 0;
      margin: auto;
    }
.slash{
  width: 30%;
  margin-left: auto;
  margin-right: auto;
  display: block;
  color: #fff;
  font-size: clamp(11px, 1.2vw, 24px);
  text-align: center;
  padding: 5%;
  position: relative;
}
#back span{
  font-size: clamp(8px, 0.8vw, 12px);
}
.sup{
  color: #959595;
  font-size: clamp(8px, 0.8vw, 12px);
  margin-top: 1%;
  margin-left: 70%;
}
.sup img{
  width: 55%;
}
#design-scroll .design-menu{
  margin-top: -5%;
  padding-bottom: 5%;
}
.slash::before{
position: absolute;
content: "";
background-image: url(../images/img_before_line.png);
background-size: 100%;
background-repeat: no-repeat;
width: 10%;
    height: 16%;
    left: 25%;
    top: -22%;
    bottom: 0;
    margin: auto;
  }
.slash::after {
    position: absolute;
    content: "";
    background-image: url(../images/img_after_line.png);
    background-size: 100%;
    background-repeat: no-repeat;
    width: 10%;
    height: 16%;
    left: 66%;
    top: -22%;
    bottom: 0;
    margin: auto;
  }
#web .design-title::before{
  content: "1";
  display: inline-block;
  background-color: #1C8A5E;
  color: #fff;
  font-weight: bold;
  width: 12%;
  height: 13%;
  border-radius: 50%;
  padding: 4% 5.5%;
  position: absolute;
  top: 7%;
  left: 38%;
  font-size: 18px;
  box-sizing: border-box;
  z-index: 0;
}
#graphic .design-title::before{
  content: "2";
  display: inline-block;
  background-color: #1C8A5E;
  color: #fff;
  font-weight: bold;
  width: 12%;
  height: 13%;
  border-radius: 50%;
  padding: 4% 5.5%;
  position: absolute;
  top: 6%;
  left: 32%;
  font-size: 18px;
  box-sizing: border-box;
  z-index: 0;
}
#logo-design .design-title::before{
  content: "3";
  display: inline-block;
  background-color: #1C8A5E;
  color: #fff;
  font-weight: bold;
  width: 12%;
  height: 12%;
  border-radius: 50%;
  padding: 3.5% 5%;
  position: absolute;
  top: 6%;
  left: 41%;
  font-size: 18px;
  box-sizing: border-box;
  z-index: 0;
}
#web,#graphic,#logo-design{
  background-image: url(../images/bg_grid.png);
  margin-top: -3%;
  max-width: 1600px;
  margin-left: auto;
  margin-right: auto;
}
#web ul .design-title,#logo-design .design-title{
  position: relative;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: min(5.5vw,80px);
  background-image: url(../../images/icon_design_brownbox_on.png);
  background-repeat: no-repeat;
  background-size: 30%;
  background-position: 30% 5%;
  padding-top: 10%;
  padding-left: 50%;
  padding-bottom: 50%;
}
#graphic ul .design-title{
  position: relative;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: min(4.5vw,65px);
  background-image: url(../../images/icon_design_brownbox_on.png);
  background-repeat: no-repeat;
  background-size: 30%;
  background-position: 18% 5%;
  padding-top: 10%;
  padding-left: 40%;
  padding-bottom: 50%;
}
#web .design-title:first-letter {
  font-size: min(5.5vw,80px);
  letter-spacing: 0;
}
#graphic .design-title:first-letter {
  font-size: min(4.5vw,65px);
  letter-spacing: 0;
}
#logo-design .design-title:first-letter {
  font-size: min(5.5vw,80px);
  letter-spacing: 0;
}
#web h3,#graphic h3,#logo-design h3{
  text-align: left;
  margin-top: 10%;
  margin-left: 5%;
  margin-bottom: 5%;
}
#web h3 span,#graphic h3 span,#logo-design h3 span{
  font-size: min(1vw, 20px);
  font-weight: 400;
}
#web ul,#graphic ul,#logo-design ul{
  display: flex;
  justify-content: space-between;
  margin-left: auto;
  margin-right: auto;
  padding-top: 10%;
  margin-bottom: -10%;
}
#web ul li,#graphic ul li,#logo-design ul li{
  width: 50%;
}

     .parent {
      width: 90%;
    max-width: 1600px;
    margin-top: 10%;
    margin-left: auto;
    margin-right: auto;
      display: grid;
      grid-template-columns: 50% repeat(6, 1fr);
      /* grid-template-rows: repeat(5, 1fr); */
      grid-column-gap: 0;
      grid-row-gap: 10px;
      }
      
      .main-thumbnail{ grid-area: 1 / 1 / 6 / 2; }
      .product-name   { grid-area: 1 / 2 / 2 / 8; }
      .product-caption  { grid-area: 2 / 2 / 3 / 8; }
      .figma { grid-area: 3 / 2 / 4 / 3; }
      .photoshop { grid-area: 3 / 3 / 4 / 5; }
      .illustrator  { grid-area: 3 / 5 / 4 / 7; }
      .empty{ grid-area: 3 / 7 / 4 / 8; }
      .html { grid-area: 4 / 2 / 5 / 3; }
      .css{ grid-area: 4 / 3 / 5 / 4; }
      .js { grid-area: 4 / 4 / 5 / 6; }
      .empty  { grid-area: 4 / 6 / 5 / 8; }
      .date  { grid-area: 5 / 2 / 6 / 3; }
      .date-cap { grid-area: 5 / 3 / 6 / 8; }
 

.parent img{
  width: 90%;
}
.product-name{
font-size: min(1.5vw, 24px);
}
.product-name span{
  font-size: min(1vw, 20px);
}
.product-caption{
  font-weight: 500;
  margin-bottom: 10px;
}
.product-caption span{
  font-weight: bold;
  color: #1C8A5E;
}
.product-caption .red{
  color: #FE081B;
}
.product-caption .black{
  color: black;
}
.figma,.photoshop,.html,.css,.canva{
  height: 40px;
  margin-right: 10px;
  padding-left: 5px;
  padding-top:8px;
  color: #fff;
  font-size: min(1.2vw, 20px);
}
.date,.date-cap,.size,.size-cap,.detail,.detail-cap,.illustrator,.js,
.size2,.size-cap2,.size3,.size-cap3,.size4,.size-cap4
{
  height: 40px;
  padding-top:8px;
  padding-left: 5px;
  color: #fff;
  font-size: min(1.2vw, 20px);

}
.figma{
  background-color: #1774A3;
} 
.photoshop{
  background-color: #7AD3FF;
}
.illustrator {
  background-color: #FFA400;
}
.html{
  background-color: #1C8A5E;
}
.css{
  background-color: #919BBF;
}
.js{
  background-color: #FF734D;
}
.canva{
  background-color: #E76FFF;
}
.date,.size,.detail{
  /* height: 50%;
  padding: 0 0 5% 2%; */
  background-color: black;
  color: #fff;
  font-size: min(1.2vw, 20px);
}
.date-cap,.size-cap,.detail-cap{
  background-color: #959595;
}
.tools,.tools2{
  background-color: #4374A5;
}
.tools,.tools2,.material{
  height: 40px;
  padding-left: 5px;
  padding-top:8px;
  color: #fff;
  font-size: min(1.2vw, 20px);
}
.material{
  background-color: #919BBF;
}
.link_line{
  display: block;
  color: #959595;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: min(2vw, 30px);
  width: 20%;
  margin-top: 5%;
  margin-right: 5%;
  padding-bottom: 5%;
  margin-left: auto;
  text-align: left;
}
/* .link_line p:hover{
  background: linear-gradient(90deg, #2F2F2F, #959595, #C9C9C9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  transition: all 0.3s ease 0s;
} */
.link_line:hover{
  color: black;
  transform: translate(2px,2px);
  transition: all 0.3s ease 0s;
}
.link_line_sup{
  display: block;
  color: #959595;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: min(1vw, 30px);
  width: 20%;
  margin-top: 5%;
  margin-right: 5%;
  padding-bottom: 5%;
  margin-left: auto;
  text-align: left;
}

.link_line img,.link_line_sup img{
  width: 100%;
}
#nekohare .photoshop  { grid-area: 3 / 2 / 4 / 4; }
#nekohare .illustrator{ grid-area: 3 / 4 / 4 / 6; }
#nekohare .empty { grid-area: 3 / 6 / 4 / 8; }
#nekohare .html { grid-area: 4 / 2 / 5 / 3; }
#nekohare .css { grid-area: 4 / 3 / 5 / 4; }
#nekohare .js{ grid-area: 4 / 4 / 5 / 6; }
#nekohare .empty{ grid-area: 4 / 6 / 5 / 8; }
#nekohare .date  { grid-area: 5 / 2 / 6 / 3; }
#nekohare .date-cap{ grid-area: 5 / 3 / 6 / 8; } 


#banner-sample .canva { grid-area: 3 / 2 / 4 / 3; }
#banner-sample .empty { grid-area: 3 / 3 / 4 / 8; }
#banner-sample .date  { grid-area: 4 / 2 / 5 / 3; }
#banner-sample .date-cap{ grid-area: 4 / 3 / 5 / 8; }
#banner-sample .thumbnail_s{ grid-area: 5 / 2 / 6 / 8; } 

 .thumbnail_s img{
    width: 95%;
  }
 .thumbnail_s{
    display: flex;
    justify-content: space-between;
  }

#mantsune .photoshop { grid-area: 3 / 2 / 4 / 4; }
#mantsune .illustrator  { grid-area: 3 / 4 / 4 / 6; }
#mantsune .empty { grid-area: 3 / 6 / 4 / 8; }
#mantsune .size{ grid-area: 4 / 2 / 5 / 3; }
#mantsune .size-cap{ grid-area: 4 / 3 / 5 / 8; }
#mantsune .detail{ grid-area: 5 / 2 / 6 / 3; }
#mantsune .detail-cap{ grid-area: 5 / 3 / 6 / 8; }
#mantsune .date { grid-area: 6 / 2 / 7 / 3; }
#mantsune .date-cap{ grid-area: 6 / 3 / 7 / 8; }
#mantsune .thumbnail_s{ grid-area: 7 / 2 / 8 / 8; } 

#nanoflower-card .photoshop { grid-area: 3 / 2 / 4 / 4; }
#nanoflower-card .illustrator  { grid-area: 3 / 4 / 4 / 6; }
#nanoflower-card .empty { grid-area: 3 / 6 / 4 / 8; }
#nanoflower-card .size{ grid-area: 4 / 2 / 5 / 3; }
#nanoflower-card .size-cap{ grid-area: 4 / 3 / 5 / 8; }
#nanoflower-card .detail{ grid-area: 5 / 2 / 6 / 3; }
#nanoflower-card .detail-cap{ grid-area: 5 / 3 / 6 / 8; }
#nanoflower-card .date { grid-area: 6 / 2 / 7 / 3; }
#nanoflower-card .date-cap{ grid-area: 6 / 3 / 7 / 8; }
#nanoflower-card .thumbnail_s{ grid-area: 7 / 2 / 8 / 8; } 

#food-menu .photoshop { grid-area: 3 / 2 / 4 / 4; }
#food-menu .illustrator { grid-area: 3 / 4 / 4 / 6; }
#food-menu.empty { grid-area: 3 / 6 / 4 / 8; }
#food-menu .date { grid-area: 4 / 2 / 5 / 3; }
#food-menu .date-cap{ grid-area: 4 / 3 / 5 / 8; }
#food-menu .prepare { grid-area: 5 / 2 / 6 / 8; } 

.prepare{
  position: relative;
  margin-bottom: 5%;
}
.prepare img{
  width: 80%;
  margin-left: auto;
  margin-right: 0;
}
.prepare .talk{
  position: absolute;
  bottom: 43%;
  right: 17%;
  transform: rotate(23deg);
}

#yellowmoon-logo .illustrator{ grid-area: 3 / 2 / 4 / 4; }
#yellowmoon-logo .empty { grid-area: 3 / 4 / 4 / 8; }
#yellowmoon-logo .date{ grid-area: 4 / 2 / 5 / 3; }
#yellowmoon-logo .date-cap{ grid-area: 4 / 3 / 5 / 8; }
#yellowmoon-logo .thumbnail_s {grid-area: 5 / 2 / 6 / 8; } 

#HP-logo .main-thumbnail{ grid-area: 1 / 1 / 8 / 2; }
#HP-logo .illustrator{ grid-area: 3 / 2 / 4 / 4; }
#HP-logo .empty { grid-area: 3 / 4 / 4 / 8; }
#HP-logo .date { grid-area: 4 / 2 / 5 / 3; }
#HP-logo .date-cap { grid-area: 4 / 3 / 5 / 8; } 
#HP-logo .main-thumbnail{
  display: flex;
  justify-content: space-between;
}
#zodiac-logo .main-thumbnail{ grid-area: 1 / 1 / 8 / 2; }
#zodiac-logo .illustrator{ grid-area: 3 / 2 / 4 / 4; }
#zodiac-logo .empty { grid-area: 3 / 4 / 4 / 8; }
#zodiac-logo .date { grid-area: 4 / 2 / 5 / 3; }
#zodiac-logo .date-cap { grid-area: 4 / 3 / 5 / 8; } 
#zodiac-logo .main-thumbnail{
  display: flex;
  justify-content: space-between;
}
  #illustration{
    max-width: 1600px;
    padding-bottom: 5%;
    margin-left: auto;
    margin-right: auto;
    background-image: url(../../images/bg_illust.jpg);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: 0 0;
    background-color: #C1C8DB;
  }
  #illustration h2,#illustration h1{
    width: 100%;
    color: #1C8A5E;
    font-size: min(8vw,146px);
    padding-top: 3%;
    padding-left: 10%;
    font-family: "altesse-std-64pt", sans-serif;
font-weight: 400;
font-style: normal;
  }
  #illustration h1{
    margin-left: -30%;
  }
  #illustration h2::first-letter{
    font-size: min(10vw,305px);
    padding-right: 1%;
  }
  #illustration h1::first-letter{
    font-size: min(10vw,305px);
    padding-right: 1%;
    letter-spacing: -1rem;
  }
  #illustration .title img{
    width: 25%;
    margin-left: 12%;
    margin-top: -2%;
  }
  #illustration .title p{
    color: #1C8A5E;
    text-align: left;
    margin-left: 32%;
  }  
  #illustration .caption{
    width: 35%;
  }
  #illustration .caption h3{
    text-align: left;
    margin-left: 5%;
  }
  #illustration .link_line,
  #product .link_line,
  #portrait .link_line{
    display: block;
    background-color: #919BBF;
    padding: 1%;
    border-radius: 1rem;
    border-style: solid;
    border-color: #fff;
    border-width: 0.15rem;
    width: 20%;
    text-align: left;
    color: #fff;
    font-size: min(2vw,30px);
    margin-top: -13%;
    margin-left: 10%;
  }
  #portrait .link_line{
    width: 83%;
    padding: 5%;
    margin-left: 0%;
  }
  #product .link_line{
    margin-top: -7%;
    margin-left: 10%;
  }
  #illustration .link_line:hover{
    background-color: #1C8A5E;
    transform: translate(2px,2px);
    transition: all 0.3s ease 0s;
  }
  #product .link_line:hover{
    background-color: #1C8A5E;
    transform: translate(2px,2px);
    transition: all 0.3s ease 0s;
  }
  #portrait .link_line:hover{
    background-color: #1C8A5E;
    transform: translate(2px,2px);
    transition: all 0.3s ease 0s;
  }
  #illustration .link_line p,
  #blog .link_line p,
  #product .link_line p,
  #portrait .link_line p,
  #sub-link .link_line p{
    padding-left: 10%;
  }
  #illustration .link_line img, 
  #blog .link_line img,
  #product .link_line img,
  #portrait .link_line img,
  #sub-link .link_line{
    width: 80%;
    margin-left: 10%;
    margin-top: 1%;
  }
  #illustration .scroll{
    margin-top: 0%
  }
  
  #product{
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
    background-image: url(../../images/bg_product.jpg);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: 0 0;
    margin-top: -2.5%;
    padding-bottom: 10%;
    background-color:#B6B674;
  }
  #product ul{
    display: flex;
    width: 87%;
  }
  #product li:first-child{
    width: 35%;
  }
  #product li:last-child{
    width: 65%;
  }
  #product h2,#product h1{
    width: 100%;
    color: #919BBF;
    font-size: min(8vw,120px);
    padding-top: 40%;
    padding-left: 10%;
    font-family: "altesse-std-64pt", sans-serif;
font-weight: 400;
font-style: normal;
  }
  #product h1::first-letter{
    font-size: min(10vw,220px);
  }
  #product h2::first-letter{
    font-size: min(10vw,220px);
    letter-spacing: -1rem;
  }
  #product .caption{
  margin-left: -5%;
  margin-top: 15%;
  padding-left: 2%;
  }
  #product .title{
    width: 30%;
    margin: 10%;
  }
  #product .title img{
    width: 230%;
    margin-left: 12%;
    margin-top: -20%;
  }
  #product .title p{
    width: 100%;
    color: #919BBF;
    text-align: left;
    margin-left: 163%;
  }  
  #product .caption{
    width: 46%;
    margin-left: 5%;
  }
  #product .caption h3{
    text-align: left;
    margin-left: 5%;
  }
  #product .scroll{
    margin-top: 15%
  }
 #portrait{
    max-width: 1600px;
    padding-bottom: 5%;
    margin-left: auto;
    margin-right: auto;
    background-image: url(../../images/bg_portrait.jpg);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: 0 0;
    margin-top: -7%;
    background-color: #CFD5EB;
  }
  #portrait h2{
    width: 100%;
    color: #1C8A5E;
    font-size: min(8vw,146px);
    padding-top: 3%;
    padding-left: 10%;
    font-family: "altesse-std-64pt", sans-serif;
font-weight: 400;
font-style: normal;
  }
  #portrait h2::first-letter{
    font-size: min(10vw,305px);
  }
  #portrait h1::first-letter{
    font-size: min(10vw,305px);
    letter-spacing: -1rem;
  }
  #portrait .title img{
    width: 25%;
    margin-left: 12%;
    margin-top: -2%;
  }
  #portrait .title p{
    color: #1C8A5E;
    text-align: left;
    margin-left: 32%;
  }  
  #portrait .caption{
    width: 35%;
    margin-top: 1%;
    background-color: rgba(255,255,255,0.5);
  }
  #portrait .caption h3{
    text-align: left;
    margin-left: 5%;
    opacity: 1;
  }
  #portrait .caption span{
    font-size: min(1vw,16px);
  }
  #portrait .scroll{
    margin-top: 20%
  }#portrait .scroll img{
    width: 5%;
  }
  #portrait ul{
    display: flex;
    width: 50%;
    margin-left: 10%;
    margin-top: -10%;
  }
  #portrait ul li{
    width: 60%;
  }

  #profile{
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
    background-image: url(../../images/bg_profile.jpg);
    background-repeat: no-repeat;
    background-size: 110%;
    background-position: 0 0;
    padding-bottom: 5%;
    padding-top: 2%;
    margin-top: -3%;
  }

  #profile-inner{
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    background-color: rgba(255,255,255,0.5); 
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    /* grid-template-rows: repeat(3, 1fr); */
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    padding: 2%;
    }
    
    .profile-caption{ grid-area: 1 / 1 / 2 / 4; }
    .profile-photo { grid-area: 1 / 4 / 2 / 7; }
    .photo01 { grid-area: 2 / 1 / 3 / 3; }
    .photo02 { grid-area: 2 / 3 / 3 / 5; }
    .photo03 { grid-area: 2 / 5 / 3 / 7; }
    .photo04 { grid-area: 3 / 1 / 4 / 3; }
    .photo05 { grid-area: 3 / 3 / 4 / 5; }
    .photo06 { grid-area: 3 / 5 / 4 / 7; } 

    .profile-caption{
      width: 100%;
      margin-bottom: 4%;
      position: relative;
    }
    .profile-caption p{
      font-size: clamp(12px, 1.2vw, 24px);
      /* font-size: max(1.2vw,8px);
      font-size: min(1.2vw,24px); */
      text-align: left;
      padding: 5%;
      font-family:"Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
      font-weight: bold;
    }
    .profile-caption:before {
      position:absolute;
      content:"";
      box-sizing: border-box;
    
     /*位置は左上を指定*/
      top: 0;
      left: 0;
    
     /*50px × 50px の四角形を作成 */
      width: 10%;
      height: 70%;
    
     /*topとleftの辺だけを可視化する*/
      border-top: 1px solid black;
      border-left: 1px solid black;
    }
    
    .profile-caption:after {
      position: absolute;
      content: "";
      box-sizing: border-box;
    
     /*位置は右下を指定*/
      bottom: 0;
      right: 0;
     
      /*50px × 50pxの四角形を作成*/
      width: 10%;
      height: 70%;
    
     /*bottomとrightのへんだけを可視化する*/
      border-bottom: 1px solid black;
      border-right: 1px solid black;
    }

  .profile-caption #name{
    font-size: clamp(16px, 1.5vw, 32px);
  }
  #instagram,#other_link{
    width: 32%;
    display: flex;
    justify-content: space-between;
    margin-left: 63%;
    padding-bottom: 3%;
  }
  #instagram p,#other_link p{
    color: #6d6d6d;
    padding-bottom: 1%;
  }
  #instagram img{
    width: 100%;
  }
  #instagram:hover{
    transform: translate(2px,2px);
    transition: all 0.3s ease 0s;
  }
  #other_link:hover{
    transform: translate(2px,2px);
    transition: all 0.3s ease 0s;
  }
  .profile-photo{
    margin-left: 4%;
    margin-bottom: 4%;
  }
  .profile-photo img{
    width: 100%;
  }
  .photo01 img,.photo02 img,.photo03 img,
  .photo04 img,.photo05 img,.photo06 img{
    width: 100%;
  }
 
  #blog{
    background-color: #CFD5EB;
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
    background-image: url(../images/bg_grid.png);
    padding-bottom: 3%;
  }
  #blog ul{
    display: flex;
    justify-content: space-between;
    width: 90%;
    margin-left: 6%;
     padding-bottom: 5%;
  }
  #blog ul img{
    width: 90%;
  }
  #blog ul img:hover{
     /* border-style: solid;
    border-color: #1C8A5E;
    border-width: 0.15rem; */
    border-radius: 0.5rem;
    transform: translate(2px,2px);
    transition: all 0.3s ease 0s;
  }
  #whale{
    position: relative;
    margin-left: 5%;
    padding-top: 2%;
  }
  #whale img{
    width: 40%;
  }
  #whale p{
    position: absolute;
    left: 5%;
    top: 15%;
  }
  #blog .link_line{
    display: block;
    background-color: #919BBF;
    padding: 1%;
    border-radius: 1rem;
    border-style: solid;
    border-color: #fff;
    border-width: 0.15rem;
    width: 30%;
    text-align: left;
    color: #fff;
    font-size: min(2vw,30px);
    margin-right: 5%;
  }
  #contact{
    display: flex;
    justify-content: space-between;
    margin-left: auto;
    margin-right: auto;
  }
  #mail p{
    padding-bottom: 3%;
  }
  #mail span{
    font-size: clamp(12px, 1.4vw, 20px);

  }
  #mail-link{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    column-count: 2;
    width: 90%;
    margin-left: -10%;
  }
  #mail-link li{
    margin-left: 5%;
    margin-bottom:5% ;
    width: 40%;
  }
  #mail-link .link_line{
    display: block;
    background-color: #ED9C44;
    padding:5% 5%;
    border-radius: 1rem;
    border-style: solid;
    border-color: #fff;
    border-width: 0.15rem;
    width: 100%;
    color: #fff;
    font-size: min(1.5vw,30px);
    margin-left: 5%;
    margin-right: 5%;
  }
  .link_line img,.pamph_link img{
    width: 100%;
    margin-top: -3%;
    padding-bottom: 2%;
  }
  #footer-menu ul{
    display: flex;
    justify-content: center;
    align-items: baseline;
    width: 60%;
    margin-bottom: 5%;
  }
  #footer-menu ul li{
    width: 24%;
    margin-right: 2%;
  }
  #footer-menu ul li:last-child{
    width: 50%;
  }
  #footer-menu ul li img{
    width: 75%;
    margin-left: 30%;
  }
  #footer-menu p{
    font-size: clamp(8px,0.8vw,14px);
  }
  #footer-menu a p{
    background-color: #919BBF;
    font-size: clamp(8px,0.8vw,16px);
    color: #fff;
    padding: 3%;  
    text-align: center;
  }
  #footer-menu a p:hover{
   background-color: #1C8A5E;
   transition: all 0.3s ease 0s;
  }
  footer{
    background-color:#FDF1B7;
  }
  #contact h2{
    width: 100%;
    color: #1C8A5E;
    font-size: min(8vw,146px);
    padding-top: 3%;
    padding-left: 10%;
  }
  #contact h2::first-letter{
    font-size: min(10vw,305px);
    padding-right: 2%;
  }
  #contact .title img{
    width: 66%;
    margin-left: 15%;
    margin-top: -3%;
  }
  #contact .title p{
    color: #1C8A5E;
    text-align: left;
    margin-left: 52%;
  }
  #mail{
    width: 60%;
    margin-top: 5%;
  }
  #link{
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 5%;
  background-color: #919BBF;
  }
  .splide__track{
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 5%;
    padding-bottom: 5%;
  }
  .splide a{
    opacity: 0.8;
    transition: all 0.3s ease 0s;
  }
  .splide a:hover{
    opacity: 1;
  }
  .splide img{
    width: 100%;
  }
    .splide__list{
      height: auto;
    }
    .splide__pagination {
      bottom: -1.5em;
}
#bnr-illust img,#bnr-product img,
#bnr-portrait img,#bnr-design img{
  position: relative;
}
#bnr-illust .title,#bnr-product .title,
#bnr-portrait .title,#bnr-design .title{
  position: absolute;
  top: 5%;
  left: 5%;
}
#bnr-illust h2,
#bnr-portrait h2{
  width: 100%;
  color: #1C8A5E;
  font-size: min(6vw,100px);
  padding-top: 10%;
  padding-left: 9%;
}
#bnr-product h2,#bnr-design h2{
  color: #919BBF;
  width: 100%;
  font-size: min(6vw,100px);
  padding-top: 10%;
  padding-left: 14%;
}
#bnr-illust h2::first-letter{
  font-size: min(9vw,200px);
  padding-right: 3%;
}
#bnr-product h2::first-letter{
  font-size: min(9vw,200px);
  padding-right: 2%;
}
#bnr-portrait h2::first-letter{
  font-size: min(9vw,200px);
  padding-right: 2%;
}
#bnr-design h2::first-letter{
  font-size: min(9vw,200px);
  padding-right: 3%;
}
#bnr-illust .title img{
  width: 70%;
  margin-left: 16%;
  margin-top: -6%;
}
#bnr-product .title img,#bnr-portrait .title img,#bnr-design .title img{
  width: 60%;
  margin-left: 16%;
  margin-top: -6%;
}
#bnr-portrait .title p{
  color: #1C8A5E;
  text-align: left;
  margin-left: 60%;
} 
#bnr-illust .title p{
  color: #1C8A5E;
  text-align: left;
  margin-left: 67%;

}
#bnr-product .title p,#bnr-design .title p{
  color: #919BBF;
  text-align: left;
  margin-left: 57%;
}

.sub_link{
  width: 50%;
  /* max-width: 1600px; */
  display: flex;
  justify-content:space-between;
  margin-left: auto;
  margin-right: 5%;
}
.sub_link a{
  background-color: #919BBF;
  padding: 3%;
  border-radius: 1rem;
  border-style: solid;
  border-color: #fff;
  border-width: 0.15rem;
  width: 40%;
  text-align: left;
  color: #fff;
  font-size: min(1vw,30px);
  /* margin-right: auto;
  margin-left: auto; */
  margin-bottom: 5%;
}
.sub_link a p{
  padding-bottom: 3%;
}
.sub_link a:hover{
  background-color: #1C8A5E;
  transform: translate(2px,2px);
  transition: all 0.3s ease 0s;
  color: #fff;
}
#minne-link{
  display: block;
  background-color: #FDF1B7;
  padding: 2%;
  border-radius: 1rem;
  border-style: solid;
  border-color: black;
  border-width: 0.2rem;
  width: 25%;
  text-align: center;
  color: #1C8A5E;
  font-size: min(1.5vw,24px);
  margin-top: -13%;
  margin-left: 10%;
}
#minne-sup-02{
  margin-top: 1%;
  margin-left: 12%;
  font-size: min(1vw, 16px);
  color: black;
 }
#minne-link:hover{
  background-color: #919BBF;
  transform: translate(2px,2px);
  transition: all 0.3s ease 0s;
}  
.pamph_link{
    display: block;
    background-color: #919BBF;
    padding:5% 5%;
    border-radius: 1rem;
    border-style: solid;
    border-color: #fff;
    border-width: 0.15rem;
    width: 100%;
    color: #fff;
    font-size: min(1.5vw,30px);
    margin-left: 5%;
    margin-right: 5%;
}
.pamph_link:hover{
  color: #fff;
  transform: translate(2px,2px);
  transition: all 0.3s ease 0s;
}  
}