@charset "UTF-8";
#tenohira * {
  box-sizing: border-box;
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  }

h1 {
  display: flex;
  align-items: center;
  gap: 10px;
flex-wrap: wrap;
  font-size: min(7.6vw, 46px);
line-height: 1em;
font-weight: bold;
margin: 0 15px;
padding: 15px 0;
}

h1 img {
width: calc(100% / 6);
  margin-bottom: 7px;
}

.col1 p {
  padding: 10px 10px;
  font-size: 18px;
font-weight: bold;
}
.item-list {
  display: flex;
  justify-content: center;
}
.item-list p {
  width: calc(100% / 2);
  background: url(../img/tenohira/li-bg.png) no-repeat;
  background-size: min(7.6vw, 35px);
  background-position-y: 9px;
font-weight: bold;
text-shadow: 0 0 1px black;
}

.text-box {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 1fr;
grid-column-gap: 20px;
grid-row-gap: 0px;
  align-items: center;
margin: 10px 20px;
}
.col1 { grid-area: 1 / 1 / 2 / 2; }
.col2 { grid-area: 1 / 2 / 2 / 3; }

.box01 {
  background: url(../img/tenohira/bg-main.png) repeat;
}

#tenohira .sec01 .box01 ul {
  padding: 2em;
  display: flex;
  flex-wrap: wrap;
  background: #000;
  justify-content: space-around;
}

#tenohira .sec01 .box01 ul li {
width: calc(95% / 4);
}

#tenohira .sec01 .box01 ul li a {
transition: all ease .3s;
}

#tenohira .sec01 .box01 ul li a:hover {
opacity: .6;
}

@media screen and (max-width: 750px) {
#tenohira .sec01 .box01 ul li {
  width: calc(95% / 4);
}
#tenohira .sec01 .box01 ul {
  padding: 1em;
}

}

#tenohira .sec01 .box02 ul li {
font-size: 15px;
position: relative;
}

#tenohira .sec01 .box02 ul li .txt {
width: 100%;
height: 100%;
padding: 2em 0 1em;
display: flex;
flex-direction: column;
position: relative;
justify-content: stretch;
}

#tenohira .sec01 .box02 ul li .txt .main {
width: 100%;
}

#tenohira .sec01 .box02 ul li .txt .main dt {
width: 47%;
margin-bottom: 0.5em;
padding: 0.3em 0.5em;
letter-spacing: 0.05em;
line-height: 1.3;
}

#tenohira .sec01 .box02 ul li .txt .main dt h2 {
  font-weight: bold;
  font-size: 40px;
}

#tenohira .sec01 .box02 ul li .txt .main dt span {
font-size: 16px;
display: block;
}

#tenohira .sec01 .box02 ul li#item01 .txt .main dt,
#tenohira .sec01 .box02 ul li#item03 .txt .main dt {
color: #fff;
background: #cc131a;
}

#tenohira .sec01 .box02 ul li#item02 .txt .main dt,
#tenohira .sec01 .box02 ul li#item04 .txt .main dt  {
color: #fff;
background: #c9890e;
}


#tenohira .sec01 .box02 ul li .txt .main dd {
width: 50%;
padding-left: 1em;
}

#tenohira .sec01 .box02 ul li .txt .main dd h3 {
font-size: 20px;
font-weight: bold;
margin-bottom: 1em;
}

#tenohira .sec01 .box02 ul li .txt .sub {
width: 80%;
}

#tenohira .sec01 .box02 ul li .txt .sub p {
padding-left: 1em;
font-size: 14px;
font-weight: bold;
}

#tenohira .sec01 .box02 ul li .txt .sub dl {
padding: 0.5em 1em;
color: #4d381d;
background: rgb(192 151 95 / 35%);
font-size: 14px;
font-weight: bold;
letter-spacing: 0.05em;
display: flex;
flex-wrap: wrap;
}

.tenohira-description.purple {
  background: #37355aa8;
  color: #fff;
}
.tenohira-description {
  width: 93%;
  margin: auto;
  padding: 15px 20px;
  box-sizing: border-box;
  font-size: 16px;
  position: relative;
}
#tenohira .sec01 .box02 ul li#item01 .tenohira-description,
#tenohira .sec01 .box02 ul li#item03 .tenohira-description {
background: #f4433678;
margin-top: 20px;
}

#tenohira .sec01 .box02 ul li#item02 .tenohira-description,
#tenohira .sec01 .box02 ul li#item04 .tenohira-description {
background: #f4bf2ead;
margin-top: 20px;
}


#tenohira .sec01 .box02 ul li.logo-change .txt {
padding: 1em 0 1em;
}

.mb15 {
margin-bottom: 15px;
}

