@charset "UTF-8";

/*全般*/
.bg_none{/*TOPのみパターン背景消す*/
	background-image: none;
}

#top3d{
	position: relative;
	height: 100Vh;
	min-height:800px;
	width: 100%;
}
.top_content{
	position: relative;
	width: 80%;
	max-width: 1200px;
	height: calc(100% - 50px);
	transition: width 0.3s ease;
	z-index: 11;
}
@media (max-width:1250px){
	.top_content{
		width: 90%;
	}
}
@media (max-width: 1000px) {
	#top3d{
		min-height: auto;
		height: auto;
	}
	.top_content{
		height: auto;
	}
}


/*全般*/

/* ヘッダーTOPのみ変更点 */
.h_menu{
	background-color: transparent;
	background-image: none;
}
/* ヘッダーTOPのみ変更点 ここまで */


/*TOPメイン-背景 */
.bg_img{
	position: relative;
	width: 100%;
	height: 100%;
}
.bg_top,
.bg_bottom {
	position: absolute;
	top: 0;
	width: 100%;
	/* height: 100vh;  */
	height: 100%; 
}
.bg_top{
	overflow: hidden;
	z-index: 2;
}
.bg_bottom {
	display: none;
	z-index: 1;
}
.topbg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center center;
	opacity: 0;
	animation: fade 21s infinite;
	animation-fill-mode: both;
}
.bg1, .bg2, .bg3{
	background-repeat: no-repeat;
}
.bg1 { background-image: url(../img/back_b_1.jpg); animation-delay: 0s; }
.bg2 { background-image: url(../img/back_b_2.jpg); animation-delay: 7s; }
.bg3 { background-image: url(../img/back_b_3.jpg); animation-delay: 14s; }

@keyframes fade {
  0%   { opacity: 0; }
  10%  { opacity: 1; }
  30%  { opacity: 1; }
  40%  { opacity: 0; }
  100% { opacity: 0; }
}

@media (max-width:1000px){

	.bg1 { background-size: min(1400px, 270%); background-position: 70% 20%; }
	.bg2 { background-size: min(1400px, 320%); background-position: 70% 50% }
	.bg3 { background-size: min(1400px, 270%); background-position: 70% top; }

	.bg_top {
		height: 550px;
	}
	.bg_top {
		-webkit-mask-image: linear-gradient(
		to bottom,
		black 80%,
		transparent 100%
		);
		mask-image: linear-gradient(
			to bottom,
			black 80%,
			transparent 100%
		);
	}
	.bg_bottom {
		display: block;
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: #fff;
		background-image: url("../img/main_backg.png");
		background-position: -10px -10px;
		overflow: hidden;
	}

}
@media (max-width:350px){
	.bg1 { background-size: auto 550px; background-position: 70% top; }
	.bg2 { background-size: auto 652px; background-position: 70% 70% }
	.bg3 { background-size: auto 550px; background-position: 70% top; }
}
/*TOPメイン-背景ここまで*/


/* 大文字テキスト */
.top_content h2{
	margin: 0;
	padding-top: 1.2em;
	font-size: 2.9rem;
	font-weight: 900;
	font-family: "Noto Sans JP", sans-serif;
	color: #000;
	letter-spacing:0.15em;
	line-height: 1.2em;
}
h2 .black_bgtxt{
	position: relative;
	top:-0.2em;
	margin-right: 0.4em;
	padding: 0.1em 0.5em;
	color: #fff;
	font-size: 0.7em;
	background-color: #000;
	font-weight: 600;
	letter-spacing:0.1em;
}
h2 .small_txt{
	font-size: 0.7em;
	letter-spacing:0.05em;
	font-weight: 600;
}
@media(max-width:1000px){
	.top_content h2{
		padding-top: 0.6em;
		font-size: clamp(18px, 7.2vw, 3em);
	}
}
/* 大文字テキスト ここまで */


