@charset "UTF-8";

@font-face {
  font-family: "モボ";
  src: url("../fonts/MOBO-Bold.otf") format("opentype");
}
@font-face {
  font-family: "Quenos";
  src: url("../fonts/Quenos.otf") format("opentype");
}
@font-face {
  font-family: "ひな明朝";
  src: url("../fonts/HinaMincho-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "BIZUDP";
  src: url("../fonts/BIZUDPGothic-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "ZEN角ゴシック";
  src: url("../fonts/ZenKakuGothicNew-Medium.ttf") format("truetype");
}
@font-face {
  font-family: "ZENアンチック";
  src: url("../fonts/ZenAntique-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Wilkysta";
  src: url("../fonts/Wilkysta.ttf") format("truetype");
}
@font-face {
  font-family: "Minthe";
  src: url("../fonts/Minthe-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "KiwiMaru-Light";
  src: url("../fonts/KiwiMaru-Light.ttf") format("truetype");
}
@font-face {
  font-family: "KiwiMaru-Medium";
  src: url("../fonts/KiwiMaru-Medium.ttf") format("truetype");
}
@font-face {
  font-family: "KiwiMaru-Regula";
  src: url("../fonts/KiwiMaru-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Magistic";
  src: url("../fonts/Magistic.ttf") format("truetype");
}
@font-face {
  font-family: "つなぎゴシック";
  src: url("../fonts/TsunagiGothic.ttf") format("truetype");
}
@font-face {
  font-family: "はこべら丸ゴシック";
  src: url("../fonts/HakoberaMaruGothicA-Medium.ttf") format("truetype");
}
@font-face {
  font-family: "夏蝉丸ゴシック";
  src: url("../fonts/夏蝉丸ゴシック.ttf") format("truetype");
}
@font-face {
  font-family: "簡体字";
  src: url("../fonts/ResourceHanRoundedCN-Medium.ttf") format("truetype");
}
@font-face {
  font-family: "繁体字";
  src: url("../fonts/ResourceHanRoundedTW-Bold.ttf") format("truetype");
}

/* 共通部分 */

html {
  font-size: 100%;
}
p {
  margin-top: 0;
  margin-bottom: 0;
}
/* フォント */
body{
  font-family: 'はこべら丸ゴシック', 簡体字, 繁体字,"Yu Gothic medium","游ゴシック medium","Microsoft JhengHei", YuGothic,"游ゴシック体","ヒラギノ角ゴ　pro w3",sans-serif;
  /* font-family: "つなぎゴシック",sans-serif; */
  line-height: 1.7;
  margin-left: 0rem;
  margin-right: 0rem;
  margin-top: 0rem;
  width: 100%;
  /* background-image: url(../images/back-paper-3.png); */
  /* background-color: rgba(255, 255, 255, 0.9);
  background-blend-mode: soft-light; */
  background-size: 50%;
}


a{
  text-decoration: none;
}
img{
  max-width: 100%;
}



/* Twitterカード */
.card {
  display: none;
}

/* ヘッダーナビ */
.page-header{
  font-size: 1.25rem;
  text-transform: uppercase;
  list-style: none;
  text-align: right;
  overflow: hidden;
  margin-top: 0rem;
  height: 3rem;
  
  /* 上に固定 */
  position: fixed;
  width: 100%;
  top: 0;  
  right: 0;
  z-index: 100;
}

nav {
  float: right;
}

ul {
  margin: 0;
}

nav li{
  display: flex;
  float: left;
  text-align: right;
  margin-left: 10px; 
  margin-right: 10px;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  user-select: none;
}

nav a {
  font-family: 'はこべら丸ゴシック',serif;
  font-weight: normal;
  font-size: 1.2rem;
  display: block;
}


/* ナビルビ */

nav a  {
  ruby-align: center;
  text-align: center;
}
nav rt {
  font-family: 'はこべら丸ゴシック',serif;
  font-weight: 500;
  font-size: 50%;
  margin-bottom: 0rem ;
  }

.page-header {
 

  justify-content: space-between;
}

.wrapper {
  margin: 0 auto;
  padding: 0 4%;
}

/*javascriptでふわっとさせるやつ*/
.js-animation {
  opacity: 0;
  visibility: hidden;
  transform: translateY(40px);
  transition: all 1s;
  position: relative;
  z-index: 1;
}
.js-animation.is-show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0px);
  position: relative;
  z-index: 1;
}

/* 上に戻るボタン */
html {
  scroll-behavior: smooth;
}
.pagetop {
  height: 50px;
  width: 50px;
  position: fixed;
  right: 30px;
  bottom: 30px;
  background: #fff;
  /* border: solid 2px #333; */
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
}
.pagetop__arrow {
  height: 10px;
  width: 10px;
  border-top: 3px solid #333;
  border-right: 3px solid #333;
  transform: translateY(20%) rotate(-45deg);
}


/* ホーム ------------------------------------------------------------------------------------------*/

.home-content {
  text-align: center;
  margin-bottom: 0rem;
  margin-left: 0rem;
  margin-right: 0rem;
  line-height: 1.7;

  font-family: 'モボ',serif;
}
.home-content p {
  font-size: 0.9rem;
  margin: 10px 0 42px;
}


/*見出し*/
.homeabout {
  padding-top: 3rem;
  padding-bottom: 2rem;
  /* margin-left: 10%;
  margin-right: 10%; */
}
#home h3{
  font-size: 80%;
}

.mizusoko-name {
  text-align: center;
  font-family:'ZENアンチック',serif;
  font-weight: 100;
  font-size: 2rem;
  align-items: center;
  margin-top: auto;
  margin-bottom: auto;
  margin-left: 2rem;
  
  /* 縁取り */
  /* text-shadow: 0 0 10px  #000000, 0 0 5px #000000, 0 0 5px  #000000, 0 0 1px #000000, 0 0 1px #000000; */
}
/* ルビ */
.mizusoko-name rt {
font-family: 'KiwiMaru-Regula',serif;
font-size: 25%;
}

/* アイコン */

.homeicon{
  margin-top: 0rem;
  margin-bottom: 0rem;
}

.homeicon img{
  text-align: center;
  border-radius: 50%;
  max-width: 6rem;
  max-height: 6rem;
  border: #000000;
}


.homeicon {
  display: flex;
  filter:none;
  margin-top: 0rem;
}



.profile {
  margin-top: 3rem;
}


.home-content h3 {
  text-align: center;
  margin-top: -1rem;
  margin-bottom: 0rem;
  
}
.home-content p {
  margin: 0rem;
  font-family: 'モボ',serif;
}

.mail img{ 
  text-align: left;
  margin-right: 2px;
}
.mail a {
  list-style-type: none;
  align-items: l;
  font-size: 2rem;
  text-align: left;
}

/* 小文字 */
.small {
  font-size: 0.7rem;
}

.home-content .award p{
  font-size: 0.7rem;
  text-align: left;
  /* margin-left: 2rem; */
}
/* 受賞歴左揃え */
.texe-left {
  display: inline-block;
  text-align: left;
}

/*背景画像*/

.home-content {
  padding: 0rem;
  margin-bottom: 0rem;
}

.homeback {
  background-image: url(../images/home-5.png);
  min-height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center 10%; 
  height: 90vh;
  width: 100%;

  /* 秒のアニメーションを繰り返す */
  animation: image_anime 60s ease infinite; 
}

/* アニメーション------------------------------------------------------------- */
/* @keyframes image_anime {
  0% {
    background-image: url(../images/home-4.png); 
  }
  10% {
    background-image: url(../images/back/mo-luna9.png); 
  }
  20% {
    background-image: url(../images/back/mo-grif4.png); 
  }
  30% {
    background-image: url(../images/back/mo-kohaku4.png); 
  }
  40% {
    background-image: url(../images/back/mo-meno2.png); 
  }
  50% {
    background-image: url(../images/back/mo-vanessa.png); 
  }
  60% {
    background-image: url(../images/back/mo-lapis13.png); 
  }
  70% {
    background-image: url(../images/back/mo-kazura.png); 
  }
  80% {
    background-image: url(../images/back/satori.png); 
  }
  90% {
    background-image: url(../images/back/mo-trgger5.png);
  }
  99%,to {
    background-image: url(../images/home-4.png);
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  ::before,
  ::after {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}
  .animate__animated[class*='Out'] {
    opacity: 0;
  } */

/* ホームギャラリー部分-------------------------------------------------------------------- */

#home .genre {
  margin-top: 0rem;
  margin-bottom: 0;
}

.homegallery .wrapper {
  pointer-events: none;
}
.homegallery-grid .item img {
  background-blend-mode: multiply;
  border-radius: 10px;
}

/* ホームワーク------------------------------------------------------------------------------ */
.homeworks .commission-title {
  text-align: left;
}
.homeworks img {
  box-shadow: none;
  background-blend-mode: multiply;
}


/*ボタン------------------------------------------------------------------------*/

.homegallery {
  text-align: center;
}
.buttonbox {
  text-align: center;
}
.button {
  text-align: center;
  font-family: 'モボ',serif;
  font-size: 1.2rem;
  /* font-weight: bold; */
  /* background: rgb(255, 255, 255); */
  border: solid ;
  /* border-radius: 10px; */
  border-width: 3px;
  border-radius: 10px;
  padding: 10px 32px;
  margin-top: 100px;
  /* box-shadow: 0 0 5px rgba(0,0,0,0.4); */
}
/* ホバー時の色は上のフォントカラーまとめに書いてる */



/* リンク -----------------------------------------------------------------------------------------------*/
#link .subpage-header {
  margin-bottom: 3rem;
}

