@charset "UTF-8";


/*add eyecatch start*/

.eyeC01catch{
  left: 50%;
  top:50%;
  animation: none;
  transform: translate(-50%, -50%);
}

.eyeC01catch > p:nth-of-type(1),
.eyeC01catch > p:nth-of-type(2){
  background: none;
  animation: none;
  color: #fff;
}

.eyeC01catch > p:nth-of-type(2){
  padding-top: 0;
}

/*add eyecatch end*/

/*add20260616s*/
.staff_flex1 h4 > span{
color: inherit;
font-size: inherit;
display: inline-block;
}

/**/



/*add20260616e*/


#eyeC01w{
width:100%; 
}

.eyeC01{
margin:0;
margin-top: calc(77px);
padding: 0;
width: 100%;
}

.eyeC01 > div{
width:100%;
}

/*.staff_flex1*/

.staff_flex1,.staff_flex2{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 2%;
}

.staff_flex1 img{
  width: 100%;
}


.staff_flex1 > div,.staff_flex2 > div{
  flex-basis: 50%;
  max-width: 50%;
 /* border: 1px solid #ccc;*/
  box-sizing: border-box;
  padding:1rem;
}

.staff_flex1 > div:nth-of-type(1){

}

.staff_flex2 > div:nth-of-type(1){
background: url(../../img/staff/image_staff.jpg);
background-position: top 30% left 50%;
background-size: cover;
}


.staff_flex1 > div > h4,.staff_flex2 > div > h4{
  font-weight: normal;
  font-size: 2.5rem;
  color: #3367FF;
  margin-bottom: 20px;
  line-height:1.3; /*20210406custom*/
    font-weight: 700;
    letter-spacing: .1rem;
}

.staff_flex1 > div > h4 >div,.staff_flex2 > div > h4 >div{
  display:inline-block;/*20210406custom*/
  color: inherit;
}


.staff_flex1 > div > h5,.staff_flex2 > div > h5{
  font-weight: normal;
  font-size: 1.5rem;
  color: #000;
  line-height: 1.3;
}


.staff_flex1 > div > h5 span.staff_name,.staff_flex2 > div > h5 span.staff_name{
font-size: inherit;
/*color: #FF4212;*/
color: #000;
font-weight: 700;
/*font-style: oblique;*/
}


.staff_flex1 > div > h6,.staff_flex2 > div > h6{
  /*font-family: hikkitai2;*/
  font-weight: normal;
  font-size: 1.3rem;
  color: #000;
  letter-spacing: 0rem;
  line-height: 1.2;
  margin-top: 0rem;
}


.staff_flex1 > div > div,.staff_flex2 > div > div{
margin: 1rem auto 1.25rem;
margin-bottom: 0;
}

.staff_flex1 > div > div p,.staff_flex2 > div > div p{
color: #000;
margin:3px 0;
}

.staff_flex1 > div > div p span.coment_link a,
.staff_flex1 > div > div p span.coment_link a:visited,
.staff_flex2 > div > div p span.coment_link a,
.staff_flex2 > div > div p span.coment_link a:visited{
color: #fff;
padding:3px 5px;
margin: 0 3px;
border-radius: 5px;
background: #3367FF;
}

.staff_flex1 > div > .coment,.staff_flex2 > div > .coment{

}

.staff_flex1 > div > .coment > h3,.staff_flex2 > div > .coment > h3{
  font-size: 1rem;
  color:#FF4212;
  color: #000;
  /*#7DCC14-#FF4212*/
  font-weight: normal;
  letter-spacing: .1rem;
}

.staff_flex1 > div > .coment > h3 span,.staff_flex2 > div > .coment > h3 span{
  color: inherit;
  font-size: inherit;
  font-weight: 700;
}

.staff_flex1 > div > .coment > h3 span:before,.staff_flex2 > div > .coment > h3 span:before{
content: "\02747";
padding-right:5px; 
}

