@charset "UTF-8";
/*
*
* product_module_addition.css
* 商品ページ共通モジュールを個別に上書き・追加するCSS
* 初期値はデフォルトのスタイルを当てていますので、値を変更してご使用下さい
*
*/
:root {
    --base-color: #F39801;
    --hover-color: #F7B74D;
    --bg-color: #FEFAF2;
    --heading-color: #F39801;
}


/* --------------------------------
  ブランドカラーを使用
　使用するときはコメント削除してください
-------------------------------- */
/*
.hs-c-overview{
 // とは
    background-color: var(--bg-color) !important;
}
//３つのポイント、他商品と組み合わせ
.hs-pointcard__image,
.hs-alignment-box__icon{
    background-color: var(--base-color);
}
*/

/*ローカルナビにメガメニューを設置する場合
    /asset/css/localheader.html 内のクラスhs-navigation-mega--default 削除
    <div id="hs-navigation-nav01" class="hs-navigation-mega hs-navigation-mega--default" aria-hidden="true">
    →<div id="hs-navigation-nav01" class="hs-navigation-mega"  aria-hidden="true">
*/

/* --------------------------------
もっと知る　基本は--bg-color
-------------------------------- */
/*
.hs-content-footer {
    background-color: var(--base-color);
}
*/

/* --------------------------------
  背景の指定がある場所でベースの背景カラーを使用したい場合は
  .u-background--type-brand（ブランドカラー）
　.u-background--type-brand-bg（ブランド背景カラー）
　クラスを使用
-------------------------------- */
/*
*
* 〇〇〇〇〇〇
*
*/

/* --------------------------------
下層ページ ／ 共通
-------------------------------- */
.spNone {
    display: none;
}
@media (min-width: 768px) {
    .spNone {
        display: block;
    }
}

@media (min-width: 768px) {
    .br-sp{
        display: none;
    }
}

/* --------------------------------
トップページ
-------------------------------- */
.hs-carousel-hero .hs-carousel-hero__slider-item--title-black .hs-carousel-hero__heading, .hs-carousel-hero .hs-carousel-hero__slider-item--title-black .hs-carousel-hero__lead, .hs-carousel-hero .hs-carousel-hero__item--title-black .hs-carousel-hero__heading, .hs-carousel-hero .hs-carousel-hero__item--title-black .hs-carousel-hero__lead,.hs-main-visual__heading {
    color: #633200;
}

.hs-carousel-hero .hs-carousel-hero__inner {
    top: 33%;
}
@media (min-width: 768px) {
    .hs-carousel-hero .hs-carousel-hero__inner {
        top: -40px;
    }
    
}

/* --------------------------------
下層ページ ／ 上部画像
-------------------------------- */
.hs-main-visual {
    background-image: url(/lysithea_job/asset/images/common/kv_img_lower_sm.png);
}
@media (min-width: 768px) {
    .hs-main-visual {
        background-image: url(/lysithea_job/asset/images/common/kv_img_lower_lg.png);
        background-position: 65% center;
    }
}
@media (min-width: 850px) {
    .hs-main-visual {
        background-image: url(/lysithea_job/asset/images/common/kv_img_lower_lg.png);
        background-position: 60% center;
    }
}
@media (min-width: 930px) {
    .hs-main-visual {
        background-image: url(/lysithea_job/asset/images/common/kv_img_lower_lg.png);
        background-position: center;
    }
}

/* --------------------------------
バナー
-------------------------------- */
.banner .hs-l-grid.hs-l-grid--column-2.hs-l-grid--column-gap-xl.hs-l-grid--row-gap-xs {
    display: flex;
    flex-direction: column;
    row-gap: 0;
    align-items: center;
}
@media (min-width: 768px) {
    .banner .hs-l-grid.hs-l-grid--column-2.hs-l-grid--column-gap-xl.hs-l-grid--row-gap-xs {
        display: flex;
        justify-content: center;
        gap: 10px;
        flex-direction: row;
    }
}

.banner .hs-l-contents.hs-l-contents--max-md.hs-l-contents--gutters-md.hs-l-spacing-xl {
    height: auto;
}

.banner .hs-l-contents.hs-l-contents--max-md.hs-l-contents--gutters-md {
    height: 90px;
    padding: 0;
    margin: 0;
}
@media (min-width: 768px) {
    .banner .hs-l-contents.hs-l-contents--max-md.hs-l-contents--gutters-md{
        height: 100px;
    }
}