.link-tag-box{
  display: grid;
  gap: 6vh 3vh;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 0;
  margin-bottom: 50px;
  margin-left: 20%;
  margin-right: 20%;
  align-items: center;
}

.link-tag {
  vertical-align: top;
  text-align: center;
}

.link-tag-text {
  font-size: 1vw;
  vertical-align: top;
}

/*ニュース----------------------------------------------------------------------------------------------*/

#news {
  background-image: url(../images/back.png);
  height: 270px;
  margin-bottom: 40px;
  background-position: bottom;
}
#news .page-title {
  text-align: center;
  margin: auto;
}




article img {
  width: 300px;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;
}
article p {
  margin-bottom: 1rem;
}
.news-contents p {
  line-height: 2;
}



/* ギャラリー------------------------------------------------------------------------------------- */



/* ギャラリーヘッダー */
.subpage-header {
  background-image: url(../images/back-7.png);
  margin-top: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position:40% 20%;
  text-align: center;
  margin-top: 3rem ;

}


/* タイトル位置 */
.page-title {
  margin-top: 0rem;
  margin-bottom: 0rem;
  padding: 5%;
  text-align: center;
  font-family: 'Quenos',serif;
  font-size: 25px;
  font-weight: lighter;
  -webkit-text-stroke: 0.5px rgb(255, 255, 255); */
  filter:drop-shadow( 0 0 10px #523f3c);
  letter-spacing: 2px;
  
  margin: 0;
}


/* 注意文 */
.attention {
  font-size: 70%;
  text-align: right;
  margin-top: 0rem;
  margin-bottom: 0rem;
}

/* ファンアート非表示 */
.fanart {
  display: none;
}

.genre{
  text-align: center;
  margin-top: 4rem;
  margin-bottom: 2rem;
}
.genre h2 {
  font-size: 3rem;
  font-family: 'Minthe',serif;
  font-weight: lighter;
  letter-spacing: 2px;
  margin-top: 2rem;
  margin-bottom: 0rem;
}

.genre p {
  font-family: 'モボ',serif;
  font-weight: lighter;
  margin-top: auto;
  margin-bottom: 0rem;
  font-size: 1.2rem;
}
/* 横線------------------------------------------------------- */
#gallery .genre {
  display: flex;
  align-items: center;
}

