/* common */
body {font-size: 1.6rem;}

/* header */
#header{
position: fixed;
width: 100%;
z-index: 100;
transition: .5s;
height:80px;
}
#header_inner{
max-width:1280px;
width:90%;
}
#header h1 {
display:grid;
place-content:center;
place-items: center;
width:25%;
}
#header h1 a {height:86%; display:block;}
#header h1 a img {height:100%;}
#header.menuopen-big{
height:80px;
}
#header.menuopen-small{
height:60px;
}
#header.menuopen-small h1 {

}
#header.menuopen-small h1 a {height:80%;}


/* header-sns */
#header-sns{width:20%;}
#header-sns nav {height:100%;}
#header-sns ul{display: flex; justify-content: center;align-items: center; height:100%;gap:2.25rem;}
#header-sns ul li {flex-basis:calc(100% / 5);position:relative; max-width:12.5%;}
#header-sns ul li a {display:block; transition: .5s;}
#header-sns ul li a:hover {transform: scale(1.2);}
#header-sns svg {width:100%; height: 2vw;}

/*gnavi-pc*/
#gnavi-pc {width:55%;}
#gnavi-pc > ul {
display: flex;
justify-content: center;
align-items: center;
height:100%;
}
#gnavi-pc > ul > li {
text-align:center;
padding: 0 4%;
}
#gnavi-pc > ul > li > a {
font-size:clamp(1.5rem,1.5vw,2rem);
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
white-space: nowrap;
}
#gnavi-pc ul li a:hover {
font-weight:800;
}
#gnavi-pc ul li a:after {
	display: block;
	position: absolute;
	content: '';
	width: 0%;
	height: 2px;
	margin: 0;
	bottom: -2px;
	background-color: #fff;
	transition: all .3s ease-out;
}
@-moz-document url-prefix() {
#gnavi-pc ul li a:after { margin-top: 2em; }
}
#gnavi-pc ul li a:hover:after {width:100%;}
#gnavi-pc .submenu { position: relative; }
#gnavi-pc .submenu-container {
display:block;
visibility: hidden;
opacity: 0;
position: absolute;
left: -160px;
width: 320px;
min-height:160px;
padding:2rem;
margin-left:50%;
transform: translateY(-1em);
z-index: 2;
transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s;
border-radius: .5rem;
background-color: #fff;
box-shadow: 0rem .5rem 1rem rgba(0,0,0,0.16);
}
#gnavi-pc .submenu-container:before {
content:"";
position: absolute;
width: 0;
height: 0;
top: -10px;
left: 50%;
margin-left: -10px;
border-style: solid;
border-width: 0 10px 10px 10px;
border-color: transparent transparent #FFF transparent;
}
#header.menuopen-big .submenu-container {
top: 52px;
}
#header.menuopen-small .submenu-container {
top: 42px;
}
#gnavi-pc .submenu:focus .submenu-container,
#gnavi-pc .submenu:focus-within .submenu-container,
#gnavi-pc .submenu:hover .submenu-container {visibility: visible; opacity: 1;z-index: 3;transform: translateY(0%);transition-delay: 0s, 0s, 0.3s;
}
#gnavi-pc .submenu-container:nth-of-type(1) {
}
#gnavi-pc .gnavi-pc-child-contents b{
display:block;
margin-bottom:3rem;
color:#D50;
text-align:left;
border-bottom: 1px #0099DD solid;
padding:1.5rem 0;
font-size:1.8rem;
}
#gnavi-pc .gnavi-pc-child-contents ul {
list-style-type: disc;
list-style-position: inside;
padding:.5rem 0 1rem;
}
#gnavi-pc .gnavi-pc-child-contents ul li {
text-align:left;
margin-top:1.5rem;
padding-left: 5px;
color:#0099DD;
}
#gnavi-pc .gnavi-pc-child-contents ul li a {
display:inline-block;
position: relative;
color:#0099DD;
}
#gnavi-pc .gnavi-pc-child-contents ul li a svg {
width:1.2rem;
height:1.2rem;
vertical-align:baseline;
fill:#0099DD;
}
#gnavi-pc .gnavi-pc-child-contents ul li a:after {
margin-top: 0;
background-color: #0099DD;
}

#header-nav-topics {
padding-bottom:0;
position:relative;
padding-top:2rem;
}
#header-nav-topics:before {
position:absolute;
top:0;
left:0;
content:"FEATURE POST";
color:#FFF;
background:#0099DD;
font-size:1rem;
font-weight:100;
width:100%;
line-height:1;
padding:.25em 0 .3em;
}
#header-nav-topics li{
margin-top: .3rem !important;
}

#header-nav-postTag {
position:relative;
padding-top:1.5em;
margin-top: .5rem;
}
#header-nav-postTag:before {
position:absolute;
top:0;
left:0;
content:"TOPICS TAG";
color:#FFF;
background:#0099DD;
font-size:1rem;
font-weight:100;
width:100%;
line-height:1;
padding:.25em 0 .3em;
}
#header-nav-postTag ul {
display:flex; flex-wrap:wrap; justify-content:center;
padding:0;
gap:10px 10px;
}
#header-nav-postTag li {
list-style-type:none;
margin-top:0 !important;
text-align:center;
padding:.15em .5em;
border:1px solid #0099DD;
}
#header-nav-postTag li a {
display:inline-block;
}

/* mainvisual */
#toppage #mainvisual {
position: relative;
background: #E9E9E9;
}
#toppage .mv-img{
position: absolute;
inset: 0;
z-index: 0;
max-width: 1920px;
margin: 0 auto;
}
#toppage .mv-img img{
width: auto;
object-fit: contain;
object-position: 50% 50%;
}
#toppage .mv-name {
position: absolute;
top: 54%;
left: 47%;
transform: translate(50%,-50%);
z-index: 2;
width: 31%;
min-width:320px;
max-width:400px;
}
#toppage .mv-name p {
font-size:2.4vw;
line-height:1;
margin:0 0 1rem;
text-align:center;
}
#toppage .mv-catchcopy {
position: absolute;
top: 75%;
left: 50%;
transform: translate(-125%, -50%);
z-index: 2;
width: 35%;
min-width:400px;
max-width:500px;
}

#footer-menu {height: 12em;}
#footer-logo {display:grid; place-content:center;}
#footer-logo p {width:25vw; margin:0 auto 2vw;}
#footer-logo ul {
    justify-content: center;
    gap: 0 10%;
    max-width:none;
    margin: 0 auto;
}
#footer-logo ul li {height:100%;}
#footer-logo ul li svg {width:100%; height: 3vw;}

#copyright {
color:#fff;
flex-basis:100%;
width:100%;
text-align:center;
order:4;
margin-top:2vw;
}
