@charset "UTF-8";

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

/*
font-family: 'Roboto', sans-serif;
font-family: 'Noto Sans JP', sans-serif;
font-family: 'Noto Serif JP', serif;
*/

/* ---------------------------------------------------------------------------
//  base
--------------------------------------------------------------------------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
*::before,
*::after { box-sizing: border-box; }
html, body { width: 100%; height: 100%; }
img, iframe { border: 0; vertical-align: bottom; }
ul, ol { list-style-type: none; }
a { text-decoration: none; }
mark { font-weight: bold; color: inherit; background-color: transparent; }
em { font-style: normal; }
address { font-style: normal; }
table { border-collapse: collapse; border-spacing: 0; }
input, select { vertical-align: baseline; }

.cf::after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }

:root {
  --roboto: 'Roboto', sans-serif;
  --sans: 'Noto Sans JP', sans-serif;
  --serif: 'Noto Serif JP', serif;
  --xxsmall: 10px;
  --xsmall: 11px;
  --small: 13px;
  --regular: 14px;
  --large: 18px;
  --xlarge: 20px;
  --xxlarge: 26px;
  --xxxlarge: 32px;
  --blk: #1a1a1a;
  --gry0: #c1c1c1;
  --gry1: #dedede;
  --gry2: #f2f2f2;
  --gry3: #f9f9f9;
  --home: #a79e9b;
  --print: #fcbc49;
  --web: #7cc2f8;
  --open: #9bcc4e;
  --sign: #d57ed2;
  --shop: #f5702d;
  --renew: #ffb9e4;
}

/* ---------------------------------------------------------------------------
//  all
--------------------------------------------------------------------------- */
body {
  font-family: var(--sans);
  font-weight: 400;
  font-size: var(--regular);
  color: var(--blk);
  line-height: 1.8;
  background: #FFF;
}
h1, h2, h3, h4, h5, h6 { font-weight: normal; line-height: 1.4; }

a { transition: .3s; color: var(--blk); }
@media screen and (min-width: 767.8px) {
  a:hover { opacity: .7; }
}
.preload a { transition: none !important; }

