/*
  Skin Name: 株式会社アレックスサイトデザインスキン
  Description: スリーアローズが制作する株式会社アレックスのサイトデザインです。
  Author: 株式会社スリーアローズ
  Author URI:https://3-arrows.co.jp/ 
  Version: 1.0.0
  Priority: 10
*/
/*以下にスタイルシートを記入してください*/

/**************************************************
** 公開サイトカスタマイズ
**************************************************/
:root {
	--main-color: #595656;		/* コーポレートカラー */
	--accent-color1: #363434;
	--accent-color2: #B0ABAB;
	--point-color: #F23838;
	--textbase-color: #333333;
	--white-color: #ffffff;
	--base-color2: #D9D2D2;
}

/**************************************************
**
** 全体
**
**************************************************/

/* サイト全体 2025.04.28 add */
html, body {
	overflow-x: hidden;
}

/**************************************************
** 共通設定
**************************************************/

/* 固定ページの投稿日を非表示にする */
.page .date-tags {
	display: none;
}
/* アイコンの右に余白を設定する */
i.fas {
	margin-right: 0.5rem;
}
/* コンテンツ背景色は全体背景色を継承する */
body.page .main {
	background-color: inherit;
}
/* 固定ページ：メインコンテンツ上余白 */
.page .main {
	padding-top: 0;
}
.page .content {
	margin-top: 0;
}
/* 投稿ページ：メインコンテンツ下余白 */
.archive .main,
.single .main {
	margin-bottom: 80px;
}

/**************************************************
** ヘッダーカスタマイズ
**************************************************/

/* ヘッダーエリアの余白設定 */
#header-container-in {
	padding: 16px 24px;
}
/* ヘッダーロゴの横に会社名表示 */
#header-container .logo span.site-name-text {
	position: relative;
}
/* 会社名（日本語） */
#header-container .logo span.site-name-text::before {
	content: '株式会社アレックス';
	color: var(--main-color);
	font-size: 1.5rem;
	font-weight: bold;
	letter-spacing: 0.1em;
	position: absolute;
	left: 96px;
	top: 24px;
}
/* 会社名（英語） */
#header-container .logo span.site-name-text::after {
	content: 'ALEX Co., Ltd.';
	color: var(--main-color);
	font-size: 0.875rem;
	font-weight: bold;
	letter-spacing: 0.1em;
	position: absolute;
	left: 96px;
	top: 4px;
}

/**************************************************
** グローバルナビカスタマイズ
**************************************************/

/* ナビテキスト */
#header-container #navi .item-label {
	font-weight: bold;
}
/* ナビテキスト間の余白設定 */
#header-container #navi .navi-in>ul>li>a {
    padding: 0 0.75em;
}
/* ナビテキストカラー（ボタン以外） */
#navi .navi-in #menu-globalnav a {
	color: var(--textbase-color);
}
/* 最後のお問い合わせのみボタン化 */
#header-container #navi li:last-child {
	background-color: var(--accent-color1);
	margin-left: 1.25rem;
}
#header-container #navi li:last-child a {
	color: var(--white-color);
}

/**************************************************
** フッター全体カスタマイズ
**************************************************/

/* フッターの余分な余白を削除 */
footer#footer {
	margin-top: 0;
	padding-top: 0;
	padding-bottom: 0;
}
div.footer-widgets,
div.footer-widgets-mobile {
	margin: 0 auto;
	padding: 32px 0;
}
#footer .footer-left,
#footer .footer-center,
#footer .footer-right {
	padding: 0;
}
#footer .footer-left aside,
#footer .footer-center aside,
#footer .footer-right aside {
	margin-bottom: 0;
}
/* フッターカラム（左・中・右）の割合 */
#footer .footer-left {
	width: 50%;
}
#footer .footer-center, #footer .footer-right {
	width: 25%;
}

/**************************************************
** フッター左（会社情報）カスタマイズ
**************************************************/

