/* 基本STYLE */

html,
body {
    font-style: normal;
    font-weight: 400;
    font-size: 13px;
    font-family: "メイリオ";
    line-height: 180%;
    background: #FFF;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    word-wrap: break-word;
    color: #333;
}

/* 変数設定：画面横幅設定 */
:root {
    --max-width: 1300px;
    --min-width: 1300px;
}

/* PC・スマホ表示分けクラス */
.pc-contents {
    display: unset;
}

.sp-contents {
    display: none;
}

/* ユーザ別表示 初期不表示設定 */
.regular {
    display: none;
}
.business {
    display: none;
}
.member {
    display: none;
}
.guest {
    display: none;
}

@media screen and (max-width: 767px) {
    .pc-contents {
        display: none;
    }

    .sp-contents {
        display: block;
    }

    .pc-only-img img {
        display: none;
    }
}

/* アンカーリンクの色・下線を無効 */
a {
    color: #000;
    text-decoration: none;
}

/* リスト先頭装飾を無効 */
ul,
li {
    list-style: none;
}

/*会社概要ページ等のstyleを無効*/
.navbar-nav li{
    margin-bottom: unset !important;
}
/* 横幅設定クラス */
.fixed-width {
    max-width: var(--max-width);
    min-width: var(--min-width);
    width: 100%;
}

.fixed-min-width {
    min-width: var(--min-width);
    width: 100%;
}

@media screen and (max-width: 767px) {
    .fixed-width {
        max-width: unset;
        min-width: unset;
        width: 100%;
    }

    .fixed-min-width {
        min-width: unset;
        width: 100%;
    }
}


/* Bootstrap補足 */
.vw-75 {
    width: 75vw !important;
}

.w-80 {
    width: 80% !important;
}

.w-90 {
    width: 90% !important;
}

.text-owl {
    color: #213783;
}

.bg-owl {
    background-color: #213783 !important;
}

.text-business {
    color: #dfc97d;
}

.bg-business {
    background-color: #dfc97d !important;
}

.text-outlet {
    color: #a30204;
}

.bg-outlet {
    background-color: #a30204 !important;
}

.btn-outlet {
    --bs-btn-color: #fff;
    --bs-btn-bg: #a30204;
    --bs-btn-border-color: #a30204;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #940204;
    --bs-btn-hover-border-color: #940204;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #800103;
    --bs-btn-active-border-color: #800103;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #a30204;
    --bs-btn-disabled-border-color: #a30204;
}

.btn-outline-yellow {
	--bs-btn-color:#333;
    --bs-btn-border-color: #333;
    --bs-btn-hover-color: #333;
    --bs-btn-hover-bg: #ffc107;
    --bs-btn-hover-border-color: #ffc107;
    --bs-btn-focus-shadow-rgb: 255, 193, 7;
    --bs-btn-active-color: #ff7e00;
    --bs-btn-active-bg: #ffefc0;
    --bs-btn-active-border-color: #ffc107;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #ffc107;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #ffc107;
    --bs-gradient: none;
}

.btn-bg-white {
    --bs-btn-bg: #ffffff;
}

/* サイト全体の修飾クラス */

/* アコーディオンアニメーションクラス(お知らせヘッドライン用) */
	details {
		overflow: hidden;
		/* アニメーションのために必須 */
		transition: max-height 0.6s ease-in-out;
	}

	details:not([open]) {
		max-height: 30px;
		/* `summary`要素の高さに合わせて調整 */
	}

	details[open] {
		max-height: 400px;
		/* コンテンツが収まる十分な高さに設定 */
	}

/* toolipクラス */
.text-tooltip {
    position: relative;
}

.tooltip-content {
    opacity: 0;
    width: 90%;
    text-align: left;
    visibility: hidden;
    font-size: 70%;
    border-radius: 5px;
    background-color: #555;
    color: #fff;
    padding: 5px 10px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%);
    transition: all .6s ease-in-out;
    pointer-events: none;
}

.text-tooltip:hover .tooltip-content,

.tooltip-active .tooltip-content {
    opacity: 0.85;
    visibility: visible;
}

/* 横線クラス */
.side-hr {
    display: flex;
    align-items: center;
    text-align: center;
}

.side-hr:before,
.side-hr:after {
    border-top: 1px #ccc solid;
    content: "";
    display: inline;
    flex-grow: 1;
}

