@charset "utf-8";
/* begin Page */

/* ============= PCの場合 ========================================================================================== */
body
{
	background:#FFF;
	background-image: url('images/wallpaper1.gif');
	background-repeat: repeat;
	background-attachment: scroll;
	background-position: top left; 
	font-family: "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic";

	margin: 0;
	padding: 0;
	text-align: center;
	color: #000000;
}

h1,h2,h3,h4,h5,h6,p,a{ margin:0; padding:0; font-size:14px; text-align:left;}


body .container {
	width: 900px;
	background: #FFF;
	margin: 10px auto;
	border: none;
	text-align:left;
	overflow: auto;
}

body .header { 
	position: relative;
	background: #FFF; 
	margin: 5px 5px 0 5px;
	padding: 0px;
	height:230px;
	/*background: url(images/header_back1.jpg);*/
	background: url(images/top_kamon.jpg);
	border-bottom:#D6B47C 5px solid;
	z-index:0;
}

body .header #nav-drawer{ display:none; }

body .header h1{
	display: block;
	position: absolute;
	top:0px; right:3px;
	font-size:12px; text-shadow:#000 1px 1px;
	color:#BBB; /*#D6B47C;*/
	z-index:1;

} 
body .header h2{
	display: block;
	position: absolute;
	bottom:2px; right:3px;
	font-size:12px; font-weight:100;
	color: #fff; text-shadow:#000 1px 1px;
	z-index:1;
}

body .header .callme{
	display: block;
	position: absolute;
	bottom:70px; right:3px;
	z-index:1;
	border:#CCC solid 1px;
	border-radius: 5px;
	padding:3px;
	background:#FFF;
}

body .header .callme .left{
	margin: 0px;
	padding: 0px;
	float: left;
	width:auto;
	text-align:left;
}

body .header .callme .left img{
	margin:3px;
	width:40px; height:auto;
}

body .header .callme .right{
	margin: 0px;
	padding: 0px;
	float: right;
	width:auto;
	text-align:left;
}

body .header .callme p{
	font-size:10px;
	color:#444;
	text-align:right;
}

body .header .callme p.phone{
	font-size:22px;
	font-weight:bold;
	color: #099;
	text-align:right;
}


/* スマフォヘッダー　検索、電話、Emailの3つのアイコン*/
p.sp_title1, span#search, span#phone, span#email, ul#search_window{ display: none;}

/* PCヘッダー用家紋亭ロゴクリッカブルマップ有効 */
.pc_map{ display: block;}



body .globalmenu { 
	background: #FFF; 
	margin: 0 5px 0 5px;
	padding: 0px;
	height:50px;
	background: url(images/header_back1.jpg);
	text-align:center;
	border-bottom:#D6B47C 5px solid;
} 

body .content {
	display: inherit;
	background: #FFF;
	margin: 5px 5px 0 5px;
	padding: 0px;
	min-height:400px;
}

body .content .side {
	margin: 0px;
	padding: 0px;
	float: left;
	width:223px;
	text-align:left;
	background:#FFF;
}

body .content .main {
	margin: 0px;
	padding: 0px;
	float: right;
	width: 667px;
	text-align:left;
	background:#FFF;
}


#mainImage01,
#mainImage01 img{
	margin: 0 auto;
	height:auto;
	max-width:661px;
	padding:0;
	width:100%;
}

.clr { clear:both;}

body .footer { 
	margin: 5px;
	padding: 0px;
	background: url(images/header_back1.jpg);
} 

body .footer .footer-text{ 
	margin:0px auto;
	padding:20px;
	text-align:center;
}
body .footer .footer-text p,a{
	text-align:center;
	font-size:14px;
}

/* スマフォ時トップページ:　スライダ上辺のオフセット量です。PCのときは非表示　*/
body .main .sp_toppage_topbanner_offset{ display:none; }





/* --- vmenu--- */

ul.vmenu a 
{
   text-align: left;
}

.vmenublock
{
	background: url(images/header.jpg);
	margin:0 3px 0 0;
}

.vmenublock img
{
   margin: 0;
}

.vmenublockcontent
{
	display:block;
	margin-right:auto;  
}

ul.vmenu, ul.vmenu ul
{
   list-style: none;
   display: block;margin-right:auto;  
}

ul.vmenu, ul.vmenu li
{
   margin: 0;
   padding: 0;
   width: auto;
   line-height: 0;
}

