@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Abel');
@import url(menu.css);

/* 共通設定
---------------------------------------------------------------------------*/
body {
  font-family: -apple-system, blinkMacSystemFont, /* Macの欧文はSan Francisco (OS X 10.11以降) */
               'Helvetica Neue', /* Macの欧文 (OS X 10.10以前) */
               'Segoe UI',       /* Windowsの欧文 */
               YuGothicM,        /* Windows8.1以上は游ゴシック */
               YuGothic,         /* Macの游ゴシック */
               Meiryo,           /* 游ゴシックが入っていないWindows */
               sans-serif;
	font-size: 15px;
	font-weight: normal;
	color: #362e2b;
	margin: 0;
	padding: 0;
}
/* Windows */
@font-face {
  font-family: YuGothicM;
  font-weight: normal;
  src: local('YuGothic-Medium'),  /* Mediumを明示的に指定 */
       local('Yu Gothic Medium'), /* Chrome用 */
       local('YuGothic-Regular'); /* Windows8.1ではMediumがないのでRegularを指定 */
}
@font-face {
  font-family: YuGothicM;
  font-weight: bold;
  src: local('YoGothic-Bold'), /* Boldはそのまま */
       local('Yu Gothic');     /* Chrome用 */
}

@media screen and (min-width: 768px) {
	body {
		background: url(img/bg.png) #ffffff 0px 0 repeat-x;
	}
}

h1,h2,h3,th,td,span {
	margin: 0px;
	padding: 0px;
	line-height: 1.0;
}

p,dl,dt,dd{
	margin: 0px;
	padding: 0px;
}

img {
	border: none;
}

ul {
	list-style-type: none;
}

hr {
	border:none;
	border-top: 2px solid #8dea8d;
  margin: 10px 0px 10px 0px;
}

.small {
	font-size : 80%;
	line-height: 160%;
}

.big {
	font-size : 140%;
	line-height:140%;
}

.red {
	color: #e60012;
	line-height: 150%;
}

.clear { clear:both; }
.clear hr { display:none; }

/***** Link styles *****/
a         {color: #960031; text-decoration: none;}
a:link		{color: #e5004f;}
a:visited {color: #960031;}
a:hover		{color: #e5195b; text-decoration: underline;}

#wrap {
	width:100%;
	overflow:hidden;
}

/***** my-bootstrap *****/
.container { max-width: 100%; }

/* スライダー
---------------------------------------------------------------------------*/
.bnr_area {
  margin: 10px auto 0px auto;
}
.slider {
	width: 100%;
  margin: 0px auto 0px auto;
  padding-left: 0;
}
.bnr_area img {
	width: 100%;
}
.bnr_area {
  margin: 0px auto 2px auto;
	padding: 0px 0 1px 0px;
}

@media screen and (min-width:768px) and ( max-width: 991px) {
  /* 画面サイズが768pxから991pxまではここを読み込む　*/
}
@media screen and (min-width:992px) {
  /* 画面サイズが960pxからはここを読み込む　*/
}

/*ヘッダー
---------------------------------------------------------------------------*/
#header {
	margin: 0 auto;
	padding: 0;
}
#header h1 {
	display: none;
}

#header #logo {
	display: none;
}

#header #jikan {
	display: none;
}

@media screen and (min-width: 768px) {
	#header {
		margin: 5px auto 0 auto;
		padding: 0;
		
		/* 時短中、一時的に営業時間バナー(背景設定)を非表示
		background: url(img/header_bg.png) right 89% no-repeat;
		background-size: 63%;
		*/
	}
	
	#header h1 {
		display: inline;
		float: right;
		width: 63%;
		font-size: 13px;
		color: #ffffff;
		font-weight: normal;
		line-height: 1.5;
		position: relative;
		padding: 4px 15px;
		margin: 4px 0px 0 0;
		background: #df195f;
		border-radius: 10px;
	}

	#header #jikan {
		display: inline;
		width: 60%;
		margin: 3px 0px 0px 35px;
	}

	#header #logo {
		display: inline;
		position: static;
		width: 34%;
		float: left;
	}
}

@media screen and (min-width: 992px) {
	#header {
		margin: 0 auto;
		height: 124px;
		/* 時短中、一時的に営業時間バナー(背景設定)を非表示
		background: url(img/header_bg.png) right bottom no-repeat;
		background-size: 64.5%;
		*/
	}
	#header h1 {
		width: auto;
		font-size: 12.5px;
		padding: 10px 15px;
		margin: 11px 0px 0 0;
	}

	#header #jikan {
		display: inline;
		width: 65%;
		margin: 7px 0px 0px 8px;
	}

	#header #logo {
	  width: 34%;
	  float: left;
	}
}
@media screen and (min-width: 1200px) {
	#header {
		background-size: auto;
	}
	#header h1 {
		font-size: 15px;
		padding: 8px 15px;
		margin: 8px 0px 0 0;
		border-radius: 20px;
	}
	#header h1:before{
		font-family: FontAwesome;
		content: "\f111";
		position: absolute;
		font-size: 15px;
		left: -40px;
		bottom: 0;
		color: #d34d7c;
	}
	#header h1:after{
		font-family: FontAwesome;
		content: "\f111";
		position: absolute;
		font-size: 23px;
		left: -23px;
		bottom: 0;
		color: #d13069;
	}

	#header #jikan {
		display: inline;
		width: auto;
		margin: 8px 0px 0px 150px;
	}

	#header #logo {
	  width: auto;
	}
}

