/*@charset "utf-8";*/
/* CSS Document */


@media (max-width: 780px) {
/* --------------------------------------------------
モバイル用　
-------------------------------------------------- */


/* --------------------------------------------------
基本レイアウト枠　
-------------------------------------------------- */
#container{
width:100%;
border-left: 0px #c0c0c0 solid;
border-right: 0px #c0c0c0 solid;
}

#import{
padding-left:2%;
padding-right:2%;
}


/* --------------------------------------------------
初期値に戻す
-------------------------------------------------- */
.flex{display:inline;}


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

div.header_img {
background: url(header_mob.jpg);
background-repeat:no-repeat;
height:60px;
width:100%;
background-size:contain;  
}
-------------------------------------------------- */

/* --- ヘッダー_ホーム画面へのリンク
.link_home {
width:100%;
top:0px;
}
 --- */


/* --------------------------------------------------
新ヘッダー
-------------------------------------------------- */
#header{
border-top:6px #ff744b solid;
}

/* --- ヘッダーの画像 --- */
#img_header { 
background: url(header_mob.jpg);
background-repeat:no-repeat;
background-size:contain;  
height:60px;
width:100%;
}




/* --------------------------------------------------
   ログイン状態の表示
-------------------------------------------------- */
/*
#log_off { 
left:42%;
top:12px;

position:absolute;
font-size:small;
color:#666666;
border: solid 1px #999999;
}
*/

/*
#log_on {
left:42%;
top:12px;
position:absolute;
font-size:small;
color:#666666;
border: solid 1px #999999;
}
*/

/*ログアウトボタン
#log_out { 
font-size: x-small;
display: block;
margin-left: 3%;
}
*/

/* --------------------------------------------------
   新_ログイン状態の表示
-------------------------------------------------- */
#box_logon{
left:50%;
top:12px;
}


/* --------------------------------------------------
   ログイン画面
-------------------------------------------------- */
#login_box{	width:100%;}


/* --------------------------------------------------
   ホーム画面_諸々
-------------------------------------------------- */
.font_3l{margin-right:4%;}

/*表紙画像*/
.rotate-hover{margin-top:2%;}

/*SP source Plus　レイアウト*/
.box_plus{width:100%;}
.text_plus{margin:0;}

/*make people*/
#img_people{width:90%;}




/* --------------------------------------------------
ハンバーガーメニュー
-------------------------------------------------- */
.drawer_menu{
position:fixed;
top:5px;
right:0px;
background-color: #f5f5f5;
border-radius: 30px;
z-index:100;
}

/* チェックボックスを非表示にする */
.drawer_hidden {
  display: none;
}

/* ハンバーガーアイコンの設置スペース */
.drawer_open {
  display: flex;
  height: 55px;
  width: 55px;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 100;
  cursor: pointer;
}

/* ハンバーガーメニューのアイコン */
.drawer_open span,
.drawer_open span:before,
.drawer_open span:after {
  content: '';
  display: block;
  height: 3px;
  width: 25px;
  border-radius: 3px;
  background: #333;
  transition: 0.5s;
  position: absolute;
}

/* 三本線の一番上の棒の位置調整 */
.drawer_open span:before {
  bottom: 8px;
}

/* 三本線の一番下の棒の位置調整 */
.drawer_open span:after {
  top: 8px;
}

/* アイコンがクリックされたら真ん中の線を透明にする */
#drawer_input:checked ~ .drawer_open span {
  background: rgba(255, 255, 255, 0);
}

/* アイコンがクリックされたら上下の線を回転 */
#drawer_input:checked ~ .drawer_open span::before {
bottom: 0;
transform: rotate(45deg);
position: fixed;
top:35px;
}

#drawer_input:checked ~ .drawer_open span::after {
top: 0;
transform: rotate(-45deg);
position: fixed;
top:35px;
}

/* メニューのデザイン*/
.nav_content {
z-index:100;
padding-top:5%;
width: 100%;
height: 100%;
position: fixed;
top: 60px;
left: 100%; /* メニューを画面の外に飛ばす */
background: #ff744b;
transition: .5s;
}

.nav_list {
list-style: none;
}


/* 各メニュー */
.nav_item {
font-size:large;
background-color:#fff;
border-radius: 10px;
margin:3%;
padding:4%;
}

.nav_item a{
display:block;
height:100%;
width:100%
}

.nav_item span{
color:#ff744b;
font-weight:bolder;
float:right;
left:auto;
right:0px;
}


/* アイコンがクリックされたらメニューを表示 */
#drawer_input:checked ~ .nav_content {
left: 0;/* メニューを画面に入れる */
}


/* --------------------------------------------------
トップページ
-------------------------------------------------- */
#choice_catalog{
margin-bottom:5%;
}

