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

/* ======================
base
====================== */

body{
	margin: 0;
	font-family: 'Open Sans', "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
	
li{list-style: none;}	

/* ======================
main header
初期表示用ヘッダー
====================== */

#header-main{position: relative;width: 100%;display: flex;align-items: flex-start;justify-content: space-between;padding: 40px 15%;box-sizing: border-box;background: #4c764b;height: 415px;}

/* ======================
fixed header
上スクロール時表示ヘッダー
====================== */

#header-fixed{position: fixed;top: 0;left: 0;width: 100%;z-index: 9999;display: flex;align-items: center;justify-content: flex-end;padding: 40px 15%;box-sizing: border-box;background: none;backdrop-filter: blur(0px);

	/* 初期非表示 */

	transform: translateY(-100%);

	transition:
		transform .4s ease,
		opacity .4s ease,
		background .4s ease;
}

/* 上スクロール時表示 */

#header-fixed.is-show{transform: translateY(0);}
#header-fixed .fixed-logo img {max-width: 80px;}	

/* ======================
left : sublogo
====================== */

.sublogo{width: 33%;display: flex;justify-content: flex-start;}
.sublogo img{width: 100%;max-width: 200px;height: auto;display: block;}

/* ======================
center : logo
====================== */

.logo{position: absolute;left: 50%;top: 32px;transform: translateX(-50%);text-align: center;}
.logo h1{margin: 0;}
.logo img{width: 160px;height: auto;display: block;}

/* ======================
fixed header logo
====================== */

#header-fixed .fixed-logo{position: absolute;left: 50%;transform: translateX(-50%);display: none;}	
#header-fixed .logo img{width: 68px;}

/* ======================
right : menu
====================== */

.menu{width: 33%;display: flex;justify-content: flex-end;}

/* ======================
menu list
====================== */