#gallery .genre:before,
#gallery .genre:after {
  content: "";
  height: 1.5px;
  flex-grow: 1;
}
#gallery .genre:before {
  margin-right: 1rem;
}
#gallery .genre:after {
  margin-left: 1rem;
}

#gallery .genre {
  margin-left: 4%;
  margin-right: 4%;
}
/* 横線ここまで------------------------------------------------------- */
.copyright {
  font-size: -1rem;
  opacity: 0.5;
}

.art {
  margin-right: -60px;
  /* margin-left: 10px; */
  width: 100%;
}

/* 画像サイズ指定 */

#gallery .art img {
  /* margin-right: 60px; */
  /* margin-bottom: 10px; */
  width: auto;
  height: 1fr;
  object-fit: cover;
  object-position: top ;
  mix-blend-mode: multiply;
  border-radius: 10px;
}


.grid {
  display: grid;
  gap: 3vh 3vh;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 1rem;
  margin-bottom: 50px;
  align-items: center;

}


.lum-lightbox.lum-open {
  display: block;
  position: fixed;
  z-index: 200;
}

/* さらに表示 */

/* さらに表示ここまで */

/* パソコンとスマホでの大きさ調整 */
/* パソコンで */
@media (min-width: 601px) {
  .pc {
    display: block ;
  }
  .sp {
    display: none !important;
  }

  /* .lum-lightbox-inner {
    display: none !important;
  } */
}
/*フッター*/
footer {
  border-top: solid ;
  border-width: 3px;
  /* background: rgb(206, 206, 206); */
  text-align: center;
  padding: 26px 0;
}
footer p{

  font-size: 0.875em;
}