/* ロゴ画像サイズ */
#footer .footer-widgets .footer-left .rogo-area img,
#footer .footer-widgets-mobile .footer-mobile .rogo-area img {
	width: 80px;
	height: auto;
	object-fit: cover;
}
/* フッター左（会社情報）全体テキスト設定 */
#footer .footer-widgets .footer-left {
	font-size: 0.875rem;
	letter-spacing: 0.1em;
	line-height: 1.6;
}
/* ロゴ＋社名を横並び表示 */
#footer .footer-left .custom-html-widget #c-info .rogo-area {
	display: flex;
	align-items: center;
	margin-bottom: 1rem;
}
/* 社名表示設定 */
#footer .footer-widgets .footer-left #c-info .rogo-area .c-name-area,
#footer .footer-widgets-mobile .footer-mobile #c-info .rogo-area .c-name-area {
	font-weight: bold;
	margin-left: 1rem;
	color: var(--main-color);
}
/* 社名（日本語）部分のみ大きく */
#footer .footer-widgets .footer-left #c-info .rogo-area .c-name-area .c-name-jp,
#footer .footer-widgets-mobile .footer-mobile #c-info .rogo-area .c-name-area .c-name-jp {
	font-size: 1.5rem;
}

/**************************************************
** フッター内のリンクリストカスタマイズ（共通）
**************************************************/

/* リストの「・」なし */
#footer .footer-widgets .footer-center #footer-navi ul,
#footer .footer-widgets .footer-right #footer-button ul {
	list-style: none;
	padding-left: 0;
}
/* リンクの下線なし */
#footer .footer-widgets .footer-center #footer-navi ul li a,
#footer .footer-widgets .footer-right #footer-button ul a {
	text-decoration: none;
}
/* リンクリスト文字サイズ */
#footer .footer-widgets .footer-center #footer-navi ul li {
	font-size: 0.875rem;
}

/**************************************************
** フッター右（お問い合わせボタン）カスタマイズ
**************************************************/

/* リンクボタンカスタマイズ */
#footer .footer-widgets .footer-right #footer-button ul a {
	display: inline-block;
	background-color: var(--accent-color1);
	color: var(--white-color);
	font-size: 1.125rem;
	font-weight: bold;
	padding: 16px 0;
	text-align: center;
	width: 100%;
}
/* リンクボタン内の注釈カスタマイズ */
#footer .footer-widgets .footer-right #footer-button ul a small {
	display: block;
	font-size: 0.875rem;
	font-weight: normal;
	margin-left: 0.5rem;
}

/**************************************************
** フッター下（コピーライト）カスタマイズ
**************************************************/

/* 画面横幅いっぱいに線をひく */
#footer .footer-bottom {
	margin-top: 0;
	color: var(--white-color);
	border-image-source: linear-gradient( var(--accent-color1), var(--accent-color1) );
	border-image-slice: fill 0; 
	border-image-width: 1;
	border-image-outset: 0 100vw;
	border-image-repeat: stretch;
}
/* コピーライトテキスト */
#footer .footer-bottom .copyright {
	margin-top: 0;
	line-height: 1;
}

/**************************************************
** パンくずリストカスタマイズ
**************************************************/

/* 画面横幅いっぱいに線をひく */
.breadcrumb {
	margin: 0 auto;
	border-image-source: linear-gradient( var(--white-color), var(--white-color) );
	border-image-slice: fill 0; 
	border-image-width: 1;
	border-image-outset: 0 100vw;
	border-image-repeat: stretch;
}
/* パンくずリスト文字色設定 */
.breadcrumb span {
	color: var(--main-color);
}
/* 既存のパンくずリストアイコンを消す */
.breadcrumb .breadcrumb-item span.fa-file,
.breadcrumb .breadcrumb-item span.fa-folder {
	display: none;
}
/* 固定ページのパンくずリストアイコン設定 */
.breadcrumb .breadcrumb-item span.breadcrumb-caption::before {
	font-family: "Font Awesome 5 Free";
	content: "\f1e6";
	font-weight: bold;
	margin-right: 0.25rem;
}
/* カテゴリーのパンくずリストアイコン設定 */
.breadcrumb.breadcrumb-category .breadcrumb-item span.breadcrumb-caption::before {
	font-family: "Font Awesome 5 Free";
	content: "\f0a1";
	font-weight: bold;
	margin-right: 0.25rem;
}

