/*++++++++++++++
slide
++++++++++++++*/
section#slide {z-index: 0;margin: 0;}
section#slide .swiper {}
section#slide .swiper-slide {
	/* height: 100% !important; */
}
section#slide .swiper-slide:before {
	content:"";
}

section#slide .swiper-slide .ch {
	width: 90%;
}
section#slide .swiper-slide dt {font-size: 1.5em;}
section#slide .swiper-slide dd {
}
section#slide .swiper-slide dd p {letter-spacing: 1px;}

section#slide video {
	width: auto;
	max-width: 100%;
}
section#slide .swiper-pagination {left: 0 !important;}

section#slide .swiper-pagination-bullet {
    box-sizing: border-box;
    opacity: 1;
    position: relative;
    transform: scale(.7);
    transition: transform .4s ease;
    width: 70px !important;
    height: 70px;
    border-radius: 0;
    text-align: center;
    margin: 0 !important;
    background-color: transparent;
    color: #fff;
    font-weight: 300;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Inter', sans-serif;
    font-size: 1.2em;
}

section#slide .swiper-pagination-bullet + .swiper-pagination-bullet {
    margin-top: 20px;
}

section#slide .swiper-pagination-bullet.swiper-pagination-bullet-active {
    /* transform: scale(1); */
}

section#slide .swiper-pagination-bullet .circle {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

.circle1 {
    stroke-dasharray: 152px;
    stroke-dashoffset: 152px;
}

section#slide .swiper-pagination-bullet-active .circle {
    transform: scale(1) rotate(-90deg);
}
section#slide .swiper-pagination-bullet-active .circle1 {
    animation: sliderPagination 4s linear forwards;
}

.bar {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 2;
    transform: scaleX(0);
    transform-origin: 0 0;
    width: 100%;
    height: 4px;
    background-color: #fff;
    transition: transform 3s linear;
}

section#slide .button {
    margin: 50px 0 0;
    width: auto;
    box-sizing: border-box;
}


/*++++++++++++++
concept
++++++++++++++*/
#concept {
	background: #f7f7f7;
	padding: 50px 0;
	position: relative;
	margin: 0;
}
#concept p {
	line-height: var(--lh-lg);
}
#concept ul.feature  {
	max-width: var(--flex-90);
	padding: 60px 12px 30px 20px;
	margin: -2.5% auto 40px;
	background: var(--white);
}
#concept ul.feature li {
	flex-wrap: wrap;
	margin: 0 0 20px;
}
#concept ul.feature li p {
	letter-spacing: 0;
	line-height: 2;
}
#concept ul.feature li figure {
}

#concept img {
	max-width: 250px;
	/* filter:invert(98%) sepia(100%) saturate(0%) hue-rotate(39deg) brightness(100%) contrast(150%); */
}
#concept ul.feature li figure img {width: 100%;}

/*++++++++++++++
event
++++++++++++++*/
section#event {
	padding: 50px 0 150px;
	position: relative;
	z-index: 0;
}
section#event .inner {
	max-width: 1200px;
}
section#event:before {
	content:"";
	/* background: #f7f7f7; */
	height: 63%;
	display: block;
	position: absolute;
	top: 0;
	width: 100%;
}
section#event .box {
	overflow: hidden;
	display: flex;
	position: relative;
	justify-content: space-between;
}
section#event .event-namebox {
	width: 42%;
	margin: 0 50px 0 0;
}
section#event .event-namebox dl{
	padding: 60px 0 0;
	opacity: 0;
	transition: 2.9s cubic-bezier(0.19, 1, 0.22, 1) 1.2s;
}
section#event .box.swiper-slide-active .event-namebox dl {
	opacity: 1;
	transition: 2.9s cubic-bezier(0.19, 1, 0.22, 1) 1.2s;	
}
section#event .event-namebox dt{
	font-size: 1.5em;
	font-weight: 600;
	margin: 0 0 30px;
}
section#event .event-namebox dd p{
	font-size: 0.9em;
	width: auto;
}

