/*#####################################################################
	
	aa freame work
	date 2015.02.13
	version 1.0

######################################################################*/

@charset "utf-8";

/*
  title
=====================================================================*/
/*
  title
......................................................*/
/*... commont ...*/
/* commont */

/*

  reset

=====================================================================*/

* {
	margin:0;
	padding:0;
	border:0;
}

*
,*:before
,*:after {
  -webkit-box-sizing : border-box ;
	   -moz-box-sizing : border-box ;
          box-sizing : border-box ;
}

/*... [ 10px/16px= 62.5% ] (10px == 1em == 1rem) ...*/
html {
	font-size: 62.5%;
	font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック','MS PGothic',sans-serif;
	height: 100%;
  width: 100%;
}

/*... mobile font size ...*/
body {
	-webkit-text-size-adjust: 100%;
	height: 100%;
  width: 100%;
}

span
,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
,dt,dd,li
,fieldset
,label
,th,td {
	line-height: 1.5;
}

pre {
	white-space: pre-wrap; /*自動改行*/
}

strong {
	font-weight: inherit;	
}

nav ul
,form ul {
	list-style:none;
}

a {
	text-decoration: none;	
}

li {
  list-style: none;  
}

/*... 隣接セルのボーダーを重ねて、間隔を0にする ...*/
table {
	border-collapse:collapse;
	border-spacing:0;
}

