@charset "UTF-8";

/* textstyle */

.zen-old-mincho-regular {
  font-family: "Zen Old Mincho", serif;
  font-weight: 400;
  font-style: normal;
}

.kaisei-tokumin-regular {
  font-family: "Kaisei Tokumin", serif;
  font-weight: 400;
  font-style: normal;
}


.cormorant-garamond {
  font-family: "Cormorant Garamond", serif;
  font-optical-sizing: auto;
  font-weight: weight;
  font-style: normal;
}

.eb-garamond {
  font-family: "EB Garamond", serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}

body {
    font-family: "Zen Old Mincho", serif;
    font-size: 62.5%;
    scroll-behavior: smooth;
    outline: 1px solid red;
}

html,body {
    overflow-x: hidden;
    width: 100%;
}

.inner {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
}

@media screen and (max-width:768px) {

  .inner {
  max-width: 333px;
  padding: 0px 30px 0px 30px;
}

}

/* header */

.online-bar {
  font-family: "Cormorant Garamond", serif;
  font-weight: 300;
  font-style: normal;
  font-size: 24px;
  color: #E5CE73;
  letter-spacing: 2px;
  display: block;
  display: flex;
  align-items: flex-start;
  position: fixed;
  top: 30px;
  right: 0px;
  cursor: pointer;
  z-index: 25;
}

.online-bar img {
  margin: 10px 0 0 10px;
  display: block;
}

/* hamburger */

.hamburger {
  position: fixed;
  top: 70px;
  right: 40px;
  width: 48px;
  cursor: pointer;
  z-index: 10; /* メニューより前に表示 */
}

.hamburger span {
  display: block;
  height: 3px;
  width: 100%;
  background-color: #ffffff; /* ボタンの色 */
  margin: 10px 0;
  transition: 0.4s;
}

@media screen and (max-width:768px) {
  .hamburger {
    width: 40px;
    top: 35px;
    right: 32px;
  }

  .online-txt {
    font-size: 14px;
  }

  .online-bar {
    top: 20px;
    right: 0px;
}

}

/* メニューのスタイル */
.menu {
  position: fixed;
  top: 0;
  right: 0;
  height: 800px;
  background-color: #CDCED2;
  opacity: 0; 
  pointer-events: none; 
  transition: opacity 0.5s ease; /* フェードインのアニメーション */
  padding: 20px;
  box-sizing: border-box;
  z-index: 5;
  font-size: 32px;
  text-align: center;
  line-height: 55px;
}

.menu-buteerfly {
  margin-top: 66px;
  width: 70px;
}

.menu a img {
  width: 50px;
}

.menu p {
  font-size: 32px;
  text-align: center;
}

.menu-txt {
  margin-top: 20px;
}

.menu-txt a {
  color: #000000;
}

.menu-txt a:hover {
  color: #646774;
}

.menu-border {
  margin: 40px 25px 40px 25px;
  border:solid #000000 0.8px;
  width: 360px;
}


/* メニューが開いたとき */

.menu.open {
  opacity: 0.9; 
  pointer-events: auto; 
}

/* バツ印に変わるハンバーガーボタン */
.hamburger.active span:nth-child(1) {
  transform: rotate(45deg) translate(12px, 12px);
}

.hamburger.active span:nth-child(2) {
  opacity: 0; /* 真ん中の線を透明にする */
}

.hamburger.active span:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}



/* mainvisual */


.mainvisual {
  position: relative;
  width: 100%;
  height: 100%;
  background-image: url(images/mainvisual.png);
  background-size: cover;
  background-position: center;
  perspective: 1000px;
}

.mainvisual p {
  color: #E5CE73;
  font-size: 20px;
  letter-spacing: 2px;
}

.menu span {
  display: block;
  font-size: 32px;
  color: #000000;
  line-height: 1;
}

h1 {
    font-family: "Kaisei Tokumin", serif;
    font-size: clamp(16px, 2.6vw, 38px);
    font-weight: 60;
    color: white;
    text-align: center;
    line-height: clamp(30px, 2.6vw, 55px);
    position: absolute;
    top: 62%;
    left: 50%;
    transform: translate(-50%,-50%);
    white-space: nowrap;
}

