@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/


/* ==================================================
	追加CSS

	- Foundation（ベーススタイル）
	- Layout（共通で使用するレイアウトスタイル）
	- Component（共通で使用する要素スタイル）
	- Project（特定ページで使用する要素スタイル）
	- Utility（スタイル調整）
	- JavaScript（JS用クラス）

		CSS命令規則：BEM/FLOCSS参考
 		CSS記述構成：FLOCSS参考
		既存クラス追加設定：コメント【テーマCSS】記述
		ブレイクポイント*/



/* ==================================================
	Foundation
	ベーススタイル
 * ================================================== */



/* ==================================================
	Layout
	共通で使用するレイアウトスタイル
 * ================================================== */

/* ========== 共通レイアウト ========== */

/* ----- reCAPTCHAバッジ（ロゴマーク）非表示 ----- */
.grecaptcha-badge { visibility: hidden; }


/* ========== ヘッダー（テーマCSSクラス） ========== */

/* ----- ヘッダー背景 ----- */
	/* ヘッダー背景非表示（） */
.l-header {
	background: none !important;
}
	/* 追従ヘッダーの影を消す */
.-body-solid .l-fixHeader {
	box-shadow: none;
}

/* ----- ヘッダータイトル ----- */
.c-gnav {
	font-family: "Montserrat", sans-serif;
	font-weight: 600;
}


/* ========== 固定ページ（bodyクラス：page） ========== */

/* ----- タイトル非表示 ----- */
.page .c-pageTitle {
	display: none;
}
/* ----- コンテンツをヘッダー下面まで表示 ----- */
/* コンテンツ上部マージンなくす */
.page .post_content {
	margin-top: 0;
}
/* メインコンテンツ上部余白をなくし、ページ最上部までマージン設定 */
.page .l-content {
	padding-top: 0;
	margin-top: -72px; /* PCヘッダー高さ分 */
}
@media (max-width: 900px)  {
	.page  .l-content {
		padding-top: 0;
		margin-top: -48px; /* SPヘッダー高さ分 */
	}
}



/* ========== 投稿ページ（bodyクラス：single-post） ========== */

/* ----- タイトル左の日付を非表示 ----- */
.single-post .c-postTitle__date {
	display: none;
}
/* ----- 見出しデザイン設定 ----- */
.single-post #main_content h2 {
	font-weight:700;
	font-size: 1rem !importan;
	margin-top: 2.5em;
	background: #f7f7f7;
	padding: 0.5rem 1rem 0.5rem 2.5rem;
	position: relative;
}
.single-post #main_content h2:before {
	position: absolute;
	top: 20%;
	left: 15px;
	width: 4px;
	height: 60%;
	content: '';
	border-radius: 2px;
	background: #9f886e;
}

/* ----- 目次設定 ----- */
	/* ボックス調整 */
.single-post .p-toc {
	max-width: 500px !important; /* ボックス幅をコンパクトに */
	padding: 1.5rem 3rem; /* 余白を大きく */
}
@media (max-width: 600px)  {
	.single-post .p-toc {
		padding: 1.5rem 2rem; 
	}
}

	/* h2タイトル番号を丸デザイン */
.single-post .p-toc ol.is-style-index > li:before {
	background-color: #9f886e; /* 丸の色 */
	border-radius: 999px;
	color: #fff;
	height: 25px;
	width: 25px;
	padding: 0;
	top: 0;
	display: flex;
	justify-content: center;
	align-items: center;
}


/* ========== 制作実績ページ（bodyクラス：single-works） ========== */

/*日付とタイトルのヘッダー非表示 */
.single-works .p-articleHead{
	display: none ;
}
/*ヘッダー下のカテゴリーと投稿/、更新日付を非表示 */
.single-works .p-articleMetas{
	display: none ;
}
/*ページ最下部の関連記事エリアの「関連記事」タイトルを非表示 */
.single-works .l-articleBottom__section h2{
	display: none !important;
}



/* ==================================================
	Component
	共通で使用する要素スタイル
 * ================================================== */

/* ----- メインタイトル（h2） ----- */
.c-sec__title-main {
	font-family: "Montserrat", sans-serif;
	font-weight: 800 !important;
	font-size: 4rem !important;
	letter-spacing: 0.0em;
	margin-bottom: 1rem !important;
}