.wrap { min-width: 950px; height: 100%; margin: 0 auto; }
.inner { max-width: 950px; height: 100%; margin: 0 auto; position: relative; }
ul.indent li { text-indent: -1em; padding-left: 1em; }
ul.dot li::before { content: "・"; }
ol.num { counter-reset: li; }
ol.num > li { text-indent: -1.2em; padding-left: 1.2em; }
ol.num > li:before { content: counter(li) "."; counter-increment: li; padding-right: 5px; }
ol.brackets { counter-reset: li; }
ol.brackets > li { text-indent: -1.55em; padding-left: 1.55em; }
ol.brackets > li:nth-child(n+10) { text-indent: -2.1em; padding-left: 2.1em; }
ol.brackets > li:before { content: "(" counter(li) ")"; counter-increment: li; padding-right: 5px; }
hr { display: block; height: 1px; border: none; border-top: 1px solid rgba(255,255,255,0.2); margin: 1em 0; }
img.ImgBlock { display: block; }
img.cover { width: 100%; height: 100%; object-fit: cover; }
img.contain { width: 100%; height: 100%; object-fit: contain; }
img.auto { width: 100%; max-width: 100%; height: auto; }
.text-overflow { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.sml { font-size: 80%; }
.t-center { text-align: center; }
.t-right { text-align: right; }
.large { font-size: var(--xxxlarge); }


.flex { display: flex; justify-content: space-between; }
.flex.jstart { justify-content: flex-start; }
.flex.jend { justify-content: flex-end; }
.flex.jcenter { justify-content: center; }
.flex.fwrap { flex-wrap: wrap; }
.flex.fwrap.bottom > * { margin-bottom: 20px; }
.flex.istart { align-items: flex-start; }
.flex.iend { align-items: flex-end; }
.flex.icenter { align-items: center; }
.flex.half > * { width: 49%; }
.flex.half50 > * { width: 50%; }
.flex.third > * { width: 32%; }
.flex.quarter > * { width: 24%; }
.flex.reverse { flex-flow: row-reverse; }
.flex.third.fwrap::after { content: ""; width: 32%; display: block; }
.flex.quarter.fwrap::before { content: ""; width: 24%; display: block; order: 1; }
.flex.quarter.fwrap::after { content: ""; width: 24%; display: block; }

a.scale { overflow: hidden; }
a.scale img { transition: .3s; }
@media screen and (min-width: 767.8px) {
  a.scale:hover img { transform: scale(1.05); }
}


/* ---------------------------------------------------------------------------
//  header
--------------------------------------------------------------------------- */
header .line {
  padding: 8px 0;
  background: var(--gry2);
  margin-bottom: 10px;
}
header .line p {
  font-size: var(--small);
}
header .line li {
  font-size: var(--small);
  margin-left: 1em;
}
header .line li a::before {
  content: "▶";
  font-size: 8px;
  vertical-align: 2px;
  margin-right: 2px;
}
header .title {
  width: 300px;
  display: block;
  margin: 20px 0;
}

/* ---------------------------------------------------------------------------
//  nav
--------------------------------------------------------------------------- */
nav.global {
  border-top: 1px solid var(--gry2);
  border-bottom: 3px solid var(--gry2);
  margin-bottom: 20px;
}
.gmenu {
  margin-bottom: -3px;
}
.gmenu li {
  width: calc(100% / 7);
  text-align: center;
}
.gmenu li a {
  display: block;
  padding: 5px 0;
}
.gmenu .home a { border-bottom: 3px solid var(--home); }
.gmenu .print a { border-bottom: 3px solid var(--print); }
.gmenu .web a { border-bottom: 3px solid var(--web); }
.gmenu .open a { border-bottom: 3px solid var(--open); }
.gmenu .sign a { border-bottom: 3px solid var(--sign); }
.gmenu .shop a { border-bottom: 3px solid var(--shop); }
.gmenu .renew a { border-bottom: 3px solid var(--renew); }

@media screen and (min-width: 767.8px) {
  .gmenu a:hover { background: var(--gry2); opacity: 1; }
}

.gmenu li a::before {
  content: "";
  display: block;
  width: 50px;
  height: 50px;
  margin: 0 auto -5px;
}
.gmenu .home a::before { background: url(../img/icon-home1.png) center center / contain no-repeat; }
.gmenu .print a::before { background: url(../img/icon-print1.png) center center / contain no-repeat; }
.gmenu .web a::before { background: url(../img/icon-web1.png) center center / contain no-repeat; }
.gmenu .open a::before { background: url(../img/icon-open1.png) center center / contain no-repeat; }
.gmenu .sign a::before { background: url(../img/icon-sign1.png) center center / contain no-repeat; }
.gmenu .shop a::before { background: url(../img/icon-shop1.png) center center / contain no-repeat; }
.gmenu .renew a::before { background: url(../img/icon-renew1.png) center center / contain no-repeat; }


#sub .sidemenu1 {
  margin-bottom: 20px;
}
#sub .sidemenu1 li {
  border-bottom: 1px solid var(--gry1);
}
#sub .sidemenu1 li:first-child {
  border-top: 1px solid var(--gry1);
}
#sub .sidemenu1 li a::before {
  content: "";
  display: inline-block;
  width: 30px;
  height: 30px;
  margin-right: 8px;
  vertical-align: middle;
}
#sub .sidemenu1 .home a::before { background: url(../img/icon-home2.png) center center / contain no-repeat; }
#sub .sidemenu1 .print a::before { background: url(../img/icon-print2.png) center center / contain no-repeat; }
#sub .sidemenu1 .web a::before { background: url(../img/icon-web2.png) center center / contain no-repeat; }
#sub .sidemenu1 .open a::before { background: url(../img/icon-open2.png) center center / contain no-repeat; }
#sub .sidemenu1 .sign a::before { background: url(../img/icon-sign2.png) center center / contain no-repeat; }
#sub .sidemenu1 .shop a::before { background: url(../img/icon-shop2.png) center center / contain no-repeat; }
#sub .sidemenu1 .renew a::before { background: url(../img/icon-renew2.png) center center / contain no-repeat; }

