@charset "utf-8";
/* ===================================================================
CSS information

 file name  :contens_sp.css
 style info :スマホ用

=================================================================== */
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
----------------------------------------------------------------
	スマホ
----------------------------------------------------------------
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
@media screen and (max-width:1024px){


.single_main{
	width:100%;
	padding:3% 5%;
}
.remodal {
	padding: 0 !important;
}


/*----------------------------------------------------
	トップスライダー
----------------------------------------------------*/

.slider_area{
	width:100%;
	height:auto;
}


/*----------------------------------------------------
	トップタブエリア
----------------------------------------------------*/

#topTabContents ul#tab_header{
	margin:15px 20px 15px 15px;
	display:flex;
	justify-content: center;
	flex-wrap: wrap;
}
#topTabContents ul#tab_header li{
	-webkit-box-flex: 1;
	-moz-box-flex: 1;
	box-flex: 1;
	width:33%;/* before Android4.3 iOS6:Safari */
	width:calc(100%/3);
	font-size:0.9em;
	margin:0;
	border-right:1px solid #fff;
}
#topTabContents ul#tab_header li:nth-child(3){
	border:none;
}

.top_footer_top{
    padding:10px;
    }
/*----------------------------------------------------
	タブ下　商品一覧
----------------------------------------------------*/

.contents_area{
	margin:0 15px 20px 11px;
	display:none;
	padding:0;
}
.contents_area .item_box_list .title{
	margin:0 5px 20px 5px;
}

.item_box_wrap{
	margin:0;
}
.item_box_wrap,
.item_box_wrap #menu-top_guidenavi {
	width:100%;
	display:flex;
	justify-content:flex-start;
	flex-wrap: wrap;
}
.item_box_wrap section{
	display:inline-block;/* before Android4.3 iOS6:Safari */
	-webkit-box-flex: 1;
	-moz-box-flex: 1;
	box-flex: 1;
	width:50%;/* before Android4.3 iOS6:Safari */
	width:calc(100%/2);
	overflow:hidden;
	vertical-align: top;
	padding:0 5px 15px ;
}

.item_box_wrap .item_single{
	float:none;
	display:inline;
	margin:0;
}
.item_box_wrap .item_image{
	margin:0 0 10px;
	content:"";
    display: block;
    padding-top: 60%; /* 高さを幅の75%に固定 */
	overflow:hidden;
	position:relative;
	background:#eee;
	height:auto;
}

.item_box_wrap .item_image img{
	position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
	height:auto;
}
.item_box_wrap .item_name{
	line-height:1.2em;
}


/*----------------------------------------------------
	タブ下　news一覧
----------------------------------------------------*/

.news_box_list .news_single time{
	margin:0;
}
.news_box_list .news_single .title{
	margin:0 0 10px;
}
.news_box_list .news_single .content{
	line-height:1.5em;
}

/* 料金表を表示で表示されるtable */
#in2cart_price_table{
	border:none;
}
#in2cart_price_table th,
#in2cart_price_table td{
	border-left:none;
	border-right:none;
	border-top:1px dashed #bababa;
	border-bottom:1px dashed #bababa;
	display:table-cell;
	width:auto;
	background:none;
}
#in2cart_price_table td a{
	text-decoration:underline;
}

/* -----------------------------------------------------------
	テーブル周りpcと兼ね合い調整
----------------------------------------------------------- */

table{
	border-left:none;
	border-bottom:1px solid #746c67;
}
table td{
	border-top:none;
	border-bottom:none;
	overflow:hidden;
	min-height: 25px;
}
.sp_hidden{
	display:none;
}

table.sp_mp_order td{
	border:none;
	padding:0;
}
/*
td .waku01{
	margin:10px 0 ;
}
*/
.sp_txt{
	display:inline-block;
}
td span.sp_txt{
	display:inline;
}
.sp_th{
    background-color: #f2f2f2;
    border: 1px solid #757575!important;
    border-radius: 2px;
    display: block;
    padding: 0 10px!important;
	margin:10px 0;
	text-align:center;
}
.th_tr th,.th_tr td {
	text-align: left!important;
}

