/*!
 * Bootstrap v3.3.6 (http://getbootstrap.com)
 * Copyright 2011-2015 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */

body{
	font-family: "メイリオ","Hiragino kaku gothic pro",
	             sans-serif;
}

h1 {
	float: left;
	margin: 0px;
	padding: 10px 0px 8px 20px;
	width: 750px;
	font-size:10px;
	color:#666666;
	font-weight: normal;
	text-align: left;
}


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

/* ------------------------------------------------------------
　　ページベース
------------------------------------------------------------ */

#main-container {
	width: 100%;
        max-width: 100%;
	margin: 0 auto;
	padding: 0px 0px 0px 0px;
}

#top {
	width: 100%;
	margin: 0 auto;
	padding: 0px 20px 0px 5px;
	text-align:left;
}


.div750  {
	clear:both;
    float:left;
	width: 750px;
	margin: 0 auto;
	padding: 0px 0px 0px 0px;
}


img {
    width:100%;
    max-width: 100%;
    height: auto;
}


/* ------------------------------------------------------------
     セーフエリア対応
------------------------------------------------------------ */

.contents{
      padding-right: env(safe-area-inset-left);
      padding-left: env(safe-area-inset-left);
      padding-top: env(safe-area-inset-top);
      padding-bottom: env(safe-area-inset-bottom);
    }

/* ------------------------------------------------------------
     ヘッダー
------------------------------------------------------------ */

#header {
        clear:both;
	width: 100%;
	height: 83px;
	margin: 0px;
	padding: 0px;
}

#header-logo {
        float:left;
	height: 83px;
	margin: 0px;
	padding: 0px;
	text-align:left;
}

#header-kobuna {
        float:left;;
	margin: 45px 0px 0px 10px;
	padding: 0px;
	text-align:left;
	
}

#header-kobuna-font1 {
	text-align:right;
	font-size: 11px;
	color:#000000;

}

#header-kobuna-font2 {
	margin: 0px 0px 0px 0px;
	padding: 0px;
	text-align:right;
	font-size: 16px;
	color:#000000;

}


#header-tel {
        clear:both;
        float:left;
	width: 100%;
	margin: 0px auto;
	padding: 0px;
        text-align: center;
        border-bottom: 1px solid #87cefa;
}

#header-tel-a {
        clear:both;
        float:left;
        width: 60%;
	margin:  0px 0px 0px 0px;
	padding: 0px;
}

#header-tel-s {
        float:left;
        width: 40%;
	margin: 0px 0px 0px 0px;
	padding: 0px;
}

#header-toiawase {
        float:left;
	width: 155px;
	height: 48px;
	margin: 2px 0px 0px 0px;
	padding: 0px;
}

#header-toiawase a{
	display:block;
	width:155px;
	height:48px;
	background-image:url(bottan/toiawase-roll.gif);
	background-repeat:no-repeat;
	background-position: top left;
	text-decoration: none;
	text-indent:-9999px;
}

#header-toiawase a:hover{
	background-position: bottom left;
	text-decoration:none;
}


#header-bar {
        clear:both;
        float:left;
	width: 100%;
	height: 12px;
	margin: 2px 0px 10px 0px;
	text-align: left;
        background-image: url("top-img/header-bar.gif");
        background-repeat: repeat-x;
}

/* ------------------------------------------------------------
　　drawer
------------------------------------------------------------ */

.drawer-hamburger {
  width: 3rem;
}


/* ------------------------------------------------------------
　　carousel
------------------------------------------------------------ */
 
 #h1-carousel {
  font-size:24px;
}


#nav-color a{
	color:#808080;
}

#nav-color a:hover{
	color:#808080;
	background-color:#fff0f5;
}




/* ------------------------------------------------------------
　　メイン-ボックス　左・右
------------------------------------------------------------ */
#main {
        clear:both;
	float:left;
	width: 100%;
	margin: 5px 0px 0px 0px;
}

/* ------------------------------------------------------------
　 メディア作品
------------------------------------------------------------ */
.mediahead-sab{
        clear:both;
	float:left;
	width: 100%;
	height:30px;
	padding: 0px;
	margin: 0px 0px 0px 0px;
	text-align:center;
}

