/* ==================================================
	common
================================================== */

/* ----------------------------------------
	color
---------------------------------------- */

:root {
 --key-color: #005bac; /* rgb(0 91 172) */
 --sub-color: #4095e1;
 --lava: #ef3200; /* rgb(239 50 0) */
 --black: #333;
 --light-gray: #f6f7f7;
}

.fc_key { color: var(--key-color) !important; }
.fc_lava { color: var(--lava) !important; }



/* ----------------------------------------
	cont_wrap
---------------------------------------- */

.cont_wrap {
 padding: 0 3% 10%;
 text-align: left;
}
.cont_wrap *,
.cont_wrap::before,
.cont_wrap::after {
 box-sizing: border-box;
}
.cont_wrap p {
 font-size: 123%;
 line-height: 1.5;
}
.cont_wrap div + p,
.cont_wrap ul + p,
.cont_wrap ol + p,
.cont_wrap dl + p,
.cont_wrap table + p,
.cont_wrap img + p,
.cont_wrap p + p {
 margin-top: 1em;
}

@media screen and (min-width: 768px) {
 .cont_wrap {
  padding: 0 30px 80px;
 }
}



/* ----------------------------------------
	title_wrap
---------------------------------------- */

.title_wrap {
 display: flex;
 justify-content: space-between;
 align-items: center;
 gap: 20px;
 padding: 0 3% 20px;
 text-align: left;
}

@media screen and (max-width: 479px) {
 .title_wrap {
  flex-direction: column-reverse;
 }
 .title_wrap > img {
  align-self: flex-end;
 }
}

@media screen and (min-width: 768px) {
 .title_wrap {
  padding-right: 30px;
  padding-left: 30px;
 }
}



/* ----------------------------------------
	title
---------------------------------------- */

/* title1 -------------------- */

.title1 {
 display: flex;
 align-items: center;
 color: var(--key-color);
}
.title1::before,
.title1::after {
 content: "";
 flex-grow: 1;
 height: 3px;
 background: var(--key-color);
}
.title1 > span {
 padding: 0 5%;
}
.title1 + * {
 margin-top: 5%;
}

@media screen and (min-width: 768px) {
 .title1::before,
 .title1::after {
  height: 5px;
 }
 .title1 > span {
  padding: 0 10%;
 }
}

@media screen and (min-width: 1024px) {
 .title1 > span {
  padding: 0 70px;
 }
 .title1 + * {
  margin-top: 45px;
 }
}


/* title2 -------------------- */

.title2 {
 padding: 3% 3% 3% 0;
 color: #343434;
 text-align: left;
 background: var(--light-gray);
 border: 1px solid #ebebeb;
}
.title2 > span {
 display:block;
 padding-left: 3%;
 border-left: 6px solid #343434;
}
.title2 + * {
 margin-top: 20px;
}

@media screen and (min-width: 768px) {
 .title2 {
  padding: 20px 20px 20px 0;
 }
 .title2 > span {
  padding-left: 20px;
  border-left-width: 9px;
 }
 .title2 + * {
  margin-top: 30px;
 }
}


/* title3 -------------------- */

.title3 {
 padding-left: 1em;
 border-left: 12px solid var(--key-color);
}
.title3 + * {
 margin-top: 20px;
}

@media screen and (min-width: 768px) {
 .title3 + * {
  margin-top: 30px;
 }
}



/* ----------------------------------------
	heading
---------------------------------------- */

/* heading_l -------------------- */

.heading_l {
 font-size: 200%;
}

@media screen and (min-width: 1024px) {
 .heading_l {
  font-size: 292.3%;
 }
}


/* heading_m -------------------- */

.heading_m {
 font-size: 164.6%;
}

@media screen and (min-width: 768px) {
 .heading_m {
  font-size: 184.6%;
 }
}


/* heading_s -------------------- */

.heading_s {
 font-size: 158.6%;
}



/* ----------------------------------------
	text-align
---------------------------------------- */

.tcenter { text-align: center !important; }
.tleft { text-align: left !important; }
.tright { text-align: right !important; }



/* ----------------------------------------
	list
---------------------------------------- */

.list {
 padding-left: 1.5em;
 font-size: 123%;
 line-height: 1.8;
 list-style: disc outside;
}
.list > li:nth-child(n+2) {
 margin-top: 1.5%;
}
.list ul {
 padding-left: 1em;
 list-style-type: "- ";
}



/* ----------------------------------------
	button
---------------------------------------- */

.button {
 display: inline-flex;
 justify-content: center;
 align-items: center;
 transition: .2s;
 padding: 1em 1.6em 1.2em;
 line-height: 1.2;
 text-align: center;
 text-decoration: none;
 background: var(--lava);
}
.button:hover {
 background: var(--key-color);
}
.button > span {
 color: #fff;
 font-size: 164.6%;
 font-weight: bold;
}



/* ----------------------------------------
	sup
---------------------------------------- */

sup {
 position: relative;
 bottom: 1ex;
 vertical-align: baseline;
 height: 0;
 font-size: smaller;
 line-height: 1;
}



