* {
  -webkit-box-sizing: border-box; /* 古いWebkit系用 */
  -moz-box-sizing: border-box;     /* 古いFirefox用 */
  box-sizing: border-box;
  /* font-family: "Kosugi Maru", sans-serif;
  font-weight: 400; */
  /* margin: 0px;
  padding: 0px; */
}

.kosugi-maru-regular {
  font-family: "Kosugi Maru", sans-serif;
  font-weight: 400;
  font-style: normal;
}

:root {
  --height-header: 100px;
  --height-folderHead:9vh;
  --height-folderCont:calc(100% - var(--height-folderHead) );
  --height-footer: 50px;
  --height-colophon:calc( 100vh - var(--height-footer) );
  --height-formLine:20px;
}

a {
  text-decoration: none;
  color: black;
}

html {
  /* background-color: #000; */
  background-color: #fff;
  /* touch-action: manipulation; */
  touch-action: none;
}

body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  /* background-color: darkgray; */
  /* background-color: rgba(attr(data-wheel),120,0,1); */

  /* 広告位置変更に伴うスクロールアンカリングの無効化 */
  overflow-anchor: none;
  /* 広告挿入時の縦横スクロール無効化 */
  overflow: hidden;
}

#vdbanner {
  height: 0;
  overflow: hidden;
}

.warningOrient {
  display: flex;
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* background-color: rgba(0, 0, 0, 0.8); */
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.95), rgba(50, 50, 50, 1));
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 1), rgba(50, 50, 255, 1));
  color: #fff;
  text-align: center;
  justify-content: center;
  align-items: center;
  /* z-index: 100; */ 
  z-index: 10010; /*lightboxの値が10000のため*/
}

header {
  border: 3px solid blue;
  /* background-color: antique#fff; */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--height-header);
  z-index: 12;
  display: flex;
  align-items: center;
  padding: 0 3%;

  background-color: rgba(128, 128, 128, 0.45);
}

/* header > * {
  margin-top: 0;
} */

header nav {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

header nav .turnLeft, header nav .turnRight {
  display: flex;
  align-items: center;
  cursor: pointer;
}

header nav .headMenu {
  width: 50%;
}

.headMenu ul {
  display: flex;
  justify-content: space-around;
  list-style: none;
  padding-left: 0;
}

.headMenu ul li a {
  font-weight: bold;
}

.headMenu ul li a:hover {
  color: blue;
  border-bottom: 3px solid #000;
}


/*  */

.flipWrapper {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  /* left: -100%; */
  display: flex;
  transition: all 1.5s;
  /* padding: 3% 3%; */
}

.flipWrapper:not(:first-child) {
  padding: 3% 3%;
}

.flipWrapper > div {
/* .flipWrapper:not(:first-child) > div { */
  /* position: relative; */
  display: flex;
  justify-content: space-around;
  /* align-items: center; */
  width: 100%;
  /* margin: 3% 3%; */
 }

 .flipWrapper:first-child > div {
  justify-content: space-between;
  margin: 0% 0%;
 }

/* .flipWrapper:first-child > div > div { */
#bookCover > div > div {
  width: 50%;
  height: 100%;
}

/* .flipWrapper:not(:first-child) > div > div { */
.flipWrapper:not(:first-child) > div.noteFrame > div {
  width: 48%;
  height: 100%;
  background: #fffef6;
  background: linear-gradient(to top, #f3ecd8 50%, #fffef2);
  padding: 5% 2% 3%;

  font-family: "Kosugi Maru", sans-serif;
  font-weight: 400;
  font-style: normal;
}

/* .flipWrapper:not(:first-child) > div > div:first-child { */
.flipWrapper:not(:first-child) > div.noteFrame > div.leftNote {
  border-radius: 0 20px 20px 0;
  border-left: 3px solid #000;
  border-right: 3px solid grey;
  border-bottom: 3px solid grey;
}

/* .flipWrapper:not(:first-child) > div > div:not(:first-child) { */
.flipWrapper:not(:first-child) > div.noteFrame > div.rightNote {
  border-radius: 20px 0 0 20px;
  border-left: 3px solid grey;
  border-right: 3px solid #000;
  border-bottom: 3px solid grey;
}

/* #bookCover.turned { */
.flipWrapper.turned {
  /* left: -100%; */
  /* left: -15%; */
  transform: rotateY(90deg) rotateZ(-1deg);
  transform: rotateY(90deg) rotateZ(3deg);
  transform-origin: center;
}

/* #bookCover { */
#bookCover.flipWrapper {
  /* position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px; */
  /* left: -100%; */
  z-index: 100;
  z-index: 10;
  /* background-color: #949595; */
  /* background-color: #20eadb; */
  /* background-color: #c6af75; */

  /* background: linear-gradient(to top, rgb(255 248 238), rgb(240 220 190) 50%, rgb(220 190 150)); */
  background: linear-gradient(to top, rgb(234 175 87), rgb(255 248 238) 50%, rgb(255 158 29));

  /* display: flex; */
  /* justify-content: center;
  align-items: center; */
  /* transition: all 1.5s; */
}

