@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Teko:500&display=swap');
/*
'Teko' is licensed under the Open Font License.
https://fonts.google.com/specimen/Teko
*/

html {
  background: transparent;
  font-size: 62.5%;
}

body {
  min-height: 100vh;
  background: #ffffff;
  color: #2a5530;
  font-size: 1.1rem;
  font-family: 'メイリオ', 'ヒラギノ角ゴ', sans-serif;
  letter-spacing: 0.2em;
  line-height: 180%;
}

a {
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

h2 {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.5em 0;
  margin: 1em 0;
  font-family: 'Teko', sans-serif;
  font-size: 1.5em;
  font-weight: normal;
  letter-spacing: 0.1em;
  overflow-x: hidden;
  text-align: center;
}



h2::before,
h2::after {
  flex-grow: 1;
  content: '';
  display: inline-block;
  border-top: solid 2px #cccccc;
}

h2::before {
  margin-right: 2rem;
}

h2::after {
  margin-left: 2rem;
}

h2.Nihongo {
  font-size: 1.2em;
}

h3 {
  display: inline-block;
  line-height: 2em;
  border-left: 0.5em solid #5a7c61;
  font-size: 1.2em;
  padding: 2px 1em 0px 1em;
  margin: 2em 0px 0.5em 1.5rem;
  background: #dae9dc;
}

em {
  background: #ffdcdc;
  font-style: normal;
}


p {
  padding: 0 1em;
}

section,
.linkList {
  padding-top: 2em;
  margin-bottom: 1em;
}


.wrap {
  margin: 0vh auto 5vh;
  width: 90vw;
  max-width: 500px;
}

.wrap a {
  color: #cc8282;
}

.wrap p {
  padding: 0 2em 1em 2em;
}


input[type],
textarea,
button,
select {
  border: none;
  color: inherit;
  font-family: inherit;
  font-size: 100%;
  letter-spacing: 0.1em;
}

textarea,
input[type="text"] {
  padding: 0.2em;
  border: solid 1px #999999;
}

input[type="submit"] {
  padding: 0.2em 0.5em;
  background: #5a7c61;
  color: #ffffff;
}





.mainNav {
  /* background: #dfe1e7;*/
  color: #5a7c61;
}


header {
  text-align: center;
}

.mainNav_wrap {
  padding: 1em;
  margin: 15vw auto 0;
  width: 80%;
  max-width: 500px;
  background: #b3dbbb;
}

.mainNav_frame {
  padding: 1em;
  border: solid 2px #ffffff;
}

.siteName {
  padding: 1em;
  box-sizing: border-box;
}

h1 {
  padding-bottom: 0.5em;
  font-size: 1.2em;
}

.siteInfo {
  font-size: 0.8rem;
  padding: 1em 1em 0;
  margin-top: 1em;
  border-top: solid 2px #ffffff;
}

.mainNav {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  left: 0;
  top: -15vmin;
  padding: 0.5em 0;
  width: 100vw;
  height: 15vmin;
  background: #5a7c61;
  font-family: 'Teko', sans-serif;
  transition: 0.1s;
  z-index: 4;
}

.mainNav li {
  margin: 0 1em;
}

.mainNav li a {
  padding: 0.5em 0.5em;
  color: #ffffff;
  font-size: 1.5em;
}


/* メニュー開閉 */
.mainNav,
.click,
.trigger {
  transition: 0.2s;
}

.click {
  display: block;
  position: fixed;
  right: 2em;
  top: 0;
  padding: 1em 2em 0.5em;
  height: 2em;
  background: #5a7c61;
  border-bottom-left-radius: 1em;
  border-bottom-right-radius: 1em;
  color: #ffffff;

  z-index: 4;
}

.trigger {
  width: 1em;
}

.active .click {
  position: fixed;
  top: 15vmin;

}

.active .trigger {
  transform: rotate(180deg);
}

.active .mainNav {
  position: fixed;
  top: 0;

}

.linkList a {
  color: #0c2010;
}

.link li {
  margin: 20% 0;
}

.link li:last-of-type {
  margin: 20% 0 0;
}

.linksHead {
  margin-bottom: -10px;
}

.link li a {
  /*  */
  display: flex;
  /* ※↑重なり順を指定するのに必要なので削除非推奨 */
  position: relative;
  margin: 2em 0;
  min-height: 10em;
  background: #b3dbbb;
  border-radius: 1rem;
  z-index: 1;
}

.link li a::before {
  content: '';
  position: absolute;
  left: 1em
    /*calc(50% - 5vw - 1rem)*/
  ;
  top: -3em;
  width: 10em;
  height: 10em;
  background: #666666;
  border: solid 1rem #b3dbbb;
  ;
  border-radius: 50%;
}



/* Deepリンク */
#deep {
  background: #3f5844;
  color: #c0c0c0;
}