/* ワークページ--------------------------------------------------------------------------------------------- */
.work-grid.grid {
  align-items: stretch !important;
}

.work-item {
  border-radius: 10px;
  position: relative;
  padding: 0px;
  margin-bottom: 0rem;
  background-blend-mode: multiply;
}

.work-item img {
  border-radius: 10px 10px 0px 0px;
}

.work-caption {
  margin-left: 1rem;
  margin-right: 1rem;
  margin-bottom: 1rem;
  /* margin-bottom: 0.5rem; */
  font-size: 0.7rem;
}

.commission-title {
  padding-bottom: 1rem;
}
.commission-title p{
  margin-top: 0.5rem;
  margin-bottom: 1rem;
}

.commission-name {
  bottom: 0px;
  text-align: right;
  position: absolute;
  right: 0;
  bottom: 0;
  margin: 1rem;
}

/* ご依頼タブ------------------------------------------------------------------------------------ */

.tabgroup {
  display: flex;
  padding: 0 4%;
  margin-top: 0rem;
}
.work-tag {
	display: flex;
	list-style-type: none;
  padding: 0;
  margin: 1px;

  cursor: pointer
}
.work-tag li {
    text-align: center;
    font-family: 'はこべら丸ゴシック',serif;
    font-size: 0.8rem;
    font-weight: bold;
    /* background: rgb(255, 255, 255); */
    border: solid ;
    /* border-radius: 10px; */
    border-width: 3px;
    border-radius: 100px;
    padding: 3px 10px;
    margin: 3px 2px 3px 2px;

    cursor: pointer
}
 li.tag-skeb{
  color: #166762 !important;
}
 li.tag-direct{
  color: #bb1350 !important;
}

.work-tag li:first-child {
	margin-left: 0;
}
.work-tag li:after {
	content: '';
	position: absolute;
	width: 0;
	height: 0;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-top: 16px solid #c3d4dc;
	display: none;
	bottom: -16px;
	left: 50%;
	transform: translateX(-50%);
}

 li.tag-skeb.active,  li.tag-skeb:hover {
  border-color: #166762 !important;
  background-color: #166762 !important;
  color:rgb(255, 255, 255) !important;
}
 li.tag-direct.active,  li.tag-direct:hover {
  border-color: #bb1350 !important;
  background-color: #bb1350 !important;
  color:rgb(255, 255, 255) !important;
}



/* ご依頼について---------------------------------------------------------------- */
#request {
  font-size: 80%;
}


/* ボタン */
.request-button {
  margin-top: 3rem;
  text-align: center;
  margin-bottom: 3rem;
}

/* 区切り線は上のフォントカラーにまとめてある */

.request-border {
  margin-top: -3rem;
  margin-bottom: 3rem;
  margin-left: 20%;
  margin-right: 20%;
  width: 60%;
}