@media (min-width: 890px) {
    .banner .hs-l-contents.hs-l-contents--max-md.hs-l-contents--gutters-md{
        height: 120px;
    }
}

.banner .hs-l-contents.hs-l-contents--max-md.hs-l-contents--gutters-md.u-align-right.hs-l-spacing-xs {
    height: auto;
}

.banner .hs-l-contents.hs-l-contents--max-md.hs-l-contents--gutters-md img{
    height: 100%;
    width: auto;
}

.banner .hs-l-spacing-xl {
    margin-top: 9.466667vw !important;
}
@media (min-width: 768px) {
    .banner .hs-l-spacing-xl {
        margin-top: 0 !important;
    }
}

/* --------------------------------
リシテア/就業管理クラウドサービス 3つの特長
-------------------------------- */
.section1 .hs-l-contents.hs-l-contents--max-md.hs-l-spacing-xs {
    display: flex;
    flex-direction: column;
    row-gap: 40px;
}

/* --------------------------------
リシテア/就業管理クラウドサービス 3つの特長の表
-------------------------------- */
.hs-table-block.hs-table-block--type-default .hs-table-block__table td {
    text-align: center;
    vertical-align: middle;
}

.hs-table-block.hs-table-block--type-default .hs-table-block__table tbody tr th {
    text-align: center;
}

/* --------------------------------
seminer
-------------------------------- */

.sem_left td{
    text-align: left !important;
}

/* --------------------------------
column
-------------------------------- */

.col_left td{
    text-align: left !important;
}

/* --------------------------------
レイアウト用
-------------------------------- */
.list-left {
    margin-left: 20px;
}

/* --------------------------------
機能
-------------------------------- */
.u-text-ju {
    /*text-align: justify;*/
}
@media (min-width: 768px) {
    .u-text-ju {
        /*text-align: unset;*/
    }
}

@media (max-width: 767px) {
    #lj .hs-l-contents-flex.hs-l-contents-flex--gap-sm .hs-l-contents-flex__controlled-item--column-3 img,
    #lj-function .hs-l-contents-flex.hs-l-contents-flex--gap-sm .hs-l-contents-flex__controlled-item--column-3 img {
        min-width: 70px;
        max-width: 70px;
    }
}

/* --------------------------------
導入事例
-------------------------------- */
@media (min-width: 768px) {
    .hs-c-tag {
        font-size: 0.75em;
        padding: 0.3125em 0.8em 0.25em;
    }
}

@media (min-width: 768px) {
    .lg-l-flex {
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }
}

@media (min-width: 768px) {
    .lg-l-flex .hs-c-heading-level-5 + .hs-filter-trigger .hs-filter-trigger__list {
        margin-top: 0;
    }
}

@media (min-width: 768px) {
    .lg-l-flex .hs-c-heading-level-5__heading {
        width: 110px;
    }
}

@media (min-width: 768px) {
  #lj .hs-c-border-box.hs-c-border-box--padding-block-xs,
  #lj-case .hs-c-border-box.hs-c-border-box--padding-block-xs {
    padding-left: 19px;
    padding-right: 19px;
  }
}

@media print, screen and (min-width: 768px) {
  .lysithea-filter-case__select__category01 .lysithea-filter-case__select__list > li {
    width: auto!important;
  }
}

#lj-case .lj-case-img {
    width: 100%;
}

#lj-case .hs-l-grid--column-3 .hs-l-flex {
    margin-top: 20px;
}

/* --------------------------------
料金プラン
-------------------------------- */
@media (min-width: 768px) {
    .section4 .hs-l-contents.hs-l-contents--gutters-md {
        padding-left: 0;
        padding-right: 0;
    }
}

/* --------------------------------
CTA 勤怠管理のさまざまなお悩み、リシテアで解決しませんか？
-------------------------------- */
.u-text-lj {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 54px;
}

.hs-c-card.hs-c-card--border {
  display: block;
}

/* --------------------------------
CTA 導入フロー
-------------------------------- */
.u-background--type-brand-bg {
    background-color: var(--base-color);
}

@media screen and (min-width: 768px) {
    .hs-c-color-box.hs-c-color-box--padding-inline-lg {
        padding-left: 30px;
        padding-right: 30px;
    }
}

