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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/************************************
** ■フルカバー時はみ出し要素削除
************************************/
.body {
overflow-x: hidden;
}
/* Full画面幅 */
.full-width {
	margin: 0 calc(50% - 50vw);
	padding: 0 calc(50vw - 50%);
}
/************************************
** ■グローバルナビ影は3px 3px 2px
************************************/
/*ナビゲーション*/
.header-container-in.hlt-top-menu {
  width:100%;

}
#navi .navi-in a{
	font-size: 20px; color: #fff;text-shadow: 0px 0px 20px #000000;
	font-weight:bold;
}
.navi-in > ul .sub-menu{
    display: none;
    position: absolute;
    margin: 0;
    width: 240px;
    list-style: none;
    padding: 0;
    background-color:rgba(255,255,255,0.3); 
    z-index: 99;
    text-align: center;
}
/* スクロールしていない時のグローバルメニューのスタイル（透明など） */
#header-container {
  background-color: rgba(255, 255, 255, 0); /* 初期は透明 */
  transition: background-color 0.3s ease-in-out; /* スムーズな変化 */
}

/* スクロールした時に適用されるスタイル */
#header-container.is-scrolled {
  background-color: rgba(255, 255, 255, 0.5); /* 背景色（半透明） */
  /* backdrop-filterの適用 */
  -webkit-backdrop-filter: blur(10px); /* Safari対応 */
  backdrop-filter: blur(10px); /* ぼかし具合を調整 */
}
/************************************
** ■ヘッダー追従、透過
************************************/
/* ヘッダー固定（トップページのみ） */
.header-container {
   position: fixed; 
   z-index: 9;
   width: 100%;
}
/* ヘッダー背景透過 */
#header-container,
#header-container .navi,
#header-container .navi-in a:hover {
    background-color: transparent;
}
/* ヘッダーモバイルボタン調整（トップページ限定） */
@media screen and (max-width: 1023px) {
  .mblt-header-mobile-buttons {
  margin-top: 0; /* 上部余白を削除 */
}
.mobile-header-menu-buttons {
  background-color: transparent; 
	/* 背景を透明に */
  box-shadow: none; 
	/* 影を削除 */
    }
}
/*モバイルメニュー背景色*/
.navi-menu-content {
background-color: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(20px);
　text-color: #000;
  text-shadow: #fff 0 0 15px;
  font-weight:bold;
}
/* カバーブロックの基本設定 */
.wp-block-cover.has-parallax {
  -webkit-clip-path: inset(0);
  clip-path: inset(0);
  position: relative;
  overflow: hidden;
}
/* 背景画像の設定 */
.wp-block-cover__image-background.has-parallax {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100vh;
  object-fit: cover;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  will-change: transform;
}
/* オプション：モバイルデバイスでの最適化 */
@media screen and (max-width: 768px) {
  .wp-block-cover__image-background.has-parallax {
    transform: none;
    -webkit-transform: none;
  }
}
/************************************
** ■アピールエリア
************************************/
/* アピール内コンテンツ背景を透明に */
.appeal-content {
  font-size: 36px;
  background-color: transparent;
  font-weight: bold;
  color: var(--cocoon-green-color);
  text-shadow: #fff 0 0 15px;
}
.page-id-28 .appeal {
display:none;
}
.page-id-310 .appeal {
display:none;
}
.page-id-315 .appeal {
display:none;
}
.page-id-317 .appeal {
display:none;
}
.page-id-331 .appeal {
display:none;
}
.page-id-357 .appeal {
  background-image: url('http://a-corporation.jp/wp-content/uploads/2025/12/back_3.webp');
}
/************************************
** ■見出し
************************************/
.article h2 {	
	font-family: "Shippori Mincho B1", sans-serif;
	color:#616477;
  padding-left: 0;
  padding-right: 0;
  margin-left: 0;
  margin-right: 0;
  background: none;
	font-size: clamp(27px, 2.4vw, 50px);
  line-height: 1.2;
}
.main-top1 h2{
	font-family: "Noto Serif JP", sans-serif;
	color:#ffffff;
	padding: 0;
  background: none;
  font-size: clamp(23px, 2.4vw, 50px);
  line-height: 1.2;
  text-shadow: #000000 0 0 15px;
}
.main-top2 h2{
	font-family: "Noto Serif JP", sans-serif;
	color:#ffffff;
	padding: 0;
  background: none;
  font-size: clamp(23px, 2.4vw, 50px);
  line-height: 1.2;
}
.main-section1 h2{
  border: none;
  padding: 0;
  background: none;
  font-size: clamp(27px, 2.4vw, 50px);
  background-color:rgba(255,255,255,0.3); 
  display: inline-block; 
  line-height: 1.2;
}
.sec-text1{
  background-color:rgba(255,255,255,0.3); 

  line-height: 1.2;
}
.main-section5 h2{
	font-family: "Noto Serif JP", sans-serif;
	color:#ffffff;
	padding: 0;
  background: none;
  font-size: clamp(23px, 2.4vw, 50px);
  line-height: 1.2;
  text-shadow: #000000 0 0 15px;
}
.article h3 {
  border: none;
  padding: 0;
}
.article h4 {

}
.article h5 {
   border: none;
   padding: 0;
}
.article h6 {
border: none;
padding: 0;
}
.body .entry-content p {
  color: #333333;
/* ここに任意のカラーコードを指定してください */
}
.service_0 p  {
  text-shadow: #ffffff 0 0 15px;/* ここに任意のカラーコードを指定してください */
}
.service_3 p  {
  text-shadow: #ffffff 0 0 15px;/* ここに任意のカラーコードを指定してください */
}
.service_4 p  {
  text-shadow: #ffffff 0 0 15px;/* ここに任意のカラーコードを指定してください */
}
.works_0 p  {
  text-shadow: #ffffff 0 0 15px;/* ここに任意のカラーコードを指定してください */
}
.contact_0 p  {
  text-shadow: #ffffff 0 0 15px;/* ここに任意のカラーコードを指定してください */
}
.main-section5 p  {
  text-shadow: #000000 0 0 15px;/* ここに任意のカラーコードを指定してください */
}
/*PCでbr無効*/
.hidden-pc{
    display: none;
}
/*スマートフォンで有効*/
@media screen and (max-width:768px) {
    .hidden-pc{
        display: block;
    }
}
/*PCでbr有効*/
.hidden-sp{
    display: block;
}
/*スマートフォンで無効*/
@media screen and (max-width:767px) {
    .hidden-sp{
        display: none;
    }
}
/************************************
** ■スクロールバー
************************************/
.scroll {
  position: relative;
}
.scroll-text {
  color: #333;
  font-size: 14px;
  text-align: center;
  transform: rotate(90deg);
}
.scroll-border {
  position: relative;
  top: 20px;
  width: 1px;
  height: 100px;
  background-color: #d5d5d5;
  overflow: hidden;
  margin: auto;
}
.scroll-border::before {
  content: "";
  display: block;
  position: absolute;
  width: 1px;
  height: 30px;
  top: 0;
  left: 0;
  right: 0;
  background: #333;
  animation: scrollbar 2.0s ease-in-out infinite;
  margin: auto;
}
@keyframes scrollbar {
  0% {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }
  100% {
    -webkit-transform: translateY(350%);
    transform: translateY(350%);
  }
}
/************************************
** ■メインコンテンツ3列表示
************************************/
.section-img1 {
  padding-left:150px;
}
.section-img2 {
  padding-left:200px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
	grid-gap: 1rem;
  gap: 1rem;
}
/* 各アイテムのスタイル */
.section-img2 img {
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  height: 100dvh;
 max-width: 100%;	
	object-fit: cover;
}
.sec-img2{
	padding-top:100px;
	}
