@charset "UTF-8";

/* ----------------- リセットと基本スタイル ----------------- */
html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
}

@media screen and (max-width: 767px) {
  html {
    scroll-padding-top: calc(88vw / 3.9 + 10px);
  }
}

img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

address {
  font-style: normal;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

a {
  text-decoration: none;
}

@font-face {
  font-family: 'ZenMaruGothic';
  src: url('font/ZenMaruGothic-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'ZenMaruGothic';
  src: url('font/ZenMaruGothic-Medium.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: 'ZenMaruGothic';
  src: url('font/ZenMaruGothic-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: 'ZenMaruGothic';
  src: url('font/ZenMaruGothic-Black.ttf') format('truetype');
  font-weight: 900;
  font-display: swap;
}

/* ----------------- variables ----------------- */

:root {
  --white: #fff;
  --black: #000;
  --brown: #7d5a4d;
  --light-blue: #70c7d9;
  --green: #7cc69b;
  --dark-green: #60a83d;
  --sidebutton-green: #88bb0e;
  --light-green: #eaf0ea;
  --light-pink: #ffedeb;
  --purple: #6762aa;
  --light-purple: #f0ebf5;
  --light-yellow: #faf2cd;
  --orange: #c06801;
  --sidebutton-orange: #ef9b60;
  --dark-gray: #333;

  font-family:
    'ZenMaruGothic', 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN',
    'Hiragino Sans', Meiryo, sans-serif;
}

.pc-only {
  display: block;
}

.sp-only {
  display: none;
}

/* ----------------- utility ----------------- */

.w1200 {
  max-width: 1200px;
  margin: 0 auto;
}

.w1920 {
  max-width: 1920px;
  margin: 0 auto;
}

.section-title {
  text-align: center;
  font-size: min(calc(38vw / 19.2), 38px);
}

/* ----------------- header ----------------- */

.header {
  background: url('img/pc/bg-wood.png') repeat;
  left: 0;
  right: 0;
  box-shadow: 0 2px 8px rgb(0 0 0 / 40%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  width: 100%;
  height: min(calc(144vw / 19.2), 144px);
  position: relative;
  z-index: 100;
}

.header .w1200 {
  width: calc(100% - 45vw);
  height: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-body {
  width: min(calc(300vw / 19.2), 300px);
  height: min(calc(280vw / 19.2), 280px);
  background: var(--white);
  border-radius: 30px;
  display: flex;
  align-items: center;
}

.header-logo img {
  width: 80%;
  margin: min(calc(50vw / 19.2), 50px) auto 0;
}

#g-nav {
  width: min(calc(620vw / 19.2), 620px);
  position: static;
  top: auto;
  right: auto;
  height: auto;
  transition: none;
}

#g-nav ul {
  display: flex;
  line-height: 1.5;
  padding: 0;
  flex-direction: row;
  justify-content: space-between;
  gap: 16px;
  height: auto;
  align-items: center;
}

#g-nav a {
  display: inline;
  color: var(--black);
  font-weight: 600;
  font-size: min(calc(16.5vw / 19.2), 16.5px);
  position: relative;
}

#g-nav a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--black);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.3s ease;
}

#g-nav a:hover::after {
  transform: scaleX(1);
}

/* ----------------- main ----------------- */

#main-visual {
  position: relative;
  margin-top: 0;
}

.main-img img {
  width: 90%;
  position: relative;
}

.main-copy {
  position: absolute;
  top: calc(100vw / 19.2);
  right: calc(240vw / 19.2);
  width: calc(700vw / 19.2);
}

.main-bird-left {
  position: absolute;
  width: calc(150vw / 19.2);
  top: calc(70vw / 19.2);
  left: calc(800vw / 19.2);
}

.main-text {
  position: absolute;
  width: calc(500vw / 19.2);
  bottom: calc(70vw / 19.2);
  right: calc(350vw / 19.2);
}

.main-bird-right {
  position: absolute;
  width: calc(150vw / 19.2);
  bottom: calc(-60vw / 19.2);
  right: calc(240vw / 19.2);
}

/* ----------------- about ----------------- */
#about {
  width: min(calc(1100vw / 19.2), 1100px);
  margin-bottom: min(calc(80vw / 19.2), 80px);
  position: relative;
}

.about-title {
  margin: min(calc(70vw / 19.2), 70px) 0 min(calc(40vw / 19.2), 40px);
  position: relative;
}

.about-title-line {
  position: relative;
  display: inline;
}

.about-title-line::after {
  content: '';
  border-bottom: 2px dotted var(--dark-gray);
  width: 100%;
  height: 0;
  position: absolute;
  bottom: max(calc(-5vw / 19.2), -5px);
  left: 0;
}

.about-text {
  margin: 0 auto min(calc(10vw / 19.2), 10px);
  font-size: min(calc(18vw / 19.2), 18px);
  width: min(calc(1000vw / 19.2), 1000px);
  text-align: center;
}
.about-text-leaf {
  position: relative;
}
.about-leaf-parts {
  position: absolute;
  width: min(calc(150vw / 19.2), 150px);
  top: 0;
  right: -5%;
  margin-left: min(calc(20vw / 19.2), 20px);
}

.about-point-item {
  display: flex;
  justify-content: center;
  gap: calc(20vw / 19.2);
  margin: calc(70vw / 19.2) 0 0;
}

.about-point-item img {
  width: min(calc(200vw / 19.2), 200px);
}

.about-flower-parts {
  position: absolute;
  width: min(calc(150vw / 19.2), 150px);
  left: 0%;
  bottom: 0%;
}

/* ----------------- kunren ----------------- */

.w1500-kuren {
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 30px;
}

#kunren {
  position: relative;
  background-color: var(--light-green);
  padding-top: min(calc(100vw / 19.2), 100px);
  padding-bottom: min(calc(250vw / 19.2), 250px);
}

#kunren::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0,60 L0,35 Q46,20 92,35 Q138,50 184,35 Q230,20 276,35 Q322,50 368,35 Q414,20 460,35 Q506,50 552,35 Q598,20 644,35 Q690,50 736,35 Q782,20 828,35 Q874,50 920,35 Q966,20 1012,35 Q1058,50 1104,35 Q1150,20 1200,35 L1200,60 Z' fill='%23eaf0ea'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  transform: translateY(-100%);
}

#kunren::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L0,25 Q46,40 92,25 Q138,10 184,25 Q230,40 276,25 Q322,10 368,25 Q414,40 460,25 Q506,10 552,25 Q598,40 644,25 Q690,10 736,25 Q782,40 828,25 Q874,10 920,25 Q966,40 1012,25 Q1058,10 1104,25 Q1150,40 1200,25 L1200,0 Z' fill='%23eaf0ea'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  transform: translateY(100%);
}

/* 背景画像 */
.item-img-pc {
  position: relative;
  z-index: 20;
}

