#g_navi {
	display: none;
	}

.sp-hurry-btn{
  display: inline-block;
  padding: 0.8em 3em;
  background-color: #e3364a; /* 背景色 */
  box-shadow: 0 5px 0 #ca1c30; /* 影の太さ・色 */
  border-radius: 60px;
  color: #fff;
  cursor: pointer;
  text-decoration: none; /* 文字の下線を消す */
}

@media screen and (max-width:1199px){
	#g_navi {
        width: 65%;
        display: block;
        height: 50px;
        z-index: 1000;
        right: 30px;
        font-size: 18px;
        letter-spacing: 1px;
        font-weight: bold;
        position: fixed;
        top: 50px;
    }
	
	
	    #g_navi ul.navi_base > li:last-child a {
        padding-top: 8px;
        border-radius: 2em;
        background: #e95412;
        border: 1px solid white;
        font-size: 16px;
        height: 42px;
    }
	
	  


/*******************************
メニューボタン
*******************************/
.menu_btn {
	display: block;
	height: 60px;
	width: 60px;
	text-align: center;
	padding-top: 5px;
	padding-bottom: 5px;
	position: fixed;
	z-index: 5000;
	top: 0px;
	right: 0px;
	cursor: pointer;
	background: var(--base-bg);
}
.menu_btn:hover {
	cursor: pointer;
}

.menu_btn span {
	width: 28px;
	height: 2px;
	display: block;
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -14px;
	background-color: #FFFFFF;
}
.menu_btn span {
    transition: all 0.3s;
    transform: rotate(0deg);
	-webkit-transform: rotate(0deg);  
    -moz-transform: rotate(0deg);    
  }
.menu_btn span.top {
    transform: translateY(-8px);
	-webkit-transform: translateY(-8px);  
    -moz-transform: translateY(-8px);    
  }
.menu_btn span.bottom {
    transform: translateY(8px);
	-webkit-transform: translateY(8px);  
    -moz-transform: translateY(8px);    
}


.menu_btn:hover span.top {
    transform: translateY(-10px);
	-webkit-transform: translateY(-10px);  
    -moz-transform: translateY(-10px);    
}
.menu_btn:hover span.bottom {
    transform: translateY(10px);
	-webkit-transform: translateY(10px);  
    -moz-transform: translateY(10px);    
}


.menu_btn.opened  span.middle {
    background: rgba(255, 255, 255, 0);
	 transform: translateX(30px);
	 -webkit-transform: translateX(30px);  
    -moz-transform: translateX(30px);    
}
.menu_btn.opened  span.top {
    transform: rotate(-45deg) translateY(0px);
	-webkit-transform: rotate(-45deg) translateY(0px);  
    -moz-transform: rotate(-45deg) translateY(0px);    
}
.menu_btn.opened  span.bottom {
    transform: rotate(45deg) translateY(0px);
	-webkit-transform: rotate(45deg) translateY(0px);  
    -moz-transform: rotate(45deg) translateY(0px);    
}

	

/*******************************
グローバルナビ
*******************************/
#g_navi {
	position: fixed;
	max-width: 600px;
	width: 100%;
	height: 100%;
	top: 0px;
	right:-100%;
	padding-top: 60px;
	overflow: auto;
	z-index: 1500;
	background-color: #FFF;
	letter-spacing: 1px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	transition: right 0.3s ease-in-out;
}
	
	/* メニューを開いた時のスタイル */
#g_navi.active {
  right: 0;
}
	

