@charset "UTF-8"; 
/* CSS Document */
body {
	background:#fff;
}
#makebanner {
	max-width:inherit;
}
.kuronohi {
	font-family: 'Zen Kaku Gothic New', sans-serif;font-size:17px;line-height:2em;text-align:left;
}
.inner {
	max-width:1000px;
	position:relative;
	margin:0 auto;
}
.inner.min {
	max-width:1100px;
}
.inner.acc {
	max-width:760px;
}
.kuronohi img {
	display:block;
	width:100%;
}
.kuronohi section {
	position:relative;
}

.image {
	width:100%;
	padding-bottom:40%;
	overflow:hidden;
	position:relative;
}
.image > img {
	display:block;
	position:absolute;
	left:0;
	top:0;
}
img.sp {
	display:none !important;
}

br.sp {
	display:none !important;
}

.floatClear:before,
.floatClear:after {
	content:'';display:table;
	clear:both;
}

.items_grid {
	display:flex;
	justify-content: center;
}

.items_grid li {
	width:220px;
	margin:0 20px;
}
.items_grid li .image {
	padding-bottom:149%;
	border-bottom:solid 4px #666;
	margin-bottom:16px;
}
.items_grid li .name {
	font-size:13px;
	line-height:1.5em;
	margin-bottom:16px;
}
.items_grid li .button {
	display:block;
	font-size: 16px;
	line-height:2em;
	border:solid 1px #000;
	background:#fff url("https://gigaplus.makeshop.jp/tryvision/img/page55/pc/arrow.png") no-repeat center right 15px;
	background-size:7px auto;
	position:relative;
	padding:0 15px;
}


.main {
	position:relative;
}
.main h1 {
	width:771px;
	position:absolute;
	left:50%;
	top:52px;
	transform:translate(-566px);
	z-index:2;
}
.main h1 .sp {
	display:none;
}
.main h1 > div {
	padding-bottom:49.166%;
	position:relative;
}
.main h1 > div img {
	position:absolute;
}
.main h1 .title_en {
	width:30%;
	opacity: 0.8;
	left:0;
	top:-5%;
}
.main h1 .title_sub {
	width:27.1%;
	left:0;
	bottom:16.88%;
}
.main h1 .title_main {
	width:80%;
	left:10vw;
	bottom:0%;
    z-index: 99;
}

.main .image {
	width:100%;
	padding-bottom:0;
}
.main .image img {
	left:50%;
	top:0;
	transform:translate(-50%,0);
}
.main .text {
	text-align:left;
	position:absolute;
	left:50%;
	top:0;
	transform:translate(-10%,0);
}


.manners {
	background:#fff;
	padding:80px 0 120px;
}
.manners2 {
	background:#fff;
	padding:0 0 120px;
}
.manners3 {
	background:#fff;
	padding:80px 0 0px;
}

.manners h2.midasi {
font-family: "Zen Kaku Gothic New", sans-serif;
font-weight: 500;
  font-size: 25px;
  position: relative;
  text-align: center;
padding-bottom: 10px;
letter-spacing: 0.2em;
border-bottom: 5px solid #eabdc7;
}

.manners2 h2 {
font-family: "Zen Kaku Gothic New", sans-serif;
font-weight: 500;
  font-size: 25px;
  position: relative;
  text-align: center;
padding-bottom: 10px;
letter-spacing: 0.2em;
margin-bottom: 20px;
}

.manners2 h2 span {
  font-size: 16px;
  display: block;
padding-bottom: 5px;
color: #eabdc7;
}

.manners_main {
	margin-top:80px;
	margin-bottom:40px;
}
.manners_main h2 {
	width:435px;
	float:left;
	margin-bottom:40px;
}
.manners_main .image_wrapper {
	width:500px;
	float:right;
	position:relative;
}
.manners_main .image_wrapper:after {
	content:'';
	display:block;
	width:100%;
	height:100%;
	position:absolute;
	left:4px;
	top:4px;
}
.manners_main .image {
	padding-bottom:110%;
	z-index:2;
}
.manners_main .text {
	width:500px;
	flat:left;
	font-size:18px;
	line-height:2em;
	padding-left:22px;
	clear: left;
}



