@charset "UTF-8";

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

/******************* カテゴリー *******************/

h2.border{
  padding-bottom: .5em;
  padding-top: .5em;
  border-top: 8px solid #000;
  border-bottom: 1px solid #000;
}

.comm__Inner{
  position: relative;
  z-index: 2;
}

p.Center{
  text-align: center;
}

p.white{
  color:#fff !important;
}

.cate_flex{
  display: flex;
  flex-wrap: wrap;
  gap: 1.546vw;
  margin-bottom: 2em;
}

.cate_flex a{
  width:var(--flex_third_space);
  max-width: 100%;
  background: #fff;
  color:#fff;
  font-size: 0.9rem;
  font-weight: 300;
  font-family:游ゴシック体, 'Yu Gothic', YuGothic,'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}

.cate_flex a::before {
  background: #999;
  border: 1px solid #454545;
  z-index: -1;
}

h2.cat{
  font-family: "ryo-display-plusn", serif;
  color:#fff;
}

section.yellow-bg{
  background:#efe300;
}

section.contact{
  background:#353535;
}

section.contact::before{
  content: '';
  background: #000;
  position: absolute;
  left:0;
  top:0;
  width: 100%;
  height: 10%;
}

section.yellow-bg .comm__Inner, section.contact .comm__Inner{
  background: #fff;
  padding: 2.6vw;
  max-width: 1200px;
  margin: auto;
}

.date{
  font-family: var(--Marcellus), sans-serif;
  font-style: italic;
  font-size: 0.9rem;
}

.single h3{
  font-family:游ゴシック体, 'Yu Gothic', YuGothic,'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
  padding:.75em;
  font-weight: 300;
  background: #363636;
  color:#fff;
  padding-left: .5em;
  margin-bottom: 2em;
  font-size: 1.4rem;
}

section.yellow-bg .comm__Inner .sns{
  color:#000;
  margin-top: 2em;
  align-items: center;
}

section.yellow-bg .comm__Inner .sns a{
  color:#000;
  display: inline-block;
  padding: 10px;
  background: #ddd;
  line-height: 1.0;
  border-radius: 0.16em;
}

/******************* アクセス *******************/

section.access{
  padding-top: calc(var(--row-space) / 3);
  background: rgba(0,0,0,0.925);
}

section.access h2{
  margin-top: 0 !important;
}

section.access .accessmap{
  position: fixed;
  z-index: -1;
  top:0;
  left:0;
  filter: blur(3px);
}

section.access .accessmap iframe {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
}

section.access .accessmap iframe{
  width: 100vw !important;
  height:100vh !important;
}

section#company .comm__Inner{
  position: relative;
  z-index: 1;
  max-width: 1000px;
  margin: auto;
}

section#company{
  background: #f4f4f4;
  margin-bottom: var(--col-space);
}

dl.company{
  display: flex;
  justify-content: flex-start;
  border-top: #363636 1px solid;
  border-bottom: #363636 1px solid;
  padding: .85em;
  flex-wrap: nowrap;
  color:#000;
}

dl.company dt{
  width: 30%;
  border-right: #999 solid 1px;
  text-align: center;
  display: flex;
  flex-direction: column;
}

dl.company dd{
  width: 70%;
  display: flex;
  flex-direction: column;
}

.caution__wrap{
  background: #f2f2f2;
  padding: 1em;
}

ul.disc li{
  margin-top: 1em;
}

@media screen and (max-width: 767px) {

  dl.company{
    padding-left: 0;
  }
  dl.company dd{
    margin-left: 1em;
  }
  dl.company dt{
    font-size: 0.85rem;
    width: 35%;
    min-width: 35%;
  }
}

/******************* メールフォーム *******************/

input[type="radio"]{
  width:25px;
  height:25px;
  vertical-align:top;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="password"],
select,
textarea {
border-radius: 3px;
padding:1em .5em;
box-shadow: inset 1px 4px 9px -6px rgba(0,0,0,0.1);
border:solid 1px #a7a7a7;
margin:auto;
width:100%;
display:block;
line-height:1.4;
font-size: 16px;
font-family:'Noto Sans JP',游ゴシック体, 'Yu Gothic', YuGothic,'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}

.wpcf7-not-valid-tip{
  font-family:'Noto Sans JP',游ゴシック体, 'Yu Gothic', YuGothic,'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
  font-size: 14px;
}

input[type="text"]:focus,
input[type="tel"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
border:solid 1px #d00249;
background-color: #f2f2f2;
}

input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="date"] {
    background-color: #fafafa;
    width: 100%;
}

input[type="date" i] {
  padding: .75em;
  margin-bottom: 1em;
}

input[type="text"], input[type="email"], input[type="tel"], input[type="search"], input[type="password"], select, textarea{
  width: 100%;
  color:#010101;
}