.side-hr:before {
    margin-right: 0.5em;
}

.side-hr:after {
    margin-left: 0.5em;
}

.side-hr-inner {
    padding: 0 40px;
}

/* 子画像要素の横幅設定style */
.img-w250px img {
    width: 100%;
    max-width: 250px;
}

.img-w200px img {
    width: 100%;
    max-width: 200px;
}

.img-w100px img {
    width: 100%;
    max-width: 100px;
}

.img-w100 img {
    width: 100%;
    max-width: 100%;
}

/* 部分的に使用するstyle */
/* お知らせ部 */
#newsBlock summary {
    display: block;
    /* list-style: none;*/
}

#newsBlock>details {

    &[open] {
        summary {
            &::after {
                content: '▲';
            }
        }
    }

    summary {
        cursor: pointer;
        list-style: none;
        background-color: grey;

        &::-webkit-details-marker {
            display: none
        }

        &::after {
            content: '▼';
            font-size: 16px;
            float: right;
        }
    }
}

#newsBlock .newsLine {
    width: 90%;
    padding: 0.1% 0;
    display: block;
    color: #000000;
    background: #e9e9e9;
    text-align: left;
    font-weight: bold;
    font-size: 12px;

}

#newsBlock .newsHeaderRed {
    display: inline-block;
    background: #cc0000;
    margin: 0 10px;
    padding: 0 5px;
    color: #ffffff;
    font-size: 10px;
}

#newsBlock .newsHeaderGreen {
    display: inline-block;
    background: #3f8342;
    margin: 0 10px;
    padding: 0 5px;
    color: #ffffff;
    font-size: 10px;
}

#newsBlock p {
    background-color: #f9f9f9;
    width: 90%;
}
/* お知らせ部 終わり */

/* TOP 製品カテゴリ一覧 レスポンシブ対応有 */
.products-menu ul, .products-menu li {
    list-style: none;
}
.products-tabs {
	width:95%;
	margin:0 auto;
}
.products-tab-item {
	width: 14%\9; /* IE10以下 */
	width: calc(100%/7);
	height: 50px;
	border-bottom: 3px solid #213783;
	line-height: 50px;
	text-align: center;
	display: block;
	font-weight:bold;
	font-size:14px;
	float: left;
	transition: all 0.3s ease;
}
@media all and (-ms-high-contrast:none){
	.products-tab-item {
		width: 14%;
	}
}
@supports (-ms-ime-align:auto) {
	.products-tab-item {
		width: 14%;
	}
}
input[name="products-tab-item"] {
	display: none;
}
.products-tab-content {
	display: none;
	padding: 15px 0 0 0;
	clear: both;
	overflow: hidden;
}
#products-tab-01:checked ~ #products-tab-01-content,
#products-tab-02:checked ~ #products-tab-02-content,
#products-tab-03:checked ~ #products-tab-03-content,
#products-tab-04:checked ~ #products-tab-04-content,
#products-tab-05:checked ~ #products-tab-05-content,
#products-tab-06:checked ~ #products-tab-06-content,
#products-tab-07:checked ~ #products-tab-07-content
{
	display: block;
}
.products-tabs input:checked + .products-tab-item {
	background-color: #213783;
	color: #fff;
}
ul.products-menu li {
	float:left;
	width:25%;
	margin:10px auto 0;
}
ul.products-menu li a {
	display: flex;
	align-items: center;
	background-color:#fff;
	width:240px;
	height:100px;	
	font-weight:bold;
	box-shadow: 1px 1px 1.5px -1px rgba(0,0,0,0.2);
}
ul.products-menu li a:hover
{
	opacity:0.7;
}
ul.products-menu li a img {
	margin:20px 18px;
	vertical-align: middle;
}
ul.products-menu li a span {
	display: inline-block;
	padding-right:10px;
	text-align: left;
}
ul.products-menu li a.cate-link-btn {
	position: relative;
	justify-content: center;
	background-color: #213783;
	color: #fff;
	font-weight:normal;
	text-align: center;
	text-decoration: none;
	transition: all .2s;
}
ul.products-menu li a.cate-link-btn::after {
	position: absolute;
	top: 50%;
	right: 1em;
	content: '';
	margin-top: -5px;
	border: 7px solid transparent;
	border-top-width: 5px;
	border-bottom-width: 5px;
	border-left-color: #fff;
	transition: all .2s;
}
ul.products-menu li a.cate-link-btn:hover {
	background-color: #fff;
	color: #213783;
	opacity:1;
}
ul.products-menu li a.cate-link-btn:hover::after {
	border-left-color: #213783;
	opacity:1;
}
@media screen and (max-width: 767px) {

    ul.products-menu {
        width:98%;
        height: 350px;
        margin:0 auto;
    }
    ul.products-menu li {
        float:left;
        width:50%;
        margin: 10px auto 0;
    }
    ul.products-menu li a {
        display: flex;
        align-items: center;
        background-color:#fff;
        width:90%;
        height:70px;	
        font-weight:bold;
        box-shadow: 1px 1px 1.5px -1px rgba(0,0,0,0.2);
        margin:0 auto;
    }
    ul.products-menu li a:hover {
        opacity:0.7;
    }
    ul.products-menu li a img {
        width:40px;
        margin:10px 8px;
        vertical-align: middle;
    }
    ul.products-menu li a span {
        display: inline-block;
        padding-right:10px;
    }
}
/* TOP 製品カテゴリ一覧 レスポンシブ対応有 終わり*/