.mainvisual h2 {
    font-size: clamp(9px, 1.25vw, 18px);
    color: white;
    text-align: center;
    line-height: clamp(20px, 2.6vw, 36px);
    position: absolute;
    top: 77%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.top-logo {
  position: absolute;
  width: calc(250 / 1440 * 100%);
  top: calc(200 / 1600 * 100%);
  left: calc(0 / 1440 * 100%);
  right: calc(0 / 1440 * 100%);
  margin: 0 auto;
}


@media screen and (max-width:768px) {


  .menu {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  z-index: 5;
  font-size: 16px;
  text-align: center;
  line-height: 33px;
}
  .menu span {
    font-size: 14px;
  }

  menu p {
    font-size: 14px;
  }
  .menu-border {
    width: 300px;
  }

}

.brbr3 {
  display: none;
}

.main-img-box {
  position: relative;
  width: 100%;
  height: 100%;
  aspect-ratio: 1440 / 1600;
}

/* ma-img02 */
.frame09 {
  position: absolute;
  top: calc(380 / 1600 * 100%);
  width: calc(280 / 1440 * 100%);
  right: calc(100 / 1440 * 100%);
}

.ma-img04 {
  position: absolute;
  bottom: calc(530 / 1600 * 100%);
  width: calc(220 / 1440 * 100%);
  right: calc(110 / 1440 * 100%);
}

.ma-img01, .ma-img02, .ma-img03, .ma-img06, 
.ma-img08, .ma-img10, .ma-img14, .ma-img15, .ma-img21 {
  height: 100%;
  width: 100%
}

/* ma-img01 */
.frame01 {
  position: absolute;
  top: calc(140 / 1600 * 100%);
  width: calc(300 / 1440 * 100%);
  right: calc(236 / 1440 * 100%);
}

/* ma-img06 */
.frame02 {
  position: absolute;
  top: calc(510 / 1600 * 100%);
  width: calc(315 / 1440 * 100%);
  left: calc(370 / 1440 * 100%);
}

/* ma-img08 */
.frame03 {
  position: absolute;
  width: calc(239 / 1440 * 100%);
  top: calc(80 / 1600 * 100%);
  left: calc(138 / 1440 * 100%);
}

/* ma-img03 */
.frame07 {
  position: absolute;
  width: calc(104 / 1440 * 100%);
  top: calc(128 / 1600 * 100%);
  left: calc(420 / 1440 * 100%);
}

/* ma-img14 */
.frame08 {
  position: absolute;
  width: calc(240 / 1440 * 100%);
  top: calc(650 / 1600 * 100%);
  left: calc(90 / 1440 * 100%);
}

/* ma-img15 */
.frame05 {
  position: absolute;
  width: calc(130 / 1440 * 100%);
  top: calc(350 / 1600 * 100%);
  left: calc(300 / 1440 * 100%);
}

.ma-img09 {
  position: absolute;
  width: calc(185 / 1440 * 100%);
  bottom: calc(418 / 1600 * 100%);
  left: calc(200 / 1440 * 100%);
}

/* ma-img10 */
.frame04 {
  position: absolute;
  width: calc(200 / 1440 * 100%);
  top: calc(20 / 1600 * 100%);
  right: calc(350 / 1440 * 100%);
}

.ma-img11 {
  position: absolute;
  width: calc(200 / 1440 * 100%);
  bottom: calc(70 / 1600 * 100%);
  right: calc(0 / 1440 * 100%);
}

.ma-img12 {
  position: absolute;
  width: calc(200 / 1440 * 100%);
  bottom: calc(20 / 1600 * 100%);
  left: calc(-40 / 1440 * 100%);
}

.ma-img13 {
  position: absolute;
  bottom: calc(300/ 1600* 100%);
  width: calc(173/ 1440 * 100%);
  right: calc(68 / 1440 * 100%);
}

.ma-img19 {
  position: absolute;
  width: calc(160 / 1440 * 100%);
  bottom: calc(200 / 1600 * 100%);
  left: calc(180 / 1440 * 100%);
}

/* ma-img21 */
.frame06 {
  position: absolute;
  width: calc(130 / 1440 * 100%);
  top: calc(400 / 1600 * 100%);
  right: calc(420 / 1440 * 100%);
}




@media screen and (max-width:768px) {

  .brbr3 {
  display: block;
}

  .online-bar img {
  margin: 7px 0 0 10px;
  width: 52px;
}

  .mainvisual p {
  font-size: 16px;
  font-family: "EB-Garamond", serif;
}

.main-img-box {
  position: relative;
  width: 100%;
  height: 100%;
  aspect-ratio: 375 / 600;
}

.frame09 {
  position: absolute;
  top: calc(567 / 1600 * 100%);
  width: calc(258 / 1440 * 100%);
  right: calc(20 / 1440 * 100%);
  display: none;
}

.ma-img04 {
  position: absolute;
  bottom: calc(200 / 1600 * 100%);
  width: calc(260 / 1440 * 100%);
  right: calc(30 / 1440 * 100%);
}

.ma-img01, .ma-img02, .ma-img03, .ma-img06, 
.ma-img08, .ma-img10, .ma-img14, .ma-img15, .ma-img21 {
  height: 100%;
  width: 100%
}

.top-logo {
  position: absolute;
  width: calc(400 / 1440 * 100%);
  top: calc(160 / 1600 * 100%);
  left: calc(0 / 1440 * 100%);
  right: calc(0 / 1440 * 100%);
  margin: 0 auto;
}

/* ma-img01 */
.frame01 {
  position: absolute;
  top: calc(140 / 1600 * 100%);
  width: calc(380 / 1440 * 100%);
  right: calc(140 / 1440 * 100%);
}

/* ma-img06 */
.frame02 {
  position: absolute;
  top: calc(500 / 1600 * 100%);
  width: calc(460 / 1440 * 100%);
  left: calc(260 / 1440 * 100%);
}

/* ma-img08 */
.frame03 {
  position: absolute;
  width: calc(380 / 1440 * 100%);
  top: calc(40 / 1600 * 100%);
  left: calc(50 / 1440 * 100%);
}

/* ma-img03 */
.frame07 {
  position: absolute;
  width: calc(180 / 1440 * 100%);
  top: calc(430 / 1600 * 100%);
  left: calc(1220 / 1440 * 100%);
}

/* ma-img14 */
.frame08 {
  position: absolute;
  width: calc(280 / 1440 * 100%);
  top: calc(780 / 1600 * 100%);
  left: calc(55 / 1440 * 100%);
}

/* ma-img15 */
.frame05 {
  position: absolute;
  width: calc(180 / 1440 * 100%);
  top: calc(345 / 1600 * 100%);
  left: calc(300 / 1440 * 100%);

}

.ma-img09 {
  position: absolute;
  width: calc(185 / 1440 * 100%);
  bottom: calc(418 / 1600 * 100%);
  left: calc(200 / 1440 * 100%);
  display: none;
}

/* ma-img10 */
.frame04 {
  position: absolute;
  width: calc(180 / 1440 * 100%);
  top: calc(20 / 1600 * 100%);
  right: calc(350 / 1440 * 100%);
}

.ma-img11 {
  position: absolute;
  width: calc(200 / 1440 * 100%);
  bottom: calc(70 / 1600 * 100%);
  right: calc(0 / 1440 * 100%);
  display: none;
}

.ma-img12 {
  position: absolute;
  width: calc(200 / 1440 * 100%);
  bottom: calc(20 / 1600 * 100%);
  left: calc(-40 / 1440 * 100%);
  display: none;
}

.ma-img13 {
  position: absolute;
  bottom: calc(300/ 1600* 100%);
  width: calc(173/ 1440 * 100%);
  right: calc(68 / 1440 * 100%);
  display: none;
}

.ma-img19 {
  position: absolute;
  width: calc(180 / 1440 * 100%);
  bottom: calc(400 / 1600 * 100%);
  left: calc(100 / 1440 * 100%);
}

/* ma-img21 */
.frame06 {
  position: absolute;
  width: calc(130 / 1440 * 100%);
  top: calc(400 / 1600 * 100%);
  right: calc(340 / 1440 * 100%);
}
}


.gaku01 {
  position: absolute;
  top: calc(380 / 1600* 100%);
  width: calc(220/ 1440 * 100%);
  left: calc(35 / 1440 * 100%);
}

.gaku02 {
  position: absolute;
  width: calc(110/ 1440 * 100%);
  top: calc(120 / 1600* 100%);
  right: calc(110/ 1440 * 100%);
}

.gaku03 {
  position: absolute;
  width: calc(122/ 1440 * 100%);
  bottom: calc(0 / 1600* 100%);
  left: calc(240/ 1440 * 100%);
}

.gaku04 {
  position: absolute;
  width: calc(150/ 1440 * 100%);
  bottom: calc(10 / 1600* 100%);
  right: calc(200/ 1440 * 100%);
}

.gaku06 {
  position: absolute;
  width: calc(85/ 1440 * 100%);
  top: calc(300 / 1600* 100%);
  right: calc(0/ 1440 * 100%);
}

.gaku07 {
  position: absolute;
  top: calc(120 / 1600* 100%);
  width: calc(96/ 1440 * 100%);
  left: calc(-10/ 1440 * 100%);
}

.gaku09 {
  position: absolute;
  bottom: calc(580 / 1600* 100%);
  width: calc(80/ 1440 * 100%);
  right: calc(0 / 1440 * 100%);
}

.gaku10 {
  position: absolute;
  top: calc(310 / 1600* 100%);
  width: calc(88/ 1440 * 100%);
  left: calc(450 / 1440 * 100%);
}

.gaku11 {
  position: absolute;
  width: calc(90/ 1440 * 100%);
  top: calc(650 / 1600* 100%);
  right: calc(200/ 1440 * 100%);
}

.gaku12 {
  position: absolute;
  width: calc(132/ 1440 * 100%);
  bottom: calc(343 / 1600* 100%);
  left: calc(0/ 1440 * 100%);
}

.gaku14 {
  position: absolute;
  top: calc(0 / 1600* 100%);
  width: calc(200/ 1440 * 100%);
  left: calc(148 / 1440 * 100%);
}

.gaku16 {
  position: absolute;
  width: calc(110/ 1440 * 100%);
  bottom: calc(200 / 1600* 100%);
  right: calc(260/ 1440 * 100%);
}

.gaku17 {
  position: absolute;
  top: calc(0/ 1600 * 100%);
  width: calc(320/ 1440 * 100%);
  left: calc(470 / 1440 * 100%);
}

.gaku18 {
  position: absolute;
  width: calc(320/ 1440 * 100%);
  top: calc(560 / 1600* 100%);
  right: calc(390/ 1440 * 100%);
}

.gaku19 {
  position: absolute;
  width: calc(150/ 1440 * 100%);
  bottom: calc(0 / 1600* 100%);
  right: calc(450/ 1440 * 100%);
}

.gaku20 {
  position: absolute;
  width: calc(280/ 1440 * 100%);
  bottom: calc(0 / 1600* 100%);
  left: calc(450/ 1440 * 100%);
}

.frame {
  opacity: 0;
  transform: scale(0.8) translateZ(-800px);
  filter: blur(8px);
  transition: opacity 1.5s ease, orm 1.5s ease, filter 1.5s ease;
  transform-style: preserve-3d;
}

.frame.show {
  opacity: 1;
  transform: scale(1) translateZ(0);
  filter: blur(0);
}


@media screen and (max-width:768px) {

.gaku01 {
  position: absolute;
  top: calc(440 / 1600* 100%);
  width: calc(220/ 1440 * 100%);
  left: calc(35 / 1440 * 100%);
  display: none;
}

.gaku02 {
  position: absolute;
  width: calc(150/ 1440 * 100%);
  top: calc(400 / 1600* 100%);
  right: calc(1230/ 1440 * 100%);
}

.gaku03 {
  position: absolute;
  width: calc(160/ 1440 * 100%);
  bottom: calc(0 / 1600* 100%);
  left: calc(200/ 1440 * 100%);
}

.gaku04 {
  position: absolute;
  width: calc(200/ 1440 * 100%);
  bottom: calc(20 / 1600* 100%);
  right: calc(180/ 1440 * 100%);

}

.gaku06 {
  position: absolute;
  width: calc(90/ 1440 * 100%);
  top: calc(160 / 1600* 100%);
  right: calc(0/ 1440 * 100%);

}

.gaku07 {
  position: absolute;
  top: calc(620 / 1600* 100%);
  width: calc(115/ 1440 * 100%);
  left: calc(-10/ 1440 * 100%);
}

.gaku09 {
  position: absolute;
  bottom: calc(580 / 1600* 100%);
  width: calc(120/ 1440 * 100%);
  right: calc(0 / 1440 * 100%);
}

.gaku10 {
  position: absolute;
  top: calc(1400 / 1600* 100%);
  width: calc(110/ 1440 * 100%);
  left: calc(50 / 1440 * 100%);
  display: none;
}

.gaku11 {
  position: absolute;
  width: calc(90/ 1440 * 100%);
  top: calc(420 / 1600* 100%);
  right: calc(255/ 1440 * 100%);
  display: none;
}

.gaku12 {
  position: absolute;
  width: calc(132/ 1440 * 100%);
  bottom: calc(143 / 1600* 100%);
  left: calc(0/ 1440 * 100%);
}

.gaku14 {
  position: absolute;
  top: calc(0 / 1600* 100%);
  width: calc(250/ 1440 * 100%);
  left: calc(148 / 1440 * 100%);
}

.gaku16 {
  position: absolute;
  width: calc(110/ 1440 * 100%);
  bottom: calc(200 / 1600* 100%);
  right: calc(260/ 1440 * 100%);
  display: none;
}

.gaku17 {
  position: absolute;
  top: calc(0/ 1600 * 100%);
  width: calc(380/ 1440 * 100%);
  left: calc(470 / 1440 * 100%);
}

.gaku18 {
  position: absolute;
  width: calc(420/ 1440 * 100%);
  top: calc(550 / 1600* 100%);
  right: calc(250/ 1440 * 100%);
}

.gaku19 {
  position: absolute;
  width: calc(160/ 1440 * 100%);
  bottom: calc(0 / 1600* 100%);
  right: calc(450/ 1440 * 100%);
}

.gaku20 {
  position: absolute;
  width: calc(290/ 1440 * 100%);
  bottom: calc(0 / 1600* 100%);
  left: calc(450/ 1440 * 100%);
}

}


/* abillity */

.abillity {
  width: 100%;
  background-color: #222327;
  display: inline-block;
}

.abillity-logo {
  width: 133px;
  margin: auto;
  display: block;
  padding-top: 100px;
}

.abillity h2 {
  font-size: 32px;
  color: white;
  padding-top: 45px;
  padding-bottom: 34px;
  text-align: center;
}

.logo-image {
  width: 100%;
}

.box-container {
  display: flex;
  justify-content: center;
}


.box1 {
    height: 41px;
    font-weight: bold;
    border: solid 1px white;
    width: 240px;
    margin: 10px;
}

.box2 {
    height: 41px;
    font-weight: bold;
    border: solid 1px white;
    width: 240px;
    margin: 10px;
}

.box3 {
    height: 41px;
    font-weight: bold;
    border: solid 1px white;
    width: 240px;
    margin: 10px;
}

.box4 {
    height: 41px;
    font-weight: bold;
    border: solid 1px white;
    width: 240px;
    margin: 10px;
}

.abillity h3 {
    font-size: 21px;
    color: white;
    text-align: center;
    line-height: 38px;
}

.abillity-txt {
  font-size: 16px;
  color: white;
  width: 100%;
  line-height: 32px;
  text-align: center;
  margin: auto;
  padding-top: 45px;
}

.brbr2 {
  display: none;
}

@media screen and (max-width:768px) {

  .abillity h2 {
  font-size: 20px;
  padding-top: 5px;
}

  .abillity h3 {
  font-size: 16px;
}
  .abillity-logo {
    width: 60px;
    padding: 38px 0 15px 0;
}

  .abillity-txt {
    font-size: 14px;
    padding-top: 24px;
    line-height: 26px;
  }

  .box-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
   .brbr2 {
     display: block;
}

}

/* features */


.features {
  width: 100%;
  background-image: linear-gradient(#222327 12%, #3a3d49);
  padding-bottom: 100px;
}

.features-logo {
  width: 173px;
  margin: auto;
  display: block;
  padding-top: 100px;
  padding-bottom: 70px;
}

.features-container01 h2 {
  font-size: 32px;
  color: white;
  line-height: 48px;
  letter-spacing: 0.05em;
  text-align: left;
  margin-left: auto;
  padding-top: 10px;
  padding-bottom: 32px;
}

.txt01 {
  width: 558px;
  font-size: 18px;
  color: white;
  line-height: 32px;
  padding-bottom: 35px;
  font-weight: normal;
}

.txt02 {
  width: 558px;
  font-size: 16px;
  color: white;
  line-height: 32px;
  border: solid 1px white;
  padding: 17px;
  font-weight: normal;
  margin-bottom: 170px;
}

.features-container01 {
  display: flex;
  justify-content: space-around;
}

.features-container02 {
  display: flex;
  justify-content: space-around;
}

.features-container01 h5 {
  font-family: "Cormorant Garamond", serif;
  font-weight: 300;
  font-optical-sizing: auto;
  font-style: normal;
  font-size: 21px;
  color: #E5CE73;
  letter-spacing: 1px;
  margin-left: auto;
}

.features-txtbox01 {
  position: relative;
}

.features-txtbox01 h3 {
  position: absolute;
  bottom: 115px;
  left: 8px;
  padding: 0 10px;
  display: inline-block;
  margin-left: auto;
  z-index: 2;
  background-color: 	#2B2C33;
}


.features-container02 h5 {
  font-family: "Cormorant Garamond", serif;
  font-weight: 300;
  font-optical-sizing: auto;
  font-style: normal;
  font-size: 21px;
  color: #E5CE73;
  padding-bottom: 10px;
}

.features-container02 h2 {
  font-size: 32px;
  color: white;
  line-height: 48px;
  letter-spacing: 0.05em;
  padding-top: 0px;
  padding-bottom: 32px;
  text-align: left;
}

.txt03 {
  width: 620px;
  font-size: 16px;
  color: white;
  line-height: 32px;
  padding-top: 0px;
  padding-bottom: 35px;
  font-weight: normal;
}

.txt04 {
  width: 595px;
  font-size: 14px;
  color: white;
  line-height: 32px;
  border: solid 1px white;
  padding: 17px;
  font-weight: normal;
  margin-bottom: 45px;
}


.box02 {
  position: relative;
}

.features-txtbox02 {
  position: relative;
}

.features-txtbox02 h3 {
  position: absolute;
  top: -20px;
  left: 24px;
  z-index: 2;
  background-color: #353741;
}

.features-txtbox02 img {
  width: 253px;
  position: absolute;
  bottom: -158px;
  right: -8px;
}

.features-image01 {
  width: 409px;
}
.features-image02 {
  width: 409px;
}

 html,body {
  height: 100%;
}

.request-btnbox {
  text-align: end;
}

.request-btn {
  width: 250px;
}

.features-txtcontainer span{
  text-align: center;
}

@media screen and (max-width:1179px) {
  .features-container01 {
  flex-direction: column-reverse;
  align-items: center;
}
  .features-container02 {
  flex-direction: column-reverse;
  align-items: center;
  flex-direction: column;
  }

}

@media screen and (max-width:768px) {

  .features {
    margin-bottom: 0;
  }
  
 .features-container01 h5 {
  font-size: 14px;
}

.features-container01 h2 {
  font-size: 20px;
  letter-spacing: 0.09em;
  line-height: 32px;
  padding-bottom: 20px;
  padding-top: 5px;
}

  .features-txtbox01 h3 {
    bottom: 122px;
  }

  .features-container02 h5 {
    font-size: 14px;
    padding-bottom: 0;
  }

  .features-container02 h2 {
    font-size: 20px;
    letter-spacing: 0.09em;
    padding: 0;
  }

  .features-container02 h3 {
      left: 17px;
  }
    
  .features-logo {
    width: 76px;
    padding: 36px 0 40px 0;
  }

  .txt01, .txt02 {
  width: 100%;
  font-size: 14px;
  line-height: 26px;
}
  .txt01 {
  width: 100%;
  }

  .txt02 {
  margin-bottom: 52px;
  width: 90%;
  }

  .txt03, .txt04 {
  font-size: 14px;
  width: 90%;
  line-height: 26px;
}

  .txt03 {
  width: 100%;
}

  .features-container02 {
  display: block;
}

  .features-txtbox02 img {
  position: absolute;
  bottom: -110px;
  right: 30px;
}

  .features-minicontainer {
    width: 100%;
}

  .features-image01 {
  width: 100%;
  margin-bottom: 30px;
}
  .features-image02 {
  width: 100%;
  margin-bottom: 30px;
}

.request-btnbox {
  text-align: center;
}

}


/* gallery */


.gallery-logo {
  width: 156px;
  margin: auto;
  display: block;
  padding-top: 100px;
  padding-bottom: 70px;
}

.gallery-minicontainer01 {
  display: flex;
  justify-content: space-between;
  margin: 0 30px 125px 30px;
}

.gallery-minicontainer02 {
  display: flex;
  justify-content: space-between;
  margin: 0 30px 125px 30px;
}

.gallery-minicontainer03 {
  display: flex;
  justify-content: space-between;
  margin: 0 30px 125px 30px;
}

@media screen and (max-width:1179px) {
  .gallery-minicontainer01, .gallery-minicontainer02 {
    display: block;
    margin-bottom: 0px;
  }

  .gallery-minicontainer03 {
    display: block;
    margin-bottom: 0px;
  }

 .gallery-txtbox {
    text-align: center;
 }
 .gallery-border {
    text-align: center;
    display: inline-block;
  }
  .features-image01, .features-image02 {
    margin-bottom: 30px;
}
}

@media screen and (max-width:768px) {

  .gallery-logo {
    width: 68px;
    padding: 38px 0 10px 0;
  }

  .gallery-minicontainer01 {
    display: block;
  }

  .gallery-minicontainer02 {
    display: block;
  }

  .gallery-minicontainer03 {
    display: block;
  }

  .gallery-minicontainer01 {
    margin: auto;
  }

  .gallery-minicontainer02 {
    margin: auto;
  }

  .gallery-minicontainer03 {
    margin: auto;
  }

}


/* ラジオボタン非表示 */
input[type="radio"] {
  display: none;
}

/* 各セット共通 */
.set {
  margin-bottom: 20px;
}

/* メイン画像 */
.set .main {
  position: relative;
  width: 300px;
  height: 300px;
  margin: auto;
}

.set .main img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 70%;
  height: auto;
  max-width: 100%;
  transition: opacity 0.8s ease-in-out;
}


.set .main .img-front {
  opacity: 1; /* 初期表示 */
}



/* ボタン */
.set .btns {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.set .btns label {
  font-family: "Cormorant Garamond", serif;
  font-weight: 300;
  font-optical-sizing: auto;
  font-style: normal;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 14px;
  color: #ffffff;
  border: solid 1px #ffffff;
  transition: background 0.3s;
  display: inline-block;
  text-align: center;
}

.set .btns label:nth-child(2) {
  background: #222327;
}

.set .btns label:hover {
  opacity: 0.8;
}

/* 画像切り替え（セット内のラジオボタンに応じて） */
.set input#front1:checked ~ .main .img-front,
.set input#front2:checked ~ .main .img-front,
.set input#front3:checked ~ .main .img-front,
.set input#front4:checked ~ .main .img-front,
.set input#front5:checked ~ .main .img-front,
.set input#front6:checked ~ .main .img-front,
.set input#front7:checked ~ .main .img-front,
.set input#front8:checked ~ .main .img-front,
.set input#front9:checked ~ .main .img-front {
  opacity: 1;
}

.set input#front1:checked ~ .main .img-side,
.set input#front2:checked ~ .main .img-side,
.set input#front3:checked ~ .main .img-side,
.set input#front4:checked ~ .main .img-side,
.set input#front5:checked ~ .main .img-side,
.set input#front6:checked ~ .main .img-side,
.set input#front7:checked ~ .main .img-side,
.set input#front8:checked ~ .main .img-side,
.set input#front9:checked ~ .main .img-side {
  opacity: 0;
}

