@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 {
  --light-main-gray: #E4EBE9;
  --sub-green:#66bf61;
}
/* header ------------------------------------------------------------------*/
.w-header__inner{
	display: flex;
    gap: 10px;
    align-items: center;
}
.widget_bogo_language_switcher .w-header__title {
  display: none;
}
span.bogo-language-name {
    padding: 5px;
}

.bogo-language-switcher {
  display: flex;
  gap:5px;
}
ul.bogo-language-switcher.list-view::after {
    content: "";
    margin-left: 2px;
    width: 1px;
    height: auto;
    background-color: var(--color_text);
    order: 2;
}
li.vi.last {
    order: 3;
}
.bogoflags, .bogoflags-before:before{
	margin:0 !important;
	width:15px;
}
/* PCのみコンテンツを強制表示 */
@media(max-width:960px){
	.w-header.pc_{
		display:block !important;
	}
	.l-header__customBtn.sp_{
		display:none;
	}
}

/* フッター------------------------------------------------------------------ */
.l-footer__nav svg.svg-inline--fa.fa-facebook-f {
    background: #1877F2;
    color: #fff;
    width: 10px;
    height: 10px;
    padding: 2px;
    border-radius: 50%;
    margin-right: 2px;
}

/* タイトル ------------------------------------------------------------------*/
.title-group p{
	font-size:56px;
	line-height:1.4;
	color:var(--color_main);
}
@media(max-width:767px){
	.title-group p{
		font-size:40px;	
	}
}

/* TOP ------------------------------------------------------------------*/
.fw-column{
	padding:2rem 3rem 2rem 3rem;
}

/* ---------------------------------------
  About
---------------------------------------- */
#about::after{
	content: "";
    width: 90%;
    height: 58%;
    background-color: var( --light-main-gray);
    position: absolute;
    right: 0;
    bottom: 0;
	background: linear-gradient(to top, #E4EBE9 0%, #F7F9F8 100%);
}



/* ---------------------------------------
   Service
---------------------------------------- */
.columns-service .swell-block-column{
    border-radius: 30px;
    padding-top: 3rem;
    border: 3px solid #66bf61;
}
.columns-no .swell-block-column{
    position: relative;
}
.columns-no1.swell-block-column::after{
	content:"1";
}
.columns-no2.swell-block-column::after{
	content:"2";
}
.columns-no3.swell-block-column::after{
	content:"3";
}

.columns-no .swell-block-column::after {
    position: absolute;
    top: -34px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 20px;
    width: 56px;
    height: 56px;
    line-height: 56px;
    text-align: center;
    background-color:var(--sub-green);
    color: #fff;
    border-radius: 50%;
    font-weight:500;
}


@media(max-width:599px){
	.columns-no .swell-block-columns__inner{
		gap:3rem;
	}
}


/* ---------------------------------------
   Reason
---------------------------------------- */
div#reason::after {
    content: "";
    width: 70%;
    height: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    background: linear-gradient(to right, #E4EBE9 0%, #F7F9F8 100%);
}


/* ---------------------------------------
   flow
---------------------------------------- */
#flow .swell-block-fullWide__inner{
	padding-right:3rem;
	padding-left:3rem;
}
#flow .swell-block-step__number.u-col-main {
    border-radius: 50% ;
    width: 60px ;
    height: 60px ;
    background: #66bf61;
    color: #fff !important;
}

/* ステップの三角の色 */
.is-style-big > .swell-block-step__item {
  --swl-step_arrow_color: var(--color_link);
}

/* 枠の点線 */
.is-style-big > .swell-block-step__item {
	border-top:none;
	border-bottom:none;
}
.swell-block-step.is-style-big{
	border-top: 1px dashed var(--swl-step_arrow_color);
	border-bottom: 1px dashed var(--swl-step_arrow_color);
}
.is-style-big>.swell-block-step__item:first-child{
	border:none;
}


@media (min-width: 960px) {
  .swell-block-step.is-style-big {
	display: grid;
    grid-template-columns: repeat(4, 1fr); /* 最大4カラム */
    gap: 2rem; /* カード間の余白 */
  }

  .swell-block-step.is-style-big > .swell-block-step__item {
    flex: 1 1 0;               /* 個数に関わらず均等幅 */
    min-width: 0;              /* はみ出し防止（長いタイトル/本文対策） */
    display: flex;
    flex-direction: column;    /* タイトル→本文の縦積みを安定させる */
  }

  /* PCの三角の装飾の位置（元ルールを調整） */
  .is-style-big > .swell-block-step__item:before {
    left: calc(100% + 1rem);   /* gapとバッティングしないよう少し右へ */
    top: 50%;
    transform: translateY(-50%) rotate(-90deg);
  }

  /* 最後のアイテムは三角を消す（終端で突き抜けないように） */
  .is-style-big > .swell-block-step__item:last-child:before {
    display: none;
    content: none;
  }
}

/* ---------------------------------------
   job-seeker
---------------------------------------- */
/*PC以下*/
@media(min-width:600px){
	.point-block h3{
		font-size:2rem !important;
	}
}
.point-block .wp-block-column {
    padding: 5rem 3rem !important;
    background: #2E6D57 !important;
    border-radius: 16px !important;
}
.point-block h3.wp-block-heading{
	color:#fff;
}
.point-block .swell-block-column{
	min-height:250px !important;
	border-radius:8px;
}
.point-block span.swl-bg-color{
    border-radius: 4px;
}

.job-columns .swell-block-column{
    position: relative;
}
.job-columns .swell-block-columns__inner {
    justify-content: center;
}

.job-columns-01.swell-block-column::after{
	content:"01";
}
.job-columns-02.swell-block-column::after{
	content:"02";
}
.job-columns-03.swell-block-column::after{
	content:"03";
}
.job-columns-04.swell-block-column::after{
	content:"04";
}
.job-columns-05.swell-block-column::after{
	content:"05";
}

.job-columns .swell-block-column::after {
    font-size: 32px;
    font-weight: bold;
    position: absolute;
    top: -25px;
    left: 8px;
    color: Var(--color_deep04);
}

@media(max-width:599px){
	.job-columns .swell-block-column::after{
		top:-28px;
	}
}

/* お問い合わせ ------------------------------------------------------------------ */
.wp-block-snow-monkey-forms-item.smf-item.smf-item--divider.contact-form-pp {
    text-align: center;
}

/* ============ ============ ============ ============ ============
 * ベトナム page設定------------------------------------------------------------------ */

/* 上部バー ============*/
html[lang="vi"] .l-header__bar.pc_{
	display:none;
}

/* FV ============*/
/* まずVIブロックをデフォルト非表示に */
.c-vi{ display: none; }

/* HTMLのlang属性がviの時だけ、VIを表示・JAを非表示 */
html[lang="vi"] .c-vi{ display: block; }
html[lang="vi"] .c-jp{ display: none; }


/* 5 point */
html[lang="vi"] .point-block .swell-block-column {
    min-height: 80px !important;
}