@charset "utf-8";

/* ============================================================
 ATENブランドサイト2025ver
============================================================ */
body{margin:0;}

#aten{margin:0;}

#aten_header > div{
	height: 155px;
	display: table;
	overflow: hidden;
}

#aten_header > div > h1,
#aten_header > div > div,
#aten_header > div > dl{	
	display: table-cell;
	vertical-align: middle;
}

#aten_header > div > h1{
	width: 140px;
	overflow: hidden;
}


#aten_header > div > h1 a,
#aten_header > div > h1 a img,
#aten_header > div > div > div h2 a,
#aten_header > div > div > div h2 a img{
	overflow: hidden;
	display: block;
	height:auto;
}

#aten_header > div > h1 a{
}

#aten_header > div > div > div{
	margin-left:5%;
	border-left: 2px solid #cccccc;
	padding-left:4%;
}

#aten_header > div > div > div h2{
	width: 240px;
	margin: 0;
}
#aten_header > div > div > div p{
	font-size: 0.8em;
	margin: 0 0 0px;
}

@media only screen and (max-width: 1150px) {
#aten_header > div > h1{width: 110px;}
#aten_header > div > div > div h2{width: 180px;}
#aten_header > div > div > div p{font-size: 0.6em;}
}
@media only screen and (max-width: 1000px) {
#aten_header > div > h1{width: 80px;}
#aten_header > div > div > div h2{width: 160px;}
#aten_header > div > div > div p{display: none;}
}

.aten_header_support{
	width: 220px;
}
.aten_header_support > div {
	margin-right: 20px;
}

.aten_header_support dt{
	color:  #063a6c;
	font-weight: bold;
	margin-bottom: 10px;
	padding-bottom: 10px;
	font-size: 0.9em;
	border-bottom: 1px solid #cccccc;
}

.aten_header_support dd {
	margin: 0;
}
.aten_header_support dd a{
	display: inline-block;
	text-align: center;
	width: 100%;
	background-color: #164674;
	padding: 6px 0 7px;
	text-decoration: none;
	color: #ffffff;
	font-weight: bold;
	font-size: 0.9em;
	transition-property: background-color;
	transition-duration: 0.7s;
}
.aten_header_support dd a:hover{
	background-color: #7897b5;
}
.aten_header_support dd a span{
	
}
.aten_header_support dd a span:before{
	display: inline-block;
	content: '>';
	margin: 0;
	padding: 0 0.7em 0 0px;
	transform: scale(0.5, 1);
}
.aten_header_inquiry{
	width: 320px;
}

.aten_header_inquiry dt{
	color:  #063a6c;
	font-weight: bold;
	font-size: 0.9em;
	margin-bottom: 10px;
	padding-bottom: 10px;
	border-bottom: 1px solid #cccccc;
}

.aten_header_inquiry dd {
	margin: 0;
	display: table;
	width: 100%;
}

.aten_header_inquiry dd > ul,
.aten_header_inquiry dd > div{
	margin: 0;
	padding: 0;
	display: table-cell;
	list-style-type: none;
	vertical-align: bottom;
}

.aten_header_inquiry dd > ul{
	margin: 0;
	padding: 0;
	font-size: 0.7em;
}
.aten_header_inquiry dd > ul li span{
	font-weight: bold;
	color: #063a6c;
	display: inline-block;
	margin-right: 10px;
}
.aten_header_inquiry dd > div{
	width: 48%;	
	text-align: right;
}

.aten_header_inquiry dd > div a{
	display: inline-block;
	text-align: center;
	width: 100%;
	background-color: #fa9833;
	padding: 8px 0px 9px 0;
	text-decoration: none;
	color: #ffffff;
	font-size: 0.9em;
	font-weight: bold;
	transition-property: background-color;
	transition-duration: 0.7s;
}
.aten_header_inquiry dd > div a:hover{
	background-color: #dcaa77;
}
.aten_header_inquiry dd > div a > span >span{
	display: inline-block;
	vertical-align: middle;
}
.aten_header_inquiry dd > div a > span:before{
	display: inline-block;
	content: '>';
	margin: 0;
	padding: 0 0.7em 0 0px;
	transform: scale(0.5, 1);
}

