@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Titillium+Web');

@font-face
{
font-family:"ロゴたいぷゴシック-コンデンスド" ;
src: url('https://cdn.leafscape.be/LogoTypeGothicCondense/07LogoTypeGothic-Condense_web.woff2')
     format("woff2");
}



html {
 background: transparent;
 font-size: 62.5%;
}
body {
 color: #3c432b;
 font-size: 1.3rem;
 font-family: "ロゴたいぷゴシック-コンデンスド", 'メイリオ', 'ヒラギノ角ゴ', sans-serif;
 letter-spacing: 0.2em;
 line-height: 180%;
}
a {
 text-decoration: none;
}
h1 {
 margin: 5rem 0%;
 color: #86877a;
 font-family: "ロゴたいぷゴシック-コンデンスド", 'Titillium Web', sans-serif;
 font-size: 3.0rem;
 text-align: center;
 position: relative;
}
h2,h3,h4 {
 font-family: 'Titillium Web', "ロゴたいぷゴシック-コンデンスド", sans-serif;
}
h2 {
 margin: 0.3em 0em;
 font-size: 1.3em;
}
h2::before {
 content: '●';
 padding-right: 0.3em;
 color: #cfee84;
}
h3 {
 margin: 0.5em;
 font-size: 1.1em;
}
em {
 font-style: normal;
 background: linear-gradient(#ffffff 50%, #fffe8b 50%);
}
input,textarea,button,select {
 font-family: inherit;
 font-size: 100%;
}
input,button,select {
 background: #d4dc58;
 border: none;
}
textarea,input[type="text"] {
 background: #ffffff;
 border: solid 1px #46562f;
}
textarea {
 padding: 0.5em;
}


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

main {
 display: block;
 margin: 3rem auto 10rem;
  width: 50%;
  min-width: 500px;
}
main a {
 color: #365e15;
}

header {
 min-height: 20vh;
 min-width: 500px;
 font-family: 'Titillium Web', sans-serif;
}

nav ul {
 display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
nav li {
 margin: 0em 1em;
 height: 10rem;
 width: 10rem;
 background: url('../img/design35_2.png') 70% center / cover no-repeat #fffe8b;
 border-radius: 50%;
 position: relative;
}
nav li a {
 display: inline-block;
 height: 10rem;
 width: 10rem;
 background: transparent;
 border-radius: 50%;
 color: #86877a;
 font-size: 1.8rem;
 line-height: 10rem;
 text-align: center;
 transition: 0.4s;

}
nav li a:hover {
 background: rgba(0,0,0,0.2);
 color: #ffffff;
}
nav li a:hover::before {
 content: '';
 display: inline-block;
 padding: 1em;
 height: 1em;
 width: 1em;
 background: url('../img/design35_3.png') center / 70% no-repeat;
 position: absolute;
  top: 0em;
  left: 3em;

}

article {
 margin: 3em 0em;
 background: #ffffff;

}
.time {
 display: inline-block;
 padding: 1em 2em;
 margin-bottom: 1em;
 background: url('../img/design35_2.png') center / 120% #fbf967;
 border-radius: 2em;
}
.title {
 padding: 0.5em 3em;
}
.bg {
 padding-bottom: 1em;
 background: repeating-linear-gradient(to bottom, #d3e5a8 0rem, #d3e5a8 0.1rem, #ffffff 0.1rem, #ffffff 2.5rem);
 line-height: 2.5rem;
}


form input {
 padding: 0.5em;
 margin-right: 1em;
}
form textarea {
 height: 6em;
 width: 60%;

}


.mobile {
 display: none;
}