@charset "utf-8";

/* リクルートトップのみSafariで読み込み負荷との干渉でiPhoneの表示が遅れるため個別でoverflowを指定 */
body.page-recruit .body_inner {
    overflow: visible!important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
CSSのみでスムーズスクロールを実現する2025-08-21mk
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
html {
    /* scroll-behavior: smooth; */
    /* scroll-padding-top: 100px; */
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
汎用クラス
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* 縦文字 */
.cmn_tate {
	-ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
}

/* 文字の切り抜き（グラデーション） */
.cmn_clip {
	-webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* 回る背景（疑似要素で指定） */
.cmn_ring::before {
    animation: rotate-anime 20s linear infinite;
}
@keyframes rotate-anime {
  0%  {transform: rotate(0);}
  100%  {transform: rotate(360deg);}
}

/* テキストの境界線 */
.cmn_stroke {
	-webkit-text-stroke: #000 clamp(2px, 0.2vw + -1.3px, 4px);
}
.cmn_stroke_thin {
	-webkit-text-stroke: #000 2px;
}

/* 文字に背景色を敷く */
.cmn_txt_bg mark {
   box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
ヘッダー
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.sticky-enabled .main-navigation.is_stuck {
	box-shadow: none;
	pointer-events: none;
}
.main-navigation .menu-bar-items,
#mobile-header .my_hamburger {
	pointer-events: all;
}

/* ロゴにもエフェクトが効いてしまうため下層site-naviは無効 */
body.page-recruit .header-wrap,
body:not(.page-recruit) .header-wrap:has(#sticky-placeholder) {
    mix-blend-mode: difference;
}

/* ハンバーガーメニューと下層ロゴの表示アニメーションをつける */
/*.main-navigation .menu-bar-items,
body:not(.page-recruit) .navigation-branding,
#mobile-header .menu-toggle,
#mobile-header .site-logo {
	opacity: 0;
	transform: translateY(-10px);
	animation: fadeInUp 0.3s ease-out 0.3s forwards;
}
@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}*/

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
TOP　＞　PROMO
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#home_promo .cmn_tate {
	-webkit-text-stroke: 4px #000;
  	text-stroke: 4px #000;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
TOP　＞　CONCEPT
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#home_intro .txt_slider {
    animation: bg-slider-concept 50s linear infinite;
}

/* スライドアニメーション */
@keyframes bg-slider-concept {
    from {background-position: 0 0;}
    to {background-position: -1600px 0;}
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
TOP　＞　WORKS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#home_works h3.cmn_ttl {
	-webkit-text-stroke: 4px #cdd0c3;
	text-stroke: 4px #cdd0c3;
	color: transparent;/* 管理画面内でテキストが消えるため */
}

#home_wakuwaku .txt_slider {
    animation: bg-slider-works 20s linear infinite;
}

/* スライドアニメーション */
@keyframes bg-slider-works {
    from {background-position: 0 0;}
    to {background-position: -1940px 0;}
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
TOP　＞　INTERVIEW
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#home_interview .looper {
	counter-reset: items;
}

#home_interview .looper figure::before {
	counter-increment: items;
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;
	-webkit-text-stroke: 3px #000;
 }

#home_interview .looper figure::after {
	-webkit-background-clip: text;
	-webkit-text-stroke: 3px #000;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
下層　＞　スティッキーのための記述
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* トップにも記述すると横がはみ出すため下層のみ */
body:not(.page-recruit) .body_inner {
	overflow-x: visible !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
コンタクトエリア
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#contact_area .txt_slider {
    animation: bg-slider-contact 5s linear infinite;
}

/* スライドアニメーション */
@keyframes bg-slider-contact {
    from {background-position: 0 0;}
    to {background-position: -347px 0;}
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
コンタクトフォーム（WPFroms）
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.wpforms-container-full .wpforms-form .wpforms-pagebreak-left .wpforms-page-next,
.wpforms-container-full .wpforms-form .wpforms-pagebreak-left .wpforms-page-next:hover {
    background: #000!important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
ハンバーガーメニューのカスタマイズ(2023-03-13mk)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#site-navigation .pc .my_hamburger {
	position: absolute;
	right: 0;
	top: 1vw;
}

#sticky-navigation .openbtn {
	background: #fff;
}

.pc .my_hamburger {
	width: clamp(120px, 11.1vw + -13.3px, 200px);
    height: clamp(120px, 11.1vw + -13.3px, 200px);
	margin-top: 20px;
	margin-right: 15px;
}

.openbtn {
	background: #ff417e;
	cursor: pointer;
    width: clamp(120px, 11.1vw + -13.3px, 200px);
    height: clamp(120px, 11.1vw + -13.3px, 200px);
	border-radius: 50%;
	transition: background .2s;
}

/*ボタン内側*/
.openbtn span {
    display: inline-block;
    transition: all .4s;/*アニメーションの設定*/
    position: absolute;
    left: 3vw;
    height: 6px;
	background: #000;
  	width: 35%;
}

.openbtn span:nth-of-type(1) {
	top: 4vw;
}

.openbtn span:nth-of-type(2) {
	top: 5.4vw;
}

.openbtn span:nth-of-type(3) {
	top: 6.7vw;
}