/* サブテキスト */
.subtext{
	position: relative;
	display: flex;
	flex-direction: column;
	margin-top: 1.5rem;
	width: fit-content;
	padding: 0.8rem 70px 0.8rem 0;
	background-color: rgba(255,255,255,0.8);
	border-radius: 0 150px 150px 0;
}

.subtext::before{
	content: "";
	display: block;
	position: absolute;
	top:0;
	right: 100%;
	width: 30vw;
	height: 100%;
	font-size: 1rem;
	background-color: rgba(255,255,255,0.8);
}
.subtext p{
	display: inline-block;
	width: auto;
	font-family: "Noto Sans JP", sans-serif;
}
.subtext p:first-of-type{
	position: relative;
	padding-left: 1.6em;
	color: #00bca5;
	font-size: 1em;
	font-weight: bold;
	letter-spacing:0.1em;
	vertical-align: baseline;
}
.subtext p:first-of-type span{
	padding-left: 0.2em;
	color: #777;
	font-size: 0.85em;
}
.subtext p:first-of-type::before{
	content: "";
	position: absolute;
	top:50%;
	left: 0;
	width: 1.4em;
	height: 1.4em;
	background-size: 100%;
	background-position: center,center;
	background-image: url(../svg/nikukyu_green.svg);
	transform: translateY(-50%);
	transition:font-size 0.3s;
}
.subtext p:last-of-type{
	margin-top: 0.6em;
	font-size: 0.85em;
	color: #444;
	line-height: 1.5em;
	transition:font-size 0.3s;
}
.subtext .brpc{
	display: inline;
}
.subtext .brsp{
	display: none;
}
@media (max-width: 1110px) {
	.subtext{
		position: relative;
		margin-bottom: 16vw;
	}
	.subtext p:first-of-type{
		font-size: clamp(14.5px, 2.2vw, 16px);
	}
	.subtext p:last-of-type{
		font-size: clamp(11.5px, 2vw ,13px);
	}
}
@media(max-width:700px){
	.subtext{
		align-items: center;
		margin-top: clamp(100px, 35vh, 280px);
		margin-bottom: 3vw;
		padding:1.2em 0.8em;
		width: 100%;
		background-color: rgba(255,255,255,0.7);
		backdrop-filter: blur(2px);
		border-radius:12px;	
	}
	.subtext::before{
		display: none;
	}
}
@media(max-width:570px){
	.subtext .brpc{
		display: none;
	}	
	.subtext .brsp{
		display: inline;
	}
}
@media(max-width:380px){	
	.subtext br{
		display: none;
	}
}
/* サブテキスト　ここまで */




/* 下部ブロック配置*/

.bottom_content{
	display: grid;
	grid-template-columns: minmax(0, 1fr) 490px;
	align-items: end; 
	justify-content: space-between;
	gap: 8px;
	position: absolute;
	right: 0;
	left: 0;
	bottom: 2rem;
	font-family: "Noto Sans JP", sans-serif;
	transition: all 0.5s ease;
	z-index: 13;
}
@media (max-width: 1000px) {
	.bottom_content {
		position: relative;
		grid-template-columns: minmax(0, 1fr);
		align-items: stretch; 
		margin-top: 40px;
		bottom: auto;
	}
}
.content_first{
	display: grid;
	grid-template-columns: auto;
	gap: 0.5em;
    grid-template-columns: minmax(0, 1fr);
	grid-template-areas:
    	"top_info"
    	"nouki_3d"
    	"nouki_ill";
	color: #444;
 }
.top_info { grid-area: top_info; }
.nouki_3d { grid-area: nouki_3d; }
.nouki_ill { grid-area: nouki_ill; }

.content_second{
	position: relative;
	display: grid;
    grid-template-columns: minmax(0, 1fr);
	gap:0.5em;
	grid-template-areas:
    	"netshop"
    	"news"
    	"sns_button"
    	"swipe_bannar";
 }
.netshop { grid-area: netshop; }
.news { grid-area: news; }
.sns_button { grid-area: sns_button; }
.swipe_bannar { grid-area: swipe_bannar; }

