@charset "UTF-8";
/* CSS Document */
/*--------------------------------------
　Main Index
---------------------------------------*/
#contents {
 width: 100%;
}
.frame-wrap .frame { width: calc((100% - 60px)/3); }
.frame-wrap .type-b .frame-head { font-size: 2.4rem; }
/*--------------------------------------
　visArea
---------------------------------------*/
#visArea .mainArea {
 display: block;
 min-height: 540px;
 background: url(img/mv_pic_pc.jpg) center top no-repeat;
 background-size: auto 100%;
}
#visArea .mainArea .mainAreaInner {
 display: block;
}
#visArea .mainArea .siteNameArea {
 padding: 14px 0 0;
 margin: 0 0 2rem;
}
#visArea .mainArea .siteName img {
 margin: 0 auto;
 width: 230px;
 height: auto;
}
#visArea .mainArea .mainTxtBox {
 padding: 0;
 max-width: 740px;
 margin: 0 auto;
 text-align: center;
 line-height: 1.5;
}
#visArea .mainArea .catchArea {
 margin: auto;
}
#visArea .mainArea .catchArea .catch {
 font-size: 2.6rem;
 line-height: 1.4;
 text-align: center;
 padding: 1rem 0;
 margin: 0 0 0rem;
 letter-spacing: 0.06em;
 color: #ad5353;
}
#visArea .mainArea .catchArea .catch .big {
 font-size: 3.6rem;
}
#visArea .mainArea .mainTxtBox p {
 margin: 1.2rem 0 0;
}
#visArea .mainArea .btnWrap {
 display: flex;
 justify-content: space-between;
 margin: 2rem auto 0;
 width: 95%;
}
#visArea .mainArea .btnWrap div[class^="btn"] {
 width: calc((100% - 29px)/2);
 margin: 0;
}
#visArea .mainArea .btnWrap div[class^="btn"] a {
 padding-left: 8%;
 padding-right: 8%;
}
#visArea .mainArea .btnWrap div[class^="btn"] a::after {
 transform: translateY(-50%) rotate(90deg);
}
/*--------------------------------------
　float img
---------------------------------------*/
.float-wrap .fr {
 width: 438px;
 margin: 0 0 10px 40px;
}
.float-wrap .text {
 overflow: hidden;
}
/*--------------------------------------
lower_bottom
---------------------------------------*/
.lower_bottom {
 margin-top: 0;
}
/*--------------------------------------
オリジナル
---------------------------------------*/
/***** addParts02 *****/
.addParts02 {
 background:#F5F6F8 url("img/parts02_bg.png") no-repeat center top / 100% auto;
}
/*block*/
.addParts02 .block {
 background-color: #fff;
 padding: 5rem;
}
.addParts02 .block + .block {
 margin:4rem auto 0;
}
.addParts02 .block .blockCatch {
 text-align: center;
 margin: 0 0 2rem 5rem;
 position: relative;
 background-color: #F5F6F8;
 min-height: 100px;
 display: flex;
 justify-content: center;
 align-items: center;
 padding: 1rem;
 padding-right: 6rem;
 color: #ad5353;
 font-weight: bold;
 font-size: 3.6rem;
 line-height: 1.4;
}
.addParts02 .block .blockCatch::before {
 content: "";
 width: 100px;
 height: 100px;
 background: url("img/ico_meal.png") no-repeat center top / 100% auto;
 position: absolute;
 left: -5rem;
 top: 50%;
 transform: translateY(-50%);
 margin: 0 auto 4rem;
}
.addParts02 .block#recommend02 .blockCatch { color: #9d872b; }
.addParts02 .block#recommend02 .blockCatch::before { background-image: url("img/ico_medic.png"); }
.addParts02 .block#recommend03 .blockCatch { color: #b17826; }
.addParts02 .block#recommend03 .blockCatch::before { background-image: url("img/ico_cosme.png"); }
.addParts02 .block .blockTitArea {
 text-align: center;
 border-top: 2px solid #CED3D9;
 border-bottom: 2px solid #CED3D9;
 padding: 14px 0;
 display: block;
 width: 100%;
}
.addParts02 .block .blockTitArea .blockTit {
 display: block;
 margin: 0 auto;
 font-size: 3rem;
 font-weight: bold;
 line-height: 1.5;
 text-align: center;
}
.addParts02 .block .blockTitArea .add {
 display: block;
 padding: 0.5rem 2rem;
 margin: 0 auto 1rem;
 text-align: center;
 font-size: 2.4rem;
 line-height: 1.4;
 font-weight: bold;
 color: #fff;
 background-color: #74B389;
 border-radius: 5px;
 width: fit-content;
}
.addParts02 .block .subTit {
 margin: 8rem 0 4rem;
 text-align: center;
 font-size: 2.8rem;
 font-weight: bold;
 line-height: 1.4;
}
.addParts02 .block .plan {
 display: flex;
 justify-content: space-between;
 margin-top: 4rem;
}
.addParts02 .block .plan .thum {
 width: 500px;
 text-align: center;
}
.addParts02 .block .plan .priceIcoArea {
 width: 467px;
}
.addParts02 .block .plan .priceIcoArea p:first-child {
 margin-top: 0;
}
.addParts02 .block .plan .priceIcoArea .check_li ul.tag::after {
 content: "";
 width: 32%;
 height: 0;
}
.addParts02 .block .plan .priceIcoArea .check_li ul.tag li {
 width: 32%;
}
.addParts02 .block .pointArea ul.pointBlock {
 display: flex;
 justify-content: space-between;
 padding: 16px 0 0;
 margin-bottom: 4rem;
}
.addParts02 .block .pointArea ul.pointBlock li {
 width: calc((100% - 4rem)/3);
 border: 3px solid #CCB552;
 padding: 2.5rem 1.8rem;
 position: relative;
}
.addParts02 .block .pointArea ul.pointBlock li::before {
 content: "";
 position: absolute;
 top: -18px;
 left: 0;
 margin: auto;
 right: 0;
 width: 100px;
 height: 30px;
 background-repeat: no-repeat;
 background-color: #fff;
 background-size: 90% auto;
 background-position: center;
 background-image: url("img/point_01.png");
}
.addParts02 .block .pointArea ul.pointBlock li:nth-child(2)::before { background-image: url("img/point_02.png"); }
.addParts02 .block .pointArea ul.pointBlock li:nth-child(3)::before { background-image: url("img/point_03.png"); }
.addParts02 .block .pointArea ul.pointBlock li .pointCatch {
 font-size: 2.2rem;
 color: #ad5353;
 text-align: center;
 margin-bottom: 2.7rem;
 padding-bottom: 1rem;
 font-weight: bold;
 line-height: 1.4;
 display: flex;
 align-items: center;
 justify-content: center;
 position: relative;
}
.addParts02 .block .pointArea ul.pointBlock li .pointCatch::before {
 content: "";
 width: 100px;
 height: 3px;
 background-color: #DDD5B5;
 position: absolute;
 bottom: -1rem;
 left: 50%;
 margin-left: -50px;
}
.addParts02 .block .jirei .catch {
 color: #4d795b;
 font-size: 2.0rem;
 font-weight: bold;
 line-height: 1.4;
 padding: 1.3rem 2.3rem;
 background-color: #F5F6F8;
 margin: 4.5rem 0 2rem;
}
.addParts02 .block .jirei p {
 padding: 0 5%;
}
/***** addParts04 *****/
.addParts04 {
 background-color: #F5F6F8;
}
.addParts04 .frame-wrap .type-c .frame-head {
 background: url("img/arrow_black.svg") no-repeat right 3rem top 50% / 8px auto;
 padding:2rem 4rem
}
/***** addParts05 *****/
/***** addParts08 *****/
#index .addParts08 .addInner > p {
 padding: 0 5%;
}
#index .addParts08 .float-wrap {
 margin: 7rem 0;
}
#index .addParts08 .float-wrap  .text div:first-child {
 font-size: 2.8rem;
 font-weight: bold;
 line-height: 1.4;
 text-align: center;
 padding: 33px 30px 33px 60px;
 margin: 25px auto 30px;
 position: relative;
}
#index .addParts08 .float-wrap  .text div:first-child::before {
 content: "";
 width: calc(100% - 40px);
 height: 100%;
 position: absolute;
 background-size: 12px 12px;
 background-color: #DDD5B5;
 top: -25px;
 left: 0;
 z-index: -1;
}
#index .addParts08 .float-wrap  .text div:first-child::after {
 content: "";
 width: calc(100% - 40px);
 height: 100%;
 background: white;
 position: absolute;
 top: 0;
 right: 0;
 z-index: -1;
 box-shadow: 0px 0px 15px #3331A;
 border: 3px solid #CCB552;
}
#index .matomeTit {
 padding: 2rem 2rem 2rem 10.2rem;
 background: #F5F6F8 url("img/ico_matome.png") no-repeat left 21px top 50% / 68px auto;
 color: #4d795b;
 font-size: 2.8rem;
 font-weight: bold;
 line-height: 1.4;
 margin: 7rem 0 2rem;
}
/***** addParts09 *****/
.addParts09 .frame-wrap {
 padding: 0 5%;
}
/***** addParts11 *****/
.addParts11 {
 background-color: #F5F6F8;
}
.addParts11 .question {
 min-height: 102px;
 font-size: 2.2rem;
 line-height: 1.4;
 font-weight: bold;
 border-bottom: solid 1px #CCB552;
 padding: 1.6rem 1.6rem 1.6rem 9.8rem;
 margin: 3rem auto 2rem;
 position: relative;
 display: flex;
 align-items: center;
}
.addParts11 .question a {
 display: block;
 width: 100%;
 text-decoration: none;
 background: url("img/arrow_gold.svg") no-repeat right 15px top 50% / 8px auto;
 padding-right: 2rem;
}
.addParts11 .question::before {
 content: "Q";
 width: 70px;
 height: 70px;
 background-color: #fff;
 box-shadow: 5px 5px 0 #DDD5B5;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 3rem;
 font-weight: normal;
 line-height:1;
 color: #9d872b;
 position: absolute;
 top: 16px;
 left: 0;
}
/* other */
.addPartsToc .addInner,
.addPartsHost .addInner {
 padding-top: 2rem;
 padding-bottom: 2rem;
}
.addPartsHost { background-color: #F5F6F8; }
.addPartsToc #toc .chapter .chapter-h:first-child,
.addPartsToc #toc li.chapter-h.chapter-h-three { display: none; }
@media screen and (max-width: 480px) {
 .float-wrap .fr {
  width: 100%;
  margin: 0 0 2rem;
 }
 /*--------------------------------------
  　visArea
  ---------------------------------------*/
 #visArea .mainArea {
  background: none;
  height: auto;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
 }
 #visArea .mainArea .siteNameArea {
  display: block;
  padding: 0;
  background: url("img/mv_pic_sp.jpg") center center no-repeat;
  background-size: cover;
  width: auto;
  height: 100%;
  aspect-ratio: 720 / 250;
  margin: 0 auto;
 }
 #visArea .mainArea .siteNameAreaInner {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
 }
 #visArea .mainArea .siteName {
  margin: 0;
  line-height: 1;
 }
 #visArea .mainArea .mainTxtBox {
  width: 90%;
  padding: 0;
  margin: 0 auto;
  text-align: left;
 }
 #visArea .mainArea .catchArea {
  width: 100%;
 }
 #visArea .mainArea .catchArea .catch {
  font-size: 2rem;
  margin: 0 0 1rem;
 }
 #visArea .mainArea .catchArea .catch .big {
  font-size: 2.4rem;
 }
 #visArea .mainArea .btnWrap div[class^="btn"] {
  width: 48%;
 }
 #visArea .mainArea .btnWrap div[class^="btn"] a {
  padding-left: 11%;
  padding-right: 11%;
 }
 /*--------------------------------------
  オリジナル
  ---------------------------------------*/
 /***** addParts02 *****/
 .addParts02 .plan {
  display: block;
  width: 100%;
  margin-bottom: 4rem;
 }
 /*block*/
 .addParts02 .block {
  padding: 1.6rem;
 }
 .addParts02 .block .blockCatch {
  margin: 0 0 2rem 3rem;
  min-height: 60px;
  padding: 1rem 3rem;
  font-size: 2rem;
 }
 .addParts02 .block .blockCatch::before {
  width: 60px;
  height: 60px;
  left: -3rem;
 }
 .addParts02 .block .blockTitArea {
  text-align: center;
  margin: 0 0 2.5rem;
  display: block;
 }
 .addParts02 .block .blockTitArea .blockTit {
  display: block;
  margin: 0 0 1rem;
  width: 100%;
  text-align: center;
 }
 .addParts02 .block .blockTitArea .add {
  display: block;
  font-size: 1.8rem;
 }
 .addParts02 .block .subTit {
  margin: 5rem 0 2rem;
  font-size: 2.0rem;
 }
 .addParts02 .block .plan {
  flex-direction: column-reverse;
 }
 .addParts02 .block .plan .thum {
  width: 90%;
  margin: 0 auto 20px;
 }
 .addParts02 .block .plan .priceIcoArea {
  width: 100%;
 }
 .addParts02 .block .plan .priceIcoArea .check_li ul.tag li {
  width: 48%;
 }
 .addParts02 .block .pointArea ul.pointBlock {
  display: block;
 }
 .addParts02 .block .pointArea ul.pointBlock li {
  width: 100%;
  padding: 2.5rem 1.4rem;
  margin-bottom: 3rem;
 }
 .addParts02 .block .pointArea ul.pointBlock li .pointCatch {
  font-size: 1.8rem;
  line-height: 1.4;
  padding-bottom: 2rem;
 }
 .addParts02 .block .jirei .catch {
  font-size: 1.7rem;
  padding: 1.2rem;
 }
 #contents .addParts02 table th {
  width: 30%;
  display: table-cell;
  border-right: none;
 }
 #contents .addParts02 table td {
  display: table-cell;
 }
 /***** addParts04 *****/
 /***** addParts05 *****/
 /***** addParts08 *****/
 #index .addParts08 .float-wrap {
  display: flex;
  flex-direction: column-reverse;
  margin: 4rem 0;  
 }
 #index .addParts08 .float-wrap .fr {
  margin: 2rem 0 0;
 }
 #index .addParts08 .float-wrap .text div:first-child {
  font-size: 1.9rem;
  font-weight: bold;
  line-height: 1.4;
  text-align: center;
  padding: 2rem 2rem 2rem 3.5rem;
  margin: 2.5rem auto 3rem;
 }
 #index .addParts08 .float-wrap .text div:first-child::before {
  content: "";
  width: calc(100% - 15px);
  height: 100%;
  position: absolute;
  top: -13px;
  left: 0;
  z-index: -1;
 }
 #index .addParts08 .float-wrap .text div:first-child::after {
  content: "";
  width: calc(100% - 15px);
 }
 #index .matomeTit {
  padding: 1rem 1rem 1rem 7rem;
  background-position: left 10px top 50%;
  background-size: 50px auto;
  font-size: 1.9rem;
  margin: 5rem 0 2rem;
 }
 /***** addParts09 *****/
 /***** addParts11 *****/
 .addParts11 .question {
  min-height: 82px;
  height: auto;
  font-size: 1.6rem;
  line-height: 1.4;
  padding: 1.4rem 1.4rem 1.4rem 6.4rem;
  margin: 2rem auto 1.5rem;
 }
 .addParts11 .question::before {
  width: 50px;
  height: 50px;
  font-size: 2rem;
  top: 14px;
  left: 0;
 }

 #visArea .mainArea .btnWrap {
    margin: 3rem auto 0;
}
}