section#event .box figure {
	width: 60%;
	overflow: hidden;
	padding: 30px 0 0;
	display: block;
	transition: 1.6s cubic-bezier(0.165, 0.84, 0.44, 1) .4s;
}
section#event .box figure img {
	width:100%;
	transform: scale(1.16);
	display: block;
	transition: 2.9s cubic-bezier(0.19, 1, 0.22, 1) .4s;
}
section#event .box.swiper-slide-active figure img{
	transform:scale(1.0);
	transition: 2.9s cubic-bezier(0.19, 1, 0.22, 1) .4s;	
}
/*++++++++++++++
guide
++++++++++++++*/
section#guide {
	background: var(--lightgray);
	margin: 0;
	padding: 50px 0;
}
section#guide ol{
	flex-wrap: wrap;
	background: var(--white);
	justify-content: space-between;
}
section#guide li{
	width: 100%;
	margin: 0;
	border: 1px solid #eee;
	box-sizing: border-box;
	padding: 30px;
	border-right: none;
}
section#guide li:last-child{
	margin: 0;
	border-right: 1px solid #eee;
}
section#guide li dt {
	margin: 0 0 10px;
	font-weight: 600;
}
section#guide .gtitle {
	padding: 0 0 18px;
	margin: 0 0 30px;
	border-bottom: 1px solid #eee;
	border-top: none;
}
section#guide .gtitle figure{
	width: 25px;
	margin: 0 auto 10px;
}
section#guide .gtitle b{
	font-size: 1em;
	font-weight: 600;
}
section#guide dl {
	padding: 0;
}
section#guide dt {
	/* margin: 0 0 8px; */
	/* font-size: 1.2em; */
	/* font-weight: 600; */
}
section#guide dd p {
	font-size: var(--font-em);
	color: #333;
}
section#guide dd span {
	
font-size: 0.8em;
}
section#guide dd.indent {
	position:relative;
}
section#guide dd.indent p:before {
	content: "";
	position: absolute;
	width: 5px;
	height: 5px;
	border: 1px solid #666;
	border-radius: 100px;
	top: 10px;
	margin: auto;
	left: 0;
}
section#guide dd.indent p{
	position: relative;
	padding: 0 0 0 13px;
	margin: 0 0 5px;
}

/*++++++++++++++
shop
++++++++++++++*/

section#shop {
    position: relative;
    z-index: 10;
    margin: 0;
    background: var(--lightgray);
    padding: 50px 0;
}
section#shop .section-title {padding: 0;}

section#shop:before {width: 97%;}

section#shop .center {
	
margin: -2% auto 0;
}
section#shop ul.shopbox {padding: 25px 0 0 20px;display: block;}
section#shop ul.shopbox li {
	padding:0 0 50px;
}
section#shop ul.shopbox li figure{
    margin: 0;
}
section#shop ul.shopbox li .shoptitle {
	padding: 10px 0 0;
}
section#shop ul.shopbox li .shoptitle em {
	background: var(--white);
	border: 1px solid var(
	--gray);
	display: block;
	padding: 18px;
	line-height: var(--lh-md);
	border-radius: 5px;
}
}

@media screen and (min-width: 768px) {
/*++++++++++++++
concept
++++++++++++++*/
section#concept {
	padding: 40px 20px;
}
section#concept:after {
	display: none;
}	
section#concept p {
	line-height:2.5
}
section#concept img {
	width: 240px;
}
	
#concept ul.feature li figure {
	width:var(--flex-20);
}	
/*++++++++++++++
slide
++++++++++++++*/
section#slide .swiper-slide .ch {
	top: 0;

}
section#slide .swiper-slide dt {font-size: 1.7em;}
section#slide .swiper-slide dd {
}
section#slide .swiper-slide dd p {font-size: 1em;}

section#slide video {width: 150%;}
section#slide .swiper-pagination {
}

section#slide .swiper-pagination-bullet {
    box-sizing: border-box;
    opacity: 1;
    position: relative;
    transform: scale(.7);
    transition: transform .4s ease;
    width: 70px !important;
    height: 70px;
    border-radius: 0;
    text-align: center;
    margin: 0 !important;
    background-color: transparent;
    color: #fff;
    font-weight: 300;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Inter', sans-serif;
    font-size: 1.2em;
}

