@charset "utf-8";
@media screen and (max-width: 767px){
    .sp{
      display: block;
    }
    .pc{
      display: none;
    }
*{
    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(8px, 3.7vw, 20px);
    /* 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;
   }
   .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: 100000;
    justify-content: space-between;
    align-items: center;
  }
  #header-logo{
    width: 17.5%;
    max-width: 100px;
    position: absolute;
    left: 5%;
    margin-top: 24%;
  }
  #nav-toggle-before{
    width: 15%;
    max-width: 60px;
    position: absolute;
    right: 3%;
    margin-top: 20%;
    opacity: 1;
   transition: 1s;

  }
  .open #nav-toggle-before{
    opacity: 0;
  }
  #nav-toggle-before img{
    width: 89%;
  }
  #nav-toggle{
    width: 4%;
    max-width: 60px;
    right: 9%;
    margin-top: 17%;
    position: absolute;
    z-index: 1000;
  }
  #nav-toggle span {
    width: 100%;
    height: 0.15rem;
    left: 0;
    display: block;
    background: black;
    position: absolute;
    z-index: 1000;
    transition: all 1s ease 0s;
  }
   
  #nav-toggle span:nth-child(1) {
    top: 0;
    opacity: 0;
  }
   
  #nav-toggle span:nth-child(2) {
    top: 0.5rem;
    opacity: 0;
  }
   
  #nav-toggle span:nth-child(3) {
    top: 0.75rem;
    opacity: 0;
  }
  .open #nav-toggle span:nth-child(1) {
    top: 0.5rem;
    transform: rotate(45deg);
    opacity: 1;
  }
  
  .open #nav-toggle span:nth-child(2) {
    top: 0.5rem;
    opacity: 0;
    left: 50%;
  }
  
  .open #nav-toggle span:nth-child(3) {
    top: 0.5rem;
    transform: rotate(-45deg);
    opacity: 1;
  }
 
  #header-nav{
    width: 50vw;
    height: 100vh;
    background-color:rgba(255, 179, 171, 0.8);
    padding-bottom: 2%;
    border-radius:1rem 0 0 1rem;
    position: absolute;
    top:0;
    right: 0;
    overflow-y: auto;
    transform: translateX(125%);
    transition: all 1s ease 0s;
  }
  .open #header-nav{
    transform: translateX(0);
       /* background-color: #FDF1B7; */
       width: 50vw;
       height: 100vh;
       background-color:rgba(255, 179, 171, 0.8);
       /* background-image: url(../images/img_nav_line.png); */
       padding-bottom: 2%;
       border-radius:1rem 0 0 1rem;
       position: absolute;
       top:0;
       right: 0;
       overflow-y: auto;
       /* display: block; */
       transition: all 1s ease 0s;
  }
  #header-nav ul{
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 600;
    font-style: normal;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    font-size: clamp(16px,3vw, 32px);
    width: 80%;
    margin-top: 40%;
    margin-left: 15%;
  }
  #header-nav a{
    display: block;
  }
  #header-nav a p{
    opacity: 0.9;
    text-align: center;
    width: 100%;
    transition: all 0.3s ease 0s;
  }

  #header-nav a .hover:hover{
    display: block;
    opacity: 1;
    color: #FC4D0D;
   
  }
  #header-nav ul li{
    margin-bottom: 10%;
  }
  #header-nav ul li:first-child{
    margin-left: 15%;
  }
  #header-nav ul li img{
    width: 60%;
  }
  #header-nav ul li:last-child{
    width: 50%;
    background-image: url(../images/img_nav_contact.png);
    background-repeat: no-repeat;
    background-size: 80%;
    background-position: 0% 30%;
    padding-top: 20%;
    

  }
  #header-nav ul li:last-child:hover{
    background-image: url(../images/sp/img_contact_hover_sp.png);
    background-size: 50%;
    background-position: 25% 0%;
    /* transition: all 0.5s ease 0s; */
    /* padding-bottom: 10%; */
  }
  #nav-contact{
    font-size: clamp(16px, 3vw, 32px);
    color: #FC4D0D;
    -webkit-text-stroke: 0.05rem #FC4D0D;
  }
  #header-nav a .nav-hover{
    width: 50%;
    margin-left:-20% ;
    margin-bottom: -30%;
    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: -20%;
    margin-bottom: -40%;
    opacity: 0;
    transition: all 0.3s ease 0s;
  }
  #fixedIcon{
    width: 68px;
    position: fixed;
    z-index: 100;
    bottom:5%;
    right:0;
    opacity: 1;
    transition: transform 0.5s;
  }
  .open #fixedIcon{
    opacity: 0;
  }
  #icon-contact{
    display: block;
    padding:20% 15%;
    background-color: #FFB3AB;
    border-radius:1rem 0 0 0;
  }
  #fixedIcon.hidden {
    transform: translateX(250%);
}
  #topScroll img{
    width: 65%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 15%;
  }
  #icon-contact img{
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
  #icon-contact p{
    text-align: center;
    font-size: 10px;
    color: #FC4D0D;
    -webkit-text-stroke: 0.05rem #FC4D0D;
  }
  #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;
  }
  .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: 50%;
  }
  .image-container {
    position: relative;
    width: 100%;
    padding-top: 30%;
    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{
  width: 90%;
  padding-top: 5%;
  text-align: center;
  font-size: clamp(14px, 4.5vw, 20px);
  /* font-size: min(2vw,32px); */
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  font-style: normal;
  margin-left: auto;
  margin-right: auto;
}
#main-text p{
  font-size: clamp(12px, 4vw, 18px);
  /* 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: 400;
}
#main-text{
  width: 90%;
  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;
  padding-top: 20%;
  padding-bottom: 20%;
}
#main-logo-1{
  width: 62%;
  position: absolute;
  left: 20%;
  transform: rotate(0deg);
  transition: 2s;
}
.after#main-logo-1{
  transform: rotate(180deg);
}
#main-logo-2-sp{
  width: 94%;
  position: absolute;
  left: 3%;
  top: -37%;
    opacity: 1;
    transition: opacity 0.8s ease-in-out;
}
#main-girl,#main-fox{
  width: 30%;
  font-size:  clamp(10px, 2.8vw, 18px);
  position: absolute;
  left: 65%;
  bottom: 57%;
  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;
  left: 75%;
  margin-top: -2%;
  animation:rumble 1s linear infinite;
}
#toggle-button img{
  width: 40%;
  margin-left: 22%;
  margin-bottom: 10%;
  cursor: pointer;
}
#toggle-button p{
  font-size:  clamp(10px, 2.8vw, 22px);
}
@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{
  margin-left: auto;
  margin-right: auto;
  margin-top: 110%;
}
#concept ul{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* padding-top: 10%; */
}
#concept ul img{
  width: 40%;
}
h2:first-letter {
  font-size: min(30vw,305px);
  letter-spacing: -0.8rem;
  /* 1文字目の文字色を赤色に指定 */
}
h2{
font-family: "altesse-std-64pt", sans-serif;
font-weight: 400;
font-style: normal;
font-size: min(18vw,146px);
color: #919BBF;
margin-bottom: 5%;
}
#concept h2{
  padding-left: 20%;
}
.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(10px, 2vw, 20px);
}
#concept .title{
  margin-top: -10%;
  margin-left: 5%;
}
#concept .title img{
  width: 52%;
  margin-top: -11%;
  margin-left: 20%;
}

