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

:root {
	--gradient-1: linear-gradient(to right, var(--color_main), #1fc7a8);
	--gradient-2: linear-gradient(to right, #43c8cd, #c3fcca);
	--color-white: #fff;
}

/* ==================================================
  コンポーネント（ブロック単位）
================================================== */

/* --------------- 見出し装飾 --------------- */
.wp-block-heading.heading--circle {
	padding-left: 1.5em;
}

.wp-block-heading.heading--circle::before {
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	width: 1em;
	height: 1em;
	border-radius: 50%;
	background: none;
	background-color: var(--color_main);
	content: "";
}

/* --------------- 見出し付随の英語ラベル --------------- */
.section-label {
	font-size: 5em;
}

@media not (min-width: 600px) {
	.section-label {
		font-size: 2em;
	}
}

/* --------------- フォント切り替え --------------- */
.typeface-noto-serif {
	font-family: "Noto Serif JP", serif;
}

.typeface-eng {
	font-family: "Nothing You Could Do", cursive;
}

/* --------------- ボタン --------------- */
.skew-btn a {
	transform: skewX(-20deg);
	border-radius: 0;
	border-width: 3px;
	background-color: var(--color-white);
}

.skew-btn a>* {
	transform: skewX(20deg);
}

/* --------------- グラデーション背景 --------------- */
.gradient-box {
	background-image: var(--gradient, none);
}

.gradient-box--1 {
	--gradient: var(--gradient-1);
	color: var(--color-white);
}

.gradient-box--2 {
	--gradient: var(--gradient-2);
}

/* --------------- 明るい影のボックス --------------- */
.glow-box {
	border-radius: var(--glow-radius, 50px);
	box-shadow: 0 0 30px #b0e3c6;
}

/* --------------- 影付きのボックス --------------- */
.shadow-box {
	border-radius: var(--shadow-radius, 50px);
	box-shadow: 4px 4px var(--shadow-color, rgb(0 0 0 / 10%));
}

/* --------------- グリッドスタイル --------------- */
.grid-block .swell-block-columns__inner {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
}

@media not (min-width: 600px) {
	.grid-block .swell-block-columns__inner {
		grid-template-columns: 1fr;
	}
}

.subgrid-block {
	display: grid;
	grid-template-rows: subgrid;
	grid-row: var(--subgrid-span, auto);
}

/* --------------- 情報リスト --------------- */
.info-list {
	align-items: stretch;
	row-gap: 0.5em;
}

.info-list :is(.info-list__term, .info-list__desc) {
	display: flex;
	align-items: center;
	padding: 0.5em 1em;
}

.info-list .info-list__term {
	padding-left: 0.5em;
	border-bottom: 2px solid var(--color_main);
}

.info-list .info-list__term::after {
	content: none;
}

.info-list .info-list__desc {
	border-bottom: 2px solid #d9d9d9;
}

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

/* --------------- ウィジェットエリア --------------- */
.head-info .swell-block-columns__inner {
	align-items: center;
}

.head-info .head-info__col {
	width: auto;
}

.head-info__tel .swl-inline-icon {
	color: #f08441;
}

.head-info__msg {
	padding: 0.5em 1em;
	border-radius: 20px;
}

/* --------------- sp開閉メニュー --------------- */
.c-widget__title.-spmenu {
	display: none;
}

.p-spMenu__nav {
	display: none;
}

.sp-menu__msg .swl-inline-icon {
	color: #f08441;
}

.sp-menu__menu.swell-block-linkList .swell-block-linkList__text {
	margin-inline: auto;
}

.sp-menu__info {
	max-width: 60%;
	padding: 0.5em 1em;
	margin-inline: auto;
	border-radius: 10px;
}

.l-header__menuBtn .c-iconBtn__icon {
	padding: 7px;
	border-radius: 10px;
	background-image: var(--gradient-1);
	color: var(--color-white);
}

/* ==================================================
  メインビジュアル
================================================== */

@media (min-width: 600px) {
	.p-mainVisual.-margin-on {
		padding-inline: 3em;
	}
}

.p-mainVisual__img {
	object-position: 50% 25%;
	border-radius: 30px;
}

.p-mainVisual__textLayer {
	max-width: none;
}

.p-mainVisual__textLayer .p-blogParts {
	position: static;
}

/* --------------------------------------------------
  キャッチコピー
  - bottomはループテキストの高さに依存
-------------------------------------------------- */
.mv-txt-catch.has-background {
	position: absolute;
	bottom: calc(var(--swl-fz--root) * 5 * 1.8);
	padding: 0.25em;
	border-radius: 30px;
	font-size: 3em;
}

@media not (min-width: 900px) {
	.mv-txt-catch.has-background {
		bottom: calc(var(--swl-fz-root) * 3 * 1.8);
		border-radius: 10px;
		font-size: 1.3em;
	}
}

/* --------------- ループテキスト --------------- */
.mv-txt-loop {
	position: absolute;
	bottom: 0;
	left: 0;
	font-size: 5em;
}

@media not (min-width: 900px) {
	.mv-txt-loop {
		font-size: 3em;
	}
}

.mv-txt-loop .swell-block-columns__inner {
	flex-wrap: nowrap;
}

.mv-txt-loop .swell-block-column {
	padding-left: 25px;
	animation: mv-loop 20s infinite linear;
}

.mv-txt-loop__txt {
	white-space: nowrap;
}

@keyframes mv-loop {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-100%);
	}
}

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

