@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap');

:root {
    --body-text: #252525;
    --nav-bg: #fff;
    --nav-active: #ffa500;
    --link-color: #5c8be2;
    --btn-send: #497bd0;
    --btn-send-hover: #5bbbb7;
    --bg-dark: ;
    --bg-darker: ;
    --bg-light: ;
    --bg-lighter: ;
    --text-light: ;
    --text-lighter: ;
    --text-dark: ;
    --text-darker: ;
    --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;
}

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

/* 
===========================================================
   # Style
===========================================================
*/
.font-alt{
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
}
.font-alt.bold{
    font-weight: 500 !important;
}
.font-alt.xbold{
    font-weight: 700 !important;
}

.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;
}

/* 
===========================================================
   # 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.875em;
    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;
    }
}

/* 
===========================================================
   # Heading
===========================================================
*/
/* -------------- Heading -------------- */
strong{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;font-weight: normal;line-height: 1.6;letter-spacing: 0.04em;}
}


/* -------------- Custom Header -------------- */
h3.business{
    font-size: 120%;
    font-weight: bold;
    padding-bottom: 7px;
    margin-top: 1rem;
    margin-bottom: 13px;
    position: relative;
    border-bottom: solid 1px #eee;
}
h3.business:after{
    position: absolute;
    content: " ";
    display: block;
    padding-bottom: 0;
    border-bottom: solid 1px #8EC8DD;
    bottom: -1px;
    width: 30%;
}
@media (min-width: 992px){
    h3.business{
        font-size: 1.6rem;
        padding-bottom: 0;
        margin-top: 0;
    }
}

/* 
===========================================================
   # Heading images
===========================================================
*/
.hero-image{
    padding: 80px 0 80px;
}
.hero-slogan{
    background: rgba(255,255,255, .92);
    line-height: 1;
    font-size: 16px;
    font-weight: bold;
    padding: 8px 6px 8px 8px;
    margin: 5px 0;
}
.header-title{
    font-size: 26px;
    color: #222;
    padding: 30px 5%;
    text-align: center;
}

@media (min-width: 768px){
    .hero-image{
        padding: 120px 0 120px;
        padding-left: 3%;
    }
}

@media (min-width: 992px){
    .hero-image{
        padding: 120px 3% 120px;
    }
    .hero-slogan{
        font-size: 30px;
        padding: 10px 15px;
        margin: 6px 0;
    }
    .header-title{
        font-size: 34px;
        padding: 60px 5%;
        line-height: 1.4;
    }
}

/* -------------- Page Header -------------- */
.header-1{
    background:url(../img/top-header.jpg) right 50% top 40% / cover no-repeat;
    text-shadow: 0 0 4px rgba(0,0,0, 0);
}
.header-2{
    background:url(../img/stripe.jpg) left 50% top 50% / cover no-repeat;
    text-shadow: 0 0 0px rgba(0,0,0, 0);
}
.header-3{
    background:url(../img/stripe.jpg) left 50% top 50% / cover no-repeat;
    text-shadow: 0 0 3px rgba(0,0,0, 0);
}
.header-4{
    background:url(../img/stripe.jpg) left 50% top 50% / cover no-repeat;
    text-shadow: 0 0 3px rgba(0,0,0, 0);
}
.header-5{
    background:url(../img/stripe.jpg) left 50% top 50% / cover no-repeat;
    text-shadow: 0 0 3px rgba(0,0,0, 0);
}

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

/* -------------- Page内 Content -------------- */
.bg-1{
    background:url(../img/stripe.jpg) left 0% top 50% / cover no-repeat;
    text-shadow: 0 0 0px rgba(0,0,0, .4);
}
.bg-2{
    background:url(../img/white-dots.jpg) 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/chairs.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: ;
	position: relative;
	height:100%;
}
.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: ;
	position: relative;
	height:100%;
}
.bg-alfa-dark:before{
	content: ' ';
	background-color: rgba(0,0,0, .35);
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

/* -------------- BG Light Mask -------------- */
.bg-alfa-light{
    background-size: ;
	position: relative;
	height:100%;
}
.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: ;
	position: relative;
	height:100%;
}
.bg-alfa-center:before{
	content: ' ';
	background: linear-gradient(90deg, rgba(255,255,255, .45), rgba(255,255,255, .65) 50%, rgba(255,255,255, .45)100%);
	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;
}
@media screen and (min-width: 992px){
    .teaser{
        background-attachment: fixed;
    }
    .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:link.dark-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:link.white-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(--light);
    transition: color .17s ease;
    text-decoration: none;
}

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

/* 
===========================================================
   # ボタン｜Button
===========================================================
*/
/* 送信ボタン */
.btn-send{
    background: var(--btn-send);
    padding: 7px 13px 9px;
    color: #fff;
    letter-spacing: 0.25rem;
    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;
}

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

.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;
}

