@charset "utf-8";

/*////////////////////////////////////////////////////////

css/style.css

/////////////////////////////////////////////////////////*/
/* ----------------------------------------------- 
	
	1: pc
	
	2: Font 

	3: contents
	
	4: table

	
 ----------------------------------------------- */
 
/* --------------------------------------------
1: pc
-------------------------------------------- */
body ::selection {background-color: #e5eef9;}
img{width:100%;height:auto;}

main#main{position: relative;}
main#main:before{
    content: '';
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: url(./img/bg.png) center top;
    background-size: 100% auto;	
}

main.mainin {
position: relative;	
max-width: 768px!important;
margin: 0 auto;
height: 100%;
}

#main{display: inline-block !important;height: auto !important;}
main.mainin{display: block !important;}
.main_ttl{width: 100%;}
.main_ttl img{width: 100%;}

.pc_nav{
	position:fixed;
	top: 50%;
    right: 3%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);	
}
.pc_nav li{
	margin:1rem 0;
	max-width: 458px;
}


.pc_kazari{position:fixed;
	top: 50%;
    left: 5.5%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
	max-width: 377px;
	width:23%;
}

#gallery{
position:relative;
background-color: #e5eef4;
opacity: 0.8;
background-image:  linear-gradient(#f7f7f7 1px, transparent 1px), linear-gradient(to right, #f7f7f7 1px, #e5eef4 1px);
background-size: 40px 40px;		
}
#sns{
position:relative;
background-color:#fdfbf1;
padding-top: 100px;	
padding-bottom: 100px;	
}
.ttl_sns{
max-width: 310px;position:absolute;top:-45px;left: 50%;transform: translateX(-50%);
}
.x_btn{
	max-width: 637px;margin:0 auto;width:90%;
}
.kazari11{top:0;left:5%;max-width:90px;width: 12%;}
.kazari12{top:0;right:5%;max-width:79px;width: 11%;}


.kazari{
	position:absolute;
}
.kazari01{top: 8%;left: 2%;width: 10%;max-width: 86px;}
.kazari02{top: 14%;left: 50%;transform: translateX(-50%);width: 7%;max-width: 51px;}
.kazari03{top: 10%;right: 2%;width: 10%;max-width: 84px;}
.kazari04{top: 32%;right: 2%;width:7%;max-width:51px;}
.kazari05{top: 36%;right: 11%;width:11%;max-width:79px;}
.kazari06{top: 42%;left: 5%;width:23%;max-width:170px;}
.kazari07{top: 67%;left: 50%;transform: translateX(-50%);width:8%;max-width:60px;}
.kazari08{top: 85%;left: 2%;width:14%;max-width:108px;}
.kazari09{top:88%;right: 5%;width:11%;max-width:79px;}
.kazari10{top:90%;left:14%;width:7%;max-width:51px;}

.kazari_chara01{top: 32%;left: 2%;max-width:159px;}
.kazari_chara02{top: 41%;right: 2%;max-width:159px;}

#goods{background-color: #fdfbf1;padding-bottom: 4rem;}
.goods{max-width: 690px;margin: 0 auto;width: 90%;}
.goods_btn{max-width: 637px;margin: 0.5rem auto 0;width: 90%;}

