@charset "utf-8";

.wrapper {
  background-color: rgb(231, 231, 231);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "游ゴシック";
  color: rgb(54, 54, 54);
}

.header {
  position: fixed;
  z-index: 2;
  width: 100%;
}

.gnav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 48px;
}

.gnav__nav {
  display: flex;
  align-items: center;
}

.gnav__ttl {
  margin-bottom: -20px;
  margin-right: 46px;
}

.gnav__list {
  list-style-type: none;
  padding-left: 30px;
  padding-top: 10px;
}

.gnav__link {
  font-weight: 600;
  text-decoration: none;
  letter-spacing: .1rem;
  color: #fff;
}

.gnav__after {
  padding-right: 46px;
}

.gnav__after::after {
  content: url(img/cart-white.svg);
  vertical-align: middle;
  padding-left: 10px;
}

.gnav__wrap {
  display: flex;
  align-items: center;
}

.gnav__btn {
  padding-top: 16px;
}

.mv {
  display: flex;
  justify-content: center;
  align-items: center;
  background: url(img/mv.jpg) center bottom / cover;
  height: 100vh;
  margin-bottom: 200px;
}

.mv__position {
  font-size: 75px;
  font-family: 'Allison', cursive;
  padding-left: 72px;
}

.sec1 {
  display: flex;
  justify-content: space-between;
  padding: 0 238px;
  margin-bottom: 200px;
}

.sec1__txtbox {
  width: 402px;
  font-size: 16px;
  line-height: 2.2;
  padding-top: 60px;
}

.sec1__ttl {
  font-size: 38px;
  font-weight: 500;
  letter-spacing: .2rem;
  margin-top: 72px;
  margin-bottom: 72px;
}

.sec1__box {
  display: flex;
  height: 838px;
}

.sec1__pic {
  width: 433px;
  height: 709px;
}

.sec1__pic:first-of-type {
  align-self: flex-end;
}

.sec1__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  padding-right: 20px;
}

.sec2 {
  position: relative;
  margin-bottom: 200px;
}

.sec2__bg {
  display: flex;
  position: relative;
  justify-content: center;
}

.sec2__bgpic {
  height: 667px;
  width: 100%;
  margin-bottom: 675px;
}

.sec2__bgimg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right bottom;
}

.sec2__ttl {
  position: absolute;
  top: 502px;
  font-size: 38px;
  font-weight: 500;
  letter-spacing: .2rem;
  margin-bottom: 32px;
}

.sec2__container {
  position: absolute;
  top: 597px;
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 22px 238px;
}

.sec2__hover {
  position: relative;
  width: 273px;
  height: 373px;
}

.sec2__pic {
  width: 323.5px;
  height: 473px;
  margin-bottom: 32px;
}

.sec2__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transition: .4s;
}

.sec2__img:hover {
  box-shadow: -10px -10px 15px #cacaca;
}

.sec2__txtttl {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: .1rem;
  margin-bottom: 10px;
}

.sec2__txt {
  width: 273px;
  font-size: 15px;
}

.sec2__subttl {
  font-size: 25px;
  font-weight: 500;
  text-align: center;
  letter-spacing: .2rem;
  margin-bottom: 32px;
}

.sec2__box2 {
  display: flex;
  align-items: center;
  margin-bottom: 100px;
  padding: 0 379px;
}

.sec2__pic2 {
  width: 500px;
  height: 500px;
}

.sec2__img2 {
  width: 100%;
  height: 100%;
  object-position: center center;
  object-fit: cover;
}

.sec2__img2:nth-of-type(2) {
  object-position: right center;
}

.txtbox {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 700px;
  height: 350px;
  background-color: #cbb8c418;
  padding-left: 100px;
}

.txtbox__txt1 {
  font-size: 10px;
  font-weight: 300;
  letter-spacing: .2rem;
  margin-bottom: 30px;
}

.txtbox__txt2 {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: .3rem;
  border-bottom: 1px solid #b5b5b581;
  padding-bottom: 20px;
  margin-right: 100px;
}

.txtbox__span {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .2rem;
}

.txtbox__txt3 {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: .2rem;
  margin: 20px 0 40px 0;
}

