@charset "UTF-8";

* {
  margin: 0;
  padding: 0;
}

@font-face {
  font-family: Noto_Sans_JP;
  src: url(../font/Noto_Sans_JP/static/NotoSansJP-Regular.ttf);
}

@font-face {
  font-family: Knewave;
  src: url(../font/Knewave/Knewave-Regular.ttf);
}

:root {
  --main-color: #49c6d3;
  --primary-color: rgb(73, 198, 211);
  --secondary-color: #c0a0e4;/* rgb(192,160,228) */
  --tertiary-color: #fffffc;
  --quaternary-color: #b0b0b0;/* #ccc */
  --font-size: 1vw;
  --margin-top: 6%;
}

body {
  margin: 0;
  overflow-x: clip;/* 今回必要ないがoverflow を hidden にした際stickyが効かないのを防ぐため */
  color: #333;
  font-family: Noto_Sans_JP;

  background:#ec6a38;
  -webkit-animation:colour 16s linear infinite;
  -moz-animation:colour 16s linear infinite;
}

/* 背景グラデーション */
@-webkit-keyframes colour{
  0% {
    background:#fffffc
  }

  15% {
    background:#dcd3b2
  }

  30% {
    background:#ebe1a9
  }

  45% {
    background:#e0ebaf
  }

  55% {
    background:#e7e7eb
  }

  70% {
    background:#e8d3c7
  }

  85% {
    background:#fbfaf5
  }

  100% {
    background:#fffffc
  }
}

@-moz-keyframes colour{
  0% {
    background:#fffffc
  }

  15% {
    background:#dcd3b2
  }

  30% {
    background:#ebe1a9
  }

  45% {
    background:#e0ebaf
  }

  55% {
    background:#e7e7eb
  }

  70% {
    background:#e8d3c7
  }

  85% {
    background:#fbfaf5
  }

  100% {
    background:#fffffc
  }
}
/* スクロールアクション */
.box {
  aspect-ratio: 16 / 9;
  background-color: #dedede;
  /* opacity: 0; visibility: hidden;で要素を非表示にする。
  display: noneでも非表示にできるが、transitionが効かなくなる */
  opacity: 0;
  visibility: hidden;
  transition: all 1s;
  transform: translateY(150px);
}
.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* スクロールtop page */
#page-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  font-weight: bold;
  font-size: var(--font-size);
  z-index: 1;
}
#page-top a {
  display: block;
  width: 6vw;
  height: 6vw;
  margin-bottom: 1vw;
  text-align: center;
  text-decoration: none;
  color: #333;
}

#page-top a img {
  width: 100%;
}

