@charset "utf-8";

#contents {
  padding-bottom: 48px;
}

#contents nav[role="local"] {
  margin: 0 -16px 0;
}

#contents nav[role="local"] ul {
  border-bottom-color: #d2d1d6;
}

#contents nav[role="local"] ul li a[class*="mdi-"]:before {
  color: #000;
}

#contents nav[role="local"] ul li a span {
  line-height: 1.2;
}

#contents nav[role="local"] > div ul {
  background-color: #fff;
}

#contents div[role*="slide"] {
  margin: 0 -16px;
}

#contents div[role*="slide"] ul  {
  margin-bottom: 0 !important;
}

#contents div[role="slide"] ul li a[class*="mdi-"]:before {
  color: #000;
}

#contents div[role*="slide"] > div ul  {
  display: flex;
  justify-content: space-between;
}

#contents div[role*="slide"] > div ul li  {
  left: -100%;
}

#contents div[role*="slide"] > div ul li img  {
  width: 100%;
  height: auto;
}

#contents .btn-toggle:before,
#contents .btn-toggle:after {
  background-color: #000;
}

/* -------------------------------------------------------------------------- */

#contents > header {
  margin: 0 -16px;
  padding: 0;
  background-image: url(/store/techo/ja/2022/sp/shopping_guide/images/img_header.png);
  background-repeat: no-repeat;
  background-size: contain;
}

#contents > header h2 {
  height: 0;
  overflow: hidden;
  padding-top: 71.88%;
  background-image: url(/store/techo/ja/2022/sp/shopping_guide/images/img_header.svg);
  background-repeat: no-repeat;
  background-size: contain;
  text-indent: -9999px;
}

/* -------------------------------------------------------------------------- */

#contents > section {
  padding: 32px 0 16px;
}

#contents > section#guide1 {
  padding-top: 40px;
}

#contents > section#guide5 {
  padding-bottom: 0;
}

#contents > section > header {
  margin: 0 -16px 32px;
  padding: 0 0 12px 0;
  border-bottom: 4px solid #fff3b2;
}

#contents > section > header:before {
  content: "";
  display: block;
  width: 58px;
  height: 50px;
  margin: 0 auto 12px;
  background-repeat: no-repeat;
  background-size: contain;
}

#contents > section:nth-of-type(1) > header:before {
  background-image: url(/store/techo/ja/2022/sp/shopping_guide/images/ico_guide_01.svg);
}

#contents > section:nth-of-type(2) > header:before {
  background-image: url(/store/techo/ja/2022/sp/shopping_guide/images/ico_guide_02.svg);
}

#contents > section:nth-of-type(3) > header:before {
  background-image: url(/store/techo/ja/2022/sp/shopping_guide/images/ico_guide_03.svg);
}

#contents > section:nth-of-type(4) > header:before {
  background-image: url(/store/techo/ja/2022/sp/shopping_guide/images/ico_guide_04.svg);
}

#contents > section:nth-of-type(5) > header:before {
  background-image: url(/store/techo/ja/2022/sp/shopping_guide/images/ico_guide_05.svg);
}

#contents > section > header h3 {
  text-align: center;
}

#contents > section > header h3 span {
/*   font-size: 28px; */
  font-size: 26px;
  font-weight: normal;
  line-height: 1.3;
}

#contents > section > div,
#contents > section > section {
  margin-bottom: 32px;
}

#contents > section > div section,
#contents > section > section section {
  margin-bottom: 32px;
}

#contents > section h4 {
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid #000;
}

#contents > section h4 span {
  font-size: 16px;
}

#contents > section h5 {
  margin-bottom: 8px;
}

#contents > section h5 span {
  font-size: 16px;
}

#contents > section dl {
  margin-bottom: 32px;
}

#contents > section dl dt {
  font-weight: bold;
}

#contents > section dl dt span,
#contents > section dl dd span {
  font-size: 16px;
}

#contents > section ul {
  margin-bottom: 32px;
}

#contents > section ul li span {
  font-size: 16px;
}