.point_list {
	transform:translate(0,-30px);
}
.point_list ol {
display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1vw;
    justify-content: center;
	margin:0 auto;
}
.point_list li {
	width: 100%;
	position:relative;
list-style-type:none;
	background:#fff;
	text-align:center;
	border:solid 1px #666;
	z-index:2;
}

.point_list li .image_wrapper {
	width:35%;
}

.point_list li h4 {
	font-family: 'Shippori Mincho';
	font-size:24px;
	color:#eabdc7;
	text-align:center;
	margin-bottom: 20px;
display: block;
}
.point_list li .image {
	padding-bottom:61.22%;
	margin-bottom: 10px;
}
.point_list li .text {
width: 65%;
	font-size:15px;
	line-height:1.7em;
	text-align:left;
}
.point_list li .text span {
	font-size:15px;
font-weight: bold;
padding-bottom: 10px;
display: inline-block;
}

.point_list li .point_wrapper .pointlink {
    color: #fff;
    background: #000;
    text-align: center;
    margin: 0 auto;
	width: 100%;
}
.point_list li .point_wrapper .pointlink a {
    color: #fff;
    font-size: 14px;
    display: block;
    padding: 3px 0;
text-decoration: none;
}

.accessories_main {
	max-width: 500px;
}

.sale {
	margin-top: 40px;
display: flex;
justify-content: center;
gap:2vw;
}

.sale .image_wrapper{
	width: 50%;
}

.sale .text{
	width: 50%;
}
.sale .text p span{
font-weight: bold;
}

.sale .text p span.mincho{
font-weight: bold;
font-family: 'Shippori Mincho';
    font-size: 25px;
}
.sale .text p span.kaishi{
font-weight: bold;
color: #e50012;
font-family: 'Shippori Mincho';
    font-size: 25px;
}
.sale .text .pointlink {
    color: #fff;
    background: #000;
    text-align: center;
    margin: 20px auto;
	width: 100%;
}
.sale .text .pointlink a {
    color: #fff;
    font-size: 14px;
    display: block;
    padding: 3px 0;
text-decoration: none;
}

.sale .text .eriko {
margin-bottom: 40px;
display: flex;
justify-content: center;
gap:1vw;
}
.sale .text .eriko img{
width: 50%;
}

.sale .gobai{
margin: 0 auto;
padding: 0.5em;
text-align: center;
}
.sale .gobai p{
text-decoration:#e50012 wavy underline;
}
.sale .gobai span{
font-weight: bold;
font-size: 1.3em;
}

footer .footer-nav{
margin: 100px auto 100px;
text-align: center;
}

footer .footer-nav a{
text-decoration: none;
color: #000;
}

footer .footer-nav .footerlogo{
width: 10%;
}

@media screen and (min-width:1280px){
	
	.main .image {
		padding-bottom:600px;
	}
	br.chousei {
		display:block !important;
	}
.point_list li {
	height: 327px;
	padding:20px 25px 0;
}
.point_list li .point_wrapper {
display: flex;
justify-content: center;
	gap:1vw;
}

}


