@charset 'UTF-8';

p,li,div{
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-style: normal;
	font-size: 16px;
	letter-spacing: 0.1em;
}

p{margin: 1em 0;}

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

img{
	width:100%;
	max-width: max-content;
}
p:empty{
  display:none;
  margin:0;
}

.center{
	text-align: center;
}
.w600{
	max-width:600px;
	margin-left:auto;
	margin-right:auto;
	width: 100%;
}
header{display: none;}

html,body{
margin: 0;
padding: 0;
}
#main-column{
padding:0!important;
}
#main-column > img{
	position: absolute;
}
#contents{
	width:100%;
	padding:0;
	max-width: none;
}
#contents > article{
	max-width: none;
}

#bread-crumb,
#wp-ins-footer,
.state_r,
.footer_area,
#Journal .journal-cont > p{
	display: none;
}
#Journal .journal-cont{
	margin: 0;
}


.korekore *{
	box-sizing: border-box;
}
.korekore .header{
	background:linear-gradient(to bottom,#e74222 2%,#ea601f 20%,#f39c35 30%,#fbd074 40%,#f7e1a9 50%,#f39c35 73%,#ea601f 85%,#e74222 100%);
	height: 100vh;
	width:100vw;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap:6vh;
}
.korekore .header h1{
	max-width:184px;
	max-height: 399px;
	width:auto;
	margin: 0 auto;
	display: block!important;
}
.korekore .header h1 svg{
    width:92px;
    height:200px;
    display:block;
}

#drawMask .st2,
#drawMask .st3 {
  opacity: 0; /* 念のため。dasharrayが決まるまでの保険 */
}
#drawMask .st1 {
  opacity: 0;
}
.top_img,
.top_txt {
  opacity: 0;
}

.korekore .header h1 svg .st0{fill:#FFFFFF;}
.korekore .header h1 svg .st1{fill:none;stroke:#fff;stroke-width:20;stroke-miterlimit:10;}
.korekore .header h1 svg .st2{fill:none;stroke:#fff;stroke-width:8;stroke-miterlimit:10;}
.korekore .header h1 svg .st3{fill:none;stroke:#fff;stroke-width:7;stroke-miterlimit:10;}

.korekore .header .top_img{
	display: block;
	height: 13vh;
	width: auto;
	max-width:600px;
	max-height: 150px;
  opacity: 0;
  transform: translateY(8px);
}
.korekore .header .top_txt{
	writing-mode: vertical-rl;
	color: #fff;
	font-size: 14px;
	font-weight: bold;
	margin: 0 auto;
	line-height: 2.5;
	letter-spacing: 0.07em;
  opacity: 0;
  transform: translateY(8px);
}

.korekore .navi{
	background: #e6e6e6;
	padding: 8px;
	z-index: 2;
	position: relative;
}
.korekore .navi ul{
	display: flex;
	justify-content: center;
	align-items: flex-start;
	padding:1em 0;
	margin: 0!important;
}
.korekore .navi ul li{
	position: relative;
}
.korekore .navi ul li::after{
	content:"";
	display: block;
	position: absolute;
	top:2px;
	left: 0;
	height:24px;
	width: 1px;
	background: #4d4d4d;
}
.korekore .navi ul li:first-child::after{
	background: transparent;
}
.korekore .navi ul li a{
	font-size: 16px;
	color: #000;
	padding: 0 40px 14px;
	position: relative;
	display: block;
}
.korekore .navi ul li a::after{
	content:"";
	position: absolute;
	border-left: 1px solid #000;
	border-bottom: 1px solid #4d4d4d;
	width:8px;
	height:8px;
	bottom:0;
	left: calc(50% - 5px);
	transform:rotate(-45deg);
	
}
.korekore .navi ul li:last-child{
	border-right: none;
}
.korekore #shop{
	padding:80px 20px 60px;
}
.korekore #shop h2{
	background-image: url("/pic-labo/korekore-img3.png");
	background-repeat: no-repeat;
	background-position: bottom center;
	font-size: 16px;
	padding-bottom: 1.2em;
	text-align: center;
	margin-bottom: 50px;
	font-weight: 500;
}

.korekore #shop .gransta{
	text-align: center;
}
.korekore #shop .gransta > div{
	display: inline-block;
	position: relative;
}
.korekore #shop .gransta .limited{
	background: linear-gradient(135deg,#f3da8b 0%,#efcb7e 13%, #f3da8b 26%, #c68903 73%, #eec983 94%);
	border-radius: 50%;
	width:150px;
	height: 150px;
	font-size:24px;
	font-weight: bold;
	text-align: center;
	color: #fff;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	line-height: 1.4;
	position: absolute;
	top:-42px;
	left: -34px;
}

