@charset "UTF-8";

/**********************************************************
    BULMAはモバイルファーストで設計されている

    [BULMA Media Query]
        Mobile:      768px 以下 (max-width: 768px)
        Tablet:      769px 以上 (min-width: 769px)
        Desktop:    1024px 以上 (min-width: 1024px)
        Widescreen: 1216px 以上 (min-width: 1216px)
        FullHD:     1408px 以上 (min-width: 1408px)
 *********************************************************/

/**********************************************************
    Media Queries Template
 *********************************************************/
/* only Mobile [- 768px] */
@media screen and (max-width: 768px) {
}

/* over Tablet [769px -] */
@media screen and (min-width: 769px) {
}

/* only Tablet [769px - 1023px] */
@media screen and (min-width: 769px) and (max-width: 1023px) {
}

/* under Touch (Mobile & Tablet) [- 1023px] */
@media screen and (max-width: 1023px) {
}

/* over Desktop [1024px -] */
@media screen and (min-width: 1024px) {
}

/* over Widescreen [1216px -] */
@media screen and (min-width: 1216px) {
}

/* over Fullhd [1408px -] */
@media screen and (min-width: 1408px) {
}
/*********************************************************/


/**********************************************************
    All
 *********************************************************/
* {
    cursor:default;
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
}

html {
    font-size: 16px;
}

/**********************************************************
    Fonts
 *********************************************************/
.noto-sans-jp-200, .noto-sans-jp-300, .noto-sans-jp-400 {
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
}
.noto-sans-jp-200 { font-weight: 200; }
.noto-sans-jp-300 { font-weight: 300; }
.noto-sans-jp-400 { font-weight: 400; }

.noto-serif-jp-200, .noto-serif-jp-300, .noto-serif-jp-400 {
    font-family: "Noto Serif JP", serif;
    font-optical-sizing: auto;
    font-style: normal;
}
.noto-serif-jp-200 { font-weight: 200; }
.noto-serif-jp-300 { font-weight: 300; }
.noto-serif-jp-400 { font-weight: 400; }

.yuji-syuku-regular {
  font-family: "Yuji Syuku", serif;
  font-weight: 400;
  font-style: normal;
}
.zen-antique-regular {
  font-family: "Zen Antique", serif;
  font-weight: 400;
  font-style: normal;
}
.is-size-6-5 { font-size: 0.87rem; }
.is-size-5-5 { font-size: 1.12rem; }
.is-size-4-5 { font-size: 1.37rem; }
.is-size-3-5 { font-size: 1.75rem; }
.is-size-2-5 { font-size: 2.25rem; }
.is-size-1-5 { font-size: 2.75rem; }

/**********************************************************
    Padding
 *********************************************************/
.pt-xl { padding-top:    100px; }
.pt-l  { padding-top:     75px; }
.pt-m  { padding-top:     50px; }
.pt-s  { padding-top:     25px; }
.pt-xs { padding-top:     10px; }
.pb-xl { padding-bottom: 100px; }
.pb-l  { padding-bottom:  75px; }
.pb-m  { padding-bottom:  50px; }
.pb-s  { padding-bottom:  25px; }
.pb-xs { padding-bottom:  10px; }
.pl-xl { padding-left:   100px; }
.pl-l  { padding-left:    75px; }
.pl-m  { padding-left:    50px; }
.pl-s  { padding-left:    25px; }
.pl-xs { padding-left:    10px; }
.pr-xl { padding-right:  100px; }
.pr-l  { padding-right:   75px; }
.pr-m  { padding-right:   50px; }
.pr-s  { padding-right:   25px; }
.pr-xs { padding-right:   10px; }
@media screen and (min-width: 1216px) {
    .pt-xl { padding-top:    150px; }
    .pt-l  { padding-top:    100px; }
    .pt-m  { padding-top:     75px; }
    .pt-s  { padding-top:     50px; }
    .pt-xs { padding-top:     25px; }
    .pb-xl { padding-bottom: 150px; }
    .pb-l  { padding-bottom: 100px; }
    .pb-m  { padding-bottom:  75px; }
    .pb-s  { padding-bottom:  50px; }
    .pb-xs { padding-bottom:  25px; }
    .pl-xl { padding-left:   150px; }
    .pl-l  { padding-left:   100px; }
    .pl-m  { padding-left:    75px; }
    .pl-s  { padding-left:    50px; }
    .pl-xs { padding-left:    25px; }
    .pr-xl { padding-right:  150px; }
    .pr-l  { padding-right:  100px; }
    .pr-m  { padding-right:   75px; }
    .pr-s  { padding-right:   50px; }
    .pr-xs { padding-right:   25px; }
}
/**********************************************************
    Margin
 *********************************************************/
