@charset "utf-8";
/* --------------------------------
PCとスマホのヘッダー（ナビゲーションをのぞく） css 


※テンプレートはここに使い方がある
　ない場合は、毎回書き直し
-------------------------------- */

.hdr-box {
    position: fixed;
    width: 100%;
    height: 60px;
    z-index: 99;
}
.hd-inbox{
  background-color: #FFFFFF;
    width: 100%;
    height: 60px; 
    /*position: fixed;*/
}

.hd-h1{
    padding:20px 0 0 14px;
}
.hdr-logo,
.hdr-logo img{
    display: block;
    width: 222px;
    height:auto;
    width: 69.375vw;
    max-width: 297px;
    
}
#cts-wrap{
    padding-top:60px;
}

/*微調整ここから*/
@media (min-width: 310px) {.hd-h1{padding-top:19px;}}
@media (min-width: 400px) {.hd-h1{padding-top:18px;}}
/*微調整ここまで*/




@media ( min-width: 670px ) {
#cts-wrap{
    padding-top:6.25vw;
}
#container{
    position: relative;
}
#nav{
position: fixed;
width:430px;
width:calc(20vw + 288px );/*ピッタリは283px*/
top:20px;
top:calc(1.66vw + 1px );
left:240px;
left:calc(79vw - 302px );
}
.hd-inbox{
    height: 6.25vw;
}
.hd-h1 {
    padding: 1.66vw 0 0 1.66vw;
}
.hdr-logo, .hdr-logo img {
    width: 207px;/*670の時*/
    width: 31vw;
    height: auto;
    max-width: none;
}
#nav a{
color: #263A58;
font-size: 11px;/*670の時*/
font-size: 1.45vw;
font-size: calc(0.8vw + 5.3px );
font-weight:500;
position: relative;
text-align: center;
line-height:2em;
}


.pnav1{width:73px;/*670の時*/width: calc(3.2vw + 50px );}
.pnav2{width:114px;/*670の時*/width: calc(6.4vw + 72px );}
.pnav3{width:52px;/*670の時*/width: calc(1.6vw + 41px );}
.pnav4{width:103px;/*670の時*/width: calc(5.6vw + 70px );}
.pnav5{width:73px;/*670の時*/width: calc(3.2vw + 50px );}
#nav a::after{
content:"";
    display: block;
    width:1px;
    height:13px;/*670の時*/
    height:calc(0.8vw + 7.3px );
    background: #263A58;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transform-origin:center;/*right bottom center*/
    transform-origin:center;
    position: absolute;
    top:0.4em;
    right: 0;
}

-ms-transform-origin: top left;
    -webkit-transform-origin: top left;
    transform-origin: top left;
    
    
    
@media ( min-width: 960px ){
#cts-wrap{
    padding-top:60px;
}
.hd-inbox{
    height: 60px;
}
.hd-h1 {
    padding: 17px 0 0 30px;
}
.hdr-logo, .hdr-logo img {
    width: 297px;
    height: auto;
    max-width: none;
}
#nav a{
font-size: 13px;
font-weight:500;
position: relative;
text-align: center;
}
.pnav1{width:92px; /*フォント+40px*/}
.pnav2{width:144px;}
.pnav3{width:66px;}
.pnav4{width:131px;}
.pnav5{width:92px;}
#nav a::after{
    width:1px;
    height:15px;
    /*top:3px;
    right: 0px;*/
}
#nav{
width:530px;
top:20px;
left:calc( 100% - 540px );/*ieダメかも*/

}


}/*end min-width: 960px*/
@media (min-width: 1200px) {
.hdr-logo, .hdr-logo img {
    width: 24.75vw;
}
.hd-h1 {
    padding: 1.43vw 0 0 3vw;
}
.hd-inbox {
    height: 5vw;
}
#nav a {
    font-size: calc( 0.6vw + 6px );
}
.pnav1{width:8.66vw;}
.pnav2{width:13vw;}
.pnav3{width:6.5vw;}
.pnav4{width:11.9vw;}
.pnav5{width:8.66vw;}
#nav a::after {
    height: calc( 0.8vw + 5px );
    /*top: calc( 0.1vw + 2px );*/
}
#nav {
    width: 50%;
    left: 49%;
    top: 1.66vw;
}
#cts-wrap{
    padding-top:5vw;
}
}/*end min-width: 1200px*/

@media (min-width: 1700px) {
.hdr-logo, .hdr-logo img {
    width: 420px;
}
.hd-h1 {
    padding: 24px 0 0 51px;
}
.hd-inbox {
    height: 85px;
}
#nav a {
    font-size: 16px;
}
.pnav1{width:147px;}
.pnav2{width:221px;}
.pnav3{width:110px;}
.pnav4{width:202px;}
.pnav5{width:147px;}
#nav a::after {
    height: 18px;
    /*top: 4px;*/
}
#nav {
    width: 842px;
    left: calc( 100% - 845px );
    top: 28px;
}
#cts-wrap{
    padding-top:85px;
}
}/*end min-width: 1700px*/