#contents > section p {
  margin-bottom: 24px;
  font-size: 16px;
  text-align: left;
}

#contents > section p.small-text {
  margin-bottom: 24px;
  font-size: 12px;
}

#contents > section p:last-child,
#contents > section p.small-text:last-child {
  margin-bottom: 0;
}

#contents > section p span.highlight-text {
  display: inline-block;
  background-color: #ffff64;
  font-size: inherit;
}

#contents > section a {
  color: #1c3a83;
  /* text-decoration: none; */
}

#contents > section a span {
  font-size: 16px;
}

#contents > section figure {
  position: relative;
  margin-bottom: 32px;
  background: no-repeat 50% 50%;
  -webkit-background-size: 32px 32px;
     -moz-background-size: 32px 32px;
          background-size: 32px 32px;
}

#contents > section img {
  width: 100%;
  height: auto;
  opacity: 1;
  transition: opacity .3s cubic-bezier(.25, .25, .75, .75);
}

#contents > section img.state-ready {
  opacity: 0;
  visibility: hidden;
}

/* -------------------------------------------------------------------------- */

#guide1 > header {
  margin-bottom: 0 !important;
}

#guide1 > div:nth-of-type(1) figure {
  margin-left: -16px;
  margin-right: -16px;
  background-image: url('/store/techo/2022/images/loading3.gif');
  height: 56.25vw;
}

#guide1 > div:nth-of-type(2) {
  margin: 0 -16px !important;
  padding-bottom: 32px;
  background-color: #f6f6f7;
}

#guide1 > div:nth-of-type(2) section {
  text-align: center;
}

#guide1 > div:nth-of-type(2) section h4 {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0;
  border: 0;
  background-color: #fff3b2;
}

#guide1 > div:nth-of-type(2) section h4 span {
  font-size: 18px;
}

#guide1 > div:nth-of-type(2) section p {
  margin-left: 16px;
  margin-right: 16px;
}

#guide1 > div:nth-of-type(2) section:nth-of-type(1) h4 {
  margin-bottom: 32px;
}

#guide1 > div:nth-of-type(2) section:nth-of-type(1) h4 + p {
  margin-bottom: 32px;
  font-size: 14px;
  text-align: center;
}

#guide1 > div:nth-of-type(2) section:nth-of-type(1) h4 + p span.large-text {
  display: inline-block;
  margin-top: 10px;
  font-size: 18px;
  font-weight: bold;
}

#guide1 > div:nth-of-type(2) section:nth-of-type(1) h5 {
  display: inline-block;
  margin-bottom: 20px;
  border-bottom: 1px solid #000;
  text-align: center;
}

#guide1 > div:nth-of-type(2) section:nth-of-type(1) h5 span {
  font-size: 14px;
}

#guide1 > div:nth-of-type(2) section:nth-of-type(1) figure {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin: 0 16px 16px;
}

#guide1 > div:nth-of-type(2) section:nth-of-type(1) figure img {
  width: 46.88%;
  height: auto;
}

#guide1 > div:nth-of-type(2) section:nth-of-type(2) {
  margin-bottom: 0;
}

#guide1 > div:nth-of-type(2) section:nth-of-type(2) h4 {
  margin-bottom: 24px;
}

#guide1 > div:nth-of-type(2) section:nth-of-type(2) figure {
  padding-top: 54.69%;
  background-image: url('/store/techo/2022/images/loading3.gif');
}

#guide1 > div:nth-of-type(2) section:nth-of-type(2) figure img {
  width: 75%;
  height: auto;
  margin: 0 auto;
  position: absolute;
  top: 0;
  left: 12.5%;
}

/* -------------------------------------------------------------------------- */

#guide2 > section:nth-of-type(1) > div[role*="slide"]  {
  margin-bottom: 24px;
}

#guide2 > section:nth-of-type(1) > div[role*="slide"] > div {
  padding-top: calc(100% * 700 / 480 * 240 / 320 + 75px + 7px);
}

#guide2 > section:nth-of-type(1) > div[role*="slide"] > div ul:first-child li > *  {
  width: calc(100% * 240 / 320);
}

