@charset "utf-8";

/* スマートフォン対応CSS */



@media screen and (max-width:640px){



/*基本レイアウト--------------------------*/

#wrapper{
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	clear: both;
}

#content h1{
	background-color: #006699;
	color: #FFF;
	padding-left: 15px;
	padding-right: 15px;
	padding-top: 7px;
	padding-bottom: 7px;
	font-size:1.5em;
}
#content h2{
	font-size: 1em;
}
#content h3 {
	font-size: 16px;
}


p{
	font-size:0.9em;
	line-height: 150%;
}

.left{ width: 100%; }


#main-smart{
	display:block;
}

#main img{
	display:none;
}



/*スマホ非表示---------------------------*/

.smart{
	display:none;
}


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

header{
	padding: 0px;
	margin: 0px;
	background-color: #FFF;
}

header .beginning{
	display:none;
}

header h1{
	font-size: 12px;
	padding: 0px;
	font-weight: normal;
	width: 100%;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}

header p{
	font-size: 12px;
	font-weight: normal;
	width: 100%;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	padding-top: 3px;
	padding-right: 0px;
	padding-bottom: 3px;
	padding-left: 0px;
}

header .image{
}


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

#side{
	width: 100%;
	font-size: 0.85em;
	background-color: #FFF;
}

#side h3{
	background-color: #FFCC66;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 10px;
}

#side ul{
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 20px;
}

#side li{
	list-style-type: none;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #CCC;
}

#side a{
	display: block;
	padding-top: 10px;
	padding-bottom: 10px;
}

#side a:hover{
	text-decoration: underline;
	color: #C30;
}



/*コンテンツ------------------------------*/



#main{
	margin-bottom:20px;
}

#content{
	width:100%;
	background-color: #FFF;
}

.active{
	background-color:#F3F3F3;
}

.left45{
	float:left;
	width:100%;
	margin-bottom:10px;
}

.right45{
	float:right;
	width:100%;
	margin-bottom:10px;
}

.image-box{
	width:100%;
	margin-bottom:15px;
}

.image-box img{
	border:1px solid #CCC;
}

.image-box ul{
	margin-right:-10px;
	padding:0;
}

.image-box li{
	width:47%;
	float:left;
	margin-right:10px;
	margin-bottom:10px;
	list-style:none;
	text-align:center;
	font-size:0.85em;
}

/*-- 説明ボックス --*/
.setsumei {
	font-size: 14px;
}



/*flexbox-----------------------------*/

.flexbox {
	display:flex;
	flex-wrap:wrap;
	flex-direction: column; 
}
.menubox {
	display:flex;
	flex-wrap: wrap;
}
.menubox-child {
    width: 100%;
	margin-bottom:3px;
}	
.menubox-child a {/* 淡オレンジ */
	color:#EA5514;
	display:block;
	background-color: #FCF5CA;
	border:solid 2px #F39800;
	padding:10px auto;
	text-decoration: none;
}
.menubox-child a:hover {
	color:#ffffff;
	background-color: #F39800;
	text-decoration: none;
	transition: 0.2s ;
}


/*画像並列-----------------------------*/

.image-parallels{
	display:flex;
	flex-wrap:wrap;
	justify-content:space-around;
}

.image-parallels img{
	border:1px solid #999;
}


.image-parallels .box2{
	display:block;
	width:100%;
	padding:10px 10px 10px 10px;
	margin-bottom:15px;
	text-align:left;
	border: 2px solid #EEE;
}

.image-parallels .box2 td{
	vertical-align:top;
}

.image-parallels .box2 p{
	font-size:1em;
	padding-left:10px;
	margin:0;
	line-height: 150%;
}

.image-parallels .box p{
	display:block;
	text-align:left;
}

.image-parallels .box5{
	display:block;
	margin-bottom:20px;
	text-align:center;
	font-size:0.85em;
}

.image-parallels .box5 img{
    width: 139px;
    height: auto;
}

.img-yoko{
    width: 206px !important;
    height: auto;
}

