#feat_sisalbag{
  width:90%;
  margin:0 auto;
  background-color:#fff;
  color: #333;
}

/* top */
.top-img img {
    display: block;
    width:100%;
    height: auto;
}
#feat_sisalbag h1{
    margin: 60px 40px 40px;
    padding-bottom: 20px;
    font-size: 140%;
    font-weight:bold;
    text-align: center;
}
#feat_sisalbag h1 span {
  display: inline-block;
  font-size: 85%;
  position: relative;
}
#feat_sisalbag h1 span:before {
  content: '';
  display: block;
  width: calc(100% + 1.5em);
  height: 1em;
  background: url(http://www.coffeeshopatagritopia.com/img_ori/topics/sisal/line.PNG) center top;
  background-repeat: repeat-x;
  background-size: 25px;
  position: absolute;
  top: -1em;
  left: -.75em;
}
#feat_sisalbag h1 span:after {
  content: '';
  display: block;
  width: calc(100% + 1.5em);
  height: 1em;
  background: url(http://www.coffeeshopatagritopia.com/img_ori/topics/sisal/line.PNG) center bottom;
  background-repeat: repeat-x;
  background-size: 25px;
  position: absolute;
  bottom: -1em;
  left: -.75em;
}
.shbag_feat_intro p {
  margin: 40px 60px;
  font-size: 16px;
  line-height: 20px;
  text-align: center;
}
/* 目次 */
#mag-content-list {
  width: 61%;
  margin: 40px auto;
  background: #F7F7F7;
  padding: 20px 0px;
}
#mag-content-list li:first-child {
  text-align: center;
  font-weight: bold;
  font-size: 14px;
}
#mag-content-list li {
  display: block;
  padding: 6px 0px;
  text-align: left;
  width: 80%;
  margin: 0 auto;
  font-size: 14px;
}
#mag-content-list a {
  text-decoration: none;
  color: #4d4d4d;
  position: relative;
  padding-left: 10px
}
#mag-content-list li a:before {
  content: "";
  position: absolute;
  top: .25em;
  left: 0;
  width: 0;
  height: 0;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent transparent #4d4d4d;
}

/* common */
.shbag_feat {
  padding: 20px 60px 40px;
  text-align: center;
}
.shbag_feat h2 {
  display: inline-block;
  margin-bottom: 25px;
  padding-bottom: 1em;
  background: url(http://www.coffeeshopatagritopia.com/img_ori/topics/sisal/line.PNG) center bottom;
  background-repeat: repeat-x;
  background-size: 25px;
  font-size: 120%;
  font-weight:bold;
  text-align: center;
  line-height: 2;
}
.shbag_feat h2 span {
  display: inline-block;
  font-size: 16px;
  color: #c8aa41;
  position: relative;
}
.shbag_feat h2 span:before {
  content: '';
  display: block;
  width: 1px;
  height: 1em;
  background: #c8aa41;
  position: absolute;
  top: .25em;
  left: -1em;
  transform: rotate(-30deg);
}
.shbag_feat h2 span:after {
  content: '';
  display: block;
  width: 1px;
  height: 1em;
  background: #c8aa41;
  position: absolute;
  top: .25em;
  right: -1em;
  transform: rotate(30deg);
}
.shbag_feat h3 {
  display: inline-block;
  margin: 0 0 1em;
  padding-bottom: .25em;
  border-bottom: dotted 3px #bbb;
  font-size: 115%;
  font-weight:bold;
  text-align: center;
  line-height: 2;
}
.shbag_feat h3 span:first-child {
  display: inline-block;
  font-family: 'Gotham Rounded SSm A','Gotham Rounded SSm B','Gotham Rounded A','Gotham Rounded B',sans-serif;
  font-size: 80%;
  font-weight: bold;
  color: #999;
  position: relative;
}
.shbag_feat h3 span:first-child:before {
  content: '';
  display: block;
  width: .5em;
  height: 1px;
  background: #999;
  position: absolute;
  top: 55%;
  left: -1em;
}
.shbag_feat h3 span:first-child:after {
  content: '';
  display: block;
  width: .5em;
  height: 1px;
  background: #999;
  position: absolute;
  top: 55%;
  right: -1em;
}
.shbag_feat h4 {
  font-size: 110%;
}
.shbag_feat p {
  font-size: 16px;
  text-align: left;
}


/* shbag_1 */
.shbag_feat.about .about-cnt{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  padding: 0 60px;
}
.shbag_feat.about .about-cnt img {
  display: block;
  width: 40%;
  height: auto;
}
.shbag_feat.about .about-cnt p {
  width: 55%;
  margin-left: 5%;
}


/* shbag_2 */
.shpoint_indiv_wrapper {
  display: flex;
  flex-wrap: nowrap;
  align-items: top;
}
.shpoint_indiv {
  width: 32%;
  padding: 1em;
  margin-right: 2%;
  margin-bottom: 40px;
  background: #f9e6d2;
  /* background: rgba(255,175,38,.25); */
  border-radius: 10px;
}
.shpoint_indiv:last-child {
  margin-right: 0;
}
.shpoint_indiv img {
  display: block;
  width: 100%;
  margin-bottom: 10px;
}
.shpoint_special {
  padding: 40px 60px;
  border: 4px dashed #ccc;
  border-radius: 5px;
}
.shpoint_special h3 {
  margin-bottom: 30px;
  padding-bottom: 0;
  border-bottom: none;
  position: relative;
}
.shpoint_special h3:before {
  content: '';
  display: block;
  width: 1em;
  height: 1em;
  background: #bbb;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: -1.5em;
  transform: translateY(-50%);
}
.shpoint_special h3:after {
  content: '';
  display: block;
  width: 1em;
  height: 1em;
  background: #bbb;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  right: -1.5em;
  transform: translateY(-50%);
}
.shpoint_special_cnt {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
}
.shpoint_special_cnt img {
  display: block;
  width: 40%;
  height: auto;
  margin-right: 20px;
}
.shpoint_special_cnt p {
  width: calc(60% - 20px);
  margin: 0;
}
.shpoint_special .advice {
  margin-top: 40px;
}
.shpoint_special .advice h4 {
  margin-bottom: 1em;
  padding: 10px 0px;
  font-weight: bold;
  color: #c8aa41;
  text-align: center;
  /* color: #ff7f2a; */
}
.shpoint_special .advice .advice_cnt {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  flex-direction: row-reverse;
}
.shpoint_special .advice .advice_cnt img {
  display: block;
  width: 40%;
  height: auto;
  margin-left: 20px;
}
.shpoint_special .advice .advice_cnt p {
  width: calc(60% - 20px);
  margin: 0;
}
/* .highlighter{
  background: linear-gradient(transparent 80%, #ffff99 80%);
  padding-bottom: 5px;
} */
mark {
  /* background: linear-gradient(transparent 80%, #ffff99 80%); */
  background: linear-gradient(transparent 55%, rgba(200,170,65,.6) 55%);
  text-decoration: none;
  font-weight: normal;
  font-style: normal;
}


/* shbag_3 */
.shpoint_indiv_wrapper {
  display: flex;
  flex-wrap: nowrap;
  align-items: top;
}
.shpoint_indiv2 {
  width: 32%;
  padding: 1em;
  margin-right: 2%;
  margin-bottom: 40px;
  background: #F5F5DC;
  /* background: rgba(255,175,38,.25); */
  border-radius: 10px;
}
.shpoint_indiv2:last-child {
  margin-right: 0;
}
.shpoint_indiv2 img {
  display: block;
  width: 100%;
  margin-bottom: 10px;
}
.shpoint_workshop_pc {
  padding: 40px 60px;
  border: 4px dashed #ccc;
  border-radius: 5px;
}
.shpoint_workshop_pc h3 {
  margin-bottom: 30px;
  padding-bottom: 0;
  border-bottom: none;
  position: relative;
}
.shpoint_workshop_pc h3:before {
  content: '';
  display: block;
  width: 1em;
  height: 1em;
  background: #bbb;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: -1.5em;
  transform: translateY(-50%);
}
.shpoint_workshop_pc h3:after {
  content: '';
  display: block;
  width: 1em;
  height: 1em;
  background: #bbb;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  right: -1.5em;
  transform: translateY(-50%);
}
.workshop_cnt {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
}
.workshop_cnt img {
  display: block;
  width: 40%;
  height: auto;
  margin-right: 20px;
}
.workshop_cnt p {
  width: calc(60% - 20px);
  margin: 0;
}
#workshop_link{
  margin-top: 1.5em;
  text-align: right;
}
#workshop_link a{
  display: inline-block;
  padding: .5em .75em .5em 1em;
  /* background-color: #90CC51; */
  background: #c8aa41;
  border-radius: 20px 0px 0px 20px;
  font-size: 14px;
  font-weight: bold;
  color: #fff;
  text-decoration: underline;
}


