@charset "Shift_JIS";

/*
----------------------------------------*/
/* contents 2column
   2カラムレイアウト用のcss
   #codenameは指定の案件コードを使用すること
--------------------------------------*/

@media not screen, screen and (min-width: 769px){ 

/*----------------
 #nanaco
 ここからnanaco_new
--------------- */
.displayPC {display:block;}
.displaySP {display:none;}

#nanaco{
	width:970px;
	margin: 40px auto 0;
	}
#nanaco .ttl {
	width:960px;
	margin:0 auto;}
#nanaco .topimg {
	width:960px;
	background:#FF9730;
	margin:0 auto;}
#nanaco_pop{
	margin:10px;
	font-size:100%;
	line-height:130%;
	text-align:left;}
#nanaco #column2_products_new{
	float:none;
	margin: 0 auto;}

/*----------------
 base layout
--------------- */

/* Float */
#nanaco .l {float:left;}
#nanaco .r {float:right;}

/* clearfix */
.cf:before, .cf:after {content:" "; display:table;}
.cf:after {clear:both;}
.cf {zoom:1;}

/* cmp end */
#cmp_end_banner
	{margin-bottom:10px;}
#nanaco .bnr_box{
	margin:3px 6px;
	text-align:center;
	}
#nanaco .bnr_box img {
	width:738px;
	height:138px;}
#nanaco .round-top01 {
	width:740px;
	padding: 5px 5px 0;
	background:url(/sej_test/library/common/nanaco/bg_top01.gif) no-repeat 0 0;
	background-position: center top;
	background-repeat: no-repeat;
	overflow:hidden;
	text-align: left;}
#nanaco .round-top01 .box_l{
	float:left;}
#nanaco .round-top01 .box_r{
	float:right; margin-left:5px;}
#nanaco .round-top01 .title{
	margin-top:10px;}
#nanaco .round-top01 .bnr{
	margin-top:3px;}
#nanaco .round-top01 .title01{
	margin:15px 0 0 5px;}
#nanaco .round-top01 .point_top{
	margin:25px 0 0 14px;}
#nanaco .round-top01 .point{
	margin:15px 0 0 14px;}
#nanaco .arrow_box{
	width:360px; margin-top:20px;
	* margin-top:25px; /* IE7 and below */}
#nanaco .arrow_box .arrow_img{
	vertical-align:middle; margin-right:3px; margin-bottom:2px;
	* margin-bottom:0; /* IE7 and below */}
#nanaco .arrow_box .arrow{
	text-align:right; font-size:115%;}

/*----------------
  nanacoサービス  
--------------- */
#nanaco .ttl{
	margin-bottom:10px;}
#nanaco .topimg{
	margin-bottom:30px;}
#nanaco h2{
	margin-bottom:20px;}
#nanaco .col2{
	width:910px;
	overflow:hidden;
	margin:0 auto;
	padding-bottom:30px;}
#nanaco .r ,
#nanaco .l { width:445px;}
#nanaco .lineup_c,
#nanaco .lineup_m{ position:relative;}
#nanaco .lineup_c img{
	width:445px;
	height:190px;}
#nanaco .lineup_m img{
	width:445px;
	height:190px;}
#nanaco .lineup_c .btn img{
	width:131px;
	height:33px;}
#nanaco .lineup_m .btn img{
	width:131px;
	height:33px;}
#nanaco .lineup_c .btn,
#nanaco .lineup_m .btn{
	position:absolute;
	bottom:20px;
	right:20px;}
#nanaco .lineup_p{
	position:relative;
	width: 910px;
	margin:0 auto 30px;}
#nanaco .lineup_p img{
	width: 910px;}
#nanaco .lineup_p .btn{
	position:absolute;
	bottom:20px;
	right:20px;}
#nanaco .lineup_p .btn img{
	width:232px;}
#nanaco h3 {
	width:950px;
	margin:0 auto 20px;}

/*----------------
 ご入会・お申込み 
--------------- */

#nanaco #admission_box{
	margin:20px 0 10px 0;
	position:relative;
	width: 740px;
	height:90px;}
