@charset "utf-8";

/*------------------------------------------------------------

    2021.11 common  CSS
    contents All

    Brakpoint
    PC
    @media only screen and (min-width:960px) {
    }
    Tablet
    @media only screen and (min-width:560px) {
    }

------------------------------------------------------------*/

/*------------------------------------------------------------
    ** text
------------------------------------------------------------*/
h1,
h2,
h3,
h4,
h5 {
  margin-top: 0;
  margin-bottom: 0;
  display:block;
  font-weight: normal;
}
    h1{
        font-size: 1px;
        line-height : 1em;
    }
    h2{
        font-size: 28px;
        line-height : 1.4em;
        letter-spacing : 0.13em;
    }
    h3{
        font-size: 24px;
        line-height : 1.4em;
        letter-spacing : 0.1em;
    }
    h4{
        font-size: 20px;
        line-height : 1.4em;
        letter-spacing : 0.1em;
    }
    h5{
        line-height : 1.4em;
    }
        @media screen and (min-width: 560px){
                h2{
                    font-size: 32px;
                }
                h3{
                    font-size: 28px;
                }
        }

p {
    margin-top: 0;
    margin-bottom:0;
    line-height: 1.75em;
    letter-spacing : 0.05em;
}
rt , .text_sub,.text-note,.txt_note{
    font-weight: normal;
}
rt {
    letter-spacing : 0.05em;
}
sup,sub{
      font-size: 11px;
}

.txt__read{
    text-align: center;
    line-height: 2em;
}
.txt__read+.txt__read{
    margin-top: 1em;
}
@media screen and (max-width:559px){
.txt__read{
        text-align: left;
    }
.txt__read br{
    display: none;
    }
   .txt__read .inBk{
        display: inline;
    }  
}


.txt__note{
      font-size: 13px !important;
      line-height: 1.4em;
      letter-spacing: 0;
}
.txt_red{
    color: #DD554C;
}

/*clearfix*/
.clearfix{
    position: relative;
}
.clearfix:after {
  content: "";
  clear: both;
  display: block;
}

/* new line */
.inBk{
    display: inline-block;
    font: inherit;
}

/* img */
img{
    max-width: 100%;
    height: auto;
}


/* youtube */
.youtube {
  width: 100%;
  aspect-ratio: 16 / 9;
}
.youtube iframe {
  width: 100%;
  height: 100%;
}


/* list */
.list_nomal li,
.list_dot li,
.list_disc li{
    position: relative;
    padding-left: 1em;
}
.list_dot li:before,
.list_disc li:before{
    position: absolute;
    top: .2em;
    left: 0;
    width: 1em;
    height: 1em;
    text-align: center;
    line-height: 1em;
}
.list_dot li:before{ content: "・"; }
.list_disc li:before{ content: "●"; }

.list_icon{
    padding-left:1em;
}
.list_icon li{
text-indent: -1em;
}

/* link_arrow */
.link_right{
    margin-top: .5em;
    text-align:  right !important;
}
.link_arrow{
    position: relative;
    line-height: 44px;
    color: #013a70;
}
.link_arrow span{
    display:inline-block;
    position: relative;
    padding-right: 2em;
    line-height: 44px;
    font-size: 13px !important;
}
.link_arrow span:before{
    position: absolute;
    content: "";
    width: 5px;
    height: 5px;
    display: block;
    border-top: 1px solid #387fa9;
    border-right: 1px solid #387fa9;
    transform: rotate(45deg) translateY(-50%);
    -moz-transform: rotate(45deg) translateY(-50%);
    -webkit-transform: rotate(45deg)  translateY(-50%);
    top: 50%;
    margin: auto;
    right:.5em;
}
.link_arrow:hover span:before{
    right:.3em;
}

/* link */
.link_txt{ text-align: right; padding-right: 1.2em; }
.link_txt a{ position: relative; text-align: right;}
.link_txt a:before{
     position: absolute;
    content: " >"; 
    top: .3em;
    right: -1.2em;
    width: 1.2em;
    height: 1em;
    text-align: right;
    line-height: 1em;
    font-size: .7em;
    text-decoration: none;
}