/* マウスストーカー */
.stalker {
  background: radial-gradient(
    ellipse at 50% 50%,
    rgba(255, 255, 255, 0.2) 0%,
    rgba(255, 255, 255, 0) 100%
  ),
  radial-gradient(ellipse at 70% 60%, #c3e060 0%, rgba(195, 224, 96, 0) 90%),
  radial-gradient(ellipse at 30% 30%, #c3e060 0%, rgba(195, 224, 96, 0) 60%),
  radial-gradient(
    ellipse at bottom left,
    #49c6d3 0%,
    rgba(0, 163, 203, 0) 70%
  ),
  linear-gradient(
    135deg,
    rgba(18, 46, 119, 0) 0%,
    rgba(18, 46, 119, 0) 75%,
    #49c6d3 100%
  ),
  linear-gradient(
    to right,
    #c0a0e4 0%,
    #d55d64 35%,
    #e49129 65%,
    #c0671c 100%
  );
  background-blend-mode: screen, luminosity, saturation, darken, color-dodge,
    color;
  filter: blur(12px);
  width: 60px; 
  height: 60px;
  top: -15px;  
  left: -15px; 
  opacity: 0; 
  border-radius: 50%;
  pointer-events: none; 
  position: fixed; 
  transition: all .3s ease-out; 
  z-index: 999; 
}

.stalker.js-hover {
  background-color: #fff; 
  height: 100px;
  left: -25px; 
  mix-blend-mode: multiply; 
  top: -25px; 
  width: 100px; 
}

header {
  width: 100%;
  height: 100vh;
  background-size: 100% 100%;
  background-image: url(../images/hd-bgimg.jpg);
  clip-path: polygon(100% 0, 100% 80%, 50% 100%, 0 80%, 0 0);
}


header nav {
  height: 10vw;
  display: flex;
  
}

/* header nav h1 {
  width: 12%;
  padding: 2%;
}

header nav h1 img {
  width: 100%;
} */

header nav .main-ul {
  display: flex;
  width: 40%;
  margin-left: auto;
  margin-right: auto;
  padding: 3%;
  list-style-type: none;
}

header nav .main-ul .main-li {
  width: calc( 100% / 3 );
}

header nav .main-ul .main-li .main-a {
  display: block;
  text-align: center;
  line-height: 3;
  font-family: Knewave;
  letter-spacing: .2em;
  text-decoration: none;
  text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.3);
  color: var(--tertiary-color);
  font-size: 1.4vw;
  transform: scale(1,1);
  transition: 1s;
}

header nav .main-ul .main-li .main-a:hover {
  transform: scale(1.1,1.1);
  text-shadow:
		0 0 7px #fff,
		0 0 10px #fff,
		0 0 20px #fff,
		0 0 40px #fff1cf,
		0 0 80px #fff1cf,
		0 0 90px #fff1cf;
  transition: 1s;
}


/* サブメニュー */

header nav .main-ul .sub-ul {
  position: absolute;
  width: 100%;
  list-style-type: none;
  opacity: 0;/* ここ */
  transition: 1s;
}

header nav .main-ul .sub-ul .sub-li a {
  display: block;
  text-align: center;
  line-height: 3.4;
  text-decoration: none;
  color: #202020;
  font-size: 0.8vw;
}

header nav .main-ul .sub-ul .sub-li a:hover {
  color: var(--tertiary-color);
}

header nav .main-ul .pull {/* ここ */
  position: relative;
  overflow: hidden;
}

header nav .main-ul .pull:hover {/* ここ */
  overflow: visible;
  transition: .5s;
}

header nav .main-ul .pull:hover .sub-ul {/* ここ */
  opacity: 1;
  text-shadow:
		0 0 7px #fff,
		0 0 10px #fff,
		0 0 20px #fff,
		0 0 40px #fff1cf,
		0 0 80px #fff1cf,
		0 0 90px #fff1cf;
  transition: .5s;
  transition: 1s;
}


.animate {
  margin-top: 5%;
  margin-left: 12.5%;
  font-family: Knewave;
  letter-spacing: .05em;
  font-size: 6vw;
}

.animate span {
  display: inline-block;
  color: var(--main-color);
	opacity: 0;
  text-shadow: 0px 4vw .5vw rgba(56, 56, 56, 0.4);
	transform: rotate(-180deg) translate(150px, 0);
	animation: twister .5s forwards;
}

.animate span:nth-of-type(2) {
	animation-delay: .05s;
}
.animate span:nth-of-type(3) {
	animation-delay: .1s;
}
.animate span:nth-of-type(4) {
	animation-delay: .15s;
}
.animate span:nth-of-type(5) {
	animation-delay: .2s;
}
.animate span:nth-of-type(6) {
	animation-delay: .25s;
}
.animate span:nth-of-type(7) {
	animation-delay: .3s;
}
.animate span:nth-of-type(8) {
	animation-delay: .35s;
}
.animate span:nth-of-type(9) {
	animation-delay: .4s;
}
.animate span:nth-of-type(10) {
	animation-delay: .45s;
}
.animate span:nth-of-type(11) {
	animation-delay: .5s;
}
.animate span:nth-of-type(12) {
	animation-delay: .55s;
}
.animate span:nth-of-type(13) {
	animation-delay: .6s;
}
.animate span:nth-of-type(14) {
	animation-delay: .65s;
}
.animate span:nth-of-type(15) {
	animation-delay: .7s;
}
.animate span:nth-of-type(16) {
	animation-delay: .75s;
}
.animate span:nth-of-type(17) {
	animation-delay: .8s;
}
.animate span:nth-of-type(18) {
	animation-delay: .85s;
}
.animate span:nth-of-type(19) {
	animation-delay: .9s;
}
.animate span:nth-of-type(20) {
	animation-delay: .95s;
}

@keyframes twister {
	10% {
		opacity: 1;
	}
	100% {
		transform: rotate(0deg) translate(0);
		opacity: 1;
	}
}


  /* 画面の縦スクロール量分、コンテンツを横スクロールさせる
    横スクロールしている間、縦スクロールは sticky で固定する
    sticky で固定するためにコンテナを設けて、横スクロール分を含めた高さを設定する */
article:not(.sticky) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100vh;
  margin-top: 5%;
  background-size: 100% 100%;
}

