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

* {
	margin: 0;
	padding: 0;
}

li {
	list-style: none;
}

img {
	vertical-align:bottom;
	border: 0;
}
a {
	text-decoration: none;
	color: #65757f;
	cursor: pointer;
}
/*---------------------------------------------------------------------
     clear fix
  ---------------------------------------------------------------------*/
.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}

.clearfix {
  min-height: 1px;
}

* html .clearfix {
  height: 1px;
  /*\*//*/
  height: auto;
  overflow: hidden;
  /**/
}


/*=====================================================================
     共通
  =====================================================================*/
/*---------------------------------------------------------------------
     枠組み
  ---------------------------------------------------------------------*/

html {
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	color: #65757f;
	background: url(../images/bodybg.gif) left top repeat-y #d9dadd;
}

body {
	position: relative;
}

.contents {
	width: 980px;
	position: relative;
	overflow: hidden;
}
#mainframe {
	margin: 0 194px 0 0;
}

#main,
#subframe2 {
	padding: 6px 0 0 6px;
}
/*---------------------------------------------------------------------
     フォント
  ---------------------------------------------------------------------*/
.ab {
	font-family:"Arial", Gadget, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-weight: bold;
}

/*---------------------------------------------------------------------
     ブロック定義
  ---------------------------------------------------------------------*/
.hframe,
.lframe,
.mframe,
.sframe {
	display: block;
	margin: 5px 6px 6px 5px;
	background-color: #ffffff;
	border-bottom-right-radius: 40px;
	border: 6px solid #ffffff;
}
a.hframe,
a.lframe,
a.mframe,
a.sframe {
  transition-property: box-shadow,margin,left,top;
  transition-duration: 0.1s, 0.1s, 0.3s, 0.3s;
}
.hbox,
.lbox,
.mbox,
.sbox {
	display: block;
	background-color: #ffffff;
	border-bottom-right-radius: 40px;
	position: relative;
	overflow: hidden;
}


.hbox img,
.lbox img,
.mbox img,
.sbox img {
	display: block;
}

.htextbox,
.ltextbox,
.stextbox {
	display: block;
	position: absolute;
	left: 0;
	bottom: 0;
	font-size: 12px;
	line-height: 12px;
}
.htitle,
.ltitle,
.mtitle,
.stitle {
	display: block;
	font-size: 12px;
	line-height: 14px;
	height: 14px;
}
.hbody,
.lbody,
.mbody,
.sbody {
	display: block;
	font-size: 10px;
	line-height: 1;
	margin-top: 3px;
	height: 12px;
}

.hframe,
.hbox {
	width: 745px;
	height: 553px;
}
.lframe,
.lbox {
	width: 361px;
	height: 361px;
}

.mframe,
.mbox {
	width: 361px;
	height: 169px;
}
.mtextbox {
	display: block;
	position: absolute;
	bottom: 0px;
	width: 327px;
	height: 28px;
	padding: 2px 0 3px 0 ;
	background-color: rgba(255, 255, 255, 0.6);
}
.mtitle {
	margin: 0;
	color: #65757f;
	text-shadow: 0 0 1px #ffffff;
	
}
.mbody {
	color: #65757f;
	text-shadow: 0 0 1px #ffffff;
}
.sframe,
.sbox {
	width: 169px;
	height: 169px;
}

a.hframe:hover,
a.lframe:hover,
a.mframe:hover,
a.sframe:hover {
	/*margin: 0px 0px 0px 0px; */
	margin: 3px 8px 8px 3px;
	-moz-box-shadow: 5px 5px;
	-webkit-box-shadow: 5px 5px;
	-o-box-shadow: 5px 5px;
	-ms-box-shadow: 5px 5px;
	box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
	/* border: 6px solid #a5d9eb; */
}

/*---------------------------------------------------------------------
     メニュー
  ---------------------------------------------------------------------*/
#menuframe {
	width: 194px;
	position: absolute;
	right: 0;
	top: 0;
}
#menu {
	position: relative;
	width: 194px;
}
#menu a:hover {
	color: #a5d9eb;
}
#menu h1 {
	display: block;
	margin: 27px 0 0 23px;
}
#fixbtn {
	font-size: 10px;
	position: absolute;
	right: 10px;
	top: 80px;
}
#menulist {
	background:url(../images/menuline.gif) left top repeat-x;
	width: 157px;
	margin: 37px 0 0 33px;
	padding-top: 2px;
}
.mainmenu {
	margin-bottom: 18px;
}
.mainmenu li {
	background:url(../images/menuline.gif) left bottom repeat-x;
	padding-bottom: 2px;
	font-family:"Arial", Gadget, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 16px;
	font-weight: bold;
}
.mainmenu li.noline {
	background: none;
}
.mainmenu li.smenu ul{
	margin-left: 5px;
}
.mainmenu .smenu a {
	/*
	height: 32px;
	line-height: 32px;
	*/
	margin-bottom: 10px;
	font-size: 12px;
	padding-left: 14px;
	font-weight: normal;
	background:url(../images/submenu_bg.png) 0px center no-repeat;
}
.mainmenu .smenu a.parent-chrvs {
	/*
	height: 64px;
	line-height: 32px;
	*/
}
#lineup menulist ul:first-child li:first-child a{
	margin-bottom: 0;
}
.mainmenu li a {
	display: block;
	/* width: 157px; */
	margin-top: 10px;
	margin-bottom: 10px;
	/*
	height: 40px;
	line-height: 40px;
	*/
	font-family:"Arial", Gadget, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 16px;
	font-weight: bold;
}
.mainmenu li ul li {
	background: none;
}
#menu .mainmenu li ul li a,
.mainmenu li.smenu ul li a {
	/* width: 143px; */
	margin-top: 0;
	margin-bottom: 5px;
	padding-bottom: 0;
	/* line-height: 28px; */
	font-family:"Arial", Gadget, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 12px;
	padding-left: 14px;
	background:url(../images/submenu_bg.png) 1px center no-repeat;
}