@media (max-width:1279px) and (min-width:769px){
	
	.kuronohi {
		font-size:1.49vw;
	}
	br.sp {
		display:inline-block !important;
	}
	br.chousei {
		display:none !important;
	}
	.inner {
		max-width:87.71vw;
	}
	.inner.min {
		max-width:78.94vw;
	}
	.inner.acc {
		max-width:66.66vw;
	}
	.main .image {
		padding-bottom:500px;
	}
	.items_grid li {
		width:19.29vw;
		margin:0 1.75vw;
	}
	.items_grid li .image {
		border-bottom:solid 0.35vw #666;
		margin-bottom:1.4vw;
	}
	.items_grid li .name {
		font-size:1.14vw;
		margin-bottom:1.4vw;
	}
	.items_grid li .button {
		font-size: 1.4vw;
		border:solid 0.08vw #000;
		background:#fff url("https://gigaplus.makeshop.jp/tryvision/img/page55/pc/arrow.png") no-repeat center right 1.31vw;
		background-size:0.61vw auto;
		padding:0 1.31vw;
	}


	.main h1 {
		width:64.03vw;
		top:4.56vw;
		transform:translate(-47.71vw);
	}
	.main .text {
		padding: 0 3%;
		top:36.71vw;
		transform:translate(-32.19vw);
	}
	
	
	.manners {
		padding:0vw 0 15vw;
	}
	.manners2 {
		padding:0vw 0 15vw;
	}
	.manners3 {
		padding:0;
	}
	.manners_main {
		margin-bottom:3vw;
	}
	.manners_main h2 {
		width:38.15vw;
		margin-bottom:3.5vw;
	}
	.manners_main .image_wrapper {
		width:35.08vw;
	}
	.manners_main .image_wrapper:after {
		left:0.35vw;
		top:0.35vw;
	}
	.manners_main .text {
		width:38.15vw;
		font-size:1em;
		padding-left:2.63vw;
	}

	.point_title h3 {
		font-size:4.21vw;
		right:6.49vw;
	}

	.point_list {
		transform:translate(0,-2.63vw);
	}
	.point_list ol {
		width:75.43vw;
	}
	.point_list li {
		border:solid 0.08vw #666;
		width:24.29vw;
		padding: 10px;
	    position: relative;
	}
	.point_list li .point_wrapper {
		padding:0;
	}
	.point_list li .pointlink {
position: absolute;
		bottom: 0;
		left: 0;
		z-index: 99;
	}
	

	.point_list li h4 {
		font-size:2.1vw;
		margin-bottom: 0.87vw;
	}
.point_list li .image_wrapper {
	width:40%;
	margin: 0 auto 10px;
}
	.point_list li .text {
		width: 100%;
		font-size:1em;
	}

	.accessories_main {
		max-width: 400px;
		margin-bottom:10px;
	}
footer .footer-nav{
margin: 60px auto 100px;
}

footer .footer-nav .footerlogo{
width: 20%;
}
	
}

@media (max-width:768px) {
	#makebanner table {
		width:100%;
	}
	.kuronohi {
		font-size:3.73vw;
	}
	img.pc {
		display:none !important;
	}
	img.sp {
		display:block !important;
	}
	br.pc {
		display:none !important;
	}
	br.sp {
		display:inline-block !important;
	}
		br.chousei {
		display:none !important;
	}
	.inner,
	.inner.min,
	.inner.acc {
		max-width:86.66vw;
	}
	
	.items_grid {
		justify-content:center;
		flex-wrap:wrap;
		gap:5px;
	}
	.items_grid li {
		width:39.75vw;
		margin:0 0 8.8vw;
	}
	.items_grid li .image {
		border-width:0.66vw;
		margin-bottom:2.13vw;
	}
	.items_grid li .name {
		font-size:3.2vw;
		margin-bottom: 2.13vw;
	}
	.items_grid li .button {
		font-size:3.73vw;
		line-height:2.8em;
		padding: 0 3.33vw;
		background: #fff url("https://gigaplus.makeshop.jp/tryvision/img/page55/pc/arrow.png") no-repeat center right 3.33vw;
		background-size:1.33vw auto;
	}
	
	.items_grid.ig li {
		width:26vw;
	}
	.items_grid.ig li .button {
		line-height:1.5em;
		padding:0 1.33vw 1.3em;
		background: #fff url("https://gigaplus.makeshop.jp/tryvision/img/page55/sp/arrow_un.png") no-repeat bottom 1.86vw center;
		background-size:2.13vw;
	}
	
	.manners .konna  {
		padding-bottom:125%;
	}
	.main h1 {
		width:58.13vw;
		left:3.46vw;
		top:12.4vw;
		transform:translate(0,0);
	}
	.main h1 .sp {
		display:block;
		padding-bottom:142.27%;
	}
	.main h1 .title_en {
		width:70%;
		bottom: 10%;
		left:0;
	}
	.main h1 .title_sub {
		width:38.47%;
		left:0;
		bottom:inherit;
		top:0;
	}
	.main h1 .title_main {
		width:91.95%;
		left:4.88%;
		top:40%;
	}
	
	.main .image {
		padding-bottom:113.33%;
	}
	
	.main .image img {
		top:50%;
		transform:translate(-50%,-50%);
	}
	.main .text {
		padding: 0 6%;
		position:static;
		transform:translate(0);
		margin-top:5.86vw;
		margin-bottom:3vw;
	}
	
	.manners {
		padding:0vw 0 1.33vw;
		margin: 10vw 0 10vw;
	}
		.manners2 {
		padding:0vw 0 1.33vw;
	}
		.manners3 {
		padding:10vw 0 0;
	}