.staff_flex1 > div > .coment > h3 span:nth-of-type(2),.staff_flex2 > div > .coment > h3 span:nth-of-type(2){
color: #666;
font-weight: 400;
transform:scale(.90);
}


.staff_flex1 > div > .coment > h3 span:nth-of-type(2):before,
.staff_flex2 > div > .coment > h3 span:nth-of-type(2):before{
content: "|";
margin:0 .5rem;
}


.staff_flex1 > div > .coment > p,.staff_flex2 > div > .coment > p{
  color: #000;
  margin: 5px auto;
}



.staff_flex1 > div > div.line_des001,.staff_flex2 > div > div.line_des001{
display: inline-block;
position: relative;
width: 110px;
height:2px;
border-radius: 5px;
margin: 0.8rem 0;
margin-bottom: .5rem;
}

/*animetion*/
.line_des001add{
animation: lineanime_staff 1s ease-in-out 0s /*infinite*/1 forwards; 
}


/*.staff_flex1*/


/*animetion*/




@keyframes lineanime_staff {
  0% {    
  background: #FF4212;
  width: 10px;
  }

  100%   { 
  background:  #7DCC14;
  width: 110px; 
   }
}


@keyframes lineanime_staff2 {
  0% {    
  background: #FF4212;
  width: 5%;
  }

  100%   { 
  background:  #7DCC14;
  width: 50%; 
   }
}

/*staff_all*/
.staff_all{
  margin-top: 30px;
  width: 100%;
}

.staff_all > div:nth-of-type(1){
background: url(../../img/staff/image_all_staff.jpg);
background-position: top 50% left 50%;
background-size: cover;
height: 500px;
}


.staff_all > div:nth-of-type(2){
  padding: 3%;
}

.staff_all > div:nth-of-type(2) > h4{
  font-weight: normal;
  font-size: 2.5rem;
  color: #3367FF;
}


.staff_all > div:nth-of-type(2) > p{
  font-size: 1rem;
  color: #000;
}


/*staff_all*/

/*---------------add 202606161715start*/
.line_des001 {
  display: none !important;
}

/* 1. 外枠の2段組（float）を解除して縦1本にリセット */
.maincont_wrap .staff_flex1,
.maincont_wrap .staff_flex1 > div {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  margin: 0 0 20px 0 ;
  padding: 0 !important;
}

/* 2. メイン画像：横長スクリーン比率（PC: 21/9）・背景は単色の黒 */
.maincont_wrap .staff_flex1 .gallery_main_img,
.maincont_wrap .staff_flex1 #mainView {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 21 / 9 !important; 
  object-fit: contain !important;
  background-color: #1a1a1a !important;
  border-radius: 0px;
  margin-bottom: 5px !important;
}

/* 💡【修正】画像名を表示するエリア（左右マージン4%を絶対に維持） */
.gallery_img_name {
  margin: 15px 4% 15px 4% !important; /* 左右に4%の余白を固定 */
  font-size: 0.90rem !important;
  color: #666 !important;
  font-weight: 400 ;
  display: block !important;
  text-align: left !important;     /* 左揃え */
}

/* 3. 見出しテキスト：左揃え（4%の余白を維持） */
.maincont_wrap .staff_flex1 h4 {
  text-align: left !important;
  margin: 15px 4% 15px 4% !important;
  font-size: 1.3rem !important;
}
.maincont_wrap .staff_flex1 .line_des001 {
  margin: 0 0 25px 0 !important;
}

