@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600;700&display=swap');

/*	0.Custom Property
========================================================================== */
:root{
	--bodyBgColor: white;
	--bodyFontColor: black;
	--themeColor: #1478C8;
  --themeColorLight: #BBDFF5;
	--accentColor: #FFEB00;
	--hoverColor: #409AE2;
	--footerTextColor: white;
	--gothicFont: 'Noto Sans JP', sans-serif;
	--boldFontWeight: 600;
	--midiumFontWeight: 500;

  --fontSizeXL: 24px;
  --fontSizeL: 24px;
  --fontSizeM: 18px;
  --fontSizeS: 16px;
  --fontSizeXS: 14px;
  --fontSizeXXS: 12px;

	--sliderHeight: 700px;
    --headerHeight: 100px;
	--contentWidth: 1300px;
	--maximumWidth: 1920px;

	--variableSpaceS: 20px;
	--variableSpaceM: 40px;
	--variableSpaceL: 60px;
	--variableSpaceXL: 80px;
}
@media(min-width: 375px){
	:root{
		--variableSpaceS: calc(4.8vw + 1.184px);
		--variableSpaceM: calc(9.6vw + 2.368px);
		--variableSpaceL: calc(14.4vw + 3.552px);
		--variableSpaceXL: calc(19.2vw + 4.736px);
	}
}

@media(min-width: 450px){
	:root{
    --fontSizeXL: 30px;
    --fontSizeL: 22px;
    --fontSizeM: 17px;
    --fontSizeS: 16px;
    --fontSizeXS: 14px;
	}
}

@media(min-width: 1150px){
	:root{
		--fontSizeXL: 36px;
		--fontSizeL: 24px;
		--fontSizeM: 18px;
		--fontSizeS: 16px;
    	--fontSizeXS: 14px;

		--variableSpaceS: 50px;
		--variableSpaceM: 100px;
		--variableSpaceL: 150px;
		--variableSpaceXL: 200px;
	}
}


/*	CSS resrt
========================================================================== */
body,html{ margin: 0; padding: 0; line-height: 1;}
a{ text-decoration: none; color: inherit;}
button{ border: none;}
ul{ margin: 0; padding: 0;}


/* content width setting
========================================================================== */
.maximum-width{ max-width: var(--maximumWidth); margin-left: auto; margin-right: auto; }
.content-width{ max-width: var(--contentWidth); margin-left: auto; margin-right: auto; }
.max1200{ max-width: 1200px; margin-left: auto; margin-right: auto; }
.max1100{ max-width: 1100px; margin-left: auto; margin-right: auto; }
.max1000{ max-width: 1000px; margin-left: auto; margin-right: auto; }
.max960{ max-width: 960px; margin-left: auto; margin-right: auto; }
.horizontal-margin{ width: calc(100% - 36px); margin-right: auto; margin-left: auto; }
@media ( min-width: 700px ){
	.horizontal-margin{ width: calc(100% - 50px); }
}


/* General Settings
========================================================================== */

body{
  color: var(--bodyFontColor);
  background-color: var(--bodyBgColor);
  font-family: var(--gothicFont);
  font-weight: var(--regularFontWeight);
  font-size: var(--fontSizeM);
}

body *{ box-sizing: border-box; margin: 0; padding: 0; letter-spacing: -0.05em;}

p{ line-height: 1.5;}

textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
.uneditable-input {
  border: 1px solid #ccc;
  background-color: #fff;
}

textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input:focus {
  outline: 0;
  outline: thin dotted \9;
  border-color: rgba(82, 168, 236, 0.8);
}

img{ display: block; margin: auto; max-width: 100%;}

.nowrap{ display: inline-block; word-break: keep-all;}
.reset-list-style{ list-style: none;}

/*=======================================================================
 utility
========================================================================= */
.hoverType-2{background-color: var(--hoverColor); transition: all 0.3s ease;}
.hoverType-2:hover{ background-color: var(--themeColor);}
.wbka{ word-break: keep-all;}
.bp{ width: 0em; display: inline-block;}
/*=======================================================================
 site header
========================================================================== */
#site-header{
  position: fixed;
  z-index: 3;
  top: 0;
  height: calc(var(--headerHeight) - 50px) ;
  background-color: white;
  width: 100%;
}


.header-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: 100%;
  position: relative;
}
#header-title .shop-logo{ display: none;}

#header-navigation-wrapper{ flex-basis: 100%; display: flex; justify-content: flex-end; align-items: center; }

.primary-menu-wrapper{ display: none; }

.toggle-wrap{ display: none; }