.manners2 h2 {
font-weight: 600;
font-size: 1.2em;
padding-bottom: 10px;
margin-bottom: 20px;
}

.manners2 h2 span {
  font-size: 14px;
}

	.manners_main {
		width:86.66vw;
		margin:0 auto 13.33vw;
	}
	.manners_main h2 {
		width:100%;
		margin-bottom:6.66vw;
	}
	.manners_main h2,
	.manners_main .image_wrapper,
	.manners_main .text {
		float:inherit;
	}
	.manners_main .image_wrapper {
	display: none;
	}
	
	.manners_main .text {
		width:100%;
		font-size:1.1em;
		text-align:left;
		padding:0 3%;
	}
	
	.manners .inner.min {
		max-width:100%;
	}
	.point_title h3 {
		font-size:7.33vw;
		position:static;
		transform: translate(0);
		margin-bottom:5.33vw;
	}
	.point_title .image {
		padding-bottom:73.33%;
	}
	
	.point_list {
		transform: translate(0,-3.33vw);
	}
	.point_list li:after {
		left: 1.06vw;
		top: 1.06vw;
	}
	.point_list ol {
		width:86.66vw;
		display:block;
	}
	.point_list li {
		width:100%;
		padding: 5vw 1vw;
		margin-bottom:3.33vw;
	}
	.point_list li .point_wrapper {
		padding:3vw;
	}
	.point_list li .point_wrapper:before,
	.point_list li .point_wrapper:after {
		content:'';
		clear:none;
	}
	
	.point_list li .point_wrapper .pointlink a {
    font-size: 0.9em;
}
	.point_list li h4,
	.point_list li .text {
		float:none;
		clear:none;
	}
	.point_list li .image_wrapper {
		width:32.4vw;
    margin: 0 auto 5vw;
	}
	
	.point_list li h4 {
		font-size:8vw;
		margin-bottom: 1vw;
		text-align:center;
	}
	.point_list li .text {
		font-size:1.2em;
		width:100%;
	}
	.point_list li .text p span {
		font-size:1em;
	}
	.point_list li:nth-of-type(1) .image,
	.point_list li:nth-of-type(2) .image,
	.point_list li:nth-of-type(3) .image,
	.point_list li:nth-of-type(4) .image,
	.point_list li:nth-of-type(5) .image,
	.point_list li:nth-of-type(6) .image {
		padding-bottom:128.07%;
	}
	
	.accessories_main {
		margin-bottom:5px;
	}
	
		.manners h2.midasi {
  font-size: 1.2em;
margin-bottom: 20px;
border-bottom: 2px solid #eabdc7;
}
	.sale {
		width:86.66vw;
		margin:0 auto 13.33vw;
		display: inherit;
	}
.sale .image_wrapper {
    width: 100%;
margin-bottom: 20px;
}
.sale .text {
    width: 100%;
}

.sale .text p span.mincho{

    font-size: 1.4em;
}
.sale .text p span.kaishi{
    font-size: 1.4em;
}

.sale .text .pointlink a {
    font-size: 1em;
	font-weight: bolder;
}

footer .footer-nav{
margin: 60px auto 100px;
}

footer .footer-nav .footerlogo{
width: 30%;
}

}




/*animation*/
.anime {transition:1.5s cubic-bezier(0, 0.55, 0.45, 1) 0.5s;}

.anime.upIn {transform:translate3d(0,5rem,0);}
.anime.upIn.active {transform:translate3d(0,0,0);}

.anime.fadeIn {opacity:0;}
.anime.fadeIn.active {opacity:1;}

