@charset "UTF-8";
/* CSS Document */
html {
font-size: 62.5%;
}
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 12px;
font-family: 'M PLUS 1p', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
color: #231815;
background: #FFF;
text-align: left;
letter-spacing: 0.15em;
}
img {
width: 100%;
max-width: 100%;
height: auto;
vertical-align: middle;
}
.object-fit-img {
-o-object-fit: cover;
   object-fit: cover;
font-family: 'object-fit: cover;'
}
a, a:hover {
text-decoration: none;
}
a {
display: block;
color: #231815;
-webkit-transition: 0.7s;
-o-transition: 0.7s;
transition: 0.7s;
}

header {
background: -webkit-gradient(linear,left top, left bottom,from(#fff),to(#ccc));
background: -o-linear-gradient(#fff,#ccc);
background: linear-gradient(#fff,#ccc);
}
header h1{
width: 200px;
height: auto;
padding: 12px 0;
margin: auto;
}

.wrapper {
height: 100%;
overflow-x: hidden;
position: relative;
}
.overlay {
position: absolute;
content: "";
display: block;
top: 0;
left: 0;
width: 0;
height: 0;
background-color: rgba(0,109,187,0.5);
opacity: 0;
z-index: 1001;
-webkit-transition: opacity .5s;
-o-transition: opacity .5s;
transition: opacity .5s;
}
.overlay.open {
width: 100%;
height: 100%;
opacity: 1;
}
#content {
height: 100%;
min-height: 100vh;
}
.menu-trigger {
position: absolute;
display: inline-block;
top: 18px;
right: 18px;
width: 28px;
height: 22px;
z-index: 1002;
vertical-align: middle;
cursor: pointer;
-webkit-transition: -webkit-transform .5s;
-o-transition: transform .5s;
transition: transform .5s, 
-webkit-transform .5s;
}
.menu-trigger span:nth-of-type(1),
.menu-trigger span:nth-of-type(2),
.menu-trigger span:nth-of-type(3) {
position: absolute;
display: inline-block;
left: 0;
width: 100%;
height: 2px;
background-color: #FFF;
-webkit-box-sizing: border-box;
        box-sizing: border-box;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.menu-trigger span:nth-of-type(1) {
top: 0;
}
.menu-trigger span:nth-of-type(2) {
top: 10px;
}
.menu-trigger span:nth-of-type(3) {
bottom: 0;
}
.menu-trigger.active span:nth-of-type(1) {
-webkit-transform: translateY(10px) rotate(-45deg);
    -ms-transform: translateY(10px) rotate(-45deg);
        transform: translateY(10px) rotate(-45deg);
}
.menu-trigger.active span:nth-of-type(2) {
opacity: 0;
}
.menu-trigger.active span:nth-of-type(3) {
-webkit-transform: translateY(-10px) rotate(45deg);
    -ms-transform: translateY(-10px) rotate(45deg);
        transform: translateY(-10px) rotate(45deg);
}

nav {
position: fixed;
top: 0;
left: 0;
width: 300px;
height: 100vh;
background: #006DBB;
z-index: 1003;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
-webkit-transform: translate(-300px);
    -ms-transform: translate(-300px);
        transform: translate(-300px);
}
nav a {
color: #fff;
}
nav .category {
margin-bottom: 16px;
}
nav li a{
padding: 8px 16px;
}
nav.open {
-webkit-transform: translateZ(0);
        transform: translateZ(0);
}

.close-btn {
position: relative;
display: inline-block;
margin-left: 85%;
padding: 24px;
color: #fff;
cursor: pointer;
text-align: center;
}
.close-btn::after{
position: absolute;
display: block;
content: "\f00d";
top: 50%;
left: 50%;
width: 24px;
height: auto;
font-family: "Font Awesome 5 Free";
font-size: 24px;
font-weight: 900;
-webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
}

section {
max-width : 680px;
width: 100%;
margin : auto;
overflow: hidden;
}
section > article {
width: 90%;
margin: 0 auto;
padding-bottom: 36px;
}

.ttl {
font-weight: 700;
font-size: 1.8em;
text-align: center;
}

.bg-orange{
background: #f29100;
}

.btn {
max-width: 280px;
padding: 16px;
font-size: 2em;
font-weight: 700;
text-align: center;
margin: 0 auto;
}

.main-btn {
position: relative;
background: -webkit-gradient(linear,left top, left bottom,from(#ef8459),to(#e60012));
background: -o-linear-gradient(#ef8459,#e60012);
background: linear-gradient(#ef8459,#e60012);
border-radius: 48px;
color: #FFF;
}
.main-btn span{
display: block;
font-size: 0.8em;
font-weight: 500;
}
.main-btn::after {
position: absolute;
content: "";
top: -4px;
left: -5px;
background: #FFF;
width: 102%;
height: 105%;
border-radius: 52px;
border: solid 2px #e60012;
z-index: -1;
}
.entry-btn {
display: block;
width: 280px;
padding: 16px;
border-radius: 3px !important;
background: #f29100;
color: #FFF;
font-size: 1.8em;
font-size: 18px;
font-weight: 700;
text-align: center;
margin: 24px auto 0;
}

.entry-btn2 {
display: block;
width: 240px;
padding: 10px;
border-radius: 3px !important;
background: #ccc;
color: #FFF;
font-size: 1.8em;
font-size: 16px;
font-weight: 700;
text-align: center;
margin: 24px auto 0;
}

form input[type="text"],
form input[type="password"],
form input[type="datetime"],
form input[type="datetime-local"],
form input[type="date"],
form input[type="month"],
form input[type="time"],
form input[type="week"],
form input[type="number"],
form input[type="email"],
form input[type="url"],
form input[type="search"],
form input[type="tel"],
form input[type="color"],
form textarea {
padding: 8px;
border: 1px solid #dcc7a7;
border-radius: 3px;
width : 100%;
margin: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
form select {
padding: 8px;
border: 1px solid #dcc7a7;
border-radius: 3px;
width : 72px;
margin: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
form {
width: 90%;
margin: auto;
}
input::-webkit-input-placeholder {
  color: #CCC;
}
input::-moz-placeholder {
  color: #CCC;
}
input:-ms-input-placeholder {
  color: #CCC;
}
input::-ms-input-placeholder {
  color: #CCC;
}
input::placeholder {
  color: #CCC;
}
input:-ms-input-placeholder {
  color: #CCC;
}
input::-ms-input-placeholder {
  color: #CCC;
}
footer {
padding-top: 16px;
text-align: center;
background: #0068b6;
color: #fff;
}
footer img{
max-width: 280px;
margin: 8px auto;
}
footer h2{
max-width: 280px;
font-size: 1.2em;
font-weight: 700; 
border: 2px solid #fff;
border-radius: 20px;
padding: 2px;
margin: auto;
}
small {
display: block;
padding: 6px 0;
}

a:hover{
opacity: 0.7;
}