@media only screen and (max-width: 1000px) {
.aten_header_support{width: 180px;}
.aten_header_support dt{font-size: 0.8em;}
.aten_header_support dd a{font-size: 0.7em;}
.aten_header_inquiry{width: 180px;}
.aten_header_inquiry dt{font-size: 0.8em;}
.aten_header_inquiry dd > ul{display: none;}
.aten_header_inquiry dd > div a{padding: 9px 0px 10px 0; font-size: 0.7em;}
}

/* menu */

#aten_header > div > .menu_sp{
	display: none;
}

#aten_header nav{
	margin: 0;
	padding: 0;
	width: 100%;
	background-color: #164674;
}

#aten_header nav ul{
	list-style: none;
}

#aten_header nav ul li{
	display: inline-block;
	text-align: center;
	text-decoration: none;
}

#aten_header nav ul li a{
	display: block;
	text-align: center;
	padding: 11px 1.2em 13px;	
	color: #ffffff;
	text-decoration: none;
	font-weight: bold;
	transition-property: background-color;
	transition-duration: 0.7s;
}

#aten_header nav ul li a:hover{
	background-color: #fb971b;
}

@media only screen and (max-width: 835px) {
#aten_header > div{position: fixed;top: 0; height: 70px; background-color: #ffffff;}
#aten_header > div > dl.aten_header_support,
#aten_header > div > dl.aten_header_inquiry{display: none;}	
#aten_header nav{
	width:100%;
	overflow:hidden;
	border-bottom:#063a6c solid 10px;
	margin:0 0;
	position: fixed;top: 70px; background-color: #ffffff;}	
#aten_header nav .menu-icon {
  width: 40px;
  height: 30px;
  position: fixed; /* ← fixedにして常に左上固定 */
  top: 17px;
  right: 20px;
  cursor: pointer;
  z-index: 3;
  display: inline-block;}
#aten_header nav .menu-icon span {
  display: block;
  height: 4px;
  margin: 6px 0;
  background: #333;
  border-radius: 2px;
  transition: 0.4s;}
/* ハンバーガーがXに変形 */
#menu-toggle:checked + .menu-icon span:nth-child(1) {
  transform: translateY(10px) rotate(45deg);}
#menu-toggle:checked + .menu-icon span:nth-child(2) {
  opacity: 0;}
#menu-toggle:checked + .menu-icon span:nth-child(3) {
  transform: translateY(-10px) rotate(-45deg);}
#aten_header nav > ul{
	overflow:hidden;
	-webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;}
input[type="checkbox"]#menu-toggle{
    display: none;}
input[type="checkbox"]#menu-toggle ~ ul{
    height: 0;
    overflow: hidden;}
input[type="checkbox"]#menu-toggle:checked ~ ul{
    height: 230px;
	padding: 0;
	background-color: #f7f7f7;}
#aten_header nav > ul li{
	overflow:hidden;
	width:100%;
	margin:0 0px 0px;
	padding: 0;
	border-top:1px solid #cccccc;}
#aten_header nav > ul li a{
	display:block;
	width:100%;
	height:40px;
	margin:0 0px 0px;
	padding: 0;
	font-size:1em;
	line-height: 2.8em;
	font-weight: bold;
	color: #333333;}
#aten_header nav > ul li a:hover{
	color: #333333;
	background-color: #fafafa;}		
#aten_header + section,
#aten_header + div,
#aten_header + nav{
	margin-top: 80px;}	
}
/*トップ戻るボタン*/
#pagetop {  
	opacity: 0;  
	transition: opacity 0.5s ease-in-out; /* フェードインの速さとタイミング */  
	pointer-events: none; /* 非表示中はクリックを無効にする */
	position: fixed;
	right: 10px;
	bottom: 20px;
	text-align: center;
	background-color: #fa9833;
	color: #ffffff;
	font-size: 2.2em;
	display: block;	
	border-radius: 0px;
	border: none;
	padding: 0px 45px 6px;
	transform: rotate(270deg) scale(0.5, 1);
	cursor: pointer;
}

#pagetop.visible {
	opacity: 1;
	pointer-events: auto; /* 表示されたらクリックを有効にする */
}

/* Footer */
#aten_footer{
	width: 100%;
	overflow: hidden;
	background-color: #164674;	
	padding: 0px 0;
}

#aten_footer small{
	width: 100%;
	color: #ffffff;
	display: block;
	text-align: center;
	background-color: #09345c;	
	padding: 12px 0;
}

ul.footer_menu{
	display: grid;
	grid-template-columns: 25% 25% 25% 25%;
	grid-template-rows: auto auto auto auto;
	gap: 30px 12px;
	padding: 40px 10px 30px;
	background-color: #164674;
	list-style-type: none;
}