.l-footer__foot {
	padding-bottom: 0;
}

@media not (min-width: 600px) {
	.l-footer__nav {
		max-width: 50%;
		margin-inline: auto;
	}

	.l-footer__nav li {
		width: 40%;
		text-align: center;
	}
}

.copyright {
	position: absolute;
	left: calc(50% - 50vw);
	width: 100%;
	padding-block: 0.5em;
	background-color: var(--color_main);
	color: var(--color-white);
}

/* ==================================================
  ページトップへ戻るボタン
================================================== */

.p-fixBtnWrap {
	bottom: 2.5em;
}

/* --------------- ボタン部分 --------------- */
.c-fixBtn {
	position: relative;
	transform-origin: 50% -10%;
	width: 100px;
	height: auto;
	aspect-ratio: 5/2;
	border-radius: 10px;
	border: none;
	background: none;
	background-image: var(--gradient-1);
	color: var(--color-white);
	opacity: 1;
	overflow: visible;
}

@media (min-width: 960px) {
	.c-fixBtn {
		width: 150px;
		border-radius: 20px;
	}
}

.hov-bg-main:is(:hover, :focus-visible) {
	animation: fixBtn-swing 1s ease-in-out;
}

@keyframes fixBtn-swing {
	0% {
		transform: rotate(0);
	}
	20% {
		transform: rotate(-7deg);
	}
	40% {
		transform: rotate(7deg);
	}
	60% {
		transform: rotate(-7deg);
	}
	80% {
		transform: rotate(7deg);
	}
	100% {
		transform: rotate(0);
	}
}

/* --------------- 画像設置 --------------- */
.c-fixBtn::before {
	position: absolute;
	bottom: 75%;
	width: 65px;
	aspect-ratio: 800/1054;
	background: url(https://hirata-bankin.com/wp-content/uploads/2026/02/page_top_button.png) no-repeat center/cover;
	content: "";
}

@media (min-width: 960px) {
	.c-fixBtn::before {
		width: 120px;
	}
}

.c-fixBtn__icon {
	display: none;
}

#pagetop .c-fixBtn__label {
	margin-top: 0;
	font-size: 1em;
}

/* ==================================================
  ページスタイル
================================================== */

/* --------------------------------------------------
  トップページ
-------------------------------------------------- */

/* --------------- サービス紹介 --------------- */
.service-types__item {
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	aspect-ratio: 1;
}

.service-types__txt {
	font-size: 1.1em;
}

@media (min-width: 960px) {
	.service-types__txt {
		font-size: 1.5em;
	}
}

/* --------------- 選ばれる理由 --------------- */
.home-reason {
	color: var(--color-white);
}

.reason-head .swell-block-column {
	flex-grow: 1;
	width: auto;
}

.reason-head .reason-head__heading {
	font-size: 2em;
}

@media not (min-width: 600px) {
	.reason-head .reason-head__heading {
		font-size: 1.2em;
	}
}

.reason-item {
	max-width: 900px;
	margin-inline: auto;
}

