@charset "utf-8";
/* 共通 */
body{
  color: #000;
}
.wrapper{
  overflow: hidden;
}
#top img{
  display: block;
  height: auto;
}
.g-inner{
  width: 90%;
  margin-inline: auto;
}
/* 初期化 */
.g-reset *{
  display: block;
  margin: 0;
  padding: 0;
  float: none;
}

.g-resetImportant *{
  float: none !important;
  margin: 0 !important;
  padding:  0 !important;
}

.g-resetImportantBlock *{
  display: block !important;
  float: none !important;
  margin: 0 !important;
  padding:  0 !important;
  width: 100% !important;
}

@media screen and (min-width: 901px) and (max-width: 1099px){
	.hoc{
		width: 90%;
		margin-inline: auto;
	}
}
@media screen and (min-width: 768px){
  .hoc{
    padding: 0 !important;
  }
  .container{
    padding: 0 !important;
  }
}
@media screen and (max-width: 767px){
  .btmspace-30{
    margin-top: 0 !important;
  }
}

@media screen and (min-width: 768px){
  .g-mgt{
    margin-top: 100px;
  }
  .g-mgb{
    margin-bottom: 100px;
  }
  .g-mgt--half{
    margin-top: 60px;
  }
  .g-mgb--half{
    margin-bottom: 60px;
  }
  .g-inner{
    max-width: 1100px;
  }
}
@media screen and (max-width: 767px){
  .g-mgt{
    margin-top: 60px;
  }
  .g-mgb{
    margin-bottom: 60px;
  }
  .g-mgt-half{
    margin-top: 30px;
  }
  .g-mgb--half{
    margin-bottom: 30px;
  }
}

/* ボタン */
.g-btn{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-inline: auto;
  background-color: #000;
  cursor: pointer;
  transition: 0.3s;
  border: 2px solid transparent;
}
.g-btn__lebel{
  display: inline-block;
  transition: 0.3s;
  color: white;
}
@media screen and (min-width: 768px){
  .g-btnContaier{
    margin-top: 60px;
  }
  .g-btn{
    height: 60px;
    max-width: 300px;
  }
  .g-btn__lebel{
    font-size: 14px;
  }
}
@media (hover: hover){
  .g-btn:hover{
    background-color: white;
    border: 2px solid #000;
  }
  .g-btn:hover .g-btn__lebel{
    color: #000;
  }
}
@media screen and (max-width: 767px){
  .g-btnContaier{
    margin-top: 40px;
  }
  .g-btn{
    height: 50px;
    max-width: 250px;
  }
  .g-btn__lebel{
    font-size: 13px;
  }
}
/* スライダー */
@media screen and (min-width: 768px){
  .slider li a{
    display: block;
    width: 80% !important;
    margin: auto !important;
    overflow: hidden;
  }
  .slider li img{
    width: 100% !important;
    transition: 0.3s;
  }
}
@media (hover: hover){
  .slider li a:hover img{
    transform: scale(1.05);
  }
}

/* ニュース */
@media screen and (min-width: 768px){
  .t-foot_news #foot_news{
    width: fit-content;
    margin-inline: auto;
    float: none;
  }
}
@media screen and (max-width: 767px){
  .t-foot_news #foot_news .heading{
    padding: 10px 0;
  }
   .t-foot_news #foot_news .heading img{
    display: block;
   }
}

/* new season */
.global-nav a{
  overflow: hidden;
}
.global-nav a img{
  transition: 0.3s;
}
@media (hover: hover){
  .global-nav a:hover img{
    transform: scale(1.1);
  }
}

