body{
          background-color: #fdf6ee;
        /* 基本の背景色 */
        background-image: linear-gradient(#fdf6eecf, #fdf6eecf),
            /* ベース色 */
            url('img/noise.png');
        /* ノイズ画像 */
        background-repeat: repeat;
        /* 繰り返し */
        background-size: 100px;
}

.site-frame {
  /* --- 枠を画面に固定するための設定 --- */
  position: fixed; 
  top: 0;         
  left: 0;     
  right: 0;    
  width: 100%;     
  height: 100%;    
  border: 15px solid #F8C8DC; 
  pointer-events: none;
  z-index: 1000;
  background-color: transparent;
  box-sizing: border-box;
}
 /* .site-frame:after{ 
  content: "";
  border: solid 5px #F8C8DC;
  border-radius: 20px;
  position: absolute;
  top: 2px;
  width: calc(100% - 4px);
  height: calc(100% - 4px);
}  */

/*共通設定*/
/*paddingまでを要素に含む*/
* {
  box-sizing: border-box;
}
/*フォントサイズ*/
p {
  font-size: 16px;
}
/*フォント*/
body {
  font-family: "Zen Maru Gothic", serif;
  color: #333333;
}
/*画像が100%以上はみ出さないようにする*/
img {
  max-width:100%;
}
.spacer{
  width: 33.33%;
}
.header-logo img {
  width: 250px;
}
.header-top{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.pc-contact{
  width: 33.33%;
  display: flex;
  padding-left: 100px;
}
.pc-nav-contact{
  padding-left: 100px;
}
.pc-nav-dm p{
  margin: 0;
}
.dm::after{
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-top: 1px solid #333;
  border-right: 1px solid #333;
  margin-left: 8px;
  transform: rotate(45deg);
}
.pc-nav-contact button{
  background-color: white;
  font-family: "Zen Maru Gothic", serif;
  color: #333333;
  border: solid 1px#333333;
  border-radius: 10%;
  font-size: 16px;
  padding: 10px;
  transition: all 0.3s;
}
.pc-nav-contact button:hover{
  background-color: #333333;
  font-family: "Zen Maru Gothic", serif;
  color: white;
  border: solid 1px#333333;
  border-radius: 10%;
  font-size: 16px;
  padding: 10px;
}

li{
  list-style:none;
}
li a{
  color:#333333;
  text-decoration: none;
  font-weight: bold;
  transition: all 0.3s;
}
.pc-nav-list{
  padding: 0;
  display: flex;
  justify-content:space-around;
  margin-top: 0;
}
.pc-nav-list li a:hover{
  text-decoration:underline;
  font-weight: 900;
  color: darkgrey;
}
.pc-main-visual{
  background-color: #A09FD0;
  filter: blur(1px);
  /* background:radial-gradient(#fff, #A09FD0); */
  width: 1200px;
  height: 400px;
  margin: 70px auto;
  position: relative;
  overflow: hidden;
}
#main-visual{
  position: relative;
  padding-bottom: 100px;

}
#main-visual .main-text .main-text-right{
 position: absolute;
 right: 200px;
 top:150px;
}
#main-visual .main-text .main-text-left{
  position: absolute;
  right: 250px;
  top:200px;
 }
.main-text p{
writing-mode:vertical-rl;
font-size: 20px;
letter-spacing:0.5em;
}
.pc-main-visual::before{
  content: '';
  position: absolute;
  width: 300px;
  height: 300px;
  background-color: #ef5ac2; /* ピンクの丸 */
  filter: blur(30px);
  border-radius: 50%; /* 丸くする */
  top: 90px;  /* 上からの位置 */
  /* 左からの位置 */
  animation: zigzag1 10s ease-in-out infinite alternate;
}
.pc-main-visual::after{
  content: '';
  position: absolute;
  width: 300px;
  height: 300px;
  background-color: #EFCB78; /* ピンクの丸 */
  filter: blur(30px);
  border-radius: 50%; /* 丸くする */
  top: 90px; /* 下の位置に調整 */
  animation: zigzag2  10s ease-in-out infinite alternate;
}
@keyframes zigzag1 {
 0% {
    /* 開始点：左端 */
    transform: translateX(0);
  }
  100% {
    /* 終了点：画面の右端（要素の幅を引く） */
    transform: translateX(calc(100vw - 80px));
  }
}