#concept .title p{
  margin-left: 60%;
}
h3{
  font-size: clamp(14px, 4.5vw, 20px);
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  font-style: normal;
}
.caption{
  width: 90%;
  padding: 5%;
  margin-top: 10%;
  margin-bottom: 10%;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  text-align: left;
}
.caption p{
  font-size: clamp(12px, 4vw, 18px);
  /* font-size: max(1.2vw,8px);
  font-size: min(1.2vw,24px); */
  font-family:"Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
  font-weight: 400;
  padding-top: 5%;

}
.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;
  z-index: 0;
}
#concept ul #concept-illust img{
  width: 80%;
  margin-left: auto;
  margin-right: 0;
}
.talk{
  writing-mode: vertical-rl;
  color: #fff;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size:  clamp(10px, 2.8vw, 18px);
  /* line-height: 1vw;
  letter-spacing: 0.2rem; */
}
#concept-girl{
  position: absolute;
  bottom: 68%;
  left: 25.5%;
  
}
#concept-fox{
  position: absolute;
  top: 15%;
  right: 27%;
}
#news{
  margin-top: max(-15%,-20px);
  margin-top: 18%;
  margin-bottom: 10%;

}
#news h2{
  margin-left: 10%;
}
#news .title{
  position: absolute;
  width: 60%;
  margin-top: -14%;
  margin-left: 5%;
}
#news .title img{
  width: 74%;
  margin-top: -15%;
  margin-left: 11%;
}
#news .title p{
  margin-left: 63%;
}
#news-content{
  background-color: #fff;
  width: 90%;
  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/sp/img_line_news_sp.png);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: 0 88%;
}
#news-content li p{
 padding-bottom: 5%;
 padding-left: 7%;
}
#news-content li a{
  color: #ED9C44;
 }
