@charset "utf-8";

html {
	color:#000;
	background:#FFF;
	overflow-y: scroll;
}

html,body,div,span,applet,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,big,cite,code,
del,dfn,em,img,ins,kbd,q,s,samp,
small,strike,strong,sub,sup,tt,var,
b,u,i,center,
dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td,
article,aside,canvas,details,embed,
figure,figcaption,footer,header,hgroup,
menu,nav,output,ruby,section,summary,
time,mark,audio,video {
	margin: 0;
	padding: 0;
	border: 0;
	font-style:normal;
	font-weight: normal;
	font-size: 100%;
	vertical-align: baseline;
	word-wrap:break-word;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
	display: block;
}

blockquote,q {
	quotes: none;
}

blockquote:before,blockquote:after,
q:before,q:after {
	content: '';
	content: none;
}

input,textarea {
	margin: 0;
	padding: 0;
}

ol,ul{
	list-style:none;
}

table {
	border-collapse:collapse;
	border-spacing:0;
}

address,caption,cite,code,dfn,em,strong,th,var {
	font-style:normal;
	font-weight:normal;
}

ol,ul {
	list-style:none;
}

caption,th {
	text-align:left;
}

abbr,acronym {
	border:0;
	font-variant:normal;
}

input,textarea,select {
	font-family:inherit;
	font-size:inherit;
	font-weight:inherit;
	*font-size:100%;
}

legend {
	color:#000;
}

a {
    color: #000;
    text-decoration: none;
    transition: .4s
}

a:focus {
	outline:none;
}
a:hover {
	opacity:0.7;
}
.preload * {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -ms-transition: none !important;
    -o-transition: none !important;
    transition: none !important
}
/**
 *
 * 
 *
 */
 
 
body{
	font-family:"Hiragino Maru Gothic Pro","ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO","Kosugi Maru";
	font-size: 1.5rem;
	line-height: 1.8;
	-webkit-text-size-adjust: 100%;
	overflow: hidden;
}



img{
	width: 100%;
	vertical-align: middle;
}

button, select, input, input[type=submit] {
    -webkit-appearance: none;
    background-color: rgba(0, 0, 0, 0);
    border: none;
    border-radius: 0;
}
/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }

@media screen and (max-width: 599px) {
.pc { display: none !important; }
.sp { display: block !important; }
}

.content{
	max-width: 750px;
	margin: auto;
}
.content_area{
	max-width: 670px;
	margin: auto;
	padding: 0 5%;
}	
section {
    position: relative
}

.main {
    background-color: #FFFACF;
    background-image: url("../images/main.svg");
    background-size: contain;
}

/* モーダル */
.modal {
	display: none;
	position: fixed;
	z-index: 99;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgba(0, 0, 0, 0.5);
}
.modal-content {
	position: relative;
	background-color: #fff;
	margin: 10% auto;
	padding: 20px;
	max-width: 80%;
	width: 500px;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
	animation: fadeIn 0.5s;
}
	@keyframes fadeIn {
		from { opacity: 0; }
		to { opacity: 1; }
	}
.modal-content a:hover{
	opacity:1;
}
.modal .close {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 55px;
	height: 55px;
	background-image: url('../images/popup_close.png');
	background-size: cover;
	cursor: pointer;
}
.modal .banner {
	display: block;
	text-align: center;
}
.modal .banner img {
	width: 100%;
	height: auto;
}

/* PCメニュー */

.pc-header {
    position: fixed;
	top: 0;
    right: 0;
    width: calc((85% - 750px)/2);
    padding: 80px 4%;
    display: flex;
    flex-direction: column;
    gap: 20px
}
.pc-header_sns {
    position: relative;
    display: flex;
    justify-content: space-between;
    padding: 14% 8%
}
.pc-header_sns .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 0
}
.pc-header_snslink {
    position: relative;
    display: block;
    width: 27%;
    z-index: 1
}