/* ----- メインタイトルの補足日本語（h2内span） ----- */
.c-sec__title-sub {
	font-weight: 500;
	font-size: 0.9rem !important;
	margin-top: 1rem;
	padding-left: 0.5rem;
	vertical-align: 2.2rem;/* 親要素のフォントの上端に揃うよう調整（ベースラインから上に○rem移動） */
}

/* ----- 固定ページタイトル（p） ----- */
.c-sec__title-top {
	font-family: "Montserrat", sans-serif;
	font-weight: 800 !important;
	font-size: 3rem !important;
	line-height: 4rem; /* 直下ブロックとの余白のため調整 */
	/*letter-spacing: 0.0rem;*/
	/*margin-bottom: 1rem !important;*/
}

/* ----- ブロックタイトル（p） ----- */
.c-block__title {
	font-family: "Montserrat", sans-serif;
	font-weight: 600 !important;
	font-size: 1.3rem;
}


/* ----- カラムをレスポンス表示時に順番を逆にする ----- */
/*スマホ表示（600PX）*/
@media (max-width: 600px)  {
	.c-column__reverse-sp .swell-block-columns__inner {
		flex-direction: column-reverse; 
	}
}

/* ----- カラムを右側だけブラウザ端まで広げる ----- */
.c-column__outside-right {
	margin-right: calc(50% - 50vw);
}

/* ----- カラムを左側だけブラウザ端まで広げる ----- */
.c-column__outside-left {
	margin-left: calc(50% - 50vw);
}

/* ----- リッチカラムをレスポンシブ時に逆方向に表示する ----- */
@media (max-width: 900px)  {
	/*【テーマCSS】リッチカラム親divのfiex設定*/
	.c-column__reverse .swell-block-columns__inner {
		flex-direction: column-reverse; 
	}
}

/* ----- リッチカラムの余りカラムを中央寄せにする ----- */
.c-column__place-center .swell-block-columns__inner {
	/*【テーマCSS】リッチカラム親divのfiex設定*/
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}


/* ----- ページ遷移用メインボタン（SWELLボタンをカスタマイズ） ----- */
.c-btn__main a {
	font-family: "Montserrat", sans-serif;
	font-weight: 600 !important;	
	border: solid 1px #292929;
	background-color: #FDFDFD;
	color: #292929;
	box-shadow: none;
	width: -moz-fit-content;
	width: fit-content;
	padding: 0.8em 6.0em 0.8em 4.0em;
	min-width: unset;
	border-radius: 999px;
	transition: all 0.3s;
}
.c-btn__main a::after {
	right: 1.3em;
}
.c-btn__main a:hover {
	border: solid 1px #FDFDFD;
  background-color: #ff0000 !important;
}


/* ----- 固定ページ上部タイトルのプラス回転図形 ----- */
@keyframes rotate-right-45 { 
	from {
		transform: rotate(0deg); /* アニメーション開始時（0%）回転していない状態 */
	}
	to {
		transform: rotate(45deg); /* アニメーション終了時（100%）右に45度回転した状態 */
	}
}
	/* プラス図形の本体、 寄せのため、図形と同サイズにdivサイズ指定と余白設定*/
.c-block__icon-plus {
	margin: 10px !important;
	width: 60px;
	height: 60px;
	position: relative; /* 中の線（疑似要素）を配置する際の基準点 */

	/* ここでアニメーションを適用 */
	animation-name: rotate-right-45; /* @keyframesで付けた名前 */
	animation-duration: 0.5s;      /* 0.5秒かけて実行 */
	animation-fill-mode: forwards; /* アニメーション終了後、最後の状態（45度回転）を維持 */
	animation-timing-function: ease-in-out; /* 自然な緩急をつける */
	animation-delay: 1.5s; /* アニメーション開始までの遅延 */
}
	/* プラス図形の2本の線を疑似要素で作成します */
.c-block__icon-plus::before,
.c-block__icon-plus::after {
	content: '';
	display: block;
	background-color: #333; /* 線の色 */
	position: absolute;
	top: 50%;
	left: 50%;
	transform-origin: center; /* 回転の中心を要素の中央に設定 */
}
	/* 横線 */
.c-block__icon-plus::before {
	width: 60px;  /* 長さ = コンテナの幅 */
	height: 1px; /* 線幅 */
	transform: translate(-50%, -50%); /* 要素の中心をコンテナの中心に合わせる */
  }
	/* 縦線 */