#nanaco #nanaco_btn{
	position:absolute;
	left: 10px;
	top: 30px;}
#nanaco #plus_btn{
	position:absolute;
	left: 386px;
	top: 30px;}

/*----------------
 おすすめ情報 
--------------- */

#nanaco .title_osusume{ margin:0;}
#nanaco .osusume_lead{ margin-left:10px;}
#nanaco .title_nanaco{
	margin:0 0 10px 10px;
	padding-top:10px;}
#nanaco .title_plus{ margin:15px 0 10px 10px;}
.ml5{ margin-left:5px;}
.mr7{ margin-right:7px;}
div ul.about_box{ margin: 0px 20px;}
div ul.about_box01{ margin: 0px 20px 10px;}

/*----------------
 base layout
--------------- */

/* reset */
h2,h3,h4,h5 {
	font-size:100%;
	font-weight:normal;
	text-decoration:none;}
ul,li,dl,dd,dt {
	margin:0;
	padding:0;
	list-style:none;
	list-style-position:outside;}
/* clearfix */
.clearfix:after {
  content: "."; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden;}
.clearfix { display: inline-block; }

/* cmp end */
#cmp_end_banner{margin-bottom:10px;}

.main-img {
    width: 100%;}

/* バナーエリア */

.nanaco .main-img {
	width: 970px;
}
.nanaco .main-img img{
	border:1px solid #ccc;
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}
.nanaco .top-layout01 {
	margin-right: -20px;
}
.nanaco .top-layout01 .block {
	width: 310px;
	margin-right: 20px;
}
.nanaco .top-layout01 .block img {
	border:1px solid #ccc;
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}
.nanaco .top-layout01.img-305 .block {
	width: 475px;
	margin-bottom: 20px;
}
.nanaco .top-layout01.img-305 .block img {
	border:1px solid #ccc;
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}
.nanaco .nanaco-indent02 {
	position: relative;
	top: -98px;
	margin-bottom: -10px;
}

/*----------------
 annotation
 ここから注釈エリア
--------------- */

#annotation {
	width:970px;
	margin:0 auto;}
#annotation .title_nanaco,
#annotation .title_plus {
	margin:10px;
}
#annotation .round-top {
width: 750px;
padding: 5px 0 0;
background-image: url(/sej_test/library/common/nanaco/bg_top.gif);
background-position: center top;
background-repeat: no-repeat;
text-align: left;}
#annotation .round-middle {
padding: 0;
background-image: url(/sej_test/library/common/nanaco/bg_middle.gif);
background-position: center top;
background-repeat: repeat-y;
text-align: left;}
#annotation .round-bottom {
padding: 0 0 5px;
margin-bottom:20px;
background-image: url(/sej_test/library/common/nanaco/bg_bottom.gif);
background-position: center bottom;
background-repeat: no-repeat;
text-align: left;}
#annotation .round-top2 {
width: 950px;
padding: 5px 0 0;
background-image: url(/sej_test/library/common/nanaco/bg_top2.gif);
background-position: center top;
background-repeat: no-repeat;
text-align: left;}

#annotation .round-middle2 {
padding: 0;
background-image: url(/sej_test/library/common/nanaco/bg_middle2.gif);
background-position: center top;
background-repeat: repeat-y;
text-align: left;
}

#annotation .round-bottom2 {
padding: 0 0 5px;
margin-bottom:20px;
background-image: url(/sej_test/library/common/nanaco/bg_bottom2.gif);
background-position: center bottom;
background-repeat: no-repeat;
text-align: left;}
}

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

/* 表示切替 */
.displayPC { display:none;}
.displaySP { display:block;}
#nanaco .ttl {
	width:100%;
	margin:0 auto 2%;
}
#nanaco .visualboard {
	width:100%;
}
#nanaco .visualboard img {
	width:100%;
	height:auto;
}
#nanaco .lineup_c,
#nanaco .lineup_m{
	margin-top:10px;
}
#nanaco .lineup_c p,
#nanaco .lineup_m p{
	width:100%;
}
.col2 {
	margin:0 auto;}