@media screen and (max-width: 1250px) {
.pc-header{
	width: calc((90% - 750px) / 2);
    padding: 80px 3%;
}
.pc-header_sns{
	padding: 10% 8%;
}
}

@media screen and (max-width: 1100px) {
.pc-header{
	width: calc((95% - 750px) / 2);
    padding: 60px 1%;
}
}

@media screen and (max-width: 1000px) {
.pc-header{
	gap: 10px;
}
.pc-header_sns {
     padding: 0% 8%;
}
}
@media screen and (max-width: 950px) {
.pc-header {
	display:none
}
}

/* SPメニュー */
.sp-header {
    display: none;
    pointer-events: none;
}

@media screen and (max-width: 950px) {
.sp-header {
	display: flex;
	pointer-events: all;
	justify-content: space-between;
    align-items: flex-start;
    position: fixed;
    top: 0;
    width: 750px;
    max-width: 100%;
    padding: 20px 10px;
    z-index: 10;
}
.sp-sns {
    display: flex;
    gap: 12px;
    justify-content: space-between;
    padding: 10px 25px;
}
.sp-snslink img {
    width: 60px;
}
.p-menuOpen {
    padding: 20px 30px;
    width: min(125px, 30%);
}
.p-menu {
    position: fixed;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    background:url(../images/sp_menu_back.png);
    padding: 50px 52px;
    z-index: 11;
    opacity: 0;
    pointer-events: none;
    background-size: contain;
	background-repeat: no-repeat;
	text-align: center;
}
.is-navOpen .p-menu {
    opacity: 1;
    pointer-events: all;
    transition: opacity .2s;
}
.is-navOpen .p-menuOpen {
    display: none;
}
.p-menu__close {
    position: absolute;
    width: 55px;
    right: -22px;
    top: -22px;
    padding: 0;
}
.p-menu__link {
    display: block;
    padding: 20px 0;
    border-bottom: 2px solid #EA4D0C;
    width: min(300px, 55vw);
}

.p-menu__link:last-child img{
	width: 85%;
}
.pmtop{
	width: 30%;
}
}

/* top */
#top{
	background:#FBCE6E;
}
.bg_ashi{
	background:url(../images/ashiato.png);
	background-size: cover;
}	
.fukidasi {
    position: relative;
    width: 87%;
    padding: 125px 30px 30px;
    margin: 0 auto;
    opacity: 0;
    animation: mvFade03 1.5s forwards;
	margin-top: -80px;
}
.fukidasi {
    animation: .6s fadeBounce 2.3s forwards;
}
.fukidashi_bg {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 0
}
.fukidasi_ttl {
    position: relative;
    width: 88%;
    z-index: 1;
    margin-left: 4%
}

.fukidasi p {
    position: relative;
    z-index: 1;
    margin-top: 24px;
    font-weight: 700;
    line-height: 1.6;
    text-align: center;
    font-size: 1.3em;
}
.page_link_area{
	margin: 100px auto 0;
    padding-bottom: 30px;
}
.page_link_flex{
	display: flex;
    justify-content: space-between;
}
.page_link_flex li{
	width: 31%;
}

/* タイムスリップ */
#gwevent{
	background: #6A3906;
	padding: 40px 0;
}
.time_area{
	background:url(../images/flilm.png);
	background-size: contain;
    background-repeat: repeat;
}
.time_cont{
	background:url(../images/time_slip_back.png);
	background-size: cover;
	margin: 0 55px;
	position: relative;
}
.watch{
	position: absolute;
    top: 13%;
    right: -8%;
    width: 36%;
}
.nw_chara{
	position: absolute;
    top: 40%;
    width: 20%;
    left: -6%;
}
.times_ttl{
	padding: 30px 40px;
	position: relative;
}
.tm01{
	border-radius: 0 0 20px 20px;
}
.tm02,.tm03,.tm04{
	margin: 30px 55px;
	border-radius:20px;
	padding-bottom: 5px;
}
.tm03,.tm04{
	margin: 30px 55px;
	border-radius:20px;
	padding-bottom: 25px;
}
.tm04{
	background-position: top center;
}
.times_subttl{
	padding: 20px 15px;
}
.materials_img{
	width: 85%;
    margin: auto;
    padding: 15px 0;
	text-align: center;
}