ul.footer_menu li{
	overflow: hidden;
	padding: 0;
}
ul.footer_menu li > a,
ul.footer_menu li > dl > dt > a{
	text-decoration: none;
	font-weight: bold;
	color: #ffffff;
	overflow: hidden;
}

ul.footer_menu li > dl > dd{
	margin-left: 2em;
	margin-top: 8px;
}

ul.footer_menu li > dl > dd > a{
	text-decoration: none;
	color: #dddddd;
}

ul.footer_menu li > a:before,
ul.footer_menu li > dl > dt > a:before{
	display: inline-block;
	content: '>';
	transform: scale(0.5, 1);
	margin: 0;
	padding: 0 0.7em 0 0px;	
}

ul.footer_menu li:nth-child(1){grid-row:1 / 2;grid-column:1 / 2;}
ul.footer_menu li:nth-child(2){grid-row:2 / 3;grid-column:1 / 2;}
ul.footer_menu li:nth-child(3){grid-row:3 / 5;grid-column:1 / 2;}
ul.footer_menu li:nth-child(4){grid-row:1 / 2;grid-column:2 / 3;}
ul.footer_menu li:nth-child(5){grid-row:2 / 3;grid-column:2 / 3;}
ul.footer_menu li:nth-child(6){grid-row:3 / 4;grid-column:2 / 3;}
ul.footer_menu li:nth-child(7){grid-row:1 / 2;grid-column:3 / 4;}
ul.footer_menu li:nth-child(8){grid-row:2 / 3;grid-column:3 / 4;}
ul.footer_menu li:nth-child(9){grid-row:1 / 2;grid-column:4 / 5;}
ul.footer_menu li:nth-child(10){grid-row:2 / 3;grid-column:4 / 5;}
ul.footer_menu li:nth-child(11){grid-row:3 / 4;grid-column:4 / 5;}

@media only screen and (max-width: 835px) {
ul.footer_menu{	grid-template-columns: 33% 33% 33%;padding-left:0px;padding-right:0px;}
ul.footer_menu li:nth-child(7){grid-row:4 / 5;grid-column:2 / 3;}
ul.footer_menu li:nth-child(8){grid-row:1 / 2;grid-column:3 / 4;}
ul.footer_menu li:nth-child(9){grid-row:2 / 3;grid-column:3 / 4;}
ul.footer_menu li:nth-child(10){grid-row:3 / 4;grid-column:3 / 4;}
ul.footer_menu li:nth-child(11){grid-row:4 / 5;grid-column:3 / 4;}	
}

/* toppage メイン画像*/
#aten_top h3 {
	width: 100%;
	margin: 0;
	background-image: url("https://www.princeton.co.jp/themes/princeton/images/pagetitle/aten-kvm-video01.jpg");
	background-position: center;
	background-size: 100%;
}
#aten_top h3 > span {
	width: 1480px;	
	margin: 0 auto;
	display: table;	
}
#aten_top h3 > span > span{
	padding: 0 40px 0 40px;
	height: 300px;
	vertical-align: middle;
	display: table-cell;
	line-height: 1.7em;
	color: #ffffff;
	font-size: 1.1em;	
}
@media only screen and (max-width: 1520px) {
#aten_top h3 > span {width: 99%;}
#aten_top h3 > span > span{padding: 0 40px 0 60px;}
}
@media only screen and (max-width: 1200px) {
#aten_top h3 > span > span{height: 250px;}
}
@media only screen and (max-width: 1000px) {
#aten_top h3 > span > span{height: 220px; padding: 0 50px 0 50px; font-size: 1.0em;}
}
@media only screen and (max-width: 650px) {
#aten_top h3 > span > span{height: 150px; padding: 0 25px 0 25px; font-size: 0.8em;}
}

/*ATEN PRINCETON強み*/
.aten_princeton{
	display: grid;
	grid-template-columns: 49% 2% 49%;
  place-content: center;
  place-items: center;
	align-items: center;
}

.aten_princeton::before{	
	grid-column: 2 / 3;
	grid-row: 1 / 2;
    content:"×";
	font-size: 3em;
}

.aten_princeton section{
	width: 90%;
	height: 94%;
	margin: 10px 0;
	box-shadow: 0 0 8px #cccccc;	
}

