#WORK .pickup ul:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
#WORK .pickup ul {
    zoom: 1;
}

#VISUAL .cont {
position: relative;
}
#VISUAL .catch {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
}
#VISUAL .txt1 {
transition: opacity 1s ease;
transition-delay: 1s;
position: absolute;
right: 0;
top: 0;
width: 50%;
height: 100%;
opacity: 0;
}
#VISUAL .txt2 {
transition: opacity 1s ease;
transition-delay: 2s;
position: absolute;
left: 0;
top: 0;
width: 50%;
height: 100%;
opacity: 0;
}
#VISUAL .txt3 {
transition: opacity 3s ease;
transition-delay: 3s;
position: absolute;
right: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0;
}
.init #VISUAL .txt1 {
opacity: 1;
}
.init #VISUAL .txt2 {
opacity: 1;
}
.init #VISUAL .txt3 {
opacity: 1;
}
#VISUAL .catch img {
transform: translateY(-50%) translateX(-50%);
position: absolute;
left: 50%;
top: 50%;
width: auto;
height: 56.8vw;
}
#VISUAL .image {
background-color: #000;
width: 100%;
}
#VISUAL .image img {
display: block;
width: 100%;
height: auto;
object-fit: cover;
opacity: 0.8;
}
#VISUAL .bottom {
position: absolute;
right: 5px;
top: 15px;
}
#VISUAL .copyright {
writing-mode: vertical-rl;
text-orientation: sideways;
letter-spacing: 0.05em;
font-size: 2.4vw;
font-weight: 300px;
line-height: 1;
color: #fff;
}
#VISUAL .copyright::after {
content: '';
display: block;
position: absolute;
left: 1.067vw;
bottom: -18.667vw;
background-color: #fff;
width: 1px;
height: 16vw;
}
#VISUAL .sns {
display: none;
}
@media (min-width: 768px) {
	#VISUAL .catch img {
	height: 316px;
	}
	#VISUAL .image {
	box-sizing: border-box;
	position: relative;
	height: 600px;
	}
	#VISUAL .image img {
	position: absolute;
	top: 0;
	width: 50%;
	height: 100%;
	}
	#VISUAL .image .img1 {
	right: 0;
	}
	#VISUAL .image .img2 {
	left: 0;
	}
	#VISUAL .bottom {
	transform: translateY(-50%);
	right: 17px;
	top: 50%;
	padding-bottom: 230px
	}
	#VISUAL .copyright {
	letter-spacing: 0.05em;
	font-size: 10px;
	}
	#VISUAL .copyright::after {
	left: 4px;
	bottom: 100px;
	height: 120px;
	}
	#VISUAL .sns {
	display: block;
	position: absolute;
	left: -7px;
	bottom: 0;
	list-style: none;
	font-size: 24px;
	}
	#VISUAL .sns li {
	margin-top: 5px;
	}
	#VISUAL .sns li a {
	color: #fff;
	}
}
@media (min-width: 1280px) {
	#VISUAL .image {
	padding-top: 46.875%;
	height: auto;
	}
}