.kunren-dot1 {
  position: absolute;
  top: max(calc(-30vw / 19.2), -30px);
  left: min(calc(170vw / 19.2), 170px);
  width: min(calc(120vw / 19.2), 120px);
}

.kunren-dot2 {
  position: absolute;
  top: min(calc(50vw / 19.2), 50px);
  left: min(calc(290vw / 19.2), 290px);
  width: min(calc(120vw / 19.2), 120px);
  z-index: 10;
}

.item-content-create-img {
  position: relative;
  z-index: 50;
}

.kunren-dot3 {
  position: absolute;
  top: -50%;
  right: 0%;
  width: min(calc(120vw / 19.2), 120px);
  z-index: -1;
}

.kunren-dot4 {
  position: absolute;
  bottom: -40%;
  right: 10%;
  width: min(calc(120vw / 19.2), 120px);
  z-index: -1;
}

.kunren-dot5 {
  position: absolute;
  bottom: -80%;
  right: -5%;
  width: min(calc(120vw / 19.2), 120px);
  z-index: 1;
}

.item-img-design-wrap {
  position: relative;
}

.item-img-lightwork-wrap {
  position: relative;
  z-index: 1;
}

.kunren-dot6 {
  position: absolute;
  left: -20%;
  bottom: -90%;
  width: min(calc(120vw / 19.2), 120px);
  z-index: 1;
}

.kunren-bottom {
  position: relative;
}

.kunren-bottom-img {
  position: absolute;
  bottom: 0;
  left: min(calc(100vw / 19.2), 100px);
  width: min(calc(900vw / 19.2), 900px);
}

/* 中身 */
.kunren-title {
  position: relative;
}

.kunren-title::before {
  content: '';
  background-image: url('img/pc/title-bg-leaf-l.svg');
  background-size: contain;
  background-repeat: no-repeat;
  width: min(calc(330vw / 19.2), 330px);
  height: min(calc(50vw / 19.2), 50px);
  position: absolute;
  top: 20%;
  left: 48%;
  transform: translateX(-140%);
}

.kunren-title::after {
  content: '';
  background-image: url('img/pc/title-bg-leaf-r.svg');
  background-size: contain;
  background-repeat: no-repeat;
  width: min(calc(330vw / 19.2), 330px);
  height: min(calc(50vw / 19.2), 50px);
  position: absolute;
  top: 20%;
  right: 48%;
  transform: translateX(140%);
}

.item-list {
  display: flex;
  flex-direction: column;
  gap: min(calc(80vw / 19.2), 80px);
  margin: min(calc(60vw / 19.2), 60px) 0 0;
}

.item {
  display: flex;
  align-items: center;
  gap: min(calc(60vw / 19.2), 60px);
}

.item:nth-child(odd) {
  justify-content: flex-start;
}

.item:nth-child(even) {
  justify-content: flex-end;
}

.item-title {
  font-size: min(calc(32vw / 19.2), 32px);
  margin-bottom: min(calc(16vw / 19.2), 16px);
  letter-spacing: 0.2em;
  position: relative;
}

.item-title::after {
  content: '';
  border-bottom: 2px dotted var(--dark-gray);
  height: 0;
  position: absolute;
  bottom: min(calc(2vw / 19.2), 2px);
}

.pc-kunren-item-title::after {
  content: '';
  width: 45%;
  left: 20%;
  transform: translateX(-50%);
}

.creare-kunren-item-title::after {
  content: '';
  width: 55%;
  left: 28%;
  transform: translateX(-50%);
}

.design-kunren-item-title::after {
  content: '';
  width: 100%;
  left: 50%;
  transform: translateX(-50%);
}

.lightwork-kunren-item-title::after {
  content: '';
  width: 35%;
  left: 18%;
  transform: translateX(-50%);
}

.item-detail {
  font-size: min(calc(23vw / 19.2), 23px);
  font-weight: 500;
  letter-spacing: 0.1em;
}

.item-img {
  width: min(calc(580vw / 15), 580px);
}

.item-content-pc,
.item-content-create,
.item-content-design,
.item-content-lightwork {
  position: relative;
}

.item-rabbit {
  position: absolute;
  left: min(calc(310vw / 19.2), 310px);
  bottom: max(calc(-100vw / 19.2), -100px);
  width: min(calc(500vw / 19.2), 500px);
}

.item-bird {
  position: absolute;
  left: max(calc(-200vw / 19.2), -200px);
  bottom: max(calc(-150vw / 19.2), -150px);
  width: min(calc(250vw / 19.2), 250px);
}

.item-flower {
  position: absolute;
  width: min(calc(140vw / 19.2), 140px);
  top: 0;
  left: min(calc(500vw / 19.2), 500px);
}

.item-bear {
  position: absolute;
  bottom: max(calc(-200vw / 19.2), -200px);
  width: min(calc(300vw / 19.2), 300px);
}

.fukidashi-pc {
  position: absolute;
  top: max(calc(-100vw / 15), -100px);
  right: 0;
  width: min(calc(100vw / 15), 100px);
}

.fukidashi-create {
  position: absolute;
  top: max(calc(-100vw / 15), -100px);
  left: -30%;
  width: min(calc(100vw / 19.2), 100px);
}

.fukidashi-design {
  position: absolute;
  top: max(calc(-100vw / 15), -100px);
  right: 0%;
  width: min(calc(100vw / 19.2), 100px);
}

.fukidashi-lightwork {
  position: absolute;
  top: max(calc(-100vw / 15), -100px);
  left: -30%;
  width: min(calc(100vw / 19.2), 100px);
}

/* ----------------- qa ----------------- */
#qa {
  position: relative;
  margin-bottom: min(calc(150vw / 19.2), 150px);
}

/* 背景画像 */

.qa-flower-right {
  position: absolute;
  width: min(calc(150vw / 19.2), 150px);
  right: 0%;
  top: 0%;
}

.qa-flower-left {
  position: absolute;
  width: min(calc(150vw / 19.2), 150px);
  left: 2%;
  bottom: -10%;
}

#qa::before {
  content: '';
  position: absolute;
  right: min(calc(1vw / 19.2), 1px);
  top: -5%;
  width: min(calc(160vw / 19.2), 160px);
  height: min(calc(160vw / 19.2), 160px);
  background-image: url('img/pc/bg-dot1.svg');
  background-size: contain;
  background-repeat: no-repeat;
}

#qa::after {
  content: '';
  position: absolute;
  right: min(calc(1vw / 19.2), 1px);
  bottom: -20%;
  width: min(calc(220vw / 19.2), 220px);
  height: min(calc(220vw / 19.2), 220px);
  background-image: url('img/pc/bg-dot2.svg');
  background-size: contain;
  background-repeat: no-repeat;
}

.qa-dot1 {
  position: absolute;
  left: min(calc(200vw / 19.2), 200px);
  top: -10%;
  width: min(calc(120vw / 19.2), 120px);
}

.qa-dot2 {
  position: absolute;
  top: -2%;
  left: min(calc(93vw / 19.2), 93px);
  width: min(calc(120vw / 19.2), 120px);
}

