@charset "utf-8";

:root {
  --main_font: 'cormorant-garamond', serif;
  --sub_font: 'shippori-mincho', sans-serif;
}

/* 共通 */

body {
  color: #5C5B5B;
  font-family: var(--main_font);
}
html,
body,
a {
  cursor: none;
}
.cursor{
  position: fixed;
  top: -5px;
  left: -5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #C6B29E;
  z-index: 1000;
  transition: width 0.5s, height 0.5s, top 0.5s, left 0.5s;
  transform: translate(0, 0);
  pointer-events: none;
}
.cursor.cursor--hover {
  top: -20px;
  left: -20px;
  width: 40px;
  height: 40px;
  background: rgba(198, 178, 158, 0.5);
}
header {
  width: 100%;
  position: fixed;
  background-color: #ffffff;
  border-bottom: 0.025vw solid #707070;
  z-index: 100;
  top: 0;
}
header .header_inner {
  width: 90%;
  height: 8.02vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0.05% auto 0 3.6%;
}
header h1 img {
  width: 15vw;
}
header nav {
  width: 40%;
}
header nav ul {
  display: flex;
  justify-content: space-between;
}
header nav ul li a {
  font-weight: 500;
  font-size: 0.89vw;
  letter-spacing: .11em;
  position: relative;
}
header nav ul li a:hover {
  color: rgba(92, 91, 91, 0.4);
}
header .sm {
  display: none;
}
footer {
  width:  100%;
  height: 21vw;
  display: flex;
  background-color: #ffffff;
  border-top: 0.025vw solid #707070;
}
footer img {
  width: 4.4vw;
}
footer nav {
  width: 73%;
  margin: auto;
}
footer nav ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
footer nav ul li a {
  font-weight: 400;
  font-size: 0.9vw;
  letter-spacing: .11em;
}
/* footer nav ul li .fnav {
  position: relative;
} */
footer nav ul li .fnav:hover {
  color: rgba(92, 91, 91, 0.4);
}
footer nav ul li #pageTop {
  position: relative;
}
footer nav ul li #pageTop::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 0.64vw;
  height: 0.64vw;
  border-top: 0.065vw solid #5C5B5B;
  border-right: 0.065vw solid #5C5B5B;
  transform: rotate(-45deg);
  margin: -5.3vw auto;
  visibility: hidden;
  opacity: 0;
  transition: 0.3s;
}
footer nav ul li #pageTop:hover::after {
  visibility: visible;
  opacity: 1;
}

/* topページ */

header .fadeDown {
  animation-name:fadeDownAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
  opacity:0;
}
@keyframes fadeDownAnime{
  from {
    opacity: 0;
	transform: translateY(-100px);
  }
  to {
    opacity: 1;
	transform: translateY(0);
  }
}

.mainVisual1 {
  width: 100%;
  height: 46.5625vw;
  position: relative;
  background: url(../img/home/hero/hero1.jpg) no-repeat center center / cover;
}
.mainVisual1 #title {
  width: 27vw;
  position: absolute;
  top: 32%;
  left: 50%;
  transform: translateX(-50%);
}
.mainVisual2 {
  width: 100%;
  height: 43.385vw;
  display: flex;
  position: relative;
}
.mainVisual2_left {
  width: 50%;
  position: relative;
  background: rgba(255,240,220,1) url(../img/home/decoration/natural-paper.png) repeat left top / contain;
}
.mainVisual2_left #hero {
  width: 24.3vw;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: 9.74vw auto;
  transform: rotateZ(-4.4deg);
}
.mainVisual2_left::before {
  content: "";
  position: absolute;
  display: inline-block;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: url(../img/home/decoration/grid.png) no-repeat left top / contain;
  opacity: 0.7;
}
.mainVisual2_left .scroll {
  position: absolute;
  top: 8.2vw;
  left: 9.9vw;
}
.mainVisual2_left .scroll img {
  width: 7.35vw;
  animation: rotate-anime 10s linear infinite;
}
@keyframes rotate-anime {
  0%  {transform: rotate(0);}
  100%  {transform: rotate(-360deg);}
}
.mainVisual2_left .scroll::after {
  content: "";
  position: absolute;
  display: inline-block;
  top: 2.8vw;
  left: -2vw;
  width: 7.447vw;
  height: 3.214vw;
  background: url(../img/home/decoration/nami.png) no-repeat left top / contain;
  transform: rotateZ(-6deg);
  opacity: 0.95;
}
.mainVisual2_right {
  width: 50%;
  position: relative;
  padding: 11.135vw 9vw 10.7vw 9.16vw;
}
.mainVisual2_right h2 {
  /* position: absolute;
  top: 25.71%;
  left: 18.33%; */
  position: relative;
  font-weight: 300;
  font-size: 1.8vw;
  letter-spacing: .05em;
  line-height: 2.53vw;
  color: #626161;
  margin-bottom: 3.887vw;
}
.mainVisual2_right h2::after {
  content: '';
  position: absolute;
  left: -0.05vw;
  bottom: -2vw;
  display: inline-block;
  width: 30.468vw;
  height: 0.05vw;
  background-color: #707070;
}
.mainVisual2_right p {
  /* position: absolute;
  top: 46.22%;
  left: 18.48%; */
  font-family: var(--sub_font);
  font-size: 0.677vw;
  font-weight: 400;
  letter-spacing: .11em;
  line-height: 1.91vw;
  color: #626161;
  margin-bottom: 3.02vw;
  padding-left: 0.08vw;
}
.mainVisual2_right a {
  /* position: absolute;
  top: 69.8%;
  left: 18.12%; */
  font-weight: 400;
  font-size: 0.75vw;
  letter-spacing: .11em;
  /* line-height: 1.6vw; */
  color: #626161;
  border: 0.05vw solid #707070;
  border-radius: 50px;
  /* padding: 0.354vw 2.11vw; */
  padding: 0.712vw 2.11vw;
  margin-left: -0.09vw;
}
.mainVisual2_right::after {
  content: "";
  position: absolute;
  display: inline-block;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: url(../img/home/decoration/ribbon.png) no-repeat left top / contain;
  opacity: 0.97;
  z-index: -10;
}
.blur{
	animation-name:blurAnime;
	animation-duration:1.5s;
	animation-fill-mode:forwards;
}
@keyframes blurAnime{
  from {
	filter: blur(10px);
	transform: scale(1.02);
  }
  to {
	filter: blur(0);
	transform: scale(1);
  }
}