#CATCH {
position: relative;
background-color: #fbf1e5;
}
#CATCH .cont {
padding: 35px 20px 0 20px;
}
#CATCH .hed {
position: relative;
padding: 10px 0 25px 0;
z-index: 1;
}
#CATCH .hed::before {
content: '';
display: block;
transform: translateX(-50%);
position: absolute;
left: 50%;
top: 0%;
background-color: #535d60;
width: 40px;
height: 1px;
}
#CATCH .hed::after {
content: '';
display: block;
transform: translateY(-80%) translateX(-50%);
position: absolute;
left: 50%;
top: 50%;
background: url("../img/cth_hed_bg.svg") no-repeat center center;
background-size: contain;
width: 53.6vw;
height: 21.867vw;
z-index: -1;
}
#CATCH h2 {
margin-bottom: 5px;
font-weight: 900;
font-size: 5.867vw;
line-height: 8.533vw;
text-align: center;
}
#CATCH .hed p {
font-family: 'Poppins', sans-serif;
font-weight: 600;
font-size: 2.667vw;
text-align: center;
color: #beac96;
}
#CATCH .lead {
margin-bottom: 26.667vw;
font-size: 3.467vw;
line-height: 5.333vw;
}
#CATCH .image {
position: relative;
margin: 0 -20px;
}
#CATCH .img1 {
position: absolute;
top: -18.667vw;
right: 5px;
border-radius: 50%;
width: 42.667vw;
height: auto;
}
#CATCH .img2 {
width: 100%;
height: auto;
}
@media (min-width: 768px) {
	#CATCH .cont {
	padding: 80px 20px 0 20px;
	}
	#CATCH .hed {
	position: relative;
	padding: 10px 0 50px 0;
	z-index: 1;
	}
	#CATCH .hed::before {
	width: 80px;
	height: 2px;
	}
	#CATCH .hed::after {
	transform: translateY(-65%) translateX(-50%);
	width: 402px;
	height: 164px;
	}
	#CATCH h2 {
	margin-bottom: 25px;
	padding: 15px 0 0 0;
	font-size: 36px;
	line-height: 1;
	}
	#CATCH .hed p {
	font-size: 16px;
	}
	#CATCH .lead {
	margin: 0 auto;
	height: 540px;
	font-feature-settings: "pkna";
	-webkit-writing-mode: vertical-rl;
	-moz-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	-ms-writing-mode: vertical-rl;
	writing-mode: vertical-rl;
	font-size: 18px;
	line-height: 1.55;
	}
	#CATCH .img1 {
	top: -135px;
	right: 50px;
	width: 320px;
	}
}

#NEWS {
position: relative;
background-color: #fbf1e5;
}
#NEWS .cont {
position: relative;
padding: 15px;
z-index: 2;
}
#NEWS .cont::before {
content: '';
display: block;
position: absolute;
left: 12vw;
bottom: -10vw;
background: url("../common/img/icn_01.svg") no-repeat center center;
background-size: contain;
width: 12vw;
height: 10.667vw;
}
#NEWS .cont::after {
content: '';
display: block;
position: absolute;
right: 10vw;
bottom: -20vw;
background: url("../common/img/icn_02.svg") no-repeat center center;
background-size: contain;
width: 12.533vw;
height: 7.467vw;
visibility: visible;
}
#NEWS .hed {
position: relative;
padding: 0 0 10px 0;
z-index: 1;
}
#NEWS .hed p {
font-family: 'Poppins', sans-serif;
font-weight: 700;
font-size: 6.4vw;
text-align: center;
}
#NEWS h2 {
margin-bottom: 5px;
font-weight: 900;
font-size: 3.2vw;
text-align: center;
}
#NEWS h2::before {
content: '';
display: block;
margin: 3px auto 9px auto;
background-color: #535d60;
width: 30px;
height: 1px;
}
#NEWS .lead {
margin-bottom: 15px;
font-size: 3.467vw;
line-height: 5.333vw;
}
#NEWS .list {
display: flex;
flex-wrap: wrap;
margin: 0 -2px;
list-style: none;
}
#NEWS .list li {
border: solid 2px #fbf1e5;
position: relative;
box-sizing: border-box;
float: left;
width: 33.33333%;
width: calc(100% / 3);
overflow: hidden;
}
#NEWS .list li a {}
#NEWS .list img {
display: block;
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
}
@media (min-width: 768px) {
	#NEWS .cont {
	box-sizing: border-box;
	position: relative;
	margin: 0 auto;
	padding: 80px 30px 160px 30px;
	max-width: 1180px;
	}
	#NEWS .cont::before {
	left: 290px;
	bottom: -30px;
	width: 90px;
	height: 80px;
	}
	#NEWS .cont::after {
	right: 130px;
	bottom: -70px;
	width: 94px;
	height: 55px;
	}
	#NEWS .hed {
	position: relative;
	padding: 0 0 15px 0;
	z-index: 1;
	}
	#NEWS .hed p {
	font-size: 40px;
	text-align: left;
	}
	#NEWS h2 {
	margin-bottom: 5px;
	font-size: 16px;
	text-align: left;
	}
	#NEWS h2::before {
	margin: 5px 0 15px 0;
	}
	#NEWS .lead {
	width: 300px;
	font-size: 16px;
	line-height: 1.75;
	}
	#NEWS .list {
	position: absolute;
	right: 25px;
	top: 90px;
	margin: 0;
	}
	#NEWS .list li {
	border: solid 5px #fbf1e5;
	width: 190px;
	}
	#NEWS .list li:nth-last-of-type(6),
	#NEWS .list li:nth-last-of-type(5) {
	display: none;
	}
}