footer{background: url(none);background-color:#ffecec;padding:0;padding-bottom:1rem;display:block;}
.footer_logo{max-width:253px;width:50%;margin:1rem auto 0;}
.footer_copyright{max-width: 483px;width:70%;margin: 2.5rem auto 0;}

.goods_image{margin-top:3%;}
.goods_image ul{margin: 0 auto;display: flex;justify-content:center;-webkit-flex-wrap: wrap;-ms-flex-wrap: wrap;flex-wrap: wrap;max-width: 769px;}
.goods_image li{max-width: 382px;vertical-align: top;position: relative;text-align: center;width:50%;-moz-border-radius: 6px;-webkit-border-radius: 6px;border-radius:6px;
position: relative;box-sizing: border-box;cursor: pointer}
.goods_image img{width: 100%;}
.goods_image li i{position: absolute;bottom:0.7rem;left:0.5rem;z-index: 1;font-size: 2rem;--fa-primary-color: #ffffff;
    --fa-secondary-color: #b1cbe9;
    --fa-secondary-opacity: 1;}
.fade{opacity: 0;}
.is-active{opacity: 1;}
.goods_image .is-active{animation-name: animation_fade;animation-duration: 4s;animation-iteration-count: 1;opacity: 1;}
.Item_none{border: none !important;pointer-events: none;}
@keyframes animation_fade{
  0%{opacity: 0;}
  100%{opacity: 1;}
}

/* モーダル */
.Modal-Inner-Card-Wrapper-Slide-Item{background: #ffffff !important;overflow-y: scroll;max-height: 500px;}
.ModalLayer-Mask{background-color:rgb(229 229 229 / 83%)!important;}
.Modal-Inner-Btn{top: -20px !important;right: -20px !important;width: 40px !important;}
.modal_text{pointer-events: auto;}



#cboxOverlay{background-color:rgb(229 229 229 / 83%)!important;box-sizing: border-box;}
#colorbox, #cboxOverlay, #cboxWrapper{background-color: #FFF;}
.colorbox_inline{overflow: hidden;}
.modal-slide{position: relative;background-color: #fff;width: 100%;max-width: 1000px;padding: 10px;height: 90%;z-index: 10000;margin: 1rem auto;box-sizing: border-box;}
.modal-slide img{max-width: 500px;width: 100%;}
.modal {position: fixed;top: 0;left: 0;width: 100%;height: 100vh;padding: 30px;display: flex;align-items: center;justify-content: center;transition: opacity 0.8s;
pointer-events: none;opacity: 0;z-index: -1;background-color:rgb(100 111 111 / 83%);box-sizing: border-box;}
.modal.is-active{z-index: 100;}
#cboxLoadedContent {overflow-x: hidden !important;box-sizing: border-box;}
.modal img{margin: 0 auto;display: block;max-width: 500px;width: 100%;margin: 0 auto;display: block;}
#cboxClose{background: url(./img/circle-xmark-solid.svg) no-repeat 0 0 !important;top: 0 !important;box-sizing: border-box;display: block;margin: 10px !important;max-width: 30px !important;max-height: 30px !important;
width: 100% !important;height: 100% !important;z-index: 10000;}

#cboxNext{background: url(./img/circle-xmark-solid.svg) no-repeat 0 0 !important;top: 50% !important;box-sizing: border-box;display: block;margin: 10px !important;max-width: 30px !important;max-height: 30px !important;
width: 100% !important;height: 100% !important;z-index: 10000;}

#cboxPrevious{background: url(./img/circle-xmark-solid.svg) no-repeat 0 0 !important;top: 50% !important;box-sizing: border-box;display: block;margin: 10px !important;max-width: 30px !important;max-height: 30px !important;
width: 100% !important;height: 100% !important;z-index: 10000;}

.Modal-class{overflow: hidden;}


.modal_text td{padding-bottom: 0.2rem;}
.modal_text_keep{word-break: keep-all;}
.modal_text i{margin:0.5rem auto;}
.modal_text td:nth-child(1){padding-right: 0.2rem;}

/* モーダルがactiveの時 */
.modal.is-active,.modal.is-active2 {
  opacity: 1;
  pointer-events: auto;
}

/* モーダル背景のオーバーレイ部分 */
.modal__overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

/* モーダルのコンテンツ */
.modal__content{position: relative;width: 100%;max-width: 1000px;padding: 10px;}

/* モーダルを閉じるボタン */
.modal__close-btn,.modal__close-btn2 {position: absolute;right: 280px;top: -55px;cursor: pointer;z-index: 10;background: none;border: none;color: #FFF;
  margin: auto;max-width: 100px;width:20%;}