/* #bookCoverB.flipWrapper {
  z-index: 0;
  background-color: #949595;
} */

#bookCover .leftCover::before {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  content: "";
  width: 100%;
  height: 100%;
  /* background: red; */
  background: linear-gradient(to top, rgb(234 175 87), rgb(255 248 238) 50%, rgb(255 158 29));
  /* animation: firstView 3s infinite alternate; */
}

#bookCover.now .leftCover::before {
  animation: firstView 3s infinite alternate;
}
/* .nowでない時もアニメーションが動きっぱなしと思われるので要修正（済 */

@keyframes firstView {
  0% {
    filter: hue-rotate(0deg);
  }
  50% {
    /* filter: hue-rotate(0deg); */
    }
  100% {
    filter: hue-rotate(-45deg);
  }
}

#bookCover .leftCover {
  position: relative;
  /* width: 95%;
  height: 100%; */
  /* background-color: rgb(151, 199, 199);
  border-right: 4px solid #000;
  display: flex; */
  display: flex;
  align-items: center;
  justify-content: center;

  font-family: "Kosugi Maru", sans-serif;
}

.leftCover h1 {
  position: relative;
  top: -300px;
  opacity: 0;
  transition: opacity 1s;
}
/* キャッチコピーのアニメーション（.nowでない時以外は停止できているか？）OK */
/* .now .leftCover h1 .high-jump span { */
.now .leftCover h1 .high-jump span {
  display: inline-block;
  position: relative;
}

.now .leftCover h1 .high-jump span.is-jumping {
  /* animation: highJump 0.3s linear; */
  /* animation: highJump 0.5s linear; */

  animation: highJump 1s linear none;

  /* animation: highJump 0.3s linear infinite; */
}

@keyframes highJump {
    0% {top: 0}
    50% {top: -50px}
    100%{top: 0}
}

/* .leftCover .binding { */
.rightCover .binding {
  width: 5%;
  height: 100%;
  background-color: rgb(58, 125, 196);
  background: linear-gradient(to top, rgba(0, 60, 110, 1), rgba(0, 70, 120, 1) 15%,  rgba(0, 160, 210, 1));
  border-right:8px double #fff ;
}

/* .leftCover .coverCont { */
.rightCover .coverCont {
  width: 95%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* #bookCover .rightCover,#bookCoverB .rightCover { */
#bookCover .rightCover {
  /* width: 5%;
  height: 100%; */
  /* background-color: transparent; */
  /* background-color: rgb(151, 199, 199); */
  /* background: linear-gradient(to top, rgb(83 146 214), rgb(81 174 199) 50%, rgb(147 216 228)); */
  background: linear-gradient(to top, rgb(83 146 214), rgb(192 221 228) 50%, rgb(147 216 228));
  /* background: linear-gradient(to top, rgb(83 146 214), rgb(147 216 228) 50%, rgb(197 221 228)); */
  border-right: 4px solid #000;
  display: flex;
}

.coverCont h1 {
  border-bottom: 5px solid rgb(0 70 120);
}

@keyframes instruct {
  0% { color: blue;
  }
  100% { color: deeppink;
  }
}

.now .coverCont p:nth-of-type(1) {
  animation: instruct 1.5s infinite alternate;
}