#ABOUT {
position: relative;
background-color: #fff;
margin: -5% 0;
padding: 25% 0;
z-index: 1;
}
#ABOUT::before {
content: '';
display: block;
position: absolute;
left: 0;
top: 0;
background: #fbf1e5 url("../common/img/wave1_t.svg") no-repeat center center;
background-size: 170% auto;
padding-top: 30%;
width: 100%;
z-index: -2;
}
#ABOUT::after {
content: '';
display: block;
position: absolute;
left: 0;
bottom: 0;
background: #fbf1e5 url("../common/img/wave1_b.svg") no-repeat center center;
background-size: 170% auto;
padding-top: 30%;
width: 100%;
z-index: -2;
}
#ABOUT .cont {
position: relative;
padding: 15px;
}
#ABOUT .pack::before {
transform: rotate(-15deg);
content: '';
display: block;
position: absolute;
left: 10vw;
bottom: -10vw;
background: url("../common/img/icn_03.svg") no-repeat center center;
background-size: contain;
width: 10.4vw;
height: 4vw;
}
#ABOUT .pack::after {
transform: rotate(15deg);
content: '';
display: block;
position: absolute;
right: 5vw;
bottom: -20vw;
background: url("../common/img/icn_04.svg") no-repeat center center;
background-size: contain;
width: 12.267vw;
height: 6.933vw;
visibility: visible;
}
#ABOUT .hed {
position: relative;
padding: 0 0 20px 0;
z-index: 1;
}
#ABOUT .hed p {
font-family: 'Poppins', sans-serif;
font-weight: 700;
font-size: 6.4vw;
text-align: center;
}
#ABOUT h2 {
margin-bottom: 5px;
font-weight: 900;
font-size: 3.2vw;
text-align: center;
}
#ABOUT h2::before {
content: '';
display: block;
margin: 3px auto 9px auto;
background-color: #535d60;
width: 30px;
height: 1px;
}
#ABOUT h3 {
margin-bottom: 20px;
font-weight: 700;
font-size: 4.267vw;
line-height: 6.133vw;
}
#ABOUT .lead {
margin-bottom: 30px;
font-size: 3.467vw;
line-height: 5.333vw;
letter-spacing: 0.05em;
}
#ABOUT .more {
margin-bottom: 35px;
}
#ABOUT .more a {
display: block;
position: relative;
background-color: #535d60;
border-radius: 5.333vw;
margin: 0 auto;
width: 53.333vw;
height: 10.667vw;
font-weight: 700;
font-size: 3.733vw;
line-height: 10.667vw;
text-align: center;
color: #fff;
}
#ABOUT .more a::after {
content: '';
transform: rotate(45deg);
display: inline-block;
position: relative;
top: -2px;
margin-left: 10px;
width: 5px;
height: 5px;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
}
#ABOUT .image {
margin: 0 -15px;
padding: 0 0 0 50px;
}
#ABOUT .image img {
display: block;
border-radius: 15px 0 0 15px;
width: 100%;
height: 250px;
object-fit: cover;
}
@media (min-width: 768px) {
	#ABOUT {
	position: relative;
	background-color: #fff;
	margin: 0;
	padding: 0;
	}
	#ABOUT::before {
	transform: translateY(-40%);
	background-size: 100% auto;
	padding-top: 20%;
	}
	#ABOUT::after {
	transform: translateY(40%);
	background-size: 100% auto;
	padding-top: 20%;
	}
	#ABOUT .cont {
	position: static;
	box-sizing: border-box;
	margin: 0 auto;
	padding: 80px 30px 160px 30px;
	max-width: 1180px;
	}
	#ABOUT .pack {
	position: relative;
	}
	#ABOUT .pack::before {
	left: 5px;
	bottom: -110px;
	width: 78px;
	height: 30px;
	}
	#ABOUT .pack::after {
	right: 25px;
	bottom: -190px;
	width: 92px;
	height: 51px;
	}
	#ABOUT .hed {
	padding: 90px 0 15px 0;
	z-index: 2;
	}
	#ABOUT .hed p {
	font-size: 40px;
	text-align: left;
	}
	#ABOUT h2 {
	margin-bottom: 5px;
	font-size: 16px;
	text-align: left;
	}
	#ABOUT h2::before {
	margin: 5px 0 15px 0;
	}
	#ABOUT h3 {
	width: 510px;
	font-weight: 700;
	font-size: 22px;
	line-height: 1.64;
	background-color: rgba(255,255,255,0.7);
	}
	#ABOUT .lead {
	width: 510px;
	font-size: 16px;
	line-height: 1.75;
	background-color: rgba(255,255,255,0.7);
	}
	#ABOUT .more a {
	border-radius: 30px;
	margin: 0;
	width: 270px;
	height: 60px;
	font-size: 16px;
	line-height: 60px;
	}
	#ABOUT .more a::after {
	transform: translateY(-50%) rotate(45deg);
	content: '';
	position: absolute;
	right: 25px;
	top: 50%;
	width: 8px;
	height: 8px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	}
	#ABOUT .image {
	position: absolute;
	right: 0;
	top: 135px;
	margin: 0;
	padding: 0;
	width: 50%;
	z-index: -1;
	}
	#ABOUT .image img {
	border-radius: 30px 0 0 30px;
	height: 500px;
	}
}

