@charset "utf-8";
:root {
    
    /* Color */
	--color-main: #f56b66; /* 通常 */
	--color-main-light: #fdc1be; /* 明るい */
	--color-main-thin: #fee9e8; /* 薄い */
	--color-main-deep: #eb2d29; /* 濃い */
	--color-main-rgb: 245,107,102; /* rgb */
	--color-main-light-rgb: 253, 193, 190; 
	--color-main-thin-rgb: 254, 233, 232; 
	--color-main-deep-rgb: 235, 45, 41;
	
	--color-sub: #4799c8; /* 通常 */
	--color-sub-light: #c0deef; /* 明るい */
	--color-sub-thin: #e9f3f9; /* 薄い */
	--color-sub-deep: #145c9d; /* 濃い */
	--color-sub-rgb: 71, 153, 200;
	--color-sub-light-rgb: 192, 222, 239;
	--color-sub-thin-rgb: 233, 243, 249;
	--color-sub-deep-rgb: 20, 92, 157;
	
	--color-accent: #ffd618; /* 通常 */
	--color-accent-light: #fdf2be; /* 明るい */
	--color-accent-thin: #fefae8; /* 薄い */
	--color-accent-deep: #584024; /* 濃い */
	--color-accent-deep2: #ff6600; /* 濃い2 */
	--color-accent-rgb: 255, 214, 24;
	--color-accent-light-rgb: 253, 242, 190;
    --color-accent-thin-rgb: 254, 250, 232;
	--color-accent-deep-rgb: 88, 64, 36;
	--color-accent-deep2-rgb: 255, 102, 0;
	
    --color-link: #264af4;
    --color-link_hover: #00118f;
    --color-link_visited: #924e92;
    
    /* Font */
    --font-main: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    /*--font-main: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;*/
    /*--font-serif: "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro W3", "MS P明朝", "MS PMincho", serif;*/
    --font-copyright: Verdana, "Droid Sans", "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    
    --fa: "Font Awesome 6 Free"; /* https://fontawesome.com/search?o=r&m=free */
    
    /* Header, Logo Size */
    --size-header-height: 180px;
    /*--img-logo-src: url("../images/base/logo.svg");*/
    --img-logo-width: 160px;
    /*--img-logo-height: 75px;*/
    @media (width <= 999px) {
        --size-header-height: auto;
        /* --img-logo-src: url("../images/base/logo-sp.png"); */ /* PC, SP 違う画像の場合 */
        --img-logo-width: 120px;
        /*--img-logo-height: 56px;*/
    }
	--img-swingkidsBadge-width:60px;
		@media (width <= 999px) {
			--img-swingkidsBadge-width:50px;
		}
    
    /* Contents Size */
    /*--size-content-max-width: 1115px;*/
	--size-content-max-width: 75vw;
    --size-content-min-width: 1000px;
    @media (width <= 999px) {
        --size-content-max-width: 100%;
        --size-content-min-width: 100px;
    }
    
    /* Side Bar - Width Size */
    --size-side-width: 260px;
    @media (width <= 999px) {
        --size-side-width: 100%;
    }
    
    /* Global Menu Count */
    --global-menu-count: 5;
	
	--drawernav-width:30vw;
    @media (width <= 999px) {
        --drawernav-width:40vw;
		@media (width < 768px) {
			--drawernav-width:240px;
		}
    }
}

* { box-sizing: border-box; }
html { font-size: 62.5%; /* 15px x 0.625 = 10px(=1rem) */ }
body {
	background: url("../images/base/body-bg.webp") #fff top center repeat-x;
	font-family: var(--font-main);
	font-size: 1.6rem;
	-webkit-text-size-adjust: 100%;
	font-feature-settings: "palt";
	line-height: 1.7;
	
	@media (width <= 767px) {
		font-size: 1.5rem;
	}
}

/* 画像のドラッグ無効化 */
/*img {
    pointer-events: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-touch-callout: none;
    -moz-user-select: none;
    user-select: none;
}*/

/* ------------------------------------------------------- */
/* layout ------------------------------------------------ */
/* ------------------------------------------------------- */

/* base サイトレイアウトの基本設定 ----------------------- */