.media-slider-index{
        clear:both;
	float:left;
	width: 100%;
	height:auto;
	padding: 0px;
	margin: 7px 0px 10px 0px;
	text-align:center;
}

.media-slider{
        clear:both;
	float:left;
	width: 100%;
	height:auto;
	padding: 0px;
	margin: 30px 0px 10px 0px;
	text-align:center;
}

#media-sliderphoto img{
	float:left;
        width: 100%;
        height: auto;
	margin-right: 4px;
}

/*slick setting*/
.slick-prev:before,
.slick-next:before {
    color: #000000;
}


/* ------------------------------------------------------------
　　CM ニュースバナー
------------------------------------------------------------ */


.cm-banner {
        clear:both;
	float:left;
	width: 100%;
	margin-left:auto;
	margin-right:auto;
	margin-top:30px;
	margin-bottom:30px;
}


/* ------------------------------------------------------------
　　メイン-こだわり
------------------------------------------------------------ */


#kodawari-banner {
        clear:both;
	float:left;
	width: 100%;
	margin-left:auto;
	margin-right:auto;
	margin-top:10px;
}


#kodawari-banner a:hover{
	background-position: bottom left;
	text-decoration:none;
}

#kodawari-text {
        clear:both;
	float:left;
	width: 100%;
	margin-top: 2px;
	margin-bottom: 10px;
	margin-left:auto;
	margin-right:auto;
	font-size: 10px;
	color: #000000;
	text-align:center;
}



/* ------------------------------------------------------------
　　左メイン-ボックス
------------------------------------------------------------ */
.main-contents-box{
	clear:both;
	float:left;
	width: 100%;
	padding: 10px 0px;
        margin-left:auto;
	margin-right:auto;
}

/* コンテンツの箱に「高さ」を正しく認識させる */
.main-contents-box {
    overflow: hidden; /* これを入れると、中の要素に合わせて箱が広がり、下の要素が押し下げられます */
    height: auto;     /* 念のため高さ自動調整も指定 */
    
    /* 以前追加したz-indexはそのままでOKですが、overflow:hiddenが効けば不要になる場合もあります */
    position: relative; 
    z-index: 100;
}

.main-contents-text{
	clear:both;
	width: 100%;
	padding: 0px 0px;
	margin: 20px 0px 0px 0px;
	text-align:center;
	font-family: 'Montserrat', sans-serif;
	font-size: 17px;
	color:#000000;

}

.main-contents-text2{
	clear:both;
	width: 100%;
	text-align:center;
	font-size: 12px;
	font-family: 'Mplus 1p';
	font-weight: regular;
	color:#000000;
   margin: 0px auto 20px auto;
}

.m-order-flow {
    clear: both;
    /* float: left; ← これがあると左に行こうとするので削除 */
    width: 100%;    /* 横幅いっぱい */
    text-align: center; /* 中身（画像）を中央寄せにする */
    margin: 0 auto; /* ボックス自体も画面の中央に配置 */
    padding: 0px;
    color: #000000;
}

.m-order-flow img {
      border: none;
      text-decoration: none;
}


.m-order-flow img:hover {
         opacity: 0.7;
         filter: alpha(opacity=70);
}

.m-order-flow-text {
    clear:both;
	width: 100%;
	height:10px;
	margin-top: 2px;
	margin-bottom: 10px;
	margin-left:auto;
	margin-right:auto;
	font-size: 10px;
	color: #000000;
	text-align:right;
}

.m-menu1 {
    /* float: left;  ←これが重なりの原因なので無効化（削除）します */
    clear: both;     /* 上の要素の回り込みは解除 */
    width: 100%;
    margin: 15px 0px 20px 0px; /* 下の余白を10pxから20pxに広げました */
    padding: 0px 10px 0px 10px;
    position: relative;
    z-index: 100;    /* 手前に表示 */
    overflow: hidden; /* 高さ崩れを防ぐ */
}