.openbtn span:nth-of-type(3)::after {
	content:"Menu";/*3つ目の要素のafterにMenu表示を指定*/
	position: absolute;
	top: 5px;
	left: 0.3vw;
	color: #000;
	font-size: clamp(22px, 0.8vw + 12px, 28px);
	text-transform: uppercase;
	font-family: Anton, sans-serif;
}

/*activeクラスが付与されると線が回転して×になり、Menu⇒Closeに変更*/

.openbtn.active span:nth-of-type(1) {
    top: 3.7vw;
    left: 3.7vw;
    transform: translateY(6px) rotate(-45deg);
    width: 30%;
}

.openbtn.active span:nth-of-type(2) {
	opacity: 0;
}

.openbtn.active span:nth-of-type(3){
    top: 4.6vw;
    left: 3.6vw;
    transform: translateY(-6px) rotate(45deg);
    width: 30%;
}

.openbtn.active span:nth-of-type(3)::after {
	content:"Close";
	transform: translateY(0) rotate(-45deg);
	top: 0.8vw;
	left: 1.6vw;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
ハンバーガーメニュー内（全画面メニュー）
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* メニュー内のみに背景のノイズ画像を入れたい（ヘッダー部分にも出てきてしまう） */
.main-navigation:not(.is-open) {
    background-image: none;
}

/* デフォルトの線 */
#generate-slideout-menu .main-nav > ul > li.menu-item,
#generate-slideout-menu .main-nav > ul > li.menu-item:last-child {
	border: none;
}

#generate-slideout-menu .main-nav {
	margin-bottom: 1vw;
}

#generate-slideout-menu .main-nav > ul {
	align-items: flex-start;
}
#generate-slideout-menu .main-nav > ul > li.menu-item {
	width: 50%;
}

#generate-slideout-menu .main-nav > ul > li.menu-item a {
    /*text-align: center;*/
	padding: 0 0 0 2vw;
	line-height: 1.4em;
	display: flex;
    flex-direction: column;
	color: #6a6a6a;
	letter-spacing: 0.1em;
	font-size: clamp(13px, 0.5vw + 6.3px, 17px);
	transition: .3s;
}

#generate-slideout-menu .main-nav > ul > li.menu-item a::before {
    content: attr(data-text);
    text-transform: uppercase;
	font-size: clamp(47px, 1.8vw + 25.3px, 60px);
	line-height: 1;
	font-family: Anton, sans-serif;
	font-weight: normal;
	color: #fff;
	transition: .3s;
}

#generate-slideout-menu .main-nav > ul > li.menu-item a:hover,
#generate-slideout-menu .main-nav > ul > li.menu-item a:hover::before {
	color: #ff7bca;
}

#generate-slideout-menu .main-nav > ul > li.menu-item:not(:has(.sub-menu)) {
	margin-bottom: 2.6vw!important;
}

/* 個人情報保護方針 */
#generate-slideout-menu.is-open .other_link2 a {
    font-size: 14px;
    color: #6a6a6a;
    font-weight: bold;
}

/* 開閉時のメニューのちらつき防止 */
#generate-slideout-menu :is(.main-nav,.other_link2,#after_slideout_navi) {
	transition: transform 0.5s;
	transform: translateY(-20px);
	opacity: 0;
	visibility: hidden;
}
#generate-slideout-menu.is-open :is(.main-nav,.other_link2,#after_slideout_navi) {
	transform: translateY(0);
	opacity: 1;
	visibility: visible;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
フッター
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#footer-widgets ul.menu > li > a {
    display: flex;
    flex-direction: column;
	color: #6a6a6a;
	letter-spacing: 0.1em;
	transition: .3s;
}

#footer-widgets ul.menu > li > a::before {
    content: attr(data-text);
	text-transform: uppercase;
	color: #fff;
	font-size: 60px;
	line-height: 1;
	font-family: Anton, sans-serif;
	font-weight: normal;
	transition: .3s;
}

#footer-widgets ul.menu > li > a:hover,
#footer-widgets ul.menu > li > a:hover::before {
	color: #ff7bca;
}

/* コピーライト */
.site-footer .copyright-bar {
    font-family: Anton, sans-serif;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
コーポレート
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* ヘッダー（PCのみ） */
body.page-corporate.pc .gb-site-header:not(.gb-is-sticky) a {
	color: #fff;
}

/* 白黒ロゴの切り替え */
body:not(.page-corporate) .gb-site-header a:has(.corp_logo_w),/* 下層:FV時の白ロゴを削除 */
body.page-corporate .gb-site-header:has(.gb-navigation--open) a:has(.corp_logo_w),/* TOP:FV時・メニューOPEN時の白ロゴを削除 */
body.page-corporate .gb-site-header.gb-is-sticky a:has(.corp_logo_w),/* TOP:ステッキー時の白ロゴを削除 */
body.page-corporate .gb-site-header:not(.gb-is-sticky):not(:has(.gb-navigation--open)) a:has(.corp_logo_b)/* TOP:FV時・ナビ閉じ時の黒ロゴを削除 */ {
	display: none;
}
/* FV時メニューを開いた時はヘッダー背景を白にする */
body.page-corporate .gb-site-header:not(.gb-is-sticky):has(.gb-navigation--open) {
	background: #fff;
}

/* コーポレートトップの場合はページプロモを非表示 */
body.page-corporate #page_promo {
    display: none;
}