@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
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/*
 * カラーコード
 * 天色：　             #2ca9e1
 * 黄色:  　　　　　　  #ffd900
 * 
*/


/*トップページのタイトル消し*/
#post-136 > header > h1,#post-111 > header > h1,#post-115 > header > h1,#post-1147 > header > h1,#post-1149 > header > h1,#post-1145 > header > h1,#post-117 > header > h1,#post-1152 > header > h1,#post-1229 > header > h1,#post-1231 > header > h1,#post-1233 > header > h1,#post-119 > header > h1,#post-121 > header > h1,#post-123 > header > h1{
	display: none;
}

/*投稿の余計な奴消し*/
#post-1911 > header > h1,#post-1911 > header > div.eye-catch-wrap > figure > img,#post-1911 > header > div.eye-catch-wrap > figure > span,#post-150 > header > h1,#post-150 > header > div.eye-catch-wrap > figure > img,#post-150 > header > div.eye-catch-wrap > figure > span,#post-148 > header > h1,#post-148 > header > div.eye-catch-wrap > figure > img,#post-148 > header > div.eye-catch-wrap > figure > span,#post-141 > header > h1,#post-141 > header > div.eye-catch-wrap > figure > img,#post-141 > header > div.eye-catch-wrap > figure > span{
	display:none;
}

/*余計な余白消し*/
#content,#post-136 > div,#post-136 > header > h1{
	margin: 0;
}
#main{
	padding: 0;
}

/*お知らせのモバイル用、非表示*/
#post-136 > div > div:nth-child(2) > div > div,#post-136 > div > div:nth-child(2) > span,#post-136 > div > div:nth-child(2){
	display: none;
}

/*タイトル背景半透過*/
#post-119 > div > div:nth-child(5) > h2{
background-color: rgba(40, 39, 39, 0.5);
}

/*タイトル背景透過*/
	#company-profile,#post-111 > div > div.wp-block-cover.alignfull.is-light > div > div > h2,#post-115 > div > div.wp-block-cover.alignfull > div > div > h2,#post-117 > div > div.wp-block-cover.alignfull.is-light > div > div > h2,#post-119 > div > div.wp-block-cover.alignfull.is-light > div > div > h2,#post-121 > div > div.wp-block-cover.alignfull.is-light > div > div > h2,#post-123 > div > div.wp-block-group.alignfull.is-layout-constrained.wp-block-group-is-layout-constrained > div.wp-block-group.is-layout-constrained.wp-block-group-is-layout-constrained > div.wp-block-group.has-black-color.has-text-color.has-link-color.wp-elements-de0534da2528254ffc079d80f5139007.is-layout-constrained.wp-block-group-is-layout-constrained > div.wp-block-group.vk-heading-subtext-border.is-layout-constrained.wp-block-group-is-layout-constrained > h2,#post-123 > div > div.wp-block-group.alignfull.is-layout-constrained.wp-block-group-is-layout-constrained > div.wp-block-group.is-layout-constrained.wp-block-group-is-layout-constrained > div.wp-block-group.has-black-color.has-text-color.has-link-color.wp-elements-d173d144356e5ae52486ed5204ea4392.is-layout-constrained.wp-block-group-is-layout-constrained > div.wp-block-group.vk-heading-subtext-border.is-layout-constrained.wp-block-group-is-layout-constrained > h2{
	background-color: rgba(40, 39, 39, 0);
}

/*採用動画の設定*/
.movie{
    position: relative;
    width: 100%;
    margin:0 auto;
}
.movie video{
    width: 100%;
}
.movie .play-btn{
    display: block;
    width: 10%;
    position: absolute;
      top: 50%;
      left: 50%;
      transform: translateY(-50%) translateX(-50%);
      -webkit- transform: translateY(-50%) translateX(-50%);
}
.movie .play-btn.playActive{
	display:none;
}


/****************************************************************************************
 ********************** グローバルナビゲーション****************************************
***************************************************************************************/

/*エントリー*/
#menu-item-1161 > a > div{
	background-color: #e60033;
	color: #fff;
}

/*トップページのホバー*/
#menu-item-1167 > a > div {
  background: 
      linear-gradient(currentColor 0 0) 
      var(--p, 0) 100% /var(--d, 0) 3px 
      no-repeat;
  transition: 0.3s, background-position 0s 0.3s;
}
#menu-item-1167 > a > div:hover {
  --d: 100%;
  --p: 100%;
}

