@charset "UTF-8";
/* -------------------------------------

   Main Visual

   ------------------------------------- */
#mainImg {
    position: relative;

    margin-top: var(--header-height);
    height: calc(100vh - var(--header-height));
    height: calc(var(--vh, 1vh) * 100- var(--header-height));
    height: calc(100vh - var(--header-height));
    height: calc(var(--height-100vh) - var(--header-height));
    min-height: 640px;

    display: flex;
    justify-content: center;
    align-items: center;
    
    overflow: hidden;
}
.home-main-visual picture {
	width: 100%;
	height: 100%;
}
.home-main-visual img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
}
/* キャッチコピー */
.main-visual__txt {
    position: absolute;
    top: 15%;
    left: 7%;
    z-index: 2;

    color: var(--c-white);
    text-align: center;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1em;
}
/* 日本語 */
.main-visual__ttl {
    font-size: var(--txt-3xl);
    letter-spacing: 0.15em;
    line-height: 1;
}
/* 英字 */
.main-visual__ttl-en {
    font-size: var(--txt-md);

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    
    width: 100%;

    font-family: "Lato", sans-serif;
    font-weight: 400;
    font-style: normal;
}
.main-visual__ttl-en::before,
.main-visual__ttl-en::after {
    content: "";
    display: block;
    flex-grow: 0;
    height: 4px;
    background-color: var(--c-white);
}
/* サブコピー */
.main-visual__sub {
    font-size: var(--txt-md);
    letter-spacing: 0.25em;
}
/*------------------------------*/

/* Tablet 1023px */

/*------------------------------*/
@media(max-width: 1023px){
    /* キャッチコピー */
    .main-visual__txt {
        top: 19%;
        left: 5%;
    }
}
/*------------------------------*/

/* Smartphone 767px */

/*------------------------------*/
@media(max-width:767px){
    .home-main-visual img {
        object-position: 50% 100%;
    }
    /* キャッチコピー */
    .main-visual__txt {
        white-space: nowrap;
        top: 13%;
        left: var(--mp-lr-reg);

        align-items: flex-start;
        gap: 0.7em;

        text-align: left;
    }
    /* 日本語 */
    .main-visual__ttl {
        font-size: var(--txt-3xl);
        letter-spacing: 0.15em;
        line-height: 1.3;
    }
    /* 英字 */
    .main-visual__ttl-en {
        justify-content: flex-start;
        font-size: var(--txt-sm);
    }
    .main-visual__ttl-en::before{
        content: none;
    }
    .main-visual__ttl-en::after {
        height: 2px;
    }
    /* サブコピー */
    .main-visual__sub {
        font-size: var(--txt-reg);
        letter-spacing: 0.1em;
    }
}



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

   一貫生産メーカー

/* ------------------------------------- */
#integration.content__wrapper {
    position: relative;

    margin-top: 0;
    padding-top: var(--mp-tb-3xl);
    padding-bottom: var(--mp-tb-3xl);
    min-height: 640px;
    
    overflow: hidden;
}
.im__bg {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}
/* 背景画像 */
.im__bg-item {
  position: relative;
  overflow: hidden;
}
.im__bg-item > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 左側 */
.im__bg-item--left > img{
    object-position: 100% 50%;
}
/* 中央 */
.im__bg-item--center > img{
    object-position: 50% 50%;
}
/* 右側 */
.im__bg-item--right > img{
    object-position: 30% 100%;
}
/* テキストコンテナ */
.im__inner {
  position: relative;

  z-index: 1;
  margin: 0 auto;
  color: #fff;
}
.im__lead{
    text-align: center;
    font-size: var(--txt-reg);
    line-height: var(--lh-lg);
}
/*------------------------------*/

/* Tablet 1023px */

/*------------------------------*/
@media (max-width: 1023px) {
    .im__bg {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    }
    /* 左側 */
    .im__bg-item--left > img{
    object-position: 30% 0%;
    }
    /* 中央 */
    .im__bg-item--center > img{
    object-position: 50% 50%;
    }
    /* 右側 */
    .im__bg-item--right > img{
    object-position: 30% 28%;
    }
}
/*------------------------------*/

/* Smartphone 767px */

/*------------------------------*/
@media (max-width: 767px) {
    .im__inner{
        width: var(--fx-width);
    }
    /* テキスト */
    .im__lead{
        text-align: justify;
    }
    /* 中央 */
    .im__bg-item--center > img{
    object-position: 50% 70%;
    }
}



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

    当社の強み

   ------------------------------------- */
