@charset "UTF-8";
/* --------------------
RESET CSS
-------------------- */
*,
::before,
::after { box-sizing: border-box; border-style: solid; border-width: 0; min-width: 0}
html { line-height: 1}
body { margin: 0}
p, table, blockquote, address, pre, iframe, form, figure, dl { margin: 0}
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; margin: 0}
ul, ol { margin: 0; padding: 0; list-style: none}
dt {font-weight: bold}
dd {margin-left: 0}
hr {box-sizing: content-box; height: 0; overflow: visible; border-top-width: 1px; margin: 0; clear: both; color: inherit}
pre { font-family: monospace, monospace; font-size: inherit}
address { font-style: inherit}
a { color: inherit; text-decoration: none; background-color: transparent}
b, strong { font-weight: bolder}
code, kbd, samp { font-family: monospace, monospace; font-size: inherit}
small { font-size: 100%}
big { font-size: inherit}
sub, sup { position: relative; vertical-align: baseline; font-size: 75%; line-height: 0}
sub { bottom: -0.25em}
sup { top: -0.5em}
svg, img, embed, object, iframe { vertical-align: bottom}
table { border-color: inherit; border-collapse: collapse}
caption { text-align: left}
td, th { vertical-align: top; padding: 0}
th { text-align: left; font-weight: bold}
/* FORM */
button, input[type="text"], input[type="tel"], input[type="email"], optgroup, select, textarea {
 appearance: none; vertical-align: middle; color: inherit; font: inherit; background: transparent; padding: 0; margin: 0; border-radius: 0; text-align: inherit; text-transform: inherit}
select:focus { outline: none}
button, [type="button"], [type="reset"], [type="submit"] { cursor: pointer}
button:disabled, [type="button"]:disabled, [type="reset"]:disabled, [type="submit"]:disabled { cursor: default}
select:disabled { opacity: inherit}
option { padding: 0}
fieldset { margin: 0; padding: 0; min-width: 0}
legend { padding: 0}
progress { vertical-align: baseline}
textarea { overflow: auto}
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button { height: auto}
[type="search"] { outline-offset: -2px}
[type="search"]::-webkit-search-decoration { -webkit-appearance: none}
::-webkit-file-upload-button { -webkit-appearance: button; font: inherit}
[type="number"] { -moz-appearance: textfield}
label[for] { cursor: pointer}
details { display: block}
summary { display: list-item}
[contenteditable]:focus { outline: auto}
abbr[title] { text-decoration: underline dotted}
/* --------------------
COMMON STYLE
-------------------- */
@font-face {
	font-family: "Noto Sans JP";
  src: url("./font/NotoSansJP-Light-min.woff") format("woff");
  font-weight: 300;
  font-display: swap;
}
@font-face {
	font-family: "Noto Sans JP";
  src: url("./font/NotoSansJP-Regular-min.woff") format("woff");
  font-weight: normal;
  font-display: swap;
}
@font-face {
	font-family: "Noto Sans JP";
  src: url("../font/NotoSansJP-Medium-min.woff") format("woff");
  font-weight: 500;
  font-display: swap;
}
@font-face {
	font-family: "Noto Sans JP";
  src: url("./font/NotoSansJP-SemiBold-min.woff") format("woff");
  font-weight: bold;
  font-display: swap;
}

