@charset "utf-8";
@import url('https://use.fontawesome.com/releases/v5.2.0/css/all.css');

html {
 background: transparent;
 font-size: 62.5%;
}
body {
 background: url('../img/design42_2.jpg') center 60% / cover fixed no-repeat #a7c6cb;
 font-size: 1.3rem;
 font-family: 'メイリオ', 'ヒラギノ角ゴ', sans-serif;
 letter-spacing: 0.2em;
 line-height: 180%;
    text-shadow:-1px -1px 3px #0000ff;
}
a {
 text-decoration: none;
 transition: 0.5s;
}
h1 {
 font-size: 3em;
}
h2 {
 margin: 0.5em 0em 1em;
 font-size: 2em;
}
h3 {
 margin: 0.5em;
 color: #c3c3c3;
 font-size: 1.5em;
}
em {
 border-bottom: dotted 2px #b6cfdc;
 font-weight: bolder;
}
ol,ul,dl {
 list-style: none;
}

input[type],textarea,button,select {
 padding: 0.2em;
 margin: 0.5em 0em;
 border: none;
 font-family: inherit;
 font-size: 100%;
}
input[type] {
 margin-right: 1em;
}
textarea {
 min-width: 40%;
 min-height: 6em;
}
input[type="submit"],input[type="reset"] {
 padding: 0.2em 1em;
 background: #bdcad1;
}

.nameChange,form {
 padding: 1em 2em;
}
.nameChange input[type="text"] {
 width: 8em;
}



p {
 padding: 0em 2em;
}
section {
 margin: 1em 0em 3em;
}



.box {
 padding: 5em 3em 3em;
 margin: 15vh auto;
 width: 60%;
 min-width: 600px;
 background: rgba(0,0,0,0.7);
 color: #ffffff;
}
.box a {
 color: #b6cfdc;
}
footer {
 padding-top: 1em;
 font-family: 'Font Awesome 5';
 font-size: 2em;
 text-align: right;
}
footer a {
 padding: 0.5em;
 color: #ffffff;
}
.pageChild {
 text-align: left;
}


main {
}
main li {
 margin: 0.5em 0em;
}
main li a:visited {
 color: #80c7ec;
}

main ul, main dl {
 padding: 1em 2em;
}
main li a, main dd a {
 margin: 0em 1em;
}

.long div {
 display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
 padding: 1em;
 margin: 1em 0;
 border: solid 1px #ffffff;
}
.long dt {
 padding: 0.2em 1em;
}
.long dt a {
 padding: 0.2em 1em;
 background: rgba(0,0,0,0.5);
 color: #ffffff;
 font-size: 1.3em;
}
.long dt span {
 margin-left: 1em;
 font-size: 0.8em;
}
.long dd {
 padding-top: 0.5em;
}
.list {
 display: flex;
  flex-wrap: wrap;
}
.list li {
 margin: 0em 2em 0em 0em;
}
.list li a {
 margin: 0em;
}

.text {
 padding: 3em;
 margin: 5em auto;
  width: 50%;
  min-width: 500px;
 background: linear-gradient(transparent 0vh, #ffffff 15vh);
 background: #ffffff;
 box-shadow: 1em 1em 1em #ffffff, 1em -1em 1em #ffffff, -1em 1em 1em #ffffff, -1em -1em 1em #ffffff;
}
.text h2 {
 padding-bottom: 1em;
 color: #888888;
 text-align: center;
}
.text p {
 text-indent: 1em;
}

/* 長編背景画像 */

.title1 {
 background: url('../img/design42_3.jpg');
}
.title2 {
 background: url('../img/design42_4.jpg') left 45%;
}




.wrap {
 display: flex;
  justify-content: flex-end;
  align-items: flex-end;
 margin-bottom: 30vh;
 height: 100vh;
}
header {
 display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
 padding: 4em 4em;
 margin: 0em 3em 3em 0em;
 min-width: 400px;
 max-width: 500px;
 background: rgba(0,0,0,0.5);
 color: #ffffff;
 text-align: center;
}
header h1 {
 padding: 1rem 0em 2rem;
}
header p {
 font-size: 1rem;
}
nav {
 font-size: 1.5em;
}

nav ul {
 display: flex;
  flex-wrap: wrap;
 padding-top: 1em;
}
nav li {
 margin: 0em 0.5em;
}
nav li a {
 padding: 0.5em;
 color: #ffffff;
 font-weight: bold;
}
nav li a:hover {
 text-shadow: 0.1em 0.1em 0.2em rgba(189,202,209,0.5) , 0.1em -0.1em 0.2em rgba(189,202,209,0.5), -0.1em 0.1em 0.2em rgba(189,202,209,0.5), -0.1em -0.1em 0.2em rgba(189,202,209,0.5);
}



.bookMark {
 display: flex;
  flex-wrap: wrap;
 padding: 1em 2em;
}
.bookMark li::after {
 content: '/';
 margin: 0em 1em;
}
.bookMark li:last-of-type::after {
 content: none;
}