.coverCont p:nth-of-type(1) {
  font-weight: bold;
  color: blue;
  position: relative;
  /* animation: instruct 1.5s infinite alternate; */
}

@keyframes blinking {
  0% { opacity: 0;
       right: -2%;
    }
  100% { opacity: 1;
          right: 4%;
    }
}

.now .coverCont p:nth-of-type(1) i.fa-solid {
  animation: blinking 1.5s ease-in-out infinite alternate;
}

.coverCont p:nth-of-type(1) i.fa-solid {
  position: absolute;
  top: 0;
  right: 2%;
  transform: rotate(180deg);
  font-size: x-large;
  /* animation: blinking 1.5s ease-in-out infinite alternate; */
  /* transition: all 2s; */
}

.coverCont p {
  border-bottom: 2px dashed #000;
}

.nullHead {
  border-bottom: 3px dashed #000;
  height: var(--height-folderHead);
}

/* 各所の仕様によって固定しづらい */
.leftContent {
  /* display: flex;
  flex-flow: wrap; */
  /* display: flex;
 flex-flow: column;
 justify-content: space-around; */
  border-bottom: 3px dashed #000;
  height: var(--height-folderCont);
}

.folderHead {
  display: flex;
  align-items: center;
  justify-content: end;
  border-bottom: 3px dashed #000;
  height: var(--height-folderHead);
}

/* h1.folderHead { */
.folderHead h2{
  text-align: right;
  padding-right: 5%;
  margin: 0;
  /* border-bottom: 3px dashed #000; */
  /* height: 9vh; */
}

/* h1.folderHead::before { */
.folderHead h2::before {
  position: static;
  background-color: #000;
  /* border-radius: 5px; */
  content: "" !important;
  display: inline-block;
  height: 50px;
  margin-right: 25px;
  vertical-align: middle;
  width: 3px;
  transform: rotate(45deg);
}

.folderHead p {
  margin: 0;
}

/* .rightWorks { */
/* 最終的に差異がなかったら左側に統合 */
.rightContent {
 /* height: attr(data-height); */
 /* height: calc(100% - 52.4px); */
 display: flex;
 flex-flow: column;
 justify-content: space-around;
 border-bottom: 3px dashed #000;
 height: var(--height-folderCont);
}

.rightUnderMob {
  display: none;
}

/* リモート自宅と通所教室とで色感が微妙に異なる？（自宅で内部照明を下げてるせい？ */
#works.flipWrapper {
  /* left: -100%; */
  background-color: red;
  background: linear-gradient(45deg, #ff7e5f, #a7cfff);
  background: linear-gradient(45deg, tomato, yellow);
  z-index: 8;
}

/* #works .leftContent ul { */
/* #works ul { */
/* #works ul,#blog ul { */
#works ul.pageLoop,#blog ul.postLoop {
/* #works .leftContent > ul, #works .rightOverTab > ul,#works .rightUnderMob > ul,
#blog .leftContent > ul,#blog .rightOverTab > ul,#blog .rightUnderMob > ul { */
  display: flex;
  justify-content: space-between;
  flex-flow: wrap;
  list-style: none;
  margin: 0;
  padding-left: 0;
  height: 100%;
  width: 100%;
}

/* 右側全体に共通化？ */
#works .rightContent {
  display: flex;
  flex-flow: column;
  /* justify-content: space-between; */
  justify-content: space-around;
  /* border-bottom: 2px dashed #000; */
}

/* #works .leftContent ul li { */
/* #works ul li { */
#works ul.pageLoop li.pageList {
/* .leftContent ul li,.rightContent ul li { */
  /* width: 49%; */
  width: 100%;
  /* height: 49%; */
  height: 24%;
  padding: 1.5% 1.5%;
  border-bottom: 2px dashed #000;
  display: flex;
}

/* #works ul li:not(:last-child) { */
/* #works .leftContent ul li:last-child, #blog .leftContent ul li:last-child { */
#works .leftContent ul.pageLoop li.pageList:last-child, #blog .leftContent ul.postLoop li.postList:last-child {
/* .leftContent ul li:last-child { */
  border-bottom: none;
}

/* #works .rightContent ul li { */
#works .rightOverTab ul.pageLoop li.pageList,#blog .rightOverTab ul li {
  height: 50%;
}