/**************************************************
** ページタイトルカスタマイズ 2024.07.30
**************************************************/

/* 固定ページの通常タイトルを非表示にする */
#main .page .entry-title {
	display: none;
}
/* ウィジェット方式をやめる ※完成後、ウィジェットを削除し、このスタイルも消します */
#content-top .custom-html-widget h2.entry-title {
	display: none;
}
/* ページタイトルデザイン */
#sp-headertitle {
	color: var(--white-color);
	padding: 32px;
	margin: 0 auto 64px;
	font-weight: bold;
	/* 画像位置 */
	background-size: cover;
	background-position: 75% center;
	background-repeat: no-repeat;
}
/* ページタイトル（見出し）余白なし */
#sp-headertitle .entry-title {
	margin: 0;
}
/* ページタイトルテキストデザイン */
#sp-headertitle span {
	display: block;
	line-height: 1;
	letter-spacing: 0.1em;
}
/* 日本語ページタイトル */
#sp-headertitle span.jp-title {
	font-size: 1.625rem;
}
/* 英語ページタイトル */
#sp-headertitle span.en-title {
	font-size: 1rem;
	margin-top: 0.875rem;
}

/*******************************************************
** お知らせ・お知らせ一覧タイトルにアニメーションを適用する
*******************************************************/

/* タイトルをふわっと表示（下から上）※固定ページと同様のアニメーションにする */
div#sp-headertitle.raku_fadeInUp {
	animation: myfadein 1.3s 1;
}
/* アニメーション：下からフェードインする */
@keyframes myfadein {
	from {
		opacity: 0;
		transform: translateY(100px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/**************************************************
** フロントページカスタマイズ
**************************************************/

/* フロントページのタイトルを非表示にする */
.home.page .entry-title {
	display: none;
}
/* 各セクションパネルの余白設定 */
div#my-block-home-top,
div#my-block-home-contact,
div#my-block-home-news,
div#my-block-home-works {
	padding: 64px 0 80px;
	margin-bottom: 0;
}
/* セクションパネル区切り背景設定 */
div#my-block-home-top,
div#my-block-home-contact {
	border-image-source: url('https://alexservice.co.jp/wp-content/uploads/2023/12/backgroundimg.png');
	border-image-slice: fill 0; 
	border-image-width: 1;
	border-image-outset: 0 100vw;
	border-image-repeat: stretch;
}
/* 見出しデザイン */
div#my-block-home-top h2,
div#my-block-home-contact h2,
div#my-block-home-news h2,
div#my-block-home-works h2 {
	color: var(--point-color);
	background-color: inherit;
	padding: 0;
}

/**************************************************
** フロントページ：トップコンテンツパネルカスタマイズ
**************************************************/

/* 魅力・事業内容の横並び設定 */
div.wp-block-columns-is-layout-flex:nth-child(2) {
	flex-direction: row-reverse;
}
div#my-block-home-top .wp-block-columns:nth-child(1) {
	margin-right: calc(50% - 50vw);
    margin-bottom: 64px;
}
div#my-block-home-top .wp-block-columns:nth-child(2) {
	margin-left: calc(50% - 50vw);
}
div#my-block-home-top .wp-block-columns .wp-block-column:first-child {
	padding: 24px 40px 0 40px;
}
/* 画像の微調整 */
div#my-block-home-top .wp-block-columns:nth-child(1) figure img {
	opacity: 0.9;
}
/* もっと見るボタン */
div#my-block-home-top p a {
	font-weight: bold;
	color: var(--textbase-color);
	text-decoration: none;
	border-bottom: 1px dashed var(--textbase-color);
}
div#my-block-home-top p a::after {
	font-family: "Font Awesome 5 Free";
	content: "\f0a9";
	font-weight: bold;
	margin-left: 0.5rem;
}

