@charset 'utf-8';
body {
    background-color:#fff;
    padding-top: 120px;
}
.page-title {
    margin:2rem 0;
}

.box-anchor-clear h4 {
    margin: 0;
    padding:0 0 .5rem 0;
    background-color:#fff;
    line-height: 1.5;
    width: inherit;
}

 h5 {
    font-size: 110%;
    font-weight: bold;
    margin-bottom: .5rem;
}
h6 {
    font-size: 120%;
    margin-bottom: .5rem;
}
.panel {
    border:#fff;
    -webkit-box-shadow: none;
    box-shadow: none;
}


.panel-main>.panel-heading {
    background-color: #808080;
    border-color: #808080;
    color: #fff;
    font-size: 22px;
    padding: 1rem;
}
/*New Products support page */
        .productFront {
            background-color: #f5f5f5;
        }
        .productTop {
            margin-top: 2rem;
            margin-bottom: 2rem;
            padding-left: 50px;
            background-color: #f5f5f5;
        }
        .productTop h5 {
            font-size: 1.25rem;
            margin-bottom: 10px;
        }
       .products-tabcontent {
        margin-top: 6rem;
       }
       .productContainer {
        margin-top: 3rem;
        margin-bottom: 6rem;
        margin-inline: 20px;
       }
        .productContainer .nav > li > a {
            font-size: 18px;
        }
        /*.productContainer .nav > li.active > a {
            font-weight: bold;
        }*/


        @media (max-width:960px) {
            .tab-pane {
            margin-left:0;
            margin-right:0;
            }
            .productContainer {
                margin-inline: 0;
            }
            .products-tabcontent {
            margin-top: 2rem;
            }
            .productTop {
                padding-left: 0;
            }
        }
        @media (min-width: 768px) {
            .products-tabcontent {
                padding-inline: 2rem;
            }
        }
        .products-tabcontent .tab-pane h3 {
            margin: 50px 0 2rem 0;
            font-size: 2rem;
            margin-bottom: 2rem;
            padding-top: 0;
            text-align: center;
        }
        .products-tabcontent .tab-pane h3.siteTop-title-sub {
            font-size: 23px;
            margin-bottom: 0;
        }
        .products-tabcontent p{
            margin-bottom: 1rem;
        }
        .products-tabcontent h4 {
            font-size: 120%;
            margin-bottom: 1rem;
        }
        @media (max-width: 767px) {
            .productContainer .nav-tabs > li {
                float: none;
                width: 100%;
            }
            .productContainer .nav-tabs > li > a {
                border-radius: 4px; 
                margin-bottom: 2px; 
            }
        }
        .productContainer .material-symbols-outlined {
            font-size: 16px;
        }

/* アコーディオン */
summary {
	cursor: pointer;
	transition: 0.2s;
	padding: 6px;
	border-radius: 6px;

	/* ホバー時のスタイル */
	&:hover {
		cursor: pointer;
		text-decoration: underline;
	}

	/* タブフォーカス時のスタイル */
	&:focus-visible {
		text-decoration: underline;
	}
}

.refer summary {
    color:#0078d7;
    font-size: 20px;
    font-weight: bold;
}

.refer summary .material-symbols-outlined {
    font-size: 24px;
    vertical-align: bottom;
}

.i-arrow {
	&:before {
		position: absolute;
		content: '';
		width: 18px;
		height: 18px;
		border-radius: 50%;
        top:3rem;
        left:0;
		margin-top: -7px;
	}
	&:after {
		position: absolute;
		content: '';
		width: 12px;
		height: 12px;
		border-top: solid 1px #000;
		border-right: solid 1px #000;
		top: 288px;
		left: 55px;
		transform: rotate(45deg);
		margin-top: -1px;
	}
}
/* オープン時 */
.details[open] .i-arrow {
	&:after {
		transform: rotate(135deg);
		left: 55px;
        top:285px;
	}
}

/*タイルスタイル*/
    .tile:hover, .tile:focus, .tile.active {
            box-shadow: 0px 0px 10px #9A9DA9;
            border-color: #9A9DA9;
            cursor: pointer;
        }

        .tile {
            overflow: hidden;
            border: solid 1px #ccc;
            height: 120px;
            margin-bottom: 30px;
        }
        .tile a:hover, .tile a:focus, .tile a:active {
            text-decoration: none;
        }
        .tile-icon {
            height: 64px;
        display: flex;
        justify-content: center;
        align-items: center;
        }
        .tile .material-symbols-outlined {
            padding-top: 23px;
            font-size: 38px;
        }
        .tile-comment {
            height: 56px;
            margin-top: auto;
            width: 100%;
            color: #333;
            display: table;
            text-align: center;
            font-weight: bold;
        }
        .tile-comment span {
            display: table-cell;
            vertical-align: middle;
        }
        .tile:hover {
            cursor: pointer;
        }
    /*imageアイコンタイル*/    
        .tile-icon > div {
        display: flex;
        justify-content: center;
        align-items: flex-end;
        height: 120px;
        }

/*表示切替*/
        .page {
        display: none;
        opacity: 0;
        transition: opacity 0.5s;
        }
        .page.is-active {
        display: block;
        opacity: 1;
        @starting-style {
            opacity: 0;
        }
    }

/* ======================
   page base
====================== 
.page-container {
  position: relative;
}

.page {
  inset: 0;

  opacity: 0;
  transform: translateY(0);

  pointer-events: none;

  transition:
    opacity .60s ease,
    transform .60s ease,
    visibility .60s;
}

*/
/* ======================
   active page
====================== 

.page.is-active {
  position:absolute;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
*/

        .back-btn {
        margin: 8px 0 1rem 2rem;
        border:none;
        color:#0066cc;
        font-weight: bold;
        background-color: #fff;
        }
        .back-btn:hover {
            text-decoration: underline;
        }



        .products-tabcontent h4 {
            font-size: 22px;
            margin-top: 2rem;
            margin-bottom: 1rem;
        }
 
    /*パンくずリスト*/
    .breadcrumb{
  font-size:14px;
  margin-bottom:20px;
}

.breadcrumb a{
  color:#0078d4;
  text-decoration:none;
}

.breadcrumb a:hover{
  text-decoration:underline;
}

.bc-sep{
  margin:0 6px;
  color:#888;
}