@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css');
@import url("../../nv/nvgrid.css");


/*--------------------------------------------------------------------*/
/* 日本ヴォーグ社 70周年記念特設サイト */
/*--------------------------------------------------------------------*/

* { 
  margin: 0;
  padding: 0;
  min-width: 0;
  min-height: 0;
	box-sizing: border-box;
}
*:before, *:after {
}
html { 
  font-size: 62.5%; /*10px*/ 
} 
body { 
  min-width: 320px; 
  background: #fff;
  color: #4a3131; 
  font-size: 18px; 
  font-size: 1.8rem; 
  font-family: 'Noto Sans JP', 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
  letter-spacing: 0.1em; 
  line-height: 1.5;
  box-sizing: border-box;
}
ul,ol,li {
  list-style: none;
}
ul li,
ol li {
  line-height: 1.3;
  margin: 0;
}
p {
  margin-bottom: .75em;
  padding: 0;
}
a {
  color: #333;
  text-decoration: underline;
}
a:hover {
  color: #666;
  text-decoration: underline;
  transition: all .2s;
}
img,video { 
  max-width: 100%; 
  height: auto;
  vertical-align: bottom;
}

@media screen and (max-width:760px){
  body { 
    font-size: 14px; 
    font-size: 1.4rem;
		font-weight: 500;
  }
  h1,h2,h3,h4,h5,h6 {
    font-weight: 700;
  }
}



/* Layout
--------------------------------------------------------------------*/
#container {
  background: url("/img/usr/category/sp/kitpresent202411/bg_green.jpg");
}

.innr {
  width: 100%;
}

@media print, screen and (min-width:761px){
  .innr {
    width: 760px;
    margin: 0 auto;
  }
}

div {
}
.block_header {
  position: relative;
  z-index: 2;
}
.block_mainv {
  position: relative;
  top: -30px;
  margin-bottom: -30px;
  z-index: 1;
}
.block_present {
  background: url("/img/usr/category/sp/kitpresent202411/bg_drakgreen.jpg");
}
.block_lead {
  
}
.block_crafts {
  
}
.block_outline {
  background: #fff;
}
.block_kits_header {
  background: url("/img/usr/category/sp/kitpresent202411/bg_brown.jpg");
}
.block_kits_detail {
  
}
.off-top {
  position: relative;
  top: -10px;
}
.off-top-padding {
  padding-bottom: 20px;
}

@media print, screen and (min-width:761px){
  .off-top {
    top: -30px;
  }
  .off-top-padding {
    padding-bottom: 40px;
  }
}


/* Outline
--------------------------------------------------------------------*/
.block_outline h2 {
	margin-bottom: 30px;
}
.block_outline p {
	font-size: 1.25em;
	margin: 0 20px 2em;
}
.outline {
	margin: 0 10px;
}
.outline dt {
	border-bottom: 2px solid #014d5a;
	margin: 0 0 10px 0;
}
.outline dt span {
	display: inline-block;
  background: url("/img/usr/category/sp/kitpresent202411/bg_drakgreen.jpg");
	color: #fff;
	padding: .25em 1em;
}
.outline dd {
	font-size: 1.125em;
	margin: 0 0 2em 10px;
}
.link-moreitem {
  text-decoration: none;
}
.link-moreitem::before {
  color: #aa005a;
	content: "\f0da";
  font-size: 1.25em;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	margin-right: .5em;
}


@media print, screen and (min-width:761px){
  .block_outline p,
  .outline {
    margin-left: 0;
    margin-right: 0;
  }
}


/* About
--------------------------------------------------------------------*/

.block_kits_detail {
  background: url("/img/usr/category/sp/kitpresent202411/bg_brown.jpg");
}
.tab-list {
  display: flex;
  justify-content: space-between;
  margin: 0 10px;
}
.tab-item {
  width: calc(100% / 3 - 5px);
  border-radius: 6px 6px 0 0;
  background: url("/img/usr/category/sp/kitpresent202411/bg_purple.jpg");
  text-align: center;
  cursor: pointer;
  transition: .4s ease-in-out;
}
.tab-item:hover {
  background: url("/img/usr/category/sp/kitpresent202411/bg_drakgreen.jpg");
}
.tab-item.is-active {
  background: url("/img/usr/category/sp/kitpresent202411/bg_green.jpg");
}

.panel-list {
  background: url("/img/usr/category/sp/kitpresent202411/bg_green.jpg");
}
.panel-item {
  display: none;
	padding: 30px 10px;
	color: #fff;
}
.panel-item.is-active {
  display: block;
  animation: panel-show .9s ease-in-out forwards;
}

/* パネル切り替えのアニメーション */
@keyframes panel-show {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media print, screen and (min-width:761px){
  .tab-list {
    margin-left: 0;
    margin-right: 0;
  }
}

.crafts-caption {
	font-size: 1.125em;
	padding: 1em 0;
}

.panel-item .about-header {
	position: relative;
	text-align: center;
	margin: 0 10px 60px;
}
.panel-item .about-header::after {
	position: absolute;
	top: 180px;
	left: 50%;
	content: "";
	width: 300px;
	height: 10px;
	border-radius: 5px;
	background: #234143;
	transform: translateX(-50%);
}
.process .swiper-slide {
	width: 75%;
	background: #fff;
	border-radius: 5px;
	padding: 10px;
}
.process .swiper-slide span {
	position: relative;
	display: block;
	color: #000;
	padding: 12px 10px 10px 40px;
}
.process .swiper-slide span em {
	position: absolute;
	top: 10px;
	left: 0;
	display: inline-block;
	background: #234143;
	width: 30px;
	height: 30px;
	line-height: 28px;
	border-radius: 15px;
	color: #fff;
	font-size: 20px;
	font-style: normal;
	letter-spacing: 0;
	text-align: center;
}

@media print, screen and (min-width:761px){
	.panel-item {
		display: none;
		padding: 50px 0;
	}
}

.goods-header {
	margin: 20px auto;
	text-align: center;
}
.goods-list {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -10px;
}
.goods-list li {
  margin: 0 10px 20px;
	width: calc(100% / 2 - 20px);
	background: #fff;
	border-radius: 5px;
	padding: 10px;
}

.goods-link {
	text-align: center;
	padding: 20px 10px;
}
.goods-link li {
	padding: 10px 0;
}
.goods-link li a img {
	filter: drop-shadow(3px 3px 1px rgba(0, 0, 0, .7));
	margin: 0 4px 4px 0;
}
.goods-link li a:hover img {
	filter: drop-shadow(0px 0px 0px rgba(0, 0, 0, .7));
	margin: 4px 0 0 4px;
}


/* Footer
--------------------------------------------------------------------*/
.footer-image {
  text-align: center;
}
.footer-links {
  text-align: center;
  padding-top: 20px;
}
.footer-links p {
	font-size: .875em;
	font-weight: bold;
}
.footer-links li {
	font-size: .75em;
	margin-bottom: .25em;
}
.footer-links a,
.footer-links a:hover {
	color: #fff;
	text-decoration: none;
}
.footer-copy {
	font-size: .75em;
	text-align: center;
	padding: 3em 0;
}

@media print, screen and (min-width:761px){
	.footer {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		align-items: flex-end;
	}
  .footer-links {
    text-align: left;
    padding-top: 0;
  }
	.footer-image {
    text-align: left;
		width: 40%;
	}
	.footer-links {
		width: 50%;
	}
	.footer-copy {
		width: 100%;
	}
}