@charset "UTF-8"; /* Media Queries による切り替え */
/* SP用 */
@media screen and (max-width:736px)
{ 	
	#syokai .sp			{ display:block;}
	.pc					{ display:none; }
	.btnback01,
	.btnback02,
	.btnback03,
	.btnback04			{ z-index:2; position:relative; margin-top:-55px; padding-top:55px; height:3em; width:100%; display:block; text-align:right; padding:10px 0; margin:0 auto 0; }	
	.btnback01			{ background:#fff url(../sp_images/01_btn_back1.jpg) repeat-y; background-size:100%; }
	.btnback04			{ background:#fff url(../sp_images/02_btn_back01.jpg) repeat-y; background-size:100%; }
	.btnback03			{ background:url(../sp_images/03_btnbg.jpg) repeat-y; background-size:100%; }
	.btnback01 a,
	.btnback02 a,
	.btnback03 a,
	.btnback04 a		{ display:block; width:100%; height:30px; position:absolute; right:4%; top:20%; color:rgba(0,48,124,1.00); text-decoration:underline; font-size:12px; }
	.btnback01 a:hover,
	.btnback02 a:hover,
	.btnback03 a:hover,
	.btnback04 a:hover	{ text-decoration:none; }
	body				{ width:100%; max-width:736px; min-width:310px; }

	/* ベースレイアウト */
	.contents			{ width:100%; overflow:hidden; text-align:left; margin:0 auto; }
	#wrapper			{ position:relative; width:100%; padding-top:15.625%; }
	img					{ width:100%; }

	/*------------------------------------------------------------
	タブ切り替え
	------------------------------------------------------------*/
	/*タブ切り替え全体のスタイル*/
	.tabs							{ width:100%; margin:23px auto 0; }
	/*タブのスタイル*/
	.tab_item						{ width:43.7%; height:auto; max-height:auto; text-align:center; display:block; float:left; background:url(../sp_images/tab1.jpg) no-repeat left bottom; background-size:100%; margin:0 1.5em; text-indent:-9999px; padding-top:20%; }
	.tab_item.tab2					{ background:url(../sp_images/tab2.png) no-repeat left bottom; background-size:100%; margin:0; }
	/*ラジオボタンを全て消す*/
	input[name="tab_item"]			{ display:none; }
	/*タブ切り替えの中身のスタイル*/
	.tab_content					{ background:#ffe105; padding:20px 0 0 0; clear:both; overflow:hidden; display:none; }
	.tab_content ul					{ width:100%; margin:0 auto; padding:0; }
	.tab_content li					{ float:left; width:95%; margin-bottom:1em; }
	.tab_content li img				{ width:100%; }
	.tab_content li:nth-child(5)	{ float:left; margin-right:0; }
	.tab_content					{ background:#ffe105; }
	#list2							{ display:none; }

	/*選択されているタブのコンテンツのみを表示*/
	#tab1:checked ~ #list1,
	#tab2:checked ~ #list2			{ display:block; }

	/*選択されているタブのスタイルを変える*/
	.tabs input:checked + .tab_item			{ background:url(../sp_images/tab1_on.jpg) no-repeat left bottom; background-size:100%; }
	.tabs input:checked + .tab_item.tab2	{ background:url(../sp_images/tab2_on.png) no-repeat left bottom; background-size:100%; }
	#list1 li a,
	#list2 li a								{ display:block; width:100%; padding:0 2.5%; }
	#list1 li.list1_menu6,
	#list2 li.list2_menu6					{ display:block; width:44%; padding:0 2% 0 1.5%; }	
	#list1 li.list1_menu7,
	#list2 li.list2_menu7					{ display:block; width:44%; padding:0 0 0 0; float:right; }	
	#list1 li a:hover,
	#list2 li a:hover						{ opacity:0.7; }

	/*------------------------------------------------------------
	GA 記述 2024.10
	------------------------------------------------------------*/
	.dummy							{ max-width:none; width:100%; margin:0 auto; }
}

/*------------------------------------------------------------
定期便サービスとは？SPリンク
------------------------------------------------------------*/
	.btnbase1 a.teiki_link			{ bottom:10%; right:9%; }
	.btnbase1 a.teiki_link.l2		{ bottom:2%; right:9%; }
	.btnbase1 a.teiki_link.l3		{ bottom:7%; right:9%; }
	.btnbase1 a.teiki_link.l4		{ bottom:6%; right:9%; }
	.cnt03_wrapper dd a.teiki_link,
	.cnt04_wrapper dd a.teiki_link	{ bottom:3%; right:9%; z-index:3; }
	.aC								{ height:auto; margin:0 0 0 0; padding:0; }

/*------------------------------------------------------------
第一コンテンツ
------------------------------------------------------------*/
	#cnt01								{ padding:0; width:100%; background:url(../images/bg1.jpg) center top; background-size:350%; text-align:center; }
	.btnbase1							{ width:100%; position:relative; margin:0 auto; padding:0; }
	.btnbase1 .btn1						{ width:85%; position:absolute; top:90%; right:0px; left:0px; margin:0 auto; }
	.btnbase1 .btn1 input				{ width:100%; }
	.btnbase1 .btn1.p2					{ top:55%; }
	.btnbase1 .btn1.p3					{ top:30%; }
	.btnbase1 .btn1.p4					{ top:35%; }
	.btnbase1 .btn1.p5					{ top:55%; }
	.btnbase1 .btn1.p6					{ top:90%; height:30px; }
	.cnt03_wrapper dt .btn1.p11			{ position:absolute; bottom:3%; left:0px; right:0px; }
	.cnt03_wrapper dd .btn1.p6			{ position:absolute; bottom:10%; left:0px; right:0px; }
	.btnbase1 .btn1.p7					{ top:35%; }
	.btnbase1 .btn1.p8					{ top:66%; height:30px; }
	.btnbase1 .btn1.p9					{ top:57%; }
	.btnbase1 .btn1.p12					{ top:61%; }
	.btnbase1 .btn1.p92					{ top:57%; }
	.btnbase1 .btn1.p10					{ top:90%; }
	#cnt04 .btn1						{ top:71%; }
	.btnbase1 .btn1 a:hover				{ opacity:0.7; }

	/* アコーディオン */
	/*ボックス全体*/
	.accbox								{ margin:0 auto; padding:0; max-width:100%;/*最大幅*/ background:url(../sp_images/acbtn_bg.jpg) repeat-y; background-size:100%; }
	.accbox.bg1							{ margin:0 auto; padding:2em 0 0 0; max-width:100%;/*最大幅*/ background:url(../sp_images/acbtn_bg2.jpg) repeat-y; background-size:100%; }
	.accbox.bg2							{ margin:0 auto; padding:2em 0 0 0; max-width:100%;/*最大幅*/ background:url(../sp_images/03_btnbg.jpg) repeat-y; background-size:100%; }

	/*ラベル*/
	.accbox label						{ display:block; margin:0 auto; padding :0; cursor :pointer; transition:all 0.5s; background:url(../sp_images/btn_q1.png) no-repeat; background-size:100%; width:85%; text-indent:-9999px; }
	.accbox label.q2					{ background:url(../sp_images/btn_q2.png) no-repeat; background-size:100%; padding :0; }
	.accbox label.p2					{ padding :3% 0 0 0; }
	.accbox label.q0					{ width:100%; padding-top:37.8%; background:url(../sp_images/05_ti.jpg) no-repeat; background-size:100%; margin:0; height:auto; }

	/*チェックは隠す*/
	.accbox input						{ display:none; }

	/*中身を非表示にしておく*/
	.accbox .accshow					{ height:0; padding:0; overflow:hidden; opacity:0; transition:0.5s; }

	/*クリックで中身表示*/
	.cssacc:checked ~ .accshow			{ height:auto; padding:0; opacity:1; }

	/*選択されているタブのスタイルを変える*/
	.accbox input:checked + label		{ background:url(../sp_images/btn_q1_on.png) no-repeat left top; background-size:100%; padding:0.5em 0; }
	.accbox input:checked + label.q2	{ background:url(../sp_images/btn_q2_on.png) no-repeat left top; background-size:100%; padding:0.5em 0; }
	.accbox input:checked + label.q0	{ background:url(../sp_images/05_ti_on.jpg) no-repeat left top; background-size:100%; padding-top:37.8%; }

/*------------------------------------------------------------
	第2コンテンツ
------------------------------------------------------------*/
	#cnt02		{ width:100%; text-align:center; padding-top:85px; }
	.bnr01		{ text-align:center; width:85%; padding:0 0 7%; margin:0 auto; }

/*------------------------------------------------------------
	第3コンテンツ
------------------------------------------------------------*/
	#cnt03				{ margin-top:30px; padding:0; }
	#cnt03 h2			{ background:none; }
	.accshow			{ width:auto; }
	.caution			{ width:auto; font-size:10px; right:0; bottom:-5em; position:absolute; }
	.caution2			{ width:auto; font-size:10px; right:0; bottom:0; margin:10px 10px 20px 0; }
	#divBreadcrumbs		{ text-align:left; width:100%; margin:0 auto; }
	.rec_set			{ width:100%; margin:0 auto 3em; }
	.rec_set .set_left	{ display:block; width:45%; height:auto; float:left; position:relative; top:0; bottom:0; left:0; right:0; margin:0 0 0 3%; padding:0; }
	.rec_set .set_right	{ display:block; width:45%; height:auto; float:right; position:relative; top:0; bottom:0; left:0; right:0; margin:0 3% 0 0; padding:0; }
	.rec_set .btn1		{ display:none; }
	.rec_set .btn2		{ display:none; }
	.tab_chart			{ width:100%; position:relative; margin:0; padding:0; }
	.tab_chart_btn1,
	.tab_chart_btn2,
	.tab_chart_btn3,
	.tab_chart_btn4,
	.tab_chart_btn5,
	.tab_chart_btn6,
	.tab_chart_btn7		{ display:block; position:absolute; }
	.tab_chart_btn1,
	.tab_chart_btn2,
	.tab_chart_btn3,
	.tab_chart_btn4,
	.tab_chart_btn5		{ width:28.90625%; }
	.tab_chart_btn6,
	.tab_chart_btn7 	{ width:42.96875%; }
	.tab_chart_btn1 	{ left:4.21875%; top:64.07%; }
	.tab_chart_btn2 	{ left:35.9375%; top:64.07%; }
	.tab_chart_btn3 	{ left:67.65625%; top:64.07%; }
	.tab_chart_btn4 	{ left:12.5%; top:53.585197%; }
	.tab_chart_btn5 	{ left:67.65625%; top:53.585197%; }
	.tab_chart_btn6 	{ left:6.25%; top:82.7293%; }
	.tab_chart_btn7		{ left:51.09375%; top:82.7293%; }
	.blackBtn			{ width:100%!important; }

/*------------------------------------------------------------
第5コンテンツ
------------------------------------------------------------*/
	.cnt05						{ width:100%; padding-top:0; padding-bottom:0; text-align:center; background:none; margin:0; }
	.cnt05						{ width:100%; background:url(../images/bg2.png); text-align:center; }
	#cnt05 h2					{ display:block; margin-bottom:0; padding:0; }
	#cnt05 div					{ margin-bottom:0;  padding:0; }
	#cnt05 h2					{ display:block; margin-bottom:0; }
	#cnt05 div.present			{ margin-top:0; margin-bottom:0; }
	.btnbase1 .cartBtn input	{ width:100%; }
	.btnbase1 .cartBtn			{ width:85%; position:absolute; top:60%; right:0px; left:0px; margin:0 auto; }
	.set1						{ top:47%!important; }
	.note1						{ position:absolute; right:10px!important; }
	.set2						{ top:50%!important; }
	.note2						{ position:absolute; top:77%!important; right:10px!important; }