@charset 'utf-8';

@import url(https://fonts.googleapis.com/earlyaccess/notosansjapanese.css);

@font-face {
    font-family: 'Noto Sans JP', sans-serif;
    src: url('fonts/NotoSans-Regular.ttf') format('truetype');
    font-weight: normal;
  	font-style: normal;
}

/* reset
------------------------------------------------ */
body,div,pre,p,a,img,form,fieldset,input,textarea,select,option,
dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,table,th,td,embed,object,
figure,figcaption {
	margin: 0;
	padding: 0;
}
html { height: 100%; font-size: 62.5%; }
body {
	width: 100%;
	height: 100%;
	background: #fff;
	-webkit-text-size-adjust: 100%;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 1rem;
	line-height: 1.6;
	color: #606060;
}

ul,ol { list-style: none; }
img { width: auto; height: auto; max-width: 100%; border: none; vertical-align: top; }
a:link { text-decoration: none; color: #606060; }
a:visited { text-decoration: none; color: #606060; }
a:hover { text-decoration: none; }

/* clearfix
------------------------------------------------ */
.clearfix {
	clear: both;
	*zoom: 1;
}
.clearfix:before,.clearfix:after {
	content: ' ';
	display: table;
}
.clearfix:after { clear: both; }

.En { font-family: 'Audiowide'; letter-spacing: .08em; }
.pc { display: block !important; }
.sp { display: none !important; }

/* container
------------------------------------------------ */
#container {
	position: relative;
	padding-top: 100px;
}

	.wrap { 
		position: relative; 
		max-width: 1320px; 
		padding: 0 30px; 
		margin: 0 auto;
	}

/* header
------------------------------------------------ */
#header { width: 100%; height: 100px; z-index: 10; position: fixed; left: 0; top: 0; background: #fff; -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out; }
#header .wrap { max-width: 1600px; }
	#header.move-on { box-shadow: 0 2px 18px 0 rgb(0, 0, 0, .1); }

.head__logo { width: 20.7%; margin-top: 0; height: 73px; display: flex; align-items: flex-end; float: left; }
.head__logo a { display: block; line-height: 1; }
.head__logo a img { width: 100%; }

.head__nav { float: left; display: flex; justify-content: flex-end; align-items: flex-end; width: calc( 100% - 35.4% ); height: 73px; }
.head__nav--list { display: flex; flex-wrap: wrap; }
.head__nav--list li { position: relative; font-size: 17px; font-size: 1.7rem; line-height: 1.2; margin-top: 15px; }
.head__nav--list li:after { content: ''; display: inline-block; position: absolute; right: 0; top: 2px; width: 1px; height: calc( 100% - 4px ); background: #333333; }
.head__nav--list li a { display: block; color: #333333; padding: 0 1.5em; transition: linear .4s; }
.head__nav--list li:last-child:after { content: none; }
.head__nav--list li a:hover { color: #DF0011; }
.head__marubeni { float: right; width: 9.7%; margin-left: 5%; height: 73px; display: flex; align-items: flex-end; }
.head__marubeni a { display: block; }
.head__marubeni a img { width: 100%; }

@media screen and (max-width: 1600px) {
	.head__nav--list li { font-size: 1.06vw; }
}


/* main
------------------------------------------------ */
#main {
	display: block;
	position: relative;
	width: 100%;
}

/* === loading screen === */
#loader-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 10000; }
#loader-images { margin: 0; padding: 0; position: absolute; width: 100%; left: 50%; bottom: 45%; transform: translate(-50%, 0); z-index: 10001; }
#loader-images p { margin: 0; padding: 0; width: 13%; display: block; overflow: hidden; margin: 0 auto; }
#loader-images p img { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }

#loader-wrapper .loader-section { position: fixed; height: 100%; width: calc( 50% + 1px ); background: #fff; z-index: 1000; transform: skew( -45deg ); }
#loader-wrapper .loader-section.section-left { left: -50%; width: calc( 100% + 1px ); }
#loader-wrapper .loader-section.section-right { right: -50%; width: 100%; }

    /* action when loading */
    .loading #loader-images p img { animation: hideFade ease-in .5s forwards .5s; }
    .loading #loader-wrapper .loader-section.section-left { width: 0; -webkit-transition: all 1.5s 1s cubic-bezier(1, .6, 0, .6); transition: all 1.5s 1s cubic-bezier(1, .6, 0, .6); }
    .loading #loader-wrapper .loader-section.section-right { width: 0; -webkit-transition: all 1.5s 1s cubic-bezier(1, .6, 0, .6); transition: all 1.5s 1s cubic-bezier(1, .6, 0, .6); }
    .loading #loader-wrapper { visibility: hidden; -webkit-transition: all .5s 2.5s ease-out; transition: all .5s 2.5s ease-out; /*-webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%);*/ }

/* === general action fade === */
.lazy--fadeIn { -webkit-transition-property: opacity; transition-property: opacity; -webkit-transition-duration: 1s; transition-duration: 1s; -webkit-transition-timing-function: cubic-bezier(.215, .61, .355, 1); transition-timing-function: cubic-bezier(.215, .61, .355, 1); -webkit-transform: translate3d(0,0,0) scale(1.0); transform: translate3d(0,0,0) scale(1.0); opacity: 0;  }
.lazy--fadeUp { -webkit-transition-property: all; transition-property: all; -webkit-transition-duration: .25s; transition-duration: .25s; -webkit-transition-timing-function: cubic-bezier(.215, .61, .355, 1); transition-timing-function: cubic-bezier(.215, .61, .355, 1); -webkit-transform: translate3d(0,10%,0) scale(1.0); transform: translate3d(0,10%,0) scale(1.0); opacity: 0; }
.lazy--fadeLeft { -webkit-transition-property: all; transition-property: all; -webkit-transition-duration: .75s; transition-duration: .75s; -webkit-transition-timing-function: cubic-bezier(.215, .61, .355, 1); transition-timing-function: cubic-bezier(.215, .61, .355, 1); -webkit-transform: translate3d(-15%,0,0) scale(1.0); transform: translate3d(-15%,0,0) scale(1.0); opacity: 0; }
.lazy--fadeRight { -webkit-transition-property: all; transition-property: all; -webkit-transition-duration: .75s; transition-duration: .75s; -webkit-transition-timing-function: cubic-bezier(.215, .61, .355, 1); transition-timing-function: cubic-bezier(.215, .61, .355, 1); -webkit-transform: translate3d(15%,0,0) scale(1.0); transform: translate3d(15%,0,0) scale(1.0); opacity: 0; }
.lazy--delay00 { -webkit-transition-delay: 0s; transition-delay: 0s; }
.lazy--delay01,
.lazy--delay02,
.lazy--delay03,
.lazy--delay04,
.lazy--delay05 { -webkit-transition-delay: .25s; transition-delay: .25s; }

    /* === general action fade lazy-load === */
    .lazy--item--end .lazy--boss.lazy--fadeIn,
    .lazy--item--end.lazy--own.lazy--fadeIn { -webkit-transform: translate3d(0,0,0) scale(1.0); transform: translate3d(0,0,0) scale(1.0); opacity: 1; }
    .lazy--item--end .lazy--boss.lazy--fadeUp,
    .lazy--item--end.lazy--own.lazy--fadeUp { -webkit-transform: translate3d(0,0,0) scale(1.0); transform: translate3d(0,0,0) scale(1.0); opacity: 1; }
    .lazy--item--end .lazy--boss.lazy--fadeLeft,
    .lazy--item--end.lazy--own.lazy--fadeLeft { -webkit-transform: translate3d(0,0,0) scale(1.0); transform: translate3d(0,0,0) scale(1.0); opacity: 1; }
    .lazy--item--end .lazy--boss.lazy--fadeRight,
    .lazy--item--end.lazy--own.lazy--fadeRight { -webkit-transform: translate3d(0,0,0) scale(1.0); transform: translate3d(0,0,0) scale(1.0); opacity: 1; }



@-webkit-keyframes c-arw-btn-circle{0%{-webkit-transform:rotate(90deg);transform:rotate(90deg);stroke-dashoffset:0}100%{-webkit-transform:rotate(270deg);transform:rotate(270deg);stroke-dashoffset:-200px}}@keyframes c-arw-btn-circle{0%{-webkit-transform:rotate(90deg);transform:rotate(90deg);stroke-dashoffset:0}100%{-webkit-transform:rotate(270deg);transform:rotate(270deg);stroke-dashoffset:-200px}}@-webkit-keyframes c-arw-btn-circle-ov{0%{-webkit-transform:rotate(-90deg);transform:rotate(-90deg);stroke-dashoffset:200px}100%{-webkit-transform:rotate(90deg);transform:rotate(90deg);stroke-dashoffset:0}}@keyframes c-arw-btn-circle-ov{0%{-webkit-transform:rotate(-90deg);transform:rotate(-90deg);stroke-dashoffset:200px}100%{-webkit-transform:rotate(90deg);transform:rotate(90deg);stroke-dashoffset:0}}@-webkit-keyframes c-arw-btn-arw{0%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}50%{-webkit-transform:translateX(50%);transform:translateX(50%);opacity:0}50.1%{-webkit-transform:translateX(-50%);transform:translateX(-50%);opacity:0}100%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}@keyframes c-arw-btn-arw{0%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}50%{-webkit-transform:translateX(50%);transform:translateX(50%);opacity:0}50.1%{-webkit-transform:translateX(-50%);transform:translateX(-50%);opacity:0}100%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}@-webkit-keyframes c-arw-btn-arw-back{0%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}50%{-webkit-transform:translateX(-50%);transform:translateX(-50%);opacity:0}50.1%{-webkit-transform:translateX(50%);transform:translateX(50%);opacity:0}100%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}@keyframes c-arw-btn-arw-back{0%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}50%{-webkit-transform:translateX(-50%);transform:translateX(-50%);opacity:0}50.1%{-webkit-transform:translateX(50%);transform:translateX(50%);opacity:0}100%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}
@-webkit-keyframes hideFade { 0% { opacity: 1; } 100% { opacity: 0; } }