#news-scroll{
  cursor: pointer;
}
#news-scroll img{
  width: 5%;
  margin: auto;
  padding-bottom: 1%;
  z-index: 10;
  /* position: absolute; */
  /* position: fixed; */
  margin-top: 5%;
  bottom: 5%;
  left: 50%;
}
#news-scroll p{
  text-align: center;
  color: #D9D9D9;
  font-size: 10px;
  margin-top: -1%;
}
#design{
  margin-left: auto;
  margin-right: auto;
  background-image: url(../../images/sp/bg_design_sp.jpg);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: 0 0;
  padding-bottom: 10%;
  position: relative;
  background-color: #CBCCE0;
}
#design h2,#design h1{
  width: 50%;
  color: #1C8A5E;
  text-align: center;
  padding-top: 3%;
  margin-left: 21%;
  margin-right: auto;
  padding-right: 5%;
  font-family: "altesse-std-64pt", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: min(18vw,146px);
  margin-bottom: 5%;
}
#design h1:first-letter {
  font-size: min(30vw,305px);
  letter-spacing: -0.8rem;
  /* 1文字目の文字色を赤色に指定 */
}
#design .title img{
  width: 58%;
  margin-top: -11%;
  margin-left: 20%;
}
#design .title p{
  color: #1C8A5E;
  padding-left:63%;
}
#design-menu{
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.scroll{
  display: flex;
  margin-top: 10%;
  margin-left: 67%;
  animation:rumble 1s linear infinite;
}
@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(8vw,60px);
  color: #919BBF;
  margin-top: 4%;
  margin-left: -3%;
}
.scroll img{
  width: 4%;
}
/* #design-menu{
  margin-left: auto;
  margin-right: auto;
} */
.design-menu ul{
  width: 90%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 26%;
  margin-left: 9%;
  margin-right: auto;
}
.design-menu ul li{
  width:30%;
  position: relative;
  /* background-image: url(../../images/icon_design_brownbox.png);
  background-repeat: no-repeat; */
}
.design-menu ul li a{
  display: block;
  color: #fff;

}
.design-menu img{
  width: 70%;
  padding-top: 215px;
  position: absolute;
  bottom: 0;
  left: 0;
}
.rollover {
  display: block;
}
.rollover .off {
  z-index: 1;
  transition: 0.4s ease;
}
.rollover .on {
  z-index: 0;
}
.rollover .on,
.rollover .off {
  display: block;
}
.rollover:hover .off {
  opacity: 0;
}


.design-menu p{
  width: 67%;
  padding: 7% 6%;
  position: absolute;
  text-align: center;
  bottom: 10%;
  left: 1%;
  font-size: clamp(10px, 2.8vw, 14px);
}
.design-menu ul li:first-child::before {
  content: "1";
  display: inline-block;
  background-color: #1C8A5E;
  color: #fff;
  font-weight: bold;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  padding: 4px 13px;
  position: absolute;
  top: -80px;
  left: 1px;
  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: 35px;
  height: 35px;
  border-radius: 50%;
  padding: 4px 13px;
  position: absolute;
  top: -80px;
  left: 1px;
  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: 35px;
  height: 35px;
  border-radius: 50%;
  padding: 4px 13px;
  position: absolute;
  top: -80px;
  left: 1px;
  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;
}