#guide2 > section:nth-of-type(1) > div[role*="slide"] > div ul li div div {
  height: 75px;
}

#guide2 > section:nth-of-type(1) > div[role*="slide"] > div ul li h5 {
  display: flex;
  align-items: center;
  margin-bottom: 3px;
}

#guide2 > section:nth-of-type(1) > div[role*="slide"] > div ul li h5:before {
  content: "";
  display: block;
  width: 48px;
  height: 48px;
  margin-right: 8px;
  background-repeat: no-repeat;
  background-size: contain;
}

#guide2 > section:nth-of-type(1) > div[role*="slide"] > div ul li:nth-of-type(1) h5:before {
  background-image: url(/store/techo/ja/2022/sp/shopping_guide/images/ico_step_01.svg);
}

#guide2 > section:nth-of-type(1) > div[role*="slide"] > div ul li:nth-of-type(2) h5:before {
  background-image: url(/store/techo/ja/2022/sp/shopping_guide/images/ico_step_02.svg);
}

#guide2 > section:nth-of-type(1) > div[role*="slide"] > div ul li:nth-of-type(3) h5:before {
  background-image: url(/store/techo/ja/2022/sp/shopping_guide/images/ico_step_03.svg);
}

#guide2 > section:nth-of-type(1) > div[role*="slide"] > div ul li:nth-of-type(4) h5:before {
  background-image: url(/store/techo/ja/2022/sp/shopping_guide/images/ico_step_04.svg);
}

#guide2 > section:nth-of-type(1) > div[role*="slide"] > div ul li:nth-of-type(5) h5:before {
  background-image: url(/store/techo/ja/2022/sp/shopping_guide/images/ico_step_05.svg);
}

#guide2 > section:nth-of-type(1) > div[role*="slide"] > div ul li:nth-of-type(6) h5:before {
  background-image: url(/store/techo/ja/2022/sp/shopping_guide/images/ico_step_06.svg);
}

#guide2 > section:nth-of-type(1) > div[role*="slide"] > div ul li:nth-of-type(7) h5:before {
  background-image: url(/store/techo/ja/2022/sp/shopping_guide/images/ico_step_07.svg);
}

#guide2 > section:nth-of-type(1) > div[role*="slide"] > div ul li h5 span {
  font-size: 16px;
  font-weight: normal;
  line-height: 1.5;
}

#guide2 > section:nth-of-type(1) > div[role*="slide"] > div ul li h5 + p.small-text {
  font-size: 12px;
}

#guide2 > section:nth-of-type(2) {}

#guide2 > section:nth-of-type(2) h4 {
  margin-bottom: 0;
}

#guide2 > section:nth-of-type(2) > dl > dt {
  display: flex;
  align-items: center;
  height: 49px;
  border-bottom: 1px solid #000;
}

#guide2 > section:nth-of-type(2) > dl > dd > div {
  padding: 24px 0;
}

#guide2 > section:nth-of-type(2) > dl > dd:last-child > div {
  padding-bottom: 0;
}

#guide2 > section:nth-of-type(2) > dl > dd > div section h5 {
  margin-bottom: 4px;
}

#guide2 > section:nth-of-type(2) > dl > dd > div section h5 span[class*="mdi-"] {
  display: inline-block;
  margin-right: 8px;
}

#guide2 > section:nth-of-type(2) > dl > dd > div section dl {
  margin-bottom: 12px;
}

#guide2 > section:nth-of-type(2) > dl > dd > div section dl:last-child {
  margin-bottom: 0;
}

#guide2 > section:nth-of-type(2) > dl > dd:nth-of-type(1) > div ul {
  display: flex;
  justify-content: space-between;
}

#guide2 > section:nth-of-type(2) > dl > dd:nth-of-type(1) > div ul li {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 31.9444%;
  height: 92px;
  background-color: #f6f6f7;
}

#guide2 > section:nth-of-type(2) > dl > dd:nth-of-type(1) > div ul li div span {
  text-align: center;
}