.horizontal_scroll {
  --sticky-container-height: 100vh;/* (初期値100vh)横スクロール分を含めた高さを設定したいのですが、予見できないので CSS 変数 "--sticky-container-height" を設定 */
  height: var(--sticky-container-height);
  min-height: 100vh;
  box-sizing: border-box;
  background-image: url(../images/child.png);
  background-repeat: no-repeat;
  background-size: 65%;
  background-position: 0 5%;
}

.ph_scroll {
  background-image: url(../images/camera.png);
  background-repeat: no-repeat;
  background-size: 35%;
  background-position: 0 5%;
}

.il-scroll {
  background-image: url(../images/penki-img.png);
  background-repeat: no-repeat;
  background-size: 60%;
  background-position: 0 5%;
}

.ab-scroll {
  background-image: url(../images/sec-img.png);
  background-repeat: no-repeat;
  background-size: 45%;
  background-position: 0 5%;
}

.horizontal_scroll .sticky {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
}
/* 横スクロールのコンテナ */
.horizontal_scroll .scroller {
  display: flex;
  overflow: auto;/* 横スクロールバーが表示されるように */
}
/* JavaScript で nobar クラスが付加されたときのflexコンテナ
  Javaが向こうの状態でも横スクロールコンテナを表示させるため(ファーストビューでhiddenにしても良い)
  overflow を hidden にした場合はその子孫要素で sticky 配置が効かないため
  body への指定で、overflow-x を clip にする */
.horizontal_scroll .scroller.nobar {
  overflow: hidden;
}
.horizontal_scroll .scroller > * {
  flex-basis: 66%;
  flex-shrink: 0;/* flexアイテムを縮まずに溢れるようにしている */
  aspect-ratio: 16 / 9;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: whitesmoke;
}
.horizontal_scroll .scroller > *:not(:first-child) {
  margin-left: 1%;
}

section {
  position: relative;
  width: 100%;
    --bg-color:whitesmoke;
    --white: #fffffc;
	background-image: linear-gradient(-45deg, var(--bg-color) 0%, var(--bg-color) 60%, var(--white) 50%, var(--white) 100%);
}

.not-found {
  opacity: 0;
}

h3 {
  margin: 0 auto 2em; /* 外側の余白（上下と中央配置） */
  padding: 1.5em; /* 内側余白 */
  background: none; /* 元のボックス背景色なし */
  border: 1px solid #ccc; /* 線の太さ（1px）、種類（実線）、色（#ccc） */
  position: relative; /* 配置（基準となる位置） */
  z-index: auto;
  font-size: 1.6vw;
}

h3:after {
  background-color: #eee; /* ずらしたボックスの背景色 */
  border: none; /* 枠線なし */
  content: ''; /* 擬似要素にコンテンツなし */
  position: absolute; /* 配置（ここを動かす） */
  top: 7px; /* 上から7pxずらす */
  left: 7px; /* 左から7pxずらす */
  width: 100%; /* 幅100%（親要素に合わせる） */
  height: 100%; /* 高さ100%（親要素に合わせる） */
  z-index: -1; /* 背景として後ろに表示 */
}

/* メイン */
.art-content {
  
}

.art-content .art-flexbox {
  display: flex;
  margin-top: -5%;
  background-image: url(../images/article-bgimg1.png);
  background-size: 30%;
  background-repeat: no-repeat;
  background-position: 88% 3%;
}
/* 個別背景 */
.art-content .art-photoshop {
  background-image: url(../images/article-bgimg2.png);
  background-size: 34%;
  background-position: 92% 10%;
}

.art-content .art-illustrator {
  background-image: url(../images/article-bgimg3.png);
  background-size: 30%;
  background-position: 88% 2%;
}

.art-content .art-about {
  background-image: url(../images/article-bgimg4.png);
  background-size: 22%;
  background-position: 88% -5%;
}

.art-content .art-flexbox .art-leftbox {
  width: 27%;
  margin-top: 6%;
  margin-left: 3%;
}

.art-content .art-flexbox .art-leftbox .leftbox-imgbox {
  display: flex;
}

.art-content .art-flexbox .art-leftbox .leftbox-imgbox + p {
  width: 81%;
  margin-top: 4%;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.8;
  font-size: var(--font-size);
}

.art-content .art-flexbox .art-leftbox .leftbox-imgbox + p span {
  position: relative;
  background: linear-gradient(transparent 40%, whitesmoke 40%);/* 桜鼠 さくらねず */
}

.art-content .art-flexbox .art-leftbox h2 {
  width: 40%;
  padding-top: 10%;
  padding-left: 10%;
  line-height: 1em;
  background-image: url(../images/01-img.png);
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: -10% 0;
  font-size: 2.5vw;
}

