@charset "UTF-8";
:root {
  --color-pred1:#fa000f;
  --color-pred2:#cc0000;
  --color-pwhite:#ffffff;
  --color-pgray1:#f4f4f4;
  --color-pgray2:#d9d9d9;
  --color-pgray3:#b3b3b3;
  --color-pgray4:#737373;
  --color-pgray5:#4d4d4d;
  --color-pgray6:#222222;
  --color-pblack:#0c0c0c;
	--unit:8px;
	--gap:25px;
	--ratio:16 / 9;

  --color-ucred1:#C41425;
  --color-ucred2:#f6dfd7;
}
/* 共通 */
.unified_comm .section {
  margin-bottom:var(--gap) !important;
}
/* 横ナビ */
#Contents #ContentNaviWrap{
	background:var(--color-pgray6);
}
#Contents #ContentNaviWrap .secondary{
	background:var(--color-pred2);
	border-bottom:1px solid var(--color-pblack);
}
#Contents #ContentNaviWrap .secondary a:hover{
	text-decoration:underline;
}
#Contents #ContentNaviWrap li a:link,
#Contents #ContentNaviWrap li a:visited{
	color:var(--color-pwhite);
}
@media screen and (max-width: 767px) {
	#Contents #ContentNaviWrap .secondary .Current a{
		background: color-mix(in srgb, var(--color-pred2) 70%, #000 20%) !important;
	}
  #ContentNaviWrap > .secondary .ContentNavi > ul {
		display:flex;
	}
  #ContentNaviWrap .secondary .ContentNavi li {
    width:inherit;
    height:35px;
	  border-left: 1px solid var(--color-pblack);
	  border-top: 1px solid var(--color-pblack);
		flex:1;
  }
  #ContentNaviWrap .secondary .ContentNavi li:nth-child(4) {
	  flex: 2;
	}
  #ContentNaviWrap .secondary .ContentNavi li:nth-child(even) {
    width:inherit;
  }
	#ContentNaviWrap .secondary .ContentNavi li a:link{
		border-top:none !important;
	}
}

/* 下ナビ */
.mod_icon1.icon_link_right_l_hd.Current{
	color:var(--color-pred2);
	text-decoration:underline;
}
@media screen and (max-width: 767px) {
  .mod_anchorlist2{
		display:flex;
		gap:calc(var(--gap) / 2);
	}
  .mod_anchorlist2 li+li {
    margin-top:0;
  }
}

/* 表組 */
@media (max-width: 800px) {
  .table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* H2相当-中央寄せ　※platform.css共通 */
.unified_comm .mod_sectiontitle1{
	font-weight:bold;
	line-height:1;
	margin-bottom:1em;
}
.unified_comm .mod_sectiontitle1 span{
	font-size:0.875rem;
}
/* H2～H3相当-装飾付き　※platform.css共通 */
.mod_h21{
	margin-bottom:1em !important;
  font-size: 1.5rem;
}
.mod_h21:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-left: 5px solid var(--color-ucred1);
}
/* H2～H3相当-連番付き */
.unified_comm .mod_sectiontitleNum {
  display: flex;
  align-items: center;
  font-size: 1.25rem;
  font-weight: bold;
  color:var(--color-pwhite);
  background: var(--color-ucred1);
  flex: 1;
}
.unified_comm .mod_sectiontitleNum::before {
  content: attr(data-num);
  background: var(--color-pblack);
  margin-right: 10px;
  padding: 0.75em 1.25em;
  display: inline-block;
}
.unified_comm .mod_section-body {
  padding: 15px;
}
/* ※既存CSS打消し用 */
.unified_comm h3{
	color:var(--color-pblack);
}
.AdditionalNotesStyle2{
	margin-top:1em;
}
.AdditionalNotesStyle2 dd{
	margin-left:2em;
}
.OptionWideRWD #Contents.unified_comm.top .branding img{
	height:100% !important;
}
	@media screen and (max-width: 767px) {
    #Contents.unified_comm  h2 {
        margin-bottom: 1em;
    }
	}
