/* ヘッダー全体のスタイル */
header {
  /* background-color: #f1f1f1; */
  /* padding: 20px; */
  /* display: flex; */
  justify-content: space-between;
  align-items: center;
}

.side-menu {
  display: block;
  position: fixed;
  right: 0;
  top: 20vh;
  z-index: 100;
}
.side-menu-text {
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#54af9c', endColorstr='#5fc45f',GradientType=1 );
  border-radius: 5px 0 0 5px;
  display: block;
  padding: 5px 5px 15px 5px;
  margin-bottom: 15px;
  color: #fff;
  border-top: 2px solid #fff;
  border-bottom: 2px solid #fff;
  border-left: 2px solid #fff;
  writing-mode: vertical-rl
}
/* ロゴ画像のスタイル */
.logo {
  width: 250px;
  object-fit: contain;
}

.menu-button {
  padding: 0;
  height: 70px;
  width: 70px;
}
.menu-text {
  font-size: 0.6rem;
  margin: 0;
}

nav ul{
  list-style: none;
  display: flex;
  justify-content: end;
}

nav ul li a{
  /* display: block; */
  text-decoration: none;
  color: #666;
  padding:10px;
  transition:all 0.3s;
}
/*　ハンバーガーメニューボタン　*/
.hamburger {
  position: fixed;
  z-index : 3;
  right : 20px;
  top   : 20px;
  width : 42px;
  height: 42px;
  cursor: pointer;
  text-align: center;
}
.hamburger span {
  position: absolute;
  width   : 30px;
  height  : 2px ;
  left    : 6px;
  background : #BBBBBB;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition   : 0.3s ease-in-out;
  transition        : 0.3s ease-in-out;
}
.hamburger span:nth-child(1) {
  top: 10px;
}
.hamburger span:nth-child(2) {
  top: 20px;
}
.hamburger span:nth-child(3) {
  top: 30px;
}

/* スマホメニューを開いてる時のボタン */
.hamburger.active{
  z-index:5;
}
.hamburger.active span:nth-child(1) {
  top : 16px;
  left: 6px;
  background :#fff;
  -webkit-transform: rotate(-45deg);
  -moz-transform   : rotate(-45deg);
  transform        : rotate(-45deg);
}

.hamburger.active span:nth-child(2),
.hamburger.active span:nth-child(3) {
  top: 16px;
  background :#fff;
  -webkit-transform: rotate(45deg);
  -moz-transform   : rotate(45deg);
  transform        : rotate(45deg);
}

/* メニュー背景　*/
.globalMenuSp{
  /*position:fixed;にし、z-indexの数値を小さくして最背面へ*/
  position:fixed;
  z-index: -1;
  opacity: 0;/*はじめは透過0*/
    /*ナビの位置と形状*/
  top:0;
  width:100%;
    height: 100vh;/*ナビの高さ*/
  background:#999;
    /*動き*/
  transition: all 0.3s;
}

/*アクティブクラスがついたら透過なしにして最前面へ*/
.globalMenuSp.panelactive{
  opacity: 0.8;
  z-index:4;
}

/*ナビゲーションの縦スクロール*/
.globalMenuSp.panelactive #sp-nav-list{
    /*ナビの数が増えた場合縦スクロール*/
    position: fixed;
    z-index:4; 
    width: 100%;
    height: 100vh;/*表示する高さ*/
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

/*ナビゲーション*/
.globalMenuSp ul {
    display: none;
    /*ナビゲーション天地中央揃え*/
    position: absolute;
    z-index: 999;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
}

.globalMenuSp.panelactive ul {
    display: block;
}

/*リストのレイアウト設定*/

.globalMenuSp li{
  list-style: none;
  text-align: center; 
}

.globalMenuSp li a{
    color: whitesmoke;
    text-decoration: none;
    padding:10px;
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: bold;
}

.pc {
  display: flex;
  justify-content: space-between;
}
.pc-area {
  display: flex;
}