.qa-dot3 {
  position: absolute;
  top: 12%;
  left: min(calc(30vw / 19.2), 30px);
  width: min(calc(120vw / 19.2), 120px);
}

.qa-title {
  position: relative;
  margin: min(calc(100vw / 19.2), 100px) 0 min(calc(50vw / 19.2), 50px);
}

.qa-title::before {
  content: '';
  background-image: url('img/pc/title-bg-leaf-l.svg');
  background-size: contain;
  background-repeat: no-repeat;
  width: min(calc(330vw / 19.2), 330px);
  height: min(calc(50vw / 19.2), 50px);
  position: absolute;
  top: 15%;
  left: 50%;
  transform: translateX(-140%);
}

.qa-title::after {
  content: '';
  background-image: url('img/pc/title-bg-leaf-r.svg');
  background-size: contain;
  background-repeat: no-repeat;
  width: min(calc(330vw / 19.2), 330px);
  height: min(calc(50vw / 19.2), 50px);
  position: absolute;
  top: 15%;
  right: 50%;
  transform: translateX(140%);
}

.qa-body {
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
  justify-content: space-between;
  row-gap: min(calc(20vw / 19.2), 20px);
  width: min(calc(1600vw / 19.2), 1600px);
}

.qa-q {
  position: relative;
  font-size: min(calc(24vw / 19.2), 24px);
  font-weight: 600;
  line-height: min(calc(30vw / 19.2), 30px);
  padding: min(calc(40vw / 19.2), 40px) min(calc(36vw / 19.2), 36px)
    min(calc(18vw / 19.2), 18px) min(calc(86vw / 19.2), 86px);
}

.qa-a {
  position: relative;
  font-size: min(calc(22vw / 19.2), 22px);
  line-height: min(calc(36vw / 19.2), 36px);
  padding: min(calc(22vw / 19.2), 22px) min(calc(36vw / 19.2), 36px)
    min(calc(40vw / 19.2), 40px) min(calc(86vw / 19.2), 86px);
}

.qa-q::before {
  content: '';
  background-image: url('img/pc/icon-q.svg');
  background-size: cover;
  width: min(calc(25vw / 19.2), 25px);
  height: min(calc(25vw / 19.2), 25px);
  position: absolute;
  top: 62%;
  left: 5%;
  transform: translateY(-50%);
}

.qa-q::after {
  content: '';
  background-image: url('img/pc/qa-under-dot.svg');
  background-size: contain;
  width: 80%;
  height: 2px;
  position: absolute;
  bottom: 0;
  left: min(calc(86vw / 19.2), 86px);
}

.qa-a::before {
  content: '';
  background-image: url('img/pc/icon-a.svg');
  background-size: cover;
  width: min(calc(25vw / 19.2), 25px);
  height: min(calc(25vw / 19.2), 25px);
  position: absolute;
  top: min(calc(44vw / 19.2), 44px);
  left: 5%;
  transform: translateY(-50%);
}

.qa-box {
  width: min(calc(780vw / 19.2), 780px);
}

.qa-body .qa-box.qa1 {
  background-color: var(--light-pink);
  border-radius: min(calc(30vw / 19.2), 30px);
  height: min(calc(280vw / 19.2), 280px);
}

.qa-body .qa-box.qa2 {
  background-color: var(--light-purple);
  border-radius: min(calc(30vw / 19.2), 30px);
  height: min(calc(280vw / 19.2), 280px);
}

.qa-body .qa-box.qa3 {
  background-color: var(--light-purple);
  border-radius: min(calc(30vw / 19.2), 30px);
  height: min(calc(200vw / 19.2), 200px);
}

.qa-body .qa-box.qa4 {
  background-color: var(--light-pink);
  border-radius: min(calc(30vw / 19.2), 30px);
  height: min(calc(200vw / 19.2), 200px);
}

.qa-body .qa-box.qa5 {
  background-color: var(--light-pink);
  border-radius: min(calc(30vw / 19.2), 30px);
  height: min(calc(230vw / 19.2), 230px);
}

.qa-body .qa-box.qa6 {
  background-color: var(--light-purple);
  border-radius: min(calc(30vw / 19.2), 30px);
  height: min(calc(230vw / 19.2), 230px);
}

/* ----------------- flow ----------------- */
#flow {
  background-color: var(--light-yellow);
  position: relative;
  padding: min(calc(50vw / 19.2), 50px) 0;
}

#flow::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0,60 L0,35 Q46,20 92,35 Q138,50 184,35 Q230,20 276,35 Q322,50 368,35 Q414,20 460,35 Q506,50 552,35 Q598,20 644,35 Q690,50 736,35 Q782,20 828,35 Q874,50 920,35 Q966,20 1012,35 Q1058,50 1104,35 Q1150,20 1200,35 L1200,60 Z' fill='%23faf2cd'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  transform: translateY(-100%);
}

#flow::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L0,25 Q46,40 92,25 Q138,10 184,25 Q230,40 276,25 Q322,10 368,25 Q414,40 460,25 Q506,10 552,25 Q598,40 644,25 Q690,10 736,25 Q782,40 828,25 Q874,10 920,25 Q966,40 1012,25 Q1058,10 1104,25 Q1150,40 1200,25 L1200,0 Z' fill='%23faf2cd'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  transform: translateY(100%);
}

.flow-title {
  position: relative;
  margin-bottom: min(calc(36vw / 19.2), 36px);
}

.flow-title::before {
  content: '';
  background-image: url('img/pc/title-bg-leaf-l.svg');
  background-size: contain;
  background-repeat: no-repeat;
  width: min(calc(330vw / 19.2), 330px);
  height: min(calc(50vw / 19.2), 50px);
  position: absolute;
  top: 20%;
  left: 49%;
  transform: translateX(-140%);
}

.flow-title::after {
  content: '';
  background-image: url('img/pc/title-bg-leaf-r.svg');
  background-size: contain;
  background-repeat: no-repeat;
  width: min(calc(330vw / 19.2), 330px);
  height: min(calc(50vw / 19.2), 50px);
  position: absolute;
  top: 20%;
  right: 49%;
  transform: translateX(140%);
}

.flow-inner {
  position: relative;
}

.flow-dot1 {
  position: absolute;
  width: min(calc(150vw / 19.2), 150px);
  left: 17%;
  top: -12%;
}

.flow-dot2 {
  position: absolute;
  width: min(calc(150vw / 19.2), 150px);
  left: 12%;
  top: -25%;
}

.flow-dot3 {
  position: absolute;
  width: min(calc(150vw / 19.2), 150px);
  right: 0%;
  bottom: 0;
}

.flow-dot4 {
  position: absolute;
  width: min(calc(150vw / 19.2), 150px);
  right: 8%;
  bottom: -10%;
}

.flow-box {
  position: relative;
  width: min(calc(1200vw / 19.2), 1200px);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
}