.sec-img3{
	padding-top:200px;
　object-fit: cover;
  object-position: 70% 50%;
	}
/*sp*/
@media screen and (max-width:1400px){
  .section-img{
    flex-direction: column-reverse;
  }
}
@media screen and (max-width:1400px) {
 .section-img1 {
padding-left:0px;
    }
}
@media screen and (max-width:1400px) {
 .section-img2 {
 padding-left:0px;
	}
}
@media screen and (max-width:1400px) {
 .section-img2 img {
 height:50dvh;
	}
}
@media screen and (max-width:1400px) {
 .sec-img2 {
padding-top:0px;
    }
}
@media screen and (max-width:1400px) {
 .sec-img3 {
padding-top:0px;
    }
}
 /* sp時画像縮小　セクション4 */
@media screen and (max-width: 1023px) {
  .main_section4 img {
    width: 80% !important;
    height: auto; /* 縦横比を維持 */
    margin: 0 auto; /* 中央寄せにする場合 */
    display: block; /* 中央寄せにする場合 */
  }
}
/************************************
** ■ボタン装飾
************************************/
.border-button {
    padding: 5px 5px;
    background: transparent;
    color: #667eea;
    border: 2px solid #667eea;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.border-button {
    border: none;
    position: relative;
}

.border-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: #667eea;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.border-button::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 2px;
    height: 100%;
    background: #ff6b6b;
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.3s ease;
}

