.dokodemo-tri-banner{
  width:100%;
  display:block;
  position:relative;
  padding:30px 0;
  text-align: center;
}


.dokodemo-tri-banner-inner{
  width:96%;
  max-width:1200px;
  margin-left:auto;
  margin-right:auto;
  background-color: #FFF9E0;
  border: 2px solid #FAC712;
  padding: 20px;
  border-radius: 20px;
}

.dokodemo-tri-banner-bigtitle{
  width:100%;
  display:block;
  position:relative;
  text-align: center;

}

.dokodemo-tri-banner-bigtitle .main-text{
  font-size: 26px;
  text-align: center;
  font-family: "Zen Maru Gothic", "Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  color:#613102;
  font-weight:500;
  display:inline-block;
  position: relative;
}

.dokodemo-tri-banner-bigtitle .main-text::before {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 100%;
  display:block;
  height:10px;
  background-image: radial-gradient(circle, #F1A127 40%, transparent 40%);
  background-position: bottom;
  background-size: 8px 6px; /* 丸のサイズと間隔 */
  background-repeat: repeat-x;
}

.dokodemo-tri-banner-bigtitle .pop-left{
  display:block;
  width:30px;
  height:40px;
  background-image:url(/upload/tenant_1/pop01.webp);
  background-size:contain;
  background-position:center;
  background-repeat:no-repeat;
  position:absolute;
  top:50%;
  right:calc(100% + 5px);
  transform:translateY(-50%);
}

.dokodemo-tri-banner-bigtitle .pop-right{
  display:block;
  width:30px;
  height:40px;
  background-image:url(/upload/tenant_1/pop02.webp);
  background-size:contain;
  background-position:center;
  background-repeat:no-repeat;
  position:absolute;
  top:50%;
  left:calc(100% + 5px);
  transform:translateY(-50%);
}

.tri-minitxt.mini01{
  margin-top:20px;
  text-align: center;
  font-size:18px;
  font-weight:500;
}

.tri-minitxt.mini02{
  margin-top:20px;
  font-size: 22px;
  font-weight: 600;
  text-align: center;
  position:relative;
  line-height:1.5;
  
}


.tri-banner-list{
  margin-top:20px;
  display:flex;
  justify-content: space-between;
  width:100%;
  flex-wrap:wrap;
  list-style-type: none;
}

.tri-banner-card{
  width:32%;
  display:block;
}

.tri-banner-inner{
  display:block;
  width:100%;
  height:100%;
}

.tri-banner-name{
  width:100%;
  display:block;
  text-align: center;
}

.tri-banner-name>img{
  width:100%;
  max-width:200px;
  height:60px;
  display:inline-block;
  object-position:center;
  object-fit:contain;
}

.tri-banner-txt{
  font-weight:500;
  line-height:1.5;
  margin-top:1em;
  width:100%;
  text-align: left;
}

.tri-banner-img-box{
  margin-top:1em;
  position:relative;
  width:100%;
}

.tri-banner-img-box::before{
  content:"";
  width:100%;
  display:block;
  position:relative;
  padding-top:60%;
}

.tri-banner-img.img01{
  min-width:60%;
  max-width:100%;
  height:80%;
  position:absolute;
  bottom:0;
  left:0;
  z-index:2;
}

.tri-banner-img.img02{
  min-width:60%;
  max-width:100%;
  height:80%;
  position:absolute;
  top:0;
  right:0;
  z-index:1;
  opacity:0.6;
}

.tri-banner-img-box img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  filter: drop-shadow(0 0 0.2em #000);
}

.tri-banner-img.img01:hover{
  transform:scale(1.1) rotate(-3deg);
}

.tri-banner-img.img02:hover{
  transform:scale(1.1) rotate(3deg);
  z-index:2;
  opacity:1;
}

.dokodemo-tri-minibtn{
  margin-top:1em;
}

.up-d_banner-item, div[data-hide-element]{
  width:100%;
  display:block;
  margin-top:50px;
}

.dokodemo-tri-minibtn a{
  width:100%;
}

.dokodemo-tri-minibtn.minibtn01 a{
  background-color:#37475A;
  border: 1px solid #37475A;
}

.dokodemo-tri-minibtn a>span.amazon{
  display:inline-block;
  font-size:1.2em;
  line-height:1em;
  vertical-align:5%;
  margin:0;
  position:relative;
  border-bottom:2px solid orange;
}


.dokodemo-tri-minibtn.minibtn02 a{
      background-color: #DC5F53;
    border: 1px solid #DC5F53;
}

.price-tag{
  display:flex;
  justify-content: center;
  margin-top:10px;
  margin-right:0;
  margin-left:auto;
}

.tag-inner{
  display:flex;
  align-items: center;
  justify-content:center;
  position:relative;
  background-color:#fff;
  border-radius:10px;
  padding:6px 15px;
  border: 2px solid #aaa;
    filter: drop-shadow(0 0 0.2em #aaa);
  position:relative;
  z-index:2;
}

.price-tag .dt{
  font-size:16px;
  line-height:1.3;
  font-weight:500;
  padding-right:15px;
  padding-top:6px;
  padding-bottom:6px;
  margin-right:15px;
  border-right:4px dotted #F1A127;
}

.price-tag .dd{
  font-weight:600;
  font-size:30px;
  color:#F1A127;
}

@media (max-width: 991px) {
  span.br{
  display:block;
  }
.tri-banner-img-box::before{
  padding-top:130%;
}

.tri-banner-img.img01{
  height:50%;
  bottom:auto;
  top:0;
  width:100%;
}

.tri-banner-img.img02 {
  height:45%;
  bottom:auto;
  top:auto;
  bottom:0;
  width:100%;
  opacity:1;
}

.tag-inner{
  padding:4px 10px;
  border: 2px solid #aaa;
}

.price-tag .dt{
  font-size:13px;
  padding-right:10px;
  padding-top:4px;
  padding-bottom:4px;
  margin-right:10px;
  letter-spacing:-.05em;
}

.price-tag .dd{
  font-size:26px;
}



}

@media (max-width: 768px) {
  .dokodemo-tri-banner-inner{
    padding:20px 10px;
  }
  
  .tri-banner-card {
    width: 100%;
  }
    
  .dokodemo-tri-banner-bigtitle .main-text{
    font-size:18px;
    letter-spacing:-.05em;
  }
  
  .dokodemo-tri-banner-bigtitle .pop-left {
    width:20px;
    right:100%;
  }

  .dokodemo-tri-banner-bigtitle .pop-right {
    width:20px;
    left:100%;
  }
  
  .tri-minitxt.mini01 {
    margin-top: 30px;
    text-align: center;
    font-size: 13px;
  }
  
  .tri-minitxt.mini02 {
    margin-top: 10px;
    font-size: 14px;
    letter-spacing:-.05em;
  }

  .tri-banner-list{
    margin-top:30px;
  }
  
  .tri-banner-card+.tri-banner-card{
    padding-top:25px;
    margin-top:25px;
    border-top: 4px dotted #F1A127;
  }

  .tri-banner-name>img {
    width: 100%;
    max-width: 250px;
    height: auto;
  }

  .tri-banner-txt {
    line-height: 1.3;
    margin-top: 10px;
    text-align:center;
  }
  
  .tri-banner-img-box::before {
    padding-top: 70%;
  }
  
  .tri-banner-img.img01{
    width:auto;
    height: 80%;
    bottom: 0;
    top:auto;
  }
  
  .tri-banner-img.img02{
    width:auto;
    height: 80%;
    bottom: auto;
    top:0;
    opacity: 0.6;
  }  
}