/* ぱんくずリスト
---------------------------------------------------------------------------*/
ol.topic-path {
	text-align: right;
	line-height: 100%;
	margin: px 0px 10px 0px;
	padding: 5px 10px 5px 0px;
	list-style-type: none; /* リストマーク非表示 */
	font-size: 10px;
	color: #d60906;
  background: #eeeeee;
}
/* ぱんくずリスト項目 */
ol.topic-path li {
	padding-left: 5px; /* 左パディング */
	display: inline; /* 項目を横並び */
}
/* ぱんくずリスト項目（最初の項目） */
ol.topic-path li.first {
	padding-left: 25px; /* 左パディング */
	background: url(./img/topic-path-home-gray.png) no-repeat left; /* ホーム記号（※） */
}
/* ぱんくずリンクエリア */
ol.topic-path li a {
	padding-right: 18px; /* 右パディング */
	background: url(./img/topic-path-gray.gif) no-repeat right; /* 矢印記号（※） */
}
/* ぱんくずリンク色 */
ol.topic-path li a {
	color: #d0146c;
}
/* ぱんくずリンク色（マウスオーバー） */
ol.topic-path li a:hover {
	color: #b24362;
}

/*コンテンツ
---------------------------------------------------------------------------*/
#contents {
	clear: left;
	margin: 64px auto 0px auto;
  padding : 0px 0px 0px 0px;
}
  @media screen and (min-width: 768px) {
		#contents {
			margin: 0px auto 0px auto;
  	}
	}
  @media screen and (min-width: 992px) {
		#contents {
  	}
	}
  @media screen and (min-width: 1200px) {
		#contents {
  	}
	}

#contents p {
	padding: 0px 0px 0px 0px;
}

#contents strong {
}

/*左エリア
---------------------------------------------------------------------------*/
#left_area {
	margin: 0px 0px 20px 0px;
}
#left_area img {
	width: 100%;
	margin: 0px 0px 10px 0px;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
}

#left_area a {
	text-decoration: none;
	display: block;
}
#left_area a:link		 {color: #582c3a;}
#left_area a:visited {color: #582c3a;}
#left_area a:hover	 {color: #504748;}

#left_area h2 {
	height: 50px;
	line-height: 50px;
	background: #918888;
	color: #ffffff;
	font-size: 100%;
	font-weight: bold;
  margin: 0px;
  padding: 0px 0px 0px 10px;
	border: 0px;
}

#left_area h2 a:link		{color: #ffffff;}
#left_area h2 a:visited {color: #ffffff;}
#left_area h2 a:hover		{color: #ffdce8;}

#left_area h3 {
  margin: 0px auto 0 auto;
}
#left_area h3 a {
  float: left;
  position: relative;
  width: 49%;
	font-size: 70%;
	font-weight: bold;
	padding: 8px 0px 18px 5px;
  margin: 3px 2px 0 1px;
	border-left-width: 10px;
	border-left-style: solid;
}
#left_area h3 a:link {}
#left_area h3 a:visited {}
#left_area h3 a:hover{
  filter:alpha(opacity=70);
  -moz-opacity: 0.7;
  opacity: 0.7;
}

#left_area h3 span {
	display: block;
	font-size: 60%;
  font-weight: normal;
  text-decoration: none;
	color: #606060;
  position: absolute;
  top: 30px;
  left: 5px;
  right: 0;
  margin: auto;
}

@media screen and (min-width: 768px) and (max-width: 991px) {
	/* 表示領域が768px以上991px以下の場合に適用するスタイル */
  #left_area {
  	margin: 0px 0px 10px 0px;
  }
	#left_area h3 a {
	  width: 100%;
		font-size: 70%;
		padding: 8px 0px 18px 5px;
	  margin: 5px 0px 0px 0px;
	}

	#left_area h3 span {
		font-size: 60%;
	  margin: auto;
	}

	#top #left_area h3 a {
	  width: 32%;
		font-size: 100%;
		padding: 8px 0px 24px 5px;
	  margin: 3px 5px 5px 4px;
	}

	#top #left_area h3 span {
		font-size: 60%;
	  top: 38px;
	  margin: auto;
	}
}
@media screen and (min-width: 992px) {
/* 992以上 PCなど*/
	#left_area h3 a {
	  width: 100%;
		font-size: 96%;
		padding: 10px 0px 26px 5px;
	  margin: 5px 0px 0px 0px;
	}

	#left_area h3 span {
		font-size: 60%;
  	top: 40px;
	  margin: auto;
	}
}

#left_area ul {
	list-style-type: none;
	margin: 0px 0px 50px 0px;
	padding:0px 0px 0px 0px;
	word-wrap: break-word;
	border-bottom: 3px solid #918888;
}

#left_area li {
	height: 50px;
	line-height: 50px;
	border-bottom: 1px dotted #918888;
}
#left_area li a {
	padding: 0px 0px 0px 10px;
}
#left_area li a:hover { background: #efeeee;}


/*右エリア
---------------------------------------------------------------------------*/
#right_area h2 {
	font-family: 'Abel', sans-serif, "Meiryo","Verdana","ＭＳ Ｐゴシック","MS UI Gothic","MS PGothic","Osaka, serif";
	font-size: 200%;
	color: #e3004d;
	margin: 0 0 10px 0;
	padding: 0 0 .1em .3em;
	border-left: 10px solid #e3004d;
}
#right_area h2 span {
	display: block;
	font-size: 14px;
	font-weight: normal; 
	color: #6a6362;
	margin-top: .2em;
}

/*「ニュース」部分
---------------------------------------------------------------------------*/
.news_space {
  position:relative;
	margin: 0px 0px 20px 0px;
	padding: 0px;
}