@keyframes zigzag2 {
0% {
    /* 開始点：画面の右端 */
    transform: translateX(calc(100vw - 80px));
  }
  100% {
    /* 終了点：左端 */
    transform: translateX(0);
  }
}
/* @keyframes circleMove { 
  0% {
    transform: translate(50%, 0%);
  }
  25% {
    transform: translate(100%, 100%);
  }
  50% {
    transform: translate(100%, 0%);
  }
}*/
h1{
  writing-mode:vertical-rl;
  text-orientation: upright;
  font-size: 24px;
  letter-spacing:0.3em;
  padding-left: 150px;
  position: relative;
  padding-right: 10px; 
}
h1::after{
  position: absolute;
  content: '';
  top: 0;
  right: 0;
  width: 1px;
  height: 120%;
  background-color: #333; /* 線の色（黒） */
  transform: translateX(10px);
}
h2{
  font-size: 24px;
  margin: 0 auto;
  text-align: center;
  width: 450px;
  position: relative;
  padding-top: 100px;
  padding-bottom: 50px;
}
h2::after{
  position: absolute;
  content: '';
  top:70px;
  left:30px;
  width: 1px;
  height: 70px;
  background-color: #333; /* 線の色（黒） */
  transform: rotate(45deg);
}
.skill-1 img,.skill-2 img,.skill-3 img{
  width: 450px;
  height: 200px;
  object-fit: cover;
}
#skill,#profile{
  margin-right: 200px;
  margin-left: 200px;
  margin-bottom: 100px;
}
.skill-1 ,.skill-2,.skill-3{
  display: flex;
  position: relative;
}
.skill-text{
  margin-left: 50px;
}
 .portfolio-slide-btn-l,.portfolio-slide-btn-r{ 
  position: relative;
}
.skill-icon{
  display: flex;
  flex-wrap: wrap;
  width: 420px;
}
.skill-icon p{
  border: 1px solid #333;
  width: 200px;
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
  margin: 0 10px 10px 0;
}
.slick-prev-custom,
.slick-next-custom {
    position: absolute; 
    top: 100px; 
    transform: translateY(-50%); 
    width: 50px;  
    height: 50px;
    background-color: transparent; 
    border: 1px solid #333;     
    border-radius: 50%;        
    cursor: pointer;
    z-index: 10; 
    font-size: 0;
    color: transparent; 
    overflow: hidden; 
    transition: 0.5s;
}
.slick-prev-custom:hover,
.slick-next-custom:hover{
    border: 3px solid #333;   
}
.slick-prev-custom {
    left: 1000px; 
}
.slick-next-custom {
    left: 1060px; 
}
.slick-prev-custom::after,
.slick-next-custom::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;  
    height: 10px; 
    background-color: #333; 
}
.slick-prev-custom::after {
    clip-path: polygon(100% 0%, 100% 100%, 25% 50%); 
    transform: translate(-75%, -50%);
}
.slick-next-custom::after {
    clip-path: polygon(0% 0%, 0% 100%, 75% 50%); 
    transform: translate(-25%, -50%);
}
#portfolio {
  /* max-width: 1000px;  */
  position: relative;
  /* margin-left: 200px; */
  margin-bottom: 50px;
}
#portfolio h1{
  margin-left: 200px;
}

/* Slickスライダーのコンテナ */
.regular_3.slider {
  margin-top: 50px; 
}

/* 各スライドアイテム */
.portfolio-item {
  margin: 0 15px; /* スライド間の左右の余白のようなもの */
  text-align: center; /* 中身を中央寄せ */
 }
