@charset "UTF-8";

/*共通*/

/*a:visited{
  color: inherit;
}*/

html {
  font-size: 100%;
}

body {
/*  font-family: "メイリオ", "Meiryo", sans-serif; */
  font-family: "ヒラギノ角ゴ W3", "Hiragino Kaku Gothic Pro","メイリオ", "Meiryo", sans-serif;
  line-height: 1.7;
  /*color: #313233;*/
  color: #333333;
  background-color: #ffffff;
  position: relative;
}

a {
  color:inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  object-fit: cover;
  object-position: 0 0;
}

nav ul li {
  list-style: none;
}

/*PCヘッダー*/

.header-wrapper {
  z-index: 10;
  position: sticky;
  top:0;
}

.header-border {
    /*border-width: 3px;
    border-color: #C00000;*/
    width: 100%;
    height: 1px;
    background-color: #C00000;
    filter: drop-shadow(0px 3px 3px #C00000);
}
.l-header{
	width:100%;
	height:88px;
	display: flex;
	justify-content: space-between;
	align-items: center;
  background: #ffffff;
  /*border-bottom: 3px solid #C00000;*/
}

/*.l-header::after{
  filter: drop-shadow(30px 10px 4px #C00000);
}
*/

.l-header__inner:before {
	content: "";
	width: 100%;
	height: 85px;
	/*background: linear-gradient(43.37deg, #4d4d4d 6.71%, #bcbbbb 101.43%);*/
	position: absolute;
	top: 0;
	left: 0;
	z-index: -100;
}

.header-logo {
  padding-top: 1rem;
  padding-left: 1rem;
  min-width: 150px;
}


.sp-menubtn{
	display: none;
}
.menu__inner{
	display: flex;
	justify-content: flex-end;
	align-items: center;
	height:85px;
	position:relative;
  z-index: 10;
}
.menu__item{
	margin:0 1rem;
	height:100%;
  padding-top: 2.0%;
}
.menu-item-contact {
  margin-top: 0;
  margin-left: 0.7rem;
  margin-right: 1.4rem;
  margin-bottom: 0;
	height:100%;
  padding-top: 2.0%;
}

.menu__contact {
	background: #4d4d4d;
	width: 8.0vw;
  height: 85%;
	text-align: center;
  border: 1px solid #C00000;
  color: #ffffff;
  padding-top: 1.25%;
  margin-right: 0.5rem;
  font-size: 14px;
  transition: all .3s;
}
.menu__contact:hover {
  box-shadow: 0 1px 6px rgba(192, 0, 0, 0.4), 0 0 50px rgba(192, 0, 0, 0.1) ;
  border-color: transparent;
}


.menu__link{
	display:block;
	height:100%;
  text-align: center;
  font-size: 13px;
  transition: all .3s;
}

.menu__link:hover{
  color: #C00000;
}


.nav-eng {
  color: #C00000;
  font-size: 16px;
  font-weight: bold;
}

/*メガメニュー*/
.menu__contents{
	display: none;
	position:absolute;
	top:100%;
	left:0;
	width: calc(100% - 150px);
  background: #4d4d4d;
	padding:20px;
  color: #ffffff;
}
.menu__contents ul {
	display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}
.menu__contents ul li a{
	display:block;
	text-align: center;
  font-size: 14px;
  transition: 0.3s;
}

.menu__contents ul li a:hover{
  color: #C00000;
}

.menu__contents p {
  margin-bottom: 1rem;
  border-bottom: 1px solid #ffffff;
}



/*SPヘッダー*/

@media screen and (max-width: 830px) {
  .br-nav {
    display: none;
  }
  .fa-cart-plus {
    margin-left: 2rem;
  }
  .fa-envelope {
    margin-left: 2rem;
  }
	.header-logo img{
		height:35px;
	}
	.l-header{
		height:60px;
	}
	.l-header__inner:before {
		height: 60px;
	}
	.l-header__inner{
		width:100%;
		height:57px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.sp-menubtn {
		width: 60px;
		height: 100%;
		position: relative;
		display: block;
		z-index: 5000;
		border: none;
		cursor: pointer;
	}
	.sp-menubtn span {
		display: block;
		overflow: hidden;
		white-space: nowrap;
		text-indent: 100%;
		width: 22px;
		height: 3px;
		background: #C00000;
		position: absolute;
		transition: 0.2s;
		left: 50%;
		top: 50%;
	}
	.sp-menubtn span:nth-child(1) {
		transform: translate(-50%, -9px);
	}
	.sp-menubtn span:nth-child(2) {
		transform: translate(-50%, -50%);
	}
	.sp-menubtn span:nth-child(3) {
		transform: translate(-50%, 6px);
	}
	.sp-menubtn.active span {
		width: 25px;
		height: 2px;
	}
	.sp-menubtn.active span:nth-child(1) {
		transform: translate(-50%, 50%) rotate(45deg);
	}
	.sp-menubtn.active span:nth-child(2) {
		opacity: 0;
		left: 50%;
	}
	.sp-menubtn.active span:nth-child(3) {
		transform: translate(-50%, 50%) rotate(-45deg);
	}
	.menu {
		position: fixed;
		top: 60px;
		left: 0;
		width: 100%;
		height: calc(100% - 60px);
    background: rgba(77, 77, 77, 0.9);
		color: #FFFFFF;
		overflow: auto;
		opacity: 0;
		visibility: hidden;
		transition: opacity .6s ease, visibility .6s ease;
    z-index: 100;
	}
	.menu.active{
		opacity:100;
		visibility: visible;
	}
	.menu__inner {
		display:block;
		height:auto;
		width: 72.16vw;
		margin-left: auto;
		margin-right: auto;
		padding: 20px 0 60px;
	}
	.menu__item {
		border-bottom:#bcbbbb solid 2px;
		width: 100%;
		position: relative;
    margin: initial;
    padding-top: 4.0%;
	}
	.menu__link {
		font-weight: bold;
		font-size: 13px ;
		letter-spacing: 0.04em;
		height: 40px;
		align-items: center;
    text-align: initial;
	}

  .menu__link br {
    display: none;
  }

  .nav-eng {
    font-size: 14px ;
    margin-right: 1rem;
  }

	.menu__contact {
		width: 72.16vw;
		margin-top: 36px;
	}
	.menu__contact a {
		/*background: linear-gradient(58.5deg, #4d4d4d 46.25%, #bcbbbb 109.07%);*/
		color: #FFFFFF;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		height: 48px;
		/*padding: 0 35px 0 30px;*/
    padding-left: 1.5rem;
		position: relative;
		letter-spacing: 0.04em;
		max-width: 72.16vw;
		margin-left: auto;
		margin-right: auto;
		box-shadow: 0px 0px 22px rgba(0, 0, 0, 0.1);
	}
	.menu__contact a span {
		position: relative;
	}
		/*メガメニュー　→アコーディオン*/
	.menu__contents{
		position:static;
		width:100%;
		background: #cccccc;
		padding:20px;
	}
	.menu__contents ul {
		/*display: block;*/
    display: grid;
    grid-template-columns: 1fr 1fr;
	}
	.menu__contents ul li{
		border-bottom:#000;
		width: 100%;
		height:auto;
	}
	.menu__contents ul li a{
		color:#000;
		display:block;
		text-align: center;
		line-height:2.0;
    font-size: 11px;
	}
  .menu__contents p {
    font-size: 14px;
    color: #000000;
  }
	.menu__item::after{
		content: "";
		position: absolute;
		right: 10px;
		top: 16px;
		transform:translateY(-50%);
		transition: all 0.2s ease-in-out;
		display: block;
		width: 10px;
		height: 10px;
		border-top: solid 2px #E5E5E5;
		border-right: solid 2px #E5E5E5;
		-webkit-transform: rotate(135deg);
		transform: rotate(135deg);
	}
	.menu__item.active::after{
		content: "";
		position: absolute;
		right: 10px;
		top:22px;
		transform:translateY(-50%);
		transition: all 0.2s ease-in-out;
		display: block;
		width: 10px;
		height:10px;
		border-top: solid 2px #E5E5E5;
		border-right: solid 2px #E5E5E5;
		-webkit-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}
  .menu-item-contact {
    margin-left: initial;
    margin-right: initial;
    padding-top: 4.0%;
  }
}




/*ヘッダーリンク*/


.onlineshop-btn {
    /*background-color: #ffffff;
    color: #000000;*/
    border: 3px solid #E6373A;
    /*margin-top: 0.5rem;*/
    margin-right: 1rem;
    padding: 10px 10px;
    font-size: 12px;
    margin-bottom: -20px;
}

.onlineshop-btn:hover{
  background-color: #C00000;
}


.link-list {
  /*display: grid;
  grid-template-columns: repeat(auto-fit,minmax(240px,1fr));
  gap:2rem;*/
  display: flex;
  list-style: none;
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 14px;
}


.btn-wrapper {
  border: 1px solid #E6373A;
  /*padding: 1rem; */
  margin-left: 1rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0rem;
  padding-bottom: 0rem;
}
.btn-online,.btn-ys {
  font-size: 12px;
}

.cart-plus-top,.link-alt-top {
 font-size: 1.5rem;
}

/*パンくずリスト*/

.pankuzu-wrapper {
  background-color: #7d7d7d;
}
.pankuzu {
  font-size: 12px;
  max-width: 1060px;
  margin: 0 auto;
  padding: 0 8px;
  display: flex;
  color: #ffffff;
}

@media screen and (max-width: 600px) {/* 600px以下*/
  .pankuzu {
    font-size:10px;
  }
}


.pankuzu-link a {
  color: #ffffff;
}
.pankuzu-link a:hover {
  text-decoration: underline;
}
.pankuzu-link a:visited {
  color: inherit; /* リンク済みの色を変えない */
}

.separator {
   margin: 0 10px; /* 文字と「＞」の隙間を開ける */
}

/*index-main*/

.main-bg {
  background-image: url(images/index/main-menkyo-syoyu.jpg);
  background-size: cover;
  /*background-position: center top;*/
  background-position: center;
  /*background-repeat: no-repeat;*/
  position: relative;
  width: 100%;
}

.main-bg::before {
  content: '';
  display: block;
  padding-top: 43.5%;
}

@media screen and (max-width: 600px) {/* 600px以下*/
  .main-bg::before {
    background-image: url(images/index/main-menkyo-syoyu-sp.jpg);
    background-size: cover;
    background-position: center;
    position: relative;
    width: 100%;
    padding-top: 100%;
  }
}


.main-bg .page-title {
  text-transform: none;
}

/*index-body*/

.index-body {
  margin-top: -0.6rem;
}

.home-content-wrapper {
  width: 100%;
  margin-top: 0;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 2rem;
}
.home-content-title-goods {
  background-color: #E6373A;
  color: #ffffff;
  text-align: center;
  margin-bottom: 2rem;
  position: relative;
}

.home-content-title-enjoy {
   position: relative;
   margin-bottom: 2rem;
   /*padding: 1.5rem 1.5rem calc(1.5rem + 10px);
   border: 2px solid #000;*/
}

.home-content-title-corporate {
   position: relative;
   margin-bottom: 2rem;
   /*padding: 1.5rem 1.5rem calc(1.5rem + 10px);
   border: 2px solid #000;*/
}

.home-content-title-news {
   position: relative;
   margin-bottom: 2rem;
   /*padding: 1.5rem 1.5rem calc(1.5rem + 10px);
   border: 2px solid #000;*/
}


.home-content-title-goods:after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1rem;
  content: '';
  border-top: 2px solid #ffffff;
  background-image: -webkit-repeating-linear-gradient(135deg, #ffffff, #ffffff 1px, transparent 2px, transparent 8px);
  background-image: repeating-linear-gradient(-45deg, #ffffff, #ffffff 1px, transparent 2px, transparent 8px);
  /*background-size: 7px 7px; */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.home-content-title-enjoy:after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1rem;
  content: '';
  border-top: 2px solid #ffffff;
  background-image: -webkit-repeating-linear-gradient(135deg, #ffffff, #ffffff 1px, transparent 2px, transparent 8px);
  background-image: repeating-linear-gradient(-45deg, #ffffff, #ffffff 1px, transparent 2px, transparent 8px);
  /*background-size: 7px 7px; */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.home-content-title-corporate:after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1rem;
  content: '';
  border-top: 2px solid #ffffff;
  background-image: -webkit-repeating-linear-gradient(135deg, #ffffff, #ffffff 1px, transparent 2px, transparent 8px);
  background-image: repeating-linear-gradient(-45deg, #ffffff, #ffffff 1px, transparent 2px, transparent 8px);
  /*background-size: 7px 7px; */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.home-content-title-news:after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1rem;
  content: '';
  border-top: 2px solid #ffffff;
  background-image: -webkit-repeating-linear-gradient(135deg, #ffffff, #ffffff 1px, transparent 2px, transparent 8px);
  background-image: repeating-linear-gradient(-45deg, #ffffff, #ffffff 1px, transparent 2px, transparent 8px);
  /*background-size: 7px 7px; */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}





.home-content-title {
  font-size: 32px;
  font-size: calc(1.5rem + ((1vw - 6px) * 1.7391));/* 24px~32pxで可変*/
  padding-top: 1rem;
  padding-bottom: 2rem;
  /*position: relative;
  padding: 0 65px;
  text-align: center;
  max-width: 100%;
  margin: 0 auto;*/
}

/*.home-content-title:before {
  position: absolute;
  top: calc(50% - 1px);
  left: 0;
  width: 100%;
  height: 2px;
  content: '';
  background: #fff;
}

.home-content-title span {
  position: relative;
  padding: 0 1em;
  background: #E6373A;
}

*/

.home-content-title {
  position: relative;
  display: inline-block;
  padding-left: 65px;
  padding-right: 65px;
  text-align: center;
}

.home-content-title:before,
.home-content-title:after {
  position: absolute;
  top: calc(50% - 10px);
  width: 50px;
  height: 6px;
  content: '';
  border-top: solid 2px #ffffff;
  /*border-bottom: solid 2px #000;*/
}

.home-content-title:before {
  left: 0;
}

.home-content-title:after {
  right: 0;
}



.maru {
  font-size: 2rem;
  font-size: calc(1.5rem + ((1vw - 6px) * 1.7391));/* 24px~32pxで可変*/
}


@media (min-width: 1060px) {/* 1060px以上*/
    .home-content-title,.maru {
        font-size: 2.0rem;/* 32px*/
    }
}
@media screen and (max-width: 600px) {/* 600px以下*/
    .home-content-title,.maru {
        font-size: 1.5rem;/* 24px*/
    }
}













.home-content {
  max-width: 1060px;
  /*margin-top: 30px;*/
  margin-right: auto;
  /*margin-bottom: 30px;*/
  margin-left: auto;
  padding: 0 8px;
}
.home-content-subtitle {
  display: flex;
  margin-top: 30px;
  margin-bottom: 10px;
}

.brand {
  width: 440px;
  display: flex;
  color: #E6373A;
  border-bottom: 10px solid #E6373A;
}
.brand-logo {
  width: 180px;
  height: 55px;
}
.brand-title {
  text-align: center;
  padding-top: 5%;
  margin-left: 70px;
}

.buy-content-wrapper {
  display: flex;
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
  gap:1rem;
  margin: 0 0 0 auto;
}


.kanmono-series {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
  gap:1rem;
}



.retailer {
  padding-top: 2.5%;
  font-size: 16px; /* IE8以下とAndroid4.3以下用フォールバック */
  font-size: calc(0.875rem + ((1vw - 6px) * 0.4348));/* 14px~16pxで可変*/
}
.retailer2 {
  text-align: center;
  font-size: 16px; /* IE8以下とAndroid4.3以下用フォールバック */
  font-size: calc(0.875rem + ((1vw - 6px) * 0.4348));/* 14px~16pxで可変*/
}

@media (min-width: 1060px) {/* 1060px以上*/
    .retailer,.retailer2 {
        font-size: 1.0rem;/* 16px*/
    }
}
@media screen and (max-width: 600px) {/* 600px以下*/
    .retailer,.retailer2 {
        font-size: 0.875rem;/* 14px*/
    }
}



/*.buy-content {
  width: 40%;
  height: 59px;
  display: flex;
  border: 2px solid #C00000;
  padding: 2px;
  margin-left: 30px;
  margin-right: 30px;
}
.buy-content-2 {
  width: 40%;
  height: 59px;
  display: flex;
  border: 2px solid #C00000;
  padding: 2px;
}
.buy-content-sp {
  width: 45%;
  max-height: 60px;
  display: flex;
  border: 2px solid #C00000;
  padding: 2px;
  /*margin-left: 30px;*/
/*  margin-right: 10%;
}
.buy-content-2-sp {
  width: 45%;
  display: flex;
  border: 2px solid #C00000;
  padding: 2px;
}*/


.buy-content-menmono {
  width: 40%;
  height: 59px;
  display: flex;
  border: 2px solid #F9821A;
  padding: 2px;
  margin-left: 30px;
  margin-right: 30px;
}
.buy-content-2-menmono {
  width: 42%;
  height: 59px;
  display: flex;
  border: 2px solid #F9821A;
  padding: 2px;
}
.buy-content-sp-menmono {
  width: 45%;
  max-height: 60px;
  display: flex;
  border: 2px solid #F9821A;
  padding: 2px;
  /*margin-left: 30px;*/
  margin-right: 10%;
}
.buy-content-2-sp-menmono {
  width: 45%;
  display: flex;
  border: 2px solid #F9821A;
  padding: 2px;
}




.buy-img {
  /*width: 80px;
  height: 55px;
  width: 30%;*/
  margin-right: 2px;
  overflow: hidden;
}
.buy-img-sp {
  /*width: 80px;
  height: 55px;
  width: 30%;*/
  margin-right: 2px;
  overflow: hidden;
}
.buy-img-2 {
  /*width: 150px; */
  height: 55px;
  margin-right: 2px;
  padding-left: 2rem;
  padding-top: 3%;
}
.buy-img-2-sp {
  /*width: 150px;
  height: 55px;
  width: 30%;*/
  margin-right: 2px;
/*  padding-top: 5%; */
}
.buy-title {
  background-color: #C00000;
  color: #ffffff;
  font-size: 14px;
  font-size: calc(0.75rem + ((1vw - 6px) * 0.4348));/* 12px~14pxで可変*/
  width: 100%;
  text-align: center;
  padding-top: 6%;
}
.buy-title-sp {
  background-color: #C00000;
  color: #ffffff;
  font-size: 12px;
  width: 100%;
  text-align: center;
  padding-top: 5%;
}
.buy-title-2 {
  background-color: #C00000;
  color: #ffffff;
  font-size: 14px;
  font-size: calc(0.75rem + ((1vw - 6px) * 0.4348));/* 12px~14pxで可変*/
  width: 100%;
  text-align: center;
  padding-top: 1%;
}

.buy-title-2-sp {
  background-color: #C00000;
  color: #ffffff;
  font-size: 11px;
  width: 100%;
  text-align: center;
  padding-top: 3%;
}

.buy-title-menmono {
  background-color: #F9821A;
  color: #ffffff;
  font-size: 14px;
  font-size: calc(0.75rem + ((1vw - 6px) * 0.4348));/* 12px~14pxで可変*/
  width: 100%;
  text-align: center;
  padding-top: 5%;
}
.buy-title-sp-menmono {
  background-color: #F9821A;
  color: #ffffff;
  font-size: 12px;
  width: 100%;
  text-align: center;
  padding-top: 2%;
}
.buy-title-2-menmono {
  background-color: #F9821A;
  color: #ffffff;
  font-size: 14px;
  font-size: calc(0.75rem + ((1vw - 6px) * 0.4348));/* 12px~14pxで可変*/
  width: 100%;
  text-align: center;
  padding-top: 5%;
}

.buy-title-2-sp-menmono {
  background-color: #F9821A;
  color: #ffffff;
  font-size: 11px;
  width: 100%;
  text-align: center;
  padding-top: 3%;
}


@media screen and (min-width: 410px) {/* 410px以上*/
   .buy-title-br {
     display: none;
   }
}

@media screen and (max-width: 410px) {/* 410px以下*/
   .buy-title-sp {
     padding-top: 1%;
   }
}


@media (min-width: 1060px) {/* 1060px以上*/
    .buy-title,.buy-title-2,.buy-title-menmono,.buy-title-2-menmono {
        font-size: 0.875rem;/* 14px*/
    }
}
@media screen and (max-width: 600px) {/* 600px以下*/
    .buy-title,.buy-title-2,.buy-title-menmono,.buy-title-2-menmono {
        font-size: 0.75rem;/* 12px*/
    }
}

.series-content-wrapper {
  /*display: grid;
  grid-gap: 110px;
  grid-template-columns: repeat(3,minmax(240px,1fr));
  grid-template-columns: repeat(auto-fit,minmax(240px,1fr));*/
  display: grid;
/*  grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); */
  grid-template-columns: 1fr 1fr;
  grid-gap: 1.5rem;
  /*margin-left: auto;*/
  margin-top: 1rem;
  margin-bottom: 3.125rem;
}

.series-content {
  text-align: center;
  font-size: 16px;
  font-size: calc(0.75rem + ((1vw - 6px) * 0.8696));/*12～16px*/
  transition: all 0.3s;
}

.series-content-img {
  transition: all 0.3s;
}

.series-content-img:hover {
  opacity: 0.6; filter: brightness(100%);
}


@media (min-width: 1060px) {/* 1060px以上*/
    .series-content {
        font-size: 1.0rem;/* 16px*/
    }
}
@media screen and (max-width: 600px) {/* 600px以下*/
    .series-content {
        font-size: 0.75rem;/* 12px*/
    }
    .series-content-wrapper {
      grid-template-columns: 1fr 1fr;
    }
}



@media (min-width: 1060px) {/* 1060px以上*/
    .series-content {
        font-size: 1.0rem;/* 16px*/
    }
}
@media screen and (max-width: 600px) {/* 600px以下*/
    .series-content {
        font-size: 0.75rem;/* 12px*/
    }
    .series-content-img {
      padding: 0.5rem;
    }
}

@media screen and (max-width: 450px) {/* 450px以下*/
      padding: 0.25rem;
}


.onlineshop {
  align-items: center;
}
.onlineshop-banner {
  margin-bottom: 30px;
}


/*.product-link a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  padding: 0.5em 1em;
  width: 200px;
  color: #333;
  font-size: 14px;
  font-weight: bold;
  transition: 0.3s;
  margin: 2rem 0 2rem auto;
  border-radius: 10px;
  transition: all .3s;
}

.product-link a:hover {
    text-decoration: none;
    box-shadow: 0 1px 10px rgba(192, 0, 0, 0.4), 0 0 50px rgba(192, 0, 0, 0.1) ;
    border-color: transparent;
}

.product-link a::before {
  content: '';
    position: absolute;
    top: calc(50% - 2px);
    right: 1em;
    transform: translateY(calc(-50% - 2px)) rotate(30deg);
    width: 12px;
    height: 2px;
    background-color: #2285b1;
    transition: 0.3s;
}

.product-link a::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 1em;
    transform: translateY(-50%);
    width: 50px;
    height: 2px;
    background-color: #2285b1;
    transition: 0.3s;
}

.product-link a:hover::before,
.product-link a:hover::after {
  right: 0.5em;
}

@media screen and (max-width: 600px) {
    .product-link {
      font-size: 1.0rem;
    }
}*/

.hr-index {
  max-width: 80%;
  margin: 0 auto;
  margin-top: 0;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2.125rem;
}

.separate-index {
  margin-bottom: 2rem;
  width: 97%;
  margin-left: auto;
  margin-right: auto;
  background-color: #D1C8C8;
  opacity: 0.5;
}

@media screen and (min-width: 600px) {/* 600px以上*/
    .separate-index {
      width: 80%;
    }
}

.index-factory h3 {
  margin-bottom: 1rem;
}



/*知る・楽しむ*/

.home-content-title-enjoy {
  background-color: #F5C440;
  color: #ffffff;
  text-align: center;
}

.home-title-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(240px,1fr));
  grid-gap: 2rem;
  margin-bottom: 2rem;
}

@media screen and (max-width: 600px) {/* 600px以下*/
  .home-title-wrapper p {
    font-size: 14px;
  }
}






/*商品情報-TOP*/

.fixed_btn {
  position: fixed;
  bottom: 50px;
  right: 50px;
  width: 100px;
  height: 100px;
  line-height: 100px;
  background-color: #C00000;
  border-radius: 50%;
  color: #fff;
  text-align: center;
  transition: 0.3s all;
  z-index: 99;
}
.fixed_btn:hover {
  box-shadow: 0 1px 6px rgba(192, 0, 0, 0.4), 0 0 50px rgba(192, 0, 0, 0.1) ;
  border-color: transparent;
  transform: scale(1.1);
}

@media screen and (max-width: 600px) {/* 600px以下*/
  .fixed_btn {
    bottom: 10px;
    right: 10px;
    width: 70px;
    height: 70px;
    line-height: 70px;
    font-size: 12px;
  }
}

.product-hr {
  border:0;
  height: 7px;
  background-image:
    repeating-linear-gradient(45deg,#C00000 0,#C00000 1px,rgba(0 0 0/0)0,rgba(0 0 0/0)50%),
    repeating-linear-gradient(135deg,#C00000 0,#C00000 1px,rgba(0 0 0/0)0,rgba(0 0 0/0)50%);
  background-size: 7px 7px;
  background-position: bottom center;
  background-repeat: repeat-x;
  margin-bottom: 1rem;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}
.product-hr-bottom {
  border:0;
  height: 7px;
  background-image:
    repeating-linear-gradient(45deg,#C00000 0,#C00000 1px,rgba(0 0 0/0)0,rgba(0 0 0/0)50%),
    repeating-linear-gradient(135deg,#C00000 0,#C00000 1px,rgba(0 0 0/0)0,rgba(0 0 0/0)50%);
  background-size: 7px 7px;
  background-position: bottom center;
  background-repeat: repeat-x;
  margin-top: 1rem;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}
.product-hr2 {
  border:0;
  height: 7px;
  background-image:
    repeating-linear-gradient(45deg,#F9821A 0,#F9821A 1px,rgba(0 0 0/0)0,rgba(0 0 0/0)50%),
    repeating-linear-gradient(135deg,#F9821A 0,#F9821A 1px,rgba(0 0 0/0)0,rgba(0 0 0/0)50%);
  background-size: 7px 7px;
  background-position: bottom center;
  background-repeat: repeat-x;
  margin-bottom: 1rem;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}
.product-hr-bottom2 {
  border:0;
  height: 7px;
  background-image:
  repeating-linear-gradient(45deg,#F9821A 0,#F9821A 1px,rgba(0 0 0/0)0,rgba(0 0 0/0)50%),
  repeating-linear-gradient(135deg,#F9821A 0,#F9821A 1px,rgba(0 0 0/0)0,rgba(0 0 0/0)50%);
  background-size: 7px 7px;
  background-position: bottom center;
  background-repeat: repeat-x;
  margin-top: 1rem;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}

.product-border {
  margin: 0 auto;
  border-top: 3px solid #E6373A;
  border-bottom: 3px solid #E6373A;
  padding-top: 2rem;
  padding-bottom: 2rem;
  padding-left: 8px;
  padding-right: 8px;
}

.product-border2 {
  margin: 0 auto;
  border-top: 3px solid #d8331d;
  border-bottom: 3px solid #d8331d;
  padding-top: 2rem;
  padding-bottom: 2rem;
  padding-left: 8px;
  padding-right: 8px;
}


.product-series-title-wrapper {
  padding-left: 8px;
  padding-right: 8px;
  max-width: 1250px;
}


.product-series-title-wrapper-2 {
  /*color: #E6373A;
  border-top: 2px solid #F9821A;
  border-bottom: 2px solid #F9821A; */
  padding-top: 1rem;
  padding-bottom: 1rem;
  padding-left: 8px;
  padding-right: 8px;
}

.product-series-title-wrapper-index {
  /*color: #E6373A;
  border-top: 2px solid #E6373A;
  border-bottom: 2px solid #E6373A;*/
  padding-top: 1rem;
  padding-bottom: 1rem;
  padding-left: 8px;
  padding-right: 8px;
}

.product-series-title-wrapper-index2 {
  /*color: #E6373A;
  border-top: 2px solid #F9821A;
  border-bottom: 2px solid #F9821A;*/
  padding-top: 1rem;
  padding-bottom: 1rem;
  padding-left: 8px;
  padding-right: 8px;
}



.product-series-title {
  display: flex;
  /*  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); */
  /*gap:1rem;*/
  max-width: 1060px;
  margin: 0 auto;
}

@media screen and (max-width: 1282px) {
  .product-series-title {
    display: block;
  }
}

/*.yakult {
  width: 200px;
} */

.yakult {
  /*border: 1px solid #E6373A;*/
/*  display: inline-block;
  width: 400px;
  height: 60px;*/
  /*display: flex; */
/*  font-size: 1.25rem;
  color: #E6373A;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 2rem;
  padding-right: 2rem;
  margin-top: 3rem;
  margin-bottom: 3rem;
}*/
/*.yakult {
  margin-top: 2%;
  margin-left: 3rem;
  font-size: 1.1rem;*/
  /*max-width: 300px;*/
  display: flex;
}


.related-product-logo {
  background: #ffffff;
  margin-bottom: 2.5rem;
}

.logo-product {
  padding-top: 0.4rem;
  padding-right: 2rem;
}

@media screen and (max-width: 600px) {/* 600px以下*/
  .logo-product {
    padding-top: initial;
    padding-left: initial;
    padding-right: initial;
    margin-left: -0.55rem;
  }
}


.yakult-logo-index {
  /*border: 1px solid #E6373A;
  display: inline-block;*/
  display: flex;
  align-items: flex-end;
/* font-size: 1.25rem; */
  color: #E6373A;
  /*padding-top: 0.5rem;
  padding-bottom: 0.5rem; */
  padding-left: 0rem;
  padding-right: 0rem;
  margin-right: 2rem;
/*  margin-top: 0.5rem;
    margin-bottom: 2rem;*/
  border-bottom: 7px solid #E6373A;
/*  text-decoration: underline;
  text-decoration-color: #F67E7E;
  text-decoration-thickness: 0.95rem;
  text-underline-offset: -0.75rem; */
}


.menmono-logo-product {
  /*border: 1px solid #E6373A;
  display: inline-block;
  display: flex;
  font-size: 1.25rem;
  color: #F9821A;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem; */
  padding-left: 2rem;
  padding-right: 2rem;
  /*margin-top: 0.5rem;
  margin-bottom: 2rem;*/
}

.menmono-logo-index {
  /*border: 1px solid #E6373A;
  display: inline-block;*/
  display: flex;
  align-items: flex-end;
/* font-size: 1.25rem; */
  color: #F9821A;
  /*padding-top: 0.5rem;
  padding-bottom: 0.5rem; */
  padding-left: 0rem;
  padding-right: 0rem;
  margin-right: 2rem;
/*  margin-top: 0.5rem;
    margin-bottom: 2rem;*/
  border-bottom: 7px solid #F9821A;
}


@media (max-width: 1282px) {/* 1282px以下*/
  .yakult-logo-product,.menmono-logo-product,.yakult-logo-index,.menmono-logo-index {
    padding-left: initial;
    padding-right: initial;
  }
}


.yakult-logo-product a,.menmono-logo-product a,.yakult-logo-index a,.menmono-logo-index a {
/*  margin-top: 4.0%; */
  margin-left: 4rem;
  margin-right: 3rem;
  font-weight: bold;
  font-size: 32px; /* IE8以下とAndroid4.3以下用フォールバック */
  font-size: calc(1.25rem + ((1vw - 6px) * 2.6087));/* 20px~32pxで可変*/
}


@media (min-width: 1200px) {/* 1060px以上*/
  .yakult-logo-product a,.menmono-logo-product a,.yakult-logo-index a,.menmono-logo-index a {
    font-size: 2rem;/* 32px*/
  }
}


@media (max-width: 1352px) {/* 1352px以下*/
  .yakult-logo-product a,.menmono-logo-product a,.yakult-logo-index a,.menmono-logo-index a {
    margin-left: 3rem;
    margin-right: 2rem;
  }
}

@media (max-width: 1320px) {/* 1320px以下*/
  .yakult-logo-product a,.menmono-logo-product a,.yakult-logo-index a,.menmono-logo-index a {
    margin-left: 2.5rem;
    margin-right: 1.5rem;
  }
}

@media (max-width: 1303px) {/* 1303px以下*/
  .yakult-logo-product a,.menmono-logo-product a,.yakult-logo-index a,.menmono-logo-index a {
    margin-left: 2.0rem;
    margin-right: 1.0rem;
  }
}

@media (max-width: 1288px) {/* 1288px以下*/
  .yakult-logo-product a,.menmono-logo-product a,.yakult-logo-index a,.menmono-logo-index a {
    margin-left: 1.75rem;
    margin-right: 0.75rem;
  }
}





@media screen and (max-width: 600px) {/* 600px以下*/
  .yakult-logo-product a,.menmono-logo-product a,.yakult-logo-index a,.menmono-logo-index a {
      font-size: 1.25rem;/* 20px*/
  }
}

@media screen and (max-width: 399px) {/* 399px以下*/
  .yakult-logo-product a,.menmono-logo-product a,.yakult-logo-index a,.menmono-logo-index a {
    margin-top: 2.5%;
    margin-left: 2rem;
  }
}

@media screen and (max-width: 384px) {/* 367px以下*/
  .yakult-logo-product a,.menmono-logo-product a,.yakult-logo-index a,.menmono-logo-index a {
    margin-left: 1rem;
  }
}







.h2-yakult {
  font-size: 32px; /* IE8以下とAndroid4.3以下用フォールバック */
  font-size: calc(1.5rem + ((1vw - 6px) * 1.7391));/* 24px~32pxで可変*/
}
@media (min-width: 1060px) {/* 1060px以上*/
    .h2-yakult {
        font-size: 2.0rem;/* 32px*/
    }
}
@media screen and (max-width: 600px) {/* 600px以下*/
    .h2-yakult {
        font-size: 1.5rem;/* 24px*/
    }
}


.buy-content-wrapper-2 {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-top: 2rem;
  margin-bottom: 0;
}



.buy-content-wrapper-s {
  margin-top: 1rem;
}
.buy-content-s {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: 1fr 1fr;
}

@media screen and (max-width: 600px) {/* 600px以下*/
  .buy-content-s {
    display: block;
  }
}



.buy-content-wrapper-2 img,.buy-content-s img {
  transition: all 0.3s
}

.buy-content-wrapper-2 img:hover,.buy-content-s img:hover {
  box-shadow: 0 1px 10px rgba(192, 0, 0, 0.4), 0 0 50px rgba(192, 0, 0, 0.1) ;
  border-color: transparent;
}


/*.buy-content-wrapper-s2 {
  display: grid;
  grid-template-columns: ;
}*/




.p-caution {
  font-size: 12px;
  margin-top: -0.5rem;
  margin-bottom: 0.7rem;
}

.buy-content-wrapper-product {
  /*display: flex;
  margin-top: 2rem;*/
  margin-bottom: 0;
  margin-left: auto;
  margin-right: auto;
}

.buy-content-wrapper-sp {
  /*display: flex;*/
  margin-top: 2rem;
  margin-bottom: 0;
  margin-left: auto;
  margin-right: auto;
}

.buy-content-wrapper-sp img {
  transition: all 0.3s
}

.buy-content-wrapper-sp img:hover {
  box-shadow: 0 1px 10px rgba(192, 0, 0, 0.4), 0 0 50px rgba(192, 0, 0, 0.1) ;
  border-color: transparent;
}


/*.buy-content-sp {
  display: flex;
}*/

/*.buy-content-sp-s {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1rem;
}*/



.buy-content-wrapper-sp-product {
  /*display: flex;
  margin-top: 2rem;*/
  margin-bottom: 0;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 580px) {
    .buy-content-wrapper-sp-product {
      display: none;
    }
}
@media (max-width: 579px) {
    .buy-content-wrapper-product {
      display: none;
    }
}


@media (min-width: 641px) {/* 641px以上*/
    .buy-content-wrapper-sp {
      display: none;
    }
}
@media screen and (max-width: 640px) {/* 640px以下*/
    .buy-content-wrapper-2,.buy-content-wrapper-3,.buy-content-wrapper-s {
      display: none;
    }
}

.buy-content-wrapper-product2 {
  display: flex;
  flex-direction: column;
  gap: 1rem;
/*  margin-top: 1rem;
  margin-left: -2rem;*/
}

.buy-content-wrapper-sp2 a {
  margin-right: 1rem;
}

.buy-content-wrapper-product2 a,.buy-content-wrapper-sp2 a {
  font-size: 0;
  transition: all 0.3s;
}


.buy-content-wrapper-product2 a:hover,.buy-content-wrapper-sp2 a:hover {
  box-shadow: 0 1px 10px rgba(192, 0, 0, 0.4), 0 0 50px rgba(128, 128, 128, 0.1) ;
  border-color: transparent;
}


.buy-content-top {
  max-width: 220px;
  display: flex;
  border: 2px solid #C00000;
  padding: 2px;
  /*margin-left: 30px;*/
  margin-right: 30px;
}
.buy-content-2-top {
  max-width: 260px;
  display: flex;
  border: 2px solid #C00000;
  padding: 2px;
}

.series-logo-img {
  margin-top: 3rem;
  margin-bottom: 3rem;
}



.product-series-wrapper {
 margin-top: 2rem;
 margin-bottom: 5rem;
}






.more {
  background-color: #8E1111;
  color: #ffffff;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  padding-right: 0.5rem;
  width: 170px;
  margin: 0 0 0 auto;
  text-align: center;
}


.separate {
  border: 1px solid #D1C8C8;
}








/*商品情報-brand*/

/*
右から左へ
----------------------------*/
@keyframes infinity-scroll-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

/*
IE11対策
----------------------------*/
_:-ms-lang(x)::-ms-backdrop,
.d-demo {
  display: -ms-grid;
  overflow: hidden;
}
/*----------------------------*/

.d-demo__wrap {
  /*display: grid;
  grid-template-columns: repeat(2,minmax(200px,5fr));*/
  display: flex;
  overflow: hidden;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.d-demo__list {
  display: flex;
  list-style: none;
}

.d-demo__list--left{
animation :infinity-scroll-left 95s infinite linear 0.5s both;
}

.d-demo__item {
  width: calc(100vw / 6);
  min-width: 180px;
}
.d-demo__item > img{
   width: 100%;
}




*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}

html {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  /*font-size: 62.5%;*/
}

.btn,
a.btn,
button.btn {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 1rem 4rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #212529;
  border-radius: 0.5rem;
}

a.btn-malformation {
  font-size: 1rem;
  font-size: calc(0.75rem + ((1vw - 6px) * 0.2174));
  padding: 1.5rem 2.5rem;

  color: #fff;
  border-radius: 100% 80px / 80px 100%;
  background-color: #C91C20;
}

a.btn-malformation:hover {
  color: #fff;
  border-radius: 60% 80% / 100% 80%;
}



@media (min-width: 1060px) {/* 1060px以上*/
    a.btn-malformation  {
        font-size: 1rem;/* 16px*/
    }
}
@media screen and (max-width: 600px) {/* 600px以下*/
  a.btn-malformation  {
      font-size: 0.8125rem;/* 13px*/
      padding: 1.0rem 2.0rem;
  }
}

.button12 {
  display: flex;
  margin-top: 2rem;
}
.button12 a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  margin: 0 auto;
  padding: 1em 2em;
  width: 300px;
  color: #333;
  font-size: 14px;
  font-weight: 700;
  background-color: #cccccc;
  transition: 0.3s;
  margin-right: 1rem;
}

.button12 a::before {
  content: '';
  position: absolute;
  bottom: -7px;
  right: -7px;
  width: 100%;
  height: 2px;
  background-color: #bbbbbb;
  transition: 0.2s ease 0s;
}

.button12 a::after {
  content: '';
  position: absolute;
  top: 7px;
  right: -7px;
  width: 2px;
  height: 100%;
  background-color: #bbbbbb;
  transition: 0.2s ease 0.2s;
}

.button12 a:hover::before {
  width: 0%;
}

.button12 a:hover::after {
  height: 0%;
}

.button12 a:hover {
  text-decoration: none;
  background-color: #FBCDCE;
}










.product-h1 {
  font-size: 48px; /* IE8以下とAndroid4.3以下用フォールバック */
  font-size: calc(3rem + ((1vw - 6px) * -3.4783));/* 48px~32pxで可変*/
  position: relative;
  padding: 1.5rem;
  text-align: center;
  margin-bottom: 3rem;
  line-height: 1.25;
}

.product-h1 span {
  font-size: 28px;
  font-size: calc(1.125rem + ((1vw - 6px) * 2.1739));/* 28px~18pxで可変*/
  display: block;
}

@media (min-width: 1060px) {/* 1060px以上*/
    .product-h1 {
      font-size: 3.0rem;/* 48px*/
    }
    .product-h1 span {
      font-size: 1.75rem;/* 28px*/
    }
}
@media screen and (max-width: 600px) {/* 600px以下*/
  .product-h1 {
      font-size: 2.0rem;/* 32px*/
      padding: 0.85rem;
  }
    .product-h1 span {
        font-size: 1.125rem;/* 18px*/
    }
}


.product-h1:before {
  position: absolute;
  bottom: -10px;
  left: calc(50% - 30px);
  width: 60px;
  height: 5px;
  content: '';
  border-radius: 3px;
  background: #fa4141;
}



.home-content-product-wrapper {
  background-color: #ffffff;
  padding-left: 8px;
  padding-right: 8px;
}

.home-content-product {
  max-width: 1060px;
  margin-right: auto;
  margin-left: auto;
  padding-top: 2rem;
  padding-bottom: 6rem;
}


.osusume {
  margin-top: 5rem;
  color: #000000;
  font-size: 32px; /* IE8以下とAndroid4.3以下用フォールバック */
  font-size: calc(1.5rem + ((1vw - 6px) * 1.7391));/* 24px~32pxで可変*/
}
.osusume2 {
  color: #2a2b2f;
  font-size: 20px; /* IE8以下とAndroid4.3以下用フォールバック */
  font-size: calc(1.5rem + ((1vw - 6px) * 1.7391));/* 24px~32pxで可変*/
}

.h2-renew {
  position: relative;
  color: #333;
  display: inline-block;
  margin: 47px 0;
  text-shadow: 0 0 2px white;
}
.h2-renew::before {
 content: "";
 position: absolute;
 background: #a9e1ff;
 width: 100px;
 height: 100px;
 border-radius: 50%;
 top: 50%;
 border: dashed 1px white;
 left: 50%;
 -webkit-transform: translate(-50%,-50%);
 transform: translate(-50%,-50%);
 z-index: -1;
 box-shadow: 0px 0px 0px 5px #a9e1ff;
}

.product-osusume-wrapper {
  grid-template-columns: repeat(auto-fit,minmax(240px,1fr));
  gap:4rem;
  display: grid;
  margin-top: 0rem;
  /*border: 1px solid #000000;*/
  padding: 2rem;
  background-color: #34333b;
}

.product-img {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.osusume-item {
  color: #ffffff;
}

@media screen and (max-width: 600px) {/* 600px以下*/
  .home-content-product {
    padding-bottom: 3rem;
    padding-top: 0rem;
  }
  .osusume {
    margin-top: 1rem;
  }
  .product-osusume-wrapper {
    gap:2rem;
  }
  .osusume-item {
      font-size: 14px;
  }
  .product-series-content {
      font-size: 14px;
  }
    /*.product-osusume-wrapper img {
      box-shadow: 6px 6px 0 #ce7c95;
    }*/
}



.product-osusume-name {
  font-size: 32px; /* IE8以下とAndroid4.3以下用フォールバック */
  font-size: calc(1.5rem + ((1vw - 6px) * 1.7391));/* 24px~32pxで可変*/
  margin-bottom: 1rem;
  color: #dbc174;
}



.product-info {
  max-width: 700px;
  margin: 0 auto;
}

.product-catch {
  font-size: 32px; /* IE8以下とAndroid4.3以下用フォールバック */
  font-size: calc(1.3125rem + ((1vw - 6px) * 2.3913));/* 21px~32pxで可変*/
  text-align: center;
  margin-top: 2rem;
}

.circle-wrapper {
  margin: 0 auto;
}

.circle-wrapper-2 {
  padding-top: 2rem;
  margin-bottom: -2rem;
}
.circle {
    width: 80px;
    height: 80px;
    background-color: pink;
    border-radius: 50%;
    /*margin: 0 auto; ←円を中央揃え */
    text-align: center;/* ←文字を左右に中央揃え */
    line-height: 100px;/* ←文字を上下に中央揃え */
}

.renew-logo {
  width: 80px;
  height: 80px;
  float: left;
  margin-top: -20px;
  margin-right: -6rem;
  margin-left: 4rem;
}

.renew-logo-2 {
  width: 110px;
  height: 110px;
  margin-top: -20px;
  margin-right: -6rem;
}


.menkyo-body {
  background-color: #333;
  color: #fff;
}
.menkyo-body .product-item-wrapper img {
  border: 1px solid #dcc274;
}

#menkyo-renew {
  color: #dbc174;
}

@media (min-width: 1060px) {/* 1060px以上*/
    .osusume,.product-osusume-name,.product-catch {
        font-size: 2.0rem;/* 32px*/
    }
}
@media screen and (max-width: 600px) {/* 600px以下*/
    .osusume,.product-osusume-name,.product-catch {
        font-size: 1.3125rem;/* 21px*/
    }
    .renew-logo {
      width: 50px;
      height: 50px;
      float: left;
      margin-top: -8px;
      margin-right: initial;
      margin-left: initial;
    }
    .renew-logo-2 {
      width: 80px;
      height: 80px;
      margin-top: -20px;
      margin-right: -6rem;
    }
}


.button18 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1rem;
  margin-top: 1.5rem;
}

.button18 i {
  margin-left: 0.45rem;
}

.button18 a {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  padding: 1em 1em;
  width: 100%;
  color: #333;
  font-size: 14px;
  font-weight: 700;
  /*background-color: #cccccc;*/
  border: 1px solid #333;
  transition: 0.3s;
  background-color: #ffffff;
}

.button-nav {
  justify-items: center;
}
.button-nav a {
  width: 70%;
  padding: 0.5em 1em;
}

.button18 a::before {
  content: '';
  position: absolute;
  top: calc(50% - 2px);
  right: 1em;
  transform: translateY(calc(-50% - 2px)) rotate(30deg);
  width: 12px;
  height: 2px;
  background-color: #2285b1;
  transition: 0.3s;
}

.button18 a::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 1em;
  transform: translateY(-50%);
  width: 40px;
  height: 2px;
  background-color: #2285b1;
  transition: 0.3s;
}

.button18 a:hover {
  text-decoration: none;
  /*background-color: #bbbbbb;*/
}

.button18 a:hover::before,
.button18 a:hover::after {
  right: 0.5em;
}

@media screen and (max-width: 830px) {/* 830px以下*/
  .button-nav a {
      width: 100%;
    }
  }

@media screen and (max-width: 600px) {/* 600px以下*/
    .button18 a {
      padding: 0.5em 1em;
      /*justify-content: initial;*/
    }
    .button18 a::before {
      top: calc(90% - 2px);
    }
    .button18 a::after {
      top: 88%;
    }
}











.yakult-logo-2 {
  border: 1px solid #E6373A;
  display: inline-block;
  width: 100%;
  height: 60px;
  display: flex;
  font-size: 1.25rem;
  color: #E6373A;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 2rem;
  padding-right: 2rem;
  margin-top: 3rem;
  margin-bottom: 3rem;
  /*margin-left: auto;
  margin-right: auto; */
  text-align: center;
}
.yakult-logo-2 img {
  margin: 0 auto;
}
.yakult-logo-2 a {
  margin-top: 2%;
  margin-left: 3rem;
  font-size: 1.1rem;
}


.product-feature-wrapper {
  grid-template-columns: repeat(auto-fit,minmax(240px,1fr));
  gap:2rem;
  display: grid;
}

.product-feature h3 {
  text-align: center;
  margin-bottom: 1rem;
  font-size: 16px;
}

@media screen and (max-width: 600px) {/* 600px以下*/
    .product-feature-wrapper {
      gap: 1rem;
    }
    .product-feature p {
      font-size: 14px;
    }
}



.product-buy {
  /*grid-template-columns: repeat(auto-fit,minmax(240px,1fr));
  gap:2rem;
  display: grid; */
  display: flex;
  margin-top: 1rem;
}

.product-item-wrapper {
  grid-template-columns: repeat(auto-fit,minmax(240px,1fr));
  gap:1rem;
  display: grid;
  border-bottom: 1px solid #D1C8C8;
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.menkyo-border {
  border-bottom: 1px solid #dcc274;
}
.product-item-name {
  margin-top: 1rem;
  margin-bottom: 1rem;
  font-size: 28px;
  font-size: calc(1.875rem + ((1vw - 6px) * -2.1739));/*30~20px*/
}

.product-button-wrapper {
  /*display: grid;
  grid-template-columns: repeat(auto-fit,minmax(50px,1fr));
  gap:1rem;*/
  margin-top: 2rem;
}

.product-detail-button-wrapper {
  margin-top: 3rem;
}
.product-detail-button {
  padding-top: 1rem;
  padding-bottom: 1rem;
  padding-left: 3rem;
  padding-right: 3rem;
  border: 1px solid #C00000;
  margin-right: 1rem;
  color: #C00000;
}


.readmore a {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  padding: 0.5em 1.5em;
  width: 35%;
  color: #333;
  font-size: 16px;
  font-size: calc(1rem + ((1vw - 6px) * -0.8696));/*16~12px*/
  font-weight: 700;
  transition: 0.3s;
  margin-top: 2rem;
  white-space: nowrap;
}


.readmore a::before {
  content: '';
  position: absolute;
  top: calc(50% - 2px);
  right: -2em;
  transform: translateY(calc(-50% - 2px)) rotate(30deg);
  width: 12px;
  height: 2px;
  background-color: #2285b1;
  transition: 0.3s;
}

.readmore a::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -2em;
  transform: translateY(-50%);
  width: 70px;
  height: 2px;
  background-color: #2285b1;
  transition: 0.3s;
}

.readmore a:hover {
  text-decoration: none;
  color: #ffffff;
  border-color: transparent;
}

.readmore a:hover::before,
.readmore a:hover::after {
  right: -2.5em;
}

.index-top {
  display: flex;
  justify-content: flex-end;
  margin-top: 2rem;
}
.index-top a {
  border: 1px solid #000000;
  margin-right: 1.75rem;
}
.index-top a:hover {
  background-color: #000000;
  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.4), 0 0 50px rgba(0, 0, 0, 0.1) ;
}

.product-link {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 2rem;
}
.product-link a {
  border: 1px solid #000000;
  width: 17%;
  margin-right: 1.75rem;
}
.product-link a:hover {
  background-color: #000000;
  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.4), 0 0 50px rgba(0, 0, 0, 0.1) ;
}

.product-top {
  display: flex;
  justify-content: flex-end;
}
.product-top a {
  border: 1px solid #000000;
  width: 20%;
  margin-right: 1.75rem;
}

.product-top a:hover {
  background-color: #000000;
  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.4), 0 0 50px rgba(0, 0, 0, 0.1) ;
}

.menkyo a {
  border: 1px solid #dcc274;
  color: #fff;
}

.menkyo a:hover {
  background-color: #dcc274;
  box-shadow: 0px 7px 10px rgba(255, 255, 255, 0.4), 0 0 50px rgba(255, 255, 255, 0.1) ;
}


.saga a {
  border: 1px solid #22313f;
}

.saga a:hover {
  background-color: #22313f;
  box-shadow: 0 1px 10px rgba(142, 223, 249, 0.4), 0 0 50px rgba(142, 223, 249, 0.1) ;
}

.kanmono a {
  border: 1px solid #9f9693;
}

.kanmono a:hover {
  background-color: #9f9693;
  box-shadow: 0 1px 10px rgba(159, 150, 147, 0.4), 0 0 50px rgba(159, 150, 147, 0.1) ;
}

.kanmono-s a {
  border: 1px solid #512012;
}

.kanmono-s a:hover {
  background-color: #512012;
  box-shadow: 0 1px 10px rgba(81, 32, 18, 0.4), 0 0 50px rgba(81, 32, 18, 0.1) ;
}

 .tenobe-u a {
   border: 1px solid /*#f6c475;*/#d5995a;
 }

 .tenobe-u a:hover {
   color: #ffffff;
   background-color: /*#f6c475;*/#d5995a;
   /*box-shadow: 0 1px 10px rgba(242, 207, 151, 0.4), 0 0 50px rgba(242, 207, 151, 0.1) ;*/
   box-shadow: 0 1px 10px rgba(213, 153, 90, 0.4), 0 0 50px rgba(213, 153, 90, 0.1) ;
 }

 .tenobe-s a {
   border: 1px solid #233273;
 }

 .tenobe-s a:hover {
   background-color: #233273;
   box-shadow: 0 1px 10px rgba(35, 50, 115, 0.4), 0 0 50px rgba(35, 50, 115, 0.1) ;
 }




@media (min-width: 1060px) {/* 1060px以上*/
    .product-item-name {
      font-size: 1.875rem;/* 30px*/
    }
    .readmore a {
        font-size: 1.0rem;/* 18px*/
    }
}
@media screen and (max-width: 900px) {/* 900px以下*/
    .readmore a::after {
      width: 50px;
    }
    .product-item-name {
      font-size: 1.25rem;/* 20px*/
    }
}



@media screen and (max-width: 600px) {/* 600px以下*/
    .readmore a {
        font-size: 0.875rem;/* 12px*/
        width: 45%;
    }
    .product-item p {
      font-size: 14px;
    }
}







 .link-alt {
   margin-left: 1rem;
   color: #707070;
 }



 .title-img-wrapper-product {
   background-size: cover;
   background-position: center;
   width: 100%;
 }

 .menkyo-img {
   background-image: url(images/product/menkyokaiden/menkyo-main.jpg);
 }

 .saga-img {
   background-image: url(images/product/saganokanzaki/saga-img.jpg);
 }


 .title-img-wrapper-product::before {
   content: '';
   display: block;
   padding-top: 55%;
 }

 @media screen and (max-width: 600px) {/* 600px以下*/
   .title-img-wrapper-product::before {
     content: '';
     display: block;
     padding-top: 100%;
   }
 }


.product-category-wrapper {
  background-color: /*#8E1111;#7E7D7D;*//*#f5f5f5;*/#7d7d7d;
  margin-top: 3rem;
  margin-bottom: -2rem;
}
.product-category-content-wrapper {
  max-width: 1060px;
  margin: 0 auto;
  padding-top: 3rem;
  padding-left: 8px;
  padding-right: 8px;
  padding-bottom: 1.5rem;
}
.product-category-content {
  /*display: grid; */
  /*  grid-template-columns: 1fr 2fr;*/
  /*grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
  gap:1rem;
  display: flex;*/
  padding-top: 1rem;
}



.product-category-wrapper-sp {
    background-color: #7d7d7d;
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 1.5rem;
    padding-bottom: 0.5rem;
    color: #ffffff;
    font-size: 1.25rem;
    margin-bottom: -2rem;
}
.product-category-content-wrapper-sp {
    max-width: 1060px;
    margin: 0 auto;
}

.product-category-sp {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-columns: repeat(3,minmax(110px,1fr));
  gap: 1rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
}


@media screen and (min-width: 635px) {/* 634px以上*/
    .product-category-wrapper-sp {
      display: none;
    }
}



@media screen and (max-width: 634px) {/* 634px以下*/
    .product-category-wrapper,.product-category-content-wrapper {
      display: none;
    }
}



@media (min-width: 1060px) {/* 1060px以上*/
    .osusume,.product-osusume-name,.product-catch {
        font-size: 2.0rem;/* 32px*/
    }
}

.product-category-brand {
    margin-right: 7px;
}
.product-category {
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 2px solid #ffffff;
  display: flex;
  gap: 1rem;
}





/*.img-overlay {
  position: relative;
  display: inline-block;
}
.img-overlay::after {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  width: 0;
  height: 95.5%;
  background: #F9821A;
  opacity: .5;
  transition:all 0.3s ease;
}
.img-overlay:hover:after {
  width: 100%;
}

@media screen and (max-width: 600px) {
  .img-overlay::after {
    height: 90.0%;
  }
}*/

/*.img-overlay {
  transition: all 0.3s;
  font-size: 0;
}
.img-overlay:hover {
  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.4), 0 0 50px rgba(128, 128, 128, 0.1) ;
  border-color: transparent;
}*/

.img-overlay {
  transition: all 0.3s;
}

.img-overlay:hover {
  opacity: 0.8; filter: brightness(100%);
}

.product-category-title {
  color: #ffffff;
  font-size: 1.5rem;
}

.product-category-item {
  background-color: #ffffff;
  /*width: 200px;
  height: 200px;*/
  text-align: center;
  margin-bottom: 1rem;
  margin-right: 10px;
}

.product-category-item span {
  font-size: 0.875rem;
}

.product-category-item:hover {
  background-color: #F9821A;
  opacity: 0.5;
}


.yakult-logo-3 {
  /*border: 3px solid #E6373A;*/
  display: inline-block;
  width: 100%;
  height: 60px;
  display: flex;
  font-size: 1.25rem;
  color: #E6373A;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 2rem;
  padding-right: 2rem;
/*  margin-top: 3rem; */
  margin-bottom: 3rem;
  margin-left: auto;
  margin-right: auto;
  background-color: #ffffff;
}
.yakult-logo-3 a,.menmono-logo-3 a {
  margin-top: 2%;
  margin-left: 3rem;
  font-size: 16px; /* IE8以下とAndroid4.3以下用フォールバック */
  font-size: calc(0.875rem + ((1vw - 6px) * 0.4348));/* 14px~16pxで可変*/
}
@media (min-width: 1060px) {/* 1060px以上*/
  .yakult-logo-3 a,.menmono-logo-3 a {
    font-size: 1.0rem;/* 16px*/
  }
}
@media screen and (max-width: 600px) {/* 600px以下*/
  .yakult-logo-3 a,.menmono-logo-3 a {
      font-size: 0.875rem;/* 14px*/
  }
}
.menmono-logo-3 {
  /*border: 3px solid #F9821A;*/
  display: inline-block;
  width: 100%;
  height: 60px;
  display: flex;
  font-size: 1.25rem;
  color: #F9821A;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 2rem;
  padding-right: 2rem;
/*  margin-top: 3rem; */
  margin-bottom: 3rem;
  margin-left: auto;
  margin-right: auto;
  background-color: #ffffff;
}
.menmono-logo a {
  margin-top: 2%;
  margin-left: 3rem;
  font-size: 1.1rem;
}


.related-recipes-wrapper {
  max-width: 1060px;
  margin: 0 auto;
  padding-top: 3rem;
  padding-bottom: 3rem;
  padding-left: 8px;
  padding-right: 8px;
}
.related-recipes-content {
  grid-template-columns: repeat(auto-fit,minmax(100px,1fr));
  gap:1rem;
  display: grid;
  padding-top: 1rem;
}
.related-recipes-title {
  font-size: 1.25rem;
}


.related-recipes-item {
  /*width: 200px;
  height: 200px; */
  text-align: center;
}
.related-recipes-item span {
  font-size: 0.875rem;
}

.others {
  background-color: #8EDFF9;
  color: #ffffff;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  padding-right: 0.5rem;
  width: 170px;
  margin: 0 0 0 auto;
}


@media screen and (min-width: 410px) {/* 以上*/
  .br-cooking {
    display: none
  }
}

/*商品情報-個別*/


.buy-content-product {
  width: 45%;
  height: 59px;
  display: flex;
  border: 2px solid #C00000;
  padding: 2px;
  margin-right: 30px;
}
.buy-content-product2 {
  width: 50%;
  height: 59px;
  display: flex;
  border: 2px solid #C00000;
  padding: 2px;
}






.item-home-content {
 max-width: 1060px;
 margin-top: 1rem;
 margin-right: auto;
 margin-bottom: 1rem;
 margin-left: auto;
 padding: 0 8px;
}

.item-y-hr {
  margin-top: 0.75rem;
  height: 3px;
  background-color: #E6373A;
  border: none;
  color: #E6373A;
}

.item-m-hr {
  margin-top: 0.75rem;
  height: 3px;
  background-color: #d8331d;
  border: none;
  color: #E6373A;
}


.syohin-item-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
  gap:1rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.syohin-item-wrapper p {
  margin-bottom: 2rem;
}


/*.syohin-img {
    margin-top: 12%;
}

@media screen and (max-width: 474px) {
 .syohin-img {
    margin-top: initial;
}
}*/


.yakult-logo-syohin {
  border-bottom: 5px solid #C00000;
}
.yakult-logo-syohin img {
  max-width: 30%;
  margin-right: 1rem;
}
.yakult-logo-syohin a {
  padding-bottom: -1rem;
}

.syohin-button-wrapper {
  /*display: grid;
  grid-template-columns: repeat(auto-fit,minmax(50px,1fr));
  gap:1rem;*/
  display: flex;
}

.syohin-service-button-wrapper {
  margin-top: 2rem;
}
.syohin-service-button {
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
  padding-left: 1rem;
  padding-right: 1rem;
  border: 1px solid #C00000;
  margin-right: 1rem;
  color: #C00000;
}

.syohin-service-button-wrapper img {
  width: 150px;
  height: 55px;
  margin-right: 5px;
  padding-top: 5%;
}

.item-info-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
  gap:1rem;
  margin-bottom: 2rem;
}
.item-info-title {
  color: #000000;
  text-decoration: underline;
  text-decoration-color: #8E1111;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3rem;
  margin-bottom: 1rem;
  font-size: 24px; /* IE8以下とAndroid4.3以下用フォールバック */
  font-size: calc(1.5rem + ((1vw - 6px) * -0.8696));/* 20px~24pxで可変*/
}
@media (min-width: 1060px) {/* 1060px以上*/
  .item-info-title {
    font-size: 1.5rem;/*24px*/
  }
}
@media screen and (max-width: 600px) {/* 600px以下*/
  .item-info-title {
    font-size: 1.25rem;/*20px*/
  }
}

.item-info p {
  border: 1px solid #707070;
  padding: 0.5rem;
  font-size: 14px;
  /*height: 170px; */
}

.item-info span {
  font-size: 14px;
}


.tb-item-info {
  border-collapse: collapse;
  border: solid 1px #707070;/*表全体を線で囲う*/
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  margin-top: 1rem;
  font-size: 14px;
  margin-bottom: 0.5rem;
}
.td-item-info {
  text-align: left;
  white-space: nowrap; /* 勝手に折り返さない */
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 0.5rem;
  border: solid 1px #707070;/*表全体を線で囲う*/
  width: 150px;
  background-color: #f5f5f5;
}

@media screen and (max-width: 800px) {/* 800px以下*/
    .td-item-info {
      width: 90px;
    }
    .item-info span {
      font-size: 12px;
    }
}

.tb-item-info tr {
  border: solid 1px #707070;/*表全体を線で囲う*/
}
.tb-item-info td {
  /*text-align: right;*/
  padding: 0.5rem;
}
.cooking {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(222px,1fr));
  gap:1rem;
  margin-top: 5rem;
  margin-bottom: 3rem;
}

.cooking-method h2 {
  margin-bottom: 1rem;
  text-decoration: underline;
  text-decoration-color: #8E1111;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3rem;
}
.cooking-method h2 span {
  font-size: 14px;
}
.cooking-method h3 {
  margin-bottom: 1rem;
}
.cooking-method-soup {
  font-size: 1rem;
}
.cooking-method p {
  margin-bottom: 1rem;
}

.cooking-table-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr ;
    grid-gap: 0.25rem;
}
.cooking-table-wrapper-2 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 0.25rem;
    margin-bottom: 1rem;
}

.cooking-table {
  margin-top: initial;
  margin-bottom: initial;
  border: 1px solid #707070;
  font-size: 14px;
}
.cooking-table td {
  padding-top: initial;
  padding-bottom: initial;
}

.cooking-caution {
  font-size: 14px;
}

@media screen and (max-width: 680px){
  .cooking-table {
    font-size: 12px;
  }
  .cooking-caution {
    font-size: 12px;
  }
}

.th-background {
 background-color: #bfc7cd;
}
.th-background2 {
 background-color: #fad9c7;
}

.td-cooking {
 text-align: center;
}
.td-cooking-p {
  padding-left: 0.35rem;
  padding-right: 0.35rem;
}

@media screen and (max-width: 800px) {/* 800px以下*/
  .cooking {
    margin-bottom: 1rem;
  }
  .cooking-method p {
    font-size: 14px;
  }
  .cooking-method h2 span {
    font-size: 12px;
  }
}


.related-product {
  display: grid;
  /*grid-template-columns: repeat(auto-fit,minmax(80px,1fr));*/
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr ;
  gap:1rem;
  margin-bottom: 2rem;
}

.related-name-sp {
  font-size: 12px;
  text-align: center;
}
@media screen and (min-width: 601px) {/* 601px以下*/
  .related-name-sp {
    display: none;
  }
}

@media screen and (max-width: 600px) {/* 600px以下*/
  .related-product {
    /*grid-template-columns: repeat(auto-fit,minmax(80px,1fr));*/
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
  .related-name {
    display: none;
  }
}

.related-product-title {
  font-size: 1.25rem;
}








/*商品Q&A*/


.tab-wrap {
	background: White;
	display: flex;
	flex-wrap: wrap;
	overflow: hidden;
	padding: 0 0 20px;
  /*box-shadow: 0 0 5px rgba(0,0,0,.1);*/

}

.tab-label {
	color: Gray;
	cursor: pointer;
	flex: 1;
	font-weight: bold;
	order: -1;
	padding: 12px 24px;
	position: relative;
	text-align: center;
	transition: cubic-bezier(0.4, 0, 0.2, 1) .2s;
	user-select: none;
	white-space: nowrap;
	-webkit-tap-highlight-color: transparent;
  border-top: 1px solid rgba(0,0,0,.1);
  border-bottom: 1px solid rgba(0,0,0,.1);
  border-left: 1px solid rgba(0,0,0,.1);
  border-right: 1px solid rgba(0,0,0,.1);
}



@media screen and (min-width: 601px) {/* 601px以上*/
  .br-qa {
    display: none
  }
}

@media screen and (max-width: 600px) {/* 600px以下*/
  .tab-label {
    font-size: 14px;
    line-height: 1.20;
    padding-top: 1rem;

    /*padding: 0;*/
    height: 50px;
    width: 100px;
    text-align: center;
  }
  .wrap {
    padding-top: 0.5rem;
  }
}


.tab-label:hover {
	background: rgba(0, 191, 255,.1);
}

.tab-switch:checked + .tab-label {
	color: DeepSkyBlue;
}

.tab-label::after {
	background: DeepSkyBlue;
	bottom: 0;
	content: '';
	display: block;
	height: 3px;
	left: 0;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	transform: translateX(100%);
	transition: cubic-bezier(0.4, 0, 0.2, 1) .2s 80ms;
	width: 100%;
	z-index: 1;
}

.tab-switch:checked ~ .tab-label::after {
	transform: translateX(-100%);
}

.tab-switch:checked + .tab-label::after {
	opacity: 1;
	transform: translateX(0);
}

.tab-content {
	height:0;
	opacity:0;
	padding: 0 20px;
	pointer-events:none;
	transform: translateX(-30%);
	transition: transform .3s 80ms, opacity .3s 80ms;
	width: 100%;
}

.tab-switch:checked ~ .tab-content {
	transform: translateX(30%);
}

.tab-switch:checked + .tab-label + .tab-content {
	height: auto;
	opacity: 1;
	order: 1;
	pointer-events:auto;
	transform: translateX(0);
}

.tab-wrap::after {
	content: '';
	height: 20px;
	order: -1;
	width: 100%;
}

.tab-switch {
	display: none;
}

/* ============================== */





/**/

.qa {
  color: #00B9FF;
  margin-bottom: 0px;
}


.questions .questions_wrapper .questions_content{
    border: 1px solid #00B9FF;
    margin:20px 0;
    padding:20px 50px 20px 20px;
    border-radius: 15px;
    font-size: 16px;
    font-weight: bold;
}
.answer {
    font-weight: initial;
    color: #808080;
}
.questions .questions_wrapper .questions_content .question{
    color:#00B9FF;
    text-indent: -1em;
    padding-left:1em;
    margin-left:1em;
    position:relative;
}
.questions .questions_wrapper .questions_content .question::before{
    content:"Q.";
    text-decoration: none;
    display: inline-block;
    margin-right:1em;
}
.questions .questions_wrapper .questions_content .question::after{
    content: "";
    position: absolute;
    right: -25px;
    top: 30%;
    transition: all 0.2s ease-in-out;
  /*   要素の動きを指定 */
    display: block;
    width: 12px;
    height: 12px;
    border-top: solid 3px #00B9FF;
    border-right: solid 3px #00B9FF;
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
  /* transform: rotateで要素の角度を指定 */
}
.questions .questions_wrapper .questions_content .question:hover{
    text-decoration:underline;
    cursor:pointer;
}
.questions .questions_wrapper .questions_content .answer{
    margin-top:40px;
    text-indent: -1em;
    padding-left:1em;
    margin-left:1em;
}
.questions .questions_wrapper .questions_content .answer::before{
    content:"A.";
    text-decoration: none;
    display: inline-block;
    margin-right:1em;
    color: #E6373A;
}
.questions .questions_wrapper .questions_content .open:after {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    top: 45%;
  /* openクラスがついた時の要素の角度を指定 */
}


@media screen and (max-width: 800px) {/* 800px以下*/
    .questions_content p {
      font-size: 14px;
   }
}

/*会社情報*/

.home-content-title-corporate {
  background-color: #40A9F5;
  color: #ffffff;
  text-align: center;
}


.c-profile {
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;
  transition: all 0.3s;
  margin-bottom: 2rem;
  /*font-size: 32px;
  font-size: calc(1rem + ((1vw - 6px) * 3.4783));/* 16px~32pxで可変*/
  /*text-align: center;
  margin-top: 2.5%;*/
}

.c-profile:hover {
  box-shadow: 0 1px 10px rgba(192, 0, 0, 0.4), 0 0 50px rgba(192, 0, 0, 0.1) ;
  border-color: transparent;
}

.c-profile p {
  text-align: center;
  margin-top: 9%;
  color: #ffffff;
  font-size: 20px;
}

.c-profile img {
	display: block;
	transition-duration: 0.3s;	/*変化に掛かる時間*/
}
.c-profile img:hover {
	transform: scale(1.1);	/*画像の拡大率*/
	transition-duration: 0.3s;	/*変化に掛かる時間*/
}

.c-profile-text {
  background-color: rgba(249, 130, 26, 0.5);
  width: 50%;
  height: 40%;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin:0;
}


.c-safety {
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;
  transition: all 0.3s;
  /*font-size: 32px;
  font-size: calc(1rem + ((1vw - 6px) * 3.4783));/* 16px~32pxで可変*/
  /*text-align: center;
  margin-top: 2.5%;*/
}

.c-safety:hover {
  box-shadow: 0 1px 10px rgba(192, 0, 0, 0.4), 0 0 50px rgba(192, 0, 0, 0.1) ;
  border-color: transparent;
}


.c-safety p {
  text-align: center;
  margin-top: 9%;
  color: #ffffff;
  font-size: 20px;
}

.c-safety img {
	display: block;
	transition-duration: 0.3s;	/*変化に掛かる時間*/
}
.c-safety img:hover {
	transform: scale(1.1);	/*画像の拡大率*/
	transition-duration: 0.3s;	/*変化に掛かる時間*/
}

.c-safety-text {
  background-color: rgba(17, 54, 142, 0.5);
  width: 50%;
  height: 40%;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin:0;
}

.info-wrapper {
  display: flex;
  height: 100%;
  align-items:stretch
}

.c-history {
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;
  transition: all 0.3s;
  /*font-size: 32px;
  font-size: calc(1rem + ((1vw - 6px) * 3.4783));/* 16px~32pxで可変*/
  /*text-align: center;
  margin-top: 2.5%;*/
}

.c-history:hover {
  box-shadow: 0 1px 10px rgba(192, 0, 0, 0.4), 0 0 50px rgba(192, 0, 0, 0.1) ;
  border-color: transparent;
}


.c-history p {
  text-align: center;
  margin-top: 15%;
  color: #ffffff;
  font-size: 20px;
}

.c-history img {
	display: block;
	transition-duration: 0.3s;	/*変化に掛かる時間*/
}
.c-history img:hover {
	transform: scale(1.1);	/*画像の拡大率*/
	transition-duration: 0.3s;	/*変化に掛かる時間*/
}

.c-history-text {
  background-color: rgba(142, 17, 17, 0.5);
  width: 50%;
  height: 32%;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin:0;
}

.c-csr {
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;
  transition: all 0.3s;
  /*font-size: 32px;
  font-size: calc(1rem + ((1vw - 6px) * 3.4783));/* 16px~32pxで可変*/
  /*text-align: center;
  margin-top: 2.5%;*/
}

.c-csr:hover {
  box-shadow: 0 1px 10px rgba(192, 0, 0, 0.4), 0 0 50px rgba(192, 0, 0, 0.1) ;
  border-color: transparent;
}

.c-csr p {
  text-align: center;
  margin-top: 15%;
  color: #ffffff;
  font-size: 20px;
}

.c-csr img {
	display: block;
	transition-duration: 0.3s;	/*変化に掛かる時間*/
}
.c-csr img:hover {
	transform: scale(1.1);	/*画像の拡大率*/
	transition-duration: 0.3s;	/*変化に掛かる時間*/
}

.c-csr-text {
  background-color: rgba(71, 152, 37, 0.5);
  width: 50%;
  height: 32%;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin:0;
}


@media screen and (min-width: 601px) {/* 600px以上*/
  .br-history {
    display: none;
  }
}

@media screen and (max-width: 600px) {/* 600px以下*/
  .c-profile p,.c-safety p {
    margin-top: 5.5%;
    font-size: 14px;
  }
  .c-history p {
    margin-top: 3.5%;
    font-size: 14px;
  }
  .c-csr p {
    margin-top: 13%;
    font-size: 14px;
  }
  .c-profile-text,.c-history-text,.c-csr-text,.c-safety-text {
    width: 90%;
    height: 58%;
  }
  .c-history-text,.c-csr-text {
    width: 80%;
    height: 50%;
  }
}




/*お知らせ*/

.news-wrapper {
  margin-top: 3rem;
  margin-bottom: 3rem;
  margin-left: auto;
  margin-right: auto;
}

.scroll-wrapper {
    display: flex;
    /*justify-content: center;*/
}
@media screen and (max-width: 600px) {
  .scroll-wrapper {
      display: block;
  }
}

.scroll-list {
  max-height: 250px;
  overflow-y: scroll;
  list-style-type: none;
  /*background-color: #fff;
  -webkit-box-shadow : rgba(0, 0, 0, 0.498039)0px 5px 10px;
  box-shadow: 0 0 5px #aaa inset;
  -webkit-box-shadow: 0 0 5px #aaa inset;
  -ms-box-shadow: 0 0 5px #aaa inset;
  -moz-box-shadow: 0 0 5px #aaa inset;
  -o-box-box-shadow: 0 0 5px #aaa inset;*/
}

.scroll-list .scroll-item a {
  display: block;
  padding-top: 10px;
  padding-bottom: 10px;
  margin-right: 15px;
  margin-left: 15px;
  color: #707272;
  font-size: 0;
  transition: background-color 0.1s;
}
.scroll-list .scroll-item a:hover {
  color: #C00000;
}

.scroll-list .date {
  display: inline-block;
  width: 100px;
  letter-spacing: 1px;
  font-size: 0.875rem;
  font-weight: bold;
  margin-right: 1rem;
}
.scroll-list .category {
  display: inline-block;
  width: 150px;
  height: 30px;
  background-color: #C00000;
  color: #fff;
  text-align: center;
  letter-spacing: 1px;
  font-size: 0.75rem;
  line-height: 20px;
  padding-top: 2px;
  padding-bottom: 2px;
  padding-left: 5px;
  padding-right: 5px;
}
.scroll-list .category.news {
  background-color: #C00000;
}
.news {
  margin-right: 1rem;
}
.date p,.news p,.title p {
  padding-top: 4px;
}

.scroll-list .category.topic {
  background-color: #704E37;
}
.scroll-list .title {
  display: inline-block;
  font-size: 0.875rem;
}


/* スクロールの幅の指定 */
.scroll-list::-webkit-scrollbar {
  width: 10px;
  height: 5px;
}

/* スクロールの背景の設定 */
.scroll-list::-webkit-scrollbar-track {
  border-radius: 5px;
  box-shadow: 0 0 6px #aaa inset;
}

/* スクロールのつまみ部分の設定 */
.scroll-list::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background: #C00000;
}

.home-content-title-news {
  background-color: #3343BA;
  color: #ffffff;
  text-align: center;
}
.news-content-wrapper h3 {
  text-align: center;
  margin-bottom: 1rem;
}
.news-content-wrapper h4 {
  margin-top: 1rem;
}

@media screen and (max-width: 600px) {/* 600px以下*/
  .news-content-wrapper p {
    font-size: 14px;
  }
}

.home-content-news {
  max-width: 1060px;
  margin-top: 3rem;
  margin-right: auto;
  margin-bottom: 3rem;
  margin-left: auto;
  padding: 0 8px;
}

.news-img {
  margin-top: 2rem;
  margin-bottom: 1rem;
  text-align: center;
}

.news-img2 {
  display: flex;
  max-width: 1060px;
}


/*商品情報-麵許皆伝*/
.spot-name {
  color: #72B647;
  font-size: 1.75rem;
  margin-bottom: 1rem;
}
.caution {
  margin-top: -1rem;
  margin-bottom: 1rem;
}
.kanko-spot-wrapper {
  display: flex;
  margin-top: 2rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid #479825;
  padding-bottom: 2rem;
}















/*会社情報_会社概要*/
.title-img-wrapper {
  background-image: url(images/company/building.JPG);
  background-size: cover;
  background-position: center;
  width: 100%;
}

.title-img-wrapper::before {
  content: '';
  display: block;
  padding-top: 3.5%;
}



.title-img {
  max-width: 1060px;
  margin: 0 auto;
  color: #fff;
  padding-left: 8px;
  padding-right: 8px;
  /*padding-right:30%;
  padding-left: 22%;*/
  padding-bottom: 2.5%;
}

.content-title {
  font-size: 43px;/* IE8以下とAndroid4.3以下用フォールバック */
  font-size: calc(1.5rem + ((1vw - 6px) * 4.1304));/* 24px~43pxで可変*/
}

.content-title span {
	display: flex;
	align-items: center;
	color: #498ee0;
	font-size: 18px;
	text-transform: uppercase;
}

.content-title span::before {
	content: '';
	display: inline-block;
	margin-right: 20px;
	width: 40px;
	height: 1px;
	background-color: #498ee0;
}


@media (min-width: 1060px) {/* 1060px以上*/
    .content-title,.center {
        font-size: 2.6875rem;/* 43px*/
    }
}
@media screen and (max-width: 600px) {/* 600px以下*/
    body{
    line-height: 2;
    }
    .content-title,.center {
        font-size: 1.5rem;/* 24px*/
    }
    .content-title span {
      font-size: 14px;
    }
    .content-title span::before {
      margin-right: 10px;
    	width: 20px;
    }
}


/*@media screen and (max-width: 820px) {
  .title-img {
    padding-left: 42%;
  }
}

@media screen and (max-width: 414px) {
  .title-img {
    padding-left: 36%;
    padding-top: 4%;
    padding-bottom: 4%;
  }
}*/


.box{
  position: relative;
}

.box-img {
  width: 100%;
  height: 10%;
  overflow: hidden;
}
.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 43px;/* IE8以下とAndroid4.3以下用フォールバック */
  font-size: calc(1.5rem + ((1vw - 6px) * 4.1304));/* 24px~43pxで可変*/
}




.home-content-company {
  max-width: 1060px;
  margin-top: 2rem;
  margin-right: auto;
  margin-bottom: 2rem;
  margin-left: auto;
  padding: 0 8px;
}


.company-message {
  margin-top: 1rem;
  margin-bottom: 1.5rem;
}

.company-message-title {
  font-size: 32px; /* IE8以下とAndroid4.3以下用フォールバック */
  font-size: calc(1.5rem + ((1vw - 6px) * 1.7391));/* 24px~32pxで可変*/
}

.company-subtitle {
  color: #C00000;
  font-size: 24px; /* IE8以下とAndroid4.3以下用フォールバック */
  font-size: calc(1.25rem + ((1vw - 6px) * 0.8696));/* 20px~24pxで可変*/
}

@media (min-width: 1060px) {/* 1060px以上*/
    .company-message-title {
        font-size: 2.0rem;/* 32px*/
    }
    .company-subtitle {
        font-size: 1.5rem;/* 24px*/
    }
}
@media screen and (max-width: 600px) {/* 600px以下*/
    .company-message {
      font-size: 0.875rem;
    }
    .company-message-title {
        font-size: 1.5rem;/* 24px*/
    }
    .company-subtitle {
        font-size: 1.25rem;/* 20px*/
    }
}




.tb-company-wrapper {
  padding-left: 1rem;
  padding-right: 1rem;
}

@media screen and (max-width: 600px) {/* 600px以下*/
  .tb-company-wrapper {
    padding-left: initial;
    padding-right: initial;
  }
}
.tb-company {
  border-collapse: collapse;
  border: solid 2px #C00000;/*表全体を線で囲う*/
}


.tb-company th,td {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.tb-company tr {
  border-top: 1px solid #E1DFDF;
}
.th-company {
  color: #C00000;
  text-align: center;
  white-space: nowrap; /* 勝手に折り返さない */
}

.googlemap-button {
  font-size: 0.875rem;
  background: #C00000;
  color: #ffffff;
  padding: 10px 25px;
}
.googlemap-button:hover {
  background: #CC4040;
  transition: 0.1s;
}

.googlemap-button-2 {
  font-size: 0.875rem;
  background: #C00000;
  color: #ffffff;
  padding: 10px 25px;
  margin-left: 3rem;
  margin-top: 1rem;
}
.googlemap-button-2:hover {
  background: #CC4040;
  transition: 0.1s;
}

.soshiki {
  text-align: center;
}
.access-wrapper {
  /*display: flex;
  align-content: space-between;*/
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(240px,1fr));
  gap:2rem;
}

.map-img {
  margin-left: auto;
  margin-right: auto;
}

@media screen and (max-width: 528px) {/* 520px以下*/
  .map-img {
    order: 1;
  }
  .access {
    order: 2;
  }
}


@media screen and (max-width: 680px) {/* 680px以下*/
  .tb-company {
    font-size: 0.875rem;
  }
  .tb-company th,td {
    display: block;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .tb-company td {
    padding-top: 0.0rem;
  }
  .tb-company th,td {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
  .googlemap-button,.googlemap-button-2 {
    font-size: 0.75rem;
    padding: 5px 20px;
  }
  .access {
    font-size: 14px;
  }
}

@media (min-width:680px) {
  .company-br {
    display: none;
  }
}

/*会社情報_個別共通*/
.company-nav {
  background: #8E1111;
}

.company-nav-wrapper {
  max-width: 1060px;
  margin: 0 auto;
  display: flex;
  list-style: none;
  justify-content: space-around;
  font-size: 1.0rem;/*16px*/
  color: #F6F0EB;
  padding-top: 10px;
  padding-bottom: 10px;
}

.company-nav-wrapper a {
  color: #F6F0EB;
  position: relative;
	padding: 0.1em 0.8em;
	display: inline-block;
	transition: .3s;
}

@media screen and (max-width: 800px) {/* 680px以下*/
  .company-nav-wrapper {
    padding-top: 5px;
    padding-bottom: 5px;
  }
}

@media screen and (max-width: 680px) {/* 680px以下*/
  .company-nav-wrapper {
    font-size: 0.75rem;
  }
  .company-nav-wrapper a {
    padding: 0.1em 0.1em;
  }
}

.company-nav-wrapper a::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 1px;
	background-color: #D1C8C8;
	transform: scaleX(0);
	transition: transform 0.3s;
}

.company-nav-wrapper a:hover::after {
	transform: scaleX(1);
}

/*
.company-nav-wrapper a::before,
.company-nav-wrapper a::after {
	position: absolute;
	content: '';
	width: 0;
	height: 1.0px;
	background-color: #fff;
	transition: .3s;
}
.company-nav-wrapper a::before {
	top: 0;
	left: 0;
}
.company-nav-wrapper a::after {
	bottom: 0;
	right: 0;
}
.company-nav-wrapper a:hover::before,
.company-nav-wrapper a:hover::after {
	width: 100%;
}:/



/*社長挨拶*/

.message-text {
  margin-bottom: 2.5rem;
}

.message-color {
  color: #C00000;
  font-size: 24px; /* IE8以下とAndroid4.3以下用フォールバック */
  font-size: calc(1.25rem + ((1vw - 6px) * 0.8696));/* 20px~24pxで可変*/
  font-weight: bold;
}

@media (min-width: 1060px) {/* 1060px以上*/
    .message-color {
        font-size: 1.5rem;/* 24px*/
    }
}
@media screen and (max-width: 600px) {/* 600px以下*/
    .message-text {
        font-size: 0.875rem;
    }
    .message-color {
        font-size: 1.25rem;/* 20px*/
    }
}



.signature {
  text-align: right;
  margin-right: 2rem;
}

@media screen and (max-width: 700px) {/* 700px以下*/
    .signature {
      margin-right: initial;
    }
}

/*企業理念*/
.philosophy-wrapper {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.philosophy {
    font-weight: bold;
    font-size: 24px; /* IE8以下とAndroid4.3以下用フォールバック */
    font-size: calc(1.125rem + ((1vw - 6px) * 1.3043));/* 18px~24pxで可変*/
}


@media (min-width: 1060px) {/* 1060px以上*/
  .philosophy {
      font-size: 1.5rem;/* 24px*/
  }
}
@media screen and (max-width: 600px) {/* 600px以下*/
  .philosophy {
      font-size: 1.125rem;/* 18px*/
  }
}


/*事業案内*/

.item {
  border-bottom: 1px solid #000000;
  width: 20%;
  font-size: 20px;
  font-size: calc(1.125rem + ((1vw - 6px) * 0.4348));/* 18px~20pxで可変*/
}

.item-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(80px,1fr));
  gap:0.5rem;
  color: #ffffff;
  margin-top: 1rem;
  margin-bottom: 3rem;
  text-align: center;
}
.item-soba-wrapper{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.item-sokuseki {
  background: #8E1111;
  padding-top: 1rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-bottom: 1rem;
}
.img-kanmenn {
  background-color: #ffffff;
}

.item-sokuseki img,.item-kanmen img,.item-tenobe img,.item-soba img {
  margin-top: 1rem;
}
.item-kanmen {
  background: #5BC2DC;
  padding-top: 1rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-bottom: 1rem;
}
.item-tenobe {
  background: #F2BA61;
  padding-top: 1rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-bottom: 1rem;
}
.item-soba {
  background: #79D99D;
  padding-top: 1rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-bottom: 1rem;
  color: #ffffff;
  margin-top: 1rem;
  margin-bottom: 3rem;
  text-align: center;
  /*max-width: 326.66px;
  max-height: 281px;*/
}

@media screen and (max-width: 645px) {/* 645px以下*/
    .item-sokuseki,.item-kanmen,.item-tenobe,.item-soba {
      padding-top: 0.8rem;
      padding-left: 0.8rem;
      padding-right: 0.8rem;
      padding-bottom: 0.8rem;
      font-size: 12px;
    }
    .item-sokuseki img,.item-kanmen img,.item-tenobe img,.item-soba img {
      margin-top: 0.8rem;
    }
}

@media screen and (max-width: 620px) {/* 620px以下*/
    .item-sokuseki,.item-kanmen,.item-tenobe,.item-soba {
      padding-top: 0.6rem;
      padding-left: 0.6rem;
      padding-right: 0.6rem;
      padding-bottom: 0.6rem;
    }
    .item-sokuseki img,.item-kanmen img,.item-tenobe img,.item-soba img {
      margin-top: 0.6rem;
    }
}

@media screen and (max-width: 580px) {/* 580px以下*/
    .item-sokuseki,.item-kanmen,.item-tenobe,.item-soba {
      padding-top: 0.5em;
      padding-left: 0.5rem;
      padding-right: 0.5rem;
      padding-bottom: 0.5rem;
    }
    .item-sokuseki img,.item-kanmen img,.item-tenobe img,.item-soba img {
      margin-top: 0.5rem;
    }
}

@media screen and (max-width: 550px) {/* 550px以下*/
    .item-sokuseki,.item-kanmen,.item-tenobe,.item-soba {
      padding-bottom: 0rem;
    }
}

@media screen and (max-width: 470px) {/* 470px以下*/
    .item-sokuseki,.item-kanmen,.item-tenobe,.item-soba {
      padding-top: 0.4em;
      padding-left: 0.4rem;
      padding-right: 0.4rem;
      padding-bottom: 0rem;
    }
    .item-sokuseki img,.item-kanmen img,.item-tenobe img,.item-soba img {
      margin-top: 0.4rem;
    }
}

@media screen and (max-width: 414px) {/* 414px以下*/
    .item-sokuseki,.item-kanmen,.item-tenobe,.item-soba {
      padding-top: 0.35em;
      padding-left: 0.35rem;
      padding-right: 0.35rem;
      padding-bottom: 0rem;
    }
    .item-sokuseki img,.item-kanmen img,.item-tenobe img,.item-soba img {
      margin-top: 0rem;
    }
}



@media (min-width: 1060px) {/* 1060px以上*/
    .item {
      font-size: 1.25rem;/*20px*/
    }
}



.project-factory-wrapper {
    text-align: center;
}

.project-factory {
  margin-bottom: 2rem;
  font-size: 24px; /* IE8以下とAndroid4.3以下用フォールバック */
  font-size: calc(1.25rem + ((1vw - 6px) * 0.8696));/* 20px~24pxで可変*/
  align-items: center;/* 縦位置の調整 */
  justify-content: center;/* 横位置の調整 */
}

.project-factory2 {
  margin-bottom: 2rem;
  font-size: 24px; /* IE8以下とAndroid4.3以下用フォールバック */
  font-size: calc(1.0625rem + ((1vw - 6px) * 1.5217));/* 17px~24pxで可変*/
  align-items: center;/* 縦位置の調整 */
  justify-content: center;/* 横位置の調整 */
}


.maru-p {
  font-size: 24px; /* IE8以下とAndroid4.3以下用フォールバック */
  font-size: calc(1.25rem + ((1vw - 6px) * 0.8696));/* 20px~24pxで可変*/
}

.maru-p2 {
  font-size: 24px; /* IE8以下とAndroid4.3以下用フォールバック */
  font-size: calc(1.0625rem + ((1vw - 6px) * 1.5217));/* 17px~24pxで可変*/
}

@media (min-width: 1060px) {/* 1060px以上*/
    .project-factory,.maru-p,.project-factory2,.maru-p2 {
        font-size: 1.5rem;/* 24px*/
    }
}
@media screen and (max-width: 600px) {/* 600px以下*/
    .project-factory,.maru-p,.project-factory2,.maru-p2 {
        font-size: 1.25rem;/* 20px*/
    }
    .project-factory,.maru-p,.project-factory2 {
      margin-bottom: 1rem;
    }
}


.project-factory {
  position: relative;
  display: inline-block;
  padding-left: 65px;
  padding-right: 65px;
}

.project-factory:before,
.project-factory:after {
  position: absolute;
  top: calc(50% - 3px);
  width: 50px;
  height: 6px;
  content: '';
  border-top: solid 2px #000000;
  /*border-bottom: solid 2px #000;*/
}

.project-factory:before {
  left: 0;
}

.project-factory:after {
  right: 0;
}


.project-factory2 {
  position: relative;
  display: inline-block;
  padding-left: 65px;
  padding-right: 65px;
}

.project-factory2:before,
.project-factory2:after {
  position: absolute;
  top: calc(50% - 3px);
  width: 50px;
  height: 6px;
  content: '';
  border-top: solid 2px #000000;
  /*border-bottom: solid 2px #000;*/
}

.project-factory2:before {
  left: 0;
}

.project-factory2:after {
  right: 0;
}


@media screen and (max-width: 425px) {/* 425px以下*/
    .project-factory2 {
      padding-left: 35px;
      padding-right: 35px;
    }
    .project-factory2:before,
    .project-factory2:after {
      width: 30px;
    }
}



.project-sokuseki {
  background: #8E1111;
  color: #ffffff;
  text-align: center;
  padding: 1rem;
}
.project-kanmen {
  background: #5BC2DC;
  color: #ffffff;
  text-align: center;
  padding: 1rem;
}
.project-tenobe {
  background: #F2BA61;
  color: #ffffff;
  text-align: center;
  padding: 1rem;
}
.project-soba {
  background: #79D99D;
  color: #ffffff;
  text-align: center;
  padding: 1rem;
}


.seisan_img {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

table {
  width: 100%;
  margin-top: 1.5rem;
  margin-bottom: 3rem;
}
.tb-sokuseki {
  border-collapse: collapse;
  border: solid 1px #8E1111;/*表全体を線で囲う*/
  padding: 1.25rem;
}
.tb-kanmen {
  border-collapse: collapse;
  border: solid 1px #5BC2DC;/*表全体を線で囲う*/
  padding: 1.25rem;
}
.tb-tenobe {
  border-collapse: collapse;
  border: solid 1px #F2BA61;/*表全体を線で囲う*/
  padding: 1.25rem;
}
.tb-soba {
  border-collapse: collapse;
  border: solid 1px #79D99D;/*表全体を線で囲う*/
  background: #ffffff;
  padding: 1.25rem;
}
.tb-sokuseki td,.tb-kanmen td,.tb-tenobe td,.tb-soba td {
  padding-left: 1rem;
}

@media screen and (max-width: 600px) {/* 600px以下*/
    .project-sokuseki,.project-kanmen,.project-tenobe,.project-soba {
      padding: 0.5rem;
    }
    .tb-sokuseki,.tb-kanmen,.tb-tenobe,.tb-soba {
      font-size: 0.875rem;/* 14px*/
    }
    .project-p {
      font-size: 14px;
    }
}



.th-sokuseki {
  background: #FFF1F1;
  color: #8E1111;
  text-align: center;
  white-space: nowrap; /* 勝手に折り返さない */
  padding: 1.25rem;
}
.th-kanmen {
  background: #EAF6F9;
  color: #5BC2DC;
  text-align: center;
  white-space: nowrap; /* 勝手に折り返さない */
  padding: 1.25rem;
}
.th-tenobe {
  background: #FFF6E8;
  color: #F2BA61;
  text-align: center;
  white-space: nowrap; /* 勝手に折り返さない */
  padding: 1.25rem;
}
.th-soba {
  background: #F5FFF9;
  color: #79D99D;
  text-align: center;
  white-space: nowrap; /* 勝手に折り返さない */
  padding: 1.25rem;
}


.body-green {
  background: #EBF8FF;
  padding-top :1rem;
  padding-bottom: 2rem;
  margin-bottom: -2rem;
 }


/*健康企業宣言*/
.health-care {
  margin-bottom: 1rem;
}
@media screen and (max-width: 600px) {/* 600px以下*/
  .health-care {
    font-size: 0.75rem;
  }
}


/*安全・安心-共通ナビ*/
 .safety-nav {
   background: #3486D4;
 }

 .safety-nav-wrapper {
   max-width: 1060px;
   margin: 0 auto;
   display: flex;
   list-style: none;
   justify-content: space-around;
   font-size: 16px;/*16px*/
   color: #F6F0EB;
   padding-top: 10px;
   padding-bottom: 10px;
 }

 .safety-nav-wrapper a {
  color: #F6F0EB;
  position: relative;
 	padding: 0.1em 0.8em;
 	display: inline-block;
 	transition: .3s;
 }

 .safety-nav-wrapper a::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 1px;
	background-color: #D1C8C8;
	transform: scaleX(0);
	transition: transform 0.3s;
}

.safety-nav-wrapper a:hover::after {
	transform: scaleX(1);
}
 /*.safety-nav-wrapper a::before,
 .safety-nav-wrapper a::after {
 	position: absolute;
 	content: '';
 	width: 0;
 	height: 1.0px;
 	background-color: #fff;
 	transition: .3s;
 }
 .safety-nav-wrapper a::before {
 	top: 0;
 	left: 0;
 }
 .safety-nav-wrapper a::after {
 	bottom: 0;
 	right: 0;
 }
 .safety-nav-wrapper a:hover::before,
 .safety-nav-wrapper a:hover::after {
 	width: 100%;
 }*/

 @media screen and (max-width: 600px) {/* 600px以下*/
   .safety-nav-wrapper {
     font-size: 12px;
   }
 }


/*安全・安心-共通*/

.safety-title {
  text-align: center;
  color: #0075A9;
  margin-top: 3rem;
  margin-bottom: 3rem;
  font-size: 24px; /* IE8以下とAndroid4.3以下用フォールバック */
  font-size: calc(1.25rem + ((1vw - 6px) * 0.8696));/* 20px~24pxで可変*/
}

.home-content-safety {
  max-width: 1060px;
  margin-top: 30px;
  margin-right: auto;
  margin-bottom: 30px;
  margin-left: auto;
  padding: 0 13px;
}


.home-content-safety-sp {
  max-width: 1060px;
  margin-top: 30px;
  margin-right: auto;
  margin-bottom: 30px;
  margin-left: auto;
  padding: 0 13px;
}

@media (min-width: 826px) {/* 826px以上*/
    .home-content-safety-sp {
      display: none;
    }
}
@media (max-width: 825px) {/* 825px以下*/
    .home-content-safety {
      display: none;
    }
}


@media screen and (max-width: 600px) {/* 600px以下*/
    .safety-content-text {
        font-size: 0.875rem;/*14px*/
    }
}





/*安全・安心ー安全・安心への取り組み*/

.img-safety {
  background-image: url(images/safety/safety-top.jpg);
}

 /*.title-img-wrapper-safety {
   background-image: url(images/safety/safety-top.jpg);
   background-size: cover;
   background-position: center;
   width: 100%;
 }

 .title-img-wrapper-safety::before {
   content: '';
   display: block;
   padding-top: 4%;
 }*/

 .safety-content-wrapper {
   display: grid;
   grid-template-columns: repeat(auto-fit,minmax(240px,1fr));
   gap:2rem;
   margin-top: 4rem;
   margin-bottom: 4rem;
 }

 .safety-content-title {
   position: relative;
   display: inline-block;
   margin: 1rem 0 1rem -10px;
   padding-top: 1rem;
   padding-bottom: 1rem;
   padding-left: 10px;
   padding-right: 2rem;
   color: #fff;
   border-radius: 0 10vh 100vh 0;
   background: #0075a9;
   -webkit-box-shadow: 3px 3px 5px rgba(0, 0, 0, .2);
   box-shadow: 3px 3px 5px rgba(0, 0, 0, .2);
   font-size: 24px; /* IE8以下とAndroid4.3以下用フォールバック */
   font-size: calc(1.25rem + ((1vw - 6px) * 0.8696));/* 20px~24pxで可変*/
 }

 /*.safety-content-title:before {
   position: absolute;
   bottom: -10px;
   left: 0;
   width: 0;
   height: 0;
   content: '';
   border-top: 10px solid #005276;
   border-left: 10px solid transparent;
 }*/

 .safety-content-title-2 {
   position: relative;
   display: inline-block;
   margin-top: 1rem;
   margin-right: -10px;
   margin-bottom: 1rem;
   margin-left: 0;
   padding-top: 1rem;
   padding-bottom: 1rem;
   padding-left: 2rem;
   padding-right: 10px;
   color: #fff;
   border-radius: 10vh 0 0 100vh ;
   background: #0075a9;
   -webkit-box-shadow: 3px 3px 5px rgba(0, 0, 0, .2);
   box-shadow: 3px 3px 5px rgba(0, 0, 0, .2);
   font-size: 24px; /* IE8以下とAndroid4.3以下用フォールバック */
   font-size: calc(1.25rem + ((1vw - 6px) * 0.8696));/* 20px~24pxで可変*/
 }

 .safety-content-title-2-wrapper {
   display: flex;
   justify-content: flex-end;
 }

 /*.safety-content-title-2:before {
   position: absolute;
   bottom: -10px;
   right: 0;
   width: 0;
   height: 0;
   content: '';
   border-top: 10px solid #005276;
   border-right: 10px solid transparent;
 }*/

 .kanno-wrapper {
   font-size:14px;
 }

 .kanno-img-title {
   font-size: 14px;
   font-weight: bold;
   color: #0075a9;
 }

 .kanno-kensa {
   padding-top: 1rem;
 }


 @media (min-width: 1060px) {/* 1060px以上*/
     .safety-title,.safety-content-title,.safety-content-title-2 {
         font-size: 1.5rem;/* 24px*/
     }
 }
 @media screen and (max-width: 600px) {/* 600px以下*/
     .safety-title,.safety-content-title,.safety-content-title-2 {
         font-size: 1.25rem;/* 20px*/
     }
     .safety-content-title {
       padding-top: 0.5rem;
       padding-bottom: 0.5rem;
       padding-right: 1.5rem;
     }
     .safety-content-title-2 {
       padding-top: 0.5rem;
       padding-bottom: 0.5rem;
       padding-left: 1.5rem;
     }
     .kanno-wrapper {
       margin-bottom: 1rem;
       font-size: 12px;
     }
     .kanno-img-title {
       font-size: 12px;
     }
 }


.safety-link-wrapper {
  margin-top: -40rem;
  margin-bottom: 0;
  margin-left: auto;
  margin-right: auto;
  max-width: 1035px;
  z-index: 99;
  position: absolute;
   left: 0;
   right: 0;
  padding-left: 10px;
  padding-right: 10px;
}



.safety-menu-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(240px,1fr));
  /*gap:2rem; */
  border: 1px solid #40A9F5;
  justify-content: space-between;
  margin-top: 3rem;
  margin-bottom: 3rem;
  background-color: #ffffff;
  box-shadow: 3px 3px 5px rgb(0 0 0 / 20%);
}
.safety-menu {
  background: #ffffff;
  border-right: 1px solid #40A9F5;
  padding: 3rem;
  text-align: center;
}
@media screen and (max-width: 497px) {/* 497px以下*/
  .safety-menu {
    border-right: initial;
  }
}

.safety-menu-title {
  margin-bottom: 1rem;
}

.click {
  color: #40A9F5;
  font-size: 25px;
  margin-left: auto;
  margin-right: auto;
}





.row{
  width:100%;
  height:40vh;
  padding:0;
  margin:0;
  display: flex;
  justify-content: center;
  flex-direction: column;
  position:relative;
  z-index: 1;
}

/* -- SVG CSS -- */

.svg-separator{
  display: block;
  background: 0 0;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 9;
  -webkit-transform: translateY(-100%) translateY(2px);
  transform: translateY(-100%) translateY(2px);
  width: 100%;
}
.svg-separator.bottom{
  top: auto;
  bottom: 0;
}
.sep1{
  transform: translateY(-100%) translateY(2px) scale(1,1);
  transform-origin: top;
}
.sep2 {
  transform: translateY(-100%) translateY(2px) scale(1,1);
  transform-origin: top;
}
.sep3 {
  transform: translateY(-100%) translateY(2px) scale(1,1);
  transform-origin: top;
}
.sep4 {
  transform: translateY(-100%) translateY(2px) scale(1,1);
  transform-origin: top;
}
.sep5 {
  transform: translateY(-100%) translateY(2px) scale(1,1);
  transform-origin: top;
}
.sep6 {
  transform: translateY(-100%) translateY(2px) scale(1,1);
  transform-origin: top;
}
.sep7 {
  transform: translateY(-100%) translateY(2px) scale(1,1);
  transform-origin: top;
}
.sep8 {
  transform: translateY(-100%) translateY(2px) scale(1,1);
  transform-origin: top;
}
.sep9 {
  transform: translateY(0%) translateY(-2px) scale(-1,-1);
  transform-origin: bottom;
}
.sep10 {
  transform: translateY(-100%) translateY(2px) scale(1,1);
  transform-origin: top;
}
.sep11 {
  transform: translateY(-100%) translateY(2px) scale(1,1);
  transform-origin: top;
}
.sep12 {
  transform: translateY(-100%) translateY(2px) scale(1,1);
  transform-origin: top;
}

/* -- Row BG Color -- */

.green{background-color:#03a678;}
.green2{background-color:#1bbc9b;}
.red{background-color:#d24d57;}
.light-grey{background-color:#ecf0f1;}
.light-grey2{background-color:#ecf0f1;}
.dark-blue{background-color:#22313f;}
.grey-blue{background-color:#6c7a89;}
.black{background-color:#333;}
.stupid-blue{background-color:#19b5fe;}


.safety-hr {
    z-index: 1;
}

@media screen and (min-width: 651px) {/* 651px以上*/
  .safety-hr {
    display: none;
  }
}

@media screen and (max-width: 650px) {/* 650px以下*/
    .row,.dark-blue {
      display: none;
    }
    .safety-link-wrapper {
      margin-top: -5rem;
      position: initial;
    }
}


/*安全・安心ー品質方針*/
.policy-title {
  text-align: center;
  color: #E6373A;
  margin-top: 3rem;
  font-size: 32px; /* IE8以下とAndroid4.3以下用フォールバック */
  font-size: calc(1.5rem + ((1vw - 6px) * 1.7391));/* 24px~32pxで可変*/
}

.policy-wrapper {
  list-style: none;
  padding-top: 2rem;
  padding-bottom: 2rem;
  padding-left: 1rem;
  padding-right: 1rem;
  border-top: 2px solid #E6373A;
  border-bottom: 2px solid #E6373A;
  margin-top: 1.0rem;
  margin-bottom: 4rem;
}
.policy-text {
  font-weight: bold;
  font-size: 24px; /* IE8以下とAndroid4.3以下用フォールバック */
  font-size: calc(1rem + ((1vw - 6px) * 1.7391));/* 16px~24pxで可変*/
  margin-bottom: 2rem;
  text-align: center;
}

@media screen and (max-width: 650px) {/* 650px以下*/
    .policy-text {
      text-align: initial;
    }
}

@media (min-width: 1060px) {/* 1060px以上*/
    .policy-title {
        font-size: 2.0rem;/* 32px*/
    }
    .policy-text {
        font-size: 1.5rem;/* 24px*/
    }
}
@media screen and (max-width: 600px) {/* 600px以下*/
    .policy-title {
        font-size: 1.5rem;/* 24px*/
    }
    .policy-text {
        font-size: 1rem;/* 16px*/
    }
    .policy-wrapper li {
      font-size: 14px;
    }
}


/*安全・安心ー品質管理体制*/
.title-img-wrapper-safety-2 {
  background: #f0f0f0;
  padding-top: 2rem;
  padding-bottom: 2rem;
  padding-left: 8px;
  padding-right: 8px;
}
.system-content {
  max-width: 1060px;
  margin: 0 auto;
}
.system-title-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(240px,1fr));
  gap:2rem;
}
.system-title {
  color: #0075A9;
  font-size: 32px; /* IE8以下とAndroid4.3以下用フォールバック */
  font-size: calc(1.5rem + ((1vw - 6px) * 1.7391));/* 24px~32pxで可変*/
  margin-bottom: 1rem;
}

.flow-back {
  background-color: #ffffff;
  padding: 1rem;
}



.safety-system-title {
  text-align: center;
}

.safety-system-title-2 {
  margin-bottom: 1rem;
}

@media (min-width: 1060px) {/* 1060px以上*/
    .system-title {
        font-size: 2.0rem;/* 32px*/
    }
}
@media screen and (max-width: 600px) {/* 600px以下*/
    .system-title {
        font-size: 1.5rem;/* 24px*/
    }
}

.safety-content-wrapper img {
  margin: 0 auto;
}




.fd {
  margin-top: 3rem;
}

/*歴史*/

.title-img-wrapper-history {
  background-image: url(images/history/history-top.jpg);
  background-size: cover;
  background-position: center;
  width: 100%;
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.title-img-wrapper-history::before {
  content: '';
  display: block;
  /*padding-top: 1%;*/
}

.history-title-wrapper-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(240px,1fr));
  gap: 1rem;
  /*padding-bottom: 1rem;*/
}
.history-content-2 {
  max-width: 1060px;
  margin: 0 auto;
  padding-left: 8px;
  padding-right: 8px;
}
.history-title-2 {
  font-size: 32px; /* IE8以下とAndroid4.3以下用フォールバック */
  font-size: calc(1.5rem + ((1vw - 6px) * 1.7391));/* 24px~32pxで可変*/
  color: #ffffff;
}
.history-content-text-2 {
 color: #ffffff;
}

.history-body {
  --h: 148em;
  /*--h: 144em;*/
  /*display: grid;
  grid-template-columns: repeat(var(--n, 7), var(--w, 13em));
  grid-gap: 1em;
  place-content: center;*/
  margin: 0;
  min-height: 1vh;
  background: #333;
  margin-bottom: -30px;
}


@media screen and (max-width: 1040px) {
    .history-body {
      --h: 150em;
    }
}



@media screen and (max-width: 720px) {
    .history-body {
      --h: 152em;
    }
}

@media screen and (max-width: 646px) {
    .history-body {
      --h: 153em;
    }
}


@media screen and (max-width: 630px) {
    .history-body {
      --h: 155em;
    }
}

@media screen and (max-width: 610px) {
    .history-body {
      --h: 156em;
    }
}

@media screen and (max-width: 560px) {
    .history-body {
      --h: 158em;
    }
}

@media screen and (max-width: 530px) {
    .history-body {
      --h: 160em;
    }
}

@media screen and (max-width: 498px) {
    .history-body {
      --h: 165em;
    }
}

@media screen and (max-width: 458px) {
    .history-body {
      --h: 167em;
    }
}
@media screen and (max-width: 425px) {
    .history-body {
      --h: 170em;
    }
}
@media screen and (max-width: 418px) {
    .history-body {
      --h: 173em;
    }
}
@media screen and (max-width: 385px) {
    .history-body {
      --h: 178em;
    }
}


@media (max-width: 99em) {
  body {
    --n: 6 ;
  }
}
@media (max-width: 85em) {
  body {
    --n: 5 ;
  }
}
@media (max-width: 71em) {
  body {
    --n: 4 ;
  }
}
@media (max-width: 57em) {
  body {
    --n: 3 ;
  }
}
@media (max-width: 43em) {
  body {
    --n: 2 ;
  }
}
@media (max-width: 29em) {
  body {
    --n: 1 ;
  }
}
@media (max-width: 15em) {
  body {
    --w: 100%;
    --h: 146.1538461538vw;
  }
}

.card {
  position: relative;
  height: var(--h);
  /*border-radius: 7px;
  box-shadow: 2px 2px 17px #000;*/
  background: linear-gradient(90deg, #000000, #151E17);
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.card:before, .card:after {
  --p: 0;
  --s: calc(1 - 2*var(--p));
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -webkit-mask: var(--m);
  mask: var(--m);
  content: "";
}
.card:after {
  --p: 1 ;
}


.card:before, .card:after {
  background: linear-gradient(calc(var(--s)*45deg), transparent calc(50% - 1px), #151E17 0, #4B384C calc(50% + 1px), transparent 0) 0 0/0.5em 0.5em;
  --m:
    linear-gradient(red 50%, transparent 0)
        0 0/ 4em 4em,
    linear-gradient(90deg, red 50%, transparent 0)
    calc(var(--p)*2em) 0/ 4em 4em;
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}


.history-home-content {
  position: relative;
  max-width: 1060px;
  margin: 0 auto;
}

.history-wrapper {
  position: absolute;
  z-index: 9;
  background: #ffffff;
/*  width: 1500px; */
}

.history-title-wrapper {
  background: #8E1111;
}

.history-title {
  color: #ffffff;
  max-width: 1060px;
  margin: 0 auto;
  font-size: 32px; /* IE8以下とAndroid4.3以下用フォールバック */
  font-size: calc(1.5rem + ((1vw - 6px) * 1.7391));/* 24px~32pxで可変*/
  padding-top: 1rem;
  padding-bottom: 1rem;
  padding-left: 1rem;
  padding-right: 1rem;
}

.history-content {
  max-width: 1060px;
  margin: 0 auto;
  padding-top: 2rem;
  padding-bottom: 2rem;
  padding-left: 2rem;
  padding-right: 2rem;
}

@media screen and (max-width: 799px) {/* 799px以下*/
    .history-content {
      padding-left: 0.5rem;
      padding-right: 0.5rem;
    }
}

.history-content-title {
  font-size: 32px; /* IE8以下とAndroid4.3以下用フォールバック */
  font-size: calc(1.5rem + ((1vw - 6px) * 1.7391));/* 24px~32pxで可変*/
  color: #8E1111;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

@media (min-width: 1060px) {/* 1060px以上*/
    .history-title,.history-title-2 {
        font-size: 2.0rem;/* 32px*/
    }
    .history-content-title {
        font-size: 1.5rem;/* 24px*/
    }
}
@media screen and (max-width: 600px) {/* 600px以下*/
    .history-title,.history-title-2 {
        font-size: 1.5rem;/* 24px*/
    }
    .history-content-title {
        font-size: 1.25rem;/* 20px*/
    }
}


.history-timeline-body {
  background-color: #DFE8ED;
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.history-timeline-wrapper {
  max-height: 900px;
  overflow-y: scroll;
  max-width: 1060px;
  margin-left: 1rem;
  margin-right: 0.2rem;
}

@media screen and (max-width: 600px) {/* 600px以下*/
  .history-timeline-wrapper {
    margin-left: initial;
  }
}


.chlorella {
  text-align: center;
}


/* スクロールの幅の指定 */
.history-timeline-wrapper::-webkit-scrollbar {
  width: 10px;
  height: 5px;
}

/* スクロールの背景の設定 */
.history-timeline-wrapper::-webkit-scrollbar-track {
  border-radius: 5px;
  background: #ffffff;
  box-shadow: 0 0 6px #aaa inset;
}

@media screen and (max-width: 600px) {/* 600px以下*/
  .history-timeline-wrapper::-webkit-scrollbar {
    width: 6px;
  }
}


/* スクロールのつまみ部分の設定 */
.history-timeline-wrapper::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background: #C00000;
}


.history-timeline-title {
  color: #8E1111;
  text-align: center;
  font-size: 2rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
  text-decoration: underline;
}

.history-timeline-back {
  padding-top: 1rem;
  padding-bottom: 1rem;
  background: url(images/history/back-border.png) repeat-y center center;
}
.history-timeline-content {
  display: flex;
  justify-content: space-around;
  max-width: 1060px;
  margin-top: 2rem;
  margin-bottom: 2rem;
  margin-right: 0.5rem;
  margin-left: 0.5rem;
  padding-top: 2rem;
  padding-bottom: 2rem;
  padding-left: 0.6rem;
  padding-right: 0.6rem;
  border-radius:20px;
  background: #ffffff;
  box-shadow: 0 0 8px gray;
}


@media screen and (max-width: 799px) {/* 799px以下*/
    .history-timeline-content {
      display: block;
    }
    .history-timeline-content img {
      margin-top: 1rem;
    }
}





.history-timeline-year {
  color: #8E1111;
  text-decoration: underline;
  font-size: 20px; /* IE8以下とAndroid4.3以下用フォールバック */
  font-size: calc(1.125rem + ((1vw - 6px) * 0.4348));/* 18px~20pxで可変*/
  margin-bottom: 1rem;
}

@media (min-width: 1060px) {/* 1060px以上*/
    .history-timeline-year {
        font-size: 1.25rem;/* 20px*/
    }
}
@media screen and (max-width: 600px) {/* 600px以下*/
    .history-timeline-year {
        font-size: 1.125rem;/* 18px*/
    }
}






.history-maru {
  width: 50px;
  height: 50px;
  line-height: 50px;
  background-color: #ffffff;
  border: 1px solid #000000;
  border-radius: 50%;
  margin: 0 auto;
  margin-top: 1rem;
  margin-bottom: 0;
  margin-left: auto;
  margin-right: auto;
}



/*サイト利用規約*/

.page-title-wrapper {
  border-bottom: 2px solid #C00000;
  margin-top: 2rem;
  margin-bottom: 2.5rem;
}

.page-title {
  color: #C00000;
  font-size: 32px; /* IE8以下とAndroid4.3以下用フォールバック */
  font-size: calc(1.5rem + ((1vw - 6px) * 1.7391));/* 24px~32pxで可変*/
}

.page-subtitle {
  font-size: 24px; /* IE8以下とAndroid4.3以下用フォールバック */
  font-size: calc(1.25rem + ((1vw - 6px) * 0.8696));/* 20px~24pxで可変*/
}

@media (min-width: 1060px) {/* 1060px以上*/
    .page-title {
        font-size: 2.0rem;/* 32px*/
    }
    .page-subtitle {
        font-size: 1.5rem;/* 24px*/
    }
}
@media screen and (max-width: 600px) {/* 600px以下*/
    .page-title-wrapper {
      margin-top: 1rem;
      margin-bottom: 1.5rem;
    }
    .page-title {
        font-size: 1.5rem;/* 24px*/
    }
    .page-subtitle {
        font-size: 1.25rem;/* 20px*/
    }
}


.lead {
  margin-bottom : 2rem;
}

.terms-wrapper {
  padding-top: 2rem;
  padding-bottom: 2rem;
  border-top: 1px solid #E1DFDF;
  border-bottom: 1px solid #E1DFDF;
}

.terms-text {
  padding-left: 1rem;
  padding-right: 1rem;
  margin-top: 1rem;
}

@media screen and (max-width: 600px) {/* 600px以下*/
  .lead,.terms-text {
    font-size: 14px;
 }
}


/*個人情報保護方針*/

.privacy-wrapper {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.fin {
  text-align: right;
}

@media screen and (max-width: 600px) {/* 600px以下*/
  .fin {
  font-size: 14px;
 }
}

/*クッキーポリシー*/
.cookie-wrapper {
  padding-top: 2rem;
  padding-bottom: 2rem;
  border-top: 1px solid #E1DFDF;
}

.cookie-subtitle {
  margin-top: 1rem;
}

/*クッキー同意ポップアップ*/

.cookie {
  color: #000000;
}

.cookie1:active {
  visibility: hidden;
}


.cookie-consent {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  bottom: 0;
  width: 100%;
  font-size: 14px;
  font-size: calc(0.75rem + ((1vw - 6px) * 0.4348));/* 12px~14pxで可変*/
  color: #fff;
  background: rgba(0,0,0,.8);
  padding: 1.2em;
  box-sizing: border-box;
  visibility: hidden;
  z-index: 2147483647;
}
.cookie-consent.is-show {
  visibility: visible;
}
.cookie-consent a {
  color: dodgerblue !important;
  font-weight: bold;
}

.cookie-agree {
  color: #fff;
  background: dodgerblue;
  padding: 0.7em 1.7em;
  margin-left: 3rem;
}
.cookie-agree:hover {
  cursor: pointer;
}

.cookie-wrap {
  word-break: break-all;
  color: #1a0dab;
}

.cookie-wrap:hover {
  text-decoration: underline;
}

/* パッと消える */
.cc-hide1 {
  display: none;
}

@media screen and (min-width: 1060px) {/*1060px以上*/
  .cookie-consent {
    font-size: 14px;
 }
}

@media screen and (max-width: 600px) {/* 600px以下*/
  .cookie-consent {
    font-size: 12px;
    flex-direction: column;
 }
 .cookie-agree {
   margin-top: 1rem;
 }
}



/*お問い合わせフォーム*/

.form-title {
  margin-bottom: 1rem;
  color : #C00000;
}
.required-wrapper {
  margin-bottom: 2rem;
  font-weight: bold;
  font-size: 14px;
  color: #1ba2e6;
}
.required {
  font-size: 14px;
}
.required::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 6px;
  height: 6px;
  background-color: #1ba2e6;
  border-radius: 50%;
  margin-right: 13px;
}

.c-form-wrapper {
  border-top: 1px solid #d7dde0;
}



.customer-lead {
  list-style-type: circle;
  font-size: 14px;
  margin-left: 1rem;
}


.tel-wrapper {
  margin-bottom: 2rem;
}
.tel-wrapper p {
  font-size: 14px;
}
.btn-tel {
  background-color: #F9821A;
  width: 290px;
  margin-bottom: 1rem;
  border-radius: 8px;
}
.tel {
  /*color: #F9821A;*/
  font-size: 1.85rem;
  color:#ffffff;
  padding-left: 1rem;
}

.fa-phone {
  transform: scale(-1, 1);
  margin-right: 1rem;
}

@media(min-width: 768px){
  a[href^="tel:"]{
    pointer-events: none;
  }
  a[href^="tel:"] {
  cursor: default; }
}

.form-caution {
  font-size: 14px;
  margin-bottom: 1rem;
}

.c-form {
  text-align: center;
}
.contact {
  max-width: 840px;/*横幅*/
  margin: 0 auto;/*中央寄せ*/
  padding-top: 0rem;
  padding-bottom: 2rem;
  padding-left: 8px;
  padding-right: 8px;
  /*border: 1px solid #333;*/
}
.contact-table {
  width: 100%;
  margin-bottom: 20px;
}

.contact-item,
.contact-body {
    border-bottom: initial;
}

.contact-item {
    text-align: left;
    width: 20%;
    color: #313233;
    font-size: 14px;
}

.contact-body {
    width: 80%;
}


.contact-body p {
  font-size: 14px;
}

.form-text,.form-text2 {
    /*width: 100%;*/
    background-color: #f0f3f5;
    padding: 10px;
    border-radius: 5px;
    /*border: 1px solid #ccc;*/
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    /*max-width: 400px;*/
    margin-right: 1rem;
    width: 100%;
}

.form-name {
  width: 30%;
}
.form-tel {
  width: 30%;
}
.form-zip {
  width: 30%;
}
.form-pref {
  width: 30%;
}

@media screen and (max-width: 680px) {/* 680px以下*/
  .tel {
    font-size: 1.25rem;
  }
  .btn-tel {
    width: 215px;
  }
  .contact-body {
      width: 100%;
      padding-right: initial;
  }
  .form-name {
    width: 48.5%;
  }
  .form-tel,.form-zip,.form-pref {
    width: 70%;
  }
  .form-text {
    margin-right: 0.155rem;
  }
  .form-text2 {
    margin-right: initial;
  }
  .sp-curly {
    font-size: 11px;
  }
}

.contact-name {
  margin-right: 1rem;
  font-size: 14px;
}

.form-select {
    width: 180px;
    height: 40px;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.form-textarea {
    background-color: #f0f3f5;
    width: 100%;
    padding: 10px;
    height: 200px;
    border-radius: 5px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.contact-privacy {
  text-align: center;
  font-size: 14px;
}

.privacy-box {
  max-height: 220px;
  overflow-y: scroll;
  /*overflow-x: hidden;*/
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 1rem;
  margin-bottom: 2rem;
  /*width: 850px;*/
  margin-left: auto;
  margin-right: auto;
}

.privacy-box p {
  font-size: 14px;
}

.privacy-box h2 {
  font-size: 16px;
}

.privacy-text {
  padding-left: 1rem;
  padding-right: 1rem;
}

.privacy-fin {
  text-align: right;
}
.underline {
  text-decoration: underline;
  color: #1a0dab;
}

/* スクロールの幅の指定 */
.privacy-box::-webkit-scrollbar {
  width: 10px;
  height: 5px;
}

/* スクロールの背景の設定 */
.privacy-box::-webkit-scrollbar-track {
  border-radius: 5px;
  background: #ffffff;
  box-shadow: 0 0 6px #aaa inset;
}

/* スクロールのつまみ部分の設定 */
.privacy-box::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background: #C00000;
}


.contact-button {
  display: flex;
  margin-top: 2rem;
}

.contact-submit {
  width: 150px;
  background-color: #333;
  color: #fff;
  font-weight: bold;
  display: block;
  margin: 0 auto;
  font-size: 16px;
  padding: 15px;
  border-radius: 8px;
  border: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
}
.reset-button {
  width: 150px;
  background-color: #fff;
  color: #333;
  font-weight: bold;
  display: block;
  margin: 0 auto;
  font-size: 16px;
  padding: 15px;
  border-radius: 8px;
  border: 1px solid #333;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
}

@media screen and (max-width: 680px) {/* 680px以下*/
  .contact-submit {
    padding: 0.25rem;
  }
  .reset-button {
    padding: 0.25rem;
  }
}

/*mf-thanks*/

.mf-thanks {
  color: #F9821A;
  margin-bottom: 2rem;
}

.mf-thanks-wrapper p {
  font-size: 14px;
}

.mf-thanks-p-wrapper {
  background-color: #FAF7F0;
  margin-top: 2rem;
  font-size: 14px;
  padding: 1rem;
}

.tel-wrapper2 {
  margin-bottom: 0rem;
  border: 1px solid #E1DFDF;
  padding: 1rem;
}

/*工場見学*/

.home-content-factory {
  max-width: 1060px;
  margin-right: auto;
  margin-left: auto;
  padding-top: 2rem;
  padding-left: 8px;
  padding-right: 8px;
}



.title-img-wrapper-factory {
  background-image: url(images/factory/factory-top.jpg);
  background-size: cover;
  background-position: center;
  width: 100%;
}

.title-img-wrapper-factory::before {
  content: '';
  display: block;
  padding-top: 42%;
}

@media screen and (max-width: 600px) {/* 600px以下*/
  .title-img-wrapper-factory::before {
    padding-top: 60%;
  }
}



.factory-info {
  color: #C00000;
  text-align: center;
  margin-bottom: 2rem;
  font-size: 24px; /* IE8以下とAndroid4.3以下用フォールバック */
  font-size: calc(1.25rem + ((1vw - 6px) * 0.8696));/* 20px~24pxで可変*/
}

.factory-lead {
  background-color: #8E1111;
  color: #ffffff;
  padding: 1rem;
  margin-bottom: 3rem;
  border-radius: 10px;
  font-size: 14px; /* IE8以下とAndroid4.3以下用フォールバック */
  font-size: calc(0.75rem + ((1vw - 6px) * 0.4348));/* 12px~14pxで可変*/
}

.factory-title-wrapper {
  border-top: 3px solid #C00000;
  border-bottom: 3px solid #C00000;
  margin: 0 auto;
  padding-top: 1rem;
  padding-bottom: 1rem;
  text-align: center;
}

.factory-wrapper-title {
  font-size: 24px; /* IE8以下とAndroid4.3以下用フォールバック */
  font-size: calc(1.25rem + ((1vw - 6px) * 0.8696));/* 20px~24pxで可変*/
  color: #C00000;
  text-align: left;
  display: inline-block;
}
.factory-wrapper-title-2 {
  font-size: 43px;/* IE8以下とAndroid4.3以下用フォールバック */
  font-size: calc(1.5rem + ((1vw - 6px) * 4.1304));/* 24px~43pxで可変*/
  color: #C00000;
  text-align: left;
  display: inline-block;
}


.factory-content-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(240px,1fr));
  gap:2rem;
  margin-bottom: 3rem;
}
.factory-content-title {
  font-size: 32px; /* IE8以下とAndroid4.3以下用フォールバック */
  font-size: calc(1.5rem + ((1vw - 6px) * 1.7391));/* 24px~32pxで可変*/
  text-align: center;
  margin-bottom: 2rem;
  text-decoration: underline;
  text-decoration-color: #F67E7E;
}

.factory-content-subtitle {
  font-size: 24px; /* IE8以下とAndroid4.3以下用フォールバック */
  font-size: calc(1.5rem + ((1vw - 6px) * -1.7391));/* 16px~24pxで可変*/
  text-align: center;
}


@media (min-width: 1060px) {/* 1060px以上*/
    .factory-wrapper-title-2 {
        font-size: 2.6875rem;/* 43px*/
    }
    .factory-info,.factory-wrapper-title {
        font-size: 1.5rem;/* 24px*/
    }
    .factory-lead,.webtour-lead {
        font-size: 0.875rem;/*14px*/
    }
    .factory-content-title {
        font-size: 2.0rem;/* 32px*/
    }
    .factory-content-subtitle {
        font-size: 1.5rem;
    }
}
@media screen and (max-width: 600px) {/* 600px以下*/
    .factory-wrapper-title-2 {
        font-size: 1.5rem;/* 24px*/
    }
    .factory-info,.factory-wrapper-title {
        font-size: 1.25rem;/* 20px*/
    }
    .factory-lead,.webtour-lead {
        font-size: 0.75rem;/*12px*/
    }
    .factory-content-title {
        font-size: 1.5rem;/* 24px*/
    }
    .factory-content-subtitle {
        font-size: 1.0rem;
    }

    .factory-text{
        font-size: 0.875rem;
    }
}

.pc,.industry {
  margin-right: 1rem;
}



/*WEb工場見学*/

.title-img-wrapper-webtour {
  background-image: url(images/factory/webtour/webtour-top7.jpg);
  background-size: cover;
  background-position: center top;
  background-position: center;
  position: relative;
  width: 100%;
}

.title-img-wrapper-webtour::before {
  content: '';
  display: block;
  padding-top: 2%;
}

.title-img-wrapper-webtour-sp {
  background-image: url(images/factory/webtour/webtour-top-sp.jpg);
  background-size: cover;
  background-position: center top;
  background-position: center;
  position: relative;
  width: 100%;
}

.title-img-wrapper-webtour-sp::before {
  content: '';
  display: block;
  padding-top: 2%;
}


.webtour-title,.webtour-title2 {
  line-height: normal;
}

.webtour-title-wrapper {
  max-width: 1060px;
  margin: 0 auto;
  padding-top: 0;
  /*padding-right: 4%;*/
  padding-bottom: 30%;
  /*padding-left: 290px;*/
  /*text-align: center;*/
}
.webtour-title {
  /*font-size: 6.0rem;*/
  /*font-family: Century, serif;*/
  /*position: absolute;
  top: 455px;*/
  font-size: 50px;/* IE8以下とAndroid4.3以下用フォールバック */
  font-size: calc(1.5rem + ((1vw - 6px) * 5.6522));/* 24px~50pxで可変*/
  color: #8EDFF9;
}
.webtour-title2 {
  /*font-size: 6.0rem;*/
  /*font-family: Century, serif;*/
  /*position: absolute;
  top: 455px;*/
  font-size: 80px;/* IE8以下とAndroid4.3以下用フォールバック */
  font-size: calc(2rem + ((1vw - 6px) * 10.4348));/* 32px~80pxで可変*/
  color: #8EDFF9;
  font-family: 'Kaisei HarunoUmi', serif;
  /*font-family: 'Train One', cursive;*/
}


@media (min-width: 1060px) {/* 1060px以上*/
    .webtour-title {
        font-size: 3.125rem;/* 50px*/
    }
    .webtour-title2 {
        font-size: 5rem;/* 80px*/
    }
}

@media (min-width: 821px) {/* 1060px以上*/
  .title-img-wrapper-webtour-sp {
    display: none;
  }
}

@media screen and (max-width: 600px) {/* 600px以下*/
    .webtour-title {
        font-size: 1.5rem;/* 24px*/
    }
    .webtour-title2 {
        font-size: 2rem;/* 32px*/
    }
}


@media screen and (max-width: 820px) {/* 820px以下*/
    .title-img-wrapper-webtour::before {
      padding-top: 15%;
    }
    .webtour-title-wrapper {
      padding-bottom: 80%;
    }
    .title-img-wrapper-webtour {
      display: none;
    }
}

@media screen and (max-width: 750px) {/* 820px以下*/
    .title-img-wrapper-webtour::before {
      padding-top: 15%;
    }
    .webtour-title-wrapper {
      padding-bottom: 80%;
    }
}

@media screen and (max-width: 600px) {/* 820px以下*/
    .title-img-wrapper-webtour::before {
      padding-top: 14%;
    }
    .webtour-title-wrapper {
      padding-bottom: 80%;
    }
}

@media screen and (max-width: 450px) {/* 820px以下*/
    .title-img-wrapper-webtour::before {
      padding-top: 10%;
    }
    .webtour-title-wrapper {
      padding-bottom: 80%;
    }
}


.container {
  margin-top: 3rem;
  position: relative;
  background: #2c3e50;
  /*height: 30vh;*/
}

.wave {
  position: absolute;
  height: 70px;
  width: 100%;
  background: #2c3e50;
  bottom: 0;
}

.wave::before, .wave::after {
  content: "";
  display: block;
  position: absolute;
  border-radius: 100% 50%;
}

.wave::before {
  width: 55%;
  height: 109%;
  background-color: #fff;
  right: -1.5%;
  top: 60%;
}
.wave::after {
  width: 55%;
  height: 100%;
  background-color: #2c3e50;
  left: -1.5%;
  top: 40%;
}


.webtour-lead {
  background-color: #075b8c;
  color: #ffffff;
  padding: 2rem;
  margin-bottom: 3rem;
  border-radius: 10px;
  font-size: 14px; /* IE8以下とAndroid4.3以下用フォールバック */
  font-size: calc(0.75rem + ((1vw - 6px) * 0.4348));/* 12px~14pxで可変*/
}

  @media (min-width: 1060px) {/* 1060px以上*/
    .webtour-lead {
          font-size: 0.875rem;/*14px*/
      }
  }
  @media screen and (max-width: 600px) {/* 600px以下*/
    .webtour-lead {
          font-size: 0.75rem;/*12px*/
      }
  }


/*.webtour-lead {
  border: 2px solid #035FB6;
  padding: 1rem;
  text-decoration: underline;
  text-decoration-color: #035FB6;
  margin-bottom: 2rem;
  font-size: 16px; IE8以下とAndroid4.3以下用フォールバック */
  /*font-size: calc(0.875rem + ((1vw - 6px) * 0.4348));/* 16px~14pxで可変*/
/*}*/

.process-title {
  text-align: center;
  margin-top: 3rem;
}
.process {
  font-size: 43px;/* IE8以下とAndroid4.3以下用フォールバック */
  font-size: calc(1.5rem + ((1vw - 6px) * 4.1304));/* 24px~43pxで可変*/
  text-decoration: underline;
  text-decoration-color: #F67E7E;
  text-decoration-thickness: 0.95rem;
  text-underline-offset: -0.75rem;
  -moz-text-decoration-thickness: 0.95rem;
  -moz-text-underline-offset: -0.75rem;
  -webkit-text-decoration-thickness: 0.95rem;
  -webkit-text-underline-offset: -0.75rem;

  /*width: 55%;*/
  margin: 0 auto;
}


@media (min-width: 1060px) {/* 1060px以上*/
  .process {
      font-size: 2.6875rem;/* 43px*/
  }
}
@media screen and (max-width: 600px) {/* 600px以下*/
  .webtour-lead {
    padding: 1rem;
  }
  .process {
      font-size: 1.5rem;/* 24px*/
      text-decoration-thickness: 0.15rem;
      text-underline-offset: -0.2rem;
      -moz-text-decoration-thickness: 0.15rem;
      -moz-text-underline-offset: -0.2rem;
      -webkit-text-decoration-thickness: 0.15rem;
      -webkit-text-underline-offset: -0.2rem;
  }
}

@media (min-width: 540px) {/* 540px以上*/
  .br-process {
    display: none;
  }
}

@media (max-width: 540px) {/* 540px以下*/
  .process {
    line-height: 2rem;
  }
}



.web-factory-link-wrapper {
  display: grid;
  /*grid-template-columns: repeat(auto-fit,minmax(240px,1fr));*/
  grid-template-columns: 1fr 1fr;
  gap:0.5rem;
  margin-top: 3rem;
  margin-bottom: 5rem;
  text-align: center;
}

.web-factory-link {
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;
  /*font-size: 32px;
  font-size: calc(1rem + ((1vw - 6px) * 3.4783));/* 16px~32pxで可変*/
  /*text-align: center;
  margin-top: 2.5%;*/
}

.web-factory-link img {
	display: block;
	transition-duration: 0.3s;	/*変化に掛かる時間*/
}
.web-factory-link img:hover {
	transform: scale(1.1);	/*画像の拡大率*/
	transition-duration: 0.3s;	/*変化に掛かる時間*/
}

.web-factory-link-text {
  position: absolute;
  top: 35%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin:0;
  font-size: 43px;/* IE8以下とAndroid4.3以下用フォールバック */
  font-size: calc(1.0625rem + ((1vw - 6px) * 5.6522));/* 17px~43pxで可変*/
  font-weight: bold;
}


@media (min-width: 1060px) {/* 1060px以上*/
  .web-factory-link-text {
    font-size: 2.6875rem;/* 43px*/
  }
}
@media screen and (max-width: 600px) {/* 600px以下*/
  .web-factory-link-text {
    font-size: 1.0625rem;/* 17px*/
  }
}


/*WEb工場見学-スライドショー*/

/*==================================================
スライダーのためのcss
===================================*/
.webtour-slider {/*横幅94%で左右に余白を持たせて中央寄せ*/
    width:92%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 7rem;
    margin-bottom: 4rem;
}

.webtour-slider img {
    width:50vw;/*スライダー内の画像を60vwにしてレスポンシブ化*/
    height:auto;
    margin-bottom: 1rem;
}

.webtour-slider p {
  width:50vw;/*スライダー内の画像を60vwにしてレスポンシブ化*/
  font-size: 0.85rem;
}

@media (max-width: 1100px) {/* 820px以下*/
  .webtour-slider {
      margin-top: 3rem;
      margin-bottom: initial;
  }
}

@media (max-width: 600px) {/* 600px以下*/

  .webtour-slider {
      margin-top: initial;
  }

  .webtour-slider img {
      width:80vw;/*スライダー内の画像を60vwにしてレスポンシブ化*/
  }

  .webtour-slider p {
    width:80vw;/*スライダー内の画像を60vwにしてレスポンシブ化*/
    font-size: 0.75rem;
  }
}

.webtour-slider a {
  color: red;
}

.webtour-slider .slick-slide {
  transform: scale(0.8);/*左右の画像のサイズを80%に*/
  transition: all .5s;/*拡大や透過のアニメーションを0.5秒で行う*/
  opacity: 0.5;/*透過50%*/
}

.webtour-slider .slick-slide.slick-center{
  transform: scale(1);/*中央の画像のサイズだけ等倍に*/
  opacity: 1;/*透過なし*/
}


/*矢印の設定（WEB工場見学）*/

/*戻る、次へ矢印の位置*/
.webtour-slider .slick-prev,
.webtour-slider .slick-next {
    position: absolute;/*絶対配置にする*/
    top: 42%;
    cursor: pointer;/*マウスカーソルを指マークに*/
    outline: none;/*クリックをしたら出てくる枠線を消す*/
    border-top: 2px solid #8E1111;/*矢印の色*/
    border-right: 2px solid #8E1111;/*矢印の色*/
    height: 40px;
    width: 40px;
    z-index: 99;
}

.webtour-slider .slick-prev {/*戻る矢印の位置と形状*/
    left: 19%;
    transform: rotate(-135deg);
}

.webtour-slider .slick-next {/*次へ矢印の位置と形状*/
    right: 19%;
    transform: rotate(45deg);
}

@media screen and (max-width: 600px) {
  .webtour-slider .slick-prev,
  .webtour-slider .slick-next {
      height: 30px;
      width: 30px;
  }

  .webtour-slider .slick-prev {/*戻る矢印の位置と形状*/
      left: -1.5%;
      transform: rotate(-135deg);
  }

  .webtour-slider .slick-next {/*次へ矢印の位置と形状*/
      right: -1.5%;
      transform: rotate(45deg);
  }
}

/*トップページ-スライドショー*/

/*==================================================
スライダーのためのcss
===================================*/

/*メインスライダー*/
.main-slider-wrap {
  width:100%;
}

/*矢印の設定（トップスライダー）*/
/*戻る、次へ矢印の位置*/

.main-slider .slick-prev,
.main-slider .slick-next {
  position: absolute;
  top: 50%;
  cursor: pointer;
  opacity: 0.7;
  z-index: 99;
}

.main-slider .slick-prev {/*戻る矢印の位置と形状*/
  left: 2%;
}

.main-slider .slick-next {/*次へ矢印の位置と形状*/
  right: 2%;
}

@media screen and (max-width: 600px) {
  .main-slider .slick-prev,
  .main-slider .slick-next {
      height: 30px;
      width: 30px;
  }

  .main-slider .slick-prev {/*戻る矢印の位置と形状*/
      left: 2%;
  }

  .main-slider .slick-next {/*次へ矢印の位置と形状*/
      right: 2%;
  }
}



/*WEb工場見学-即席めん*/

.brand-logo-f2 {
  margin-top: 2rem;
}



.big-bg {
  background-image: url(images/factory/webtour/sokuseki/web-sokuseki-top.jpg);
  background-size: cover;
  /*background-position: center top;*/
  background-position: center;
  /*background-repeat: no-repeat;*/
  position: relative;
  width: 100%;
}

.big-bg-2 {
  background-image: url(images/factory/webtour/kanmen/web-kanmen-top.jpg);
  background-size: cover;
  /*background-position: center top;*/
  background-position: center;
  /*background-repeat: no-repeat;*/
  position: relative;
  width: 100%;
}


.big-bg::before,.big-bg-2::before {
  content: '';
  display: block;
  padding-top: 40%;
}

@media screen and (max-width: 600px) {/* 600px以下*/
  .big-bg::before,.big-bg-2::before {
    padding-top: 60%;
  }
}

.big-bg,.big-bg-2::before {
  text-transform: none;
}
.web-sokuseki-top-text {
  /*max-width: 1060px;*/
  margin: 0 auto;
  padding-top: 3%;
/*  padding-right: 4%;
  padding-bottom: 100px;*/
/*  padding-left: 4%; */
  color: #fff;

  background-color: rgba(238, 57, 57, 0.5);
  /*padding-top: 5px;
  padding-left: 50px;
  padding-right: 50px;
  padding-bottom: 5px;*/
  width: 100%;
  height: 20%;
  position: absolute;
  top: 90%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  /*margin:0;*/
  /*padding:0;
  color: #ffffff;*/
  text-align: center;
}

.web-kanmen-top-text {
  /*max-width: 1060px;*/
  margin: 0 auto;
  padding-top: 3%;
/*  padding-right: 4%;
  padding-bottom: 100px;*/
/*  padding-left: 4%; */
  color: #fff;

  background-color: rgba(91, 194, 220, 0.5);
  /*padding-top: 5px;
  padding-left: 50px;
  padding-right: 50px;
  padding-bottom: 5px;*/
  width: 100%;
  height: 20%;
  position: absolute;
  top: 90%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  /*margin:0;*/
  /*padding:0;
  color: #ffffff;*/
  text-align: center;
}



@media screen and (max-width: 1350px) {/* 1350px以下*/
  .web-sokuseki-top-text,.web-kanmen-top-text {
    padding-top: 2%;
  }
}
/*@media screen and (max-width: 600px) {
  .web-sokuseki-top-text,.web-kanmen-top-text {
    padding-top: 1%;
  }
}*/

.web-sokuseki-top-text p,.web-kanmen-top-text p {
  /*font-size: 1.875rem;*/
  font-size: 32px;/* IE8以下とAndroid4.3以下用フォールバック */
  font-size: calc(1.25rem + ((1vw - 6px) * 2.6087));/* 20px~32pxで可変*/
  /*line-height: 1.3;
  position: absolute;
  top: 605px;*/
}

@media (min-width: 1060px) {/* 1060px以上*/
    .web-sokuseki-top-text p,.web-kanmen-top-text p {
        font-size: 2rem;/* 32px*/
    }
}
@media screen and (max-width: 600px) {/* 600px以下*/
  /*  .web-sokuseki-top-text p {
        font-size: 1.25rem; 20px
    }*/
}



.brand-logo-f {
  margin-top: 4rem;
}

.brand-logo-p {
  margin-top: 2rem;
  margin-bottom: 2rem;
  text-align: center;
}

/*.brand-logo-p-img {
  max-width: 70%;
}*/


.yakult-logo {
  border: 1px solid #E6373A;
  display: inline-block;
  width: 100%;
  height: 60px;
  display: flex;
  font-size: 1.25rem;
  color: #E6373A;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 2rem;
  padding-right: 2rem;
  margin-top: 3rem;
  margin-bottom: 3rem;
}
.menmono-logo {
  border: 1px solid #F9821A;
  display: inline-block;
  width: 100%;
  height: 60px;
  display: flex;
  font-size: 1.25rem;
  color: #F9821A;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 2rem;
  padding-right: 2rem;
  margin-top: 3rem;
  margin-bottom: 3rem;
}

.yakult-logo a,.menmono-logo a {
  margin-top: 0.5%;
  margin-left: 3rem;
  font-size: 24px; /* IE8以下とAndroid4.3以下用フォールバック */
  font-size: calc(1rem + ((1vw - 6px) * 1.7391));/* 16px~24pxで可変*/
}

@media (min-width: 1060px) {/* 1060px以上*/
  .yakult-logo a,.menmono-logo a {
    font-size: 1.5rem;/* 24px*/
  }
}
@media screen and (max-width: 600px) {/* 600px以下*/
  .yakult-logo a,.menmono-logo a {
      font-size: 1.0rem;/* 16px*/
  }
}

@media screen and (max-width: 399px) {/* 399px以下*/
  .yakult-logo a,.menmono-logo a {
    margin-top: 2.5%;
    margin-left: 2rem;
  }
}

@media screen and (max-width: 384px) {/* 367px以下*/
  .yakult-logo a,.menmono-logo a {
    margin-left: 1rem;
  }
}

.factory-item {
  text-align: center;
  margin-top: 3rem;
}
.factory-item-title {
  font-size: 32px; /* IE8以下とAndroid4.3以下用フォールバック */
  font-size: calc(1.25rem + ((1vw - 6px) * 2.6087));/* 20px~32pxで可変*/
  margin: 0 auto;
  text-decoration: underline;
  text-decoration-color: #F67E7E;
  text-decoration-thickness: 0.95rem;
  text-underline-offset: -0.75rem;
  -moz-text-decoration-thickness: 0.95rem;
  -moz-text-underline-offset: -0.75rem;
}
.factory-item-title-2 {
  font-size: 32px; /* IE8以下とAndroid4.3以下用フォールバック */
  font-size: calc(1.25rem + ((1vw - 6px) * 2.6087));/* 20px~32pxで可変*/
  margin: 0 auto;
  text-decoration: underline;
  text-decoration-color: #8EDFF9;
  text-decoration-thickness: 0.95rem;
  text-underline-offset: -0.75rem;
}

@media (min-width: 1060px) {/* 1060px以上*/
  .factory-item-title,.factory-item-title-2 {
      font-size: 2rem;/* 32px*/
  }
}

@media screen and (max-width: 820px) {/* 820px以下*/
  .factory-item {
    margin-top: -2rem;
  }
}

@media screen and (max-width: 600px) {/* 600px以下*/
  .factory-item-title,.factory-item-title-2 {
      font-size: 1.25rem;/* 20px*/
      text-decoration-thickness: 0.15rem;
      text-underline-offset: -0.2rem;
      -moz-text-decoration-thickness: 0.15rem;
      -moz-text-underline-offset: -0.2rem;
  }
  .factory-item {
    margin-top: -1rem;
  }
  .factory-item p {
    font-size: 14px;
  }

}

@media (min-width: 890px) {/* 890px以上*/
  .br-factory {
    display: none;
  }
}

@media (max-width: 890px) {/* 890px以下*/
  .factory-item-title,.factory-item-title-2 {
    line-height: 2.5rem;
  }
}



.brand-logo-web {
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.brand-logo-web-kanmen {
  margin-top: 2rem;
  margin-bottom: 1rem;
}




@media screen and (max-width: 500px) {/* 500px以下*/
  .brand-logo-pc {
    display: none !important;
  }
}

@media (min-width: 501px) {/* 501px以上*/
  .brand-logo-sp {
    display: none !important;
  }
}


.brand-titile-web {
  font-weight: bold;
  margin-left: 1rem;
  font-size: 1.25rem;
}




.recipe-hr {
  margin-top: 5rem;
  margin-bottom: 5rem;
  height: 3px;
  background-color: #f8f4eb;
  border: none;
  color: #f8f4eb;
}

@media screen and (max-width: 600px) {/* 600px以下*/
  .recipe-hr {
    margin-top: 2rem;
    margin-bottom: 2rem;
  }
}


.item-list-wrapper {
  display: grid;
  /*grid-template-columns: repeat(auto-fit,minmax(80px,1fr));*/
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  gap:1rem;
  /*margin-top: 3rem;*/
}
.item-list,.item-list2  {
  text-align: center;
}
.item-list img,.item-list2 img {
  border-bottom: 1px solid #8E1111;
}

.item-list-wrapper2 {
  margin-top: 3rem;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  gap: 1rem;
}

.item-list-wrapper3 {
  margin-top: 3rem;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
}

.item-list-kanmen:hover,.item-list:hover {
  transform: scale(1.1);	/*画像の拡大率*/
  transition-duration: 0.3s;	/*変化に掛かる時間*/
}


@media screen and (max-width: 600px) {/* 600px以下*/
  .item-list p,.item-list2 p {
    font-size: 12px;
  }
  .item-list-wrapper {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  }
  .item-list-wrapper3 {
    grid-template-columns: 1fr 1fr;
  }
}





.list-kanmen-title-somen {
  position: relative;
  padding: 0.25em 1em;
  border-top: solid 2px #5BC2DC;
  border-bottom: solid 2px #5BC2DC;
  text-align: center;
  font-size: 18px;
  color: #333;
}
.list-kanmen-title-hiyamugi {
  position: relative;
  padding: 0.25em 1em;
  border-top: solid 2px #b9cc5b;
  border-bottom: solid 2px #b9cc5b;
  text-align: center;
  font-size: 18px;
  color: #333;
}
.list-kanmen-title-chumen {
  position: relative;
  padding: 0.25em 1em;
  border-top: solid 2px #ebc369;
  border-bottom: solid 2px #ebc369;
  text-align: center;
  font-size: 18px;
  color: #333;
}
.list-kanmen-title-udon {
  position: relative;
  padding: 0.25em 1em;
  border-top: solid 2px #c52e44;
  border-bottom: solid 2px #c52e44;
  text-align: center;
  font-size: 18px;
  color: #333;
}
.list-kanmen-title-soba {
  position: relative;
  padding: 0.25em 1em;
  border-top: solid 2px #7b593d;
  border-bottom: solid 2px #7b593d;
  text-align: center;
  font-size: 18px;
  color: #333;
}

.list-kanmen-title-somen:before, .list-kanmen-title-somen:after {
  content: '';
  position: absolute;
  top: -7px;
  width: 2px;
  height: -webkit-calc(100% + 14px);
  height: calc(100% + 14px);
  background-color: #707070;
}

.list-kanmen-title-hiyamugi:before, .list-kanmen-title-hiyamugi:after {
  content: '';
  position: absolute;
  top: -7px;
  width: 2px;
  height: -webkit-calc(100% + 14px);
  height: calc(100% + 14px);
  background-color: #707070;
}

.list-kanmen-title-chumen:before, .list-kanmen-title-chumen:after {
  content: '';
  position: absolute;
  top: -7px;
  width: 2px;
  height: -webkit-calc(100% + 14px);
  height: calc(100% + 14px);
  background-color: #707070;
}

.list-kanmen-title-udon:before, .list-kanmen-title-udon:after {
  content: '';
  position: absolute;
  top: -7px;
  width: 2px;
  height: -webkit-calc(100% + 14px);
  height: calc(100% + 14px);
  background-color: #707070;
}

.list-kanmen-title-soba:before, .list-kanmen-title-soba:after {
  content: '';
  position: absolute;
  top: -7px;
  width: 2px;
  height: -webkit-calc(100% + 14px);
  height: calc(100% + 14px);
  background-color: #707070;
}



.list-kanmen-title-somen:before,.list-kanmen-title-hiyamugi:before,.list-kanmen-title-chumen:before,.list-kanmen-title-udon:before,.list-kanmen-title-soba:before {
  left: 7px;
}
.list-kanmen-title-somen:after,.list-kanmen-title-hiyamugi:after,.list-kanmen-title-chumen:after,.list-kanmen-title-udon:after,.list-kanmen-title-soba:after {
  right: 7px;
}



@media screen and (max-width: 600px) {/* 600px以下*/
  .list-kanmen-title-somen {
    font-size: 16px;
  }
}



.item-list-kanmen {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap:1rem;
  margin-top: 3rem;
}

.kanmen-banner {
  margin-top: 3rem;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  max-width: 350px;
}

.banner-img {
  box-shadow: 2px 2px 4px gray;
}

@media screen and (max-width: 600px) {/* 600px以下*/
  .kanmen-banner {
    max-width: 300px;
  }
}





/*観光スポット*/

.title-img-wrapper-kanko {
  background-image: url(images/factory/kanko-top.jpg);
  background-size: cover;
  background-position: center;
  width: 100%;
}

.title-img-wrapper-kanko::before {
  content: '';
  display: block;
  padding-top: 40%;
}

@media screen and (max-width: 600px) {/* 600px以下*/
  .title-img-wrapper-kanko::before {
    padding-top: 60%;
  }
}

.kanko-title {
  text-align: center;
  margin-top: 3rem;
}
.kanko-title-1 {
  color: #72B647;
  font-size: 32px; /* IE8以下とAndroid4.3以下用フォールバック */
  font-size: calc(2rem + ((1vw - 6px) * -2.6087));/* 20px~32pxで可変*/
}
.kanko-title-2 {
  color: #72B647;
  font-size: 43px;/* IE8以下とAndroid4.3以下用フォールバック */
  font-size: calc(2.6875rem + ((1vw - 6px) * -3.6957));/* 26px~43pxで可変*/
  text-decoration: underline;
  text-decoration-color: yellow;
  text-decoration-thickness: 0.95rem;
  text-underline-offset: -0.75rem;
}


.kanko-title-3 {
  color: #72B647;
  font-size: 32px; /* IE8以下とAndroid4.3以下用フォールバック */
  font-size: calc(2rem + ((1vw - 6px) * -2.6087));/* 20px~32pxで可変*/
  text-decoration: underline;
  text-decoration-color: yellow;
  text-decoration-thickness: 0.85rem;
  /*text-underline-offset: -0.5rem;*/
  /*width: 25%;*/
  margin: 0 auto;
}


@media (min-width: 1060px) {/* 1060px以上*/
  .kanko-title-1,.kanko-title-3 {
      font-size: 2rem;/* 32px*/
  }
  .kanko-title-2 {
    font-size: 2.6875rem;/* 43px*/
  }
}
@media screen and (max-width: 600px) {/* 600px以下*/
  .kanko-title-1,.kanko-title-3 {
      font-size: 1.25rem;/* 20px*/
  }
  .kanko-title-3 {
    text-decoration-thickness: 0.15rem;
    text-underline-offset: -0.15rem;
    -moz-text-decoration-thickness: 0.15rem;
    -moz-text-underline-offset: -0.15rem;
    -webkit-text-decoration-thickness: 0.15rem;
    -webkit-text-underline-offset: -0.15rem;
  }
  .kanko-title-2 {
    font-size: 1.625rem;/* 26px*/
    text-decoration-thickness: 0.15rem;
    text-underline-offset: -0.15rem;
    -moz-text-decoration-thickness: 0.15rem;
    -moz-text-underline-offset: -0.15rem;
  }
  .kanko-title {
    margin-top: 1rem;
  }
}





.kanko-item-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(240px,1fr));
  gap:1rem;
  color: #ffffff;
  font-size: 2rem;
  margin-top: 3rem;
  margin-bottom: 5rem;
  text-align: center;
}



@media screen and (max-width: 511px) {/* 511px以下*/
  .kanko-item-wrapper {
    display: none;
  }
}

.kanko-item-wrapper-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(240px,1fr));
  gap:1rem;
  color: #ffffff;
  font-size: 1.5625rem;
  margin-top: 3rem;
  margin-bottom: 3rem;
  position: relative;
  padding-bottom : 1rem;
  border-bottom: 3px solid #E2D7D4;
  /*text-align: center;*/
}

.kanko-item-wrapper-2:before {
  position: absolute;
  bottom: -14px;
  left: 47%;
  width: 0;
  height: 0;
  content: '';
  border-width: 14px 20px 0 20px;
  border-style: solid;
  border-color: #E2D7D4 transparent transparent transparent;
}
.kanko-item-wrapper-2:after {
  position: absolute;
  bottom: -10px;
  left: 47%;
  width: 0;
  height: 0;
  content: '';
  border-width: 14px 20px 0 20px;
  border-style: solid;
  border-color: #fff transparent transparent transparent;
}

@media screen and (max-width: 511px) {/* 600px以下*/
  .kanko-item-wrapper-2 {
      gap: initial;
      margin-top: 1.5rem;
  }
}



.kanko-item-wrapper-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(240px,1fr));
  gap:1rem;
  color: #ffffff;
  font-size: 1.5625rem;
  margin-top: 3rem;
  margin-bottom: 5rem;
  /*text-align: center;*/
}

.kanko-item-wrapper-4 {
  /*display: grid;
  grid-template-columns: repeat(auto-fit,minmax(240px,1fr));
  gap:1rem; */
  color: #ffffff;
  font-size: 1.5625rem;
  margin-top: 3rem;
  margin-bottom: 5rem;
  text-align: center;
}

.kanko-item-wrapper-5 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(240px,1fr));
  gap:1rem;
  color: #ffffff;
  font-size: 1.5625rem;
  margin-top: 3rem;
  margin-bottom: 5rem;
  text-align: center;
}


@media screen and (min-width: 512px) {/* 512px以上*/
  .kanko-item-wrapper-4 {
    display: none;
  }
}


.item-asobu {
  background: #51D278;
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.item-asobu-2 {
  background: #51D278;
  padding-top: 1rem;
  padding-bottom: 1rem;
  padding-left: 1rem;
  padding-right: 1rem;
  max-height: 90px;
  max-width: 340px;
  display: flex;
  /*justify-content: space-evenly; */
}
.item-asobu-3 {
  background: #51D278;
  padding-top: 1rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  margin-bottom: 1rem;
  display: flex;
  justify-content: space-evenly;
}

/*.item-asobu-3:hover {
  background-color: #ffffff;
  color: #707070;
  transition: 0.1s;
  outline: 5px solid #51D278;
  outline-offset: -5px;
}*/

.item-asobu-3-2 {
  background: #BFFFD3;
  padding-top: 1rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  margin-bottom: 1rem;
  display: flex;
  justify-content: space-evenly;
}

.item-asobu-3-2:hover {
  background-color: #51D278;
  color: #ffffff;
  transition: 0.1s;
  outline: 5px solid #51D278;
  outline-offset: -5px;
}

/* .item-asobu-3,.item-taberu-3,.item-onsen-3 {
  padding-left: 2.5rem;
}
.kanko-category-3 {
  margin-left: 3.0rem;
}
.check-3 {
  margin-left: 3.0rem;
} */

.play-3,.eat-3 {
  font-size: 2.5rem;
}
.hotel-3 {
  font-size: 2.25rem;
}

.item-taberu {
  background: #F59D4F;
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.item-taberu-2 {
  background: #F59D4F;
  padding-top: 1rem;
  padding-bottom: 1rem;
  padding-left: 1rem;
  padding-right: 1rem;
  max-height: 90px;
  max-width: 340px;
  display: flex;
  /*justify-content: space-evenly; */
}
.item-taberu-3 {
  background: #F59D4F;
  padding-top: 1rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  margin-bottom: 1rem;
  display: flex;
  justify-content: space-evenly;
}
/*.item-taberu-3:hover {
  background-color: #F59D4F;;
  color: #ffffff;
  transition: 0.1s;
  outline: 5px solid #F59D4F;
  outline-offset: -5px;
}*/

.item-taberu-3-2 {
  background: #F9D8BB; /* #F59D4F; */
  padding-top: 1rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  margin-bottom: 1rem;
  display: flex;
  justify-content: space-evenly;
}
.item-taberu-3-2:hover {
  background-color: #F59D4F;;
  color: #ffffff;
  transition: 0.1s;
  outline: 5px solid #F59D4F;
  outline-offset: -5px;
}



.item-onsen {
  background: #5BC2DC;
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.item-onsen-2 {
  background: #5BC2DC;
  padding-top: 1rem;
  padding-bottom: 1rem;
  padding-left: 1rem;
  padding-right: 1rem;
  max-height: 90px;
  max-width: 340px;
  display: flex;
  /*justify-content: space-evenly; */
}
.item-onsen-3 {
  background: #5BC2DC;
  padding-top: 1rem;
  padding-bottom: 0.5rem;
  /*padding-left: 0.5rem; */
  padding-right: 0.25rem;
  margin-bottom: 1rem;
  display: flex;
  justify-content: space-evenly;
}
/*.item-onsen-3:hover {
  background-color: #5BC2DC;;
  color: #ffffff;
  transition: 0.1s;
  outline: 5px solid #5BC2DC;
  outline-offset: -5px;
}*/

.item-onsen-3-2 {
  background: #D4F6FF;/*#5BC2DC;*/
  padding-top: 1rem;
  padding-bottom: 0.5rem;
  /*padding-left: 0.5rem; */
  padding-right: 0.25rem;
  margin-bottom: 1rem;
  display: flex;
  justify-content: space-evenly;
}
.item-onsen-3-2:hover {
  background-color: #5BC2DC;;
  color: #ffffff;
  transition: 0.1s;
  outline: 5px solid #5BC2DC;
  outline-offset: -5px;
}


.check {
  background: #F9821A;
  color: #fff;
  font-size: 1rem;
  display: inline-block;
  height: 2rem;
  line-height: 2rem;
  padding: 0 1rem 0 1rem;
  position: relative;
  /*margin-left: 11rem;*/
}

.check::before {
  border: 1rem solid transparent;
  border-left-color: #F9821A;
  border-right-width: 0;
  content: '';
  display: block;
  height: 0;
  position: absolute;
  right: -1rem;
  top: 0;
  width: 0;
}

.check-2 {
  background: #F9821A;
  color: #fff;
  font-size: 1rem;
  display: inline-block;
  height: 2rem;
  line-height: 2rem;
  padding: 0 1rem 0 1rem;
  position: relative;
  /*margin-left: 11rem;*/
  margin-top: 0.5rem;
}

.check-2::before {
  border: 1rem solid transparent;
  border-left-color: #F9821A;
  border-right-width: 0;
  content: '';
  display: block;
  height: 0;
  position: absolute;
  right: -1rem;
  top: 0;
  width: 0;
}




.check-3 {
  background: #F9821A;
  color: #fff;
  font-size: 0.75rem;
  display: inline-block;
  height: 2rem;
  line-height: 2rem;
  margin-top: 5px;
  padding-top: 0;
  padding-left: 0.75rem;
  padding-bottom: 0;
  padding-right: 0.75rem;
  position: relative;
  /*margin-left: 11rem;*/
}

.check-3::before {
  border: 1rem solid transparent;
  border-left-color: #F9821A;
  border-right-width: 0;
  content: '';
  display: block;
  height: 0;
  position: absolute;
  right: -1rem;
  top: 0;
  width: 0;
}

.kanko-category {
  font-size: 32px; /* IE8以下とAndroid4.3以下用フォールバック */
  font-size: calc(1.5rem + ((1vw - 6px) * 1.7391));/* 24px~32pxで可変*/
}
@media (min-width: 1060px) {/* 1060px以上*/
  .kanko-category {
      font-size: 2rem;/* 32px*/
  }
}
@media screen and (max-width: 600px) {/* 600px以下*/
  .kanko-category {
      font-size: 1.5rem;/* 24px*/
  }
}


.kanko-category-3 {
  font-size: 1.25rem; /*20px IE8以下とAndroid4.3以下用フォールバック */
/*  font-size: calc(1.5rem + ((1vw - 6px) * 1.7391));/* 24px~32pxで可変*/
  margin-top: 3px;
  margin-left: 1rem;
}

.kanko-category-3-2 {
  font-size: 1.25rem; /*20px IE8以下とAndroid4.3以下用フォールバック */
/*  font-size: calc(1.5rem + ((1vw - 6px) * 1.7391));/* 24px~32pxで可変*/
  margin-top: 3px;
  margin-left: 1rem;
}

.kanko-category-3-3 {
  font-size: 1.25rem; /*20px IE8以下とAndroid4.3以下用フォールバック */
/*  font-size: calc(1.5rem + ((1vw - 6px) * 1.7391));/* 24px~32pxで可変*/
  margin-top: 3px;
}

.play,.eat,.hotel {
  font-size: 128px;/*IE8以下とAndroid4.3以下用フォールバック */
  font-size: calc(5rem + ((1vw - 6px) * 10.4348));/* 80px~128pxで可変*/
}
@media (min-width: 1060px) {/* 1060px以上*/
  .play,.eat,.hotel {
      font-size: 8rem;/* 128px*/
  }
}
@media screen and (max-width: 600px) {/* 600px以下*/
  .play,.eat,.hotel {
      font-size: 5rem;/* 80px*/
  }
}

.play-2,.eat-2,.hotel-2 {
  font-size: 50px;/*IE8以下とAndroid4.3以下用フォールバック */
  font-size: calc(1.875rem + ((1vw - 6px) * 4.3478)); /*80px~128pxで可変*/
}
@media (min-width: 1060px) {/* 1060px以上*/
  .play-2,.eat-2,.hotel-2 {
      font-size: 3.125rem;/* 50px*/
  }
}
@media screen and (max-width: 600px) {/* 600px以下*/
  .play-2,.eat-2,.hotel-2 {
      font-size: 1.875rem;/* 30px*/
  }
}

.kanko-category-2 {
  font-size: 24px; /*24px IE8以下とAndroid4.3以下用フォールバック */
  font-size: calc(1.25rem + ((1vw - 6px) * 0.8696));/* 20px~24pxで可変*/
/*  margin-left: 1rem;
  margin-right: 1rem; */
  margin-top: 0.5rem;
  margin-left: 1rem;
  margin-right: 1rem;
}
@media (min-width: 1060px) {/* 1060px以上*/
  .kanko-category-2 {
      font-size: 1.5rem;/* 24px*/
  }
}
@media screen and (max-width: 600px) {/* 600px以下*/
  .kanko-category-2 {
      font-size: 1.25rem;/* 20px*/
  }
}

.triangle {
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 5px solid #F9821A;
}


.kanko-content-title {
  font-size: 32px; /*IE8以下とAndroid4.3以下用フォールバック */
  font-size: calc(1.5rem + ((1vw - 6px) * 1.7391));/* 24px~32pxで可変*/
  text-decoration: underline;
  text-decoration-color: yellow;
  text-decoration-thickness: 0.85rem;
  text-underline-offset: -0.5rem;
  /*background: linear-gradient(transparent 70%, yellow 70%);*/
}
.kanko-content-title-2 {
  font-size: 32px; /* IE8以下とAndroid4.3以下用フォールバック */
  font-size: calc(1.5rem + ((1vw - 6px) * 1.7391));/* 24px~32pxで可変*/
  text-decoration: underline;
  text-decoration-color: yellow;
  text-decoration-thickness: 0.85rem;
  text-underline-offset: -0.5rem;
}


@media (min-width: 1060px) {/* 1060px以上*/
  .kanko-content-title,.kanko-content-title-2 {
      font-size: 2rem;/* 32px*/
  }
}
@media screen and (max-width: 600px) {/* 600px以下*/
  .kanko-content-title,.kanko-content-title-2 {
      font-size: 1.5rem;/* 24px*/
      text-decoration-thickness: 0.15rem;
      text-underline-offset: -0.15rem;
      -moz-text-decoration-thickness: 0.15rem;
      -moz-text-underline-offset: -0.15rem;
  }
  .kanko-text {
    font-size: 14px;
  }
}






.kanko-content-wrapper {
  margin-top: 3rem;
  margin-bottom: 3rem;
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(240px,1fr));
  gap:2rem;
}

.kanko-content-wrapper a {
  font-size: 14px;
}

.baroon,.exterior {
  margin-top: 1rem;
}

.kanko-content-text {
  order: 1;
}

.kanko-content-photo {
  order: 2;
  margin: 0 auto;
}

@media screen and (max-width: 528px) {/* 520px以下*/
  .kanko-content-photo,.kanko-content-text {
    order:initial;
  }
}

@media screen and (max-width: 600px) {/* 600px以下*/
  .kanko-content-text {
    font-size: 14px;
  }
  .kanko-content-wrapper a {
    font-size: 12px;
  }
}


.kanko-caution-wrapper {
  border: 3px solid #72B647;
  padding: 1rem;
  background-color: #ffffff;
  border-radius: 10px;
}
.kanko-caution {
  color: #000000;
}
.kanko-caution2 {
  color: #000000;
  font-size: 0.875rem;
}


@media screen and (max-width: 600px) {/* 600px以下*/
  .kanko-caution-wrapper {
    border: 3px solid #72B647;
    padding: 0.5rem;
  }
  .kanko-caution {
    font-size: 0.875rem;/* 14px*/
  }
  .kanko-caution2 {
    font-size: 0.75rem;/* 12px*/
  }

}


.spot-name {
  color: #72B647;
  font-size: 28px; /* IE8以下とAndroid4.3以下用フォールバック */
  font-size: calc(1.375rem + ((1vw - 6px) * 1.3043));/* 22px~28pxで可変*/
  margin-bottom: 1rem;
}

@media (min-width: 1060px) {/* 1060px以上*/
  .spot-name {
    font-size: 1.75rem;/* 28px*/
  }
}
@media screen and (max-width: 600px) {/* 600px以下*/
  .spot-name {
      font-size: 1.375rem;/* 22px*/
  }
}


.kanko-spot-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(240px,1fr));
  gap:1rem;
  margin-top: 2rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid #479825;
  padding-bottom: 2rem;
}
.kanko-spot-wrapper a {
  overflow-wrap: break-word;
}
@media screen and (max-width: 600px) {/* 600px以下*/
  .kanko-spot {
    font-size: 0.875rem;/* 14px*/
  }
}

.kanko-info {
  margin-top: 2rem;
}
.kanko-info a {
  color: #1a0dab;
}
.kanko-info a:hover  {
  text-decoration: underline;
}
.kanko-info a:visited {
  color: #660099;
}

.map {
  background-color: #72B467;
  color: #ffffff;
  font-size: 1rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  border-radius: 5px;
}
.car {
  background-color: #02ACE9;
  color: #ffffff;
  font-size: 1rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  border-radius: 5px;
}

@media screen and (min-width: 512px) {/* 512px以上*/
  .kanko-br {
    display: none;
  }
}



.page-number-wrapper {
  list-style: none;
  display: flex;
}

.page-number-active {
  background-color: #72B647;
  color: #ffffff;
  font-size: 1rem;
  width: 50px;
  height: 50px;
  border-radius: 10px;
  margin-right: 1rem;
  text-align: center;
  padding-top: 11px;
}

.aiue {
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.page-number {
  border: 1px solid #72B647;
  color: #707070;
  font-size: 1rem;
  width: 50px;
  height: 50px;
  border-radius: 10px;
  margin-right: 1rem;
  text-align: center;
  padding-top: 11px;
}

.page-number:hover {
  background-color: #72B647;
  color: #ffffff;
  transition: 0.3s
}


.page-next {
  color: #707070;
  font-size: 3rem;
  margin-top: 1.5rem;
}






/*フッター*/

footer {
  /*background-color: #A19583;*/
  background: #4d4d4d;
}

.f-home-content {
  max-width: 1060px;
  margin-top: 30px;
  margin-right: auto;
  margin-bottom: 30px;
  margin-left: auto;
  padding: 0 8px;
}


.f-wrapper {
  /*display: flex;
  justify-content: space-between;*/
  padding-top: 20px;
  /*padding-bottom: 20px;
  padding-left: 8px;
  padding-right: 8px;*/
  /*position: relative;*/
  /*display: flex;
  justify-content: space-between;*/
  /*width: 200%;*/
}



.f-info {
  color: #ffffff;
  margin-top: 1rem;
  text-align: center;
}
.f-name {
  padding-top: 1rem;
  margin-bottom: 30px;
}

.f-nav-sub {
  margin-top: 2rem;
}

.f-nav-sub a {
  position: relative;
  margin-left: 1rem;
}

.f-nav-sub a::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 1px;
	background-color: #D1C8C8;
	transform: scaleX(0);
	transition: transform 0.3s;
}

.f-nav-sub a:hover::after {
	transform: scaleX(1);
}

.f-link {
  background-color: #ffffff;
  /*width: 500px;*/
  padding: 1rem;
}

.f-link h3 {
  font-size: 0.875rem;
}

.f-link p {
  font-size: 12px;
}

.bg_border img {
  height: 100%;
}

.sns-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
  margin-bottom: 2rem;
  margin-left: auto;
  margin-right: auto;
}
.sns-facebook,.instagram,.twitter {
  height: 44px;
  width: 44px;
  margin-right: 10px;
}

.related-link-wrapper {
    display: flex;
}

.related-link-wrapper p {
    margin-bottom: 1rem;
}

.related-link-wrapper img {
    border: 0.1px solid #D1C8C8;
}

.banner-wrapper {
  /*display: flex;
  justify-content: space-evenly;*/
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(110px,1fr));
  grid-gap: 1rem;
  /*height: 100px;*/
  align-items: flex-end;
  justify-items: center;
}

.instantramennavi {
  max-width: 150px;
}


.f-copy {
  background-color: #E6373A;
  color: #ffffff;
  text-align: center;
  font-size: 12px;
}

@media screen and (min-width: 601px) {/* 600px以下*/
  .br-footer {
    display: none;
  }
}

@media screen and (max-width: 600px) {/* 600px以下*/
  .f-wrapper {
    display: initial;
  }
  .bg_border {
    display: none;
  }
  .f-link-wrapper {
    padding: initial;
  }
  .f-copy {
    font-size: 10px;
  }
  .f-info {
    margin-bottom: 1rem;
    font-size: 12px;
  }
  .f-home-content {
    margin-bottom: 8px;
  }
  .f-name {
    margin-bottom: 1rem;
    padding-top: 2rem;
  }
  /*.f-link h3 {
    font-size: 12px;
  }
  .f-link p {
    font-size: 10px;
  }*/
  .related-link-wrapper p {
    margin-bottom: 0.5rem;
  }
  .f-nav-sub {
    margin-top: 1rem;
  }

}


/*購入先バナー*/
@media (min-width: 1060px){
  .clearfix {
    content: "";
    display: block;
    clear: both;
  }
  
  .float-l {
    float:left;
  }
  .float-r {
    float:right;
  }
  
  .logo-product.float-l{
    width:60%;
    padding-right: 5%;
  }
  .product-buy-content-wrapper.float-l {
    width:40%;
    margin-top:2%;
  }
  .home-content.float-l {
    margin-top: -150px;
  }
  .home-content.float-l .product-link a {
    width:35%;
  }
}

@media (max-width: 1060px){
  .float-l {
    float:none;
  }
}

@media (max-width: 579px) {
  .product-buy-content-wrapper.float-l .buy-content-wrapper-product {
    display: block;
  }
}