hr {
    display:block;
    height:1px;
    border:0;
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input
,select
,img {
	vertical-align:middle;
}

/*... Normalize buttons in IE ...*/
button {
  width: auto;
  overflow: visible;
}

input[type="button"]
,input[type="submit"]
,button {
  cursor: pointer;
}


/*

	ie8以下

 ......................................................*/
 
body.old-ie article
, body.old-ie aside
, body.old-ie canvas
, body.old-ie details
, body.old-ie figcaption
, body.old-ie figure
, body.old-ie footer
, body.old-ie header
, body.old-ie hgroup
, body.old-ie menu
, body.old-ie nav
, body.old-ie section
, body.old-ie summary {
  display: block;
}


/*

  common

=====================================================================*/

/*... 幅 (%) ...*/
*[data-style-attr*="w-5"]  { width: 5%;  }
*[data-style-attr*="w-10"] { width: 10%; }
*[data-style-attr*="w-15"] { width: 15%; }
*[data-style-attr*="w-20"] { width: 20%; }
*[data-style-attr*="w-25"] { width: 25%; }
*[data-style-attr*="w-30"] { width: 30%; }
*[data-style-attr*="w-35"] { width: 35%; }
*[data-style-attr*="w-40"] { width: 40%; }
*[data-style-attr*="w-45"] { width: 45%; }
*[data-style-attr*="w-50"] { width: 50%; }
*[data-style-attr*="w-55"] { width: 55%; }
*[data-style-attr*="w-60"] { width: 60%; }
*[data-style-attr*="w-65"] { width: 65%; }
*[data-style-attr*="w-70"] { width: 70%; }
*[data-style-attr*="w-75"] { width: 75%; }
*[data-style-attr*="w-80"] { width: 80%; }
*[data-style-attr*="w-85"] { width: 85%; }
*[data-style-attr*="w-90"] { width: 90%; }
*[data-style-attr*="w-95"] { width: 95%; }

/*... 左のオフセット (%) ...*/
*[data-style-attr*="spl-5"]  { margin-left:5%; }
*[data-style-attr*="spl-10"] { margin-left:10%; }
*[data-style-attr*="spl-15"] { margin-left:15%; }
*[data-style-attr*="spl-20"] { margin-left:20%; }
*[data-style-attr*="spl-25"] { margin-left:25%; }
*[data-style-attr*="spl-30"] { margin-left:30%; }
*[data-style-attr*="spl-35"] { margin-left:35%; }
*[data-style-attr*="spl-40"] { margin-left:40%; }
*[data-style-attr*="spl-45"] { margin-left:45%; }
*[data-style-attr*="spl-50"] { margin-left:50%; }
*[data-style-attr*="spl-55"] { margin-left:55%; }
*[data-style-attr*="spl-60"] { margin-left:60%; }
*[data-style-attr*="spl-65"] { margin-left:65%; }
*[data-style-attr*="spl-70"] { margin-left:70%; }
*[data-style-attr*="spl-75"] { margin-left:75%; }
*[data-style-attr*="spl-80"] { margin-left:80%; }
*[data-style-attr*="spl-85"] { margin-left:85%; }
*[data-style-attr*="spl-90"] { margin-left:90%; }
*[data-style-attr*="spl-95"] { margin-left:95%; }

/*... 右のオフセット (%) ...*/
*[data-style-attr*="spr-5"]  { margin-right:5%; }
*[data-style-attr*="spr-10"] { margin-right:10%; }
*[data-style-attr*="spr-15"] { margin-right:15%; }
*[data-style-attr*="spr-20"] { margin-right:20%; }
*[data-style-attr*="spr-25"] { margin-right:25%; }
*[data-style-attr*="spr-30"] { margin-right:30%; }
*[data-style-attr*="spr-35"] { margin-right:35%; }
*[data-style-attr*="spr-40"] { margin-right:40%; }
*[data-style-attr*="spr-45"] { margin-right:45%; }
*[data-style-attr*="spr-50"] { margin-right:50%; }
*[data-style-attr*="spr-55"] { margin-right:55%; }
*[data-style-attr*="spr-60"] { margin-right:60%; }
*[data-style-attr*="spr-65"] { margin-right:65%; }
*[data-style-attr*="spr-70"] { margin-right:70%; }
*[data-style-attr*="spr-75"] { margin-right:75%; }
*[data-style-attr*="spr-80"] { margin-right:80%; }
*[data-style-attr*="spr-85"] { margin-right:85%; }
*[data-style-attr*="spr-90"] { margin-right:90%; }
*[data-style-attr*="spr-95"] { margin-right:95%; }



/*

  layout

=====================================================================*/

/* 
  カラムレイアウト基本設定

  均等 横分割
  <clumn-base-elm data-style-layout="col-sxx|colvh-sxx">
    <clumn-elm>
      content
    </clumn-elm>
  </clumn-base-elm>
  
  個別 幅と左オフセット指定
  <clumn-base-elm data-style-layout="col|colvh">
    <clumn-elm data-style-attr="sp-xx w-xx">
      content
    </clumn-elm>
  </clumn-base-elm>

  #vh::=Variable height(可変な高さ)
  #clumn-elmはpadding,borderのみ利用する(marginを使うとカラム落ち注意)
  #コンテンツ間の空きはclumn-elmのpaddingで設定
  #コンテンツの高さを揃えるにはmin-heightで設定
 ......................................................*/

/*... type:inline-block ...*/
[data-style-layout|="colvh"] {
  position: relative;
	margin: 0;
	padding: 0;
	width: 100%;
  letter-spacing: -.333em; /* 隙間調整分 */
}

[data-style-layout|="colvh"] > * {
  display: inline-block;
  letter-spacing: normal; /* 調整分 */
  vertical-align: top;
}


/*... type:float ...*/

[data-style-layout|="col"] {
  position: relative;
  width: 100%;
}

[data-style-layout|="col"] > * {
  float: left;
  display: block;
}

/* float clear */
[data-style-layout|="col"]:after {
  content: "";
  display: block;
  clear: both;
  width: 100%;  
}

/*... 均等 横分割数 s::slice ...*/
[data-style-layout*="col-s10"] > *:nth-child(-n+10),
[data-style-layout*="colvh-s10"] > *:nth-child(-n+10){ width: 10%; }

[data-style-layout*="col-s9"] > *:nth-child(-n+10),
[data-style-layout*="colvh-s9"]  > *:nth-child(-n+9) { width: 11.111%; }

[data-style-layout*="col-s8"] > *:nth-child(-n+10),
[data-style-layout*="colvh-s8"]  > *:nth-child(-n+8) { width: 12.5%; }

[data-style-layout*="col-s7"] > *:nth-child(-n+10),
[data-style-layout*="colvh-s7"]  > *:nth-child(-n+7) { width: 14.285%; }

[data-style-layout*="col-s6"] > *:nth-child(-n+10),
[data-style-layout*="colvh-s6"]  > *:nth-child(-n+6) { width: 16.666%; }

[data-style-layout*="col-s5"] > *:nth-child(-n+10),
[data-style-layout*="colvh-s5"]  > *:nth-child(-n+5) { width: 20%; }

[data-style-layout*="col-s4"] > *:nth-child(-n+10),
[data-style-layout*="colvh-s4"]  > *:nth-child(-n+4) { width: 25%; }

[data-style-layout*="col-s3"] > *:nth-child(-n+10),
[data-style-layout*="colvh-s3"]  > *:nth-child(-n+3) { width: 33.333%; }

[data-style-layout*="col-s2"] > *:nth-child(-n+10),
[data-style-layout*="colvh-s2"]  > *:nth-child(-n+2) { width: 49.9%; }


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

/*... 幅 (%) ...*/
*[data-style-attr*="w-5"]  { width: 100%; }
*[data-style-attr*="w-10"] { width: 100%; }
*[data-style-attr*="w-15"] { width: 100%; }
*[data-style-attr*="w-20"] { width: 100%; }
*[data-style-attr*="w-25"] { width: 100%; }
*[data-style-attr*="w-30"] { width: 100%; }
*[data-style-attr*="w-35"] { width: 100%; }
*[data-style-attr*="w-40"] { width: 100%; }
*[data-style-attr*="w-45"] { width: 100%; }
*[data-style-attr*="w-50"] { width: 100%; }
*[data-style-attr*="w-55"] { width: 100%; }
*[data-style-attr*="w-60"] { width: 100%; }
*[data-style-attr*="w-65"] { width: 100%; }
*[data-style-attr*="w-70"] { width: 100%; }
*[data-style-attr*="w-75"] { width: 100%; }
*[data-style-attr*="w-80"] { width: 100%; }
*[data-style-attr*="w-85"] { width: 100%; }
*[data-style-attr*="w-90"] { width: 100%; }
*[data-style-attr*="w-95"] { width: 100%; }

/*... 左のオフセット (%) ...*/
*[data-style-attr*="sp-5"]  { margin-left:0; }
*[data-style-attr*="sp-10"] { margin-left:0; }
*[data-style-attr*="sp-15"] { margin-left:0; }
*[data-style-attr*="sp-20"] { margin-left:0; }
*[data-style-attr*="sp-25"] { margin-left:0; }
*[data-style-attr*="sp-30"] { margin-left:0; }
*[data-style-attr*="sp-35"] { margin-left:0; }
*[data-style-attr*="sp-40"] { margin-left:0; }
*[data-style-attr*="sp-45"] { margin-left:0; }
*[data-style-attr*="sp-50"] { margin-left:0; }
*[data-style-attr*="sp-55"] { margin-left:0; }
*[data-style-attr*="sp-60"] { margin-left:0; }
*[data-style-attr*="sp-65"] { margin-left:0; }
*[data-style-attr*="sp-70"] { margin-left:0; }
*[data-style-attr*="sp-75"] { margin-left:0; }
*[data-style-attr*="sp-80"] { margin-left:0; }
*[data-style-attr*="sp-85"] { margin-left:0; }
*[data-style-attr*="sp-90"] { margin-left:0; }
*[data-style-attr*="sp-95"] { margin-left:0; }

/*... 均等 横分割数 s::slice ...*/
[data-style-layout*="col-s10"] > *:nth-child(-n+10),
[data-style-layout*="colvh-s10"] > *:nth-child(-n+10){ width: 100%; }

[data-style-layout*="col-s9"] > *:nth-child(-n+10),
[data-style-layout*="colvh-s9"]  > *:nth-child(-n+9) { width: 100%; }

[data-style-layout*="col-s8"] > *:nth-child(-n+10),
[data-style-layout*="colvh-s8"]  > *:nth-child(-n+8) { width: 100%; }

[data-style-layout*="col-s7"] > *:nth-child(-n+10),
[data-style-layout*="colvh-s7"]  > *:nth-child(-n+7) { width: 100%; }

[data-style-layout*="col-s6"] > *:nth-child(-n+10),
[data-style-layout*="colvh-s6"]  > *:nth-child(-n+6) { width: 100%; }

[data-style-layout*="col-s5"] > *:nth-child(-n+10),
[data-style-layout*="colvh-s5"]  > *:nth-child(-n+5) { width: 100%; }

[data-style-layout*="col-s4"] > *:nth-child(-n+10),
[data-style-layout*="colvh-s4"]  > *:nth-child(-n+4) { width: 100%; }

[data-style-layout*="col-s3"] > *:nth-child(-n+10),
[data-style-layout*="colvh-s3"]  > *:nth-child(-n+3) { width: 100%; }

[data-style-layout*="col-s2"] > *:nth-child(-n+10),
[data-style-layout*="colvh-s2"]  > *:nth-child(-n+2) { width: 100%; }


}