.image-parallels .boxtop{
	width:48%;
	display:block;
	text-align:center;
	font-size:0.85em;
}

.image-parallels .boxtop img{
	border:none;
}


/*ショッピングガイド----------------------*/

.shopping_subtitle {
	font-size: 14px;
}

.shopping_title {
	font-size: 16px;
}



/*ページトップへボタン------------------*/

#page-top {
	position: fixed;
	bottom: 10px;
	right: 10px;
	font-size: 77%;
}

#page-top a {
	background: #666;
	text-decoration: none;
	color: #fff;
	width: 100px;
	padding: 10px 0;
	text-align: center;
	display: block;
	border-radius: 5px;
}

#page-top a:hover {
	text-decoration: none;
	background: #999;
}


/*会員ログイン・買い物カゴ-------------*/

#member{
	float: left;
	width: 100%;
	text-align: center;
}

#member ul{
	padding:0;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 5;
	margin-left: 0;
}

#member li{
	display: block;
	list-style-type: none;
	border-radius: 10px;
	background-color: #CFDFFE;
	font-size: 0.85em;
	padding: 8px;
	text-align: center;
	margin: 5px;
}

.teltitle{
	display:none;
}





/*商品詳細ページ----------------------*/

.item-large-gazou,.item-large-gazou-yoko {
	width:100%;
}


/*注文画面---------------------------*/

input{
	padding:5px;
	margin: 3px;
}

select{
	padding:5px;
	margin: 3px;
}

input:focus{
	background-color:#FFF4CC;
}

textarea:focus{
	background-color:#FFF4CC;
}

select:focus{
	background-color:#FFF4CC;
}

#order h2 {
	background-color: #f90;
	color: #FFF;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 7px;
	padding-bottom: 7px;
	font-size: 1.2em;
	margin-top: 25px!important;	
}
#order h3 {
	font-size: 14px;
	line-height: 35px;
	border-left-width: 20px;
	border-left-style: solid;
	border-left-color: #F90;
	padding-left: 10px;
	background-color: #FFDEAC;
}

#order select{
	width:90%;
	font-size:120%;
	padding:5px 0px 5px 0px;
}


.order-left{
	display:none;
}

.order-right table {
	font-size: 12px;
	border: solid 1px #999;
	border-collapse: collapse;
	margin-bottom: 15px;
	width: 100%;
}

.order-right  table td {
	padding: 5px;
	border: solid 1px #999;
}

.order-right textarea{
	width:100%;
	margin-top:15px;
	margin-bottom:15px;
}

.order-right input{
	font-size:120%;
	padding:5px;
}

.order-title{
	text-align:center;
}

/*--スマホで宛名印刷を非表示
.smart-display-none{
	display:none;
}--*/