/* Brand */
.brandHtmx{
  width: 90%;
  margin-inline: auto;
}
.brandHtmx .btmspace-100{
  width: 100%;
}
.brandHtmx table{
  width: 100%;
  border-collapse: collapse;
}
.brandHtmx img{
  width: 100% !important;
  height: auto !important;
}
.brandHtmx tr td:last-child{
  display: none;
}
.brandHtmx tr td:first-child{
 width: 100% !important;
}
/* 並び順 */
.brandHtmx > div:nth-of-type(4){
  order: 1;
}
.brandHtmx > div:nth-of-type(1){
  order: 2;
}
.brandHtmx > div:nth-of-type(2){
  order: 3;
}
.brandHtmx > div:nth-of-type(3){
  order: 4;
}
.brandHtmx > div:nth-of-type(6){
  order: 5;
}
.brandHtmx > div:nth-of-type(5){
  order: 6;
}
@media screen and (min-width: 768px){
  .brandHtmx{
    max-width: 800px;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 35px;
  }
}
@media screen and (max-width: 767px){
    .brandHtmx{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 20px;
  }
}

/* shoplist */
.htmxShop{
  width: 90%;
  margin-inline: auto !important;
}
.htmxShop .wrapper2{
  display: grid !important;
}
.htmxShop .wrapper2 > div:nth-of-type(2){
  order: -1;
  width: 100%;
}
/* 画像 */
.htmxShop .wrapper2 .global-nav2 > li{
  width: 100%;
  border: none;
}
@media screen and (min-width: 768px){
  .htmxShop .nospace.group.btmspace-50.elements{
    margin-bottom: 30px !important;
  }
  .htmxShop .wrapper2{
    gap: 50px;
  }
  /* 画像 */
  .htmxShop .wrapper2 .global-nav2{
    display: grid !important;
    grid-template-columns: repeat(4,1fr);
    gap: 20px;
  }
}
@media screen and (max-width: 767px){
  .htmxShop .nospace.group.btmspace-50.elements{
    margin-bottom: 15px !important;
  }
  .htmxShop .wrapper2{
    gap: 30px;
  }
  .htmxShop .wrapper2 .global-nav2{
    display: grid !important;
    grid-template-columns: repeat(2,1fr);
    gap: 15px;
  }
  .htmxShop .wrapper2 .global-nav2 img{
    display: block;
  }
}

/* ショップ詳細 */
.htmxShop .shoplistDetail table{
  display: table !important;
  width: 100%;
}
.htmxShop .shoplistDetail table td{
  width: 100% !important;
}
.htmxShop .shoplistDetail table td .markerline{
  display: inline-block !important;
  padding: 3px 10px !important;
  margin-bottom: 10px !important;
}
@media screen and (min-width: 768px){
  .htmxShop .shoplistDetail table td{
    display: grid !important;
    grid-template-columns: repeat(3,1fr);
    gap: 50px;
  }
  .shoplistDetail a{
    display: block;
  }
  .shoplistDetail a img{
    width: 90%;
    height: auto;
    transition: 0.3s;
  }
}
@media (hover: hover){
  .shoplistDetail a:hover img{
    transform: translateX(10px);
  }
}
@media screen and (max-width: 767px){
  .htmxShop .shoplistDetail{
    font-size: 14px;
    font-weight: 400;
  }
  .htmxShop .shoplistDetail .hyogoWrap div:first-child{
    width: 30%;
  }
  .htmxShop .shoplistDetail table td > :not(:last-child){
    margin-bottom: 30px !important;
  }
}

/* 会社概要sp */
.t-company hr.btmspace-130{
  margin-bottom: 0 !important;
}
@scope (.t-company){
@media screen and (max-width: 767px){
:scope {
  overflow: hidden;
  width: 90%;
  margin-inline: auto;
}
:scope img{
  width: fit-content;
  margin-inline: auto;
}
/* Tables + Comments */
table,
th,
td,
#comments .avatar,
#comments input,
#comments textarea {
	border: none;
	border-color: #fff;
}

#comments input:focus,
#comments textarea:focus,
#comments *:required:focus {
	border-color: #000000;
}

th {
	color: #FFFFFF;
	background-color: #373737;
}

tr,
#comments li,
#comments input[type="submit"],
#comments input[type="reset"] {
	color: inherit;
	/* background-color: #fff; */
}

tr:nth-child(even),
#comments li:nth-child(even) {
	color: inherit;
	background-color: #fff;
}

