@charset "UTF-8";
html,body,div,span,applet,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,
abbr,acronym,address,big,cite,code,
del,dfn,em,img,ins,kbd,q,s,samp,
small,strike,strong,sub,sup,tt,var,
b,u,i,center,
dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td,
article,aside,canvas,details,embed,figure,figcaption,
footer,header,hgroup,menu,nav,
output,ruby,section,summary,
time,mark,audio,video {
  padding: 0;
  margin: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
  border: 0;
}

html {
  line-height: 1;
}

ol,ul {
  list-style: none;
}

body{
  font-family: YuGothic,'Yu Gothic','ヒラギノ角ゴシック','Hiragino Sans','メイリオ', Meiryo,sans-serif;
}

table {
  border-spacing: 0;
  border-collapse: collapse;
}

caption,th,td {
  font-weight: normal;
  text-align: left;
  vertical-align: middle;
}

q,blockquote {
  quotes: none;
}

q:before,
q:after,
blockquote:before,
blockquote:after {
  content: "";
  content: none;
}

a img {
  border: none;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,main,menu,nav,section,summary {
  display: block;
}

sup{
  font-size: 70%;
  vertical-align: top;
}

.com-wrap p {
  font-size: 18px;
  line-height: 1.875;
}
/* ======================================
basic
====================================== */
img {
  width: 100%;
  -webkit-backface-visibility: hidden;
  image-rendering: -webkit-optimize-contrast;
}

/* ======================================
utility style
====================================== */
/* ----- media display ----- */
.pc-on {
  display: block;
}
.sp-on {
  display: none;
}

@media screen and (max-width: 767px) {
  .sp-on {
    display: block;
  }
  .pc-on {
    display: none;
  }
}

/* ======================================
共通
====================================== */
.caption{
  font-size: 12px!important;
}

.float_box{
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  z-index: 510;
}

.float_box .f_btn{
  width: 50px;
  height: 210px;
  border: 2px solid #8C3296;
  border-radius: 8px 0 0 8px;
}

.float_box .f_btn a{
  display: block;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.float_box .f_btn a img{
  width: 36px;
  margin: 0 0 10px;
}

.float_box .f_btn.puple{
  background: #8C3296;
  margin-bottom: 10px;
}

/* ======================================
コンテンツ内
====================================== */

/* @@@@@@@@@@@@@@ mv @@@@@@@@@@@@@@ */

.mv{
  position: relative;
  min-height: 600px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: url(../img/mv_bg.jpg) no-repeat right center/cover;
  padding: 55px min(7vw,70px);
  margin-bottom: 90px;
}

.mv h1{
  width: min(90%,420px);
}

.mv h1 + p{
  width: min(80%,393px);
}

.mv .caption{
  position: absolute;
  bottom: -27px;
  left: 0;
}

/* @@@@@@@@@@@@@@ clinical @@@@@@@@@@@@@@ */

.clinical h2{
  width: min(90%,860px);
  margin: 0 auto 20px;
}

.clinical .clinical_box{
  width: min(90%,860px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto 35px;
}

.clinical .clinical_box li.img{
  width: max(58%,545px);
}

.clinical .clinical_box li.txt {
  width: min(42%,316px);
}

.clinical .clinical_box li.txt img.pc-on{
  width: 230px;
  margin: 0 auto 50px;
}

.clinical .clinical_box li.txt picture img{
  width: min(100%,316px);
  display: block;
  margin: 0 0 25px;
}

/* @@@@@@@@@@@@@@ info @@@@@@@@@@@@@@ */

.info{
  position: relative;
  width: min(90%,860px);
  border: 2px dotted #3c508c;
  border-top: none;
  margin: 0 auto 100px;
}

.info h2{
  position: relative;
  width: calc(100% + 6px);
  background: #3c508c;
  font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
  font-size: 30px;
  color: #fff;
  text-align: center;
  padding: 25px 0;
  margin-left: -3px;
}

.info h2 img{
  width: min(10vw,104px);
  position: absolute;
  top: -36px;
  left: min(4vw,57px);
}

.info ul{
  display: flex;
  justify-content: space-between;
  margin: 5px 30px 10px;
}

.info ul li.img{
  width: 47%;
}

.info ul li.txt{
  width: min(50%,400px);
  padding-top: 40px;
}

.info ul li.txt > img:first-child{
  width: min(100%,357px);
  margin-bottom: 25px;
}

.info ul li.txt > img:nth-child(2){
  width: min(100%,373px);
  margin-bottom: 30px;
}

.btn {
  max-width: 400px;
  line-height: 1;
  margin: 0 auto 10px;
}
.btn a {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transition: 0.3s;
}

.btn a:hover {
  opacity: .7;
}

.info ul + p{
  font-size: 12px;
  margin: 0 30px 25px;
}

.info .out{
  position: absolute;
  bottom: -35px;
  left: 0;
}

/* @@@@@@@@@@@@@@ amazing @@@@@@@@@@@@@@ */

.amazing{
  width: min(90%,860px);
  margin: 0 auto 70px;
}

.amazing ol > li{
  position: relative;
  background: #ebedf3;
  padding: 55px 0 35px;
}

.amazing ol li:not(:last-of-type){
  margin-bottom: 45px;
}

.amazing ol li img.here{
  width: 137px;
  position: absolute;
  top: -27px;
  left: 77px;
}

.amazing ol li img.bubble{
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
}

.amazing ol li.amazing01 img.bubble{
  width: min(80%,208px);
}

.amazing ol li.amazing01 h2{
  width: min(90%,595px);
  margin: 0 auto 40px;
}

.amazing ol li.amazing01 h2 + img{
  display: block;
  width: min(90%,558px);
  margin: 0 auto 60px;
}

.amazing ol li.amazing01 h2 + img + p{
  width: min(90%,650px);
  font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
  margin: 0 auto 15px;
}

.amazing ol li.amazing01 .caption{
  width: min(90%,650px);
  margin: 0 auto;
}

.amazing ol li.amazing02 img.bubble{
  width: min(80%,136px);
}

.amazing ol li.amazing02 h2{
  width: min(90%,406px);
  margin: 0 auto 15px;
}

.amazing ol li.amazing02{
  padding: 55px 0 0;
}

.amazing ol li.amazing02 .prod_box{
  width: min(90%,780px);
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}

.amazing ol li.amazing02 .prod_box .img{
  width: 42%;
  margin-right: min(3vw,30px);
}

.amazing ol li.amazing02 .prod_box .txt{
  width: 45%;
  margin: 0 0 60px;
}

.amazing ol li.amazing02 .prod_box .txt img{
  display: block;
  width: min(100%,230px);
  margin: 0 auto 25px;
}

.amazing ol li.amazing02 .prod_box .txt img + p,
.amazing ol li.amazing03 h2 + p,
.amazing ol li.amazing03 ul li p{
  font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
}

.amazing ol li.amazing02 .caption{
  margin-top: 5px;
}

.amazing ol li.amazing03 h2{
  width: min(90%,337px);
  margin: 0 auto 40px;
}

.amazing ol li.amazing03 h2 + p{
  text-align: center;
  margin: 0 auto 37px;
}

.amazing ol li.amazing03 ul{
  position: relative;
  width: min(90%,780px);
  min-height: 540px;
  margin: 0 auto;
}

.amazing ol li.amazing03 ul li{
  width: min(35%,280px);
  position: absolute;
}

.amazing ol li.amazing03 ul li:first-child{
  top: 0px;
  left: 0;
  z-index: 30;
}
.amazing ol li.amazing03 ul li:nth-child(2){
  top: min(3vw,35px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
}
.amazing ol li.amazing03 ul li:nth-child(3){
  top: 0px;
  right: 0;
  z-index: 10;
}

.amazing ol li.amazing03 ul li p:nth-child(2){
  font-size: 16px;
  line-height: 1.5;
  text-align: center;
  margin: 13px 5px 8px;
}

.amazing ol li.amazing03 ul li p:nth-child(3){
  text-align: center;
  font-weight: 600;
  line-height: 1.5;
  margin: 0 5px;
}

/* @@@@@@@@@@@@@@ award @@@@@@@@@@@@@@ */

.award h2{
  width: min(90%,500px);
  margin: 0 auto 30px;
}

.award h2 + picture img{
  display: block;
  width: min(90%,808px);
  margin: 0 auto 30px;
}

.award .caption{
  width: min(90%,860px);
  margin: 0 auto;
}

.award .question{
  width: min(90%,437px);
  position: relative;
  margin: 115px auto 80px;
}

.award .question::before{
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 52px 80px 0 80px;
  border-color: #9da7c5 transparent transparent transparent;
  position: absolute;
  top: -75px;
  left: 50%;
  transform: translateX(-50%);
}

/* @@@@@@@@@@@@@@ support @@@@@@@@@@@@@@ */

.support{
  width: min(90%,860px);
  margin: 0 auto;
}

.support h2{
  width: min(90%,468px);
  margin: 0 auto 20px;
}

.support ul{
  display: flex;
  margin: 0 auto 45px;
}

.support ul li.img{
  width: 50%;
}

.support ul li.txt{
  width: 46%;
  position: relative;
  margin-top: 45px;
}

.support ul li.txt::before{
  content:"";
  width: min(5vw,53px);
  height: 149px;
  background: url(../img/support_product.png) no-repeat center/contain;
  position: absolute;
  top: -58px;
  right: 16px;
}

.support ul li.txt .caption{
  margin-top: 12px;
}

.support .support_title02{
  width: min(90%,484px);
  margin: 0 auto 40px;
}

.support .support_title02 + p{
  width: min(90%,490px);
  margin: 0 auto 55px;
}

/* @@@@@@@@@@@@@@ why @@@@@@@@@@@@@@ */

.why{
  position: relative;
  width: min(90%,860px);
  padding: 45px;
  border: 10px solid #f2eae0;
  margin: 0 auto 130px;
}

.why::after{
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 52px 80px 0 80px;
  border-color: #e3a7ca transparent transparent transparent;
  position: absolute;
  bottom: -92px;
  left: 50%;
  transform: translateX(-50%);
}

.why .bubble{
  width: 427px;
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
}

.why h2{
  width: min(90%,555px);
  margin: 0 auto 40px;
}

.why .person{
  position: relative;
  display: block;
  width: 262px;
  margin: 0 auto 20px;
}

.why .person::after{
  content: "";
  width: 91px;
  height: 67px;
  background: url(../img/why_answer.png) no-repeat center/contain;
  position: absolute;
  top: 35px;
  right: -90px;
}

.why .why_box01{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 35px;
}

.why .why_box01 .img{
  width: 41%;
  order: 2;
}

.why .why_box01 .txt{
  width: 46%;
  font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
  line-height: 1.8;
  font-size: 18px;
  margin-right: 30px;
}

.why .why_box02{
  display: flex;
  justify-content: space-between;
}

.why .why_box02 .img:first-child{
  width: 40%;
  margin-right: 60px;
}

.why .why_box02 .img:nth-child(2){
  width: 52%;
}

/* @@@@@@@@@@@@@@ care @@@@@@@@@@@@@@ */

.care {
    position: relative;
}
.care h2{
  width: min(90%,404px);
  margin: 0 auto 30px;
}

.care > p.caption {
    position: absolute;
    left: 50%;
    top: 35px;
    transform: translateX(-50%);
    width: 100%;
    text-align: center;
}
.care > p.caption {
    position: absolute;
    left: 50%;
    top: 35px;
    transform: translateX(-50%);
    width: 100%;
    text-align: center;
}

.care .blue_box{
  position: relative;
  width: min(90%,680px);
  background: #3c508c;
  padding: 55px min(7vw,72px) 40px min(14vw,145px);
  border-radius: 45px;
  margin: 0 auto 100px;
}

.care .blue_box .product{
  width: 148px;
  position: absolute;
  top: 50%;
  left: -43px;
  transform: translateY(-50%);
}

.care .blue_box .product + picture img{
  display: block;
  width: min(100%,456px);
  margin: 0 auto 50px;
}

.care .blue_box .product + picture+ picture img{
  display: block;
  width: min(100%,450px);
  margin: 0 auto;
}

.care .blue_box .caption{
  position: absolute;
  bottom: -32px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  text-align: center;
}

/* @@@@@@@@@@@@@@ component @@@@@@@@@@@@@@ */

.component{
  width: min(90%,780px);
  margin: 0 auto;
}

.component .component01 li:first-child,
.component .component02 li:first-child{
  display: flex;
  justify-content: space-between;
  margin-bottom: 60px;
}

.component .component01 li:first-child .img,
.component .component02 li:first-child .img{
  width: 35%;
}

.component .component01 li:first-child .txt,
.component .component02 li:first-child .txt{
  width: 59%;
  font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
}

.component .component01 li:first-child .txt h2{
  width: min(100%,241px);
  margin: 8px 0 20px;
}

.attention_box{
  position: relative;
  padding: 45px 35px 30px;
  border: 1px dashed #be9664;
  margin: 0 0 40px;
}

.attention_box .attention{
  width: 100px;
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
}

.attention_box h3{
  font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
  font-size: 24px;
  color: #be9664;
  text-align: center;
  font-weight: 600;
  margin-bottom: 25px;
}

.attention_box h3 + div{
  display: flex;
  justify-content: space-between;
}

.attention_box h3 + div .img{
  width: 42%;
  text-align: center;
}

.component01 .attention_box:nth-child(2) h3 + div .img img{
  width: 86%;
}

.attention_box h3 + div .txt{
  width: 53%;
  line-height: 1.875;
  font-size: 16px;
}

.component .component02{
  margin: 80px 0 0;
}

.component .component02 li:first-child .txt h2{
  width: min(100%,256px);
  margin: 8px 0 20px;
}

.component .component03{
  width: min(90%,500px);
  margin: 55px auto 70px;
}

.component .component03 img{
  display: block;
  width: min(100%,457px);
  margin: 0 auto 20px;
}

/* @@@@@@@@@@@@@@ reason @@@@@@@@@@@@@@ */

.reason{
  width: min(90%,860px);
  position: relative;
  background: #ebedf3;
  padding: 43px 40px 50px;
  margin: 0 auto 60px;
}

.reason::before,
.reason::after{
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  position: absolute;
  top: 0;
}

.reason::before{
  left: 0;
  border-width: 100px 100px 0 0;
  border-color: #ffffff transparent transparent transparent;
}

.reason::after{
  right: 0;
  border-width: 0 100px 100px 0;
  border-color: transparent #ffffff transparent transparent;
}

.reason h2{
  width: min(100%,392px);
  margin: 0 auto 75px;
}

.reason ol li{
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  padding: 40px;
}

.reason ol li:not(:last-of-type){
  margin-bottom: 70px;
}

.reason ol li .icon{
  width: 70px;
  position: absolute;
  top: -52px;
  left: 50%;
  transform: translateX(-50%);
}

.reason ol li .img{
  width: 44%;
}

.reason ol li .txt{
  width: 51%;
  font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
}

.reason ol li:first-child .txt img{
  display: block;
  width: min(100%,263px);
  margin-bottom: 30px;
}

.reason ol li:nth-child(2) .txt img{
  display: block;
  width: min(100%,348px);
  margin-bottom: 30px;
}

.reason ol li:nth-child(3) .txt img{
  display: block;
  width: min(100%,321px);
  margin-bottom: 30px;
}

.reason ol li:nth-child(4) .txt img{
  display: block;
  width: min(100%,302px);
  margin-bottom: 30px;
}

.reason ol li .txt .caption{
  font-family: "游ゴシック", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
  margin-top: 12px;
}

/* @@@@@@@@@@@@@@ conclusion @@@@@@@@@@@@@@ */

.conclusion{
  width: min(90%,860px);
  margin: 0 auto 90px;
}

.conclusion .conclusion_so{
  display: block;
  width: 120px;
  margin: 0 auto 40px;
}

.conclusion h2{
  width: min(90%,546px);
  margin: 0 auto 50px;
}

/* @@@@@@@@@@@@@@ repeat @@@@@@@@@@@@@@ */

.repeat h2{
  width: min(90%,460px);
  margin: 0 auto 25px;
}
.repeat > p.caption {
    width: min(100%, 860px);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 30px auto;
}

.repeat h2 + img{
  display: block;
  width: min(90%,681px);
  padding-left: 13px;
  margin: 0 auto 15px;
}

.repeat h3{
  display: block;
  width: min(90%,221px);
  margin: 0 auto 30px;
}

.repeat ol{
  width: min(100%,860px);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 0 auto;
}

.repeat ol li{
  width: calc(98% / 2);
  display: flex;
  flex-direction: column;
  background: #c85096;
  color: #fff;
  padding: 40px;
  border-radius: 30px;
  margin-bottom: min(2%,20px);
}

.repeat ol li p:first-child{
  font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
}

.repeat ol li p:last-child{
  text-align: right;
  font-size: 16px;
  font-weight: bold;
  margin-top: auto;
}

.repeat ol + p{
  width: min(100%,860px);
  margin: 0 auto 80px;
}

/* @@@@@@@@@@@@@@ everyday @@@@@@@@@@@@@@ */

.everyday h2{
  display: block;
  width: min(90%,460px);
  margin: 0 auto 40px;
}

.everyday h2 + p{
  font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
  text-align: center;
  margin-bottom: 45px;
}

.everyday h2 + p + picture img{
  display: block;
  width: min(90%,780px);
  margin: 0 auto 115px;
}

.everyday ul{
  width: min(90%,780px);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin: 0 auto 90px;
}

.everyday ul .img{
  position: relative;
  width: 65%;
}

.everyday ul .img .icon{
  width: min(20vw,204px);
  position: absolute;
  top: -80px;
  right: max(-14vw,-145px);
}

.everyday ul .txt{
  width: 30%;
}

.everyday ul .txt p:not(.caption){
  font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
  margin-bottom: 15px;
}

/* @@@@@@@@@@@@@@ step @@@@@@@@@@@@@@ */

.step{
  margin-top: 135px;
}

.step h2{
  width: min(100%,696px);
  margin: 0 auto 55px;
}

.step ol{
  width: min(100%,860px);
  display: flex;
  justify-content: space-between;
  margin: 0 auto 90px;
}

.step ol li{
  width: calc(90% / 4);
}

.step ol li p{
  font-size: 16px;
  margin-top: 10px;
}

/* @@@@@@@@@@@@@@ repayment @@@@@@@@@@@@@@ */

.repayment{
  width: min(100%,860px);
  background: #f8e8eb;
  padding: 40px;
  border-radius: 30px;
  margin: 0 auto 100px;
}

.repayment h2{
  width: min(100%,550px);
  margin: 0 auto 50px;
}

.repayment h2 + p{
  font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
}

.repayment .caption{
  line-height: 1.5;
  margin-top: 20px;
}

/* ========================= スマホ ========================= */
@media screen and (max-width: 767px){
p{
  font-size: 16px;
}
/* ======================================
共通
====================================== */
.caption{
  font-size: 10px;
  line-height: 1.8;
}
.float_box .f_btn {
  width: 30px;
  height: 144px;
}
.float_box .f_btn.puple {
  margin-bottom: 5px;
}
.float_box .f_btn a img {
  width: 24px;
  margin: 0 0 5px;
}

/* ======================================
コンテンツ内
====================================== */
/* @@@@@@@@@@@@@@ mv @@@@@@@@@@@@@@ */
.mv {
  min-height: 350px;
  background: url(../img/mv_bg_sp.jpg) no-repeat right center/cover;
  padding: 33px 27px 38px;
  margin-bottom: 65px;
}
.mv h1 {
  width: min(100%,252px);
}
.mv p{
  width: min(90%,252px);
  line-height: 1;
}
.mv .caption {
  width: 90%;
  bottom: -42px;
  left: 20px;
  transform: inherit;
  line-height: 1.8;
}
/* @@@@@@@@@@@@@@ clinical @@@@@@@@@@@@@@ */

.clinical h2 {
  width: min(90%,335px);
  margin: 0 auto 5px;
}
.clinical .clinical_box {
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin: 0 auto 40px;
}
.clinical .clinical_box li.img {
  width: min(100%,253px);
}
.clinical .clinical_box li.txt {
  width: min(100%,236px);
  margin-top: -16px;
}
.clinical .clinical_box li.txt picture img {
  width: min(100%,236px);
  margin: 0 0 15px;
}
.clinical .clinical_box li.txt picture + .caption{
  text-align: center;
}
/* @@@@@@@@@@@@@@ info @@@@@@@@@@@@@@ */
.info {
  width: min(90%,400px);
  margin: 0 auto 80px;
}
.info h2 {
  width: calc(100% + 4px);
  font-size: 18px;
  line-height: 1.4;
  padding: 12px 0;
  margin-left: -2px;
}
.info h2 img {
  width: min(20vw,73px);
  left: min(2vw,5px);
}
.info ul {
  width: min(90%,400px);
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  margin: 12px auto 4px;
}
.info ul li.img {
  width: 100%;
}
.info ul li.txt {
  width: 100%;
  padding-top: 28px;
}
.info ul li.txt > img:first-child {
  width: min(100%,283px);
  margin-bottom: 20px;
}
.info ul li.txt > img:nth-child(2) {
  width: min(100%,330px);
  margin-bottom: 16px;
}
.info ul + p {
  width: min(90%,400px);
  font-size: 10px;
  line-height: 1.5;
  margin: 0 auto 20px;
}
.info .out {
  bottom: -24px;
}
/* @@@@@@@@@@@@@@ amazing @@@@@@@@@@@@@@ */

.amazing {
  width: min(100%,860px);
  margin: 0 auto 62px;
}
.amazing ol > li {
  padding: 35px 0;
}
.amazing ol > li:not(:last-of-type) {
  margin-bottom: 50px;
}
.amazing ol li img.here {
  width: 89px;
  top: -30px;
  left: 50%;
  transform: translateX(-200%);
}
.amazing ol li.amazing01 img.bubble {
  width: min(100%,138px);
}
.amazing ol li.amazing01 h2 {
  width: min(100%,255px);
  margin: 0 auto 20px;
}
.amazing ol li.amazing01 h2 + img {
  width: min(100%,310px);
  margin: 0 auto 30px;
}
.amazing ol li.amazing02 {
  padding: 33px 0 0;
}
.amazing ol li.amazing02 img.bubble {
  width: min(100%,90px);
}
.amazing ol li.amazing02 h2 {
  width: min(100%,275px);
  margin: 0 auto 15px;
}
.amazing ol li.amazing02 .prod_box {
  width: min(90%,400px);
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin: 0 auto;
}
.amazing ol li.amazing02 .prod_box .img {
  width: 100%;
  margin-right: 0;
}
.amazing ol li.amazing02 .prod_box .txt {
  width: 100%;
  margin: 0 0 35px;
}
.amazing ol li.amazing02 .prod_box .txt img {
  display: none;
}
.amazing ol li.amazing02 .caption {
  margin-top: 10px;
}
.amazing ol li.amazing03 {
  padding: 22px 0 28px;
}
.amazing ol li.amazing03 h2 {
  width: min(100%,231px);
  margin: 0 auto 20px;
}
.amazing ol li.amazing03 h2 + p {
  width: min(90%,400px);
  text-align: left;
  margin: 0 auto 20px;
}
.amazing ol li.amazing03 ul {
  width: min(100%,210px);
  min-height: auto;
}
.amazing ol li.amazing03 ul li {
  width: 100%;
  position: static;
}
.amazing ol li.amazing03 ul li:not(:last-of-type) {
  margin-bottom: 25px;
}
.amazing ol li.amazing03 ul li p:nth-child(2) {
  font-size: 13px;
  margin: 5px 0 4px;
}
.amazing ol li.amazing03 ul li p:nth-child(3) {
  margin: 0;
}
.amazing ol li.amazing03 ul li:nth-child(2) {
  transform: none;
}

/* @@@@@@@@@@@@@@ award @@@@@@@@@@@@@@ */
.award h2 {
  width: min(100%,313px);
  margin: 0 auto 20px;
}
.award h2 + picture img {
  width: min(100%,330px);
  margin: 0 auto 15px;
}
.award .caption {
  width: min(100%,330px);
  margin: 0 auto;
  line-height: 1.5;
}
.award .question {
  width: min(100%,304px);
  position: relative;
  margin: 80px auto 55px;
}
.award .question::before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 35px 55.5px 0 55.5px;
  border-color: #9da7c5 transparent transparent transparent;
  position: absolute;
  top: -53px;
  left: 50%;
  transform: translateX(-50%);
}

/* @@@@@@@@@@@@@@ support @@@@@@@@@@@@@@ */
.support h2 {
  width: min(100%,328px);
  margin: 0 auto 40px;
}
.support ul {
  display: flex;
  flex-direction: column-reverse;
  margin: 0 auto 40px;
}
.support ul li.img {
  width: min(96%,400px);
  margin: 0 auto;
}
.support ul li.txt {
  width: min(100%,300px);
  position: relative;
  margin: 0 auto;
}
.support ul li.txt::before {
  content: "";
  width: 35px;
  height: 108px;
  background: url(../img/support_product.png) no-repeat center/contain;
  position: absolute;
  top: -35px;
  right: 19px;
}
.support ul li.txt .caption {
  margin-top: 4px;
}
.support .support_title02 {
  width: min(100%,315px);
  margin: 0 auto 25px;
}
.support .support_title02 + p {
  width: min(100%,318px);
  margin: 0 auto 50px;
}

/* @@@@@@@@@@@@@@ why @@@@@@@@@@@@@@ */
.why {
  position: relative;
  width: min(90%,400px);
  padding: 32px 22px;
  border: 8px solid #f2eae0;
  margin: 0 auto 85px;
}
.why::after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 35px 55.5px 0 55.5px;
  border-color: #e3a7ca transparent transparent transparent;
  position: absolute;
  bottom: -65px;
  left: 50%;
  transform: translateX(-50%);
}
.why h2 {
  width: min(100%,255px);
  margin: 0 auto 16px;
}
.why .bubble {
  width: 285px;
  top: -19px;
}
.why .person {
  position: relative;
  display: block;
  width: 165px;
  margin: 0 auto 25px;
}
.why .person::after {
  content: "";
  width: 67px;
  height: 51px;
  background: url(../img/why_answer.png) no-repeat center/contain;
  position: absolute;
  top: 30px;
  right: -69px;
}
.why .why_box01 {
  flex-direction: column;
}
.why .why_box01 .img {
  width: 89%;
  order: inherit;
  margin-bottom: 20px;
}
.why .why_box01 .txt {
  width: 100%;
  font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
  line-height: 1.8;
  font-size: 16px;
  margin-right: 0;
}
.why .why_box02 {
  flex-direction: column;
}
.why .why_box02 .img:first-child {
  width: 78%;
  margin: 0 11% 20px;
}
.why .why_box02 .img:nth-child(2) {
  width: 100%;
}

/* @@@@@@@@@@@@@@ care @@@@@@@@@@@@@@ */
.care h2 {
  width: min(100%,280px);
  margin: 0px auto 25px;
}
.care > p.caption {
  top: 25px;
}
.care .blue_box {
  width: min(90%,400px);
  padding: 22px min(6vw,20px) 15px min(28vw,105px);
}
.care .blue_box .product {
  width: 88px;
  left: 10px;
}
.care .blue_box .product + picture img {
  width: min(100%,203px);
  margin: 0 auto 28px;
}
.care .blue_box .product + picture+ picture img {
  width: min(100%,216px);
  margin: 0 auto;
}
.care .blue_box .caption {
  position: absolute;
  bottom: -40px;
  left: 0;
  transform: initial;
  width: 100%;
  text-align: left;
  line-height: 1.5;
}

/* @@@@@@@@@@@@@@ component @@@@@@@@@@@@@@ */
.component .component01 li:first-child,
.component .component02 li:first-child {
  flex-direction: column;
  margin-bottom: 40px;
}
.component .component01 li:first-child .img,
.component .component02 li:first-child .img {
  width: min(75%,250px);
  margin: 0 auto;
}
.component .component01 li:first-child .txt, .component .component02 li:first-child .txt {
  width: 100%;
}
.component .component01 li:first-child .txt h2 {
  width: min(100%,203px);
  margin: 12px auto 20px;
}
.attention_box {
  padding: 30px 16px 22px;
  margin: 0 0 35px;
}
.attention_box .attention {
  width: 70px;
  top: -12px;
}
.attention_box h3 {
  font-size: 16px;
  line-height: 1.4;
  margin-bottom: 16px;
}
.attention_box h3 + div {
  flex-direction: column;
}
.attention_box h3 + div .img {
  width: min(83%,300px);
  margin: 0 auto 16px;
}
.component .component01 .attention_box:nth-child(2) h3 + div .img{
  width: min(70%,300px);
}
.attention_box h3 + div .txt {
  width: 100%;
  font-size: 13px;
}
.component .component02 {
  margin: 56px 0 0;
}
.component .component02 li:first-child .txt h2 {
  width: min(100%,203px);
  margin: 8px auto 20px;
}
.component .component03 {
  width: min(100%,320px);
  margin: 55px auto;
}
.component .component03 img {
  display: block;
  width: min(100%,320px);
  margin: 0 auto 16px;
}
.component .component03 img + .caption{
  line-height: 1.5;
}

/* @@@@@@@@@@@@@@ reason @@@@@@@@@@@@@@ */
.reason {
  width: min(100%,400px);
  padding: 35px 20px 20px;
  margin: 0 auto 40px;
}
.reason::before, .reason::after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  position: absolute;
  top: -1px;
}
.reason::before {
  left: 0;
  border-width: 45px 45px 0 0;
  border-color: #ffffff transparent transparent transparent;
}
.reason::after {
  right: 0;
  border-width: 0 45px 45px 0;
  border-color: transparent #ffffff transparent transparent;
}
.reason h2 {
  width: min(100%,278px);
  margin: 0 auto 62px;
}
.reason ol li {
  flex-direction: column;
  padding: 24px 16px 18px;
}
.reason ol li:not(:last-of-type) {
  margin-bottom: 50px;
}
.reason ol li .icon {
  width: 56px;
  top: -35px;
}
.reason ol li .img {
  width: 83%;
  margin-bottom: 16px;
}
.reason ol li .txt {
  width: 100%;
}
.reason ol li:first-child .txt img {
  width: min(100%,196px);
  margin: 0 auto 15px;
}
.reason ol li:nth-child(2) .txt img {
  width: min(100%,274px);
  margin: 0 auto 15px;
}
.reason ol li:nth-child(3) .txt img {
  width: min(100%,236px);
  margin: 0 auto 15px;
}
.reason ol li:nth-child(4) .txt img {
  width: min(100%,225px);
  margin: 0 auto 15px;
}

/* @@@@@@@@@@@@@@ conclusion @@@@@@@@@@@@@@ */
.conclusion {
  width: min(100%,400px);
  margin: 0 auto 56px;
}
.conclusion .conclusion_so {
  width: 84px;
  margin: 0 auto 18px;
}
.conclusion h2 {
  width: min(100%,288px);
  margin: 0 auto 30px;
}

/* @@@@@@@@@@@@@@ repeat @@@@@@@@@@@@@@ */
.repeat h2 {
  width: min(100%,332px);
  margin: 0 auto 18px;
}
.repeat > p.caption {
    width: min(100%, 335px);
}
.repeat h2 + img {
  width: min(90%,400px);
  padding-left: 0;
  margin: 0 auto 20px;
}
.repeat h3 {
  width: min(100%,155px);
  margin: 0 auto 14px;
}
.repeat ol {
  width: min(100%,335px);
  flex-direction: column;
}
.repeat ol li {
  width: 100%;
  padding: 18px 25px;
  margin-bottom: 9px;
}
.repeat ol li p:last-child {
  font-size: 13px;
}
.repeat ol + p {
  width: min(100%,335px);
  flex-direction: column;
  margin: 0 auto 60px;
}

/* @@@@@@@@@@@@@@ everyday @@@@@@@@@@@@@@ */
.everyday h2 {
  width: min(100%,335px);
  margin: 0 auto 30px;
}
.everyday h2 + p {
  width: min(100%,335px);
  text-align: left;
  margin: 0 auto 32px;
}
.everyday h2 + p + picture img {
  width: min(100%,335px);
  margin: 0 auto 128px;
}
.everyday ul {
  width: min(90%,400px);
  flex-direction: column;
  margin: 0 auto 80px;
}
.everyday ul .img {
  width: 89%;
  margin: 0 auto 24px;
}
.everyday ul .img .icon {
  width: min(38vw,142px);
  top: -90px;
  right: auto;
  left: 50%;
  transform: translateX(-50%);
}
.everyday ul .txt {
  width: 100%;
}
.everyday ul .txt .caption{
  margin-top: 15px;
}

/* @@@@@@@@@@@@@@ step @@@@@@@@@@@@@@ */
.step {
  margin-top: auto;
}
.step h2 {
  width: min(100%,300px);
  margin: 0 auto 37px;
}
.step ol {
  width: min(90%,400px);
  flex-wrap: wrap;
  margin: 0 auto 25px;
}
.step ol li {
  width: calc(93% / 2);
  margin-bottom: 45px;
}
.step ol li p {
  font-size: 13px;
  margin-top: 5px;
}

/* @@@@@@@@@@@@@@ repayment @@@@@@@@@@@@@@ */
.repayment {
  width: min(90%,400px);
  padding: 26px 16px;
  margin: 0 auto 45px;
}
.repayment h2 {
  width: min(100%,300px);
  margin: 0 auto 36px;
}

}/* スマホここまで */

/* ========================= タブレット ========================= */
@media screen and (max-width: 820px) and (min-width: 767px){
  .everyday ul .img .icon {
    right: max(-8vw,-60px);
  }
}
@media screen and (max-width: 766px) and (min-width: 420px){
  .mv {
    min-height: 520px;
    background: url(../img/mv_bg_sp.jpg) no-repeat right bottom/cover;
    padding: 33px min(7vw,70px) 38px;
  }
}

/* タブレットここまで */


/* ======================================
common.cssの上書き
====================================== */
.main-contents {
  padding-top: 1px;
}

.com-wrap {
  display: block;
  position: relative;
}

@media screen and (max-width: 1039px) {
  .com-wrap {
    padding: 0;
    margin-right: 0;
  }
}

@media screen and (max-width: 767px) {
  .com-wrap {
    display: block;
    margin-right: 0;
  }
}
@media screen and (max-width: 480px){
  .com-wrap {
    margin: 0px auto 0;
  }
}
/*# sourceMappingURL=2022sum01.css.map */