/*footer*/
ul.footer-nav {
width:100%;
margin:0 auto;
justify-content: center;
align-content: space-around;
}
ul.footer-nav li {
position: relative;
display: inline-block;
margin:0 20px;
}
ul.footer-nav li::after {
display: block;
content: '';
position: absolute;
top: .7em;
left: -1.2em;
width: 4px;
height: 4px;
border-right: 1px solid #ddd;
border-bottom: 1px solid #ddd;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
ul.footer-nav a {
color:#fff;
}
ul.footer-nav li a:hover {
text-decoration: underline;
}
@media screen and (max-width: 767px){
  ul.footer-nav {
    width:100%;
  }
  ul.footer-nav li {
      float:left;
      width:50%;
      position: relative;
      display: inline-block;
      height:70px;
      line-height:70px;
      border-bottom:1px #ccc solid;
      border-right:1px #ccc solid;
      margin: 0;
  }
  ul.footer-nav li::after {
      position: absolute;
      top: 50%;
      right: 1.5em;
      content: '';
      margin-top: -5px;
      border: 7px solid transparent;
      border-top-width: 5px;
      border-bottom-width: 5px;
      border-left-color: #fff;
  
  
       left: unset; 
       width: unset; 
       height: unset;
       border-right: unset; 
       -webkit-transform: unset; 
       transform: unset; 
  }
  ul.footer-nav li a {
      text-align: left;
      font-size:14px;
      padding:0 0 0 20px;
      display: block;
  }
}
.footer-sns a {
display: inline-block;
height: 45px;
width: 45px;
text-align: center;
text-decoration: none;
overflow: hidden;
border-radius: 50%;
background-color:#fff;
margin:0 4px;
}
.footer-sns a i{
font-size: 26px;
line-height: 45px;
-webkit-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
background-position: bottom;
color:#213783;
}
.footer-sns a:hover i{
-webkit-transform:rotateY(-360deg);
transform:rotateY(-360deg);
}
.footer-sns a:active{
box-shadow: none;
}
/*footer 終わり*/

/* slick(カルーセルスライダー)カスタム */
/*前後ボタン位置調整*/
.slider-prev {
    left: 20px;
}
.slider-next {
    right: 20px;
}

/*前後ボタン設定*/
.slider-arrow {
    position: absolute;
    top: 50%;
    margin-top: -18px;
    color: #213783;
    font-size: 32px;
    cursor: pointer;
    z-index: 10;
}

/* 中央以外の画像を半透明表示 */
.slide-transparent .slick-slide:not(.slick-center) {
    filter: opacity(50%);
    transition: 0.2s linear;
}

/* 中央以外の画像サイズを縮小 */
.slide-downsize .slick-slide:not(.slick-center) {
    transform: scale(0.9);
    transition: 0.2s linear;
}
.slick-slide{
    filter: opacity(100%);
    transform: scale(1);
    transition: 0.2s linear;
}

/* スマホ表示調整 */
@media screen and (max-width: 767px) {
    .slick-slide img {
        width: 90vw;
    }
}
/* slick(カルーセルスライダー)カスタム 終わり*/

/* ProductDisplay */
.btn-check:checked + .selected-border-bottom { 
	   border-bottom: solid;
}

/* ProductDisplay 終わり*/