.border-button:hover::before {
    transform: scaleX(1);
}

.border-button:hover::after {
    transform: scaleY(1);
}
/************************************
** ■コンタクトフォームカスタム
************************************/
table.CF7_table{
	width:80%;
	margin:0 auto;
	border: 3px solid #e5e5e5;
}
table.CF7_table tr{
	border-top: 1px solid #e5e5e5;
}
/*入力欄*/
.CF7_table input, .CF7_table textarea {
	border: 1px solid #d8d8d8;
}
.CF7_table ::placeholder {
	color:#797979;
}
/*「必須」文字*/
.CF7_req{
	font-size:.9em;
	padding: 5px;
	background: #f79034;/*オレンジ*/
	color: #fff;
	border-radius: 3px;
	margin-right:1em;
}
/*「任意」文字*/
.CF7_unreq{
	font-size:.9em;
	padding: 5px;
	background: #bdbdbd;/*グレー*/
	color: #fff;
	border-radius: 3px;
	margin-right:1em;
}
/* タイトル列 */
@media screen and (min-width: 768px){
	.CF7_table th{
	width:30%;/*横幅*/
	background-color:#ebedf5;/*ブルーグレー*/
	text-align:left;
	}	
}
/* レスポンシブ */
@media screen and (max-width: 768px){
	table.CF7_table{
	width:95%;
}
.CF7_table tr, .CF7_table td, .CF7_table th{
	display: block;
	width: 100%;
line-height:2.5em;
}
.CF7_table th{
	background-color:#ebedf5;
}
}
/* 「送信する」ボタン */
.wpcf7 input.wpcf7-submit {
	background-color:#f79034;/* オレンジ*/
	border:0;
	color:#fff;
	font-size:1.2em;
	font-weight:bold;
	margin:0 auto;
}
.CF7_btn{
	text-align:center;
	margin-top:20px;
}
.wpcf7-spinner{
	width:0;
	margin:0;
}
.cf-turnstile {
position: absolute;
display: block;
bottom: 0px;
left: 50%;
transform: translateX(-50%);
}
/************************************
** ■トップページのお問合せCTA
************************************/
@media screen and (max-width: 768px) {
  .cta1_img{
    width: 50% !important;
    height: auto; /* 縦横比を維持 */
    margin: 0 auto; /* 中央寄せ（必要に応じて） */
  }
}
@media screen and (max-width: 768px) {
  .cta2_img{
    width: 50% !important;
    height: auto; /* 縦横比を維持 */
  }
}
@media screen and (max-width: 768px) {
  .cta1_text{
    height: auto; /* 縦横比を維持 */
    text-align: center !important;
  }
}
@media screen and (max-width:1400px){
  .cta2{
    flex-direction: column-reverse;
  }
}
/************************************
** ■会社概要テーブル
************************************/
.container table tr {
    background-color: rgba(134, 206, 235, 0.5);
}
.container table th {
    background-color: rgba(134, 206, 235, 0.5);}