/**************************************************
** フロントページ：新着情報・施工事例パネルカスタマイズ
**************************************************/

/* 新着情報・施工事例パネル下余白なし */
div#my-block-home-news h2,
div#my-block-home-works h2 {
	margin-bottom: 0;
}
/* 見出しの補足説明 */
div#my-block-home-news h2::after,
div#my-block-home-works h2::after {
	font-size: 0.875rem;
	color: var(--textbase-color);
	font-weight: normal;
	margin-left: 1rem;
	vertical-align: middle;
	white-space: nowrap;
}
div#my-block-home-news h2::after {
	content: "最新の情報をお届けいたします。";
}
div#my-block-home-works h2::after {
	content: "※写真はクリックすると拡大します。";
}
/* moreボタンデザイン */
div#my-block-home-works p a,
div#my-block-home-news p a {
	font-weight: bold;
	color: var(--white-color);
	background-color: var(--accent-color1);
	text-decoration: none;
	padding: 8px 12px;
}
div#my-block-home-works p a::after,
div#my-block-home-news p a::after {
	font-family: "Font Awesome 5 Free";
	content: "\f061";
	font-weight: bold;
	margin-left: 0.5rem;
}
/* 施工画像の比率設定 */
div#my-block-home-works figure.wp-block-gallery.has-nested-images figure.wp-block-image {
	aspect-ratio: 1/1;
}

/**************************************************
** フロントページ：新着情報パネルカスタマイズ
**************************************************/

/* エントリーカードエリア */
div#my-block-home-news .widget-entry-cards .a-wrap {
	margin-bottom: 0.5rem;
}
/* エントリーカードデザイン */
div#my-block-home-news .new-list-box .new-entry-cards a {
	background-color: var(--white-color);
	padding: 16px;
	border-color: var(--accent-color2);
}
div#my-block-home-news .new-list-box .new-entry-cards a .new-entry-card-thumb {
	margin-right: 24px;
}
div#my-block-home-news > div.wp-block-columns > div.wp-block-column > div.wp-block-columns {
	margin-bottom: 0;
}
/* 新着情報のイメージ画像 */
div#my-block-home-news .wp-block-columns .wp-block-column:nth-child(2) figure img {
	opacity: 0.6;
}

/**************************************************
** フロントページ：お問い合わせパネルカスタマイズ
**************************************************/

/* お問い合わせコンテンツ中央揃え */
div#my-block-home-contact {
	text-align: center;
}
/* お問い合わせボタンデザイン */
div#my-block-home-contact p a {
	display: inline-block;
	background-color: var(--accent-color1);
	color: var(--white-color);
	font-size: 1.125rem;
	font-weight: bold;
	text-decoration: none;
	line-height: 1;
	padding: 24px 48px;
}
div#my-block-home-contact p a::after {
	display: block;
	font-family: "Font Awesome 5 Free";
	content: "\f0e0";
	margin-top: 0.875rem;
	font-size: 3rem;
}

/**************************************************
** 会社案内ページカスタマイズ
**************************************************/