#back span{
  font-size: clamp(8px, 2vw, 12px);
}
.sup{
  color: #959595;
  font-size: clamp(8px, 2vw, 12px);
  margin-top: 6%;
  margin-left: 58%;
}
.sup img{
  width: 72%;
}
#design-scroll .design-menu{
  margin-top: -5%;
  padding-bottom: 5%;
}
.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;
    }
  .new{
    width: 60%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: -5%;
    display: block;
    color: black;
    font-size: clamp(8px, 3vw, 24px);
    font-weight: 400;
    text-align: center;
    padding: 5%;
    position: relative;
    animation:rumble 1s linear infinite;
  }
  #back{
    width: 60%;
    margin-left: auto;
    margin-right: auto;
    display: block;
    color: #fff;
    font-size: clamp(8px, 3vw, 24px);
    text-align: center;
    padding: 5%;
    position: relative;
  }
  .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;
}
#web .design-title::before{
  content: "1";
  display: inline-block;
  background-color: #1C8A5E;
  color: #fff;
  font-weight: bold;
  width: 53px;
  height: 53px;
  border-radius: 50%;
  padding: 12px 23px;
  position: absolute;
  top: 7%;
  left: 25%;
  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: 53px;
  height: 53px;
  border-radius: 50%;
  padding: 12px 23px;
  position: absolute;
  top: 7%;
  left: 25%;
  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: 53px;
  height: 53px;
  border-radius: 50%;
  padding: 12px 23px;
  position: absolute;
  top: 7%;
  left: 25%;
  font-size: 18px;
  box-sizing: border-box;
  z-index: 0;
}
#web,#graphic,#logo-design{
  background-image: url(../images/bg_grid.png);
}
#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(9vw,60px);
  background-image: url(../../images/icon_design_brownbox_on.png);
  background-repeat: no-repeat;
  background-size: 50%;
  background-position: 0% 5%;
  padding-top: 10%;
  padding-left: 36%;
  padding-bottom: 50%;
  margin-left: 16%;
}
#graphic ul .design-title{
  position: relative;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  font-style: normal;
  background-image: url(../../images/icon_design_brownbox_on.png);
  background-repeat: no-repeat;
  background-size: 50%;
  background-position: 0% 5%;
  padding-top: 10%;
  padding-left: 36%;
  padding-bottom: 50%;
  margin-left: 13%;
  font-size: min(7.5vw,60px);
}
#web .design-title:first-letter {
  font-size: min(9vw,60px);
  letter-spacing: 0;
}
#graphic .design-title:first-letter {
  font-size: min(7.5vw,60px);
  letter-spacing: 0;
}
#logo-design .design-title:first-letter {
  font-size: min(9vw,60px);
  letter-spacing: 0;
}
#web h3,#graphic h3,#logo-design h3{
  width: 90%;
  text-align: left;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 5%;
}
#web h3 span,#graphic h3 span,#logo-design h3 span{
  font-size: min(3vw, 20px);
  font-weight: 400;
  padding-left: 5%;
}
#web ul,#graphic ul,#logo-design ul{
  width: 98%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-left: auto;
  margin-right: auto;
  padding-top: 10%;
}
#web .caption,#graphic .caption,#logo-design .caption{
margin-top: -15%;
margin-bottom: 10%;
}
.link_line{
  display: block;
  color: #959595;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: min(4vw, 30px);
  width: 50%;
  margin-top: 5%;
  margin-right: 10%;
  padding-bottom: 15%;
  margin-left: auto;
  text-align: left;
}
.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(3vw, 30px);
  width: 50%;
  margin-top: 5%;
  margin-right: 10%;
  padding-bottom: 15%;
  margin-left: auto;
  text-align: left;
}

