@charset "UTF-8";
/* CSS Document */

*{margin: 0;padding: 0; outline:none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /*-webkit-appearance: auto; font-feature-settings : "palt";*/}
html {font-size:62.5%;}
body {font-family: 'a-otf-futo-go-b101-pr6n', 'Hiragino Kaku Gothic ProN','メイリオ',Meiryo,'ＭＳ Ｐゴシック', sans-serif; font-size:16px;/* letter-spacing: 0.02em;*/ line-height:1.7; background:#f2f2f2; color:#222; text-align: center; scrolling: yes; position: relative; -webkit-text-size-adjust: 100%; overflow-x: hidden;}
*.en{font-family: Helvetica, Arial, "pragmatica", 'a-otf-midashi-go-mb31-pr6n', 'Hiragino Kaku Gothic ProN','メイリオ',Meiryo,'ＭＳ Ｐゴシック', sans-serif!important; letter-spacing: 0.01em;}
input.en{font-family: Helvetica, Arial, 'Hiragino Kaku Gothic ProN','メイリオ',Meiryo,'ＭＳ Ｐゴシック', sans-serif!important; letter-spacing: 0.01em;}

body.fixed {position: fixed; width: 100%; height: 100%;}

a{color:#222; text-decoration:none; overflow:hidden; outline:none; cursor: pointer;}
a[href^="tel"]{color:inherit; text-decoration:none!important;}
a:hover{text-decoration:none; color: #222;}

p{font-size: 1.4rem;}
img{border:none; vertical-align: top;}
table{border-collapse:collapse;}
ul{list-style-type:none;}
button, input, select, textarea{border: none; border-radius: 0; /*-webkit-appearance: auto;*/}
button{ cursor: pointer;}
select{-moz-appearance: none; text-indent: 0.01px; text-overflow: '';}
select::-ms-expand {display: none;}
strong:not(.en){font-family: 'a-otf-midashi-go-mb31-pr6n', 'Hiragino Kaku Gothic ProN','メイリオ',Meiryo,'ＭＳ Ｐゴシック', sans-serif!important;}

h1, h2, h3{font-weight:normal;}

/* FOR TYPEKIT */
html div.wrap{opacity: 0; transition: opacity 0.5s ease; transition-delay: 0.5s;}
html header.mainHeader{opacity: 1;}
html header.mainHeader::after{width: 30px; height: 30px; border: 4px solid rgba(0,0,0,0); border-top-color: rgba(0,0,0,0.4); border-radius: 50%; animation: spinLoad 0.7s linear 0s infinite; position: fixed; left: 0; top: 0; right: 0; bottom: 0; margin: auto; transform: translateY(30px); content: ""; transition: opacity 0.3s ease; transition-delay: 0.2s;}
html.wf-active div.wrap,
html.loading-delay div.wrap{opacity: 1;}
html.wf-active header.mainHeader::after,
html.loading-delay header.mainHeader::after{opacity: 0; z-index: -1;}

@keyframes spinLoad {
    0% {transform: translateY(30px) rotate(0deg);}
    100% {transform: translateY(30px) rotate(360deg);}
}

/* ::::::::::::::::::::::::::::::::: COMMON ::::::::::::::::::::::::::::::::: */

div.wrap{overflow: hidden; width: 100%; padding-top: 90px;}

.commonWidth{width: 74%; max-width: 1300px; min-width: 980px; margin-left: auto; margin-right: auto;}

p.btnMore{width: 200px; font-size: 1.6rem!important; font-weight: bold; font-family: 'a-otf-midashi-go-mb31-pr6n', 'Hiragino Kaku Gothic ProN','メイリオ',Meiryo,'ＭＳ Ｐゴシック', sans-serif;}
p.btnMore.en{font-size: 1.4rem!important;}
p.btnMore.center{margin: 0 auto;}
p.btnMore a{display: block; line-height: 35px; width: 100%; text-align: center; border: 2px solid #222; text-decoration: none!important; color: #222!important; transition: color 0.3s ease; position: relative;}
p.btnMore a::before{content: ""; width: 100%; height: 100%; left: 0; top: 0; background: #222; position: absolute; opacity: 0; transition: opacity 0.3s ease; z-index: -1;}
p.btnMore a:hover{color: #FFF!important;}
p.btnMore a:hover::before{opacity: 1;}

p.sideLink{position: absolute; right: 0; top: 47px; font-size: 1.4rem; font-weight: bold; text-align: right;}
p.sideLink a{border-bottom: 2px solid #333; padding: 0 13px 2px 0; background: url(/img/common/vector_right.svg) no-repeat right center; background-size: 8px 8px;}

#infscr-loading{text-align:center; margin:0 auto; clear:both; padding:50px 0 0 0; font-size: 1.1rem; display: block; width: 100%;}
#infscr-loading img{width:24px!important; height:24px!important;}

/* HEADER */
header.mainHeader{background: #FFF; height: 60px; padding: 15px 0; width: 100%; position: fixed; left: 0; top: 0; z-index: 10000; transition: all 0.2s ease;}
header.mainHeader div.inner{position: relative;}
header.mainHeader .siteTitle{float: left; margin: 9px 0 0; height: 42px; width: 190px; overflow: hidden;}
header.mainHeader .siteTitle a{display: block; transition: margin 0.4s ease; text-align: left; height: 100px;}
header.mainHeader .siteTitle img{display: block; vertical-align: top;}
header.mainHeader .siteTitle img.logo1{padding: 0 0 8px 0;}
header.mainHeader .siteTitle img.logo2{padding: 3px 0 11px;}
header.mainHeader ul{font-size: 1.4rem; line-height: 22px; display: flex; justify-content: space-between;}
header.mainHeader ul li{}
header.mainHeader ul.menuList{width: 600px; float: right; padding: 30px 0 0 0; font-weight: bold; transition: padding 0.2s ease;}
header.mainHeader ul.menuList li a{padding: 0 0 2px;}
header.mainHeader ul.menuList li.active a{border-bottom: 1px solid #222;}
header.mainHeader ul.langList{width: 42px; position: absolute; top: -4px; right: 0; font-size: 1.3rem; transition: all 0.2s ease;}
header.mainHeader ul.langList li,
header.mainHeader ul.langList li a{color: #AAA;}
header.mainHeader ul.langList li a:hover{text-decoration: underline;}
header.mainHeader ul.langList li.active{color: #222; font-weight: bold;}
header.mainHeader ul.subList{width: 320px; width: 220px;/*仮*/ position: absolute; top: -4px; right: 80px; font-size: 1.3rem; transition: all 0.2s ease;}
header.mainHeader ul.subList.nonLang{right: 0;}
header.mainHeader ul.subList li:last-child{display: none;}
header.mainHeader ul.subList li a{color: #666;}
header.mainHeader ul.subList li a:hover{text-decoration: underline;}

header.mainHeader.scroll{padding: 0px;}
header.mainHeader.scroll .siteTitle a{margin-top: -50px;}
header.mainHeader.scroll ul.menuList{padding: 18px 0 0 0;}
header.mainHeader.scroll ul.langList,
header.mainHeader.scroll ul.subList{visibility: hidden; opacity: 0; top: -20px;}

/* MAIN CONTENT */
div.mainContent{margin: 0 auto 120px; position: relative;}
div.mainContent h1,
div.mainContent h2{padding: 40px 0 35px; text-align: left; font-weight: bold; font-size: 2.0rem;}
div.mainContent h1.center{padding: 70px 0 40px; text-align: center; font-weight: bold; font-size: 2.6rem;}
div.mainContent h3{padding: 5px 0 15px; text-align: left; font-weight: bold; font-size: 1.8rem; line-height: 1.5;}
div.mainContent p.underTitle{font-size: 1.3rem; text-align: left; margin: -35px 0 35px;}
div.mainContent ul.underCatList{font-size: 1.3rem; text-align: left; margin: -32px 0 35px;}
div.mainContent ul.underCatList li{display: inline-block; margin: 0 15px 0 0;}
div.mainContent ul.underCatList li a{color: #AAA; padding: 0 0 1px;}
div.mainContent ul.underCatList li a:hover{text-decoration: underline;}
div.mainContent ul.underCatList li.active a{color: #222; border-bottom: 2px solid #222; font-weight: bold;}
div.mainContent ul.underCatList li.active a:hover{text-decoration: none;}

/* FOOTER */
footer.mainFooter{padding: 0 3% 40px; text-align: left;}
footer.mainFooter div.inner{border-top: 1px solid #e1e1e1; _zoom: 1; overflow: hidden; padding: 40px 0 0;}
footer.mainFooter div.left{width: 380px; float: left;}
footer.mainFooter div.left p{color: #555; font-size: 1.3rem; margin: 0 0 20px;}
footer.mainFooter div.left p a{color: #555;}
footer.mainFooter div.left p.title{color: #222; font-weight: bold; font-size: 1.8rem; margin: 0 0 10px;}
footer.mainFooter div.left p a{text-decoration: underline;}
footer.mainFooter div.left form{display: flex;}
footer.mainFooter div.left form input{line-height: 40px; background: #e6e6e6; width: 240px; padding: 0 20px; font-size: 1.4rem;}
footer.mainFooter div.left form button{line-height: 40px; background: #555; color: #FFF; width: 100px; font-size: 1.4rem;}
footer.mainFooter div.right{width: 50%; float: right; display: flex; justify-content: space-between;}
footer.mainFooter div.right ul{}
footer.mainFooter div.right ul a:hover{text-decoration: underline;}
footer.mainFooter div.right ul.listL{font-size: 1.35rem; font-weight: bold; flex-grow: 1;}
footer.mainFooter div.right ul.listL li{margin: 0 0 15px;}
footer.mainFooter div.right ul.listS{font-size: 1.2rem; flex-grow: 2;}
footer.mainFooter div.right ul.listS li{margin: 0 0 5px;}
footer.mainFooter div.bottom{clear: both; padding: 50px 0 0;}
footer.mainFooter div.bottom ul.snsList{text-align: right; margin: 0 0 30px;}
footer.mainFooter div.bottom ul.snsList li{display: inline-block; padding: 0 0 0 5px;}
footer.mainFooter div.bottom p.copyright{text-align: right; color: #AAA; font-size: #888; font-size: 1.1rem;}

/* FOR SMALL PC OR TABLET DEVICE */
@media screen and (max-width: 1090px){
    .commonWidth{width: 90%; min-width: 280px;}
    header.mainHeader ul.menuList{width: 560px;}

    /* FOOTER */
    footer.mainFooter div.left{width: 100%; float: none; margin: 0 0 50px;}
    footer.mainFooter div.right{width: 100%; float: none;}
}
@media screen and (max-width: 950px){
    header.mainHeader ul.menuList{width: 480px; font-size: 13.5px;}
}

/* ::::::::::::::::::::::::::::::::: PC ::::::::::::::::::::::::::::::::: */
@media screen and (min-width: 800px){
    .sp{display:none!important;}

    .hoverAlpha{transition: opacity 0.2s ease;}
    .hoverAlpha:hover{opacity: 0.8;}
}

/* ::::::::::::::::::::::::::::::::: SP ::::::::::::::::::::::::::::::::: */
@media screen and (max-width: 799px){
    .pc{display:none!important;}

    div.wrap{padding-top: 60px;}

    .commonWidth{width: auto; max-width: 750px; padding: 0 15px;}

    p.btnMore{font-size: 1.5rem!important;}
    p.btnMore.en{font-size: 1.4rem!important;}
    p.btnMore a{}
    p.btnMore a::before{display: none;}
    p.btnMore a:hover{color: #222!important;}

    p.sideLink{position: static; right: 0; top: 0; font-size: 1.3rem; text-align: center; margin: -15px 0 30px; padding-left: 10px;}
    p.sideLink a{}

    /* HEADER */
    header.mainHeader{padding: 0;}
    header.mainHeader .siteTitle{margin: 16px 0 0; height: 28px; width: 130px;}
    header.mainHeader .siteTitle a{}
    header.mainHeader .siteTitle img{width: 130px; height: 28px;}
    header.mainHeader.scroll .siteTitle a{margin-top: -0;}

    button.menuOpenBtn{display: block; position: absolute; width: 50px; height: 50px; right: 12px; top: 5px; background: #FFF; text-indent: -199px; overflow: hidden; cursor: pointer;}
    button.menuOpenBtn::before,
    button.menuOpenBtn::after{width: 20px; position: absolute; left: 15px; content: ""; transform: all 0.3s ease;}
    button.menuOpenBtn::before{border-top: 1px solid #222; top: 20px;}
    button.menuOpenBtn::after{border-bottom: 1px solid #222; bottom: 20px;}
    button.menuOpenBtn.on::before{transform: rotate(45deg); top: 25px; transition: all 0.4s ease;}
    button.menuOpenBtn.on::after{transform: rotate(-45deg); bottom: 24px; transition: all 0.4s ease;}

    /* MAIN CONTENT */
    div.mainContent{margin: 0 auto 45px;}
    div.mainContent h1,
    div.mainContent h1.center,
    div.mainContent h2{padding: 30px 0 25px; font-size: 2.0rem; line-height: 1.5; text-align: center;}
    div.mainContent h2{font-size: 1.8rem;}
    div.mainContent h3{font-size: 1.6rem; padding: 5px 0 10px;}
    div.mainContent p.underTitle{text-align: center; margin: -15px 0 25px;}
    div.mainContent ul.underCatList{text-align: center; margin: -13px 0 25px;}
    div.mainContent ul.underCatList li{display: inline-block; margin: 0 5px 3px;}
    div.mainContent ul.underCatList li a{}
    div.mainContent ul.underCatList li a:hover{}
    div.mainContent ul.underCatList li.active a{}
    div.mainContent ul.underCatList li.active a:hover{}


    /* FOOTER */
    footer.mainFooter{padding: 0 15px 20px;}
    footer.mainFooter div.inner{}
    footer.mainFooter div.left{margin: 0 0 35px;}
    footer.mainFooter div.left p{}
    footer.mainFooter div.left p a{}
    footer.mainFooter div.left p.title{}
    footer.mainFooter div.left p a{}
    footer.mainFooter div.left form{width: 100%;}
    footer.mainFooter div.left form input{width: 62%; padding: 0 4%;}
    footer.mainFooter div.left form button{width: 30%;}
    footer.mainFooter div.right{width: 95%; flex-wrap: wrap; justify-content: space-between;}
    footer.mainFooter div.right ul{}
    footer.mainFooter div.right ul a:hover{}
    footer.mainFooter div.right ul.listL{flex-grow: 1; width: 50%;}
    footer.mainFooter div.right ul.listL li{}
    footer.mainFooter div.right ul.listS{flex-grow: 1; width: 50%; padding-top: 15px;}
    footer.mainFooter div.right ul.listS li{}
    footer.mainFooter div.bottom{padding: 30px 0 0;}
    footer.mainFooter div.bottom ul.snsList{margin: 0 0 20px;}
    footer.mainFooter div.bottom ul.snsList li{}
    footer.mainFooter div.bottom p.copyright{}

    /* SP MENU */
    div.spMenu{position: fixed; z-index: 990; width: 100%; height: 100%; left: 100%; top: 0; background: #f2f2f2; transition: left 0.7s cubic-bezier(0.770, 0.000, 0.175, 1.000);}
    div.spMenu.on{left: 0;}
    div.spMenu div.inner{position: absolute; width: calc(100% - 60px); height: calc(100% - 125px); left: 30px; top: 95px;}
    div.spMenu div.inner ul.menuList li a{padding: 0 0 2px;}
    div.spMenu div.inner ul.menuList{text-align: left; font-size: 1.6rem; font-weight: bold;}
    div.spMenu div.inner ul.menuList li{margin: 0 0 13px;}
    div.spMenu div.inner ul.menuList li.active a{border-bottom: 1px solid #222;}
    div.spMenu div.inner ul.subList{text-align: left; font-size: 1.4rem; padding: 7px 0 0;}
    div.spMenu div.inner ul.subList li{padding: 0 0 7px;}
    div.spMenu div.inner ul.subList li:last-child{display: none;}
    div.spMenu div.inner ul.subList li a{color: #222;}

    div.spMenu div.inner ul.langList{width: 50px; position: absolute; bottom: 95px; right: 0; font-size: 1.4rem; line-height: 22px; display: flex; justify-content: space-between;}
    div.spMenu div.inner ul.langList li,
    div.spMenu div.inner ul.langList li a{color: #AAA;}
    div.spMenu div.inner ul.langList li a:hover{text-decoration: underline;}
    div.spMenu div.inner ul.langList li.active{color: #222; font-weight: bold;}

    div.spMenu div.inner ul.mapList{width: 100%; position: absolute; bottom: 0; right: 0; font-size: 1.4rem; font-weight: bold; text-align: right;}
    div.spMenu div.inner ul.mapList li{display: block; margin: 0 0 10px;}
    div.spMenu div.inner ul.mapList li a{border-bottom: 2px solid #333; padding: 0 13px 2px 0; background: url(/img/common/vector_right.svg) no-repeat right center; background-size: 8px 8px;}

}