#menu .mainmenu li ul li a.parent-chrvs,
.mainmenu li.smenu ul li a.parent-chrvs {
}


#menu .mainmenu li.smenu ul li a,
#menu ul#menulist_news li a {
	font-size: 14px;
	font-weight: bold;
}
#menu .mainmenu li.smenu ul li a.parent-chrvs,
#menu ul#menulist_news li a.parent-chrvs {
	letter-spacing: -1px;
	font-size: 14px;
}



.mainmenu li ul li ul li{
	background: none;
}
#menu .mainmenu li ul li ul li a,
.mainmenu li.smenu ul li ul li a {
	display: block;
	/* width: 143px; */
	/*
	min-height: 14px;
	line-height: 14px;
	*/
	font-family:"Arial", Gadget, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 10px;
	padding-left: 14px;
	background:url(../images/submenu_bg.png) 1px center no-repeat;
}
#menu .mainmenu li.smenu ul li a,
#menu ul#menulist_news li a {
	font-size: 14px;
	font-weight: bold;
}
#menu .mainmenu li.smenu ul li ul li a,
#menu ul#menulist_news li ul li a {
	font-size: 10px;
	font-weight: normal;
}

#menu .mainmenu li.smenu ul li ul.menu-lunch li a,
#menu ul#menulist_news li ul.menu-lunch li a {
	font-size: 10px;
	font-weight: normal;
}

#menu .mainmenu #m
#menuicon {
}
#menuicon li {
	width: 31px;
	height: 36px;
	display: inline;
	float: left;
	margin-right: 16px;
}
#menuicon a {
	display: block;
}
#menuslider {
	position: absolute;
	top:167px;
	left: 0;
	width: 26px;
	height: 71px;
	background: url(../images/slider.png) left top no-repeat;
}
/*---------------------------------------------------------------------
     サブメニュー：LINE UP
  ---------------------------------------------------------------------*/
 .smenu {
	display: none;
}
#lineup .smenu,
#lineup_detail .smenu {
	display: block
}
#lineup .sline,
#lineup_detail .smenu {
	background: none;
}
#mainmenu a {
	display: block;
}

#menulist_lineup ul,
#menulist_lineup_c ul {
	display: none;
}
#lineup_top #menulist_lineup ul,
#lineup_detail #menulist_lineup ul {
	display: block;
}
#lineup_top #menulist_lineup a.smenutop,
#lineup_detail #menulist_lineup a.smenutop {
	background:url(../images/submenuopen_bg.png) 0px center no-repeat;
}
#lineup_color #menulist_lineup_c ul {
	display: block;
}
#lineup_color #menulist_lineup_c a.smenutop {
	background:url(../images/submenuopen_bg.png) 0px center no-repeat;
}
#menu #menulist ul.menu-basic,
#menu #menulist ul.menu-variouscloth,
#menu #menulist ul.menu-keep,
#menu #menulist ul.menu-pocket,
#menu #menulist ul.menu-gift,
#menu #menulist ul.menu-varioussize,
#menu #menulist ul.menu-chrvs,
#menu #menulist ul.menu-lunch,
#menu #menulist ul.menu-casual {
	display: none;
}
.ld-basic #menu #menulist ul.menu-basic,
.ld-variouscloth #menu #menulist ul.menu-variouscloth,
.ld-keep #menu #menulist ul.menu-keep,
.ld-pocket #menu #menulist ul.menu-pocket,
.ld-gift #menu #menulist ul.menu-gift,
.ld-varioussize #menu #menulist ul.menu-varioussize,
.ld-chrvs #menu #menulist ul.menu-chrvs,
.ld-lunch #menu #menulist ul.menu-lunch,
.ld-casual #menu #menulist ul.menu-casual {
	display: block;
}
.ld-basic #menu #menulist .parent-basic,
.ld-variouscloth #menu #menulist .parent-vc,
.ld-keep #menu #menulist parent-keep,
.ld-pocket #menu #menulist .parent-pocket,
.ld-gift #menu #menulist ul.parent-gift,
.ld-varioussize #menu #menulist .parent-vs,
.ld-chrvs #menu #menulist .parent-chrvs,
.ld-lunch #menu #menulist .parent-lunch,
.ld-casual #menu #menulist .parent-casual {
	background-image: url(../images/submenuopen_bg.png);
}

#basic {
	min-height: 231px;
	height: auto !important;
	height: 231px;
	background: url(../lineup/images/bg_basic.jpg) left top no-repeat #fff;
}
#vc {
	min-height: 231px;
	height: auto !important;
	height: 231px;
	background: url(../lineup/images/bg_vc.jpg) left top no-repeat #fff;
}
#keep {
	min-height: 231px;
	height: auto !important;
	height: 231px;
	background: url(../lineup/images/bg_keep.jpg) left top no-repeat #fff;
}
#pocket {
	min-height: 231px;
	height: auto !important;
	height: 231px;
	background: url(../lineup/images/bg_pocket.jpg) left top no-repeat #fff;
}
#gift {
	min-height: 231px;
	height: auto !important;
	height: 231px;
	background: url(../lineup/images/bg_gift.jpg) left top no-repeat #fff;
}
#vs {
	min-height: 251px;
	height: auto !important;
	height: 251px;
	background: url(../lineup/images/bg_vs.jpg) left top no-repeat #fff;
}
#chrvs {
	min-height: 251px;
	height: auto !important;
	height: 251px;
	background: url(../lineup/images/bg_chrvs.jpg) left top no-repeat #fff;
}
#lunch {
	min-height: 251px;
	height: auto !important;
	height: 251px;
	background: url(../lineup/images/bg_lunch.jpg) left top no-repeat #fff;
}
#casual {
	min-height: 231px;
	height: auto !important;
	height: 231px;
	background: url(../lineup/images/bg_casual.jpg) left top no-repeat #fff;
}
/*---------------------------------------------------------------------
     サブメニュー：HOW TO USE
  ---------------------------------------------------------------------*/