.korekore #shop .gransta .limited::after{
	content:"";
	display: block;
	border-radius: 50%;
	position: absolute;
	border: 3px solid #efcb7e;
	width:158px;
	height: 158px;
	top:-7px;
	left: -7px;
}

.korekore #shop .gransta .limited span{
	font-size: 20px;
	display: block;
}

.korekore #shop .gransta p{
	background: #ffee77;
	font-size: 28px;
	font-weight: 700;
	color:#e95511;
	letter-spacing: -1px;
	margin: 0;
	padding-left: 110px;
}
.korekore #shop .gransta p span{
	font-size: 14px;
	margin-left: -8px;
}

.korekore #shop .txt{
	text-align: center;
}

.korekore #shop .txt div{
	display: inline-block;
	text-align: left;
}

.korekore #shop .txt > div > p:first-child{
	font-size: 24px;
	font-weight: bold;
	margin-bottom: 0;
}
.korekore #shop .txt > div > p:nth-child(2){
	font-size: 20px;
	font-weight: bold;
	margin-top: 0;
}
.korekore #shop .txt > div > p:nth-child(3){
	letter-spacing: 0.2em;
	margin-bottom: 0;
}
.korekore #shop .txt > div > div{
	margin-top: 0.2em;
	display: flex;
}
.korekore #shop .txt > div > div> p{
	letter-spacing: 0.2em;
}
.korekore #shop .txt > div > div> p span{
	font-size:80%;
	letter-spacing: 0.5px;
}

