@charset "utf-8";
/* ---------------------------------------------------------
 　■ サイト全体のベースCSS
--------------------------------------------------------- */

html {
  font-size: 6.25%;
}
body {
  text-align: left;
  line-height: 1.8;
  height: 100%;
  margin: 0;
  -webkit-text-size-adjust: 100%;
  text-align: center;
}
body,select,input,button,textarea{
  color: #282828;
  font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro W3", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-size: 16rem;
  outline: none;
  -moz-font-feature-settings: "palt";
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
}
html, body {
  height: 100%;
  /* transition: all 0.3s ease 0s; */
}
figure{
  margin: 0;
}
ul,dl, dd{
  margin: 0;
  padding: 0;
  list-style-type: none;
}
/* テキストリンク */
a {
  text-decoration: none;
}
@media screen and (min-width: 1025px) {
  a:hover {
    text-decoration: underline;
  }
}
a:focus, *:focus { outline:none; }

/* h2などタイトル */
h1,h2,h3{
  margin: 0;
}
/* 画像 */
img{
  vertical-align: top;
  max-width: 100%;
}


/* ---------------------------------------------------------
 　■ 共通クラス
--------------------------------------------------------- */
/* === フォントカラー === */
.colorRed{
  color: #D00012;
}
.colorWhite{
  color: #fff;
}

/* === micro clearfix === */
.cf:before, .cf:after {
  content: "";
  display: table;
}
.cf:after {
  clear: both;
}
/* === PC・SP出し分け === */

@media screen and (min-width: 761px) {
  .hid-pc {
    /* PCのみ非表示 */
    display: none;
  }
}
@media screen and ( max-width: 760px) {
  .hid-sp {
    /* SPのみ非表示 */
    display: none;
  }
}