#guide2 > section:nth-of-type(2) > dl > dd:nth-of-type(1) > div ul li div span[class*="mdi-"] {
  display: block;
  margin-bottom: 2px;
  font-size: 42px;
  line-height: 1;
}

#guide2 > section:nth-of-type(2) > dl > dd:nth-of-type(1) > div ul li div span[class*="mdi-"] + span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  font-size: 12px;
  font-weight: bold;
  line-height: 1.3;
}

#guide2 > section:nth-of-type(2) > dl > dd:nth-of-type(1) > div section figure {
  margin-top: -12px;
  padding-right: 10px;
  max-width: 382px;
}

#guide2 > section:nth-of-type(2) > dl > dd:nth-of-type(2) > div ul li {
  display: inline-block;
  margin-right: 14px;
}

#guide2 > section:nth-of-type(2) > dl > dd:nth-of-type(2) > div ul li span {
  font-size: 14px;
  font-weight: bold;
}

#guide2 > section:nth-of-type(2) > dl > dd:nth-of-type(3) > div section h5 {
  width: 64px;
  margin-bottom: 16px;
  background-color: #000;
  text-align: center;
}

#guide2 > section:nth-of-type(2) > dl > dd:nth-of-type(3) > div section h5 span {
  display: inline-block;
  padding-left: .5em;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  letter-spacing: .5em;
  line-height: 1.85;
}

#guide2 > section:nth-of-type(2) > dl > dd:nth-of-type(3) > div section:nth-of-type(1) p {
  font-weight: bold;
}

#guide2 > section:nth-of-type(2) > dl > dd:nth-of-type(3) > div section:nth-of-type(1) p span.large-text {
  display: inline-block;
  margin-top: 8px;
  font-size: 19px;
}

#guide2 > section:nth-of-type(2) > dl > dd:nth-of-type(4) > div h5 {
  font-size: 16px;
  font-weight: bold;
  margin: 0;
}

#guide2 > section:nth-of-type(2) > dl > dd:nth-of-type(4) > div figure:nth-of-type(1) {
  margin: 0 auto 32px;
  background-image: url('/store/techo/2022/images/loading3.gif');
  width: 85.42%;
  padding-top: 85.42%;
}

#guide2 > section:nth-of-type(2) > dl > dd:nth-of-type(4) > div figure:nth-of-type(2) {
  margin: 0 auto 16px;
  background-image: url('/store/techo/2022/images/loading3.gif');
  width: 85.42%;
  padding-top: 56.94%;
}

#guide2 > section:nth-of-type(2) > dl > dd:nth-of-type(4) > div figure img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

#guide2 > section:nth-of-type(2) > dl > dd:nth-of-type(4) > div p:nth-of-type(5) {
  font-weight: bold;
}

#guide2 > section:nth-of-type(2) > dl > dd:nth-of-type(4) > div p:nth-of-type(5) span.large-text {
  display: inline-block;
  margin-top: 8px;
  font-size: 19px;
}

#guide2 > section:nth-of-type(2) > dl > dd:nth-of-type(6) > div section:nth-of-type(2) h5 span[class*="mdi-"]:nth-of-type(1) {
  margin-right: 0;
}

#guide2 > section:nth-of-type(2) > dl > dd:nth-of-type(6) > div section dl dt span,
#guide2 > section:nth-of-type(2) > dl > dd:nth-of-type(6) > div section dl dd span {
  font-size: 14px;
}

/* -------------------------------------------------------------------------- */

#guide3 > section:nth-of-type(1) > div {
  margin-bottom: 82px;
}

#guide3 > section:nth-of-type(1) > div p span.highlight-text {
  display: inline;
}

#guide3 > section:nth-of-type(1) section {
  position: relative;
  margin: 0 -16px 40px;
  padding: 80px 16px 32px;
  background-color: #faf3c8;
}

