@import url("https://use.typekit.net/bnf7jzd.css");

@media (max-width: 767px) {
  .lp * {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
}

/* ==========================================================================
    Typograpgy
   ========================================================================== */
#totebag_210407 {
  /*
		ATOMIC SETTINGS/EXTEND CLASSES
	========================================================================== 
	*/
  color: #343434;
}

#totebag_210407 .credit_main {
  font-family: classico-urw, sans-serif;
  font-weight: 400;
  font-style: normal;
}

#totebag_210407 .heading_intro, #totebag_210407 .heading_article, #totebag_210407 .text_main {
  font-family: toppan-bunkyu-mincho-pr6n, serif;
  font-weight: 400;
  font-style: normal;
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
}

#totebag_210407 .heading_intro {
  font-size: calc(44 * (100vw / 750));
  letter-spacing: 0.18em;
  line-height: 1.68;
}

@media (min-width: 768px) {
  #totebag_210407 .heading_intro {
    font-size: 30px;
    letter-spacing: 0.18em;
  }
}

#totebag_210407 .heading_article {
  font-size: calc(30 * (100vw / 750));
  letter-spacing: 0.12em;
}

@media (min-width: 768px) {
  #totebag_210407 .heading_article {
    font-size: 20px;
  }
}

#totebag_210407 .heading_article .sub {
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
  font-size: calc(30 * (100vw / 750));
}

@media (min-width: 768px) {
  #totebag_210407 .heading_article .sub {
    font-size: 18px;
  }
}

#totebag_210407 .text_main {
  font-size: calc(22 * (100vw / 750));
  letter-spacing: 0.12em;
  line-height: 1.85;
}

#totebag_210407 .text_main .half-spacing {
  letter-spacing: 0.035em;
}

@media (min-width: 768px) {
  #totebag_210407 .text_main {
    font-size: 14px;
    line-height: 2.1;
    letter-spacing: 0.12em;
  }
}

#totebag_210407 .credit_main {
  font-size: calc(22 * (100vw / 750));
  letter-spacing: 0.12em;
  line-height: 1.6;
}

@media (min-width: 768px) {
  #totebag_210407 .credit_main {
    font-size: 12px;
    line-height: 1.6;
  }
}

/* ==========================================================================
   Base
   ========================================================================== */
#totebag_210407 {
  width: 100%;
}

@media (min-width: 768px) {
  #totebag_210407 {
    margin-left: auto;
    margin-right: auto;
    max-width: 900px;
  }
}

#totebag_210407 img,
  #totebag_210407 picture {
  min-width: 1px;
  min-height: 1px;
}

#totebag_210407 div {
  height: auto;
}

#totebag_210407 div img,
    #totebag_210407 div picture {
  width: 100%;
  height: auto;
}

#totebag_210407 ul.credit a {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
}

#totebag_210407 .flex_content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

#totebag_210407 .flex_content .img-wrapper {
  -webkit-box-flex: 0;
  -ms-flex: 0 calc(340 * (100vw / 750));
  flex: 0 calc(340 * (100vw / 750));
}

@media (min-width: 768px) {
  #totebag_210407 .flex_content .img-wrapper {
    -webkit-box-flex: 0;
    -ms-flex: 0 calc(345 * (100vw / 900));
    flex: 0 calc(345 * (100vw / 900));
    max-width: 345px;
  }
}

@media (min-width: 768px) {
  #totebag_210407 .content_box {
    width: calc(700 * (100vw / 900));
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
  }
}

#totebag_210407 .totebag > .img-wrapper {
  position: relative;
}

#totebag_210407 .totebag > .img-wrapper .link_small,
    #totebag_210407 .totebag > .img-wrapper .link_large {
  position: absolute;
  width: 40%;
  height: 100%;
}

#totebag_210407 .totebag > .img-wrapper .link_small:hover,
      #totebag_210407 .totebag > .img-wrapper .link_large:hover {
  background-color: rgba(255, 255, 255, 0.6);
}

@media (min-width: 768px) {
  #totebag_210407 .totebag > .img-wrapper .link_small,
        #totebag_210407 .totebag > .img-wrapper .link_large {
    height: calc(300 * (100vw / 900));
    max-height: 300px;
  }
}