/* コンテナ */
.home-list__wrapper{
    margin: 0 auto;
    width: calc(1040rem/16);
    max-width: var(--fx-width);
}
/* リスト */
.home-list__wrapper ul{
    width: 100%;

    display: flex;
    flex-wrap: wrap;
    gap: var(--mp-tb-reg) var(--mp-lr-reg);
}
/* .home-list__wrapper ul::before{
    content: "";
    width: calc(calc(100% - calc(var(--mp-lr-reg)*2))/3);
    min-width: calc(280rem/16);
    max-width: 100%;
    height: 0;

    box-sizing: border-box;
    flex-grow: 1;
    order: 4;
} */
.home-list__wrapper ul::after{
    content: "";
    width: calc(calc(100% - calc(var(--mp-lr-reg)*2))/3);
    min-width: calc(280rem/16);
    max-width: 100%;
    height: 0;

    box-sizing: border-box;
    flex-grow: 1;
    order: 5;
}
/* アイテム */
.home-list__wrapper ul li{
    background-color: var(--c-gray-pale);
    width: calc(calc(100% - calc(var(--mp-lr-reg)*2))/3);
    min-width: calc(280rem/16);
    padding: 2em;
    padding-top: 0;

    box-sizing: border-box;
    flex-grow: 1;

    position: relative;
}
/* ヘディング */
.home-list__wrapper ul li .home-list__item-heading h3{
    padding: 1.5em;
    font-size: var(--txt-reg);
    font-weight: var(--bold);
    text-align: center;
    color: var(--c-main);
    line-height: 1;
}
/* テキスト */
.home-list__wrapper ul li .home-list__item-txt{
    margin-top: 1em;
    text-align: justify;
}
/* リード */
.home-list__lead{
    margin-top: 0;
    width: 100%;
}
.home-list__lead p{
    text-align: center;
}
/* 画像 */
.home-list__wrapper ul li .home-list__item-img{
    width: calc(160rem/16);
    height: auto;
    margin: 0 auto;
}
.home-list__wrapper ul li .home-list__item-img img{
    width: 100%;
    height: auto;
    object-fit: contain;
}
/* お問い合わせコンテナ */
#home-list.content__wrapper .btn__inner{
    margin-top: var(--mp-tb-md);

    display: flex;
    justify-content: center;
}
/*------------------------------*/

/* Smartphone 767px */

/*------------------------------*/
@media(max-width:767px){
    /*------------------------------*/
    /* アイテム */
    /*------------------------------*/
    .home-list__wrapper ul li{
        max-width: 100%;
        padding: 2em;
        flex-grow: 0;
        margin-left: auto;
        margin-right: auto;
    }
    /* ヘディング */
    .home-list__wrapper ul li .home-list__item-heading h3{
        padding: 0;
        padding-bottom: 1.5em;
        width: 100%;
    }
    /* テキスト */
    .home-list__wrapper ul li .home-list__item-txt{
        margin-top: 1.5em;
    }
}



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

   企業理念

   ------------------------------------- */
#corporate.content__wrapper{
    margin-top: 0;
    padding-top: var(--mp-tb-2xl);
}
.corporate-inner {
    background-color: var(--c-white);
    padding: var(--mp-tb-md) var(--mp-tb-md);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    max-width: var(--fx-width);
    width: calc(760rem/16);

    margin-left: auto;
    margin-right: auto;
}
.corporate-list {
    list-style: none;
    margin: 0 auto;
}
.corporate-list li {
    position: relative;
    padding-left: 1.5em;
    margin-bottom: 1.2em;
    font-weight: bold;
    font-size: var(--txt-reg);
    line-height: var(--lh-md);
}
.corporate-list li::before {
    content: "●";
    position: absolute;
    left: -1%;
    top: 11px;
    transform: translateY(-50%);

    color: var(--c-main-red);
    font-size: var(--txt-xl);
}



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

   代表挨拶

   ------------------------------------- */
   /* コンテナ */