/*box__btn*/
.box__btn{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
        /*上下左右*/
        justify-content: center;
        flex-direction: column; 
        align-items: center;
    padding-top: 2em;
}
.box__btn + .box__btn{
    padding-top: 1em;
}
.box__btn a{
    line-height: 44px;
    border: 1px solid #013a70;
    border-radius: 5px;
        -webkit-border-radius: 5px; 
        -moz-border-radius: 5px;
    width: 100%;
    max-width:400px;
    text-align: center;
    color: #013a70;
    font-weight: 400;
    letter-spacing: 0.05em;
}
.box__btn a:hover{
    border: 1px solid #73a0b5;
}
.box__btn a{
    position: relative;
    line-height: 44px;
}
.box__btn a span{
    display:inline-block;
    position: relative;
    padding-left: 1em;
    padding-right: 2em;
    line-height: 44px;
}
.box__btn a span:before{
    position: absolute;
    content: "";
    width: 5px;
    height: 5px;
    display: block;
    border-top: 1px solid #387fa9;
    border-right: 1px solid #387fa9;
    transform: rotate(45deg) translateY(-50%);
    -moz-transform: rotate(45deg) translateY(-50%);
    -webkit-transform: rotate(45deg)  translateY(-50%);
    top: 50%;
    margin: auto;
    right:.5em;
}
.box__btn a:hover span:before{
    right:.3em;
}
.box__btn .link_arrow span{ padding-left:2em !important;}


/* anchorlink */
@media screen and (max-width: 959px){
    .anchorlink{
        margin-top: -58px;
        padding-top: 58px;
    }
}

/* frame__conts */
.frame__conts{
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 64px;
}
    @media screen and (min-width: 560px) and (max-width: 959px){
    .frame__conts{
            padding-left: 40px;
            padding-right: 40px;
            padding-bottom:54px;
        }
    }
    @media screen and (max-width: 559px){
        .frame__conts{
            padding-left: 20px;
            padding-right: 20px;
            padding-bottom:40px;
        }
    }

/* sention__conts */
.sention__conts{
    padding-top: 64px;
}
    @media screen and (min-width: 560px) and (max-width: 959px){
    .sention__conts{
            padding-top:54px;
        }
    }
    @media screen and (max-width: 559px){
        .sention__conts{
            padding-top:40px;
        }
    }

/* sention_box__conts */
.sention_box__conts{
    padding-top: 64px;
    padding-bottom: 64px;
}
    @media screen and (min-width: 560px) and (max-width: 959px){
    .sention_box__conts{
            padding-top:54px;
            padding-bottom: 54px;
            padding-left: 40px;
            padding-right: 40px;
        }
    }
    @media screen and (max-width: 559px){
        .sention_box__conts{
            padding-top:40px;
            padding-bottom: 40px;
            padding-left: 20px;
            padding-right: 20px;
        }
    }

    /* flex__conts */
    @media screen and (min-width: 768px){
        .flex__conts{
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            justify-content: space-between;
            width: 100%;
        }
        .flex__conts .sention__conts{
            width: 48%;
        }
    }

/* frame__column */
    @media screen and (min-width: 768px){
        .frame__column{
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            justify-content: space-between;
            width: 100%;
        }
        .frame__column .box__column{
            width: 48%;
        }
    }


/* list__column */
    @media screen and (min-width:560px){
        .list__column{
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            justify-content: space-between;
            width: 100%;
        }
        .list__column li{
            width: 49%;
        }
    }


/* frame__line */
.frame__line{
    border: 1px solid #6488a0;
    margin-top: 1em;
    padding: 15px;
}
    .frame__line .box__contents{
        padding-top: 0;
    }

/* box__ph */
.box__ph{
    margin-top: 1em;
    text-align: center;
}
.box__ph + p{
    margin-top: 1em;
}







/*------------------------------------------------------------
    ** header
------------------------------------------------------------*/
@media screen and (min-width: 960px){
        header h1.hd_logo{ width: 100px;}
}
@media screen and (min-width: 560px) and (max-width: 959px){
        header h1.hd_logo{ width: 86px;}
}
@media screen and (max-width: 559px){
        header h1.hd_logo{ width: 73px;}
}