.marqueeArea {
  display: flex;
  list-style: none;
  padding-inline: 0;
  margin-inline: 0;
  gap: 0;
  background-color: rgba(209, 171, 133, 0.69);
  overflow: hidden;
  height: 4.35vw;
  align-items: center;
}
.marquee-inner {
  display: flex;
  color: #ffffff;
  font-family: 'Hiragino Sans';
  font-size: 0.625vw;
  letter-spacing: .14em;
  white-space: nowrap;
  align-items: center;
  animation: marquee-left 8s linear infinite;
}
@keyframes marquee-left {
  100% {
    transform: translateX(-100%);
  }
}
.marqueeArea .kirakira {
  content: "";
  display: inline-block;
  width: 1.2vw;
  height: 1.2vw;
  background: url(../img/home/decoration/kirakira3.svg) no-repeat left top / contain;
  margin: auto 8.96vw;
}

.worksArea {
  background-color: rgba(214, 220, 227, 0.85);
  width: 100%;
  height: auto;
  padding-bottom: 17.4vw;
}
.worksArea .title {
  position: relative;
  padding-top: 13.1vw;
  text-align: center;
  color: #ffffff;
  margin-bottom: 5.1vw;
}
.worksArea .title::before{
  content: "";
  position: absolute;
  display: inline-block;
  left: 50%;
  transform: translateX(-50%);
  top: 7.7vw;
  width: 3.57vw;
  height: 4.662vw;
  background: url(../img/home/decoration/kirakira1.svg) no-repeat left top / contain;
}
.worksArea .title h2 {
  font-weight: 600;
  font-size: 2.2vw;
  letter-spacing: .11em;
  margin-bottom: 1vw;
}
.worksArea .title p {
  font-family: var(--sub_font);
  font-weight: 600;
  font-size: 0.75vw;
  letter-spacing: .11em;
}
.workList {
  width: 79.2vw;
  /* height: 92vw; */
  height: auto;
  background-color: #FFF4E9;
  margin: auto;
  position: relative;
}
.workList::after {
  content: "";
  position: absolute;
  display: inline-block;
  right: 0.75vw;
  bottom: -13.37vw;
  width: 5.42vw;
  height: 13.37vw;
  background: url(../img/home/decoration/kirakira2.svg) no-repeat left top / contain;
}
.workList_inner {
  width: 63vw;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0 auto 0;
  padding-top: 7vw;
  padding-bottom: 5.2vw;
}
.workList_inner li {
  width: 18.7vw;
  margin-bottom: 4.74vw;
}
.workList_inner li img {
  width: 100%;
  height: auto;
}
.workList_inner li h3 {
  font-weight: 300;
  /* font-size: 1.07vw; */
  font-size: 0.95vw;
  letter-spacing: .12em;
  color: #707070;
  margin-bottom: 1.93vw;
}
.fade {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 1.5s, transform 1s;
}.fade.active {
	opacity: 1;
	transform: translateY(0px);
}
.fade img{
	transform: scale(1);
	transition: .3s ease-in-out;
}
.fade a:hover img{
	transform: scale(1.1);
}
.mask{
    display: block;
    line-height: 0;
    overflow: hidden;
}

/* about・worksページ共通 */

#about,
.works {
  background-color: #FFF4E9;
}
.contents {
  padding-top: 8.02vw;
}
.contents .mainTitle {
  text-align: center;
  margin-top: 8.645vw;
  margin-bottom: 4.65vw;
}
.contents .mainTitle h2 {
  font-weight: 500;
  font-size: 1.75vw;
  letter-spacing: .12em;
  margin-bottom: 1vw;
}
.contents .mainTitle p {
  font-family: var(--sub_font);
  font-weight: 300;
  font-size: 0.77vw;
  letter-spacing: .11em;
}

/* aboutページ */

