@charset "UTF-8";
/* ver13 */

/* common */
body { font-weight: 300;}
*{ box-sizing: border-box;}
img { width: 100%; height: auto;}
sub { font-size: 10px;}
h2 { margin-bottom: 30px; font-size: 20px; text-align: center; font-weight: normal;}
.co-orange { color: #fba026;}
.inr { width: 100%; max-width: 1030px; margin: auto; padding: 0 20px; line-height: 1.5;}
.notes { font-size: 12px;}
a:hover { color: #fba026;}
.text-right { text-align: right;}
.d-flex-bet { display: flex; justify-content: space-between; flex-wrap: wrap;}
.d-flex-center { display: flex; justify-content: center; flex-wrap: wrap;}
@media print, (min-width: 768px) {
  h2 { margin-bottom: 60px; font-size: 40px;}
}
.dip01 { color: #333;}
header { display: flex; align-items: center; color: #fff; font-size: 14px; background: #000;}
.header-inr { width: 100%; max-width: 1030px; margin: auto; }
header a { color: #fff;}
header ul { display: flex; justify-content: center; flex-wrap: wrap;}
header ul li:after { content: "|"; margin: 0 0.4em;}
header ul li:last-child:after { content: ""; margin: 0;}
@media only screen and (max-width: 767px) {
  header .logo-pc {display: none;}
  header .logo-sp { width: 80px; margin: auto;}
  header ul li { line-height: 1.8;}
}
@media print, (min-width: 821px) {  
  header { height: 70px; font-szie: 18px;}
  header .logo-sp { display: none;}
  header .logo-pc { width: 120px;}
  header ul {  font-size: 18px; margin-left: -50px;}
  header ul li:after { margin: 0 0.8em;}
}
@media screen and (min-width:768px) and ( max-width:820px) {
  header .logo-pc {display: none;}
  header .logo-sp { width: 80px; margin: auto;}
  header ul li { line-height: 1.8;}
  header ul {  font-size: 18px;}
}
/* 01 .mv*/
.mv { position: relative; color: #fff; background: #000 url(../img/dip01/bg-mv.jpg) no-repeat bottom 100px right/100% auto;}
.mv .inr { position: relative; display: flex; justify-content: space-between; height: 100%;}
.mv .box-text { width: 100%;}
.mv h1 { padding-top: 30px; font-size: 18px; font-weight: normal; font-family: serif;  line-height: 1.3;}
.mv .fontL { font-size: 28px;}
.mv .fontM { font-size: 24px;}
.mv .fontS { font-size: 22px;}
.mv .point-text { margin-top: 10px; font-size: 12px; font-family: serif;}
.mv ul { display: flex; justify-content: space-around; flex-wrap: wrap; width: 100%; margin: 0 0 20px;}
.mv ul li { width: 49%; margin: 0; padding: 3px 5px 0; text-align: center; background: #fff;}
.mv ul li img { width: auto; height: 30px;}
.mv .dipsan { position: absolute; right: 0; bottom: 0; width: 39%; max-width: 200px;}
@media only screen and (max-width: 767px) {
  .mv h1 { border-bottom: 0.7px solid #fba026;}
  .mv ul li:nth-child(n + 3) { margin-top: 3px;}
  .mv .notes { margin-bottom: 20px; font-size: 10px;}
  .mv .dipsan-pc { display: none;}
  .mv .dipsan-sp { width: 20%; min-width: 140px; margin: 10px auto -5px;}
}
@media print, (min-width: 768px) {  
  .mv { height: 600px; background-position: top right; background-size: auto 100%;}
  .mv h1 { padding-top: 105px; font-size: 4.368vw; line-height: 1;}
  .mv .point-text { margin-top: 60px; font-size: 20px;}
  .mv .box-text { width: 60%; max-width: 537px;}
  .mv .fontL { font-size: 7.281vw;}
  .mv .fontM { font-size: 5.339vw;}
  .mv .fontS { font-size: 3.203vw;}
  .mv ul { width: 100%; margin: 20px 0 60px;}
  .mv ul li { width: 24%; height: 50px; padding: 10px 0;}
  .mv ul li img { width: auto; height: 30px;}
  .mv .dipsan-pc { position: absolute; right: 0; bottom: 0; width: 39%; max-width: 395px;}
  .mv .dipsan-sp { display: none;}
}
@media print, (min-width: 1030px) { 
  .mv h1 { font-size: 45px;}
  .mv .fontL { font-size: 75px;}
  .mv .fontM { font-size: 55px;}
  .mv .fontS { font-size: 33px;}
}
/* strength */
.strength, .worries, .comparison, .service, .charges, .success, .flow { padding: 40px 0;}
.strength h3 { margin-top: 50px; font-size: 16px; text-align: center; font-weight: 500;}
.strength h3 .number { color: #fd3f51; font-size: 26px;}
.strength .bg-pink { position: relative; margin-bottom: 33px;  color: #fff; font-size: 20px; text-align: center; font-weight: 300;}
.strength .bg-pink:before { content: ''; position: absolute; bottom: 0; width: 270px; height: 35px; margin-left: -20px; background: #fd3f51; transform:skewX(-10deg); z-index: -1;}
.strength .bg-pink span { color: #333; font-size: 22px; font-weight: 500;}
.strength .box-movie, .strength .box-left, .strength .box-right { width: 100%;}
.strength .box-movie .inr {  position: relative; width:100%; height:0; padding-top: 56.25%;}
.strength .box-movie .inr iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
@media only screen and (max-width: 767px) {
  .strength .box-movie:nth-of-type(2) { margin-top: 20px;}
  .strength .box-left { width: 90%;}
  .strength .box-right { width: 70%; margin-top: 20px;}
}
@media print, (min-width: 768px) {
  .strength, .worries, .comparison, .service, .charges, .success, .flow { padding: 60px 0;}
  .strength h3 { font-size: 26px; line-height: 2;}
  .strength h3 .number { font-size: 40px;}
  .strength .bg-pink { font-size: 25px;}
  .strength .bg-pink:before { margin-left: -30px; bottom: -3px; width: 340px; height: 50px;}
  .strength .bg-pink span { font-size: 28px;}
  .strength .box-movie { width: 49.5%;}
  .strength .d-flex-center { align-items: flex-end;}
  .strength .box-left { width: 48%; margin-right: 1%;}
  .strength .box-right { width: 35%; margin-left: 1%;}
}
/* strength > worries */
.worries { background: #eee;}
.box-worries img { border-top-left-radius: 8px; border-top-right-radius: 8px;}
.box-worries .label { display: flex; justify-content: center; align-items: center; flex-flow: column; width: 76px; height: 76px; color: #fff; font-size: 18px; background: rgba(0,0,0,0.3); border: 1px solid #fff; border-radius: 100px;}
.box-worries:nth-of-type(2) .label { background: rgba(0,0,0,0.6);}
.box-worries:nth-of-type(3) .label { background: rgba(0,0,0,0.7);}
.box-worries .label span { font-size: 10px;}
.box-worries .text { color: #fff; font-size: 13px; font-weight: 100; writing-mode: vertical-rl;}
.box-worries .text span { display: inline-block; padding: 10px 5px; letter-spacing: 0.2em; background: rgba(0,0,0,0.8);}
.box-worries .text span:last-of-type { margin-right: 10px;}
.box-worries .box-white { padding: 20px; font-size: 14px; background: #fff;}
.box-worries .box-white p { margin-bottom: 0.5em;}
.box-worries .box-white p:last-of-type { margin-bottom: 0;}
.box-worries .box-white .ttl { margin-bottom: 20px; font-size: 18px; text-align: center; font-weight: 500; line-height: 1.3;}
.box-worries .box-white .ttl span { background:linear-gradient(transparent 60%, #fff386 60%);}
.box-worries .box-white .ttl span:last-of-type { margin-right: 10px;}
.box-worries .box-white .notes { margin-top: 20px;}
.box-worries .box-white .fontS { font-size: 20px;}

@media only screen and (max-width: 767px) {
  .box-worries img { margin-bottom: -5px;}
  .box-worries .sp-box { position: relative; margin-top: 50px;}
  .box-worries:nth-of-type(odd) .label { position: absolute; bottom: 10px; right: 10px; background: rgba(0,0,0,0.5);}
  .box-worries:nth-of-type(odd) .text { position: absolute; top: -20px; left: 10px;}
  .box-worries:nth-of-type(even) .label { position: absolute; bottom: 10px; left: 10px; background: rgba(0,0,0,0.5);}
  .box-worries:nth-of-type(even) .text { position: absolute; top: -20px; right: 10px;}
}
@media print, (min-width: 768px) { 
  .box-worries img { border-radius: 8px;}
  .box-worries { position: relative; min-height: 375px; margin-top: 70px;}
  .box-worries figure { width: 58.25%; max-width: 600px;}
  .box-worries:nth-of-type(even) figure { float: right;}
  .box-worries .label { width: 100px; height: 100px; font-size: 24px;}
  .box-worries .label span { font-size: 12px;}
  .box-worries:nth-of-type(odd) .label { position: absolute; bottom: 95px; left: 330px;}
  .box-worries:nth-of-type(even) .label { position: absolute; bottom: 95px; right: 330px;}
  .box-worries .text { font-size: 22px;}
  .box-worries:nth-of-type(odd) .text { position: absolute; top: -20px; left: 20px; }
  .box-worries:nth-of-type(even) .text { position: absolute; top: -20px; right: 20px; text-align: left;}
  .box-worries .box-white { width: calc(58.25% + 50px); max-width: 600px; padding: 26px; font-size: 17px;}
  .box-worries:nth-of-type(odd) .box-white { position: absolute; top: 50px; right: 0;}
  .box-worries:nth-of-type(even) .box-white { position: absolute; top: 50px; left: 0; text-align: left;}
  .box-worries .box-white .ttl { margin-bottom: 35px; font-size: 30px;}
}
@media screen and (min-width:768px) and ( max-width:820px) {
  .worries h2 { font-size: 30px;}
  .box-worries .text { font-size: 18px;}
  .box-worries .text span { letter-spacing: 0.45em;}
  .box-worries:nth-of-type(odd) .text { top: -30px;}
  .box-worries:nth-of-type(even) .text { top: -30px;}
  .box-worries .label { width: 85px; height: 85px; font-size: 18px;}
  .box-worries .label span { font-size: 9px;}
  .box-worries:nth-of-type(odd) .label { top: 33%; left: 35%;}
  .box-worries:nth-of-type(even) .label { top: 33%; right: 35%;}
  .box-worries .box-white { width: calc(53%); font-size: 14px;}
  .box-worries .box-white .ttl { font-size: 19px;}
}
@media print, (min-width: 1025px) { 
  .box-worries:nth-of-type(odd) .box-white { right: -50px;}
  .box-worries:nth-of-type(even) .box-white { left: -50px;}
}
/* .strength > .comparison */
.comparison h2 { margin-bottom: 30px; font-weight: 500;}
.comparison .bg-dip, .comparison .bg-other { position: relative; color: #fff; font-size: 18px;}
.comparison .bg-dip:before { content: ''; position: absolute; bottom: -2px; width: 150px; height: 28px; margin-left: -10px; background: #fd3f51; transform:skewX(-10deg); z-index: -1;}
.comparison .bg-other:before { content: ''; position: absolute; bottom: -2px; width: 140px; height: 28px; margin-left: -5px; margin-right: 50px; background: #91666a; transform:skewX(-10deg); z-index: -1;}
.comparison ul { display: flex; justify-content: space-around; flex-wrap: wrap; max-width: 80%; margin: 0 auto 20px;}
.comparison ul li { width: 48%; text-align: center;}
.comparison ul li img { width: auto!important; height: 20px;}
.comparison table { font-size: 12px; text-align: center;}
.comparison table th { width: 16.666%; padding: 15px 0; color: #fff; font-size: 12px; vertical-align: middle; background: #91666a; border: 2px #fff solid;}
.comparison table td { vertical-align: middle; border: 2px #fff solid;}
.comparison table th:first-of-type { background: #666;}
.comparison table td p { display: flex; justify-content: center; align-items: center; flex-flow: column; height: 160px; padding: 5px 0; border: 1px solid #999;}
.comparison table td span { display: block; font-size: 12px;}

.bg-none { background: none!important;}
.b-t-l-radius { border-top-left-radius: 8px;}
.b-b-l-radius { border-bottom-left-radius: 8px;}
.b-t-r-radius { border-top-right-radius: 8px;}
.b-b-r-radius { border-bottom-right-radius: 8px;}
.border-pink { border: 3px solid #fd3f51!important}
.bg-c-pink { color: #fff; background: #fd3f51!important}
@media only screen and (max-width: 767px) {
  .comparison ul li:nth-child(odd) { margin-right: 2%;}
  .comparison ul li:nth-child(n + 3) { margin-top: 10px;}
}
@media print, (min-width: 768px) { 
  .comparison h2 { font-size: 25px;}
  .comparison h2 span { font-size: 30px;}
  .comparison .bg-dip, .comparison .bg-other { font-size: 25px;}
  .comparison .bg-dip:before { bottom: -3px; margin-left: -5px; width: 200px; height: 40px;}
  .comparison .bg-other:before { bottom: -3px; margin-left: -3px; margin-right: 50px; width: 180px; height: 40px;}
  .comparison ul li { width: auto;}
  .comparison ul li img { height: 30px;}
  .comparison table { font-size: 18px;}
  .comparison table th { font-size: 14px; border-width: 4px;}
  .comparison table td { border-width: 4px;}
  .comparison table td p { height: 76px;}
}
@media screen and (min-width:768px) and ( max-width:820px) {
  .comparison ul li img { height: 25px;}
}
/* service */
.service { background: #eee;}
.service h2 { font-size: 20px;}
.service h2 .fontM { font-size: 22px;}
.service h2 .fontL { font-size: 24px;}
.service h2 .bg-pink { background:linear-gradient(transparent 60%, #f1cbcf 60%);}
.service .box-feature .ttl { font-size: 25px; font-weight: bold;}
.service .box-feature ul { margin-top: 30px; font-size: 16px;}
.service .box-feature ul figure { width: 100%; margin: 20px 0 10px; border-bottom: 2px solid #e60012;}
.service .box-feature ul figure img { width: auto!important; height: 20px!important;}
.service .box-feature ul li:nth-of-type(2) figure { border-color: #004ea2;}
.service .box-feature ul li:nth-of-type(2) figure img { width: 93px;}
.service .box-feature ul li:nth-of-type(3) figure { border-color: #7b0000;}
.service .box-feature ul li:nth-of-type(3) figure img { width: 125px;}
.service .box-feature ul li:nth-of-type(4) figure { border-color: #ff7800;}
.service .box-feature ul li:nth-of-type(4) figure img { width: 140px;}
.service .box-feature ul figure img { margin-bottom: -6px;}
.service .box-feature ul span { font-size: 18px; font-weight: bold;}
@media only screen and (max-width: 767px) {
  .service .box-feature .ttl { font-size: 22px; text-align: center;}
  .service .box-feature ul { margin-bottom: 30px;}
}
@media print, (min-width: 768px) { 
  .service h2 { font-size: 25px;}
  .service h2 .fontM { font-size: 27px;}
  .service h2 .fontL { font-size: 30px;}
  .service .d-flex-bet { flex-direction: row-reverse;}
  .service .d-flex-bet figure { width: 60%;}
  .service .d-flex-bet .box-feature { width: calc(40% - 30px);}
}
/* graph-area */
.graph-area { margin-top: 20px; padding: 20px; background: #fff; border-radius: 12px;}
.graph-area .notes { font-size: 10px;}
.graph-area img { width: 100%; height: auto;}
.graph-area ul { display: flex; justify-content: space-between; flex-wrap: wrap;}
.graph-area ul li { width: 100%; text-align: center;}
.graph-area ul li .ttl { padding: 10px; text-align: center; background: #fef7f8;}
.graph-area ul li .ttl p { margin-bottom: 5px; color: #e60012; font-size: 12px; font-weight: bold;}
.graph-area ul li .ttl img { width: auto; height: 30px;}
.graph-area ul li:nth-child(2) .ttl { background: #f7f9fc;}
.graph-area ul li:nth-child(2) .ttl p { color: #004ea2;}
.graph-area ul li:nth-child(3) .ttl { background: #f8f2f2;}
.graph-area ul li:nth-child(3) .ttl p { color: #7b0000;}
.graph-area ul li:nth-child(4) .ttl { background: #fef9f2;}
.graph-area ul li:nth-child(4) .ttl p { color: #f08200;}
@media only screen and (max-width: 767px) {
  .graph-area ul li { margin-top: 30px;}
  .graph-area ul li:first-child { margin-top: 0;}
}
@media print, (min-width: 768px) { 
  .graph-area { margin-top: 40px; padding: 30px;}
  .graph-area ul li { width: 47%;}
  .graph-area ul li:nth-child(n + 3) { margin-top: 50px;}
  .graph-area ul li .ttl p { font-size: 13px;}
  .graph-area ul li .ttl img { height: 50px;}
}
/* .charges */
.charges input[name="tab_item"] { display: none;}
.charges .tabs { display: flex; justify-content: space-between; flex-wrap: wrap;}
.charges .tabs label { display: flex; justify-content: center; align-items: center; width: 49%; height: 45px; margin-bottom: 5px; transition: all 0.2s ease; color: #666; background: #ddd;}
.charges .tabs input:checked + label { color: #fff; font-weight: bold;}
.charges .tabs input:nth-of-type(1):checked + label { background: #e60012;}
.charges .tabs input:nth-of-type(2):checked + label { background: #004ea2;}
.charges .tabs input:nth-of-type(3):checked + label { background: #7b0000;}
.charges .tabs input:nth-of-type(4):checked + label { background: #f08200;}
#baitoru:checked ~ #baitoru_content,
#baitoru-next:checked ~ #next_content,
#baitoru-pro:checked ~ #pro_content, 
#hatarako:checked ~ #hatarako_content { display: block;}
.charges .ttl { margin: 10px 0 10px; color: #e60012; font-size: 18px; font-weight: bold;}
.charges .ttl img { width: auto; height: 23px; margin-right: 10px;}
.charges .baitoru-next .ttl { color: #004ea2;}
.charges .baitoru-pro .ttl { color: #7b0000;}
.charges .hatarako .ttl { color: #ff7800;}
.charges .tab_content { width: 100%; display: none;}
.charges .tab_content table th, .charges .tab_content table td { border: 1px solid #333;}
.charges .tab_content table th { width: 18%; padding: 10px 10px; color: #fff; vertical-align: middle; background: #e60012;}
.charges table th:first-child { width: 23%;}
.charges th.plan { background: #f27f88!important;}
.charges table td { height: 30px; padding: 0 20px; text-align: right; vertical-align: middle;}
.charges .baitoru-next table th { background: #004ea2;}
.charges .baitoru-next th.plan { background: #4c83be!important;}
.charges .baitoru-pro table { margin-bottom: 30px;}
.charges .baitoru-pro table th { width: 32%; background: #7b0000;}
.charges .baitoru-pro table th:first-of-type { width: 28%;}
.charges .baitoru-pro table td { padding: 10px 20px; text-align: left;}
.charges .hatarako table th { background: #f08200;}
.charges .hatarako table th { width: 15%;}
.charges .hatarako table th.plan { width: 20%!important; background: #f4a74c!important}
/* .gradation */
.charges .gradation { position: relative; width: 20px; min-height: 200px; margin-left: 0; writing-mode: vertical-rl; color: #e60012!important; text-align: center;}
.charges .gradation .inr { display: flex; justify-content: space-between; align-items: center; width: 20px; height: calc(100% - 16px); min-height: 200px; margin-top: 16px; padding: 5% 0; font-size: 14px; background: #fff;}
.charges .gradation:before { position: absolute; top: 0; left: 50%; transform: translateX(-50%); content:""; width: 0; height: 0; border-left: 16px solid transparent; border-right: 16px solid transparent; border-bottom: 16px solid #fff;}
.charges .baitoru-next .gradation { color: #004ea2!important;}
.charges .baitoru-pro .gradation { color: #7b0000!important;}
.charges .hatarako .gradation { color: #f08200!important;}
/* .baitoru-pro */
.charges .baitoru-pro .plan { width: 100%; padding: 3px 10px; color: #fff; text-align: center; background: #881919; border-radius: 2px;}
.charges .baitoru-pro .text-free { color: #7b0000; text-align: center; font-weight: bold;}
.charges .baitoru-pro .text-free span { color: #d2af65; font-size: 200%;}
.charges .baitoru-pro .text-free span:after { content: "円"; font-size: 12px;}
.charges .tab_content ul { margin-top: 30px; font-size: 14px;}
.charges .tab_content ul li, .charges .tab_content .notes { line-height: 1.8;}
.charges .tab_content ul li span { font-weight: bold;}
.charges .tab_content ul li:before { content: "■"; margin-right: 3px; color: #e60012;}
.charges .baitoru-next ul li:before { color: #004ea2;}
.charges .baitoru-pro ul li:before { color: #7b0000;}
.charges .hatarako ul li:before { color: #f08200;}
@media only screen and (max-width: 767px) {
  .charges .ttl img { display: block;}
  .table-slide { width: 100%; overflow-x: scroll;}
  .table-slide table { min-width: 880px;}
  .charges .gradation { margin-left: 0;}
  .charges .text-flick { margin-top: 10px;}
  .charges .baitoru .text-flick { color: #e60012;}
  .charges .baitoru-next .text-flick { color: #004ea2;}
  .charges .baitoru-pro .text-flick { color: #7b0000;}
  .charges .hatarako .text-flick { color: #f08200;}
}
@media print, (min-width: 768px) { 
  .charges .tabs label { width: 24%; height: 60px; margin-bottom: 10px; border-top-left-radius: 6px; border-top-right-radius: 6px;}
  .charges .ttl { display: flex; align-items: flex-start; margin: 30px 0 10px; font-size: 28px;}
  .charges .ttl img { height: 33px;}
  .charges .gradation { min-height: 300px; margin-left: 3px;}
  .charges .gradation .inr { min-height: 300px;}
}
@media screen and (min-width:768px) and ( max-width:820px) {
  .charges .tab_content table { font-size: 13px;}
  .charges .gradation { margin-left: -2px;}
  .charges .gradation .inr { min-height: 200px;}
}
/* .success */
.success { background: #eee;}
.success ul li { width: 100%; background: #fff; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px}
.success ul li img { width: 100%; height: auto;}
.success .list-inr { padding: 15px;}
.success .ttl { margin-bottom: 30px; font-size: 17px; font-weight: 500;}
.success .ttl span { background:linear-gradient(transparent 60%, #fff386 60%);}
.success dl { margin-bottom: 15px; font-size: 14px;}
.success dt { float: left; font-weight: bold;}
.success .text { font-size: 14px; line-height: 2;}
@media only screen and (max-width: 767px) {
  .success .ttl { text-align: center;}
  .success ul li { margin-top: 20px;}
  .success ul li:first-child { margin-top: 0;}
  .success figure { width: 100%; text-align: center; background: linear-gradient(180deg, #eee 0%, #eee 50%, #fff 50%, #fff 100%);}
  .success figure img { width: 85%!important;}
}
@media print, (min-width: 768px) { 
  .success ul li { width: 31.5%;}
  .success ul li:nth-child(n + 4) { margin-top: 20px;}
}
/* .flow */
.flow { background: #fcfcfc url(../img/dip01/bg-flow-sp.jpg) no-repeat top center/100% auto;}
.flow ul li { width: 100%; padding: 10px 10px 20px; text-align: center; font-size: 14px; background: #fff; line-height: 1.8; border: 1px solid #ddd;}
.flow h2 { color: #fff;}
.flow ul li .step { font-size: 14px; color: #fff; font-weight: bold; background: #fd3f51;}
.flow ul li .step:before { content: "step"; font-size: 12px;}
.flow ul li .ttl { margin: 10px 0; color: #fd3f51; font-size: 16px; font-weight: bold; line-height: 1.3;}
.flow ul li .ttl span { font-size: 12px;}
.flow ul li .text { font-size: 14px; text-align: left;}
@media only screen and (max-width: 767px) {
  .flow ul li { margin-top: 10px;}
  .flow ul li:first-child { border-top-left-radius: 12px; border-top-right-radius: 12px;}
  .flow ul li:last-child { border-bottom-left-radius: 12px; border-bottom-right-radius: 12px;}
}
@media print, (min-width: 768px) { 
  .flow { background-image: url(../img/dip01/bg-flow.jpg);}
  .flow ul li { width: 19%; border-radius: 6px;}
  .flow ul li .step { padding-bottom: 5px; color: #fd3f51; font-size: 20px; background: none; border-bottom: 1.5px solid #fd3f51;}
  .flow ul li .ttl { min-height: 3em;}
  .flow ul li .ttl span { display: block;}
}
.faq { background: #fcfcfc;}
.faq dl dt, .faq dl dd { display: flex; justify-content: space-between; font-weight: 500;}
.faq dl dt { align-items: center; padding-bottom: 20px; font-size: 14px;}
.faq dl dt figure { width: 50px;}
.faq dl dt div { width: calc(100% - 60px);}
.faq dl dd { align-items: flex-start; padding-bottom: 40px;}
.faq dl dd figure { width: 69px;}
.faq dl dd div { width: calc(100% - 69px); padding: 15px 20px; font-size: 14px; font-weight: normal; background: rgba(27,174,178,0.2); border-radius: 8px;}
.faq dl dd:nth-of-type(2) div { background: rgba(27,174,178,0.3);}
.faq dl dd:nth-of-type(3) div { background: rgba(27,174,178,0.5);}
.faq dl dd:nth-of-type(4) div { background: rgba(27,174,178,0.7);}
@media print, (min-width: 768px) { 
  .faq dl dt { font-size: 18px;}
  .faq dl dt figure { width: 100px;}
  .faq dl dt div { width: calc(100% - 120px);}
  .faq dl dd figure { width: 129px;}
  .faq dl dd div { width: calc(100% - 129px); font-size: 14px;}
}
/* CTA */
.cta-area { padding: 10px 0; color: #fff; background: #0d0d0d;}
.cta-area ul { display: flex; justify-content: space-between; flex-wrap: wrap;}
.cta-area ul li { width: 49%;}
.cta-area a, .cta-area .button { display: flex; justify-content: center; align-items: center; height: 50px; color: #0d0d0d; font-size: 16px; font-weight: 500; background: #fba026; border-radius: 3px;}
.cta-area .button { flex-flow: column; color: #ea8601; line-height: 1.3; background: #fff;}
.cta-area .button span { flex-direction: row; font-size: 11px;}
.cta-area .d-flex-bet { align-items: center;}
@media only screen and (max-width: 767px) {
  .cta-area ul li:last-child { width: 100%; margin-top: 10px;}
  .cta-area .text, .cta-area figure { display: none;}
}
@media print, (min-width: 768px) { 
  .cta-area { padding: 30px 0;}
  .cta-area.designB { background: linear-gradient(180deg, #fff 0%, #fff 24%, #0d0d0d 24%, #0d0d0d 100%);}
  .cta-area.designC { background: linear-gradient(180deg, #eee 0%, #eee 24%, #0d0d0d 24%, #0d0d0d 100%);}
  .cta-area.designD { background: linear-gradient(180deg, #fcfcfc 0%, #fcfcfc 24%, #0d0d0d 24%, #0d0d0d 100%);}
  .cta-area .d-flex-bet { margin-bottom: -6px;}
  .cta-area .text { width: calc(100% - 130px); margin-top: 30px; font-size: 13px;}
  .cta-area ul li { width: 32%;}
  .cta-area a, .cta-area .button { height: 60px; font-size: 20px; border-radius: 6px;}
  .cta-area .button span { font-size: 14px;}
  .cta-area ul li:first-child figure { width: 114px;}
  .cta-area ul li:nth-of-type(2) figure { width: 117px;}
  .cta-area ul li:last-child figure { width: 128px;}
}
/* modal-container */
.modal-container, .modal-tel-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; text-align: center; background: rgba(0,0,0,0.8); overflow: auto; opacity: 0; visibility: hidden; transition: .3s; z-index: 20;}
.modal-container:before, .modal-tel-container:before { content: ""; display: inline-block; vertical-align: middle; height: 100%;}
.modal-container.active, .modal-tel-container.active { opacity: 1; visibility: visible;}
.modal-body { position: relative; display: inline-block; vertical-align: middle; width: 90%; max-width: 760px;}
.modal-tel-body { position: relative; display: inline-block; vertical-align: middle; width: 50%; max-width: 360px;}
.modal-tel-body img { width: 90%;}
.modal-close, .modal-tel-close { position: absolute; display: flex; align-items: center; justify-content: center; top: 10px; right: 10px; width: 40px; height: 40px; font-size: 40px; color: #000; cursor: pointer;}
.modal-content { padding: 40px 20px 20px; text-align: center; background: #fff; border-radius: 6px;}
@media only screen and (max-width: 767px) {
  .modal-content { width: calc(100% - 40px);}
}