header .hd_nav a{
    display: block;
    position: relative;
    color: #4a4a4a;
    font-size: 14px;
    line-height: 44px;
    padding-right: 2em;
}
@media screen and (max-width: 559px){
    header .hd_nav a{
        padding-right: 1.5em;
    }
}

    header .hd_nav a:before{
           position: absolute;
           content: "";
           width: 5px;
           height: 5px;
           display: block;
           border-top: 1px solid #86a7bb;
           border-right: 1px solid #86a7bb;
           transform: rotate(45deg) translateY(-50%);
           -moz-transform: rotate(45deg) translateY(-50%);
           -webkit-transform: rotate(45deg)  translateY(-50%);
           top: 50%;
           margin: auto;
           right:.5em;
    }
    header .hd_nav a:hover:before{
           right:.3em;
    }

    header .hd_contact a{
        display: block;
        position: relative;
        color: #4a4a4a;
        font-size: 14px;
        padding-left: 2em;
        line-height: 21px;
    }
    header .hd_contact a:before{
            display: block;
            content: "";
            width:18px;
            height:18px;
            position:absolute;
            top: 50%;
            transform: translateY(-50%);
            -webkit-transform: translateY(-50%);
            left: 0;
        }
        header .hd_contact .nav_tel a:before{
            background: url("../images_ver02/common/icon_tel.svg") center 50% no-repeat;
            background-size: 100% auto;
        }
        header .hd_contact .nav_mobile a:before{
            background: url("../images_ver02/common/icon_mobile.svg") center 50% no-repeat;
            background-size: 100% auto;
        }
        header .hd_contact .nav_mail a:before{
            background: url("../images_ver02/common/icon_mail.svg") center 50% no-repeat;
            background-size: 100% auto;
        }


/* layout  -----------------------------------------------*/
header{
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
        /*子要素折り返し*/
        flex-wrap: wrap;
        align-items:center;
        justify-content:space-between;
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
}
header .hd_nav{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
        /*子要素折り返し*/
        flex-wrap: wrap;
        align-items:center;
        justify-content:space-between;
}
header .hd_nav li+li{
    padding-left: 2em;
}
@media screen and (max-width: 559px){
    header .hd_nav li+li{
        padding-left: .5em;
    }
}
/* box__menu */
header #box__menu{
    position: relative;
    width: 68px;
    height: 58px;
    font-size: 0;
    text-indent: -100000px;
}
    header #box__menu:before,
    header #box__menu:after{
        display: block;
        content: "";
        width:28px;
        height: 1px;
        position:absolute;
        right: 20px;
        background:#002d5f;
        transition: all 300ms 0s ease;
    }

    header #box__menu:before{ top: 18px; }
    header #box__menu:after{ bottom: 18px;}

    header #box__menu span{
        position: absolute;
        width:28px;
        height: 1px;
        background:#002d5f;
        transform: translateX(-50%) translateY(-50%);
        -moz-transform: translateX(-50%) translateY(-50%);
        -webkit-transform: translateX(-50%) translateY(-50%);
        top: 50%;
        left:50%;
        transition: all 300ms 0s ease;
    }
    /*menu_open*/
    header #box__menu.menu__open:before{
        transform:rotate(-45deg);
        transform-origin:right top;
        top: 18.5px; 
    }
    header #box__menu.menu__open:after{
        transform:rotate(45deg);
        transform-origin:right bottom;
        bottom: 18.5px; 
    }

    header #box__menu.menu__open span{
        opacity: 0;
    }

/* layout ** pc  -----------------------------------------------*/
@media screen and (min-width: 960px){
    #box__menu{ display: none; }
    #conts_menu{ display: none; }
    header{
        height: 110px;
    }
}


/* layout ** sp  -----------------------------------------------*/
@media screen and (max-width: 959px){
    header{
        position:fixed;
        transform:translateX(-50%);
        -moz-transform:translateX(-50%);
        -webkit-transform:translateX(-50%);
        top: 0;
        left: 50%;
        width: 100%;
        height: 58px;
        padding-left: 20px;
        padding-right: 68px;
        z-index: 1000;
        background: url("../images_ver02/common/bg.png");
    }
    header .hd_nav .nav_pc{ display: none; }
    header .hd_contact{ display: none; }
    header #box__menu{
        position: absolute;
        transform:translateY(-50%);
        -moz-transform:translateY(-50%);
        -webkit-transform:translateY(-50%);
            top: 50%;
            right: 0;
    }
}


