@charset "utf-8";

.sp{
display: block !important;
}
.pc{
display: none !important;
}

/* header #breadcrumbs
-------------------------------------*/
header h1#logo{
width: 80%;
margin: 0.75em 5% 0.5em;
}

/* ¥Ï¥ó¥Ð©`¥¬©`¥á¥Ë¥å©`
-------------------------------------*/
/* ¥Ø¥Ã¥À©` */
header.header {
background: #fff;
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 999;
}
div.header-inner {
padding: 0 20px;
display: flex;
align-items: center;
justify-content: space-between;
height: inherit;
position: relative;
}
/* ¥Ø¥Ã¥À©`¤Î¥Ê¥Ó²¿·Ö */
nav.header-nav {
position: absolute;
right: 0;
left: 0;
top: 0;
width: 100%;
height: 100vh;
transform: translateX(100%);
background: #f2f1f1;
transition: ease .4s;
}
ul.nav-items {
width: 65%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 0;
}
/* ¥Ê¥Ó¤Î¥ê¥ó¥¯ */
ul.nav-items li.nav-items-item a {
width: 100%;
margin-bottom: 1.5em;
display: block;
text-align: left;
font-size: 20px;
text-decoration: none;
color: black;
}
ul.nav-items li.nav-items-item:first-child a {
margin-bottom: 2.5em;
}
ul.nav-items li.nav-items-item:last-child a {
margin-bottom: 0;
}
/* ¥Ï¥ó¥Ð©`¥¬©`¥á¥Ë¥å©` */
button.header-hamburger {
width: 48px;
height: 100%;
}
button.hamburger {
background-color: transparent;
border-color: transparent;
z-index: 9999;
}
/* ¥Ï¥ó¥Ð©`¥¬©`¥á¥Ë¥å©`¤Î¾€ */
button.hamburger span {
width: 100%;
height: 1px;
background-color: #000;
position: relative;
transition: ease .4s;
display: block;
}
button.hamburger span:nth-child(1) {
top: 0;
}
button.hamburger span:nth-child(2) {
margin: 15px 0;
}
button.hamburger span:nth-child(3) {
top: 0;
}
/* ¥Ï¥ó¥Ð©`¥¬©`¥á¥Ë¥å©`¥¯¥ê¥Ã¥¯áá¤Î¥¹¥¿¥¤¥ë */
nav.header-nav.active {
transform: translateX(0);
}
button.hamburger.active span:nth-child(1) {
top: 15px;
transform: rotate(50deg);
}
button.hamburger.active span:nth-child(2) {
opacity: 0;
}
button.hamburger.active span:nth-child(3) {
top: -17px;
transform: rotate(-50deg);
}

/* article.article
-------------------------------------*/
article.article h2{
margin: 40% 0 2em;
}

/* footer
-------------------------------------*/
footer p{
margin-top: 4em;
padding: 0.25em 0 0.5em 10%;
background: #fff;
text-align: left;
}
/* footer pagetop
-------------------------------------*/
p#pagetop a{
padding: 2.5em 0 3em;