#message.content__wrapper{
    padding-top: var(--mp-tb-2xl);
    padding-bottom: var(--mp-tb-2xl);
    background-color: var(--c-gray-pale);
}
#message.content__wrapper .content__inner{
    width: calc(560rem/16);
    max-width: var(--fx-width);

    margin-left: auto;
    margin-right: auto;
}
/* テキスト */
#message.content__wrapper .txt{
    padding-bottom: 1em;
    border-bottom: 1px solid var(--c-sub);
}
.message__ceo-name{
    width: calc(560rem/16);
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: right;

    font-size: var(--txt-md);
    margin-top: 1em;
}



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

   募集要項

   ------------------------------------- */
#recruit.content__wrapper {
    background-color: var(--c-gray-pale);
}

.company-overview__inner,
.recruit__inner {
    width: 100%;

    display: flex;
    align-items: center;
}
/* 画像 */
.company-overview__photo-wrapper,
.recruit__photo-wrapper {
    width: calc(100% - calc(50vw + min(7vw, calc(120rem/16))));
    height: calc(800rem/16);
    min-height: calc(560rem/16);
    flex-grow: 1;

    position: relative;
}
.company-overview__photo-wrapper img,
.recruit__photo-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* テキスト */
.company-overview__txt-wrapper,
.recruit__txt-wrapper {
    width: 48vw;
    padding: 0 min(7vw, calc(120rem/16));
}
/* テーブル */
.company-overview__txt-wrapper > table,
.recruit__txt-wrapper > table {
    width: 100%;
}
.company-overview__txt-wrapper > table tr,
.recruit__txt-wrapper > table tr {
    display: flex;
}
.company-overview__txt-wrapper > table tr + tr,
.recruit__txt-wrapper > table tr + tr {
    border-top: solid 1px var(--c-sub);
    margin-top: 1em;
    padding-top: 1em;
}
.company-overview__txt-wrapper > table tr th,
.recruit__txt-wrapper > table tr th {
    display: inline-block;
    width: 20%;
    text-align: left;
    vertical-align: top;
}
.company-overview__txt-wrapper > table tr td,
.recruit__txt-wrapper > table tr td {
    display: inline-block;
    width: 80%;
    text-align: left;
    vertical-align: top;
}
.company-overview__txt-wrapper > table tr td .spam-txt,
.recruit__txt-wrapper > table tr td .spam-txt {
    font-size: var(--txt-sm);
}
/*------------------------------*/

/* Tablet 1023px */

/*------------------------------*/
@media(max-width: 1023px){
    /*------------------------------*/
    /* CONCEPT */
    /*------------------------------*/
    .concept-txt{
        padding-top: calc(40rem/16);
    }
    /*------------------------------*/
    /* OVERVIEW & RECRUIT */
    /*------------------------------*/
    .company-overview__inner,
    .recruit__inner {
        margin-top: calc(40rem/16);

        display: flex;
        flex-direction: column;
        align-items: center;
    }
    /* 画像 */
    .company-overview__photo-wrapper,
    .recruit__photo-wrapper {
        width: 100%;
        height: auto;
        min-height: auto;

        position: relative;
    }
    .company-overview__photo-wrapper::before,
    .recruit__photo-wrapper::before {
        content: "";
        display: block;
        padding-top: 56.25%;
    }
    .company-overview__photo-wrapper img,
    .recruit__photo-wrapper img {
        display: inline-block;
        width: 100%;
        height: 100%;
        object-fit: cover;

        position: absolute;
        top: 0;
        left: 0;
    }
    /* テキスト */
    .company-overview__txt-wrapper,
    .recruit__txt-wrapper {
        margin-top: calc(40rem/16);
        width: 100%;
        padding: 0 min(4vw, calc(80rem/16));
    }
}
/*-------------------------------*/

/* Smartphone 767px */

/*------------------------------*/
@media(max-width:767px){
    /*------------------------------*/
    /* OVERVIEW & RECRUIT */
    /*------------------------------*/
    .company-overview__inner,
    .recruit__inner {
        margin-top: 0;
    }
    /* テキスト */
    .company-overview__txt-wrapper,
    .recruit__txt-wrapper {
        margin-top: calc(24rem/16);
    }
    /* テーブル */
    .company-overview__txt-wrapper > table,
    .recruit__txt-wrapper > table {
        width: 100%;
    }
    .company-overview__txt-wrapper > table tr,
    .recruit__txt-wrapper > table tr {
        display: flex;
        flex-direction: column;
        gap: 0.3em
    }
    .company-overview__txt-wrapper > table tr th,
    .recruit__txt-wrapper > table tr th {
        width: 100%;
    }
    .company-overview__txt-wrapper > table tr td,
    .recruit__txt-wrapper > table tr td {
        width: 100%;
    }
}



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