/* ----------------------------------------
	notes
---------------------------------------- */

.notes {
 padding-left: 1em;
 font-size: 100%;
 text-indent: -1em;
}
p.notes {
 font-size: 100%;
}
.notes > li:nth-child(n+2) {
 margin-top: .5em;
}



/* ----------------------------------------
	inquiry
---------------------------------------- */

.inquiry {
 text-align: center;
}
.inquiry .button {
 width: 100%;
 max-width: 400px;
 background: var(--key-color);
}
.inquiry .button:hover {
 background: var(--sub-color);
}



/* ----------------------------------------
	youtube
---------------------------------------- */

.youtube {
 position: relative;
 padding-bottom: 56.25%;
 height: 0;
 overflow: hidden;
}
.youtube iframe {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}





/* ==================================================
	title
================================================== */

#title.product {
 margin-bottom: 0;
 background-image: url(../images/main_vis.jpg);
}





/* ==================================================
	navi
================================================== */

.navi {
 margin: 20px 0 10%;
 padding: 15px;
 border-top: 3px solid var(--key-color);
 border-bottom: 3px solid var(--key-color);
}
.navi_list {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 row-gap: .5em;
 font-size: 153.8%;
 font-weight: bold;
}
.navi_list > li:not(:last-child) {
 margin-right: 1em;
 padding-right: 1em;
 border-right: 1px solid var(--key-color);
}
.navi_list > li a {
 transition: .2s;
}
.navi_list > li a:link,
.navi_list > li a:visited {
 color: var(--key-color);
 text-decoration: none;
}
.navi_list > li a:hover {
 opacity: .8;
}

@media screen and (min-width: 768px) {
 .navi {
  margin-bottom: 80px;
  border-top-width: 5px;
  border-bottom-width: 5px;
 }
}





/* ==================================================
	suggestion
================================================== */

/* ----------------------------------------
	onestop
---------------------------------------- */

.onestop {
 margin-top: 40px;
}
.onestop_list {
 display: flex;
 flex-direction: column;
 gap: 20px;
 list-style: none;
}
.onestop_list::before {
 display: block;
 content: "";
 width: 82px;
 height: 100px;
 margin: 0 auto;
 background: url(images/logo.svg) no-repeat 0 0 / 82px 100px;
}
.onestop_list .title {
 transform: skewX(160deg);
 padding: 10px;
 color: #fff;
 text-align: center;
 background: var(--sub-color);
}
.onestop_list .title h3 {
 transform: skewX(-160deg);
}
.onestop_list .cont {
 padding: 20px 10px 0;
}
.onestop_list h4 {
 margin-bottom: 10px;
}
.onestop_list .list > li:nth-child(n+2) {
 margin-top: 0;
}

@media screen and (min-width: 768px) {
 .onestop_list {
  position: relative;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  gap: 40px 140px;
 }
 .onestop_list > li {
  width: calc(50% - 70px);
 }
 .onestop_list::before {
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
 }
}

@media screen and (min-width: 1280px) {
 .onestop_list {
  column-gap: 240px;
 }
 .onestop_list::before {
  top: 15%;
  width: 99px;
  height: 120px;
  background-size: 99px 120px;
 }
 .onestop_list > li {
  width: calc(50% - 120px);
 }
}





/* ==================================================
	support
================================================== */

/* ----------------------------------------
	solution_cont
---------------------------------------- */

.solution_cont {
 display: grid;
 gap: 40px;
 margin-top: 20px;
}

@media screen and (min-width: 768px) {
 .solution_cont {
  grid-template-columns: repeat(2, 1fr);
  margin-top: 30px;
 }
}



/* ----------------------------------------
	support_cont
---------------------------------------- */

.support_cont {
 margin-top: 40px;
 padding: 30px 20px;
 text-align: center;
 background: rgb(0 91 172 / .1);
}
.support_cont > h3 {
 margin-bottom: 20px;
}
.support_list {
 margin: -8px;
}
.support_list > li {
 padding: 8px;
}
.support_list .inner {
 height: 100%;
 padding: 20px;
 background: #fff;
}
.support_list h4 {
 margin-bottom: 10px;
}

@media screen and (min-width: 480px) {
 .support_list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
 }
 .support_list > li {
  width: 50%;
 }
}

@media screen and (min-width: 768px) {
 .support_cont {
  padding: 30px;
 }
 .support_list {
  margin: -10px;
 }
 .support_list > li {
  width: calc(100% / 3);
  padding: 10px;
 }
}

@media screen and (max-width: 1023px) {
 .support_list > li p br {
  display: none;
 }
}





/* ==================================================
	poly_plus
================================================== */

.poly_plus {
 display: grid;
 gap: 20px 40px;
 margin-top: 20px;
}

@media screen and (min-width: 768px) {
 .poly_plus {
  grid-template-columns: 1fr 35.08771929824561%;
  margin-top: 30px;
 }
}





/* ==================================================
	phone_usage
================================================== */