/* 背景 */
.bg_none{background:none;}
.bg_th{background:#efefef;}

/* width設定 */
.table_money,.col2hd,.mid,.midiu,.midium,.short,.sshort,.large,.largest{width:100%;}

/* テキスト */
.pc_tr{text-align:left;}
.pc_tc{text-align:left;}
.pc_tl{text-align:left;}

.sp_fwb{font-weight:700;}
.sp_fwn{font-weight:normal;}
.sp_block{display:block;}

.pc_fr{float:none;}
.pc_fl{float:none;}

/* カートSTEP4 ポイント */

.cart_point_table th{
	font-size:0.7em;
}

/* お問い合わせtable */
.mailform table th{
	width:100%;
}

/* デフォルトテーブル 　カード印刷テンプレート　*/
.cate_item_tbl{
}
.cate_item_tbl th,
.cate_item_tbl td{
	width:auto!important;
	display:table-cell;
	border-bottom:1px solid #746c67;
}

/* cart_step4 商品代金合計 */
.total_tbl th,.total_tbl td,
.mypage table.total_tbl th,
.mypage table.total_tbl td{
	width:auto;
	padding:0;
	text-align: right;
}


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

.back_btn{
	margin:10px;
	padding:10px ;
	font-size:1em;
}
.button_next, .button_buy{
	padding:10px 20px;
}
.button{
	line-height:1.3em;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
.button span{
	font-weight:700;
}

/*注文履歴　表*/
.order_list_tbl li {
	float: none;
	margin: 0 10px 0 0;
}
.order_list_tbl .mypage_order_link li {
    display: block;
    float: left;
}

/* -----------------------------------------------------------
	モーダル
----------------------------------------------------------- */
#overlay img {
	left: 42%;
}

/*フッターfixedを消す*/
.fixednone {
	display: none;
}

/* -----------------------------------------------------------
	投稿記事 post page
----------------------------------------------------------- */
.entry{
	width:100%;
	margin:0;
}
.single_posts .eyecatch{
	margin:0 0 20px;
}
.single_posts .thecontent p{
	margin:0 0 30px;
}
.single_posts .thecontent h2{
	margin:20px 0;
	font-size:1.3em;
	padding:10px;
}
.single_posts .thecontent iframe{
	max-width:100%;
	height:auto;
}

/* 前へ次へ */

.nav-below a{
	width:85%;
}



/*----------------------------------------------------
	タイトル
----------------------------------------------------*/

.contents_area .item_box_list .title {
	/* border-top:1px solid #ccc; */
	padding:5px;
}

.headline, .page h2, #cart-step-title{
	margin:0;
	clear:both;
}
.thecontent h2{
	margin:0 0 20px;
}

/* 記事詳細 */
.single_posts.post h2.post_title{
	background:none;
	color:#222;
	margin:5px 0 20px;
	font-size:1.7em;
	padding:0;
}
/*----------------------------------------------------
	ログイン　PWお忘れの方
----------------------------------------------------*/

.pc_middle_area{
	padding:0;
	background:none;
}
.pc_middle_area.h_short{
	padding:0;
}

/*----------------------------------------------------
	商品詳細
----------------------------------------------------*/
#item_side,#category_box{
	width:100%;
	float:none;
}

#Product_main_list{
	margin:0;
}

#Product_main_list .box{
	width:100%;
	float:none;
	position:relative;
	margin:0;
	padding:5px 15px 5px 0;
	border-bottom:1px dashed #bababa;
}
#Product_main_list .box:after{
	content:"\f105";
	font-family: "Font Awesome 5 Free";
	position:absolute;
	right:0;
	top:50%;
	font-size:2em;
	margin-top:-0.5em;
	font-weight: bold;
}
#Product_main_list .box a{
	padding:20px 30px 20px 0;
	display:block;
}
#Product_main_list .box .image{
	display:none;
}
#Product_main_list .box .item_description{
	height:auto;
}
#Product_main_list .box .link{
	display:none;
}
#Product_main_list .box .item_description, .sd_product_list{
	font-size:1em;
}

/* 価格表ページ */
#filter_box .filter_items h4{
	width:100% !important;
	margin:0 0 10px;
}
#filter_box .filter_items .choice{
	width:100% !important;
	margin:0 !important;
	padding:0px 0 30px;
}

/* -----------------------------------------------------------
	カート/	フォーム周り
----------------------------------------------------------- */

input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="number"], select, textarea{
	width:100%;
	box-sizing:border-box;
}
.mailform table td input[type="text"], .mailform table td input[type="tel"], .mailform table td input[type="mail"]{
	width:100%;
}
input.sp_tb_short{width:85%;}

input,select,textarea{
	font-size:1.2em;
	max-width:100%;
}
input[type=file]{
	font-size: 0.9em;
}

#in_cart_box, .send{
	margin:20px 0;
}


/* カート商品代金合計 */
tr.sp_tb_head2{
	padding:5px!important;
	display:block;
	background:#efefef;
	margin:10px 0;
	text-align:center;
}
tr.sp_tb_head2 th{
	border:none;
	font-size:1.2em;
	padding:0;
}