.aten_princeton section:first-child{
	grid-column: 1 / 2;
	grid-row: 1 / 2;
}
.aten_princeton section:last-child{
	grid-column: 3 / 4;
	grid-row: 1 / 2;
}
.aten_princeton section:first-child h4,
.aten_princeton section:last-child h4{
	text-align: center;
}
.aten_princeton section:first-child h4 img{
	width: 140px;
}
.aten_princeton section:last-child h4 img{
	width: 240px;
}

.aten_princeton section dl dt{
	color: #ffffff;
	text-align: center;
	font-size: 1.3em;
	padding: 6px 0 8px;
	font-weight: bold;
}
.aten_princeton section:first-child dl dt{
	background-color: #164674;
}
.aten_princeton section:last-child dl dt{
	background-color: #f5a100;
}
.aten_princeton section dl dd{
	margin: 20px 0 0 0;
	padding:0 5% 0;
}
.aten_princeton section:first-child dl dd:last-child,
.aten_princeton section:last-child dl dd:last-child{
	margin-bottom: 45px;
}

@media only screen and (max-width: 835px) {
	.aten_princeton{grid-template-columns: 100%;}
	.aten_princeton section:first-child{grid-column: 1 / 2;	grid-row: 1 / 2;}
	.aten_princeton::before{grid-column: 1 / 2;	grid-row: 2 / 3;}
	.aten_princeton section:last-child{	grid-column: 1 / 2;	grid-row: 3 / 4;}
	.aten_princeton section dl dt{font-size: 1.1em;}
	.aten_princeton section dl dd{font-size: 0.9em;}
}

/* サポート情報 */

.aten_saport {
	background-color: #e0e8ef;
	width: 100%;
	padding: 50px 0;
}
.aten_saport h4{
	text-align: center;
	width: 100%;
	font-size: 1.4em;
	margin-top: 0;
}

.aten_saport dl{
	display: table;
}
.aten_saport dl > div{
	display: table-cell;
}
.aten_saport dl > div:first-child,
.aten_saport dl > div:last-child{
	background-position: center;
	background-size: 100%;
}

.aten_saport dl > div:first-child{
	background-image: url("../images/index/aten_top_support_p01.jpg");
}
.aten_saport dl > div:last-child{
	background-image: url("../images/index/aten_top_support_p02.jpg");
}	
.aten_saport dl > div > dt{
	text-align: center
}

.aten_saport dl > div > dt > a{;
	font-size: 1.3em;
	font-weight: bold;
	display: block;
	padding:45px 0 130px;
	color: #ffffff;
	text-decoration: none;
}

.aten_saport dl > div > dd > a{
	display: block;
	padding:0px 30px 50px;
	color: #ffffff;
	text-decoration: none;
}
.aten_saport dl > div > dd{
	margin-inline-start:0;
}
@media only screen and (max-width: 1000px) {
	.aten_saport dl > div:first-child,.aten_saport dl > div:last-child{	background-size: auto 100%;}
}

@media only screen and (max-width: 835px) {
	.aten_saport h4{font-size: 1.2em;}
	.aten_saport dl > div:first-child,.aten_saport dl > div:last-child{	background-size: auto 100%;}
	.aten_saport dl > div > dt > a{	padding:30px 0 100px;font-size: 1.1em;}
	.aten_saport dl > div > dd > a{	padding:0px 30px 30px;font-size: 0.9em;}
}

/*活用情報*/
.aten_product_info{
}

.aten_product_info h4{
	text-align: center;
	width: 100%;
	font-size: 1.4em;
	margin-top: 0;
	color: #164674;
}
.aten_product_info dl{
	display: grid;
	grid-template-columns: 32% 32% 32%;
 column-gap: 2%;
  place-content: center;
  place-items: center;
	align-items: center;
}
.aten_product_info dl > div{
	background-color: #f8f7f7;
	box-shadow: 2px 2px 5px #cccccc;
	height: 100%;
}

.aten_product_info dl > div > dt{
	text-align: center;
}
.aten_product_info dl > div > dd{
	margin-inline-start:0;
}
.aten_product_info dl > div > dt a,
.aten_product_info dl > div > dd a{
	text-decoration: none;
	color:#333333;
	display: block;
}
.aten_product_info dl > div > dt a{
	padding: 25px 5px;
	font-weight: bold;
	font-size: 1.4em;
}
.aten_product_info dl > div > dd a{
	text-decoration: none;
	padding: 0 30px 30px;
}
.aten_product_info dl > div > dd a img{
	display: block;
	margin: 0 auto 30px;
}

