@charset "utf-8";


/* 背景に回転する集中線 */
.kaiten-bg::before {
    content: "";
    position: fixed;
    top: 50%;
    left: 50%;
    width: 150vw;
    height: 150vw;
    background-image: url('../img/kaiten.jpg'); /* ここに集中線画像のURL */
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    transform: translate(-50%, -50%) rotate(0deg);
    animation: rotateBg 30s linear infinite;
    opacity: 0.15; /* うっすら見える */
    z-index:-1;
}
/* 回転アニメーション */
@keyframes rotateBg {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@media screen and (max-width:992px) {.kaiten-bg::before {display: none;}}



/* ------------------------------------------------------------------- 
 * gakuya
 * ------------------------------------------------------------------- */


#gakuya{}




.gakuya-content{margin: 0 auto -7px;text-align: center;}

.gakuya-area {top: 0;left: 0;
  position: relative;
  display: inline-block;
}
.gakuya-content img{width:100%;max-width: 1400px;}

.link-area {
  position: absolute;
  display: block;
  background-color: rgba(255, 0, 0, 0); /* デバッグ用に0.2にして見えるようにもできる */
    /*background-image:url("../svg/profile-link.svg");*/
    background-size: 100% auto;
  cursor: pointer;
}


/* PC用リンクエリア座標 */
.area1 {  top:21.5%; left: 17.5%; width:18%; height:13%; }/*shoko*/
.area2 {  top:21.5%; left: 40%;width:20%; height:13%; }/*jun*/
.area3 {  top:21.5%; left: 67.5%; width:18%; height:13%; }/*furuta*/
.area4 {  top: 46%; left: 17.5%; width:18.5%; height:13%; }/*saotome*/
.area5 {  top: 46%; left: 41%; width:19%; height:13%; }/*koike*/
.area6 {  top: 46%; left: 66.5%; width:20%; height:13%; }/*mukai*/
.area7 {  top: 71%; left: 17.5%; width:18%; height:13%; }/*satoshi*/
.area8 {  top: 71%;left: 41%;width:19%; height:13%; }/*hano*/
.area9 {  top: 71%;left: 67%; width:18.5%; height:13%; }/*awane*/
.area10 { top:5%;left: 70%; width: 5%; height:5%; }/*nakashima*/
.area11 { top:5%;left: 80%; width: 5%; height:5%; }/*inoue*/



/* 背景全体 */
.ukiyo-bg {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100vw;
  height: 100vh;
  background: linear-gradient(to top, #fceabb 0%, #f8b500 100%);
  background-image: url('../img/ukiyo-sky.jpg'); /* 浮世絵風背景画像 */
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

@media screen and (max-width: 767px) {
  .gakuya-area {
    position: relative;
    width: 100%;
  }

  .gakuya-area a[class^="mobile-area"] {
    position: absolute;
    display: block;
 
  }

  .mobile-area3  { top: 8%;  left: 20%; width:62%; height:6%;}/*furuta*/
  .mobile-area2  { top: 18%; left: 20%;width:62%; height:6%;}/*jun*/
 .mobile-area1  { top: 28%;  left: 20%;width:62%; height:6%;}/*shoko*/
    
    .mobile-area9  { top: 38%; left: 20%;width:62%; height:6%;}/*awane*/ 
      .mobile-area8  { top: 48%;left: 20%;width:62%; height:6%;}/*hano*/
      .mobile-area7  { top: 58%; left: 20%;width:62%; height:6%;}/*satoshi*/
    
  .mobile-area5  { top: 68%; left: 20%;width:62%; height:6%;}/*koike*/
  .mobile-area4  { top: 78%; left: 20%;width:62%; height:6%;}/*saotome*/
  .mobile-area6  { top: 88%;  left: 20%;width:62%; height:6%;}/*mukai*/
    

    
    
  .mobile-area10 { top: 99%;  left: 45%; width:15%; height:2%;}/*nakashima*/
  .mobile-area11 { top: 99%;  left: 75%;width:15%; height:2%;}/*inoue*/

  /* リンク内アイコン画像調整 */
  .img-book,
  .img-cap {
    width: 100%;
    height: auto;
  }
}


/*
---------------------------------------------
profile
---------------------------------------------
*/
.profile-bg {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100vw;
  height: 100vh;
  background: linear-gradient(to top, #fceabb 0%, #f8b500 100%);
  background-image: url('../img/ukiyo-bg-pk-yama.jpg'); /* 浮世絵風背景画像 */
  background-size: 100% auto;
  background-position: top center;
  overflow: hidden;
}  
.profile-content {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: top;
    margin: 0 auto;
    text-align: center;
    max-width: 90%
}
.profile-L {
    width: 33%;
    padding: 1rem;
}
.profile-ph, .title-comment, .title-baka {
    margin: auto;
    text-align: center;
}

.profile-ph img {max-width: 100%;}

.title-comment img {
    width: 300px;
    margin: 15px 0 0;
    padding: 1rem;
}
.title-profile img {
    width: 150px;
    margin: 15px auto;
    text-align: center;
}
.title-baka img {
    width: 330px;
    margin: 15px auto;
    text-align: center;
}
.profile-L h1 {
    width:60px;
    color: #231815;
    font-size: 3rem;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    margin: 0 auto;
    text-align: center;
}
.profile-L h1 .director {
    font-weight: 700;
    font-size: 1.2rem;
    margin-bottom: 15px;
}
.profile-R {
    width: 66%;
    margin: 0;
    padding: 2rem 2rem;
}
.profile-content h3 {
    font-size: 1em;
    text-align: left;
    line-height: 1.8em;
    padding: 0.8em 0 1em 0;
    margin: 0;
}
.profile-content .pink {
    color: #ff0066;
    letter-spacing: -0.3em;
    margin-right: 0.5em;
}
.profile-content p {line-height: 1.8;
    color: #333;
    text-align: justify;
    padding: 0;
    margin: 0;
}
p.profile-txt {
    font-size: 0.9em;
    color: #333;
    line-height: 1.4em;
    text-align: justify;
}
/* ------------------------------------------------------------------- 
 * responsive:
 * profile
 * ------------------------------------------------------------------- */
@media screen and (max-width:992px) {
    
    #profile {
    background-image: url("../img/ukiyo-bg-pk-yamasp.jpg");
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 100% auto; 
    padding-bottom: 230px;
}
    
    
    .profile-content {
        width: 100%;
        display: block;
        margin: 0 auto;
        text-align: center;
        max-width: 94%;
    }
    .profile-L {
        width: 100%;
        margin: 0 auto;
        text-align: center;
        padding: 20px 0 40px;
    }
    .profile-L h1 {
        width: 90%;
        margin: auto;
        text-align: center;
        padding-left: 0;
        -webkit-writing-mode: horizontal-tb;
        -ms-writing-mode: lr-tb;
        writing-mode: horizontal-tb;
    }
    .profile-L h1 .director {
        line-height: 1;
        font-size: 1.2rem;
        display: block;
        margin-bottom: 0;
    }
    .profile-R {
        width: 100%;
        padding: 0 0 20px;
    }
    .title-comment {
        font-size: 2em;
        width: 90%;
    }
    .profile-content h3 {
        text-align: left;
        line-height: 1.8em;
        padding: 0;
        margin: 0.5em 0;
    }
    
    .title-baka img {
    width: 90%;
    margin: 15px auto;
    text-align: center;
}
   
    
 .profile-L h1.inouesama{font-size: 2.4rem;}
    
    
} /*end*/


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

    padding-bottom: 100px;
}
    } /*end*/


/* ------------------------------------------------------------------- 
 * story
 * ------------------------------------------------------------------- */

#story{margin: 0;padding: 0;}

.story-content{margin: 0;padding: 0;}
.story-bg {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100vw;
  height: 100vh;
  background: linear-gradient(to top, #fceabb 0%, #f8b500 100%);
  background-image: url('../img/ukiyo-bg-or.jpg'); /* 浮世絵風背景画像 */
  background-size: 100% auto;
  background-position: top center;
  overflow: hidden;
}


.box {
  padding: 0;
  font-weight: 700;
  border: 10px double #231815;
  width: 100%;
  max-width: 960px;
  margin: 0 auto 5rem;
  text-align: center;
  background: url("../img/bggray.jpg") repeat;
}

.box-inner {
  position: relative; /* 疑似要素と重ねるために必要 */
  padding: 5%;
  z-index: 1; /* 本体を前面に */
}

/* 疑似要素で背景画像だけを透過 */
.box-inner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  background-image: url("../svg/gizaL.svg"), url("../svg/gizaR.svg");
  background-repeat: repeat-y, repeat-y;
  background-size: 50px, 50px;
  background-position: top left, top right;

  opacity: 1; /* 背景画像の透明度 */
  z-index: -1; /* 背景として表示 */
  pointer-events: none;
}



.box p{max-width: 80%;margin: auto;padding-bottom: 20px;text-align: justify;font-weight: 500;
}

#story .box-inner img{max-width: 60%;}


/* ------------------------------------------------------------------- 
 * responsive:
 * story
 * ------------------------------------------------------------------- */
@media(max-width:992px) {

    .box {
        width: 100%;
        max-width: 100%;
    }

.box-inner::before {
  background-size: 30px, 30px;
  opacity: 0.3; /* 背景画像の透明度 */
}
.box p{padding-bottom: 15px;}

 #story .box-inner img{padding: 20px 0; max-width: 98%;} 
}/**/
    
  /* ------------------------------------------------------------------- 
 * intro
 * ------------------------------------------------------------------- */

#intro{margin: 0;padding: 0;}

#intro h2{width: 300px;}
.intro-content{margin: 0;padding: 0;}
.intro-bg {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100vw;
  height: 100vh;
  background: linear-gradient(to top, #fceabb 0%, #f8b500 100%);
  background-image: url('../img/ukiyo-bg-pk.jpg'); /* 浮世絵風背景画像 */
  background-size: 100% auto;
  background-position: top center;
  overflow: hidden;
}  




/* ------------------------------------------------------------------- 
 * download
 * ------------------------------------------------------------------- */

#download{
  background: url("../img/lightningBL.png") no-repeat left top , url("../img/lightningBR.png") no-repeat right 20px ;
  background-size: 300px auto; 
		   padding: 70px 0 80px;
}


.download-giza{width: 100%;color: #eee;
      padding: 60px 0 120px; 
background-image: url("../svg/gizaP.svg");
    background-repeat: repeat-x;
    background-position: bottom;
    background-size: 150px;}

.download-content {
 width: 100%;max-width: 1000px;
  display: flex;
  justify-content:center;
  flex-wrap: wrap;
  margin: 0 auto;
  text-align: center;

}

.download-L{  width: 48%;padding:0 1% 1%  0;
}
.download-R{   width: 48%;padding:0 1% 1%  0;
}
.download-C{   width: 48%;
}

.downloadimgbox:hover img {
    opacity: 0.5;
    transition: 1s;
    filter: blur(10px);
}

@media screen and (max-width:992px) {
#download {
  background: url("../img/lightning_01.png") no-repeat left top, url("../img/lightning_02.png") no-repeat right 20px;
  background-size:150px auto; 
		   padding: 70px 0 150px;font-size: 0.9rem;
}

.download-content{
 width: 100%;
  max-width: 70%;display: block;
}
 
    
.download-L,.download-R,.download-C{   width:100%;padding:2% 0 5%;
}
    
    
}/*end*/
/* ------------------------------------------------------------------- 
 * mediaa
 * ------------------------------------------------------------------- */