/* -----------------------------------------------------------
	ステップ
----------------------------------------------------------- */

#in2cart_flow_navi{
	font-size:0.7em;
	line-height:2em;
}
#in2cart_flow_navi ul li.active i,
#in2cart_flow_navi ul li.not i,
#in2cart_flow_navi ul li.success i{
	display:none;
}

/*----------------------------------------------------
	購入履歴　カート　商品情報
----------------------------------------------------*/
/* 商品の任意のタイトル */
.prd_detail_title dd input {
    width: 250px;
    font-size: 0.9em;
}

.prd_detail_box .image{
	width:100%;
	background:#eee;
	margin:0 0 20px;
}
.prd_detail_box .misc{
	clear:both;
	position:relative;
	border-top:1px dotted #aaa;
	width:100%;
	margin:10px 0 0;
	padding:10px 0 0;
	text-align:right;
}
.prd_detail_box .prd_detail {
	min-height: auto;
}

/*----------------------------------------------------
	googleサイト内検索フォーム
----------------------------------------------------*/
.gsc-control-cse table {
	border: none;
}
.gsc-control-cse td {
	min-height: auto;
}
td.gsc-search-button {
	display: none;
}
.gsib_a {
	padding: 5px 8px !important;
}

.gsc-search-box .gsc-input {
    height: auto !important;
}
.gsc-input-box {
	height: 36px !important;
}

/*内容のタイトル*/
.headline.fixed {
	position: relative;
	width: auto;
	top: 0px;
	filter:alpha(opacity=0);
	-moz-opacity: 0;
	opacity: 0;
}

/*----------------------------------------------------
	オンラインデザイン編集
----------------------------------------------------*/
.online_design_list .wrap {
	width: 46%;
	margin-bottom: 15px;
}
/* 有効期限 */
.online_design_list .wrap .box .expiration {
	font-size: 0.8em;
}

/*----------------------------------------------------
    フロント、テンプレートデザイン編集のモーダル
----------------------------------------------------*/
#modal_online_design .remodal_body > .wrap .left, 
#modal_online_design .remodal_body #online_panel_slider > .wrap .left {
    width: 100%;
}
#modal_online_design .remodal_body > .wrap .right, 
#modal_online_design .remodal_body #online_panel_slider > .wrap .right {
    width: 100%;
    margin: 10px 0 0 0;
}
#modal_online_design .left .slider_content .wrap {
	width: 100%;
}

/* メモ */
#modal_online_design .bottom .memo_tbl {
    float: none;
    width: 100%;
    border: none;
}
#modal_online_design .bottom .btn_memo_box {
    float: none;
    width: 100%;
    margin: 10px 0 0 0;
}
#modal_online_design .bottom .memo_tbl td {
    padding: 0px;
}

/*
マイページ、共通
------------------------------------------------------------------*/
#contents.mypage .back_link {
    margin: 10px 0 0 20px;
}

/*
マイページ、TOP
------------------------------------------------------------------*/
#contents.mypage .top_menu {
    margin: 0px;
}
/* リセット */
#contents.mypage .top_menu .wrap, 
#contents.mypage .top_menu .wrap:first-child {
    margin: 0;
}
#contents.mypage .top_menu .wrap {
    margin: 0 0 10px 0;
} 

/* 偶数メニューに適用 */
#contents.mypage .top_menu .wrap:nth-child(2n+1) {
    margin-right: 12px;
}

#contents.mypage .top_menu .wrap a {
    width: 155px;
    height: 155px;
    padding: 10px;
}
#contents.mypage .top_menu .wrap a > i {
    font-size: 4em;
    margin-top: 25px;
}
#contents.mypage .top_menu .wrap a .text {
    font-size: 0.8em;
    margin-top: 10px;
}
#contents.mypage .top_menu .wrap a .num  {
    top: 5px;
    right: 2px;
}

/*
マイページ、メッセージ
------------------------------------------------------------------*/
.in2cart_message_tbl{
	border-collapse:separate;
}
.in2cart_message_tbl tr{
	border-bottom:1px dotted #aaa;display:block;
	padding:10px 0;
}
.in2cart_message_tbl tr:first-child{
	display:none;
}
.mypage .simple_message_box textarea {
	height: 250px;
}

/* 2カラム */
#contents.mypage .message2column .left {
	width: 100%;
	margin: 0;
}
#contents.mypage .message2column .right {
	width: 100%;
    margin: 20px 0 0 0;
}

/*
マイページ、会員管理
------------------------------------------------------------------*/
#contents.mypage .common_account {
    margin: 10px 0 0 0;
}
#contents.mypage .common_account ul {
	display: -webkit-flex;
	display: flex;
	flex-wrap: wrap;
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
}
#contents.mypage .common_account li {
    width: 50%;
    float: none;
    margin: 0px;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}
