@charset "utf-8";

/* ----- 初期設定 ----- */
*:root {
    --bgcRGB: rgb(255, 204, 204);
    --bgcRGBa: rgba(255, 204, 204, 0.5);
}

* {
  box-sizing: border-box;
  word-wrap: break-word;
}
body {
  background-color: var(--bgcRGB);
  font-size: 16px;
}
section {
  padding-bottom: 40px;
  margin: 40px 0;
}
nav {
  background-color: #fff;
  width: 100%;
  height: 100%;
  margin: 40px auto 10px;
}
hr {
  border-color: #000;
}
h1 {
  background-color: #ccc;
  width: 100%;
  font-size: 36px;
  color: #fff;
  text-shadow:  1px  1px 1px #000,
               -1px -1px 1px #000;
  text-align: center;
}

*:focus {
/*    outline: none;*/
}
/* ****************************************** */
.caption {
    background-color: #fff;
    width: 90%;
    padding: 10px;
    margin: 0 auto;
} /*キャプション*/
.caption__title {
    width: 300px;
    background-color: var(--bgcRGBa);
    padding: 5px;
    border-left: 5px solid;
    border-right: 5px solid;
    border-color: var(--bgcRGB);
    box-sizing: border-box;
    margin: 0 auto 20px;
    font-size: 20px;
    color: #000;
    text-shadow: 1px 1px 1px #fff;
    text-align: center;
} /*キャプション・タイトル*/
.caption__text {
    border-left: 5px solid;
    border-left-color: var(--bgcRGB);
    padding: 5px 3px 10px 3px;
    box-sizing: border-box;
    margin: 5px 5px 10px;
} /*キャプション・テキスト*/
.caption__link {
    color: var(--bgcRGB);
    text-decoration: underline;
} /*キャプション・テキスト*/
/* ****************************************** */







