@charset "UTF-8";
@font-face {
    font-family: 'q_stencilregular';
    src: url('../../../assets/font/q_stencil/q_stencil-webfont.woff2') format('woff2'),
         url('../../../assets/font/q_stencil/q_stencil-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

body { font-family: aktiv-grotesk, ryo-gothic-plusn, sans-serif }
h2, h3, h4, h5 { font-family: aktiv-grotesk, ryo-gothic-plusn, sans-serif }

.stencil { font-family: 'q_stencilregular'; }

span { line-height: 1 }
p { font-size: 16px; }

a:hover { text-decoration: none; }


.main { position: relative; margin: 0 0 6px; background: #231815; opacity: 0 }
.main .tit-box { position: absolute; top: 4.4vw; left: 0; text-align: center; width: 100%; }
.main .tit-box h2 { color: #fff; font-size: 4.4vw; font-weight: 500; line-height: 1; letter-spacing: 0.18em; margin: 2.2vw 0 0 -2vw; }
.main .tit-box .logo img { width: 29vw; margin: 0 0 0 -0.4vw; }
.main .tit-box .date { color: #fff; font-size: 1.7vw; font-weight: 100; letter-spacing: 0.22em; margin: 1.3vw 0 0; }
.main .tx { color: #fff; font-size: 1.4vw; text-align: center; letter-spacing: 0.2em; line-height: 1; padding: 3.6vw 0; }


.tab { text-align: center; width:100%; }
.tab li { width: 50%; float: left; }
.tab li a { font-size: 20px; font-weight: 500; line-height: 1; text-decoration: none; padding: 20px 0; background: #d9dade; display: block; }
.tab li a:hover { color: #fff; }
.tab li .cur { background: #9d9a9c !important; }
.tab.fixed{ position: fixed; z-index: 999; top:0; left:0; }


.intro-inner { margin: 90px 0 0; position: relative; }
.intro .tit { font-size: 88px; text-align: left; line-height: 0.7; border-bottom: 1px solid #d9dade; padding: 100px 0 0 5vw; }
.intro p { font-size: 17px; padding: 0 17.6vw; }
.intro .mincho { font-size: 36px; font-weight: 400; position: absolute; top: -30px; left: 8.8vw; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; }
.clear-frame .intro-inner p { padding: 0 17.6vw 30px; }


.item-list01 { padding: 120px 0 0; }
.item-list01 ul li { margin: 0 0 100px; }
.item-list01 ul li .btn a { font-size: 17px; font-weight: 600; padding: 10px 30px; background: #d9dade; display: block; }
.item-list01 ul li .btn a .arw { vertical-align: middle; margin: 0 0 0 10px; transition: 0.2s; }
.item-list01 ul li .btn a:hover .arw { transform:translate(5px); }
.item-list01 ul li .btn02 a:nth-child(1) { padding: 10px 30px 0; }
.item-list01 ul li .btn02 a:nth-child(2) { padding: 0 30px 10px; }
.item-list01 ul li .tx { margin: 40px 0 0 18vw; position: relative; }

.crown-panto .item-list01 ul li .tx-inner { padding: 0 8.8vw 10px 23vw; }
.clear-frame .item-list01 ul li .tx-inner { padding: 0 8.8vw 10px 27vw; }

.item-list01 ul li h4 { font-size: 3.5vw; font-weight: 600; letter-spacing: 0.1em; line-height: 1; position: absolute; top: -0.7vw; left: 0; }
.item-list01 ul li h4 .col { font-size: 2.3vw; font-weight: 400; }
.item-list01 ul li h4 .mincho { font-size: 1.6vw; letter-spacing: 0.1em; font-weight: 500; display: block; margin: 15px 0 0; }
.item-list01 ul li h5 { font-size: 20px; margin: 0 0 10px; }

.crown-panto .item-list01 ul li:nth-child(odd) .pic { margin: 0 0 60px 17.6vw; position: relative; }
.crown-panto .item-list01 ul li:nth-child(odd) .num { position: absolute; top: -3vw; left: -12.5vw; width: 16.3vw; }
.crown-panto .item-list01 ul li:nth-child(odd) .btn { position: absolute; bottom: -0.8vw; left: -8.8vw; }
.crown-panto .item-list01 ul li:nth-child(even) .pic { position: relative; margin: 0 17.6vw 60px 0; }
.crown-panto .item-list01 ul li:nth-child(even) .num { position: absolute; top: -3.3vw; right: -11.4vw; width: 16.3vw; }
.crown-panto .item-list01 ul li:nth-child(even) .btn { position: absolute; bottom: -0.8vw; right: -8.8vw; }

.clear-frame .item-list01 ul li:nth-child(odd) .pic { position: relative; margin: 0 17.6vw 60px 0; }
.clear-frame .item-list01 ul li:nth-child(odd) .num { position: absolute; top: -3.3vw; right: -11.4vw; width: 16.3vw; }
.clear-frame .item-list01 ul li:nth-child(odd) .btn { position: absolute; bottom: -0.8vw; right: -8.8vw; }
.clear-frame .item-list01 ul li:nth-child(even) .pic { margin: 0 0 60px 17.6vw; position: relative; }
.clear-frame .item-list01 ul li:nth-child(even) .num { position: absolute; top: -3vw; left: -12.5vw; width: 16.3vw; }
.clear-frame .item-list01 ul li:nth-child(even) .btn { position: absolute; bottom: -0.8vw; left: -8.8vw; }


.item-list02 h4 { font-size: 22px; letter-spacing: 0.08em; padding: 0 0 15px 8.8vw; }
.item-list02 ul { margin: 0 0 0 -1px; text-align: center; border-top: 1px solid #d9dade; }
.item-list02 ul li { width: calc(25% - 1px); float: left; background: #fff; margin: 0 0 1px 1px; }
.item-list02 ul li p { font-size: 16px; font-weight: 500; margin: 1.6vw 0 0; }
.item-list02 ul li p span { font-size: 11px; display: block; }
.item-list02 ul li a { text-decoration: none; padding: 4vw 1.1vw 2.2vw 1.1vw; display: block; border-right: 1px solid #d9dade; border-bottom: 1px solid #d9dade; }
.item-list02 ul li a:hover img { transform: scale(1.04); transition:0.2s all; }
.item-list02 ul li:nth-child(4n) a { border-right: none; }	


.collection { padding: 160px 0 0; }
.collection h3 { font-size: 60px; font-weight: 500; letter-spacing: 0.06em; line-height: 1; margin: 0 0 40px; padding: 0 8.8vw; }
.collection h3 .stencil { font-size: 60px !important; display: inline !important; }
.collection h3 span { font-size: 22px; font-weight: 500; display: block; margin: 15px 0 0; }
.collection ul { padding: 0 8.8vw; }
.collection ul li { margin: 0 0 120px; }
.collection ul li:last-child { margin: 0; }
.collection ul li .pic { margin: 0 0 50px; position: relative; }
.collection ul li h4 { color: #fff; font-size: 3.5vw; font-weight: 600; letter-spacing: 0.1em; line-height: 1; position: absolute; top: 5.5vw; left: 5.5vw; }
.collection ul li h4 .col { font-size: 2.3vw; font-weight: 400; }
.collection ul li h4 .mincho { font-size: 1.6vw; letter-spacing: 0.1em; font-weight: 500; display: block; margin: 15px 0 0; }
.collection ul li p { font-size: 18px; font-weight: 550; }
.collection ul li .btn a { font-size: 17px; font-weight: 600; padding: 10px 30px; background: #d9dade; display: block; }
.collection ul li:nth-child(odd) .btn { position: absolute; bottom: -0.8vw; right: -8.8vw; }
.collection ul li:nth-child(even) .btn { position: absolute; bottom: -0.8vw; left: -8.8vw; }
.collection ul li .btn a .arw { vertical-align: middle; margin: 0 0 0 10px; transition: 0.2s; }
.collection ul li .btn a:hover .arw { transform:translate(5px); }


.btn-store { text-align: center; padding: 60px 8.8vw 0; }
.btn-store a { font-size: 20px; font-weight: 600; letter-spacing: 0.2em; background: #ececee; max-width: 690px; padding: 25px 0; margin: 0 auto; display: block; position: relative; transition: 0.2s all; }
.btn-store a:hover { transform: scale(1.04); }
.btn-store a .arw { position: absolute; top: calc(50% - 10px); right: 30px; }


.sns { text-align: center; padding: 90px 0 0; } 
.sns h4 { font-size: 24px; font-style: italic; margin: 0 0 20px; }
.sns ul { font-size: 0; }
.sns ul li { display: inline-block; margin: 0 10px; }
.sns ul li a { background: #f5f5f6; width: 100px; padding: 35px 0; border-radius: 80px; display: block; transition: 0.2s all; }
.sns ul li a:hover { transform: scale(1.1); }


.link-card { padding: 100px 0 0; text-align: center; }
.link-card h4 { font-size: 36px; margin: 0 0 20px; }
.link-card ul { margin: 0 0 0 -1px; }
.link-card ul li { float: left; width: calc(50% - 1px); text-align: left; margin: 0 0 0 1px; overflow: hidden; }
.link-card ul li a { position: relative; }
.link-card ul li a.cur { opacity: 0.25; }
.link-card ul li p { color: #fff; font-size: 3.5vw; font-weight: 600; line-height: 1; position: absolute; bottom: 3.6vw; left: 2.9vw; }
.link-card ul li span { font-size: 1.3vw; font-weight: normal; margin: 0.7vw 0 0; display: block; }
.link-card ul li a .arw { position: absolute; bottom: 4.4vw; right: 2.2vw; width: 3.2vw; transition: 0.2s; }
.link-card ul li a:hover .arw { transform:translate(10px); }
.link-card img { transition:0.4s all;}
.link-card img:hover {transform:scale(1.04);}

.footer { padding: 50px 0 160px; text-align: center; }
.footer p { font-size: 14px; }


@media screen and (max-width: 780px) {
	
	p { font-size: 14px; }
	
	
	.main { margin: 0 0 3px; }
	.main .tit-box { position: absolute; top: 3vw; }
	.main .tit-box h2 { font-size: 6.6vw; margin: 2vw 0 0 0; }
	.main .tit-box .logo img { width: 43vw; }
	.main .tit-box .date { font-size: 3vw; margin: 1vw 0 0; }
	.main .tx { font-size: 3vw; padding: 6vw 0; }

	.tab li a { font-size: 16px; padding: 15px 0; }
	
	.intro-inner { margin: 30px 0 0; }
	.intro .tit { font-size: 40px; text-align: left; line-height: 1; padding: 50px 0 0 4.4vw; }
	.intro p { font-size: 15px; padding: 0 4.4vw 0 18vw; }
	.intro .mincho { font-size: 24px; top: -10px; left: 4.4vw; }
	.clear-frame .intro-inner p { padding: 0 4.4vw 0 18vw; }


	.item-list01 { padding: 60px 0 0; }
	.item-list01 ul li { margin: 0 0 50px; }
	.item-list01 ul li .btn a { font-size: 12px; padding: 5px 10px; }
	.item-list01 ul li .btn a:hover .arw { transform:translate(0); }	
	.item-list01 ul li .btn02 a:nth-child(1) { padding: 5px 10px 2px; }
	.item-list01 ul li .btn02 a:nth-child(2) { padding: 2px 10px 5px; }
	.item-list01 ul li .tx { margin: 30px 4.4vw 0; }
	.item-list01 ul li h4 { font-size: 32px; position: static; }
	.item-list01 ul li h4 .col { font-size: 20px; }
	.item-list01 ul li h4 .mincho { font-size: 14px; margin: 8px 0 0; }
	.item-list01 ul li h5 { font-size: 17px; margin: 0 0 5px; }
	
	.crown-panto .item-list01 ul li .tx-inner { padding: 10px 0 0; }
	.clear-frame .item-list01 ul li .tx-inner { padding: 10px 0 0; }
	
	.crown-panto .item-list01 ul li:nth-child(odd) .pic { margin: 0 0 0 4.4vw; }
	.crown-panto .item-list01 ul li:nth-child(odd) .num { position: absolute; top: -4.4vw; left: -4.4vw; width: 26vw; }
	.crown-panto .item-list01 ul li:nth-child(odd) .btn { position: absolute; bottom: -4.4vw; left: -4.4vw; }
	.crown-panto .item-list01 ul li:nth-child(even) .pic { position: relative; margin: 0 4.4vw 0 0; }
	.crown-panto .item-list01 ul li:nth-child(even) .num { position: absolute; top: -4.4vw; right: -4.4vw; width: 26vw; }
	.crown-panto .item-list01 ul li:nth-child(even) .btn { position: absolute; bottom: -4.4vw; right: -4.4vw; }
	
	.clear-frame .item-list01 ul li:nth-child(odd) .pic { position: relative; margin: 0 4.4vw 0 0; }
	.clear-frame .item-list01 ul li:nth-child(odd) .num { position: absolute; top: -4.4vw; right: -4.4vw; width: 26vw; }
	.clear-frame .item-list01 ul li:nth-child(odd) .btn { position: absolute; bottom: -4.4vw; right: -4.4vw; }		
	.clear-frame .item-list01 ul li:nth-child(even) .pic { margin: 0 0 0 4.4vw; }
	.clear-frame .item-list01 ul li:nth-child(even) .num { position: absolute; top: -4.4vw; left: -14vw; width: 26vw; }
	.clear-frame .item-list01 ul li:nth-child(even) .btn { position: absolute; bottom: -4.4vw; left: -4.4vw; }


	.item-list02 h4 { font-size: 16px; padding: 0 4.4vw 10px 4.4vw; line-height: 1.4; }
	.item-list02 ul li { width: calc(50% - 1px); }
	.item-list02 ul li p { font-size: 14px; }
	.item-list02 ul li p span { font-size: 10px; }
	.item-list02 ul li a { padding: 8vw 4.4vw 4vw; }
	.item-list02 ul li a:hover img { transform: scale(1); }
	.item-list02 ul li:nth-child(even) a { border-right: none; }	


	.collection { padding: 60px 0 0; }
	.collection h3 { font-size: 34px; margin: 0 0 20px; padding: 0 4.4vw; }
	.collection h3 .stencil { font-size: 34px !important; }
	.collection h3 span { font-size: 14px; margin: 8px 0 0; }
	.collection ul { padding: 0 4.4vw; }
	.collection ul li { margin: 0 0 30px; }
	.collection ul li .pic { margin: 0 0 20px; }
	.collection ul li h4 { font-size: 38px; position: absolute; top: 3vw; left: 3vw; }
	.collection ul li h4 .col { font-size: 22px; }
	.collection ul li h4 .mincho { font-size: 12px; margin: 8px 0 0; }
	.collection ul li p { font-size: 15px; }
	.collection ul li .btn a { font-size: 12px; padding: 5px 10px; }
	.collection ul li:nth-child(odd) .btn { position: absolute; bottom: -2vw; right: -4.4vw; }
	.collection ul li:nth-child(even) .btn { position: absolute; bottom: -2vw; left: -4.4vw; }
	.collection ul li .btn a:hover .arw { transform:translate(0); }	


	.btn-store { padding: 30px 4.4vw 0; }
	.btn-store a { font-size: 16px; padding: 20px 0; }
	.btn-store a:hover { transform: scale(1); }
	.btn-store a .arw { position: absolute; top: calc(50% - 10px); right: 20px; }


	.sns { padding: 40px 0 0; } 
	.sns h4 { font-size: 18px; margin: 0 0 10px; }
	.sns ul li { margin: 0 5px; }
	.sns ul li a { background: #f5f5f6; width: 60px; padding: 20px 0;  }
	.sns ul li a img { width: 20px; }
	.sns ul li a:hover { transform: scale(1); }

	
	.link-card { padding: 50px 0 0; }
	.link-card h4 { font-size: 24px; margin: 0 0 10px; }
	.link-card ul li { width: 100%; margin: 0; }
	.link-card ul li p { font-size: 7vw; position: absolute; bottom: 5vw; left: 6vw; }
	.link-card ul li span { font-size: 2.6vw; margin: 1.4vw 0 0; }
	.link-card ul li a .arw { position: absolute; bottom: 4.4vw; right: 2vw; width: 6.4vw; }
	.link-card ul li a:hover .arw { transform:translate(10px); }	


	.footer { padding: 30px 0 80px; text-align: center; }
	.footer p { font-size: 12px; }	
}