.svg-icon{ width: 27px; height: 27px; transition: all 0.3s ease;}

#open-btn.svg-icon,#close-btn.svg-icon{ height: 27px;}

#cart-btn.svg-icon{ height: 26px;}

#contact-btn.svg-icon{ height: 20px;}

#member.svg-icon{ height: 22px;}

@media(min-width: 1000px){
  #site-header{ position: relative; height: var(--headerHeight);}

  #site-header.fixed{ position: fixed; top: -100%; z-index: 3;}

  #site-header.fixed.rolldown{ top: 0; transition: all 0.5s ease; }

  #header-navigation-wrapper{ flex-basis: calc(100% - 120px); justify-content: space-between; gap: 20px; }

  .primary-menu-wrapper{ display: block; width: auto; flex-grow: 1;}

  .primary-menu{
  font-size: var(--fontSizeS);
  letter-spacing: -0.08em;
  list-style: none;
  display: flex;
  justify-content: space-evenly;
  width: 100%;
  height: 100%;
  gap: 15px;
  }

  .primary-menu li > *{ display: flex; align-items: center; height: 100%;}
  .primary-menu li.search{ position: relative;}

  .primary-menu .search #open-btn{ opacity: 1; position: relative; z-index: 1}
  .primary-menu .search #close-btn{ opacity: 0; position: absolute; z-index: 0; top: 0; left: 0;}
  .primary-menu .search.active #open-btn{ opacity: 0; z-index: 0;}
  .primary-menu .search.active #close-btn{ opacity: 1; z-index: 1;}
  .toggle-wrap{ display: none; position: absolute; width: 270px; top: 100%; right: 0;padding: 30px;background-color: rgba(221,240,255,0.9);}
  .toggle-wrap form{ display: flex; flex-wrap: wrap; gap: 20px 0;align-items: center;}
  .toggle-wrap input[name="keyword"]{height: 2em;}
  .toggle-wrap button{ height: 2em; border-width: 1px 1px 1px 0; border-color: #ccc; border-style: solid; padding: 5px;}
  .toggle-wrap-close{ position: absolute; right: 0; top: 0;}
  .prd_search_optioncategory{ font-size: var(--fontSizeXS); line-height: 1.5;}
  .prd_search_optioncategory select{ width: 100%; padding: 5px;}
}

#mobile-nav-toggle{
  width: 50px;
  height: 50px;

  color: white;
  border: none;
}
#mobile-nav-toggle{
	display : flex;
	position : fixed;
	top : 7px;
	left: calc(100vw - 77px);
	width : 35px;
	height: 35px;
	flex-wrap: wrap;
	justify-content : center;
	align-content: space-evenly;
	color: white;
	background-color: var(--themeColorLight);
	cursor: pointer;
	z-index: 100;
	border: none;
	padding: 3px 3px ;
}
#mobile-nav-toggle svg{
	width : 26px;
	height : 22px;
	display: block;
	position: relative;
	overflow: hidden;
	transition: all 0.5s ease;
	z-index: 1;
}

.toggle-text{
	font-size : var(--font-sizeXS);
	font-weight : var(--midiumFontWeight);
	width : 100%;
	text-align: center;
	white-space : nowrap;
	word-break : break-all;
}

svg rect#u1, svg rect#l1 ,svg rect#m1,svg rect#m2{
	transform-origin: center;
	transition: all 0.3s linear;
}
#mobile-nav-toggle .toggle-icon > svg {
    display: block;
}
#mobile-nav-toggle.active rect#m1{
	transform: rotate(30deg);
}
#mobile-nav-toggle.active rect#m2{
	transform: rotate(-30deg);
}
#mobile-nav-toggle.active rect#u1{
	transform: scale(0);
}
#mobile-nav-toggle.active rect#l1{
	transform: scale(0);
}

#go-officialsite{ display: none;}

@media(min-width: 1000px){

  #mobile-nav-toggle{ display: none; }

  #go-officialsite{
    position: absolute;
    right: 0;
      top: 0;
      width: 150px;
      height: 30px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: var(--fontSizeXS);
      color: white;
      background-color: var(--themeColor);
      transition: all 0.3s ease-in-out;
  }
  #go-officialsite:hover{
    background-color: #409AE2;
  }
}

@media(min-width: 1150px){
  #header-title .small-logo{ display: none;}
  #header-title .shop-logo{  display: block; }
}


/*=======================================================================
 Menu Modal
 ========================================================================= */
