@charset "utf-8";

/*
 common
========================================== */
body{color: #333;}
em{font-style:normal!important;}
dd{margin-left: 0!important;}
figure{margin: 0!important;}
.va-middle{vertical-align: middle !important;}
.ecm-wrap{line-height: 1.5;}
.marker{
  background:linear-gradient(transparent 60%, #fcff00 60%);
  font-weight:bold; 
}
.con03__detailCatch .marker{
  background:linear-gradient(transparent 50%, #fcff00 50%);
  font-weight:normal; 
}

/*
 ecm-kanban
========================================== */
.ecm-kanban.-soyguide{
  border-top:1px solid #cccccc;
  padding-top: 16px;
  margin-bottom: 3px;
}

/*
 title_ribbon
========================================== */
.title_ribbon{
  background-color: #876727;
}
.title_ribbon p{
  width:960px;
  margin:0 auto;
  font-size:16px;
  text-align: center;
  color:#ffffff;
  line-height: 1.5;
  padding:0.6em 0;
}

/*
 contents
========================================== */
.contents{
  position: relative;
}
.contents::before{
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index:-1;
}
.contents.con01::before{
  background-color: #fff7fa;
  background-image: radial-gradient(circle at left calc(50% + 378px) top 56px, white calc(530px / 2 - 1px), transparent calc(530px / 2));
}
.contents.con02::before{
  background-color: #f3f6ff;
  background-image: radial-gradient(circle at left calc(50% + 378px) top 56px, white calc(530px / 2 - 1px), transparent calc(530px / 2));
}
.contents.con03::before{
  background-color: #fff7fa;
  background-image: radial-gradient(circle at left calc(50% + 378px) top 56px, white calc(530px / 2 - 1px), transparent calc(530px / 2));
}
.contents.con04::before{
  background-color: #e7eaec;
  background-image: radial-gradient(circle at left calc(50% - 388px) top 56px, white calc(316px / 2 - 1px), transparent calc(316px / 2));
}
.contents.con05::before{
  background-color: #e2f3cd;
  background-image: radial-gradient(circle at left calc(50% - 388px) top 56px, white calc(316px / 2 - 1px), transparent calc(316px / 2));
}
.contents.con06::before{
  background-color: #fff5dd;
  background-image: radial-gradient(circle at left calc(50% - 388px) top 56px, white calc(316px / 2 - 1px), transparent calc(316px / 2));
}

.contents .ecm-container{
  position: relative;
  padding-top: 36px;
  padding-bottom: 85px;
}
.contents.con04 .ecm-container,
.contents.con05 .ecm-container,
.contents.con06 .ecm-container{padding-top: 32px;}
.contents.con01 .ecm-container:before{
  top:-203px;
  right:-163px;
}
.contents.con02 .ecm-container:before{
  top:-203px;
  right:-163px;
}
.con_ttl{
  display: flex;
  width:100%;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 48px;
}
.con_ttlTxt{
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 28px;
  line-height: 1.5;
}
.con_ttlTxt > span{font-size: 36px;}
.balloon_wrapper{
  width:700px;
  margin:0 auto;
}
.balloon_wrapper._large{width: 820px;}
.balloon_wrapper .ballon_con{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width:100%;
  gap: 30px;
}
.balloon_wrapper._large .ballon_con{align-items:flex-start;}
.balloon_wrapper .ballon_con + .ballon_con{
  margin-top: 15px;
}
.balloon_wrapper._large .ballon_con + .ballon_con{
  margin-top: -44px;
}
.balloon_wrapper .ballon_con ._txt{
  flex: 0 0 auto;
  border:2px solid #876727;
  border-radius: 7px;
  box-sizing: border-box;
  width:423px;
  padding:17px;
  text-align:center;
  color:#323333;
  font-size:18px;
  position: relative;
}

.balloon_wrapper .ballon_con ._txt:before{
  display: block;
  content:"";
  width: 0px;
  height: 0px;
  border-style:solid;
  border-color: transparent #876727 transparent transparent;
  border-width: 10px 14px 10px 0;
  position: absolute;
  top:24px;
  left:-14px;
  z-index: -1;
}
.balloon_wrapper .ballon_con ._txt:after{
  display: block;
  content:"";
  width: 0px;
  height: 0px;
  border-style:solid;
  border-color: transparent #cccccc transparent transparent;
  border-width: 10px 14px 10px 0;
  position: absolute;
  top:24px;
  left:-11px;
  z-index: 1;
}

.balloon_wrapper .ballon_con:nth-child(odd){
  flex-direction: row;
}
.balloon_wrapper .ballon_con:nth-child(even) {
  flex-direction: row-reverse;
}
.balloon_wrapper .ballon_con:nth-child(odd) ._txt{
  background-color: #fdf4e0;
}
.balloon_wrapper .ballon_con:nth-child(even) ._txt{
  background-color: #fceaeb;
}
.balloon_wrapper .ballon_con:nth-child(odd) ._txt:after{
  border-right-color: #fdf4e0;
}
.balloon_wrapper .ballon_con:nth-child(even) ._txt:before{
  left:auto;
  right:-14px;
  transform: rotate(180deg);
}
.balloon_wrapper .ballon_con:nth-child(even) ._txt:after{
  border-right-color: #fceaeb;
  left:auto;
  right:-11px;
  transform: rotate(180deg);
}
.linkBtn{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 427px;
  margin: 0 auto;
  height: 125px;
  border-radius: 65px;
  background-color: #8c6800;
  box-shadow: 0 5px 0 #6f5301;
  text-align: center;
  position: relative;
  color: #fff!important;
}
.linkBtn::after{
  content: '';
  display: block;
  width: 18px;
  height: 18px;
  border-right:solid 2px #fff;
  border-bottom:solid 2px #fff;
  transform:rotate(-45deg);
  position: absolute;
  top: 50%;
  margin-top: -9px;
  right: 25px;
}
.linkBtn .btn__text{
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 0;
  margin-right: 12px;
}
.linkBtn:hover{
  opacity:.8;
  text-decoration: none !important;
}

.con01__illustArea{
  position: relative;
  margin-top: -68px;
  margin-bottom: 40px;
}
.con01__illustText{
  width: 555px;
  font-size: 26px;
  line-height: 1.384;
  text-align: center;
  position: absolute;
  top: 228px;
  left: 90px;
}
.con01__illustText > .large{
  font-weight: bold;
  font-size: 52px;
  color: #bf0000;
}
.con02__illustArea{
  position: relative;
  margin-top: 36px;
  margin-bottom: 40px;
}
.con02__illustText{
  width: 100%;
  font-size: 22px;
  line-height: 1.5;
  text-align: center;
  position: absolute;
  top: 36px;
  left:0;
}
.con02__illustText > .large{
  font-weight: bold;
  font-size: 36px;
  color: #8c6800;
}
.con03__detail{
  background-color: #fff;
  border:solid 2px #8c6800;
  border-radius: 23px;
  padding: 38px;
  box-sizing: border-box;
  margin-top: 40px;
  margin-bottom: 40px;
}
.con03__detailTitle{
  font-size: 22px;
  text-align: center;
}
.con03__detailTitle > .large{
  font-size: 36px;
  font-weight: bold;
  color: #8c6800;
}
.con03__genealogy01 {
  display: table;
  position: relative;
  margin: 0 auto 20px;
}
.con03__genealogy01 > dl {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  padding: 90px 0px 0px;
  margin: 0px;
}
.con03__genealogy01 > dl::after {
  position: absolute;
  top: 90px;
  left: 142px;
  right: 142px;
  height: 22px;
  background:
        linear-gradient(to right, #9e9e9e 0%, #9e9e9e 100%) top center / 4px 100% no-repeat,
        linear-gradient(to right, #9e9e9e 0%, #9e9e9e 100%) bottom  left / 100% 4px no-repeat;
  content: "";
}
.con03__genealogy01 > dl > dt,
.con03__genealogy01 > dl > dd {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 90px;
  box-sizing: border-box;
  text-align: center;
  line-height: 1.3;
  background-color: #bf0000;
  border-radius: 7px;
}
.con03__genealogy01 > dl > dt {
  position: absolute;
  width: 380px;
  top: 0px;
  left: 50%;
  transform: translateX(-50%);
}
.con03__genealogy01 > dl > dd {
  width: 288px;
  position: relative;
  padding: 0px;
  margin-top: 40px;
  margin-right: 16px;
}
.con03__genealogy01 > dl > dd:nth-child(3){width: 272px;}
.con03__genealogy01 > dl > dd:last-child{margin-right: 0;}
.con03__genealogy01 > dl > dd::before {
  position: absolute;
  top: -18px;
  left: 0;
  width: 100%;
  height: 18px;
  background:
        linear-gradient(to right, #9e9e9e 0%, #9e9e9e 100%) top center / 4px 100% no-repeat;
    overflow: hidden;
    content: "";
}
.con03__genealogy01 .prizeName{
  font-weight: bold;
  color: #fff;
  letter-spacing: -0.04em;
}
.con03__genealogy01 dt .prizeName{font-size: 20px;}
.con03__genealogy01 dd .prizeName{font-size: 18px;}
.con03__genealogy01 .prizeName > span{font-size: 160%;}

.con03__genealogy02{
  width: 256px;
  margin: 0 auto;
  position: relative;
}
.con03__genealogy02 ul{
  position: relative;
  padding-left: 9px;
  height: 210px;
}
.con03__genealogy02 ul::before{
  content: '';
  background-color: #9e9e9e;
  width: 2px;
  height: 175px;
  position: absolute;
  top: 20px;
  left: 9px;
}
/*.detail__special*/ .con03__genealogy02 ul::before{
  height: 143px;
  top: 52px;
}
.con03__genealogy02 ul::after{
  content: '';
  background: url(https://r.r10s.jp/evt/event/soyshop/guide/_pc/img/20230731/omit.png?v=202601151549) no-repeat;
  width: 33px;
  height: 16px;
  left: 0;
  bottom: 0;
  display: block;
  position: absolute;
}
.con03__genealogy02 ul > li{
  width: 230px;
  position: relative;
  box-sizing: border-box;
  margin-left: 16px;
}


.con03__genealogy02 ul > li::before{
  content: '';
  width: 16px;
  height: 2px;
  position: absolute;
  background-color: #9e9e9e;
  left: -16px;
}
.con03__genealogy02Ttl{
  margin-bottom: 24px;
  padding-right: 16px;
}
.con03__genealogy02 ul > li.con03__genealogy02Ttl{
  padding: 0;
  margin-left: 0;
  width: 256px;
}
.con03__genealogy02Ttl::before{
  top: 20px;
}
.con03__genealogy02Ttl::before{display: none;}
.con03__genealogy02List{
  display: flex;
  align-items: center;
  height: 35px;
  border-radius: 3px;
  padding-left: 6px;
  background-color: #fff8da;
}
.con03__genealogy02 ul > li > p{font-size: 14px;}
.con03__genealogy02Ttl > p{
  text-align: center;
  letter-spacing: -0.04em;
}
.con03__genealogy02List > p{padding-left: 8px;}
.con03__genealogy02OtherTxt{
  font-size: 14px;
  text-align: right;
  position: absolute;
  bottom: 0;
  right: 0;
}
.commendation__icon{
  text-align: center;
  margin-left: 40px;
  margin-bottom: 28px;
}

.con03__detail .ecm-view-more-button,
.con03__detail .ecm-view-less-button{
  width: 100%;
  justify-content: center;
  align-items: center;
  height: 65px;
  font-size: 22px;
  font-weight: bold;
  color: #fff;
  background-color: #8c6800;
  position: relative;
}
.con03__detail .ecm-view-more-button::after{
  content: '';
  position: absolute;
  width: 21px;
  height: 21px;
  border-right:solid 5px #fff;
  border-bottom:solid 5px #fff;
  transform:rotate(45deg);
  top: 17px;
  right: 23px;
}
.con03__detail .ecm-view-less-button::after{
  content: '';
  position: absolute;
  width: 21px;
  height: 21px;
  border-right:solid 5px #fff;
  border-top:solid 5px #fff;
  transform:rotate(-45deg);
  top: 26px;
  right: 23px;
}
.con03__detailCatch{
  font-size: 18px;
  text-align: center;
}

.detail__Parent,
.detail__child > ul{
  display: flex;
  flex-wrap:wrap;
}
.detail__genre{
  width: 290px;
  position: relative;
}

.detail__child{width:calc(100% - 290px);}
.detail__service,
.detail__special{
  width: 295px;
  position: relative;
}
.detail__genre::after,
.detail__service::after{
  content: '';
  position: absolute;
  width: 3px;
  height: 100%;
  background: url(https://r.r10s.jp/evt/event/soyshop/guide/_pc/img/20230731/border.png?v=202601151549) repeat-y right top;
  top: 0;
  right: 0;
}
.prizeIcon{
  text-align: center;
  margin-bottom: 13px;
}
.emblemWrap{
  width: 860px;
  margin: 0 auto 20px;
}
.emblemWrap .d-grid-col-3{
  gap:3px;
}

.article__heading[data-layout=other] {
  font-size: 26px;
  text-align: center;
  color: #8c6800;
  margin-bottom: 36px;
  line-height: 1.5;
}
.article__heading[data-layout=other]:before {
  content: "";
  display: block;
  background-image: url(data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20id%3D%22_%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_2%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20108.26%2024%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23876727%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22_%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1-2%22%3E%3Ccircle%20class%3D%22cls-1%22%20cx%3D%22102.76%22%20cy%3D%2218.5%22%20r%3D%225.5%22%2F%3E%3Ccircle%20class%3D%22cls-1%22%20cx%3D%2286.55%22%20cy%3D%2212.5%22%20r%3D%225.5%22%2F%3E%3Ccircle%20class%3D%22cls-1%22%20cx%3D%2270.34%22%20cy%3D%226.5%22%20r%3D%225.5%22%2F%3E%3Ccircle%20class%3D%22cls-1%22%20cx%3D%2254.13%22%20cy%3D%225.5%22%20r%3D%225.5%22%2F%3E%3Ccircle%20class%3D%22cls-1%22%20cx%3D%2237.92%22%20cy%3D%226.5%22%20r%3D%225.5%22%2F%3E%3Ccircle%20class%3D%22cls-1%22%20cx%3D%2221.71%22%20cy%3D%2212.5%22%20r%3D%225.5%22%2F%3E%3Ccircle%20class%3D%22cls-1%22%20cx%3D%225.5%22%20cy%3D%2218.5%22%20r%3D%225.5%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E);
  background-repeat: no-repeat;
  width: 69px;
  height: 16px;
  margin-bottom: 4px;
  margin-left:286px;
}

.nav_wrap .nav a{
  display: block;
  width:100%;
  height: 346px;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}

.nav_wrap .nav a:hover{
  opacity:0.8;
}
.nav_wrap .nav.-soa a{background-color: #e7eaec;}
.nav_wrap .nav.-som a{background-color: #e2f3cd;}
.nav_wrap .nav.-gekkan a{background-color: #fff5dd;}
.nav_wrap .nav a .anchor-icon{
  padding: 16px 0;
  text-align: center;
}

.nav_wrap .nav a .anchor-paragragh{
  text-align: center;
  font-size:16px;
  color:#333333;
  margin-bottom: 16px;
}
.nav_wrap .nav a .anchor-award{
  text-align: center;
  font-size:18px;
  font-weight: bold;
  line-height: 1.92;
  color:#333333;
  width:272px;
  height:1.92em;
  border-radius: 6px;
  background-color: #ffffff;
  margin:0 auto 16px;
}

.nav_wrap .nav a .anchor-detail__paragragh{
  background-color: #8c6800;
  height: 50px;
  width:100%;
  font-size:22px;
  line-height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  text-align: center;
  color:#ffffff;
  position: absolute;
  bottom:0;
  left:0;
}

.nav_wrap .nav a .anchor-detail__paragragh .ecm-icon-chevron-down{
  line-height: inherit;
  font-weight: bold;
  margin-left: 0.2em;
}
.nav_wrap .nav a .anchor-detail__paragragh .ecm-icon-chevron-down:before{
  line-height: inherit;
  font-weight: bold !important;
  font-size:120%;
}


.con04 .soyTxt{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 576px;
  height: 70px;
  margin: 0 auto 80px;
  font-size: 26px;
  font-weight: bold;
  color: #fff;
  background-color: #8c6800;
  border-radius: 7px;
  position: relative;
}
.con04 .soyTxt::after{
  content: '';
  width: 8px;
  height: 80px;
  background-color: #9e9e9e;
  left:calc(50% - 4px);
  bottom: -80px;
  position: absolute;
}
.con04 .soa__detail{
  border-radius: 14px;
  background-color: #fff;
}
.con04 .soa__detailTtl{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 60px;
  border-radius: 14px 14px 0 0;
  background-color: #bf0000;
  font-size: 22px;
  font-weight: bold;
  text-align: center;
  color: #fff;
}

.con04__genealogy {
  display: table;
  position: relative;
  padding: 40px;
  margin: 0 auto 40px;
}
.con04__genealogy > dl {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  margin: 0px;
  padding-top: 119px;
}
.con04__genealogy > dl::after {
  position: absolute;
  top: 100px;
  left: 54px;
  right: 54px;
  height: 23px;
  background:
        linear-gradient(to right, #9e9e9e 0%, #9e9e9e 100%) top center / 4px 100% no-repeat,
        linear-gradient(to right, #9e9e9e 0%, #9e9e9e 100%) bottom  left / 100% 4px no-repeat;
  content: "";
}

.con04__genealogy > dl > dt {
  position: absolute;
  width: 100px;
  top: 0px;
  left: 50%;
  transform: translateX(-50%);
}
.con04__genealogy > dl > dd {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 112px;
  height: 110px;
  margin-top: 36px;
  margin-right: 16px;
  box-sizing: border-box;
  border:solid 2px #8c6800;
  border-radius: 7px;
  background-color: #fff;
}
.con04__genealogy > dl > dd:last-child{margin-right: 0;}
.con04__genealogy > dl > dd::before {
  position: absolute;
  top: -36px;
  left: 0;
  width: 100%;
  height: 36px;
  background:
        linear-gradient(to right, #9e9e9e 0%, #9e9e9e 100%) top center / 4px 100% no-repeat;
    overflow: hidden;
    content: "";
}
.con04__genealogy .mapIcon{
  position: absolute;
  width: 113px;
  height: 106px;
  top: 0;
  left: 110px;
}
.con04__genealogy .areaName{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 52px;
  margin-bottom: 8px;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  color: #8c6800;
}
.con04__genealogy .areaName > span{display: block;}
.con04__genealogy .shopQty{
  font-size: 14px;
  text-align: center;
}

.con05 .som__detail{
  border-radius: 14px;
  background-color: #fff;
}
.con05 .som__detailTtl{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 60px;
  border-radius: 14px 14px 0 0;
  background-color: #bf0000;
  font-size: 22px;
  font-weight: bold;
  text-align: center;
  color: #fff;
}

.con05__genealogy {
  display: block;
  position: relative;
  padding: 40px;
  margin: 0 auto 40px;
}
.con05__genealogy > dl {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  margin: 0px;
  padding-top: 100px;
}

.con05__genealogy > dl > dt {
  position: absolute;
  width: 100px;
  top: 0px;
  left: 50%;
  transform: translateX(-50%);
}
.con05__genealogy > dl > dd {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  position: relative;
  margin-top: 36px;
  box-sizing: border-box;
  width:100%;
  gap: 20px 18px;
}

.con05__genealogy > dl > dd > div{
  border:2px solid #bf0000;
  border-radius: 8px;
  width:280px;
  height: 122px;
  padding:18px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.con05__genealogy > dl > dd > div .awardName{
  text-align: center;
  color:#bf0000;
  font-size:26px;
  font-weight: bold;
  line-height: 1.15;
}
.con05__genealogy > dl > dd > div .awardAlt{
  font-size:14px;
  color:#333333;
  text-align: center;
}

.con05__genealogy .calenderIcon{
  position: absolute;
  width:82px;
  height:77px;
  top: 12px;
  left: 123px;
}
.con05__genealogy .areaName{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 52px;
  margin-bottom: 8px;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  color: #8c6800;
}
.con05__genealogy .areaName > span{display: block;}
.con05__genealogy .shopQty{
  font-size: 14px;
  text-align: center;
}

.gekkan_img{
  margin-bottom: 40px;
}

.gekkan_paragragh{
  font-size:18px;
  text-align: center;
  color:#8c6800;
  margin-bottom: 36px;
}
.gekkan_paragragh img{
  margin:0 0.6em;
}
.capture_ttl{
  font-size:16px;
  color:#333333;
  width:636px;
  margin:0 auto 8px;
}
.gekkan_capture{
  text-align: center;
  margin:0 auto;
}


/* animations */

.fadein {opacity : 0; transition: 1s;}
.fadein.on {opacity : 1; transform : translate(0, 0);}
.fadein._multi {opacity : 1; }
.fadein._multi > * {opacity : 0; transition: 1s;}
.fadein._multi.on > * {opacity : 1; transform : translate(0, 0);}
.fadein.on.delay {transition-delay: .5s;}
.fadein.on.l_delay {transition-delay: 1s;}
.fade_left {transform : translate(-80px, 0);}
.fade_right {transform : translate(80px, 0);}
.fade_up {transform : translate(0, 80px);}
._multi.fade_up > * {transform : translate(0, 80px);}
.fade_scale {transform: scale(0.5,0.5);}

._multi.fade_up > *:nth-child(2){transition-delay: 0.2s;}
._multi.fade_up > *:nth-child(3){transition-delay: 0.4s;}


@-webkit-keyframes slideUp {
0% {
-webkit-transform:translateY(0%);
transform:translateY(0%);
}
100% {
-webkit-transform: translateY(-20%);
transform:translateY(-20%);
}
}

@keyframes slideUp { 
0% {
-webkit-transform:translateY(0%);
transform:translateY(0%);
}
100% {
-webkit-transform: translateY(-20%);
transform:translateY(-20%);
}
}
@-webkit-keyframes slideDown {
0% {
    -webkit-transform:translateY(0%);
    transform:translateY(0%); 
}
100% {
   -webkit-transform: translateY(20%);
    transform:translateY(20%);
}
}

@keyframes slideDown { 
    0% {
        -webkit-transform:translateY(0%);
        transform:translateY(0%); 
    }
    100% {
       -webkit-transform: translateY(20%);
        transform:translateY(20%);
    }
}