/* #works .leftContent ul li img { */
/* #works .leftContent .worksImg img { */
#works .worksImg img {
  /* display: block; */
  /* width: 15.5vw; */
  /* width: 15.8vw; */
  height: 100%;
  /* object-fit: cover; */
  /* border-radius: 5%; */
  border: 1px solid #000;
  aspect-ratio: 4 / 3;
}

#works .rightContent .rightOverTab .worksImg {
  display: flex;
  align-items: center;
}

#works .rightContent .worksImg img {
 /* height: 10.5vw; */
}

/* #works .leftContent .worksTex { */
#works .worksTex {
  margin-left: 2%;
  display: flex;
  flex-flow: column;
  justify-content: center;
}

/* #works li h3,#works li p { */
.flipWrapper .lined {
  /* margin: 0; */
  /* margin-top: 0; */
  margin-top: 3%;
  /* margin-bottom: 0; */
  margin-bottom: 3%;
  border-bottom: 2px dashed #000;
  padding-bottom: 1%;
}

/* h3.lined ,p .lined { */
h3.lined {
 font-size: 16px;
}

p.lined {
 font-size: 16px;
}

@keyframes link-anim {
  0% {
  color: #000;
  background-color: #007bff;
  box-shadow: 2px 2px 2px #808080;
 }
  50% {
  color: #28a745;
 }
  100% {
  color: #007bff;
 }
}

#works.now h3 a,#blog.now h3 a {
/* #works.now h3 a,#blog.now h3 a,
#works.now h3 span,#blog.now h3 span { */
/* #works.now h3,#blog.now h3 { */
 animation-name: link-anim;
 animation-duration: 2s;
 animation-iteration-count: infinite;
 animation-direction: alternate;
} 

#works.now h3 a:hover,#blog.now h3 a:hover {
/* #works.now h3 a:hover,#blog.now h3 a:hover, */
/* #works.now h3 span:hover,#blog.now h3 span:hover { */
  /* animation: none; */
  background-color: #db450f;
}

/* #works .worksTex p span.sepTagPage {
  margin-left: 1px;
  margin-right: 1px;
} */

#about.flipWrapper {
  /* left: -100%; */
  /* background-color: blue; */
  /* background: linear-gradient(45deg, cornflowerblue, violet); */
  background: linear-gradient(45deg, aqua, cornflowerblue);
  z-index: 6;
}

/* #about .leftNote > div ,#about .rightNote > div {
 border-bottom: 2px dashed #000;
 height: 100%;
} */

#about .leftContent {
  padding: 1%;
}

#about .leftContent h3 {
  margin-top: 0;
  margin-top: 10px;
}

#about .leftContent ul {
 padding-left: 25px;

 padding-left: 30px;
 display: flex;
 justify-content: space-around;
 justify-content: space-between;
 flex-wrap: wrap;
}

#about .leftContent ul li {
  border-bottom: 2px dashed #000;

  width: 45%;
}

#about .leftContent ul li h4,#about .leftContent ul li p {
  margin-top: 15px;
  margin-bottom: 15px;
  /* display: inline-block; */
  /* 今後増えた場合に */
}

#about .rightContent .rightOverTab > div {
  border-bottom: 2px dashed #000;
}

#blog.flipWrapper {
  /* left: -100%; */
  background-color: yellow;
  background: linear-gradient(45deg, yellow,lime);
  z-index: 4;
}

#blog ul {
}

/* #blog ul li { */
#blog ul.postLoop li.postList {
  width: 100%;
  /* height: 49%; */
  height: 24%;
  padding: 1.5% 1.5%;
  border-bottom: 2px dashed #000;
}

#blog .rightOverTab ul li {
 /* height: 50%; */
}

/* #blog .rightOverTab ul li,#blog .rightUnderMob ul li { */
/* #blog .rightOverTab ul.postLoop li.postList,#blog .rightUnderMob ul.postLoop li.postList { */
#blog .rightOverTab ul.postLoop > li.postList,#blog .rightUnderMob ul.postLoop > li.postList {
  height: 50%;
}