#menu-modal{
	position : fixed;
	z-index : 2;
	top : 0;
	right : 99999rem;
	bottom : 0;
	left : -99999rem;
	display : none;
	overflow-x : hidden;
	overflow-y : auto;
	transition : opacity 0.25s ease-in-out, left 0s 0.25s, right 0s 0.25s;
	opacity : 0;
}

#menu-modal.show-modal{ display : flex; }

#menu-modal.active{ right : 0; left : 0; transition : opacity 0.25s ease-out; opacity : 1; }

.modal-menu-wrapper{
	display : flex;
  flex-direction: column;
	overflow : auto;
	justify-content : stretch;
	width : 100%;
  max-width: 375px;
  margin: 0 0 0 auto;
	padding : 60px 30px 0;
	transition : transform 0.2s ease-in, opacity 0.2s ease-in;
	transform : translateX(20rem);
	opacity : 1;
	background : var(--themeColorLight);
	box-shadow : 0 0 2rem 0 rgba(0, 0, 0, 0.1);
}

#menu-modal.active .modal-menu-wrapper{
	transition-timing-function : ease-in-out;
	transform : translateX(0);
	opacity : 1;
}

.modal-logo{ margin-bottom: 25px;}

.modal-menu{ position : relative; width : 100%; }

.modal-menu li{
	line-height : 1;
	display : flex;
	flex-wrap : wrap;
	justify-content : flex-start;
	margin : 0;
	border-width : 0.1rem 0 0 0;
	border-style : solid;
	border-color : #dedfdf;
}

.modal-menu > li > a{
	font-size : var(--fontSizeM);
	padding: 10px 0;
	display: flex;
	align-items: center;
	gap: 20px;
  color: var(--themeColor);
}

.modal-function-menu{ list-style: none; margin-bottom: 20px;}
.modal-function-menu li{ padding: 0.5em 1em; background: var(--bodyBgColor); color: var(--themeColor); text-align: center; margin-bottom: 10px; font-size: var(--fontSizeS);}
.modal-function-menu li a{ display: flex; justify-content: center; align-items: center;}