section#slide .swiper-pagination-bullet + .swiper-pagination-bullet {
    margin-top: 20px;
}

section#slide .swiper-pagination-bullet.swiper-pagination-bullet-active {
    /* transform: scale(1); */
}

section#slide .swiper-pagination-bullet .circle {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

.circle1 {
    stroke-dasharray: 152px;
    stroke-dashoffset: 152px;
}

section#slide .swiper-pagination-bullet-active .circle {
    transform: scale(1) rotate(-90deg);
}
section#slide .swiper-pagination-bullet-active .circle1 {
    animation: sliderPagination 4s linear forwards;
}

.bar {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 2;
    transform: scaleX(0);
    transform-origin: 0 0;
    width: 100%;
    height: 4px;
    background-color: #fff;
    transition: transform 3s linear;
}


/*++++++++++++++
event
++++++++++++++*/
section#event {
	padding: 50px 0 150px;
	position: relative;
	z-index: 0;
}
section#event .inner {
	max-width: 1200px;
}
section#event:before {
	content:"";
	/* background: #f7f7f7; */
	height: 63%;
	display: block;
	position: absolute;
	top: 0;
	width: 100%;
}
section#event .box {
	overflow: hidden;
	display: flex;
	position: relative;
	justify-content: space-between;
}
section#event .event-namebox {
	width: 42%;
	margin: 0 50px 0 0;
}
section#event .event-namebox dl{
	padding: 60px 0 0;
	opacity: 0;
	transition: 2.9s cubic-bezier(0.19, 1, 0.22, 1) 1.2s;
}
section#event .box.swiper-slide-active .event-namebox dl {
	opacity: 1;
	transition: 2.9s cubic-bezier(0.19, 1, 0.22, 1) 1.2s;	
}
section#event .event-namebox dt{
	font-size: 1.5em;
	font-weight: 600;
	margin: 0 0 30px;
}
section#event .event-namebox dd p{
	font-size: 0.9em;
	width: auto;
}

section#event .box figure {
	width: 60%;
	overflow: hidden;
	padding: 30px 0 0;
	display: block;
	transition: 1.6s cubic-bezier(0.165, 0.84, 0.44, 1) .4s;
}
section#event .box figure img {
	width:100%;
	transform: scale(1.16);
	display: block;
	transition: 2.9s cubic-bezier(0.19, 1, 0.22, 1) .4s;
}
section#event .box.swiper-slide-active figure img{
	transform:scale(1.0);
	transition: 2.9s cubic-bezier(0.19, 1, 0.22, 1) .4s;	
}
/*++++++++++++++
guide
++++++++++++++*/
section#guide {
	
margin: 0 0 150px;
}
section#guide ol{display: block;}
section#guide li{
	width: 100%;
}
section#guide li:last-child{
	margin: 0;
	border-right: 1px solid #eee;
}
section#guide li dt {
}
section#guide .gtitle {display: flex;justify-content: left;}
section#guide .gtitle figure{
	width: 25px;
	margin: 0;
}
section#guide .gtitle b{
	font-size: 1em;
	font-weight: 600;
	width: auto;
	text-align: left;
	margin: 0 0 0 20px;
}
section#guide dl {margin: 0 0 12px;}
section#guide dt {
}
section#guide dd p {
}
section#guide dd span {
	
font-size: 0.8em;
}
section#guide dd.indent {
	position:relative;
}
section#guide dd.indent p:before {
	content: "";
	position: absolute;
	width: 5px;
	height: 5px;
	border: 1px solid #666;
	border-radius: 100px;
	top: 10px;
	margin: auto;
	left: 0;
}
section#guide dd.indent p{
	position: relative;
	padding: 0 0 0 13px;
	margin: 0 0 5px;
}

/*++++++++++++++
shop
++++++++++++++*/

section#shop .section-title {
    margin: 0 auto 0;
}
section#shop .center {
	margin: -2% auto 0;
}
section#shop ul.shopbox {
    max-width: 100%;
    padding: 0 0 0 40px;
}
section#shop ul.shopbox li{
}
section#shop ul.shopbox li figure{
}
section#shop ul.shopbox li .shoptitle {
	/* width: 46%; */
	padding: 30px 0;
}
}