/* 項目タイトル */
#request .genre {
  margin-top: -2rem;
  margin-bottom: -1rem;
  max-width: 100%;
 
}

#request .genre h2 {
  font-family: 'つなぎゴシック',serif;
  font-size: 2.5rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
  
  /* border-bottom: 5px solid #003ebb ; 
  display: inline-block; */
}

/* 項目タイトル 左寄せ*/
#request .genre {
  margin-left: 20%;
  margin-right: 20%;
  text-align: left;
  margin-top: -2rem;
  margin-bottom: -1rem;
  max-width: 100%;
 
}

#request .genre h2 {
  font-family: 'つなぎゴシック',serif;
  font-weight: lighter;
  letter-spacing: 0;
  font-size: 1rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

/* 本文 */
.request-text {
  font-family: 'ZEN角ゴシック',serif;
  margin-left: 20%;
  margin-right: 20%;
  margin-bottom: 3rem;
}

.request-text p {
  margin-bottom: 0rem;
}

/* 太字 */
 .bold {
  font-family: 'モボ','はこべら丸ゴシック',serif;
  font-weight: 600;
}
 .bold-2 {
  font-family: 'モボ','はこべら丸ゴシック',serif;
  font-size: 1rem;
  font-weight: 900;
}



/* 料金表----------------------------------------------------------------------- */
.price {
  border-radius: 5px;
  border: 1px dashed;
  margin-top: 1rem;
}
.price-box {
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 10px;
  margin-right: 10px;
}

.price p {
  font-size: 90%;
  font-weight: 500;
  padding-left: 1rem;
  text-indent: -1rem;
}

/* 料金表画像--------------------------------------------------------------------------- */
.sample-card {
  display: grid;
  gap: 3vh 3vh;
  grid-template-columns: repeat(2, 1fr);
}
.sample-item {
  display: flex;
  box-shadow: 0 0 10px rgba(0,0,0,0.4);
  border-radius: 10px;
  position: relative;
  padding: 0px;
  margin-bottom: 0rem;

  height: fit-content auto;
  aspect-ratio: 2 / 1;

}

.sample-item img {
  border-radius: 10px 0px 0px 10px;
  object-fit: cover;
  max-width: 100%;
  max-height: 100%;
}

.sample-text {
  margin-left: 1rem;
  margin-right: 1rem;
  margin-bottom: 1rem;
  /* margin-bottom: 0.5rem; */
  font-size: 2vh;
}

.sample-item p{
  margin-bottom: 0rem;
}
.sample-title {
  font-size: 3vh;
  font-family: 'モボ','はこべら丸ゴシック',serif;
  font-weight: bold;
}
.sample-title-2 {
  font-size: 1.5vh;
}
/* 料金表画像ここまで--------------------------------------------------------------------------- */

/* 段落下げ */
.indent-1 {
  display: block;
  padding-left: 2rem;
  margin-bottom: -1.5rem;
}
.indent-2 {
  display: block;
  padding-left: 3rem;
  margin-bottom: -1.5rem;
}
.indent-3 {
  display: block;
  padding-left: 4rem;
  margin-bottom: -1.5rem;
}

/* 米印　段落下げ */
.text-kome {
  display: block;
  padding-left: 1rem;
  text-indent: -1rem;
}

/* テンプレコピー */
.js-copybtn {
  text-align: center;
  font-family: 'モボ',serif;
  /* font-weight: bold; */
  background: rgb(255, 255, 255);
  border: 2px solid !important;
  border-width: 3px;
  border-radius: 10px;
  padding: 5px 10px;
}
.js-copybtn:hover {
  background-blend-mode: overlay;
  color:rgb(255, 255, 255);
}
/* 色は上のフォントカラーにまとめてある */

/* アコーディオン -------------------------------------------------*/

summary::-webkit-details-marker {
  display: none;
  
}

summary {
  list-style: none; 
  cursor: pointer;
  display: flex;
  justify-content:space-around;
  width: 40px;
  height: 40px;
  border-radius: 1px;

    display: block;
  position: relative;
  margin-left: auto;
  margin-right: auto;
 
  margin-bottom: 2.5rem;
}

