@charset "utf-8";
/* CSS Document */
footer,header,.sector01,.sector03 {
  color: #252e59;
}

/* 切り替え
====================================*/
.pc-style {
  display: block;
}
.sp-style {
  display: none;
}

/* WEB FONT
====================================*/
.Sawarabi-M { font-family: 'Sawarabi Mincho', sans-serif; }
.Noto-M { font-family: 'Noto Serif JP', serif; }
.F200 { font-weight: 200; }
.F300 { font-weight: 300; }
.F400 { font-weight: 400; }
.F500 { font-weight: 500; }
.F600 { font-weight: 600; }
.F900 { font-weight: 900; }
.fa-arrow-circle-right { margin-left: 10px; }
/* footer 関連
-------------------------*/
.copyright {
  font-size: calc(10px + 0.25vw);
  line-height: calc(1.0rem + 0.25vw);
  text-align: center;
  margin: 20px 0;
}
/* box関連 */
.box-sizing {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
/* FLEX-BOX */
.flex-Box {
  display: flex;
}
/* タイトル設定 */
.h1-title-01 {
  font-size: calc(42px + 0.25vw);
  line-height: calc(4.2rem + 0.25vw);
  letter-spacing: 1.5px;
}
.h1-title-01 span {
  font-size: calc(20px + 0.25vw);
  line-height: calc(2.0rem + 0.25vw);
  position: relative;
  top: -6px;
}
.h2-title-01 {
  font-size: calc(48px + 0.25vw);
  line-height: calc(4.8rem + 0.25vw);
  letter-spacing: 1.5px;
}
.h2-title-01 span {
  font-size: calc(24px + 0.25vw);
  line-height: calc(2.4rem + 0.25vw);
  position: relative;
  top: -4px;
}
.h2-title-02 {
  font-size: calc(20px + 0.25vw);
  line-height: calc(2.0rem + 0.25vw);
  letter-spacing: 3.5px;
}
.h2-title-02 span {
  font-size: calc(12px + 0.25vw);
  line-height: calc(1.2rem + 0.25vw);
  position: relative;
  top: 2px;
}
.h2-title-03 {
  font-size: calc(18px + 0.25vw);
  line-height: calc(1.8rem + 0.25vw);
  letter-spacing: 1.5px;
}
.limited-number {
  font-size: calc(17px + 0.25vw);
  line-height: calc(1.7rem + 0.25vw);
  letter-spacing: 1.5px;
}
.limited-number2 {
  font-size: calc(14px + 0.25vw);
  line-height: calc(1.4rem + 0.25vw);
  letter-spacing: 1.5px;
  position: relative;
  top: 12px;
}
.price-01 {
  font-size: calc(24px + 0.25vw);
  line-height: calc(2.4rem + 0.25vw);
  letter-spacing: 1.5px;
}
.price-01 span {
  font-size: calc(11px + 0.25vw);
  line-height: calc(1.1rem + 0.25vw);
  position: relative;
  top: -3px;
  letter-spacing: 0px;
}
.price-02 {
  font-size: calc(34px + 0.25vw);
  line-height: calc(3.4rem + 0.25vw);
  letter-spacing: 1.5px;
  display: block;
  text-align: center;
}
.price-02 span {
  font-size: calc(20px + 0.25vw);
  line-height: calc(2.0rem + 0.25vw);
  position: relative;
  top: -6px;
  letter-spacing: 0px;
}
.price-03 {
  font-size: calc(20px + 0.25vw);
  line-height: calc(2.0rem + 0.25vw);
  letter-spacing: 1px;
  display: block;
  text-align: left;
}
.price-03 span {
  font-size: calc(10px + 0.25vw);
  line-height: calc(1.0rem + 0.25vw);
  position: relative;
  top: 0px;
  letter-spacing: 0px;
}
.price-04 {
  font-size: calc(12px + 0.25vw);
  line-height: calc(1.2rem + 0.25vw);
  letter-spacing: 1px;
  display: block;
  margin: 10px 0 0;
  text-align: left;
}
.price-05 {
  width: 100%;
  font-size: calc(10px + 0.25vw);
  line-height: calc(1.0rem + 0.25vw);
  letter-spacing: 1px;
  display: block;
  margin: 0;
  text-align: left;
}
.h3-title-01 {
  font-size: calc(13px + 0.25vw);
  line-height: calc(1.3rem + 0.25vw);
  letter-spacing: 1.5px;
}
.h3-title-02 {
  font-size: calc(28px + 0.25vw);
  line-height: calc(2.0rem + 0.25vw);
  letter-spacing: 1px;
  margin: 20px 0;
}
.h3-title-01 span {
  font-size: calc(9px + 0.25vw);
  line-height: calc(0.9rem + 0.25vw);
  position: relative;
  top: 0px;
}
.sec3-photo-Box .h3-title-01 {
  margin: 0 0 20px;
  text-align: center;
}
.h4-title-01 {
  font-size: calc(12px + 0.25vw);
  line-height: calc(1.2rem + 0.25vw);
  letter-spacing: 1.5px;
  margin-bottom: 10px;
}
.h4-title-01 span {
  font-size: calc(16px + 0.25vw);
  line-height: calc(1.6rem + 0.25vw);
  padding-left: 5px;
}
.h4-title-01.color-01 span,
.h4-title-01.color-02 span,
.h4-title-01.color-03 span {
  position: relative;
  top: 1px;
}
.h4-title-01.color-01 span {
  color: #f7931e;
}
.h4-title-01.color-02 span {
  color: #f15a24;
}
.h4-title-01.color-03 span {
  color: #39b54a;
}
.nama-icon:before {
  content: "";
  display: inline-block;
  background: url(../images/nama-icon.svg) no-repeat;
  width: 20px;
  height: 20px;
  background-size: contain;
  position: relative;
  top: -7px;
  margin-right: 5px;
}
.sun-icon:before,
.moon-icon:before {
  content: "";
  display: inline-block;
  width: 54px;
  height: 54px;
  background-size: contain;
  position: relative;
  top: 20px;
  margin-right: 10px;
}
.sun-icon:before {
  background: url(../images/sun-icon.svg) no-repeat;
}
.moon-icon:before {
  background: url(../images/moon-icon.svg) no-repeat;
}
.include-item {
  font-size: calc(14px + 0.25vw);
  line-height: calc(1.4rem + 0.25vw);
  letter-spacing: 1px;
  position: relative;
  top: -5px;
}
.sub-catch {
  font-size: 1.3rem;
  line-height: 2.6rem;
}
.under-line {
  font-size: 1.1rem;
  line-height: 2.2rem;
  text-decoration: underline;
  margin-bottom: 20px;
  display: block;
}
.coupon-info span {
  font-size: 1.6rem;
  line-height: 1.8rem;
  position: relative;
  top: 0.2rem;
}
/* じぇるりっちページ
===================================*/
a {
  text-decoration: none;
  display: block;
}
a .cart-bottan,
.cart-bottan-close {
  max-width: 350px;
  width: 100%;
  font-size: calc(16px + 0.25vw);
  line-height: calc(1.6rem + 0.25vw);
  letter-spacing: 1.5px;
  display: block;
  background: #fff;
  text-align: center;
  color: #00143c;
  border-radius: 8px;
  padding: 15px 20px;
}
a .cart-bottan {
  margin: 15px auto 15px;
}
.cart-bottan-close {
  margin: 15px auto 15px;
}
a:hover .cart-bottan,
a:hover .faq-bottan,
a:hover .link-bottan,
a:hover .mini-bottan {
  background: #fbe8b2;
  transition: .8s;
}
a .faq-bottan,
a .link-bottan,
a .mini-bottan {
  padding: 10px;
  background: #fff;
  color: #00143c;
  font-size: calc(12px + 0.25vw);
  line-height: calc(1.2rem + 0.25vw);
  letter-spacing: 0.05rem;
  text-align: center;
  border-radius: 8px;
}
a .faq-bottan {
  /*max-width: 350px;*/
  width: 100%;
  margin: auto;
}
a .mini-bottan {
  margin-bottom: 20px;
}
#header {
  width: 100%;
  background: url(../images/top-bg.jpg) 50% 0 no-repeat;
  background-size: cover;
}
.sector01,
.sector02,
.sector03 {
  max-width: 1170px;
  width: 100%;
  display: block;
  margin: auto;
  padding: 40px 0;
}
.sector02,
.sector03 {
  text-align: center;
}
.logo-chojyu {
  max-width: 140px;
  width: 100%;
  position: absolute;
  top: 10px;
  left: 0px;
}
.catch-title {
  max-width: 35px;
  width: 100%;
  position: absolute;
  top: 100px;
  right: 0;
}
.viual-block {
  display: block;
  width: 100%;
  padding: 20px;
  text-align: center;
}
.viual-wrap {
  display: block;
  max-width: 1170px;
  width: 100%;
  margin: auto;
  position: relative;
}
.products-box01 {
  display: block;
  max-width: 520px;
  width: 100%;
  margin: auto;
}
.products-box01 {
  position: relative;
  top: 20px;
}
.products-box03 {
  width: 50%;
  display: flex;
  flex-flow: column;
  justify-content: flex-end;
  padding: 10px 20px 10px;
}
.photo-block,
.photo-block2 {
  width: 100%;
  margin: 10px auto 0;
}
.photo-block {
  max-width: 400px;
}
.photo-block2 {
  max-width: 520px;
}
.text-font.top-v {
  display: block;
  width: 100%;
  margin: -20px 0 0;
}
.text-font {
  font-size: calc(12px + 0.25vw);
  line-height: calc(1.2rem +0.25vw);
  text-align: center;
  letter-spacing: 1.5px;
  position: relative;
  z-index: 1;
}
.sector02 .text-font {
  font-size: calc(10px + 0.25vw);
  line-height: calc(1.0rem +0.25vw);
  margin: 30px 0 30px 0;
}
.sector02 i img {
  display: block;
  max-width: 900px;
  width: 100%;
  margin: auto;
}
.title-block {
  max-width: 1170px;
  width: 100%;
  margin: 20px auto;
}
.annotation {
  max-width: 1170px;
  width: 100%;
  margin: 20px auto 0;
  text-align: left;
}
.annotation2,
.annotation3,
.annotation4 {
  width: 100%;
  margin: 0;
}
.annotation2,
.annotation3 {
  text-align: center;
}
.annotation4 {
  text-align: left;
}
.annotation2 {
  margin: 0;
}
.annotation3,
.annotation4 {
  margin: 20px 0 0;
}
.annotation p,
.annotation2 p,
.annotation3 p,
.annotation4 p.notes {
  font-size: 12px;
  line-height: 1.2rem;
  letter-spacing: 0px;
}
.annotation4 p {
  font-size: 14px;
  line-height: 1.4rem;
  letter-spacing: 0px;
}
.annotation4 p.notes {
  text-align: right;
}
.annotation span {
  font-size: 5px;
  font-size: 0.6rem;/*firefox用*/
  line-height: 0.5px;
  line-height: 1rem;/*firefox用*/
  letter-spacing: 1px;
  letter-spacing: 0rem;/*firefox用*/
}
.cart-wrap {
  width: 100%;
  padding: 20px 0;
  background: #141e4a;
  color: #fff;
}
.cart-Box-flex {
  max-width: 1170px;
  width: 100%;
  margin: 10px auto 0;
  display: flex;
  align-items: center;
}
.left-box {
  max-width: 540px;
  width: 100%;
  padding: 0 10px;
  text-align: left;
}
.right-box {
  max-width: 630px;
  width: 100%;
  padding: 0 10px;
}
.cart-Offer-info {
  display: block;
  max-width: 1170px;
  width: 100%;
  margin: auto;
}
.products-flex-Box {
  max-width: 1170px;
  width: 100%;
  margin: 30px auto 0;
  display: flex;
  border-top: 1px dashed #fff;
}
.products-box03 h3 {
  text-align: left;
  padding: 0 0 10px;
  border-bottom: solid 1px #495893;
}
.products-box03 .copy-text {
  font-size: calc(10px + 0.25vw);
  line-height: calc(1.0rem + 0.25vw);
  text-align: left;
  margin: 10px 0 0;
}
.sec3-photo-Box .left-box,
.sec3-photo-Box .right-box {
  width: 50%;
}
.sec3-photo-Box .right-box i img {
  display: block;
  max-width: 450px;
  width: 100%;
  margin: auto;
}
.nano-capsule-area {
  width: 100%;
  color: #fff;
  background: url(../images/bg-02.jpg) 50% 50%;
  background-size: cover;
}
.point-list {
  display: flex;
  flex-wrap: wrap;
  /*justify-content: center;*/
  max-width: 1170px;
  width: 100%;
  color: #00143c;
  font-size: 8px;
  font-size: 0.8rem;
  line-height: 8px;
  line-height: 0.8rem;
  letter-spacing: 1px;
  margin: 10px auto 30px;
}
.point-list li {
  display: inline-block;
  margin: 5px 0 0 5px;
  background: #fff;
  padding: 10px 20px;
  border-radius: 5px;
}
.point-list li:last-child {
  margin-right: 0;
}
.point-text {
  display: block;
  width: 100%;
  font-size: 1.2rem;
  line-height: 1.8rem;
  text-align: left;
  margin: 0 0 20px;
}
.point-text-s {
  display: block;
  margin-bottom: 5px;
}
.point-text .flex-Box {
  align-items: center;
}
.point-text span {
  font-size: 1.8rem;
  position: relative;
  top: 0.01rem;
}
.point-text .notes,
.coupon-info .notes {
  display: block;
  font-size: 0.8rem;
  line-height: 1.4rem;
}
.coupon-info .notes {
  margin-top: 10px;
}
.point-text a {
  display: inline-block;
  color: #fff;
  text-decoration: underline;
}
.benefits-photo {
  max-width: 60px;
  width: 100%;
  display: block;
  padding: 0 0 0 20px;
}
.refund-photo {
  max-width: 150px;
  width: 100%;
  display: block;
  padding: 0 0 0 20px;
}
.info-Box {
  width: 100%;
  font-size: calc(14px + 0.25vw);
  line-height: calc(1.6rem + 0.25vw);
  letter-spacing: 1px;
}
.sec1-photo-Box,
.sec3-photo-Box {
  display: flex;
  margin: 40px 0;
}
.sec3-photo-Box2 {
  margin: 10px 0 0;
}