/* 4. サムネイルエリア：横スクロール（幅92%・左右余白4%を維持） */
.maincont_wrap .staff_flex1 .phot_boxs {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  width: 92% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 5px 0 15px 8px !important;
  margin-right: 4% !important;
  margin-left: 4% !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

/* 5. サムネイル画像：サイズ固定（PC: 85px） */
.maincont_wrap .staff_flex1 .phot_boxs img,
.maincont_wrap .staff_flex1 .phot_boxs img.thumb_img {
  width: 85px !important;
  height: 85px !important;
  flex-shrink: 0 !important;
  object-fit: cover !important;
  border: 2px solid transparent !important;
  border-radius: 4px;
  cursor: pointer !important;
  opacity: 0.6;
  -webkit-user-drag: none !important;
  user-drag: none !important;
  pointer-events: auto !important;
}
.maincont_wrap .staff_flex1 .phot_boxs img.thumb_img:hover {
  opacity: 0.9 !important;
}
.maincont_wrap .staff_flex1 .phot_boxs img.is-active,
.maincont_wrap .staff_flex1 .phot_boxs img.thumb_img.is-active {
  border-color: #3367FF !important;
  opacity: 1 !important;
}

/* 6. スクロールバーの見た目（PC用） */
.maincont_wrap .staff_flex1 .phot_boxs {
  /* JSのドラッグ処理と競合するため scroll-behavior: smooth は削除しました */
  -webkit-overflow-scrolling: touch !important; /* スマホ・トラックパッド用の慣性スクロールは維持 */
}

.maincont_wrap .staff_flex1 .phot_boxs::-webkit-scrollbar {
  height: 8px; /* 掴みやすい太さ */
}

.maincont_wrap .staff_flex1 .phot_boxs::-webkit-scrollbar-thumb { 
  background: #1a1a1a !important; /* 黒（濃いグレー） */
  border-radius: 10px; 
}

.maincont_wrap .staff_flex1 .phot_boxs::-webkit-scrollbar-track { 
  background: #e0e0e0 !important; /* 土台のグレー */
  border-radius: 10px; 
}
}


/* サムネイルの横並びコンテナ（間隔を元に戻します） */
#thumbContainer {
  display: flex !important;
  gap: 10px !important; /* サムネ同士の間隔（元の設定に合わせて適宜変更してください） */
  overflow-x: auto;
  white-space: nowrap;
  align-items: flex-end;
  padding-bottom: 5px;
}

/* 各サムネイルと文字を1セットにする縦並びの箱 */
.thumb_item {
  display: flex !important;
  flex-direction: column !important; 
  align-items: flex-start !important; 
  flex-shrink: 0 !important;         
  min-width: 0 !important; /*  文字が画像を押し出すのを防ぐためのお守り */
}

/* 各サムネの頭上に常時表示される小さな名前 */
.thumb_label {
  font-size: 10px !important;        
  color: #000 !important;         
  margin-bottom: 5px !important;     
  display: block !important;
  width: 100% !important;            /* 下にある画像の横幅いっぱいに広げる */
  white-space: nowrap !important;    /*  絶対に改行させない */
  overflow: hidden !important;       /*  画像の幅からはみ出た部分を非表示にする */
  text-overflow: ellipsis !important;/*  はみ出た文字の末尾を自動で「...」にする */
  text-align: left !important;
}

/* 各サムネイル画像（余計な幅固定を削除し、本来のサイズを維持させます） */
.thumb_img {
  display: block !important;
  height: auto !important;
  flex-shrink: 0 !important;
}


/* ========================================================
   メイン画像エリアの2枚重ね・デザイン崩れ完全防止CSS
======================================================== */

/* 2枚の画像を包む親コンテナ（元々の画像エリアと同じサイズを維持） */
#mainViewContainer {
  position: relative !important;
  width: 100% !important;
  display: block !important;
  margin-top: 15px; /* サムネとの間隔 */
}

/* 2枚の画像共通：元々のデザイン特性（黒余白など）をどちらにも100%強制適用 */
.main-image {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  /*  元の .gallery_main_img に指定されていた最大高さをここに引き継ぎ、黒余白を維持 */
  max-height: 500px !important; /* ※もし元々の最大高さが別数値なら、その数値に合わせてください */
  object-fit: contain !important; /* 横長・縦長画像を黒余白で収める設定 */
  background-color: #000000 !important; /* 黒背景を維持 */
  display: block !important;
  
  /*  停止感をなくすため、流れるように滑らかな加減速（0.35秒）に設計 */
  transition: filter 0.35s cubic-bezier(0.25, 1, 0.5, 1), 
              opacity 0.35s cubic-bezier(0.25, 1, 0.5, 1) !important;
  filter: blur(0px);
  opacity: 0;
  cursor: pointer !important;
}