/*------------------------------------------------------------
    ** conts_menu
------------------------------------------------------------*/
#conts_menu{
    position:fixed;
    transform:translateX(-50%);
    -moz-transform:translateX(-50%);
    -webkit-transform:translateX(-50%);
    top: 58px;
    left: 50%;
    background: url("../images_ver02/common/bg.png");
    padding-left: 20px;
    padding-right: 20px;
    width: 100%;
    z-index:1000;
}
/*bodyに設定*/
.op__menu:before{
    position:fixed;
    transform:translateX(-50%);
    -moz-transform:translateX(-50%);
    -webkit-transform:translateX(-50%);
    top: 0;
    left: 50%;
    content: "";
    width: 100%;
    height: 100%;
    z-index: 99;
    background:rgba(0,0,0,0.5);
}
.op__menu{
  position: fixed;
}

    #conts_menu .box__menu a{
        position: relative;
        font-size: 400;
        color: #4a4a4a;
        font-size: 14px;
        line-height: 1.4em;
        padding-left: 5px;
        padding-right: 5px;
    }
    #conts_menu .box__menu a span.menu_txt{
        text-align: center;
    }
    #conts_menu .box__menu a span.txt_sub{
        color: #1673a8;
        font-size: 11px;
        font-family: 'Shippori Mincho', serif;
        line-height: 1.3em;
        letter-spacing:-0.05em;
        display: block;
    }
            #conts_menu .box__menu a:before{
                    position: absolute;
                    content: "";
                    width: 5px;
                    height: 5px;
                    display: block;
                    border-bottom: 1px solid #013a70;
                    border-right: 1px solid #013a70;
                    transform: rotate(45deg) translateX(-50%);
                    -moz-transform: rotate(45deg) translateX(-50%);
                    -webkit-transform: rotate(45deg)  translateX(-50%);
                    transform-origin:50% 50%;
                    left: 50%;
                    bottom: 0;
                    margin: auto;
                }
    #conts_menu .box__sub_menu a{
        color: #fff;
        font-size: 14px;
        background:rgba(128,159,189,0.6);
        line-height: 44px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
            /*上下左右*/
            justify-content: center;
            flex-direction: column; 
            align-items: center;
        padding-left: 1em;
    }
    #conts_menu .box__sub_menu a span{
        display:inline-block;
        position: relative;
        padding-right: 2em;
    }
    #conts_menu .box__sub_menu a span:before{
           position: absolute;
           content: "";
           width: 5px;
           height: 5px;
           display: block;
           border-top: 1px solid #387fa9;
           border-right: 1px solid #387fa9;
           transform: rotate(45deg) translateY(-50%);
           -moz-transform: rotate(45deg) translateY(-50%);
           -webkit-transform: rotate(45deg)  translateY(-50%);
           top: 50%;
           margin: auto;
           right:.5em;
    }
    #conts_menu .box__info_menu li{
            padding-left: 1em;
            padding-right: 1em;
    }
    #conts_menu .box__info_menu a{
            display: block;
            position: relative;
            color: #4a4a4a;
            font-size: 14px;
            padding-left: 2em;
            line-height:44px;
    }
    #conts_menu .box__info_menu a:before{
            display: block;
            content: "";
            width:18px;
            height:18px;
            position:absolute;
            top: 50%;
            transform: translateY(-50%);
            -webkit-transform: translateY(-50%);
            left: 0;
        }
        #conts_menu .box__info_menu .nav_tel a:before{
            background: url("../images_ver02/common/icon_tel.svg") center 50% no-repeat;
            background-size: 100% auto;
        }
        #conts_menu .box__info_menu .nav_mobile a:before{
            background: url("../images_ver02/common/icon_mobile.svg") center 50% no-repeat;
            background-size: 100% auto;
        }
        #conts_menu .box__info_menu .nav_mail a:before{
            background: url("../images_ver02/common/icon_mail.svg") center 50% no-repeat;
            background-size: 100% auto;
        }
        #conts_menu .box__info_menu .nav_fb,
        #conts_menu .box__info_menu .nav_ind{
                padding-left: 0;
                padding-right:0;
        }

        #conts_menu .box__info_menu .nav_fb a,
        #conts_menu .box__info_menu .nav_ind a{
            padding-left:0;
            width: 44px;
            height: 44px;
        }
        #conts_menu .box__info_menu .nav_fb img,
        #conts_menu .box__info_menu .nav_ind img{
            width: 28px;
        }
    #conts_menu .box__company_menu a{
        display: block;
        position: relative;
        color: #4a4a4a;
        font-size: 14px;
        padding-left: 2em;
        line-height: 44px;
    }
    #conts_menu .box__company_menu a span{
        display:inline-block;
        position: relative;
        padding-right: 2em;
        line-height: 44px;
    }
    #conts_menu .box__company_menu a span:before{
           position: absolute;
           content: "";
           width: 5px;
           height: 5px;
           display: block;
           border-top: 1px solid #387fa9;
           border-right: 1px solid #387fa9;
           transform: rotate(45deg) translateY(-50%);
           -moz-transform: rotate(45deg) translateY(-50%);
           -webkit-transform: rotate(45deg)  translateY(-50%);
           top: 50%;
           margin: auto;
           right:.5em;
    }