.txtbox__link {
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  background-color: #b5b5b581;
  padding: 10px 182.16px;
}

.txtbox__link:hover {
  opacity: .7;
}

.sec2__afterlink {
  position: relative;
  left: 847px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .2rem;
  border: 1px solid rgba(54, 54, 54, 0.404);
  border-radius: 50px;
  padding: 15px 40px;
}

.sec2__afterlink:hover {
  opacity: .7;
}

.sec2__afterlink::after {
  content: url(img/sec2_after.png);
  vertical-align: middle;
  padding-left: 10px;
}

.sec3 {
  margin-bottom: 200px;
}

.sec3__container {
  display: flex;
  margin-bottom: 50px;
}

.sec3__ttl {
  font-size: 38px;
  font-weight: 500;
  letter-spacing: .2rem;
  margin-bottom: 32px;
  margin-left: 126px;
}

.sec3__dl {
  width: 1161px;
  color: rgb(54, 54, 54);
  font-size: 14px;
  border-bottom: solid 1px rgba(54, 54, 54, 0.404);
  margin-left: 141px;
}

.sec3__dl:first-of-type {
  border-top: solid 1px rgba(54, 54, 54, 0.404);
}

.sec3__link {
  display: flex;
  text-decoration: none;
}

.sec3__dt {
  padding: 30px 100px;
}

.sec3__dd {
  padding: 30px 100px;
}

.sec3__linkafter {
  margin-left: 1352px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .2rem;
  border: 1px solid rgba(54, 54, 54, 0.404);
  border-radius: 50px;
  padding: 7px 38px;
}
.sec3__linkafter:hover {
  opacity: .7;
}

.sec3__linkafter::after {
  content: '→';
  vertical-align: middle;
  padding-left: 10px;
}

.sec3__mv {
  height: 400px;
  background: url(img/sec3_img.jpg) center top / cover;
  margin-top: 256.4px;
}

.sec4 {
  margin-bottom: 300px;
}

.sec4__ttl {
  font-size: 38px;
  font-weight: 500;
  letter-spacing: .2rem;
  text-align: center;
  margin-bottom: 100px;
}

.sec4__container {
  display: flex;
  gap: 48px;
  margin-left: 48px;
}

.sec4__pic {
  width: 912px;
  height: 540px;
} 

.sec4__img {
  width: 100%;
  height: 100%;
  object-position: center;
  object-fit: cover;
}

.sec4__box {
  position: relative;
  width: 630px;
  font-size: 14px;
  margin-right: 302px;
}

.sec4__txt {
  font-weight: 400;
  letter-spacing: .1rem;
  margin-bottom: 30px;
}

.sec4__txt1,.sec4__txt2after {
  font-weight: 500;
  letter-spacing: .2rem;
  margin-bottom: 30px;
}

.sec4__txt2after::after {
  position: absolute;
  bottom: 0;
  left: 213px;
  content: "";
  display: inline-block;
  background: url(img/sec4_map.jpg) center center / cover;
  width: 650px;
  height: 249px;
  cursor: pointer;
}

.footer__box {
  height: 671px;
  display: flex;
}

.footer__color {
  width: 960px;
  height: 540px;
  background-color: #5454547e;
}

.footer__pic {
  align-self: flex-end;
  width: 960px;
  height: 540px;
}

.footer__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
} 

.footer__logo {
  height: 50px;
  margin-left: 379px;
}

.footer__logolink {
  width: 172px;
  height: 50px;
  object-fit: cover;
}

.footer__list {
  list-style-type: none;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .1rem;
  margin-bottom: 10px;
  margin-left: 379px;
}

.footer__link {
  text-decoration: none;
}

.iconposition {
  position: relative;
  margin-bottom: 100px;
}

.icon {
 position: absolute;
 top: 118px;
 left: 960px;
 display: flex;
 justify-content: space-between;
 align-items: flex-end;
}

.icon__pic {
  width: 32px;
  height: 32px;
  margin-right: 15px;
}

.icon__img {
  width: 100%;
  height: 100%;
}

.follow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1rem;
  padding-right: 30px;
}

.footer__copy {
  background-color: rgb(54,54,54);
  text-align: center;
  padding: 48px 0;
}

.footer__small {
  color: #fff;
}