.news_space .news_to_all {
  position:absolute;
  right:0;
  top:0;
  font-size: 50%;
  color: #ffffff;
  background: #d85481;
	border-radius:5px;
	margin: 2px 5px 0px 0px;
	padding: 3px 5px;
}
.news_space .news_to_all a {
  color:#ffffff;
}

/*「ツイッター」部分
---------------------------------------------------------------------------*/
.twitter_space {
	margin: 0px 0px 20px 0px;
	padding: 0px 0px 0px 0px;
}
.twitter_disp {}

/*------------------------------------*/
/*「BANNER」部分
--------------------------------------*/
#right_area .banner_space {
	text-align: center;
}
#right_area .banner_space img {
	width: 90%;
  max-width: 240px;
	margin: 10px 0px 0px 0px;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
}

@media screen and (min-width: 768px) and (max-width: 991px) {
	/* 表示領域が768px以上991px以下の場合に適用するスタイル */
  #right_area .banner_space {
    margin-top: 50px;
  }
}

/*メインコンテンツ
---------------------------------------------------------------------------*/
#main_area h2 {
	font-family: 'Abel', sans-serif, "Meiryo","Verdana","ＭＳ Ｐゴシック","MS UI Gothic","MS PGothic","Osaka, serif";
	font-size: 200%;
	color: #e3004d;
	margin: 0 0 10px 0;
	padding: 0 0 .1em .3em;
	border-left: 10px solid #e3004d;
}
#main_area h2 span {
	display: block;
	font-size: 14px;
	font-weight: normal; 
	color: #6a6362;
	margin-top: .2em;
}

#main_area h3 {
	position: relative;
	font-size: 110%;
  font-weight: bold;
	color: #4e362d;
	margin: 0 0 0.5em 0;
	padding: 0 .4em .1em;
}
#main_area h3::after {
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: -1;
	content: '';
	width: 100%;
	height: 10px;
	background-color: #fff799;
}
#main_area h3:before {   
  font-family: 'FontAwesome';
  content: '\f02c';
	font-size: 120%;
  font-weight: normal;
	color: #ff8300;
  margin: 0 6px 0 0px;
}

#main_area h3 a:link		{color: #f33800;}
#main_area h3 a:visited {color: #ff7200;}

@media screen and (min-width: 768px) {
	/* 表示領域が768px以上の場合に適用するスタイル */
	#main_area h3 {
		font-size: 120%;
	}
}

#main_area  h4 {
	position: relative;
	color: #e5195b;
	font-size: 120%;
	font-weight: normal;
	margin: 0px  0px 5px 0px;
	padding: 0px 0px 0px 0px;
	border-bottom: 4px solid #cebdc4;
}
#main_area  h4::after {
	position: absolute;
	bottom: -4px;
	left: 0;
	z-index: 2;
	content: '';
	width: 20%;
	height: 4px;
	background-color: #f24b81;
}

#main_area h4:before {   
  font-family: 'FontAwesome';
  content: '\f14a';
  margin: 0 5px 0 0px;
}

#main_area p {
  	padding: 0px 0px 20px 0px;
  line-height: 1.4;
}

#main_area ul {
	list-style-position : outside; 
	padding: 5px 10px 35px 45px;
}
#main_area ol {
	list-style-position : outside; 
	padding: 5px 10px 35px 45px;
}
#main_area li {
	list-style-position : outside; 
	padding: 5px 0px 10px 0px;
}

#main_area strong {
	color: #b5003b;
}

#main_area .icon {
	display: inline-block;
	text-align: center;
	font-size: 90%;
	background: #ff8300;
	color: #ffffff;
  margin: 0px 4px 0px 0px;
	padding: 2px 5px 2px 5px;
	border-radius: 5px;
}

#main_area .eof {
	margin-bottom: 60px;
}

@media screen and (min-width: 768px) {
  #main_area p {
    line-height: 1.6;
  }
}
/*「混雑情報」部分
--------------------------------------*/
.jam_space {
	background: #fffbcc;
	line-height: 1.5;
	color: #461a0c;
  margin: 0px 0px 10px 0px;
	padding:3px 5px 3px 5px;
	border: 1px solid #c07e00;
}

#main_area .jam_space p {
  margin: 0px 0px 0px 14px;
	padding: 0px;
	line-height: 1.5;
}

/*「メインエリアバナー」部分
--------------------------------------*/
.bn_space {
	padding: 0px 0px 15px 0px;
}

.bn_space img {
	width: 98%;
	margin: 0px 0px 5px 0px;
  border: 0px solid #b4b4b4;
}

.img_half img {
	width: 49%;
	margin: 0px 0px 5px 0px;
  border: 0px solid #b4b4b4;
}