#menulist_htu {
	display: none;
}
.mainmenu #menulist_htu li a {
	font-size: 12px;
	font-weight: normal;
}
#howtouse #menulist_htu {
	display: block;
}
/*---------------------------------------------------------------------
     サブメニュー：What's .pouch ?
  ---------------------------------------------------------------------*/
#menulist_whats {
	display: none;
}
.mainmenu #menulist_whats li a {
	font-size: 12px;
	font-weight: normal;
}
#whatspouch #menulist_whats {
	display: block;
}
/*---------------------------------------------------------------------
     サブメニュー：NEWS
  ---------------------------------------------------------------------*/
#menulist_news {
	display: none;
}
.mainmenu #menulist_news li a {
	font-size: 12px;
	font-weight: normal;
}
#news #menulist_news {
	display: block;
}

/*---------------------------------------------------------------------
     サブページ
  ---------------------------------------------------------------------*/
#subframe {
	padding: 11px 1px 11px 11px;
}
.sub_main {
	background: #ffffff;
}
/*---------------------------------------------------------------------
     サブページヘッダ
  ---------------------------------------------------------------------*/
.sub_header {
	padding: 18px 0 0 20px;
	height: 72px;
	background: #ffffff;
	position: relative;
}
.sub_header h2 {
	font-size: 28px;
	line-height: 36px;
	height: 36px;
}
.sub_header .ab {
	font-size: 36px;
}
.sub_header p {
	margin-top: 4px;
	font-size: 10px;
}
.sub_header ul {
	position: absolute;
	width: 180px;
	left: 200px;
	top: 40px;
}
.sub_header li {
	width: 90px;
	float: left;
	display: inline;
}
.sub_header li a {
	display: block;
	font-size: 11px;
	height: 13px;
	line-height: 13px;
	background: url(../images/subheadarrow.png) left center no-repeat;
	padding-left: 9px;
}
.sub_header li a.gray {
	color: #B3BDC4;
	background: url(../images/submenu_bg_gray.png) left center no-repeat;
}
.sub_header a:hover {
	color: #a5d9eb;
}
#lineup .sub_header li a:hover {
	color: #a5d9eb;
	background: url(../images/submenu_bg_ro.png) left center no-repeat;
}
/*---------------------------------------------------------------------
     サブページボックス
  ---------------------------------------------------------------------*/
.sub_box {
	margin-top: 11px;
	background: #ffffff;
}
.sub_box h3 {
	display: block;
	font-weight: normal;
	font-size: 14px;
	padding: 10px 0 0 20px;
	height: 46px;
	line-height: 30px;
	background: url(../images/menuline_ld.gif) bottom left repeat-x;
}
.sub_box h3 .h3s {
	font-size: 12px;
	margin: 0 1.5em 0 1em;
}
.sub_box h3 .ab {
	font-size: 30px;
}
.sub_box2 {
	margin-bottom: 6px;
}
/*---------------------------------------------------------------------
     footer
  ---------------------------------------------------------------------*/
#footer {
	margin: 0 0 0 11px;
	padding-bottom: 11px;
}
/*---------------------------------------------------------------------
     copyright
  ---------------------------------------------------------------------*/
#copyright {
	margin-top: 6px;
	font-size: 10px;
}
/*---------------------------------------------------------------------
     page topボタン
  ---------------------------------------------------------------------*/
#pagetop {
	display: block;
	width: 46px;
	height: 20px;
	padding-left: 14px;
	font-size: 10px;
	line-height: 20px;
	background: url(../images/bg_pagetop.gif) left top no-repeat;
}
#pagetop:hover {
	background-position: 0 -20px;
}
/*=====================================================================
     トップページ
  =====================================================================*/
/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
	 共通＆標準サイズ
  +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
#main {
	height: 1547px;		/* 192 * 高さ8ブロック + 6 = 1547px*/
	overflow: hidden;
}
/*---------------------------------------------------------------------
     NEWS　大1
  ---------------------------------------------------------------------*/
#box_l_news1 {
	position: absolute;
	left: 6px;
	top: 582px;
}
/*---------------------------------------------------------------------
     NEWS　大2
  ---------------------------------------------------------------------*/
#box_l_news2 {
	position: absolute;
	left: 6px;
	top: 966px;
}
.mbox {
	/* background:url(../images/mboximg.jpg) left top no-repeat; */
}

/*---------------------------------------------------------------------
     どっとポーチをさがすボタン → ウェブカタログに変更20.08.20
  ---------------------------------------------------------------------*/
#searchdp {
	background-color: #a5d9eb;
	border: 6px solid #a5d9eb;
	position: absolute;
	left: 390px; 
	top: 582px;
}
#searchdp .sbox {
	background-color: #a5d9eb;
	font-size: 20px;
	text-align: center;
	line-height: 1.5em;
	color: #ffffff;
	padding-top: 15px;
	box-sizing: border-box;
}
#searchdp .sbox img{
	display:inline;
}
#searchdp:hover {
	/* border: 6px solid #ffffff; */
}
/*---------------------------------------------------------------------
     カタログダウンロードボタン
  ---------------------------------------------------------------------*/