@-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } }
@-webkit-keyframes fadeUp { 0% { transform: translate(0px, 50px); opacity: 0; } 100% { transform: translate(0, 0); opacity: 1; } }
@-webkit-keyframes fadeLeft { 0% { transform: translate(-40px, 0); opacity: 0; } 100% { transform: translate(0, 0); opacity: 1; } }

/* footer
------------------------------------------------ */
#footer { position: relative; background-image: linear-gradient(180deg, #DF0011, #530000); }
#footer .wrap { padding: 80px 30px 170px; }
.foot__info { display: flex; flex-wrap: wrap; justify-content: space-between; }
.foot__info--logo { width: 331px; }
.foot__info--links { display: block; overflow: hidden; width: 890px; margin-top: 26px; }
.foot__info--links ul { margin-right: -25px; margin-top: -15px; overflow: hidden; display: flex; flex-wrap: wrap; justify-content: flex-end; }
.foot__info--links ul li { position: relative; font-size: 17px; font-size: 1.7rem; line-height: 1.2; margin-top: 15px; }
.foot__info--links ul li:after { content: ''; display: inline-block; position: absolute; right: 0; top: 2px; width: 1px; height: 16px; background: #fff; }
.foot__info--links ul li a { display: block; color: #fff; padding: 0 25px; transition: linear .4s; }
.foot__info--links ul li a:hover { color: #f44242; }

@media screen and (max-width: 1600px) {
	#footer .wrap { padding: 5vw 1.875vw 10.625vw; }
	.foot__info--logo { width: 20.688vw; }
	.foot__info--links { width: 55.625vw; margin-top: 1.625vw; }
	.foot__info--links ul { margin-right: -1.562vw; margin-top: -0.937vw; }
	.foot__info--links ul li { font-size: 1.063vw; margin-top: 0.938vw; }
	.foot__info--links ul li:after { top: 0.125vw; width: 0.063vw; height: 1vw; }
	.foot__info--links ul li a { padding: 0 1.563vw; }
}

.foot--licence { position: absolute; top: 160px; left: 30px; width: 370px; }
.foot--licence dt { display: block; max-width: 258px; margin-bottom: 12px; }
.foot--licence dd { font-size: 13px; font-size: 1.332rem; color: #fff; }

@media screen and (max-width: 1600px) {
	.foot--licence { top: 10vw; left: 1.875vw; width: 23.125vw; }
	.foot--licence dt { max-width: 16.125vw; margin-bottom: 0.75vw; }
	.foot--licence dd { font-size: 0.813vw; }
}

#pagetop { display: none; position: absolute; bottom: auto; top: -100px; right: 20px; width: 80px; height: 80px; overflow: hidden; z-index: 5; }
#pagetop.fixed { position: fixed; right: 20px; bottom: 20px; top: auto; }
#pagetop a { display: block; transition: linear .4s; }
#pagetop a:hover { opacity: .5; }

/* Responsive
------------------------------------------------ */
@media screen and (max-width: 1240px) {
    .foot__info--links { width: calc( 100% - 331px ); }
}
@media screen and (max-width: 1024px) {

	.pc { display: none !important; }
	.sp { display: block !important; }

	#container { padding-top: 50px; }

	/* header
	------------------------------------------------ */
	#header { width: 100%; height: 50px; z-index: 10; position: fixed; left: 0; top: 0; background: #fff; box-shadow: 0 2px 18px 0 rgb(0, 0, 0, .1); }
	#header .wrap { max-width: 1600px; }
	.head__logo { position: relative; width: 156px; margin-top: 14px; margin-left: 64px; height: auto; display: block; z-index: 111; }

	.head__nav { float: none; display: block; width: 100%; height: auto; }
	.head__nav--list { display: block; }
	.head__nav--list li { font-size: 14px; font-size: 1.4rem; line-height: 1.2; margin-top: 0; border-bottom: 1px solid #F44242; text-align: left; }
    .head__nav--list li:after { content: none; }
    .head__nav--list li a { color: #fff; padding: 24px 0; background: url(../img/share/arrow-links.png) no-repeat right 10px center; background-size: 5.5px; }
    .head__nav--list li a:hover { color: #fff; }

    	.head__nav--list li:first-child { border-top: 1px solid #F44242; }
    	.head__nav--list li:last-child { margin-top: 50px; border: 1px solid #fff; text-align: center; -webkit-border-radius: 5px; border-radius: 5px; }
    	.head__nav--list li:last-child a { padding: 17px 0; background: none; }

	.head__marubeni { position: absolute; float: none; width: 60px; left: 15px; top: 17px; margin: 0; height: auto; z-index: 111; }

		/* spmenu */
		.header_a_spmenu {
		    display: block;
		    width: 26px;
		    height: 20px;
		    padding: 15px;
		    position: absolute;
		    top: 0;
		    right: 0;
		    z-index: 111;
		    /*-webkit-transform:translateY(-50%);
		    transform:translateY(-50%);*/
		}
		.header_a_spmenu:before,
		.header_a_spmenu:after,
		.header_a_spmenu_span {
		    content: '';
		    display: block;
		    width: 26px;
		    height: 2px;
		    background: #333;
		    position: absolute;
		    left: 15px;
		    transition: all 300ms cubic-bezier(.25,.1,.25,1) 300ms,-webkit-transform 400ms cubic-bezier(.775,-.185,0,1.01) 0ms;
		    transition: all 300ms cubic-bezier(.25,.1,.25,1) 300ms,transform 400ms cubic-bezier(.775,-.185,0,1.01) 0ms;
		    transition: all 300ms cubic-bezier(.25,.1,.25,1) 300ms,transform 400ms cubic-bezier(.775,-.185,0,1.01) 0ms,-webkit-transform 400ms cubic-bezier(.775,-.185,0,1.01) 0ms
		}
		.js-spmenuon .header_a_spmenu:before,
		.js-spmenuon .header_a_spmenu:after,
		.js-spmenuon .header_a_spmenu_span {
		    width: 20px;
		    left: 19px;
		    background: #fff;
		    -webkit-transform-origin: center center;
		    transform-origin: center center;
		    transition: all 300ms cubic-bezier(.25,.1,.25,1) 0ms,-webkit-transform 400ms cubic-bezier(.775,-.185,0,1.01) 200ms;
		    transition: all 300ms cubic-bezier(.25,.1,.25,1) 0ms,transform 400ms cubic-bezier(.775,-.185,0,1.01) 200ms;
		    transition: all 300ms cubic-bezier(.25,.1,.25,1) 0ms,transform 400ms cubic-bezier(.775,-.185,0,1.01) 200ms,-webkit-transform 400ms cubic-bezier(.775,-.185,0,1.01) 200ms
		}
		.header_a_spmenu:before{
		    top: 19px;
		    -webkit-transform-origin: left top;
		    transform-origin: left top
		}
		.js-spmenuon .header_a_spmenu:before{
		    top: 50%;
		    margin-top: -2px;
		    -webkit-transform: rotate(45deg);
		    transform: rotate(45deg)
		}
		.header_a_spmenu:after{
		    bottom: 19px;
		    -webkit-transform-origin: left bottom;
		    transform-origin: left bottom
		}
		.js-spmenuon .header_a_spmenu:after{
		    bottom: 50%;
		    -webkit-transform: rotate(-45deg);
		    transform: rotate(-45deg)
		}
		.header_a_spmenu_span{
			display: none;
		    top: 50%;
		    margin-top: -1px;
		    -webkit-transform-origin: center top;
		    transform-origin: center top
		}
		.js-spmenuon .header_a_spmenu_span{
		    opacity: 0;
		    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"
		}

		#head_menu {
		    position: fixed;
		    width: 100%;
		    background-image: linear-gradient(222deg, rgb(229 0 17 / 95%) 40%, rgb(83 0 0 / 95%) 100%);
		    color: #fff;
		    top: 0;
		    left: 100%;
		    width: 100%;
		    opacity: 0;
		    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
		    transition: opacity .6s cubic-bezier(.25,.1,.25,1),left 0s cubic-bezier(.25,.1,.25,1) .6s;
		    z-index: 100;
		    text-align: center;
		    -webkit-box-sizing: border-box;
		    box-sizing: border-box;
		}
			.head_menu--frame {
				padding: 100px 30px 50px;
			    height: -webkit-calc(100vh - 150px);
			    height: calc(100vh - 150px);
			    -webkit-overflow-scrolling: touch;
			    overflow: auto;
			}


	/* js-spmenuon */
	body.js-spmenuon { overflow: hidden; }
	.js-spmenuon #head_menu { position: absolute; left: 0; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; transition: opacity .6s cubic-bezier(.25,.1,.25,1); }
	.js-spmenuon .head__logo a img { opacity: 0; }
	.js-spmenuon .head__logo a { background: url(../img/share/logo-w.png) no-repeat center; background-size: 100%; }
	.js-spmenuon .head__marubeni a img { opacity: 0; }
	.js-spmenuon .head__marubeni a { background: url(../img/share/marubeni-group-w.png) no-repeat center; background-size: 100%; }


	/* footer
	------------------------------------------------ */
	#footer {  }
    #footer .wrap { padding: 50px 30px 20px; }
    .foot__info { display: block; }
    .foot__info--logo { width: 225px; display: block; margin: 0 auto; }
    .foot__info--links { display: block; overflow: hidden; width: 100%; margin-top: 20px; }
    .foot__info--links ul { margin: 0; overflow: hidden; display: block; }
    .foot__info--links ul li { font-size: 14px; font-size: 1.4rem; line-height: 1.2; margin-top: 0; border-bottom: 1px solid #F44242; }
    .foot__info--links ul li:after { content: none; }
    .foot__info--links ul li a { padding: 18px 0; background: url(../img/share/arrow-links.png) no-repeat right 10px center; background-size: 5.5px; }

    .foot--licence { position: relative; top: auto; left: auto; margin-top: 50px; width: 100%; text-align: center; }
    .foot--licence dt { display: block; max-width: 206px; margin: 0 auto 8px; }
    .foot--licence dd { font-size: 10px; font-size: 1rem; }

    #pagetop { top: -50px; right: 10px; width: 40px; height: 40px; }
    #pagetop.fixed { right: 10px; bottom: 10px; }


	/* === loading screen === */
	#loader-images p { margin: 0; padding: 0; width: 162px; display: block; overflow: hidden; margin: 0 auto; }

	#loader-wrapper .loader-section { position: fixed; height: 100%; width: calc( 50% + 1px ); background: #fff; z-index: 1000; transform: skew( -45deg ); }
	#loader-wrapper .loader-section.section-left { left: -100%; width: calc( 150% + 1px ); }
	#loader-wrapper .loader-section.section-right { right: -100%; width: 150%; }

}