.link_line img,.link_line_sup img{
  width: 100%;
}

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

    .parent img{
      width: 100%;
      max-width: 600px;
      margin-left: auto;
      margin-right: auto;
    }
    .product-name{
    font-size: min(4vw, 24px);
    /* padding:2% 5%; */
    }
    .product-name span{
      font-size: min(3vw, 20px);
    }
    .product-caption{
      font-weight: 500;
      margin-bottom: 10px;
      /* padding:2% 5%; */
    }
    .product-caption span{
      font-weight: bold;
      color: #1C8A5E;
    }
    .product-caption .red{
      color: #FE081B;
    }
    .product-caption .black{
      color: black;
    }
    .figma,.photoshop,.html,.css,.canva,.tools,.tools2,.material{
      height: 45px;
      margin-right: 10px;
      padding-left: 2px;
      padding-top:5px;
      color: #fff;
      font-size: min(3vw, 16px);
    }
    .date,.date-cap,.size,.size-cap,.detail,.detail-cap,.illustrator,.js{
      height: 45px;
      padding-top:5px;
      padding-left: 2px;
      color: #fff;
      font-size: min(3vw, 16px);
    
    }
    .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;
    }
    .tools,.tools2{
      background-color: #4374A5;
    }
    .material{
      background-color: #919BBF;
    }
    .date,.size,.detail{
      /* height: 50%;
      padding: 0 0 5% 2%; */
      background-color: black;
      color: #fff;
      font-size: min(3vw, 20px);
    }
    .date-cap,.size-cap,.detail-cap{
      /* height: 50%;
      padding: 0 0 5% 2%; */
      background-color: #959595;
      color: #fff;
      font-size: min(3vw, 20px);
    }
    .empty{
      opacity: 0;
    }
#nekohare .photoshop { grid-area: 4 / 1 / 5 / 3; }
#nekohare .illustrator  { grid-area: 4 / 3 / 5 / 5; }
#nekohare .empty { grid-area: 4 / 5 / 5 / 7; }

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

.thumbnail_s img{
  width: 100%;
}
.thumbnail_s{
  display: flex;
  justify-content: space-between;
}
.thumbnail_s a{
  margin-top: 5%;
  width: 48%;
}
#mantsune .photoshop,#nanoflower-card .photoshop { grid-area: 4 / 1 / 5 / 3; }
#mantsune .illustrator, #nanoflower-card .illustrator   { grid-area: 4 / 3 / 5 / 5; }
#mantsune .empty, #nanoflower-card .empty { grid-area: 4 / 5 / 5 / 7; }
#mantsune .size,#nanoflower-card .size{ grid-area: 5 / 1 / 6 / 2; }
#mantsune .size-cap,#nanoflower-card .size-cap{ grid-area: 5 / 2 / 6 / 7; }
#mantsune .detail,#nanoflower-card .detail{ grid-area: 6 / 1 / 7 / 2; }
#mantsune .detail-cap,#nanoflower-card .detail-cap{ grid-area: 6 / 2 / 7 / 7; }
#mantsune .date,#nanoflower-card .date { grid-area: 7 / 1 / 8 / 2; }
#mantsune .date-cap,#nanoflower-card .date-cap{ grid-area: 7 / 2 / 8 / 7; }
#mantsune .thumbnail_s,#nanoflower-card .thumbnail_s{ grid-area: 8 / 1 / 9 / 7; } 

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

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

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