.order-button{
	border-radius: 10px;
	display: block;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #feab31), color-stop(0.00, #ffc343));
	background: -webkit-linear-gradient(top, #ffc343 0%, #feab31 100%);
	background: linear-gradient(top, #ffc343 0%, #feab31 100%);
	text-align: center;
	width: 90%;
	padding-top: 15px;
	padding-right: 10px;
	padding-bottom: 15px;
	padding-left: 10px;
	margin-top: 15px;
	margin-right: auto;
	margin-bottom: auto;
	margin-left: auto;
	font-size: 1.2em;
	font-weight: bold;
	color: #036;
	border: 2px solid #036;
}

.order-button a{
	display:block;
	color: #036;
}

.aisatsu-button{
	border-radius: 10px;
	display: block;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #f5f5f5), color-stop(0.51, #dedede), color-stop(0.00, #f5f5f5));
	background: -webkit-linear-gradient(top, #f5f5f5 0%, #dedede 51%, #f5f5f5 100%);
	background: linear-gradient(top, #f5f5f5 0%, #dedede 51%, #f5f5f5 100%);
	text-align: center;
	width: 90%;
	margin-top: 15px;
	margin-right: auto;
	margin-bottom: auto;
	margin-left: auto;
	font-size: 1.2em;
	font-weight: bold;
	border: 1px solid #666;
	padding: 10px;
}

.aisatsu-button a{
	display:block;
}

.form-title{
	display: block;
	background-color:  #CCE4FB;
	padding: 5px;
}

.preview{
	width:100%;
}

.order-attention{
	background-color: #F9F9F9;
	padding: 10px;
	border: 2px solid #CCC;
}

.layout-btn{
	display:none;
}




/*ラジオボタン----------------------------------*/

.radios {
    display:inline-block;
    margin:0;
    padding:0;
    clear:both;
}

.radios li {
    display:inline-block;
    position:relative;
    float:left;
    list-style:none;
    border:solid 1px #ddd;
    border-right:none;
    overflow:hidden;
}

.radios li:first-child {
    border-radius:5px 0 0 5px;
}

.radios li:last-child {
    border-right:solid 1px #ddd;
    border-radius:0 5px 5px 0;
}

.radios label {
    display:block;
    min-width:3em;
    text-align:center;
    background:#eee;
    background:-webkit-gradient(linear, left top, left bottom, from(#FFF),to(#EEE));
    border:solid 1px rgba(255,255,255,0.2);
    padding:5px;
    text-shadow:0 1px 0 rgba(255,255,255,0.5);
}

.radios li:first-child label {
    border-radius:3px 0 0 3px;
}

.radios li:last-child label {
    border-radius:0 3px 3px 0;
}

.radios input[type=radio] {
    position:absolute;
    opacity:0;
    width:100%;
    height:100%;
    margin:0;
    cursor:pointer;
}

.radios input[type=radio]:checked {
    cursor:auto;
}

.radios input[type=radio]:checked + label {
    color:#fff;
    text-shadow:0 -1px 0 rgba(0,0,0,0.2);
    border:solid 1px rgba(0,0,0,0.1);
    background:#666;
    background:-webkit-gradient(linear, left top, left bottom, from(#313131),to(#626262));
}



/*モーダルウィンドウ--------------------*/

.remodal td{
	font-size:0.9em;
	line-height: 160%;
	text-align:left;
	padding:10px;
}

/*タブ切り替え--------------------------*/

ul#tab {
	zoom: 1;
	background: #c9c3c4;
	border-bottom: 3px solid #c81528;
	list-style: none;
	margin: 0 auto;
	padding: 0;
}

ul#tab:after { content:"."; display: block; height:0px; clear:both; line-height:0; visibility:hidden; }

ul#tab li {
	float: left;
	text-align: center;
}

ul#tab li:last-child {
	background: none;
}

ul#tab li a {
	display: block;
	width: 138px;
	padding: 8px 0;
	text-decoration: none;
	color: #222;
}

ul#tab li a:hover {
	background: #c95560;
	color: #fff;
}

ul#tab li.active,
ul#tab li.active a,
ul#tab li.active a:hover {
	background: #c81528;
	color: #fff;
}

#detail {
	clear: both;
	overflow: hidden;
	background: #f7f7f7;
	width: 100%;
}

.tabbox {
	display: none;
}


/*表示・非表示切り替えボタン*/

.codebtn {
       width: 50%;                            /*ボタンの幅*/
       text-align: center;                      /*文字位置*/　　　
       border-top: 1px solid #ccc;              /*ボタン枠の装飾1/4*/
       border-right: 1px solid #999;            /*ボタン枠の装飾2/4*/ 
       border-bottom: 1px solid #999;           /*ボタン枠の装飾3/4*/
       border-left: 1px solid #ccc;             /*ボタン枠の装飾4/4*/
       padding: 5px 20px;                       /*パディング*/
       font-weight: bold;                       /*文字の装飾*/
       cursor: pointer;                         /*カーソルの種類*/
       color: #666;                             /*文字の色*/
       text-shadow: 0 -1px 1px #FFF, -1px 0 1px #FFF, 1px 0 1px #aaa;  /*文字の装飾*/
       border-radius: 3px;                      /*ボタン枠を角丸*/
       box-shadow: 1px 1px 2px #E7E7E7;         /*シャドウ*/
	   background: -webkit-gradient(linear, left top, left bottom, from(#fff), color-stop(0.01, #F1F1F1), color-stop(0.5, #F1F1F1), color-stop(0.99, #DFDFDF), to(#ccc)); /*グラデーション*/
}




/*CSS3ボタン----------------------------------*/

.btn1 {
	border-radius: 10px;
	color: #ffffff;
	font-size: 16px;
	text-decoration: none;
	text-align: center;
	width:90%;
	background-color: #d93491;
	display: block;
	margin: auto;
	padding-top: 15px;
	padding-bottom: 15px;
	font-weight:bold;
}
.btn1 a{
	color:#FFF;
	display:block;
}
.btn1:hover {
  background: #e075a5;
  text-decoration: none;
}
.btn2 {
	border-radius: 10px;
	color: #ffffff;
	font-size: 16px;
	text-decoration: none;
	text-align: center;
	width:90%;
	background-color: #1284E0;
	display: block;
	margin: auto;
	padding-top: 15px;
	padding-bottom: 15px;
	font-weight:bold;
	margin-top:15px;
}

.btn2 a{
	color:#FFF;
	display:block;
}

.btn2:hover {
	text-decoration: none;
	background-color: #6DB7F3;
}

/* 汎用-----------------------*/
.btn {
	border-radius: 8px;
	display: block;
}
.btn-aiiro {/* 藍色に白→薄灰に藍色 */
	color:#ffffff;
	background-color: #002e73;
	border:solid 2px #002e73;
	padding:8px 15px;
	text-decoration: none;
	display: block;
}



/*買い物カゴ----------------------------------*/

#cart{
	font-size:1em;
	background-color: #F7F7F7;
	padding:3%;
}

#cart h2{
	font-size: 1em;
	background-color: #E8E8E8;
	border-left-width: 10px;
	border-left-style: solid;
	border-left-color: #F90;
	color: #000;
	padding-top: 5px;
	padding-right: 0px;
	padding-bottom: 5px;
	padding-left: 10px;
}

#cart table{
	border-collapse: collapse;
	border:1px solid #666;
	background-color: #FFF;
	margin-bottom:10px;
	width:100%;
}

