@charset "utf-8";
/* ------------------------------------------------------------ common */
body{ min-width: 1200px; margin: 0 auto; font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;}
#wrapper{ position: relative;}

a{ display: block; text-decoration: none; color: #000000;}
a:hover{ opacity: 0.8;}

.SP{ display: none;}
.inner{ width: 1100px; margin: 0 auto; padding: 0 50px;}
.inner_m{ width: 1000px; margin: 0 auto; padding: 0 50px;}
.inner_s{ width: 900px; margin: 0 auto; padding: 0 50px;}
.item{ display: block;}
.flex{ display: flex; justify-content: space-between; align-items: center;}
.flex_item{ display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: center;}

#broccoli h3{ font-size: 30px; letter-spacing: 0.05em; color: #fff; font-weight: 800; text-align: center; background: #e85f9d; border-radius: 50px; width: 1000px; margin: 0 auto; padding: 20px 0; box-sizing: border-box;}
#broccoli h4{ font-size: 30px; letter-spacing: 0.05em; font-weight: 800; text-align: center; line-height: 50px; padding: 40px 0 45px;}

#broccoli dl.position{ position: absolute; }
#broccoli dl dt{ padding-right: 20px;}
#broccoli dl dd{ font-size: 26px; line-height: 35px; letter-spacing: 0.05em; font-weight: 800; }
#broccoli dl dd.dd_box{ width: 500px;}

.box_b{ position: relative; background: #f9fafe; border-radius: 10px; box-sizing: border-box;}
.box_p{ position: relative; background: #fff6fa; border-radius: 10px; box-sizing: border-box;}
.check_box li{ padding-bottom: 20px; text-indent: -1.5em; padding-left: 1.5em; font-size: 18px; letter-spacing: 0.05em; line-height: 26px; font-feature-settings: "palt";}
.check_box li:last-of-type{ padding-bottom: 0;}
.check_box li img{ display: inline-block; padding-right: 5px;}
.box_b li.blue,
.box_p li.pink{ text-align: center; font-weight: 800; text-indent: inherit; padding: 0;}


#function li.arrow{ text-align: center; text-indent: 0; margin: 0 auto; padding: 10px 0 20px;}
#function li.arrow img{ display: inline;}


h2{ font-size: 20px; letter-spacing: 0.1em; text-align: center; font-weight: 800; padding-bottom: 55px;}
h2 span{ display: block; font-size: 80px; letter-spacing: 0.1em; padding-bottom: 10px; display: block;}


/* font */
.aktive_r{ font-family: aktiv-grotesk, sans-serif; font-weight: 400; font-style: normal;}
.aktive_m{ font-family: aktiv-grotesk, sans-serif; font-weight: 500; font-style: normal;}
.aktive_b{ font-family: aktiv-grotesk, sans-serif; font-weight: 700; font-style: normal;}

.helvetica{ font-family: "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;}

/* color */
.pink{ color: #ea609e;}
.blue{ color: #343b68;}


#broccoli #bread{ border-top: none; }


/* fv --------------------------------------------------------------------------------- */
#fv{ background: #f7f7f7 url(../images/manual/fv/bg_fv_01.png) center 210px no-repeat; padding: 70px 0 100px;}

#fv .fv_inner{ width: 1200px; margin: 0 auto; background: url(../images/manual/fv/bg_fv_02.png) center top/cover no-repeat; height: 665px; padding: 130px 0 0; box-sizing: border-box;}
#fv .fv_inner div{ width: 450px; padding-left: 160px;}
#fv .fv_inner div p:first-of-type{ padding-bottom: 30px;}

#fv .fv_inner div h1{ color: #ea609e; font-size: 30px; font-weight: 800; line-height: 46px; letter-spacing: 0.1em; padding: 0 0 20px;}
#fv .fv_inner div h1 span{ color: #343b68; font-size: 20px; font-weight: 800; line-height: 46px; letter-spacing: 0.1em; display: block; padding-bottom: 20px;}

#fv .fv_inner div p:last-of-type{ font-size: 20px; line-height: 40px; font-weight: 800; letter-spacing: 0.1em;}


/* bread */
#bread{ color: #909090; padding: 50px 0 60px;}
#bread a{ color: #909090;}

#bread li{ position: relative; float: left; padding: 0 40px 0 0; font-size: 12px; letter-spacing: 0.05em;}
/*
#bread li:first-of-type{ width: 30px;}
#bread li:nth-of-type(2){ width: 80px;}
#bread li:last-of-type{ width: 155px;}
*/

#bread li:after{ position: absolute; content: ""; width: 20px; height: 1px; background: #909090; top: 50%; right: 8%; transform: translate(-50%,0);}
#bread li:nth-of-type(2):after{ left: 80%;}
#bread li:last-of-type:after{ display: none;}


/* guidance */
#fv .guidance .inner{ padding: 45px 0; background: #fff url(../images/manual/fv/bg_fv_04.png) center top/cover no-repeat;   box-shadow: 0px 11px 16px -7px rgba(0,0,0,0.2);}
#fv .guidance .inner div{ width: 980px; margin: 0 auto;}

#fv .guidance .bg{ background: url(../images/manual/fv/bg_fv_03.png) center top/contain no-repeat;}
#fv .guidance .blue{ position: relative; width: 370px; margin: 0 auto; padding: 30px 0 40px; font-size: 20px; letter-spacing: 0.1em; font-weight: 800; text-align: center; background: url(../images/manual/common/icn_flag.png) 40px top/106px no-repeat;}

#fv .guidance .line{display: block; width: 50px; height: 2px; margin: 0 auto; background: #ea609e; margin-top: 15px;}

#fv .guidance .curve{ display: block; padding: 15px 0 10px; font-size: 24px; letter-spacing: 0.1em; color: #ea609e; font-weight: 800;}

#fv .guidance figure{ float: left; width: 123px; margin: 0;}
#fv .guidance figcaption{ font-size: 20px; line-height: 23px; font-weight: 800; letter-spacing: 0.1em; color: #343b68; text-align: center; padding-top: 10px;}
#fv .guidance figcaption img{ width: 123px;}
#fv .guidance figcaption span{ font-size: 12px; font-weight: 800; letter-spacing: 0em;}

#fv .guidance .cfx p{ float: right; width: 795px; line-height: 36px;}



/* about --------------------------------------------------------------------------------------------------- */
#about{ padding: 145px 0;}

#about h2{ position: relative; padding: 0 0 40px; font-size: 30px; font-weight: 800; text-align: center;}
#about h2:after{ position: absolute; content: ""; border-top: 13px solid #e85f9d; border; border-right: 13px solid transparent; border-left: 13px solid transparent; bottom: 20px; left: 50%;}
#about h2 span{ display: inline-block; padding: 0 15px; vertical-align: middle; font-family: "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif; font-size: 100px; font-weight: 500; color: #ea609e;}
#about h2 img{ display: inline-block; padding-right: 10px;}


/* why */
#about .bg{ background: url(../images/manual/common/guide01.png) center top/contain no-repeat; width: 900px; height: 155px;}
#about .bg p{ font-size: 20px; line-height: 35px; letter-spacing: 0.05em; font-weight: 800; width: 535px; margin: 0 auto; padding: 23px 0 0 115px;}
#about .bg span{ color: #ea609e; font-weight: 800;}

#about .why{  padding: 40px 0 75px;}
#about .why .item{ float: left; width: 201px;}
#about .why div{ float: right; width: 650px;}

#about .why p:first-of-type{ font-size: 29px; line-height: 45px; letter-spacing: 0.05em; font-weight: 800;}
#about .why p:first-of-type span{ color: #ea609e; font-weight: 800;}

#about .why p:last-of-type{ padding-top: 20px; line-height: 36px; letter-spacing: 0.05em;}


/* before_if */
#about .before_if{ padding-bottom: 100px;}
#about .before_if ul li:first-of-type{ position: relative; float: left; width: 420px; padding-right: 53px;}
#about .before_if ul li:first-of-type:after{ position: absolute; content: ""; width: 41px; height: 31px; background: url(../images/manual/common/icn_arrow02.png) center top/contain no-repeat; bottom: 45%; right: 0; transform: translate(0, -50%);}
#about .before_if ul li:last-of-type{ float: right; width: 420px;}

#about .before_if p{ width: 400px; height: 60px; background: #eeeeee; border-radius: 50px; font-size: 20px; letter-spacing: 0.05em; font-weight: 800; text-align: center; padding-top: 21px; box-sizing: border-box;}
#about .before_if p.pink{ background: #ea609e; color: #fff; font-size: 20px; letter-spacing: 0.05em; font-weight: 800;}

#about .before_if .item{ padding: 30px 0 40px; width: 360px; margin: 0 auto;}

#about .before_if li:first-of-type dl{ width: 275px; margin: 0 auto;}
#about .before_if dt,
#about .before_if dd{ font-size: 20px; line-height: 35px; letter-spacing: 0.05em; font-weight: 800;}
#about .before_if .pink{ text-align: center;}


/* recommend */
#about .recommend{ padding-bottom: 88px;}

#about .recommend li{ width: 270px; padding-right: 95px; float: left;}
#about .recommend li:last-of-type{ padding: 0;}

#about .recommend dl{ padding-bottom: 25px;}
#about .recommend dt{ float: left; width: 61px; padding-right: 18px;}
#about .recommend dt img{ width: 100%;}
#about .recommend dd{ float: left; width: 190px; font-size: 17px; line-height: 28px; letter-spacing: 0.1em; }

#about .recommend .item{ width: 45px; margin: 0 auto;}

#about .recommend .circle{ width: 135px; height: 135px; margin: 25px auto 0; background: #fff6fa; border-radius: 50%; clear: both;}
#about .recommend .circle img{ width: 61px; margin: 0 auto; padding: 25px 0;}

#about .recommend p{ padding-top: 20px; color: #ea609e; font-size: 20px; font-weight: 800; line-height: 40px; letter-spacing: 0.1em; text-align: center; font-feature-settings: "palt";}


/* steps */
#about .steps .cfx{ padding: 60px 0 0;}

#about .steps div:nth-of-type(odd) .item{ float: left; width: 434px;}
#about .steps div:nth-of-type(odd) div{ float: right; width: 470px;}

#about .steps div:nth-of-type(even) .item{ float: right; width: 434px;}
#about .steps div:nth-of-type(even) div{ float: left; width: 470px;}

#about .steps p.aktive_r{ letter-spacing: 0.1em; color: #ea609e;}
#about .steps p{ font-size: 18px; line-height: 28px; letter-spacing: 0.1em;; font-feature-settings: "palt";}
#about .steps p.point{ background: #f8f8f8 url(../images/manual/about/text_point.png) 30px 10px no-repeat; border-radius: 10px; margin: 30px 0 0; padding: 35px 90px;}

#about .steps dl.cfx{ padding: 25px 0;}
#about .steps dt{ float: left; width: 90px; font-size: 20px; font-weight: 800; letter-spacing: 0.1em; padding: 5px 0; border: 1px solid #000; border-radius: 50px; text-align: center;}
#about .steps dd{ float: right; width: 370px; font-size: 23px; letter-spacing: 0.1em; font-weight: 800; line-height: 30px; font-feature-settings: "palt";}



/* function --------------------------------------------------------------------------------------------------- */
#function{ background: #ffe9f3; padding: 50px 0;}
#function .inner_box{ background: #fff; padding: 55px 50px;}

#function .bg{ background: url(../images/manual/common/guide03.png) center top/contain no-repeat; width: 1000px; height: 161px;}
#function .bg p{ font-size: 20px; line-height: 35px; letter-spacing: 0.05em; font-weight: 800; margin: 0 auto; padding: 40px 0 0 200px;}
#function .bg span{ font-weight: 800;}

#function .bg02{ background: url(../images/manual/common/guide02.png) center top/contain no-repeat; margin: 50px 0 60px; width: 900px; height: 155px;}
#function .bg02 p{ font-size: 25px; line-height: 40px; letter-spacing: 0.05em; font-weight: 800; width: 600px; margin: 0 auto; padding: 35px 0 0 0;}

/* up */
#function .up .bg{ padding-bottom: 95px;}
#function .up .bg p{ padding: 30px 0 0 230px;}

#function .up table,
#function .up tbody{ width: 100%; }

#function .up tr:nth-of-type(even) th{ background: #f2f1f2; }
#function .up tr:nth-of-type(even) td.purple{ background: #f7f3f7; }
#function .up tr:nth-of-type(even) td.green{ background: #f4f6f4; }
#function .up tr:nth-of-type(even) td.pink{ background: #f7eef5; }

#function .up tr,
#function .up td{ border: 1px solid #fff; }

#function .up th{ width: calc(70% / 3); height: 30px; padding: 10px 20px; font-size: 14px; line-height: 150%; text-align: left; color: #773e7e; font-weight: 600; }
#function .up th.blank{ width: 30%; background: #f2f1f2; }
#function .up th.bg_purple{ background: #773e7e; }
#function .up th.bg_green{ background: #00837e; }
#function .up th.bg_pink{ background: #ea609e; }

#function .up th.ttl{ }
#function .up th.ttl span{ padding: 0 0 0 20px; display: inline-block; line-height: 150%; vertical-align: middle; }
#function .up th.ttl img{ vertical-align: middle; }

#function .up th.col_ttl{ font-size: 18px; color: #fff; text-align: center }
#function .up th.col_ttl img{ vertical-align: middle; }
#function .up th.col_ttl strong{ font-size: 16px; font-weight: 600; vertical-align: bottom; }
#function .up th.col_ttl small{ font-size: 10px; }

#function .up td{ position: relative; padding: 0 10px; }
#function .up td small{ display: block; margin: 0 0 0 auto; font-size: 10px; line-height: 140%; width: 80px; text-align: center; }
#function .up td.purple{ color: #773e7e; }
#function .up td.green{ color: #00837e; }
#function .up td.pink{ color: #ea609e; }

#function .up td:after{ position: absolute; content: ""; top: 50%; left: 50%; transform: translate(-50%,-50%); }
#function .up td.circle:after{ width: 15px; height: 15px; border-radius: 50px;}
#function .up td.warning:after{ width: 15px; height: 12px; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
#function .up td.purple:after{ background: #773e7e; }
#function .up td.green:after{ background: #00837e; }
#function .up td.pink:after{ background: #ea609e; }



/*
#function .up li{ position: relative; padding: 0 10px 20px; box-sizing: border-box; }
#function .up li.blue{ position: relative; width: 390px; background: #f9fafe; border-radius: 10px;}
#function .up li.blue:after{ position: absolute; content: "or"; width: 40px; height: 30px; bottom: 50%; right: -90px; transform: translate(-50%,-50%); font-size: 30px; letter-spacing: 0.05em; font-weight: 600; text-align: center; }
#function .up li.pink{ width: 550px; background: #fff6fa; border-radius: 10px;}

#function .up dl{ display: flex; align-items: center; position: absolute; top: -50px; left: 50%; transform: translate(-50%,0);}
#function .up dt{ width: 90px; padding-right: 10px;}
#function .up dd{ width: 250px; font-size: 30px; line-height: 35px; letter-spacing: 0.05em; font-weight: 800;}
#function .up dd span{ display: inline-block; font-size: 18px; font-weight: 800;}

#function .up ol{ display: flex; flex-wrap: wrap; justify-content: flex-start; padding: 0 10px;}
#function .up ol li{ display: flex; justify-content: center; align-items: center; margin-bottom: 30px; font-size: 18px; line-height: 25px; font-weight: 800; text-align: center;}
#function .up ol li:last-of-type{ margin-bottom: 0; }
#function .up ol li p{ width: 80%; padding: 0 0 0 15px; font-weight: 600; line-height: 150%; text-align: left; }
#function .up ol li img{ display: block; width: 90px; height: auto; }

#function .up li.pink ol{ justify-content: flex-start; padding-top: 65px; }
#function .up li.pink li{ width: 47%; }
#function .up li.pink li p{ width: 80%; }

#function .up li.blue{ width: 345px; }
#function .up li.blue dl{ justify-content: center; width: 90%; }
#function .up li.blue dd{ width: 80%;}
#function .up li.blue ol{ display: block;padding-top: 60px; }
#function .up li.blue li{ width: 100%; text-align: left; }

#function .up .free{ position: relative; background: #f8f8f8; border-radius: 15px; }
#function .up .free dd{ width: 100%; }
#function .up .free ol{ padding: 70px 10px 20px; justify-content: center; }
#function .up .free ol li{ margin: 0 35px 0 0; }

#function .up .more{ padding: 50px 0 70px; }
#function .up .more p{ padding: 0 0 15px; font-size: 24px; letter-spacing: 0.05em; font-weight: 600; line-height: 150%; text-align: center; }
#function .up .more p span{ display: block; width: 260px; margin: 0 auto; position: relative; font-size: 18px; font-weight: 600; }
#function .up .more p span:before,
#function .up .more p span:after{ position: absolute; content: ""; bottom: -8px; width: 20px; height: 20px; }
#function .up .more p span:before{ left: 0; transform: rotate(-45deg); border-right: 1px solid #000; }
#function .up .more p span:after{ right: 0; transform: rotate(45deg); border-left: 1px solid #000; }
#function .up .more .path{ display: block; width: 200px; height: 40px; margin: 0 auto; background: #fffc1f; clip-path: polygon(0 0, 100% 0, 50% 100%); }
*/


/* botom */
#function .botom{ margin-top: 50px; background: #fff;}
#function h3{ width: 100%;}


/* manual */
#function .manual.flex{ align-items: end; padding-bottom: 85px;}
#function .manual .item{ width: 312px;}
#function .manual div{ position: relative; width: 550px; height: 330px; background: #f9fafe; border-radius: 10px; padding: 71px 54px; box-sizing: border-box; margin: 45px 0 0;}

#function .manual dl{ position: absolute; width: 505px; top: -45px; left: 50%; transform: translate(-50%,0);}
#function .manual dl span{ font-size: 47px; font-weight: 800;}
#function .manual dd{ font-size: 24px; line-height: 35px; letter-spacing: 0.05em; font-weight: 800;}

#function .manual li{ font-size: 20px; letter-spacing: 0.05em; font-weight: 800; background: #fff; border-radius: 50px; padding: 15px 0 15px 40px; margin-bottom: 20px;}
#function .manual li span{ font-size: 30px; font-weight: 800; padding-right: 15px; color: #343b68;}

#function .manual span{ font-family: "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;}

#function p.solidus{ position: relative; font-size: 30px; letter-spacing: 0.05em; text-align: center; font-weight: 800;}
#function p.solidus:before{ position: absolute; content: ""; width: 20px; height: 20px; border-left: 2px solid #ea609e; transform: rotate(-45deg); bottom: 5px; left: 110px;}
#function p.solidus:after{ position: absolute; content: ""; width: 20px; height: 20px; border-right: 2px solid #ea609e; transform: rotate(45deg); bottom: 5px; right: 110px;}


/* premium */
#function .premium{ position: relative; padding: 75px 25px 40px; background: #fff6fa; border-radius: 10px;}
#function .premium.box01{ margin: 100px 0 0;}
#function .premium.box02{ margin: 186px 0 0;}
#function .premium.box03{ margin: 250px 0 155px;}
#function .premium.box04{ margin: 186px 0;}

#function .premium .flex{ justify-content: flex-start;}
#function .premium.even .flex{ justify-content: flex-end;}

#function .premium .item{ position: absolute; top: -35px; right: 0;}
#function .premium.box02 .item,
#function .premium.box04 .item{ top: -90px; left: 0;}
#function .premium.box03 .item{ top: -100px;}

#function .premium dl{ top: -48px; left: 2%;}
#function .premium.even dl{ right: 16%!important;}

#function .premium .subttl{ font-size: 25px; font-weight: bold; padding-bottom: 30px;}

#function .premium.even ul{ padding: 0 0 0 450px;}


/* benefit */
#function .benefit{ display: flex; justify-content: space-between; align-items: center; font-size: 30px; letter-spacing: 0.05em; font-weight: 800; text-align: center; padding: 70px 0;}
#function .benefit:before,
#function .benefit:after{ content: '';  width: 245px; height: 2px;  background: #000;}

#function .benefit_box.flex{ align-items: initial;}

#function .benefit_box{ padding-bottom: 100px;}
#function .benefit_box li{ width: 410px;}

#function .benefit_box p.bg{ color: #ea609e; font-size: 24px; letter-spacing: 0.05em; font-weight: 800; text-align: center; padding: 18px 0 0; /* aspect-ratio: 400/201; */ width: 400px; height: 201px;}
#function .benefit_box li:first-of-type p.bg{ background: url(../images/manual/function/icn_ex01.png) center top/contain no-repeat; margin: 0;}
#function .benefit_box li:last-of-type p.bg{ background: url(../images/manual/function/icn_ex02.png) center top/contain no-repeat; color: #fff; margin: 0;}

#function .benefit_box p:nth-of-type(2){ height: 70px; font-size: 20px; line-height: 35px; letter-spacing: 0.05em; text-align: center; font-weight: 800;}
#function .benefit_box p:last-of-type{ line-height: 30px; font-size: 14px; letter-spacing: 0.1em; padding-top: 30px;}

#function .benefit_box .item{ width: 98px; margin: 0 auto; padding: 30px 0;}

#function .benefit_box ol li{ font-weight: 800; border: 1px solid; border-radius: 50px; width: 270px; height: 80px; text-align: center; font-size: 20px; letter-spacing: 0.05em; padding: 30px 0; box-sizing: border-box;}
#function .benefit_box ol li:first-of-type{ margin-bottom: 20px;}


/* qa */
#function .botom .bg{ margin: 50px 0 60px;}
#function .qa{ padding-bottom: 120px;}
#function .qa_bg.bg{ background: url(../images/manual/common/guide03.png) center top/contain no-repeat; width: 900px; height: 155px;}

#function .qa .bg p{ padding: 37px 0 0 230px;}
#function .qa .box_b{ width: 550px; padding: 65px 130px;}


#function .qa dl{ top: -60px; left: 50%; transform: translate(-50%,0);}


/* dictionary */
#function .dictionary{ padding: 50px 0 100px;}

#function .dictionary p.solidus{ font-size: 24px;}
#function .dictionary p.solidus:before{ border-left: 2px solid #000; transform: rotate(-45deg); bottom: 8px; left: 28px;}
#function .dictionary p.solidus:after{ border-right: 2px solid #000; transform: rotate(45deg); bottom: 8px; right: 28px;}
#function .dictionary p.solidus span{ font-size: 50px; font-weight: 800;}

#function .dictionary .box_b{ position: relative; padding: 75px 45px 40px;}
#function .dictionary dl{ top: -50px; left: 20px;}

#function .dictionary .box_p{ margin-top: 80px; padding: 75px 45px 40px;}

#function .dictionary ul{ padding: 70px 0 0;}


/* skill */
#function .skill{ margin: 85px 0 145px; padding: 75px 45px 40px; background: #fff6fa; border-radius: 10px;}
#function .skill dl{ top: -130px; left: -20px;}

#function .skill .item{ position: absolute; top: -130px; right: -30px;}
#function .skill .box_p li.pink{ text-align: left;}
#function .skill .box_p li.arrow{ text-align: left; padding: 10px 0 20px 100px;}


/* shindan */
#function .shindan{ margin: 125px 0 145px; padding: 75px 45px 40px; background: #fff6fa; border-radius: 10px;}

#function .shindan .box{ width: 340px;}
#function .shindan dl{ top: -125px; left: 56%;}

#function .shindan .item{ position: absolute; top: -170px; left: -30px;}


/* cta --------------------------------------------------------------------------------------------------------------- */
#cta{ background: url(../images/manual/other/bg_cta.jpg) center top/cover no-repeat; padding: 82px 0 85px;}
#cta .inner_box{ background: #fff; border-radius: 25px; padding: 80px 70px;}

#cta h4{ color: #ea609e; font-size: 36px; text-align: left; line-height: 60px; letter-spacing: 0.05em; font-weight: 800; padding: 0 0 30px;}

#cta p{ position: relative; font-size: 21px; line-height: 40px; text-align: center; font-weight: 800; margin-bottom: 28px;}
#cta p:after,
#cta p:before{ position: absolute; content: ""; width: 25px; height: 17px;}
#cta p:after{ bottom: 10px; right: 25px; background: url(../images/manual/common/icn_slash02.png) center top/contain no-repeat;}
#cta p:before{ bottom: 10px; left: 25px; background: url(../images/manual/common/icn_slash01.png) center top/contain no-repeat;}

#cta .btn:after{ border-bottom: 7px solid #343b68; }



/* app --------------------------------------------------------------------------------------------------------------- */
#app{ background: #f8f8f8; padding: 100px 0;}
#app .ceicle{ background: url(../images/manual/other/img_app.png) 40px 10px/248px 348px no-repeat; height: 280px; border-radius: 200px; border: 2px solid #f0529f; box-shadow: 0px 11px 16px -7px rgba(0,0,0,0.2); text-align: left;}
#app .ceicle div{ width: 670px; padding: 50px 0; margin: 0 auto 0 330px;}

#app h4{ color: #ea609e; font-size: 35px; letter-spacing: 0.05em; font-weight: 800; padding: 0 0 20px; text-align: left;}
#app p{ font-size: 20px; letter-spacing: 0.05em; font-weight: 800; padding-bottom: 35px; text-align: left;}

#app .flex_item{ justify-content: flex-end;}
#app li{ padding-right: 20px;}
#app li:first-of-type{ padding-right: 0;}



/* price --------------------------------------------------------------------------------------------------------------- */
#price{ padding: 100px 0 150px;}
#price .bg { background: url(../images/manual/common/guide03.png) center top/contain no-repeat; width: 1000px; height: 161px; margin: 50px 0 0;}
#price .bg p { font-size: 20px; line-height: 35px; letter-spacing: 0.05em; font-weight: 800; width: 745px; margin: 0 auto; padding: 45px 0 0 190px;}

#price h4{ position: relative; width: 760px; margin: 0 auto; padding: 40px 0 10px; }
#price h4:before,
#price h4:after{ position: absolute; content: ""; width: 25px; height: 25px; bottom: 25px; }
#price h4:before{ border-left: 2px solid #000; transform: rotate(-45deg); left: 28px; }
#price h4:after{ border-right: 2px solid #000; transform: rotate(45deg); right: 28px; }

#price h4.title_1:before{ left: 220px; }
#price h4.title_1:after{  right: 220px; }
#price .flex_2{padding:  0 0 40px;}
#price .flex div{ width: 392px; min-height: 237px; border: 2px solid #e85f9d; border-radius: 20px; padding: 30px; box-sizing: border-box;}
#price .flex div:first-of-type{ position: relative;}
#price .flex div:first-of-type:after{ content: ""; width: 30px; height: 30px; background: url(../images/manual/common/icn_Pplus.png) center top/contain no-repeat; right: -90px; bottom: 36%; display: block; position: absolute; transform: translate(-50%,-50%);}


#price dl{ position: relative; padding-bottom: 20px; border-bottom: 1px solid #ea609e; display: flex; justify-content: space-around; align-items: center;}
#price dt{ letter-spacing: 0.05em; font-weight: 800; border: 1px solid #000; border-radius: 50px; padding: 5px 10px; margin-right: 10px;}
#price dd{ font-size: 40px; font-weight: 800; color: #ea609e; padding: 0; line-height: 1.2;}
#price dd span.pink{ display: inline; font-size: 24px; color: #ea609e;}
#price dd span{ display: block; font-size: 12px; letter-spacing: 0.1em; color: #000;}

#price ul{ padding: 20px 0 0;}
#price .check_box li{ padding-bottom: 10px; font-size: 16px;}

#price p{ padding: 40px 0; font-size: 14px; line-height: 26px; letter-spacing: 0.05em;}
#price p.sub{ padding: 0 0 40px; text-align: center; }

#price .btn{ width: 350px; margin: 0 auto;}
#price .btn:after{ border-bottom: 7px solid #343b68;}

#broccoli .btn_top{ margin: 150px auto 0; }



/* --------------------------------------------------------------------------------------------------------------------------- 
	mobile 
--------------------------------------------------------------------------------------------------------------------------- */
@media only screen and (max-width: 640px) {

/* common -------------------------------------------------------------------------------- */
body{ min-width: 100%;}
	
.PC{ display: none;}
.SP{ display: block;}
.inner{ width: 85%; padding: 0;}
.inner_m{ width: 92%; padding: 0;}
.inner_s{ width: 85%; padding: 0;}
.item{ width: 80%; height: auto; margin: 0 auto;}

.btn{ width: 100%; margin: 0 auto; font-size: 12px;}
.btn a{ padding: 20px 0;}
.btn::after{ border-bottom: 5px solid #343b68; border-right: 5px solid transparent; border-left: 5px solid transparent; right: 10px;}

.check_box li{ font-size: 13px; line-height: 25px; text-indent: -2.8em; padding-left: 3em; letter-spacing: 0.05em; font-feature-settings: "palt"; padding-bottom: 10px;}
.check_box li img{ display: inline-block; padding-right: 15px;}

#broccoli h3{ width: 100vw; height: auto; margin: 0 calc(50% - 50vw); font-size: 20px; border-radius: 0; line-height: 30px;}
#broccoli h4{ font-size: 18px; line-height: 30px; padding: 20px 0 30px;}


h2{ font-size: 18px; padding-bottom: 30px;}
h2 span{ font-size: 45px; padding-bottom: 10px;}


/* fv --------------------------------------------------------------------------------------------------- */
#fv{ padding: 0 0 50px;}
#fv img{ width: 100%;}
#fv .sp_bg{ background: url(../images/manual/fv/bg_fv_02-sp.png) center top/cover no-repeat; height: 620px;}
#fv .fv_inner{ width: 90%; padding: 60px 0 0; background: none; height: auto;}
#fv .fv_inner div{ width: 100%; padding-left: 0; padding-top: 64vw;}

#fv .fv_inner div h1{ font-size: 21px; padding-bottom: 5px;}
#fv .fv_inner div h1 span{ font-size: 14px; padding-bottom: 30px; line-height: 0;}
#fv .fv_inner div p:first-of-type{ width: 225px; height: auto; padding-bottom: 0;}
#fv .fv_inner div p:last-of-type{ font-size: 14px; line-height: 25px;}


/* guidance */
#fv .guidance .inner{ padding: 25px 0 35px;}
#fv .guidance .inner div{ width: 100%;}
#fv .guidance .inner div.cfx{ background: url(../images/manual/fv/bg_fv_03-sp.png) center 10px/contain no-repeat;}

#fv .guidance .blue{ width: 100%; padding: 27px 0 0; font-size: 14px; background: url(../images/manual/common/icn_flag.png) 60px top/80px no-repeat;}
#fv .guidance .curve{ font-size: 16px;}
#fv .guidance .line{ width: 35px; margin-top: 10px;}

#fv .guidance .bg{ background: none;}
#fv .guidance figure{ float: none; margin: 0 auto; padding: 20px 0 0; width: 100px;}
#fv .guidance img{ width: 100%; height: auto;}	
#fv .guidance figcaption{ font-size: 15px; line-height: 25px;}
#fv .guidance figcaption span{ font-size: 12px;}

#fv .guidance .cfx p{ float: none; width: 90%; font-size: 12px; padding: 25px 0 0; margin: 0 auto; letter-spacing: 0.1em; line-height: 26px;}



/* bread --------------------------------------------------------------------------------------------------- */
#bread{ padding: 10px 0 30px;}

#bread li{ font-size: 10px; padding: 0 25px 0 0;}
#bread li::after{ width: 10px; right: 8%;}



/* about --------------------------------------------------------------------------------------------------- */
#about{ padding: 50px 0;}
#about .bg{ display: flex; justify-content: space-between; background: none; width: 100%; height: auto;}
#about .bg p{ width: 72%; padding: 0; font-size: 14px; line-height: 24px;}
#about h2{ font-size: 16px;}

#about h2 span{ font-size: 40px;}
#about h2 span:first-of-type{ padding: 0 10px 0 0;}
#about h2 span:last-of-type{ padding: 0 0 0 10px;}

#about h2 img{ width: 45%; padding-right: 6px;}
#about h2::after{ border-top: 12px solid #e85f9d; border-right: 12px solid transparent; border-left: 12px solid transparent;}



/* before_if */
#about .before_if{ padding-bottom: 50px;}

#about .before_if ul li:first-of-type{ float: none; width: 100%; padding: 0 0 90px 0;}
#about .before_if ul li:first-of-type::after{ background: url(../images/manual/common/icn_arrow07.png) center top/contain no-repeat; bottom: 4%; right: 44%; transform: translate(0, -50%);}
#about .before_if ul li:last-of-type{ float: none; width: 100%;}
#about .before_if p,
#about .before_if p.pink{ width: 100%; height: 40px; font-size: 15px; padding-top: 13px;}

#function .benefit_box li p.bg{ display: block;}
#about .before_if .item{ width: 100%;}

#about .before_if li:first-of-type dl{ width: 210px;}
#about .before_if dt,
#about .before_if dd{ line-height: 25px;}
#about .before_if dt{ font-size: 15px;}
#about .before_if dd{ font-size: 14px;}


/* steps */
#about .steps .cfx{ padding: 30px 0 0;}

#about .steps div:nth-of-type(2n+1) .item,
#about .steps div:nth-of-type(2n) .item{ float: none; width: 90%; margin: 0 auto; height: auto;}
#about .steps div:nth-of-type(2n) div{ float: none; width: 100%;}

#about .steps div:nth-of-type(2n+1) div{ float: none; width: 90%; margin: 0 auto; padding: 30px 0 0;}
#about .steps div:nth-of-type(2n) div{ width: 90%; margin: 0 auto; padding: 30px 0 0;}

#about .steps p{ font-size: 14px;}
#about .steps dl.cfx{ padding: 10px 0;}
#about .steps dt{ width: 55px; font-size: 15px;}
#about .steps dd{ width: 240px; font-size: 17px; float: left; padding: 0 0 0 10px;}

#about .steps p.point{ background: #f8f8f8; position: relative; margin: 45px 0 0; padding: 15px 30px; font-size: 12px;}
#about .steps p.point span{ position: absolute; top: -25px; left: 0; }


/* recommend */
#about .recommend{ padding-bottom: 0;}
#about .recommend li{ padding-right: 0; float: none; width: 100%;}

#about .recommend dl{ width: 270px; margin: 0 auto;}
#about .recommend dt{ padding-right: 15px;}

#about .recommend div.cfx{ width: 340px; margin: 0 auto;}
#about .recommend .circle{ width: 110px; height: 110px; float: left; margin: 0 10px 40px 0;}
#about .recommend .circle img{ width: 44px; padding: 24px 0;}
#about .recommend p{ padding-top: 25px; font-size: 15px; line-height: 30px; float: left; text-align: left;}


/* why */
#about .why{ padding: 30px 0 35px;}

#about .why .item{ width: 50%; margin: 0 auto; float: none;}

#about .why div{ float: none; width: 100%}
#about .why p:first-of-type{ font-size: 18px; line-height: 30px; padding-top: 30px;}
#about .why p:last-of-type{ padding-top: 15px; line-height: 25px; font-size: 12px;}


/* function --------------------------------------------------------------------------------------------------- */
#function .premium.box02 .item,
#function .manual .item,
#function .premium.box03 .item{ width: 100%; height: auto;}

#function .bg p { width: 70%; margin: 0; padding: 0; font-size: 13px; line-height: 25px;}


/* up */
#function .inner_box{ padding: 35px 20px;}
#function .bg{ background: none; width: 100%; height: auto;}

#function .up{ overflow: hidden; }
#function .up .bg{ padding-bottom: 70px;}
#function .up .bg p{ padding: 0; margin: 0;}
#function .up .bg p.pink{ padding: 0 0 25px; width: 100%; margin: 0; font-size: 16px; text-align: center;}
#function .bg-sp p:first-of-type{ font-size: 20px; letter-spacing: 0.05em; line-height: 20px;}

#function .up .scroll{ overflow-x: scroll; width: 100%; }
#function .up table{ overflow-x: scroll; width: 750px; }

#function .up th{ font-size: 13px; line-height: 170%; }
#function .up th.col_ttl{ font-size: 13px; }
#function .up th.col_ttl img{ width: auto; height: 15px; }
#function .up th.col_ttl strong{ font-size: 13px; vertical-align: sub; }
#function .up th.col_ttl small{ display: block; }

#function .up td small{ width: 50px; }



/*
#function .up ul.flex{ display: block;}
#function .up li{ padding: 0; }
#function .up li.blue{ width: 100%; height: auto;}
#function .up li.blue::after{ bottom: -70px; left: 50%; font-size: 19px;}

#function .up dl{ top: -40px; width: 200px; }
#function .up dt{ width: 70px; }
#function .up dt img{ width: 100%; height: auto; }
#function .up dd{ font-size: 20px; }

#broccoli dl dt{ width: 70px; padding-right: 15px; }
#broccoli dl dt img{ width: 100%; height: auto;}
#broccoli dl dd{ font-size: 20px; line-height: 20px;}
#broccoli dl dd.dd_box{ width: 230px;}

#broccoli .up dl{ justify-content: center; width: 90%; }
#function .up dd span{ font-size: 14px;}

#broccoli .up dl dd,
#function .up li.blue dd{ width: initial; line-height: 100%; }
#function .up .free dd{ width: 130px; }

#function .up .free{ border-radius: 10px; }
#function .up .free ol,
#function .up li.blue ol,
#function .up li.pink ol{ padding: 50px 10px 0; align-items: flex-start; }

#function .up .free ol li,
#function .up li.blue li,
#function .up li.pink li{ width: calc(100% / 3 - 3%); flex-direction: column; margin: 0 4% 20px 0; padding: 0; }

#function .up .free ol li:last-of-type{ margin: 0; }

#function .up li.blue ol{ display: flex; }

#function .up li.pink{ width: 100%; height: auto; margin-top: 100px;}

#function .up ol{ padding: 0 10px;}
#function .up ol li{ margin-bottom: 0; padding-bottom: 20px; font-size: 12px; line-height: 20px; padding-right: 15px;}
#function .up ol li:nth-of-type(3n){ margin-right: 0;}
#function .up ol li img{ padding: 0 0 15px; width: 100%; height: auto;}
#function .up ol li p{ width: 100%; padding: 0; font-size: 12px; text-align: center; font-feature-settings: "palt"; }

#function .up .more{ padding: 35px 0 70px; }
#function .up .more p{ padding: 0 0 5px; font-size: 15px; line-height: 200%; }
#function .up .more p span{ width: 200px; font-size: 13px; }
#function .up .more p span:before,
#function .up .more p span:after{ height: 15px; }
#function .up .more .path{ width: 120px; height: 20px; }
*/



/* bottom */
#function .botom .inner_s{ width: 100%;}

#function .botom .bg{ margin: 25px 0 30px; display: flex; justify-content: space-between;}
#function .qa.bg{ background: none; width: 100%; height: auto;}


/* manual */
#function .bg02{ display: flex; justify-content: space-between; margin: 0; padding: 25px 0 30px; background: none; width: 100%; height: auto;}
#function .bg02 p{ width: 70%; margin: 0; padding: 0; font-size: 14px; line-height: 25px;}

#function .botom dl.flex{ top: -30px; justify-content: flex-start; width: 100%;}
#function .manual dl span{ font-size: 25px;}

#broccoli #function .manual dd{ font-size: 13px;}

#function .manual.flex{ display: block; padding-bottom: 40px;}
#function .manual div{ width: 100%; height: auto; margin: 80px 0 0 auto; padding: 40px 15px; box-sizing: border-box;}

#function .manual li{ font-size: 13px; padding: 10px 0 10px 20px;}
#function .manual li:last-of-type{ margin-bottom: 0;}
#function .manual li span{ font-size: 18px; vertical-align: middle;}


/* premium */
#function .premium.box01{ margin: 25px 0 0;}
#function .premium.box04{ margin: 25px 0; }

#function .premium.box02 .item,
#function .manual .item,
#function .premium.box03 .item{ width: 70%; margin: 0 auto;}

#function .premium.box02 .item{ top: 0;}
#function .premium.box03 .item{ top: 0;}

#function p.solidus{ width: 280px; margin: 0 auto; font-size: 15px; line-height: 27px;}
#function p.solidus::before{ width: 10px; height: 10px; left: 10px; bottom: 10px;}
#function p.solidus::after{ width: 10px; height: 10px; right: 10px; bottom: 10px;}

#function .premium .item{ position: initial; width: 80%; margin: 0 auto;}

#function .premium { padding: 0; background: none;}
#function .premium .bg_color{ position: relative; margin: 70px 0 0; padding: 40px 15px 20px; background: #fff6fa; border-radius: 10px;}

#function .premium .subttl{ font-size: 16px; padding-bottom: 15px;}

#function .premium.box02{ margin: 40px 0 0;}
#function .premium.box02 ul{ padding: 0;}
#function .premium.box02 .flex{ justify-content: flex-start;}

#function .premium.box03{ margin: 50px 0;}

#function .premium.even .flex{ justify-content: flex-start; }
#function .premium.even ul{ padding: 0; }


/* benefit */
#function .benefit{ font-size: 17px; padding: 0 0 25px;}
#function .benefit::before,
#function .benefit::after{ width: 20px;}

#function .benefit_box{ padding-bottom: 50px;}
#function .benefit_box .box{ width: 90%; margin: 0 auto;}

#function .benefit_box li{ width: 100%;}
#function .benefit_box li.box01{ padding-bottom: 50px;}

#function .benefit_box.flex{ display: block;}

#function .benefit_box p.bg{ height: 143px;	width: 100%; font-size: 14px; padding: 13px 0 0;}
#function .benefit_box li:first-of-type p.bg{ margin: 0 auto; width: 90%;}

#function .benefit_box p:nth-of-type(2){ height: auto; font-size: 13px; line-height: 23px;}

#function .benefit_box ol.pink{ width: 65%;}
#function .benefit_box .item{ width: 50px; padding: 20px 0;}
#function .benefit_box .flex img{ width: 26%; height: auto;}
#function .benefit_box ol li{ width: 100%; height: 45px; font-size: 13px; padding: 15px 0;}

#function .benefit_box p:last-of-type{ line-height: 23px; padding-top: 20px; font-size: 11px;}


/* qa */
#function .qa{ padding-bottom: 50px;}
#function .qa .bg{ background: url(../images/manual/common/guide-sp.png) center top/30% no-repeat;}
#function .qa_bg.bg{ background: none; width: 100%; height: auto;}
#function .qa .flex_item{ display: block;}

#function .qa .box_b{ width: 100%; padding: 10px 0; margin: 80px 0 0;}
#function .qa ul{ padding: 40px 15px 15px;}
#function .qa li{ font-size: 14px; line-height: 20px; text-indent: -2.6em;  padding-left: 3em;}

#function li.arrow{ padding: 0 0 15px; width: 65px; margin: 0 auto; text-indent: 0;}

#function .qa li.blue{ text-indent: 0; padding: 0;}

#function .qa dl{ top: -40px; left: 20px; transform: none;}


/* dictionary */
#function .dictionary{ padding: 25px 0 50px;}
#function .dictionary div.flex{ display: block;}
#function .dictionary .flex div{ padding: 50px 0 0;}

#function .dictionary p.solidus{ font-size: 16px; line-height: 30px;}

#function .dictionary p.solidus span{ font-size: 30px; letter-spacing: 0.05em;}
#function .dictionary p.solidus .slash{ position: relative; display: block; font-size: 16px; text-align: center; width: 110px; margin: 0 auto;}

#function .dictionary p.solidus .slash::before,
#function .dictionary p.solidus .slash::after{ position: absolute; content: ""; width: 15px; height: 15px; bottom: 5px;}
#function .dictionary p.solidus .slash::before{ left: 0; border-left: 2px solid #000; transform: rotate(-45deg);}
#function .dictionary p.solidus .slash::after{ right: 0; border-right: 2px solid #000; transform: rotate(45deg);}

#function .dictionary p.solidus::before{ display: none;}
#function .dictionary p.solidus::after{ display: none;}

#function .dictionary .box_b{ padding: 55px 15px 15px;}
#function .dictionary .box_p{ padding: 55px 15px 15px;}

#function .dictionary ul{ padding: 50px 0 0;}


/* skill */
#function .skill .bg_color{ position: relative; margin: 25px 0 50px; padding: 55px 15px 25px; background: #fff6fa; border-radius: 10px;}
#function .skill .box_p li.arrow{ padding: 0;}
#function .skill .box_p li.arrow img{ padding: 0 0 15px;}
#function .skill .box_p li.pink{ text-align: center; line-height: 25px;}

#function .skill{ margin: 25px 0 0; padding: 0; background: none;}
#function .skill .box_p{ background: none;}
#function .skill .box_p.flex{ display: block;}

#function .skill .item{ position: initial; padding-bottom: 25px;}

#function .skill dl{ top: -33px; left: 20px;}


/* shindan */
#broccoli #function h3{ margin: 0 auto; width: 100%; border-radius: 50px; height: auto; padding: 4px 0;}

#function .shindan .box{ width: 100%;}
#function .shindan .flex_item{ display: block;}
#function .shindan .item{ position: initial; padding-bottom: 25px;}

#function .shindan{ margin: 60px 0 0; padding: 0; background: none;}
#function .shindan .box_p{ background: none;}

#function .shindan .bg_color{ position: relative; margin: 50px 0 0; padding: 55px 15px 25px; box-sizing: border-box; background: #fff6fa; border-radius: 10px;}

#function .shindan dl{ top: -45px; left: 20px;}


/* cta --------------------------------------------------------------------------------------------------------------- */
#cta{ padding: 45px 0;}
#cta .inner_box{ padding: 40px 30px;}
#cta .flex_item{ display: block;}

#broccoli #cta h4{ padding: 25px 0 0; text-align: center;}

#cta p{ font-size: 13px; margin: 0 auto 15px;}
#cta p::after,
#cta p::before{ width: 18px; height: 10px;}
#cta p::before{ bottom: 15px; left: -6px;}
#cta p::after{ bottom: 15px; right: -6px;}


/* app --------------------------------------------------------------------------------------------------------------- */
#app{ padding: 50px 0;}
#app .ceicle{ background: url(../images/manual/other/img_app.png) left 170px/120px 170px no-repeat; height: auto; border-radius: 20px;}
#app .ceicle div{ width: 100%; margin: 0 auto 0 auto; padding: 25px 0;}

#app h4{ font-size: 22px;}
#broccoli .ceicle h4{ padding: 0 0 10px; text-align: center;}
#app p{ font-size: 16px; text-align: center; line-height: 25px;}

#app .flex_item{ display: block; padding: 0 0 0 130px;}

#app li{ padding: 0 0 10px 0;}
#app li:first-of-type{ width: 100%; height: auto;}
#app li:nth-of-type(2){ width: 100%; height: auto;}
#app li:last-of-type{ display: none;}



/* price --------------------------------------------------------------------------------------------------------------- */
#price{ padding: 50px 0 60px;}
#price .inner_s{ width: 90%;}

#broccoli #price h3{   margin: 0 auto; width: 100%; border-radius: 50px; height: auto;  padding: 10px 0;}

#price div.bg:first-of-type{ margin: 25px 0 15px;}
#price .bg{ display: flex; justify-content: space-between; background: none; margin: 25px 0 15px; width: 100%; height: auto;}
#price .bg p{ width: 70%; padding: 0; font-size: 14px; line-height: 26px;}

#price h4{ padding: 20px 0 10px; width: 100%; font-size: 16px; line-height: 150%; }
#price h4:before,
#price h4:after{ width: 20px; height: 20px; bottom: 20px; }
#price h4:before{ left: 23px; }
#price h4:after{ right: 23px; }

#price h4.title_1:before{ left: 23px; }
#price h4.title_1:after{  right: 23px; }

#price .flex_2{padding:  0 0 20px;}
#price .flex{ display: block;}

#price .flex div{ width: 100%; min-height: auto; padding: 20px 30px; border-radius: 10px;}
#price .flex div:first-of-type::after{ right: 0;}

#price dl{ padding-bottom: 10px; justify-content: center;}
#price dt{ padding: 4px 7px; font-size: 12px;}
#price dd{ font-size: 25px;}
#price dd span{ font-size: 11px;}
#price dd span.pink{ font-size: 22px;}

#price ul{ padding: 10px 0 0;}
#price .check_box li{ padding-bottom: 5px; font-size: 13px;}
#price .check_box li:last-of-type{ padding-bottom: 0;}
#price .check_box li img{ width: 7%; height: auto;}

#price .flex div:first-of-type{ margin: 0 auto 50px;}
#price .flex div:first-of-type::after{ width: 25px; height: 25px; left: 50%; bottom: -50px;}

#price p{ font-weight: 800; padding: 20px 0; font-size: 12px; line-height: 20px; width: 90%; margin: 0 auto;}

#price .btn{ width: 100%;}


#broccoli .btn_top{ margin: 70px auto 0; }


}