summary::after {
  background-image: url(../images/arrow-1-03.png);
  background-size: 100%;
  width: 40px;
  height: 40px;
  content: '';
  transition: translateY(-50%);
  display: inline-block;
  margin-left: auto;
  margin-right: auto; 
  margin-top: -0.5rem;
  
}
details[open] summary::after {
  background-image: url(../images/arrow-2-03.png);
  background-size: 100%;
  margin-top: -0.5rem;
}


/* 問い合わせフォーム---------------------------------------------------------------- */
.contact-text {
  /* margin-left: 10%;
  margin-right: 10%; */
}

/*モバイル版--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media (max-width: 600px) {
  .page-title {
    font-size: 2.5rem;
  }
  
  /*ヘッダー*/
  .page-header {
    margin-right: auto;
    align-items: center;
    min-height: 3.5rem;
    font-size: 1rem;
  }


  nav a {
    font-size: 3.5vw;
    text-align: left;
    margin-left: -1rem;

  }


  /*スマホ版ホーム------------------------------------------------------------------*/
  .home-content {
    vertical-align: middle;
    margin-top: 0rem;
    margin-bottom: 0rem;
    text-shadow: none;
  }



  .page-header {
    flex-direction: column;
    align-items: center;
  
  }

  .mail {
    margin-left: 10%;
    margin-right: 10%;
    height: 15%;
  }

  .home-content h3 {
    font-size: 1rem;
    margin-top: 0rem;
  }

  .home-content p{
    display: block;
    text-align: left;
    font-size: 0.8rem;
    margin-left: 10%;
    margin-right: 10%;
  }

/* ホームアイコン */

  
  .homeicon img{
    margin: auto;
    max-width: 4rem;
    margin-bottom: 0rem;
  }
  .profile .homeicon img{
    margin: auto;
    max-width: 4rem;
    max-height: 4rem;
    margin-bottom: 0rem;
    margin-left: 10%;
    margin-right: 1rem;
  }

  .mizusoko-name {
    font-size: 2rem;
    margin-top: auto;
    margin-bottom: auto;
    margin-left: 0;
  }




.homeabout {
  padding-top: 3.5rem;
    margin-left: 0rem;
    margin-right: 0rem;
}

  .texe-left {
    margin-left: 0rem;
  }

  .home-content .texe-left p{
    text-align: left;
  }
  /* .home-content .profile p{
    font-size: 0.9rem;
    text-align: left;
  } */
  .home-content .award p{
    font-size: 0.6rem;
    text-align: left;
    /* margin-left: 2rem; */
  }

  /* 背景画像 */
  .homeback{
    height: 200px;    
    background-position: center;
    width: 100%;
    
  }


  /* ホームギャラリー */


  .homegallery .genre h2{
    margin-top: 2rem;
    margin-bottom: 0;
  }

  .homegallery .wrapper {
    pointer-events: none;
  }

  .homegallery .art {
    margin-bottom: 0;
  }

  .homegallery .button {
  /* font-size: 1rem; */
  margin-top: 0;
  margin-bottom: 8rem;
}

  .homegallery .work-item {
    display: flexbox;
  }

  .homegallery .genre p {
    margin-left: 10%;
    margin-right: 10%;
    text-align: left;
  }


/* スマホ版リンク -----------------------------------------------------------------------------------------------*/


