/* ========================================================
TABATA Co.,ltd.
Service Plain Page Style Sheet [flow/area/maker]
First Update 2018-02-08
Last  Update 2018-02-08
Creat by Basic Plus Design Inc.
========================================================= */
/*=========================================================
#  Flow
==========================================================*/
/* ---------------------------------------------------------
   Hero
---------------------------------------------------------- */
#flow .c-hero-overlay { background: url(../images/service/hero-flow.jpg) no-repeat center center; background-size: cover; }
/* ---------------------------------------------------------
   #flow > .c-list
---------------------------------------------------------- */
#flow .c-list { margin-top: 140px; }
#flow .c-list dt { width: 100%; padding: 140px 0 0; text-align: center; text-indent: -9999px; background-repeat: no-repeat; background-position: center bottom; background-size: auto 70px; }
#flow .c-list dd { padding: 0 1em 40px; }
#flow .c-list dd h4 { margin: 1em 0; text-align: center; }
#flow .c-list dt.c-item1 { background-image: url(../images/service/flow/ico-flow1.svg); }
#flow .c-list dt.c-item2 { background-image: url(../images/service/flow/ico-flow2.svg); }
#flow .c-list dt.c-item3 { background-image: url(../images/service/flow/ico-flow3.svg); }
#flow .c-list dt.c-item4 { background-image: url(../images/service/flow/ico-flow4.svg); }
#flow .c-list dt.c-item5 { background-image: url(../images/service/flow/ico-flow5.svg); }
#flow .c-btn-more { text-align: center; }

@media screen and (min-width: 768px) {
#flow .c-list dt { width: 180px; padding-top: 13em; letter-spacing: 0; text-indent: 0; text-align: center; background-position: center 5em; }
#flow .c-list dd { width: calc(100% - 180px); padding: 40px 0; }
#flow .c-list dd h4, #flow .c-btn-more { text-align: left; }
}
/*=========================================================
#  Area
==========================================================*/
/* ---------------------------------------------------------
   Hero
---------------------------------------------------------- */
#area .c-hero-overlay { background: url(../images/service/hero-area.jpg) no-repeat center center; background-size: cover; }
/* ---------------------------------------------------------
   .p-area-content
---------------------------------------------------------- */
.p-area-content img { margin: 0 auto 20px; }
/* ---------------------------------------------------------
   .p-area-list
---------------------------------------------------------- */
.p-area-list .c-flwrap { flex-direction: row; justify-content: center; margin-left: 7%; }
.p-area-list::before, .p-area-list::after { clear: both; content: ""; display: table; width: 100%; height: 1px; margin: 20px 0; margin-top: 20PX; outline: 1px dotted ButtonText; }
.p-area-list li.c-cell { font-size: 120%; }
.p-area-list li.c-cell-all { width: 100%; font-size: 90%; margin: 2em 0 -1em -1.5em; }
.p-area-list li.c-cell-all:first-child { margin-top: 0; }
.p-area-list li.off a:link { color: #463D1D; }
.p-area-list li.off a:link :before { color: #463D1D; content: "\0025a0"; }
.p-area-list li.on a:link :before { content: "\0025a1"; }
.p-area-list li.on a:visited :before { content: "\0025a0"; }
.p-area-list li.on a:hover { color: #999; }
.p-area-list li.on a:hover :before { color: #463D1D; content: "\0025a0"; }

@media screen and (max-width: 768px) {
.p-area-list .c-flwrap { margin-left: 4%; }
}

@media screen and (max-width: 639px) {
.p-area-list .c-flwrap.c-row-5 .c-cell { width: 33%; }
}

@media screen and (max-width: 449px) {
.p-area-list .c-flwrap.c-row-5 .c-cell { width: 50%; }
}
/*=========================================================
#  Maker
==========================================================*/
/* ---------------------------------------------------------
   Hero
---------------------------------------------------------- */
#maker .c-hero-overlay { background: url(../images/service/hero-maker.jpg) no-repeat center center; background-size: cover; }
/* ---------------------------------------------------------
   list
---------------------------------------------------------- */
#maker h3 { border-bottom: 1px solid #463d1d; padding-top: 60px; }
img.imagemaker { height: 20px; }