/* CSSリセット */
dl,dt,dd,ol,ul,li{
margin:0;padding:0;border:0;outline:0;font-size:100%;
vertical-align:baseline;background:transparent;font-weight:normal;
}

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,
pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,
strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,
caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,
figure,footer,header,hgroup,menu,nav,section,summary,time,mark,
audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;
vertical-align:baseline;background:transparent;font-weight:normal;}
body{line-height:1}article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section{display:block}
ul{list-style:none}blockquote,q{quotes:none}blockquote:before,
blockquote:after,q:before,q:after{content:none}a{margin:0;padding:0;
font-size:100%;vertical-align:baseline;background:transparent}
del{text-decoration:line-through}abbr[title],dfn[title]
{border-bottom:1px dotted;cursor:help}
table{border-collapse:collapse;border-spacing:0}
hr{display:block;height:1px;border:0;border-top:1px solid #ccc;
margin:1em 0;padding:0}input,select{vertical-align:middle}

*{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
  padding: 0;
  margin: 0;
}

.clearfix:after {
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
}
.clearfix {
	display: inline-table;
	min-height: 1%;
}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */

/****************************************************************

			基本

****************************************************************/
body{
font-size: 1em;
line-height:1.5em;
background: #fff8dc;
font-family:Avenir , "Open Sans" , "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , sans-serif;
}

a{
  text-decoration: none;
}

a img	{border: none}

section	{display: block;}

article	{display: block;}

li{
	list-style-type: none;
	text-align:left;
}

h2{
	text-align:left;
}

#wrapper1{
	text-align:left;
}

/****************************************************************

			ヘッダー

****************************************************************/
header{
  width: 640px;
  padding:0;
  margin: 0 auto 30px;
}

.site_header img{
  width: 400px;
  height: auto;
  margin: 0 auto;
  padding: 0;
  display: block;
}

.site_header img:hover{
opacity: 0.5;
filter: alpha(opacity=50);
-moz-opacity: 0.5;
}

/****************************************************************

			インデックス

****************************************************************/
.index-list img{
width: 640px;
height: auto;
margin: 0 auto;
display: block;
}

.index-list li,.index-list ul{
margin: 0 0 40px 0;
padding: 0;
}

.index-list img:hover{
opacity: 0.5;
filter: alpha(opacity=50);
-moz-opacity: 0.5;
}

.index-text{
margin: 0 0 40px 0;
}

.index-text p{
text-align: center;
}

.index_header img{
  width:80%;
  height: auto;
  margin: 0 auto;
  display: block;
}

/****************************************************************

			ぜんたい

****************************************************************/
#c-box{
  margin: 20px auto 30px;
  text-align: left;
  padding: 0;
}

#index-box{
  margin: 10px auto 50px;
  text-align: left;
  padding: 0;
}

#c-box p,#index-box p{
margin-bottom: 10px;
}

/*コンテンツ全体*/
#content-1{
  width: 640px;
  margin: 0 auto;
}

/****************************************************************

			カタログ一覧・ポイント説明

****************************************************************/
/*文章*/
.text-area{
margin: 0 0 20px 0;
}

.text-area img{
width: 100%;
height:auto;
}

.text-area a{
font-weight: bold;
}

.text-area h2{
font-weight: bold;
font-size: 1.5em;
text-align: center;
border-top: 1px #555 solid;
border-bottom: 1px #555 solid;
padding: 10px 0;
margin: 0 0 20px 0;
}

.text-area h3{
font-weight: bold;
font-size: 1.2em;
background: #fff;
border-left: #009944 solid 10px; 
padding: 10px;
margin: 40px 0 10px 0;
}

.text-area h4{
font-weight: bold;
font-size: 1em;
border-bottom: 1px #555 solid;
padding: 20px 0 5px 0;
margin: 0 0 10px 0;
}

.text-area ol,ul{
  margin: 20px 0;
  padding: 0 0 0 20px;
}

.list1 li{
list-style-type: decimal;
margin: 0 0 5px 0;
}

.list2 li{
list-style-type: disc;
margin: 0 0 5px 0;
}

/*カタログ画像*/
#catalog-list img{
    width:300px;
}

#catalog-list{
overflow: hidden;
}

#catalog-list ul{
    margin: 0 -20px 0;
}

#catalog-list li{
float:left;
background: #fff;
padding:5px;
margin: 0 20px 20px 0;
border-radius: 0.5em;	
-moz-border-radius: 0.5em;
-webkit-border-radius: 0.5em;
-o-border-radius: 0.5em;
-ms-border-radius: 0.5em;
}