/*会社を知るのホバー*/
#menu-item-1166 > a > div {
  background: 
      linear-gradient(currentColor 0 0) 
      var(--p, 0) 100% /var(--d, 0) 3px 
      no-repeat;
  transition: 0.3s, background-position 0s 0.3s;
}
#menu-item-1166 > a > div:hover {
  --d: 100%;
  --p: 100%;
}

/*仕事を知るのホバー*/
#menu-item-1165 > a > div {
  background: 
      linear-gradient(currentColor 0 0) 
      var(--p, 0) 100% /var(--d, 0) 3px 
      no-repeat;
  transition: 0.3s, background-position 0s 0.3s;
}
#menu-item-1165 > a > div:hover {
  --d: 100%;
  --p: 100%;
}

/*人を知るのホバー*/
#menu-item-1164 > a > div {
  background: 
      linear-gradient(currentColor 0 0) 
      var(--p, 0) 100% /var(--d, 0) 3px 
      no-repeat;
  transition: 0.3s, background-position 0s 0.3s;
}
#menu-item-1164 > a > div:hover {
  --d: 100%;
  --p: 100%;
}

/*環境を知るのホバー*/
#menu-item-1163 > a > div {
  background: 
      linear-gradient(currentColor 0 0) 
      var(--p, 0) 100% /var(--d, 0) 3px 
      no-repeat;
  transition: 0.3s, background-position 0s 0.3s;
}
#menu-item-1163 > a > div:hover {
  --d: 100%;
  --p: 100%;
}

/*FAQのホバー*/
#menu-item-1162 > a > div {
  background: 
      linear-gradient(currentColor 0 0) 
      var(--p, 0) 100% /var(--d, 0) 3px 
      no-repeat;
  transition: 0.3s, background-position 0s 0.3s;
}
#menu-item-1162 > a > div:hover {
  --d: 100%;
  --p: 100%;
}

/*現在地の背景色*/
.current-menu-item {
	background: #2ca9e1; // 背景色
}
/*現在地の文字色*/
.current-menu-item .item-label {
	color: #fff; // 文字色
}
/*プルダウンメニュー文字色*/
.sub-menu .item-label{
	color: #000;
}

/****************************************************************************************
 ********************** ヒーローエリア****************************************
***************************************************************************************/
html,
input,
textarea,
select,
button {
  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", Meiryo, sans-serif;
}

html {
  background: #fff;
  color: #333;
  font-size: 16px;
  line-height: 1.8;
  word-break: break-word;
}

body {
  background: #fff;
  margin: 0;
}

*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

img {
  border: 0;
  margin: 0;
  vertical-align: top;
  max-width: 100%;
}

p {
  margin: 0;
  padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 14px;
  font-weight: normal;
  margin: 0;
  padding: 0;
}

#wrapper,
.outer-block {
  min-width: 862px;
}

.inner-block {
  margin: 0 auto;
  padding: 0;
  position: relative;
  width: 862px;
}

/*------------------------------------------------------------------------------
  visual
------------------------------------------------------------------------------*/

.visual {
  background: url() no-repeat right top;
  margin: auto;
  position: relative;
  width: 862px;
  height: 460px;
}

.visual .mask {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.visual .mask.normal {
  color: #e60033;
  /*color: #00cce1;*/
  -webkit-clip-path: polygon(0 0, 262px 0, 262px 460px, 0 460px);
  clip-path: polygon(0 0, 262px 0, 262px 460px, 0 460px);
}

.visual .mask.burn {
  color: #004156;
  -webkit-clip-path: polygon(262px 0, 862px 0, 862px 460px, 262px 460px);
  clip-path: polygon(262px 0, 862px 0, 862px 460px, 262px 460px);
  mix-blend-mode: color-burn;
}

.visual .txt {
  font-size: 0;
  line-height: 1;
  position: absolute;
  top: 85px;
  left: 40px;
}

.visual .line {
  display: block;
  font-family: "Josefin Sans";
  font-size: 80px;
  font-weight: bold;
}

.visual .line + .line {
  margin-top: 15px;
}

.visual .line,
.visual .letter {
  opacity: 0;
}

.visual .letter {
  display: inline-block;
  padding-top: 5px;
}

.visual .large {
  font-size: 100px;
}

.visual.is-visible .line {
  opacity: 1;
}

.visual.is-visible .letter {
  animation: slideIn .8s cubic-bezier(0,1.2,.13,1.5) forwards;
}

@keyframes slideIn {
  0% {
    opacity: 0;
    transform: translate3d(-100px,0,0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0,0,0);
  }
}






























/************************************************************************************************************
** レスポンシブデザイン用のメディアクエリ
************************************************************************************************************/


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

	/*PCグローバルナビ、非表示(cocoon設定でハンバーガーメニューが表示されるため)*/	
	#navi{
		display: none;
	}


	
}


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

  /*お知らせのモバイル用、表示*/