ul.vmenu
{
   margin-top: 0;
   margin-bottom: 0;
}

ul.vmenu ul
{
   display: none;
   margin: 0;
   padding: 0;
   position: relative;
}

ul.vmenu ul.active,
ul.vmenu ul li a.active
{
   display: block;
}

ul.active li a.active{
	background:url(images/header_back1.png);
}

ul.vmenu>li>a
{
   padding:0 15px;
   margin:0 auto;
   font-size: 15px;
   font-weight: normal;
   font-style: normal;
   text-decoration: none;
   color: #000000;
   min-height: 30px;
   line-height: 30px;
}
ul.vmenu a 
{
   display: block;
   cursor: pointer;
   z-index: 1;
   position:relative;
}

ul.vmenu li{
   position:relative;
}

ul.vmenu>li
{
   margin-top: 0;
}
ul.vmenu>li>ul
{
   padding: 0;
   margin-top: 0;
   margin-bottom: 0;
}
ul.vmenu>li:first-child
{
   margin-top:0;
}

ul.vmenu>li>a:before
{
   content:url('images/vmenuitemicon.png');
   margin-right:5px;
   bottom: 2px;
   position:relative;
   display:inline-block;
   vertical-align:middle;
   font-size:0;
   line-height:0;
}
.opera ul.vmenu>li>a:before
{
   /* Vertical-align:middle in Opera doesn't need additional offset */
    bottom: 0;
}

ul.vmenu>li>a.active:before
{
   content:url('images/vmenuactiveitemicon.png');
   margin-right:5px;
   bottom: 2px;
   position:relative;
   display:inline-block;
   vertical-align:middle;
   font-size:0;
   line-height:0;
}
.opera ul.vmenu>li>a.active:before
{
   /* Vertical-align:middle in Opera doesn't need additional offset */
    bottom: 0;
}

ul.vmenu>li>a:hover:before,  ul.vmenu>li>a.active:hover:before,  ul.vmenu>li:hover>a:before,  ul.vmenu>li:hover>a.active:before
{
   content:url('images/vmenuhovereditemicon.png');
   margin-right:5px;
   bottom: 2px;
   position:relative;
   display:inline-block;
   vertical-align:middle;
   font-size:0;
   line-height:0;
}
.opera ul.vmenu>li>a:hover:before, .opera   ul.vmenu>li>a.active:hover:before, .opera   ul.vmenu>li:hover>a:before, .opera   ul.vmenu>li:hover>a.active:before
{
   /* Vertical-align:middle in Opera doesn't need additional offset */
    bottom: 0;
}

ul.vmenu>li>a:hover, ul.vmenu>li>a.active:hover
{
   background: #D0C2AD;
   padding:0 15px;
   margin:0 auto;
}
ul.vmenu>li>a:hover, ul.vmenu>li>a.active:hover
{
   text-decoration: none;
}

ul.vmenu a:hover, ul.vmenu a.active:hover 
{
   color: #F00;
}

ul.vmenu>li>a.active:hover>span.border-top, ul.vmenu>li>a.active:hover>span.border-bottom 
{
   background-color: transparent;
}

ul.vmenu>li>a.active
{
   background: url(images/header_back1.png);
   padding:0 15px;
   margin:0 auto;
   text-decoration: none;
   color: #000000;
}

ul.vmenu>li>ul:before
{
   margin:0 auto;
   display: block;
   position: absolute;
   content: ' ';
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
}

ul.vmenu li li a
{
   margin:0 auto;
   position: relative;
}
ul.vmenu ul li
{
   margin: 0;
   padding: 0;
}
ul.vmenu li li{
   position: relative;
   margin-top: 0;
}

ul.vmenu ul a
{
   display: block;
   position: relative;
   min-height: 22px;
   overflow: visible;
   padding: 0;
   padding-left: 50px;
   padding-right: 27px;
   z-index: 0;
   line-height: 22px;
   color: #444;
   font-size: 12px;
   font-weight: normal;
   font-style: normal;
   text-decoration: none;
   margin-left: 0;
   margin-right: 0;
}

ul.vmenu ul a:visited,
ul.vmenu ul a.active:hover,
ul.vmenu ul a:hover,
ul.vmenu ul a.active
{
   line-height: 22px;
   color: #900;				/* 2階層アイテム　文字色 */
   font-size: 12px;
   font-weight: normal;
   font-style: normal;
   text-decoration: none;
   margin-left: 0;
   margin-right: 0;
}