/* shbag_4,5 */
.shbag_feat.shpoints table th{
  font-size: 115%;
  font-weight: bold;
  color: #c8aa41;
  vertical-align: bottom;
  text-align: center;
  /* color: #ff7f2a; */
}
.shbag_feat.shpoints table td{
  vertical-align: middle;
  text-align: center;
  font-size: 14px;
  padding: 2px 0px;
}
/* .shbag_feat.shpoints table td.txt {
  padding: 2px 1em;
  text-align: left;
} */
.shbag_feat.shpoints table td img{
  width:85%;
  margin: 0 auto;
}

#shbag_button{
  text-align:center;
}
#btn-square-pop{
  position: relative;
  display: inline-block;
  width: 80%;
  padding: 7px 0 3px;
  text-decoration: none;
  color: #FFF;
  /*背景色*/
  background: rgba(200,170,65,.8);
  border-bottom: solid 2px #c8aa41;
  /* background: #fd9535; */
  /*少し濃い目の色に*/
  /* border-bottom: solid 2px #d27d00; */
  /*角の丸み*/
  border-radius: 4px;
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), 0 2px 2px rgba(0, 0, 0, 0.19);
  font-weight: bold;
  font-size:14px;
  text-align: center;
}
#btn-square-pop-sp:active {
  /* border-bottom: solid 2px #fd9535; */
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.30);
}

/* shbag_4 */
#shbag_4.shbag_feat.shpoints .table_wrapper {
  padding: 0 60px;
}
#shbag_4.shbag_feat.shpoints .table_wrapper table {
  margin-bottom: 40px;
}
#shbag_4.shbag_feat.shpoints .table_wrapper table:last-child {
  margin-bottom: 0;
}
#shbag_table_img{
  width: 40%;
  padding-right: 20px;
}
#shbag_table_img img{
  display: block;
  width: 85%;
  height: auto;
  margin: 0 auto;
}
#empty_space_pc{
  width:8vw;
}

/* shbag_5 */
#shbag_5.shbag_feat.shpoints .table_wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
}
#shbag_5.shbag_feat.shpoints .table_wrapper table {
  width: 49%;
  margin-right: 2%;
  margin-bottom: 40px;
}
#shbag_5.shbag_feat.shpoints .table_wrapper table:nth-child(2n) {
  margin-right: 0;
}
#shbag_5.shbag_feat.shpoints table:last-child {
  margin-bottom: 0;
}