/* 現在前面で表示されているアクティブ画像 */
.main-image.is-active {
  position: relative !important; /*  relativeにすることで、画像本来の正しい高さ・余白をブラウザに計算させます */
  opacity: 1 !important;
  filter: blur(0px) !important;
  z-index: 2; /* 前面に出す */
}

/* フェードアウトしながらボケていく古い画像 */
.main-image.is-leaving {
  position: absolute !important; /*  absoluteにして浮かせることで、高さを重複させず余白のバグを防ぎます */
  top: 0;
  left: 0;
  opacity: 0 !important;
  filter: blur(10px) !important; /* なめらかな最高点ブラー */
  z-index: 1; /* 後面へ下げる */
}

/* 完全に隠れている初期状態の画像 */
.main-image.is-hidden {
  position: absolute !important;
  top: 0;
  left: 0;
  opacity: 0 !important;
  filter: blur(10px) !important;
  z-index: 1;
}

/* ========================================================
    サムネイルと頭上文字の一体化設定（画像幅追従）
======================================================== */
#thumbContainer {
  display: flex !important;
  gap: 10px !important;
  overflow-x: auto;
  white-space: nowrap;
  align-items: flex-end;
  padding-bottom: 5px;
}

.thumb_item {
  display: flex !important;
  flex-direction: column !important; 
  align-items: flex-start !important; 
  flex-shrink: 0 !important;         
  min-width: 0 !important;
 font-weight: 900;
}

.thumb_label {
  font-size: 10px !important;        
  color: #777777 !important;         
  margin-bottom: 5px !important;     
  display: block !important;
  width: 100% !important;            
  white-space: nowrap !important;    
  overflow: hidden !important;       
  text-overflow: ellipsis !important;
  text-align: left !important;
}

.thumb_img {
  display: block !important;
  height: auto !important;
  flex-shrink: 0 !important;
}

.thumb_img.is-active {
  outline: 2px solid #0044cc !important;
}

#lightboxModal {
  padding: 0;
  border: none;
  background: transparent;
  max-width: 90vw;
  max-height: 90vh;
}
#lightboxModal::backdrop {
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(10px);
}
#lightboxImage { 
      display: block !important; 
      max-width: 90vw !important;  
      max-height: 85vh !important; 
      object-fit: contain !important; 
      cursor: zoom-out !important; 
      margin: 0 auto !important;
      border-radius: 6px !important;
      
      /* 💡 ここを調整：上品な白い枠線と、写真を浮かび上がらせる強い影を追加 */
      border: 3px solid rgba(255, 255, 255, 0.9) !important; /* 3マイルのしっかりした白枠 */
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(0, 0, 0, 0.5) !important; 
    }

#closeModal {
  position: absolute;
  top: 10px; right: 10px;
  background: white;
  border: none;
  padding: 10px;
  cursor: pointer;
  border-radius: 50%;
}

/* --- サムネイルの文字突き抜け対策 --- */

/* 1. 親要素が子要素のサイズに引きずられないよう制限 */
.thumb_item {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  flex-shrink: 0 !important;
  /* 画像の幅（85px等）に合わせてここを固定、またはmin-widthを指定 */
  width: 85px !important; 
  min-width: 85px !important;
  max-width: 85px !important;
}

/* 2. ラベルの省略設定を強化 */
.thumb_label {
  display: block !important;
  width: 100% !important;            /* 親（85px）の幅を基準にする */
  white-space: nowrap !important;    /* 改行させない */
  overflow: hidden !important;       /* はみ出た分を隠す */
  text-overflow: ellipsis !important;/* はみ出た部分を「...」にする */
  box-sizing: border-box !important;
  font-size: 10px !important;        
  color: #000 !important;           
  margin-bottom: 5px !important;
}

/* 3. 画像が親要素を押し広げないようにする */
.thumb_img {
  width: 100% !important; /* 親の85pxに合わせる */
  height: 85px !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
}

