/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
html {
  font-family: sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block;
}

audio, canvas, progress, video {
  display: inline-block;
  vertical-align: baseline;
}

audio:not([controls]) {
  display: none;
  height: 0;
}

[hidden], template {
  display: none;
}

a {
  background-color: transparent;
}

a:active, a:hover {
  outline: 0;
}

abbr[title] {
  border-bottom: 1px dotted;
}

b, strong {
  font-weight: 700;
}

dfn {
  font-style: italic;
}

h1 {
  font-size: 2em;
  margin: .67em 0;
}

mark {
  background: #ff0;
  color: #000;
}

small {
  font-size: 80%;
}

sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -.5em;
}

sub {
  bottom: -.25em;
}

img {
  border: 0;
}

svg:not(:root) {
  overflow: hidden;
}

figure {
  margin: 1em 40px;
}

hr {
  box-sizing: content-box;
  height: 0;
}

pre {
  overflow: auto;
}

code, kbd, pre, samp {
  font-family: monospace,monospace;
  font-size: 1em;
}

button, input, optgroup, select, textarea {
  color: inherit;
  font: inherit;
  margin: 0;
}

button {
  overflow: visible;
}

button, select {
  text-transform: none;
}

button, html input[type=button], input[type=reset], input[type=submit] {
  -webkit-appearance: button;
  cursor: pointer;
}

button[disabled], html input[disabled] {
  cursor: default;
}

button::-moz-focus-inner, input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

input {
  line-height: normal;
}

input[type=checkbox], input[type=radio] {
  box-sizing: border-box;
  padding: 0;
}

input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {
  height: auto;
}

input[type=search] {
  -webkit-appearance: textfield;
  box-sizing: content-box;
}

input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

fieldset {
  border: 1px solid silver;
  margin: 0 2px;
  padding: .35em .625em .75em;
}

legend {
  border: 0;
  padding: 0;
}

textarea {
  overflow: auto;
}