/* ----- カラー設定 ----- */
.color-float { background-color: #a1f0ff; }
.color-absolute { background-color: #abffa8; }
.color-relative { background-color: #57c753; }
.color-inlineBlock { background-color: #fb91ff; }
.color-table { background-color: #f75f5f; }
.color-inlineTable { background-color: #ff2d2d; }
.color-flex { background-color: #b76fff; }
.color-inlineFlex { background-color: #c43dd0; }
.color-grid { background-color: #fff84b; }
.color-inlineGrid { background-color: #ffd04f; }
.color-translate { background-color: #4f78ff; }
.color-columns { background-color: #a79e9e; }


/* ----- グローバルナビ設定 ----- */
.globalNavi {
  width: 100%;
  background-color: #fff;
}
.globalList {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 0 auto;
}
.globalList__link {
  display: block;
  width: 25%;
  height: 50px;
  padding: 10px;
  border: 1px solid #cdcdcd;
  font-size: 18px;
  color: #fff;
  text-align: center;
  text-shadow:  1px  1px 2px #000,
               -1px -1px 2px #000;
}


/* ----- フッターリンク設定 ----- */
h2,
.fottorLink a {
  display: block;
  padding: 10px;
  margin-bottom: 10px;
  font-size: 24px;
  color: #fff;
  text-align: center;
  text-shadow:  1px  1px 2px #000,
               -1px -1px 2px #000;
}


/* ----- 基本構造 ----- */
section {
  background-color: #fff;
}
[class*="list"] {
  background-color: #f00;
  width: 90%;
  height: 50px;
}
[class*="item"] {
  background-color: #7c7c7c;
  border-style: solid;
  border-color: #000;
  border-top-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 0.5px;
  border-right-width: 0.5px;
}
[class*="item"]:first-child {
  border-left-width: 1px;
}
[class*="item"]:last-child {
  border-right-width: 1px;
}
.link {
  display: block;
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: 3em;
}
.link:hover {
  background-color: #000;
  color: #fff;
}


/* ----- float 版 ----- */
.list-float {
  margin: 0 auto;
}
.clearfix:after {
  content: "";
  display: block;
  clear: both;
}
.item-float {
  float: left;
  width: 16.667%;
  height: 100%;
}


/* ----- absolute 版 ----- */
.list-absolute {
  margin: 0 auto;
  position: relative;
}
.item-absolute {
  position: absolute;
  top: 0;
  width: 16.667%;
}
.item-absolute:nth-of-type(1) {
  left: 0;
}
.item-absolute:nth-of-type(2) {
  left: 16.667%;
}
.item-absolute:nth-of-type(3) {
  left: 33.334%;
}
.item-absolute:nth-of-type(4) {
  left: 50.001%;
}
.item-absolute:nth-of-type(5) {
  left: 66.668%;
}
.item-absolute:nth-of-type(6) {
  left: 83.335%;
}


/* ----- relative 版 ----- */
.list-relative {
  margin: 0 auto;
}
.item-relative {
  position: relative;
  width: 16.667%;
}
.item-relative:nth-of-type(1) {
  top: 0;
  left: 0;
}
.item-relative:nth-of-type(2) {
  top: -50px;
  left: 16.667%;
}
.item-relative:nth-of-type(3) {
  top: -100px;
  left: 33.334%;
}
.item-relative:nth-of-type(4) {
  top: -150px;
  left: 50.001%;
}
.item-relative:nth-of-type(5) {
  top: -200px;
  left: 66.668%;
}
.item-relative:nth-of-type(6) {
  top: -250px;
  left: 83.335%;
}


/* ----- inline-block 版 ----- */
.list-inlineBlock {
  font-size: 0;
  margin: 0 auto;
}
.item-inlineBlock {
  display: inline-block;
  width: 16.667%;
  height: 100%;
  font-size: 16px;
}


/* ----- table 版 ----- */
.list-table {
  display: table;
  margin: 0 auto;
}
.item-table {
  display: table-cell;
}


/* ----- inline-table 版 ----- */
.navi-inlineTable {
  text-align: center;
}
.list-inlineTable {
  display: inline-table;
}
.item-inlineTable {
  display: table-cell;
}


/* ----- flex 版 ----- */
.list-flex {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}
.item-flex {
  width: 100%;
  height: 100%;
}


/* ----- inline-flex 版 ----- */
.navi-inlineFlex {
  text-align: center;
}
.list-inlineFlex {
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.item-inlineFlex {
  width: 100%;
}


/* ----- grid 版 ----- */
.list-grid {
  display: grid;
  grid-template-areas: "g1 g2 g3 g4 g5 g6";
  margin: 0 auto;
}
.item-grid {
  width: 100%;
  height: 100%;
}
.item-grid:nth-of-type(1) {
  grid-area: g1;
}
.item-grid:nth-of-type(2) {
  grid-area: g2;
}
.item-grid:nth-of-type(3) {
  grid-area: g3;
}
.item-grid:nth-of-type(4) {
  grid-area: g4;
}
.item-grid:nth-of-type(5) {
  grid-area: g5;
}
.item-grid:nth-of-type(6) {
  grid-area: g6;
}


/* ----- inline-grid 版 ----- */
.navi-inlineGrid {
  text-align: center;
}
.list-inlineGrid {
  display: inline-grid;
  grid-template-areas: "g1 g2 g3 g4 g5 g6";
}
.item-inlineGrid {
  width: 100%;
  height: 100%;
}
.item-inlineGrid:nth-of-type(1) {
  grid-area: g1;
}
.item-inlineGrid:nth-of-type(2) {
  grid-area: g2;
}
.item-inlineGrid:nth-of-type(3) {
  grid-area: g3;
}
.item-inlineGrid:nth-of-type(4) {
  grid-area: g4;
}
.item-inlineGrid:nth-of-type(5) {
  grid-area: g5;
}
.item-inlineGrid:nth-of-type(6) {
  grid-area: g6;
}


/* ----- transform 版 ----- */
.navi-translate {
  text-align: center;
}
.list-translate {
  margin: 0 auto;
}
.item-translate {
  width: 16.7%;
  height: 100%;
}
.item-translate:nth-of-type(1) {
  transform: translate(0, 0);
}
.item-translate:nth-of-type(2) {
  transform: translate(100%, -50px);
}
.item-translate:nth-of-type(3) {
  transform: translate(200%, -100px);
}
.item-translate:nth-of-type(4) {
  transform: translate(300%, -150px);
}
.item-translate:nth-of-type(5) {
  transform: translate(400%, -200px);
}
.item-translate:nth-of-type(6) {
  transform: translate(500%, -250px);
}



/* ----- columns 版 ----- */
.navi-columns {
  text-align: center;
}
.list-columns {
  margin: 0 auto;
  columns: auto 6;
  column-gap: 0;
}