/* 設備紹介 */

/*------------------------------------*/
#facility.content__wrapper{
    padding-top: var(--mp-tb-2xl);
    padding-bottom: var(--mp-tb-2xl);

    background-color: var(--c-gray-pale);
}
.grid-section{
    width: 100%;
}
.grid-section .content__inner{
    max-width: calc(2000rem/16);
    margin-right: auto;
    margin-left: auto;
}
/* =====================================*/
.grid-section .grid__inner{
    --grid-width: min(30%, calc(480rem/16));
    padding-left: var(--head-match-up);
    display: grid;
    grid-template-columns: var(--grid-width) 1fr;
    place-content: center;
    grid-template-areas:
    "heading photo"
    "txt     photo"
    ;
    gap: 0 min(8vw, calc(120rem/16));
}
.headline__wrapper{
    grid-area: heading;
}
.grid-photo__wrapper{
    grid-area: photo;
}
.grid-txt__wrapper{
    grid-area:txt;
}
/* =====================================*/
/* ヘディング */
.headline__wrapper{
    align-self: flex-end;
    margin-bottom: var(--mp-tb-md);
}
/* テキスト */
.grid-txt__wrapper.-c-white .txt{
    color: var(--c-white);
}
/* ボタン */
.grid-txt__wrapper .btn__inner{
    margin-top: var(--mp-tb-reg);
}
/*------------------------------*/

/* Tablet 1023px */

/*------------------------------*/
@media(max-width: 1023px){
    .grid-section{
        max-width: 100%;
    }
    /* =====================================*/
    .grid-section .grid__inner{
        padding: 0;
        grid-template-columns: 1fr;
        place-content: center;
        grid-template-areas:
        "photo"
        "heading"
        "txt"
        ;

        gap: var(--mp-tb-md) 0;
    }
    /* =====================================*/
    /* ヘディング */
    .headline__wrapper{
        justify-content: center;
    }
    #facility .content__inner .grid__inner .headline__wrapper{
        margin-bottom: 0;
        margin-left: var(--head-match-up);
    }
    /* テキスト */
    .grid-txt__wrapper{
        margin-top: 0;
        padding: 0 var(--mp-lr-reg);
    }
    /* ボタン */
    .grid-txt__wrapper .btn__inner{
        margin-top: var(--mp-tb-md);
        display: flex;
        justify-content: center;
    }
}
/*------------------------------------*/

/* このような製品を作っています */

/*------------------------------------*/
/* コンテナ */
.content__products-inner{
    width: calc(1040rem/16);
    max-width: var(--fx-width);
    margin-top: var(--mp-tb-2xl);
    margin-right: auto;
    margin-left: auto;
}
/* ヘディング */
.content__products-inner .headline__wrapper .headline{
    font-size: var(--txt-lg);
    
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
}
.content__products-inner .headline__wrapper .headline::before{
    content: "";
    display: block;
    height: 4px;
    width: 64px;
    background-color: var(--c-main-red);
}
.content__products-inner .headline__wrapper .headline::after{
    content: "";
    display: block;
    height: 4px;
    width: 64px;
    background-color: var(--c-main-red);
}
/* リスト */
ul.product-list{
    width: 100%;
    margin-top: var(--mp-tb-xs);

    display: flex;
    flex-wrap: wrap;

    gap: 1em;
}
/* アイテム */
ul.product-list > li{
    width: calc(calc(100% - 3em)/4);
    min-width: calc(240rem/16);
    flex-grow: 1;
}
ul.product-list::before{
    content: "";
    height: 0;
    width: calc(calc(100% - 3em)/4);
    min-width: calc(240rem/16);
    flex-grow: 1;
    order: 5;
}
ul.product-list::after{
    content: "";
    height: 0;
    width: calc(calc(100% - 3em)/4);
    min-width: calc(240rem/16);
    flex-grow: 1;
    order: 6;
}
/* 画像 */
ul.product-list > li > img{
    width: 100%;
    height: auto;
}
/* 製品名 */
.product-name{
    margin-top: 0.8em;
    font-size: var(--txt-reg);
    font-weight: var(--bold);
    text-align: center;
    color: var(--c-main);
    line-height: 1.2;
}
/*------------------------------*/

/* Tablet 1023px */

