@charset "utf-8";
/*
Template: jstorkse
Theme Name: STORK SE Child
Theme URI: https://open-cage.com/stork-se/
Version: 1.0.0
Author: opencage
Author URI: https://open-cage.com/
*/






.nav_btn {
  display: none;
}

@media only screen and (min-width: 768px) {


}

/* header:responsive */
@media screen and (max-width: 750px) {
  .nav_btn {
    display: block;
  }
}

/* mv */


/* mission */
  .wp-container-core-group-is-layout-8cd669b9 {
    text-align: center;
  }

/* mission:responsive */

  @media screen and (max-width: 750px) {
    .span-stk-fs-l{
      font-size: 18px;
    }
  }


/* service */

.wp-block-column h3{
  display: inline-block; 
  border-bottom:1px solid #00AEEC ;
  margin-bottom: 0;
}
/* about us */


@media screen and (max-width: 750px) {
  .wp-image-40 {
    background-position: bottom center; 
    background-size: cover 
  }

}


/* company */
  .wp-container-core-group-is-layout-8de92ddb{
    display: grid;
    justify-content: center;
  }


  .has-fixed-layout{
    max-width: 800px;
    margin-inline: auto;
  }

  .has-fixed-layout td:nth-child(1) {
    width: 25%;
  }

  .has-fixed-layout td:nth-child(2) {
    width: 75%;
  }



 /* contact */

 .form__field{
  min-width: 600px;
 }

 #your-company-name.wpcf7-text,
  #your-name.wpcf7-text,
  #your-name-furigana.wpcf7-text,
  #your-email.wpcf7-text,
  #your-phone.wpcf7-text,
  .wpcf7-form-control,
  .wpcf7-select,.wpcf7-textarea{
    border: none;
    box-shadow: 2px 4px 8px 0 rgba(77, 118, 131, 0.1);
    padding: 15px 20px;
  }
  
  .wpcf7-acceptance{
    box-shadow: none;
  }
  
  
  .form__required{
    color: #df2525;
  }
  
  .form__label{
    margin-top: 30px;
  }

  .wpcf7-form{
    display: grid;
    justify-content: center;
  }

  .wpcf7 input[type="text"],
  .wpcf7 input[type="email"],
  .wpcf7 input[type="tel"],
  .wpcf7 textarea,
  .wpcf7 select {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  input::placeholder,
  textarea::placeholder {
  color: #bbb;
  opacity: 1; 
}
  
  .form__submit-button{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5em; 
    margin-top: 30px;
  }
  
  .form__submit-button input{
    padding: 17px 82px;
    background-color:#00AEEC ;
    border-radius: 30px;
    text-align: center;
    

  }


  .form__submit-button input:hover{
    background-color: #008fc6 !important; 
    color: #fff !important;
    transition: background-color 0.3s, color 0.2s !important;
  }
  
  .form__submit-button-input{
    position: relative;
  }


  .form__submit-button-input::before,
  .form__submit-button-input::after {
    content: "";
    position: absolute;
    background-color: white;
    height: 1.3px;
    transition: transform 0.2s ease;
  }
  
  .form__submit-button-input::before {
    width: 32px;
    top: 53%;
    right: 1em;
    transform: translateY(-50%);
  }

 .form__submit-button-input::after {
    width: 8px;
    height: 1px;
    border-top: 1px solid white;
    border-right: 1px solid white;
    top: 47%;
    right: 1em;
    transform: translateY(-50%) rotate(45deg);
  }

 .wpcf7-spinner{
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin: 0;
  }

.optional{
  padding: 15px 0;
}

/* contact:responsive */
 
@media screen and (max-width: 750px) {

  .form__field{
    min-width: 300px;
  }

  .form__submit-button-input::before {
    width: 28px;
    top: 53%;
    right: 3em;
    transform: translateY(-50%);
  }

 .form__submit-button-input::after {
    width: 8px;
    height: 1px;
    border-top: 1px solid white;
    border-right: 1px solid white;
    top: 47%;
    right: 3em;
    transform: translateY(-50%) rotate(45deg);
  }

  .link{
    font-size: 12px;
  }

}


/* =========================================================
   ヘッダー（カンプ takeuchi-01 / Navigation に合わせる）
   STORK SE既定は水色（--header-bg:#1baed3）なので白へ差し替える。
   変数はインラインCSSで後から出るため、セレクタの詳細度を上げて確実に効かせる
   ========================================================= */
body .stk_header {
	/* すりガラス。透け具合は .72 の数値で調整する
	   （下げると背景がよく透け、上げると白に近づく） */
	background-color: rgba(255, 255, 255, .72);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}
body .stk_header a {
	color: #6a7282;
}

/* グローバルナビ */
.stk_g_nav .ul__g_nav > li > a {
	font-family: "Noto Sans JP", sans-serif;
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	/* 親テーマは14px。768pxでナビの余裕が1pxしかなかったので12pxに詰めた。
	   1項目あたり4px×6項目で24px稼げる（2026-09-09に実測） */
	padding-left: 12px;
	padding-right: 12px;
	/* 元は #6a7282（白地で4.84:1）で、下層ページではパンくずなどの補助テキストに
	   使っている色だった。ナビには弱いので下層本文と同じ #3d3d3d に（10.86:1）。
	   いちど緑にしたが、ヘッダーの緑がロゴ・CTA・ナビの3箇所になって
	   まとまらなかったため黒に寄せた（2026-09-09にユーザー判断） */
	color: #3d3d3d;
}
/* ホバーはブランドの緑＋下線。色だけだと変化が弱く、下線だけだと色の
   フィードバックがないので両方使う */
.stk_g_nav .ul__g_nav > li > a:hover {
	color: #04471f;
}
/* 下線は親テーマの a::after に任せる。幅0から文字幅へ中央から左右に広がる
   transition 0.25s ease-out が入っており、border-bottom の色は文字色を継ぐので
   ホバー時に緑になる。text-decoration では滑らかに出せない（アニメーションできない）。
   bottom:0 のままだと要素の下端＝文字から14px下に出て離れて見えるので、
   文字の近く（下端から4px）まで上げる。2026-09-09にユーザー要望 */
.stk_g_nav .ul__g_nav > li > a::after {
	bottom: 10px;
}

/* お問い合わせ。ナビ項目は a の padding で間隔を作っているが、CTAは
   padding を持たないぶん左に余白がなく「アクセス」の文字に近く見えていた。
   項目の padding-right 12px ＋ この 12px で、文字どうしの間隔24pxと揃う
   （2026-09-09に実測・ユーザー指摘） */
.stk_g_nav .ul__g_nav > li.nav-contact {
	margin-left: 12px;
}
/* お問い合わせ（メニュー項目に nav-contact クラスを付けている） */
.stk_g_nav .ul__g_nav > li.nav-contact > a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* 元は116×30・12pxだったが、トップの .btn（192×56・14px）との差が大きすぎたので
	   140×40・14px にした。ヘッダーは75px・ナビ列は48pxなので上下に18px残る。
	   2026-09-09に実測・ユーザー選択 */
	width: 140px;
	height: 40px;
	padding: 0 16px;
	background: linear-gradient(180deg, #008236 50%, #01642a 50%);
	/* トップの .btn と同じ丸ボタンの形に揃える。
	   高さ40pxなので実際は20pxでクランプされ、同じ pill 形になる */
	border-radius: 28px;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	filter: drop-shadow(0 4px 3px rgba(13, 84, 43, .2)) drop-shadow(0 2px 2px rgba(13, 84, 43, .2));
}
.stk_g_nav .ul__g_nav > li.nav-contact > a:hover {
	background: linear-gradient(180deg, #01642a 50%, #004d20 50%);
	color: #fff;
}

/* 事業紹介の下で、段ボール事業の製品（ケース・ベッド・トイレ・輸送箱）を字下げする。
   3階層目にすると親テーマが横に開くので、2階層目のまま見た目だけ子にしている（setup-menu.php の nav-indent）。
   PCのドロップダウンの左余白は7px（2026-10-23実測）。SPのハンバーガー内も同じクラスで下げる */
.stk_g_nav .sub-menu .nav-indent > a {
	padding-left: 23px;
}
.stk_g_nav .sub-menu .nav-indent > a::before,
.widget_nav_menu .nav-indent > a::before {
	content: "－";
	/* SPメニュー側は親テーマの .sub-menu a::before から Font Awesome を引き継ぐので、本文の書体に戻す */
	font-family: inherit;
	font-weight: inherit;
	margin-right: 4px;
	opacity: .6;
}
/* 「梱包事業（PFASフリー耐油紙等）」が既定の幅で2行に折れるので、ドロップダウンの幅を中身に合わせる */
@media screen and (min-width: 768px) {
	.stk_g_nav .ul__g_nav .sub-menu {
		width: max-content;
		min-width: 240px;
	}
	.stk_g_nav .ul__g_nav .sub-menu a {
		white-space: nowrap;
	}
}
/* 親テーマの .widget ul li ul li a 系（左7px）に負けないよう body と .sub-menu を付ける */
body .widget_nav_menu .sub-menu .nav-indent > a {
	padding-left: 1.5em;
}

/* ロゴ。カンプは293×58。
   親テーマが .site__logo.fs_m .custom-logo{max-height:32px} を持っており
   クラス3つで詳細度が高いため、こちらも同じ高さに揃えて上書きする。
   2026-10-23にクライアント支給のロゴ（1004×128・横長）へ差し替えた。58pxのままだと幅455pxになり
   1024〜1199pxでナビが2段に折り返した。40pxでも大きいとのことで32px（幅251px）にした（ユーザー判断） */
body .stk_header .site__logo .custom-logo,
body .stk_header .site__logo__title.img img {
	width: auto;
	max-height: 32px;
}
/* ロゴの高さ（32px）にかかわらず、ヘッダーはカンプの64pxを確保する */
body .stk_header .inner-header {
	min-height: 64px;
}

/* ロゴを左端・ナビを右端へ寄せる。
   親テーマは .inner-header.wrap に max-width:1160px / margin:0 60px / padding:0 40px
   （左右あわせて100px）を持ち、justify-content:flex-start とロゴの margin-right で
   間隔を作っている。余白を40pxに詰め、間隔は space-between に任せる。
   2026-09-09に実測・ユーザー要望 */
/* 768px以上。メディアクエリで囲むのは、外と中で同じセレクタを使うと
   AutoptimizeのCSS圧縮が @media の開始タグごとルールを1つ食ってしまうため
   （2026-09-09に実測。生CSSは正常なのに配信CSSから消えていた） */
@media screen and (min-width: 768px) {
	body .stk_header .inner-header.wrap {
		max-width: none;
		margin: 0;
		padding: 0 40px;
		justify-content: space-between;
	}
	body .stk_header .site__logo {
		margin-right: 0;
	}
}

/* タブレット幅（768〜1023px）はロゴをシンボルマークだけにする。
   親テーマのハンバーガー切替は767pxだが、その手前でPCナビが入りきらず
   ロゴと重なって折り返していた（2026-09-09に実測。CTAを拡大する前から
   960px以下で崩れていた）。マークだけにすれば横幅が240px空くのでナビが収まる。
   images/logo-mark-2610.png はロゴのマーク部分を切り出したもの（2026-10-23に新しいロゴから切り出し直した） */
@media screen and (min-width: 768px) and (max-width: 1023px) {
	body .stk_header .site__logo .custom-logo,
	body .stk_header .site__logo__title.img img {
		content: url("images/logo-mark-2610.png");
		width: auto;
		max-height: 44px;
	}
}


/* 検索は使わないので消す。ハンバーガーは右端へ。
   STORK SE既定は .h_layout_sp_center .nav_btn{left:0} でハンバーガーが左、
   .search_btn{right:0} で検索が右に置かれている */
body .stk_header .search_btn {
	display: none;
}
body.h_layout_sp_center .stk_header .menu_btn {
	left: auto;
	right: 0;
}

/* ヘッダーを白地にしたので、STORK SE既定の --header-text-color(#edf9fc) では
   ハンバーガーが白飛びして見えない。アイコンとMENUの文字を黒にする */
body .stk_header .nav_btn {
	color: #000;
}
body .stk_header .nav_btn__svgicon {
	fill: #000;
}


/* =========================================================
   フッター（子テーマの footer.php）
   カンプ takeuchi-01 のサイトマップ型。上下に段ボール断面の仕切り線が入る
   ========================================================= */
/* 親テーマが #footer{background-color:var(--footer-bg)} をIDで当てているため、
   クラスだけでは負ける（実測で #2b2b2b が出ていた）。詳細度を上げて上書きする */
body #footer.site-footer {
	background-color: #3d3d3d;
	/* 仕切り線を画面幅いっぱいに出すため、左右の余白はinner側で持つ */
	padding: 80px 0;
}
.site-footer__inner {
	max-width: 1440px;
	margin-inline: auto;
	padding-inline: 104px;
	box-sizing: border-box;
}
/* 段ボール断面の仕切り線。footer直下に置いて幅いっぱいにする */
.site-footer__rule {
	width: 100%;
	height: 25px;
	margin: 40px 0;
	background: url(images/divider-tile.svg) repeat-x left center / auto 100%;
}

/* --- 上段：社名とポリシー系リンク --- */
.site-footer__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 40px;
	padding-bottom: 40px;
}
.site-footer__logo {
	margin: 0;
	color: #fff;
	font-family: "Montserrat", sans-serif;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 1px;
}
.site-footer__company {
	margin: 12px 0 0;
	color: #e6e6e6;
	font-family: "Noto Sans JP", sans-serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
}
.site-footer__policies {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
}
.site-footer__policies a {
	color: #e6e6e6;
	font-family: "Noto Sans JP", sans-serif;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.57;
	text-decoration: none;
}

