@charset "utf-8";
html {scroll-padding-top:80px;}
body {
	margin: 0;
	padding: 10px;
	font-family: 'Noto Sans JP', "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
    font-size:100%;
    font-weight: 400;
    color: #080808;
	line-height:180%;
    word-break: break-all;
    overflow-x: hidden;
}
img {
	border: none;
	vertical-align:bottom;
}
div, p, ul, ul li, h1, h2, h3, h4, h5, dl, dt, dd {
	margin: 0;
	padding: 0;
	font-size: 100%;
	list-style:none;
	box-sizing:border-box;
}
div, p, ul, ul li, h1, h2, h3, h4, h5, dl, dt, dd, ol, ol li, table, th, td {
	background-image:url(../image/spacer.gif);
}
img, video, object {
    max-width: 100%;
    height: auto;
    border: none;
}
img{ image-rendering: -webkit-optimize-contrast; }
iframe { border: none;}
i.material-icons { vertical-align: middle;}

a:link { color: #004896; outline:none; }
a:visited { color: #004896;}
a:hover { color: #333;}
a:hover img { opacity: 0.7; filter: alpha(opacity=70);}
a[href^="tel:"] { text-decoration:none; text-emphasis: none !important;}
a[href^="fax:"] { text-decoration:none; pointer-events:none ;}

#wrapper {}
#base {}
@media only screen and (max-width:768px){
    body { padding: 3px;}
}
@media only screen and (max-width:468px){
    body { min-width: 320px;}
}

/* Device change */
.pc{display: inherit;}
.tb{display: none;}
.sp{display: none;}
.pctb{display:block;}
.tbsp{display: none;}
@media only screen and (max-width:768px){
    .pc {display:none;}
    .tb {display:block;}
    .sp {display:none;}
    .pctb{display:block;}
    .tbsp {display:block;}
}
@media only screen and (max-width:468px){
    .pc {display:none;}
    .tb {display:none;}
    .sp {display:block;}
    .pctb{display:none;}
    .tbsp {display:block;}
}



a.b_contact {
    display: block;
    padding-left:55px;
    width: 160px;
    line-height: 46px;
    font-family: "Fustat", sans-serif;
    font-weight: 500;
    letter-spacing: 5%;
    color: #fff;
    text-decoration: none;
    background: #05539D url("../image/icon_mail_w.svg") no-repeat 25px center;
    background-size: 20px auto;
    border-radius: 100px;
    box-sizing: border-box;
    transition: .3s;
}
@media only screen and (min-width:769px){
    a.b_contact:hover { opacity: 0.7;}
}


/*====================================================================================================
  HEADER
====================================================================================================*/
#header {clear:both;}
#header .inner {
    display: flex; flex-wrap: wrap; justify-content: space-between;
    margin: auto;
    width: 96%;
}
#header .b_contact2 { display: none;}


/* LOGO */
#header h1 {
    /* position:fixed; */
    position:absolute;
    top: 45px;
    left: 40px;
    z-index: 99999;
    width:100%;
    max-width: 347px;
}
#header h1 a {
    display: block;
	text-indent: -9999px;
    aspect-ratio: 347 / 58;
	background:url("../image/logo_w.png") no-repeat center center;
    background-size: 100% auto;
}


