@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/* ① アニメーション前の初期状態（非表示） */
.anim-box.popup {
  opacity: 0;
}

/* ② is-animated クラスが付いたらアニメーション実行 */
.anim-box.popup.is-animated {
  animation: popup-fadein 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* ③ フェードイン + ポップアップ + スケール */
@keyframes popup-fadein {
  0% {
    transform: translateY(40px) scale(0.85);
    opacity: 0;          /* ← 完全に透明からスタート */
  }
  90% {
    opacity: 1;          /* ← 90% 時点でフェードイン完了 */
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

/* 背景を完全に透過する */

@media screen and (max-width: 1023px){
 .header-container {
	 display: none;
}
}

/************************************
** ■フッターメニューカスタマイズ
************************************/

.footer {
  margin-top: 40px; /*フッターとコンテンツの間に余白追加*/
  margin-bottom: 40px; /*フッターとコンテンツの間に余白追加*/
  background: #ffffff; /*フッター背景色*/
}
.footer-bottom {
  margin-top: 14px; /*フッター内上部の余白を詰める*/
}
.footer-bottom-logo { /*ロゴの位置調整*/
  float: none;
  bottom: auto;
  position: static;
  margin-bottom: 10px;
}
.footer-bottom-content { /*メニュー＆クレジットの位置調整*/
  float: none;
  text-align: center;
}
.navi-footer-in > .menu-footer { /*メニューの位置調整*/
  justify-content: center;
  margin-bottom: 1em;
}
.navi-footer-in a {
  color: #111b75; /*メニューの文字色*/
}
.navi-footer-in a:hover { /*メニューのマウスホバー時の指定*/
  color: #aab3b9; /*文字色を通常時と同じに*/
  background: none; /*背景色をなしに*/
  text-decoration: underline; /*アンダーラインを追加*/
}

.copyright {
  color: #111b75; /*クレジットの文字色*/
}

.navi-footer-in > .menu-footer li.menu-item {
    border: none; /*メニューのボーダーを消す*/
  }

@media screen and (max-width: 834px) {
  .footer {
  margin-top: -40px; /*フッターとコンテンツの間に余白追加*/
  margin-bottom: 80px; /*フッターとコンテンツの間に余白追加*/
  background: #ffffff; /*フッター背景色*/
}
  .navi-footer-in > .menu-footer li.menu-item { /*モバイルでメニューを1カラムにする*/
    width: 100%;
    display: block;
    flex: auto;
    padding: 0.3em 0;
  }
}

/************************************
**　　グローバルナビメニュー 
************************************/

/* メニュー項目全体の左右余白を調整 */
.menu-item {
    padding-left: 0px;
    padding-right: 0px;
}

.navi-in > ul li {
  width: auto;
}

/*マウスオーバーでアンダーライン*/
#navi .navi-in a:after{
position: absolute;/*線の位置を絶対配置に*/
content: "";/*文字はなし*/
left: 10px;/*線の位置*/
bottom: 10px;/*線の位置*/
height: 3px;/*線の高さ*/
width: 84%;/*線の幅*/
background: #a28c4f;/*線の色*/
transform: scale(0,1);/*マウスオーバーの前は線を消す*/
transition: 0.3s;/*線が0→100%になるまでの秒数*/
}


/*スマホメニューを横スクロール*/
#header-container .navi-in > ul li {
   height: auto;
   font-weight: 600;
   line-height:1.3;
}
#header-container #navi a{
   color:#111b75; /* 文字色 */
   padding:0.8em 0.5em;
}
#header-container #navi a:hover{
   color:#00a59f; /* マウスホバー時の文字色 */
}
#header-container .navi-in > ul > .menu-item-has-children > a::after {
   top: 0.8em;
   font-size: 1.2em;
   font-weight: 600;
}
#header-container .sub-menu .caption-wrap{
   padding-left:1em;
}
.navi-in > ul .menu-item-has-description > a > .caption-wrap{
   height:auto;
}





