@charset "UTF-8";

/*リセットCSS*/
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
 
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/*ここまでリセットCSS*/


/* CSS Document */
html {
  scroll-behavior: smooth;
  /*カテゴリスクロールを滑らかに*/ }

#wrapper {
  overflow: hidden;
  /*ボックスからはみ出した内容は「表示しません」*/ }


html, body {
  margin: 0;
  /* 余白の削除 */
  padding: 0;
  /* 余白の削除 */
  width: 100%;
  height: 100%; }

body{
	font-family: sans-serif;
}


/*ドロワー*/
.contents {
	transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
}
#navTgl:checked ~ .contents {
	transform: translateX(500px);
}

/* :::::: toggle button :::::: */
#navTgl {
	display: none;
}
label {
	cursor: pointer;
	position: fixed;
	top: 0;
	right: 0;
}
.open {
	z-index: 2;
	width: 100px;
	height: 100px;
	background: #ffffff;
	transition: background .6s, transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.open::before,
.open::after {
	content: "";
}
.open span,
.open::before,
.open::after {
	content: "";
	position: absolute;
	top: calc(50% - 1px);
	left: 30%;
	width: 40%;
	border-bottom: 3px solid black;
	transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.open::before {
	transform: translateY(-8px);
}
.open::after {
	transform: translateY(8px);
}
.close {
	z-index: 1;
	width: 100%;
	height: 100%;
	pointer-events: none;
	transition: background .6s;
}
#navTgl:checked + .open {
	background: indianRed;
	transform: translateX(500px);
}
#navTgl:checked + .open span {
	transform: scaleX(0);
}
#navTgl:checked + .open::before {
	transform: rotate(45deg);
}
#navTgl:checked + .open::after {
	transform: rotate(-45deg);
}
#navTgl:checked ~ .close {
	pointer-events: auto;
	background: rgba(0,0,0,.3);
}

/* :::::: drawer menu :::::: */
.menu {
	z-index: 1;
	position: fixed;
	overflow: auto;
	top: 0;
	left: 0;
	width: 500px;
	height: 100%;
	margin: 0;
	padding: 10px;
	box-sizing: border-box;
	background: rgba(0,0,0,.6);
	transform: translateX(-100%);
	transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.menu h2,
.menu a {
	color: white;
}
.menu h2 {
	text-align: center;
}
.menu ul {
	margin: 0;
	padding: 0;
}
.menu li {
	font-size: 20px;
	line-height: 1.4;
}
.menu li:not(:first-child) {
	border-top: 1px solid rgba(255,255,255,.6);
}
.menu a {
	display: block;
	padding: 1em 2em;
	text-decoration: inherit;
	transition: background .6s;
}
.menu a:hover {
	background: black;
}
#navTgl:checked ~ .menu {
	transform: none;
}

/*ここまでドロワー*/



/*TOPのCSS*/

.background_topkanban{
	background-image: url(img/top_sample.jpg);
	height: 60vh; /* 全画面表示 */
    background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}

.background_topdollytiti{
	background-image: url(img/top_dollytiti_banner.jpg);
	height: 50vh; /* 全画面表示 */
    background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}

.background_topmaskbanner{
	background-image: url(img/banner_mask.jpg);
	height: 50vh; /* 全画面表示 */
    background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}


h1.reitop{
	font-family:arial black; 
    font-size: 7;
}
h2.reitop{font-family:arial black; }

.top-1 {
	margin: 16px auto;
	text-align: center;
	display: block;
	border: 0px solid #000;
	line-height:300%;
	font-family:Meiryo; 
}
.top-1 .top-1text {
	text-align: left;
	display: inline-block;
}

h2{font-family:arial black; }




/*マスクのCSS*/

.bottan_toiawase {
  border-radius: 50%;
  transition: all 0.6s ease 0s;
}
.bottan_toiawase:hover {
  cursor: pointer;
  transform: scale(1.1, 1.1);
}




/*プリント工房のCSS*/

.background_printkououbanner{
	background-image: url(img/kanban_printkoubou.jpg);
	height: 70vh; /* 全画面表示 */
    background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}

.background_printkouteibanner{
	background-image: url(img/printkounou_koutei.jpg);
	width: 100%;
	height: 2200px; /* 全画面表示 */
    background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}



/*会社案内のCSS*/

.background_kaishaannaibanner{
	background-image: url(img/kaishaannai_kanban.jpg);
	height: 70vh; /* 全画面表示 */
    background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}



/*各事業所案内のCSS*/

.background_kakujigyoubanner{
	background-image: url(img/kakujigyou_1.mp4);
	height: 70vh; /* 全画面表示 */
    background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}

.background_kakujigyou2banner{
	background-image: url(img/kakujigyou_2.mp4);
	height: 90vh; /* 全画面表示 */
    background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}



/*Dolly.titiPRINTのCSS*/

/*看板CSS*/

/* --- 全体のBOX定義 ---------------------------------------- */
.box {
  position   : relative;
  max-width  : 100%;
  height     : 40vh;
  margin     : auto;
  overflow   : hidden;
}

/* --- 背景の指定 ------------------------------------------- */
.box .bgImg {
  position   : absolute;
  top        : 0;
  left       : 0;
  bottom     : 0;
  right      : 0;
  opacity    : 0;
  animation  : bgAnime 10s infinite;   /* 2画像 × 各5s = 10s */
}

/* --- 段差で背景画像のアニメーションを実行 ----------------- */
.box .src1 {
  background-image : url(img/dollytiti_1.jpg);   /* 背景の画像を指定 */
}
.box .src2 {
  background-image : url(img/dollytiti_2.jpg);   /* 背景の画像を指定 */
  animation-delay  : 5s;
}

@keyframes bgAnime {
   0% { opacity: 0; }
  50% { opacity: 1; }
 100% { opacity: 0; }
}

/* --- 前面の文字定義（サンプルのため変更してください） ----- */
.box .boxString{
  position   : absolute;
  display    : inline-block;
  padding    : 20px;
  background : rgba(0, 127, 255, 0.7);          /* 半透明の青 */
  color      : #fff;
  top        : 50%;                               /* 中央寄せ */
  left       : 50%;
  transform  : translate(-50%,-50%);
  z-index    : 11;
}


.top-2 {
	margin: 16px auto;
	text-align: center;
	display: block;
	border: 0px solid #000;
	line-height:300%;
	font-family:sans-serif; 
}
.top-2 .top-2text {
	text-align: left;
	display: inline-block;
}

.lineup {
	font-family:sans-serif;
}




/*商品ページ*/

/*ホバー無し状態のスタイル*/
.hover01 {
  vertical-align: top;
  font-size: 20px;
  display: inline-block;
  padding: 1em 4em;
  text-decoration: none;
  background: #111;
  color: #fff!important;
  border: solid 2px #111;
  border-radius: 3px;
  transition: .4s;
}
/*ホバー無し状態のスタイル＿ここまで*/

/*ホバー有り状態のスタイル*/
.hover01:hover {
  background: #fff;
  color: #111!important;
}
/*ホバー有り状態のスタイル＿ここまで*/




/*フッター*/

.background_footer{
	background-color:#f7f5f3;
	height: 70vh; /* 全画面表示 */
    background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}

.background_footer_copyright{
	background-color:#efece6;
	height: 10vh; /* 全画面表示 */
    background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}

.background_footer_dolly{
	background-color:#f7f5f3;
	height: 40vh; /* 全画面表示 */
    background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}