/* --- 中段：3列のサイトマップ。上下を仕切り線で挟む --- */
.site-footer__sitemap {
	display: flex;
	gap: 48px;
}
/* サイトマップの1列。子を持つので site-footer のエレメントではなく独立ブロック */
.footer-col {
	flex: 1 1 0;
	min-width: 0;
}
.footer-col__title {
	margin: 0 0 16px;
	/* 指定しないと「■」だけ親の --footer-text-color(#cacaca) を継いで、
	   中のリンク(#fff)と明度が食い違う */
	color: #fff;
	font-family: "Noto Sans JP", sans-serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
}
.footer-col__title::before {
	content: "■ ";
}
.footer-col__title-link {
	color: #fff;
	text-decoration: none;
}
.footer-col__list {
	margin: 0;
	padding: 0;
	list-style: none;
}
.footer-col__item + .footer-col__item {
	margin-top: 8px;
}
.footer-col__item--child {
	padding-left: 16px;
}
.footer-col__link {
	color: #e6e6e6;
	font-family: "Noto Sans JP", sans-serif;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.71;
	text-decoration: none;
}
/* ホバー色を指定しないと親テーマの a:hover（--main-link-color-hover
   ＝ #04471f）を継ぎ、フッターの地（#3d3d3d）に溶ける。実測 1.00:1 で、
   通常時の 8.78:1 から完全に見えなくなっていた。白なら 10.86:1 */