.flow-box::before {
  content: '';
  position: absolute;
  left: min(calc(-100vw / 12), -100px);
  top: 10%;
  transform: translateY(-50%);
  width: min(calc(40vw / 12), 40px);
  height: min(calc(40vw / 12), 40px);
  background-image: url('img/pc/bg-leaf3.svg');
  background-size: contain;
  background-repeat: no-repeat;
}

.flow-box::after {
  content: '';
  position: absolute;
  right: min(calc(-130vw / 12), -130px);
  top: 0%;
  transform: translateY(-50%);
  width: min(calc(120vw / 12), 120px);
  height: min(calc(120vw / 12), 120px);
  background-image: url('img/pc/bg-leaf2.svg');
  background-size: contain;
  background-repeat: no-repeat;
}

.flow-item {
  width: min(calc(337vw / 19.2), 337px);
  height: min(calc(337vw / 19.2), 337px);
  border-radius: 50%;
  background-color: var(--white);
  position: relative;
}

.flow01,
.flow03 {
  padding: min(calc(55vw / 19.2), 55px);
}

.flow02 {
  padding: min(calc(55vw / 19.2), 55px);
}

.flow01::before {
  content: '';
  width: min(calc(70vw / 19.2), 70px);
  height: min(calc(70vw / 19.2), 70px);
  background-image: url('img/pc/flow01-step01.svg');
  background-size: cover;
  position: absolute;
  top: min(calc(5vw / 19.2), 5px);
  left: min(calc(10vw / 19.2), 10px);
}

.flow02::before {
  content: '';
  width: min(calc(70vw / 19.2), 70px);
  height: min(calc(70vw / 19.2), 70px);
  background-image: url('img/pc/flow02-step02.svg');
  background-size: cover;
  position: absolute;
  top: min(calc(5vw / 19.2), 5px);
  left: min(calc(10vw / 19.2), 10px);
}

.flow03::before {
  content: '';
  width: min(calc(70vw / 19.2), 70px);
  height: min(calc(70vw / 19.2), 70px);
  background-image: url('img/pc/flow03-step03.svg');
  background-size: cover;
  position: absolute;
  top: min(calc(5vw / 19.2), 5px);
  left: min(calc(10vw / 19.2), 10px);
}

.flow-item h5 {
  font-size: min(calc(24vw / 19.2), 24px);
  font-weight: 800;
  line-height: 1.291;
  text-align: center;
  color: var(--brown);
}

.flow01 > h5,
.flow03 > h5 {
  margin-bottom: min(calc(26vw / 19.2), 26px);
}

.flow02 > h5 {
  margin-bottom: min(calc(18vw / 19.2), 18px);
}
.flow-item > p {
  font-size: min(calc(17vw / 19.2), 17px);
  font-weight: 500;
  line-height: 1.666;
}

.arrow {
  margin: 0;
}

.arrow > img {
  width: min(calc(72vw / 19.2), 72px);
  height: min(calc(72vw / 19.2), 72px);
}

/* ----------------- news ----------------- */
#news {
  padding-bottom: min(calc(120vw / 19.2), 120px);
  position: relative;
}

.news-title {
  position: relative;
  margin: min(calc(100vw / 19.2), 100px) 0 min(calc(50vw / 19.2), 50px);
}

.news-title::before {
  content: '';
  background-image: url('img/pc/title-bg-leaf-l.svg');
  background-size: contain;
  background-repeat: no-repeat;
  width: min(calc(330vw / 19.2), 330px);
  height: min(calc(50vw / 19.2), 50px);
  position: absolute;
  top: 20%;
  left: 46%;
  transform: translateX(-140%);
}

.news-title::after {
  content: '';
  background-image: url('img/pc/title-bg-leaf-r.svg');
  background-size: contain;
  background-repeat: no-repeat;
  width: min(calc(330vw / 19.2), 330px);
  height: min(calc(50vw / 19.2), 50px);
  position: absolute;
  top: 20%;
  right: 46%;
  transform: translateX(140%);
}

/* ----------------- insta ----------------- */
#insta ul {
  display: flex;
  justify-content: flex-start;
  gap: 0 min(calc(12vw / 19.2), 12vw);
  width: min(calc(1200vw / 19.2), 1200px);
  margin: 0 auto;
  padding: min(calc(12vw / 19.2), 12vw);
  background-color: var(--white);
}

#insta a {
  text-decoration: none;
  display: inline-block;
}

#insta ul li {
  list-style: none;
  width: min(calc(384vw / 19.2), 384px);
  height: min(calc(384vw / 19.2), 384px);
  position: relative;
}

#insta ul li img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.captionTxt {
  display: block;
  width: 100%;
  height: 100%;
  padding: min(calc(24vw / 19.2), 24vw);
  font-size: min(calc(20vw / 19.2), 20vw);
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgb(51 51 51 / 55%);
  color: var(--white);
  opacity: 0;
  transition:
    0.5s opacity,
    0.25s filter;
}

#insta ul li:hover .captionTxt {
  transition:
    0.5s opacity,
    0.25s filter;
  opacity: 1;
}

.news-flower-parts {
  position: absolute;
  width: min(calc(150vw / 19.2), 150px);
  bottom: 10%;
  right: 10%;
  transform: scaleX(-1);
}

/* ----------------- side-button ----------------- */
.side-button {
  display: flex;
  flex-direction: column;
  gap: min(calc(20vw / 19.2), 20px) 0;
  position: fixed;
  right: 0;
  top: min(calc(206vw / 19.2), 206px);
  z-index: 200;
}

.sb-mail {
  background-color: var(--sidebutton-orange);
  width: min(calc(104vw / 19.2), 104px);
  height: min(calc(308vw / 19.2), 308px);
  border-radius: min(calc(35vw / 19.2), 35px) 0 0 min(calc(35vw / 19.2), 35px);
  position: relative;
}

.sb-line {
  background-color: var(--sidebutton-green);
  width: min(calc(104vw / 19.2), 104px);
  height: min(calc(320vw / 19.2), 320px);
  border-radius: min(calc(35vw / 19.2), 35px) 0 0 min(calc(35vw / 19.2), 35px);
  position: relative;
}

.side-button a {
  display: inline-block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  text-decoration: none;
}

.side-button p {
  writing-mode: vertical-lr;
  font-size: min(calc(18vw / 19.2), 18px);
  font-weight: 800;
  letter-spacing: min(calc(2.1vw / 19.2), 2.1px);
  line-height: min(calc(16vw / 19.2), 16px);
  color: var(--white);
  padding-left: min(calc(44vw / 19.2), 44px);
}

.sb-mail,
.sb-line {
  transition: 0.3s all;
}

.sb-mail:hover,
.sb-line:hover {
  filter: brightness(105%);
}

.sb-mail p {
  margin-top: min(calc(80vw / 19.2), 80px);
}