#sub .sidemenu1 a {
  display: block;
  padding: 15px 0;
}

#sub .sidemenu2 {
  margin-bottom: 20px;
}

.sidetext {
  border-top: 3px solid var(--gry1);
  padding-top: 5px;
  margin-bottom: 20px;
}
.sidetext dt {
  font-weight: bold;
  margin-bottom: 5px;
}
.sidetext dd {
  font-size: var(--xsmall);
}

/* ---------------------------------------------------------------------------
//  footer
--------------------------------------------------------------------------- */
footer {
  margin-top: 60px;
  background: var(--gry1);
  padding: 80px 0;
}
footer .title {
  width: 250px;
  margin-bottom: 10px;
}
.footer-menu ul {
  margin-left: 3em;
}
.footer-menu li {
  font-size: var(--small);
  margin-bottom: .5em;
}
.footer-menu a::before {
  content: "▶";
  font-size: 8px;
  vertical-align: 2px;
  margin-right: 4px;
}

.copyright {
  background: var(--gry0);
  text-align: center;
  font-size: var(--xsmall);
  padding: 12px 0;
}

#TOPBTN {
  width: 50px;
  position: fixed;
  bottom: 50px;
  right: 20px;
  display: none;
  opacity: .8;
  z-index: 100;
}

/* ---------------------------------------------------------------------------
//  common
--------------------------------------------------------------------------- */
#main {
  width: 680px;
}
#sub {
  width: 220px;
}

.mv {
  margin-bottom: 30px;
}

.contact-bnr {
  margin: 40px 0;
}

.anchor {
  margin-top: -30px;
  padding-top: 30px;
}

/* ---------------------------------------------------------------------------
//  page
--------------------------------------------------------------------------- */
.mv.top {
  background: url(../img/mv.jpg) center center / cover no-repeat;
  height: 500px;
}
.mv.top .text {
  height: 100%;
  display: flex;
  align-items: center;
}
.mv.top h1 span {
  display: table;
  background: #ff92ba;
  color: #fff;
  padding: 0 10px;
  margin: 10px 0;
  font-size: var(--xxxlarge);
  transform: rotate(-5deg);
}


.top-item {
  margin-bottom: 60px;
}
.top-item h2 {
  font-size: var(--large);
  font-weight: 700;
  border-bottom: 1px solid var(--gry1);
  padding-bottom: 5px;
  margin-bottom: 10px;
}
.top-item h2.head {
  font-size: var(--xxlarge);
  font-weight: 400;
  border-left: 5px solid #ff92ba;
  border-bottom: none;
  padding-left: 10px;
}
.top-item h2.head span {
  display: block;
  font-size: var(--small);
  color: var(--gry0);
}
.top-item h3 {
  font-size: var(--regular);
  font-weight: 700;
  margin: 30px 0 5px;
}
.top-item p + p {
  margin-top: 1em;
}

.top-cat h2 {
  font-size: var(--xlarge);
  font-weight: 700;
  margin: 40px 0 10px;
}
.top-cat:not(.other) h2::before {
  content: "";
  display: inline-block;
  width: 30px;
  height: 30px;
  margin-right: 8px;
  vertical-align: -8px;
}
.top-cat.home h2::before { background: url(../img/icon-home2.png) center center / contain no-repeat; }
.top-cat.print h2::before { background: url(../img/icon-print2.png) center center / contain no-repeat; }
.top-cat.web h2::before { background: url(../img/icon-web2.png) center center / contain no-repeat; }
.top-cat.open h2::before { background: url(../img/icon-open2.png) center center / contain no-repeat; }
.top-cat.sign h2::before { background: url(../img/icon-sign2.png) center center / contain no-repeat; }
.top-cat.shop h2::before { background: url(../img/icon-shop2.png) center center / contain no-repeat; }
.top-cat.renew h2::before { background: url(../img/icon-renew2.png) center center / contain no-repeat; }

.more a {
  display: table;
  margin: 10px 0 0 auto;
  padding: 2px 20px;
  background: var(--gry0);
  color: #fff;
  border-radius: 30px;
}
.more a::before {
  content: "▶";
  font-size: 8px;
  vertical-align: 2px;
  margin-right: 5px;
}