/* 代表挨拶エリア */
div#my-block-greeting {
	margin-bottom: 80px;
}
/* 会社概要エリア */
div#my-block-companyprofile {
	max-width: 880px;
	border-image-source: url('https://alexservice.co.jp/wp-content/uploads/2023/12/backgroundimg.png');
	border-image-slice: fill 0; 
	border-image-width: 1;
	border-image-outset: 0 100vw;
	border-image-repeat: stretch;
	padding: 64px 0 80px;
	margin: 0 auto;
}
/* アクセスエリア */
div#my-block-access {
	max-width: 880px;
	margin: 0 auto;
	padding-top: 64px;
}
/* メイン見出しデザイン */
#my-block-greeting h2,
#my-block-companyprofile h2,
#my-block-access h2 {
	text-align: center;
	padding: 0;
	background-color: inherit;
}
/* アイコンの左右に余白を設定する */
#my-block-greeting h2 i.fas,
#my-block-companyprofile h2 i.fas,
#my-block-access h2 i.fas {
	margin: 0 0.5rem;
}
/* サブ見出し（英字見出し） */
#my-block-greeting h2::after,
#my-block-companyprofile h2::after,
#my-block-access h2::after {
	display: block;
	font-size: 1rem;
	color: var(--point-color);
}
#my-block-greeting h2::after {
	content: "Greeting";
}
#my-block-companyprofile h2::after {
	content: "Company profile";
}
#my-block-access h2::after {
	content: "Access";
}
/* 署名スタイル */
div#my-block-greeting p strong {
	font-weight: bold;
	font-size: 1.25rem;
	margin-left: 1rem;
}
/* 会社概要テーブル */
div#my-block-companyprofile table {
	width: 100%;
}
div#my-block-companyprofile table tr td:first-child {
	font-weight: bold;
}
div#my-block-companyprofile table tr td {
	border-color: var(--accent-color1);
	background-color: var(--white-color);
	padding: 1rem;
}

/**************************************************
** 下層ページ共通カスタマイズ
**************************************************/

/* 見出しデザイン */
div#my-block-works h2,
div#my-block-service h2 {
	color: var(--accent-color1);
	padding: 0;
}
div#my-block-works h2::before,
div#my-block-service h2::before {
	font-family: "Font Awesome 5 Free";
	content: "\f1e6";
	font-weight: bold;
	margin-right: 0.5rem;
}
/* 詳細パネル設定 */
div#my-block-works div.my-works-detail,
div#my-block-service div.my-service-detail {
	margin: 0 auto 64px;
}
/* 冒頭テキスト */
div#my-block-contact > p,
div#my-block-works > p,
div#my-block-service > p {
	margin-bottom: 64px;
}

/**************************************************
** 事業内容ページカスタマイズ
**************************************************/
div#my-block-service div.my-service-detail {
	max-width: 888px;
}

/**************************************************
** 施工事例ページカスタマイズ
**************************************************/

/* サムネイル比率設定 */
div#my-block-works div.my-works-detail figure.wp-block-gallery.has-nested-images figure.wp-block-image {
	aspect-ratio: 1/1;
}

/**************************************************
** お問い合わせページカスタマイズ
**************************************************/

/* お問い合わせフォームエリア全体設定 */
div.wpcf7 {
	max-width: 1009px;
	margin: 0 auto;
}
/* フォームの必須マーク */
.form-required {
	background:red;
	padding:4px 4px;
	font-size:12px;
	color:white;
	margin-right:8px;
	border-radius: 4px;
	font-weight: bold;
}
/* フォームの任意マーク */
.form-optional {
	background: grey;
	padding: 4px 4px;
	font-size: 12px;
	color: white;
	margin-right: 8px;
	border-radius: 4px;
	font-weight: bold;
}
/* 入力フォーム各種 */
.search-edit, input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], textarea, select, input[type="submit"] {
	margin-top: 0.5em;
	background-color: var(--white-color);
	border: 3px solid var(--accent-color2);
	border-radius: 4px;
}
/* 送信ボタン */
input[type="submit"] {
	background-color: var(--accent-color1);
	color: var(--white-color);
	border: none;
	font-size: 1.125rem;
}
/* 同意ボタン */
.wpcf7 span.wpcf7-acceptance {
	display: block;
	text-align: center;
	margin-top: -16px;
}

/**************************************************
** プライバシーポリシーページカスタマイズ
**************************************************/