#blog .postInfo {
  display: flex;
  /* ↓カテゴリ折り返し */
  flex-wrap: wrap;

  /* 折り返しjq判定が難航したため */
  padding-top: 8px;
  row-gap: 8px;
  margin-bottom: 8px;
}

#blog .postInfo > p {
 /* margin: 8px 0; */
 margin: 0;
}

#blog .postInfo .postTag {
  background-color: #ef8f8f;
  border: 1px solid #123456;
  border-radius: 3px;
  margin-left: 1%;
  padding: 0 2px;
}

/* ↑↑↑折り返しカテゴリ */
#blog .postInfo .postTag.wrapTag {
  /* margin-top: 0; */
}

#blog h3 {
  margin-top: 0;
  margin-bottom: 0;
}

#contact.flipWrapper {
  /* left: -100%; */
  background-color: pink;
  background: linear-gradient(45deg, pink, mediumpurple);
  z-index: 2;
}

/* 以下cf7プラグイン想定仮組 →実装後改訂 */
#contact .leftForm {
  padding: 1%;
  background-color: rgba(0, 0, 0, 0.2);
  /* height: 50%; */
}

/* #contact .leftForm form label br { */
#contact .leftForm form label:not(:has(textarea) ) br {
  display: none;
}

#contact .leftForm form label:not(:has(textarea) ) {
 display: flex;
 justify-content: space-between;

 align-items: center;
}

/* #contact .leftForm form label:not(:has(textarea) ) span { */
#contact .leftForm form label:not(:has(textarea) ) > span {
 width: 50%;

 height: 20px;
 height: var(--height-formLine);
}

/* #contact .leftForm form label:not(:has(textarea) ) span input { */
/* #contact .leftForm form label:not(:has(textarea) ) > span input { */
#contact .leftForm form label:not(:has(textarea) ) > span > input {
  width: 100%;

  height: 20px;
  height: var(--height-formLine);
}

#contact .leftForm form label textarea {
  resize: none;
  width: 100%;
  overflow-y:scroll;
  height: 50px;
  margin-top: 10px;
}

/* #contact .leftForm form p:last-child { */
#contact .leftForm form > p:last-of-type > label {
 display: flex;
 align-items: center;
 justify-content: space-around;
}

#contact .leftForm form > p:last-of-type > label > span:first-of-type {
  width: fit-content;
}

/* #contact .leftForm form label:has(input[type="checkbox"]) { */
#contact .leftForm form .wpcf7-list-item label:has(input[type="checkbox"]) {
/* #contact .leftForm form label:has(input[type="checkbox"]):not(:has(textarea) ) { */
  display: block;

  /* 上３つのspan幅50%に影響を受けて折り返していた分の矯正 */
  width: max-content;
}

#contact .leftForm form input.wpcf7-form-control.wpcf7-submit {
  margin-right: 20px;
}

#contact .leftForm form .wpcf7-spinner {
  /* 送信ボタン横スピナー */
  display: none !important;
}

#contact .leftForm form label .wpcf7-not-valid-tip {
  /* エラーメッセージ */
  /* width: 100%; */
}

#contact .leftForm  input + .wpcf7-not-valid-tip {
  /* 入力欄直後兄弟要素のエラーメッセージの位置 */
  display: none;
}

.wpcf7-form-control-wrap.errorMessageUM {
  /* レスポンシブ用のエラーメッセージの位置 */
  display: none;
}

#contact .formLine p:has(.wpcf7-form-control-wrap.errorMessageOT) {
  /* 下の行に追加したエラーメッセージによる縦margin対策 */
  /* margin-top: -16px !important; */
  margin: 0;
  position: absolute;
  top: 20px;
  top: var(--height-formLine);
  height: 16px;
  display: flex;
  align-items: center;
}

#contact .formLine p:has(.wpcf7-form-control-wrap.errorMessageOT) > span {
  font-size: 0.9em;
}

#contact div.formLine {
  /* margin: 16px 0; */
  position: relative;
}

.wpcf7 form .wpcf7-response-output {
  /* 実際に送信した際にレスポンシブ側でスペースを若干多めに取る部分の修正 */
  margin-top: 1em!important;
}

/* 以上 */

section {
  padding: 3%;
  /* min-height: 60vh; */
  height: var(--height-colophon);
  background-color: #949595;
  background: linear-gradient(to bottom, slategrey,tan);
}