.bn_space a:link {COLOR:#ffffff;text-decoration:none;}
.bn_space a:visited {COLOR:#ffffff;text-decoration:none;}
.bn_space a:active {COLOR:#ffffff;text-decoration:none;}
.bn_space a:hover {
	position:relative;
	top:1px;
	left:1px;
}

@media screen and (min-width: 768px) {
  .bn_space {
  	padding: 0px 0px 0px 0px;
  }
  .bn_space img {
	  margin: 0px 0px 10px 0px;
  }
}

/*「NEWS」ページ
--------------------------------------*/
.news_list {
	margin: 0px 0px 0px 0px;
	line-height: 1.0;
	border-bottom: 1px dotted #555;
}

.news_list a {
  display:block;
	padding: 5px 5px 2px 5px;
	color: #000;
	text-decoration: none;
}

.news_list a:hover {
	background-color: #ffebf4;
	color: #582c3a;
	text-decoration: none;
}

.news_list p {
	line-height: 1.3;
	margin: 5px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}
#main_area .news_list p {
	line-height: 1.3;
	margin: 5px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}

.news_tag {
	float: left;
  display:block;
	width: 100px;
	font-family: 'Abel', sans-serif, "Meiryo","Verdana","ＭＳ Ｐゴシック","MS UI Gothic","MS PGothic","Osaka, serif";
	background:#d85481;
	color: #ffffff;
	font-size: 14px;
	text-align: center;
	margin: 0px 10px 0px 0px;
	padding: 0px 2px 0px 2px;
  line-height: 1.0;
}

.date {
	font-size: 12px;
	color: #808080;
	margin: 2px 0px 0px 0px;
}

.news_detail {
	float:none;
	margin: 0px 0px 20px 0px;
	padding: 0px 0px 2px 0px;
  border-bottom : 0px solid #22c797 ;
  border-left : 0px solid #22c797 ;
}
.news_detail .news_title {
  font-size: 110%;
  line-height: 1.2;
  color: #e5195b;
	padding: 0px 0px 5px 0px;
  border-bottom: 1px solid #d85481;
}

#main_area .news_detail p {
	border-bottom: 0px;
	padding: 20px 10px 5px 10px;
}

.news_detail img {
  max-width: 500px;
  width: 90%;
  display:block;
	margin: 0px auto 0px auto;
	padding: 0px 0px 0px 0px;
}

.news_detail_footer{
	clear: both;
	font-size: 12px;
	text-align: right;
	color: #c40040;
	padding: 0px 3px 0px 0px;
}

@media screen and (min-width: 768px) {
  .news_detail .news_title {
    font-size: 120%;
    line-height: 1.1;
  }
}

/*「料金」
---------------------------------------------------------------------------*/
.carge {
  width: 80%;
  margin: 0px auto 20px auto;
	border: 1px solid #5b534b;
	font-size: 16px;
}

.carge th, .carge td {
	background-color: #fffcd3;
	border-bottom: 1px solid #919191;
	line-height: 1.0;
}

.carge span {
	font-size: 16px;
	font-weight: normal;
}

.carge th.course {
	text-align: left;
	font-size: 25px;
	font-weight: bold;
	padding: 10px 10px 10px 10px;
}

.carge td.price {
	text-align: right;
	font-size: 20px;
	font-weight: bold;
	padding: 5px 5px 5px 5px;
	line-height: 0;
}

.carge td.supplement {
	width: 25em;
	line-height: 1.5;
	font-size: 13px;
  color: #c23b00;
	padding: 0px 10px 0px 10px;
  border-top: 0px;
}

@media only screen and (max-width: 1200px) { 
	.carge {
	  width: 94%;
	}
	.carge span {
		font-size: 14px;
		font-weight: normal;
	}
	.carge th.course {
		font-size: 24px;
	}
	.carge td.price {
		font-size: 24px;
	}
	.carge td.supplement {
	  font-size: 14px;
	}
}

@media only screen and (max-width: 768px) { 
	.carge {
	  width: 100%;
	}
	.carge th.course {
		font-size: 18px;
	}
	.carge td.price {
		font-size: 18px;
	}
	.carge td.supplement {
		font-size: 12px;
		width: 20em;
	}
}

@media only screen and (max-width: 480px) { 
	.carge {
	  width: 100%;
		border: 0px;
	}
	.carge th {
	  display:block;
	  width: 100%;
		border: 1px solid #919191;
	}
	.carge td {
	  display:block;
	  width: 100%;
		background-color: transparent;
		border: 0px;
	}
	.carge span {
		font-size: 11px;
		font-weight: normal;
	}
	.carge th.course {
		font-size: 18px;
		font-weight: bold;
		padding: 5px 5px 5px 10px;
	}
	.carge td.price {
		text-align: left;
		font-size: 18px;
		padding: 3px 5px 0px 15px;
	}
	.carge td.supplement {
		width: 100%;
		line-height: 1.4;
		padding: 0px 5px 15px 15px;
	}
}

/*「店内設備」
---------------------------------------------------------------------------*/
.equip_tbl td {
	background-color: transparent;
  border-bottom: 1px dotted #919191;
  vertical-align: top;
  line-height: 1.4;
  padding:5px;
}
.equip_tbl td img {
  border: 2px solid #b0b0b0;
}

.equip_col1 td img {
  width: 49%;
  margin-right: 3px;
  border: 0px solid #b0b0b0;
}

@media only screen and (max-width: 768px) { 
	.equip_col1 td {
		font-size: 12px;
	}
	.equip_col1 td img {
	  width: 48%;
	}
}

.equip_col2 td img {
  width: 160px;
}

@media only screen and (max-width: 768px) { 
	.equip_col2 td {
		font-size: 12px;
	}
	.equip_col2 .photo {
		width: 25%;
	}
	.equip_col2 td img {
	  width: 100%;
	}
	.equip_col2 .txt {
		width: 75%;
	}
}

.equip_col4 td {
  line-height: 1.5;
}

.equip_col4 .photo {
	width: 15%;
}
.equip_col4 td img {
	width: 100%;
}
.equip_col4 .txt {
	width: 35%;
  font-size: 94%;
}

@media only screen and (max-width: 768px) { 
	.equip_col4 td {
	  display:block;
		float: left;
		font-size: 12px;
	}
	.equip_col4 td img {
		max-height:96px; 
	}
	.equip_col4 .photo {
		width: 20%;
		height: 106px;
	}

	.equip_col4 .txt {
		width: 80%;
		height: 106px;
		font-size: 90%;
	}
	.equip_col4 .txt span {
		font-size: 10px;
	}
}

.equip_col3 td {
	width: 33.3%;
  line-height: 1.6;
}
.equip_col3 td img {
	width: 100%;
}

@media only screen and (max-width: 768px) { 
	.equip_col3 td {
	  display:block;
		float: left;
		font-size: 12px;
	}
	.equip_col3 .txt {
		width: 100%;
	}
}

/*「各種サービス」
---------------------------------------------------------------------------*/
/* 各サービス配色 */
.paper_bg, .paper .point h3:before { background: #4f2a1a; }
.envelope_bg, .envelope .point h3:before { background: #b4914f; }
.book_bg, .book .point h3:before { background: #f6943d; }
.musentoji_bg, .musentoji .point h3:before { background: #c4a55b; }
.poster_bg { background: #ff4242; }
.card_bg, .card .point h3:before { background: #201dcb; }
.postcard_bg, .postcard .point h3:before  { background: #186400; }
.carddesign_bg { background: #ff5676; }
.youshi_bg { background: #ff006c; }
.cdjacket_bg { background: #4c086c; }
.banmen_bg { background: #00a0ea; }
.duplicator_bg { background: #6bc600; }
.saidanki_bg { background: #875523; }
.genkou_bg { background: #727272; }
.genkou_cd_dvd_bg { background: #d36aff; }


#main_area .paper		h2, #left_area .paper a { border-color: #4f2a1a; color: #4f2a1a; }
#main_area .envelope	h2, #left_area .envelope a { border-color: #b4914f; color: #b4914f; }
#main_area .book		h2, #left_area .book a { border-color: #f6943d; color: #f6943d; }
#main_area .musentoji	h2, #left_area .musentoji a { border-color: #c4a55b; color: #c4a55b; }
#main_area .poster      h2, #left_area .poster a { border-color: #ff4242; color: #ff4242; }
#main_area .card        h2, #left_area .card a { border-color: #1714b2; color: #201dcb; }
#main_area .postcard    h2, #left_area .postcard a { border-color: #186400; color: #186400; }
#main_area .carddesign  h2, #left_area .carddesign a { border-color: #ff5676; color: #ff5676; }
#main_area .youshi      h2, #left_area .youshi a { border-color: #ff006c; color: #ff006c; }
#main_area .cdjacket    h2, #left_area .cdjacket a { border-color: #4c086c; color: #4c086c; }
#main_area .banmen      h2, #left_area .banmen a { border-color: #00a0ea; color: #00a0ea; }
#main_area .duplicator  h2, #left_area .duplicator a { border-color: #6bc600; color: #6bc600; }
#main_area .saidanki    h2, #left_area .saidanki a { border-color: #875523; color: #875523; }
#main_area .genkou      h2, #left_area .genkou a { border-color: #727272; color: #727272; }
#main_area .genkou_cd_dvd h2, #left_area .genkou_cd_dvd a { border-color: #d36aff; color: #d36aff; }

.service_imglist {}
.service_imglist img {
  width: 47%;
	margin: 0 0px 10px 5px;
}

.service .topimage {
	width:100%;
	margin: 0 0 30px 0;
}

.caption {
  color :#ffffff;
  line-height: 1.4;
	margin: 0 0 30px 0;
  padding: .5em 1em;
  border-radius:5px;
  opacity:0.9;
}


#main_area .paper h3, #main_area .envelope h3, #main_area .book h3, #main_area .musentoji h3, #main_area .card h3, #main_area .postcard h3, #main_area .genkou h3, #main_area .genkou_cd_dvd h3 {  /* スマフォ同ページ移動用余白 */
  padding-top: 50px;
}

#main_area .point h3 {
  color: #1d1d1d;
  line-height: 1.4;
  margin: 0px;
  padding-top: 0px;
}
#main_area .point h3::after {
	background-color: transparent;
}
#main_area .point h3:before {   
  font-family: 'Abel';
  content: 'Point!';
	color: #ffffff;
	padding: .0em .5em;
	border-radius: 100px;
}

#main_area .point p {
  margin: 4px 0px 10px 10px;
  line-height: 150%;
}

.service_parts {
  display: inline-block;
  vertical-align: top;
  margin: 0px 2px; 0 0;
  padding: 0 0 10px 0;;
}
.service_parts img {
  width: 100%;
  border: 2px solid #b0b0b0;
}

.one_fourth {
  width: 31%;
  font-size: 86%
}
.one_sixth {
  width: 31%;
  font-size: 76%
}

.service_btn {
	display:block;
	max-width: 260px;
	margin: 0px;
	padding:15px 15px 15px 15px;
	background:#e5195b;
  font-size: 120%;
	text-align:center;
	text-decoration:none;
	border-radius:5px;
}
.service_btn:link ,.service_btn:visited {	color:#ffffff; }
.service_btn:hover{ background:#b5003b; }

.service_netprint_btn {
	display:block;
	max-width: 260px;
	margin: 0px;
	padding:15px 15px 15px 15px;
	background:#486ad9;
  font-size: 120%;
	text-align:center;
	text-decoration:none;
	border-radius:5px;
}
.service_netprint_btn:link ,.service_netprint_btn:visited {	color:#ffffff; }
.service_netprint_btn:hover{ background:#3150b6; }

.service_genkou_btn {
	display:inline-block;
	width: 32.5%;
	margin: 10px 0px 0px 0px;
	padding:5px;
  font-size: 90%;
	text-align:center;
	text-decoration:none;
	border-radius:5px;
}
.service_genkou_btn:link ,.service_genkou_btn:visited {	color:#ffffff; }
.service_genkou_btn:hover{ background:#454545; }

.service_genkou_cd_dvd_btn {
	display:inline-block;
	width: 32.5%;
	margin: 10px 0px 0px 0px;
	padding:5px;
  font-size: 90%;
	text-align:center;
	text-decoration:none;
	border-radius:5px;
}
.service_genkou_cd_dvd_btn:link ,.service_genkou_cd_dvd_btn:visited {	color:#ffffff; }
.service_genkou_cd_dvd_btn:hover{ background:#884798; }

#main_area .paper img, #main_area .envelope img, #main_area .book img, #main_area .musentoji img, #main_area .genkou img, #main_area .genkou_cd_dvd img {
  max-width: 100%;
}

#main_area .genkou_tbl {
	margin: 0px 0 20px 0;
	padding: 0px;
  font-size: 76%;
}

#main_area .genkou_tbl th {
	background-color: #fffcd3;
	text-align: center;
	font-weight: normal;
  line-height: 1.2;
	padding: 5px 5px 5px 5px;
	border: 1px solid #8a8a8a;
}

#main_area .genkou_tbl td {
	text-align: center;
  vertical-align: top;
	padding: 5px 5px 5px 5px;
	border: 1px solid #8a8a8a;
}

#main_area .genkou_tbl caption {
	text-align: left;
	font-weight: bold;
}


@media screen and (min-width: 768px) {
	/* 表示領域が768px以上の場合に適用するスタイル */
  .service_imglist img {
    width: 48%;
  	margin: 0 2px 10px 5px;
  }
  #main_area .point h3 {
    font-size: 120%;
  }
  #main_area .point h3:before {   
  	padding: .1em 1em;
  }
  #main_area .point p {
    margin: 0px 0px 10px 96px;
    line-height: 180%;
  }

  .one_fourth {
    width: 30%;
    font-size: 95%
  }
  .one_sixth {
    width: 30%;
    font-size: 90%
  }

  .service_genkou_btn {
  	width: 30%;
  	margin: 10px 7px 50px 7px;
  	padding:10px 15px 10px 15px;
    font-size: 120%;
  }

  #main_area .paper h3,#main_area .envelope h3,#main_area .book h3,#main_area .musentoji h3,#main_area .card h3,#main_area .postcard h3,#main_area .genkou h3,#main_area .genkou_cd_dvd h3 {  /* スマフォ同ページ移動用余白 */
    padding-top: 0;
  }

  #main_area .genkou_tbl {
    font-size: 100%;
  }
}

@media screen and (min-width: 992px) {
  .service {
  	width:100%;
  	background-size:100% auto;
  	background-repeat: no-repeat;
  }

  #main_area .service h2 {
  	font-size: 260%;
	  padding: .1em 0 .1em .3em;
  }

  #main_area .service h2 span {
  	font-size: 50%;
  }

  .caption {
  	display: inline-block;
  	font-size: 120%;
    line-height: 1.6;
  	margin: 50px 0 50px 0;
  }

  .paper { background-image:url("img/service_paper_bg.jpg"); }
  .envelope { background-image:url("img/service_envelope_bg.jpg"); }
  .book { background-image:url("img/service_book_bg.jpg"); }
  .musentoji { background-image:url("img/service_musentoji_bg.jpg"); }
  .poster {	background-image:url("img/service_poster_bg.jpg"); }
  .card {	background-image:url("img/service_card_bg.jpg"); }
  .postcard {	background-image:url("img/service_postcard_bg.jpg"); }
  .carddesign {	background-image:url("img/service_carddesign_bg.jpg"); }
  .cdjacket {	background-image:url("img/service_cdjacket_bg.jpg"); }
  .banmen {	background-image:url("img/service_banmen_bg.jpg"); }
  .duplicator {	background-image:url("img/service_duplicator_bg.jpg"); }
  .saidanki {	background-image:url("img/service_saidanki_bg.jpg"); }

  .one_fourth {
    width: 25%;
    font-size: 95%
  }
  .one_sixth {
    width: 15.6%;
    font-size: 76%
  }

  .service_genkou_btn {
  	width: 31%;
  	margin: 10px 7px 50px 6px;
  	padding:15px 15px 15px 15px;
    font-size: 140%;
  }

}

/* サービス料金表 */
.service_carge {
  margin: 0px 0px 20px 0px;
	border: 1px solid #5b534b;
  table-layout: fixed;
}

.service_carge caption {
	font-size: 120%;
  font-weight: bold;
  text-align: left;
	color: #4e362d;
}

.service_carge caption:before {   
  font-family: 'FontAwesome';
  content: '\f02c';
	font-size: 120%;
  font-weight: normal;
	color: #ff8300;
  margin: 0 6px 0 0px;
}

.service_carge th {
	background-color: #fffcd3;
	border: 1px solid #919191;
	line-height: 1.0;
	font-size: 18px;
  text-align: center;
	padding: 10px;
}

.interval{
  width: 170px;
}

.service_carge td {
	background-color: #ffffff;
	border: 1px solid #919191;
	line-height: 1.4;
	padding: 10px;
}

.service_carge td.price {
	text-align: center;
}

.service_carge td.price span {
	font-size: 180%;
  color: #e5195b;
}

.service_carge td.supplement {}

@media only screen and (max-width: 1200px) { }

@media only screen and (max-width: 768px) { }

@media only screen and (max-width: 480px) { 
  .service_carge th {
    font-size: 100%;
  }

  .service_carge td.price {
    font-size: 80%;
  }

  .interval{
    max-width: 140px;
  }
}

.side_by_side {
  float: left;
  margin-right:20px;
}

.side_by_side::after {
  clear: both;
}

/*「テンプレート」
---------------------------------------------------------------------------*/
.template_tbl {
  margin: 0px 0px 0px 0px;
	border: 1px solid #5b534b;
  table-layout: fixed;
}

.template_tbl th {
	background-color: #fffcd3;
	border: 1px solid #919191;
	line-height: 1.2;
	font-size: 120%;
  text-align: center;
	padding: 10px;
}

.template_tbl th span {
  display: block;
  font-weight: normal;
  font-size: 80%;
	line-height: 1.4;
	margin-top: 5px;
}

.template_tbl td {
	border: 1px solid #919191;
	line-height: 1.4;
	padding: 10px;
}

.template_tbl td img {
  max-width: 100%;
  margin-bottom: 5px;
}
.template_btn {
	display:block;
	margin: 0px;
	padding: 2px 15px 5px 15px;
	background:#e5195b;
	text-align:center;
	text-decoration:none;
	border-radius:5px;
}
.template_btn:link ,.template_btn:visited {	color:#ffffff; }
.template_btn:hover{ background:#b5003b; }

.template_btn:before {   
  font-family: 'FontAwesome';
  content: '\f019';
  margin: 0 6px 0 0px;
  font-size: 140%;
}

@media only screen and (max-width: 1200px) { }

@media only screen and (max-width: 768px) { }

@media only screen and (max-width: 480px) { 
  .template_tbl th {
    font-size: 100%;
  }
  .template_tbl td {
    font-size: 80%;
	  padding: 5px;
  }
}



/*「よくある質問」
---------------------------------------------------------------------------*/
.qa *, .qa *:before {
	font-family: 'FontAwesome', sans-serif;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.qa {
	margin: 10px 0 0 0;
}
.qa dt {
	position: relative;
	margin: 0 0 1.0em 0;
}
.qa dd {
	position: relative;
	margin: 0 0 1em 0;
	padding: 0 0 1.5em 2.9em;
	border-bottom: 1px dotted #d85481;
}
.qa dt::before {
	font-size: 1.8em;
	font-weight: normal;
	margin: 0 0.4em 0 0;
	color: #ffffff;
	border-radius: 50%;
	display: inline-block;
	width: 1.2em;
	height: 1.2em;
	line-height: 1.2em;
	padding: 0em 0.3em;
	content: '\f128';
	background: #f57c00;
}

/*「アクセス」
---------------------------------------------------------------------------*/
#main_area .ic_access {
	display: inline-block;
	width: 3.6em;
	text-align: center;
	font-size: 90%;
	background: #d85481;
	color: #ffffff;
  margin: 5px 4px 0px 0px;
	padding: 6px 0px 4px 0px;
	border-radius: 10px;
}
#main_area .ic_none {
	display: inline-block;
	width: 3.5em;
}

@media only screen and (max-width: 768px) { 
	#main_area .ic_access  {
	width: auto;
	text-align: start;
	padding: 0px;
	color: #d85481;
	font-weight: bold;
	background: transparent;
	}

	#main_area .ic_none {
		width: 0em;
	}
}

.ggmap {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}

.ggmap iframe,
.ggmap object,
.ggmap embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/*お問合せ
---------------------------------------------------------------------------*/

table.qr {
/*
  border-collapse: collapse;
  margin: 0 auto;
  padding: 0;
  */
  width: 800px;
  table-layout: fixed;
}
.qrnote {  padding: 0em 2px 0em 0em;
	color: #000000;
  background:#fff;
  vertical-align: top;
}
table.formTable{
	width:100%;
	margin:0 auto 20px auto;
	border-collapse:collapse;
}
table.formTable td,table.formTable th{
	border:1px solid #ccc;
	padding:10px;
	line-height: 1.4;
}
table.formTable th{
	width:20%;
	font-weight:normal;
	background:#efefef;
	text-align:left;
}
p.error_messe{
	margin:5px 0;
	color:red;
}
@media only screen and (max-width: 768px) { 
	table.formTable td,table.formTable th{
	  display:inline-block;
		width:100%;
		float: left;
	}
}

/*汎用テーブル
---------------------------------------------------------------------------*/
.tbl {
	width: 100%;
	margin: 0px auto 10px auto;
	padding: 0px;
	border: 1px solid #8a8a8a;
  font-size: 100%;
}

.tbl th {
	background-color: #fffcd3;
	line-height: 1.2;
  text-align: center;
	padding: 5px;
	border-bottom: 1px dotted #8a8a8a;
	border-right: 1px solid #8a8a8a;
}

.tbl td {
	line-height: 1.6;
	margin: 0px 0px 0px 0px;
	padding: 5px 5px 5px 5px;
	border-bottom: 1px dotted #8a8a8a;
}

.tbl caption {
	vertical-align: left;
	font-weight: bold;
	color: #e4007f;
}

.tbl img {
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	border: 0px solid #acacac;
}
@media only screen and (max-width: 768px) { 
	.tbl {
    font-size: 86%;
	}
}


/*フッター
---------------------------------------------------------------------------*/
#footer {
	clear: both;
	background: #635556;
	color: #ffffff;
	margin: 100px auto 0px auto;
	padding:10px 0px 10px 0px;
}

.logo_space {
	position: fixed;
	top: 6px;
	left: 0px;
	z-index: 9999999;
	margin: 0 0 0 5px;
	padding: 3px 3px 3px 3px;
}

.logo_space img {
  height: 30px;
}

.tel_space {
	position: fixed;
	bottom: 0px;
	left: 0px;
	z-index: 999;
	opacity: 0.9;
	text-align: center;
	font-size: 11px;
	line-height: 1.0;
	color: #ffffff;
	margin: 0 0 0 5px;
	padding: 3px 3px 3px 3px;
	-webkit-border-top-left-radius: 5px;  
	-webkit-border-top-right-radius: 5px;  
	-moz-border-radius-topleft: 5px;  
	-moz-border-radius-topright: 5px;  
	background: #e5195b;
}
.tel_space a {
	color: #ffffff;
	text-decoration: none;
}
.tel_space i {
	font-size: 40px;
  color: #ffffff;
	margin: 2px 0px 0px; 0;
}


/*強調部分
---------------------------------------------------------------------------*/
#contents .caution {
	color: #be1b00;
	padding:5px 5px 5px 5px;
	border: 2px solid #be1b00;
}
#contents .caution strong {
	color: #be1b00;
}


/*注釈部分
---------------------------------------------------------------------------*/
#contents .notes {
	background: #fffbcc;
	line-height: 1.5;
	color: #461a0c;
	margin: 5px 0px 5px 0px;
	padding:3px 5px 3px 5px;
	border: 1px solid #c07e00;
}

#contents .notes strong {
	color: #692800;
}


/*ページナビ
---------------------------------------------------------------------------*/
ul.pageNav {
	margin: 0 0 10px;
	padding: 10px 10px 5px;
	text-align: center;
}

ul.pageNav li {
	display: inline;
	margin: 0 2px;
	padding: 0;
}

ul.pageNav li span,
ul.pageNav li a {
	display: inline-block;
	margin-bottom: 5px;
	padding: 5px 13px;
	background: #000;
	color: #fff;
	text-decoration: none;
	vertical-align: middle;
}

ul.pageNav li a:hover {
	color: #000;
	background: #888;
	border-color: #00f;
}

/*画像オンマウス透過
---------------------------------------------------------------------------*/
a:hover img{
	opacity: 0.6;
	filter: alpha(opacity=60);
	-moz-opacity:0.6;
}

/*ボタン
---------------------------------------------------------------------------*/
.btn_space {
  text-align: center;
}
.btn_m {
	display: inline-block;
  width: 200px;
  font-size: 110%;
	padding: 10px 0px;
	background:#e5195b;
	border-radius:5px;
}

.btn_space a:link, .btn_space a:visited { color:#ffffff; }
.btn_space a:hover{
	color:#ffffff;
	background:#b5003b;
}

.btn_s {
	margin: 0px;
	padding: 5px 15px 5px 15px;
	background:#e5195b;
	text-align:center;
	text-decoration:none;
	border-radius:5px;
}
.btn_s:link ,.btn_s:visited {	color:#ffffff; }
.btn_s:hover{ background:#b5003b; }

/*トップへ戻るボタン
---------------------------------------------------------------------------*/
#page-top {
    position: fixed;
    bottom: 20px;
    right: 30px;
    font-size: 100%;
}
#page-top a {
    background: #666;
    text-decoration: none;
    color: #fff;
    width: 60px;
    padding: 10px 0;
    text-align: center;
    display: block;
    border-radius: 50px;
}
#page-top a:hover {
    text-decoration: none;
    background: #999;
}


/*「営業時間カレンダー」 ※COVID-19 時短営業期間の臨時表示
---------------------------------------------------------------------------*/
/*
.caltable {
  border-collapse: collapse;
  border: solid 2px #114754;
  table-layout: fixed;
}
*/

.caltable {
  display: block;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
}

.month {
  background-color: #69b7ca;
  border: solid 2px #114754;
  padding: 5px;
  text-align: center;
  color: #ffffff;
  font-size: 1.2em;
  font-weight: bold;
}

.week {
  background-color: #69b7ca;
  border: solid 2px #114754;
  padding: 5px;
  text-align: center;
  color: #ffffff;
  font-size: 1.2em;
  font-weight: bold;
}

.day {
  background-color: #e6f2f5;
  border: solid 2px #114754;
  width: 110px;
  height: 70px;
  padding: 5px;
  text-align: left;
  vertical-align: top;
  color: #114754;
  font-size: 1.0em;
}

.dnum {
  font-size: 1.3em;
}


/* 原稿データの作り方解説のアコーディオン
---------------------------------------------------------------------------*/
.procedure-container {
  display: flex;
  flex-direction: column;
  align-items: left;
}

.procedure-006 {
    max-width: 1022px;
    margin-bottom: 7px;
    background-color: #f3fbeb;
    border-radius: 5px;
}

.procedure-006 summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 0em 1.3em;
    color: #333333;
    font-weight: 1022px;
    cursor: pointer;
}

.procedure-006 summary::-webkit-details-marker {
    display: none;
}

.procedure-006 summary::after {
    transform: translateY(-25%) rotate(45deg);
    width: 7px;
    height: 7px;
    margin-left: 10px;
    border-bottom: 3px solid #bcd9a6;
    border-right: 3px solid #bcd9a6;
    content: '';
    transition: transform .3s;
}

.procedure-006[open] summary::after {
    transform: rotate(225deg);
}

.procedure-006 p {
    transform: translateY(-10px);
    opacity: 0;
    margin: 0;
    padding: 1em 2em 1.5em;
    color: #333333;
    background-color: #ffffff;
    transition: transform .5s, opacity .5s;
}

.procedure-006[open] p {
    transform: none;
    opacity: 1;
}