.menu ul,.fixed-menu ul{margin: 0;padding: 0;list-style: none;display: flex;flex-direction: column;align-items: flex-end;gap: 4px;}
.menu li,.fixed-menu li{font-size: 18px;font-family: "fot-tsukuaoldmin-pr6n", sans-serif;font-weight: 300;font-style: normal;line-height: 1.4;}
.menu a,.fixed-menu a{color: #000;text-decoration: none;transition: opacity .3s ease;}
.menu a:hover,.fixed-menu a:hover{opacity: .6;}

	
/* ======================
mobile nav
====================== */

#g-nav{display: none;}
	
#mainimage{position:relative;}
	
.topImage {width: 100%;font-size: 0px;}
.topImage img.pc {width: 100%;height: auto;display: block;}
.topImage img.sp {display: none;}	
	
.event {position: absolute;left: 50%;top: 94%;transform: translate(-50%, -50%);z-index: 10;text-align: center;color: #333;width: 70%;font-family: "fot-tsukuaoldmin-pr6n", sans-serif;font-weight: 300;font-style: normal;}	
.event ul {display: flex;flex-wrap: nowrap;justify-content: center;}	
.event ul li.schedule ul {display: flex;flex-wrap: nowrap;}
.event ul li.title {width: 10%;font-size: 18px;text-align: left;list-style: none;}
.event ul li.schedule {width: 90%;list-style: none;}
.event ul li.schedule ul li {width: 100%;font-size: 18px;text-align: left;list-style: none;}
	
div#concept {background: #f6eee9;padding: 10% 0;border-bottom: 3px solid #333;}
div#concept h1 {margin: 0 0 2%;font-family: "fot-tsukuaoldmin-pr6n", sans-serif;font-weight: 300;font-style: normal;padding: 0% 0;text-align: center;font-size: 68px;}	
div#concept p.desc {width: 47%;margin: 0 auto;font-size: 20px;text-align: justify;text-justify: inter-ideograph;}	
	
div#artist {}
div#artist ul {margin: 0;display: flex;flex-wrap: nowrap;align-items: flex-start;padding: 0;}
div#artist ul li {width: 25%;background: #c5b5a1;}
div#artist ul li img {width: 100%;}
div#artist ul li p.name {text-align: center;margin: 5%;font-size: 30px;font-family: "fot-tsukuaoldmin-pr6n", sans-serif;font-weight: 300;font-style: normal;height: 160px;}	
	
div#photo {position: relative;}
div#photo p.name {position: absolute;left: 90%;top: 90%;transform: translate(-50%, -50%);z-index: 10;text-align: center;color: #333;font-family: "fot-tsukuaoldmin-pr6n", sans-serif;font-weight: 500;font-style: normal;font-size: 36px;width: 15%;}

.image {border-bottom: 2px solid #333;font-size: 0;}	
.image img {width: 100%;}
	
div#story {}
div#story ul {display: flex;margin: 0;padding: 0;flex-wrap: nowrap;justify-content: center;align-items: center;background: #f6eee9;}
div#story ul li.image {width: 50%;}
div#story ul li.image img {width: 100%;}
div#story ul li.story-desc {width: 30%;padding: 0% 13%;}
div#story ul li.story-desc p.catch {text-align: center;margin: 0 0 5%;font-size: 42px;font-family: "fot-tsukuaoldmin-pr6n", sans-serif;font-weight: 300;font-style: normal;}
div#story ul li.story-desc p.lead {font-size: 24px;margin: 0;padding: 0%;text-align: justify;text-justify: inter-ideograph;}	
div#story ul li.story-desc .pagelink {text-align: center;}	
	
div#factory-image {font-size:0px}
div#factory-image img {width: 100%;}	
	
div#event {background: #f6eee9;padding:10%}
div#event ul {margin: 0;padding: 0;display: flex;align-items: flex-start;}
div#event ul li.schedule-list {width: 50%;}
div#event ul li.schedule-list p.title {margin: 0;text-align: center;font-family: "fot-tsukuaoldmin-pr6n", sans-serif;font-weight: 300;font-style: normal;font-size: 36px;}
div#event ul li.schedule-list p.title span {display: block;font-size: 50%;}
div#event ul li.schedule-list p.year {font-family: "fot-tsukuaoldmin-pr6n", sans-serif;font-weight: 300;font-style: normal;font-size: 24px;margin:5% 0;}
div#event ul li.schedule-list ul.venue {display: flex;flex-direction: row;align-items: center;justify-content: space-between;}
div#event ul li.schedule-list ul.venue li.desc {font-family: "fot-tsukuaoldmin-pr6n", sans-serif;font-weight: 300;font-style: normal;font-size: 24px;width:70%;margin:0% 0 2%;}	
	
li.icon .fukuoka {display: inline-block;width: 120px;height: 86px;border-radius: 50%;background: #a37159;text-align:center;line-height: 84px;font-size: 24px;font-family: "fot-tsukuaoldmin-pr6n", sans-serif;font-weight: 300;font-style: normal;border: 2px solid #333;}
li.icon .tokyo {display: inline-block;width: 120px;height: 86px;border-radius: 50%;background: #778a89;text-align:center;line-height: 84px;font-size: 24px;font-family: "fot-tsukuaoldmin-pr6n", sans-serif;font-weight: 300;font-style: normal;border: 2px solid #333;}
li.icon .osaka {display: inline-block;width: 120px;height: 86px;border-radius: 50%;background: #c5b5a1;text-align:center;line-height: 84px;font-size: 24px;font-family: "fot-tsukuaoldmin-pr6n", sans-serif;font-weight: 300;font-style: normal;border: 2px solid #333;}
li.icon .matsue {display: inline-block;width: 120px;height: 86px;border-radius: 50%;background: #e1bb72;text-align:center;line-height: 84px;font-size: 24px;font-family: "fot-tsukuaoldmin-pr6n", sans-serif;font-weight: 300;font-style: normal;border: 2px solid #333;}
	
div#event ul li.schedule-list li.dm-image {width: 50%;padding: 10%;}
div#event li.dm-image {width: 35%;padding: 0% 0 0 15%;}
div#event li.dm-image img {width: 100%;margin: 0 auto;}
	
	
footer {background: #4d764b;font-size: 0;}	
footer div#menu {font-family: "fot-tsukuaoldmin-pr6n", sans-serif;font-weight: 300;font-style: normal;padding: 5% 15%;background: #4d764b;display: flex;}
footer div#menu .left-contents {width: 50%;}
footer div#menu .left-contents p.title {text-align: left;font-size: 24px;margin: 0 0 3%;}
footer div#menu .left-contents ul.menu-list {display: flex;flex-direction: column;padding: 0;margin: 0;font-size: 20px;}
footer div#menu .left-contents ul.menu-list li {margin: 0;}
footer div#menu .right-contents {width: 50%;}
footer div#menu .right-contents p.info {text-align: left;font-size: 20px;margin: 0 0 5%;line-height: 1.5em;}
footer div#menu .right-contents p.info span {display: block;}
footer div#menu .right-contents ul.sponsored {display: flex;padding: 0;margin: 0;}
footer div#menu .right-contents ul.sponsored li.label {width: 20%;font-size: 20px;}
footer div#menu .right-contents ul.sponsored li.company {width: 50%;font-size: 20px;}	
footer .footer-inner {text-align: center;}
footer .footer-inner p.copy {font-size: 16px;margin: 0;padding: 2% 0 2%;font-family: "fot-tsukuaoldmin-pr6n", sans-serif;font-weight: 300;font-style: normal;}	
	
a.linkbutton {display: inline-block;text-decoration: none;border: solid 1px #333;background: none;color: #333 !important;transition: .4s;width: 45%;padding: 15px 0;font-weight: bold;text-align: center;font-size: 18px;margin: 60px auto 0;font-family: "fot-tsukuaoldmin-pr6n", sans-serif;font-weight: 300;font-style: normal;}	
a.linkbutton:hover {border: solid 1px #333;color: #fff!important;background: #333!important;}



/* =========================
SP ハンバーガー
========================= */

.openbtn{
	display: none;
}


/* SP・TABLET ONLY */
@media screen and (max-width:1024px){

	
.logo {
    position: absolute;
    left: 80%;
    top: 60px;
    transform: translateX(-50%);
    text-align: center;
}
	
.logo img {
    width: 100px;
    height: auto;
    display: block;
}
	
.sublogo {
    width: 50%;
    display: flex;
    justify-content: flex-start;margin: 8% 0 0 8%;
}
.sublogo img {
    width: 100%;
    max-width: 160px;
    height: auto;
    display: block;
}
	
/* PCメニュー非表示 */
#header-main .menu{
	display:none;
}
	
#header-main {
    position: relative;
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 40px 5%;
    box-sizing: border-box;
    background: #4c764b;
    height: 310px;
}


/* ハンバーガーボタン */
.openbtn{
	display:block;
	position:fixed;
	top:15px;
	right:20px;
	z-index:9999;
	width:40px;
	height:40px;
	cursor:pointer;
}


/* 3本線 */
.openbtn span{
	display:block;
	position:absolute;
	width:30px;
	height:2px;
	background:#000;
	left:5px;
	transition:all .4s;
}

.openbtn span:nth-child(1){
	top:10px;
}

.openbtn span:nth-child(2){
	top:19px;
}

.openbtn span:nth-child(3){
	top:28px;
}


/* OPEN時 */
.openbtn.active span:nth-child(1){
	transform:translateY(9px) rotate(-45deg);
}

.openbtn.active span:nth-child(2){
	opacity:0;
}

.openbtn.active span:nth-child(3){
	transform:translateY(-9px) rotate(45deg);
}



/* =====================
メニュー全体
===================== */

    #g-nav {
        position: fixed;
        z-index: 9990;
        top: 0;
        right: -100%;
        width: 100%;
        height: 100vh;
        background: #4c764b;
        transition: all .5s;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        flex-direction: column;
        padding-right: 8%;
		padding-top: 5%;
        box-sizing: border-box;
    }


/* 開いた時 */
#g-nav.panelactive{
	right:0;
}


/* 中身 */
#g-nav-list{
	text-align:right;
	opacity:0;
	transform:translateY(20px);
	transition:all .5s;
	transition-delay:.2s;
}


/* 表示 */
#g-nav.panelactive #g-nav-list{
	opacity:1;
	transform:translateY(0);
}



/* メニュー */
#g-nav ul{
	list-style:none;
	padding:0;
	margin:0;
	font-family: "fot-tsukuaoldmin-pr6n", sans-serif;
        font-weight: 300;
        font-style: normal;
}

#g-nav ul li{
	margin-bottom:24px;
}

#g-nav ul li a{
	font-size:clamp(1.2rem, 3.5vw, 2.4rem);
	letter-spacing:0.08em;
	color:#000;
	text-decoration:none;
}



/* ロゴ */
  .nav-logo {
        margin-top: 60px;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 20px;
        width: 90%;
        padding: 0% 0% 0 0%;
    }

.nav-logo ul {
    display: flex;
    justify-content: space-between;
    width: 100%;
}
.nav-logo ul li img.sub {
    width: 150px;
}
	
.nav-logo ul li img.main {
    width: 90px;
}



/* 固定ヘッダー非表示 */
#header-fixed{
	display:none;
}

.topImage img.pc {
    display: none;
}
.topImage img.sp {
    display: block;
    width: 100%;
}	
	
.event {
    position: absolute;
    left: 50%;
    top: 85%;
    transform: translate(-50%, -50%);
    z-index: 10;
    text-align: center;
    color: #333;
    width: 80%;
    font-family: "fot-tsukuaoldmin-pr6n", sans-serif;
    font-weight: 300;
    font-style: normal;
}	
	
.event ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0;
    /* padding: 5%; */
}
	