.portfolio-lists{
  display: flex;
  flex-wrap: wrap;
  justify-content:center;
  padding-top: 30px;
}
.portfolio-list{
  width:30%;
}
.portfolio-list img{
  margin-left: 30px;
  margin-right: 30px;
}
.skill-text a,.web-icon,.banner-icon,.skill-description,.site-p{
  margin-top: 20px;
}
.skill-text a{
  text-decoration: none;
  color: #333;
  font-weight: bold;
}

.portfolio-item img {
  width: 300px; /* 例: 画像の幅 */
  height: 300px; /* 例: 画像の高さ */
  border-radius: 50%; /* 円形にする */
  object-fit: cover; /*画像がコンテナに収まるように調整 */
  margin: 0 5px 15px; /* 画像下部のマージン */
  /* display: block; */
}
.slick-prev:before, .slick-next:before {
  color: black; /* 矢印の色 */
}
.portfolio-item a {
  display: block; /* aタグをブロック要素として扱う */
   text-decoration: none; /* リンクの下線を消す */
   color: inherit; /* 親要素の文字色を継承する */
   height: 100%; 
   text-align: center;
 }

.skill-text{
  margin:30px;
}

.skill-1::before{
  content: '';
  position: absolute;
  width: 200px;
  height: 200px;
  background-color: #EECFE8; /* ピンクの丸 */
  border-radius: 50%; 
  top:-200px;
  right: 300px;
  z-index:-1;
  filter: blur(30px);
}
.skill-2::before{
  content: '';
  position: absolute;
  width: 200px;
  height: 200px;
  background-color: #FFDE92; 
  border-radius: 50%; 
  top:-200px;
  right: 300px;
  z-index:-1;
  filter: blur(30px);
}
.skill-3::before{
  content: '';
  position: absolute;
  width: 200px;
  height: 200px;
  background-color: #CFD6EE; 
  border-radius: 50%; 
  top:-200px;
  right: 300px;
  z-index:-1;
  filter: blur(30px);
}

.skill-1::before,.skill-2::before,.skill-3::before{
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-duration: 3s;
  animation-name: anim_sc;
  transform: scale(0.7, 0.7);
}

@keyframes anim_sc {
  100% {
    transform: scale(1.2,1.2);
  }
}

.skill-button,.portfolio-button{
  display: flex;
  justify-content: flex-end;
}
.button-wrapper {
  display: flex;
  justify-content: flex-end; /* ★★★ これで中のアイテムが右に寄る ★★★ */
}
.portfolio-button-link {
  display: inline-block; /* インラインブロック要素として扱う */
  width: 40%;
}
.portfolio-button-link p{
  background-color: #F8C8DC;
  padding: 20px 0 20px 40px;
  border-left: solid 1px #F8C8DC; 
  border-radius: 1.25rem;
  align-items: center;
  justify-content: flex-end;
  font-weight: bold;
  z-index:2000;
  letter-spacing:0.5em;
  transition: all 0.3s;
  position: relative;
}
.portfolio-button-link p::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 5%;
    width: 20px;  
    height: 20px; 
    background-color: #333;
    clip-path: polygon(0% 0%, 0% 100%, 75% 50%); 
    transform: translate(-25%, -50%);
    transition: all 0.3s;
}

.portfolio-button-link p:hover{
  color: #5996FF;
}