/* 見出しカスタマイズ */
#my-block-privacy-policy h2.wp-block-heading {
	margin: 40px 0 16px 0;
	padding: 0;
	color: var(--accent-color1);
}
/* お問い合わせ窓口ボタン */
p.my-contact-button a {
	display: inline-block;
	background-color: var(--accent-color1);
	color: var(--white-color);
	font-size: 1.125rem;
	font-weight: bold;
	text-decoration: none;
	padding: 16px 32px;
}
p.my-contact-button a::before {
	font-family: "Font Awesome 5 Free";
	content: "\f0e0";
	font-weight: bold;
	margin-right: 0.25rem;
}

/**************************************************
** アーカイブページカスタマイズ
**************************************************/

/* デフォルトの大見出しは非表示 */
.archive.category h1#archive-title {
	display: none;
}
/* アイキャッチ上のカテゴリは非表示 */
.cat-label {
	display: none;
}
/* 「次のページ」ボタンは非表示 */
div.pagination-next {
	display: none;
}

/**************************************************
** 投稿ページカスタマイズ
**************************************************/

/* 投稿タイトル下の余白 */
.single .article-header {
	margin-bottom: 40px;
}
/* 投稿タイトルデザイン */
.single .article-header h1.entry-title {
	color: var(--accent-color1);
	height: auto;
	padding: 0;
	margin-bottom: 16px;
}
/* 投稿日デザイン */
.single .article-header div.date-tags {
	font-size: 1.25em;
}
/* 大見出しデザイン */
.single h2.wp-block-heading {
	background-color: var(--base-color2);
	color: var(--accent-color1);
}
/* 小見出しデザイン */
.single h3.wp-block-heading {
	margin: 32px 0;
	border-top: none;
	border-right: none;
	border-left: 8px solid var(--accent-color2);
	border-bottom: 1px solid var(--accent-color2);
	color: var(--accent-color1);
}

/**************************************************
** 404ページカスタマイズ
**************************************************/

/* コンテンツ背景色は全体背景色を継承する */
body.error404 main#main {
	background-color: inherit;
}
/* 見つかりませんメッセージデザイン */
body.error404 main#main h1 {
	height: auto;
	color: var(--accent-color1);
	padding: 0;
	margin-bottom: 0;
}
/* 404ページに会社ロゴ表示 */
body.error404 main#main img {
	width: 50%;
	height: auto;
}

/**************************************************
** サイドバーカスタマイズ
**************************************************/

/* サイドバー下余白設定 */
#sidebar {
	margin-bottom: 80px;
}
/* サイドバー内見出しデザイン */
#sidebar aside h3.widget-sidebar-title {
	color: var(--point-color);
	background-color: inherit;
	padding-left: 0;
}
/* サイドバー内セクション下余白 */
#sidebar aside {
	margin-bottom: 64px;
}

/**************************************************
** アピールエリアカスタマイズ
**************************************************/

/* アピールエリア画像をディスプレイサイズに合わせる */
div#appeal {
	height: calc(100vw * calc(712 / 1440));
}

/*******************************************************
** トップビジュアル全体カスタマイズ
*******************************************************/

/* トップビジュアルエリアは最前面に表示（固定） */
.top-visual-area {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
}
/* トップビジュアルエリアは全画面表示 */
.top-visual-area #top-visual {
	background-color: #F4F4F2;
	height: 100vh;
	width: 100vw;
	display: flex;
	align-items: center;
}
/* トップビジュアルコンテンツの表示領域設定 */
.top-visual-area #top-visual #top-visual-in {
	max-width: 1288px;
	width: 100%;
	margin: 0 auto;
}
/* トップビジュアル並び順デザイン（縦並び） */
.setBox1 {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
/*	margin-right: 8px;  2025.01.07 削除 */
	align-items: stretch;
}
/* トップビジュアル並び順デザイン（横並び） */
.setBox2 {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	gap: 8px;            /* 2025.01.07 追加 */
	margin-bottom: 8px;  /* 2025.01.07 追加 */
}
/* トップビジュアルの画像サイズは縦横比を保ったまま調整する */
#top-visual #top-visual-in div img {
	object-fit: cover;
	width: 100%;          /* 2025.01.07 追加 */
	height: auto;         /* 2025.01.07 追加 */
}