.set input#side1:checked ~ .main .img-front,
.set input#side2:checked ~ .main .img-front,
.set input#side3:checked ~ .main .img-front,
.set input#side4:checked ~ .main .img-front,
.set input#side5:checked ~ .main .img-front,
.set input#side6:checked ~ .main .img-front,
.set input#side7:checked ~ .main .img-front,
.set input#side8:checked ~ .main .img-front,
.set input#side9:checked ~ .main .img-front {
  opacity: 0;
}

.set input#side1:checked ~ .main .img-side,
.set input#side2:checked ~ .main .img-side,
.set input#side3:checked ~ .main .img-side,
.set input#side4:checked ~ .main .img-side,
.set input#side5:checked ~ .main .img-side,
.set input#side6:checked ~ .main .img-side,
.set input#side7:checked ~ .main .img-side,
.set input#side8:checked ~ .main .img-side,
.set input#side9:checked ~ .main .img-side {
  opacity: 1;
}



/* gallary img */


.gallery-container ul{
  margin-bottom: 20px;
}

.gallery-container li {
  color: white;
}

.gallery-minicontainer01 li,.gallery-minicontainer02 li,.gallery-minicontainer03 li {
  margin: 8px 0 8px 0;
}

.gallery-minicontainer01 p,.gallery-minicontainer02 p,.gallery-minicontainer03 p {
  color: #ffffff;
  font-size: 16px;
}