.phone_usage {
 margin-bottom: 10%;
 padding: 20px;
 text-align: center;
 border: 3px solid var(--lava);
}
.phone_usage_cont {
 display: grid;
 row-gap: 20px;
 margin-top: 20px;
}
.phone_usage_cont .inner {
 display: flex;
 flex-direction: column;
 gap: 20px;
 height: 100%;
}
.phone_usage_cont h4 {
 margin-bottom: 10px;
}
.phone_usage_list {
 display: flex;
 flex-direction: column;
 gap: 20px;
}
.phone_usage_list > li p {
 margin-top: 10px;
 font-weight: bold;
}

@media screen and (min-width: 768px) {
 .phone_usage {
  margin-bottom: 80px;
 }
 .phone_usage_cont {
  grid-template-columns: 1fr 33.33333%;
 }
 .phone_usage_cont > :first-child {
  padding-right: 20px;
 }
 .phone_usage_cont > :last-child {
  position: relative;
  padding-left: 20px;
 }
 .phone_usage_cont > :last-child::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 100%;
  background: var(--lava);
 }
 .phone_usage_list {
  flex-direction: row;
  justify-content: center;
  margin-top: auto;
 }
}





/* ==================================================
	product
================================================== */

.product {
 padding-bottom: 10%;
}
.product:last-of-type {
 padding-bottom: 0;
}

@media screen and (min-width: 768px) {
 .product {
  padding-bottom: 80px;
 }
}



/* ----------------------------------------
	prod_head
---------------------------------------- */

.prod_head h2 + h2 {
 margin-top: 10px;
}



/* ----------------------------------------
	prod_main
---------------------------------------- */

.prod_main {
 display: grid;
 gap: 20px 40px;
 margin-top: 20px;
}
.prod_main * + h3 {
 margin-top: 20px;
}
.prod_main .list > li:nth-child(n+2) {
 margin-top: 0;
}
.prod_main .cta {
 margin-top: 20px;
}
.prod_main .media img {
 width: 100%;
}

@media screen and (max-width: 767px) {
 .prod_main .cont {
  order: 1;
 }
 .prod_main .cta {
  text-align: center;
 }
}

@media screen and (min-width: 768px) {
 .prod_main {
  grid-template-columns: 1fr 35.08771929824561%;
  margin-top: 30px;
 }
 .prod_main .cta .button {
  min-width: 300px;
 }
}



/* ----------------------------------------
	prod_image
---------------------------------------- */

.prod_image {
 margin-top: 40px;
 text-align: center;
}



/* ----------------------------------------
	prod_spec
---------------------------------------- */

.prod_spec {
 margin-top: 20px;
}
.prod_spec_table {
 table-layout: fixed;
 width: 100%;
}
.prod_spec_table th,
.prod_spec_table td {
 /* vertical-align: middle; */
 padding: .5em;
 font-size: 108%;
 line-height: 1.5;
 text-align: center;
 word-wrap: break-word;
 border: 1px solid var(--black);
}
.prod_spec_table th {
 font-weight: bold;
}
.prod_spec_table thead th {
 background: var(--light-gray);
}
.prod_spec_table tbody th {
 text-align: left;
}
.prod_spec_table .list {
 font-size: 108%;
 text-align: left;
 line-height: 1.5;
}

@media screen and (max-width: 767px) {
 .prod_spec {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
 }
 .prod_spec::-webkit-scrollbar {
  height: 6px;
 }
 .prod_spec::-webkit-scrollbar-track {
  background: var(--light-gray);
 }
 .prod_spec::-webkit-scrollbar-thumb {
  background: var(--key-color);
  border-radius: 3px;
 }
 .prod_spec_table {
  width: 750px;
 }
}





/* ==================================================
	video
================================================== */

.video {
 display: grid;
 gap: 20px 40px;
 padding-bottom: 30px;
}

@media screen and (min-width: 768px) {
 .video {
  grid-template-columns: 50% 1fr;
  padding-bottom: 40px;
 }
}





/* ==================================================
	casestudy
================================================== */

.casestudy_list {
 display: grid;
 gap: 20px;
}
.casestudy_list .inner {
 height: 100%;
 padding: 20px;
 background: var(--light-gray);
}
.casestudy_list h3 {
 margin-bottom: 10px;
}
.casestudy_list h4 {
 display: flex;
 align-items: center;
 gap: 5px;
 margin: 20px 0 5px;
 font-size: 123%;
}
.casestudy_list h4::before {
 content: "\25CF";
 font-size: 70%;
}
.casestudy_list dl {
 display: grid;
 grid-template-columns: 3em 1fr;
 row-gap: 5px;
 font-size: 123%;
 line-height: 1.5;
}

@media screen and (min-width: 768px) {
 .casestudy_list {
  grid-template-columns: repeat(2, 1fr);
 }
}



/* ----------------------------------------
	casestudy_illust
---------------------------------------- */

.casestudy_illust {
 margin-top: 40px;
 text-align: center;
}