.mediaatten {
    font-size: 0.88rem;
    line-height: 1.5;
     color: #ff0066;
    margin: 0.5rem 0 1rem;
}
.media-content { 
    width: 100%;
    max-width: 1080px;
    margin: 0 auto 50px;
    text-align: center;
}
.media .textarea {
    width: 100%;
}
.media a {
    text-decoration: underline;
}
.media a:visited {
    text-decoration: underline;
}
.media a:hover {
    text-decoration: none;
}
.update {
    color:  #ff0066;
    font-size: 0.8rem;
    margin: 0.3rem 0.3rem 0 0;
    text-align: center;
}
/* テーブル
========================================== */
.row-head {font-weight: 700;
    color: #230000;
    margin: 0 auto 2rem;
    width: 96%;
    overflow: hidden;
    word-break: break-all;
    word-wrap: break-word;
    background: url(../img/bggray.jpg);
}
.row-head th {
    padding: 6px 8px 5px 1rem;
    border: 1px solid #999;
    /*width: 20%;*/
    overflow: hidden;
    font-style: normal;
    font-weight: bold;
   font-size: 0.88rem;
    text-align: left;
    word-break: break-all;
    word-wrap: break-word;
    vertical-align: top; /*background-color: #eee;*/
}
.row-head td {
    font-weight: 400;
    padding: 5px 10px;
    font-size: 0.88rem;
    text-align: left;
    vertical-align: top;
    border: 1px solid #999;
    overflow: hidden;
    word-break: break-all;
    word-wrap: break-word;
}
.row-head a,.row-head a:visited {
   color: #230000;
  text-decoration: underline;
}

