@charset "utf-8";

:root {
    --body-text: #252525;
    --service-h4: #0c3aa6;
    --footer: #2a2a55;
    --loader: #0c3465;
    --link-color: #5c8be2;

    /* スマホメニュー */
    --sp-nav-bg: rgba(255,255,255, .98);
    --sp-nav-text: #333;
    --sp-nav-hover: #138ef4;
    --sp-nav-active: #138ef4;

    /* PCメニュー */
    --nav-menu-bg: linear-gradient(0deg, #2caed9, #2cbcd9);
    --nav-menu-hover: #2ca0d9;
    --nav-menu-active: #2ca0d9;
    --nav-text-shadow: 0 0 2px rgba(0,0,0, .25);
    
    /* 送信ボタン*/
    --btn-send: #497bd0;
    --btn-send-hover: #5bbbb7;
    
    /* BGカラー */
    --bg-dark: ;
    --bg-darker: ;
    --bg-light: ;
    --bg-lighter: ;
    
    /* フォントサイズ */
    --normal: 400;
    --bold: 500;
    --xbold: 600;
    --xxbold: 700;
        
    /* テキストカラー */
    --white: #fff;
    --light: #f0f0f0;
    --lighter: #f8f9fa;
    --gray: #666;
    --dark-gray: #343a40;
    --light-gray: #f0f0f0;
    --black: #000;
    --dark: #222;
    --darker: #343a40;
    --green: #179d56;
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* 
===========================================================
   # Body
===========================================================
*/
body{
    font-family: 'Noto Sans JP', "游ゴシック体", "YuGothic", "游ゴシック Medium", 'Yu Gothic Medium', "ヒラギノ角ゴ ProN", 'Hiragino Kaku Gothic ProN', "メイリオ", Meiryo, sans-serif;
    color: var(--body-text);
    font-size: 0.875rem;
    letter-spacing: 0.04em;
    line-height: 1.6;
    word-wrap : break-word;
    overflow-wrap : break-word;
    -webkit-font-smoothing: ; /*antialiased*/
}
p{
    line-height: 1.8;
    margin-bottom: 0;
}
p.article{
    line-height: 2.2;
}

@media (min-width: 992px) {
    body {
        font-size: 1rem;
    }
}

::-moz-selection{color: #222; background: #e3f3ff;}
::-webkit-selection{color: #222; background: #e3f3ff;}
::selection{color: #222; background: #e3f3ff;}

/* 
===========================================================
   # Style
===========================================================
*/
.font-jp{
    font-family: "游ゴシック体", "YuGothic", "游ゴシック Medium", 'Yu Gothic Medium', "ヒラギノ角ゴ ProN", 'Hiragino Kaku Gothic ProN', "メイリオ", Meiryo, sans-serif !important;
}

/* -------------- Serif Style -------------- */
.serif{
	font-family: "游明朝", 'Yu Mincho', YuMincho, 'Hiragino Mincho ProN', "メイリオ", Meiryo, serif !important;
    font-style: normal;
    font-weight: 400;
    letter-spacing: 0.05em;
}

/* -------------- Sub Title -------------- */
.small-title{
    font-size: 14px;
    color: #666;
    letter-spacing: 0.25em;
}

/* -------------- Divider -------------- */
.divider{
    width: 80px;
    height: 1px;
    background: #fe8c9a;
    margin: 7px 7px 30px 7px;
}

/* 
===========================================================
   # Heading
===========================================================
*/
/* -------------- Heading -------------- */
strong,h1,h2,h3,h4,h5,h6{font-weight: normal;}
h1{font-size: 1rem;line-height: 1rem;margin: 0 !important;}
h2{font-size: 160%;line-height: 1.6;margin-bottom: 0;}
h3{font-size: 130%;line-height: 1.6;margin-bottom: 0;}
h4{font-size: 1rem;line-height: 1.6;margin-bottom: 0;}
h5{font-size: 1rem;line-height: 1.6;margin-bottom: 0;}
h6{font-size: 1rem;line-height: 1.6;margin-bottom: 0;}

@media (min-width: 992px){
    h1 {font-size: 1rem; line-height: 1rem;}
    h2 {font-size: 200%;}
    h3 {font-size: 1.2rem;line-height: 1.6;letter-spacing: 0.04em;}
}


/* -------------- Custom Header -------------- */


/* 
===========================================================
   # Heading images
===========================================================
*/
.top-image{
    height: 25vh;
    padding-left: 3%;
}
.hero-slogan{
    line-height: 1;
    background: #fff;
    color: #222;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.04em;
    padding: 8px 6px 8px 8px;
    margin: 3px 0;
}
.header-title{
    font-size: 26px;
    font-weight: var(--bold);
    padding: 60px 5%;
    text-align: center;
}
.header-title > span{
    display: inline;
    background: rgba(255,255,255, .955);
    color:  #222;
    line-height: 1;
    padding: 5px 30px 7px;
    letter-spacing: 0.1em;
}
@media (min-width: 992px){
    .top-image{
        height: 45vh;
        min-height: 300px;
        padding-left: 3%;
    }
    .hero-slogan{
        font-size: 30px;
        padding: 10px 15px;
        margin: 5px 0;
    }
    .header-title{
        font-size: 32px;
        padding: 80px 5%;
        line-height: 1.4;
    }
}

/* -------------- Page Header -------------- */
.header-1{
    background:url(../img/header.jpg) left 50% top 30% / cover no-repeat;
}
.header-2{
    background:url(../img/header-2.jpg) left 50% top 40% / cover no-repeat;
}
.header-3{
    background:url(../img/header-3.jpg) left 50% top 50% / cover no-repeat;
}
.header-4{
    background:url(../img/header-4.jpg) left 50% top 50% / cover no-repeat;
}
.header-5{
    background:url(../img/header-5.jpg) left 50% top 50% / cover no-repeat;
}
.header-6{
    background:url(../img/header-6.jpg) left 50% top 50% / cover no-repeat;
}
.header-7{
    background:url(../img/header-7.jpg) left 50% top 50% / cover no-repeat;
}

/* -------------- Footer上 Contact -------------- */
.bg-contact{
    background:url(../img/honey.jpg) left 50% top 50% / cover no-repeat;
}

/* -------------- Page内 Content -------------- */
.bg-1{
    background:url(../img/header.jpg) left 0% top 50% / cover no-repeat;
    text-shadow: 0 0 0px rgba(0,0,0, .4);
}
.bg-2{
    background:url(../img/) center 50% / cover no-repeat;
    text-shadow: none;
}
.bg-3{
    background:url(../img/mall.jpg) left 50% top 50% / cover no-repeat;
    text-shadow: none;
    min-height: 20rem;
}
.bg-4{
    background:url(../img/test.jpg)  left 50% top 50% / cover no-repeat;
    -webkit-box-shadow: 0px 0px 35px rgba(0, 0, 0, .175);
    box-shadow: 5px 0px 35px rgba(0, 0, 0, .175);
}
.bg-5{
    background:url(../img/child.jpg) left 50% top 50% / cover no-repeat;
}
.bg-6{
    background:url(../img/bg-6.jpg) center 50% / cover no-repeat;
}

/* -------------- Top Page Guide -------------- */
.banner.bn-1:before{
    background: url(../img/mall.jpg) left 0% top 50% / cover no-repeat;
}
.banner.bn-2:before{
    background: url(../img/office.jpg) left 0% top 50% / cover no-repeat;
}
.banner.bn-3:before{
    background: url(../img/team.jpg) left 0% top 30% / cover no-repeat;
}
.banner.bn-4:before{
    background: url(../img/operator.jpg) left 0% top 50% / cover no-repeat;
}
.banner.bn-5:before{
    background: url(../img/chairs.jpg) left 0% top 50% / cover no-repeat;
}
.banner.bn-6:before{
    background: url(../img/office.jpg) left 0% top 50% / cover no-repeat;
}

/* -------------- Teaser Call to Action -------------- */
.cta-1{
    background:url(../img/cta-1.jpg) left 50% top 50% / cover no-repeat;
}

/* -------------- Showcase BG -------------- */
.bg-21{
    background: url('../img/child.jpg')  left 50% top 50% / cover no-repeat;
    min-height: 25rem;
}
.bg-22{
    background: url('../img/child.jpg')  left 50% top 50% / cover no-repeat;
    min-height: 25rem;
}
.bg-23{
    background: url('../img/child.jpg')  left 50% top 50% / cover no-repeat;
    min-height: 25rem;
}

/* -------------- BG Dark Mask -------------- */
.bg-alfa{
    background-size: cover;
	position: relative;
}
.bg-alfa:before{
	content: ' ';
	background-color: rgba(0,0,0, .035);
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

/* -------------- BG Darkest Mask -------------- */
.bg-alfa-dark{
    background-size: cover;
	position: relative;
}
.bg-alfa-dark:before{
	content: ' ';
	background-color: rgba(0,0,0, .055);
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

/* -------------- BG Light Mask -------------- */
.bg-alfa-light{
    background-size: cover;
	position: relative;
}
.bg-alfa-light:before{
	content: ' ';
	background-color: rgba(255,255,255, .25);
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

/* -------------- BG Grandient Mask -------------- */
.bg-alfa-center{
    background-size: cover;
	position: relative;
}
.bg-alfa-center:before{
	content: ' ';
	background: linear-gradient(90deg, rgba(255,255,255, .15), rgba(255,255,255, .75) 50%, rgba(255,255,255, .15)100%);
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

/* -------------- BG Pattern Mask -------------- */
.bg-alfa-pattern{
    background-size: cover;
	position: relative;
}
.bg-alfa-pattern:before{
	content: ' ';
	background:url(../img/pattern-bg-1.png) repeat;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

/* -------------- Slash BG -------------- */
.slash{
	background: linear-gradient(123deg, #fff 0%, #fff 65%, #f1fcff 65%, #f1fcff 100%);
}

/* 
===========================================================
   # トップページガイド｜Top Page Guide
===========================================================
*/
.banner{
    position: relative;
    overflow: hidden;
    padding: ; /* 全画面の時：0 */
    aspect-ratio: 16 / 5;
    background: var(--black);
}
.banner.bn-1:before,
.banner.bn-2:before,
.banner.bn-3:before,
.banner.bn-4:before,
.banner.bn-5:before,
.banner.bn-6:before{
    position: absolute;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    transition: all .24s ease-out;
    filter: brightness(0.6);
}
.banner:hover:before{
    transform: scale(1.04, 1.04);
    filter: brightness(0.75);
}

.banner a{
    position: relative;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    z-index: 1;
    height: 100%;
    text-decoration: none;
    color: #fff
}
.banner h3{
    font-size: 1.25rem !important;
    font-weight: bold;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
    text-shadow: 0 0 2px rgba(0,0,0, .75);
    margin-bottom: 0;
}
.banner p{
    font-size: 13px;
    text-align: center;
}

@media (min-width: 992px){
    .banner{
        aspect-ratio: 16 / 9;
    }
    .banner h3{
        font-size: 2rem !important;
        font-weight: bold;
        line-height: 1.4;
    }
}

/* 
===========================================================
   # Call to Action｜Teaser
===========================================================
*/
.teaser{
	color: var(--white);
    background-attachment: scroll;
    height: 150px;
}
@media screen and (min-width: 992px){
    .teaser{
        background-attachment: fixed;
        height: 280px;
    }
    .teaser h1, .teaser h2, .teaser h3, .teaser h4, .teaser h5, .teaser h6{
        color: var(--white);
    }
}

/* 
===========================================================
   # Showcase
===========================================================
*/ 
.showcase .showcase-text{
    padding: 1rem;
}

@media (min-width: 992px){
  .showcase .showcase-text{
        padding: 3rem;
  }
}

/* 
===========================================================
   # リンク｜Link
===========================================================
*/
/* -------------- Normal Link -------------- */
a:link, a:visited, a:focus{
  color: var(--link-color);
  transition: .17s;
}
a:active{
  color: var(--gray);
}
a:hover{
  color: var(--gray);
  transition: .12s;
  text-decoration: none;
}

/* -------------- Dark Link -------------- */
a.dark-link:link, a.dark-link:visited, a.dark-link:focus{
    color: var(--dark);
    transition: color .17s ease;
}
a.dark-link:active{
    color: var(--dark);
}
a.dark-link:hover{
    color: var(--darker);
    transition: color .17s ease;
    text-decoration: none;
}

/* -------------- White Link -------------- */
a.white-link:link, a.white-link:visited, a.white-link:focus{
    color: var(--white);
    transition: color .17s ease;
}
a.white-link:active{
    color: var(--white);
}
a.white-link:hover{
    color: var(--lighter);
    transition: color .17s ease;
    text-decoration: none;
}

a, img{
    user-drag: none;
    -webkit-user-drag: none;
    -moz-user-select: none;
}

/* 
===========================================================
   # ボタン｜Button
===========================================================
*/
/* 送信ボタン */
.btn-send{
    background: var(--btn-send);
    padding: 7px 13px 9px;
    color: #fff;
    border-radius: 1px;
    transition: .3s ease;
    border: 1px solid var(--white);
    letter-spacing: 0.75rem;
}
.btn-send > span{
    margin-left: 0.75rem;
}
.btn-send:hover{
    background: var(--btn-send-hover);
    color: var(--white);
    transition: .2s ease;
}

a.btn-link:link, a.btn-link:visited, a.btn-link:focus{
    display: inline-block;
    text-align: center;
    padding: 3px 18px 4px;
    background: #f4a20f; /*LINE #0ac655*/
    color: #fff !important;
    font-weight: bold;
    text-decoration: none;
    border-radius: 999px;
    text-shadow: 0 0 2px rgba(0,0,0, .25);
    transition: .3s ease;
}
a.btn-link:hover{
    color: #fff;
    transition: .17s ease;
    text-decoration:  none;
    opacity: .85;
}

.btn-link-l{
    display: block;
    text-align: center;
    padding: 8px 25px 10px;
    background: #8dc254;
    color: #fff !important;
    font-weight: bold;
    text-decoration: none;
    border-radius: 999px;
    transition: .3s ease;
}
.btn-link-l:hover{
    color: #fff;
    transition: .17s ease;
    text-decoration:  none;
    opacity: .8;
}

.btn-link-p{
    display: block;
    text-align: center;
    padding: 8px 25px 10px;
    background: #f993a0;
    color: #fff !important;
    font-weight: bold;
    text-decoration: none;
    border-radius: 999px;
    transition: .3s ease;
}
.btn-link-p:hover{
    color: #fff;
    transition: .17s ease;
    text-decoration:  none;
    opacity: .8;
}

/* 
===========================================================
   # Page Section padding
===========================================================
*/
section.first-section {
    padding-top: 10px !important;
    padding-bottom: 30px !important;
    overflow: hidden;
}
section.page-section {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
    overflow: hidden;
}

@media (min-width: 992px) {
    section.first-section {
        padding-top: 10px !important;
        padding-bottom: 40px !important;
    }
    section.page-section {
        padding-top: 40px !important;
        padding-bottom: 40px  !important;
    }
}

/* 
===========================================================
   # よく使うもの
===========================================================
*/
/* リスト(liタグ)の左余白をなくす：https://nishinatoshiharu.com/list-padding-left/ */
/* -------------- Normal LI -------------- */
ul.normal{
    margin-left: -1rem;
}
ul.normal li{
    list-style-type: none;
    text-indent: 0; /* -1em */
    margin-bottom: 3px;
    margin-left: 0;
}

/* -------------- Standard LI -------------- */
ul.standard{
    margin-left: -1.5rem;
    margin-bottom: 0;
}
ul.standard li{
    list-style-type: disc;
    text-indent: 0; /* -1em */
    margin-bottom: 3px;
    margin-left: 0;
    padding-left: 0;
}
@media (min-width: 992px) {
    ul.standard{
        margin-left: -0.5rem;
        margin-bottom: 0;
    }
}

/* -------------- Summary LI -------------- */
ul.summary{
    margin-left: -1rem;
    margin-bottom: 0;
}
ul.summary li{
    list-style-type: ;
    text-indent: 0; /* -1em */
    margin-bottom: 0;
    margin-left: 0;
}

/* -------------- Asterisk LI -------------- */
ul.asterisk{
    margin-left: -1em;
    margin-bottom: 0;
}
ul.asterisk li {
    list-style-type: none;
    text-indent: -2em; /* -1em */
    margin-bottom: 0;
    margin-left: 0;
}
ul.asterisk li:before {
    display: inline;
    content: "※ ";
}

/* -------------- ex LIST -------------- */
ul.ex-list{
    margin-left: -1.75em;
    margin-bottom: 0;
}
ul.ex-list li {
    list-style-type: none;
    text-indent: -1.3em; /* -1em */
    margin-bottom: 0;
    margin-left: 0;
}
ul.ex-list li:before {
    display: inline;
    content: "ex. ";
}

/* 
===========================================================
   # Utility
===========================================================
*/
/* -------------- Size & Style -------------- */
.smallest{font-size: 12px !important;}
.small{font-size: 85% !important;}
.smaller{font-size: 90% !important;}
.larger{font-size: 110% !important;}
.large{font-size: 120% !important;}
.xlarge{font-size: 150% !important;}
.xxlarge{font-size: 165% !important;}
.largest{font-size: 180% !important;}
.largest-more{font-size: 200% !important;}
.copy{color: rgba(0,0,0, .5);}
.bold{font-weight: var(--bold) !important;}
.xbold{font-weight: var(--xbold) !important;}
.xxbold{font-weight: var(--xxbold) !important;}
.pc-bold{font-weight: var(--normal) !important;}
@media screen and (min-width: 992px){
    .pc-bold{font-weight: var(--bold) !important;}
}
.normal{font-weight: var(--normal) !important;}
.capitalize{text-transform: capitalize !important;}
.lowercase{text-transform: lowercase !important;}
.ts-none{text-transform: none !important;}
.lh-16{line-height: 1.6 !important;}
.lh-1{line-height: 1 !important;}

/* -------------- Text Color -------------- */
.white{color: #fff !important;}
.light{color: #fafafa !important;}
.dark{color: #333 !important;}
.black{color: #000 !important;}
.lightgray{color: #999 !important;}
.color{ color: #e41919 !important;}
.glass{ opacity: .5;}

/* -------------- BG Color -------------- */
.bg-white{background: #fff !important;}
.bg-light{background: #f9f9f9 !important;}
.bg-gray-lighter{background: #f7ffff !important;}
.bg-gray{background: #fafafa !important;}
.bg-dark{background: #333 !important;}
.bg-black{background: #000 !important;}
.bg-dark-blue{background: #257db7 !important;}
.bg-blue{background: #2cbcd9 !important;}
.bg-lightblue{background: #fafaff !important;}
.bg-blue-lighter{background: #f3fcfe !important;} /* #f1fffd */
.transp{background: transparent !important;}

/* -------------- Text Shadow -------------- */
.text-shadow{
    text-shadow: 0 0 3px rgba(0,0,0, .7);
}
.text-shadow-white{
    text-shadow: 0 0 3px rgba(255,255,255, .6);
}
.shadow{
    -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, .1);
    box-shadow: 0px 0px 10px rgba(0, 0, 0, .9);
}
.white-shadow{
    -webkit-box-shadow: 0px 0px 200px rgba(255, 255, 255, .2);
    box-shadow: 0px 0px 200px rgba(255, 255, 255, .2);
}

/* -------------- etc. -------------- */
.align-center{ text-align:center !important;}
.align-left{ text-align:left !important;}
.align-right{ text-align:right !important;}
.left{float:left !important;}
.right{float:right !important;}
.align-center-left{text-align: left !important;}
.align-left-center{text-align: center !important;}
.align-left-right{text-align: right !important;}
.align-right-center{text-align: center !important;}
@media screen and (min-width: 992px){
    .align-center-left{text-align: center !important;}
	.align-left-center{text-align: left !important;}
	.align-right-center{text-align: right !important;}
}
.relative{position:relative;}
.inline-block{display:inline-block;}
.hidden{display:none;}
hr.hr-light{border-top: 1px solid #eee;margin: 0;}

/* -------------- 前後に線 -------------- */
.catch {
  display: flex;
  align-items: center; /* 垂直中心 */
  justify-content: center; /* 水平中心 */
}
.catch:before, .catch:after {
  border-top: 1px solid #ccc;
  content: "";
  width: 2.25em; /* 線の長さ */
}
.catch:before {
  margin-right: 0.75rem; /* 文字の右隣 */
}
.catch:after {
  margin-left: 0.75rem; /* 文字の左隣 */
}

/* -------------- Marker -------------- */
/* 薄いイエローの太マーカー*/
.marker{ background: rgba(0, 0, 0, 0) linear-gradient(transparent 50%, #fdffbe 0%) repeat scroll 0 0; font-weight: bold;padding: 0 1px 0 0;line-height: 1;}
/* 薄いピンクの太マーカー*/
.pink-marker{ background: rgba(0, 0, 0, 0) linear-gradient(transparent 50%, #ffecec 0%) repeat scroll 0 0; font-weight: bold;padding: 0 1px 0 0;line-height: 1;}
/* イエローの太マーカー*/
.yellow-marker{ background: rgba(0, 0, 0, 0) linear-gradient(transparent 50%, #feffa2 0%) repeat scroll 0 0; font-weight: bold;color: #52a2d4;}
/* イエローの細いマーカー*/
.yellow-marker-narrow{ background:rgba(0, 0, 0, 0) linear-gradient(transparent 80%, #feffa2 0%) repeat scroll 0 0;font-weight: bold;color: #52a2d4;}


/*
===========================================================
	 # 共通
===========================================================
*/
.bg-lightblue{
    background: #fffef0; /* fffef3 */
}
.bg-yellow{
    background: #fff3a5; /*fdffbe*/
}
.bg-green{
    background: #91d1cf; /* 7fcac7 */
}
.bg-light-green{
    background: #edf6ec; /* 7fcac7 */
}
.bg-pattern{
    background: url(../img/bg-dot60.png)  repeat;
}
@media screen and (max-width: 991px){
    .gmap > iframe{
        height: 280px !important;
    }
}
/*
===========================================================
   # スマホ 電話・メール｜画面下部(スマホのみ有効)
===========================================================
*/
/*--------  スマホ画面下部（スマホのみ有効） --------*/

/* スマホ以外で電話自動発信を無効にする */
a[href*="tel:"]{
        pointer-events: ;
        text-decoration: none;
        color: ;
    }
a[href*="tel:"]:hover{
    text-decoration: none;
}
@media (min-width: 768px){
    a[href*="tel:"]{
        pointer-events: none;
        cursor: default;
        text-decoration: none;
        color:  !important;
    }
}

/*メニューをページ下部に固定*/
#sp-fixed-menu{
   position: fixed;
   width: 100%;
   height: ;
   bottom: 0;
   font-size: 0;
   opacity: .975;
   z-index: 1;
}

/*メニューを横並びにする*/
#sp-fixed-menu ul{
   display: flex;
   list-style: none;
   padding: 0;
   margin: 0;
   width: 100%;
}
#sp-fixed-menu li{
   justify-content: center;
   align-items: center;
   width: 100%;
   padding: 0;
   margin: 0;
   font-size: 15px;
   font-weight: bold;
   border-right: 1px solid rgba(255,255,255, .8);
   border-top: 1px solid rgba(255,255,255, .8);
   background: #0ac655;
   
   line-height: 1;
   padding: 8px 0;
}
#sp-fixed-menu li:last-child{
   border-right: none;
   background: linear-gradient(165deg, #8af486, #57ba45);
   text-shadow: 0 0 3px rgba(0,0,0, .15);
}

/*ボタンを調整*/
#sp-fixed-menu li a{
	color: #fff;
	text-align: center;
	display: block;
	width: 100%;
}
#sp-fixed-menu li a > img{
	margin-bottom: 2px;
}
#sp-fixed-menu li a > div{
	font-size: 10px;
	font-weight: 400;
	margin-top: 2px;
}

/*スマホ発信ボタン用フッター余白調整*/
.footer-section{
	padding: 5px 0 50px;
}
.footer-section a{
	color: #333;
	text-decoration: none;
}

/*PCの場合にはメニューを表示させない*/
@media (min-width: 768px) {
	.sp-contact{
		display: none;
	}
	.footer-section{
		padding: 5px;
	}
}

/*
===========================================================
	 # フッター｜Footer
===========================================================
*/
footer{
    background: var(--footer);
    color: #fff;
}

ul.footer-menu{
    list-style-type: none;
    padding: 0;
    margin-bottom: 0;
    overflow: hidden;
    line-height: 1;
}
ul.footer-menu li{
    display: inline;
    padding: 0 10px;
    float: left;
}
ul.footer-menu li:first-child{
    padding-left: 0;
}
ul.footer-menu li+li{
    border-left: 1px solid #fafafa;
}
ul.footer-menu li a:hover{
    text-decoration: underline;
}
.footer-logo{
    height: 50px;
    width: auto;
}
@media (min-width: 992px){
    .footer-logo{
        height: 56px;
        width: auto;
    }
}

/*
===========================================================
	 # トップページ
===========================================================
*/

/* 
===========================================================
   # 業務内容
===========================================================
*/
/*-------- オプション --------*/
.service-box{
    position: relative;
    border: 1px solid #ccc;
    border-radius: 10px;
    background: #fff;
    padding: 10px 10px;
}
.service-box p{
    line-height: 1.6;
    margin-bottom: 2px;
}
.service-box h4{
    color: var(--service-h4);
    padding-bottom: 2px;
    border-bottom: 1px solid #cfcfcf;
    margin-bottom: 5px;
}

@media (min-width: 992px){
    .service-box h4{
        margin-bottom: 7px;
    }
}

/*
===========================================================
	 # 会社概要｜Information
===========================================================
*/
/* -------------- 会社概要 -------------- */
#recruit-table dl dt{
	width: 100%;
	border-top: 1px solid #e0e0e0;
	margin: 0;
	padding: 15px 0 0 3px;
}
#recruit-table dl dd{
	margin: 0 ;
	padding: 5px 0 15px;
	padding-left: 3px;
	border-top: none;
}
#recruit-table dl:last-child{
	border-bottom: 1px solid #e0e0e0;
}

@media (min-width: 992px){
	#recruit-table dl{
        background: #f9f9ff;
    }
	#recruit-table dl dt{
		width: 235px;
		margin: 0;
		padding: 20px 3px;
		text-align: center;
		float: left;
		clear: left;
	}
	#recruit-table dl dd{
		margin: 0 0 0 235px;
		padding: 20px 3px;
		padding-left: 20px;
		border-top: 1px solid #e0e0e0;
		background: #fff;
	}
}

/* -------------- Line List -------------- */
ul.line-list{
    padding: 0 3px;
}
ul.line-list li{
    list-style-type: none;
    text-indent: -1.5rem;
    padding-left: 1.75rem;
    padding-bottom: 15px;
    margin-bottom: 15px;
    border-bottom: 1px dashed #ccc;
}
ul.line-list li:first-child{
    padding-top: 15px;
    border-top: 1px dashed #ccc;
}
ul.line-list li:before{
    display: inline;
    content: "✓";
    color: ;
    margin-right: 0.5rem;
}

/*
===========================================================
	 # 個人情報保護方針｜policy
===========================================================
*/
#policy h3{
    font-size: 1rem;
    font-weight: bold;
}
ol.company-list{
    padding-left: 1.25rem;
}
ol.company-list li{
    margin-bottom: 5px;
}
@media (min-width: 992px) {
    #policy h3{
        font-size: 1.2rem;
    }
    ol.company-list{
        padding-left: 2rem;
    }
}



.nav-right{
    list-style-type: none;
    margin-bottom: 0;
    
}

.nav-right li{
    display: inline-block;
    border-radius: 10px;
    background: #f0f0f0;
    list-style-type: none;
}

/* 
  # テキストの左右に水平ライン 2
*/
.side-lines{
	display: flex;
	align-items: center;
	padding: 0 0 0 0;
}
.side-lines:before, .side-lines:after{
	content: "";
	flex-grow: 1;
	height: 1px;
	background: #ccc;
	display: block;
}
.side-lines:before{
	margin-right: 0.75em;
}
.side-lines:after{
	margin-left: 0.75em;
}