#cart table td{
	border:1px solid #666;
	width: 32%;
	padding: 5px;
}

#cart .syokei table{
	border-collapse:collapse;
	border:2px solid #666;
}

.blueback{
	background-color:#DBE4FD;
}

.orangeback{
	background-color:#FAE6CD;
}

.greenback{
	background-color:#E2F0C4;
}

.pinkback{
	background-color:#FCD6F8;
}

#cart .goukei table{
	border-collapse:collapse;
	border:2px solid #666;
	font-size:1.2em;
}

#cart .goukei td{
	padding-top:15px;
	padding-bottom:15px;
}

.continue{
	border-radius: 10px;
	display: block;
	background-color: #093;
	color: #FFF;
	text-align: center;
	width: 300px;
	margin-top: 15px;
	margin-right: auto;
	margin-bottom: auto;
	margin-left: auto;
	padding: 10px;
}

.beginner{
	width: 90%;
	padding: 10px;
	background-color: #FFF;
	margin: 10px;
	border: 3px solid #BFD9F9;
}

.member{
	width: 90%;
	padding: 10px;
	background-color: #FFF;
	margin: 10px;
	border: 3px solid #F9CB8C;
}

.fontbig-blue{
	font-size:1.5em;
	font-weight:bold;
	color:#2787FC;
	margin: 0px;
	padding: 0px;
}

.go-order{
	border-radius: 10px;
	display: block;
	background-color: #F00;
	color: #FFF;
	text-align: center;
	width: 90%;
	padding-top: 15px;
	padding-right: 10px;
	padding-bottom: 15px;
	padding-left: 10px;
	margin-top: 15px;
	margin-right: auto;
	margin-bottom: auto;
	margin-left: auto;
	font-size: 1.2em;
	font-weight: bold;
}