#contents.mypage .common_account li a {
    font-size: 0.8em;
}
#contents.mypage .common_account li.on {
    border: none;
    background-color: #ccc;
}
#contents.mypage .common_account li:hover {
    border: none;
    background-color: #c03061;
}
#contents.mypage .common_account li:hover a {
    color: #ffffff;
}
/*----------------------------------------------------
    マイページ、テンプレートデザイン編集
----------------------------------------------------*/
/* 検索 */
.search_online_box dl {
    float: none;
}

.container-2column .wrap {
    width: 100%;
}

/*----------------------------------------------------
    マイページ、注文履歴
----------------------------------------------------*/
/* td borderなし */
table.sp_pdng_none{
	border-bottom:none;
	border-left:none;
	margin:0 0 20px;
}

table.sp_pdng_none td{
	text-align:left!important;
	padding:0;
	border:none;
}
.order_list_tbl .td_btn {
	padding: 10px 0 0 0;
}
.order_list_tbl .item {
    float: none;
    width: 100%;
}
.order_list_tbl .online_thumbnail {
    float: none;
    width: 35%;
    margin: 0 0 10px 0;
}
.order_list_tbl td {
    padding: 5px !important;
}
.order_list_tbl .operation {
	background-color: #FCF5EE;
	padding: 5px;
	width: 100%;
}

/* 商品詳細 */
.total_tbl th{
	text-align:left;
	width:100%;
}
.total_tbl td {
	text-align:left;
	width: 100%;
}

.th_tc th,.th_tc td,.pc_tc{
	text-align:left;
}

/* 濃いグレー */
tr.sp_tb_head{
	padding:5px!important;
	display:block;
	background:#bababa;
	margin:10px 0;
}

tr.sp_tb_head th{
	text-align:left!important;
	padding:0;
	background:none;
	border:none;
}
tr.sp_tb_head:after{
	display:none;
}

/* PCと同じ表示テーブル */
.pc_same_table th,
.pc_same_table td{
	display:table-cell;
	width:auto;
}

/*----------------------------------------------------
    ヤマトWebコレクト、リピーター決済
----------------------------------------------------*/
.yamato_repeater_tbl {
	border-bottom: none;
}
.yamato_repeater_tbl th, 
.yamato_repeater_tbl td {
	display: table-cell;
	text-align: center;
}
.yamato_repeater_tbl td .under4 {
	display: block;
	margin: 0 0 0 30px;
}



}/*スマホの終了タグ*/


/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
----------------------------------------------------------------
	タブレット
----------------------------------------------------------------
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
@media screen and (min-width:600px) and ( max-width:1024px){


/*----------------------------------------------------
	トップタブエリア
----------------------------------------------------*/

#topTabContents ul#tab_header li a{
	padding:15px 0 ;
	font-size:1.3em;
}

.item_box_wrap section{
	width:32.5%;
	width:calc(100%/3);
}

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

.button_signup {
	font-size:2em;
	padding:10px 40px;
}
.button{
	font-size:1.1em;
	padding:10px 20px;
}



/*----------------------------------------------------
	購入履歴　カート　商品情報
----------------------------------------------------*/
/* 商品の任意のタイトル */
.prd_detail_title dd input {
    width: 300px;
    font-size: 0.9em;
}

.prd_detail_box .misc ul li .detail{
	width: 120px;
}
.prd_detail_box .misc ul li span.title{
	font-size: 0.9em;
}

/*----------------------------------------------------
	価格表選択
----------------------------------------------------*/
#filter_box .filter_items .choice select {
	height: auto;
	line-height: auto;
}


/*
マイページ、TOP
------------------------------------------------------------------*/
/* リセット */
#contents.mypage .top_menu .wrap:nth-child(2n+1) {
    margin-right: 0;
}
#contents.mypage .top_menu .wrap {
    margin-right: 12px !important;
} 
#contents.mypage .top_menu .wrap a {
    width: 160px;
    height: 160px;
}
#contents.mypage .top_menu .wrap a .text {
    font-size: 0.7em;
}

#modal_online_design .bottom .memo_tbl th {
	display: table-cell;
	width: 95px;
}
#modal_online_design .bottom .memo_tbl td {
	display: table-cell;
	width: auto;
	text-align: left;
}
#modal_online_design .bottom .memo_tbl td input[type=text], 
#modal_online_design .bottom .memo_tbl td textarea {
	width: 100%;
}


}
/*タブレットの終了タグ*/