.modal__close-btn span,.modal__close-btn span2{display: table;margin: 0 auto;}

.swiper{box-sizing: border-box;}
.swiper-button-next, .swiper-button-prev{max-width: 2.5rem;width: 100% !important;justify-content: inherit !important;align-items: inherit !important;display: block !important;}
.swiper-button-prev{left: 1% !important;}
.swiper-button-next {right:1% !important;}
.swiper-button-prev img,.swiper-button-next img{max-width: 40px;}
.swiper-button-next i, .swiper-button-prev i{font-size: 2.5rem;color: #b1cbe9;}

.page-top{
	z-index: 1001;
}
@media (min-width: 768px){
	main.mainin{
		padding:0 0.8rem;
	}	
}

/* Swiperの矢印部分 */
@media (max-width: 768px) {
.modal__close-btn{}
.modal__close-btn span{display: block;position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;}
}

@media only screen and (min-width: 1980px){
	.pc_nav{right: 4.8%;}	    
	
}

@media only screen and (max-device-width: 0), screen and (max-width: 1950px){
.pc_nav{
right: 2.5%;
}	
}

@media only screen and (max-device-width: 0), screen and (max-width: 1850px){
.pc_nav{
right: 1.5%;
}	
.pc_kazari{left:4.5%;}		
}

@media only screen and (max-device-width: 0), screen and (max-width: 1790px){
.pc_nav{
right: 1.5%;
}	
.pc_nav li{
max-width: 420px;
}	

@media only screen and (max-device-width: 0), screen and (max-width: 1750px){	
.pc_kazari {
    left: 3.5%;
}	
}
	
}
@media only screen and (max-device-width: 0), screen and (max-width: 1730px){
.pc_nav li{
max-width: 400px;
}			
}

@media only screen and (max-device-width: 0), screen and (max-width: 1700px){
	.pc_kazari{width: 20%;left: 3.8%;}	
}

@media only screen and (max-device-width: 0), screen and (max-width: 1680px){
.pc_nav li{
max-width: 380px;
}			
}

@media only screen and (max-device-width: 0), screen and (max-width: 1630px){
.pc_nav li{
max-width: 350px;
}			
}

@media only screen and (max-device-width: 0), screen and (max-width: 1600px){
.pc_kazari {
    left: 3%;
}		
}

@media only screen and (max-device-width: 0), screen and (max-width: 1570px){
.pc_nav li{
max-width: 330px;
}	
.pc_kazari {
    left: 2.5%;	
}
}

@media only screen and (max-device-width: 0), screen and (max-width: 1520px){
.pc_nav li{
max-width: 310px;
}			
.pc_kazari{left: 2%;}	
}

@media only screen and (max-device-width: 0), screen and (max-width: 1500px){
	.pc_kazari{left: 2%;}	
}

@media only screen and (max-device-width: 0), screen and (max-width: 1480px){
.pc_nav li{
max-width: 285px;
}			
}

@media only screen and (max-device-width: 0), screen and (max-width: 1450px){
.pc_kazari {
    width: 18%;
}		
}

@media only screen and (max-device-width: 0), screen and (max-width: 1430px){
.pc_nav li{
max-width: 250px;
}			
}

@media only screen and (max-device-width: 0), screen and (max-width: 1400px){
	.pc_kazari{width: 15%;left: 3%;}	
}

@media only screen and (max-device-width: 0), screen and (max-width: 1360px){
.pc_nav li{
max-width: 230px;
}			
}

@media only screen and (max-device-width: 0), screen and (max-width: 1320px){
.pc_nav li{
max-width: 210px;
}
.pc_nav {
    right: 2%;
}	
.pc_kazari {
    left: 2.8%;
}

}

@media only screen and (max-device-width: 0), screen and (max-width: 1300px){
.pc_nav {
    right: 1.5%;
}
}
	
@media only screen and (max-device-width: 0), screen and (max-width: 1280px){
.pc_kazari {
    left: 2.1%;
}
.pc_nav {
    right: 1%;
}	
}

@media only screen and (min-width: 1271px){
.sp_nav {
display: none;
}			
}

@media only screen and (max-device-width: 0), screen and (max-width: 1270px){
.pc_nav {
display: none;
}		
	
.top{position:relative;}	
.DrawerMenu_open{position:fixed;z-index: 90;margin-left: 617px;top:15px;width:18%;}	
.DrawerMenu_closebtn{margin-left:auto;margin-right:15px;margin-top:15px;width:18%;}
.DrawerMenu_closebtn a{
	display:inline-block!important;
}	
#DrawerMenu{
width: 100%;
padding:0;
background-color: #d0e3ef;
background-image:  linear-gradient(#e3edf3 1px, transparent 1px), linear-gradient(to right, #e3edf3 1px, #d0e3ef 1px);
background-size: 40px 40px;	
border:none;	
}

.DrawerMenu_open a{
	display:inline-block!important;
}	
.DrawerMenu_open img{max-width: 133px!important;}	
.DrawerMenu_closebtn img{max-width: 133px!important;}		

#g-nav li{
max-width: 453px;width: 70%;margin:1.5rem auto;
}
.nav_kazari{max-width: 333px;width:50%;margin: 30px auto 0;
}	
	
}