#top_whatsdp {
	background-color: #a5d9eb;
	border: 6px solid #a5d9eb;
	position: absolute;
	left: 582px; 
	top: 582px;
}
#top_whatsdp .sbox {
	background-color: #a5d9eb;
	font-size: 20px;
	text-align: center;
	line-height: 1.5em;
	color: #ffffff;
	padding-top: 40px;
	box-sizing: border-box;
}
/*---------------------------------------------------------------------
     どっとポーチって？ボタン → 非表示20.08.20
#top_whatsdp {
	position: absolute;
	left: 582px; 
	top: 582px;
}
#top_whatsdp .sbox {
	text-align: center;
}
#top_whatsdp_tx1 {
	display: block;
	margin: 25px 0 14px 0;
	font-size: 17px;
}
#top_whatsdp img {
	display: block;
}
#top_whatsdp_tx2 {
	display: block;
	margin-top: 7px;
	font-size: 12px;
}
#top_whatsdp:hover {
	border: 6px solid #a5d9eb;
}
  ---------------------------------------------------------------------*/

/*---------------------------------------------------------------------
     twitterタイムライン
  ---------------------------------------------------------------------*/
.twframe {
	display: block;
	margin: 5px 6px 6px 5px;
	background-color: #ffffff;
	border: 6px solid #ffffff;
	float: left;
	width: 361px;
	height: 361px;
	position: absolute;
	left: 390px; 
	top: 774px;
}
.twbox {
	display: block;
	width: 361px;
	height: 361px;
	background-color: #ffffff;
	position: relative;
	overflow: hidden;
}
.twsframe {
	display: block;
	margin: 5px 6px 6px 5px;
	background-color: #ffffff;
	width: 181px;
	height: 373px;
	float: left;
}
.twsbox {
	width: 181px;
	height: 373px;
	display: block;
	background-color: #ffffff;
	position: relative;
	overflow: hidden;
}

/*---------------------------------------------------------------------
     HOW TO USE1
  ---------------------------------------------------------------------*/
#top_htu_1 {
	position: absolute;
	left: 390px; 
	top: 1158px;
}

/*---------------------------------------------------------------------
     HOW TO USE2
  ---------------------------------------------------------------------*/
#top_htu_2 {
	position: absolute;
	left: 6px; 
	top: 1350px;
}

/*---------------------------------------------------------------------
     どっとポーチ
  ---------------------------------------------------------------------*/
#top_p_1 {
	position: absolute;
	left: 390px; 
	top: 1350px;
}
/* 最小レイアウトでは2～7は表示されない */
#top_p_2 {
	display: none;
	position: absolute;
	left: 6px; 
	top: 1542px;
}
#top_p_3 {
	display: none;
	position: absolute;
	left: 198px; 
	top: 1542px;
}
#top_p_4 {
	display: none;
	position: absolute;
	left: 390px; 
	top: 1542px;
}
#top_p_5 {
	display: none;
	position: absolute;
	left: 582px; 
	top: 1542px;
}
#top_p_6 {
	display: none;
	position: absolute;
	left: 6px;
	top: 1734px;
}
#top_p_7 {
	display: none;
	position: absolute;
	left: 198px; 
	top: 1734px;
}

/*---------------------------------------------------------------------
     今治
  ---------------------------------------------------------------------*/
#top_imabari {
	position: absolute;
	left: 582px; 
	top: 1350px;
}
#top_imabari .sbody {
	letter-spacing: -0.2px;
}

/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
	 レスポンシブ可能の場合は、レスポンシブにする
	 (基本980px + スクロールバー17px = 997px から)
  +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
