html{
    font-size: 62.5%;
}
body{
    font-family: Hiragino Kaku Gothic ProN,\\30D2\30E9\30AE\30CE\89D2\30B4 ProN W3,Meiryo,メイリオ,Osaka,MS PGothic,arial,helvetica,sans-serif!important;
    font-size: 1.6em;
    line-height: 1.5;
}
:root {
    /* color */
    --worker: #F5A500;
    --worker-80: #F7B733;
    --worker-60: #F9C966;
    --worker-40: #FBDB99;
    --worker-20: #FFF1D3;
    --worker-10: #FEF6E6;
    --contractors: #2196F3;
    --contractors-80: #4DABF5;
    --contractors-60: #7AC0F8;
    --contractors-40: #A6D5FA;
    --contractors-20: #D3EAFD;
    --contractors-10: #E9F5FE;
    --white: #FFFFFF;
    --keyblack: #192730;
    --keyblack-80: #475259;
    --keyblack-60: #757D83;
    --keyblack-40: #A3A9AC;
    --keyblack-20: #D1D4D6;
    --keyblack-10: #E8EAEB;
    --accent: #1190A7;
    --accent-80: #3DA7BA;
    --accent-60: #70BCCA;
    --accent-40: #A0D3DC;
    --accent-20: #CFE9ED;
    --accent-10: #E8F4F7;
    --warning: #ED6C02;


    /* font-size */
    --headline: 28px;
    --headline-sub: 20px;
    --headline-sub-2: 18px;
    --strong2: 24px;
    --strong: 20px;
    --medium: 16px;
    --small:12px;

    /* spacing */
    --spacing-0: 0px;
    --spacing-4: 4px;
    --spacing-8: 8px;
    --spacing-16: 16px;
    --spacing-24: 24px;
    --spacing-32: 32px;
    --spacing-40: 40px;
    --spacing-48: 48px;
}
.mb-8{
    margin-bottom: var(--spacing-8);
}
.mb-16{
    margin-bottom: var(--spacing-16);
}
.mb-24{
    margin-bottom: var(--spacing-24);
}
.mb-32{
    margin-bottom: var(--spacing-32);
}
.mb-40{
    margin-bottom: var(--spacing-40);
}
.mb-48{
    margin-bottom: var(--spacing-48);
}
.mt-8{
    margin-top: var(--spacing-8);
}
.mt-16{
    margin-top: var(--spacing-16);
}
.mt-24{
    margin-top: var(--spacing-24);
}
.mt-32{
    margin-top: var(--spacing-32);
}
.mt-48{
    margin-top: var(--spacing-48);
}
.fw_b{
    font-weight: bold;
}
.txt_right{
    text-align: right;
}
.c_warning{
    color: var(--warning);
}
main{
    color: var(--keyblack);
}
h1,h2,h3,h4,h5{
    font-weight: bold;
}
strong{
    font-size: var(--strong);
    display: inline-block;
}

small{
    font-size: var(--small);
    display: inline-block;
}
picture,
img{
    display: block;
    max-width: 100%;
}
picture img{
    margin: auto;
}
img.img-left{
    margin-left: 0;
}
a{
    text-decoration: underline;
}
.btn{
    display: inline-block;
    padding: 4px 8px;
    background: var(--keyblack);
    color: var(--white);
    border-radius: 4px;
    text-decoration: none;
    text-align: center;
    font-weight: bold;
}
.btn_large{
    font-weight: bold;
    padding: 16px 24px;
    border-radius: 8px;
}
.btn_blue {
    background: var(--contractors);
}

.btn_orange {
    background: var(--warning);
}

.btn_icon {
    display: flex;
}
.br{
    display: inline-block;
}
.contractors header .btn,
.contractors footer{
    background: var(--contractors);
    color: var(--white);
}
.workers header .btn,
.workers .header_bottom_area,
.workers footer{
    background: var(--worker);
}
.sp{
    display: none;
}
@media only screen and (max-width: 750px){
    .pc{
        display: none;
    }
}

