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

header.active + #Mainvisual + #Contents { z-index: -1; }
#Contents .inner { max-width: 1280px; width: 90%; margin-left: auto; margin-right: auto; }
section { padding: 190px 0; font-family: 'Noto Serif JP', serif; font-size: 600; }
h2 { font-size: 1.563em; line-height: 1.5em; letter-spacing: 0.4em; }
header + ul.icon { display: none; }

/*-----------------------------------------------------
Mainvisual
----------------------------------------------------- */
#Mainvisual { height: 100vh; width: 100%; margin-top: -120px; background-position: center bottom; display: flex; justify-content: center; align-items: center;  }
#Slide { position: absolute; z-index: 0; height: 100vh; width: 100%; top: 0; left: 0; z-index: -1; }
#Slide div { height: 100vh; width: 100%; position: absolute; top: 0; left: 0; background-position: center top; background-size: cover; }
#Slide .main01 { background-image: url(../images/top/img_mainvisual.jpg); }
#Slide .main02 { background-image: url(../images/top/img_mainvisual02.jpg); background-position: right top; }
#Slide .main03 { background-image: url(../images/top/img_mainvisual03.jpg); }

#Mainvisual p { font-family: 'Noto Sans JP', sans-serif; font-size: 3.125em; color: #FFF; }
#Mainvisual p br { display: none; }
#Mainvisual ul.icon { position: absolute; right: 0; width: 140px; display: flex; flex-direction: column; }
#Mainvisual ul.icon li { width: 37px; margin: 0 auto; }
#Mainvisual ul.icon li + li { margin-top: 60px; }

/*-----------------------------------------------------
About
----------------------------------------------------- */
#About,#Transaction { display: flex; justify-content: space-between; align-items: flex-start; }
#About h2,#Transaction h2 { -ms-writing-mode: tb-rl; writing-mode: vertical-rl; font-size: 2.500rem; white-space: nowrap; }
#About h2::before,#Transaction h2::before { content: ""; display: inline-block; background: url(../images/ic_ttl.svg); width: 53px; height: 59px; margin-bottom: 15px; }
#About ul,#Transaction ul { max-width: 1100px; width: calc(95% - 53px); display: flex; justify-content: space-between; flex-wrap: wrap; }
#About ul::before { content: "ABOUT"; display: block; width: 100%; margin-bottom: 20px; font-family: Helvetica, Arial, "sans-serif"; font-size: 6.250em; color: #00b5ca; font-weight: bold; }
#About ul li,#Transaction ul li { max-width: 345px; width: 31%; text-align: center; font-size: 1.125em; line-height: 1.5em; }
#About ul li .img,#Transaction ul li .img { width: 100%; overflow: hidden; padding-top: 140%; position: relative; margin-bottom: 25px; }
#About ul li .img img,#Transaction ul li .img img { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; transition: .3s; }
#About ul li a:hover .img img,#Transaction ul li a:hover .img img { transform: scale(1.1); }
#About ul li::after,#Transaction ul li::after { content: "→"; margin-left: 10px; }

/*-----------------------------------------------------
News
----------------------------------------------------- */
#News { background: #eeeeee; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif"; }
#News .inner { display: flex; justify-content: space-between; }
#News .ttl { display: flex; justify-content: space-between; align-items: flex-end; }
#News h2 { font-family: Helvetica, Arial, "sans-serif"; font-size: 6.250em; color: #00b5ca; font-weight: bold; letter-spacing: 0; line-height: 0.8; }
#News .ttl .btn2 { max-width: 198px; width: 33%; font-size: 0.938em; font-weight: bold; margin-bottom: 10px; }
#News .ttl .btn2 a { display: block; width: 100%; text-align: center; position: relative; padding-bottom: 5px; }
#News .ttl .btn2 a::after { content: ""; display: block; width: 100%; height: 20px; background: url(../images/top/view_arrow.svg) no-repeat; position: absolute; bottom: -5px; transition: .3s; }
#News .ttl .btn2 a:hover::after { transform: translateX(20px); }
#News .left { max-width: 650px; width: 50.781%; }
#News .left .img { width: 100%; padding-top: 70%; position: relative; overflow: hidden; }
#News .left .img div { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; }
#News .left .img div { display: none; }
#News .right { max-width: 600px; width: 46.875%; }
#News ul { margin-top: 20px; }
#News ul li { background: #FFF; line-height: 1.5em; }
#News ul li + li { margin-top: 5px; }
#News ul li a { display: block; color: #4c4c4c; padding: 45px; transition: .3s; }
#News ul li a:hover { transform: translateX(-20px); }
#News a .date { display: inline-block; font-size: 0.938em; width: 125px; border-bottom: 1px solid #000; text-align: center; padding-bottom: 5px; margin-bottom: 20px; }
#News a .cat { color: #00b5ca; display: inline-block; font-size: 0.938em; width: 100px; border-bottom: 1px solid #00b5ca; text-align: center; padding-bottom: 5px; }
#News .left a { display: block; color: #4c4c4c; padding: 20px; transition: .3s; }
#News ul li:first-child { display: none; }