.c-block__icon-plus::after {
	width: 60px;  /* 長さ = コンテナの幅 */
	height: 1px; /* 線幅 */
	transform: translate(-50%, -50%) rotate(90deg); /* 要素の中心をコンテナの中心に合わせた後、90度回転させて縦線にする */
}


/* ----- 制作実績一覧カード　カテゴリー名 ----- */
.c-card-works__title-cat {
	font-family: "Montserrat", sans-serif;
	font-weight: 400 !important;
	font-size: 0.7rem !important;
	/*color: #9f886e!important; カラーはブロックエディタで設定*/
}

/* ----- 文字スクロールエフェクト（div） ----- */
.c-block__marquee-l {
	/*width: 100%;*/
	overflow: hidden; /* はみ出たテキストを非表示 */
	white-space: nowrap; /* テキストを折り返さない */
	position: relative;
}
	/* 上記ブロック内にpテキスト2行をスクロール */
.c-block__marquee-l p {
	font-family: "Montserrat", sans-serif;
	font-weight: 800 !important;
	font-size: 8rem !important;
	line-height: 8rem;
	/*opacity: 0.5;*/
	padding-right: 0.5em; /* 2行間のスペース確保 */
	margin-bottom: 0;
	display: inline-block;
	/*padding-left: 100%;*/  /*初期位置を画面外（右端）に設定*/
	animation: marquee-animation 10s linear infinite;
}
@keyframes marquee-animation {
  from {
    transform: translateX(0%); /* 初期位置 */
  }
  to {
    transform: translateX(-100%); /* テキストが左端へ移動 */
  }
}



/* ==================================================
	Project
	特定ページで使用する要素スタイル
 * ================================================== */

/* ========== ヘッダー ========== */



/* ========== フッター ========== */

/* ----- コンタクトボタン ----- */
.p-footer__btn-contact a {
	font-family: "Montserrat", sans-serif;
	font-weight: 600 !important;	
	background-color: #292929;
	border-color: #FDFDFD;
	color: #FFFFFF;
}
.p-footer__btn-contact a:hover {
		background-color: #FDFDFD;
	border-color: #292929;
	color: #292929 !important;
}

/* ----- メニューリストタイトル ----- */
.p-footer__menu-title {
	font-family: "Montserrat", sans-serif;
	font-weight: 600 !important;
}

/* ----- メニューリスト（矢印アイコン） ----- */
	/* リストアイコン初期化 */
.p-footer__menu-list {
	list-style-type: none;
	padding: 0em;
}

	/* リストホバー設定 */
