@charset "UTF-8";

*{
  box-sizing:border-box;
  max-width:100%;
  margin:0;
  padding:0;
}
html {
  -webkit-text-size-adjust: 100%;	
  font-display: swap;
  margin:0;
  padding:0;
}
body {
  font-family: 'Noto Sans JP', "Helvetica Neue", Helvetica, Arial, sans-serif,'游ゴシック体', 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
  font-size:clamp(14px,2.083vw,16px);
  line-height: 2;
  letter-spacing:.75pt;
  font-weight: 400;
  hanging-punctuation: allow-end;
  color: #434655;
  word-break: break-all;
  overflow-x:hidden;
  background:#f8f8fa;
}
#wrapper{
	margin:0;
	padding:0;
  overflow:hidden;
}


/* header */
header{
    display:flex;
    justify-content:center;
    align-items:center;
    height:60px;
    padding:0 10px;
    background:#fff;
}
div.header{
    position:relative;
    width:1220px;
    margin:0 auto;
}
header a#logo{
  display:block;
  width:172.8px;
  height:40px;
  transition:0.2s ease;
}
header a#logo:hover{opacity:0.7;}

main{
  position:relative;
  margin:0 auto;
}

footer{margin-top:100px;}
#copyright{
  color:#fff;
  font-size:14px;
  text-align:center;
  line-height:1;
  padding:15px;
  background:#2B437C;
}
#pagetop{
  position:fixed;
  right:15px;
  bottom:15px;
  border-radius:4px;
  box-shadow:5px 5px 16px rgba(0,0,0,0.1);
  overflow:hidden;
}
#pagetop img{
  display:inline-block;
  vertical-align:bottom;
}

/* メインビジュアル */
div.mv-section{
  width:100%;
  height:450px;
  background:url(../img/about/mv-bk.png) center/cover no-repeat;
  padding:0 15px;
}
@supports (background:url(../img/about/mv-bk.png)) {
  div.mv-section {background:url(../img/about/webp/mv-bk.webp) center/cover no-repeat;}
}

div.mv-section div.contents{
  display:flex;
  justify-content:space-between;
  width:1200px;
  height:100%;
  margin:0 auto;
}
div.mv-section div{height:100%;}
div.mv-section div.txt{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  width:55%;
}
div.mv-section div.txt h1{
  color:#fff;
  font-size:clamp(14px,1.66vw,20px);
  font-weight:bold;
  line-height:1;
  padding:10px 15px;
  background:#2B437C;
  box-shadow:0 3px 6px rgba(0,0,0,0.1);
}
div.mv-section div.txt span.title{
  color:#2B437C;
  font-size:clamp(24px,4vw,48px);
  line-height:1.5;
  font-weight:600;
  padding-top:15px;
}
div.mv-section div.img{
  position:relative;
  top:40px;
  width:45%;
}
div.mv-section div.img img{
  display:block;
  max-height:500px;
  margin:0 auto;
}


@media screen and (max-width:768px){

div.mv-section{
  height:clamp(500px,133.33vw,1024px);
  padding:0;
  background:url(../img/about/mv-bk-sp.png) center/cover no-repeat;
}
@supports (background:url(../img/about/mv-bk-sp.webp)) {
  div.mv-section {background:url(../img/about/webp/mv-bk-sp.webp) center/cover no-repeat;}
}
div.mv-section div.contents{
  flex-direction:column;
  justify-content:flex-start;
  align-items:center;
  padding-top:clamp(30px,10.416vw,80px);
}
div.mv-section div{height:auto;}
div.mv-section div.txt{
  width:auto;
  align-items:center;
}
div.mv-section div.txt h1{font-size:clamp(14px,3.125vw,24px);}
div.mv-section div.txt span.title{
  font-size:clamp(30px,7.8125vw,60px);
  text-align:center;
  letter-spacing:-1pt;
  padding-left:0.5em;
}
div.mv-section div.img{
  top:clamp(20px,5.208vw,40px);
  width:auto;
}
div.mv-section div.img img{
  height:clamp(350px,91.145vw,700px);
  max-height:initial;
}

#pagetop{
  width:40px;
  height:40px;
}

}