#HP-logo .illustrator{ grid-area: 4 / 1 / 5 / 3; }
#HP-logo .empty  { grid-area: 4 / 3 / 5 / 7; }
#HP-logo .date{ grid-area: 5 / 1 / 6 / 2; }
#HP-logo .date-cap{ grid-area: 5 / 2 / 6 / 7; } 
#HP-logo .main-thumbnail{
  display: flex;
  justify-content: space-between;
}
#HP-logo .main-thumbnail img{
  width: 95%;
}
#zodiac-logo .illustrator{ grid-area: 4 / 1 / 5 / 3; }
#zodiac-logo .empty  { grid-area: 4 / 3 / 5 / 7; }
#zodiac-logo .date{ grid-area: 5 / 1 / 6 / 2; }
#zodiac-logo .date-cap{ grid-area: 5 / 2 / 6 / 7; } 
#zodiac-logo .main-thumbnail{
  display: flex;
  justify-content: space-between;
}
#zodiac-logo .main-thumbnail img{
  width: 95%;
}
  #illustration{
    margin-left: auto;
    margin-right: auto;
    background-image: url(../../images/sp/bg_illust_sp.jpg);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: 0 0;
    padding-bottom: 10%;
    position: relative;
    background-color: #C1C8DB;
  }
  #illustration h2,#illustration h1{
    width: 50%;
    color: #1C8A5E;
    text-align: center;
    padding-top: 3%;
    margin-left: 5%;
    margin-right: auto;
    padding-right: 5%;
    font-size: min(16vw,146px);
    font-family: "altesse-std-64pt", sans-serif;
    font-weight: 400;
    font-style: normal;
    margin-bottom: 5%;
  }
  #illustration h1:first-letter {
    font-size: min(30vw,305px);
    letter-spacing: -0.8rem;
  }
  #illustration .title img{
    width: 58%;
    margin-top: -11%;
    margin-left: 4%;
  }
  #illustration .title p{
    color: #1C8A5E;
    padding-left:50%;
  }
  #illustration .title img{
    width: 58%;
    margin-top: -11%;
    margin-left: 4%;
  }
  #illustration .title p{
    color: #1C8A5E;
    padding-left:50%;
  }
  /* #illustration .caption{
    width: 35%;
  }
  #illustration .caption h3{
    text-align: left;
    margin-left: 5%;
  } */
  #illustration .link_line,
  #product .link_line,
  #portrait .link_line,
  #blog .link_line{
    display: block;
    background-color: #919BBF;
    padding: 2%;
    border-radius: 1rem;
    border-style: solid;
    border-color: #fff;
    border-width: 0.1rem;
    width: 40%;
    text-align: left;
    color: #fff;
    font-size: min(4.5vw,30px);
    margin-top: 4%;
    margin-left: 10%;
  }
  #product .link_line{
    margin-top: -7%;
    margin-left: 10%;
  }
  #blog .link_line{
    margin-bottom: 5%;
    margin-left: auto;
    margin-right: 5%;
  }
  #product .scroll{
    margin-left: 50%;
    margin-top: 23%;
  }
  #product .scroll img{
    width: 3%;
  }
  #illustration .link_line p,
  #blog .link_line p,
  #product .link_line p,
  #portrait .link_line p{
    padding-left: 10%;
  }
  #illustration .link_line img, 
  #blog .link_line img,
  #product .link_line img,
  #portrait .link_line img{
    width: 85%;
    margin-left: 7%;
    margin-top: 1%;
  }
  #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 .scroll{
    margin-left: 50%;
    margin-top: 30%;
  }
  #illustration .scroll img{
    width: 2.5%;
  }
  #illust-girl{
    margin-right: 0;
    margin-left: auto;
    width: 30%;
    max-width: 1600px;
  }
  #illust-girl img{
    width: 28%;
    position: absolute;
    top: -17%;
    right: 3.5%;
  }
  #illust-girl p{
    position: absolute;
    top: -13%;
    right: 26%;
    z-index: 1;
  }
  #product{
    margin-left: auto;
    margin-right: auto;
    background-image: url(../../images/sp/bg_product_sp.jpg);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: 0 0;
    padding-bottom: 10%;
    position: relative;
    background-color:#B6B674;
  }
  #product ul{
   margin-top: -14%;
  }
  #product h2,#product h1{
    padding-top: 15%;
    margin-left: -15%;
    font-family: "altesse-std-64pt", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: min(18vw,146px);
    color: #919BBF;
    margin-bottom: 5%;
    font-family: "altesse-std-64pt", sans-serif;