#News .left .img .is-active { display: block; animation: fade 0.5s ease; }
@keyframes fade {
    from { opacity: 0; }
    to { opacity: 1; }
}


/*-----------------------------------------------------
Item 
----------------------------------------------------- */
#Item h2,#Calendar h2 { max-width: 650px; width: 55%; }
#Item h2::before { content: "NEW ITEM"; display: block; font-family: Helvetica, Arial, "sans-serif"; font-size: 6.250rem; font-weight: bold; margin-bottom: 25px; letter-spacing: 0; }
#Item { background: url(../images/top/bg_new.png) no-repeat; background-size: cover; font-family: 'Noto Serif JP', serif; font-size: 600; }
#Item .inner,#Calendar .inner { display: flex; justify-content: space-between; align-items: center; color: #FFF; }

/*-----------------------------------------------------
Calendar
----------------------------------------------------- */
#Calendar { background: url(../images/top/bg_calender.png) no-repeat; background-size: cover; font-family: 'Noto Serif JP', serif; font-size: 600; }
#Calendar h2::before { content: "CALENDAR"; display: block; font-family: Helvetica, Arial, "sans-serif"; font-size: 6.250rem; font-weight: bold; margin-bottom: 25px; letter-spacing: 0; }

/*-----------------------------------------------------
Transaction
----------------------------------------------------- */
#Transaction h2 { order: 2; }
#Transaction ul::before { content: "TRANSACTION"; display: block; width: 100%; margin-bottom: 20px; font-family: Helvetica, Arial, "sans-serif"; font-size: 6.250em; color: #00b5ca; font-weight: bold; }