ul.vmenu ul ul a
{
   padding-left: 54px;
}
ul.vmenu ul ul ul a
{
   padding-left: 81px;
}
ul.vmenu ul ul ul ul a
{
   padding-left: 108px;
}
ul.vmenu ul ul ul ul ul a
{
   padding-left: 135px;
}

ul.vmenu ul>li>a:hover, ul.vmenu ul>li>a.active:hover
{
   background: url(images/header_back1.png);
   margin:0 auto;
}
ul.vmenu ul li a:hover, ul.vmenu ul li a.active:hover
{
   text-decoration: none;
   color: #F00;
}

ul.vmenu ul a:hover:after
{
   background-position: center ;
}
ul.vmenu ul a.active:hover:after
{
   background-position: center ;
}
ul.vmenu ul a.active:after
{
   background-position: bottom ;
}

ul.vmenu ul>li>a.active
{
   margin:0 auto;
}
ul.vmenu ul a.active, ul.vmenu ul a:hover, ul.vmenu ul a.active:hover
{
   text-decoration: none;
   color: #900;				/* 2階層アイテム　アクティブ時の文字色 */
}



/* コンテンツブロック */
.umt-post.pc{ display: block;}
.umt-post.sp{ display: none;}


/* --- side block ---*/

.side-block{ margin:5px auto; width:auto; height:auto; text-align:center;}
.side-block img{ display:block; position:relative; margin:10px auto; width: auto; height:auto;}
.side-block-body{ margin:0 auto; }
.side-blockheader{ margin:0; background:url(images/header_back1.jpg); font-size:14px; font-weight:100;padding:3px 3px 3px 10px;}
.side-blockcontent p{ font-size:14px; padding:3px;}