/* layout  -----------------------------------------------*/

/*box__menu*/
#conts_menu .box__menu{
    position: relative;
    border-top: 1px solid #d4d9de;
    border-bottom: 1px solid #d4d9de;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
        /*子要素折り返し*/
        flex-wrap: wrap;
}
    #conts_menu .box__menu:before{
        display: block;
        content: "";
        position: absolute;
        width: 100%;
        height:1px;
        transform: translateX(-50%) translateY(-50%);
        -moz-transform: translateX(-50%) translateY(-50%);
        -webkit-transform: translateX(-50%) translateY(-50%);
        top: 50%;
        left:50%;
        background: #d4d9de;
    }
   #conts_menu .box__menu li{
        width : -webkit-calc(100% / 3) ;
        width : calc(100% / 3) ;
        padding: 16px 0;
    }
   #conts_menu .box__menu a{
       width: 100%;
       height: 70px;
       display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
		/*上下左右*/
		justify-content: center;
		flex-direction: column; 
		align-items: center;
    }
   #conts_menu .box__menu li:nth-child(2) a,
   #conts_menu .box__menu li:nth-child(3) a,
   #conts_menu .box__menu li:nth-child(5) a,
   #conts_menu .box__menu li:nth-child(6) a{
        border-left: 1px solid #bec6ce;
    }

/*box__sub_menu*/
#conts_menu .box__sub_menu{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
    justify-content:space-between;
    align-items:center;
    padding-top: 16px;
    padding-bottom: 16px;
}
    #conts_menu .box__sub_menu li{
        width: 50%;
    }
    #conts_menu .box__sub_menu li:nth-child(1){
        padding-right: 2px;
    }
    #conts_menu .box__sub_menu li:nth-child(2){
        padding-left: 2px;
    }
    
/*box__info_menu*/
#conts_menu .box__info_menu{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
		/*子要素折り返し*/
		flex-wrap: wrap;
        justify-content:center;/*中央揃え*/
}

/*box__company_menu*/
#conts_menu .box__company_menu{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
    justify-content:center;
    align-items:center;
    margin-top: 16px;
    padding-top: 6px;
    padding-bottom: 6px;
    border-top: 1px solid #a8bbcd;
}


/*------------------------------------------------------------
    ** footer
------------------------------------------------------------*/
footer{
}
@media screen and (min-width: 560px) and (max-width: 959px){
    footer{
        padding-left: 40px;
        padding-right: 40px;
    }
}
@media screen and (max-width: 559px){
        footer{
        padding-left: 20px;
        padding-right: 20px;
    }
}
footer .box__footer h2 img{
    width: 30px;
    display: block;
    }
footer .box__footer a{
        display: block;
        position: relative;
        color: #4a4a4a;
        font-size: 14px;
        padding-left: 2em;
        line-height: 44px;
    }
    footer .box__footer a span{
        display:inline-block;
        position: relative;
        padding-right: 2em;
        line-height: 44px;
    }
    footer .box__footer a span:before{
           position: absolute;
           content: "";
           width: 5px;
           height: 5px;
           display: block;
           border-top: 1px solid #387fa9;
           border-right: 1px solid #387fa9;
           transform: rotate(45deg) translateY(-50%);
           -moz-transform: rotate(45deg) translateY(-50%);
           -webkit-transform: rotate(45deg)  translateY(-50%);
           top: 50%;
           margin: auto;
           right:.5em;
    }
    footer .box__copy .text__copy{
        font-weight: 300;
        color: #424242;
        letter-spacing: -0.01em;
        font-size: 10px;
        line-height: 1.3em;
    }