/*------------------------------*/
@media(max-width: 1023px){
    /* リスト */
    ul.product-list{
        justify-content: center;
        gap: 2em 1em;
    }

}
/*-------------------------------*/

/* Smartphone 767px */

/*------------------------------*/
@media(max-width:767px){
    /* アイテム */
    ul.product-list > li{
        width: calc(calc(100% - 1em)/2);
        min-width: calc(120rem/16);
    }
    ul.product-list::before{
        content: none;
    }
    ul.product-list::after{
        content: none;
    }
}



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

   社員インタビュー

   ------------------------------------- */
#staff.content__wrapper{
    margin-top: 0;
    padding-top: var(--mp-tb-2xl);
}
/* リード文 */
.section-lead {
    text-align: center;
    margin-top: var(--mp-tb-lg);
    margin-bottom: var(--mp-tb-lg);
    line-height: var(--lh-md);
}
/* 画像 */
.home-list__wrapper.staff-list ul li .staff-photo {
    width: calc(240rem/16);
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    margin-top: 2em;
}
.home-list__wrapper.staff-list ul li .staff-photo img {
    width: 100%;
    height: auto;
}
/* テキストエリア */
.home-list__wrapper.staff-list ul li .staff-txt {
    margin-top: 1em;
}
/* ヘディング */
.home-list__wrapper.staff-list ul li .staff-txt .staff-name {
    font-size: var(--txt-reg);
    font-weight: var(--bold);
    text-align: center;
    color: var(--c-main);
    line-height: 1;
}
/* 本文 */
.home-list__wrapper.staff-list ul li .staff-txt .txt {
    margin-top: 1em;
    text-align: justify;
}
/*-------------------------------*/

/* Smartphone 767px */

/*------------------------------*/
@media(max-width:767px){
    /* 画像 */
    .home-list__wrapper.staff-list ul li .staff-photo {
        margin-top: 0;
    }
}



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

   募集要項

   ------------------------------------- */
#recruit.content__wrapper{
    padding-top: var(--mp-tb-2xl);
    padding-bottom: var(--mp-tb-2xl);
}
/* -------------------------------------

   福利厚生

   ------------------------------------- */
/* コンテナ */
.welfare__inner{
    margin-top: var(--mp-tb-2xl);
    width: calc(1040rem/16);
    max-width: var(--fx-width);
    margin-right: auto;
    margin-left: auto;
}
/* リード文 */
.welfare__lead{
    text-align: center;
    margin-top: var(--mp-tb-lg);
    margin-bottom: var(--mp-tb-lg);
}
/* メインリスト */
.welfare__list{
    width: 100%;

    display: flex;
    flex-wrap: wrap;
    gap: 1em;
}
/* メインアイテム */
.welfare__list li.welfare__item{
    background-color: var(--c-gray-pale);
    width: calc(calc(100% - calc(1em*2))/3);
    min-width: calc(280rem/16);
    padding-top: 0;

    box-sizing: border-box;
    flex-grow: 1;

    position: relative;
}
.welfare__list::before{
    content: "";
    height: 0;
    width: calc(calc(100% - calc(1em*2))/3);
    min-width: calc(280rem/16);
    padding-top: 0;

    box-sizing: border-box;
    flex-grow: 1;

    order: 4;
}
/* メインリストヘディング */
h3.welfare__item-ttl{
    font-size: var(--txt-lg);
    font-weight: var(--bold);
    color: var(--c-white);
    line-height: 1;
    text-align: center;
    padding: 0.8em;
    background-color: var(--c-main);
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}
/* サブリスト */
ul.welfare__sub-list{
    padding: 1em;
    background-color: var(--c-white);
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}
/* サブアイテム */
ul.welfare__sub-list li{
    display: flex;
    align-items: center;
    gap: 0.5em;
}
ul.welfare__sub-list li + li{
    margin-top: 0.8em;
    padding-top: 0.8em;
    border-top: solid 1px var(--c-gray-pale2);
}
/* サブアイテムヘディング */
ul.welfare__sub-list li h4{
    font-size: var(--txt-md);
    font-weight: var(--bold);
    color: var(--c-main);
    line-height: 1.2;
    padding-bottom: 0.3em;
}
/* 小見出し */
ul.welfare__sub-list li h4.welfare__sub-item-ttl.-sm-ttl{
    font-size: var(--txt-reg);
}
/* 画像 */
ul.welfare__sub-list li .welfare__sub-item-img {
    width: calc(100rem/16);
    height: auto;
    border-radius: 8px;
    border: solid 1px var(--c-sub);
}
/*-------------------------------*/