@media (max-width:1000px){
	.content_first{
		gap: 0.8em;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);;
		grid-template-areas:
			"top_info top_info"
			"nouki_3d nouki_ill";
	}

	.content_second{
		width: 100%;
		grid-template-columns: minmax(0, 5fr) minmax(0, 2fr);
		align-items: stretch;
		grid-template-areas:
			"news news"
			"sns_button netshop"
			"swipe_bannar netshop";
		gap: 0.8em;
	}
}

@media (max-width:800px){
	.content_first{
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"top_info"
			"nouki_3d"
			"nouki_ill";
	}
}

@media (max-width:620px){
	.content_second{
		grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
		grid-template-areas:
			"news news"
			"sns_button netshop"
			"swipe_bannar swipe_bannar";
	}
}

/* 下部ブロック配置 ここまで*/

/* 納期ブロック*/
.top_info {
	display: flex;
	flex-direction: column;
	gap:0.5em;
}
.top_info > a, .top_info > div{
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	width: 500px;
	color: #fff;
	font-size: 0.9em;
	text-align: center;
	padding: 0.5em 1em;
	line-height: 1.3em;
	background-color: #444;
	border-radius: 4px;
	box-shadow: 0 0 4px rgba(0,0,0,0.3);
}
.top_info .info_a{
	background-color: #ff1f5a;
	min-height: 3em;
	transition: background-color 0.2s, transform 0.2s;
}
.top_info .info_a:hover{
	background-color: #ff7ea0;
	transform: translate(-1px, -1px);
}
.top_info .info_b{
	background-color: #e600c7;
}
.top_info p{
	position: relative;
	font-size: 13px;
}
.click_right::after,
.click_right p::after{
	content: "";
  	position: absolute;
  	top: 0.15em;
  	bottom: 0;
  	right: -2em;
  	margin: auto;
 	width: 1em;
 	height: 1em;
 	border-top: 3px solid #fff;
 	border-right: 3px solid #fff;
  	transform: rotate(45deg);
}
.click_right::after{
  	right: 1em;
}
.att_oval::before,
.att_oval_big::before,
.att_oval p::before,
.att_oval_big p::before{
	content:"";
	position: absolute;
	transform: translateY(-50%);
}
.att_oval::before,
.att_oval p::before{
	top:52%;
	left: -1.5em;
	width: 1.2em;
	height: 1.2em;
	background-image: url(../svg/attention_oval_w.svg);
}
.att_oval_big::before,
.att_oval_big p::before{
	top:50%;
	left: -3em;
	width: 2em;
	height: 2em;
	background-image: url(../svg/attention_oval_w.svg);
}
.att_oval_big::before,
.att_oval::before{
  	left: 1em;
}
.click_right::after,
.att_oval_big::before,
.att_oval::before{
	display: none;
}
/* 新着改行用 */
.infobr_pc{
	display: block;
}
.infobr_sp{
	display: none;
}
@media (max-width:1110px){
	.top_info, .top_info > a, .top_info > div{
		width: 100%;
	}
}
@media (max-width:1000px){
	.top_info {
		gap: 0.8em;
	}
	.infobr_pc{
		display: none;
	}
	.infobr_sp{
		display: block;
	}
}
@media (max-width:500px){
	.top_info p{
		width: calc(100% - 4.5em);
		font-size: 11.5px;
	}
	.click_right p::after,
	.att_oval_big p::before,
	.att_oval p::before{
		display: none;
	}
	.click_right::after,
	.att_oval_big::before,
	.att_oval::before{
		display: block;
	}
}
/* 納期ブロック ここまで　*/


