@charset "UTF-8";
/* CSS Document */

/*CSSをリセットする*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video,main {
    margin:0;
    padding:0;
}
article, aside, dialog, figure, footer, header,
hgroup, nav, section,main {
	display:block;
}

/*メディアクエリ用記法*/

@media (min-width: 320px) {
}
@media (min-width: 360px) {
}
@media (min-width: 374px) {
}
@media (min-width: 414px) {
}
@media (min-width: 480px) {
}
@media (min-width: 600px) {
}
@media (min-width: 768px) {
}
@media (min-width: 960px) {
}


/*header*/
header{background-color:#111111;position:fixed;width:100%;z-index:1000;}
header h1{color:#fefefe;margin:0px;padding:10px;}


/*nav*/
nav{position:fixed;right:-200px;top:0px;background-color:rgba(0,0,0,0.8);height:100%;width:200px;z-index:10000;transition:right 0.3s linear;}
nav ul{list-style-type:none;margin-top:70px;}
nav ul li{font-size:16px;font-weight:bold;margin:0px 10px;border-top:1px solid rgba(255,255,255,0.6);padding:10px;}
nav ul li a{color:rgba(255,255,255,1);text-decoration:none;}

button.menubutton {-webkit-appearance: none;-moz-appearance: none;appearance: none;border: none;background: transparent;cursor:pointer;width: 32px;height: 32px;outline: none; position:fixed;right:18px;top:18px;display:block;z-index:10000;}
.p-hamburger {}
.p-hamburger__line,.p-hamburger__line_white {
  position: absolute;
  top: 0;right: 0;
  bottom: 0;left: 0;
  margin: auto; /* 親要素に対してど真ん中に配置 */
  width: 30px; /* お肉の幅 */
  height: 2px; /* お肉の高さ */
  background-color:rgba(0,0,0,1);  -webkit-transition:right 0.3s linear;transition:right 0.3s linear;}
.p-hamburger__line_white {background-color:rgba(255,255,255,1);}

.p-hamburger__line::before,
.p-hamburger__line::after,
.p-hamburger__line_white::before,
.p-hamburger__line_white::after {
  content: '';
  position: absolute;
  display: block;
  width: 100%;  height: 100%;
  background-color:rgba(0,0,0,1);
  -webkit-transition: inherit;transition: inherit;}

.p-hamburger__line_white::before,.p-hamburger__line_white::after {background-color:rgba(255,255,255,1);}


.p-hamburger__line::before,.p-hamburger__line_white::before {top: -15px;}
.p-hamburger__line::after,.p-hamburger__line_white::after {top: 15px;}

.p-hamburger__line.opennavline,.p-hamburger__line_white.opennavline{background-color:transparent;}
.p-hamburger__line.opennavline::before,.p-hamburger__line_white.opennavline::before{top:0px;transform: rotate(-45deg);background-color:rgba(255,255,255,1);}
.p-hamburger__line.opennavline::after,.p-hamburger__line_white.opennavline::after{top:0px;transform: rotate(45deg);background-color:rgba(255,255,255,1);}
nav.opennav{right:0px;}

@media (min-width: 768px) {
header{}
nav{right:10px;top:20px;width:auto;height:auto;background-color:rgba(0,0,0,0);transition:none;}
nav.opennav{right:10px;top:20px;width:auto;height:auto;background-color:rgba(0,0,0,0);transition:none;}
nav ul{margin-top:0px;}
nav ul li{display:inline-block;border-top:none;padding:0px;}

.p-hamburger__line,.p-hamburger__line_white {display:none;}
}


main#mainbox{padding-top:40px;padding-left:10px;padding-right:10px;max-width:1200px;margin:0px auto;position:relative;}

.anchor_tag{position:relative;top:-60px;}



div#articlebox{display:block;position: relative;padding-top:68px;}
div#articlebox article{display:block;position: relative;margin:0px auto;background-image: url("../../images/img.jpg");background-size: cover;padding:150px 0px;}
div#articlebox article h2{font-size:20px;margin:0px auto 20px;color:rgba(255,255,255,1.00);max-width:1200px;}
div#articlebox article p{font-size:13px;margin:0px auto;line-height:1.8em;color:rgba(255,255,255,1.00);max-width:1200px;}


section{max-width:1200px;margin:0px auto;}

h3{margin:40px 46px 20px;}

.itemlist_flex{margin:20px;}
.itemlist_flex figure{text-align:center;margin:20px;border:1px solid #999999;border-radius:10px;padding:10px;box-sizing:border-box;position:relative;}
.itemlist_flex figure img{width:100%;height:auto;max-width:400px;}
.itemlist_flex figure figcaption{text-align:left;}
.itemlist_flex figure figcaption h4{font-size:16px;margin:10px 0px;}
.itemlist_flex figure figcaption p{font-size:14px;line-height:1.6em;}

.itemlist_flex figure a{position:absolute;top:0;left:0;height:100%;width:100%;background-color:rgba(255,255,255,0);text-indent:-9999px;}
.itemlist_flex figure a:hover{background-color:rgba(255,255,255,0.4);}


/*illust_map用*/
.illust_map{margin:30px 10px;padding:30px;position:relative;text-align:center;}
.illust_map img{width:100%;height:auto;max-width:712px;}
.illust_map::after{content:"";position:absolute;top:-15px;left:50%;width:50%;margin-left:-25%;height:1px;display:block;border-bottom:1px solid #000;}

/*illust_castle用*/
.illust_castle{margin:30px 10px;padding:30px;position:relative;text-align:center;}
.illust_map img{width:100%;height:auto;max-width:640px;}

/*illust_logo用*/
.illust_logo{margin:30px 10px;padding:30px;position:relative;text-align:center;}
.illust_logo img{width:100%;height:auto;max-width:450px;}
.illust_logo::after{content:"";position:absolute;top:-15px;left:50%;width:50%;margin-left:-25%;height:1px;display:block;border-bottom:1px solid #000;}

/*illust_art用*/
.illust_art{margin:30px 10px;padding:30px;position:relative;text-align:center;}
.illust_art img{width:100%;height:auto;max-width:350px;}

/*illust_art_w600用*/
.illust_art_w600{margin:30px 10px;padding:30px;position:relative;text-align:center;}
.illust_art_w600 img{width:100%;height:auto;max-width:600px;}


footer{background-color:rgba(0,0,0,0.6);}
footer div{max-width:1100px;padding:10px;margin:0px auto;}

#aboutbox{}
#aboutbox div.aboutphoto{padding:10px;max-width:200px;margin-top:10px;}
#aboutbox div img{border-radius:50%;width:100%;height:auto;max-width:200px;vertical-align:bottom;}

#aboutbox div.abouttxt{color:rgba(255,255,255,1);padding:0px 30px;}
#aboutbox div.abouttxt h5{font-size:18px;margin-top:10px;margin-bottom:10px;}
#aboutbox div.abouttxt h6{font-size:18px;}
#aboutbox div.abouttxt p{font-size:13px;line-height:1.6em;margin-bottom:10px;}
#aboutbox div.abouttxt dl{}
#aboutbox div.abouttxt dt{margin-top:10px;font-size:13px;font-weight:bold;}
#aboutbox div.abouttxt dd{font-size:13px;}
@media (min-width: 980px) {
#aboutbox{display:flex;}
#aboutbox div.aboutphoto{max-width:300px;margin-top:0px;}
#aboutbox div img{max-width:300px;}

}


/*フェード動作js用*/
.fade{margin-top:80vh;text-align:center;opacity:0;transition: opacity 3s;}
.fade.view{opacity: 1;}
@keyframes fade{
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}

@media (min-width: 768px) {
.itemlist_flex{display:flex;flex-wrap:wrap;}
.itemlist_flex figure{width:calc(50% - 40px);}

}
@media (min-width: 980px) {

.itemlist_flex figure{width:calc(100% /3 - 40px);}
}