/* #colophon > div.siteMap { */
#colophon > div {
  height: 100%;
  background-color: #d4cece;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Kosugi Maru", sans-serif;
}

/* div.siteMap > div { */
div.siteMap {
  /* display: flex;
  flex-wrap: wrap; */
  /* margin-right: 20px; */
  margin-right: 10vw;
}

/* div.siteMap > div > div { */
div.siteMap > div {
  /* width: 50%; */
  /* padding: 0 2%; */
}

div.siteMap > div h2 a:hover {
  cursor: pointer;
  border-bottom: 3px solid #000;
}


#colophon i {
  /* display: none; */
  /* font-size: 1.2vw; */
  font-size: 1px;
}

footer {
  background-color: #aaaeee;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  /* height: 50px; */
  height: var(--height-footer);
  display: flex;
  justify-content: center;
  align-items: center;
}

/* #mouseStalker {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 25px;
  height: 25px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  transition: 0.2s;
  transition-timing-function: ease-out;
  pointer-events: none;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
} */

/*  */
@media screen and (min-width:970px) {

  /* .flipWrapper .float {
    display: flex;
    align-items: center;
    border-bottom: 2px dashed #000;
  }

  .float div.lined {
    border-bottom: none;
  } */

  #works .leftContent .worksImg img {
  /* #works .leftContent ul li img { */
    /* width: 10.35vw; */
    /* height: 100%; */
  }

  /* .float h3.lined {
    margin-left: 2%;
  } */

  /* #colophon i {
    font-size: 1px;
  } */

}

/* @media screen and (max-width:850px) { */
@media screen and (max-width:900px) and (min-width:701px) {

  /* #bookCover:not( :has( .leftCover.left-invisible ) ) h1 { */
  #bookCover h1 {
    font-size: 24px;
  }

  .coverCont p {
    font-size: 15px;
  }

}

@media screen and (max-width:768px) {

  header {
    border: 3px solid red;
  }

}