html { scroll-behavior: smooth}
body { overflow-x: hidden; min-width: 320px; color: #002b46; font-weight: normal; font-family: "Noto Sans JP", sans-serif; font-size: 16px}
p, table, blockquote, address, pre, iframe, form, figure, dl { line-height: 1.8}
h2 { font-size: 30px; font-weight: bold; text-align: center}
h2, h3 { line-height: 1.5}
h3 { font-size: 24px; font-weight: bold}
a { color: #009bdc}
a:hover { opacity: .8}
img { max-width: 100%; height: auto}
sup { font-size: 10px}
@media screen and (max-width: 767px) {
  body { font-size: 14px}
  h2 { font-size: 20px}
  h3 { font-size: 18px}
}
.notes { font-size: 12px}
.text-summary { margin-bottom: 40px; font-weight: bold; text-align: center}
.btn { display: flex; justify-content: center; align-items: center; font-weight: bold; border-radius: 100vh}
.btn.inq { color: #fff; background: #eb5c30}
.btn.document { color: #fff; background: #008ecb}
.inner { max-width: 1080px; margin: auto; padding: 0 20px}
.marker-yellow { background:linear-gradient(transparent 60%, #fbf78c 60%)}
.pc-only { display: block}
.sp-only { display: none}
@media screen and (max-width: 767px) {
  .pc-only { display: none}
  .sp-only { display: block}
}
/* キービジュアル */
.sec-kv { min-height: 675px; background: url(../img/bg-kv_pc.png) no-repeat bottom center/cover}
.bg-kv { width: calc(100% - 60px); min-height: 500px; margin: auto; padding: 0 30px 30px;  background:rgba(0,142,203,.9); border-radius: 0 0 15px 15px}
.kv-head, .kv-inr { max-width: 1080px; margin: auto}
.kv-head .logo { width: fit-content; margin-left: auto; padding-top: 15px}
.kv-head h1 { width: fit-content; margin-top: -7px; padding: 10px 13px; color:  #fff; font-size: 2.6415vw; font-weight: 500; background: #eb5c30}
.kv-head h1 span { display: none}
.kv-inr { margin-top: 25px}
.kv-inr .box-text { color: #fff}
.kv-inr .box-text .logo { width: 100%}
.kv-inr .point { margin-top: 20px; font-size: 1.9811vw; font-weight: bold;line-height: 1.5}
.kv-inr .notes { font-size: 1.1323vw; text-align: right}
.kv-inr .bg-white { display: flex; justify-content: flex-start; margin-top: 20px; padding: 10px 5px 10px; font-size: 1.1323vw; background: rgba(255,255,255,.7); border-radius: 8px}
.kv-inr .bg-white .box.left { width: 45%}
.kv-inr .bg-white .box.right { width: 55%}
.kv-inr .bg-white .box { display: flex; align-items: center; color: #333}
.kv-inr .bg-white .box figure { width: fit-content; margin-right:  10px}
.kv-inr .bg-white .box figure img { width: auto; height: 80px}
.kv-inr .bg-white .box.left p { width: calc(100% - 90px)}
.kv-inr .bg-white .box.right p { width: calc(100% - 90px)}
.kv-inr .bg-white .box.right { margin-left: 10px}
.kv-inr .btn { max-width: 400px; height: 60px; margin: 30px auto 0; font-size: 18px}
@media screen and (max-width: 600px) {
  .sec-kv { min-height: auto; padding-bottom: 10px; background: url(../img/bg-kv_sp.png) no-repeat bottom center/cover}
  .bg-kv { width: calc(100% - 40px); height: auto; padding: 0 20px 20px}
  .kv-head .logo { padding-top: 5px}
  .kv-head .logo img { width: 45px}
  .kv-head h1 { width: 100%; margin-top: 10px; padding: 8px 5px; text-align: center}
  .kv-inr .point { font-size: 14px}
  .kv-inr .notes { margin-top: 5px; font-size: 8px}
  .kv-inr .bg-white { display: none}
  .kv-inr .bg-white .box.left, .kv-inr .bg-white .box.right { width: 100%}
  .kv-inr .bg-white .box figure img { height: 60px}
  .kv-inr .bg-white .box.left p { width: calc(100% - 80px)}
  .kv-inr .bg-white .box.right { margin-top: 10px}
  .kv-inr .bg-white .box.right p { width: calc(100% - 80px)}
  .kv-inr .btn { max-width: 300px; height: 50px; margin-top: 20px; font-size: 15px}
  .kv-inr .box-image { width: 50%; min-width: 220px; margin: 20px auto 0}
}
@media screen and (min-width:601px) and ( max-width:767px) {
  .sec-kv { min-height: auto}
  .kv-inr .box-image { width: 50%; min-width: 220px; margin: 20px auto 0}
}
@media screen and (min-width:768px) and ( max-width:960px) {
  .sec-kv { min-height: auto}
  .bg-kv { width: calc(100% - 40px); min-height: auto; padding: 0 20px 20px}
  .kv-head .logo img { width: 60px}
  .kv-head h1 { width: 100%; margin-top: 10px; padding: 8px 5px; text-align: center}
  .kv-inr { position: relative; display: flex; justify-content: space-between}
  .kv-inr .box-text { width: calc(100% - 42% -  25px)}
  .kv-inr .bg-white .box.left, .kv-inr .bg-white .box.right { width: 50%}
  .kv-inr .bg-white .box.left p { width: calc(100% - 80px)}
  .kv-inr .bg-white .box.right { margin-top: 10px}
  .kv-inr .bg-white .box.right p { width: calc(100% - 80px)}
  .kv-inr .btn { height: 50px}
  .kv-inr .box-image { display: flex; align-items: center; width: 42%}
}
@media screen and (min-width: 961px) {
  .bg-kv { min-height: 500px} 
  .kv-inr { position: relative; display: flex; justify-content: space-between}
  .kv-inr .box-text { width: calc(100% - 42% -  25px)}
  .kv-inr .box-image { width: 42%}
}
@media screen and (min-width: 1080px) {
  .kv-head h1 { font-size: 28px}
  .kv-inr .point { font-size: 21px}
  .kv-inr .bg-white { font-size: 12px}
  .kv-inr .notes { font-size: 12px}
}
/* 実績 */
.bg-gray { padding: 0 20px; font-size: 14px; font-weight: bold; background: linear-gradient(180deg, transparent 0%, transparent 18%, #f0f4f6 18%, #f0f4f6 100%)}
.ribbon { margin: 30px auto 0; text-align: center}
.ribbon .sp { display: none}
.ul-results { display: flex; justify-content: space-between; flex-wrap: wrap; max-width: 1080px; margin: -40px auto 0}
.ul-results li { width: 15.8%; text-align: center}
.ul-results li .circle { position: relative; width: 100%;}
.ul-results li img { position: absolute; left: 50%; transform: translateX(-50%); bottom: 5px; width: auto; height: 50%; filter: drop-shadow(2.5px 2.5px 2.5px rgba(0,0,0,.1))}
.ul-results li:last-child img { margin-bottom: -6px}
.ul-results li .circle-in { width: 100%; padding-top: 100%; border-radius: 50%; background: #fff; border: 2px solid #022843; box-shadow: 5px 5px 5px rgba(0,0,0,.1)}
.ul-results li .result { position: absolute; top: 25px; width: 100%; font-size: 1.320vw; line-height: 1.5}
.ul-results li:last-child .result { top: 20px}
.ul-results li .occupation { margin-top: 6px; font-size: 1.320vw; font-weight: bold; line-height: 1.5}
.ul-results li:last-child .occupation { margin-top: 12px}
@media screen and (max-width: 600px) {
  .bg-gray { margin-top: -50px; background: #f0f4f6}
  .ribbon .sp { display: block}
  .ribbon .pc { display: none}
  .ul-results { margin-top: 50px}
  .ul-results li { width: 32.3%}
  .ul-results li:nth-child(n+4) { margin-top: 10px}
  .ul-results li .result { font-size: 11px}
  .ul-results li .occupation { font-size: 11px}
}
@media screen and (min-width:601px) and ( max-width:767px) {
  .sec-kv { min-height: auto}
  .bg-gray { padding-top: 1px; background: #f0f4f6}
  .ribbon .sp { display: block; width: 100%}
  .ribbon .pc { display: none}
  .ul-results { margin-top: 30px}
  .ul-results li { width: 32.3%}
  .ul-results li:nth-child(n+4) { margin-top: 10px}
  .ul-results li .result { top: 40px; font-size: 2.2vw}
  .ul-results li .occupation { font-size: 2vw}
}
@media screen and (min-width:768px) and ( max-width:960px) {
  .bg-gray { background: #f0f4f6}
  .ul-results { padding-top: 50px}
  .ul-results li:first-of-type { margin-left: 0}
  .ul-results li:last-of-type { margin-right: 0}
  .ul-results li img { width: auto; max-height: 100px}
  .ul-results li .occupation { font-size: 14px}
}
@media screen and (min-width: 961px) {
  .ul-results li { max-width: 165px}
  .ul-results li:first-of-type { margin-left: 0}
  .ul-results li:last-of-type { margin-right: 0}
  .ul-results li:last-child .result { top: 15px}
}
@media screen and (min-width: 1080px) {
  .ul-results li .result { font-size: 14px}
  .ul-results li .occupation { font-size: 14px}
}
/* 重要性 */
.bg-gray02 { padding: 30px 20px 50px; background: #f0f4f6}
.bg-gray02 .inner { padding: 20px; background: #fff; border-radius: 15px; box-shadow: 5px 5px 5px rgba(0,0,0,.1)}
.bg-gray02 .inner .title { font-size: 24px; font-weight: bold}
.bg-gray02 .inner p+p { margin-top: 10px}
@media screen and (max-width: 767px) {
  .bg-gray02 .inner figure { width: 40%; margin: 0 auto 30px}
  .bg-gray02 .inner .title { font-size: 20px; text-align: center}
}
@media screen and (min-width:768px) and ( max-width:960px) {
  .bg-gray02 .inner { display: flex; justify-content: space-between; padding: 30px}
  .bg-gray02 .inner figure { width: 35%}
  .bg-gray02 .inner .box-text { width: 60%}
}
@media screen and (min-width: 961px) {
  .bg-gray02 .inner { display: flex; justify-content: space-between; padding: 30px}
  .bg-gray02 .inner figure { width: 25%}
  .bg-gray02 .inner .box-text { width: 70%}
}
/* 3つのポイント TOP */
.div-half { position: relative; background: linear-gradient(90deg, #008ecb 0%, #008ecb 50%, #bbdfed 50%, #bbdfed 100%)}
.div-half::after { content: ""; display: block; width: 100%;  height: 50px; background: url(../img/bg-half-bottom.png) no-repeat center bottom/cover}
.div-half .inner { display: flex; justify-content: space-between; flex-wrap: wrap; max-width: 1080px; margin: auto; padding: 50px 20px}
.div-half .inner .box { width: calc(50% - 20px); text-align: center}
.div-half .inner .box .title { margin-bottom: 20px; padding-bottom: 15px; font-size: 2.037vw; font-weight: bold; line-height: 1.3; border-bottom: 1.5px solid #fff}
.div-half .inner .box.left .title { color: #fff}
.div-half .inner .box.right .title { border-color: #17253b}
.div-half .inner .box-white { margin-top: 40px; padding: 30px; font-weight: bold; background: #fff; border-radius: 15px; box-shadow: 5px 5px 5px rgba(0,0,0,.1)}
.div-half .inner .box-white .logo { width: fit-content; margin: 0 auto 25px}
@media screen and (max-width: 767px) {
  .div-half .inner { padding: 20px}
  .div-half .inner .box .title { font-size: 15px}
  .div-half .inner .box-white { padding: 20px}
  .div-half .inner .box-white .logo { width: 70%; min-width: 250px}
}
@media screen and (min-width: 1080px) {
  .div-half .inner .box .title { font-size: 22px}
}
/* 3つのポイント BTM */
.sec-service { padding: 60px 0; background: #f0f4f6}
.sec-service h2 { margin-bottom: 30px}
.sec-service h3 { margin: 30px 0 12px}
.sec-service .box .inner {  display: flex; justify-content: space-between; flex-wrap: wrap; margin-bottom: 40px; padding: 50px 20px 18px; background: #fff}
.sec-service .box.left .inner { margin-right: 13%; padding-right: 30px; border-radius: 0 30px 30px 0}
.sec-service .box.right .inner { flex-direction: row-reverse; margin-left: 15%; padding-left: 30px; border-radius: 30px 0 0 30px}
.sec-service .box .inner .box-image { width: 42%}
.sec-service .box .inner .box-text { width: calc(100% - 42% - 55px)}
.sec-service .box.right.two .inner .box-image,
.sec-service .box.right.one .inner .box-image,
.sec-service .box.left.two .inner .box-image { width: 32%}
.sec-service .box.right.two .inner .box-text,
.sec-service .box.right.one .inner .box-text,
.sec-service .box.left.two .inner .box-text { width: calc(100% - 32% - 40px)}
.sec-service .box .inner .box-text p+p { margin-top: 10px}
.sec-service .point { display: flex; align-items: center}
.sec-service .point span { display: inline-block; margin-left: 10px; text-align: center; width: 50px; height: 50px; line-height: 50px; color: #fff; font-size: 40px; background: #008ecb; border-radius: 6px}
.box-point { width: 100%}
.ul-service { display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; margin: 55px 0 20px}
.ul-service::after { content: "など"}
.ul-service li { display: flex; justify-content: center; align-items: center; width: 16.5%; height: 40px; margin-right: 10px; font-size: 14.5px; text-align: center; background: #daeef8; border-radius: 100vh}
.sec-service .notes { max-width: 1080px; margin: -20px auto 0; text-align: right}
@media screen and (max-width: 600px) {
  .sec-service h2 img { max-width: 80%}
  .sec-service h3 { margin: 10px 0 12px} 
  .sec-service .box .inner { box-shadow: 5px 5px 5px rgba(0,0,0,.1)}
  .sec-service .box.left .inner { margin-right: 20px; padding: 30px 20px 0 20px}
  .sec-service .box.right .inner { margin-left: 20px; padding: 30px 20px 0 20px}
  .sec-service .box.right.one .inner .box-image,
  .sec-service .box.left.two .inner .box-image,
  .sec-service .box.left.one .inner .box-image { width: 100%; margin-top: 30px; text-align: center}
  .sec-service .box.right.one .inner .box-image img,
  .sec-service .box.left.two .inner .box-image img,
  .sec-service .box.left.one .inner .box-image img { max-width: 60%}
  .sec-service .box.right.one .inner .box-text,
  .sec-service .box.left.two .inner .box-text,
  .sec-service .box.left.one .inner .box-text { width: 100%}
  .sec-service .point img { width: auto; height: 23px}
  .sec-service .point span { width: 30px; height: 30px; line-height: 30px; font-size: 20px; border-radius: 3px}
  .ul-service li { width: 49%; margin-right: 0}
  .ul-service li:nth-child(odd) { margin-right: 2%}
  .ul-service li:nth-child(n+3) { margin-top: 5px}
  .sec-service .notes { padding: 0 20px; text-align: left}
}
@media screen and (min-width:601px) and ( max-width:960px) {
  .ul-service li { width: 30%}
  .ul-service li:nth-child(n+3) { margin-top: 5px}
}
@media screen and (min-width: 961px) {
  .sec-service .box.left { margin-bottom: 40px; background: linear-gradient(90deg, #fff 0%, #fff 50%, transparent 50%, transparent 100%); filter: drop-shadow(5px 5px 5px rgba(0,0,0,.1))}
  .sec-service .box.right { background: linear-gradient(90deg, transparent 0%, transparent 50%, #fff 50%, #fff 100%); filter: drop-shadow(5px 5px 5px rgba(0,0,0,.1))}  
}
@media screen and (min-width: 1400px) {
  .sec-service .box.left .inner { margin: 0 auto 40px}
  .sec-service .box.right .inner { margin: 0 auto 40px}
}


/* サービスの流れ */
.sec-flow { padding: 60px 0 0}
.sec-flow ul { margin-top: 35px}
.sec-flow ul li { position: relative; width: 100%; padding: 40px 15px 15px; background: #fff; border: 2px solid #0099d9; border: 2px solid 14px; border-radius: 14px; box-shadow: 5px 5px 5px rgba(0,0,0,.1)}
.sec-flow ul li::after { content: ""; position: absolute; border-left: 20px solid transparent; border-right: 20px solid transparent; border-top: 15px solid #0099d9}
.sec-flow ul li:last-child::after { content: ""; border: 0}
.sec-flow ul li .ttl { margin-bottom: 5px; color: #002b46; font-size: 18px; text-align: center; font-weight: bold; line-height: 1.5}
.sec-flow ul li .ttl span { display: block; position: absolute; top: -15px; left: 50%; transform: translateX(-50%); width: 40px; height: 40px; color: #fff; font-size: 22px; text-align: center; background: #0099d9; border: solid 2px #fff; border-radius: 100vh}
.sec-flow .notes { max-width: 1080px; margin: 30px auto 0; padding: 5px 20px; color: #0099d9; font-size: 18px; font-weight: bold; text-align: center; border: 2px solid #0099d9; box-shadow: 2px 2px 2px #c1cfd3}
@media screen and (max-width: 768px) {
  .sec-flow { padding: 30px 0 0}
  .sec-flow ul li { padding: 40px 20px 15px}
  .sec-flow ul li::after { bottom: -30px; left: 50%; transform: translateX(-50%)}
  .sec-flow ul li:nth-child(n+2) { margin-top: 50px}
}
@media screen and (min-width: 769px) {
  .sec-flow ul { display: flex; justify-content: space-between}
  .sec-flow ul li { width: 18%;}
  .sec-flow ul li::after { content: ""; top: 50%; right: -42px; border-left: 12px solid #0099d9; border-top: 8px solid transparent; border-bottom: 8px solid transparent;}
}
/* 料金 */
.sec-cost { padding: 60px 0}
.sec-cost .price { margin-top: 30px; background: #fff; border: solid 4px #2e9cdd;  border-radius: 14px; box-shadow: 5px 5px 5px rgba(0,0,0,.1)}
.sec-cost .price .box { width: 100%; padding: 15px 0 20px; color: #0099d9; line-height: 1; text-align: center}
.sec-cost .price .box small { font-size: 15px}
.sec-cost .price .box span { display: block; margin-top: 10px; color: #333; font-size: 32px; font-weight: bold}
.sec-cost .price .box span::after { content: "円"; font-size: 16px}
@media screen and (max-width: 768px) {
  .sec-cost { padding: 30px 0}
  .sec-cost .price { border-width: 3px}
  .sec-cost .price .box.right { border-top: solid 2px #2e9cdd}
}
@media screen and (min-width: 769px) {
  .sec-cost .price .box { width: 50%}
  .sec-cost .price .box small  { font-size: 20px}
  .sec-cost .price .box span { margin-top: 15px; font-size: 48px}
  .sec-cost .price .box span::after { font-size: 24px} 
}
.sec-cost .price .btn-contact { display: flex;  justify-content: center; align-items: center; max-width: 90%; height: 40px; margin: 20px auto 0; color: #fff; font-size: 12px; letter-spacing: .08em; text-align: center; border-radius: 100vh; background: #eb5c30}
.sec-cost .price .btn-contact:hover { opacity: .7}
@media screen and (min-width: 769px) {
  .sec-cost .price { display: flex}
  .sec-cost .price .box.left { border-right: solid 2px #2e9cdd}
  .sec-cost .price .btn-contact { max-width: 320px; background-size: auto 16px}
}
/* ITreview */
.sec-itreview { padding: 60px 0 0}
.sec-itreview h2 { margin-bottom: 20px}
.sec-itreview ul { margin:30px 0 20px}
.sec-itreview ul li { padding: 10px 20px; background: #fff;  filter: drop-shadow(5px 5px 5px rgba(0,0,0,.1)); border: 1px solid #ddd; border-radius: 4px}
.sec-itreview ul li:nth-child(n+2) { margin-top: 20px}
.sec-itreview ul li .ttl { margin-bottom: 10px; font-weight: bold; font-size: 18px; line-height: 1.3}
.sec-itreview ul li .icon.star { color: #e50060; font-size: 24px}
.sec-itreview .bg-badge { max-width: 800px; margin: auto; font-size: 12px}
.sec-itreview .bg-badge .box { display: flex; align-items: center}
.sec-itreview .bg-badge .box figure { margin-right:  10px}
.sec-itreview .bg-badge .box figure img { width: auto; height: 80px}
.sec-itreview .bg-badge .box.left p { width: calc(100% - 90px)}
.sec-itreview .bg-badge .box.right p { width: calc(100% - 90px)}
.sec-itreview .bg-badge .box.right { width: 58%; margin-left: 10px}
.sec-itreview .text-underline { color: #002b46; text-decoration: underline}
@media screen and (max-width: 768px) {
  .sec-itreview { padding: 30px 0 0}
  .sec-itreview .bg-badge .box figure img { height: 60px}
  .sec-itreview .bg-badge .box.left p { width: calc(100% - 80px)}
  .sec-itreview .bg-badge .box.right { margin-top: 10px}
  .sec-itreview .bg-badge .box.right p { width: calc(100% - 80px)}
}
@media screen and (min-width: 769px) {
  .sec-itreview .bg-badge { display: flex; justify-content: space-between}
  .sec-itreview ul { margin-top: 50px}
  .sec-itreview ul li { font-size: 16px;}
  .sec-itreview ul li .ttl { font-size: 20px}
}
/* 事例 */
.sec-case-study { padding: 60px 0}
.sec-case-study ul { margin-top: 30px}
.sec-case-study ul li { padding: 20px; background: #fff; border: 1px solid #ddd;  border-radius: 14px; box-shadow: 4px 4px 4px #c1cfd3}
.sec-case-study ul li .ttl { margin-bottom: 10px; font-size: 16px; font-weight: bold; line-height: 1.5}
.sec-case-study ul li img { width: 100%}
.sec-case-study ul li .btn-detail, .sec-case-study .btn-more { display: flex; justify-content: center; align-items: center; width: 100%; height: 40px; color: #fff; background: #333; border-radius: 100vh}
.sec-case-study ul li .profile { margin: 10px 0 20px; font-size: 13px}
.sec-case-study ul li b { font-weight: bold}
.sec-case-study .btn-more { max-width: 500px; margin: 60px auto 0}
@media screen and (max-width: 768px) {
  .sec-case-study ul li:nth-child(n+2) { margin-top: 30px}
}
@media screen and (min-width: 769px) {
  .sec-case-study ul { display: flex; justify-content: space-between; margin-top: 50px}
  .sec-case-study ul li { display: flex; flex-direction: column; width: 24%; border-radius: 4px}
  .sec-case-study ul li .ttl { min-height: 6em}
  .sec-case-study ul li .profile { flex-grow: 1}
}
/* その他のサービス */
.sec-other { padding: 50px 20px 40px; color: #fff; background: #008ecb}
.other-inr { max-width: 1160px; margin: auto; padding: 50px; font-weight: bold; border: 3px solid #fff; border-radius: 15px}
.other-inr h3 { margin-top: 35px}
.other-inr .notes { width: fit-content; margin-left: auto; font-weight: normal}
.other-inr .box { margin: 30px 0 10px; color: #002b46; background: #fff; border-radius: 30px}
.other-inr .box.booster { padding: 30px 40px}
.other-inr .box.talk { padding: 30px 40px 0}
.other-inr .box p+p { margin-top: 10px}
.other-inr .box .logo { margin-bottom: 25px}
.other-inr .box .box-image { display: flex; align-items: flex-end}
.other-inr .box-inq { display: flex; justify-content: center; margin-bottom: -92px}
.other-inr .box-inq .box-image { margin-right: 10px}
.other-inr .box-inq .box-text { width: 56%; padding-top: 35px; text-align: center}
.other-inr .box-inq .box-text p { margin: 20px 0; font-size: 1.5094vw; font-weight: 500; line-height: 1.5}
.other-inr .box-inq .box-text ul { display: flex; justify-content: space-between}
.other-inr .box-inq .box-text ul li { display: flex; justify-content: center; align-items: center; width: 33%; height: 40px; padding: 0 10px; color: #ed6d46; font-size: 1.3679vw; background: #fff; border: 1.5px solid #ed6d46; border-radius: 10px}
.other-inr .box-inq .box-text .btn.inq.pc-only { display: flex; max-width: 300px; height: 60px; margin: 20px auto 0}
@media screen and (max-width: 767px) {
  .sec-other { padding: 30px 20px}
  .other-inr { padding: 20px}
  .other-inr .box { border-radius: 20px}
  .other-inr .box.booster { width: 100%; padding: 20px 20px 20px}
  .other-inr .box.talk { width: 100%; padding: 20px 20px 0}
  .other-inr .box .box-image { width: 100%; margin: 30px auto 0}
  .other-inr .box-inq { margin-bottom: 0}
  .other-inr .box-inq .box-image { display: flex; align-items: flex-end; width: 55%}
  .other-inr .box-inq .box-text { width: 45%}
  .other-inr .box-inq .box-text ul { flex-wrap: wrap}
  .other-inr .box-inq .box-text ul li { width: 100%; font-size: 12px}
  .other-inr .box-inq .box-text ul li:nth-child(n+2) { margin-top: 5px}
  .sec-other .btn.inq.sp-only { display: flex; height: 50px}
  .other-inr .box-inq .box-text .btn.inq.pc-only { display: none}
}
@media screen and (min-width:601px) and ( max-width:960px) {
  .other-inr .box-inq .box-text { width: 60%}
}
@media screen and (min-width: 961px) {
  .other-inr .box { display: flex; justify-content: space-between}
  .other-inr .box.booster .box-image { width: 35%}
  .other-inr .box.booster .box-text { width: calc(100% - 35% - 55px)}
  .other-inr .box.talk .box-image { width: 60%}
  .other-inr .box.talk .box-text { width: calc(100% - 60% - 55px)}
  .other-inr .box-inq .box-text ul li:nth-child(2) { margin: 0 10px}
  .other-inr .box.talk .logo { width: auto; height: 32px}
}
@media screen and (min-width: 1080px) {
  .other-inr .box-inq .box-text ul li { font-size: 14.5px}
  .other-inr .box-inq .box-text p { font-size: 16px}
}
/* CTA */
.sec-cta { padding: 40px 0 60px; background: #e1f2ff}
.sec-cta .box-outline { display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: 50px}
.sec-cta .box { display: flex; flex-direction: column; width: 49%}
.sec-cta .box .btn { width: 100%; max-width: 300px; height: 50px; margin: -25px auto 0; box-shadow: 5px 5px 5px rgba(0,0,0,.1)}
.sec-cta .box-inr { flex-grow: 1; padding: 10px 20px 30px; background: #fff; border-radius: 15px; box-shadow: 5px 5px 5px rgba(0,0,0,.1)}
.sec-cta .box h3 { margin-bottom: 25px; padding-bottom: 10px; color: #ed6d46; font-size: 24px; font-weight: bold; text-align: center; border-bottom: 1.5px solid #ed6d46}
.sec-cta .box.right h3 { color: #008ecb; border-color: #008ecb}
.sec-cta .box .comment { margin-top: -0.5em; font-weight: bold; line-height: 1.5}
.sec-cta .box .ttl { font-weight: bold}
.sec-cta .box ul li { font-size: 14px; line-height: 1.5}
.sec-cta .box-outline02 { display: flex; justify-content: flex-start}
.sec-cta .box.left figure { margin-right: 20px}
.sec-cta .box.right figure { margin-right: 60px}
.sec-cta .box-outline02 .box-text { display: flex; justify-content: center; flex-direction: column}
.sec-cta .bnr-seminar { position: relative; display: block; max-width: 848px; margin: 50px auto 0}
.sec-cta .bnr-seminar img { position: absolute; bottom: 10px; right: 20px}
.sec-cta .seminar-inr { color: #fff; background: linear-gradient(90deg, #22d3ee 0%, #0099db 0%, #06bfd2 100%); border-radius: 10px; box-shadow: 5px 5px 5px rgba(0,0,0,.1)}
.sec-cta .seminar-inr .inr { padding: 15px 20px 10px; background: url(../img/bg-seminar.png) no-repeat top right/auto 100%}
.sec-cta .seminar-inr .text { margin-right: 40%; font-size: 14px; font-weight: bold}
.sec-cta .bnr-seminar button { width: 225px; height: 40px; margin-top: 10px; font-size: 16px; text-align: center; background: #333; border-radius: 100vh}
@media screen and (max-width: 768px) {
  .sec-cta { padding: 30px 0}
  .sec-cta .box-outline .box { width: 100%}
  .sec-cta .box-outline .box.right { margin-top: 30px}
  .sec-cta .box-outline .box h3 { margin-bottom: 15px; padding-bottom: 5px; font-size: 18px}
  .sec-cta .box-outline .box p { margin-bottom: 10px}
  .sec-cta .box-outline .box ul li { font-size: 12px}
  .sec-cta .box.left figure { width: 42%}
  .sec-cta .box.right figure { width: 40%; margin-right: 20px}
  .sec-cta .box-inr { padding-bottom: 40px}
  .sec-cta .bnr-seminar img { bottom: 60px; max-width: 40%}
  .sec-cta .seminar-inr .text {margin-right: 0; font-size: 12px}
  .sec-cta .seminar-inr .text p { margin-right: 40%}
  .sec-cta .bnr-seminar button { display: block; width: 90%; margin: 10px auto 0}
}
/* -----------------------------------------------
 .btn-book
----------------------------------------------- */
.btn-book { position: fixed; z-index: 999}
.btn-book a { display: flex; width: 40px; height: auto; color: #333; font-weight: 800; line-height: 1.8; text-align: center; background:rgba(241,196,33,.8);  border-top-left-radius: 8px; border-bottom-left-radius: 8px}
.btn-book a .text { font-size: 13px; font-weight: bold}
.btn-book.is-hidden { visibility: hidden; opacity: 0;}
@media screen and (max-width:767px) {
  .btn-book { bottom: 20px; right: 0}
  .btn-book a { padding: 20px 0}
  .btn-book a img, .btn-book a small { display: none;}
  .btn-book a span { display: none}
  .btn-book a .text { margin-left: 10px; color: #333!important; font-weight: bold; white-space: pre; writing-mode: vertical-rl}
}
@media screen and (min-width:768px) {
  .btn-book { bottom: 20px; right: 20px;}
  .btn-book a { position: relative; flex-direction: column; width: 140px; height: 140px; padding: 30px 8px 8px; font-size: 14px; letter-spacing: 0.1em; border-radius: 0; background:rgba(241,196,33,1); box-shadow: 5px 5px #666}
  .btn-book a .text { height: 30px; margin-top: 20px; color: #fff; background: #000; border-radius: 100vh}
  .btn-book a:hover { opacity: 0.8}
}
/* -----------------------------------------------
 .btn-promo
----------------------------------------------- */
.btn-promo  { position: fixed;  bottom: 160px; right: 0; z-index: 999}
.btn-promo a { display: flex; width: 40px; height: auto; font-weight: 800; line-height: 1.8; text-align: center; background:rgba(229,0,96,.85); border-top-left-radius: 8px; border-bottom-left-radius: 8px}
.btn-promo a .text { font-size: 13px; font-weight: bold}
@media screen and (max-width:767px) {
  .btn-promo a { display: flex}
  .btn-promo a { padding: 20px 0}
  .btn-promo a .text { display: inline-block; margin-left: 14px; color: #fff; line-height: 1; font-weight: bold; white-space: pre; writing-mode: vertical-rl; text-orientation: upright}
  .btn-promo a .text i { display: inline-block; font-style: normal; transform: rotate(90deg)}
}
@media screen and (min-width:768px) {
  .btn-promo { bottom: 190px; right: 20px;}
  .btn-promo a { position: relative; flex-direction: column; width: 140px; height: 140px; padding: 20px 8px 8px; color: #fff; font-size: 13px; letter-spacing: 0.1em; border-radius: 0; background:#e50060 ; box-shadow: 5px 5px #666}
  .btn-promo a .text { height: 30px; margin-top: 10px; color: #fff; background: #000; border-radius: 100vh}
}
/* フッター */
footer .top { display: flex; justify-content: center; align-items: center; height: 50px}
footer .top ul { display: flex; width: fit-content; margin: auto}
footer .top ul li:nth-child(2n) { margin-left: 15px}
footer .top ul li a { color: #009bdc}
footer .btm { color: #fff; background: #008ecb}
@media screen and (max-width:767px) {
  footer .btm { padding: 15px 20px; text-align: center}
  footer .logo { display: block; width: auto; height: 15px; margin: 0 auto 10px}
}
@media screen and (min-width:768px) {
  footer .btm { display: flex; justify-content: center; align-items: center; height: 50px}
  footer .btm { position: relative}
  footer .logo { position: absolute; left: 30px}
}