.event ul li.title {
    width: 10%;
    font-size: 16px;
    text-align: left;
    list-style: none;
}
	
.event ul li.schedule {
    width: 90%;
    list-style: none;
}
	
.event ul li.schedule ul {
    display: flex;
    flex-wrap: wrap;
    padding: 0 0% 0 10%;
}
	
.event ul li.schedule ul li {
    width: 50%;
    font-size: clamp(0.3rem, 2.7vw, 2.4rem);
    text-align: left;
    list-style: none;
}
	
div#concept {
    background: #f6eee9;
    padding: 15% 5%;
    border-bottom: 3px solid #333;
}
	
div#concept h1 {
    margin: 0 0 5%;
    font-family: "fot-tsukuaoldmin-pr6n", sans-serif;
    font-weight: 300;
    font-style: normal;
    padding: 0% 0;
    text-align: center;
    font-size: clamp(1.8rem, 4.7vw, 2.4rem);
}
	
div#concept p.desc {
    width: 90%;
    margin: 0 auto;
    font-size: clamp(1rem, 2.5vw, 2.4rem);
    text-align: justify;
    text-justify: inter-ideograph;
}	
	
div#artist ul li p.name {
    text-align: center;
    margin: 5%;
    font-size: clamp(0.8rem, 2.5vw, 2.4rem);;
    font-family: "fot-tsukuaoldmin-pr6n", sans-serif;
    font-weight: 300;
    font-style: normal;
    height: 80px;
}
	