/* Smartphone 767px */

/*------------------------------*/
@media(max-width:767px){
    /* メインリスト */
    .welfare__list{
        justify-content: center;
    }
    /* メインアイテム */
    .welfare__list li.welfare__item{
        flex-grow: 0;
    }
    /* 画像 */
    ul.welfare__sub-list li .welfare__sub-item-img {
        width: calc(72rem/16);
    }
}



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

   Entry

   ------------------------------------- */
.entry-inner {
    text-align: center;
    width: calc(800rem/16);
    max-width: var(--fx-width);
    margin: 0 auto;
}
.entry-lead {
    text-align: center;
    font-size: var(--txt-reg);
    margin-bottom: 2em;
}
.entry-action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8em;
    flex-wrap: wrap;
}
.entry-tel {
    text-align: left;
    font-size: var(--txt-sm);
    font-weight: var(--bold);
}
/* 電話番号 */
.entry-tel .tel-num {
	font-size: var(--txt-xl);
	font-weight: 700;
	color: var(--c-main);
	text-decoration: none;
	line-height: 1;
	display: flex;
	align-items: baseline;
	font-family: 'Lato', sans-serif;
}
.entry-tel .tel-num span {
	font-size: var(--txt-md);
	font-weight: 700;
	color: var(--c-main);
	margin-right: 5px;
}
/*-------------------------------*/

/* Smartphone 767px */

/*------------------------------*/
@media(max-width:767px){
    .entry-lead {
    text-align: justify;
    }
}



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

   Flow

   ------------------------------------- */
#flow.content__wrapper{
    padding-top: var(--mp-tb-2xl);
    padding-bottom: var(--mp-tb-2xl);
    background-color: var(--c-gray-pale);
}
.flow-inner {
    max-width: var(--fx-width);
    margin: 0 auto;
}
/* リスト */
.flow-list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;

    gap: var(--mp-tb-lg) var(--mp-lr-reg);

    position: relative;
}
/* アイテム */
.flow-list li {
    width: calc(calc(100% - calc(var(--mp-lr-reg)*3))/4);
    min-width: calc(280rem/16);
    flex-grow: 1;

    box-sizing: border-box;
    position: relative;
}
.flow-list::before{
    content: "";
    height: 0;
    width: calc(calc(100% - calc(var(--mp-lr-reg)*3))/4);
    min-width: calc(280rem/16);

    box-sizing: border-box;
    flex-grow: 1;

    order: 5;
}
.flow-list::after{
    content: "";
    height: 0;
    width: calc(calc(100% - calc(var(--mp-lr-reg)*3))/4);
    min-width: calc(280rem/16);

    box-sizing: border-box;
    flex-grow: 1;

    order: 6;
}
/* 画像 */
.flow-photo img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    margin-bottom: 0.8em;
}
.flow-list li::before{
    content: "▶";
    position: absolute;
    top: 18%;
    left: -1.7em;

    font-size: var(--txt-reg);
    color: var(--c-sub);
}
.flow-list li:first-of-type::before{
    display: none;
}
.flow-arrow {
    align-self: center;
    color: var(--c-sub);
    font-size: 1.5em;
    margin-top: -80px;
}
.flow-ttl {
    font-size: var(--txt-reg);
    font-weight: bold;
    border-bottom: 1px solid #ddd;
    padding-bottom: 0.8em;
    margin-bottom: 0.8em;

    display: flex;
    align-items: center;
}
/* 番号 */
.flow-num {
    color: var(--c-white);
    font-size: var(--txt-reg);
    line-height: 1;
    margin-right: 0.3em;

    background-color: var(--c-main-red);
    border-radius: 50%;
    width: 24px;
    height: 24px;
    
    display: flex;
    justify-content: center;
    align-items: center;
}
/*------------------------------*/

/* Tablet 1023px */

/*------------------------------*/
@media(max-width: 1023px){
    .flow-list::before,
    .flow-list::after{
        display: none;
    }
    .flow-list li::before{
        content: none;
    }
}
@media (max-width: 767px) {
    /* リスト */
    .flow-list{
        justify-content: center;
    }
    /* アイテム */
    .flow-list li {
        flex-grow: 0;
    }
}