/************************************
** ■事例ページギャラリータブ
************************************/
/* タブラベル共通 */
[class*="is-style-cstm-tab-"] .tab-label-group .tab-label {
   padding: 0.6em 1.5em;
   text-align: center;
   border-radius: 0;
   transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}
/* タブ幅均等配置（grid / wrap） */
[class*="is-style-cstm-tab-grid-"] .tab-label-group .tab-label,
[class*="is-style-cstm-tab-wrap-"] .tab-label-group .tab-label {
   flex: 1;
}
[class*="is-style-cstm-tab-"] .tab-label-group{
   font-size:.9em;
}
/* タブ折り返し（wrap） */
[class*="is-style-cstm-tab-wrap-"] .tab-label-group {
   flex-wrap: wrap;
}
/* 吹き出しタブ */
[class*="is-style-cstm-tab-"][class*="-bubble"] .tab-label-group {
   gap: 7px 3px;
   padding-bottom: 1em;
}
[class*="is-style-cstm-tab-"][class*="-bubble"] .tab-label-group .tab-label {
   position: relative;
}
[class*="is-style-cstm-tab-"][class*="-bubble"] .tab-label-group .tab-label.is-active:after {
   background-color: var(--cocoon-tab-label-active-color);
   clip-path: polygon(0 0, 100% 0, 50% 100%);
   content: '';
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
   top: calc(100% - 1px);
   height: 8px;
   width: 15px;
}
/* 下線タブ */
[class*="is-style-cstm-tab-"][class*="-underline"] .tab-label-group .tab-label {
   background: none;
   border-bottom: 2px solid var(--cocoon-tab-label-color);
}
[class*="is-style-cstm-tab-"][class*="-underline"] .tab-label-group .tab-label.is-active {
   background: none;
   border-color: var(--cocoon-tab-label-active-color);
   color: var(--cocoon-tab-label-active-color);
}
/* ホバー時の設定 */
[class*="is-style-cstm-tab-"]:not([class*="-underline"]) .tab-label-group .tab-label:hover {
   background-color: var(--cocoon-tab-label-active-color);
   color: var(--cocoon-white-color);
}
[class*="is-style-cstm-tab-"][class*="-underline"] .tab-label-group .tab-label:hover {
   border-color: var(--cocoon-tab-label-active-color);
   color: var(--cocoon-tab-label-active-color);
}
/* コンテンツ部分（simple / bubble / underline 共通） */
[class*="is-style-cstm-tab-"][class*="-simple"] .tab-content-group,
[class*="is-style-cstm-tab-"][class*="-bubble"] .tab-content-group,
[class*="is-style-cstm-tab-"][class*="-underline"] .tab-content-group {
   border: none;
   padding: 1.2em 0;
}
/* コンテンツ部分（frame） */
[class*="is-style-cstm-tab-"][class*="-frame"] .tab-content-group {
   border-radius: 0;
}
[class*="is-style-cstm-tab-"][class*="-frame"] .tab-label-group {
   gap: 0;
}
/************************************
** ■ブログページサイドバー
************************************/
/* サイドバー見出し変更 */
.sidebar h3{
background: none!important;/*背景を消す*/
color: #333333;/*文字色*/
font-size: 16px;/*文字の大きさ*/
border-bottom: solid 1px skyblue;/*右側の線の種類・太さ・色*/
position: relative;
padding: 0.5em;/*余白*/
margin: 1.5em 0;/*余白*/
}
.sidebar h3:after{
position: absolute;
content: " ";
display: block;
border-bottom: solid 1px #1e7cd1;/*左側の線の種類・太さ・色*/
bottom: -1px;/*左側の線の位置*/
left: 0;/*左側の線の位置*/
width: 40%;/*左側の線の幅*/
}
/************************************
** ■ホバー時の背景色設定
************************************/
.navi-footer-in a:hover{
  background-color: #1e73be; /*背景色*/
  transition: all 0.8s ease; /*アニメーション*/
  color: #333; /*フォントカラー*/
}
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

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

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