.sp {
  display: none;
}
.footer-btn {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 4;
}
.footer-copyright{
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 0.2rem;
  color: #fff;
  text-align: center;
  background: #3F3B38;
  font-size: 0.8rem;
  font-weight: lighter;
  margin-bottom: 0;
  z-index: 4;
}
.image-container {
  position: relative;
}
.image-container img {
    height: 200px;
    width: 100%; /* 画像を親要素の幅いっぱいに表示 */
    display: block; /* 画像をブロック要素として配置 */
    object-fit:contain
}
.text-overlay {
  position: absolute;
  bottom: 0; /* 下側に配置 */
  left: 0; /* 左端に配置 */
  width: 100%; /* 幅いっぱいに表示 */
  background-color: rgba(255,255,255,0.8); /* 背景色（透明度を設定） */
  opacity: 0.8;
  box-sizing: border-box; /* パディングを含めたボックスモデル */
  color: #333;
  overflow: hidden; /* テキストのオーバーフローを隠す */
  white-space: nowrap; /* テキストを折り返さず、1行にする */
  text-overflow: ellipsis; /* テキストが表示領域を超えた場合に「...」で省略する */
  padding: 0px 5px;
}
.cast-blog-site {
  font-size: .8em;
  font-weight: bold;
  margin: 0;
}
.cast-blog-title {
  font-size: .8em;
  margin: 0;
}
.cast-blog-name {
  font-size: .8em;
  font-weight: bold;
  margin: 0;
}
.cast-blog-date {
  font-size: .6em;
  margin: 0;
}
.cast-video {
  width: 100%;
  height: 250px;
}
/* スマートフォンサイズ時のメディアクエリ */
@media (max-width: 768px) {
  .logo {
    width: 200px;
    object-fit: contain;
  }
  .side-menu {
    display: none;
  }
  .pc {
    display: none;
  }
  .pc-area {
    display: none;
  }
  .sp {
    /*display: block;*/
    display: flex;
  }
  .dis_flex{
  display: flex;
  justify-content: space-between;
  align-items: center;
  }
  .cast-video {
    width: 100%;
    height: 150px;
  }
}
@media (max-width: 320px){
    .logo {
    width: 150px;
    object-fit: contain;
  }

}
/*   20250411 footerデザイン_ミルミル木下   */
.footer_nav{
   background: #fdfdfd;
   padding: 20px 0;
}
.footer_nav .inner{
   padding-top:20px;
}
.footer_nav .inner .box{
   
}
.footer_nav .inner .box nav{
   border-bottom: 1px solid #cccccc;
   margin-bottom: 10px;
   padding-bottom: 10px;
}
.footer_nav .inner .box nav h3{
   margin: 0 0 10px;
   font-weight: bold;
}
.footer_nav .inner .box nav h3 a{
   font-size: 16px;
   color: #fbb03b;
   text-decoration: none;
}
.footer_nav .inner .box nav ul{
   display: block;
   justify-content: unset;
   padding: 0;
   margin: 0;
}
.footer_nav .inner .box nav ul li{
   display: inline-block;
   list-style: none;
   padding: 0 0 0 15px;
   margin: 0;
}
.footer_nav .inner .box nav ul li:after{
   content: "|";
   color: #aaaaaa;
   padding-left: 15px;
}
.footer_nav .inner .box nav ul li:last-child:after{
   display: none;
}
.footer_nav .inner .box nav ul li a{
   color: #333333;
   text-decoration: none;
   font-size: 14px;
   padding: 0;
}
/*---ロゴ　波乗りの画像関係　時期が過ぎれば消してkrn---*/
.logo_umi{
  display: flex;
  align-items: center; 
  justify-content: center; 
  position: relative;
  overflow: hidden;
  z-index: 10;
}
.logo_nami{
  position: absolute;
  bottom: -20px;
  width: 270%;
  max-width: none;
  z-index: 2;
}
.wave_img {
  display: inline-block;
  animation: wave-swing 2s infinite ease-in-out;
  transform-origin: 50% 100%; /* 下の中心を軸に */
  max-width:110px; 
  position: absolute; 
  left: -17px; 
  top: 10px;
  z-index: 1;
}
@media (max-width: 1024px) {
  .wave_img {
  display: inline-block;
  animation: wave-swing 3s infinite ease-in-out;
  transform-origin: 50% 100%; /* 下の中心を軸に */
  max-width:90px; 
  position: absolute; 
  left: -17px; 
  top: 12px;
  z-index: 1;
  }
}
@media (max-width: 768px) {
  .wave_img {
  display: inline-block;
  animation: wave-swing 3s infinite ease-in-out;
  transform-origin: 50% 100%; /* 下の中心を軸に */
  max-width:70px; 
  position: absolute; 
  left: -15px; 
  top: 20px;
  z-index: 1;
  }

}

@keyframes wave-swing {
  0%   { transform: rotate(0deg); }
  20%  { transform: rotate(8deg); }
  50%  { transform: rotate(-8deg); }
  80%  { transform: rotate(8deg); }
  100% { transform: rotate(0deg); }
}
/*-----求人ページのh1タイトル　2025_7_4 krn----*/
.recruit_title{
  font-size:16px;
  text-align: center;
  color: #292727;
  padding: 10px 0 0 0;
}
@media (max-width: 768px) {
  .recruit_title{
    font-size:9px;
  }
}