.link-tag-box{
  gap: 6vh 3vh;
  grid-template-columns: repeat(2, 1fr);
  margin-top: 0;
  margin-bottom: 3rem;
  margin-left: 10%;
  margin-right: 10%;
}
.link-tag-text {
  font-size: 3vw;
}
  /*スマホ版ギャラリー -------------------------------------------------------*/
  /* ヘッダー */
  .subpage-header {
    min-height: 15vh ;
    background-size: cover;
    background-position:40% 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 3rem;
    padding: 5%;
  }
   .page-title {
     margin-bottom: 0rem;
     margin-top: 1rem;
     font-size: 20px;
     text-align: center;
    }


  .gallery-content {
    margin-top: 20%;
  }

  .genre {
    margin-top: 3rem;

  }

  .genre h2 {
    margin-top: 0;
    margin-bottom: 1rem;    

  }

  .art img {
    margin-bottom: 0;
  }

  /* 表示数 */
  .grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 2%;
  }


  .sp img {
    margin: auto;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top ;
  }


  
  /* パソコンとスマホでの大きさ表示 */
  /* スマホで */
  .sp {
    display: block ;
  }
  .pc {
    display: none ;
  }
  

  /* スマホ版ワークページ -----------------------------------------------------------------------*/
  .work-grid.grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* ご依頼タブ横並べ */
  .tabgroup {
    display: block;
  }
  .work-tag {
    white-space: nowrap;
  }

  /* スマホ版ご依頼について --------------------------------------------------------------------------*/
  /* 項目タイトル */  

  /* 青線 */
  /* .request-border{
    margin-bottom: -4rem;
  } */
  #request {
    font-size: 75%;
  }
  
  /* 本文 */
  .request-text {
    margin-left: 10%;
    margin-right: 10%;
  }
  /* 区切り線 */
  .request-border{
    margin-top: -3rem;
    margin-bottom: -2rem;
    margin-left: 10%;
    margin-right: 10%;
    width: 80%;
  }

  #request .genre  {
    margin-top: 3rem;
    margin-bottom: 1rem;   
  }
  #request .genre h2 {
    /* font-size: 2.5rem; */
    font-size: 6vw;
    margin-left: 1rem;
    margin-right: 1rem;
    margin-top: 0rem;
    margin-bottom: -1rem;
  }

/* 項目タイトル 左寄せ*/
#request .genre {
  margin-left: 10%;
  margin-right: 10%;
  text-align: left;
}

#request .genre h2 {
  font-weight: lighter;
  letter-spacing: 0;
  font-size: 1rem;
  margin-left: 0;
}

  /* #request .genre .retake  {
    font-size: 9vw;
  }
  #request .genre .pay  {
    font-size: 9vw;
  }
  #request .genre .schedule  {
    font-size: 6vw;
  }
  #request .genre .copyr  {
    font-size: 7vw;
  }
  #request .genre .template {
    font-size: 8vw;
  } */


  /* 料金表 */  
  .price p {
    padding-left: 0rem;
    /* padding-left: 1rem; */
    text-indent: -0.8rem;
  }
  
  .price {
    border-radius: 5px;
    border: 1.5px dashed;
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
  .price-box {
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 20px;
    margin-right: 20px;
  }
  /* 太字 */
.request-text .bold {
  font-weight: 100;
}
.request-text .bold-2 {
  font-size: 1.1rem;
  font-weight: 600;
}

/* 段落下げ */
.indent-1 {
  display: block;
  padding-left: 1.6rem;
  margin-bottom: -1.5rem;
}
.indent-2 {
  display: block;
  padding-left: 2.4rem;
  margin-bottom: -1.5rem;
}
.indent-3 {
  display: block;
  padding-left: 3.2rem;
  margin-bottom: -1.5rem;
}

/* 米印　段落下げ */
.text-kome {
  display: block;
  padding-left: 0.8rem;
  text-indent: -0.8rem;
}
.sample-title-2 {
  font-size: 1.5vh !important;
}
}

/* テンプレコピー */
.js-copybtn {
  font-size: 100% !important;
  background: rgb(255, 255, 255);
  border: 2px solid !important;
}
.js-copybtn:hover {
}

/* スマホ版ホームギャラリー --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media (max-width: 600px) {
  .homegallery .grid .homegallery-grid{
    grid-template-columns: repeat(3, 1fr);
    gap: 2%;
  }
  /* スマホ版ホームワーク */
  .homegallery  .work-grid {
    grid-template-columns: repeat(2, 1fr) ;
  }
  .homegallery  .work-grid .commission-title {
    text-align: left;
  }
  .sample-card {
    gap: 3vh 3vh;
    grid-template-columns: repeat(1, 1fr);
  }
}


/* ギャラリー4つ並べ */
@media (min-width: 600px){
  .grid {
    grid-template-columns: repeat(6, 1fr);
  }
}
/* @media (min-width: 1000px){
  .grid {
    grid-template-columns: repeat(8, 1fr);
  }
} */