/* NAVIGATION */
#header #navi {
    position:fixed; top: 45px; right: 40px; z-index: 999999;
    padding: 15px 15px 15px 45px;
    background: rgba(255,255,255,0.60);
    border-radius: 150px;
    backdrop-filter: blur(10px);
}
#header #navi .nav_cont { display: flex; align-items: center; gap:0 50px;}
#header #navi ul { display: flex; gap:30px 45px;}
#header #navi ul li a { line-height: 130%; text-align: center; text-decoration: none;}
#header #navi ul li b,
#header #navi ul li small { display: block;}
#header #navi ul li b { font-size: 112.5%; font-weight: 700; color: #080808; letter-spacing: 10%;}
#header #navi ul li small { font-size: 62.5%; font-weight: 500; color: #05539D; letter-spacing: 5%; line-height:1.2; margin-top:0.5em;}
@media only screen and (min-width:769px){
    #header #navi ul li a:hover b { color: #05539D;}
}
@media only screen and (max-width:1250px){
    #header h1 { max-width:250px;}
    #header #navi .nav_cont { gap:0 15px;}
    #header #navi ul { gap:0 15px;}
}
@media only screen and (max-width:968px){
    .nav_btn {
        cursor: pointer;
        position:fixed; top:10px; right:10px; z-index: 999999999999;
        width: 50px; height:50px;
        box-sizing: border-box;
        mix-blend-mode: difference;
    }
    .nav_btn span {
        display: inline-block;
        position: absolute; left:0; right: 0; margin:auto;
        width:30px; height:1px;
        background:#fff;
        transition: all .3s;
    }
    .nav_btn span:nth-of-type(1) { top:15px;}
    .nav_btn span:nth-of-type(2) { top:22px;}
    .nav_btn span:nth-of-type(3) { top:29px;}
    .nav_btn small {
        position: absolute; bottom:15px; left:0; right: 0;
        display: block; margin:auto;
        width: 100%; height: 10px;
        font-size: 10px;
        text-align: center;
        color:#fff;
    }
    .nav_btn.active {mix-blend-mode:normal;}
    .nav_btn.active span { background:#fff;}
    .nav_btn.active span:nth-of-type(1) { top:22px; transform:rotate(-35deg); opacity: 1;}
    .nav_btn.active span:nth-of-type(2) { opacity: 0;}
    .nav_btn.active span:nth-of-type(3) { top:22px; transform:rotate(35deg); opacity: 1;}
    
    #header { top:3px; box-sizing: border-box;}
    #header h1 { top:15px; left:15px; z-index: 999; max-width: 170px;}
    #header h1 a {
        display: block;
        text-indent: -9999px;
        aspect-ratio: 347 / 58;
        background:url("../image/logo_w.png") no-repeat center center;
        background-size: 100% auto;
    }
    #header.active { background: #05539D;}
    #header .b_contact2 {
        display:block;
        position:fixed; top:23px; right:70px; z-index: 999999999999;
        width: 30px;
    }
    #header .b_contact2 a {
        display: block;
        width: 100%; height: auto; aspect-ratio: 1 / 1;
        text-indent: -9999px;
        background:#05539D url("../image/icon_mail_w.svg") no-repeat center center;
        background-size: 15px auto !important;
        border-radius: 30px;
    }
    #header.active .b_contact2 a {
        background:#fff url("../image/icon_mail_b.svg") no-repeat center center;
    }
    #header #navi {
        display: none;
        position:fixed; top: 0; left:0;
        margin: 0; padding:0;
        width: 100vw; height: 100vh;
        overflow:scroll;
        background:#05539D;
        border-radius:0;
    }  
    #header #navi .nav_cont {
        flex-direction: column; gap:50px;
        padding-top: 110px;
    }  
    #header #navi ul { flex-direction: column; gap:20px;}
    #header #navi ul li a b,
    #header #navi ul li a small { display: inline-block; color: #fff;}
    #header #navi ul li a b { font-size: 100%; font-weight: 500;}
    #header #navi ul li a small { margin-left: 20px;}
    #header #navi a.b_contact {
        display: block;
        padding:2px 0 0;
        width: 210px;
        line-height: 46px;
        font-family: "Fustat", sans-serif;
        font-weight: 700;
        text-align: center;
        letter-spacing: 5%;
        color: #05539D;
        text-decoration: none;
        text-indent: 20px;
        background: #fff url("../image/icon_mail_b.svg") no-repeat 45px center;
        background-size: 20px auto;
        border-radius: 100px;
        box-sizing: border-box;
        transition: .3s;
    } 
}
@media only screen and (max-width:768px){
    #header { top:3px;}
    #header .nav_btn { top:3px; right:3px;}
    #header .b_contact2 { top:13px; right:60px; }
}