.korekore .item{
	background: linear-gradient(#248fbf 0%,#dfd3a2 30%,#f0c17b 50%, #eca449 75%, #f4c87b 100%);
	padding:80px 20px 60px;
}
.korekore .item h2{
	font-size: 20px;
	font-weight: 400;
	letter-spacing: 0.4em;
	text-align: center;
	font-weight: 500;
}
.korekore .item h3{
	background-image: url("/pic-labo/korekore-img5.png");
	background-repeat: no-repeat;
	background-position: bottom center;
	font-size: 16px;
	text-align: center;
	font-weight: 400;
	margin-bottom: 50px;
	letter-spacing: 0.4em;
	padding:80px 0 1.2em;
	font-weight: 500;
}

.korekore .item h4{
	font-size: 24px;
	text-align: center;
	margin: 1em auto;
}

.korekore .item .item_box{
	margin-top: 120px;
	text-align: center;
}


.korekore .item h3 + .item_box{
	margin-top: 0px;
}

.korekore .item .item_box img{
	transform: scale(0.9);
}

.korekore .item .item_box .item_name{
	font-size: 22px;
	font-weight: 500;
	margin-bottom: 0;
}
.korekore .item .item_box .item_price{
	font-size: 18px;
	font-weight: 500;
	margin-top:0.2em;
}

.korekore .item .item_toggle .toggle_title{
	border: 1px solid #231815;
	border-bottom: none;
	background: #ffffff88;
	padding:1.5em;
	margin: 50px auto 0;
	text-align: center;
	position: relative;
	line-height: 1;
	font-family: sans-serif;
	font-size: 13px;
	letter-spacing: 0;
	cursor: pointer;
}
.korekore .item .item_toggle .toggle_title::before,
.korekore .item .item_toggle .toggle_title::after{
	content:"";
	bottom: 0;
	position: absolute;
	width:47%;
	height: 1px;
	background: #231815;
}
.korekore .item .item_toggle .toggle_title::before{
	left: 0;
}
.korekore .item .item_toggle .toggle_title::after{
	right: 0;
}
.korekore .item .item_toggle .toggle_title::marker{
	content:"";
}
.korekore .item .item_toggle .toggle_title span{
	content:"";
	position: absolute;
	border-left: 2px solid #231815;
	border-bottom: 2px solid #231815;
	width:6px;
	height: 6px;
	transform: rotate(-45deg);
	transition: 0.2s;
	bottom: -3px;
	left: calc(50% - 3px);
}
.korekore .item .item_toggle.is-open .toggle_title span{
	transform: rotate(135deg);
}

.korekore .item .item_toggle .inner{
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	background:  #ffffff88;
	border: none;
	border-top: none;
	transition: 0.3s;
}
.korekore .item .item_toggle.is-open .inner{
	max-height: 1500px;
	border:1px solid #231815;
	border-top:none;
	opacity: 1;
}

.korekore .item .item_toggle .inner .flex1{
	display: flex;
	align-items: center;
	gap:20px;
	margin:1.5em;
}
.korekore .item .item_toggle .inner .flex1 img{
	width:40%;
}
.korekore .item .item_toggle .inner .flex1 p{
	font-family: sans-serif;
	font-size: 13px;
	letter-spacing: 0;
}
.korekore .item .item_toggle .inner .flex1 p.lead{
	font-size: 16px;
	line-height: 1.8;
}
.korekore .item .item_toggle .inner .flex1 p b{
	font-size: 14px;
}

.korekore .item .item_toggle .inner .oishi{
	margin:1.5em;
	overflow: hidden;
	box-sizing: border-box;
	max-width:554px;
}
.korekore .item .item_toggle .inner .oishi p.lead{
	font-size: 16px;
	text-align: center;
}
.korekore .item .item_toggle .inner .oishi iframe{
	margin:0 auto!important;
	width:85%!important;
	min-width: 200px!important;
	display: block;
	border: transparent!important;
}

.korekore .item .item_withicon{
	position: relative;
	display: inline-block;
}
.korekore .item .item_withicon .icon{
	position: absolute;
	left: -55px;
	top:-10px;
	background: #c79610;
	box-shadow: 3px 3px 10px #666;
	color: #fff;
	text-align: center;
	border-radius: 50%;
	font-size: 13px;
	line-height: 1.3;
	letter-spacing: -0.5px;
	width:120px;
	height: 120px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	z-index: 2;
}
.korekore .item .item_withicon .icon span{
	font-size: 20px;
}

.korekore .item .item_box .flex2{
	display: flex;
	justify-content: center;
	align-items: flex-start;
	gap:60px;
	margin-bottom: 30px;
}

.korekore .item .item_box .flex2 .item_name{
	margin-top: 0;
}

.korekore .item .item_box .flex2 p + img{
	margin-top: 20px;
}
.korekore .item .other{
	display: flex;
	margin: 80px auto 50px;
	justify-content: center;
	align-items: center;
	gap:20px;
}
.korekore .item .other::before,
.korekore .item .other::after{
	content:"";
	display: block;
	height: 1px;
	width:100%;
	border-top: 1px solid #231815;
	border-bottom: 1px solid #231815;
}
.korekore .item .other p{
	font-size: 18px;
	font-weight: 500;
	flex-shrink: 0;
	text-align: center;
}

.korekore .item .flex3{
	display: flex;
	justify-content: space-between;
}

.korekore .item .flex3 .item_box,
.korekore .item .grid1 .item_box{
	margin-top: 0;
}

.korekore .item .flex3 + p{
	letter-spacing: 0;
	font-size: 14px;
}

.korekore .item .grid1 .item_box {
	display: grid;
	gap:20px;
	grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
	margin-bottom: 60px;
	align-items: center;
}

.korekore .item .grid1 .sanserif,
.korekore .item .flex3 .sanserif{
	font-family: sans-serif;
	font-size: 14px;
	letter-spacing: 0;
	text-align: left;
}
.korekore .item .grid1 .sanserif{
	margin: 0;
}
.korekore .item .grid1 .item_box img{
	margin: 0 auto;
}
.korekore .item .grid1 .item_name{
	margin-top:0;
}

.korekore #footer{
	text-align: center;
	padding:20px 20px 10px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap:24px;
}
.korekore #footer a:first-child{
	background: #4d4d4d;
	color:#fff;
	font-weight: bold;
	padding:12px 20px;
	font-family: sans-serif;
	display: flex;
	justify-content: center;
	align-items: center;
	gap:10px;
}
.korekore #footer p{
	margin: 0;
	font-size: 12px;
	font-family: sans-serif;
}
.korekore .sp,
.korekore .sp350{
	display: none;
}