/* --------------------------------
見積りを依頼する
-------------------------------- */
.hs-c-button.hs-c-button--estimate::before {
    content: "￥";
    display: inline-block;
    margin-right: 1em;
    position: initial;
    padding-top: 1px;
    width: 1.6em;
    min-width: 1.6em;
    height: 1.6em;
    background: #fff;
    background-image: none !important;
    border: none;
    border-radius: 50%;
    font-size: 1.6em;
    color: var(--base-color);
    line-height: 1.7;
    text-align: center;
    -webkit-transform: none;
    transform: none;
    font-weight: bold;
}

/* --------------------------------
導入事例
-------------------------------- */
@media (max-width: 767.98px) {
    .lysithea-filter-case {
        margin-top: 24px;
    }
}

@media (max-width: 767.98px) {
    .lysithea-filter-case__select__inner {
        border: 1px solid #bbb;
    }
}
@media print, screen and (min-width: 768px) {
    .lysithea-filter-case__select__inner {
        display: flex;
        border: 1px solid #bbb;
    }
}

@media (max-width: 767.98px) {
    .lysithea-filter-case__select__category01, .lysithea-filter-case__select__category02, .lysithea-filter-case__select__category03 {
        width: 100%;
    }
}

@media (max-width: 767.98px) {
    .lysithea-filter-case__select__category02, .lysithea-filter-case__select__category03 {
        border-top: 1px solid #bbb;
    }
}

@media print, screen and (min-width: 768px) {
    .lysithea-filter-case__select__category01 {
        width: 30%;
    }
}

@media print, screen and (min-width: 768px) {
    .lysithea-filter-case__select__category02 {
        width: 50%;
        border-left: 1px solid #bbb;
    }
}
/*----
@media print, screen and (min-width: 768px) {
    .lysithea-filter-case__select__category03 {
        width: 17%;
        border-left: 1px solid #bbb;
    }
}
---*/
@media print, screen and (min-width: 768px) {
    .lysithea-filter-case__select__category04 {
        width: 20%;
        border-left: 1px solid #bbb;
    }
}

@media (max-width: 767.98px) {
    .lysithea-filter-case__select__title {
        display: flex;
        align-items: center;
        padding: 10px 20px 10px;
        border-bottom: 1px solid #bbb;
        background-color: #f2f2f2;
        color: #000;
        font-size: 4vw;
        font-weight: bold;
        line-height: 1.7;
    }
}
@media print, screen and (min-width: 768px) {
    .lysithea-filter-case__select__title {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 12px 10px 8px;
        border-bottom: 1px solid #bbb;
        background-color: #f2f2f2;
        color: #000;
        font-size: 0.9375rem;
        font-weight: bold;
        line-height: 1.7;
    }
}

@media (max-width: 767.98px) {
    .lysithea-filter-case__select__list {
        padding: 8px 20px 6px;
        background-color: #fff;
    }
}
@media print, screen and (min-width: 768px) {
    .lysithea-filter-case__select__list {
        display: flex;
        flex-wrap: wrap;
        column-gap: 15px;
        padding: 13px 20px 10px;
        background-color: #fff;
    }
}

@media print, screen and (min-width: 768px) {
    .lysithea-filter-case__select__category01 .lysithea-filter-case__select__list > li {
        width: calc((100% -(18px* 2)) / 4);
    }
}

@media (max-width: 767.98px) {
    .lysithea-filter-case__select__list > li > input {
        display: none;
        margin: 0;
    }
}
@media print, screen and (min-width: 768px) {
    .lysithea-filter-case__select__list > li > input {
        display: none;
        margin: 0;
    }
}

@media (max-width: 767.98px) {
    .lysithea-filter-case__select__list > li > label {
        position: relative;
        width: 100%;
        box-sizing: border-box;
        display: inline-block;
        padding: 0 0 0 24px;
        font-size: 3.7333333333vw;
        line-height: 1.7;
    }
}
@media print, screen and (min-width: 768px) {
    .lysithea-filter-case__select__list > li > label {
        position: relative;
        width: 100%;
        box-sizing: border-box;
        display: inline-block;
        padding: 0 0 0 24px;
        font-size: 0.875rem;
        line-height: 1.5;
        cursor: pointer;
    }
}

@media (max-width: 767.98px) {
    .lysithea-filter-case__select__list > li > label::before {
        content: "";
        position: absolute;
        display: block;
        top: 2.6666666666vw;
        left: 0;
        width: 18px;
        height: 18px;
        margin-top: -9px;
        border: 1px solid #bcbcbc;
        background: #fff;
    }
}
@media print, screen and (min-width: 768px) {
    .lysithea-filter-case__select__list > li > label::before {
        content: "";
        position: absolute;
        display: block;
        top: 10px;
        left: 0;
        width: 18px;
        height: 18px;
        margin-top: -9px;
        border: 1px solid #bcbcbc;
        background: #fff;
    }
}