/* H3～H4相当-行頭装飾 */
.unified_comm .mod_sectiontitle2{
	font-size:1.375rem;
	margin-bottom:0.5em;
	text-align:left;
	text-indent:-1em;
	padding-left:1em;
}
.unified_comm .mod_sectiontitle2:before{
	content:"●";
	color:var(--color-ucred1);
}
/* H3～H4相当-赤文字 */
.unified_comm .mod_sectiontitle3{
	color:var(--color-ucred1);
	font-size:1.25rem;
	margin-bottom:0.5em;
	padding-bottom:0.25em;
	border-bottom:2px solid var(--color-ucred1);
}
/* H4～H5相当-行頭装飾 */
.unified_comm .mod_sectiontitle4{
	font-size:1.25rem;
	font-weight:bold;
	margin-bottom:0.5em;
}
.unified_comm .mod_sectiontitle4:before{
	content:"■";
	color:var(--color-ucred1);
	margin-right:0.25em;
}
/* H5～H6相当-背景色 */
.unified_comm .mod_sectiontitle5{
	font-size:1.125rem;
	font-weight:bold;
	padding:0.25em 0.5em;
	background-color: var(--color-pgray1);
	margin:1em 0 0.5em;
}

/* ブランディング-共通 */
.unified_comm .brandingWrapper {
  background-image:url(/service/uc/image/bg.jpg);
  background-repeat:no-repeat;
  background-size:cover;
}
.unified_comm .branding {
  max-width: 1275px;
  display: grid;
  gap: 0;
  margin:auto;
}
.unified_comm .branding-sub {
  max-width: 1275px;
	margin:auto;
	font-weight:1.5rem;
	color:var(--color-pwhite);
	font-weight:bold;
	padding:1em;
}
.unified_comm .branding .item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.unified_comm .branding .text-box {
	font-size:1.75rem;
	color:var(--color-pwhite);
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.unified_comm .text-box h1 {
	font-weight:bold;
}
	@media (max-width: 600px) {
		.unified_comm .branding .text-box {
			font-size:1.5rem;
		}
	}

/* ブランディング-TOP */
.unified_comm.top .branding {
  grid-template-columns: repeat(5, 1fr);
  grid-auto-rows:250px;
}
.unified_comm.top .branding .text-box {
  grid-column: span 3;
}
.unified_comm.top .branding {
  grid-auto-rows:250px;
}
.unified_comm.top .branding > .item:nth-child(2) {
  grid-column: span 2;
}
.unified_comm.top .branding > .item:nth-child(3) {
  grid-column: span 2;
}
.unified_comm.top .branding > .item:nth-child(4) {
  grid-column: span 3;
}
	@media (max-width: 600px) {
	  .unified_comm.top .branding {
	    width: 100%;
	    grid-template-columns: repeat(3, 1fr);
			grid-auto-rows: 100px;
	    grid-auto-flow: dense;
	  }
	  .unified_comm.top .branding .text-box {
	    grid-column: span 4;
			grid-row: span 2
	  }
	  .unified_comm.top .branding > div:nth-child(2) {
	    order: 10;
	  }
	}
/* ブランディング-下層 */
.unified_comm.lower .branding {
  grid-template-columns: repeat(8, 1fr);
  grid-auto-rows:100px;
}
.unified_comm.lower .branding .text-box {
  grid-column: span 8;
}
	@media (max-width: 1304px) {
	  .unified_comm.lower .branding {
	    grid-template-columns: repeat(4, 1fr);
	    grid-auto-rows:auto;
	  }
		.unified_comm.lower .branding .item {
		  height: 150px;
		  overflow: hidden;
		  position: relative;
		}
		.unified_comm.lower .branding .item img {
		  width: 100%;
		  height: 100% !important;
		  object-fit: cover;
		  object-position: center;
		  display: block;
		}
	  .unified_comm.lower .branding .text-box {
	    grid-column: span 4;
	  }
	}



/* トピックス */
.news-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
	max-width:965px;
	margin:auto;
}
.news-item {
  display: grid;
  grid-template-columns: 180px 1fr;
  align-items: start;
  gap: 2rem;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-pgray3);
}
.news-cat {
  background: var(--color-ucred1);
  color:var(--color-pwhite);
  font-weight: bold;
  padding: 6px 10px;
  display: inline-block;
  font-size: 0.9rem;
  text-align: center;
}
.news-link {
  display: flex;
  flex-direction: column;
  color:var(--color-pblack);
  text-decoration: none;
}
.news-date {
  color:var(--color-ucred1);
  font-size: 0.9rem;
	display:block;
}
.news-title {
  font-weight: bold;
  font-size: 1rem;
}
	@media (max-width: 600px) {
	  .news-item {
	    grid-template-columns: 1fr;
	  }
	  .news-cat {
	    width: fit-content;
	  }
	  .news-link {
	    flex-direction: column;
	    align-items: flex-start;
	    gap: 4px;
	  }
	}