@media screen and (min-width: 997px) {
	html {
		background: url(../images/bodybg.gif) right top repeat-y #d9dadd;
	}
	body {
		width: 100%;
	}
	.contents {
		width: auto;
	}
}
/* 幅5ブロック： 192 * 5 + 6 + 194 + 17 + 13 = 1186px */
@media screen and (min-width: 1186px) and (max-width: 1365px) {
	#main {
		height: 1350px;		/* 192 * 高さ7ブロック + 6 = 1350px*/
	}
	/* NEWS 大 1 */
	#box_l_news1 {
		left: 6px;
		top: 582px;
	}
	/* NEWS 大 2 */
	#box_l_news2 {
		left: 6px;
		top: 966px;
	}
	/* どっとポーチをさがす */
	#searchdp {
		left: 774px; 
		top: 6px;
	}
	/* どっとポーチって？ */
	#top_whatsdp {
		left: 774px; 
		top: 198px;
	}
	/* twitterタイムライン */
	.twframe {
		left: 390px; 
		top: 582px;
	}
	/* HOW TO USE 1 */
	#top_htu_1 {
		left: 390px;
		top: 966px;
	}
	/* HOW TO USE 2 */
	#top_htu_2 {
		left: 390px; 
		top: 1158px;
	}
    /* どっとポーチ */
	#top_p_1 {
		left: 774px; 
		top: 390px;
	}
	#top_p_2 {
		display: block;
		left: 774px; 
		top: 582px;
	}
	#top_p_3 {
		display: block;
		left: 774px; 
		top: 774px;
	}
	#top_p_4 {
		display: block;
		left: 774px; 
		top: 966px;
	}
	#top_p_5 {
		display: none;
		left: 6px; 
		top: 1344px;
	}
	#top_p_6 {
		display: none;
		left: 198px;
		top: 1344px;
	}
	#top_p_7 {
		display: none;
		left: 390px; 
		top: 1344px;
	}
    /* 今治 */
	#top_imabari {
		left: 774px; 
		top: 1158px;
	}
}
/* 幅6ブロック： 192 * 6 + 6 + 194 + 17 + 13 = 1366px */
@media screen and (min-width: 1366px) and (max-width: 1557px) {
	#main {
		height: 1158px;		/* 192 * 高さ6ブロック + 6 = 1158px*/
	}
	/* NEWS 大 1 */
	#box_l_news1 {
		left: 6px;
		top: 582px;
	}
	/* NEWS 大 2 */
	#box_l_news2 {
		left: 390px;
		top: 582px;
	}
	/* どっとポーチをさがす */
	#searchdp {
		left: 774px; 
		top: 6px;
	}
	/* どっとポーチって？ */
	#top_whatsdp {
		left: 966px; 
		top: 6px;
	}
	/* twitterタイムライン */
	.twframe {
		left: 774px; 
		top: 198px;
	}
	/* HOW TO USE 1 */
	#top_htu_1 {
		left: 774px; 
		top: 582px;
	}
	/* HOW TO USE 2 */
	#top_htu_2 {
		left: 774px; 
		top: 774px;
	}
    /* どっとポーチ */
	#top_p_1 {
		left: 6px; 
		top: 966px;
	}
	#top_p_2 {
		display: block;
		left: 198px; 
		top: 966px;
	}
	#top_p_3 {
		display: block;
		left: 390px; 
		top: 966px;
	}
	#top_p_4 {
		display: block;
		left: 582px; 
		top: 966px;
	}
	#top_p_5 {
		display: block;
		left: 774px; 
		top: 966px;
	}
	#top_p_6 {
		display: none;
		left: 6px;
		top: 1158px;
	}
	#top_p_7 {
		display: none;
		left: 198px; 
		top: 1158px;
	}
    /* 今治 */
	#top_imabari {
		left: 966px; 
		top: 966px;
	}
}
/* 幅7ブロック： 192 * 7 + 6 + 194 + 17 + 13 = 1558px */
@media screen and (min-width: 1558px) and (max-width: 1749px) {
	#main {
		height: 966px;		/* 192 * 高さ5ブロック + 6 = 966px*/
	}
	/* NEWS 大 1 */
	#box_l_news1 {
		left: 6px;
		top: 582px;
	}
	/* NEWS 大 2 */
	#box_l_news2 {
		left: 390px;
		top: 582px;
	}
	/* どっとポーチをさがす */
	#searchdp {
		left: 774px; 
		top: 6px;
	}
	/* どっとポーチって？ */
	#top_whatsdp {
		left: 966px; 
		top: 6px;
	}
	/* twitterタイムライン */
	.twframe {
		left: 774px; 
		top: 198px;
	}
	/* HOW TO USE 1 */
	#top_htu_1 {
		left: 774px; 
		top: 582px;
	}
	/* HOW TO USE 2 */
	#top_htu_2 {
		left: 774px; 
		top: 774px;
	}
    /* どっとポーチ */
	#top_p_1 {
		left: 1158px; 
		top: 6px;
	}
	#top_p_2 {
		display: block;
		left: 1158px; 
		top: 198px;
	}
	#top_p_3 {
		display: block;
		left: 1158px; 
		top: 390px;
	}
	#top_p_4 {
		display: block;
		left: 1158px; 
		top: 582px;
	}
	#top_p_5 {
		display: none;
		left: 6px; 
		top: 966px;
	}
	#top_p_6 {
		display: none;
		left: 198px;
		top: 966px;
	}
	#top_p_7 {
		display: none;
		left: 390px; 
		top: 960px;
	}
    /* 今治 */
	#top_imabari {
		left: 1158px; 
		top: 774px;
	}
}
/* 幅8ブロック： 192 * 8 + 6 + 194 + 17 + 13= 1750px */
@media screen and (min-width: 1750px) {
	#main {
		height: 966px;		/* 192 * 高さ5ブロック + 6 = 966px*/
	}
	/* NEWS 大 1 */
	#box_l_news1 {
		left: 774px;
		top: 6px;
	}
	/* NEWS 大 2 */
	#box_l_news2 {
		left: 774px;
		top: 390px;
	}
	/* どっとポーチをさがす */
	#searchdp {
		left: 1158px; 
		top: 6px;
	}
	/* どっとポーチって？ */
	#top_whatsdp {
		left: 1350px; 
		top: 6px;
	}
	/* twitterタイムライン */
	.twframe {
		left: 1158px; 
		top: 198px;
	}
	/* HOW TO USE 1 */
	#top_htu_1 {
		left: 6px; 
		top: 582px;
	}
	/* HOW TO USE 2 */
	#top_htu_2 {
		left: 390px; 
		top: 582px;
	}
    /* どっとポーチ */
	#top_p_1 {
		left: 1158px; 
		top: 582px;
	}
	#top_p_2 {
		display: block;
		left: 1350px; 
		top: 582px;
	}
	#top_p_3 {
		display: block;
		left: 6px; 
		top: 774px;
	}
	#top_p_4 {
		display: block;
		left: 198px; 
		top: 774px;
	}
	#top_p_5 {
		display: block;
		left: 390px; 
		top: 774px;
	}
	#top_p_6 {
		display: block;
		left: 582px;
		top: 774px;
	}
	#top_p_7 {
		display: block;
		left: 774px; 
		top: 774px;
	}
    /* 今治 */
	#top_imabari {
		left: 966px; 
		top: 774px;
	}
}


/*=====================================================================
     LINE UP
  =====================================================================*/
.lineup_img {
	margin: 6px 0px 5px 6px;
	width: 745px;
	height: 478px;
	border: 6px solid #ffffff;
	background:url(../images/testimg3.jpg) center center no-repeat; 
	background-size: 100% auto;
}

/*---------------------------------------------------------------------
     LINE UP 機能でえらぶ
  ---------------------------------------------------------------------*/
.lineup_dp {
	padding: 22px 0 0 182px;
}
.lineup_dp ul {
}
.lineup_dp li {
	position: relative;
	min-width: 128px;
	float: left;
	padding-bottom: 24px;
}
.lineup_dp li a {
	display: block;
}
.lineup_dp li img {
	display: block;
	padding-top: 5px;
	margin-right: 5px;
	padding-bottom: 12px;
}
/*
.lineup_dp li:last-child img{
	display: block;
	margin-right: 0px !important;
	border-right: none !important;
	padding-bottom: 18px;
}
*/

.lineup_dp li span {
	display: block;
	font-size: 9px;
	/*
	margin-top: 12px;
	height: 30px;
	*/
	position: absolute;
	top: 102px;
	left: 0;
}