.modal-function-menu li.modal-search{ padding: 0;}
.modal-search form{ display: flex;}
.modal-search input[name="keyword"]{ border: none; width: calc(100% - 50px); height: 43px; text-align: center; color: var(--themeColor); font-size: inherit;}
.modal-search button{ background: #CAB151; height: 43px; width: 50px;}


/*=======================================================================
 パンくずリスト
=========================================================================*/
.topicpath_nav {
	margin: 0.5em 0;
	font-size: 84.615%;
	font-size: 16px;
	line-height: 1;
	border-bottom: 2px dotted #bbb;
	padding-bottom: 10px;
	list-style: none;
}

.topicpath_nav li {
	display: inline;
	margin-right: 0.2em;
}
.topicpath_nav li a {
	margin-left: 0.2em;
	color: #444;
	text-decoration: none;
}
/*=======================================================================
 #main
 ========================================================================= */
#main{ min-height: 100vh; margin-top: 50px; margin-bottom: var(--variableSpaceS);}

h2.marked{ display: flex;
	align-items: center;
	font-size: 1.11em;
	color: var(--themeColor);
	max-width: 350px;
	height: 1.8em;
	padding-left: 0.5em;
	margin-bottom: 1em;
}

h2.marked::before{ content: ""; width: 1em; height: 1em; background-image: url(https://file003.shop-pro.jp/PA01499/953/images/three-dot.svg); background-size: contain; background-repeat: no-repeat;}

.header-block:not(.free9){ margin-bottom: var(--variableSpaceM);}
.common-header h1{ text-align: center;}


@media(min-width: 1000px){
 #main{ margin-top: 0;}
 #main.margined{ margin-top: var(--headerHeight);}
}
/* 商品一覧 検索結果
 =========================================================================*/

 .header-block h1{ min-height: 220px;}
 .header-block h1 figure{ height: 100%; position: relative;}
 .header-block h1 img{ object-fit: cover; object-position: center; height: 100%; min-height: 220px;}

 .header-block figcaption{
	 position: absolute;
	 left: 0;
	 right: 0;
	 margin: auto;
	 text-align: center;
	 font-size: 38px;
	 color: var(--themeColor);
	 color: white;
 }
 .header-block figcaption.cat{
	 bottom: 8%;
	 transform: skewX(-10deg);
 }
 .header-block figcaption.grp{
	 top: 50%;
	 transform:translateY( -50%) skewX(-10deg);
 }

 .header-block figcaption div:first-child{
	 text-align: center;
	 font-size: 30px;
 }

 .header-block figcaption.cat div:first-child{
	 color: var(--themeColor);
	 text-shadow: 1px 1px 0 var(--themeColor);
 }

 .header-block figcaption div:last-child{
	 text-align: center;
	 font-size: 35px;
 }

 .header-block figcaption.cat div:last-child{
	 color: #66B6F5;
	 text-shadow: 1px 1px 0 #66B6F5;
 }

 .header-block .description {
	 max-width: 800px;
	 margin: var(--variableSpaceS) auto;
	 line-height: 2;
 }

 @media(min-width: 785px){
	 .header-block h1{ height: auto;}
 }

 @media(min-width: 1000px){
	.header-block figcaption div:first-child{
		font-size: 38px;
	}

	.header-block figcaption div:last-child{
		font-size: 40px;
	}
}
/*========================================================================
  #two-columns-wrapper
 =========================================================================*/
#two-columns-wrapper{ display: flex; flex-direction: column ;gap: 40px; padding-top: var(--variableSpaceS);}
#side-column{ display: none;}
#side-column-LP{display: none;}
#main-column{ flex-basis: calc(100% - 340px); flex-grow: 1;}
@media(min-width: 1024px){
	#two-columns-wrapper{ flex-direction: row;}
	#side-column{ display: block;flex-basis: 300px; flex-grow: 1;}
	#main.free9 #side-column{ display: none;}
	#main.free9 #side-column-LP{ display: block;flex-basis: 300px; flex-grow: 1;}
}


/*content-wrap お知らせやフリースペースを使用したバナー埋め込み
==========================================================================*/


/* primary-launch 自転車選びチャート等のリンクバナー
==========================================================================*/
.primary-launch{ display: flex;gap: 30px; max-width: 960px; margin: 0 auto 30px; flex-wrap: wrap;}
.primary-launch > a{ flex-basis: 350px; flex-grow: 1; max-width: 465px; background-color: var(--themeColor); transition: all 0.3s ease-in-out; margin: auto;}
.primary-launch > a:hover{ background-color: var(--hoverColor);}

.header-linker{ display: flex; flex-wrap: wrap;}
.header-linker a.full{ width: 100%; height: 0; padding-top: 20.8%; position: relative;}
.header-linker a.full > div{ position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: var(--themeColor);display: flex; justify-content: center; align-items: center; }
.header-linker a.full > div span{ color: white; font-size: 24px; transform: skewX(-20deg); font-weight: var(--boldFontWeight);}

#kodamart-info{ width: 100%; max-width: 960px; height: 150px; overflow: auto; border: 1px solid #9F9F9F; margin-bottom: var(--variableSpaceS); padding: 0.5em;}


.content-wrap{ margin-bottom: var(--variableSpaceS);}

/*category list カテゴリーリスト
==========================================================================*/

#cat-launcher{ margin-bottom: var(--variableSpaceS);}
.flex-wrap{ display: flex; gap: 20px; flex-wrap: wrap; justify-content: center;}
.cat-launcher-link{ flex-basis: 200px; flex-grow: 1; max-width: 225px;}
.cat-launcher-link figure{ width: 100%; height: 0; padding-top: 100%; position: relative; background-color: var(--themeColor); transition: all 0.3s ease;}
.cat-launcher-link:hover figure{ background-color: var(--hoverColor);}
.cat-launcher-link figure img{ position: absolute; top: 0; bottom: 0; left: 0; right: 0;}
.cat-launcher-link figure figcaption{
	position: absolute;
    bottom: 5%;
    left: 0;
    right: 0;
    margin: auto;
    font-size: 22px;
    font-weight: var(--boldFontWeight);
    color: white;
    text-align: center;
    transform: skewX(-20deg);
    display: block;
}

/*group list グループリスト
==========================================================================*/
#group-launcher{ margin-bottom: var(--variableSpaceS);}
.group-launcher-link{ flex-basis: 250px; flex-grow: 1; max-width: 300px; position: relative;}
.group-launcher-link::after{ position: absolute; content: ""; top: 0; width: 100%; height: 100%; background-color: rgba(255,255,255,0.3); opacity: 0; transition: all 0.3s ease;}
.group-launcher-link:hover::after{ opacity: 1;}


/*#main-column ピックアップ　商品一覧 商品検索結果
 =========================================================================*/
.category-header .description{ max-width: 800px; margin: var(--variableSpaceS) auto; line-height: 2;}


.product-list-unit figure{ position: relative; width: 100%; height: 0; padding-top: 100%;}
.product-list-unit figure img{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain;}

.product-list{ list-style: none; display: flex; flex-wrap: wrap; gap:20px; margin-bottom: var(--variableSpaceM); justify-content: center;}
.product-list-unit{ flex-basis: 250px; flex-grow: 1; max-width: 300px;}

.prd-lst-name{ font-size: var(--fontSizeXS); line-height: 1.5; position: relative;}
.prd-lst-name img{ position: absolute; top: -10px;}
.prd-lst-price{ font-size: var(--fontSizeS); line-height: 1.5;}
.prd-lst-exprice{ font-size: var(--fontSizeM); color: red; font-weight: var(--boldFontWeight); }
.product-link-btn{ display: block; font-size: var(--font-sizeXS); width: 12em; color: white; background-color: var(--themeColor); padding: 1em; margin: 20px auto; text-align: center; transition: all 0.3s ease;}
.product-link-btn:hover{ background: var(--themeColorLight); color: var(--themeColor); }

/*ページナビ*/
.prd_lst_pager ul{ display: flex; justify-content: space-around; margin-bottom: var(--variableSpaceS);}

/*=======================================================================
 #side-column
 =========================================================================*/
.side-cat-wrap{ display: flex; flex-wrap: wrap; gap: 0 30px; max-width: 300px; margin: 0 auto; flex-basis: 300px; align-content: flex-start;}
.side-cat{ flex-basis: 300px; flex-grow: 0; flex-shrink: 1;}

h2.under-lined{ font-size: var(--fontSizeM); font-weight: var(--boldFontWeight); width: 100%; border-bottom: 1px solid black; margin-bottom: 1em; position: relative; line-height: 1.1;}
h2.under-lined::after{ content: "\025bc";	display: inline-block; width: 1em; height: 1em; position: absolute; right: 0; color: var(--themeColor); transition: all 0.3s ease; }
h2.under-lined.active::after { transform: rotate(180deg); }
.side-cat-list{ height: 0; overflow: hidden; transition: height 0.5s ease;}
.side-cat-link,.side-function-link{ margin-bottom: 1em;}
.side-function-link{ display: flex; align-items: center; font-weight: var(--mediumFontWeight); }
.side-function-link a{ display: flex; align-items: center;}
.side-cat-link a{ transition: all 0.3s ease-in-out;}
.side-cat-link a:hover,.side-function-link a:hover{ color: var(--themeColor);}
#member.svg-icon{ width: 22px; margin-left: 3px; margin-right: 2px;}

@media(min-width: 1024px){
	h2.under-lined::after{ content: none;}
  .side-cat-wrap{ display: flex; flex-wrap: wrap; gap: 30px; max-width: 630px; margin: 0 auto;}
  .side-cat{ flex-basis: 300px; flex-grow: 0; flex-shrink: 0;}
  .side-cat-list{ display: block; height: auto; }
}

/*プライバシーポリシー お問い合わせ
 =========================================================================*/
.single-column{ overflow: hidden; padding-bottom: var(--variableSpaceM);}
#header-image.blank{ position: relative; }
#header-image.blank img{height: 360px;}
#header-image.blank h1{ position: absolute; top: 50%; transform: translateY(-50%); margin: auto; left: 0; right: 0; text-align: center; }

#policy p{ margin-bottom: 3em;}



/* フリーページ
 =========================================================================*/
h1.freepage-title,h1.common{ font-size: var(--fontSizeXL); text-align: center;}
.freePage h2{ font-size: var(--fontSizeL); border-bottom: 1px solid #707070; margin: 40px 0 20px 0; line-height: 1.2;}
.freePage h3{font-size: var(--fontSizeM); margin: 20px 0;}
.step-block{ margin-bottom: var(--variableSpaceS);}
.link_btn{ margin: 30px 0; display: inline-block; padding: 10px; color: white; background-color: red; text-decoration: none; transition: all 0.3s ease;}
.freePage p{ margin-bottom: 1em;}
.freePage ul,.freePage ol{ margin: 0 0 1em 1.5em; line-height: 1.5;}
.freePage dl{ line-height: 1.5;}
.freePage dt{ margin-bottom: 0.5em;}
.freePage dd{ margin-bottom: 1em;}



/* 特定商取引法
 =========================================================================*/
.def_lst {
	border-top: 1px solid #eee;
	display: flex;
	flex-wrap: wrap;
}
.def_lst_dt {
	padding: 1em 0;
	font-weight: var(--boldFontWeight);
	flex-basis: 100%;
	word-break: break-all;
}
.def_lst_dd {
  padding: 1em 0;
  border-bottom: 1px solid #eee;
  flex-basis: 100%;
}
@media(min-width: 800px){
  .def_lst{gap: 30px;}

  .def_lst_dt {
    flex-basis: 250px;
    flex-grow: 1;
    border-bottom: 1px solid #eee;
  }
  .def_lst_dd {
    flex-basis: 500px;
    flex-grow: 1;
  }
}
.def_lst_dd img {
	max-width: 100%;
	width: inherit;
	height: auto;
	display: inline;
}
.sk_info_block,.sk_delivery_block{ margin-bottom: var(--variableSpaceS);}

/* プライバシーポリシー
 =========================================================================*/
 #policy h2{ font-size: var(--fontSizeL); border-bottom: 1px solid #707070; margin: 40px 0 20px 0; line-height: 1.2; }

/*=======================================================================
 #site footer
 =========================================================================*/
 #site-footer{ background-color: var(--themeColor); color: white; padding: var(--variableSpaceS) 0; }
.footer-inner{ display: flex; flex-wrap: wrap; justify-content: space-between; gap: 40px; position: relative;}

.footer-logo{margin: auto;}
.footer-official-link{ margin: 30px auto; display: block; background-color: var(--hoverColor); transition: all 0.3s ease-in-out; padding: 20px;}
.footer-official-link:hover{ background-color: #66B6F5; }


.footer-nav{ flex-basis: calc(27em + 40px); display: flex; flex-wrap: wrap; gap: 40px; margin: 0 auto;}
.footer-nav ul{ list-style: none; font-size: var(--fontSizeS); flex-shrink: 0; margin: 0 auto;}
.footer-nav li{ margin-bottom: 1em; transition: all 0.3s ease-in-out;}
.footer-nav li:hover{ color: var(--accentColor);}
.footer-nav ul.nav-left{ flex-basis: 16em;}
.footer-nav ul.nav-right{ flex-basis: 16em;}
.footer-nav ul.nav-left li::before{ content: "\025b6"; width: 1em; height: 1em;}
.footer-nav ul.nav-right li a{ display: flex; align-items: center;}

.footer-function{ flex-basis: 10em; flex-grow: 1; display: flex; flex-wrap: wrap; gap: 20px; font-size: 20px; justify-content: center; align-content: flex-start;}
.footer-function-btn{ display: flex; align-items: center; justify-content: center; padding: 0.3em; border: 1px solid white; width: 10em;}

#pagetop{ position: fixed; left: 0; right: 0; height: 30px; bottom: 20px; transform: translateY(50px); transition: transform 0.3s ease;}
#pagetop.active{ transform: none;}
#pagetop a{ position: absolute; right: 0; display:flex; width: 30px; height: 30px; border-radius: 10px; background-color: var(--themeColor); justify-content: center; align-items: center;}
@media(min-width: 600px){
	.footer-nav ul.nav-right{ flex-basis: 11em;}
}


/* top banner
=====================================================================================*/
#banner-wrap.nogap{ display: flex; flex-wrap: nowrap;}

#banner-wrap a{ transition: all 0.3s ease-in-out; }

#banner-wrap a:hover{ opacity: 0.8;}

#banner-wrap.nogap a{ flex-basis: 50%;}

#banner-wrap.half{ display: flex; flex-wrap: wrap; gap: 30px; max-width: 960px; margin: 0 auto 30px;}

#banner-wrap.half a{ flex-basis: 350px; flex-grow: 1; max-width: 465px; margin: auto;}


/*=======================================================================
 WordPress block対応css
 =========================================================================*/
 body {
	--wp--preset--color--black: #000000;
	--wp--preset--color--cyan-bluish-gray: #abb8c3;
	--wp--preset--color--white: #ffffff;
	--wp--preset--color--pale-pink: #f78da7;
	--wp--preset--color--vivid-red: #cf2e2e;
	--wp--preset--color--luminous-vivid-orange: #ff6900;
	--wp--preset--color--luminous-vivid-amber: #fcb900;
	--wp--preset--color--light-green-cyan: #7bdcb5;
	--wp--preset--color--vivid-green-cyan: #00d084;
	--wp--preset--color--pale-cyan-blue: #8ed1fc;
	--wp--preset--color--vivid-cyan-blue: #0693e3;
	--wp--preset--color--vivid-purple: #9b51e0;
	--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%);
	--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);
	--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%);
	--wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%);
	--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);
	--wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);
	--wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);
	--wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);
	--wp--preset--gradient--luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);
	--wp--preset--gradient--pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);
	--wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);
	--wp--preset--gradient--midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);
	--wp--preset--font-size--small: 13px;
	--wp--preset--font-size--medium: 20px;
	--wp--preset--font-size--large: 36px;
	--wp--preset--font-size--x-large: 42px;
	--wp--preset--spacing--20: 0.44rem;
	--wp--preset--spacing--30: 0.67rem;
	--wp--preset--spacing--40: 1rem;
	--wp--preset--spacing--50: 1.5rem;
	--wp--preset--spacing--60: 2.25rem;
	--wp--preset--spacing--70: 3.38rem;
	--wp--preset--spacing--80: 5.06rem;
	--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);
	--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);
	--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);
	--wp--preset--shadow--outlined: 6px 6px 0px -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1);
	--wp--preset--shadow--crisp: 6px 6px 0px rgba(0, 0, 0, 1);
  }
  :where(.is-layout-flex){gap: 0.5em;}
  body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}
  body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}
  body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}
  body .is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}
  body .is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}
  body .is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}
  body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){
	  max-width: var(--wp--style--global--content-size);
	  margin-left: auto !important;
	  margin-right: auto !important;
  }
  body .is-layout-constrained > .alignwide{
	  max-width: var(--wp--style--global--wide-size);
  }
  body .is-layout-flex{display: flex;}
  body .is-layout-flex{flex-wrap: wrap;align-items: center;}
  body .is-layout-flex > *{margin: 0;}
  :where(.wp-block-columns.is-layout-flex){gap: 2em;}
  .has-black-color{color: var(--wp--preset--color--black) !important;}
  .has-cyan-bluish-gray-color{color: var(--wp--preset--color--cyan-bluish-gray) !important;}
  .has-white-color{color: var(--wp--preset--color--white) !important;}
  .has-pale-pink-color{color: var(--wp--preset--color--pale-pink) !important;}
  .has-vivid-red-color{color: var(--wp--preset--color--vivid-red) !important;}
  .has-luminous-vivid-orange-color{color: var(--wp--preset--color--luminous-vivid-orange) !important;}
  .has-luminous-vivid-amber-color{color: var(--wp--preset--color--luminous-vivid-amber) !important;}
  .has-light-green-cyan-color{color: var(--wp--preset--color--light-green-cyan) !important;}
  .has-vivid-green-cyan-color{color: var(--wp--preset--color--vivid-green-cyan) !important;}
  .has-pale-cyan-blue-color{color: var(--wp--preset--color--pale-cyan-blue) !important;}
  .has-vivid-cyan-blue-color{color: var(--wp--preset--color--vivid-cyan-blue) !important;}
  .has-vivid-purple-color{color: var(--wp--preset--color--vivid-purple) !important;}
  .has-black-background-color{background-color: var(--wp--preset--color--black) !important;}
  .has-cyan-bluish-gray-background-color{background-color: var(--wp--preset--color--cyan-bluish-gray) !important;}
  .has-white-background-color{background-color: var(--wp--preset--color--white) !important;}
  .has-pale-pink-background-color{background-color: var(--wp--preset--color--pale-pink) !important;}
  .has-vivid-red-background-color{background-color: var(--wp--preset--color--vivid-red) !important;}
  .has-luminous-vivid-orange-background-color{background-color: var(--wp--preset--color--luminous-vivid-orange) !important;}
  .has-luminous-vivid-amber-background-color{background-color: var(--wp--preset--color--luminous-vivid-amber) !important;}
  .has-light-green-cyan-background-color{background-color: var(--wp--preset--color--light-green-cyan) !important;}
  .has-vivid-green-cyan-background-color{background-color: var(--wp--preset--color--vivid-green-cyan) !important;}
  .has-pale-cyan-blue-background-color{background-color: var(--wp--preset--color--pale-cyan-blue) !important;}
  .has-vivid-cyan-blue-background-color{background-color: var(--wp--preset--color--vivid-cyan-blue) !important;}
  .has-vivid-purple-background-color{background-color: var(--wp--preset--color--vivid-purple) !important;}
  .has-black-border-color{border-color: var(--wp--preset--color--black) !important;}
  .has-cyan-bluish-gray-border-color{border-color: var(--wp--preset--color--cyan-bluish-gray) !important;}
  .has-white-border-color{border-color: var(--wp--preset--color--white) !important;}
  .has-pale-pink-border-color{border-color: var(--wp--preset--color--pale-pink) !important;}
  .has-vivid-red-border-color{border-color: var(--wp--preset--color--vivid-red) !important;0}
  .has-luminous-vivid-orange-border-color{border-color: var(--wp--preset--color--luminous-vivid-orange) !important;}
  .has-luminous-vivid-amber-border-color{border-color: var(--wp--preset--color--luminous-vivid-amber) !important;}
  .has-light-green-cyan-border-color{border-color: var(--wp--preset--color--light-green-cyan) !important;}
  .has-vivid-green-cyan-border-color{border-color: var(--wp--preset--color--vivid-green-cyan) !important;}
  .has-pale-cyan-blue-border-color{border-color: var(--wp--preset--color--pale-cyan-blue) !important;}
  .has-vivid-cyan-blue-border-color{border-color: var(--wp--preset--color--vivid-cyan-blue) !important;}
  .has-vivid-purple-border-color{border-color: var(--wp--preset--color--vivid-purple) !important;}
  .has-vivid-cyan-blue-to-vivid-purple-gradient-background{background: var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple) !important;}
  .has-light-green-cyan-to-vivid-green-cyan-gradient-background{background: var(--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan) !important;}
  .has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange) !important;}
  .has-luminous-vivid-orange-to-vivid-red-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-orange-to-vivid-red) !important;}
  .has-very-light-gray-to-cyan-bluish-gray-gradient-background{background: var(--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray) !important;}
  .has-cool-to-warm-spectrum-gradient-background{background: var(--wp--preset--gradient--cool-to-warm-spectrum) !important;}
  .has-blush-light-purple-gradient-background{background: var(--wp--preset--gradient--blush-light-purple) !important;}
  .has-blush-bordeaux-gradient-background{background: var(--wp--preset--gradient--blush-bordeaux) !important;}
  .has-luminous-dusk-gradient-background{background: var(--wp--preset--gradient--luminous-dusk) !important;}
  .has-pale-ocean-gradient-background{background: var(--wp--preset--gradient--pale-ocean) !important;}
  .has-electric-grass-gradient-background{background: var(--wp--preset--gradient--electric-grass) !important;}
  .has-midnight-gradient-background{background: var(--wp--preset--gradient--midnight) !important;}
  .has-small-font-size{font-size: var(--wp--preset--font-size--small) !important;}
  .has-medium-font-size{font-size: var(--wp--preset--font-size--medium) !important;}
  .has-large-font-size{font-size: var(--wp--preset--font-size--large) !important;}
  .has-x-large-font-size{font-size: var(--wp--preset--font-size--x-large) !important;}



 .wp-block-image figcaption{ text-align: center;}
 .wp-block-spacer{ clear: both;}

 /*特設ページ*/