.sec1-photo-Box {
  align-items: center;
}
.sec3-photo-Box {
  align-items: flex-start;
}
.sec1-photo-Box-sp,
.sec3-photo-Box-sp {
  margin: 40px 0;
}
.sec3-photo-flex {
  display: flex;
}
.sec3-photo-flex div {
  max-width: 195px;
  width: 100%;
  display: block;
  margin-right: 15px;
}
.sec3-photo-flex h3 {
  display: block;
  width: 50%;
  margin: 30px 0 0;
}
.sec3-photo-flex div:last-child {
  margin-right: 0;
}
.sec3-photo-text {
  font-size: calc(10px + 0.25vw);
  line-height: calc(1.0rem + 0.25vw);
}
.sec3-sub-text,
.sec3-sub-text2 {
  font-size: calc(12px + 0.25vw);
  line-height: calc(1.2rem + 0.25vw);
  letter-spacing: 1.5px;
}
.sec3-sub-text3 {
  font-size: calc(10px + 0.25vw);
  line-height: calc(1.0rem + 0.25vw);
  letter-spacing: 1.5px;
}
.sec3-sub-text {
  margin: 40px 0;
}
.sec3-sub-text2 {
  margin: 40px 0 20px;
}
.sec3-sub-text3 {
  margin: 40px 0 0;
}
.specal-care-wrap {
  width: 100%;
  display: flex;
  align-items: flex-start;
  margin-bottom: 40px;
}
.specal-care-wrap div {
  max-width: 390px;
  width: 100%;
  display: block;
  text-align: left;
  padding: 0 10px;
  font-size: calc(9px + 0.25vw);
  line-height: calc(0.9rem + 0.25vw);
  text-align: justify;
}
.specal-care-wrap div h4 {
  margin-bottom: 5px;
}
.specal-care-wrap .component {
  width: 100%;
  font-size: calc(9px + 0.25vw);
  line-height: calc(0.9rem + 0.25vw);
  display: block;
  text-align: left;
}
.coupon-info {
  max-width: 1200px;
  width: 100%;
  display: block;
  text-align: center;
  margin: 20px auto;
}
.coupon-info figure {
  max-width: 700px;
  width: 100%;
  display: block;
  margin: 20px auto;
}
.texture-photo01 {
  max-width: 1000px;
  width: 100%;
  margin: 20px auto;
}
.texture-photo01 figcaption {
  font-size: 0.9rem;
  line-height: 1.6rem;
}