/* 左下納期　*/
.nouki{
	display: grid;
	grid-template-columns: minmax(0 ,2fr) minmax(0 ,3fr);
	width: 500px;
	height: 90px;
	border-radius: 4px;
	box-shadow: 0 0 4px rgba(0,0,0,0.3);
}
.nouki p{
	display: inline-block;
}
.nouki_left{
	position: relative;
	display: flex;
	justify-content: center;
	align-items:center;
	gap:0;
	color: #fff;
	font-size: 1.1em;
	text-align:center;
	font-family: "Murecho", "Noto Sans JP", sans-serif;
	background-color: #444;
	line-height: 1.2em;
	border-radius: 4px 0 0 4px;
}
.nouki_left span{
	font-size: 1.2em;
	font-weight: bold;
}
.nouki_3d .nouki_left{
	background-color: #3d87cd;
	background-image: url(../svg/poli_wc.svg);
	background-position: center,center;
	background-repeat: no-repeat;
	background-size: 70%;
}
.nouki_ill .nouki_left{
	background-color: #f6a92c;
	background-image: url(../svg/nekoill_wc.svg);
	background-position: center,center;
	background-repeat: no-repeat;
	background-size: 100%;
}
.nouki_right{
	display: grid;
	grid-template-rows: minmax(0 ,0.8fr) minmax(0 ,1.2fr);
	line-height: 1.1em;
	text-align: center;
}
.nouki_right div, .nouki_right a{
	display: flex;
	justify-content:center;
	align-items:center;
	border-radius: 0 4px 0 0;
}
.nouki_right .top{
	background-color: #ccc;
	font-weight: bold;
	transition: background-color 0.2s;
}
.nouki_right .top p{
	position: relative;
	left: -0.5em;
	transition: transform 0.2s ease;
}
.nouki_right .top p:after {
	content: "";
	position: absolute;
	margin: auto;
	top: 0.15em;
	bottom: 0;
	right: -1.2em;
	width: 0.7em;
	height: 0.7em;
	border-top: 3px solid #fff;
	border-right: 3px solid #fff;
	transform: rotate(45deg);
}
.nouki_3d .nouki_right .top{
	background-color: #cce8ff;
}
.nouki .top:hover p{
	transform: translate(-1px, -1px);
}
.nouki_3d .nouki_right .top:hover{
	background-color: #a7d2f5;
}
.nouki_ill .nouki_right .top{
	background-color: #fff0d9;
}
.nouki_ill .nouki_right .top:hover{
	background-color: #fcdbaa;
}
.nouki_3d .nouki_right .top, .nouki_3d .nouki_right .bottom span {
	color:#1570ba;
}
.nouki_3d .nouki_right .top p:after {
  border-top: 3px solid #1570ba;
  border-right: 3px solid #1570ba;
}
.nouki_ill .nouki_right .top, .nouki_ill .nouki_right .bottom span {
	color:#ea8b00;
}
.nouki_ill .nouki_right .top p:after {
	border-top: 3px solid #ea8b00;
	border-right: 3px solid #ea8b00;
}
.nouki_right .bottom{
	flex-direction: column;
	position: relative;
	background-color: #fff;
	font-size: 0.8em;
	border-radius: 0 0 4px 0;
}
.nouki_right .bottom span {
	padding: 0.2em;
	font-size: 1.3em;
	font-weight: bold;
}
.nouki_right .bottom p.sub{
	position: absolute;
	right:0.3em;
	bottom:0.1em;
	color: #666;
	font-size: 0.8em;
}
.nouki_right br{
	display: none;
}
@media (max-width:1110px){
	.nouki{
		width: 100%;
	}
	.nouki{
		font-size: clamp(13px, 4vw, 16px);
	}
	.nouki_right .top p{
		font-size: 0.85em;
	}
	.nouki_right .top p::after{
		right: -1em;
	}
	.nouki_left p{
		font-size: clamp(13px, 4vw, 16px);
	}
}
@media(max-width:1000px){
	.nouki{
		height: 110px;
	}
}
@media (max-width:450px){
	.nouki_right br{
		display: inline;
	}
}
@media (max-width:330px){
	.nouki_right .bottom p.sub{
		position: relative;
	}
}