/*******************************************************
** トップビジュアルアニメーション
*******************************************************/

/* アニメーションが動く順番を設定 */
#top-visual #top-visual-in .img1 {
	animation-delay: 2s;			/* 4番目 */
}
#top-visual #top-visual-in .img2 {
	animation-delay: 4s;			/* 8番目 */
}
#top-visual #top-visual-in .img3 {
	animation-delay: 3s;			/* 6番目 */
}
#top-visual #top-visual-in .img4 {
	animation-delay: 1.5s;			/* 3番目 */
}
#top-visual #top-visual-in .img5 {
	animation-delay: 2.5s;			/* 5番目 */
}
#top-visual #top-visual-in .img6 {
	animation-delay: 1s;			/* 2番目 */
}
#top-visual #top-visual-in .img7 {
	animation-delay: 3.5s;			/* 7番目 */
}
#top-visual #top-visual-in .img8 {
	animation-delay: 0.5s;			/* 1番目 */
}
/* アニメーション：画像が全部表示し終わったらコンテンツエリアを消す ※10番目 */
.fade-out-last {
	animation: fade-out-last 0.5s ease-out 7.5s both;
}
/* アニメーション：画像が全部表示し終わったら透明化して見えなくする ※9番目*/
.fade-out2 {
	animation: fade-out 1s ease-out 6s both;
}
/* アニメーション：上からフェードインする */
#top-visual .fadeIn {
	animation: slide-in-top 1s linear .5s backwards;
}
/* アニメーション：左からフェードインする */
#top-visual .fadeInTxt {
	animation: slide-in-left 1s linear .5s backwards;
}
/* フェードアウトアニメ（透明化） */
@keyframes fade-out {
	0% {
		opacity:1;
	}
	100% {
		opacity:0;
	}
}
/* フェードアウトアニメ（透明化＆消去）※fade-out-lastをJavascriptでキャッチしてコンテンツを消す */
@keyframes fade-out-last {
	0% {
		opacity:1;
	}
	100% {
		opacity:0;
	}
}
/* 上からフェードイン */
@keyframes slide-in-top {
	0% {
		transform:translateY(-32px);
		opacity:0;
	}
	100% {
		transform:translateY(0);
		opacity:1;
	}
}
/* 左からフェードイン */
@keyframes slide-in-left {
	0% {
		clip-path: inset(0 100% 0 0);
		opacity:0;
	}
	100% {
		clip-path: inset(0);
		opacity:1;
	}
}

/*******************************************************
** モバイル版メニュー用デザイン
*******************************************************/

/* 検索ボタンを消す */
ul.mobile-header-menu-buttons li.search-menu-button {
	display: none;
}
/* 「メニュー」テキストを消す */
ul.mobile-header-menu-buttons li.navi-menu-button span.navi-menu-caption {
	display: none;
}
/* ヘッダーロゴの横に会社名表示 */
ul.mobile-header-menu-buttons .logo-menu-button {
	position: relative;
}
ul.mobile-header-menu-buttons .logo-menu-button a {
	position: absolute;
	left: 0;
	top: 0;
}
ul.mobile-header-menu-buttons .logo-menu-button::before {
	content: '株式会社アレックス';
	color: var(--main-color);
	font-size: 0.875rem;
	font-weight: bold;
	letter-spacing: 0.1em;
	position: absolute;
	left: 80px;
	top: 32px;
	line-height: 1;
}
ul.mobile-header-menu-buttons .logo-menu-button::after {
	content: 'ALEX Co., Ltd.';
	color: var(--main-color);
	font-size: 0.75rem;
	font-weight: bold;
	letter-spacing: 0.1em;
	position: absolute;
	left: 80px;
	top: 12px;
	line-height: 1;
}