/* -------------- 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: -1.75em;
    margin-bottom: 0;
}
ul.asterisk li {
    list-style-type: none;
    text-indent: -1.3em; /* -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. ";
}

/* -------------- FAQ -------------- */
.faq dl dd{

}


/* 
===========================================================
   # 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: 135% !important;}
.largest{font-size: 150% !important;}
.copy{color: rgba(0,0,0, .5);}
.bold{font-weight: bold !important;}
.normal{font-weight: 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-lightblue{background: #eafefe !important;}
.bg-blue-lighter{background: #f1fffd !important;}
.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;}

/* -------------- 前後に線 -------------- */
.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%, #ffffcc 0%) repeat scroll 0 0; font-weight: bold;padding: 0 5px 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-light-pink{
    background: rgba(254,238,240, .70); /* fffef3 */
}
.bg-pink{
    background: #ff7f9d;
}
.bg-light-yellow{
    background: #fffef0; /* fffef3 */
}
.bg-yellow{
    background: #fef08d;
}
.bg-green{
    background: #91d1cf; /* 7fcac7 */
}
.bg-light-green{
    background: #edf6ec; /* 7fcac7 */
}
.bg-pattern{
    background: url(../img/bg-dot60.png)  repeat;
}

/*---------- リボン ----------*/
.ribbon{
  display: inline-block;
  position: relative;
  height: 50px;/*リボンの高さ*/
  line-height: 50px;/*リボンの高さ*/
  text-align: center;
  padding: 0 30px;/*横の大きさ*/
  font-size: 18px;/*文字の大きさ*/
  background: #f57a78;/*塗りつぶし色*/
  color: #FFF;/*文字色*/
  box-sizing: border-box;
  margin: 0 auto;
}
.ribbon:before, .ribbon:after{ 
  position: absolute;
  content: '';
  width: 0px;
  height: 0px;
  z-index: 1;
}
.ribbon:before{
  top: 0;
  left: 0;
  border-width: 25px 0px 25px 15px;
  border-color: transparent transparent transparent #FFF3F5;
  border-style: solid;
}
.ribbon:after{
  top: 0;
  right: 0;
  border-width: 25px 15px 25px 0px;
  border-color: transparent #FFF3F5 transparent transparent;
  border-style: solid;
}


.ribbon2{
  display: inline-block;
  position: relative;
  height: 50px;/*高さ*/
  line-height: 50px;/*高さ*/
  text-align: center;
  padding: 0 40px 0 18px;/*文字の左右の余白*/
  font-size: 18px;/*文字サイズ*/
  background: #8EC8DD;/*背景色*/
  color: #FFF;/*文字色*/
  box-sizing: border-box;
}

.ribbon2:after{
  position: absolute;
  content: '';
  width: 0px;
  height: 0px;
  z-index: 1;
}

.ribbon2:after{
  top: 0;
  right: 0;
  border-width: 25px 15px 25px 0px;
  border-color: transparent #FFF3F5 transparent transparent;
  border-style: solid;
}

.about{
    border: 1px dashed #ccc;
    border-radius: 10px;
    background: #fff;
}

.story{
    border: 1px dashed #ccc;
    border-radius: 10px;
    background: rgba(254,238,240, .35);
}

/*
===========================================================
	 # フッター
===========================================================
*/
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;
    font-family: "游ゴシック体", "YuGothic", "游ゴシック Medium", 'Yu Gothic Medium', "ヒラギノ角ゴ ProcN", 'Hiragino Kaku Gothic ProN', "メイリオ", Meiryo, sans-serif;
    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-copy{
    line-height: 1;
    color: #fff;
    font-size: 16px;
}

.footer-logo{
    height: 130px;
    width: auto;
}
@media (min-width: 992px){
    .footer-logo{
        height: 180px;
        width: auto;
    }
}

ul.footer-list{
    list-style-type: none;
    padding: 0;
}
ul.footer-list li {
    display: inline-block;
    line-height 1:
}

.attention{
    background: #fff;
    border-radius: 10px;
    border: dashed 1px #ccc;
}

/*
===========================================================
	 # よくある質問｜FAQ
===========================================================
*/
/* アコーディオン */
#accordion .card{
	border: none;
}
#accordion .card-header{
	padding: 0 1.25rem;
	border-bottom: none;
	border-radius: 4px;
	transition:  all .2s ease;
	background-color: #fdffcb;
}
#accordion .card-header:hover{
	background-color: rgba(0,0,0, .02);
	background-color: #fdffcb;
	transition:  all .2s ease;
}
.card-link{
	padding: 1rem 1rem 1rem 0 !important;
	font-weight: bold;
}
a.card-link:link, a.card-link:visited, a.card-link:focus {
	color: #333;
	transition: .17s;
}
a.card-link:active {
	color: #333;
}
a.card-link:hover {
	color: #333;
	transition: .12s;
	text-decoration: none;
}

#accordion a[data-toggle="collapse"]{
	display: block;
	padding: 5px 0;
	text-decoration: none;
	position: relative;
}