/*

	typography

	base size 1.6 (body element)
	h1 1.6 x 1.618 = 2.5888 = 2.59
	2.59 - 1.6 = 0.99
	0.99 / 5 = 0.198
	h2 2.59 - 0.198 = 2.392 = 2.39
	h3 2.392 - 0.198 = 2.194 = 2.19
	h4 2.194 - 0.198 = 1.996 = 1.99
	h5 1.996 - 0.198 = 1.798 = 1.8
	h6 1.798 - 0.198 = 1.6
	 
=====================================================================*/

body * {
	font-size: 1.6rem;
	line-height: 1.6;
  font-weight: 100;  
}

h1 {
  padding-top: 0.75em;
  padding-bottom: 0.25em;
	font-size: 2.59rem;
}

h2 {
  padding-top: 0.75em;
  padding-bottom: 0.25em;
	font-size: 2.39rem;
}

h3 {
  padding-top: 0.75em;
  padding-bottom: 0.25em;
	font-size: 2.19rem;
}

h4 {
  padding-top: 0.75em;
  padding-bottom: 0.25em;
	font-size: 1.99rem;
}

h5 {
  padding-top: 0.75em;
  padding-bottom: 0.25em;
	font-size: 1.8rem;
}

h6 {
  padding-top: 0.75em;
  padding-bottom: 0.25em;
	font-size: 1.6rem;
}