/* m-menu1の中にあるリンクを、ブロック要素（箱）に変えて隙間を埋める */
.m-menu1 a {
    display: block;       /* リンクをブロック状にする */
    width: 100%;          /* 横幅いっぱいに広げる */
    height: 100%;         /* 高さもいっぱいに広げる（親要素に高さがある場合） */
    text-decoration: none; /* 下線を消す（お好みで） */
}

/* もしtableのセル(th)自体に余白(padding)があって邪魔している場合 */
.m-menu1 th {
    padding: 0;           /* セルの余白をなくす */
}
/* その分、リンクの内側に余白を持たせる（クリック範囲を確保するため） */
.m-menu1 .m-menu-p a {
    padding: 10px;        /* ここで余白調整 */
}

.m-menu-h2{
	font-size:16px;
	color:#696969;
	font-weight:bold;
	margin: 0px;
	padding: 5px 0px 5px 5px;	
}

.m-menu-p{
	font-size:14px;
	color:#000000;
	font-weight:normal;
	text-align: left;
   vertical-align: top;
	margin: 0px 0px 15px 0px;	
	padding: 20px 0px 10px 0px;	
}

.m-menu-p a{
    display:block;
    width: 100%; /* 横幅 */
    height: 100%;
    color: #000000;
    text-decoration: none;		
}

/* ------------------------------------------------------------
　　持ち込みについて　バナー
------------------------------------------------------------ */
.m-menu-banner {
    clear: both;
    width: 100%;
    margin: 30px auto 30px auto; /* 中央寄せにするためにautoに変更（元の記述でもOKです） */
    padding: 0;      /* 必要に応じて調整 */
    text-align: center;
    
    /* ↓↓ 今回の修正で重要な部分 ↓↓ */
    position: relative;
    z-index: 100;        /* 手前に表示 */
    overflow: hidden;    /* 高さを確保して下の要素を押しのける */
}
.m-menu-banner img {
      border: none;
      text-decoration: none;
}


.m-menu-banner img:hover {
         opacity: 0.7;
         filter: alpha(opacity=70);
}

/* ------------------------------------------------------------
　　ブログ記事リンク
------------------------------------------------------------ */


/* Noteセクション全体の調整 */
.note-section {
  padding: 20px 0;
}

/* 各記事の枠（スマホでもPCでも下に隙間を作る） */
.note-item-col {
  margin-bottom: 40px; /* ここで隙間を一括管理 */
}

/* 記事のサムネイル画像 */
.note-img {
  height: 190px;
  object-fit: cover; /* 画像の比率を保ったままトリミング */
  width: 100%;
}

/* 記事タイトル */
.note-title {
  font-size: 16px;
  font-weight: bold;
  line-height: 1.4;
  color: #343a40; /* text-darkの色 */
  margin-bottom: 8px;
}

/* 記事の抜粋文 */
.note-text {
  font-size: 13px;
  line-height: 1.6;
  color: #6c757d; /* text-mutedの色 */
}

/* 「記事を読む」ボタン */
.note-btn {
  font-size: 12px;
}


/* ------------------------------------------------------------
　　お取り扱い商品
------------------------------------------------------------ */

.item-banner-line{
        clear:both;
	float:left;
	width: 80%;
	margin: 10px 0px 10px 0px;
	padding: 2px 0px 3px 5px;
	font-size: 16px;
	color: #000000;
	font-weight: bold;
	text-align: left;
	border-bottom: 1px solid #999999;
}

.item-bannerphoto1{
    clear:both;
	float:left;
	width: 30%;
	padding: 0px;
	margin: 7px 5px 10px 5px;
        text-align: center;
}

.item-bannerphoto2{
	float:left;
	width: 30%;
	padding: 0px;
	margin: 7px 5px 10px 5px;
        text-align: center;
}

#item-bannerphoto img {
      border: none;
      text-decoration: none;
}


#item-bannerphoto img:hover {
         opacity: 0.7;
         filter: alpha(opacity=70);
}


#item-banner-name {
	width: 90%;
	height:22px;
	margin-left:auto;
	margin-right:auto;
	padding: 4px 0px 0px 0px;
	font-size: 11px;
	color: #ffffff;
	font-weight: regular;
	text-align: center;
    background-color: #696969 

}