input[type="reset"],
input[type="button"],
input[type="submit"],
button {
   color: #FFFFFF;
    display:block;
   margin:1em auto 0 auto;
   padding:25px;
   -moz-appearance: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    cursor: pointer;
    background-color: #252525;
    border: 0px;
     -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    width:100%;
    box-sizing:broder-box;
    font-size:1.4rem;
    font-weight:400;
    letter-spacing:1px;
    max-width: 500px;
    font-family:'Noto Sans JP',游ゴシック体, 'Yu Gothic', YuGothic,'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}

input[type="reset"]:hover, input[type="button"]:hover, input[type="submit"]:hover {
    -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.0);
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.0);
    background:#ea1f0f;
}


select{
 font-size:1.0rem;
 }

 dl.form dt p, dl.form dd p{
  margin-bottom: 0;
 }

 span.text_red{
  background:#fe0000;
  text-align:center;
  color:#fff;
  margin-left:5px;
  display:inline-block;
  line-height:1.0;
  font-size:0.85rem;
  padding:3px;
  font-weight:normal;
  } 
  
hr{position: relative;background: #ddd;opacity: 1;margin: var(--col-space) auto;}

h2.bk{
  color:#000 !important;
  font-family:'Noto Sans JP',游ゴシック体, 'Yu Gothic', YuGothic,'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
  font-size: 1.4rem;
  font-weight: bold;
  margin-bottom: 1.5em;
  padding-bottom: 1em;
  border-bottom: 1px solid #000;
}

dl.privacy {
  font-family:'Noto Sans JP',游ゴシック体, 'Yu Gothic', YuGothic,'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;

}

dl.privacy dt{
  font-weight: bold;
  font-size: 1.1rem;
}

dl.privacy dd{
  margin-bottom: 2em;
}

/**********************商品詳細**********************/

.youtube {
  width: 100%;
  aspect-ratio: 16 / 9;
  max-width: 800px;
  margin: var(--row-space) auto 0;
}
.youtube iframe {
  width: 100%;
  height: 100%;
}

section.top__border{
  border-top: 1px solid #ddd;
}

.single figure img{
  max-width: 600px;
  max-height: 600px;
  object-fit: scale-down;
  display: block;
  margin: 0 auto 0;
  background: #fff;
}

.single .textarea{
  padding: 2.6vw;
  background: #464646;
  position: relative;
  color:#fff;
}

.single .textarea p{
  color:#fff;
  font-family:游ゴシック体, 'Yu Gothic', YuGothic,'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
  font-weight: 300;
}

.page_navi{
  background: rgba(255,255,255,0.355);
  margin-bottom: 1em;
}

.page_navi a{
  color:#000;
}

.products-page picture img{
	    max-width: 300px;
    max-height: 300px;
    object-fit: scale-down;
    display: block;
    margin: 0 auto 0;
    background: #fff;
}

@media screen and (max-width: 767px) {
  .single figure img{
    max-width: 300px;
    max-height: 300px;
    object-fit: scale-down;
    display: block;
    margin: 0 auto 0;
    background: #fff;
  }

}

/********************* 商品 **********************/

a.cart{
  display: block;
  max-width: 350px;
  padding: 1em;
  background: var(--key-Color);
  text-align: center;
  color:#fff;
  font-size: 20px;
  font-weight: 500;
  margin: 1em auto;
  text-decoration: none;
  border: 1px solid var(--key-Color);
}

a.cart:hover{
  background: #fff;
  color:var(--key-Color);
}

#itempage .field#itempage .field, #itempage .field{
  border: none !important;
 }

 #itempage .field .field_name{
  text-align: right !important;
 }

.single__wrap{
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  column-gap: 2%;
}

.single figure img{
  max-width: 600px;
  max-height: 600px;
  object-fit: scale-down;
  display: block;
  margin: 0 auto 0;
  background: #fff;
}

.itemsubimg{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  column-gap: 10px;
  text-align: center;
}

.itemsubimg a {
  display: block;
  max-width:calc(90% / 2);
  width: 100%;
  height: auto;
  object-fit: scale-down;
}

.itemsubimg a img{
	  object-fit: scale-down;
}

.exp{
  margin-top: 1em;
}

.single .textarea{
  padding: 2.6vw;
  background: #464646;
  position: relative;
  color:#fff;
}

.single .textarea p{
  color:#fff;
  font-family:游ゴシック体, 'Yu Gothic', YuGothic,'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
  font-weight: 300;
}

.page_navi{
  background: rgba(255,255,255,0.355);
  margin-bottom: 1em;
}

.page_navi a{
  color:#000;
}

.products-page picture img{
	    max-width: 300px;
    max-height: 300px;
    object-fit: scale-down;
    display: block;
    margin: 0 auto 0;
    background: #fff;
}

#memberpages div.loginbox{
  width: 100% !important;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}
#memberpages input.loginmail, #memberpages input.loginpass{
  margin: 0;
  width: 100% !important;
  font-size: 16px !important;

}