/* タブレット横向き表示 */
@media (max-width: 900px){
  .grid {
    gap: 2vh;
  }
}

/* ハンバーガーメニュー---------------------------------------------------------------------------- */
@media (max-width: 600px)  {

  /* hamburgerここから */


    /* inputを非表示 */
  .input-hidden{
    display: none;
  }
    /* label */
  .hamburger-demo-switch{
    cursor: pointer;
    position: absolute;
    right: 3%;
    top: 0; /* ハンバーガーアイコンの位置（上から） */
    z-index: 9999;
    width: 4em; /* アイコン（クリック可能領域）の幅 */
    height: 4em; /* アイコン（クリック可能領域の）高さ */
  }
  /* メニュー展開時にハンバーガーアイコンを固定 */
  #hamburger-demo1:checked ~ .hamburger-demo-switch{
    position: fixed;
  }
  /* ハンバーガーアイコン */
  .hamburger-switch-line1, .hamburger-switch-line1:before, .hamburger-switch-line1:after{
    width: 25px;
    height: 3px;
    position: absolute;
    top: 50%;
    left: 50%;
    transition: .3s;
    content: "";
  }
  .hamburger-switch-line1{
      transform: translate(-50%, -50%);
  }
  .hamburger-switch-line1:before{
    transform: translate(-50%, -300%);
  }
  .hamburger-switch-line1:after{
    transform: translate(-50%, 200%);
  }
  /* ハンバーガーアイコン･アニメーション */
  #hamburger-demo1:checked ~ .hamburger-demo-switch .hamburger-switch-line1{
    width: 0;
  }
  #hamburger-demo1:checked ~ .hamburger-demo-switch .hamburger-switch-line1:before{
    transform: rotate(45deg) translate(-40%, 325%);
  }
  #hamburger-demo1:checked ~ .hamburger-demo-switch .hamburger-switch-line1:after{
    transform: rotate(-45deg) translate(-40%, -325%);
  }
  /* メニューエリア */
  .hamburger-demo-menuwrap{
    position: fixed;
    height: 100%;
    box-shadow: 0 0 5px rgba(0,0,0,0.4);
    padding: 5em 3% 2em;
    z-index: 9998;
    transition: .3s;
    overflow-y: scroll; /* メニュー内容が多い場合に縦スクロールする */
    left: 100%;
    width: 70%;
    top: 0;
    margin-left: 1rem;


    background-size: 50%;
  }
  /* 縦並びに戻す */
    nav li {
      clear: both;
    }

  /* メニューリスト */
  .hamburger-demo-menulist{
    margin-right: 3%;
    padding-left: 5% !important; /* !important不要な場合もあり */
    list-style: none;
  }
  .hamburger-demo-menulist li a{
    text-decoration: none;
    display: block;
    padding: .5em 0;

  }
  /* メニューエリア･アニメーション */
    /* 右から */
  #hamburger-demo1:checked ~ .hamburger-demo-menuwrap{
    left: 30%;
  }
    /* コンテンツカバー */
  #hamburger-demo1:checked ~ .hamburger-demo-cover{
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 9997;
    background: rgba(3,3,3,.5);
    display: block;
    
  }
}


/* スマホ版にPCナビ非表示 */
@media (max-width: 600px) {
  .nav-pc {
    display: none;
  }
}

/* PCではハンバーガーメニューを表示しない */
@media (min-width: 601px){
  .hamburger-demo-menubox{
    display: none;
  }
}

/* safari--------------------------------------------------------------- */
/* スマホ版 */
/* @media screen and (-webkit-min-device-pixel-ratio: 0) and (max-width: 600px) {
  _::-webkit-full-page-media, _:future, :root 
  .hamburger-demo-menubox {
    display: none;
  }
  .nav-pc {
    display: block;
  }


@media screen and (-webkit-min-device-pixel-ratio: 0) and (min-width: 601px) {
  _::-webkit-full-page-media, _:future, :root 
  .hamburger-demo-menubox {
    display: none;
  }
} */