.link li a#deep::before {
  border: solid 1rem #3f5844;
}

#deep .serialInfo {
  font-weight: bolder;
}

#deep .serialTitle {
  background: rgba(255, 255, 255, 0.2);
}

#deep .serialInfo div span {
  background: rgba(255, 255, 255, 0.2);
}



.serialInfo {
  padding: 2em;
  width: 100%;
  font-size: 1rem;
  text-align: right;
  z-index: 3;
}

.serialTitle {
  padding: 0.2em 0.5em;
  background: rgba(255, 255, 255, 0.5);
  font-size: 1.2rem;
  transition: 0.3s ease-out;
  font-weight: bolder;
}

.serialInfo div {
  padding-top: 1em;
}

.serialInfo div span {
  display: inline;
  background: rgba(255, 255, 255, 0.5);
  line-height: 2em;
  transition: 0.3s ease-out;
}

li.linkBox_1 a::before {
  background: url('../img/otama_re.png') center 70% / cover no-repeat #b3dbbb;
}

li.linkBox_2 a::before {
  background: url('../img/sumikaeru.png') center / cover no-repeat #b3dbbb;
}

li.linkBox_3 a::before {
  background: url('../img/gakaeru.jpg') center / cover no-repeat #b3dbbb;
}

li.linkBox_4 a::before {
  background: url('../img/kaeruko.png') center / cover no-repeat #b3dbbb;
}

li.linkBox_5 a::before {
  background: url('../img/seisai-no-karyudo2.png') center / cover no-repeat #b3dbbb;
}

li.linkBox_6 a::before {
  background: url('../img/hun_airou.png') center / cover no-repeat #b3dbbb;
}

li.linkBox_7 a::before {
  background: url('../img/yuki.png') center / cover no-repeat #b3dbbb;
}

li.linkBox_8 a::before {
  background: url('../img/inosumi.png') center / cover no-repeat #b3dbbb;
}



li.linkBox_ a::before {
  background: #3f5844;
}


/* introリスト */

.intro {
  display: flex;
  color: #39533e;
  margin-bottom: 2em;
  justify-content: center;
}


.itemization {
  min-width: 200px;
  max-width: max-content;
}


.list li {
  position: relative;
  padding-left: 0.5em;
  padding-bottom: 0.2em;
}

.list li::after {
  display: block;
  content: '';
  position: absolute;
  top: 0.5em;
  left: -1em;
  width: 7px;
  height: 7px;
  background-color: #90bd99;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

span#sukebe {
  color: #d5ddd7;
}


/* index more */

.more {
  padding: 0 3em;
}

.more li {
  position: relative;
  padding-left: 0.5em;
  padding-bottom: 0.2em;
  justify-content: center;
  margin-bottom: 0.5em;
}

.more li::after,
.more li::before {
  display: block;
  content: '';
  position: absolute;
}

.more li::after {
  top: 6px;
  left: -1em;
  width: 6px;
  height: 6px;
  border-right: 1px solid #666;
  border-bottom: 1px solid #666;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.more li::before {
  top: 9px;
  left: -1.025em;
  width: 8px;
  height: 1px;
  background-color: #666;
}



/* 絵文字紹介欄 */

.word {
  display: flex;
  margin-bottom: 3em;
}

.word b {
  font-size: 1.2em;
  padding-left: 1em;
}

.word img {
  padding-left: 2em;
  width: 64px;
  height: 64px;
}

.word p {
  padding: 0 2em 1em 2em;
  max-width: 70%;
}


.thanks {
  padding: 0 4em;
}

.thanks ul li {
  position: relative;
  padding-left: 0.5em;
  padding-bottom: 0.2em;
}

.thanks ul li::after {
  display: block;
  content: '';
  position: absolute;
  top: 0.5em;
  left: -1em;
  width: 7px;
  height: 7px;
  background-color: #90bd99;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}




/* Footer */

.return {
  padding-top: 5em;
  clear: left;
  text-align: center;
}


.back {

  position: fixed;
  right: 1em;
  bottom: 1em;
  z-index: 1;
}

.back a {
  display: block;
  padding: 1rem;
  width: 1em;
  height: 1em;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  color: #ffffff;
  font-size: 1.2em;
  text-align: center;
  line-height: 1.2em;
}


footer {
  display: none;
  margin: 5vw 0;
  font-size: .9rem;
  color: #bbbbbb;
  text-align: center;
}

footer p a {
  color: #999999;
}


.right {
  text-align: right;
}

div#back {
  margin-top: 5em;
  text-align: center;
}