div#photo p.name {
    position: absolute;
    left: 80%;
    top: 80%;
    transform: translate(-50%, -50%);
    z-index: 10;
    text-align: right;
    color: #333;
    font-family: "fot-tsukuaoldmin-pr6n", sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: clamp(1rem, 2.5vw, 2.4rem);
    width: 30%;
}
	
div#story ul {
    display: flex;
    margin: 0;
    padding: 0;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    background: #f6eee9;
    flex-direction: column;
}	
	
div#story ul li.image {
    width: 100%;
    border: none;
}
	
div#story ul li.story-desc {
    width: 80%;
    padding: 10%;
}
	
div#story ul li.story-desc p.catch {
    text-align: center;
    margin: 0 0 5%;
    font-size: clamp(1.8rem, 4.7vw, 2.4rem);
    font-family: "fot-tsukuaoldmin-pr6n", sans-serif;
    font-weight: 300;
    font-style: normal;
}
	
div#story ul li.story-desc p.lead {
    font-size: clamp(1rem, 2.5vw, 2.4rem);
    margin: 0;
    padding: 0%;
    text-align: justify;
    text-justify: inter-ideograph;
}
	
div#event ul {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
}	
	
div#event ul li.schedule-list {
    width: 100%;
}
	
div#event ul li.schedule-list p.title {
    margin: 0;
    text-align: center;
    font-family: "fot-tsukuaoldmin-pr6n", sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 24px;
}
	