/*******************************************************
** モバイル版フッターデザイン
*******************************************************/

/* 文字サイズを小さめに設定 */
.footer-widgets-mobile p {
	font-size: 0.875rem;
}

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

/*1023px以下*/
@media screen and (max-width: 1023px){
	/* モバイル版メニューが表示される場合は、フッターのリンクなし */
	#footer .footer-center,
	#footer .footer-right {
		display: none;
	}
}

/*834px以下*/
@media screen and (max-width: 834px){
	/* （トップ）トップコンテンツの画像と文章の並びを逆転 */
	div#my-block-home-top div.wp-block-columns-is-layout-flex {
		flex-direction: column-reverse;
	}
}

/*480px以下*/
@media screen and (max-width: 480px){
	/* 固定ページタイトルの余白を小さく */
	#sp-headertitle {
		padding: 32px 16px;
	}
	/* 日本語ページタイトルを小さく */
	#sp-headertitle span.jp-title {
		font-size: 1.25rem;
	}
	/* 英語ページタイトルを小さく */
	#sp-headertitle span.en-title {
		font-size: 0.8rem;
		margin-top: 0.75rem;
	}
	/* （トップ）アピール画像を小さく */
	div#appeal {
		background-image: url('https://alexservice.co.jp/wp-content/uploads/2023/12/top-appeal-image-sepia-s.jpg');
		height: calc(100vw * calc(712 / 1024));
	}
	/* （トップ）施工事例・新着情報パネルのmoreボタンは下に表示 */
	div#my-block-home-works .wp-block-group,
	div#my-block-home-news .wp-block-group {
		flex-direction: column;
	}
	/* （トップ）お問い合わせボタンサイズを小さく */
	div#my-block-home-contact p a {
		padding: 24px 40px;
	}
	/* （会社案内）会社概要テーブル余白調整 */
	div#my-block-companyprofile table tr td {
		padding: 0.5rem;
	}
	/* （会社案内）会社概要テーブル項目名の調整 */
	div#my-block-companyprofile table tr td:nth-child(1) {
		width: 30%;
	}
	/* （会社案内）アクセス地図と説明を縦並びに */
	div#my-block-access .is-layout-flex {
		flex-direction: column;
	}
	/* （トップ）トップビジュアルアニメーション（画像を減らす対応） */
	#top-visual #top-visual-in > div > div.setBox1:nth-child(2) {
		margin-right: 0;
	}
	#top-visual #top-visual-in > div > div.setBox1:nth-child(3) {
		display: none;
	}
	#top-visual #top-visual-in .img1 {
		animation-delay: 1.5s;			/* 3番目 */
	}
	#top-visual #top-visual-in .img2 {
		animation-delay: 3s;			/* 6番目 */
	}
	#top-visual #top-visual-in .img3 {
		animation-delay: 2.5s;			/* 5番目 */
	}
	#top-visual #top-visual-in .img4 {
		animation-delay: 1s;			/* 2番目 */
	}
	#top-visual #top-visual-in .img5 {
		animation-delay: 2s;			/* 4番目 */
	}
	#top-visual #top-visual-in .img6 {
		animation-delay: 0.5s;			/* 1番目 */
	}
	/* アニメーション：画像が全部表示し終わったらコンテンツエリアを消す ※8番目 */
	.fade-out-last {
		animation:fade-out-last 1s ease-out 6.5s both;
	}
	/* アニメーション：画像が全部表示し終わったら透明化して見えなくする ※7番目*/
	.fade-out2 {
		animation:fade-out 1s ease-out 5s both;
	}
}

/*768px以下*/
@media screen and (min-width: 768px) {
	.br-sp {
		display: none;
	}
}