@charset "utf-8";
@import url('https://use.fontawesome.com/releases/v5.2.0/css/all.css');
@import url('https://fonts.googleapis.com/css?family=Amatic+SC');

html {
 background: transparent;
 font-size: 62.5%;
}
body {
 height: 100vh;
 background: 40% 60% / cover fixed no-repeat #5e7e84;
 background-image: linear-gradient(rgba(66,94,108,0.2), rgba(66,94,108,0.2)), url('../img/design42_2.jpg');
 font-size: 1.2rem;
 font-family: 'メイリオ', 'ヒラギノ角ゴ', sans-serif;
 letter-spacing: 0.2em;
 line-height: 180%;
}
a {
 text-decoration: none;
}
h1,h2,h3 {
 font-weight: bolder;
}
h1,h2,h3,h4,nav {
 font-family: 'Amatic SC', cursive;
}
h1 {
 font-size: 2em;
}
h2 {
 padding-bottom: 0.2em;
 margin: 0.5em 0em 1em;
 border-bottom: solid 1px #a39b81;
 font-size: 1.5em;
}
h3 {
 margin: 0.5em 0em;
 font-size: 1.2em;
}
em {
 border-bottom: solid 2px #d1c085;
 font-style: normal;
 font-weight: bolder;
}
ol,ul,dl {
 list-style: none;
}



input[type],textarea,button,select {
 padding: 0.1em;
 margin: 0.2em 0em;
 border: none;
 font-family: inherit;
 font-size: 100%;
}
input[type] {
 margin-right: 1em;
}
textarea {
 width: 100%;
 min-height: 5em;
}
input[type="submit"],input[type="reset"] {
 padding: 0.2em 0.5em;
 background: #bdcad1;
}
form {
 padding: 1em 2em;
}
.nameChange {
 padding: 1em 0em;
 text-align: center;
}

.nameChange input[type="text"] {
 width: 6em;
}



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



.box {
 padding: 2em 2em;
 margin: 5vh auto 20vh;
 width: 100%;
 max-width: 500px;
 background: rgba(255,255,255,0.7);
 box-sizing: border-box;
 color: #000000;
}
.box a {
 color: #425e6c;
}
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.2em 0em;
}
main li a:visited {
 color: #647882;
}
main ul, main dl {
 padding: 1em;
}
main li a, main dd a {
 margin: 0em 0.5em;
}


.long div {
 display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
 padding: 1em;
 margin: 1em 0;
 border: solid 1px #ffffff;
}
.long dd,.long dt {
 padding: 0 1.5rem;
 width: 90%;
 background: rgba(255,255,255,0.5);
 color: #000000;
}
.long dt a {
 padding: 0.2em 1em;
 color: #000000;
}
.long dt span {
 margin-left: 1em;
 font-size: 0.8em;
}
.long dd {
 padding: 0.5em auto 1em;
 font-size: 0.8em;
}
.title1 {
 background: url('../img/design42_3.jpg');
}
.title2 {
 background: url('../img/design42_4.jpg') left 45%;
}
.list li {
 display: inline-block;
 margin: 0em 1em 0em 0em;
}
.list li a {
 margin: 0em;
}
.text {
 padding: 1em 2em 3em;
 margin: 5vh auto 20vh;
 width: 100%;
 max-width: 500px;
 background: rgba(255,255,255,0.9);
 box-sizing: border-box;
 color: #000000;
 line-height: 200%;
}
.text h2 {
 padding: 1em 0;
 margin: 2em 0;
 color: #444444;
 text-align: center;
}
.text p {
 text-indent: 1em;
}



.wrap {
 display: flex;
  justify-content: flex-end;
  align-items: center;
 height: 100vh;
}
header {
 display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
 padding: 4em 1em;
 margin-bottom: 30vh;
 width: 100%;
 background: rgba(255,255,255,0.7);
 color: #000000;
 text-align: center;
}

header h1 {
 padding: 1rem 0em 2rem;
}
header p {
 font-size: 1rem;
}

nav {
 margin-top: 1em;
 border-top: solid 1px #a39b81;
 border-bottom: solid 1px #a39b81;
}
nav ul {
 display: flex;
  flex-wrap: wrap;
 padding: 1em;
}
nav li {
 margin: 0em 0.5em;
}
nav li a {
 padding: 0.2em;
 color: #000000;
 font-size: 1.5em;
 font-weight: bold;
}



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