/* 納期ブロック ここまで　*/

/* 新着・その他リンクブロック*/



/* 新着・その他リンクブロック ここまで*/

/* SNSリンク */
.sns_button{
	display: grid;
	grid-template-columns: minmax(0 ,1fr) minmax(0 ,1fr);
	gap: 1em;
	width: 100%;
}
.btn_iconharf_box{
	margin: 0;
	width: 100%;
	font-size: 0.9em;
	border-radius: 4px;
}
.btn_iconharf_box br{
	display: none;
}
@media (max-width:1000px){
	.btn_iconharf_box{
		justify-content: center;
		gap: 0;
		height:64px;
		max-width:none;
		font-size: clamp(13px, 2.8vw, 16px);
	}
	.btn_iconharf_box div{
		padding: 0 0.8em;
	}
}
@media (max-width:800px){
	.btn_iconharf_box br{
		display: inline-block;
	}
}
@media (max-width:620px){
	.sns_button{
		grid-template-columns: minmax(0 ,1fr);
		gap: 0.8em;
	}
	.btn_iconharf_box{
		height: fit-content;
		min-height: 100%;
	}
	.btn_iconharf_box > div div:last-of-type{
		font-size: max(13px, 2.8vw);
	}
	.btn_iconharf_box br{
		display: none;
	}
}
@media (max-width:460px){
	.btn_iconharf_box br{
		display: inline-block;
	}
}
/* SNSリンク ここまで */

/* 新着情報 */

.news{
	display: flex;
	flex-direction: column;
	gap: 0;
	width:100%;
	font-size: 0.85em;
}
.news_top{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}
.news_top p{
	padding: 0.2em 1em;
	width: fit-content;
	color:#fff;
	background-color: rgba(0,0,0,0.8);
	border-radius: 4px 4px 0 0;
}
.news_top a p{
	position: relative;
	display: inline-flex;
	gap: 0.3em;
	align-items: center;
	background-color: rgba(109, 109, 109, 0.8);
	transition: background-color 0.1s;
}
.news_top a p:hover{
	background-color: rgba(0, 188, 165, 0.8);
}
.news_top a p::after{
	content: "";
	width: 0.9em;
	height: 0.9em;
	background-image: url(../svg/yajirushi_r_w2.svg);
	background-size: contain;
	background-repeat: no-repeat;
	transform: translateY(1px);
}
.news_main{
	display: flex;
	flex-direction: column;
	gap:0.1em;
	align-items: flex-start;
	padding: 0.7em 1em;
	background-color: rgba(255,255,255,0.8);
	border-radius: 0 0 4px 4px ;
	box-shadow: 0 0 4px rgba(0,0,0,0.3);
}
.news_main a{
	display: inline-block;
	color:#3a3a3a;
	transition: color 0.1s;
}
.news_main a.new{
	color: #ff205c;
}
.news_main a.new:hover{
	color: #ff98ae;
}
.news_main a.new span::after{
	content:"New!";
	margin-left: 0.5em;
	font-size: 0.9em;
	font-weight: bold;
}
.news_main a.new::after{
	display: none;
}
.news_main a:hover{
	color: #03b99e;
}
.news_main a span{
	padding-left: 1em;
}
@media (max-width:1000px){
	.news p, .news a, .news span{
		font-size: clamp(12px, 2.5vw, 14px);
	}
}
@media (max-width:1000px){
	.news_main span{
		display: block;
	}
}
@media(max-width:400px){	
	.top_info br{
		display: none;
	}
}
/* 新着情報 ここまで */