#top {
	width: 100%;
}
#container {
	max-width: var(--size-content-max-width);
	min-width: var(--size-content-min-width);
	margin: var(--size-header-height) auto 0;
	padding: 50px 0 100px 0;
	clear: both;
	
	@media (width <= 999px) {
		padding:15px 10px 50px 10px;
	}
}
#main {

}
/*次回層コンテンツWrapper*/
.contentWrapper {
	background: rgba(255,255,255,0.7);
	border-radius: 10px;
	padding: 50px;
	box-shadow: 0 0 15px 0 rgba(50,50,50,0.1);
	margin-bottom: 50px;
	
	@media (width <= 999px) {
		padding: 25px;
	}
	@media (width <= 999px) {
		padding: 15px;
	}
}

#footer {
	width: 100%;
	min-width: var(--size-content-min-width);
}

/* ------------------------------------------------------- */
/* header ------------------------------------------------ */
/* ------------------------------------------------------- */

#header {
	background: #fff;
	width: 100%;
	height: var(--size-header-height);
	top: 0;
	left: 0;
	position: fixed;
	z-index: 10;
	box-shadow: 0 0 15px 0 rgba(50,50,50,0.1);
	
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	
	@media (width <= 999px) {
		position: static;
	}
	
	/*タイトル・検索・リンクボタン*/
	& .headerInner {
		max-width:1115px;
		min-width: var(--size-content-min-width);
		/*width: 100%;
		justify-self: center;*/
		margin: 0 auto;
		
		order: 3;
		
		@media (width <= 999px) {
			margin: 0;
			padding:10px;
			width: 100%
			justify-self: center;
		}
		
		& #top {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 100px;
			gap:0 20px;
			@media (width <= 999px) {
				--grid-width:0px;
				--headerTitleWrapInner-gap-width:5px;
				display: grid;
				grid-template-columns: calc(var(--img-logo-width) + var(--img-swingkidsBadge-width + var(--headerTitleWrapInner-gap-width))) calc(100% - var(--img-logo-width) - var(--img-swingkidsBadge-width) - var(--headerTitleWrapInner-gap-width));
				grid-column-gap: 0px;
				grid-row-gap: 0px;
				grid-gap: 0 var(--grid-width);
				grid-template-areas:
					"A C"
					"B B";
				grid-auto-rows:auto;
				height: auto;
			}
			& .headerTitleWrap {
				@media (width <= 999px) {
                    grid-area: A;
                }
				& .headerTitleWrapInner{
					display:flex;
					gap:0 var(--headerTitleWrapInner-gap-width);
					& .headerTitle {
						width: var(--img-logo-width);
						& .logo {					
							& a {
								& img {
									display: block;
								}
							}
						}
					}
					& .swingkidsBadge{
						display:flex;
						width:var(--img-swingkidsBadge-width);
						gap:5px;
						margin-bottom:10px;
						@media (width <= 999px) {
							margin-left:5px;
						}
					}
				}
				& .logoTxt{
					font-size:1.0rem;
					letter-spacing: normal;
					margin-bottom:1px;
					color:#333;
				}
			}
			/*検索*/
			& .headerItemSearch {				
				width: calc(100% - (var(--img-logo-width) + var(--img-swingkidsBadge-width) + 205px));				
				
				@media (width <= 999px) {
					grid-area: B;
					padding:10px 0 0 0;
					width:100%;
					position: sticky;
					height:80px;
					top:0;
				}
				
				& .headerSearch {
					position: relative;
					max-width: 450px;
					min-width: 325px;
					margin: 0 auto 5px;
					display: grid;
					grid-template-columns: auto 50px;
					
					@media (width <= 999px) {
						min-width: 250px;
					}
					
					& label {						
						& .action-search-input {
							border: solid 2px #999;
							padding: 5px 15px;
							width: 100%;
							box-sizing: border-box;
							border-radius: 20px 0 0 20px;
							height: 40px;
						}
					}
					& .action-search-button {
						background: #999;
						width: 50px;
						height: 40px;
						border-radius: 0 20px 20px 0;
						display: flex;
						align-items: center;
						justify-content: center;
						text-decoration: none;
						position:relative;
						& i {
							color: #fff;
							padding-right: 5px;
							position:absolute;
							right:0;
							& span{
                                white-space: nowrap;
                                text-indent: 100%;
                                width:1em;
                                overflow: hidden;
								display:inline-block;
                            }
						}
					}
				}
				& .headerCategory {
					text-align: center;
					font-size: 1.2rem;
					
					& a {
						display: inline-block;
						margin-right: 10px;
					}
				}
			}
			& .headerMenuWrap{
				width: 205px;
				display:flex;
				flex-direction:column;
				gap:0;
				@media (width <= 999px) {
					grid-area: C;
					width:auto;
				}
				& .freeShippingTxt{
					font-size:1.2rem;
					text-align:center;
					& span{ 
						color:var(--color-main-deep);
						display:inline-block;
					}
					&::before {
            			content: "＼" "\00a0";
					}
					&::after{
						content: "\00a0" "／";
					}
					@media (width <= 999px) {
						display:none;
					}
				}
				& .headerMenu {
					width:100%;
					font-size: 1.3rem;
					@media (width <= 999px) {
						font-size: 1.2rem;
					}
					& ul {
						--gap-width:5px;					
						display: flex;
						gap: 0 var(--gap-width);
						justify-content: flex-end;					
						& li {
							--row-count:3;
							width:calc((100% - (var(--gap-width) * (var(--row-count) - 1))) / var(--row-count));
							position:relative;
							&.login{
								width:calc((((100% - (var(--gap-width) * (var(--row-count) - 1))) / var(--row-count)) * 2 ) + var(--gap-width));
								@media (width <= 999px) {
									width:100%;
								}
							}
							&.headerCart{
								@media (width <= 999px) {
									display:none;
								}
							}
							& span.cart-badge{
								position:absolute;
								display:flex;
								width:2em;
								height:2em;
								border-radius: 1em;
								background-color:var(--color-main-deep);
								color:#fff;
								line-height:1;
								align-items: center;
								justify-content: center;
								top:0;
								right:0;
							}
							& a {
								background: var(--color-sub-thin);							
								text-align: center;
								height: 70px;
								display: grid;
								place-items: center;
								justify-content: center;
								text-decoration: none;
								color: #666;
								padding: 10px 5px 5px 5px;
								border-radius: 4px;

								@media (width <= 999px) {
									height: 60px;
									white-space: nowrap;
								}

								& i {
									display: block;
									color: #666;
									font-size: 2.0rem;
									margin-bottom: 3px;

									@media (width <= 999px) {
										font-size: 1.8rem;
										margin-bottom: 0px;
									}
								}
							}
							& :hover {
								background: var(--color-sub-light);
							}
						}
					}
				}				
			}			
		}
	}
	
	/*テキスト*/
	& .headerNote {
		background: var(--color-main);
		height: 40px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: var(--color-accent-light);
		font-weight: 700;
		text-shadow: 2px 2px 0 rgba(235,045,41, 0.6);
		order: 1;
		
		@media (width <= 999px) {
			padding-right:65px;
			font-size:1.2rem;
			height: 30px;
		}
				
		&::before {
			content: "＼" "\00a0";
		}
		&::after {
			content: "\00a0" "／";
		}
	}
	
	/*流れる文字　アニメーションは後述*/
	& .headerMessage {
		background: var(--color-main-thin);
		
		order: 2;
		& .headerMessage-trackBg{
			margin-right:80px;
			overflow:hidden;
			height:100%;
			@media (width <= 999px) {
				margin-right:65px;
			}
			& .headerMessage-track {
				& ul {
					& li {
						font-size: 1.3rem;
						font-weight: 700;
						color: var(--color-accent-deep);

						@media (width <= 999px) {
							font-size:1.2rem;
						}

						& span {
							color: var(--color-main);
							display: inline-block;
							padding: 0 5px;
						}
					}
					& :is(li.headerMessage-news, li.headerMessage-buy) {
						&::before {
							font-family: var(--fa);
							font-weight: 900;
							margin-right: 5px;
						}
					}
					& li.headerMessage-news {
						&::before {
							content: "\f0a1";
						}					
					}
					& li.headerMessage-buy {
						&::before {
							content: "\f0d1";
						}	
					}
				}
			}
		}
	}
}