.mt02 img{
	width: 80%;
}
.tm05{
	border-radius: 20px 20px 0 0;
	padding-bottom: 40px;
	background-position: center;
}

.bk_orange{
	background: #FBCE6E;
}	
.cont_line_link{
	width: 80%;
    margin: auto;
    padding: 15px 0;
}
.sub03{
	padding: 30px
}
.retoro_link{
	width: 70%;
    margin: auto;
}
.collaboration_subttl{
	width: 85%;
    margin: -10px auto 0;
}
.collaboration_img{
	width: 95%;
    margin: auto;
    padding: 10px 0;
}
.photo_img{
	font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
	text-align: right;
	font-size: .7em;
	margin: -10px auto;
	padding-right: 15px;
}
.photospot{
	width: 75%;
    margin: -10px auto 0;
}
.pi02 {
    padding: 15px 50px 0 0;
}
.exhibition_ttl{
	width: 75%;
    margin: auto;
}
.extx01{
	width: 85%;
    margin: auto;
}
.exhibition_img{
	width: 70%;
    margin: auto;
    padding: 10px 0 30px;
}
.extx02{
	width: 70%;
    margin: auto;
}
.eximg02{
	padding: 10px 0 15px;
}
.dashed{
	width: 95%;
    margin: auto;
}
.expo_info_ttl{
	width: 85%;
    margin: 10px auto 0;
}
.expo_info{
	width: 75%;
    margin: auto;
}
.expo_info_img{
	width: 80%;
    margin: -5px auto 0;
}
.extx03{
	width: 90%;
    margin: auto;
}
.eximg03{
	padding: 20px 0 10px;
}
.extx04{
	width: 75%;
    margin: 10px auto 0;
}
.eximg04{
	padding: 20px 0;
}
.sub02{
	width: 90%;
    margin: auto;
    padding: 30px 0 20px;
}

/* イベント */
#event{
    padding: 45px 0;
}
.event_img_area{
	background:#D6C7AC;
	padding: 10px;
}
.namba_sunremo,.gazouprezent{
	margin-top: 15px;
}
.photocontest,.sunremo{
	margin-top: 25px;
}	