.aten_product_info dl > div:nth-child(1) > dd a img{
	width: 45%;
}

.aten_product_info dl > div:nth-child(2) > dd a img{
	width: 55%;
}

.aten_product_info dl > div:nth-child(3) > dd a img{
	width: 50%;
}

@media only screen and (max-width: 835px) {
	.aten_product_info h4{font-size: 1.2em;}
}
/*table*/
.l-scrollContents_inner{
	overflow: auto;
}

.table {
    border: 1px solid #bcbcbc;
    border-collapse: collapse;
    width: 100%;
    margin: 1em 0 0;
}

.table th {
    text-align: left;
    vertical-align: middle;
    white-space: nowrap;
}
.table td {
    vertical-align: middle;
    text-align: center;
}
.table th, .table td {
    vertical-align: top;
    padding: 0.65em 1.3em;
}
.table th, .table td {
    border: 1px solid #bcbcbc;
    line-height: 1.5;
}

.table-bordered th {
    background-color: #eeeeee !important;
}

/*パンくず*/
.l-breadcrumbs {
    /*background: rgba(0,0,0,0.25);*/
	background-color: #ffffff;
}

.l-breadcrumbs ol {
    max-width: 1440px;
    padding: 0 40px;
    padding: 0 var(--container-space);
    margin: 0 auto;
    box-sizing: content-box;
    display: flex;
    list-style: none;
    height: 38px;
    align-items: center;
    flex-wrap: wrap;
}

@media screen and (max-width: 835px) {
    .l-breadcrumbs ol {
        padding:10px 3px 0;
    }
}

@media screen and (max-width: 835px) {
    .l-breadcrumbs ol {
        height:24px;
        flex-wrap: nowrap;
        white-space: nowrap;
        overflow-x: auto;
    }
}

.l-breadcrumbs li {
    font-size: 0.9rem;
	color: #333;
    font-family: "Noto Sans JP", sans-serif;
}

.l-breadcrumbs li:first-child a {
    display: inline-block;
    overflow: hidden;
    text-indent: 150%;
    width: 20px;
    height: 20px;
    background: #000;
    vertical-align: text-top;
	margin-top: 0px;
    background: url(https://www.princeton.co.jp/themes/princeton/images/icon/ic_home.svg) no-repeat;
}
@media screen and (max-width: 835px) {
    .l-breadcrumbs li:first-child a {
        width:16px;
        height: 16px;
    }
}

@media screen and (max-width: 835px) {
    .l-breadcrumbs li {font-size:0.8rem;}
    .l-breadcrumbs li:last-child {padding-right: 20px;}
}

.l-breadcrumbs li:not(:first-child)::before {
    content: ">";
    display: inline-block;
    padding: 0 0.5em 0 0.65em;
}

.l-breadcrumbs a {
	color: #333;	
}

/*headline調整*/
.aten_headline{
	width: 99.7%;
}

/*保証・保守サービス*/
.afterservice_2block{
	width: 100%;
	overflow: hidden;
  display: flex;
  flex-wrap: wrap;
	 justify-content: center;
	  gap: 0 3%;/*縦、横の指定*/

}

.afterservice_2block section{
	width: 38%;
	overflow: hidden;
	box-sizing: border-box;
	border: 2px solid #dddddd;
}

@media only screen and (max-width: 835px) {
.afterservice_2block{gap: 0 2%;}
.afterservice_2block section{width: 49%;}
}

.afterservice_2block section a{
	display: block;
	height: 100%;
	overflow: hidden;
	text-decoration: none;
}

.afterservice_2block section a h4{
	width: 100%;
	text-align: center;
	text-decoration: none;
	color: #444444;
	font-size: 1.2em;
}
.afterservice_2block section a p{
	width: 100%;
	text-decoration: none;
	color: #555555;
	text-align: center;
	box-sizing: border-box;
}
.afterservice_2block section a p:nth-of-type(2){
	text-align: left;
	padding: 5px 25px;
}
.afterservice_2block section a p img{
	text-align: center;
	text-decoration: none;
	width: 90%;
	color: #555555;
}
.afterservice_2block section a p:last-of-type{
	text-align: right;
	text-decoration: underline;
}
.afterservice_2block section a p:last-of-type:after{
	display: inline-block;
	content: '>';
	transform: scale(0.5, 1);
	margin: 0;
	padding: 0 1.2em 0 0px;	
}