.gallery-border {
  width: 317px;
  color: #ffffff;
  border: solid 0.5px ;
}

/* gallery button */

.buybutton00 {
  position: relative;
  width: 379px;
  font-size: 20px;
  padding: 15px 0;
  margin: auto;
  margin-bottom: 20px;
  text-align: center;
  border: solid 1px ;
  background-color: #222327;
  color: #E5CE73;
  transition: color 0.3s ease; /* ホバー時の色の変化を滑らかにする */
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all  0.3s ease;
}

.buybutton01 {
  position: relative;
  width: 379px;
  font-size: 20px;
  padding: 15px 0;
  margin: auto;
  margin-bottom: 20px;
  text-align: center;
  border: solid 1px ;
  background-color: #222327;
  color: #E5CE73;
  transition: color 0.3s ease; /* ホバー時の色の変化を滑らかにする */
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all  0.3s ease;
}

.buybutton00:hover, .buybutton01:hover {
  background-color: #E5CE73; /* ホバー時の色 */
  }

.buybutton00 a, .buybutton01 a {
  color: #ffffff;
}

.sns-button01 {
  padding: 26px 0 100px 0;
  text-align: center;
}

.sns-button01 a:hover {
  transform: scale(1.2);
}

.sns-button01 a {
  display: inline-block; 
  transition: transform 0.2s ease; 
}