/* Instagram */
.insta_ashiato{
	background:url(../images/instattl_back.png);
	background-size: 100%;
	background-repeat: no-repeat;
}
.insta_ttl{
	width: 50%;
    margin: auto;
    padding: 45px 0;
}
.insta_flex{
	display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.gallery_img{
	width: 48%;
	margin-bottom: 25px;
}

/* なんばワンフレンズ */
.nw_friends{
    padding: 45px 0;
    
}	
.nw_friends_area{
	background: #fff;
    margin-top: -2px;
    padding: 0 40px 40px;
}
.nw_friends_ttl{
	width: 55%;
    margin: -25px auto 0;
}
.nabawan{
	text-align: center;
    margin-top: 75px;
}
.nabawan img{
	width: 65%;
}
.nw_friends_flex{
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: center;
	gap: 40px 9%;
	margin-top: 60px;
}
.nw_friends_item{
	width: 44%;
    margin-bottom: 40px;
}
.bernerdon{
	width: 126.5%;
}
.bullud{
	width: 120%;
    margin-left: -10%;
}

@media screen and (max-width: 700px) {
	.fukidasi {
		padding: 105px 25px 30px;
	}
	.fukidasi p{
		font-size: 1.1em;
	}
	.page_link_area {
    	margin: 80px auto 0;
    }
    .times_ttl {
    	padding: 30px 30px;
    }
    .cont_line_link {
    	width: 83%;
    	padding: 10px 0;
    }
    .retoro_link {
    	width: 75%;
    }
    .materials_img {
    	width: 90%;
    }
    .photo_img{
    	font-size: .6em;
    }
    .pi02 {
    	padding: 15px 40px 0 0;
}
}
@media screen and (max-width: 599px) {
	 .fukidasi {
        padding: 95px 25px 30px;
    }
	.fukidasi p {
        font-size: 1em;
    }
    .page_link_area {
        margin: 60px auto 0;
    }
    .times_ttl {
        padding: 20px 25px;
    }
    .collaboration_img {
    	padding: 20px 15px;
	}
	.sub03 {
    	padding: 25px;
	}
	.retoro_link {
        width: 80%;
    }
    .nw_friends_ttl {
    	width: 65%;
    	margin: -5px auto 0;
	}
	.nabawan{
		margin-top: 60px;
	}
	.exhibition_img {
    	width: 75%;
    }
	}
	
@media screen and (max-width: 500px) {
	.sp-sns{
		gap: 5px;
		padding: 5px 15px;
	}
	.sp-header{
		padding: 10px 5px;
	}
    .sp-snslink img {
        width: 45px;
    }
	.p-menuOpen {
        padding: 10px 30px;
        width: min(105px, 30%);
    }
    .p-menu{
    	padding: 20px 45px 40px;
    	top: 70px;
    }
    .p-menu__link{
    	padding: 20px 0 15px;
    	width: min(240px, 55vw);
    }
    .fukidasi {
        padding: 75px 20px 30px;
        margin-top: -50px;
    }
    .fukidasi_ttl{
    	width: 91%;
		margin-left: 2%;
   	}
    .fukidasi p{
		font-size: .7em;
        padding-right: 5px;
		margin-top: 15px;
	}
	.page_link_area {
        margin: 50px auto 0;
    }
	.time_cont{
		margin: 0 35px;
	}
	.tm01{
		border-radius: 0 0 15px 15px;
	}
	.times_ttl {
		padding: 20px 10px;
	}
	.nw_chara{
		top: 45%;
    	width: 18%;
    }
    .tm02,.tm03,.tm04{
    	margin: 15px 35px;
    	border-radius: 15px;
    	padding-bottom: 10px;
    }
    .sub02 {
    	padding: 20px 15px 20px;
	}
	.sub03 {
        padding: 20px 15px 10px;
    }
	.collaboration_img {
        padding: 20px 15px 10px;
    }
	.tm05{
		margin: 15px 35px;
	}
	.event {
    	padding: 35px 0;
	}
	.insta_ttl {
		padding: 30px 0;
	}
	.nw_friends {
    	padding: 30px 0;
	}
	.nw_friends_area{
		padding: 0 20px 40px;
	}
	.nabawan {
        margin-top: 50px;
    }
	.nw_friends_flex{
		gap: 24px 8%;
		margin-top: 45px;
	}
	.photo_img {
        font-size: .5em;
    }
    .extx01 {
    	width: 90%;
    	margin: -5px auto;
	}
	.times_subttl {
    	padding: 15px 15px;
	}
	.exhibition_img {
    	width: 75%;
    	margin: auto;
    	padding: 5px 0 15px;
	}
	.extx02 {
    	width: 80%;
    	margin: -5px auto;
	}
	.sub02 {
        padding: 15px;
    }
   .materials_img {
        width: 100%;
    }

    .exhibition_img {
        width: 80%;
    }
    .photo_img {
        font-size: .4em;
        padding-top: 5px;
    }
    .pi02 {
        padding: 15px 30px 0 0;
    }
    .pi03{
    	padding: 5px 15px 10px;
    }
	}

@media screen and (max-width: 400px) {
	.sp-header{
		padding: 10px 5px;
	}
	.modal-content{
		padding: 15px;
		max-width: 75%;
	}
    .p-menuOpen {
        padding: 10px 20px;
        width: min(105px, 22%);
    }
    .p-menu__close{
    	width: 50px;
    }
    .p-menu__link {
        padding: 15px 0 15px;
    }
	.pmtop {
		width: 28%;
    }
    .fukidasi {
    	width: 85%;
    	padding: 65px 20px 30px;
        margin-top: -40px;
    }
    .fukidasi_ttl {
        width: 95%;
        margin-left: 0%;
    }
	.fukidasi p {
        font-size: .65em;
     }
     .page_link_area {
        margin: 40px auto 0;
    }
    .sub03 {
        padding: 15px 15px 10px;
    }
    .tm05{
    	padding-bottom: 20px;
	}
	.materials_img {
        width: 100%;
    }
}
@media screen and (max-width: 380px) {
    .fukidasi p {
        font-size: .6em;
    }
    .sub03 {
        padding: 15px 15px 0px;
    }
    .tm05 {
        padding-bottom: 15px;
    }
    }

@media screen and (max-width: 360px) {
	.sp-header{
		padding: 5px 0;
	}
	.sp-snslink img {
        width: 40px;
    }
	.p-menuOpen {
        padding: 10px 15px;
        width: min(105px, 20%);
    }
	.p-menu__link {
        padding: 13px 0 13px;
    }
    .fukidasi{
    	margin-top: -40px;
    }
    .fukidasi p {
        font-size: .55em;
    }
}
@media screen and (max-width: 320px) {
	.modal .close{
		width: 40px;
    	height: 40px;
    }
	.p-menu__close {
        width: 45px;
        right: -15px;
    }
	.p-menu__link {
        padding: 10px 0 10px;
    }
	.fukidasi {
        padding: 55px 20px 30px;
        width: 87%;
	}
	.fukidasi p{
		margin-top: 10px;
	}
	.namba_wan {
        padding: 80px 0 35px;
    }
    #gwevent{
    	padding: 35px 0;
	}
	.time_cont {
        margin: 0 25px;
    }
    .times_ttl {
        padding: 15px 10px;
    }
    .tm02, .tm03 {
        margin: 15px 25px;
     }
     .times_subttl {
    	padding: 10px 10px 15px;
	}
	.materials_img {
        padding: 0px 25px 20px;
    }
    .cont_line_link{
    	padding: 0 0 5px;
    }
    .sub03{
    	padding: 10px 10px 0;
    }
    .tm05{
    	margin: 10px 25px;
    }
	.insta_ttl {
        padding: 20px 0;
    }
}


