@charset "utf-8";
/* ---------------------------------------------------------
 　■ レイアウト
--------------------------------------------------------- */
img {
  max-width: 100%;
}

/* ---------------------------------------------------------
 　■ ヘッダー（SP）
--------------------------------------------------------- */

header{
  background: transparent;
  transition: all 0.3s ease 0s;
}
.sc header{
  background: #fff;
}
header .logo{
  width: calc( 100% * 232 / 760 );
  background: #fff;
}
header .buy{
  width: calc( 100% * 177 / 760 );
}
/* アンカートリンクのボタン */
.menuBtn {
  margin-left: auto;
  width: 12.5vw;
  height: 100%;
  z-index: 99;
  display: flex;
  justify-content: center;
  align-items: center;
}
.menuBtn.active {
  position: fixed;
  height: 0;
  top: 5%;
  right: 0;
}
.menuBtn .txt{
  font-size: 2.4vw;
  position: absolute;
  top: 7.5vw;
  line-height: 1;
  color: #1D2086;
  font-weight: bold;
}
.menuBtn.active .txt{
  top: 4.2vw;
  color: #fff;
}
.menuBtn .txt.op{
  display: block;
}
.menuBtn.active .txt.op{
  display: none;
}
.menuBtn .txt.cl{
  display: none;
}
.menuBtn.active .txt.cl{
  display: block;
}
.menu {
  position: relative;
  width: 7.8vw;
  height: 3.5vw;
  margin: -1.8vw 0 0;
}
.menu_line {
  background: #1D2086;
  display: block;
  height: 1.05vw;
  position: absolute;
  transition: transform .3s;
  width: 100%;
}
.menuBtn.active .menu_line {
  background: #fff;
}
.menu_line.center {
  top: calc( 50% - 2px);
  display: none;
}
.menu_line.bottom {
  bottom: 0;
}
.active .menu_line.top{
  top: 2vw;
  transform: rotate(45deg);
}
.active .menu_line.center{
  transform: scaleX(0);
}
.active .menu_line.bottom{
  top: 2vw;
  transform: rotate(135deg);
}

/* テキストリンク */
header .txtLnk {
  display: none;
  position: fixed;
  top: 0;
  height: 100%;
  width: 100%;
  overflow: auto;
  z-index: 98;
}
header .txtLnk .inner ul{
	position: absolute;
	left: 12vw;
	top: 28vw;
}
header .txtLnk .inner ul li{
  /* background: rgba(255,255,255,0.5); */
}
header .txtLnk .inner ul li a{
  display: block;
  height: 13vw;
  width: 76vw;
}
header .txtLnk .inner ul li a span{
  display: none;
}
header .txtLnk .inner ul li.lnk01{
  position: absolute;
  left: 0;
  top: 0;
}
header .txtLnk .inner ul li.lnk02{
  position: absolute;
  left: 0;
  top: 15vw;
}
header .txtLnk .inner ul li.lnk03{
  position: absolute;
  left: 0;
  top: 30vw;
}
header .txtLnk .inner ul li.lnk04{
  position: absolute;
  left: 0;
  top: 45vw;
}
header .txtLnk .inner ul li.lnk05{
  position: absolute;
  left: 0;
  top: 66vw;
}
header .txtLnk .inner ul li.lnk05 a{
  height: 19vw;
}





main {
  line-height: 2.2;
}
/* ---------------------------------------------------------
 　■ メインビジュアル
--------------------------------------------------------- */
.mainimg .buy {
  position: absolute;
  left: 7%;
  bottom: 9%;
  width: 60%;
}

/* ---------------------------------------------------------
 　■ 旅行や出張の際の携帯にも便利な「マルチプロバイオティクスサプリメント」誕生！
--------------------------------------------------------- */
.borneBox {
  padding: 19.5% 5% 17%;
	background-image: url(../images/borne_bg01.svg), url(../images/borne_bg02.svg), url(../images/borne_bg03.svg), url(../images/borne_bg04.svg);
	background-position: 5% 3%, 5% 95%, 95% 95%, 95% 3%;
	background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
	background-size: 13%, 10%, 10%, 10%;
}
.borneBox h2 {
  margin: 0 0 20px;
}
.borneBox p{
  font-size: 3.5vw;
  padding: 0;
  background: none
}


/* ---------------------------------------------------------
 　■ こんな経験、ありませんか？
--------------------------------------------------------- */
.recommendBox {
  padding: 3% 3% 9%;;
  font-size: 3.3vw;
}
.recommendBox p{
  margin: 0;
}
.recommendBox .lead{
  font-weight: bold;
}
.recommendBox ul, .recommendBox .buy{
  padding: 0 6%;
}
.recommendBox .buy{
  margin: 2em 0 0;
}
.recommendBox ul li {
  margin: 1em 0;
}
/* ---------------------------------------------------------
 　■ いま、注目を集める「プロバイオティクス」とは？
--------------------------------------------------------- */
.attentionBox {
  padding: 8% 0 2%;
  font-size: 3.4vw;
  line-height: 1.8;
  text-align: center;
}
.attentionBox h2 {
  margin: 0 0 6.5vw;
}
.attentionBox h2 img {
  width: 78%;
  max-width: 587px;
}
.attentionBox p {
  background-image: url(../images/attention_img_sp.png);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 75% auto;
  padding: 29% 0 0;
}