.sb-mail::before {
  content: '';
  width: min(calc(38vw / 19.2), 38px);
  height: min(calc(30vw / 19.2), 30px);
  background-image: url('img/pc/icon-mail2.svg');
  background-size: cover;
  position: absolute;
  top: min(calc(38vw / 19.2), 38px);
  left: min(calc(34vw / 19.2), 32px);
  pointer-events: none;
}

.sb-line p {
  margin-top: min(calc(76vw / 19.2), 76px);
}

.sb-line::before {
  content: '';
  width: min(calc(40vw / 19.2), 40px);
  height: min(calc(38vw / 19.2), 38px);
  background-image: url('img/pc/icon-line2.svg');
  background-size: cover;
  position: absolute;
  top: min(calc(28vw / 19.2), 28px);
  left: min(calc(30vw / 19.2), 32px);
  pointer-events: none;
}

/* ----------------- footer ----------------- */
footer {
  position: relative;
  background-color: var(--green);
}

footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0,60 L0,35 Q46,20 92,35 Q138,50 184,35 Q230,20 276,35 Q322,50 368,35 Q414,20 460,35 Q506,50 552,35 Q598,20 644,35 Q690,50 736,35 Q782,20 828,35 Q874,50 920,35 Q966,20 1012,35 Q1058,50 1104,35 Q1150,20 1200,35 L1200,60 Z' fill='%237cc69b'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  transform: translateY(-100%);
}

.guidance {
  text-align: center;
  position: relative;
  padding: min(calc(50vw / 19.2), 50px) 0;
}

.guidance::before {
  content: '';
  background-image: url('img/pc/title-bg_2a.svg');
  background-size: cover;
  width: min(calc(65vw / 19.2), 65px);
  height: min(calc(150vw / 19.2), 150px);
  position: absolute;
  top: min(calc(28vw / 19.2), 28px);
  left: min(calc(510vw / 19.2), 510px);
}

.guidance::after {
  content: '';
  background-image: url('img/pc/title-bg_2b.svg');
  background-size: cover;
  width: min(calc(65vw / 19.2), 65px);
  height: min(calc(150vw / 19.2), 150px);
  position: absolute;
  top: min(calc(28vw / 19.2), 28px);
  right: min(calc(510vw / 19.2), 510px);
}

.guidance h3 {
  color: var(--white);
  font-size: min(calc(38vw / 19.2), 38px);
  padding: min(calc(15vw / 19.2), 15px) 0;
  letter-spacing: 0.1vw;
}

.guidance p {
  color: var(--white);
  font-size: min(calc(18vw / 19.2), 18px);
  padding: 0;
}

.footer-button {
  width: min(calc(1054vw / 19.2), 1054px);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto min(calc(5vw / 19.2), 5px);
}

.tel,
.mail,
.line {
  border-radius: min(calc(20vw / 19.2), 20px);
  box-shadow: min(calc(3vw / 19.2), 3px) min(calc(3vw / 19.2), 3px)
    rgba(0, 0, 0, 0.2);
  background-image: url('img/pc/bg-wood.png');
  background-size: cover;
  text-decoration: none;
  color: var(--black);
  position: relative;
  margin-bottom: min(calc(40vw / 19.2), 40px);
  transition: 0.3s all;
}

.tel:hover,
.mail:hover,
.line:hover {
  filter: brightness(105%);
}

.tel {
  width: min(calc(382vw / 19.2), 382px);
  height: min(calc(85vw / 19.2), 85px);
  padding: min(calc(12vw / 19.2), 12px) min(calc(42vw / 19.2), 42px)
    min(calc(12vw / 19.2), 12px) min(calc(100vw / 19.2), 100px);
  color: var(--purple);
}

.tel::before {
  content: '';
  width: min(calc(45vw / 19.2), 45px);
  height: min(calc(53vw / 19.2), 53px);
  background-image: url('img/pc/icon-tel1.svg');
  background-size: cover;
  position: absolute;
  top: min(calc(18vw / 19.2), 18px);
  left: min(calc(42vw / 19.2), 42px);
}

.tel-box {
  display: block;
}

.tel-number {
  font-size: min(calc(30vw / 19.2), 30px);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0;
  font-family: 'DIN Bold', sans-serif;
}

.tel-txt {
  display: block;
  font-size: min(calc(17vw / 19.2), 17px);
  letter-spacing: 0;
  font-weight: 500;
  line-height: 1;
  padding-top: min(calc(2vw / 19.2), 2px);
  padding-bottom: min(calc(6vw / 19.2), 6px);
  font-family:
    'ZenMaruGothic', 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN',
    'Hiragino Sans', Meiryo, sans-serif;
}

.mail,
.line {
  width: min(calc(312vw / 19.2), 312px);
  height: min(calc(85vw / 19.2), 85px);
  padding: min(calc(32vw / 19.2), 32px) min(calc(44vw / 19.2), 44px)
    min(calc(32vw / 19.2), 32px) min(calc(97vw / 19.2), 97px);
}

.mail {
  color: var(--orange);
}

.line {
  color: var(--dark-green);
}

.mail::before {
  content: '';
  width: min(calc(41vw / 19.2), 41px);
  height: min(calc(32vw / 19.2), 32px);
  background-image: url('img/pc/icon-mail1.svg');
  background-size: cover;
  position: absolute;
  top: min(calc(26vw / 19.2), 26px);
  left: min(calc(39vw / 19.2), 39px);
}

.line::before {
  content: '';
  width: min(calc(48vw / 19.2), 48px);
  height: min(calc(45vw / 19.2), 45px);
  background-image: url('img/pc/icon-line1.svg');
  background-size: cover;
  position: absolute;
  top: min(calc(20vw / 19.2), 20px);
  left: min(calc(39vw / 19.2), 39px);
}

.mail > p,
.line > p {
  font-size: min(calc(18vw / 19.2), 18px);
  font-weight: 600;
  line-height: 1;
}

.footer-body {
  margin: 0 auto min(calc(50vw / 19.2), 50px);
  display: flex;
  justify-content: center;
  gap: 0 min(calc(40vw / 19.2), 40px);
}

.map {
  margin-bottom: 0;
}

.map-pc {
  display: block;
  width: min(calc(704vw / 19.2), 704px);
  height: min(calc(472vw / 19.2), 472px);
}