#guide3 > section:nth-of-type(1) section:before {
  content: "";
  display: block;
  position: absolute;
  top: -50px;
  right: 0;
  width: 100%;
  height: 205px;
  background-image: url(/store/techo/ja/2022/sp/shopping_guide/images/img_14.png);
  background-position: right 25px top;
  background-repeat: no-repeat;
  background-size: auto 205px;
}

#guide3 > section:nth-of-type(1) section h5 {
  margin: 0 -16px 24px 0;
}

#guide3 > section:nth-of-type(1) section h5 span {
  font-size: 23px;
  line-height: 1.6;
}

#guide3 > section:nth-of-type(1) section h5 span.large-text {
  font-size: 25px;
}

#guide3 > section:nth-of-type(1) section ul {
  margin-right: -16px;
}

#guide3 > section:nth-of-type(1) section ul li {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 12px;
}

#guide3 > section:nth-of-type(1) section ul li div {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-right: 12px;
  border-radius: 16px;
  background-color: #ffcd00;
}

#guide3 > section:nth-of-type(1) section ul li div:before {
  font-size: 19px;
  font-weight: bold;
  line-height: 1;
}

#guide3 > section:nth-of-type(1) section ul li:nth-of-type(1) div:before {
  content: "1";
}

#guide3 > section:nth-of-type(1) section ul li:nth-of-type(2) div:before {
  content: "2";
}

#guide3 > section:nth-of-type(1) section ul li:nth-of-type(3) div:before {
  content: "3";
}

#guide3 > section:nth-of-type(1) section ul li span {
  font-size: 16px;
  font-weight: bold;
  line-height: 1.5;
}

#guide3 > section:nth-of-type(1) section a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  border-radius: 4px;
  background-color: #ffcd00;
  color: #000;
  text-align: center;
}

#guide3 > section:nth-of-type(1) section a > span {
  line-height: 1.375;
}

#guide3 > section:nth-of-type(1) section a span span {
  font-size: 16px;
  font-weight: bold;
  vertical-align: middle;
}

#guide3 > section:nth-of-type(1) section a span span[class*="mdi-"] {
  display: inline-block;
  margin-left: 8px;
  font-size: 22px;
  font-weight: normal;
  line-height: 1;
}

#guide3 > section:nth-of-type(3) figure {
  margin-bottom: 16px;
  background-image: url('/store/techo/2022/images/loading3.gif');
  padding-top: 114.58%;
}

#guide3 > section:nth-of-type(3) figure img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

#guide3 > section:nth-of-type(4) div[role*="slide"]  {
  margin-bottom: 16px;
}

#guide3 > section:nth-of-type(4) div[role*="slide"] > div  {
  /* padding-top: calc(700 * 100% / 480 * 240 / 320); */
  padding-top: calc(100% * 700 / 480 * 240 / 320 + 7px);
}

#guide3 > section:nth-of-type(4) div[role*="slide"] > div ul:first-child li > *  {
  width: calc(100% * 240 / 320);
}

/* -------------------------------------------------------------------------- */

#guide5 > figure:nth-of-type(1) {
  margin: -32px -16px 24px;
  background-image: url('/store/techo/2022/images/loading3.gif');
  height: 59.375vw;
}

#guide5 > figure:nth-of-type(1) img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

#guide5 > figure:nth-of-type(2) {
  position: relative;
  padding-top: 100%;
}

#guide5 > figure:nth-of-type(2) img {
  width: 48.6111%;
  height: auto;
  position: absolute;
}

#guide5 > figure:nth-of-type(2) img:nth-child(1) {
  top: 0;
  left: 0;
}

#guide5 > figure:nth-of-type(2) img:nth-child(2) {
  top: 0;
  right: 0;
}

#guide5 > figure:nth-of-type(2) img:nth-child(3) {
  bottom: 0;
  left: 0;
}

#guide5 > figure:nth-of-type(2) img:nth-child(4) {
  bottom: 0;
  right: 0;
}

#guide5 > figure:nth-of-type(2) + p {
  margin-bottom: 48px;
}

#guide5 > ul {
  margin-bottom: 0 !important;
}

#guide5 > ul li:first-child {
  margin-bottom: 20px;
}