@charset "utf-8";

body{
  margin:0 auto;
  font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", sans-serif;
  text-align:center;
  -webkit-overflow-scrolling:touch;
  font-size:100%;
}
canvas, svg, div, header, footer, main, aside, section, article, nav, figure, video, audio{
  display:block;
  position:relative;
}
header, main, footer, section{
  clear:both;
}
header::after,
main::after,
section::after{
  content:"";
  clear:both;
  display:block;
}
span{
  display:inline-block;
}
img{
  display:inline-block;
  width:100%;
  height:auto;
  border:0;
}
figure{
  margin:0;
}
iframe{
  border:0;
}
button{
  border:0;
  background-color:inherit;
  outline:none;
}
table{
  border-collapse:collapse;
  margin:1em auto;
}
table td{
  vertical-align:top;
}
table td:nth-child(1){
  white-space:nowrap;
}
textarea{
  font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", sans-serif;
}
i{
  min-width:1em;
  height:1em;
  display:inline-block;
  background-color:whitesmoke;
}
@media screen{
  .table{
    display:inline-block;
    margin:1%;
    vertical-align:top;
  }
  .tr{
    display:table-row;
  }
  .td{
    display:table-cell;
    padding:1%;
    vertical-align:top;
    text-align:left;
  }
}
@media screen and (max-width:20em){
  .td{
    display:block;
  }
}
pre{
  text-align:left;
  white-space:pre-wrap;
}
/*flex responsive*/
.flex{
  display:flex;
  justify-content:center;
  align-items: center;
  flex-wrap:wrap;
  overflow:hidden;
}
.flex div{padding:0.125em;}
/*img responsive*/
@media screen and (max-width:768px){
  main section img{width:90%; height:auto; margin:0 auto;}
}
.body{ display:table; margin:0 auto; max-width:40em; }
.body p{ text-align:left; }
/* iframe resposive */
@media screen and (min-width:885px){
  iframe.ratio-169{ height:480px; width:calc(480px * 1.777);}
  iframe.ratio-161{ height:480px; width:calc(480px * 1.6);}
}
@media screen and (max-width:885px){
  iframe.ratio-169{ height:calc(90vw / 1.777); width:90vw;}
  iframe.ratio-161{ height:calc(90vw / 1.6); width:90vw}
}
@media screen and (min-width:400px){
  iframe.ratio-34{height:480px; width:calc(480px / 1.333);}
}
@media screen and (max-width:400px){
  iframe.ratio-34{height:calc(90vw * 1.333); width:90vw;}
}
@media screen and (min-width:480px){
  iframe.ratio-916{height:480px; width:calc(480px / 1.777);}
}
@media screen and (max-width:480px){
  iframe.ratio-916{height:calc(60vw * 1.777); width:60vw;}
}
@media screen and (min-width:768px){
  iframe.ratio-43{ height:480px; width:calc(480px * 1.333);}
}
@media screen and (max-width:768px){
  iframe.ratio-43{ height:calc(90vw / 1.333); width:90vw; }
}
/*text_h2-h6*/
@media screen{
  h2, h3, h4, h5, h6{ word-break:break-all; line-height:1.1; }
  h2{font-size:200%;}
  h3{font-size:200%;}
  h4{font-size:150%;}
  h5{font-size:100%;}
  h6{font-size:75%;}
  h2{margin:1em 0;}
}
@media screen and (max-width:768px){
  h2, h3{ font-size:140%; }
}
/*text_p-table*/
p, ul, ol, dl, table, button, form, pre, blockquote{
  font-size:100%;
  line-height:2;
  word-break:break-all;
}
p, ul, ol, dl, form, pre, blockquote, time{
  display:inline-block;
  text-align:left;
  margin:0 auto 2em auto;
}
small{ font-size:75%;}
time{ font-size:100%;}
button{ display:table; text-align:center; font-size:100%; }