.site-footer a:hover {
	color: #fff;
	text-decoration: underline;
}

/* --- 下段：コピーライト --- */
.site-footer__copyright {
	margin: 40px 0 0;
	text-align: center;
	color: #e6e6e6;
	font-family: "Noto Sans JP", sans-serif;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.57;
}

/* ===== lg: タブレット ===== */
@media (max-width: 1200px) {
	.site-footer { padding: 64px 0; }
	.site-footer__inner { padding-inline: 40px; }
	.site-footer__sitemap { gap: 32px; }
}

/* ===== md: スマートフォン ===== */
@media (max-width: 767px) {
	.site-footer { padding: 48px 0; }
	.site-footer__inner { padding-inline: 20px; }
	.site-footer__rule { margin: 32px 0; }
	.site-footer__head {
		flex-direction: column;
		gap: 24px;
		padding-bottom: 32px;
	}
	.site-footer__policies { margin-top: 0; }
	/* 3列は入らないので縦に積む */
	.site-footer__sitemap {
		flex-direction: column;
		gap: 32px;
	}
	.footer-col { flex: none; }
	.site-footer__copyright { margin-top: 32px; }
}

/* ===== sm: 小型スマートフォン ===== */
@media (max-width: 480px) {
	.site-footer { padding: 40px 0; }
	.site-footer__inner { padding-inline: 16px; }
	.site-footer__policies { gap: 8px 16px; }
}