#lineup_vs  li,
#lineup_chrvs  li {
	position: relative;
	float: left;
	height: 155px;
	padding: 0;
	display: block;
	margin-top: 10px;
}
#lineup_vs li,
#lineup_chrvs li {
	margin-right: 5px;
}

#lineup_vs  li img,
#lineup_chrvs  li img {
	display: block;
	position: absolute;
	bottom: 34px;
	padding-top: 0px;
	border-top: none;
	left: 0;
}
#lineup_vs  li span,
#lineup_chrvs  li span {
	display: block;
	font-size: 9px;
	padding-top: 8px;
	/*
	margin-top: 12px;
	height: 30px;
	*/
	position: absolute;
	bottom: 0px;
	left: 0;
	text-align: center;
}
#lineup_lunch  li {
	position: relative;
	float: left;
	min-width: 135px;
	height: 155px;
	padding: 0;
	margin-right: 5px;
	margin-top: 10px;
}
#lineup_lunch  li img {
	display: block;
	position: absolute;
	bottom: 34px;
	left: 0;
}
#lineup_lunch  li span {
	display: block;
	font-size: 9px;
	padding-top: 8px;
	/*
	margin-top: 12px;
	height: 30px;
	*/
	position: absolute;
	bottom: 0px;
	left: 0;
	text-align: center;
}

/*---------------------------------------------------------------------
     LINE UP 色でえらぶ
  ---------------------------------------------------------------------*/
.lineup_color {
	padding: 11px 0 11px 29px;
}
.lineup_color li {
	display: inline;
	width: 100px;
	float: left;
	margin: 11px 0 11px 0;
	overflow: hidden;
}
.col01,
#col01 .ab,
#col01 .h3s {
	color:#DA3A15;
}
.col02,
#col02 .ab,
#col02 .h3s {
	color: #E181AB;
}
.col03,
#col03 .ab,
#col03 .h3s {
	color: #F1C120;
}
.col04,
#col04 .ab,
#col04 .h3s {
	color: #88B927;
}
.col05,
#col05 .ab,
#col05 .h3s {
	color: #6993C6;
}
.col06,
#col06 .ab,
#col06 .h3s {
	color: #595757;
}
.col07,
#col07 .ab,
#col07 .h3s {
	color: #E50212;
}
/*---------------------------------------------------------------------
     LINE UP 詳細
  ---------------------------------------------------------------------*/
#lineup_imgs {
	position: relative;
	overflow: hidden;
}
#lineup_imgs ul {
	border: 6px solid #ffffff;
	width: 762px;
	height: 487px;
	overflow: hidden;
}
#lineup_imgs li {
	display: block;
	width: 762px;
	height: 487px;
	position: relative;
	overflow: hidden;
}
#lineup_imgs img {
	position: absolute;
	left: 0;
	top: 0;
}
.rr {
	position: absolute;
	bottom: 0px;
	right: 0px;
	background:url(../lineup/images/roundrect_w.png) left top no-repeat;
	width: 40px;
	height: 40px;
}
#prev,
#next
{
	position: absolute;
	display: block;
	width: 40px;
	height: 0px;
	padding-top: 100px;
	background: url(../lineup/images/d_arrow.png) left center no-repeat;
	overflow: hidden;
	z-index: 9999;
}
#prev {
	left: 0;
	top: 193px;
}
#next {
	right: 0;
	top: 193px;
	background-position: -120px center;
}
#prev:hover {
	background-position: -40px center;
}
#next:hover {
	background-position: -80px center;
}
.d_caption {
	position: absolute;
	padding: 10px;
	background: url(../lineup/images/d_caption_bg.png) repeat;
	color: #41596e;
}
.d_caption h4 {
	font-size: 20px;
	margin-bottom: 10px;
	min-width: 474px;
	opacity: 0.8;
}
.d_caption p {
	font-size: 13px;
	line-height: 1.4;
	width: 474px;
}
.d_lb {
	left: 39px;
	bottom: 10px;
}
.d_rb {
	right: 10px;
	bottom: 10px;
}
.d_lt {
	left: 10px;
	top: 10px;
}
.d_rt {
	right: 10px;
	top: 10px;
}
.variation {
	font-size: 9px;
	margin: 20px 32px 0 32px;
}
.variation ul {
}
.variation li {
	width: 128px;
	height:128px;
	float: left;
	overflow: hidden;
	position: relative;
}
.variation .moomin_v li {
	overflow:visible;
}
.variation li img {
	display: block;
	left: 20px;
	top: 0;
	position: absolute;
}
#v_multicase li img {
	left: 0;
}

.variation li span {
	width: 128px;
	display: block;
	position: absolute;
	left: 0;
	bottom: 8px;
	text-align: center;
	margin-top: 12px;
	height: 20px;
}
#vboxshort .variation li {
	width: 128px;
	height:156px;
	float: left;
	overflow: hidden;
	position: relative;
}
#vboxshort .variation li img {
	display: block;
	left: 20px;
	top: 0;
	position: absolute;
}
#vboxshort .variation li span {
	width: 128px;
	display: block;
	position: absolute;
	left: 0;
	bottom: 8px;
	text-align: center;
	margin-top: 12px;
	height: 20px;
}

#vboxlarge .variation li {
	width: 192px;
	height:142px;
	float: left;
	overflow: hidden;
	position: relative;
}
#vboxlarge .variation li img {
	display: block;
	left: 20px;
	top: 0;
	position: absolute;
}
#vboxlarge .variation li span {
	width: 192px;
	display: block;
	position: absolute;
	left: 0;
	bottom: 8px;
	text-align: center;
	margin-top: 12px;
	height: 20px;
}

.specsbox {
	padding: 0 0 50px 50px;
}
.specs {
	float: left;

}
.specs td {
	vertical-align: bottom;	
}