@media not (min-width: 600px) {
	.reason-item--odd .swell-block-columns__inner {
		flex-direction: column-reverse;
	}
}

@media (min-width: 600px) {
	.reason-item .reason-item__col {
		width: auto;
	}
}

.reason-item__col--txt {
	flex: 1;
}

.reason-item .reason-item__heading::before {
	position: static;
	width: auto;
	height: auto;
	background: none;
	color: #e9ffd8;
	font-size: 2em;
}

@media not (min-width: 600px) {
	.reason-item .reason-item__heading::before {
		text-align: center;
	}
}

.reason-item .reason-item__heading--01::before {
	content: "01";
}

.reason-item .reason-item__heading--02::before {
	content: "02";
}

.reason-item .reason-item__heading--03::before {
	content: "03";
}

/* --------------- 部門紹介 --------------- */
.department-head .swell-block-columns__inner {
	align-items: center;
}

.department-head .swell-block-column {
	width: auto;
}

.department-units .department-unit {
	--subgrid-span: span 3;
	row-gap: 0;
	width: auto;
}

.department-unit__head {
	position: relative;
	padding: 1em;
}

.department-unit__icon {
	position: absolute;
	right: -0.5em;
	bottom: 30%;
	width: clamp(75px, 6vw, 90px);
}

@media not (min-width: 600px) {
	.department-unit__icon {
		right: 0;
	}
}

/* --------------- 保険代理店 --------------- */
.home-insurance .insurance__heading {
	padding-block: 0.75em;
}

.home-insurance .insurance__heading::after {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 1em solid transparent;
	border-top-color: var(--color_main);
	content: "";
}

.insurance__emergency {
	font-size: 1.5em;
	word-break: keep-all;
}

@media (min-width: 900px) {
	.insurance__emergency {
		font-size: 2em;
	}
}

.insurance__emergency strong {
	border-bottom: 3px solid currentColor;
}

.insurance-feature {
	max-width: 900px;
	margin-inline: auto;
}

.insurance-feature .swell-block-columns__inner {
	justify-content: center;
}

.insurance-feature .swell-block-column {
	width: auto;
}

@media not (min-width: 900px) {
	.insurance-feature .swell-block-columns__inner {
		flex-direction: column-reverse;
	}

	.insurance-feature .swell-block-column {
		width: 100%;
	}
}

.insurance-info {
	--shadow-radius: 20px;
	--shadow-color: #b0e3c6;
	max-width: 900px;
	padding: 1.5em;
	margin-inline: auto;
	background-color: var(--color-white);
}

@media not (min-width: 900px) {
	.insurance-info .swell-block-columns__inner {
		margin-left: 0;
	}
}

.insurance-info__item:first-child {
	position: relative;
}

.insurance-info__item:first-child::after {
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	display: block;
	width: 3px;
	height: 80%;
	background-color: var(--color_main);
	content: "";
}

@media not (min-width: 900px) {
	.insurance-info .insurance-info__item {
		width: 100%;
		margin-left: 0;
	}

	.insurance-info__item:first-child {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 1.5em;
	}

	.insurance-info__item:first-child::after {
		position: static;
		transform: none;
		width: 65px;
		height: 3px;
	}

	.insurance-info__item p {
		max-width: fit-content;
		margin-inline: auto;
	}
}

.insurance-info__msg {
	word-break: keep-all;
}

.insurance-info__tel {
	position: relative;
	padding-left: 70px;
	font-size: 2em;
}

@media (min-width: 900px) {
	.insurance-info__tel {
		font-size: 2.5em;
	}
}

.insurance-info__tel strong {
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	width: 60px;
	border: 1px solid currentColor;
	text-align: center;
	font-size: 0.5em;
}

@media not (min-width: 900px) {
	.insurance-info__tel strong {
		font-size: 0.75em;
	}
}

.insurance-info__hours {
	padding-left: 70px;
}