.p-footer__menu-list a {
	padding-bottom: 3px;
	background-image: linear-gradient(#9f886e, #9f886e);
	background-repeat: no-repeat;
	background-position: bottom right;
	background-size: 0 1px;
	transition: background-size 0.3s;
}
.p-footer__menu-list a:hover {
	background-position: bottom left;
	background-size: 100% 1px;
}
	/*　矢印アイコン　*/
.p-footer__menu-list li {
	display: flex;
	align-items: center;
	gap: 0 10px;
	padding: 0.2em;
}
.p-footer__menu-list li::before {
	transform: rotate(-45deg);
	width: .4em;
	height: .4em;
	border-bottom: 2px solid #9f886e;
	border-right: 2px solid #9f886e;
	content: '';
}

/* ----- メニューリストの補足日本語（span） ----- */
.p-footer__menu-sub {
	font-size: 0.75em;
	color: #999999 !important;
	padding-left: 0.5em;
}

/* ========== メインビジュアル（mv） ========== */

/* 背景ズームアニメーション ※今は動画だから使ってない！！ */
.p-mainVisual picture {
	/* 【テーマCSS】FV（p-mainVisual）内の画像（picture）に適用 */
	animation: zoom-in 10s infinite alternate !important;
}
@keyframes zoom-in {
	0% {
		transform: scale(1);
	}
	100% {
		transform: scale(1.2);
	}
}


.p-mv__title-main {
	font-family: "Montserrat", sans-serif;
	font-weight: 800;
	font-size: 3.8rem;
	line-height: 4.3rem;
	letter-spacing: 0.0em;
}

.p-mv__title-sub {
	font-size: 0.8rem;
	line-height: 1rem;
	text-shadow: none;
}

.p-mv__title-message {
	font-size: 2rem;
	font-weight: bold;
	text-shadow: none;
}


/* ----- mvスクロールアイコン設定 ----- */
.p-mv__line-scroll-down {
	color         : #333;
	font-size     : 13px;
	writing-mode  : vertical-rl;
	position      : absolute;
	top           : 90%;
	left          : 50%;
	transform     : translateX(-50%) translateY(-50%);
}
.p-mv__line-scroll-down::after {
	content         : '';
	display         : block;
	position        : absolute;
	right           : 50%;
	bottom          : -100px;
	transform       : translateX(-50%);
	width           : 1px;
	height          : 80px;
	background-color: #333;
}

.p-mv__line-scroll-down::after {
	animation: scroll 3s cubic-bezier(1, 0, 0, 1) infinite;
}
@keyframes scroll {
	0% {
		transform: scale(1, 0);
		transform-origin: 0 0;
	}
	50% {
		transform: scale(1, 1);
		transform-origin: 0 0;
	}
	50.1% {
		transform: scale(1, 1);
		transform-origin: 0 100%;
	}
	100% {
		transform: scale(1, 0);
		transform-origin: 0 100%;
	}
}


/* ========== トップページ（home） ========== */

/* ----- お知らせ一覧（topic）のタイトルと日付の順番を変える ----- */
.p-home__list-topic .p-postList.-type-simple .p-postList__body {
  display: grid;
}
.p-home__list-topic .p-postList.-type-simple .p-postList__body .p-postList__meta {
  order: 2;
}


/* ========== サービスページ（service） ========== */



/* ========== ご依頼方法ページ（notes） ========== */

/* ----- 目次ブロック ----- */
.p-notes__block-menu {
	max-width: 600px;
	margin: 0 auto;/*ボックスを中央*/
}
	/* メニューを左寄せのままボックス内で中央寄せする*/
.p-notes__block-menu .swell-block-column {
	text-align: center; /* カラム内を中央寄せ */
}
.p-notes__block-menu .swell-block-column .wp-block-group {
	display: inline-block;  /* pをグループ化し、グループ内をinline-block */
}
.p-notes__block-menu .swell-block-column p {
	text-align: left; /* p内は左寄せ */
}

/* ----- 目次リンク（p） ----- */
.p-notes__btn-menu {
	padding-left: 70px;
	position: relative;
}
.p-notes__btn-menu a{
	color: #292929;
}
.p-notes__btn-menu:before {
	/* 矢印横線 */
	content: "";
	position: absolute;
	top: 16px;
	left: 0;
	height: 1px;
	width: 50px;
	background-color: #292929;
	transition: 0.5s; /* マウスホバー時にゆっくり動かす */
}
.p-notes__btn-menu:after {
	/* 矢印ななめ線 */
	content: "";
	position: absolute;
	top: 16px;
	left: 0;
	height: 1px;
	width: 14px;
	background-color: #292929;
	transform-origin: right center;
	transform: translate(36px, 0px) rotate(25deg);
	transition: 0.5s; /* マウスホバー時にゆっくり動かす */
}
.p-notes__btn-menu:hover:before,
.p-notes__btn-menu:hover:after {
	/* マウスホバー時に矢印を右に動かす */
	left: 10px;
}


/* ========== 制作実績ページ（works） ========== */

/* ----- ページ最上部　カテゴリータイトル ----- */
.p-works__title-top-cat {
	/*font-family: "Manrope", sans-serif;*/
	font-family: "Montserrat", sans-serif;
	font-weight: 800;
	font-size: 3rem;
	letter-spacing: 0.0rem;
	margin-bottom: 1rem;
}

/* ----- 制作情報タイトル（h2） ----- */
.p-works__title-large {
	font-family: "Montserrat", sans-serif;
	font-weight: 800;
	font-size: 2.8rem !important;
	line-height: 3rem;
	letter-spacing: 0.0rem;
	margin-bottom: 0.5rem;
}

/* ----- 制作情報タイトル（p） ----- */
.p-works__title-info {
	font-family: "Montserrat", sans-serif;
	font-weight: 600;
	font-size: 1rem;
	/*margin: 0 0 1rem !important;*/
	padding: 0 0.5rem 0.5rem;
	border-bottom: 1px solid #393939;
}

/* ----- サムネイル下の担当業務アイコン小タイトル（p） ----- */
.p-works__title-work-name {
	font-family: "Montserrat", sans-serif;
	font-weight: 600;
	font-size: 0.8rem;
	margin-bottom: 0rem;
}

/* ----- サムネイル下の担当業務アイコン（ul） ----- */
.p-works__list-work-name {
	display: flex;
    flex-wrap: wrap;
	gap: 0.5rem;
	padding: 0 !important;
}
.p-works__list-work-name li {
	list-style:none;
	border: 1px solid #9f886e;
    border-radius: 4px;
	font-size: 0.8rem;
	padding: 1px 10px;
}

/*.column-works-icon {
	flex-wrap: wrap !important;
	gap: 10px !important;
}*/


/* ========== お知らせページ（topic） ========== */


/* ========== ブログパーツ　リンクブロック（link-block） ========== */

/* ----- タイトル（p） ----- */
.p-link-block__title {
	font-family: "Montserrat", sans-serif;
	font-weight: 800 !important;
	font-size: 3rem;
}
.p-link-block__title:before {
	content: "";
	position: absolute;
	width: 150px; /* 線の長さ */
	height: 1px; /* 線の太さ */
	background-color: #292929; /* 斜線の色 */
	left: 50%; /* 要素長さの50%左にして、要素を中央位置に */
	transform: translate(-50%, -3.5rem) rotate(45deg); /* 移動量-50%で中央維持、上に移動、回転 */
}

/* ----- リンクボックス（リッチカラム） ----- */
.p-link-block__wrap {
	border-radius: 20px; /* 丸角 */
	overflow: hidden; /* 丸角の外側を非表示 */
}
.p-link-block__link-area {
	/* リンクボックス初期 */
	color: #fff;
	background-color: #292929;
	position: relative;
	z-index: 1;
	transition: .3s;
}
.p-link-block__link-area:before {
	/* リンクボックス擬似要素 */
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	background-color: #f7f7f7;
	transform-origin: 50% 0%;
	transform: scaleY(0); /* Y:0で非表示にしておく */
	transition: transform ease .3s;
}
.p-link-block__link-area:hover {
	/* リンクボックス　ホバー */
	color: #292929;
}
.p-link-block__link-area:hover:before {
	/* リンクボックス　ホバー時の擬似要素 */
	transform-origin: 50% 100%;
	transform: scaleY(1); /* Y:1で表示させる */
}
.p-link-block__link-area a{
	/* リンクボックス内リンク要素 */
	background-color: transparent !important; /* ホバー時の背景色変化させない */
	padding: 3em 0 4.5em 0; /* リンク要素の余白　→ボックス内の余白 */
}
.p-link-block__link-area .p-linkbox__title {
	/* リンクボックス内タイトル */
	font-family: "Montserrat", sans-serif;
	font-weight: 800 !important;
	font-size: 1.5rem !important;
	/*padding-bottom: 0.25em;*/ /* サブタイトルとの余白 */
}
.p-link-block__link-area .p-linkbox__title-sub {
	/* リンクボックス内サブタイトル */
	font-size: 0.8rem;
}


/* ========== ブログパーツ　リンクカラム（link-col） ========== */

/* ----- リンクエリア ----- */
.p-link-col__link-area {
	/* カバーの調整 */
	padding: 0px;
	border-radius: 20px;
	transition: all 0.3s;
}
.p-link-col__link-area .swell-block-columns {
	/* カバー内のカラム余白調整 */
	padding: 2rem;
}
.p-link-col__btn {
	/* ボタン */
	position: relative;
	width: 50px;
	height: 50px;
	margin-left: auto;
	border-radius: 50%;
	background-color: #292929;
	transition: all 0.3s;
}
.p-link-col__btn:after {
	/* ボタン内の矢印 */
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 16px;
	width: 12px;
	height: 12px;
	margin: auto;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	transform: rotate(45deg);
	box-sizing: border-box;
}
.p-link-col__link-area:hover {
	/* カバーをホバー時に上に移動 */
	transform: translateY(-5px);
}
.p-link-col__link-area:hover .p-link-col__btn {
	/* カバーをホバー時にボタンを半透明に */
	opacity: 0.5;
}
.p-link-col__title {
	/* リンクエリア内タイトル */
	font-family: "Montserrat", sans-serif;
	font-weight: 800 !important;
	font-size: 1.5rem !important;
}


/* ========== Contact Form 7 フォーム設定（form01） ========== */
/* 出力ショートコードに「html_id="contact-form-01"」追加、固有IDで管理 */

/* ----- 入力エリア ----- */
#contact-form-01 .wpcf7-text,
#contact-form-01 .wpcf7-textarea {
	/* 通常時 */
	width: 100%;
	border-radius: 0.5rem;
	background-color: #fff;
}
#contact-form-01 .wpcf7-text:focus-visible,
#contact-form-01 .wpcf7-textarea:focus-visible{
	/* フォーカス時 */
	outline:1px solid #292929; /* デフォルトは罫線が太すぎのため調整 */
}