/*流れるアニメーション*/
.headerMessage{
	height:40px;
	overflow:hidden;
	
	@media (width <= 999px) {
		height:30px;
	}
}
.headerMessage-track{
	display:flex;
	height:100%;
	animation: scroll 30s linear infinite;
}
.headerMessage-track ul{
	display:flex;
	align-items:center;
	white-space:nowrap;
	margin:0;
	padding:0;
	min-width:calc100%; 
}
.headerMessage-track li{
	list-style:none;
	margin-right:30px;
	flex-shrink:0;
}
@keyframes scroll{
  from{ transform:translateX(100%); }
  to  { transform:translateX(-100%); }
}

/* ------------------------------------------------------- */
/* スマートフォン下部専用 ----------------------------------- */
/* ------------------------------------------------------- */
.spBottomBar {
	display: none;	
	@media (width <= 999px) {
		display: block;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 800;
		height: 95px;
		width: 100%;
		background: var(--color-main);
		box-shadow: 0 0 15px 0 rgba(50,50,50,0.2);
	}
	
	& ul {
		@media (width <= 999px) {
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			padding: 5px;
			grid-gap: 0 5px;			
		}
		
		& li {
			@media (width <= 999px) {
				font-size: 1.2rem;
				text-align: center;
			}
			
			& a {				
				@media (width <= 999px) {
					display: flex;
					align-items: center;
					justify-content: center;
					height: 60px;
					text-decoration: none;
					background: var(--color-accent-thin);
					color:var(--color-accent-deep);
					border-radius:4px;
				}
				
				& span {
					& i {
						@media (width <= 999px) {
							display: block;
							margin-bottom: 3px;
							font-size: 1.6rem;
						}
					}
				}
			}
		}
		& li.spBottomBar-cart {
			@media (width <= 999px) {
				position:relative;
				& a {
					background: var(--color-accent);
					color:var(--color-accent-deep);

					}
				& span.cart-badge{
					position:absolute;
					display:flex;
					width:2em;
					height:2em;
					border-radius: 1em;
					background-color:var(--color-main-deep);
					color:#fff;
					line-height:1;
					align-items: center;
					justify-content: center;
					left:calc((50% - 1em) + 2em);
					top:1px;
				}
			}
		}
	}
	& .spBtmFreeShippingTxt {
		@media (width <= 999px) {
			display:flex;
			justify-content: center;
			align-items: center;
			height: 25px;
			color:#fff;
			font-size:1.3rem;
			padding-top:5px;
			& span{
				font-weight:700;
				display:inline-block;
			}
		}
	}
}

