@charset "UTF-8";
/*--------------------------------------------
FONTSIZE TO REM
---------------------------------------------*/
@media screen and (max-width: 750px){
	html{
		font-size: calc( 10 * 100vw / 750 );
	}
}
@media print,screen and (min-width: 751px){
	html{
		font-size: 10px;
	}
}
@media screen and (max-width: 750px){
	body{
		font-size: 2.6rem;
	}
}
@media print,screen and (min-width: 751px){
	body{
		font-size: 1.8rem;
	}
}
/*--------------------------------------------
BODY
---------------------------------------------*/
@media screen and (max-width: 750px){
	body{
		padding-top: calc( 132 * 100vw / 750 );
	}
}
@media print,screen and (min-width: 751px){
	body{
		min-width: 1080px;
	}
}
/*--------------------------------------------
WRAPPER
---------------------------------------------*/
@media screen and (max-width: 750px){
	.wrap{
		width: 100%;
		padding-left: calc( 24 * 100% / 750 );
		padding-right: calc( 24 * 100% / 750 );
	}
}
@media print,screen and (min-width: 751px){
	.wrap{
		width: 1080px;
		padding-left: 10px;
		padding-right: 10px;
		position: relative;
		margin-left: auto;
		margin-right: auto;
	}
}

/*--------------------------------------------
BOX
---------------------------------------------*/
@media screen and (max-width: 750px){
	section {
		padding-bottom: calc( 120 * 100% / 750 );
	}
	.sec + .sec {
		margin-top: calc( 80 * 100% / 750 );
	}
}
@media print,screen and (min-width: 751px){
	section {
		padding-bottom: 100px;
		position: relative;
	}
	.sec + .sec {
		margin-top: 80px;
	}
}

/*--------------------------------------------
HEADER
---------------------------------------------*/
#header .logo a {
	display: block;
}
@media screen and (max-width: 750px){
	#header {
		background-color: #fff;
		left: 0;
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 10;
	}
	#header .wrap{
		align-items: center;
		display: flex;
		justify-content: center;
		height: calc( 132 * 100vw / 750 );
		padding-left: calc( 44 * 100% / 750 );
		padding-right: calc( 44 * 100% / 750 );
	}
	#header .logo {
		align-items: center;
		display: flex;
		justify-content: center;
	}
	#header .logo img {
		height: calc( 69 * 100vw / 750 );
	}
}
@media print,screen and (min-width: 751px){
	#header .wrap {
		display: flex;
		justify-content: space-between;
		height: 135px;
		padding-left: 36px;
		padding-right: 11px;
		position: relative;
	}
	#header strong {
		font-size: 1.1rem;
		position: absolute;
		top: 3px;
	}
	#header .logo {
		align-items: center;
		display: flex;
	}
	#header .logo img {
		height: 51px;
	}
}

/*--------------------------------------------
MENU BUTTON
---------------------------------------------*/
@media screen and (max-width: 750px){
	#menuBtn {
		height: calc( 38 * 100vw / 750 );
		position: fixed;
		right: calc( 44 * 100% / 750 );
		top: calc( 42 * 100vw / 750 );
		width: calc( 50 * 100% / 750 );
		z-index: 12;
	}
	#menuBtn span {
		background-color: #000;
		border-radius: calc( 3 * 100vw / 750 );
		display: block;
		height: calc( 4 * 100vw / 750 );
		left: 0;
		position: absolute;
		right: 0;
		top: calc( ( 100% - ( 4 * 100vw / 750 ) ) / 2 );
		transition: .3s;
	}
	#menuBtn span:nth-child(1) {
		transform: translateY( -10px );
	}
	#menuBtn span:nth-child(3) {
		transform: translateY( 10px );
	}
	body.is-open{
		overflow: hidden;
	}
	body.is-open #menuBtn span:nth-child(1) {
		transform: rotate( 45deg );
	}
	body.is-open #menuBtn span:nth-child(2) {
		opacity: 0;
	}
	body.is-open #menuBtn span:nth-child(3) {
		transform: rotate( -45deg );
	}
}