.sns-button01 p {
  font-size: 20px;
  color: #ffffff;
  margin: 40px 0 25px 0;
}

@media screen and (max-width:768px) {

  .buybutton00 {
  width: 312px;
  font-size: 14px;
  margin-top: 40px;
  }

  .buybutton01 {
  width: 312px;
  font-size: 14px;
  }

  .sns-button01 {
  padding-bottom: 38px;
}

  .sns-button01 p {
    margin-bottom: 38px;
  }

  .sns-button01 p {
  font-size: 14px;
  margin-top: 0;
  }
    
  .gallery-container ul{
  display: none;
  margin-bottom: 0;
}

}


/* steps&price */

.steps-price {
  width: 100%;
  display: block;
}

.stepsprice-logo {
  width: 230px;
  margin: auto;
  display: block;
  padding-top: 100px;
  padding-bottom: 70px;
}

.stepsprice-container {
  width: 100%;
  color: #ffffff;
  border: solid 1px ;
  margin-bottom: 60px;
}

.stepsprice-container h3 {
  font-family: "Cormorant Garamond", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 20px;
  letter-spacing: 3px;
  color: #E5CE73;
  margin: auto;
  padding: 45px 0 10px 0;
}

.stepsprice-container a {
  font-size: 14px;
}

.stepsprice-container h4 {
  font-size: 24px;
  color: #ffffff;
  padding: 40px 0 43px 0;
  text-align: center;
}