/* heder */
header {
    padding: 0 8px 8px;
    display: flex;
    top: 0;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    width: 100%;
    height: 77px;
    z-index: 100;
    background: var(--white);
}
@media only screen and (max-width: 750px){
    .logo{
        max-width: 378px;
    }
}


/* メインビジュアル */
.top_image{
    padding: 0;
}

/* 導入会社スライダー */
:root {
  --item-w: 160px;      /* 画像横幅 */
  --item-h: 80px;       /* 画像高さ */
  --gap: 24px;          /* 画像間隔 */
  --n: 10;               /* 画像の枚数（オリジナルセット） */
  --duration: 30s;      /* 1セットを流す所要時間 */
}

#slider {
  padding: 24px 0;
  width: 100%;
  overflow: hidden;
}

.slider-wrapper {
  width: 100%;
  overflow: hidden;
}

.slider-wrapper ul {
  display: flex;
  gap: var(--gap);
  padding: 0;
  margin: 0;
  list-style: none;
  align-items: center;
  /* 2セット分を並べて無限ループ */
  width: calc((var(--item-w) + var(--gap)) * var(--n) * 2);
  animation: scroll-left var(--duration) linear infinite;
}

.slider-wrapper li {
  flex: 0 0 auto;
  width: var(--item-w);
  height: var(--item-h);
  overflow: hidden;
}

.slider-wrapper img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@keyframes scroll-left {
  0%   { transform: translateX(0); }
  100% { transform: translateX(calc(-1 * (var(--item-w) + var(--gap)) * var(--n))); }
}

/* ▼ 画面幅750px以下のときの調整 ▼ */
@media (max-width: 750px) {
  :root {
    --item-w: 100px;
    --item-h: 50px;
    --gap: 16px;
  }

  #slider {
    padding: 8px 0;
  }
}

/* ページタイトル */
.title_area{
    color: var(--white);
    padding: 8px 16px;
    margin-top: 77px;
    background: var(--contractors);
}
.title_area h1{
    font-size: 16px;
    text-align: left;
}


/* ポイント交換可能なサービス */