.contents .profileArea {
  display: flex;
  position: relative;
  margin-bottom: 10vw;
}
.contents .profileArea img{
  width: 28.067vw;
  height: 100%;
  margin-left: 13.125vw;
  box-shadow: 0.5729vw 0.5729vw 0 #FFF4E9;
}
.contents .profileArea .profileText {
  background-color: #ffffff;
  width: 38.967vw;
  height: 25.2vw;
  margin-top: 15.75vw;
  margin-left: 7.8125vw;
  padding: 4.25vw 4.52vw;
  position: relative;
  box-shadow: -0.5729vw -0.5729vw 0 #FFF4E9;
}
.contents .profileArea::after {
  content: "";
  position: absolute;
  display: inline-block;
  width: 100%;
  height: 28.6979vw;
  top: 6.92vw;
  background-color: rgba(226, 231, 239, 0.8);
  z-index: -10;
}
.contents .profileArea .profileText h3 {
  font-family: "big-caslon-fb", serif;
  font-style: normal;
  font-weight: 400;
  font-size: 1.76vw;
  letter-spacing: .14em;
  margin-bottom: 2.39vw;
}
.contents .profileArea .profileText p {
  font-family: var(--sub_font);
  font-weight: 300;
  font-size: 0.735vw;
  letter-spacing: .083em;
  line-height: 1.86vw;
}
.contents .profileArea .profileText::after {
  content: "";
  position: absolute;
  display: inline-block;
  right: 2vw;
  bottom: -10.528vw;
  width: 4.27vw;
  height: 10.528vw;
  background: url(../img/about/decoration/kirakira.svg) no-repeat left top / contain;
}
.contents .subTitle {
  text-align: center;
  margin-bottom: 4.3vw;
}
.contents .subTitle h2 {
  font-weight: 400;
  font-size: 1.78vw;
  letter-spacing: .12em;
  margin-bottom: 1.1vw;
}
.contents .subTitle p {
  font-family: var(--sub_font);
  font-weight: 300;
  font-size: 0.77vw;
  letter-spacing: .10em;
}
.skillArea {
  margin-bottom:  10vw;
}
.skillArea .skillList {
  width: 74.74vw;
  margin: 0 auto;
}
.skillArea .skillList .skillList_inner {
  display: flex;
  justify-content: space-between;
  text-align: center;
}
.skillArea .skillList .skillList_inner li {
  width: 23.4375vw;
  height: 25.6875vw;
  padding: 4.2025vw 0;
  position: relative;
}
.skillArea .skillList .skillList_inner li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: url(../img/about/decoration/frame1.svg) no-repeat left top / contain;
  z-index: -10;
}
.skillArea .skillList .skillList_inner li img {
  margin-bottom: 1.8vw;
}
.skillArea .skillList .skillList_inner li #skill1 {
  width: 3.9vw;
}
.skillArea .skillList .skillList_inner li #skill2 {
  width: 4.3vw;
}
.skillArea .skillList .skillList_inner li #skill3 {
  width: 4.3vw;
}
.skillArea .skillList .skillList_inner li h3 {
  font-weight: 400;
  font-size: 1.29vw;
  letter-spacing: .05em;
  margin-bottom: 2.55vw;
}
.skillArea .skillList .skillList_inner li p {
  font-family: var(--sub_font);
  font-weight: 300;
  font-size: 0.8vw;
  letter-spacing: .08em;
  line-height: 1.85vw;
  color: #707070;
  /* text-align: left;
  padding-left: 1.82vw; */
}
.otherArea {
  margin-bottom: 13vw;
}
.otherArea .otherList {
  width: 65.08vw;
  margin-left: 19.71vw;
  padding-top: 2.75vw;
}
.otherList .otherList_2item {
  display: flex;
  margin-bottom: 6vw;
  justify-content: space-between;
}
.otherList .otherList_inner {
  display: flex;
  flex-wrap: wrap;
}
.otherList .otherList_inner .otherList_title {
  display: flex;
  width: 9.36vw;
  height: 3.5145vw;
  justify-content: center;
  align-items: center;
  margin-right: 2.76vw;
  position: relative;
}
.otherList .otherList_inner .otherList_title h3 {
  font-weight: 400;
  font-size: 1.13vw;
  letter-spacing: .12em;
}
.otherList .otherList_inner .otherList_title h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: url(../img/about/decoration/frame2.svg) no-repeat left top / contain;
  z-index: -10;
}
.otherList .otherList_inner .otherList_content {
  width: 18.5vw;
  margin-top: 0.6vw;
  font-family: var(--sub_font);
}
.otherList .otherList_inner .otherList_content p {
  font-weight: 400;
  font-size: 0.92vw;
  letter-spacing: .11em;
}
.otherList .otherList_inner .otherList_content .mt2 {
  margin-top: 2.1vw;
}
.otherList .otherList_inner .otherList_content .li-check li {
  position: relative;
  padding-left: 2.0313vw;
  margin-bottom: 1.7vw;
  font-weight: 300;
  font-size: 0.88vw;
  letter-spacing: .10em;
}
/* .otherList .otherList_inner .otherList_content .li-check .ls {
  line-height: 1vw;
} */
.otherList .otherList_inner .otherList_content .li-check li::before {
  content: "";
  position: absolute;
  width: 0.83vw;
  height: 0.83vw;
  border: 0.026vw solid #707070;
  background: #ffffff;
  top: 0.1vw;
  left: 0;
}
.contactArea {
  width: 60.62vw;
  height: auto;
  margin: 0 auto 22.2vw;
  position: relative;
}
.contactArea::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 23.4375vw;
  background-color: rgba(255, 255, 255, 0.7);
  top: 1vw;
  left: 0;
  z-index: -10;
}
.contactArea .contact_btn a {
  position: relative;
  overflow: hidden;
  display: block;
  width: 27vw;
  height: 6.77vw;
  padding-top: 2.55vw;
  margin: 5.3vw auto 0;
  background-color: rgb(204, 211, 219);
  color: #ffffff;
  letter-spacing: 0.12em;
  text-align: center;
  font-weight: 400;
  font-size: 1.55vw;
  transition: ease .2s;
}
.contactArea .contact_btn a span {
  position: relative;
	z-index: 3;
}
.contactArea .contact_btn a:hover span {
  color:#fff;
}
.bgleft:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  background: rgba(209, 171, 133, 0.69);
  width: 100%;
  height: 100%;
  transition: transform .6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
  transform: scale(0, 1);
  transform-origin: right top;
}
.bgleft:hover:before{
 transform-origin:left top;
 transform:scale(1, 1);
}
.contactArea .contact_btn a::after {
  content: '';
  position: absolute;
  top: 49%;
  right: 35px;
  width: 3vw;
  height: 0.36vw;
  margin-top: -2px;
  background: url(../img/about/decoration/arrow.svg) 0 0 no-repeat;
  z-index: 3;
}

