@charset "UTF-8";
/* =============================================
                    COMMON
============================================= */
body{ background: #000; font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN W6", "Hiragino Kaku Gothic ProN", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;}
.en{ font-family: 'Roboto Condensed', sans-serif; font-weight: 700;}
sup{ font-size: 70%; vertical-align: top; position: relative; top: -0.1em;}

/* =============================================
                    CONTENTS
============================================= */
*{ box-sizing: border-box;}
.ico-blank{ display: inline-block; position: relative; padding-right: 20px;}
.ico-blank::before,
.ico-blank::after{ content: ""; background: #000; border: 1px solid #fff; width: 9px; height: 9px; position: absolute;}
.ico-blank::before{ top: 5px; right: 2px;}
.ico-blank::after{ top: 3px; right: 0px;}
#page-top{ position: fixed; z-index: 40;}
#page-top a{ background: #fff; box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.4); display: block; position: relative;}
#page-top a::before{ content: ""; border-top: 2px solid #000; border-right: 2px solid #000; position: absolute; transform: rotate(-45deg); width: 18px; height: 18px; top: 30px; left: 28px;}

/* header */
header{ background: #fff;}
header .inner{ display: flex; align-items: center;}
header .g-nav ul li a{ font-weight: 700; color: #000; text-decoration: none;}

/* footer */
footer .bg{ background: #000;}
footer .bg .logo-box a{ font-weight: 700; color: #fff; text-decoration: none; display: flex; justify-content: center; align-items: center;}
footer .bg .logo-box a p .ico-blank::before,
footer .bg .logo-box a p .ico-blank::after{ content: ""; background: #fff; border: 1px solid #000; width: 9px; height: 9px; position: absolute;}
footer .bottom{ background: #fff;}
footer .bottom .sns li{ display: inline-block; vertical-align: middle; margin: 0 5px;}
footer .bottom .sns li:nth-of-type(2){ vertical-align: top;}
footer .bottom .new-sns li{ display: inline-block; vertical-align: middle; width: 60px; margin: 0 10px;}

/* ==== PC ===== */
@media screen and (min-width: 768px){
body{ font-size: 16px;}
a{ transition: .4s;}
a:hover,a:hover img{ opacity: 0.8;}
.pc{ display: block;}
.sp{ display: none;}
#page-top{ right: 30px; bottom: 30px;}
#page-top a{ border-radius: 30px; width: 60px; height: 60px;}
#page-top a::before{ width: 18px; height: 18px; top: 25px; left: 20px;}

/* header */
header .inner{ width: 1080px; height: 90px; margin: 0 auto;}
header .bg{ height: 90px;}
header .logo-gdo{ width: 71px; margin-top: -2px; margin-right: auto;}
header .logo-tm{ width: 158px;}
header .g-nav ul{ display: flex;}
header .g-nav ul li{ margin-right: 60px;}
/* footer */
footer .bg{ padding: 60px 0;}
footer .bg .inner{ width: 1080px; margin: 0 auto;}
footer .bg .logo-box .logo{ width: 206px; margin-right: 10px;}
footer .bg .logo-box a p{ font-size: 18px;}
footer .fb-box{ width: 500px;}
footer .bottom{ padding: 60px 0; text-align: center;}
footer .bottom .sns,
footer .bottom .new-sns{ margin-bottom: 40px;}
footer .bottom .cp{ margin-top: 20px;}
}

/* ==== SP ===== */
@media screen and (max-width: 767px){
body{ font-size: 14px;}
img{ width: 100%;}
.pc{ display: none;}
.sp{ display: block;}
.mainblur{ filter: blur(8px);}
#page-top{ right: 20px; bottom: 20px;}
#page-top a{ width: 40px; height: 40px; border-radius: 20px;}
#page-top a::before{ width: 10px; height: 10px; top: 16px; left: 14px;}

/* header */
header .inner{ height: 50px; padding: 0 20px;}
header .bg{ height: 50px;}
header .logo-gdo{ width: 45px; margin-top: -2px; margin-right: auto;}
header .logo-tm{ width: 100px; margin-right: 25px;}
header .g-nav{ background: rgba(0, 0, 0, 0.7); position: fixed; z-index: 55; width: 100%; height: 50vh; top: 0; left: 0; display: none; transition: all 0.3s;}
header .g-nav.ac{ display: block;}
header .g-nav ul{ position: absolute; z-index: 999; top: 50%; left: 50%; transform: translate(-50%,-50%);}
header .g-nav ul li{ padding: 25px 0;}
header .g-nav ul li a{ font-size: 18px; color: #fff;}
header .open-btn{ cursor: pointer; width: 18px; height: 18px; position: relative; z-index: 59;}
header .open-btn span{ background: #000; display: inline-block; height: 2px; width: 18px; left: 0; transition: all .4s; position: absolute;}
header .open-btn span:nth-of-type(1){ top: 0px;}
header .open-btn span:nth-of-type(2){ top: 8px;}
header .open-btn span:nth-of-type(3){ bottom: 0px;}
header .open-btn.ac span{ background: #fff;}
header .open-btn.ac span:nth-of-type(1){ top: 2px; transform: translateY(6px) rotate(-45deg);}
header .open-btn.ac span:nth-of-type(2){ opacity: 0;}
header .open-btn.ac span:nth-of-type(3){ bottom: 2px; transform: translateY(-6px) rotate(45deg);}
/* footer */
footer .bg{ padding: 20px 0;}
footer .bg .inner{ padding: 0 20px;}
footer .bg .logo-box .logo{ width: 150px; margin-right: 8px;}
footer .bg .logo-box a p{ font-size: 14px;}
footer .bottom{ font-size: 10px; text-align: center; padding: 30px 0;}
footer .bottom .sns,
footer .bottom .new-sns{ margin-bottom: 20px;}
footer .bottom .cp{ margin-top: 10px;}


}