table a,
#comments a {
	background-color: inherit;
}

.table_01{
width: 75%;
border-collapse: collapse;
    border:none;
}
.table_01 th{
padding: 0px;
text-align: left;
vertical-align: top;
color: #333;
background-color: #fff;
border:none;
}
.table_01 td{
padding: 0px;
background-color: #fff;
    border:none;
}

.table_02{
width: 704px;
border-collapse: collapse;
    border:none;
}
.table_02 th{
padding: 0px;
text-align: center;
vertical-align: top;
color: #333;
background-color: #fff;
border:none;
}
.table_02 td{
padding: 0px;
background-color: #fff;
    border:none;
}

.table_03{
width: 840px;
border-collapse: collapse;
    border:none;
}
.table_03 th{
width: 210px;
padding: 0px;
text-align: left;
vertical-align: top;
color: #333;
background-color: #fff;
border:none;
}
.table_03 td{
padding: 0px;
background-color: #fff;
    border:none;
}

.table_04{
width: 70%;
border-collapse: collapse;
    border:none;
}
.table_04 th{
padding: 0px;
text-align: left;
vertical-align: top;
color: #333;
background-color: #fff;
border:none;
}
.table_04 td{
padding: 0px;
background-color: #fff;
    border:none;
}

*.markerline {
      background-color: #000000;
	  color: #fff;
      margin-left: 0em;
      margin-right: 0em;
	  padding:5px 15px 5px 15px;
      }
	  
table{
	width:100%;
	border-collapse:collapse;
	border-spacing:0;
	padding:0;
	margin:0;
}

table tr{
	padding:5px;
}

table th, table td{
	padding:10px;
}

table th{
	font-size:14px;
	letter-spacing:1px;
}

	table{
		border:0;
	}

	table thead{
		display:none;
	}

	table tr{
		margin-bottom:0px;
		display:block;
	}

	table td{
		display:block;
		text-align:left;
	}

	table td:last-child{
		border-bottom:0;
	}

	table td:before {
		content:attr(data-label);
		float:left;
		font-weight: bold;
	}


.global-nav,.footnav {
  margin: 0 0 15px;
  padding: 0;
  border-top: 0px solid #fff;
  font-size: 13px;
  list-style-type: none;
}
/*clearfix*/
.global-nav:after,.footnav:after {
  content: "";
  clear: both;
  display: block;
}
.global-nav li,.footnav li {
  float: left;
  width: 30%;
  text-align: center;
  border-bottom: 10px solid #fff;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
/*奇数のli要素に適応*/
.global-nav li:nth-child(odd),.footnav li:nth-child(odd) {
  border-right: 0px solid #fff;
}
.global-nav a,.footnav a {
  display: block;
  line-height: 44px;
  color: #000;
  text-decoration: none;
}
.global-nav a:hover,.footnav a:hover {
  color: #000;
  background: #fff;
}

}
}

/* SNS */
@media screen and (min-width: 768px){
  #footnav .footnav{
    display: grid !important;
    grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
    gap: 20px;
  }
}
@media screen and (max-width: 767px){
  .wrapper #footnav{
    width: 90% !important;
    margin-inline: auto !important;
    margin-bottom: 50px !important;
  }
    #footnav .footnav{
    display: grid !important;
    grid-template-columns: repeat(auto-fit,minmax(150px,1fr));
    gap: 15px;
  }
}

/* popupバナー調整 */
@media screen and (min-width: 768px){
  .t-popup.g-mgb.g-inner{
  max-width: 900px;
}
}

/* トップヘッダー調整 */
@media screen and (min-width: 768px){
  #topbar{
    padding: 15px 0 !important;
  }
  #header{
    padding: 20px !important;
  }
  #mainav{
    padding-bottom: 60px !important;
  }
}

/* season */
@media screen and (min-width: 768px){
  .global-nav--season{
    display: flex;
    flex-wrap: wrap;
  }
  .global-nav--season li{
    float: none;
    width: calc(100% / 4);
  }
}