.portfolio-button-link:hover p::after{
  background-color: #5996FF;
}
.skill-detail a{
 text-decoration: none;
 color: #333;
}
.yagirushi{
  position: relative;
  display: inline-block;
  width: 70px;
  height: 1px;
  margin-top: 29px;
  border-radius: 9999px;
  background-color: #333;
  margin-left: 10px;
}
.yagirushi::before {
  content: "";
  position: absolute;
  top: calc(50% - 2px);
  right: 0;
  width: 10px;
  height: 1px;
  border-radius: 9999px;
  background-color: #333;
  transform: rotate(45deg);
  transform-origin: calc(100% - 2px) 50%;
}
.yagirushi::after {
  content: "";
  position: absolute;
  width: 50px;
  height: 50px;
  width: 50px;
  height: 50px;
  border: 1px solid #111;
  border-radius: 50%;
  top:-25px;
  right: -25px;
  z-index: -50;
  transition: all 0.3s;
}
.skill-button-link:hover .yagirushi::after{
  background-color: #5996FF;
  top:-25px;
  right: -25px;
}
.portfolio-button-link,.skill-button-link {
  text-decoration: none;
  color: inherit;       
}
.web-icon{
  background-color: #EECFE8;
  width:50px;
  text-align: center;
  vertical-align: middle;
  border-radius: 15%;
}
.banner-icon{
  background-color: #EFCB78;
  width:70px;
  text-align: center;
  vertical-align: middle;
  border-radius: 15%;
}
.profile-container{
  display: flex;
  margin-top: 50px;
  justify-content: space-around;
}
.profile-img{
  position: relative;
  width: 400px;
  height: 400px;
}
.profile-img::after {
  position: absolute;
  content: '';
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  box-shadow: inset 0 0 15px 15px #fff;
}
.profile-img img{
  width: 400px;
  height: 400px;
  object-fit: cover;
}
.profile-text{
  writing-mode:vertical-rl;
  text-orientation: upright;
  letter-spacing:0.3em;
  margin-top: 50px;
  position: relative;
}
.profile-text::before{
  position: absolute;
  content: '';
  width:300px;
  height:450px;
  background-color:rgba(238,207,232,0.5);
  top:100px;
  left: 100px;
  z-index:-1;
}
.profile-text p{
  margin: 0.5em;
}
.profile-text span{
 font-weight: bold;
 font-size: 18px;
}
#contact-back{
  background-color: #F8C8DC;
  padding-top: 30px;
  padding-bottom: 30px;
  border-radius: 5rem 5rem 0 0;
  z-index:2000;
  position: relative;
} 
.contact{
  margin-right: 350px;
  margin-left: 350px;
}
h3{
  font-size: 24px;
  text-align: center;
}
#contact-back p{
  margin: 5px;
  text-align: center;
}
.contact-text{
  margin-bottom: 50px;
}
.form {
  display: flex;
  flex-wrap: wrap;
}
#name-text,#email-text,#email-text,#message-text{
  width: 100%;
}
label {
  margin-top: 20px;
  margin-bottom: 10px;
}
#name-text ,#email-text ,#email-text{
  padding: 10px;
}
#message-text{
  padding: 40px;
}
#submit{
  background-color: white;
  font-family: "Zen Maru Gothic", serif;
  color: #333333;
  border-radius: 10%;
  font-size: 24px;
  padding: 5px 30px;
  margin: 50px auto;
}

/* ウェブサイト制作/LP制作ページ */
.web-title,.bunner-title{
  padding-left: 100px;
  position: relative;
}
.web-title::before,.bunner-title::before{
  position: absolute;
  content: "";
  top: -1.8vw;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #D9D9D9;
}
.web-title::after,.bunner-title::after{
  position: absolute;
  content: "";
  bottom: -1.8vw;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #D9D9D9;
}
.web-title p,.bunner-title p{
  font-size: 30px;
  margin-top: 50px;
}
.site-p a{
text-decoration:underline wavy #333;
color: #333;
transition: all 0.3s;
}
.site-p a:hover{
text-decoration:underline wavy #EECFE8;
color: #EECFE8;
}
.site-o a{
text-decoration:underline wavy #EFCB78;
color: #EFCB78;
transition: all 0.3s;
}
.site-o a:hover{
text-decoration:underline wavy #FFDE92;
color: #FFDE92;
}

/* js */
.fade-action.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}


.fade-action.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.fade-action {
    opacity: 0;
    visibility: 1;
    transition: all 0.5s; 
    transform: translateY(150px);
}

.skill-img img{
   transition: all 0.3s ease-in-out;
}

/* ホバーした時の状態 */
.skill-img img:hover {
  /* 影を付ける */
  box-shadow: 10px 5px 5px #333;

  /* 少し上に持ち上げる（浮き上がる効果） */
  transform: translateY(-8px);
}