.catalog_comment{
display:block;
margin-bottom:4%;
}


.catalog_comment p{
float:none;
margin-bottom:5%;
}


.sticky {position: relative;}


/* --- モバイル用_表紙画像 --- */
div.top_img_mob { 

background: url(cover.jpg);
background-repeat:no-repeat;
width:55%;
background-size:contain;  

}

/* --------------------------------------------------
メニューボタン
-------------------------------------------------- */
#bt_menu_mobile{
display:flex;
flex-wrap: wrap;
width:100%;
padding-bottom:15%;
}

#bt_menu_mobile span{
display:block;
width:80%;
background: #999;
color: #fff;
border-radius: 1vh;
text-align:center;
padding:5% 2%;
margin:5% 5%;
}

#bt_menu_mobile img{
width:50%;
margin-top:2%;
}

#bt_menu_mobile div{
width:50%;
}



.order_img{
width:50%;
}


/* --------------------------------------------------
   別冊　レイアウト
-------------------------------------------------- */
.box_sourceplus{
width:100%;
}


/* --------------------------------------------------
   共通レイアウト
-------------------------------------------------- */
/*各ページ見出し*/
.subttl_box p{border-right: 0px #e3e3e3 dashed; font-size:large; line-height:30px;}


.subttl_border {
border: 1px solid #f3f3f3;
margin-bottom:0%;
border-radius: 0px;
}


/* --------------------------------------------------
   在庫確認
-------------------------------------------------- */
/*左側検索メニュー*/
#box_left{width:100%;padding:0;}
.left_input{width:100%;}



/*サムネイル表示*/
.box_stockthum {
display:flex;/*重要*/
flex-wrap:wrap;
width:100%;
height:170px;
margin-top:6%;
padding-bottom:4%;
}

/*
.img_stockthum{
float:left;
}
*/

.spec_stockthum{
margin-right:5%;
padding-left:2%;
flex-grow:1
}


/*
.price_stockthum{
width:120px;
border-bottom:#cfcfcf solid 1px;
margin-top:4%;
}
*/









/* --------------------------------------------------
 現在の在庫数 
-------------------------------------------------- */
.zaiko{
margin-top:0%;
width:100%;
}

.left_input {
margin: 0%;
padding:0%;
}

.left_input ol {
list-style: none;
}


/*追記のテキスト*/
#stock_sub {
margin-top:4.2%;
}

/* --------------------------------------------------
 画像ダウンロード
-------------------------------------------------- */
#main_download{
width:95%;
}

#body_body_TableResult table{
	display: inline;
}

#body_body_TableResult table tr{
	display: inline;
}

#body_body_TableResult table td{
	display: inline-block;
	width:50%;
	float:left;
	min-width:140px;
	padding-bottom:5%;
}

.item_ttl_imgdown h4{
float:none;
margin-top:6%;
}

.item_ttl_imgdown div{
margin-top:4%;
margin-bottom:2%;
line-height:1.5em;
}


/*--------------------------------------------------------------------
  お知らせ
--------------------------------------------------------------------*/
#import {
height: 100%;
box-sizing: border-box;
}

.box_catalog{
width:100%;
min-height:35vh;
max-height:100%;
display:flex;
flex-start;
border-top:1px #999 solid;
border-right:1px #999 solid;
border-bottom:1px #999 solid;
margin-bottom:10%;
}

.catalog P{
height:5%;/*下のdiv heightと合計して100%に */
border-left:1px #999 solid;
}

.catalog div{
display:flex;
justify-content:center;
align-items:center;
border-left:1px #999 solid;
height:95%;
width:100%;
flex-basis: auto;
box-sizing:border-box;
}

.catalog span{
background-color:#eee;
display:inline-block;
width:100%;
line-height:40px;
text-align:center;
}

.catalog div img{
height:auto;
width:auto;
max-height:100%;
max-width:100%;
vertical-align:top;
margin-top:3%;
}

.day{flex-grow:1;}
.page{flex-grow:1;}
.itemname{flex-grow:2;}
.image{flex-grow:3; flex-basis: 400px;}


/*追記*/
.box_catalog {
display:block;
width:100%;
}

.catalog div{
min-height:50px;
box-sizing:border-box;
}


/* --------------------------------------------------
  一覧・インデックス
-------------------------------------------------- */
.keepitem_box {
margin-left:0px;
padding-left:0px;
width:100%;
}


/* --------------------------------------------------
 包装紙
-------------------------------------------------- */
.paper_table {width:100%;}

.paper_thumb {
width:45%;
margin-right:2.5%;
margin-top:5%;
box-sizing: border-box;
}

.paper_thumb img{width:80%;}

/*縦組み*/
.paper_table th,.paper_table td{
display:block;
width:100%;
padding:2%;
box-sizing: border-box;
}