#newmember{
	padding-top:0;
	padding-bottom:0;
}

.member_name{
	padding-left:0 !important;
}

p.nav a, .forgetmenot{
  font-size: 16px !important;
}

.header_explanation ul{
	margin-top:0;
}

.error_message{
  text-align: center;
}

@media screen and (max-width: 767px) {
  .single figure img{
    max-width: 300px;
    max-height: 300px;
    object-fit: scale-down;
    display: block;
    margin: 0 auto 0;
    background: #fff;
  }
	
	#newmember{
		padding-left:0;
		padding-right:0;
	}

  .dlseller th, .dlseller td{
    display: block;
    width: 100%;
  }

  .dlseller td{
    border-left: 1px solid #ddd;
  }

  input[type="reset"], input[type="button"], input[type="submit"], button{
    font-size: 1.2rem;
  }

}

.wp-pagenavi{
  margin-top: var(--row-space);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  font-family: Arial, Helvetica, sans-serif;
}

.wp-pagenavi a, .wp-pagenavi span{
  background: #fff;
  border:1px solid var(--key-Color);
  color:#fff;
  width: 35px;
  height: 35px;
  text-align: center;
  font-size: 17px;
  line-height: 30px;
}

span.pages{
  width: 70px;
}

.wp-pagenavi span, .wp-pagenavi a{
  color:var(--key-Color);
}

.wp-pagenavi span.current{
  background: var(--key-Color);
  color:#fff;
}

/**************ピックアップ商品*******************/

.timeline {
  position: relative;
  margin: 0 auto;
  max-width: 1200px;
}
.timeline:before {
  position: absolute;
  top: 0px;
  left: 45px;
  width: 3px;
  height: 100%;
  content: '';
  background: #0f234a;
}
.timeline .timeline_item {
  margin: 0px 0px 0px 80px;
}
.timeline .timeline_item .time_date .time {
  font-family: serif;
  font-size: 4em;
  font-weight: bold;
  position: relative;
  margin: 0;
  letter-spacing: 3px;
  color: rgba(15, 35, 74,0.1);
}
.timeline .timeline_item .time_date .flag {
  font-size: 1.5em;
  font-weight: bold;
  margin: 0;
  margin-top: -60px;
  color: #0f234a;
}
.timeline .timeline_item .subtitle {
  font-size: 0.8em;
  line-height: 20px;
  margin-top: 10px;
  padding-left: 20px;
  border-left: 1px solid #0f234a;
}
.timeline .timeline_item .desc {
  font-size: 0.8em;
  line-height: 20px;
  margin-top: 10px;
  padding-left: 20px;
}
@media only screen and (max-width: 767px) {
  .timeline:before {
    left: 15px;
  }
  .timeline .timeline_item .time_date .time:before {
    left: -32px;
  }
  .timeline .timeline_item {
    margin: 0px 0px 0px 40px;
  }
  .timeline .timeline_item .subtitle, .timeline .timeline_item .desc {
    padding-left: 0px;
    border-left: none;
  }
}

.stepbar {
  margin: 0 auto;
  width: 80%;
}

.stepbar .stepbarwrap {
  margin: 2em 0;
  position: relative;
}

.stepbar .stepbarwrap .steptitle {
  display: inline-flex;
  align-items: center;
}

.stepbar .stepbarwrap .steptitle .stepcircle {
  display: inline-block;
  width: 3em;
  height: 3em;
  content: "";
  border-radius: 50%;
  background-color: var(--key-Color);
  color: #fff;
  text-align: center;
}

.stepbar .stepbarwrap .steptitle .stepcircle span {
  display: inline-block;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.0em;
  font-size: 20px;
  font-weight: bold;
  position: relative;
  top: 0.65em;
}

.stepbar .stepbarwrap .steptitle .title {
  margin: 0.5em;
  font-weight: bold;
  font-size: 1.2em;
}

.stepbar .stepbarwrap .steptxt {
  padding-left: 3.5em;
}

.stepbar .stepbarwrap .steptxt .txt {
  font-size: 0.9em;
}

.stepbar .stepbarwrap .stepline {
  width: 1px;
  height: calc(100% + 1em);
  background-color: #000;
  position: absolute;
  top: 1em;
  left: 1.5em;
  z-index: -1;
}

.stepbarwrap:last-of-type .stepline:last-of-type {
  display: none;
}

h3.price{
  display: none;
}

.exp h2.border{
  display: none;
}

@media screen and (max-width: 960px) {
  .stepbar {
    width: 90%;
  }
}

.products_single__wrap{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.products_single__wrap .Images{
  width: 40%;
}

.products_single__wrap .Text{
  width: 55%;
}

.itemimg{
  text-align: center;
}

@media only screen and (max-width: 767px) {

  .products_single__wrap .Images{
    width: 100%;
  }
  
  .products_single__wrap .Text{
    width: 100%;
  }
}