#item-banner-name a{
	color: #ffffff;
	text-decoration: none;	
}


.item-banner-box2 {
    clear:both;
	float:left;
	width: 100%;
	margin: 5px 0px 25px 0px;
	padding: 15px 0px 0px 0px;
	font-size: 16px;
	color: #000000;
	font-weight: bold;
	text-align: center;

}

.item-banner-box2 a{
    display:block;
    width: 100%; /* 横幅 */
    height: 100%;
	color: #000000;
	text-decoration: none;		
}

.item-banner-box2 a:hover{
	color: #4682b4;

}



/* ------------------------------------------------------------
　　もっと便利に
------------------------------------------------------------ */

.motto{
    clear:both;
    float:left;
    width: 100%;
    margin: 30px 0px 0px 0px;	
	padding: 0px 0px 0px 0px;	

}

.motto-bar{
    clear:both;
    float:left;
    width: 100%;
    margin: 0px 0px 15px 0px;	
	padding: 0px 0px 0px 0px;	

}

.motto-img{
    clear:both;
    float:left;
    margin: 0px 0px 0px 0px;	
	padding: 0px 0px 0px 0px;	

}

.motto-text{
    clear:both;
    float:left;
　　width: 90%px;
    margin: 0px 0px 7px 0px;	
	padding: 2px 15px 0px 15px;
	font-size:14px;
	text-align: left;	

}

/* ------------------------------------------------------------
　　いろんなアイテムに刺繍が入れられます。
------------------------------------------------------------ */

.shishu-item {
    clear:both;
	float:left;
    width: 100%;
    margin: 25px 0px 0px 5px;
    padding: 0px 0px 0px 0px;
}

.shishu-item1 {
    clear:both;
    float:left;
    width: 50%;
    margin: 0px 0px 0px 0px;
    padding: 20px 0px 0px 0px;
}

.shishu-item2 {
    clear:both;
    float:left;
    width: 100%;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 10px;
}


.shishu-item2 ul{
        clear:both;
	float:left;
	height:91px;
	padding: 0px;
	margin: 0px 0px 10px 0px;
	list-style:none;
}

.shishu-item2 li{
	float:left;
	width: 91px;
	height:91px;
	margin-right: 10px;
}

/* ------------------------------------------------------------
　　モーダルダイアログ
------------------------------------------------------------ */

.modal-footer p{
	text-align: center;
	}




/* ------------------------------------------------------------
　　フッター＆コピーライト
------------------------------------------------------------ */

.footer{
    clear:both;
	float:left;
    width:100%;
	margin: 15px 0px 0px 0px;
}

.pagetop{
    clear:both;
    float:right;
	width:60px;
	height:60px;
	margin: 0px 30px 10px 0px;
	padding: 0px 0px 0px 0px;
	text-align: left;
}

.pagetop a{
	display:block;
	width:60px;
	height:60px;
	background-image:url(top-img/back-to-top.gif);
	background-repeat:no-repeat;
	background-position: top left;
	text-decoration: none;
	text-indent:-9999px;
}

.pagetop a:hover{
	background-position: bottom left;
	text-decoration:none;
}


.footer-bar{
    clear:both;
    float:left;
	width: 100%;
	height: 16px;
	margin: 0px 0px 0px 0px;
	text-align: left;
}

.footer-box{
    clear:both;
    float:left;
	width: 100%;
	background-image:url(top-img/footer-bg.gif);
	margin: 0px 0px 20px 0px;
	padding: 0px 0px 20px 0px;
}

.copyright{
    clear:both;
    float:left;
	width: 65%;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}

/* ------------------------------------------------------------
　　右サイドメニュー
------------------------------------------------------------ */

/* ------------------------------------------------------------
　　刺繍サイドメニュー
------------------------------------------------------------ */

.shishuu-menu{
    clear:both;
    float:right;
	width: 100%;
	margin: 0px;
	padding: 0px;
	margin-left: auto;

}

.shishuu-menu ul{
        float:right;
	width: 100%;
	margin: 0px;
	padding: 0px;
	list-style:none;
	margin-left: auto;
}


.s-menu-top{
        width: 200px;
        height: 50px;
	margin: 0px;
	padding: 0px;
}


