@charset "UTF-8";
/*---------------------------
common
-----------------------------*/
html{
  font-size: 62.5%;
  scroll-behavior: smooth;
}

body{
  font-family: "Noto Serif JP", "游明朝体", "YuMincho", "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
  color: #231815;
  font-size: 15px;
  font-weight: 400;
  text-align: left;
  line-height: 1.6;
  letter-spacing: 0.02em;
  background-color: #FAF9F6;
  color: #FFF;
  margin: 0;
  box-sizing: border-box;
}

.min{
  font-family: "游明朝体", "YuMincho", "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
  font-weight: 500;
}
.zen{
  font-family: "Zen Old Mincho", serif;
  font-weight: 400;
}
.go{
  font-family: Avenir Next, 'Avenir Next', 'Noto Sans JP', "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "游ゴシック体", "Yu Gothic", YuGothic, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight: 400;
}
.cormorant{
  font-family: 'Cormorant Garamond', '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;
  font-weight: 400;
}
.trajan{
  font-family: "trajan-pro-3", serif;
  font-weight: 400;
  font-style: normal;
}


::before,
::after{
  box-sizing: border-box;
  border-style: solid;
  border-width: 0;
}

main{
  position: relative;
  display: block;
}

p,
table,
blockquote,
address,
pre,
iframe,
form,
figure,
dl{
  margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6{
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  margin: 0;
}

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

dt{
  font-weight: bold;
}

dd{
  margin-left: 0;
}

hr{
  box-sizing: content-box;
  height: 0;
  overflow: visible;
  border-top-width: 1px;
  margin: 0;
  clear: both;
  color: inherit;
}

a{
  background-color: transparent;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

small{
  font-size: 80%;
}

sub,
sup{
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub{
  bottom: -0.25em;
}

sup{
  top: -0.5em;
}

iframe{
  vertical-align: bottom;
}

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

button,
input,
select,
textarea{
  -webkit-appearance: none;
  appearance: none;
  vertical-align: middle;
  color: inherit;
  font: inherit;
  background: transparent;
  padding: 0;
  margin: 0;
  outline: 0;
  border-radius: 0;
  text-align: inherit;
}

[type="checkbox"]{
  -webkit-appearance: checkbox;
  appearance: checkbox;
}

[type="radio"]{
  -webkit-appearance: radio;
  appearance: radio;
}

button,
input{
  overflow: visible;
}

button,
select{
  text-transform: none;
}

button,
[type="button"],
[type="reset"],
[type="submit"]{
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

option{
  padding: 0;
}

fieldset{
  margin: 0;
  padding: 0;
  min-width: 0;
}

textarea{
  overflow: auto;
}

label[for]{
  cursor: pointer;
}

table{
  border-collapse: collapse;
  border-spacing: 0;
}

td,
th{
  vertical-align: top;
  padding: 0;
}

th{
  text-align: left;
  font-weight: bold;
}

#main .contents{
  padding: 0;
}

.btn{
  transition: .3s;
}
.btn:hover{
  opacity: .8;
  text-decoration: none;
  transition: .3s;
}


/*---------------------------
デフォルトCSS
-----------------------------*/
.relative{
  position: relative;
}
.overflowHidden{
  overflow: hidden;
}
.img_note{
  position: absolute;
  left: 1.5em;
  bottom: .8em;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  color: #FFF;
}
.img_note.right{
  left: auto;
  right: 1.5em;
  text-align: right;
}
.img_note.black{
  color: #231815;
}

.no-link{
  pointer-events: none;
  opacity: 0.5;
}

@media screen and (max-width: 1400px) {
  .img_note{
    font-size: 0.85vw;
  }
}
@media screen and (max-width: 750px) {
  .img_note{
    font-size: 1.8vw;
  }
}

/*---------------------------
アニメーション用CSS
-----------------------------*/
.clipPath{
  clip-path: inset(0 0 100% 0);
  -webkit-clip-path: inset(0 0 100% 0);
  transition: 5s ease;
  -webkit-transition: 5s ease;
}
.clipPath.top-to-bottom.slow01{
  transition: 8s ease !important;
  -webkit-transition: 8s ease !important;
}
.clipPath.top-to-bottom.delay.slow02{
  transition: 15s ease !important;
  -webkit-transition: 15s ease !important;
}
.clipPath.delay{
  transition-delay: 2s;
  -webkit-transition-delay: 2s;
}
.clipPath.active{
  clip-path: inset(0 0 0 0);
  -webkit-clip-path: inset(0 0 0 0);
}
.clipPath.left-to-right {
  clip-path: inset(0 100% 0 0);
  -webkit-clip-path: inset(0 100% 0 0);
  transition: 2s ease-out;
  -webkit-transition: 2s ease-out;
}
.clipPath.left-to-right.active{
  clip-path: inset(0 0 0 0);
  -webkit-clip-path: inset(0 0 0 0);
}
.clipPath.right-to-left {
  clip-path: inset(0 0 0 100%);
  -webkit-clip-path: inset(0 0 0 100%);
  transition: 2s ease-out;
  -webkit-transition: 2s ease-out;
}
.clipPath.right-to-left.active{
  clip-path: inset(0 0 0 0);
  -webkit-clip-path: inset(0 0 0 0);
}
.clipPath.top-to-bottom {
  clip-path: inset(0 0 100% 0);
  -webkit-clip-path: inset(0 0 100% 0);
  transition: 4.5s ease;
  -webkit-transition: 4.5s ease;
  transition-delay: .3s;
  -webkit-transition-delay: .3s;
}
.clipPath.top-to-bottom.delay{
  clip-path: inset(0 0 100% 0);
  -webkit-clip-path: inset(0 0 100% 0);
  transition: 2.5s ease !important;
  -webkit-transition: 2.5s ease !important;
  transition-delay: 1.8s !important;
  -webkit-transition-delay: 1.8s !important;
}
.clipPath.top-to-bottom.active{
  clip-path: inset(0 0 0 0);
  -webkit-clip-path: inset(0 0 0 0);
}
.clipPath.bottom-to-top {
  clip-path: inset(100% 0 0 0);
  -webkit-clip-path: inset(100% 0 0 0);
  transition: 2s ease;
  -webkit-transition: 2s ease;
}
.clipPath.bottom-to-top.active{
  clip-path: inset(0 0 0 0);
  -webkit-clip-path: inset(0 0 0 0);
}


.scaleDown{
  transform: scale(1.2);
  -webkit-transform: scale(1.2);
  transition: 1.5s ease-out;
  -webkit-transition: 1.5s ease-out;
}
.scaleDown.slow{
  transform: scale(1.5);
  -webkit-transform: scale(1.5);
  transition: 4s ease-in-out;
  -webkit-transition: 4s ease-in-out;
}
.contents .scaleDown{
  transform: scale(1.05);
  -webkit-transform: scale(1.05);
  transition: 2s ease;
  -webkit-transition: 2s ease;
  transition-delay: .5s;
  -webkit-transition-delay: .5s;
}
.scaleDown.active{
  transform: scale(1);
  -webkit-transform: scale(1);
}

.scaleUp{
  transform: scale(.5);
  -webkit-transform: scale(.5);
  transition: 3s ease-out;
  -webkit-transition: 3s ease-out;
}
.scaleUp.active{
  transform: scale(1);
  -webkit-transform: scale(1);
}


.filterBlur{
  opacity: 0;
  filter: blur(20px);
  transition: 1.2s ease;
  -webkit-transition: 1.2s ease;
  -webkit-filter: blur(20px);
}
.filterBlur.early{
  opacity: 0.5 !important;
  filter: blur(20px);
  transition: 1.2s ease;
  -webkit-transition: 1.2s ease;
  -webkit-filter: blur(20px);
}
.filterBlur.slow{
  filter: blur(1em);
  transition: 1.5s ease;
  -webkit-transition: 1.5s ease;
  transition-delay: 1s;
  -webkit-transition-delay: 1s;
}
.filterBlur.delay{
  filter: blur(6px);
  transition: 1.6s ease;
  -webkit-transition: 1.6s ease;
  transition-delay: 1s;
  -webkit-transition-delay: 1s;
}
.filterBlur.active{
  opacity: 1 !important;
  filter: blur(0);
  -webkit-filter: blur(0);
}

.filterBlur-scaleUp{
  transition: opacity 2s linear, filter 2s linear, transform 2s linear;
  filter: blur(5px);
  transform: scale(1.6);
  opacity: 0;
}
.filterBlur-scaleUp.active{
  filter: blur(0);
  transform: scale(1.1);
  opacity: 1;
}

.blurUp{
  filter: blur(4px);
  -webkit-filter: blur(4px);
  transform: translate(0px, 20px);
  -webkit-transform: translate(0px, 20px);
  opacity: 0;
  transition: 1s ease;
  -webkit-transition: 1s ease;
}
.blurUp.delay{
  filter: blur(4px);
  -webkit-filter: blur(4px);
  transform: translate(0px, 10px);
  -webkit-transform: translate(0px, 10px);
  opacity: 0;
  transition: 1s ease;
  -webkit-transition: 1s ease;
  transition-delay: 1s;
  -webkit-transition-delay: 1s;
}
.blurUp.active{
  opacity: 1;
  filter: blur(0);
  -webkit-filter: blur(0);
  transform: translate(0px, 0px);
  -webkit-transform: translate(0px, 0px);
}

.translateUp{
  transform: translate(0px, 20px);
  -webkit-transform: translate(0px, 20px);
  opacity: 0;
  transition: transform 1.4s ease, opacity 1.4s ease;
  -webkit-transition: -webkit-transform 1.4s ease, opacity 1.4s ease;
  will-change: transform, opacity;
}
.translateUp.slow{
  transform: translate(0px, 20px);
  -webkit-transform: translate(0px, 20px);
  opacity: 0;
  transition: 2s linear;
  -webkit-transition: 2s linear;
}
.translateUp.delay{
  transform: translate(0px, 20px);
  -webkit-transform: translate(0px, 20px);
  opacity: 0;
  transition: 1.1s linear;
  -webkit-transition: 1.1s linear;
  transition-delay: 1.1s;
  -webkit-transition-delay:1.1s;
}

.translateUp.active{
  opacity: 1;
  transform: translate(0px, 0px);
  -webkit-transform: translate(0px, 0px);
}

.rotateTxt span{
  display: inline-block;
  opacity: 0;
  transform: rotateX(-90deg);
  -webkit-transform: rotateX(-90deg);
  transition: transform 2s ease-out, opacity 2s ease-out;
  -webkit-transition: transform 2s ease-out, opacity 2s ease-out;
}
.rotateTxt span.space{
  width: .5vw;
}
.rotateTxt.active span:nth-child(1) { transition-delay: 0s; transform: rotateX(0); -webkit-transform: rotateX(0); opacity: 1;}
.rotateTxt.active span:nth-child(2) { transition-delay: 0.1s; transform: rotateX(0); -webkit-transform: rotateX(0); opacity: 1;}
.rotateTxt.active span:nth-child(3) { transition-delay: 0.2s; transform: rotateX(0); -webkit-transform: rotateX(0); opacity: 1;}
.rotateTxt.active span:nth-child(4) { transition-delay: 0.3s; transform: rotateX(0); -webkit-transform: rotateX(0); opacity: 1;}
.rotateTxt.active span:nth-child(5) { transition-delay: 0.4s; transform: rotateX(0); -webkit-transform: rotateX(0); opacity: 1;}
.rotateTxt.active span:nth-child(6) { transition-delay: 0.5s; transform: rotateX(0); -webkit-transform: rotateX(0); opacity: 1;}
.rotateTxt.active span:nth-child(7) { transition-delay: 0.6s; transform: rotateX(0); -webkit-transform: rotateX(0); opacity: 1;}
.rotateTxt.active span:nth-child(8) { transition-delay: 0.7s; transform: rotateX(0); -webkit-transform: rotateX(0); opacity: 1;}
.rotateTxt.active span:nth-child(9) { transition-delay: 0.8s; transform: rotateX(0); -webkit-transform: rotateX(0); opacity: 1;}
.rotateTxt.active span:nth-child(10) { transition-delay: 0.9s; transform: rotateX(0); -webkit-transform: rotateX(0); opacity: 1;}
.rotateTxt.active span:nth-child(11) { transition-delay: 1.0s; transform: rotateX(0); -webkit-transform: rotateX(0); opacity: 1;}
.rotateTxt.active span:nth-child(12) { transition-delay: 1.1s; transform: rotateX(0); -webkit-transform: rotateX(0); opacity: 1;}
.rotateTxt.active span:nth-child(13) { transition-delay: 1.2s; transform: rotateX(0); -webkit-transform: rotateX(0); opacity: 1;}

.transform-accelerate {
  transform: translate3d(0, 0, 0);
}

.fade__in {
  -webkit-transition: all 1.4s cubic-bezier(0.37, 0, 0.63, 1) 0.01s;
  transition: all 1.4s cubic-bezier(0.37, 0, 0.63, 1) 0.01s;
  opacity: 0;
  transform: translate(0%, 0px);
  filter: blur(8px);
}

.fade__in.active {
  opacity: 1;
  transform: translate(0%, 0px);
  filter: blur(0px);
}

.fade__in--right {
  -webkit-transition: all 1.4s cubic-bezier(0.37, 0, 0.63, 1) 0.01s;
  transition: all 1.4s cubic-bezier(0.37, 0, 0.63, 1) 0.01s;
  opacity: 0;
  transform: translate(60px, 0px);
  filter: blur(8px);
}

.fade__in--right.active {
  opacity: 1;
  transform: translate(0%, 0px);
  filter: blur(0px);
}

.fade__in--left {
  -webkit-transition: all 1.4s cubic-bezier(0.37, 0, 0.63, 1) 0.01s;
  transition: all 1.4s cubic-bezier(0.37, 0, 0.63, 1) 0.01s;
  opacity: 0;
  transform: translate(-60px, 0px);
  filter: blur(8px);
}

.fade__in--left.active {
  opacity: 1;
  transform: translate(0%, 0px);
  filter: blur(0px);
}

@media(max-width:750px){
  .blurUp{
    filter: blur(0);
    -webkit-filter: blur(0);
    transform: translate(0px, 0px);
    -webkit-transform: translate(0px, 0px);
  }
  .filterBlur{
    filter: blur(0);
    -webkit-filter: blur(0);
  }

  .filterBlur.slow{
    transition-delay: 0s;
    -webkit-transition-delay: 0s;
  }
}

/*---------------------------
ヘッダー・フッター
-----------------------------*/
#header{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: transparent;
  transition: background 0.4s ease;
}
#header.is-scrolled{
  background: rgba(255, 255, 255, 0.7);
}
#header .conte{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 98%;
  margin-left: auto;
  margin-right: auto;
  padding-top: 8px;
  padding-bottom: 8px;
}
#header .logo{
  width: 184px;
}
#header .special_btn_wrap{
  position: relative;
  width: 162px;
}
#header .special_btn_wrap .tori{
  width: 57px;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-80%, -50%);
  pointer-events: none;
}
@media(max-width:1200px){
  #header .conte{
    padding-top: 0.66vw;
    padding-bottom: 0.66vw;
  }
  #header .logo{
    width: 15.33vw;
  }
  #header .special_btn_wrap{
    width: 13.5vw;
  }
  #header .special_btn_wrap .tori{
    width: 4.75vw;
  }
}
@media(max-width:750px){
  #header .conte{
    padding-top: 2.5vw;
    padding-bottom: 2.5vw;
  }
  #header .logo{
    width: 31.6vw;
  }
  #header .special_btn_wrap{
    width: 36vw;
  }
}