/*-----------------------------------------------------
Brand
----------------------------------------------------- */
#Brand { background: #eeeeee; display: flex; position: relative; padding-bottom: 95px; }
#Brand::before { content: ""; display: block; background: url(../images/top/img_bland.jpg); width: 57%; height: 550px; background-size: cover; z-index: 0; }
#Brand .box { margin-left: auto; background: rgba(255,255,255,0.90); width: 50%; position: absolute; right: 0; bottom: 115px; box-sizing: border-box; }
#Brand .box-inner { max-width: 715px; width: 100%; margin-right: auto; background: url(../images/top/bg_logo.svg) no-repeat right 60px bottom 35px; background-size: 205px auto; padding: 50px 40px; box-sizing: border-box; }
#Brand h2::after { content: "HANDLING\A BRAND"; display: block; width: 100%; margin-top: 15px; font-family: Helvetica, Arial, "sans-serif"; font-size: 6.250rem; color: #00b5ca; font-weight: bold; line-height: 0.9em; white-space: pre; letter-spacing: 0; }
.view { font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif"; margin-top: 30px; }
.view a { display: block; border: 1px solid #b0b0b0; background: #FFF; width: 100%; padding: 10px; text-align: center; font-weight: bold; color: #333; box-sizing: border-box; transition: .3s; }
.view a:hover { background-color: #00b5ca; color: #FFF; border: 1px solid #00b5ca; }

/*-----------------------------------------------------
#Original
----------------------------------------------------- */
#Original { background: #eeeeee; display: flex; position: relative; padding-top: 95px; }
#Original::after { content: ""; display: block; background: url(../images/top/img_original.jpg); width: 57%; height: 550px; background-size: cover; z-index: 0; margin-left: auto; background-position: right center; }
#Original .box { margin-left: auto; background: rgba(255,255,255,0.90); width: 50%; position: absolute; left: 0; bottom: 215px; box-sizing: border-box; z-index: 1; }
#Original .box-inner { max-width: 715px; width: 100%; margin-left: auto; background: url(../images/top/bg_logo.svg) no-repeat right 60px bottom 35px; background-size: 205px auto; padding: 50px 40px; box-sizing: border-box; }
#Original h2::after { content: "ORIGINAL\A LIMITED"; display: block; width: 100%; margin-top: 15px; font-family: Helvetica, Arial, "sans-serif"; font-size: 6.250rem; color: #00b5ca; font-weight: bold; line-height: 0.9em; white-space: pre; letter-spacing: 0; }


@media screen and (max-width: 1920px) {
	#Brand::before,#Original::after { max-width: 1100px; width: 90%; }
}


@media screen and (max-width: 1366px) {
/*-----------------------------------------------------
Mainvisual
----------------------------------------------------- */
	#Mainvisual p { font-size: 3.5vw; }
	
	#About ul::before,#News h2,#Item h2::before,#Calendar h2::before,#Transaction ul::before,#Brand h2::after,#Original h2::after { font-size: 5.625rem; }
	#Brand .box,#Original .box { width: 715px; }
}


@media screen and (max-width: 1023px) {
/*-----------------------------------------------------
Mainvisual
----------------------------------------------------- */
	#Mainvisual { margin-top: 0; }
	header.active + #Mainvisual { margin-top: 0px; }
    #Mainvisual ul.icon { display: none; }
	
	#About ul::before,#News h2,#Item h2::before,#Calendar h2::before,#Transaction ul::before,#Brand h2::after,#Original h2::after { font-size: 4.375rem; }
}


@media screen and (max-width: 768px) {
	section { padding: 90px 0; }
	h2 { font-size: 1.000rem; }
	
/*-----------------------------------------------------
Mainvisual
----------------------------------------------------- */
	#Mainvisual p { text-align: center; font-size: 1.500rem; line-height: 1.8em; }
	#Mainvisual p br { display: block; }
	
/*-----------------------------------------------------
About
----------------------------------------------------- */
	#About,#Transaction { display: block; }
	#About h2,#Transaction h2 { -ms-writing-mode: vertical-rl; writing-mode: horizontal-tb; font-size: 1.250rem; white-space: nowrap; text-align: center; }
	#About h2::before,#Transaction h2::before { display: block; width: 36px; height: 40px; margin: 0 auto 20px auto; }
	#About ul,#Transaction ul { flex-wrap: wrap; width: 100%; }
	#About ul::before,#Transaction ul::before { display: none; }
	#About ul li,#Transaction ul li { max-width: 100%; width: 100%; text-align: center; font-size: 1.125em; margin: 45px auto 0 auto; text-align: center; }
	#About ul li .img,#Transaction ul li .img { padding-top: 0; margin-bottom: 15px; }
    #About ul li .img img,#Transaction ul li .img img { position: static; top: 0; bottom: 0; left: 0; right: 0; margin: auto; transition: 0; }
    #About ul li a:hover .img img,#Transaction ul li a:hover .img img { transform: scale(1); }
	
/*-----------------------------------------------------
News
----------------------------------------------------- */
	#News .inner { width: 100%; }
	#News .left { display: none; }
	#News .right { order: 2; max-width: initial; width: 100%; }
	#News .ttl { align-items: flex-end; width: 90%; margin: 0 auto; }
	#News .ttl .btn2 { max-width: 120px; width: 120px; font-size: 0.750rem; font-weight: bold; margin-bottom: 0; }
	#News .ttl .btn2 a::after { display: none; }
	#News .ttl .btn2 a { display: block; width: 100%; text-align: center; position: relative; padding-bottom: 7px; background: url(../images/top/view_arrow.svg) no-repeat right bottom; }
	#News ul { margin-top: 15px; }
	#News ul li + li { margin-top: 1px; }
	#News ul li a { width: 90%; margin: 0 auto; padding: 20px 0; transition: 0; }
	#News ul li a:hover { transform: translateX(0); }
	#News a .date { font-size: 0.750rem; width: 105px; margin-bottom: 20px; }
	#News a .cat { font-size: 0.750rem; width: 85px; }
	#News ul li:first-child { display: block; }
	
/*-----------------------------------------------------
Item 
----------------------------------------------------- */
	#Item h2,#Calendar h2 { max-width: initial; width: 100%; }
	#Item h2::before { margin-bottom: 15px; }
	#Item { background-position: center; }
	#Item .inner,#Calendar .inner { flex-wrap: wrap; }

/*-----------------------------------------------------
Calendar
----------------------------------------------------- */
	#Calendar { background-position: center; }
	#Calendar h2::before { margin-bottom: 15px; }
	
/*-----------------------------------------------------
Brand
----------------------------------------------------- */
	#Brand { padding-bottom: 60px; }
	#Brand::before,#Original::after { width: 90%; height: 250px; }
	#Brand .box,#Original .box { max-width: 450px; width: 85%; }
	#Brand .box { bottom: 0; }
	#Brand .box-inner,#Original .box-inner { background: url(../images/top/bg_logo.svg) no-repeat right 55px bottom 30px; background-size: 86px auto; padding: 20px 45px 20px 20px; box-sizing: border-box; }
	#Brand h2::after,#Original h2::after { margin-top: 10px; }
	.view { margin-top: 20px; }
	.view a { font-size: 0.750rem; padding: 15px 0; text-align: center; font-weight: bold; color: #333; box-sizing: border-box; }

/*-----------------------------------------------------
#Original
----------------------------------------------------- */
	#Original { padding-bottom: 140px; }
	#Original .box {  bottom: 90px; box-sizing: border-box; z-index: 1; }
	#Original .box-inner { background-position: right 30px bottom 30px; padding: 20px 20px 20px 45px; }
	
	
}

@media screen and (max-width: 480px) {
	#Slide .main01 { background-image: url(../images/top/img_mainvisual_sp.jpg); }
    #Slide .main02 { background-image: url(../images/top/img_mainvisual02_sp.jpg); }
    #Slide .main03 { background-image: url(../images/top/img_mainvisual03_sp.jpg); }
	#Item { background: url(../images/top/bg_new_sp.png) no-repeat left top; background-size: cover; }
	#Calendar { background: url(../images/top/bg_calender_sp.png) no-repeat left top; background-size: cover; }
	#Brand::before { background-image: url(../images/top/img_bland_sp.jpg); }
	#Original::after { background-image: url(../images/top/img_original_sp.jpg); }
	
	#About ul::before,#News h2,#Item h2::before,#Calendar h2::before,#Transaction ul::before,#Brand h2::after,#Original h2::after { font-size: 2.500rem; }
}