@charset "utf-8";

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

css/style.css

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

	3: contents
	
	4: table

	
 ----------------------------------------------- */
 
/* --------------------------------------------
1: pc
-------------------------------------------- */

body, .wrapper, .container {
  overflow: visible;
}


body{background-color: #ffffff;font-family: 'MPLUSRounded', sans-serif;font-weight: 500;overscroll-behavior-y: contain;border-top:none!important;}
@font-face {font-family: 'MPLUSRounded';  src: url('../fonts/MPLUSRounded1c-Medium.ttf') format('truetype');font-weight: 500; font-style: normal;}
@font-face {font-family: 'MPLUSRounded';  src: url('../fonts/MPLUSRounded1c-ExtraBold.ttf') format('truetype');font-weight: 800; font-style: normal;}
img{width:100%;height:auto;}


/* link */
a{font-weight: 500;}
a:link { color:#836952;}
a:visited {color:#836952;}
a:hover {color:#aa8d77;}
a:focus {color:#aa8d77;}

a:active {color:#aa8d77;}

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: cover;
}
main.mainin {
position: relative;	
max-width: 768px!important;
margin: 0 auto;
height: 100%;z-index: 0;margin: 0 auto;
}

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

#chara{
background: url(../img/chara_bg.svg);
padding-top: 26%;
position: relative;
background-size: 4.9%;
padding-bottom: 2rem;	
}
.chara_ttl{position: absolute;z-index: 1;top:0;left:-1px;}

.pc_nav{
	position:fixed;
	top: 50%;left: calc(48% + 428px);
    margin: 0 1rem 0;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}
.pc_nav li{
	margin:0.5rem 0;
	max-width: 500px;
}


/*スライダー*/
.slick-prev, .slick-next {
  background: none;
  border: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
	cursor: pointer;
    width: 10%;
    max-width: 140px !important;	
}

.slick-prev {
  left: 0; /* 適宜調整 */
}

.slick-next {
  right: 0; /* 適宜調整 */
}

.slick-prev img, .slick-next img {
  max-width: 140px; /* サイズ調整 */
  height: auto;
}


.slick-slide{margin: 0.5rem;}
/* dotsを丸くカスタマイズするCSS */
.dots-wrap {
    display: flex;
    justify-content: center;
	    margin-top: -3%;
}
.dots-wrap li {
    width: 29px;
    height: 29px;
    margin: 0 5px;
    background: #d1d1d1;
    border-radius: 50%;
    cursor: pointer;border: 2px solid white;
}
.dots-wrap li:hover,
.dots-wrap li.slick-active {
    background: #71aaaa;
}
.dots-wrap li button {
    display: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    padding: 0;
    border: none;
    background-color: transparent;
}

.charabox{background-color: #fff;border-radius:30px;width: 90%;margin: 0 auto;}
.chara_note{max-width: 300px;margin:0 auto;padding: 8% 0 4%;width: 45%;}
.chara_ul{display: flex;flex-wrap: wrap;justify-content: center;padding-bottom: 4.5%;}
.chara_li{max-width:175px;width: 24%;margin:0.5rem;}

.chara_more_btn{max-width: 485px;width: 64%;margin: 2rem auto 1rem;}

#goods{background-color: #c8e6e0;padding-bottom: 2rem;}
.goods_ttl{padding:3rem 0 1rem;}

.goods_ul{display: flex;flex-wrap: wrap;justify-content: center;}
.goods_ul li{width: 45%;text-align: center;margin: 0.5rem;}
.goods_more_btn{max-width: 485px;width: 64%;margin: 2rem auto;}
.goods_month{background-color:#ff9fcd;padding: 0.5rem;color:#fff;display: block;margin: 0.5rem auto;border-radius: 25px;width: 80%;}
/*
.goods_border {
  position: relative;
  background-color: #fff;
  padding: 1.5rem 1rem 0;
  border: 3px solid #4daaaa;
  border-radius: 30px;
  box-shadow: 0 0 0 4px white;
}
.goods_border::before {
  content: "";
  position: absolute;
  top: 10px; 
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 1rem;
  border: 0.3rem solid white;
  background: transparent;
  z-index: 0;
  box-sizing: border-box;
  pointer-events: none; 
}
*/
/*.goods_border {
  position: relative;
  background-color: #fff;
  padding: 1.5rem 1rem 0;
  border: 3px solid #4daaaa;
  border-radius: 30px;
  box-shadow: 0 0 0 4px white;
  z-index: 1; 
}

.goods_border::after {
  content: "";
  position: absolute;
  top: 10px; 
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 30px;
  border: 3px solid white; 
  z-index: 0; 
  box-sizing: border-box;
  pointer-events: none;
}*/

/*.goods_border {
  position: relative;
  background-color: #fff;
  padding: 1.5rem 1rem 0;
  border: 3px solid #4daaaa;
  border-radius: 30px;
  box-shadow: 0 0 0 4px white;
  z-index: 1;
  width: 300px;
  margin: 0 auto;
}

.goods_border::after {
  content: "";
  position: absolute;
  top: 10px;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 30px;
  border: 3px solid white;
  z-index: 0;
  box-sizing: border-box;
  pointer-events: none;
}*/

.goods_wrap {
  position: relative;
  width: fit-content; /* or 固定幅でもOK */
  margin: 0 auto;
}

.goods_shadow {
  position: absolute;
  top: 12px; /* ↓にずらす距離 */
  left: 50%;
  transform: translateX(-50%);
  width: 102.2%;
  height: 100%;
  border: 3px solid white;
  border-radius: 30px;
  box-sizing: border-box;
  pointer-events: none;
  z-index: 0;
}


.goods_border {
  position: relative;
  background-color: #fff;
  
  border: 5px solid #4daaaa;
  border-radius: 30px;
  box-shadow: 0 0 0 4px white;
  z-index: 1;
}
.goods_border_in{padding: 1.5rem 1rem;}
.goods_detail_btn{background-color: #4daaaa;border-radius:0 0 20px 20px;color: #fff;padding: 1rem;font-size: 1.2rem;}

.goods_comingsoon{background-color: #b2d3cb;  display: flex;
  justify-content: center;   /* 横方向中央 */
  align-items: center;       /* 縦方向中央 */
  height: 100%;              /* 親要素の高さに合わせる（必要に応じて指定） */
  text-align: center;        /* テキストの中央揃え */
border-radius: 30px;color:#fff;}

#movie{background-color:#cfe6e1; }
.youtube_frame {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    width: 100%;
}
.youtube_frame iframe{
	position: absolute;
    top: 0;
    right: 0;
	left: 0;
    width: 100% !important;
    height: 100% !important;
}


.toggle_contents {
  position: relative;
  padding: 1rem;
  width: 63%;
  margin: 1rem auto;
  max-width: 420px;
  border-radius: 1rem;
  background-color: #fff;
  z-index: 1;
  border: none; /* 枠線は疑似要素で描く */
}

/* ピンクの枠線（背景透明） */
.toggle_contents::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 1rem;
  border: 0.4rem solid #ffaccd;
  background: transparent;
  z-index: 2;
  box-sizing: border-box;
  pointer-events: none; /* クリックをブロックしない */
}

/* 白い透明な枠線（下に少しずらす） */
.toggle_contents::before {
  content: "";
  position: absolute;
  top: 10px; /* ←ここを調整すればどれだけ下にするか決まる */
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 1rem;
  border: 0.3rem solid white;
  background: transparent;
  z-index: 0;
  box-sizing: border-box;
  pointer-events: none; /* クリック透過 */
}


/*.toggle_btn:before, .toggle_btn:after {display: block;content: '';background-color: #fff;position: absolute;width: 10px;height: 2px;top: 50%;left: 50%;transform: translate(-50%, -50%);}
.toggle_btn:before {width: 2px;height: 10px;}
.toggle_title.selected .toggle_btn:before {content: normal;}*/
.toggle_title{text-align:center;}
.toggle_title img{
	width:100%;
}
.toggle_contents dd {display: none;}
.d_present_wall{font-size: 1.5rem;}
.d_present_wall ul{padding: 0;}
.d_present_wall li{display: block;width: 100%;padding: .5rem;}
.d_present_wall .d_present_wall_PC{display: inline-block;font-size: 1rem;border: 2px solid #00b6f5;border-radius: 5px;padding: .2rem .5rem;margin-right: .5rem;background-color: #00b6f5;color: #FFF;margin-top: 0;
    margin-bottom: 0;}
.d_present_wall .d_present_wall_SP{display: inline-block;font-size: 1rem;border: 2px solid #aacd06;border-radius: 5px;padding: .2rem .5rem;margin-right: .5rem;background-color: #aacd06;color: #FFF;margin-top: 0;
    margin-bottom: 0;}
.d_present_wall_twitter{display: inline-block !important;font-size: 1rem;border: 2px solid #8ce1ff;border-radius: 5px;padding: .2rem .5rem;margin-right: .5rem;background-color: #8ce1ff;color: #FFF;margin-top: 0;
    margin-bottom: 0;}
.d_present_wall_twitter_txt{display: inline-block !important;font-size: 1.5rem !important;}
.d_present_thumbnail li a span.d_present_wall_twitter_txt:hover{background-color:#FFF !important;}


.d_present_wall li a {position: relative;display: initial;}
.d_present_wall li a::after {position: absolute;bottom: 0;left: 50%;content: '';width: 0;height: 1px;background-color: #405d6a;transition: .3s;-webkit-transform: translateX(-50%);transform: translateX(-50%);}
.d_present_wall li a:hover::after {width: 100%;}

.d_present_wall p{width: 96%;padding: .5rem;text-align:center;}
.d_present_wall p a {position: relative;display: initial;color:#806a55;}
.d_present_wall p a::after {position: absolute;bottom: 0;left: 50%;content: '';width: 0;height: 1px;background-color: #405d6a;transition: .3s;-webkit-transform: translateX(-50%);transform: translateX(-50%);}
.d_present_wall p a:hover::after {width: 100%;}

.d_present_thumbnail #more_btn,#close_btn{text-align: center;margin: 1rem;}


.wall_ttl{padding: 2rem 0 0;}
.wall_th{width:90%;margin:0 auto;}
.wall_size{max-width: 265px;margin-right: 0.5rem;width: 49%;}
.wall_plus{max-width: 56px;width: 12%;}
.wall_size_btn{display: flex;align-items: center;justify-content: center;}

.gradient{background: linear-gradient(to bottom, #cfe6e1 0%, #cfe6e1 50%,#f9f7dc 100%);
}

.star_line{max-width: 670px;margin: 3rem auto 0;width: 88%;}

.fadeIn {
  opacity: 0;
  transition: 2s;
}
.fadeIn.is-show {
  opacity: 1;
}


/* BLOG */

#blog{
	background-color: #fff;
  background-image: url('../img/blog_bg.png'); /* 画像のURLに置き換えてください */
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: top center; /* 任意で位置調整も可能 */
padding-bottom: 2rem;	
}
.blog_ttl{padding-top: 2rem;}

#entry_list_more{padding: 0 2.605%;box-sizing: border-box;margin-bottom: 1.5rem;}
.entry_list{width: 100%;display: -ms-flexbox;display: -webkit-box;display: -webkit-flex;display: flex;-ms-flex-wrap: wrap;-webkit-flex-wrap: wrap;flex-wrap: wrap;gap: 2.605%;justify-content: space-between;padding: 0;font-size:clamp(0.813rem, 0.321rem + 2.46vw, 1.5rem);max-width: 647px;margin: 0 auto;}
.entry_list li{width: calc((100% - 2.605%) / 2);box-sizing: border-box;margin-bottom: 5.905%;max-width: 300px;background-color:#ffffd2; }
.entry_list li .box_img{box-sizing: border-box;font-size: clamp(0.813rem, 0.455rem + 1.79vw, 1.313rem);}
.entry_list li img{max-width: 300px;margin: 0 auto;display: block;}
.news_top_time{width: 100%;display: block;max-width: 300px;margin: 0 auto;padding-left:2.605%;font-weight: 600;padding-top: 2.605%;}
.news_top_time .news{color:#ff0000;font-family: 'MPLUSRounded', sans-serif;font-weight: 800;}
.entry_list li a{font-weight: 500 !important;color: #806a55;border: none;}
.entry_list li a:nth-child(1){/*padding:2.605%;*/box-sizing: border-box;display: block;}
.entry_list li a span{display: block;padding:  2.605%;box-sizing: border-box;background-color: #ffffd2;}
.blog_btn{max-width: 488px;margin: 0 auto;display: block;width: 64%;}
.zoom-img {transition: transform 0.3s ease;}

.sns{display: flex;align-items: center;margin:0 auto;justify-content: center;padding: 0 1rem;gap: 2%;padding-bottom: 3rem;}

 
/* footer */
footer{background: url(none);background-color:#ffffff;display: block;padding-bottom: 1rem;}

.sanx_footer_logo{max-width: 288px;margin:2rem auto;width: 41%;}
.copyright{max-width: 507px;margin:0 auto;padding-bottom:0;}



@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;
}		
main.mainin{  right: 0;
left: 0;
margin: 0 auto;}

h1{padding-top: 115px;}	
	

#fixedHeader {
background-color: white; /* 重なりを防止 */
height: 115px;             /* 高さは任意に */
line-height: 60px;
border-bottom: 3px solid #aabeb9!important;
z-index: 1000000;
}
	
.header_close{
position: relative;	
background-color: white; /* 重なりを防止 */
height: 115px;             /* 高さは任意に */
line-height: 60px;
border-bottom: 3px solid #aabeb9;
}	

header {
position: fixed;
left: 0;
width: 100%; /* ← 画面幅100% */
max-width: 768px; /* ← 親要素の幅と同じにする */
margin: 0 auto;
right: 0;
}

.DrawerMenu_open{/*position:fixed;z-index: 90;margin-left: 617px;top:0;width:18%;*/}	
.DrawerMenu_closebtn{/*margin-left: 617px;top:2%;right: 2%;width: 12%;position: absolute;*//*position: fixed;*/position: absolute;
top: 50%;
right: 2%;
transform: translateY(-50%);
height: auto;
width: 12%;}
.DrawerMenu_closebtn a{
	display:inline-block!important;
}	
#DrawerMenu{
width: 100%;
padding:0;
background-color: #bcd9d3;
border:none;
z-index: 10000;
/*scrollbar-color: #ed7d66 #fff;*/
}
.close_logo{      
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: auto;
max-width: 426px;width: 56%;
}

.header_container{position: relative;      width: 100%;
height: 115px; /* 高さは画像に合わせて調整 */}	
.header_logo_top{      
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: auto;
max-width: 426px;width: 56%;
}
.image-right{      
position: absolute;
top: 50%;
right: 2%;
transform: translateY(-50%);
height: auto;
width: 12%;
}	
	
.DrawerMenu_open a{
display:inline-block!important;
}	
.DrawerMenu_open img{max-width: 90px!important;}	
.DrawerMenu_closebtn img{max-width: 90px!important;}		

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



  @media (min-width: 1024px) {
    .zoom-img:hover {
      transform: scale(1.02);
    }
  }

@media (min-width: 769px){
	.pc_none{display: none!important;}
}
@media only screen and (max-device-width: 0), screen and (max-width: 768px){
	.sp_none{display: none;}
	main.mainin{right: 0;padding:0;}	
	.dots-wrap{margin-top: -5%;}	
	#about{margin-top: -1px;}

	
.DrawerMenu_open{margin-left: auto;right:15px;width: 21%;}	
.DrawerMenu_open img{max-width: 160px !important}	
/*.DrawerMenu_closebtn{margin-left: auto;right: 15px; top:0;}*/
.blog{margin-bottom: 4.5rem;}	
.goods_image ul{width: 100%;}
.swiper-slide{padding: 0.5rem;box-sizing: border-box;}

	.toggle_contents::before{top: 6px;}

}	


@media only screen and (max-device-width: 0), screen and (max-width: 600px){
#entry_list_more{padding: 0 5.705%;margin-bottom: 1rem;}
}

@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: 450px){
	.header_container{height: 80px;}	
	#fixedHeader{height: 80px;}
	h1 {
        padding-top: 80px;
    }
	.header_close{height: 80px;}
	.goods_month{font-size: 1rem;}
	.goods_ttl_li{font-size: 0.8rem;}
}

@media only screen and (max-device-width: 0), screen and (max-width: 414px){
	#sns{padding-top:65px;}
}

@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;}		
}