/* === 全体サイズ === */
header .headerInner,
main,
footer{
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
}
/* ---------------------------------------------------------
 　■ ヘッダー
--------------------------------------------------------- */
header{
  /* position: absolute;
  left: 0;
  top: 0; */
  width: 100%;
  z-index: 10;
  background: #fff;
  position: fixed;
}
header .headerInner{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
header .logo{
  width: 200px;
}
header .buy{
  width: 266px;
}
@media screen and ( min-width: 761px) {
  .menuBtn, .txtLnk{
    display: none;
  }
}

/* ---------------------------------------------------------
 　■ メインビジュアル
--------------------------------------------------------- */
.mainimg {
  position: relative;
}
.mainimg .buy{
  position: absolute;
  left: 8%;
  bottom: 6%;
  width: 35%;
}

/* ---------------------------------------------------------
 　■ 旅行や出張の際の携帯にも便利な「マルチプロバイオティクスサプリメント」誕生！
--------------------------------------------------------- */
.borneBox {
  padding: 10%;
}
.borneBox h2{
  margin: 0 0 40px;
}
.borneBox p{
  font-size: 27rem;
  padding: calc( 100% * 90 / 1280 ) 15% calc( 100% * 85 / 1280 );
  margin: 0;
	background-image: url(../images/borne_bg01.svg), url(../images/borne_bg02.svg), url(../images/borne_bg03.svg), url(../images/borne_bg04.svg);
	background-position: left top, left bottom, right bottom, right top;
	background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
	background-size: 13%, 10%, 10%, 10%;
}

/* ---------------------------------------------------------
 　■ こんな経験、ありませんか？
--------------------------------------------------------- */
.recommendBox {
  background-image: url(../images/bg_blue.png);
  background-position: center top;
  background-repeat: repeat;
  padding: 10%;
  font-size: 28rem;
}
.recommendBox .lead{
  margin: 2em 0;
}
.recommendBox ul li {
  margin: 2em 0;
}

/* ---------------------------------------------------------
 　■ いま、注目を集める「プロバイオティクス」とは？
--------------------------------------------------------- */
.attentionBox {
  font-size: 27px;
  text-align: left;
  padding: 10% 14% 5%;
  background: #fff;
}
.attentionBox h2 {
  text-align: center;
  margin: 0 0 1em;
}
.attentionBox p {
  background-image: url(../images/attention_img_pc.png);
  background-position: right top;
  background-repeat: no-repeat;
  background-size: 18.8% auto;
  padding: 0 25% 0 0;
}
.attentionBox p sup{
  font-size: 12rem;
  font-weight: bold;
}
.attentionBox p .note {
  font-size: 14rem;
}

/* ---------------------------------------------------------
 　■ マルチプロバイオティクスサプリメントはここがポイント！
--------------------------------------------------------- */
.pointBox {
	background-image: url(../images/bg_blue.png);
	background-position: center top;
	background-repeat: repeat;
	position: relative;
  overflow: hidden;
  padding: 15% 10.6% 10%;
}
.pointBox::before {
	border-width: 10vw 49.3vw 0 49.3vw;
	border-style: solid;
	border-color: #ffffff transparent transparent transparent;
	position: absolute;
	left: 0;
	top: 0px;
	width: 0px;
	height: 0px;
	content: "";
	display: block;
}
@media screen and (min-width: 1280px) {
  .pointBox::before {
    border-width: 90px 640px 0 640px;
  }
}
.pointBox h2{
  padding: 0 0 20%;
}
.pointBox .pointWrap{
  padding-top: calc( 100% * 180 / 1009 );
  padding-bottom: 10%;
}
.pointBox .pointInner{
  background-position: center top;
  background-repeat: repeat-y;
  background-size: 100% auto;
  position: relative;
  text-align: left;
}
.pointBox .pointInner::before {
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: 100% auto;
  position: absolute;
  left: 0;
  bottom: 99%;
  width: 100%;
  content: "";
  display: block;
  padding-top: calc( 100% * 180 / 1009 );
}
.pointBox .pointInner::after {
  background-position: 0 bottom;
  background-repeat: no-repeat;
  background-size: 100% auto;
  position: absolute;
  left: 0;
  top: 99%;
  width: 100%;
  content: "";
  display: block;
  padding-top: calc( 100% * 10 / 1009 );
}
.pointBox .pointInner .flx{
  display: flex;
  justify-content: space-between;
  position: relative;
  padding: 0 5.5%;
}
.pointBox .pointInner .flx > figure{
	display: flex;
	justify-content: center;
	align-items: flex-end;
}

.pointBox .point1 .pointInner{ background-image: url(../images/point01_wp_pc.png); }
.pointBox .point2 .pointInner{ background-image: url(../images/point02_wp_pc.png); }
.pointBox .point3 .pointInner{ background-image: url(../images/point03_wp_pc.png); }

.pointBox .point1 .pointInner::before{ background-image: url(../images/point01_wp_top_pc.png); }
.pointBox .point2 .pointInner::before{ background-image: url(../images/point02_wp_top_pc.png); }
.pointBox .point3 .pointInner::before{ background-image: url(../images/point03_wp_top_pc.png); }

.pointBox .point1 .pointInner::after{ background-image: url(../images/point01_wp_btm_pc.png); }
.pointBox .point2 .pointInner::after{ background-image: url(../images/point02_wp_btm_pc.png); }
.pointBox .point3 .pointInner::after{ background-image: url(../images/point03_wp_btm_pc.png); }

.pointBox .point1 .pointInner .flx > div{ width: 52%; }
.pointBox .point1 .pointInner .flx > figure{ width: 43%; }
.pointBox .point2 .pointInner .flx > div{ width: 58%; }
.pointBox .point2 .pointInner .flx > div h3{ margin-bottom: 2em; }
.pointBox .point2 .pointInner .flx > figure{ width: 38.7%; }
.pointBox .point2 .pointInner .flx > figure img{ margin-top: -15%; }
.pointBox .point3 .pointInner .flx > div{ width: 61%; }
.pointBox .point3 .pointInner .flx > figure{ width: 39%; }
.pointBox .point3 .pointInner .flx > div h3{ text-align: center; margin-bottom: 2em; }
.pointBox .point3 .pointInner .flx > figure{ text-align: center; padding: 0 5%; }
.pointBox .point3 .pointInner .flx > figure img{ margin-top: -30%; }

.pointBox p{
  font-size: 23rem;
  margin: 0;
}
.pointBox p.note{
  font-size: 12rem;
}
.pointBox h3{
  margin: 1em 0;
}
.pointBox .btn{
  padding: 3% 0 6%;
  text-align: center;
}
.pointBox .btn img{
  max-width: 75%;
}
.pointBox sup{
  font-size: 50%;
}

/* ---------------------------------------------------------
 　■ About
--------------------------------------------------------- */
.aboutBox{
  padding: calc( 100% * 70 / 1280 ) calc( 100% * 100 / 1280 ) calc( 100% * 90 / 1280 );
  position: relative;
}
.aboutBox::after {
  background-image: url(../images/about_line.png);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: calc( 100% * 1073 / 1280 ) auto;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  content: "";
  display: block;
  padding-top: calc( 100% * 4 / 1073 );
}
.aboutBox h2{
  margin: 30px;
}
.aboutBox .flx{
  display: flex;
  justify-content: space-between;
}
.aboutBox .flx figure{
  text-align: center;
  width: 47%;
}
.aboutBox .flx figure img{
width: 84.5%;
}
.aboutBox .flx > div{
  text-align: left;
  width: 53%;
}
.aboutBox .flx > div table{
  border-collapse: collapse; /* tdスキマ */
}
.aboutBox .flx > div table th{
  font-weight: normal;
  vertical-align: top;
  border-right: 1px solid currentColor;
  padding-right: 1em;
}
.aboutBox .flx > div table th > span{
	display: flex;
	justify-content: space-between;
  width: 100%;
}
.aboutBox .flx > div table td{
  vertical-align: top;
  padding-left: 1em;
}
.aboutBox .flx dl dt{
  background: #1D2086;
  color: #fff;
  font-size: 27rem;
  font-weight: bold;
  border-radius: 17px;
  padding: 7px 30px 5px;
  display: inline-block;
  line-height: 1;
}
.aboutBox .flx dl dd{
  font-size: 20rem;
  margin: 1em 0 2em;
}
.aboutBox .flx .note{
  font-size: 12rem;
}
.aboutBox .btn{
  padding: 5% 0 0;
}

/* ---------------------------------------------------------
 　■ footer
--------------------------------------------------------- */
footer .pageTop{
  width: 100%;
  position: fixed;
  right: 0;
  bottom: 180px;
  text-align: right;
}
footer .pageTop .inner{
  width: 90%;
  max-width: 1230px;
  margin: 0 auto;
  height: 1px;
}
footer .pageTop img{
  width: 130px;
}
footer{
  position: relative;
}
footer nav{
  padding-top: calc( 100% * 60 / 1280 );
}
footer nav .footerLogo{
  width: 278px;
  display: inline-block;
}
footer nav ul{
  padding: calc( 100% * 40 / 1280 ) 0 calc( 100% * 30 / 1280 );
  display: flex;
  justify-content: center;
  font-size: 15rem;
  line-height: 1;
}
footer nav ul li{
	padding: 0 20px;
	position: relative;
}
footer nav ul li a{
	color: #282828;
}
footer nav ul li + li::before {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 1px;
  height: 100%;
  content: "";
  display: block;
  background: #282828;
}
footer .copy{
  font-size: 12px;
  background-image: url(../images/bg_blue.png);
  background-position: center top;
  background-repeat: repeat;
  padding-bottom: calc( 100% * 100 / 1280 );
}
footer .copy p{
  margin: 0;
  background: #fff;
  padding-bottom: 1em;
}
footer nav ul{
}