#tenohira .sec01 .box02 ul li .txt .main .renji-icon img {
max-width: 110px;
}

.h1-box1{
  white-space: nowrap;
}

@media screen and (max-width: 750px) {
.h1-box1{
  display: block;
  white-space: normal;
}

#tenohira .sec01 .box02 ul li.logo-change .txt {
  padding: 1em 0 0;
}

#tenohira .sec01 .box02 ul li .txt .main .renji-icon {
  position: absolute;
}

#tenohira .sec01 .box02 ul li .txt .main .renji-icon img {
  max-width: 90px;
}
#tenohira .sec01 .box02 ul li .txt .main dt h2 {
  font-size: 34px;
}
}

.n-online_shop {
position: relative;
}

.n-online_shop .txt {
position: absolute;
text-align: center;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: min(4.6vw, 28px);
min-width: 280px;
font-weight: bold;
color: #fff;
background: rgba(0, 0, 0, 0.72);
padding: 0.3em 0.5em;
line-height: 1;
text-shadow: 0 0 5px #000;
}

#tenohira .sec01 .box02 ul li.bgimg1 {
background: url(../img/tenohira/bg-img1.jpg) repeat;
position: relative;
padding: 0 0 20px 0;
}

#tenohira .sec01 .box02 ul li.bgimg2 {
background: url(../img/tenohira/bg-img2.jpg) repeat;
position: relative;
padding: 0 0 20px 0;
}

#tenohira .sec01 .box02 ul li.bgimg3 {
background: url(../img/tenohira/bg-img3.jpg) repeat;
position: relative;
padding: 0 0 20px 0;
}

#tenohira .sec01 .box02 ul li.bgimg4 {
background: url(../img/tenohira/bg-img4.jpg) repeat;
position: relative;
padding: 0 0 20px 0;
}

.tenohira-description .spec {
  display: flex;
justify-content: space-around;
flex-wrap: wrap;
}

#tenohira .sec01 .box02 ul li figure {
  position: absolute;
  top: -10px;
  right: 0px;
  width: clamp(280px, 42%, 1000px);
}

#tenohira .sec01 .box02 ul li figure.pkg{
width: clamp(180px, 25%, 1000px);
top: 34%;
right: 27%;
z-index: 5;
}

figcaption {
  position: absolute;
  right: 23px;
  bottom: 60px;
  font-size: 18px;
  font-family: sans-serif !important;
}
figure.pkg.p2 {margin: 15px 5px 0 0;}

@media screen and (max-width: 750px) {
.mobile-hidden {
  display: none;
}

#tenohira .sec01 .box02 ul li {
  padding-bottom: 1.5em;
  background: #ecded1;
}

#tenohira .sec01 .box02 ul li figure.pkg {
  position: absolute;
      top: 37%;
      left: 7%;
      right: auto;
}

#tenohira .sec01 .box02 ul li .txt {
  width: 100%;
  padding: 0;
  position: unset;
}

#tenohira .sec01 .box02 ul li .txt .main dt {
  width: 100%;
  font-size: 20px;
}

#tenohira .sec01 .box02 ul li#item11 .txt .main dt {
  color: #fff;
  background: #ec7f9e;
}

#tenohira .sec01 .box02 ul li .txt .main dd {
width: 95%;
margin: 0 auto 1em;
padding: 0;
}

#tenohira .sec01 .box02 ul li .txt .sub {
  width: 90%;
  margin: 0 auto;
}

#tenohira .sec01 .box02 ul li .txt .sub p {
  margin-bottom: 0.3em;
  font-size: 14px;
  text-indent: -1em;
  line-height: 1.4;
}

#tenohira .sec01 .box02 ul li .txt .sub dl {
  color: #8e6b3c;
  background: none;
  border: 1px solid #8e6b3c;
  font-size: 14px;
  background-color: #fff;
}

h1 img {
width: calc(100% / 3);
  margin-bottom: 4px;
}

#tenohira .sec01 .box02 ul li figure {
        position: relative;
        top: -15px;
        right: -26%;
}
figcaption {bottom: 35px; font-size: 14px; font-weight: bold;}
/*figure.pkg.p2 {margin: 0;}*/

#tenohira .sec01 .box02 ul li#item04 figure.pkg {top: 36%;}

.tenohira-description .spec {justify-content: flex-start;}

.text-box {grid-template-columns: repeat(1, 1fr); margin: 15px 10px;}
.col1 {grid-area: 1 / 1 / 1 / 1;}
.col2 {grid-area: 2 / 1 / 2 / 1;}
}

.pc {display: block;}
.sp {display: none;}
@media(max-width:640px) {
.pc {display: none;}
.sp {display: block;}
}