.anime.zoomIn img {transform:scale(1.2);opacity:0;transition:1.8s cubic-bezier(0, 0.55, 0.45, 1);}
.anime.zoomIn.active img {transform:scale(1);opacity:1;}

.list_grid li.anime:nth-of-type(1) {transition-delay:0.5s;}
.list_grid li.anime:nth-of-type(2) {transition-delay:0.8s;}
.list_grid li.anime:nth-of-type(3) {transition-delay:1.1s;}
.list_grid li.anime:nth-of-type(4) {transition-delay:0.5s;}
.list_grid li.anime:nth-of-type(5) {transition-delay:0.8s;}
.list_grid li.anime:nth-of-type(6) {transition-delay:1.1s;}

/*個別アニメ*/
.style_list .anime.style h4,
.style_list .anime.style h4 span,
.style_list .anime.style h4:after,
.style_list .comment .text.anime.line_box,
.style_list .comment .text.anime.line_box:before,
.style_list .comment .text.anime.line_box p:before,
.style_list .comment .text.anime.line_box:after,
.style_list .comment .text.anime.line_box p:after,
.style_list .comment .text.anime.line_box p {transition:1.5s cubic-bezier(0, 0.55, 0.45, 1) 0.5s;}

.style_list .anime.style h4 {opacity:0;transition-delay:0.5s;}
.style_list .anime.style h4 span {opacity:0;transition-delay:0.8s;}
.style_list .anime.style h4:after {width:0%;transition-delay:1.4s;}
.style_list .anime.style.active h4 {opacity:1;}
.style_list .anime.style.active h4 span {opacity:1;transform:scale(1)}
.style_list .anime.style.active h4:after {width:100%;}

.style_list .comment .text.anime.line_box {opacity:0;transition-delay:0.5s;}
.style_list .comment .text.anime.line_box p {opacity:0;transition-delay:0.8s;}
.style_list .comment .text.anime.line_box:before,
.style_list .comment .text.anime.line_box p:before {width:0;transition-delay:1.1s;}
.style_list .comment .text.anime.line_box:after,
.style_list .comment .text.anime.line_box p:after {height:0;transition-delay:1.4s;}

.style_list .comment .text.anime.line_box.active {opacity:1;}
.style_list .comment .text.anime.line_box.active p {opacity:1;}
.style_list .comment .text.anime.line_box.active:before,
.style_list .comment .text.anime.line_box.active p:before {width:50px;}
.style_list .comment .text.anime.line_box.active:after,
.style_list .comment .text.anime.line_box.active p:after {height:50px;}

.anime.top_anime h1 .title_main,
.anime.top_anime h1 .title_sub,
.anime.top_anime .image img,
.anime.top_anime .text,
.anime.top_anime h1 .title_en {transition:2s cubic-bezier(0, 0.55, 0.45, 1) 0.5s;}

.anime.top_anime .image img {transform:translate(50%,0);opacity:0;transition-duration:2s;transition-delay:0;}
.anime.top_anime h1 .title_main {opacity:0;transition-delay:1s;}
.anime.top_anime h1 .title_sub {opacity:0;transition-delay:2s;}
.anime.top_anime .text {opacity:0;transition-delay:2.5s;}
.anime.top_anime h1 .title_en {opacity:0;transition-delay:1.5s;}

.anime.top_anime.active .image img {transform:translate(-50%,0);opacity:1;}
.anime.top_anime.active h1 .title_main {opacity:1;}
.anime.top_anime.active h1 .title_sub {opacity:1;}
.anime.top_anime.active .text {opacity:1;}
.anime.top_anime.active h1 .title_en {opacity:1;}


@media (max-width:768px) {
	.style_list .comment .text.anime.line_box.active:before,
	.style_list .comment .text.anime.line_box.active p:before {width:12.33vw;}
	.style_list .comment .text.anime.line_box.active:after,
	.style_list .comment .text.anime.line_box.active p:after {height:12.33vw;}
	
	.anime.top_anime .image img {transform: translate(50%,-50%);}
	.anime.top_anime.active .image img {transform: translate(-50%,-50%);}
}