.mt-xl { margin-top: 100px; }
.mt-l { margin-top: 75px; }
.mt-m { margin-top: 50px; }
.mt-s { margin-top: 25px; }
.mt-xs { margin-top: 10px; }
.mb-xl { margin-bottom: 100px; }
.mb-l { margin-bottom: 75px; }
.mb-m { margin-bottom: 50px; }
.mb-s { margin-bottom: 25px; }
.mb-xs { margin-bottom: 10px; }
@media screen and (min-width: 1216px) {
    .mt-xl { margin-top: 150px; }
    .mt-l { margin-top: 100px; }
    .mt-m { margin-top: 75px; }
    .mt-s { margin-top: 50px; }
    .mt-xs { margin-top: 25px; }
    .mb-xl { margin-bottom: 150px; }
    .mb-l { margin-bottom: 100px; }
    .mb-m { margin-bottom: 75px; }
    .mb-s { margin-bottom: 50px; }
    .mb-xs { margin-bottom: 25px; }
}

/**********************************************************
    Section Bar
 *********************************************************/
.sec-bar .title {
    background-color: rgb(46, 51, 61);
    color: white;
}
.sec-bar .subtitle {
    background-color: rgb(46, 51, 61);
    color: white;
}
.sec-bar-s .title {
    background-color: rgb(46, 51, 61);
    color: white;
    width:200px;
}
.sec-bar-s .subtitle {
    background-color: rgb(46, 51, 61);
    color: white;
    width:200px;
}

/**********************************************************
    Nav bar
 *********************************************************/
.navbar {
    background-color: rgba(0,0,0,0.5);
    transition: background-color 0.5s 0s ease;
}
.navbar .navbar-item:hover {
    background-color: rgba(0,0,0,0.2);
}
.navbar .navbar-dropdown {
    background-color: rgba(0,0,0,0.5);
}
.navbar .navbar-item .navbar-link:hover {
    background-color: rgba(0,0,0,0);
}
.navbar .navbar-dropdown a.navbar-item {
    background-color: rgba(0,0,0,0);
    color: white;
    transition: background-color 0.5s 0s ease;
}
.navbar .navbar-dropdown a.navbar-item:hover {
    background-color: rgba(0,0,0,0.2);
}
/* under Widescreen [- 1215px] */
@media screen and (max-width: 1215px) {
    .navbar .navbar-dropdown {
        background-color: rgba(0,0,0,0);
    }   
}

/**********************************************************
    Top image
 *********************************************************/
.topimage {
    position: relative;
    background: no-repeat url("../images/topimage/PXL_20260713_012637987.jpg");
    background-position: center;
    background-size: cover;
}
.topimage .topimage-comment {
    max-width: 100%;
    text-align: left;
}
.topimage .topimage-comment .title span:nth-of-type(1) {
    font-size: 16px;
}
.topimage .topimage-comment .title span:nth-of-type(2) {
    font-size: 32px;
}
.topimage .topimage-biglogo {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 200px;
    right: 0;
    margin: auto;
    width: 150px;
    height: 127px;
}
.topimage .topimage-biglogo img {
    width: 150px;
}
.topimage .tel-fax {
    position: absolute;
    bottom: 50px;
    right: 20px;
}
@media screen and (max-height: 449px) {
.topimage.hero.is-fullheight {
    min-height: 450px;          /* 特別に横長の場合の対応 */
}
}