/* ヘッダーロゴの大きさを変える */
.header-container-in.hlt-top-menu .logo-header {
  max-height: 100px; /* ヘッダーの高さの指定 */
}

.header-container-in.hlt-top-menu .logo-header img {
    max-height: 70px;
    padding: 10px;
}

#header {
  flex-shrink: 0; /* 要素の縮小率を0にする */
}

.floating-banner{ 
position: fixed; /* バナーを固定位置に配置 */
right: 20px; /* 右端から20ピクセルの位置に設置 */
bottom: 20px; /* 下端から20ピクセルの位置に設置 */
z-index: 9999; /* 他の要素より前面に表示 */
background-color: transparent; /* 背景色を透明に設定 */
color: #fff; /* テキストカラーを白に設定 */
padding: 10px 20px; /* 内側の余白を設定 */
font-size: 16px; /* フォントサイズを16ピクセルに設定 */
border-radius: 5px; /* 角を丸くする */
text-decoration: none; /* 下線をなくす */ }
.floating-banner:hover
{ background-color: transparent; /* マウスオーバー時の背景色を透明に設定 */
text-decoration: underline; /* マウスオーバー時に下線を表示 */ }


html {
  scroll-behavior: smooth;
}

body {
  scroll-behavior: smooth;
}


@media screen and (min-width: 769px){
 .floating-banner-sp {
	 display: none !important;
}
}

@media screen and (max-width: 834px) {
  main.main,
  div.sidebar {
    padding: 0px 16px;
    margin: 12px 0;
    border-width: 0;
  }
	
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}

/*投稿*/
.wp-block-latest-posts__list { margin: 0; padding: 0; list-style: none; }
.wp-block-latest-posts__list li { margin-bottom: 10px;  padding-bottom: 5px; display: flex; align-items: center; border-bottom: 1px solid #ddd; }
.wp-block-latest-posts__post-date { margin-right: 10px; order: 1; white-space: nowrap; width: 9.5rem; }
.wp-block-latest-posts__post-title { order: 2; white-space: nowrap; flex-grow: 0; }
.wp-block-latest-posts__post-title {
                font-size: 1rem !important;
                line-height: 1.2 !important;
                font-weight: normal !important;
            }

.wp-block-button__link {
  color: #ffffff;
  background-color: transparent;
}



.cstm-blk-fullwide-inner {
    width: 100vw;
    margin: 0 calc(50% - 50vw);
	padding: 0 calc(50vw - 50%);
}

.inner {
    width: 100vw;
    margin: 0 calc(50% - 50vw);
	padding: 0
}

.cstm-blk-fullwide {
    width: 100vw;
    margin: 0 calc(50% - 50vw);
}

.iframe-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}

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

.icon {margin-bottom: 0em;
}


body {
   overflow-x: hidden;
}

.icon {
  margin-top: 0;
  margin-bottom: 0;
}

#main .entry-content > .wp-block-image {
  margin-bottom: 0;
}






/*
* 新着記事一覧ショートコード用
*/
.news-list .news-list-inner {
 padding: 20px 5px;
 border: 2px solid #f5f5f5;
}
.archive .news-list .news-list-inner {
 background: #fff;
 padding: 20px;
}
.news-list ul {
 list-style: none;
 margin: 0 0 20px;
}
.news-list li {
 padding: 10px;
 border-bottom: 1px solid #ddd;
}
.news-list a {
 color: #333;
 text-decoration-line: none;
}
.news-list a:hover {
 opacity: 0.6;
}
.news-list a.wp-block-button__link {
 color: #fff;
}
.news-list a.wp-block-button__link:hover {
 color: #F87474;
}
.news-list .news_date {
 margin: 0;
 font-size: 14px;
}
.news-list .news_title {
 margin: 0;
 font-size: 18px;
 line-height: 30px;
 padding-top: 10px;
 padding-bottom: 10px;
}