/* --------------------------------------------------
  ギャラリー
  - 8枚周期でA/Bパターンを繰り返す
  - 4枚で花びら風デザイン
-------------------------------------------------- */
.petal-gallery__item {
	--diagonal-radius: 50px;
	border-radius: 0;
	overflow: hidden;
}
/* --------------- パターンA（1～4, 9～12, 17～20...） --------------- */
.petal-gallery__item:is(:nth-child(8n + 1), :nth-child(8n + 3), :nth-child(8n + 6), :nth-child(8n + 8)) {
	border-top-right-radius: var(--diagonal-radius);
	border-bottom-left-radius: var(--diagonal-radius);
}

/* --------------- パターンB（5～8, 13～16, 21～24...） --------------- */
.petal-gallery__item:is(:nth-child(8n + 2), :nth-child(8n + 4), :nth-child(8n + 5), :nth-child(8n + 7)) {
	border-top-left-radius: var(--diagonal-radius);
	border-bottom-right-radius: var(--diagonal-radius);
}

/* --------------- スマホ時は花びらを構成する4枚が変わる --------------- */
@media not (min-width: 900px) {
	.petal-gallery__item:is(:nth-child(8n + 3), :nth-child(8n + 6)) {
		border-radius: 0;
		border-top-left-radius: var(--diagonal-radius);
		border-bottom-right-radius: var(--diagonal-radius);
	}
	
	.petal-gallery__item:is(:nth-child(8n + 4), :nth-child(8n + 5)) {
		border-radius: 0;
		border-top-right-radius: var(--diagonal-radius);
		border-bottom-left-radius: var(--diagonal-radius);
	}
}

/* --------------------------------------------------
  会社概要ページ
-------------------------------------------------- */

/* --------------- ごあいさつ --------------- */
.about-greeting {
	background: url(https://hirata-bankin.com/wp-content/uploads/2026/02/greeting_bg_sp.png) no-repeat 50% 100%/cover;
	color: var(--color-white);
}

@media (min-width: 960px) {
	.about-greeting {
		background-image: url(https://hirata-bankin.com/wp-content/uploads/2026/02/greeting_bg_pc.png);
	}
}

/* --------------- データ --------------- */
.about-data {
	background-image: linear-gradient(to right, #43c8cd, #c3fcca);
	color: var(--color-white);
}

.data-head .swell-block-columns__inner {
	align-items: center;
}

.data-head .swell-block-column {
	width: auto;
}

.data-summary {
	max-width: 1000px;
	margin-inline: auto;
}

.data-summary .swell-block-columns__inner {
	justify-content: center;
}

.data-card {
	width: 100%;
	height: 100%;
	padding: 1.5em 2em;
	border-radius: 10px;
	box-shadow: 0 0 20px rgb(163 163 163 / 25%);
	background-image: linear-gradient(to right, var(--color-white) 62%, #dcffec 83%, #e9ffe6 100%);
	color: var(--color_text);
}

.data-card__value {
	width: fit-content;
	margin-inline: auto;
	font-size: clamp(30px, 6vw, 75px);
}

@media (min-width: 600px) {
	.data-card__value.pc_only {
		display: block!important;
	}

	.data-card__value.sp_only {
		display: none!important;
	}
}

/* --------------------------------------------------
  採用情報ページ
-------------------------------------------------- */

/* --------------- 魅力 --------------- */
.benefit-list__item {
	background-color: var(--color-white);
}

/* --------------- 仕事の内容 --------------- */
.job-description__overhang {
	position: absolute;
	bottom: -4em;
	left: 50%;
	transform: translate(-50%, 50%);
	width: calc(100% - var(--swl-fw_inner_pad, 0) * 2);
	border-radius: 20px;
}

@media not (min-width: 960px) {
	.job-description__overhang {
		bottom: -2em;
	}
}

/*
 * overhangで飛び出した分だけ下に余白を確保するためのスペーサー
 * - 1行の高さ * 行数 + 上下padding = overhang全体の高さ
 * - overhangは半分だけ飛び出すため。全高 / 2
*/
.job-description-spacer {
	height: calc((1em * 1.8 * var(--line-count, 1) + var(--swl-box_padding) * 2) / 2);
	margin-bottom: 0;
}

@media not (min-width: 960px) {
	.job-description-spacer {
		--line-count: 2;
	}
}

@media not (min-width: 600px) {
	.job-description-spacer {
		--line-count: 3;
	}
}

/* --------------- 募集要項 --------------- */
.requirement-tag {
	padding: 1em;
	border-radius: 30px;
}