@charset "UTF-8";

/***********************/
/*     Font Family     */
/***********************/
.zen-kaku-gothic-antique-regular {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.kaisei-decol-regular {
  font-family: "Kaisei Decol", serif;
  font-weight: 400;
  font-style: normal;
}

/****** END Font Family *****/

/***************************/
/*     Global Variable     */
/***************************/

/******************/
/*     Common     */
/******************/
* {
  box-sizing: content-box;
  text-align: center;
}

:root {
  font-size: 17px;
  --frame-inner-color: #333333;
  --frame-outer-color: mediumslateblue;
}

html {
  background-image: url("../data/bg.png");
  background-color: rgba(255,255,255,0.9);
  background-blend-mode: lighten;
  background-repeat: repeat;

  overflow-x: hidden;
  overflow-y: auto;
}

body {
  font-family: "Zen Kaku Gothic Antique", sans-serif;

  position: relative;
  margin: 0; 
  padding: 0 10px;
  font-size: 1rem;
}

div.smartphone-frame {
  position: relative;
  max-width: 450px;
  margin: 20px auto;
  padding: 1em;
  background: ivory;

  border: 15px solid var(--frame-inner-color);
  border-radius: 30px;
  box-shadow: 0 0 0 7px var(--frame-outer-color);
}


.smartphone-frame::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 290px;
  height: 30px;
  background: var(--frame-inner-color);
  border-bottom-left-radius: 17px;
  border-bottom-right-radius: 17px;
  z-index: 10;
}




main {
}

footer {
  padding-top: 3em;
  padding-bottom: 2em;
}

address {
 font-style: normal; 
}
/***** end common *****/

h1, h2, h3 {
  font-family: "Kaisei Decol", serif;
}

h1 {
  font-size: 2rem;
}

h2 {
  font-size: 1.7rem;
  margin-top: 2em;
}

/******************/
/*     TITLE      */
/******************/
.marquee-left {
  display: flex;
  line-height: 1;
  overflow: hidden;
  white-space: nowrap;
}

.marquee-left span {
  font-family: "Kaisei Decol", serif;

  display: inline-block;
  padding-right: 2rem;
  vertical-align: middle;
  animation: marquee-left 15s steps(50, end) infinite;
}

.marquee-left > span > img {
  height: 1em;
  width: auto;
  vertical-align: middle;
}

@keyframes marquee-left {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

.text-box {
  margin: 50px auto 0;
  --opacity: 0.4;
  overflow: hidden;
  border: double 4px black;

  background-color: white;

  background-image: linear-gradient(
    135deg,
    rgba(255, 0, 0, var(--opacity)),
    rgba(255, 165, 0, var(--opacity)),
    rgba(255, 255, 0, var(--opacity)),
    rgba(0, 128, 0, var(--opacity)),
    rgba(0, 0, 255, var(--opacity)),
    rgba(75, 0, 130, var(--opacity)),
    rgba(238, 130, 238, var(--opacity)),
    rgba(255, 0, 0, var(--opacity))
  );

  background-size: 500% 500%;
  background-repeat: repeat;
  animation: rainbowMove 4s steps(100, start) infinite;
}

@keyframes rainbowMove {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 100% 100%;
  }
}
/***** end TITLE ******/


/***** ul li *****/
ul {
  display: inline-block;
  text-align: left;
  margin: 0 auto;
}
/***** end ul li *****/

figure {
  margin: 3em 0;
}

/***** Table ******/
table {
  margin-bottom: 3em;
  max-width: 400px;
  width: 100%;
}

th, td{
  padding: 0 0.5em;
  font-weight:normal;
  vertical-align: middle;
  min-width: 2em;
  word-break: break-word;
}

td img {
  width: 100%;
  display: block;
  margin: 0.5em 0;
}

th, td {
  text-align: left;
}

th:first-child,
td:first-child {
}


div.display-table-row {
  display: table;
  margin: 0 auto;
  border: 1px solid;
  border-radius: 15px;
  padding: 1em;
}

div.display-table-row div:first-of-type p {
  padding-top: 0;
}

div.display-table-row div {
  display: table-row;
}

div.display-table-row p {
  display: table-cell;
  padding-top: .8em;
  line-height: 1.3em;
  text-align: left;
  font-size: 1.1rem;
}

div.display-table-row p:first-of-type {
  white-space: nowrap;
}


summary {
  font-size: 1.5rem;
  margin: 0.5em 0;
}



thead tr { background-color: rgba(255, 105, 180, 0.5); }
tbody tr:nth-child(6n+1) { background-color: rgba(196, 0, 1, 0.5); }
tbody tr:nth-child(6n+2) { background-color: rgba(228, 140, 32, 0.5); }
tbody tr:nth-child(6n+3) { background-color: rgba(249, 237, 55, 0.5); }
tbody tr:nth-child(6n+4) { background-color: rgba(73, 128, 45, 0.5); }
tbody tr:nth-child(6n+5) { background-color: rgba(44, 77, 252, 0.5); }
tbody tr:nth-child(6n+6) { background-color: rgba(101, 1, 133, 0.5); }


/***** Responsive *****/
@media screen and (max-width:850px) {

  body {
    margin-top: 20px;
  }

  td img {
    max-width: 100%;
  }
}

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

  div.smartphone-frame {
    padding-top: 0;
    border: none;
    box-shadow: none;
    background: none;
  }

  div.smartphone-frame::before {
    width: 0px;
    height: 0px;
  }

  table {
    width: 100%;
    max-width: 100%;
    table-layout: auto;
  }
}