.office-info {
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.office-info-body {
  margin-bottom: 10px;
}

.footer-logo img {
  display: block;
  margin: 0 auto;
  width: min(calc(250vw / 19.2), 250px);
}

.address > p {
  font-size: min(calc(18vw / 19.2), 18px);
  font-weight: normal;
  line-height: 1.5;
  color: var(--white);
  text-align: left;
}

.footer-mof img {
  width: min(calc(280vw / 19.2), 280px);
}

.copyright {
  font-size: min(calc(18vw / 19.2), 18px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: min(calc(1vw / 19.2), 1px);
  color: var(--white);
  text-align: center;
  padding-bottom: min(calc(20vw / 19.2), 20px);
}

/* ===================== */
/* SP（モバイル）用スタイル */
/* ===================== */
@media screen and (max-width: 767px) {
  .pc-only {
    display: none;
  }

  .sp-only {
    display: block;
  }

  .section-title {
    text-align: center;
    font-size: calc(16vw / 3.9);
  }

  /* ----------------- header SP ----------------- */
  .header {
    background: var(--white);
    box-shadow: none;
    height: min(calc(88vw / 3.9), 88px);
  }

  .header .w1200 {
    background: var(--white);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    padding: 0 0 0 min(calc(8vw / 3.9), 8px);
    height: min(calc(88vw / 3.9), 88px);
  }

  .header-body {
    width: auto;
    height: auto;
    background: transparent;
    border-radius: 0;
  }

  .header-logo img {
    width: auto;
    height: min(calc(60vw / 3.9), 60px);
    margin: 0;
  }

  .header-icon {
    display: flex;
    gap: calc(10vw / 3.9);
    margin-left: auto;
    margin-right: calc(10vw / 3.9);
  }

  .header-icon a {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .header-icon img {
    width: min(calc(40vw / 3.9), 40px);
  }

  .header-nav {
    position: absolute;
  }

  #g-nav {
    position: fixed;
    top: min(calc(88vw / 3.9), 88px);
    left: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.9);
    z-index: 99;
    opacity: 0;
    visibility: hidden;
    transition:
      opacity 0.3s ease,
      visibility 0.3s ease;
  }

  /* ----------------- ハンバーガーメニュー ----------------- */
  .openbtn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: min(calc(70vw / 3.9), 88px);
    height: min(calc(88vw / 3.9), 88px);
    cursor: pointer;
    background: var(--light-blue);
  }

  .openbtn span {
    display: block;
    width: min(calc(25vw / 3.9), 25px);
    height: min(calc(2vw / 3.9), 2px);
    background: var(--white);
    margin: min(calc(4vw / 3.9), 4px) 0;
    transition: 0.3s;
  }

  .openbtn-text {
    font-size: min(calc(12vw / 3.9), 12px);
    color: var(--white);
    font-weight: 700;
    margin-top: min(calc(8vw / 3.9), 8px);
  }

  .openbtn.active {
    justify-content: center;
  }

  .openbtn.active span:nth-child(1) {
    transform: translateY(min(calc(5vw / 3.9), 5px)) rotate(45deg);
  }

  .openbtn.active span:nth-child(2) {
    transform: scale(0);
    opacity: 0;
    height: 0;
    margin: 0;
  }

  .openbtn.active span:nth-child(3) {
    transform: translateY(max(calc(-5vw / 3.9), -5px)) rotate(-45deg);
  }

  /* ----------------- SPナビゲーション ----------------- */
  #g-nav.active {
    opacity: 1;
    visibility: visible;
  }

  #g-nav.active ul {
    flex-direction: column;
    justify-content: flex-start;
    padding: min(calc(30vw / 3.9), 30px);
    gap: min(calc(18vw / 3.9), 18px);
  }

  #g-nav.active a {
    font-size: min(calc(18vw / 3.9), 18px);
  }

  /* ----------------- main SP ----------------- */
  .main-img img {
    width: 100%;
    height: calc(320vw / 3.9);
    object-fit: cover;
    object-position: center bottom;
    border-radius: 0 0 50% 50% / 0 0 5% 5%;
  }

  .main-copy {
    top: calc(20vw / 3.9);
    left: calc(80vw / 3.9);
    width: calc(280vw / 3.9);
  }

  .main-bird-left {
    width: calc(50vw / 3.9);
    top: calc(20vw / 3.9);
    left: calc(20vw / 3.9);
  }

  .main-text {
    width: calc(170vw / 3.9);
    bottom: calc(50vw / 3.9);
    right: calc(10vw / 3.9);
  }

  .main-bird-right {
    width: calc(60vw / 3.9);
    bottom: calc(-20vw / 3.9);
    right: calc(20vw / 3.9);
  }

  /* ----------------- about SP ----------------- */
  #about {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin: calc(10vw / 3.9) 0 calc(30vw / 3.9) 0;
  }

  .about-title {
    margin: calc(20vw / 3.9) 0;
  }

  .about-text {
    margin: 0 0 calc(7vw / 3.9) 0;
    font-size: calc(13vw / 3.9);
    font-weight: 500;
    width: calc(350vw / 3.9);
    text-align: center;
  }

  .about-point-item {
    order: -1;
  }

  .about-point-item img {
    width: calc(115vw / 3.9);
    margin: 0;
  }

  .about-leaf-r {
    position: absolute;
    width: calc(30vw / 3.9);
    bottom: 0%;
    right: -5%;
    height: calc(30vw / 3.9);
    transform: scaleX(-1);
  }

  .about-leaf-l {
    position: absolute;
    width: calc(25vw / 3.9);
    height: calc(25vw / 3.9);
    top: 45%;
    left: 2%;
  }

  /* ----------------- kunren SP ----------------- */

  .w1500-kuren {
    padding: 0;
  }

  .kunren-dot2 {
    width: calc(50vw / 3.9);
    top: 0;
    left: 0;
    z-index: 0;
  }

  .kunren-dot3 {
    width: calc(50vw / 3.9);
    top: -40%;
    right: 0;
    z-index: -1;
  }

  .kunren-dot4 {
    width: calc(50vw / 3.9);
    bottom: -25%;
    z-index: -2;
  }

  .kunren-dot6 {
    width: calc(50vw / 3.9);
    left: -70%;
  }

  .kunren-bottom-img {
    bottom: -2%;
    width: calc(300vw / 3.9);
  }

  #kunren {
    padding-bottom: calc(100vw / 3.9);
  }

  #kunren::before {
    height: 30px;
  }

  #kunren::after {
    height: 30px;
  }

  .kunren-title::before {
    width: calc(100vw / 3.9);
    top: 32%;
    left: 42%;
    z-index: 1;
  }

  .kunren-title::after {
    width: calc(100vw / 3.9);
    top: 32%;
    right: 42%;
  }

  .item-list {
    gap: calc(50vw / 3.9);
    margin: calc(16vw / 3.9) 0 0;
  }

  .item-img {
    width: calc(200vw / 3.9);
    aspect-ratio: 4 / 2.5;
  }

  .item:nth-child(odd) .item-img {
    object-fit: cover;
    object-position: right center;
  }

  .item:nth-child(even) .item-img {
    object-position: left center;
  }

  .item-title {
    font-size: calc(15vw / 3.9);
    margin-bottom: calc(10vw / 3.9);
  }

  .about-title-line::after,
  .item-title::after {
    border-bottom-width: 1px;
  }

  .pc-kunren-item-title::after {
    width: 50%;
    left: 23%;
    transform: translateX(-50%);
  }

  .creare-kunren-item-title::after {
    width: 65%;
    left: 30%;
    transform: translateX(-50%);
  }

  .lightwork-kunren-item-title::after {
    width: 40%;
    left: 20%;
    transform: translateX(-50%);
  }

  .item-detail {
    width: calc(140vw / 3.9);
    font-size: calc(12vw / 3.9);
    letter-spacing: 0.1em;
  }

  .item-rabbit {
    width: calc(70vw / 3.9);
    bottom: -30%;
  }

  .item-bird {
    left: 58%;
    bottom: -40%;
    width: calc(60vw / 3.9);
  }

  .item-bear {
    right: -80%;
    width: calc(85vw / 3.9);
  }

  .fukidashi-pc {
    width: calc(45vw / 3.9);
    top: -10%;
  }

  .fukidashi-create {
    width: calc(45vw / 3.9);
    top: -60%;
    left: -15%;
  }

  .item-content-design {
    z-index: 51;
  }

  .fukidashi-design {
    width: calc(45vw / 3.9);
    top: -60%;
    z-index: 1;
  }

  .fukidashi-lightwork {
    width: calc(45vw / 3.9);
    top: -70%;
    left: -12%;
  }

  /* ----------------- qa SP ----------------- */
  #qa {
    margin: calc(32vw / 3.9) 0;
  }

  /* 背景画像 */

  #qa::before {
    content: '';
    position: absolute;
    width: calc(60vw / 3.9);
    height: calc(60vw / 3.9);
    background-size: contain;
    background-repeat: no-repeat;
    top: -3%;
    right: 10%;
  }

  .qa-dot1 {
    left: 0;
    top: 15%;
    width: calc(50vw / 3.9);
  }

  .qa-dot2 {
    left: -5%;
    top: 23%;
    width: calc(50vw / 3.9);
  }

  .qa-dot3 {
    left: 90%;
    top: 80%;
    width: calc(50vw / 3.9);
    z-index: 0;
  }

  .qa-dot4 {
    position: absolute;
    left: 90%;
    top: 50%;
    width: calc(50vw / 3.9);
    z-index: 0;
  }

  .qa-flower1 {
    position: absolute;
    left: 1%;
    top: 15%;
    width: calc(15vw / 3.9);
  }

  .qa-flower2 {
    position: absolute;
    right: 1%;
    top: 30%;
    width: calc(20vw / 3.9);
  }

  .qa-flower3 {
    position: absolute;
    right: 0.8%;
    top: 50%;
    width: calc(15vw / 3.9);
  }

  .qa-flower4 {
    position: absolute;
    right: 0.8%;
    bottom: -1%;
    width: calc(25vw / 3.9);
  }

  .qa-flower5 {
    position: absolute;
    left: 1%;
    bottom: 25%;
    width: calc(25vw / 3.9);
  }

  .qa-flower6 {
    position: absolute;
    left: 0%;
    bottom: -1%;
    width: calc(35vw / 3.9);
  }

  .qa-title::before {
    width: calc(100vw / 3.9);
    top: 32%;
    left: 50%;
  }

  .qa-title::after {
    width: calc(100vw / 3.9);
    top: 32%;
    right: 50%;
  }

  .qa-body {
    flex-direction: column;
    align-items: center;
    row-gap: calc(16vw / 3.9);
    width: calc(350vw / 3.9);
  }

  .qa-q {
    font-size: calc(13vw / 3.9);
    font-weight: 600;
    padding: calc(17vw / 3.9) calc(5vw / 3.9) calc(14vw / 3.9) calc(36vw / 3.9);
  }

  .qa-a {
    font-size: calc(12vw / 3.9);
    font-weight: 500;
    line-height: 1.5;
    padding: calc(2vw / 3.9) calc(5vw / 3.9) calc(14vw / 3.9) calc(36vw / 3.9);
  }

  .qa-q::after {
    height: 0;
  }

  .qa-q::before {
    width: calc(14vw / 3.9);
    height: calc(15vw / 3.9);
    top: 50%;
    left: calc(10vw / 3.9);
    transform: translateY(-50%);
  }

  .qa-q::after {
    border-bottom: 1.6px dotted var(--dark-gray);
    width: 93%;
    left: calc(12vw / 3.9);
  }

  .qa-a::before {
    top: calc(11vw / 3.9);
    left: calc(10vw / 3.9);
    width: calc(13vw / 3.9);
    height: calc(13vw / 3.9);
  }

  .qa-box {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    row-gap: calc(3.3vw / 3.9);
    width: calc(350vw / 3.9);
    height: auto;
    border-radius: calc(13vw / 3.9);
  }

  .qa-body .qa-box:nth-child(odd) {
    background-color: var(--light-pink);
  }

  .qa-body .qa-box:nth-child(even) {
    background-color: var(--light-purple);
  }

  .qa-body .qa-box.qa1 {
    height: calc(130vw / 3.9);
  }

  .qa-body .qa-box.qa2 {
    height: calc(130vw / 3.9);
  }

  .qa-body .qa-box.qa3 {
    height: calc(75vw / 3.9);
  }

  .qa-body .qa-box.qa4 {
    height: calc(75vw / 3.9);
  }

  .qa-body .qa-box.qa5 {
    height: calc(110vw / 3.9);
  }

  .qa-body .qa-box.qa6 {
    height: calc(95vw / 3.9);
  }

  /* ----------------- flow SP ----------------- */

  #flow {
    padding: calc(16vw / 3.9) 0 calc(32vw / 3.9);
  }

  #flow::before {
    height: 30px;
  }

  #flow::after {
    height: 30px;
  }
  .flow-title::before {
    width: calc(100vw / 3.9);
    top: 32%;
    left: 42%;
    z-index: 1;
  }

  .flow-title::after {
    width: calc(100vw / 3.9);
    top: 32%;
    right: 42%;
  }

  .flow-dot1 {
    width: calc(90vw / 3.9);
    left: -9%;
    top: 6%;
  }
  .flow-dot2 {
    width: calc(90vw / 3.9);
    left: 8%;
    top: 10%;
  }

  .flow-dot3 {
    width: calc(90vw / 3.9);
    right: 20%;
    bottom: 60%;
  }

  .flow-dot4 {
    width: calc(90vw / 3.9);
    right: 60%;
    bottom: 30%;
  }

  .flow-dot5 {
    position: absolute;
    width: calc(90vw / 3.9);
    left: 5%;
    bottom: 6%;
  }

  .flow-leaf {
    position: absolute;
    width: calc(25vw / 3.9);
    left: 20%;
    bottom: 0%;
    transform: scale(-1, -1);
  }

  .flow-box {
    flex-direction: column;
  }

  .flow-box::before {
    width: calc(20vw / 3.9);
    height: calc(20vw / 3.9);
    top: 20%;
    left: -20%;
  }

  .flow-box::after {
    background-image: url('img/pc/bg-leaf3.svg');
    width: calc(30vw / 3.9);
    height: calc(30vw / 3.9);
    top: 68%;
    right: -15%;
    transform: scaleX(-1);
  }

  .flow-item {
    width: calc(242vw / 3.9);
    height: calc(242vw / 3.9);
  }

  .flow01,
  .flow03 {
    padding: calc(52vw / 3.9) calc(40vw / 3.9) calc(48vw / 3.9);
  }

  .flow02 {
    padding: calc(40vw / 3.9) calc(40vw / 3.9) calc(42vw / 3.9);
  }

  .flow01::before {
    width: calc(46vw / 3.9);
    height: calc(46vw / 3.9);
    top: calc(5vw / 3.9);
    left: calc(10vw / 3.9);
  }

  .flow02::before {
    width: calc(46vw / 3.9);
    height: calc(46vw / 3.9);
    top: calc(5vw / 3.9);
    left: calc(10vw / 3.9);
  }

  .flow03::before {
    width: calc(46vw / 3.9);
    height: calc(46vw / 3.9);
    top: calc(5vw / 3.9);
    left: calc(10vw / 3.9);
  }

  .flow-item > h5 {
    font-size: calc(16vw / 3.9);
    line-height: calc(24vw / 3.9);
    margin-bottom: calc(18vw / 3.9);
  }

  .flow01 > h5,
  .flow02 > h5,
  .flow03 > h5 {
    margin-bottom: calc(18vw / 3.9);
  }

  .flow-item > p {
    font-size: calc(12vw / 3.9);
    line-height: calc(21vw / 3.9);
  }

  .arrow {
    margin: calc(3vw / 3.9) 0;
  }

  .arrow > img {
    width: calc(40vw / 3.9);
    height: calc(40vw / 3.9);
    transform: rotate(90deg);
  }

  /* ----------------- news SP ----------------- */
  #news {
    padding: calc(32vw / 3.9) 0;
    border: none;
  }

  .news-title::before {
    width: calc(100vw / 3.9);
    top: 32%;
    left: 42%;
  }

  .news-title::after {
    width: calc(100vw / 3.9);
    top: 32%;
    right: 42%;
  }

  #insta ul {
    display: flex;
    flex-direction: column;
    gap: calc(10vw / 3.9) 0;
    width: calc(240vw / 3.9);
    margin: 0 auto;
    padding: calc(10vw / 3.9);
    background-color: var(--white);
  }

  #insta a {
    text-decoration: none;
    display: inline-block;
  }

  #insta ul li {
    list-style: none;
    width: calc(220vw / 3.9);
    height: calc(220vw / 3.9);
    position: relative;
  }

  #insta ul li img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
  }

  .captionTxt {
    display: block;
    width: 100%;
    height: 100%;
    padding: calc(20vw / 3.9);
    font-size: calc(12vw / 3.9);
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgb(51 51 51 / 55%);
    color: var(--white);
    opacity: 0;
    transition:
      0.5s opacity,
      0.25s filter;
  }

  #insta ul li:hover .captionTxt {
    transition:
      0.5s opacity,
      0.25s filter;
    opacity: 1;
  }

  /* ----------------- footer SP ----------------- */
  footer::before {
    height: 30px;
  }

  .guidance {
    padding: 0;
  }

  .guidance::before {
    width: calc(32.5vw / 3.9);
    height: calc(75vw / 3.9);
    top: calc(20vw / 3.9);
    left: calc(45vw / 3.9);
  }

  .guidance::after {
    width: calc(32.5vw / 3.9);
    height: calc(75vw / 3.9);
    top: calc(20vw / 3.9);
    right: calc(50vw / 3.9);
  }

  .guidance h3 {
    font-size: calc(18vw / 3.9);
    padding-top: calc(28vw / 3.9);
    padding-bottom: 0;
    letter-spacing: 0;
  }

  .guidance p {
    font-size: calc(14vw / 3.9);
    padding: calc(20vw / 3.9) 0;
  }

  .footer-button {
    width: auto;
    flex-direction: column;
    justify-content: center;
    margin: 0;
  }

  .tel,
  .mail,
  .line {
    width: calc(306vw / 3.9);
    height: calc(68vw / 3.9);
    box-shadow: none;
    border-radius: calc(20vw / 3.9);
    margin-bottom: calc(16vw / 3.9);
    background-size: auto;
  }

  .tel {
    padding: calc(17vw / 3.9) calc(34vw / 3.9) calc(13vw / 3.9) calc(77vw / 3.9);
  }

  .tel::before {
    width: calc(36vw / 3.9);
    height: calc(42vw / 3.9);
    top: calc(13vw / 3.9);
    left: calc(34vw / 3.9);
  }

  .tel-box {
    display: flex;
    flex-direction: column;
  }

  .tel-number {
    font-size: calc(22vw / 3.9);
    line-height: 0.9;
    align-self: center;
    letter-spacing: calc(0.8vw / 3.9);
  }

  .tel-txt {
    font-size: calc(12vw / 3.9);
    padding-top: calc(6vw / 3.9);
    padding-bottom: 0;
  }

  .mail,
  .line {
    padding: calc(7vw / 3.9) calc(60vw / 3.9) calc(7vw / 3.9) calc(104vw / 3.9);
  }

  .mail::before {
    width: calc(31vw / 3.9);
    height: calc(24vw / 3.9);
    top: calc(22vw / 3.9);
    left: calc(64vw / 3.9);
  }

  .line::before {
    width: calc(34.9vw / 3.9);
    height: calc(33vw / 3.9);
    top: calc(18vw / 3.9);
    left: calc(62vw / 3.9);
  }

  .mail > p,
  .line > p {
    font-size: calc(15vw / 3.9);
    font-weight: 700;
    line-height: 3.333;
  }

  .footer-body {
    width: auto;
    flex-direction: column;
    margin: 0;
    gap: 0;
  }

  .map {
    margin-bottom: calc(12vw / 3.9);
  }

  .map-sp {
    display: block;
    width: calc(370vw / 3.9);
    height: calc(192vw / 3.9);
    margin: 0 auto;
  }

  .office-info {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
    justify-content: center;
    align-items: center;
    gap: 0;
    margin-left: calc(16vw / 3.9);
    margin-bottom: calc(36vw / 3.9);
  }

  .office-info-body {
    display: contents;
    margin-left: 0;
  }

  .footer-logo {
    grid-column: 1;
    grid-row: 1;
  }

  .footer-logo img {
    width: calc(200vw / 3.9);
    height: calc(148vw / 3.9);
    margin-bottom: 0;
  }

  .footer-mof {
    grid-column: 2;
    grid-row: 1;
    position: static;
    width: calc(200vw / 3.9);
  }

  .footer-mof > img {
    width: 100%;
    height: 100%;
  }

  .address {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .address > p {
    font-size: calc(15vw / 3.9);
    font-weight: 500;
    line-height: 1.533;
    text-align: left;
  }

  .copyright {
    font-size: calc(11vw / 3.9);
    letter-spacing: calc(1vw / 3.9);
    padding-bottom: calc(18vw / 3.9);
  }

  /* ----------------- side-button SP ----------------- */
  .side-button {
    display: none;
  }
}

/* end @media */