/* --------------------------------------------------
 注文書
-------------------------------------------------- */
.img_ordersheet{
padding-top:5%;
text-align:center;
}

.img_ordersheet img{
width:80%;
height:auto;
}

.box_ordersheet{
width:80%;
margin-left:auto;
margin-right:auto;
}



/* --------------------------------------------------
 商品検索
-------------------------------------------------- */

#search_left_box{
width:100%;
margin-left:auto;
margin-right:auto;
float:none;
}


/*左側入力欄*/
.box_select {
margin:0%;
padding:2%;
}

#category{
width:45%;
min-width:150px;
float:left;
margin-right:3%;
padding:2.0%;
}


#none_category{
font-size:small;
}

#body_body_txtPage{
font-size: small;
width:25%;
}

#body_body_Keyword{
width:90%;
}

#body_body_txtPriceF,
#body_body_txtPriceT{
height:30px;
width:20%;
}

/*検索条件の入力*/
#output{
font-size:small;
}

.box_select input{
font-size:small;
}


/*右側表示欄*/

/*商品のサムネイル表示*/
.box_itemthum{float:left; width:50%; max-width:170px;}

#search_right_box{
width:100%;
margin-top:0;
padding-top:0;
float:none;
}


.select_tab {font-size: 100%; height:30px; line-height:30px; padding-top:0;}
.select_ttl{ display:none;}

div.search_menu_box {
margin-bottom:0%;
}

.input_page{
width:70px;
height:25px;

width:20%;
height:30px;
}


#body_body_Keyword{
height:30px;
}


.btn_search{
border: 1px #999 solid;
background: #bdcee2;
color: #333;
width: 100px;
height: 25px;
border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px; /* Safari,Google Chrome用 */
-moz-border-radius: 5px 5px 5px 5px; /* Firefox用 */
text-align: center;
font-size:medium;
cursor:pointer;
margin-top:10%;
margin-bottom: 5%;
margin-left:12%;

width: 40%;
height: 40px;

}

.btn_search {
margin-top: 10%;
margin-bottom: 5%;
font-size: 120%;
}


/*その他の条件*/
.box_select_etc{
display:flex;
flex-wrap: wrap;
padding-top:2%;
padding-left:2%;
padding-bottom:0;
/*height:35px;*/
}

.box_select_etc span{
width:50%;
font-size:medium;
padding:0%;
margin:0%;
padding-bottom:3%;

}


/*サムネイル*/
.itemthum_box{
width:50%;
text-align:center;
}

.itemthum_box div{
width:auto;
}

.itemthum_name,
.itemthum_price,
.itemthum_unit
{text-align:left;
}

.itemthum_img{
width:100%;
height:auto;
max-width:140px;
}

.box_select_etc label{
line-height:0px;
font-size:85%;
}



.box_search{
float:right;
display:flex;
justify-content:center;
}


/*並び順の変更*/
#search_sort{
width:100%;
display:block;
margin-bottom:3%;

font-size:medium;

}

#body_body_ddlSort{
font-size:medium;
}


/*検索ボタン*/
#body_body_btnKeyword{
width:120px;
}



/* Chrome・Safari・Opera用 */
::-webkit-input-placeholder {
   color: #bbbbbb;
}


/* --------------------------------------------------
 商品情報
-------------------------------------------------- */
/*個々box*/
#contents_spec {width:100%; margin-left:auto; margin-right:auto;}
#contents_img {width:100%; margin-left:auto; margin-right:auto;}
#contents_stock {width:100%; margin-left:auto; margin-right:auto;}
#contents_info { float:left; width:50%;}
#contents_naire { float:left; width:100%;}


/* --------------------------------------------------
 商品情報
-------------------------------------------------- */
#item_box{width:95%;}

/* 商品情報_画像*/
#item_img_box {
float:left;
margin-bottom:20px;
margin-right:10px;
width:100%;
}

#item_img_box img{
height:auto;
border: solid 1px #999999; 
width:100%;
margin-left:auto;
margin-right:auto;
}


/*商品情報の動画*/
#mv_box {
width:100%;
}


/*名入れについて*/
#name_spec_box {
width:48%;
float:left;
margin-left:2%;
margin-left:0;
width:98%;
}

#name_img_box {
float:left;
width:50%;
text-align:right;


width:auto;
margin-right:3%;
}

/*名入れの説明*/
.naire_trigger::before{/*タイトル横の矢印*/
right: 5px;
}

.naire_subttl{
width:100%;
display:block;
}

.naire_subttl hr{
width:100%;
}

/*名入れ画像 */
/*
#name_img {
width: 280px;
margin-bottom: 10px;
border: #999999 solid 1px;
}
*/