.footer {
  background-color: #231815;
  background-color: #000;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
}
.footer .footer__wrapper {
  padding-block: 3.4375rem;
}
@media screen and (max-width: 750px) {
  .footer .footer__wrapper {
    padding-block: 6.6666666667vw;
    width: 73.666667vw;
    margin-inline: auto;
  }
}
.footer .brandList {
  display: flex;
  align-items: center;
  justify-content: center;
  -moz-column-gap: 1.875vw;
       column-gap: 1.875vw;
}
@media screen and (max-width: 750px) {
  .footer .brandList {
    flex-wrap: wrap;
    gap: 4vw;
  }
}
.footer .brandList__item.-kisoji img,
.footer .brandList__item.-tokusendo img {
  width: 6.8125vw;
}
@media screen and (max-width: 750px) {
  .footer .brandList__item.-kisoji img,
  .footer .brandList__item.-tokusendo img {
    width: 14.5333333333vw;
  }
}
.footer .brandList__item.-daisyogun img,
.footer .brandList__item.-suzunoren img {
  width: 6.5vw;
}
@media screen and (max-width: 750px) {
  .footer .brandList__item.-daisyogun img,
  .footer .brandList__item.-suzunoren img {
    width: 13.8666666667vw;
  }
}
.footer .brandList__item.-kuidon img {
  width: 5.375vw;
}
@media screen and (max-width: 750px) {
  .footer .brandList__item.-kuidon img {
    width: 11.4666666667vw;
  }
}
.footer .brandList__item.-torikaku img {
  width: 3vw;
}
@media screen and (max-width: 750px) {
  .footer .brandList__item.-torikaku img {
    width: 6.4vw;
  }
}
.footer .brandList__item.-karashige img {
  width: 3.625vw;
}
@media screen and (max-width: 750px) {
  .footer .brandList__item.-karashige img {
    width: 7.7333333333vw;
  }
}
.footer .brandList__item.-sakabadaiana img {
  width: 5.3125vw;
}
@media screen and (max-width: 750px) {
  .footer .brandList__item.-sakabadaiana img {
    width: 11.3333333333vw;
  }
}
.footer .brandList__kisojigroup img {
  width: 12vw;
  margin-left: auto;
  margin-right: auto;
  margin-top: 3.5vw;
}

/*---------------------------
レスポンシブ対応
-----------------------------*/
@media(min-width:1400px){
  .tb_block{
    display: none;
  }
}
@media(max-width:1400px){
  .tb_block{
    display: block;
  }
}
@media(min-width:749px){
  .sp{
    display: none !important;
  }
}
@media(max-width:750px){
  .pc{
    display: none !important;
  }
}