/* ----- ラベル ----- */
#contact-form-01 p {
	/* 段落上部に余白 */
	margin-bottom: 1.5rem;
}
#contact-form-01 .label {
	/* 項目ラベル */
	font-size: 1rem;
}
#contact-form-01 .label-required {
	/* 必須ラベル */
	font-size: 0.7rem;
	padding: 1px 5px 2px 5px;
	background:#292929;
	color:#fff;
	border-radius:2px;
	margin-left:8px;
	/*position:relative;*/
	/*bottom:1px;*/
}
#contact-form-01 .label-free {
	/* 任意ラベル */
	font-size: 0.7rem;
	padding: 1px 5px 2px 5px;
	background:#bbb;
	color:#fff;
	border-radius:2px;
	margin-left:8px;
}
#contact-form-01 .wpcf7-not-valid-tip {
	/* エラージ表示ラベル（入力欄直下） */
	font-size: 0.7rem;
}

/* ----- ボタン ----- */
#contact-form-01 .wpcf7-submit {
	border: 1px solid #292929;
	border-radius: 999px;
	padding: 0.5rem 3rem;
	width: 350px;
	background: #fff;
	transition: all 0.3s;
}
#contact-form-01 .wpcf7-submit:hover {
	background: #292929;
	color: #fff;
}
#contact-form-01 .submit-area {
	text-align: center;
}
#contact-form-01 .label-policy {
	/* ボタン上部ポリシー文 */
	font-size: 0.9rem;
}
#contact-form-01 .wpcf7-spinner {
	/* 送信中のローディングスピナーをボタンの中に調整（ボタンも中央寄せになる） */
	background-color: #00000000;
	opacity: 1.0;
	margin: 0 0 -5px -36px ;
}

