/*.....................................................................

  reset part
  ver 4
.....................................................................*/
@charset "UTF-8";

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

/* padding、borderの値をwidthに含める */
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
       -o-box-sizing: border-box;
      -ms-box-sizing: border-box;
          box-sizing: border-box;
}

/*		
	font-size 基本サイズ(10px == 100% == 1em)へ設定
	算出:(基本サイズ / デフォルトサイズ) [ 10px/16px= 62.5% ]
	!ブラウザフォントが16px標準設定されていると仮定
.....................................................................*/
* {
  font-family: inherit;
	font-size: 62.5%;
	-ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;	
}

/*.....................................................................
  
  typography

.....................................................................*/

/*
  font type (android::=Roboto,'Droid Sans')
=======================================================================*/
body[data-attr~="font-kaku-gothic"] {
	font-family: Helvetica Neue,Hiragino Kaku Gothic ProN,"メイリオ",meiryo,sans-serif;
}

body[data-attr~="font-maru-gothic"], *[data-attr~="font-maru-gothic"], *[data-attr~="font-maru-gothic"] * {
	font-family:"Lucida Grande","segoe UI","ヒラギノ丸ゴ ProN W4","Hiragino Maru Gothic ProN",Meiryo,Arial,sans-serif;
}

body[data-attr~="font-mincho"], *[data-attr~="font-mincho"], *[data-attr~="font-mincho"] * {
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

/*.....................................................................

  font-size
	
.....................................................................*/

/*
  small
=======================================================================*/

body * {
	font-size: 1.5rem;
  font-weight: normal;  
}

h1 {
  padding: 0.25em 0;
	font-size: 1.8rem;
}

h2 {
  padding: 0.25em 0;
	font-size: 1.7rem;
}

h3 {
  padding: 0.25em 0;
	font-size: 1.6rem;
}

h4 {
  padding: 0.25em 0;
	font-size: 1.5rem;
}

h5 {
  padding: 0.25em 0;
	font-size: 1.5rem;
}

h6 {
  padding: 0.25em 0;
	font-size: 1.5rem;
}

p {
  padding: 0.5em 0;
}

dt {
  margin: 0.5rem 0rem;
  font-size: 1.7rem;
  font-weight: bold;
}

dd {
  margin: 0.5rem 1.5rem;
}

li {
  margin: 0.5rem 1rem;
}

select {
  max-width: 100%;
  width: inherit;
}

/*
  tablet pc
=======================================================================*/

@media screen and (min-width: 768px) {
  
  body * {
  	font-size: 1.6rem;  
  }
  
  h1 {
    padding: 0.25em 0;
  	font-size: 2.6rem;
  }
  
  h2 {
    padding: 0.25em 0;
  	font-size: 2.5rem;
  }
  
  h3 {
    padding: 0.25em 0;
  	font-size: 2.4rem;
  }
  
  h4 {
    padding: 0.25em 0;
  	font-size: 2.3rem;
  }
  
  h5 {
    padding: 0.25em 0;
  	font-size: 2.2rem;
  }
  
  h6 {
    padding: 0.25em 0;
  	font-size: 2.1rem;
  }
  
  p {
    padding: 0.5em 0;
  }
  
  dt {
    margin: 0.5rem 0rem;
    font-size: 1.7rem;
    font-weight: bold;
  }
  
  dd {
    margin: 0.5rem 1.5rem;
  }
  
  li {
    margin: 0.5rem 1rem;
  }

}

main {
  display: block;
}

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;
}

a,
strong,
span {
  font-size: inherit;
	font-weight: inherit;	
}

pre {
/* 	white-space: initial; */
}

/* aa php debug */
pre.aa-debug {
  width: 100vw;
  white-space: pre-wrap;
}

ul,
ol{
	margin-left: 1em;
	margin-right: 1em;	
}

dl {
	margin-left: 0.5em;
	margin-right: 1em;	
}

nav ul,
nav ol,
nav dl {
	margin: 0;
}

nav li{
	list-style:none;
}

a {
	text-decoration: none;	
}

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

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

img {
  width: 100%;
  height: auto;
  max-width: inherit;
  max-height: 100%;
}

button {
  width: auto;
  font-family: inherit;
  overflow: visible;
  border-radius: 0;
  background-color: transparent;
}

input[type="text"],
input[type="number"],
input[type="password"],
textarea {
  padding: 0.5em;
  width: 100%;
  border: solid 1px #9e9e9e;
}

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

iframe {
  width: 100%;
  height: auto;  
}

/*.....................................................................

  table
	
.....................................................................*/

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

td, th {
  display: block;
  margin: 0 auto;
  border-bottom: .05rem solid #dadee4;
  padding: .6rem .4rem;
}

th {
  padding-right: 1em;
  min-width: 12em;
  text-align: left;
}

tbody tr:nth-of-type(odd) {
  background: #f7f8f9;
}

/*
  tablet pc
=======================================================================*/

@media screen and (min-width: 768px) {
  
td, th {
  display: table-cell;
  width: auto;
}

th { 
  text-align: right;
}

}

/*.....................................................................

  layout part
	
.....................................................................*/

/* 
  基底

  カラムレイアウト基本設定
  X柚 左揃え
  Y柚 上揃え
  
  基底値 row
  <elm data-layout="row">
    <elm>...</elm>
    <elm>...</elm>
    ...
  </elm>
.....................................................................*/
[data-layout|="row"] {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
}

/*
  X柚 中央揃え
.....................................................................*/
[data-layout|="row"][data-attr~="x-mid"] {
  justify-content: center;
}

/*
  Y柚 中央揃え
.....................................................................*/
[data-layout|="row"][data-attr~="y-mid"] {
  align-items: center;
}

/*
  折返しなし
.....................................................................*/
[data-layout|="row"][data-attr*="nowrap"] {
  flex-wrap: nowrap;
}

/*
  2分割
.....................................................................*/
[data-attr*="s2"] > * {
  width: 50%;
}

/*
  3分割
.....................................................................*/
[data-attr*="s3"] > * {
  width: 33.3%;
}

/*
  4分割
.....................................................................*/
[data-attr*="s4"] > * {
  width: 25%;
}