/*--------------------------------------------
NAV
---------------------------------------------*/
@media screen and (max-width: 750px){
	body.is-open #nav {
		max-height: calc( 100dvh - ( 132 * 100vw / 750 ) );
	}
}
@media screen and (max-width: 750px){
	#nav {
		backface-visibility: hidden;
		background-color: rgba( 0, 0, 0, .95 );
		left: 0;
		max-height: 0;
		overflow: hidden;
		overflow-y: scroll;
		position: fixed;
		top: calc( 132 * 100vw / 750 );
		transition: max-height .5s ease-in;
		width: 100%;
		will-change: max-height;
		z-index: 10;
	}
	#nav .scroll {
		padding-block: calc( 74 * 100vw / 750 );
		padding-inline: calc( 44 * 100% / 750 );
	}
}
/*--------------------------------------------
GLOBAL NAV
---------------------------------------------*/
@media screen and (max-width: 750px){
	#globalNav > li + li:not(.close-btn){
		border-top:solid #fff calc( 2 * 100vw / 750 );
	}
	#globalNav picture{
		display: block;
		width: 100%;
	}
	#globalNav > li > a {
		display: grid;
		place-items: center start;
		height: calc( 120 * 100vw / 750 );
		padding-inline: calc( 9 * 100% / 662 );
	}
	#globalNav > li:not(.close-btn) > a > picture > img{
		width: calc( var(--widthSp) * 100% / 644 );
	}
	#globalNav ul{
		margin-left: calc( 45 * 100% / 662 );
		padding-bottom: calc( 45 * 100vw / 750 );
	}
	#globalNav ul li + li{
		margin-top: calc( 45 * 100vw / 750 );
	}
	#globalNav ul img{
		width: calc( var(--widthSp) * 100% / 617 );
	}
	#globalNav li.close-btn {
		display: flex;
		justify-content: center;
		padding-bottom: calc( 40 * 100vw / 750 );
		padding-top: calc( 40 * 100vw / 750 );
	}
	#globalNav li.close-btn span {
		display: block;
		height: calc( 50 * 100vw / 750 );
	    position: relative;
	    width: calc( 64 * 100vw / 750 );
	}
	#globalNav li.close-btn span:before,
	#globalNav li.close-btn span:after {
		background: #fff;
		content: '';
		display: block;
		height: calc( 4 * 100vw / 750 );
		left: 14%;
		position: absolute;
		top: calc( 14% - 5px );
		transform: rotate( 45deg );
		transform-origin: 0% 50%;
		width: 100%;
	}
	#globalNav li.close-btn span:after {
		left: auto;
		right: 14%;
		transform: rotate( -45deg );
		transform-origin: 100% 50%;
	}
}
@media print,screen and (min-width: 751px){
	#globalNav {
		display: flex;
		justify-content: flex-end;
		height: 127px;
		border-right: 1px solid #ccc;
	}
	#globalNav > li {
		height: 100%;
		display: flex;
	}
	#globalNav > li + li:not(.close-btn){
		border-left: 1px solid #ccc;
	}
	#globalNav > li > a {
		display: flex;
		justify-content: center;
		padding-top: 9px;
		width: 80px;
		height: 100%;
	}
	#globalNav ul{
		display: flex;
		margin-top: 17px;
		height: 105px;
	}
	#globalNav ul li{
		height: 100%;
	}
	#globalNav ul > li + li{
		border-left: 1px solid #ccc;
	}
	#globalNav ul a{
		padding-top: 5px;
		display: block;
		height: 100%;
		padding-inline: 13px;
	}
	#globalNav a img {
		width:calc( var(--widthPc) * 1px );
		height: auto;
	}
}

/*--------------------------------------------
FOOTER
---------------------------------------------*/
#footer {
	background-color: #666;
	color: #fff;
	position: relative;
	text-align: center;
}
#footer .wrap {
	display: flex;
	justify-content: center;
}
    #footer .powerd {
        margin-bottom: 1em;
    }
        #footer .powerd a {
            color: #fff;
        }
@media screen and (max-width: 750px){
	#footer .wrap {
		align-items: center;
		height: calc( 247 * 100vw / 750 );
	}
}
@media print,screen and (min-width: 751px){
	#footer .wrap {
		flex-direction: column;
		padding-top: 40px;
		padding-bottom: 60px;
	}
	#footer .foot-nav {
		display: flex;
		justify-content: center;
		margin-bottom: 60px;
	}
	#footer .foot-nav li {
		border-right: 1px solid #fff;
	}
	#footer .foot-nav li:first-child {
		border-left: 1px solid #fff;
	}
	#footer .foot-nav li a {
		color: #fff;
		display: block;
		font-size: 1.6rem;
		font-weight: 500;
		padding: 0 calc( 20 * 100vw / 750 );
	}
}

/*--------------------------------------------
SCROLL NAV
---------------------------------------------*/
@media print,screen and (min-width: 751px){
	#scroll-nav {
		background-color: rgba( 254, 254, 254, .9 );
		display: none;
		left: 0;
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 5;
	}
	#scroll-nav a {
		display: block;
	}
	#scroll-nav .wrap {
		align-items: center;
		display: flex;
		height: 80px;
		justify-content: space-between;
		padding-left: 30px;
	}
	#scroll-nav .logo {
		width: 52px;
	}
	#scroll-nav .logo img {
		height: 44px;
	}
	#scroll-nav ul {
		display: flex;
		align-items: center;
		height: 20px;
	}
	#scroll-nav li{
		height: 100%;
	}
	#scroll-nav li + li {
		border-left: 2px solid #000;
	}
	#scroll-nav li a {
		align-items: center;
		display: flex;
		padding-inline:14px;
		height: 100%;
	}
	#scroll-nav li a img{
		height: calc( var(--height) * 1px );
	}
}