.row-head a:hover {
  color:#ff0066;
}


/* ------------------------------------------------------------------- 
 * responsive:
 * media
 * ------------------------------------------------------------------- */
@media only screen and (max-width: 1024px) {
 
    .media-content {
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        text-align: center;
    }
    .row-head {
        border-collapse: collapse;
        vertical-align: middle;
        width: 90%;
        
    }
    .row-head thead {
        display: none;
    }
    .row-head tr, .row-head td {
        display: block;
        width: auto;
    }
    .row-head tr {
        margin-bottom: 20px;
        padding: 8px 8px 0;
    }
    .row-head td {
        border: none;
        border-bottom: 1px solid #999;
        /*display: flex;
       justify-content: left; */
        text-align: left;
    }
    .row-head td:last-child {
        border-bottom: none;
        background: none
    }
    .row-head td::before {
        content: attr(aria-label);
        display: inline-block;
        font-weight: bold;
        float: left;
        text-align: left;
        padding-right: 20px;
        white-space: nowrap;
    }
} /*end*/



/* ------------------------------------------------------------------- 
 * video
 * ------------------------------------------------------------------- */
#video {

}
/* レスポンシブ動画枠（16:9対応） */
.video-wrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9比率 */
  height: 0;
  overflow: hidden;
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* グリッド全体 */
.video-grid {
  display: grid;
  gap: 16px;
}

/* スマホ：1列（順番そのまま） */
@media (max-width: 767px) {
  .video-grid {
    grid-template-columns: 1fr;
      padding: 0 5%; /* ← 左右に5%のパディング追加 */
  }

  .video-grid > * {
    order: unset;
  }
    

    
}/**/

/* PC：3列3段（順番変更可） */
@media (min-width: 768px) {
  .video-grid {
    grid-template-columns: repeat(3, 1fr);
  }
      /* 並び順入れ替え（PC） */
  .takadaV { order: 1; }
  .junV { order: 2; }
  .furutaV { order: 3; }
  .awaneV { order: 9; }
  .hanoV { order: 8; }
  .satoshiV { order: 7; }
  .koikeV{ order: 5; }
  .saotomeV { order: 4; }
  .mukaiV { order: 6; }
    
}/**/