/* worksページ共通 */

.creationArea {
  width: 68.385vw;
  margin: 6.6vw auto 7vw;
  border-top: 0.025vw solid #707070;
  border-bottom: 0.025vw solid #707070;
}
.creationArea .creationTitle {
  margin-top: 5.1vw;
}
.creationArea .creationTitle h3 {
  font-weight: 500;
  font-size: 1.7vw;
  letter-spacing: .12em;
  margin-bottom: 1.35vw;
}
.marker {
  background:linear-gradient(transparent 65%, rgba(226, 231, 239, 0.8) 35%);
  background-repeat: no-repeat;
  background-size: 0% 100%;
  display: inline-block;
  transition:background-size 1.5s;
}
.marker.on {
  background-size: 100% 100%;
}
.creationArea .creationTitle .creationTitle_txt {
  display: flex;
  justify-content: space-between;
  font-family: var(--sub_font);
  font-weight: 400;
  font-size: 0.85vw;
  letter-spacing: .11em;
  margin-bottom: 2.92vw;
}
.creationPhoto1,
.creationPhoto2,
.creationPhoto3,
.creationPhoto4 {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.creationPhoto1 {
  height: 50.78vw;
}
.creationPhoto2,
.creationPhoto3,
.creationPhoto4 {
  padding: 4.68vw 0;
  margin-bottom: 10vw;
}
.creationTxt {
  width: 56.66vw;
  margin: 9vw auto 10.5vw;
  font-family: var(--sub_font);
}
.overviewArea {
  margin-bottom: 8.3vw;
}
.overviewArea p {
  font-size: 0.9vw;
  font-weight: 400;
  letter-spacing: .08em;
  line-height: 2vw;
}
.overviewArea .theme {
  background-color: rgba(247, 231, 220, 0.6);
  padding: 6.3% 8.3%;
  margin-top: 3vw;
  font-size: 0.84vw;
  letter-spacing: .09em;
  line-height: 1.83vw
}
.overviewArea .theme span {
  font-size: 0.87vw;
}
.accordionArea{
  list-style: none;
  width: 100%;
  /* max-width: 900px; */
  margin:0 auto;
}
.accordionArea li{
  margin: 10px 0;
}
.accordionArea section {
  border: 0.025vw solid #707070;
}
.accordionTitle {
  position: relative;
  font-size: 1vw;
  font-weight: 400;
  letter-spacing: .10em;
  padding: 3% 3% 3% 50px;
  transition: all .5s ease;
}
.accordionTitle::before,
.accordionTitle::after{
  position: absolute;
  content:'';
  width: 11px;
  height: 1.1px;
  background-color: #707070;
}
.accordionTitle::before{
  top:48%;
  left: 20px;
  transform: rotate(0deg);
}
.accordionTitle::after{    
  top:48%;
  left: 20px;
  transform: rotate(90deg);
}
.accordionTitle.close::before{
  transform: rotate(45deg);
}
.accordionTitle.close::after{
  transform: rotate(-45deg);
}
.accordionTxt {
  display: none;
  background: #fff;
  margin:0 3% 3%;
  padding: 7.1%;
}
.accordionTxt p {
  font-size: 0.81vw;
  font-weight: 300;
  letter-spacing: .07em;
  line-height: 1.81vw;
}
.accordionTxt span {
  font-size: 0.85vw;
}
.pagination {
  display: flex;
  width: 28.5vw;
  /* height: 2.739vw; */
  margin: 0 auto 19.1vw;
}
.pagination #prev, #all, #next {
  display: block;
  width: 9.5vw;
  text-align: center;
  font-weight: 400;
  font-size: 1vw;
  letter-spacing: .11em;
  padding: 0.74vw 0;
}
.pagination #prev {
  background-color: rgb(245, 231, 217, 0.9);
  border-top: 0.025vw solid #707070;
  border-bottom: 0.025vw solid #707070;
  border-left: 0.025vw solid #707070;
}
.pagination #all {
  background-color: rgba(245, 231, 217, 0.6);
  border: 0.025vw solid #707070;
}
.pagination #next {
  background-color: rgba(245, 231, 217, 0.2);
  border-top: 0.025vw solid #707070;
  border-bottom: 0.025vw solid #707070;
  border-right: 0.025vw solid #707070;
}