.defoculp002{
  padding-bottom: 1% !important;
}

div.con_com01{
  padding: 0% 4% 0% 4% !important;
  margin-top: 0 !important;
  margin-bottom: 1rem !important;
}

div.con_com01 ul{
font-weight: 900;
font-size: 1.0rem;
list-style-type: circle;
}
div.con_com01 ul > li{
display: inline-block;
color: #000 !important;
margin-right: 1rem;
}

div.con_com01 ul > li:before{
content: "〇";
}

/*---------------add 202606161715end*/


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

.staff_flex1 > div > h4, .staff_flex2 > div > h4{
  font-size: 1.8rem;
}

}



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



}


@media screen and (max-width: 896px){
.eyeC01{  
margin-top: calc(50px);
}

.staff_flex1 > div > h4,.staff_flex2 > div > h4{
  font-size: 1.5rem;
  line-height: 1.5; 
}

.staff_flex1 > div > h5,.staff_flex2 > div > h5{
  font-size: 1.2rem;
  line-height: 1.5;
  margin-top: 1rem;
}

.staff_flex1 > div > h6,.staff_flex2 > div > h6{
  font-size: 1.2rem;
  line-height: 1.2;
}


.staff_flex1 > div > .coment,.staff_flex2 > div > .coment{

}

.staff_flex1 > div > .coment > h3,.staff_flex2 > div > .coment > h3{

}

.staff_flex1 > div > .coment > p,.staff_flex2 > div > .coment > p{
}


/*staff_all*/

.staff_all > div:nth-of-type(1){
height: 400px;
}


.staff_all > div:nth-of-type(2){
  padding: 3%;
}

.staff_all > div:nth-of-type(2) > h4{
  font-weight: normal;
  font-size: 1.5rem;
}


.staff_all > div:nth-of-type(2) > p{
  font-size: 1rem;
}


/*staff_all*/


}

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

.staff_flex1, .staff_flex2 {
  margin-bottom: 45px;
}

.staff_flex1 > div,.staff_flex2 > div{
  flex-basis: 100%;
  max-width: 100%;

}

.staff_flex1 > div:nth-of-type(1),.staff_flex2 > div:nth-of-type(1){
order: 1;
margin-bottom: 0;
padding-bottom: 0;
}

.staff_flex1 > div:nth-of-type(2),.staff_flex2 > div:nth-of-type(2){
order: 2;
padding-top: 0;
}

.staff_flex1 > div > h4,.staff_flex2 > div > h4{
  font-size: 1.3rem;
  line-height: 1.5; 
  margin: 1rem auto;
  text-align: center;
}

.staff_flex1 > div > h5,.staff_flex2 > div > h5{
  font-size: 1.0rem;
  line-height: 1.5;
  margin-top: .8rem;
  text-align: center;
}

.staff_flex1 > div > h6,.staff_flex2 > div > h6{
  font-size: 1.0rem;
  line-height: 1.2;
  text-align: center;
}


.staff_flex1 > div > .coment{

}

.staff_flex1 > div > .coment > h3 span:before, .staff_flex2 > div > .coment > h3 span:before {
    content: "";
}

.staff_flex1 > div > .coment > h3 span:nth-of-type(2),
.staff_flex2 > div > .coment > h3 span:nth-of-type(2){
display: block;
transform: scale(.8);
}

.staff_flex1 > div > .coment > h3 span:nth-of-type(2):before,
.staff_flex2 > div > .coment > h3 span:nth-of-type(2):before {
  content: "";
  margin: auto;
}

.staff_flex1 > div > .coment > h3,.staff_flex2 > div > .coment > h3{
text-align: center;
margin-top: 15px;
line-height: 1.2;
}

.staff_flex1 > div > .coment > p,.staff_flex2 > div > .coment > p{
  font-size: .9rem;
  text-align: center;
  padding: auto;
}