/* MobileLサイズにおいて実際の画面幅は425.6pxである */
/* @media screen and (max-width: 426px) { */
@media screen and (max-width: 700px) {

  header nav .headMenu {
    width: 70%;
  }

  .headMenu ul li {
    padding: 1%;
    border-radius: 5px;
    background-color: royalblue;
    border: 2px solid #fff;
  }

  /* 親子でない要素を基準条件にセレクタは立てられるか？→通常は逆流不可 */
  /* 条件を含む要素全体と対象セレクタをまとめて囲むラッパーにhas(条件)をつけ、その子要素に対象を取る */
  /* .headMenu ul li section:has(.now) { */
  /* body:has( section.now ) header .headMenu ul li { */
  body:has( #bookCover.now ) header .headMenu ul li,
  body:has( #colophon.now ) header .headMenu ul li {
    background-color: navy;
    border: 3px solid #fff;
    border: 2px solid #fff;
  }

  body:not( :has( #bookCover.now,#colophon.now ) ) header .headMenu ul li {
    background-color: royalblue;
    border: 2px solid #000;  
  }


  .headMenu ul li a {
    color: #fff !important;
  }

  .flipWrapper.turned {
    left: -15%;
    transform: rotateY(90deg) rotateZ(-1deg);
    transform: rotateY(90deg) rotateZ(3deg);
    transform-origin: left;
  }

  /* .flipWrapper:not(:first-child) > div > div:first-child { */
  /* .flipWrapper > div > div:first-child { */
  #bookCover .leftCover,.flipWrapper:not(:first-child) > div.noteFrame > div.leftNote {
    display: none;
    /* visibility: hidden; */
  }

  /* .flipWrapper:not(:first-child) > div > div { */
  /* .flipWrapper > div > div:last-child { */
  #bookCover .rightCover,.flipWrapper:not(:first-child) > div.noteFrame > div.rightNote {
    width: 100%;
  }
  
  /* .flipWrapper:not(:first-child) > div > div { */
  .flipWrapper:not(:first-child) > div.noteFrame > div.rightNote {
    padding-top: 8%;
  }

  .rightOverTab {
    display: none;
  }

  .rightUnderMob {
    display: block;
    height: 60%;
    /* about両タブで表示する高さが統一できない内はこの高さは固定すべきでないが */
  }

  #works .rightUnderMob .worksImg img {
    /* height: 50vw; */
    /* height: 45vw; */
    height: 38vw;
    /* width: 50vw; */

    height: 100%;
    max-width: 100%;
  }

  /* #works .rightUnderMob li { */
  #works .rightUnderMob .pageLoop li.pageList {
    flex-flow: column;
    border-bottom: none;
    height: 100%;
    text-align: center;
    /* width: 80%; */
    /* width: 80vw !important; */
    /* width: 85vw !important; */
    margin: 0 auto;
    padding: 0 2.5vw;
    /* padding: 0; */
  }
  
  /* スリックスライダー対応 */
  #works .pageSlider .slick-list {
    /* height: 100%; */
    /* height: 256px; */
    height: 45vh;
    width: 80%;
    margin: 0 auto;
  }
  #works .pageSlider .slick-track {
    height: 100%;
  }
  #works .pageSlider .slick-slide {
    padding: 0;
  }

  #works .slick-prev,#works .slick-next {
    top: 34%;
  } 
  #works .slick-prev {
    left: 8%;
  }
  #works .slick-next {
    right: 8%;
  }

  #works .slick-prev:before,#works .slick-next:before,
  #blog .slick-prev:before,#blog .slick-next:before {
    color: #000;
  }

  #works .worksImg {
    height: 60%;

    /* SS対応 */
    display: flex;
    justify-content: center;
  }

  #works .worksTex {
    margin-left: 0;
    height: 40%;
  }

  #about .rightUnderMob {
    height: auto;
  }

  #about .profileTab {
    display: none;
  }

  #about .profileTab.showTab {
    display: block;
    height: 45vh;
  }

  #about .tabExchange {
    display: flex;
    justify-content: space-around;
  }

  #about .tabExchange > div {
    background-color: #d4cece;
    border-radius: 8px;
    padding: 0% 2%;
  }

  #about .tabExchange > div.active {
    /* background-color: #123456; */
    background-color: #60a1e1;
    border-radius: 8px;
    border: 1px solid #000;
    /* padding: 0% 2%; */
  }

  #about .profileTab > div {
    border-bottom: 2px dashed #000;
  }

  #about .profileTab.underProfile ul,
  #about .profileTab ul.proLanguage {
    display: flex;
    flex-wrap: wrap;
    padding-left: 25px;
    justify-content: space-between;
  }

  #about .profileTab.underProfile ul li {
    width: 50%;
  }

  #about .profileTab ul.proLanguage li {
    /* width: 50%; */
    width: 47%;
    border-bottom: 2px dashed #000;
  }


  #blog .postInfo {
    padding-top: 12px;
    row-gap: 12px;
    margin-bottom: 12px;
  }

  #blog .postInfo > p {
   /* margin: 16px 0; */
    margin: 0;
  }

  /* #blog .rightUnderMob ul { */
  #blog .rightUnderMob ul.postLoop {
    height: 35vh;
    height: 40vh;
  }

  /* #blog .rightUnderMob li { */
  #blog .rightUnderMob li.postList {
    width: 80%;
    margin: 0 auto;
  }
  /* スリックスライダー対応 */
  #blog .rightUnderMob .postSlider .slick-track {
    height: 100%;
  }

  #blog .rightUnderMob .postSlider .slick-slide > div {
    height: 50%;
  }

  #blog .rightUnderMob ul.postLoop li.postList {
    height: 100%;
  }

  #blog .rightUnderMob .postSlider .slick-list {
    width: 80%;
    margin: 0 auto;
  }

  #blog .slick-prev,#blog .slick-next {
    /* top: 34%; */
  } 
  #blog .slick-prev {
    left: 2%;
  }
  #blog .slick-next {
    right: 2%;
  }

  /* cf7想定仮組 */
  /* #contact .leftForm form label br { */
  #contact .leftForm form label:not(:has(textarea) ) br {
    display: block;
  }

  #contact .leftForm form label:not(:has(textarea) ) {
    display: block;
   }

  #contact .leftForm form label:has(input.wpcf7-form-control.wpcf7-submit) {
    display: flex;
  }

  #contact .leftForm form label:not(:has(textarea) ) span input {
    height: auto;
  }

  #contact .leftForm form label:not(:has(textarea) ) span input,
  #contact .leftForm form label textarea {
    margin-top: 4px;
  }

  .wpcf7-form-control-wrap.errorMessageUM {
    display: inline-block;
    width: fit-content !important;
  }

  .wpcf7-form-control-wrap.errorMessageOT,#contact .leftForm  textarea + .wpcf7-not-valid-tip {
    display: none;
  }

  #contact .rightUnderMob .leftForm form div.formLine:nth-of-type(2) {}
  /* #contact .rightUnderMob .leftForm form div:first-of-type {} */
  #contact .rightUnderMob .leftForm form div.formLine:nth-of-type(2) p:first-of-type {
    margin-top: 0;
  }

  /* 送信後対応未完了セレクタ要修正（済 */

  #contact .rightUnderMob .leftForm form div.formLine p,
  #contact .rightUnderMob .leftForm form > p {
    margin-top: 8px;
    margin-bottom: 8px;
  }

  #contact .rightContent {
    justify-content: start;
  }

  /*  */

  #contact .rightUnderMob {
    height: auto;
    /* about両タブで表示する高さが統一できない内はこの高さは固定すべきでないが */
  }

  #colophon > div {
    /* flex-flow: column; */
  }

  div.siteMap {
    /* margin-right: 0; */
    display: none;
  }


}