@media only screen and (max-device-width: 0), screen and (max-width: 1260px){
.pc_kazari {
    width: 13%;
}		
}


@media only screen and (max-device-width: 0), screen and (max-width: 1200px){
	.pc_kazari{width: 12.5%;    left: 2.5%;}	
}
@media only screen and (max-device-width: 0), screen and (max-width: 1100px){
	.pc_kazari{width: 10%;}	
}

@media only screen and (max-device-width: 0), screen and (max-width: 1070px){
	.pc_kazari{display:none;}
	.modal__close-btn, .modal__close-btn2{left: 66%;}	
}

@media only screen and (max-device-width: 0), screen and (max-width: 768px){
.modal{padding:0;}
	
.modal__close-btn,.modal__close-btn2{
    top: -10%;
}	
.modal__content	{height:auto;}
	
	.DrawerMenu_open{margin-left: auto;right:15px;}	
	
.goods_image ul{width: 100%;}
.swiper-slide{padding: 0.5rem;box-sizing: border-box;}


	
.kazari_chara01{width: 22%;}
.kazari_chara02{width: 22%;}


#gallery{
background-size: 25px 25px;	
background-position: 14px;	
}	
#DrawerMenu{
background-size: 25px 25px;
background-position: 14px;	
}	
	
.footer_logo{width: 35%;}
	
.swiper-slide{}
}	

@media only screen and (max-device-width: 0), screen and (max-width: 700px){
	.ttl_sns{
		top:-25px;
	}	
.DrawerMenu_open {
    width: 15%;
}
.DrawerMenu_closebtn {
    width: 15%;
}		
}

@media only screen and (max-device-width: 0), screen and (max-width: 600px){
.modal__close-btn,.modal__close-btn2{
    top: -8%;
    left: 72%;
}	
}

@media only screen and (max-device-width: 0), screen and (max-width: 500px){
	#sns{padding-top:80px;padding-bottom: 40px;}
}
@media only screen and (max-device-width: 0), screen and (max-width: 414px){
	#sns{padding-top:65px;}
.DrawerMenu_open {
right: 10px;
top: 10px;
}
.DrawerMenu_closebtn {
margin-right: 10px;
margin-top: 10px;
}		
}

@media only screen and (max-device-width: 0), screen and (max-width: 320px){
.modal__close-btn, .modal__close-btn2 {
    top: -27px;
    right: 27px;
}	
.ttl_sns{
	top:-10px;
}		
#sns{padding-top:50px;padding-bottom: 25px;}		
}