/* 個別数字 */

.art-content .art-flexbox .art-leftbox .title-02 {
  background-image: url(../images/02-img.png);
}

.art-content .art-flexbox .art-leftbox .title-03 {
  background-image: url(../images/03-img.png);
}

.art-content .art-flexbox .art-leftbox .title-04 {
  padding-top: 15%;
  background-image: url(../images/04-img.png);
}

.art-content .art-flexbox .art-leftbox .title-img {
  width: 58%;
  margin-top: 10%;
}

.art-content .art-flexbox .art-leftbox .title-img img {
  width: 100%;
}

.art-content .art-flexbox .art-centerbox {
  display: flex;
  width: 45%;
}
.art-content .art-flexbox .art-centerbox .table-img {
  width: 20%;
  margin-top: 5%;
}
.art-content .art-flexbox .art-centerbox .table-img img {
  width: 100%;
}

/* 目次画像個別調整 */
.art-content .art-flexbox .art-centerbox .table-photoshop {
  width: 17.4%;
  margin-top: 8%;
}

.art-content .art-flexbox .art-centerbox .table-illustrator {
  width: 17%;
  margin-top: 7%;
}

.art-content .art-flexbox .art-centerbox .table-about {
  width: 17%;
  margin-top: 7%;
}

.art-content .art-flexbox .art-centerbox ul {
  list-style-type: none;
  margin-top: -1vw;
  padding-left: 6%;
}

.art-content .art-flexbox .art-centerbox ul > li a {
  display: block;
  text-decoration: none;
  letter-spacing: .1em;
  line-height: 8em;
  color: #333;
  font-size: 1.4vw;
  transition: 1s;
}

.art-content .art-flexbox .art-centerbox ul > li a:hover {
  text-decoration: underline;
  color: var(--main-color);
  transition: 1s;
}

.art-content .art-flexbox .art-centerbox ul > .title-now {
  line-height: 4.8em;
  font-weight: bold;
  font-size: 3vw;
}

.art-content .art-flexbox .art-rightbox {
  width: 20%;
  margin-top: 6%;
}

.art-content .art-flexbox .art-rightbox h6 {
  
  font-size: 1.4vw;
}


.art-content .art-flexbox .art-rightbox ol > li {
  letter-spacing: .1em;
  line-height: 4em;
  color: #333;
  font-size: .9vw;
  transition: 1s;
}

.art-content .art-flexbox .art-rightbox ol > li:hover {
  color: var(--main-color);
  transition: 1s;
}


.fa-down-long {
  width: 20%;
  position: absolute;
  font-size: 3vw;
  top: 21%;
  left: 69%;
  transform: rotate(45deg);
  opacity: 1;
  animation: yajirusi 3s infinite;
}

@keyframes yajirusi {
  0% {
    transform: rotate(45deg);
    opacity: 1;
  }
  50% {
    transform: rotate(45deg);
    opacity: 0;
  }
  100% {
    transform: rotate(45deg);
    opacity: 1;
  }
}

.fa-down-long + p {
  position: absolute;
  top: 10%;
  left: 56%;
  font-size: .8vw;
}


.frame-img1 {
  position: absolute;
  top: 14%;
  left: -.5%;
  width: 88%;
}

.frame-img1 img {
  width: 100%;
}

/* 個別背景イラスト */
.website-02  {
  width: 84%;
  top: 7%;
}

.website-03 {
  width: 90%;
  top: 0;
  left: -10%;
}

.website-04 {
  width: 32%;
  top: 6%;
  left: 3%;
}


.website-05 {
  width: 70%;
  top: -10%;
  left: 8%;
}

.website-06 {
  width: 65%;
  top: -5%;
  left: 3%;
}

.pf-container {
  background-image: url(../images/top-name.png);
  background-size: 60%;
  background-repeat: no-repeat;
  background-position: 20% 90%;
}



/* 作品写真コンテンツ */
.website-content {
  position: absolute;
  width: 80%;
}

.website-content a {
  display: block;
}

.website-content a:hover .frame-img2 img {
  opacity: .6;
  transform: translate(-1.12vw,-.5vw);
  transition: 1s;
}

.website-content a .frame-img2 {
  position: absolute;
  width: 61%;
  margin-top: -3.5vw;
  margin-left: 17.5%;
}

.website-content a .frame-img2 img {
  width: 100%;
  border-radius: 0 0 4.2vw 4.2vw;
  opacity: 1;
  transition: 1s;
}