.stepscontainer01 {
  width: 984px;
  background-color: #4C4F5A;
  display: block;
  margin: auto;
}

.stepscontainer-mini01 {
  width: 609px;
  display: flex;
  justify-content: space-between;
  margin: auto;
  padding-bottom: 64px;
}

.circle01,.circle02,.circle03,.circle04 {
  width: 135px;
  height: 135px;
  border-radius: 50%;
  background-color: #1c1c1c;
}

.circle01 img {
  width: 45px;
  display: block;
  margin: auto;
  padding: 30px 0;
}

.circle02 img {
  width: 100px;
  display: block;
  margin: auto;
  padding: 30px 0;
}

.circle03 img {
  width: 85px;
  display: block;
  margin: auto;
  padding: 35px 0;
}

.circle04 img {
  width: 45px;
  display: block;
  margin: auto;
  padding: 25px 0;
}

.yazirusi {
  width: 53px;
  display: block;
  margin: auto;
  padding: 37px 0;
}

.stepscontainer02 {
  width: 984px;
  background-color: #4C4F5A;
  display: block;
  margin: auto;
}

.stepscontainer-mini02 {
  width: 752px;
  display: flex;
  justify-content: space-between;
  margin: auto;
}

.stepscontainer-mini02 img {
  width: 198px;
}

.stepscontainer-mini02 p {
  font-family: "Cormorant Garamond", serif;
  font-optical-sizing: auto;
  font-weight: weight;
  font-style: normal;
  font-size: 22px;
  text-align: center;
  margin-top: 11px;
  margin-bottom: 70px;
}

.stepscontainer-mini03, .stepscontainer-mini04 {
  display: block;
  margin: auto;
  width: 984px;
  background-color: #4C4F5A;
}
 
.stepscontainer-mini03 p, .stepscontainer-mini04 p {
  font-size: 24px;
  text-align: center;
  margin: 23px 0;
}

.stepscontainer-mini03 a {
  font-size: 10px;
}

.stepscontainer03 {
  width: 984px;
  background-color: #A4A4A4;
  display: block;
  margin: auto;
  margin-bottom: 117px;
}

.square01 {
  width: 180px;
  height: 45px;
  background-color: #E5CE73;
}

.square01 p,.square02 p,.square03 p,.square04 p {
  color: #ffffff;
  text-align: center;
  justify-content: center;
  line-height: 45px;
}

.square02,.square03,.square04 {
  width: 165px;
  height: 45px;
  background-color: #4C4F5A;
}

.stepscontainer-mini05 {
  width: 766px;
  display: flex;
  margin: auto;
  align-items: center;
  justify-content: space-between;
  padding: 47px 0 22px 0;
}

.stepscontainer-mini05 p {
  font-size: 16px;
}