@media screen and (min-width: 1024px) {

/*++++++++++++++
slide
++++++++++++++*/

section#slide .swiper-slide dt {font-size: 2.2em;}



section#slide .swiper-pagination-bullet {

    width: 50px !important;
    height: 50px;
}

section#slide .swiper-pagination-bullet + .swiper-pagination-bullet {
    margin-top: 20px;
}

section#slide .swiper-pagination-bullet.swiper-pagination-bullet-active {
    /* transform: scale(1); */
}

section#slide .swiper-pagination-bullet .circle {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

.bar {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 2;
    transform: scaleX(0);
    transform-origin: 0 0;
    width: 100%;
    height: 4px;
    background-color: #fff;
    transition: transform 3s linear;
}

#concept ul.feature li figure img {
}
/*++++++++++++++
event
++++++++++++++*/
section#event {
	padding: 50px 0 150px;
	position: relative;
	z-index: 0;
}
section#event .inner {
	max-width: 1200px;
}
section#event:before {
	content:"";
	/* background: #f7f7f7; */
	height: 63%;
	display: block;
	position: absolute;
	top: 0;
	width: 100%;
}
section#event .box {
	overflow: hidden;
	display: flex;
	position: relative;
	justify-content: space-between;
}
section#event .event-namebox {
	width: 42%;
	margin: 0 50px 0 0;
}
section#event .event-namebox dl{
	padding: 60px 0 0;
	opacity: 0;
	transition: 2.9s cubic-bezier(0.19, 1, 0.22, 1) 1.2s;
}
section#event .box.swiper-slide-active .event-namebox dl {
	opacity: 1;
	transition: 2.9s cubic-bezier(0.19, 1, 0.22, 1) 1.2s;	
}
section#event .event-namebox dt{
	font-size: 1.5em;
	font-weight: 600;
	margin: 0 0 30px;
}
section#event .event-namebox dd p{
	font-size: 0.9em;
	width: auto;
}

section#event .box figure {
	width: 60%;
	overflow: hidden;
	padding: 30px 0 0;
	display: block;
	transition: 1.6s cubic-bezier(0.165, 0.84, 0.44, 1) .4s;
}
section#event .box figure img {
	width:100%;
	transform: scale(1.16);
	display: block;
	transition: 2.9s cubic-bezier(0.19, 1, 0.22, 1) .4s;
}
section#event .box.swiper-slide-active figure img{
	transform:scale(1.0);
	transition: 2.9s cubic-bezier(0.19, 1, 0.22, 1) .4s;	
}
/*++++++++++++++
guide
++++++++++++++*/
section#guide {
	margin: 0;
	padding: 80px 0;
}
section#guide ol{
}
section#guide li{padding: 30px;}

section#guide .gtitle figure{
	width: 20px;
}

section#guide dl {
	padding: 0;
}
section#guide dt {
	font-size: 1em;
}
section#guide dd p {
	font-size: 0.8em;
}
section#guide dd span {
	
font-size: 0.8em;
}
section#guide dd.indent {
	position:relative;
}
section#guide dd.indent p:before {
	content: "";
	position: absolute;
	width: 5px;
	height: 5px;
	border: 1px solid #666;
	border-radius: 100px;
	top: 10px;
	margin: auto;
	left: 0;
}
section#guide dd.indent p{
	position: relative;
	padding: 0 0 0 13px;
	margin: 0 0 5px;
}

/*++++++++++++++
shop
++++++++++++++*/
section#shop {padding: 80px 0;}

section#shop .section-title {max-width: 88%;}

section#shop .center {
	
margin: -2% auto 0;
}
section#shop ul.shopbox {margin: auto;display: flex;gap: 30px;}
section#shop ul.shopbox li{
}
section#shop ul.shopbox li figure{height: auto;}
section#shop ul.shopbox li .shoptitle {
	
/* width: 46%; */
	
padding: 30px 0;
}
}