#accordion a[data-toggle="collapse"]:after{
	content:"";
	display: block;
	width: 6px;
	height: 6px;
	border-top: #666 1px solid;
	border-right: #666 1px solid;
	position: absolute;
	right: 5px;
	top: 0;
	bottom: 0;
	margin: auto;
}

#accordion a[aria-expanded=false]:after{
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
	transition-duration: .2s;
}
#accordion a[aria-expanded=true]:after{
	-webkit-transform: rotate(-225deg);
	transform: rotate(-225deg);
	transition-duration: .2s;
}
#accordion a.show[aria-expanded=true]:after{
	-webkit-transform: rotate(-225deg);
	transform: rotate(-225deg);
	transition-duration: .2s;
}
#accordion a{
    user-drag: none;
    -webkit-user-drag: none;
    -moz-user-select: none;
}

@media screen and (min-width: 992px){
    .card-link{
	    padding: 1rem 2rem 1rem 0 !important;
    }
}


/* カラー背景 */
.faq dt{
    padding: 10px 10px 10px 35px;
    border-radius: 5px;
    background: #f993a0;
    text-indent: -25px;
    color: #fff;
    text-shadow: 0 0 2px rgba(0,0,0, .175);
}
.faq dt:before{
    content: "Q.";
    font-weight: bold;
    margin-right: 7px;
}
.faq dd{
    margin: 12px 10px 0 35px;
    text-indent: -25px;
}
.faq dd:before{
    content: "A.";
    color: #53abcb;
    font-weight: bold;
    margin-right: 7px;
}

/*
===========================================================
	 # 会社案内｜Information
===========================================================
*/
.w-philosophy{width: 97% !important;}

@media (min-width: 768px){
    .w-philosophy{max-width: 90% !important;}
}
@media (min-width: 992px){
    .w-philosophy{width: 900px !important;}
}
@media (min-width: 1200px){
    .w-philosophy{width: 980px !important;}
}
.philosophy{
    background: #fff !important;
    border: 1px dashed #ccc;
    border-radius: 10px;
    padding: 35px 10px;
}

/*-------- 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;
}

/*----- 会社概要 ----- */
#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: #f5f5f5;
    }
	#recruit-table dl dt{
		width: 200px;
		margin: 0;
		padding: 12px 3px;
		text-align: center;
		float: left;
		clear: left;
	}
	#recruit-table dl dd{
		margin: 0 0 0 200px;
		padding: 12px 3px;
		padding-left: 20px;
		border-top: 1px solid #e0e0e0;
		background: #fff;
	}
}

/*
===========================================================
	 # 個人情報保護方針｜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: #ddd;
	display: block;
}
.side-lines:before{
	margin-right: 1em;
}
.side-lines:after{
	margin-left: 1em;
}








.nav-menu-mail{
    background: #58aecc;
    padding: 15px 15px;
    transition: all .17s ease;
}
.nav-menu-mail:hover{
    background: #44a5c6;
}
.nav-menu-line{
    background: #0ac636;
    padding: 15px 20px;
    transition: all .17s ease;
}
.nav-menu-line:hover{
    background: #1ab63f;
}
.right-menu-icon{
    display: block;
    margin: 0 auto;
    width: 30px;
    height: 30px;
}


/* 
===========================================================
   # プライシングテーブル｜Pricing Table
===========================================================
*/
#price-table th, td{
	text-align: center;
    vertical-align: middle !important;
    border: solid 1px #ccc;
}
#price-table thead > tr > th{
    padding-top: 20px;
    padding-bottom: 20px;
	background: #106fb7;
	color: #fff;
	text-shadow: 0 0 2px rgba(0,0,0, 0);
}
#price-table th{
	background: rgba(255,200,100, .1);
	background: rgba(0,0,0, .02);
}
#price-table td{
	background: ;
	border: solid 1px #ccc;
	font-weight: normal;
}
	
@media only screen and (max-width:768px){
	#price-table{
		display: block;
		border: none;
	}
	#price-table thead{
		display: none;
	}
	#price-table tbody{
	    display: block;
	}
	#price-table tbody tr{
		display: block;
		padding: 0;
	}
	#price-table tbody th,
	#price-table tbody td{
		display: list-item;
		border: none;
		list-style-type: none;
		padding: 10px 15px;
	}
	#price-table tbody tr{
		padding-bottom: 15px;
	}
	#price-table tbody th{
        background: #106fb7;
		color: #fff;
		margin-bottom: 0;
	}
	#price-table tbody td{
		padding: 10px 15px !important;
		text-align: right;
border: solid 1px #ccc;
border-top: none;;
	}
	#price-table tbody td:nth-of-type(1):before{
	    content: "備考";
	    font-weight: bold;
	    float: left;
    }
	#price-table tbody td:nth-of-type(2):before{
		content: "台数";
	    font-weight: bold;
	    float: left;
    }
	#price-table tbody td:nth-of-type(3):before{
		content: "メーカー";
		font-weight: bold;
		float: left;
    }
}