#nanaco .lineup_c p img,
#nanaco .lineup_m p img{
	margin:0 auto;
	width:90%;}
#nanaco .lineup_c .btn ,
#nanaco .lineup_m .btn {
	margin:0 auto;
	text-align:center;
	width:100%;}
#nanaco .lineup_c .btn img,
#nanaco .lineup_m .btn img{
	margin-top:10px;
	width:30%;}
#nanaco .lineup_p{
	width: 100%;
	margin:15px auto 10px;}
#nanaco .lineup_p img {
	width:90%;
	margin:0 auto;}
#nanaco .lineup_p .btn {
	width:100%;
	text-align:center;}
#nanaco .lineup_p .btn img{
	margin-top:15px;
	width:40%;}
#nanaco .r ,
#nanaco .l { width:100%;}

#nanaco .r img,
#nanaco .l img{ width:90%; margin:15px auto;}
#nanaco .bnr_box{
	margin:20px auto;
	width:100%;
}
#nanaco .bnr_box img {
	width:95%;
	height:auto;}
#nanaco h3 {
	width:100%;
	}
	#nanaco h3 img{
	width:100%;
	height:auto;
	margin: 3% 0 0}
#column2_products_new {
	float:right;
	font-size:100%;
	line-height:180%;
	width/**/:750px;
	_width/**/:700px;
}
*+html #nanaco .nanaco_col3 li {
	margin-right: 4.75px;
}
.mb20 {margin-bottom:20px;}
#nanaco .bnr_box{
	margin:3px 0;
	text-align:center;
	}

/* バナーエリア */

.nanaco .main-img {
	width: 100%;}
.nanaco .main-img img {
	border:1px solid #ccc;
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}
.nanaco .top-layout01 .block {
	width: 50%;
	margin-right: 0px;}
.nanaco .top-layout01 .block img{
	border:1px solid #ccc;
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;}
.nanaco .top-layout01.img-305 .block {
	width: 100%;
	margin-bottom: 20px;
}
.nanaco .top-layout01.img-305 .block img{
	border:1px solid #ccc;
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}
.nanaco .nanaco-indent02 {
position: relative;
top: -98px;
margin-bottom: 0;
}
.nanaco .top-layout01 {
margin-right: 0;
}

/*----------------
 annotation
 ここから注釈エリア
--------------- */

#annotation {
	padding:10px 10px 0 10px;
}
#annotation .round-top {

padding: 5px 0 0;
background-image: url(/sej_test/library/common/nanaco/bg_top.gif);
background-position: center top;
background-repeat: no-repeat;
text-align: left;
}

#annotation .round-middle {
padding: 0;
background-image: url(/sej_test/library/common/nanaco/bg_middle.gif);
background-position: center top;
background-repeat: repeat-y;
text-align: left;
}

#annotation .round-bottom {
padding: 0 0 5px;
margin-bottom:20px;
background-image: url(/sej_test/library/common/nanaco/bg_bottom.gif);
background-position: center bottom;
background-repeat: no-repeat;
text-align: left;
}

#annotation .round-top2 {

padding: 5px 0 0;
background-image: url(/sej_test/library/common/nanaco/bg_top2.gif);
background-position: center top;
background-repeat: no-repeat;
text-align: left;
}

#annotation .round-middle2 {
padding: 0;
background-image: url(/sej_test/library/common/nanaco/bg_middle2.gif);
background-position: center top;
background-repeat: repeat-y;
text-align: left;
}

#annotation .round-bottom2 {
padding: 0 0 5px;
margin-bottom:20px;
background-image: url(/sej_test/library/common/nanaco/bg_bottom2.gif);
background-position: center bottom;
background-repeat: no-repeat;
text-align: left;
}
#annotation .about_box{
	margin:0.5em;
}
#annotation .about_box01{
	margin:0.5em;
}
#annotation .title_nanaco,
#annotation .title_plus {
	margin:0.8em;
}
}