/* コンテンツ */
.jp-style{
  font-family: "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
  font-weight:600;
}
strong{font-weight:600;}
.dot-col{color:#00BD9E;}
.d-col{color:#2B437C;}
.p-col{color:#008DB7;}
.g-col{color:#B79B00;}
.s-col{color:#627E89;}
.b-col{color:#B25448;}
.br768{display:none;}


.fadein_up {
  opacity: 0;
  transform: translate(0, 30px);
  transition: 0.6s;
}
.fadein_up.is-show {
  opacity: 1;
  transform: translate(0, 0);
}


div.mv-section + div.section{margin-top:clamp(60px,13.02vw,100px);}
div.section + div.section{margin-top:clamp(60px,10.416vw,80px);}
div.section div.contents{
  width:1230px;
  padding:0 15px;
  margin:0 auto;
}
div.section div.contents + div.contents{margin-top:40px;}

/* セクションごとのコンテンツ */
div.h-s{margin:clamp(20px,5.208vw,40px) auto 0;}


span.eg{
  position:relative;
  display:block;
  color:#2B437C;
  font-size:clamp(14px,2.604vw,20px);
  line-height:1;
  font-weight:900;
  text-align:center;
  padding-top:25px;
}
span.eg::before{
  position:absolute;
  content:"";
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:18.98px;
  height:15px;
  background:url(../img/about/icon/diamond-square-i.svg) center/contain no-repeat;
}
h2{
  font-size:clamp(30px,5.208vw,40px);
  font-weight:900;
  line-height:1.5;
  text-align:center;
  padding-top:10px;
}
h2 + *{margin-top:clamp(20px,5.208vw,40px);}

h3{
  color:#2B437C;
  font-size:clamp(26px,4.6875vw,36px);
  font-weight:900;
  line-height:1.5;
}
h3 + p{margin-top:20px;}

div.column p + p{padding-top:1em;}

h3.center{text-align:center;}
p.read{text-align:center;}

a.btn{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  width:300px;
  height:50px;
  color:#fff;
  font-size:16px;
  font-weight:600;
  line-height:1;
  background:#00BD9E;
  border-radius:25px;
  box-shadow:4px 4px 8px rgba(0,0,0,0.1);
  margin-top:20px;
  transform:translateY(0);
  transition:0.2s ease-out;
}
a.btn:hover{
  opacity:0.8;
  transform:translateY(-5px);
}
a.btn::after{
  position:absolute;
  content:"";
  top:50%;
  right:20px;
  transform:translateY(-50%);
  display:inline-block;
  width:20px;
  height:20px;
  background:url(../img/icon/arrow-i-wht.svg) center/contain no-repeat;
  transition:0.2s ease-out;
}
a.btn:hover::after{right:15px;}

a.btn.lr-s{
  margin-left:auto;
  margin-right:auto;
}

/* 2カラムタイプ */
div.column {
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
}
div.column div.visual{
  width:clamp(300px,33.33vw,400px);
  box-shadow:10px 10px 32px rgba(0,0,0,0.1);
  background:#fff;
  border-radius:10px;
  overflow:hidden;
}
div.column img{
  display:inline-block;
  vertical-align:bottom;
}
div.column div.txt{width:calc(100% - clamp(340px,41.666vw,500px));}


/* ワンカラムタイプ */
div.column div.head{
  position:relative;
  width:886px;
  margin:0 auto clamp(20px,3.33vw,40px);
}
div.column div.head img{
  display:inline-block;
  vertical-align:bottom;
}

/* ランクのリスト */
div.column div.visual span.heading{
  display:block;
  color:#fff;
  font-size:16px;
  font-weight:600;
  line-height:1;
  text-align:center;
  padding:15px 0;
  background:#2B437C;
}
div.column div.visual span.heading span{
  position:relative;
  padding-left:30px;
}
div.column div.visual span.heading span::before{
  position:absolute;
  content:"";
  top:50%;
  left:0;
  transform:translateY(-50%);
  width:22.18px;
  height:15px;
  background:url(../img/about/icon/crown-i.svg) center/contain no-repeat;
}

div.column ul.rank-list li{
  display:flex;
  justify-content:space-between;
  padding:15px 20px;
  font-size:16px;
}
div.column ul.rank-list li span.label{
  position:relative;
  font-weight:600;
  padding-left:25px;
}
div.column ul.rank-list li span.label::before{
  position:absolute;
  content:"";
  display:inline-block;
  top:50%;
  left:0;
  transform:translateY(-50%);
  margin-top:2px;
  width:18.98px;
  height:15px;
}
div.column ul.rank-list li span.pt{font-family:"Oswald";}

div.column ul.rank-list li.diamond{background: linear-gradient(90deg, #2b437c1a, transparent);}
div.column ul.rank-list li.diamond span.label{color:#2B437C;}
div.column ul.rank-list li.diamond span.label::before{background:url(../img/index/diamond-i.svg) center/contain no-repeat;}

div.column ul.rank-list li.platinum{background: linear-gradient(90deg, #008db71a, transparent);}
div.column ul.rank-list li.platinum span.label{color:#298DB7;}
div.column ul.rank-list li.platinum span.label::before{background:url(../img/index/platinum-i.svg) center/contain no-repeat;}

div.column ul.rank-list li.gold{background: linear-gradient(90deg, #b79b001a, transparent);}
div.column ul.rank-list li.gold span.label{color:#B79B00;}
div.column ul.rank-list li.gold span.label::before{background:url(../img/index/gold-i.svg) center/contain no-repeat;}

div.column ul.rank-list li.silver{background: linear-gradient(90deg, #627e891a, transparent);}
div.column ul.rank-list li.silver span.label{color:#627E89;}
div.column ul.rank-list li.silver span.label::before{background:url(../img/index/silver-i.svg) center/contain no-repeat;}

div.column ul.rank-list li.bronze{background: linear-gradient(90deg, #b254481a, transparent);}
div.column ul.rank-list li.bronze span.label{color:#B25448;}
div.column ul.rank-list li.bronze span.label::before{background:url(../img/index/bronze-i.svg) center/contain no-repeat;}


@media screen and (max-width:768px){

.br768{display:inline;}
br.br768-non{display:none;}
p.read{
  text-align:left;
  width:400px;
  margin-left:auto;
  margin-right:auto;
}
h3{
  font-size:clamp(26px,4.166vw,32px);
  text-align:center;
}
h3.sp-decoration{
  position:relative;
  width:400px;
  letter-spacing:-0.25pt;
  padding:25px 0 22px;
  text-align:center;
  margin-left:auto;
  margin-right:auto;
}
h3.sp-decoration::before,
h3.sp-decoration::after{
  position:absolute;
  content:"";
  display:inline-block;
  left:50%;
  transform:translateX(-50%);
  width:345px;
  height:14.53px;
  background:url(../img/about/sp-deco.svg) center/100% no-repeat;
}
h3.sp-decoration::before{top:0;}
h3.sp-decoration::after{bottom:0;}

a.btn{
  margin-left:auto;
  margin-right:auto;
}

/* セクションごとのコンテンツ */
div.h-s{width:400px;}
div.column {flex:content;}
div.column div{margin:0 auto;}

/* order1 */
div.column div.visual{
  order:1;
  width:400px;
  box-shadow:5px 5px 16px rgba(0,0,0,0.1);
}
/* order2 */
div.column div.txt{
  order:2;
  width:400px;
  margin-top:25px;
}

/* ワンカラムタイプ order1 */
div.column div.head{order:1;}
div.column div.head img{
  margin-left:-15px;
  width:calc(100% + 30px);
  max-width:initial;
}
/* order2 */
div.column.reverse div.txt{
  order:2;
  margin-top:0;
}
/* order3 */
div.column.reverse div.visual{
  order:3;
  margin-top:20px;
}

}

/* ランク特典とは？ */
div.scroll-wrap{
  box-shadow:10px 10px 32px rgba(0,0,0,0.1);
  border-radius:10px;
}
div.graph-box{width:1200px;}

/* ランク詳細 */
span.h4-style{
  position:relative;
  display:block;
  font-size:clamp(20px,3.125vw,24px);
  font-weight:900;
  text-align:center;
  padding-bottom:5px;
}
span.h4-style::before{
  position:absolute;
  content:"";
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  display:inline-block;
  width:30px;
  height:4px;
  background:#434655;
}
div.rank-detail{
  position:relative;
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  min-height:300px;
  background:#fff;
  box-shadow:10px 10px 32px rgba(0,0,0,0.1);
  border-radius:10px;
}
div.rank-detail::before{
  position:absolute;
  content:"";
  top:50%;
  left:0;
  transform:translateY(-50%);
  display:inline-block;
  height:80%;
  width:5px;
  border-radius:3px;
  background:#434655;
}
div.rank-detail:nth-child(n + 2){margin-top:20px;}

div.rank-detail div.label{
  display:flex;
  justify-content:center;
  align-items:center;
  width:280px;
}
div.rank-detail div.txt{width:calc(100% - 280px);}
div.rank-detail div.txt h3{
  color:#434655;
  font-size:clamp(24px,2.33vw,28px);
}
div.rank-detail div.txt h3 span.min{
  display:inline-block;
  font-size:18px;
}

div.rank-detail div.bonus-info{
  display:flex;
  align-items:center;
  margin:20px auto 0;
}
div.rank-detail div.bonus-info span.heading{
  display:flex;
  justify-content:center;
  writing-mode: vertical-rl;
  width:35px;
  min-height:140px;
  color:#fff;
  font-weight:500;
  line-height:1;
  padding:1em 10px;
  margin-right:10px;
  background:#434655;
  border-radius:2px;
}
div.rank-detail div.bonus-info div.img{width:310px;}
div.rank-detail div.bonus-info div.img img{
  display:inline-block;
  vertical-align:bottom;
  width:310px;
  height:140px;
}
div.rank-detail div.bonus-info ul.square-list{
  position:relative;
  width:calc(100% - 345px);
}
div.rank-detail div.bonus-info ul.square-list li{
  position:relative;
  padding-left:25px;
}
div.rank-detail div.bonus-info ul.square-list li::before{
  position:absolute;
  content:"";
  display:inline-block;
  top:10px;
  left:0;
  width:18.98px;
  height:15px;
  background:url(../img/about/icon/diamond-square-i.svg) center/contain no-repeat;
}

/* プラスマーク */
div.rank-detail div.bonus-info div.img + ul.square-list{padding-left:35px;}
div.rank-detail div.bonus-info div.img + ul.square-list::before{
  position:absolute;
  content:"+";
  display:inline-block;
  top:50%;
  left:9px;
  transform:translateY(-50%);
  font-size:24px;
  font-weight:900;
  line-height:1;
}

/* ダイヤモンド */
div.rank-detail.diamond::before{background:#2B437C;}
div.rank-detail.diamond div.label img{
  width:181.1px;
  height:81.12px;
}
div.rank-detail.diamond div.txt h3{color:#2B437C;}
div.rank-detail.diamond div.bonus-info span.heading{background:#2B437C;}
div.rank-detail.diamond div.bonus-info ul.square-list::before{color:#2B437C;}
div.rank-detail.diamond div.bonus-info ul.square-list li::before{background:url(../img/about/icon/diamond-square-i.svg) center/contain no-repeat;}

/* プラチナ */
div.rank-detail.platinum::before{background:#008DB7;}
div.rank-detail.platinum div.label img{
  width:184.81px;
  height:80.72px;
}
div.rank-detail.platinum div.txt h3{color:#008DB7;}
div.rank-detail.platinum div.bonus-info span.heading{background:#008DB7;}
div.rank-detail.platinum div.bonus-info ul.square-list::before{color:#008DB7;}
div.rank-detail.platinum div.bonus-info ul.square-list li::before{background:url(../img/about/icon/platinum-square-i.svg) center/contain no-repeat;}

/* ゴールド */
div.rank-detail.gold::before{background:#B79B00;}
div.rank-detail.gold div.label img{
  width:94.76px;
  height:83.6px;
}
div.rank-detail.gold div.txt h3{color:#B79B00;}
div.rank-detail.gold div.bonus-info span.heading{background:#B79B00;}
div.rank-detail.gold div.bonus-info ul.square-list::before{color:#B79B00;}
div.rank-detail.gold div.bonus-info ul.square-list li::before{background:url(../img/about/icon/gold-square-i.svg) center/contain no-repeat;}

/* シルバー */
div.rank-detail.silver::before{background:#627E89;}
div.rank-detail.silver div.label img{
  width:112px;
  height:78.87px;
}
div.rank-detail.silver div.txt h3{color:#627E89;}
div.rank-detail.silver div.bonus-info span.heading{background:#627E89;}
div.rank-detail.silver div.bonus-info ul.square-list::before{color:#627E89;}
div.rank-detail.silver div.bonus-info ul.square-list li::before{background:url(../img/about/icon/silver-square-i.svg) center/contain no-repeat;}

/* ブロンズ */
div.rank-detail.bronze::before{background:#B25448;}
div.rank-detail.bronze div.label img{
  width:153.36px;
  height:78.86px;
}
div.rank-detail.bronze div.txt h3{color:#B25448;}
div.rank-detail.bronze div.bonus-info span.heading{background:#B25448;}
div.rank-detail.bronze div.bonus-info ul.square-list::before{color:#B25448;}
div.rank-detail.bronze div.bonus-info ul.square-list li::before{background:url(../img/about/icon/bronze-square-i.svg) center/contain no-repeat;}

@media screen and (max-width:1024px){

div.rank-detail-wrap{
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
}  
div.rank-detail{
  flex-direction:column;
  width:calc((100% - 40px)/2);
  padding:40px clamp(15px,2.604vw,20px);
}
div.rank-detail::before{
  top:0;
  left:50%;
  transform:translate(-50%,0);
  height:5px;
  width:80%;
}
div.rank-detail:nth-child(n + 2){margin-top:0;}
div.rank-detail:nth-child(n + 3){margin-top:40px;}

div.rank-detail div.label{width:auto;}
div.rank-detail div.txt{
  width:100%;
  margin-top:30px;
}
div.rank-detail div.txt h3{text-align:center;}
div.rank-detail div.txt h3 span.min{display:block;}

div.rank-detail div.bonus-info{flex-direction:column;}
div.rank-detail div.bonus-info span.heading{
  display:block;
  width:100%;
  writing-mode:initial;
  min-height:initial;
  text-align:center;
  letter-spacing:0.25pt;
  padding:10px;
  margin:0 auto 10px;
}
div.rank-detail div.bonus-info div.img{width:100%;}
div.rank-detail div.bonus-info div.img img{
  width:100%;
  height:auto;
}
div.rank-detail div.bonus-info ul.square-list{width:100%;}

/* プラスマーク */
div.rank-detail div.bonus-info div.img + ul.square-list{padding:45px 0 0;}
div.rank-detail div.bonus-info div.img + ul.square-list::before{
  top:10px;
  left:50%;
  transform:translate(-50%,0);
}

}

@media screen and (max-width:768px){

div.scroll-wrap{box-shadow:5px 5px 16px rgba(0,0,0,0.1);}
div.graph-box{
  width:768px;
  max-width:initial;
}  

div.rank-detail-wrap{flex-direction:column;}  
div.rank-detail{
  width:100%;
  box-shadow:5px 5px 16px rgba(0,0,0,0.1);
}
div.rank-detail:nth-child(n + 3){margin-top:0;}
div.rank-detail:nth-child(n + 2){margin-top:15px;}

}

/* ランクアップ時には「お祝い」を。 */
div.section.full.style01{background:url(../img/about/mv-bk.png) center/cover no-repeat;}
@supports (background:url(../img/about/mv-bk.png)) {
  div.section.full.style01 {background:url(../img/about/webp/mv-bk.webp) center/cover no-repeat;}
}

div.section.full.style01 div.contents{padding:clamp(60px,10.416vw,80px) 15px;}
div.decoration{
  position:relative;
  display:table;
  text-align:center;
  padding:0 40px 0 80px;
  margin:0 auto;
}
div.decoration h2{
  position:relative;
  font-size:clamp(30px,4.5vw,54px);
  line-height:1.3;
  margin-top:0;
}
div.decoration p{
  font-size:clamp(14px,1.66vw,20px);
  margin-top:10px;
  padding-right:1em;
}
div.decoration::before,
div.decoration::after{
  position:absolute;
  content:"";
  display:inline-block;
  top:50%;
  transform:translateY(-50%);
  width:56.5px;
  height:140px;
}
div.decoration::before{
  left:0;
  background:url(../img/about/leaf-l.svg) center/contain no-repeat;
}
div.decoration::after{
  right:0;
  background:url(../img/about/leaf-r.svg) center/contain no-repeat;
}

div.decoration + span.heading{
  display:block;
  font-size:clamp(16px,1.953vw,20px);
  text-align:center;
  font-weight:600;
  margin-top:40px;
}
div.rank-bonus-wrap{
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  margin:10px auto 0;
}
div.rank-bonus-wrap div.box{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  width:calc((100% - 60px)/4);
  padding:20px;
  background:#fff;
  border-radius:10px;
  box-shadow:10px 10px 32px rgba(0,0,0,0.1);
}
div.rank-bonus-wrap div.box p{
  font-size:14px;
  font-weight:600;
  text-align:center;
  line-height:1.5;
  padding-top:20px;
}
div.rank-bonus-wrap div.box p span.pt{
  display:block;
  font-size:24px;
}

/* ダイヤモンドランク */
div.rank-bonus-wrap div.box.diamond{background: linear-gradient(90deg, #2b437c1a, #fff);}
div.rank-bonus-wrap div.box.diamond p{color:#2B437C;}
/* プラチナランク */
div.rank-bonus-wrap div.box.platinum{background: linear-gradient(90deg, #008db71a, #fff);}
div.rank-bonus-wrap div.box.platinum p{color:#008DB7;}
/* ゴールドランク */
div.rank-bonus-wrap div.box.gold{background: linear-gradient(90deg, #b79b001a, #fff);}
div.rank-bonus-wrap div.box.gold p{color:#B79B00;}
/* シルバーランク */
div.rank-bonus-wrap div.box.silver{background: linear-gradient(90deg, #627e891a, #fff);}
div.rank-bonus-wrap div.box.silver p{color:#627E89;}


@media screen and (max-width:1024px){

div.rank-bonus-wrap div.box{width:calc((100% - 40px)/2);}  
div.rank-bonus-wrap div.box:nth-child(n + 3){margin-top:40px;}

}

@media screen and (max-width:768px){

div.section.full.style01{background:url(../img/about/mv-bk-sp.png) center/cover no-repeat;}
@supports (background:url(../img/about/mv-bk-sp.webp)) {
  div.section.full.style01{background:url(../img/about/webp/mv-bk-sp.webp) center/cover no-repeat;}
}

div.decoration{padding:0;}
div.decoration h2{padding:0 30px;}
div.decoration p{
  margin-top:20px;
  padding-right:0;
}
div.decoration::before,
div.decoration::after{display:none;}

div.decoration h2::before,
div.decoration h2::after{
  position:absolute;
  content:"";
  display:inline-block;
  top:50%;
  transform:translateY(-50%);
  width:32.29px;
  height:80px;
}
div.decoration h2::before{
  left:-10px;
  background:url(../img/about/leaf-l.svg) center/contain no-repeat;
}
div.decoration h2::after{
  right:-10px;
  background:url(../img/about/leaf-r.svg) center/contain no-repeat;
}  
div.rank-bonus-wrap{
  flex-direction:column;
  width:250px;
}
div.rank-bonus-wrap div.box{
  width:100%;
  box-shadow:5px 5px 16px rgba(0,0,0,0.1);
}
div.rank-bonus-wrap div.box:nth-child(n + 3){margin-top:0;}
div.rank-bonus-wrap div.box:nth-child(n + 2){margin-top:15px;}

}



/* 特典のご利用案内 */
div.flex-wrap{
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
}
div.flex-wrap div.box{
  display:flex;
  flex-direction:column;
  width:calc((100% - 80px)/3);
  padding:40px clamp(15px,1.66vw,20px);
  background:#fff;
  border-radius:10px;
  box-shadow:10px 10px 32px rgba(0,0,0,0.1);
}
div.flex-wrap div.box:nth-child(n + 4){margin-top:40px;}
div.flex-wrap div.box div.img{
  display:flex;
  justify-content:center;
  align-items:center;
  width:250px;
  height:250px;
  margin:0 auto;
}
div.flex-wrap div.box h4{
  font-size:16px;
  font-weight:600;
  line-height:1;
  text-align:center;
  margin-top:30px;
}
div.flex-wrap div.box h4 span.min{font-size:12px;}
div.flex-wrap div.box h4 + p{margin-top:20px;}

@media screen and (max-width:1024px){

div.flex-wrap div.box{width:calc((100% - 40px)/2);}  
div.flex-wrap div.box:nth-child(n + 3){margin-top:40px;}

}
@media screen and (max-width:768px){

div.flex-wrap div.box{
  width:100%;
  box-shadow:5px 5px 16px rgba(0,0,0,0.1);
}  
div.flex-wrap div.box + div.box{margin-top:15px;}
div.flex-wrap div.box div.img{height:auto;}

}


/* お客様の声 */
div.review-wrap{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  flex-wrap:wrap;
}

div.review-wrap div.box{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  align-items:center;
  width:calc((100% - 60px)/4);
  min-height:360px;
  padding:clamp(15px,1.66vw,20px) clamp(15px,1.66vw,20px) 0;
  background:#fff;
  box-shadow:10px 10px 32px rgba(0,0,0,0.1);
  border-radius:10px;
}
div.review-wrap div.box:nth-child(2),
div.review-wrap div.box:nth-child(3){margin-top:40px;}

div.review-wrap div.box img{
  display:inline-block;
  vertical-align:bottom;
  margin-top:20px;
}
div.review-wrap div.box:nth-child(1) img,
div.review-wrap div.box:nth-child(4) img{
  width:180px;
  height:180px;
}
div.review-wrap div.box:nth-child(2) img,
div.review-wrap div.box:nth-child(3) img{
  width:190px;
  height:200px;
}

@media screen and (max-width:1024px){

div.review-wrap div.box{width:calc((100% - 40px)/2);}
div.review-wrap div.box:nth-child(2),
div.review-wrap div.box:nth-child(3){margin-top:0;}
div.review-wrap div.box:nth-child(n + 3){margin-top:40px;}

}

@media screen and (max-width:768px){

div.review-wrap{flex-direction:column;}
div.review-wrap div.box{
  width:88%;
  min-height:initial;
  box-shadow:5px 5px 16px rgba(0,0,0,0.1);
}
div.review-wrap div.box:nth-child(even){margin:15px 0 0 auto;}

}


/**********

 スコア・ポイントの貯め方 

 **********/
div.save-mv-section{
  display:flex;
  justify-content:flex-start;
  align-items:center;
  flex-direction:column;
  width:100%;
  height:800px;
  background:url(../img/save/save-bk.png) bottom/cover no-repeat;
}
@supports (background:url(../img/save/save-bk.png)) {
  div.save-mv-section {background:url(../img/save/webp/save-bk.webp) bottom/cover no-repeat;}
}

div.save-mv-section div.txt span.title{
  display:table;
  color:#fff;
  font-size:clamp(14px,1.66vw,20px);
  font-weight:bold;
  line-height:1;
  padding:10px 15px;
  margin:0 auto;
  background:#2B437C;
  box-shadow:0 3px 6px rgba(0,0,0,0.1);
  border-radius:0 0 4px 4px;
}
div.save-mv-section div.txt h1{
  color:#2B437C;
  font-size:clamp(24px,4vw,48px);
  line-height:1.5;
  font-weight:900;
  text-align:center;
  padding-top:30px;
}
div.save-mv-section div.txt h1 span.min{
  display:block;
  font-size:clamp(18px,2vw,24px);
}
div.save-mv-section div.img{
 display:block;
 width:886px; 
 margin:30px auto 0;
}
div.save-mv-section div.img img{
  display:inline-block;
  width:100%;
  vertical-align:bottom;  
}


@media screen and (max-width:768px){

div.save-mv-section{
  height:clamp(500px,133.33vw,1024px);
  background:url(../img/save/save-bk-sp.png) center/cover no-repeat;
}
@supports (background:url(../img/save/save-bk-sp.webp)) {
  div.save-mv-section {background:url(../img/save/webp/save-bk-sp.webp) center/cover no-repeat;}
}

div.save-mv-section div.txt span.title{font-size:clamp(14px,3.125vw,24px);}
div.save-mv-section div.txt h1{
  font-size:clamp(30px,9.635vw,74px);
  padding-top:clamp(20px,5.208vw,40px);
}
div.save-mv-section div.txt h1 span.min{font-size:clamp(16px,3.906vw,30px);}
div.save-mv-section div.img{margin-top:clamp(20px,5.208vw,40px);}

}

p.message{
  position:relative;
  color:#2B437C;
  font-size:clamp(18px,2vw,24px);
  line-height:2;
  text-align:center;
  padding-bottom:60px;
}
p.message::after{
  position:absolute;
  content:"";
  left:50%;
  transform:translateX(-50%);
  bottom:0;
  display:inline-block;
  width:500px;
  height:39.45px;
  background:url(../img/save/read-line.svg) center/contain no-repeat;
}

@media screen and (max-width:768px){

p.message{
  width:400px;
  margin-left:auto;
  margin-right:auto;
}
p.message::after{
  width:345px;
  height:27.22px;
}  

}

/* ポイントの貯め方 */
span.moreover{
  position:relative;
  display:block;
  color:#2B437C;
  font-size:clamp(30px,3.906vw,40px);
  font-weight:600;
  text-align:center;
  padding-top:40px;
}
span.moreover::after{
  position:absolute;
  content:"";
  left:50%;
  transform:translateX(-50%);
  bottom:-80px;
  border:60px solid transparent;
  border-top:20px solid #2B437C;

}
div.tab-btn{
  display:flex;
  justify-content:flex-start;
  align-items:flex-end;
}
div.tab-btn span{
  display:flex;
  justify-content:center;
  align-items:center;
  width:120px;
  height:30px;
  color:#fff;
  font-size:12px;
  font-weight:600;
  border-radius:4px 4px 0 0;
  transition:0.2s ease;
  opacity:0.5;
  cursor:pointer;
}
div.tab-btn span + span{margin-left:5px;}
div.tab-btn span.active{
  height:40px;
  opacity:1;
}

div.tab-btn span.diamond{background:#2B437C;}
div.tab-btn span.platinum{background:#008DB7;}
div.tab-btn span.gold{background:#B79B00;}
div.tab-btn span.silver{background:#627E89;}
div.tab-btn span.bronze{background:#B25448;}

div.tab-box{
  display:none;
  position:relative;
  padding:0;
  background:#fff;
  box-shadow:10px 10px 32px rgba(0,0,0,0.1);
  border-radius:10px;
}
div.tab-box.active{display:block;}
div.tab-box span.label{
  position:absolute;
  top:20px;
  left:20px;
  display:flex;
  justify-content:center;
  align-items:center;
  width:clamp(30px,5.208vw,40px);
  height:clamp(30px,5.208vw,40px);
  color:#fff;
  font-size:clamp(14px,2.343vw,18px);
  font-weight:500;
  background:#333;
  border-radius:4px;
}
div.tab-box div.flex{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:40px clamp(15px,5vw,60px) 20px;
  margin:0 auto;
}
div.tab-box div.flex div.img{
  display:flex;
  justify-content:center;
  width:150px;
}
div.tab-box div.flex div.img img{
  display:inline-block;
  vertical-align:bottom;
  max-height:120px;
}
div.tab-box div.flex div.txt{width:calc(100% - 180px);}

div.tab-box span.heading{
  position:relative;
  display:block;
  font-size:clamp(16px,2.343vw,18px);
  font-weight:600;
  line-height:1.5;
  padding-left:28px;
}
div.tab-box span.heading::before{
  position:absolute;
  content:"";
  top:55%;
  left:0;
  transform:translateY(-50%);
  display:inline-block;
  width:18.98px;
  height:15px;
}
div.tab-box ul.list{padding-top:10px;}
div.tab-box ul.list li{
  font-size:clamp(14px,1.5625vw,16px);
  font-weight:500;
}
div.tab-box ul.list li span.line{
  font-weight:900;
  border-bottom:1px solid #434655;
}

div.tab-box p.read{
  font-size:clamp(10px,1.5625vw,16px);
  text-align:center;
}
div.tab-box span.result{
  display:flex;
  justify-content:center;
  font-size:clamp(12px,1.5625vw,16px);
  font-weight:600;
  margin-top:5px;
  padding:15px 10px;
  color:#fff;
  background:#333;
  border-radius:0 0 10px 10px;
}

/* ダイヤモンド */
div.tab-box.diamond span.label{background:#2B437C;}
div.tab-box.diamond span.heading{color:#2B437C;}
div.tab-box.diamond span.heading::before{background:url(../img/about/icon/diamond-square-i.svg) center/contain no-repeat;}
div.tab-box.diamond span.result{background:#2B437C;}

/* プラチナ */
div.tab-box.platinum span.label{background:#008DB7;}
div.tab-box.platinum span.heading{color:#008DB7;}
div.tab-box.platinum span.heading::before{background:url(../img/about/icon/platinum-square-i.svg) center/contain no-repeat;}
div.tab-box.platinum span.result{background:#008DB7;}

/* ゴールド */
div.tab-box.gold span.label{background:#B79B00;}
div.tab-box.gold span.heading{color:#B79B00;}
div.tab-box.gold span.heading::before{background:url(../img/about/icon/gold-square-i.svg) center/contain no-repeat;}
div.tab-box.gold span.result{background:#B79B00;}

/* シルバー */
div.tab-box.silver span.label{background:#627E89;}
div.tab-box.silver span.heading{color:#627E89;}
div.tab-box.silver span.heading::before{background:url(../img/about/icon/silver-square-i.svg) center/contain no-repeat;}
div.tab-box.silver span.result{background:#627E89;}

/* ブロンズ */
div.tab-box.bronze span.label{background:#B25448;}
div.tab-box.bronze span.heading{color:#B25448;}
div.tab-box.bronze span.heading::before{background:url(../img/about/icon/bronze-square-i.svg) center/contain no-repeat;}
div.tab-box.bronze span.result{background:#B25448;}

@media screen and (max-width:1024px){

div.tab-box div.flex{flex-direction:column;}
div.tab-box div.flex div.txt{
  width:100%;
  margin-top:20px;
}

}

@media screen and (max-width:768px){

div.tab-btn span{
  width:65px;
  font-size:10px;
  letter-spacing:-0.25pt;
}
div.tab-btn span + span{margin-left:2px;}

div.tab-box span.result{
  font-size:16px;
  line-height:1.5;
  text-align:center;
}  

}


/** スコアの貯め方 **/
div.flex-wrap.save-style div.box div.img{
  width:auto;
  height:180px;
  margin-top:30px;
}
div.flex-wrap.save-style div.box span.label{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  color:#2B437C;
  font-size:14px;
  line-height:1.3;
  font-weight:600;
  letter-spacing:0.25pt;
  text-align:center;
}
div.flex-wrap.save-style div.box span.label span{
  color:#fff;
  padding:0 4px;
  background:#2B437C;
  border-radius:2px;
  margin-right:5px;
}

/* スコアリング */
div.scoring-wrap{
  border-top:1px solid #e0e0e0;
  border-bottom:1px solid #e0e0e0;
}
div.scoring-wrap div.box{
  display:flex;
  justify-content:space-between;
  padding:30px 10px;
}
div.scoring-wrap div.box + div.box{border-top:1px solid #e0e0e0;}
div.scoring-wrap div.box span.heading{
  position:relative;
  width:250px;
  font-size:clamp(14px,1.5625vw,16px);
  font-weight:600;
  padding-left:30px;
}
div.scoring-wrap div.box span.heading::after{
  position:absolute;
  content:"";
  top:50%;
  left:0;
  transform:translateY(-50%);
  display:inline-block;
  width:22px;
  height:22px;
  background:url(../img/save/up-i.svg) center/contain no-repeat;
}
div.scoring-wrap div.box p{
  width:calc(100% - 300px);
  font-size:clamp(14px,1.5625vw,16px);
  font-weight:500;
}
/* マイナス要素 */
div.scoring-wrap div.box.minus span.heading{color:#B25448;}
div.scoring-wrap div.box.minus span.heading::after{background:url(../img/save/down-i.svg) center/contain no-repeat;}
div.scoring-wrap div.box.minus p span{color:#B25448;}

@media screen and (max-width:768px){

div.scoring-wrap div.box{
  flex-direction:column;
  padding:15px 10px;
}
div.scoring-wrap div.box span.heading{width:100%;}
div.scoring-wrap div.box p{
  width:100%;
  padding-top:10px;
  margin-top:10px;
  border-top:1px dashed #e0e0e0;
}

}

span.sample-heading{
    display:table;
    color:#fff;
    font-weight:600;
    line-height:1;
    padding:10px;
    margin:0 auto;
    background:#00BD9E;
    border-radius:4px;
}
span.sample-name{
  display:block;
  font-weight:600;
  border-left:5px solid #00BD9E;
  padding-left:10px;
  margin-top:40px;
}

div.scroll-wrap.shadow-non{
  border-radius:0;
  box-shadow:none;
  margin-top:20px;
}
table.scoring-table{
  width:100%;
  min-width:960px;
  table-layout:fixed;
  border-collapse:collapse;
}
table.scoring-table tr th,
table.scoring-table tr td{
  font-size:clamp(14px,1.5625vw,16px);
  font-weight:500;
  text-align:center;
  padding:15px 0;
}
table.scoring-table tr td{padding:25px 0;}
table.scoring-table tr th:first-child{width:80px;}
table.scoring-table tr + tr td{border-top:1px solid #e0e0e0;}
table.scoring-table tr td span{  
  color:#00BD9E;
  font-weight:900;
  padding-right:5px;
}

@media screen and (max-width:768px){

span.sample-name{
  width:400px;
  margin-left:auto;
  margin-right:auto;
}  
div.scroll-wrap.shadow-non{
  width:400px;
  margin-left:auto;
  margin-right:auto;
}

}

/* 計算式 */
div.formula-wrap{
  display:flex;
  justify-content:space-between;
  margin-top:20px;
}
div.formula-wrap div.box{
  position:relative;
  width:calc((100% - 90px)/4);
  display:flex;
  flex-direction:column;
  justify-content:center;
  background:#fff;
  border-radius:10px;
}
div.formula-wrap div.box + div.box::before{
  position:absolute;
  content:"＋";
  top:50%;
  left:-24px;
  transform:translateY(-50%);
  font-size:18px;
  font-weight:900;
  line-height:1;
}
div.formula-wrap div.box:nth-child(3) + div.box::before{content:"＝";}

div.formula-wrap span.heading{
  color:#fff;
  font-size:clamp(14px,1.5625vw,16px);
  font-weight:600;
  text-align:center;
  padding:5px;
  background:#00BD9E;
  border-radius:10px 10px 0 0;
}
div.formula-wrap span.heading span.min{font-size:12px;}

div.formula-wrap span.score{
  font-size:clamp(14px,3.125vw,24px);
  font-weight:500;
  text-align:center;
  padding:20px 5px;
}
div.formula-wrap span.score span{
  color:#00BD9E;
  font-size:40px;
  font-weight:600;
  line-height:1;
  padding-right:0.1em;
}

@media screen and (max-width:768px){

div.formula-wrap{
  flex-direction:column;
  width:400px;
  margin-left:auto;
  margin-right:auto;
}
div.formula-wrap div.box{width:100%;}
div.formula-wrap div.box + div.box{margin-top:40px;}
div.formula-wrap div.box + div.box::before{
  top:-30px;
  left:50%;
  transform:translate(-50%,0);
}
div.formula-wrap div.box:nth-child(3) + div.box::before{
  content:"＝";
  transform:translate(-50%,0) rotate(90deg);
  
}

}


/* 注意点 */
div.attention-wrap{
  padding:clamp(30px,3.33vw,40px) clamp(15px,1.66vw,20px);
  margin-top:40px;
  border:1px solid #e0e0e0;
  border-radius:10px;
}
div.attention-wrap span.heading{
  display:block;
  font-weight:600;
  text-align:center;
}
div.attention-wrap span.heading + ul.dot{margin-top:20px;}

div.attention-wrap ul.dot li{
  position:relative;
  font-size:clamp(14px,1.5625vw,16px);
  padding-left:1em;
}
div.attention-wrap ul.dot li + li{margin-top:0.5em;}
div.attention-wrap ul.dot li::before{
  position:absolute;
  content:"・";
  top:0;
  left:0;
}
div.attention-wrap ul.dot ul.dot{margin-top:0.5em;}

@media screen and (max-width:768px){

div.attention-wrap{
  width:400px;
  margin-left:auto;
  margin-right:auto;
}  

}