/* ---------------------------------------------------------
 　■ マルチプロバイオティクスサプリメントはここがポイント！
--------------------------------------------------------- */
.pointBox{
  padding: 19% 9.5% 2.5%;
}
.pointBox h2 {
  padding: 0 0 7%;
}
.pointBox p {
  font-size: 2.8vw;
      line-height: 1.9;
}
.attentionBox p .note {
  font-size: 12rem;
  display: block;
}
.pointBox h3 {
    margin: 3vw 0;
    text-align: center;
}
.pointBox .btn {
  padding: 3% 0;
}
.pointBox .btn img {
    max-width: 69.4vw;
}

.pointBox .pointWrap {
    padding-top: calc( 100% * 180 / 616 );
    padding-bottom: 13.5%;
}
.pointBox .pointInner::before{
  padding-top: calc( 100% * 180 / 616 );
}
.pointBox .pointInner::after{
  padding-top: calc( 100% * 30 / 616 );
}
.pointBox .pointInner .flx{
  padding: 0;
}

.pointBox .point1 .pointInner{ background-image: url(../images/point01_wp_sp.png); }
.pointBox .point2 .pointInner{ background-image: url(../images/point02_wp_sp.png); }
.pointBox .point3 .pointInner{ background-image: url(../images/point03_wp_sp.png); }

.pointBox .point1 .pointInner::before{ background-image: url(../images/point01_wp_top_sp.png); }
.pointBox .point2 .pointInner::before{ background-image: url(../images/point02_wp_top_sp.png); }
.pointBox .point3 .pointInner::before{ background-image: url(../images/point03_wp_top_sp.png); }

.pointBox .point1 .pointInner::after{ background-image: url(../images/point01_wp_btm_sp.png); }
.pointBox .point2 .pointInner::after{ background-image: url(../images/point02_wp_btm_sp.png); }
.pointBox .point3 .pointInner::after{ background-image: url(../images/point03_wp_btm_sp.png); }

.pointBox .point1 .pointInner .flx,
.pointBox .point2 .pointInner .flx,
.pointBox .point3 .pointInner .flx{
	flex-wrap: wrap;
}
.pointBox .point1 .pointInner .flx > div ,
.pointBox .point2 .pointInner .flx > div ,
.pointBox .point3 .pointInner .flx > div {
    width: 100%;
}
.pointBox .point1 .pointInner .flx > figure ,
.pointBox .point2 .pointInner .flx > figure {
    width: 100%;
}
.pointBox .point1 h3 img{
  width: 61.6vw;
}
.pointBox .point2 h3 img{
  width: 69.1vw;
}
.pointBox .point3 h3 img{
  width: 58.3vw;
}
.pointBox .point1 p,
.pointBox .point2 p{
  padding: 0 8.2%;
}
.pointBox p.note {
  font-size: 1.65vw;
}
.pointBox .point1 .pointInner .flx > figure img{
  margin-top: 2em;
  width: 70.8vw;
}
.pointBox .point2 .pointInner .flx > figure img{
  margin-top: 0;
  width: 52.6vw;
}
.pointBox .point3 .pointInner .flx > div {
  padding: 0 9%;
}
.pointBox .point3 .pointInner .flx > div h3{
  width: 100%;
}
.pointBox .point3 .pointInner .flx > div p{
  width: 58%;
}
.pointBox .point3 .pointInner .flx > figure {
  position: absolute;
  right: 9%;
  bottom: 0px;
  width: 32%;
  padding: 0;
}

/* ---------------------------------------------------------
 　■ About
--------------------------------------------------------- */
.aboutBox{
  padding: 5.5% 8.2%;
}
.aboutBox::after {
  display: none;
}
.aboutBox .flx {
  display: block;
}
.aboutBox .flx figure {
  width: 100%;
}
.aboutBox .flx > div {
    width: 100%;
}
.aboutBox .flx figure img{
  width: 43vw;
}
.aboutBox .flx dl dt{
  font-size: 3.5vw;
  font-weight: normal;
  border-radius: 2.2vw;
  padding: 1vw 3vw 0.7vw;
}
.aboutBox .flx dl dt.hid-sp{
  display: none;
}
.aboutBox .flx dl dd:first-of-type{
  text-align: center;
  color: #1D2086;
  font-size: 2.8vw;
  font-weight: bold;
  margin: 1.4vw 0 4vw;
}
.aboutBox .flx dl dd:not(:first-of-type){
  font-size: 2.6vw;
  margin: 2vw 0 0;
  line-height: 1.5;
}
.aboutBox .flx > div table th {
  padding-right: 0;
  border: none;
  width: 25vw;
}
.aboutBox .flx > div table th > span {
  display: inline-block;
}
.aboutBox .flx .note {
  font-size: 1.65vw;
  margin: 2vw 0 0;
}
.aboutBox .btn {
    padding: 1% 0 0;
}
/* ---------------------------------------------------------
 　■ 共通フッター
--------------------------------------------------------- */
footer{
}
footer .pageTop {
  bottom: 32.5vw;
}
footer .pageTop img{
  width: 12%;
}
footer nav {
    padding-top: 0;
}
footer nav .footerLogo{
  width: 27vw;
}
footer nav ul {
  font-size: 1.8vw;
  padding: 3.5% 0 4.8%;
}
footer .copy{
 font-size: 1.62vw;
 line-height: 1;
 padding-bottom: 12vw;
}
footer .copy p{
  padding: 0 5.5% 2.5%;
  line-height: 1.5;
}