.stepscontainer-mini06 {
  width: 766px;
  display: block;
  margin: auto;
  padding-bottom: 34px;
}

.stepscontainer-mini06 p {
  font-size: 14px;
  line-height: 25px;
}

.sp-endtxt {
  color: #ffffff;
  font-size: 18px;
  line-height: 28px;
  text-align: center;
  margin-bottom: 100px;
}

.hp-btn {
  color: #ffffff;
  text-decoration: underline;
}

@media screen and (max-width:768px) {

  .square01 {
    width: 165px;
    margin-bottom: 20px;
  }

  .yazirusi {
    width: 30px;
    padding: 20px 0;
  }

  .sp-endtxt {
    font-size: 14px;
    margin-bottom: 38px;
    text-align: start;
    line-height: 26px;
  }

  .stepscontainer-mini02 p {
    font-size: 14px;
    margin-bottom: 40px;
  }

  .stepsprice-logo {
    width: 110px;
    padding: 38px 0 10px 0;
  }

  .stepsprice-container h3 {
  font-size: 14px;
  padding: 5px 0 10px 0;
}

  .stepsprice-container h4 {
  font-size: 16px;
  padding: 30px 0;
}

  .stepsprice-container a  {
  font-size: 12px;
}

  .circle01, .circle02, .circle03, .circle04 {
    width: 85px;
    height: 85px;
    border-radius: 50%;
    background-color: #1c1c1c;
    margin: 10px;
}

  .circle01 img, .circle04 img {
    width: 40%;
    padding: 14px 0;
  }

  .circle02 img {
    width: 85%;
    padding: 16px 0;
  }

  .circle03 img {
    width: 70%;
    padding: 22px 0;
  }

}

@media screen and (max-width:1179px) {
  .stepsprice-container {
    margin: auto;
    width: 92%;
    margin-bottom: 26px;
  }
  .stepscontainer01, .stepscontainer02, .stepscontainer03 {
    width: 92%;
  }

  .stepscontainer-mini02 {
    display: block;
    text-align: center;
    width: 80%;
    height: 900px;
  }

  .buybutton00 {
    margin-top: 50px;
  }

  .stepscontainer-mini03, .stepscontainer-mini04 {
    width: 92%;
  }

  .stepscontainer-mini05 {
    width: 90%;
    flex-wrap: wrap;
    justify-content: center;
  }

  .stepscontainer-mini06 {
    width: 100%;
    text-align: center;
  }

  .break {
  flex-basis: 100%; /* 幅を100%にする */
  height: 0; /* 高さをなくす */
  }

  .wa {
    display: none;
  }
  .square01 {
    margin-bottom: 20px;
  }
  .plus {
    margin: 0 10px;
  }

}


/* steps&price button*/

.buybutton02 {
  position: relative;
  width: 379px;
  font-size: 20px;
  padding: 15px 0;
  margin: auto;
  margin-bottom: 48px;
  text-align: center;
  border: solid 1px ;
  background-color: #3A3D49;
  color: #E5CE73;
  transition: color 0.3s ease; /* ホバー時の色の変化を滑らかにする */
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all  0.3s ease;
}

.buybutton02:hover {
  background-color: #E5CE73; /* ホバー時の色 */
  }

.buybutton02 a {
  color: #ffffff;
}

@media screen and (max-width:768px) {

  .buybutton02 {
    width: 314px;
    margin-bottom: 28px;
  }

.stepscontainer-mini05 p {
  text-align: center;
  margin: 10px;
}

.wa {
  display: none;
}

.stepsprice-container {
  width: 100%;
  border: none;
}
.stepscontainer-mini01  {
  width: 68%;
  flex-wrap: wrap;
  padding-bottom: 30px;
}

.stepscontainer-mini02 {
  display: block;
  width: 100%;
  text-align: center;
  padding-bottom: 10px;
}

.stepscontainer-mini05 {
  display: block;
  width: 50%;
  padding: 20px 47px;
}

.stepscontainer-mini06 {
  width: 80%;
}

.stepscontainer01, .stepscontainer02, .stepscontainer03,
.stepscontainer-mini03, .stepscontainer-mini04 {
  width: 100%;
}

.stepscontainer03 {
  margin-bottom: 28px;
}

  .square01 p {
    color: #000000;
  }
}


/* Q&A */

.QA-logo {
  width: 76px;
  margin: auto;
  display: block;
  padding-top: 100px;
  padding-bottom: 70px;
}

.qanda {
  display: block;
  background-image: linear-gradient(#222327 12%, #3a3d49);
  padding-bottom: 100px;
}

.QA01 {
  display: block;
  width: 779px;
  border: 1px solid #ffffff;
  margin: auto;
  margin-bottom: 25px;
}

.QA01 ul {
  display: flex;
  margin: 40px 50px;
  align-items: center;
}

.QA01 p {
  color: #ffffff;
  font-size: 16px;
  line-height: 30px;
}

.QA01 img {
  width: 47px;
  margin-right: 30px;
}

@media screen and (max-width:768px) {

  .qanda {
  padding-bottom: 38px;
}

  .QA01 ul {
  margin: 30px 30px;
}

  .QA01 p {
    font-size: 14px;
  }

  .QA-logo {
    width: 45px;
    padding: 38px 0 15px;
  }

  .QA01 {
  width: 100%;
}

.QA01 img {
  width: 30px;
}
}

/* OWNER */

.owner-img img{
  width: 243px;
}
.owner-img {
  margin: auto;
}

.owner-logo {
  width: 130px;
  margin: auto;
  display: block;
  padding-top: 100px;
  padding-bottom: 70px;
}


.owner-container {
  display: flex;
  justify-content: space-between;
  border: 1px solid #ffffff;
  align-items: center;
  padding: 0 100px;
  margin-bottom: 100px;
}

.owner-name {
  font-size: 20px;
  font-weight: bold;
  margin: 97px 0 21px 0;
  text-align: center; 
}

.owner-txt  {
  font-size: 16px;
  line-height: 28px;
  margin: 21px 0 88px 65px;
}

.owner-container ul {
  color: #ffffff;
  font-size: 16px;
}

#access {
  display: block;
  background-color: #222327;
}