#SERVICE {
position: relative;
}
#SERVICE .cont {
position: relative;
padding: 15px;
z-index: 1;
}
#SERVICE .pack::before {
content: '';
display: block;
position: absolute;
left: 15vw;
bottom: -12vw;
background: url("../common/img/icn_05.svg") no-repeat center center;
background-size: contain;
width: 12.533vw;
height: 12.8vw;
}
#SERVICE .pack::after {
transform: rotate(15deg);
content: '';
display: block;
position: absolute;
right: 8vw;
bottom: -25vw;
background: url("../common/img/icn_06.svg") no-repeat center center;
background-size: contain;
width: 16vw;
height: 9.067vw;
visibility: visible;
}
#SERVICE .hed {
position: relative;
padding: 0 0 20px 0;
z-index: 1;
}
#SERVICE .hed p {
font-family: 'Poppins', sans-serif;
font-weight: 700;
font-size: 6.4vw;
text-align: center;
}
#SERVICE h2 {
margin-bottom: 5px;
font-weight: 900;
font-size: 3.2vw;
text-align: center;
}
#SERVICE h2::before {
content: '';
display: block;
margin: 3px auto 9px auto;
background-color: #535d60;
width: 30px;
height: 1px;
}
#SERVICE h3 {
margin-bottom: 20px;
font-weight: 700;
font-size: 4.267vw;
line-height: 6.133vw;
}
#SERVICE .lead {
margin-bottom: 30px;
font-size: 3.467vw;
line-height: 5.333vw;
letter-spacing: 0.05em;
}
#SERVICE .more {
margin-bottom: 35px;
}
#SERVICE .more a {
display: block;
position: relative;
background-color: #535d60;
border-radius: 5.333vw;
margin: 0 auto;
width: 53.333vw;
height: 10.667vw;
font-weight: 700;
font-size: 3.733vw;
line-height: 10.667vw;
text-align: center;
color: #fff;
}
#SERVICE .more a::after {
content: '';
transform: rotate(45deg);
display: inline-block;
position: relative;
top: -2px;
margin-left: 10px;
width: 5px;
height: 5px;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
}
#SERVICE .image {
margin: 0 -15px;
padding: 0 50px 0 0;
}
#SERVICE .image img {
display: block;
border-radius: 0 15px 15px 0;
width: 100%;
height: 250px;
object-fit: cover;
}
@media (min-width: 768px) {
	#SERVICE {
	position: relative;
	}
	#SERVICE .cont {
	position: static;
	box-sizing: border-box;
	margin: 0 auto;
	padding: 80px 30px 160px 30px;
	max-width: 1180px;
	}
	#SERVICE .pack {
	position: relative;
	margin: 0 0 0 auto;
	width: 510px;
	}
	#SERVICE .pack::before {
	left: -610px;
	bottom: -290px;
	width: 94px;
	height: 95px;
	}
	#SERVICE .pack::after {
	right: 65px;
	bottom: -280px;
	width: 120px;
	height: 68px;
	}
	#SERVICE .hed {
	margin-bottom: 15px;
	padding: 0 0 0 0;
	z-index: 2;
	background-color: rgba(251,241,229,0.7);
	}
	#SERVICE .hed p {
	font-size: 40px;
	text-align: left;
	}
	#SERVICE h2 {
	margin-bottom: 5px;
	font-size: 16px;
	text-align: left;
	}
	#SERVICE h2::before {
	margin: 5px 0 15px 0;
	}
	#SERVICE h3 {
	width: 510px;
	font-weight: 700;
	font-size: 22px;
	line-height: 1.64;
	background-color: rgba(251,241,229,0.7);
	}
	#SERVICE .lead {
	width: 510px;
	font-size: 16px;
	line-height: 1.75;
	background-color: rgba(251,241,229,0.7);
	}
	#SERVICE .more a {
	border-radius: 30px;
	margin: 0;
	width: 270px;
	height: 60px;
	font-size: 16px;
	line-height: 60px;
	}
	#SERVICE .more a::after {
	transform: translateY(-50%) rotate(45deg);
	content: '';
	position: absolute;
	right: 25px;
	top: 50%;
	width: 8px;
	height: 8px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	}
	#SERVICE .image {
	margin: 0 -15px;
	padding: 0 50px 0 0;
	}
	#SERVICE .image {
	position: absolute;
	left: 0;
	top: 210px;
	margin: 0;
	padding: 0;
	width: 50%;
	z-index: -1;
	}
	#SERVICE .image img {
	border-radius: 0 30px 30px 0;
	height: 500px;
	}
}