@media (max-width: 767.98px) {
    .lysithea-filter-case__select__list > li > label::after {
        content: "";
        position: absolute;
        opacity: 0;
        display: block;
        top: 2.83vw;
        left: 4px;
        width: 9px;
        height: 13px;
        margin-top: -9px;
        border: 4px solid #bcbcbc;
        border-style: solid;
        border-width: 0 4px 4px 0;
        border-color: transparent #bcbcbc #bcbcbc transparent;
        transform: rotate(45deg);
    }
}
@media print, screen and (min-width: 768px) {
    .lysithea-filter-case__select__list > li > label::after {
        content: "";
        position: absolute;
        opacity: 0;
        display: block;
        top: 10px;
        left: 4px;
        width: 9px;
        height: 13px;
        margin-top: -9px;
        border: 4px solid #bcbcbc;
        border-style: solid;
        border-width: 0 4px 4px 0;
        border-color: transparent #bcbcbc #bcbcbc transparent;
        transform: rotate(45deg);
    }
}

@media print, screen and (max-width: 767.98px) {
    .lysithea-filter-case__select__list > li > input:checked + label::after {
        opacity: 1.0;
    }
}
@media print, screen and (min-width: 768px) {
    .lysithea-filter-case__select__list > li > input:checked + label::after {
        opacity: 1.0;
    }
}

@media (max-width: 767.98px) {
    .lysithea-filter-case__note {
        position: relative;
        margin-top: 8px;
        padding-left: 20px;
        font-size: 3.2vw;
        line-height: 2.0;
        max-inline-size: max-content;
        margin-inline: auto 0;
    }
}
@media print, screen and (min-width: 768px) {
    .lysithea-filter-case__note {
        position: relative;
        margin-top: 8px;
        padding-left: 25px;
        font-size: 0.875rem;
        line-height: 1.7;
        max-inline-size: max-content;
        margin-inline: auto 0;
    }
}

@media (max-width: 767.98px) {
    .lysithea-filter-case__note__mark {
        position: absolute;
        top: 0;
        left: 0;
    }
}
@media print, screen and (min-width: 768px) {
    .lysithea-filter-case__note__mark {
        position: absolute;
        top: 0;
        left: 0;
    }
}

@media (max-width: 767.98px) {
    .lysithea-filter-case__search {
        margin-top: 14px;
        text-align: center;
    }
}
@media print, screen and (min-width: 768px) {
    .lysithea-filter-case__search {
        margin-top: 12px;
        text-align: center;
    }
}

@media (max-width: 767.98px) {
    .lysithea-filter-case__search__button {
        position: relative;
        display: inline-block;
        width: 100%;
        min-height: 57px;
        padding: 16px 45px 13px;
        background-color: #333;
    }
}
@media print, screen and (min-width: 768px) {
    .lysithea-filter-case__search__button {
        position: relative;
        display: inline-block;
        width: 332px;
        min-height: 60px;
        padding: 18px 45px 15px;
        background-color: #333;
        transition: opacity 0.2s cubic-bezier(0.39, 0.575, 0.565, 1);
    }
}

@media print, screen and (min-width: 768px) {
    .lysithea-filter-case__search__button:hover {
        opacity: 0.7;
    }
}

@media (max-width: 767.98px) {
    .lysithea-filter-case__search__label {
        color: #fff;
        font-size: 3.7333333333vw;
        line-height: 1.2;
    }
}
@media print, screen and (min-width: 768px) {
    .lysithea-filter-case__search__label {
        color: #fff;
        font-size: 0.875rem;
        line-height: 1.2;
    }
}

@media (max-width: 767.98px) {
    .lysithea-filter-case__search__button::after {
        content: "";
        position: absolute;
        right: 20px;
        top: 50%;
        width: 17px;
        height: 17px;
        margin-top: -8px;
        background: url(/lysithea_job/asset/images/cases/case_icon_01.svg) no-repeat center center / 17px auto;
    }
}
@media print, screen and (min-width: 768px) {
    .lysithea-filter-case__search__button::after {
        content: "";
        position: absolute;
        right: 20px;
        top: 50%;
        width: 17px;
        height: 17px;
        margin-top: -8px;
        background: url(/lysithea_job/asset/images/cases/case_icon_01.svg) no-repeat center center / 17px auto;
    }
}