optgroup {
  font-weight: 700;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td, th {
  padding: 0;
}

@keyframes show {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

html {
  font-size: 62.5%;
  width: 100%;
}

body {
  position: relative;
  right: 0;
  width: 100%;
  font-size: 1.6rem;
  font-family: "Talking", sans-serif;
  letter-spacing: -0.05em;
  line-height: 1.25;
  color: #4D4D4D;
  background: linear-gradient(to bottom, #2980DC, #2980DC 50%, #fff 50%, #fff);
  background-size: 300px 300px;
}

html, body {
  min-width: 100%;
  height: 100%;
}

a {
  text-decoration: none;
}

a:link {
  color: #2d4595;
}

a:visited {
  color: #2980dc;
}

a:hover {
  color: #0d9431;
}

a:hover img {
  opacity: .5;
}

h1, h2, h3, h4, h5, h6, div, p, ul, li {
  margin: 0;
  padding: 0;
  font-size: 1.6rem;
  font-weight: normal;
}

ul, li {
  list-style: none;
}

.pc {
  display: block !important;
}

.sp {
  display: none !important;
}

@media screen and (max-width: 480px) {
  br {
    display: none !important;
  }
  br.br {
    display: block !important;
  }
  br.brsp {
    display: block !important;
  }
  .pc {
    display: none !important;
  }
  .sp {
    display: block !important;
  }
}

.head, .archive__head {
  width: 832px;
  height: 464px;
  margin: 0 auto;
  background-image: url("../images/bg_letter.png");
  background-repeat: no-repeat;
  position: relative;
}

.head .hobonichi, .archive__head .hobonichi {
  position: absolute;
  right: -122px;
  top: 148px;
  z-index: 1000;
  width: 240px;
  -ms-transform: rotate(90deg);
      transform: rotate(90deg);
}

.head .hobonichi svg, .archive__head .hobonichi svg {
  fill: #2d4595;
}

.head .title, .archive__head .title {
  position: relative;
  top: 35px;
  left: 35px;
}

.head .profile, .archive__head .profile {
  position: relative;
  top: -50px;
  left: 25px;
}

.head .profile a:before, .archive__head .profile a:before {
  content: '';
  background-image: url("../images/icon-profile.png");
  background-repeat: no-repeat;
  background-size: 105px 75px;
  width: 105px;
  height: 75px;
  display: block;
}

.head .intro, .archive__head .intro {
  position: absolute;
  right: 63px;
  top: 65px;
  font-size: 1.6rem;
  line-height: 2;
}

.archive__head {
  background: none;
  height: auto;
  padding: 10px 0 0;
}

.archive__head .hobonichi {
  position: absolute;
  right: -132px;
  top: 128px;
  z-index: 1000;
  width: 240px;
  -ms-transform: rotate(90deg);
      transform: rotate(90deg);
}

.archive__head .hobonichi svg {
  fill: #2d4595;
}

.profile__header {
  padding: 20px;
  line-height: 1.5;
}

.profile__title {
  text-align: center;
  padding: 10px 0;
}

.profile__text {
  padding: 20px;
  line-height: 1.5;
}

.illust {
  width: 580px;
  padding: 10px 10px 3px 10px;
  background-color: #fff;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
  margin: 50px auto;
  overflow: hidden;
}

.illust.yoko {
  width: 800px;
}

.illust.archive {
  margin: 0 auto 100px;
}

.illust__img {
  margin-bottom: 10px;
}

.illust__img img {
  width: 100%;
}

.illust__caption {
  text-align: center;
  line-height: 2;
}

.illust__title {
  font-size: 3.7rem;
}

.illust__date {
  padding: 10px 0 0;
  font-size: 1.3rem;
  text-align: right;
}

.column {
  background-image: url("../images/bg_column.png");
  background-repeat: repeat-y;
  width: 650px;
  margin: 0 auto;
  padding-bottom: 50px;
  position: relative;
}

.column:before {
  content: '';
  width: 136px;
  height: 69px;
  background-image: url("../images/tape_l@2x.png");
  background-size: 136px 69px;
  background-repeat: no-repeat;
  display: block;
  position: absolute;
  left: -43px;
  top: -35px;
  opacity: .7;
}

.column:after {
  content: '';
  width: 132px;
  height: 98px;
  background-image: url("../images/tape_r@2x.png");
  background-size: 132px 98px;
  background-repeat: no-repeat;
  display: block;
  position: absolute;
  right: -60px;
  top: -43px;
  opacity: .7;
}

.column__header {
  padding: 30px 0;
}

.column__title {
  text-align: center;
}

.column__contents {
  padding: 0 18px;
}

.column__text {
  background-image: url("../images/bg_column_text.png");
  background-repeat: repeat-y;
  line-height: 2.46;
  text-align: center;
}

.column__profile {
  padding: 10px 18px;
  text-align: right;
  font-size: 1.4rem;
}

.column__profile a:before {
  content: '';
  border-top: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 8px solid #2D4595;
  display: inline-block;
  position: relative;
  top: 2px;
}

.column__profile a:hover:before {
  border-left: 8px solid #0d9431;
}

.weather {
  width: 500px;
  height: 500px;
  margin: 100px auto;
  background-color: #fff;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
  border-radius: 250px;
  position: relative;
}

.weather__title {
  position: absolute;
  text-align: center;
  left: 50%;
  top: 47px;
  -ms-transform: translate(-50%, 0);
      transform: translate(-50%, 0);
  z-index: 100;
  width: 100%;
}

.weather__title-en {
  font-size: 3rem;
  color: #2E318C;
  font-family: garamond, "Lusitana", "Talking", serif;
}

.weather__title-ja {
  font-size: 1.8rem;
  letter-spacing: 0.3em;
}

.weather__animation {
  z-index: 1;
  position: absolute;
  left: 50%;
  top: 47%;
  -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
}

.weather__animation .weather-A, .weather__animation .weather-B, .weather__animation .weather-C, .weather__animation .weather-D,
.weather__animation .weather-E, .weather__animation .weather-F, .weather__animation .weather-G, .weather__animation .weather-H,
.weather__animation .weather-I, .weather__animation .weather-J, .weather__animation .weather-K, .weather__animation .weather-L,
.weather__animation .weather-M, .weather__animation .weather-N, .weather__animation .weather-O {
  display: none;
}

.weather__name {
  z-index: 50;
  position: absolute;
  left: 50%;
  top: 79%;
  text-align: center;
  -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
  line-height: 1;
  width: 100%;
}

.weather__name-en {
  font-size: 3rem;
  color: #2E318C;
  font-family: garamond, "Lusitana", "Talking", serif;
  margin-bottom: 10px;
}

.weather__name-ja {
  font-size: 1.8rem;
  letter-spacing: 0.2em;
}

.weather__info {
  display: table;
  color: #2E318C;
  font-family: garamond, "Lusitana", "Talking", serif;
  position: absolute;
  left: 52%;
  top: 91%;
  text-align: center;
  -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
  height: 27px;
  line-height: 1;
}

.weather__info__temp {
  font-size: 3.1rem;
  display: table-cell;
  padding-right: 18px;
  border-right: 1px solid #2E318C;
  vertical-align: middle;
}

.weather__info__temp .unit {
  font-size: 1.7rem;
  margin-left: 5px;
  line-height: 27px;
}

.weather__info__time {
  font-size: 3.1rem;
  display: table-cell;
  padding-left: 18px;
  vertical-align: middle;
}

.weather__info__time .unit {
  font-size: 1.7rem;
  margin-left: 5px;
  line-height: 27px;
}

.footer {
  width: 740px;
  padding: 10px 40px 3px 40px;
  background-color: #fff;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
  margin: 50px auto 0;
  letter-spacing: 0.2em;
}

.footer a {
  color: #4d4d4d;
}

.footer a:hover {
  color: #000;
}

.footer__ctrl {
  display: table;
  width: 100%;
  margin: 20px 0 60px;
}

.footer__ctrl li {
  display: table-cell;
  text-align: center;
  vertical-align: top;
  width: 32%;
}

.footer__ctrl li:nth-child(2) {
  width: 34%;
}

.footer__ctrl li p {
  font-size: 1.8rem;
}

.footer__archive__title {
  text-align: center;
  padding: 20px 0;
  font-size: 1.8rem;
}

.footer__archive__list {
  width: 100%;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.footer__archive__list li {
  width: 126px;
  height: 220px;
  margin-right: 27px;
  text-align: center;
}

.footer__archive__list li:nth-child(5n) {
  margin-right: 0;
}

.footer__archive__list li p {
  font-size: 1.2rem;
  letter-spacing: 0.1em;
}

.footer__sns {
  width: 100%;
  display: table;
}

.footer__sns li {
  display: table-cell;
  text-align: center;
}

.footer__copyright {
  display: block;
  text-align: center;
  padding: 50px 0;
  font-size: 1.5rem;
  font-family: garamond, "Lusitana", "Talking", serif;
  color: #2E318C;
}

@media screen and (max-width: 959px) {
  .archive__head {
    width: 100%;
    padding: 0;
  }
  .archive__head .archive__title img {
    width: 90%;
    margin: 20px auto 10px;
  }
}

@media screen and (max-width: 600px) {
  .all {
    width: calc(100% - 24px);
    margin: 0 auto;
    background-color: #fff;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
  }
  .head, .archive__head {
    width: 100%;
    height: auto;
    margin: 0 auto;
    background-image: none;
    background-color: #fff;
    position: relative;
  }
  .head .hobonichi, .archive__head .hobonichi {
    position: relative;
    right: auto;
    top: 0;
    z-index: 1000;
    width: 100%;
    text-align: center;
    padding: 3px 0;
    -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    background-color: #2d4595;
  }
  .head .hobonichi a svg, .archive__head .hobonichi a svg {
    width: 238.824px;
    height: auto;
    fill: #fff;
  }
  .head .title, .archive__head .title {
    position: relative;
    top: auto;
    left: auto;
    text-align: center;
    width: 80%;
    margin: 10px auto 0;
  }
  .head .title img, .archive__head .title img {
    width: 100%;
  }
  .head .profile, .archive__head .profile {
    position: relative;
    top: -20px;
    left: 0;
  }
  .head .profile a, .archive__head .profile a {
    font-size: 1.4rem;
    display: block;
    line-height: 1.5;
    padding-left: 100px;
    padding-top: 20px;
    padding-bottom: 20px;
  }
  .head .profile a:before, .archive__head .profile a:before {
    content: '';
    background-image: url("../images/icon-profile.png");
    background-repeat: no-repeat;
    background-size: 80px 59px;
    width: 80px;
    height: 59px;
    display: inline-block;
    vertical-align: middle;
    position: absolute;
    left: 10px;
    top: 0;
  }
  .head .intro, .archive__head .intro {
    position: relative;
    right: auto;
    top: 0;
    font-size: 1.6rem;
    line-height: 2;
    width: 90%;
    margin: 0 auto;
  }
  .illust {
    width: 100%;
    padding: 10px 0 3px;
    background-color: #fff;
    box-shadow: none;
    margin: 50px auto;
  }
  .illust.yoko {
    width: 100%;
  }
  .illust__img {
    margin-bottom: 10px;
  }
  .illust__img img {
    width: 100%;
  }
  .illust__caption {
    width: calc(100% - 20px);
    padding: 0 10px;
    text-align: left;
    line-height: 2;
  }
  .illust__title {
    font-size: 2.8rem;
    text-align: center;
  }
  .illust__date {
    padding: 10px 0 0;
    font-size: 1.3rem;
    text-align: right;
  }
  .column {
    width: 100%;
    margin: 0 auto;
    padding-bottom: 50px;
  }
  .column:before, .column:after {
    content: none;
  }
  .column__header {
    padding: 30px 0;
  }
  .column__title {
    text-align: center;
  }
  .column__title img {
    width: 70%;
  }
  .column__contents {
    padding: 0 18px;
  }
  .column__text {
    background-image: url("../images/bg_column_text.png");
    background-repeat: repeat-y;
    line-height: 2.46;
    text-align: left;
  }
  .column__profile {
    padding: 10px 18px;
    text-align: right;
    font-size: 1.4rem;
  }
  .column__profile a:before {
    content: '';
    border-top: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 8px solid #2D4595;
    display: inline-block;
    position: relative;
    top: 2px;
  }
  .column__profile a:hover:before {
    border-left: 8px solid #0d9431;
  }
  .weather {
    width: 100%;
    height: 220px;
    margin: 120px auto 200px;
    background-color: #fff;
    box-shadow: none;
    border-radius: 0;
    position: relative;
  }
  .weather__title {
    position: absolute;
    text-align: center;
    left: 50%;
    top: -91px;
    -ms-transform: translate(-50%, 0);
        transform: translate(-50%, 0);
    z-index: 100;
    width: 100%;
  }
  .weather__title-en {
    font-size: 3.8rem;
    color: #2E318C;
    font-family: garamond, "Lusitana", "Talking", serif;
  }
  .weather__title-ja {
    font-size: 1.8rem;
    letter-spacing: 0.3em;
  }
  .weather__animation {
    z-index: 1;
    position: absolute;
    left: 50%;
    top: 47%;
    -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
  }
  .weather__name {
    z-index: 50;
    position: absolute;
    left: 50%;
    top: 270px;
    text-align: center;
    -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    line-height: 1;
  }
  .weather__name-en {
    font-size: 3.4rem;
    color: #2E318C;
    font-family: garamond, "Lusitana", "Talking", serif;
  }
  .weather__name-ja {
    font-size: 1.8rem;
    letter-spacing: 0.2em;
  }
  .weather__info {
    display: table;
    color: #2E318C;
    font-family: garamond, "Lusitana", "Talking", serif;
    position: absolute;
    left: 52%;
    top: 328px;
    text-align: center;
    -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    height: 27px;
    line-height: 1;
  }
  .weather__info__temp {
    font-size: 3.1rem;
    display: table-cell;
    padding-right: 18px;
    border-right: 1px solid #2E318C;
    vertical-align: middle;
  }
  .weather__info__temp .unit {
    font-size: 1.7rem;
    margin-left: 5px;
    line-height: 27px;
  }
  .weather__info__time {
    font-size: 3.1rem;
    display: table-cell;
    padding-left: 18px;
    vertical-align: middle;
  }
  .weather__info__time .unit {
    font-size: 1.7rem;
    margin-left: 5px;
    line-height: 27px;
  }
  .footer {
    width: 100%;
    padding: 10px 0 3px;
    text-align: center;
    box-shadow: none;
    margin: 50px auto 0;
  }
  .footer__ctrl {
    display: table;
    width: 100%;
    margin: 20px 0;
  }
  .footer__ctrl li {
    display: table-cell;
    text-align: center;
    vertical-align: top;
    width: 33%;
  }
  .footer__ctrl li p {
    font-size: 1.5rem;
  }
  .footer__ctrl li img {
    width: 100%;
  }
  .footer__ctrl li:first-child img, .footer__ctrl li:last-child img {
    width: 80%;
  }
  .footer__archive {
    display: block;
    width: calc(100% - 20px);
    margin: 0 auto;
    text-align: center;
  }
  .footer__archive__title {
    text-align: center;
    padding: 20px 0;
    font-size: 1.8rem;
  }
  .footer__archive__list {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: left;
        justify-content: left;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    margin: 0 auto;
  }
  .footer__archive__list li {
    width: calc((100% - 40px) / 3);
    height: 200px;
    margin-right: 20px;
  }
  .footer__archive__list li:nth-child(5n) {
    margin-right: 20px;
  }
  .footer__archive__list li:nth-child(3n) {
    margin-right: 0;
  }
  .footer__archive__list li img {
    width: 100%;
  }


  .footer__archive__list li p {
    font-size: 1.4rem;
  }
  .footer__sns {
    width: calc(100% - 20px);
    display: table;
    margin: 0 auto;
  }
  .footer__sns li img {
    width: 100%;
  }
  .footer__copyright {
    display: block;
    text-align: center;
    padding: 50px 0;
    font-size: 1rem;
    font-family: garamond, "Lusitana", "Talking", serif;
    color: #2E318C;
  }
}