/* ------------------------------------------------------- */
/* footer ------------------------------------------------ */
/* ------------------------------------------------------- */

#footer {
	background: var(--color-main-thin);
	font-size: 1.3rem;
	
	& .footerInner {
		max-width: var(--size-content-max-width);
		min-width: var(--size-content-min-width);
		margin: 0 auto;
		padding: 50px 0;
		color: var(--color-accent-deep);
		
		@media (width <= 999px) {
			padding: 50px 20px;
		}
		
		& .footerInfo {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			grid-gap: 25px 25px;
			
			@media (width <= 999px) {
				display: block;
			}
			
			& dl {
				@media (width <= 999px) {
					margin-bottom:25px;
				}
				& dt {
					font-weight: 700;
					font-size: 1.7rem;
					padding-bottom: 5px;
					margin-bottom: 15px;
					border-bottom: 1px solid var(--color-accent-deep);
				}
				& dd {
					margin-bottom: 15px;
				}
				& .footerDdStrong {
					font-size: 1.4rem;
					font-weight: 700;
				}
			}
		}
	}
	
	& .footerBottom {
		background: var(--color-main);
		color: #fff;		
		
		& .footerBottomInner {
			max-width: var(--size-content-max-width);
			min-width: var(--size-content-min-width);
			margin: 0 auto;
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			grid-gap: 0 25px;
			height: 40px;
			align-items: center;
			
						
			@media (width <= 999px) {
				display: block;
				height: auto;
				text-align: center;
				padding: 15px;
			}
			
			& .footerMenu {				
				@media (width <= 999px) {
					margin-bottom:15px;
				}
				& ul {
					
					& li {
						display: inline-block;
						
                        &::after {
                            content: "｜";
							display: inline-block;
							padding: 0 5px;
                        }
						
						& a {
							color: #fff;
						}
					}
					& li:last-of-type {
						&::after {
							content: "";
						}
					}
				}
			}

			& #copyright {
				font-family: var(--font-copyright);
				font-size: 1.2rem;
				text-align: right;
				
				@media (width <= 999px) {
					padding-bottom: 70px;
					text-align: center;
				}
			}
		}
	}	
}





/* ------------------------------------------------------- */
/* プリント用 -------------------------------------------- */
/* ------------------------------------------------------- */

@media print {	
    #humberger, #pageTop, #pageTop div, #movePageTop, #pageTop p {
        display: none!important;
    }
    #container {
        padding: 0!important;
    }
    #header {
        position: static!important;
    }
    .topContents {
        min-width: 1000px!important;
        width: 100%!important;
        margin: 0!important;
        padding: 0!important;
        overflow: hidden!important;
    }
}

/* ------------------------------------------------------- */
/* dark mode --------------------------------------------- */
/* ------------------------------------------------------- */

/*@media (prefers-color-scheme: dark) {
	html { filter: invert(1) hue-rotate(180deg); }
	html img { filter: invert(1) hue-rotate(180deg); }
}*/