/* ポスター */
#poster .creationPhoto1,
#poster .creationPhoto2 {
  background-color: rgba(255, 255, 255, 0.7);
  gap: 3.125vw;
}
#poster .creationPhoto1 img,
#poster .creationPhoto2 img {
  width: 26.8229vw;
  height: auto;
}

/* 単語カード */
#wordcard .creationPhoto1,
#wordcard .creationPhoto2,
#wordcard .creationPhoto3 {
  background-color: rgba(247, 231, 220, 0.6);
}
#wordcard .creationPhoto2 {
  flex-wrap: wrap;
  gap: 3.125vw;
  margin-bottom: 5vw;
}
#wordcard .creationPhoto1 img {
  width: 41.4vw;
  height: auto;
}
#wordcard .creationPhoto2 img {
  width: 26.8229vw;
  height: auto;
}
#wordcard .creationPhoto3 img {
  width: 56.7708vw;
  height: auto;
}

/* ブックレット */
#booklet .creationPhoto1,
#booklet .creationPhoto2 {
  background-color: rgba(247, 231, 220, 0.6);
}
#booklet .creationPhoto1 img {
  width: 41.4vw;
  height: auto;
}
#booklet .creationPhoto2 img {
  width: 56.7708vw;
  height: auto;
}

/* アルバム表紙 */
#albumcover .creationPhoto1,
#albumcover .creationPhoto2, 
#albumcover .creationPhoto3,
#albumcover .creationPhoto4 {
  background-color: rgba(247, 231, 220, 0.6);
}
#albumcover .creationPhoto2,
#albumcover .creationPhoto3 {
  margin-bottom: 5vw;
}
#albumcover .creationPhoto3 {
  gap: 1.56vw;
}
#albumcover .creationPhoto1 img {
  width: 41.4vw;
  height: auto;
}
#albumcover .creationPhoto2 img,
#albumcover .creationPhoto4 img {
  width: 56.7708vw;
  height: auto;
}
#albumcover .creationPhoto3 img {
  width: 17.86vw;
  height: auto;
}
#albumcover .creationPhoto4 .sm_ac {
  display: none;
}

/* 食器 */
#tableware .creationPhoto1,
#tableware .creationPhoto2 {
  background-color: rgba(255, 255, 255, 0.97);
}
#tableware .creationPhoto1 {
  gap: 3.125vw;
}
#tableware .creationPhoto2 {
  padding: 0;
}
#tableware .creationPhoto1 img {
  width: 26.8229vw;
  height: auto;
  box-shadow: 0.12vw 0.12vw 0.03vw #ecebe8;
}
#tableware .creationPhoto2 img {
  width: 64.2927vw;
  height: auto;
}

/* コスメ */
#cosmetics .creationPhoto1,
#cosmetics .creationPhoto2 {
  background-color: rgba(255, 255, 255, 0.97);
}
#cosmetics .creationPhoto2 {
  padding: 0;
}
#cosmetics .creationPhoto1 img {
  width: 56.7708vw;
  height: auto;
}
#cosmetics .creationPhoto2 img {
  width: 64.2927vw;
  height: auto;
}

/* カフェ */
#cafe .creationPhoto1,
#cafe .creationPhoto2,
#cafe .creationPhoto3 {
  background-color: rgba(255, 255, 255, 0.8);
}
#cafe .creationPhoto2 {
  flex-wrap: wrap;
  margin-bottom: 5vw;
}
#cafe .creationPhoto2,
#cafe .creationPhoto3 {
  gap: 3.125vw;
}
#cafe .creationPhoto1 img {
  width: 56.7708vw;
  height: auto;
}
#cafe .creationPhoto2 #cafe2 {
  width: 34.3229vw;
  height: auto;
}
#cafe .creationPhoto2 #cafe3 {
  width: 19.3114vw;
  height: auto;
}
#cafe .creationPhoto2 #cafe4,
#cafe .creationPhoto2 #cafe5,
#cafe .creationPhoto3 img {
  width: 26.8229vw;
  height: auto;
}
#cafe .pagination #next {
  visibility: hidden;
}

/* インスタ */
#snscreative .creationPhoto1,
#snscreative .creationPhoto2 {
  background-color: rgba(247, 231, 220, 0.6);
}
#snscreative .creationPhoto1 img {
  width: 41.4vw;
  height: auto;
}
#snscreative .creationPhoto2 img {
  width: 56.7708vw;
  height: auto;
}
#snscreative .creationPhoto2 .sm_ig {
  display: none;
}