/* ブレイクポイント
-------------------------*/
@media screen and (max-width: 1100px) {
/* タイトル設定 */
.sun-icon:before,
.moon-icon:before {
  content: "";
  display: inline-block;
  width: 35px;
  height: 35px;
  background-size: contain;
  position: relative;
  top: 10px;
  margin-right: 20px;
}
/* じぇるりっちページ
===================================*/
.cart-wrap {
  padding: 20px 10px;
}
.info-Box {
  padding: 0 10px;
}
.sector02 {
  padding: 40px 10px;
}
}
@media screen and (max-width: 980px) {
}
@media screen and (max-width: 860px) {
/* タイトル設定 */
.h3-title-01 {
  margin: 0 0 20px;
  padding: 0 10px;
  font-size: calc(12px + 0.25vw);
  line-height: calc(1.4rem + 0.25vw);
}
.h2-title-01 {
  font-size: calc(38px + 0.25vw);
  line-height: calc(3.8rem + 0.25vw);
  letter-spacing: 1.5px;
}
.h2-title-01 span {
  font-size: calc(16px + 0.25vw);
  line-height: calc(1.6rem + 0.25vw);
  top: -6px;
}
.h2-title-02 {
  font-size: calc(18px + 0.25vw);
  line-height: calc(2.0rem + 0.25vw);
  letter-spacing: 1.5px;
}
.h2-title-03 {
  font-size: calc(16px + 0.25vw);
  line-height: calc(1.6rem + 0.25vw);
  letter-spacing: 1.5px;
}
.sun-icon:before,
.moon-icon:before {
  content: "";
  display: inline-block;
  width: 30px;
  height: 30px;
  background-size: contain;
  position: relative;
  top: 10px;
  margin-right: 20px;
}
/* じぇるりっちページ
===================================*/
.catch-title {
  max-width: 30px;
  top: 20px;
}
.cart-Box-flex {
  margin: 0 auto 0;
}
.info-Box {
  text-align: left;
}
.sector02 {
  padding: 40px 10px;
}
.sec3-photo-flex h3 {
  margin: 20px 0 0;
}
}
@media screen and (max-width: 800px) {
}
@media screen and (min-width: 660px) {
}
@media screen and (max-width: 660px) {
/* 切り替え
====================================*/
.pc-style {
  display: none;
}
.sp-style {
  display: block;
}
/* タイトル設定 */
.h3-title-01 {
  font-size: calc(11px + 0.25vw);
  line-height: calc(1.4rem + 0.25vw);
  letter-spacing: 0.5px;
  text-align: left;
  margin: 0 0 10px;
  padding: 0;
}
.h3-title-02 {
  font-size: calc(24px + 0.25vw);
}
.h2-title-01 {
  font-size: calc(34px + 0.25vw);
  line-height: calc(3.4rem + 0.25vw);
  letter-spacing: 1.5px;
}
.h2-title-02 {
  line-height: calc(1.8rem + 0.25vw);
  letter-spacing: 1px;
}
.h2-title-03 {
  font-size: calc(12px + 0.25vw);
  line-height: calc(1.2rem + 0.25vw);
  letter-spacing: 1.5px;
  text-align: center;
}
.sun-icon:before,
.moon-icon:before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background-size: contain;
  position: relative;
  top: 5px;
  margin-right: 5px;
}
.sub-catch {
  font-size: 1.0rem;
  line-height: 1.8rem;
}
.under-line {
  font-size: 1.0rem;
  line-height: 1.6rem;
  margin-bottom: 10px;
}
.coupon-info span {
  font-size: 1.2rem;
  line-height: 1.4rem;
  top: 0.2rem;
}
/* じぇるりっちページ
===================================*/
.sector01,
.sector02,
.sector03 {
  padding: 20px 10px;
}
.sector02 .text-font {
  margin: 10px 0 10px;
  text-align: left;
}
.sec1-photo-Box-sp {
  margin: 20px 0;
  padding: 0 10px;
}
.annotation3 {
  text-align: left;
}
.info-Box {
  font-size: calc(12px + 0.25vw);
  line-height: calc(1.4rem + 0.25vw);
  padding: 0;
}
.cart-Box-flex,
.products-flex-Box {
  display: block;
}
.refund-photo {
  padding: 0;
}
.products-box03 {
  width: 100%;
  border-bottom: 1px solid #fff;
  padding: 20px 0;
  margin: 0 0 10px;
}
.products-box03:last-child {
  border-bottom: none;
}
a .cart-bottan {
  margin: 20px auto 20px;
}
a .faq-bottan,
a .mini-bottan {
  padding: 10px 15px;
  margin: 0 0 20px;
}
.specal-care-wrap {
  display: block;
  margin-bottom: 40px;
}
.specal-care-wrap div,
.specal-care-wrap .component {
  max-width: 100%;
  padding: 0 0 10px;
  margin-bottom: 10px;
  font-size: calc(12px + 0.25vw);
  line-height: calc(1.2rem + 0.25vw);
}
.specal-care-wrap div {
  border-bottom: dashed 1px #252e59;
}

.specal-care-wrap div:last-child {
  border-bottom: none;
  padding: 0;
  margin-bottom: 0;
}
.sec3-sub-text,
.sec3-sub-text2 {
  font-size: calc(16px + 0.25vw);
  line-height: calc(1.6rem + 0.25vw);
  letter-spacing: 1.5px;
}
.sec3-sub-text3 {
  font-size: calc(12px + 0.25vw);
  line-height: calc(1.2rem + 0.25vw);
  letter-spacing: 1.5px;
}
.sec3-sub-text3 {
  margin: 20px 0 0;
}
.sec3-photo-flex {
  display: block;
}
.sec3-photo-flex h3 {
  width: 100%;
  margin: 0;
}
.point-text {
  margin: 20px 0 30px;
}
.point-list {
  justify-content: center;
}
}
@media screen and (max-width: 330px) {
}