#post-136 > div > div:nth-child(3) > div,#post-136 > div > div:nth-child(3) > div,#post-136 > div > div:nth-child(3) > span,#post-136 > div > div:nth-child(3){
	display: none;
}
#post-136 > div > div:nth-child(2) > div > div,#post-136 > div > div:nth-child(2) > span,#post-136 > div > div:nth-child(2){
	    display: block;
}

	
.visual {
  background: url() no-repeat right top;
  margin: auto;
  position: relative;
  width: 862px;
  height: 460px;
}

.visual .mask {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.visual .mask.normal {
  color: #e60033;
  /*color: #00cce1;*/
  -webkit-clip-path: polygon(0 0, 262px 0, 262px 460px, 0 460px);
  clip-path: polygon(0 0, 262px 0, 262px 460px, 0 460px);
}

.visual .mask.burn {
  color: #004156;
  -webkit-clip-path: polygon(262px 0, 862px 0, 862px 460px, 262px 460px);
  clip-path: polygon(262px 0, 862px 0, 862px 460px, 262px 460px);
  mix-blend-mode: color-burn;
}

.visual .txt {
  font-size: 0;
  line-height: 1;
  position: absolute;
  top: 145px;
  left: 50px;
}

.visual .line {
  display: block;
  font-family: "Josefin Sans";
  font-size: 55px;
  font-weight: bold;
}

.visual .line + .line {
  margin-top: 7px;
}

.visual .line,
.visual .letter {
  opacity: 0;
}

.visual .letter {
  display: inline-block;
  padding-top: 2.5px;
}

.visual .large {
  font-size: 75px;
}

.visual.is-visible .line {
  opacity: 1;
}

.visual.is-visible .letter {
  animation: slideIn .8s cubic-bezier(0,1.2,.13,1.5) forwards;
}

/*採用動画下の段落文字サイズ、代表者メッセージと社員インタビューボタンと文字サイズ*/
#post-136 > div > div.wp-block-vk-blocks-outer.vkb-outer-8a9bf6ad-df21-4af8-9a11-6da05e430254.vk_outer.vk_outer-width-full.alignfull.vk_outer-paddingLR-none.vk_outer-paddingVertical-none.vk_outer-bgPosition-fixed.vk_custom_css_14 > div > div.vk_outer_container.is-layout-flow.wp-block-vk-blocks-outer-is-layout-flow > div > div > div > div.wp-block-group.is-layout-constrained.wp-block-group-is-layout-constrained > div > div.wp-block-columns.is-not-stacked-on-mobile.is-layout-flex.wp-container-core-columns-is-layout-1259a57f.wp-block-columns-is-layout-flex > div:nth-child(1) > p > strong > span,#post-136 > div > div.wp-block-vk-blocks-outer.vkb-outer-43695280-4682-4181-9ceb-b27907f1be31.vk_outer.vk_outer-width-full.alignfull.vk_outer-paddingLR-none.vk_outer-paddingVertical-none.vk_outer-bgPosition-fixed.vk_custom_css_14 > div > div.vk_outer_container.is-layout-flow.wp-block-vk-blocks-outer-is-layout-flow > div > div > div > div.wp-block-group.is-layout-constrained.wp-block-group-is-layout-constrained > div > div.wp-block-columns.is-not-stacked-on-mobile.is-layout-flex.wp-container-core-columns-is-layout-1259a57f.wp-block-columns-is-layout-flex > div:nth-child(1) > p > strong > span,#post-136 > div > div.wp-block-vk-blocks-outer.vkb-outer-43695280-4682-4181-9ceb-b27907f1be31.vk_outer.vk_outer-width-full.alignfull.vk_outer-paddingLR-none.vk_outer-paddingVertical-none.vk_outer-bgPosition-fixed.vk_custom_css_14 > div > div.vk_outer_container.is-layout-flow.wp-block-vk-blocks-outer-is-layout-flow > div > div > div > div.wp-block-group.is-layout-constrained.wp-block-group-is-layout-constrained > div > div.wp-block-columns.is-not-stacked-on-mobile.is-layout-flex.wp-container-core-columns-is-layout-1259a57f.wp-block-columns-is-layout-flex > div:nth-child(2) > p > strong > span,#post-136 > div > div.wp-block-vk-blocks-outer.vkb-outer-43695280-4682-4181-9ceb-b27907f1be31.vk_outer.vk_outer-width-full.alignfull.vk_outer-paddingLR-none.vk_outer-paddingVertical-none.vk_outer-bgPosition-fixed.vk_custom_css_14 > div > div.vk_outer_container.is-layout-flow.wp-block-vk-blocks-outer-is-layout-flow > div > div > div > div.wp-block-group.is-layout-constrained.wp-block-group-is-layout-constrained > div > div.wp-block-columns.is-not-stacked-on-mobile.is-layout-flex.wp-container-core-columns-is-layout-1259a57f.wp-block-columns-is-layout-flex > div:nth-child(1) > div.wp-block-vk-blocks-button.vk_button.vk_button-color-custom.vk_button-4ee41e3d-ff95-4943-944a-31dbdfa66d9f.vk_button-width-mobile-100.vk_button-width-tablet-100.is-style-shine.vk_custom_css_10 > a > div > span,#post-136 > div > div.wp-block-vk-blocks-outer.vkb-outer-43695280-4682-4181-9ceb-b27907f1be31.vk_outer.vk_outer-width-full.alignfull.vk_outer-paddingLR-none.vk_outer-paddingVertical-none.vk_outer-bgPosition-fixed.vk_custom_css_14 > div > div.vk_outer_container.is-layout-flow.wp-block-vk-blocks-outer-is-layout-flow > div > div > div > div.wp-block-group.is-layout-constrained.wp-block-group-is-layout-constrained > div > div.wp-block-columns.is-not-stacked-on-mobile.is-layout-flex.wp-container-core-columns-is-layout-1259a57f.wp-block-columns-is-layout-flex > div:nth-child(2) > div.wp-block-vk-blocks-button.vk_button.vk_button-color-custom.vk_button-width-mobile-100.vk_button-width-tablet-50.is-style-shine.vk_custom_css_13 > a > div > span{
	font-size: 14px;
	}



}



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