/* ポートフォリオ */
#portfolio .creationPhoto1,
#portfolio .creationPhoto2,
#portfolio .creationPhoto3 {
  background-color: rgba(255, 255, 255, 0.97);
}
#portfolio .creationPhoto2 {
  align-items: flex-start;
  margin-bottom: 5vw;
}
#portfolio .creationPhoto2,
#portfolio .creationPhoto3 {
  gap: 3.125vw;
}
#portfolio .creationPhoto1 img {
  width: 41.4vw;
  height: auto;
}
#portfolio .creationPhoto2 img,
#portfolio .creationPhoto3 img {
  width: 26.8229vw;
  height: auto;
  box-shadow: 0vw 0vw 0.5vw rgba(92, 91, 91, 0.15);
}
#portfolio .pagination #prev {
  visibility: hidden;
}

/* 美容皮膚科 */
#beautyclinic .creationPhoto1,
#beautyclinic .creationPhoto2 {
  background-color: rgba(255, 255, 255, 0.97);
}
#beautyclinic .creationPhoto1 img {
  width: 41.4vw;
  height: auto;
}
#beautyclinic .creationPhoto2 img {
  width: 56.7708vw;
  height: auto;
  box-shadow: 0vw 0vw 0.5vw rgba(92, 91, 91, 0.15);
}


