@charset "utf-8";

.box-wrap {
	position: relative;
	padding-left: 220px;
	/* max-width: 1000px; */
}
.box-wrap:before {
	content: " ";
	display: block;
	visibility: hidden;
}
.box-wrap#services:before {
	margin-top: -120px;
	height: 120px;
}
.box-wrap#profile:before {
	margin-top: -40px;
	height: 40px;
}
.box-wrap#works:before {
	margin-top: -40px;
	height: 40px;
}
@media (max-width: 768px) {
	.box-wrap {
		padding-left: 0;
	}
}
/* .box#prof-works {
	max-width: 1000px;
} */


#mainimg {
	position: relative;
	/*height: 800px;*/
	height: 100vh;
	background-image: url("../images/mainimg.png");
	background-repeat: no-repeat;
	background-size: cover;
	animation-name: mainimg;
	animation-duration: 1s;
	animation-fill-mode: forwards;
}
@keyframes mainimg {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
.lead-area {
	position: absolute;
	z-index: 1;
	top: 35.768%;
	left: 0;
}
.lead-area div, .lead-area p {
	padding-left: 80px;
}
.lead-area .logo {
	width: 212px;
	padding-left: 245px
}
.lead-area p {
	font-size: 18px;
	font-weight: 400;
	line-height: 1.9em;
	letter-spacing: .2em;
}
.lead-area .lead1 {
	padding-top: 60px;
}
.lead-area .lead2 {
	padding-top: 34px;
}
@media screen and (max-width: 768px) {
	#mainimg {
		height: 300px;
		background-image: url("../images/mainimg_sp.png");
		position: static;
	}
	.lead-area {
		position: relative;
		padding-top: 190px;
		margin-bottom: 60px;
		top: 0;
	}
	.lead-area .logo {
		width: 150px;
		padding-left: 25px;
	}
	.lead-area div, .lead-area p {
		padding-left: 25px;
		padding-right: 20px;
	}
	.lead-area p {
		padding-top: 30px;
		line-height: 1.7em;
	}
	.lead-area .lead1 {
		padding-top: 32px;
	}
	.lead-area .lead2 {
		padding-top: 25px;
	}
}