/*------------
2025.10 追加
-------------*/
@media (max-width: 767.98px) {
	.is-pc {
		display: none;
	}
}
@media (min-width: 768px) {
	.br-sp {
		display: none;
	}
}

img.is-pc {
	display: none;
}
@media (min-width: 768px) {
	img.is-sp {
		display: none;
	}
	img.is-pc {
		display: block;
	}
}

/* --------------------------------
ナビゲーション
-------------------------------- */
@media screen and (min-width: 768px) {
	.hs-navigation-mega--default.hs-navigation-mega {
		opacity: 1 !important;
		border-top-color: var(--bg-color) !important;
		background-color: var(--bg-color) !important;
		color: #fff !important;
	}
}
@media screen and (min-width: 768px) {
	.hs-navigation-mega--default.hs-navigation-mega a {
		color: #333 !important;
	}
}
.hs-l-column.hs-l-column--5 {
	-webkit-column-count: 5;
	-moz-column-count: 5;
	column-count: 5;
}

/* --------------------------------
勤怠管理ソリューションが選ばれる理由
-------------------------------- */
.hs-l-contents-flex.hs-l-contents-flex--gap-lg .hs-l-contents-flex__controlled-item.hs-l-contents-flex__controlled-item--column-3 img {
  width: 100%;
  aspect-ratio: 3 / 2;
	object-fit: cover;
}
.banner
	.hs-l-contents.hs-l-contents--max-md.hs-l-contents--gutters-md.hs-l-spacing-xs {
	height: auto;
}
.icon-width {
	min-width: 60px;
}
@media screen and (min-width: 768px) {
	.icon-width {
		min-width: 80px;
	}
}
@media (max-width: 767.98px) {
	.icon-text {
		font-size: 4.2666666667vw;
	}
}
.reason-section.u-background--type-brand-bg {
	background-color: #f2f2f2 !important;
	padding: 35px 0 25px;
}
.reason-section .hs-c-heading-level-2 {
	border-bottom: none;
}
.reason-section .hs-c-heading-level-2::before {
	display: none;
}
.hs-pointunit__wrap {
	background-color: #fff;
}
.last-section .hs-c-heading-level-2 {
	border-bottom: none;
}
.last-section .hs-c-heading-level-2::before {
	display: none;
}
.hs-accordion-item__icon::after {
	-webkit-transform: rotate(0deg);
	transform: rotate(0deg);
}
.is-active .hs-accordion-item__icon::after {
	-webkit-transform: rotate(90deg);
	transform: rotate(90deg);
}
.hs-reason-list-wrap {
  display: flex;
}
@media (max-width: 767.98px) {
	.hs-reason-list-wrap {
    flex-direction: column;
  }
}

/* --------------------------------
製品一覧
-------------------------------- */
@media (min-width: 768px) {
	.products .hs-l-contents-flex__controlled-item.hs-l-contents-flex__controlled-item--column-4 {
		width: 17.320755%;
		min-width: 17.320755%;
	}
}

.hs-l-products-icon {
	max-width: 50%;
	margin: auto;
}
@media (min-width: 768px) {
	.hs-l-products-icon {
		max-width: unset;
		margin: unset;
	}
}

/* --------------------------------
就業管理（オンプレミス）
-------------------------------- */
.im_pd10 {
    padding: 20px 10px;
}

p.padding-right {
	padding-right: 10px;
}
.hs-l-contents-flex.hs-l-contents-flex--gap-lg p.u-text-md.u-align-right {
	padding-top: 10px;
	font-size: 80% !important;
}
.hs-catalog-download__text-custom {
	max-width: 450px;
	margin: 0 auto;
}
.hs-c-process__item{
	padding: 2rem !important;
}

/* --------------------------------
導入・サポート
-------------------------------- */
.support .hs-c-underline-list > li:last-child {
	border-bottom: none;
}

/* --------------------------------
料金プラン
-------------------------------- */
.hs-price-icon__image {
	margin-left: 24%;
	max-width: 60%;
}
@media (min-width: 768px) {
	.hs-price-icon__image {
		margin-left: 0;
		max-width: unset;
	}
}

.hs-price-link-button {
	margin-left: -11%;
	margin-top: 7%;
}
@media (min-width: 768px) {
	.hs-price-link-button {
		margin-left: 0;
		margin-top: 0;
	}
}