/* --- メニュー 特定のアイテムの文字装飾 --- */
.menu_font_color_a{ color:#900;}
.menu_font_color_b{ color:#F00;}




/* トップページ　*/

/* イメージバナー */
.umt-post img.banner{ display:block; margin: 10px 0; width:100%; height:auto;}
.umt-post img.banner_sp{ display: none;}
.umt-post .banner_sp_org{ display: none;}



/* 当社について */
#topcontent4{ display: block;}
#topcontent4_sp{ display:none;}

/* 家紋額のご注文方法 */
.page_top_contents_chuumon_2{ display: block;}

#top3content{ display: block;}
#top3content_sp{ display:none;}


/* Swiper */
.swiper-slide.pc{ display: block;}
.swiper-slide.sp{ display: none;}


/* 問合せフォーム */
.inq_form { background:#f8f8f8; margin:0px; margin-left:3px; padding:20px; padding-top:10px; font-size:14px; font-weight:normal; }
.inq_form .title{ background:#f0f0f0; margin-bottom:20px; padding:15px; font-size:18px; font-weight:bold; color:#000;}
.inq_form .discription{ margin-bottom:20px; }
.inq_form .hissu{ color:#F00;}
.inq_form .small{ font-size:10px;}
.inq_form th{width:180px;}
.inq_form td{width:180px;}
.inq_form .left{ float:left; display:inline-block; width:30%;}
.inq_form .right{ float:right; display:inline-block; width:70%;}
.inq_form .clear{ clear:both; margin-bottom:20px;}
.inq_form li{ list-style: none; margin:0; padding:0 }
.inq_form .foot{ text-align: center; margin-bottom:20px;}
.inq_form .buttonarea{ text-align:center; margin-bottom:20px;}
.inq_form input#name{ width:40%;}
.inq_form input#email{ width:70%;}
.inq_form label input#require_qa{ text-align:left}
.inq_form label input#require_pamphlet{ text-align:left}
.inq_form input#zip{ width:20%;}
.inq_form input#prefecture{ width:60%;}
.inq_form input#address{ width:80%;}
.inq_form input#phone{ width:50%;}
.inq_form input#kamon{ width:50%;}
.inq_form textarea#description{ width:95%; height:120px;}


/* トップページ　Youtube動画　*/
.blog_item2{ margin:6px;}
.blog_item2 .mvcap{ margin:12px 0; width:49%; height:auto; border:#CCC 1px solid; background:#fafafa; display: inline-block; position:relative;}
.blog_item2 .mv video{ margin:0; width:100%; height:auto; }
.blog_item2 .mv iframe{ max-width:100%; }
.blog_item2 .cap{ height:140px; display:block; overflow:auto;}
.blog_item2 .cap p{ margin:5px; font-size:12px; color:#000; }
.blog_item2 .cap .link{ margin:0; text-align:right; width:100%; }
.blog_item2 .cap a{ margin:5px; font-size:10px; color:#000; }

/* overwride:2020.03.29 */
.blog_item2 .mv iframe{position:relative;height: 240px;}
.blog_item2 .mv .youtube {
	position: relative;
	max-width: 100%;
	height: 0;
	padding: 77% 0 0;
	text-align: center;
}

.blog_item2 .mv .youtube::before {
	content: '';
	color: #fff;
	position: absolute;
	z-index: 1000;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
  -webkit- transform: translate(-50%,-50%);
	width: 5em;
	height: 5em;
	z-index: 1000;
	background-image: url(images/youtube.png);
	background-size: 100%;
	background-position: center center;
	background-repeat: no-repeat;
}

.blog_item2 .mv .youtube img {
	width: 100%;
	height: auto;
	box-sizing: border-box;
	position: absolute;
	top: 0;
	left: 0;
  text-align: center;
  margin: 0 auto;
  display: block;
  vertical-align: top;
}



/* 商品説明ページ　リンクボタン */
form.linkbtm{ margin-bottom:15px; }

/* 家紋額記念品選定ガイド */
#guide p{ margin:10px;  }
#guide p img.in_text_left{ float:left; margin:0; margin-right:10px; margin-bottom:5px;}
#guide img.normal{ margin:2px; padding:0; width:30%; height:auto; display:inline-block;}
#guide table{ margin: 10px 0; width:100%; font-size:12px;}
#guide table tr th{ font-weight:normal; background-color:#FFF2CC }
#guide table tr td{ text-align:center; }
#guide .org{ background-color:#FCE4D6}
#guide .gly{ background-color:#EEEEEE}
#guide .blu{ background-color:#D9E1F2}
#guide .grn{ background-color:#E2EFDA}
#guide .ylw{ background-color:#FFD966}
#guide .dyl{ background-color:#FFC000}
#guide .crm{ background-color:#FFF2CC}

#guide table.map{ margin:20px 0px; table-layout: fixed; font-size:12px; width:100%;}
#guide table.map tr td{ margin:0; padding:3px; border:#FFF; word-wrap: break-word; text-align:center; vertical-align:middle;}
#guide table.map tr td.sidetitlewidth{ width:20px;}
#guide table.map tr td.top{ background-color:#0CF;}
#guide table.map tr td.left{ background-color:#F60;}
#guide table.map tr td.right{ background-color:#F9F;}
#guide table.map tr td.bottom{ background-color:#FF3;}
.vert{ writing-mode: tb-lr; writing-mode: vertical-lr;  -webkit-writing-mode: vertical-lr; }
#guide table.map a{ font-size:11px;}

/* 家紋名検索リスト */
#srch p.summary{ margin:10px; }
#srch p.caution{ margin:30px 10px 0 10px; color:red;}
#srch .left3cols{width:80px}
#srch .right2cols{width:200px}
#srch table.sagaku{ margin:0 0 20px 0px; font-size:12px; width:100%; table-layout:fixed; word-break: break-word; }
#srch table.sagaku td{ margin:0; padding:3px; text-align:center; vertical-align:middle;}
#srch table.sagaku td.title{ width:50%; background-color:#6C9; }
#srch table.sagaku td.maru{ width:25%; background-color: #FFF2CC; }
#srch table.sagaku td img{ width:70px;; display:inline-block; }
#srch table.sagaku a{ font-size:11px;}
#srch .org{ background-color:#FCE4D6}
#srch .gly{ background-color:#EEEEEE}
#srch .blu{ background-color:#D9E1F2}
#srch .grn{ background-color:#E2EFDA}
#srch .ylw{ background-color:#FFD966}
#srch .dyl{ background-color:#FFC000}
#srch .crm{ background-color:#FFF2CC}
img.sagaku_sp{ display: none;}	/* PCの場合、家紋差額表table.sagakuを表示し代替イメージimg.sagaku_spは表示しない */

/* PlateSelect */
#plate1,
#plate2{
  display: none;
}