@media screen and (min-width: 1110px) {
/*++++++++++++++
concept
++++++++++++++*/
section#concept {
	background: #f7f7f7;
	padding: 50px 0;
	position: relative;
	margin: 0;
}
section#concept:after {
	content:"";
}
section#concept .section-title dd {
	padding: 0;
}
section#concept .section-title dd:before {
	display: none;
}
section#concept p {
	line-height: 2.5;
}
#concept ul.feature  {
	max-width: 900px;
	background: #fff;
	padding: 60px 30px 30px;
	justify-content: space-between;
	margin:-0.8% auto 40px;
}
#concept img {
	max-width: 200px;
	/* filter:invert(98%) sepia(100%) saturate(0%) hue-rotate(39deg) brightness(100%) contrast(150%); */
}
#concept ul.feature li figure {
	width: 200px;
}
#concept ul.feature li figure img {max-width: 100%;width: auto;}	
#concept ul.feature dl {
	width: var(--flex-95);
}	
/*++++++++++++++
slide
++++++++++++++*/
section#slide {
	/* background: #fff; */
	position: fixed;
	z-index: -1;
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	top: 0;
	width: 100%;
	height: 100vh;
}
section#slide .swiper {
	padding: 0 !important;
}
section#slide .swiper-slide {
	height: 100% !important;
}
section#slide .swiper-slide:before {
	content:"";
	background: rgba(0,0,0,0.2);
	position: absolute;
	width: 100%;
	height: 100%;
}

section#slide .swiper-slide .ch {
	position: fixed;
	top: -10%;
	bottom: 0;
	margin: auto;
	left: 0;
	right: 0;
	width: 100%;
	justify-content: center;
	height: 100%;
	display: flex;
	align-items: center;
	z-index: 999;
}
section#slide .swiper-slide dt {
	text-align: center;
	color: #fff;
	font-size: 3em;
	font-weight: 400;
	letter-spacing: 3px;
	margin: 0 0 20px;
	font-family:'Noto Serif JP', serif;
}
section#slide .swiper-slide dd {
	text-align: center;
}
section#slide .swiper-slide dd p {
	text-align: center;
	color: #fff;
	font-size: 1.3em;
	letter-spacing: 5px;
	line-height: 1.8;
	font-weight: 400;
	font-family:'Noto Serif JP', serif;	
}

section#slide video {
	width: 100%;
	vertical-align: bottom;
	z-index: 0;
}
section#slide .swiper-pagination {
    display: inline-block;
    width: 100%;
    left: auto;
    height: 48px;
    right: 0;
    bottom: 20px;
    bottom: 22% !important;
    display: flex;
    justify-content: center;
    margin: auto;
}

section#slide .swiper-pagination-bullet {
    box-sizing: border-box;
    opacity: 1;
    position: relative;
    transform: scale(.7);
    transition: transform .4s ease;
    width: 70px !important;
    height: 70px;
    border-radius: 0;
    text-align: center;
    margin: 0 !important;
    background-color: transparent;
    color: #fff;
    font-weight: 300;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Inter', sans-serif;
    font-size: 1.2em;
}

section#slide .swiper-pagination-bullet + .swiper-pagination-bullet {
    margin-top: 20px;
}

section#slide .swiper-pagination-bullet.swiper-pagination-bullet-active {
    /* transform: scale(1); */
}

section#slide .swiper-pagination-bullet .circle {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

.circle1 {
    stroke-dasharray: 152px;
    stroke-dashoffset: 152px;
}

section#slide .swiper-pagination-bullet-active .circle {
    transform: scale(1) rotate(-90deg);
}
section#slide .swiper-pagination-bullet-active .circle1 {
    animation: sliderPagination 4s linear forwards;
}

.bar {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 2;
    transform: scaleX(0);
    transform-origin: 0 0;
    width: 100%;
    height: 4px;
    background-color: #fff;
    transition: transform 3s linear;
}

@keyframes sliderPagination {
  100% {
    stroke-dashoffset: 0;
    }
}