/* layout  -----------------------------------------------*/
footer{
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
}
footer .box__footer{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
		/*上下左右*/
		justify-content: center;
		flex-direction: column; 
		align-items: center;
    border-top: 1px solid #013a70;
}
footer .nav__footer{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
		justify-content:center;
}
footer .box__copy{
    text-align: center;
}
@media screen and (min-width: 960px){
    footer .box__footer{
        padding-top: 50px;
    }
    footer .nav__footer{
        padding-top: 32px;
    }
    footer .box__copy{
        padding-top: 32px;
        padding-bottom: 38px;
    }
}
@media screen and (min-width: 560px) and (max-width: 959px){
    footer .box__footer{
        padding-top: 50px;
    }
    footer .nav__footer{
        padding-top: 32px;
    }
    footer .box__copy{
        padding-top: 32px;
        padding-bottom: 38px;
    }
}
@media screen and (max-width: 559px){
    footer .box__footer{
        padding-top: 36px;
    }
    footer .nav__footer{
        padding-top: 24px;
    }
    footer .box__copy{
        padding-top: 24px;
        padding-bottom: 30px;
    }
}


/*------------------------------------------------------------
    ** main
------------------------------------------------------------*/
@media screen and (max-width: 959px){
    main{
        padding-top: 58px;
    }
}


/*------------------------------------------------------------
    ** page_nav
------------------------------------------------------------*/
#page_nav{}
#page_nav .box__page_nav a{
        position: relative;
        font-size: 400;
        color: #4a4a4a;
        font-size: 16px;
        line-height: 1.4em;
        padding-left: 5px;
        padding-right: 5px;
    }
    #page_nav .box__page_nav a span.menu_txt{
        text-align: center;
    }
    #page_nav .box__page_nav a span.txt_sub{
        color: #1673a8;
        font-size: 12px;
        font-family: 'Shippori Mincho', serif;
        line-height: 1.3em;
        letter-spacing:0em;
        display: block;
    }
        #page_nav .box__page_nav a:before{
                position: absolute;
                content: "";
                width: 5px;
                height: 5px;
                display: block;
                border-bottom: 1px solid #013a70;
                border-right: 1px solid #013a70;
                transform: rotate(45deg) translateX(-50%);
                -moz-transform: rotate(45deg) translateX(-50%);
                -webkit-transform: rotate(45deg)  translateX(-50%);
                transform-origin:50% 50%;
                left: 50%;
                bottom: -20px;
                margin: auto;
            }
        #page_nav .box__page_nav li:hover a:before{
                bottom: -22px;
            }
@media screen and (max-width: 699px){
    #page_nav .box__page_nav a{
            font-size: 14px;
            display: block;
        }
    #page_nav .box__page_nav a span.txt_sub{
        font-size: 11px;
        letter-spacing:-0.05em;
    }
   #page_nav .box__page_nav a:before{
        bottom: 0;
    }
        #page_nav .box__page_nav li:hover a:before{
                bottom: -2px;
            }
}

/* layout  -----------------------------------------------*/
#page_nav .box__page_nav{
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    justify-content:space-between;/*均等*/
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
}
#page_nav .box__page_nav li{
	width : -webkit-calc(100% / 6) ;
	width : calc(100% / 6) ;
}
#page_nav .box__page_nav a{
    	border-right: 1px solid #bec6ce;
        width: 100%;
        height: 43px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
            /*上下左右*/
            justify-content: center;
            flex-direction: column; 
            align-items: center;
    }
#page_nav .box__page_nav li:nth-child(1) a{
    	border-left: 1px solid #bec6ce;
    }

@media screen and (max-width: 699px){

    #page_nav .box__page_nav li{
        width : -webkit-calc(100% / 3) ;
        width : calc(100% / 3) ;
        padding: 16px 0;
    }
    #page_nav .box__page_nav{
        border-top: 1px solid #d4d9de;
        border-bottom: 1px solid #d4d9de;
            /*子要素折り返し*/
            flex-wrap: wrap;
    }
    #page_nav .box__page_nav:before{
            display: block;
            content: "";
            position: absolute;
            width: 100%;
            height:1px;
            transform: translateX(-50%) translateY(-50%);
            -moz-transform: translateX(-50%) translateY(-50%);
            -webkit-transform: translateX(-50%) translateY(-50%);
            top: 50%;
            left:50%;
            background: #d4d9de;
        }
    #page_nav .box__page_nav a{
            height: 70px;
        }
    #page_nav .box__page_nav li:nth-child(1) a{
        border-left: none;
        }
    #page_nav .box__page_nav li:nth-child(3) a,
    #page_nav .box__page_nav li:nth-child(6) a{
        border-right: none;
        }
}