.spec {
	float: right;
	font-size: 12px;
	line-height: 120%;
	border-collapse:collapse;
	border: 1px solid #65757f;
	width: 640px;
}
.spec th {
	width: 6em;
}
.pdtd {
	padding-left: 15px;
}

.spec th,
.spec td {
	padding: 4px;
	font-weight: normal;
	border: 1px  dotted #65757f;
	vertical-align:middle;
}

.spec td.spec_l {
	border-right: 1px solid #65757f;
}

.paldepabtn {
	float: right;
	display: block;
	width: 12em;
	border: 1px solid #65757f;
	padding: 6px 6px;
	font-size: 9px;
	height: 11px;
	line-height: 11px;
	text-align: center;
	background: #ffffff;
}
.paldepabtn:hover {
	background: #a5d9eb;
}
.spec_i {
	text-align: center;
	vertical-align: middle;
}
/*=====================================================================
     WHAT'S .POUCH?
  =====================================================================*/
#whatspouch .sub_header {
	margin: 5px 1px 11px 5px;
}
#whatspouch .htextbox {
	height: 30px;
	line-height: 30px;
}
#whatspouch .hframe {
	display: inline;
	float: left;
}
#whatspouch .sframe {
	float: left;
}
#whatspouch .hbox li {
	display: block;
	width: 745px;
	height: 553px;
	position: relative;
}
#whatspouch .hbox li h3{
	display: block;
	position: absolute;
	left: 20px;
	top: 20px;
	font-size: 24px;
	line-height: 30px;
	height:30px;
}
.wptextbox0 {
	width: 410px;
	position: absolute;
	top:42px;
	right: 22px;
}
.wptextbox1 {
	width: 260px;
	padding: 10px;
	position: absolute;
	top:82px;
	right: 22px;
	background: url(../whats/images/wd_caption_bg.png) left top repeat;
}
.wptextbox {
	width: 700px;
	position: absolute;
	bottom:7px;
	left: 22px;
}
#wd01 .wptextbox {
	width: 410px;
}
.wptextbox h4,
.wptextbox0 h4,
.wptextbox1 h4 {
	font-size: 18px;
	line-height: 21px;
	display: block;
}
.wptextbox0 h4,
.wptextbox1 h4 {
	text-align: right;
}
.wptextbox h5,
.wptextbox0 h5 {
	font-size: 14px;
	font-weight: bold;
	margin: 10px 0 5px 0;
}
.wptextbox1 h5 {
	font-size: 14px;
	font-weight: bold;
}

.wptextbox0 h5,
.wptextbox1 h5 {
	text-align:right;
}
.wptextbox p,
.wptextbox0 p,
.wptextbox1 p {
	font-weight: normal;
	font-size: 12px;
	line-height: 1.4;
}
.wptextbox0 p {
	width: 260px;
	float: right;
	background: url(../whats/images/wd_caption_bg.png) left top repeat;
}
.wpimg2 {
	display: block;
	position: absolute;
	right: 22px;
	bottom: 6px;
}
/*=====================================================================
     HOW TO USE
  =====================================================================*/
#howtouse .sub_header {
	margin: 5px 1px 6px 5px;
}
#howtouse .hframe {
	display: inline;
	float: left;
}
#howtouse .htextbox {
	height: 30px;
	line-height: 30px;
}
#howtouse .mframe {
	float: left;
}
#howtouse .mtitle {
	font-family:"Arial", Gadget, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-weight: bold;
	font-size: 14px;
}
#howtouse .mtextbox {
	background-color: transparent;
}
.htuimg {
	width: 745px;
	position: relative;
}
.htuimg img {
	display: block;
}
.htulink {
	display: block;
	position: absolute;
	bottom: 6px;
	right: 6px;
	text-shadow: 0px 0px 10px #ffffff;
	font-size: 10px;
}
.htuhl1 {
	position: absolute;
	left: 87px;
	top: 22px;
	font-size: 25px;
	font-weight: bold;
}
.htuhl2 {
	position: absolute;
	left: 87px;
	top: 48px;
	font-size: 12px;
}
.htuimg0 {
	position: absolute;
	left: 0px;
	top: 0px;
}
#wl01 .mbox {
	background:url(../howtouse/images/petbottle.jpg) left top no-repeat;
}
#wl02 .mbox {
	background:url(../howtouse/images/cosme.jpg) left top no-repeat;
}
#wl03 .mbox {
	background:url(../howtouse/images/umbrella.jpg) left top no-repeat;
}
#wl04 .mbox {
	background:url(../howtouse/images/toothbrush.jpg) left top no-repeat;
}
#wl05 .mbox {
	background:url(../howtouse/images/coldfood.jpg) left top no-repeat;
}
#wl06 .mbox {
	background:url(../howtouse/images/accessory.jpg) left top no-repeat;
}
#wl07 .mbox {
	background:url(../howtouse/images/sanitary.jpg) left top no-repeat;
}
#wl08 .mbox {
	background:url(../howtouse/images/sp.jpg) left top no-repeat;
}
/*=====================================================================
     共通
  =====================================================================*/
.news_box {
	padding-bottom: 64px;
}
.news_l {
	padding: 31px 80px 0 80px;
}
.news_l_box {
	position: relative;
	background:url(../images/menuline.gif) bottom left repeat-x;
	padding-bottom: 40px;
}

.news_l_img {
	position: absolute;
	left: 0;
	top: 0;
}
.news_l_box p {
	min-height: 320px;
	height: auto !important;
	height: 320px;
	margin-left: 372px;
	font-size: 11px;
	line-height: 1.4;
}
.newsdate {
	line-height: 13px;
	font-size: 10px;
}
.newstitle {
	font-size: 15px;
	line-height: 21px;
	margin: 8px 0 8px 0;
}
.newscategory {
	margin-left: 18px;
}
.news_l_release {
	position: absolute;
	right: 0;
	bottom: 12px;
	font-size: 10px;
}
.news_s {
	padding: 39px 80px 0 80px;
}
.news_s_box {
	position: relative;
}
.news_s_img {
	position: absolute;
	left: 0;
	top: 0;
}
.news_s_r {
	min-height: 128px;
	height: auto !important;
	height: 128px;
	margin-left: 150px;
	background:url(../images/menuline.gif) bottom left repeat-x;
	position: relative;
}
.news_s_box p {
	margin-top: 22px;
	font-size: 11px;
	line-height: 1.4;
}
.news_s_release {
	position: absolute;
	right: 0;
	bottom: 12px;
	font-size: 10px;
}