.e-money_area h3{
    padding: 8px 24px;
    background: var(--warning);
    color: var(--white);
    font-size: var(--headline-sub);
    display: inline-block;
    border-radius: 40px;
}
.e-money{
    border: 4px solid var(--warning);
    border-radius: 8px;
    padding: 60px 48px;
    margin: auto;
    margin-top: -24px;
}
.e-money ul{
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    column-gap: 40px;
    row-gap: 40px;
}
.e-money ul li {
    flex: 0 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.e-money ul img {
    height: auto;
    max-width: 100%;
    flex-shrink: 1;
    object-fit: contain;
}
.e-money ul img.paypay{
    max-width: 206px;
}
.e-money ul img.dpoint{
    max-width: 206px;
}
.e-money ul img.ponta{
    max-width: 88px;
}
.e-money ul img.amazon{
    max-width: 182px;
}
.e-money_attention{
    margin-top: 24px;
    text-align: left;
    font-size: var(--small);
}
.e-money_attention p{
    margin-bottom: 0.2em;
    font-size: var(--small) !important;
}
.e-money_attention ul li{
    margin-left: 0.2em;
}
.e-money_attention ul li:not(:last-child) {
  margin-bottom: 0.2em;
}
.e-money_attention ul {
  list-style: none;
  padding-left: 0;
}
.e-money_attention li {
  position: relative;
  padding-left: 1.2em;
}
.e-money_attention li::before {
  content: "※";
  position: absolute;
  left: 0;
}

@media only screen and (max-width: 750px){
    .e-money{
        padding: 48px 32px 32px;
    }
    .e-money ul{
        flex-wrap: wrap;
        column-gap: 24px;
        row-gap: 24px;
    }
    .e-money ul li {
        flex-basis: calc(50% - 12px);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .e-money ul img.paypay,
    .e-money ul img.dpoint,
    .e-money ul img.amazon{
        width: 100%;
        height: auto;
    }
    .e-money ul img.ponta{
        width: 40%;
        height: auto;
    }
}

/* アプリダウンロード */
.install{
    display: flex;
    justify-content: center;
    list-style: none;
}
.install li{
    margin: 0 8px;
}
.install li img{
    height: 40px;
}
main{
    min-height: calc(100vh - 272px);
}

.workers main.content section:nth-child(2n+0) {
    background: var(--worker-10);
}
section{
    margin: auto;
}
.content section{
    padding: var(--spacing-48) var(--spacing-16);
}
section .inner{
    max-width: 1280px;
    margin: auto;
}
section.about img{
    width: 100%;
}
section h2{
    font-size: var(--headline);
    padding-bottom: var(--spacing-16);
}
@media only screen and (max-width: 750px){
    section{
        padding: var(--spacing-24) var(--spacing-16);
    }
}

/* トップへ戻る */
.top_btn{
    position: fixed;
    bottom: -50px;
    right: 10px;
    padding: 4px;
    display: block;
    border-radius: 24px;
    background: var(--keyblack);
    color: var(--white);
    opacity: 0.8;
}
.top_btn:hover{
    opacity: 0.5;
}

/*footer*/
footer{
    padding: 16px;
    text-align: center;
}
.info{
    display: flex;
    justify-content: center;
    margin-bottom: 8px;
}
.link_list li{
    margin-right: 24px;
}
.link_list li:last-child{
    margin-right: 0;
}
.link_list{
    display: flex;
    justify-content: center;
}

@media only screen and (max-width: 750px) {
    .info{
        display: block;
    }
    section.about p{
        text-align: left;
        padding: 0 1em;
    }
}

/*利用規約*/
section.lead{
    max-width: 1000px;
}
.terms_wrapper{
    padding: 40px 16px;
}
.contractors .terms_wrapper{
    background: var(--contractors-20);
}
.workers .terms_wrapper{
    background: var(--worker-20);
}
.rules-area{
    max-width: 1200px;
    margin: auto;
    background: #fff;
    padding: 48px 48px 0;
}
.rules{
    padding: 0 16px 48px;
}
.rules h2{
    padding-bottom: 0;
    margin-bottom: 0.5em;
}
.rules h3{
    font-size: 1.8rem;
    margin-bottom: 0.5em;
}
.rules ol{
    padding: revert;
    margin-top: 1em;
}
.rules ol.rules-level-2,
.rules ol.rules-level-3{
    padding: revert;
    margin: 0.5em 0 1em;
}
.rules li,.rules p{
    margin-bottom: 0.5em;
}
.rules-level-1{
    list-style: decimal;
}
.rules-level-2{
    list-style: lower-alpha;
}
.rules-level-3{
    list-style: lower-roman;
}
@media only screen and (max-width: 750px){
    .rules-area{
        padding: 16px;
    }
}

.rules-additional div{
    display: flex;
}
.rules-additional dt{
    flex: 0 0 5em;
    text-align: justify;
    text-align-last: justify;
}　
.rules-additional dd{
    flex:1 1 auto ;
}
.rules-additional dd::before{
    content: "：";
}

.supporting h2{
    text-align: center;
    font-size: 2rem;
    font-weight: normal;
}
.supporting ul{
    padding: revert;
    list-style:disc;
}

/* 各種フォーム */
.flow{
    padding: 0 24px;
}
.flow section{
    padding-top: var(--spacing-32);
    margin: auto;
    max-width: 740px;
}
.flow h2{
    text-align: center;
    font-size: 24px;
    margin-bottom: 8px;
    padding: 0;
}
.flow p{
    margin-bottom: 1em;
}
.flow strong{
    font-size: var(--medium);
}
.flow .strong2{
    color: var(--warning);
}
.confirmation_list{
    width: 100%;
}
.confirmation_list th{
    background: var(--keyblack-10);
}
.confirmation_list th,
.confirmation_list td{
    border: 1px solid var(--keyblack-40);
    padding: 12px 20px;
    vertical-align: middle;
}

/* お知らせ */
section.information .inner{
    background: var(--contractors-10);
    border-radius: 24px;
    padding: 24px;
}
section.information .inner h2{
    font-size: var(--strong);
}
.flow section.information p:last-child{
    margin-bottom: 0;
}