/*====================================================================================================
  CONTENT
====================================================================================================*/
#content { clear:both; width:100%;}
#content .inner {
    position: relative; z-index: 99;
    margin: auto;
    padding:100px 0; 
    width: 92%; max-width: 1260px;
}
#content .inner::after {
    display: block; clear: both; content:"";
}
@media only screen and (max-width:768px){
    #content .inner { padding:40px 0 50px; }
}


.bg_b {
    position: relative;
    padding: 130px 0;
    background: #073195;
}
.bg_b::before,
.bg_b::after {
    display: block; clear: both; content:"";
    position: absolute; left: 0;
    width: 100%; height: 290px;
    background-size: auto 100% !important;
}
.bg_b::before { top:0; background:#fff url("../image/bg_t.png") repeat-x center top;}
.bg_b::after { bottom:0; background:#fff url("../image/bg_b.png") repeat-x center bottom;}
@media only screen and (max-width:768px){
    .bg_b { padding:70px 0 90px;}
    .bg_b::before,
    .bg_b::after { height: 135px;}
}





.news_list ul {
    display: flex; flex-wrap: wrap; gap:0 20px;
    padding: 20px 0;
    width: 100%;
    border-bottom: 1px solid #D9D9D9;
}
.news_list ul:nth-child(1) { border-top: 1px solid #D9D9D9;}
.news_list ul li.day  {
    width: 100px;
    font-family: "Fustat", sans-serif;
    font-size: 118.5%;
    font-weight: 600;
    color: #05539D;
}
.news_list ul li.cate  {
    width: 112px;
    height: 27px; line-height: 27px;
    font-size:93.8%;
    text-align: center;
    border: 1px solid #D6D6D6;
    border-radius:50px;
}
.news_list ul li.txt { font-size:93.8%; width: calc(100% - 212px - 40px);}
.news_list ul li.txt,
.news_list ul li.txt a { color: #222;}
@media only screen and (max-width:968px){
    .news_list ul li.txt { flex-basis:100%;}
}
@media only screen and (max-width:768px){
    .news_list { width: 100%;}
    .news_list ul:last-child  { border-bottom: none; }
    .news_list ul li.day  { font-size: 93.8%; }
    .news_list ul li.cate  { font-size: 75%; }
    .news_list ul li.txt { font-size: 87.5%; }
}




.product_list { clear: both;}
.product_list::after { display: block; clear: both; content:"";}
.product_list .box {
    float: left;
    position: relative;
    margin: 20px 2%;
    width: 29.3%;
    background: #fff;
}
.product_list .box .pic img {
    width: 100%; height: auto; aspect-ratio: 1 / 1;
    object-fit: cover;
}
.product_list .box .txt {
    position: relative;
    padding: 40px 20px;
}
.product_list .box .no {
    position:absolute; top:-15px; left: 20px;
    width: 86px;
    font-family: "Gabarito", sans-serif;
    font-size: 81.2%;
    font-weight: 500;
    color: #05539D;
    text-align: center;
    background: #fff;
    border-radius: 30px;
}
.product_list .box .come {
    font-size: 125%;
    font-weight: 700;
    line-height: 150%;
}
.product_list .box .come,
.product_list .box .come a { color: #05539D; text-decoration: none;}
@media only screen and (max-width:768px){
    .product_list .product_list { flex-direction: column; gap:10px;}
    .product_list .box { float: none; width: 96%; display: flex; flex-wrap: wrap;}
    .product_list .box .pic,
    .product_list .box .txt { width: 50%;}
    .product_list .box .pic img { aspect-ratio: 180 / 106;}
    .product_list .box .txt {
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap:5px;
        position: relative;
        padding:0;
    }
    .product_list .box .no { position:static; background:#F3F3F3;}
    .product_list .box .come { font-size: 100%;}
    .product_list .box .come,
    .product_list .box .come a { color: #05539D; text-decoration: none;}
}






/*====================================================================================================
  FOOTER
====================================================================================================*/
#footer { clear:both; background: #fff;}
#footer .inner {
    display: flex; flex-wrap: wrap; justify-content:space-between; align-items: center;
    margin: auto;
    padding: 20px 0 70px;
    width: 96%;
    max-width: 1160px;
}
#footer .f_cont1 {}
#footer .f_cont2 { color: #fff; background: #073195;}


/* footer logo */
#footer .logo { margin-bottom:25px;}
#footer .logo small {
    display: block;
    padding-left: 55px;
    font-size: 81.2%;
    font-weight: 500;
}


/* footer info */
#footer .add {
    display: flex; flex-direction: column; gap:32px;
    margin-bottom: 20px;
}
#footer .add dl dt {
    display: inline-block;
    margin-bottom: 12px;
    padding: 0 10px;
    color: #fff;
    font-size: 93.8%;
    font-weight: 500;
    background: #05539D;
}
#footer .add dl dd {
    font-family: "Fustat", sans-serif;
    font-size:87.5%;
    line-height:150%;
}
#footer .txt_link {
    font-family: "Fustat", sans-serif;
    font-size:87.5%;
    color: #080808;
}


/* footer nav */
#footer .f_nav {
    display: flex; flex-direction: column; gap:15px;
    margin-bottom: 20px;
}
#footer .f_nav li {}
#footer .f_nav li a { color:#080808; text-decoration: none; }
#footer .f_nav li a b {
    margin-right:20px;
    font-size:100%;
    font-weight: 700;
    letter-spacing: 10%;
}
#footer .f_nav li a small {
    font-family: "Gabarito", sans-serif;
    font-size:62.5%;
    font-weight:500;
    letter-spacing: 5%;
    color: #05539D;
}
#footer .f_nav li a small {
    font-family: "Gabarito", sans-serif;
    font-size:62.5%;
    font-weight:500;
    letter-spacing: 5%;
    color: #05539D;
}