.access-logo {
  width: 128px;
  margin: auto;
  display: block;
  padding-top: 100px;
  padding-bottom: 70px;
}

iframe[src*="www.google.com/maps/embed"] {
	aspect-ratio: 3 / 1;
	width: 100%;
	height: auto;
}

.map p {
  font-size: 16px;
  font-weight: 100;
  color: #ffffff;
  margin-top: 15px;
  margin-bottom: 50px;
}


.access-container {
  display: flex;
  justify-content: space-between;
  margin-bottom: 100px;
}

.access-container p {
  font-size: 16px;
  color: #ffffff;
  line-height: 34px;
}

.access-border {
  width: 100%;
  border: 1px solid #ffffff;
  margin: 25px 0 17px 0;
}

.access-txt01 p {
  font-size: 22px;
  color: #ffffff;
  line-height: 34px;
}

 .access-txt02 {
 margin-top: 20px;
 }

.access-txt02 a {
  font-size: 28px;
  color: #ffffff;
  line-height: 34px;
}

.access-txt02 p {
  font-size: 16px;
  color: #ffffff;
}

@media screen and (max-width:768px) {

  iframe[src*="www.google.com/maps/embed"] {
	aspect-ratio: 2 / 2;
	width: 100%;
}

  .map p {
    font-size: 14px;
  }

  .access-txt01 p {
    font-size: 16px;
  }

  .access-container {
    margin-bottom: 0;
  }

  .access-container p {
    font-size: 14px;
    line-height: 26px;
  }

  .access-txt02 a {
    font-size: 22px;
  }

  .access-txt02 p {
    font-size: 16px;
  }

  .access-logo {
    width: 60px;
    padding: 38px 0 15px;
  }

  .access-container {
  display: block;
}

  .access-border {
   width: 100%;
   border: 0.5px solid #ffffff;

}
.owner-container ul {
  margin: 24px;
}

}

@media screen and (max-width:1179px) {


.access-container {
  display: block;
  margin: 0;
  justify-content: flex-start;
}
.shop-img {
  display: block;
  margin: auto;
}

.access-txtbox {
  max-width: 500px;
  margin: auto;
  margin-bottom: 40px;
}

.map {
  text-align: center;
}

.owner-container {
  display: block;
  margin-left: 40px;
  margin-right: 40px;
}

.owner-img {
    text-align: center;
    margin-top: 65px;
  }
.owner-name {
    margin-top: 35px;
}
.owner-txt {
  margin-bottom: 30px;
}
}

.footer-logo {
  width: 217px;
  display: block;
  margin: auto;
  padding: 60px 0 55px 0;
}

.sns-button02 {
  padding: 100px 0 80px 0;
  text-align: center;
}

.sns-button01 img, .sns-button02 img {
  width: 40px;
}

.sns-inst {
  margin-right: 20px;
  justify-content: flex-start;
}

.sns-button02 a {
  display: inline-block; 
  transition: transform 0.2s ease; 
}

.sns-button02 a:hover {
  transform: scale(1.2);
}


.butterfly {
  --deg : 30deg;
  --speed : 1.2s;

  display: flex;
  width: 75px;
  overflow: hidden;
  perspective: 800px; /* 立体感 */
  filter:drop-shadow(10px 10px 5px rgba(0,0,0,0.5));
  position: fixed;
  bottom: 30px;
  right: 30px;
  animation: floating-y 1.8s ease-in-out infinite alternate-reverse;}
@keyframes floating-y {
  0% {
    transform: translateY(-10%);
  }
  100% {
    transform: translateY(10%);
  }
  
}

.butterfly a:hover {
  text-decoration: none;
  opacity: .5;
}

.butterfly img {
  width: 100%;
  height: auto;
  object-fit: cover;
  transition: all .3s ease;
  cursor: pointer;
}

.butterfly img:nth-of-type(1) {
  clip-path: inset(0 50% 0 0);
  transform-origin: center center;
  animation: flapLeft var(--speed) ease-in-out infinite;
}

.butterfly img:nth-of-type(2) {
  clip-path: inset(0 0 0 50%);
  margin-left: -100%;
  transform-origin: center center;
  animation: flapRight var(--speed) ease-in-out infinite;
}

@keyframes flapLeft {
  0%, 100% {
    transform: rotateY(0deg);
  }
  50% {
    transform: rotateY(calc(var(--deg) * -1)); /* 外側にひらく */
  }
}

@keyframes flapRight {
  0%, 100% {
    transform: rotateY(0deg);
  }
  50% {
    transform: rotateY(var(--deg)); /* 外側にひらく */
  }
}


.footer-txt {
  display: flex;
  font-size: 16px;
  color: #ffffff;
  justify-content: center;
}

.footer-txt a {
  color: #ffffff;
}

.footer-txt a:hover {
  color: #E5CE73;
}

.footer-b {
  border-right:1px solid #ffffff;
  padding:2px 10px;
}

.footer-b2 {
  margin-left: 10px;
}

.shop-img {
  width: 484px;
}

@media screen and (max-width:768px) {

  .owner-container {
    display: contents;
    width: 100%;
  }

  .owner-txt {
    margin: auto;
  }

.owner-containerbox {
  border: 1px solid #ffffff;
}
  .butterfly {
  width: 40px;
  position: fixed;
  bottom: 100px;
  right: 30px;
  }

  .footer-logo {
    width: 110px;
  }

  .sns-button02 {
    padding: 50px 20px;
  }

  .shop-img {
  width: 100%;
  margin: 15px 0;
}

  .footer-txt {
    font-size: 14px;
    display: block;
    border-top: 0.5px solid  #ffffff;
    padding-top: 15px;
    line-height: 32px;
    text-align: center;
  }

  .footer-b {
    border: none;
    padding:0;
  }

  .footer-b2 {
    margin-left: 0;
  }

}



/* topへ戻る */