.text-btn{
background: #ff8c00;
padding: 15px 10px 5px 10px;
margin: 0 auto;
display: block;
text-align: center;
color: #fff;
border-radius: 1.5em;	
-moz-border-radius: 1.5em;
-webkit-border-radius: 1.5em;
-o-border-radius: 1.5em;
-ms-border-radius: 1.5em;
}

.text-btn p,.sentaku-btn p{
 font-weight: bold;
}

.text-btn:hover,.sentaku-btn:hover,.text-area a:hover,#catalog-btn a:hover{
  opacity: 0.5;
  filter: alpha(opacity=50);
  -moz-opacity: 0.5;
}

#catalog-list a:hover{
  opacity: 0.5;
  filter: alpha(opacity=50);
  -moz-opacity: 0.5;
}


/* カタログ選択 */
.sentaku-btn{
background: #ffff00;
padding: 15px 10px 5px 10px;
margin: 0 auto 20px;
display: block;
text-align: center;
color: #009944;
border: #009944 2px solid;
border-radius: 1.5em;	
-moz-border-radius: 1.5em;
-webkit-border-radius: 1.5em;
-o-border-radius: 1.5em;
-ms-border-radius: 1.5em;
}

/* カタログボタン */
#catalog-btn ul{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0 -5px 0 -20px;
}

#catalog-btn li{
width: calc(25% - 10px);
display: block;
font-weight: bold;
text-align: center;
padding: 5px 10px;
margin: 0 5px 20px 0;
border: #009944 2px solid;
}

.catalog-y{
background: #009944;
color: #fff;
}

.catalog-n{
color: #009944;
background: #fff;
}

/****************************************************************

			フッター

****************************************************************/
#footer	{
	margin: 20px 0 95px;
    padding: 0 0 20px;
    text-align: center;
}

#content-1 small{
font-size: 0.7em;
}

.copy{
text-align: center;
}

.copy a{
color: #000;
}

.toiawase h2{
background: #009845;
color: #fff;
font-weight: bold;
text-align: center;
padding: 5px 0 5px;
margin: 0 0 5px 0;
}

.toiawase img{
width: 450px;
display: block;
margin: 0 auto 20px;
}

.toiawase img:hover{
  opacity: 0.5;
  filter: alpha(opacity=50);
  -moz-opacity: 0.5;
}


/* 下メニュー */
.under_menu{
background: #fff;
position: fixed;
bottom: 0;
width: 100%;
padding:0;
margin: 0;
z-index: 1;
}

.under_menu ul{
    overflow: hidden;
    width: 640px;
    margin: 0 auto;
    padding: 5px 0 0 0;
}

.under_menu li{
    width:160px;
    height:95px;
    float: left;
    padding: 0;
    margin: 0;
}

.under_menu img{
    width:100%;
}

.nav_small{
    color: #ddd;
}

.under_menu img:hover{
opacity: 0.5;
filter: alpha(opacity=50);
-moz-opacity: 0.5;
}

/****************************************************************

			タブレット・スマホ端末用

****************************************************************/
@media screen and (max-width:768px){
    
    body{
    font-size: 1.2em;
    line-height: 1.4em;
    }
    
    p,li{
    font-size: 0.85em;
    }
    
    /* インデックス */
    .index_header img{
    width: 95%;
    height: auto;
    margin: 0 auto;
    }
    
    .index-list img{
    width: 100%;
    }   

    
    /* 全体 */
    #c-box{
    width: 100%;
    margin: 10px auto 50px;
    }
    
    #content-1{
      width: 90%;
      margin: 0 auto;
    }
    
    
     /*カタログ*/
    #catalog-list img{
    width: 100%;
    margin: 0;
    }
    
    .text-area h2{
    font-size: 1.1em;
    }
    
    .text-area h3,.text-area h4{
    font-size: 1em;
    }
    
    #catalog-btn li{
width: calc(50% - 10px);
}
    
    /*ヘッダー*/
    header{
    width: 100%;
    height: auto;
    padding:2px 0 5px;
    }
    
    /* ヘッダーロゴ */
    .site_header img{
    width: 65%;
    } 
    
    /* フッター */
    #footer	{
	margin: 20px 0 80px;
}
    
    .copy{
    padding-bottom: 20px;
    }
    
    .home-link p{
    font-size: 0.85em;
    }
    
    .toiawase h2{
    font-size: 0.8em;
    }
    
    .toiawase img{
    width: 95%;
    }
    
    #footer small,#index_footer small{
    font-size: 0.8em;
    }
        
    .under_menu,.under_menu ul{
    width: 100%;
    }
    
    .under_menu li{
    width: 25%;
    height: auto;
    }
    
    .under_menu img{
    width: 100%;
    }

        
}