/* ----- メッセージ ----- */
#contact-form-01 .wpcf7-response-output {
	border-width: 1px;
	border-radius: 0.5rem;
	margin: 2rem 0;
}



/* ==================================================
	Utility
	スタイル調整
 * ================================================== */

/* ----- レスポンシブ非表示設定 ----- */
/*SWELL非表示ブレークポイント960pxのみのため、600pxを追加*/

	/*スマホのみ表示*/
@media(min-width:600px){
	.u-only-sp {
		display: none !important;
	}
}
	/*PCとタブレットのみ表示*/
@media(max-width:601px){
	.u-only-pc-tab {
		display: none !important;
	}
}


/* ----- image ----- */
.u-img-fit-contain img { object-fit: contain !important; } /*画像を縦横比を維持したまま表示領域にフィット*/

/* ----- width ----- */
.u-mw-80 { max-width: 800px; }

/* ----- margin ----- */
.u-m-a { margin: 0 auto; }

/* ----- padding----- */
.u-p-0 { padding: 0 !important;}
.u-p-5 { padding: 0.5rem !important;}
.u-p-10 { padding: 1rem !important;}

/* ----- line-height ----- */
.u-ta-c { text-align: center; }

/* ----- line-height ----- */
.u-lh-12 { line-height: 1.2em; } /*行間1.2emを指定（※テーマ段落デフォルト1.6em） */

/* ----- border-radius ----- */
.u-r-tl-10 { border-top-left-radius: 1rem; } /*要素の左上角*/
.u-r-tr-10 { border-top-right-radius: 1rem; } /*要素の上角*/
.u-r-br-10 { border-bottom-right-radius: 1rem; } /*要素の右下角*/
.u-r-bl-10 { border-bottom-left-radius: 1rem; } /*要素の左下角*/

.u-r-l-30 img,
.u-r-l-30 video {
	border-radius: 3rem 0 0 3rem;
} /*要素の左側の両角*/
.u-r-r-30 img,
.u-r-r-30 video{
	border-radius: 0 3rem 3rem 0;
} /*要素の左側の両角*/