@media screen and (max-width: 550px) {

  :root {
    /* --height-folderHead: ; */
  }

  header {
    border: none;
  }

  nav .turnLeft i.fa-angle-double-left,
  nav .turnRight i.fa-angle-double-right {
    display: none;
  }

  header nav .headMenu {
    width: 80%;
  }

  .headMenu ul {
    justify-content: space-between;
  }

  .headMenu ul li {
    /* font-size: 14px; */
  }

  .folderHead {
    align-items: end;
  }

  .folderHead h2 {
    font-size: 18px;
  }

  .folderHead h2::before {
    height: 25px;
  }

  #works .slick-prev {
    left: 2%;
  }
  #works .slick-next {
    right: 2%;
  }

  #about .profileTab.underProfile ul {
    display: block;
  }

  #about .profileTab.underProfile ul li {
    width: 100%;
  }

  #about .profileTab ul.proLanguage {
    padding-left: 20px;
    padding-left: 35px;
    /* justify-content: space-around; */
  }

  #about .profileTab ul.proLanguage li {
    width: 40%;
  }

  #blog .rightUnderMob ul.postLoop {
    height: 43vh;
  }
 
  #blog .slick-prev {
    left: 0%;
  }
  #blog .slick-next {
    right: 0%;
  }
  /* #contact .rightContent > div:first-child {
    display: none;
  } */

  #contact .rightContent {
    justify-content: space-around;
  }

  #contact .leftForm form label:not(:has(textarea) ) br {
    display: none;
  }

}

@media screen and (max-width: 400px) {
  .headMenu ul {
    margin: 0 0 15px;
  }

  /* ツール増やした際にモバSで下に溢れる関係で調整 */
  #about .rightUnderMob .contExchange .profileTab h3 {
    margin: 10px 0;
  }

  #about .rightUnderMob .contExchange .profileTab.underProfile ul li {
    font-size: 14px;
  }

  #blog .postInfo {
    padding-top: 8px;
    row-gap: 8px;
    margin-bottom: 8px;
  }
}

@media screen and (max-height: 569px) {

  body {
    transform: scale(0.8);
    width: 125vw;
    height: 125vh;
    height: 125svh;
    transform-origin: top left;
    position: absolute;
    top: 0;
    left: 0;
  }

  section {
    height: 125vh;
    height: calc(125vh - 25px);
    height: calc(125svh - 25px);
  }

  #vdbanner {
    /* bottom: 45px!important; */
  }


  #about .tabExchange {
    margin-bottom: 25px;
  }

  #about .rightOverTab ul li {
    width: 48%;
  }

}

/* モバイル以下画面回転検知（簡易） */
@media screen and (max-height: 432px) {

  .warningOrient {
    display: flex;
  }

}