@media screen and (max-width:640px){
	.korekore .navi ul li a{
		font-size: 13px;
	}
	.korekore #shop .gransta .limited{
		font-size: 18px;
		width:110px;
		height:110px;
		left: -10px;
	}

	.korekore #shop .gransta .limited span{
		font-size: 14px;
	}
	.korekore #shop .gransta .limited::after{
		width:114px;
		height:114px;
		border: 2px solid #efcb7e;
		top:-4px;
		left:-4px;
	}
	.korekore #shop .gransta p{
		padding-left: 104px;
		padding-top:2px;
	}
}
@media screen and (max-width:500px){
	.korekore .sp{
		display: inline;
	}

	.korekore .header .top_img{
		width:60%;
		height: auto;
	}
	.korekore .navi{
		padding:4px 0;
	}
	.korekore .navi ul li a{
		padding:0 16px 14px;
	}
	.korekore #shop .gransta p{
		font-size: 18px;
	}
	.korekore #shop .gransta .limited{
		letter-spacing: 1px;
	}
	.korekore #shop .txt > div > p:first-child{
		font-size: 20px;
	}
	.korekore #shop .txt > div > p:nth-child(2){
		font-size: 18px;
	}
	.korekore #shop .txt > div > p:nth-child(3),
	.korekore #shop .txt > div > div p{
		font-size: 14px;
	}
	.korekore #shop .txt > div > div > p:first-child{
		letter-spacing: 0;
		text-indent: -0.5em;
	}
	.korekore .item h4{
		font-size: 18px;
	}
	.korekore .item .item_box img{
		transform: scale(0.8);
	}
	.korekore .item .item_box .item_name{
		font-size: 16px;
	}
	.korekore .item .item_box .item_price{
		font-size: 14px;
	}
	.korekore .item .item_box .item_price span{
		font-size: 12px;
		letter-spacing: 0;
	}
	.korekore .item .item_toggle .toggle_title{
		font-size: 12px;
		margin-top: 20px;
	}
	.korekore .item .item_toggle .inner .flex1{
		flex-direction: column;
		gap:10px;
		margin: 1em;
	}
	.korekore .item .item_toggle .inner .flex1 img{
		width:100%;
	}
	.korekore .item .item_toggle .inner .flex1 p.lead,
	.korekore .item .item_toggle .inner .oishi p.lead{
		font-size: 14px;
	}
	.korekore .item .item_toggle .inner .flex1 p{
		font-size: 12px;
	}
	.korekore .item .item_withicon .icon{
		width:108px;
		height:108px;
		font-size: 12px;
		left: -10px;
	}
	.korekore .item .item_box{
		margin-top: 60px;
	}
	.korekore .item .item_box .flex2{
		justify-content: center;
		gap:40px;
	}
	.korekore .item .item_box .flex2 > img{
		max-width:80px;
		transform-origin: top center;
		margin-top:14px;
	}
	.korekore .item .item_box .flex2 div img{
		max-width:160px;
	}
	.korekore .item .item_withicon .icon span{
		font-size: 18px;
	}
	.korekore .item .other{
		margin: 60px auto 0px;
	}
	.korekore .item .flex3{
		flex-direction: column;
		gap:40px;
	}
	.korekore .item .grid1 .item_box{
		grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
		gap:0;
		margin-bottom: 40px;
	}
	.korekore .item .grid1 .sanserif,
	.korekore .item .flex3 .sanserif{
		margin-top: 0;
		text-align: center;
		font-size: 12px;
	}
	.korekore .item .item_box .item_name{
		margin-top: 0;
	}
	.korekore .item .grid1 .item_name{
		margin-top: 1em;
	}
	.korekore .item .item_toggle .inner .oishi{
		margin:1em 0.5em;
	}
	.korekore #footer{
		gap:14px;
	}
	.korekore #footer a:first-child{
		font-size: 12px;
	}
	.korekore #footer a:nth-child(2) img{
		width:30px;
		height: 30px;
	}
}

@media screen and (max-width:350px){
	.korekore .sp350{
		display: inline;
	}
	.korekore .navi ul li a{
		padding:0 10px 14px;
	}
	.korekore #shop .gransta .limited{
		font-size: 18px;
		width:110px;
		height: 110px;
	}
	.korekore #shop .gransta .limited::after{
		width:114px;
		height: 114px;
	}
	.korekore #shop .gransta p{
		padding-left: 104px;
	}
	.korekore #shop .txt > div > p:first-child{
		font-size: 20px;
	}
	.korekore #shop .txt > div > p:nth-child(2){
		font-size: 18px;
	}
	.korekore #shop .txt > div > p:nth-child(3),
	.korekore #shop .txt > div > div p {
		font-size: 14px;
	}
}

@media screen and (max-height:550px){
	.korekore .header{
		gap:3vh;
	}
	.korekore .header h1{
		height: 36vh;
	}
	.korekore .header h1 svg{
		height: 100%;
		width: auto;
	}
	.korekore .header .top_img{
		height: 40px;
		width: auto;
	}
	.korekore .header .top_txt{
		font-size: 11px;
		letter-spacing: 0;
	}
}