@charset "UTF-8";

/* Reset & base */
:root{--bg:#FFF; --text:#22262A; --link:#0A3E6F; --accent:#019DE6; --accent-dark:#009CE5; --cta-bg:#F5F7FA; --mv-bg:#F5F5F5; --button-blue:#019DE6; --button-orange:#E95502; --footer-bg:#002E5F; --h-title-grey:#D9D9D9; font-size:16px;}
*{box-sizing:border-box}
html,body{height:100%;background:var(--bg);color:var(--text);font-family:"Noto Sans JP", Arial, Helvetica, sans-serif,sans-serif;line-height:1.6; margin:0;}
a{text-decoration:underline;color:var(--link);}
a:hover{text-decoration:none;}
ul, ol { list-style: none; padding: 0; margin: 0;}

/* Layout container (FLOCSS l-container) */
.l-container{width:980px;margin:0 auto;}
@media (max-width:980px){.l-container{width:100%;padding:0 20px;}}
.brsp {display: none;}
@media (max-width:768px) { .brsp {display: block;}}

/* Header */
.l-header{display:flex;align-items:center;justify-content:space-between;padding:20px 0; border-bottom: 1px solid #D0D6DC;}
.c-header{display:flex;align-items:center;gap:20px;justify-content: space-between;}
.c-header__logo a{display:flex;align-items:center;gap:12px; text-decoration: none; color:initial;}
.c-header__logo img{width: 100%; max-width: 137px; position: relative;bottom: -20px;}
.c-header__title{line-height:1;}
.c-header__title .brand{display:block;font-weight:700;color:var(--h-title-grey);font-size: 1.75rem;}
.c-header__title .sub{display:block;color:var(--accent);font-size: 2.25rem; font-weight: 700;}
.c-header__actions{display:flex;gap:15px;align-items:center;}
.c-btn{width:200px;height:50px;border:0;color:#fff;font-weight:700;cursor:pointer;border-radius:4px;}
.c-btn:hover {opacity: 0.7; transition: 0.5s ease-in-out;}
.c-btn--blue{background:var(--button-blue);}
.c-btn--orange{background:var(--button-orange);}
.c-btn--blue a, .c-btn--orange a {color:#fff; text-decoration:none; width:100%; height:100%; display: flex; justify-content: center; align-items: center;}
@media (max-width:980px){.c-header__title .brand{font-size: 1.125rem} .c-header__title .sub{font-size: 1.5rem;} }
@media (max-width:768px){.c-header__logo img{max-width:70px;bottom:0px;} .c-header{flex-wrap:wrap;}}

/* Main visual */
.l-mainvisual{width:100%; height: 214px; background:var(--mv-bg);}
.l-mainvisual.underpage{height: 180px; display:flex; align-items:center; justify-content: flex-start; padding:30px 0;}
.c-mainvisual{position:relative; height:100%; display:flex;align-items: flex-start;justify-content:space-between; padding:30px 0 10px;}
.c-mainvisual__left {z-index:1;}
.c-mainvisual__left h1{color:var(--link);font-size:2.5rem;font-weight:700;margin:0; line-height:120%;}
.c-mainvisual__left h1 span{font-weight:400;}
.c-mainvisual__catch{max-width:588px; width: 100%; color:var(--text);font-size:0.875rem; z-index:1;}
.c-mainvisual__catch p{ margin-top: 0;}
.c-mainvisual__img {position: absolute; left:0; bottom:-7px; z-index:0;}
.c-mainvisual__img img {width: 100%;}
@media (max-width:980px){.l-mainvisual{height: auto;} .c-mainvisual{gap:16px; padding: 30px 20px 10px;}.c-mainvisual__catch{max-width:100%;} .l-mainvisual.underpage{padding:20px 15px; height: auto;} }
@media (max-width:768px){
  .l-mainvisual{padding:20px 15px; height: auto;}
  .l-mainvisual {padding: 20px 15px 70px; height: auto;}
  .c-mainvisual{flex-direction:column;}
  .c-mainvisual__img {bottom:-77px;}
}

.l-content {padding-top:60px; padding-bottom:80px;}
@media (max-width:768px){.l-content {padding-top:30px; padding-bottom:40px;}}
.c-heading--h2{color:var(--accent);font-size:1.875rem;font-weight:700;margin-top:0;margin-bottom:30px;}
.c-heading--h3{position:relative; color:var(--accent);font-size:1.3125rem;font-weight:700;margin-bottom:20px;display:flex;align-items:center;gap:10px; margin-top: 0; padding-left: 20px;}
.c-heading--h3::before{position: absolute; content:"";width:10px;height:10px;border:3px solid var(--accent);display:inline-block;box-sizing:border-box; left: 0; top: 12px;}
.c-heading--h3--plain{position:relative; color:var(--accent);font-size:1.3125rem;font-weight:700;margin-bottom:20px;display:flex;align-items:center;gap:10px; margin-top: 0;}
.c-heading--h4{position: relative; font-size:1.125rem;font-weight:700;display:flex;align-items:center;gap:10px;}
.c-heading--h4::before{content:"";width:10px;height:2px;background:var(--accent);display:inline-block;}
.c-heading--h4--plain{font-size:1.125rem;font-weight:700;}
.c-heading--h5{font-size:1rem;font-weight:700;}
@media (max-width:768px){.c-heading--h2{font-size:1.25rem; margin-top:0; margin-bottom:20px;}}

.c-media{display:flex;gap:20px;align-items:flex-start;margin:20px 0;}
.c-media.mb40{margin-bottom:40px;}
.c-media__img{flex:0 0 30.6125%; height: 180px; display: flex; justify-content: center; align-items: center;}
.c-media__img img{width:100%;height:auto;display:block;}
.c-media__img img.copyimg01{max-width:244px;}
.c-media__img img.copyimg02{max-width:198px;}
.c-media__img img.copyimg03{max-width:240px;}
.c-media__img img.copyimg04{max-width:154px;}
.c-media__img.flow-spot {max-width:100px; align-items:flex-start; height:auto;}
.c-media__body{flex:1;}
.c-media--reversed{flex-direction:row-reverse;}
.c-media__note {font-size:0.875rem;}
.tab_content_description .c-media__img {flex:initial}
@media (max-width:768px){
  .c-media{flex-direction:column}.c-media__img{width:100%; flex:initial;} 
  .c-media__img img{width:initial;}
  .c-media__img.flow-spot {height:auto; display:flex; justify-content:center; width:100%; max-width:initial;}
}
.usecase .c-media__img{border: 1px solid #D9D9D9;}

.c-list{list-style:none;padding:0;margin:0 0 20px 0;}
.c-list li{position:relative;padding-left:18px;margin-bottom:8px;}
.c-list li::before{content:"";width:4px;height:4px;background:var(--accent);border-radius:50%;position:absolute;left:0;top:0.9rem;transform:translateY(-50%);}

.c-linkgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin:20px 0 40px;}
.c-linkbox{border:1px solid #e6e6e6;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 0 10px #00000020;}
.c-linkbox:hover {opacity:0.7; transition: 0.5s ease-in-out;}
.c-linkbox__media{height:160px;background:var(--bg); display:flex; justify-content:center; align-items:center;}
.c-linkbox__media img{width:100%;height:100%; object-fit:contain; display:flex; justify-content:center; align-items:center;}
.c-linkbox__media img.spotimg01{max-width: 270px;}
.c-linkbox__media img.spotimg02{max-width: 200px;}
.c-linkbox__foot{position:relative;background:#E0E8EF;padding:7px 35px;text-align:center;font-size:1rem;font-weight:700; line-height: 140%;}
.c-linkbox__foot::after{content:"";position:absolute;right:10px;bottom:10px;width:0;height:0;border-left:10px solid transparent;border-bottom:10px solid #0A3E6F;}
a.c-linkbox {text-decoration: none;}
.c-linkgrid.col-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:20px 0 40px;}
.c-linkgrid.col-3 .c-linkbox__foot{position:relative;color:#FFF;background:#0A3E6F;padding:15px;text-align:center;font-size:1rem;font-weight:700; line-height: 140%;}
.c-linkgrid.col-3 .c-linkbox__foot::after{content:"";position:absolute;right:10px;bottom:10px;width:0;height:0;border-left:10px solid transparent;border-bottom:10px solid #E0E8EF;}
.c-linkgrid.col-3 img.spotimg03 {max-width: 183px;}
.c-linkgrid.col-3 img.spotimg04 {max-width: 238px;}
.c-linkgrid.col-3 img.spotimg05 {max-width: 260px;}

@media (max-width:980px){
  .c-linkbox__foot{padding:7px 15px;}
}
@media (max-width:768px){
  .c-linkgrid,.c-linkgrid.col-3{grid-template-columns:1fr; margin-bottom:30px;}
  .c-linkbox__foot, .c-linkgrid.col-3 .c-linkbox__foot{padding:7px 10px; font-size: 0.875rem;}
}

.c-table{width:100%;border-collapse:collapse;margin:20px 0;font-size:1.3125rem;}
.c-table th,.c-table td{border:1px solid #d9d9d9;padding:12px;text-align:center;}
.c-table thead tr{background:var(--accent-dark);color:#FFF;}
.c-table tbody td{background:#FFF;font-size:1.3125rem;}
.c-table tbody td span{font-size:1rem;}
.c-table tbody td:first-child{color:var(--accent-dark);font-size:1.125rem;font-weight:700;text-align:left; background-color:#E0E8EF;}
.c-pricetable-text {display:flex; justify-content:space-between;}
.c-pricetable-text p {margin: 0;}
@media (max-width:480px){ .c-table{font-size:1rem;overflow:auto;display:block} }

@media (max-width:480px){
  .l-header{padding:12px 0;}
  .c-header{flex-direction:column;align-items:flex-start;gap:12px;}
  .c-header__actions{width:100%;display:flex;justify-content:flex-start;gap:10px;flex-wrap:wrap;}
  .c-btn{width:calc(50% - 5px);min-width:140px;}
  .c-btn:hover {opacity: 0.7; transition: 0.5s ease-in-out;}
  .c-mainvisual{flex-direction:column;align-items:flex-start;gap:12px;padding:20px 0;}
  .c-mainvisual__left h1{font-size:1.75rem;}
  .c-mainvisual__catch{max-width:100%;}
  .c-media{gap:12px;}
  .c-table{display:block;overflow:auto;font-size:1rem;}
}

/* CTA */
.c-cta{background:var(--cta-bg);padding:40px 30px;text-align:center;margin-top:30px;}
.c-cta__title{color:var(--accent);font-size:1.875rem;font-weight:700;margin:0 0 30px 0;}
.c-cta__actions{width:100%; display:flex;justify-content:center;gap:15px; margin-bottom:30px;}
.c-cta__download span {position:relative; padding-right: 18px; margin-right: 10px;}
.c-cta__download span::after {position:absolute; content:''; background:url(../images/cta_area_dllink_triangle.svg)no-repeat center center; top:50%; transform: translateY(-50%); right:0; width:8px; height:8px;}
.c-cta .c-btn {width:320px;height:60px;}
.c-cta .c-btn--blue a, .c-cta .c-btn--orange a { font-size: 1rem;}
.c-cta__notes p {text-align:left; text-indent:-4em; padding-left:4em;}
.c-cta__contact {margin-top: 20px;}

@media (max-width:768px){
  .c-cta{padding:20px 15px;}
  .c-cta__title{font-size:1.5rem; margin-bottom: 20px;}
  .c-cta__actions{flex-wrap: wrap;}
  .c-cta__download span::after {transform: rotate(90deg);}
}

/* Footer */
.l-footer{width:100%;background:var(--footer-bg);color:#fff;padding:40px 0;}
.l-footer .l-container{display:flex;flex-direction:column;gap:12px;align-items:flex-start;}
.l-footer__top{font-weight:700;}
.l-footer__links{font-size:0.9375rem;}
.l-footer__links a{color:#fff; text-decoration: none; margin:0 5px;}
.l-footer__links a:first-child{margin-left:0;}
.l-footer__links a:hover{text-decoration:underline;}
.l-footer__copyright{font-size:0.875rem;}
@media (max-width:768px){ .l-footer__links{font-size:0.75rem;} }

/* Utilities */
.u-mb20{margin-bottom:20px;}

/** order_tabarea **/
.tabs { margin-top: 50px; padding-bottom: 0; background-color: #fff; width: 100%; margin: 0 auto; display:flex; justify-content:center; flex-wrap: wrap;}
.tab_item {position:relative; width:200px; height:50px; border:1px solid #22262A; background-color:#FFF; line-height:50px; font-size:1rem; text-align:center; color:#22262A; display:block; float:left; text-align:center; font-weight:bold; transition:all 0.2s ease; margin-bottom: 0; cursor:pointer; margin-left:15px; margin-right:15px; border-radius: 5px;}
.tab_item:hover { opacity: 0.75;}
.tab_item::after {position: absolute; background: url(../images/anchor_black_arrow.svg) no-repeat center center;background-size: cover; content: ''; width: 8px; height: 4px; bottom: 5px; transition: 0.25s ease-in-out; left:50%; transform: translateX(-50%);}
.tabs input:checked + .tab_item::after {position: absolute; background: url(../images/anchor_white_arrow.svg) no-repeat center center;background-size: cover; content: ''; width: 8px; height: 4px; bottom: 5px; transition: 0.25s ease-in-out; left:50%; transform: translateX(-50%);}
input[name="tab_item"] { display: none; }
.tab_content { display: none; padding:0; clear: both; overflow: hidden; padding-top: 60px;}
#order:checked ~ #order_content, #frame:checked ~ #frame_content {display: block;}
.tabs input:checked + .tab_item { background-color: #0A3E6F; color: #fff; }

/* accordion */
.faq-accordion-area { max-width: 100%; margin: 0 auto 40px; }
.faq-accordion-box p { margin-bottom: 15px; }
.faq-accordion-box p:last-child { margin-bottom: 0; }
.faq-accordion-box a { color: #0E6EC8; }
.faq-accordion-box a:hover { text-decoration: underline; }
.acc-toggle { display: none; }
.Label {padding: 1em 80px 1em 15px; display: block; font-weight: 700; line-height: 150%; background:#FFF; border-bottom: 1px solid #D4DDE3; display: flex; align-items: center;}
.Label::before {content:"＋"; width:20px; height:20px; position: absolute; top:30px; right:20px; font-size:14px; line-height:100%; border:1px solid #0A3E6F; border-radius:20px; display:flex; justify-content:center; align-items:center; color:#0A3E6F;}
.faq-accordion-box:hover .Label { cursor: pointer; }
.Label, .content { -webkit-backface-visibility: hidden; backface-visibility: hidden; transform: translateZ(0);  }
.Label:hover { opacity: 0.5; }
.content { height: 0; margin-bottom:10px; padding:0 20px; overflow: hidden; }
.acc-toggle:checked + .Label { border-bottom:none; margin-bottom:0; }
.acc-toggle:checked + .Label + .content { height: auto; padding: 0 1em 2em 72px; /*transition: all .3s;*/ margin-bottom: 12px; line-height: 150%; background-color: #FFF; border-bottom: 1px solid #D4DDE3; border-top: none;}
.acc-toggle:checked + .Label::before { content:"ー"; }
.acc-toggle:checked + .Label + .content::after { width:42px; height: 32px; content:"A"; color: #FFF; background-color:#737B82; position: absolute; font-size: 1rem; font-family:Arial, Helvetica, sans-serif; font-weight: 700; top: 15px; left: 15px; text-align:center; padding-top: 10px; }
.faq-answertitle { position: relative; font-size: 18px; font-weight: 700; margin-bottom: 15px; padding-left: 25px; }
.faq-answertitle::before { position: absolute; color: #0E6EC8; content: '■'; left: 0; top: 0; }
.faq-subtext { font-weight: 700; }
.faq-list { margin-bottom: 15px; }
.faq-list li { position: relative; padding-left: 20px; margin-bottom: 5px; }
.faq-list li::before { position: absolute; color: #0E6EC8; content: '・'; left: 0; top: 0; }
.faq_caution { font-size: 14px; margin-bottom: 20px; }
.faq-imgbox { max-width: 420px; width: 100%; height: auto;}
.faq-imgbox img { width: 100%; height: auto;}
.Label span.qanum {background-color: #0A3E6F; height: 42px; aspect-ratio: 1; color: #FFF; font-family: Arial, Helvetica, sans-serif; font-weight: 700; font-size: 1rem; margin-right: 15px; display: block; text-align: center; align-items: center; padding-top: 10px;}

@media (max-width:768px){
  .Label {padding: 1em 40px 1em 0px; align-items: flex-start;}
  .acc-toggle:checked + .Label + .content {padding: 0 1em 1em 52px;}
  .acc-toggle:checked + .Label + .content::after { top:15px; left: 0;}
  .tab_item {margin-bottom: 20px;}
  .tab_content {padding-top: 20px;}
}
.dragged { display: flex; justify-content: flex-start; align-items: flex-start; gap:20px;}
.dragged-grid { display: grid; gap: 16px; margin: 20px 0; align-items: start;}
.dragged-content { display: flex; gap: 20px;}
.dragged-grid--3 {grid-template-columns: repeat(3, 1fr);}
.dragged-grid--2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; margin: 20px 0;}
.dragged-grid .dragged { color: var(--text); border-radius: 6px; box-shadow: none; display: block;}
.dragged__body .c-list li{ margin-bottom: 2px;}
.dragged-grid .dragged h4 {margin-top: 0; margin-bottom: 8px; font-size: 1rem; color: var(--text);}

@media (max-width:768px) {
  .dragged-grid--3 {grid-template-columns: 1fr;}
  .dragged-grid--2 {grid-template-columns: 1fr;}
  .dragged-content { flex-wrap: wrap; justify-content: center;}
}

.c-breadcrumb { display: flex; align-items: center; height:50px; gap: 10px; font-size: 0.9375rem; color: var(--text); position: relative; padding-right: 18px;}
.c-breadcrumb__home, .c-breadcrumb__middle { color: var(--link); text-decoration: underline; position: relative;
 padding-right: 18px;}
.c-breadcrumb__home::after, .c-breadcrumb__middle::after {position:absolute; background:url(../images/black_arrow.svg) no-repeat center center; background-size: cover; content: ''; width:4px; height: 8px; transition: 0.25s ease-in-out; top:50%; transform: translateY(-50%); right:0px;}
.c-breadcrumb__sep { color: #777; margin: 0;}
.c-breadcrumb__current strong { font-weight: 700; color: var(--text);}
@media (max-width:768px) {.c-breadcrumb { margin: 0; font-size: 0.875rem;}}
@media (max-width:480px){.c-breadcrumb { font-size: 0.6875rem; gap: 8px; margin:0;}}
.c-btn-area { justify-content:center; display:flex; gap:20px; margin-bottom:60px;}
.c-action--center {display:flex; justify-content:center; padding-top:20px; margin-bottom:30px;}
.c-action--center .c-btn.c-btn--standard { max-width: 350px; width: 100%; height: 50px; background-color: #FFF; border: 1px solid #22262A; position: relative;}
.c-btn-area .c-btn.c-btn--standard { max-width: 200px; width: 100%; height: 50px; background-color: #FFF; border: 1px solid #22262A; position: relative;}
.c-action--center .c-btn.c-btn--standard a, .c-btn-area .c-btn.c-btn--standard a {color:#22262A; width:100%; height:100%; text-decoration:none; display:flex; justify-content:center; align-items:center; font-size:1rem; position:relative;}
.c-btn.c-btn--standard.anchor a::before, .c-btn.c-btn--standard.anchor a::after { content: ""; position: absolute; bottom: 3px; left: calc(50% - 0.5px); width: 1px; height: 7px; border-radius: 9999px; background-color: #000000; transform-origin: 50% calc(100% - 0.5px); }
.c-btn.c-btn--standard.p_link::after {position:absolute; background:url(../images/black_arrow.svg) no-repeat center center; background-size: cover; content: ''; width:4px; height: 8px; transition: 0.25s ease-in-out; top:50%; transform: translateY(-50%); right: 10px;}
.c-btn.c-btn--standard.anchor a::before { transform: rotate(45deg); }
.c-btn.c-btn--standard.anchor a::after { transform: rotate(-45deg); }
@media (max-width:768px){
.c-btn-area {margin-bottom: 40px;}
}
/* Table */
.c-table--basic { width: 100%; border-collapse: collapse; margin: 20px 0;}
.c-table--basic th {background-color: #E0E8EF;}
.c-table--basic tr.blue th {background-color: #009CE5;}
.c-table--basic th, .c-table--basic td { padding: 10px; font-size: 1rem; text-align: left; border: 1px solid var(--accent-dark);}
.c-table--basic td:first-child {font-weight:700;}
@media (max-width:768px) {
.c-table--basic th, .c-table--basic td {
   width: 33.33%;
}
}
@media (max-width:480px) {
  .c-table--basic { display: block; overflow-x: auto;}
}

.options { margin: 16px 0 24px; }
.options__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start;}
.option { border-radius: 6px; padding: 12px; text-align: left; display:flex; flex-direction:column; gap:12px;}
.option__title { font-size: 1rem; font-weight: 700; color: var(--text); text-align: center; margin: 0;}
.option__img { display:flex; justify-content:center; align-items:center; min-height: 80px;}
.option__img img { max-width: 100%; height: auto; display:block; object-fit:contain;}

@media (max-width:980px) {
  .options__grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}
@media (max-width:480px) {
  .options__grid { grid-template-columns: 1fr; gap: 12px; }
}
.order_content_01 { padding:30px; background: #F5F7FA; margin-bottom:40px;}
.order_content_02 { padding:30px; background: #E4F2FF; margin-bottom:40px;}
.order_content_01 .c-heading--h2, .order_content_02 .c-heading--h2 { margin-top:0; border-bottom: 1px solid #009CE5; font-family: Arial, Helvetica, sans-serif;}
.other_conditions {position: relative; border-top: 2px solid #009CE5; border-bottom: 2px solid #009CE5; margin-bottom:40px;}
.other_conditions .linkText {  position: absolute; text-align: right; right:0; bottom:18px; margin: 0;}
.other_conditions .c-list li { margin-bottom: 5px;}
.cmn-ill_right { float: right; margin: 0 0 0 20px;}
@media (max-width:768px) {
  .order_content_01, .order_content_02 {padding:20px 15px;}
  .other_conditions .linkText { position: relative; }
  .cmn-ill_right { float: initial; margin: 0 auto 30px; text-align: center;}
}
.qa-list li {padding-left:1em; text-indent:-1em; margin-bottom:8px;}

.c-btn--wrap {display:flex; justify-content: center; align-items: flex-start;}
.c-btn--center {display: flex; justify-content: center;max-width: 320px; width: 100%;}