.sp-nav {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sp-nav > li {
  position: relative;
  border-bottom: 1px solid #ccc;
  padding: 12px 40px 12px 30px;
  font-size: 16px;
}

.sp-nav > li > a {
  text-decoration: none;
  color: #333;
  display: block;
}
	
/* お急ぎの方へボタン */
	.sp-hurry-wrapper{
		margin: 0px auto 30px;
		    background: url(../images/hurry-bg.webp);
    background-repeat: no-repeat;
    background-position: center;
    border-top: solid 2px var(--base-color);
    border-bottom: solid 2px var(--base-color);
    padding: 10px 0;
	}
	
	.sp-hurry-wrapper ul{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 20px 50px 30px;
	}
	
	
	.sp-hurry-wrapper ul li:nth-child(1){
		width: 100%;
		display: block;
    padding: 0.8em 20px 0.8em 20px;
    background-color: red;
    box-shadow: 0 5px 0 #ca1c30;
    border-radius: 10px;
   font-size: 14px;
    text-decoration: none;
    position: relative;
		margin: 0 0 20px;
	}
	
	.sp-hurry-wrapper ul li:nth-child(2), .sp-hurry-wrapper ul li:nth-child(3){
		width: 46%;
		    display: flex;
		justify-content: center;
    align-items: center;
           padding: 10px 5px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: bold;
    position: relative;
    font-size: 14px;
     line-height: 1.2em;
	}
	
	.sp-hurry-wrapper ul li:nth-child(2){
	background:  var(--base-color);
		box-shadow: 0 5px 0 #310000;
	}
	
	.sp-hurry-wrapper ul li:nth-child(3){
	background: var(--line-bg);
		box-shadow: 0 5px 0 #308d05;
	}
	
	
	.sp-hurry-wrapper ul li a{
		color: white;
		 cursor: pointer;
		display: block;
		font-weight: bold;
	}
	
	
	.sp-hurry-wrapper ul li a:nth-child(1) {
		text-align: center;
	}
	
	.sp-hurry-wrapper ul.sp-hurry li a:nth-child(1) .block {
		display: flex;
		justify-content: center;
		align-items: center;
		gap:20px;
		font-size: 21px;
        margin-top: 5px;
	}
	
	.sp-hurry-wrapper ul.sp-hurry li:nth-child(1) a .block img {
		width: 40px;
		height: auto;
		display: block;
	}
	
	
	.sp-hurry-wrapper ul li.sp-hurry a:nth-child(2),.sp-hurry-wrapper ul.sp-hurry li a:nth-child(3){
		display: flex;
		justify-content: center;
		align-items: center;
		gap:10px;
	}

	.sp-hurry-wrapper .sp-hurry li:nth-child(2) a img  {
		width: 30px;
		height: auto;
		display: block;
		margin: 0 auto 5px;
	}
	
	
	.sp-hurry-wrapper .sp-hurry li:nth-child(3) a .fa-line  {
		font-size: 30px;
		display: block;
		margin: 0 auto 5px;
	}
	
/* グローバルナビコンテンツ*/	
	
	
	.sp-contents{
		padding: 0 40px;
	}
	
	
	.sp-contents h2{
    font-size: 18px;
    text-align: center;
    font-weight: bold;
	letter-spacing:0;
	margin-bottom: 1em;
		display: block;
		background-color:var(--lemon-bg);
        padding: 0.25em
	}
	
	.sp-contents ul{
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	
	
	.sp-contents ul li{
		width: 46%;
		text-align: center;
		margin-bottom: 10px;
		
	}
	
	
	.sp-contents ul li a{
		display: block;
		font-size: 14px;
		aspect-ratio: 3 / 2; 
  position: relative;
	}
	
	
	.sp-contents ul li img{
		width: 100%;
  height: 100%;
  object-fit: cover;     /* 枠いっぱいにトリミング表示 */
  object-position: center center; /* 中央配置 */
  display: block;
		margin-bottom: 7px;
		border-radius: 5px;
	}
	
	
	
/* プラスボタン */

   .sp-contents-wrapper {
  padding: 20px 40px;
  background-color: #fff;
  border-top: 1px solid #ccc;
}

.sp-contents-title-wrapper {
	background: var(--lemon-bg);
	padding: 0.25em 50px 0.25em 1em;
    position: relative;
}
	
.sp-contents-wrapper h2 {
  font-size: 18px;
}

.toggle-submenu {
position: absolute;
        background-color: #000;
        color: #fff;
        border: none;
        width: 28px;
        height: 28px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 4px;
        cursor: pointer;
        right: 10px;
        top: 6px;
}

.sp-submenu {
  list-style: none;
  padding-left: 0;
  margin-top: 16px;
  display: none;
}

.sp-submenu li {
 margin: 10px auto;
        font-size: 14px;
        width: 90%;
}

.sp-submenu li a {
  text-decoration: none;
        color: #333;
        padding: 0.5em 1em;
        display: block;
        background: var(--pale-gray);
        border-radius: 4px;
}

	.sp-sns {
	display: flex;
        justify-content: space-between;
        font-size: 24px;
        width: 60%;
        margin: 0 auto;
    }
	}


@media screen and (max-width:399px){
	
	.sp-hurry-wrapper ul{
		padding: 20px 40px 30px;
	}
	
}



/*******************************
グローバルナビ
*******************************/

.tab-sp-navi {
	display: none;
}

@media screen and (max-width:1199px){
.tab-sp-navi {
  position: fixed;
  bottom: 20px;
  left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
  width: 95%;
  max-width: 480px;
  min-width: 290px;
  display: flex;
  justify-content: space-between;
  padding: 10px;
  z-index: 999;
	background: rgba(255,255,255,0.60);
	border-radius: 10px;
}

.tab-sp-navi li {
  display: flex;
  justify-content: center;
  align-items: center;
	padding: 10px;
  text-align: center;
  font-size: 10px;
  font-weight: bold;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
  transition: all 0.2s ease;
	line-height: 1.1em;
	border: 2px solid var(--base-color);
}

.circle-btn {
  width: 22%;
        background-color: #fff;
        border-radius: 10px;
}

	.circle-btn img{
		width: 40%;
		margin: 0 auto 5px;
	}
	
.circle-btn:hover {
  background-color: purple;
  border: 2px solid #fff;
  transform: translateY(2px);
}

.rect-btn {
  width: 51%;
  background-color: red;
  border-radius: 10px;
}
	
	.rect-btn a {
		color: white;
		display: flex;
		justify-content: center;
		align-items: center;
		gap:10px;
		
		
}
	
		.rect-btn a p{
			font-size: 21px;
			margin: 10px 0 7px;
}
	
	.rect-btn a img{
		width: 40px;
		height: auto;
		display: block;
}

.rect-btn:hover {
  background-color: darkred;
  transform: translateY(2px);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.5);
}
}


@media screen and (max-width: 480px) {
	
	.tab-sp-navi li {
  font-size: clamp(0.5rem, 0.054rem + 1.9vw, 0.625rem);
}
	
			.rect-btn a p{
			font-size: clamp(1.125rem, 0.455rem + 2.86vw, 1.313rem);
		
}
	
    .rect-btn a img {
 
        width: clamp(1.563rem, 0.446rem + 4.76vw, 1.875rem);
        height: auto;
        display: block;
    }
}



@media screen and (max-width: 374px) {
	.tab-sp-navi li {
        padding: 10px 5px;
    
    }

    .rect-btn a img {
 
        display: none;
    }
}