.s-menu1 {
        width: 100%;
        height: 100%;
	padding: 5px 0px 5px 0px;
	margin-left: auto;
	color: #000000;
	text-align: left;
	border-bottom: 1px dashed #999999;
}

.s-menu1 a{
    display:block;
    width: 100%; /* 横幅 */
    height: 100%;
	color: #000000;
	padding: 12px 0px 0px 20px;
	text-decoration: none;		
}

.s-menu1 a:hover{
    background-color: #f0f0f0;
	color: #4682b4;
}

.s-menu1 span{
	padding: 0px;
	margin: 0px 10px 0px 0px;
	color: #00bfff;
}


#k-menu {
    width: 100%;
    height: 50px;
    margin-top: 25px;
    margin-bottom: 25px;
    padding: 0px 0px 0px 5px;

}

#k-menu a{
	display:block;
	width:100%;
	height:100%;
	background-image:url(bottan/k-menu.jpg);
	background-repeat:no-repeat;
	background-position: top left;
	text-decoration: none;
	text-indent:-9999px;
}


#k-menu a:hover{
	background-position: bottom left;
	text-decoration:none;
}

/* ------------------------------------------------------------
　　サイドメニュー お問い合わせ
------------------------------------------------------------ */
.menu-toiawase {
	width: 95%
	margin: 0px 0px 0px 5px;
	padding: 20px 0px 0px 0px;
        border-top: 1px dashed #999999;
}

.menu-toiawase img {
      border: none;
      text-decoration: none;
}


.menu-toiawaseme img:hover {
         opacity: 0.7;
         filter: alpha(opacity=70);
}
-

/* ------------------------------------------------------------
　　刺繍サブコンテンツサイドメニュー
------------------------------------------------------------ */
.shishuu-sub-menu{
    clear:both;
    float:right;
	width: 100%;
	margin-top: 10px;
	margin-bottom: 10px;
	padding: 0px;
	margin-left: auto;

}

.shishuu-sub-menu ul{
        float:right;
	width: 100%;
	margin: 0px;
	padding: 0px;
	list-style:none;
	margin-left: auto;
}


.sub-cont-top{
	width: 100%;
	height:9px;
	margin-left: auto;
	margin: 0px 0px 10px 0px;
	padding: 0px;
}

.s-menu2 {
        width: 100%;
	height:40px;
	padding: 0px 0px 0px 0px;
	margin-left: auto;
	color: #000000;
	text-align: left;
	border-bottom: 1px dashed #999999;
}

.s-menu2 a{
    display:block;
    width: 100%; /* 横幅 */
    height: 100%;
	color: #000000;
	padding: 12px 0px 0px 20px;
	text-decoration: none;		}

.s-menu2 a:hover{
	background-color: #f0f0f0;
	color: #4682b4;

}

.s-menu2 span{
	padding: 0px;
	margin: 0px 10px 0px 0px;
	color: #00bfff;
}



/* ------------------------------------------------------------
　　注文案内サイドメニュー
------------------------------------------------------------ */

#chumon-menu{
        clear:both;
	float:right;
	width: 100%;
	margin: 10px 0px 15px 0px;
	padding: 0px;
}

#chumon-menu ul{
        float:right;
	width: 100%;
	margin: 0px;
	padding: 0px;
	list-style:none;
}

#c-menu1{
	width: 100%;
	height: 40px;
}

#c-menu2{
	width:100%;
	height:40px;
}

#c-menu3{
	width:100%;
	height:40px;
}

#c-menu4{
	width:100%;
	height:40px;
}

#c-menu5{
	width:100%;
	height:40px;
}

#c-menu6{
	width:100%;
	height:40px;
}


#c-menu1 a{
	display:block;
	width:100%;
	height:40px;
	background-image:url(bottan/toiawase-b.gif);
	background-repeat:no-repeat;
	background-position: top left;
	text-decoration: none;
	text-indent:-9999px;
}

#c-menu2 a{
	display:block;
	width:100%;
	height:40px;
	background-image:url(bottan/mitumori-b.gif);
	background-repeat:no-repeat;
	background-position: top left;
	text-decoration: none;
	text-indent:-9999px;
}