/* over Widescreen [1216px -] */
@media screen and (min-width: 1216px) {
    .topimage .topimage-comment .title span:nth-of-type(1) {
        font-size: 32px;
    }
    .topimage .topimage-comment .title span:nth-of-type(2) {
        font-size: 48px;
    }
    .topimage .topimage-biglogo {
        bottom: 0;
        width: 200px;
    }
}

/**********************************************************
    Oshirase
 *********************************************************/
.oshirase .columns {
    padding-top: 15px;
    padding-bottom: 5px;
    padding-left: 10px;
    padding-right: 10px;
    border-bottom: 1px solid gray;
}
.oshirase .columns .column {
    font-size: 18px;
}
.oshirase .columns .column:nth-of-type(1) {
    text-align: center;
}
@media screen and (max-width: 768px) {
    .oshirase .columns .column {
        font-size: 16px;
    }
    .oshirase .columns .column:nth-of-type(1) {
        padding-bottom: 0px;
        text-align: left;
    }
}

/**********************************************************
    Top Message
 *********************************************************/
.top-message {
    position: relative;
}

/**********************************************************
    Outline
 *********************************************************/
.outline {
    position: relative;
    width: 100%;
    height: auto; /* 高さは自由（可変） */
    overflow: hidden; /* はみ出た背景を切り取る */
    background-color: rgba(0,0,0,0);
}
.outline-bg {
    position: absolute;
    /* 💡動きを大きくするため、上下にあらかじめ余白（ハミ出し）を作っておきます */
    top: -20%; 
    left: 0;
    width: 100%;
    height: 140%; /* コンテナより縦に長くする */
    
    background: no-repeat url("../images/decoration/PXL_20260713_013543234.jpg");
    background-position: center;
    background-size: cover;
    z-index: 0;
    
    /* 💡チラつき（ガタつき）防止のおまじない */
    will-change: transform; 
}
.outline.sec-bar-s .title {
    background-color: rgba(0,0,0,0.5);
}
.outline.sec-bar-s .subtitle {
    background-color: rgba(0,0,0,0.5);
}
.outline ul {
    list-style-type: disc;
    padding-left: 20px;
}
.outline .columns {
    margin: 0;
    padding-top: 5px;
    padding-bottom: 5px;
    border-bottom: 1px solid lightgray;
}
.outline .columns .column:nth-of-type(1) {
    text-align: right;
}
.outline .columns .column:nth-of-type(2) {
    padding-left: 50px;
}
@media screen and (max-width: 768px) {
    .outline .columns {
        padding-top: 5px;
        padding-bottom: 5px;
    }
    .outline .columns .column {
        padding-top: 5px;
        padding-bottom: 5px;
    }
    .outline .columns .column:nth-of-type(1) {
        text-align: left;
    }
    .outline .columns .column:nth-of-type(2) {
        padding-left: 20px;
    }
}
/**********************************************************
    History
 *********************************************************/
.history .columns {
    border-bottom: 1px solid lightgray;
}
.history .columns .column {
    padding-left: 0;
    padding-right: 0;
}
.history .columns .column:nth-of-type(1)  {
    text-align: right;
}
.history .columns .column:nth-of-type(2)  {
    padding-left: 20px;
}
.history .columns .column span {
    border-bottom   : 1px solid black;
}
@media screen and (max-width: 768px) {
    .history .columns .column:nth-of-type(1) {
        text-align: left;
    }
}

/**********************************************************
    Top Our Business
 *********************************************************/
.top-our-business {
    padding-top: 60px;
}

.top-our-business .container .section .columns .column {
    border-bottom: 1px solid gray;
    cursor: pointer;
}
.top-our-business .container .section .columns .column span {
    height: 200px;
    cursor: pointer;
}
.top-our-business .container .section .columns .column div {
    cursor: pointer;
}