.googlemap {
  width: 100%;
  height: 400px;
  margin-bottom: 10px;
}
.googlemap iframe {
  width: 100%;
  height: 100%;
}

/* --------------------------------------------------------------------------- */

.mv.sec {
  padding: 40px 0;
  text-align: center;
  color: #fff;
}
.mv.sec .icon {
  width: 80px;
  margin: 0 auto;
}
.mv.print { background: var(--print); }
.mv.web { background: var(--web); }
.mv.open { background: var(--open); }
.mv.sign { background: var(--sign); }
.mv.shop { background: var(--shop); }
.mv.renew { background: var(--renew); }
.mv.other {
  background: #bdbab8;
  padding: 60px 0;
}

.sec-item {
  margin-bottom: 80px;
}
.sec-item h2 {
  font-size: var(--large);
  font-weight: 700;
  border-bottom: 1px solid var(--gry1);
  padding-bottom: 5px;
  margin-bottom: 10px;
  text-indent: -1em;
  padding-left: 1em;
}
.sec-item h2::before {
  content: "▍";
}

.sec-item h3 {
  font-size: var(--regular);
  font-weight: 700;
  margin: 30px 0 5px;
}
.sec-item p + p {
  margin-top: 1em;
}

.sec-item .price caption {
  text-align: left;
  font-size: var(--regular);
  color: #CC1E20;
  margin-bottom: 5px;
}
.sec-item .price {
  margin: 10px 0;
	width: 100%;
}
.sec-item .price th,
.sec-item .price td {
	padding: 1em;
	border: 1px solid #959595;
  text-align: center;
}
.sec-item .price th {
	background-color: #F4F2F0;
	font-weight: bold;
  width: 40%;
}

.sec-item .images {
  margin: 20px 0;
}
.sec-item .images.fwrap > div {
  margin-bottom: 20px;
}
.sec-item .images p {
  font-size: var(--small);
  text-align: center;
  margin-top: 3px;
}

.open-item .image,
.open-item p {
  margin-bottom: 30px;
}

.faq {
  text-align: left;
  border-bottom: 1px solid #BEBEBE;
  margin-top: 10px;
}
.faq dt {
  background: url(../img/faq-q.jpg) left center no-repeat;
  color: #036EB3;
  font-weight: 700;
  padding: 0.8em 0 0.8em 40px;
  border-top: 1px solid #BBB5B3;
}

.faq dd {
  background: url(../img/faq-a.jpg) 20px 1em no-repeat;
  padding: 0.8em 0 0.8em 60px;
  border-top: 1px dotted #BBB5B3;
  margin-left: 0;
}

.sec-item .company dt {
  width: 180px;
  float: left;
  clear: left;
  padding: 10px 0;
}
.sec-item .company dd {
  padding: 10px 0 10px 180px;
  border-top: 1px solid var(--gry1);
}
.sec-item .company dd:last-of-type {
  border-bottom: 1px solid var(--gry1);
}

.sec-item .access dt {
  width: 180px;
  float: left;
  clear: left;
}
.sec-item .access dd {
  padding-left: 180px;
  margin-bottom: 5px;
}

.sec-item .link {
  border-top: 1px solid #BBB5B3;
  border-bottom: 1px solid #BEBEBE;
}
.sec-item .link dt {
  width: 120px;
  padding: 1.5em 0 1em;
  float: left;
  clear: left;
}

.sec-item .link dd {
  padding: 1em 0 1em 120px;
  border-top: 1px dotted #BBB5B3;
  font-size: var(--small);
}
.sec-item .link dd:first-line {
  font-weight: 700;
}
.sec-item .link dd:first-of-type {
  border-top: none;
}

.flow {
  padding: 100px 20px 20px 126px;
  font-size: 1em;
  margin-bottom: 1.2em;
  min-height: 180px;
  border: 1px solid #BBB5B3;
}