/*=====================================================================
     for tipsy
  =====================================================================*/
.tipsy { font-size: 10px; position: absolute; padding: 5px; z-index: 100000;}
  .tipsy-inner { background-color: #a5d9eb; color: #65757f; max-width: 200px; padding: 5px 8px 4px 8px; text-align: center; }

  /* Rounded corners */
  .tipsy-inner { border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; }
  
  .tipsy-arrow { position: absolute; width: 0; height: 0; line-height: 0; border: 5px dashed #000; }
  
  /* Rules to colour arrows */
  .tipsy-arrow-n { border-bottom-color: #a5d9eb; }
  
	.tipsy-n .tipsy-arrow { top: 0px; left: 50%; margin-left: -5px; border-bottom-style: solid; border-top: none; border-left-color: transparent; border-right-color: transparent; }
    .tipsy-nw .tipsy-arrow { top: 0; left: 10px; border-bottom-style: solid; border-top: none; border-left-color: transparent; border-right-color: transparent;}
    .tipsy-ne .tipsy-arrow { top: 0; right: 10px; border-bottom-style: solid; border-top: none;  border-left-color: transparent; border-right-color: transparent;}


/*=====================================================================
top mbox
  =====================================================================*/
#top_htu_img1 {
	background:url(../product/top_m/keep_petbottle.jpg) left top no-repeat;
}
#top_htu_img2 {
	background:url(../product/top_m/heart_cosme.jpg) left top no-repeat;
}
.htuicon_pet,
.htuicon_cosme,
.htuicon_sanitary,
.htuicon_coldfood,
.htuicon_umbrella,
.htuicon_stationary,
.htuicon_food,
.htuicon_toothbrush,
.htuicon_keepcold,
.htuicon_accessory,
.htuicon_smartphone
 {
	background:url(../images/howtouse_icons.png) left top no-repeat;
	width: 58px;
	height: 58px;
	position: absolute;
	overflow: hidden;
	left: 6px;
	top: 6px;
}
.htuicon_cosme {
	background-position: -58px 0;
}
.htuicon_sanitary {
	background-position: -116px 0;
}
.htuicon_coldfood {
	background-position: -174px 0;
}
.htuicon_umbrella {
	background-position: -232px 0;
}
.htuicon_stationary {
	background-position: -290px 0;
}
.htuicon_food {
	background-position: -348px 0;
}
.htuicon_toothbrush {
	background-position: -406px 0;
}
.htuicon_keepcold {
	background-position: -464px 0;
}
.htuicon_accessory {
	background-position: -522px 0;
}
.htuicon_smartphone {
	background-position: -580px 0;
}
.htuimg .htuicon_pet,
.htuimg .htuicon_cosme,
.htuimg .htuicon_sanitary,
.htuimg .htuicon_coldfood,
.htuimg .htuicon_umbrella,
.htuimg .htuicon_stationary,
.htuimg .htuicon_food,
.htuimg .htuicon_toothbrush,
.htuimg .htuicon_keepcold,
.htuimg .htuicon_accessory,
.htuimg .htuicon_smartphone
 {
	left: 12px;
	top: 12px;
 }
 
 
.related {
	padding: 22px 0 22px 22px;
}
.related h3 {
	font-size: 22px;
	font-weight: bold;
	background: none;
}
.related ul {
	padding-left: 50px;
}
.related li {
	position: relative;
	min-width: 128px;
	float: left;
	padding-bottom: 24px;
	position: relative;
	float: left;
	height: 155px;
	padding: 0;
	margin: 10px 0 0 0;
}
.related li a {
	display: block;
}
.related li img {
	display: block;
	padding-bottom: 18px;
	display: block;
	position: absolute;
	bottom: 34px;
	left: 0;
}
.related li span {
	display: block;
	font-size: 9px;
	/*
	margin-top: 12px;
	height: 30px;
	*/
	position: absolute;
	top: 102px;
	left: 0;
	display: block;
	font-size: 9px;
	padding-top: 8px;
	/*
	margin-top: 12px;
	height: 30px;
	*/
	position: absolute;
	bottom: 0px;
	left: 0;
	text-align: center;
}
.d_chrlogo_r {
	position: relative;
}
.d_chrlogo_half_hk40th .d_chrlogo_i,
.d_chrlogo_short_hk40th .d_chrlogo_i,
.d_chrlogo_large_hk40th .d_chrlogo_i {
	background: url(../product/mv/hk40_logo.jpg) left top no-repeat;
	width: 172px;
	height: 172px;
	position: absolute;
	top: -86px;
}
.d_chrlogo_half_hk40th,
.d_chrlogo_short_hk40th,
.d_chrlogo_large_hk40th {
	position: absolute;
	left: 0;
	top: 50%;
}
.d_chrlogo_half_miffyflower .d_chrlogo_i,
.d_chrlogo_short_miffyflower .d_chrlogo_i,
.d_chrlogo_large_miffyflower .d_chrlogo_i {
	background: url(../product/mv/miffyflower_logo.jpg) left top no-repeat;
	width: 260px;
	height: 128px;
	position: absolute;
	top: -64px;
}
.d_chrlogo_half_miffyflower,
.d_chrlogo_short_miffyflower,
.d_chrlogo_large_miffyflower {
	position: absolute;
	left: 0;
	top: 50%;
}