.codebtn2 {
	border-radius: 15px;
    color: #ffffff;
    font-size: 16px;
    background: #3498db;
    padding: 10px 20px 10px 20px;
    text-decoration: none;
    width:200px;
    text-align:center;
    margin-left:20px;
}


.codebtn2:hover {
    background: #3cb0fd;
    text-decoration: none;
}

#pay-select{
	background-color: #FFF;
	padding: 1%;
	border: 2px solid #D5E2FD;
	margin-right: auto;
	margin-left: auto;
}

#cart textarea{
	width:100%;
}



/*個別商品ページ-----------------------------*/

#category {
	text-align: center;
	margin-top: 15px;
}

.category_info {
	margin: auto;
	width: 340px;
	background-color: #E6F2FF;
	padding: 5px;
	border: 2px solid #CEDFFF;
	text-align: left;
	font-size: 12px;
	line-height: 130%;
}

#special-info{
	width:100%;
	border:2px solid #CCDDF7;
	margin:auto;
}

.special-info-title{
	color: #174893;
	background-color: #CCDDF7;
	padding: 5px;
	font-weight: bold;
}
#nenshijo-info{
	width:100%;
	border:2px solid #ff0000;
	margin:auto;
}

.nenshijo-info-title{
	color: #fff;
	background-color: #ff0000;
	padding: 5px;
	font-weight: bold;
}
#special-info p,nenshijo-info p{
	text-align:left;
	margin:5px;
}



/*特殊一覧説明文［2014/10/02追記　morimoto］*/

.special-lead-title{
	font-size: 20px;
	font-weight:bold;
	padding:10px 20px;
	background-color:#FFD28E;
	margin-top:20px;
}
.special-lead {
	font-size: 16px;
	text-align:left;
	line-height: 160%;
	background-color: #FFF8CC;
	padding: 10px;
	margin-bottom:30px;
}

/*商品サムネイル下の説明文------------------------------*/
.design-setsumei {
	font-size: 14px;
	max-width:200px;
	text-align:left;
	line-height: 140%;
	background-color: #FFF8CC;
	border: 2px solid #FFD28E;
	padding: 5px;
	margin:auto;
}

.design-setsumei p{
	margin:0;
}

/*商品一覧のタイプ名------------------------------*/
.itemtype-title{
	font-weight:bold;
	text-align:center;
	padding:5px;
	background-color:#FFD28E;
	margin-bottom:5px;
}



/*ランキング---------------------------------*/

.ranking1{
	background: #e7eb67;
    background-image: -webkit-linear-gradient(top, #e7eb67, #edd766);
    background-image: linear-gradient(to bottom, #e7eb67, #edd766);
	font-size: 16px;
	font-weight: bold;
	display: block;
	text-align: center;
	padding: 5px;
	margin-bottom: 5px;
}

.ranking2{
	background: #e8e8dc;
    background-image: -webkit-linear-gradient(top, #e8e8dc, #b8b8b6);
    background-image: linear-gradient(to bottom, #e8e8dc, #b8b8b6);
	font-size: 16px;
	font-weight: bold;
	display: block;
	text-align: center;
	padding: 5px;
	margin-bottom: 5px;
}

.ranking3{
	background: #f0a471;
    background-image: -webkit-linear-gradient(top, #f0a471, #b86d2c);
    background-image: linear-gradient(to bottom, #f0a471, #b86d2c);
	font-size: 16px;
	font-weight: bold;
	display: block;
	text-align: center;
	padding: 5px;
	margin-bottom: 5px;
}

.ranking-other{
	font-size: 16px;
	display: block;
	text-align: center;
	margin-bottom: 5px;
	padding: 5px;
	background-color: #D5E2FD;
}

.ranking-info{
	background-color: #FAF5DA;
	padding: 8px;
	border: 2px solid #FBD799;
}

.ranking-info p{
	margin:0;
	font-size:12px;
	line-height:140% !important;
}

}