@charset "utf-8";

/* common
-------------------------------------------------------------------------------------------------------- */
#pageNav .cs1-nav { display: flex; height: 100%;}
#pageNav .cs1-nav ul { font-size: 0; display: flex; height: 100%; margin-top: 10px;}
#pageNav .cs1-nav ul li { display: flex;}
#pageNav .cs1-nav ul li > a { font-size: 12px; display: flex; flex-direction: column; align-items: center; border-left: 1px solid #c5c5c5; min-width: 60px; padding: 16px 8px 14px;}
#pageNav .cs1-nav ul li:last-child > a { border-right: 1px solid #c5c5c5;}
#pageNav .cs1-nav ul li > a img { max-width: 30px; margin-bottom: 0.5rem;}
#pageNav .cs1-nav ul li.act > a { border-bottom: 0; background-color: #e0eaf0; }

#pageNav .cs1-page-ttl { font-family: "ヒラギノ角ゴ Pro W6", "Hiragino Kaku Gothic Pro", sans-serif; margin-top: 10px; font-size: 34px;}
.cs1-copy { font-size: 14px;}
#pageNav ul { float: none; padding-top: 0;}

.cs1-inner { padding:0 20px; margin:0 auto; width:960px; display: flex; justify-content: space-between; align-items: center;}
@media screen and (max-width: 480px) {
#pageNav ul li a  { border-bottom: none;}
#pageNav .cs1-nav ul li > a img { margin-right: 10px; margin-bottom: 0;} 
#pageNav { border-bottom: none;}
#pageNav .cs1-nav ul { flex-wrap: wrap; border: 1px solid #c5c5c5;}
#pageNav .cs1-nav ul li { width: 50%;}
#pageNav .cs1-nav ul li:first-child > a , #pageNav .cs1-nav ul li:nth-child(3) > a { border-left: none;}
#pageNav .cs1-nav ul li:first-child > a , #pageNav .cs1-nav ul li:nth-child(2) > a { border-bottom: 1px solid #c5c5c5;}
#pageNav .cs1-nav ul li:last-child > a { border-right: none;}
#pageNav .cs1-nav ul li > a { width: 100%; flex-direction: row; font-size: 12px; padding: 5px 10px; text-align: left; letter-spacing: -0.5px; min-height: 45px; line-height: 1.15;}
.cs1-inner { padding:0 10px; width:auto; flex-direction: column;}
#pageNav .cs1-page-ttl { font-size: 30px;}
.cs1-inner { align-items: flex-start;}
}



/* cs1
-------------------------------------------------------------------------------------------------------- */

#pageNav .cs1-page-ttl._sub { margin-top: 0; margin-bottom: 5px; letter-spacing: -1px;}
.cs1-about .prdTitle { margin-bottom: 60px; text-align: center;}
.cs1-about { margin-top: 100px;}
.cs1-block { border: 6px solid #d2d2d2; padding: 2rem; display: flex; justify-content: space-between; margin-bottom: 40px; pointer-events: none; transition: 0.5s ;}
.cs1-block:hover { border: 6px solid #337099;}
.cs1-ttl { font-size: 28px; color: #326F98; font-weight: bold; margin-bottom: 1rem;}
.cs1-block .r-box, .l-box { width: 48%;}
.cs1-block .r-box { max-width: 418px;}
.cs1-block .l-box { display: flex; flex-direction: column;}
.cs1-block .l-box .linkBtn { margin-top: auto;}
#idx #about .topBox .cs1-block .txt {  margin: 0; margin-bottom: 1rem;}

.cs1-block .linkBtn { margin: 0; max-width: 200px;}
.cs1-block .linkBtn a { font-size: 14px; padding: 10px 0 10px; pointer-events: auto;}
.pic-box a { pointer-events: auto;}

@media screen and (max-width: 480px) {
#about { margin-top: 20px;}
.cs1-about { margin-top: 50px;}
.cs1-about .prdTitle { margin-bottom: 30px;}
.cs1-block { flex-direction: column-reverse; margin-bottom: 20px;}
.cs1-block .r-box, .l-box { width: 100%;}
.cs1-ttl { font-size: 18px; margin-top: 10px;}
}

.cs1-block._sub { border: 0; padding: 0;}
.cs1-block._sub .cs1-ttl { font-size: 24px;}
@media screen and (max-width: 480px) {
.cs1-block._sub .cs1-ttl { font-size: 18px;}   
}