.website-content a .frame-box {
  position: absolute;
  width: 63%;
  top: -13vw;
  left: 14%;
}

.website-content a .frame-box img {
  width: 100%;
}




/* モーダルメニュー */
/*popup template design*/
.popup-background {
  /*position size*/
  position: fixed;
  z-index : 999;
  top : 0;
  left : 0;
  height : 100vh;
  width : 100vw;

  /*design*/
  background-color: gray;
  opacity : 0.5
}

.popup {
  /*position size*/
  --height : 85vh;
  --width : 65vw; 
  position: fixed;
  top : calc(50vh - calc(var(--height) / 2));
  left : calc(50vw - calc(var(--width) / 2));
  height : var(--height);
  width : var(--width);
  

  z-index : 1000;
  /*design*/
  overflow : hidden;
  background-color: white;
  border-radius: 10px;
  box-shadow: 0px 0px 3px 1px gray;

  background-image: url(../images/modal-bgimg.png);
  background-size: 35%;
  background-repeat: no-repeat;
  background-position: 90% 85%;
}

.popup > .close-button {
  /*position size*/
  --size : 20px;
  position:absolute;
  top : calc(var(--size)/4);
  left : calc(var(--width) - var(--size) * 5/4);/*css variables are available in children*/
  height : var(--size);
  width : var(--size);

  /*design*/
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: transparent;
  color : gray;
  font-size: var(--size);
  border-radius: calc(var(--size)/5);
}
.popup > .close-button:hover {
  /*design*/
  background-color: var(--main-color);
  color : white;
}
.popup > .content {
  padding: 10px;
  text-align: center;
}

.popup > .content .popup-img1 {
  width: 40%;
  
}

.popup > .content .popup-img1 img {
  width: 100%;
  border-radius: 3px;
  box-shadow: 0px 0px 0px 5px rgba(0, 0, 0, 1), 0px 0px 0px 10px var(--primary-color);
}

.popup-img2 {
  width: 35%;
}

.popup > .content .popup-img2 img {
  width: 100%;
  border-radius: 3px;
  box-shadow: 0px 0px 0px 5px rgba(0, 0, 0, 1), 0px 0px 0px 10px var(--primary-color);
}

.popup-img3 {
  width: 55%;
}

.popup > .content .popup-img3 img {
  width: 100%;
  border-radius: 3px;
  box-shadow: 0px 0px 0px 5px rgba(0, 0, 0, 1), 0px 0px 0px 10px var(--primary-color);
}

.popup-img4 {
  width: 67%;
}

.popup-img4 img {
  width: 100%;
  border-radius: 3px;
  box-shadow: 0px 0px 0px 5px rgba(0, 0, 0, 1), 0px 0px 0px 10px var(--primary-color);
}

.popup > .content > h4 {
  width: 40%;
  margin-top: 3%;
  margin-left: auto;
  margin-right: auto;
  line-height: 2.2;
  text-align: center;
  background-color: var(--tertiary-color);
  background: repeating-linear-gradient(
        -45deg,       /* ストライプの角度 */
        whitesmoke 0 6px, /* 薄いグレー、幅6px */
        var(--tertiary-color) 6px 12px  /* 白（#fff）、幅6px */
    );
  font-size: 1.6vw;
}

.popup-flexbox {
  display: flex;
  padding-top: 2%;
  padding-left: 5%;
  padding-right: 5%;
  padding-bottom: 3%;
}



/*hide popup*/
.popup-flag {
  display: none;
}
.popup-flag:not(:checked) + .popup-background {
  display:none;
}
.popup-flag:not(:checked) + * + .popup {
  display:none;
}


/*メインボタン*/
.button-container {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
}
.button-container > * {
  margin : 15px;
}



/*button1*/
.btn,
button.btn {
  position: absolute;
  top: 40%;
  left: 76%;
  display: inline-block;
  cursor: pointer;
  padding: 1rem 4rem;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: var(--tertiary-color);
  border-radius: 0.5rem;
  font-weight: bold;
  line-height: 1;
  font-size: .9vw;
}

.btn-border-shadow--radius {
  border-radius: 100vh;
}
.btn-border-shadow {
  padding: calc(1.5rem - 12px) 2rem 1.5rem;
  background: var(--main-color);
}

.btn-border-shadow:before {
  position: absolute;
  top: -1vw;
  left: -1vw;

  width: 100%;
  height: 100%;

  content: "";
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;

  border: 2.5px solid #000;
  border-radius: 0.5rem;
}

