@charset "UTF-8";

/*
///////////////////////////////////////////////////////////////////////////////////////
                                                                                SETTING
///////////////////////////////////////////////////////////////////////////////////////
*/
.barbour_241008 {
  --color-white: #fff;
  --color-black: #000;
  --color-text: #58595b;
  --color-brown: #a1846c;
  --color-beige: #ebe3dd;
  --font-ryo: "ryo-text-plusn";
  --font-miller: "miller-headline";
  --font-en: var(--font-miller), sans-serif;
  --font-ja: var(--font-ryo), sans-serif;
  --font-main: var(--font-en), var(--font-ja), sans-serif;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  font-feature-settings: "palt";
  overflow: clip;
}


/*
//////////////////////////////////////////////////////////////////////////////////////////////
base style
//////////////////////////////////////////////////////////////////////////////////////////////
*/


.styleview__inner {
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2.5rem 0;
}
.barbour_241008 img,
.barbour_241008 picture {
  display: block;
  width: 100%;
  height: auto;
}

.mian_txt,
.txt_ttl {
  font-size: 2.4rem;
  line-height: 2;
  letter-spacing: .01em;
  color: var(--color-black ,#000);
  font-weight: var(--fw-bold);
  text-align: center;
}
.txtBox {
  font-size: 1.6rem;
  line-height: 2;
  letter-spacing: .01em;
  color: var(--color-black ,#000);
  font-weight: var(--fw-regular);
  width: 64rem;
  margin: 0 auto;
}


.left_ttl {
  display: block;
  text-align: left;
  font-size: 1.6rem;
  font-weight: bold;
  margin-bottom: 1.5rem;
}

@media screen and (max-width: 767px) {
  .styleview__inner {
    max-width: none;
    gap: calc(50 * (100vw / 750)) 0;
  }
  .mian_txt,
  .txt_ttl {
    font-size: calc(32 * (100vw / 750));
    line-height: 2;
    letter-spacing: .01em;
    color: var(--color-black);
    font-weight: var(--fw-bold);
    text-align: center;
  }
  .txtBox {
    font-size: calc(24*100vw/750);
    width: auto;
    padding: 0 calc(75* 100vw / 750);
  }
  .left_ttl {
    font-size: calc(26*(100vw / 750));
    margin-bottom: calc(25*(100vw / 750));
  }
  
  
}




/*
//////////////////////////////////////////////////////////////////////////////////////////////
firstview
//////////////////////////////////////////////////////////////////////////////////////////////
*/

.barbour_241008 {
  margin: 3rem auto 10rem;
}

section.firstview {
  width: 100rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2.5rem 0;
}

section.contents {
  width: 100rem;
  margin: 5rem auto 0;
}

.img02 {
  width: 70rem;
  margin: 0 auto;
}
.img03,
.img04,
.img05,
.img06,
.img07,
.img08 {
  width: 60rem;
  margin: 0 auto;
}

.btm_txt {
  font-size: 1.6rem;
  line-height: 2;
  letter-spacing: .01em;
  color: var(--color-black);
  font-weight: var(--fw-regular);
  text-align: center;
}

.img09 {
  width: 50rem;
  margin: 0 auto 0;
}

.lastview__btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30rem;
  height: 3.3rem;
  margin: 0 auto;
  font-size: 1.6rem;
  text-align: center;
  background-color: var(--color-black,#000);
  color: var(--color-white,#fff);
  transition: opacity .5s;
}
.lastview__btn:hover {
  opacity: 0.6;
}
.lastview__btn > a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

@media screen and (max-width: 767px) {
  .barbour_241008 {
    width: calc(750* 100vw / 750);
    margin: calc(0* 100vw / 750) auto calc(100* 100vw / 750);
  }
  
  section.firstview {
    width: 100%;
    gap: calc(50*(100vw / 750)) 0;
  }

  section.contents {
    width: calc(750* 100vw / 750);
    margin-top: calc(100* 100vw / 750);
  }

  .img02 {
    width: calc(600 * (100vw / 750));
  }
  .img03,
  .img04,
  .img05,
  .img06,
  .img07,
  .img08 {
    width: calc(600 * (100vw / 750));
  }
  
  .img09 {
    width: calc(500* 100vw / 750);
    margin: 0 auto;
  }

  .lastview__btn {
    width: calc(460*(100vw/750));
    height: calc(66*(100vw/750));
    font-size: calc(24*(100vw/750));
  }

  .btm_txt {
    font-size: calc(24 * (100vw / 750));
  }  
  
}