/* copyright */
#footer .copy {
    margin: auto;
    padding: 25px 0;
    width: 96%;
    text-align: left;
}

@media only screen and (min-width:769px){
    #footer  a.txt_link:hover { color:#05539D; }
    #footer .f_nav li a:hover { color:#05539D; text-decoration: none; }
}
@media only screen and (max-width:768px){
    #footer .inner { justify-content: center; padding: 30px 0;}
    #footer .f_cont1 .cont:nth-child(2) { display: none;}
    #footer .copy {
        padding:3px 0;
        font-size: 62.5%;
    }
}



/*====================================================================================================
  PAGE
====================================================================================================*/
#page,
#page a { display:block; width:108px; height:70px;}
#page { position: fixed; bottom:44px; right: 60px; z-index: 99999999;}
#page a {
	text-indent: -9999px;
	background:url("../image/page_top.png") no-repeat;
    background-size: 100% auto;
}
@media only screen and (max-width:768px){
    #page,
    #page a { width:42px; height:27px;}
    #page { bottom:26px; right:15px;}
}



/*====================================================================================================
  COLOR eto..
====================================================================================================*/
.light-blue { color: #40A6DD;}
.blue { color: #0000FF;}
.dark-blue { color: #000099;}
.purple { color: #660099;}
.pink { color: #FF6699;}
.red { color: #FF0000;}
.orange { color: #FF6600;}
.yellow { color: #FFCC00;}
.white { color: #FFFFFF;}
.gray { color: #666666;}
.brown { color: #663300;}
.green { color: #339900;}
.italic { font-style: italic;}
.strong { font-weight: bold;}
.large { font-size: 115%; line-height: 140%;}
.small { font-size: 80%;}
.underline { text-decoration: underline;}
.line-through { text-decoration: line-through;}
.left { text-align: left;}
.center { text-align: center;}
.right { text-align: right;}