.btn-border-shadow--radius:before {
  border-radius: 100vh;
}

.btn-border-shadow:hover {
  padding: calc(1.5rem - 6px) 2rem;
}

.btn-border-shadow:hover:before {
  top: -4%;
  left: -1.8%;
}

/* 色違いボタン紫 */

.btn-border-shadow--radius2 {
  border-radius: 100vh;
}
.btn-border-shadow2 {
  padding: calc(1.5rem - 12px) 2rem 1.5rem;
  background: var(--secondary-color);
}

.btn-border-shadow2:before {
  position: absolute;
  top: -1vw;
  left: -1vw;

  width: 100%;
  height: 100%;

  content: "";
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;

  border: 2.5px solid #000;
  border-radius: 0.5rem;
}

.btn-border-shadow--radius2:before {
  border-radius: 100vh;
}

.btn-border-shadow2:hover {
  padding: calc(1.5rem - 6px) 2rem;
}

.btn-border-shadow2:hover:before {
  top: -4%;
  left: -1.8%;
}

/* アコーディオンタブ切り替え */
.tab-accordion {
  width: 100%;
  max-width: 800px;
  margin-left: 10%;
}

.tab-nav {
  display: flex;
  gap: .8rem;
  margin-bottom: .5rem;
}

.tab-button {
  padding: 0.5rem 1.25rem;
  background: #f1f5f9;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background-color 0.2s;
  font-size: 1.2vw;
}

.tab-button:hover {
  background: #e2e8f0;
}

.tab-button.active {
  background: var(--main-color);
  color: #fffffc;
}

.tab-content {
  display: none;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  overflow: hidden;
}

.tab-content.active {
  display: block;
}

.tab-trigger {
  width: 100%;
  padding: .4rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: white;
  border: none;
  cursor: pointer;
  text-indent: 1rem;
}

.tab-icon {
  transition: transform 0.2s;
}

.tab-trigger[aria-expanded="true"] .tab-icon {
  transform: rotate(180deg);
}

