/*
Theme Name: MOP Theme
Version: 2025.11
*/

@charset "UTF-8";

*{box-sizing: border-box;
margin: 0;padding: 0;}
html{
  font-size: 62.5%;
}
body{
  box-sizing: border-box;
  margin: 0;
  font-family: "Akshar", "Arial", "メイリオ";
  background-color:white;
  font-size: 1.6rem;
}
img{
    max-width:100%;/*画像が親要素からはみ出すのを防ぐ*/
    height:auto;
}
ul{
  list-style: none;
}
p{
  margin: 0;
}
main{
  position: relative;
}
a{
  text-decoration: none;
  color: #000000;
}
footer{
  font-size: 1.6rem;
  background-color: #262626;
  color: #ffffff;
  text-align: center;
  padding: 0.7em 0;
  letter-spacing: 0.1em;
}
.BG-wrapper{
  position: absolute;
  width: 100%;
  height: 100%;
  clip-path: inset(0);
  z-index: -1;
}
.BG-wrapper .BG{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 105vh;
  background: url(./img/BG.jpg) no-repeat center / cover;
}

/* ページネーション */
.page-numbers{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1em;
  color: #ffffff;
  margin-top: 2.5em;
  font-size: 2rem;
}
.page-numbers a{
  color: #ffffff;
}
.page-numbers a:hover{
  color: #ffffff !important;
}
.page-numbers li:not(.current) a{color: #575757;}

.wpcf7-spinner{
  display: none;
}




/* // 中央に配置 */
.wp-pagenavi {
    text-align: center;
}

/* // ページボタンの共通スタイル */
.wp-pagenavi span.current,
.page.smaller,
.page.larger,
.nextpostslink,
.previouspostslink 
 {
    display: inline-block;
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    padding: 0;
    background: #7090DD;
    color: #FFFFFF;
    border-radius: 50%;
    border: none;
}

/* // 現在ページ以外のボタン */
/* 共通スタイル*/
.page.smaller,
.page.larger {
    background: #fff;
    color: #7090DD;
    border: 1px solid #7090DD;
    padding: 0;
}

/* 現在ページより前のボタン */
.page.smaller {
    margin-right: 25px;
}

/* 現在ページより後のボタン */
.page.larger {
    margin-left: 25px;
}


/* // マウスが乗った時の、ボタンの背景の色と文字の色  */
.wp-pagenavi a:hover {
    color: #FFF;
    background-color: #999;
    border: 1px solid #999 !important;
}

/* // 次へ, 前へ　共通スタイル */
.nextpostslink,
.previouspostslink {
    line-height: 40px;
    border: 1px solid $blue !important;
    color: $blue !important;
    position: relative;
    background: #fff;
    color: #7090DD;
    top: -3px;
}

/* // 次へ */
.nextpostslink {
    left: 25px;
}

/* // 前へ */
.previouspostslink {
    right: 25px;
}

/* // 縦線の共通スタイル */
.nextpostslink::before,
.previouspostslink::after {
    content: "";
    width: 0.5px;
    height: 40px;
    background-color: rgb(224, 215, 215);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

/* // 「次へ」の前の縦線 */
.nextpostslink::before {
    left: -15px;
}

/* //「前へ」の後の縦線 */
.previouspostslink::after {
    right: -15px;
}

/* 〇/〇 の部分のスタイル → 不要の場合は非表示 */
.pages {
    display: none;
}





















/* 縦自動固定アニメーション */
.scroll-container {
  left: 0;
  background: #000000;
  height: 100%; /* 表示エリアの高さ */
  overflow: hidden; /* はみ出たスライドを隠す */
  width: 50px;
  z-index: 1;
  position: fixed;
}
.scroll-container2 {
  background: #000000;
  height: 100%; /* 表示エリアの高さ */
  overflow: hidden; /* はみ出たスライドを隠す */
  width: 50px;
  z-index: 1;
  position: fixed;
  right: 0;
}
.scroll-content {
  width: 50px;
  height: 100%;
  display: flex;
  flex-direction: column;
  animation: scrollUp 8s linear infinite;
  top: 0px;/*自分が固定したい位置(例は上から0pxの位置)*/
  left: 0px;/*自分が固定したい位置(例は左から10pxの位置)*/
  background: url(./img/scrollTXT.svg)repeat-y center bottom / 17px auto;
}
@keyframes scrollUp {
  0% {
    background-position: center bottom;
  }
  100% {
    background-position: center bottom 194px;
  }
}





/* トップ動画部分 */
.header {
  width: 100%;
  height: 100%;
  margin: 0;
}
.video-wrapper .catch{
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  width: fit-content;
  height: fit-content;
  z-index: 2;
  color: white;
  font-size: 1.2vw;
  letter-spacing: 0.3em;
  text-align: center;
}
.video-wrapper .catch img{
  filter: brightness(0) saturate(100%) invert(98%) sepia(7%) saturate(717%) hue-rotate(87deg) brightness(120%) contrast(100%);
  margin-top: 20px;
  width: 20em;
}
.video-wrapper {
  overflow: hidden;
  position: relative; /* 絶対配置するコンテンツや疑似要素の基準とする */
  width: 100%;
  height: 95vh;
}
.video-wrapper::before {
  content: "";
  position: absolute; /* 絶対配置 */
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background-color: rgba(9, 2, 108, 0.15);
}
.video-wrapper video {
  width: 100%;  /* 明示的に幅を設定（必須） */
  height: 100%; /* 明示的に高さを設定（必須） */
  object-fit: cover; /* コンテンツボックスに収まるように拡大縮小 */
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
}





/* メニュー */
.menulogo {
  width: 90%;
  padding: 0 7% 7%;
  margin-left: auto;
  display: block;
}
.menu nav a{
  position: relative;
  padding-left: 2.5em;
  font-size: 5rem;
}

.menu nav a:before,.menu nav a:after{
  content: '';
  position: absolute;
  top: 0.6em;
  left: 0;
  width: 2em;
  height: 3px;
  background: currentColor;
}
.menu nav a:after{
  background: #1cf426;
  transform-origin: center right;
  transform: scale(0,1);
}
.menu nav a:hover:after{
  animation: hover 0.5s ease-in-out 0s 1 normal running;
}
@keyframes hover{
  0%{
    transform-origin: center right;
    transform: scale(0,1);
  }
  49%{
    transform-origin: center right;
    transform: scale(1,1);
  }
  50%{
    transform-origin: center left;
    transform: scale(1,1);
  }
  100%{
    transform-origin: center left;
    transform: scale(0,1);
  }
}

.menu{
  width: 25%;
  position: sticky;
  top: 70px;
  left: 0;
  font-weight: 600;
}
.menu nav a .wrap{
  transition: 0.3s;
  display: inline-block;
}
.menu nav a .wrap:hover{
  transform: translate(-0.1em,-0.1em);
  color: #1cf426;
  /* text-shadow: 0.1em 0.1em 0 #1cf426; */
}



/* メインスクロール */
.contents {
  height: 100%;
  width: 100%;
  max-width: 1500px;
   background: rgb(255, 255, 255); /*url(../img/design.svg) no-repeat center top / 915px; */
  /* background-attachment: fixed; */
  justify-content: space-between;
  display: flex;
  align-items: flex-start;
  padding-top: 130px;
  margin: 0 auto;
}
.mainscroll{
  position: relative;
  width: 62%;
  background-color: rgb(0, 0, 0);
  /* 角丸のスタイル */
  border-radius: 50px 50px 0 0;
  padding: 0 3%;
  color:#ffffff;
  margin-right: 5%;
  margin-left: 8%;
  min-height: 100vh;
}
.mainscroll::before{
  content: "";
  position: absolute;
  top: 40px;
  right: 40px;
  width: 85px;
  aspect-ratio: 108.41 / 28.98 ;
  background-image: url(./img/diamond.svg);
  filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(38%) hue-rotate(254deg) brightness(110%) contrast(110%);
}
.scrollh{
  font-weight: normal;
  text-align: center;
  font-weight: 600;
  font-size: 7rem;
}






/* DESIGN */
.design .scrollh{
  margin: 0.7em auto 0.5em;
}
.design ul{
  display: flex;  /* 子要素が横並び */
  gap: 1em;
  padding: 0 50px;
}
.design li{
  flex: 1;
  text-align: center;
}
.design .img{
  aspect-ratio: 1 / 1;
  background-color: #ffffff;
  position: relative;
  width: 100%;
}
.design img{
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.design .title{
  font-size: 2rem;
  font-weight: bold;
  margin-top: 0.5em;
}
.design .date{
  font-size: 1.4rem;
  font-weight: 300;
}
.design .more{
  width: fit-content;
  margin: 20px 50px 20px auto;
}
.more a{
  color:#ffffff;
}




/* WEBSITE */
.website .scrollh{
  margin: 0.7em auto 0.4em;
}
.website ul{
  display: flex;  /* 子要素が横並び */
  gap: 1em;
  padding: 0 50px;
}
.website li{
  flex: 1;
  text-align: center;
}
.website .img{
  aspect-ratio: 1 / 1;
  background-color: #ffffff;
  position: relative;
  width: 100%;
}
.website img{
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.website .title{
  font-size: 2rem;
  font-weight: bold;
  margin-top: 0.5em;
}
.website .date{
  font-size: 1.4rem;
  font-weight: 300;
}
.website .more{
  width: fit-content;
  margin: 20px 50px 20px auto;
}
.website a{
  color:#ffffff;
}
.singleimg .url a{
  color: #1cf426;
}



/* MOTION */
.MOTION .scrollh{
  margin: 0.7em auto 0.4em;
}
.MOTIONvideo{
   width: 90%;
   margin: 0 auto;
   position: relative;
}
.MOTION video{
  width: 100%;
  display: block;
}
.MOTION p{
  font-size: 5rem;
  margin-left: -0.5em;
  margin-bottom: -0.5em;
  position: relative;
  z-index: 1;
}
/* ボタン */
.buttonframe{
   width: 90%;
   margin: 1em auto;
   display: flex;
   gap: 1.5em;
}
.buttonframe a{
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 250px;
  margin:0 auto;
  padding: 0.6em 1em;
  overflow: hidden;
  border: 1px solid #ffffff;
  border-radius: 5px;
  color: #ffffff;
  font-size: 1.1em;
  letter-spacing: 0.1em;
}
.buttonframe a:hover {
    background-color: transparent;
    color: #000000;
    background-color: #a5a5a5;
    border: 1px solid #000000;
}



/* イラスト */
.ILLUST .scrollh{
  margin: 1.2em auto 0.4em;
}
.ILLUST .mainumg{
  width: 100%;
  background-color: antiquewhite;
  padding-top: 50%;
  position: relative;
}
.ILLUST ul{
  display: flex;  /* 子要素が横並び */
  gap: 1em;
  padding: 0 50px;
  margin-top: -5em;
}
.ILLUST li{
  flex: 1;
  text-align: center;
}
.ILLUST .img{
  aspect-ratio: 1 / 1;
  background-color: #ffffff;
  position: relative;
  width: 100%;
}
.ILLUST img{
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ILLUST .mainumg img{
    object-fit: cover;
}
.ILLUST .date{
  font-size: 1.7rem;
  margin-top: 0.2em;
}
.ILLUST .title{
  font-size: 0.8rem;
  font-weight: 300;
  margin-top: 0.8em;
}
.ILLUST .more{
  width: fit-content;
  margin: 20px 70px 20px auto;
}
.ILLUST a{
  color:#ffffff;
}

.illust .archive .title{
    font-size: 1rem;
    font-weight: 300;
}
.illust .singleimg .title{
    font-size: 1rem;
    font-weight: 300;
}








/* プロフィール */
.PROFILE .scrollh{
  margin: 0.5em auto 0.2em;
}
.PROFILE p{
  text-align: center;
  letter-spacing: 0.1em;
}




/* ノート */
.NOTE .scrollh{
  margin: 1.2em auto 0.2em;
}
.NOTE ul{
  position: relative;
  margin: 0 auto 5em;
}
.NOTE li+li{
  border-top: 1px solid #ffffff;
}
.NOTE li{
  padding: 0.8em;
  display: flex;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}
.NOTE .date{
  margin-right: 1em;
  width: 7em;
}
.NOTE a{
  color: #ffffff;
}


/* コンタクト */
.CONTACT{
  width: 100%;
  display: flex;
  gap: 3em;
  background-color: #1cf426;
  align-items: center;
  justify-content: center;
  padding: 1em 0;
}
.CONTACT h2{
  text-align: center;
  font-size: 7rem;
  color: #000000;
  letter-spacing: 0.05em;
} 
.CONTACT img{
  width: 8em;
}




/* スクロールダウンの位置 */
.video-wrapper .scroll {
  padding-top: 60px;
  position: absolute;
  text-align: center;
  left: 0;
  right: 0;
  bottom: 10%;
  margin: auto;
  width: fit-content;
  color: #ffffff;
  z-index: 3;
}
/* 矢印のアニメーション部分 */
.video-wrapper .scroll::before {
  animation: scroll 2s infinite;
  border-bottom: 1px solid #ffffff;
  border-left: 1px solid #ffffff;
  content: "";
  height: 20px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
  width: 20px;
}
/* 矢印のアニメーション */
@keyframes scroll {
  0% {
    opacity: 0;
    transform: rotate(-45deg) translate(0, 0);
  }
  40% {
    opacity: 1;
  }
  80% {
    opacity: 0;
    transform: rotate(-45deg) translate(-20px, 20px);
  }
  100% {
    opacity: 0;
  }
}




/* ハンバーガーメニュー */
.hamburgerMENU{
  background-color: #575757;
  box-shadow: 1px 1px 5px #000000;
  width: 15vw;
  height: 12vw;
  border-radius: 3vw 0 3vw 0;
  position: fixed;
  top: 2.5vw;
  right: 2.5vw;
  z-index: 5;
}
.hamburgerMENU span{
  background-color: #ffffff;
  width: 10vw;
  height: 0.7vw;
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  transition: 0.5s;
}
.hamburgerMENU span:nth-child(1){
  top: 25%;
}
.hamburgerMENU span:nth-child(2){
  top: 0;
  bottom:0;
}
.hamburgerMENU span:nth-child(3){
  bottom: 25%;
}
.MenuOpen .hamburgerMENU span:nth-child(1){
  transform: rotate(45deg);
  top: 48%;
}
.MenuOpen .hamburgerMENU span:nth-child(2){
  opacity: 0;
}
.MenuOpen .hamburgerMENU span:nth-child(3){
  transform: rotate(-45deg);
  bottom: 48%;
}


/* 下層サイト部分 */
.under .contents{
  padding-top: 70px;
}
.archive ul{
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}
.archive li{
  text-align: center;
}
.archive .img{
  aspect-ratio: 1 / 1;
  background-color: #ffffff;
  position: relative;
  width: 100%;
}
.archive img{
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.archive .title{
  font-size: 2rem;
  font-weight: bold;
  margin-top: 0.5em;
}
.archive .date{
  font-size: 1.4rem;
  font-weight: 300;
}
.titleContents{
  position: relative;
  color: #000000;
  width: 62%;
  margin-right: 5%;
  margin-left: 8%;
}

.titleContents h2{
  vertical-align: bottom;
  font-size: 6em;
  margin-top: -0.3em;
  text-align: center;
}

.titleContents .mainscroll{
  width: 100%;
  background-color: rgb(0, 0, 0);
  border-radius: 50px 50px 0 0;
  padding: 0 3%;
  color:#ffffff;
  margin: -2.5em auto 0;
  padding: 10% 6% 5%;
}
.singleimg{
  text-align: center;
}
.singleimg .title{
  font-size: 3rem;
  margin-top: 0.7em;
}
.singleimg .date{
  font-size: 2rem;
}
.single .back{
  display: flex;
  position: absolute;
  top: 1.4em;
  left: 2em;
  width: 2em;
  align-items: center;
  color: #ffffff;
  gap: 0.4em;
  font-size: 2.5rem;
}
.archiveMotion{
  text-align: center;
}
.archiveMotion video{
  width: 100%;
  border: 3px solid #575757;
}
.archiveMotion .date{
  margin: 1em 0;
}
.archiveMotion li+li{
  margin-top: 3em;
}
.archiveMotion .title{
  margin-top: 1.5em;
  font-size: 2.5rem;
  font-weight: bold;
  letter-spacing: 0.1em;
}




/* NOTE */

.archiveNote{
  min-height: 65vh;
}
.archiveNote a{
  color: #ffffff;
  padding: 1.7em 4em;
  display: block;
}
.archiveNote li{
  position: relative;
}
.archiveNote li+li{
  border-top: 2px solid #ffffff;
}
.archiveNote .title{
  font-size: 3rem;
  padding-right: 3em;
}
.archiveNote p{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.archiveNote .date{
  position: absolute;
  right: 4.5em;
  top: 2.5em;
}
.singleNote .title{
  font-size: 3rem;
  border-bottom: 2px solid #ffffff;
  padding-bottom: 0.5em;
  margin-bottom: 0.8em;
  padding-right: 3em;
}
.singleNote .date{
  font-size: 2.5rem;
  position: absolute;
  right: 4.5em;
  top: 4.8em;
}
.singleNote{
  padding: 1em 3em;
  min-height: 65vh;
}


/* プロフィール */
.profileContent{
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 700px;
  gap: 40px;
}
.profileContent .img{
  position: relative;
  background-color: #1cf426;
  width: 30%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
}
.profileContent .img img{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.profileContent .text{
  width: calc(70% - 40px);
}
.profileContent h3{
  font-size: 4rem;
}
.profileContent p{
  font-size: 2rem;
}
.profileSkill{
  margin-top: 5em;
  position: relative;
}
.profileSkill .img{
  position: absolute;
  left: -8%;
  top: 5%;
  width: 10%;
}
.profileSkill dl{
  display: flex;
  flex-wrap: wrap;
  width: 11em;
  margin: 0 auto;
  font-size: 4.3rem;
}
.profileSkill dt, .profileSkill dd{
  width: 50%;
}
.profileSkill dd{
  text-align: right;
}
.profileSkill dt{
  letter-spacing: 0.05em;
}


/* コンタクト */
.contactContent h3,.contactContent h3+p{
  text-align: center;
}
.contactContent h3{
  font-size: 3.5rem;
  letter-spacing: 0.3rem;
}
.contactContent form{
    max-width: 600px;
    margin: 2em auto 0;
}
.contactContent dl input[type="text"],
.contactContent dl input[type="email"]{
  width: 100%;
  padding: 0.5em;
}
.contactContent dl textarea{
  width: 100%;
  min-height: 30em;
  resize: none;
  padding: 0.5em;
}
.contactContent dd+dt{
  margin-top: 1.5em;
}
.contactContent .submit input[type="submit"]{
  margin-top: 2em;
  padding: 0.8em 1.7em;
  background: #1cf426;
  border: none;
  font-weight: bold;
}








/* パソコンレスポンジブ */
@media screen and (min-width: 801px) {
   .sp{
    display: none!important; /*スマホ非表示*/
    } 
    /* video */
  .video{
    min-width: 960px;
  }
  body{
     padding: 0 50px;
  }
.archive li{
  width: calc(calc(100% - 60px) / 3);
  }
}






@media screen and (max-width: 1500px){
.menu nav a{
  font-size: 4vw;
  }
  .mainscroll::before{
  top: 2.5vw;
  right: 2.5vw;
  width: 6vw;
  }
  .design .title{
  font-size: 2vw;
}
.design ul{
  padding: 0 1vw;
}
.scrollh{
  font-size: 8vw;
}
.design .scrollh{
  margin: 7vw 0 0;
}
.design .more{
  margin-right: 1vw;
}

 .website .title{
  font-size: 2vw;
}
.website ul{
  padding: 0 1vw;
}
..website .scrollh{
  margin: 7vw 0 0;
}
..website .more{
  margin-right: 1vw;
}


.ILLUST ul{
  padding: 0 1vw;
}
.ILLUST .more{
  margin-right: 1vw;
}
.buttonframe{
   gap: 1.5vw;
}
.archive .title{
  font-size: 2vw;
}
.mainscroll{
    min-height: 70vh;
}
.archive li{
  width: calc(calc(100% - 3vw) / 3);
  }
  .archive ul{
  gap: 1.5vw;
}
.titleContents .mainscroll{
  padding: 6vw 3vw 4vw;
  border-radius: 3vw 3vw 0 0; 
}
.singleimg .title{
  font-size: 3vw;
  margin-top: 1.5vw;
}
.singleimg .date{
  font-size: 2vw;
}
.single .back{
  top: 2.4vw;
  left: 3vw;
  width: 3vw;
  gap: 1vw;
  font-size: 1.7vw;
}


.archiveNote a{
  padding: 2vw 5vw;
}
.archiveNote .title{
  font-size: 2vw;
  padding-right: 5vw;
}
.archiveNote .date{
  right: 5.5vw;
  top: 2.5vw;
  font-size: 1vw;
}
.archiveNote P{
  font-size: 1vw;
}
.singleNote .title{
  font-size: 2.3vw;
  padding-bottom: 1.5vw;
  margin-bottom: 2vw;
  padding-right: 17vw;
}
.singleNote .date{
  right: 6.5vw;
  top: 8vw;
  font-size: 1.8vw;
}
.singleNote{
  padding: 1vw 2.7vw;
}
.singleNote P{
  font-size: 1.3vw;
}



/* プロフィール */
.profileContent h3{
  font-size: 2.7vw;
}
.profileContent p{
  font-size: 1.4vw;
}
.profileSkill{
  margin-top: 3.5vw;
}
.profileSkill .img{
  position: absolute;
  left: -7%;
  top: 8%;
  width: 10%;
}
.profileSkill dl{
  font-size: 2.8vw;
}
.profileSkill dt{
  letter-spacing: 0.05em;
}



}





/* スマホレスポンシブ */
@media screen and (max-width: 800px){
  .pc{
     display: none!important; /*PC非表示 */
  }
  .contents{
    background: rgba(255, 255, 255,60%);
  }
  .video-wrapper {
    aspect-ratio: 1 / 1;
  }
  .video-wrapper {
  height: 100vh;
  }
  .video-wrapper .catch{
    font-size: 3vw;
  }
  .mainscroll{
    width: 90vw;
    margin: 0 auto;
    border-radius: 5vw 5vw 0 0;  
  }
  .contents{
     padding-top: 4vw;
  }
  .scrollh{
    font-size: 10vw;
  }
  .design .scrollh{
    margin: 1em auto 0.4em;
  }
  .design ul{
    padding: 0 4vw;
  }
  .design .title{
    font-size: 3.5vw;
  }
  .design .date{
    font-size: 3vw;
  }
  .design .more{
    margin:2vw 4vw 1vw auto;
    font-size: 4.5vw;
  }

  .website .scrollh{
    margin: 1em auto 0.4em;
  }
  .website ul{
    padding: 0 4vw;
  }
  .website .title{
    font-size: 3.5vw;
  }
  .website .date{
    font-size: 3vw;
  }
  .website .more{
    margin:2vw 4vw 1vw auto;
    font-size: 4.5vw;
  }


  .MOTION .scrollh{
    margin: 2em auto 0.4em;
  }
  .MOTION p{
    font-size: 5vw;
    position: absolute;
    margin: 0;
    left: 0;
    bottom: -0.7em;
  }
  .buttonframe a{
    padding: 0.5em 0.2em;
    font-size: 2.8vw;
  }
  .buttonframe{
    gap: 2.5vw;
    margin: 1.8em auto;
  }
  .ILLUST .scrollh{
    margin: 2em auto 0.4em;
  }
  .ILLUST ul{
    padding: 0 4vw;
  }
  .ILLUST .date{
   font-size: 3vw;
  }
  .ILLUST .title{
    font-size: 2vw;

  }
  .ILLUST .more{
    margin:2vw 4vw 1vw auto;
    font-size: 4.5vw;
  }
   .PROFILE .scrollh{
    margin: 1.5em auto 0.4em;
  }
    .PROFILE p{
    font-size: 3vw;
    line-height: 1.7;
    letter-spacing: 0.07em;
  }
  .NOTE .scrollh{
    margin: 2em auto 0.4em;
  }
  .NOTE ul{
    margin: 0 auto 3em;
  }
  .NOTE li{
    font-size: 3vw;
  }
  .NOTE .date{
    margin-right: 1.5em;
    width: 4em;
  }

  .CONTACT{
  gap: 2vw;
  padding: 2.5vw 0;
  }
  .CONTACT h2{
    font-size: 10vw;
  } 
  .CONTACT img{
    width: 20vw;
  }
  footer{
    font-size: 2.8vw;
    padding: 2vw 0;
  }
  .NOTE li{
    width: 90%;
    }
  .mainscroll::before{
  top: 7vw;
  right: 8vw;
  width: 12vw;
  }
  .menu{
    width: 100%;
    height: 100dvh;
    position: fixed;
    bottom:100vh;
    left:0;
    top: auto;
    background: rgba(0,0,0,90%);
    z-index:4;
    transition: 0.5s;
    overflow: hidden;
    opacity: 0;
  }
  .MenuOpen .menu{
    bottom: 0;
    opacity: 1;
  }
  .menu nav a:before,.menu nav a:after{
    display: none;
  }
  .menulogo {
  width: 60%;
  margin: 27vw auto 5vw;
  filter: brightness(0) saturate(100%) invert(98%) sepia(7%) saturate(717%) hue-rotate(87deg) brightness(120%) contrast(100%);
  }
  .menu nav a{
  padding-left: 0;
  text-align: center;
  display: block;
  color: #ffffff;
  font-size: 10vw;
  }

.titleContents{
  width: 90vw;
  margin: 0 auto;
}
.titleContents .mainscroll{
  border-radius: 5vw 5vw 0 0; 
  padding: 17% 8% 10%;
  min-height: 60vh;
  margin: 0;
}
.archive .title{
  font-size: 3.5vw;
}
.archive li{
  width: calc(calc(100% - 5vw) / 2);
  }
  .archive ul{
  gap: 5vw;
}
.titleContents h2{
  font-size: 13vw;
  margin: 0;
  padding: 2vw 0 0 0;
}
.under .contents{
  padding-top: 0vw;
}
.singleimg .title{
  font-size: 4vw;
  margin-top: 2vw;
}
.singleimg .date{
  font-size: 3vw;
}
.single .back{
  top: 6vw;
  left: 7vw;
  width: 5vw;
  gap: 1vw;
  font-size: 4vw;
}
.archiveMotion .buttonframe{
  width: 100%;
  margin: 2.5vw auto 0;
}

.archiveNote a{
  padding: 5vw 4vw;
}
.archiveNote .title{
  font-size: 4vw;
  padding-bottom: 1vw;
  padding-right: 15vw;
}
.archiveNote .date{
  right: 4.5vw;
  top: 5.5vw;
  font-size: 3vw;
}
.archiveNote P{
  font-size: 2.5vw;
}

.singleNote .title{
  font-size: 4.5vw;
  padding-bottom: 3vw;
  margin-bottom: 5vw;
  padding-right: 17vw;
}
.singleNote .date{
  right: 12vw;
  top: 20vw;
  font-size: 3vw;
}
.singleNote{
  padding: 3vw;
}
.singleNote P{
  font-size: 3vw;
  line-height: 5vw;
}

/* プロフィール */
.profileContent{
  flex-direction: column;
  text-align: center;
  gap: 3vw;
}
.profileContent .text{
  width: 90%;
}
.profileContent .img{
  width: 50%;
}
.profileContent h3{
  font-size: 7vw;
}
.profileContent p{
  font-size: 3vw;
}
.profileSkill{
  margin-top: 10vw;
}
.profileSkill h3{
  font-size: 8vw;
  text-align: center;
  letter-spacing: 1vw;
}
.profileSkill dl{
  font-size: 4.5vw;
  width: 65%;
}

.contactContent .submit{
  text-align: center;
}
.contactContent .submit input[type="submit"]{
  padding: 0.8em 3em;
  font-size: 3vw;
}



}