font-weight: 400;
font-style: normal;
  }
  #product h1:first-letter {
    font-size: min(30vw,305px);
    letter-spacing: -0.8rem;
  }
  #product .title{
    width: 30%;
    margin: 12%;
  }
  #product .title img{
    width: 175%;
    margin-left: -10%;
    margin-top: -25%;
  }
  #product .title p{
    width: 100%;
    color: #919BBF;
    text-align: left;
    margin-left:120%;
  }  
  #product .caption{
    width: 46%;
    margin-left: 5%;
  }
  #product .caption h3{
    text-align: left;
    margin-left: 5%;
  }
  /* #product .scroll{
    margin-top: 15%
  } */
 #portrait{
  margin-left: auto;
  margin-right: auto;
  background-image: url(../../images/sp/bg_portrait_sp.jpg);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: 0 0;
  padding-bottom: 10%;
  position: relative;
  margin-top: -12%;
  background-color: #CFD5EB;
  }
  #portrait h2,#portrait h1{
    padding-top: 10%;
    margin-left: -25%;
    color: #1C8A5E;
    font-size: min(15vw,146px);
  }
  #portrait h2:first-letter {
    font-size: min(25vw,305px);
    letter-spacing: -0.8rem;
  }
  #portrait h1:first-letter {
    font-size: min(25vw,305px);
    letter-spacing: -0.8rem;
  }
  #portrait .title{
    width: 30%;
    margin: 10%;
  }
  #portrait .title img{
    width: 145%;
    margin-left: -20%;
    margin-top: -20%;
  }
  #portrait .title p{
    width: 100%;
    color: #1C8A5E;
    text-align: left;
    margin-left:96%;
  }  
  #portrait .caption{
    width: 46%;
    margin-left: 5%;
  }
  #portrait .caption h3{
    text-align: left;
    margin-left: 5%;
  }
  #portrait .scroll{
    margin-left: 40%;
    margin-top: 20%;
  }
  #portrait .scroll img{
    width: 2.8%;
  }
  #profile{
    margin-left: auto;
    margin-right: auto;
    background-image: url(../../images/sp/bg_profile_sp.jpg);
    background-repeat: no-repeat;
    background-size: 140%;
    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-column-gap: 0px;
    grid-row-gap: 0px;
    padding: 2%;
    margin-top: 5%;
    }

      .profile-photo { grid-area: 1 / 1 / 2 / 5; }
      .profile-caption { grid-area: 2 / 1 / 3 / 5; }
      .photo01 { grid-area: 3 / 1 / 4 / 3; }
      .photo02 { grid-area: 3 / 3 / 4 / 5; }
      .photo03 { grid-area: 4 / 1 / 5 / 3; }
      .photo04 { grid-area: 4 / 3 / 5 / 5; }
      .photo05 { grid-area: 5 / 1 / 6 / 3; }
      .photo06 { grid-area: 5 / 3 / 6 / 5; }

    .profile-caption{
      width: 100%;
      margin-bottom: 4%;
      margin-left: auto;
      margin-right: auto;
      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-top: 11%;
    margin-left: 63%;
    padding-bottom: 3%;
  }
  #other_link{
    width: 45%;
    margin-left: 52%;
  }
  #instagram p,#other_link p{
    color: #6d6d6d;
    padding-bottom: 1%;
  }
  #instagram img{
    width: 100%;
  }
  #other_link img{
    width: 95%;
  }
  #other_link:hover{
    transform: translate(2px,2px);
    transition: all 0.3s ease 0s;
  } #instagram:hover{
    transform: translate(2px,2px);
    transition: all 0.3s ease 0s;
  }
  .profile-photo{
    margin-left: auto;
    margin-right: auto;
    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;
    margin-left: auto;
    margin-right: auto;
    background-image: url(../images/bg_grid.png);
    margin-top: 0;
    padding-bottom: 3%;
  }
  #blog ul{
    display: flex;
    flex-wrap: wrap;
    column-count: 2;
    justify-content: space-between;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 5%;
  }
  #blog ul li{
    width: 48%;
    margin-bottom: 4%;
  }
  #blog ul img{
    width: 100%;
  }
  #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: auto;
    margin-right: auto;
    width: 90%;
  }
  #whale img{
    width: 80%;
  }
  #whale p{
    position: absolute;
    left: 8%;
    top: 15%;
  }

  #contact{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5%;
  }
  #mail p{
    text-align: center;
    font-size: clamp(12px, 3.8vw, 28px);
    font-weight: 400;
    margin-bottom: 5%;
  }
  #mail span{
    font-size: clamp(16px, 4vw, 30px);
    font-weight: 600;

  }
  #mail-link{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
  }
  #mail-link li{
    width: 50%;
    margin-bottom: 5%;
  }
  #mail-link .link_line{
    display: block;
    background-color: #ED9C44;
    padding: 5% 5%;
    border-radius: 0.8rem;
    border-style: solid;
    border-color: #fff;
    border-width: 0.1rem;
    width: 100%;
    color: #fff;
  }
  #mail a p{
    font-weight: 600;
    font-size: clamp(10px,3.5vw,30px);
  }
  #mail-link .link_line img,
  .pamph_link img{
    width: 90%;
    margin-left: 5%;
  }
  #footer-menu ul{
    display: flex;
    flex-wrap: wrap;
    column-count: 2;
    justify-content: center;
    align-items: baseline;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10%;
    margin-bottom: 5%;
  }
  #footer-menu ul li{
    width: 30%;
    margin-bottom: 5%;
  }
  #footer-menu ul li:last-child{
    width: 90%;
  }
  #footer-menu ul li img{
    width: 70%;
    margin-left: auto;
    margin-right: 25%;
  }
  #footer-menu p{
    font-size: max(0.8vw,8px);
    text-align: center;
  }
  #footer-menu a p{
    background-color: #919BBF;
    font-size: clamp(8px, 1.5vw, 20px);
    color: #fff;
    padding: 3% 10%;
    margin-left: -17%;
    text-align: center;
  }
  #contact h2 {
    width: 50%;
    color: #1C8A5E;
    text-align: center;
    padding-top: 3%;
    margin-left: 21%;
    margin-right: auto;
    padding-right: 5%;
  }
  #contact .title img{
    width: 50%;
    margin-top: -11%;
    margin-left: 22%;
  }
  
  #contact .title p{
    color: #1C8A5E;
    padding-left:54%;
    margin-bottom: 10%;
  }
  #mail{
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}
.splide{
  background-color: #919BBF;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10%;
}
.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(18vw,60px);
padding-top: 10%;
padding-left: 9%;
}
#bnr-product h2,#bnr-design h2{
color: #919BBF;
width: 100%;
font-size: min(18vw,60px);
padding-top: 10%;
padding-left: 14%;
}
#bnr-illust h2::first-letter{
font-size: min(30vw,110px);
padding-right: 3%;
}
#bnr-product h2::first-letter{
font-size: min(30vw,110px);
padding-right: 2%;
}
#bnr-portrait h2::first-letter{
font-size: min(30vw,110px);
padding-right: 2%;
}
#bnr-design h2::first-letter{
font-size: min(30vw,110px);
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: 90%;
  /* max-width: 1600px; */
  display: flex;
  flex-direction: column;
  justify-content:space-between;
  margin-left: auto;
  margin-right: 0;
  padding-bottom: 10%;
}
.sub_link a{
  background-color: #919BBF;
  padding: 3%;
  border-radius: 1rem;
  border-style: solid;
  border-color: #fff;
  border-width: 0.15rem;
  width: 90%;
  text-align: left;
  color: #fff;
  font-size: min(4.5vw,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-sup-02{
  margin-left: 6%;
  text-align: center;
  margin-top: 2%;
  margin-bottom: 15%;
  font-size: min(3vw, 13px);
  color: black;
 }
 #minne-link{  
display: block;
background-color: #FDF1B7;
padding: 2%;
border-radius: 0.8rem;
border-style: solid;
border-color: black;
border-width: 0.1rem;
width: 40%;
text-align: left;
color: #1C8A5E;
font-size: min(3vw,30px);
margin-top: -52%;
    margin-left: 10%;
}
#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% 10%;
    border-radius: 0.8rem;
    border-style: solid;
    border-color: #fff;
    border-width: 0.1rem;
    width: 100%;
    color: #fff;
}
.pamph_link:hover{
  color: #fff;
  transform: translate(2px,2px);
  transition: all 0.3s ease 0s;
}  
}