/* over Desktop [1024px -] */
@media screen and (min-width: 1024px) {
    .top-our-business .container .section .columns .column:nth-of-type(odd) {
        border-top: 1px solid gray;
        border-right:1px solid gray;
        border-bottom: 0;
    }
    .top-our-business .container .section .columns .column:nth-of-type(even) {
        border-bottom: 1px solid gray;
        border-right:1px solid gray;
    }
}

.modal .modal-content.modal-large {
    width: 90%;
    max-width: 1024px;
}
.modal .modal-content.modal-medium {
    width: 70%;
    max-width: 769px;
}

.modal table {
    width: 100%;
    table-layout: auto;
}
.modal table tr th {
    white-space: nowrap;
}
.modal table tr th, .modal table tr td {
    font-size: 16px;
    border: 1px solid gray;
    border-collapse: collapse;
}

/* under Touch (Mobile & Tablet) [- 1023px] */
@media screen and (max-width: 1023px) {
    .modal .modal-content.modal-large {
        width: 90%;
    }
}

/**********************************************************
    Strength
 *********************************************************/
.is-square-column {
  aspect-ratio: 1 / 1;
}
.strength .high-cost-header {
    font-size: 18px;
    margin-bottom:20px;
}
.strength .columns.high-cost {
    border: 1px solid black;
}
.strength .columns.high-cost .column.is-1 img {
    width: 32px;
}
.strength .columns.high-cost .column.is-1 div {
    font-size: 16px;
}
.strength .columns.high-cost .column.is-2 div {
    border-radius: 50%;
    background-color: #FF5B61;
    color: white;
    font-size: 20px;
    width: 50%;
    height: 50%;
}
.strength .low-cost-header {
    font-size: 18px;
    margin-bottom: 20px;
}
.strength .columns.low-cost .column.is-2:nth-of-type(1) {
    border-left: 1px solid black;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
}
.strength .columns.low-cost .column.is-2:nth-of-type(2) {
    border-top: 1px solid black;
    border-bottom: 1px solid black;
}
.strength .columns.low-cost .column.is-2:nth-of-type(3) {
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    border-right: 1px solid black;
}
.strength .columns.low-cost .column.is-2 img {
    width: 32px;
}
.strength .columns.low-cost .column.is-2 span {
    font-size: 16px;
}
.strength .columns.low-cost .column.is-2 div {
    border-radius: 50%;
    background-color: #A3E4FF;
    color: #375466;
    font-size: 20px;
    width: 70%;
    height: 70%;
}
.strength .down-arrow img {
    width: 64px;
}
@media screen and (max-width: 768px) {
    .strength .columns {
        margin-top: 10px;
    }
    .strength .high-cost-header {
        font-size: 14px;
    }
    .strength .columns.high-cost .column {
        padding: 0;
    }
    .strength .columns.high-cost .column.is-1 img {
        width: 16px;
    }
    .strength .columns.high-cost .column.is-1 div {
        font-size: 12px;
    }
    .strength .columns.high-cost .column.is-2 div {
        font-size: 12px;
        width: 100%;
        height: 100%;
    }
    .strength .down-arrow img {
        width: 32px;
    }
    .strength .low-cost-header {
        margin-top: 10px;
        font-size: 14px;
    }
    .strength .columns.low-cost .column {
        padding: 0;
    }
    .strength .columns.low-cost .column.is-2 img {
        width: 16px;
    }
    .strength .columns.low-cost .column.is-2 span {
        font-size: 12px;
    }
    .strength .columns.low-cost .column.is-2 div {
        font-size: 12px;
        width: 100%;
        height: 100%;
    }
}

/**********************************************************
    Order Flow
 *********************************************************/