.lead-area .lead1,
.lead-area .logo {
    animation-name: fadeup;
    animation-duration: 1s;
	animation-fill-mode:forwards;
	opacity: 0;
	animation-delay: 1.7s;
}
.lead-area .lead2 {
    animation-name: fadeup;
    animation-duration: 1s;
	animation-fill-mode:forwards;
	opacity: 0;
	animation-delay: 2.2s;
}
@keyframes fadeup {
from {
    opacity: 0;
    transform: translateY(50px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}


.eachTextAnime span {
	opacity: 0;
}
.eachTextAnime.appeartext span {
	animation-name: text_anime_on;
    animation-duration: 4.0s;
	animation-fill-mode:forwards;
	opacity: 0;
	animation-delay: 1.0s;
}
@keyframes text_anime_on {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

/* 画像角丸 
--------------------------------- */
.imgradius  {
	width: 100%;
	border-radius: 10px;
	overflow: hidden;
}
.imgradius_r  {
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
	overflow: hidden;
}
.imgradius img  {
	border-radius: 10px;
}
.imgradius_r img  {
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
}

/* --------------------------------- */
.topimg {
	padding-top: 86px;
	margin-right: 80px;
	display: flex;
	justify-content: space-between;
	line-height: 0;
}
.topimg .img1 {
	width: 53.125vw;
	/* border-radius: 0 0 12px 0; */
	height: 520px;
	overflow: hidden;
}
.topimg .img1 img,
.topimg .img2 img,
.topimg .img3 img {
	width: 100%;
}
.topimg .imgs {
	width: 38%;
}
.topimg .imgs .img2 {
	width: 25vw;
	/* height: 240px; */
	margin-left: auto;
	padding-top: 60px;
}
.topimg .imgs .img3 {
	/* height: 400px; */
	margin-top: 76px;
	width: 34.375vw;
	margin-left: auto;
}
@media screen and (max-width: 768px) {
	.topimg {
		padding-top: 248px;
		margin-right: 0px;
		display: block;
		/* margin-top: 248px; */
	}
	.topimg .img1 {
		width: auto;
		height: auto;
		margin-right: 50px;
	}
	.topimg .imgs {
		width: auto;
		display: flex;
		justify-content: space-between;
		margin-left: 12px;
		margin-right: 12px;
	}
	.topimg .imgs .img2 {
		/* width: 45.01%; */
		width: 42.736%;
		margin-left: 0;
		height: 30vw;
		/* height: 112px; */
		/* margin-right: 20px; */
		margin-top: 20px;
		padding-top: 0;
	}
	.topimg .imgs .img3 {
    /* width: 54.025%; */
		width: 51.285%;
		height: 44vw;
		/* height: 160px; */
		margin-top: 20px;
		/* margin-left: 6%; */
	}
}
@media all and (min-width: 768px) and (max-width: 768px) {
	.topimg {
		margin-top: 205px;
	}
}

/* services
----------------------------------------------------------------- */
.services {
	/* padding-left: 240px; */
	padding-right: 40px;
	max-width: 1040px;
	margin: -90px auto 0;
}
.services h2 {
	font-family: var(--text-shippori);
	font-size: 32px;
	font-weight: 300;
	letter-spacing: .2em;
	/*position: relative;*/
	display: flex;
	align-items: flex-end;
}
@media (max-width: 1280px) and (min-width: 769px) {
	.services h2 {
		font-size: calc((32 - 26) * ((100vw - 769px) / (1280 - 769)) + 26px);
	}
}
.services h2 span {
	padding-left: 20px;
}
.services h2 span img {
	width: 40px;
	height: auto;
}
/*
.services h2::after {
	content: url("../images/flower01.png");
	transform: scale(0.5);
	position: absolute;
	top: -95px;
	left: 155px;
}
*/
.services .inner {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	padding-top: 70px;
	column-gap: 50px;
	/* max-width: 1000px; */
	/* margin: 0 auto; */
}
.services .inner .box {
	width: calc(100% / 3 - 50px);
	max-width: 395px;
}
.services .inner .box .img-wrap {
	overflow: hidden;
	/* height: 320px; */
}

.services .inner .box .img-wrap img {
	border-radius: 10px;
}


/* .services .inner .box img {
	height: 320px;
	object-fit: cover;
} */
.services .inner .box:nth-of-type(2) {
	margin-top: 100px;
}
.services .inner .box:nth-of-type(3) {
	margin-top: -148px;
	order: 3;
}
.services .inner .box:nth-of-type(4) {
	order: 1;
	margin-top: 330px;
}
.services .inner .box:nth-of-type(5) {
	order: 2;
	margin-top: -50px;
}
.services .inner .box:nth-of-type(6) {
	order: 6;
}
@media screen and (max-width: 1024px) {
	.services .inner {
		justify-content: space-evenly;
	}
	.services .inner .box {
		width: calc(100% / 2 - 80px);
	}
	.services .inner .box:nth-of-type(2),
	.services .inner .box:nth-of-type(5) {
		margin-top: 40px;
	}

	.services .inner .box:nth-of-type(3),
	.services .inner .box:nth-of-type(4) {
		margin-top: 0;
	}
}
@media screen and (max-width: 768px) {
	.services {
		padding-left: 45px;
		padding-right: 45px;
		margin-top: 40px;
	}
	.services h2 {
		font-size: 24px;
		margin-left: -20px;
	}
	.services h2 span {
		padding-left: 12px;
	}
	.services h2 span img {
		width: 30px;
	}
	/*
	.services h2::after {
		transform: scale(0.4);
		left: 125px;
	}
	*/
	.services .inner {
		display: flex;
		padding-top: 36px;
	}
	.services .inner .box {
		width: fit-content;
		/* max-width: 600px; */
		margin: 0 auto;
		display: flex;
    flex-direction: column;
    align-items: flex-start;
	}
	.services .inner .box:nth-of-type(2),
	.services .inner .box:nth-of-type(3),
	.services .inner .box:nth-of-type(4),
	.services .inner .box:nth-of-type(5) {
		margin-top: 34px;
	}
	.services .inner .box:nth-of-type(6) {
		display: none;
	}
	.services .inner .box:nth-of-type(1){
		order: 1;
	}
	.services .inner .box:nth-of-type(2){
		order: 2;
	}
	.services .inner .box:nth-of-type(3){
		order: 4;
	}
	.services .inner .box:nth-of-type(4){
		order: 3;
	}
	.services .inner .box:nth-of-type(5){
		order: 5;
	}
}

.services .inner .box p.name {
	font-size: 20px;
	font-weight: 700;
	padding-top: 12px;
}
.services .inner .box p.en {
	font-family: var(--text-shippori);
	font-size: 14px;
	font-weight: 300;
}
@media (max-width: 1280px) and (min-width: 769px) {
	.services .inner .box p.name {
		font-size: calc((20 - 16) * ((100vw - 769px) / (1280 - 769)) + 16px);
	}
	.services .inner .box p.en {
		font-size: calc((14 - 12) * ((100vw - 769px) / (1280 - 769)) + 12px);
	}
}
/* price開閉
--------------------------------- */
.pricewrap {
	/* margin-top: 70px;
	margin-left: 240px;
	margin-right: 140px; */
	max-width: 880px;
	margin: 70px auto 0;
	position: relative;
	padding-right: 11.62%;
}
.square {
	max-width: 240px;
	width: 50%;
	height: 65px;
	/* border-bottom: 65px solid #343434;
	border-left: 35px solid transparent;
	border-right: 35px solid transparent; */
	background-color: #343434;
	box-sizing: border-box;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: -35px;
	position: relative;
	z-index: 10;
}
.square::before,
.square::after {
	content: "";
	position: absolute;
	background-image: url("../images/menu_radius_pc.png");
	background-repeat: no-repeat;
	width: 48px;
	height: 32px;
	top: 0;
}
.square::before {
	left: -47px;
}
.square::after {
	right: -47px;
	transform: rotateY(180deg);
}
.square h3 {
	color: #fff;
	text-align: center;
	font-family: var(--text-shippori);
	font-size: 24px;
	font-weight: 300;
	padding-top: 20px;
	letter-spacing: .2em;
}
@media screen and (max-width: 768px) {
	.pricewrap {
		margin-left: auto;
		margin-right: auto;
		margin-top: 64px;
		padding-right: 0;
	}
	.square {
		max-width: 208px;
		width: 70%;
		height: 35px;
		border-bottom: 35px solid #343434;
		border-left: 25px solid transparent;
		border-right: 25px solid transparent;
		margin-bottom: -5px;
	}
	/* .square h3 {
		font-size: 22px;
	} */
	.square::before,
	.square::after {
	background-image: url("../images/menu_radius_sp.png");
	width: 23px;
	height: 32px;
	top: 0;
}
/* .square::before {
	left: -22px;
} */
.square::after {
	/* right: -22px; */
	transform: rotateY(180deg);
}
}
.price {
	padding: 35px 35px 25px 35px;
	background-color: #343434;
	border-radius: 4px;
	position: relative;
}
.price .inner {
	padding: 60px 17.285% 70px;
	background-color: #fff;
	/*border-bottom: #343434 solid 40px;*/
	border-radius: 4px;
	background-image: url("../images/flower04.png"),url("../images/flower05.png");
	background-position: top 10px left 10px, bottom 10px right 10px;
	background-repeat: no-repeat;
	background-size: 120px auto, 160px auto;
}
.price .inner dl {
	max-width: 520px;
	margin: 0 auto;
}
.price .inner .price-item {
	display: flex;
	justify-content: space-between;
	/* flex-wrap: wrap; */
	text-align: left;
	column-gap: 20px;
}
.price .inner .price-item + .price-item {
	margin-top: 40px;
}
.price .inner .price-item dt {
	width: 75%;
	/* margin-top: 30px; */
}
.price .inner .price-item .kana {
	font-size: 20px;
	font-weight: 700;
	padding-right: 10px;
}
.price .inner .price-item dt .eng {
	font-size: 14px;
	font-weight: 300;
	font-family: var(--text-shippori);
	padding-top: 5px;
	line-height: 1;
}
.price .inner .price-item dd {
	font-size: 18px;
	font-weight: 300;
	font-family: var(--text-shippori);
	/* margin-top: 30px; */
}

.price .inner .other {
	position: relative;
	padding-top: 84px;
}

.price .inner .other::after {
	content: '';
	position: absolute;
	width: 115.385%;
	height: 1px;
	background-image: linear-gradient(to right, #343434, #343434 4px, transparent 5px, transparent 8px);
	background-size: 8px 1px;
	background-repeat: repeat-x;
	translate: -50% 0;
	top: 52px;
	left: 50%;
}

.price .inner .other .txt {
	font-size: 20px;
	font-weight: 700;
	text-align: center;
}

@media screen and (max-width: 768px) {
	.price {
		margin-left: 15px;
		margin-right: 15px;
		padding: 35px 10px 25px;
	}
	.price .inner {
		padding: 35px 20px 40px;
		background-image: none;
	}
	.price .inner .price-item + .price-item {
		margin-top: 12px;
	}
	.price .inner .price-item dt {
		width: 60%;
		/* margin-top: 20px; */
	}
	.price .inner .price-item .kana {
		padding-right: 10px;
	}
	.price .inner .price-item dt .eng {
		padding-top: 5px;
	}
	.price .inner .price-item dd {
		/* margin-top: 20px; */
		display: flex;
		align-items: flex-end;
	}

	.price .inner .other {
		position: relative;
		padding-top: 83px;
	}
	
	.price .inner .other::after {
		width: 103.51%;
		top: 41px;
	}
}
.openbtn {
	cursor: pointer;
	text-decoration: none;
	display: block;
	width: 40px;
	height: 40px;
	background-color: #343434;
	border-radius: 50vh;
	border: #fff solid 1px;
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translate(-50%, -50%);
	transition: ease 280ms;
	z-index: 11;
}
.openbtn span {
	width: 100%;
	display: block;
	height: 40px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: auto 10px;
}
.openbtn span.open {
	background-image: url("../images/icn_y_w.svg");
	max-width: 10px;
	margin: auto;
}
.openbtn span.close {
	background-image: url("../images/icn_y_w.svg");
	max-width: 10px;
	margin: auto;
	transform: rotateZ(180deg);
}
@media (min-width: 769px) {
	.openbtn:hover {
		background-color: #fff;
		border: 1px solid #343434;
	}
	.openbtn:hover span.open,
	.openbtn:hover span.close {
		background-image: url("../images/icn_y_b.svg");
		max-width: 10px;
		margin: auto;
	}
}
.fimg {
	height: 360px;
	background-image: url("../images/img04_pc.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	margin-top: 140px;
}
@media screen and (max-width: 768px) {
	.fimg {
		height: 150px;
		background-image: url("../images/img04_sp.jpg");
		background-position: left;
		margin-top: 85px;
	}
}

/* shop
----------------------------------------------------------------- */
.shop {
	position: relative;
	padding-top: 190px;
	padding-left: 240px;
	container-type: inline-size;
}

@media screen and (max-width: 768px){
	.shop {
		padding-left: 45px;
	}
}

.shop::after {
	content: '';
	position: absolute;
	max-width: calc(50vw + 457px);
	width: 85.703125%;
	height: 384px;
	background-color: #F2E5F1;
	z-index: 0;
	bottom: 40px;
	right: 0;
}

@media screen and (max-width: 768px){
	.shop::after {
		max-width: unset;
		width: calc(50vw + 108px);
		height: 1480px;
		bottom: 32px;
	}
}

.shop .flower {
	position: absolute;
	width: 720px;
	right: 0;
	top: 102px;
	z-index: 1;
}

@media screen and (max-width: 1190px){
	.shop .flower {
		width: 75.79cqw;
	}
}

@media screen and (max-width: 768px){
	.shop .flower {
		width: 300px;
	}
}

.shop .block{
	padding-right: 40px;
	margin: 0 auto;
	max-width: 1000px;
}

.shop .block h2 {
	position: relative;
	font-family: var(--text-shippori);
	font-size: 32px;
	font-weight: 300;
	letter-spacing: .2em;
	/*position: relative;*/
	display: flex;
	align-items: flex-end;
	z-index: 1;
}

@media screen and (max-width: 768px){
	.shop .block h2 {
		font-size: 24px;
	}
}

.shop .block .inner {
	position: relative;
	max-width: 920px;
	z-index: 2;
	container-type: inline-size;
}

@media screen and (max-width: 768px){
	.shop .block .inner {
		display: grid;
		justify-items: center;
	}
}

.shop .block .inner .img-wrap {
	display: flex;
	column-gap: 4.34782608695652%;
	margin-top: 30px;
}

@media screen and (max-width:768px){
	.shop .block .inner .img-wrap {
		display: grid;
		row-gap: 45px;
		margin-top: 40px;
	}
}

.shop .block .inner .img-wrap .card {
	img {
		border-radius: 10px;
	}
	.txt {
		margin-top: 26px;
		font-size: 20px;
		text-align: center;
		color: #343434;
		.nedan {
			font-family: var(--text-shippori);
			font-size: 18px;
		}
	}
}

@media screen and (max-width: 1000px){
	.shop .block .inner .img-wrap .card {
		.txt {
			font-size: 2.77778cqw;
			.nedan {
				font-size: 2.5cqw;
			}
		}
	}
}

@media screen and (max-width:768px){
	.shop .block .inner .img-wrap .card {
		width: 280px;
		.txt {
			font-size: 20px;
			.nedan {
				font-size: 18px;
			}
		}
	}
}


.shop .block .inner .shop-btn{
	position: relative;
	display: flex;
	width: 100%;
	height: 80px;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	border-radius: 6px;
	margin-top: 50px;
	background-image: url(../images/shop_gradation_pc.jpg);
	background-repeat: no-repeat;
	background-position: right;
	filter: drop-shadow(2px 3px 10px rgba( 156, 105, 164, 0.3));
}

@media (max-width:768px) {
	.shop .block .inner .shop-btn{
		width: 280px;
		height: 64px;
		background-image: url(../images/shop_gradation_sp.jpg);
	}
}

.shop .block .inner .shop-btn::before {
	content: "";
	display: block;
	position: absolute;
	top: calc(50% - 5px);
	right: 7.5%;
	width: 120px;;
	height: 5px;
	border: none;
	border-bottom: 1px solid #fff;
	transition: .3s;
}

.shop .block .inner .shop-btn::after {
	content: "";
    display: block;
    position: absolute;
    top: calc(50% - 5px);
    right: calc(7.5% + 2px);
    width: 120px;
    height: 5px;
    border: none;
    border-right: 2px solid #fff;
    transform: skew(45deg);
    transition: .3s;
}

@media (min-width: 769px) {
	.shop .block .inner .shop-btn:hover::before{
    /* right: 15px; */
    width: 90px;
	}
}

@media screen and (max-width: 768px){
	.shop .block .inner .shop-btn::before,
	.shop .block .inner .shop-btn::after {
		width: 51px;
	}
}

.shop .block .inner .shop-btn .txt{
	position: relative;
	font-family: var(--text-shippori);
	font-size: 24px;
	color: #ffffff;
}

.shop .block .inner .shop-btn .txt::after {
	content: '';
	position: absolute;
	width: 21px;
	height: 26px;
	translate: 0 -50%;
	left: -40px;
	top: 56%;
	background-image: url(../images/shop.svg);
	background-repeat: no-repeat;
}

@media (max-width: 768px) {
	.shop .block .inner .shop-btn .txt{
    font-size: 20px;
	}
	.shop .block .inner .shop-btn .txt::after {
		width: 18px;
		height: 22px;
		left: -35px;
	}
}

/* profile
----------------------------------------------------------------- */
.profile {
	/* padding-left: 240px;
	padding-right: 120px; */
	margin: 80px auto 0;
	padding-right: 100px;
	max-width: 925px;
}
.profile h2 {
	font-family: var(--text-shippori);
	font-size: 32px;
	font-weight: 300;
	position: relative;
	margin-left: 37%;
	margin-top: -115px;
	letter-spacing: .2em;
}
@media (max-width: 1280px) and (min-width: 769px) {
	.profile h2 {
		font-size: calc((32 - 26) * ((100vw - 769px) / (1280 - 769)) + 26px);
	}
}
.profile h2 span {
	display: block;
	padding-bottom: 27px;
}
.profile h2 span img {
	width: 80px;
	height: auto;
	margin-left: 20px;
}
/*
.profile h2::before {
	content: url("../images/flower02.png");
	transform: scale(0.5);
	position: absolute;
	top: -155px;
	left: -24px;
}
*/
@media screen and (max-width: 768px) {
	.profile {
		padding-left: 25px;
		padding-right: 25px;
		margin-top: 70px;
	}
	.profile h2 {
		font-size: 24px;
		text-align: center;
		margin-left: 0;
		margin-top: -85px;
	}
	.profile h2 span {
		padding-bottom: 13px;
	}
	.profile h2 span img {
		width: 60px;
		margin-left: -25px;
	}
	/*
	.profile h2::before {
		transform: scale(0.4);
		top: -145px;
		left:  calc(50% - 85px);
	}
	*/
}
.profile .inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 70px;
	column-gap: 14%;
}
/* .profile .profilebox {
	width: 52.18%;
	margin-right: 120px;
	padding-top: 90px;
} */
.profile .profilebox h3 {
	font-size: 26px;
	font-weight: 500;
	padding-bottom: 20px;
}
.profile .profilebox .en {
	font-size: 14px;
	font-weight: 300;
	letter-spacing: .2em;
	padding-bottom: 45px;
}
.profile .profilebox .ex {
	font-size: 16px;
	letter-spacing: .2em;
	margin-bottom: 30px;
}
.profile .profilebox ul {
	padding-top: 30px;
	margin-bottom: 30px;
	background-image : linear-gradient(to right, #000, #000 4px, transparent 5px, transparent 8px);
  background-size: 8px 1px;
  background-position: left top;
  background-repeat: repeat-x;
}
.profile .profilebox li {
	padding-left: 1.0em;
	letter-spacing: .1em;
	/* text-indent: -1.0em; */
	position: relative;
	line-height: 1.5;
}
.profile .profilebox li:before {
	position: absolute;
	content: "";
	left: 0;
	top: 11px;
	width: 6px;
	height: 6px;
	border-radius: 5px;
	background-color: #343434;
}
.profile .img {
	/* flex: 1; */
	max-width: 440px;
	width: 100%;
	/* width: 65.82%; */
}
.profile .profilebox .text {
	padding-top: 30px;
	background-image : linear-gradient(to right, #000, #000 4px, transparent 5px, transparent 8px);
  background-size: 8px 1px;
  background-position: left top;
  background-repeat: repeat-x;
	font-size: 16px;
	line-height: 2;
}
@media screen and (max-width: 1024px) {
	.profile .inner {
		display: block;
		padding-top: 0px;
	}
	.profile .profilebox {
		width: 100%;
		margin-right: 0px;
		padding-top: 45px;
	}
	.profile .profilebox h3 {
		font-size: 24px;
		text-align: center;
		letter-spacing: .2em;
	}
	.profile .profilebox .en {
		text-align: center;
		padding-bottom: 0;
		margin-bottom: 35px;
	}
	.profile .profilebox .ex {
		letter-spacing: .15em;
		line-height: 2;
		padding-top: 0;
	}

	/* .profile .profilebox li {
		line-height: 2;
	} */
	.profile .img {
		/* flex: 0; */
		width: 100%;
		padding-top: 40px;
	}
}
@media (max-width: 768px) {
	.profile .img {
		max-width: initial;
	}
	.profile .profilebox ul {
		padding-top: 20px;
	}
	.profile .profilebox li {
		line-height: 2;
	}
}


/* works
----------------------------------------------------------------- */
.works {
	/* padding-left: 240px;
	padding-right: 80px; */
	margin: 40px auto 0;
	padding-right: 40px;
	max-width: 1000px;
}
.works h2 {
	font-family: var(--text-shippori);
	font-size: 32px;
	font-weight: 300;
	display: flex;
	align-items: flex-end;
	letter-spacing: .2em;
}
@media (max-width: 1280px) and (min-width: 769px) {
	.works h2 {
		font-size: calc((32 - 26) * ((100vw - 769px) / (1280 - 769)) + 26px);
	}
}
.works h2 span {
	padding-left: 0;
}
.works h2 span img {
	width: 40px;
	height: auto;
}
/*
.works h2::after {
	content: url("../images/flower03.png");
	transform: scale(0.5);
	position: absolute;
	top: -95px;
	left: 105px;
}
*/
@media screen and (max-width: 768px) {
	.works {
    padding-left: 25px;
    padding-right: 25px;
    margin-top: 40px;
	}
	.works h2 {
		font-size: 24px;
	}
	.works h2 span img {
		width: 30px;
	}
	/*
	.works h2::after {
		transform: scale(0.4);
		position: absolute;
		top: -93px;
		left: 85px;
	}
	*/
}
.works .inner {
	display: flex;
	/* justify-content: space-between; */
	flex-wrap: wrap;
	padding-top: 45px;
	column-gap: 40px;
	row-gap: 30px;
	max-width: 1066px;
	margin: 0 auto;
}
.works .inner .box {
	max-width: 294px;
	width: calc(100% / 3 - 46px);
	aspect-ratio: 1;
}
/* .works .inner .box:nth-of-type(3) {
	margin-right: 40px;
} */
.works .inner .box:nth-of-type(4) {
	margin-left: 38px;
}
/* .works .inner .box:nth-child(n+4){
	margin-top: 40px;
} */
@media screen and (max-width: 768px) {
	.works .inner {
		padding-top: 22px;
		column-gap: 4px;
		row-gap: 4px;
		justify-content: center;
	}
	.works .inner .box {
		/* max-width: initial; */
		width: calc(100% / 2 - 2px);
	}
	.works .inner .box:nth-of-type(3),
	.works .inner .box:nth-of-type(4),
	.works .inner .box:nth-child(n+4) {
		margin-right: 0px;
		margin-left: 0;
		margin-top: 0;
	}
}

.instagram {
	display: flex;
	justify-content: flex-end;
	/* margin-right: 40px; */
	margin-left: auto;
	/* padding-top: 40px; */
}
.instagram a {
	font-family: var(--text-shippori);
	font-size: 16px;
	font-weight: 300;
	padding-left: 40px;
	letter-spacing: .2em;
	padding-right: 135px;
	position: relative;
}
.instagram a::before {
	content: url("../images/icn_instagram.png");
	transform: scale(0.5);
	position: absolute;
	left: 0px;
	top: -12px;
}
.instagram a span {
	position: relative;
}
.instagram a span::before {
	content: "";
	display: block;
	position: absolute;
	top: calc(50% - 5px);
	right: calc(-100% - 20px);
	width: 120px;
	height: 5px;
	border: none;
	border-bottom: 1px solid #343434;
	transition: .3s;
}
.instagram a span::after {
	content: "";
	display: block;
	position: absolute;
	top: calc(50% - 5px);
	right: calc(-100% - 18px);
	width: 120px;
	height: 5px;
	border: none;
	border-right: 2px solid #343434;
	transform: skew(45deg);
	transition: .3s;
}
@media (min-width: 769px) {
	.instagram a:hover span::before{
    /* right: 15px; */
    width: 90px;
	}
}

@media screen and (max-width: 768px) {
	.instagram {
		padding-top: 32px;
		margin: 0 auto;
	}
	.instagram a {
		padding-right: 95px;
	}
	.instagram a:before {
		left: -6px;
    top: -12px;
	}
	.instagram a::after {
		width: 78px;
		top: calc(50% - 5px);
		right: 8px;
	}
}

/* contact
----------------------------------------------------------------- */
.contactbox {
	height: 360px;
	background-image: url("../images/img05.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	margin-top: 120px;
	position: relative;
}
.contactbox .cl {
	height: 360px;
	display: flex;
	justify-content: center;
	align-items: center;
	background: linear-gradient(52deg, rgba(0,0,0,0.8) 20%, rgba(0,0,0,0.4) 100%);
	position: relative;
	font-family: var(--text-shippori);
	font-size: 40px;
	font-weight: 300;
	color: #fff;
}
.contactbox span {
	position: relative;
	letter-spacing: .2em;
	padding-left: 70px;
}
.contactbox span::before {
	position: absolute;
	content: "";
	background-image: url("../images/icn_mail.png");
	background-size: contain;
	background-repeat: no-repeat;
	top: calc(50% - 10px);
	left: calc(50% - 130px);
	width: 34px;
	height: 21px;
}
.contactbox .cl::before {
	content: "";
	display: block;
	position: absolute;
	top: calc(50% - 5px);
	right: 5%;
	max-width: 240px;
	width: 20vw;
	height: 5px;
	border: none;
	border-bottom: 1px solid #fff;
	transition: .3s;
}
.contactbox .cl::after {
	content: "";
	display: block;
	position: absolute;
	top: calc(50% - 5px);
	right: calc(5% + 2px);
	max-width: 240px;
	width: 20vw;
	height: 5px;
	border: none;
	border-right: 2px solid #fff;
	transform: skew(45deg);
	transition: .3s;
}
@media (min-width: 769px) {
	.contactbox .cl:hover::before{
		/* left: 30px; */
		width: calc(18.75% - 9%);
		max-width: 120px;
		right: 5%;
	}
}
@media screen and (max-width: 768px) {
	.contactbox {
		height: 200px;
		margin-top: 80px;
		background-image: url("../images/footer_img_sp.jpg");
	}
	.contactbox .cl {
		height: 200px;
		font-size: 24px;
		padding-right: 50px;
	}
	.contactbox span {
		left: -15px;
		padding-left: 0;
    letter-spacing: .2em;
	}
	.contactbox span::before {
		left: -35px;
		width: 19px;
		height: 12px;
		top: 50%;
		transform: translateY(-50%);
	}
	.contactbox .cl::before {
		left: 60%;
	}
	.contactbox .cl::after {
		/* right: calc(50% - 138px); */
		left: calc(60% - 4px);
	}
}