section#slide .button {
	background: none;
	border: 1px solid #fff;
	color: #fff;
	font-size: 0.9em;
	letter-spacing:1px;
	padding: 12px 80px 15px;
	display: inline-block !important;
	text-align: center;
}
/*++++++++++++++
event
++++++++++++++*/
section#event {
	padding: 50px 0 150px;
	position: relative;
	z-index: 0;
}
section#event .inner {
	max-width: 1200px;
}
section#event:before {
	content:"";
	/* background: #f7f7f7; */
	height: 63%;
	display: block;
	position: absolute;
	top: 0;
	width: 100%;
}
section#event .box {
	overflow: hidden;
	display: flex;
	position: relative;
	justify-content: space-between;
}
section#event .event-namebox {
	width: 42%;
	margin: 0 50px 0 0;
}
section#event .event-namebox dl{
	padding: 60px 0 0;
	opacity: 0;
	transition: 2.9s cubic-bezier(0.19, 1, 0.22, 1) 1.2s;
}
section#event .box.swiper-slide-active .event-namebox dl {
	opacity: 1;
	transition: 2.9s cubic-bezier(0.19, 1, 0.22, 1) 1.2s;	
}
section#event .event-namebox dt{
	font-size: 1.5em;
	font-weight: 600;
	margin: 0 0 30px;
}
section#event .event-namebox dd p{
	font-size: 0.9em;
	width: auto;
}

section#event .box figure {
	width: 60%;
	overflow: hidden;
	padding: 30px 0 0;
	display: block;
	transition: 1.6s cubic-bezier(0.165, 0.84, 0.44, 1) .4s;
}
section#event .box figure img {
	width:100%;
	transform: scale(1.16);
	display: block;
	transition: 2.9s cubic-bezier(0.19, 1, 0.22, 1) .4s;
}
section#event .box.swiper-slide-active figure img{
	transform:scale(1.0);
	transition: 2.9s cubic-bezier(0.19, 1, 0.22, 1) .4s;	
}
/*++++++++++++++
guide
++++++++++++++*/
section#guide {
	background: var(--lightgray);
	margin: 0;
}
section#guide ol{
	flex-wrap: wrap;
	background: var(--white);
	justify-content: space-between;
}
section#guide li{
	width: 33%;
	margin: 0;
	border: 1px solid #eee;
	box-sizing: border-box;
	padding: 40px 35px;
	border-right: none;
}
section#guide li:last-child{
	margin: 0;
	border-right: 1px solid #eee;
}
section#guide li dt {
	margin: 0 0 10px;
	/* font-weight: 600; */
}
section#guide .gtitle {
	padding: 0 0 18px;
	margin: 0 0 30px;
	border-bottom: 1px solid #eee;
	border-top: none;
}
section#guide .gtitle figure{
	width: 25px;
	margin: 0 auto 10px;
}
section#guide .gtitle b{
	font-size: 1em;
	font-weight: 600;
}
section#guide dl {
	padding: 0;
}
section#guide dt {
	/* margin: 0 0 8px; */
	/* font-size: 1.2em; */
	/* font-weight: 600; */
}
section#guide dd p {
	font-size: var(--font-em);
	color: #333;
}
section#guide dd span {
	
font-size: 0.8em;
}
section#guide dd.indent {
	position:relative;
}
section#guide dd.indent p:before {
	content: "";
	position: absolute;
	width: 5px;
	height: 5px;
	border: 1px solid #666;
	border-radius: 100px;
	top: 10px;
	margin: auto;
	left: 0;
}
section#guide dd.indent p{
	position: relative;
	padding: 0 0 0 13px;
	margin: 0 0 5px;
}


/*++++++++++++++
shop
++++++++++++++*/
section#shop {
    padding: 80px 0;
}

section#shop .section-title {
	margin: 0 auto 20px;
	}

section#shop .center {
	margin: -2% auto 0;
}
section#shop ul.shopbox {
    justify-content: space-between;
    gap: 30px;
    display: flex;
}
section#shop ul.shopbox li{
    width: 100%;
	padding: 0;
    justify-content: space-between;
}
section#shop ul.shopbox li figure{
    background: #eee;
    /* height: 300px; */
    width: 100%;
    margin: 0;
}
section#shop ul.shopbox li .shoptitle {
    padding: 20px 0;
}

}