@charset "utf-8";

/*------------------------------
     catalog Layout 
	created: 2019.07.01 
	updated: 2025.06.16
------------------------------*/
#wrapper,
header,
footer { max-width: 1250px; }

#contents {
	background-color: #E8E8E8;
	padding: 0;
    font-size: 0.95rem;
}

#titles {
	background-color: #262626;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
    padding: 20px 30px;
}

#titles h1 {
    display: flex;
    align-items: center;
    column-gap: 1rem;
}

#titles #rightNavi ul {
    display: flex;
    align-items: bottom;
    column-gap: 20px;
}

#titles #rightNavi ul li,
#titles #rightNavi ul li a { display: block; height: 95px; text-decoration: none;}

#titles #rightNavi ul li#toHome { background: url("../../images/Top.png") no-repeat top center;}

#titles #rightNavi ul li#toRandD { 
    background: url("../../../R-D_support/images/logo.png") no-repeat top center;
    background-size: 60px 60px;
    text-align: center;
}

#titles #rightNavi ul li#toRandD a {
    display: flex;
    align-items: flex-end;
}

#breadcrumbs { padding: 10px 30px;}

#breadcrumbs a {
    color: black;
    text-decoration: none;
}

#breadcrumbs a:hover,
#breadcrumbs a:active {
    color:  firebrick;
    text-decoration: underline;
}

#article { padding: 50px; }

#article a:hover,
#article a:active { text-decoration: none; }

.section {
	margin-bottom: 50px;
}

.first {
	margin-top: 30px;
}

.t_styles {
	height: 23px;
	margin-bottom: 20px;
}

/* notes */
#notes {
    display:  flex;
    align-items: center;
    column-gap: 50px;
	margin-bottom: 50px;
}

#notes dl {
	display:  flex;
    align-items: center;
    column-gap: 20px;
}

#notes dl { margin-right: 30px; }

#notes dt {
	font-weight: bold;
	padding: 5px 20px;
	border-radius: 5px;
	box-shadow: 2px 2px 4px 0 gray;
    display: flex;
    justify-content: center;
    align-items: center;
}

#notes dt#catalog {
	background-color: mediumblue;
	color: whitesmoke;
}

#notes dt#pamphlet {
	background-color: orangered;
	color: whitesmoke;
}

#notes dd {
	padding-top: 5px;
}

#notes p.allCatalog {
	margin: 50px 0 0 10px;
}

#notes p.allCatalog a {
	color: dodgerblue;
	line-height: 1.5;
	text-decoration: none;
}

#notes p.allCatalog a:hover {
	text-decoration: underline;
}

/* box */
#t01 { background: url(../images/ttl_ca01.png) no-repeat 10px #262626;}

#t02 { background: url(../images/ttl_ca02.png) no-repeat 10px #262626;}

#t03 { background: url(../images/ttl_ca03.png) no-repeat 10px #262626;}

#t04 { background: url(../images/ttl_ca04.png) no-repeat 10px #262626;}

#t05 { background: url("../images/ttl_ca05_2309.png") no-repeat 10px #262626;}

.container {
    display: flex;
    flex-wrap: wrap;
    gap: 30px 25px;
}

.container .box a {
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
}

.box img {
	box-shadow: 2px 2px 4px 0 gray;
	height: 260px;
	display: block;
}

.box p {
	padding: 5px 10px;
	border-radius: 5px;
	box-shadow: 2px 2px 4px 0 gray;
	line-height: 1.5;
	text-align: center;
}

.box a {
	text-decoration: none;
}

.box a.no p {
	display: block;
	color: whitesmoke;
	background-color: orangered;
}

.box a.ok p {
	display: block;
	color: whitesmoke;
	background-color: mediumblue;
}

.box a.no:hover p {
	background-color: #EF521F;
}

.box a.ok:hover p {
	background-color: #0618DF;
}


@media only screen and  (max-width: 680px){
    #titles {
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 20px;
    }
    
    #titles #rightNavi { margin-left: auto; }
    
    #notes {
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 30px;
    }
    
    #article { padding: 50px 30px; }
}