.tab-trigger > span {
  font-size: 1vw;
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

.accordion-content.open {
  max-height: 300px;
}

.accordion-body {
  padding: 1.2rem;
  background-color: #fffffc;
  border-top: 1px solid #e2e8f0;
  text-align: left;
  line-height: 1.6;
  font-size: 1vw;
}




/* フォトショ */

.work-box {
  width: 90%;
  height: 90%;
  margin-top: 3%;
  margin-left: auto;
  margin-right: auto;
  background-image: url(../images/photoshop-01.png);
  background-size: 50%;
  background-position: 100% 95%;
  background-repeat: no-repeat;
}
/* 個別右下イラスト */
.work-yoga {
  background-image: url(../images/ps-yoga-img.png);
  background-size: 45%;
  background-position: 105% 100%;
}

.work-kesyouhin {
  background-image: url(../images/ps-kesyouhin-img.png);
  background-size: 35%;
  background-position: 90% 103%;
}

.work-donatu {
  background-image: url(../images/ps-donatu-img.png);
  background-size: 40%;
  background-position: 105% 105%;
}

.work-collage01 {
  background-image: url(../images/ps-collage01-img.png);
  background-size: 40%;
  background-position: 105% 105%;
}

.work-collage02 {
  background-image: url(../images/ps-collage02-img.png);
  background-size: 35%;
  background-position: 88% 100%;
}

.work-cosumo {
  background-image: url(../images/ps-cosumo-img.png);
  background-size: 40%;
  background-position: 105% 110%;
}

.work-lilac {
  background-image: url(../images/ps-lilac-img.png);
  background-size: 40%;
  background-position: 105% 105%;
}

.work-tea {
  background-image: url(../images/il-tea-img.png);
  background-size: 40%;
  background-position: 98% 100%;
}

.work-hoken {
  background-image: url(../images/il-hoken-img.png);
  background-size: 40%;
  background-position: 115% 110%;
}

.work-kankoku {
  background-image: url(../images/il-kankoku-img.png);
  background-size: 40%;
  background-position: 98% 110%;
}

.work-shoes {
  background-image: url(../images/il-shoes-img.png);
  background-size: 40%;
  background-position: 98% 100%;
}

.work-kinzoku {
  background-image: url(../images/il-kinzoku-img.png);
  background-size: 38%;
  background-position: 102% 105%;
}

.work-box .work-flexbox {
  display: flex;
}

.work-box .work-flexbox .work-image {
  width: 53%;
  margin-top: 4%;
  margin-left: 1%;
  margin-right: 3%;
}

/* バナー以外写真調整 */
.work-box .work-flexbox .poster-img {
  width: 40%;
  margin-top: -1vw;
}

.work-box .work-flexbox .ps-collage01 {
  width: 48%;
  margin-top: 2%;
}

.work-box .work-flexbox .ps-collage02 {
  width: 55%;
  margin-top: 9%;
}

.work-box .work-flexbox .ps-collage03 {
  width: 56%;
  margin-top: 11%;
}

.work-box .work-flexbox .work-meisi01 {
  width: 45%;
  margin-top: 0;
}

.work-box .work-flexbox .work-meisi02 {
  width: 43%;
  margin-top: 0;
}

.work-box .work-flexbox .work-image img {
  display: block;
  width: 100%;
  border-radius: 3px;
  box-shadow: 0px 0px 0px 5px rgba(0, 0, 0, 1), 0px 0px 0px 10px var(--primary-color);
}


.work-box .work-flexbox .work-rightbox {
  width: 43%;
}

.work-box .work-flexbox .work-rightbox .work-title {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  background-image: url(../images/title-01.png);
  background-size: 70%;
  background-repeat: no-repeat;
  background-position: 50% 0;
}

/* タイトル画像個別調整 */
.work-box .work-flexbox .work-rightbox .title-02 {
  background-image: url(../images/title-02.png);
}

.work-box .work-flexbox .work-rightbox .title-03 {
  background-image: url(../images/title-03.png);
}

.work-box .work-flexbox .work-rightbox .title-04 {
  background-image: url(../images/title-04.png);
}

.work-box .work-flexbox .work-rightbox .title-05 {
  background-image: url(../images/title-05.png);
}

.work-box .work-flexbox .work-rightbox .title-06 {
  background-image: url(../images/title-06.png);
}

.work-box .work-flexbox .work-rightbox .title-07 {
  background-image: url(../images/title-07.png);
}

.work-box .work-flexbox .work-rightbox .title-08 {
  background-image: url(../images/title-08.png);
}


.work-box .work-rightbox .work-title h4 {
  text-align: center;
  letter-spacing: .1em;
  line-height: 5;
  text-shadow: .1vw .2vw 0px rgba(255, 255, 255, 0.8);
  font-weight: bold;
  font-size: 1.4vw;
}

/* タイトルテキスト個別調整 */
.work-box .work-rightbox .title-02 > h4 {
  white-space: pre-wrap;
  line-height: 1.5;
  padding: 6%;
}

.work-box .work-rightbox .title-03 > h4 {
  line-height: 2.5;
  padding: 7%;
}

.work-box .work-rightbox .title-04 > h4 {
  white-space: pre-wrap;
  line-height: 1.5;
  padding: 6%;
  font-size: 1.25vw;
}

.work-box .work-rightbox .title-05 > h4 {
  white-space: pre-wrap;
  line-height: 1.5;
  padding: 6%;
}

.work-box .work-rightbox .title-06 > h4 {
  white-space: pre-wrap;
  line-height: 1.5;
  padding: 6%;
}

.work-box .work-rightbox .title-07 > h4 {
  white-space: pre-wrap;
  line-height: 1.5;
  padding: 6%;
}

.work-box .work-rightbox .title-08 > h4 {
  white-space: pre-wrap;
  line-height: 1.5;
  padding: 6%;
}

.li-title-text {
  white-space: pre-wrap;
  line-height: 1.3;
  padding: 7%;
  
}

.li-title-text2 {
  text-align: center;
  white-space: pre-wrap;
  line-height: 1.3;
  padding: 7%;
  font-weight: bold;
  text-shadow: 1px 1.5px 0px rgba(255, 255, 255, 0.8);
  font-size: 1.4vw;
}

.work-sentence {
  width: 80%;
  margin-top: 4%;
  margin-left: auto;
  margin-right: auto;
  padding-top: 5%;
  padding-left: 6%;
  padding-right: 6%;
  padding-bottom: 5%;
  border-radius: .5vw;
  background-color:var(--tertiary-color);
  opacity: .9;
}

.work-sentence p {
  line-height: 1.6;
  font-size: var(--font-size);
}

.profile-box {
  display: flex;
  width: 90%;
  height: 90%;  
}

.profile-title {
  width: 20%;
  position: absolute;
  top: 8%;
  right: 0;
  left: 0;
  margin: 0 auto;
  padding: 1%;
  text-align: center;
  background-image: url(../images/title-01.png);
  background-size: 100%;
  background-repeat: no-repeat;
  line-height: 2.3;
  letter-spacing: .1em;
  color: var(--tertiary-color);
  font-size: 2vw;
}

.about-bgimg {
  width: 80%;
  position: absolute;
  top: 61%;
  left: 2%;
  opacity: .5;
}

.about-bgimg img {
  width: 100%;
}


.about-bgimg + p {
  position: absolute;
  width: 48%;
  height: 12vw;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  padding-top: 4%;
  padding-left: 12%;
  padding-bottom: 4%;
  white-space: pre-wrap;
  line-height: 1.8;
  opacity: .9;
  border-radius: .6vw;
  background-color: var(--tertiary-color);
  font-size: var(--font-size);
}

.about-pf {
  position: absolute;
  top: 50%;
  left: 5%;
  transform: translateY(-50%);
  width: 15vw;
  height: 15vw;
}

.about-pf img {
  width: 100%;
  border-radius: 50%;
  vertical-align: bottom;
  box-shadow: 0px 0px 0px 5px rgba(0, 0, 0, 1), 0px 0px 0px 10px var(--primary-color);
}

.about-yoga {
  position: absolute;
  width: 30%;
  top: 60%;
  left: 65%;
}

.about-yoga img {
  width: 100%;
}

.skill-flexbox {
  position: relative;
  left: 0;
  width: 100%;
  height: 33vw;
}

.skill-flexbox .skill-vsc {
  position: absolute;
  width: 25%;
  top: 5%;
  left: 38%;
}

.skill-flexbox .skill-vsc img {
  width: 100%;
}
  

.skill-flexbox .skill-js {
  position: absolute;
  width: 20%;
  top: 25%;
  left: 65%;
}

.skill-flexbox .skill-js img {
  width: 100%;
}

.skill-flexbox .skill-il {
  position: absolute;
  width: 25%;
  top: 50%;
  left: 63%;
}

.skill-flexbox .skill-il img {
  width: 100%;
}

.skill-flexbox .skill-ps {
  position: absolute;
  width: 25%;
  top: 68%;
  left: 38%;
}

.skill-flexbox .skill-ps img {
  width: 100%;
}

.skill-flexbox .skill-w {
  position: absolute;
  width: 25%;
  top: 53%;
  left: 12%;
}

.skill-flexbox .skill-w img {
  width: 100%;
}

.skill-flexbox .skill-x {
  position: absolute;
  width: 25%;
  top: 22%;
  left: 12%;
}

.skill-flexbox .skill-x img {
  width: 100%;
}

.skill-title {
  position: absolute;
  width: 20%;
  top: 10%;
  left: 66%;
  padding: 1%;
  text-align: center;
  background-image: url(../images/title-02.png);
  background-size: 100%;
  background-repeat: no-repeat;
  line-height: 2.3;
  letter-spacing: .1em;
  color: var(--tertiary-color);
  font-size: 2vw;
}

.skill-flexbox + p {
  position: absolute;
  width:20%;
  top: 35%;
  left: 68%;
  white-space: pre-wrap;
  letter-spacing: .05rem;
  line-height: 1.4;
  font-size: var(--font-size);
}

.skill-flexbox + p + p {
  width: 58%;
  margin-top: 30%;
  white-space: pre-wrap;
  line-height: 1.4;
  font-size: var(--font-size);
}

.sec-contact {
  background-image: url(../images/hd-bgimg.jpg);
  clip-path: polygon(100% 0, 100% 100%, 50% 85%, 0 100%, 0 0);
}

.sec-contact > h2 {
  margin: 0 auto 1.5em;
  padding: 1em;
  background-color: var(--tertiary-color);
  background: repeating-linear-gradient(
        -45deg,       /* ストライプの角度 */
        whitesmoke 0 6px, /* 薄いグレー、幅6px */
        var(--tertiary-color) 6px 12px  /* 白（#fff）、幅6px */
    );
}

.sec-contact > h2 + p {
  text-align: center;
  font-size: var(--font-size);
  
}

address {
  padding: 1%;
  text-align: center;
  font-style: normal;
  text-decoration: underline;
  font-size: var(--font-size);
}

.contact-img {
  width: 20%;
  margin-left: auto;
  margin-right: auto;
}

.contact-img img {
  width: 100%;
}

footer {
  width: 100%;
  height: 15vw;
  margin-top: -10vw;
  background-color: var(--main-color);
  background-size: 100% 100%;
}

footer p {
  padding-top: 12vw;
  text-align: center;
 
  color: var(--tertiary-color);
  font-size: .9vw;
}