p {
  padding: 1em;
}

dt {
  padding: 0.25em 1em;
}

dd {
  padding: 0.25em 1em;
  line-height: 1.3;
}

li {
  padding: 0.25em 1em;
	line-height: 1.3;
}


/*

	image

  <img data-img-src="@1" src="ref-in-css.gif" alt=""/>
  
  @1:css define

  ex:
    html
    <img data-img-src="img-id" src="ref-in-css.gif" alt=""/>
    css
      @1x
        img[data-img-src="img-id"]{background-image: url("/img/xxx.jpg");}
      @2x
        @media screen and (min-resolution: 2dppx),(-webkit-min-device-pixel-ratio:2){
          img[data-img-src="img-id"]{background-image: url("/img/xxx@2x.jpg");}
        }
  
  contain	画像のアスペクト比を保ちつつ、常に背景画像の全体が表示される最大サイズで表示される。
  cover	画像のアスペクト比を保ちつつ、常にその画像1枚だけで表示領域全体を覆う最小サイズで表示される。
=====================================================================*/

/*
  img base setting
 ......................................................*/

/*... 基本は幅が基準 ...*/
img[data-img-src] {
  width: 100%;
  height: auto;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat; 
}

/*... 高さを基準 ...*/
img[data-img-src][data-style-attr*="h-max"] {
  width: auto;
  height: 100%;  
}

/*... 表示領域全体を覆う最小サイズ ...*/
img[data-img-src][data-style-attr*="fit-small"] {
  background-size: contain;
}

/*... 表示領域全体を覆う最大サイズ ...*/
img[data-img-src][data-style-attr*="fit-big"] {
  background-size: cover;
}