.visual {
  background: url() no-repeat right top;
  margin: auto;
  position: relative;
  width: 862px;
  height: 460px;
}

.visual .mask {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.visual .mask.normal {
  color: #e60033;
  /*color: #00cce1;*/
  -webkit-clip-path: polygon(0 0, 262px 0, 262px 460px, 0 460px);
  clip-path: polygon(0 0, 262px 0, 262px 460px, 0 460px);
}

.visual .mask.burn {
  color: #004156;
  -webkit-clip-path: polygon(262px 0, 862px 0, 862px 460px, 262px 460px);
  clip-path: polygon(262px 0, 862px 0, 862px 460px, 262px 460px);
  mix-blend-mode: color-burn;
}

.visual .txt {
  font-size: 0;
  line-height: 1;
  position: absolute;
  top: 200px;
  left: 0;
  /*top: 45px;
  left: 20px;*/
}

.visual .line {
  display: block;
  font-family: "Josefin Sans";
  font-size: 35px;
  font-weight: bold;
}

.visual .line + .line {
  margin-top: 7px;
}

.visual .line,
.visual .letter {
  opacity: 0;
}

.visual .letter {
  display: inline-block;
  padding-top: 2.5px;
}

.visual .large {
  font-size: 45px;
}

.visual.is-visible .line {
  opacity: 1;
}

.visual.is-visible .letter {
  animation: slideIn .8s cubic-bezier(0,1.2,.13,1.5) forwards;
}


}