#c-menu3 a{
	display:block;
	width:100%;
	height:40px;
	background-image:url(bottan/chumon-b.gif);
	background-repeat:no-repeat;
	background-position: top left;
	text-decoration: none;
	text-indent:-9999px;
}

#c-menu4 a{
	display:block;
	width:100%;
	height:40px;
	background-image:url(bottan/tuushin-b.gif);
	background-repeat:no-repeat;
	background-position: top left;
	text-decoration: none;
	text-indent:-9999px;
}

#c-menu5 a{
	display:block;
	width:100%;
	height:40px;
	background-image:url(bottan/c-flow-b.gif);
	background-repeat:no-repeat;
	background-position: top left;
	text-decoration: none;
	text-indent:-9999px;
}

#c-menu6 a{
	display:block;
	width:100%;
	height:40px;
	background-image:url(bottan/omochikomi-b.gif);
	background-repeat:no-repeat;
	background-position: top left;
	text-decoration: none;
	text-indent:-9999px;
}



#c-menu1 a:hover{
	background-position: bottom left;
	text-decoration:none;
}

#c-menu2 a:hover{
	background-position: bottom left;
	text-decoration:none;
}

#c-menu3 a:hover{
	background-position: bottom left;
	text-decoration:none;
}

#c-menu4 a:hover{
	background-position: bottom left;
	text-decoration:none;
}

#c-menu5 a:hover{
	background-position: bottom left;
	text-decoration:none;
}

#c-menu6 a:hover{
	background-position: bottom left;
	text-decoration:none;
}



/* ------------------------------------------------------------
　　会社案内サイドメニュー
------------------------------------------------------------ */

.kaisha-menu{
        clear:both;
	float:right;
	width: 100%;
	margin: 0px 0px 10px 0px;
	padding: 0px 0px 10px 0px;
	border-style: solid;
	border-width: 1px;
	border-color: #999999;
}

.kaisha-menu ul{
	margin: 0px;
	padding: 0px;
	list-style:none;
}

.kai-menu-top{
    width: 200px;
    height: 25px;
	margin: 0px 0px 5px 0px;
	padding: 0px 0px 0px 0px;	
}


.s-menu3 {
        width: 100%;
	height:30px;
	padding: 0px 5px 0px 0px;
	margin-left: auto;
	color: #000000;
	text-align: left;
}

.s-menu3 a{
    display:block;
    width: 100%; /* 横幅 */
    height: 100%;
	color: #000000;
	padding: 5px 0px 5px 20px;
	text-decoration: none;			
}

.s-menu3 a:hover{
	background-color: #f0f0f0;
	color: #4682b4;

}

.s-menu3 span{
	padding: 0px;
	margin: 0px 10px 0px 0px;
	font-size: 11px;
	color: #00bfff;
}

/* ------------------------------------------------------------
　　CMサイドメニュー
------------------------------------------------------------ */

.cm-menu{
    clear:both;
	float:right;
	width: 95%;
	margin: 10px 5px 10px 0px;
	padding: 0px 0px 0px 0px;
	color: #000000;
	text-align: center;

}

.cm-menu p{
	margin: 5px 0px 0px 0px;

}

/* ------------------------------------------------------------
　　サイドメニュー bottomスペース 縦スクロール
------------------------------------------------------------ */

.nav-bottom-space{
    clear:both;
	float:right;
	width: 100%;
　　　　height: 30px;
	margin: 10px 0px 200px 0px;
	padding: 0px 0px 0px 0px;
	color: #000000;
	text-align: center;

}


nav .nav-inner {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}



/* ------------------------------------------------------------
　　フッター固定
------------------------------------------------------------ */

#footerFloatingMenu {
    display: block;
    width: 100%;
    position: fixed;
    left: 0%;
    bottom: 0;
    z-index: 9999;
    text-align: center;
    margin: 0 auto;
    padding-bottom: env(safe-area-inset-bottom);
}
 

.koteifooter1{
    clear:both;
    float:left;
    width: 56%;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}

.koteifooter2{
    float:left;
    width: 44%;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}