#WORKS {
position: relative;
background: url("../common/img/bg.png") repeat center center;
background-size: 75px auto;
margin: -5% 0;
padding: 25% 0;
z-index: -2;
}
#WORKS::before {
content: '';
display: block;
position: absolute;
left: 0;
top: 0;
background-image: url("../common/img/wave2_b.svg"), url("../common/img/bg.png");
background-repeat: no-repeat, repeat-x;
background-position: center center, center 1px;
background-size: 170% auto, 150px auto;
padding-top: 30%;
width: 100%;
z-index: -1;
}
#WORKS::after {
content: '';
display: block;
position: absolute;
left: 0;
bottom: 0;
background-image: url("../common/img/wave2_t.svg"), url("../common/img/bg.png");
background-repeat: no-repeat, repeat-x;
background-position: center center, center bottom 1px;
background-size: 170% auto, 150px auto;
padding-top: 30%;
width: 100%;
z-index: -1;
}
#WORKS .cont {
position: relative;
z-index: 1;
padding: 15px;
}
#WORKS .pack::after {
transform: rotate(-40deg);
content: '';
display: block;
position: absolute;
right: 5vw;
bottom: -20vw;
background: url("../common/img/icn_07.svg") no-repeat center center;
background-size: contain;
width: 7.733vw;
height: 12.8vw;
visibility: visible;
}
#WORKS .hed {
position: relative;
padding: 0 0 20px 0;
z-index: 1;
}
#WORKS .hed p {
font-family: 'Poppins', sans-serif;
font-weight: 700;
font-size: 6.4vw;
text-align: center;
}
#WORKS h2 {
margin-bottom: 5px;
font-weight: 900;
font-size: 3.2vw;
text-align: center;
}
#WORKS h2::before {
content: '';
display: block;
margin: 3px auto 9px auto;
background-color: #535d60;
width: 30px;
height: 1px;
}
#WORKS .lead {
margin-bottom: 30px;
font-size: 3.467vw;
line-height: 5.333vw;
letter-spacing: 0.05em;
text-align: center;
}
#WORKS .more {
margin-bottom: 35px;
}
#WORKS .more a {
display: block;
position: relative;
background-color: #535d60;
border-radius: 5.333vw;
margin: 0 auto;
width: 53.333vw;
height: 10.667vw;
font-weight: 700;
font-size: 3.733vw;
line-height: 10.667vw;
text-align: center;
color: #fff;
}
#WORKS .more a::after {
content: '';
transform: rotate(45deg);
display: inline-block;
position: relative;
top: -2px;
margin-left: 10px;
width: 5px;
height: 5px;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
}
#WORKS .image {
margin: 0 -15px;
}
#WORKS .image img {
display: block;
width: 86.667vw;
height: auto;
object-fit: cover;
}
#WORKS .image .img2 {
margin-left: 15px;
}
@media (min-width: 768px) {
	#WORKS {
	background-size: 150px auto;
	margin: 0;
	padding: 0;
	}
	#WORKS::before {
	transform: translateY(-40%);
	background-size: 100% auto, 300px auto;
	padding-top: 20%;
	}
	#WORKS::after {
	transform: translateY(40%);
	background-size: 100% auto, 300px auto;
	padding-top: 20%;
	}
	#WORKS .cont {
	box-sizing: border-box;
	margin: 0 auto;
	padding: 180px 30px 160px 30px;
	max-width: 1180px;
	}
	#WORKS .pack {
	position: relative;
	height: 460px;
	z-index: 1;
	}
	#WORKS .pack::after {
	right: -30px;
	bottom: -210px;
	width: 57px;
	height: 95px;
	}
	#WORKS .hed {
	padding: 0 0 15px 0;
	z-index: 2;
	}
	#WORKS .hed p {
	font-size: 40px;
	text-align: left;
	}
	#WORKS h2 {
	margin-bottom: 5px;
	font-size: 16px;
	text-align: left;
	}
	#WORKS h2::before {
	margin: 5px 0 15px 0;
	}
	#WORKS .lead {
	font-size: 16px;
	line-height: 1.75;
	text-align: left;
	}
	#WORKS .more a {
	border-radius: 30px;
	margin: 0;
	width: 200px;
	height: 60px;
	font-size: 16px;
	line-height: 60px;
	}
	#WORKS .more a::after {
	transform: translateY(-50%) rotate(45deg);
	content: '';
	position: absolute;
	right: 25px;
	top: 50%;
	width: 8px;
	height: 8px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	}
	#WORKS .image {
	position: absolute;
	right: 0;
	top: 190px;
	margin: 0;
	padding: 0;
	width: 900px;
	z-index: 0;
	}
	#WORKS .image img {
	display: inline-block;
	width: 300px;
	height: auto;
	object-fit: cover;
	}
	#WORKS .image .img2 {
	position: relative;
	top: 40px;
	margin-left: 0;
	}
}