@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/*eaf1f5*/;
 color: #2a5530;
 font-size: 1.3rem;
 font-family: 'メイリオ', 'ヒラギノ角ゴ', sans-serif;
 letter-spacing: 0.2em;
 line-height: 180%;
}
a {
 text-decoration: none;
}
ul,ol {
 list-style: none;
}

em {
 background: #ffdcdc;
 font-style: normal;
}
h2 {
 display: flex;
  justify-content: center;
  align-items: center;
 padding: 0.5em 0;
 margin: 1em 0 2em;
 font-family: 'Teko', sans-serif;
 font-size: 1.5em;
 font-weight: normal;
 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: 3rem;
}
h2::after {
 margin-left: 3rem;
}
h2.Nihongo {
 font-size: 1.3em;
}
.right {
 text-align: right;
}

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

p {
 padding: 0 2em;
}
section {
 margin: 5vh 0 10vh;

}


.wrap {
 margin: 0 auto 10vh;
  width: 60vw;
  min-width: 500px;
  max-width: 1000px;
}



.wrap a {
 color: #cc8282;

}


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


main {
 display: block;


}




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.5em 1em;
  background: #2b3a7b;
  color: #ffffff;
}







h1 {
 padding: 0.5em 0;
 font-size: 2em;
}
.siteInfo {
 font-size: 1rem;
}

header {
 display: flex;
  justify-content: center;
  align-items: center;
 margin: 10vh 0;
 text-align: center;
}

.mainNav_wrap {
  min-width: 500px;
  max-width: 900px;
 padding: 1em;
 background: #5a7c61;
 color: #ffffff;
}
.mainNav_frame {
 padding: 2em;
 border: solid 2px #ffffff;
}



.mainNav {
 display: flex;
  justify-content: center;
  align-items: center;
 padding-top: 2em;
 margin-top: 2em;
 border-top: solid 2px #ffffff;
 font-family: 'Teko', sans-serif;
}
.mainNav li {
 margin: 0 0.5em;
 font-size: 1.5em;
}
.mainNav li a {
 padding: 0.5em;
 color: #ffffff;
 transition: 0.3s;
}
.mainNav li a:hover {
 color: #90bd99;
}

.click {
 display: none;
}





.linkList {
 position: relative;
 padding-top: 10vh;
}
.linkList a {
  color: #0c2010;
}

.link {
 display: flex;
  flex-wrap: wrap;
 margin: 10vh 0;
}
.link li {
 margin: 8vh 0;
 width: 30vw;
  max-width: 500px;
}





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

.link li a::before {
 content: '';
 position: absolute;
  left: 1em;
/* 丸を中央に配置したい場合はleft: calc(50% - 5vw - 1rem);に変更してください。 */
  top: -4em;
 width: 12em;
 height: 12em;
 background: #666666;
 border: solid 1rem #b3dbbb;
 border-radius: 50%;

 transition: 0.3s ease-out;
}

.link li:nth-child(4n+1) a {
 background: #b3dbbb;
}
.link li:nth-child(4n+1) a::before {
 border: solid 1rem #b3dbbb;
}
.link li:nth-child(4n+2) a {
 background: #9bc0a2;
}
.link li:nth-child(4n+2) a::before {
 border: solid 1rem #9bc0a2;
}
.link li:nth-child(4n+3) a {
 background: #9bc0a2;
}
.link li:nth-child(4n+3) a::before {
 border: solid 1rem #9bc0a2;
}
.link li:nth-child(4n+4) a {
 background: #b3dbbb;
}
.link li:nth-child(4n+4) a::before {
 border: solid 1rem #b3dbbb;
}


/* Deepリンク */
#deep {
  background: #39533e;
  color: #ffffff;
}
.link li a#deep::before {
  border: solid 1rem #39533e;
}
#deep .serialInfo {
  font-weight: bolder;
}
#deep .serialTitle {
  background: rgba(5, 37, 37, 0.6);
}
#deep .serialInfo div span {
  background: rgba(5, 37, 37, 0.6);
}



.serialInfo {
 padding: 2.5em;
 width: 100%;
 font-size: 1rem;
 z-index: 3;
}
.serialTitle {
 padding: 0.2em 0.5em;
 margin-bottom: 2em;
 background: rgba(255,255,255,0.7);
 font-size: 1.5rem;
 transition: 0.3s ease-out;
}
.serialInfo div {
 padding-top: 2em;
}
.serialInfo div span {
 display: inline;
 background: rgba(255,255,255,0.7);
 line-height: 2em;
 transition: 0.3s ease-out;
}
.link li a:hover .serialInfo div span {
 background: rgba(255,255,255,0.9);

}
.link li a:hover .serialTitle {
 background: rgba(255,255,255,0.9);
}








/* ＊＊＊＊＊　長編画像設定　＊＊＊＊＊ */

li.linkBox_1 a::before {
 background: url('../img/otama_re.png') center / cover no-repeat #b3dbbb;
}
li.linkBox_2 a::before {
 background: url('../img/sumikaeru.png') center / cover no-repeat #9bc0a2;
}
li.linkBox_3 a::before {
 background: url('../img/gakaeru.jpg') center / cover no-repeat #9bc0a2;
}
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: 20em;
}

.list li {
  position: relative;
  padding-left: 0.2em;
  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: 9px;
  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: 12px;
  left: -1.025em;
  width: 8px;
  height: 1px;
  background-color: #666;
}



/* 絵文字紹介欄 */

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

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

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

.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 {
 padding-bottom: 5vh;
 width: 90%;
 text-align: right;
}
.back a {
 display: inline-block;
 padding: 1rem;
  width: 1.5em;
  height: 1.5em;
 background: rgba(0,0,0,0.5);
 border-radius: 50%;
 color: #ffffff;
 font-size: 2em;
 text-align: center;
 transition: 0.3s;
 line-height: 1.5em;
}
.back a:hover {
 background: rgba(0,0,0,0.7);
}



footer {
 display: none;
 padding: 0 0 5vh;
 color: #9ba4ba;
 font-size: 1rem;
 text-align: center;
}
footer p a {
 color: #707d9b;
}


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