.header-block.free9 h1 > figure{
	height: 0;
    width: 100%;
    position: relative;
    padding-top: 102.24%;
}

.header-block.free9 h1 > figure img{
	position: absolute;
    top: 0;
    display: block;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

@media(min-width: 550px){
	.header-block.free9 h1 > figure{
		height: 563px;
		width: 100%;
		position: relative;
		padding-top: 0;
	}
}
@media(min-width: 1000px){
	.header-block.free9 h1 > figure{
		height: 0;
		width: 100%;
		position: relative;
		padding-top: 56.25%;
	}
}
.launcher{
	line-height: 1.5;
    margin-bottom: 40px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
 }
#launcher.fix{
  position: fixed;
  top: 50px;
  z-index: 3;
  width: calc(100% - 50px);
}
@media(min-width: 1000px){
  #launcher.fix{  top: 80px;}
}
@media(min-width: 1024px){
  #launcher.fix{  width: calc(100% - 390px); max-width: 960px;}
}

.launcher a{ flex-basis: 30%; flex-shrink: 0; height: 3.5em;font-size: var(--fontSizeXXS); word-break: keep-all;}
.topicpath_nav.margined{ margin-bottom: calc(var(--fontSizeXXS) * 3 + 48px);}
.launcher a > div{
	font-weight: bold;
	color: white;
	padding: 5px;
	height: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	align-content: center;
	line-height: 1.1 ;
	text-align: center;
}

@media(min-width: 375px){
   .launcher a{ font-size: var(--fontSizeXS);}
   .topicpath_nav.margined{ margin-bottom: calc(var(--fontSizeXS) * 3 + 48px);}
}

@media(min-width: 650px){
  .launcher a{ flex-basis: 11em; font-size: var(--fontSizeM);}
  .topicpath_nav.margined{ margin-bottom: calc(var(--fontSizeM) * 3 + 48px);}
}

/*商品一覧割引率表示*/
.unit-box > a{ 
  position:relative;
  display: block;
}
.discount-rate{ 
  display: none;
}
.free9 .discount-rate.active{
  display:  block;
  background-color: red;
  color: white;
  font-size: 1.1em;
  text-align: center;
  padding: 0.3em;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  font-weight: bold;
  width: 90%;
  margin: auto;
}

.prd-lst-teika{display:none;}