/* --------------------------------------------------
 SWEEL標準搭載CSS

----- font -----
.u-fz-xs { font-size: 0.75em !important; }
.u-fz-s { font-size: 0.9em !important; }
.u-fz-normal { font-size: 1rem !important; }
.u-fz-m { font-size: 1.1em !important; }
.u-fz-l { font-size: 1.25em !important; }
.u-fz-xl { font-size: 1.6em !important; }
.u-fw-bold { font-weight: 700 !important; }
.u-fw-normal { font-weight: 400 !important; }
.u-fw-lighter { font-weight: lighter !important; }
.u-fs-italic { font-style: italic !important; }
----- margin -----
.u-mb-0 { margin-bottom: 0 !important; }
.u-mb-5 { margin-bottom: 0.5em !important; }
.u-mb-10 { margin-bottom: 1em !important; }
.u-mb-15 { margin-bottom: 1.5em !important; }
.u-mb-20 { margin-bottom: 2em !important; }
.u-mb-25 { margin-bottom: 2.5em !important; }
.u-mb-30 { margin-bottom: 3em !important; }
.u-mb-40 { margin-bottom: 4em !important; }
.u-mb-50 { margin-bottom: 5em !important; }
.u-mt-0 { margin-top: 0 !important; }
.u-mt-5 { margin-top: 0.5em !important; }
.u-mt-10 { margin-top: 1em !important; }
.u-mt-15 { margin-top: 1.5em !important; }
.u-mt-20 { margin-top: 2em !important; }
.u-mt-25 { margin-top: 2.5em !important; }
.u-mt-30 { margin-top: 3em !important; }
.u-mt-40 { margin-top: 4em !important; }
.u-mt-50 { margin-top: 5em !important; }
----- padding -----
.u-pb-0 { padding-bottom: 0 !important; }
.u-pb-5 { padding-bottom: 0.5em !important; }
.u-pb-10 { padding-bottom: 1em !important; }
.u-pb-15 { padding-bottom: 1.5em !important; }
.u-pb-20 { padding-bottom: 2em !important; }
.u-pb-25 { padding-bottom: 2.5em !important; }
.u-pt-0 { padding-top: 0 !important; }
.u-pt-5 { padding-top: 0.5em !important; }
.u-pt-10 { padding-top: 1em !important; }
.u-pt-15 { padding-top: 1.5em !important; }
.u-pt-20 { padding-top: 2em !important; }
.u-pt-25 { padding-top: 2.5em !important; }
----- text -----
.u-ta-c { text-align: center; }
.u-ta-l { text-align: left; }
.u-ta-r { text-align: right; }
.u-nowrap { white-space: nowrap; }
----- display -----
.u-none { display: none !important; }
.u-block { display: block !important; }
.u-flex--aic { display: flex; align-items: center; }

 * -------------------------------------------------- */


/*  ==================================================
	各ページのカスタムCSS設定情報（各ページにコメント記載できない為ここに情報記載）

	----- 固定ページ（home以外） -----
		- タイトル非表示（.c-pageTitle）
		- タイトル下（メインコンテンツ上部マージン）をなくす（.l-mainContent__inner>.post_content）
		- ページ上部余白なくす（.l-content調整）
		- 


	----- 制作実績ページ（カスタム投稿ページ） -----
		- 日付とタイトルのヘッダー非表示（.p-articleHead）
		- ヘッダー下のカテゴリーと投稿/、更新日付を非表示（.p-articleMetas）
		- ページ最下部の関連記事エリアの「関連記事」タイトルを非表示（.l-articleBottom__section h2）
		- スマホ表示時のヘッダー背景非表示（@media (max-width: 900px) .l-content）
		- 

 * ================================================== */


/* ==================================================
	JavaScript（JS用クラス）
	JS動作用のクラス定義・スタイル調整
 * ================================================== */

body {
    transition: background-color 0.5s, color 0.5s; /* 背景色と文字色の変更にスムーズなトランジションを追加 */
}
.js-bg1-sec1 { } /* 背景を「白」に帰るセクションに付与 */
.js-bg1-sec2 { } /* 背景を「黒」に帰るセクションに付与 */
.js-bg1-sec3 { } /* 背景を「白」に帰るセクションに付与 */





/* ---------- 以下、テストCSS一時置き ---------- */







/*-----------------------------------------------------*/