div#event ul li.schedule-list p.year {
    font-family: "fot-tsukuaoldmin-pr6n", sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 18px;
    margin: 5% 0;
}
	
div#event ul li.schedule-list ul.venue li.desc {
    font-family: "fot-tsukuaoldmin-pr6n", sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: clamp(1rem, 2.5vw, 2.4rem);
    width: 70%;
    margin: 0% 0 2%;
}
	
li.icon .fukuoka {
    display: inline-block;
    width: 80px;
    height: 65px;
    border-radius: 50%;
    background: #a37159;
    text-align: center;
    line-height: 65px;
    font-size: 18px;
    font-family: "fot-tsukuaoldmin-pr6n", sans-serif;
    font-weight: 300;
    font-style: normal;
    border: 2px solid #333;
}
	
	li.icon .tokyo {
    display: inline-block;
    width: 80px;
    height: 65px;
    border-radius: 50%;
    background: #778a89;
    text-align:center;
    line-height: 65px;
    font-size: 18px;
    font-family: "fot-tsukuaoldmin-pr6n", sans-serif;
    font-weight: 300;
    font-style: normal;
    border: 2px solid #333;
}
	
	li.icon .osaka {
    display: inline-block;
    width: 80px;
    height: 65px;
    border-radius: 50%;
    background: #c5b5a1;
    text-align:center;
    line-height: 65px;
    font-size: 18px;
    font-family: "fot-tsukuaoldmin-pr6n", sans-serif;
    font-weight: 300;
    font-style: normal;
    border: 2px solid #333;
}
	li.icon .matsue {
    display: inline-block;
    width: 80px;
    height: 65px;
    border-radius: 50%;
    background: #e1bb72;
    text-align:center;
    line-height: 65px;
    font-size: 18px;
    font-family: "fot-tsukuaoldmin-pr6n", sans-serif;
    font-weight: 300;
    font-style: normal;
    border: 2px solid #333;
}
	
div#event li.dm-image {
    width: 50%;
    padding: 0%;
    margin: 5% auto;
}
	
    footer div#menu {
        font-family: "fot-tsukuaoldmin-pr6n", sans-serif;
        font-weight: 300;
        font-style: normal;
        /* width: 70%; */
        padding: 10% 10%;
        background: #4d764b;
        display: flex;
        flex-direction: column;
    }
	footer div#menu .left-contents {
    width: 100%;
    margin: 0 0 10%;
}
	footer div#menu .left-contents p.title {
    text-align: left;
    font-size: 20px;
    margin: 0 0 3%;
}
	
	footer div#menu .right-contents {
    width: 100%;
}
	
	footer div#menu .right-contents p.info {
    text-align: left;
    font-size: clamp(0.8rem, 2.5vw, 2.4rem);
    margin: 0 0 5%;
    line-height: 1.5em;
}
	
	footer div#menu .left-contents ul.menu-list {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
    font-size: 15px;
}
	footer div#menu .left-contents ul.menu-list li a {
    font-size: clamp(1rem, 2.5vw, 2.4rem);
    letter-spacing: 0.08em;
    color: #000;
    text-decoration: none;
}
	
	footer div#menu .right-contents ul.sponsored li.label {
    width: 28%;
    font-size: clamp(0.8rem, 2.5vw, 2.4rem);
}
	
	footer div#menu .right-contents ul.sponsored li.company {
    width: 50%;
    font-size: clamp(0.8rem, 2.5vw, 2.4rem);
}
	
	footer .footer-inner p.copy {
    font-size: clamp(0.6rem, 2.5vw, 2.4rem);
    margin: 0;
    padding: 2% 0 2%;
	font-family: "fot-tsukuaoldmin-pr6n", sans-serif;
    font-weight: 300;
    font-style: normal;
}	
	
}