#order_flow .container .section .columns .column p {
    font-size: 16px;
}
#order_flow .container .section .from-customer.columns .column p {
    text-align: left;
}
#order_flow .container .section .from-us.columns .column p {
    text-align: right;
}
#order_flow .container .section .columns .column img {
    width:100px;
}
#order_flow .container .section .border {
    border-bottom: 3px solid #dcdcdc;
}
/* over Desktop [1024px -] */
@media screen and (min-width: 1024px) {
    #order_flow .container .section .columns .column p {
        font-size: 20px;
    }
    #order_flow .container .section .columns .column img {
        width:150px;
    }    
}

/**********************************************************
    Products
 *********************************************************/
#products {
    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;
    background-color: rgba(0,0,0,0);
    /*
    background: no-repeat url("../images/products/PXL_20260713_015242159.MP.jpg");
    background-position: center;
    background-size: cover;
    */
}
.products-bg {
    position: absolute;
    top: -20%; 
    left: 0;
    width: 100%;
    height: 140%; /* コンテナより縦に長くする */
    
    background: no-repeat url("../images/products/PXL_20260713_015242159.MP.jpg");
    background-position: center;
    background-size: cover;
    z-index: 0;
    
    /* 💡チラつき（ガタつき）防止のおまじない */
    will-change: transform;     
}
.products.sec-bar-s .title {
    background-color: rgba(0,0,0,0.5);
}
.products.sec-bar-s .subtitle {
    background-color: rgba(0,0,0,0.5);
}
#products .fixed-grid .grid .cell {
    background-color: white;
    color: black;
    border-top-left-radius: 0.375rem;
    border-top-right-radius: 0.375rem;
    border-bottom-right-radius: 0.375rem;
    border-bottom-left-radius: 0.375rem;
    padding: 15px;
    text-align: center;
    font-weight: bold;
}

.cell-back {
    background-size: contain;
    background: no-repeat url('../images/PXL_20260713_012906817.jpg');
    background-position: center;
}
.cell-back2 {
    background-size: contain;
    background: no-repeat url('../images/PXL_20260713_013117431.jpg');
    background-position: center;
}

/**********************************************************
    Equipment
 *********************************************************/
#equipment .columns:nth-child(odd) {
    color: black
}
#equipment .columns:nth-child(even) {
    color: black;
    background-color: hsl(221, 14%, 86%);
}

/**********************************************************
    Recruit
 *********************************************************/
.recruit {
    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;
    background-color: rgba(0,0,0,0);
    /*
    background-image: url('../images/recruit/PXL_20260724_064919105.MP_dark.jpg');
    background-size: 150% 150%;
    background-repeat: no-repeat;
    */
}
.recruit-bg {
    position: absolute;
    top: -20%; 
    left: 0;
    width: 100%;
    height: 140%;
    background: no-repeat url("../images/recruit/PXL_20260724_064919105.MP_dark.jpg");
    background-position: center;
    background-size: cover;
    z-index: 0;
    will-change: transform;     
}
.recruit .columns {
    margin: 0;
    padding-top: 5px;
    padding-bottom: 5px;
    border-bottom: 1px solid lightgray;
}
.recruit .columns .column:nth-of-type(1) {
    text-align: right;
}
.recruit .columns .column:nth-of-type(2) {
    padding-left: 50px;
}
@media screen and (max-width: 768px) {
    .recruit .columns {
        padding-top: 5px;
        padding-bottom: 5px;
    }
    .recruit .columns .column {
        padding-top: 5px;
        padding-bottom: 5px;
    }
    .recruit .columns .column:nth-of-type(1) {
        text-align: left;
    }
    .recruit .columns .column:nth-of-type(2) {
        padding-left: 20px;
    }
}

/**********************************************************
    Access
 *********************************************************/
.access ul {
    list-style-type: disc;
    padding-left: 20px;
}

/**********************************************************
    Footer
 *********************************************************/
.footer-menu .columns .column {
    line-height: 2;
}
@media screen and (max-width: 768px) {
    .footer-menu .columns .column:nth-of-type(3) {
        padding-top: 30px;
        text-align: left !important;
    }
}