.flow1	{ background: url(../img/flow1-utiawase.png) left top no-repeat #F9F6F4; }
.flow2	{ background: url(../img/flow2-omitumori.png) left top no-repeat #F9F6F4; }
.flow3	{ background: url(../img/flow3-sample-sakusei.png) left top no-repeat #F9F6F4; }
.flow4	{ background: url(../img/flow4-syuusei.png) left top no-repeat #F9F6F4; }
.flow5	{ background: url(../img/flow5-design-kettei.png) left top no-repeat #F9F6F4; }
.flow6	{ background: url(../img/flow6-nouhin.png) left top no-repeat #F9F6F4; }

.printmenu {
  margin-top: 40px;
}
.printmenu li {
  margin-bottom: 10px;
}
.printmenu li a {
  background: var(--print);
  border-radius: 5px;
  display: block;
  padding: 10px 0;
  text-align: center;
  color: #FFF;
}
.printmenu li a::before {
  content: "▶";
  font-size: 8px;
  vertical-align: 2px;
  margin-right: 4px;
}

.sitemap li {
  margin-bottom: .5em;
}
.sitemap a::before {
  content: "▶";
  font-size: 8px;
  vertical-align: 2px;
  margin-right: 5px;
}

.sec-item .profile {
  margin: 10px 0;
	width: 100%;
}
.sec-item .profile td {
	padding: 1em;
	border-bottom: 1px solid var(--gry1);
}
.sec-item .profile td:first-child {
	width: 15em;
}

/* --------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------- */

.formTable {
  margin: 10px 0;
	width: 100%;
}
.formTable th,
.formTable td {
	padding: 1em;
	border: 1px solid #959595;
}

.formTable th {
	background-color: #F4F2F0;
	font-weight: bold;
	text-align: left;
}
.formTable th span {
	color: #ea4434;
  font-size: 80%;
  margin-left: 5px;
}

.formTable input,
.formTable select,
.formTable textarea {
  font-family: var(--sans);
  font-weight: 400;
  font-size: var(--regular);
  background: #fff;
  padding: 5px;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #C0C0C0;
}
.formTable select { width: auto; }
.formTable textarea { height: 100px; }

input[type="submit"],
input[type="reset"] {
  font-family: var(--sans);
  font-weight: 400;
  font-size: var(--regular);
  background: #919191;
  display: inline-block;
  width: 150px;
  height: 60px;
  line-height: 60px;
  border: none;
  border-radius: 5px;
  text-align: center;
  color: #fff;
  cursor: pointer;
  position: relative;
  -webkit-appearance: none;
  transition: .3s;
  margin-top: 20px;
}
input[type="submit"]:hover,
input[type="reset"]:hover { opacity: .7; }

header.sp,
.sp-nav,
.sp-only,
.sp-only-inline { display: none; }
br.pc { display: block; }
br.sp { display: none; }
a[href^="tel:"] { pointer-events: none; cursor: default; }

/* /////////////////////////////////////////////////////////////////////////// */
/* /////////////////////////////////////////////////////////////////////////// */
/* /////////////////////////////////////////////////////////////////////////// */

@media screen and (max-width: 767.8px) {

:root {
  --xxsmall: 8px;
  --xsmall: 9px;
  --small: 11px;
  --regular: 13px;
  --large: 16px;
  --xlarge: 18px;
  --xxlarge: 22px;
  --xxxlarge: 28px;
}


html > * { -webkit-tap-highlight-color: rgba(0,0,0,0); }
html { overflow-y: visible; }
body { min-width: 100%; overflow-x: hidden; }
body.fixed { position: fixed; width: 100%; height: 100%; }
img { max-width: 100%; height: auto; }

.sp-only { display: block; }
.sp-only-inline { display: inline; }
.pc-only { display: none; }
br.pc { display: none; }
br.sp { display: block; }
a[href^="tel:"] { pointer-events: auto; cursor: pointer; }

.wrap { min-width: 380px; margin: 0 auto; padding-top: 60px; }
.inner { width: 100%; padding-left: 20px; padding-right: 20px; }

.flex:not(.alw) { flex-flow: column nowrap; }
.flex.icenter:not(.alw) { align-items: stretch; }
.flex.half:not(.alw) > * { width: 100%; }
.flex.half50:not(.alw) > * { width: 100%; }
.flex.third:not(.alw) > * { width: 100%; }
.flex.quarter:not(.alw) > * { width: 100%; }
.flex.reverse:not(.alw) { flex-flow: column nowrap; }
/*
.flex:not(.alw) > * { margin-bottom: 20px; }
.flex:not(.alw) > *:last-child { margin-bottom: 0; }
*/
.flex.sp-half > * { width: 49%; }

.table-wrapper { overflow: auto; white-space: nowrap; }
.table-wrapper table { width: auto; }

/* --------------------------------------------------------------------------- */

header.pc { display: none; }
header.sp {
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 999;
  height: 60px;
  background: rgba(255,255,255,0.9);
  box-shadow: 0 3px 3px rgba(0,0,0,0.1);
}
header.sp a.logo { padding: 10px; width: 250px; }
header.sp a.trigger { width: 60px; height: 60px; background: url(../img/sp-menu-on.png) center center / 30px no-repeat; }
header.sp a.trigger.active { background: url(../img/sp-menu-off.png) center center / 30px no-repeat; }

.sp-nav {
  display: none;
  position: absolute;
  top: 60px;
  left: 0;
  width: 100%;
  height: calc(100vh - 60px);
  background: rgba(255,255,255,0.95);
  z-index: 998;
  border-top: 1px solid rgba(0,0,0,0.1);
}
.sp-nav-scroll {
  width: 100%;
  height: 100%;
  overflow-y: auto;
}

nav.sp {
  padding: 20px;
}
.sp-menu1 li {
  border-bottom: 1px solid var(--gry1);
  font-size: var(--);
}
.sp-menu1 li:first-child {
  border-top: 1px solid var(--gry1);
}
.sp-menu1 li a::before {
  content: "";
  display: inline-block;
  width: 30px;
  height: 30px;
  margin-right: 8px;
  vertical-align: middle;
}
.sp-menu1 .home a::before { background: url(../img/icon-home2.png) center center / contain no-repeat; }
.sp-menu1 .print a::before { background: url(../img/icon-print2.png) center center / contain no-repeat; }
.sp-menu1 .web a::before { background: url(../img/icon-web2.png) center center / contain no-repeat; }
.sp-menu1 .open a::before { background: url(../img/icon-open2.png) center center / contain no-repeat; }
.sp-menu1 .sign a::before { background: url(../img/icon-sign2.png) center center / contain no-repeat; }
.sp-menu1 .shop a::before { background: url(../img/icon-shop2.png) center center / contain no-repeat; }
.sp-menu1 .renew a::before { background: url(../img/icon-renew2.png) center center / contain no-repeat; }

.sp-menu1 a { display: block; padding: 15px 0; }

.sp-menu2 { margin-bottom: 20px; }
.sp-menu2 a { margin-top: 5px; display: table; }


.global { display: none; }

/* --------------------------------------------------------------------------- */

footer { margin-top: 40px; padding: 50px 0; text-align: center; }
footer .title { width: 200px; margin: 0 auto 10px; }
.footer-menu { display: none; }

#TOPBTN { width: 40px; bottom: 20px; right: 10px; }




/* --------------------------------------------------------------------------- */

#main { width: 100%; }
#sub { display: none; }

.anchor { margin-top: -70px; padding-top: 70px; }

/* --------------------------------------------------------------------------- */

.mv.top { background: url(../img/mv-sp.jpg) center center / cover no-repeat; height: 600px; }

.more a { font-size: var(--small); padding: 5px 20px; }
.more.spshort a { padding: 5px 8px; }
.googlemap { height: 200px; }

/* --------------------------------------------------------------------------- */

.sec-item { margin-bottom: 50px; }

.sec-item .images > div { margin-bottom: 20px; }
.sec-item .images img { width: 100%; }

.flex.printmenu li { width: 32%;}

.sec-item .company dt { width: 100px; }
.sec-item .company dd { padding: 10px 0 10px 100px; }

.sec-item .access dt { width: 100px; }
.sec-item .access dd { padding-left: 100px; }

/* --------------------------------------------------------------------------- */


}/* @ */