@charset "UTF-8";
@media screen and (min-width: 768px) { #header .product_logo_name { min-height: 80px; }
  #header .product_logo_name .product_logo { white-space: nowrap; } }
@media screen and (max-width: 767px) { #header .product_logo_name .product_name { font-size: 15px; } }

.mvTop .topNav li a.noanc:after { transform: translateY(-50%) rotate(-90deg); bottom: auto; left: auto; top: 50%; right: 5px; }
.mvTop .topNav li a.current { background: #578FD4; text-decoration: none; pointer-events: none; }
.mvTop .topNav li a.current:after { display: none; }
.mvTop .topNav li a.child { background: #578FD4; text-decoration: none; }
.mvTop .topNav li a.child:hover { opacity: .75; }
.mvTop .topNavVer2 { display: flex; flex-wrap: wrap; border: 1px solid #ddd; box-sizing: border-box; padding: 2px; margin-bottom: 40px; gap: 2px; }
@media screen and (max-width: 767px) { .mvTop .topNavVer2 { display: none; } }
.mvTop .topNavVer2 li { width: 138px; vertical-align: middle; font-size: 20px; font-weight: bold; line-height: 1.1; color: #fff; transition: all 0.2s 0s ease; background: #063e8d; position: relative; text-align: center; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; }
.mvTop .topNavVer2 li a { padding: 5px; display: flex; width: 100%; justify-content: center; height: 100%; align-items: center; background: #063e8d; position: relative; }
.mvTop .topNavVer2 li a::after { position: absolute; bottom: 0px; margin: auto; display: inline-block; text-align: center; left: calc(50% - 6px); border: 6px solid transparent; border-top: 6px solid #ff9b42; }
.mvTop .topNavVer2 li a:hover { background: #cbe3ff; color: #000; text-decoration: none; }
.mvTop .topNavVer2 li a.noanc:after { transform: translateY(-50%) rotate(-90deg); bottom: auto; left: auto; top: 50%; right: 5px; }
.mvTop .topNavVer2 li a.current { background: #cbe3ff; color: #000; text-decoration: none; pointer-events: none; }
.mvTop .topNavVer2 li a.child { background: #cbe3ff; color: #000; text-decoration: none; }
.mvTop .topNavVer2 li.withSubmenu { flex: 1; display: flex; flex-wrap: wrap; flex-direction: column; justify-content: space-between; }
.mvTop .topNavVer2 li.withSubmenu > a { height: auto; padding: 7px; }
.mvTop .topNavVer2 li.withSubmenu .submenu { display: flex; flex-wrap: wrap; flex-direction: row; background-color: #FFF; padding: 2px 0 0 0; gap: 2px; width: 100%; }
.mvTop .topNavVer2 li.withSubmenu .submenu > a { width: calc(calc(100% - 4px) / 3); line-height: 1.3; display: flex; justify-content: center; align-items: center; padding: 3px 15px; font-size: .65em; }
.mvTop .topNavVer2 li a { color: #FFF; }

.jireiWrap { padding: 40px 40px 100px; background: #cbe3ff url(/products/bizprojector/software/programapping/common/images/bg03.svg) 0 100.1% no-repeat; background-size: 100%; overflow: hidden; }
@media screen and (max-width: 767px) { .jireiWrap { padding: 20px 20px 50px; } }

.linkBtn { text-align: center; }
.linkBtn a { font-size: 1.1em; position: relative; display: inline-block; text-align: center; background: #fff; padding: 20px 40px 18px; line-height: 1; border-radius: 10px; color: #000; font-weight: bold; border: 4px solid #ff9b42; }
.linkBtn a:before { content: ""; position: absolute; top: 50%; transform: translateY(-50%); right: 2px; border: 8px solid transparent; border-left: 11px solid #ff9b42; }
.linkBtn a:hover { opacity: .5; text-decoration: none; }

/* 事例ページ */
#contents .wrapper .jireiList ul li { background-color: #FFF; border-radius: 20px; padding: 40px; box-shadow: 1px 1px 4px 2px rgba(0, 0, 0, 0.1); display: flex; flex-wrap: wrap; margin-bottom: 30px; }
@media screen and (max-width: 767px) { #contents .wrapper .jireiList ul li { padding: 5vw; margin-bottom: 5vw; border-radius: 3vw; gap: 3vw; } }
#contents .wrapper .jireiList ul li .secImg { width: 40%; }
@media screen and (max-width: 767px) { #contents .wrapper .jireiList ul li .secImg { width: 100%; } }
#contents .wrapper .jireiList ul li .secImg figure { margin: 0; }
#contents .wrapper .jireiList ul li .secImg img { width: 100%; height: auto; }
#contents .wrapper .jireiList ul li .secDetail { width: 60%; padding-left: 30px; color: #333; display: flex; flex-direction: column; justify-content: space-around; }
@media screen and (max-width: 767px) { #contents .wrapper .jireiList ul li .secDetail { width: 100%; padding: 0; } }
#contents .wrapper .jireiList ul li .secDetail h3 { font-weight: bold; font-size: 1.3em; margin-bottom: .7em; position: relative; padding-bottom: 20px; }
#contents .wrapper .jireiList ul li .secDetail h3:after { content: ""; display: block; background-color: #fff; background-size: 10px 10px; background-image: repeating-linear-gradient(135deg, #cccccc 0, #cccccc 1px, #ffffff 0, #ffffff 50%); height: 10px; border: none; position: absolute; bottom: 0; width: 100%; }
#contents .wrapper .jireiList ul li .secDetail .btn { text-align: right; width: 100%; display: flex; justify-content: flex-end; flex: 1; align-items: flex-end; margin-top: 1em; }
@media screen and (max-width: 767px) { #contents .wrapper .jireiList ul li .secDetail .btn { justify-content: center; } }
#contents .wrapper .jireiList ul li .secDetail .btn a { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; width: 180px; height: 40px; background: #063e8d; color: #fff; font-size: 1em; font-weight: 600; transition: all 0.2s 0s ease; }
#contents .wrapper .jireiList ul li .secDetail .btn a:hover { background: #66a8f7; text-decoration: none; }
#contents .wrapper .jireiList ul li .secDetail .btn a::after { position: absolute; content: ""; bottom: 0px; margin: auto; display: inline-block; text-align: center; left: calc(50% - 6px); border: 6px solid transparent; border-top: 6px solid #ff9b42; transform: translateY(-50%) rotate(-90deg); bottom: auto; left: auto; top: 50%; right: 5px; }
#contents .wrapper .jireiHead h2.mainTitle { font-size: 1.3em; position: relative; line-height: 1.6; padding: 0.25em 1em; display: inline-block; top: 0; margin-bottom: 1em; letter-spacing: 0.2em; }
@media screen and (max-width: 767px) { #contents .wrapper .jireiHead h2.mainTitle { font-size: 1.1em; } }
#contents .wrapper .jireiHead h2.mainTitle:before, #contents .wrapper .jireiHead h2.mainTitle:after { position: absolute; top: 0; content: ""; width: 8px; height: 100%; display: inline-block; border-top: solid 1px #063e8d; border-bottom: solid 1px #063e8d; }
#contents .wrapper .jireiHead h2.mainTitle:before { border-left: solid 1px #063e8d; left: 0; }
#contents .wrapper .jireiHead h2.mainTitle:after { border-right: solid 1px #063e8d; right: 0; }
#contents .wrapper .jireiHead .subTitle { font-size: 1.2em; }
#contents .wrapper .jireiBlock { background-color: #FFF; border-radius: 20px; padding: 40px; box-shadow: 1px 1px 4px 2px rgba(0, 0, 0, 0.1); }
@media screen and (max-width: 767px) { #contents .wrapper .jireiBlock { padding: 5vw; margin-bottom: 5vw; border-radius: 3vw; gap: 3vw; } }
#contents .wrapper .jireiBlock figure { margin: 0; }
#contents .wrapper .jireiBlock figure figcaption { margin-top: 15px; font-size: .8em; }
@media screen and (max-width: 767px) { #contents .wrapper .jireiBlock figure figcaption { margin-top: 2vw; } }
#contents .wrapper .jireiBlock img { width: 100%; height: auto; }
#contents .wrapper .jireiBlock p { line-height: 1.6; }
#contents .wrapper .jireiBlock p:not(:last-child) { margin-bottom: 15px; }
#contents .wrapper .jireiBlock p.intQ { position: relative; font-weight: bold; padding-left: 2em; }
#contents .wrapper .jireiBlock p.intQ::before { content: ""; display: inline-block; width: 1.8em; height: 1px; background-color: #999; position: absolute; top: .8em; left: 0; }
#contents .wrapper .jireiBlock p + .intQ { margin-top: 40px; }
#contents .wrapper .jireiBlock .jireiIntro { margin-bottom: 1.5em; }
#contents .wrapper .jireiBlock .jireiIntro .secImg { width: 100%; margin-bottom: 1.5em; }
#contents .wrapper .jireiBlock h3 { font-size: 1.3em; margin-bottom: 1.2em; color: #063e8d; position: relative; padding-left: 30px; }
@media screen and (max-width: 767px) { #contents .wrapper .jireiBlock h3 { padding: 40px 0 0 0; } }
#contents .wrapper .jireiBlock h3:not(:first-child) { margin-top: 70px; }
@media screen and (max-width: 767px) { #contents .wrapper .jireiBlock h3:not(:first-child) { margin-top: 10vw; } }
#contents .wrapper .jireiBlock h3::before, #contents .wrapper .jireiBlock h3::after { position: absolute; content: ""; border-radius: 100%; }
#contents .wrapper .jireiBlock h3::before { top: .4em; left: 0em; width: 20px; height: 20px; background-color: rgba(6, 62, 141, 0.5); z-index: 2; }
@media screen and (max-width: 767px) { #contents .wrapper .jireiBlock h3::before { left: 50%; transform: translateX(-50%); } }
#contents .wrapper .jireiBlock h3::after { top: 0em; left: .5em; width: 14px; height: 14px; background-color: rgba(6, 62, 141, 0.2); }
@media screen and (max-width: 767px) { #contents .wrapper .jireiBlock h3::after { left: 50%; transform: translateX(-50%); margin-left: 7px; } }
#contents .secFlex { display: flex; flex-wrap: wrap; align-items: flex-start; margin-bottom: 40px; }
@media screen and (max-width: 767px) { #contents .secFlex { gap: 5vw; } }
#contents .secFlex .secImg { width: 50%; text-align: center; }
@media screen and (max-width: 767px) { #contents .secFlex .secImg { width: 100%; } }
#contents .secFlex .secDetail { width: 50%; padding-left: 30px; position: relative; }
@media screen and (max-width: 767px) { #contents .secFlex .secDetail { width: 100%; padding: 0; } }
#contents .secFlex .secDetail h4 { display: inline-block; padding: 5px 10px; line-height: 1.2; border-radius: 8px; background: #fff; border: 1px solid #999; margin-bottom: 10px; }
#contents .secFlex .secDetail.secFull { width: 100%; padding: 0; }
@media screen and (min-width: 768px) { #contents .secFlex.rv .secImg { order: 2; }
  #contents .secFlex.rv .secDetail { order: 1; padding-left: 0; padding-right: 30px; } }
@media screen and (max-width: 767px) { #contents .secFlex.sprv .secImg { order: 2; }
  #contents .secFlex.sprv .secDetail { order: 1; } }
#contents .bdrBox { border: 1px solid #333; padding: 20px; }
@media screen and (max-width: 767px) { #contents .bdrBox { padding: 3vw; } }
#contents .bdrBox h4 { font-size: 1.1em; }
#contents .relateBox { border: 1px solid #e5e5e5; margin-top: 40px; border-left-width: 4px; padding: 20px; }
@media screen and (max-width: 767px) { #contents .relateBox { margin-top: 5vw; padding: 3vw; } }
#contents .relateBox h4 { font-size: 1.1em; }
#contents .linkList { padding-left: 20px; margin-top: 15px; }
@media screen and (max-width: 767px) { #contents .linkList { margin-top: 3vw; } }
#contents .linkList li { list-style: disc; }

/*  */
#section05.article { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg  xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 16' %3E%3Cg%3E%3Cpolygon fill='%23ffffff' points='500 0 500 15 500 16 0 16 0 15 500 0' /%3E%%3C/g%3E%3C/svg%3E"); }

body.service .mvTop { background: #fff url(/products/bizprojector/software/programapping/common/images/bg02.svg) 0 100.1% no-repeat; }

h3.balloon { border: 2px solid #e06f00; font-size: 1.2em; padding: 20px 50px; }
@media screen and (min-width: 768px) { h3.balloon { min-width: 420px; } }
@media screen and (max-width: 767px) { h3.balloon { padding: 4vw 10vw; font-size: 4vw; width: 100%; } }
h3.balloon::before { border-top-color: #e06f00; }
h3.balloon.withNo .no { position: absolute; top: 50%; transform: translateY(-50%); left: 10px; width: 32px; height: 32px; display: flex; justify-content: center; align-items: center; background-color: #e06f00; border-radius: 100%; color: #FFF; }
@media screen and (max-width: 767px) { h3.balloon.withNo .no { width: 7vw; height: 7vw; left: 2vw; } }

.btn-02 a:after { background-image: url("/products/bizprojector/software/programapping/common/images/rv202410/ico_download.png"); }

a.linkIcon { position: relative; padding-left: 1.2em; }
a.linkIcon::before { content: ""; display: block; position: absolute; top: 50%; transform: translateY(-50%); left: 0; width: .9em; height: .9em; border-radius: 50%; background: #fff; }
a.linkIcon::after { content: ""; display: block; position: absolute; top: 50%; left: .28em; width: .22em; height: .22em; border-top: 2px solid #005AB4; border-right: 2px solid #005AB4; transform: translateY(-50%) rotate(45deg); }
a.blank { display: inline-block; padding: 20px 50px; position: relative; width: 100%; max-width: 600px; background: #1c4297; color: #fff; font-size: 21px; text-align: center; text-decoration: none; }
a.blank::after { content: ""; position: absolute; background: url("/common/img/ico_pop_02.svg") no-repeat; width: 15px; height: 15px; right: 15px; top: 50%; transform: translateY(-50%); }
a.blank:hover { opacity: .5; }

@media screen and (max-width: 767px) { .cntMovies dt { margin-bottom: 5vw; } }

ul.cntCol3.valueNum { padding-top: 55px; }
@media screen and (max-width: 767px) { ul.cntCol3.valueNum { padding-top: 10vw; } }
ul.cntCol3.valueNum li { filter: drop-shadow(2px 4px 5px rgba(0, 0, 0, 0.2)); box-shadow: none; padding-top: 30px; }
@media screen and (max-width: 767px) { ul.cntCol3.valueNum li { padding-top: 5vw; margin-bottom: 15vw; } }
ul.cntCol3.valueNum li .pointNo { position: absolute; bottom: calc(100% - 25px); left: 50%; transform: translateX(-50%); background-color: #FFF; text-align: center; padding: 10px; border-radius: 10px; }
ul.cntCol3.valueNum li .pointNo .text { display: block; font-weight: bold; font-size: .9em; }
ul.cntCol3.valueNum li .pointNo .no { display: inline-flex; background: #e06f00; color: #FFF; font-size: 1.3em; width: 1.5em; height: 1.5em; border-radius: 100%; justify-content: center; align-items: center; font-weight: bold; }
@media screen and (max-width: 767px) { ul.cntCol3.valueNum li .pointNo { bottom: calc(100% - 4vw); padding: 2vw; } }
ul.cntCol3.valueNum li .catch { text-align: center; color: #063e8d; font-weight: bold; }
@media screen and (min-width: 768px) { ul.cntCol3.valueNum li .catch { font-size: .7em; height: 24px; } }
@media screen and (max-width: 767px) { ul.cntCol3.valueNum li .catch { font-size: .8em; margin-bottom: .5em; } }
ul.cntCol3.valueNum li h3 { font-size: 1.3em; }
ul.cntCol3.valueNum li h3 span.line { background: linear-gradient(transparent 60%, #fff574 60%); }
ul.cntCol3.clsFlow { padding-top: 30px; }
@media screen and (max-width: 767px) { ul.cntCol3.clsFlow { padding-top: 5vw; } }
ul.cntCol3.clsFlow > li { padding: 30px 15px; }
@media screen and (max-width: 767px) { ul.cntCol3.clsFlow > li { padding: 7vw 3vw 3vw 3vw; }
  ul.cntCol3.clsFlow > li:not(:last-child) { margin-bottom: 10vw; } }
ul.cntCol3.clsFlow > li h4 { background-color: #063e8d; color: #FFF; position: absolute; top: -15px; left: 50%; transform: translateX(-50%); padding: 5px 20px; border-radius: 9999px; min-width: 180px; text-align: center; }
ul.cntCol3.clsFlow > li dl dd, ul.cntCol3.clsFlow > li dl li, ul.cntCol3.clsFlow > li ul dd, ul.cntCol3.clsFlow > li ul li { position: relative; padding-left: 1em; }
ul.cntCol3.clsFlow > li dl dd::before, ul.cntCol3.clsFlow > li dl li::before, ul.cntCol3.clsFlow > li ul dd::before, ul.cntCol3.clsFlow > li ul li::before { content: ""; width: 10px; height: 10px; border-radius: 100%; background-color: #e06f00; position: absolute; top: .3em; left: 0; }
ul.cntCol3.clsFlow > li dl dd:not(:last-child), ul.cntCol3.clsFlow > li dl li:not(:last-child), ul.cntCol3.clsFlow > li ul dd:not(:last-child), ul.cntCol3.clsFlow > li ul li:not(:last-child) { margin-bottom: 5px; }
ul.cntCol3.procList { padding-top: 50px; }
@media screen and (max-width: 767px) { ul.cntCol3.procList { padding-top: 10vw; } }
ul.cntCol3.procList li { padding: 50px 15px 15px 15px; text-align: center; }
@media screen and (max-width: 767px) { ul.cntCol3.procList li { padding: 14vw 3vw 3vw 3vw; }
  ul.cntCol3.procList li:not(:last-child) { margin-bottom: 12vw; } }
ul.cntCol3.procList li a:hover h3.balloon { opacity: .9; color: #e06f00; }
ul.cntCol3.procList li a:hover .img img { opacity: .9; }
ul.cntCol3.procList li h3.balloon { font-size: .9em; padding: 10px 50px; border: 2px solid #e06f00; min-width: inherit; width: calc(100% - 30px); color: #333; height: 62px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; position: absolute; top: -30px; left: 50%; transform: translateX(-50%); }
@media screen and (max-width: 767px) { ul.cntCol3.procList li h3.balloon { padding: 3vw 10vw; height: 15vw; font-size: 4vw; width: calc(100% - 6vw); top: -7vw; } }
ul.cntCol3.procList li h3.balloon .no { position: absolute; top: 50%; transform: translateY(-50%); left: 10px; width: 32px; height: 32px; display: flex; justify-content: center; align-items: center; background-color: #e06f00; border-radius: 100%; color: #FFF; }
@media screen and (max-width: 767px) { ul.cntCol3.procList li h3.balloon .no { left: 2vw; width: 7vw; height: 7vw; } }
ul.cntCol3.procList li h3.balloon::before { border-top-color: #e06f00; }
ul.cntCol3.procList li h3.balloon::after { content: ""; width: 32px; height: 32px; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg  xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg%3E%3Cpath fill='%23e06f00' d='M32,64C14.4,64,0,49.6,0,32S14.4,0,32,0s32,14.4,32,32-14.4,32-32,32ZM32,4c-15.4,0-28,12.6-28,28s12.6,28,28,28,28-12.6,28-28S47.4,4,32,4Z' /%3E%3Cpolygon fill='%23e06f00' points='29 46.8 26.2 44 37.8 32.3 26.3 20.8 29.1 18 43.5 32.3 29 46.8' /%3E%3C/g%3E%3C/svg%3E"); background-size: 100% 100%; background-position: center top; background-repeat: no-repeat; position: absolute; top: 50%; transform: translateY(-50%); right: 10px; }
@media screen and (max-width: 767px) { ul.cntCol3.procList li h3.balloon::after { width: 7vw; height: 7vw; right: 2vw; } }
ul.cntCol3.procList li .img { width: 100%; height: 155px; }
@media screen and (max-width: 767px) { ul.cntCol3.procList li .img { height: 32vw; } }
ul.cntCol3.procList li .img img { width: 100%; height: 100%; object-fit: contain; border-radius: 5px; }

ul.caseLink { display: flex; flex-wrap: wrap; justify-content: space-around; }
@media screen and (max-width: 767px) { ul.caseLink { gap: 5vw; } }
ul.caseLink li { width: 450px; text-align: center; }
@media screen and (max-width: 767px) { ul.caseLink li { width: 100%; } }
ul.caseLink li h3 { display: inline-block; padding: 5px 20px 3px; border-radius: 8px; background: #fff; border: 1px solid #999; margin-bottom: 10px; }
ul.caseLink li .caseBox { width: 100%; box-shadow: 1px 1px 4px 2px rgba(0, 0, 0, 0.1); border-radius: 10px; overflow: hidden; aspect-ratio: 16 / 9; }
ul.caseLink li img { max-width: 100%; }

ul.indentList { padding-left: 1em; text-align: left; }
ul.indentList li { list-style: disc; }
ul.indentList li:not(:last-child) { margin-bottom: .2em; }
ul.indentList li dl { margin-top: .3em; }
ul.indentList li dl dd { position: relative; padding-left: .5em; }
ul.indentList li dl dd::before { content: ""; width: 3px; height: 3px; border-radius: 100%; background-color: #333; display: inline-block; position: absolute; top: .6em; left: .1em; }

.dlBox { border: 2px solid #CCC; border-radius: 10px; padding: 50px 20px 20px 20px; max-width: 600px; margin: 80px auto 0 auto; position: relative; }
@media screen and (max-width: 767px) { .dlBox { margin-top: 15vw; padding: 10vw 5vw 3vw 5vw; } }
.dlBox h3 { display: block; background-color: #f2f2ee; font-size: 1.2em; padding: 0 20px; position: absolute; top: -15px; left: 50%; transform: translateX(-50%); white-space: nowrap; }
.dlBox .btn-02 { width: 300px; margin: 0 auto; }
@media screen and (max-width: 767px) { .dlBox .btn-02 { width: 100%; } }

.flowList li { display: flex; flex-wrap: wrap; position: relative; }
@media screen and (max-width: 767px) { .flowList li { gap: 5vw; } }
.flowList li:not(:last-child) { margin-bottom: 80px; }
@media screen and (max-width: 767px) { .flowList li:not(:last-child) { margin-bottom: 8vw; } }
@media screen and (min-width: 768px) { .flowList li:not(:last-child)::before { content: ""; width: 24px; height: calc(calc(100% - 178px) + 40px); background: #063e8d; display: block; position: absolute; left: 148px; top: calc(178px + 10px); }
  .flowList li:not(:last-child)::after { content: ""; background: #063e8d; height: calc(tan(60deg)* 32px / 2); width: 53px; clip-path: polygon(0 0, 100% 0, 50% 100%); position: absolute; left: 134px; bottom: -75px; } }
.flowList li .img { width: 320px; }
.flowList li .img img { border-radius: 10px; }
@media screen and (max-width: 767px) { .flowList li .img { order: 2; width: 100%; } }
.flowList li .detail { width: calc(100% - 320px); }
@media screen and (max-width: 767px) { .flowList li .detail { width: 100%; } }
.flowList li .detail h4 { font-size: 1.4em; color: #063e8d; margin: 5px 0 20px 0; padding-left: 30px; }
@media screen and (max-width: 767px) { .flowList li .detail h4 { margin: 0 0 3vw 0; padding-left: 8vw; } }
.flowList li .detail h4 .no { background: #063e8d; color: #FFF; font-size: .9em; padding: 5px 20px; border-radius: 5px; margin-right: 10px; }
@media screen and (max-width: 767px) { .flowList li .detail h4 .no { display: inline-block; position: absolute; top: 0; left: 0; font-size: 4vw; padding: 2vw; margin-right: 0; line-height: 1; border-radius: 5px; } }
.flowList li .detail .convBox { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; padding-left: 30px; }
@media screen and (max-width: 767px) { .flowList li .detail .convBox { padding-left: 0; } }
.flowList li .detail .convBox.convR { flex-direction: row-reverse; }
.flowList li .detail .convBox.convR .icon { width: 130px; }
@media screen and (max-width: 767px) { .flowList li .detail .convBox.convR .icon { width: 30%; } }
@media screen and (max-width: 767px) { .flowList li .detail .convBox.convR .conv { padding: 0 5vw 0 0; width: 70%; } }
.flowList li .detail .convBox + .convBox { margin-top: 20px; }
.flowList li .detail .convBox .icon { width: 100px; }
@media screen and (max-width: 767px) { .flowList li .detail .convBox .icon { width: 25%; } }
.flowList li .detail .convBox .conv { width: calc(100% - 230px); padding: 0 30px; }
@media screen and (max-width: 767px) { .flowList li .detail .convBox .conv { width: 75%; padding: 0 0 0 5vw; } }
.flowList li .detail .convBox .conv .speachbbl { display: block; width: 100%; border-radius: 5px; padding: 10px; filter: drop-shadow(1px 2px 2px rgba(0, 0, 0, 0.2)); position: relative; }
@media screen and (max-width: 767px) { .flowList li .detail .convBox .conv .speachbbl { padding: 3vw; font-size: .9em; } }
.flowList li .detail .convBox .conv .speachbbl::before { content: ""; display: block; width: 15px; height: 15px; transform: translateY(-50%) rotate(-45deg) skew(20deg, 20deg); position: absolute; top: 50%; }
@media screen and (max-width: 767px) { .flowList li .detail .convBox .conv .speachbbl::before { width: 3vw; height: 3vw; } }
.flowList li .detail .convBox .conv .speachbbl.bblL { background: #ebf4ff; }
.flowList li .detail .convBox .conv .speachbbl.bblL::before { left: -7px; background: #ebf4ff; }
.flowList li .detail .convBox .conv .speachbbl.bblR { background: #f2f2ed; }
.flowList li .detail .convBox .conv .speachbbl.bblR::before { right: -7px; background: #f2f2ed; }
.flowList li .detail .convBox .conv .speachbbl + .speachbbl { margin-top: 10px; }

/* PAGE : SERVICE */
.tblWrap { background: #fff; padding: 20px; width: 100%; box-shadow: 1px 1px 4px 2px rgba(0, 0, 0, 0.1); position: relative; border-radius: 10px; }
@media screen and (max-width: 767px) { .tblWrap + .mt80 { margin-top: 10vw !important; }
  .tblWrap + .mt80 .dl-txt { padding: 5px 0; margin-top: 2vw; } }
.tblWrap table { width: 100%; border-collapse: separate; border-spacing: 2px; }
@media screen and (max-width: 767px) { .tblWrap table { width: 200vw; } }
.tblWrap table tr th, .tblWrap table tr td { padding: 10px; text-align: center; line-height: 1.4; }
.tblWrap.tblType1 table tr:nth-of-type(odd) { background-color: #f8f8f6; }
.tblWrap.tblType1 table tr:nth-of-type(even) { background-color: #f2f2ee; }
.tblWrap.tblType1 table tr th, .tblWrap.tblType1 table tr td { width: calc(100% / 7); white-space: nowrap; }
.tblWrap.tblType1 table tr th { background-color: #cbe3ff; }
.tblWrap.tblType1 table tr td small { font-size: .7em; }
.tblWrap.tblType2 { display: flex; flex-wrap: wrap; gap: 3%; }
.tblWrap.tblType2 .icon { width: 12%; padding: 0 15px; }
.tblWrap.tblType2 .tblBox { width: 85%; }
.tblWrap.tblType2 img.icon { width: inherit; padding: 0; vertical-align: baseline; }
@media screen and (max-width: 767px) { .tblWrap.tblType2 .icon { width: 100%; padding: 0 30vw; margin-bottom: 5vw; }
  .tblWrap.tblType2 .tblBox { width: 100%; } }
.tblWrap.tblType2 table tr th, .tblWrap.tblType2 table tr td { width: 40%; background-color: #f2f2ee; }
.tblWrap.tblType2 table tr th { width: 20%; }
.tblWrap.tblType2 table tr th.wh { background-color: #FFFFFF !important; color: #333; }
.tblWrap.tblType2 table tr td small { font-size: .7em; }
.tblWrap.tblType2 table tr td:nth-of-type(1) { background-color: #697182 !important; color: #FFF; }
.tblWrap.tblType2 table tr td:nth-of-type(1) a { color: #FFF; }
.tblWrap.tblType2 table tr td:nth-of-type(1) a:hover img { opacity: .8; }
.tblWrap.tblType2 table tr td:nth-of-type(2) { background-color: #d74565 !important; color: #FFF; }
.tblWrap.tblType2 table tr td:nth-of-type(2) a { color: #FFF; }
.tblWrap.tblType2 table tr td:nth-of-type(2) a:hover img { opacity: .8; }
.tblWrap.tblType2 table tr td.nml { background-color: #f2f2ee !important; color: #333; vertical-align: top; font-size: .8em; }
@media screen and (max-width: 767px) { .tblWrap.tblType2 table tr td.nml table { width: auto; } }
.tblWrap.tblType2 table tr td.nml table tr th, .tblWrap.tblType2 table tr td.nml table tr td { width: auto; text-align: left; vertical-align: top; font-weight: normal; background-color: #f2f2ee !important; color: #333; padding: 3px 0 3px 3px; }
.tblWrap.tblType2 table tr td.nml table tr th { white-space: nowrap; position: relative; padding-right: 10px; }
.tblWrap.tblType2 table tr td.nml table tr th::after { content: "："; display: inline-block; position: absolute; top: .4rem; right: -.5rem; }
.tblWrap.tblType2 table thead tr td { font-size: 1.4em; font-weight: bold; }

/* PAGE : SAMPLE */
.sampleDl { margin: 40px auto 0 auto; text-align: center; line-height: 1.4; }
@media screen and (max-width: 767px) { .sampleDl a { padding: 3vw 50px 3vw 3vw; font-size: 4vw; } }

.sampleWrap { background: #fff; padding: 20px; width: 100%; box-shadow: 1px 1px 4px 2px rgba(0, 0, 0, 0.1); position: relative; border-radius: 10px; }
.sampleWrap .sampleInner { display: flex; flex-wrap: wrap; justify-content: space-between; }
.sampleWrap .detail { display: flex; flex-direction: column; justify-content: space-between; }
@media screen and (max-width: 767px) { .sampleWrap .detail { width: 100% !important; } }
.sampleWrap .detail h3 { display: inline-block; padding: 5px 20px 3px; border-radius: 8px; background: #fff; border: 1px solid #999; margin-bottom: 10px; font-size: 2.2rem; }
@media screen and (max-width: 767px) { .sampleWrap .detail h3 { font-size: 1.7rem; padding: 5px 10px 3px; } }
.sampleWrap .detail .btn-02 { margin-top: 30px; }
@media screen and (max-width: 767px) { .sampleWrap .detail .btn-02 { margin-top: 5vw; } }
.sampleWrap .detail .btn-02 a { font-size: 1.8rem; }
.sampleWrap .detail .btn-02 h4 { color: #063e8d; margin-bottom: 10px; }
.sampleWrap .detail .btn-02 strong { font-size: 2rem; }
.sampleWrap .detail .btn-02 small { font-size: 1.3rem; }
.sampleWrap .detail .btn-02 .btn-02-wrap { display: flex; flex-wrap: wrap; justify-content: space-between; }
.sampleWrap .img { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: flex-end; gap: 5px; }
@media screen and (max-width: 767px) { .sampleWrap .img { margin-top: 5vw; width: 100% !important; } }
.sampleWrap .img .imgwrap { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: flex-end; width: calc(100% - 285px); gap: 5px; }
@media screen and (max-width: 767px) { .sampleWrap .img .imgwrap { margin-top: 3vw; width: 100% !important; } }
.sampleWrap .img .imgwrap .hintText { width: 100%; font-weight: bold; font-size: 1.5rem; }
.sampleWrap.sampleTeach .detail { width: calc(100% - 420px); }
.sampleWrap.sampleTeach .detail .btn-02 a { max-width: 340px; }
.sampleWrap.sampleTeach .img { width: 390px; }
.sampleWrap.sampleType1, .sampleWrap.sampleType2 { margin-top: 30px; }
.sampleWrap.sampleType1 .detail, .sampleWrap.sampleType2 .detail { width: 340px; }
.sampleWrap.sampleType1 .detail .btn-02 a, .sampleWrap.sampleType2 .detail .btn-02 a { max-width: 160px; line-height: 1.1; padding: 15px 45px 15px 15px; }
.sampleWrap.sampleType1 .detail .btn-02 a::after, .sampleWrap.sampleType2 .detail .btn-02 a::after { right: 10px; }
@media screen and (max-width: 767px) { .sampleWrap.sampleType1 .detail .btn-02 a, .sampleWrap.sampleType2 .detail .btn-02 a { width: 48%; } }
.sampleWrap.sampleType1 .img, .sampleWrap.sampleType2 .img { width: calc(100% - 355px); }
.sampleWrap.sampleType1 .img img, .sampleWrap.sampleType2 .img img { width: 280px; }
.sampleWrap.sampleType1 .img .imgwrap img { width: 267px; }
.sampleWrap.sampleType2 .img .imgwrap img { width: 310px; }