#totebag_210407 .totebag > .img-wrapper .link_small {
  left: 7%;
}

@media (max-width: 767px) {
  #totebag_210407 .totebag > .img-wrapper .link_small {
    left: 5%;
  }
}

#totebag_210407 .totebag > .img-wrapper .link_large {
  right: 8%;
}

.btnViewAll {
  width: calc(460 * (100vw / 750));
  display: block;
  max-width: 460px;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 768px) {
  .breadlist.lp {
    margin: calc(60 * (100vw / 900)) auto;
    width: 100%;
    font-size: calc(12 * (100vw / 900));
  }
}

@media (min-width: 900px) {
  .breadlist.lp {
    margin: 60px auto;
    width: 900px;
    font-size: 12px;
  }
}

@media (max-width: 767px) {
  .breadlist.lp {
    line-height: calc(40 * (100vw / 750));
    font-size: calc(20 * (100vw / 750));
    margin: calc(25 * (100vw / 750)) auto;
    width: 92.592%;
    text-align: left;
    padding: 0;
  }
}

@media (max-width: 767px) {
  /* ==========================================================================
    SP
==========================================================================*/
  *.desktop,
  * .desktop {
    display: none !important;
  }

  #totebag_210407 {
    padding: 0 calc(50 * (100vw / 750));
  }

  .main_visual {
    margin-bottom: calc(33 * (100vw / 750));
  }

  .flex_content {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-flow: column;
    flex-flow: column;
  }

  .intro {
    margin-bottom: calc(95 * (100vw / 750));
  }

  .intro .heading_intro {
    margin-bottom: calc(18 * (100vw / 750));
  }

  .content1 {
    margin-bottom: calc(95 * (100vw / 750));
  }

  .content2 {
    margin-bottom: calc(91 * (100vw / 750));
  }

  .content > .img-wrapper {
    margin-bottom: calc(20 * (100vw / 750));
  }

  .content .flex_content .img-wrapper {
    margin-bottom: calc(25 * (100vw / 750));
  }

  .content .flex_content .text_content .heading_article {
    margin-bottom: calc(18 * (100vw / 750));
  }

  .content .flex_content .text_content .text_main {
    margin-bottom: calc(30 * (100vw / 750));
  }

  .totebag {
    margin-bottom: calc(95 * (100vw / 750));
  }

  .totebag .img-wrapper {
    margin-bottom: calc(32 * (100vw / 750));
  }

  .totebag .text_content .text_main {
    margin-bottom: calc(30 * (100vw / 750));
  }
}

@media (min-width: 768px) {
  /* ==========================================================================
    PC
==========================================================================*/
  *.SP,
  * .SP {
    display: none !important;
  }

  .main_visual {
    margin-bottom: 3.8rem;
  }

  .intro {
    margin-bottom: 6.2rem;
  }

  .intro .heading_intro {
    margin-bottom: 1.1rem;
  }

  .content > .img-wrapper {
    margin-bottom: 3rem;
  }

  .content .text_content .heading_article {
    margin-bottom: 1.3rem;
  }

  .content .text_content .text_main {
    margin-bottom: 4.2rem;
  }

  .content1 {
    margin-bottom: 10rem;
  }

  .content1 .flex_content > .img-wrapper {
    margin-right: 5.6rem;
  }

  .content1 .flex_content .text_content {
    margin-right: -5rem;
    margin-top: auto;
  }

  .content2 {
    margin-bottom: 8.4rem;
  }

  .content2 .flex_content {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-flow: row-reverse;
    flex-flow: row-reverse;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }

  .content2 .flex_content > .img-wrapper {
    margin-left: 5rem;
  }

  .content2 .flex_content .text_content {
    margin-right: -5rem;
    margin-top: auto;
  }

  .totebag {
    margin-bottom: 4.5rem;
  }

  .totebag .img-wrapper {
    margin-bottom: 3.4rem;
  }

  .totebag .text_main {
    margin-bottom: 3.4rem;
  }

  .totebag .credit_main {
    line-height: 1.8 !important;
  }
}

@media only screen and (min-width: 768px) and (max-width: 900px) {
  /* ==========================================================================
       mid sized devices
==========================================================================*/
}