#ItemImageNaire {
width: 100%;/*280px*/
height:auto;/*280px*/
}

#name_img_thum_box{
position: static;
margin-bottom:2%;
height:100px;
}

.name_img_thum {
float: left;
width: 100px;
text-align:left;
}

.name_img_thum img{
width: 90px;
height:90px;
border: 1px solid #666666;
}


/*商品情報の画像ダウンロード*/
.item_download{
width:100%;/*重要*/
}

.item_download tr{
display:inline;/*重要*/
}

.item_download td{
display:inline;/*重要*/
float:left;
}


.downthum_box {
width:100%;
margin-bottom:30%;
}



/* 商品情報_フッター */
#item_footer{
width:100%;
}



/* --------------------------------------------------
 関連品
-------------------------------------------------- */
.swiper-container {
width: 668px;
height: 255px;
width:100%;
}

#sameitem {
position: relative;
width: 800px;
margin-left: auto;
margin-right: auto;
width:100%;
}

.swiper-button-prev,.swiper-button-next {
height:260px;
width:50px;
top:20px;

width:25%;

}

.swiper-pagination{
top: 270px;
}


/* --------------------------------------------------
   商品動画
-------------------------------------------------- */
a.thumb {
width:45%;
height:150px;/*auto*/
}

a.thumb span{
display:block;
width:90%;
height:auto;
}


/*--------------------------------------------------------------------
お知らせ
--------------------------------------------------------------------*/
.box_info{display:flex;}



/* --------------------------------------------------
包装紙
-------------------------------------------------- */
.box_paper{display:flex;}
.box_paper p{width:100%;}
.box_thumb_paper div{width:45%;}




/* --------------------------------------------------
★★★★★モーダルウィンドウ_PC用★★★★★
-------------------------------------------------- */
#none_category{
	display:none;/*カテゴリ未選択の表示。通常は非表示*/
}


/*モーダル本体の指定 + モーダル外側の背景の指定*/
.modal-container{
	opacity: 0;
	transition: .3s;
	text-align: right;/*必要*/
	visibility: hidden;/*必要*/
}

/*モーダル本体の擬似要素の指定*/
.modal-container:before{
	content: "";
	display: inline-block;
	vertical-align: middle;
	height: 100%;
}
/*モーダル本体に「active」クラス付与した時のスタイル*/
.modal-container.active{
	opacity: 1;
	visibility: visible;
}
/*モーダル枠の指定*/
.modal-body{
	display: inline-block;
	vertical-align: middle;
	max-width: 250px;
	width: 90%;
    position: fixed;
    width:20%;
    top:10%;

/*追加*/
width:100%;
left:10%;
top:3%;
margin-left:auto;
margin-right:auto;
}


/*モーダルを閉じるボタンの指定*/
.modal-close {
    align-items: center;
    justify-content: center;
	font-size: 40px;
	color: #fff;
	cursor: pointer;
/*追加*/
font-size:medium;
width:100%;
padding:2%;
background-color:#4a7dff;
border: 3px #4a7dff solid; /* 左の境界線 */
border-radius: 10px 10px 0px 0px;
}

/*モーダル内のコンテンツの指定*/
.modal-content{
	background: #fff;
	text-align: left;

/*追加*/
border: 3px #4a7dff solid; /* 左の境界線 */
border-radius: 0px 0px 10px 10px;
line-height:20px;
width:100%;
padding:2%;
font-size:medium;
line-height:30px;
}

/* --------------------------------------------------
★★★★★ /モーダルウィンドウ_PC用★★★★★
-------------------------------------------------- */

/* --------------------------------------------------
 社名
-------------------------------------------------- */
#search_left_box{
position:static;
}

#box_left{
position:static;
}

#customer{
text-align:center;
font-size:100%;
width:50%;
margin-left:25%;
position:absolute;
bottom:-120px;
}




/* --------------------------------------------------
 ログイン後専用
-------------------------------------------------- */
.noitems{margin-top:50px;}


/* --------------------------------------------------
 表示 ･ 非表示
-------------------------------------------------- */
.mob{display:block;}
.pc{ display:none;}

.gu{display:none;}




/* --------------------------------------------------
 ログイン前_専用
--------------------------------------------------
#search_right_box{margin-top:2%;}
#body_body_Keyword{width:60%;}
.btn_search{margin-top:-2%;}
#log_in{color:#0000ff; display:block; margin:2%;}
*/


/* --------------------------------------------------
 plus専用
-------------------------------------------------- 
#bt_login_search {width:auto; text-align:right; padding:0; top:0px;}

#body_body_Keyword{width:60%;}
.btn_search{margin-top:-3%;}
*/


/* --------------------------------------------------
 /モバイル用
-------------------------------------------------- */
}