/* 製品情報-リンク */
.unified_comm .products-link {
  display: grid;
  grid-template-columns: repeat(2, 445px);
  gap: 30px;
  justify-content: center;
}
.unified_comm .product-card {
  display: block;
  text-decoration: none;
  color: var(--color-pblack);
  transition: opacity .3s;
	background:var(--color-ucred2);
	border-radius: 3px;
}
.unified_comm a .product-title {
  font-size: 1.25rem;
  font-weight: bold;
  margin-top: 12px;
  position: relative;
  padding-right: 1.4em;
}
.unified_comm a .product-title::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 1em;
  height: 1em;
  border-right: 2px solid var(--color-pblack);
  border-bottom: 2px solid var(--color-pblack);
  transform: translateY(-50%) rotate(-45deg);
}
	@media screen and (max-width: 994px) {
		.unified_comm .products-link {
			grid-template-columns: repeat(2, 1fr);
			}
	}
	@media (max-width: 600px) {
		.unified_comm .products-link {
			grid-template-columns:1fr;
		}
	}

/* 製品情報 */
.unified_comm .products {
  display: grid;
  grid-template-columns: repeat(2, 500px);
  gap: 30px;
  justify-content: center;
}
.unified_comm .product-container{
	padding:20px;
}
.unified_comm .product-card:hover {
  opacity: .7;
}
.unified_comm .product-img {
  width: 100%;
  height: auto
  overflow: hidden;
}
.unified_comm .product-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.unified_comm .product-title {
  font-size: 1.25rem;
  font-weight: bold;
  margin-top: 12px;
}
.unified_comm .ColumnSet{
	display:flex;
}
.unified_comm .products-features > .section{
	max-width:965px;
	margin:auto;
}
.unified_comm .products-features > .section .text{
	flex:1;
}
.unified_comm .ColumnSet .ImgOnlyStyle{
	max-width:400px;
}
.mod_anchorlist2 {
  margin: 40px auto;
  padding: 20px;
  border-top: solid 1px var(--color-pgray3);
  border-bottom: solid 1px var(--color-pgray3);
}
	@media (max-width: 1304px) {
	  .unified_comm .products {
	    grid-template-columns: repeat(2, 1fr);
	  }
	}
	@media screen and (max-width: 767px) {
		.unified_comm .ColumnSet{
			flex-direction: column;
			margin:auto !important;
		}
		.unified_comm .ColumnSet .ImgOnlyStyle{
			margin:auto;
		}
	}
	@media (max-width: 600px) {
	  .unified_comm .products {
	    grid-template-columns: 1fr;
	  }
	}

/* 仕様 & 電話機 */
.unified_comm .ColumnSet:after{
	content:none !important;
}
.ColumnSet.spec-sample{
	gap:var(--gap);
}
.ColumnSet.spec-sample.end{
	align-items:end;
}
.ColumnSet.spec-sample.start{
	align-items:start;
}
.ColumnSet.spec-sample .text{
	font-size:0.875rem;
	text-align:center;
}
.ColumnSet.spec-sample .text strong{
	font-size:1rem;
}
.ColumnSet.spec-sample .list{
	font-size:0.875rem;
	padding-left:1.5em;
	text-indent:-1.5em;
}
.ColumnSet.spec-sample .list li:before{
	content:"●";
	color:#8AAAD9;
	margin-right:0.5em;
}
.products-tel .ColumnSet > div.wide .ImgOnlyStyle{
	max-width:inherit;
}
	@media screen and (min-width: 768px) {
		.products-tel .ColumnSet > div{
			max-width:290px;
		}
		.products-tel .ColumnSet > div.wide{
			max-width:580px;
		}
	}
	@media screen and (max-width: 767px) {
		.unified_comm .ColumnSet .ImgOnlyStyle {
	    max-width:inherit;
		}
		#spapp{
			align-items:center;
		}
		#spapp .ImgOnlyStyle{
			text-align:center;
		}
	}