.staff_flex1 > div > div.line_des001,.staff_flex2 > div > div.line_des001{
display: block;
position: relative;
width: 50%;
height:1px;
border-radius: 5px;
margin: .5rem auto;
margin-bottom: .5rem;
}

.line_des001add{
animation: lineanime_staff2 1s ease-in-out 0s /*infinite*/1 forwards; 
}

.staff_flex1 > div > div p,.staff_flex2 > div > div p{
font-size: .9rem;
}


/*staff_all*/

.staff_all{
margin-top: auto;
}

.staff_all > div:nth-of-type(1){
height: 300px;
}


.staff_all > div:nth-of-type(2){
  padding: 3%;
}

.staff_all > div:nth-of-type(2) > h4{
  font-weight: normal;
  font-size: 1.3rem;
  margin: 1rem auto;
}


.staff_all > div:nth-of-type(2) > p{
  font-size: .9rem;
}


/*staff_all*/

/*202606161722-----------start*/

/* スマホ画面では通常の4:3の方が見やすいためメインの比率を変更 */
  .maincont_wrap .staff_flex1 .gallery_main_img,
  .maincont_wrap .staff_flex1 #mainView {
    aspect-ratio: 4 / 3 !important; 
  }

  /* 見出し文字をスマホ用に少し小さく調整 */
  .maincont_wrap .staff_flex1 h4 {
    font-size: 1.1rem !important;
    margin: 20px 4% 10px 4% !important; /* スマホ用に余白も少し詰めました */
  }

  /* サムネイルを少し小さくして、画面内に収まりやすく調整 */
  .maincont_wrap .staff_flex1 .phot_boxs img,
  .maincont_wrap .staff_flex1 .phot_boxs img.thumb_img {
    width: 75px !important;
    max-width: 75px !important;
    height: 75px !important;
    max-height: 75px !important;
  }

.maincont_wrap .staff_flex1, .maincont_wrap .staff_flex1 > div {
     margin: -10px 0 20px 0; 
}


div.con_com01 ul{

font-size: .8rem;

}
/*202606161722-----------end*/

}



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

.AnkLinkDes01 div{
  margin-right: 1%;  
  border: 1px solid #3367FF;
  font-size: .9rem;
  text-align:center;
}


.staff_flex1 > div:nth-of-type(1),.staff_flex2 > div:nth-of-type(1){

}


.staff_flex1 > div > h4,.staff_flex2 > div > h4{
  font-size: 1.1rem;
  line-height: 1.5; 
  margin: .8rem auto;
}

.staff_flex1 > div > h5,.staff_flex2 > div > h5{
  font-size: 1.0rem;
  line-height: 1.5;
  margin-top: .8rem;

}

.staff_flex1 > div > h6,.staff_flex2 > div > h6{
  font-size: 1.0rem;
}


.staff_flex1 > div > .coment{

}

.staff_flex1 > div > .coment > h3,.staff_flex2 > div > .coment > h3{
text-align: center;
}

.staff_flex1 > div > .coment > p,.staff_flex2 > div > .coment > p{
  font-size: .9rem;
  text-align: center;
  padding: auto;
}


.staff_flex1 > div > div.line_des001,.staff_flex2 > div > div.line_des001{
display: block;
position: relative;
width: 50%;
height:1px;
border-radius: 5px;
margin: .5rem auto;
margin-bottom: .5rem;
}

.line_des001add{
animation: lineanime_staff2 1s ease-in-out 0s /*infinite*/1 forwards; 
}

.staff_flex1 > div > div p,.staff_flex2 > div > div p{
font-size: .9rem;
}



/*staff_all*/

.staff_all > div:nth-of-type(1){
height: 300px;
}


.staff_all > div:nth-of-type(2){
  padding: 3%;
}

.staff_all > div:nth-of-type(2) > h4{
  font-weight: normal;
  font-size: 1.1rem;
  margin: 1rem auto;
}


.staff_all > div:nth-of-type(2) > p{
  font-size: .9rem;
}


/*staff_all*/


}

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

.staff_all > div:nth-of-type(1){
height: 200px;
}

}