ul.blog-list { display:flex; flex-wrap:wrap;}
  ul.blog-list li { width:30%; text-align:center;}


 /* その他のページスタイル */ 

.floating-banner-sp
{ position: fixed; /* バナーを固定位置に配置 */
right: 0px; /* 右端から20ピクセルの位置に設置 */
bottom: 0px; /* 下端から20ピクセルの位置に設置 */
z-index: 9999; /* 他の要素より前面に表示 */
background-color: transparent; /* 背景色を透明に設定 */
color: #fff; /* テキストカラーを白に設定 */
padding: 0px 0px; /* 内側の余白を設定 */
font-size: 16px; /* フォントサイズを16ピクセルに設定 */
border-radius: 5px; /* 角を丸くする */
text-decoration: none; /* 下線をなくす */ }
.floating-banner:hover
{ background-color: transparent; /* マウスオーバー時の背景色を透明に設定 */
text-decoration: underline; /* マウスオーバー時に下線を表示 */ }


/************************************
** 横ずれ防止
************************************/
@media screen and (max-width : 767px){
html,
body {
overflow-x: hidden!important;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
}
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/


/*834px以下*/



/*768px以下*/
@media screen and (max-width: 768px){
  /*必要ならばここにコードを書く*/
.headingfontsize {
    font-size: 28px !important;
}

.slider1 {
	display: none !important;
    }
}

@media screen and (max-width: 768px){
 .floating-banner-sp {
  height: 100%;
bottom: 0px; /* 下端から20ピクセルの位置に設置 */
padding: 0px;
padding: 0px;
background: url(画像URL) center / cover;
margin: 0 calc(50% - 50vw);
width: 100vw;
}
 .floating-banner {
	 display: none;
}
}

//CSS
//HTML上でふわっと表示させたい要素にclass="fade-in"を付与
.fade-in {
	opacity: 0;
	transform: translateY(30px);
	transition-property: transform, opacity;
	transition-duration: 1.5s;
	transition-delay: 0s;
}

.fade-in.is-active {
	opacity: 1;
	transform: translateY(0);
}
	
html { scroll-behavior: smooth;}
}
}



html {
  scroll-behavior: smooth;
}

.scroll-indicator {
  position: absolute;
  left: 50%;
  bottom: 36px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 74px;
  height: 74px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  box-shadow:
    0 8px 24px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.12);
  text-decoration: none;
  color: #fff;
  animation: floatY 1.6s ease-in-out infinite;
  transition: transform .25s ease, background .25s ease, border-color .25s ease;
  cursor: pointer;
  z-index: 10;
}

.scroll-indicator:hover {
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.32);
}

.scroll-indicator:active {
  transform: translateX(-50%) scale(.97);
}

.scroll-indicator::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.08);
}

.arrow {
  width: 18px;
  height: 18px;
  border-right: 3px solid currentColor;
  border-bottom: 3px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  animation: arrowPulse 1.6s ease-in-out infinite;
}

.indicator-label {
  position: absolute;
  top: -28px;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
  white-space: nowrap;
}

@keyframes floatY {
  0%, 100% {
    transform: translateX(-50%) translateY(0);
  }
  50% {
    transform: translateX(-50%) translateY(12px);
  }
}

@keyframes arrowPulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: .55;
  }
}
	
.slideinLeft {
  animation: slideinLeft 3s forwards;
}

@keyframes slideinLeft {
  0% {
    transform: translateX(-50px);
  }
  100% {
    transform: translateX(0);
  }
}
	
.entry-content a {
  text-decoration: none !important;
}

	
/* 職種 */
/* =============================
   スクロールアニメーション
   ============================= */

.recruit-card-item {
  opacity: 0;
  transform: translateY(30px) scale(0.95);
  transition:
    opacity 0.6s ease,
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* スクロールで表示クラスが付いたら発火 */
.recruit-card-item.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ホバー時のポップアップ演出（おまけ） */
.recruit-card {
  display: block;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
  border-radius: 12px;
}

.recruit-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
}