@media screen and (max-width: 640px) {
  .cursor {
    display: none;
  }
  header .header_inner {
    /* height: 12vh; */
    height: 26.5vw;
    width: 100%;
    margin: 0;
    padding: 5.5vw;
  }
  header h1 img {
    width: 55vw;
  }
  header #hamburger {
    background-color: transparent;
    position: relative;
    cursor: pointer;
    height: 4vw;
    width: 7vw;
  }
  header .pc {
    display: none;
  }
  .icon span {
    position: absolute;
    width: 7vw;
    height: 1px;
    background-color: #5C5B5B;
    transition: ease 0.75s;
  }
  .icon span:nth-of-type(1) {
    top: 0%;
  }
  .icon span:nth-of-type(2) {
    top: 50%;
  }
  .icon span:nth-of-type(3) {
    top: 100%;
  }
  .close span:nth-of-type(1) {
    transform: rotate(45deg);
    top: 50%;
  }
  .close span:nth-of-type(2) {
    opacity: 0;
  }
  .close span:nth-of-type(3) {
      transform: rotate(-45deg);
      top: 50%;
  }
  .header_inner nav {
    top: 26.5vw;
    left: 0px;
    position: absolute;
    z-index: 10;
    width: 100%;
    background-color: rgba(255, 244, 233, 0.95);
    text-align: center;
    padding: 28vw 0;
  }
  .header_inner nav ul {
  flex-direction: column;
  }
  .header_inner nav ul li {
    padding: 7vw 0;
  }
  .header_inner nav ul a {
    font-size: 4.5vw;
  }
  footer {
    height: 32vw;
  }
  footer nav ul li a {
    display: none;
  }
  footer nav ul li #pageTop {
    display: block;
  }
  footer img {
    width: 13vw;
  }
  footer nav ul li #pageTop::after {
    width: 1.5vw;
    height: 1.5vw;
    margin: -3.5vw auto;
    visibility: visible;
    opacity: 1;
  }
  .mainVisual1 {
    /* height: 70vh; */
    height: 175vw;
  }
  .mainVisual1 #title {
    /* width: 36vh; */
    width: 79vw;
    top: 36%;
  }
  .mainVisual2 {
    height: auto;
  }
  .mainVisual2_left {
    display: none;
  }
  .mainVisual2_right {
    width: 100%;
    padding: 16vw 10vw 18.5vw;
    text-align: center;
    background: url(../img/home/decoration/natural-paper.png) repeat left top / contain;
  }
  .mainVisual2_right::after {
    display: none;
  }
  /* .mainVisual2_right h2,
  .mainVisual2_right h2::after,
  .mainVisual2_right p,
  .mainVisual2_right a {
    text-align: center;
  } */
  /* .mainVisual2_right h2,
  .mainVisual2_right h2::after,
  .mainVisual2_right a {
    left: 50%;
    transform: translateX(-50%);
  } */
  .mainVisual2_right h2 {
    font-size: 5.5vw;
    line-height: 6.5vw;
    letter-spacing: .06em;
    margin-bottom: 13vw;
    font-weight: 400;
  }
  .mainVisual2_right h2::after {
    width: 80vw;
    bottom: -6vw;
  }
  .mainVisual2_right p {
    /* left: 5%; */
    font-size: 3.2vw;
    line-height: 7vw;
    margin-bottom: 7.6vw;
    text-align: left;
    padding-left: 2.2vw;
    /* top: 44.22%; */
  }
  .mainVisual2_right .br {
    display: none;
  }
  .mainVisual2_right a {
    font-size: 3.2vw;
    font-weight: 500;
    padding: 2.5vw 12.2vw;
    /* top: 72.8%; */
  }
  .mainVisual2_right a span {
    display: none;
  }
  .marqueeArea {
    height: 13vw;
  }
  .marquee-inner {
    font-size: 2vw;
    font-weight: 600;
  }
  .marqueeArea .kirakira {
    width: 3.3vw;
    height: 3.3vw;
  }
  .worksArea {
    height: auto;
  }
  .worksArea .title {
    padding-top: 26vw;
    margin-bottom: 10vw;
  }
  .worksArea .title::before {
    top: 12.7vw;
    width: 9.5vw;
    height: 12.5vw;
  }
  .worksArea .title h2 {
    font-size: 6.7vw;
    margin-bottom: 1.8vw;
    letter-spacing: .10em;
  }
  .worksArea .title p {
    font-size: 2.5vw;
    letter-spacing: .10em;
  }
  .workList {
    width: 85vw;
  }
  .workList_inner {
    padding-top: 5.5vw;
  }
  .workList_inner li {
    width: 100%;
  }
  .workList_inner li h3 {
    font-size: 3.7vw;
    text-align: center;
    margin: 2vw 0 3.5vw 0;
  }
  .workList::after {
    display: none;
  }
  .contents {
    padding-top: 26.5vw;
  }
  .contents .mainTitle {
    margin-top: 16vw;
    margin-bottom: 10vw;
  }
  .contents .mainTitle h2 {
    font-size: 5.7vw;
    margin-bottom: 2vw;
  }
  .contents .mainTitle p {
    font-size: 2.6vw;
  }
  .contents .profileArea {
    display: block;
    text-align: center;
    margin-bottom: 14vw;
  }
  .contents .profileArea img {
    width: 63vw;
    margin-left: 0;
    margin-bottom: 13vw;
    box-shadow: 1.3vw 1.3vw 0 #FFF4E9;
  }
  .contents .profileArea .profileText {
    width: 80vw;
    height: auto;
    /* margin-top: 0;
    margin-left: 0; */
    margin: auto;
    padding: 0;
    box-shadow: none;
    background-color: transparent;
  }
  .contents .profileArea .profileText h3 {
    font-size: 4.53vw;
    letter-spacing: .15em;
    margin-bottom: 7vw;
  }
  .contents .profileArea .profileText p {
    font-size: 3.2vw;
    line-height: 7vw;
    text-align: left;
    margin-left: 2vw;
  }
  .contents .profileArea .profileText::after {
    display: none;
  }
  .contents .profileArea::after {
    height: 47.6979vw;
    top: 10vw;
    left: 0;
  }
  .contents .subTitle {
    margin-bottom: 8vw;
  }
  .contents .subTitle h2 {
    font-size: 5.6vw;
    font-weight: 500;
    margin-bottom: 1.8vw;
  }
  .contents .subTitle p {
    font-size: 2.5vw;
  }
  .skillArea .skillList {
    width: 73vw;
  }
  .skillArea .skillList .skillList_inner {
    display: block;
  }
  .skillArea .skillList .skillList_inner li {
    width: 100%;
    height: 80.5vw;
    padding: 14.4vw 0;
    margin-bottom: 5vw;
  }
  .skillArea .skillList .skillList_inner li #skill1 {
    width: 12.4vw;
  }
  .skillArea .skillList .skillList_inner li #skill2 {
    width: 14vw;
  }
  .skillArea .skillList .skillList_inner li #skill3 {
    width: 13.5vw;
  }
  .skillArea .skillList .skillList_inner li img {
    margin-bottom: 5.5vw;
  }
  .skillArea .skillList .skillList_inner li h3 {
    font-size: 4.5vw;
    margin-bottom: 6vw;
  }
  .skillArea .skillList .skillList_inner li p {
    font-size: 3vw;
    line-height: 5.85vw;
    margin-left: 1.7vw;
  }
  .skillArea {
    margin-bottom: 19vw;
  }
  .otherArea .otherList {
    width: 80vw;
    margin: 0;
    margin-left: 12.5vw;
  }
  .otherList .otherList_2item {
    display: block;
    margin-bottom: 0;
  }
  .otherList .otherList_inner {
    margin-bottom: 9vw;
  }
  .otherList .otherList_inner .otherList_title {
    width: 22vw;
    height: 8.3vw;
    margin-right: 8vw;
  }
  .otherList .otherList_inner .otherList_title h3 {
    font-size: 3.2vw;
  }
  .otherList .otherList_inner .otherList_content {
    width: 50vw;
  }
  .otherList .otherList_inner .otherList_content .li-check li {
    font-size: 3vw;
    padding-left: 8vw;
    margin-bottom: 5vw;
  }
  .otherList .otherList_inner .otherList_content .li-check li::before {
    width: 2.83vw;
    height: 2.83vw;
  }
  .otherList .otherList_inner .otherList_content p {
    font-size: 3vw;
  }
  .otherList .otherList_inner .otherList_content .mt2 {
    margin-top: 5vw;
  }
  .otherList .otherList_inner .otherList_content .li-check .ls {
    line-height: 5vw;
    margin-top: -0.9vw;
  }
  .otherList .otherList_inner .otherList_content .li-check .ls::before {
    margin-top: 1vw;
  }
  .otherArea {
    margin-bottom: 22vw;
  }
  .contactArea {
    width: 85vw;
    margin: 0px auto 40vw;
    padding: 0;
  }
  .contactArea .contact_btn a {
    width: 54vw;
    height: 14vw;
    padding-top: 4.3vw;
    font-size: 4vw;
  }
  .contactArea .contact_btn a::after {
    display: none;
  }
  .contactArea::after {
    height: 45vw;
    top: 2.5vw;
  }
  .creationArea {
    width: 85vw;
    margin: 6.6vw auto 10vw;
  }
  .creationArea .creationTitle {
    margin-top: 8.2vw;
    text-align: center;
  }
  .creationArea .creationTitle h3 {
    font-size: 5.2vw;
    margin-bottom: 3.8vw;
  }
  .creationArea .creationTitle .creationTitle_txt {
    display: block;
    font-size: 3.1vw;
    line-height: 5.5vw;
    margin-bottom: 8.5vw;
  }
  .creationTxt {
    width: 100%;
    margin: 10vw auto 12vw;
  }
  .overviewArea {
    width: 80vw;
    margin-left: 3vw;
    margin-bottom: 10vw;
  }
  .overviewArea p {
    font-size: 3.2vw;
    line-height: 7vw;
  }
  .overviewArea .theme {
    font-size: 2.9vw;
    line-height: 6.5vw;
    padding: 6.3% 6% 6.3% 7%;
    margin-top: 7vw;
  }
  .overviewArea .theme span {
    font-size: 3.1vw;
  }
  .accordionTitle {
    font-size: 3.7vw;
    padding: 6% 6% 6% 50px;
  }
  .accordionTxt {
    padding: 10% 4% 10% 6%;
    margin: 0 1% 1%;
  }
  .accordionTxt span {
    font-size: 3.3vw;
  }
  .accordionTxt p {
    font-size: 3.2vw;
    line-height: 7vw;
  }
  .pagination {
    width: 75vw;
    margin: 0 auto 22vw;
  }
  .pagination #prev, #all, #next {
    width: 25vw;
    padding: 2vw 0;
    font-size: 3.3vw;
  }
  .creationPhoto1 {
    height: auto;
  }
  .creationPhoto1, .creationPhoto2, .creationPhoto3, .creationPhoto4 {
    flex-direction: column;
    padding: 7vw 0;
  }
  /* ポスター */
  #poster .creationPhoto1,
  #poster .creationPhoto2 {
    gap: 7vw;
  }
  #poster .creationPhoto1 img,
  #poster .creationPhoto2 img {
    width: 70vw;
  }
  /* 単語カード */
  #wordcard .creationPhoto2 {
    gap: 7vw;
  }
  #wordcard .creationPhoto1 img,
  #wordcard .creationPhoto2 img,
  #wordcard .creationPhoto3 img {
    width: 70vw;
  }
  /* コスメ */
  #cosmetics .creationPhoto1 img {
    width: 75vw;
  }
  #cosmetics .creationPhoto2 img {
    width: 100%;
  }
  /* 冊子 */
  #booklet .creationPhoto1 img {
    width: 70vw;
  }
  #booklet .creationPhoto2 img {
    width: 75vw;
  }
  /* アルバム表紙 */
  #albumcover .creationPhoto3,
  #albumcover .creationPhoto4 {
    gap: 7vw;
  }
  #albumcover .creationPhoto1 img {
    width: 70vw;
  }
  #albumcover .creationPhoto2 img {
    width: 75vw;
  }
  #albumcover .creationPhoto3 img {
    width: 65vw;
  }
  #albumcover .creationPhoto4 img {
    display: none;
  }
  #albumcover .creationPhoto4 .sm_ac {
    display: inline;
    width: 75vw;
  }
  /* カフェ */
  #cafe .creationPhoto2,
  #cafe .creationPhoto3 {
    gap: 7vw;
  }
  #cafe .creationPhoto1 img {
    width: 75vw;
  }
  #cafe .creationPhoto2 #cafe2,
  #cafe .creationPhoto2 #cafe3,
  #cafe .creationPhoto2 #cafe4,
  #cafe .creationPhoto2 #cafe5,
  #cafe .creationPhoto3 img {
    width: 70vw;
  }
  /* 食器 */
  #tableware .creationPhoto1 {
    gap: 7vw;
  }
  #tableware .creationPhoto1 img {
    width: 70vw;
  }
  #tableware .creationPhoto2 img {
    width: 100%;
  }
  /* SNSクリエイティブ */
  #snscreative .creationPhoto1 img {
    width: 71vw;
  }
  #snscreative .creationPhoto2 img {
    display: none;
  }
  #snscreative .creationPhoto2 .sm_ig {
    display: inline;
    width: 75vw;
  }
  /* ポートフォリオ */
  #portfolio .creationPhoto2 {
    align-items: center;
  }
  #portfolio .creationPhoto2,
  #portfolio .creationPhoto3 {
    gap: 7vw;
  }
  #portfolio .creationPhoto1 img,
  #portfolio .creationPhoto2 img,
  #portfolio .creationPhoto3 img {
    width: 70vw;
  }
  /* 美容皮膚科 */
  #beautyclinic .creationPhoto1 img,
  #beautyclinic .creationPhoto2 img {
    width: 70vw;
  }
}