/* サンプル販売アイコン */
.netshop{
	display: flex;
	flex-direction:column;
	justify-content:center;
	gap: 0.2em;
	position: relative;
	top:0;
	left: 0;
	height: 150px;
	width: 150px;
	margin-left: auto;
	color: #fff;
	text-align: center;
	font-family: "Murecho", "Noto Sans JP", sans-serif;
	background-image: url(../img/samplefigure_bg.jpg);
	background-color: #5c9cdd;
	background-position: center center;
	background-size: cover;
	border-radius: 50%;
	box-shadow: 2px 2px 4px rgba(0,0,0,0.3);
	transition: transform 0.2s ease;
}
.netshop:hover{
	transform: translate(-0.15em, -0.15em);
}
.netshop:before{
	content:"";
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: transparent;
	border-radius: 50%;
	mix-blend-mode:screen;
	transition: background-color 0.2s ease;
}
.netshop:hover:before{
	background-color: #125fa1;
}
.netshop::after{
	content: "";
	position: absolute;
	top: 6px;
	left: 6px;
	right: 6px;
	bottom: 6px;
	border: 1px solid rgba(255, 255, 255, 0.6);
	border-radius: 50%;
	pointer-events: none;
}
.netshop p{
	text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
.netshop p:first-of-type{
	padding-top: 0.3em;
	font-size: 1.2em;
	font-weight: 900;
	line-height: 1.2em;
}
@media (max-width:1000px){
	.netshop{
		border-radius: 4px;
		width: 100%;
		height: calc(
				64px + 
				0.8em + 
				((100vw * 0.9 - 0.8em) * 5 / 7) / 9);
	}
	.netshop:before{
		border-radius: 4px;
	}
	.netshop::after{
		top: 8px;
		left: 8px;
		right: 8px;
		bottom: 8px;
		border-radius: 3px;
	}

}
@media (max-width:620px){
	.netshop{
		height: auto;
		font-size: max(12px, 1.8vw);
	}
	.netshop::after{
		top: 0.4em;
		left: 0.4em;
		right: 0.4em;
		bottom: 0.4em;
	}
}
/* サンプル販売アイコン ここまで */



/*TOPメイン-スワイプバナー*/
.swipe_bannar {
    width: 490px;
	border-radius: 4px;
	background-color: #fff;
}
.swipe_bannar .swiper-wrapper{
    height: 54px;
}
.swiper-container{
	border-radius: 4px;
	overflow: hidden;
	box-shadow: 0 0 4px rgba(0,0,0,0.3);
}
.swipe_bannar img{
	display: block;
    width: 100%;
    height:auto;
    -webkit-backface-visibility: hidden;
	backface-visibility:hidden;
	border-radius: 4px;
}

.swipe_bannar:hover img{
	opacity: 0.7;
}

.swipe_bannar .swiper-button-prev,.swipe_bannar .swiper-button-next {
    --swiper-navigation-size: 28px;
}
.swipe_bannar .swiper-pagination {
    width: 490px;
}
.swipe_bannar .swiper-pagination-bullet{
    margin: 0 4px;
}
.swipe_bannar .swiper-pagination-bullet-active {
    background: #42E4CD;
}
.swipe_bannar .swiper-button-next, .swipe_bannar .swiper-button-prev{
	display: none;
}
@media(max-width:1000px){
	.swiper-slide {
		width: 100%;
		min-width: 0;
	}
	.swiper-slide a{
		display:block;
		width: 100%;
		height:100%;
	}
	.swipe_bannar {
		position:static;
	    margin: 0 0 2vw 0;
		width: 100%;
	}
	.swipe_bannar .swiper-wrapper{
    	width: 100%;
		height: auto;
	}
	.swipe_bannar .swiper-pagination {
	    position:static;
		width: 100%;
	}
	.swipe_bannar .swiper-button-prev,.swipe_bannar .swiper-button-next {
		top: 3.3vw;
        --swiper-navigation-size: 4vw;
	}
	.swipe_bannar .swiper-pagination-bullet{
    	margin: 0 0.9vw;
		width:1.5vw;
		max-width: 8px;
		height:1.5vw;
		max-height: 8px;
	}
}
@media(max-width:750px){
	.swipe_bannar .swiper-button-prev,.swipe_bannar .swiper-button-next {
		top: 5vw;
	}
}
/*TOPメイン-スワイプバナーここまで*/