/* =========================================================
   制作中の注記（.todo）

   クライアント確認や社内で決める必要がある箇所に、ページ上で見える形で
   残しておくためのもの。ページ上の注記は公開前（2026-10-22）にすべて外した。
   いま使っているのは、管理者にだけ出す contact.php のフォーム未設定の
   メッセージだけ。トップページと下層ページの両方で使うので、ここ（全ページで
   読まれる style.css）に置いている
   ========================================================= */
.todo {
	max-width: 1040px;
	margin-inline: auto;
	padding: 12px 16px;
	background: #fff7ed;
	border: 1px dashed #c2703a;
	border-radius: 8px;
	box-sizing: border-box;
	color: #8a4b20;
	font-family: "Noto Sans JP", sans-serif;
	font-size: 14px;
	line-height: 1.8;
}


/* ===== ヘッダーのスマートフォン対応 =====
   同じ条件の @media がこのファイルに複数あると、AutoptimizeのCSS圧縮が
   先に書かれたブロックを開始タグごと落としてしまう（2026-09-09に実測。
   生CSSは正常で、?ao_noptimize=1 では効いていた）。
   フッターの @media (max-width: 767px) より後ろに置いて回避している。
   ここを上へ動かすとSPのヘッダーが崩れる */
@media screen and (max-width: 767px) {
	body .stk_header .inner-header.wrap {
		padding: 0 16px;
	}
	/* ロゴ枠。ハンバーガー45pxと間隔16pxを残す */
	body .stk_header .site__logo {
		padding: 0;
		max-width: calc(100% - 61px);
	}
	/* 2026-10-23の新ロゴ（横長）はPCと同じ32px。48pxだと幅で頭打ちになり36pxで出ていた */
	body .stk_header .site__logo .custom-logo,
	body .stk_header .site__logo__title.img img {
		max-height: 32px;
	}
}