/* アニメーション */

@keyframes fadeUp {
    0% {
        opacity: 0;
        transform: translateY(20px)
    }

    100% {
        opacity: 1;
        transform: translateY(0px)
    }
}

@keyframes fadeDown {
    0% {
        opacity: 0;
        transform: translateY(-20px)
    }

    100% {
        opacity: 1;
        transform: translateY(0px)
    }
}

@keyframes fadeRight {
    0% {
        opacity: 0;
        transform: translateX(-20px)
    }

    100% {
        opacity: 1;
        transform: translateX(0px)
    }
}

@keyframes fadeLeft {
    0% {
        opacity: 0;
        transform: translateX(30px)
    }

    100% {
        opacity: 1;
        transform: translateX(0px)
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

@keyframes fadeBounce {
    0% {
        opacity: 0;
        transform: translateY(0px)
    }

    30% {
        opacity: 1;
        transform: translateY(-25px)
    }

    50% {
        opacity: 1;
        transform: translateY(0px)
    }

    70% {
        opacity: 1;
        transform: translateY(-10px)
    }

    90% {
        opacity: 1;
        transform: translateY(0px)
    }

    100% {
        opacity: 1;
        transform: translateY(0px)
    }
}

.p-animateFadeUp {
    opacity: 0;
    transform: translateY(20px)
}

.is-inview .p-animateFadeUp,.p-animateFadeUp.is-inview {
    animation: fadeUp .3s ease forwards
}

.p-animateFadeDown {
    opacity: 0;
    transform: translateY(-20px)
}

.is-inview .p-animateFadeDown,.p-animateFadeDown.is-inview {
    animation: fadeDown .5s cubic-bezier(0.455, 0.03, 0.515, 0.955) forwards
}

.p-animateFadeIn {
    opacity: 0
}

.is-inview .p-animateFadeIn,.p-animateFadeIn.is-inview {
    opacity: 1;
    transition: opacity .6s cubic-bezier(0.445, 0.05, 0.55, 0.95)
}

.p-animateFadeLeft {
    opacity: 0;
    transform: translateX(30px)
}

.is-inview .p-animateFadeLeft,.p-animateFadeLeft.is-inview {
    animation: fadeLeft .4s cubic-bezier(0.445, 0.05, 0.55, 0.95) forwards
}

.p-animateFadeRight {
    opacity: 0;
    transform: translateX(-30px)
}

.is-inview .p-animateFadeRight,.p-animateFadeRight.is-inview {
    animation: fadeRight .4s cubic-bezier(0.445, 0.05, 0.55, 0.95) forwards
}

.p-animateFadeBounce {
    opacity: 0;
    transform: translateY(0px)
}

.is-inview .p-animateFadeBounce,.p-animateFadeBounce.is-inview {
    animation: fadeBounce .6s cubic-bezier(0.445, 0.05, 0.55, 0.95) forwards
}

@keyframes blockScroll {
    0% {
        transform-origin: left;
        transform: translateX(-103%)
    }

    40% {
        transform-origin: left;
        transform: translateX(0)
    }

    60% {
        transform-origin: right;
        transform: translateX(0)
    }

    100% {
        transform-origin: right;
        transform: translateX(103%)
    }
}

@keyframes blockScrollToLeft {
    0% {
        transform-origin: right;
        transform: translateX(103%)
    }

    40% {
        transform-origin: right;
        transform: translateX(0)
    }

    60% {
        transform-origin: left;
        transform: translateX(0)
    }

    100% {
        transform-origin: left;
        transform: translateX(-103%)
    }
}

.is-inview .p-animateDelay02,.p-animateDelay02.is-inview {
    animation-delay: .2s
}

.is-inview .p-animateDelay03,.p-animateDelay03.is-inview {
    animation-delay: .3s
}

@keyframes mvFade01 {
    0% {
        opacity: 1
    }

    32% {
        opacity: 1
    }

    33% {
        opacity: 0
    }

    66% {
        opacity: 0
    }

    67% {
        opacity: 0
    }

    100% {
        opacity: 0
    }
}

@keyframes mvFade02 {
    0% {
        opacity: 0
    }

    32% {
        opacity: 0
    }

    33% {
        opacity: 1
    }

    66% {
        opacity: 1
    }

    67% {
        opacity: 0
    }

    100% {
        opacity: 0
    }
}

@keyframes mvFade03 {
    0% {
        opacity: 0
    }

    32% {
        opacity: 0
    }

    33% {
        opacity: 0
    }

    66% {
        opacity: 0
    }

    67% {
        opacity: 1
    }

    100% {
        opacity: 1
    }
}




.topBtn {
	position:fixed; /*固定*/
	bottom:20px; /*場所を右下に移動*/
	right: calc(50% - 350px);
	display:block; /*aタグをblock要素に変更*/
}

.topBtn:hover {
	opacity:0.7;
}
.tbt{
	width: 175px;
}
/*footer */
.footer {
	background-color: #fff;
	height:300px;
	line-height:300px;
	text-align:center;
}
.footer_logo{
	width: 22%;
    margin: auto;
}

@media screen and (max-width: 750px) {
.topBtn{
	right: 3%;
}
.tbt {
    width: 135px;
}
.footer_logo {
    width: 25%;
}
}
@media screen and (max-width: 500px) {
    .tbt {
        width: 100px;
    }
    .footer {
	height:200px;
	line-height:200px;
}
}
@media screen and (max-width: 400px) {
.footer_logo {
        width: 30%;
    }
}
@media screen and (max-width: 380px) {
    .tbt {
        width: 90px;
    }
    }